dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)教案

1、初識(shí)Dreamweaver 8課題：Dreamweaver8簡(jiǎn)介及創(chuàng)建文檔一、教學(xué)基本內(nèi)容1、什么是網(wǎng)頁(yè)和網(wǎng)站 2、網(wǎng)頁(yè)的分類(lèi) 3、網(wǎng)頁(yè)中的常用術(shù)語(yǔ) 4、網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí) 5、認(rèn)識(shí)Dreamweaver 8 6、Dreamweaver 8的基本操作 7、Dreamweaver 8工作界面介紹二、課型：新授課三、課時(shí)：1個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：什么是網(wǎng)頁(yè)和網(wǎng)站難點(diǎn)：1、網(wǎng)頁(yè)的分類(lèi)2、網(wǎng)頁(yè)設(shè)計(jì)的一般步驟3、Dreamweaver 8的基本操作五、教學(xué)目的1 、對(duì)Dreamweaver這個(gè)制作網(wǎng)頁(yè)的工具及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣2、一定要學(xué)會(huì)建立一個(gè)空白網(wǎng)頁(yè)3、會(huì)對(duì)頁(yè)面有

2、一個(gè)簡(jiǎn)單的設(shè)置六、教學(xué)過(guò)程1、什么是網(wǎng)頁(yè)和網(wǎng)站（1）網(wǎng)頁(yè)網(wǎng)頁(yè)是由HTML（超級(jí)文本標(biāo)識(shí)語(yǔ)言）或者其他語(yǔ)言編寫(xiě)的，通過(guò)IE瀏覽器編譯后供用戶(hù)獲取信息的頁(yè)面，它又稱(chēng)為Web頁(yè)，其中可包含文字、圖像、表格、動(dòng)畫(huà)和超級(jí)鏈接等各種網(wǎng)頁(yè)元素。（2）網(wǎng)站網(wǎng)站就是一個(gè)或多個(gè)網(wǎng)頁(yè)的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁(yè)發(fā)布到Internet上以后，能通過(guò)瀏覽器在Internet上訪(fǎng)問(wèn)的頁(yè)面 。u 門(mén)戶(hù)網(wǎng)站u 職能網(wǎng)站u 專(zhuān)業(yè)網(wǎng)站u 個(gè)人網(wǎng)站2、網(wǎng)頁(yè)的分類(lèi)（1）按所處位置分類(lèi)   按網(wǎng)頁(yè)在網(wǎng)站中所處的位置可將網(wǎng)頁(yè)分為主頁(yè)和子頁(yè)兩類(lèi)。(2) 按表現(xiàn)形式分類(lèi)按網(wǎng)頁(yè)的表現(xiàn)形式可將網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)

3、。3、網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí)（1）設(shè)計(jì)網(wǎng)頁(yè)的原則A、整體規(guī)劃B、鮮明的主題C、善用圖像D、醒目的導(dǎo)航E、及時(shí)更新F、易記的網(wǎng)站名稱(chēng)G、通用網(wǎng)頁(yè)H、動(dòng)畫(huà)適量（2）網(wǎng)頁(yè)設(shè)計(jì)的一般步驟A、規(guī)劃網(wǎng)站B、收集整理資源C、配置站點(diǎn)D、創(chuàng)建頁(yè)面E、測(cè)試站點(diǎn)F、發(fā)布站點(diǎn) G、維護(hù)、更新站點(diǎn)（3）網(wǎng)頁(yè)制作的常用工具A、網(wǎng)頁(yè)設(shè)計(jì)軟件 Dreamweaver是目前使用最多的網(wǎng)頁(yè)設(shè)計(jì)軟件。B、圖像處理軟件制作網(wǎng)頁(yè)圖像的軟件種類(lèi)繁多，大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)人員選擇的是Fireworks或Photoshop。C、動(dòng)畫(huà)制作軟件 網(wǎng)頁(yè)動(dòng)畫(huà)制作中最常用的軟件非Flash莫屬。4、Dreamweaver 8的基本操作A、啟動(dòng)Dreamwea

