網(wǎng)頁(yè)設(shè)計(jì)與制作教案32502_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教案32502_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教案32502_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教案32502_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作教案32502_第5頁(yè)
已閱讀5頁(yè)，還剩34頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、網(wǎng)頁(yè)設(shè)計(jì)與制作課程教案章節(jié)名稱：網(wǎng)頁(yè)設(shè)計(jì)入門(mén)基礎(chǔ)課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求1. 了解網(wǎng)絡(luò)的基本知識(shí)，網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)，網(wǎng)頁(yè)的分類，動(dòng)態(tài)網(wǎng)頁(yè)的原理及技術(shù)2. 了解網(wǎng)頁(yè)的基本構(gòu)成及最簡(jiǎn)單的html代碼3. 了解網(wǎng)頁(yè)設(shè)計(jì)的流程重 點(diǎn)了解網(wǎng)頁(yè)設(shè)計(jì)的流程，掌握最基本的網(wǎng)頁(yè)的構(gòu)成及最簡(jiǎn)單的網(wǎng)頁(yè)html代碼難 點(diǎn)掌握最基本的網(wǎng)頁(yè)的構(gòu)成及最簡(jiǎn)單的網(wǎng)頁(yè)html代碼教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)

2、出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社教學(xué)過(guò)程環(huán)節(jié)一：結(jié)合PPT課件的內(nèi)容，講解網(wǎng)絡(luò)和網(wǎng)頁(yè)的基本知識(shí)。了解網(wǎng)頁(yè)的分類，網(wǎng)頁(yè)運(yùn)行的原理，介紹網(wǎng)頁(yè)設(shè)計(jì)的工具，動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。環(huán)節(jié)二：介紹網(wǎng)頁(yè)的構(gòu)成，并對(duì)一個(gè)網(wǎng)站進(jìn)行實(shí)例分析說(shuō)明。編寫(xiě)最簡(jiǎn)單的html代碼。 環(huán)節(jié)三：了解網(wǎng)頁(yè)設(shè)計(jì)的流程 主要有以下幾個(gè)步驟：一. 網(wǎng)站規(guī)劃二. 素材資源收集三. 選擇開(kāi)發(fā)工具四. 站點(diǎn)建立與規(guī)劃五. 分模塊進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)六. 網(wǎng)頁(yè)源代碼測(cè)試與特效添加七. 申請(qǐng)域名與空間八. 網(wǎng)頁(yè)源代碼上傳九. 定期的維護(hù)環(huán)節(jié)四： 對(duì)本節(jié)課的內(nèi)容進(jìn)行復(fù)習(xí)，讓學(xué)生練習(xí)html的代碼。并進(jìn)行疑難解答 章節(jié)名稱：ht

3、ml基礎(chǔ)與應(yīng)用1課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求了解html語(yǔ)言的基礎(chǔ)知識(shí)，結(jié)構(gòu)，掌握html語(yǔ)言設(shè)置網(wǎng)頁(yè)的背景音樂(lè)，背景圖片，字體的方法。重 點(diǎn)Html語(yǔ)言設(shè)置網(wǎng)頁(yè)的背景音樂(lè)，圖片，字體難 點(diǎn)Html語(yǔ)言設(shè)置網(wǎng)頁(yè)的方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)，介紹如何利用Dreamwe

4、aver開(kāi)發(fā)工具，記事本編輯網(wǎng)頁(yè)的源程序，介紹網(wǎng)頁(yè)站點(diǎn)的創(chuàng)建及注意事項(xiàng)。環(huán)節(jié)二：講解html語(yǔ)言的結(jié)構(gòu)，特點(diǎn)，設(shè)置網(wǎng)頁(yè)頁(yè)面的背景音樂(lè)，圖片，字體1. 設(shè)置背景顏色  <body bgcolor="red">2. 背景圖片<body backgroud"bg9.gif">3. 背景音樂(lè)  背景音樂(lè)和上邊介紹的兩個(gè)有很大的不同，它的代碼是放在頁(yè)面的頭部 <head></head>里， <bgsound src="background_sound.mid" loop=

5、"-1">4. 標(biāo)題字體<h#> 文字 </h#>  # =1，2，3，4，5，6  比如：<h1>今天是星期三，今天天氣晴，溫度15°-23°</h1>5.字體的大小，用于一般文字。  <font size=#> 文字</font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#  例子：<font size=7>今天天氣真好！</font>6. 字體顏色 指定顏色 <font color=

