1、網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)教案教案學(xué)院(部)： 系（教研室）： 軟件工程系 授課教師： 職 稱： 課程名稱網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)總學(xué)分： 2.0 學(xué)分總學(xué)時(shí)：32學(xué)時(shí) 其中： 講課 24 學(xué)時(shí) 實(shí)踐 8 學(xué)時(shí)課程類別必修課（ ） 選修課( )公共課（ ） 學(xué)科課（ ） 專業(yè)課（ ） 實(shí)踐課（ ） 全校任選課（ ）授課對(duì)象軟件工程考核方式考查課程?？傇u(píng)成績(jī)=平時(shí)總成績(jī)（40%）+期末考試成績(jī)60%教學(xué)基本目的和要求 本課程將介紹WEB開發(fā)的基礎(chǔ)技術(shù)，著重介紹HTML/XHTML標(biāo)記語(yǔ)言、CSS層疊樣式表和JAVASCRIPT腳本語(yǔ)言等相關(guān)內(nèi)容。通過(guò)本課程的學(xué)習(xí)，掌握開發(fā)靜態(tài)網(wǎng)頁(yè)的基本技術(shù)以及網(wǎng)站規(guī)劃、制作及管理維護(hù)等基

2、本技能，了解WEB開發(fā)的高級(jí)技術(shù)，能夠獨(dú)立開發(fā)靜態(tài)網(wǎng)頁(yè)組成的網(wǎng)站，基本掌握J(rèn)AVASCRIPT腳本語(yǔ)言及常見網(wǎng)頁(yè)動(dòng)態(tài)效果的編寫方法。 本課程力求通過(guò)理論和實(shí)踐教學(xué)，使學(xué)生較好地掌握WEB程序設(shè)計(jì)技術(shù)和基本方法，對(duì)WEB開發(fā)有一個(gè)全面的認(rèn)識(shí)和了解，并能夠獨(dú)立自主開發(fā)靜態(tài)網(wǎng)頁(yè)組成的網(wǎng)絡(luò)應(yīng)用程序。教學(xué)重點(diǎn)和難點(diǎn)教學(xué)重點(diǎn)：HTML標(biāo)記語(yǔ)法及常用標(biāo)記，CSS使用方法及常用屬性，網(wǎng)頁(yè)設(shè)計(jì)與制作過(guò)程，網(wǎng)站管理與發(fā)布，JavaScript基本語(yǔ)法，瀏覽器對(duì)象模型BOM，DOM，事件處理模型，正則表達(dá)式。教學(xué)難點(diǎn)：CSS使用方法與選擇器，網(wǎng)站管理與發(fā)布，瀏覽器對(duì)象模型BOM，DOM，事件處理模型，正則表達(dá)式教材

3、、參考書教材:1.Web前端設(shè)計(jì)與開發(fā)-HTML+CSS+HTML5+jQuery，QST青軟實(shí)訓(xùn)，清華大學(xué)出版社，20162.Web前端開發(fā)實(shí)例教程-HTML.CSS. ，占東明，人民郵電出版社，2016其他教學(xué)資源：萬(wàn)維網(wǎng)聯(lián)盟發(fā)布的相關(guān)標(biāo)準(zhǔn).（）教案 總學(xué)時(shí)第 1 學(xué)時(shí) 第 2 學(xué)時(shí)授課內(nèi)容網(wǎng)頁(yè)制作基礎(chǔ)教學(xué)目的和要求了解網(wǎng)頁(yè)制作基本步驟，掌握網(wǎng)頁(yè)的構(gòu)成等基本知識(shí)，了解HTML和CSS的標(biāo)準(zhǔn)化過(guò)程，熟悉網(wǎng)頁(yè)制作開發(fā)環(huán)境。重點(diǎn)難點(diǎn)網(wǎng)頁(yè)制作基本步驟，網(wǎng)頁(yè)相關(guān)的基本知識(shí)，HTML和CSS的標(biāo)準(zhǔn)化過(guò)程教學(xué)安排一、網(wǎng)頁(yè)相關(guān)的基本知識(shí) 1. 網(wǎng)頁(yè)的元素：文本、圖像、鏈接

