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

1、網(wǎng)頁設(shè)計和發(fā)布流程第一步是對站點進(jìn)行規(guī)劃第二步是創(chuàng)建站點的基本結(jié)構(gòu)第三步即可開始具體的網(wǎng)頁創(chuàng)作過程最后一步是站點的發(fā)布第一節(jié) 站點的規(guī)劃與創(chuàng)建【教學(xué)目的與要求】一、規(guī)劃站點二、創(chuàng)建一個站點【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：規(guī)劃站點重點知識：創(chuàng)建一個站點2課時【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、規(guī)劃站點Web站點是一組具有共享屬性（如相關(guān)主題、類似的設(shè)計或共同目的等）的鏈接文檔。本地站點：是本地硬盤中存放遠(yuǎn)程網(wǎng)站

2、所有文檔的地方（文件夾）。建立網(wǎng)站的通常做法是：在要地硬盤中建立一個文件夾用來存放網(wǎng)站的所有文件，往后就在該文件夾中創(chuàng)建和編輯文檔。待網(wǎng)頁設(shè)計和測試好之后，再把它們拷貝到網(wǎng)站上供瀏覽者瀏覽。1、規(guī)劃站點結(jié)構(gòu)注：規(guī)劃站點的結(jié)構(gòu)之前應(yīng)先用筆繪出站點的結(jié)構(gòu)圖（如下圖所示是一個典型的學(xué)校站點的結(jié)構(gòu)圖）2、規(guī)劃站點的瀏覽機制一般可采用以下的方法：l 創(chuàng)建返回主頁的鏈接l 顯示網(wǎng)站專題目錄l 顯示當(dāng)前位置l 搜索和索引l 反饋（將網(wǎng)頁創(chuàng)作者或網(wǎng)站管理員公布在網(wǎng)頁上，或創(chuàng)建一個E-MAIL超級鏈接，以使用戶能快速地將信息反饋到網(wǎng)站中）二、創(chuàng)建一個站點步驟：1、單擊“文件”-“新建”-“站點”命令（或單擊常用

3、工具欄中“新建網(wǎng)頁”按鈕的下拉箭頭，從打開的下拉菜單中選擇“站點”命令）2、選擇一種站點模板或向?qū)?、單擊“確定”按鈕三、站點的基本操作1、打開站點：“文件”-“打開站點”2、刪除站點：方法一：在Windows資源管理器中刪除一個站點方法二：在FrontPage中刪除站點，在“文件夾”視圖或“網(wǎng)頁”視圖的“文件夾列表”中，右擊站點所對應(yīng)的目錄，在快捷菜單中單擊“刪除”命令3、站點的設(shè)置“工具”-“站點設(shè)置”，有“常規(guī)”、“參數(shù)”、“高級”、“語言”、“導(dǎo)航”、“數(shù)據(jù)庫”六個選項卡【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第二節(jié) 利用表格進(jìn)行網(wǎng)頁布局【教學(xué)目的與要求】一、 插入表格二、

4、單元格的基本操作【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識： 插入表格重點知識：單元格的基本操作【教學(xué)組織過程】2課時 2課時1上講回顧2教授新知【授課內(nèi)容】一、 插入表格1、單擊常用工具上的“插入表格”按鈕2、單擊“表格”-“插入”-“表格”命令3、使用表格工具欄（“查看”“工具欄”-“表格”命令）4、由文本轉(zhuǎn)換（“表格”“轉(zhuǎn)換”“文本到表格”）一般以段落為分行標(biāo)記，以逗號或句號為分列標(biāo)記。二、 單元格的基本操作1、選擇單元格（“表格”“選

5、定”“單元格”）Ctrl：可選擇不相鄰的單元格Shift：選擇多個相鄰的單元格2、插入單元格（“表格”“插入”“單元格”）3、合并單元格（“表格”“合并單元格”或“表格工具欄”上的“合并單元格”按鈕）4、拆分單元格（“表格”“拆分單元格”或“表格工具欄”上的“拆分單元格”按鈕）三、填充單元格1、文本與圖像填充（“插入”“圖片”）2、對齊文本與圖像（“表格”“屬性”“單元格”，“水平對齊方式”、“垂直對齊方式”）3、修改單元格背景（“表格”“屬性”“單元格”，“背景”）4、調(diào)整邊框顏色（“表格”“屬性”“單元格”，“邊框”）5、改變單元格尺寸（“表格”“屬性”“單元格”，“指定寬度”、“指定高度

6、”）四、修改表格的行與列1、選擇行與列2、插入行與列（“表格”“插入”“行或列”）3、均分行與列（“表格工具欄”中的“平均分配行高”或“平均分配列寬”）4、刪除行與列（“表格工具欄”中的“刪除單元格”按鈕或“表格”“刪除單元格”命令）【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè) 第三節(jié) 利用框架設(shè)計網(wǎng)頁布局【教學(xué)目的與要求】一、 認(rèn)識框架網(wǎng)頁二、 創(chuàng)建框架網(wǎng)頁三、框架網(wǎng)頁的保存和打開【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：認(rèn)識框架網(wǎng)

