1、dreamweaver8網(wǎng)頁設(shè)計(jì)課程教 案教師姓名 劉丹丹 所在系別 軟件學(xué)院 授課專業(yè) 軟件技術(shù)專業(yè) 總 學(xué) 時(shí) 68 學(xué)分 4 教材名稱 dreamweaver8網(wǎng)頁設(shè)計(jì)案例實(shí)訓(xùn)教程目 錄第一章 遨游DREAMWEAVER8精彩世界3第二章 創(chuàng)建與規(guī)劃站點(diǎn)5第三章 文本及其格式化13第四章 表格17第五章 圖像21第六章 框架25第七章 頁面布局視圖的使用29第八章 鏈接33第九章 層與時(shí)間軸37第十章 表單41第十一章 行為44第十二章 制作動(dòng)態(tài)頁面48第十三章 代碼片斷、庫項(xiàng)目和模板52第十四章 網(wǎng)頁的制作56第十五章 網(wǎng)站的測(cè)試與上傳60第十六章使用FIREWORKS 8處理網(wǎng)頁圖像

2、63第一章 遨游Dreamweaver8精彩世界課題：Dreamweaver8簡(jiǎn)介及創(chuàng)建文檔一、教學(xué)基本內(nèi)容1、Dreamweaver8 的工作界面2、建立html文檔二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：熟悉Dreamweaver8工作界面中各個(gè)工具的作用難點(diǎn)：1、各個(gè)面板的調(diào)用2、建立一個(gè)HTML的網(wǎng)頁3、插處圖像五、教學(xué)目的1 、對(duì)Dreamweaver這個(gè)制作網(wǎng)頁的工具及網(wǎng)頁有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的興趣2、一定要學(xué)會(huì)建立一個(gè)空白網(wǎng)頁3、會(huì)對(duì)頁面有一個(gè)簡(jiǎn)單的設(shè)置六、教學(xué)過程1、引入（1）為什么要用Dreamweaver而不用Frontpage?Dreamw

3、eaver是Macromedia公司的出品，它以程序小、運(yùn)行速度快、所制作網(wǎng)頁代碼少這些優(yōu)點(diǎn)，贏得了網(wǎng)頁制作人員的喜愛。（2）相關(guān)工具的介紹因?yàn)檫@是第一節(jié)網(wǎng)頁制作課，所以首先要簡(jiǎn)單介紹下制作網(wǎng)頁的一些相關(guān)工具，比如與Dreamweaver合稱為網(wǎng)頁三劍客的Flash和Fireworks。 2、講授新課（1） Dreamweaver的界面      a文檔窗口：主菜單、工具欄、底部啟動(dòng)條、文檔編輯區(qū)        b對(duì)象面板：標(biāo)準(zhǔn)、表格、表單、框架、特殊、文件廷冖隱藏、字符     c啟

4、動(dòng)面板：站點(diǎn)管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資源管理      d屬性面板：隨目前對(duì)象不同而內(nèi)容不同(2)創(chuàng)建HTML網(wǎng)頁(3)在網(wǎng)頁中插入圖像輸入文字以后，插入圖像，并對(duì)圖像設(shè)置對(duì)齊的方式，使之與文字呈混排的狀態(tài)。3、鞏固練習(xí)練習(xí)使用界面中的各個(gè)工具七、作業(yè)處理根據(jù)本節(jié)所學(xué)的內(nèi)容，課堂上練習(xí)創(chuàng)建一個(gè)空白網(wǎng)頁，并且輸入一段文字，在文本的左邊插入一張圖片八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第二章 創(chuàng)建與規(guī)劃站點(diǎn)課題：規(guī)劃站點(diǎn)及創(chuàng)建靜態(tài)站點(diǎn)一、教學(xué)基本內(nèi)容1、站點(diǎn)規(guī)劃概念2、站點(diǎn)規(guī)

5、劃的方法3、站點(diǎn)的組成4、定義站點(diǎn)二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、站點(diǎn)組成2、如何創(chuàng)建靜態(tài)站點(diǎn)難點(diǎn)：1、站點(diǎn)的定義 2、編輯、刪除站點(diǎn)五、教學(xué)目的 1、掌握建立靜態(tài)站點(diǎn)的流程 2、掌握靜態(tài)站點(diǎn)的基本操作六、教學(xué)過程 1、復(fù)習(xí)引入由上節(jié)所學(xué)習(xí)的建立HTML網(wǎng)頁引出站點(diǎn)概念 2、講授新課 （1）站點(diǎn)規(guī)劃概念及方法概念：所謂本地站點(diǎn)，就是指定本地硬盤中存放遠(yuǎn)程站點(diǎn)所有文檔的文件夾方法：規(guī)劃網(wǎng)站一般需要從3個(gè)方面去思考，即網(wǎng)站的主題、網(wǎng)站的內(nèi)容和網(wǎng)站的對(duì)象。（2）創(chuàng)建本地站點(diǎn)站點(diǎn)組成：Dreamweaver 8站點(diǎn)由3部分組成，具體內(nèi)容取決于環(huán)境和所開發(fā)的Web站點(diǎn)類型。

6、包括本地文件夾、遠(yuǎn)程文件夾、動(dòng)態(tài)頁文件夾定義站點(diǎn)：（01）選擇“站點(diǎn)”|“新建站點(diǎn)”選項(xiàng)，或者選擇“站點(diǎn)”“管理站點(diǎn)”選項(xiàng)，在彈出的“站點(diǎn)管理”對(duì)話框中單擊“新建”按鈕，彈出對(duì)話框，在“基本”選項(xiàng)卡的站點(diǎn)名稱輸入框中輸入所要?jiǎng)?chuàng)建站點(diǎn)的名稱，如圖2-5所示（02）輸入站點(diǎn)名稱后，單擊“下一步”按鈕，在彈出的是否使用服務(wù)器技術(shù)對(duì)話框中，根據(jù)自己所制作網(wǎng)頁的類型，確定是否使用服務(wù)器技術(shù)。在此制作靜態(tài)頁面，因此不使用服務(wù)器技術(shù)，如圖2-6所示。（03）單擊“下一步”按鈕，在彈出的設(shè)置站點(diǎn)文件夾對(duì)話框中，選擇或輸入一個(gè)本地文件夾作為“本地站點(diǎn)文件夾”，如圖2-7所示。（04）選擇了本地站點(diǎn)文件夾后，單擊