4、、聲音、電影或動(dòng)態(tài)圖像。 2. 網(wǎng)頁(yè)的表現(xiàn)形式：瀏覽器。常見瀏覽器介紹：Internet Explorer；NetScape Navigator 網(wǎng)景瀏覽器；火狐(Firefox)瀏覽器；Opera瀏覽器；其它IE核心瀏覽器。 3. 網(wǎng)頁(yè)的地址（網(wǎng)址）：URL超文本傳輸協(xié)議統(tǒng)一資源定位符將從因特網(wǎng)獲取信息的四個(gè)基本元素包括在一個(gè)簡(jiǎn)單的地址中：傳送協(xié)議； 服務(wù)器； 端口號(hào)； 路徑。 4. 網(wǎng)站：網(wǎng)頁(yè)的集合。衡量一個(gè)網(wǎng)站的性能通常從網(wǎng)站空間大小、網(wǎng)站位置、網(wǎng)站連接速度、網(wǎng)站服務(wù)內(nèi)容等幾方面考慮。 5. 網(wǎng)站的地址：域名/IP地址。二、網(wǎng)頁(yè)制作的基本步驟 收集和整理資料；制作網(wǎng)頁(yè)；測(cè)試站點(diǎn)；發(fā)布站點(diǎn)

5、；站點(diǎn)維護(hù)和更新。三、HTML和CSS 1. HTML標(biāo)準(zhǔn)的版本歷史2. CSS的定義及發(fā)展歷史 3. XHTML與HTML四、開發(fā)環(huán)境介紹 Dreamweaver 8和文本編輯器（EditPlus等）思考題、課后作業(yè)練習(xí)使用Dreamweaver。主要參考資料萬(wàn)維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析學(xué)生對(duì)本課程的熟悉程度差距較大，日后的教學(xué)安排應(yīng)更具有針對(duì)性。備注教案 總學(xué)時(shí)第 3 學(xué)時(shí) 第 4 學(xué)時(shí)授課內(nèi)容網(wǎng)頁(yè)中的文字CSS網(wǎng)頁(yè)樣式設(shè)置教學(xué)目的和要求掌握HTML中的文字標(biāo)記；掌握CSS的三種使用方法；熟悉常用的CSS屬性。重點(diǎn)難點(diǎn)HTML中的文字標(biāo)記；CSS的使用方法；CSS

6、選擇器教學(xué)安排一、HTML文本標(biāo)記 段落標(biāo)記： 標(biāo)題標(biāo)記：- 換行標(biāo)記： 列表標(biāo)記：（有序）,（無(wú)序）,（列表項(xiàng)）二、CSS的使用方法； 1. 行內(nèi)樣式 缺點(diǎn)：容易增加網(wǎng)頁(yè)體積，不推薦使用。優(yōu)點(diǎn)：使用簡(jiǎn)單。 2. 嵌入式樣式：嵌入在與之間 3. 鏈接式：放置在與之間 4. 導(dǎo)入式：放置在與之間 import url(sheet1.css);三、CSS選擇器 集體聲明；嵌套選擇器；思考題、課后作業(yè)在文檔中使用CSS。主要參考資料萬(wàn)維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析應(yīng)提供CSS中的屬性的中英文對(duì)照表方便學(xué)生學(xué)習(xí)。備注教案 總學(xué)時(shí)第 5 學(xué)時(shí) 第 6 學(xué)時(shí)授課內(nèi)容網(wǎng)頁(yè)中的圖片建立超