4、ver 8 B、新建空白HTML網(wǎng)頁(yè) C、保存網(wǎng)頁(yè)文檔 D、預(yù)覽網(wǎng)頁(yè)效果 E、退出Dreamweaver 8第一章 Dreamweaver8概述課題：Dreamweaver8簡(jiǎn)介及創(chuàng)建文檔一、教學(xué)基本內(nèi)容1、Dreamweaver8 的工作界面2、建立html文檔二、課型：新授課三、課時(shí)：1個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：熟悉Dreamweaver8工作界面中各個(gè)工具的作用難點(diǎn)：1、各個(gè)面板的調(diào)用2、建立一個(gè)HTML的網(wǎng)頁(yè)3、插處圖像五、教學(xué)目的1 、對(duì)Dreamweaver這個(gè)制作網(wǎng)頁(yè)的工具及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣2、一定要學(xué)會(huì)建立一個(gè)空白網(wǎng)頁(yè)3、會(huì)對(duì)頁(yè)面有一個(gè)簡(jiǎn)單的設(shè)置

5、六、教學(xué)過(guò)程1、引入（1）為什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、運(yùn)行速度快、所制作網(wǎng)頁(yè)代碼少這些優(yōu)點(diǎn)，贏得了網(wǎng)頁(yè)制作人員的喜愛(ài)。（2）相關(guān)工具的介紹因?yàn)檫@是第一節(jié)網(wǎng)頁(yè)制作課，所以首先要簡(jiǎn)單介紹下制作網(wǎng)頁(yè)的一些相關(guān)工具，比如與Dreamweaver合稱(chēng)為網(wǎng)頁(yè)三劍客的Flash和Fireworks。 2、講授新課（1） Dreamweaver的界面      a文檔窗口：主菜單、工具欄、底部啟動(dòng)條、文檔編輯區(qū)        b對(duì)象面

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

7、示。第二章 創(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ī)劃的方法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é)過(guò)程 1、復(fù)習(xí)引入由上節(jié)所學(xué)習(xí)的建立HTML網(wǎng)頁(yè)引出站點(diǎn)概念 2、講授新課 （1）站點(diǎn)規(guī)劃概念及方法概念：所謂本地站點(diǎn)，就是指定本地硬盤(pán)中存放遠(yuǎn)程站點(diǎn)所有文檔的文件夾方法：規(guī)劃網(wǎng)站一般需要從3個(gè)方面去思考，即網(wǎng)站的主題、網(wǎng)站的內(nèi)容和網(wǎng)站的對(duì)象。（2）創(chuàng)建本地站點(diǎn)站

8、點(diǎn)組成：Dreamweaver 8站點(diǎn)由3部分組成，具體內(nèi)容取決于環(huán)境和所開(kāi)發(fā)的Web站點(diǎn)類(lèi)型。包括本地文件夾、遠(yuǎn)程文件夾、動(dòng)態(tài)頁(yè)文件夾定義站點(diǎn)：（01）選擇“站點(diǎn)”|“新建站點(diǎn)”選項(xiàng)，或者選擇“站點(diǎn)”“管理站點(diǎn)”選項(xiàng)，在彈出的“站點(diǎn)管理”對(duì)話(huà)框中單擊“新建”按鈕，彈出對(duì)話(huà)框，在“基本”選項(xiàng)卡的站點(diǎn)名稱(chēng)輸入框中輸入所要?jiǎng)?chuàng)建站點(diǎn)的名稱(chēng)，如圖2-5所示（02）輸入站點(diǎn)名稱(chēng)后，單擊“下一步”按鈕，在彈出的是否使用服務(wù)器技術(shù)對(duì)話(huà)框中，根據(jù)自己所制作網(wǎng)頁(yè)的類(lèi)型，確定是否使用服務(wù)器技術(shù)。在此制作靜態(tài)頁(yè)面，因此不使用服務(wù)器技術(shù)，如圖2-6所示。（03）單擊“下一步”按鈕，在彈出的設(shè)置站點(diǎn)文件夾對(duì)話(huà)框中，選擇

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

10、r中創(chuàng)建一個(gè)靜態(tài)站點(diǎn)，將站點(diǎn)信息存放到我的站點(diǎn)文件夾中。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(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é)過(guò)程1、引入先提出靜態(tài)站點(diǎn)的作用及限制性，引入動(dòng)態(tài)站點(diǎn)的功能2、講授新課（1）安裝并啟動(dòng)IIS（現(xiàn)場(chǎng)操作

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

