網(wǎng)頁設(shè)計(jì)和制作教（學(xué)）案_第1頁
網(wǎng)頁設(shè)計(jì)和制作教（學(xué)）案_第2頁
網(wǎng)頁設(shè)計(jì)和制作教（學(xué)）案_第3頁
網(wǎng)頁設(shè)計(jì)和制作教（學(xué)）案_第4頁
網(wǎng)頁設(shè)計(jì)和制作教（學(xué)）案_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

...wd......wd......wd...[章節(jié)名稱]：網(wǎng)頁設(shè)計(jì)入門根基[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]了解網(wǎng)絡(luò)的基本知識(shí)，網(wǎng)頁設(shè)計(jì)的根基知識(shí)，網(wǎng)頁的分類，動(dòng)態(tài)網(wǎng)頁的原理及技術(shù)了解網(wǎng)頁的基本構(gòu)成及最簡單的html代碼了解網(wǎng)頁設(shè)計(jì)的流程[重點(diǎn)]了解網(wǎng)頁設(shè)計(jì)的流程，掌握最基本的網(wǎng)頁的構(gòu)成及最簡單的網(wǎng)頁html代碼[難點(diǎn)]掌握最基本的網(wǎng)頁的構(gòu)成及最簡單的網(wǎng)頁html代碼[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：結(jié)合PPT課件的內(nèi)容，講解網(wǎng)絡(luò)和網(wǎng)頁的基本知識(shí)。了解網(wǎng)頁的分類，網(wǎng)頁運(yùn)行的原理，介紹網(wǎng)頁設(shè)計(jì)的工具，動(dòng)態(tài)網(wǎng)頁的技術(shù)。環(huán)節(jié)二：介紹網(wǎng)頁的構(gòu)成，并對(duì)一個(gè)網(wǎng)站進(jìn)展實(shí)例分析說明。編寫最簡單的html代碼。環(huán)節(jié)三：了解網(wǎng)頁設(shè)計(jì)的流程主要有以下幾個(gè)步驟：一.網(wǎng)站規(guī)劃二.素材資源收集三.選擇開發(fā)工具四.站點(diǎn)建設(shè)與規(guī)劃五.分模塊進(jìn)展網(wǎng)頁設(shè)計(jì)六.網(wǎng)頁源代碼測試與特效添加七.申請(qǐng)域名與空間八.網(wǎng)頁源代碼上傳九.定期的維護(hù)環(huán)節(jié)四：對(duì)本節(jié)課的內(nèi)容進(jìn)展復(fù)習(xí)，讓學(xué)生練習(xí)html的代碼。并進(jìn)展疑難解答[章節(jié)名稱]：html根基與應(yīng)用1[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]了解html語言的根基知識(shí)，構(gòu)造，掌握html語言設(shè)置網(wǎng)頁的背景音樂，背景圖片，字體的方法。[重點(diǎn)]Html語言設(shè)置網(wǎng)頁的背景音樂，圖片，字體[難點(diǎn)]Html語言設(shè)置網(wǎng)頁的方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)網(wǎng)頁設(shè)計(jì)的根基知識(shí)，介紹如何利用Dreamweaver開發(fā)工具，記事本編輯網(wǎng)頁的源程序，介紹網(wǎng)頁站點(diǎn)的創(chuàng)立及本卷須知。環(huán)節(jié)二：講解html語言的構(gòu)造，特點(diǎn)，設(shè)置網(wǎng)頁頁面的背景音樂，圖片，字體1.設(shè)置背景顏色

<bodybgcolor="red">2.背景圖片<bodybackgroud＝"bg9.gif">3.背景音樂

背景音樂和上邊介紹的兩個(gè)有很大的不同，它的代碼是放在頁面的頭部<head></head>里，<bgsoundsrc="background_sound.mid"loop="-1">4.標(biāo)題字體<h#>文字</h#>#=1，2，3，4，5，6

