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

第8章表單、命令與外部插件

本章要點(diǎn)8.1“資金收入/支出登記表”網(wǎng)頁

8.2導(dǎo)入“網(wǎng)絡(luò)技術(shù)”網(wǎng)頁

8.3重做“照相館”網(wǎng)頁

8.4格式化“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

8.5插件管理器

8.6“電影放映室”網(wǎng)頁

8.7用插件豐富“自我介紹”網(wǎng)頁

習(xí)題88.1“資金收入/支出登記表”網(wǎng)頁“資金收入/支出登記表”網(wǎng)頁在瀏覽器中的顯示效果如圖8-1-1所示。在該網(wǎng)頁中使用了表單進(jìn)行網(wǎng)頁設(shè)計(jì)。表單是用戶利用瀏覽器對(duì)Web站點(diǎn)數(shù)據(jù)庫進(jìn)行查詢和添加的一種界面，用戶利用表單可以輸入信息或選擇選項(xiàng)等，然后將這些信息提交給服務(wù)器進(jìn)行處理。這種查詢方式叫作“交互”的或者叫作“雙向”。這些表單對(duì)象包括文本域、下拉列表框、復(fù)選框和單選按鈕等。

表單對(duì)象是讓用戶輸入信息的地方，表單域是放置表單對(duì)象的區(qū)域，只有表單域內(nèi)的表單對(duì)象，才可以將它的信息傳送出去。

8.1“資金收入/支出登記表”網(wǎng)頁

圖8-1-1“資金輸入/支出登記表”網(wǎng)頁的顯示效果8.1“資金收入/支出登記表”網(wǎng)頁8.1.1創(chuàng)建表單域與設(shè)置表單域的屬性1．創(chuàng)建與刪除表單域（1）創(chuàng)建表單域：將光標(biāo)移到要插入表單域的位置，單擊“插入”（表單）欄內(nèi)的“表單”按鈕，或用鼠標(biāo)將“插入”（表單）欄內(nèi)的表單圖標(biāo)拖曳到網(wǎng)頁文檔窗口內(nèi)，即可在網(wǎng)頁窗口內(nèi)創(chuàng)建一個(gè)表單域，如圖8-1-2所示。單擊表單內(nèi)部，將光標(biāo)移到表單域內(nèi)，按Enter鍵，即可將表單域調(diào)大。按Backspace鍵，可使表單域縮小。表單域在瀏覽器內(nèi)是看不到的。

（2）顯示表單域：創(chuàng)建表單域后，若看不到表單域的矩形紅線，可以執(zhí)行“查看”→“可視化助理”→“不可見元素”菜單命令，即可將表單域的矩形紅線顯示出來。（3）刪除表單域：選中表單域后按Delete鍵，即可刪除表單域。

圖8-1-2創(chuàng)建的表單域8.1“資金收入/支出登記表”網(wǎng)頁

2．設(shè)置表單域的屬性選中表單域，此時(shí)表單域的“屬性”欄如圖8-1-3所示。（1）“表單名稱”文本框：可在該文本框內(nèi)輸入表單域的名字。表單域的名稱可用于JavaScript和VBScript等腳本語言中，這些腳本語言可控制表單域的屬性。（2）“動(dòng)作”文本框和按鈕：可輸入腳本程序或含有腳本程序的HTML文件。（3）“方法”下拉列表框：用于選擇客戶端與服務(wù)器之間傳送數(shù)據(jù)采用的方式。包括3個(gè)選項(xiàng)：“默認(rèn)”、“GET”（獲得，即追加表單值到URL，并發(fā)送服務(wù)器GET請(qǐng)求）和“POST”（傳遞，在消息正文中發(fā)送表單的值，并發(fā)送服務(wù)器POST請(qǐng)求）。

圖8-1-3表單域“屬性”欄8.1“資金收入/支出登記表”網(wǎng)頁

8.1.2插入表單對(duì)象與其他對(duì)象1．插入表單對(duì)象的方法（1）將光標(biāo)移到要插入表單對(duì)象的表單中，再插入表單對(duì)象。插入表單對(duì)象的方法與插入表單的方法一樣。（2）將光標(biāo)移到要插入表單對(duì)象的位置，然后單擊“插入”（表單）欄中的相應(yīng)按鈕，即可在光標(biāo)處插入一個(gè)相應(yīng)的表單對(duì)象。另外，執(zhí)行“插入”→“表單”菜單命令，調(diào)出它的下一級(jí)菜單。根據(jù)要插入的表單對(duì)象類別，單擊菜單內(nèi)的菜單命令也可插入表單對(duì)象。表單對(duì)象的“屬性”欄中都有一個(gè)名稱文本框，用于輸入表單對(duì)象的名稱，該名稱可在程序中使用，用以指定表單對(duì)象。2．設(shè)置文本域的屬性表單中經(jīng)常使用文本域，它可以是單行，也可以是多行，用于接收任何格式的文本、數(shù)字和字符。文本域的“屬性”欄如圖8-1-4所示，各選項(xiàng)的作用如下。（1）“字符寬度”文本框：文本域的寬度，可顯示字符的最多個(gè)數(shù)。（2）“最多字符數(shù)”文本框：允許輸入的字符個(gè)數(shù)可以比文本框?qū)挾却蟆?/p>

