教學大綱-HTML+CSS+JavaScript網頁設計教程（孟憲寧）

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