7、頁重點知識：創(chuàng)建框架網(wǎng)頁【教學(xué)組織過程】2課時 2課時1上講回顧2教授新知【授課內(nèi)容】一、認(rèn)識框架網(wǎng)頁 1、框架的概念 框架網(wǎng)頁是一種特殊的網(wǎng)頁，它將自身分成幾個區(qū)域，每個區(qū)域稱作一個框架窗口（通常簡稱為框架）框架具有以下特性：每個框架都可以獨立地顯示一個網(wǎng)頁，各個框架窗口之間可以設(shè)立超鏈接。每個框架窗口可以賦予一個名字，以便其他URL作為目標(biāo)調(diào)用。2、框架的使用場合（如郵箱、論壇）通常用框架來顯示在同一個站點中的多個超鏈接，這樣可以不用瀏覽器中的“后退”按鈕而方便的進(jìn)行瀏覽?？蚣芤策m用于類似在線書籍的應(yīng)用，將目錄顯示在左邊的框架中，單擊目錄，右邊框架中顯示相關(guān)的章節(jié)二、創(chuàng)建框架網(wǎng)頁 1、框架

8、網(wǎng)頁的創(chuàng)建“文件”“新建”“網(wǎng)頁”，選擇“框架網(wǎng)頁”選項卡 2、框架網(wǎng)頁模板（10種） “設(shè)置初始網(wǎng)頁”“新建網(wǎng)頁”三、框架網(wǎng)頁的保存和打開框架網(wǎng)頁的保存包括框架網(wǎng)頁自身的保存和框架窗口中網(wǎng)頁的保存。 1、框架網(wǎng)頁的保存“文件”“保存文件”或“框架”“保存網(wǎng)頁” 2、框架網(wǎng)頁的打開 “框架”“在新窗口中打開網(wǎng)頁”4、 框架網(wǎng)頁的屬性 1、框架網(wǎng)頁的屬性 “文件”“屬性”“框架間距”、“顯示邊框”2、框架的屬性 “框架”“框架屬性”五、調(diào)整框架布局 1、調(diào)整框架窗口的大?。ㄓ檬髽?biāo)拖動或在“框架屬性”對話框中調(diào)整） 2、框架的拆分方法一：“框架”“拆分框架”（按行或按列拆分）方法二：用鼠標(biāo)拖動拆分

9、（按Ctrl鍵）3、框架的刪除 “框架”“刪除框架”六、目標(biāo)框架當(dāng)在框架網(wǎng)頁的某一個框架中定義超鏈接時，需要指定被鏈接的網(wǎng)頁顯示在哪一個框架中，即指定超鏈接的目標(biāo)框架。選擇要設(shè)置超鏈接的文字或圖像，“插入”“超鏈接”，單擊“目標(biāo)框架”、“更改目標(biāo)框架”【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第四節(jié) 使用導(dǎo)航欄【教學(xué)目的與要求】一、定義導(dǎo)航結(jié)構(gòu)二、認(rèn)識導(dǎo)航欄屬性三、創(chuàng)建導(dǎo)航欄【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：定義導(dǎo)航結(jié)構(gòu)重點

10、知識：認(rèn)識導(dǎo)航欄屬性【教學(xué)組織過程】2課時2課時1上講回顧2教授新知【授課內(nèi)容】一、定義導(dǎo)航結(jié)構(gòu)在網(wǎng)頁內(nèi)添加導(dǎo)航欄之前，先建立該站點的導(dǎo)航結(jié)構(gòu)“視圖”“導(dǎo)航”按鈕二、認(rèn)識導(dǎo)航欄屬性“插入”“導(dǎo)航欄”按鈕“父層”：創(chuàng)建指向當(dāng)前網(wǎng)頁上一級網(wǎng)頁的超鏈接，并將上一級網(wǎng)頁的標(biāo)題名稱顯示在導(dǎo)航欄內(nèi)。三、創(chuàng)建導(dǎo)航欄（要在瀏覽器中才可看到實際導(dǎo)航欄效果）四、創(chuàng)建共享邊框用創(chuàng)建導(dǎo)航欄的方法只能在一個網(wǎng)頁中創(chuàng)建導(dǎo)航欄，若需要導(dǎo)航欄出現(xiàn)在站點內(nèi)多個網(wǎng)頁的相同位置，則可將導(dǎo)航欄插入網(wǎng)頁的共享邊框內(nèi)。右擊編輯窗口，單擊“共享邊框”命令練習(xí)二、利用框架設(shè)計一個企業(yè)網(wǎng)站的布局要求有如下內(nèi)容：關(guān)于我們、商品展示、在線訂購、網(wǎng)

11、上留言、聯(lián)系我們、產(chǎn)品目錄、友情鏈接等。【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第五節(jié) 網(wǎng)頁布局功能的應(yīng)用【教學(xué)目的與要求】一、 創(chuàng)建布局表格二、 繪制布局表格【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：創(chuàng)建布局表格重點知識：繪制布局表格【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、創(chuàng)建布局表格 1、創(chuàng)建布局表格 打開一個空白網(wǎng)頁，并切換到“設(shè)計”視圖下，單擊“表格”菜單中的“布局表格和單元格”命令，隨后在右側(cè)彈出一個任

