Dreamweaver8教程

1、網(wǎng)頁設(shè)計(jì)基礎(chǔ)網(wǎng)頁設(shè)計(jì)基礎(chǔ)3.1 Dreamweaver8簡介簡介3.2 網(wǎng)頁文本及媒體的應(yīng)用網(wǎng)頁文本及媒體的應(yīng)用3.3 表格的應(yīng)用表格的應(yīng)用3.4 布局表格的應(yīng)用布局表格的應(yīng)用 3.5 超級(jí)鏈接超級(jí)鏈接3.6 框架的應(yīng)用框架的應(yīng)用3.7 CSS樣式的應(yīng)用樣式的應(yīng)用3.8 層和行為的應(yīng)用層和行為的應(yīng)用 3.9 時(shí)間軸的應(yīng)用時(shí)間軸的應(yīng)用 3.10 表單的應(yīng)用表單的應(yīng)用3.11 模板的應(yīng)用模板的應(yīng)用 本節(jié)知識(shí)F認(rèn)識(shí)Dreamweaver8FDreamweaver8編輯環(huán)境介紹F創(chuàng)建與管理站點(diǎn) Dreamweaver 8是一款功能強(qiáng)大的網(wǎng)頁編輯軟件，它以其直觀的圖形界面大大簡化了網(wǎng)頁的設(shè)計(jì)和編輯。在具

2、體學(xué)習(xí)使用Dreamweaver之前，首先應(yīng)該掌握對(duì)網(wǎng)頁文檔操作的一些基礎(chǔ)知識(shí)，如網(wǎng)頁文檔的創(chuàng)建、打開、預(yù)覽和保存以及頁面屬性的基本設(shè)置等。 Dreamweaver是專業(yè)的HTML編輯器，用于對(duì)Web站點(diǎn)、Web頁和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。無論直接編寫HTML代碼還是在可視化編輯環(huán)境中工作，Dreamweaver都提供了專業(yè)的編輯工具。知識(shí)要點(diǎn) F系統(tǒng)要求在安裝Dreamweaver8之前請(qǐng)確保硬件和軟件環(huán)境滿足以下條件： Intel Pentium III 600MHz或更快的處理器和等效的處理器 Windows 2000、Windows XP或Windows Server 20

3、03 至少128MB的可用內(nèi)存（建議采用256MB內(nèi)存或更大內(nèi)存） 能達(dá)到1024768像素分辨率或更高分辨率的監(jiān)視器F安裝 Dreamweaver8在Dreamweaver8的系統(tǒng)盤上運(yùn)行安裝程序 setup.exe知識(shí)要點(diǎn)F啟動(dòng)Dreamweaver 8 F新建空白HTML網(wǎng)頁 F保存網(wǎng)頁文檔 F預(yù)覽網(wǎng)頁效果 F退出Dreamweaver 8 該部分主要介紹Dreamweaver8的基本功能、主窗口和菜單命令。內(nèi)容包括熟悉主工作區(qū)、使用菜單欄、掌握“插入”工具欄、充分利用“屬性”面板和靈活使用菜單命令。該部分是學(xué)習(xí)Dreamweaver8快速入門部分。通過這一部分的學(xué)習(xí)能夠?qū)reamwe

4、aver8的基礎(chǔ)操作和功能有一個(gè)全面的掌握和認(rèn)識(shí)，從而為后續(xù)章節(jié)中能夠深入地學(xué)習(xí)好Dreamweaver8打下堅(jiān)實(shí)的基礎(chǔ)。1.1.啟動(dòng)啟動(dòng)Dreamweaver 8Dreamweaver 8 選擇“開始”|“程序”|“Macromedia”|“Macromedia Dreamweaver 8”命令如圖所示。選擇“創(chuàng)建新項(xiàng)目”|“Html”項(xiàng)。2.2.新建空白新建空白HTMLHTML網(wǎng)頁網(wǎng)頁進(jìn)入Dreamweaver 8頁面后，如圖所示。選擇“文件”|“新建”菜單命令，打開“新建文檔”對(duì)話框，在“類別”欄中選擇“基本頁”選項(xiàng)，在“基本頁”欄中選擇“HTML”選項(xiàng)，單擊“創(chuàng)建”按鈕。如圖所示。3.

5、保存網(wǎng)頁文檔保存網(wǎng)頁文檔 選擇“文件”|“保存”菜單命令，打開的“另存為”對(duì)話框，在“保存在”下拉列表框中選擇文件的保存路徑，在“文件名”文本框中輸入保存的文件名，單擊“保存”按鈕。如圖所示。4.4.預(yù)覽網(wǎng)頁效果預(yù)覽網(wǎng)頁效果 選擇“文件”|“在瀏覽器中預(yù)覽”|“IExplore 6.0”命令在IE瀏覽器中預(yù)覽網(wǎng)頁文檔的效果， 如圖所示。5.退出退出Dreamweaver 8F單擊Dreamweaver 8窗口右上角的“關(guān)閉”按鈕。F單擊Dreamweaver 8窗口左上角的圖標(biāo)，在彈出的下拉菜單中選擇“關(guān)閉”命令。F在Dreamweaver 8窗口中選擇“文件”|“退出”菜單命令。F在當(dāng)前窗口

6、為Dreamweaver 8工作界面時(shí)，按“Alt+F4”鍵退出Dreamweaver 8。 知識(shí)要點(diǎn)F插入欄F文檔工具欄F文檔編輯區(qū)F網(wǎng)頁標(biāo)簽F擴(kuò)展按鈕F浮動(dòng)面板組F屬性面板F標(biāo)簽選擇器F水平標(biāo)尺和垂直標(biāo)尺1.Dreamweaver 81.Dreamweaver 8的界面元素介紹的界面元素介紹2. 2. 創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn) Dreamweaver8是一個(gè)站點(diǎn)創(chuàng)建和管理的工具，因此使用它不僅可以創(chuàng)建單獨(dú)的文檔，還可以創(chuàng)建完整的Web站點(diǎn)。創(chuàng)建Web站點(diǎn)的第一步是規(guī)劃。為了達(dá)到最佳效果，在創(chuàng)建任何Web站點(diǎn)頁面之前，應(yīng)對(duì)站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。決定要?jiǎng)?chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布

7、局的外觀以及頁面間是如何連接的。 所謂的定義網(wǎng)站，就是在自己的計(jì)算機(jī)中創(chuàng)建一個(gè)文件夾，用來放置所有的文件，然后再將這個(gè)文件夾定義為站點(diǎn)。建立一個(gè)網(wǎng)站，首先要在本地機(jī)器上設(shè)置站點(diǎn)存儲(chǔ)位置。下面主要介紹本地站點(diǎn)的建立，站點(diǎn)文件命名。創(chuàng)建站點(diǎn)的步驟：創(chuàng)建站點(diǎn)的步驟： 建立本地站點(diǎn)文件夾“wangye”（站點(diǎn)文件夾名稱必須是西文的，不能為中文名稱）。 進(jìn)入Dreamweaver8的工作界面。 選擇“站點(diǎn)”|“新建站點(diǎn)”命令，彈出“未命名站點(diǎn)1的站點(diǎn)定義為”對(duì)話框，如圖所示。 在“站點(diǎn)名稱”中輸入站點(diǎn)名稱“wangli”，在“本地根文件夾”中點(diǎn)擊按鈕，找到本地機(jī)上站點(diǎn)文件夾的位置，如圖所示。 單擊“確定