比方：<h1>今天是星期三，今天天氣晴，溫度15°-23°</h1>5.字體的大小，用于一般文字。

<fontsize=#>文字</font>#=1,2,3,4,5,6,7or+#,-#

例子：<fontsize=7>今天天氣真好！</font>6.字體顏色指定顏色<fontcolor=#>文字</font>#="#rrggbb"16進(jìn)制數(shù)碼，或者是以下預(yù)定義色彩：

Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua7.客戶端字體(FontFace)

<fontface="#,#,...,#">...</font>#=客戶端可獲得的字體，什么是客戶端，通俗的講，就是你的電腦，face="#"就是從你的電腦獲得的字體環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：html根基與應(yīng)用2[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]了解html語言的跑馬燈效果標(biāo)簽的運(yùn)用，序列卷標(biāo)標(biāo)簽的運(yùn)用[重點(diǎn)]Html語言的跑馬燈效果標(biāo)簽及序列卷標(biāo)的應(yīng)用[難點(diǎn)]Html語言的跑馬燈效果標(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)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)HTML語言中設(shè)置背景顏色，背景圖片，音樂等標(biāo)簽的知識(shí)，介紹HTML語言的編寫標(biāo)準(zhǔn)要求。環(huán)節(jié)二：講解html語言的跑馬燈效果標(biāo)記，序列卷標(biāo)標(biāo)記的使用1.跑馬燈效果該標(biāo)記能實(shí)現(xiàn)文字或圖片的滾動(dòng)效果。<MARQUEEdirection="up"width="100"height="100"bgcolor="#ccffcc"scrollamount="2">滾動(dòng)文字</MARQUEE>主要參數(shù)：①direction:控制移動(dòng)方向,可取"left","right","up","down"四個(gè)值②behavior:移動(dòng)方式,可取"scroll"(循環(huán)移動(dòng)),"slide"(只走一圈)，"alternate"(來回移動(dòng))③loop:循環(huán)次數(shù),不輸入表示無限次循環(huán)④scrollamount:移動(dòng)快慢,數(shù)值越大越快⑤scrolldelay:每移動(dòng)一步之后的延時(shí),單位是毫秒⑥height,width:移動(dòng)區(qū)域的高和寬,單位像素⑦bgcolor:移動(dòng)區(qū)域的背風(fēng)光2.序列卷標(biāo)該類型標(biāo)記類似于Word軟件中的工程符號(hào)及編號(hào)，主要分為兩種〔1〕無序標(biāo)記無序序列就是序列各條目間無順序關(guān)系<UL>

<LI>姓名：吳小娟</LI>

<LI>生日：1993/6/16</LI>

<LI>星座：雙子座</LI>

</UL>運(yùn)行的效果如下：姓名：吳小娟生日：1993/6/16星座：雙子座其中<UL>為無序序列標(biāo)記，每增加一個(gè)條目，就要添加一個(gè)<LI>還可以通過設(shè)置<ULtype=〞屬性〞>來改變條目前面的圖標(biāo)，屬性可以是Disk〔實(shí)心圓〕,Square〔方形〕,Circle〔空心圓〕〔2〕有序標(biāo)記無序序列就是序列各條目間有順序關(guān)系<OL>

<LI>姓名：吳弘凱

<LI>生日：1993/6/16

<LI>星座：雙子座

</OL>運(yùn)行的效果如下：姓名：吳小娟生日：1993/6/16星座：雙子座其中<OL>為無序序列標(biāo)記，每增加一個(gè)條目，就要添加一個(gè)<LI>還可以通過設(shè)置<OLtype=〞屬性〞>來改變條目前面的編號(hào)，屬性可以設(shè)置為1〔數(shù)字〕、A〔大寫英文字母〕、a〔小寫英文字母〕、I〔大寫羅馬字母〕、i〔小寫羅馬字母〕等五種。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：html根基及應(yīng)用3[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]了解Html語言的控制表格及其表項(xiàng)，框架[重點(diǎn)]Html語言的表格及其表項(xiàng)的標(biāo)記使用，超鏈接標(biāo)記，框架標(biāo)記的使用[難點(diǎn)]掌握利用框架標(biāo)記來設(shè)計(jì)頁面[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)HTML語言中跑馬燈效果標(biāo)記，序列卷標(biāo)的使用方法。環(huán)節(jié)二：講解html語言的表格標(biāo)記，超鏈接標(biāo)記，框架標(biāo)記的使用1.表格標(biāo)記