7、該對(duì)話框中的“下一步”按鈕，進(jìn)入設(shè)置是否與遠(yuǎn)程服務(wù)器相連的對(duì)話框，在這里選擇“無”，設(shè)置為不與遠(yuǎn)程服務(wù)器相連，如圖2-9所示。（05）單擊“下一步”按鈕，便會(huì)顯示在站點(diǎn)定義向?qū)е兴x擇設(shè)置的詳細(xì)報(bào)告，如果感覺滿意，單擊“完成”按鈕，完成本網(wǎng)站的創(chuàng)建，如圖2-10所示；否則單擊“上一步”按鈕重新修改各項(xiàng)設(shè)置。（3）站點(diǎn)的基本操作其基本操作包括編輯、復(fù)制、刪除站點(diǎn)。3、鞏固練習(xí)練習(xí)站點(diǎn)的建立，及其基本操作。七、作業(yè)處理在課堂上要求每一個(gè)同學(xué)在F盤下建立一個(gè)名為“我的站點(diǎn)”的文件夾，在dreamweaver中創(chuàng)建一個(gè)靜態(tài)站點(diǎn)，將站點(diǎn)信息存放到我的站點(diǎn)文件夾中。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所

8、要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：搭建動(dòng)態(tài)網(wǎng)站服務(wù)器及創(chuàng)建動(dòng)態(tài)站點(diǎn)一、教學(xué)基本內(nèi)容1、安裝IIS2、動(dòng)態(tài)站點(diǎn)與靜態(tài)站點(diǎn)的區(qū)別3、搭建動(dòng)態(tài)站點(diǎn)二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：動(dòng)態(tài)站點(diǎn)與靜態(tài)站點(diǎn)的區(qū)別難點(diǎn)：1、虛擬目錄的概念2、動(dòng)態(tài)站點(diǎn)的定義3、站點(diǎn)測(cè)試五、教學(xué)目的1、學(xué)會(huì)安裝IIS，知道IIS的作用2、學(xué)會(huì)創(chuàng)建虛擬目錄3、會(huì)創(chuàng)建動(dòng)態(tài)站點(diǎn)六、教學(xué)過程1、引入先提出靜態(tài)站點(diǎn)的作用及限制性，引入動(dòng)態(tài)站點(diǎn)的功能2、講授新課（1）安裝并啟動(dòng)IIS（現(xiàn)場(chǎng)操作）（2）定義一個(gè)動(dòng)態(tài)站點(diǎn)步驟：<01>設(shè)置虛擬目錄。（1）在本地磁盤“C:”下新建一

9、個(gè)site文件夾作為本地站點(diǎn)的根文件夾。（2）設(shè)置web共享。找到“C:site”文件夾，選中并右擊該文件夾，從彈出的快捷菜單中選擇“共享和安全”選項(xiàng)。在打開的“site屬性”對(duì)話框中，選擇“Web共享”選項(xiàng)卡，如圖2-19所示（3）設(shè)置“編輯別名”對(duì)話框。選中“共享文件夾”單選按鈕，在彈出的“編輯別名”對(duì)話框中將“別名”設(shè)置為site；在“訪問權(quán)限”中選擇“讀取”；在“應(yīng)用程序權(quán)限”中選擇“腳本”，如圖2-20所示。最后單擊“確定”按鈕關(guān)閉對(duì)話框，便完成了定義動(dòng)態(tài)站點(diǎn)的準(zhǔn)備工作。<02>進(jìn)入“高級(jí)”選項(xiàng)卡。（1）選擇“站點(diǎn)”|“新建站點(diǎn)”選項(xiàng)，選擇“站點(diǎn)定義”對(duì)話框中的“高級(jí)”選

10、項(xiàng)卡。（2）從“分類”列表框中選擇“本地信息”（默認(rèn)選項(xiàng)）選項(xiàng)，如圖2-21所示。<03>設(shè)置“本地信息”的各參數(shù)（見圖2-22<04>設(shè)置“測(cè)試服務(wù)器”的各參數(shù)（見圖2-23）。<05>顯示結(jié)果。（3）測(cè)試站點(diǎn)<01>將ch02 test.asp文件復(fù)制到C:site文件夾中，并使用Dreamweaver 8 打開test.asp。<02>單擊瀏覽器中“預(yù)覽/調(diào)試” 按鈕，或者按F12鍵在瀏覽器中運(yùn)行test.asp頁面。出現(xiàn)如圖2-25所示的成功頁面。若瀏覽器提示找不到服務(wù)器，則需重新搭建ASP服務(wù)器。3、鞏固練習(xí)練習(xí)站點(diǎn)的建立，

11、及其基本操作。七、作業(yè)處理在課堂上要求每一個(gè)同學(xué)在F盤下建立一個(gè)名為”我的動(dòng)態(tài)站點(diǎn)”的文件夾，將其設(shè)置為虛擬目錄，在dreamweaver中創(chuàng)建一個(gè)動(dòng)態(tài)站點(diǎn)，將站點(diǎn)信息存放到我的動(dòng)態(tài)站點(diǎn)文件夾中。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第三章 文本及其格式化課題：輸入文本及其格式化一、教學(xué)基本內(nèi)容1、輸入普通文本2、插入符號(hào)、日期3、使用項(xiàng)目列表二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、插入符號(hào)、空格和日期 2、使用項(xiàng)目列表難點(diǎn)：1、項(xiàng)目列表五、教學(xué)目的1、掌握文本輸入方法2、掌握日期的插入3、掌握項(xiàng)目列表的使用六、

12、教學(xué)過程1、引入首先例用一個(gè)已完成的網(wǎng)頁，讓學(xué)生來看別人的設(shè)置，由此引入文本的格式化。2、講授新課（1）文本的輸入兩種方法：a:直接在文檔窗口中輸入文本。即先選擇要插入文本的位置，然后直接輸入文本。b:在其他編輯器中復(fù)制已經(jīng)生成的文本，然后切換到Dreamweaver 8文檔窗口中，將選取插入點(diǎn)，然后選擇“編輯”|“粘貼”選項(xiàng)。（2）創(chuàng)建項(xiàng)目列表類型：無序列表、有序列表、定義列表、目錄列表和菜單列表。（3）插入日期3、鞏固練習(xí)練習(xí)各種項(xiàng)目列表的使用七、作業(yè)處理要求每一個(gè)同學(xué)建立一個(gè)名為“我的網(wǎng)頁”的空白文檔，在網(wǎng)頁中輸入文字，然后在右下角插入日期，在內(nèi)容當(dāng)中便用有序列表。八、教具所用的教室為多

