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