12、;進(jìn)入“高級(jí)”選項(xiàng)卡。（1）選擇“站點(diǎn)”|“新建站點(diǎn)”選項(xiàng)，選擇“站點(diǎn)定義”對(duì)話(huà)框中的“高級(jí)”選項(xiàng)卡。（2）從“分類(lèi)”列表框中選擇“本地信息”（默認(rèn)選項(xiàng)）選項(xiàng)，如圖2-21所示。<03>設(shè)置“本地信息”的各參數(shù)（見(jiàn)圖2-22<04>設(shè)置“測(cè)試服務(wù)器”的各參數(shù)（見(jiàn)圖2-23）。<05>顯示結(jié)果。（3）測(cè)試站點(diǎn)<01>將ch02 test.asp文件復(fù)制到C:site文件夾中，并使用Dreamweaver 8 打開(kāi)test.asp。<02>單擊瀏覽器中“預(yù)覽/調(diào)試” 按鈕，或者按F12鍵在瀏覽器中運(yùn)行test.asp頁(yè)面。出現(xiàn)如圖2-25

13、所示的成功頁(yè)面。若瀏覽器提示找不到服務(wù)器，則需重新搭建ASP服務(wù)器。3、鞏固練習(xí)練習(xí)站點(diǎn)的建立，及其基本操作。七、作業(yè)處理在課堂上要求每一個(gè)同學(xué)在F盤(pán)下建立一個(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)室，因此所要板書(shū)的內(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)目列

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

15、空白文檔，在網(wǎng)頁(yè)中輸入文字，然后在右下角插入日期，在內(nèi)容當(dāng)中便用有序列表。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(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 的基本概念

16、2 、掌握 CSS 樣式定義 3 、掌握 CSS 常用屬性與值六、教學(xué)過(guò)程向?qū)W生演示多個(gè)項(xiàng)目：成品站點(diǎn)，分階段演示和分析此網(wǎng)頁(yè)的設(shè)計(jì)流程和過(guò)程，在每個(gè)階段演示完畢后，讓學(xué)生對(duì)此階段進(jìn)行鞏固。講解完畢后學(xué)生完成課后作業(yè)，教師實(shí)施指導(dǎo)。第一步：演示并講解用 CSS 樣式制作的網(wǎng)頁(yè)。第二步：分步演示并講解 CSS 樣式的基本概念。 第三步：講解并分析 CSS 常用屬性與值。第四步：結(jié)合 CSS 樣式的使用制作網(wǎng)頁(yè)第四步：課程小結(jié)。七、作業(yè)處理課堂上進(jìn)行計(jì)論：第一步：演示并講解用 CSS 樣式制作的網(wǎng)頁(yè)。 第二步：分步演示并講解 CSS 樣式的基本概念。 第三步：講解并分析 CSS 的知識(shí)點(diǎn)。 第四步

17、：結(jié)合 CSS 樣式的使用制作網(wǎng)頁(yè) 第四步：課程小結(jié)。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(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é)過(guò)程1、引入網(wǎng)頁(yè)需要進(jìn)行排版，由報(bào)紙的排版引入網(wǎng)頁(yè)的排版，由此提出表格的作用2、講授新課（1）創(chuàng)建表格步驟：<01>將光標(biāo)停放在頁(yè)面需要?jiǎng)?chuàng)建表

18、格的位置。<02>如果未打開(kāi)“插入”工具欄，可以在文檔窗口單擊按鈕。如果在文檔窗口中找不到該按鈕，可使用Ctrl+F2快捷鍵切換“插入”工具欄的顯示或隱藏狀態(tài)，<03>在“常用”標(biāo)簽中，單擊“表格”按鈕 <04>彈出“表格”對(duì)話(huà)框輸入要插入表格的行數(shù)，在此輸入2。列數(shù) 輸入要插入表格的列數(shù)，在此輸入3<05>單擊“確定”按鈕(2)套用表格格式3、鞏固練習(xí)創(chuàng)建一個(gè)表格，練習(xí)格式的套用。七、作業(yè)處理在課堂上創(chuàng)建一個(gè)五行四列的表格，要求邊框?yàn)?，寬150，高254的表格。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PP

