1、HTML靜態(tài)網(wǎng)頁(yè)的制作學(xué)習(xí)目標(biāo)Dreamweaver、Flash學(xué)會(huì)將Dreamweaver作為開(kāi)發(fā)Web程序的平臺(tái)；掌握超級(jí)鏈接的創(chuàng)建；學(xué)會(huì)使用HTML和XML語(yǔ)言編制網(wǎng)頁(yè)。目 錄 2.1 2.1 常用的網(wǎng)頁(yè)制作工具常用的網(wǎng)頁(yè)制作工具 2.2 2.2 制作第一個(gè)簡(jiǎn)單網(wǎng)頁(yè)制作第一個(gè)簡(jiǎn)單網(wǎng)頁(yè) 2.3 2.3 超文本和超圖像鏈接超文本和超圖像鏈接 2.4 2.4 網(wǎng)頁(yè)制作中的網(wǎng)頁(yè)制作中的FlashFlash動(dòng)畫(huà)動(dòng)畫(huà) 2.5 2.5 利用表格和框架制作網(wǎng)頁(yè)利用表格和框架制作網(wǎng)頁(yè) 2.6 2.6 HTMLHTML與與XMLXML標(biāo)識(shí)語(yǔ)言標(biāo)識(shí)語(yǔ)言 Dreamweaver Dreamweaver是一套專業(yè)

2、化的網(wǎng)頁(yè)創(chuàng)作工具，它采用是一套專業(yè)化的網(wǎng)頁(yè)創(chuàng)作工具，它采用“所見(jiàn)即所得所見(jiàn)即所得”的的可視化編輯方式，能夠快速高效地創(chuàng)建各種具有專業(yè)水平的網(wǎng)頁(yè)，不需要可視化編輯方式，能夠快速高效地創(chuàng)建各種具有專業(yè)水平的網(wǎng)頁(yè)，不需要編寫(xiě)任何代碼。如果需要在代碼界面進(jìn)行工作，只需進(jìn)入編寫(xiě)任何代碼。如果需要在代碼界面進(jìn)行工作，只需進(jìn)入HTMLHTML代碼窗代碼窗口或源代碼檢視器中，就能同步看到口或源代碼檢視器中，就能同步看到DreamweaverDreamweaver生成的源代碼。它支生成的源代碼。它支持最新的持最新的DHTMLDHTML、CSSCSS標(biāo)準(zhǔn)及分層技術(shù)，具有極好的兼容性，適用標(biāo)準(zhǔn)及分層技術(shù)，具有極好的

3、兼容性，適用于各種平臺(tái)和各種瀏覽器。于各種平臺(tái)和各種瀏覽器。 2.1 2.1 常用的網(wǎng)頁(yè)制作工具常用的網(wǎng)頁(yè)制作工具 Dreamweaver Dreamweaver 啟動(dòng)啟動(dòng)DreamweaverDreamweaver程序程序 在“開(kāi)始”菜單的“所有程序”中找到“Adobe Dreamweaver CS3”，并單擊該命令。Dreamweaver將立即啟動(dòng)，在“文檔”窗口內(nèi)將打開(kāi)一個(gè)空白文檔，如下圖所示。 2. 2. DreamweaverDreamweaver的用戶界面的用戶界面 Dreamweaver由頁(yè)面編輯器和站點(diǎn)管理器兩大部分組成。下圖所示的是Dreamweaver的頁(yè)面編輯器，包括頁(yè)面

4、編輯窗口和各種浮動(dòng)面板。 (1) 頁(yè)面編輯窗口： 頁(yè)面編輯窗口由標(biāo)題欄、菜單欄、工具欄、文檔編輯區(qū)和狀態(tài)欄等基本部分組成，各部分的功能如下： 標(biāo)題欄：顯示當(dāng)前頁(yè)面的標(biāo)題，括號(hào)中顯示對(duì)應(yīng)文檔的路徑和文件名。 菜單欄：包含所有的操作命令。Dreamweaver共有10個(gè)系統(tǒng)菜單，分別為文件、編輯、查看、插入記錄、修改、文本、命令、站點(diǎn)、窗口、幫助。單擊系統(tǒng)菜單，打開(kāi)對(duì)應(yīng)的下拉菜單，可選擇下拉菜單中的操作命令。面板上的各個(gè)操作按鈕基本上都有菜單操作命令與之相對(duì)應(yīng)。 工具欄：放置常用工具。如：左邊第一個(gè)按鈕用于切換到HTML代碼窗口，第二個(gè)按鈕切換到HTML代碼視圖和頁(yè)面設(shè)計(jì)視圖雙狀態(tài)同步窗口，第三個(gè)

5、按鈕則切換到頁(yè)面編輯窗口。 文檔編輯區(qū)：編輯網(wǎng)頁(yè)的區(qū)域。Dreamweaver啟動(dòng)后，自動(dòng)創(chuàng)建一個(gè)空白的網(wǎng)頁(yè)文檔等待編輯。 狀態(tài)欄：顯示當(dāng)前網(wǎng)頁(yè)的有關(guān)信息。在狀態(tài)欄中從左到右依次為標(biāo)簽選擇器、基本工具、窗口設(shè)置框和下載指示器。 標(biāo)簽選擇器：編輯網(wǎng)頁(yè)時(shí)，利用標(biāo)簽選擇器可以顯示和修改HTML標(biāo)簽，單擊標(biāo)簽按鈕可以選擇網(wǎng)頁(yè)中相應(yīng)的編輯對(duì)象。 基本工具：包括選取工具、手形工具、縮放工具和選擇縮放比例列表框。 窗口設(shè)置框：設(shè)置顯示窗口的大小，單擊設(shè)置區(qū)右側(cè)的小按鈕，在打開(kāi)的菜單中，可以根據(jù)顯示器屏幕的分辨率選擇不同的顯示尺寸。 下載指示器：顯示當(dāng)前網(wǎng)頁(yè)的文件量大小，以及網(wǎng)頁(yè)被下載所需要的時(shí)間，單位是*k

