另存為模板。在彈出的“另存模板”對話框中，“站點”下拉列表框用來設(shè)置模板保存的站點，課選擇一個選項?！艾F(xiàn)存的模板”選框顯示了當(dāng)前站點的所有模板?！傲泶鏋椤蔽谋究蛴脕碓O(shè)置模板的命名。單擊“另存模板”對話框中的“保存”按鈕，就把當(dāng)前網(wǎng)頁轉(zhuǎn)換為了模板，同時將模板另存到選擇的站點。9
單擊“保存”按鈕，保存模板。系統(tǒng)將自動在根目錄下創(chuàng)建Template文件夾，并將創(chuàng)建的模板文件保存在該文件夾中。在保存模板時，如果模板中沒有定義任何可編輯區(qū)域，系統(tǒng)將顯示警告信息。我們可以先單擊“確定”，以后再定義可編輯區(qū)域。
3、從文件菜單新建模板 選擇“文件/新建”命令，打開“新建文檔”對話框，然后再類別中選擇“模板頁”，并選取相關(guān)的模板類型，直接單擊“創(chuàng)建”按鈕即可?！?/p>
（二）Dreamweaver 8 定義可編輯區(qū)域 模板創(chuàng)建好后，要在模板中建立可編輯區(qū)，只有在可編輯區(qū)里，我們才可以編輯網(wǎng)頁內(nèi)容?？梢詫⒕W(wǎng)頁上任意選中的區(qū)域設(shè)置為可編輯區(qū)域，但是最好是基于HTML代碼的，這樣在制作的時候更加清楚。在文檔窗口中，選中需要設(shè)置為可編輯區(qū)域的部分，單擊常用快捷欄的“模板”按鈕，在彈出菜單中選擇“可編輯區(qū)域”項。10
在彈出的“新建可編輯區(qū)域”對話框中給該區(qū)域命名，然后單擊“確定”按鈕。新添加的可編輯區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽上是可編輯區(qū)域的名稱。如果希望刪除可編輯區(qū)域，可以將光標(biāo)置于要刪除的可編輯區(qū)域內(nèi)，選擇“修改/模板/刪除模板標(biāo)記”命令，光標(biāo)所在區(qū)域的可編輯區(qū)即被刪除。這樣模板文件就創(chuàng)建好了。
（三）、其他模板區(qū)域 模板中除了可以插入最常用的“可編輯區(qū)域”外，還可以插入一些其他類型的區(qū)域，分別為“可選區(qū)域”、“重復(fù)區(qū)域”、“可編輯可選區(qū)域”和“重復(fù)表格”。
1、可選區(qū)域 可選區(qū)域是模板中的區(qū)域，用戶可將其設(shè)置為在基于模板的文件中顯示或隱藏。當(dāng)要為在文件中顯示的內(nèi)容設(shè)置條件時，即可使用可選區(qū)域。
2、重復(fù)區(qū)域 重復(fù)區(qū)域時可以根據(jù)需要在基于模板的頁面中負(fù)值任意次數(shù)的模板部分。重復(fù)區(qū)域通常用于表格，也可以為其他頁面元素定義重復(fù)區(qū)域。
（四）、Dreamweaver 8 使用庫 所謂庫項目，實際上就是文檔內(nèi)容的任意組合，可以將文檔中的任意內(nèi)容存儲為庫項目，使它在其它地方被重復(fù)使用。
1、創(chuàng)建庫 在文檔窗口中選擇需要保存為庫項目的內(nèi)容。單擊資源面板“庫”分類中右下角的“新建庫項目”按鈕。一個新的項目出現(xiàn)在資源面板“庫”分類的列表中，預(yù)覽框中顯示預(yù)覽的效果，還可以給該項目鍵入新名稱。這樣，一個庫項目就創(chuàng)建好了。
2、插入庫 將光標(biāo)方在網(wǎng)頁中需要插入庫文件的位置，在資源面板“庫”分類中選擇需要插入的庫項目，直接拖動到光標(biāo)所在位置即可。
3、更改庫 如果修改了庫文件，選擇“文件/保存”命令，彈出“更新庫項目”對話框，詢問是否更新網(wǎng)站中使用了該庫文件的網(wǎng)頁。單擊“更新”按鈕，將更新網(wǎng)站中使用了該庫文件的網(wǎng)頁。
3、彈出是否更改鏈接的提示，選擇“是”。此時，在站點內(nèi)自動生成一個名為“Templates”的文件夾，名稱為mo1.dwt的模板文件被保存在該文件夾中。
標(biāo)簽，選擇菜單欄的插入>模板對象>可編輯區(qū)域命令。5、彈出“可編輯區(qū)域”對話框，點擊“確定”。這樣我們就完成了模板的制作。
6、新建06.html文件，選擇菜單欄>窗口>資源命令，打開資源面板。
7、點擊資源面板的“模板”按鈕，在資源面板我們就可以看見mo1.dwt文件，選中mo1.dwt，按住鼠標(biāo)左鍵直接拖拽到06.html的文檔窗口中。即可將該模板應(yīng)用到06.html中。第11章 CSS樣式表 教學(xué)目標(biāo)： 1.能在網(wǎng)頁文檔中建立選擇器類型為“類”的CSS樣式表 2.能在網(wǎng)頁文檔中通過“class”屬性使用類型為“類” 樣式表 3.能夠建立CSS樣式表文件，并在該文件中定義各種樣式表 4.能夠建立選擇器類型為“偽類”的樣式表 5.能夠在網(wǎng)頁文檔中引用CSS樣式表文件 教學(xué)重點： CSS中的各種屬性、熟悉CSS面板的使用 教學(xué)難點： CSS中的各種屬性、熟悉CSS面板的使用 教學(xué)課時：理論：2課時 實訓(xùn)：4課時 教學(xué)方法：講授法、任務(wù)驅(qū)動法。教學(xué)過程:
一、引入新課 12 將樣式表與網(wǎng)頁相關(guān)聯(lián)，關(guān)聯(lián)的網(wǎng)頁將自動套用樣式表中的格式。使所有網(wǎng)頁中都可以應(yīng)用相同的樣式，這樣既保證了站點風(fēng)格的一次性，又提高了工作效率。
二、講授新課：
（一）、CSS樣式定義 層疊樣式表(CSS)是一系列格式設(shè)置規(guī)則，它們控制 Web 頁面內(nèi)容的外觀。使用 CSS 設(shè)置頁面格式時，內(nèi)容與表現(xiàn)形式是相互分開的。頁面內(nèi)容（HTML 代碼）位于自身的 HTML 文件中，而定義代碼表現(xiàn)形式的 CSS 規(guī)則位于另一個文件（外部樣式表）或 HTML 文檔的另一部分（通常為
部分）中。使用 CSS 可以非常靈活并更好地控制頁面的外觀，從精確的布局定位到特定的字體和樣式等。術(shù)語“層疊”是指對同一個元素或 Web 頁面應(yīng)用多個樣式的能力。例如，可以創(chuàng)建一個 CSS 規(guī)則來應(yīng)用顏色，創(chuàng)建另一個規(guī)則來應(yīng)用邊距，然后將兩者應(yīng)用于一個頁面中的同一文本。所定義的樣式“層疊”到您的 Web 頁面上的元素，并最終創(chuàng)建您想要的設(shè)計。CSS樣式表的創(chuàng)建，可以統(tǒng)一定制網(wǎng)頁文字的大小、字體、顏色、邊框、鏈接狀態(tài)等效果。在Dreamweaver 8中CSS樣式的設(shè)置方式有了很大的改進，更為方便、實用、快捷。(二）、CSS樣式分類 CSS樣式包括3種：可應(yīng)用于任何標(biāo)簽、重新定義的特定標(biāo)簽樣式和選擇器樣式。①可應(yīng)用于任何標(biāo)簽需要選定應(yīng)用對象，然后進行應(yīng)用。使用自定義CSS樣式可以控制各種網(wǎng)頁元素的外觀，其中包括文本的字體變化、字間距和行間距變化以及邊框效果等多重屬性。②重新定義的特定標(biāo)簽不需要應(yīng)用，所有網(wǎng)頁中的該類標(biāo)簽都將自動生效。重定義HTML標(biāo)簽可以改變標(biāo)簽的默認(rèn)樣式。用戶可以通過修改特定標(biāo)簽的樣式來改變網(wǎng)頁特定標(biāo)簽的屬性。③選擇器樣式也不需要應(yīng)用，直接生效。CSS選擇器可以控制超級鏈接的樣式。在修改CSS選擇器樣式時，a：link控制網(wǎng)頁中鏈接文本的普 13 通狀態(tài)外觀。a:visited控制已經(jīng)訪問的超級鏈接文本的外觀。a:hover控制的是鼠標(biāo)懸停狀態(tài)下超級鏈接文本的外觀。(三）、使用CSS樣式美化頁面1、文本樣式的設(shè)置 新建CSS樣式, “選擇器類型”為類，名稱為 “style1”定義在“僅對該文檔”。保存至站點根目錄下的CSS文件夾內(nèi)，彈出“CSS規(guī)則定義”對話框，默認(rèn)顯示的就是對文本進行設(shè)置的“類型”項。字體：可以在下拉菜單種選擇相應(yīng)的字體。大?。捍笮【褪亲痔?，可以直接填入數(shù)字，然后選擇單位。樣式：設(shè)置文字的外觀，包括正常、斜體、偏斜體。行高：這項設(shè)置在網(wǎng)頁制作種很常用。設(shè)置行高，可以選擇“正?！保層嬎銠C自動調(diào)整行高，也可以使用數(shù)值和單位結(jié)合的形式自行設(shè)置。需要注意的是，單位應(yīng)該和文字的單位一致，行高的數(shù)值是包括字號數(shù)值在內(nèi)的。例如，文字設(shè)置為12pt，如果要創(chuàng)建一倍行距，則行高應(yīng)該為24pt。變量：在英文種，大寫字母的字號一般比較大，采用“變量”中的“小型大寫字母”設(shè)置，可以縮小大寫字母。顏色：設(shè)置文字的色彩。
2、背景樣式的設(shè)置 在HTML中，背景只能使用單一的色彩或利用圖像水平垂直方向的平鋪。使用CSS之后，有了更加靈活的設(shè)置。在CSS規(guī)則定義”對話框左側(cè)選擇“背景”項，可以在右邊區(qū)域設(shè)置CSS樣式的背景格式。背景顏色：選擇固定色作為背景。背景圖像：直接填寫背景圖像的路徑，或單擊“瀏覽”按鈕找到背景圖像的位置。重復(fù)：在使用圖像作為背景的時，可以使用此項設(shè)置背景圖像的重復(fù)方式，包括“不重復(fù)”、“重復(fù)”、“橫向重復(fù)”、和“縱向重復(fù)“。附件：選擇圖像做背景的時候，可以設(shè)置圖像是否跟隨網(wǎng)頁一同滾動。水平位置：設(shè)置水平方向的位置，可以“左對齊“右對齊”、“居中”。還可以設(shè)置數(shù)值與單位結(jié)合表示位置的方式，比較常用的是像素單位。垂直位置：可以選擇“頂部”、“底部”、“居中”。還可以設(shè)置數(shù)值和單位結(jié)合表示位置的方式。
3、區(qū)塊樣式設(shè)置 在CSS規(guī)則定義”對話框左側(cè)選擇“區(qū)塊”項，可以在右邊區(qū)域設(shè)置CSS樣式的區(qū)塊格式。單詞間距“英文單詞之間的距離，一般選擇默認(rèn)設(shè)置。字母間距：設(shè)置英文字母間距，使用正值為增加字母間距，使用負(fù)值為減小字母間距。垂直對齊：設(shè)置對象的垂直對齊方式。文本對齊：設(shè)置文本的水平對齊方式。文字縮進：這是最重要的項目。中文文字的首行縮進就是由它來實現(xiàn)的。首先填入具體的數(shù)值，然后選擇單位。文字的縮進和字號要保持統(tǒng)一。如字號為12px，像創(chuàng)建兩個中文自的縮進效果，文字縮進就應(yīng)該為18px?？崭瘢簩υ创a文字空格的控制。選擇“正?！?，忽略源代碼文字之間的所有空格。選擇“保留”，將保留源代碼中所有的空格形式，包括由空格鍵、Tab鍵、Enter鍵創(chuàng)建的空格。顯示：制定是否以及如何顯示元素。選擇“無”則關(guān)閉它被制定給的元素的顯示。在實際控制中很少使用。
4、方框樣式的設(shè)置 在前面我們設(shè)置過圖像的大小、設(shè)置圖像水平和垂直方向上的空白區(qū)域、設(shè)置圖像是否有文字環(huán)繞效果等。方框設(shè)置進一步完善、豐富了這些設(shè)置。在CSS規(guī)則定義”對話框左側(cè)選擇“方框”項，可以在右邊區(qū)域設(shè)置CSS樣式的方框格式。寬：通過數(shù)值和單位設(shè)置對象的寬度。高：通過設(shè)置和單位設(shè)置對象的高度。浮動：實際就是文字等對象的環(huán)繞效果。選擇“右對齊”、對象居右。文字等內(nèi)容從另外一側(cè)環(huán)繞對象。選擇“左對齊”。對象居左，文字等內(nèi)容從另一側(cè)環(huán)繞?！盁o”取消環(huán)繞效果。清除：規(guī)定對象的一側(cè)不許有層?？梢酝ㄟ^選擇“左對齊”、“右對齊”，選擇不允許出現(xiàn)層的一側(cè)。如果在清除層的一側(cè)有層，對象將自動移到層的下面?！皟烧摺笔侵缸笥叶疾辉试S出現(xiàn)層?！盁o”是不限制層的出現(xiàn)?！疤畛洹焙汀斑吔纭保喝绻麑ο笤O(shè)置了邊框，“填充”是指邊框和其中內(nèi)容之間的空白區(qū)域；“邊界”是指邊框外側(cè)的空白區(qū)域。
5、邊框樣式設(shè)置 邊框樣式設(shè)置可以給對象添加邊框，設(shè)置邊框的顏色、粗細(xì)、樣式。在CSS規(guī)則定義”對話框左側(cè)選擇“邊框”項，可以在右邊區(qū)域設(shè)置CSS樣式的邊框格式。樣式設(shè)置邊框的樣式，如果選中“全部相同”復(fù)選框，則只需要設(shè)置“上”樣式，其它方向的樣式與“上”相同。寬度：設(shè)置4個方向邊框的寬度?？梢赃x擇相對值：細(xì)、中、粗。也可以設(shè)置邊框的寬度值和單位。顏色：設(shè)置邊框?qū)?yīng)的顏色，如果選中“全部相同”復(fù)選框，則其他方向的設(shè)置都與“上”相同。
6、列表樣式設(shè)置 CSS中有關(guān)列表的設(shè)置豐富了列表的外觀。在CSS規(guī)則定義”對話框左側(cè)選擇“列表”項，可以在右邊區(qū)域設(shè)置CSS樣式的列表格式。類型：設(shè)置引導(dǎo)列表項目的符號類型?？梢赃x擇圓點、圓圈、方塊、數(shù)字、小寫羅馬數(shù)字、大寫羅馬數(shù)字、小寫字母、大寫字母、無列表符號等。項目符號圖像：可以選擇圖像作為項目的引導(dǎo)符號，單擊右側(cè)的“瀏覽”按鈕，找到圖像文件即可。選擇ul標(biāo)簽可以對整個列表應(yīng)用設(shè)置，選中l(wèi)i標(biāo)簽可對單獨的項目應(yīng)用。位置：決定列表項目縮進的程度。選擇“外”，列表貼近左側(cè)邊框，選擇“內(nèi)”，列表縮進。這項設(shè)置效果不明顯。
7、定位樣式設(shè)置 “定位”項實際上是對層的設(shè)置，但是因為DW提供了可視化的層制作功能，所以此項設(shè)置在實際操作中幾乎不會使用。
8、擴展樣式的設(shè)置 CSS樣式還可以實現(xiàn)一些擴展功能，這些功能集中在擴展面板上。這個面板主要包括3種效果：分頁、光標(biāo)和過濾器。在CSS規(guī)則定義”對話框左側(cè)選擇“擴展”項，可以在右邊區(qū)域設(shè)置CSS樣式的擴展格式。分頁：通過樣式來為網(wǎng)頁添加分頁符號。允許用戶指定在某元素前或后進行分頁。分頁的概念是打印網(wǎng)頁種的內(nèi)容時在某指定的位置停止，然后將接下來的內(nèi)容繼續(xù)打印在下一頁紙上。光標(biāo)：通過樣式改變鼠標(biāo)形狀，鼠標(biāo)放置于被此項設(shè)置修飾的區(qū)域上的時，形狀會發(fā)生改變。具體的形狀包括：Hand（手）、crosshair（交叉十字）、text（文本選擇符號）、wait（Windows的沙漏形狀）、default（默認(rèn)的鼠標(biāo)形狀）、help（帶問號的鼠標(biāo)）、e-resize（向東的箭頭）、ne-resize（指向東北方的箭頭）、n-resize（向北的箭頭）、nw-resize（指向西北的箭頭）、w-resize（向西的箭頭）、sw-resize（向西南的箭頭）、s-resize（向南的箭頭）、se-resize（向東南的箭頭）、auto（正常鼠標(biāo)）。）過濾器：使用CSS語言實現(xiàn)過濾器（濾鏡）效果。單擊“過濾器”下拉列表框旁的按鈕，可以看見有多種濾鏡效果可供選擇。(四）、CSS樣式表的其他操作
1、編輯CSS樣式 選中需要編輯的樣式類型，選擇上圖中的“編輯”項或直接單擊“編輯樣式”按鈕，在彈出的“CSS規(guī)則定義”對話框中修改相應(yīng)的設(shè)置。編輯完成后單擊“確定”按鈕，CSS樣式就編輯完成了。
2、應(yīng)用CSS自定義樣式 鼠標(biāo)右鍵單擊在網(wǎng)頁中被選中的元素，在彈出的快捷菜單中選擇“CSS樣式”，在其子菜單中選擇需要的自定義樣式。
3、附加樣式表 選擇“附加樣式表”項，打開“鏈接外部樣式表”對話框，可以鏈接外部的CSS樣式文件?！拔募?URL”設(shè)置外部樣式表文件的路徑，可以單擊瀏覽按鈕，在瀏覽窗口中找到樣式表文件?！疤砑訛椤边x擇“鏈接”，這IE和Netscape兩種瀏覽器都支持的導(dǎo)入方式?！皩?dǎo)入”只有Netscape瀏覽器支持。16
課程：
課時：
教學(xué)對象：教師：
公 開 課 教 案
課題：
時間：
地點：多媒體教室五
教學(xué)目標(biāo)：
? 嚴(yán)格把握信息產(chǎn)業(yè)部關(guān)于“網(wǎng)頁設(shè)計師”職業(yè)技能鑒定大綱，使學(xué)生能夠最大程度滿足企業(yè)對網(wǎng)頁設(shè)計人員的需求，掌握網(wǎng)頁設(shè)計軟件的高級應(yīng)用。
? 掌握CSS的基本語法與功能。
? 熟悉“CSS樣式”面板與“相關(guān)CSS” 面板的使用。? 學(xué)會創(chuàng)建、插入樣式表。? 學(xué)會套用CSS樣式。教學(xué)對象分析：
由于講授對象為高職院校大專生，所講內(nèi)容以實際操作為主，注重訓(xùn)練學(xué)生動手能力，所以本課程以案例教學(xué)的方式講解。教學(xué)重點：
CSS樣式的創(chuàng)建、編輯、導(dǎo)出及應(yīng)用 教學(xué)難點：
應(yīng)用類樣式，設(shè)置CSS樣式屬性 教學(xué)方法和教具準(zhǔn)備：
在帶有大屏幕投影儀和計算機相連接的多媒體教室，采用教師講解與學(xué)生實踐相結(jié)合的授課方式。教學(xué)過程：
一、導(dǎo)入課題
復(fù)習(xí)上一章表單知識，簡要回顧前面幾章的學(xué)習(xí)：設(shè)置文本和網(wǎng)頁屬性、使用圖像、插入表格等，但是僅僅利用以上所學(xué)知識做出來的網(wǎng)頁比較枯燥，頁面并不完美。在網(wǎng)絡(luò)上形形色色的網(wǎng)站中，怎么才能讓自己的頁面獨樹一幟？
1、CSS樣式功能：能夠使你的頁面保持統(tǒng)一的風(fēng)格，它可以調(diào)整文字間距、行間距、刪除鏈接下劃線、固定背景圖像、制作特殊的邊框、改變鼠標(biāo)指針形狀等，并能夠簡化網(wǎng)站的制作過程。
2、拿css樣式做出來的頁面效果和沒有使用css樣式的頁面做比較，演示css樣式的特效
二、新課講解
1、CSS概述
⑴ 什么是CSS？
CSS（Cascading Style sheets，層疊樣式表）是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁設(shè)計必不可少的工具之一。CSS定義了控制元素外觀的樣式屬性。
⑵ CSS由來
CSS樣式由全球廣域網(wǎng)協(xié)會制定，分別是CSS1、CSS2
2、實例講解
實例
1、利用css樣式“類型”選項改變文本屬性
分析：Dreamweaver的文本控制功能不足，無論是字體大小，排列方式，還是行間距，等等，它所提供的選擇并不多，為了讓我們的網(wǎng)頁更加美觀，更加規(guī)范，有必要使用CSS。
步驟：
1.單擊“CSS面板”右下角“新建CSS樣式”按鈕，彈出“新建CSS樣式”對話框。設(shè)置完畢后點擊“確定”按鈕。2.在對話框 “類型”選項中，“字體”下拉列表框中選擇“華文新魏”，“大小”選擇“18”，“顏色”中選擇“#003300”，加粗，單擊“確定”按鈕。3.在文檔窗口中選擇文字，從“樣式”下拉列表框中選擇該樣式即可。
小結(jié)：本例中用到css樣式列表中的“類型”屬性。它可以幫助我們輕松地實現(xiàn)對文本格式的各種設(shè)置。
擴展：
1.引入外部樣式表
2.利用“區(qū)塊”選項組設(shè)置字母間距、縮進等屬性
實例
2、作出單張圖像的背景
分析：默認(rèn)狀態(tài)下在“頁面屬性”中選擇圖像，則在網(wǎng)頁文檔的整體背景上重復(fù)出現(xiàn)，在css中可以使背景圖像在指定位置上只顯示一次。
步驟： 1.單擊按鈕，選擇“新建”
2.在“背景圖像”中選擇合適的背景圖像，在“重復(fù)”列表中選擇“不重復(fù)”，在“水平位置”中選擇“右對齊”，在“垂直位置”中選擇“居中”，在“附件”中選擇“固定”，單擊“確定”按鈕。
3.選中
標(biāo)簽，在屬性欄的“樣式”中選擇該樣式。小結(jié)：本例中用到css樣式列表中的“背景”屬性。它可以幫助我們隨意設(shè)置背景圖像。
實例
3、利用css樣式給表格設(shè)置特殊邊框，用圖像作列表、改變鼠標(biāo)指針。
分析：利用css樣式為表格設(shè)置不同顏色、樣式的邊框，用漂亮的圖標(biāo)作列表也可將鼠標(biāo)指針改成動畫。
步驟：如實例2，但使用不同的新建及應(yīng)用方式。
擴展：為![]()
標(biāo)簽加雙線邊框、利用“定位”列表項將表格像“層”一樣任意移動。
實例
4、特效文字
說明：在photoshop等圖像制作軟件中經(jīng)常會聽到濾鏡的概念，濾鏡能作出很多神奇的特效，然而在dreamweaver mx2004中我們可以利用樣式表設(shè)定各種濾鏡效果。
實例
5、圖像特效
說明：利用“濾鏡”項為圖像設(shè)置不同樣式。
思考題：改變網(wǎng)頁超級鏈接樣式
作業(yè)：
p204頁，課后習(xí)題
上機練習(xí)：
1.對已經(jīng)編輯的文檔使用新的文本樣式（包括超級鏈接時樣式改變）2.將單張圖像作背景并且不滾動、水平:右對齊，垂直:底部 3.改變鼠標(biāo)指針樣式 4.光暈字
5.對圖像使用濾鏡功能
三、教學(xué)后記
初識Dreamweaver 8 課題：Dreamweaver8簡介及創(chuàng)建文檔
一、教學(xué)基本內(nèi)容
1、什么是網(wǎng)頁和網(wǎng)站
2、網(wǎng)頁的分類
3、網(wǎng)頁中的常用術(shù)語
4、網(wǎng)頁設(shè)計的相關(guān)知識
5、認(rèn)識Dreamweaver 8
6、Dreamweaver 8的基本操作
7、Dreamweaver 8工作界面介紹
二、課型：新授課
三、課時：1個課時
四、教學(xué)重點與難點 重點：什么是網(wǎng)頁和網(wǎng)站 難點：
1、網(wǎng)頁的分類
2、網(wǎng)頁設(shè)計的一般步驟
3、Dreamweaver 8的基本操作
五、教學(xué)目的、對Dreamweaver這個制作網(wǎng)頁的工具及網(wǎng)頁有一定的認(rèn)識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的興趣
2、一定要學(xué)會建立一個空白網(wǎng)頁
3、會對頁面有一個簡單的設(shè)置
六、教學(xué)過程
1、什么是網(wǎng)頁和網(wǎng)站
（1）網(wǎng)頁
網(wǎng)頁是由HTML（超級文本標(biāo)識語言）或者其他語言編寫的，通過IE瀏覽器編譯后供用戶獲取信息的頁面，它又稱為Web頁，其中可包含文字、圖像、表格、動畫和超級鏈接等各種網(wǎng)頁元素。
（2）網(wǎng)站
網(wǎng)站就是一個或多個網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁發(fā)布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面。
? 門戶網(wǎng)站 ? 職能網(wǎng)站 ? 專業(yè)網(wǎng)站 ? 個人網(wǎng)站
2、網(wǎng)頁的分類
（1）按所處位置分類
按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。
(2)按表現(xiàn)形式分類
按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。
3、網(wǎng)頁設(shè)計的相關(guān)知識（1）設(shè)計網(wǎng)頁的原則
A、整體規(guī)劃 B、鮮明的主題 C、善用圖像 D、醒目的導(dǎo)航 E、及時更新 F、易記的網(wǎng)站名稱 G、通用網(wǎng)頁 H、動畫適量
（2）網(wǎng)頁設(shè)計的一般步驟
A、規(guī)劃網(wǎng)站 B、收集整理資源 C、配置站點 D、創(chuàng)建頁面 E、測試站點 F、發(fā)布站點
G、維護、更新站點（3）網(wǎng)頁制作的常用工具 A、網(wǎng)頁設(shè)計軟件
Dreamweaver是目前使用最多的網(wǎng)頁設(shè)計軟件。B、圖像處理軟件
制作網(wǎng)頁圖像的軟件種類繁多，大多數(shù)網(wǎng)頁設(shè)計人員選擇的是Fireworks或Photoshop。
C、動畫制作軟件
網(wǎng)頁動畫制作中最常用的軟件非Flash莫屬。
4、Dreamweaver 8的基本操作 A、啟動Dreamweaver 8 B、新建空白HTML網(wǎng)頁
C、保存網(wǎng)頁文檔
D、預(yù)覽網(wǎng)頁效果
E、退出Dreamweaver 8
第一章 Dreamweaver8概述
課題：Dreamweaver8簡介及創(chuàng)建文檔
一、教學(xué)基本內(nèi)容
1、Dreamweaver8 的工作界面
2、建立html文檔
二、課型：新授課
三、課時：1個課時
四、教學(xué)重點與難點
重點：熟悉Dreamweaver8工作界面中各個工具的作用 難點：
1、各個面板的調(diào)用
2、建立一個HTML的網(wǎng)頁
3、插處圖像
五、教學(xué)目的、對Dreamweaver這個制作網(wǎng)頁的工具及網(wǎng)頁有一定的認(rèn)識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的興趣
2、一定要學(xué)會建立一個空白網(wǎng)頁
3、會對頁面有一個簡單的設(shè)置
六、教學(xué)過程
1、引入
（1）為什么要用Dreamweaver而不用Frontpage? Dreamweaver是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．對象面板：標(biāo)準(zhǔn)、表格、表單、框架、特殊、文件廷冖隱藏、字符
c．啟動面板：站點管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資源管理
d．屬性面板：隨目前對象不同而內(nèi)容不同
(2)創(chuàng)建HTML網(wǎng)頁(3)在網(wǎng)頁中插入圖像
輸入文字以后，插入圖像，并對圖像設(shè)置對齊的方式，使之與文字呈混排的狀態(tài)。
3、鞏固練習(xí)
練習(xí)使用界面中的各個工具
七、作業(yè)處理
根據(jù)本節(jié)所學(xué)的內(nèi)容，課堂上練習(xí)創(chuàng)建一個空白網(wǎng)頁，并且輸入一段文字，在文本的左邊插入一張圖片
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
第二章
創(chuàng)建與規(guī)劃站點
課題：規(guī)劃站點及創(chuàng)建靜態(tài)站點
一、教學(xué)基本內(nèi)容
1、站點規(guī)劃概念
2、站點規(guī)劃的方法
3、站點的組成
4、定義站點
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、站點組成
2、如何創(chuàng)建靜態(tài)站點 難點：
1、站點的定義
2、編輯、刪除站點
五、教學(xué)目的
1、掌握建立靜態(tài)站點的流程
2、掌握靜態(tài)站點的基本操作
六、教學(xué)過程
1、復(fù)習(xí)引入
由上節(jié)所學(xué)習(xí)的建立HTML網(wǎng)頁引出站點概念
2、講授新課
（1）站點規(guī)劃概念及方法
概念：所謂本地站點，就是指定本地硬盤中存放遠(yuǎn)程站點所有文檔的文件夾 方法：規(guī)劃網(wǎng)站一般需要從3個方面去思考，即網(wǎng)站的主題、網(wǎng)站的內(nèi)容和網(wǎng)站的對象。
（2）創(chuàng)建本地站點
站點組成：Dreamweaver 8站點由3部分組成，具體內(nèi)容取決于環(huán)境和所開發(fā)的Web站點類型。包括本地文件夾、遠(yuǎn)程文件夾、動態(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）選擇了本地站點文件夾后，單擊該對話框中的“下一步”按鈕，進入設(shè)置是否與遠(yuǎn)程服務(wù)器相連的對話框，在這里選擇“無”，設(shè)置為不與遠(yuǎn)程服務(wù)器相連，如圖2-9所示。
（05）單擊“下一步”按鈕，便會顯示在站點定義向?qū)е兴x擇設(shè)置的詳細(xì)報告，如果感覺滿意，單擊“完成”按鈕，完成本網(wǎng)站的創(chuàng)建，如圖2-10所示；否則單擊“上一步”按鈕重新修改各項設(shè)置。
（3）站點的基本操作
其基本操作包括編輯、復(fù)制、刪除站點。
3、鞏固練習(xí)
練習(xí)站點的建立，及其基本操作。
七、作業(yè)處理
在課堂上要求每一個同學(xué)在F盤下建立一個名為“我的站點”的文件夾，在dreamweaver中創(chuàng)建一個靜態(tài)站點，將站點信息存放到我的站點文件夾中。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：搭建動態(tài)網(wǎng)站服務(wù)器及創(chuàng)建動態(tài)站點
一、教學(xué)基本內(nèi)容
1、安裝IIS
2、動態(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:”下新建一個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)站點的準(zhǔn)備工作。
<02>進入“高級”選項卡。
（1）選擇“站點”|“新建站點”選項，選擇“站點定義”對話框中的“高級”選項卡。（2）從“分類”列表框中選擇“本地信息”（默認(rèn)選項）選項，如圖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、鞏固練習(xí)
練習(xí)站點的建立，及其基本操作。
七、作業(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、掌握項目列表的使用
六、教學(xué)過程
1、引入
首先例用一個已完成的網(wǎng)頁，讓學(xué)生來看別人的設(shè)置，由此引入文本的格式化。
2、講授新課（1）文本的輸入
兩種方法：a:直接在文檔窗口中輸入文本。即先選擇要插入文本的位置，然后直接輸入文本。
b:在其他編輯器中復(fù)制已經(jīng)生成的文本，然后切換到Dreamweaver 8文檔窗口中，將選取插入點，然后選擇“編輯”|“粘貼”選項。
（2）創(chuàng)建項目列表
類型：無序列表、有序列表、定義列表、目錄列表和菜單列表。
（3）插入日期
3、鞏固練習(xí)
練習(xí)各種項目列表的使用
七、作業(yè)處理
要求每一個同學(xué)建立一個名為“我的網(wǎng)頁”的空白文檔，在網(wǎng)頁中輸入文字，然后在右下角插入日期，在內(nèi)容當(dāng)中便用有序列表。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：CSS樣式
一、教學(xué)基本內(nèi)容、演示并講解 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é)目的、掌握 CSS 的基本概念 2、掌握 CSS 樣式定義 3、掌握 CSS 常用屬性與值
六、教學(xué)過程
向?qū)W生演示多個項目：成品站點，分階段演示和分析此網(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é)。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
第四章 表格
課題：表格創(chuàng)建及設(shè)置
一、教學(xué)基本內(nèi)容 1、創(chuàng)建表格 2、添加表格對象 3、自動套用表格格式
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、創(chuàng)建表格
2、自動套用表格格式 難點：套用表格格式
五、教學(xué)目的、掌握創(chuàng)建表格的基本方法 2、會使用自動套用表格格式
六、教學(xué)過程
1、引入
網(wǎng)頁需要進行排版，由報紙的排版引入網(wǎng)頁的排版，由此提出表格的作用
2、講授新課（1）創(chuàng)建表格
步驟：<01>將光標(biāo)停放在頁面需要創(chuàng)建表格的位置。
<02>如果未打開“插入”工具欄，可以在文檔窗口單擊按鈕。如果在文檔窗口中找不到該按鈕，可使用Ctrl+F2快捷鍵切換“插入”工具欄的顯示或隱藏狀態(tài)，<03>在“常用”標(biāo)簽中，單擊“表格”按鈕
<04>彈出“表格”對話框
輸入要插入表格的行數(shù)，在此輸入2。列數(shù)
輸入要插入表格的列數(shù)，在此輸入3 <05>單擊“確定”按鈕
(2)套用表格格式
3、鞏固練習(xí)
創(chuàng)建一個表格，練習(xí)格式的套用。
七、作業(yè)處理
在課堂上創(chuàng)建一個五行四列的表格，要求邊框為0，寬150，高254的表格。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：表格的應(yīng)用
一、教學(xué)基本內(nèi)容
1、設(shè)置單元格
2、表格的基本操作
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：表格的編輯 難點：排序表格
五、教學(xué)目的、掌握表格的基本操作 2、能夠熟練設(shè)置單元格格式
六、教學(xué)過程
1、引入
（1）文字的定位：空格、回車
（2）圖片的定位：垂直邊距、水平邊距
2、表格
插入表格：插入（Insert）表格（table），或者在對象面板
行數(shù)（row）
列數(shù)（column）
邊距（cell padding）：單元格中的內(nèi)容與單元格邊框之間的距離
間距（cell spacing）：單元格之間的距離
寬度（width）：可以是像素（pixel）或百分比為單位（percent）
邊框（boder）：
屬性面板：只有在選定整個表格時才出現(xiàn)表格屬性
在表格中也可以通過右擊，調(diào)出的快捷菜單中選擇表格來對表格進行設(shè)置清除行高和列寬按鈕
改變列寬單位按鈕
背景顏色：
邊框顏色：設(shè)置整個表格的格線顏色
背景圖像：
3、表格所對應(yīng)的HTML代碼
表格：[table][/table]
行：[tr][/tr]
列：[td][/td]
4、表格的編輯
（1）表格的嵌套
（2）在網(wǎng)頁中，要進行復(fù)雜的定位，一般需要用到嵌套表格。不過，一般不超過三層。
（2）復(fù)制剪切粘貼
（3）插入行、列，刪除行列（4）合并單元格，拆分單元格
（5）改變行、列、表格的大?。和戏?，屬性面板精確定義（6）表格模板：命令（command）格式化表格（format table）
七、作業(yè)處理
根據(jù)課本上的實訓(xùn)作出一個精美課程表網(wǎng)頁
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
第五章 圖像
課題：圖像插入及屬性設(shè)置
一、教學(xué)基本內(nèi)容
1、圖像的類型
2、插入鼠標(biāo)經(jīng)過圖像
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：插入圖像 難點：圖像屬性
五、教學(xué)目的、掌握圖像的插入方法 2、掌握圖像屬性設(shè)置
六、教學(xué)過程
1、引入
網(wǎng)頁的頁面背景顏色和文本顏色在HTML代碼中是如何表示的？ RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強 一共可以表示：256╳256╳256=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可交換的圖像格式 特點：只支持256種顏色支持透明效果、可以交錯下載、可以實現(xiàn)動畫效果、文件所占用空間小、不能支持漸變色彩、更改圖片大小要從原文件改起
JPEG：Joint Photographic Experts Group聯(lián)合攝影專家組文件格式 特點：支持222
位圖像、有損壓縮。（2）插入圖像
3、鞏固練習(xí)
練習(xí)設(shè)置圖像的屬性。
七、作業(yè)處理
在表格中插入一張背景圖像。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：制作地圖網(wǎng)頁及電子相冊
一、教學(xué)基本內(nèi)容
1、制作地圖網(wǎng)頁
2、電子相冊
二、課型：實驗課
三、課時：2個課時
四、教學(xué)重點與難點 重點：制作地圖網(wǎng)頁 難點：熱點選擇
五、教學(xué)目的 1、掌握圖像使用 2、掌握圖像的其它操作
六、教學(xué)過程
此節(jié)是實驗課，實驗步驟為：
（01）啟動Dreamweaver 8，打開ch05SAMPLE01MAP.ASP文件。（02）選中該文檔中“絲綢之路示意圖”圖像。
（03）在菜單欄中依次選擇“窗口”|“屬性”選項或按下Ctrl+F3組合鍵，打開“屬性”面板，如果沒有顯示圖像地圖制作工具，單擊“屬性”面板右下角的擴展箭頭，（04）在“屬性”面板中的“地圖”文本框中輸入圖像地圖名稱。
（05）創(chuàng)建圖像地圖（熱區(qū)），可根據(jù)地圖中不同的形狀選擇不同的熱區(qū)工具，在所選定圖像上拖動鼠標(biāo)指針，便可完成圖像地圖的創(chuàng)建。（06）圖像地圖創(chuàng)建完成后，選中所創(chuàng)建的熱區(qū)，打開“屬性”面板。
在熱點“屬性”面板的“鏈接”文本框中輸入鏈接文件的名稱，或者單擊文件夾圖標(biāo)并通過瀏覽選擇在用戶單擊該熱點時要打開的文件。在“目標(biāo)”下拉列表中，選擇用于打開該文件的窗口。
（07）在“地中?！眲?chuàng)建一個矩形熱區(qū)，在“替換”框中輸入“關(guān)于地中海的論述”替代文本，并設(shè)置好鏈接（鏈接到DZH.ASP）。
（08）按照相同的方法分別為不同的路線或地名創(chuàng)建熱區(qū)，并輸入不同的鏈接和
替代文字，保存并預(yù)覽。當(dāng)鼠標(biāo)指針移到圖像地圖中時將顯示“替換”框中的內(nèi)容，如果設(shè)置有鏈接，單擊便可進入所鏈接的文檔。（9）完成創(chuàng)建。
第六章 框架
課題：框架集的創(chuàng)建及其基本操作
一、教學(xué)基本內(nèi)容、演示并講解用框架制作的網(wǎng)頁、框架的基本結(jié)構(gòu)、框架的各種屬性、框架結(jié)構(gòu)之間的鏈接
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、框架的各種屬性
2、框架結(jié)構(gòu)之間的鏈接
難點：
1、框架的各種屬性
2、框架結(jié)構(gòu)之間的鏈接
五、教學(xué)目的、掌握框架的基本結(jié)構(gòu)、掌握框架的各種屬性、掌握框架結(jié)構(gòu)之間的鏈接
六、教學(xué)過程
1、復(fù)習(xí)引入
回憶：Frontpage中的框架應(yīng)用
2、框架的應(yīng)用
重復(fù)出現(xiàn)在不同網(wǎng)頁文檔中的元素：網(wǎng)頁標(biāo)題、導(dǎo)航欄等等
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）à框架（Frame）調(diào)出框架面板
選定框架組：單擊整個框架組的邊框；或在框架面板中單擊整個框架的邊框
框架屬性：名稱、源文件，滾動否，是否可以調(diào)整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等
拆分框架：按Alt鍵，拖動邊框；修改（Modify）à框架頁（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）
*注意區(qū)別：插入一個新的框架與拆分框架的區(qū)別
6、框架所對應(yīng)的HTML代碼
框架組： 通過設(shè)置rows或cols來設(shè)定是橫的還是豎的，是頂部還是底部
框架組屬性：frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距
框架項： 框架屬性：src指向的頁面，name框架名，scrolling是否有滾動條，noresize不能由用戶改變大小
七、作業(yè)處理
1、建立框架頁面如圖，菜單鏈接到不同的圖片，單擊菜單中的一項，圖片在右邊的框架中打開
2、建立左右型的框架，并在其中的左框架中插入上下型的框架
3、建立左右型框架，并將左邊的框架拆分為上下型
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：創(chuàng)建電子圖書
一、教學(xué)基本內(nèi)容
利用框架制作電子圖書網(wǎng)頁
二、課型：實驗課
三、課時：2個課時
四、教學(xué)重點與難點 重點：框架結(jié)構(gòu)之間的鏈接
難點： 框架集
五、教學(xué)目的 1、掌握框架的運用、掌握框架結(jié)構(gòu)之間的鏈接
六、教學(xué)過程
步驟：（01）打開或新建一個空白的文檔，在該文檔中創(chuàng)建一個 框架集。（02）命名框架。將左列框架命名為index、右列上部框架命名為_top、右列下部框架命名為main。
（03）保存框架。將框架集保存為06A.asp文檔，index框架保存為06B.asp文檔，_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標(biāo)簽定義為宋體9points。
（08）填充頁面。在index框架06B.asp文檔中輸入如圖6-15所示的文本并插入一個9行1列的表格。
其中“休閑娛樂”文本為隸書5號字體，顏色為#66CC00；表格邊框的顏色為白色；
單元格的高度為30像素，單元格的對齊方式為水平居中、垂直居中。（09）在“頁面屬性”對話框中將_top框架的標(biāo)題設(shè)置為“標(biāo)題欄”，將所有邊界都設(shè)置為0（10）將光標(biāo)停留在_top框架中，輸入文本并插入images文件夾下的圖像，其中文本為4號宋體，顏色為#66CC00。
（11）設(shè)置鏈接。選中左邊框架（index）中目錄下的“考試作弊”文本，在“屬性”面板中的“鏈接”框中設(shè)置與之對應(yīng)的笑話內(nèi)容（WJ/wj6-1.asp）的鏈接。這時“目標(biāo)”框變?yōu)榧せ顮顟B(tài)，從“目標(biāo)”下拉列表框中選擇鏈接的目標(biāo)為main。（12）使用相同的方法設(shè)置其他“笑話”目錄所鏈接的內(nèi)容和鏈接目標(biāo)，其他的鏈接目標(biāo)均為main框架。笑話目錄各項和WJ文件夾中wj6-1.asp～wj6-8.asp是一一對應(yīng)的關(guān)系。
（13）指定框架源文件。選中main框架，在“屬性”面板中的“源文件”文本框中設(shè)置框架的源文件。單擊旁邊的文件夾，選擇WJ文件夾中wj6-1.asp文件（14）在文檔窗口的菜單欄中選擇“文件”|“保存全部”選項，將所有的框架進行保存。
（15）按F12鍵便可預(yù)覽該實例
第七章 頁面布局視圖的使用
課題：布局表格和布局單元格的基本知識及操作
一、教學(xué)基本內(nèi)容
1、布局表格和布局單元格的基本知識
2、布局表格和布局單元格的創(chuàng)建
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點
重點：創(chuàng)建布局表格和布局單元格 難點：布局表格的使用
五、教學(xué)目的、掌握布局的基本知識、熟練運用布局表格和布局單元格
六、教學(xué)過程
1、引入
在第四章學(xué)習(xí)過了表格的布局，用表格與布局表格相比，看其特點，從而使學(xué)生更加了解什么是布局表格和布局單元格。
2、講授新課
（1）布局表格的基本知識
（2）布局表格和布局單元格的基本操作 選擇布局表格：
須要執(zhí)行下列操作之一：
a:雙擊所繪制的布局表格中的標(biāo)志。b:單擊文檔窗口左下角的
標(biāo)簽，如圖7-3所示。調(diào)整布局單元格的大小: 具體操作步驟如下：（01）選中要調(diào)整的布局單元格。
（02）選擇布局單元格邊線上的調(diào)整手柄，拖動鼠標(biāo)便可調(diào)整布局單元格的大小 移動布局表格和布局單元格:（01）選中要移動的布局表格或布局單元格。
（02）使用方向鍵便可移動布局表格或布局單元格了，但這樣每次只能移動1像素的距離；如果是在按下Shift鍵的同時再利用方向鍵移動，每次可移動10像素的距離。
設(shè)置布局寬度為固定寬度: 具體操作步驟如下：
（01）選擇要設(shè)置固定寬度的布局表格。
（02）在菜單欄中選擇“窗口”|“屬性”選項，打開“屬性”面板。
（03）在“屬性”面板中選擇“固定”單項按鈕，并在后面的文本框中輸入一個數(shù)值，在此輸入640，其單位在默認(rèn)的條件下是像素。
七、作業(yè)處理
進入布局模式，練習(xí)布局與布局單元格
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：制作完整頁面
一、教學(xué)基本內(nèi)容 利用布局制作完整頁面
二、課型：實驗課
三、課時：2個課時
四、教學(xué)重點與難點 重點：布局表格的創(chuàng)建
難點：布局單元格的使用
五、教學(xué)目的、掌握布局表格的運用、掌握布局單元格的作用
六、教學(xué)過程
步驟：（01）選中在布局表格中所繪制的布局單元格，在“屬性”面板中將該布局單元格的寬度也設(shè)置為775像素，高度為68像素。
（02）將光標(biāo)停留在布局單元格內(nèi)，選擇菜單欄中的“插入”|“圖像”選項，在彈出的“選擇圖像源文件”對話框中，選擇存放在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個布局單元格，分別選中并同時打開“屬性”面板，將單元格的寬度和高度分別設(shè)置為：（148、326）、（516、326），如
（08）在圖7-17所示布局單元格（1）中繪制4個寬度為136像素，高度為34像素的布局單元格，并在其單元格內(nèi)分別輸入文本，32
（09）填充布局單元格內(nèi)容。完成所對應(yīng)的布局單元格文本的輸入
（10）最后將“布局模式”轉(zhuǎn)化為“標(biāo)準(zhǔn)模式”。在“標(biāo)準(zhǔn)模式”中根據(jù)自己的審美觀進行調(diào)整，可為布局單元格的邊框進行修飾
第八章 鏈接
課題：鏈接與路徑介紹
一、教學(xué)基本內(nèi)容
1、鏈接的基本知識
2、路徑的基本知識
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：鏈接與路徑的概念 難點：路徑的理解
五、教學(xué)目的 1、掌握路徑的類型 2、能夠正確運用路徑
六、教學(xué)過程
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://）。
文檔相對路徑 ：文檔相對路徑指以原來文檔所在位置為起點到被鏈接文檔所經(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è)處理
通過在地址欄中輸入一個文件的地址來練習(xí)路徑的使用。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：創(chuàng)建鏈接
一、教學(xué)基本內(nèi)容
1、創(chuàng)建錨記鏈接
2、創(chuàng)建空鏈接
3、創(chuàng)建下載鏈接
二、課型：講授+實驗
三、課時：2個課時
四、教學(xué)重點與難點 重點：下載鏈接 難點：錨記鏈接
五、教學(xué)目的、掌握鏈接創(chuàng)建的不同方法 2、掌握錨記鏈接的創(chuàng)建
六、教學(xué)過程
1、創(chuàng)建鏈接
方法：（01）選擇窗口中要鏈接的文本或圖像。選擇“窗口”|“屬性”選項，打開“屬性”面板，并執(zhí)行以下操作之一
a:單擊“鏈接”框右邊的“瀏覽文件”圖標(biāo)，如圖8-1所示，在彈出的“選擇文件”對話框中瀏覽并選擇一個文件。注意，在“選擇文件”對話框中的“相對于”下拉列表中，通常選擇“文檔”而不選擇“站點根目錄”。單擊“選擇文件”對話框中的“確定”按鈕，在“鏈接”框中將顯示出被鏈接文件的路徑。
b:在“屬性”面板的“鏈接”框中，輸入要鏈接的文檔的路徑，如圖8-2所示。
（02）選擇被鏈接文檔的載入位置。在默認(rèn)情況下，被鏈接文檔在當(dāng)前窗口或框架中打開。要使被鏈接的文檔顯示在其他地方，需要從“屬性”面板的“目標(biāo)”下拉列表中選擇一個選項。
2、創(chuàng)建錨記鏈接
錨記鏈接（簡稱錨記）就是在文檔中插入一個位置標(biāo)記，并給該位置設(shè)置一個名稱。
步驟：（01）打開ch08LIANJIE.ASP文件，把光標(biāo)置于文檔中“比輸贏”文本的右邊（文檔中需要設(shè)置錨記的地方）。
（02）在文檔窗口的菜單欄中依次選擇“插入”|“命名錨記”選項
（03）在“命名錨記”對話框的“錨記名稱”文本框中輸入錨記名：mj1（注意，所命名錨記是區(qū)分大小寫的）。
（04）如果錨記標(biāo)記沒有出現(xiàn)在插入點，選擇“查看”|“可視化助理”|“不可見元素”選項，在所選擇插入“錨記”的位置便會出現(xiàn)錨記標(biāo)志，如圖8-16所示。
（05）同樣的方法，分別在笑話欄下的“先生尿褲”、“大街上叫喊的人”文本的右邊插入錨記，并且分別命名為mj2、mj3。
（06）在菜單欄中選擇“窗口”|“屬性”選項，打開“屬性”面板。（07）選中窗口左邊“笑話集錦”下的“比輸贏”文本，在“屬性”面板中的“鏈接”框中輸入#mj1。
（08）同樣的方法，分別創(chuàng)建“笑話集錦”欄下的“先生尿褲”、“大街上叫喊的人”文本與#mj2、#mj3的錨記鏈接。（09）保存操作結(jié)果。
七、教具
所用的教室為多媒體實驗室，因此所要板書的內(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ù)習(xí)引入
網(wǎng)頁中的定位--表格
2、建立層
（1）菜單，插入（Insert）層（Layer），默認(rèn)大?。?00╳115（2）對象面板
3、層的意義
（1）可以將元素重疊
（2）可以用于精確定位網(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）：默認(rèn)（default）、（繼承）inherit、（可見）visible、隱藏（hidden）四個選項之一
（5）標(biāo)簽（Tag）：DIV、SPAN、LAYER、ILAYER，選DIV
（6）溢出（Overflow）：當(dāng)層內(nèi)容超過層大小的時候如何顯示。顯示層內(nèi)的全部內(nèi)容（visible）、只顯示層尺寸以內(nèi)的內(nèi)容（hidden）、不改變層大小、只添加滾動條（scroll）、只有層不夠大時才顯示滾動條（auto）
（7）剪裁（Clip）：指定層的哪一部分是可見的，輸入的數(shù)值是距離層的4個邊界的距離
6、子層
（1）在一個層中再插入一個層，后者就是前者的子層（2）子層不一定在父層里面（3）移動子層，父層位置不發(fā)生變化
（4）移動父層，子層跟著變化，對父層的相對位置不變（5）子層可以繼承父層的可見性
7、層與表格的轉(zhuǎn)換
（1）層轉(zhuǎn)換為表格：修改---轉(zhuǎn)換層到表格
（2）表格轉(zhuǎn)換為層：修改----轉(zhuǎn)換表格到層
七、作業(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）在頁面添加層，并在層中插入元素（如一幅圖片或一些文字），把層移到動畫的起始位置。
（02）選擇“窗口”|“時間軸”選項，打開“時間軸”面板。
（03）選擇要制作動畫的層。單擊層標(biāo)記或?qū)舆吔?，或用“層”面板選擇層（注意：在層內(nèi)部單擊，可以把插入點置于層內(nèi)，但并不選中該層。當(dāng)一個層被選中時，層邊界會顯示出可調(diào)整大小的手柄）。
（04）直接把選定的對象拖入“時間軸”面板中；或者單擊“時間軸”面板中的 按鈕，選擇“添加對象”選項。
（05）此時時間軸的第一個通道中將出現(xiàn)一個紫色條，即動畫條，條中顯示了層的名稱Layer1，動畫條兩端的兩個圓圈，即為時間軸的關(guān)鍵幀。
（06）單擊第1個關(guān)鍵幀，將紅色的播放頭移到第1個關(guān)鍵幀，拖動被選中的層到某一個位置，即確定動畫運動的起始位置。
（07）單擊動畫條最后的關(guān)鍵幀標(biāo)記（注意播放頭也跟著移到該處），再把頁面上的該層拖到動畫結(jié)束處。
之后，從動畫起始位置到結(jié)束位置會顯示一條線，這就是層的運動軌跡。如果沒
有顯示一條線，說明做法不對，需要重新開始。
（08）如果使動畫層作曲線移動，選擇動畫條，按住Ctrl鍵單擊，在插入點位置添加一個關(guān)鍵幀；或在動畫條中間單擊一幀，并從右鍵快捷菜單中選擇“增加關(guān)鍵幀”選項。
（09）移動層，使運動軌跡呈曲線狀。（10）單擊“播放”按鈕，預(yù)覽頁面上的動畫
七、作業(yè)處理
根據(jù)書上的實例，創(chuàng)建一個網(wǎng)站廣告。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
第十章 表單
課題：表單創(chuàng)建、對象及其屬性
一、教學(xué)基本內(nèi)容 1、表單概念 2、表單創(chuàng)建 3、表單屬性
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、創(chuàng)建表單
2、掌握表單的應(yīng)用
難點：1、掌握表單元素的各項屬性、能獨立制作完成常見的各種表單頁面
五、教學(xué)目的 掌握表單創(chuàng)建方法
六、教學(xué)過程
向?qū)W生演示多個項目：成品站點，分階段演示和分析此網(wǎng)頁的設(shè)計流程和過程，在每個階段演示完畢后，讓學(xué)生對此階段進行鞏固。講解完畢后學(xué)生完成課后作業(yè)，教師實施指導(dǎo)。
第一步：演示并講解注冊網(wǎng)頁。
第二步：分步演示并講解、制作表單元素。第三步：分析并制作網(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、掌握表單元素的各項屬性、能獨立制作完成常見的各種表單頁面
五、教學(xué)目的
能夠熟練的運用表單中的各個屬性，會制作表單。
六、教學(xué)過程 調(diào)查表單制作過程：
（01）用Dreamweaver 8打開ch10SAMPLE02FORM2.ASP文件。
（02）打開“插入”工具欄，在“表單”標(biāo)簽下單擊“表單”按鈕，在頁面中創(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、行為的基本知識 2、事件的基本知識 3、行為動作
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、行為面板的用法
2、行為動作 難點：行為的動作
五、教學(xué)目的
掌握行為面板的用法，并且會添加行為。
六、教學(xué)過程
1、行為的概念
行為是事件和動作的組合。動作是預(yù)先編寫好的JavaScript腳本，可用來執(zhí)行指定任務(wù)。事件則是由瀏覽器為每個頁面元素定義的，是訪問者對網(wǎng)頁的基本操作
2、行為面板的用法
（01）選擇“窗口”|“行為”選項或按Shift+F4組合鍵打開“行為”面板，（02）單擊“行為”面板中的 按鈕，則可在出現(xiàn)的菜單中選擇所需要的動作。（03）選中“行為”面板中某一事件，單擊 按鈕便可從事件列表中刪除所選擇的事件。
3、行為的基本操作（1）添加行為（2）修改行為
4、行為動作
在這里行為包含了二十多種動作，不再一一敘述。
5、鞏固練習(xí)
對各種行為動作進行練習(xí)，看其效果。
七、作業(yè)處理
在網(wǎng)頁中添加一些內(nèi)容，然后添加一些行為。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。學(xué)生利用計算機進行實驗操作。
課題：行為動作及事件設(shè)置
一、教學(xué)基本內(nèi)容 1、事件的基本知識 2、行為事件的設(shè)置
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、行為面板的用法
2、事件的種類 難點：對事件的理解及掌握
五、教學(xué)目的
掌握各個事件的作用。
六、教學(xué)過程 檢查表單步驟：
（01）用Dreamweaver 8打開光盤中的ch11SAMPLE02FORM.ASP文件。（02）在文檔的標(biāo)簽欄中選中