8、”，則完成站點(diǎn)的建立，如圖所示。 實(shí)訓(xùn)要求：F建立一個(gè)學(xué)生自己的站點(diǎn)及網(wǎng)頁文件F創(chuàng)建網(wǎng)頁文件，設(shè)置網(wǎng)頁標(biāo)題為“網(wǎng)頁學(xué)習(xí)”。F保存網(wǎng)頁并預(yù)覽效果。實(shí)訓(xùn)目的：F學(xué)會(huì)建立站點(diǎn)及建立站點(diǎn)的用處。F創(chuàng)建網(wǎng)頁文件并保存。F預(yù)覽網(wǎng)頁的方法。返回本節(jié)知識(shí)F插入文本、輸入空格、特殊字符、日期F格式化文本 F設(shè)置文本的屬性F項(xiàng)目列表的應(yīng)用 F插入多媒體對(duì)象 文本是網(wǎng)頁最基本、最常用的元素，因此文本處理是網(wǎng)頁設(shè)計(jì)中最基本的操作。 制作簡單的網(wǎng)頁，在頁面中插入文本、圖像、水平線、日期、背景及空鏈接。其效果圖為如圖所示。知識(shí)要點(diǎn)F創(chuàng)建網(wǎng)站站點(diǎn)F制作簡單網(wǎng)頁F修改頁面、文本屬性F插入圖像F設(shè)置圖像屬性F（實(shí)戰(zhàn)步驟詳見教材

9、）1.1.輸入文本輸入文本 插入普通文本插入普通文本 F將插入點(diǎn)定位在文檔編輯區(qū)中，直接輸入文本即可。F在Word等文本編輯軟件中編輯好文本之后，將其復(fù)制到剪貼板上，然后在Dreamweaver 8中將插入點(diǎn)定位到文檔編輯區(qū)中，粘貼剪貼板中的文本即可。 F導(dǎo)入已有word文檔，在Dreamweaver文檔中，將光標(biāo)定位到要導(dǎo)入文本的地方，選擇“文件”|“導(dǎo)入”|“word文檔”命令，彈出“導(dǎo)入word文檔”對(duì)話框，在其中選擇要導(dǎo)入的word文檔，單擊該對(duì)話框的“打開”命令，就可以導(dǎo)入文本了。 插入特殊字符插入特殊字符 F在Dreamweaver 8中編輯文本時(shí)，往往會(huì)遇到一些無法通過鍵盤直接輸

10、入的特殊字符，如版權(quán)符號(hào)“”和注冊商標(biāo)符號(hào)“”等，這時(shí)可通過Dreamweaver 8插入特殊字符的功能進(jìn)行插入。F在需要添加特殊字符的位置單擊鼠標(biāo)，設(shè)置插入點(diǎn)。F選擇插入欄的“文本”類別（如圖所示），單擊最右邊的 下三角按鈕，在彈出的下拉菜單中選擇“其他字符”命令，彈出如圖所示的對(duì)話框，可在其中選擇要輸入的對(duì)象。 F 也可通過軟鍵盤來輸入“、【】”等特殊字符符號(hào)。 在字符之間添加空格在字符之間添加空格 Dreamweaver 8中的文檔格式都是以HTML編碼形式存在的，而HTML編碼中只允許字符之間包含一個(gè)空格，所以在Dreamweaver 8中無論按多少次空格鍵都只會(huì)輸入一個(gè)空格。 F將中

11、文輸入法切換到全角模式，按一下空格鍵則輸入一個(gè)全角的空格。F在“屬性”面板的“格式”列表中選擇“預(yù)先格式化的”選項(xiàng)后（如圖所示），則可以按空格鍵輸入空格。F插入空格的快捷鍵方式為Ctrl + Shift + 空格鍵. 文本的換行文本的換行 在Dreamweaver 8中，當(dāng)通過按回車鍵（Enter）換行時(shí)，兩段之間的距離比較遠(yuǎn)。要使兩段之間的距離和正常行距一樣有如下的操作。F將光標(biāo)定位在需要換行的位置。F單擊插入欄“文本”類別中的“換行符”按鈕，或按快捷鍵Shift + Enter，即可在該位置插入一個(gè)換行符，從而使兩段之間的距離和正常行距一樣。 插入其他文本插入其他文本 插入水平線添加水平線

12、 在文檔編輯區(qū)將插入點(diǎn)定位到所需位置。選擇“插入”|“HTML”|“水平線”命令。單擊“插入”欄中的“HTML” 按鈕。修改水平線 初次繪制的水平線的格式往往不能滿足實(shí)際需要，此時(shí)可通過“屬性”面板對(duì)其進(jìn)行修改，如圖所示: 插入日期 在制作網(wǎng)頁時(shí)，有時(shí)需要插入當(dāng)前的日期，Dreamweaver 8提供了快速插入日期和時(shí)間的功能。F將光標(biāo)定位在需要插入日期的位置。F選擇“插入”|“日期”命令。F單擊“插入”欄中“常用”類別上的按鈕 。 F在彈出的對(duì)話框中選擇日期格式，如圖所示 插入列表 列表就是那些具有相同屬性的事物。在Dreamweaver 8中，有三種類型的列表：F項(xiàng)目列表：F編號(hào)列表：F定

13、義列表： 在“列表屬性”對(duì)話框中可以定義“列表的類型”、“樣式”、“開始計(jì)數(shù)”等設(shè)置 格式化文本格式化文本 文本格式一般包括文本的字體、字號(hào)、顏色及文本的對(duì)齊方式等。通?？赏ㄟ^文本的“屬性”面板來設(shè)置如圖所示，在文檔窗口中就可以看到效果。只是在字體的設(shè)置時(shí)，先要在“字體列表”框中選擇“編輯字體列表”，選擇要添加的字體。如圖所示。 網(wǎng)頁圖像的基礎(chǔ)知識(shí)網(wǎng)頁圖像的基礎(chǔ)知識(shí) 網(wǎng)頁圖像格式FGIF、JPEG和PNG是Web頁面中經(jīng)常用到的圖形文件格式。它們的共同特點(diǎn)是：文件小，適合于網(wǎng)頁傳輸。FGIF格式是一個(gè)8位文件格式，最多只能顯示256色，GIF格式文件的擴(kuò)展名為. .gif。GIF格式既支持透明

14、顏色屬性，也支持動(dòng)畫。FJPEG允許包含超過1600萬種顏色，大大超過人眼所能辨別的顏色。JPEG文件一般要比GIF或PNG文件大一些，其擴(kuò)展名為. .jpg或. .jpeg。FPNG是Macromedia Fireworks的源文件格式。PNG格式文件較大，其擴(kuò)展名為. .png。 顏色基礎(chǔ) 在Web頁面中，顏色既可以用顏色名稱red （紅色）、green（綠色）、blue（藍(lán)色）來表示，也可以用十六進(jìn)制數(shù)（例如：#FF00000）來表示，如#000000表示黑色；#FFFFFF表示白色；#FF0000表示紅色；#00FF00表示綠色；#0000FF表示藍(lán)色. 插入圖像插入圖像 圖像可以直接

15、插入在頁面中，也可以在表格、表單或?qū)又胁迦?。?yīng)用層還可以使圖像交迭。插入圖像文件必須在當(dāng)前站點(diǎn)的文件夾中。如果圖像文件不在當(dāng)前站點(diǎn)的文件夾中，Dreamweaver 8將詢問是否要將文件復(fù)制到當(dāng)前的文件夾內(nèi)。插入圖像常用的幾種方式：F選擇“插入”|“圖像”命令。F單擊“插入”欄中的“常用”按鈕 。F快捷鍵Ctrl + Alt + I。出現(xiàn)“選擇圖像源文件”對(duì)話框選取所要插入的圖像文件即可。如圖所示 設(shè)置圖像屬性設(shè)置圖像屬性 在文檔窗口中可直接選中圖像并進(jìn)行修改，也可用圖像的“屬性”面板進(jìn)行設(shè)置。例如：為圖像設(shè)置大小、對(duì)齊、鏈接等操作。如圖所示。熱點(diǎn)工具圖像名稱圖像寬度與高度瀏覽文件 鼠標(biāo)經(jīng)過圖