6、#> 文字 </font> # ="#rrggbb" 16 進(jìn)制數(shù)碼，或者是下列預(yù)定義色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua7. 客戶端字體(Font Face)  <font face="#, #, ., #"> . </font> #=客戶端可獲得的字體，什么是客戶端，通俗的講，就是你的電腦，face="#&q

7、uot;就是從你的電腦獲得的字體環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：html基礎(chǔ)與應(yīng)用2課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求了解html語(yǔ)言的跑馬燈效果標(biāo)簽的運(yùn)用，序列卷標(biāo)標(biāo)簽的運(yùn)用重 點(diǎn)Html語(yǔ)言的跑馬燈效果標(biāo)簽及序列卷標(biāo)的應(yīng)用難 點(diǎn)Html語(yǔ)言的跑馬燈效果標(biāo)簽及序列卷標(biāo)的應(yīng)用教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（

8、第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)HTML語(yǔ)言中設(shè)置背景顏色，背景圖片，音樂(lè)等標(biāo)簽的知識(shí)，介紹HTML語(yǔ)言的編寫(xiě)規(guī)范要求。環(huán)節(jié)二：講解html語(yǔ)言的跑馬燈效果標(biāo)記，序列卷標(biāo)標(biāo)記的使用1.跑馬燈效果該標(biāo)記能實(shí)現(xiàn)文字或圖片的滾動(dòng)效果。<MARQUEE direction="up" width="100" height="100" bgcolor="#ccffcc" scrollamount="2">滾動(dòng)文字</MARQUEE> 主要參數(shù)： di

9、rection: 控制移動(dòng)方向,可取"left", "right", "up", "down"四個(gè)值 behavior: 移動(dòng)方式,可取"scroll"(循環(huán)移動(dòng)), "slide"(只走一圈)，"alternate"(來(lái)回移動(dòng)) loop: 循環(huán)次數(shù),不輸入表示無(wú)限次循環(huán) scrollamount: 移動(dòng)快慢,數(shù)值越大越快 scrolldelay: 每移動(dòng)一步之后的延時(shí),單位是毫秒 height,width: 移動(dòng)區(qū)域的高和寬,單位像素 bgcolor:

10、 移動(dòng)區(qū)域的背景色2.序列卷標(biāo)該類型標(biāo)記類似于Word軟件中的項(xiàng)目符號(hào)及編號(hào)，主要分為兩種（1）無(wú)序標(biāo)記無(wú)序序列就是序列各條目間無(wú)順序關(guān)系<UL><LI>姓名：吳小娟</LI><LI>生日：1993/6/16</LI><LI>星座：雙子座</LI></UL>運(yùn)行的效果如下：l 姓名：吳小娟l 生日：1993/6/16l 星座：雙子座其中<UL>為無(wú)序序列標(biāo)記，每增加一個(gè)條目，就要添加一個(gè)<LI>還可以通過(guò)設(shè)置<UL type=”屬性”>來(lái)改變條目前面的圖標(biāo)，屬性可

11、以是Disk（實(shí)心圓）,Square（方形）,Circle（空心圓）（2）有序標(biāo)記無(wú)序序列就是序列各條目間有順序關(guān)系<OL><LI>姓名：吳弘凱<LI>生日：1993/6/16<LI>星座：雙子座</OL>運(yùn)行的效果如下：1. 姓名：吳小娟2. 生日：1993/6/163. 星座：雙子座其中<OL>為無(wú)序序列標(biāo)記，每增加一個(gè)條目，就要添加一個(gè)<LI>還可以通過(guò)設(shè)置<OL type=”屬性”>來(lái)改變條目前面的編號(hào)，屬性可以設(shè)置為1（數(shù)字）、A（大寫(xiě)英文字母）、a（小寫(xiě)英文字母）、I（大寫(xiě)羅馬字母）、i

12、（小寫(xiě)羅馬字母）等五種。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：html基礎(chǔ)及應(yīng)用3課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求了解Html語(yǔ)言的控制表格及其表項(xiàng)，框架重 點(diǎn)Html語(yǔ)言的表格及其表項(xiàng)的標(biāo)記使用，超鏈接標(biāo)記，框架標(biāo)記的使用難 點(diǎn)掌握利用框架標(biāo)記來(lái)設(shè)計(jì)頁(yè)面教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧

