網(wǎng)頁(yè)設(shè)計(jì)與制作（微課版第3版）-教學(xué)大綱

《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)大綱課程編號(hào)：130103課程名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì)與制作英文名稱(chēng)：ComputerNetwork課程性質(zhì)：計(jì)算機(jī)應(yīng)用基礎(chǔ)課總學(xué)時(shí)：48學(xué)分：2.5適用對(duì)象：文理工管等專(zhuān)業(yè)先修課程：大學(xué)計(jì)算機(jī)基礎(chǔ)一、課程介紹本課程是關(guān)于網(wǎng)頁(yè)設(shè)計(jì)與制作的一門(mén)主流課程，該課程不僅是計(jì)算機(jī)類(lèi)專(zhuān)業(yè)的重要專(zhuān)業(yè)課，同時(shí)也是經(jīng)管類(lèi)、藝術(shù)設(shè)計(jì)類(lèi)、新文科類(lèi)等擴(kuò)展計(jì)算機(jī)應(yīng)用能力的一門(mén)重要課程。本課程的主要任務(wù)是講授網(wǎng)頁(yè)設(shè)計(jì)制作理論和方法，課程的內(nèi)容主要包括：網(wǎng)頁(yè)制作與HTML5基礎(chǔ)知識(shí)，主要介紹網(wǎng)頁(yè)的基本概念、DreamweaverCS6和HTML5等知識(shí)；網(wǎng)頁(yè)整體規(guī)劃與設(shè)計(jì)時(shí)網(wǎng)頁(yè)的布局類(lèi)型、設(shè)計(jì)流程和網(wǎng)頁(yè)顏色搭配等內(nèi)容；本地站點(diǎn)的建立、管理；網(wǎng)頁(yè)中文本的多種處理方法；介紹網(wǎng)頁(yè)中的圖像、動(dòng)畫(huà)、視頻和音頻等多媒體在網(wǎng)頁(yè)中的基本處理方法；網(wǎng)頁(yè)中的超鏈接，介紹超鏈接的概念和實(shí)現(xiàn)的方法；網(wǎng)頁(yè)中表格使用與簡(jiǎn)單頁(yè)面布局，介紹表格在網(wǎng)頁(yè)中的使用及使用表格進(jìn)行布局的方法；設(shè)計(jì)框架網(wǎng)頁(yè)，介紹頁(yè)面框架及其應(yīng)用；CSS與Div布局，介紹CSS樣式的語(yǔ)法及Div實(shí)現(xiàn)頁(yè)面布局的方法；網(wǎng)頁(yè)的行為，介紹在網(wǎng)頁(yè)中實(shí)現(xiàn)行為的方法；網(wǎng)頁(yè)交互與特效，介紹交互的行為和Spry框架及其應(yīng)用；網(wǎng)頁(yè)表單的應(yīng)用，介紹相關(guān)表單的實(shí)現(xiàn)方法；網(wǎng)站綜合設(shè)計(jì)與制作，介紹完整網(wǎng)站頁(yè)面的設(shè)計(jì)與制作過(guò)程。通過(guò)學(xué)習(xí)為從事與網(wǎng)頁(yè)設(shè)計(jì)制作、管理與維護(hù)打下良好的基礎(chǔ)。二、課程目標(biāo)通過(guò)本課程的理論學(xué)習(xí)和制作實(shí)踐，學(xué)生應(yīng)具備以下能力：.能夠運(yùn)用網(wǎng)頁(yè)制作知識(shí)和網(wǎng)頁(yè)設(shè)計(jì)與制作理論表達(dá)網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)問(wèn)題，能抽象或歸納網(wǎng)頁(yè)設(shè)計(jì)與制作問(wèn)題。.能夠運(yùn)用網(wǎng)頁(yè)設(shè)計(jì)與制作理論分析方法對(duì)網(wǎng)頁(yè)設(shè)計(jì)與制作問(wèn)題進(jìn)行性能分析評(píng)價(jià)，并給出有效結(jié)論及解決方案。.能夠針對(duì)較復(fù)雜網(wǎng)頁(yè)設(shè)計(jì)與制作的要求和特性，確定網(wǎng)頁(yè)設(shè)計(jì)與制作設(shè)計(jì)的方案，并能進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與制作系統(tǒng)的設(shè)計(jì)，能以設(shè)計(jì)制作方案的形式呈現(xiàn)設(shè)計(jì)結(jié)果。.能夠運(yùn)用網(wǎng)頁(yè)設(shè)計(jì)與制作軟件分析網(wǎng)頁(yè)設(shè)計(jì)驗(yàn)證網(wǎng)頁(yè)設(shè)計(jì)的正確性。.能夠應(yīng)用網(wǎng)頁(yè)設(shè)計(jì)與制作的專(zhuān)業(yè)軟件進(jìn)行網(wǎng)頁(yè)的規(guī)劃、設(shè)計(jì)與制作等。

三、教學(xué)內(nèi)容與預(yù)期學(xué)習(xí)成效

