網(wǎng)頁設計基礎教案_第1頁
網(wǎng)頁設計基礎教案_第2頁
網(wǎng)頁設計基礎教案_第3頁
網(wǎng)頁設計基礎教案_第4頁
網(wǎng)頁設計基礎教案_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

網(wǎng)頁設計基礎教案《網(wǎng)頁設計基礎》教案網(wǎng)頁設計基礎教案全文共15頁，當前為第1頁。

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論