13、編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)HTML語(yǔ)言中跑馬燈效果標(biāo)記，序列卷標(biāo)的使用方法。環(huán)節(jié)二：講解html語(yǔ)言的表格標(biāo)記，超鏈接標(biāo)記，框架標(biāo)記的使用1. 表格標(biāo)記 <table>.</table> - 定義表格 <tr> .</tr>- 定義表行 <th> .</th>- 定義表頭 <td> .</td>- 定義表元2.超鏈接標(biāo)記超鏈接采用<a></a>標(biāo)記來(lái)實(shí)現(xiàn)，鏈接文件的路徑有以下兩種：<a href="/c|

14、/www/text1.htm">絕對(duì)路徑方式<a href="text1.htm">相對(duì)路徑方式3.框架結(jié)構(gòu)標(biāo)記<HTML><HEAD><TITLE>框窗實(shí)作</TITLE></HEAD><FRAMESET COLS="120,*" > <FRAME SRC="a.htm" NAME="1"><FRAME SRC="b.htm" NAME="2"> &l

15、t;/FRAMESET> </HTML> 在<FRAMESET>中，COLS表示左右分，ROWS表示上下分。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：運(yùn)用表格設(shè)計(jì)頁(yè)面布局課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求了解網(wǎng)頁(yè)中表格布局模式設(shè)計(jì)的方法重 點(diǎn)了解網(wǎng)頁(yè)中表格布局模式設(shè)計(jì)的方法難 點(diǎn)了解網(wǎng)頁(yè)中表格布局模式設(shè)計(jì)的方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作D

16、IV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)HTML語(yǔ)言中表格標(biāo)記，超鏈接，框架的相關(guān)知識(shí)，講解上次課布置的作業(yè)。環(huán)節(jié)二：以一個(gè)藍(lán)色空間網(wǎng)頁(yè)的設(shè)計(jì)為例，講解采用表格布局模式設(shè)計(jì)網(wǎng)頁(yè)的方法。設(shè)計(jì)規(guī)范要求：多采用表格嵌套方式設(shè)計(jì)頁(yè)面，少采用表格拆分的設(shè)計(jì)方法環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：運(yùn)用框架結(jié)構(gòu)設(shè)計(jì)頁(yè)面布局課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求了解網(wǎng)頁(yè)中框架布局模式設(shè)計(jì)的方法重 點(diǎn)掌握網(wǎng)頁(yè)中框架布局模式設(shè)計(jì)的方法難 點(diǎn)掌握網(wǎng)頁(yè)中框

17、架布局模式設(shè)計(jì)的方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)采用表格工具設(shè)計(jì)網(wǎng)頁(yè)的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：介紹框架結(jié)構(gòu)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用，以一個(gè)詩(shī)人作品簡(jiǎn)介網(wǎng)頁(yè)的設(shè)計(jì)為例，講解采用框架布局模式設(shè)計(jì)網(wǎng)頁(yè)的方法。設(shè)計(jì)技巧：框架中每個(gè)頁(yè)面要單獨(dú)保存命名，需要在超鏈接屬性中設(shè)置顯示在主框架：target:blank。環(huán)節(jié)三：

18、完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：網(wǎng)頁(yè)CSS樣式基礎(chǔ) 課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握CSS樣式的建立及使用的方法重 點(diǎn)掌握CSS樣式的創(chuàng)建及使用的方法難 點(diǎn)掌握CSS樣式的創(chuàng)建及使用的方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)采用表格布局模式設(shè)計(jì)網(wǎng)頁(yè)

19、的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：講解CSS樣式表的基礎(chǔ)知識(shí)，通過(guò)實(shí)例說(shuō)明其應(yīng)用的方法。1. CSS基礎(chǔ)知識(shí)CSS是用于控制網(wǎng)頁(yè)樣式的一種標(biāo)記語(yǔ)言，它以HTML為基礎(chǔ)，擴(kuò)展了HTML的功能，提供了豐富的格式化功能，使網(wǎng)頁(yè)設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁(yè)的外觀。 通過(guò)CSS，可以實(shí)現(xiàn)網(wǎng)頁(yè)的樣式信息與網(wǎng)頁(yè)內(nèi)容分離。2. CSS樣式的建立在Dreamweaver軟件中的CSS面板中新建CSS樣式3. CSS樣式的類型主要有四種：（1） 類選擇器：可用于任何標(biāo)簽，名字需要自定義，以“.”開(kāi)頭。例子：通過(guò)CSS樣式，設(shè)置字體大小與顏色。（2） ID選擇器：針對(duì)設(shè)置了ID屬性的HTML標(biāo)記，與類選擇器