知識(shí)單元知識(shí)點(diǎn)預(yù)期學(xué)習(xí)成效學(xué)時(shí)網(wǎng)頁(yè)制作與HTML5基礎(chǔ)知識(shí)網(wǎng)頁(yè)的定義和分類(lèi)；網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)概念；網(wǎng)頁(yè)的基本組成元素；DreamweaverCS6概述；DreamweaverCS6的工作界面；網(wǎng)頁(yè)標(biāo)準(zhǔn)技術(shù)與HTML；網(wǎng)頁(yè)結(jié)構(gòu)語(yǔ)言；網(wǎng)頁(yè)表現(xiàn)語(yǔ)言；網(wǎng)頁(yè)行為語(yǔ)言；在DreamweaverCS6中創(chuàng)立HTML5文檔；HTML5常用標(biāo)簽。①掌握網(wǎng)頁(yè)設(shè)計(jì)與制作的基本概念；②掌握網(wǎng)頁(yè)的基本組成；③理解DREAMWEAVERCS6的工作界面和結(jié)構(gòu)；④理解網(wǎng)頁(yè)的標(biāo)準(zhǔn)；⑤理解HTML5語(yǔ)言及結(jié)構(gòu)。3網(wǎng)頁(yè)整體規(guī)劃與設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)；網(wǎng)頁(yè)布局類(lèi)型；網(wǎng)頁(yè)整體造型；網(wǎng)頁(yè)設(shè)計(jì)要素；網(wǎng)站與網(wǎng)頁(yè)的設(shè)計(jì)流程及主題確實(shí)定；網(wǎng)站與網(wǎng)頁(yè)的設(shè)計(jì)流程；網(wǎng)站主題確實(shí)定；網(wǎng)站的需求分析；色彩基礎(chǔ)知識(shí)；網(wǎng)站中的色彩應(yīng)用；網(wǎng)頁(yè)元素之間的色彩搭配。①掌握網(wǎng)頁(yè)設(shè)計(jì)基本；②理解網(wǎng)頁(yè)的布局與整體造型；③掌握網(wǎng)站與網(wǎng)頁(yè)的設(shè)計(jì)流程及主題與網(wǎng)站的需求分析；④學(xué)習(xí)色彩基礎(chǔ)知識(shí)；⑤會(huì)進(jìn)行基本的網(wǎng)頁(yè)的色彩搭配。3建立本地站點(diǎn)什么是站點(diǎn)；本地站點(diǎn)；創(chuàng)立本地站點(diǎn)；管理本地站點(diǎn)；切換站點(diǎn)與站點(diǎn)的其他操作。①理解站點(diǎn)的概念；②掌握站點(diǎn)的創(chuàng)建；③對(duì)站點(diǎn)能進(jìn)行管理；④會(huì)切換站點(diǎn)；⑤能對(duì)站點(diǎn)時(shí)行維護(hù)；3制作文本創(chuàng)立文檔；保存文檔；文本編輯；輸入文本；添加新的字體；設(shè)置文本格式；設(shè)置文本格式；設(shè)置段落在頁(yè)面中添加其他元素；設(shè)置網(wǎng)頁(yè)背景；工程符號(hào)和編號(hào)；水平線、網(wǎng)格與標(biāo)尺。①掌握文檔創(chuàng)立和編輯；②會(huì)設(shè)置文本的格式；③會(huì)設(shè)置段落；④會(huì)設(shè)置網(wǎng)頁(yè)中的背景；⑤掌握工程符號(hào)、編號(hào)以及水平線、網(wǎng)格與標(biāo)尺的使用。4網(wǎng)頁(yè)中的多媒體網(wǎng)頁(yè)中常用的圖像格式、GIF格式、JPEG格式、PNG格式；插入與設(shè)置圖像；插入圖像占位符實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖像；插入Flash動(dòng)畫(huà)、插入FLV視頻：網(wǎng)頁(yè)中的音頻文件格式：網(wǎng)頁(yè)中的視頻文件格式；插入HOCKWAVE①掌握多媒體的格式；②掌握?qǐng)D像的插圖插入與設(shè)置；④掌握動(dòng)畫(huà)的插入與設(shè)置；⑤掌握FLV視頻的插入與設(shè)置；⑥掌握音頻文件在網(wǎng)頁(yè)中的應(yīng)用，如背景音樂(lè)的應(yīng)用。4影片、插入ActiveX控件、插入背景音樂(lè)。網(wǎng)頁(yè)中的超鏈接超鏈接的定義；超鏈接的類(lèi)型；鏈接路徑；創(chuàng)立超鏈接的方法；文本超鏈接；下載超鏈接；電子郵件超鏈接；圖像超鏈接；命名錨記超鏈接；空鏈接；設(shè)置腳本超鏈接；管理超鏈接；自動(dòng)更新超鏈接。①理解超鏈接的定義、超鏈接的類(lèi)型；②掌握文本超鏈接；③掌握電子郵件超鏈接、圖像超鏈接；④會(huì)命名錨記超鏈接；⑤掌握空鏈接、設(shè)置腳本超鏈接；⑥理解管理超鏈接、自動(dòng)更新超鏈接。4表格使用與簡(jiǎn)單頁(yè)面布局插入表格；在表格中插入網(wǎng)頁(yè)元素；設(shè)置表格及單元格的屬性；設(shè)置單元格的屬性；表格與單元格的具體操作；表格分隔線與邊框操、表格特效設(shè)置；擴(kuò)展表格模式的進(jìn)入和退出。①掌握插入表格；②掌握在表格中插入網(wǎng)頁(yè)元素；③掌握單元格的屬性的設(shè)置；④掌握對(duì)表格的調(diào)整；⑤掌握表格在頁(yè)面中的應(yīng)用方式。4設(shè)計(jì)框架網(wǎng)頁(yè)框架網(wǎng)頁(yè)概念；創(chuàng)立各種框架；編輯框架集和保存框架集；設(shè)置框架頁(yè)面滾動(dòng)條；向框架中添加內(nèi)容；框架屬性；框架鏈接；框架標(biāo)簽；內(nèi)嵌框架IFRAME;IFRAME的屬性及應(yīng)用。①理解框架網(wǎng)頁(yè)概念；②會(huì)創(chuàng)立框架；③會(huì)編輯框架集和保存框架集；④能設(shè)置框架頁(yè)面滾動(dòng)條、向框架中添加內(nèi)容；⑤能內(nèi)嵌框架IFRAME并設(shè)置IFRAME的屬性。4CSS與Div布局CSS的基本概念；CSS基本語(yǔ)法；CSS的分類(lèi)；設(shè)置文本CSS樣式、設(shè)置文字樣式；設(shè)置文本對(duì)象樣式修飾背景和邊框；設(shè)置背景顏色和背景圖像；設(shè)置邊框樣式；盒模型；設(shè)置標(biāo)簽的顯示方式；CSS+Div布局DIV標(biāo)簽；3種布局方式。①理解CSS的基本概念；②理解CSS的分類(lèi)；③掌握CSS樣式、文字樣式的設(shè)置和背景邊框修飾；④掌握盒狀模型；⑤掌握CSS+DIV布局DIV標(biāo)簽的使用。4行為行為概述；事件、動(dòng)作；“行為”面板；添加行為、編輯行為；文本類(lèi)行為；設(shè)置狀態(tài)欄文本；圖像類(lèi)行為；代碼屬性類(lèi)行為、跳轉(zhuǎn)類(lèi)行為、效果類(lèi)行為。①理解行為基本概念；②掌握行為的基本操作；③能添加行為、編輯行為；文本類(lèi)行為；④掌握?qǐng)D像類(lèi)行為；⑤掌握效果類(lèi)行為。4網(wǎng)頁(yè)交互與特效網(wǎng)頁(yè)的交互行為概念；拖動(dòng)AP元素；顯示隱藏元素；Spry框架Spry①理解交互行為基本概念；②掌握拖動(dòng)AP元素操作；③Spry框架Spry效4

