HTML和中文DreamweaverMX2004實(shí)用教程第3章

第3章在網(wǎng)頁(yè)中插入對(duì)象

本章要點(diǎn)3.1“圖書(shū)導(dǎo)讀”網(wǎng)頁(yè)3.2再做“動(dòng)畫(huà)放映室”網(wǎng)頁(yè)3.3“豆豆的收藏”網(wǎng)頁(yè)3.4“FLASH簡(jiǎn)介”網(wǎng)頁(yè)3.5“日落奇山”網(wǎng)頁(yè)3.6“風(fēng)景幻燈”網(wǎng)頁(yè)3.7“旋轉(zhuǎn)的地球”網(wǎng)頁(yè)3.8“考試安排”網(wǎng)頁(yè)3.9調(diào)整“考試安排”網(wǎng)頁(yè)3.10“照相館”網(wǎng)頁(yè)習(xí)題33.1“圖書(shū)導(dǎo)讀”網(wǎng)頁(yè)

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

圖3-1-1“圖書(shū)導(dǎo)讀”網(wǎng)頁(yè)的顯示效果3.1“圖書(shū)導(dǎo)讀”網(wǎng)頁(yè)

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

3.1“圖書(shū)導(dǎo)讀”網(wǎng)頁(yè)

圖3-1-2“插入導(dǎo)航條”對(duì)話框3.1“圖書(shū)導(dǎo)讀”網(wǎng)頁(yè)

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

3.1“圖書(shū)導(dǎo)讀”網(wǎng)頁(yè)

圖3-1-3水平線的“屬性”欄3.1“圖書(shū)導(dǎo)讀”網(wǎng)頁(yè)

（2）在水平線“屬性”面板中的“寬”文本框內(nèi)輸入水平線的水平長(zhǎng)度數(shù)值，在“高”文本框內(nèi)輸入水平線的垂直寬度數(shù)值，單位有像素和百分?jǐn)?shù)（%）兩種選擇。在“對(duì)齊”下拉列表框內(nèi)選擇“默認(rèn)”、“左對(duì)齊”、“居中”對(duì)齊或“右對(duì)齊”選項(xiàng)。選中“陰影”復(fù)選框，則水平線是中空的；不選中“陰影”復(fù)選框，則水平線是亮實(shí)心的線。在“插入”（HTML）欄中還有一些按鈕，利用它們還可以在網(wǎng)頁(yè)中插入日期、換行符和電子郵件地址等。因?yàn)槭褂梅椒ū容^簡(jiǎn)單，此處不再贅述。

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

圖3-2-1“動(dòng)畫(huà)放映室”網(wǎng)頁(yè)的顯示效果3.2再做“動(dòng)畫(huà)放映室”網(wǎng)頁(yè)

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

3.2再做“動(dòng)畫(huà)放映室”網(wǎng)頁(yè)（1）“Flash”文本框：用于輸入Flash影片對(duì)象的名字。該名字可以在腳本語(yǔ)言中使用。（2）“寬”與“高”文本框：用于輸入Flash影片對(duì)象的寬與高。（3）“文件”文本框與文件夾按鈕：用于選擇SWF格式的Flash影片文件。（4）“編輯”按鈕：?jiǎn)螕粼摪粹o，可調(diào)出FlashMX2004，并對(duì)Flash文件進(jìn)行編輯。（5）“重設(shè)大小”按鈕：?jiǎn)螕粼摪粹o，可使Flash電影恢復(fù)原大小。（6）“循環(huán)”復(fù)選框：選中該復(fù)選框后，可循環(huán)播放。

圖3-2-2Flash對(duì)象的“屬性”欄3.2再做“動(dòng)畫(huà)放映室”網(wǎng)頁(yè)