20、類似，以“#”開(kāi)頭。例子：通過(guò)CSS樣式，設(shè)置指定ID的表格邊框（3） 標(biāo)簽選擇器：標(biāo)簽也稱標(biāo)記，CSS標(biāo)簽選擇器就是針對(duì)Html標(biāo)簽設(shè)置CSS樣式。例如，h2選擇器就用于聲明頁(yè)面中所有<h2>標(biāo)記的樣式風(fēng)格。（4） 復(fù)合內(nèi)容選擇器：同時(shí)影響兩個(gè)或多個(gè)標(biāo)簽、類或 ID 的復(fù)合規(guī)則，請(qǐng)選擇“復(fù)合內(nèi)容（基于選擇的內(nèi)容）”選項(xiàng)并輸入用于復(fù)合規(guī)則的選擇器。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：網(wǎng)頁(yè)CSS樣式基礎(chǔ)菜單制作1課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握運(yùn)用CSS樣式設(shè)計(jì)網(wǎng)頁(yè)菜單的方法重 點(diǎn)掌握運(yùn)用CSS樣式設(shè)計(jì)

21、網(wǎng)頁(yè)菜單的方法難 點(diǎn)掌握運(yùn)用CSS樣式設(shè)計(jì)網(wǎng)頁(yè)菜單的方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)CSS樣式表的基礎(chǔ)知識(shí)，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過(guò)一個(gè)網(wǎng)頁(yè)菜單的制作實(shí)例，介紹CSS的設(shè)置技巧。1. 通過(guò)設(shè)置a標(biāo)簽的css樣式實(shí)現(xiàn)菜單的基本顯示。通過(guò)設(shè)置a標(biāo)簽選擇器的寬度高度來(lái)實(shí)現(xiàn)。2. 通過(guò)設(shè)置鼠標(biāo)經(jīng)過(guò)的CSS樣式，來(lái)實(shí)

22、現(xiàn)鼠標(biāo)移動(dòng)到某個(gè)菜單的背景顏色變化通過(guò)a:hover符合選擇器來(lái)實(shí)現(xiàn)。3. 在不同的瀏覽器下運(yùn)行這個(gè)網(wǎng)頁(yè)，分析存在的問(wèn)題。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：網(wǎng)頁(yè)CSS樣式基礎(chǔ)菜單制作2課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握運(yùn)用UL，LI標(biāo)簽及它們的CSS樣式來(lái)設(shè)計(jì)網(wǎng)頁(yè)菜單的方法重 點(diǎn)掌握運(yùn)用UL，LI標(biāo)簽及它們的CSS樣式來(lái)設(shè)計(jì)網(wǎng)頁(yè)菜單的方法難 點(diǎn)掌握運(yùn)用UL，LI標(biāo)簽及它們的CSS樣式來(lái)設(shè)計(jì)網(wǎng)頁(yè)菜單的方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)

23、的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的網(wǎng)頁(yè)菜單的制作方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：針對(duì)采用設(shè)置a標(biāo)簽CSS樣式制作菜單的方法存在的問(wèn)題，介紹采用UL，Li標(biāo)簽的CSS樣式設(shè)計(jì)網(wǎng)頁(yè)菜單的制作實(shí)例，介紹CSS的設(shè)置技巧。網(wǎng)頁(yè)菜單的設(shè)計(jì)步驟：1. 通過(guò)UL，LI標(biāo)簽創(chuàng)建網(wǎng)頁(yè)菜單的基本內(nèi)容。<ul id="navigation"><li><a href="#"

24、;>首頁(yè)導(dǎo)讀</a></li><li><a href="#">推薦版面</a></li><li><a href="#">推薦文章</a></li><li><a href="#">人氣排名</a></li><li><a href="#">新開(kāi)討論區(qū)</a></li><li><a h

25、ref="#">休閑娛樂(lè)</a></li><li><a href="#">常見(jiàn)問(wèn)題</a></li></ul>2. 通過(guò)設(shè)置UL，LI標(biāo)簽選擇器的CSS樣式實(shí)現(xiàn)網(wǎng)頁(yè)菜單的基本顯示效果。#navigation litext-align:center; width:80px; height:32px;background:url(button1.jpg) repeat-x;float:left;3. 通過(guò)設(shè)置a:hover復(fù)合內(nèi)容選擇器實(shí)現(xiàn)菜單的鼠標(biāo)移動(dòng)變換背景效果。#

