1、初識Dreamweaver 8課題：Dreamweaver8簡介及創建文檔一、教學基本內容1、什么是網頁和網站 2、網頁的分類 3、網頁中的常用術語 4、網頁設計的相關知識 5、認識Dreamweaver 8 6、Dreamweaver 8的基本操作 7、Dreamweaver 8工作界面介紹二、課型：新授課三、課時：1個課時四、教學重點與難點重點：什么是網頁和網站難點：1、網頁的分類2、網頁設計的一般步驟3、Dreamweaver 8的基本操作五、教學目的1 、對Dreamweaver這個制作網頁的工具及網頁有一定的認識，激發學生學習網頁設計的興趣2、一定要學會建立一個空白網頁3、會對頁面有

2、一個簡單的設置六、教學過程1、什么是網頁和網站（1）網頁網頁是由HTML（超級文本標識語言）或者其他語言編寫的，通過IE瀏覽器編譯后供用戶獲取信息的頁面，它又稱為Web頁，其中可包含文字、圖像、表格、動畫和超級鏈接等各種網頁元素。（2）網站網站就是一個或多個網頁的集合。從廣義上講，網站就是當網頁發布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面 。u 門戶網站u 職能網站u 專業網站u 個人網站2、網頁的分類（1）按所處位置分類 按網頁在網站中所處的位置可將網頁分為主頁和子頁兩類。(2) 按表現形式分類按網頁的表現形式可將網頁分為靜態網頁和動態網頁。3、網頁設計的相關知識

3、（1）設計網頁的原則A、整體規劃B、鮮明的主題C、善用圖像D、醒目的導航E、及時更新F、易記的網站名稱G、通用網頁H、動畫適量（2）網頁設計的一般步驟A、規劃網站B、收集整理資源C、配置站點D、創建頁面E、測試站點F、發布站點 G、維護、更新站點（3）網頁制作的常用工具A、網頁設計軟件 Dreamweaver是目前使用最多的網頁設計軟件。B、圖像處理軟件制作網頁圖像的軟件種類繁多，大多數網頁設計人員選擇的是Fireworks或Photoshop。C、動畫制作軟件 網頁動畫制作中最常用的軟件非Flash莫屬。4、Dreamweaver 8的基本操作A、啟動Dreamweaver 8 B、新建空白

4、HTML網頁 C、保存網頁文檔 D、預覽網頁效果 E、退出Dreamweaver 8第一章 Dreamweaver8概述課題：Dreamweaver8簡介及創建文檔一、教學基本內容1、Dreamweaver8 的工作界面2、建立html文檔二、課型：新授課三、課時：1個課時四、教學重點與難點重點：熟悉Dreamweaver8工作界面中各個工具的作用難點：1、各個面板的調用2、建立一個HTML的網頁3、插處圖像五、教學目的1 、對Dreamweaver這個制作網頁的工具及網頁有一定的認識，激發學生學習網頁設計的興趣2、一定要學會建立一個空白網頁3、會對頁面有一個簡單的設置六、教學過程1、引入（1

5、）為什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、運行速度快、所制作網頁代碼少這些優點，贏得了網頁制作人員的喜愛。（2）相關工具的介紹因為這是第一節網頁制作課，所以首先要簡單介紹下制作網頁的一些相關工具，比如與Dreamweaver合稱為網頁三劍客的Flash和Fireworks。 2、講授新課（1）Dreamweaver的界面 a文檔窗口：主菜單、工具欄、底部啟動條、文檔編輯區 b對象面板：標準、表格、表單、框架、特殊、文件廷冖隱藏、字符 c啟動面板：站點管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資

6、源管理 d屬性面板：隨目前對象不同而內容不同(2)創建HTML網頁(3)在網頁中插入圖像輸入文字以后，插入圖像，并對圖像設置對齊的方式，使之與文字呈混排的狀態。3、鞏固練習練習使用界面中的各個工具七、作業處理根據本節所學的內容，課堂上練習創建一個空白網頁，并且輸入一段文字，在文本的左邊插入一張圖片八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。第二章 創建與規劃站點課題：規劃站點及創建靜態站點一、教學基本內容1、站點規劃概念2、站點規劃的方法3、站點的組成4、定義站點二、課型：新授課三、課時：2個課時四、教學重點與難點重點：1、站點組成2、如何

