網(wǎng)頁制作教案電子版

====Word行業(yè)資料分享--可編輯版本--雙擊可刪====教學(xué)內(nèi)容第一章《網(wǎng)頁與網(wǎng)站基礎(chǔ)知識》校歷第一周課時(shí)4課型理論+實(shí)踐教學(xué)目標(biāo)網(wǎng)站的策劃與創(chuàng)建原則教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置分析總結(jié)本章主要通過三個(gè)活動(dòng)的開展，讓學(xué)生了解DreamweaverCS3網(wǎng)頁瀏覽的基本原理和網(wǎng)頁制作技術(shù)的發(fā)展，知道目前網(wǎng)頁制作常用的幾種工具。了解HTML語法的基本構(gòu)成及幾種常用標(biāo)簽。通過具體的網(wǎng)頁實(shí)例制作，掌握起始頁的設(shè)置以及基本的界面操作。教學(xué)過程新課引入：越來越多的人開始熟悉網(wǎng)絡(luò)，熟悉網(wǎng)頁。人們已經(jīng)漸漸意識到網(wǎng)絡(luò)正在改變?nèi)粘Ｉ?。人們需要為個(gè)人、企業(yè)制作一個(gè)精彩的網(wǎng)站，這就帶來一個(gè)新的問題：怎樣設(shè)計(jì)制作一個(gè)實(shí)用而美觀的網(wǎng)站？實(shí)用與美觀似乎總是相悖的。新課內(nèi)容：一、網(wǎng)頁與網(wǎng)站的概念網(wǎng)頁：我們在瀏覽器中看到的頁面，它是一個(gè)單個(gè)的文件。網(wǎng)頁里可以有文字、表格、圖像、聲音、視頻等等。網(wǎng)站中的第一個(gè)頁面成為首頁或主頁。網(wǎng)站：存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體，它包含一個(gè)或多個(gè)網(wǎng)頁。這些網(wǎng)頁按照一定的組織結(jié)構(gòu)，以鏈接等方式連接在一起，形成一個(gè)整體，描述一組完整的信息。二、網(wǎng)頁的設(shè)計(jì)網(wǎng)頁的主題指網(wǎng)頁所要表現(xiàn)的最主要的思想內(nèi)涵，可以說師網(wǎng)頁的靈魂。確定主題時(shí)應(yīng)遵循的原則自己擅長或喜歡的內(nèi)容主題小而精不要太濫或目標(biāo)太高教學(xué)過程

2、網(wǎng)頁的文字最適合于網(wǎng)頁正文顯示的字體大小為12磅左右，如果在一個(gè)頁面中需要安排的內(nèi)容較多可采用9磅的字號。標(biāo)題和需要強(qiáng)調(diào)的內(nèi)容可以用較大的字號。行距的變化也會(huì)對文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設(shè)置比較適合正文。行距的常規(guī)比例為10:12，即用字10點(diǎn)，則行距12點(diǎn)。在網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)者可以為文字、文字鏈接、已訪問鏈接和當(dāng)前活動(dòng)鏈接選用各種顏色。使用不同顏色的文字可以使想要強(qiáng)調(diào)的部分更加引人注目，但應(yīng)該注意的是，對于文字的顏色，只可少量運(yùn)用，在一個(gè)頁面上運(yùn)用過多的顏色，會(huì)影響瀏覽者閱讀頁面內(nèi)容，除非你有特殊的設(shè)計(jì)目的。3、網(wǎng)頁的色彩●色彩助鮮明性

●色彩的獨(dú)特性

●色彩的合適性

●色彩的聯(lián)想性

●頁面中各處用色的選擇4、網(wǎng)頁版式和布局1．版面設(shè)計(jì)的步驟

（1）畫出頁面的結(jié)構(gòu)草圖：只需畫出頁面的大體結(jié)構(gòu)。注：分辨率為640*480時(shí)，頁面顯示尺寸為620*311；分辨率為800*600時(shí)，頁面顯示尺寸為780*428；分辨率為1024*768時(shí)，頁面顯示尺寸為1007*600；

（2）布局細(xì)化和調(diào)整：將需要放置的功能模塊安排在頁面上，注意突出重點(diǎn)和平衡協(xié)調(diào)

教學(xué)過程（3）定格：確定出完美的布局方案，定格為最后的版式

2．常見網(wǎng)頁布局

（1）T型結(jié)構(gòu)（2）同字結(jié)構(gòu)教學(xué)過程（3）川字結(jié)構(gòu)（4）三字結(jié)構(gòu)教學(xué)過程（3）川字結(jié)構(gòu)（4）三字結(jié)構(gòu)教學(xué)過程（5）單一結(jié)構(gòu)教學(xué)內(nèi)容第一章《網(wǎng)頁與網(wǎng)站基礎(chǔ)知識》校歷第一周課時(shí)2課型理論+實(shí)踐教學(xué)目標(biāo)網(wǎng)站的策劃與創(chuàng)建原則教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置分析總結(jié)本章主要通過三個(gè)活動(dòng)的開展，讓學(xué)生了解DreamweaverCS3網(wǎng)頁瀏覽的基本原理和網(wǎng)頁制作技術(shù)的發(fā)展，知道目前網(wǎng)頁制作常用的幾種工具。了解HTML語法的基本構(gòu)成及幾種常用標(biāo)簽。通過具體的網(wǎng)頁實(shí)例制作，掌握起始頁的設(shè)置以及基本的界面操作。教學(xué)過程三、網(wǎng)站的策劃與創(chuàng)建原則

1、定位網(wǎng)站主題和名稱

設(shè)計(jì)一個(gè)站點(diǎn)，首先遇到的問題就是定位網(wǎng)站主題。所謂主題也就是你的網(wǎng)站的題材。

對于題材的選擇，應(yīng)注意：

（1）主題要小而精。定位要小，（2）題材最好是你自己擅長或者喜愛的內(nèi)容。

（3）題材不要太濫或者目標(biāo)太高?！疤珵E”是指到處可見，網(wǎng)站名稱及域名的選擇也是非常重要的。和現(xiàn)實(shí)生活中一樣，網(wǎng)站名稱是否正氣，響亮，易記，對網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是：

（1）名稱要正。也就是要合法，和理，和情。不能用反動(dòng)的，色情的，迷信的，危害社會(huì)安全的名詞語句。

（2）名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點(diǎn)，除非特定需要，網(wǎng)站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱。另外，網(wǎng)站名稱的字?jǐn)?shù)應(yīng)該控制在六個(gè)字（最好四個(gè)字）（3）名稱要有特色。名稱平實(shí)就可以接受，如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。

域名的選擇也是如此，選一個(gè)簡單易記，比如可以模仿知名網(wǎng)站擴(kuò)大自己的影響，有一定含義的域名也是網(wǎng)站成功的一部分。2、網(wǎng)站的風(fēng)格

網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是站長們最希望掌握，也是最難以學(xué)習(xí)的。難就難在沒有一個(gè)固定的程式可以參照和模仿。給你一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。

有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量大小，瀏覽速度快慢。但你瀏覽過有風(fēng)格的教學(xué)過程

網(wǎng)站后你能有更深一層的感性認(rèn)識，比如站點(diǎn)有品位，和藹可親，是老師，是朋友。如何樹立網(wǎng)站風(fēng)格呢？我們可以分這樣幾個(gè)步驟：

第一，確信風(fēng)格是建立在有價(jià)值內(nèi)容之上的。

第二，你需要徹底搞清楚自己希望站點(diǎn)給人的印象是什么。

第三，在明確自己的網(wǎng)站印象后，開始努力建立和加強(qiáng)這種印象。

對于確定風(fēng)格，這里提供一些參考：

1.將你的標(biāo)志logo,盡可能的出現(xiàn)在每個(gè)頁面上?；蛘唔撁?，或者頁腳，或則背景。

2.突出你的標(biāo)準(zhǔn)色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用與標(biāo)準(zhǔn)色彩一致的色彩。

3.突出你的標(biāo)準(zhǔn)字體。在關(guān)鍵的標(biāo)題，菜單，圖片里使用統(tǒng)一的標(biāo)準(zhǔn)字體。

4.想一條朗朗上口宣傳標(biāo)語。把它做在你的banner里，或者放在醒目的位置，告訴大家你的網(wǎng)站的特色

5.使用統(tǒng)一的語氣和人稱。即使是多個(gè)人合作維護(hù)，也要讓讀者覺得是同一個(gè)人寫的。

6.使用統(tǒng)一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。

7.創(chuàng)造一個(gè)你的站點(diǎn)特有的符號或圖標(biāo)。比如在一句鏈接前的一個(gè)點(diǎn)，可以使用,.?！睢?/p>

□△→（區(qū)位碼里自己參看）等等。雖然很簡單的一個(gè)變化，卻給人與眾不同的感覺。

8.用自己設(shè)計(jì)的花邊，線條，點(diǎn)

9.展示你網(wǎng)站的榮譽(yù)和成功作品。

10.告訴網(wǎng)友關(guān)于你的真實(shí)的故事和想法。

教學(xué)內(nèi)容第二章《站點(diǎn)的建立與管理》校歷第二周課時(shí)6課型理論+實(shí)踐教學(xué)目標(biāo)1、站點(diǎn)創(chuàng)建2、頁面設(shè)置教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置制作個(gè)人空間網(wǎng)站分析總結(jié)通過為“我的個(gè)人網(wǎng)站”收集相關(guān)資料，掌握站點(diǎn)素材及其制作工具的有關(guān)知識；為“我的個(gè)人網(wǎng)站”規(guī)劃站點(diǎn)目錄，并比較大型站點(diǎn)的站點(diǎn)結(jié)構(gòu)與小型站點(diǎn)的站點(diǎn)結(jié)構(gòu)區(qū)別，從而了解站點(diǎn)的設(shè)計(jì)流程；學(xué)會(huì)使用“高級”標(biāo)簽為“我的個(gè)人網(wǎng)站”建立站點(diǎn)，并設(shè)置相關(guān)參數(shù)；通過網(wǎng)站地圖，實(shí)現(xiàn)對“我的個(gè)人網(wǎng)站”中的網(wǎng)站文件管理，檢查鏈接等。教學(xué)過程