7、鏈接教學(xué)目的和要求掌握HTML中的圖片標(biāo)記和超鏈接標(biāo)記。重點(diǎn)難點(diǎn)HTML中的圖片標(biāo)記和超鏈接標(biāo)記。教學(xué)安排一、HTML圖片標(biāo)記 1. 網(wǎng)頁(yè)中的圖片格式 2. 插入圖片： 3. 屬性的使用： src必不可少；alt替換文本。二、HTML超鏈接標(biāo)記 超鏈接標(biāo)記：錨 1. 文字超鏈接 2. 圖片超鏈接：圖片超鏈接會(huì)自動(dòng)為圖片添加邊框。 3. 鏈接目標(biāo)：target 4. 特點(diǎn)目標(biāo)的鏈接：#三、與超鏈接有關(guān)的CSS屬性 a:link: 鏈接樣式 a:hover: 鼠標(biāo)指向鏈接時(shí)的樣式 a:active: 激活鏈接的樣式 a:visited: 訪問(wèn)過(guò)鏈接的樣式思考題、課后作業(yè)使用圖片標(biāo)記插入圖片； 建立

8、文本超鏈接。主要參考資料萬(wàn)維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 7 學(xué)時(shí) 第 8 學(xué)時(shí)授課內(nèi)容表格教學(xué)目的和要求掌握HTML中的表格標(biāo)記的多種使用方法。重點(diǎn)難點(diǎn)復(fù)雜表格的創(chuàng)建方法，表格布局方法。教學(xué)安排一、使用HTML建立表格 表格標(biāo)題 二、使用CSS建立多種表格樣式 重點(diǎn)：表格邊框的多種樣式 難點(diǎn)：表格外框與單元格邊框之間的關(guān)系三、布局單元格和表格 使用屬性：width, height, rowspan, colspan思考題、課后作業(yè)使用表格布局網(wǎng)頁(yè)。主要參考資料萬(wàn)維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 9 學(xué)時(shí) 第 12

9、學(xué)時(shí)授課內(nèi)容網(wǎng)站制作綜合實(shí)例教學(xué)目的和要求掌握網(wǎng)站制作的完整過(guò)程。重點(diǎn)難點(diǎn)網(wǎng)站制作的完整過(guò)程。教學(xué)安排 通過(guò)為一個(gè)虛擬公司創(chuàng)建完整網(wǎng)站，從網(wǎng)站構(gòu)思到設(shè)計(jì)，再到頁(yè)面編碼等操作，深入掌握網(wǎng)站制作流程以及一些網(wǎng)頁(yè)制作中的常用技巧。步驟一：網(wǎng)站策劃步驟二：網(wǎng)頁(yè)整體風(fēng)格設(shè)計(jì)步驟三；創(chuàng)建站點(diǎn)步驟四：相關(guān)圖片設(shè)計(jì)與繪制步驟五：制作首頁(yè)并填充內(nèi)容步驟六：添加CSS樣式步驟七：使用模板生成其他頁(yè)面 步驟八；創(chuàng)建鏈接并添加鏈接屬性步驟九：檢查站點(diǎn)思考題、課后作業(yè)思考題；如何優(yōu)化網(wǎng)頁(yè)以提高訪問(wèn)量？主要參考資料萬(wàn)維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 13 學(xué)時(shí) 第 14學(xué)時(shí)授課內(nèi)容J

10、avaScript概述JavaScript基礎(chǔ)JavaScript面向?qū)ο缶幊探虒W(xué)目的和要求了解JavaScript的作用；掌握J(rèn)avaScript的語(yǔ)法基礎(chǔ)；熟悉JavaScript中面向?qū)ο缶幊痰恼Z(yǔ)言特性與實(shí)現(xiàn)方法。重點(diǎn)難點(diǎn)JavaScript的語(yǔ)法；JavaScript的面向?qū)ο蟮恼Z(yǔ)言特性與實(shí)現(xiàn)方法。教學(xué)安排一、JavaScript概述 1. JavaScript的發(fā)展歷史。 2. JavaScript可以做什么與不能做什么。 3. JavaScript的開發(fā)工具。二、JavaScript語(yǔ)法基礎(chǔ) 1. JavaScript語(yǔ)法基礎(chǔ)：語(yǔ)句，注釋，變量，運(yùn)算符，程序流程控制。 2. Jav