7、創建靜態站點難點：1、站點的定義 2、編輯、刪除站點五、教學目的 1、掌握建立靜態站點的流程 2、掌握靜態站點的基本操作六、教學過程 1、復習引入由上節所學習的建立HTML網頁引出站點概念 2、講授新課 （1）站點規劃概念及方法概念：所謂本地站點，就是指定本地硬盤中存放遠程站點所有文檔的文件夾方法：規劃網站一般需要從3個方面去思考，即網站的主題、網站的內容和網站的對象。（2）創建本地站點站點組成：Dreamweaver 8站點由3部分組成，具體內容取決于環境和所開發的Web站點類型。包括本地文件夾、遠程文件夾、動態頁文件夾定義站點：（01）選擇“站點”|“新建站點”選項，或者選擇“站點”“管理

8、站點”選項，在彈出的“站點管理”對話框中單擊“新建”按鈕，彈出對話框，在“基本”選項卡的站點名稱輸入框中輸入所要創建站點的名稱，如圖2-5所示（02）輸入站點名稱后，單擊“下一步”按鈕，在彈出的是否使用服務器技術對話框中，根據自己所制作網頁的類型，確定是否使用服務器技術。在此制作靜態頁面，因此不使用服務器技術，如圖2-6所示。（03）單擊“下一步”按鈕，在彈出的設置站點文件夾對話框中，選擇或輸入一個本地文件夾作為“本地站點文件夾”，如圖2-7所示。（04）選擇了本地站點文件夾后，單擊該對話框中的“下一步”按鈕，進入設置是否與遠程服務器相連的對話框，在這里選擇“無”，設置為不與遠程服務器相連，如

9、圖2-9所示。（05）單擊“下一步”按鈕，便會顯示在站點定義向導中所選擇設置的詳細報告，如果感覺滿意，單擊“完成”按鈕，完成本網站的創建，如圖2-10所示；否則單擊“上一步”按鈕重新修改各項設置。（3）站點的基本操作其基本操作包括編輯、復制、刪除站點。3、鞏固練習練習站點的建立，及其基本操作。七、作業處理在課堂上要求每一個同學在F盤下建立一個名為“我的站點”的文件夾，在dreamweaver中創建一個靜態站點，將站點信息存放到我的站點文件夾中。八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。課題：搭建動態網站服務器及創建動態站點一、教學基本內容

10、1、安裝IIS2、動態站點與靜態站點的區別3、搭建動態站點二、課型：新授課三、課時：2個課時四、教學重點與難點重點：動態站點與靜態站點的區別難點：1、虛擬目錄的概念2、動態站點的定義3、站點測試五、教學目的1、學會安裝IIS，知道IIS的作用2、學會創建虛擬目錄3、會創建動態站點六、教學過程1、引入先提出靜態站點的作用及限制性，引入動態站點的功能2、講授新課（1）安裝并啟動IIS（現場操作）（2）定義一個動態站點步驟：設置虛擬目錄。（1）在本地磁盤“C:”下新建一個site文件夾作為本地站點的根文件夾。（2）設置web共享。找到“C:site”文件夾，選中并右擊該文件夾，從彈出的快捷菜單中選擇

11、“共享和安全”選項。在打開的“site屬性”對話框中，選擇“Web共享”選項卡，如圖2-19所示（3）設置“編輯別名”對話框。選中“共享文件夾”單選按鈕，在彈出的“編輯別名”對話框中將“別名”設置為site；在“訪問權限”中選擇“讀取”；在“應用程序權限”中選擇“腳本”，如圖2-20所示。最后單擊“確定”按鈕關閉對話框，便完成了定義動態站點的準備工作。進入“高級”選項卡。（1）選擇“站點”|“新建站點”選項，選擇“站點定義”對話框中的“高級”選項卡。（2）從“分類”列表框中選擇“本地信息”（默認選項）選項，如圖2-21所示。設置“本地信息”的各參數（見圖2-22設置“測試服務器”的各參數（見圖

