《HTML5+CSS3+JavaScript網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)戰(zhàn)》課程教學(xué)大綱學(xué) 分：3學(xué)分學(xué) 時(shí)：42學(xué)時(shí)（其中：講課學(xué)時(shí)：30學(xué)時(shí)上機(jī)學(xué)時(shí)：12學(xué)時(shí)）先修課程：計(jì)算機(jī)基礎(chǔ)、計(jì)算機(jī)網(wǎng)絡(luò)、計(jì)算機(jī)應(yīng)用后續(xù)課程：UI設(shè)計(jì)、JavaScript網(wǎng)頁(yè)特效適用專(zhuān)業(yè)：通識(shí)選修課、拓展課相關(guān)專(zhuān)業(yè)開(kāi)課部門(mén)：非計(jì)算機(jī)系一、課程的性質(zhì)與目標(biāo)頁(yè)基礎(chǔ)、HTML標(biāo)簽、CSS樣式、網(wǎng)頁(yè)布局、動(dòng)畫(huà)、JavaScript基礎(chǔ)、HTML5應(yīng)用、JavaScript特效和響應(yīng)式布局等內(nèi)容，通過(guò)本課程的學(xué)習(xí)，學(xué)web發(fā)展歷史及其未來(lái)方向，熟悉網(wǎng)頁(yè)設(shè)計(jì)流程、掌握網(wǎng)絡(luò)中常見(jiàn)的網(wǎng)頁(yè)書(shū)制度”Web前端的初級(jí)課程，通過(guò)本課程，能夠?yàn)閷W(xué)習(xí)后面的前端知識(shí)夯實(shí)基礎(chǔ)。二、課程設(shè)計(jì)理念與思路需的能力和終身學(xué)習(xí)的能力，實(shí)現(xiàn)一站式教學(xué)理念為主體，以案例（項(xiàng)目）實(shí)訓(xùn)為手段，設(shè)計(jì)出理論學(xué)習(xí)與技能掌握相融合的課程內(nèi)容體系。三、教學(xué)條件要求開(kāi)發(fā)工具：webstorm或其他代碼編輯工具四、課程的主要內(nèi)容及基本要求第一章 初識(shí)web前端學(xué)習(xí)單元初識(shí)web前端學(xué)時(shí)4學(xué)習(xí)目標(biāo)、CSSJavaScript學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)認(rèn)識(shí)萬(wàn)維網(wǎng)√前端發(fā)展簡(jiǎn)史√W3C的構(gòu)成√HTML5簡(jiǎn)介√HTML5特點(diǎn)√HTML5新特性√HTML5文件結(jié)構(gòu)√HTML5標(biāo)簽與元素的概述√CSS3簡(jiǎn)介√CSS3特點(diǎn)√CSS3新特性√CSS3引入方式√CSS3選擇器√CSS3屬性√JavaScript簡(jiǎn)介√JavaScript語(yǔ)言特性√JavaScript構(gòu)成√JavaScript變量與數(shù)據(jù)類(lèi)型√JavaScript運(yùn)算符√JavaScript常用事件√開(kāi)發(fā)工具的介紹√Webstorm的安裝√Webstorm的使用√Webstorm基本操作√創(chuàng)建第一個(gè)網(wǎng)頁(yè)√第二章 HTML構(gòu)建基本網(wǎng)頁(yè)學(xué)習(xí)單元HTML構(gòu)建基本網(wǎng)頁(yè)學(xué)時(shí)6學(xué)習(xí)目標(biāo)學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)標(biāo)題標(biāo)簽√段落標(biāo)簽√換行標(biāo)簽√【案例-秋天的故事】√圖片標(biāo)簽√水平線標(biāo)簽√<div>塊元素√√超鏈接√錨點(diǎn)鏈接√超鏈接的偽類(lèi)√【案例-技術(shù)手冊(cè)導(dǎo)航】√第三章 使用列表與表格布局學(xué)習(xí)單元使用列表與表格布局學(xué)時(shí)6學(xué)習(xí)目標(biāo)了解列表與表格特點(diǎn)掌握列表與表格的相關(guān)標(biāo)簽掌握列表與表格的使用學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)有序列表√無(wú)序列表√自定義列表√【案例-新聞列表】√表格基本標(biāo)簽√語(yǔ)義化標(biāo)簽√rowspan和colspan屬性√cellpadding和cellspacing屬性√表格其他屬性√【案例—個(gè)人簡(jiǎn)歷表】√第四章 設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面學(xué)習(xí)單元設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面學(xué)時(shí)6學(xué)習(xí)目標(biāo)了解盒模型結(jié)構(gòu)與z-index屬性掌握CSS定位的區(qū)別與應(yīng)用場(chǎng)景學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)盒模型內(nèi)容概述√Padding屬性√Border屬性√Margin屬性√怪異盒模型√Cursor屬性√【案例-圖書(shū)促銷(xiāo)活動(dòng)】√CSS浮動(dòng)√清除浮動(dòng)√定位的概述√relative相對(duì)定位√absolute絕對(duì)定位√fixed固定定位√z-index屬性√√display屬性√visibility屬性√overflow屬性√opacity屬性√rgba()函數(shù)√顯示與隱藏屬性總結(jié)√【案例-喜迎中秋佳節(jié)】√第五章 表單與表單設(shè)計(jì)效果學(xué)習(xí)單元表單與表單設(shè)計(jì)學(xué)時(shí)學(xué)習(xí)目標(biāo)了解表單各標(biāo)簽與屬性掌握<input>標(biāo)簽的type屬性值及含義掌握表單的基本使用學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)√表單概述√<form>標(biāo)簽√get和post提交方式√<input>標(biāo)簽√Type屬性值（表單各控件）√<label>標(biāo)簽√【案例-用戶登錄表單】√<select>標(biāo)簽√<textarea>標(biāo)簽√<fieldset>標(biāo)簽√【案例-登錄頁(yè)滿意度調(diào)查表】√新增表單控件√border-radius屬性√border-radius屬性√background-size屬性√【案例-退款申請(qǐng)表單】√第六章 實(shí)現(xiàn)CSS3動(dòng)畫(huà)學(xué)習(xí)單元實(shí)現(xiàn)CSS3動(dòng)畫(huà)學(xué)時(shí)6學(xué)習(xí)目標(biāo)了解CSS3動(dòng)畫(huà)掌握CSS3中2D和3D的transform轉(zhuǎn)換CSS3中的transition過(guò)渡掌握CSS3中的animation動(dòng)畫(huà)學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)transform-origin屬性√translate()位移√rotate()旋轉(zhuǎn)√scale()縮放√skew()傾斜√【案例-清涼夏日主題宣傳】√@keyframes規(guī)則√animation-name屬性√animation-duration屬性√animation-timing-function屬性√animation-delay屬性√animation-iteration-count屬性√animation-direction屬性√animation-fill-mode屬性√animation-play-state屬性√瀏覽器前綴√【案例-無(wú)縫輪播圖動(dòng)畫(huà)】√transition-property屬性√transition-duration屬性√transition-timing-function屬性√tansition-delay屬性√過(guò)渡與動(dòng)畫(huà)的效果區(qū)別√perspective屬性√transform-style屬性√perspective-origin屬性√backface-visibility屬性√3Drotate()旋轉(zhuǎn)√3Dtranslate()位移√3Dscale()縮放√【案例-旋轉(zhuǎn)夏日主題背景】√第七章 JavaScript基礎(chǔ)應(yīng)用學(xué)習(xí)單元JavaScript基礎(chǔ)應(yīng)用學(xué)時(shí)8學(xué)習(xí)目標(biāo)熟悉JavaScript基礎(chǔ)語(yǔ)法掌握DOM基本操作學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)創(chuàng)建對(duì)象√JavaScript函數(shù)√If語(yǔ)句√For循環(huán)√continue語(yǔ)句與break語(yǔ)句√DOM獲取元素節(jié)點(diǎn)√【案例-選取圖書(shū)列表】√DOM操作文本內(nèi)容√√節(jié)點(diǎn)關(guān)系√創(chuàng)建節(jié)點(diǎn)√添加節(jié)點(diǎn)√刪除節(jié)點(diǎn)√替換節(jié)點(diǎn)√克隆節(jié)點(diǎn)√DOM操作屬性√DOM操作樣式√【案例-點(diǎn)擊按鈕切換圖片】√setInterval定時(shí)器√clearInterval()清除定時(shí)器√setTimeout()定時(shí)器√clearTimeout()清除定時(shí)器√創(chuàng)建Date對(duì)象√獲取總毫秒值√Date對(duì)象方法√【案例-跨年倒計(jì)時(shí)】√數(shù)組的概述√創(chuàng)建數(shù)組√添加、刪除數(shù)組方法√轉(zhuǎn)換數(shù)組方法√遍歷數(shù)組方法√操作數(shù)組的其他方法√Math對(duì)象屬性√Math對(duì)象方法√【案例-隨機(jī)點(diǎn)名器】√第八章 實(shí)現(xiàn)HTML5應(yīng)用學(xué)習(xí)單元實(shí)現(xiàn)HTML5應(yīng)用學(xué)時(shí)8學(xué)習(xí)目標(biāo)了解HTML5多媒體掌握<video>視頻和<audio>音頻的應(yīng)用HTML5地理定位的應(yīng)用掌握<canvas>畫(huà)布的應(yīng)用學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)<video>標(biāo)簽√視頻格式√<audio>標(biāo)簽√音頻格式√DOM操作媒體文件√【案例-JS操作視頻】√BOM概述√Window對(duì)象√Window對(duì)象方法√√navigator.geolocation屬性√getCurrentPosition()方法√coords屬性√watchPosition()方法√clearWatch()方法√【案例-使用百度地圖API實(shí)現(xiàn)地理定位】√canvas的基本使用√canvas繪制圖形√canvas繪制文本√canvas圖形√canvas變形√<svg>標(biāo)簽√SVG繪制不同圖形√SVG繪制多點(diǎn)線和多點(diǎn)形狀√SVG與canvas的區(qū)別√【案例-canvas實(shí)現(xiàn)驗(yàn)證碼】√第九章 JavaScript特效（可選）學(xué)習(xí)單元JavaScript特效學(xué)時(shí)6學(xué)習(xí)目標(biāo)了解JavaScript的3大家族e(cuò)vent事件對(duì)象的使用offset家族、scroll家族和client家族中的各個(gè)屬性勻速和緩動(dòng)動(dòng)畫(huà)的運(yùn)用學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)offset家族√勻速動(dòng)畫(huà)以及封裝√緩動(dòng)動(dòng)畫(huà)以及封裝√【案例-導(dǎo)航菜單圖標(biāo)緩動(dòng)】√scroll家族√滾動(dòng)方法以及封裝√縱向滾動(dòng)的緩動(dòng)動(dòng)畫(huà)封裝√【階段案例—滾動(dòng)頁(yè)面導(dǎo)航欄固定√clientl家族√event事件對(duì)象√【案例-放大鏡效果】√第十章 移動(dòng)端布局與響應(yīng)式開(kāi)發(fā)（可選）學(xué)習(xí)單元移動(dòng)端布局與響應(yīng)式開(kāi)發(fā)學(xué)時(shí)10學(xué)習(xí)目標(biāo)了解流式布局和媒體查詢了解Bootstrap框架掌握Flex布局和rem布局學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)視口概述√使用視口√移動(dòng)端基礎(chǔ)交互√流式布局√Flex布局√容器屬性√項(xiàng)目屬性√【案例-圖書(shū)活動(dòng)Flex布局】√Rem單位√媒體查詢√Less概述√Less安裝√Less變量√Less嵌套√Less運(yùn)算√【案例-模擬圖書(shū)官網(wǎng)移動(dòng)端首頁(yè)】√Bootstrap概述√Bootstrap的使用√布局容器√?hào)鸥裣到y(tǒng)概述√?hào)鸥駞?shù)√列偏移√嵌套列√列排序√響應(yīng)式工具√Bootstrap組件√【案例-響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)】√第十一章 綜合案例-快遞網(wǎng)站首頁(yè)（可選）學(xué)習(xí)單元綜合案例-快遞網(wǎng)站首頁(yè)學(xué)時(shí)6學(xué)習(xí)目標(biāo)學(xué)習(xí)內(nèi)容知識(shí)點(diǎn)了解掌握重點(diǎn)難點(diǎn)案例概述√能力訓(xùn)練圖√文件夾結(jié)構(gòu)組織√√查快遞模塊√寄件服務(wù)模塊√企業(yè)風(fēng)采模塊√公司簡(jiǎn)介模塊√聯(lián)系我們模塊√頁(yè)腳模塊√五、學(xué)時(shí)分配章目講課上機(jī)合計(jì)第一章 404426426第四章 設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面426第五章 表單與表單效果設(shè)計(jì)426第六章 實(shí)現(xiàn)CSS3動(dòng)畫(huà)426第七章 JavaScript基礎(chǔ)應(yīng)用628第八章 實(shí)現(xiàn)HTML5應(yīng)用628第九章 JavaScript