多媒體技術(shù)應(yīng)用項目化教程（修訂版） 課件 6多媒體綜合應(yīng)用網(wǎng)站設(shè)計與制作

項目六多媒體綜合應(yīng)用—“科順建筑防水公司網(wǎng)站”設(shè)計與制作學(xué)習(xí)目標知識目標能力目標1.了解多媒體網(wǎng)頁的基本概念。2.熟悉DreamweaverCC2018軟件界面與基本工具。3.了解HTML語言、Div及CSS基本知識。4.掌握運用DreamweaverCC2018軟件制作和發(fā)布網(wǎng)站的基本過程。1.能根據(jù)需求分析確定網(wǎng)站主題及風(fēng)格、規(guī)劃網(wǎng)站結(jié)構(gòu)并進行頁面版式設(shè)計。2.能進行網(wǎng)站的總體設(shè)計、界面設(shè)計、制作各頁面并將各頁進行有效整合；能應(yīng)用DreamweaverCC2018軟件設(shè)計、制作、測試、發(fā)布網(wǎng)站。3.能編寫網(wǎng)站設(shè)計說明書。4.能與人良好溝通，合作完成學(xué)習(xí)任務(wù)。目錄一二三四五六七6.1項目提出6.2項目分析6.3相關(guān)知識6.4項目實現(xiàn)

6.5項目評價6.6項目總結(jié)6.7拓展訓(xùn)練6.1項目提出網(wǎng)站是指在因特網(wǎng)上根據(jù)一定的規(guī)則使用HTML等工具制作,用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。用戶可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。本項目以“科順建筑防水公司”網(wǎng)站的設(shè)計和制作為例，培養(yǎng)學(xué)生網(wǎng)頁的設(shè)計思想與制作方法，從網(wǎng)站規(guī)劃、網(wǎng)頁版面設(shè)計入手，逐步展開實際制作網(wǎng)頁與網(wǎng)站的全過程。重點學(xué)習(xí)使用DreamweaverCC2018軟件進行頁面布局、樣式設(shè)置、插入圖片、插入圖片等技術(shù)。6.2項目分析

網(wǎng)站設(shè)計與制作的全過程是指從網(wǎng)站需求分析開始到完成發(fā)布的整個過程。如果是小規(guī)模項目，可以一個人承擔多項任務(wù)，自己完成，但通常情況是３～４名開發(fā)者（設(shè)計師、程序員等）一起組成一個小組來完成項目。網(wǎng)站設(shè)計與制作的基本流程網(wǎng)站需求分析規(guī)劃網(wǎng)站結(jié)構(gòu)素材準備設(shè)計與制作網(wǎng)頁網(wǎng)站測試與發(fā)布網(wǎng)站設(shè)計與制作的基本流程6.2項目分析1．關(guān)于項目主題本項目的任務(wù)是完成“科順建筑防水公司”網(wǎng)站的設(shè)計與制作，包括“科順建筑防水公司”網(wǎng)站的首頁及各級頁面的設(shè)計與制作。通過對“科順建筑防水公司”網(wǎng)站的建構(gòu)，本項目集成了工程案例、業(yè)務(wù)范圍、客戶服務(wù)、關(guān)于我們等一級模塊，每個模塊包含企業(yè)的各類具體內(nèi)容。2．項目用戶分析清楚定位網(wǎng)站用戶群體，是“科順建筑防水公司”網(wǎng)站是否成功的前提條件。一般可以將用戶分為３類：企業(yè)項目合作者、已成熟客戶和產(chǎn)品潛在客戶。企業(yè)項目合作者可以通過網(wǎng)站了解企業(yè)實力；已成熟客戶可以通過網(wǎng)站了解最新信息；而產(chǎn)品潛在客戶即訪問者，可以通過網(wǎng)站了解企業(yè)整體形象及產(chǎn)品的詳細信息。6.3相關(guān)知識DreamweaverCC2018工作界面DreamweaverCC2018工作界面6.4項目實現(xiàn)6.4.1總體設(shè)計1．網(wǎng)站結(jié)構(gòu)設(shè)計網(wǎng)站的頁面基本結(jié)構(gòu)包括首頁、二級頁面等。在實際建設(shè)網(wǎng)站過程中可根據(jù)實際需求，適當調(diào)整頁面的級數(shù)。2．網(wǎng)站內(nèi)容設(shè)計

