網(wǎng)頁設(shè)計與制作教案.doc

_章節(jié)名稱：網(wǎng)頁設(shè)計入門基礎(chǔ)課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求1. 了解網(wǎng)絡(luò)的基本知識，網(wǎng)頁設(shè)計的基礎(chǔ)知識，網(wǎng)頁的分類，動態(tài)網(wǎng)頁的原理及技術(shù)2. 了解網(wǎng)頁的基本構(gòu)成及最簡單的html代碼3. 了解網(wǎng)頁設(shè)計的流程重 點了解網(wǎng)頁設(shè)計的流程，掌握最基本的網(wǎng)頁的構(gòu)成及最簡單的網(wǎng)頁html代碼難 點掌握最基本的網(wǎng)頁的構(gòu)成及最簡單的網(wǎng)頁html代碼教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社教學過程環(huán)節(jié)一：結(jié)合PPT課件的內(nèi)容，講解網(wǎng)絡(luò)和網(wǎng)頁的基本知識。了解網(wǎng)頁的分類，網(wǎng)頁運行的原理，介紹網(wǎng)頁設(shè)計的工具，動態(tài)網(wǎng)頁的技術(shù)。環(huán)節(jié)二：介紹網(wǎng)頁的構(gòu)成，并對一個網(wǎng)站進行實例分析說明。編寫最簡單的html代碼。 環(huán)節(jié)三：了解網(wǎng)頁設(shè)計的流程 主要有以下幾個步驟：一. 網(wǎng)站規(guī)劃二. 素材資源收集三. 選擇開發(fā)工具四. 站點建立與規(guī)劃五. 分模塊進行網(wǎng)頁設(shè)計六. 網(wǎng)頁源代碼測試與特效添加七. 申請域名與空間八. 網(wǎng)頁源代碼上傳九. 定期的維護環(huán)節(jié)四： 對本節(jié)課的內(nèi)容進行復習，讓學生練習html的代碼。并進行疑難解答 章節(jié)名稱：html基礎(chǔ)與應(yīng)用1課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求了解html語言的基礎(chǔ)知識，結(jié)構(gòu)，掌握html語言設(shè)置網(wǎng)頁的背景音樂，背景圖片，字體的方法。重 點Html語言設(shè)置網(wǎng)頁的背景音樂，圖片，字體難 點Html語言設(shè)置網(wǎng)頁的方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習網(wǎng)頁設(shè)計的基礎(chǔ)知識，介紹如何利用Dreamweaver開發(fā)工具，記事本編輯網(wǎng)頁的源程序，介紹網(wǎng)頁站點的創(chuàng)建及注意事項。環(huán)節(jié)二：講解html語言的結(jié)構(gòu)，特點，設(shè)置網(wǎng)頁頁面的背景音樂，圖片，字體1. 設(shè)置背景顏色 2. 背景圖片3. 背景音樂 背景音樂和上邊介紹的兩個有很大的不同，它的代碼是放在頁面的頭部 里， 4. 標題字體 文字 # =1，2，3，4，5，6 比如：今天是星期三，今天天氣晴，溫度15-235.字體的大小，用于一般文字。 文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例子：今天天氣真好！6. 字體顏色 指定顏色 文字 # =#rrggbb 16 進制數(shù)碼，或者是下列預定義色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua7. 客戶端字體(Font Face) . #=客戶端可獲得的字體，什么是客戶端，通俗的講，就是你的電腦，face=#就是從你的電腦獲得的字體環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：html基礎(chǔ)與應(yīng)用2課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求了解html語言的跑馬燈效果標簽的運用，序列卷標標簽的運用重 點Html語言的跑馬燈效果標簽及序列卷標的應(yīng)用難 點Html語言的跑馬燈效果標簽及序列卷標的應(yīng)用教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習HTML語言中設(shè)置背景顏色，背景圖片，音樂等標簽的知識，介紹HTML語言的編寫規(guī)范要求。環(huán)節(jié)二：講解html語言的跑馬燈效果標記，序列卷標標記的使用1.跑馬燈效果該標記能實現(xiàn)文字或圖片的滾動效果。滾動文字 主要參數(shù)： direction: 控制移動方向,可取left, right, up, down四個值 behavior: 移動方式,可取scroll(循環(huán)移動), slide(只走一圈)，alternate(來回移動) loop: 循環(huán)次數(shù),不輸入表示無限次循環(huán) scrollamount: 移動快慢,數(shù)值越大越快 scrolldelay: 每移動一步之后的延時,單位是毫秒 height,width: 移動區(qū)域的高和寬,單位像素 bgcolor: 移動區(qū)域的背景色2.序列卷標該類型標記類似于Word軟件中的項目符號及編號，主要分為兩種（1）無序標記無序序列就是序列各條目間無順序關(guān)系姓名：吳小娟生日：1993/6/16星座：雙子座運行的效果如下：l 姓名：吳小娟l 生日：1993/6/16l 星座：雙子座其中為無序序列標記，每增加一個條目，就要添加一個還可以通過設(shè)置來改變條目前面的圖標，屬性可以是Disk（實心圓）,Square（方形）,Circle（空心圓）（2）有序標記無序序列就是序列各條目間有順序關(guān)系姓名：吳弘凱生日：1993/6/16星座：雙子座運行的效果如下：1. 姓名：吳小娟2. 生日：1993/6/163. 星座：雙子座其中為無序序列標記，每增加一個條目，就要添加一個還可以通過設(shè)置來改變條目前面的編號，屬性可以設(shè)置為1（數(shù)字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：html基礎(chǔ)及應(yīng)用3課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求了解Html語言的控制表格及其表項，框架重 點Html語言的表格及其表項的標記使用，超鏈接標記，框架標記的使用難 點掌握利用框架標記來設(shè)計頁面教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習HTML語言中跑馬燈效果標記，序列卷標的使用方法。環(huán)節(jié)二：講解html語言的表格標記，超鏈接標記，框架標記的使用1. 表格標記. - 定義表格 .- 定義表行 .- 定義表頭 .- 定義表元2.超鏈接標記超鏈接采用標記來實現(xiàn)，鏈接文件的路徑有以下兩種：絕對路徑方式相對路徑方式3.框架結(jié)構(gòu)標記框窗實作 在中，COLS表示左右分，ROWS表示上下分。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：運用表格設(shè)計頁面布局課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求了解網(wǎng)頁中表格布局模式設(shè)計的方法重 點了解網(wǎng)頁中表格布局模式設(shè)計的方法難 點了解網(wǎng)頁中表格布局模式設(shè)計的方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習HTML語言中表格標記，超鏈接，框架的相關(guān)知識，講解上次課布置的作業(yè)。環(huán)節(jié)二：以一個藍色空間網(wǎng)頁的設(shè)計為例，講解采用表格布局模式設(shè)計網(wǎng)頁的方法。設(shè)計規(guī)范要求：多采用表格嵌套方式設(shè)計頁面，少采用表格拆分的設(shè)計方法環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：運用框架結(jié)構(gòu)設(shè)計頁面布局課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求了解網(wǎng)頁中框架布局模式設(shè)計的方法重 點掌握網(wǎng)頁中框架布局模式設(shè)計的方法難 點掌握網(wǎng)頁中框架布局模式設(shè)計的方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習采用表格工具設(shè)計網(wǎng)頁的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：介紹框架結(jié)構(gòu)在網(wǎng)頁設(shè)計中的應(yīng)用，以一個詩人作品簡介網(wǎng)頁的設(shè)計為例，講解采用框架布局模式設(shè)計網(wǎng)頁的方法。設(shè)計技巧：框架中每個頁面要單獨保存命名，需要在超鏈接屬性中設(shè)置顯示在主框架：target:blank。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：網(wǎng)頁CSS樣式基礎(chǔ) 課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握CSS樣式的建立及使用的方法重 點掌握CSS樣式的創(chuàng)建及使用的方法難 點掌握CSS樣式的創(chuàng)建及使用的方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習采用表格布局模式設(shè)計網(wǎng)頁的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：講解CSS樣式表的基礎(chǔ)知識，通過實例說明其應(yīng)用的方法。1. CSS基礎(chǔ)知識CSS是用于控制網(wǎng)頁樣式的一種標記語言，它以HTML為基礎(chǔ)，擴展了HTML的功能，提供了豐富的格式化功能，使網(wǎng)頁設(shè)計者能夠以更有效的方式設(shè)置網(wǎng)頁的外觀。 通過CSS，可以實現(xiàn)網(wǎng)頁的樣式信息與網(wǎng)頁內(nèi)容分離。2. CSS樣式的建立在Dreamweaver軟件中的CSS面板中新建CSS樣式3. CSS樣式的類型主要有四種：（1） 類選擇器：可用于任何標簽，名字需要自定義，以“.”開頭。例子：通過CSS樣式，設(shè)置字體大小與顏色。（2） ID選擇器：針對設(shè)置了ID屬性的HTML標記，與類選擇器類似，以“#”開頭。例子：通過CSS樣式，設(shè)置指定ID的表格邊框（3） 標簽選擇器：標簽也稱標記，CSS標簽選擇器就是針對Html標簽設(shè)置CSS樣式。例如，h2選擇器就用于聲明頁面中所有標記的樣式風格。（4） 復合內(nèi)容選擇器：同時影響兩個或多個標簽、類或 ID 的復合規(guī)則，請選擇“復合內(nèi)容（基于選擇的內(nèi)容）”選項并輸入用于復合規(guī)則的選擇器。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：網(wǎng)頁CSS樣式基礎(chǔ)菜單制作1課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握運用CSS樣式設(shè)計網(wǎng)頁菜單的方法重 點掌握運用CSS樣式設(shè)計網(wǎng)頁菜單的方法難 點掌握運用CSS樣式設(shè)計網(wǎng)頁菜單的方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習CSS樣式表的基礎(chǔ)知識，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過一個網(wǎng)頁菜單的制作實例，介紹CSS的設(shè)置技巧。1. 通過設(shè)置a標簽的css樣式實現(xiàn)菜單的基本顯示。通過設(shè)置a標簽選擇器的寬度高度來實現(xiàn)。2. 通過設(shè)置鼠標經(jīng)過的CSS樣式，來實現(xiàn)鼠標移動到某個菜單的背景顏色變化通過a:hover符合選擇器來實現(xiàn)。3. 在不同的瀏覽器下運行這個網(wǎng)頁，分析存在的問題。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：網(wǎng)頁CSS樣式基礎(chǔ)菜單制作2課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握運用UL，LI標簽及它們的CSS樣式來設(shè)計網(wǎng)頁菜單的方法重 點掌握運用UL，LI標簽及它們的CSS樣式來設(shè)計網(wǎng)頁菜單的方法難 點掌握運用UL，LI標簽及它們的CSS樣式來設(shè)計網(wǎng)頁菜單的方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習上節(jié)課介紹的網(wǎng)頁菜單的制作方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：針對采用設(shè)置a標簽CSS樣式制作菜單的方法存在的問題，介紹采用UL，Li標簽的CSS樣式設(shè)計網(wǎng)頁菜單的制作實例，介紹CSS的設(shè)置技巧。網(wǎng)頁菜單的設(shè)計步驟：1. 通過UL，LI標簽創(chuàng)建網(wǎng)頁菜單的基本內(nèi)容。首頁導讀推薦版面推薦文章人氣排名新開討論區(qū)休閑娛樂常見問題2. 通過設(shè)置UL，LI標簽選擇器的CSS樣式實現(xiàn)網(wǎng)頁菜單的基本顯示效果。#navigation litext-align:center; width:80px; height:32px;background:url(button1.jpg) repeat-x;float:left;3. 通過設(shè)置a:hover復合內(nèi)容選擇器實現(xiàn)菜單的鼠標移動變換背景效果。#navigation li a:hovercolor:#FFFFFF;background:url(button2.jpg) no-repeat;環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：網(wǎng)頁CSS樣式應(yīng)用實例課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握CSS樣式綜合運用方法重 點掌握CSS樣式綜合運用方法難 點掌握CSS樣式綜合運用方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習采用UL，LI設(shè)計網(wǎng)頁菜單的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：講解CSS樣式表的兩個應(yīng)用實例，通過實例說明其中CSS的設(shè)置技巧。1. 無邊框輸入表格案例通過為表格單元格添加css樣式，設(shè)置樣式的邊框?qū)傩詾闊o邊框來實現(xiàn)。table.formdata inputwidth:100px;padding:1px 3px 1px 3px;margin:0px;border:none;/* 輸入框不要邊框 */font-family:Arial;2. 鼠標經(jīng)過行變色效果。這個效果需要結(jié)合Javascript代碼來實現(xiàn)。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：DIV+CSS設(shè)計實例花店頁面設(shè)計上課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握DIV+CSS設(shè)計網(wǎng)頁的模式與技巧重 點掌握DIV+CSS設(shè)計網(wǎng)頁的模式與技巧難 點掌握DIV+CSS設(shè)計網(wǎng)頁的模式與技巧教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習上節(jié)課介紹的CSS樣式表的應(yīng)用案例，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過一個花店網(wǎng)頁設(shè)計案例，講解如何采用DIV+CSS的布局模式來設(shè)計網(wǎng)頁。設(shè)計步驟：1. 采用Div創(chuàng)建網(wǎng)頁的整體結(jié)構(gòu)2. 在每個模塊中再添加獨立的Div模塊，完善網(wǎng)頁內(nèi)容3. 通過對每個模塊分別設(shè)置CSS樣式表完成網(wǎng)頁顯示效果的設(shè)置。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：DIV+CSS設(shè)計實例花店頁面設(shè)計下課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握DIV+CSS設(shè)計網(wǎng)頁的模式與技巧重 點掌握DIV+CSS設(shè)計網(wǎng)頁的模式與技巧難 點掌握DIV+CSS設(shè)計網(wǎng)頁的模式與技巧教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習采用DIV+CSS模式設(shè)計網(wǎng)頁的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：讓學生完成花店網(wǎng)頁設(shè)計練習，疑難解答。章節(jié)名稱：Photoshop設(shè)計網(wǎng)頁課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握Photoshop軟件在網(wǎng)頁設(shè)計中的運用重 點掌握使用Photoshop軟件設(shè)計網(wǎng)頁的方法難 點利用切片工具對網(wǎng)頁進行分割教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習采用表格布局模式設(shè)計網(wǎng)頁的方法。環(huán)節(jié)二：介紹Photoshop軟件在網(wǎng)頁設(shè)計中的應(yīng)用，通過一個產(chǎn)品介紹網(wǎng)頁的實例說明設(shè)計的方法。Photoshop設(shè)計網(wǎng)頁的方法：1. 通過布局，色彩搭配，將草圖設(shè)計的網(wǎng)頁在計算機上以圖片形式繪制出來。2. 對于設(shè)計好的圖片形式的網(wǎng)頁，通過Photoshop軟件的切片功能，將圖片的網(wǎng)頁分割為各個部分模塊，再導出為web格式的文件。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：網(wǎng)頁設(shè)計中的動畫Flash動畫課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握網(wǎng)頁制作中Flash動畫的設(shè)計方法技巧重 點掌握網(wǎng)頁制作中Flash動畫的設(shè)計方法技巧難 點掌握網(wǎng)頁制作中Flash動畫的設(shè)計方法技巧教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習Photoshop軟件設(shè)計網(wǎng)頁的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：介紹Flash動畫在網(wǎng)頁中的應(yīng)用，以網(wǎng)站首頁光芒文字動畫的制作為例，介紹Flash動畫的設(shè)計方法。設(shè)計步驟：1. 創(chuàng)建動畫文字內(nèi)容，復制一份，并修改其顏色2. 添加遮罩所用的長方形條，設(shè)置其從第1幀到100幀移動的動畫效果。3. 設(shè)置方形條為遮罩。4. 動畫效果測試。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：網(wǎng)頁設(shè)計實用工具介紹課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握幾個常用的網(wǎng)頁設(shè)計工具的使用方法重 點掌握幾個常用的網(wǎng)頁設(shè)計工具的使用方法難 點掌握幾個常用的網(wǎng)頁設(shè)計工具的使用方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習采用Flash制作網(wǎng)頁動畫的方法。環(huán)節(jié)二：介紹幾個網(wǎng)頁制作的實用工具，通過實例說明其應(yīng)用的方法。1. Flashbannermaker軟件。能利用簡單的設(shè)置，完成一個網(wǎng)頁的Banner動畫2. Firework軟件利用該工具，可以設(shè)計網(wǎng)頁中的圖標。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：Javascript語言基礎(chǔ)1課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握JavaScript程序設(shè)計的基礎(chǔ)知識重 點能運用JavaScript語言實現(xiàn)網(wǎng)頁中的特定功能難 點能運用JavaScript語言實現(xiàn)網(wǎng)頁中的特定功能教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習網(wǎng)頁設(shè)計幾個常用工具的使用方法。環(huán)節(jié)二：講解Javascript程序設(shè)計的基礎(chǔ)知識，通過實例說明其使用的方法。1.Javascript程序的基本結(jié)構(gòu)：在網(wǎng)頁Html代碼中添加如下代碼 。2. Javascript基本語法（1） 變量命名：字母或下劃線開頭，字母數(shù)字下劃線的組合。（2） 變量定義方式：以var 變量名的方式定義。例如：var username;（3） 變量類型：整型，實型，布爾型，字符串等。（4） 運算符包括算術(shù)運算符、比較運算符，邏輯運算符等。（5） 分支結(jié)構(gòu)程序IF，IF.Else語句的使用3. 以一個判斷輸入用戶名和密碼是否為空的Javascript程序為例，介紹其使用的方法。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：Javascript語言基礎(chǔ)2課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握JavaScript語言中循環(huán)程序的編寫重 點掌握JavaScript語言中循環(huán)程序的編寫難 點掌握JavaScript語言中循環(huán)程序的編寫教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習Javascript程序的基礎(chǔ)知識，講解上次課的作業(yè)。環(huán)節(jié)二：講解Javascript程序設(shè)計的循環(huán)語句，通過實例說明其使用的方法。1. for 語句格式：for（初始表達式；條件表達式；增量表達式） 語句集；功能：實現(xiàn)條件循環(huán)，當條件成立時，執(zhí)行語句集，否則跳出循環(huán)體.2. while 語句格式： while（條件） 語句集；說明： while語句不斷的測試一個條件，如果條件始終成立，則這個循環(huán)會一致持續(xù)下去，直到條件不再成立為止。3. do while 語句格式： do 語句集； while（條件）；說明： dowhile語句首先不管while中的條件是否成立，總是先執(zhí)行一次循環(huán)。完成第一次循環(huán)后，dowhile語句才試圖判定while中的條件，如果成立，就繼續(xù)循環(huán)；如果條件不成立，就跳到循環(huán)后的第一條語句去執(zhí)行。 環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答環(huán)節(jié)四：復習本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：Javascript應(yīng)用實例跑馬燈效果與時鐘顯示效果課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握運用JavaScript語言實現(xiàn)特定功能的能力重 點掌握運用JavaScript語言實現(xiàn)特定功能的能力難 點掌握運用JavaScript語言實現(xiàn)特定功能的能力教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習JavaScript語言循環(huán)語句的知識，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過網(wǎng)頁設(shè)計中一個跑馬燈效果和一個時鐘顯示效果的例子說明如何根據(jù)需求設(shè)計JavaScript程序。1. 跑馬燈效果。功能效果：實現(xiàn)圖片的滾動顯示。2. 時鐘顯示效果。功能效果：將系統(tǒng)的時間以特定的格式顯示在一個輸入文本框中。擴展練習：考試倒計時功能的設(shè)計。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：Javascript應(yīng)用實例2在線考試網(wǎng)頁設(shè)計課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握JavaScript程序綜合設(shè)計的能力重 點掌握JavaScript程序綜合設(shè)計的能力難 點掌握JavaScript程序綜合設(shè)計的能力教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習上節(jié)課介紹的JavaScript設(shè)計案例。環(huán)節(jié)二：通過一個考試系統(tǒng)頁面的設(shè)計案例，分析JavaScript程序設(shè)計的流程與技巧，提高學生編寫JavaScript程序的熟練度。環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：Javascript應(yīng)用實例3kindeditor文本編輯器的應(yīng)用課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握基于JavaScript開發(fā)的工具的使用方法重 點掌握基于JavaScript開發(fā)的一個kindeditor文本編輯工具的使用方法難 點掌握基于JavaScript開發(fā)的一個kindeditor文本編輯工具的使用方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習上節(jié)課介紹的JavaScript設(shè)計案例。環(huán)節(jié)二：講解一個基于Javascript庫開發(fā)的在線文本編輯工具kindeditor的應(yīng)用。應(yīng)用步驟：1. 將kindeditor目錄下的目錄下的bin目錄中的LitJSON.dll拷貝到整個項目的bin目錄下。2. 點擊項目的引用，右鍵，將LitJSON.dll添加到項目的引用中。3. 參考文件夾中的demo.aspx文件，將對應(yīng)的內(nèi)容添加到需要添加文本編輯器的aspx動態(tài)頁面。4. 在頁面中的HTML代碼Body中添加一個TextBox控件，ID名稱為editor_id。5. 接下來，在頁面代碼的第一行修改以下，添加ValidateRequest=”False”6. 在A文件夾中的file_manager_json.ashx和upload_json.ashx文件中修改圖片，視頻等文件的上傳路徑。7. 要使用editor_id控件的使用就跟普通TextBox的使用方法一致環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：JQuery程序設(shè)計基礎(chǔ)課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握JQuery程序的基礎(chǔ)知識及使用方法重 點掌握JQuery程序的基礎(chǔ)知識及使用方法難 點掌握JQuery程序的基礎(chǔ)知識及使用方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社 教學過程環(huán)節(jié)一：復習上節(jié)課介紹的Kindeditor工具的使用方法。環(huán)節(jié)二：介紹JQuery庫的基礎(chǔ)知識及使用方法。1. JQuery是一個基于Javascript開發(fā)的庫，代碼簡潔，功能強大。2. JQuery下載后，將其拷貝到網(wǎng)站目錄下，在頁面的HTML代碼中添加如下引用：3. 頁面載入載入方法：添加如下代碼$(document).ready(function() );簡寫$(function();4. 引用方式，有三種：（1）標記 語法：$(“p”)（2）類 語法：$(“.myclass”)（3）ID 語法：$(“#btnDemo”)環(huán)節(jié)三：介紹一個點擊文字消失的案例說明JQuery的使用。 $(document).ready(function() $(p).click(function() $(this).hide(); ););If you click on me, I will disappear.環(huán)節(jié)四：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：JQuery應(yīng)用實例課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握JQuery程序綜合應(yīng)用的能力重 點掌握JQuery程序綜合應(yīng)用的能力難 點掌握JQuery程序綜合應(yīng)用的能力教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社教學過程環(huán)節(jié)一：復習上節(jié)課介紹的JQuery的基礎(chǔ)知識。環(huán)節(jié)二：通過一個窗口淡入淡出的案例，分析JQuery程序設(shè)計的流程與技巧。環(huán)節(jié)三：介紹JQuery UI庫的基本情況，并通過一個日期選擇器環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：表單處理課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握網(wǎng)頁設(shè)計中表單的使用方法重 點掌握網(wǎng)頁設(shè)計中幾種常用的表單控件的使用難 點掌握表單的使用技巧教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社教學過程環(huán)節(jié)一：復習上節(jié)課介紹的JQuery的應(yīng)用案例。環(huán)節(jié)二：通過一個用戶注冊的頁面設(shè)計案例，介紹表單及文本框、單選按鈕、復選框、下拉框、按鈕等控件的使用。 表單的數(shù)據(jù)提交方式：（1）post方式：通過Request.Form方式接收數(shù)據(jù) （2）get方式：通過Request.QueryString方式接收頁面?zhèn)鬟f的數(shù)據(jù)環(huán)節(jié)三：完成課堂講解的練習例題，并疑難解答章節(jié)名稱：Spry控件創(chuàng)建選項卡式網(wǎng)頁課堂類型：理論 實訓 練習 測試學時安排：2課時目的要求掌握Spry控件創(chuàng)建選項卡式網(wǎng)頁的方法重 點掌握Spry控件創(chuàng)建選項卡式網(wǎng)頁的方法難 點掌握Spry控件創(chuàng)建選項卡式網(wǎng)頁的方法教法學法1.采用教授法進行教學講解，結(jié)合疑難點師生互動交流方式進行。2. 練習采用學生自主安排，教師給與個別輔導的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學出版社教學過程環(huán)節(jié)一：復習上節(jié)課介紹的表