HTML和中文DreamweaverMX2004實用教程第3章

第3章在網頁中插入對象

本章要點3.1“圖書導讀”網頁3.2再做“動畫放映室”網頁3.3“豆豆的收藏”網頁3.4“FLASH簡介”網頁3.5“日落奇山”網頁3.6“風景幻燈”網頁3.7“旋轉的地球”網頁3.8“考試安排”網頁3.9調整“考試安排”網頁3.10“照相館”網頁習題33.1“圖書導讀”網頁

“圖書導讀”網頁的顯示效果如圖3-1-1所示。在該網頁中插入了一個導航條，在導航條中包含了7幅圖像，當鼠標移到其中任意一幅圖像上時，該圖像變?yōu)椤皢螕暨M入”文字，如圖3-1-1所示。單擊該圖像按鈕即可鏈接到相應的網頁。

圖3-1-1“圖書導讀”網頁的顯示效果3.1“圖書導讀”網頁

3.1.1“插入導航條”對話框中各選項的含義導航條實際上是一組動態(tài)圖像按鈕，單擊它后，可在瀏覽器中調出HTML文件和其他文件（如圖像）。單擊“插入”（常用）欄“圖像”快捷菜單中的“導航條”按鈕，調出“插入導航條”對話框，如圖3-1-2所示，其中各選項的作用如下。（1）“導航條元件”列表框：給出導航條中各個動態(tài)圖像按鈕的名稱（默認為圖像的名稱）。單擊按鈕，可以增加動態(tài)圖像按鈕；選中動態(tài)圖像按鈕名稱，再單擊按鈕，可刪除該按鈕；選中動態(tài)圖像按鈕名稱，再單擊按鈕或按鈕，可改變動態(tài)圖像按鈕在導航條中的位置。（2）“項目名稱”文本框：用來輸入各動態(tài)圖像按鈕的名稱。（3）4個文本框與“瀏覽”按鈕：用于定義鼠標4種狀態(tài)時的圖像?！盃顟B(tài)圖像”是鼠標左鍵抬起狀態(tài)時的圖像，“鼠標經過圖像”是光標移到圖像之上時的圖像，“按下圖像”是鼠標按下時的圖像，“按下時鼠標經過圖像”是鼠標按下并經過圖像時的圖像。

3.1“圖書導讀”網頁

圖3-1-2“插入導航條”對話框3.1“圖書導讀”網頁

（4）“按下時，前往的URL”欄：用于輸入與動態(tài)按鈕鏈接的文件目錄和名字，單擊“瀏覽”按鈕后可選擇鏈接的文件。在其右邊的列表框內可選擇顯示鏈接的頁面的框架名稱。（5）“選項”欄：“預先載入圖像”復選框用于確定是否要預先載入各個圖像；頁面載入時就顯示“鼠標按下圖像”復選框用于確定是否要在頁面載入的初始狀態(tài)時顯示鼠標按下狀態(tài)的圖像。（6）“插入”下拉列表框：用于選擇按鈕放置的方式。選擇“水平”列表項，表示水平放置；選擇“垂直”列表項，表示垂直放置。（7）“使用表格”復選框：選中該復選框后，表示使用表格將動態(tài)按鈕框起來。3.1.2插入水平線在頁面內可以利用水平分割線將標題與文字或圖像等對象分割，使頁面的信息分布清晰。當然用線條圖像來分割，效果會更好些，但會使文件變大。加入水平線的方法如下所述。（1）單擊“插入”（HTML）欄中的“水平線”按鈕，即可在光標所在的行插入一條水平線，并調出水平線“屬性”面板，如圖3-1-3所示。

3.1“圖書導讀”網頁

圖3-1-3水平線的“屬性”欄3.1“圖書導讀”網頁

（2）在水平線“屬性”面板中的“寬”文本框內輸入水平線的水平長度數值，在“高”文本框內輸入水平線的垂直寬度數值，單位有像素和百分數（%）兩種選擇。在“對齊”下拉列表框內選擇“默認”、“左對齊”、“居中”對齊或“右對齊”選項。選中“陰影”復選框，則水平線是中空的；不選中“陰影”復選框，則水平線是亮實心的線。在“插入”（HTML）欄中還有一些按鈕，利用它們還可以在網頁中插入日期、換行符和電子郵件地址等。因為使用方法比較簡單，此處不再贅述。