26、navigation li a:hovercolor:#FFFFFF;background:url(button2.jpg) no-repeat;環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：網(wǎng)頁(yè)CSS樣式應(yīng)用實(shí)例課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握CSS樣式綜合運(yùn)用方法重 點(diǎn)掌握CSS樣式綜合運(yùn)用方法難 點(diǎn)掌握CSS樣式綜合運(yùn)用方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳

27、豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)采用UL，LI設(shè)計(jì)網(wǎng)頁(yè)菜單的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：講解CSS樣式表的兩個(gè)應(yīng)用實(shí)例，通過(guò)實(shí)例說(shuō)明其中CSS的設(shè)置技巧。1. 無(wú)邊框輸入表格案例通過(guò)為表格單元格添加css樣式，設(shè)置樣式的邊框?qū)傩詾闊o(wú)邊框來(lái)實(shí)現(xiàn)。table.formdata inputwidth:100px;padding:1px 3px 1px 3px;margin:0px;border:none;/* 輸入框不要邊框 */font-family:Arial;2. 鼠標(biāo)經(jīng)過(guò)行變色效果。這個(gè)效果需要結(jié)合Ja

28、vascript代碼來(lái)實(shí)現(xiàn)。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：DIV+CSS設(shè)計(jì)實(shí)例花店頁(yè)面設(shè)計(jì)上課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)的模式與技巧重 點(diǎn)掌握DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)的模式與技巧難 點(diǎn)掌握DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)的模式與技巧教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英

29、慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的CSS樣式表的應(yīng)用案例，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過(guò)一個(gè)花店網(wǎng)頁(yè)設(shè)計(jì)案例，講解如何采用DIV+CSS的布局模式來(lái)設(shè)計(jì)網(wǎng)頁(yè)。設(shè)計(jì)步驟：1. 采用Div創(chuàng)建網(wǎng)頁(yè)的整體結(jié)構(gòu)2. 在每個(gè)模塊中再添加獨(dú)立的Div模塊，完善網(wǎng)頁(yè)內(nèi)容3. 通過(guò)對(duì)每個(gè)模塊分別設(shè)置CSS樣式表完成網(wǎng)頁(yè)顯示效果的設(shè)置。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：DIV+CSS設(shè)計(jì)實(shí)例花店頁(yè)面設(shè)計(jì)下課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)的模式與技巧重 點(diǎn)掌握DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)

30、的模式與技巧難 點(diǎn)掌握DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)的模式與技巧教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)采用DIV+CSS模式設(shè)計(jì)網(wǎng)頁(yè)的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：讓學(xué)生完成花店網(wǎng)頁(yè)設(shè)計(jì)練習(xí)，疑難解答。章節(jié)名稱：Photoshop設(shè)計(jì)網(wǎng)頁(yè)課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握Photoshop軟件在網(wǎng)頁(yè)設(shè)計(jì)

31、中的運(yùn)用重 點(diǎn)掌握使用Photoshop軟件設(shè)計(jì)網(wǎng)頁(yè)的方法難 點(diǎn)利用切片工具對(duì)網(wǎng)頁(yè)進(jìn)行分割教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)采用表格布局模式設(shè)計(jì)網(wǎng)頁(yè)的方法。環(huán)節(jié)二：介紹Photoshop軟件在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用，通過(guò)一個(gè)產(chǎn)品介紹網(wǎng)頁(yè)的實(shí)例說(shuō)明設(shè)計(jì)的方法。Photoshop設(shè)計(jì)網(wǎng)頁(yè)的方法：1. 通過(guò)布局，色彩搭配，將草圖設(shè)計(jì)的

32、網(wǎng)頁(yè)在計(jì)算機(jī)上以圖片形式繪制出來(lái)。2. 對(duì)于設(shè)計(jì)好的圖片形式的網(wǎng)頁(yè)，通過(guò)Photoshop軟件的切片功能，將圖片的網(wǎng)頁(yè)分割為各個(gè)部分模塊，再導(dǎo)出為web格式的文件。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答章節(jié)名稱：網(wǎng)頁(yè)設(shè)計(jì)中的動(dòng)畫(huà)Flash動(dòng)畫(huà)課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握網(wǎng)頁(yè)制作中Flash動(dòng)畫(huà)的設(shè)計(jì)方法技巧重 點(diǎn)掌握網(wǎng)頁(yè)制作中Flash動(dòng)畫(huà)的設(shè)計(jì)方法技巧難 點(diǎn)掌握網(wǎng)頁(yè)制作中Flash動(dòng)畫(huà)的設(shè)計(jì)方法技巧教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS

