第四講建立基本的網(wǎng)頁——網(wǎng)頁制作

1、1第4章 建立基本的網(wǎng)頁4.1 一個(gè)新網(wǎng)頁一個(gè)新網(wǎng)頁4.2 段落格式化段落格式化4.3 字符格式化字符格式化4.4 項(xiàng)目列表項(xiàng)目列表4.5 使用使用HTML樣式格式化文本樣式格式化文本24.1 一個(gè)新網(wǎng)頁【例【例4.1】用】用Dreamweaver建立一個(gè)基本的網(wǎng)頁建立一個(gè)基本的網(wǎng)頁啟動(dòng)啟動(dòng)Dreamweaver，創(chuàng)建一個(gè)新文檔（可以執(zhí)行創(chuàng)建一個(gè)新文檔（可以執(zhí)行File|New命令），單擊工具欄設(shè)計(jì)視圖（命令），單擊工具欄設(shè)計(jì)視圖（Show Design View）按鈕按鈕 ，切換到設(shè)計(jì)視圖文檔模式，切換到設(shè)計(jì)視圖文檔模式，在文檔窗口中輸入下列文字：金縷衣在文檔窗口中輸入下列文字：金縷衣勸君莫

2、惜金縷衣勸君莫惜金縷衣勸君惜取少年時(shí)勸君惜取少年時(shí)花開堪折直須折花開堪折直須折莫待無花空折枝每輸入一行按一次回車鍵，這就是莫待無花空折枝每輸入一行按一次回車鍵，這就是一個(gè)網(wǎng)頁了。一個(gè)網(wǎng)頁了。3然后執(zhí)行然后執(zhí)行File|Preview in Browser|iexplore命令或直接命令或直接按按F12鍵，可以在瀏覽器中預(yù)覽這個(gè)網(wǎng)頁的效果（見圖鍵，可以在瀏覽器中預(yù)覽這個(gè)網(wǎng)頁的效果（見圖4.1（a），），也可以執(zhí)行也可以執(zhí)行File|Save命令將其保存為文命令將其保存為文件。比如路徑和文件名為件。比如路徑和文件名為d:examplesexamples4-01.htm，則在瀏覽器的地址欄中直接輸入

3、則在瀏覽器的地址欄中直接輸入D:examplesexample4-01.htm，也可瀏覽頁面效果也可瀏覽頁面效果(見圖見圖4.1（b）)。圖圖4.1一個(gè)新網(wǎng)頁這是一個(gè)最樸素的網(wǎng)頁，沒有任何修飾，一個(gè)新網(wǎng)頁這是一個(gè)最樸素的網(wǎng)頁，沒有任何修飾，但卻有網(wǎng)頁文件的基本結(jié)構(gòu)。切換到代碼視圖或代碼但卻有網(wǎng)頁文件的基本結(jié)構(gòu)。切換到代碼視圖或代碼和設(shè)計(jì)視圖，查看一下這個(gè)網(wǎng)頁的和設(shè)計(jì)視圖，查看一下這個(gè)網(wǎng)頁的HTML源文件（見圖源文件（見圖4.2），），Dreamweaver自動(dòng)為網(wǎng)頁添加了相應(yīng)的標(biāo)記。自動(dòng)為網(wǎng)頁添加了相應(yīng)的標(biāo)記?？梢姡谟每梢?，在用Dreamweaver進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，可以把精進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，可

4、以把精力集中在頁面的內(nèi)容和版面設(shè)計(jì)上，而不必為各種力集中在頁面的內(nèi)容和版面設(shè)計(jì)上，而不必為各種HTML標(biāo)記的用法費(fèi)心。標(biāo)記的用法費(fèi)心。4圖圖4.15圖圖4.264.1.1設(shè)置頁面標(biāo)題設(shè)置頁面標(biāo)題標(biāo)題是一個(gè)網(wǎng)頁的題目，也是頁面內(nèi)容的簡(jiǎn)要概括。一標(biāo)題是一個(gè)網(wǎng)頁的題目，也是頁面內(nèi)容的簡(jiǎn)要概括。一個(gè)頁面不必有標(biāo)題，但為每一個(gè)頁面添加一個(gè)標(biāo)題是個(gè)頁面不必有標(biāo)題，但為每一個(gè)頁面添加一個(gè)標(biāo)題是一個(gè)好習(xí)慣，這樣做不僅可為瀏覽者了解網(wǎng)頁的主題一個(gè)好習(xí)慣，這樣做不僅可為瀏覽者了解網(wǎng)頁的主題提供方便，也可為設(shè)計(jì)者規(guī)劃和管理網(wǎng)站帶來好處。提供方便，也可為設(shè)計(jì)者規(guī)劃和管理網(wǎng)站帶來好處。Dreamweaver為每個(gè)頁面設(shè)

5、置了默認(rèn)標(biāo)題為每個(gè)頁面設(shè)置了默認(rèn)標(biāo)題Untitled Document，這實(shí)際上是沒有標(biāo)題。這實(shí)際上是沒有標(biāo)題。要設(shè)置頁面標(biāo)題，在工具欄要設(shè)置頁面標(biāo)題，在工具欄Title后面的文本框中輸入后面的文本框中輸入“唐詩唐詩金縷衣金縷衣”按回車。注意按回車。注意Dreamweaver標(biāo)題標(biāo)題欄的頁面標(biāo)題域和代碼視圖中的欄的頁面標(biāo)題域和代碼視圖中的Title標(biāo)記間的標(biāo)記間的Untitled Document均已改為頁面標(biāo)題均已改為頁面標(biāo)題“唐詩唐詩金縷衣金縷衣”（見（見圖圖4.3）。要修改標(biāo)題仍可以在工具欄）。要修改標(biāo)題仍可以在工具欄Title后的文本框后的文本框中進(jìn)行。中進(jìn)行。7圖圖4.384.1.2

6、 設(shè)置基礎(chǔ)設(shè)置基礎(chǔ)URL地址地址URL地址分為絕對(duì)地址和相對(duì)地址。絕對(duì)地址包括協(xié)議、地址分為絕對(duì)地址和相對(duì)地址。絕對(duì)地址包括協(xié)議、域名或域名或IP地址、路徑和文件名，如地址、路徑和文件名，如http:/ 打開打開Head(頭部頭部)對(duì)象面板；對(duì)象面板； 單擊對(duì)象面板上的單擊對(duì)象面板上的Insert Base（插入基地址）按鈕插入基地址）按鈕 ，出現(xiàn)如圖出現(xiàn)如圖4.4所示的對(duì)話框；所示的對(duì)話框； 在在Href文本框中輸入基礎(chǔ)文本框中輸入基礎(chǔ)URL地址，也可以單擊地址，也可以單擊Browse按鈕，選擇基地址路徑，這實(shí)際上設(shè)置的是按鈕，選擇基地址路徑，這實(shí)際上設(shè)置的是HTML標(biāo)記的標(biāo)記的Href 屬

7、性；屬性； 在在Target下拉列表框中，可以選擇鏈接文檔在哪個(gè)框架下拉列表框中，可以選擇鏈接文檔在哪個(gè)框架集中被打開，這實(shí)際上設(shè)置的是集中被打開，這實(shí)際上設(shè)置的是標(biāo)記的標(biāo)記的Target 屬性值?？蛇x項(xiàng)有以下幾種。屬性值?？蛇x項(xiàng)有以下幾種。10圖圖4.411_blank: 表明在新窗口中展開鏈接指向的頁面。表明在新窗口中展開鏈接指向的頁面。_self: 在當(dāng)前文檔的框架集中展開頁面。在當(dāng)前文檔的框架集中展開頁面。_parent: 在當(dāng)前文檔的父級(jí)框架集中展開頁面。在當(dāng)前文檔的父級(jí)框架集中展開頁面。_top: 在鏈接所在的完整窗口中展開頁面。在鏈接所在的完整窗口中展開頁面。不選任何參數(shù)表示在當(dāng)

