第2章__網頁中的文本與圖像

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