《多媒體技術(shù)與網(wǎng)頁設(shè)計(jì)》課件第20章

第20章文本和圖像20.1文本添加20.2文本格式20.3圖像

20.1文本添加

20.1.1添加文本的方法

在網(wǎng)頁中添加文本可以采用直接輸入文本、從其它文檔中復(fù)制文本和導(dǎo)入文本三種方法。

1.輸入文本

最常用的是直接輸入文本，其方法只需將光標(biāo)移動(dòng)到需添加文本的位置，打開所需的輸入法直接輸入文本，如圖20.1所示。圖20.1正在輸入網(wǎng)頁文本

2.復(fù)制文本

為節(jié)省輸入文本的時(shí)間，提高網(wǎng)頁制作速度，有時(shí)可從其它文檔中復(fù)制文本。先選擇要復(fù)制的文本，如圖20.2所示，選擇“編輯”→“復(fù)制”命令或按Ctrl+C鍵復(fù)制，然后轉(zhuǎn)到Dreamweaver8中，將光標(biāo)移到需添加文本的位置，再按Ctrl+V鍵進(jìn)行粘貼即可，如圖20.3所示。圖20.2原始文本圖20.3復(fù)制文本

3.導(dǎo)入文本

使用Dreamweaver8可以導(dǎo)入XML模板、?表格式數(shù)

據(jù)、Word及Excel等格式的文檔，下面以導(dǎo)入Excel中的表格數(shù)據(jù)為例進(jìn)行介紹，其具體操作步驟如下：

(1)選擇“文件”→“導(dǎo)入”→“Excel文檔”命令，彈出“導(dǎo)入Excel文檔”對(duì)話框。

(2)在“查找范圍”中選擇導(dǎo)入文檔的路徑，選擇要導(dǎo)入的文件，這里選擇“在校情況統(tǒng)計(jì).xls”文件，再在“格式化”下拉列表框中選擇需要保留的格式，這里選擇“文本、結(jié)構(gòu)、基本格式(粗體、斜體)”選項(xiàng)，如圖20.4所示。

(3)單擊“打開”按鈕，導(dǎo)入“在校情況統(tǒng)計(jì).xls”文件的內(nèi)容，如圖20.5所示。圖20.4“導(dǎo)入Excel文檔”對(duì)話框圖20.5導(dǎo)入的內(nèi)容20.1.2添加日期

在Dreamweaver8中，可以插入當(dāng)前系統(tǒng)日期或時(shí)

間，其具體操作步驟如下：

(1)將光標(biāo)移到需要插入的位置，選擇“插入”→“日期”命令，彈出如圖20.6所示的“插入日期”對(duì)話框，同時(shí)，還可以設(shè)置星期格式、日期格式和時(shí)間格式。圖20.6“插入日期”對(duì)話框

(2)選中“儲(chǔ)存時(shí)自動(dòng)更新”復(fù)選框，這樣在保存文檔時(shí)都會(huì)自動(dòng)更新當(dāng)前的日期。單擊“確定”按鈕，在網(wǎng)頁中可以插入日期和時(shí)間，如圖20.7所示。圖20.7在網(wǎng)頁中插入日期和時(shí)間20.1.3添加水平線

在進(jìn)行網(wǎng)頁編輯時(shí)，有時(shí)需要使用水平線將各種對(duì)

象分隔開來，如在標(biāo)題和正文之間添加一條水平線，如圖20.8所示。圖20.8網(wǎng)頁中的水平線

1.添加水平線

在編輯窗口中將光標(biāo)移到需要插入水平線的位置，選擇“插入”→“HTML”→“水平線”命令，即可實(shí)現(xiàn)水平線的添加。也可將“插入”欄切換到“HTML”插入欄，單擊

按鈕添加水平線，如圖20.9所示。圖20.9插入水平線

2.修改水平線

對(duì)于插入的水平線有時(shí)還要修改其寬度、高度及對(duì)齊方式等屬性。其操作方法為：選擇要修改的水平線，此時(shí)“屬性”面板如圖20.10所示。在“寬”和“高”文本框中可修改水平線的寬度和高度值；在“對(duì)齊”下拉列表框中設(shè)置水平線的對(duì)齊方式，如左對(duì)齊、居中對(duì)齊、右對(duì)齊等；選中“陰影”復(fù)選框，水平線會(huì)有陰影效果。圖20.10“屬性”面板20.1.4添加特殊字符

(1)將光標(biāo)移到所需位置。

