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

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