12、務(wù)窗口，在該任務(wù)窗口下面程序提供了多種表格布局模板，在此單擊其中需要的模板即可將該模板添加到網(wǎng)頁中。 2.繪制布局表格 如果你對模板中提供的布局表格不太滿意，還可以用手工繪制的方法創(chuàng)建一個布局表格。創(chuàng)建時首先在“新建表格和單元格”項中單擊“繪制布局表格”，隨后將指針移到操作窗口最左端，然后拖動鼠標(biāo)即可繪制表格。 3、設(shè)置表格屬性插入表格后，還需對表格屬性進(jìn)行設(shè)置。在“表格屬性”項中設(shè)置該表格所需的屬性。 提示：在設(shè)置表格時，如果要想覆蓋網(wǎng)頁的默認(rèn)邊距，并讓布局表格跨到文檔窗口的邊緣，可以將表格中的各個邊距的屬性都設(shè)置為0。在設(shè)計框架時經(jīng)常需要調(diào)整某一行或列的屬性，這時可以通過表格中列寬和行高的

13、標(biāo)簽來完成。在操作窗口中單擊布局表格需要調(diào)整的邊框，每一側(cè)都會出現(xiàn)顯示列寬和行高的標(biāo)簽。每個標(biāo)簽都包括一個下拉箭頭，如更改行高度時，單擊此下拉箭頭彈出一個下拉菜單，選擇“更改行高”命令，在彈出的“行屬性”對話框中重新輸入該行高度值即可。練習(xí)三、使用布局功能設(shè)計學(xué)校網(wǎng)站要求包括有以下內(nèi)容：學(xué)校簡介、校園新聞、教育教學(xué)、學(xué)生天地、校園論壇、教師之家等【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第六節(jié) 網(wǎng)頁布局設(shè)計 【教學(xué)目的與要求】一、文本的美化（“格式”“字體”）二、 運用邊框與陰影（“格式”“邊框與陰影”） 1、設(shè)置邊框 2、設(shè)置陰影 【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課

14、堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：文本的美化（“格式”“字體”）重點知識：運用邊框與陰影（“格式”“邊框與陰影”） 1、設(shè)置邊框 2、設(shè)置陰影 【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、文本的美化（“格式”“字體”）1、輸入文本2、美化文本（設(shè)置文本字體、字號） 注：字符的大小共有6級，其中默認(rèn)級別是3。 3、設(shè)置文本效果 4、改變文本顏色 5、設(shè)置字符間距 二、 運用邊框與陰影（“格式”“邊框與陰影”） 1、設(shè)置邊框 2、設(shè)置陰影 三、 使用列表（“格式”“項目符號

15、和編號方式”） 1、添加項目列表 。 項目列表也稱為無序列表，它將在項目前添加標(biāo)志符號?？梢詫D片作為新的項目標(biāo)志。經(jīng)常使用的項目符號有3種：實心黑點、空心圓圈和實心方塊。 2、添加編號列表在網(wǎng)頁中的內(nèi)容存在順序關(guān)系時，可應(yīng)用編號列表。3、添加定義列表定義列表就是在網(wǎng)頁內(nèi)定義詞匯、術(shù)語的列表，具體的定義內(nèi)容將以首行縮進(jìn)的方式出現(xiàn)在列表的下一行。（格式工具欄的“樣式”“定義的術(shù)語”，輸入要詞匯、術(shù)語，按回車鍵）4、設(shè)置嵌套列表要建立組合列表，可以先生成第1級列表，然后再生成第2級列表，依此類推。 建立組合列表的具體操作步驟如下： （1）先生成第1級列表 （2）將光標(biāo)移動到擁有第2級列表的第1級列

16、表項目的末尾，然后按回車鍵。將出現(xiàn)一個空的列表行。（3）單擊“格式工具欄”中的“增加縮進(jìn)”圖標(biāo)。該行變?yōu)橐粋€空白行，是沒有列表編號或項目符號的。再單擊一次“增加縮進(jìn)”圖標(biāo)。 （4）此時再按照建立列表的方法構(gòu)造第2級列表。（5）輸入第2級列表。輸入過程中每次接回車鍵就自動生成第2級列表項目。 （6）第2級列表輸入完畢后，將光標(biāo)移到別的位置或者用鼠標(biāo)在頁面的空白處單擊一下即可完成第2級列表的設(shè)置操作。 嵌套列表可以轉(zhuǎn)變?yōu)榭烧郫B大綱，這樣在瀏覽器中瀏覽時，就可以展開或折疊大綱中的各個級次。生成可折疊大綱的具體操作步驟如下： （l）按生成復(fù)合列表的方法構(gòu)造好這個復(fù)合列表所有的列表級次。（2）選擇“格式

17、”菜單中的“項目符號和編號方式”命令，打開“項目符號和編號方式”對話框，或者在列表中單擊右鍵，從彈出的菜單中選擇“列表屬性”命令。（3）在打開的對話框中，選中“啟用可折疊大綱”復(fù)選框。 （4）單擊“確定”按鈕。練習(xí)四、設(shè)計一個介紹陽江風(fēng)景及特產(chǎn)的網(wǎng)頁要求：設(shè)計一個網(wǎng)頁介紹陽江的風(fēng)景及特產(chǎn)，要用到折疊列表的方式來分別介紹陽東、陽西、陽春等的不同地區(qū)的風(fēng)景名勝及特產(chǎn)?！菊n程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第七節(jié) 網(wǎng)頁裝飾設(shè)計【教學(xué)目的與要求】一、添加圖像二、處理圖像【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師