33、5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)Photoshop軟件設(shè)計(jì)網(wǎng)頁(yè)的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：介紹Flash動(dòng)畫(huà)在網(wǎng)頁(yè)中的應(yīng)用，以網(wǎng)站首頁(yè)光芒文字動(dòng)畫(huà)的制作為例，介紹Flash動(dòng)畫(huà)的設(shè)計(jì)方法。設(shè)計(jì)步驟：1. 創(chuàng)建動(dòng)畫(huà)文字內(nèi)容，復(fù)制一份，并修改其顏色2. 添加遮罩所用的長(zhǎng)方形條，設(shè)置其從第1幀到100幀移動(dòng)的動(dòng)畫(huà)效果。3. 設(shè)置方形條為遮罩。4. 動(dòng)畫(huà)效果測(cè)試。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答章節(jié)名稱：網(wǎng)頁(yè)設(shè)計(jì)實(shí)用工具介紹課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：

34、2課時(shí)目的要求掌握幾個(gè)常用的網(wǎng)頁(yè)設(shè)計(jì)工具的使用方法重 點(diǎn)掌握幾個(gè)常用的網(wǎng)頁(yè)設(shè)計(jì)工具的使用方法難 點(diǎn)掌握幾個(gè)常用的網(wǎng)頁(yè)設(shè)計(jì)工具的使用方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)采用Flash制作網(wǎng)頁(yè)動(dòng)畫(huà)的方法。環(huán)節(jié)二：介紹幾個(gè)網(wǎng)頁(yè)制作的實(shí)用工具，通過(guò)實(shí)例說(shuō)明其應(yīng)用的方法。1. Flashbannermaker軟件。能利用簡(jiǎn)單的設(shè)置

35、，完成一個(gè)網(wǎng)頁(yè)的Banner動(dòng)畫(huà)2. Firework軟件利用該工具，可以設(shè)計(jì)網(wǎng)頁(yè)中的圖標(biāo)。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答章節(jié)名稱：Javascript語(yǔ)言基礎(chǔ)1課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握J(rèn)avaScript程序設(shè)計(jì)的基礎(chǔ)知識(shí)重 點(diǎn)能運(yùn)用JavaScript語(yǔ)言實(shí)現(xiàn)網(wǎng)頁(yè)中的特定功能難 點(diǎn)能運(yùn)用JavaScript語(yǔ)言實(shí)現(xiàn)網(wǎng)頁(yè)中的特定功能教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華

36、大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)網(wǎng)頁(yè)設(shè)計(jì)幾個(gè)常用工具的使用方法。環(huán)節(jié)二：講解Javascript程序設(shè)計(jì)的基礎(chǔ)知識(shí)，通過(guò)實(shí)例說(shuō)明其使用的方法。1.Javascript程序的基本結(jié)構(gòu)：在網(wǎng)頁(yè)Html代碼中添加如下代碼<script type="text/Javascript"> <!- document.write("這是Javascript！采用直接插入的方法！"); /-Javascript結(jié)束-> </script>。2. Javascript基本語(yǔ)法（

37、1） 變量命名：字母或下劃線開(kāi)頭，字母數(shù)字下劃線的組合。（2） 變量定義方式：以var 變量名的方式定義。例如：var username;（3） 變量類型：整型，實(shí)型，布爾型，字符串等。（4） 運(yùn)算符包括算術(shù)運(yùn)算符、比較運(yùn)算符，邏輯運(yùn)算符等。（5） 分支結(jié)構(gòu)程序IF，IF.Else語(yǔ)句的使用3. 以一個(gè)判斷輸入用戶名和密碼是否為空的Javascript程序?yàn)槔?，介紹其使用的方法。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：Javascript語(yǔ)言基礎(chǔ)2課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握J(rèn)avaScript語(yǔ)言中循環(huán)程序的編

38、寫(xiě)重 點(diǎn)掌握J(rèn)avaScript語(yǔ)言中循環(huán)程序的編寫(xiě)難 點(diǎn)掌握J(rèn)avaScript語(yǔ)言中循環(huán)程序的編寫(xiě)教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)Javascript程序的基礎(chǔ)知識(shí)，講解上次課的作業(yè)。環(huán)節(jié)二：講解Javascript程序設(shè)計(jì)的循環(huán)語(yǔ)句，通過(guò)實(shí)例說(shuō)明其使用的方法。1. for 語(yǔ)句格式：for（初始表達(dá)式；條件表達(dá)式；

