網(wǎng)站制作簡(jiǎn)易流程介紹
The website production process simple introduction
1 策劃與草圖
Planning and sketches
2 設(shè)計(jì)與制做
Design and making
3 切割與導(dǎo)出
Cutting and export
4 編輯與模板
Editing and template
5 動(dòng)畫與廣告
Animation and advertising
6 鏈接與上傳
Links and upload
按軟件及長(zhǎng)度劃分制做步驟:
According to the software and length divided making steps:
1 策劃與草圖
Planning and sketches
1.1所有網(wǎng)站和其它設(shè)計(jì)作品的過程都是從策劃開始的。這是最能體現(xiàn)你的才華和創(chuàng)造力的地方。人大的區(qū)別于其它動(dòng)物的地方就是會(huì)思考，會(huì)創(chuàng)造，而且唯有這點(diǎn)是難能可貴的!我們必須要在動(dòng)手打開PS或FW制做界面前就要完成一個(gè)網(wǎng)站最最關(guān)鍵的策劃部分，它將直接影響
All web sites and other design works from the start of the planning process. This is the most can reflect your talent and creativity of the place. The biggest difference between the people in other animals place is thinking, can create, and only this is valuable. We have to be on hands-on opened PS or FW making industry shall be completed before a key part of the most web site planning, it will directly influence
這個(gè)網(wǎng)站的成敗與否。一個(gè)優(yōu)秀的網(wǎng)站，不僅做得漂亮，而且要方便瀏覽，可讀性強(qiáng)，簡(jiǎn)潔明快!
The success or failure of the website. A good website, not only to do well and to facilitate browsing, readable, concise and lively!
網(wǎng)站的風(fēng)格，用色，版式，布局，欄目甚至每個(gè)細(xì)小的圖標(biāo)都要經(jīng)過精雕細(xì)琢，深思熟慮。而風(fēng)格的制定要取決于你所做網(wǎng)站的瀏覽人群和讀者職業(yè)背景、文化程度和修養(yǎng)愛好等，只有投其所好才能大化地產(chǎn)生共鳴;另一方面取決于公司的類型和企業(yè)法人的喜好，如果不是要強(qiáng)加入你自己的意志的話，那上述幾點(diǎn)已經(jīng)制定了網(wǎng)站大致的努力方向了!
The website's style, coloring, format, layout, column and even every tiny ICONS are through excelsior, thoughtful. And the formulation of style depends on what you do web browsing the crowd and readers professional background, education and training the hobby, only cast its place to maximize the resonate; On the other hand depends on the type of company of the enterprise as a legal person and be fond of, if it's better to join you will of his own words, that the points above has made the web site the direction of roughly!!!!
1.2本站是商業(yè)化的網(wǎng)站面向企業(yè)為主，所以我采用簡(jiǎn)約風(fēng)格，亮麗明快的顏色和風(fēng)格，只要學(xué)學(xué)平面構(gòu)成和色彩構(gòu)成就知道如何按其風(fēng)格去布置各個(gè)元素和內(nèi)容，以及用何種顏色來(lái)營(yíng)造你要表達(dá)的效果了，包括冷暖明暗都是很關(guān)鍵的。大面積的中性色不刺眼，而重要的引導(dǎo)視線可以讓亮色來(lái)?yè)?dān)當(dāng)，冬天喜歡暖色夏天喜歡冷色是人之常情，藍(lán)色那種給人以信任和科技的底韻是我選擇它的原因，而像橙、黃等促進(jìn)食欲的顏色更容易受到食品網(wǎng)站的青睞!
1.2 this site is the website of the commercial enterprises, so I use simple style, bright beautiful and lively color and style, as long as the plane composition and learn color composition knew how to according to the style to decorate each element and content, and with what kind of color to build you want to express the effect, including changes in temperature and light and shade is essential. Large areas of neuter color not dazzling, and important guiding the view can let bright color to bear, winter like warm color summer like cool color is human nature, that give a person with blue trust and technology DE yun is my choice of the causes, and like orange and yellow color of promote appetite more vulnerable to food web site favor!
1.3本著簡(jiǎn)潔科學(xué)的分類原則來(lái)劃分欄目:首頁(yè)客戶中心窄告介紹合作媒體常見問題媒體報(bào)道關(guān)于我們
1.3 in line with concise scientific classification principle to differentiate column: front page customer center against media introduced narrow the common problems in media reports about us
欄目如果劃分不好的話，影響框架的調(diào)整，后果就是:重頭再來(lái)了，郁悶吧?
Column if bad word division, the influence of the framework adjustment, the result is: start again, depressed?
本網(wǎng)站主要面向?yàn)H坊企業(yè)，所以要做得本地化，讓人看了感覺親切，而且要做得漂亮，廢話!!
This web site mainly to weifang enterprise, so to do localization, let a person see the sense kind, and to do well, blah!
1.4好了，完成上面這些后請(qǐng)拿起筆在紙上按你的創(chuàng)意和設(shè)想畫一草圖，盡是具體些，好精細(xì)到每處陰影和描邊!這步很關(guān)鍵的說(shuō)!
1.4 good, complete the above, please take up a pen on paper according to your creative ideas and draw a sketch, with some specific, best fine to every place of shadow and stroke! This step is the key!
1.5本節(jié)最后就是準(zhǔn)備制做網(wǎng)站時(shí)所需要的素材了，包括圖標(biāo)，LOGO，廣告語(yǔ)，內(nèi)容介紹等這都是最基本的!
1.5 this section is ready to make final web sites need the source material, including ICONS, LOGO, advertising, introduced the content such as is the most basic!
2 設(shè)計(jì)與制做
Design and making
2.1如果草圖都已經(jīng)繪制好后就可以打開PS或FW開工制做和設(shè)計(jì)我們的界面了，在這里我使用PS，雖然沒有FW的高效和專業(yè)但更加靈活和自由，這是我最喜歡的，也因?yàn)橛脩T了嘛!^^養(yǎng)兵千日用兵一時(shí)，平時(shí)的練習(xí)和學(xué)習(xí)在這里派上用場(chǎng)了!呵呵!
If sketches are drawing perfect after it is opened PS or FW start making and design our interface, here I use PS, although do not have efficient and professional FW but more flexible and free, that is my favorite, but also because of used to! ^ ^ only thing seven years time, the practice and study here come in handy! Ha ha!
2.2可以在新建的778*600頁(yè)面中先打框架然后再采用逐步細(xì)化的方法，還可以采用你自己獨(dú)特的手法，比如透明玻璃水晶按鈕等效果來(lái)營(yíng)造特別的風(fēng)格，要力求簡(jiǎn)約和精致!不要放過每個(gè)細(xì)節(jié)的刻畫，即使是1*1的5%透明度的陰影都會(huì)給你的頁(yè)面增彩，別以為別人看不見!
Can on the new 778 * 600 page first dozen framework and then using stepwise refinement of method, still can use your own unique technique, such as transparent glass crystal button to create the special effects such as style, try to be contracted and exquisite! Don't let every detail of characterization, even 1 * 1 5% of the transparency of the shadow will give you increase the page color, don't think that other people can't see!
2.3好養(yǎng)成分層的習(xí)慣，這樣可以方便分類和編輯，不至于把上百個(gè)圖層放在一下層級(jí)里搞得一團(tuán)亂麻，分不清楚。
The best form the habit of layered, so that can be easily classification and editing, and not to the levels hundreds of layer on the make a haslong been, points not clear.
作為一名優(yōu)秀的設(shè)計(jì)師應(yīng)該有條理，所以請(qǐng)養(yǎng)成分類并為每個(gè)圖層命名的習(xí)慣，這決不是浪費(fèi)你的時(shí)間!
As an excellent designers should be organized, so please get classification and for each layer of naming habits, this will never be wasting your time!
3 切割與導(dǎo)出
Cutting and export
無(wú)論是PS還是FW，哪怕是AI做的設(shè)計(jì)界面，在切割的原則都是一樣的，請(qǐng)遵從以下幾個(gè)方面:
Whether PS or FW, even if it is AI do design interface in the principle of cutting are the same, please follow the following several aspects:
3.1首先要按大致的框架切割，如國(guó)字型或T字型，注意其完整性
According to the frame of the first roughly cutting, such as country word or T word, pay attention to their integrity
3.2對(duì)于要輸入的文字區(qū)域、大面積色塊或單獨(dú)的圖片以及flash動(dòng)畫要單獨(dú)切割成非圖片格式的切片以備插入
Input text to regional, large area color piece or separate pictures and flash animation to separate cutting into the image format slice for insert
3.3對(duì)于添加內(nèi)容需要很長(zhǎng)的區(qū)域要注意其伸縮性切割，若有圖案要保證可以重復(fù)排列
To add content need a long area should pay attention to its flexibility cutting, if there is a design to ensure that the arrangement can be repeated
3.4在切割時(shí)要特別認(rèn)真和小心，不要空留一行或列的一個(gè)象素的間隙，要放大讓切片都對(duì)齊，不留空隙
In cutting to special earnest and be careful, don't empty kept one row or column of a pixel gap, to enlarge the paraffin sections to align, leaving no space
3.5其它如按鈕和空白處等自動(dòng)生成的切片，以及創(chuàng)建需要改變圖片外觀的切片等
Other such as buttons and a blank space, automatically generated slice, and create a need to change the image of the look of the slice, etc
切割完畢后，選擇文件另存為WEB頁(yè)命令，導(dǎo)出為HTML文件待DW編輯。
After the completion of the cutting, choose file save for WEB page order, export to HTML documents to DW editor.
4 編輯與模板
Editing and template
4.1在DW中打開導(dǎo)出的HTML文件開始編輯，包括大表格居中，設(shè)置背景，修改空白可輸入?yún)^(qū)單元格背景為原來(lái)切割的圖片等
In the open in DW derived HTML documents to edit, including big form center, set background, modify the blank input area cell background for cutting the original pictures
4.2將編輯完畢的文件添加CSS樣式，包括最基本的TD和ALINK等標(biāo)簽，然后存為模板DWT文件，并^+alt+v新建可編輯區(qū)域
The editor of the file will add CSS styles, including the most basic TD and ALINK, labels and save as template DWT files, and ^ + Alt + v new can edit area
4.3通過模板新建各個(gè)頁(yè)面并添加入相應(yīng)的內(nèi)容
Through the template each page and new added to the corresponding contents
5 動(dòng)畫與廣告
Animation and advertising
5.1按原來(lái)切片所容留的大小制做FL動(dòng)畫廣告條，使用相應(yīng)的文字內(nèi)容和廣告語(yǔ)，在FL中新建文件
According to the size of the original slice shelter making FL animation article advertising, use the corresponding text content and advertising, in FL new file
5.2復(fù)制粘貼廣告詞到場(chǎng)景中，排版并轉(zhuǎn)換為元件578*104
Copy paste AD copy to the scene, layout and convert to element 578 * 104
5.3添加相應(yīng)的背景和動(dòng)畫，調(diào)試節(jié)奏后發(fā)布為SWF文件
Add the corresponding background and animation, debugging promulgated after the rhythm for SWF file
5.4插入到DW中的模板頁(yè)并調(diào)整大小后存盤，其它的頁(yè)面會(huì)自動(dòng)更新
Insert into the template pages and adjust DW after inventory size, other page is automatically updated
6 鏈接與上傳
Links and upload
6.1重新設(shè)置模板頁(yè)的導(dǎo)航鏈接，本步驟也可在第四節(jié)完成
Reset template page navigation links, this step also can be finished in the fourth quarter
6.2在本地打開首頁(yè)檢查鏈接與文字內(nèi)容直到無(wú)錯(cuò)，確保鏈接可正常訪問
In local open the front page text links and check until no wrong, make sure the links to normal visit
6.3上傳到申請(qǐng)的空間，在域名解析成功后在瀏覽器中瀏覽網(wǎng)上的效果并做相應(yīng)后期維護(hù)!
To apply for space, in the domain name system after the success in the browser on the online effect and do late corresponding maintenance!
本文發(fā)布于成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)http://jinyejixie.com/