3.2再做“動畫放映室”網頁在Dreamweaver中制作的“動畫放映室”網頁的顯示效果和在HTML文件中輸入HTML代碼的方法制作的“動畫放映室”網頁基本相同。在Dreamweaver的可視化界面中插入Flash動畫后即可查看動畫的顯示效果。在Dreamweaver中制作的“動畫放映室”網頁的顯示效果如圖3-2-1所示。

圖3-2-1“動畫放映室”網頁的顯示效果3.2再做“動畫放映室”網頁

Flash是Macromedia公司開發(fā)的另一個著名產品，它是一個優(yōu)秀的矢量繪圖和動畫制作軟件。Flash可以制作出一種擴展名為.swf的動畫文件，這種文件可以插到HTML里，也可以單獨成為網頁。Flash不但可以制作出一般的動畫，還可以制作出帶有背景聲音，具有較強的交互性能的動畫。Flash制作的這種動畫可以在所有安裝了ShockwaveFlash插件的瀏覽器中播放，這也是它之所以快速廣泛流行的一個重要原因。另外，1998年Macromedia公司公布了Flash動畫格式文件的全部代碼，方便了眾多軟件開發(fā)公司和其設計人員用它開發(fā)相關產品，從而加快了Flash的推廣與應用。各個公司和個人推出的可以制作.swf文件的軟件越來越多。3.2.1Flash對象“屬性”欄中各選項的含義圖3-2-2所示為Flash對象“屬性”欄的顯示效果?！皩傩浴睓谥懈鬟x項的作用如下。

3.2再做“動畫放映室”網頁（1）“Flash”文本框：用于輸入Flash影片對象的名字。該名字可以在腳本語言中使用。（2）“寬”與“高”文本框：用于輸入Flash影片對象的寬與高。（3）“文件”文本框與文件夾按鈕：用于選擇SWF格式的Flash影片文件。（4）“編輯”按鈕：單擊該按鈕，可調出FlashMX2004，并對Flash文件進行編輯。（5）“重設大小”按鈕：單擊該按鈕，可使Flash電影恢復原大小。（6）“循環(huán)”復選框：選中該復選框后，可循環(huán)播放。

圖3-2-2Flash對象的“屬性”欄3.2再做“動畫放映室”網頁

（7）“自動播放”復選框：選中該復選框后，加載網頁時，動畫可以自動播放。（8）“垂直邊距”文本框：用于設置Flash影片與邊框間垂直方向的空白量。（9）“水平邊距”文本框：用于設置Flash影片與邊框間水平方向的空白量。（10）“品質”下拉列表框：用于設置動畫的質量。（11）“比例”下拉列表框：用于選擇縮放參數。（12）“對齊”下拉列表框：用于設置Flash影片的對齊方式。（13）“背景顏色”文本框與按鈕：用于設置Flash影片的背景顏色。（14）“播放”按鈕：單擊該按鈕，可播放Flash影片。（15）“參數”按鈕：單擊該按鈕，可調出一個對話框，在該對話框中可以輸入附加參數，用于傳遞給Flash或Shockwave影片。

3.2再做“動畫放映室”網頁

3.2.2設置Flash影片的屬性執(zhí)行“窗口”→“標簽檢查器”菜單命令，可以調出“標簽”面板，如圖3-2-3所示。圖3-2-3“標簽”面板在該面板中可以設置Flash影片的屬性。該對話框中將Flash影片的屬性分為了“常規(guī)”、“內容”、“外觀”、“CSS/輔助功能”、“語言”和“未分類”6大類。在各個類別中又包含了一些具體的屬性內容。單擊任意一個屬性的名稱，即可設置或改變該屬性。

3.2再做“動畫放映室”網頁

圖3-2-3“標簽”面板3.3“豆豆的收藏”網頁

“豆豆的收藏”網頁的顯示效果如圖3-3-1所示。在該網頁中插入了一個圖像查看器，網頁加載時，頁面中顯示“圖像查看器”中的第一幅圖像，單擊按鈕或按鈕，即可顯示上一幅或下一幅圖像。單擊按鈕，即可自動播放所有圖像?！皥D像查看器”是DreamweaverMX2004新增加的一個功能。利用“圖像查看器”，可以導入圖像，創(chuàng)建一個Flash格式的圖像瀏覽器。在瀏覽器中可以依次瀏覽導入的圖像，在圖像切換時使用隨機的動態(tài)切換效果，如圖3-3-2所示。

3.3“豆豆的收藏”網頁

圖3-3-1

“豆豆的收藏”網頁的顯示效果

圖3-3-2

圖像的動態(tài)切換效果

3.3“豆豆的收藏”網頁