18、生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：添加圖像重點知識：二、處理圖像【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、添加圖像在瀏覽器中，能處理的圖片格式只有GIF、JPEG格式和PNG格式等少數(shù)幾種圖片。1、GIF格式圖片 GIF格式最多能支持256種顏色（8位顏色）?？梢跃哂型该?、動畫等特殊效果。 2、JPEG格式文件 JPEG格式可以處理高達(dá)1670萬種顏色（24位顏色），所以在需要顯示細(xì)微的變化和使用大量的色彩處理照片時經(jīng)常使用這種格式保存文件。插入本地計算機上的圖像（“插入”“圖片”“來自文件”，“從計算機選擇一個文件”）插入WEB上的圖

19、像（“插入”“圖片”“來自文件”，“從WEB瀏覽器來選擇網(wǎng)頁或文件”）二、處理圖像1、剪裁圖像（“圖片”工具欄“剪裁”按鈕）2、設(shè)置透明背景（“圖片”工具欄“設(shè)置透明色”按鈕）三、添加文本（“圖片”工具欄“文本”按鈕）四、保存圖像注：默認(rèn)情況下，當(dāng)前站點的圖像文件保存在Images文件夾中五、運用特殊效果1、調(diào)整圖片的亮度和對比度2、圖片的翻轉(zhuǎn)與旋轉(zhuǎn)3、圖片的沖蝕和黑白處理4、凹凸效果六、設(shè)置圖片對齊方式（“圖片屬性”“外觀”“布局”“對齊方式”）七、使用水平線水平線是貫穿網(wǎng)頁寬度的細(xì)灰條，用于分隔文本或加著重符。添加水平線后，可以修改其屬性來更改寬度、高度、對齊方式和顏色。如果網(wǎng)頁使用了主題

20、，則會使用圖形來代替水平線以匹配主題。1、插入水平線2、設(shè)置水平線屬性八、 修改網(wǎng)頁背景（“格式”“背景”）1、調(diào)整背景色彩2、調(diào)整背景圖案九、創(chuàng)建交換圖像（DW 2004）1、插入交換圖像（“插入”“圖像對象”“鼠標(biāo)經(jīng)過圖像”）“原始圖像”、“鼠標(biāo)經(jīng)過圖像”、“按下時，前往的URL”2、 預(yù)覽交換圖像：F12【課程小結(jié)】a【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第八節(jié) 創(chuàng)建超鏈接 【教學(xué)目的與要求】一、與當(dāng)前站點的鏈接二、與空白網(wǎng)頁的鏈接三、與電子信箱的鏈接【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生

21、學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：創(chuàng)建熱點重點知識：與電子信箱的鏈接【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、與當(dāng)前站點的鏈接（“插入”“ 超鏈接”，“搜索”當(dāng)前站點的文件夾位置）二、與空白網(wǎng)頁的鏈接（“插入”“ 超鏈接”，“創(chuàng)建一網(wǎng)頁并鏈接到該網(wǎng)頁”）三、與電子信箱的鏈接（“插入”“ 超鏈接”，“制作發(fā)送電子郵件的超鏈接”）四、與Web的鏈接（“插入”“超鏈接”，“使用WEB瀏覽器來選擇網(wǎng)頁或文件”，ALT+TAB，則網(wǎng)頁地址自動添加到URL中）五、修改鏈接顏色（“網(wǎng)頁屬性”“背景”，“顏色”“超鏈接”、“已訪問的超鏈接”、“當(dāng)前超鏈接”） 六、使用

22、圖像地圖1、創(chuàng)建熱點 在圖片中創(chuàng)建熱點的具體操作步驟如下： 選中要建立熱點的圖片。圖片被選中后，四周將出現(xiàn)8個控制方塊，并且“圖片工具欄”被激活。 在“圖片工具欄”中，選擇熱點的形狀的圖標(biāo)?？梢赃x擇長方形、圓形或多邊形。將鼠標(biāo)移動到圖片中。這時，鼠標(biāo)指針變成一支筆的模樣。用鼠標(biāo)左鍵單擊圖片中要建立熱點的區(qū)域并拖動鼠標(biāo)來繪制熱點。盡量讓熱點和圖片上的特征區(qū)域相配合熱點繪制完畢，圖片中將出現(xiàn)該熱點的邊框。打開“插入超鏈接”對話框，建立到熱點上的超鏈接的過程與建立到文本上的超鏈接的過程基本相同。 練習(xí)五、設(shè)計一個介紹一年四季風(fēng)景的網(wǎng)站要求：用到嵌套列表、框架、超鏈接、圖像熱點等技術(shù)?！菊n程小結(jié)】【作