8.1“資金收入/支出登記表”網(wǎng)頁

（3）“類型”欄：該欄有3個(gè)單選鈕，用于選擇“單行”、“多行”或“密碼”文本域。密碼文本域的特點(diǎn)是：當(dāng)用戶輸入文字時(shí)，密碼文本域內(nèi)顯示的不是這些文字，而是一行“*”。選中“多行”單選項(xiàng)時(shí)，其“屬性”面板會(huì)發(fā)生變化：“初始值”文本框變?yōu)閹L動(dòng)條的多行文本框，同時(shí)“換行”下拉列表框變?yōu)橛行В白疃嘧址麛?shù)”文本框變?yōu)椤靶袛?shù)”文本框，用于輸入文本框的行數(shù)。（4）“初始值”文本框：用于輸入文本框的初始內(nèi)容。（5）“換行”下拉列表框：包括4個(gè)選項(xiàng)，它們的含義如下?！澳J(rèn)”：采用瀏覽器的默認(rèn)值?！瓣P(guān)”：當(dāng)輸入的文字超過文本框的寬度時(shí)，不換行，會(huì)出現(xiàn)滾動(dòng)條。“虛擬”：當(dāng)輸入的文字超過文本框的寬度時(shí)，會(huì)自動(dòng)換行，但向服務(wù)器傳輸數(shù)據(jù)時(shí)無回車符。

圖8-1-4文本域的“屬性”欄8.1“資金收入/支出登記表”網(wǎng)頁

“實(shí)體”：當(dāng)輸入的文字超過文本框的寬度時(shí)，會(huì)自動(dòng)加入回車符，進(jìn)行換行。3．設(shè)置按鈕的屬性按鈕用于制作“提交”和“重置”按鈕，還可以調(diào)用函數(shù)。它的“屬性”欄如圖8-1-5所示，各選項(xiàng)的作用如下。

圖8-1-5按鈕的“屬性”欄8.1“資金收入/支出登記表”網(wǎng)頁（1）“標(biāo)簽”文本框：用于輸入按鈕上顯示的文字。（2）“動(dòng)作”欄：包括3個(gè)單選鈕，用于選擇單擊該按鈕后引發(fā)的動(dòng)作類型?！疤峤槐韱巍保哼x中該復(fù)選鈕后，可以向服務(wù)器提交整個(gè)表單。“重設(shè)表單”：選中該復(fù)選鈕后，可以取消前面的輸入內(nèi)容，復(fù)位表單?！盁o”：選中該復(fù)選鈕后，它表示是一般按鈕，可用于調(diào)用腳本程序。4．設(shè)置復(fù)選框的屬性復(fù)選框有選中和未選中兩種狀態(tài)，多個(gè)復(fù)選框允許多選。它的“屬性”欄如圖8-1-6所示，其中各選項(xiàng)的作用如下。

圖8-1-6復(fù)選框的“屬性”欄8.1“資金收入/支出登記表”網(wǎng)頁（1）“選定值”文本框：用于輸入復(fù)選框選中時(shí)的數(shù)值，通常為1或0。（2）“初始狀態(tài)”欄：包括兩個(gè)單選鈕，用于設(shè)置復(fù)選框的初始狀態(tài)。5．設(shè)置單選按鈕的屬性單選按鈕也叫單選項(xiàng)，一組單選按鈕中只允許選中一個(gè)，其“屬性”面板如圖8-1-7所示。它與復(fù)選框“屬性”欄相應(yīng)的選項(xiàng)相同。

圖8-1-7單選按鈕的“屬性”欄8.1“資金收入/支出登記表”網(wǎng)頁

6．設(shè)置單選按鈕組的屬性單選按鈕組也叫單選項(xiàng)組。單擊“插入”（表單）面板中的“單選按鈕組”按鈕，可調(diào)出“單選按鈕組”對(duì)話框，如圖8-1-8所示。利用該對(duì)話框可以設(shè)置單選按鈕組中單選按鈕的個(gè)數(shù)和名稱。如果要增加選項(xiàng)，可單擊按鈕；如果要?jiǎng)h除選項(xiàng)，可選中要?jiǎng)h除的選項(xiàng)，再單擊按鈕。如果要調(diào)整選項(xiàng)的顯示次序，可選中要移動(dòng)的選項(xiàng)，再單擊或按鈕。它的“屬性”欄如圖8-1-7所示。

