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

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

3、則在瀏覽器的地址欄中直接輸入D:examplesexample4-01.htm，也可瀏覽頁面效果也可瀏覽頁面效果(見圖見圖4.1（b）)。圖圖4.1一個新網頁這是一個最樸素的網頁，沒有任何修飾，一個新網頁這是一個最樸素的網頁，沒有任何修飾，但卻有網頁文件的基本結構。切換到代碼視圖或代碼但卻有網頁文件的基本結構。切換到代碼視圖或代碼和設計視圖，查看一下這個網頁的和設計視圖，查看一下這個網頁的HTML源文件（見圖源文件（見圖4.2），），Dreamweaver自動為網頁添加了相應的標記。自動為網頁添加了相應的標記。可見，在用可見，在用Dreamweaver進行網頁設計時，可以把精進行網頁設計時，可

4、以把精力集中在頁面的內容和版面設計上，而不必為各種力集中在頁面的內容和版面設計上，而不必為各種HTML標記的用法費心。標記的用法費心。4圖圖4.15圖圖4.264.1.1設置頁面標題設置頁面標題標題是一個網頁的題目，也是頁面內容的簡要概括。一標題是一個網頁的題目，也是頁面內容的簡要概括。一個頁面不必有標題，但為每一個頁面添加一個標題是個頁面不必有標題，但為每一個頁面添加一個標題是一個好習慣，這樣做不僅可為瀏覽者了解網頁的主題一個好習慣，這樣做不僅可為瀏覽者了解網頁的主題提供方便，也可為設計者規劃和管理網站帶來好處。提供方便，也可為設計者規劃和管理網站帶來好處。Dreamweaver為每個頁面設

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

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

7、性；屬性； 在在Target下拉列表框中，可以選擇鏈接文檔在哪個框架下拉列表框中，可以選擇鏈接文檔在哪個框架集中被打開，這實際上設置的是集中被打開，這實際上設置的是標記的標記的Target 屬性值。可選項有以下幾種。屬性值。可選項有以下幾種。10圖圖4.411_blank: 表明在新窗口中展開鏈接指向的頁面。表明在新窗口中展開鏈接指向的頁面。_self: 在當前文檔的框架集中展開頁面。在當前文檔的框架集中展開頁面。_parent: 在當前文檔的父級框架集中展開頁面。在當前文檔的父級框架集中展開頁面。_top: 在鏈接所在的完整窗口中展開頁面。在鏈接所在的完整窗口中展開頁面。不選任何參數表示在當

8、前框架打開頁面。不選任何參數表示在當前框架打開頁面。例例4.2操作生成語句：操作生成語句：。要編輯基礎要編輯基礎URL地址，執行地址，執行View|Head Content（頭部頭部內容）命令或按內容）命令或按Ctrl+Shift+W組合鍵，打開頭部信息組合鍵，打開頭部信息按鈕欄（見圖按鈕欄（見圖4.5）。從文檔的頭部信息按鈕中，選中）。從文檔的頭部信息按鈕中，選中基地址按鈕，會打開基地址屬性面板（見圖基地址按鈕，會打開基地址屬性面板（見圖4.6），這），這時就可在屬性面板上修改相應的屬性值了。要刪除基時就可在屬性面板上修改相應的屬性值了。要刪除基地址標記，在頭部信息按鈕中單擊基地址按鈕，然后

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

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

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

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

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

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

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

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

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

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

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

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

21、用瀏覽器運行環境的解碼方式。Tracing Image（草稿圖）：草稿圖）： 指定一幅圖像作為網頁創指定一幅圖像作為網頁創作時的臨時用圖，顯示在文檔窗口的背景上，便于在作時的臨時用圖，顯示在文檔窗口的背景上，便于在網頁創作時進行定位和安放對象。但它并不在實際生網頁創作時進行定位和安放對象。但它并不在實際生成網頁中顯示。成網頁中顯示。Image（圖像）：圖像）： 拖動該滑塊，可以改變草稿圖的透明拖動該滑塊，可以改變草稿圖的透明程度，使用適當的透明程度可以避免干擾網頁的編輯，程度，使用適當的透明程度可以避免干擾網頁的編輯，Transparent表示全透明，表示全透明，Opaque表示完全不透明。表

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

23、隔開。圖4.10是兩是兩個段落的代碼和設計效果。個段落的代碼和設計效果。26圖圖4.1027一般來說，段落中文本的換行是自動進行的，在大多數一般來說，段落中文本的換行是自動進行的，在大多數情況下，由瀏覽器的窗口大小來決定。在瀏覽網頁時，情況下，由瀏覽器的窗口大小來決定。在瀏覽網頁時，不同的窗口大小，可能導致段落中換行位置發生變化。不同的窗口大小，可能導致段落中換行位置發生變化。同樣在文檔窗口中，窗口的大小也會影響段落的顯示。同樣在文檔窗口中，窗口的大小也會影響段落的顯示。圖圖4.11和圖和圖4.12顯示了當改變瀏覽器窗口大小時，其中顯示了當改變瀏覽器窗口大小時，其中段落文本換行的情形。段落文本