13、媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：CSS樣式一、教學(xué)基本內(nèi)容1 、演示并講解 CSS 的應(yīng)用 2 、 CSS 的基本概念 3 、 CSS 的特點(diǎn) 4 、 CSS 樣式定義 5 、 CSS 常用屬性與值二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、掌握 CSS 樣式定義 2、掌握 CSS 常用屬性與值 難點(diǎn)：1、掌握 CSS 樣式定義 2、CSS 常用屬性與值 3、能獨(dú)立完成 CSS 樣式的應(yīng)用五、教學(xué)目的1 、掌握 CSS 的基本概念 2 、掌握 CSS 樣式定義 3 、掌握 CSS 常用屬性與值六、教學(xué)過程向?qū)W生演示多個(gè)項(xiàng)目：成

14、品站點(diǎn)，分階段演示和分析此網(wǎng)頁的設(shè)計(jì)流程和過程，在每個(gè)階段演示完畢后，讓學(xué)生對(duì)此階段進(jìn)行鞏固。講解完畢后學(xué)生完成課后作業(yè)，教師實(shí)施指導(dǎo)。第一步：演示并講解用 CSS 樣式制作的網(wǎng)頁。第二步：分步演示并講解 CSS 樣式的基本概念。 第三步：講解并分析 CSS 常用屬性與值。第四步：結(jié)合 CSS 樣式的使用制作網(wǎng)頁第四步：課程小結(jié)。七、作業(yè)處理課堂上進(jìn)行計(jì)論：第一步：演示并講解用 CSS 樣式制作的網(wǎng)頁。 第二步：分步演示并講解 CSS 樣式的基本概念。 第三步：講解并分析 CSS 的知識(shí)點(diǎn)。 第四步：結(jié)合 CSS 樣式的使用制作網(wǎng)頁 第四步：課程小結(jié)。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要

15、板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第四章 表格課題：表格創(chuàng)建及設(shè)置一、教學(xué)基本內(nèi)容1 、創(chuàng)建表格2 、 添加表格對(duì)象 3 、自動(dòng)套用表格格式二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、創(chuàng)建表格 2、自動(dòng)套用表格格式難點(diǎn)：套用表格格式五、教學(xué)目的1 、掌握創(chuàng)建表格的基本方法 2 、會(huì)使用自動(dòng)套用表格格式六、教學(xué)過程1、引入網(wǎng)頁需要進(jìn)行排版，由報(bào)紙的排版引入網(wǎng)頁的排版，由此提出表格的作用2、講授新課（1）創(chuàng)建表格步驟：<01>將光標(biāo)停放在頁面需要?jiǎng)?chuàng)建表格的位置。<02>如果未打開“插入”工具欄，可以在文檔窗口單擊按鈕。如果在文檔窗口中

16、找不到該按鈕，可使用Ctrl+F2快捷鍵切換“插入”工具欄的顯示或隱藏狀態(tài)，<03>在“常用”標(biāo)簽中，單擊“表格”按鈕 <04>彈出“表格”對(duì)話框輸入要插入表格的行數(shù)，在此輸入2。列數(shù) 輸入要插入表格的列數(shù)，在此輸入3<05>單擊“確定”按鈕(2)套用表格格式3、鞏固練習(xí)創(chuàng)建一個(gè)表格，練習(xí)格式的套用。七、作業(yè)處理在課堂上創(chuàng)建一個(gè)五行四列的表格，要求邊框?yàn)?，寬150，高254的表格。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：表格的應(yīng)用一、教學(xué)基本內(nèi)容1、設(shè)置單元格2、表格的基本操作二、課型：新授課

17、三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：表格的編輯難點(diǎn)：排序表格五、教學(xué)目的1 、掌握表格的基本操作2 、能夠熟練設(shè)置單元格格式六、教學(xué)過程1、引入        （1）文字的定位：空格、回車        （2） 圖片的定位：垂直邊距、水平邊距2、 表格    插入表格：插入（Insert）表格（table），或者在對(duì)象面板  行數(shù)（row）       列數(shù)（column）     邊距（c

18、ell padding）：?jiǎn)卧裰械膬?nèi)容與單元格邊框之間的距離     間距（cell spacing）：?jiǎn)卧裰g的距離   寬度（width）：可以是像素（pixel）或百分比為單位（percent）     邊框（boder）：    屬性面板：只有在選定整個(gè)表格時(shí)才出現(xiàn)表格屬性    在表格中也可以通過右擊，調(diào)出的快捷菜單中選擇表格來對(duì)表格進(jìn)行設(shè)置清除行高和列寬按鈕      改變列寬單位按鈕      背景

19、顏色：    邊框顏色：設(shè)置整個(gè)表格的格線顏色  背景圖像： 3、 表格所對(duì)應(yīng)的HTML代碼        表格：table/table        行：tr/tr        列：td/td  4、 表格的編輯（1） 表格的嵌套（2） 在網(wǎng)頁中，要進(jìn)行復(fù)雜的定位，一般需要用到嵌套表格。不過，一般不超過三層。        （2） 復(fù)制剪切粘貼（3） 插

20、入行、列，刪除行列（4） 合并單元格，拆分單元格（5） 改變行、列、表格的大小：拖放，屬性面板精確定義（6） 表格模板：命令（command）格式化表格（format table）七、作業(yè)處理根據(jù)課本上的實(shí)訓(xùn)作出一個(gè)精美課程表網(wǎng)頁  八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第五章 圖像課題：圖像插入及屬性設(shè)置一、教學(xué)基本內(nèi)容1、圖像的類型2、插入鼠標(biāo)經(jīng)過圖像二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：插入圖像難點(diǎn)：圖像屬性五、教學(xué)目的1 、掌握?qǐng)D像的插入方法2 、掌握?qǐng)D像屬性設(shè)置六、教學(xué)過程1、引入網(wǎng)頁的頁面背景

21、顏色和文本顏色在HTML代碼中是如何表示的？  RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強(qiáng) 一共可以表示：256256256=16777216種顏色 由于瀏覽器的關(guān)系，只有216種顏色能在瀏覽器中正常顯示，多于這個(gè)范圍的顏色，有的瀏覽器顯示時(shí)就可能發(fā)生偏差，不能正常顯示。 這個(gè)范圍我們稱之為網(wǎng)頁安全顏色范疇 網(wǎng)頁中運(yùn)用顏色原則 ：切忌采用過；背景顏色不要太深；要保持整個(gè)網(wǎng)頁的色調(diào)統(tǒng)一； 要圍繞網(wǎng)頁主題選擇顏色2、講授新課（1）網(wǎng)頁中的圖像格式 *BMP：位圖格式 GIF：Graphics Interchange Format可交換的圖像格式