一、站點(diǎn)概念多個(gè)網(wǎng)頁文檔通過各種鏈接并聯(lián)起來就構(gòu)成了站點(diǎn)。二、規(guī)劃站點(diǎn)結(jié)構(gòu)1、一個(gè)文件夾用于存放網(wǎng)站的所有文件，再在文件內(nèi)建立幾個(gè)文件夾，將文件分類，如圖片文件放在image文件夾內(nèi)，HTML文件放在HTML文件夾內(nèi)，當(dāng)然，如果站點(diǎn)比較大，文件比較多，可以先按欄目分類，在欄目里再分類。如：html:放網(wǎng)頁，img:放圖像，sound:放聲音文件，back:放備份文件，other:放其他2、用英文或者拼音給文件命名（推薦英文），不要使用中文的名字（因?yàn)橛械臋C(jī)器對中文支持不太好，有可能出現(xiàn)鏈接的錯(cuò)誤，你自己以為正確的東西在別人看來有可能是錯(cuò)的）。三、創(chuàng)建站點(diǎn)1、選擇“窗口”/“文件”命令打開“文件”面板2、展開文件一項(xiàng)，選中站點(diǎn)，然后再選編輯站點(diǎn)3、點(diǎn)擊“新建”

教學(xué)過程

站點(diǎn)名稱（N）處填上你要建立的站點(diǎn)的名稱，這個(gè)名字只起著識別的作用，與網(wǎng)站發(fā)布后真實(shí)的名字無關(guān)；本地根文件夾（F）處選擇設(shè)置網(wǎng)站在本地硬盤的位置，點(diǎn)擊后面的文件夾圖標(biāo)可以選擇硬盤的任意目錄作為存放網(wǎng)站文件的目錄；緩存可以使文件的移動(dòng)、改名、查找等站點(diǎn)管理的操作速度大大提升，因此建議大家在這里打上鉤；其它的可以默認(rèn)，當(dāng)然你可以試試選擇不同的，默認(rèn)圖像文件夾為站點(diǎn)默認(rèn)存放圖片的文件夾（以后在做網(wǎng)頁的過程中，使用非站點(diǎn)內(nèi)的圖片時(shí)，它會(huì)提示是否把該文件復(fù)制到這個(gè)文件夾內(nèi)）；HTTP地址（H）為你站點(diǎn)的網(wǎng)址。作業(yè)：建立一個(gè)名字為“我的個(gè)人網(wǎng)站”的站點(diǎn)，站點(diǎn)內(nèi)有image、picture、html三個(gè)文件夾和index.html文件，遠(yuǎn)程FTP服務(wù)器為.1，用戶名為:tastelife，密碼為：

教學(xué)內(nèi)容第三章《新建文檔與對象》校歷第三周課時(shí)4課型理論+實(shí)踐教學(xué)目標(biāo)通過本章的學(xué)習(xí)，用戶可以掌握DreamweaverMX中文版的基本操作及一些使用技巧。如文本的編輯、修改、文本列表的創(chuàng)建及網(wǎng)頁性性的基本設(shè)置等。教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置制作“中國民俗文化”網(wǎng)站分析總結(jié)通過本章練習(xí)，讓我們學(xué)會(huì)網(wǎng)頁制作中有關(guān)文檔的一些基本操作，其中包括；通過三種方法創(chuàng)建網(wǎng)頁、打開現(xiàn)有網(wǎng)頁文檔及保存網(wǎng)頁；文本和特殊字符的輸入及編輯方法以，學(xué)會(huì)創(chuàng)建列表；掌握在網(wǎng)頁中插入日期、水平線等常見網(wǎng)頁元素的方法以，并分析其共同之處；掌握設(shè)置網(wǎng)頁屬性的方法，并了解站點(diǎn)設(shè)計(jì)的一些基本理念。教學(xué)過程一、編輯文本1、輸入文本

（1）換行

利用Enter鍵換行：在輸入文字后按Enter鍵，文字成段，且上下段各空一行。

利用Shift+Enter鍵換行：如果想要將文字手動(dòng)換行，中間又不能出現(xiàn)空白行，可以按shift+Enter鍵。（2）加入特殊字符有時(shí)為了內(nèi)容的需要，要在網(wǎng)頁中插入一些鍵盤上沒有的特殊字符，例如注冊商標(biāo)?、版權(quán)符?等。

（3）加入批注文字

在網(wǎng)頁中加入適當(dāng)?shù)呐⑽淖?，可以使日后修改、管理網(wǎng)頁時(shí)更加方便。由于批注只有在編輯網(wǎng)頁時(shí)或查看原代碼時(shí)才能看到，所以不必?fù)?dān)心批注文字破壞版面。2、查找和替換文本二、設(shè)置文本屬性1、文本屬性欄

文本屬性欄也就是Dreamweaver默認(rèn)的屬性欄，如下圖所示，其默認(rèn)狀態(tài)是打開。如果不小心將屬性欄關(guān)閉，則可以通過以下2種途徑打開文本屬性欄：

（1）按快捷鍵Ctrl+F3

（2）選擇窗口/屬性命令2、設(shè)置文本格式

教學(xué)過程

文本格式一般包括文字的字體、字號、顏色及文本的對齊方式等。3、設(shè)置文本樣式

（1）、粗體、斜體，以及其也樣式

（2）、對齊方式

（3）、段落擴(kuò)展/縮進(jìn)三、文本列表1、創(chuàng)建

創(chuàng)建文本列表最簡單的方法是通過文本屬性欄上的列表按鈕將光標(biāo)停在文本前，單擊屬性欄中的無序列表按鈕與有序列表，即可對文本進(jìn)行無序或有序排列。2、修改屬性

在網(wǎng)頁中加入文本列表后，還可以根據(jù)個(gè)人的習(xí)慣改變列表的屬性，如將無序列表的實(shí)心小圓圈改成實(shí)心矩形，將有序列表的阿拉伯?dāng)?shù)字改變?yōu)橛⑽淖帜傅?。列表屬性的修改是通過列表屬性對話框來完成的。

在列表類型下拉列表框中，可以設(shè)置列表的類型。列表類型包括無序列表、有序列表、目錄列表和菜單列表。

3、創(chuàng)建嵌套文本列表如果想把不同級別的文本內(nèi)容用列表的形式表現(xiàn)出來，則需要用到文本列表的嵌套。創(chuàng)建文本列表的嵌套，需用到文本屬性欄上的段落擴(kuò)展/縮進(jìn)按鈕。作業(yè)：1、文本錄入與編輯

2、文本及其格式化

教學(xué)內(nèi)容第四章《表格處理與網(wǎng)頁布局》校歷第三周課時(shí)2課型理論+實(shí)踐教學(xué)目標(biāo)讓學(xué)生熟練掌握對表格的使用插入表格表格的基本操作設(shè)置表格屬性表格的高級操作層與表格的相互轉(zhuǎn)換教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置制作課程表等各種表格分析總結(jié)通過本章練習(xí)，讓學(xué)生學(xué)會(huì)如何利用表格來布局頁面，以及表可知及其單元格的編輯與屬性設(shè)置。教學(xué)過程

一、在網(wǎng)頁中插入表1、定位插入點(diǎn)，使用鼠標(biāo)單擊。

2、調(diào)出“插入表”對話框，

⑴方法一：單擊“對象”面板（普通）中的“插入表格”對象按鈕；

⑵方法二：單擊“插入”｜“表格”菜單；

3、確定行與列數(shù)在“行”與“列”的輸入框內(nèi)輸入所需的數(shù)值。

4、確定邊距與間距在“單元格邊距”與“單元格間距”的輸入框內(nèi)輸入所需的數(shù)值。

邊距：指單元格內(nèi)的數(shù)據(jù)（內(nèi)容）與邊框線的距離，默認(rèn)為1個(gè)像素。

間距：指相鄰單元格之間的距離（包括上、下、左、右），默認(rèn)為2個(gè)像素。

5、確定表格寬度在“寬度”輸入框內(nèi)輸入所需的數(shù)值，在其右邊選擇單位。

6、確定邊框的厚度在“邊框”輸入框內(nèi)輸入所需的數(shù)值。默認(rèn)為1，若為0，則沒有邊框線（在布局時(shí)應(yīng)用相當(dāng)廣）二、在表格中添加內(nèi)容1、插入文本

⑴直接輸入文本定位單元格，直接輸入文本，若文本超過寬度，則自動(dòng)擴(kuò)展。首先是按橫向自動(dòng)分?jǐn)倢挾?，若不夠，則轉(zhuǎn)到下行。

⑵粘貼其它文本先將其它文本存入到剪貼板中，再將剪貼板中的內(nèi)容粘貼至當(dāng)前光標(biāo)處。教學(xué)過程2、在單元格中插入圖片與在文檔中插入圖片一樣操作。

⑴選定位，鼠標(biāo)單擊；

⑵然后單擊“對象”面板中的“插入圖像”鈕或選擇“插入”｜“圖像”菜單，彈出查找圖像文件對話框；

⑶選擇所需的圖像文件，單擊“選擇”即可。三、輸入外部數(shù)據(jù)Dreamweaver可接受其它程序創(chuàng)建的表格數(shù)據(jù)，但這些表格數(shù)據(jù)要使用定界符。定界符即單元格間的分隔符，一般有制表位、冒號、分號等。還可以是Excel文件。

導(dǎo)入Excel文件操作方法為：

⑴啟動(dòng)Dreamweaver，建立一個(gè)文檔

⑵選擇“文件”｜“導(dǎo)入”｜“Excel文檔”菜單，彈出對話框。

⑶選擇Excel文件，確定即可。

導(dǎo)入表格數(shù)據(jù)文件操作方法為：

⑴啟動(dòng)Dreamweaver，建立一個(gè)文檔

⑸選擇“文件”｜“導(dǎo)入”｜“導(dǎo)入表格數(shù)據(jù)”菜單，彈出對話框。