8、前框架打開頁面。不選任何參數(shù)表示在當(dāng)前框架打開頁面。例例4.2操作生成語句：操作生成語句：。要編輯基礎(chǔ)要編輯基礎(chǔ)URL地址，執(zhí)行地址，執(zhí)行View|Head Content（頭部頭部?jī)?nèi)容）命令或按內(nèi)容）命令或按Ctrl+Shift+W組合鍵，打開頭部信息組合鍵，打開頭部信息按鈕欄（見圖按鈕欄（見圖4.5）。從文檔的頭部信息按鈕中，選中）。從文檔的頭部信息按鈕中，選中基地址按鈕，會(huì)打開基地址屬性面板（見圖基地址按鈕，會(huì)打開基地址屬性面板（見圖4.6），這），這時(shí)就可在屬性面板上修改相應(yīng)的屬性值了。要?jiǎng)h除基時(shí)就可在屬性面板上修改相應(yīng)的屬性值了。要?jiǎng)h除基地址標(biāo)記，在頭部信息按鈕中單擊基地址按鈕，然后

9、地址標(biāo)記，在頭部信息按鈕中單擊基地址按鈕，然后按按Del鍵。鍵。12圖圖4.513圖圖4.614注意：注意：頭部信息按鈕的數(shù)量與添加的頭部標(biāo)記數(shù)有關(guān)，每添加頭部信息按鈕的數(shù)量與添加的頭部標(biāo)記數(shù)有關(guān)，每添加一項(xiàng)標(biāo)記，就增加一個(gè)按鈕，每刪除一項(xiàng)標(biāo)記，就減一項(xiàng)標(biāo)記，就增加一個(gè)按鈕，每刪除一項(xiàng)標(biāo)記，就減少一個(gè)按鈕；少一個(gè)按鈕；圖圖4.5所示的其他頭信息標(biāo)記的修改方法與所示的其他頭信息標(biāo)記的修改方法與相同。相同。4.1.3 設(shè)置關(guān)鍵詞和描述設(shè)置關(guān)鍵詞和描述 關(guān)鍵詞（關(guān)鍵詞（Keyword）是網(wǎng)頁內(nèi)容所涉及相關(guān)領(lǐng)域的關(guān)鍵是網(wǎng)頁內(nèi)容所涉及相關(guān)領(lǐng)域的關(guān)鍵性詞語，描述（性詞語，描述（Description）指對(duì)

10、網(wǎng)頁的簡(jiǎn)短說明，指對(duì)網(wǎng)頁的簡(jiǎn)短說明，它們和其他描述網(wǎng)頁的信息一起稱為元數(shù)據(jù)（它們和其他描述網(wǎng)頁的信息一起稱為元數(shù)據(jù)（Meta data）。）。這些信息可以傳送給這些信息可以傳送給Web服務(wù)器，來激活客服務(wù)器，來激活客戶端的特殊功能，用于瀏覽者或其他軟件系統(tǒng)快速了戶端的特殊功能，用于瀏覽者或其他軟件系統(tǒng)快速了解或查詢網(wǎng)頁。解或查詢網(wǎng)頁。15標(biāo)記是實(shí)現(xiàn)元數(shù)據(jù)的主要標(biāo)記，能夠提供文檔的標(biāo)記是實(shí)現(xiàn)元數(shù)據(jù)的主要標(biāo)記，能夠提供文檔的關(guān)鍵字、作者、描述等多種信息，在關(guān)鍵字、作者、描述等多種信息，在HTML的頭部可以的頭部可以包括任意數(shù)量的包括任意數(shù)量的標(biāo)記。標(biāo)記。標(biāo)記是單標(biāo)記，標(biāo)記是單標(biāo)記，包括如下屬性。包

11、括如下屬性。name=string: 用于定義一個(gè)元數(shù)據(jù)屬性的名稱，其中用于定義一個(gè)元數(shù)據(jù)屬性的名稱，其中string 是用于表示名稱的字符串。是用于表示名稱的字符串。content=cdata: 用于定義元數(shù)據(jù)的屬性值，其中用于定義元數(shù)據(jù)的屬性值，其中cdata 表示相關(guān)數(shù)據(jù)。表示相關(guān)數(shù)據(jù)。有些搜索引擎使用關(guān)鍵字和描述來進(jìn)行搜索，在文檔中有些搜索引擎使用關(guān)鍵字和描述來進(jìn)行搜索，在文檔中可以提供如下語句：可以提供如下語句：。用。用Dreamweaver操作如下：操作如下：161. 插入關(guān)鍵詞插入關(guān)鍵詞單擊單擊Head對(duì)象面板上的對(duì)象面板上的Insert Keywords （插入插入關(guān)鍵詞）按鈕

12、關(guān)鍵詞）按鈕 ，出現(xiàn)如圖，出現(xiàn)如圖4.7 所示的對(duì)話框，所示的對(duì)話框，在文本框中輸入關(guān)鍵詞信息，多個(gè)關(guān)鍵詞之間在文本框中輸入關(guān)鍵詞信息，多個(gè)關(guān)鍵詞之間可以使用逗號(hào)隔開；可以使用逗號(hào)隔開；2. 插入描述信息插入描述信息單擊單擊Head對(duì)象面板上的對(duì)象面板上的Insert Description （插插入描述）按鈕入描述）按鈕 。打開。打開Insert Description對(duì)對(duì)話框，形式與圖話框，形式與圖4.7相同。在文本框中輸入描述相同。在文本框中輸入描述信息，按信息，按OK按鈕。按鈕。注意：注意： 關(guān)鍵詞和描述的修改方式與基地址相同。關(guān)鍵詞和描述的修改方式與基地址相同。4.1.4 頁面自動(dòng)刷

13、新頁面自動(dòng)刷新 17圖圖4.718【例【例4.3】自動(dòng)轉(zhuǎn)向其他頁面】自動(dòng)轉(zhuǎn)向其他頁面單擊單擊Head對(duì)象面板上的對(duì)象面板上的Insert Refresh （插入刷新）按插入刷新）按鈕鈕 ，打開，打開Insert Refresh對(duì)話框（見圖對(duì)話框（見圖4.8），在），在Delay.seconds文本框中，可以輸入網(wǎng)頁刷新的時(shí)間文本框中，可以輸入網(wǎng)頁刷新的時(shí)間間隔，單位為秒；在間隔，單位為秒；在Action（動(dòng)作）區(qū)域設(shè)置刷新的動(dòng)作）區(qū)域設(shè)置刷新的動(dòng)作，可以指定在指定的時(shí)間間隔后跳轉(zhuǎn)到某個(gè)頁面動(dòng)作，可以指定在指定的時(shí)間間隔后跳轉(zhuǎn)到某個(gè)頁面上上(Go To URL)，或是僅僅重新刷新自身或是僅僅重新

14、刷新自身(Refresh This Document)。自動(dòng)刷新特性目前已經(jīng)被越來越多的網(wǎng)頁所使用。例如，自動(dòng)刷新特性目前已經(jīng)被越來越多的網(wǎng)頁所使用。例如，可以首先在一個(gè)頁面上顯示歡迎信息，經(jīng)過一段時(shí)間，可以首先在一個(gè)頁面上顯示歡迎信息，經(jīng)過一段時(shí)間，自動(dòng)跳轉(zhuǎn)到指定的網(wǎng)頁上。另外一種使用自動(dòng)刷新功自動(dòng)跳轉(zhuǎn)到指定的網(wǎng)頁上。另外一種使用自動(dòng)刷新功能的原因是網(wǎng)站地址的遷移，這時(shí)可以首先在原先網(wǎng)能的原因是網(wǎng)站地址的遷移，這時(shí)可以首先在原先網(wǎng)址的主頁上顯示新的網(wǎng)址信息，以通知訪問舊網(wǎng)址的址的主頁上顯示新的網(wǎng)址信息，以通知訪問舊網(wǎng)址的用戶，然后經(jīng)過一段時(shí)間，再自動(dòng)跳轉(zhuǎn)到新地址上。用戶，然后經(jīng)過一段時(shí)間，再