（7）“自動(dòng)播放”復(fù)選框：選中該復(fù)選框后，加載網(wǎng)頁(yè)時(shí)，動(dòng)畫(huà)可以自動(dòng)播放。（8）“垂直邊距”文本框：用于設(shè)置Flash影片與邊框間垂直方向的空白量。（9）“水平邊距”文本框：用于設(shè)置Flash影片與邊框間水平方向的空白量。（10）“品質(zhì)”下拉列表框：用于設(shè)置動(dòng)畫(huà)的質(zhì)量。（11）“比例”下拉列表框：用于選擇縮放參數(shù)。（12）“對(duì)齊”下拉列表框：用于設(shè)置Flash影片的對(duì)齊方式。（13）“背景顏色”文本框與按鈕：用于設(shè)置Flash影片的背景顏色。（14）“播放”按鈕：?jiǎn)螕粼摪粹o，可播放Flash影片。（15）“參數(shù)”按鈕：?jiǎn)螕粼摪粹o，可調(diào)出一個(gè)對(duì)話框，在該對(duì)話框中可以輸入附加參數(shù)，用于傳遞給Flash或Shockwave影片。

3.2再做“動(dòng)畫(huà)放映室”網(wǎng)頁(yè)

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

3.2再做“動(dòng)畫(huà)放映室”網(wǎng)頁(yè)

圖3-2-3“標(biāo)簽”面板3.3“豆豆的收藏”網(wǎng)頁(yè)

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

3.3“豆豆的收藏”網(wǎng)頁(yè)

圖3-3-1

“豆豆的收藏”網(wǎng)頁(yè)的顯示效果

圖3-3-2

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

3.3“豆豆的收藏”網(wǎng)頁(yè)

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

3.3“豆豆的收藏”網(wǎng)頁(yè)

圖3-3-3“標(biāo)簽”面板圖3-3-4“編輯imageURLs數(shù)組”對(duì)話框3.3“豆豆的收藏”網(wǎng)頁(yè)

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

3.3“豆豆的收藏”網(wǎng)頁(yè)

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

3.4“FLASH簡(jiǎn)介”網(wǎng)頁(yè)

在“FLASH簡(jiǎn)介”網(wǎng)頁(yè)中介紹了FlashMXProfessional2004的基本功能。在該網(wǎng)頁(yè)中使用了Flash按鈕和Flash文字對(duì)象。在瀏覽器中打開(kāi)該網(wǎng)頁(yè)后，當(dāng)鼠標(biāo)移到“插入FLASH動(dòng)畫(huà)”按鈕上時(shí)的顯示效果如圖3-4-1所示，當(dāng)鼠標(biāo)移到介紹文字上面時(shí)的顯示效果如圖3-4-2所示。

圖3-4-1

“FLASH簡(jiǎn)介”網(wǎng)頁(yè)的顯示效果

圖3-4-2

當(dāng)鼠標(biāo)移到Flash文字上面時(shí)的顯示效果

3.4“FLASH簡(jiǎn)介”網(wǎng)頁(yè)

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

圖3-4-3“插入Flash按鈕”對(duì)話框3.4“FLASH簡(jiǎn)介”網(wǎng)頁(yè)

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

3.4“FLASH簡(jiǎn)介”網(wǎng)頁(yè)

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

3.4“FLASH簡(jiǎn)介”網(wǎng)頁(yè)

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

圖3-4-4“插入Flash文本”對(duì)話框3.5“日落奇山”網(wǎng)頁(yè)

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

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

3.5“日落奇山”網(wǎng)頁(yè)

圖3-5-1“日落奇山”網(wǎng)頁(yè)的顯示效果3.5“日落奇山”網(wǎng)頁(yè)

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

3.5“日落奇山”網(wǎng)頁(yè)

圖3-5-2Shockwave影片對(duì)象的“屬性”欄3.5“日落奇山”網(wǎng)頁(yè)

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

圖3-5-3“插入FireworksHTML”對(duì)話框3.5“日落奇山”網(wǎng)頁(yè)

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

圖3-5-4FireworksHTML對(duì)象的“屬性”欄3.6“風(fēng)景幻燈”網(wǎng)頁(yè)

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

圖3-6-1

“風(fēng)景幻燈”網(wǎng)頁(yè)的顯示效果

圖3-6-2

“風(fēng)景圖像”網(wǎng)頁(yè)中圖像的切換效果