3.3.1在網頁中插入圖像查看器（1）將光標移到要插入“圖像查看器”的位置，再單擊“插入”（Flash元素）面板中的“圖像查看器”按鈕，調出“保存Flash元素”對話框。輸入SWF格式的文件名后，單擊“確定”按鈕，即可在網頁中插入圖像查看器對象。（2）執(zhí)行“窗口”→“標簽檢查器”菜單命令，調出“標簽”面板，如圖3-3-3所示。選中其中的“imageURLs”項目，然后單擊右邊的按鈕，調出“編輯imageURLs數組”對話框，如圖3-3-4所示。

3.3“豆豆的收藏”網頁

圖3-3-3“標簽”面板圖3-3-4“編輯imageURLs數組”對話框3.3“豆豆的收藏”網頁

（3）選中‘img1.jpg’項目，單擊后面的按鈕，調出“選擇文件”對話框，選擇要插入的圖像后單擊“確定”按鈕，插入圖像。利用同樣方法插入其他圖像。（4）單擊按鈕可插入一個新項目，單擊按鈕可刪除選中的項目。單擊“確定”按鈕，完成“圖像查看器”的設置。3.3.2“標簽”面板中各選項的含義“標簽”面板，如圖3-3-3所示，“標簽”面板中各選項的含義如下所述。（1）Bgcolor屬性：用于設置“圖像檢查器”的背景顏色。（2）Captioncolor屬性：用于設置“圖像檢查器”說明文字的顏色。（3）CaptionFont屬性：用于設置“圖像檢查器”說明文字的字體。（4）CaptionSize屬性：用于設置“圖像檢查器”說明文字的大小。（5）FrameColor屬性：用于設置“圖像檢查器”邊框的顏色。（6）FrameShow屬性：該屬性取值為“是”或者“否”，設置是否顯示邊框。（7）FrameThickness屬性：用于設置“圖像檢查器”邊框的寬度。（8）ImageCaptions屬性：用于設置圖像的標題。

3.3“豆豆的收藏”網頁

（9）ImageLinks屬性：用于設置圖像的連接。（10）ImageLinkTarget屬性：打開連接的窗口。（11）ImageURLs屬性：在“圖像檢查器”檢查器內插入圖像。（12）ShowConteols屬性：是否顯示控制器，取決于該屬性的取值為“是”或者“否”。（13）FlideAutoPlay屬性：初始狀態(tài)時是否自動播放圖像，該屬性的取值范圍為“是”或者“否”。（14）SlideLDelay屬性：切換圖像間隔的時間。（15）SlideLoop屬性：播放圖像時是否循環(huán)。圖3-3-5“編輯ImageLinks數組”對話框（16）Title屬性：用于設置“圖像檢查器”的標題名稱。（17）TitleColor屬性：用于設置“圖像檢查器”標題名稱的顏色。（18）TitleFont屬性：用于設置“圖像檢查器”標題名稱的字體。（19）TitleSize屬性：用于設置“圖像檢查器”標題名稱的字體大小。（20）TransitionsType屬性：用于設置圖像切換時的效果。此處可以設置包含None（無切換效果）和Randam（隨機切換效果）在內的12種切換效果。

3.4“FLASH簡介”網頁

在“FLASH簡介”網頁中介紹了FlashMXProfessional2004的基本功能。在該網頁中使用了Flash按鈕和Flash文字對象。在瀏覽器中打開該網頁后，當鼠標移到“插入FLASH動畫”按鈕上時的顯示效果如圖3-4-1所示，當鼠標移到介紹文字上面時的顯示效果如圖3-4-2所示。

圖3-4-1

“FLASH簡介”網頁的顯示效果

圖3-4-2

當鼠標移到Flash文字上面時的顯示效果

3.4“FLASH簡介”網頁

3.4.1“插入Flash按鈕”對話框單擊“插入”（常用）欄“媒體”快捷菜單中的“Flash按鈕”按鈕，調出“插入Flash按鈕”對話框，如圖3-4-3所示，其中各選項的含義如下。

圖3-4-3“插入Flash按鈕”對話框3.4“FLASH簡介”網頁