圖8-1-8“單選按鈕組”對(duì)話框8.1“資金收入/支出登記表”網(wǎng)頁

7．設(shè)置列表/菜單的屬性列表/菜單的作用是將一些選項(xiàng)放在一個(gè)帶滾動(dòng)條的列表框內(nèi)。它的“屬性”欄如圖8-1-9所示，其中各選項(xiàng)的作用如下。

圖8-1-9列表/菜單的“屬性”欄8.1“資金收入/支出登記表”網(wǎng)頁（1）“類型”欄：包括兩個(gè)單選鈕，用于選擇“菜單”或“列表”?！安藛巍奔聪吕斜砜颍贿x中“列表”單選鈕后，其右邊的各選項(xiàng)會(huì)變?yōu)榭蛇x項(xiàng)，此時(shí)的列表框右邊會(huì)產(chǎn)生滾動(dòng)條。（2）“高度”文本框：用于輸入列表的高度值，即可以顯示的行數(shù)。（3）“選定范圍”復(fù)選框：選中該復(fù)選框后，表示列表中的各選項(xiàng)可以同時(shí)選擇多項(xiàng)。（4）“初始化時(shí)選定”列表框：用于設(shè)置第一次調(diào)出該菜單時(shí)，菜單中默認(rèn)的選中項(xiàng)。（5）“列表值”按鈕：?jiǎn)螕粼摪粹o，可以調(diào)出一個(gè)“列表值”對(duì)話框，與圖8-1-8相似，其使用方法基本相同。利用該對(duì)話框可以輸入菜單或列表內(nèi)顯示的選項(xiàng)內(nèi)容（在“標(biāo)簽”欄內(nèi)），以及輸入此選項(xiàng)提交后的返回值（在“值”欄內(nèi)）。8．設(shè)置文件域的屬性文件域也叫文件字段，用來讓用戶選擇磁盤、路徑和文件，并將該文件上傳到服務(wù)器中。它的“屬性”欄如圖8-1-10所示，其中各選項(xiàng)的作用如下。

8.1“資金收入/支出登記表”網(wǎng)頁

圖8-1-10文件域的“屬性”欄

圖8-1-11圖像域的“屬性”欄8.1“資金收入/支出登記表”網(wǎng)頁

（1）“字符寬度”文本框：用于輸入文件域的寬度，即一行中可顯示字符的最多個(gè)數(shù)。（2）“最多字符數(shù)”文本框：用于輸入允許用戶輸入的字符個(gè)數(shù)，可以比文件域的寬度值大。9．設(shè)置圖像域的屬性圖像域用于設(shè)置圖像域內(nèi)的圖像。它的“屬性”欄如圖8-1-11所示。圖8-1-11圖像域的“屬性”欄（1）“寬”和“高”文本框：用于輸入圖像的寬度和高度，單位為像素。（2）“源文件”文本框與文件夾按鈕：?jiǎn)螕粼摪粹o，可調(diào)出一個(gè)對(duì)話框，用于選擇圖像文件。也可以在文本框內(nèi)直接輸入圖像的路徑與文件名。（3）“替代”文本框：在其內(nèi)輸入的文字會(huì)在光標(biāo)移到圖像上面時(shí)顯示出來。（4）“對(duì)齊”下拉列表框：用于選定圖像在瀏覽器中的對(duì)齊方式。（5）“編輯圖像”按鈕：?jiǎn)螕粼摪粹o，可以調(diào)出設(shè)定的圖像編輯器，對(duì)圖像進(jìn)行編輯。10．設(shè)置隱藏域的屬性隱藏域提供了一個(gè)可以存儲(chǔ)表單主題、數(shù)據(jù)等的容器。隱藏域在瀏覽器中看不到，但處理表單的腳本程序時(shí)可以調(diào)用其中的內(nèi)容。其“屬性”欄如圖8-1-12所示，其中各選項(xiàng)的作用如下。

8.1“資金收入/支出登記表”網(wǎng)頁（1）“隱藏區(qū)域”文本框：用于輸入隱藏域的名稱，以便于在程序中引用。（2）“值”文本框：用于輸入隱藏域的數(shù)值。如果在加入隱藏域時(shí)，沒有顯示圖標(biāo)，可以執(zhí)行“編輯”→“首選參數(shù)”菜單命令，調(diào)出“首選參數(shù)”對(duì)話框，再在“分類”欄中選擇“不可見元素”選項(xiàng)。然后選中“表單隱藏區(qū)域”復(fù)選框，再單擊“確定”按鈕退出，即可在Dreamweaver中顯示圖標(biāo)。