12、2-23）。顯示結果。（3）測試站點將ch02 test.asp文件復制到C:site文件夾中，并使用Dreamweaver 8 打開test.asp。單擊瀏覽器中“預覽/調試” 按鈕，或者按F12鍵在瀏覽器中運行test.asp頁面。出現如圖2-25所示的成功頁面。若瀏覽器提示找不到服務器，則需重新搭建ASP服務器。3、鞏固練習練習站點的建立，及其基本操作。七、作業處理在課堂上要求每一個同學在F盤下建立一個名為”我的動態站點”的文件夾，將其設置為虛擬目錄，在dreamweaver中創建一個動態站點，將站點信息存放到我的動態站點文件夾中。八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使

13、用的工具均在計算機上用PPT課件進行演示。第三章 文本及其格式化課題：輸入文本及其格式化一、教學基本內容1、輸入普通文本2、插入符號、日期3、使用項目列表二、課型：新授課三、課時：2個課時四、教學重點與難點重點：1、插入符號、空格和日期 2、使用項目列表難點：1、項目列表五、教學目的1、掌握文本輸入方法2、掌握日期的插入3、掌握項目列表的使用六、教學過程1、引入首先例用一個已完成的網頁，讓學生來看別人的設置，由此引入文本的格式化。2、講授新課（1）文本的輸入兩種方法：a:直接在文檔窗口中輸入文本。即先選擇要插入文本的位置，然后直接輸入文本。b:在其他編輯器中復制已經生成的文本，然后切換到Dre

14、amweaver 8文檔窗口中，將選取插入點，然后選擇“編輯”|“粘貼”選項。（2）創建項目列表類型：無序列表、有序列表、定義列表、目錄列表和菜單列表。（3）插入日期3、鞏固練習練習各種項目列表的使用七、作業處理要求每一個同學建立一個名為“我的網頁”的空白文檔，在網頁中輸入文字，然后在右下角插入日期，在內容當中便用有序列表。八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。課題：CSS樣式一、教學基本內容1 、演示并講解 CSS 的應用 2 、 CSS 的基本概念 3 、 CSS 的特點 4 、 CSS 樣式定義 5 、 CSS 常用屬性與值二、

15、課型：新授課三、課時：2個課時四、教學重點與難點重點：1、掌握 CSS 樣式定義 2、掌握 CSS 常用屬性與值 難點：1、掌握 CSS 樣式定義 2、CSS 常用屬性與值 3、能獨立完成 CSS 樣式的應用五、教學目的1 、掌握 CSS 的基本概念 2 、掌握 CSS 樣式定義 3 、掌握 CSS 常用屬性與值六、教學過程向學生演示多個項目：成品站點，分階段演示和分析此網頁的設計流程和過程，在每個階段演示完畢后，讓學生對此階段進行鞏固。講解完畢后學生完成課后作業，教師實施指導。第一步：演示并講解用 CSS 樣式制作的網頁。第二步：分步演示并講解 CSS 樣式的基本概念。 第三步：講解并分析

16、CSS 常用屬性與值。第四步：結合 CSS 樣式的使用制作網頁第四步：課程小結。七、作業處理課堂上進行計論：第一步：演示并講解用 CSS 樣式制作的網頁。 第二步：分步演示并講解 CSS 樣式的基本概念。 第三步：講解并分析 CSS 的知識點。 第四步：結合 CSS 樣式的使用制作網頁 第四步：課程小結。八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。第四章 表格課題：表格創建及設置一、教學基本內容1 、創建表格2 、 添加表格對象 3 、自動套用表格格式二、課型：新授課三、課時：2個課時四、教學重點與難點重點：1、創建表格 2、自動套用表格格

17、式難點：套用表格格式五、教學目的1 、掌握創建表格的基本方法 2 、會使用自動套用表格格式六、教學過程1、引入網頁需要進行排版，由報紙的排版引入網頁的排版，由此提出表格的作用2、講授新課（1）創建表格步驟：將光標停放在頁面需要創建表格的位置。如果未打開“插入”工具欄，可以在文檔窗口單擊按鈕。如果在文檔窗口中找不到該按鈕，可使用Ctrl+F2快捷鍵切換“插入”工具欄的顯示或隱藏狀態，在“常用”標簽中，單擊“表格”按鈕 彈出“表格”對話框輸入要插入表格的行數，在此輸入2。列數 輸入要插入表格的列數，在此輸入3單擊“確定”按鈕(2)套用表格格式3、鞏固練習創建一個表格，練習格式的套用。七、作業處理在

