《中文版Dreamweaver CS3網頁制作實用教程》課件第4章.ppt

1、第4章 插入文本和圖像,文本與圖像是網頁制作中最重要的兩大元素。文本組成了大部分網頁的結構；而圖像在頁面中的恰當運用，不僅使得網頁更加美觀，而且令網頁表達信息更加直觀，吸引了瀏覽者。本章主要介紹了在通常網頁制作過程中如添加并設置各種文本、圖像元素。通過本章知識的學習，用戶可以掌握各種編輯網頁文本與圖像的方法，包括設置文本的格式、使用統(tǒng)一樣式、添加按鈕、插入背景照片、創(chuàng)建鼠標指針經過圖像、導航條等。,教學重點與難點,繪制點 插入文本 編輯文本 插入圖像 編輯圖像 創(chuàng)建網頁導航條,4.1 插入文本,文本時網頁中最常見也是運用最廣泛的元素之一，是網頁內容的核心部分。在網頁中哈如文本與在Word等文字

2、處理軟件中添加文本一樣方便，可以直接輸入文本，也可以從其他文檔中復制文本，還可以插入水平線和特殊字符等。 認識“文本”插入欄 插入文本 插入水平線和日期,4.1.1 認識“文本”插入欄,使用“文本”工具欄，可以快速第插入各種類型的文本。單擊插入欄上的“文本”選項卡，打開“文本”插入欄，如圖所示。,4.1.2 插入文本,在Dreamweaver CS3中輸入文本是非常簡單的，其輸入方式與其他文本處理軟件中的文本輸入方式十分類似。,4.1.3 插入水平線和日期,水平線對于信息的組織很有用，在頁面中，可以使用一條或多條水平線來可視化分隔文本和對象，使用段落更加分明和更具層次感。在Dreamweave

3、r CS3中，還可以插入日期對象，可以以任何格式插入當前的日期(可以包括時間)，并且在每次保存文件時都會自動更新該日期。,4.2 編輯文本,對于插入的文本，可以進行相應的編輯，使枯燥的文本更顯生動。編輯文本的操作主要指設置文本的基本格式，例如文本字體、字體顏色、對齊方式等。 設置文本格式 查找和替換文本,4.2.1 設置文本格式,設置文本格式，可以使文本更加條理清楚、主次分明。可以在文本的“屬性”面板中進行相應的設置，完成文本格式的設置。,4.2.2 查找和替換文本,在建立Web站點的過程中，有時會需要更新或者簡單地修改某些文本內容。DreamweaverCS3提供的查找與替換功能，可以快速地

4、打開指定的網頁、文件夾或站點的文本、HTML源代碼、標簽所在的位置，同時還可以對查找到的內容進行替換。 要使用查找與替換功能，可以選擇“編輯”|“查找和替換”命令，打開“查找和替換”對話框，如圖所示，該對話框中各選項具體作用如下。,4.3 插入圖像,圖像是網頁上最常用的對象之一，制作精美的圖像可以大大增強網頁的視覺效果。圖像所蘊涵的信息量對于網頁而言越加顯得重要。在網頁中插入圖像通常是用于添加圖形界面(例如按鈕)、創(chuàng)建具有視覺感染力的內容(例如照片、背景等)或交互式設計元素(例如鼠標指針經過圖像或圖像地圖)。 網頁中常見的圖像格式 在網頁中插入圖像,4.3.1 網頁中常見的圖像格式,圖像是網頁

5、中非常重要的內容。在Dreamweaver CS3中，可以在頁面中插入圖像，并利用軟件自帶的功能設置各種圖像效果，例如導航欄、鏈接和鼠標經過效果等。 網頁中常用的圖像文件格式有JPEG(JPG)、GIF和PNG這3種。,4.3.2 在網頁中插入圖像,如果網頁中的內容全是密密麻麻的文字，無論有多精彩的內容，都容易產生厭煩感。所以任何精美的網頁中可能沒有文本，但不可能沒有圖像等多媒體元素，這足見圖像在網頁中的作用。在網頁中適當地插入圖像可以使網頁增色不少，更重要是可以借此直觀地向瀏覽者表達信息。,4.4 編輯圖像,在網頁中插入圖像后，需要設置圖像屬性和排列圖像與文本之間的位置，這將直接影響網頁的整

6、體效果。 設置圖像屬性 使用圖像編輯器,4.4.1 設置圖像屬性,設置圖片屬性，主要包括設置圖片的大小、對齊方式、邊距等。,4.4.2 使用圖像編輯器,圖像編輯器，主要分為內部圖像編輯器和外部圖像編輯器。,4.5 創(chuàng)建網頁導航條,“導航條”由一個或多個圖像組成，它的顯示隨著動作的改變而改變，因此，在使用導航條命令之前，應首先創(chuàng)建一個用于導航條的圖像集。 插入導航條 編輯導航條,4.5.1 插入導航條,要在網頁文檔中插入導航條，“插入”欄中的“常用”選項卡，打開“常用”插入欄，單擊“圖像”按鈕右邊的下拉箭頭，在彈出的菜單中選擇“導航條”命令，打開“插入導航條”對話框，如圖所示。,4.5.2 編輯導航條,用戶在文檔創(chuàng)建導航條后，選擇“修改”|“導航條”