（1）“范例”顯示框：用于顯示所選的“Flsah按鈕”的效果，該顯示效果和在瀏覽器中的顯示效果相同，并且可以用鼠標測試“單擊”時的顯示效果。（2）“樣式”列表框：在該列表框中列出所有可以使用的Flash按鈕的樣式，可以從中選擇相應的樣式進行編輯。（3）“字體”下拉列表框：用于選擇要顯示文字的字體。（4）“大小”文本框：用于設置顯示文本的大小。（5）“鏈接”文本框：在該文本框中輸入需要鏈接的文件的目錄和文件名，也可以單擊“瀏覽”按鈕，在調出的“選擇文件”對話框中選擇需要鏈接的文件，設置鏈接。（6）“目標”下拉列表框：用于設置鏈接的網頁的打開方式，其中各選項作用如下。_blank：在一個新的瀏覽器窗口中打開鏈接的文檔。_parent：在框架的父框架或父窗口打開鏈接的文檔。_self：默認打開方式，將鏈接的文檔載入鏈接所在的同一框架或窗口。_top：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架。

3.4“FLASH簡介”網頁

（7）“背景色”按鈕：用于設置Flash按鈕的背景顏色。（8）“另存為”文本框：用于輸入要保存的目錄及文件名，或者單擊“瀏覽”按鈕，調出“選擇文件”對話框，利用該對話框選擇要保存的目錄和文件名，默認目錄為網頁文檔所在的目錄。圖3-4-4“插入Flash文本”對話框3.4.2“插入Flash文本”對話框單擊“插入”（常用）欄“媒體”快捷菜單中的“Flash文本”按鈕，調出“插入Flash文本”對話框，如圖3-4-4所示，其中各選項的含義如下所示。（1）“字體”下拉列表框：用于選擇要顯示文字的字體。（2）“大小”文本框：用于設置顯示文本的大小。（3）“樣式”按鈕欄：用于設置文字的樣式及對齊方式。（4）“顏色”欄：用于設置Flash文字的顏色。（5）“轉滾顏色”欄：用于設置當鼠標經過FLASH文本時的顏色。（6）“文本”文本框：輸入需要顯示的文本。（7）“顯示字體”復選框：在“文本”文本框中顯示文本使用的字體樣式。（8）“鏈接”欄：在文本框中輸入需要鏈接的文件地址或者單擊“瀏覽”按鈕，在“選擇文件”對話框中選擇需要鏈接的文件地址，設置文字鏈接。（9）“目標”下拉列表框：用于設置鏈接網頁的打開方式。（10）“背景色”欄：用于設置Flash文字區(qū)域的背景顏色。

3.4“FLASH簡介”網頁

（11）“另存為”文本框：在該文本框中輸入要保存到的目錄及文件名，或者單擊“瀏覽”按鈕，在“選擇文件”對話框中設置要保存的路徑和文件名，默認位置為網頁文檔所在的目錄下。

圖3-4-4“插入Flash文本”對話框3.5“日落奇山”網頁

“日落奇山”網頁在瀏覽器中的顯示效果如圖3-5-1所示。網頁中包含了一個使用Fireworks制作的圖像：茫茫的沙漠，在與天交際的地方出現一輪紅日，一副夕陽美景。

Fireworks是Macromedia公司的專業(yè)圖像軟件，它是網絡圖形設計和處理的最好選擇之一，使用Fireworks來創(chuàng)建、編輯、處理網頁圖片與網頁動畫，為網頁中增加互動性，可以在專業(yè)環(huán)境中優(yōu)化圖像。Fireworks是編輯矢量和位圖的綜合工具，使用該軟件可以輕松地輸出帶有HTML和JavaScript并適應使用要求的HTML文件。

3.5“日落奇山”網頁

圖3-5-1“日落奇山”網頁的顯示效果3.5“日落奇山”網頁

3.5.1插入Shockwave影片Shockwave影片是Macromedia公司的Director軟件創(chuàng)建的，插入它的方法如下。（1）單擊“插入”（常用）欄中“媒體”快捷菜單中的“Shockwave”按鈕，調出“選擇文件”對話框。利用該對話框可以調入Shockwave影片文件（擴展名為“.dcr”）（2）插入Shockwave影片文件后，網頁文檔窗口內會顯示一個Shockwave影片圖標。用鼠標拖曳Shockwave影片圖標右下角的黑色控制柄，可調整它的大小。（3）圖3-5-2給出了Shockwave影片對象的“屬性”欄，其中各選項的作用與前面所述基本一樣。單擊“播放”按鈕可播放Shockwave影片。單擊“參數”按鈕可調出“參數”對話框，利用該對話框可以定義Shockwave影片的參數，用于傳遞給Shockwave影片。

3.5“日落奇山”網頁

圖3-5-2Shockwave影片對象的“屬性”欄3.5“日落奇山”網頁

3.5.2插入FireworksHTML（1）單擊“插入”（常用）欄“圖像”快捷菜單中的“FireworksHTML”按鈕，調出“插入FireworksHTML”對話框，如圖3-5-3所示。

