2022-07-31 分類: 網站建設
完整網頁設計的步驟
一、確定網站主題
1、 分析網站的功能,講網站所有的功能再文檔中體現
2、 分析網站的主題,選擇符合網站主題的方案
二、搜集材料
1、 通過和與網站相關人員的接觸、交流確定網站需要的模塊,并將這些3、 將圖片、文字、視頻等資料使用相應的軟件進行編輯備用(必須做)
4、 對圖片、文字、視頻等資料分別分類整理
5、 例如:網站根文件夾下images文件夾存放網頁界面圖片(圖片類型為jpg、jpeg、gif、png),pic文件夾存放照片素材,flash文件夾存放動畫素材
6、 所有素材的文件名都必須是非中文字符,并且要做到看到文件名就知
道是哪張圖片
三、規劃網站
1、網站的結構(目錄結構),首頁名稱(index.html)、子頁面名稱(1.html、2.html、3.html),以及其所在的目錄等,必須再文檔中體現(繪制目錄地圖)5、版面布局(例如:國字型、廠字型),結構要再文檔中體現
6、繪制首頁界面圖(草圖)
四、設計工具的選擇
1、photoshop+dreamweaver+flash 2、firework+dreamweaver+flash 3、其他工具或者直接編碼
五、制作網頁
1、在計算機的硬盤建立一個目錄,作為存放網站的根目錄,例如:E:\WWW目錄。
2、使用圖象設計軟件設計網頁首頁界面(根據首頁界面草圖)。
注意:
①每加一個界面元素都要分層。
②顏色嚴禁暖色調和冷色調混用。
③圖片添加的時候要注意過渡
④網頁的界面不該加的東西不要加,例如一些文字,如果文字不需要特殊效果,在設計界面的時候不需要添加
⑤界面的大小:寬一般為780象素,高不小于435象素
3、保存根目錄,例如:E:\WWW ②嚴禁合并圖層
4、使用切片,將用photoshop設計的psd文件進行切片
注意:
①切片遵守從左到右,從上到下的過程切片
②切片要將整個界面全部切片,嚴禁留下切片縫隙
③注意每個切片都應和周圍切片對齊
④切片的時候要注意每個切片的獨立性,單獨功能的切片單獨切。
⑤ 切片的時候要考慮切片以后在dreamweaver中是否容易編輯
5、保存切片注意:
①保存的時候,保存類型選輸出html和gif
②文件名為index
③ 保存路徑為你所準備好的存放網頁的目錄的根目錄
④最終根文件夾中應出現index.html和images文件夾,這兩個文件夾都必須保留注意:
①首先建立站點,使用dreamweaver連接網站目錄的根文件夾,例
如:E:\WWW,連接方法為網站的根目錄設為E:\WWW,網絡設置為無
② 站點與網站根目錄連接好以后,編輯index.html首頁
③ 在index.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、宣傳推廣、提高訪問量
分享名稱:完整網頁設計的步驟
瀏覽路徑:http://m.newbst.com/news48/183798.html
成都網站建設公司_創新互聯,為您提供手機網站建設、網站改版、網站收錄、小程序開發、企業網站制作、電子商務
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容