1、第2章 靜態(tài)網(wǎng)頁(yè)的制作,Web編程實(shí)用技術(shù)教程,學(xué)習(xí)目標(biāo),了解網(wǎng)頁(yè)制作工具（Dreamweaver、Flash）的簡(jiǎn)單使用方法，用之制作靜態(tài)網(wǎng)頁(yè)； 學(xué)會(huì)將Dreamweaver作為開發(fā)Web程序的平臺(tái)； 掌握超級(jí)鏈接的創(chuàng)建； 學(xué)會(huì)利用表格和框架進(jìn)行網(wǎng)頁(yè)布局； 學(xué)會(huì)使用HTML和XML語(yǔ)言編制網(wǎng)頁(yè)。,目 錄,2.1 常用的網(wǎng)頁(yè)制作工具,2.2 制作第一個(gè)簡(jiǎn)單網(wǎng)頁(yè),2.3 超文本和超圖像鏈接,2.4 網(wǎng)頁(yè)制作中的Flash動(dòng)畫,2.5 利用表格和框架制作網(wǎng)頁(yè),2.6 HTML與XML標(biāo)識(shí)語(yǔ)言,Dreamweaver是一套專業(yè)化的網(wǎng)頁(yè)創(chuàng)作工具，它采用“所見即所得”的可視化編輯方式，能夠快速高效地創(chuàng)建

2、各種具有專業(yè)水平的網(wǎng)頁(yè)，不需要編寫任何代碼。如果需要在代碼界面進(jìn)行工作，只需進(jìn)入HTML代碼窗口或源代碼檢視器中，就能同步看到Dreamweaver生成的源代碼。它支持最新的DHTML、CSS標(biāo)準(zhǔn)及分層技術(shù)，具有極好的兼容性，適用于各種平臺(tái)和各種瀏覽器。,2.1 常用的網(wǎng)頁(yè)制作工具 Dreamweaver,啟動(dòng)Dreamweaver程序 在“開始”菜單的“所有程序”中找到“Adobe Dreamweaver CS3”，并單擊該命令。Dreamweaver將立即啟動(dòng)，在“文檔”窗口內(nèi)將打開一個(gè)空白文檔，如下圖所示。,2. Dreamweaver的用戶界面 Dreamweaver由頁(yè)面編輯器和站點(diǎn)

3、管理器兩大部分組成。下圖所示的是Dreamweaver的頁(yè)面編輯器，包括頁(yè)面編輯窗口和各種浮動(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)菜單，打開對(duì)應(yīng)的下拉菜單，可選擇下拉菜單中的操作命令。面板上的各個(gè)操作按鈕基本上都有菜單操作命令與之相對(duì)應(yīng)。, 工具欄：放置常用工具。如：左邊第一個(gè)按鈕用于切換到HTML

4、代碼窗口，第二個(gè)按鈕切換到HTML代碼視圖和頁(yè)面設(shè)計(jì)視圖雙狀態(tài)同步窗口，第三個(gè)按鈕則切換到頁(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è)的小按鈕，在打開的菜單中，可以根據(jù)顯示器屏幕的分辨率選擇不同的顯示尺寸