圖3-5-3“插入FireworksHTML”對話框3.5“日落奇山”網頁

（2）在“FireworksHTML文件”文本框內輸入Fireworks文件目錄與文件名或單擊“瀏覽”按鈕，在彈出的“選擇FireworksHTML文件”對話框中選擇Fireworks生成的HTML格式的文件，再單擊“確定”按鈕，即可插入Fireworks圖像或動畫。（3）FireworksHTML對象的“屬性”欄如圖3-5-4所示。由該圖可以看出，該屬性欄與圖像的“屬性”欄基本一樣。

圖3-5-4FireworksHTML對象的“屬性”欄3.6“風景幻燈”網頁

“風景幻燈”網頁的顯示效果如圖3-6-1所示。網頁中包含一個Java程序，每隔一段時間網頁中的圖像進行一次切換，所有圖像顯示完后進行循環(huán)顯示。圖像切換時網頁的顯示效果如圖3-6-2所示。

圖3-6-1

“風景幻燈”網頁的顯示效果

圖3-6-2

“風景圖像”網頁中圖像的切換效果

3.6“風景幻燈”網頁

3.6.1JavaApplet概述Java是一個由Sun公司開發(fā)而成的新一代編程語言。使用該程序可在各式各樣不同種機器、不同種操作平臺的網絡環(huán)境中開發(fā)軟件。無論使用的是什么瀏覽器，什么計算機，什么操作系統，只要瀏覽器能夠支持Java，就可以看到生動的主頁。Java正在逐步成為Internet應用的主要開發(fā)語言。它徹底改變了應用軟件的開發(fā)模式，帶來了一次新的技術革命，為迅速發(fā)展的信息世界增添了新的活力。隨著Internet的普及和Java的誕生，大型的應用軟件開始向小型化發(fā)展，由眾多在Internet上的小應用程序JavaApplet來完成信息的處理與傳遞。JavaApplet可以加速應用軟件的小型化、網絡化趨勢。

3.6“風景幻燈”網頁

JavaApplet程序分為兩類：Java小型程序（Applet）和Java應用程序（Application），它們是有區(qū)別的。JavaApplet嵌入在網頁內，作為網頁的組成部分被下載，并能運行在有Java虛機器的瀏覽器中。而另一個Java應用程序運行于Web瀏覽器之外，沒有Applet運行時的諸多限制。另外，兩者在程序設計上的最大區(qū)別在于：JavaApplet沒有主程序，而Java應用程序一定要有主程序。在Java中每個程序都是由Applet的子類來實現。開發(fā)人員自定義的Applet通過重載Applet的幾個主要成員函數完成小應用程序的初始化、繪制和運行。3.6.2JavaApplet對象的“屬性”欄JavaApplet對象的“屬性”欄如圖3-6-3所示，其中主要選項的作用如下。

3.6“風景幻燈”網頁

圖3-6-3JavaApplet對象的“屬性”欄3.6“風景幻燈”網頁

（1）“寬”和“高”文本框：用于設置JavaApplet程序在網頁中的寬和高。（2）“代碼”文本框與文件夾按鈕：文本框用于輸入JavaApplet程序文件的路徑和名字；單擊其后的文件夾按鈕可選擇JavaApplet文件。（3）“對齊”下拉列表框：用于設置JavaApplet程序的水平和垂直對齊方式。（4）“基址”文本框：用于輸入JavaApplet程序文件的名稱。（5）“替代”文本框與文件夾按鈕：文本框用于輸入JavaApplet替代的圖像的目錄和文件名；單擊其后的文件夾按鈕可選擇圖像文件。當網頁中的JavaApplet程序不能顯示時，該網頁JavaApplet程序處的替代圖像。（6）“垂直邊距”和“水平邊距”文本框：用于設置JavaApplet程序顯示時的垂直和水平邊距。

3.7“旋轉的地球”網頁

“旋轉的地球”網頁的顯示效果如圖3-7-1所示。在該網頁中顯示了一個不斷旋轉的透明地球，通過遠處太陽光的照射，形成了一個個光暈。在“旋轉的地球”網頁中插入了ActiveX控件，如圖3-7-2所示。ActiveX控件是Microsoft對瀏覽器的功能擴展，其作用與插件基本一樣。所不同的是：如果瀏覽器不支持網頁中的ActiveX控件，瀏覽器會自動安裝所需的軟件。如果瀏覽器不支持網頁中的插件，則需要用戶自己安裝所需的軟件。

圖3-7-1