效果、Spry菜單欄；Spry選項(xiàng)卡式面板;Spry折疊式面板、Spry可折疊面板。果；spry菜單欄；；④Spry折疊式面板、Spry可折疊面板。網(wǎng)頁(yè)表單的應(yīng)用Spry表單驗(yàn)證技術(shù)；Spry驗(yàn)證文本域；Spry驗(yàn)證密碼域；Spry驗(yàn)證文本區(qū)域；Spry驗(yàn)證單項(xiàng)選擇按鈕組；①理解Spry表單驗(yàn)證技術(shù)基本概念；②掌握SPRY驗(yàn)證密碼域、SPRY驗(yàn)證文本區(qū)域；③Spry驗(yàn)證列表；④Spry驗(yàn)證復(fù)選。3網(wǎng)站綜合設(shè)計(jì)與制作實(shí)踐網(wǎng)站定位；網(wǎng)站需求分析；網(wǎng)站欄目設(shè)計(jì)；站點(diǎn)定義與目錄管理；網(wǎng)頁(yè)設(shè)計(jì)與制作；頁(yè)面布局；制作網(wǎng)站首頁(yè)；內(nèi)容頁(yè)面的制作。①掌握站點(diǎn)需求分析；②站點(diǎn)規(guī)劃；③掌握站點(diǎn)設(shè)計(jì)；④掌握站點(diǎn)實(shí)現(xiàn)。4課時(shí)加課汴（-）考核內(nèi)容及占比過(guò)程性考核占40%（包括作業(yè)、考勤、課堂表現(xiàn)等）；作品占40%（提交完整的網(wǎng)頁(yè)設(shè)計(jì)作品）。（見(jiàn)作品考核參考標(biāo)準(zhǔn)）（二）考核方式1.考核方式網(wǎng)頁(yè)作品。五、推薦教材、參考書(shū)目（一）推薦教材口］雷偉軍，馮永亮，毛艷，侯敏等.網(wǎng)頁(yè)設(shè)計(jì)與制作（微課版第3版）加］.