《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)大綱

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教課綱領(lǐng)《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教課綱領(lǐng)//《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教課綱領(lǐng)《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教課綱領(lǐng)課程名稱：網(wǎng)頁(yè)設(shè)計(jì)與制作學(xué)分及學(xué)時(shí)：4學(xué)分總學(xué)時(shí)72學(xué)時(shí)，理論36學(xué)時(shí)合用專業(yè)：網(wǎng)絡(luò)工程開(kāi)課學(xué)期：第四學(xué)期開(kāi)課部門：計(jì)算機(jī)與互聯(lián)網(wǎng)學(xué)院先修課程：計(jì)算機(jī)文化基礎(chǔ)計(jì)算機(jī)網(wǎng)絡(luò)查核要求：考試使用教材及主要參照書：向知禮主編：《網(wǎng)頁(yè)設(shè)計(jì)與制作》航空工業(yè)第一版社2017年楊松主編：《網(wǎng)頁(yè)設(shè)計(jì)事例教程》航空工業(yè)第一版社2015年一·課程性質(zhì)和任務(wù)：本課程全面地介紹網(wǎng)頁(yè)制作技術(shù)的基本理論和實(shí)質(zhì)應(yīng)用。全書共10章，分為3大部分。前5章為第1部分，主要介紹網(wǎng)頁(yè)制作的基本理論——HTML，同時(shí)穿插介紹Fireworks，F(xiàn)lash，Anfy等軟件在網(wǎng)頁(yè)制作過(guò)程中的應(yīng)用；第6章～第8章為第2部分，主要介紹網(wǎng)頁(yè)制作技術(shù)，包含CSS技術(shù)、客戶端腳本技術(shù)(DHTML)以及XML技術(shù)；第9章～第10章為第3部分，主要介紹目前最流行的網(wǎng)頁(yè)制作工具——