(2)單擊“插入”欄右邊的按鈕，在彈出的菜單中選擇“文本”命令，如圖20.11所示。將“插入”欄切換為“文本”插入欄，如圖20.12所示。

(3)單擊按鈕右側(cè)的按鈕，彈出如圖20.13所示的菜單，選擇需添加的特殊字符即可。圖20.11選擇“文本”命令圖20.12“文本”插入欄圖20.13選擇特殊字符

20.2文本格式

文本是網(wǎng)頁中最主要的內(nèi)容，如果網(wǎng)頁中的文本樣式太單調(diào)就會(huì)影響網(wǎng)頁的視覺效果，因此，需要對(duì)文本的格式進(jìn)行設(shè)置，使其更加美觀。

文本的格式設(shè)置是在文本“屬性”面板中進(jìn)行的?！皩傩浴泵姘迦鐖D20.14所示，首先選擇要設(shè)置的文本，然后設(shè)置文本的字體格式和段落格式。圖20.14“屬性”面板20.2.1設(shè)置字體格式

1.字體

首先要選擇文本，在“字體”下拉列表框中選擇需要的字體。在默認(rèn)情況下，在“字體”下拉列表框中可以選擇的字體很少，一般情況下不能滿足編輯網(wǎng)頁文本的需求，這時(shí)可以在“字體”下拉列表框中選擇“編輯字體列表”選項(xiàng)，在彈出的“編輯字體列表”對(duì)話框中增加需要的字體，其具體操作步驟如下：

(1)在文本“屬性”面板的“字體”下拉列表框中選擇“編輯字體列表”選項(xiàng)，彈出“編輯字體列表”對(duì)話框，如圖20.15所示。圖20.15“編輯字體列表”對(duì)話框

(2)在“可用字體”列表框中選擇需要添加的字體，單擊“《”按鈕將其添加到左側(cè)的“選擇的字體”列表框中。如果要添加多種字體，重復(fù)操作即可；若需取消某種字體，選擇該字體后單擊“》”按鈕即可。

(3)選擇一個(gè)字體樣式后單擊“字體列表”列表框左上角的“+”按鈕可將該字體添加到“字體”下拉列表框；如果需刪除某個(gè)字體樣式，選擇該樣式后單擊“-”按鈕即可。

(4)單擊“確定”按鈕關(guān)閉對(duì)話框，完成字體的添加。

2.字號(hào)

設(shè)置字體大小可在“大小”下拉列框表中選擇需要的

字號(hào)。字號(hào)除了用數(shù)字表示外，還有“極小”、“極大”等選項(xiàng)，其含義如下：

(1)較大：在原字號(hào)的基礎(chǔ)上大一點(diǎn)。

(2)較?。涸谠痔?hào)的基礎(chǔ)上小一點(diǎn)。

(3)極大：介于24～36之間的字號(hào)。

(4)特大：介于16～18之間的字號(hào)。

(5)大：介于14～16之間的字號(hào)。

(6)中：介于12～14之間的字號(hào)。

(7)小：介于10～12之間的字號(hào)。

(8)特?。菏褂帽葮O小大一點(diǎn)的字號(hào)。

(9)極?。菏褂米钚〉淖痔?hào)。

3.顏色

在Dreamweaver中，對(duì)網(wǎng)頁中的文本不但可以進(jìn)行字體和大小設(shè)置，還可對(duì)顏色進(jìn)行修改。修改顏色的具體步驟如下：

(1)選擇要設(shè)置顏色的文本，單擊“屬性”面板中的

按鈕，彈出顏色列表，如圖20.16所示。

(2)此時(shí)鼠標(biāo)指針變?yōu)樾螤睿瑔螕粜枰念伾?，即可將文本設(shè)置為該顏色。

(3)如果列表中沒有需要的顏色，可單擊按鈕，彈出“顏色”對(duì)話框，在其中選擇需要的顏色，如圖20.17所示。

(4)單擊“確定”按鈕關(guān)閉“顏色”對(duì)話框，此時(shí)即可將文本設(shè)置為該顏色。圖20.16顏色列表圖20.17“顏色”對(duì)話框20.2.2設(shè)置段落格式

1.段落的縮進(jìn)

設(shè)置段落縮進(jìn)包括增加段落的縮進(jìn)和減少段落的縮進(jìn)兩種。將光標(biāo)移到需要設(shè)置格式的段落中，單擊“文本縮進(jìn)”按鈕可增加縮進(jìn)該段落，單擊“文本凸出”按鈕可減少段落的縮進(jìn)。

2.段落的對(duì)齊