⑹選擇“數(shù)據(jù)文件”單擊“瀏覽”鈕，查找到所需文件，選擇“定界符”后，單擊“確定”鈕。

⑺還可進(jìn)行其它設(shè)置：“表格寬度”、“邊距”、“間距”、“格式化首行”、“邊框”等。四、選擇單元格元素1、選擇單元格用鼠標(biāo)在所要選定的單元格內(nèi)單擊。

2、選擇一行將指針指向待選行的最左邊，當(dāng)出現(xiàn)黑色的向右箭頭時(shí)

教學(xué)過程單擊。

3、選擇一列將指針指向待選列的最上面，當(dāng)出現(xiàn)黑色的向下箭頭時(shí)，單擊。

4、選擇整個(gè)表

先在表中單擊，再選擇狀態(tài)左邊的粗黑標(biāo)記“table”

教學(xué)內(nèi)容第四章《表格處理與網(wǎng)頁布局》校歷第五周課時(shí)6課型理論+實(shí)踐教學(xué)目標(biāo)1、認(rèn)識布局模式2、用布局視圖布局頁面3、掌握進(jìn)入和退出頁面模式的方法4、創(chuàng)建布局表格和布局單元格5、掌握布局表格和單元格屬性教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置制作“世錦賽”網(wǎng)站分析總結(jié)通過本章練習(xí)，讓學(xué)生學(xué)會(huì)如何利用表格來布局頁面，以及表可知及其單元格的編輯與屬性設(shè)置。教學(xué)過程創(chuàng)建頁布局的一種常用的方法是使用HTML表格對元素進(jìn)行定位。但是，使用表格進(jìn)行布局不太方便，因?yàn)樽畛鮿?chuàng)建表格是為了顯示表格數(shù)據(jù)，而不是用于對Web頁進(jìn)行布局。為了簡化使用表格進(jìn)行頁面布局的過程，Dreamweaver提供了“布局”模式。在“布局”模式中，您可以使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計(jì)頁，同時(shí)避免使用傳統(tǒng)的方法創(chuàng)建基于表格的設(shè)計(jì)時(shí)經(jīng)常出現(xiàn)的一些問題。一、繪制布局單元格和表格繪制布局表格，請執(zhí)行以下操作：

1、確保您處于“布局”模式中。

2、在“插入”欄的“布局”類別中，單擊“繪制布局表格”按鈕。

3、鼠標(biāo)指針變?yōu)榧犹?+)。

4、將鼠標(biāo)指針放置在頁上，然后拖動(dòng)指針以創(chuàng)建布局表格。

繪制布局表格，請執(zhí)行以下操作：

1、確保您處于“布局”模式中。

2、在“插入”欄的“布局”類別中，單擊“繪制布局單元格”按鈕。

3、鼠標(biāo)指針變?yōu)榧犹?+)。

4、將鼠標(biāo)指針放置在頁上，然后拖動(dòng)指針以創(chuàng)建布局單元格。二、繪制嵌套布局表格將一個(gè)布局表格繪制在另一個(gè)布局表格中，創(chuàng)建嵌套表格。對外部表格所進(jìn)行的更改不會(huì)影響嵌套表格中的單元格；例如，當(dāng)更改外部表格中行或列的大小時(shí)，內(nèi)部表格中單元格的大小不發(fā)生變化。還可以插入多級嵌套表格。嵌套布局表格的大小不能超過包含它的表格。教學(xué)過程三、將內(nèi)容添加到布局單元格1、將插入點(diǎn)放置在您要添加內(nèi)容的布局單元格中。

2、執(zhí)行下列操作之一：在單元格中鍵入文本，當(dāng)進(jìn)行鍵入時(shí)，單元格將按需要自動(dòng)擴(kuò)展。也可粘貼從其他文檔復(fù)制的文本。在“插入”欄的“常用”類別中，單擊“圖像”按鈕上的箭頭，然后選擇“圖像”。教學(xué)過程一、實(shí)訓(xùn)重點(diǎn)：1、掌握布局網(wǎng)頁在創(chuàng)建、選擇、設(shè)置、存儲(chǔ)與應(yīng)用方面的特點(diǎn)；

2、掌握布局網(wǎng)頁的制作方法；

難點(diǎn)分析：1、布局中的表格嵌套實(shí)訓(xùn)目的與要求：目的：能過上機(jī)實(shí)訓(xùn)讓學(xué)生學(xué)會(huì)使用布局，讓學(xué)生加深理解布局；要求：做出布局網(wǎng)頁四、實(shí)習(xí)內(nèi)容：

基本知識：1、布局的基本操作練習(xí)

五、實(shí)訓(xùn)中可能產(chǎn)生的問題預(yù)測及處理：此次實(shí)訓(xùn)最容易出現(xiàn)的問題如下：問題：創(chuàng)建布局單元格時(shí)處理：；教學(xué)內(nèi)容第五章《圖像插入與編輯》校歷第六周課時(shí)6課型理論+實(shí)踐教學(xué)目標(biāo)通過本章的學(xué)習(xí)，用戶可以掌握DreamweaverMX中網(wǎng)頁所支持的圖像格式、插入圖像、修改圖像屬性、利用外部圖像處理軟件編輯圖像，以及創(chuàng)建圖像映射等內(nèi)容。教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置制作“七彩云南”網(wǎng)站分析總結(jié)通過介紹網(wǎng)頁中圖像的分類及其特點(diǎn)，引入圖像的基本概念，添加圖像的基本方法及其屬性的設(shè)置。此外還介紹了創(chuàng)建圖像的變換效果以及使用其他工具編輯圖像的方法。教學(xué)過程網(wǎng)頁圖像簡述計(jì)算機(jī)領(lǐng)域中，圖形基本上分為位圖圖像和矢量圖形兩大類，而網(wǎng)頁圖像也就是這兩類圖形中的一部份。明確兩者之間的差異，對創(chuàng)建和編輯網(wǎng)頁圖像很有幫助。二、插入圖像1、插入一般圖像

在網(wǎng)頁中插入一般圖像的方法很簡單，首先將光標(biāo)置于要插入圖像的位置，單擊插入欄中插入圖像圖標(biāo)，或選擇插入、圖像命令，或是按下Ctrl+Alt+I組合鍵，無論選擇上面的哪種方法都將彈出選擇圖像來源對話框。在此對話框中選擇要插入網(wǎng)頁的圖像名，單擊確定按鈕，此時(shí)圖像插入到網(wǎng)頁中。2、插入網(wǎng)頁背景圖像如果想使網(wǎng)頁得到美化，可以在網(wǎng)頁中加入背景圖像。加入背景圖像的方法與設(shè)置網(wǎng)頁背景圖像的方法一樣三、設(shè)置圖像屬性

當(dāng)在網(wǎng)頁中選中一幅插入的圖像時(shí)，在屬性面板將反映圖像的屬性，如下圖所示。在圖像屬性面板上，可以定義圖像的多種屬性1、定義圖像大小2、圖像的排列方式3、設(shè)置圖像間距4、設(shè)置圖像邊框5、用文字代替圖像6、圖像編輯器教學(xué)過程四、創(chuàng)建圖像映射1、映射圖映射圖指的是將一個(gè)圖像劃分為若干區(qū)域，并將每個(gè)區(qū)域鏈接到不同的網(wǎng)頁、URL或其他的資源中，這樣的一個(gè)圖像叫做映射圖。2、圖像映射面板

有關(guān)圖像映射的操作大多數(shù)都是在圖像映射面板中進(jìn)行的。如果要打開圖像映射面板，在圖像屬性面板上單擊圖像映射工具上的3個(gè)按鈕、和之一，并在圖像上畫出相應(yīng)的形狀，將彈出圖像映射面板3、定義熱點(diǎn)

當(dāng)在網(wǎng)頁中插入了圖像之后，可以利用熱點(diǎn)工具為該圖像定義熱點(diǎn)，熱點(diǎn)的基本形狀有矩形、圓形和多邊形3種。利用不同的工具，可以定義不同的熱點(diǎn)形狀。4、編輯熱點(diǎn)定義熱點(diǎn)后，就可以編輯熱點(diǎn)。在DreamweaverMX中，熱點(diǎn)的編輯包括改變單個(gè)熱點(diǎn)的形狀、大小，以及多個(gè)熱點(diǎn)的對齊方式、熱點(diǎn)間高與寬的設(shè)置等操作。5、為熱點(diǎn)建立鏈接教學(xué)過程設(shè)定一個(gè)熱點(diǎn)的輪廓后，就可以著手建立該熱點(diǎn)的鏈接關(guān)系了。熱點(diǎn)可以鏈接到不同的對象上，如一個(gè)已經(jīng)設(shè)計(jì)好的網(wǎng)頁、一個(gè)圖像或一個(gè)動(dòng)畫等。作業(yè)：1、圖像的插入

2、圖像映射圖

3、WEB相冊一、實(shí)驗(yàn)?zāi)康模?/p>

1、通過本例要求掌握常見的圖像格式及圖像的插入方法。

2、能夠修改圖像屬性，利用外部圖像處理軟件編輯圖像。

3、創(chuàng)建圖像映射，建立WEB相冊。二、實(shí)驗(yàn)器材：多媒體計(jì)算機(jī)。

三、學(xué)時(shí)分配：2學(xué)時(shí)。

四、實(shí)習(xí)地點(diǎn)：校內(nèi)多媒體機(jī)房。

五、實(shí)習(xí)內(nèi)容：

基本知識：1、了解網(wǎng)頁圖像的格式及常見的圖像編輯軟件的使用

2、網(wǎng)頁中圖像插入及編輯練習(xí)

3、映射圖的創(chuàng)建及編輯

4、WEB相冊的創(chuàng)建及編輯實(shí)例設(shè)計(jì)：1、圖像的插入

2、圖像映射圖