23、業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第九節(jié) 表單設(shè)計【教學(xué)目的與要求】一、 認(rèn)識表單二、 生成表單三、 表單內(nèi)容編輯【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：認(rèn)識表單重點知識： 表單內(nèi)容編輯【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、 認(rèn)識表單表單的作用：表單就是瀏覽者可以在網(wǎng)頁中填寫信息的表格，其作用是接收瀏覽者填寫的信息并將其提交給表單處理程序進(jìn)行處理。二、 生成表單1、表單的創(chuàng)建與表單字段的添加“插入”“表單”2、表單向?qū)?/p>

24、“文件”“新建”“網(wǎng)頁”-“常規(guī)”“表單網(wǎng)頁向?qū)А比?表單內(nèi)容編輯1、單行文本框2、滾動文本框3、復(fù)選框4、單選按鈕5、下拉菜單6、按鈕7、圖片8、標(biāo)簽9、隱藏的表單字段四、驗證性表單字段（“驗證有效性按鈕”）五、 表單處理程序右擊表單，選擇“表單屬性”命令，提供了保存表單數(shù)據(jù)的三種不同處理方式：1、發(fā)送到文件（單擊“選項”按鈕”，進(jìn)行設(shè)置）2、發(fā)送到數(shù)據(jù)庫3、討論表單處理程序4、注冊表單處理程序5、自定義ISAPI、NSAPI、CGI或ASP腳本練習(xí)六：制作表單制作一個注冊信息表單，要求包括下面的內(nèi)容：會員帳號、您的姓名、您的性別、輸入密碼、密碼確認(rèn)、密碼提示問題、密碼提示答案、電子郵件、

25、常用電話、收貨地址、郵政編碼、提交按鈕、重填按鈕【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十節(jié) 層及應(yīng)用（DW 2004）【教學(xué)目的與要求】一、層概述二、創(chuàng)建層【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：層概述重點知識：創(chuàng)建層【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、層概述層（Layer）是一種 HTML 頁面元素，您可以將它定位在頁面上的任意位置。層可以包含文本、圖像或其它 HTML 文檔。層的出現(xiàn)使網(wǎng)頁從二維平面

26、拓展到三維?？梢允鬼撁嫔显剡M(jìn)行重疊和復(fù)雜的布局。 二、創(chuàng)建層方法一：“插入”“布局對象”“層”方法二：“插入”工具欄“布局”“ 描繪層”，按住鼠標(biāo)拖動方法三：“插入”工具欄“布局”，拖動“ 描繪層”按鈕到文檔窗口（按CTRL鍵，可繪制多層）三、 通過拖動周圍的黑色調(diào)整柄控制層的大小四、 拖動層左上角的選擇柄可以移動層的位置。五、 單擊層標(biāo)記可以選中一個層。（顯示層標(biāo)記的方法：“編輯”“首選參數(shù)”“分類”“不可見元素”六、顯示層面板（“窗口”“層”）1、層的隱藏與顯示2、層數(shù)3、層重疊 七、層和表格之間的轉(zhuǎn)換（在轉(zhuǎn)換為表格之前，請確保層沒有重疊。 ）“修改”“轉(zhuǎn)換”“層到表格”若要將表格轉(zhuǎn)換為

27、層，請選擇“修改”“轉(zhuǎn)換”“表格到層” 【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)、第十一節(jié) 行為 【教學(xué)目的與要求】一、行為概述【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：行為概述【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、行為概述行為是一種利用簡單直觀的語句設(shè)置手段，為網(wǎng)頁對象添加一些動態(tài)效果和簡單的交互功能的技術(shù)。行為是事件和由該事件觸發(fā)的動作的組合。 下面給出一些常見事件的一些解釋onClick 單擊onDbcl

28、ick 雙擊onKeypress按鍵onMouseDown鼠標(biāo)按下onMouseOut鼠標(biāo)移出onMouseOver鼠標(biāo)移上onMouseUp鼠標(biāo)抬起。 實例：dreamweaver中網(wǎng)頁折疊菜單的制作第一步：先插入一個一行、兩列的表格，方法：單擊菜單上的“插入” ，再選取“表格” ，在“行”中輸入1，在列中輸入2，在單擊“確定”。把寬和高分別設(shè)為200px和30px 在兩個單元格內(nèi)分別輸入 內(nèi)容第二步，在單元格內(nèi)插入一個層。把寬和高分別設(shè)為100px和90px 第三步：在層中插入一個三行、一列的表格，方法同第一步。并把寬和高分別設(shè)為100px和90px,以填滿這個層。在三個單元格中輸入內(nèi)容

29、在層的屬性欄中將“可視”設(shè)為“隱藏”，這樣在打開網(wǎng)頁時便看不見這個層 在“行為目標(biāo)”中選擇一個合適的瀏覽器，一般是選擇“IE 4.0”。然后單擊左邊的“+”按鈕，來添加行為。在彈出的菜單中選擇“顯示或隱藏層” ， 在彈出的窗口中選擇 “Layer1” ，就是我們剛才添加的那個層了，再單擊“顯示”接著單擊“事件”下面右邊的那個向下箭頭按鈕，在彈出菜單中選擇“當(dāng)鼠標(biāo)移上”（OnMouseOver）。再單擊“+”按鈕，選取“顯示或隱藏層”，還是選取“Layer1”，不過這次我們點擊的是“隱藏”（Hide）了，再確定。然后選擇“事件”，單擊“當(dāng)鼠標(biāo)移開”(OnMouseOut)?！菊n程小結(jié)】【作業(yè)】1