15、自動(dòng)跳轉(zhuǎn)到新地址上。19圖圖4.8 提示：提示： 自動(dòng)刷新參數(shù)的修改方式與基地址相同。自動(dòng)刷新參數(shù)的修改方式與基地址相同。204.1.5 頁面屬性設(shè)置頁面屬性設(shè)置文檔的頁面屬性包括文檔的標(biāo)題、文檔正文中各個(gè)元文檔的頁面屬性包括文檔的標(biāo)題、文檔正文中各個(gè)元素的顏色等。比如素的顏色等。比如4.1節(jié)開頭的網(wǎng)頁，并沒有設(shè)置節(jié)開頭的網(wǎng)頁，并沒有設(shè)置文字的顏色，只顯示為黑色，這是文檔默認(rèn)的文文字的顏色，只顯示為黑色，這是文檔默認(rèn)的文本顏色，可以通過頁面屬性改變默認(rèn)文本的顏色。本顏色，可以通過頁面屬性改變默認(rèn)文本的顏色。正確設(shè)置文檔屬性，是成功編寫網(wǎng)頁的必要前提。正確設(shè)置文檔屬性，是成功編寫網(wǎng)頁的必要前提。

16、執(zhí)行執(zhí)行Modify|Page Properties(修改修改|頁面屬性頁面屬性)命令，命令，或是在文檔窗口中單擊鼠標(biāo)右鍵，然后從快捷菜或是在文檔窗口中單擊鼠標(biāo)右鍵，然后從快捷菜單中選擇單中選擇Page Properties（頁面屬性）。打開如頁面屬性）。打開如圖圖4.9 所示的所示的PageProperties（頁面屬性）對(duì)話頁面屬性）對(duì)話框，在該對(duì)話框中可以設(shè)置頁面的整體屬性?？颍谠搶?duì)話框中可以設(shè)置頁面的整體屬性。21圖圖4.922Title（標(biāo)題）：標(biāo)題）： 在該文本框中，可以輸入文檔的頁在該文本框中，可以輸入文檔的頁面標(biāo)題，它實(shí)際上是輸入位于面標(biāo)題，它實(shí)際上是輸入位于HTML頭部頭部

17、和和標(biāo)記之間的內(nèi)容，在瀏覽頁面時(shí)，會(huì)顯示標(biāo)記之間的內(nèi)容，在瀏覽頁面時(shí)，會(huì)顯示在瀏覽器的標(biāo)題欄上，頁面標(biāo)題也可以在工具欄的在瀏覽器的標(biāo)題欄上，頁面標(biāo)題也可以在工具欄的Title項(xiàng)中設(shè)置。項(xiàng)中設(shè)置。Background Image（背景圖像）：背景圖像）： 設(shè)置用作網(wǎng)頁設(shè)置用作網(wǎng)頁背景圖像的路徑和文件名稱，單擊背景圖像的路徑和文件名稱，單擊Browse（瀏覽）瀏覽）按鈕，可以從磁盤上選擇圖像文件。按鈕，可以從磁盤上選擇圖像文件。注意：注意： 這里不僅可以輸入本地圖像文件的路徑和文這里不僅可以輸入本地圖像文件的路徑和文件名稱，也可以用件名稱，也可以用URL的形式輸入其他位置的圖像的形式輸入其他位置的

18、圖像名稱，實(shí)際上可以是名稱，實(shí)際上可以是Internet上任何一臺(tái)上任何一臺(tái)Web服務(wù)服務(wù)器上的圖像文件。器上的圖像文件。Background（背景）：背景）： 為文檔頁面指定背景顏色，為文檔頁面指定背景顏色，設(shè)置設(shè)置HTML中中標(biāo)記的標(biāo)記的bgcolor屬性。屬性。23Text（文本）：文本）： 設(shè)置文檔頁面中文字的前景顏色，設(shè)置設(shè)置文檔頁面中文字的前景顏色，設(shè)置標(biāo)記的標(biāo)記的text屬性。屬性。Links（鏈接）：鏈接）： 設(shè)置文檔頁面中尚未訪問過的超鏈接文設(shè)置文檔頁面中尚未訪問過的超鏈接文字顏色，設(shè)置字顏色，設(shè)置標(biāo)記的標(biāo)記的link屬性。屬性。Visited Links（訪問過的鏈接）：訪

19、問過的鏈接）： 設(shè)置文檔頁面中已經(jīng)設(shè)置文檔頁面中已經(jīng)訪問過的超鏈接文字顏色，實(shí)際上設(shè)置的是訪問過的超鏈接文字顏色，實(shí)際上設(shè)置的是標(biāo)標(biāo)記的記的vlink屬性。屬性。Active Links（正在訪問的鏈接）：正在訪問的鏈接）： 設(shè)置文檔頁面中正設(shè)置文檔頁面中正在訪問的超鏈接文字顏色，實(shí)際上設(shè)置的是在訪問的超鏈接文字顏色，實(shí)際上設(shè)置的是標(biāo)標(biāo)記的記的alink屬性。屬性。Left Margin（左邊距）、左邊距）、Top Margin（上邊距）、上邊距）、Margin Width（頁邊寬度）和頁邊寬度）和Margin Height（頁邊頁邊高度）：高度）： 用于設(shè)置頁面文字同頁面邊緣的間距，分別用于

20、設(shè)置頁面文字同頁面邊緣的間距，分別對(duì)應(yīng)對(duì)應(yīng)標(biāo)記的標(biāo)記的leftmargin 、topmargin 、marginwidth 和和marginheight 屬性。屬性。24Document Encoding（文檔解碼方式）：文檔解碼方式）： 選擇當(dāng)前文選擇當(dāng)前文檔頁面的文字解碼方式，對(duì)于中國大陸使用的中文網(wǎng)檔頁面的文字解碼方式，對(duì)于中國大陸使用的中文網(wǎng)頁，應(yīng)該選擇頁，應(yīng)該選擇Simplified Chinese （GB2312）。）。如果如果這里沒有滿足需要的解碼方式，可以從列表中選擇這里沒有滿足需要的解碼方式，可以從列表中選擇Other，這時(shí)，頁面會(huì)使用瀏覽器運(yùn)行環(huán)境的解碼方式。這時(shí)，頁面會(huì)使

21、用瀏覽器運(yùn)行環(huán)境的解碼方式。Tracing Image（草稿圖）：草稿圖）： 指定一幅圖像作為網(wǎng)頁創(chuàng)指定一幅圖像作為網(wǎng)頁創(chuàng)作時(shí)的臨時(shí)用圖，顯示在文檔窗口的背景上，便于在作時(shí)的臨時(shí)用圖，顯示在文檔窗口的背景上，便于在網(wǎng)頁創(chuàng)作時(shí)進(jìn)行定位和安放對(duì)象。但它并不在實(shí)際生網(wǎng)頁創(chuàng)作時(shí)進(jìn)行定位和安放對(duì)象。但它并不在實(shí)際生成網(wǎng)頁中顯示。成網(wǎng)頁中顯示。Image（圖像）：圖像）： 拖動(dòng)該滑塊，可以改變草稿圖的透明拖動(dòng)該滑塊，可以改變草稿圖的透明程度，使用適當(dāng)?shù)耐该鞒潭瓤梢员苊飧蓴_網(wǎng)頁的編輯，程度，使用適當(dāng)?shù)耐该鞒潭瓤梢员苊飧蓴_網(wǎng)頁的編輯，Transparent表示全透明，表示全透明，Opaque表示完全不透明。表

22、示完全不透明。254.2 段落格式化4.2.1 定義段落定義段落在在HTML中，段落主要由標(biāo)記中，段落主要由標(biāo)記和和定義。在定義。在Dreamweaver的文檔窗口中，每按下一次回車鍵，的文檔窗口中，每按下一次回車鍵，即可將之定義為一個(gè)段落，即可將之定義為一個(gè)段落，Dreamweaver會(huì)自動(dòng)會(huì)自動(dòng)為段落文字兩端添加上為段落文字兩端添加上和和標(biāo)記。段落中的標(biāo)記。段落中的內(nèi)容可以是文本，也可以是圖像等其他類型的對(duì)內(nèi)容可以是文本，也可以是圖像等其他類型的對(duì)象。瀏覽器在處理象。瀏覽器在處理標(biāo)記時(shí)，通常將它所包容的標(biāo)記時(shí)，通常將它所包容的段落同上一段落之間用一個(gè)空行隔開。圖段落同上一段落之間用一個(gè)空行

