第3章 文本及圖像

第3章文本與圖像

機械工業(yè)出版社2008

學(xué)習(xí)要求提前預(yù)習(xí)，上課認(rèn)真聽講課后及時復(fù)習(xí)，獨立認(rèn)真完成作業(yè)

本章重點了解Dreamweaver基本網(wǎng)頁的編輯

熟悉文本和圖像的插入

掌握文本和圖像的屬性設(shè)置

有關(guān)文本和圖像的操作

主要內(nèi)容

3.1文本的編輯3.2圖像的操作3.3鼠標(biāo)經(jīng)過圖像的制作3.1文本的編輯

文本是網(wǎng)頁的核心內(nèi)容，Dreamweaver提供了強大的文本編輯功能，它所見即所得的的功能，使得在網(wǎng)頁中的文本編輯就象在MicrosoftWord字處理軟件中一樣簡單。文本的插入在Dreamweaver中文本的插入有三種方法：直接將文本鍵入頁面、從其他文檔復(fù)制和粘貼、從Office文檔導(dǎo)入。1.直接輸入通過鍵盤直接將文本鍵入頁面是最直接最簡單的文本輸入方法。2.復(fù)制粘貼在其他編輯器中復(fù)制已經(jīng)生成的文本,然后切換到Dreamweaver文檔窗口中,選擇“編輯”→“粘貼”菜單菜單命令或“編輯”→“選擇性粘貼”即可。3.導(dǎo)入MicrosoftOffice文檔Dreamweaver會把導(dǎo)入的Word或Excel文檔轉(zhuǎn)換成HTML文檔。方法是單擊“文件”→“導(dǎo)入”→“Word文檔”或“文件”→“導(dǎo)入”→“Excel文檔”命令，在“導(dǎo)入文檔”對話框中，選擇要添加的文件,然后單擊“打開”按鈕，相應(yīng)的Word或Excel文檔就插入到了網(wǎng)頁中。Dreamweaver除了可以插入一般的文本以外，還可以插入日期和特殊字符。在Dreamweaver中插入日期的方法是單擊“插入”→“日期”菜單命令，會彈出如圖3-1所示的“插入日期”對話框，在出現(xiàn)的對話框中，選擇星期格式、日期格式和時間格式，單擊“確定”按鈕就可以在文檔中插入當(dāng)前時間。如圖3-1所示。3.1文本的編輯

Dreamweaver允許將特殊字符插入到文檔中，方法是單擊菜單欄“插入”→“HTML”→“特殊字符”菜單命令，會彈出“插入其他字符”對話框。選擇所需要的特殊字符，單擊“確定”按鈕完成特殊字符的插入。圖3-1日期的插入3.1文本的編輯

文本屬性的設(shè)置在Dreamweaver中可以為文本塊設(shè)置默認(rèn)格式、更改所選文本的字體、大小、顏色和對齊方式。Dreamweaver中所有與文本操作相關(guān)的命令在“文本”下拉菜單中都有，但在實際操作時，使用文本的“屬性”面板設(shè)置文本的屬性更為便利。在了解文本的屬性之前，先了解一下段落。合理的段落可以使文檔清晰易讀，便于理解。在Dreamweaver文檔中輸入一段文字、插入圖片等對象后，按下【Enetr】鍵，就自動生成一個段落。一般同一段落的文本在格式上統(tǒng)一。按下【Enetr】鍵的操作稱為硬回車，也就是說，段落是帶有硬回車的文字圖片組合。段落格式設(shè)置的方法是先將插入點放到要定義為段落的文字處，然后單擊“屬性”面板中的“格式”下拉列表，選擇段落選項?；蛘邌螕簟安迦搿惫ぞ邫凇拔谋尽?.1文本的編輯

選項的段落標(biāo)記。