圖8-1-12隱藏域的“屬性”欄8.2導(dǎo)入“網(wǎng)絡(luò)技術(shù)”網(wǎng)頁

一直以來，Word給用戶的印象是一個(gè)出色的文字處理軟件，其實(shí)，它也是一款非常優(yōu)秀的網(wǎng)頁制作軟件。只不過Word所使用的HTML語言與一般的HTML語言有所不同，所以導(dǎo)致除Word以外的軟件很難編輯Word生成的網(wǎng)頁。在Dreamweaver里面，包含了對(duì)Word生成的HTML文件的支持，很輕松就能夠?qū)ord生成的HTML文件導(dǎo)入?！熬W(wǎng)絡(luò)技術(shù)”網(wǎng)頁在Word中的顯示效果如圖8-2-1所示，該網(wǎng)頁導(dǎo)入到Dreamweaver后的顯示效果如圖8-2-2所示。

圖8-2-1“網(wǎng)絡(luò)技術(shù)”網(wǎng)頁在Word中的顯示效果圖8-2-2

網(wǎng)頁在Dreamweaver中的顯示效果

8.2導(dǎo)入“網(wǎng)絡(luò)技術(shù)”網(wǎng)頁

8.2.1“清理Word生成的HTML”對(duì)話框1．“基本”選項(xiàng)卡執(zhí)行“命令”→“清理World生成的HTML”菜單命令，即可調(diào)出“清理Word生成的HTML”對(duì)話框，如圖8-2-3所示，其中各選項(xiàng)的含義如下。

圖8-2-3“基本”選項(xiàng)卡8.2導(dǎo)入“網(wǎng)絡(luò)技術(shù)”網(wǎng)頁

（1）“清理的HTML來自”下拉列表框：選擇Word版本，不同版本略有不同，包括Word2000/2002和Word97/98兩個(gè)列表項(xiàng)。（2）“刪除所有Word特定的標(biāo)記”復(fù)選框：刪除HTML網(wǎng)頁文檔中所有和Word有關(guān)的標(biāo)記。（3）“清理CSS”復(fù)選框：清除所有的CSS樣式表。（4）“清理<font>標(biāo)簽”復(fù)選框：清楚所有字體設(shè)置。（5）“修正無效的嵌套標(biāo)簽”復(fù)選框：修正生成網(wǎng)頁文檔時(shí)產(chǎn)生的無效嵌套標(biāo)簽。（6）“設(shè)定背景顏色”文本框：重新設(shè)定網(wǎng)頁文檔的背景顏色，默認(rèn)為白色（#FFFFFF）。（7）“應(yīng)用源格式”復(fù)選框：保持網(wǎng)頁文檔的格式。（8）“完成時(shí)顯示動(dòng)作記錄”復(fù)選框：完成導(dǎo)入WordHTML網(wǎng)頁文檔后顯示修改摘要。2．“詳細(xì)”選項(xiàng)卡詳細(xì)選項(xiàng)卡的顯示效果如圖8-2-4所示，其中各選項(xiàng)的含義如下。

8.2導(dǎo)入“網(wǎng)絡(luò)技術(shù)”網(wǎng)頁

圖8-2-4“詳細(xì)”選項(xiàng)卡8.2導(dǎo)入“網(wǎng)絡(luò)技術(shù)”網(wǎng)頁

（1）“清理HTML來自”下拉列表框：選擇Word版本，其中包括Word2000/2002和Word97/98兩個(gè)選項(xiàng)。不同版本的Word軟件略有不同，所以此處需要進(jìn)行選擇。（2）“刪除所有Word特定的標(biāo)記”復(fù)選框：刪除HTML網(wǎng)頁文檔中所有和Word有關(guān)的標(biāo)記。如果不打開本標(biāo)簽，則下面的子標(biāo)簽均不被選中。（3）“<html>標(biāo)簽中XML”復(fù)選框：清除<html>段的XML標(biāo)記。（4）“<head>中的Wordmeta和link標(biāo)簽”復(fù)選框：清除<head>中的Word標(biāo)記和鏈接。（5）“WordXML標(biāo)記”復(fù)選框：清除Word產(chǎn)生的XML標(biāo)記。（6）“<![if...]><![endif]>條件式標(biāo)簽和其內(nèi)容”復(fù)選框：清除IF判斷語句。（7）“移除樣式中空的段落和邊界”復(fù)選框：清除空行和空的邊界。（8）“清理CSS”復(fù)選框：清除所有CSS樣式表。（9）“盡可能地移除行內(nèi)CSS樣式”復(fù)選框：盡量清除網(wǎng)頁文檔內(nèi)的所有CSS樣式。（10）“移除所有開頭為‘mso’的樣式屬性”復(fù)選框：清除所有以MSO開頭的樣式。（11）“移除所有非CSS的樣式宣告”復(fù)選框：清除所有CSS以外的樣式。（12）“移除表格直行和橫列中的所有CSS樣式”復(fù)選框：清除表格內(nèi)的樣式。（13）“移除所有未使用到的樣式定義”復(fù)選框：清除網(wǎng)頁中沒有被使用的樣式。

