項目十 綜合案例-非遺文化網(wǎng)站建設

Dreamweaver網(wǎng)頁設計立體化教程（微課版）（DreamweaverCC2020）項目十綜合案例——非遺文化網(wǎng)站建設目錄Contents任務一前期規(guī)劃任務二創(chuàng)建網(wǎng)站站點任務三制作網(wǎng)頁模板任務四制作網(wǎng)站頁面實訓一制作珠寶網(wǎng)頁實訓二制作“微觀多肉植物”網(wǎng)頁由于用戶是網(wǎng)站頁面的直接使用者，所以在設計網(wǎng)站時，首先要對網(wǎng)站的受眾人群進行分析。非遺文化網(wǎng)站中包含著大量的非物質文化遺產圖片、文字資料、相關新聞資訊以及非遺產品的訂購，這些資料和信息可以幫助用戶進一步了解和認識非遺文化，并滿足用戶購買非遺產品的需求。任務一前期規(guī)劃（一）分析網(wǎng)站的用戶需求了解網(wǎng)站的用戶需求后，就可以定位網(wǎng)站風格。不同的網(wǎng)站其風格各不相同，設計者需要大致了解網(wǎng)站的定位，擬定幾個網(wǎng)站風格類型，從中選擇最適合的風格。非遺文化網(wǎng)站主要用于宣傳非物質文化遺產并為用戶提供非遺產品的訂購服務，可采用能具有中國傳統(tǒng)風格的設計。（二）定位網(wǎng)站風格網(wǎng)站包含多個頁面，設計前，必須對網(wǎng)站中的頁面有一個規(guī)劃。設計者可以先繪制站點草圖，在草圖中注明用戶關注的重點，然后對其進行詳細描述，方便客戶查看。任務一前期規(guī)劃（三）規(guī)劃網(wǎng)站草圖收集網(wǎng)站素材可分為兩部分，一部分是繪制和拍攝網(wǎng)站會使用到的素材，如網(wǎng)站標志、產品圖像等，另一部分可以通過網(wǎng)絡或其他途徑獲取。（四）收集網(wǎng)站素材在正式制作網(wǎng)頁之前，需要根據(jù)規(guī)劃好的網(wǎng)站風格和草圖設計網(wǎng)頁效果圖。網(wǎng)頁效果圖設計與傳統(tǒng)的平面設計相同，可以使用平面設計軟件進行制作。這里使用Photoshop設計效果圖，然后切片整理出網(wǎng)頁需要的圖像素材。（五）設計網(wǎng)頁效果圖目錄Contents任務一前期規(guī)劃任務二創(chuàng)建網(wǎng)站站點任務三制作網(wǎng)頁模板任務四制作網(wǎng)站頁面實訓一制作珠寶網(wǎng)頁實訓二制作“微觀多肉植物”網(wǎng)頁任務二創(chuàng)建網(wǎng)站站點完成了前期規(guī)劃和草圖的創(chuàng)作后，就可以進行網(wǎng)頁設計，創(chuàng)建網(wǎng)站站點。具體操作如下：設置站點新建文件夾導入素材文件目錄Contents任務一前期規(guī)劃任務二創(chuàng)建網(wǎng)站站點任務三制作網(wǎng)頁模板任務四制作網(wǎng)站頁面實訓一制作珠寶網(wǎng)頁實訓二制作“微觀多肉植物”網(wǎng)頁任務三制作網(wǎng)頁模板創(chuàng)建模板文檔選擇站點并保存創(chuàng)建CSS文件創(chuàng)建CSS文件輸入CSS布局代碼輸入文本和超鏈接CSS樣式代碼任務三制作網(wǎng)頁模板插入多個<div>標簽制作導航菜單插入Banner動畫任務三制作網(wǎng)頁模板添加表格式菜單為底部添加菜單超鏈接文本新建可編輯區(qū)域重命名可編輯區(qū)域名稱目錄Contents任務一前期規(guī)劃任務二創(chuàng)建網(wǎng)站站點任務三制作網(wǎng)頁模板任務四制作網(wǎng)站頁面實訓一制作珠寶網(wǎng)頁實訓二制作“微觀多肉植物”網(wǎng)頁任務四制作網(wǎng)站頁面新建文檔插入模板重命名網(wǎng)頁主題（一）制作主頁任務四制作網(wǎng)站頁面制作信息條插入<div>標簽插入“新聞動態(tài)”內容（一）制作主頁插入“非遺展覽”內容插入“關注我們”內容任務四制作網(wǎng)站頁面添加模板添加CSS樣式表（二）制作訂購頁面制作左側欄目任務四制作網(wǎng)站頁面制作訂購信息（二）制作訂購頁面制作圖像列表目錄Contents任務一前期規(guī)劃任務二創(chuàng)建網(wǎng)站站點任務三制作網(wǎng)頁模板任務四制作網(wǎng)站頁面實訓一制作珠寶網(wǎng)頁實訓二制作“微觀多肉植物”網(wǎng)頁本實訓要求為某珠寶公司的電商銷售網(wǎng)站制作一個“產品中心”頁面，該頁面主要展示珠寶公司的相關產品，完成后的效果如圖所示。實訓要求實訓一?制作珠寶網(wǎng)頁要讓頁面展示公司產品，需要先對頁面進行布局，然后實現(xiàn)查看功能，即瀏覽者購買通道。本實訓通過div+CSS盒子模型來進行頁面布局，然后在其中添加相關的內容，并為圖像創(chuàng)建超鏈接，便于瀏覽者進入頁面進行購買。實訓思路“產品中心”頁面效果實訓一?制作珠寶網(wǎng)頁步驟提示完成本實訓需要先創(chuàng)建div+CSS盒子模型，然后在其中添加圖像、文字等內容，其步驟如圖所示。①?添加文本?②?添加圖像?③?添加超鏈接目錄Contents任務一前期規(guī)劃任務二創(chuàng)建網(wǎng)站站點任務三制作網(wǎng)頁模板任務四制作網(wǎng)站頁面實訓一制作珠寶網(wǎng)頁實訓二制作“微觀多肉植物”網(wǎng)頁本實訓需要制作“微觀多肉世界”網(wǎng)站，該網(wǎng)站主要是為多肉植物愛好者提供交流網(wǎng)站，完成后的效果如圖所示。實訓要求實訓二?制作“微觀多肉世界”網(wǎng)頁本實訓主要根據(jù)草圖進行布局，采用div+CSS盒子模型來布局網(wǎng)頁，色彩方面主要采用綠色調為主色調，用不同明度的綠色給網(wǎng)站添加層次感，并體現(xiàn)出生機勃勃的感覺。實訓思路“