16、像鼠標(biāo)經(jīng)過圖像 鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看網(wǎng)頁時(shí)，鼠標(biāo)光標(biāo)經(jīng)過該圖像時(shí)，圖像發(fā)生變化的動(dòng)態(tài)圖像 F在文檔窗口中，將插入點(diǎn)放置要插入鼠標(biāo)經(jīng)過圖像的位置。F單擊“插入”欄的“常用”按鈕 旁的下三角，在下拉菜單中選擇“鼠標(biāo)經(jīng)過圖像” 命令，彈出“插入鼠標(biāo)經(jīng)過圖像”對(duì)話框，如圖所示。 插入插入Flash對(duì)象對(duì)象 插入Flash按鈕 插入Flash文本對(duì)象 插入Flash動(dòng)畫實(shí)訓(xùn)要求實(shí)訓(xùn)要求：F制作一個(gè)簡單網(wǎng)頁“我的美麗家鄉(xiāng)- ”F在頁面上輸入文本內(nèi)容F設(shè)置標(biāo)題及文本的格式F插入背景顏色或背景圖像F插入圖像、鼠標(biāo)經(jīng)過圖像、水平線、日期及Flash的動(dòng)畫效果實(shí)訓(xùn)目的：實(shí)訓(xùn)目的：F了解Dreamwea

17、ver8中格式化的設(shè)置F網(wǎng)頁中的效果設(shè)置F能夠獨(dú)立完成簡單網(wǎng)頁的制作及預(yù)覽返回本節(jié)知識(shí)本節(jié)知識(shí)F創(chuàng)建表格F表格的合并、拆分F表格的嵌套F表格的屬性F表格的排版及修改 在網(wǎng)頁制作中，對(duì)頁面進(jìn)行布局是非常重要的，表格就是頁面布局中常用的方式。Dreamweaver 8不僅支持在表格中有序地排列數(shù)據(jù)，還可用表格對(duì)網(wǎng)頁中的文本、圖像及其他元素進(jìn)行定位。 應(yīng)用表格的布局制作“花之心語”網(wǎng)頁，頁面效果如圖所示。 知識(shí)要點(diǎn)知識(shí)要點(diǎn) F插入表格并設(shè)置其屬性F單元格的拆分F設(shè)置單元格的屬性F表格的嵌套F插入藝術(shù)字、水平線、圖片F(xiàn)文字的輸入和設(shè)置F設(shè)置背景圖片F(xiàn)保存網(wǎng)頁（實(shí)戰(zhàn)步驟詳見教材）創(chuàng)建表格創(chuàng)建表格 表格是

18、制作網(wǎng)頁時(shí)非常有用的布局工具，我們可以使用表格垂直和水平的結(jié)構(gòu)來改變網(wǎng)頁的布局。表格的三個(gè)基本要素是：F行（水平方向）F列（垂直方向）F單元格（行和列交叉點(diǎn)） 三種插入表格的方法 “表格”的對(duì)話框說明 表格寬度。 邊框粗細(xì)。 單元格邊距。 單元格間距。 頁眉。 輔助功能單元格行列表格的基本操作和屬性表格的基本操作和屬性 在表格中輸入文字和插入圖像 從其他文檔導(dǎo)入表格式數(shù)據(jù) 選擇表格元素 選擇整個(gè)表格 選擇行或列 選擇單元格 合并、拆分單元格 單元格屬性 設(shè)置表格屬性 “表格”屬性面板中顯示了插入表格的所有特性，通過修改面板中的參數(shù)可快速地編輯表格外觀，如圖所示。表格中各個(gè)單元格之間的間距單元格

19、中的元素距離單元格邊框的距離在此可以修改 表格的行數(shù)和列數(shù)在此可以設(shè)置表格的邊框顏色 套用默認(rèn)的表格樣式套用默認(rèn)的表格樣式 Dreamweaver內(nèi)置了格式化的表格庫，只要選中表格，選擇“命令”|“格式化表格”命令就可以彈出如圖所示的“格式化表格”對(duì)話框，可以設(shè)置各個(gè)參數(shù)來格式化表格。 表格的嵌套表格的嵌套 嵌套表格是表格布局中一個(gè)十分重要的環(huán)節(jié)，它是指在一個(gè)表格的單元格中再插入一個(gè)表格，嵌套表格的寬度受所在單元格的寬度限制，其編輯方法與表格相同。如圖所示 在網(wǎng)頁中制作一個(gè)學(xué)生管理表，效果如圖所示。先插入一個(gè)7行4列的表格，設(shè)置表格寬度和高度，然后合并單元格，輸入相應(yīng)的文本即可。 應(yīng)用表格的布

20、局制作簡單的應(yīng)用表格的布局制作簡單的“專業(yè)課程介紹專業(yè)課程介紹”的網(wǎng)頁的網(wǎng)頁實(shí)訓(xùn)要求：F頁面應(yīng)用表格進(jìn)行布局。F應(yīng)用表格的“屬性”面板，對(duì)表格進(jìn)行插入、拆分、合并等設(shè)置。F表格“格式化表格”樣式的套用。實(shí)訓(xùn)目的：F插入表格的靈活應(yīng)用。F對(duì)表格、行、列、單元格的選擇和屬性面板的應(yīng)用。 相冊的制作相冊的制作實(shí)訓(xùn)要求：F創(chuàng)建網(wǎng)站站點(diǎn)及頁面F插入設(shè)置表格F創(chuàng)建網(wǎng)頁相冊F美化網(wǎng)站相冊F創(chuàng)建鏈接（制作的方法見教材）返回本節(jié)知識(shí)F布局模式F繪制布局表格、布局單元格F移動(dòng)布局單元格F設(shè)置布局表格、布局單元格屬性 制作網(wǎng)頁的首要工作是設(shè)置頁面的布局，前面學(xué)習(xí)了表格的應(yīng)用，如果直接使用表格進(jìn)行布局不太方便，往往需

21、要預(yù)先計(jì)算好表格中的行數(shù)和列數(shù)，反復(fù)調(diào)整單元格的高度和寬度。為了簡化創(chuàng)建頁面布局的過程，Dreamweaver 8提供了“布局”模式。 在“布局”模式中，用戶可以使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計(jì)頁面，同時(shí)避免在使用傳統(tǒng)方法創(chuàng)建基于表格的設(shè)計(jì)時(shí)經(jīng)常出現(xiàn)的一些問題。使用布局表格制作 “北京奧運(yùn)”網(wǎng)頁，其效果圖為如圖所示。 知識(shí)要點(diǎn) F布局模式的切換F繪制布局表格或單元格F設(shè)置布局表格或單元格屬性F設(shè)置布局表格或單元格的位置、大小F在布局單元格中添加內(nèi)容（實(shí)戰(zhàn)步驟詳見教材）布局模式布局模式 單擊“插入”欄“布局”類中的“布局模式”按鈕，進(jìn)入布局模式，如圖所示。在布局模式里，“插入”欄的“布局”中有兩個(gè)可用

22、的按鈕，它們是“布局表格”按鈕和“繪制布局單元格”按鈕。此時(shí)，標(biāo)準(zhǔn)模式下的“表格”按鈕和“繪制層”按鈕均為不可用狀態(tài)。（在標(biāo)準(zhǔn)模式下，“布局表格”按鈕和“繪制布局單元格”按鈕是不可用的。） 布局表格繪制布局單元格布局模式（Ctrl+F6） 在布局模式下使用布局表格和布局單元格進(jìn)行頁面布局時(shí)，一般先創(chuàng)建布局表格，再在布局表格中添加布局單元格，如圖所示。 在使用“布局”模式時(shí) ，為了更精確地定位，往往需要使用標(biāo)尺和網(wǎng)格來了解布局表格或布局單元格的高度和寬度。F標(biāo)尺：當(dāng)使用“布局”模式時(shí)，可選擇標(biāo)尺定位，選擇“查看”|“標(biāo)尺”|“顯示”命令。否則也可不顯示。F網(wǎng)格：選擇“查看”|“網(wǎng)格”|“顯示網(wǎng)格

