教學(xué)大綱-HTML+CSS+JavaScript網(wǎng)頁設(shè)計(jì)教程（孟憲寧）

《HTML+CSS+JavaScript網(wǎng)頁設(shè)計(jì)》教學(xué)大綱一、課程的性質(zhì)和設(shè)計(jì)思路：《HTML+CSS+JavaScript網(wǎng)頁設(shè)計(jì)》是計(jì)算機(jī)應(yīng)用技術(shù)及相關(guān)專業(yè)基本技能素質(zhì)課程之一，是計(jì)算機(jī)相關(guān)專業(yè)進(jìn)行Web編程的專業(yè)基礎(chǔ)課程。課程整合三個(gè)模塊領(lǐng)域的知識：HTML標(biāo)記語言、CSS樣式設(shè)計(jì)工具的使用、JavaScript腳本代碼。通過本課程的學(xué)習(xí),使學(xué)生能熟練使用HTML標(biāo)記語言、CSS，配以JavaScript腳本代碼，實(shí)現(xiàn)動(dòng)態(tài)等較復(fù)雜的網(wǎng)頁制作，并為后續(xù)JavaWeb等動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)類課程打下基礎(chǔ)。二、課程目標(biāo)和能力培養(yǎng)：能力目標(biāo):培養(yǎng)學(xué)生能將HTML標(biāo)記語言、ＣＳＳ樣式設(shè)計(jì)知識綜合運(yùn)用，具備較系統(tǒng)的網(wǎng)站設(shè)計(jì)能力，掌握J(rèn)avaScript腳本代碼實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)技術(shù)。知識目標(biāo):熟練綜合運(yùn)用HTML標(biāo)記語言、ＣＳＳ樣式、JavaScript知識，具備較系統(tǒng)的網(wǎng)站設(shè)計(jì)流程知識。三、教學(xué)設(shè)計(jì)思路本課程的設(shè)計(jì)思路：本課程以“講清語法、學(xué)以致用”為指導(dǎo)思想，不僅僅將課程局限在語法講解上，通過一個(gè)個(gè)鮮活、典型的小實(shí)例達(dá)到學(xué)以致用的目的，在每個(gè)語法都有相應(yīng)的實(shí)例，還配有綜合小實(shí)例。四、教學(xué)內(nèi)容和要求：本課程總學(xué)時(shí)數(shù)為64學(xué)時(shí)。共計(jì)4學(xué)分。序號工作任務(wù)課程內(nèi)容與教學(xué)要求教學(xué)活動(dòng)設(shè)計(jì)參考學(xué)時(shí)1課程認(rèn)識HTML、CSS、JavaScript各自的代碼特點(diǎn)HTML、CSS、JavaScript在網(wǎng)頁設(shè)計(jì)中的角色HTML、CSS、JavaScript的代碼結(jié)構(gòu)通過仿百度首頁案例的安排初步認(rèn)識網(wǎng)頁設(shè)計(jì)。并通過比較，讓學(xué)生分析出HTML、CSS、JavaScript各自代碼特點(diǎn)和結(jié)構(gòu)總結(jié)HTML、CSS、JavaScript在網(wǎng)頁設(shè)計(jì)中的角色22HTML語言HTML的基本語法，分析了一個(gè)完整的網(wǎng)頁組成部分，重點(diǎn)介紹HTML文檔頭部相關(guān)的<meta>標(biāo)簽。分別介紹段落、文本格式化、列表、超鏈接、圖像與多媒體、表單、表格、框架等網(wǎng)頁設(shè)計(jì)中要用到的HTML標(biāo)簽做了詳細(xì)介紹。通過知識點(diǎn)講解+案例演示的方式講解HTML基本語法；講解的過程是先給學(xué)生講清楚HTML標(biāo)簽的基本語法格式，然后結(jié)合具體的網(wǎng)頁設(shè)計(jì)案例講解標(biāo)簽的用法和效果。對照代碼讓學(xué)生領(lǐng)會(huì)功能所對應(yīng)的代碼。最后根據(jù)講解的內(nèi)容布置學(xué)生自己動(dòng)手做一個(gè)綜合的作業(yè)。每次都是給出學(xué)生效果圖，讓學(xué)生通過HTML代碼實(shí)現(xiàn)。163CSS（層疊樣式表）在網(wǎng)頁中如何應(yīng)用CSS樣式、CSS樣式的基本語法格式，重點(diǎn)介紹CSS的選擇器。詳細(xì)介紹了文本樣式、盒子模型、浮動(dòng)和定位，以及樣式的繼承、層疊和優(yōu)先級的概念。最后通過實(shí)現(xiàn)騰訊網(wǎng)首頁的搜索案例通過知識點(diǎn)講解+案例演示的方式講解CSS的基本語法；講解的過程是先給學(xué)生講清楚CSS樣式的基本語法格式，然后結(jié)合具體的網(wǎng)頁設(shè)計(jì)案例講解樣式的用法和效果。最后通過仿騰訊網(wǎng)首頁搜索框案例綜合應(yīng)用所學(xué)層疊樣式表知識點(diǎn)184JavaScript在網(wǎng)頁中如何引入JavaScript代碼，并介紹了在Chrome瀏覽器中調(diào)試JavaScript代碼的基本技巧。avaScript的標(biāo)識符、變量、基本數(shù)據(jù)類型、運(yùn)算符和表達(dá)式，以及順序、分支和循環(huán)的語法格式及編程思想，對JavaScript控制網(wǎng)頁行為要用到的函數(shù)和事件做了詳細(xì)介紹。DOM模型的相關(guān)概念，使用JavaScript來控制網(wǎng)頁元素的表現(xiàn)行為；使用BOM模型來實(shí)現(xiàn)網(wǎng)頁和瀏覽器之間的交互。通過知識點(diǎn)講解+案例演示的方式講解JavaScript的基本語法；重點(diǎn)講解JavaScript的DOM模型實(shí)現(xiàn)網(wǎng)頁交互設(shè)計(jì)的過程和案例演示。最后通過仿騰訊網(wǎng)首頁搜索框的下拉菜單案例綜合應(yīng)用所學(xué)JavaScript知識點(diǎn)205網(wǎng)頁設(shè)計(jì)綜合案例通過實(shí)現(xiàn)騰訊網(wǎng)首頁的這個(gè)案例，將前幾章所學(xué)的HTML、CSS和JavaScript技術(shù)進(jìn)行綜合應(yīng)用。實(shí)現(xiàn)這個(gè)綜合案例，綜合應(yīng)用前4個(gè)知識點(diǎn)開發(fā)符合Web開發(fā)規(guī)范的網(wǎng)頁。騰訊網(wǎng)首頁布局分析+分部分技術(shù)實(shí)現(xiàn)的方式進(jìn)行