網站制作都有哪些步驟

網站制作簡易流程介紹
The website production process simple introduction
1 策劃與草圖
Planning and sketches
2 設計與制做
Design and making
3 切割與導出
Cutting and export
4 編輯與模板
Editing and template
5 動畫與廣告
Animation and advertising
6 鏈接與上傳
Links and upload
按軟件及長度劃分制做步驟:
According to the software and length divided making steps:
1 策劃與草圖
Planning and sketches
1.1所有網站和其它設計作品的過程都是從策劃開始的。這是最能體現(xiàn)你的才華和創(chuàng)造力的地方。人大的區(qū)別于其它動物的地方就是會思考，會創(chuàng)造，而且唯有這點是難能可貴的!我們必須要在動手打開PS或FW制做界面前就要完成一個網站最最關鍵的策劃部分，它將直接影響
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
這個網站的成敗與否。一個優(yōu)秀的網站，不僅做得漂亮，而且要方便瀏覽，可讀性強，簡潔明快!
The success or failure of the website. A good website, not only to do well and to facilitate browsing, readable, concise and lively!
網站的風格，用色，版式，布局，欄目甚至每個細小的圖標都要經過精雕細琢，深思熟慮。而風格的制定要取決于你所做網站的瀏覽人群和讀者職業(yè)背景、文化程度和修養(yǎng)愛好等，只有投其所好才能大化地產生共鳴;另一方面取決于公司的類型和企業(yè)法人的喜好，如果不是要強加入你自己的意志的話，那上述幾點已經制定了網站大致的努力方向了!
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è)化的網站面向企業(yè)為主，所以我采用簡約風格，亮麗明快的顏色和風格，只要學學平面構成和色彩構成就知道如何按其風格去布置各個元素和內容，以及用何種顏色來營造你要表達的效果了，包括冷暖明暗都是很關鍵的。大面積的中性色不刺眼，而重要的引導視線可以讓亮色來擔當，冬天喜歡暖色夏天喜歡冷色是人之常情，藍色那種給人以信任和科技的底韻是我選擇它的原因，而像橙、黃等促進食欲的顏色更容易受到食品網站的青睞!
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本著簡潔科學的分類原則來劃分欄目:首頁客戶中心窄告介紹合作媒體常見問題媒體報道關于我們
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
欄目如果劃分不好的話，影響框架的調整，后果就是:重頭再來了，郁悶吧?
Column if bad word division, the influence of the framework adjustment, the result is: start again, depressed?
本網站主要面向濰坊企業(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好了，完成上面這些后請拿起筆在紙上按你的創(chuàng)意和設想畫一草圖，盡是具體些，好精細到每處陰影和描邊!這步很關鍵的說!
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é)最后就是準備制做網站時所需要的素材了，包括圖標，LOGO，廣告語，內容介紹等這都是最基本的!
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 設計與制做
Design and making
2.1如果草圖都已經繪制好后就可以打開PS或FW開工制做和設計我們的界面了，在這里我使用PS，雖然沒有FW的高效和專業(yè)但更加靈活和自由，這是我最喜歡的，也因為用慣了嘛!^^養(yǎ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頁面中先打框架然后再采用逐步細化的方法，還可以采用你自己獨特的手法，比如透明玻璃水晶按鈕等效果來營造特別的風格，要力求簡約和精致!不要放過每個細節(jié)的刻畫，即使是1*1的5%透明度的陰影都會給你的頁面增彩，別以為別人看不見!
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)成分層的習慣，這樣可以方便分類和編輯，不至于把上百個圖層放在一下層級里搞得一團亂麻，分不清楚。
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)秀的設計師應該有條理，所以請養(yǎng)成分類并為每個圖層命名的習慣，這決不是浪費你的時間!
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 切割與導出
Cutting and export
無論是PS還是FW，哪怕是AI做的設計界面，在切割的原則都是一樣的，請遵從以下幾個方面:
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首先要按大致的框架切割，如國字型或T字型，注意其完整性
According to the frame of the first roughly cutting, such as country word or T word, pay attention to their integrity
3.2對于要輸入的文字區(qū)域、大面積色塊或單獨的圖片以及flash動畫要單獨切割成非圖片格式的切片以備插入
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對于添加內容需要很長的區(qū)域要注意其伸縮性切割，若有圖案要保證可以重復排列
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在切割時要特別認真和小心，不要空留一行或列的一個象素的間隙，要放大讓切片都對齊，不留空隙
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其它如按鈕和空白處等自動生成的切片，以及創(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頁命令，導出為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中打開導出的HTML文件開始編輯，包括大表格居中，設置背景，修改空白可輸入區(qū)單元格背景為原來切割的圖片等
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等標簽，然后存為模板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通過模板新建各個頁面并添加入相應的內容
Through the template each page and new added to the corresponding contents
5 動畫與廣告
Animation and advertising
5.1按原來切片所容留的大小制做FL動畫廣告條，使用相應的文字內容和廣告語，在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復制粘貼廣告詞到場景中，排版并轉換為元件578*104
Copy paste AD copy to the scene, layout and convert to element 578 * 104
5.3添加相應的背景和動畫，調試節(jié)奏后發(fā)布為SWF文件
Add the corresponding background and animation, debugging promulgated after the rhythm for SWF file
5.4插入到DW中的模板頁并調整大小后存盤，其它的頁面會自動更新
Insert into the template pages and adjust DW after inventory size, other page is automatically updated
6 鏈接與上傳
Links and upload
6.1重新設置模板頁的導航鏈接，本步驟也可在第四節(jié)完成
Reset template page navigation links, this step also can be finished in the fourth quarter
6.2在本地打開首頁檢查鏈接與文字內容直到無錯，確保鏈接可正常訪問
In local open the front page text links and check until no wrong, make sure the links to normal visit
6.3上傳到申請的空間，在域名解析成功后在瀏覽器中瀏覽網上的效果并做相應后期維護!
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ā)布于成都網站建設公司創(chuàng)新互聯(lián)http://www.bm7419.com/