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

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

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

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

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

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

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