下面流程不一定為標準流程,我們只取其中可取的地方,如果那里你覺得不合適,與現(xiàn)在的方法相去甚遠,那么我們完全不比要再去看,我是這么認為的,里面有可取的地方,也有很多不需要的地方,現(xiàn)在根本用不上,多讀沒什么壞處的
1 策劃與草圖
1.1所有網(wǎng)站和其它設(shè)計作品的過程都是從策劃開始的。這是更能體現(xiàn)你的才華和創(chuàng)造力的地方。人更大的區(qū)別于其它動物的地方就是會思考,會創(chuàng)造,而且唯有這點是難能可貴的!我們必須要在動手打開PS或FW制做界面前就要完成一個網(wǎng)站更更關(guān)鍵的策劃部分,它將直接影響
這個網(wǎng)站的成敗與否。一個**的網(wǎng)站,不僅做得漂亮,而且要方便瀏覽,可讀性強,簡潔明快!
網(wǎng)站的風格,用色,版式,布局,欄目甚至每個細小的圖標都要經(jīng)過精雕細琢,深思熟慮。而風格的制定要取決于你所做網(wǎng)站的瀏覽人群和讀者職業(yè)背景、文化程度和修養(yǎng)愛好等,只有投其所好才能更大化地產(chǎn)生共鳴;另一方面取決于公司的類型和企業(yè)法人的喜好,如果不是要強加入你自己的意志的話,那上述幾點已經(jīng)制定了網(wǎng)站大致的努力方向了!
1.2本站是商業(yè)化的網(wǎng)站面向企業(yè)為主,所以我采用簡約風格,亮麗明快的顏色和風格,只要學學平面構(gòu)成和色彩構(gòu)成就知道如何按其風格去布置各個元素和內(nèi)容,以及用何種顏色來營造你要表達的效果了,包括冷暖明暗都是很關(guān)鍵的。大面積的中性色不刺眼,而重要的引導視線可以讓亮色來擔當,冬天喜歡暖色夏天喜磺凹鎬色是人之常情,藍色那種給人以信任和科技的底韻是我選擇它的原因,而像橙、黃等促進食欲的顏色更容易受到食品網(wǎng)站的青睞!
1.3本著簡潔科學的分類原則來劃分欄目:首頁 客戶中心 窄告介紹 合作媒體 常見問題 媒體報道 關(guān)于我們
欄目如果劃分不好的話,影響框架的調(diào)整,后果就是:重頭再來了,郁悶吧?
本網(wǎng)站主要面向濰坊企業(yè),所以要做得本地化,讓人看了感覺親切,而且要做得漂亮
1.4好了,完成上面這些后請拿起筆在紙上按你的創(chuàng)意和設(shè)想畫一草圖,盡是具體些,更好精細到每處陰影和描邊!這步很關(guān)鍵的說!
1.5本節(jié)更后就是準備制做網(wǎng)站時所需要的素材了,包括圖標,LOGO,廣告語,內(nèi)容介紹等這都是更基本的!
2 設(shè)計與制做
2.1如果草圖都已經(jīng)繪制**后就可以打開PS或FW開工制做和設(shè)計我們的界面了,在這里我使用PS,雖然沒有FW的**和專業(yè)但更加靈活和自由,這是我更喜歡的,也因為用慣了嘛!^^養(yǎng)兵千日用兵一時,平時的練習和學習在這里派上用場了!
2.2可以在新建的778*600頁面中先打框架然后再采用逐步細化的方法,還可以采用你自己前幾特的手法,比如透明玻璃水晶按鈕等效果來營造特別的風格,要力求簡約和精致!不要放過每個細節(jié)的刻畫,即使是1*1的5%透明度的陰影都會給你的頁面增彩,別以為別人看不見!
2.3更好養(yǎng)成分層的習慣,這樣可以方便分類和編輯,不至于把上百個圖層放在一下層記凹革搞得一團亂麻,分不清楚。
作為一名**的設(shè)計師應(yīng)該有條理,所以請養(yǎng)成分類并為每個圖層命名的習慣,這決不是浪費你的時間!
3 切割與導出
無論是PS還是FW,哪怕是AI做的設(shè)計界面,在切割的原則都是一樣的,請遵從以下幾個方面:
3.1首先要按大致的框架切割,如國字型或T字型,注意其完整性
3.2對于要輸入的文字區(qū)域、大面積色塊或單前幾的圖片以及Flash動畫要單前幾切割成非圖片格式的切片以備插入
3.3對于添加內(nèi)容需要很長的區(qū)域要注意其伸縮性切割,若有圖案要保證可以重復排列
3.4在切割時要特別認真和小心,不要空留一行或列的一個象素的間隙,要放大讓切片都對齊,不留空隙
3.5其它如按鈕和空白處等自動生成的切片,以及創(chuàng)建需要改變圖片外觀的切片等
切割完畢后,選擇文件另存為WEB頁命令,導出為HTML文件待DW編輯。
4 編輯與模板
4.1在DW中打開導出的HTML文件開始編輯,包括大表格居中,設(shè)置背景,修改空白可輸入?yún)^(qū)單元格背景為原來切割的圖片等
4.2將編輯完畢的文件添加CSS樣式,包括更基本的TD和ALINK等標簽,然后存為模板DWT文件,并^+alt+v新建可編輯區(qū)域
4.3通過模板新建各個頁面并添加入相應(yīng)的內(nèi)容
5 動畫與廣告
5.1按原來切片所容留的大小制做FL動畫廣告條,使用相應(yīng)的文字內(nèi)容和廣告語,在FL中新建文件
5.2復制粘貼廣告詞到場景中,排版并轉(zhuǎn)換為元件578*104
5.3添加相應(yīng)的背景和動畫,調(diào)試節(jié)奏后發(fā)布為SWF文件
5.4插入到DW中的模板頁并調(diào)整大小后存盤,其它的頁面會自動更新
6 鏈接與上傳
6.1重新設(shè)置模板頁的導航鏈接,本步驟也可在第四節(jié)完成
6.2在本地打開首頁檢查鏈接與文字內(nèi)容直到無錯,確保鏈接可正常訪問
6.3上傳到申請的空間,在域名解析成功后在瀏覽器中瀏覽網(wǎng)上的效果并做相應(yīng)后期維護
網(wǎng)站建設(shè)流程/怎么制作網(wǎng)站,希望對您有用。