22、特點(diǎn)：只支持256種顏色支持透明效果、可以交錯(cuò)下載、可以實(shí)現(xiàn)動(dòng)畫效果、文件所占用空間小、不能支持漸變色彩、更改圖片大小要從原文件改起 JPEG：Joint Photographic Experts Group聯(lián)合攝影專家組文件格式 特點(diǎn)：支持24位圖像、有損壓縮。（2）插入圖像3、鞏固練習(xí)練習(xí)設(shè)置圖像的屬性。七、作業(yè)處理在表格中插入一張背景圖像。  八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：制作地圖網(wǎng)頁及電子相冊(cè)一、教學(xué)基本內(nèi)容1、制作地圖網(wǎng)頁2、電子相冊(cè)二、課型：實(shí)驗(yàn)課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：制作地圖網(wǎng)

23、頁難點(diǎn)：熱點(diǎn)選擇五、教學(xué)目的1 、掌握?qǐng)D像使用2 、掌握?qǐng)D像的其它操作六、教學(xué)過程此節(jié)是實(shí)驗(yàn)課，實(shí)驗(yàn)步驟為：（01）啟動(dòng)Dreamweaver 8，打開ch05SAMPLE01MAP.ASP文件。（02）選中該文檔中“絲綢之路示意圖”圖像。（03）在菜單欄中依次選擇“窗口”|“屬性”選項(xiàng)或按下Ctrl+F3組合鍵，打開“屬性”面板，如果沒有顯示圖像地圖制作工具，單擊“屬性”面板右下角的擴(kuò)展箭頭， （04）在“屬性”面板中的“地圖”文本框中輸入圖像地圖名稱。（05）創(chuàng)建圖像地圖（熱區(qū)），可根據(jù)地圖中不同的形狀選擇不同的熱區(qū)工具，在所選定圖像上拖動(dòng)鼠標(biāo)指針，便可完成圖像地圖的創(chuàng)建。（06）圖像地圖

24、創(chuàng)建完成后，選中所創(chuàng)建的熱區(qū)，打開“屬性”面板。在熱點(diǎn)“屬性”面板的“鏈接”文本框中輸入鏈接文件的名稱，或者單擊文件夾圖標(biāo)并通過瀏覽選擇在用戶單擊該熱點(diǎn)時(shí)要打開的文件。在“目標(biāo)”下拉列表中，選擇用于打開該文件的窗口。（07）在“地中海”創(chuàng)建一個(gè)矩形熱區(qū)，在“替換”框中輸入“關(guān)于地中海的論述”替代文本，并設(shè)置好鏈接（鏈接到DZH.ASP）。（08）按照相同的方法分別為不同的路線或地名創(chuàng)建熱區(qū)，并輸入不同的鏈接和替代文字，保存并預(yù)覽。當(dāng)鼠標(biāo)指針移到圖像地圖中時(shí)將顯示“替換”框中的內(nèi)容，如果設(shè)置有鏈接，單擊便可進(jìn)入所鏈接的文檔。（9）完成創(chuàng)建。第六章 框架課題：框架集的創(chuàng)建及其基本操作一、教學(xué)基本內(nèi)

25、容1 、演示并講解用框架制作的網(wǎng)頁 2 、框架的基本結(jié)構(gòu) 3 、框架的各種屬性 4 、框架結(jié)構(gòu)之間的鏈接二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、框架的各種屬性 2、框架結(jié)構(gòu)之間的鏈接 難點(diǎn)：1、框架的各種屬性 2、框架結(jié)構(gòu)之間的鏈接五、教學(xué)目的1 、掌握框架的基本結(jié)構(gòu) 2 、掌握框架的各種屬性 3 、掌握框架結(jié)構(gòu)之間的鏈接六、教學(xué)過程1、復(fù)習(xí)引入       回憶：Frontpage中的框架應(yīng)用  2、框架的應(yīng)用       重復(fù)出現(xiàn)在不同網(wǎng)頁文檔中的元素：網(wǎng)頁標(biāo)題、導(dǎo)航欄等等

26、60;      3、建立框架（1） 將對(duì)象面板切換到框架頁（Frame）（2）插入不同的框架，一個(gè)區(qū)域?qū)?yīng)于一個(gè)頁面 （3）在框架中打開原有網(wǎng)頁：文件（File）à在框架中打開（Open in Frame）   4、保存框架       （1） 選擇文件（File）/保存所有框架（Save Frameset），先保存框架文件，接著會(huì)出現(xiàn)提示，逐個(gè)保存框架中的網(wǎng)頁（2）  保存時(shí)注意名稱5、框架編輯框架面板：窗口（Windows）à其它（Other）à框架

27、（Frame）調(diào)出框架面板選定框架組：?jiǎn)螕粽麄€(gè)框架組的邊框；或在框架面板中單擊整個(gè)框架的邊框框架屬性：名稱、源文件，滾動(dòng)否，是否可以調(diào)整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等拆分框架：按Alt鍵，拖動(dòng)邊框；修改（Modify）à框架頁（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）        *注意區(qū)別：插入一個(gè)新的框架與拆分框架的區(qū)別 6、  框架所對(duì)應(yīng)的HTML代碼   框架組：  通過

28、設(shè)置rows或cols來設(shè)定是橫的還是豎的，是頂部還是底部   框架組屬性：frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距框架項(xiàng)：   框架屬性：src指向的頁面，name框架名，scrolling是否有滾動(dòng)條，noresize不能由用戶改變大小     七、作業(yè)處理1、建立框架頁面如圖，菜單鏈接到不同的圖片，單擊菜單中的一項(xiàng)，圖片在右邊的框架中打開 2、 建立左右型的框架，并在其中的左框架中插入上下型的框架3、建立左右型框架，并將左邊的框架拆分為上下型