19、T課件進(jìn)行演示。課題：表格的應(yīng)用一、教學(xué)基本內(nèi)容1、設(shè)置單元格2、表格的基本操作二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：表格的編輯難點(diǎn)：排序表格五、教學(xué)目的1 、掌握表格的基本操作2 、能夠熟練設(shè)置單元格格式六、教學(xué)過(guò)程1、引入        （1）文字的定位：空格、回車(chē)        （2） 圖片的定位：垂直邊距、水平邊距2、 表格    插入表格：插入（Insert）表格（table），或者在對(duì)象面板  行數(shù)（row）   

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

21、0;     改變列寬單位按鈕      背景顏色：    邊框顏色：設(shè)置整個(gè)表格的格線(xiàn)顏色  背景圖像： 3、 表格所對(duì)應(yīng)的HTML代碼        表格：table/table        行：tr/tr        列：td/td  4、 表格的編輯（1） 表格的嵌套（2） 在網(wǎng)頁(yè)中，要進(jìn)行復(fù)雜的定位，一般需要用到嵌套表格。不過(guò)，一般不超過(guò)三層。

22、        （2） 復(fù)制剪切粘貼（3） 插入行、列，刪除行列（4） 合并單元格，拆分單元格（5） 改變行、列、表格的大?。和戏牛瑢傩悦姘寰_定義（6） 表格模板：命令（command）格式化表格（format table）七、作業(yè)處理根據(jù)課本上的實(shí)訓(xùn)作出一個(gè)精美課程表網(wǎng)頁(yè)  八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第五章 圖像課題：圖像插入及屬性設(shè)置一、教學(xué)基本內(nèi)容1、圖像的類(lèi)型2、插入鼠標(biāo)經(jīng)過(guò)圖像二、課型：新授課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：插入圖像難點(diǎn)：圖像

23、屬性五、教學(xué)目的1 、掌握?qǐng)D像的插入方法2 、掌握?qǐng)D像屬性設(shè)置六、教學(xué)過(guò)程1、引入網(wǎng)頁(yè)的頁(yè)面背景顏色和文本顏色在HTML代碼中是如何表示的？  RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強(qiáng) 一共可以表示：256256256=16777216種顏色 由于瀏覽器的關(guān)系，只有216種顏色能在瀏覽器中正常顯示，多于這個(gè)范圍的顏色，有的瀏覽器顯示時(shí)就可能發(fā)生偏差，不能正常顯示。 這個(gè)范圍我們稱(chēng)之為網(wǎng)頁(yè)安全顏色范疇 網(wǎng)頁(yè)中運(yùn)用顏色原則 ：切忌采用過(guò)；背景顏色不要太深；要保持整個(gè)網(wǎng)頁(yè)的色調(diào)統(tǒng)一； 要圍繞網(wǎng)頁(yè)主題選擇顏色2、講授新課（1）網(wǎng)頁(yè)中的圖像格式 *B

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

25、1、制作地圖網(wǎng)頁(yè)2、電子相冊(cè)二、課型：實(shí)驗(yàn)課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：制作地圖網(wǎng)頁(yè)難點(diǎn)：熱點(diǎn)選擇五、教學(xué)目的1 、掌握?qǐng)D像使用2 、掌握?qǐng)D像的其它操作六、教學(xué)過(guò)程此節(jié)是實(shí)驗(yàn)課，實(shí)驗(yàn)步驟為：（01）啟動(dòng)Dreamweaver 8，打開(kāi)ch05SAMPLE01MAP.ASP文件。（02）選中該文檔中“絲綢之路示意圖”圖像。（03）在菜單欄中依次選擇“窗口”|“屬性”選項(xiàng)或按下Ctrl+F3組合鍵，打開(kāi)“屬性”面板，如果沒(méi)有顯示圖像地圖制作工具，單擊“屬性”面板右下角的擴(kuò)展箭頭， （04）在“屬性”面板中的“地圖”文本框中輸入圖像地圖名稱(chēng)。（05）創(chuàng)建圖像地圖（熱區(qū)），可根據(jù)地圖中不