3.6“風(fēng)景幻燈”網(wǎng)頁(yè)

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

3.6“風(fēng)景幻燈”網(wǎng)頁(yè)

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

3.6“風(fēng)景幻燈”網(wǎng)頁(yè)

圖3-6-3JavaApplet對(duì)象的“屬性”欄3.6“風(fēng)景幻燈”網(wǎng)頁(yè)

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

3.7“旋轉(zhuǎn)的地球”網(wǎng)頁(yè)

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

圖3-7-1

“旋轉(zhuǎn)的地球”網(wǎng)頁(yè)的顯示效果

圖3-7-2ActiveX控件圖標(biāo)的顯示效果

3.7“旋轉(zhuǎn)的地球”網(wǎng)頁(yè)

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

圖3-7-3ActiveX控件“屬性”欄的顯示效果3.7“旋轉(zhuǎn)的地球”網(wǎng)頁(yè)

（1）“ActiveX”文本框：用于設(shè)置該控件的名稱。（2）“寬”和“高”文本框：用于設(shè)置ActiveX控件在網(wǎng)頁(yè)中顯示的寬和高。（3）“ClassID”下拉列表框：它給出了3個(gè)類型代碼，標(biāo)明了ActiveX類型，其中一個(gè)用于Shockwave影片、一個(gè)用于Flash電影以及一個(gè)用于RealAudio。如果要使用其他控件，則需要自己輸入相應(yīng)的代碼。選擇不同類型代碼后，“屬性”欄會(huì)產(chǎn)生相應(yīng)的變化。（4）“源文件”復(fù)選框：?jiǎn)螕粑募A按鈕，即可調(diào)出“選擇Netscape的插入文件”對(duì)話框。利用該對(duì)話框可以選擇要加載的文件。（5）“對(duì)齊”下拉列表框：用于設(shè)置ActiveX控件在網(wǎng)頁(yè)中的對(duì)齊方式。（6）“水平邊距”和“垂直邊距”文本框：用于設(shè)置該控件與網(wǎng)頁(yè)中其他對(duì)象的距離。（7）“基址”文本框：用于輸入加載的ActiveX控件的URL。（8）“編號(hào)”文本框：用于輸入ActiveX的ID參數(shù)。（9）“數(shù)據(jù)”文本框：用于輸入加載的數(shù)據(jù)值。（10）“替代圖像”文本框：當(dāng)ActiveX控件不能正常顯示時(shí)，該控件處替代的圖像。

3.7“旋轉(zhuǎn)的地球”網(wǎng)頁(yè)

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

3.8“考試安排”網(wǎng)頁(yè)

“考試安排”網(wǎng)頁(yè)的顯示效果如圖3-8-1所示，在該網(wǎng)頁(yè)中以表格的形式列出了各班的考試安排。在網(wǎng)頁(yè)中插入表格，使網(wǎng)頁(yè)的結(jié)構(gòu)合理，內(nèi)容清晰。

表格比較適合顯示結(jié)構(gòu)性比較強(qiáng)的內(nèi)容，如值班表或課程表或考試安排表等。表格也是網(wǎng)頁(yè)中經(jīng)常使用的一個(gè)元件。圖3-8-1“考試安排”網(wǎng)頁(yè)的顯示效果3.8“考試安排”網(wǎng)頁(yè)

3.8.1在網(wǎng)頁(yè)內(nèi)插入表格將光標(biāo)移到需要插入表格的位置，單擊“插入”（常用）欄內(nèi)的“表格”按鈕，調(diào)出“表格”對(duì)話框，如圖3-8-2所示。

圖3-8-2“表格”對(duì)話框

圖3-8-3制作的第一個(gè)表格3.8“考試安排”網(wǎng)頁(yè)

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

3.8“考試安排”網(wǎng)頁(yè)