18、課堂上創建一個五行四列的表格，要求邊框為0，寬150，高254的表格。八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。課題：表格的應用一、教學基本內容1、設置單元格2、表格的基本操作二、課型：新授課三、課時：2個課時四、教學重點與難點重點：表格的編輯難點：排序表格五、教學目的1 、掌握表格的基本操作2 、能夠熟練設置單元格格式六、教學過程1、引入 （1）文字的定位：空格、回車 （2）圖片的定位：垂直邊距、水平邊距2、表格 插入表格：插入（Insert）表格（table），或者在對象面板 行數（row） 列數（column） 邊距（cell pa

19、dding）：單元格中的內容與單元格邊框之間的距離 間距（cell spacing）：單元格之間的距離 寬度（width）：可以是像素（pixel）或百分比為單位（percent） 邊框（boder）： 屬性面板：只有在選定整個表格時才出現表格屬性 在表格中也可以通過右擊，調出的快捷菜單中選擇表格來對表格進行設置清除行高和列寬按鈕 改變列寬單位按鈕 背景顏色： 邊框顏色：設置整個表格的格線顏色 背景圖像：3、表格所對應的HTML代碼 表格：table/table 行：tr/tr 列：td/td 4、表格的編輯（1） 表格的嵌套（2） 在網頁中，要進行復雜的定位，一般需要用到嵌套表格。不過，一般

20、不超過三層。 （2）復制剪切粘貼（3） 插入行、列，刪除行列（4） 合并單元格，拆分單元格（5） 改變行、列、表格的大小：拖放，屬性面板精確定義（6） 表格模板：命令（command）格式化表格（format table）七、作業處理根據課本上的實訓作出一個精美課程表網頁 八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。第五章 圖像課題：圖像插入及屬性設置一、教學基本內容1、圖像的類型2、插入鼠標經過圖像二、課型：新授課三、課時：2個課時四、教學重點與難點重點：插入圖像難點：圖像屬性五、教學目的1 、掌握圖像的插入方法2 、掌握圖像屬性設置六、

21、教學過程1、引入網頁的頁面背景顏色和文本顏色在HTML代碼中是如何表示的？RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強 一共可以表示：256256256=16777216種顏色 由于瀏覽器的關系，只有216種顏色能在瀏覽器中正常顯示，多于這個范圍的顏色，有的瀏覽器顯示時就可能發生偏差，不能正常顯示。 這個范圍我們稱之為網頁安全顏色范疇 網頁中運用顏色原則：切忌采用過；背景顏色不要太深；要保持整個網頁的色調統一；要圍繞網頁主題選擇顏色2、講授新課（1）網頁中的圖像格式 *BMP：位圖格式 GIF：Graphics Interchange Format可交換的圖像格式 特點：只支持256

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

23、 、掌握圖像使用2 、掌握圖像的其它操作六、教學過程此節是實驗課，實驗步驟為：（01）啟動Dreamweaver 8，打開ch05SAMPLE01MAP.ASP文件。（02）選中該文檔中“絲綢之路示意圖”圖像。（03）在菜單欄中依次選擇“窗口”|“屬性”選項或按下Ctrl+F3組合鍵，打開“屬性”面板，如果沒有顯示圖像地圖制作工具，單擊“屬性”面板右下角的擴展箭頭， （04）在“屬性”面板中的“地圖”文本框中輸入圖像地圖名稱。（05）創建圖像地圖（熱區），可根據地圖中不同的形狀選擇不同的熱區工具，在所選定圖像上拖動鼠標指針，便可完成圖像地圖的創建。（06）圖像地圖創建完成后，選中所創建的熱區，

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

25、網頁 2 、框架的基本結構 3 、框架的各種屬性 4 、框架結構之間的鏈接二、課型：新授課三、課時：2個課時四、教學重點與難點重點：1、框架的各種屬性 2、框架結構之間的鏈接 難點：1、框架的各種屬性 2、框架結構之間的鏈接五、教學目的1 、掌握框架的基本結構 2 、掌握框架的各種屬性 3 、掌握框架結構之間的鏈接六、教學過程1、復習引入 回憶：Frontpage中的框架應用 2、框架的應用 重復出現在不同網頁文檔中的元素：網頁標題、導航欄等等 3、建立框架（1） 將對象面板切換到框架頁（Frame）（2）插入不同的框架，一個區域對應于一個頁面（3）在框架中打開原有網頁：文件（File）在框架