26、同的形狀選擇不同的熱區(qū)工具，在所選定圖像上拖動(dòng)鼠標(biāo)指針，便可完成圖像地圖的創(chuàng)建。（06）圖像地圖創(chuàng)建完成后，選中所創(chuàng)建的熱區(qū)，打開(kāi)“屬性”面板。在熱點(diǎn)“屬性”面板的“鏈接”文本框中輸入鏈接文件的名稱(chēng)，或者單擊文件夾圖標(biāo)并通過(guò)瀏覽選擇在用戶(hù)單擊該熱點(diǎn)時(shí)要打開(kāi)的文件。在“目標(biāo)”下拉列表中，選擇用于打開(kāi)該文件的窗口。（07）在“地中?！眲?chuàng)建一個(gè)矩形熱區(qū)，在“替換”框中輸入“關(guān)于地中海的論述”替代文本，并設(shè)置好鏈接（鏈接到DZH.ASP）。（08）按照相同的方法分別為不同的路線(xiàn)或地名創(chuàng)建熱區(qū)，并輸入不同的鏈接和替代文字，保存并預(yù)覽。當(dāng)鼠標(biāo)指針移到圖像地圖中時(shí)將顯示“替換”框中的內(nèi)容，如果設(shè)置有鏈接，單

27、擊便可進(jìn)入所鏈接的文檔。（9）完成創(chuàng)建。第六章 框架課題：框架集的創(chuàng)建及其基本操作一、教學(xué)基本內(nèi)容1 、演示并講解用框架制作的網(wǎng)頁(yè) 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é)過(guò)程1、復(fù)習(xí)引入       回憶：Frontpage中的框架應(yīng)用  2、框架的應(yīng)用  &

28、#160;    重復(fù)出現(xiàn)在不同網(wǎng)頁(yè)文檔中的元素：網(wǎng)頁(yè)標(biāo)題、導(dǎo)航欄等等       3、建立框架（1） 將對(duì)象面板切換到框架頁(yè)（Frame）（2）插入不同的框架，一個(gè)區(qū)域?qū)?yīng)于一個(gè)頁(yè)面 （3）在框架中打開(kāi)原有網(wǎng)頁(yè)：文件（File）à在框架中打開(kāi)（Open in Frame）   4、保存框架       （1） 選擇文件（File）/保存所有框架（Save Frameset），先保存框架文件，接著會(huì)出現(xiàn)提示，逐個(gè)保存框架中的網(wǎng)頁(yè)（2）  保存時(shí)注

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

30、#160;框架所對(duì)應(yīng)的HTML代碼   框架組：  通過(guò)設(shè)置rows或cols來(lái)設(shè)定是橫的還是豎的，是頂部還是底部   框架組屬性：frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距框架項(xiàng)：   框架屬性：src指向的頁(yè)面，name框架名，scrolling是否有滾動(dòng)條，noresize不能由用戶(hù)改變大小     七、作業(yè)處理1、建立框架頁(yè)面如圖，菜單鏈接到不同的圖片，單擊菜單中的一項(xiàng)，圖片在右邊的框架中打開(kāi) 2、 建

31、立左右型的框架，并在其中的左框架中插入上下型的框架3、建立左右型框架，并將左邊的框架拆分為上下型 八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：創(chuàng)建電子圖書(shū)一、教學(xué)基本內(nèi)容利用框架制作電子圖書(shū)網(wǎng)頁(yè) 二、課型：實(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é)過(guò)程步驟：（01）打開(kāi)或新建一個(gè)空白的文檔，在該文檔中創(chuàng)建一個(gè) 框架集。（02）命名框架。將左列框架命名為index、右列上部框架命名為_(kāi)top、右列下部框架命名為main

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

33、架的06B.asp文檔的tr標(biāo)簽定義為宋體9points。（08）填充頁(yè)面。在index框架06B.asp文檔中輸入如圖6-15所示的文本并插入一個(gè)9行1列的表格。其中“休閑娛樂(lè)”文本為隸書(shū)5號(hào)字體，顏色為#66CC00；表格邊框的顏色為白色；單元格的高度為30像素，單元格的對(duì)齊方式為水平居中、垂直居中。（09）在“頁(yè)面屬性”對(duì)話(huà)框中將_top框架的標(biāo)題設(shè)置為“標(biāo)題欄”，將所有邊界都設(shè)置為0（10）將光標(biāo)停留在_top框架中，輸入文本并插入images文件夾下的圖像，其中文本為4號(hào)宋體，顏色為#66CC00。（11）設(shè)置鏈接。選中左邊框架（index）中目錄下的“考試作弊”文本，在“屬性”面板