對于形成段落的文本,可以設(shè)置它的標(biāo)題屬性及段落格式。1.標(biāo)題設(shè)置Dreamweaver中定義了六級標(biāo)題，從一級到六級，字體的大小依次遞減，六個級別標(biāo)題的應(yīng)用效果，如圖3-2所示。2.分行符輸入文本時，Dreamweaver8不會自動換行，但可以使用分行符進(jìn)行強行換行，方法是在要斷開行的末尾，同時按下【Shift】+【Enter】鍵。3.對齊文本對齊文本操作將使所編輯的文本看起來整齊美觀，Dreamweaver中段落的對齊方式有：左對齊、居中對齊、3.1文本的編輯

圖3-2六級標(biāo)題的瀏覽效果3.1文本的編輯

右對齊和兩端對齊。設(shè)置段落對齊的步驟是先將插入點放置到要設(shè)置對齊方式的段落中，若要同時設(shè)置多個段落的對齊方式，則就將它們同時選中，然后單擊“文本”→“對齊”菜單命令，從中選擇需要的對齊方式。4.縮進(jìn)文本在Dreamweaver中段落縮進(jìn)的操作步驟是先將插入點放置到要設(shè)置縮進(jìn)的段落中，若需要縮進(jìn)多個段落，則同時選中這些段落，然后單擊“文本”→“縮進(jìn)”菜單命令，就可將當(dāng)前段落右縮進(jìn)一段距離。利用“屬性”面板同樣可以完成段落的縮進(jìn)和凸出操作。方法是單擊“屬性”面板上的“文本縮進(jìn)”按鈕，即可完成段落的縮進(jìn)操作。5.項目列表在Dreamweaver中，有兩類列表類型：無序列表和有3.1文本的編輯

序列表，即項目列表和編號列表，定義項目列表的方法是將插入點放在要添加列表的位置，單擊“文本”→“列表”菜單命令，然后在打開的如圖3-3所示的子菜單選擇所需的列表類型命令，則指定列表項的前導(dǎo)字符出現(xiàn)在文檔窗口中，鍵入列表項文本，然后按【Enter】鍵創(chuàng)建其他列表項。要結(jié)束項目列表，可將插入點移到最后一行末尾，按兩次【Enter】鍵完成列表。6.設(shè)置和更改字體選中要設(shè)置字體的文本，單擊“文本”→“字體”菜單命令，在彈出的子菜單中選擇相應(yīng)的字體即可。利用“屬性”面板，也可以實現(xiàn)對文本字體的設(shè)置。在“屬性”面板的“字體”下拉列表中選擇相應(yīng)字體選項即可，如果字體列表中沒有想要的字體，可以選擇下拉列表中“編輯字體列表”選項打開圖3-4所示“編輯字體列表”對話框，添加字體類型。

3.1文本的編輯

圖3-3文本列表菜單3.1文本的編輯

圖3-4“編輯字體列表”對話框3.1文本的編輯

在“編輯字體列表”對話框的“字體列表”中，某些字體選項為多種字體組合，在客戶端瀏覽器中顯示時，按從前到后的順序來選擇字體，若用戶在瀏覽器中已安裝了第一種字體，則選擇它；否則，則選擇后一種字體。如果這一組字體在用戶的計算機上都沒有安裝，則瀏覽器將按默認(rèn)字體來顯示。8.字體顏色選中進(jìn)行顏色設(shè)置的文本后，單擊“文本”→“顏色”菜單命令，彈出如圖3-5所示的“顏色”對話框。或者單擊屬性檢查器上的“文本顏色按鈕”，也可調(diào)出該對話框，從中選擇一種顏色，單擊“確定”按鈕即可。3.1文本的編輯

圖3-5顏色對話框3.1文本的編輯

3.1文本的編輯

3.2圖像的插入3.3鼠標(biāo)經(jīng)過圖像的制作主要內(nèi)容3.2圖像的操作

圖像在網(wǎng)頁中通常起到畫龍點睛的作用,它能裝飾網(wǎng)頁,而且它能夠表達(dá)出一種文字無法說明的思想，表達(dá)整個網(wǎng)站的風(fēng)格。圖像的插入

