網(wǎng)頁文本的處理

1、第第3章章 網(wǎng)頁文本的處理網(wǎng)頁文本的處理 本章知識點及學(xué)習(xí)目標(biāo)本章知識點及學(xué)習(xí)目標(biāo) 文本是網(wǎng)頁中的主要元素。本章主要介紹利用Dreamweaver MX 2004和CSS編輯與控制網(wǎng)頁文本的方法。通過本章的學(xué)習(xí)，應(yīng)該掌握以下內(nèi)容： 利用Dreamweaver MX 2004編輯網(wǎng)頁文本 處理段落 編輯網(wǎng)頁文本格式 創(chuàng)建CSS樣式 編輯CSS樣式 應(yīng)用CSS樣式本章內(nèi)容概覽本章內(nèi)容概覽3.1 文本標(biāo)題3.2 處理段落3.3 編輯文本格式 3.3.1 設(shè)置字體 3.3.2 設(shè)置字號 3.3.3 添加字體顏色 3.3.4 設(shè)定字體樣式3.4 創(chuàng)建項目列表 3.4.1 項目列表的類型 3.4.2 使用

2、現(xiàn)有的項目列表 3.4.3 創(chuàng)建嵌套項目列表 3.4.4 設(shè)置項目列表屬性3.5 使用CSS 3.5.1 CSS基礎(chǔ)知識 3.5.2 創(chuàng)建新樣式 3.5.3 編輯已有CSS 3.5.4 應(yīng)用CSS樣式 3.5.5 刪除樣式 3.5.6 CSS 的屬性3.6 課堂小實例3.7 課后習(xí)題與解答3.1 文本標(biāo)題文本標(biāo)題 文本標(biāo)題來強調(diào)段落要表現(xiàn)的內(nèi)容。在HTML中，定義了6級標(biāo)題，從1到6級，每級標(biāo)題的字體大小依次遞減。在HTML中，采用如下的標(biāo)記來定義標(biāo)題：和 定義標(biāo)題1和 定義標(biāo)題2和 定義標(biāo)題3每級標(biāo)題的字符大小并沒有一個實際上的固定的值，它是由瀏覽器所決定的，為標(biāo)題定義的級別只決定了標(biāo)題之間

3、的相互大小。 3.2 處理段落處理段落 3.2.1 設(shè)置段落格式使用【屬性】面板的【格式】彈出式菜單或選擇【文本】|【段落格式】菜單可以應(yīng)用標(biāo)準(zhǔn)段落和標(biāo)題標(biāo)簽。 3.2.2 對齊段落 段落的對齊方式，指的是段落相對文檔窗口（或瀏覽器窗口）在水平位置的對齊方式。有三種對齊方式：左對齊、居中對齊、右對齊、兩端對齊。 3.2.3 縮進(jìn)段落許多時候需要縮進(jìn)段落，例如希望強調(diào)一段文字，或引用其他來源的文字，都需要將文字縮進(jìn)，以示同普通段落的區(qū)別。所謂縮進(jìn)，主要是相對于文檔窗口（或瀏覽器窗口）左端而言的。 3.3 編輯文本格式編輯文本格式 3.3.1 設(shè)置字體利用屬性面板，也可以實現(xiàn)對字符字體的設(shè)置。打開

4、屬性面板上的字體列表，選擇相應(yīng)字體項即可 。3.3.2 設(shè)置字號字號指的是字體的大小，它沒有一個絕對的大小標(biāo)準(zhǔn)，其大小只是相對于默認(rèn)字體而言。例如，1號字和2號字，比默認(rèn)字體要小一些，而4號字和5號字，比默認(rèn)字體要大一些。 3.3.3 添加字體顏色打開【文本】菜單，選擇【顏色】，可以打開Windows標(biāo)準(zhǔn)的顏色對話框，允許用戶選擇顏色，如圖所示。 3.3.4 設(shè)定字體樣式字符的樣式指的是字符的外觀顯示方式，例如字符的加粗、傾斜和下劃線等，利用Dreamweaver，可以設(shè)置多種字符樣式。1. 加粗 2. 傾斜 3. 下劃線 4. 刪除線 5. 打字型 6. 強調(diào) 7. 加強 8. 代碼，變量，

5、范例和鍵盤 9. 引用和定義 10. 已刪除 11. 已插入 3.4 創(chuàng)建項目列表創(chuàng)建項目列表 設(shè)置段落的項目列表是Dreamweaver MX 2004 一個很重要的格式設(shè)置方法。在HTML中，從總體上分有兩種類型的項目列表，一種是無序項目列表，另一種是有序項目列表，當(dāng)然還有定義列表、目錄列表和菜單列表。無序項目列表使用項目符號來標(biāo)記項目，有序項目列表則使用編號來標(biāo)記項目順序。在Dreamweaver MX 2004 中，允許設(shè)置多種項目列表格式。 3.4.1 項目列表的類型在HTML中，可以創(chuàng)建的列表有：無序列表、有序列表、定義列表、目錄列表和菜單列表。 無序列表 有序列表 定義列表 目錄

