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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁設(shè)計(jì)基礎(chǔ)教案《網(wǎng)頁設(shè)計(jì)基礎(chǔ)》教案網(wǎng)頁設(shè)計(jì)基礎(chǔ)教案全文共15頁，當(dāng)前為第1頁。

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

溫馨提示

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

評論

0/150

提交評論