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

下載本文檔

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

文檔簡介

1、章節(jié)名稱：網(wǎng)頁設(shè)計入門基礎(chǔ)課堂類型：理論 實訓(xùn) 練習(xí) 測試學(xué)時安排：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代碼教法學(xué)法1.采用教授法進行教學(xué)講解，結(jié)合疑難點師生互動交流方式進行。2. 練習(xí)采用學(xué)生自主安排，教師給與個別輔導(dǎo)的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動態(tài)網(wǎng)頁制作教程

2、（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社教學(xué)過程環(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)容進行復(fù)習(xí)，讓學(xué)生練習(xí)html的代碼。并進行疑難解答 章節(jié)名稱：html基礎(chǔ)與應(yīng)用1課堂類

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

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

5、ot;>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=#> 文字 &l

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

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

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

9、移動方向,可取"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.

10、序列卷標(biāo)該類型標(biāo)記類似于Word軟件中的項目符號及編號，主要分為兩種（1）無序標(biāo)記無序序列就是序列各條目間無順序關(guān)系<UL><LI>姓名：吳小娟</LI><LI>生日：1993/6/16</LI><LI>星座：雙子座</LI></UL>運行的效果如下：l 姓名：吳小娟l 生日：1993/6/16l 星座：雙子座其中<UL>為無序序列標(biāo)記，每增加一個條目，就要添加一個<LI>還可以通過設(shè)置<UL type=”屬性”>來改變條目前面的圖標(biāo)，屬性可以是Disk（實心圓）

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

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

13、教學(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)記來實現(xiàn)，鏈接文件的路徑有以下兩種：<a href="/c|/www/text1.

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

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

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

17、法學(xué)法1.采用教授法進行教學(xué)講解，結(jié)合疑難點師生互動交流方式進行。2. 練習(xí)采用學(xué)生自主安排，教師給與個別輔導(dǎo)的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過程環(huán)節(jié)一：復(fù)習(xí)采用表格工具設(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é)三：完成課堂講解的練習(xí)例題

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

19、的作業(yè)。環(huán)節(jié)二：講解CSS樣式表的基礎(chǔ)知識，通過實例說明其應(yīng)用的方法。1. CSS基礎(chǔ)知識CSS是用于控制網(wǎng)頁樣式的一種標(biāo)記語言，它以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） 類選擇器：可用于任何標(biāo)簽，名字需要自定義，以“.”開頭。例子：通過CSS樣式，設(shè)置字體大小與顏色。（2） ID選擇器：針對設(shè)置了ID屬性的HTML標(biāo)記，與類選擇器類似，以“#”開頭。例

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

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

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

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

24、t;/a></li><li><a href="#">推薦版面</a></li><li><a href="#">推薦文章</a></li><li><a href="#">人氣排名</a></li><li><a href="#">新開討論區(qū)</a></li><li><a href="#

25、">休閑娛樂</a></li><li><a href="#">常見問題</a></li></ul>2. 通過設(shè)置UL，LI標(biāo)簽選擇器的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復(fù)合內(nèi)容選擇器實現(xiàn)菜單的鼠標(biāo)移動變換背景效果。#navigation

26、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)頁CSS樣式應(yīng)用實例課堂類型：理論 實訓(xùn) 練習(xí) 測試學(xué)時安排：2課時目的要求掌握CSS樣式綜合運用方法重 點掌握CSS樣式綜合運用方法難 點掌握CSS樣式綜合運用方法教法學(xué)法1.采用教授法進行教學(xué)講解，結(jié)合疑難點師生互動交流方式進行。2. 練習(xí)采用學(xué)生自主安排，教師給與個別輔導(dǎo)的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大

27、學(xué)出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過程環(huán)節(jié)一：復(fù)習(xí)采用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. 鼠標(biāo)經(jīng)過行變色效果。這個效果需要結(jié)合Javascript代碼來

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

29、社 教學(xué)過程環(huán)節(jié)一：復(fù)習(xí)上節(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é)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。章節(jié)名稱：DIV+CSS設(shè)計實例花店頁面設(shè)計下課堂類型：理論 實訓(xùn) 練習(xí) 測試學(xué)時安排：2課時目的要求掌握DIV+CSS設(shè)計網(wǎng)頁的模式與技巧重 點掌握DIV+CSS設(shè)計網(wǎng)頁的模式與技巧難 點掌握

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

31、Photoshop軟件設(shè)計網(wǎng)頁的方法難 點利用切片工具對網(wǎng)頁進行分割教法學(xué)法1.采用教授法進行教學(xué)講解，結(jié)合疑難點師生互動交流方式進行。2. 練習(xí)采用學(xué)生自主安排，教師給與個別輔導(dǎo)的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社 教學(xué)過程環(huán)節(jié)一：復(fù)習(xí)采用表格布局模式設(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)頁在計算機上以圖片形

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

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

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

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

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

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

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

39、功能：實現(xiàn)條件循環(huán)，當(dāng)條件成立時，執(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é)三：完成課堂講解的練習(xí)例題，并疑難解答環(huán)節(jié)四：復(fù)習(xí)本次課內(nèi)容，步驟課后作業(yè)。

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

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

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

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

44、課介紹的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=”F

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

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

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

48、ot;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)用實例課堂類型：理論 實訓(xùn) 練習(xí) 測試學(xué)時安排：2課時目的要求掌握J(rèn)Query程序綜合應(yīng)用的能力重 點掌握J(rèn)Query

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

50、課堂類型：理論 實訓(xùn) 練習(xí) 測試學(xué)時安排：2課時目的要求掌握網(wǎng)頁設(shè)計中表單的使用方法重 點掌握網(wǎng)頁設(shè)計中幾種常用的表單控件的使用難 點掌握表單的使用技巧教法學(xué)法1.采用教授法進行教學(xué)講解，結(jié)合疑難點師生互動交流方式進行。2. 練習(xí)采用學(xué)生自主安排，教師給與個別輔導(dǎo)的方式進行。參考資料Dreamweaver CS5網(wǎng)頁設(shè)計與制作DIV+CSS版 吳豐,丁欣 主編 清華大學(xué)出版社動態(tài)網(wǎng)頁制作教程（第二版）劉梅彥 徐英慧 編著 清華大學(xué)出版社教學(xué)過程環(huán)節(jié)一：復(fù)習(xí)上節(jié)課介紹的JQuery的應(yīng)用案例。環(huán)節(jié)二：通過一個用戶注冊的頁面設(shè)計案例，介紹表單及文本框、單選按鈕、復(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)建選項卡式網(wǎng)頁課堂類型：理論 實訓(xùn) 練習(xí) 測試學(xué)時安排：2課時目的要求掌握Spry控件創(chuàng)建選項卡式網(wǎng)頁的方法重 點掌握Spry控件創(chuàng)建選項卡式網(wǎng)頁的方法難 點掌握Spry控件創(chuàng)建選項卡式網(wǎng)頁的方法教法學(xué)法1.采用教授法進行教學(xué)講解，結(jié)合疑難點師生互動交流方式進行。2. 練習(xí)采用學(xué)生自主安排，教師給與個

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論