23、”命令。設(shè)置如圖所示。設(shè)置布局表格的屬性設(shè)置布局單元格的屬性 在Dreamweaver 8中可以移動(dòng)或調(diào)整布局單元格的大小，但不能重疊布局單元格。對(duì)布局單元格進(jìn)行移動(dòng)或調(diào)整大小時(shí)，只能在布局表格的邊框與內(nèi)容的邊線之間，只有嵌套在布局表格內(nèi)部的才能被移動(dòng)，其他的布局表格均不能移動(dòng)，如圖所示。 清除單元格高度之后，單元格將自動(dòng)被壓縮，當(dāng)向布局單元格內(nèi)插入內(nèi)容后，單元格將自動(dòng)調(diào)整大小以適應(yīng)插入的內(nèi)容，如圖所示。 要改變布局表格和布局單元格的顯示顏色、自動(dòng)插入間隔圖像等屬性，可通過設(shè)置布局模式參數(shù)來實(shí)現(xiàn)。 在布局模式中可向布局表格中的布局單元格內(nèi)添加文本、圖像和其他網(wǎng)頁元素，與在標(biāo)準(zhǔn)模式中將內(nèi)容添加到

24、表格單元格相同。在添加內(nèi)容之前，必須先繪制布局單元格，因?yàn)閮?nèi)容只能添加到布局單元格中。 如圖所示實(shí)訓(xùn)要求：（頁面的內(nèi)容可自定，也可參考演練的格式和內(nèi)容）F應(yīng)用布局表格制作“自我介紹”的網(wǎng)頁F頁面的版式要用布局表格。F設(shè)置布局表格的單元格和頁面。F能夠熟練對(duì)其屬性進(jìn)行設(shè)置和修改。實(shí)訓(xùn)目的：F對(duì)比表格和布局表格的相同點(diǎn)和不同點(diǎn)。F表格和布局表格之間的轉(zhuǎn)換。返回本節(jié)知識(shí) F超級(jí)鏈接概念 F創(chuàng)建文本超級(jí)鏈接 F創(chuàng)建錨鏈接 F創(chuàng)建空鏈接 F創(chuàng)建電子郵件超級(jí)鏈接 F創(chuàng)建圖像超級(jí)鏈接 F創(chuàng)建熱點(diǎn)鏈接 超級(jí)鏈接是指頁面對(duì)象之間的鏈接關(guān)系，它是網(wǎng)頁的靈魂，能合理、協(xié)調(diào)地把網(wǎng)站中的各個(gè)元素、頁面通過超級(jí)鏈接構(gòu)成了

25、一個(gè)有機(jī)整體，使瀏覽者能快速地訪問到想要訪問的頁面。 為“北京奧運(yùn)”頁面中添加空鏈接、文字鏈接、電子郵件鏈接、命名錨記鏈接，創(chuàng)建腳本鏈接和下載鏈接，充分體會(huì)鏈接在網(wǎng)頁制作中的作用。頁面效果如圖所示。知識(shí)要點(diǎn)F頁面文檔鏈接F電子郵件鏈接F空鏈接F腳本鏈接F下載鏈接F熱點(diǎn)鏈接F命名錨記鏈接（實(shí)戰(zhàn)步驟詳見教材） 超級(jí)鏈接就是把一個(gè)網(wǎng)站的網(wǎng)頁連接起來，點(diǎn)擊鏈接時(shí)從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁，或者跳轉(zhuǎn)到頁面指定的位置。Dreamweaver提供了幾種方式來創(chuàng)建指向文檔、圖像、多媒體文件或可下載軟件的超鏈接。我們可以為文檔內(nèi)任何地方的任何文本或圖像創(chuàng)建鏈接，包括在標(biāo)題、列表、表格、層或框架中的任何文件或圖像

26、。 一般來說，在文檔中可以創(chuàng)建以下類型的超鏈接：F鏈接到其他文檔或文件（如圖形、影片、PDF或聲音文件）的鏈接。F命名錨記鏈接，選擇此類鏈接將跳轉(zhuǎn)至文檔的特定位置。F電子郵件鏈接，選擇此類鏈接將打開一個(gè)新的空白信息窗口。F空鏈接和腳本鏈接，此類鏈接使得能夠在對(duì)象上附加行為，或者創(chuàng)建執(zhí)行JavaScript代碼的鏈接。提示：創(chuàng)建鏈接之前，一定要清楚文檔相對(duì)路徑、站點(diǎn)根目錄相 對(duì)路徑以及絕對(duì)路徑的工作方式。 文檔和圖片的鏈接文檔和圖片的鏈接 文檔超級(jí)鏈接是最常見的超級(jí)鏈接，通過使用鼠標(biāo)點(diǎn)擊文本即可從一個(gè)網(wǎng)頁跳轉(zhuǎn)到另一個(gè)網(wǎng)頁。 鏈接對(duì)象的文件既可以是站點(diǎn)內(nèi)的文件也可是站點(diǎn)外的文件，如圖所示。 命名錨

27、記鏈接命名錨記鏈接 當(dāng)頁面內(nèi)容長度超過一個(gè)畫面可容納的范圍時(shí)，可以在適當(dāng)位置插入錨記，然后在網(wǎng)頁開頭加上連到這些錨點(diǎn)的超鏈接，瀏覽時(shí)只要點(diǎn)擊鏈接，就可以快速跳到錨記的位置上，方便瀏覽網(wǎng)頁的內(nèi)容。 電子郵件超級(jí)鏈接電子郵件超級(jí)鏈接 電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛，在網(wǎng)頁中建立電子郵件超級(jí)鏈接可方便網(wǎng)頁瀏覽者與設(shè)計(jì)者之間的聯(lián)系。 空鏈接空鏈接 空超級(jí)鏈接是一個(gè)未指派目標(biāo)的超級(jí)鏈接，為文本建立空超級(jí)鏈接時(shí)，只要先在文檔窗口中選中需要建立空超級(jí)鏈接的文本，然后在屬性面板的“鏈接”文本框中輸入一個(gè)“#”符號(hào)即可。 熱點(diǎn)鏈接熱點(diǎn)鏈接 以往在指定鏈接時(shí)一張圖片上只能設(shè)置一個(gè)鏈接，若要在一幅比較大的圖片中添加許

28、多超級(jí)鏈接時(shí)，應(yīng)該將圖片化整為零，分割成較小的圖片，然后分別為這些小圖像上建立超級(jí)鏈接來達(dá)到目的，但這時(shí)整幅圖片就不能對(duì)齊，利用Dreamweaver 8的圖像熱點(diǎn)超級(jí)鏈接功能就能避免這個(gè)問題。 腳本鏈接腳本鏈接 腳本鏈接執(zhí)行代碼或調(diào)用函數(shù)，它非常有用，能夠在不離開當(dāng)前網(wǎng)頁的情況下為訪問者提供有關(guān)的附加信息。例如選定以圖片，在圖片“屬性”面板的“鏈接”文本框中輸入JavsScript:alert（謝謝光臨?。?下載鏈接下載鏈接 下載鏈接實(shí)際上也屬于文檔鏈接，只是在下載鏈接時(shí)，必須要求鏈接內(nèi)容為一個(gè)壓縮文件。 實(shí)訓(xùn)要求： F應(yīng)用所有類型的鏈接。F對(duì)“自我介紹”網(wǎng)頁做相應(yīng)的子頁，然后作相關(guān)的鏈接