29、 八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：創(chuàng)建電子圖書一、教學(xué)基本內(nèi)容利用框架制作電子圖書網(wǎng)頁 二、課型：實(shí)驗(yàn)課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：框架結(jié)構(gòu)之間的鏈接 難點(diǎn)： 框架集五、教學(xué)目的1 、掌握框架的運(yùn)用 2 、掌握框架結(jié)構(gòu)之間的鏈接六、教學(xué)過程步驟：（01）打開或新建一個(gè)空白的文檔，在該文檔中創(chuàng)建一個(gè) 框架集。（02）命名框架。將左列框架命名為index、右列上部框架命名為_top、右列下部框架命名為main。（03）保存框架。將框架集保存為06A.asp文檔，index框架保存為06B.asp文檔，_

30、top框架保存為06C.asp文檔，main框架保存為06D.asp，文檔均保存在ch06文件夾下。（04）設(shè)置框架的行或列。將index框架的列設(shè)置為150像素，_top框架的行設(shè)置為90像素。（05）設(shè)置頁面的配色方案。單擊“屬性”面板中的“頁面屬性”按鈕，將index框架的06B.asp文檔的文本顏色設(shè)置為#669966，背景顏色設(shè)置為#FFCC99。（06）將鏈接顏色按圖6-14右側(cè)圖進(jìn)行設(shè)置，然后單擊“確定”按鈕。（07）定義樣式。選擇“文本”|“CSS樣式”|“新建”選項(xiàng)，將index框架的06B.asp文檔的tr標(biāo)簽定義為宋體9points。（08）填充頁面。在index框架06

31、B.asp文檔中輸入如圖6-15所示的文本并插入一個(gè)9行1列的表格。其中“休閑娛樂”文本為隸書5號(hào)字體，顏色為#66CC00；表格邊框的顏色為白色；單元格的高度為30像素，單元格的對(duì)齊方式為水平居中、垂直居中。（09）在“頁面屬性”對(duì)話框中將_top框架的標(biāo)題設(shè)置為“標(biāo)題欄”，將所有邊界都設(shè)置為0（10）將光標(biāo)停留在_top框架中，輸入文本并插入images文件夾下的圖像，其中文本為4號(hào)宋體，顏色為#66CC00。（11）設(shè)置鏈接。選中左邊框架（index）中目錄下的“考試作弊”文本，在“屬性”面板中的“鏈接”框中設(shè)置與之對(duì)應(yīng)的笑話內(nèi)容（WJ/wj6-1.asp）的鏈接。這時(shí)“目標(biāo)”框變?yōu)榧せ?/p>

32、狀態(tài)，從“目標(biāo)”下拉列表框中選擇鏈接的目標(biāo)為main。（12）使用相同的方法設(shè)置其他“笑話”目錄所鏈接的內(nèi)容和鏈接目標(biāo)，其他的鏈接目標(biāo)均為main框架。笑話目錄各項(xiàng)和WJ文件夾中wj6-1.aspwj6-8.asp是一一對(duì)應(yīng)的關(guān)系。（13）指定框架源文件。選中main框架，在“屬性”面板中的“源文件”文本框中設(shè)置框架的源文件。單擊旁邊的文件夾，選擇WJ文件夾中wj6-1.asp文件（14）在文檔窗口的菜單欄中選擇“文件”|“保存全部”選項(xiàng)，將所有的框架進(jìn)行保存。（15）按F12鍵便可預(yù)覽該實(shí)例第七章 頁面布局視圖的使用課題：布局表格和布局單元格的基本知識(shí)及操作一、教學(xué)基本內(nèi)容1、布局表格和布局

33、單元格的基本知識(shí)2、布局表格和布局單元格的創(chuàng)建二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：創(chuàng)建布局表格和布局單元格難點(diǎn)：布局表格的使用五、教學(xué)目的1 、掌握布局的基本知識(shí)2 、熟練運(yùn)用布局表格和布局單元格六、教學(xué)過程1、引入在第四章學(xué)習(xí)過了表格的布局，用表格與布局表格相比，看其特點(diǎn)，從而使學(xué)生更加了解什么是布局表格和布局單元格。2、講授新課（1）布局表格的基本知識(shí)（2）布局表格和布局單元格的基本操作選擇布局表格：須要執(zhí)行下列操作之一：a:雙擊所繪制的布局表格中的 標(biāo)志。b:單擊文檔窗口左下角的<table>標(biāo)簽，如圖7-3所示。調(diào)整布局單元格的大小:具體操作步驟如下：

34、（01）選中要調(diào)整的布局單元格。（02）選擇布局單元格邊線上的調(diào)整手柄，拖動(dòng)鼠標(biāo)便可調(diào)整布局單元格的大小移動(dòng)布局表格和布局單元格:（01）選中要移動(dòng)的布局表格或布局單元格。（02）使用方向鍵便可移動(dòng)布局表格或布局單元格了，但這樣每次只能移動(dòng)1像素的距離；如果是在按下Shift鍵的同時(shí)再利用方向鍵移動(dòng)，每次可移動(dòng)10像素的距離。設(shè)置布局寬度為固定寬度:具體操作步驟如下：（01）選擇要設(shè)置固定寬度的布局表格。（02）在菜單欄中選擇“窗口”|“屬性”選項(xiàng)，打開“屬性”面板。（03）在“屬性”面板中選擇“固定”單項(xiàng)按鈕，并在后面的文本框中輸入一個(gè)數(shù)值，在此輸入640，其單位在默認(rèn)的條件下是像素。七、作

35、業(yè)處理進(jìn)入布局模式，練習(xí)布局與布局單元格 八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：制作完整頁面一、教學(xué)基本內(nèi)容利用布局制作完整頁面 二、課型：實(shí)驗(yàn)課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：布局表格的創(chuàng)建 難點(diǎn)：布局單元格的使用五、教學(xué)目的1 、掌握布局表格的運(yùn)用 2 、掌握布局單元格的作用六、教學(xué)過程步驟：（01）選中在布局表格中所繪制的布局單元格，在“屬性”面板中將該布局單元格的寬度也設(shè)置為775像素，高度為68像素。（02）將光標(biāo)停留在布局單元格內(nèi)，選擇菜單欄中的“插入”|“圖像”選項(xiàng)，在彈出的“選擇圖像源文件”對(duì)

36、話框中，選擇存放在ch07IMAGES文件夾下的BANER.JPG圖像（03）選擇圖像文件后，單擊“確定”按鈕，便可在布局單元格內(nèi)插入該圖像文件（04）單擊“繪制布局單元格”按鈕 ，在已經(jīng)插入圖像的布局表格下面繪制3個(gè)布局單元格（05）分別選中所繪制的布局單元格，并打開“屬性”面板，將布局單元格的寬度和高度分別設(shè)置為：（156、40）、（338、40）、（199、40）。（06）在所繪制布局單元格1和2內(nèi)分別輸入文本“生活空間”和“音樂天地”，并在布局單元格3內(nèi)插入存放在ch07IMAGES文件夾下的01.GIF圖像（07）在其下繪制2個(gè)布局單元格，分別選中并同時(shí)打開“屬性”面板，將單元格的寬

