《中文版Dreamweaver CS3網(wǎng)頁(yè)制作實(shí)用教程》課件第4章.ppt

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

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

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

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

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

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