“旋轉的地球”網頁的顯示效果

圖3-7-2ActiveX控件圖標的顯示效果

3.7“旋轉的地球”網頁

3.7.1ActiveX控件“屬性”欄中各選項的作用ActiveX控件“屬性”欄的顯示效果如圖3-7-3所示，其中各選項的作用如下。

圖3-7-3ActiveX控件“屬性”欄的顯示效果3.7“旋轉的地球”網頁

（1）“ActiveX”文本框：用于設置該控件的名稱。（2）“寬”和“高”文本框：用于設置ActiveX控件在網頁中顯示的寬和高。（3）“ClassID”下拉列表框：它給出了3個類型代碼，標明了ActiveX類型，其中一個用于Shockwave影片、一個用于Flash電影以及一個用于RealAudio。如果要使用其他控件，則需要自己輸入相應的代碼。選擇不同類型代碼后，“屬性”欄會產生相應的變化。（4）“源文件”復選框：單擊文件夾按鈕，即可調出“選擇Netscape的插入文件”對話框。利用該對話框可以選擇要加載的文件。（5）“對齊”下拉列表框：用于設置ActiveX控件在網頁中的對齊方式。（6）“水平邊距”和“垂直邊距”文本框：用于設置該控件與網頁中其他對象的距離。（7）“基址”文本框：用于輸入加載的ActiveX控件的URL。（8）“編號”文本框：用于輸入ActiveX的ID參數。（9）“數據”文本框：用于輸入加載的數據值。（10）“替代圖像”文本框：當ActiveX控件不能正常顯示時，該控件處替代的圖像。

3.7“旋轉的地球”網頁

3.7.2插入插件插件可以是各種格式的音樂（MP3、MDID、WAV、AIF、ra、ram或RealAudio等）、Director的Shockwave影片、Authorware的Shockwave和Flash電影等。插入插件的方法如下。（1）單擊“插入”（常用）欄“媒體”快捷菜單中的“插件”按鈕，調出“選擇文件”對話框。利用該對話框選擇一個要插入的文件。（2）插入文件后，網頁文檔窗口內會顯示一個插件圖標。單擊該插件圖標后，可用鼠標拖曳插件圖標的黑色控制柄來調整它的大小。其大小決定了瀏覽器窗口中顯示的大小。（3）如果插入聲音，可在瀏覽器中播放。同時，瀏覽器內會顯示出一個播放器。如果要取消播放器，可將插件圖標調至很小。

3.8“考試安排”網頁

“考試安排”網頁的顯示效果如圖3-8-1所示，在該網頁中以表格的形式列出了各班的考試安排。在網頁中插入表格，使網頁的結構合理，內容清晰。

表格比較適合顯示結構性比較強的內容，如值班表或課程表或考試安排表等。表格也是網頁中經常使用的一個元件。圖3-8-1“考試安排”網頁的顯示效果3.8“考試安排”網頁

3.8.1在網頁內插入表格將光標移到需要插入表格的位置，單擊“插入”（常用）欄內的“表格”按鈕，調出“表格”對話框，如圖3-8-2所示。

圖3-8-2“表格”對話框

圖3-8-3制作的第一個表格3.8“考試安排”網頁

1．“表格”對話框內各選項的作用（1）“行數”和“列數”文本框：用于輸入表格的行數和列數。（2）“表格寬度”文本框：用于輸入表格寬度值，其單位為像素或百分數。如果選擇“百分比”，則表示表格占頁面或它的母體容量寬度的百分比。（3）“邊框粗細”文本框：用于輸入表格邊框的寬度數值，其單位為像素。當它的值為0時，表示沒有表格線。（4）“單元格邊距”文本框：輸入的數值表示單元格之間兩個相鄰邊框線（左與右、上和下邊框線）間的距離。（5）“單元格間距”文本框：用于輸入單元格內的內容與單元格邊框間的空白數值，其單位為像素。這種空白存在于單元格內容的四周。（6）“頁眉”欄：用于設置表格的頁眉單元格。被設置為頁眉的單元格，其中的字體將被設置成“居中”和“黑體”格式。

3.8“考試安排”網頁

（7）“輔助功能”欄：“輔助功能”欄中各選項的作用如下。①“標題”文本框：用于輸入表格的標題。②“對齊標題”列表框：用于設置標題與表格的位置關系，默認為表格的頂部。③“摘要”文本框：用于輸入表格的摘要。在網頁中插入的表格如圖3-8-3所示。