37、度和高度分別設(shè)置為：（148、326）、（516、326），如（08）在圖7-17所示布局單元格（1）中繪制4個(gè)寬度為136像素，高度為34像素的布局單元格，并在其單元格內(nèi)分別輸入文本，（09）填充布局單元格內(nèi)容。完成所對(duì)應(yīng)的布局單元格文本的輸入（10）最后將“布局模式”轉(zhuǎn)化為“標(biāo)準(zhǔn)模式”。在“標(biāo)準(zhǔn)模式”中根據(jù)自己的審美觀進(jìn)行調(diào)整，可為布局單元格的邊框進(jìn)行修飾第八章 鏈接課題：鏈接與路徑介紹一、教學(xué)基本內(nèi)容1、鏈接的基本知識(shí)2、路徑的基本知識(shí)二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：鏈接與路徑的概念難點(diǎn)：路徑的理解五、教學(xué)目的1 、掌握路徑的類型2 、能夠正確運(yùn)用路徑六、教學(xué)過

38、程1、引入在打開一個(gè)文件或插入一張圖片的時(shí)候都會(huì)用到路徑，由此來引入究竟什么是路徑。2、講授新課（1）URL簡(jiǎn)介URL（Uniform Resource Locator，統(tǒng)一資源定位符）主要用于指定欲取得因特網(wǎng)上資源的位置與方式。一個(gè)URL的構(gòu)成如下：資源取得方式：/URL地址port/目錄/文件名稱（2）路徑類型要正確創(chuàng)建鏈接，必須了解鏈接與被鏈接文檔之間的路徑。每個(gè)網(wǎng)頁都有一個(gè)唯一的地址，即URL。常用的文檔路徑類型有3種：絕對(duì)路徑 ：絕對(duì)路徑就是被鏈接文檔的完整URL，包括所使用的傳輸協(xié)議（對(duì)于網(wǎng)頁通常是http:/）。文檔相對(duì)路徑 ：文檔相對(duì)路徑指以原來文檔所在位置為起點(diǎn)到被鏈接文檔所

39、經(jīng)過的路徑。這是用于本地鏈接最適宜的路徑。根相對(duì)路徑：根相對(duì)路徑是指從站點(diǎn)根文件夾到被鏈接文檔所經(jīng)過的路徑。一個(gè)根相對(duì)路徑以正斜杠開頭，其代表站點(diǎn)根文件夾。給出例子以區(qū)分這三種類型：例：a: c:/website/img/photo.jpg(這是photo.jpg的絕對(duì)路徑)b: c:/website/web/index.htm c:/website/img/photo.jpg（指出photo.jpg的相對(duì)路徑）七、作業(yè)處理通過在地址欄中輸入一個(gè)文件的地址來練習(xí)路徑的使用。 八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：創(chuàng)建鏈

40、接一、教學(xué)基本內(nèi)容1、創(chuàng)建錨記鏈接2、創(chuàng)建空鏈接3、創(chuàng)建下載鏈接二、課型：講授+實(shí)驗(yàn)三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：下載鏈接難點(diǎn)：錨記鏈接五、教學(xué)目的1 、掌握鏈接創(chuàng)建的不同方法2 、掌握錨記鏈接的創(chuàng)建六、教學(xué)過程1、創(chuàng)建鏈接方法：（01）選擇窗口中要鏈接的文本或圖像。選擇“窗口”|“屬性”選項(xiàng)，打開“屬性”面板，并執(zhí)行以下操作之一a:單擊“鏈接”框右邊的“瀏覽文件”圖標(biāo) ，如圖8-1所示，在彈出的“選擇文件”對(duì)話框中瀏覽并選擇一個(gè)文件。注意，在“選擇文件”對(duì)話框中的“相對(duì)于”下拉列表中，通常選擇“文檔”而不選擇“站點(diǎn)根目錄”。單擊“選擇文件”對(duì)話框中的“確定”按鈕，在“鏈接”框中將

41、顯示出被鏈接文件的路徑。b:在“屬性”面板的“鏈接”框中，輸入要鏈接的文檔的路徑，如圖8-2所示。（02）選擇被鏈接文檔的載入位置。在默認(rèn)情況下，被鏈接文檔在當(dāng)前窗口或框架中打開。要使被鏈接的文檔顯示在其他地方，需要從“屬性”面板的“目標(biāo)”下拉列表中選擇一個(gè)選項(xiàng)。2、創(chuàng)建錨記鏈接錨記鏈接（簡(jiǎn)稱錨記）就是在文檔中插入一個(gè)位置標(biāo)記，并給該位置設(shè)置一個(gè)名稱。步驟：（01）打開ch08LIANJIE.ASP文件，把光標(biāo)置于文檔中“比輸贏”文本的右邊（文檔中需要設(shè)置錨記的地方）。（02）在文檔窗口的菜單欄中依次選擇“插入”|“命名錨記”選項(xiàng)（03）在“命名錨記”對(duì)話框的“錨記名稱”文本框中輸入錨記名：m

42、j1（注意，所命名錨記是區(qū)分大小寫的）。（04）如果錨記標(biāo)記沒有出現(xiàn)在插入點(diǎn)，選擇“查看”|“可視化助理”|“不可見元素”選項(xiàng)，在所選擇插入“錨記”的位置便會(huì)出現(xiàn)錨記標(biāo)志，如圖8-16所示。（05）同樣的方法，分別在笑話欄下的“先生尿褲”、“大街上叫喊的人”文本的右邊插入錨記，并且分別命名為mj2、mj3。（06）在菜單欄中選擇“窗口”|“屬性”選項(xiàng)，打開“屬性”面板。（07）選中窗口左邊“笑話集錦”下的“比輸贏”文本，在“屬性”面板中的“鏈接”框中輸入#mj1。（08）同樣的方法，分別創(chuàng)建“笑話集錦”欄下的“先生尿褲”、“大街上叫喊的人”文本與#mj2、#mj3的錨記鏈接。（09）保存操作結(jié)