8.2導(dǎo)入“網(wǎng)絡(luò)技術(shù)”網(wǎng)頁

8.2.2導(dǎo)入Word文檔和Excel文檔1．導(dǎo)入Word文檔在Dreamweaver中執(zhí)行“文件”→“導(dǎo)入”→“Word文檔”菜單命令，調(diào)出“打開”對(duì)話框。選中要導(dǎo)入的Word文檔后，單擊“確定”按鈕，即可在已經(jīng)打開的頁面中導(dǎo)入選中的Word文檔中的內(nèi)容，但是Word文檔中的圖像無法導(dǎo)入到網(wǎng)頁中。2．導(dǎo)入Excel文檔在Dreamweaver中執(zhí)行“文件”→“導(dǎo)入”→“Excel文檔”菜單命令，調(diào)出“打開”對(duì)話框。選中要導(dǎo)入的Excel文檔后，單擊“確定”按鈕，即可在已經(jīng)打開的頁面中以表格的形式導(dǎo)入選中的Excel文檔中的內(nèi)容。

8.3重做“照相館”網(wǎng)頁

利用“創(chuàng)建網(wǎng)站相冊(cè)”命令重做后的“照相館”網(wǎng)頁在瀏覽器中的顯示效果如圖8-3-1所示。在主頁中單擊圖像后，可鏈接到相應(yīng)的瀏覽頁面，顯示出該圖像的原始圖，圖像名稱以及到“上一個(gè)”、“首頁”和“下一個(gè)”的鏈接。

圖8-3-1“照相館”網(wǎng)頁的顯示效果8.3重做“照相館”網(wǎng)頁

8.3.1應(yīng)用DreamweaverMX2004內(nèi)置命令創(chuàng)建相冊(cè)有許多網(wǎng)站是以圖片為主要內(nèi)容的。這些網(wǎng)站中往往先顯示圖片的縮略圖，瀏覽者如果感興趣的話，單擊縮略圖就可以瀏覽原圖。當(dāng)一個(gè)網(wǎng)站的圖片非常多時(shí)，如果要分別制作每個(gè)頁面，則工作量是很大的。創(chuàng)建相冊(cè)命令可以自動(dòng)創(chuàng)建這樣的一系列頁面，使網(wǎng)頁制作變得非常簡(jiǎn)單。下面介紹如何創(chuàng)建相冊(cè)網(wǎng)頁。1．調(diào)出“創(chuàng)建網(wǎng)站相冊(cè)”對(duì)話框執(zhí)行“命令”→“創(chuàng)建網(wǎng)站相冊(cè)”菜單命令，即可調(diào)出“創(chuàng)建網(wǎng)站相冊(cè)”對(duì)話框，如圖8-3-2所示。2．“創(chuàng)建網(wǎng)站相冊(cè)”對(duì)話框中的各選項(xiàng)的作用（1）“相冊(cè)標(biāo)題”文本框：輸入相冊(cè)的標(biāo)題，該標(biāo)題是必須填入的。（2）“副標(biāo)信息”文本框：輸入相冊(cè)的副標(biāo)題信息。（3）“其他信息”文本框：輸入相冊(cè)的其他說明信息。（4）“源圖像文件夾”欄：用于選擇源圖像文件所在的目錄。（5）“目標(biāo)文件夾”欄：用于選擇創(chuàng)建的相冊(cè)放置的目錄。（6）“縮略圖大小”下拉列表框：設(shè)置縮略圖的大小。（7）“顯示文件名”復(fù)選框：選中該復(fù)選框后，將會(huì)在縮略圖下方顯示每個(gè)圖片的文件名。

8.3重做“照相館”網(wǎng)頁

圖8-3-2“創(chuàng)建網(wǎng)站相冊(cè)”對(duì)話框8.3重做“照相館”網(wǎng)頁