30、5 課后練習(xí)書本課后練習(xí)作業(yè)第十二節(jié) HTML語言基礎(chǔ)【教學(xué)目的與要求】一、HTML語言概述二、HTML文件基本架構(gòu)【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識： HTML語言概述重點知識：HTML文件基本架構(gòu)【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、HTML語言概述當(dāng)我們暢游Internet時，我們透過瀏覽器所看到的網(wǎng)站，是由HTML (HyperText Markup Language) 語言所構(gòu)成。HTML ( 超文件標(biāo)記

31、語言 ) 是一種建立網(wǎng)頁文件的語言，透過標(biāo)記式的指令 (Tag)，將影像、聲音、圖片、文字等連結(jié)顯示出來。 HTML標(biāo)記是由 所括住的指令，主要分為 : 單標(biāo)記指令、雙標(biāo)記指令 ( 由 ，所構(gòu)成 ) 。HTML網(wǎng)頁文件可由任何文本編輯器或網(wǎng)頁專用編輯器編輯，完成后 ( 以 .htm 或 .html 為文件后綴保存 ) 將HTML網(wǎng)頁文件由瀏覽器打開顯示，若測試沒有問題則可以放到服務(wù)器 (Server) 上，對外發(fā)布信息。二、HTML文件基本架構(gòu) 文件開始 標(biāo)頭區(qū)開始 . 標(biāo)題區(qū) 標(biāo)頭區(qū)結(jié)束 本文區(qū)開始 本文區(qū)內(nèi)容 本文區(qū)結(jié)束 說明： 文件結(jié)束 網(wǎng)頁文件格式。 標(biāo)頭區(qū) : 記錄文件基本資料，如作

32、者、編寫時間。 標(biāo)題區(qū) : 文件標(biāo)題須使用在標(biāo)頭區(qū)內(nèi)，可以在瀏覽器最上面看到標(biāo)題。 本文區(qū) : 文件資料，即在瀏覽器上看到的網(wǎng)站內(nèi)容。三、常用字體標(biāo)記 . 標(biāo)題，設(shè)定標(biāo)題字體大小， n = 1 ( 大 ) 6 ( 小 ) 會自動跳下一行。通常用在如章節(jié)、段落等標(biāo)題上。 1、如 : 標(biāo)題 標(biāo)題2、如 : 標(biāo)題 ( 標(biāo)題置中 ) 標(biāo)題3、. 粗體字。 如 : 粗體字 粗體字 4、. 斜體字。 如 : 斜體字 斜體字 5、. 加底線。 如 : 加底線 加底線 6、. 橫線 ( 表示刪除 )。 如 : 橫線 橫線 7、. 打字體 ( 固定寬度文字 )。 如 : 打字體 打字體 8、. 上標(biāo)字。 如 :

33、 字體 上標(biāo)字 字體上標(biāo)字 9、. 下標(biāo)字。 如 : 字體 下標(biāo)字 字體下標(biāo)字 10、 注解 ( 不會顯示在瀏覽器上 )，可以多行。 如 : 四、設(shè)定字體大小、顏色、字型有關(guān)設(shè)定文字的方法共有以下幾種 : 1.設(shè)定HTML文件主體文字顏色。.標(biāo)記。 如 : . 或 . 2.設(shè)定基本字體大小、顏色、字型。.標(biāo)記。 3.設(shè)定字體大小、顏色、字型。.標(biāo)記。 4、. 設(shè)定基本字體，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : 基本字體大小為 4 基本字體大小為 4 如 : 設(shè)定顏色 設(shè)定顏色 如 : 設(shè)定字型 設(shè)定字型 . 基本字體加大。 如 : 基本字體大小為 4， 加大為 5

34、 基本字體大小為 4，加大為 5 . 基本字體減小。 如 : 基本字體大小為 4， 減小為 3 基本字體大小為 4，減小為 3 5、. 設(shè)定字體大小、顏色、字型，SIZE = 1 7，1 ( 最小 ) 7 ( 最大 )。 如 : 字體大小為 4 字體大小為 4 如 : 基本字體大小為 4 +1字體大小為 5 -2字體大小為 2 . 基本字體大小為 4 +1字體大小為 5 -2字體大小為 2 如 : 設(shè)定顏色 設(shè)定顏色 如 : 設(shè)定字型 設(shè)定字型五、常用表格標(biāo)記 . 表格指令。 相關(guān)屬性 : ALIGN 調(diào)整 BGCOLOR 背景顏色 BORDER 邊框 HEIGHT 高度 WIDTH 寬度 .

35、 表格標(biāo)題。 . 表格列 ( 可省略 ) 。 . 表格欄標(biāo)題 ( 表頭 ) 粗體字 ( 可省略 ) 。 COLSPAN 欄寬 ROWSPAN 欄高 . 表格欄資料 ( 儲存格 ) ( 可省略 ) 。 相關(guān)屬性 : ALIGN 調(diào)整 BGCOLOR 背景顏色 HEIGHT 高度 WIDTH 寬度 COLSPAN 欄寬 ROWSPAN 欄高 六、常用區(qū)段標(biāo)記 產(chǎn)生水平線。 如 : 跳下一行。 如 : 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)院， 網(wǎng)上學(xué)電腦的好去處。 . 段落，跳下一行并加一行空白。 ( 可省略 ) 如 : 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦

36、的好去處。 . 置中。 如 : 置中 置中 . 不跳下一行。 如 : 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 太平洋網(wǎng)絡(luò)學(xué)院，網(wǎng)上學(xué)電腦的好去處。 . 以文件原始格式顯示。 如 : 原始格式: 文件 原始格式: 文件 七、常用鏈接標(biāo)記 設(shè)定基本URL位置或路徑，以後只要設(shè)定文件名稱即會自動加上位置或路徑。 相關(guān)屬性 : HREF 鏈接的URL位址或文件 TARGET 指定鏈接到的URL位址或文件顯示于那一個視窗 ( 可和 視窗標(biāo)記配合使用或開新的視窗 ) 如 : . 鏈接指令。 相關(guān)屬性 : HREF 鏈接的URL位址或文件 NAME 名稱 TARGET 指定鏈接到的URL位址或文件顯示于那一個

37、視窗 ( 可和 視窗標(biāo)記配合使用或開新的視窗 ) 如 : 外部鏈接 設(shè)定十秒回到首頁。 ( 若不設(shè)定HTML文件位置則再載入原HTML文件 ) 設(shè)定鏈接、未鏈接部份顏色 設(shè)定鏈接、未鏈接部份顏色，用.標(biāo)記。 相關(guān)屬性 : ALINK按下鏈接部份未放開時顏色 LINK未看過的鏈接部份顏色 VLINK已看過的鏈接部份顏色 如 : 八、框架窗口常用標(biāo)記 . 定義分割窗口。 相關(guān)屬性 : BORDER 邊框 COLS 行 , 設(shè)定分割左右窗口寬度 ( 用,分隔，可設(shè)百分比 % ;*表示剩余部份 ) FRAMEBORDER 顯示邊框 ROWS 列 , 設(shè)定分割上下窗口高度 ( 用,分隔，可設(shè)百分比 %

38、;*表示剩余部份 ) FRAME 定義窗口。 相關(guān)屬性 : FRAMEBORDER 顯示邊框 NAME 名稱 NORESIZE 設(shè)定是否可以調(diào)整窗口大小 SRC 文件或URL位址 SCROLLING 設(shè)定是否可以卷動 NOFRAMES. 無支援分割窗口瀏覽器顯示文字。 IFRAME. 插入浮動窗口。 相關(guān)屬性 : BORDER 邊框 FRAMEBORDER 顯示邊框 NORESIZE 設(shè)定是否可以調(diào)整窗口大小 SRC 文件或URL位址 SCROLLING 設(shè)定是否可以卷動 舉例 如 : 浮動窗口 九、設(shè)定圖片的方法共有以下幾種 : 設(shè)定HTML文件背景圖片、背景顏色。.標(biāo)記。 如 : . 或

39、. 設(shè)定圖片。標(biāo)記。 3、設(shè)定地圖。.標(biāo)記。 常用圖片標(biāo)記 指令 相關(guān)屬性 : ALIGN 調(diào)整 ALT 提示字 BORDER 邊框 HEIGHT 高度 SRC 文件或URL位址 USEMAP 地圖名稱 WIDTH 寬度 如 : 可插入圖片 ( GIF、JPG格式 )、AVI電影 . 地圖 相關(guān)屬性 : NAME 名稱 設(shè)定地圖動作區(qū)域 相關(guān)屬性 : COORDS 設(shè)定動作區(qū)域座標(biāo) ( 左上角座標(biāo) : X1,Y1 ; 右下角座標(biāo) : X2,Y2 ) HREF 動作區(qū)域連結(jié)點 ( 可載入位址或文件 ) NOHREF 動作區(qū)域連結(jié)點不動作 SHAPE 外型 十、常用音樂標(biāo)記 背景音樂、音效。 相關(guān)

40、屬性 : LOOP 循環(huán) , 背景音樂播放次數(shù) SRC 文件或URL位址 (可為WAV、MIDI格式 ) 如 : 內(nèi)嵌音樂插件 . 內(nèi)嵌插件。 相關(guān)屬性 : HEIGHT 高度 WIDTH 寬度 ( 可設(shè)百分比% ) SRC 設(shè)定內(nèi)嵌物件的 URL 位址 LOOP 循環(huán) , 背景音樂播放次數(shù) AUTOSTART 自動播放 如 : 十一、【文字卷動標(biāo)記】 . 文字卷動 ( 滾動條 )?！鞠嚓P(guān)屬性】 BEHAVIOR = 設(shè)定卷動方式 - ALTERNATE 交替來回卷動 - SCROLL 卷動 ( 預(yù)設(shè) ) - SLIDE 滑動 BGCOLOR = color 背景顏色 DIRECTION =