3、WEB相冊教學(xué)內(nèi)容第六章《創(chuàng)建超級鏈接》校歷第七周課時(shí)6課型理論+實(shí)踐教學(xué)目標(biāo)1、熟練掌握設(shè)置文本超級連接的方法；2、熟練掌握設(shè)置圖片超級連接的方法；3、熟練掌握設(shè)置圖片熱點(diǎn)超級連接的方法；教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置各種鏈接的應(yīng)用分析總結(jié)本章介紹鏈接的基本概念，其中包括URL地址、絕對路徑和相對路徑的概念及其區(qū)別。詳細(xì)闡述了風(fēng)種常見的超級鏈接的形式，通過活動(dòng)掌握多種超級鏈接的創(chuàng)建方法，并且設(shè)置超級鏈接的目標(biāo)窗口及文本提示。教學(xué)過程一、超級鏈接

1、概念：超級鏈接簡稱鏈接，是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)對象的連接關(guān)系，它包含兩個(gè)部分，即鏈接源和鏈接目標(biāo)。2、超級鏈接的作用可以把一個(gè)網(wǎng)站的網(wǎng)頁或多個(gè)網(wǎng)站連接起來，點(diǎn)擊鏈接時(shí)從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，或者跳轉(zhuǎn)到頁面指定的位置。也正是超鏈接的存在是人們改變了以往的順序閱讀習(xí)慣，使整個(gè)Internet上的信息連為一個(gè)整體。分類、絕對路徑：是一個(gè)完整的URL，包括協(xié)議、域名、路徑，如，常用于鏈接外服務(wù)器上的文件。相對鏈接：只有路徑，沒有協(xié)議、域名，它又分為站點(diǎn)根目錄相對路徑和文檔相對路徑。a點(diǎn)根目錄相對路徑指從站點(diǎn)的根文件夾到文檔的路徑如in_xi/index.htm"b文檔相對路徑指和當(dāng)前文檔所在的文件夾相對的路徑，它使用較多。如../image/bg.jpg。錨點(diǎn)：指在網(wǎng)頁中對某個(gè)位置的標(biāo)記，如#top，jxgc.htm#top，用于轉(zhuǎn)移到指定網(wǎng)頁的指點(diǎn)位置。二、各種鏈接的功能和實(shí)現(xiàn)方法。

1導(dǎo)航鏈接：實(shí)現(xiàn)站點(diǎn)內(nèi)文檔的鏈接。

實(shí)現(xiàn)方法：a、向文件圖標(biāo)鏈接文檔：將“屬性”檢查器的“鏈接”域右邊的“指向教學(xué)過程文圖標(biāo)拖動(dòng)到站點(diǎn)窗口的文檔中。b、性檢查器：選中添加鏈接的網(wǎng)頁元素，點(diǎn)擊屬性面板中的“瀏覽圖標(biāo)。2、目標(biāo)選擇_blank在新的未命名的瀏覽器窗口中加載鏈接文檔。

_parent在父框架頁或包含該鏈接的框架窗口中加載鏈接文檔。如果包含鏈接的框架不是嵌套的，則鏈接文檔將加載到整個(gè)瀏覽器窗口中。

_self將鏈接文檔加載到與鏈接相同的框架或窗口中，該目標(biāo)是默認(rèn)值，所以通常您不需要指定它。

_top將在整個(gè)瀏覽器窗口中加載鏈接文件，同時(shí)移除所有框架。

一個(gè)網(wǎng)站中，第一級鏈接或者導(dǎo)航鏈接選擇_self，第二級鏈接和友情鏈接選擇_blank。3錨點(diǎn)鏈接：鏈接到文檔中的指定位置。鏈接到文檔中的指定位置：在需要插入錨的地方，點(diǎn)一下光標(biāo)，然后單擊常用面板上的命名錨記工具。在文檔中選取要?jiǎng)?chuàng)建鏈接的網(wǎng)頁元素，點(diǎn)擊屬性面板中的“指向文件”圖標(biāo)，并將它拖動(dòng)到您需要鏈接的錨記處，也可在鏈接文本框中輸入錨點(diǎn)名字，如#top，也可鏈接到其他網(wǎng)頁的錨點(diǎn)上，如jxgc.htm#top。4空鏈接：是一個(gè)無指向的鏈接，通常用于為頁面上的對象或文本附加行為5．創(chuàng)建javascript腳本鏈接：

創(chuàng)建步驟：教學(xué)過程在文檔窗口中選取文本，圖象或?qū)ο螅凇皩傩浴睓z查器的“鏈接”欄中鍵入javascript:，其后緊接javascript代碼或函數(shù)調(diào)用。例如在鏈接欄中鍵入javascript:alert('哈哈你上當(dāng)了')創(chuàng)建一個(gè)鏈接，點(diǎn)擊鏈接后就會(huì)出現(xiàn)一個(gè)警告框。作業(yè)：1、基本操作

2、多彩文字鏈接教學(xué)內(nèi)容第八章《插入多媒體元素》校歷第八周課時(shí)2課型理論+實(shí)踐教學(xué)目標(biāo)1、掌握在網(wǎng)頁中插入Flash元素的基本方法；2、掌握Flash相關(guān)屬性的設(shè)置；教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置在相應(yīng)頁面插入各種Flash元素分析總結(jié)本章主要通過三個(gè)活動(dòng)的展開，介紹了在網(wǎng)頁中插入Flash元素的方法，其中包括常見的Flash形式：Flash動(dòng)畫；Flash按鈕；Flash文本等。介紹了在網(wǎng)頁中添加視頻和音效的方法，以及其他多媒體元素的插入，其中包括ActiveX控件、Plugin插件、JavaApplet等。教學(xué)過程新課內(nèi)容：在Dreamweaver中可以將以下媒體文件插入到網(wǎng)頁：Flash和Shockwave影片、QuickTime、AVI、Javaapplet、ActiveX控件以及各種格式的音頻文件。一、添加Flash動(dòng)畫SWF格式的Flash文件，SWF文件是Flash(.fla)文件的壓縮版本，此文件可以在瀏覽器中播放并且可以在Dreamweaver中進(jìn)行預(yù)覽，但不能在Flash中編輯此文件。在“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放置在要插入影片的地方，然后在“插入”欄的“常用”類別中，選擇“媒體”，然后單擊“插入Flash”圖標(biāo)。或選擇“插入”>“媒體”>“Flash”。二、創(chuàng)建和插入Flash按鈕在“設(shè)計(jì)”視圖或“代碼”視圖中工作時(shí)，可以在文檔中創(chuàng)建和插入Flash按鈕。在“文檔”窗口中，將插入點(diǎn)放置在您要插入Flash按鈕的位置。打開“插入Flash對象”對話框，在“插入”欄的“常用”類別中，選擇“媒體”，然后單擊“Flash按鈕”圖標(biāo)。若要修改Flash按鈕對象，在“文檔”窗口中，單擊Flash按鈕對象以選擇它?？梢允褂脤傩詸z查器修改按鈕的HTML屬性，例如寬度、高度和背景顏色。若要對內(nèi)容進(jìn)行更改，雙擊Flash按鈕對象。在屬性檢查器中單擊“編輯”。三、創(chuàng)建和插入Flash文本創(chuàng)建和插入Flash文本與Flash按鈕類似。四、插入Shockwave影片Shockwave作為Web上用于交互式多媒體的Macromedia標(biāo)準(zhǔn)，是一種經(jīng)壓縮的格式。教學(xué)過程五、添加視頻在Dreamweaver中可以通過不同方式和使用不同格式將視頻添加到Web頁面。視頻可被下載給用戶，或者可以對視頻進(jìn)行流式處理以便在下載它的同時(shí)播放它。六、嵌入聲音文件嵌入音頻將聲音直接并入頁面中，但只有在訪問站點(diǎn)的訪問者具有所選聲音文件的適當(dāng)插件后，聲音才可以播放。七、插入ActiveX控件可以在頁面中插入ActiveX控件。ActiveX控件（以前稱作OLE控件）是可以充當(dāng)瀏覽器插件的可重復(fù)使用的組件，有些像微型的應(yīng)用程序。八、插入Javaapplet可以使用Dreamweaver將Javaapplet插入HTML文檔中。Java是一種編程語言，通過它可以開發(fā)可嵌入Web頁中的小型應(yīng)用程序。s"width="100"height="230"><paramname="image"value="1.jpg"></applet>注:插件必須與所在網(wǎng)頁在同一目錄九、插入圖像查看器作為圖片之間互相交換方法：插入”>“媒體”>“圖像查看器”，“窗口”>“標(biāo)簽選擇器”教學(xué)過程bgColor:設(shè)置圖像檢看器的背景顏色。

captionColor:設(shè)置圖片的標(biāo)題顏色。

captionFont:設(shè)置圖片標(biāo)題的字體。

captionSkize:設(shè)置圖片標(biāo)題的字體大小。

frameColor:設(shè)置邊框的顏色。

frameShow:設(shè)置是否顯示邊框。

frameThickness:設(shè)置邊框的寬度。

imageCaption:設(shè)置圖片的標(biāo)題。imageURLs:指定圖片的地址。

showControls:設(shè)置是否顯示控制臺(tái)。

slideAutoPlay:設(shè)置是否自動(dòng)播放。

slideDelay:設(shè)置圖片播放的延遲時(shí)間。

slideLoop:設(shè)置圖片是否循環(huán)播放。

title:設(shè)置圖像檢看器的標(biāo)題。

titleColor:設(shè)置圖像查看器的標(biāo)題顏色。

titleFont:設(shè)置圖像查看器的標(biāo)題的字體。

titleSize:設(shè)置圖像查看器的標(biāo)題的字體大小。