29、實(shí)訓(xùn)目的：F理解超鏈接的含義。F對(duì)比各鏈接類型間的特點(diǎn)和不同。返回本節(jié)知識(shí)F框架和框架集的創(chuàng)建 F框架和框架集的選擇和刪除 F框架和框架集的保存 F框架和框架集的屬性設(shè)置 F框架的鏈接 上兩節(jié)我們應(yīng)用了“布局表格”制作了“北京奧運(yùn)”網(wǎng)頁，并制作了相應(yīng)的鏈接。本節(jié)應(yīng)用框架制作“北京奧運(yùn)”網(wǎng)頁，并創(chuàng)建鏈接，當(dāng)我們單擊左邊欄中的標(biāo)題時(shí)，具體內(nèi)容在右邊的主框架中顯示。如圖所示。知識(shí)要點(diǎn) F創(chuàng)建框架F保存框架集文件及框架文件F修改框架F設(shè)置框架屬性F編輯框架內(nèi)容F超鏈接控制框架內(nèi)容（實(shí)戰(zhàn)步驟詳見教材） 框架是將一個(gè)頁面劃分成不同的文檔區(qū)，每個(gè)文檔區(qū)顯示獨(dú)立的內(nèi)容，其效果是在瀏覽網(wǎng)頁時(shí)，網(wǎng)頁中一部分區(qū)域內(nèi)

30、容不改變，而其他區(qū)域內(nèi)容在不斷發(fā)生改變。 框架集是HTML文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、大小、位置以及在框架中初始顯示頁面的地址?？蚣芗募旧聿话跒g覽器中顯示的網(wǎng)頁內(nèi)容（對(duì)不能顯示框架的瀏覽器進(jìn)行的處理除外，即部分），框架集文件只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些網(wǎng)頁的有關(guān)信息。 創(chuàng)建框架框架集創(chuàng)建框架框架集 F使用預(yù)定義的框架集 新建 選擇“文件”菜單中的“新建”命令，打開“新建文檔”對(duì)話框，如圖所示 插入 選擇“插入”|“HTML”|“框架”命令，打開子菜單預(yù)定義的框架集。如圖所示： （ 也可在“插入”工具欄的布局對(duì)象類別中，單擊“框架”

31、工具欄按鈕 ） F自己設(shè)計(jì)框架集 在新創(chuàng)建的文檔編輯狀態(tài)下，選擇“查看”|“可視化助理”|“框架邊框”命令，在文檔中顯示框架邊框。插入于定義的框架集 新建于定義的框架集 設(shè)計(jì)框架集設(shè)計(jì)框架集 用戶可以通過對(duì)當(dāng)前文檔窗口的修改、拆分，創(chuàng)建自己的框架集。選擇“修改”|“框架頁”|“拆分右框架”命令，如圖所示 。 用此框架頁可以將一個(gè)框架拆分成幾個(gè)更小的框架，如圖所示。 要更改框架或框架集的屬性，首先要選擇需要更改的框架或框架集。用戶既可以在文檔窗口中選擇框架或框架集，也可以通過“框架”面板進(jìn)行選擇。1.1.在文檔窗口中選擇框架和框架集在文檔窗口中選擇框架和框架集 在編輯窗口中選擇框架的方法很簡單，

32、按住Alt鍵，在要選擇的框架內(nèi)單擊鼠標(biāo)左鍵即可。被選取的框架邊框呈虛線顯示。2.2.在在“框架框架”面板中選擇框架和框架集面板中選擇框架和框架集 在“框架”面板中單擊框架區(qū)域中的任意位置即可選擇框架，選中的框架以粗黑框顯示。在“框架”面板中單擊框架邊框即可選擇框架集，如果要選擇整個(gè)框架集，只需單擊框架最外面的邊框即可， 如圖所示。3.3.刪除框架刪除框架 如果窗口中有不需要的框架，可將其刪除，用鼠標(biāo)將要?jiǎng)h除框架的邊框拖到父框架邊框上或拖離頁面即可。 保存框架與框架集之后才能在瀏覽器中瀏覽用框架布局的網(wǎng)頁。每個(gè)框架包含一個(gè)網(wǎng)頁，一個(gè)框架集則包含多個(gè)網(wǎng)頁，在保存時(shí)應(yīng)保存所有的框架與框架集。1.1.

33、保存框架和框架集文件保存框架和框架集文件F將插入點(diǎn)定位到要保存的框架中。F選擇“文件”|“保存框架”菜單命令，在打開的“另存為”對(duì)話框中像保存其他網(wǎng)頁一樣指定保存路徑和文件名，然后單擊“保存”按鈕即可。2.2.保存框架集中所有文件保存框架集中所有文件 選擇“文件”|“保存全部”菜單命令，將保存所有打開的文檔，包括單獨(dú)的文檔、框架文檔和框架集。1.1.設(shè)置框架集的屬性設(shè)置框架集的屬性 設(shè)置框架的屬性 單擊框架集中的某一區(qū)域，即可在頁面中選擇此框架，然后可在屬性檢查器中設(shè)置其屬性，如圖所示。 框架的鏈接 若要在框架中使用鏈接，就必須為鏈接設(shè)置一個(gè)目標(biāo)。目標(biāo)就是用來打開被鏈接的文檔的框架。例如，如果

34、導(dǎo)航菜單是在左框架中，而需要鏈接材料在主內(nèi)容框架中出現(xiàn)，就必須為所有的導(dǎo)航菜單鏈接選定目標(biāo)。目標(biāo)將是主內(nèi)容框架的名稱，例如：mainFrame。當(dāng)用戶單擊一個(gè)導(dǎo)航鏈接時(shí)，內(nèi)容將在主框架中顯示。框架集的屬性面板 框架的屬性面板 框架目標(biāo) 實(shí)訓(xùn)要求：F設(shè)計(jì)“大學(xué)生活”的網(wǎng)頁F應(yīng)用框架結(jié)構(gòu)設(shè)計(jì)頁面，結(jié)構(gòu)任選。F創(chuàng)建框架中的超鏈接。實(shí)訓(xùn)目的：F框架的用途。F框架的保存。 F框架中屬性面板的設(shè)置及應(yīng)用。F框架中超鏈接目標(biāo)的設(shè)置。返回本節(jié)知識(shí)FCSS樣式簡介F樣式的基本操作F使用外部樣式表 CSS樣式表是一系列格式規(guī)則，通過它可以靈活地控制網(wǎng)頁外觀，而插入多媒體對(duì)象可以豐富頁面表現(xiàn)力，使其更具動(dòng)感。 在“

35、北京奧運(yùn)”頁面中，對(duì)頁面中文字、圖片、頁面背景水平線設(shè)置如下樣式，如圖所示。 知識(shí)要點(diǎn)F Css樣式的使用F Css樣式的屬性（實(shí)戰(zhàn)步驟詳見教材）1.CSS1.CSS樣式簡介樣式簡介 CSS（Cascading Style Sheets）樣式又叫層疊樣式，使用它可以對(duì)網(wǎng)頁中的布局元素，如表格、字體、顏色、背景、鏈接效果和其他圖文效果實(shí)現(xiàn)更加精確的控制。CSS樣式不僅可以在一個(gè)頁面中使用，而且可以用于其他多個(gè)頁面。2.CSS2.CSS樣式的基本操作樣式的基本操作 創(chuàng)建創(chuàng)建CSSCSS樣式樣式 選擇“窗口”|“CSS樣式”命令或按Shift+F11快捷鍵可以顯示或隱藏“CSS樣式”面板，如圖所示。

36、在“CSS樣式”面板右下方有四個(gè)按鈕四個(gè)按鈕 使用使用CSSCSS樣式樣式 當(dāng)“CSS樣式”定義后，在“屬性”面板中的“樣式”或“類”下拉列表框中就可以選擇相應(yīng)的樣式，則樣式應(yīng)用于被選擇的對(duì)象中。 編輯編輯CSSCSS樣式樣式 在“CSS樣式”面板中，單擊要編輯的樣式名稱，單擊面板右下方的“編輯樣式表” 按鈕，在彈出的“CSS規(guī)則定義”對(duì)話框中對(duì)樣式進(jìn)行修改 刪除刪除CSSCSS樣式樣式 在“CSS樣式”面板中，單擊要?jiǎng)h除的樣式名稱，單擊面板右下方的“取消CSS樣式的鏈接” 按鈕，將樣式從面板中刪除。在刪除了樣式后，原來應(yīng)用了該樣式的內(nèi)容將恢復(fù)應(yīng)用樣式前的顯示狀態(tài)。 設(shè)置設(shè)置CSSCSS樣式表