（7）“輔助功能”欄：“輔助功能”欄中各選項(xiàng)的作用如下。①“標(biāo)題”文本框：用于輸入表格的標(biāo)題。②“對(duì)齊標(biāo)題”列表框：用于設(shè)置標(biāo)題與表格的位置關(guān)系，默認(rèn)為表格的頂部。③“摘要”文本框：用于輸入表格的摘要。在網(wǎng)頁(yè)中插入的表格如圖3-8-3所示。

圖3-8-2“表格”對(duì)話框圖3-8-3制作的第一個(gè)表格2．調(diào)整表格大?。?）調(diào)整整個(gè)表格的大?。?jiǎn)螕舯砀竦倪吙?，選中該表格，此時(shí)表格右邊、下邊和右下角會(huì)出現(xiàn)3個(gè)方形的黑色控制柄。用鼠標(biāo)拖曳控制柄，即可調(diào)整整個(gè)表格的大小。（2）調(diào)整表格中行或列的大?。簩⒐鈽?biāo)移到表格線處，當(dāng)光標(biāo)顯示為雙箭頭橫線或雙箭頭豎線時(shí)，拖曳鼠標(biāo)，即可調(diào)整表格線的位置，從而調(diào)整表格行或列的大小。

3.8“考試安排”網(wǎng)頁(yè)

3．表格和單元格標(biāo)簽（1）表格標(biāo)簽：選中表格后，在表格的下面用綠色顯示出了表格的寬度，如圖3-8-3所示。單擊下邊的三角按鈕，調(diào)出“表格”快捷菜單。利用“表格”快捷菜單可以對(duì)表格進(jìn)行選擇表格、清除表格列的寬度、左側(cè)插入列和右側(cè)插入列等操作。（2）單元格標(biāo)簽：選中表格后，在表格標(biāo)簽的上面顯示出了每一列單元格的標(biāo)簽。單擊任意一個(gè)三角按鈕，可以調(diào)出“單元格”快捷菜單，其操作方法與“表格”快捷菜單基本相同此處不再贅述。3.8.2選擇表格（1）選擇整個(gè)表格：?jiǎn)螕舯砀竦耐膺吙?，可選中整個(gè)表格，此時(shí)表格右邊、下邊和右下角會(huì)出現(xiàn)3個(gè)方形黑色控制柄。（2）選擇多個(gè)表格單元格：按住Ctrl鍵的同時(shí)依次單擊所有要選擇的表格單元格即可。（3）選擇表格的一行或一列單元格：將鼠標(biāo)移到一行的最左邊或移到一列的最上邊，當(dāng)光標(biāo)顯現(xiàn)為黑色箭頭時(shí)單擊鼠標(biāo)，即可選中一行或一列。（4）選擇表格的多行或多列單元格：按住Ctrl鍵的同時(shí)將鼠標(biāo)依次移到要選擇的各行或各列，當(dāng)光標(biāo)呈黑色箭頭時(shí)單擊鼠標(biāo)，即可選中多行或多列。還可以將鼠標(biāo)移到要選擇的多行或多列的左側(cè)，當(dāng)光標(biāo)呈黑色箭頭時(shí)，拖曳鼠標(biāo)也可選擇多行或多列單元格。

3.8“考試安排”網(wǎng)頁(yè)

3.8.2選擇表格（1）選擇整個(gè)表格：?jiǎn)螕舯砀竦耐膺吙?，可選中整個(gè)表格，此時(shí)表格右邊、下邊和右下角會(huì)出現(xiàn)3個(gè)方形黑色控制柄。（2）選擇多個(gè)表格單元格：按住Ctrl鍵的同時(shí)依次單擊所有要選擇的表格單元格即可。（3）選擇表格的一行或一列單元格：將鼠標(biāo)移到一行的最左邊或移到一列的最上邊，當(dāng)光標(biāo)顯現(xiàn)為黑色箭頭時(shí)單擊鼠標(biāo)，即可選中一行或一列。（4）選擇表格的多行或多列單元格：按住Ctrl鍵的同時(shí)將鼠標(biāo)依次移到要選擇的各行或各列，當(dāng)光標(biāo)呈黑色箭頭時(shí)單擊鼠標(biāo)，即可選中多行或多列。還可以將鼠標(biāo)移到要選擇的多行或多列的左側(cè)，當(dāng)光標(biāo)呈黑色箭頭時(shí)，拖曳鼠標(biāo)也可選擇多行或多列單元格。