26、中打開（Open in Frame） 4、保存框架 （1） 選擇文件（File）/保存所有框架（Save Frameset），先保存框架文件，接著會出現提示，逐個保存框架中的網頁（2） 保存時注意名稱5、框架編輯框架面板：窗口（Windows）其它（Other）框架（Frame）調出框架面板選定框架組：單擊整個框架組的邊框；或在框架面板中單擊整個框架的邊框框架屬性：名稱、源文件，滾動否，是否可以調整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等拆分框架：按Alt鍵，拖動邊框；修改（Modify）框架頁（Frameset）拆分左/右/上/下（split frame top/bottom/lef

27、t/right） *注意區別：插入一個新的框架與拆分框架的區別6、框架所對應的HTML代碼 框架組：通過設置rows或cols來設定是橫的還是豎的，是頂部還是底部 框架組屬性：frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距框架項： 框架屬性：src指向的頁面，name框架名，scrolling是否有滾動條，noresize不能由用戶改變大小 七、作業處理1、建立框架頁面如圖，菜單鏈接到不同的圖片，單擊菜單中的一項，圖片在右邊的框架中打開2、建立左右型的框架，并在其中的左框架中插入上下型的框架3、建立左右型框架，并將左邊的框架拆分為上下型八、教

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

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

30、入如圖6-15所示的文本并插入一個9行1列的表格。其中“休閑娛樂”文本為隸書5號字體，顏色為#66CC00；表格邊框的顏色為白色；單元格的高度為30像素，單元格的對齊方式為水平居中、垂直居中。（09）在“頁面屬性”對話框中將_top框架的標題設置為“標題欄”，將所有邊界都設置為0（10）將光標停留在_top框架中，輸入文本并插入images文件夾下的圖像，其中文本為4號宋體，顏色為#66CC00。（11）設置鏈接。選中左邊框架（index）中目錄下的“考試作弊”文本，在“屬性”面板中的“鏈接”框中設置與之對應的笑話內容（WJ/wj6-1.asp）的鏈接。這時“目標”框變為激活狀態，從“目標”下

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

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

33、布局單元格邊線上的調整手柄，拖動鼠標便可調整布局單元格的大小移動布局表格和布局單元格:（01）選中要移動的布局表格或布局單元格。（02）使用方向鍵便可移動布局表格或布局單元格了，但這樣每次只能移動1像素的距離；如果是在按下Shift鍵的同時再利用方向鍵移動，每次可移動10像素的距離。設置布局寬度為固定寬度:具體操作步驟如下：（01）選擇要設置固定寬度的布局表格。（02）在菜單欄中選擇“窗口”|“屬性”選項，打開“屬性”面板。（03）在“屬性”面板中選擇“固定”單項按鈕，并在后面的文本框中輸入一個數值，在此輸入640，其單位在默認的條件下是像素。七、作業處理進入布局模式，練習布局與布局單元格八、

34、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。課題：制作完整頁面一、教學基本內容利用布局制作完整頁面 二、課型：實驗課三、課時：2個課時四、教學重點與難點重點：布局表格的創建 難點：布局單元格的使用五、教學目的1 、掌握布局表格的運用 2 、掌握布局單元格的作用六、教學過程步驟：（01）選中在布局表格中所繪制的布局單元格，在“屬性”面板中將該布局單元格的寬度也設置為775像素，高度為68像素。（02）將光標停留在布局單元格內，選擇菜單欄中的“插入”|“圖像”選項，在彈出的“選擇圖像源文件”對話框中，選擇存放在ch07IMAGES文件夾下的BANE

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

36、），如（08）在圖7-17所示布局單元格（1）中繪制4個寬度為136像素，高度為34像素的布局單元格，并在其單元格內分別輸入文本，（09）填充布局單元格內容。完成所對應的布局單元格文本的輸入（10）最后將“布局模式”轉化為“標準模式”。在“標準模式”中根據自己的審美觀進行調整，可為布局單元格的邊框進行修飾第八章 鏈接課題：鏈接與路徑介紹一、教學基本內容1、鏈接的基本知識2、路徑的基本知識二、課型：新授課三、課時：2個課時四、教學重點與難點重點：鏈接與路徑的概念難點：路徑的理解五、教學目的1 、掌握路徑的類型2 、能夠正確運用路徑六、教學過程1、引入在打開一個文件或插入一張圖片的時候都會用到路徑

