第3章 文本及圖像

第3章文本與圖像

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

學習要求提前預習，上課認真聽講課后及時復習，獨立認真完成作業(yè)

本章重點了解Dreamweaver基本網頁的編輯

熟悉文本和圖像的插入

掌握文本和圖像的屬性設置

有關文本和圖像的操作

主要內容

3.1文本的編輯3.2圖像的操作3.3鼠標經過圖像的制作3.1文本的編輯

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

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

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

選項的段落標記。

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

圖3-2六級標題的瀏覽效果3.1文本的編輯

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

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

3.1文本的編輯

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

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

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

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

3.1文本的編輯

3.2圖像的插入3.3鼠標經過圖像的制作主要內容3.2圖像的操作

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

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

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

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

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

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

把圖像插入到文檔中后，為了使它適合整個網頁的布局，還需要對它的屬性進行設置。選中要設置屬性的3.2圖像的操作

圖片，得到其“屬性”面板如圖3-9，可設置有關圖像的屬性。

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

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

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

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

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

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

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

3.3鼠標經過圖像的制作

主要內容3.3鼠標經過圖像的制作圖3-12鼠標經過圖像的原始圖像與鼠標經過后的圖像

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