23、隔開。圖4.10是兩是兩個(gè)段落的代碼和設(shè)計(jì)效果。個(gè)段落的代碼和設(shè)計(jì)效果。26圖圖4.1027一般來說，段落中文本的換行是自動(dòng)進(jìn)行的，在大多數(shù)一般來說，段落中文本的換行是自動(dòng)進(jìn)行的，在大多數(shù)情況下，由瀏覽器的窗口大小來決定。在瀏覽網(wǎng)頁時(shí)，情況下，由瀏覽器的窗口大小來決定。在瀏覽網(wǎng)頁時(shí)，不同的窗口大小，可能導(dǎo)致段落中換行位置發(fā)生變化。不同的窗口大小，可能導(dǎo)致段落中換行位置發(fā)生變化。同樣在文檔窗口中，窗口的大小也會(huì)影響段落的顯示。同樣在文檔窗口中，窗口的大小也會(huì)影響段落的顯示。圖圖4.11和圖和圖4.12顯示了當(dāng)改變?yōu)g覽器窗口大小時(shí)，其中顯示了當(dāng)改變?yōu)g覽器窗口大小時(shí)，其中段落文本換行的情形。段落文本

24、換行的情形。圖圖4.12瀏覽器窗口大的瀏覽效果有時(shí)候希望將一組文字瀏覽器窗口大的瀏覽效果有時(shí)候希望將一組文字設(shè)置為一個(gè)段落，但是又希望在其中某個(gè)位置強(qiáng)制換設(shè)置為一個(gè)段落，但是又希望在其中某個(gè)位置強(qiáng)制換行，這時(shí)可以在代碼窗口中使用行，這時(shí)可以在代碼窗口中使用標(biāo)記。它用于在標(biāo)記。它用于在段落中指定位置將文字?jǐn)嘈?，但是上下兩塊文字仍然段落中指定位置將文字?jǐn)嘈校巧舷聝蓧K文字仍然屬于同一個(gè)段落。換句話說，對(duì)于換行位置上面的文屬于同一個(gè)段落。換句話說，對(duì)于換行位置上面的文字設(shè)置的段落格式同樣會(huì)影響到換行位置下面的段落字設(shè)置的段落格式同樣會(huì)影響到換行位置下面的段落格式。格式。28圖圖4.1129圖圖4.

25、1230注意：文字換段后，兩段之間有空行，而使用強(qiáng)制換注意：文字換段后，兩段之間有空行，而使用強(qiáng)制換行標(biāo)記行標(biāo)記后，前后行之間無空行；后，前后行之間無空行；在在HTML源代碼中，僅僅按下回車鍵是無法實(shí)現(xiàn)換行源代碼中，僅僅按下回車鍵是無法實(shí)現(xiàn)換行的目的的。在設(shè)計(jì)窗口中，按下回車鍵可以實(shí)現(xiàn)換的目的的。在設(shè)計(jì)窗口中，按下回車鍵可以實(shí)現(xiàn)換行，但是這實(shí)際上生成的是新段落（換段）。行，但是這實(shí)際上生成的是新段落（換段）。4.2.2 設(shè)置標(biāo)題設(shè)置標(biāo)題標(biāo)題是表明一段或幾段文字內(nèi)容的簡(jiǎn)短文字。在標(biāo)題是表明一段或幾段文字內(nèi)容的簡(jiǎn)短文字。在HTML中，按字號(hào)大小不同定義了中，按字號(hào)大小不同定義了6 級(jí)標(biāo)題，從級(jí)標(biāo)題

26、，從1到到6級(jí)，各級(jí)標(biāo)題的字號(hào)大小依次遞減，但每級(jí)標(biāo)題級(jí)，各級(jí)標(biāo)題的字號(hào)大小依次遞減，但每級(jí)標(biāo)題的大小并沒有一個(gè)固定的值，而是由瀏覽器所決定。的大小并沒有一個(gè)固定的值，而是由瀏覽器所決定。為標(biāo)題定義的級(jí)別只決定了標(biāo)題之間的相對(duì)大小。為標(biāo)題定義的級(jí)別只決定了標(biāo)題之間的相對(duì)大小。31定義標(biāo)題使用定義標(biāo)題使用和和標(biāo)記。采用標(biāo)題的形式，也標(biāo)記。采用標(biāo)題的形式，也可以定義段落；或者說，一個(gè)標(biāo)題也是一個(gè)段落。例可以定義段落；或者說，一個(gè)標(biāo)題也是一個(gè)段落。例如，將一行文字設(shè)置為標(biāo)題如，將一行文字設(shè)置為標(biāo)題1 格式，實(shí)際上是在格式，實(shí)際上是在HTML中將該行文字兩端添加中將該行文字兩端添加和和標(biāo)記，它一方面標(biāo)

27、記，它一方面定義了該行文字的標(biāo)題級(jí)別，另一方面定義該行文字定義了該行文字的標(biāo)題級(jí)別，另一方面定義該行文字為一個(gè)段落。為一個(gè)段落。在在Dreamweaver中設(shè)置標(biāo)題，將插入點(diǎn)放到要設(shè)置標(biāo)題中設(shè)置標(biāo)題，將插入點(diǎn)放到要設(shè)置標(biāo)題的段落中，通常該段落是一行文字。如果希望將多個(gè)的段落中，通常該段落是一行文字。如果希望將多個(gè)段落設(shè)置為標(biāo)題，則可以選中多個(gè)段落，然后打開段落設(shè)置為標(biāo)題，則可以選中多個(gè)段落，然后打開Text菜單，選擇菜單，選擇Format，再選擇相應(yīng)的標(biāo)題級(jí)別菜單再選擇相應(yīng)的標(biāo)題級(jí)別菜單項(xiàng)（項(xiàng)（Heading 1Heading 6）(見圖見圖4.13)。也可以使用。也可以使用屬性面板上的屬性面

28、板上的Format下拉列表（見圖下拉列表（見圖4.14），然后從），然后從菜單上選擇相應(yīng)的菜單上選擇相應(yīng)的Heading 1、Heading 2等菜單項(xiàng)，等菜單項(xiàng)，即可將當(dāng)前插入點(diǎn)所在位置的文本設(shè)置為相應(yīng)級(jí)別的即可將當(dāng)前插入點(diǎn)所在位置的文本設(shè)置為相應(yīng)級(jí)別的標(biāo)題標(biāo)題(圖圖4.15)。32圖圖4.1333圖圖4.1434圖圖4.15354.2.3 定義預(yù)格式化文本定義預(yù)格式化文本在在HTML的文本中，對(duì)文字中連續(xù)多個(gè)空格，瀏覽時(shí)只能的文本中，對(duì)文字中連續(xù)多個(gè)空格，瀏覽時(shí)只能識(shí)別一個(gè)。例如，如下兩行的顯示效果是一樣的：識(shí)別一個(gè)。例如，如下兩行的顯示效果是一樣的：紅樓夢(mèng)三國演義西游記紅樓夢(mèng)三國演義西游

29、記紅樓夢(mèng)三國演義西游記紅樓夢(mèng)三國演義西游記這樣有時(shí)候在顯示一些這樣有時(shí)候在顯示一些需要特殊格式的文本時(shí)（例如詩歌），就顯得非常不需要特殊格式的文本時(shí)（例如詩歌），就顯得非常不便。在便。在HTML中，可使用預(yù)格式標(biāo)記中，可使用預(yù)格式標(biāo)記和和來來解決這個(gè)問題。解決這個(gè)問題。所謂預(yù)格式化，即用戶預(yù)先對(duì)所謂預(yù)格式化，即用戶預(yù)先對(duì)和和之間的文字之間的文字進(jìn)行格式化，瀏覽器在顯示其中的內(nèi)容時(shí)，會(huì)完全按進(jìn)行格式化，瀏覽器在顯示其中的內(nèi)容時(shí)，會(huì)完全按照其原來的格式顯示。比如，原封不動(dòng)地保留文檔中照其原來的格式顯示。比如，原封不動(dòng)地保留文檔中的空格、制表符等。這樣一來，下面兩條語句的顯示的空格、制表符等。這樣一