37、，由此來引入究竟什么是路徑。2、講授新課（1）URL簡介URL（Uniform Resource Locator，統一資源定位符）主要用于指定欲取得因特網上資源的位置與方式。一個URL的構成如下：資源取得方式：/URL地址port/目錄/文件名稱（2）路徑類型要正確創建鏈接，必須了解鏈接與被鏈接文檔之間的路徑。每個網頁都有一個唯一的地址，即URL。常用的文檔路徑類型有3種：絕對路徑 ：絕對路徑就是被鏈接文檔的完整URL，包括所使用的傳輸協議（對于網頁通常是http:/）。文檔相對路徑 ：文檔相對路徑指以原來文檔所在位置為起點到被鏈接文檔所經過的路徑。這是用于本地鏈接最適宜的路徑。根相對路徑：根

38、相對路徑是指從站點根文件夾到被鏈接文檔所經過的路徑。一個根相對路徑以正斜杠開頭，其代表站點根文件夾。給出例子以區分這三種類型：例：a: c:/website/img/photo.jpg(這是photo.jpg的絕對路徑)b: c:/website/web/index.htm c:/website/img/photo.jpg（指出photo.jpg的相對路徑）七、作業處理通過在地址欄中輸入一個文件的地址來練習路徑的使用。八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。課題：創建鏈接一、教學基本內容1、創建錨記鏈接2、創建空鏈接3、創建下載鏈接二、

39、課型：講授+實驗三、課時：2個課時四、教學重點與難點重點：下載鏈接難點：錨記鏈接五、教學目的1 、掌握鏈接創建的不同方法2 、掌握錨記鏈接的創建六、教學過程1、創建鏈接方法：（01）選擇窗口中要鏈接的文本或圖像。選擇“窗口”|“屬性”選項，打開“屬性”面板，并執行以下操作之一a:單擊“鏈接”框右邊的“瀏覽文件”圖標 ，如圖8-1所示，在彈出的“選擇文件”對話框中瀏覽并選擇一個文件。注意，在“選擇文件”對話框中的“相對于”下拉列表中，通常選擇“文檔”而不選擇“站點根目錄”。單擊“選擇文件”對話框中的“確定”按鈕，在“鏈接”框中將顯示出被鏈接文件的路徑。b:在“屬性”面板的“鏈接”框中，輸入要鏈接

40、的文檔的路徑，如圖8-2所示。（02）選擇被鏈接文檔的載入位置。在默認情況下，被鏈接文檔在當前窗口或框架中打開。要使被鏈接的文檔顯示在其他地方，需要從“屬性”面板的“目標”下拉列表中選擇一個選項。2、創建錨記鏈接錨記鏈接（簡稱錨記）就是在文檔中插入一個位置標記，并給該位置設置一個名稱。步驟：（01）打開ch08LIANJIE.ASP文件，把光標置于文檔中“比輸贏”文本的右邊（文檔中需要設置錨記的地方）。（02）在文檔窗口的菜單欄中依次選擇“插入”|“命名錨記”選項（03）在“命名錨記”對話框的“錨記名稱”文本框中輸入錨記名：mj1（注意，所命名錨記是區分大小寫的）。（04）如果錨記標記沒有出現

41、在插入點，選擇“查看”|“可視化助理”|“不可見元素”選項，在所選擇插入“錨記”的位置便會出現錨記標志，如圖8-16所示。（05）同樣的方法，分別在笑話欄下的“先生尿褲”、“大街上叫喊的人”文本的右邊插入錨記，并且分別命名為mj2、mj3。（06）在菜單欄中選擇“窗口”|“屬性”選項，打開“屬性”面板。（07）選中窗口左邊“笑話集錦”下的“比輸贏”文本，在“屬性”面板中的“鏈接”框中輸入#mj1。（08）同樣的方法，分別創建“笑話集錦”欄下的“先生尿褲”、“大街上叫喊的人”文本與#mj2、#mj3的錨記鏈接。（09）保存操作結果。七、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具