43、果。 七、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第九章 層與時(shí)間軸課題：層的創(chuàng)建與設(shè)置一、教學(xué)基本內(nèi)容1、層的創(chuàng)建2、層的基本操作3、層的屬性二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：層的屬性難點(diǎn)：z-index、子層五、教學(xué)目的掌握層的相關(guān)操作，為動(dòng)畫設(shè)置打基礎(chǔ)六、教學(xué)過程1、   復(fù)習(xí)引入    網(wǎng)頁中的定位-表格2、 建立層（1）菜單，插入（Insert）層（Layer），默認(rèn)大?。?00115（2） 對(duì)象面板3、 層的意義（1）可以將元素重疊（2）可以用于

44、精確定位網(wǎng)頁元素（3）可以通過應(yīng)用時(shí)間線使層移動(dòng)和變換，實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫效果（4）網(wǎng)頁和網(wǎng)頁元素的可見或不可見可以通過層的顯示和隱藏屬性實(shí)現(xiàn)（5） 層可以轉(zhuǎn)換成表格        4、層屬性  （1）層編號(hào)（LayerID）（2）Z軸（Z-index）：控制層重疊時(shí)誰在前誰在后的問題        （3）背景圖像（Bgimage）  （4） 顯示（Vis）：默認(rèn)（default）、（繼承）inherit、（可見）visible、隱藏（hidden）四個(gè)選項(xiàng)之一  &#

45、160;     （5）標(biāo)簽（Tag）：DIV、SPAN、LAYER、ILAYER，選DIV        （6）溢出（Overflow）：當(dāng)層內(nèi)容超過層大小的時(shí)候如何顯示。顯示層內(nèi)的全部?jī)?nèi)容（visible）、只顯示層尺寸以內(nèi)的內(nèi)容（hidden）、不改變層大小、只添加滾動(dòng)條（scroll）、只有層不夠大時(shí)才顯示滾動(dòng)條（auto）        （7） 剪裁（Clip）：指定層的哪一部分是可見的，輸入的數(shù)值是距離層的4個(gè)邊界的距離       

46、 6、     子層        （1） 在一個(gè)層中再插入一個(gè)層，后者就是前者的子層（2） 子層不一定在父層里面（3） 移動(dòng)子層，父層位置不發(fā)生變化（4） 移動(dòng)父層，子層跟著變化，對(duì)父層的相對(duì)位置不變（5）子層可以繼承父層的可見性        7、層與表格的轉(zhuǎn)換        （1）層轉(zhuǎn)換為表格：修改-轉(zhuǎn)換層到表格        （2）表格轉(zhuǎn)換為層：修改-轉(zhuǎn)換表格

47、到層七、作業(yè)處理1、制作陰影字        2、用層將5個(gè)圖片放置圍繞一個(gè)圖片        3、將上題結(jié)果轉(zhuǎn)換為表格八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：時(shí)間軸與其相關(guān)操作一、教學(xué)基本內(nèi)容1、時(shí)間軸的概念2、制作層的時(shí)間軸動(dòng)畫3、給時(shí)間軸附加動(dòng)作二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：制作層的時(shí)間軸動(dòng)畫難點(diǎn)：1、錄制層的時(shí)間軸運(yùn)動(dòng)路徑 2、添加附加動(dòng)作五、教學(xué)目的掌握簡(jiǎn)單的動(dòng)畫設(shè)置六、教學(xué)過程創(chuàng)建時(shí)間軸動(dòng)畫步驟：（01）在頁面添

48、加層，并在層中插入元素（如一幅圖片或一些文字），把層移到動(dòng)畫的起始位置。（02）選擇“窗口”|“時(shí)間軸”選項(xiàng)，打開“時(shí)間軸”面板。（03）選擇要制作動(dòng)畫的層。單擊層標(biāo)記或?qū)舆吔?，或用“層”面板選擇層（注意：在層內(nèi)部單擊，可以把插入點(diǎn)置于層內(nèi)，但并不選中該層。當(dāng)一個(gè)層被選中時(shí)，層邊界會(huì)顯示出可調(diào)整大小的手柄）。（04）直接把選定的對(duì)象拖入“時(shí)間軸”面板中；或者單擊“時(shí)間軸”面板中的 按鈕，選擇“添加對(duì)象”選項(xiàng)。（05）此時(shí)時(shí)間軸的第一個(gè)通道中將出現(xiàn)一個(gè)紫色條，即動(dòng)畫條，條中顯示了層的名稱Layer1，動(dòng)畫條兩端的兩個(gè)圓圈，即為時(shí)間軸的關(guān)鍵幀。（06）單擊第1個(gè)關(guān)鍵幀，將紅色的播放頭移到第1個(gè)關(guān)鍵

49、幀，拖動(dòng)被選中的層到某一個(gè)位置，即確定動(dòng)畫運(yùn)動(dòng)的起始位置。（07）單擊動(dòng)畫條最后的關(guān)鍵幀標(biāo)記（注意播放頭也跟著移到該處），再把頁面上的該層拖到動(dòng)畫結(jié)束處。之后，從動(dòng)畫起始位置到結(jié)束位置會(huì)顯示一條線，這就是層的運(yùn)動(dòng)軌跡。如果沒有顯示一條線，說明做法不對(duì)，需要重新開始。（08）如果使動(dòng)畫層作曲線移動(dòng)，選擇動(dòng)畫條，按住Ctrl鍵單擊，在插入點(diǎn)位置添加一個(gè)關(guān)鍵幀；或在動(dòng)畫條中間單擊一幀，并從右鍵快捷菜單中選擇“增加關(guān)鍵幀”選項(xiàng)。（09）移動(dòng)層，使運(yùn)動(dòng)軌跡呈曲線狀。（10）單擊“播放”按鈕，預(yù)覽頁面上的動(dòng)畫七、作業(yè)處理根據(jù)書上的實(shí)例，創(chuàng)建一個(gè)網(wǎng)站廣告。 八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所

50、要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第十章 表單課題：表單創(chuàng)建、對(duì)象及其屬性一、教學(xué)基本內(nèi)容1 、表單概念2 、表單創(chuàng)建3 、表單屬性二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、創(chuàng)建表單2、掌握表單的應(yīng)用難點(diǎn)：1 、掌握表單元素的各項(xiàng)屬性 2 、能獨(dú)立制作完成常見的各種表單頁面五、教學(xué)目的掌握表單創(chuàng)建方法六、教學(xué)過程向?qū)W生演示多個(gè)項(xiàng)目：成品站點(diǎn)，分階段演示和分析此網(wǎng)頁的設(shè)計(jì)流程和過程，在每個(gè)階段演示完畢后，讓學(xué)生對(duì)此階段進(jìn)行鞏固。講解完畢后學(xué)生完成課后作業(yè)，教師實(shí)施指導(dǎo)。 第一步：演示并講解注冊(cè)網(wǎng)頁。 第二步：分步演示并講解、制作表單元素。第三步：分析并