<table>...</table>-定義表格

<tr>...</tr>-定義表行

<th>...</th>-定義表頭

<td>...</td>-定義表元2.超鏈接標(biāo)記超鏈接采用<a>…</a>標(biāo)記來實(shí)現(xiàn)，鏈接文件的路徑有以下兩種：<ahref="/c|/www/text1.htm">絕對(duì)路徑方式<ahref="text1.htm">相對(duì)路徑方式3.框架構(gòu)造標(biāo)記<HTML>

<HEAD>

<TITLE>框窗實(shí)作</TITLE>

</HEAD>

<FRAMESETCOLS="120,*">

<FRAMESRC="a.htm"NAME="1">

<FRAMESRC="b.htm"NAME="2">

</FRAMESET>

</HTML>在<FRAMESET>中，COLS表示左右分，ROWS表示上下分。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：運(yùn)用表格設(shè)計(jì)頁面布局[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]了解網(wǎng)頁中表格布局模式設(shè)計(jì)的方法[重點(diǎn)]了解網(wǎng)頁中表格布局模式設(shè)計(jì)的方法[難點(diǎn)]了解網(wǎng)頁中表格布局模式設(shè)計(jì)的方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)HTML語言中表格標(biāo)記，超鏈接，框架的相關(guān)知識(shí)，講解上次課布置的作業(yè)。環(huán)節(jié)二：以一個(gè)藍(lán)色空間網(wǎng)頁的設(shè)計(jì)為例，講解采用表格布局模式設(shè)計(jì)網(wǎng)頁的方法。設(shè)計(jì)標(biāo)準(zhǔn)要求：多采用表格嵌套方式設(shè)計(jì)頁面，少采用表格拆分的設(shè)計(jì)方法環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：運(yùn)用框架構(gòu)造設(shè)計(jì)頁面布局[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]了解網(wǎng)頁中框架布局模式設(shè)計(jì)的方法[重點(diǎn)]掌握網(wǎng)頁中框架布局模式設(shè)計(jì)的方法[難點(diǎn)]掌握網(wǎng)頁中框架布局模式設(shè)計(jì)的方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)采用表格工具設(shè)計(jì)網(wǎng)頁的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：介紹框架構(gòu)造在網(wǎng)頁設(shè)計(jì)中的應(yīng)用，以一個(gè)詩人作品簡介網(wǎng)頁的設(shè)計(jì)為例，講解采用框架布局模式設(shè)計(jì)網(wǎng)頁的方法。設(shè)計(jì)技巧：框架中每個(gè)頁面要單獨(dú)保存命名，需要在超鏈接屬性中設(shè)置顯示在主框架：target:blank。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：網(wǎng)頁CSS樣式根基[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握CSS樣式的建設(shè)及使用的方法[重點(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)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)采用表格布局模式設(shè)計(jì)網(wǎng)頁的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：講解CSS樣式表的根基知識(shí)，通過實(shí)例說明其應(yīng)用的方法。CSS根基知識(shí)CSS是用于控制網(wǎng)頁樣式的一種標(biāo)記語言，它以HTML為根基，擴(kuò)展了HTML的功能，提供了豐富的格式化功能，使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁的外觀。通過CSS，可以實(shí)現(xiàn)網(wǎng)頁的樣式信息與網(wǎng)頁內(nèi)容別離。CSS樣式的建設(shè)在Dreamweaver軟件中的CSS面板中新建CSS樣式CSS樣式的類型主要有四種：類選擇器：可用于任何標(biāo)簽，名字需要自定義，以“.〞開頭。例子：通過CSS樣式，設(shè)置字體大小與顏色。ID選擇器：針對(duì)設(shè)置了ID屬性的HTML標(biāo)記，與類選擇器類似，以“#〞開頭。例子：通過CSS樣式，設(shè)置指定ID的表格邊框標(biāo)簽選擇器：標(biāo)簽也稱標(biāo)記，CSS標(biāo)簽選擇器就是針對(duì)Html標(biāo)簽設(shè)置CSS樣式。例如，h2選擇器就用于聲明頁面中所有<h2>標(biāo)記的樣式風(fēng)格。復(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)頁CSS樣式根基——菜單制作1[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握運(yùn)用CSS樣式設(shè)計(jì)網(wǎng)頁菜單的方法[重點(diǎn)]掌握運(yùn)用CSS樣式設(shè)計(jì)網(wǎng)頁菜單的方法[難點(diǎn)]掌握運(yùn)用CSS樣式設(shè)計(jì)網(wǎng)頁菜單的方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)CSS樣式表的根基知識(shí)，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過一個(gè)網(wǎng)頁菜單的制作實(shí)例，介紹CSS的設(shè)置技巧。通過設(shè)置a標(biāo)簽的css樣式實(shí)現(xiàn)菜單的基本顯示。通過設(shè)置a標(biāo)簽選擇器的寬度高度來實(shí)現(xiàn)。通過設(shè)置鼠標(biāo)經(jīng)過的CSS樣式，來實(shí)現(xiàn)鼠標(biāo)移動(dòng)到某個(gè)菜單的背景顏色變化通過a:hover符合選擇器來實(shí)現(xiàn)。在不同的瀏覽器下運(yùn)行這個(gè)網(wǎng)頁，分析存在的問題。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：網(wǎng)頁CSS樣式根基——菜單制作2[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握運(yùn)用UL，LI標(biāo)簽及它們的CSS樣式來設(shè)計(jì)網(wǎng)頁菜單的方法[重點(diǎn)]掌握運(yùn)用UL，LI標(biāo)簽及它們的CSS樣式來設(shè)計(jì)網(wǎng)頁菜單的方法[難點(diǎn)]掌握運(yùn)用UL，LI標(biāo)簽及它們的CSS樣式來設(shè)計(jì)網(wǎng)頁菜單的方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的網(wǎng)頁菜單的制作方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：針對(duì)采用設(shè)置a標(biāo)簽CSS樣式制作菜單的方法存在的問題，介紹采用UL，Li標(biāo)簽的CSS樣式設(shè)計(jì)網(wǎng)頁菜單的制作實(shí)例，介紹CSS的設(shè)置技巧。網(wǎng)頁菜單的設(shè)計(jì)步驟：通過UL，LI標(biāo)簽創(chuàng)立網(wǎng)頁菜單的基本內(nèi)容。<ulid="navigation"> <li><ahref="#">首頁導(dǎo)讀</a></li> <li><ahref="#">推薦版面</a></li> <li><ahref="#">推薦文章</a></li> <li><ahref="#">人氣排名</a></li> <li><ahref="#">新開討論區(qū)</a></li> <li><ahref="#">休閑娛樂</a></li> <li><ahref="#">常見問題</a></li></ul>通過設(shè)置UL，LI標(biāo)簽選擇器的CSS樣式實(shí)現(xiàn)網(wǎng)頁菜單的基本顯示效果。#navigationli{ text-align:center;width:80px;height:32px; background:url(button1.jpg)repeat-x; float:left; }通過設(shè)置a:hover復(fù)合內(nèi)容選擇器實(shí)現(xiàn)菜單的鼠標(biāo)移動(dòng)變換背景效果。#navigationlia:hover{ color:#FFFFFF; background:url(button2.jpg)no-repeat;}環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：網(wǎng)頁CSS樣式應(yīng)用實(shí)例[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(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)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)采用UL，LI設(shè)計(jì)網(wǎng)頁菜單的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：講解CSS樣式表的兩個(gè)應(yīng)用實(shí)例，通過實(shí)例說明其中CSS的設(shè)置技巧。無邊框輸入表格案例通過為表格單元格添加css樣式，設(shè)置樣式的邊框?qū)傩詾闊o邊框來實(shí)現(xiàn)。table.formdatainput{ width:100px; padding:1px3px1px3px; margin:0px; border:none; /*輸入框不要邊框*/ font-family:Arial;}鼠標(biāo)經(jīng)過行變色效果。這個(gè)效果需要結(jié)合Javascript代碼來實(shí)現(xiàn)。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：DIV+CSS設(shè)計(jì)實(shí)例——花店頁面設(shè)計(jì)上[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握DIV+CSS設(shè)計(jì)網(wǎng)頁的模式與技巧[重點(diǎn)]掌握DIV+CSS設(shè)計(jì)網(wǎng)頁的模式與技巧[難點(diǎn)]掌握DIV+CSS設(shè)計(jì)網(wǎng)頁的模式與技巧[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的CSS樣式表的應(yīng)用案例，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過一個(gè)花店網(wǎng)頁設(shè)計(jì)案例，講解如何采用DIV+CSS的布局模式來設(shè)計(jì)網(wǎng)頁。設(shè)計(jì)步驟：采用Div創(chuàng)立網(wǎng)頁的整體構(gòu)造在每個(gè)模塊中再添加獨(dú)立的Div模塊，完善網(wǎng)頁內(nèi)容通過對(duì)每個(gè)模塊分別設(shè)置CSS樣式表完成網(wǎng)頁顯示效果的設(shè)置。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：DIV+CSS設(shè)計(jì)實(shí)例——花店頁面設(shè)計(jì)下[課堂類型]：理論□實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握DIV+CSS設(shè)計(jì)網(wǎng)頁的模式與技巧[重點(diǎn)]掌握DIV+CSS設(shè)計(jì)網(wǎng)頁的模式與技巧[難點(diǎn)]掌握DIV+CSS設(shè)計(jì)網(wǎng)頁的模式與技巧[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)采用DIV+CSS模式設(shè)計(jì)網(wǎng)頁的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：讓學(xué)生完成花店網(wǎng)頁設(shè)計(jì)練習(xí)，疑難解答。[章節(jié)名稱]：Photoshop設(shè)計(jì)網(wǎng)頁[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握Photoshop軟件在網(wǎng)頁設(shè)計(jì)中的運(yùn)用[重點(diǎn)]掌握使用Photoshop軟件設(shè)計(jì)網(wǎng)頁的方法[難點(diǎn)]利用切片工具對(duì)網(wǎng)頁進(jìn)展分割[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)采用表格布局模式設(shè)計(jì)網(wǎng)頁的方法。環(huán)節(jié)二：介紹Photoshop軟件在網(wǎng)頁設(shè)計(jì)中的應(yīng)用，通過一個(gè)產(chǎn)品介紹網(wǎng)頁的實(shí)例說明設(shè)計(jì)的方法。Photoshop設(shè)計(jì)網(wǎng)頁的方法：通過布局，色彩搭配，將草圖設(shè)計(jì)的網(wǎng)頁在計(jì)算機(jī)上以圖片形式繪制出來。對(duì)于設(shè)計(jì)好的圖片形式的網(wǎng)頁，通過Photoshop軟件的切片功能，將圖片的網(wǎng)頁分割為各個(gè)局部模塊，再導(dǎo)出為web格式的文件。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：網(wǎng)頁設(shè)計(jì)中的動(dòng)畫——Flash動(dòng)畫[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握網(wǎng)頁制作中Flash動(dòng)畫的設(shè)計(jì)方法技巧[重點(diǎn)]掌握網(wǎng)頁制作中Flash動(dòng)畫的設(shè)計(jì)方法技巧[難點(diǎn)]掌握網(wǎng)頁制作中Flash動(dòng)畫的設(shè)計(jì)方法技巧[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)Photoshop軟件設(shè)計(jì)網(wǎng)頁的方法，講解上次課布置的作業(yè)。環(huán)節(jié)二：介紹Flash動(dòng)畫在網(wǎng)頁中的應(yīng)用，以網(wǎng)站首頁光芒文字動(dòng)畫的制作為例，介紹Flash動(dòng)畫的設(shè)計(jì)方法。設(shè)計(jì)步驟：創(chuàng)立動(dòng)畫文字內(nèi)容，復(fù)制一份，并修改其顏色添加遮罩所用的長方形條，設(shè)置其從第1幀到100幀移動(dòng)的動(dòng)畫效果。設(shè)置方形條為遮罩。動(dòng)畫效果測試。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：網(wǎng)頁設(shè)計(jì)實(shí)用工具介紹[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握幾個(gè)常用的網(wǎng)頁設(shè)計(jì)工具的使用方法[重點(diǎn)]掌握幾個(gè)常用的網(wǎng)頁設(shè)計(jì)工具的使用方法[難點(diǎn)]掌握幾個(gè)常用的網(wǎng)頁設(shè)計(jì)工具的使用方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)采用Flash制作網(wǎng)頁動(dòng)畫的方法。環(huán)節(jié)二：介紹幾個(gè)網(wǎng)頁制作的實(shí)用工具，通過實(shí)例說明其應(yīng)用的方法。Flashbannermaker軟件。能利用簡單的設(shè)置，完成一個(gè)網(wǎng)頁的Banner動(dòng)畫Firework軟件利用該工具，可以設(shè)計(jì)網(wǎng)頁中的圖標(biāo)。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：Javascript語言根基1[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握J(rèn)avaScript程序設(shè)計(jì)的根基知識(shí)[重點(diǎn)]能運(yùn)用JavaScript語言實(shí)現(xiàn)網(wǎng)頁中的特定功能[難點(diǎn)]能運(yùn)用JavaScript語言實(shí)現(xiàn)網(wǎng)頁中的特定功能[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)網(wǎng)頁設(shè)計(jì)幾個(gè)常用工具的使用方法。環(huán)節(jié)二：講解Javascript程序設(shè)計(jì)的根基知識(shí)，通過實(shí)例說明其使用的方法。1.Javascript程序的基本構(gòu)造：在網(wǎng)頁Html代碼中添加如下代碼<scripttype="text/Javascript"><!--document.write("這是Javascript！采用直接插入的方法！");//-Javascript完畢--></script>。Javascript基本語法變量命名：字母或下劃線開頭，字母數(shù)字下劃線的組合。變量定義方式：以var變量名的方式定義。例如：varusername;變量類型：整型，實(shí)型，布爾型，字符串等。運(yùn)算符包括算術(shù)運(yùn)算符、比較運(yùn)算符，邏輯運(yùn)算符等。分支構(gòu)造程序IF，IF...Else語句的使用以一個(gè)判斷輸入用戶名和密碼是否為空的Javascript程序?yàn)槔?，介紹其使用的方法。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：Javascript語言根基2[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握J(rèn)avaScript語言中循環(huán)程序的編寫[重點(diǎn)]掌握J(rèn)avaScript語言中循環(huán)程序的編寫[難點(diǎn)]掌握J(rèn)avaScript語言中循環(huán)程序的編寫[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)Javascript程序的根基知識(shí)，講解上次課的作業(yè)。環(huán)節(jié)二：講解Javascript程序設(shè)計(jì)的循環(huán)語句，通過實(shí)例說明其使用的方法。for語句格式：for〔初始表達(dá)式；條件表達(dá)式；增量表達(dá)式〕{語句集；}功能：實(shí)現(xiàn)條件循環(huán)，當(dāng)條件成立時(shí)，執(zhí)行語句集，否那么跳出循環(huán)體.while語句格式：while〔條件〕{語句集；}說明：while語句不斷的測試一個(gè)條件，如果條件始終成立，那么這個(gè)循環(huán)會(huì)一致持續(xù)下去，直到條件不再成立為止。dowhile語句格式：do{語句集；}while〔條件〕；說明：do…while語句首先不管while中的條件是否成立，總是先執(zhí)行一次循環(huán)。完成第一次循環(huán)后，do…while語句才試圖判定while中的條件，如果成立，就繼續(xù)循環(huán)；如果條件不成立，就跳到循環(huán)后的第一條語句去執(zhí)行。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。[章節(jié)名稱]：Javascript應(yīng)用實(shí)例——跑馬燈效果與時(shí)鐘顯示效果[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握運(yùn)用JavaScript語言實(shí)現(xiàn)特定功能的能力[重點(diǎn)]掌握運(yùn)用JavaScript語言實(shí)現(xiàn)特定功能的能力[難點(diǎn)]掌握運(yùn)用JavaScript語言實(shí)現(xiàn)特定功能的能力[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)JavaScript語言循環(huán)語句的知識(shí)，講解上次課布置的作業(yè)。環(huán)節(jié)二：通過網(wǎng)頁設(shè)計(jì)中一個(gè)跑馬燈效果和一個(gè)時(shí)鐘顯示效果的例子說明如何根據(jù)需求設(shè)計(jì)JavaScript程序。跑馬燈效果。功能效果：實(shí)現(xiàn)圖片的滾動(dòng)顯示。時(shí)鐘顯示效果。功能效果：將系統(tǒng)的時(shí)間以特定的格式顯示在一個(gè)輸入文本框中。擴(kuò)展練習(xí)：考試倒計(jì)時(shí)功能的設(shè)計(jì)。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：Javascript應(yīng)用實(shí)例2——在線考試網(wǎng)頁設(shè)計(jì)[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握J(rèn)avaScript程序綜合設(shè)計(jì)的能力[重點(diǎn)]掌握J(rèn)avaScript程序綜合設(shè)計(jì)的能力[難點(diǎn)]掌握J(rèn)avaScript程序綜合設(shè)計(jì)的能力[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JavaScript設(shè)計(jì)案例。環(huán)節(jié)二：通過一個(gè)考試系統(tǒng)頁面的設(shè)計(jì)案例，分析JavaScript程序設(shè)計(jì)的流程與技巧，提高學(xué)生編寫JavaScript程序的熟練度。環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：Javascript應(yīng)用實(shí)例3——kindeditor文本編輯器的應(yīng)用[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握基于JavaScript開發(fā)的工具的使用方法[重點(diǎn)]掌握基于JavaScript開發(fā)的一個(gè)kindeditor文本編輯工具的使用方法[難點(diǎn)]掌握基于JavaScript開發(fā)的一個(gè)kindeditor文本編輯工具的使用方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JavaScript設(shè)計(jì)案例。環(huán)節(jié)二：講解一個(gè)基于Javascript庫開發(fā)的在線文本編輯工具kindeditor的應(yīng)用。應(yīng)用步驟：將kindeditor目錄下的目錄下的bin目錄中的LitJSON.dll拷貝到整個(gè)工程的bin目錄下。點(diǎn)擊工程的引用，右鍵，將LitJSON.dll添加到工程的引用中。參考文件夾中的demo.aspx文件，將對(duì)應(yīng)的內(nèi)容添加到需要添加文本編輯器的aspx動(dòng)態(tài)頁面。在頁面中的HTML代碼Body中添加一個(gè)TextBox控件，ID名稱為editor_id。接下來，在頁面代碼的第一行修改以下，添加ValidateRequest=〞False〞在A文件夾中的file_manager_json.ashx和upload_json.ashx文件中修改圖片，視頻等文件的上傳路徑。要使用editor_id控件的使用就跟普通TextBox的使用方法一致環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：JQuery程序設(shè)計(jì)根基[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握J(rèn)Query程序的根基知識(shí)及使用方法[重點(diǎn)]掌握J(rèn)Query程序的根基知識(shí)及使用方法[難點(diǎn)]掌握J(rèn)Query程序的根基知識(shí)及使用方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的Kindeditor工具的使用方法。環(huán)節(jié)二：介紹JQuery庫的根基知識(shí)及使用方法。JQuery是一個(gè)基于Javascript開發(fā)的庫，代碼簡潔，功能強(qiáng)大。JQuery下載后，將其拷貝到網(wǎng)站目錄下，在頁面的HTML代碼中添加如下引用：<scripttype="text/javascript"src="./script/jquery.js"></script>頁面載入載入方法：添加如下代碼$(document).ready(function(){});簡寫$(function(){}); 引用方式，有三種：〔1〕標(biāo)記語法：$(“p〞)〔2〕類 語法：$(“.myclass〞)〔3〕ID 語法：$(“#btnDemo〞)環(huán)節(jié)三：介紹一個(gè)點(diǎn)擊文字消失的案例說明JQuery的使用。<scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script><body><p>Ifyouclickonme,Iwilldisappear.</p></body>環(huán)節(jié)四：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：JQuery應(yīng)用實(shí)例[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握J(rèn)Query程序綜合應(yīng)用的能力[重點(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)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JQuery的根基知識(shí)。環(huán)節(jié)二：通過一個(gè)窗口淡入淡出的案例，分析JQuery程序設(shè)計(jì)的流程與技巧。環(huán)節(jié)三：介紹JQueryUI庫的基本情況，并通過一個(gè)日期選擇器環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：表單處理[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握網(wǎng)頁設(shè)計(jì)中表單的使用方法[重點(diǎn)]掌握網(wǎng)頁設(shè)計(jì)中幾種常用的表單控件的使用[難點(diǎn)]掌握表單的使用技巧[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大學(xué)出版社?動(dòng)態(tài)網(wǎng)頁制作教程?〔第二版〕劉梅彥徐英慧編著清華大學(xué)出版社[教學(xué)過程]環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JQuery的應(yīng)用案例。環(huán)節(jié)二：通過一個(gè)用戶注冊的頁面設(shè)計(jì)案例，介紹表單及文本框、單項(xiàng)選擇按鈕、復(fù)選框、下拉框、按鈕等控件的使用。表單的數(shù)據(jù)提交方式：〔1〕post方式：通過Request.Form方式接收數(shù)據(jù)〔2〕get方式：通過Request.QueryString方式接收頁面?zhèn)鬟f的數(shù)據(jù)環(huán)節(jié)三：完成課堂講解的練習(xí)例題，并疑難解答[章節(jié)名稱]：Spry控件創(chuàng)立選項(xiàng)卡式網(wǎng)頁[課堂類型]：理論■實(shí)訓(xùn)□練習(xí)■測試□[學(xué)時(shí)安排]：2課時(shí)[目的要求]掌握Spry控件創(chuàng)立選項(xiàng)卡式網(wǎng)頁的方法[重點(diǎn)]掌握Spry控件創(chuàng)立選項(xiàng)卡式網(wǎng)頁的方法[難點(diǎn)]掌握Spry控件創(chuàng)立選項(xiàng)卡式網(wǎng)頁的方法[教法學(xué)法]1.采用教授法進(jìn)展教學(xué)講解，結(jié)合疑難點(diǎn)師生互動(dòng)交流方式進(jìn)展。2.練習(xí)采用學(xué)生自主安排，教師給與個(gè)別輔導(dǎo)的方式進(jìn)展。[參考資料]?DreamweaverCS5網(wǎng)頁設(shè)計(jì)與制作——DIV+CSS版?吳豐,丁欣主編清華大

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論