Dreamweaver，經(jīng)過(guò)應(yīng)用實(shí)踐可以從實(shí)質(zhì)應(yīng)用的角度進(jìn)一步穩(wěn)固所學(xué)知識(shí)。課程內(nèi)容不只包含各樣網(wǎng)頁(yè)制作技術(shù)的基礎(chǔ)理論，并且重申網(wǎng)頁(yè)制作的詳細(xì)應(yīng)用，使讀者既能打下堅(jiān)固的理論基礎(chǔ)，又能掌握實(shí)質(zhì)的操作技術(shù)。二·課程教課目標(biāo)與要求以Dreamweaver的使用為主線，介紹網(wǎng)頁(yè)制作的有關(guān)技術(shù)。使學(xué)生理解網(wǎng)頁(yè)制作的基本觀點(diǎn)和理論,掌握站點(diǎn)的成立和網(wǎng)頁(yè)的設(shè)計(jì),能用HTML語(yǔ)言改正網(wǎng)頁(yè);掌握網(wǎng)頁(yè)制作和站點(diǎn)的基本知識(shí);掌握站點(diǎn)的創(chuàng)立和網(wǎng)頁(yè)的編寫;掌握超鏈接、圖像、CSS款式的使用;掌握表格、框架、表單、多媒體對(duì)象的使用;理解行為、模板、庫(kù)、CSS布局的觀點(diǎn)和使用;理解HTML語(yǔ)言、網(wǎng)站的測(cè)試與的公布；要求：教課過(guò)程中，須著重學(xué)生實(shí)踐操作能力的培育，采納“面向?qū)嵺`、能力為先”的教課思路，教課內(nèi)容應(yīng)聯(lián)合目前WEB技術(shù)的發(fā)展趨向，掌握將來(lái)公司級(jí)WEB頁(yè)面開(kāi)發(fā)的發(fā)展方向，兼?zhèn)涓餍懈鳂I(yè)的需求變化，力求面向社會(huì)，服務(wù)于公司“互聯(lián)網(wǎng)+”戰(zhàn)略。三、課程學(xué)時(shí)分派理論實(shí)踐教課學(xué)其余（習(xí)章節(jié)教課內(nèi)容教課時(shí)小題、大作學(xué)時(shí)計(jì)實(shí)驗(yàn)業(yè)）學(xué)時(shí)項(xiàng)目一網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)知識(shí)246項(xiàng)目二網(wǎng)站創(chuàng)立與管理44項(xiàng)目三創(chuàng)立簡(jiǎn)單圖文網(wǎng)頁(yè)4610項(xiàng)目四為網(wǎng)頁(yè)設(shè)置音視頻和超鏈接22項(xiàng)目五應(yīng)用CSS設(shè)置網(wǎng)頁(yè)款式246項(xiàng)目六建立網(wǎng)頁(yè)布局4610項(xiàng)目七在網(wǎng)頁(yè)中應(yīng)用表格246項(xiàng)目八模板和庫(kù)的應(yīng)用22項(xiàng)目九應(yīng)用表單和行為22項(xiàng)目十測(cè)試和公布網(wǎng)站22項(xiàng)目十一創(chuàng)立挪動(dòng)設(shè)施網(wǎng)頁(yè)4610項(xiàng)目十二綜合應(yīng)用——制作酒店網(wǎng)站6612共計(jì)363672四·課程教課中應(yīng)注意的問(wèn)題理論課解說(shuō)WEB頁(yè)面開(kāi)發(fā)的原理及方法，并在多媒體教師機(jī)長(zhǎng)進(jìn)行演示操作；實(shí)驗(yàn)課在專業(yè)機(jī)房輔助學(xué)生解決課上遺留問(wèn)題，并安排學(xué)生進(jìn)行實(shí)踐操作穩(wěn)固學(xué)習(xí)效果；查核方法：期終考試占40％，實(shí)驗(yàn)成績(jī)20％，平常成績(jī)和作業(yè)占40％。五·課程教課內(nèi)容項(xiàng)目一網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)知識(shí)學(xué)習(xí)目標(biāo)事例一指出當(dāng)當(dāng)網(wǎng)主頁(yè)的組成元素——認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站事例說(shuō)明有關(guān)知識(shí)一、網(wǎng)頁(yè)、網(wǎng)站和主頁(yè)二、網(wǎng)頁(yè)的組成元素三、網(wǎng)頁(yè)的實(shí)質(zhì)事例實(shí)行事例二認(rèn)識(shí)網(wǎng)頁(yè)設(shè)計(jì)與制作崗位職責(zé)——網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)事例說(shuō)明有關(guān)知識(shí)一、網(wǎng)頁(yè)顏色的選擇與搭配二、網(wǎng)頁(yè)版式設(shè)計(jì)三、網(wǎng)頁(yè)尺寸事例實(shí)行事例三公司網(wǎng)站建設(shè)基本流程——網(wǎng)站建設(shè)基礎(chǔ)事例說(shuō)明有關(guān)知識(shí)一、Internet，IP地點(diǎn)和域名二、WWW，URL，HTTP和閱讀器三、HTML與CSS簡(jiǎn)介四、網(wǎng)站管理與網(wǎng)頁(yè)制作有關(guān)軟件事例實(shí)行項(xiàng)目總結(jié)項(xiàng)目二網(wǎng)站創(chuàng)立與管理學(xué)習(xí)目標(biāo)事例一調(diào)整DreamweaverCC2017工作界面——初識(shí)DreamweaverCC2017事例說(shuō)明有關(guān)知識(shí)一、啟動(dòng)DreamweaverCC二、認(rèn)識(shí)DreamweaverCC工作界面事例實(shí)行事例二設(shè)置公司網(wǎng)站欄目構(gòu)造和目錄構(gòu)造事例說(shuō)明有關(guān)知識(shí)一、設(shè)計(jì)網(wǎng)站欄目構(gòu)造二、創(chuàng)立網(wǎng)站目錄構(gòu)造事例實(shí)行事例三創(chuàng)立公司網(wǎng)站當(dāng)?shù)卣军c(diǎn)——站點(diǎn)基本操作事例說(shuō)明有關(guān)知識(shí)一、使用Dreamweaver創(chuàng)立和翻開(kāi)當(dāng)?shù)卣军c(diǎn)二、使用Dreamweaver管理當(dāng)?shù)卣军c(diǎn)事例實(shí)行事例四為公司網(wǎng)站制作歡迎頁(yè)面——網(wǎng)頁(yè)文檔基本操作事例說(shuō)明有關(guān)知識(shí)一、網(wǎng)頁(yè)文檔基本操作二、“文件”面板基本應(yīng)用事例實(shí)行拓展知識(shí)一、網(wǎng)頁(yè)文檔和文件夾命名規(guī)則二、HTML的標(biāo)簽組成三、HTML網(wǎng)頁(yè)文檔的基本構(gòu)造項(xiàng)目總結(jié)講堂實(shí)訓(xùn)——?jiǎng)?chuàng)立鮮花導(dǎo)購(gòu)網(wǎng)站當(dāng)?shù)卣军c(diǎn)項(xiàng)目三創(chuàng)立簡(jiǎn)單圖文網(wǎng)頁(yè)學(xué)習(xí)目標(biāo)事例一為公司網(wǎng)站新聞顯示網(wǎng)頁(yè)設(shè)置頁(yè)面基本信息——設(shè)置網(wǎng)頁(yè)基本信息事例說(shuō)明有關(guān)知識(shí)一、設(shè)置文檔頭信息二、設(shè)置網(wǎng)頁(yè)頁(yè)面屬性事例實(shí)行事例二為公司網(wǎng)站新聞顯示網(wǎng)頁(yè)設(shè)置文本內(nèi)容——設(shè)置網(wǎng)頁(yè)文本事例說(shuō)明有關(guān)知識(shí)一、增添一般文本二、插入特別符號(hào)三、增添空格四、增添與設(shè)置水平線五、創(chuàng)立列表事例實(shí)行拓展知識(shí)列表在HTML中的表示事例三為公司網(wǎng)站新聞顯示網(wǎng)頁(yè)設(shè)置圖像——設(shè)置網(wǎng)頁(yè)圖像事例說(shuō)明有關(guān)知識(shí)一、插入與編寫圖像二、插入鼠標(biāo)經(jīng)過(guò)圖像事例實(shí)行拓展知識(shí)一、網(wǎng)頁(yè)中可用的圖像格式二、圖像在HTML中的表示項(xiàng)目總結(jié)講堂實(shí)訓(xùn)——為鮮花導(dǎo)購(gòu)網(wǎng)頁(yè)設(shè)置文字和圖像內(nèi)容項(xiàng)目四為網(wǎng)頁(yè)設(shè)置音視頻和超鏈接學(xué)習(xí)目標(biāo)事例一制作音視頻在線播放頁(yè)面——在網(wǎng)頁(yè)中插入HTML5音視頻事例說(shuō)明有關(guān)知識(shí)一、插入HTML5Audio二、插入HTML5Video三、插入并編寫插件事例實(shí)行拓展知識(shí)一、HTML5Audio和Video所支持的音頻和視頻格式二、為網(wǎng)頁(yè)設(shè)置背景音樂(lè)事例二為公司網(wǎng)站新聞顯示網(wǎng)頁(yè)設(shè)置超鏈接——設(shè)置超鏈接事例說(shuō)明有關(guān)知識(shí)一、超鏈接的含義和分類二、設(shè)置慣例超鏈接三、設(shè)置熱門鏈接四、設(shè)置電子郵件鏈接五、設(shè)置文件下載鏈接六、設(shè)置圖像鏈接事例實(shí)行項(xiàng)目總結(jié)講堂實(shí)訓(xùn)——為“鮮花導(dǎo)購(gòu)網(wǎng)頁(yè)”設(shè)置超鏈接項(xiàng)目五應(yīng)用CSS設(shè)置網(wǎng)頁(yè)款式學(xué)習(xí)目標(biāo)事例一為公司網(wǎng)站新聞顯示網(wǎng)頁(yè)設(shè)置整體款式——設(shè)置CSS款式（上）事例說(shuō)明有關(guān)知識(shí)一、CSS款式表簡(jiǎn)介二、在頁(yè)面中引入CSS款式表的幾種方法三、CSS中選擇器的種類四、設(shè)置布局款式五、設(shè)置文本和段落款式六、設(shè)置背景款式七、盒子模型的觀點(diǎn)事例實(shí)行拓展知識(shí)一、選擇器的集體申明、嵌套與優(yōu)先級(jí)二、選擇器的繼承事例二為公司網(wǎng)站新聞顯示網(wǎng)頁(yè)設(shè)置頁(yè)頭款式——設(shè)置CSS款式（中）事例說(shuō)明有關(guān)知識(shí)一、設(shè)置邊框款式二、標(biāo)準(zhǔn)流的觀點(diǎn)事例實(shí)行事例三為公司網(wǎng)站新聞顯示網(wǎng)頁(yè)設(shè)置正文款式——設(shè)置CSS款式（下）事例說(shuō)明有關(guān)知識(shí)一、設(shè)置列表款式二、margin使用注意事項(xiàng)事例實(shí)行項(xiàng)目總結(jié)講堂實(shí)訓(xùn)——為“鮮花導(dǎo)購(gòu)網(wǎng)頁(yè)”設(shè)置CSS款式項(xiàng)目六建立網(wǎng)頁(yè)布局學(xué)習(xí)目標(biāo)事例一建立公司網(wǎng)站新聞列表網(wǎng)頁(yè)整體布局——浮動(dòng)布局事例說(shuō)明有關(guān)知識(shí)一、Div基礎(chǔ)二、HTML5構(gòu)造元素三、float和clear屬性四、浮動(dòng)布局的原理五、常用的浮動(dòng)布局方法六、消除浮動(dòng)對(duì)布局的不良影響七、浮動(dòng)布局應(yīng)用技巧事例實(shí)行一、建立HTML構(gòu)造二、設(shè)置CSS款式事例二制作公司網(wǎng)站新聞列表網(wǎng)頁(yè)的頁(yè)頭部分事例說(shuō)明事例實(shí)行一、建立HTML構(gòu)造二、設(shè)置CSS款式事例三制作公司網(wǎng)站新聞列表網(wǎng)頁(yè)的新聞中心欄目事例說(shuō)明事例實(shí)行一、建立HTML構(gòu)造二、設(shè)置CSS款式事例四制作公司網(wǎng)站新聞列表網(wǎng)頁(yè)的公司要聞欄目事例說(shuō)明事例實(shí)行一、建立HTML構(gòu)造二、設(shè)置CSS款式項(xiàng)目總結(jié)講堂實(shí)訓(xùn)——制作博客網(wǎng)站首頁(yè)項(xiàng)目七在網(wǎng)頁(yè)中應(yīng)用表格學(xué)習(xí)目標(biāo)事例一創(chuàng)立2018世界杯亞洲區(qū)預(yù)選賽40強(qiáng)分組表——建立和美化表格事例說(shuō)明有關(guān)知識(shí)一、創(chuàng)立表格二、表格的HTML標(biāo)簽三、使用CSS設(shè)置表格和單元格屬性事例實(shí)行一、建立HTML構(gòu)造二、設(shè)置CSS款式事例二制作化學(xué)實(shí)驗(yàn)分組表——編寫表格事例說(shuō)明有關(guān)知識(shí)一、拆分與歸并單元格二、在表格中增添或刪除行與列三、使用CSS設(shè)置表格內(nèi)邊距和外邊距四、使用CSS歸并表格邊框事例實(shí)行一、建立HTML構(gòu)造二、設(shè)置CSS款式項(xiàng)目總結(jié)講堂實(shí)訓(xùn)——制作月歷項(xiàng)目八模板和庫(kù)的應(yīng)用學(xué)習(xí)目標(biāo)事例一創(chuàng)立并應(yīng)用模板制作新聞顯示頁(yè)面——模板基本操作事例說(shuō)明有關(guān)知識(shí)一、創(chuàng)立模板二、編寫模板三、應(yīng)用模板四、管理模板事例實(shí)行一、創(chuàng)立模板二、應(yīng)用模板事例二創(chuàng)立并應(yīng)用庫(kù)項(xiàng)目制作新聞顯示頁(yè)面——庫(kù)的基本操作事例說(shuō)明有關(guān)知識(shí)一、創(chuàng)立庫(kù)項(xiàng)目二、應(yīng)用庫(kù)項(xiàng)目三、編寫庫(kù)項(xiàng)目事例實(shí)行一、創(chuàng)立庫(kù)項(xiàng)目二、應(yīng)用庫(kù)項(xiàng)目制作網(wǎng)頁(yè)項(xiàng)目總結(jié)項(xiàng)目九應(yīng)用表單和行為學(xué)習(xí)目標(biāo)事例一應(yīng)用表單制作“歡喜購(gòu)”注冊(cè)頁(yè)面——應(yīng)用表單和表單對(duì)象事例說(shuō)明有關(guān)知識(shí)一、表單基礎(chǔ)知識(shí)二、插入表單三、插入表單元素事例實(shí)行一、建立HTML構(gòu)造二、設(shè)置CSS款式事例二應(yīng)用行為為學(xué)校網(wǎng)頁(yè)增添彈出框——應(yīng)用行為事例說(shuō)明有關(guān)知識(shí)一、認(rèn)識(shí)行為二、“行為”面板三、應(yīng)用行為四、編寫行為事例實(shí)行項(xiàng)目總結(jié)項(xiàng)目十測(cè)試和公布網(wǎng)站學(xué)習(xí)目標(biāo)事例一檢查和測(cè)試公司網(wǎng)站——測(cè)試網(wǎng)站事例說(shuō)明有關(guān)知識(shí)一、檢查網(wǎng)頁(yè)鏈接二、修復(fù)網(wǎng)頁(yè)鏈接事例實(shí)行事例二申請(qǐng)域名和虛構(gòu)空間——域名和虛構(gòu)空間事例說(shuō)明有關(guān)知識(shí)一、域名二、虛構(gòu)空間事例實(shí)行事例三公布公司網(wǎng)站——公布網(wǎng)站事例說(shuō)明有關(guān)知識(shí)一、連結(jié)服務(wù)器二、上傳網(wǎng)站三、下載網(wǎng)站四、使用擴(kuò)展“文件”面板管理文件上傳和取回事例實(shí)行項(xiàng)目總結(jié)項(xiàng)目十一創(chuàng)立挪動(dòng)設(shè)施網(wǎng)頁(yè)學(xué)習(xí)目標(biāo)事例創(chuàng)立“不同樣的北京”挪動(dòng)設(shè)施網(wǎng)頁(yè)——使用jQueryMobile事例說(shuō)明有關(guān)知識(shí)一、初識(shí)jQueryMobile二、創(chuàng)立jQueryMobile頁(yè)面三、jQueryMobile頁(yè)面構(gòu)造四、使用jQu