“科順建筑防水公司”網(wǎng)站從為客戶提供企業(yè)信息出發(fā)，設(shè)計了首頁、二級頁面和三級頁面。為了對網(wǎng)頁制作中用的素材進行分類管理，建立了ｉｍａｇｅｓ與ｏｔｈｅｒｓ等素材文件夾，用于放置各類多媒體素材。網(wǎng)站主要欄目結(jié)構(gòu)一級頁面二級頁面二級頁面欄目首頁工程案例防水工程案例、運動場地案例、室內(nèi)地坪案例業(yè)務(wù)范圍防水材料銷售、運動場地營造、室內(nèi)地坪、化工防腐客戶服務(wù)服務(wù)體系、日常防護、留言反饋關(guān)于我們關(guān)于我們、企業(yè)文化、新聞動態(tài)、聯(lián)系我們6.4項目實現(xiàn)文件面板中的站點文件夾6.4.2首頁制作1．新建站點最終效果圖:6.4項目實現(xiàn)①創(chuàng)建站點文件夾。

定義站點②定義站點。6.4.2首頁制作主要操作步驟:6.4項目實現(xiàn)首頁模塊化布局預(yù)覽效果6.4.2首頁制作2．首頁模塊化布局最終效果圖:6.4項目實現(xiàn)body的CSS規(guī)則定義主要操作步驟:①新建文檔。②保存文檔。③設(shè)置頁面標題。④設(shè)置頁面初始化CSS樣式。6.4項目實現(xiàn)主要操作步驟:⑤插入和設(shè)置Div標簽container。插入DIV標簽設(shè)置container標簽CSS樣式6.4項目實現(xiàn)主要操作步驟:⑥插入Div標簽header。⑦插入和設(shè)置Div標簽banner。設(shè)置banner標簽CSS樣式6.4項目實現(xiàn)主要操作步驟:⑧插入Div標簽content。⑨插入和設(shè)置Div標簽footer。設(shè)置footer標簽CSS樣式6.4項目實現(xiàn)首頁頂部效果6.4.2首頁制作3．首頁頂部制作最終效果圖:6.4項目實現(xiàn)主要操作步驟:①插入和設(shè)置Div標簽logo。②插入圖像。設(shè)置logo標簽CSS樣式6.4項目實現(xiàn)主要操作步驟:③插入和設(shè)置Div標簽nav。④插入和設(shè)置Div標簽clear。設(shè)置nav標簽CSS樣式插入clear標簽設(shè)置clear標簽CSS樣式6.4項目實現(xiàn)主要操作步驟:⑤輸入文字。⑥設(shè)置項目列表。文字列表效果6.4項目實現(xiàn)主要操作步驟:⑦設(shè)置列表通用屬性。列表ul樣式設(shè)置6.4項目實現(xiàn)主要操作步驟:⑧設(shè)置文字列表屬性。列表CSS樣式設(shè)置6.4項目實現(xiàn)主要操作步驟:⑨添加空鏈接并設(shè)置鏈接屬性。鏈接樣式設(shè)置⑩插入FLASH。6.4項目實現(xiàn)首頁主體效果6.4.2首頁制作4．首頁主體制作最終效果圖:6.4項目實現(xiàn)主要操作步驟:①插入Div標簽content_top。②插入圖像。插入圖像效果6.4項目實現(xiàn)主要操作步驟:③插入Div標簽boxul。④插入圖像，設(shè)置列表。圖像列表效果6.4項目實現(xiàn)主要操作步驟:⑤設(shè)置圖像列表的CSS樣式。設(shè)置圖像列表CSS樣式效果⑥插入Div標簽clear。6.4項目實現(xiàn)首頁效果6.4.2首頁制作5．首頁底部制作最終效果圖:6.4項目實現(xiàn)主要操作步驟:①輸入文字。文字輸入效果②設(shè)置超鏈接。③設(shè)置超鏈接屬性。6.4項目實現(xiàn)6.4.3二級頁面制作工程案例頁面效果圖6.4項目實現(xiàn)二級頁面模塊化布局預(yù)覽效果6.4.3二級頁面制作1.二級頁面模塊化布局最終效果圖:6.4項目實現(xiàn)①新建文檔。②替換Flash動畫文件。③刪除首頁content標簽。刪除后效果主要操作步驟:6.4項目實現(xiàn)④插入和設(shè)置Div標簽title。插入cont標簽效果主要操作步驟:⑤插入和設(shè)置Div標簽cont。插入title標簽效果6.4項目實現(xiàn)⑥插入和設(shè)置Div標簽left。⑦插入和設(shè)置Div標簽right。插入left和right標簽效果主要操作步驟:6.4項目實現(xiàn)二級鏈接列表效果6.4.3二級頁面制作2.二級鏈接列表制作最終效果圖:6.4項目實現(xiàn)①插入Div標簽left_title。②插入圖像。③輸入文字，設(shè)置項目列表。設(shè)置項目列表效果主要操作步驟:6.4項目實現(xiàn)④設(shè)置列表樣式。⑤插入圖像，輸入聯(lián)系信息。聯(lián)系信息效果主要操作步驟:6.4項目實現(xiàn)列表項內(nèi)容效果6.4.3二級頁面制作3.列表項內(nèi)容制作最終效果圖:6.4項目實現(xiàn)①插入和設(shè)置Div標簽float_img。②插入圖像。插入圖像效果主要操作步驟:6.4項目實現(xiàn)③插入和設(shè)置Div標簽float_text。④輸入文字。⑤設(shè)置文字CSS樣式。設(shè)置文字效果主要操作步驟:6.4項目實現(xiàn)⑥復(fù)制Div標簽float_img和float_text。⑦修改圖像和文字內(nèi)容。修改圖像和文字效果主要操作步驟:6.4項目實現(xiàn)6.4.4網(wǎng)站測試與發(fā)布1.網(wǎng)站測試針對本項目的網(wǎng)站，主要進行的測試包括多媒體等元素是否顯示正常、超鏈接是否正常等。用戶可以選擇菜單“站點”→“檢查站點范圍的鏈接”命令，打開“鏈接檢查器”面板，檢查是否存在斷鏈、孤立文件等。鏈接檢查無誤后，可以在瀏覽器中瀏覽各個頁面，檢查文字、圖片、鏈接是否有誤，是否會出現(xiàn)亂碼，網(wǎng)頁原色定位是否準確，瀏覽速度和視覺效果是否滿意等。6.4項目實現(xiàn)6.4.4網(wǎng)站測試與發(fā)布2.網(wǎng)站發(fā)布遠程服務(wù)器定義6．6項目總結(jié)6.6.2知識拓展1.HTML標簽2.XML 3.XHTML4.JavaScrip腳本5.動態(tài)網(wǎng)頁制作工具行為