11、aScript內(nèi)置對(duì)象 三、JavaScript面向?qū)ο缶幊?1. JavaScript面向?qū)ο笳Z(yǔ)言特性 2. JavaScript面向?qū)ο缶幊虒?shí)現(xiàn)思考題、課后作業(yè)課后作業(yè)：P28頁(yè) 習(xí)題2-1，2-2；P39頁(yè) 習(xí)題3-1，3-3主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 15 學(xué)時(shí) 第 16 學(xué)時(shí)授課內(nèi)容JavaScript正則表達(dá)式教學(xué)目的和要求了解正則表達(dá)式的起源與功能；掌握構(gòu)建正則表達(dá)式的技術(shù)；掌握簡(jiǎn)單模式的正則表達(dá)式中的元素；熟悉復(fù)雜模式的正則表達(dá)式。重點(diǎn)難點(diǎn)構(gòu)建正則表達(dá)式的技術(shù)教學(xué)安排一、正則表達(dá)式的簡(jiǎn)介二、構(gòu)建簡(jiǎn)單的正則表達(dá)式三、JavaScript中的正則表達(dá)式的使用（重

12、點(diǎn)） 1. 定義正則表達(dá)式 2. 使用String對(duì)象 3. RegExp和正則表達(dá)式對(duì)象四、簡(jiǎn)單模式（重點(diǎn)，難點(diǎn)） 1. 元字符 2. 特殊字符 3. 括號(hào)表達(dá)式 4. 預(yù)定義類 5. 限定符 6. 貪婪模式與非貪婪模式五、復(fù)雜模式 1. 選擇和分組 2. 非捕獲性分組 3. 前瞻 4. 定位符思考題、課后作業(yè)JavaScript中的正則表達(dá)式的使用主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 17 學(xué)時(shí) 第 18 學(xué)時(shí)授課內(nèi)容JavaScript字符串處理教學(xué)目的和要求了解JavaScript中的字符串處理函數(shù)；掌握字符串處理方法。重點(diǎn)難點(diǎn)字符串處理函數(shù)；掌握常見的字符串處理技術(shù)。教學(xué)安

13、排一、JavaScript字符串處理函數(shù)（重點(diǎn)） 1. 訪問(wèn)字符串函數(shù)：length屬性，fromCharCode()，toString()，valueOf()，charAt()，charCodeAt()。 2. 查找字符串函數(shù)：indexOf()，lastIndexOf()。 3. 比較字符串函數(shù)：localeCompare()。 4. 修改字符串函數(shù)：concat()，slice()，substring()，toLowerCase()，toLocaleLowerCase()，toUpperCase()，toLocaleUpperCase()。 5. 正則表達(dá)式匹配與替換：match()，r

14、eplace()，search()，split()。二、字符串處理應(yīng)用示例 1. 計(jì)算字符串長(zhǎng)度 2. 字符串驗(yàn)證 3. 字符串填充 4. 字符串連接 5. 首字母大寫 6. 屏蔽非法用詞 7. 刪除HTML標(biāo)簽思考題、課后作業(yè)JavaScript字符串處理函數(shù)練習(xí)主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 19 學(xué)時(shí) 第 20 學(xué)時(shí)授課內(nèi)容JavaScript瀏覽器對(duì)象模型教學(xué)目的和要求了解瀏覽器對(duì)象；掌握J(rèn)avaScript中控制瀏覽器對(duì)象的常用技術(shù)。重點(diǎn)難點(diǎn)JavaScript中控制瀏覽器對(duì)象的常用技術(shù)。教學(xué)安排一、瀏覽器對(duì)象（重點(diǎn)） 1. window對(duì)象：調(diào)整窗口大小，打開新窗口

15、，系統(tǒng)對(duì)話框，狀態(tài)欄控制，定時(shí)操作。（重點(diǎn)） 2. document對(duì)象 3. location對(duì)象（難點(diǎn)） 4. navigator對(duì)象 5. screen對(duì)象 6. history對(duì)象二、JavaScript瀏覽器編程示例 1. 控制瀏覽器窗口 2. 延時(shí)生效按鈕 3. 頁(yè)面間參數(shù)傳遞 4. 檢測(cè)瀏覽器及操作系統(tǒng)類型思考題、課后作業(yè)瀏覽器對(duì)象模型練習(xí)主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 21 學(xué)時(shí) 第 24 學(xué)時(shí)授課內(nèi)容JavaScript DOM基礎(chǔ)教學(xué)目的和要求了解DOM標(biāo)準(zhǔn)；熟悉DOM的使用方法；掌握常見的DOM處理技術(shù)。重點(diǎn)難點(diǎn)DOM的使用方法。教學(xué)安排一、DOM標(biāo)準(zhǔn) 1