可以對(duì)文本段落進(jìn)行居中、左對(duì)齊、右對(duì)齊、兩端對(duì)齊等操作。操作的步驟是首先將光標(biāo)移到需要設(shè)置對(duì)齊方式的段落中，單擊“屬性”面板中的“左對(duì)齊”按鈕，將對(duì)齊方式設(shè)置為左對(duì)齊，效果如圖20.18所示；單擊“屬性”面板中的“居中對(duì)齊”按鈕，將對(duì)齊方式設(shè)置為居中對(duì)齊，效果如圖20.19所示；單擊“右對(duì)齊”按鈕，將對(duì)齊方式設(shè)置為右對(duì)齊，效果如圖20.20所示；單擊“兩端對(duì)齊”按鈕，將對(duì)齊方式設(shè)置為兩端對(duì)齊，效果如圖20.21

所示。圖20.18左對(duì)齊圖20.19居中對(duì)齊圖20.20右對(duì)齊圖20.21兩端對(duì)齊20.2.3創(chuàng)建列表

列表有項(xiàng)目列表和編號(hào)列表兩種，用列表的方式進(jìn)行羅列可使內(nèi)容更直觀，它們常應(yīng)用于條款和列舉等類型的文本中。

1.項(xiàng)目列表

選擇所需要設(shè)置的文本(如圖20.22所示)，單擊“屬性”面板中的“項(xiàng)目列表”按鈕(如圖20.23所示)，即可將文本設(shè)置為項(xiàng)目列表樣式，如圖20.24所示。圖20.22原始圖圖20.23“屬性”面板中的按鈕圖20.24應(yīng)用項(xiàng)目列表后的效果

2.編號(hào)列表

選擇所需要設(shè)置的文本(如圖20.22所示)，單擊“屬性”面板中的“編號(hào)列表”按鈕(如圖20.23所示)，即可將文本設(shè)置為編號(hào)列表樣式，如圖20.25所示。圖20.25應(yīng)用編號(hào)列表后的效果20.3圖像

選擇“插入”→“圖像”命令，可以直接在網(wǎng)頁中插入圖像，其具體操作步驟如下：

(1)將光標(biāo)移到需要插入圖像的位置。

(2)選擇“插入”→“圖像”命令，彈出“選擇圖像源文件”對(duì)話框。

(3)在“查找范圍”下拉列表框中選擇所需圖片的位置，并選擇需要的文件，如圖20.26所示。20.3.1直接插入圖像

(4)單擊“確定”按鈕，彈出一個(gè)提示對(duì)話框，詢問是否將圖像復(fù)制到站點(diǎn)的根文件夾中，單擊“是”按鈕，如圖20.27所示。

(5)在彈出的“復(fù)制文件為”對(duì)話框中單擊“保存”按鈕，如圖20.28所示。圖20.27提示是否復(fù)制圖像文件圖20.28“復(fù)制文件為”對(duì)話框

(6)在彈出的“圖像標(biāo)簽輔助功能屬性”對(duì)話框中單擊“確定”按鈕(如圖20.29所示)，將圖像插入到網(wǎng)頁中，效果如圖20.30所示。圖20.29“圖像標(biāo)簽輔助功能屬性”對(duì)話框圖20.30插入圖像20.3.2插入圖像占位符

有時(shí)候需要在網(wǎng)頁的某個(gè)位置插入一個(gè)圖像，但還沒有確定插入哪幅圖像，此時(shí)可以先插入一個(gè)圖像占位符占據(jù)圖像的位置，等確定圖像后再在占位符中插入圖像。其具體操作步驟如下：

(1)將光標(biāo)移到需要插入圖像的位置，選擇“插入”→

“圖像對(duì)象”→“圖像占位符”命令。

(2)在彈出的“圖像占位符”對(duì)話框中設(shè)置圖像占位符的“名稱”、“寬度”、“高度”和“顏色”，如圖20.31所示。

(3)設(shè)置完成后單擊“確定”按鈕，即可插入圖像占位

符，如圖20.32所示。圖20.31“圖像占位符”對(duì)話框圖20.32插入的圖像占位符

(4)雙擊圖像占位符，將彈出“選擇圖像源文件”對(duì)話框(如圖20.33所示)，此后使用直接插入圖像的方法即可插入圖像，如圖20.34所示。圖20.33“選擇圖像源文件”對(duì)話框圖20.34插入圖像20.3.3插入鼠標(biāo)經(jīng)過圖像