6、/*秒。 (2) 浮動(dòng)面板： 頁(yè)面編輯器中有2個(gè)常用的浮動(dòng)面板：插入面板、屬性面板，以及放置其他面板的浮動(dòng)面板集。 浮動(dòng)面板是Dreamweaver的一大特色。利用浮動(dòng)面板對(duì)網(wǎng)頁(yè)進(jìn)行屬性設(shè)計(jì)，在頁(yè)面編輯窗口中可以直接看到操作結(jié)果，真正實(shí)現(xiàn)了“所見(jiàn)即所得”的編輯功能。 浮動(dòng)面板集也是Dreamweaver的一大特色。設(shè)計(jì)者可以按自已的需要任意組合或拆分浮動(dòng)面板集中的各種面板，也可以用鼠標(biāo)拖拽浮動(dòng)面板的標(biāo)題欄來(lái)移動(dòng)浮動(dòng)面板，用鼠標(biāo)拖拽浮動(dòng)面板的邊框來(lái)改變浮動(dòng)面板的大小。 (3) 站點(diǎn)管理器： 站點(diǎn)管理器主要用于管理站點(diǎn)內(nèi)的文件和目錄，可對(duì)站點(diǎn)內(nèi)的文件進(jìn)行改名、編輯和刪除等基本操作，并可檢驗(yàn)對(duì)象的鏈

7、接情況，自動(dòng)修改其他頁(yè)面指向這個(gè)對(duì)象的鏈接。利用模板和庫(kù)，可以使站點(diǎn)內(nèi)的部分頁(yè)面應(yīng)用相同的模板和庫(kù)，從而使多個(gè)頁(yè)面具有相同的風(fēng)格，并且可以快速進(jìn)行統(tǒng)一更新。管理器還自帶FTP功能，能完成站點(diǎn)內(nèi)文件的上傳和下載，進(jìn)行站點(diǎn)的發(fā)布和遠(yuǎn)程管理。 制作一個(gè)瀏覽效果如下圖所示的簡(jiǎn)單網(wǎng)頁(yè)。 2.2 2.2 制作第一個(gè)簡(jiǎn)單網(wǎng)頁(yè)制作第一個(gè)簡(jiǎn)單網(wǎng)頁(yè) 實(shí)現(xiàn)步驟如下： 首先啟動(dòng)Dreamweaver，打開(kāi)前面所建立的本地站點(diǎn)，接著在頁(yè)面中插入各種基本的網(wǎng)頁(yè)元素。一、基本網(wǎng)頁(yè)元素（文字、圖像、水平線、日期和時(shí)間）的插入一、基本網(wǎng)頁(yè)元素（文字、圖像、水平線、日期和時(shí)間）的插入1. 1. 在頁(yè)面中添加和處理文字在頁(yè)面中添加

8、和處理文字(1(1) 在頁(yè)面中輸入文字，操作步驟如下： 在頁(yè)面編輯區(qū)中，按照頁(yè)面的設(shè)計(jì)內(nèi)容輸入文字，各段文本的末尾按回車鍵，如下圖所示； 按Ctrl+S鍵保存網(wǎng)頁(yè)。第一次創(chuàng)建的網(wǎng)頁(yè)可以作為首頁(yè)文件保存，隨后該首頁(yè)將得到進(jìn)一步的擴(kuò)充和完善。注意：書(shū)中所提到的“保存網(wǎng)頁(yè)”都是指將網(wǎng)頁(yè)保存到本地站點(diǎn)下。(2) 將第一行“計(jì)算機(jī)工程系”作為網(wǎng)頁(yè)的標(biāo)題文字，操作步驟如下： 選中“計(jì)算機(jī)工程系”，打開(kāi)屬性面板，如下圖所示； 在“格式”下拉選項(xiàng)中選擇最大標(biāo)題“標(biāo)題1” 以設(shè)置標(biāo)題樣式； 單擊 按鈕將字體變粗，單擊按鈕將文字居中顯示。(3) 接著，設(shè)置中文字體。 在屬性面板上單擊字體按鈕 ，打開(kāi)字體下拉列表，

9、選擇想設(shè)置的字體。如果字體下拉列表中沒(méi)有想設(shè)置的字體，如何添加中文字體呢？操作如下： 打開(kāi)“編輯字體列表”對(duì)話框，執(zhí)行下列操作之一： 在屬性面板上單擊字體按鈕 ，打開(kāi)字體下拉列表，選擇“編輯字體列表”選項(xiàng)，如下圖所示； 在菜單欄中選擇“文本”“字體”“編輯字體列表”命令。 在“編輯字體列表”對(duì)話框（如下圖所示）中進(jìn)行如下操作： 在“編輯字體列表”對(duì)話框中進(jìn)行如下操作：先在“字體列表”框中選定“在以下列表中添加字體”項(xiàng)；在“可用字體”框中選擇一種字體（如隸書(shū)）； 單擊方向按鈕 ，選中的字體添加到“選擇的字體”框中，同時(shí)也出現(xiàn)在“字體列表”框中。 如果還要加入第二種字體，則單擊按鈕 ，再重復(fù)上面的

10、3步即可。如果要?jiǎng)h除某種字體，則在“字體列表”框中選定該字體，單擊按鈕 。還可以單擊按鈕 ，將剛添加的字體上移，便于以后的使用。 單擊“確定”按鈕。此時(shí)，屬性面板上的字體下拉列表中已經(jīng)添加了“隸書(shū)”等字體。(4) 將第一段文本的顏色設(shè)置為紅色，將第三段文本的顏色設(shè)置為十六進(jìn)制代碼#3333CC藍(lán)色，將后面文本的顏色設(shè)置為十六進(jìn)制代碼#FF00FF的淡紫色。操作步驟如下： 首先選中第一段文本； 單擊屬性面板上的字體顏色按鈕，在“顏色”調(diào)色板中用吸管吸取紅色即可，如下圖所示。 在網(wǎng)頁(yè)中，每種顏色都可用一個(gè)十六進(jìn)制代碼表示。如果知道顏色的代碼，可直接在“顏色”文本框中輸入該顏色的十六進(jìn)制代碼。 用相

11、同的方法設(shè)置下面文本的顏色。(5) 將最后的5行文本組成一個(gè)項(xiàng)目列表，操作步驟如下： 首先選中最后5行文本； 打開(kāi)屬性面板，單擊按鈕 ，則最后5行文字前便增加了圓點(diǎn)式的項(xiàng)目符號(hào)“”，如下圖所示。 (6) 如果要為選中的段落前加上1、2、3式的項(xiàng)目編號(hào)，則單擊 按鈕即可。同樣，項(xiàng)目符號(hào)的樣式是可以更改的，單擊屬性面板上的“列表項(xiàng)目”按鈕進(jìn)行相應(yīng)的設(shè)置。 (7) 同時(shí)，還可以讓“Welcome”文本從左到右動(dòng)起來(lái)，操作步驟如下： 首先選中“Welcome”文本； 在屬性面板上單擊按鈕 ，打開(kāi)快速標(biāo)簽編輯器； 在光標(biāo)處直接輸入“marquee”，或稍等一會(huì)，在出現(xiàn)的下拉列表中選擇“marquee”選

12、項(xiàng)，然后按回車鍵。此時(shí)，狀態(tài)欄上已多了一項(xiàng)加粗顯示的。 按F12鍵預(yù)覽網(wǎng)頁(yè)效果。 2. 2. 在頁(yè)面中插入和處理圖像在頁(yè)面中插入和處理圖像(1) 將圖像插入到頁(yè)面中。操作步驟如下： 在“學(xué)生專區(qū)”項(xiàng)目符號(hào)“”前按回車鍵，以確定插入圖像的位置在第三段和第四段之間； 單擊插入面板中的 按鈕的子菜單“圖像”（或者在菜單欄中選擇“插入記錄”“圖像”命令），彈出“選擇圖像源文件”對(duì)話框，如下圖所示； 在查找范圍框中選定圖像文件所在的文件夾及文件，單擊“確定”按鈕。 彈出“圖像標(biāo)簽輔助功能屬性”對(duì)話框，填寫(xiě)該圖像的“替換文本”及“詳細(xì)說(shuō)明”內(nèi)容，單擊“確定”按鈕。 經(jīng)過(guò)上面的操作，圖像便插入到了當(dāng)前的頁(yè)面

13、中。按F12預(yù)覽網(wǎng)頁(yè)，可以看到當(dāng)鼠標(biāo)停留在圖像上時(shí)就會(huì)出現(xiàn)提示文字。這樣做的好處就是當(dāng)瀏覽網(wǎng)頁(yè)時(shí)，即使圖像不能完全顯示出來(lái)，提示文字也能讓瀏覽者了解圖像的內(nèi)容或主題。但是，此時(shí)的圖像并沒(méi)有按照頁(yè)面設(shè)計(jì)的要求放置，因此需要調(diào)整圖像的對(duì)齊方式、周邊間距及圖像的大小等。(2) 調(diào)整圖像的對(duì)齊方式。關(guān)于圖像，在屬性面板上有兩種對(duì)齊方式：圖像在頁(yè)面中的對(duì)齊方式及圖像和周圍元素的對(duì)齊方式。 調(diào)整圖像在頁(yè)面中的對(duì)齊方式分別單擊 3個(gè)按鈕，可以看到圖像分別位于頁(yè)面的左邊、中間和右邊。再次單擊相應(yīng)對(duì)齊按鈕，圖像回到原來(lái)的位置上。此時(shí)單擊左對(duì)齊按鈕。 調(diào)整圖像和周圍元素的對(duì)齊方式單擊屬性面板上的“對(duì)齊”按鈕，在下

14、拉列表選項(xiàng)中選擇“左對(duì)齊 ” 。 (3) 調(diào)整圖像的周邊間距。操作步驟如下： 選中圖像，打開(kāi)屬性面板； 在“垂直邊距”文本框中輸入10，設(shè)置垂直間距為10像素； 在“水平邊距”文本框中輸入60，設(shè)置水平間距為60像素，按回車鍵。可以看到圖像與上、下、左、右方的文字間隔都拉大了，如下圖所示。如果刪除輸入框中的數(shù)值，則圖像又回到原來(lái)的位置。 (4) 調(diào)整圖像的大小。方法有兩種： 直接拖拽圖像上的控點(diǎn)； 在屬性面板的“高度”和“寬度”文本框中輸入相應(yīng)數(shù)值（單位是像素）。 如果不滿意調(diào)整圖像的大小，則可以單擊屬性面板上的“高度”和“寬度”標(biāo)志，使圖像還原為原始大小。 3. 3. 插入水平線插入水平線(

15、1) 在頁(yè)面中插入水平線。操作步驟如下： 在“Welcome”文本后單擊鼠標(biāo)，以確定插入水平線的位置； 在菜單欄中選擇“插入記錄”|“HTML”“水平線”命令，則Dreamweaver默認(rèn)的水平線便插入到“Welcome”和第三段文字之間，如下圖所示。 (2)修改水平線，將水平線居中對(duì)齊，且其寬度為瀏覽器窗口的80%，操作步驟如下： 選中上面所插入的水平線； 在水平線屬性面板的“寬度”文本框中輸入“80”，并選擇其單位為“%”，如下圖所示； 在“對(duì)齊”下拉列表中選擇“居中”對(duì)齊方式。注意： 在水平線的屬性面板上，其寬度的單位分為兩種：像素和%（百分比）。80%和80像素的區(qū)別在于：無(wú)論瀏覽器窗

16、口怎么縮放，寬度設(shè)置為80像素的水平線都是80個(gè)像素點(diǎn)長(zhǎng)；而寬度設(shè)置為80%的水平線將會(huì)自動(dòng)調(diào)整長(zhǎng)度，其寬度總是占瀏覽器窗口寬度的80%。要插入垂直線，則選中水平線，將其高度設(shè)置為垂直線的高度（如：80像素），將寬度設(shè)置為垂直線的寬度（如：2像素）即可。 (3) Dreamweaver默認(rèn)的水平線顏色為灰色，要將水平線的顏色設(shè)置為黃色，操作步驟如下： 選中上面所插入的水平線； 單擊水平線屬性面板的 按鈕，打開(kāi)快速標(biāo)簽編輯器； 在標(biāo)簽中插入屬性color=“#FFFF00”或color=“yellow”； 按F12預(yù)覽，便可看到水平線是黃色。 . 插入日期和時(shí)間在頁(yè)面中插入日期和時(shí)間，操作步驟如

17、下：(1) 確定所插入的日期和時(shí)間的位置；(2) 單擊插入面板的日期按鈕 ，者在菜單欄中選擇“插入記錄”“日期”命令，打開(kāi)“插入日期”對(duì)話框，如下圖所示； (3) (3) 在在“插入日期插入日期”對(duì)話框中選擇星期、日期和時(shí)間格式，選中對(duì)話框中選擇星期、日期和時(shí)間格式，選中“儲(chǔ)存儲(chǔ)存時(shí)自動(dòng)更新時(shí)自動(dòng)更新”項(xiàng)，然后單擊項(xiàng)，然后單擊“確定確定”按鈕。在日期的屬性面板上單擊按鈕。在日期的屬性面板上單擊“編輯日期格式編輯日期格式”按鈕可以重新修改日期格式。按鈕可以重新修改日期格式。二、網(wǎng)頁(yè)屬性（標(biāo)題、背景、頁(yè)邊距等）的設(shè)置二、網(wǎng)頁(yè)屬性（標(biāo)題、背景、頁(yè)邊距等）的設(shè)置執(zhí)行下列操作之一，打開(kāi)“頁(yè)面屬性”對(duì)話框

18、： 在菜單欄中選擇“修改”“頁(yè)面屬性”命令； 在“屬性”面板中單擊“頁(yè)面屬性”按鈕； 在網(wǎng)頁(yè)空白處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“頁(yè)面屬性”命令。 1. 在標(biāo)題欄中增添網(wǎng)頁(yè)標(biāo)題在標(biāo)題欄中增添網(wǎng)頁(yè)標(biāo)題，操作步驟如下：(1) 在“頁(yè)面屬性”對(duì)話框的“分類”選項(xiàng)中選擇“標(biāo)題/編碼”，在其選項(xiàng)卡的“標(biāo)題”文本框中輸入“計(jì)算機(jī)工程系”；(2) 點(diǎn)擊“確定”按鈕。網(wǎng)頁(yè)標(biāo)題“計(jì)算機(jī)工程系”便顯示在瀏覽器的標(biāo)題欄上，如下圖所示。此時(shí)，在瀏覽器窗口、歷史記錄和書(shū)簽列表中標(biāo)識(shí)了頁(yè)面。 2. 增添網(wǎng)頁(yè)背景網(wǎng)頁(yè)背景分為網(wǎng)頁(yè)背景顏色和背景圖像，其操作步驟如下： 在“頁(yè)面屬性”對(duì)話框的“分類”選項(xiàng)中選擇“外觀”，在

19、其選項(xiàng)卡中單擊“背景顏色”按鈕，在“顏色”調(diào)色板中用吸管吸取想要的背景顏色即可。 在“外觀”選項(xiàng)卡中，單擊“背景圖像”文本框右邊的“瀏覽”按鈕，在“選擇圖像源文件”對(duì)話框中選擇喜歡的背景圖像，然后單擊“確定”按鈕即可。3.調(diào)整網(wǎng)頁(yè)的邊距 在“頁(yè)面屬性”對(duì)話框中，“左邊界”和“頂部邊界”項(xiàng)用于設(shè)置IE瀏覽器的左邊距和上邊距；“邊界寬度”和“邊界高度”項(xiàng)用于設(shè)置Netscape瀏覽器的左邊距和上邊距。 如果要去掉網(wǎng)頁(yè)的邊距，則在“外觀”選項(xiàng)卡的“左邊距”、“右邊距”、“上邊距”和“下邊距”文本框中都輸入“0”，如下圖所示。一、創(chuàng)建超級(jí)鏈接一、創(chuàng)建超級(jí)鏈接1. 創(chuàng)建內(nèi)部超級(jí)鏈接創(chuàng)建內(nèi)部超級(jí)鏈接就是在

20、同一個(gè)站點(diǎn)內(nèi)的不同頁(yè)面之間建立一定的相互關(guān)系。被鏈接的對(duì)象不僅可以是網(wǎng)頁(yè)，還可以是其他文檔（如：Microsoft Office 文檔）或文件（如圖像、聲音、視頻文件等）。創(chuàng)建內(nèi)部超級(jí)鏈接，執(zhí)行下列操作之一：(1) 選中“學(xué)生專區(qū)”，在屬性面板中單擊“鏈接”右邊的“瀏覽文件”按鈕 （如下圖所示），選中相應(yīng)的文件“exa2-2.htm”即可； 2.3 2.3 超文本和超圖像鏈接超文本和超圖像鏈接 (2) 選中“教師專區(qū)”，在屬性面板中單擊“指向文件”按鈕，并直接拖拽鼠標(biāo)，此時(shí)屏幕上會(huì)出現(xiàn)一條跟蹤直線（如下圖所示），移動(dòng)鼠標(biāo)到站點(diǎn)管理器中所要鏈接的目標(biāo)文件“exa2-3.htm”上，當(dāng)該文件被一個(gè)

21、虛線框包圍時(shí)松開(kāi)鼠標(biāo)；(3) 選中“系部專區(qū)”，在屬性面板上的“鏈接”文本框中直接輸入被鏈接的文件相對(duì)路徑及文件名（exa2-5.htm）；(4) 選中“辦公自動(dòng)化”，單擊右鍵，從快捷菜單中選擇“創(chuàng)建鏈接”，然后選擇一個(gè)要鏈接的文件（exa2-6.htm）。 注意：設(shè)置過(guò)的文本具有超級(jí)鏈接的特征：文字變藍(lán)，并帶有下劃線。并且在瀏覽器中當(dāng)鼠標(biāo)移到超級(jí)鏈接的地方將會(huì)變成手形，還在瀏覽器下方的狀態(tài)欄中顯示鏈接路徑。 2. 創(chuàng)建外部超級(jí)鏈接(1) 在頁(yè)面中輸入“友情鏈接”文本，選中其文本，在文本屬性面板上的“鏈接”文本框中直接輸入完整的網(wǎng)址（如： :/）即可。如果想在新的瀏覽器窗口中打開(kāi)鏈接文件，只需

22、在設(shè)置了超級(jí)鏈接之后，在屬性面板上的“目標(biāo)”項(xiàng)中進(jìn)行設(shè)置，選擇“_blank”即可。 (2) 要在頁(yè)面中創(chuàng)建E-mail鏈接，有兩種方法： 選中“與我聯(lián)系”文本，然后在插入面板中單擊 按鈕或在菜單欄中選擇“插入記錄 ”“電子郵件鏈接”命令，打開(kāi) “電子郵件鏈接”對(duì)話框，在該對(duì)話框的“文本”文本框中已自動(dòng)填寫(xiě)了被選中的文本“與我聯(lián)系”，只需在“E-mail”文本框中輸入電子郵件地址即可。 選中“與我聯(lián)系”文本，然后在文本屬性面板上的“鏈接”文本框中直接輸入“mailto:”后加上電子郵件地址（如：）即可； 二、熱區(qū)和圖像二、熱區(qū)和圖像1. 熱區(qū) 圖像映射圖是指在一張圖像上實(shí)現(xiàn)多個(gè)局部區(qū)域指向不同

23、的網(wǎng)頁(yè)鏈接，而圖像上可點(diǎn)擊的區(qū)域被稱為熱區(qū)。制作熱區(qū)： 新建一個(gè)網(wǎng)頁(yè)，在網(wǎng)頁(yè)中插入一個(gè)圖像；(1) 單擊圖像，此時(shí)屬性面板上顯示的是有關(guān)圖像的屬性。在該面板上有“地圖”一項(xiàng)，用它來(lái)制作熱區(qū)，在其文本框中可填寫(xiě)熱區(qū)的名稱，如果不填，則Dreamweaver自動(dòng)加上一個(gè)名字“Map”。 繪制熱區(qū)的工具有：矩形工具、圓形工具和多邊形工具三種，根據(jù)想要制作的熱區(qū)形狀來(lái)選擇使用的工具，如下圖所示。 (2) 為熱區(qū)添加文字說(shuō)明及制作超級(jí)鏈接熱區(qū)制作完后，接下來(lái)就是為每一個(gè)熱區(qū)添加文字說(shuō)明及制作超級(jí)鏈接，操作步驟如下： 用鼠標(biāo)選中某一個(gè)熱區(qū)； 在熱區(qū)屬性面板上，除了 “地圖”外，還有“鏈接”、“替代”及“目

24、標(biāo)”3項(xiàng)，其用法與普通鏈接一樣。同時(shí)，如果不滿意所制作的熱區(qū)，則可以進(jìn)行修改，主要通過(guò)使用 來(lái)實(shí)現(xiàn)。若要?jiǎng)h除熱區(qū)，先選中熱區(qū)，然后直接按Del鍵即可。 2. 圖像(1) 制作翻轉(zhuǎn)圖像：當(dāng)鼠標(biāo)移到“圖像”上時(shí)，圖像就變成另一幅圖像；當(dāng)單擊時(shí)，便鏈接到其他的網(wǎng)頁(yè)文件。操作步驟如下： 打開(kāi)“exa2-1.htm”文件，將其另存為“exa2-3-1.htm”文件；在網(wǎng)頁(yè)中，刪除“學(xué)生專區(qū)”等所有的欄目文本； 要想打開(kāi)“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，執(zhí)行下列操作之一：在菜單欄中選擇“插入記錄”“圖像對(duì)象”“鼠標(biāo)經(jīng)過(guò)圖像”命令；在插入面板上的“圖像” 列表中選擇“鼠標(biāo)經(jīng)過(guò)圖像”選項(xiàng) ，打開(kāi)“插入鼠標(biāo)經(jīng)過(guò)圖像”

25、對(duì)話框，如圖2-33所示；在對(duì)話框中，單擊“原始圖像”右邊的“瀏覽”按鈕，選取第一次加載該頁(yè)面時(shí)要顯示的圖像；然后，點(diǎn)擊“鼠標(biāo)經(jīng)過(guò)圖像”右邊的“瀏覽”按鈕，選取當(dāng)鼠標(biāo)經(jīng)過(guò)原始圖像時(shí)要顯示的圖像；點(diǎn)擊“在按下時(shí)，前往的URL” 右邊的“瀏覽”按鈕，選取點(diǎn)擊鼠標(biāo)經(jīng)過(guò)圖像時(shí)將打開(kāi)的網(wǎng)頁(yè)文件。保存網(wǎng)頁(yè)，并且預(yù)覽網(wǎng)頁(yè)效果。(2) 制作導(dǎo)航條導(dǎo)航條由一排縱向或橫向連接在一起的元件組成，每個(gè)元件由一組最多有四種狀態(tài)的圖像構(gòu)成，在不同的情況下元件顯現(xiàn)出不同的圖像。并且一個(gè)網(wǎng)頁(yè)里只能有一個(gè)導(dǎo)航條。其操作步驟如下： 執(zhí)行下列方法之一，打開(kāi)“插入導(dǎo)航條”對(duì)話框：在菜單中選擇“插入記錄”“圖像對(duì)象”“導(dǎo)航條”命令；在

26、插入面板上的“圖像” 列表中選擇“導(dǎo)航條”選項(xiàng) 。從“插入導(dǎo)航條”對(duì)話框中看到一個(gè)元件最多有下列4種狀態(tài)的圖像： 狀態(tài)圖像：又稱為初始圖像，指鼠標(biāo)未移到元件上時(shí)所顯示的圖像。 鼠標(biāo)經(jīng)過(guò)圖像：鼠標(biāo)移到元件上時(shí)所顯示的圖像。 按下圖像：?jiǎn)螕粼笏@示的圖像，表明所鏈接的網(wǎng)頁(yè)文件已訪問(wèn)過(guò)。 按下時(shí)鼠標(biāo)經(jīng)過(guò)圖像：鼠標(biāo)移到被點(diǎn)擊過(guò)的元件上時(shí)所顯示的圖像。 插入導(dǎo)航條對(duì)話框 設(shè)置第一個(gè)元件的各個(gè)選項(xiàng)； 單擊 按鈕，添加其他元件，再重復(fù)、步驟進(jìn)行相應(yīng)的設(shè)置。 單擊“確定”按鈕，完成導(dǎo)航條的制作。 Flash是一種用于制作和編輯動(dòng)畫(huà)和電影的軟件，用它可以制作出一種擴(kuò)展名為.swf的動(dòng)畫(huà)文件，這種文件可以插入

27、HTML，也可以單獨(dú)生成網(wǎng)頁(yè)。 一、一、FlashFlash的幾個(gè)重要概念的幾個(gè)重要概念 1Flash動(dòng)畫(huà)的格式在掌握使用Flash動(dòng)畫(huà)之前，有必要先來(lái)了解一下Flash動(dòng)畫(huà)的幾種格式。 2.4 2.4 網(wǎng)頁(yè)制作中的網(wǎng)頁(yè)制作中的FlashFlash動(dòng)畫(huà)動(dòng)畫(huà) (1) Flash源文件格式： Flash源文件格式的擴(kuò)展名為.fla，這種類型的文件只能在Flash應(yīng)用程序中被打開(kāi)，在Dreamweaver或?yàn)g覽器中都是無(wú)法打開(kāi)的。用戶可以在Flash應(yīng)用程序中打開(kāi)該文件，然后導(dǎo)出擴(kuò)展名為.swf或.swt的文件，以便在瀏覽器中使用。(2) Flash電影文件格式： Flash電影文件格式的擴(kuò)展名為.

28、swf。它是Flash源文件的壓縮版本，已經(jīng)為通過(guò)網(wǎng)絡(luò)查看而進(jìn)行了優(yōu)化。因此，這種類型的文件可以在瀏覽器中播放，也可以在Dreamweaver中預(yù)覽，但是卻無(wú)法在Flash應(yīng)用程序中進(jìn)行編輯。在Dreamweaver中允許用戶直接插入Flash動(dòng)畫(huà)對(duì)象，該對(duì)象的擴(kuò)展名就是.swf。 2矢量圖和位圖 矢量圖是以一組指令的形式存在的，這些指令用來(lái)描述一幅圖像中所包含顏色和位置屬性的直線或曲線公式，因而矢量圖形的文件體積十分小。對(duì)于矢量圖形來(lái)說(shuō)，其形狀是由曲線通過(guò)的點(diǎn)來(lái)描述的，而它的顏色則由曲線的顏色和曲線所包圍區(qū)域的顏色確定，與曲線內(nèi)單獨(dú)的點(diǎn)無(wú)關(guān)。 位圖的顯示方式是用像素來(lái)表示圖像的形狀和色彩，有

29、多大的圖像就要用多大的像素來(lái)填充。因此，位圖的文件所占的體積比較大。常用的位圖文件格式為bmp、gif、jpg等。 3舞臺(tái)和工作區(qū) 舞臺(tái)（Stage）是繪制圖形、編輯圖形、圖像的矩形區(qū)域，也是創(chuàng)建電影動(dòng)畫(huà)的區(qū)域。用戶在制作動(dòng)畫(huà)的過(guò)程中，放置在舞臺(tái)中的內(nèi)容將體現(xiàn)在最終的動(dòng)畫(huà)效果中。其默認(rèn)顏色是白色。 工作區(qū)（Work Area）則環(huán)繞于舞臺(tái)的四周，其默認(rèn)顏色為灰色。它在實(shí)際動(dòng)畫(huà)制作過(guò)程中非常有用，制作者可以先將暫不參與動(dòng)畫(huà)內(nèi)容放置在工作區(qū)內(nèi)，這并不影響舞臺(tái)內(nèi)動(dòng)畫(huà)內(nèi)容的播放。當(dāng)需要播放工作區(qū)內(nèi)的動(dòng)畫(huà)時(shí)，只要將其移動(dòng)到舞臺(tái)中即可。 4幀和時(shí)間線 “幀”是組成動(dòng)畫(huà)的最基本單位，即圖像在某一時(shí)間點(diǎn)上的定

30、格。幀又分為關(guān)鍵幀（Keyframe）和普通幀（Frame）兩種。(1) 關(guān)鍵幀： 在Flash中，一般的動(dòng)畫(huà)都是依靠關(guān)鍵幀來(lái)實(shí)現(xiàn)的。用戶只需給出一個(gè)對(duì)象的幾個(gè)關(guān)鍵動(dòng)作，生成關(guān)鍵幀，系統(tǒng)就會(huì)根據(jù)需要在各個(gè)關(guān)鍵幀之間自動(dòng)生成中間幀，來(lái)實(shí)現(xiàn)關(guān)鍵幀之間變化的動(dòng)畫(huà)。 (2) 普通幀：除了關(guān)鍵幀外，所有出現(xiàn)在時(shí)間軸中的幀都是普通幀。在Flash中，普通幀一般用來(lái)代表中間的畫(huà)面，也就是在兩個(gè)關(guān)鍵幀之間的幀。這些幀用來(lái)表示漸變的過(guò)程，并且由于是程序自動(dòng)生成，所以無(wú)法編輯。時(shí)間線（Timeline）是Flash中最重要的工具之一。用它可以查看每一幀的情況，調(diào)整動(dòng)畫(huà)播放的速度，安排幀的內(nèi)容，改變幀與幀之間的關(guān)系

31、，從而實(shí)現(xiàn)不同效果的動(dòng)畫(huà)。 5符號(hào)和實(shí)例 符號(hào)（Symbol）是指一種可以重復(fù)使用的圖形、動(dòng)畫(huà)、按鈕或聲音資源，存放在符號(hào)庫(kù)中。使用的時(shí)候?qū)⒎?hào)從符號(hào)庫(kù)中拖拽到舞臺(tái)工作區(qū)中，就得到了符號(hào)的一個(gè)實(shí)例（Instance）?？梢园逊?hào)想象成一個(gè)源文件，它的實(shí)例是它在不同地方的復(fù)制。 二、運(yùn)動(dòng)和形狀漸變動(dòng)畫(huà)二、運(yùn)動(dòng)和形狀漸變動(dòng)畫(huà) 1 1運(yùn)動(dòng)漸變動(dòng)畫(huà)運(yùn)動(dòng)漸變動(dòng)畫(huà) 運(yùn)動(dòng)漸變動(dòng)畫(huà)（Motion Tweening）可以使對(duì)象產(chǎn)生移動(dòng)、旋轉(zhuǎn)、縮放、變化速度等動(dòng)畫(huà)效果。它的作用對(duì)象是實(shí)例、群組對(duì)象、文字對(duì)象、位圖對(duì)象等，不能作用于矢量圖形對(duì)象，但可以將矢量圖形轉(zhuǎn)換成符號(hào)的實(shí)例。 下面，制作內(nèi)部填充部分播放電影效果

32、的文字，使文字的填充部分產(chǎn)生不斷的效果。實(shí)現(xiàn)步驟如下：(1) 選擇菜單“文件”|“新建”，創(chuàng)建一個(gè)新文檔。 Flash文檔的屬性面板 (2) 在屬性面板（如上圖所示）上選擇“大小”按鈕，彈出文檔屬性設(shè)置對(duì)話框，設(shè)置工作區(qū)寬度為320px，高度為90px，設(shè)置完畢，點(diǎn)擊OK按鈕。 文檔屬性對(duì)話框 (3) 點(diǎn)擊工具欄中“文本工具”按鈕 ，將文本屬性面板中字體類型設(shè)置成“隸書(shū)”，字體大小為30，粗體顯示，如下圖所示。然后在工作區(qū)域中單擊鼠標(biāo)，在出現(xiàn)的黑框中輸入文字“計(jì)算機(jī)工程系”。 文本屬性面板 (4) 選擇工具欄中的 箭頭工具，將文字選中并把它移動(dòng)到工作區(qū)中間，如下圖所示。 文本已移動(dòng)到工作區(qū)中間

33、 (5) 單擊等時(shí)線窗口下方的 按鈕，增加一個(gè)新圖層Layer2，如下圖所示。增加圖像圖層 (6) 選擇菜單“文件”|“導(dǎo)入”|“導(dǎo)入到舞臺(tái)”，彈出導(dǎo)入文件對(duì)話框，從對(duì)話框中選擇用于填充文字的圖片名稱，然后單擊打開(kāi)按鈕，在工作區(qū)中即調(diào)入所選圖片。(7) 選擇菜單“修改”|“轉(zhuǎn)換為元件”，在彈出的對(duì)話框（下圖）中輸入名稱“計(jì)算機(jī)工程系”，點(diǎn)擊確定。這時(shí)，將發(fā)現(xiàn)這張圖已經(jīng)轉(zhuǎn)化成一個(gè)元件計(jì)算機(jī)工程系了。 (8) 用鼠標(biāo)左鍵按住圖層1并把它拖到圖層2上方放開(kāi)，這時(shí)將看到圖層1已經(jīng)位于圖層2上方了。(9) 選中圖層1的第30幀，點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇“插入幀”項(xiàng)。 將“exa2-1.jpg”轉(zhuǎn)

34、換為圖形 (10) 選擇工具欄中的箭頭工具 ，把元件“計(jì)算機(jī)工程系”拖動(dòng)到元件的左端，如左下圖所示。然后選中該層的第30幀，用鼠標(biāo)右鍵單擊該幀，在彈出的菜單中選擇“插入關(guān)鍵幀”， 即在第30幀處插入一個(gè)關(guān)鍵幀，把該幀的圖像拖動(dòng)到元件的右端，如圖右下所示。 在第1幀時(shí)設(shè)置圖像的位置 在第30幀時(shí)設(shè)置圖像的位置 (11) 選中圖層2的第一幀，點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇“創(chuàng)建補(bǔ)空動(dòng)畫(huà)”。這表示元件“計(jì)算機(jī)工程系”將從第1幀的位置移動(dòng)到第30幀的位置。(12) 用鼠標(biāo)右鍵單擊Layer1層，在彈出的菜單中選擇“遮罩層”項(xiàng)，這時(shí)圖層1將變成蒙板層，并對(duì)圖層2產(chǎn)生蒙板作用，如下圖所示。 時(shí)間幀及圖層

35、的設(shè)置 (13) 選擇菜單“控制”|“播放”，打開(kāi)播放器窗口，可以看到文字“計(jì)算機(jī)工程系”產(chǎn)生循環(huán)播放電影的效果。2 2形狀漸變動(dòng)畫(huà)（略）形狀漸變動(dòng)畫(huà)（略）形狀漸變動(dòng)畫(huà)就是由一種對(duì)象逐漸變?yōu)榱硗庖环N對(duì)象，可以使對(duì)象完成變形、移動(dòng)、縮放及色彩變化等動(dòng)畫(huà)效果。它的作用對(duì)象只能是矢量圖形。除非把其他對(duì)象打碎成矢量圖形。利用形狀漸變動(dòng)畫(huà)實(shí)現(xiàn)從一個(gè)圖形到另一個(gè)圖形之間從色彩到形狀的過(guò)渡變化。 三、制作層動(dòng)畫(huà)（略）三、制作層動(dòng)畫(huà)（略）圖層的作用不僅只是在繪制圖形時(shí)可以不影響其他對(duì)象，而且通過(guò)圖層，可以創(chuàng)建出一些令人驚奇的動(dòng)畫(huà)效果。例如：可以使用遮罩圖層來(lái)創(chuàng)建如電影文字、圖像文字、探照燈、淡入淡出或顏色轉(zhuǎn)變

36、的效果，也可以能過(guò)在運(yùn)動(dòng)導(dǎo)向圖層中創(chuàng)建一些不規(guī)則曲線，使符號(hào)沿此曲線而產(chǎn)生運(yùn)動(dòng)。 一、一、 表格表格 在Dreamweaver中對(duì)表格的操作方法與Word中非常類似，只是在Dreamweaver中，表格還有更重要的作用頁(yè)面布局。使用表格可以進(jìn)行頁(yè)面的設(shè)計(jì)和排版，控制文本和圖像在頁(yè)面上的位置，另外使用表格能使頁(yè)面看起來(lái)更加直觀和有條理。 2.5 2.5 利用表格和框架制作網(wǎng)頁(yè)利用表格和框架制作網(wǎng)頁(yè) 設(shè)計(jì)一個(gè)頁(yè)面布局簡(jiǎn)單示意圖: 一個(gè)表格嵌套在另一個(gè)表格中一個(gè)表格嵌套在另一個(gè)表格中創(chuàng)建基于表格的網(wǎng)頁(yè)可以依次按照下述步驟進(jìn)行： 1在頁(yè)面中創(chuàng)建表格操作步驟如下：(1) 把光標(biāo)定位在頁(yè)面的左上角（起始處

37、）。(2) 執(zhí)行以下操作之一，打開(kāi)“插入表格”對(duì)話框，如下圖所示。 在菜單欄中選擇“插入記錄 ”|“表格”命令。 在屬性面板上單擊 按鈕。2在表格中插入頁(yè)面元素 利用前面所學(xué)知識(shí)，直接在相應(yīng)的表格中輸入內(nèi)容；單元格中的頁(yè)面元素可以文本、圖像甚至表格，還可以給文本和圖像添加超級(jí)鏈接。在單元格中插入表格稱為表格嵌套。3設(shè)置表格屬性 無(wú)論對(duì)表格操作還是對(duì)單元格操作，都必須先選中再操作才可生效。這里先來(lái)認(rèn)識(shí)單元格屬性面板。當(dāng)光標(biāo)定位在單元格中或是選中單元格時(shí)，屬性面板即為單元格的屬性面板，如圖2-48所示。單元格屬性面板的上半部是文本的屬性面板，可以用來(lái)設(shè)置單元格中文本的字體、字號(hào)、顏色等屬性。 單元

38、格屬性面板的下半部是高級(jí)屬性設(shè)置選項(xiàng):（1） 合并單元格：當(dāng)在表格中選擇了個(gè)以上的單元格時(shí)，該按鈕才起作用。（2） 拆分單元格：當(dāng)在表格中選擇了個(gè)以上的單元格時(shí)，該按鈕才起作用。 單位格屬性面板單位格屬性面板: : （3）水平：在該下拉列表中選擇單元格內(nèi)容的水平對(duì)齊方式，如左下圖所示。（4）垂直：在該下拉列表中選擇單元格內(nèi)容的垂直對(duì)齊方式，如右下圖所示。 （5）高：?jiǎn)卧竦母叨?。?）寬：?jiǎn)卧竦膶挾?。?）不換行：不勾選，文本將自動(dòng)換行； 勾選，則當(dāng)文本的長(zhǎng)度超過(guò)單元格的 寬度時(shí)，文本將繼續(xù)向前，單元格的 寬度會(huì)隨之調(diào)整。（8）標(biāo)題：?jiǎn)卧裰械奈谋緯?huì)變粗并向中間移動(dòng)。（9）背景（上）：?jiǎn)卧?/p>

39、的背景圖像。（10）背景（下）：?jiǎn)卧竦谋尘邦伾?（11）邊框：?jiǎn)卧竦倪吙蚓€顏色。 表格屬性面板上各選項(xiàng)的含義：當(dāng)選中表格時(shí)，屬性面板為表格的屬性面板 表格屬性面板的上半部是最基本的表格屬性，大部分與插入表格時(shí)的設(shè)置內(nèi)容相同，只是多了設(shè)置表格的命名、高度和表格的對(duì)齊方式。 （1）表格Id：給表格命名。（2）行：設(shè)置表格的行數(shù)。（3）列：設(shè)置表格的列數(shù)。（4）寬：設(shè)置表格的寬度。（5）高：設(shè)置表格的高度。（6）填充：設(shè)置單元格空白。（7）間距：設(shè)置單元格間距。（8）對(duì)齊：設(shè)置對(duì)齊方式。（9）邊框：設(shè)置表格的邊框線。 表格屬性的下半部是高級(jí)屬性：（10） 清除各行的高度。（11） 清除各列的寬度。（12） 將當(dāng)前表格的寬度尺寸從百分比轉(zhuǎn)換到相應(yīng)的像素值。（13） 將當(dāng)前表格的寬度尺寸從像素值轉(zhuǎn)換到相應(yīng)的百分比。（14）背景顏色：背景顏色（15）背景圖像：背景圖