30、來，下面兩條語句的顯示效果是不一樣的。效果是不一樣的。36紅樓夢(mèng)紅樓夢(mèng) 三國演義三國演義 西游記西游記紅樓夢(mèng)紅樓夢(mèng) 三國演義三國演義 西游記西游記注意：注意： 預(yù)格式化文本保留預(yù)格式中的空格、制表符、預(yù)格式化文本保留預(yù)格式中的空格、制表符、換行等預(yù)格式，即使一行文字很長(zhǎng)，也不會(huì)自動(dòng)換換行等預(yù)格式，即使一行文字很長(zhǎng)，也不會(huì)自動(dòng)換行。因此，除非特別需要，盡量不要使用預(yù)格式化行。因此，除非特別需要，盡量不要使用預(yù)格式化文本。文本。技巧：技巧： 如果需要使用多個(gè)連續(xù)的空格，可以在代碼如果需要使用多個(gè)連續(xù)的空格，可以在代碼視圖中插入多個(gè)視圖中插入多個(gè)“&nbsp”；每個(gè)將顯示一個(gè)空格。每個(gè)將顯示

31、一個(gè)空格?！纠纠?.4】使用預(yù)格式化文本】使用預(yù)格式化文本 將插入點(diǎn)放置到要設(shè)置預(yù)格式化的段落中，如果將插入點(diǎn)放置到要設(shè)置預(yù)格式化的段落中，如果要將多個(gè)段落設(shè)置為預(yù)格式化，可以選中這多個(gè)段要將多個(gè)段落設(shè)置為預(yù)格式化，可以選中這多個(gè)段落；落；37 打開打開Text菜單，選擇菜單，選擇Format，再選擇再選擇Preformatted Text（預(yù)格式化文本）命令，也可以在屬性面板上打預(yù)格式化文本）命令，也可以在屬性面板上打開開Format下拉列表，選擇下拉列表，選擇Preformatted； 如果必要，可以繼續(xù)對(duì)文檔設(shè)計(jì)窗口中的文本進(jìn)行像如果必要，可以繼續(xù)對(duì)文檔設(shè)計(jì)窗口中的文本進(jìn)行像操作純文本

32、一樣的格式化操作，預(yù)格式化的文本在代操作純文本一樣的格式化操作，預(yù)格式化的文本在代碼窗口和設(shè)計(jì)窗口中的顯示是一樣的碼窗口和設(shè)計(jì)窗口中的顯示是一樣的(圖圖4.16)。4.2.4 段落對(duì)齊段落對(duì)齊段落的對(duì)齊方式是段落相對(duì)文檔窗口（或?yàn)g覽器窗口）段落的對(duì)齊方式是段落相對(duì)文檔窗口（或?yàn)g覽器窗口）在水平位置的對(duì)齊方式，分為左對(duì)齊、居中和右對(duì)齊。在水平位置的對(duì)齊方式，分為左對(duì)齊、居中和右對(duì)齊。【例【例4.5】設(shè)置對(duì)齊方式】設(shè)置對(duì)齊方式 將插入點(diǎn)放置到要設(shè)置對(duì)齊方式的文檔中，如果要設(shè)將插入點(diǎn)放置到要設(shè)置對(duì)齊方式的文檔中，如果要設(shè)置多個(gè)文檔段落的對(duì)齊方式，可以選中這些段落；置多個(gè)文檔段落的對(duì)齊方式，可以選中這

33、些段落；38圖圖4.1639 打開打開Text菜單，選擇菜單，選擇Alignment（對(duì)齊），再選擇相對(duì)齊），再選擇相應(yīng)的對(duì)齊方式菜單項(xiàng)：應(yīng)的對(duì)齊方式菜單項(xiàng)：Left（左對(duì)齊）、左對(duì)齊）、Center（居居中）、中）、Right（右對(duì)齊）。右對(duì)齊）。也可以使用屬性面板完成相應(yīng)功能。單擊屬性面板上的也可以使用屬性面板完成相應(yīng)功能。單擊屬性面板上的對(duì)齊按鈕，即可為當(dāng)前段落設(shè)置對(duì)齊方式，如圖對(duì)齊按鈕，即可為當(dāng)前段落設(shè)置對(duì)齊方式，如圖4.17所示。圖所示。圖4.18是各種對(duì)齊方式的效果。是各種對(duì)齊方式的效果。提示：提示： 在瀏覽器中改變窗口大小時(shí)，段落同窗口的相對(duì)在瀏覽器中改變窗口大小時(shí)，段落同窗口的

34、相對(duì)位置保持不變。位置保持不變。4.2.5 段落縮進(jìn)段落縮進(jìn)【例【例4.6】段落縮進(jìn)】段落縮進(jìn) 將插入點(diǎn)放置到要設(shè)置縮進(jìn)的段落中，如果希望縮進(jìn)將插入點(diǎn)放置到要設(shè)置縮進(jìn)的段落中，如果希望縮進(jìn)多個(gè)段落，可選中多個(gè)段落；多個(gè)段落，可選中多個(gè)段落；40圖圖4.1741圖圖4.1842 打開打開Text菜單，選擇菜單，選擇Indent（縮進(jìn)），即可將當(dāng)縮進(jìn)），即可將當(dāng)前段落往中間縮進(jìn)一段位置（一般是前段落往中間縮進(jìn)一段位置（一般是2個(gè)圖個(gè)圖4.19屬屬性面板縮進(jìn)按鈕性面板縮進(jìn)按鈕漢字的位置）。選擇漢字的位置）。選擇Outdent（伸出），即可將當(dāng)前伸出），即可將當(dāng)前段落向兩邊伸展一段位置。段落向兩邊伸展

35、一段位置。Indent和和Outdent是一是一對(duì)互為相反的命令。對(duì)互為相反的命令。利用屬性面板也可以完成文檔的縮進(jìn)操作：?jiǎn)螕魧傩岳脤傩悦姘逡部梢酝瓿晌臋n的縮進(jìn)操作：?jiǎn)螕魧傩悦姘迳系目s進(jìn)和伸出按鈕（圖面板上的縮進(jìn)和伸出按鈕（圖4.19），即可實(shí)現(xiàn)當(dāng)），即可實(shí)現(xiàn)當(dāng)前段落的縮進(jìn)和伸出。前段落的縮進(jìn)和伸出。使用快捷鍵實(shí)現(xiàn)縮進(jìn)更為簡(jiǎn)單，按使用快捷鍵實(shí)現(xiàn)縮進(jìn)更為簡(jiǎn)單，按Ctrl+鍵執(zhí)行一次鍵執(zhí)行一次縮進(jìn)操作，按縮進(jìn)操作，按Ctrl+鍵進(jìn)行一次伸出操作。圖鍵進(jìn)行一次伸出操作。圖4.20是不同縮進(jìn)量的效果。是不同縮進(jìn)量的效果。43圖圖4.1944圖圖4.2045注意：縮進(jìn)在注意：縮進(jìn)在HTML中用中用和和

36、標(biāo)記實(shí)現(xiàn)，但并沒有伸出標(biāo)記，它標(biāo)記實(shí)現(xiàn)，但并沒有伸出標(biāo)記，它只是只是Dreamweaver為方便操作而設(shè)置的；為方便操作而設(shè)置的；縮進(jìn)和伸出操作可以重復(fù)?？s進(jìn)標(biāo)記可以嵌套，以實(shí)縮進(jìn)和伸出操作可以重復(fù)。縮進(jìn)標(biāo)記可以嵌套，以實(shí)現(xiàn)不同的縮進(jìn)量?？s進(jìn)最窄不低于一個(gè)字符寬度，現(xiàn)不同的縮進(jìn)量。縮進(jìn)最窄不低于一個(gè)字符寬度，最寬不超過瀏覽窗口寬度。最寬不超過瀏覽窗口寬度。4.2.6 強(qiáng)制換行強(qiáng)制換行使用定義新段落的方法實(shí)現(xiàn)換行效果會(huì)產(chǎn)生一個(gè)空行使用定義新段落的方法實(shí)現(xiàn)換行效果會(huì)產(chǎn)生一個(gè)空行大小的間距。有時(shí)候希望文字在段落中的指定位置大小的間距。有時(shí)候希望文字在段落中的指定位置換行，圖換行，圖4.21字符對(duì)象面