圖3-8-2“表格”對話框圖3-8-3制作的第一個表格2．調整表格大?。?）調整整個表格的大?。簡螕舯砀竦倪吙?，選中該表格，此時表格右邊、下邊和右下角會出現3個方形的黑色控制柄。用鼠標拖曳控制柄，即可調整整個表格的大小。（2）調整表格中行或列的大?。簩⒐鈽艘频奖砀窬€處，當光標顯示為雙箭頭橫線或雙箭頭豎線時，拖曳鼠標，即可調整表格線的位置，從而調整表格行或列的大小。

3.8“考試安排”網頁

3．表格和單元格標簽（1）表格標簽：選中表格后，在表格的下面用綠色顯示出了表格的寬度，如圖3-8-3所示。單擊下邊的三角按鈕，調出“表格”快捷菜單。利用“表格”快捷菜單可以對表格進行選擇表格、清除表格列的寬度、左側插入列和右側插入列等操作。（2）單元格標簽：選中表格后，在表格標簽的上面顯示出了每一列單元格的標簽。單擊任意一個三角按鈕，可以調出“單元格”快捷菜單，其操作方法與“表格”快捷菜單基本相同此處不再贅述。3.8.2選擇表格（1）選擇整個表格：單擊表格的外邊框，可選中整個表格，此時表格右邊、下邊和右下角會出現3個方形黑色控制柄。（2）選擇多個表格單元格：按住Ctrl鍵的同時依次單擊所有要選擇的表格單元格即可。（3）選擇表格的一行或一列單元格：將鼠標移到一行的最左邊或移到一列的最上邊，當光標顯現為黑色箭頭時單擊鼠標，即可選中一行或一列。（4）選擇表格的多行或多列單元格：按住Ctrl鍵的同時將鼠標依次移到要選擇的各行或各列，當光標呈黑色箭頭時單擊鼠標，即可選中多行或多列。還可以將鼠標移到要選擇的多行或多列的左側，當光標呈黑色箭頭時，拖曳鼠標也可選擇多行或多列單元格。

3.8“考試安排”網頁

3.8.2選擇表格（1）選擇整個表格：單擊表格的外邊框，可選中整個表格，此時表格右邊、下邊和右下角會出現3個方形黑色控制柄。（2）選擇多個表格單元格：按住Ctrl鍵的同時依次單擊所有要選擇的表格單元格即可。（3）選擇表格的一行或一列單元格：將鼠標移到一行的最左邊或移到一列的最上邊，當光標顯現為黑色箭頭時單擊鼠標，即可選中一行或一列。（4）選擇表格的多行或多列單元格：按住Ctrl鍵的同時將鼠標依次移到要選擇的各行或各列，當光標呈黑色箭頭時單擊鼠標，即可選中多行或多列。還可以將鼠標移到要選擇的多行或多列的左側，當光標呈黑色箭頭時，拖曳鼠標也可選擇多行或多列單元格。

3.9調整“考試安排”網頁

圖3-8-1所示的“考試安排”網頁，雖然能夠顯示相應的數據，但是表格的樣式相對比較簡單，不足以吸引瀏覽者，而且按照班級順序排列的方式不便于查找。所以需對“考試安排”網頁進行“排序表格”和“格式化表格”操作，調整后表格的顯示效果如圖3-9-1所示。

圖3-9-1美化后的“考試安排”網頁3.9調整“考試安排”網頁

制作該網頁需使用“排序表格”和“格式化表格”命令?！芭判虮砀瘛泵羁梢詫Ρ砀裰械臄祿M行重新排序，即在不改變表格結構的情況下對表格內的數據進行重新排列?！案袷交砀瘛泵羁梢詫Ρ砀袷褂脴邮剑瑸楸砀褓x予新的顏色和字體屬性。3.9.1“排序表格”對話框在Dreamweaver中執(zhí)行“命令”→“排序表格”菜單命令，調出“排序表格”對話框，如圖3-9-2所示。該對話框中各選項的含義如下。

圖3-9-2“排序表格”對話框3.9調整“考試安排”網頁

（1）“排序按”下拉列表框：選擇對第幾列排序。列號為“列1”、“列2”等。（2）“順序”下拉列表框：在左邊的下拉列表框內選擇按字母或數字排序；在右邊的下拉列表框內選擇按升序或降序排序。字母排序不分大小寫。（3）“再按”下拉列表框：按照“排序按”下拉列表框中的順序排序時，如果有相同的數據，則按照該下拉列表框中的選擇排序。該列表框的選項也是“列1”、“列2”等。它下邊的“順序”下拉列表框的作用與上邊的“順序”下拉列表框的作用相同。（4）“選項”欄：選中“排序包含第一行”復選框后，表格的第一行也參加排序，否則不參加排序。單擊“應用”按鈕可以完成排序，再單擊該按鈕還可以還原，單擊“確定”按鈕，即可完成排序。