6、列表和菜單列表 3.4.2 使用現(xiàn)有的項目列表要使用現(xiàn)有的項目列表，請執(zhí)行如下步驟：1選中要轉(zhuǎn)換為項目列表的所有段落。2單擊“屬性”面板上的“項目列表”按鈕或“編號列表”按鈕；也可以單擊“文本”“列表”菜單項，選擇相應(yīng)的“無序列表”、“有序列表”菜單項。3這時被選中的段落文字就被轉(zhuǎn)換為項目列表的形式。 3.4.3 創(chuàng)建嵌套項目列表要實現(xiàn)多級項目列表的形式，請執(zhí)行如下步驟：1選中要嵌入的列表項，如果有多行希望嵌套，請選中多行。2單擊【屬性】面板上的【文本縮進(jìn)】按鈕，如圖所示；或者單擊【文本】|【縮進(jìn)】菜單項。3.4.4 設(shè)置項目列表屬性通過設(shè)置項目列表的屬性，可以選擇項目列表的類型、無序項目列表

7、中項目符號的類型，或有序項目列表中項目編號的類型等。 3.5 使用使用CSS 3.5.1 CSS基礎(chǔ)知識CSS是 Cascading Style Sheet的縮寫，可以譯為層疊樣式表或級聯(lián)樣式表。CSS是一個輔助HTML設(shè)計的新特性，能夠保持整個HTML的統(tǒng)一外觀。使用CSS可以在設(shè)置文本之前，指定整個文本的屬性，比如顏色、字體、大小等，即可獲得統(tǒng)一的外觀。如讀者想讓鏈接文字在未單擊時是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色且有下劃線，這就是一種風(fēng)格。通過設(shè)置CSS，可以統(tǒng)一地控制HTML中各標(biāo)志的顯示屬性。它將對布局、字體、顏色、背景和其他圖文效果實現(xiàn)更加精確的控制。通過只修改一個文件就可以改變所

8、有網(wǎng)頁的外觀和格式，保證在所有瀏覽器和平臺之間的兼容性，擁有更少的編碼、更少的頁數(shù)和更快的下載速度。 3.5.2 創(chuàng)建新樣式CSS樣式最大的優(yōu)點是它的自動更新功能。當(dāng)應(yīng)用了CSS格式之后，如果不滿意，僅修改CSS樣式即可更改所有的應(yīng)用，而不用像設(shè)置HTML樣式那樣還要一個一個地修改。 單擊此按鈕創(chuàng)建新樣式 3.5.3 編輯已有CSS編輯已有CSS的具體操作如下。1打開【CSS樣式】面板，選擇要【編輯】的樣式。2單擊CSS樣式面板右下角的【編輯樣式】按鈕，打開【編輯樣式】列表，如圖所示。 3.5.4 應(yīng)用CSS樣式應(yīng)用嵌入式CSS如果希望在文檔中應(yīng)用樣式，可以按照如下方法進(jìn)行操作。1如果要設(shè)置段

9、落格式，可以將插入點放置于段落之中；如果要設(shè)置多個段落的格式，則需要選中這些段落；如果要設(shè)置字符格式，則需要選中這些字符。2在【CSS樣式】面板中，選擇某個樣式。3如果選中了自動應(yīng)用復(fù)選框，則自動對相應(yīng)的文本應(yīng)用選中的樣式。4如果沒有選中自動應(yīng)用復(fù)選框，則可以單擊【套用】按鈕，應(yīng)用樣式；也可以打開面板菜單，然后選擇【套用】命令。應(yīng)用外部鏈接式CSS應(yīng)用外部鏈接式，具體操作步驟如下。1打開【CSS樣式】面板。2單擊【CSS樣式】面板右下角的【附加樣式表】按鈕。3此時將出現(xiàn)【鏈接外部樣式表】對話框，如圖所示。5.5 刪除樣式刪除某個樣式的操作如下。1在【CSS樣式】面板中，選中要刪除的樣式。2單擊

10、【CSS樣式】面板右下角的【刪除樣式】按鈕，或是從面板菜單中選擇【刪除命令】。3這時樣式即被刪除，同時從樣式列表中消失。3.5.6 CSS 的屬性熟練掌握CSS的各種屬性將會使用戶編輯頁面更加得心應(yīng)手。在這一節(jié)中，將詳細(xì)介紹CSS樣式的設(shè)置，共講述設(shè)置CSS樣式的8個分類。類型面板背景面板 區(qū)塊面板 方框面板 邊框面板 列表面板 定位面板 擴(kuò)展面板 3.6 課堂小實例課堂小實例 本實例通過對td、body標(biāo)簽的定義來解決字體大小格式的設(shè)置，便于保持網(wǎng)站中字體風(fēng)格的統(tǒng)一。 3.7 課后習(xí)題與解答課后習(xí)題與解答 3.7.1 填空題（1）使用屬性檢查器或【文本】菜單中的選項可以設(shè)置或更改所選文本的字體特性?？梢栽O(shè)置字體_ _（如粗體或斜體）和_。（2）若要插入更多的特殊字符，請選擇_ | _ | _或在_欄中選擇_圖標(biāo)，選擇一個字符，然后單擊【確定】。3.7.2 選擇題（1）設(shè)置文本屬性可以通過_來設(shè)置。 A屬性面板B控制面板C啟動面板D文本菜單（2）在網(wǎng)頁中連續(xù)輸入空格的方法是_。 A連續(xù)