transitionsType：設(shè)置圖片切換的模式。教學(xué)內(nèi)容第七章《建立框架網(wǎng)頁》校歷第八周課時(shí)4課型理論+實(shí)踐教學(xué)目標(biāo)1、理解框架網(wǎng)頁的基本原理；2、掌握新建框架網(wǎng)頁的兩種方法；教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置建立框架網(wǎng)頁分析總結(jié)本章主要通過四個(gè)活動(dòng)的展開，讓我們了解框架的基本概念，掌握框架網(wǎng)頁的創(chuàng)建、調(diào)整、刪除等基本集操作，能區(qū)分框架和框架集中的文件，并能區(qū)別保存。能夠利用“屬性”面板設(shè)置框架屬性及相關(guān)的鏈接屬性。掌握創(chuàng)建無框架內(nèi)容及內(nèi)嵌式框架的基本方法。教學(xué)過程一、框架與框架集的概念框架：是瀏覽器窗口中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的HTML文檔。框架集：是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個(gè)框架中初始顯示的頁面的URL?？蚣芗募旧聿话跒g覽器中顯示的HTML內(nèi)容，但noframes部分除外；框架集文件只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。二、框架的用途最常見用途就是導(dǎo)航。一組框架通常包括一個(gè)含有導(dǎo)航條的框架和另一個(gè)要顯示主要內(nèi)容頁面的框架。三、框架和框架集工作流程要在瀏覽器中查看一組框架，請輸入框架集文件的URL；瀏覽器隨后打開要顯示在這些框架中的相應(yīng)文檔。通常將一個(gè)站點(diǎn)的框架集文件命名為index.htm，以便當(dāng)訪問者未指定文件名時(shí)默認(rèn)顯示該名稱。樣例說明四、創(chuàng)建框架和框架集1、使用預(yù)定義的框架集通過預(yù)定義的框架集，您可以很容易地選擇您要?jiǎng)?chuàng)建的框架集類型。創(chuàng)建預(yù)定義的框架集有兩種方法：插入欄（2）“新建文檔”對話框創(chuàng)建新的空框架集。2、設(shè)計(jì)框架集可以通過向窗口添加“拆分器”，在Dreamweaver中設(shè)計(jì)您自己的框架集。教學(xué)過程創(chuàng)建框架集操作：選擇“修改”>“框架集”，然后從子菜單選擇拆分項(xiàng)框架拆分操作：要拆分插入點(diǎn)所在的框架，從“修改”>“框架集”子菜單選擇拆分項(xiàng)。請?jiān)诎醋lt鍵的同時(shí)拖動(dòng)框架邊框。刪除框架操作：將邊框框架拖離頁面或拖到父框架的邊框上。調(diào)整框架大小操作：五、嵌套框架集在另一個(gè)框架集之內(nèi)的框架集稱作嵌套的框架集。六、框架和框架集的編輯1、選擇框架和框架集要更改框架或框架集的屬性，首先要選擇您要更改的框架或框架集。您既可以在“文檔”窗口中選擇框架或框架集，也可以通過“框架”面板進(jìn)行選擇。2、在框架中打開文檔將插入點(diǎn)放置在框架中，選擇“文件”>“在框架中打開”，選擇要在該框架中打開的文檔，該文檔隨即顯示在框架中。3、框架和框架集文件瀏覽器中預(yù)覽框架集前，必須保存框架集文件以及要在框架中顯示的所有文檔。可以單獨(dú)保存每個(gè)框架集文件和帶框架的文檔，也可以同時(shí)保存框架集文件和框架中出現(xiàn)的所有文檔。4、控制具有鏈接的框架內(nèi)容九、Iframe的使用iframe也稱作嵌入式框架，嵌入式框架和框架網(wǎng)頁類似，它可以把一個(gè)網(wǎng)頁的框架和內(nèi)容嵌入在現(xiàn)有的網(wǎng)頁中。在DreamweaverMX開始，可以可視化操作iframe，不再需要第三方插件。1、插入iframe點(diǎn)擊“插入面板”的“標(biāo)簽選擇器”教學(xué)過程在“標(biāo)簽選擇器”對話框中，選擇iframe標(biāo)簽，點(diǎn)擊“插入”按鈕。在“標(biāo)簽編輯器-Iframe”對話框中，根據(jù)面板提示操作。最基本的兩項(xiàng)是“源”和“名稱”。2、設(shè)置鏈接在某個(gè)iframe中打開選中鏈接，在屬性面板中的“目標(biāo)”項(xiàng)，手工輸入目標(biāo)iframe的“名稱”。3、iframe透明為了使iframe內(nèi)容和網(wǎng)頁背景相同，需要使iframe透明。在“標(biāo)簽編輯器-Iframe”對話框中，選擇“瀏覽器特定的”項(xiàng)目卡，選中“允許透明”。教學(xué)內(nèi)容第八章《插入多媒體元素》校歷第九周課時(shí)4課型理論+實(shí)踐教學(xué)目標(biāo)1、掌握在網(wǎng)頁中插入Flash元素的基本方法；2、掌握Flash相關(guān)屬性的設(shè)置；教學(xué)方法案例教學(xué)法作業(yè)布置在相應(yīng)頁面插入各種多媒體元素分析總結(jié)本章主要通過三個(gè)活動(dòng)的展開，介紹了在網(wǎng)頁中插入Flash元素的方法，其中包括常見的Flash形式：Flash動(dòng)畫；Flash按鈕；Flash文本等。介紹了在網(wǎng)頁中添加視頻和音效的方法，以及其他多媒體元素的插入，其中包括ActiveX控件、Plugin插件、JavaApplet等。教學(xué)過程一、實(shí)驗(yàn)?zāi)繕?biāo)掌握如何在Dreamweaver中插入Flash動(dòng)畫、Flash按鈕、Flash文本、視頻、聲音以及插件。二、實(shí)習(xí)內(nèi)容：

基本知識：1、Flash動(dòng)畫與Flash元素的插入練習(xí)

2、視頻與聲音的插入練習(xí)

3、外部插件的使用三、實(shí)例設(shè)計(jì)：插入Flash2、插入電影3、插入Flash圖像查看器與背景音樂四、步驟【步驟一】建立站點(diǎn)【步驟二】插入相應(yīng)的多媒體【步驟三】修改相應(yīng)的多媒體教學(xué)內(nèi)容第九章《建立表單》校歷第九周課時(shí)2課型理論+實(shí)踐教學(xué)目標(biāo)1、理解表單交互的基本原理2、掌握建立表單布局及插入不同表單對解的基本方法；3、掌握設(shè)置相關(guān)屬性教學(xué)方法案例教學(xué)法作業(yè)布置創(chuàng)建注冊頁分析總結(jié)本章主要通過三個(gè)活動(dòng)的展開，讓我們了解表單的創(chuàng)建方法其中包括表單布局的建立、表單元素的添加、表單元素的屬性以及表單元素樣式的設(shè)定。同時(shí)還介紹了驗(yàn)證表單輸入結(jié)果、通過電子郵件接收表單結(jié)果及跳轉(zhuǎn)菜單的創(chuàng)建方法。此外介紹了新版本中增加的四種spry構(gòu)件的添加及屬性設(shè)置方法。教學(xué)過程案例引入：1、留言簿

2、在線申請

3、搜索表單新課內(nèi)容：一、表單的概念及作用

表單（Form）是一種結(jié)構(gòu)化的文件，用于收集和發(fā)布信息。它是網(wǎng)站管理員與訪問者進(jìn)行交流的一種媒介，通過訪問者填寫表單中的選擇題、填空題和問答題，網(wǎng)站管理員可以收集到來自世界各地的資料和意見。目前表單主要用來進(jìn)行意見調(diào)查、在線查詢、網(wǎng)上購物、在線申請等。在表單中經(jīng)常出現(xiàn)的字段有：單行文本框、多行滾動(dòng)文本框、單選框、復(fù)選框、下拉列表框和按鈕。二、HTML表單設(shè)計(jì)基礎(chǔ)表單在HTML頁面中起著重要作用，它是與用戶交互信息的主要手段。一個(gè)表單至少應(yīng)該包括說明性文字、用戶填寫的表格、提交和重填按鈕等內(nèi)容。用戶填寫了所需的資料之后，按下“提交資料”按鈕，這樣所填資料就會(huì)通專門的CGI接口傳到Web服務(wù)器上。網(wǎng)頁的設(shè)計(jì)者隨后就能在Web服務(wù)器上看到用戶填寫的資料，從而完成了從用戶到作者之間的反饋和交流。對于免費(fèi)個(gè)人網(wǎng)站，往往服務(wù)器不提供CGI功能，也可以電子郵件來接收用戶的反饋信息。表單中主要包括下列元素：

button——普通按鈕

radio——單選按鈕

checkbox——復(fù)選框

select——下拉式菜單

text——單行文本框

textarea——多行文本框

submit——提交按鈕

reset——重填按鈕

教學(xué)過程用HTML設(shè)計(jì)表單常用的標(biāo)記是：<form>、<input>、<Option>、<Select>、<textarea>和<isindex>等標(biāo)記。1、<form>表單標(biāo)記該標(biāo)記的主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的url地址。2、<input>表單輸入標(biāo)記此標(biāo)記在表單中使用頻繁，大部分表單內(nèi)容需要用到此標(biāo)記。3、<select>下拉菜單標(biāo)記4、<textarea>多行文本輸入標(biāo)記5、<option>選項(xiàng)標(biāo)記三、表單網(wǎng)頁的制作方法通常制作表單網(wǎng)頁的方法有兩種，第一種是手工添加，第二種是利用表單向?qū)В@里我們著重介紹第一種方法。新建網(wǎng)頁在網(wǎng)頁上輸入“留言簿”三個(gè)字后，單擊菜單：插入――表單，會(huì)自動(dòng)彈出一個(gè)下拉菜單，列出所有可供選擇的字段課堂作業(yè)：1、通過“留言簿”的制作，掌握表單的制作方法，并自己動(dòng)手做一遍。2、自己設(shè)計(jì)一個(gè)精美的表單。課后體會(huì)：仔細(xì)體會(huì)各種表單元素的使用方法及綜合運(yùn)用。通過本章學(xué)習(xí)，能夠更加理解動(dòng)態(tài)網(wǎng)頁的概念，理解表單是設(shè)計(jì)者與瀏覽者之間的橋梁，從而使網(wǎng)站更具有吸引力。教學(xué)內(nèi)容第十章《使用模板和庫》校歷第十周課時(shí)4課型理論+實(shí)踐教學(xué)目標(biāo)1、理解表單交互的基本原理2、掌握建立表單布局及插入不同表單對解的基本方法；3、掌握設(shè)置相關(guān)屬性教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置驗(yàn)證表單分析總結(jié)一個(gè)成功的網(wǎng)站在網(wǎng)頁設(shè)計(jì)上必須體現(xiàn)其風(fēng)格，以至于訪問者能夠在茫茫網(wǎng)海中對其留下或深或淺的印象，要做到這一點(diǎn)，不是只靠一兩個(gè)設(shè)計(jì)非常優(yōu)秀的頁面就可以體現(xiàn)的，而是需要網(wǎng)站中所有的頁面都要來完成的，也就是所有的頁面都必須體現(xiàn)同一風(fēng)格。但當(dāng)我們需要更改網(wǎng)站頁面中共有的內(nèi)容時(shí)，如鏈接、頁面布局等，就需要我們一頁頁的修改，這樣做費(fèi)時(shí)費(fèi)力。教學(xué)過程范例引入：1、模板實(shí)例。