37、屬性樣式表屬性 “CSS規(guī)則定義”對(duì)話框有8個(gè)選項(xiàng)頁，分別是：類型、背景、區(qū)塊、方框、列表、定位、擴(kuò)展。 3.3.使用外部樣式表使用外部樣式表 外部樣式表是一個(gè)包含CSS樣式和格式規(guī)范的文本文件。用戶可以通過鏈接或?qū)С龅姆椒▽⑼獠繕邮奖響?yīng)用到Web站點(diǎn)的任意文檔中，也可以導(dǎo)出文檔中包含的CSS樣式以創(chuàng)建新外部樣式表。 鏈接或?qū)С鐾獠繕邮奖?。若要在文檔中鏈接或?qū)С鲆延械耐獠繕邮奖恚瑘?zhí)行以下操作：鏈接或?qū)С鐾獠繕邮奖?。若要在文檔中鏈接或?qū)С鲆延械耐獠繕邮奖?，?zhí)行以下操作： 在“CSS樣式”面板中，單擊其右下角區(qū)域的按鈕，彈出“鏈接外部樣式表”對(duì)話框如圖所示。 單擊“瀏覽”按鈕查找已有的外部樣式表，

38、或在“文件|URL”文本框中輸入外部樣式表的路徑。 在“添加為”單選按鈕組中選擇一個(gè)單選按鈕。F若要?jiǎng)?chuàng)建當(dāng)前文檔和外部樣式表之間的鏈接，選擇“鏈接”單選按鈕。F若要在當(dāng)前文檔的內(nèi)部CSS樣式定義中引用外部樣式表，選擇“導(dǎo)入”單選按鈕。 單擊“確定”按鈕，外部樣式表的文件名出現(xiàn)在“CSS樣式”面板中。 導(dǎo)出樣式以創(chuàng)建新的外部樣式表。用戶可以從文檔中導(dǎo)出樣式以創(chuàng)建新的導(dǎo)出樣式以創(chuàng)建新的外部樣式表。用戶可以從文檔中導(dǎo)出樣式以創(chuàng)建新的外部樣式表外部樣式表 然后可將其連接到其他文檔以應(yīng)用這些樣式。操作如下：然后可將其連接到其他文檔以應(yīng)用這些樣式。操作如下： 選擇“文件”|“導(dǎo)出”|“CSS樣式”命令或選

39、擇“文本”|“CSS樣式”|“導(dǎo)出”命令，彈出“導(dǎo)出樣式為CSS 文件”對(duì)話框。 在“文件名”文本框中輸入樣式表的名稱，然后單擊“保存”按鈕，樣式隨即保存為外部樣式表。 CSSCSS濾鏡效果濾鏡效果 CSS濾鏡是CSS的一個(gè)擴(kuò)展，能把可視化的濾鏡和轉(zhuǎn)換效果添加到一個(gè)標(biāo)準(zhǔn)的HTML元素上，使應(yīng)用樣式的對(duì)象產(chǎn)生模糊、反轉(zhuǎn)、發(fā)光等特殊效果。在Dreamweaver 8中，可直接在對(duì)話框中添加濾鏡的參數(shù)，而不用編寫復(fù)雜的代碼。 如圖所示： 實(shí)訓(xùn)要求：FCSS樣式的設(shè)置F建外部樣式Fbiaoti.css：顏色：999999，字體：黑體，大?。?6ptF內(nèi)部樣式：F .xian，顏色：FF0000F .w

40、enzi，字體：宋體，大?。?ptF .Biaoti2，字體：黑體，大小：12ptF主頁：F下邊框線為紅色虛線Fa:link，顏色：000000，字體：宋體，大小：9pt，修飾：無Fa:visited：顏色：000000，字體：宋體，大小：9pt，修飾：無Fa:hover： 顏色：000000，字體：宋體，大?。?pt，修飾：下劃線。F圖像的透明樣式（可自定樣式）實(shí)訓(xùn)目的：F應(yīng)用文字的樣式、鏈接的樣式、背景圖片的樣式。F理解內(nèi)、外部樣式表的應(yīng)用。返回本節(jié)知識(shí)本節(jié)知識(shí)F插入層F設(shè)置層的屬性F層與表格的轉(zhuǎn)換F應(yīng)用層排版設(shè)置網(wǎng)頁F行為的概念F行為的應(yīng)用 用表格定位網(wǎng)頁中的元素，不能相互疊加在一起。但

41、是使用層功能，無論將其放置到網(wǎng)頁文檔的任何一個(gè)位置，都可以隨意移動(dòng)，并且頁面元素放入圖層之中時(shí)，還可以控制哪個(gè)顯示在前面、哪個(gè)顯示在后面、哪個(gè)顯示、哪個(gè)隱藏，可見，層的優(yōu)點(diǎn)是很明顯的。 之所以在網(wǎng)頁文檔中使用層，是為了自由地安排圖像等網(wǎng)頁構(gòu)成元素表現(xiàn)特殊效果。大家可以將層理解為文檔窗口內(nèi)的又一個(gè)文檔窗口。像在普通文檔窗口中進(jìn)行操作一樣，在層中可以輸入文字，也可以插入圖像、動(dòng)畫、表格、多媒體等，對(duì)其進(jìn)行編輯。 應(yīng)用層和行為制作網(wǎng)頁“你能抓住小兔子嗎？”，當(dāng)鼠標(biāo)移動(dòng)到兔子圖片上時(shí)，“兔子”卻跑到另外位置上，頁面效果如圖所示。知識(shí)要點(diǎn)F插入層F定位層F設(shè)置層的屬性F在層中添加內(nèi)容F添加“顯示隱藏層”

42、行為F修改行為F選擇鼠標(biāo)事件（實(shí)戰(zhàn)步驟詳見教材）1.插入層插入層 創(chuàng)建層的方法F直接單擊“插入”面板“布局”類別中的“繪制層”按鈕 。F執(zhí)行“插入”|“布局對(duì)象”|“層”命令。F拖動(dòng)繪制層按鈕 到文檔窗口中。F單擊“布局”|“繪制層”按鈕 ，按住Ctrl鍵并拖動(dòng)即可連續(xù)繪制多個(gè)層。 層的嵌套 層與表格相似，可進(jìn)行嵌套。在某層內(nèi)新創(chuàng)建的層稱為嵌套層或子層，嵌套層外部的層稱為父層。子層可浮動(dòng)于文本編輯窗口的任何位置，子層的大小也可以大于父層，可根據(jù)實(shí)際需要嵌套多個(gè)層。 創(chuàng)建嵌套層的方法：創(chuàng)建嵌套層的方法：F插入法：把光標(biāo)點(diǎn)放置于頁面上已有層內(nèi)，然后選擇“插入”|“層”菜單命令插入一個(gè)嵌套層。F拖放

43、法：從“插入”工具欄布局面板中拖動(dòng)按鈕 ，然后把它放到頁面上的已有層中便可新建一個(gè)該層的子層。 關(guān)于嵌套層需要特別注意注意的是：嵌套層并不是頁面上一層位于另一層內(nèi)。嵌套層的本質(zhì)應(yīng)該是一層的HTML代碼嵌套在另一層的HTML之內(nèi)，如右圖上所示。從圖中可以看出，層“Layer2”、“Layer3”、“Layer4”的代碼分別嵌套在層“Layer1”、“Layer2”、“Layer3”代碼之內(nèi)，所以它們是嵌套。反過來，即使在頁面上看，一個(gè)層位于另一層之內(nèi)，如果它們的HTML代碼互不包含，它們就不是嵌套層。當(dāng)然最直觀的方法還是通過層面板查看層間是不是存在嵌套關(guān)系，如右圖下所示?！皩印钡那短?不是“層”