37、板的換行按鈕如果用段落字符對(duì)象面板的換行按鈕如果用段落的方法，則會(huì)產(chǎn)生一個(gè)空行，達(dá)不到設(shè)計(jì)目的，會(huì)的方法，則會(huì)產(chǎn)生一個(gè)空行，達(dá)不到設(shè)計(jì)目的，會(huì)影響文本的美觀。強(qiáng)制換行功則能解決這一問題。影響文本的美觀。強(qiáng)制換行功則能解決這一問題。46圖圖4.2147先將插入點(diǎn)放置到段落中要換行的位置，然后執(zhí)行先將插入點(diǎn)放置到段落中要換行的位置，然后執(zhí)行Insert Line Break命令，也可以單擊字符命令，也可以單擊字符（Characters）對(duì)象面板上的對(duì)象面板上的Insert Line Break（插入換行）插入換行） 按鈕（圖按鈕（圖4.21），或直接按），或直接按組合鍵。圖組合鍵。圖4.22是換段

38、和換行效果的對(duì)比。是換段和換行效果的對(duì)比。484.3 字符格式化4.3.1設(shè)置字體設(shè)置字體1. 設(shè)置字體要為字符設(shè)置字體，首先選中要設(shè)置字設(shè)置字體要為字符設(shè)置字體，首先選中要設(shè)置字體的文字，然后打開體的文字，然后打開Text(文本文本)菜單，選擇菜單，選擇Font(字體字體)，再選擇相應(yīng)的字體菜單項(xiàng)即可（見圖，再選擇相應(yīng)的字體菜單項(xiàng)即可（見圖4.23）。如果希望設(shè)置為默認(rèn)字體（對(duì)于簡(jiǎn)體中文）。如果希望設(shè)置為默認(rèn)字體（對(duì)于簡(jiǎn)體中文環(huán)境來說，一般是宋體），則可以選擇環(huán)境來說，一般是宋體），則可以選擇Default Fonts（默認(rèn)字體）。默認(rèn)字體）。利用屬性面板，也可以設(shè)置字符字體。選中文本，利用

39、屬性面板，也可以設(shè)置字符字體。選中文本，打開屬性面板上的字體列表，選擇相應(yīng)字體項(xiàng)即打開屬性面板上的字體列表，選擇相應(yīng)字體項(xiàng)即可，如圖可，如圖4.24所示。圖所示。圖4.25是幾種字體效果。是幾種字體效果。49圖圖4.2350圖圖4.2451圖圖4.2552有時(shí)想使用的字體可能沒在字體列表中顯示出來，特有時(shí)想使用的字體可能沒在字體列表中顯示出來，特別是在安裝后第一次使用別是在安裝后第一次使用Dreamweaver時(shí)，這時(shí)時(shí)，這時(shí)可以使用字體列表最下邊的可以使用字體列表最下邊的Edit Font List（編輯編輯字體列表）命令。字體列表）命令。2. 編輯字體列表編輯字體列表【例【例4.7】編輯字

40、體列表】編輯字體列表 打開打開Text菜單，選擇菜單，選擇Font，再選擇再選擇Edit Font List（編輯字體列表）命令；也可以從圖編輯字體列表）命令；也可以從圖4.24所示屬性所示屬性面板上的菜單列表中選擇面板上的菜單列表中選擇Edit Font List命令，打命令，打開開Edit Font List(編輯字體列表編輯字體列表)對(duì)話框（見圖對(duì)話框（見圖4.26）；）；Font List列出當(dāng)前字體列表中的字體，列出當(dāng)前字體列表中的字體，Available Fonts列出當(dāng)前列出當(dāng)前Windows系統(tǒng)中可用的系統(tǒng)中可用的字體，字體，Chosen Fonts列出當(dāng)前選擇的字體；列出當(dāng)前

41、選擇的字體；53圖圖4.2654 添加字體。在添加字體。在Available Fonts（可用字體）列表中選可用字體）列表中選擇一種字體，按擇一種字體，按“”按鈕，字體顯示在按鈕，字體顯示在Chosen Fonts框中，再按框中，再按“+”按鈕，則將字體添加到按鈕，則將字體添加到Dreamweaver可用的字體列表中；可用的字體列表中； 刪除字體。在刪除字體。在Font List （字體列表）選擇一種字體，字體列表）選擇一種字體，字體顯示在字體顯示在Chosen Fonts框中，按框中，按“-”按鈕，則將按鈕，則將字體從字體從Dreamweaver可用的字體列表中刪除?？捎玫淖煮w列表中刪除。注

42、意：注意：一個(gè)段落中可以有不同的字符格式化效果，只要選中相一個(gè)段落中可以有不同的字符格式化效果，只要選中相應(yīng)文字，設(shè)置字體即可（圖應(yīng)文字，設(shè)置字體即可（圖4.27）；）；在文檔中所能夠使用的字體種類通常和在在文檔中所能夠使用的字體種類通常和在Windows系統(tǒng)系統(tǒng)中安裝的字體有關(guān)。如果沒有安裝其他字體，則在中安裝的字體有關(guān)。如果沒有安裝其他字體，則在Availables Fonts(可用字體可用字體)列表中只有宋體、黑體、列表中只有宋體、黑體、楷體、仿宋楷體、仿宋4種字體；種字體；55圖圖4.2756網(wǎng)頁中可顯示的字體與瀏覽該網(wǎng)頁用戶的計(jì)算機(jī)中安裝網(wǎng)頁中可顯示的字體與瀏覽該網(wǎng)頁用戶的計(jì)算機(jī)中安

43、裝的字體有關(guān)，如果用戶計(jì)算機(jī)中沒有安裝你設(shè)置的字的字體有關(guān)，如果用戶計(jì)算機(jī)中沒有安裝你設(shè)置的字體，則瀏覽器以默認(rèn)字體（通常是宋體）顯示，因此體，則瀏覽器以默認(rèn)字體（通常是宋體）顯示，因此建議在網(wǎng)頁中盡量使用建議在網(wǎng)頁中盡量使用Windows安裝的安裝的4種字體。如種字體。如果為了美觀，需要使用其他字體，則可以將使用特殊果為了美觀，需要使用其他字體，則可以將使用特殊字體的文字制作成圖像，然后插入到網(wǎng)頁中，這樣即字體的文字制作成圖像，然后插入到網(wǎng)頁中，這樣即使系統(tǒng)中沒有安裝該字體，也能正常瀏覽網(wǎng)頁，看到使系統(tǒng)中沒有安裝該字體，也能正常瀏覽網(wǎng)頁，看到豐富的圖文效果。豐富的圖文效果。4.3.2 設(shè)置字

44、號(hào)設(shè)置字號(hào)字號(hào)指的是字符的大小。網(wǎng)頁中的字號(hào)沒有絕對(duì)的大小字號(hào)指的是字符的大小。網(wǎng)頁中的字號(hào)沒有絕對(duì)的大小標(biāo)準(zhǔn)，只是相對(duì)大小。系統(tǒng)默認(rèn)字號(hào)為標(biāo)準(zhǔn)，只是相對(duì)大小。系統(tǒng)默認(rèn)字號(hào)為3號(hào)，號(hào)，1號(hào)和號(hào)和2號(hào)號(hào)字比默認(rèn)字體要小一些，字比默認(rèn)字體要小一些，4號(hào)和號(hào)和5號(hào)字比默認(rèn)字體要大號(hào)字比默認(rèn)字體要大一些。一些。要在要在Dreamweaver中設(shè)置字符的字號(hào)，操作如下：中設(shè)置字符的字號(hào)，操作如下：57 選中要設(shè)置字號(hào)的文字；選中要設(shè)置字號(hào)的文字； 打開打開Text菜單，選擇菜單，選擇Size（大小），然后根據(jù)需要的大?。?，然后根據(jù)需要的大小，選擇從大小，選擇從1到到7（見圖（見圖4.28）。如果希望使用