2、庫實(shí)例。新課內(nèi)容：一、使用庫項(xiàng)目:庫是一種用來存儲(chǔ)想要在整個(gè)網(wǎng)站上經(jīng)常重復(fù)使用或更新的頁面元素（如圖像、文本和其他對象）的方法。這些元素稱為庫項(xiàng)目。通過修改庫元素，可以實(shí)現(xiàn)整個(gè)網(wǎng)站各頁面上與庫元素相關(guān)內(nèi)容的一次性更新。庫元素存放在庫文件中，庫文件存在站點(diǎn)根目錄的Library文件夾內(nèi)。1、創(chuàng)建庫項(xiàng)目：1）選擇文檔的一部分，例如選擇一個(gè)圖片（也可選擇多項(xiàng)內(nèi)容）。

2）打開資源面板，點(diǎn)擊“庫”按鈕，打開庫類別。

3）點(diǎn)擊“新建庫項(xiàng)目”按鈕。

4）給庫項(xiàng)目命名。一個(gè)庫就創(chuàng)建好了。教學(xué)過程2、插入庫項(xiàng)目1）將插入點(diǎn)放在“文檔”窗口中。

2）選擇一個(gè)庫項(xiàng)目，單擊“插入”按鈕。

3）插入庫后的頁面如下圖。3、修改庫1）選中頁面中的庫項(xiàng)目。

2）在屬性面板中點(diǎn)擊“打開”按鈕。

3）修改庫項(xiàng)目，修改完成之后保存。

4）在“更新庫項(xiàng)目”對話框中點(diǎn)擊“更新”按鈕。

5）選擇更新的范圍，更新完成之后關(guān)閉。4、與庫分離1）選中頁面中的庫項(xiàng)目。

2）在屬性面板中點(diǎn)擊“從源文件中分離”按鈕，則應(yīng)用的庫項(xiàng)目變?yōu)榭梢愿牡模嚅_與庫項(xiàng)目的鏈接。5、更新整個(gè)站點(diǎn)或所有使用特定庫項(xiàng)目的文檔：選擇“修改”→“庫”→“更新頁面”。6、更改當(dāng)前文檔以使用所有庫項(xiàng)目的當(dāng)前版本：選擇“修改”→“庫”→“更新當(dāng)前頁”。教學(xué)內(nèi)容第十一章《CSS樣式表》校歷第十周課時(shí)2課型理論+實(shí)踐教學(xué)目標(biāo)使用CSS（層疊式樣式表）可以為部分文件甚至整個(gè)網(wǎng)站定義樣式。教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置1、進(jìn)行CSS基本樣式設(shè)置，單擊顯示

2、在網(wǎng)頁中制作兩種風(fēng)格以上的按鈕，單擊顯示分析總結(jié)將樣式表與網(wǎng)頁相關(guān)聯(lián)，關(guān)聯(lián)的網(wǎng)頁將自動(dòng)套用樣式表中的格式，使所有網(wǎng)頁中都可以應(yīng)用相同的樣式，這樣既保證了站點(diǎn)風(fēng)格的一致性，又提高了工作效率。教學(xué)過程一、CSS概念：CSS是CascadingStyleSheets（層疊樣式表單）的簡稱。它允許設(shè)計(jì)者在HTML文檔中加入樣式（如字體類型、顏色、大小等等）。二、CSS的創(chuàng)建與使用：

創(chuàng)建CSS樣式：1、顯示CSS樣式浮動(dòng)面板：單擊［窗口］－－［CSS樣式］

2、單擊浮動(dòng)面板右下角的加號

3、輸入樣式表名稱

4、選擇樣式類型：（有三種）通常我們選擇創(chuàng)建自定義樣式創(chuàng)建自定義樣式：建一個(gè)可以作為class屬性應(yīng)用于文本區(qū)域或文本塊的樣式。

重定義HTML標(biāo)簽：對指定的HTML標(biāo)簽的默認(rèn)格式進(jìn)行重新定義。小心使用重定義標(biāo)簽，這樣做你會(huì)改變許多頁面的布局。

使用CSS選擇器：對特定的標(biāo)簽組合，或者包含有指定1d屬性的所有標(biāo)簽進(jìn)行格式定義。(在后面的內(nèi)容中我們再會(huì)作詳細(xì)舉例和分析)5、選擇應(yīng)用區(qū)：（有二種）

僅對該文檔：則只能將此樣式應(yīng)用于本文件。

新建樣式表文件：可將此樣式保存成一個(gè)文件，可供其他文件調(diào)用。

范例完成與演示：1、首先定義一個(gè)嵌入式（僅對本文檔）的樣式——body中的文字定義為9pt。按下Shift+F11打開CSS面板(CSS面板面于DREAMWEAVERMX的右邊，和行為，HTML樣式均在設(shè)計(jì)窗口)——新建一個(gè)樣式表——選中重新定義HTML標(biāo)簽(R)和僅對該文檔兩項(xiàng)——出現(xiàn)“CSS樣式定義”對話框——選擇分類為“類型”——設(shè)定文字為“宋體”、大小為9pt——確定教學(xué)過程說明：上面的定義選擇了<body>標(biāo)簽，也就是說<body>標(biāo)簽內(nèi)的文字都將會(huì)是宋體，大小為9磅（pt），而<body>是網(wǎng)頁的主體，也就是說網(wǎng)頁內(nèi)的所有文字都如上定義。范例：CSS基本樣式設(shè)置。2、定義一外部連接式CSS樣式——去掉鏈接文字的下劃線，為鏈接文字設(shè)置不同狀態(tài)下的鏈接顏色。很多網(wǎng)站做出來的鏈接都是無下劃線的（或者鼠標(biāo)移到后下劃線不見了），而自己做出來的網(wǎng)頁總是有下劃線的。還有默認(rèn)鏈接文字的顏色是固定的，未鏈接時(shí)為藍(lán)色，鏈接后為紫紅色，千篇一律，在網(wǎng)頁中很是單調(diào)，其實(shí)這些都可以根據(jù)網(wǎng)站的風(fēng)格、設(shè)計(jì)者的喜好進(jìn)行不同的設(shè)置。再次“新建CSS樣式”——這次選中使用CSS選擇器和新建樣式表文件兩項(xiàng)，標(biāo)簽選擇選a:link——“保存樣式表文件”為a.css（樣式表文件的擴(kuò)展名為.CSS）——在“CSS樣式定義”對話框中，字本裝飾那里選無，表示無下劃線，文字顏色為ff0000——確定即設(shè)定好了未鏈接文字無下劃線，且文字顏色為紅色。說明：<a>是指有鏈接的文字

a:link：表示已經(jīng)鏈接；

a:hover：表示鼠標(biāo)移上鏈接時(shí)；

a:active：表示鏈接激活時(shí)；

a:visited：表示己點(diǎn)擊過的鏈接。然后重復(fù)幾次上面步驟，按你的喜歡分別定義好上面幾個(gè)標(biāo)簽即可。作業(yè)：1、進(jìn)行CSS基本樣式設(shè)置，單擊顯示

2、在網(wǎng)頁中制作兩種風(fēng)格以上的按鈕，單擊顯示教學(xué)內(nèi)容第十二章《APDiv

應(yīng)用》校歷第十一周課時(shí)4課型理論+實(shí)踐教學(xué)目標(biāo)1、掌握在網(wǎng)頁中創(chuàng)建、修改層和嵌套層的方法

2、掌握層的屬性和編輯層屬性的方法

3、掌握移動(dòng)、刪除層的方法

4、能夠?qū)优c行為進(jìn)行簡單結(jié)合教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置制作菜單欄分析總結(jié)層是網(wǎng)站設(shè)計(jì)者應(yīng)用最為廣泛的工具之一。通過層，網(wǎng)站設(shè)計(jì)者可以隨意在層中放入文字、圖片、插件或其他層，也可以移動(dòng)層；這正是使用Dreamweaver的層的魅力所在。通過本章的學(xué)習(xí)，應(yīng)掌握層的基本操作方法如層的創(chuàng)建方法、層的各種編輯、層的相關(guān)屬性設(shè)置及層與表格間的轉(zhuǎn)換方式等。教學(xué)過程一、創(chuàng)建層1、使用插入菜單創(chuàng)建層：插入菜單——層選項(xiàng)

2、嵌套層：就是在一個(gè)層內(nèi)創(chuàng)建新的層1）嵌套層的操作：

a、將插入點(diǎn)光標(biāo)放入父層內(nèi)，然后使用插入菜單——層選項(xiàng)；

b、按住Ctrl鍵，并在層面板內(nèi)，將子層的名稱拖到父層的名稱上。

2）查看所有的層：“窗口”菜單-其他-層（快捷鍵F2）二、修改層1、選擇層1）激活層：用鼠標(biāo)單擊層所屬的區(qū)域

2）選擇某一個(gè)層：

用鼠標(biāo)單擊文檔的層標(biāo)識，使層的邊框上出現(xiàn)黑色的小方塊；

-用鼠標(biāo)單擊層的選擇手柄；