39、增量表達(dá)式） 語(yǔ)句集；功能：實(shí)現(xiàn)條件循環(huán)，當(dāng)條件成立時(shí)，執(zhí)行語(yǔ)句集，否則跳出循環(huán)體.2. while 語(yǔ)句格式： while（條件） 語(yǔ)句集；說(shuō)明： while語(yǔ)句不斷的測(cè)試一個(gè)條件，如果條件始終成立，則這個(gè)循環(huán)會(huì)一致持續(xù)下去，直到條件不再成立為止。3. do while 語(yǔ)句格式： do 語(yǔ)句集； while（條件）；說(shuō)明： dowhile語(yǔ)句首先不管while中的條件是否成立，總是先執(zhí)行一次循環(huán)。完成第一次循環(huán)后，dowhile語(yǔ)句才試圖判定while中的條件，如果成立，就繼續(xù)循環(huán)；如果條件不成立，就跳到循環(huán)后的第一條語(yǔ)句去執(zhí)行。 環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次

40、課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：Javascript應(yīng)用實(shí)例跑馬燈效果與時(shí)鐘顯示效果課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握運(yùn)用JavaScript語(yǔ)言實(shí)現(xiàn)特定功能的能力重 點(diǎn)掌握運(yùn)用JavaScript語(yǔ)言實(shí)現(xiàn)特定功能的能力難 點(diǎn)掌握運(yùn)用JavaScript語(yǔ)言實(shí)現(xiàn)特定功能的能力教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程

41、環(huán)節(jié)一：復(fù)習(xí)JavaScript語(yǔ)言循環(huán)語(yǔ)句的知識(shí)，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過(guò)網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)跑馬燈效果和一個(gè)時(shí)鐘顯示效果的例子說(shuō)明如何根據(jù)需求設(shè)計(jì)JavaScript程序。1. 跑馬燈效果。功能效果：實(shí)現(xiàn)圖片的滾動(dòng)顯示。2. 時(shí)鐘顯示效果。功能效果：將系統(tǒng)的時(shí)間以特定的格式顯示在一個(gè)輸入文本框中。擴(kuò)展練習(xí)：考試倒計(jì)時(shí)功能的設(shè)計(jì)。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答章節(jié)名稱：Javascript應(yīng)用實(shí)例2在線考試網(wǎng)頁(yè)設(shè)計(jì)課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握J(rèn)avaScript程序綜合設(shè)計(jì)的能力重 點(diǎn)掌握J(rèn)avaScript程序綜合設(shè)計(jì)的能力難 點(diǎn)掌握J(rèn)ava

42、Script程序綜合設(shè)計(jì)的能力教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JavaScript設(shè)計(jì)案例。環(huán)節(jié)二：通過(guò)一個(gè)考試系統(tǒng)頁(yè)面的設(shè)計(jì)案例，分析JavaScript程序設(shè)計(jì)的流程與技巧，提高學(xué)生編寫(xiě)JavaScript程序的熟練度。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答章節(jié)名稱：Javascript應(yīng)用實(shí)例3ki

43、ndeditor文本編輯器的應(yīng)用課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握基于JavaScript開(kāi)發(fā)的工具的使用方法重 點(diǎn)掌握基于JavaScript開(kāi)發(fā)的一個(gè)kindeditor文本編輯工具的使用方法難 點(diǎn)掌握基于JavaScript開(kāi)發(fā)的一個(gè)kindeditor文本編輯工具的使用方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教

44、學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JavaScript設(shè)計(jì)案例。環(huán)節(jié)二：講解一個(gè)基于Javascript庫(kù)開(kāi)發(fā)的在線文本編輯工具kindeditor的應(yīng)用。應(yīng)用步驟：1. 將kindeditor目錄下的目錄下的bin目錄中的LitJSON.dll拷貝到整個(gè)項(xiàng)目的bin目錄下。2. 點(diǎn)擊項(xiàng)目的引用，右鍵，將LitJSON.dll添加到項(xiàng)目的引用中。3. 參考文件夾中的demo.aspx文件，將對(duì)應(yīng)的內(nèi)容添加到需要添加文本編輯器的aspx動(dòng)態(tài)頁(yè)面。4. 在頁(yè)面中的HTML代碼Body中添加一個(gè)TextBox控件，ID名稱為editor_id。5. 接下來(lái)，在頁(yè)面代碼的第一行修改以下，添加Validat

