網(wǎng)頁設(shè)計(jì)與制作教程-Web前端開發(fā) 第7版 -教學(xué)大綱-課程標(biāo)準(zhǔn)-64課時(shí)

PAGEPAGE6《Web前端開發(fā)》課程標(biāo)準(zhǔn)學(xué)分：4參考學(xué)時(shí)：64一、課程概述1．課程性質(zhì)《Web前端開發(fā)》（以前稱《網(wǎng)頁設(shè)計(jì)與制作》）課程是計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程、計(jì)算機(jī)信息管理、電子商務(wù)專業(yè)、物聯(lián)網(wǎng)工程專業(yè)的一門專業(yè)基礎(chǔ)課程。本課程的先修課程是《網(wǎng)絡(luò)與Web技術(shù)導(dǎo)論》、《Java編程基礎(chǔ)》等，后續(xù)課程有《響應(yīng)式Web設(shè)計(jì)》以及前端設(shè)計(jì)與開發(fā)方向的生產(chǎn)性實(shí)訓(xùn)，在以核心職業(yè)能力為培養(yǎng)目標(biāo)的課程體系中，起到承前啟后的作用。本課程以Web基本概念和Web標(biāo)準(zhǔn)為基準(zhǔn)點(diǎn)、通過對Web前端主流開發(fā)技術(shù)的學(xué)習(xí)和研究，讓學(xué)生理解和掌握HTML5、CSS3和JavaScript腳本語言的相關(guān)知識，通過這門課程的教學(xué)，不僅使學(xué)生通過項(xiàng)目實(shí)踐培養(yǎng)學(xué)生開發(fā)和設(shè)計(jì)Web站點(diǎn)的基本技能，更要使學(xué)生充分了解Web思想，為進(jìn)一步學(xué)習(xí)后續(xù)課程打下良好的基礎(chǔ)。2．課程教學(xué)目標(biāo)與基本要求本課程的教學(xué)目標(biāo)是讓學(xué)生理解HTML5、CSS3和JavaScript腳本語言的基本語法，掌握常用的Web頁面布局技術(shù)，理解并熟練應(yīng)用Java常用對象的屬性方法，使用DOM技術(shù)編寫頁面的客戶端程序，通過項(xiàng)目實(shí)訓(xùn)，培養(yǎng)學(xué)生具備設(shè)計(jì)實(shí)現(xiàn)Web客戶端頁面的初步能力。本課程教學(xué)基本要求是讓學(xué)生理解Web設(shè)計(jì)的基本原則、欄目和網(wǎng)站目錄結(jié)構(gòu)定義、標(biāo)準(zhǔn)頁面布局方法、導(dǎo)航菜單制作、圖文排版、頁面交互等方面的基礎(chǔ)知識；能夠熟練運(yùn)用HTML5中的文字、鏈接、列表、表格、表單、圖像、多媒體等標(biāo)記語言設(shè)計(jì)制作網(wǎng)頁；熟練掌握CSS3對網(wǎng)頁進(jìn)行布局和修飾的基本方法；掌握J(rèn)avaScript腳本語言的基本語法，理解對象的概念及使用JavaScript來編寫客戶端腳本程序。3.教學(xué)內(nèi)容課程內(nèi)容大體分為4部分：第一部分為HTML5的基本結(jié)構(gòu)和語法規(guī)則，包括HTML標(biāo)簽的塊級元素、行級元素，HTML5的拖放和畫布等內(nèi)容；第二部分重點(diǎn)介紹CSS3的基本語法和選擇器，包括CSS3的屬性、CSS的盒模型、CSS3變形、過渡和動畫屬性等內(nèi)容；第三部分介紹JavaScript程序設(shè)計(jì)基礎(chǔ)、對象模型和事件處理；第四部分為綜合案例。4.教學(xué)時(shí)數(shù)教學(xué)總時(shí)數(shù)為64學(xué)時(shí)，其中理論32學(xué)時(shí)，實(shí)驗(yàn)32學(xué)時(shí)。5.教學(xué)方式采用課堂講授和上機(jī)實(shí)踐相結(jié)合的教學(xué)方式。二、課程內(nèi)容（一）理論部分1.HTML5概述教學(xué)要點(diǎn)：Web的基本概念，HTML5的基本結(jié)構(gòu)和語法規(guī)則，編輯HTML文件。教學(xué)時(shí)數(shù)：2學(xué)時(shí)。教學(xué)內(nèi)容：1.1Web的基本概念介紹WWW、Web服務(wù)器、網(wǎng)頁瀏覽器、網(wǎng)站、網(wǎng)頁、URL、標(biāo)記語言、網(wǎng)頁標(biāo)準(zhǔn)等概念。1.2HTML5的基本結(jié)構(gòu)和語法規(guī)則介紹HTML5文檔的基本結(jié)構(gòu)，HTML5的基本語法，HTML的全局屬性，元素的分類，HTML的字符實(shí)體和顏色表示，HTML5開發(fā)人員編碼規(guī)范等內(nèi)容。1.3編輯HTML文件介紹常用HTML編輯軟件，網(wǎng)頁文件的創(chuàng)建。2.塊級元素教學(xué)要點(diǎn)：基本塊級元素，列表元素，表格元素table，表單，分區(qū)元素div，縮排元素blockquote。教學(xué)時(shí)數(shù)：4學(xué)時(shí)。教學(xué)內(nèi)容：2.1基本塊級元素介紹標(biāo)題元素hl～h6，段落元素p和換行元素br，水平線元素hr，注釋元素。2.2列表元素介紹無序列表元素ul，有序列表元素ol，定義列表元素dl，嵌套列表。2.3表格元素table介紹基本表格，跨行跨列的表格，表格數(shù)據(jù)的分組，調(diào)整列的格式。2.4表單介紹表單元素form，輸入元素input ，標(biāo)簽元素label，選擇欄元素select ，按鈕元素button，多行文本元素textarea。2.5分區(qū)元素div和縮排元素blockquote介紹分區(qū)元素div，縮排元素blockquote。3.行級元素教學(xué)要點(diǎn)：介紹行級元素的格式化元素，圖像元素img，超鏈接元素a，圖像熱區(qū)鏈接map、area，范圍元素span，多媒體元素。教學(xué)時(shí)數(shù)：4學(xué)時(shí)。教學(xué)內(nèi)容：3.1格式化元素介紹字體樣式元素，短語元素。3.2圖像元素img介紹圖像元素img。3.3超鏈接元素a介紹超鏈接元素a。3.4圖像熱區(qū)鏈接map、area介紹圖像熱區(qū)鏈接map、area。3.5范圍元素span 523.6多媒體元素介紹音頻元素audio，視頻元素video。4.CSS3基礎(chǔ)教學(xué)要點(diǎn)：介紹CSS簡介，在HTML中使用CSS的方法，CSS的兩個(gè)主要特性，CSS的基本語法，CSS的選擇器，屬性值的寫法和單位，HTML文檔結(jié)構(gòu)與元素類型等內(nèi)容。教學(xué)時(shí)數(shù)：8學(xué)時(shí)。教學(xué)內(nèi)容：4.1CSS簡介介紹CSS的發(fā)展歷史，CSS設(shè)計(jì)與編寫原則。4.2在HTML中使用CSS的方法介紹內(nèi)聯(lián)樣式，內(nèi)部樣式，鏈入外部樣式文件，導(dǎo)入外部樣式文件。4.3CSS的兩個(gè)主要特性介紹CSS的層疊特性和繼承特性。4.4CSS的基本語法介紹CSS的基本語法和編寫樣式時(shí)的注意事項(xiàng)。4.5CSS的選擇器介紹元素選擇器，通配符選擇器，屬性選擇器，派生選擇器，兄弟選擇器，id選擇器，類選擇器，偽類選擇器，UI元素狀態(tài)偽類選擇器，結(jié)構(gòu)偽類選擇器，其他偽類選擇器，偽元素選擇器。4.6屬性值的寫法和單位介紹長度、百分比單位，色彩單位。4.7HTML文檔結(jié)構(gòu)與元素類型介紹文檔結(jié)構(gòu)的基本概念，元素類型。5.CSS3的屬性教學(xué)要點(diǎn)：介紹CSS背景屬性，CSS字體屬性，CSS文本屬性，CSS尺寸屬性，CSS列表屬性，CSS表格屬性，CSS內(nèi)容屬性，CSS屬性的應(yīng)用。教學(xué)時(shí)數(shù)：8學(xué)時(shí)。教學(xué)內(nèi)容：5.1CSS背景屬性介紹背景顏色屬性background-color，背景圖像屬性background-image，重復(fù)背景圖像屬性background-repeat，固定背景圖像屬性background-attachment，背景圖像位置屬性background-position，背景圖像大小屬性background-size，背景屬性backgroud，背景覆蓋區(qū)域?qū)傩詁ackgroud-clip，背景圖像起點(diǎn)屬性backgroup-origin，背景漸變屬性background-image。5.2CSS字體屬性介紹字體類型屬性font-family，字體尺寸屬性font-size，字體傾斜屬性font-style，小寫字體屬性font-variant，字體粗細(xì)font-weight，字體簡寫屬性font，CSS3新增使用服務(wù)器字體。5.3CSS文本屬性介紹文本顏色屬性color，文本方向?qū)傩詃irection，字符間隔屬性letter-spacing，行高屬性line-height，文本水平對齊方式屬性text-align，為文本添加裝飾屬性text-decoration，段落首行縮進(jìn)屬性text-indent，文本的陰影屬性text-shadow，文本的大小寫屬性text-transform，元素內(nèi)部的空白屬性white-space，單詞之間的間隔屬性word-spacing，文本的截?cái)嘈Ч麑傩詔ext-overflow，文本的換行方式屬性word-break，單詞斷字屬性word-wrap。5.4CSS尺寸屬性介紹寬度屬性width，高度屬性height，最小寬度屬性min-width，最大寬度屬性max-width，最小高度屬性min-height，最大高度屬性max-height。5.5CSS列表屬性介紹圖像作為列表項(xiàng)的標(biāo)記屬性list-style-image，列表項(xiàng)標(biāo)記的位置屬性list-style-position，標(biāo)記的類型屬性list-style-type，列表簡寫屬性list-style。5.6CSS表格屬性介紹合并邊框?qū)傩詁order-collapse，邊框間隔屬性border-spacing，單元格無內(nèi)容顯示方式屬性empty-cells，表格設(shè)置方式屬性table-layout 。5.7CSS內(nèi)容屬性介紹content屬性。5.8CSS屬性的應(yīng)用介紹設(shè)置圖像樣式，設(shè)置鏈接，創(chuàng)建導(dǎo)航菜單。6.CSS的盒模型教學(xué)要點(diǎn)：介紹CSS盒模型的組成和大小，CSS盒模型的屬性，CSS布局屬性，CSS盒子定位屬性，CSS3多列屬性，CSS基本布局樣式。教學(xué)時(shí)數(shù)：6學(xué)時(shí)。教學(xué)內(nèi)容：6.1CSS盒模型的組成和大小介紹盒子的組成，盒子的大小，塊級元素與行級元素的寬度和高度。6.2CSS盒模型的屬性介紹CSS內(nèi)邊距屬性padding，CSS外邊距屬性margin，CSS邊框?qū)傩詁order，圓角邊框?qū)傩詁order-radius，盒模型的陰影屬性box-shadow，圖片邊框?qū)傩詁order-image，CSS輪廓屬性outline，調(diào)整大小屬性resize。6.3CSS布局屬性介紹元素的布局方式，CSS浮動屬性float，清除浮動屬性clear，裁剪屬性clip，內(nèi)容溢出時(shí)顯示方式屬性overflow，元素顯示方式屬性display，元素可見性屬性visibility。6.4CSS盒子定位屬性介紹定位位置屬性top、right、bottom、left，定位方式屬性position，層疊順序?qū)傩詚-index。6.5CSS3多列屬性介紹列數(shù)屬性column-count，列寬屬性column-width，列寬屬性column，列之間的間隔屬性olumn-gap，是否橫跨所有列屬性column-span，列間隔樣式屬性column-rule-style，列之間間隔顏色屬性column-rule-color，列之間寬度屬性column-rule-width，列之間間隔所有屬性column-rule。6.6CSS基本布局樣式介紹CSS布局類型，CSS布局樣式。7.JavaScript程序設(shè)計(jì)基礎(chǔ)教學(xué)要點(diǎn)：介紹JavaScript概述，在HTML文檔中使用JavaScript，數(shù)據(jù)類型，標(biāo)識符、變量、運(yùn)算符和表達(dá)式，流程控制語句，函數(shù)，對象，內(nèi)置對象，正則表達(dá)式。教學(xué)時(shí)數(shù)：12學(xué)時(shí)。教學(xué)內(nèi)容：7.1JavaScript概述介紹ECMAScript的版本，JavaScript的特點(diǎn)。7.2在HTML文檔中使用JavaScript介紹在HTML文檔中嵌入腳本程序，鏈接腳本文件，在HTML標(biāo)簽內(nèi)添加腳本。7.3數(shù)據(jù)類型介紹數(shù)據(jù)類型的分類，基本數(shù)據(jù)類型，數(shù)據(jù)類型的判斷，數(shù)據(jù)類型的轉(zhuǎn)換。7.4標(biāo)識符、變量、運(yùn)算符和表達(dá)式介紹標(biāo)識符，常量，變量，運(yùn)算符和表達(dá)式，語句的書寫規(guī)則。7.5流程控制語句介紹順序結(jié)構(gòu)語句，條件選擇結(jié)構(gòu)語句，循環(huán)結(jié)構(gòu)語句。7.6函數(shù)介紹函數(shù)的聲明，函數(shù)的調(diào)用，變量的作用域，內(nèi)嵌函數(shù)，閉包函數(shù)，系統(tǒng)函數(shù)。7.7對象介紹對象的概念，創(chuàng)建類，對象的實(shí)例化，對象的屬性，對象的方法，對象的遍歷，對象的事件。7.8內(nèi)置對象介紹數(shù)學(xué)對象，字符串對象，日期對象，數(shù)組對象。7.9正則表達(dá)式介紹創(chuàng)建正則表達(dá)式，正則表達(dá)式的組成，正則表達(dá)式使用的方法。8.JavaScript對象模型教學(xué)要點(diǎn)：介紹BOM的對象和DOM的對象。教學(xué)時(shí)數(shù)：4學(xué)時(shí)。教學(xué)內(nèi)容：8.1BOM的對象介紹window對象，document對象，location對象，navigator對象，screen對象，history對象。8.2DOM的對象介紹節(jié)點(diǎn)和節(jié)點(diǎn)樹，DOM的操作，node對象，HTMLDOM對象，HTMLdocument對象，HTMLelement對象，node操作實(shí)例。9.JavaScript事件處理教學(xué)要點(diǎn)：介紹事件概述，window事件，mouse事件，keyboard事件，form事件，事件捕捉與事件冒泡。教學(xué)時(shí)數(shù)：4學(xué)時(shí)。教學(xué)內(nèi)容：9.1事件概述介紹事件的概念，事件的類型，事件處理程序的綁定方式。9.2window事件介紹load事件，resize事件，scroll事件，focus和blur事件。9.3mouse事件介紹click事件，dblclick事件，mouseover和mouseout事件，mousedown、mousemove和mouseup事件。9.4keyboard事件介紹keydown事件，keypress事件，keyup事件。9.5form事件介紹onsubmit、onreset事件，子元素事件事件。9.6事件捕捉與事件冒泡介紹事件捕捉與事件冒泡的執(zhí)行順序，阻止事件冒泡和捕捉，取消默認(rèn)事件。10.CSS3變形、過渡和動畫屬性教學(xué)要點(diǎn)：介紹變形，過渡，動畫。教學(xué)時(shí)數(shù)：4學(xué)時(shí)。教學(xué)內(nèi)容：10.1變形介紹CSS的坐標(biāo)系統(tǒng)，transform屬性，transform-origin屬性，transform-style屬性，perspective和perspective-origin屬性，backface-visibility屬性。10.2過渡介紹過渡屬性，過渡事件。10.3動畫介紹動畫屬性，動畫事件。11.HTML5的拖放和畫布教學(xué)要點(diǎn)：介紹拖放，畫布。教學(xué)時(shí)數(shù)：2學(xué)時(shí)。教學(xué)內(nèi)容：11.1拖放介紹draggable屬性，拖放事件，數(shù)據(jù)傳遞對象dataTransfer。11.2畫布介