第2章__網(wǎng)頁中的文本與圖像

1,第2章 網(wǎng)頁中的文本與圖像,網(wǎng)頁中最基本的元素為文本與圖像，這兩種元素可以組成最簡單的網(wǎng)頁。文本可以直接在Dreamweaver中創(chuàng)建與編輯，而圖像既可以借助圖像處理軟件事先加以編輯，也可以在Dreamweaver中簡單地進行編輯。為了配合網(wǎng)頁的互動性，圖像還以多種形式出現(xiàn)在網(wǎng)頁中。,2,本章知識要點：,輸入文本 創(chuàng)建段落 創(chuàng)建列表 插入普通圖像 插入鼠標(biāo)經(jīng)過圖像 插入導(dǎo)航條圖像 插入分層圖像,3,2.1 網(wǎng)頁文本,文本是網(wǎng)頁中不可缺少的內(nèi)容之一，是網(wǎng)頁中最基本的元素。在一些大型網(wǎng)站中，文字的主導(dǎo)地位是無可替代的。這是因為文字所占的存儲空間非常小，這樣以文字為主體的頁面下載速度很快，可以最佳地利用網(wǎng)絡(luò)帶寬。而網(wǎng)頁中的文本一般以普通文字、段落或者各種項目符號等形式顯示。,2.1.1 輸入各種文本,在網(wǎng)頁中，文本以多種形式展示，來表達不同的信息。最常見的為詞組或者一句話，有時也會出現(xiàn)注冊商標(biāo)或者版權(quán)符號等特殊符號等。下面詳細介紹各種類型的文本輸入方法。,4,2.1.2 創(chuàng)建段落與列表,對于文字信息較多的網(wǎng)頁，文本以段落形式顯示，使網(wǎng)頁的美觀、易讀性大大增加。而文本除了簡單的文本段落，還有一種排列方式，就是項目符號。數(shù)據(jù)信息以后者形式顯示，能夠更加快速地被注意到。,5,2.2 文本屬性,雖然在Dreamweaver中可以輸入不同形式的文本，但是段落由文字組成，所以段落除了本身的屬性外，還包括文字屬性。同樣列表屬性中除了本身屬性外，也包括文字屬性與段落屬性。三種形式的文本其屬性是可以穿插進行設(shè)置的。,6,2.2.1 設(shè)置字體屬性,文本【屬性】面板顯示文檔中所選文本的當(dāng)前格式屬性。,7,2.2.2 設(shè)置段落格式,輸入文本后，還可以用對齊段落來調(diào)整頁面。要改變一個或多個段落在水平方向上的對齊方式，首先用拖黑的方式選中這些段落，然后在【屬性】面板中單擊不同的對齊按鈕，即可得到相應(yīng)的顯示效果。,8,2.2.3 設(shè)置列表屬性,創(chuàng)建的項目列表在默認情況下，以球形顯示。要想更改項目符號的形狀，或者是將項目列表更改為編號列表，單擊【屬性】面板中的【列表項目】按鈕 選擇并且修改即可。,9,2.3 網(wǎng)頁圖像,網(wǎng)頁中有了圖像才顯得生動，并且圖像還具有直觀、生動的特點。圖像還能夠跨越語言、編碼標(biāo)準(zhǔn)、人種、地域和年齡的差異。但是圖像的增加也會使網(wǎng)頁的下載時間大大增加，所以設(shè)計網(wǎng)頁時要整體考慮圖像的數(shù)目和大小。 要使用圖像制作出精美的網(wǎng)頁，掌握圖像文件格式方面的知識是必不可少的。雖然存在著很多種圖形文件格式，但是在Web中，通常使用的只有GIF、JPEG/JPG、PNG三種文件格式，因為大多數(shù)瀏覽器都可以支持他們。,10,11,2.3.1 插入普通圖像,網(wǎng)頁中最常見的圖像是直接插入式圖像，該圖像插入網(wǎng)頁以后，在正常情況下不可以在相同的位置輸入文本，或者再次插入圖像。還有一種是為插入式圖像做準(zhǔn)備的圖像，就是占位圖像。占位圖像其實是圖形，是在準(zhǔn)備好將最終圖像添加到Web頁面之前使用的圖形。,12,2.3.2 插入背景圖像,提起背景圖像，首先要介紹網(wǎng)頁背景顏色，這兩者均屬于網(wǎng)頁頁面屬性中的選項之一。網(wǎng)頁背景顏色在默認情況下為白色，可以根據(jù)網(wǎng)頁風(fēng)格隨意設(shè)置網(wǎng)頁背景顏色。方法是單擊【屬性】面板中的【頁面屬性】按鈕 ，設(shè)置【背景顏色】選項即可。,2.3.3 插入鼠標(biāo)經(jīng)過圖像,鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標(biāo)指針經(jīng)過時發(fā)生變化的圖像。若要插入鼠標(biāo)經(jīng)過圖像，必須具有兩幅圖像：主圖像和次圖像，并且兩幅圖像尺寸相同。,13,2.3.4 插入導(dǎo)航條,導(dǎo)航條通常為在站點上的頁面和文件之間移動提供一條簡捷的途徑。雖然鼠標(biāo)經(jīng)過圖像也可以制作導(dǎo)航條，但是通過【插入】|【圖像對象】|【導(dǎo)航條】命令創(chuàng)建的導(dǎo)航條，可以包括4種狀態(tài)：【狀態(tài)圖像】、【鼠標(biāo)經(jīng)過圖像】、【按下圖像】和【按下時鼠標(biāo)經(jīng)過圖像】。,14,2.3.5 插入分層圖像,Dreamweaver CS3包括了與Photoshop CS3增強的集成功能，這樣在Dreamweaver中就可以插入具有多個層次的圖像。與Photoshop CS3相結(jié)合，還可以根據(jù)不同的情況插入選區(qū)圖像或者切片圖像。,15,2.4 圖像屬性,插入網(wǎng)頁中的圖像，在默認狀態(tài)下使用的是原圖片的大小、顏色等屬性。而根據(jù)不同的網(wǎng)頁要求，需要適當(dāng)?shù)刂匦抡{(diào)整圖像屬性。圖像屬性中既包括基本屬性，比如大小、對齊方式等，也包括改變圖像本身的屬性，比如亮度/對比度、銳化等。,16,2.4.1 圖像基本屬性,Dreamweaver中的【屬性】面板是相對應(yīng)的，選中不同的元素會顯示相應(yīng)的屬性參數(shù)。如果選中圖片后，【屬性】面板中就會顯示該圖片的各個屬性參數(shù)。,17,2.4.2 圖像編輯功能,Dreamweaver提供的基本圖像編輯功能，可以直接在該軟件中編輯圖像，而無需使用外部圖像編輯應(yīng)用程序（比如Fireworks）。例如亮度和對比度、銳化、裁切和圖像的重新取樣等。,18,2.5 課堂練習(xí)：制作詩歌目錄,制作圖書目錄一般在Word文檔中創(chuàng)建，但是在Dreamweaver中也可以制作圖書目錄，并且可以制作不同列表形式的目錄，例如項目列表形式、編號列表形式，定義列表形式，或者是混合嵌套列表形式等。在制作過程中，只要掌握技巧，可以非?？焖俚刂谱鞒鰣D書目錄。,19,2.6 課堂練習(xí)：制作網(wǎng)頁導(dǎo)航條,在Dreamweaver中制作網(wǎng)頁圖像導(dǎo)航條，既可以是普通的單個圖像，也可以是兩個圖像，以鼠標(biāo)經(jīng)過效果來展示。后者的制作方法是通過鼠標(biāo)經(jīng)過圖像功能來完成的，