45、默認(rèn)）。如果希望使用默認(rèn)字體大小，可以從菜單中選擇字體大小，可以從菜單中選擇Default（默認(rèn)）；默認(rèn)）； 如果希望以默認(rèn)字符大小為基準(zhǔn)，設(shè)置字符相對(duì)默認(rèn)如果希望以默認(rèn)字符大小為基準(zhǔn)，設(shè)置字符相對(duì)默認(rèn)字符大小的增減量，可以在字符大小的增減量，可以在Text菜單中選擇菜單中選擇Size Change（改變大?。╉?xiàng)，然后選擇要增減的級(jí)別。改變大?。╉?xiàng)，然后選擇要增減的級(jí)別。+n表示增加表示增加n號(hào)，號(hào)，-n表示減小表示減小n號(hào)。號(hào)。利用屬性面板也可以完成字號(hào)設(shè)置。打開屬性面板上用利用屬性面板也可以完成字號(hào)設(shè)置。打開屬性面板上用于于Size(字號(hào)字號(hào))下拉列表下拉列表(見圖見圖4.29)，選擇需要

46、的字號(hào)大，選擇需要的字號(hào)大小或直接在小或直接在Size文本框中輸入數(shù)字（文本框中輸入數(shù)字（17）按回車。）按回車。 圖圖4.30是不同字號(hào)大小的瀏覽效果。是不同字號(hào)大小的瀏覽效果。58圖圖4.2859圖圖4.29604.3.3 設(shè)置顏色設(shè)置顏色豐富的字符顏色能夠極大地增強(qiáng)文檔的表現(xiàn)力和感染力。豐富的字符顏色能夠極大地增強(qiáng)文檔的表現(xiàn)力和感染力。 選中要設(shè)置顏色的文字；選中要設(shè)置顏色的文字； 在屬性面板上，單擊在屬性面板上，單擊Text Color（文本顏色）按鈕，文本顏色）按鈕，打開如圖打開如圖4.31所示的顏色板。圖所示的顏色板。圖4.28用菜單設(shè)置字號(hào)用菜單設(shè)置字號(hào)這時(shí)鼠標(biāo)光標(biāo)變?yōu)槲苄螤睿?/p>

47、可以在這時(shí)鼠標(biāo)光標(biāo)變?yōu)槲苄螤睿梢栽贒reamweaver窗口窗口中移動(dòng)，在中移動(dòng)，在Target后的顏色框中顯示光標(biāo)所到之處的后的顏色框中顯示光標(biāo)所到之處的顏色，單擊鼠標(biāo)選中該顏色。也可以直接在顏色，單擊鼠標(biāo)選中該顏色。也可以直接在Text Color按鈕右方的文本框中，直接輸入顏色的十六進(jìn)制數(shù)值；按鈕右方的文本框中，直接輸入顏色的十六進(jìn)制數(shù)值；技巧：技巧： 當(dāng)鼠標(biāo)指向文檔窗口中的文本或圖像時(shí)，可以設(shè)當(dāng)鼠標(biāo)指向文檔窗口中的文本或圖像時(shí)，可以設(shè)置與該文本或圖像相同的顏色。置與該文本或圖像相同的顏色。 如果希望取消顏色設(shè)置，可以單擊顏色板右上角的如果希望取消顏色設(shè)置，可以單擊顏色板右上角的De

48、fault Color(默認(rèn)顏色默認(rèn)顏色)按鈕。按鈕。61圖圖4.3062圖圖4.3163注意：注意：如果希望設(shè)置字符的默認(rèn)顏色，可以執(zhí)行如果希望設(shè)置字符的默認(rèn)顏色，可以執(zhí)行Modify|Page Properties（頁面屬性）命令，或是在文檔中單擊鼠頁面屬性）命令，或是在文檔中單擊鼠標(biāo)右鍵，然后從快捷菜單中選擇標(biāo)右鍵，然后從快捷菜單中選擇Page Properties命令，命令，在在Page Properties對(duì)話框中設(shè)置；對(duì)話框中設(shè)置；多次設(shè)置字符格式后，可能會(huì)產(chǎn)生類似如下的語句，多次設(shè)置字符格式后，可能會(huì)產(chǎn)生類似如下的語句， 丹唇未丹唇未啟笑先聞啟笑先聞 實(shí)際上實(shí)際上face和和co

49、lor可以合并可以合并一個(gè)一個(gè)font標(biāo)記的兩個(gè)屬性，以減少代碼量。所以在頁面標(biāo)記的兩個(gè)屬性，以減少代碼量。所以在頁面制作完成時(shí)，最好使用一下制作完成時(shí)，最好使用一下Dreamweaver的凈化功能的凈化功能（Commands|Clean up HTML），），以減少冗余代碼。以減少冗余代碼。644.3.4 設(shè)置常規(guī)字型設(shè)置常規(guī)字型字符的字型（字符的字型（style）有時(shí)候也稱字符的風(fēng)格、樣式，有時(shí)候也稱字符的風(fēng)格、樣式，指的是字符的顯示方式，例如字符的加粗、傾斜和指的是字符的顯示方式，例如字符的加粗、傾斜和下劃線等。下劃線等。選中要設(shè)置格式的字符，選擇選中要設(shè)置格式的字符，選擇Text|St

50、yle，打開如圖打開如圖4.32所示的菜單，從中選擇所需的字型，即可將選所示的菜單，從中選擇所需的字型，即可將選中的文字設(shè)置為相應(yīng)的字符格式，相應(yīng)的字型前面中的文字設(shè)置為相應(yīng)的字符格式，相應(yīng)的字型前面有選中標(biāo)志（有選中標(biāo)志（ ）。）。如果希望取消設(shè)置的字符格式，可以再次打開該菜單如果希望取消設(shè)置的字符格式，可以再次打開該菜單選擇該菜單項(xiàng)，清除其選中的標(biāo)志。選擇該菜單項(xiàng)，清除其選中的標(biāo)志。常用的字型格式是加粗常用的字型格式是加粗(Bold)和傾斜和傾斜(Italic)，這兩種這兩種字型可以很方便地從屬性面板上設(shè)置，只需選定文字型可以很方便地從屬性面板上設(shè)置，只需選定文本并單擊相應(yīng)的本并單擊相應(yīng)的

51、B（加粗）圖標(biāo)和加粗）圖標(biāo)和I（傾斜）圖標(biāo)即傾斜）圖標(biāo)即可。圖可。圖4.33是幾種常用字型的效果。是幾種常用字型的效果。65圖圖4.3266圖圖4.33674.4 項(xiàng)目列表4.4.1創(chuàng)建列表創(chuàng)建列表在在Dreamweaver中，可以在輸入文字時(shí)創(chuàng)建項(xiàng)目列表，中，可以在輸入文字時(shí)創(chuàng)建項(xiàng)目列表，也可以將現(xiàn)有段落轉(zhuǎn)換為項(xiàng)目列表。也可以將現(xiàn)有段落轉(zhuǎn)換為項(xiàng)目列表?！纠纠?.8】創(chuàng)建新的項(xiàng)目列表】創(chuàng)建新的項(xiàng)目列表 先輸入項(xiàng)目列表的第一行，將插入點(diǎn)放置到該行中；先輸入項(xiàng)目列表的第一行，將插入點(diǎn)放置到該行中； 打開打開Text菜單，選擇菜單，選擇List（列表），打開列表菜單列表），打開列表菜單（見圖（見圖

52、4.34）；）； 選擇要?jiǎng)?chuàng)建的列表類別：選擇要?jiǎng)?chuàng)建的列表類別：Unordered List（無序列無序列表）、表）、Ordered List（有序列表）、有序列表）、Definition List（定義列表），被選擇的列表類別前標(biāo)有選中符號(hào)定義列表），被選擇的列表類別前標(biāo)有選中符號(hào)（對(duì)號(hào)）；（對(duì)號(hào)）；68圖圖4.3469 在第一行后面回車，繼續(xù)輸入項(xiàng)目中的其他內(nèi)容，這在第一行后面回車，繼續(xù)輸入項(xiàng)目中的其他內(nèi)容，這時(shí)項(xiàng)目前會(huì)出現(xiàn)相應(yīng)的項(xiàng)目符號(hào)或編號(hào)；時(shí)項(xiàng)目前會(huì)出現(xiàn)相應(yīng)的項(xiàng)目符號(hào)或編號(hào)； 如果希望結(jié)束項(xiàng)目列表，可以在最后一行之后連續(xù)按如果希望結(jié)束項(xiàng)目列表，可以在最后一行之后連續(xù)按下兩次回車。下兩次