利用該功能，可以將圖片文件名設(shè)為對(duì)該圖片的簡(jiǎn)單說明，這樣最后生成的頁面就會(huì)包含圖片說明了。不過該軟件對(duì)中文說明的支持不是很好，最好使用英文說明。（8）“列”文本框：輸入圖像的列數(shù)。默認(rèn)值是5，即每行顯示5張縮略圖。（9）“縮略圖格式”下拉列表框：用于選擇縮略圖的格式。Dreamweaver會(huì)自動(dòng)產(chǎn)生選定格式的縮略圖。（10）“相片格式”下拉列表框：用于選擇原圖像顯示的格式。源圖像可能是各種格式的，Dreamweaver可以將它們轉(zhuǎn)化為統(tǒng)一的格式。（11）“小數(shù)位數(shù)”文本框：用于輸入圖像縮放的百分比。（12）“為每張相片建立導(dǎo)航頁面”復(fù)選框：選中該復(fù)選框后，Dreamweaver將為每個(gè)圖像生成單獨(dú)的導(dǎo)航頁。完成設(shè)置后單擊“確定”按鈕，Dreamweaver就開始自動(dòng)生成相冊(cè)。最后生成的相冊(cè)頁面，可以對(duì)其進(jìn)一步設(shè)置格式以完成該相冊(cè)。單擊其中任意一幅縮略圖，都會(huì)顯示相應(yīng)的原圖圖像頁面，如圖8-3-3所示。頁面最上端顯示相冊(cè)標(biāo)題和該圖片的文件名，中間是導(dǎo)航欄，下邊是原圖圖像。

8.3重做“照相館”網(wǎng)頁

圖8-3-3圖像的瀏覽頁面8.3重做“照相館”網(wǎng)頁

8.3.2利用Fireworks優(yōu)化圖像在Dreamweaver中可以調(diào)用Fireworks中的“優(yōu)化”（Optimize）窗口對(duì)圖像進(jìn)行優(yōu)化。選中一幅圖像后，執(zhí)行“命令”→“在Fireworks中優(yōu)化圖像”菜單命令。如果文件還沒有被保存，會(huì)彈出一個(gè)對(duì)話框，提示先保存頁面。第一次使用該命令時(shí)會(huì)彈出“查找源”對(duì)話框，詢問是否使用一個(gè)外部PNG文件作為優(yōu)化的源文件，如圖8-3-4所示。如果不想每次出現(xiàn)該對(duì)話框，則從下拉列表中選擇“始終使用源PNG”或“不使用源PNG”選項(xiàng)即可。單擊“使用PNG”按鈕可以選擇源文件，單擊“使用此文件”按鈕則直接出現(xiàn)“優(yōu)化”（Optimize）窗口。從“格式”下拉列表中選擇一種優(yōu)化格式，再進(jìn)行相關(guān)設(shè)置，然后單擊“更新”按鈕即可更新圖像。

8.3重做“照相館”網(wǎng)頁

圖8-3-4“查找源”對(duì)話框8.4格式化“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

格式化后“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁的顯示效果如圖8-4-1所示。使用Dreamweaver中的“錄制命令”命令，可以快速復(fù)制網(wǎng)頁中的操作，達(dá)到簡(jiǎn)化對(duì)網(wǎng)頁中元素格式化的操作的目的。

圖8-4-1格式化后“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁的顯示效果8.4格式化“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

8.4.1自定義命令除了可以使用系統(tǒng)內(nèi)置的命令外，還可以利用自定義的方法將歷史記錄保存為命令。1．“歷史”面板“歷史”面板記錄了用戶的每一步操作，如圖8-4-2所示。利用該面板可以撤銷一些操作。例如，需要返回第一步操作后的效果時(shí)，只需將“歷史”面板左側(cè)的指針拖曳至第二步即可。還可以通過“歷史”面板重復(fù)一系列操作，方法如下。（1）按住Ctrl鍵的同時(shí)單擊“歷史記錄”面板中的兩條需要重復(fù)的步驟，如圖8-4-3所示。（2）在頁面窗口中選擇需要執(zhí)行這些步驟的對(duì)象。（3）單擊“歷史記錄”面板中的“重放”按鈕即可。2．利用“歷史”面板自定義命令利用“歷史記錄”面板重復(fù)步驟只能應(yīng)用于同一個(gè)文件內(nèi)的對(duì)象，如果要應(yīng)用到其他文件，則可以將這些步驟保存為命令，在其他文件中執(zhí)行“命令”菜單中的相應(yīng)命令，調(diào)用這些步驟。利用“歷史記錄”面板自定義命令的方法如下。（1）按住Ctrl鍵的同時(shí)選中“歷史記錄”面板中需要保存的步驟。

8.4格式化“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

圖8-4-2“歷史記錄”面板圖8-4-3選擇兩條操作8.4格式化“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