16、. DOM簡(jiǎn)介 2. DOM標(biāo)準(zhǔn)接口及使用方法二、使用DOM（重點(diǎn)、難點(diǎn)） 1. 訪問(wèn)指定節(jié)點(diǎn) 2. 訪問(wèn)元素屬性 3. 訪問(wèn)相關(guān)節(jié)點(diǎn) 4. 檢查節(jié)點(diǎn)類型 5. 創(chuàng)建節(jié)點(diǎn) 6. 操作節(jié)點(diǎn)三、DOM應(yīng)用示例 1. 文本框自動(dòng)獲得焦點(diǎn) 2. 表單輸入驗(yàn)證 3. 雙向選擇列表框 4. 關(guān)鍵詞鏈接 5. 可排序表格思考題、課后作業(yè)練習(xí)DOM的使用方法主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 25 學(xué)時(shí) 第 26 學(xué)時(shí)授課內(nèi)容JavaScript 事件處理模型教學(xué)目的和要求了解事件流；熟悉事件處理函數(shù)和對(duì)象；掌握常見的事件處理技術(shù)。重點(diǎn)難點(diǎn)事件流；常見的事件處理技術(shù)。教學(xué)安排一、事件流 1. DO

17、M事件流模型：捕獲，目標(biāo)，冒泡 2. IE事件流模型二、事件處理函數(shù) 1. DOM事件處理函數(shù) 2. IE事件處理函數(shù)三、事件對(duì)象 DOM標(biāo)準(zhǔn)和IE都提供了事件對(duì)象，其中包含的事件信息有：引發(fā)事件的對(duì)象，事件發(fā)生時(shí)鼠標(biāo)的信息，事件發(fā)生時(shí)鍵盤的信息。 1. DOM事件對(duì)象：Event接口、UIeven、MouseEvent。 2. IE事件對(duì)象：windows. event四、事件處理應(yīng)用示例 1. 商品評(píng)級(jí)功能 2. 網(wǎng)絡(luò)相冊(cè) 3. 模擬拖放效果思考題、課后作業(yè)思考：從事件流模型的角度比較DOM和IE在事件處理方面的區(qū)別，并以實(shí)例驗(yàn)證。主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 27 學(xué)時(shí)

18、 第 30 學(xué)時(shí)授課內(nèi)容JavaScript控制頁(yè)面樣式教學(xué)目的和要求掌握J(rèn)avaScript中的樣式編程技術(shù)。重點(diǎn)難點(diǎn)JavaScript中的樣式編程技術(shù)。教學(xué)安排一、JavaScript樣式編程基礎(chǔ)（重點(diǎn)） 1. 訪問(wèn)樣式：內(nèi)聯(lián)樣式，最終樣式 2. 訪問(wèn)樣式表：修改CSS規(guī)則；切換樣式表。二、JavaScript樣式編程示例（難點(diǎn)） 1.網(wǎng)頁(yè)換膚 通用的樣式表切換功能。 使用cookie保存用戶選擇的樣式表。 解決IE中可能出現(xiàn)的樣式切換不渲染問(wèn)題。 2. 圖片倒影特效 3. 圓角邊框思考題、課后作業(yè)練習(xí)JavaScript中的樣式編程技術(shù)主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時(shí)第 31 學(xué)時(shí) 第 32 學(xué)時(shí)授課內(nèi)容JavaScript與服務(wù)器通信JavaScript與插件教學(xué)目的和要求了解傳統(tǒng)的無(wú)刷新頁(yè)面實(shí)現(xiàn)技術(shù)；了解Ajax