34、中的“鏈接”框中設(shè)置與之對(duì)應(yīng)的笑話(huà)內(nèi)容（WJ/wj6-1.asp）的鏈接。這時(shí)“目標(biāo)”框變?yōu)榧せ顮顟B(tài)，從“目標(biāo)”下拉列表框中選擇鏈接的目標(biāo)為main。（12）使用相同的方法設(shè)置其他“笑話(huà)”目錄所鏈接的內(nèi)容和鏈接目標(biāo)，其他的鏈接目標(biāo)均為main框架。笑話(huà)目錄各項(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í)例第七章

35、 頁(yè)面布局視圖的使用課題：布局表格和布局單元格的基本知識(shí)及操作一、教學(xué)基本內(nèi)容1、布局表格和布局單元格的基本知識(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é)過(guò)程1、引入在第四章學(xué)習(xí)過(guò)了表格的布局，用表格與布局表格相比，看其特點(diǎn)，從而使學(xué)生更加了解什么是布局表格和布局單元格。2、講授新課（1）布局表格的基本知識(shí)（2）布局表格和布局單元格的基本操作選擇布局表格：須要執(zhí)行下列操作之一：a:雙擊所繪制的布局表格中的 標(biāo)志。b:單擊文檔窗口

36、左下角的<table>標(biāo)簽，如圖7-3所示。調(diào)整布局單元格的大小:具體操作步驟如下：（01）選中要調(diào)整的布局單元格。（02）選擇布局單元格邊線(xiàn)上的調(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)，打開(kāi)“屬性”面板。（03）在“屬性”面板中選擇“固

37、定”單項(xiàng)按鈕，并在后面的文本框中輸入一個(gè)數(shù)值，在此輸入640，其單位在默認(rèn)的條件下是像素。七、作業(yè)處理進(jìn)入布局模式，練習(xí)布局與布局單元格 八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：制作完整頁(yè)面一、教學(xué)基本內(nèi)容利用布局制作完整頁(yè)面 二、課型：實(shí)驗(yàn)課三、課時(shí)：2個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：布局表格的創(chuàng)建 難點(diǎn)：布局單元格的使用五、教學(xué)目的1 、掌握布局表格的運(yùn)用 2 、掌握布局單元格的作用六、教學(xué)過(guò)程步驟：（01）選中在布局表格中所繪制的布局單元格，在“屬性”面板中將該布局單元格的寬度也設(shè)置為775像素，高度為68像素。（0

38、2）將光標(biāo)停留在布局單元格內(nèi)，選擇菜單欄中的“插入”|“圖像”選項(xiàng)，在彈出的“選擇圖像源文件”對(duì)話(huà)框中，選擇存放在ch07IMAGES文件夾下的BANER.JPG圖像（03）選擇圖像文件后，單擊“確定”按鈕，便可在布局單元格內(nèi)插入該圖像文件（04）單擊“繪制布局單元格”按鈕 ，在已經(jīng)插入圖像的布局表格下面繪制3個(gè)布局單元格（05）分別選中所繪制的布局單元格，并打開(kāi)“屬性”面板，將布局單元格的寬度和高度分別設(shè)置為：（156、40）、（338、40）、（199、40）。（06）在所繪制布局單元格1和2內(nèi)分別輸入文本“生活空間”和“音樂(lè)天地”，并在布局單元格3內(nèi)插入存放在ch07IMAGES文件夾下

39、的01.GIF圖像（07）在其下繪制2個(gè)布局單元格，分別選中并同時(shí)打開(kāi)“屬性”面板，將單元格的寬度和高度分別設(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)：

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

41、于網(wǎng)頁(yè)通常是http:/）。文檔相對(duì)路徑 ：文檔相對(duì)路徑指以原來(lái)文檔所在位置為起點(diǎn)到被鏈接文檔所經(jīng)過(guò)的路徑。這是用于本地鏈接最適宜的路徑。根相對(duì)路徑：根相對(duì)路徑是指從站點(diǎn)根文件夾到被鏈接文檔所經(jīng)過(guò)的路徑。一個(gè)根相對(duì)路徑以正斜杠開(kāi)頭，其代表站點(diǎn)根文件夾。給出例子以區(qū)分這三種類(lèi)型：例：a: c:/website/img/photo.jpg(這是photo.jpg的絕對(duì)路徑)b: c:/website/web/index.htm c:/website/img/photo.jpg（指出photo.jpg的相對(duì)路徑）七、作業(yè)處理通過(guò)在地址欄中輸入一個(gè)文件的地址來(lái)練習(xí)路徑的使用。 八、教具所用的