24、換行的情形。圖圖4.12瀏覽器窗口大的瀏覽效果有時候希望將一組文字瀏覽器窗口大的瀏覽效果有時候希望將一組文字設置為一個段落，但是又希望在其中某個位置強制換設置為一個段落，但是又希望在其中某個位置強制換行，這時可以在代碼窗口中使用行，這時可以在代碼窗口中使用標記。它用于在標記。它用于在段落中指定位置將文字斷行，但是上下兩塊文字仍然段落中指定位置將文字斷行，但是上下兩塊文字仍然屬于同一個段落。換句話說，對于換行位置上面的文屬于同一個段落。換句話說，對于換行位置上面的文字設置的段落格式同樣會影響到換行位置下面的段落字設置的段落格式同樣會影響到換行位置下面的段落格式。格式。28圖圖4.1129圖圖4.

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

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

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

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

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

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

31、一個空格。【例【例4.4】使用預格式化文本】使用預格式化文本 將插入點放置到要設置預格式化的段落中，如果將插入點放置到要設置預格式化的段落中，如果要將多個段落設置為預格式化，可以選中這多個段要將多個段落設置為預格式化，可以選中這多個段落；落；37 打開打開Text菜單，選擇菜單，選擇Format，再選擇再選擇Preformatted Text（預格式化文本）命令，也可以在屬性面板上打預格式化文本）命令，也可以在屬性面板上打開開Format下拉列表，選擇下拉列表，選擇Preformatted； 如果必要，可以繼續對文檔設計窗口中的文本進行像如果必要，可以繼續對文檔設計窗口中的文本進行像操作純文本

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

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

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

35、一段位置。Indent和和Outdent是一是一對互為相反的命令。對互為相反的命令。利用屬性面板也可以完成文檔的縮進操作：單擊屬性利用屬性面板也可以完成文檔的縮進操作：單擊屬性面板上的縮進和伸出按鈕（圖面板上的縮進和伸出按鈕（圖4.19），即可實現當），即可實現當前段落的縮進和伸出。前段落的縮進和伸出。使用快捷鍵實現縮進更為簡單，按使用快捷鍵實現縮進更為簡單，按Ctrl+鍵執行一次鍵執行一次縮進操作，按縮進操作，按Ctrl+鍵進行一次伸出操作。圖鍵進行一次伸出操作。圖4.20是不同縮進量的效果。是不同縮進量的效果。43圖圖4.1944圖圖4.2045注意：縮進在注意：縮進在HTML中用中用和和

36、標記實現，但并沒有伸出標記，它標記實現，但并沒有伸出標記，它只是只是Dreamweaver為方便操作而設置的；為方便操作而設置的；縮進和伸出操作可以重復。縮進標記可以嵌套，以實縮進和伸出操作可以重復。縮進標記可以嵌套，以實現不同的縮進量。縮進最窄不低于一個字符寬度，現不同的縮進量。縮進最窄不低于一個字符寬度，最寬不超過瀏覽窗口寬度。最寬不超過瀏覽窗口寬度。4.2.6 強制換行強制換行使用定義新段落的方法實現換行效果會產生一個空行使用定義新段落的方法實現換行效果會產生一個空行大小的間距。有時候希望文字在段落中的指定位置大小的間距。有時候希望文字在段落中的指定位置換行，圖換行，圖4.21字符對象面

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

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

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

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

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

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

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

44、號設置字號字號指的是字符的大小。網頁中的字號沒有絕對的大小字號指的是字符的大小。網頁中的字號沒有絕對的大小標準，只是相對大小。系統默認字號為標準，只是相對大小。系統默認字號為3號，號，1號和號和2號號字比默認字體要小一些，字比默認字體要小一些，4號和號和5號字比默認字體要大號字比默認字體要大一些。一些。要在要在Dreamweaver中設置字符的字號，操作如下：中設置字符的字號，操作如下：57 選中要設置字號的文字；選中要設置字號的文字； 打開打開Text菜單，選擇菜單，選擇Size（大小），然后根據需要的大小），然后根據需要的大小，選擇從大小，選擇從1到到7（見圖（見圖4.28）。如果希望使用

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