42、均在計算機上用PPT課件進行演示。第九章 層與時間軸課題：層的創建與設置一、教學基本內容1、層的創建2、層的基本操作3、層的屬性二、課型：新授課三、課時：2個課時四、教學重點與難點重點：層的屬性難點：z-index、子層五、教學目的掌握層的相關操作，為動畫設置打基礎六、教學過程1、復習引入 網頁中的定位-表格2、 建立層（1）菜單，插入（Insert）層（Layer），默認大小：200115（2） 對象面板3、 層的意義（1）可以將元素重疊（2）可以用于精確定位網頁元素（3）可以通過應用時間線使層移動和變換，實現簡單的動畫效果（4）網頁和網頁元素的可見或不可見可以通過層的顯示和隱藏屬性實現（5

43、）層可以轉換成表格 4、層屬性 （1）層編號（LayerID）（2）Z軸（Z-index）：控制層重疊時誰在前誰在后的問題 （3）背景圖像（Bgimage） （4）顯示（Vis）：默認（default）、（繼承）inherit、（可見）visible、隱藏（hidden）四個選項之一 （5）標簽（Tag）：DIV、SPAN、LAYER、ILAYER，選DIV （6）溢出（Overflow）：當層內容超過層大小的時候如何顯示。顯示層內的全部內容（visible）、只顯示層尺寸以內的內容（hidden）、不改變層大小、只添加滾動條（scroll）、只有層不夠大時才顯示滾動條（auto） （7）剪裁

44、（Clip）：指定層的哪一部分是可見的，輸入的數值是距離層的4個邊界的距離 6、 子層 （1）在一個層中再插入一個層，后者就是前者的子層（2）子層不一定在父層里面（3） 移動子層，父層位置不發生變化（4）移動父層，子層跟著變化，對父層的相對位置不變（5）子層可以繼承父層的可見性 7、層與表格的轉換 （1）層轉換為表格：修改-轉換層到表格 （2）表格轉換為層：修改-轉換表格到層七、作業處理1、制作陰影字 2、用層將5個圖片放置圍繞一個圖片 3、將上題結果轉換為表格八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。課題：時間軸與其相關操作一、教學基本

45、內容1、時間軸的概念2、制作層的時間軸動畫3、給時間軸附加動作二、課型：新授課三、課時：2個課時四、教學重點與難點重點：制作層的時間軸動畫難點：1、錄制層的時間軸運動路徑 2、添加附加動作五、教學目的掌握簡單的動畫設置六、教學過程創建時間軸動畫步驟：（01）在頁面添加層，并在層中插入元素（如一幅圖片或一些文字），把層移到動畫的起始位置。（02）選擇“窗口”|“時間軸”選項，打開“時間軸”面板。（03）選擇要制作動畫的層。單擊層標記或層邊界，或用“層”面板選擇層（注意：在層內部單擊，可以把插入點置于層內，但并不選中該層。當一個層被選中時，層邊界會顯示出可調整大小的手柄）。（04）直接把選定的對象

46、拖入“時間軸”面板中；或者單擊“時間軸”面板中的 按鈕，選擇“添加對象”選項。（05）此時時間軸的第一個通道中將出現一個紫色條，即動畫條，條中顯示了層的名稱Layer1，動畫條兩端的兩個圓圈，即為時間軸的關鍵幀。（06）單擊第1個關鍵幀，將紅色的播放頭移到第1個關鍵幀，拖動被選中的層到某一個位置，即確定動畫運動的起始位置。（07）單擊動畫條最后的關鍵幀標記（注意播放頭也跟著移到該處），再把頁面上的該層拖到動畫結束處。之后，從動畫起始位置到結束位置會顯示一條線，這就是層的運動軌跡。如果沒有顯示一條線，說明做法不對，需要重新開始。（08）如果使動畫層作曲線移動，選擇動畫條，按住Ctrl鍵單擊，在插

47、入點位置添加一個關鍵幀；或在動畫條中間單擊一幀，并從右鍵快捷菜單中選擇“增加關鍵幀”選項。（09）移動層，使運動軌跡呈曲線狀。（10）單擊“播放”按鈕，預覽頁面上的動畫七、作業處理根據書上的實例，創建一個網站廣告。八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。第十章 表單課題：表單創建、對象及其屬性一、教學基本內容1 、表單概念2 、表單創建3 、表單屬性二、課型：新授課三、課時：2個課時四、教學重點與難點重點：1、創建表單2、掌握表單的應用難點：1 、掌握表單元素的各項屬性 2 、能獨立制作完成常見的各種表單頁面五、教學目的掌握表單創建方法