3.9調(diào)整“考試安排”網(wǎng)頁(yè)

圖3-8-1所示的“考試安排”網(wǎng)頁(yè)，雖然能夠顯示相應(yīng)的數(shù)據(jù)，但是表格的樣式相對(duì)比較簡(jiǎn)單，不足以吸引瀏覽者，而且按照班級(jí)順序排列的方式不便于查找。所以需對(duì)“考試安排”網(wǎng)頁(yè)進(jìn)行“排序表格”和“格式化表格”操作，調(diào)整后表格的顯示效果如圖3-9-1所示。

圖3-9-1美化后的“考試安排”網(wǎng)頁(yè)3.9調(diào)整“考試安排”網(wǎng)頁(yè)

制作該網(wǎng)頁(yè)需使用“排序表格”和“格式化表格”命令?！芭判虮砀瘛泵羁梢詫?duì)表格中的數(shù)據(jù)進(jìn)行重新排序，即在不改變表格結(jié)構(gòu)的情況下對(duì)表格內(nèi)的數(shù)據(jù)進(jìn)行重新排列。“格式化表格”命令可以對(duì)表格使用樣式，為表格賦予新的顏色和字體屬性。3.9.1“排序表格”對(duì)話框在Dreamweaver中執(zhí)行“命令”→“排序表格”菜單命令，調(diào)出“排序表格”對(duì)話框，如圖3-9-2所示。該對(duì)話框中各選項(xiàng)的含義如下。

圖3-9-2“排序表格”對(duì)話框3.9調(diào)整“考試安排”網(wǎng)頁(yè)

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

3.9調(diào)整“考試安排”網(wǎng)頁(yè)

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

3.9調(diào)整“考試安排”網(wǎng)頁(yè)

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

3.10“照相館”網(wǎng)頁(yè)

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

圖3-10-1“照相館”網(wǎng)頁(yè)的顯示效果3.10“照相館”網(wǎng)頁(yè)

3.10.1表格和單元格的“屬性”欄1．表格的“屬性”欄單擊表格的外邊框，選中整個(gè)表格，此時(shí)表格的“屬性”欄如圖3-10-2所示。表格的“屬性”欄內(nèi)各選項(xiàng)的作用如下。

圖3-10-2“表格”屬性欄3.10“照相館”網(wǎng)頁(yè)

（1）“表格Id”下拉列表框：用于輸入表格的名稱。（2）“行”和“列”文本框：用于輸入表格的行數(shù)與列數(shù)。（3）“寬”和“高”文本框：用于輸入表格的寬度與高度數(shù)?？衫闷溆疫叺南吕斜砜騺?lái)選擇單位，其中的選項(xiàng)有“%”（百分?jǐn)?shù)）和“像素”兩種。（4）“填充”文本框：用于輸入單元格內(nèi)的內(nèi)容與單元格邊框間的空白數(shù)，單位為像素。（5）“間距”文本框：用于輸入單元格之間兩個(gè)相鄰邊框線間的距離。（6）“對(duì)齊”下拉列表框：該下拉列表框內(nèi)有“默認(rèn)”、“左對(duì)齊”、“居中對(duì)齊”和“右對(duì)齊”4個(gè)選項(xiàng)，用于設(shè)置對(duì)齊方式。（7）“邊框”文本框：用于輸入表格邊框?qū)挾龋瑔挝粸橄袼?。?）“背景顏色”按鈕與文本框：用于設(shè)置表格的背景色。（9）“背景圖像”文本框與文件夾按鈕：?jiǎn)螕粑募A按鈕，可調(diào)出“選擇圖像源”對(duì)話框，利用它可以給表格加背景圖像。（10）“邊框顏色”按鈕與文本框：用于設(shè)置表格的邊框線顏色。

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

3.10“照相館”網(wǎng)頁(yè)

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