將插入點放置到要插入圖像的位置，單擊“插入”→“圖像”菜單命令，彈出如圖3-6所示的“選擇圖像源文件”對話框。然后在該對話框中選擇需要的圖片。如果將該對話框下方的“預(yù)覽圖像”復(fù)選框選中，則在選中一個圖片文件后，則可通過對話框右側(cè)的“圖像預(yù)覽”欄預(yù)覽該圖片的效果。若所選取的圖像不在站點目錄下，單擊“確定”按鈕后會彈出一個信息提示框如圖3-7所示，單擊“確定”按鈕，將圖片保存到站點目錄下，否則在瀏覽器中預(yù)覽的時間，將看不到圖片。

圖3-6選擇圖像源文件對話框3.2圖像的操作

圖3-7圖片保存提示信息框

圖3-8圖像標(biāo)簽輔助功能屬性對話框3.2圖像的操作

將圖片保存到站點目錄后，系統(tǒng)還會彈出一“圖像標(biāo)簽輔助功能屬性”對話框如圖3-8所示，在該對話框中輸入“替換文本”和關(guān)于圖片地址的“詳細(xì)說明”，單擊“確定”按鈕即可將圖像插入到文檔中。當(dāng)用戶端的瀏覽器不支持顯示該圖像時，將用輸入的替換文本來替換圖像。在Dreamweaver中，若想要在某位置插入的圖像還未準(zhǔn)備好，為了方便網(wǎng)頁布局，可先用圖像占位符為其設(shè)置好位置。方法是單擊“插入”→“圖像占位符”菜單命令，在彈出的“圖像占位符”對話框中，設(shè)置圖像占位符的各參數(shù)，單擊“確定”即可。圖像屬性的設(shè)置

把圖像插入到文檔中后，為了使它適合整個網(wǎng)頁的布局，還需要對它的屬性進(jìn)行設(shè)置。選中要設(shè)置屬性的3.2圖像的操作

圖片，得到其“屬性”面板如圖3-9，可設(shè)置有關(guān)圖像的屬性。

圖3-9圖像“屬性“面板

1.調(diào)整圖像大小調(diào)整圖像大小操作將使圖像在當(dāng)前頁面布局中更加合理?！皩傩浴泵姘逯械摹皩挕焙汀案摺睂傩燥@示的是該圖像在當(dāng)前文檔中的尺寸大小，單擊可以恢復(fù)圖像原始大小，在Dreamweaver中插入圖像時，默認(rèn)的圖像大小都是原始大小，插入圖像時，默認(rèn)的圖像大小都是原3.2圖像的操作

始大小，插入后可以根據(jù)需要輸入“寬”和“高”的值，也可以手動調(diào)整圖像的大小。方法是選中圖像后，圖像的底部、右側(cè)及右下角出現(xiàn)調(diào)整圖像大小的控制柄，拖動控制柄可調(diào)整圖像的大小。2.對齊圖像和文字圖像同文字之間的對齊操作對版面的控制非常重要。要設(shè)置圖像同文本的對齊方式首先要在文檔中選中圖像，然后從“屬性”面板中選中“對齊”下拉列表中，選擇需要的對齊方式。3.銳化圖像銳化將增加對象邊緣的像素的對比度，從而增加圖像清晰度或銳度。選擇圖像后單擊圖像屬性檢查器中的“銳化”按鈕,將彈出“銳化”對話框?？梢酝ㄟ^拖動滑動塊控件或在文本框中輸入一個0到10之間的值，來指定圖像的銳化程度，然后單擊“確定”按鈕即可。3.2圖像的操作