（2）單擊“歷史記錄”面板右下角的“將選定步驟保存為命令”按鈕，調(diào)出“保存為命令”對(duì)話框，如圖8-4-4所示。在其中的文本框中輸入命令的名稱，再單擊“確定”按鈕。（3）這時(shí)在“命令”菜單中就可以看到剛命名的菜單命令，以后就可以像使用系統(tǒng)命令那樣使用這個(gè)自定義命令了。（4）刪除自定義命令：執(zhí)行“命令”→“編輯命令列表”菜單命令，調(diào)出“編輯命令列表”對(duì)話框。選中要?jiǎng)h除的命令，再單擊“刪除”按鈕，即可刪除該命令。利用該對(duì)話框也可以重新命名自定義的命令。

圖8-4-4“保存為命令”對(duì)話框8.4格式化“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁

8.4.2錄制命令1．錄制命令（1）執(zhí)行“命令”→“開始錄制”菜單命令，即可開始錄制命令。（2）使用鼠標(biāo)在網(wǎng)頁中進(jìn)行操作，如添加對(duì)象、加入新的行為、設(shè)置網(wǎng)頁中文字或段落的格式等。（3）執(zhí)行“命令”→“停止錄制”菜單命令，即可停止錄制命令。2．播放錄制命令（1）將光標(biāo)移到網(wǎng)頁中或選中需要應(yīng)用“錄制命令”的元件。（2）執(zhí)行“命令”→“播放錄制命令”菜單命令，即可在網(wǎng)頁中應(yīng)用錄制的命令。

8.5插件管理器

使用“插件”可以輕松地向Macromeida公司的軟件中增加新的功能。許多Macromedia的合作伙伴以及獨(dú)立開發(fā)人員創(chuàng)建了自定義服務(wù)器行為，以便滿足特定的Web的開發(fā)需要?？梢詮腗acromediaExchangeforDreamweaver站點(diǎn)訪問和下載這些自定義服務(wù)器行為。在“擴(kuò)展管理器”中安裝插件后，其顯示效果如圖8-5-1所示。

圖8-5-1“擴(kuò)展管理器”的顯示效果

8.5插件管理器

8.5.1“擴(kuò)展管理器”簡(jiǎn)介Macromedia“擴(kuò)展管理器”的顯示效果如圖8-5-1所示?！皵U(kuò)展管理器”中包括“標(biāo)題欄”、“菜單欄”、“工具欄”、“插件欄”和“說明欄”。在該窗口中，“標(biāo)題欄”和“菜單欄”與其他軟件的功能相同，此處不再贅述。“工具欄”中包含插件的基本操作按鈕和插件應(yīng)用對(duì)象的下拉列表框?！罢f明欄”中顯示了選中插件的說明，不過絕大部分的說明都是英文的。“插件欄”中顯示了已經(jīng)安裝的插件。Dreamweaver中的插件分為“命令”型和“插入”型兩種。其中，“命令”型插件顯示為“命令”菜單中的一個(gè)菜單命令；“插入”型插件顯示為“插入”欄中的一個(gè)標(biāo)簽項(xiàng)，如圖8-5-2所示。

圖8-5-2“插入”欄中的“RealAudio”插件標(biāo)簽項(xiàng)8.5插件管理器

8.5.2“擴(kuò)展管理器”中各選項(xiàng)的功能1．工具欄（1）“安裝新擴(kuò)展”按鈕：?jiǎn)螕舸税粹o后，調(diào)出“選取要安裝的擴(kuò)展”對(duì)話框，在該對(duì)話框中選擇相應(yīng)的文件后單擊“確定”按鈕，即可插入新的插件。（2）“移除擴(kuò)展”按鈕：選中列表中的插件后單擊此按鈕，將刪除該插件。（3）“轉(zhuǎn)到MacromediaExchange”按鈕：?jiǎn)螕舸税粹o，將鏈接到MacromediaExchange網(wǎng)站。（4）“幫助”按鈕：?jiǎn)螕舸税粹o，將打開“擴(kuò)展管理器”的幫助文件。（5）列表框：顯示出Macromedia公司的軟件，在列表框中選擇軟件后，支持該軟件的插件就會(huì)顯示出來。2．菜單項(xiàng)（1）安裝擴(kuò)展：與“安裝新擴(kuò)展”按鈕功能相同，用于安裝新的插件。（2）將擴(kuò)展打包：?jiǎn)螕舸税粹o后，將調(diào)出“選取要打包的擴(kuò)展”對(duì)話框，如圖8-5-3所示。選擇要打包的擴(kuò)展信息文件后，將擴(kuò)展打包成.mxp文件。

8.5插件管理器