行為是某個事件和由該事件觸發(fā)的動作的組合。在DreamweaverCS6中，主要通過“行為”面板來將行為添加到頁面的標簽上，并可以對以前添加的行為參數(shù)進行修改，當然，還可以直接在HTML源代碼中進行修改。行為面板添加行為6.6.3技術(shù)提升6．6項目總結(jié)6.7拓展訓(xùn)練6.7.1改進訓(xùn)練1.訓(xùn)練內(nèi)容運用DreamweaverCC2018網(wǎng)頁制作技術(shù)為“科順建筑防水公司”網(wǎng)站制作其他的二級頁面和三級頁面，即當瀏覽者單擊首頁中的“業(yè)務(wù)范圍”、“客戶服務(wù)”、“關(guān)于我們”等鏈接時，即可打開的網(wǎng)頁。2.訓(xùn)練要求（１）相關(guān)的二級頁面包括“工程案例”、“業(yè)務(wù)范圍”、“客戶服務(wù)”、“關(guān)于我們”４個模塊。在首頁中的導(dǎo)航欄單擊則鏈接至二級頁面。（２）在二級頁面中，單擊左側(cè)的鏈接列表則跳轉(zhuǎn)到三級頁面，顯示對應(yīng)內(nèi)容。3.重點提示合理設(shè)計“科順建筑防水公司”網(wǎng)站其他模塊，內(nèi)容與頁面風(fēng)格可以借鑒前面模塊，也可自行創(chuàng)新，但整體風(fēng)格必須和諧統(tǒng)一。6.7拓展訓(xùn)練6.7.2創(chuàng)新訓(xùn)練1.訓(xùn)練內(nèi)容運用DreamweaverCC2018網(wǎng)頁制作技術(shù)等制作旅游網(wǎng)站。2.訓(xùn)練要求（1）主題選擇要求選擇一個旅游景點，收集圖形、聲音、動畫、視頻等媒體素材，制作旅游主題網(wǎng)站。（2）內(nèi)容要求主題明確，內(nèi)容健康、具體，各頁面的文字、圖像、動畫能夠清晰地表達主題。（3）版面與色彩要求版面結(jié)構(gòu)合理，每一頁面都能實現(xiàn)鏈接。色彩搭配協(xié)調(diào)、美觀、頁面設(shè)計規(guī)范，無亂碼、空鏈接和錯誤鏈接。3．重點提示合理設(shè)計主題旅游網(wǎng)站的色彩與風(fēng)格，使各模塊風(fēng)格統(tǒng)一，能襯托主題。本項目小結(jié)本項目以策劃、設(shè)計及制作“科順建筑防水公司”網(wǎng)站為主要任務(wù)，使用Div+CSS布局技術(shù)，并以DreamweaverCC2018為