42、教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：創(chuàng)建鏈接一、教學(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é)過(guò)程1、創(chuàng)建鏈接方法：（01）選擇窗口中要鏈接的文本或圖像。選擇“窗口”|“屬性”選項(xiàng)，打開(kāi)“屬性”面板，并執(zhí)行以下操作之一a:單擊“鏈接”框右邊的“瀏覽文件”圖標(biāo) ，如圖8-1所示，在彈出的“選擇文件”對(duì)話(huà)框中瀏覽并選擇一個(gè)文件。注意，在“選擇文件”對(duì)話(huà)框中的“相對(duì)于”下拉列表中，

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

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

45、錦”欄下的“先生尿褲”、“大街上叫喊的人”文本與#mj2、#mj3的錨記鏈接。（09）保存操作結(jié)果。 七、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(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)畫(huà)設(shè)置打基礎(chǔ)六、教學(xué)過(guò)程1、   復(fù)習(xí)引入    網(wǎng)頁(yè)中的定位-表格2、 建立層（1）菜單，插入（Insert）層（La

46、yer），默認(rèn)大?。?00115（2） 對(duì)象面板3、 層的意義（1）可以將元素重疊（2）可以用于精確定位網(wǎng)頁(yè)元素（3）可以通過(guò)應(yīng)用時(shí)間線(xiàn)使層移動(dòng)和變換，實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)效果（4）網(wǎng)頁(yè)和網(wǎng)頁(yè)元素的可見(jiàn)或不可見(jiàn)可以通過(guò)層的顯示和隱藏屬性實(shí)現(xiàn)（5） 層可以轉(zhuǎn)換成表格        4、層屬性  （1）層編號(hào)（LayerID）（2）Z軸（Z-index）：控制層重疊時(shí)誰(shuí)在前誰(shuí)在后的問(wèn)題        （3）背景圖像（Bgimage）  （4） 顯示（Vis）：默認(rèn)（default）、（

47、繼承）inherit、（可見(jiàn)）visible、隱藏（hidden）四個(gè)選項(xiàng)之一        （5）標(biāo)簽（Tag）：DIV、SPAN、LAYER、ILAYER，選DIV        （6）溢出（Overflow）：當(dāng)層內(nèi)容超過(guò)層大小的時(shí)候如何顯示。顯示層內(nèi)的全部?jī)?nèi)容（visible）、只顯示層尺寸以?xún)?nèi)的內(nèi)容（hidden）、不改變層大小、只添加滾動(dòng)條（scroll）、只有層不夠大時(shí)才顯示滾動(dòng)條（auto）        （7） 剪裁（Clip）：指定層的哪一部分是

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

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

50、 2、添加附加動(dòng)作五、教學(xué)目的掌握簡(jiǎn)單的動(dòng)畫(huà)設(shè)置六、教學(xué)過(guò)程創(chuàng)建時(shí)間軸動(dòng)畫(huà)步驟：（01）在頁(yè)面添加層，并在層中插入元素（如一幅圖片或一些文字），把層移到動(dòng)畫(huà)的起始位置。（02）選擇“窗口”|“時(shí)間軸”選項(xiàng)，打開(kāi)“時(shí)間軸”面板。（03）選擇要制作動(dòng)畫(huà)的層。單擊層標(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)畫(huà)條，條中顯示了層的名稱(chēng)Layer1，

51、動(dòng)畫(huà)條兩端的兩個(gè)圓圈，即為時(shí)間軸的關(guān)鍵幀。（06）單擊第1個(gè)關(guān)鍵幀，將紅色的播放頭移到第1個(gè)關(guān)鍵幀，拖動(dòng)被選中的層到某一個(gè)位置，即確定動(dòng)畫(huà)運(yùn)動(dòng)的起始位置。（07）單擊動(dòng)畫(huà)條最后的關(guān)鍵幀標(biāo)記（注意播放頭也跟著移到該處），再把頁(yè)面上的該層拖到動(dòng)畫(huà)結(jié)束處。之后，從動(dòng)畫(huà)起始位置到結(jié)束位置會(huì)顯示一條線(xiàn)，這就是層的運(yùn)動(dòng)軌跡。如果沒(méi)有顯示一條線(xiàn)，說(shuō)明做法不對(duì)，需要重新開(kāi)始。（08）如果使動(dòng)畫(huà)層作曲線(xiàn)移動(dòng)，選擇動(dòng)畫(huà)條，按住Ctrl鍵單擊，在插入點(diǎn)位置添加一個(gè)關(guān)鍵幀；或在動(dòng)畫(huà)條中間單擊一幀，并從右鍵快捷菜單中選擇“增加關(guān)鍵幀”選項(xiàng)。（09）移動(dòng)層，使運(yùn)動(dòng)軌跡呈曲線(xiàn)狀。（10）單擊“播放”按鈕，預(yù)覽頁(yè)面上的動(dòng)畫(huà)七