圖8-5-3“選取要打包的擴(kuò)展”對(duì)話框8.5插件管理器

（3）提交擴(kuò)展：?jiǎn)螕舸税粹o，可以將制作好的打包文件提交到網(wǎng)站，供其他人使用。（4）移除擴(kuò)展：與“移除擴(kuò)展”按鈕作用相同，用于刪除選中的插件。（5）導(dǎo)入擴(kuò)展：?jiǎn)螕舸税粹o后，調(diào)出如圖8-5-4所示的“選取產(chǎn)品”對(duì)話框。在“要從中導(dǎo)入的產(chǎn)品”下拉列表框中選擇要導(dǎo)入到的軟件，然后在“要導(dǎo)入的產(chǎn)品的位置”文本框中輸入軟件的位置，單擊“確定”按鈕后，將從選中的軟件中導(dǎo)入插件。

圖8-5-4“選取產(chǎn)品”對(duì)話框8.5插件管理器

（6）轉(zhuǎn)到MacromediaExchange：與“轉(zhuǎn)到MacromediaExchange”按鈕功能相同，單擊此菜單命令，將鏈接到MacromediaExchange網(wǎng)站。

8.6“電影放映室”網(wǎng)頁

使用RealMediaSuite插件制作的“電影放映室”網(wǎng)頁在瀏覽器中的顯示效果如圖8-6-1所示。單擊播放控制器中的按鈕，即可在Real播放器中播放Real文件，并在“剪輯信息”文本框中滾動(dòng)顯示文件名和文件信息。播放視頻的同時(shí)，在頁面的狀態(tài)欄中還會(huì)滾動(dòng)顯示包含歡迎信息的狀態(tài)欄文字，如圖8-6-2所示。

圖8-6-1“電影放映室”網(wǎng)頁的顯示效果8.6“電影放映室”網(wǎng)頁

圖8-6-2“狀態(tài)欄”滾動(dòng)時(shí)的顯示效果8.6“電影放映室”網(wǎng)頁

8.6.1RealMedia選項(xiàng)卡中各按鈕的作用（1）RealAudio按鈕：?jiǎn)螕粼摪粹o，可以調(diào)出“選擇文件”對(duì)話框，在該對(duì)話框中選擇一個(gè)音頻格式的文件后單擊“確定”按鈕，即可在網(wǎng)頁中插入RealAudio格式的背景音樂。（2）RealMediaControl按鈕：?jiǎn)螕粼摪粹o，可以在網(wǎng)頁中插入RealMedia控制器，用于控制網(wǎng)頁中的Real視頻文件和聲音文件。（3）RealVedio按鈕：?jiǎn)螕粼摪粹o后，在彈出的“選擇文件”對(duì)話框中選擇一個(gè)視頻格式的文件，即可在網(wǎng)頁中插入Real格式的視頻文件。（4）SMIL按鈕：?jiǎn)螕粼摪粹o，在彈出的“選擇文件”對(duì)話框中選擇一個(gè)Real音頻或者視頻格式的文件，即可在網(wǎng)頁中插入一個(gè)在線播放的窗口（使用同步多媒體語言）。（5）RealAbout按鈕：?jiǎn)螕粼摪粹o，可以調(diào)出“AboutRealSystemExtensions”網(wǎng)頁，其中包括RealSystem的介紹文檔和幫助信息，如圖8-6-3所示。

8.6“電影放映室”網(wǎng)頁

圖8-6-3AboutRealSystemExtensions網(wǎng)頁文檔8.6“電影放映室”網(wǎng)頁

8.6.2定義“狀態(tài)欄”文字在“擴(kuò)展管理器”中安裝“ScrollingStatusBar”插件后，Dreamweaver中的“插入”欄中會(huì)增加“Scrolling_Status_Bar”選項(xiàng)卡，如圖8-6-4所示。

圖8-6-4“插入”（Scrolling_Status_Bar）欄的顯示效果8.6“電影放映室”網(wǎng)頁

單擊“插入”（Scrolling_Status_Bar）欄中的“Scrolling_Status_Bar”按鈕，即可調(diào)出“Scrolling_Status_Bar”對(duì)話框，如圖8-6-5所示。圖8-6-5“Scrolling_Status_Bar”對(duì)話框在“ScrollText1”～“ScrollText5”文本框中依次輸入在“狀態(tài)欄”中要交替顯示的文字，然后單擊“確定”按鈕，即可在網(wǎng)頁中插入“狀態(tài)欄”中的滾動(dòng)文字。

8.6“電影放映室”網(wǎng)頁

圖8-6-5“Scrolling_Status_Bar”對(duì)話框8.7用插件豐富“自我介紹”網(wǎng)頁

使用“RightC