44、嵌套 2.調(diào)整層調(diào)整層 層的顯示和隱藏 調(diào)整層的大小 選擇和移動(dòng)層 防止層嵌套 對(duì)齊層 激活和刪除層 改變層的堆疊順序3.層與表格的轉(zhuǎn)換層與表格的轉(zhuǎn)換 將層轉(zhuǎn)換為表格 層和表格都是對(duì)網(wǎng)頁進(jìn)行精確定位的工具，用層定位比表格定位使用起來更加方便，但層只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能夠正確顯示。表格對(duì)瀏覽器的版本高低沒有要求，如果要使設(shè)計(jì)的網(wǎng)頁在更低版本的瀏覽器中也能被正確顯示，那么可將用層設(shè)計(jì)的網(wǎng)頁轉(zhuǎn)換為表格形式。 “轉(zhuǎn)換層為表格”對(duì)話框 將表格轉(zhuǎn)換為層 在網(wǎng)頁制作中，表格的靈活性沒有層的靈活性強(qiáng)，為了方便調(diào)整一些元素的

45、位置，可將表格轉(zhuǎn)化為層。由于層能定位到網(wǎng)頁中任何位置，所以將表格轉(zhuǎn)換為層后可以方便定位網(wǎng)頁元素的位置。 “轉(zhuǎn)換表格為層”對(duì)話框 4.設(shè)置層的屬性設(shè)置層的屬性 層的屬性“面板”如圖所示: 在層中插入內(nèi)容 在層中可以插入多種元素，包括文本、表格、圖像、插件、按鈕等。元素被放置于層中后，同樣可以改變元素的大小、顏色、對(duì)齊方式等。在網(wǎng)頁設(shè)計(jì)過程中，往往依靠層進(jìn)行精確定位，使得插入的內(nèi)容在網(wǎng)頁上排列得井井有條，以增強(qiáng)頁面的整潔和美觀。 行為（Behavior）是在Dreamweaver 8中預(yù)置的JavaScript程序，由事件（event）和對(duì)應(yīng)動(dòng)作（actions）組成。它能實(shí)現(xiàn)用戶與網(wǎng)頁間的交互，

46、通過某個(gè)動(dòng)作來觸發(fā)某項(xiàng)計(jì)劃。如當(dāng)用戶在頁面中將鼠標(biāo)移動(dòng)并單擊某一個(gè)鏈接后，載入了一幅圖像，這就產(chǎn)生了兩個(gè)事件onMouseOver和onClick，同時(shí)觸發(fā)了一個(gè)動(dòng)作載入圖像。1.行為、事件和動(dòng)作的概念 首先就“行為”、“事件”和“動(dòng)作”這幾個(gè)概念的說明 “行為”、“事件”和“動(dòng)作”的概念在人類的自然語言中似乎非常相似，但是這里有嚴(yán)格的區(qū)分。例如：網(wǎng)頁上有一行字，瀏覽網(wǎng)頁時(shí)，鼠標(biāo)一旦放在這行字上，就會(huì)顯示一幅畫；鼠標(biāo)一旦離開這行文字，那個(gè)圖片就會(huì)隱藏起來。這個(gè)效果就使用了“行為”。此列中，三者的具體表現(xiàn)為：F事件：鼠標(biāo)的移動(dòng)和鼠標(biāo)的移出。F動(dòng)作：圖片的顯示和隱藏。F行為：鼠標(biāo)的移入+圖片的顯示

47、，鼠標(biāo)的移出和圖片的隱藏。 由此可見，行為是事件和由該事件觸發(fā)的動(dòng)作的組合 2.常用事件的種類（參照教材表格）常用事件的種類（參照教材表格）F 窗口事件 F 鍵盤和鼠標(biāo)的事件 F 表單事件 F 其他事件 3.行為動(dòng)作的類型（參照教材表格）行為動(dòng)作的類型（參照教材表格）4.行為面板行為面板 選擇“窗口”|“行為”菜單命令，或按Shift+F4鍵打開“行為”面板。在Dreamweaver中，通過使用“行為”面板為頁面元素附加行為或修改以前所附加行為的參數(shù)?！靶袨椤泵姘迦鐖D所示： 5.行為的應(yīng)用行為的應(yīng)用 選擇網(wǎng)頁中要附加行為的對(duì)象（例如圖像或鏈接），然后在“行為”面板中單擊“添加行為”按鈕，從彈出

48、菜單中選擇要附加的行為。當(dāng)選擇某個(gè)動(dòng)作時(shí)，將會(huì)彈出一個(gè)相應(yīng)的對(duì)話框，顯示該動(dòng)作的參數(shù)和說明。在對(duì)話框中進(jìn)行參數(shù)設(shè)置后，單擊“確定”按鈕，即可完成附加行為的操作，如圖所示。 6.6.修改行為事件修改行為事件 添加行為后，用于觸發(fā)該動(dòng)作的默認(rèn)事件會(huì)顯示在“行為”面板“事件”欄中。在“事件”欄中單擊要應(yīng)用的事件，然后單擊該事件右側(cè)出現(xiàn)的下拉按鈕，在彈出的下拉列表框中選擇另一個(gè)事件，即可修改觸發(fā)的事件。 1.制作“播放音樂” 和“改變屬性”的行為網(wǎng)頁 2.添加“彈出信息框”、“設(shè)置狀態(tài)欄文本”和“打開瀏覽器窗口”行為的網(wǎng)頁（具體操作步驟詳見教材） 實(shí)訓(xùn)要求：層與行為在網(wǎng)頁中的各種應(yīng)用實(shí)訓(xùn)目的：F層與行

49、為在網(wǎng)頁中的各種類型F理解層的概念及兩者的聯(lián)系返回本節(jié)知識(shí)F時(shí)間軸的概念F時(shí)間軸的實(shí)例 在Dreamweaver 8中，可以不使用ActiveX控件、插件或Java程序，而在“時(shí)間軸”面板中創(chuàng)建一系列幀，然后改變每幀中層的位置、尺寸、可見性及重疊順序等屬性，從而創(chuàng)建出動(dòng)畫效果，或者利用時(shí)間軸在特定的時(shí)間改變層中的對(duì)象或執(zhí)行特定行為。 利用時(shí)間軸面板制作層動(dòng)畫效果，網(wǎng)頁的效果如圖所示知識(shí)要點(diǎn)F“時(shí)間軸”面板F修改關(guān)鍵幀層的位置（實(shí)戰(zhàn)步驟詳見教材）1.時(shí)間軸的概念時(shí)間軸的概念 利用時(shí)間軸可以通過在不同的時(shí)間改變層的位置、大小、可見性和疊放順序等來創(chuàng)建動(dòng)畫。其原理是將畫面連起來播放，產(chǎn)生運(yùn)動(dòng)的效果。

50、 時(shí)間軸動(dòng)畫的基本單位是一個(gè)畫面，也叫幀，而其中起關(guān)鍵性作用的、可以影響整個(gè)動(dòng)畫的幀叫做關(guān)鍵幀。很多幀按照時(shí)間的先后順序連接起來，就形成了動(dòng)畫。因此說：時(shí)間軸就是用來排列畫面順序的。2. “時(shí)間軸時(shí)間軸”面板面板 時(shí)間軸面板能夠顯示層和圖像隨時(shí)間變化的屬性。 選擇“窗口”|“時(shí)間軸”命令，即可顯示時(shí)間軸面板，如圖所示 時(shí)間軸彈出式菜單行為通道播放頭向后跳進(jìn)后退當(dāng)前幀播放播放速度幀編號(hào)動(dòng)畫條關(guān)鍵幀動(dòng)畫通道3.創(chuàng)建時(shí)間軸動(dòng)畫創(chuàng)建時(shí)間軸動(dòng)畫 所謂時(shí)間軸動(dòng)畫，就是在瀏覽器瀏覽網(wǎng)頁時(shí)讓一個(gè)層隨時(shí)間的變化而不斷的改變它的位置。創(chuàng)建時(shí)間軸動(dòng)畫的步驟為： 添加對(duì)象到時(shí)間軸 在頁面上插入一個(gè)層，并在層中插入要移