48、六、教學過程向學生演示多個項目：成品站點，分階段演示和分析此網頁的設計流程和過程，在每個階段演示完畢后，讓學生對此階段進行鞏固。講解完畢后學生完成課后作業，教師實施指導。 第一步：演示并講解注冊網頁。 第二步：分步演示并講解、制作表單元素。第三步：分析并制作網頁。第四步：課程小結。七、作業處理第一步：演示并分析網頁中的相關效果。第二步：分步講解并完成網頁中效果的實現。 第三步：分組討論并修改網頁八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。課題：制作調查表單一、教學基本內容1 、表單概念2 、表單創建3 、表單屬性二、課型：實驗課三、課時：2

49、個課時四、教學重點與難點重點：1、創建表單2、掌握表單的應用難點：1 、掌握表單元素的各項屬性 2 、能獨立制作完成常見的各種表單頁面五、教學目的能夠熟練的運用表單中的各個屬性，會制作表單。六、教學過程調查表單制作過程：（01）用Dreamweaver 8打開ch10SAMPLE02FORM2.ASP文件。（02）打開“插入”工具欄，在“表單”標簽下單擊“表單”按鈕 ，在頁面中創建一個表單。03）在所插入的表單中插入一個6行4列、寬度為600的表格，其中表格的邊框粗線為1。（04）根據需要對表格進行編輯，并在表格內輸入所要調查的項目。（05）在表格內插入對應的表單對象，設置各表單對象屬性（名稱

50、不做要求），。（06）完成該網上調查表單的制作，保存文檔七、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。學生利用計算機進行實驗操作。第十一章 行為課題：行為面板用法及基本操作一、教學基本內容1 、行為的基本知識2 、事件的基本知識3 、行為動作二、課型：新授課三、課時：2個課時四、教學重點與難點重點：1、行為面板的用法2、行為動作難點：行為的動作 五、教學目的掌握行為面板的用法，并且會添加行為。六、教學過程1、行為的概念行為是事件和動作的組合。動作是預先編寫好的JavaScript腳本，可用來執行指定任務。事件則是由瀏覽器為每個頁面元素定義的，

51、是訪問者對網頁的基本操作2、行為面板的用法（01）選擇“窗口”|“行為”選項或按Shift+F4組合鍵打開“行為”面板，（02）單擊“行為”面板中的 按鈕，則可在出現的菜單中選擇所需要的動作。（03）選中“行為”面板中某一事件，單擊 按鈕便可從事件列表中刪除所選擇的事件。3、行為的基本操作（1）添加行為（2）修改行為4、行為動作在這里行為包含了二十多種動作，不再一一敘述。5、鞏固練習對各種行為動作進行練習，看其效果。七、作業處理在網頁中添加一些內容，然后添加一些行為。八、教具所用的教室為多媒體實驗室，因此所要板書的內容及使用的工具均在計算機上用PPT課件進行演示。學生利用計算機進行實驗操作。課

52、題：行為動作及事件設置一、教學基本內容1 、事件的基本知識2 、行為事件的設置二、課型：新授課三、課時：2個課時四、教學重點與難點重點：1、行為面板的用法2、事件的種類難點：對事件的理解及掌握 五、教學目的掌握各個事件的作用。六、教學過程檢查表單步驟：（01）用Dreamweaver 8打開光盤中的ch11SAMPLE02FORM.ASP文件。（02）在文檔的標簽欄中選中標簽。選擇“窗口”|“行為”選項，打開“行為”面板。（03）在打開的“行為”面板中單擊 按鈕，在彈出的行為菜單中選擇“檢查表單”選項。（04）在“檢查表單”對話框中，從“命名的欄位”中選擇要驗證的表單對象文本域的名稱，“值”是用來確定某個文本域是否可以空缺，“可接受”欄中用來設置文本域所要輸入的文本類型以及對文本的限制，將E-MAIL文本域設置為必填內容、電子郵件地址。最后單擊“確定”按鈕返回。（05）更改行為的觸發事件。選擇“行為”面板中的 按鈕，在彈出的菜單中，將行為事件設置為on