51、制作網(wǎng)頁。第四步：課程小結(jié)。七、作業(yè)處理第一步：演示并分析網(wǎng)頁中的相關(guān)效果。第二步：分步講解并完成網(wǎng)頁中效果的實(shí)現(xiàn)。 第三步：分組討論并修改網(wǎng)頁八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：制作調(diào)查表單一、教學(xué)基本內(nèi)容1 、表單概念2 、表單創(chuàng)建3 、表單屬性二、課型：實(shí)驗(yàn)課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、創(chuàng)建表單2、掌握表單的應(yīng)用難點(diǎn)：1 、掌握表單元素的各項(xiàng)屬性 2 、能獨(dú)立制作完成常見的各種表單頁面五、教學(xué)目的能夠熟練的運(yùn)用表單中的各個(gè)屬性，會(huì)制作表單。六、教學(xué)過程調(diào)查表單制作過程：（01）用Dreamweaver

52、8打開ch10SAMPLE02FORM2.ASP文件。（02）打開“插入”工具欄，在“表單”標(biāo)簽下單擊“表單”按鈕 ，在頁面中創(chuàng)建一個(gè)表單。03）在所插入的表單中插入一個(gè)6行4列、寬度為600的表格，其中表格的邊框粗線為1。（04）根據(jù)需要對(duì)表格進(jìn)行編輯，并在表格內(nèi)輸入所要調(diào)查的項(xiàng)目。（05）在表格內(nèi)插入對(duì)應(yīng)的表單對(duì)象，設(shè)置各表單對(duì)象屬性（名稱不做要求），。（06）完成該網(wǎng)上調(diào)查表單的制作，保存文檔七、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。學(xué)生利用計(jì)算機(jī)進(jìn)行實(shí)驗(yàn)操作。第十一章 行為課題：行為面板用法及基本操作一、教學(xué)基本內(nèi)容1 、行為的基

53、本知識(shí)2 、事件的基本知識(shí)3 、行為動(dòng)作二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、行為面板的用法2、行為動(dòng)作難點(diǎn)：行為的動(dòng)作 五、教學(xué)目的掌握行為面板的用法，并且會(huì)添加行為。六、教學(xué)過程1、行為的概念行為是事件和動(dòng)作的組合。動(dòng)作是預(yù)先編寫好的JavaScript腳本，可用來執(zhí)行指定任務(wù)。事件則是由瀏覽器為每個(gè)頁面元素定義的，是訪問者對(duì)網(wǎng)頁的基本操作2、行為面板的用法（01）選擇“窗口”|“行為”選項(xiàng)或按Shift+F4組合鍵打開“行為”面板，（02）單擊“行為”面板中的 按鈕，則可在出現(xiàn)的菜單中選擇所需要的動(dòng)作。（03）選中“行為”面板中某一事件，單擊 按鈕便可從事件列表中

54、刪除所選擇的事件。3、行為的基本操作（1）添加行為（2）修改行為4、行為動(dòng)作在這里行為包含了二十多種動(dòng)作，不再一一敘述。5、鞏固練習(xí)對(duì)各種行為動(dòng)作進(jìn)行練習(xí)，看其效果。七、作業(yè)處理在網(wǎng)頁中添加一些內(nèi)容，然后添加一些行為。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。學(xué)生利用計(jì)算機(jī)進(jìn)行實(shí)驗(yàn)操作。課題：行為動(dòng)作及事件設(shè)置一、教學(xué)基本內(nèi)容1 、事件的基本知識(shí)2 、行為事件的設(shè)置二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、行為面板的用法2、事件的種類難點(diǎn)：對(duì)事件的理解及掌握 五、教學(xué)目的掌握各個(gè)事件的作用。六、教學(xué)過程檢查表單步驟：（

55、01）用Dreamweaver 8打開光盤中的ch11SAMPLE02FORM.ASP文件。（02）在文檔的標(biāo)簽欄中選中<form>標(biāo)簽。選擇“窗口”|“行為”選項(xiàng)，打開“行為”面板。（03）在打開的“行為”面板中單擊 按鈕，在彈出的行為菜單中選擇“檢查表單”選項(xiàng)。（04）在“檢查表單”對(duì)話框中，從“命名的欄位”中選擇要驗(yàn)證的表單對(duì)象文本域的名稱，“值”是用來確定某個(gè)文本域是否可以空缺，“可接受”欄中用來設(shè)置文本域所要輸入的文本類型以及對(duì)文本的限制，將E-MAIL文本域設(shè)置為必填內(nèi)容、電子郵件地址。最后單擊“確定”按鈕返回。（05）更改行為的觸發(fā)事件。選擇“行為”面板中的 按鈕，在

56、彈出的菜單中，將行為事件設(shè)置為onSubmit，即觸發(fā)點(diǎn)為提交表單時(shí)觸發(fā)，然后關(guān)閉“行為”面板。（06）保存文檔，按F12鍵測(cè)試效果。5、鞏固練習(xí)對(duì)各種事件進(jìn)行練習(xí)，看其效果。七、作業(yè)處理制作一個(gè)彈出式菜單。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第十二章 制作動(dòng)態(tài)頁面課題：構(gòu)建動(dòng)態(tài)頁面、數(shù)據(jù)庫鏈接一、教學(xué)基本內(nèi)容1、建立ACCESS數(shù)據(jù)庫2、創(chuàng)建DSN3、定義數(shù)據(jù)庫連接二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：1、ACCESS數(shù)據(jù)庫2、創(chuàng)建DSN難點(diǎn)：定義數(shù)據(jù)庫連接五、教學(xué)目的能夠掌握配置數(shù)據(jù)源的方法，正確連接數(shù)據(jù)庫。六、教學(xué)過程設(shè)定DSN的方法：（01）啟動(dòng)控制面板，雙擊“管理工具”下的“數(shù)據(jù)源（ODBC）”圖標(biāo)。（02）在彈出的“ODBC數(shù)據(jù)源管理器”對(duì)話框中，選擇“系統(tǒng)DSN”選項(xiàng)卡，單