4.裁剪圖像Dreamweaver8.0支持裁剪位圖文件圖像。單擊“屬性”面板中的圖標(biāo)或單擊“修改”→“圖像”→“裁剪”菜單命令，所選圖像周圍會出現(xiàn)裁剪邊界及裁剪控制點，如圖3-10所示。拖動裁剪控制點直到裁剪邊界框包含的圖像區(qū)域符合所需大小，按【Enter】鍵確認(rèn)裁剪選區(qū)域，得到裁剪后的效果如圖3-11所示。裁剪后的圖像會改變硬盤上的源圖像，裁剪前最好將源圖像備份一份。5.調(diào)整圖像的亮度和對比度調(diào)整圖像的亮度和對比度，主要是為了調(diào)整圖像的高亮顯示、陰影和中間色調(diào)。修正過暗或過亮的圖像時通常使用“亮度/對比度”選擇圖像后直接單擊屬性檢查器上的“亮度/對比度”，或單擊菜單欄上的“修改”→“圖像”→“亮3.2圖像的操作

圖3-10圖像裁剪示意圖圖3-11圖像裁剪后效果圖

度/對比度”命令，在彈出的“亮度/對比度”對話框（與“銳化”對話框類似）中，可進(jìn)行亮度和對比度滑動塊調(diào)整設(shè)置（值的范圍從－100到100），然后單擊“確定”按鈕好即可。3.2圖像的操作

3.1文本的編輯3.2圖像的插入

3.3鼠標(biāo)經(jīng)過圖像的制作

主要內(nèi)容3.3鼠標(biāo)經(jīng)過圖像的制作圖3-12鼠標(biāo)經(jīng)過圖像的原始圖像與鼠標(biāo)經(jīng)過后的圖像

鼠標(biāo)經(jīng)過圖像是一種簡單有趣的網(wǎng)頁動態(tài)效果，當(dāng)在瀏覽器中瀏覽鼠標(biāo)經(jīng)過圖像時，最初顯示的是原始圖像，當(dāng)鼠標(biāo)指針移到原始圖像上時，瀏覽器窗口的原始圖像將切換成鼠標(biāo)經(jīng)過圖像，當(dāng)鼠標(biāo)指針離開鼠標(biāo)經(jīng)過圖像時，原始圖像又將重現(xiàn)在瀏覽器窗口中。制作鼠標(biāo)經(jīng)過圖像的方法是先準(zhǔn)備好兩張大小相同，又能反映同一主題生動有趣有意義的圖像，圖3-12給出了鼠標(biāo)經(jīng)過圖像的原始圖像與鼠標(biāo)經(jīng)過圖像。插入鼠標(biāo)經(jīng)過圖像的方法是：單擊“插入”→“圖像對象”→“鼠標(biāo)經(jīng)過圖像”菜單命令，打開如圖3-13所示的“插入鼠標(biāo)經(jīng)過圖像”對話框。在“插入鼠標(biāo)經(jīng)過圖像”對話框的輸入圖像名稱，在“原始圖像”文本框中輸入原始圖片的路經(jīng)和名稱信息?；蛘邌螕簟盀g覽”按鈕，在彈出的對話框中選擇所圖3-13“插入鼠標(biāo)經(jīng)過圖像”對話框3.3鼠標(biāo)經(jīng)過圖像的制作需的原始圖像文件；在“鼠標(biāo)經(jīng)過圖像”文本框中輸入鼠標(biāo)。經(jīng)過圖像的路經(jīng)和名稱信息，或單擊“瀏覽”按鈕，在彈出的對話框中選擇鼠標(biāo)經(jīng)過圖像。選中“預(yù)載鼠標(biāo)經(jīng)過圖像”復(fù)選框，將在載入網(wǎng)頁的同時載入鼠標(biāo)經(jīng)過圖像，它會減少原始圖像與鼠標(biāo)經(jīng)過圖像交替出現(xiàn)的間隔，形成比較連續(xù)的翻轉(zhuǎn)效果。在“按下時，前往的URL”文本框中輸入單擊滾動圖片后的鏈接目標(biāo)，或者單擊”瀏覽“按鈕，在彈出