2016-08-30 分類: 網(wǎng)站建設(shè)
一、 確定網(wǎng)站主題
1、 分析網(wǎng)站的功能,講網(wǎng)站所有的功能再文檔中體現(xiàn)
2、 分析網(wǎng)站的主題,選擇符合網(wǎng)站主題的方案
二、 搜集材料
1、 通過和與網(wǎng)站相關(guān)人員的接觸、交流確定網(wǎng)站需要的模塊,并將這些模塊再文檔中體現(xiàn);
2、 收集相關(guān)圖片、文字、視頻等資料;
3、 將圖片、文字、視頻等資料使用相應(yīng)的軟件進(jìn)行編輯備用(必須做);
4、 對(duì)圖片、文字、視頻等資料分別分類整理;
5、 例如:網(wǎng)站根文件夾下images文件夾存放網(wǎng)頁界面圖片(圖片類型為jpg、jpeg、gif、png),pic文件夾存放照片素材,flash文件夾存放動(dòng)畫素材;
6、 所有素材的文件名都必須是非中文字符,并且要做到看到文件名就知道是哪張圖片
三、規(guī)劃網(wǎng)站
1、網(wǎng)站的結(jié)構(gòu)(目錄結(jié)構(gòu)),首頁名稱(index.html)、子頁面名稱(1.html、2.html、3.html),以及其所在的目錄等,必須再文檔中體現(xiàn)(繪制目錄地圖);
2、欄目的設(shè)置,欄目必須再文檔中體現(xiàn);
3、網(wǎng)站的風(fēng)格;
4、顏色搭配(主色調(diào)和輔助色調(diào)以及點(diǎn)睛色的RGB值是多少,要再文檔中體現(xiàn))當(dāng)然,也要根據(jù)產(chǎn)品及行業(yè)性質(zhì)來搭配顏色,比如餐飲要暖色調(diào);
5、版面布局(例如:國字型、廠字型),結(jié)構(gòu)要再文檔中體現(xiàn);
6、繪制首頁界面圖(草圖)。
四、設(shè)計(jì)工具的選擇
1、photoshop+dreamweaver+flash;
2、firework+dreamweaver+flash;
3、其他工具或者直接編碼。
五、制作網(wǎng)頁
1、在計(jì)算機(jī)的硬盤建立一個(gè)目錄,作為存放網(wǎng)站的根目錄,例如:E:WWW目錄;
2、使用圖象設(shè)計(jì)軟件設(shè)計(jì)網(wǎng)頁首頁界面(根據(jù)首頁界面草圖);
注意:①每加一個(gè)界面元素都要分層。
②顏色嚴(yán)禁暖色調(diào)和冷色調(diào)混用。
③圖片添加的時(shí)候要注意過渡
④網(wǎng)頁的界面不該加的東西不要加,例如一些文字,如果文字不需要特殊效果,在設(shè)計(jì)界面的時(shí)候不需要添加
⑤界面的大?。簩捯话銥?80象素,高不小于435象素
3、保存
注意:①首先將源文件保存為*.psd文件,例如:index.psd,目錄為網(wǎng)站的根目錄,例如:E:WWW
②嚴(yán)禁合并圖層
4、使用切片,將用photoshop設(shè)計(jì)的psd文件進(jìn)行切片
注意:①切片遵守從左到右,從上到下的過程切片
②切片要將整個(gè)界面全部切片,嚴(yán)禁留下切片縫隙
③注意每個(gè)切片都應(yīng)和周圍切片對(duì)齊
④切片的時(shí)候要注意每個(gè)切片的獨(dú)立性,單獨(dú)功能的切片單獨(dú)切。
⑤切片的時(shí)候要考慮切片以后在dreamweaver中是否容易編輯
5、保存切片
注意:①保存的時(shí)候,保存類型選輸出html和gif
②文件名為index
③保存路徑為你所準(zhǔn)備好的存放網(wǎng)頁的目錄的根目錄
④最終根文件夾中應(yīng)出現(xiàn)index.html和images文件夾,這兩個(gè)文件夾都必須保留
6、 使用dreamweaver編輯網(wǎng)頁首頁
注意:①首先建立站點(diǎn),使用dreamweaver連接網(wǎng)站目錄的根文件夾,例如:E:WWW,連接方法為網(wǎng)站的根目錄設(shè)為E:WWW,網(wǎng)絡(luò)設(shè)置為無;
②站點(diǎn)與網(wǎng)站根目錄連接好以后,編輯index.html首頁;
③在index.html上添加必用的內(nèi)容,文字、圖片、動(dòng)畫、鏈接(鏈接子頁面,目錄必須采用相對(duì)目錄)等,并且整體居中對(duì)齊,目錄必須全部使用相對(duì)目錄,將首頁設(shè)計(jì)完成;
④首頁完全設(shè)計(jì)好以后,在首頁的基礎(chǔ)上設(shè)計(jì)子頁面,方法為:首先將首頁另存為1.html,目錄為網(wǎng)站根目錄(E:WWW),打開1.html,將網(wǎng)頁的主體內(nèi)容換為子頁面的主體內(nèi)容,保存。其他的子頁面也是同樣的方法。
7、 本地測(cè)試
打開index.html,然后將所有的網(wǎng)頁瀏覽一遍,檢查是否右錯(cuò)誤( 內(nèi)容是否完整、界面是否合理,鏈接是否正確)。
六、上傳測(cè)試
1、將網(wǎng)站根目錄的內(nèi)容全部上傳服務(wù)器對(duì)應(yīng)的文件夾下,例如第三個(gè)實(shí)驗(yàn),將E:WWW中的內(nèi)容全部復(fù)制到服務(wù)器對(duì)應(yīng)文件夾3這個(gè)目錄下;
2、文件夾3這個(gè)目錄要包含如下文件和文件夾:index.html(首頁)、1.html、2.html(子頁面)…….、images(界面圖像文件夾)、index.psd(首頁圖像源文件);
3、使用IP地址對(duì)網(wǎng)站進(jìn)行測(cè)試,如沒有任何問題,說明網(wǎng)站測(cè)試成功。
七、推廣宣傳
1、申請(qǐng)域名、空間;
2、網(wǎng)頁上傳空間;
3、宣傳優(yōu)化推廣、提高訪問量。
標(biāo)題名稱:細(xì)說企業(yè)網(wǎng)頁設(shè)計(jì)制作的步驟及流程
當(dāng)前URL:http://www.rwnh.cn/news/43411.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、ChatGPT、網(wǎng)站導(dǎo)航、虛擬主機(jī)、關(guān)鍵詞優(yōu)化、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容