53、回車。提示：提示： 單擊屬性面板上的列表按鈕（圖單擊屬性面板上的列表按鈕（圖4.34）可以快速）可以快速創(chuàng)建無序列表和有序列表。創(chuàng)建無序列表和有序列表。如果希望將現(xiàn)有的段落文字轉(zhuǎn)換為項(xiàng)目列表，可以選中如果希望將現(xiàn)有的段落文字轉(zhuǎn)換為項(xiàng)目列表，可以選中要轉(zhuǎn)換為項(xiàng)目列表的所有段落，然后打開要轉(zhuǎn)換為項(xiàng)目列表的所有段落，然后打開Text菜單，菜單，選擇選擇List，再選擇相應(yīng)的列表類別：再選擇相應(yīng)的列表類別：Unordered List（無序列表）、無序列表）、Ordered List（有序列表）、有序列表）、Definition List（定義列表），或單擊屬性面板上的列定義列表），或單擊屬性面板上的

54、列表按鈕。圖表按鈕。圖4.35是各種列表的形式，其中定義列表伸是各種列表的形式，其中定義列表伸出的表示定義的項(xiàng)目，縮進(jìn)的表示相應(yīng)項(xiàng)目的解釋。出的表示定義的項(xiàng)目，縮進(jìn)的表示相應(yīng)項(xiàng)目的解釋。70圖圖4.3571如果想取消項(xiàng)目列表，可以選中要取消的列表項(xiàng)目（單如果想取消項(xiàng)目列表，可以選中要取消的列表項(xiàng)目（單項(xiàng)或多項(xiàng)），然后執(zhí)行項(xiàng)或多項(xiàng)），然后執(zhí)行Text|List(列表列表)|None(無無)，或，或直接單擊屬性面板上的列表按鈕，使其處于彈起狀態(tài)。直接單擊屬性面板上的列表按鈕，使其處于彈起狀態(tài)。4.4.2 嵌套列表嵌套列表項(xiàng)目列表可以進(jìn)行嵌套，以實(shí)現(xiàn)多級(jí)項(xiàng)目列表的形式。項(xiàng)目列表可以進(jìn)行嵌套，以實(shí)現(xiàn)多

55、級(jí)項(xiàng)目列表的形式?！纠纠?.9】制作嵌套列表】制作嵌套列表 選中需要嵌套的列表項(xiàng)目（一項(xiàng)或多項(xiàng)）；選中需要嵌套的列表項(xiàng)目（一項(xiàng)或多項(xiàng)）； 打開打開Text菜單，選擇菜單，選擇Indent（縮進(jìn)）縮進(jìn)） ，如單擊屬性面，如單擊屬性面板上的板上的“縮進(jìn)縮進(jìn)”按鈕，則被選項(xiàng)目右移一個(gè)層次（降按鈕，則被選項(xiàng)目右移一個(gè)層次（降低級(jí)別）；低級(jí)別）； 如果執(zhí)行如果執(zhí)行Text|Outdent（伸出），則被選項(xiàng)目左移一伸出），則被選項(xiàng)目左移一個(gè)層次（提高級(jí)別）。個(gè)層次（提高級(jí)別）。圖圖4.36是各種嵌套的瀏覽效果。是各種嵌套的瀏覽效果。72圖圖4.36734.4.3 設(shè)置列表屬性設(shè)置列表屬性通過設(shè)置項(xiàng)目列表

56、的屬性，可以修改項(xiàng)目列表的通過設(shè)置項(xiàng)目列表的屬性，可以修改項(xiàng)目列表的類型、無序項(xiàng)目列表中項(xiàng)目符號(hào)的類型，或有類型、無序項(xiàng)目列表中項(xiàng)目符號(hào)的類型，或有序項(xiàng)目列表中項(xiàng)目編號(hào)的類型等。序項(xiàng)目列表中項(xiàng)目編號(hào)的類型等。 將插入點(diǎn)放到要設(shè)置屬性的項(xiàng)目列表中任意位將插入點(diǎn)放到要設(shè)置屬性的項(xiàng)目列表中任意位置。置。 打開打開Text菜單，選擇菜單，選擇List，再選擇再選擇Properties（屬性）命令，打開如圖屬性）命令，打開如圖4.37 所示的所示的List Properties（列表屬性）對(duì)話框。列表屬性）對(duì)話框。也可以通過單擊屬性面板上的也可以通過單擊屬性面板上的List Item（列表項(xiàng)）列表項(xiàng)）按

57、鈕來打開列表屬性對(duì)話框，要注意的是，必按鈕來打開列表屬性對(duì)話框，要注意的是，必須展開屬性面板才可以看到該按鈕（見圖須展開屬性面板才可以看到該按鈕（見圖4.38）。）。74圖圖4.3775圖圖4.3876 在在List Type（列表類型）下拉列表框中，可以選擇列列表類型）下拉列表框中，可以選擇列表類型。該選擇將影響插入點(diǎn)所在位置整個(gè)項(xiàng)目列表表類型。該選擇將影響插入點(diǎn)所在位置整個(gè)項(xiàng)目列表的類型，通常有的類型，通常有4種選擇：種選擇：Bulleted List（符號(hào)列表）是生成帶有項(xiàng)目符號(hào)式樣的符號(hào)列表）是生成帶有項(xiàng)目符號(hào)式樣的無序列表；無序列表；Numbered List（編號(hào)列表）是生成有序編

58、號(hào)列表）是生成有序列表；列表；Directory List（目錄列表）是生成用于編排目目錄列表）是生成用于編排目錄的目錄列表，是一種無序列表；錄的目錄列表，是一種無序列表；Menu List（菜單列菜單列表）是生成用于編排菜單的菜單列表，也是一種無序表）是生成用于編排菜單的菜單列表，也是一種無序列表。列表。 在在Style（樣式）下拉列表中，選擇相應(yīng)的項(xiàng)目列表樣樣式）下拉列表中，選擇相應(yīng)的項(xiàng)目列表樣式。該選擇將影響插入點(diǎn)所在位置整個(gè)項(xiàng)目列表的樣式。該選擇將影響插入點(diǎn)所在位置整個(gè)項(xiàng)目列表的樣式。式。如果列表類型選中的是如果列表類型選中的是Bulleted List （符號(hào)列表），則符號(hào)列表），則

59、可以選擇項(xiàng)目列表的符號(hào)類型?？梢赃x擇項(xiàng)目列表的符號(hào)類型。Bulleted（球形）：球形）： 以實(shí)心圓作為無序列表的項(xiàng)目符號(hào)。以實(shí)心圓作為無序列表的項(xiàng)目符號(hào)。77Circle（環(huán)形）：環(huán)形）： 以空心圓作為無序列表的符號(hào)。以空心圓作為無序列表的符號(hào)。Square（矩形）：矩形）： 以實(shí)心矩形作為無序列表的符號(hào)。以實(shí)心矩形作為無序列表的符號(hào)。如果列表類型選中如果列表類型選中Numbered List（編號(hào)列表），則可編號(hào)列表），則可以選擇編號(hào)的數(shù)字格式。以選擇編號(hào)的數(shù)字格式。Number（數(shù)字）：數(shù)字）： 以阿拉伯?dāng)?shù)字作為有序列表的編號(hào)以阿拉伯?dāng)?shù)字作為有序列表的編號(hào)字符，如字符，如1，2，3，。R

60、oman Small（小寫羅馬數(shù)字）：小寫羅馬數(shù)字）： 以小寫羅馬數(shù)字作為以小寫羅馬數(shù)字作為有序列表的編號(hào)，如有序列表的編號(hào)，如i，ii，iii。Roman Large（大寫羅馬數(shù)字）：大寫羅馬數(shù)字）： 以大寫羅馬數(shù)字作為以大寫羅馬數(shù)字作為有序列表的編號(hào)，如有序列表的編號(hào)，如，。Alphabet Small（小寫字母）：小寫字母）： 以小寫英文字母作為有以小寫英文字母作為有序列表的編號(hào)，如序列表的編號(hào)，如a，b，c。Alphabet Large（大寫字母）：大寫字母）： 以大寫英文字母作為有以大寫英文字母作為有序列表的編號(hào)字，如序列表的編號(hào)字，如A，b，c。78如果列表類型選中如果列表類型選中Dire