52、、作業(yè)處理根據(jù)書(shū)上的實(shí)例，創(chuàng)建一個(gè)網(wǎng)站廣告。 八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(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ú)立制作完成常見(jiàn)的各種表單頁(yè)面五、教學(xué)目的掌握表單創(chuàng)建方法六、教學(xué)過(guò)程向?qū)W生演示多個(gè)項(xiàng)目：成品站點(diǎn)，分階段演示和分析此網(wǎng)頁(yè)的設(shè)計(jì)流程和過(guò)程，在每個(gè)階段演示完畢后，讓學(xué)生對(duì)此階段進(jìn)行鞏固。講解完畢后學(xué)生完成課后作業(yè)，教

53、師實(shí)施指導(dǎo)。 第一步：演示并講解注冊(cè)網(wǎng)頁(yè)。 第二步：分步演示并講解、制作表單元素。第三步：分析并制作網(wǎng)頁(yè)。第四步：課程小結(jié)。七、作業(yè)處理第一步：演示并分析網(wǎng)頁(yè)中的相關(guān)效果。第二步：分步講解并完成網(wǎng)頁(yè)中效果的實(shí)現(xiàn)。 第三步：分組討論并修改網(wǎng)頁(yè)八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(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ú)立制作完成常見(jiàn)的各種表單頁(yè)面五、教學(xué)目的能夠熟練的運(yùn)

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

55、利用計(jì)算機(jī)進(jìn)行實(shí)驗(yàn)操作。第十一章 行為課題：行為面板用法及基本操作一、教學(xué)基本內(nèi)容1 、行為的基本知識(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é)過(guò)程1、行為的概念行為是事件和動(dòng)作的組合。動(dòng)作是預(yù)先編寫(xiě)好的JavaScript腳本，可用來(lái)執(zhí)行指定任務(wù)。事件則是由瀏覽器為每個(gè)頁(yè)面元素定義的，是訪(fǎng)問(wèn)者對(duì)網(wǎng)頁(yè)的基本操作2、行為面板的用法（01）選擇“窗口”|“行為”選項(xiàng)或按Shift+F4組合鍵打開(kāi)“行為”面板，（02）單擊“行為”面板中的 按鈕，則

56、可在出現(xiàn)的菜單中選擇所需要的動(dòng)作。（03）選中“行為”面板中某一事件，單擊 按鈕便可從事件列表中刪除所選擇的事件。3、行為的基本操作（1）添加行為（2）修改行為4、行為動(dòng)作在這里行為包含了二十多種動(dòng)作，不再一一敘述。5、鞏固練習(xí)對(duì)各種行為動(dòng)作進(jìn)行練習(xí)，看其效果。七、作業(yè)處理在網(wǎng)頁(yè)中添加一些內(nèi)容，然后添加一些行為。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書(shū)的內(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、事件的種類(lèi)難點(diǎn)：對(duì)事件的理解及掌握 五、教學(xué)目的掌握各個(gè)事件的作用。六、教學(xué)過(guò)程檢查表單步驟：（01）用Dreamweaver 8打開(kāi)光盤(pán)中的ch11SAMPLE02FORM.ASP文件。（02）在文檔的標(biāo)簽欄中選中<form>標(biāo)簽。選擇“窗口”|“行為”選項(xiàng)，打開(kāi)“行為”面板。（03）在打開(kāi)的“行為”面板中單擊 按鈕，在彈出的行為菜單中選擇“檢查表單”選項(xiàng)。（04）在“檢查表單”對(duì)話(huà)框中，從“命名的欄位”中選擇要驗(yàn)證的表單對(duì)象文本域的名稱(chēng)，“值”