5、。 下載指示器：顯示當(dāng)前網(wǎng)頁(yè)的文件量大小，以及網(wǎng)頁(yè)被下載所需要的時(shí)間，單位是*k/*秒。,(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)了“所見即所得”的編輯功能。 浮動(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)

6、內(nèi)的文件和目錄，可對(duì)站點(diǎn)內(nèi)的文件進(jìn)行改名、編輯和刪除等基本操作，并可檢驗(yàn)對(duì)象的鏈接情況，自動(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 制作第一個(gè)簡(jiǎn)單網(wǎng)頁(yè),實(shí)現(xiàn)步驟如下： 首先啟動(dòng)Dreamweaver，打開前面所建立的本地站點(diǎn)，接著在頁(yè)面中插入各種基本的網(wǎng)頁(yè)元素。 一、基本網(wǎng)頁(yè)元素（文字、圖像、水平線、日期和時(shí)間）的插入 1. 在頁(yè)面中添加和處理文字 (1) 在頁(yè)面

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

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

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

10、代碼。 用相同的方法設(shè)置下面文本的顏色。 (5) 將最后的5行文本組成一個(gè)項(xiàng)目列表，操作步驟如下： 首先選中最后5行文本； 打開屬性面板，單擊按鈕 ，則最后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”文本； 在屬性面板上單擊按鈕 ，打開快速標(biāo)簽編輯器；, 在光標(biāo)處直接輸入“marquee”，或稍等一會(huì)，在出現(xiàn)的下拉列表中選擇“m

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

12、12預(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ì)齊”按鈕，在下

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

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

15、，寬度設(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è)置為黃色，操作步驟如下： 選中上面所插入的水平線； 單擊水平線屬性面板的 按鈕，打開快速標(biāo)簽編輯器； 在標(biāo)簽中插入屬性color=“#FFFF00”或color=“yellow”； 按F12預(yù)覽，便可看到水平線是黃色。,. 插入日期和時(shí)間 在頁(yè)面中插入日期和時(shí)間，操作步驟如下：

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

17、中增添網(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í)，在瀏覽器窗口、歷史記錄和書簽列表中標(biāo)識(shí)了頁(yè)面。,2. 增添網(wǎng)頁(yè)背景 網(wǎng)頁(yè)背景分為網(wǎng)頁(yè)背景顏色和背景圖像，其操作步驟如下： 在“頁(yè)面屬性”對(duì)話框的“分類”選項(xiàng)中選擇“外觀”，在其選項(xiàng)卡中單擊“背景顏色”按鈕，在“顏色”調(diào)色板中用吸管吸取想要的背景顏色即可。 在“外觀”選項(xiàng)卡中，單擊“背景圖像”文本框右邊的“瀏覽”按鈕，在“選擇圖像源文件”對(duì)話框中選擇喜歡的背

18、景圖像，然后單擊“確定”按鈕即可。,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í)鏈接 1. 創(chuàng)建內(nèi)部超級(jí)鏈接 創(chuàng)建內(nèi)部超級(jí)鏈接就是在同一個(gè)站點(diǎn)內(nèi)的不同頁(yè)面之間建立一定的相互關(guān)系。被鏈接的對(duì)象不僅可以是網(wǎng)頁(yè)，還可以是其他文檔（如：Microsoft Office 文檔）或文件（如圖像、聲音、視頻文件等）。創(chuàng)建內(nèi)部超級(jí)鏈接，

19、執(zhí)行下列操作之一： (1) 選中“學(xué)生專區(qū)”，在屬性面板中單擊“鏈接”右邊的“瀏覽文件”按鈕 （如下圖所示），選中相應(yīng)的文件“exa2-2.htm”即可；,2.3 超文本和超圖像鏈接,(2) 選中“教師專區(qū)”，在屬性面板中單擊“指向文件”按鈕，并直接拖拽鼠標(biāo)，此時(shí)屏幕上會(huì)出現(xiàn)一條跟蹤直線（如下圖所示），移動(dòng)鼠標(biāo)到站點(diǎn)管理器中所要鏈接的目標(biāo)文件“exa2-3.htm”上，當(dāng)該文件被一個(gè)虛線框包圍時(shí)松開鼠標(biāo)； (3) 選中“系部專區(qū)”，在屬性面板上的“鏈接”文本框中直接輸入被鏈接的文件相對(duì)路徑及文件名（exa2-5.htm）； (4) 選中“辦公自動(dòng)化”，單擊右鍵，從快捷菜單中選擇“創(chuàng)建鏈接”，然

20、后選擇一個(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)址（如：）即可。如果想在新的瀏覽器窗口中打開鏈接文件，只需在設(shè)置了超級(jí)鏈接之后，在屬性面板上的“目標(biāo)”項(xiàng)中進(jìn)行設(shè)置，選擇“_blank”即可。,(2) 要在頁(yè)面中創(chuàng)建E-mail鏈接，有兩種方法： 選中“與我聯(lián)系”文本，然后在插入面板中單擊 按鈕或在菜單欄中選擇“插入記

21、錄 ”“電子郵件鏈接”命令，打開 “電子郵件鏈接”對(duì)話框，在該對(duì)話框的“文本”文本框中已自動(dòng)填寫了被選中的文本“與我聯(lián)系”，只需在“E-mail”文本框中輸入電子郵件地址即可。, 選中“與我聯(lián)系”文本，然后在文本屬性面板上的“鏈接”文本框中直接輸入“mailto:”后加上電子郵件地址（如：mailto:liFox）即可；,二、熱區(qū)和圖像 1. 熱區(qū) 圖像映射圖是指在一張圖像上實(shí)現(xiàn)多個(gè)局部區(qū)域指向不同的網(wǎng)頁(yè)鏈接，而圖像上可點(diǎn)擊的區(qū)域被稱為熱區(qū)。 制作熱區(qū)： 新建一個(gè)網(wǎng)頁(yè)，在網(wǎng)頁(yè)中插入一個(gè)圖像； 單擊圖像，此時(shí)屬性面板上顯示的是有關(guān)圖像的屬性。在該面板上有“地圖”一項(xiàng)，用它來(lái)制作熱區(qū)，在其文本框中

22、可填寫熱區(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ū)屬性面板上，除了 “地圖”外，還有“鏈接”、“替代”及“目標(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)移到

23、“圖像”上時(shí)，圖像就變成另一幅圖像；當(dāng)單擊時(shí)，便鏈接到其他的網(wǎng)頁(yè)文件。操作步驟如下： 打開“exa2-1.htm”文件，將其另存為“exa2-3-1.htm”文件； 在網(wǎng)頁(yè)中，刪除“學(xué)生專區(qū)”等所有的欄目文本； 要想打開“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，執(zhí)行下列操作之一： 在菜單欄中選擇“插入記錄”“圖像對(duì)象”“鼠標(biāo)經(jīng)過(guò)圖像”命令； 在插入面板上的“圖像” 列表中選擇“鼠標(biāo)經(jīng)過(guò)圖像”選項(xiàng) ，打開“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框，如圖2-33所示；,在對(duì)話框中，單擊“原始圖像”右邊的“瀏覽”按鈕，選取第一次加載該頁(yè)面時(shí)要顯示的圖像；然后，點(diǎn)擊“鼠標(biāo)經(jīng)過(guò)圖像”右邊的“瀏覽”按鈕，選取當(dāng)鼠標(biāo)經(jīng)過(guò)原始圖像時(shí)要顯示

24、的圖像；點(diǎn)擊“在按下時(shí)，前往的URL” 右邊的“瀏覽”按鈕，選取點(diǎn)擊鼠標(biāo)經(jīng)過(guò)圖像時(shí)將打開的網(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í)行下列方法之一，打開“插入導(dǎo)航條”對(duì)話框： 在菜單中選擇“插入記錄”“圖像對(duì)象”“導(dǎo)航條”命令； 在插入面板上的“圖像” 列表中選擇“導(dǎo)航條”選項(xiàng) 。,從“插入導(dǎo)航條”對(duì)話框中看到一個(gè)元件最多有下列4種狀態(tài)的圖像： 狀態(tài)圖像：又稱為初始圖像，指鼠標(biāo)未移到元件上時(shí)所顯示的圖像。

25、 鼠標(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)畫和電影的軟件，用它可以制作出一種擴(kuò)展名為.swf的動(dòng)畫文件，這種文件可以插入HTML，也可以單獨(dú)生成網(wǎng)頁(yè)。,一、Flash的幾個(gè)重要概念,1Flash動(dòng)畫的格式 在掌握使用Flash動(dòng)畫之前，有必要先來(lái)了解一下Flash動(dòng)畫的幾種格式。,2.4 網(wǎng)

26、頁(yè)制作中的Flash動(dòng)畫,(1) Flash源文件格式： Flash源文件格式的擴(kuò)展名為.fla，這種類型的文件只能在Flash應(yīng)用程序中被打開，在Dreamweaver或?yàn)g覽器中都是無(wú)法打開的。用戶可以在Flash應(yīng)用程序中打開該文件，然后導(dǎo)出擴(kuò)展名為.swf或.swt的文件，以便在瀏覽器中使用。 (2) Flash電影文件格式： Flash電影文件格式的擴(kuò)展名為.swf。它是Flash源文件的壓縮版本，已經(jīng)為通過(guò)網(wǎng)絡(luò)查看而進(jìn)行了優(yōu)化。因此，這種類型的文件可以在瀏覽器中播放，也可以在Dreamweaver中預(yù)覽，但是卻無(wú)法在Flash應(yīng)用程序中進(jìn)行編輯。在Dreamweaver中允許用戶直接

27、插入Flash動(dòng)畫對(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)表示圖像的形狀和色彩，有多大的圖像就要用多大的像素來(lái)填充。因此，位圖的文件所占的體積比較大。常用的位圖文件格式為bmp、gif、jpg等。,3舞臺(tái)和工作區(qū) 舞臺(tái)（Stage）是繪制圖形、編輯圖形、圖像的矩形區(qū)域，也是創(chuàng)建電影動(dòng)畫的區(qū)域。用戶在制作動(dòng)畫的過(guò)

28、程中，放置在舞臺(tái)中的內(nèi)容將體現(xiàn)在最終的動(dòng)畫效果中。其默認(rèn)顏色是白色。 工作區(qū)（Work Area）則環(huán)繞于舞臺(tái)的四周，其默認(rèn)顏色為灰色。它在實(shí)際動(dòng)畫制作過(guò)程中非常有用，制作者可以先將暫不參與動(dòng)畫內(nèi)容放置在工作區(qū)內(nèi)，這并不影響舞臺(tái)內(nèi)動(dòng)畫內(nèi)容的播放。當(dāng)需要播放工作區(qū)內(nèi)的動(dòng)畫時(shí)，只要將其移動(dòng)到舞臺(tái)中即可。,4幀和時(shí)間線 “幀”是組成動(dòng)畫的最基本單位，即圖像在某一時(shí)間點(diǎn)上的定格。幀又分為關(guān)鍵幀（Keyframe）和普通幀（Frame）兩種。 (1) 關(guān)鍵幀： 在Flash中，一般的動(dòng)畫都是依靠關(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)生成中間幀

29、，來(lái)實(shí)現(xiàn)關(guān)鍵幀之間變化的動(dòng)畫。,(2) 普通幀： 除了關(guān)鍵幀外，所有出現(xiàn)在時(shí)間軸中的幀都是普通幀。在Flash中，普通幀一般用來(lái)代表中間的畫面，也就是在兩個(gè)關(guān)鍵幀之間的幀。這些幀用來(lái)表示漸變的過(guò)程，并且由于是程序自動(dòng)生成，所以無(wú)法編輯。 時(shí)間線（Timeline）是Flash中最重要的工具之一。用它可以查看每一幀的情況，調(diào)整動(dòng)畫播放的速度，安排幀的內(nèi)容，改變幀與幀之間的關(guān)系，從而實(shí)現(xiàn)不同效果的動(dòng)畫。,5符號(hào)和實(shí)例 符號(hào)（Symbol）是指一種可以重復(fù)使用的圖形、動(dòng)畫、按鈕或聲音資源，存放在符號(hào)庫(kù)中。使用的時(shí)候?qū)⒎?hào)從符號(hào)庫(kù)中拖拽到舞臺(tái)工作區(qū)中，就得到了符號(hào)的一個(gè)實(shí)例（Instance）?？梢园?/p>

30、符號(hào)想象成一個(gè)源文件，它的實(shí)例是它在不同地方的復(fù)制。,二、運(yùn)動(dòng)和形狀漸變動(dòng)畫 1運(yùn)動(dòng)漸變動(dòng)畫 運(yùn)動(dòng)漸變動(dòng)畫（Motion Tweening）可以使對(duì)象產(chǎn)生移動(dòng)、旋轉(zhuǎn)、縮放、變化速度等動(dòng)畫效果。它的作用對(duì)象是實(shí)例、群組對(duì)象、文字對(duì)象、位圖對(duì)象等，不能作用于矢量圖形對(duì)象，但可以將矢量圖形轉(zhuǎn)換成符號(hào)的實(shí)例。,下面，制作內(nèi)部填充部分播放電影效果的文字，使文字的填充部分產(chǎn)生不斷的效果。,實(shí)現(xiàn)步驟如下： (1) 選擇菜單“文件”|“新建”，創(chuàng)建一個(gè)新文檔。,Flash文檔的屬性面板,(2) 在屬性面板（如上圖所示）上選擇“大小”按鈕，彈出文檔屬性設(shè)置對(duì)話框，設(shè)置工作區(qū)寬度為320px，高度為90px，設(shè)置

31、完畢，點(diǎn)擊OK按鈕。,文檔屬性對(duì)話框,(3) 點(diǎn)擊工具欄中“文本工具”按鈕 ，將文本屬性面板中字體類型設(shè)置成“隸書”，字體大小為30，粗體顯示，如下圖所示。然后在工作區(qū)域中單擊鼠標(biāo)，在出現(xiàn)的黑框中輸入文字“計(jì)算機(jī)工程系”。,文本屬性面板,(4) 選擇工具欄中的 箭頭工具，將文字選中并把它移動(dòng)到工作區(qū)中間，如下圖所示。,文本已移動(dòng)到工作區(qū)中間,(5) 單擊等時(shí)線窗口下方的 按鈕，增加一個(gè)新圖層Layer2，如下圖所示。,增加圖像圖層,(6) 選擇菜單“文件”|“導(dǎo)入”|“導(dǎo)入到舞臺(tái)”，彈出導(dǎo)入文件對(duì)話框，從對(duì)話框中選擇用于填充文字的圖片名稱，然后單擊打開按鈕，在工作區(qū)中即調(diào)入所選圖片。 (7)

32、選擇菜單“修改”|“轉(zhuǎn)換為元件”，在彈出的對(duì)話框（下圖）中輸入名稱“計(jì)算機(jī)工程系”，點(diǎn)擊確定。這時(shí)，將發(fā)現(xiàn)這張圖已經(jīng)轉(zhuǎn)化成一個(gè)元件計(jì)算機(jī)工程系了。,(8) 用鼠標(biāo)左鍵按住圖層1并把它拖到圖層2上方放開，這時(shí)將看到圖層1已經(jīng)位于圖層2上方了。 (9) 選中圖層1的第30幀，點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇“插入幀”項(xiàng)。,將“exa2-1.jpg”轉(zhuǎn)換為圖形,(10) 選擇工具欄中的箭頭工具 ，把元件“計(jì)算機(jī)工程系”拖動(dòng)到元件的左端，如左下圖所示。然后選中該層的第30幀，用鼠標(biāo)右鍵單擊該幀，在彈出的菜單中選擇“插入關(guān)鍵幀”， 即在第30幀處插入一個(gè)關(guān)鍵幀，把該幀的圖像拖動(dòng)到元件的右端，如圖右下所示

33、。,在第1幀時(shí)設(shè)置圖像的位置,在第30幀時(shí)設(shè)置圖像的位置,(11) 選中圖層2的第一幀，點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇“創(chuàng)建補(bǔ)空動(dòng)畫”。這表示元件“計(jì)算機(jī)工程系”將從第1幀的位置移動(dòng)到第30幀的位置。 (12) 用鼠標(biāo)右鍵單擊Layer1層，在彈出的菜單中選擇“遮罩層”項(xiàng)，這時(shí)圖層1將變成蒙板層，并對(duì)圖層2產(chǎn)生蒙板作用，如下圖所示。,時(shí)間幀及圖層的設(shè)置,(13) 選擇菜單“控制”|“播放”，打開播放器窗口，可以看到文字“計(jì)算機(jī)工程系”產(chǎn)生循環(huán)播放電影的效果。 2形狀漸變動(dòng)畫（略） 形狀漸變動(dòng)畫就是由一種對(duì)象逐漸變?yōu)榱硗庖环N對(duì)象，可以使對(duì)象完成變形、移動(dòng)、縮放及色彩變化等動(dòng)畫效果。它的作用對(duì)象

34、只能是矢量圖形。除非把其他對(duì)象打碎成矢量圖形。 利用形狀漸變動(dòng)畫實(shí)現(xiàn)從一個(gè)圖形到另一個(gè)圖形之間從色彩到形狀的過(guò)渡變化。,三、制作層動(dòng)畫（略） 圖層的作用不僅只是在繪制圖形時(shí)可以不影響其他對(duì)象，而且通過(guò)圖層，可以創(chuàng)建出一些令人驚奇的動(dòng)畫效果。例如：可以使用遮罩圖層來(lái)創(chuàng)建如電影文字、圖像文字、探照燈、淡入淡出或顏色轉(zhuǎn)變的效果，也可以能過(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è)面上的位置，

35、另外使用表格能使頁(yè)面看起來(lái)更加直觀和有條理。,2.5 利用表格和框架制作網(wǎng)頁(yè),設(shè)計(jì)一個(gè)頁(yè)面布局簡(jiǎn)單示意圖:,Web 頁(yè)可用兩個(gè)表格精確地確定文本和圖象的位置。,一個(gè)表格嵌套在另一個(gè)表格中,外部表格：定義頁(yè)面的整體結(jié)構(gòu)和布局。 內(nèi)部表格：描述正文文本與其他內(nèi)容的 排列方式。,創(chuàng)建基于表格的網(wǎng)頁(yè)可以依次按照下述步驟進(jìn)行：,1在頁(yè)面中創(chuàng)建表格 操作步驟如下： (1) 把光標(biāo)定位在頁(yè)面的左上角（起始處）。 (2) 執(zhí)行以下操作之一，打開“插入表格”對(duì)話框，如下圖所示。 在菜單欄中選擇“插入記錄 ”|“表格”命令。 在屬性面板上單擊 按鈕。,2在表格中插入頁(yè)面元素 利用前面所學(xué)知識(shí)，直接在相應(yīng)的表格中輸

36、入內(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)、顏色等屬性。,單元格屬性面板的下半部是高級(jí)屬性設(shè)置選項(xiàng): （1） 合并單元格：當(dāng)在表格中選擇了個(gè)以上的單元格時(shí)，該按鈕才起作用。 （2） 拆分單元格：當(dāng)在表格中選擇了個(gè)以上的單元格時(shí)，該按鈕才起作用。,單位格屬性面板

37、:,（3）水平：在該下拉列表中選擇單元格內(nèi)容的水平對(duì)齊方式，如左下圖所示。 （4）垂直：在該下拉列表中選擇單元格內(nèi)容的垂直對(duì)齊方式，如右下圖所示。,（5）高：?jiǎn)卧竦母叨取?（6）寬：?jiǎn)卧竦膶挾取?（7）不換行：不勾選，文本將自動(dòng)換行； 勾選，則當(dāng)文本的長(zhǎng)度超過(guò)單元格的 寬度時(shí)，文本將繼續(xù)向前，單元格的 寬度會(huì)隨之調(diào)整。 （8）標(biāo)題：?jiǎn)卧裰械奈谋緯?huì)變粗并向中間移動(dòng)。 （9）背景（上）：?jiǎn)卧竦谋尘皥D像。 （10）背景（下）：?jiǎn)卧竦谋尘邦伾?（11）邊框：?jiǎn)卧竦倪吙蚓€顏色。,表格屬性面板上各選項(xiàng)的含義： 當(dāng)選中表格時(shí)，屬性面板為表格的屬性面板,表格屬性面板的上半部是最基本的表格屬性，大

38、部分與插入表格時(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）背景圖像：背景圖

39、像 （16）邊框顏色：表格邊框的顏色,二、框架 框架結(jié)構(gòu)也稱為多窗口頁(yè)面(Frames)，窗口也可以稱為幀（Frame），是設(shè)計(jì)網(wǎng)頁(yè)時(shí)非常有用的工具。它可以把瀏覽器窗口劃分為若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)，從而使用戶能夠一次瀏覽更多的內(nèi)容。,一個(gè)典型的框架結(jié)構(gòu)頁(yè)面,瀏覽網(wǎng)頁(yè)時(shí)，單擊左邊的某個(gè)鏈接，則對(duì)應(yīng)的鏈接內(nèi)容便顯示在右邊，而上邊的網(wǎng)站標(biāo)志和左邊的導(dǎo)航欄目?jī)?nèi)容仍然留在屏幕上； 當(dāng)單擊“搜狐”時(shí)，將打開一個(gè)新的窗口顯示該網(wǎng)站的主頁(yè)。 該實(shí)例實(shí)質(zhì)上是一個(gè)應(yīng)用了頂部和左側(cè)嵌套的框架結(jié)構(gòu)的網(wǎng)頁(yè)。這種框架結(jié)構(gòu)的頁(yè)面被分成了3個(gè)區(qū)域，每一個(gè)區(qū)域都是一個(gè)框架，而這些框架的集合稱為框架集（Frameset）。同時(shí)，每個(gè)框架都包含一個(gè)網(wǎng)頁(yè)，但卻用到了4個(gè)網(wǎng)頁(yè)，即3個(gè)Frame網(wǎng)頁(yè)（分別為t