-用鼠標(biāo)單擊層的邊框；

-用鼠標(biāo)單擊層面板內(nèi)層的名稱。

-按住Shift鍵的同時(shí)，依次用鼠標(biāo)單擊層所在的區(qū)域。

4）取消選擇：在文檔窗口內(nèi)單擊鼠標(biāo)

5）刪除層：選定層后，按Delete鍵2、改變層的大小：鼠標(biāo)拖曳或?qū)傩悦姘褰虒W(xué)過程3、改變層的位置：鼠標(biāo)拖曳4、對齊層：選定多個(gè)層、“修改”菜單-對齊

要點(diǎn)：對齊層時(shí)，系統(tǒng)自動(dòng)將最后選定的層作為對齊標(biāo)準(zhǔn)教學(xué)內(nèi)容第十二章《APDiv

應(yīng)用》校歷第十一周課時(shí)2課型理論+實(shí)踐教學(xué)目標(biāo)1、掌握在網(wǎng)頁中創(chuàng)建、修改層和嵌套層的方法

2、掌握層的屬性和編輯層屬性的方法

3、掌握移動(dòng)、刪除層的方法

4、能夠?qū)优c行為進(jìn)行簡單結(jié)合教學(xué)方法任務(wù)驅(qū)動(dòng)法作業(yè)布置制作固定層分析總結(jié)層是網(wǎng)站設(shè)計(jì)者應(yīng)用最為廣泛的工具之一。通過層，網(wǎng)站設(shè)計(jì)者可以隨意在層中放入文字、圖片、插件或其他層，也可以移動(dòng)層；這正是使用Dreamweaver的層的魅力所在。通過本章的學(xué)習(xí)，應(yīng)掌握層的基本操作方法如層的創(chuàng)建方法、層的各種編輯、層的相關(guān)屬性設(shè)置及層與表格間的轉(zhuǎn)換方式等。教學(xué)過程三、圖層的命名命名圖層可以執(zhí)行以下操作之一：（1）選擇圖層，在其屬性面板的“層編號”文本框中輸入圖層名稱。（2）選擇“窗口”|“其它”|“層”命令，打開圖層面板。雙擊要命名圖層的“名稱”欄，使之處于可編輯狀態(tài)，輸入圖層名稱。四、改變圖層的疊放次序1．利用圖層面板來調(diào)整圖層的疊放次序打開圖層面板。把光標(biāo)放置到要改變位置的層的名稱上，拖動(dòng)到合適位置釋放鼠標(biāo)。2．利用層屬性面板來調(diào)整圖層的疊放次序在層屬性面板中直接修改層的“Z軸”值，可以改變層的疊放次序。可以在文本框中輸入數(shù)值，當(dāng)輸入的數(shù)值比當(dāng)前值大時(shí)，表示圖層的疊放次序提高；當(dāng)輸入的數(shù)值比當(dāng)前值小時(shí)，表示圖層的疊放次序降低。五、設(shè)置圖層參數(shù)和圖層屬性1、設(shè)置圖層參數(shù)

1）使用圖層參數(shù)可以為新創(chuàng)建的層定義默認(rèn)設(shè)置

2）操作：“編輯”菜單-參數(shù)選擇2、設(shè)置圖層屬性：屬性面板教學(xué)過程層與表格1、將層轉(zhuǎn)換為表格：“修改”菜單-轉(zhuǎn)換-層到表格2、將表格轉(zhuǎn)換為層：“修改”菜單-轉(zhuǎn)換-表格到層注意：1．隱藏的圖層不能轉(zhuǎn)換為表格。2．重疊的層不允許轉(zhuǎn)換為表格，因?yàn)楸砀竦膯卧袷遣荒苤丿B的。3．在模板文檔或已應(yīng)用模板的文檔中，不能將層轉(zhuǎn)換為表格或?qū)⒈砀褶D(zhuǎn)換為層。即應(yīng)該在非模板文檔中創(chuàng)建布局，然后再將該文檔另存為模板之前進(jìn)行轉(zhuǎn)換。教學(xué)內(nèi)容第十二章《APDiv

應(yīng)用》校歷第十二周課時(shí)6課型理論+實(shí)踐教學(xué)目標(biāo)1、掌握在網(wǎng)頁中創(chuàng)建、修改層和嵌套層的方法

2、掌握層的屬性和編輯層屬性的方法

3、掌握移動(dòng)、刪除層的方法

4、能夠?qū)优c行為進(jìn)行簡單結(jié)合教學(xué)方法案例教學(xué)法作業(yè)布置會(huì)跑動(dòng)的面板動(dòng)態(tài)菜單的制作4、時(shí)間軸的制作（1）設(shè)計(jì)一個(gè)復(fù)雜的timeline（2）加入控制按鈕和動(dòng)作（3）動(dòng)畫過程中設(shè)置圖層可見性分析總結(jié)層是網(wǎng)站設(shè)計(jì)者應(yīng)用最為廣泛的工具之一。通過層，網(wǎng)站設(shè)計(jì)者可以隨意在層中放入文字、圖片、插件或其他層，也可以移動(dòng)層；這正是使用Dreamweaver的層的魅力所在。通過本章的學(xué)習(xí)，應(yīng)掌握層的基本操作方法如層的創(chuàng)建方法、層的各種編輯、層的相關(guān)屬性設(shè)置及層與表格間的轉(zhuǎn)換方式等。教學(xué)過程一、實(shí)訓(xùn)目的與要求：目的：通過上機(jī)實(shí)訓(xùn)讓學(xué)生學(xué)會(huì)使用層定位網(wǎng)頁中元素和實(shí)現(xiàn)一些簡單特效。要求：利用層面使網(wǎng)頁中的文檔內(nèi)容出現(xiàn)重疊效果，實(shí)現(xiàn)層面內(nèi)容的動(dòng)態(tài)交替顯示。二、實(shí)訓(xùn)內(nèi)容：利用層制作下拉菜單式的網(wǎng)頁菜單注：(1)、父層應(yīng)加空鏈接，光標(biāo)應(yīng)定位在<ahref>之間，再添加行為(2)、屬性欄左右應(yīng)設(shè)為空利用層做出交替顯示的特效。利用層做出拼圖注：(1)通過單擊“文檔”窗口底部標(biāo)簽選擇器中的<body>選擇body標(biāo)簽。（2）打開“行為”面板，從“動(dòng)作”中選擇“拖動(dòng)層”。在“左”和“上”文本框中為拖放目標(biāo)輸入值（以像素為單位）。拖放目標(biāo)是一個(gè)點(diǎn)，您想要訪問者將層拖動(dòng)到該點(diǎn)上。當(dāng)層的左坐標(biāo)和上坐標(biāo)與在“左”和“上”文本框中輸入的值匹配時(shí)便認(rèn)為層已經(jīng)到達(dá)拖放目標(biāo)。這些值是與瀏覽器窗口的左上角相對的。在“靠齊距離”文本框中輸入一個(gè)值（像素）確定訪問者必須放目標(biāo)多近，才能將層靠齊到目標(biāo)。較大的值可以使訪問者較容易找到拖放目標(biāo)。注意行為面板中的動(dòng)作為onload。保存頁面，f12預(yù)覽。三、層的制作與設(shè)計(jì)會(huì)跑動(dòng)的面板動(dòng)態(tài)菜單的制作教學(xué)過程4、時(shí)間軸的制作（1）設(shè)計(jì)一個(gè)復(fù)雜的timeline（2）加入控制按鈕和動(dòng)作（3）動(dòng)畫過程中設(shè)置圖層可見性5、實(shí)訓(xùn)結(jié)果：

制作出課堂上演示的例子；6、實(shí)訓(xùn)中可能產(chǎn)生的問題預(yù)測及處理：此次實(shí)訓(xùn)涉及的內(nèi)容比較多，可能出現(xiàn)的問題的面也可能要廣泛得多。最可能會(huì)出現(xiàn)以下問題：問題：學(xué)生在插入圖像以后會(huì)想直接通過拖動(dòng)鼠標(biāo)移動(dòng)圖像的位置；這是不可實(shí)現(xiàn)的；處理：再次給出現(xiàn)此錯(cuò)誤的學(xué)生強(qiáng)調(diào)圖像也是網(wǎng)頁的一種普通元素，而網(wǎng)頁中的普通元素不能在網(wǎng)頁中隨便移動(dòng)的。想進(jìn)行頁頁排版安排網(wǎng)頁元素的位置，只有通過排版工具，如表格和層進(jìn)行定位。問題：學(xué)生可能會(huì)想使用圖片和時(shí)間軸結(jié)合做圖片移動(dòng)的動(dòng)畫。這了是不可實(shí)現(xiàn)的；處理：給出現(xiàn)此錯(cuò)誤的學(xué)生強(qiáng)調(diào)能和時(shí)間軸結(jié)合做位置移動(dòng)動(dòng)畫的只有層。圖像和時(shí)間軸給合只能做交換圖片的動(dòng)畫，而不能做位置移動(dòng)的動(dòng)畫。如果想做圖像移動(dòng)的動(dòng)畫。必須先要把圖像放到層里面，然后通過層和時(shí)間軸結(jié)合做出圖像位置移動(dòng)的動(dòng)畫。此類問題即可解決；教學(xué)內(nèi)容第十三章《行為》校歷第十三周課時(shí)4課型理論+實(shí)踐教學(xué)目標(biāo)1、了解行為、事件與動(dòng)作的概念

2、學(xué)會(huì)利用行為面板設(shè)置控制對象的行為

3、會(huì)利用系統(tǒng)提供的主要行為，設(shè)置網(wǎng)頁對象的行為從而實(shí)現(xiàn)交互式網(wǎng)頁的設(shè)計(jì)

4、能夠下載、安裝并使用第三方行為教學(xué)方法案例教學(xué)法作業(yè)布置1、使用“改變屬性”行為設(shè)計(jì)變色按鈕效果，單擊顯示效果圖。

2、使用“拖動(dòng)層”行為設(shè)計(jì)拼圖，單擊顯示效果圖。