45、eRequest=”False”6. 在A文件夾中的file_manager_json.ashx和upload_json.ashx文件中修改圖片，視頻等文件的上傳路徑。7. 要使用editor_id控件的使用就跟普通TextBox的使用方法一致環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答章節(jié)名稱：JQuery程序設(shè)計(jì)基礎(chǔ)課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握J(rèn)Query程序的基礎(chǔ)知識(shí)及使用方法重 點(diǎn)掌握J(rèn)Query程序的基礎(chǔ)知識(shí)及使用方法難 點(diǎn)掌握J(rèn)Query程序的基礎(chǔ)知識(shí)及使用方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安

46、排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的Kindeditor工具的使用方法。環(huán)節(jié)二：介紹JQuery庫(kù)的基礎(chǔ)知識(shí)及使用方法。1. JQuery是一個(gè)基于Javascript開(kāi)發(fā)的庫(kù)，代碼簡(jiǎn)潔，功能強(qiáng)大。2. JQuery下載后，將其拷貝到網(wǎng)站目錄下，在頁(yè)面的HTML代碼中添加如下引用：<script type="text/javascript" src="./script

47、/jquery.js"></script>3. 頁(yè)面載入載入方法：添加如下代碼$(document).ready(function() );à簡(jiǎn)寫(xiě)$(function();4. 引用方式，有三種：（1）標(biāo)記 語(yǔ)法：$(“p”)（2）類 語(yǔ)法：$(“.myclass”)（3）ID 語(yǔ)法：$(“#btnDemo”)環(huán)節(jié)三：介紹一個(gè)點(diǎn)擊文字消失的案例說(shuō)明JQuery的使用。<script type="text/javascript" src="jquery.js"></script><scri

48、pt type="text/javascript"> $(document).ready(function() $("p").click(function() $(this).hide(); ););</script><body><p>If you click on me, I will disappear.</p></body>環(huán)節(jié)四：完成課堂講解的練習(xí)例題，并疑難解答章節(jié)名稱：JQuery應(yīng)用實(shí)例課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握J(rèn)Query程序綜合應(yīng)用的能力

49、重 點(diǎn)掌握J(rèn)Query程序綜合應(yīng)用的能力難 點(diǎn)掌握J(rèn)Query程序綜合應(yīng)用的能力教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JQuery的基礎(chǔ)知識(shí)。環(huán)節(jié)二：通過(guò)一個(gè)窗口淡入淡出的案例，分析JQuery程序設(shè)計(jì)的流程與技巧。環(huán)節(jié)三：介紹JQuery UI庫(kù)的基本情況，并通過(guò)一個(gè)日期選擇器環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難

50、解答章節(jié)名稱：表單處理課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握網(wǎng)頁(yè)設(shè)計(jì)中表單的使用方法重 點(diǎn)掌握網(wǎng)頁(yè)設(shè)計(jì)中幾種常用的表單控件的使用難 點(diǎn)掌握表單的使用技巧教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)行。參考資料Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動(dòng)態(tài)網(wǎng)頁(yè)制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社教學(xué)過(guò)程環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JQuery的應(yīng)用案例。環(huán)節(jié)二：通過(guò)一個(gè)用戶注冊(cè)的頁(yè)面設(shè)計(jì)案例，介紹表單及文本框、單選按鈕、復(fù)選框、下拉框、按鈕等控件的使用。 表單的數(shù)據(jù)提交方式：（1）post方式：通過(guò)Request.Form方式接收數(shù)據(jù) （2）get方式：通過(guò)Request.QueryString方式接收頁(yè)面?zhèn)鬟f的數(shù)據(jù)環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答章節(jié)名稱：Spry控件創(chuàng)建選項(xiàng)卡式網(wǎng)頁(yè)課堂類型：理論 實(shí)訓(xùn) 練習(xí) 測(cè)試學(xué)時(shí)安排：2課時(shí)目的要求掌握Spry控件創(chuàng)建選項(xiàng)卡式網(wǎng)頁(yè)的方法重 點(diǎn)掌握Spry控件創(chuàng)建選項(xiàng)卡式網(wǎng)頁(yè)的方法難 點(diǎn)掌握Spry控件創(chuàng)建選項(xiàng)卡式網(wǎng)頁(yè)的方法教法學(xué)法1.采用教授法進(jìn)行教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)行。2. 練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論