3.9調整“考試安排”網頁

3.9.2格式化表格Dreamweaver為制作各種表格提供了大量的預定義格式，使操作更方便。這些預定義的格式化表格可在“格式化表格”對話框中選定和修改。利用預定義的格式化表格，制作表格的方法如下。（1）在網頁頁面內制作一個行、列數目符合要求的一般表格，不用考慮它的顏色等。（2）執(zhí)行“命令”→“格式化表格”菜單命令，調出“格式化表格”對話框，如圖3-9-3所示。圖3-9-3“格式化表格”對話框（3）在“格式化表格”對話框左上角的列表框內，選擇一種格式化表格樣式，同時其右邊會顯示出該樣式的顯示效果。（4）在“格式化表格”對話框中選擇表格樣式、表格背景顏色、文字風格和顏色等。①“行顏色”欄中的“第一種”用于設置首行顏色，“第二種”用于設置第二行顏色?！敖诲e”下拉列表框用于確定各行顏色的變化規(guī)律。

3.9調整“考試安排”網頁

②“第一行”欄中的“對齊”下拉列表框用于確定首行單元格內文字的排列方式，“文字樣式”下拉列表框用于確定文字的風格，“背景色”欄用于設置首行的背景色，“文字顏色”欄用于設置文本的顏色。③“最左列”欄中的“對齊”下拉列表框用于確定左邊列單元格內文字的排列方式，“文字樣式”下拉列表框用于確定文字的風格。④“邊框”文本框用于輸入表格邊框的寬度。選中“將所有屬性套用至TD標注而不是TR標簽”復選框后，可將所定義的全部屬性賦予TD標記而不賦予TR標記。（5）單擊“確定”按鈕后，即可將該樣式應用到所選的表格。

3.10“照相館”網頁

“照相館”網頁的顯示效果如圖3-10-1所示。在該網頁中顯示了一些非常漂亮的汽車照片，其中使用了表格對網頁進行布局。使用表格來編排網頁可使頁面更緊湊、豐富多彩。

圖3-10-1“照相館”網頁的顯示效果3.10“照相館”網頁

3.10.1表格和單元格的“屬性”欄1．表格的“屬性”欄單擊表格的外邊框，選中整個表格，此時表格的“屬性”欄如圖3-10-2所示。表格的“屬性”欄內各選項的作用如下。

圖3-10-2“表格”屬性欄3.10“照相館”網頁

（1）“表格Id”下拉列表框：用于輸入表格的名稱。（2）“行”和“列”文本框：用于輸入表格的行數與列數。（3）“寬”和“高”文本框：用于輸入表格的寬度與高度數?？衫闷溆疫叺南吕斜砜騺磉x擇單位，其中的選項有“%”（百分數）和“像素”兩種。（4）“填充”文本框：用于輸入單元格內的內容與單元格邊框間的空白數，單位為像素。（5）“間距”文本框：用于輸入單元格之間兩個相鄰邊框線間的距離。（6）“對齊”下拉列表框：該下拉列表框內有“默認”、“左對齊”、“居中對齊”和“右對齊”4個選項，用于設置對齊方式。（7）“邊框”文本框：用于輸入表格邊框寬度，單位為像素。（8）“背景顏色”按鈕與文本框：用于設置表格的背景色。（9）“背景圖像”文本框與文件夾按鈕：單擊文件夾按鈕，可調出“選擇圖像源”對話框，利用它可以給表格加背景圖像。（10）“邊框顏色”按鈕與文本框：用于設置表格的邊框線顏色。

（11）6個按鈕：按鈕用于清除行高，按鈕用于清除列寬，按鈕用于將表格寬度的單位轉換為像素，按鈕用于將表格寬度的單位改為百分比，按鈕用于將表格高度的單位轉換為像素，按鈕用于將表格寬度的單位改為百分比。

3.10“照相館”網頁

（12）“類”列表框：用于設置表格的樣式。2．單元格的“屬性”欄選中單元格后，屬性欄變?yōu)閱卧竦摹皩傩浴睓?，如圖3-10-3所示。在單元格的“屬性”欄中，上半部分用來設置單元格內文本的屬性，它與“文本”屬性欄的選項基本相同。下半部分用來設置單元格的屬性，各選項的作用如下。