Web前端開發(fā)-教學(xué)大綱-課程標(biāo)準(zhǔn)-64課時(shí)

PAGE1PAGE7《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)的課程體系中，起到承前啟后的作用。本課程旨在培養(yǎng)學(xué)生設(shè)計(jì)和制作網(wǎng)頁的能力，本課程以Web基本概念和Web標(biāo)準(zhǔn)為基準(zhǔn)點(diǎn)、通過對(duì)Web前端主流開發(fā)技術(shù)的學(xué)習(xí)和研究，讓學(xué)生理解和掌握HTML5、CSS3和JavaScript腳本語言的相關(guān)知識(shí)，通過這門課程的教學(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常用對(duì)象的屬性方法，使用DOM技術(shù)編寫頁面的客戶端程序，通過項(xiàng)目實(shí)訓(xùn)，培養(yǎng)學(xué)生具備設(shè)計(jì)實(shí)現(xiàn)Web客戶端頁面的初步能力。課程設(shè)計(jì)應(yīng)充分體現(xiàn)“教師指導(dǎo)下的以學(xué)生為中心”的教學(xué)模式，以學(xué)生為認(rèn)知主體，充分調(diào)動(dòng)學(xué)生的積極性和能動(dòng)性，重視學(xué)生自學(xué)能力的培養(yǎng)。由教師提出任務(wù)，學(xué)生獨(dú)立設(shè)計(jì)并完成。本課程教學(xué)的知識(shí)目標(biāo)見下表。序號(hào)內(nèi)容1理解Web設(shè)計(jì)的基本原則，欄目、網(wǎng)站目錄結(jié)構(gòu)的定義，標(biāo)準(zhǔn)頁面布局方法、導(dǎo)航菜單制作、圖文排版、頁面交互等方面的基礎(chǔ)知識(shí)；2熟練掌握運(yùn)用HTML5中的文字、鏈接、列表、表格、表單、圖像、多媒體等標(biāo)記語言設(shè)計(jì)制作網(wǎng)頁；3掌握CSS3對(duì)網(wǎng)頁進(jìn)行布局和修飾的基本方法；4掌握J(rèn)avaScript腳本語言的基本語法，理解對(duì)象的概念及使用JavaScript來編寫客戶端腳本程序。5掌握基本新聞?lì)惥W(wǎng)站的設(shè)計(jì)與制作，包括主頁、欄目頁和內(nèi)容頁。本課程能力目標(biāo)見下表。序號(hào)內(nèi)容1具備編寫和調(diào)試HTML5語言的能力；2具備編寫和調(diào)試CSS3語言的能力；3具備編寫和調(diào)試JavaScript語言的能力；4具備設(shè)計(jì)新聞?lì)惥W(wǎng)頁的主頁、欄目頁和內(nèi)容頁以及相關(guān)菜單的能力；5具備文檔的閱讀能力，文檔的編寫和排版能力。本課程的素質(zhì)目標(biāo)見下表。序號(hào)內(nèi)容1具有質(zhì)量意識(shí)、安全意識(shí)、工匠精神和創(chuàng)新思維；2具有集體意識(shí)和團(tuán)隊(duì)合作精神；3熟悉網(wǎng)頁開發(fā)流程和規(guī)范，具有良好的編程習(xí)慣；4具有界面設(shè)計(jì)的審美和人文素養(yǎng)；5培養(yǎng)文檔的閱讀、編寫素質(zhì)。3.教學(xué)內(nèi)容課程內(nèi)容大體分為4部分：第一部分為HTML5的基本結(jié)構(gòu)和語法規(guī)則，包括HTML標(biāo)簽的塊級(jí)元素、行級(jí)元素，HTML5的拖放和畫布等內(nèi)容；第二部分重點(diǎn)介紹CSS3的基本語法和選擇器，包括CSS3的屬性、CSS的盒模型、CSS3變形、過渡和動(dòng)畫屬性等內(nèi)容；第三部分介紹JavaScript程序設(shè)計(jì)基礎(chǔ)、對(duì)象模型和事件處理；第四部分為綜合案例。章項(xiàng)目第1章HTML5基礎(chǔ)制作社區(qū)網(wǎng)版權(quán)信息第2章HTML5的塊級(jí)元素制作精選信息板塊第3章HTML5的行級(jí)元素制作廣告板塊第4章CSS3基礎(chǔ)制作內(nèi)容詳情頁第5章CSS3的屬性制作通知公告目錄頁面、導(dǎo)航欄第6章CSS3的盒模型制作新聞圖片頁面、熱點(diǎn)關(guān)注頁面第7章JavaScript語法基礎(chǔ)使用開發(fā)者工具調(diào)試JavaScript程序第8章JavaScript對(duì)象基礎(chǔ)使用對(duì)象編程第9章JavaScript對(duì)象模型使用對(duì)象模型編程第10章JavaScript事件處理制作事件頁面第11章綜合案例——社區(qū)新聞網(wǎng)的設(shè)計(jì)與實(shí)現(xiàn)制作新聞網(wǎng)的首頁、列表頁和內(nèi)容頁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基礎(chǔ)教學(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文檔。2.HTML5的塊級(jí)元素教學(xué)要點(diǎn)：基本塊級(jí)元素，列表元素，表格元素，表單，分區(qū)元素縮排元素。教學(xué)時(shí)數(shù)：6學(xué)時(shí)。教學(xué)內(nèi)容：2.1基本塊級(jí)元素介紹標(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.HTML5的行級(jí)元素教學(xué)要點(diǎn)：行級(jí)元素的格式化元素，圖像元素，超鏈接元素，圖像熱區(qū)鏈接，范圍元素，多媒體元素。教學(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范圍元素span3.6多媒體元素介紹音頻元素audio，視頻元素video。4.CSS3基礎(chǔ)教學(xué)要點(diǎn)：CSS3基礎(chǔ)。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)：CSS3的屬性。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，文本水平對(duì)齊方式屬性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布局屬性，CSS盒子定位屬性，CSS3多列屬性，CSS基本布局樣式。教學(xué)時(shí)數(shù)：6學(xué)時(shí)。教學(xué)內(nèi)容：6.1CSS盒模型的組成和大小介紹盒子的組成。盒子的大小，塊級(jí)元素與行級(jí)元素的寬度和高度。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浮動(dòng)屬性float，清除浮動(dòng)屬性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語法基礎(chǔ)教學(xué)要點(diǎn)：JavaScript程序設(shè)計(jì)基礎(chǔ)。JavaScript概述，在HTML文檔中使用JavaScript，數(shù)據(jù)類型，標(biāo)識(shí)符、變量、運(yùn)算符和表達(dá)式，流程控制語句，函數(shù)，對(duì)象，內(nèi)置對(duì)象，正則表達(dá)式。教學(xué)時(shí)數(shù)：8學(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)識(shí)符、變量和常量介紹標(biāo)識(shí)符，字面常量，定義變量，定義常量。7.5運(yùn)算符和表達(dá)式介紹運(yùn)算符和表達(dá)式，語句的書寫規(guī)則7.6流程控制介紹順序結(jié)構(gòu)，條件選擇結(jié)構(gòu)，循環(huán)結(jié)構(gòu)。7.7函數(shù)介紹函數(shù)的聲明，函數(shù)的調(diào)用，變量的作用域和生命周期，內(nèi)嵌函數(shù)，閉包函數(shù)，箭頭函數(shù)，常用系統(tǒng)函數(shù)。7.8正則表達(dá)式介紹創(chuàng)建正則表達(dá)式，正則表達(dá)式的組成，正則表達(dá)式使用的方法。8.JavaScript對(duì)象基礎(chǔ)8.1JavaScript對(duì)象概述介紹本地對(duì)象、內(nèi)置對(duì)象和宿主對(duì)象。8.2對(duì)象介紹對(duì)象的概念，類，創(chuàng)建對(duì)象，對(duì)象的屬性，對(duì)象的方法，對(duì)象的遍歷，對(duì)象的事件。8.3內(nèi)置對(duì)象介紹數(shù)學(xué)對(duì)象，字符串對(duì)象，日期對(duì)象，數(shù)組對(duì)象，擴(kuò)展運(yùn)算符。9.JavaScript對(duì)象模型教學(xué)要點(diǎn)：JavaScript對(duì)象模型。BOM的對(duì)象和DOM的對(duì)象。教學(xué)時(shí)數(shù)：4學(xué)時(shí)。教學(xué)內(nèi)容：9.1BOM的對(duì)象介紹window對(duì)象，document對(duì)象，location對(duì)象，navigator對(duì)象，screen對(duì)象，history對(duì)象。9.2DOM的對(duì)象介紹節(jié)點(diǎn)和節(jié)點(diǎn)樹，DOM的操作，node對(duì)象，HTMLDOM對(duì)象，HTMLdocument對(duì)象，HTMLelement對(duì)象，node操作實(shí)例。9.3DOM與CSS介紹style對(duì)象，currentStyle對(duì)象，CSSStyleSheet對(duì)象。10.JavaScript事件處理教學(xué)要點(diǎn)：JavaScript事件處理。事件概述，window事件，mouse事件，keyboard事件，form事件，事件捕捉與事件冒泡。教學(xué)時(shí)數(shù)：4學(xué)時(shí)。教學(xué)內(nèi)容：10.1事件概述介紹事件的概念，事件的類型，事件處理程序的綁定方式。10.2window事件介紹load事件，resize事件，scroll事件，focus和blur事件。10.3mouse事件介紹click事件，dblclick事件，mouseover和mouseout事件，mousedown、mousemove和mouseup事件。10.4keyboard事件介紹keydown事件，keypress事件，keyup事件。10.5form事件介紹onsubmit、onreset事件，子元素事件事件。10.6事件捕捉與事件冒泡介紹事件捕捉與事件冒泡的執(zhí)行順序，阻止事件冒泡和捕捉，取消默認(rèn)事件。11.綜合案例教學(xué)要點(diǎn)：綜合案例。網(wǎng)站的開發(fā)流程和組織結(jié)構(gòu)，制作新聞網(wǎng)的首頁，制作新聞網(wǎng)的列表頁，