3、使用第三方行為設(shè)計(jì)滑動(dòng)菜單，單擊顯示效果圖分析總結(jié)網(wǎng)頁中很多動(dòng)態(tài)效果可以通過行為來實(shí)現(xiàn)。Dreamweaver附帶了很多內(nèi)置的行為，即使是那些不懂Java的入門也能輕松地制作動(dòng)態(tài)網(wǎng)頁。行為是一個(gè)對象上加為某一事件而觸發(fā)某一動(dòng)作的綜合描述。它是被用來動(dòng)態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面交效果或是執(zhí)行特定任務(wù)的一種方法教學(xué)過程新課內(nèi)容：一、 認(rèn)識行為和事件：1、行為：指在網(wǎng)頁中進(jìn)行的一系列動(dòng)作，通過這些動(dòng)作可實(shí)現(xiàn)用戶同網(wǎng)頁的交互，也可以通過動(dòng)作使某個(gè)任務(wù)被執(zhí)行。行為由事件和動(dòng)作兩個(gè)基本元素組成。通常，動(dòng)作是一段JavaScript代碼，Dreamweaver內(nèi)置了多種行為.2、事件：事件則由瀏覽器所定義，它可附加到各種頁面元素上，也可被附加HTML標(biāo)記中。同一個(gè)事件能夠引發(fā)幾個(gè)不同的動(dòng)作（注意執(zhí)行順序）。

選擇的對象不同，可執(zhí)行的事件也不同。

常見事件：OnchangeOnClickOnDblClickOnloadOnMouseDownOnMouseUp二、基本行為操作：1、認(rèn)識行為面板：事件列表行為列表瀏覽器及版本不同，事件列表的內(nèi)容也有所不同。添加與編輯行為：選定網(wǎng)頁元素、“窗口”菜單－行為面板（Shift+F3）添加行為效果：為對象、文本、時(shí)間線附加行為。選擇對象-打開行為面板-單擊加號按鈕-選擇合適的行為2）編輯行為效果：編輯動(dòng)作、引發(fā)動(dòng)作的事件、更改參數(shù)。3）為同一個(gè)事件添加多個(gè)動(dòng)作：教學(xué)過程三、使用DreamWeaver的內(nèi)置行為：1、調(diào)用JavaScript：某些事件發(fā)生時(shí)，允許用戶調(diào)用相應(yīng)的JavaScript代碼。2、改變屬性：動(dòng)態(tài)改變對象的屬性值。如層的屬性值，圖像大小或懸停按鈕效果。范例演示：改變屬性3、檢測瀏覽器：可獲取用戶瀏覽網(wǎng)頁所使用的瀏覽器類型而后根據(jù)不同的瀏覽器顯示不同的網(wǎng)頁。

一般常將這種行為附加到文檔上—<body>標(biāo)記上，打開文檔自動(dòng)跳轉(zhuǎn)。

另一種使用方法是將此行為附加到一個(gè)空鏈接上。4、檢測插件：檢測瀏覽者是否安裝了瀏覽網(wǎng)頁所需的插件。從而決定鏈接指向的網(wǎng)頁。

如：FlashShockwave等。5、控制Shockwave或Flash：可在文檔中添加按鈕類的對象，實(shí)現(xiàn)對動(dòng)畫的控制。

如：設(shè)置動(dòng)畫的播放、停止、返回或轉(zhuǎn)到相應(yīng)幀。6、拖動(dòng)圖層：實(shí)現(xiàn)頁面上的層的移動(dòng)，如拼圖等動(dòng)態(tài)效果。

拖動(dòng)圖層的動(dòng)作必須在拖動(dòng)圖層之前被調(diào)用—OnLoad（body對象）教學(xué)過程7、跳轉(zhuǎn)地址：可在當(dāng)前窗口或指定框架中打開一個(gè)新的網(wǎng)頁。

單擊一次可改變兩個(gè)或兩個(gè)以上框架內(nèi)容，也可附著于時(shí)間線上便于在一段時(shí)間后執(zhí)行。

要點(diǎn)：注意框架的命名8、打開瀏覽器窗口：在一個(gè)新的瀏覽器窗口中載入一個(gè)鏈接目標(biāo)文件。9、彈出消息：彈出一個(gè)消息框，框內(nèi)的內(nèi)容可為文本或夾雜JavaScript腳本。范例演示：彈出瀏覽器窗口與彈出消息10、播放聲音：網(wǎng)頁中播放聲音文件。11、預(yù)加載圖像：12、使用跳轉(zhuǎn)菜單：13、使用關(guān)聯(lián)跳轉(zhuǎn)菜單：編輯開始按鈕（GO）14、設(shè)置導(dǎo)航條圖像：范例演示：導(dǎo)航條與跳轉(zhuǎn)菜單教學(xué)過程15、設(shè)置文本：框架文本、層文本、狀態(tài)欄文本、文本域文本。不改變原網(wǎng)頁中的內(nèi)容16、交換圖像、恢復(fù)交換圖像——翻轉(zhuǎn)圖像范例演示：交換圖像與設(shè)置文本17、時(shí)間線動(dòng)作：轉(zhuǎn)到時(shí)間線幀、播放、停止時(shí)間線。18、驗(yàn)證表單：提交表單時(shí)，本動(dòng)作可用于檢查數(shù)據(jù)的有效性。范例演示：檢查表單19、顯示——隱藏層：可在頁面上顯示層、隱藏層或恢復(fù)默認(rèn)的層可見性狀態(tài)。范例演示：見層范例四、下載并安裝第三方行為：在Dreamweaver站點(diǎn)或其他的第三方開發(fā)站點(diǎn)上找到更多的行為動(dòng)作。1、下載行為文件－解壓－移到文件夾（Dreamweaver\Configuration\Behaviors\Actions）

重啟Dreamweaver即可。教學(xué)過程范例演示：第三方行為——滑動(dòng)菜單與層居中2、直接下載插件文件安裝。課堂作業(yè)：1、使用“改變屬性”行為設(shè)計(jì)變色按鈕效果，單擊顯示效果圖。

2、使用“拖動(dòng)層”行為設(shè)計(jì)拼圖，單擊顯示效果圖。

3、使用第三方行為設(shè)計(jì)滑動(dòng)菜單，單擊顯示效果圖課后體會(huì)：本課實(shí)例較多，制作簡單，界面美觀，容易引起學(xué)生的興趣。但由于內(nèi)置行為較多，容易造成重點(diǎn)不突出，所以在講課時(shí)能夠有祥有略，較好地完成教學(xué)任務(wù)。同時(shí)重點(diǎn)突出了行為在具體網(wǎng)頁中的應(yīng)用，做到發(fā)部分與全面的統(tǒng)一結(jié)合。教學(xué)內(nèi)容第十四章《編輯源代碼》校歷第十三周課時(shí)2課型理論+實(shí)踐教學(xué)目標(biāo)掌握設(shè)置快速編輯源代碼的方法，其中包括插入HTML、編輯標(biāo)簽和環(huán)繞標(biāo)簽教學(xué)方法案例教學(xué)法作業(yè)布置利用快速編輯源代碼的方法，完成首頁制作分析總結(jié)Dreamweaver提供的編輯環(huán)境是“所見即所得”的可視化編輯環(huán)境，用戶在制作網(wǎng)頁時(shí)不需要編寫代碼。但是，如果用戶需要?jiǎng)?chuàng)建一些特殊的網(wǎng)頁效果，插入腳本以及遇到了纛在可視化環(huán)境中無法解決的問題，則需要手動(dòng)編寫HTML代碼。教學(xué)過程一、快速標(biāo)簽編輯器概述①“插入HTML”：插入新的HTML代碼。②“編輯標(biāo)簽”：編輯已有標(biāo)簽。③“環(huán)繞標(biāo)簽”：用一個(gè)新標(biāo)簽包圍當(dāng)前選定元素。二、插入HTML三、編輯標(biāo)簽四、環(huán)繞標(biāo)簽五、導(dǎo)入Word文檔執(zhí)行“文件”|“導(dǎo)入”|“Word文檔”命令，在彈出的“打開”對話框中選取.doc的文檔即可。六、導(dǎo)入Excel文檔執(zhí)行“文件”|“導(dǎo)入”|“Excel文檔”命令，在彈出的“打開”對話框中選取.doc的文檔即可。教學(xué)過程七、設(shè)置源代碼參數(shù)（1）概述:Dreamweaver提供的編輯環(huán)境是“所見即所得”的可視化編輯環(huán)境，用戶在制作網(wǎng)頁時(shí)不需要編寫代碼。但是，如果用戶需要?jiǎng)?chuàng)建一些特殊的網(wǎng)頁效果，插入腳本以及遇到了一些在可視化環(huán)境中無法解決的問題，則需要手動(dòng)編寫HTML代碼。在編寫代碼之前設(shè)置源代碼的相關(guān)參數(shù)，可以為具體編寫工作提供便利。執(zhí)行“編輯”|“首選參數(shù)”命令，在彈出的“首選參數(shù)”對話框中即可設(shè)置源代碼的相關(guān)參數(shù)（2）代碼改寫:在彈出的“首選參數(shù)”對話框的分類選項(xiàng)中選取“代碼改寫”，即可設(shè)置相關(guān)的屬性。“代碼改寫”：控制修改的內(nèi)容。如果有需要修改的內(nèi)容，則Dreamweaver將在打開HTML文檔時(shí)修改其HTML源代碼。（3）代碼格式選項(xiàng)設(shè)置:在彈出的“首選參數(shù)”對話框的分類選項(xiàng)中選取“代碼格式”，即可設(shè)置相關(guān)的屬性，“代碼格式”：控制常見HTML格式選項(xiàng)。在該選項(xiàng)的面板中可以設(shè)置代碼縮進(jìn)、換行、大小寫等顯示的格式。（4）代碼提示選項(xiàng)設(shè)置:在彈出的“首選參數(shù)”對話框的分類選項(xiàng)中選取“代碼提示”，即可設(shè)置相關(guān)的屬性。“代碼提示”：設(shè)置代碼提