鼠標(biāo)經(jīng)過圖像是指在瀏覽器中查看網(wǎng)頁時(shí)，當(dāng)鼠標(biāo)指針經(jīng)過該圖像時(shí)會(huì)顯示另外一幅圖像的動(dòng)態(tài)效果。插入鼠標(biāo)經(jīng)過圖像時(shí)，需要準(zhǔn)備兩幅圖像—原始圖像和鼠標(biāo)經(jīng)過圖像，默認(rèn)情況下顯示原始圖像。當(dāng)鼠標(biāo)指針移到圖像的范圍內(nèi)時(shí)，顯示鼠標(biāo)經(jīng)過圖像；鼠標(biāo)移出圖像范圍時(shí)則恢復(fù)原始圖像。插入鼠標(biāo)經(jīng)過圖像的具體步驟如下：

(1)在編輯窗口中將光標(biāo)移到要插入鼠標(biāo)經(jīng)過圖像的位置。

(2)單擊插入欄中按鈕右側(cè)的按鈕，在彈出的下拉菜單中選擇“鼠標(biāo)經(jīng)過圖像”命令，如圖20.35所示，或選擇“插入”→“圖像對(duì)象”→“鼠標(biāo)經(jīng)過圖像”命令，彈出“插入鼠標(biāo)經(jīng)過圖像”對(duì)話框，如圖20.36所示。圖20.35選擇“鼠標(biāo)經(jīng)過圖像”命令圖20.36“插入鼠標(biāo)經(jīng)過圖像”對(duì)話框

(3)在“圖像名稱”文本框中輸入圖像的名稱，單擊“原始圖像”和“鼠標(biāo)經(jīng)過圖像”文本框后面的“瀏覽”按鈕，選擇相應(yīng)的圖像，在“替換文本”文本框中輸入替換文本。

(4)單擊“確定”按鈕，關(guān)閉“插入鼠標(biāo)經(jīng)過圖像”對(duì)話

框，鼠標(biāo)經(jīng)過圖像插入到編輯窗口中，按F12鍵在IE瀏覽器中進(jìn)行預(yù)覽，當(dāng)鼠標(biāo)指針經(jīng)過原始圖像時(shí)將顯示鼠標(biāo)經(jīng)過圖像，如圖20.37所示。圖20.37插入鼠標(biāo)經(jīng)過圖像示意圖20.3.4插入導(dǎo)航條

導(dǎo)航條是由多個(gè)按鈕組成的，在制作時(shí)為每個(gè)按鈕準(zhǔn)備1～4張圖片，分別對(duì)應(yīng)按鈕的不同狀態(tài)，當(dāng)鼠標(biāo)指針經(jīng)過或單擊這些按鈕時(shí)，會(huì)顯示相應(yīng)的按鈕圖片并跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)頁。插入導(dǎo)航條的具體步驟如下：

(1)將光標(biāo)移到要插入導(dǎo)航條的位置。

(2)選擇“插入”→“圖像對(duì)象”→“導(dǎo)航條”命令，彈出“插入導(dǎo)航條”對(duì)話框，如圖20.38所示。圖20.38“插入導(dǎo)航條”對(duì)話框

(3)在“項(xiàng)目名稱”文本框中輸入第一個(gè)按鈕的名稱，該名稱顯示在“導(dǎo)航條元件”列表框中。

(4)分別單擊“狀態(tài)圖像”、“鼠標(biāo)經(jīng)過圖像”、“按下圖像”和“按下時(shí)鼠標(biāo)經(jīng)過圖像”文本框后的“瀏覽”按鈕，在

彈出的對(duì)話框中選擇第一個(gè)按鈕的4個(gè)不同狀態(tài)的圖像

文件。

(5)在“替換文本”文本框中輸入當(dāng)導(dǎo)航條錯(cuò)誤顯示時(shí)所顯示的文本內(nèi)容。

(6)單擊“按下時(shí)，前往的URL”文本框后的“瀏覽”按

鈕，在彈出的對(duì)話框中選擇單擊該按鈕時(shí)跳轉(zhuǎn)的目標(biāo)文

件，然后在“in”下拉列表框中選擇打開文件的目標(biāo)窗口。

(7)在“選項(xiàng)”欄中選中“預(yù)先載入圖像”復(fù)選框，表示在瀏覽時(shí)瀏覽器全部下載這些圖像到本地站點(diǎn)中；如果選中“頁面載入時(shí)就顯示“鼠標(biāo)按下圖像”復(fù)選框，則網(wǎng)頁被瀏覽器載入后，將圖像顯示為按下狀態(tài)。

