網(wǎng)頁設(shè)計基礎(chǔ)教案.docx

網(wǎng)頁設(shè)計基礎(chǔ)教案教案學(xué)院(部)： 系（教研室）： 軟件工程系 授課教師： 職 稱： 課程名稱網(wǎng)頁設(shè)計基礎(chǔ)總學(xué)分： 2.0 學(xué)分總學(xué)時：32學(xué)時 其中： 講課 24 學(xué)時 實踐 8 學(xué)時課程類別必修課（ ） 選修課( )公共課（ ） 學(xué)科課（ ） 專業(yè)課（ ） 實踐課（ ） 全校任選課（ ）授課對象軟件工程考核方式考查課程?？傇u成績=平時總成績（40%）+期末考試成績60%教學(xué)基本目的和要求 本課程將介紹WEB開發(fā)的基礎(chǔ)技術(shù)，著重介紹HTML/XHTML標(biāo)記語言、CSS層疊樣式表和JAVASCRIPT腳本語言等相關(guān)內(nèi)容。通過本課程的學(xué)習(xí)，掌握開發(fā)靜態(tài)網(wǎng)頁的基本技術(shù)以及網(wǎng)站規(guī)劃、制作及管理維護(hù)等基本技能，了解WEB開發(fā)的高級技術(shù)，能夠獨(dú)立開發(fā)靜態(tài)網(wǎng)頁組成的網(wǎng)站，基本掌握J(rèn)AVASCRIPT腳本語言及常見網(wǎng)頁動態(tài)效果的編寫方法。 本課程力求通過理論和實踐教學(xué)，使學(xué)生較好地掌握WEB程序設(shè)計技術(shù)和基本方法，對WEB開發(fā)有一個全面的認(rèn)識和了解，并能夠獨(dú)立自主開發(fā)靜態(tài)網(wǎng)頁組成的網(wǎng)絡(luò)應(yīng)用程序。教學(xué)重點和難點教學(xué)重點：HTML標(biāo)記語法及常用標(biāo)記，CSS使用方法及常用屬性，網(wǎng)頁設(shè)計與制作過程，網(wǎng)站管理與發(fā)布，JavaScript基本語法，瀏覽器對象模型BOM，DOM，事件處理模型，正則表達(dá)式。教學(xué)難點：CSS使用方法與選擇器，網(wǎng)站管理與發(fā)布，瀏覽器對象模型BOM，DOM，事件處理模型，正則表達(dá)式教材、參考書教材:1.Web前端設(shè)計與開發(fā)-HTML+CSS+HTML5+jQuery，QST青軟實訓(xùn)，清華大學(xué)出版社，20162.Web前端開發(fā)實例教程-HTML.CSS. ，占東明，人民郵電出版社，2016其他教學(xué)資源：萬維網(wǎng)聯(lián)盟發(fā)布的相關(guān)標(biāo)準(zhǔn).（）教案 總學(xué)時第 1 學(xué)時 第 2 學(xué)時授課內(nèi)容網(wǎng)頁制作基礎(chǔ)教學(xué)目的和要求了解網(wǎng)頁制作基本步驟，掌握網(wǎng)頁的構(gòu)成等基本知識，了解HTML和CSS的標(biāo)準(zhǔn)化過程，熟悉網(wǎng)頁制作開發(fā)環(huán)境。重點難點網(wǎng)頁制作基本步驟，網(wǎng)頁相關(guān)的基本知識，HTML和CSS的標(biāo)準(zhǔn)化過程教學(xué)安排一、網(wǎng)頁相關(guān)的基本知識 1. 網(wǎng)頁的元素：文本、圖像、鏈接、聲音、電影或動態(tài)圖像。 2. 網(wǎng)頁的表現(xiàn)形式：瀏覽器。常見瀏覽器介紹：Internet Explorer；NetScape Navigator 網(wǎng)景瀏覽器；火狐(Firefox)瀏覽器；Opera瀏覽器；其它IE核心瀏覽器。 3. 網(wǎng)頁的地址（網(wǎng)址）：URL超文本傳輸協(xié)議統(tǒng)一資源定位符將從因特網(wǎng)獲取信息的四個基本元素包括在一個簡單的地址中：傳送協(xié)議； 服務(wù)器； 端口號； 路徑。 4. 網(wǎng)站：網(wǎng)頁的集合。衡量一個網(wǎng)站的性能通常從網(wǎng)站空間大小、網(wǎng)站位置、網(wǎng)站連接速度、網(wǎng)站服務(wù)內(nèi)容等幾方面考慮。 5. 網(wǎng)站的地址：域名/IP地址。二、網(wǎng)頁制作的基本步驟 收集和整理資料；制作網(wǎng)頁；測試站點；發(fā)布站點；站點維護(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ǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析學(xué)生對本課程的熟悉程度差距較大，日后的教學(xué)安排應(yīng)更具有針對性。備注教案 總學(xué)時第 3 學(xué)時 第 4 學(xué)時授課內(nèi)容網(wǎng)頁中的文字CSS網(wǎng)頁樣式設(shè)置教學(xué)目的和要求掌握HTML中的文字標(biāo)記；掌握CSS的三種使用方法；熟悉常用的CSS屬性。重點難點HTML中的文字標(biāo)記；CSS的使用方法；CSS選擇器教學(xué)安排一、HTML文本標(biāo)記 段落標(biāo)記： 標(biāo)題標(biāo)記：- 換行標(biāo)記： 列表標(biāo)記：（有序）,（無序）,（列表項）二、CSS的使用方法； 1. 行內(nèi)樣式 缺點：容易增加網(wǎng)頁體積，不推薦使用。優(yōu)點：使用簡單。 2. 嵌入式樣式：嵌入在與之間 3. 鏈接式：放置在與之間 4. 導(dǎo)入式：放置在與之間 import url(sheet1.css);三、CSS選擇器 集體聲明；嵌套選擇器；思考題、課后作業(yè)在文檔中使用CSS。主要參考資料萬維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析應(yīng)提供CSS中的屬性的中英文對照表方便學(xué)生學(xué)習(xí)。備注教案 總學(xué)時第 5 學(xué)時 第 6 學(xué)時授課內(nèi)容網(wǎng)頁中的圖片建立超鏈接教學(xué)目的和要求掌握HTML中的圖片標(biāo)記和超鏈接標(biāo)記。重點難點HTML中的圖片標(biāo)記和超鏈接標(biāo)記。教學(xué)安排一、HTML圖片標(biāo)記 1. 網(wǎng)頁中的圖片格式 2. 插入圖片： 3. 屬性的使用： src必不可少；alt替換文本。二、HTML超鏈接標(biāo)記 超鏈接標(biāo)記：錨 1. 文字超鏈接 2. 圖片超鏈接：圖片超鏈接會自動為圖片添加邊框。 3. 鏈接目標(biāo)：target 4. 特點目標(biāo)的鏈接：#三、與超鏈接有關(guān)的CSS屬性 a:link: 鏈接樣式 a:hover: 鼠標(biāo)指向鏈接時的樣式 a:active: 激活鏈接的樣式 a:visited: 訪問過鏈接的樣式思考題、課后作業(yè)使用圖片標(biāo)記插入圖片； 建立文本超鏈接。主要參考資料萬維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析備注教案 總學(xué)時第 7 學(xué)時 第 8 學(xué)時授課內(nèi)容表格教學(xué)目的和要求掌握HTML中的表格標(biāo)記的多種使用方法。重點難點復(fù)雜表格的創(chuàng)建方法，表格布局方法。教學(xué)安排一、使用HTML建立表格 表格標(biāo)題 二、使用CSS建立多種表格樣式 重點：表格邊框的多種樣式 難點：表格外框與單元格邊框之間的關(guān)系三、布局單元格和表格 使用屬性：width, height, rowspan, colspan思考題、課后作業(yè)使用表格布局網(wǎng)頁。主要參考資料萬維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析備注教案 總學(xué)時第 9 學(xué)時 第 12 學(xué)時授課內(nèi)容網(wǎng)站制作綜合實例教學(xué)目的和要求掌握網(wǎng)站制作的完整過程。重點難點網(wǎng)站制作的完整過程。教學(xué)安排 通過為一個虛擬公司創(chuàng)建完整網(wǎng)站，從網(wǎng)站構(gòu)思到設(shè)計，再到頁面編碼等操作，深入掌握網(wǎng)站制作流程以及一些網(wǎng)頁制作中的常用技巧。步驟一：網(wǎng)站策劃步驟二：網(wǎng)頁整體風(fēng)格設(shè)計步驟三；創(chuàng)建站點步驟四：相關(guān)圖片設(shè)計與繪制步驟五：制作首頁并填充內(nèi)容步驟六：添加CSS樣式步驟七：使用模板生成其他頁面 步驟八；創(chuàng)建鏈接并添加鏈接屬性步驟九：檢查站點思考題、課后作業(yè)思考題；如何優(yōu)化網(wǎng)頁以提高訪問量？主要參考資料萬維網(wǎng)聯(lián)盟網(wǎng)站：課后自我總結(jié)分析備注教案 總學(xué)時第 13 學(xué)時 第 14學(xué)時授課內(nèi)容JavaScript概述JavaScript基礎(chǔ)JavaScript面向?qū)ο缶幊探虒W(xué)目的和要求了解JavaScript的作用；掌握J(rèn)avaScript的語法基礎(chǔ)；熟悉JavaScript中面向?qū)ο缶幊痰恼Z言特性與實現(xiàn)方法。重點難點JavaScript的語法；JavaScript的面向?qū)ο蟮恼Z言特性與實現(xiàn)方法。教學(xué)安排一、JavaScript概述 1. JavaScript的發(fā)展歷史。 2. JavaScript可以做什么與不能做什么。 3. JavaScript的開發(fā)工具。二、JavaScript語法基礎(chǔ) 1. JavaScript語法基礎(chǔ)：語句，注釋，變量，運(yùn)算符，程序流程控制。 2. JavaScript內(nèi)置對象 三、JavaScript面向?qū)ο缶幊?1. JavaScript面向?qū)ο笳Z言特性 2. JavaScript面向?qū)ο缶幊虒崿F(xiàn)思考題、課后作業(yè)課后作業(yè)：P28頁 習(xí)題2-1，2-2；P39頁 習(xí)題3-1，3-3主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時第 15 學(xué)時 第 16 學(xué)時授課內(nèi)容JavaScript正則表達(dá)式教學(xué)目的和要求了解正則表達(dá)式的起源與功能；掌握構(gòu)建正則表達(dá)式的技術(shù)；掌握簡單模式的正則表達(dá)式中的元素；熟悉復(fù)雜模式的正則表達(dá)式。重點難點構(gòu)建正則表達(dá)式的技術(shù)教學(xué)安排一、正則表達(dá)式的簡介二、構(gòu)建簡單的正則表達(dá)式三、JavaScript中的正則表達(dá)式的使用（重點） 1. 定義正則表達(dá)式 2. 使用String對象 3. RegExp和正則表達(dá)式對象四、簡單模式（重點，難點） 1. 元字符 2. 特殊字符 3. 括號表達(dá)式 4. 預(yù)定義類 5. 限定符 6. 貪婪模式與非貪婪模式五、復(fù)雜模式 1. 選擇和分組 2. 非捕獲性分組 3. 前瞻 4. 定位符思考題、課后作業(yè)JavaScript中的正則表達(dá)式的使用主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時第 17 學(xué)時 第 18 學(xué)時授課內(nèi)容JavaScript字符串處理教學(xué)目的和要求了解JavaScript中的字符串處理函數(shù)；掌握字符串處理方法。重點難點字符串處理函數(shù)；掌握常見的字符串處理技術(shù)。教學(xué)安排一、JavaScript字符串處理函數(shù)（重點） 1. 訪問字符串函數(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()，replace()，search()，split()。二、字符串處理應(yīng)用示例 1. 計算字符串長度 2. 字符串驗證 3. 字符串填充 4. 字符串連接 5. 首字母大寫 6. 屏蔽非法用詞 7. 刪除HTML標(biāo)簽思考題、課后作業(yè)JavaScript字符串處理函數(shù)練習(xí)主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時第 19 學(xué)時 第 20 學(xué)時授課內(nèi)容JavaScript瀏覽器對象模型教學(xué)目的和要求了解瀏覽器對象；掌握J(rèn)avaScript中控制瀏覽器對象的常用技術(shù)。重點難點JavaScript中控制瀏覽器對象的常用技術(shù)。教學(xué)安排一、瀏覽器對象（重點） 1. window對象：調(diào)整窗口大小，打開新窗口，系統(tǒng)對話框，狀態(tài)欄控制，定時操作。（重點） 2. document對象 3. location對象（難點） 4. navigator對象 5. screen對象 6. history對象二、JavaScript瀏覽器編程示例 1. 控制瀏覽器窗口 2. 延時生效按鈕 3. 頁面間參數(shù)傳遞 4. 檢測瀏覽器及操作系統(tǒng)類型思考題、課后作業(yè)瀏覽器對象模型練習(xí)主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時第 21 學(xué)時 第 24 學(xué)時授課內(nèi)容JavaScript DOM基礎(chǔ)教學(xué)目的和要求了解DOM標(biāo)準(zhǔn)；熟悉DOM的使用方法；掌握常見的DOM處理技術(shù)。重點難點DOM的使用方法。教學(xué)安排一、DOM標(biāo)準(zhǔn) 1. DOM簡介 2. DOM標(biāo)準(zhǔn)接口及使用方法二、使用DOM（重點、難點） 1. 訪問指定節(jié)點 2. 訪問元素屬性 3. 訪問相關(guān)節(jié)點 4. 檢查節(jié)點類型 5. 創(chuàng)建節(jié)點 6. 操作節(jié)點三、DOM應(yīng)用示例 1. 文本框自動獲得焦點 2. 表單輸入驗證 3. 雙向選擇列表框 4. 關(guān)鍵詞鏈接 5. 可排序表格思考題、課后作業(yè)練習(xí)DOM的使用方法主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時第 25 學(xué)時 第 26 學(xué)時授課內(nèi)容JavaScript 事件處理模型教學(xué)目的和要求了解事件流；熟悉事件處理函數(shù)和對象；掌握常見的事件處理技術(shù)。重點難點事件流；常見的事件處理技術(shù)。教學(xué)安排一、事件流 1. DOM事件流模型：捕獲，目標(biāo)，冒泡 2. IE事件流模型二、事件處理函數(shù) 1. DOM事件處理函數(shù) 2. IE事件處理函數(shù)三、事件對象 DOM標(biāo)準(zhǔn)和IE都提供了事件對象，其中包含的事件信息有：引發(fā)事件的對象，事件發(fā)生時鼠標(biāo)的信息，事件發(fā)生時鍵盤的信息。 1. DOM事件對象：Event接口、UIeven、MouseEvent。 2. IE事件對象：windows. event四、事件處理應(yīng)用示例 1. 商品評級功能 2. 網(wǎng)絡(luò)相冊 3. 模擬拖放效果思考題、課后作業(yè)思考：從事件流模型的角度比較DOM和IE在事件處理方面的區(qū)別，并以實例驗證。主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時第 27 學(xué)時 第 30 學(xué)時授課內(nèi)容JavaScript控制頁面樣式教學(xué)目的和要求掌握J(rèn)avaScript中的樣式編程技術(shù)。重點難點JavaScript中的樣式編程技術(shù)。教學(xué)安排一、JavaScript樣式編程基礎(chǔ)（重點） 1. 訪問樣式：內(nèi)聯(lián)樣式，最終樣式 2. 訪問樣式表：修改CSS規(guī)則；切換樣式表。二、JavaScript樣式編程示例（難點） 1.網(wǎng)頁換膚 通用的樣式表切換功能。 使用cookie保存用戶選擇的樣式表。 解決IE中可能出現(xiàn)的樣式切換不渲染問題。 2. 圖片倒影特效 3. 圓角邊框思考題、課后作業(yè)練習(xí)JavaScript中的樣式編程技術(shù)主要參考資料課后自我總結(jié)分析備注教案 總學(xué)時第 31 學(xué)時 第 32 學(xué)時授課內(nèi)容JavaScript與服務(wù)器通信JavaScript與插件教學(xué)目的和要求了解傳統(tǒng)的無刷新頁面實現(xiàn)技術(shù)；了解Ajax