dreamweaver8網(wǎng)頁實用設(shè)計教案

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29、 八、教具所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。課題：創(chuàng)建電子圖書一、教學(xué)基本內(nèi)容利用框架制作電子圖書網(wǎng)頁 二、課型：實驗課三、課時：2個課時四、教學(xué)重點與難點重點：框架結(jié)構(gòu)之間的鏈接 難點： 框架集五、教學(xué)目的1 、掌握框架的運用 2 、掌握框架結(jié)構(gòu)之間的鏈接六、教學(xué)過程步驟：（01）打開或新建一個空白的文檔，在該文檔中創(chuàng)建一個 框架集。（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è)圖進行設(shè)置，然后單擊“確定”按鈕。（07）定義樣式。選擇“文本”|“CSS樣式”|“新建”選項，將index框架的06B.asp文檔的tr標簽定義為宋體9points。（08）填充頁面。在index框架06

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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