完整網頁設計的步驟

一、確定網站主題

1、 分析網站的功能，講網站所有的功能再文檔中體現

2、 分析網站的主題，選擇符合網站主題的方案

二、搜集材料

1、 通過和與網站相關人員的接觸、交流確定網站需要的模塊，并將這些
模塊再文檔中體現
2、 收集相關圖片、文字、視頻等資料

3、 將圖片、文字、視頻等資料使用相應的軟件進行編輯備用（必須做）

4、 對圖片、文字、視頻等資料分別分類整理

5、 例如：網站根文件夾下images文件夾存放網頁界面圖片（圖片類型為

jpg、jpeg、gif、png），pic文件夾存放照片素材，flash文件夾存放動畫素材

6、 所有素材的文件名都必須是非中文字符，并且要做到看到文件名就知

道是哪張圖片

三、規劃網站

1、網站的結構（目錄結構），首頁名稱（index.html）、子頁面名稱（1.html、2.html、3.html），以及其所在的目錄等，必須再文檔中體現（繪制目錄地圖）
2、欄目的設置，欄目必須再文檔中體現 3、網站的風格
4、顏色搭配（主色調和輔助色調以及點睛色的RGB值是多少，要再文檔中體現）

5、版面布局（例如：國字型、廠字型），結構要再文檔中體現

6、繪制首頁界面圖（草圖）

四、設計工具的選擇

1、photoshop＋dreamweaver＋flash 2、firework＋dreamweaver＋flash 3、其他工具或者直接編碼

五、制作網頁

1、在計算機的硬盤建立一個目錄，作為存放網站的根目錄，例如：E:\WWW目錄。   

2、使用圖象設計軟件設計網頁首頁界面（根據首頁界面草圖）。

注意：

①每加一個界面元素都要分層。

②顏色嚴禁暖色調和冷色調混用。

③圖片添加的時候要注意過渡

④網頁的界面不該加的東西不要加，例如一些文字，如果文字不需要特殊效果，在設計界面的時候不需要添加

⑤界面的大小：寬一般為780象素，高不小于435象素

3、保存
注意：①首先將源文件保存為*.psd文件，例如：index.psd，目錄為網站的

根目錄，例如：E:\WWW ②嚴禁合并圖層

4、使用切片，將用photoshop設計的psd文件進行切片

注意：

①切片遵守從左到右，從上到下的過程切片

②切片要將整個界面全部切片，嚴禁留下切片縫隙

③注意每個切片都應和周圍切片對齊

④切片的時候要注意每個切片的獨立性，單獨功能的切片單獨切。

⑤ 切片的時候要考慮切片以后在dreamweaver中是否容易編輯

5、保存切片

注意：

①保存的時候，保存類型選輸出html和gif

②文件名為index

③ 保存路徑為你所準備好的存放網頁的目錄的根目錄

④最終根文件夾中應出現index.html和images文件夾，這兩個文件夾都必須保留
7、 使用dreamweaver編輯網頁首頁

注意：

①首先建立站點，使用dreamweaver連接網站目錄的根文件夾，例

如：E:\WWW，連接方法為網站的根目錄設為E:\WWW，網絡設置為無

② 站點與網站根目錄連接好以后，編輯index.html首頁

③ 在index.html上添加必用的內容，文字、圖片、動畫、鏈接（鏈接子頁面，目錄必須采用相對目錄）等，并且整體居中對齊，目錄必須全部使用相對目錄，將首頁設計完成
④首頁完全設計好以后，在首頁的基礎上設計子頁面，方法為：首先將首頁另存為1.html，目錄為網站根目錄（E:\WWW），打開1.html，將網頁的主體內容換為子頁面的主體內容，保存。其他的子頁面也是同樣的方法。

8、 本地測試 打開index.html，然后將所有的網頁瀏覽一遍，檢查是否右錯誤( 內容是否完整、界面是否合理，鏈接是否正確)

六、上傳測試

1、將網站根目錄的內容全部上傳服務器對應的文件夾下，例如第三個實驗，將E:\WWW中的內容全部復制到服務器對應文件夾3這個目錄下。

2、文件夾3這個目錄要包含如下文件和文件夾：index.html（首頁）、1.html、2.html（子頁面）…….、images(界面圖像文件夾)、index.psd（首頁圖像源文件）

3、使用http://192.168.0.1這個地址對網站進行測試，如沒有任何問題，說明網站測試成功

七、推廣宣傳

1、申請域名、空間

2、網頁上傳空間

3、宣傳推廣、提高訪問量

文章題目：完整網頁設計的步驟
當前URL：http://m.newbst.com/news/183798.html

成都網站建設公司_創新互聯，為您提供網站設計、云服務器、軟件開發、微信小程序、自適應網站、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