(8)單擊對(duì)話框上方的“+”按鈕可以添加其它導(dǎo)航元

件，重復(fù)以上操作即可。

(9)在“插入”下拉列表框中選擇導(dǎo)航條在網(wǎng)頁中的放置方向。

(10)單擊“確定”按鈕關(guān)閉“插入導(dǎo)航條”對(duì)話框，完成導(dǎo)航條的添加。如圖20.39所示為插入導(dǎo)航條的效果。圖20.39導(dǎo)航條示意圖20.3.5設(shè)置圖像屬性

有時(shí)候需要對(duì)已經(jīng)插入頁面中的圖像進(jìn)行命名、設(shè)

置大小、修改源文件、設(shè)置圖像說明、設(shè)置對(duì)齊方式、設(shè)置邊距和添加邊框等操作，這時(shí)可以通過設(shè)置圖像的屬性來完成。選擇要設(shè)置的圖像，選擇右鍵菜單中的“屬性”命令，彈出如圖20.40所示的“屬性”面板。圖20.40圖像的“屬性”面板

1.圖像命名

在“圖像”文本框中可以對(duì)圖像進(jìn)行命名，這樣在使用行為或編寫腳本程序時(shí)，可以用該名字來引用該圖像。

2.設(shè)置源文件

在“源文件”文本框中顯示當(dāng)前圖像文件的路徑和名

稱，如果要重新選擇一幅圖像，可直接輸入新圖像文件的路徑和名稱或單擊按鈕，在彈出的“選擇圖像源文件”對(duì)話框中進(jìn)行選擇。也可以使用鼠標(biāo)拖動(dòng)“源文件”文本框后邊的圖標(biāo)到頁面中或“文件”面板中的其它圖像上，從而選擇該圖像，如圖20.41所示。圖20.41設(shè)置源文件

3.設(shè)置圖像大小

在“寬”和“高”文本框中顯示當(dāng)前圖像的大小，單位為像素(dpi)。若要改變圖像的寬度和高度，可以在“寬”和“高”文本框中輸入新數(shù)據(jù)，如圖20.42所示。圖20.42設(shè)置圖像大小

4.設(shè)置圖像說明

在“替換”下拉列表框中可以輸入圖像的說明。當(dāng)瀏覽該網(wǎng)頁時(shí)，當(dāng)鼠標(biāo)移到該圖像上時(shí)，鼠標(biāo)指針右下方會(huì)顯示該圖像的說明；當(dāng)圖像無法顯示時(shí)，也會(huì)在圖像的位置上顯示該圖像的說明，如圖20.43所示。圖20.43設(shè)置圖像說明

5.設(shè)置邊距

在“垂直邊距”和“水平邊距”文本框中可以設(shè)置圖像與文本的距離。用“垂直邊距”設(shè)置圖像頂部和底部與文本之間的距離；用“水平邊距”設(shè)置圖像左側(cè)和右側(cè)與文本間隔的距離。如圖20.44所示為設(shè)置不同值時(shí)的效果。圖20.44不同邊距的不同顯示效果

6.設(shè)置圖像邊框

通過“邊框”文本框可以設(shè)置圖像邊框的寬度，單位為像素，輸入0表示無邊框。如圖20.45所示為設(shè)置邊框后的圖像顯示效果。圖20.45設(shè)置圖像邊框的顯示效果

7.設(shè)置對(duì)齊方式

在既有圖像又有文字的網(wǎng)頁中，可以通過“屬性”面板的“對(duì)齊”下拉列表框設(shè)置圖像與文本的對(duì)齊方式，如圖20.46所示。

“對(duì)齊”下拉列表框中各項(xiàng)的含義如下：

(1)默認(rèn)值：取決于瀏覽器，一般指基線對(duì)齊。

(2)基線：將文本基準(zhǔn)線和圖像底端對(duì)齊，如圖20.47所示。

(3)頂端：將文本中最高字符的頂端和圖像頂端對(duì)

齊，如圖20.48所示。

(4)居中：將文本基準(zhǔn)線和圖像的中部對(duì)齊，如圖20.49所示。

(5)底部：將文本和圖像底端對(duì)齊，如圖20.50所示。

(6)文本上方：將文本行中最高字符和圖像的上端對(duì)齊，一般和“頂端”對(duì)齊的效果沒有多大區(qū)別，如圖20.51

所示。圖20.46圖像與文本的對(duì)齊圖20.47基線對(duì)齊圖20.48頂端對(duì)齊圖20.49居中對(duì)齊圖20.50底部對(duì)齊圖20.51文本上方對(duì)齊