51、動(dòng)的元素，再把層移到動(dòng)畫的起始位置，然后選擇要制作動(dòng)畫的層，再選擇“修改”|“時(shí)間軸”|“增加對(duì)象到時(shí)間軸”命令，或者直接用鼠標(biāo)左鍵按住層的“選擇柄”，將層直接拖到時(shí)間軸，如圖所示。 并在彈出的提示對(duì)話框中單擊“確定”按鈕，此時(shí)層“Layer1”就添加到時(shí)間軸的第115幀上，如圖所示：一個(gè)動(dòng)畫條便出現(xiàn)在時(shí)間軸的第一個(gè)通道內(nèi)。 記錄層路徑 選擇所需的層后，將該層移動(dòng)到動(dòng)畫的起始處，并保證該層被選擇狀態(tài)，選擇“修改”|“時(shí)間軸”|“錄制層路徑”命令，然后再頁面上拖動(dòng)層，即可創(chuàng)建想要的運(yùn)動(dòng)路徑，如圖所示。 在動(dòng)畫停止時(shí)釋放鼠標(biāo)鍵，彈出提示用戶，時(shí)間軸面板可以變動(dòng)的層屬性的提示對(duì)話框，單擊其中的“確定

52、”按鈕，即會(huì)添加一個(gè)動(dòng)畫條到時(shí)間軸中，同時(shí)也添加了適當(dāng)數(shù)量的關(guān)鍵幀。此時(shí)，若勾選時(shí)間軸面板上的“自動(dòng)播放”選項(xiàng)，打開網(wǎng)頁時(shí)就會(huì)直接自動(dòng)播放該動(dòng)畫。若勾選時(shí)間軸面板上的“循環(huán)”選項(xiàng)，該動(dòng)畫的播放就會(huì)循環(huán)往復(fù)進(jìn)行。用瀏覽器預(yù)覽，就會(huì)看到這個(gè)層隨著制作的路徑漂移的效果。 4.修改時(shí)間軸修改時(shí)間軸F添加和刪除幀在時(shí)間軸面板中，將播放頭放置時(shí)間軸上在要添加或刪除幀的位置，選擇“修改”|“時(shí)間軸”|“添加幀”或“移除幀”命令。F改變關(guān)鍵幀的位置-在時(shí)間軸面板的動(dòng)畫條中左右拖動(dòng)要改變位置的關(guān)鍵幀標(biāo)記。F改變動(dòng)畫的起始時(shí)間-選擇與要改變的動(dòng)畫相應(yīng)的動(dòng)畫條，左右拖動(dòng)此動(dòng)畫條。F改變動(dòng)畫路徑的位置-在時(shí)間軸面板中

53、選擇該路徑位置的動(dòng)畫條，然后在頁面上拖動(dòng)該動(dòng)畫所對(duì)應(yīng)的對(duì)象。F改變動(dòng)畫的時(shí)間長度-在時(shí)間軸面板的動(dòng)畫條中左右拖動(dòng)結(jié)束幀的標(biāo)記。F改變動(dòng)畫的播放狀態(tài)-在時(shí)間軸中選擇“自動(dòng)播放”或“循環(huán)”復(fù)選框。5.控制時(shí)間軸的行為控制時(shí)間軸的行為 在時(shí)間軸面板的行為通道中單擊要為其添加行為的幀，再單擊行為面板中的“添加行為”按鈕，為該幀選擇一個(gè)要執(zhí)行的動(dòng)作。此動(dòng)作出現(xiàn)在“行為”面板中，并且在事件欄中顯示觸發(fā)該動(dòng)作的事件，其中還有指定動(dòng)作發(fā)生的幀編號(hào)。同時(shí)，在時(shí)間軸面板的行為通道中會(huì)出現(xiàn)一個(gè)動(dòng)作標(biāo)記。1.逐個(gè)顯示文字的文本動(dòng)畫逐個(gè)顯示文字的文本動(dòng)畫F要求：利用層和時(shí)間軸的屬性面板制作下落的文字。F目的：多個(gè)層在時(shí)

54、間軸中應(yīng)用。F步驟（詳見教材）2.利用類似的方法，制作葉子下落的動(dòng)畫利用類似的方法，制作葉子下落的動(dòng)畫實(shí)訓(xùn)要求：F層在時(shí)間軸中的應(yīng)用。F時(shí)間軸中添加幀的含義。實(shí)訓(xùn)目的：時(shí)間軸中路徑的幾種添加方式。時(shí)間軸的添加及修改。 返回本節(jié)知識(shí)F表單與表單對(duì)象F創(chuàng)建表單F插入各種表單域并設(shè)置其屬性F表單和表單元素應(yīng)用實(shí)例 表單是Internet用戶與服務(wù)器進(jìn)行信息交流的重要工具，在網(wǎng)頁中有著廣泛的應(yīng)用，如留言板、搜索引擎、注冊程序等。通常，一個(gè)表單中會(huì)包含多個(gè)對(duì)象，也稱為控件。一個(gè)完整的表單包括表單對(duì)象和應(yīng)用程序兩個(gè)基本組件。其中，表單對(duì)象在網(wǎng)頁中起描述作用，應(yīng)用程序則是服務(wù)器端或客戶端的腳本，通過它實(shí)現(xiàn)對(duì)

55、用戶信息的處理。本章將主要介紹在Dreamweaver 8中制作和編輯表單的方法。 使用表單制作“網(wǎng)站留言簿”網(wǎng)頁，在表單中插入文本段、單選按鈕、復(fù)選按鈕、文本域按鈕和提交按鈕并設(shè)置表單的屬性。網(wǎng)頁的效果圖如圖所示。知識(shí)要點(diǎn)F創(chuàng)建表單F插入表單域F設(shè)置表單域?qū)傩裕▽?shí)戰(zhàn)步驟詳見教材） 在Dreamweaver 8中，表單是用來輸入數(shù)據(jù)或與網(wǎng)站進(jìn)行交互的工具?？梢詫⒄麄€(gè)網(wǎng)頁創(chuàng)建成一個(gè)表單網(wǎng)頁，也可以在網(wǎng)頁的部分區(qū)域中添加表單，其創(chuàng)建方法都相同。表單輸入類型被稱為表單對(duì)象。我們可以使用創(chuàng)建各種表單對(duì)象，如文本域、密碼域、單選按鈕、復(fù)選按鈕、彈出式菜單或按鈕。1.插入表單的方法插入表單的方法 在插入工

56、具欄中單擊“表單”選項(xiàng)。F單擊“表單”按鈕，或選擇“插入”|“表單”|“表單”命令，即可在光標(biāo)處插入表單；插入表單在窗口中以紅色虛線框表示。F如果看不到該外框，請(qǐng)單擊“查看”|“可視化助理”|“不可見元素”選項(xiàng)是否被選中。如圖所示。1.插入表單的方法插入表單的方法 將光標(biāo)定位在插入的表單中，可打開表單的“屬性”面板，如圖所示。 在表單“屬性”面板中“表單名稱”文本框中輸入標(biāo)識(shí)該表單的唯一名稱；在“動(dòng)作”文本框中輸入處理該表單的頁面或腳本的路徑，或者單擊文件夾圖標(biāo)定位到適當(dāng)?shù)捻撁婊蚰_本?！胺椒ā毕吕斜砜蛴脕磉x擇將表單數(shù)據(jù)傳輸?shù)椒?wù)器的方式，如圖所示：2.插入表單對(duì)象插入表單對(duì)象 添加文本字段：文本字段是用戶可在其中輸入數(shù)據(jù)的表單對(duì)象。用戶可以創(chuàng)建一個(gè)包含單行或多行的文本字段，也可以創(chuàng)建一個(gè)隱