41、設(shè)定卷動方向 HEIGHT = n 高度 LOOP = n 循環(huán) , 卷動次數(shù) ( 預(yù)設(shè)循環(huán) ) SCROLLAMOUNT = n 設(shè)定卷動距離 SCROLLDELAY = milliseconds 設(shè)定卷動時間 TRUESPEED = milliseconds 設(shè)定卷動速度 WIDTH = n 寬度 ( 可設(shè)百分比% ) 【舉例】 例一 : 太平洋網(wǎng)絡(luò)學(xué)院 如 : 太平洋網(wǎng)絡(luò)學(xué)院【課程小結(jié)】【作業(yè)】15 課后練習(xí)書本課后練習(xí)作業(yè)第十三節(jié) 使用CSS樣式【教學(xué)目的與要求】一、CSS概述二、創(chuàng)建一個新的CSS樣式【教學(xué)方法與手段】多媒體教學(xué)：借助多媒體手段，進(jìn)行課堂理論教學(xué)；啟發(fā)式教學(xué)：教學(xué)活動

42、關(guān)注的重點從結(jié)果轉(zhuǎn)向過程。激發(fā)思維，師生互動，增強學(xué)生學(xué)習(xí)的主動性、積極性和創(chuàng)造性；【教學(xué)重點與難點】：基礎(chǔ)知識：CSS概述重點知識：創(chuàng)建一個新的CSS樣式【教學(xué)組織過程】2課時1上講回顧2教授新知【授課內(nèi)容】一、CSS概述CSS（Cascading Stylesheets，層疊樣式表）是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁設(shè)計必不可少的工具之一。使用CSS能夠簡化網(wǎng)頁的格式代碼，加快下載顯示的速度，也減少了需要上傳的代碼數(shù)量，大大減少了重復(fù)勞動的工作量。CSS樣式有以下幾個重要的作用：1、將格式與結(jié)構(gòu)分離2、增強控制頁面布局的能力3、簡化代碼，提高下載速度4、使維護(hù)

43、和更新網(wǎng)頁變得更加容易5、代碼兼容性更好B二、創(chuàng)建一個新的CSS樣式1、顯示“CSS樣式”面板（“窗口”“CSS樣式”）“附加CSS樣式”按鈕、“新建CSS樣式”、“編輯CSS樣式”按鈕、“刪除CSS樣式”2、創(chuàng)建自定義CSS樣式（在“CSS樣式”面板中選擇“新建CSS樣式”按鈕）類（可應(yīng)用于任何標(biāo)簽）輸入名稱：（加“.”）定義在：新建樣式表文件、僅對該文檔標(biāo)簽（重新定義特定標(biāo)簽的外觀）標(biāo)簽：（選擇標(biāo)簽）選擇類型定義在：高級（ID、上下文選擇器等）a:link：定義正常狀態(tài)下鏈接文字的樣式a:visited：定義已訪問過的鏈接文字的樣式a:hover：定義鼠標(biāo)指針移到鏈接文字時文字的樣式a:a

44、ctive：定義按下鼠標(biāo)左鍵時鏈接文字的樣式三、設(shè)置CSS樣式格式1、編輯CSS樣式文字格式字體、大小、粗細(xì)、樣式、變量、行高、大小寫、修飾、顏色2、編輯CSS樣式背景格式背景顏色、背景圖像、重復(fù)、附件、水平位置、垂直位置3、編輯CSS樣式塊格式單詞間距、字母間距、垂直對齊、文本對齊、文字縮進(jìn)、空格、顯示4、編輯CSS樣式框格式寬、高、浮動、清除、填充、邊界5、編輯CSS樣式邊框格式樣式、寬度、顏色6、編輯CSS樣式列表格式類型、項目符號圖像、位置7、編輯CSS樣式定位格式類型、顯示、寬、高、Z軸、溢出、定位、剪輯編輯CSS樣式擴展格式分頁、視覺效果四、應(yīng)用CSS樣式 添加層疊樣式表的方法我們

45、為網(wǎng)頁添加樣式表的方法有四種。1最簡單的方法是直接添加在HTML的標(biāo)識符（tag）里：網(wǎng)頁內(nèi)容舉個例子：CSS實例代碼說明：用藍(lán)色顯示字體大小為10pt的“CSS實例”。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因為這樣添加無法完全發(fā)揮樣式表的優(yōu)勢“內(nèi)容結(jié)構(gòu)和格式控制分別保存”。2添加在HTML的頭信息標(biāo)識符里：type=”text/css”表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示我們設(shè)置的樣式表。但為了保證上述情況一定不要發(fā)生，還是有必要在樣式表里加上注釋標(biāo)識符“”。3鏈接樣式表同樣是添加在HTML的頭信息標(biāo)識符里：*.css是單獨保存的樣式表文件，其中不能包含標(biāo)識符，并且只能以css為后綴。Media是可選的屬性，表示使用樣式表的網(wǎng)頁將用什么媒體輸出4聯(lián)合使用樣式表同樣是添加在HTML的頭信息標(biāo)識符里：以import開頭的聯(lián)合樣式表輸入方法和鏈接樣式表的方法很相似，但聯(lián)合樣式表輸入方式更有優(yōu)勢。因為聯(lián)合法可以在鏈接外部樣式表的同時，針對該網(wǎng)頁的具體情況，做出別的網(wǎng)頁不需要的樣式規(guī)則。需要注意的是：聯(lián)合法輸入樣式表必須以i