46、的字號大，選擇需要的字號大小或直接在小或直接在Size文本框中輸入數字（文本框中輸入數字（17）按回車。）按回車。 圖圖4.30是不同字號大小的瀏覽效果。是不同字號大小的瀏覽效果。58圖圖4.2859圖圖4.29604.3.3 設置顏色設置顏色豐富的字符顏色能夠極大地增強文檔的表現力和感染力。豐富的字符顏色能夠極大地增強文檔的表現力和感染力。 選中要設置顏色的文字；選中要設置顏色的文字； 在屬性面板上，單擊在屬性面板上，單擊Text Color（文本顏色）按鈕，文本顏色）按鈕，打開如圖打開如圖4.31所示的顏色板。圖所示的顏色板。圖4.28用菜單設置字號用菜單設置字號這時鼠標光標變為吸管形狀，

47、可以在這時鼠標光標變為吸管形狀，可以在Dreamweaver窗口窗口中移動，在中移動，在Target后的顏色框中顯示光標所到之處的后的顏色框中顯示光標所到之處的顏色，單擊鼠標選中該顏色。也可以直接在顏色，單擊鼠標選中該顏色。也可以直接在Text Color按鈕右方的文本框中，直接輸入顏色的十六進制數值；按鈕右方的文本框中，直接輸入顏色的十六進制數值；技巧：技巧： 當鼠標指向文檔窗口中的文本或圖像時，可以設當鼠標指向文檔窗口中的文本或圖像時，可以設置與該文本或圖像相同的顏色。置與該文本或圖像相同的顏色。 如果希望取消顏色設置，可以單擊顏色板右上角的如果希望取消顏色設置，可以單擊顏色板右上角的De

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

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

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

51、B（加粗）圖標和加粗）圖標和I（傾斜）圖標即傾斜）圖標即可。圖可。圖4.33是幾種常用字型的效果。是幾種常用字型的效果。65圖圖4.3266圖圖4.33674.4 項目列表4.4.1創建列表創建列表在在Dreamweaver中，可以在輸入文字時創建項目列表，中，可以在輸入文字時創建項目列表，也可以將現有段落轉換為項目列表。也可以將現有段落轉換為項目列表。【例【例4.8】創建新的項目列表】創建新的項目列表 先輸入項目列表的第一行，將插入點放置到該行中；先輸入項目列表的第一行，將插入點放置到該行中； 打開打開Text菜單，選擇菜單，選擇List（列表），打開列表菜單列表），打開列表菜單（見圖（見圖

52、4.34）；）； 選擇要創建的列表類別：選擇要創建的列表類別：Unordered List（無序列無序列表）、表）、Ordered List（有序列表）、有序列表）、Definition List（定義列表），被選擇的列表類別前標有選中符號定義列表），被選擇的列表類別前標有選中符號（對號）；（對號）；68圖圖4.3469 在第一行后面回車，繼續輸入項目中的其他內容，這在第一行后面回車，繼續輸入項目中的其他內容，這時項目前會出現相應的項目符號或編號；時項目前會出現相應的項目符號或編號； 如果希望結束項目列表，可以在最后一行之后連續按如果希望結束項目列表，可以在最后一行之后連續按下兩次回車。下兩次

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

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

55、級項目列表的形式。【例【例4.9】制作嵌套列表】制作嵌套列表 選中需要嵌套的列表項目（一項或多項）；選中需要嵌套的列表項目（一項或多項）； 打開打開Text菜單，選擇菜單，選擇Indent（縮進）縮進） ，如單擊屬性面，如單擊屬性面板上的板上的“縮進縮進”按鈕，則被選項目右移一個層次（降按鈕，則被選項目右移一個層次（降低級別）；低級別）； 如果執行如果執行Text|Outdent（伸出），則被選項目左移一伸出），則被選項目左移一個層次（提高級別）。個層次（提高級別）。圖圖4.36是各種嵌套的瀏覽效果。是各種嵌套的瀏覽效果。72圖圖4.36734.4.3 設置列表屬性設置列表屬性通過設置項目列表

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

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

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

59、可以選擇項目列表的符號類型。可以選擇項目列表的符號類型。Bulleted（球形）：球形）： 以實心圓作為無序列表的項目符號。以實心圓作為無序列表的項目符號。77Circle（環形）：環形）： 以空心圓作為無序列表的符號。以空心圓作為無序列表的符號。Square（矩形）：矩形）： 以實心矩形作為無序列表的符號。以實心矩形作為無序列表的符號。如果列表類型選中如果列表類型選中Numbered List（編號列表），則可編號列表），則可以選擇編號的數字格式。以選擇編號的數字格式。Number（數字）：數字）： 以阿拉伯數字作為有序列表的編號以阿拉伯數字作為有序列表的編號字符，如字符，如1，2，3，。R

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