第3章 文本及圖像

第3章文本與圖像

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

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

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

熟悉文本和圖像的插入

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

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

主要內(nèi)容

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

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

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

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

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

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

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

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

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

3.1文本的編輯

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

圖3-4“編輯字體列表”對(duì)話(huà)框3.1文本的編輯

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

圖3-5顏色對(duì)話(huà)框3.1文本的編輯

3.1文本的編輯

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

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

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

圖3-6選擇圖像源文件對(duì)話(huà)框3.2圖像的操作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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