網頁設計基礎教案.docx

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