1.4　設置頁面屬性

通常情況下，新建一個網(wǎng)頁文件后，其默認的頁面屬性都不符合設計需要。用戶通過設置文檔的頁面屬性來自定義頁面外觀。在Dreamweaver CC 2018中，網(wǎng)頁的屬性通過“頁面屬性”對話框進行設置。

新建或打開一個網(wǎng)頁文件之后，執(zhí)行“文件”|“頁面屬性”命令，彈出“頁面屬性”對話框，如圖1-42所示。在這里可以設置頁面的字體、邊距、背景、鏈接、標題／編碼、跟蹤圖像等屬性。

1.4.1　設置頁面外觀

在“頁面屬性”對話框的分類列表中選擇“外觀”（CSS），如圖1-43所示。

1. 設置文本樣式

（1）字體和樣式：在“頁面字體”右側的第一個下拉列表框中，可以設置頁面使用的字體組合；在第二個下拉列表框中設置字體樣式，如斜體、加粗；在第三個下拉列表框中設置字體粗細。

（2）字號：在“大小”下拉列表框中設置字體大小和單位。

（3）文本顏色：單擊“文本顏色”右側的拾色器按鈕彈出調(diào)色板，如圖1-44所示。單擊選取飽和度和亮度，然后拖動色相滑塊調(diào)整色調(diào)，拖動光亮度滑塊調(diào)整亮度，拖動Alpha滑塊調(diào)整顏色的不透明度。在調(diào)色板之外單擊，即可設置文本顏色。也可直接在文本框中輸入顏色的RGB值。

2. 設置背景

（1）背景顏色：單擊“背景顏色”右側的拾色器按鈕，在彈出的調(diào)色板中選擇需要的顏色。

（2）背景圖像：單擊“背景圖像”右側的“瀏覽”按鈕，在彈出的對話框中選擇需要的圖像文件。

默認情況下，如果選擇的圖像尺寸比頁面的尺寸小，則自動平鋪圖像以填滿整個頁面區(qū)域。如果不希望背景圖像自動平鋪，可以使用“重復”選項。

　重復：該選項為默認設置，即自動平鋪，如圖1-45（a）所示。

　水平重復：僅在水平方向上平鋪，如圖1-45（b）所示。

　垂直重復：僅在垂直方向上平鋪，如圖1-45（c）所示。

　不重復：不平鋪，默認顯示在頁面左上角，如圖1-45（d)所示。

3. 設置頁邊距

頁邊距是指頁面文檔主體部分與瀏覽器上、下、左、右邊框的距離。直接在邊距文本框中輸入需要的邊距值和單位即可。

此外，在“外觀”（HTML）分類中可以使用HTML指定頁面屬性。如果在該分類中指定頁面屬性，屬性面板上的字體、大小、顏色和對齊方式控件將只顯示使用HTML標簽的屬性設置，應用于當前選擇的CSS屬性值將不可見，且“大小”彈出菜單也將被禁用。因此不建議使用該分類設置頁面屬性。

1.4.2　設置頁面鏈接樣式

在“頁面屬性”對話框的分類列表中選擇“鏈接”（CSS），如圖1-46所示。

在“鏈接”（CSS）分類中，可以定義鏈接的默認字體樣式、大小，以及鏈接文本不同狀態(tài)下的顏色、下畫線樣式。設置方法與設置頁面外觀的方法相同，不再贅述。

　鏈接字體：設置頁面超鏈接文本在默認狀態(tài)下的字體。

　大小：設置超鏈接文本的字體大小。

　鏈接顏色：設置網(wǎng)頁中的文本超鏈接在默認狀態(tài)下的顏色。

　變換圖像鏈接：設置在網(wǎng)頁中當鼠標移動到超鏈接文字上方時超鏈接的顏色。

　已訪問鏈接：設置網(wǎng)頁訪問過的文本超鏈接的顏色。

　活動鏈接：設置網(wǎng)頁中的運行的文本超鏈接的顏色。

　下畫線樣式：設置在網(wǎng)頁中當鼠標移動到超鏈接文字上方時采用怎樣的下畫線。

1.4.3　設置標題屬性

在“頁面屬性”對話框的分類列表中選擇“標題”（CSS），如圖1-47所示。

在“標題”（CSS）分類中，用戶可以定義標題文字的字體、樣式、顏色，并可分別定義一級標題至六級標題使用的字體大小和顏色。

1.4.4　設置頁面標題和編碼

在“頁面屬性”對話框的分類列表中選擇“標題”|“編碼”，如圖1-48所示。

　標題：在文本框中輸入的頁面標題將顯示在瀏覽器標題欄上。如果不設置，將顯示默認的“無標題文檔”。

　文檔類型：設置頁面代碼使用的HTML版本，默認為HTML5。

　編碼：設置網(wǎng)頁代碼所用語言的文檔編碼類型，建議初學者使用默認設置。

　Unicode標準化表單：指定用于網(wǎng)頁編碼類型的Unicode范式。通常保留默認設置。

1.4.5　上機練習——設置網(wǎng)頁外觀

練習目標

通過前面對頁面屬性設置方法的講解，結合本節(jié)的練習實例，使讀者更直觀地掌握設置網(wǎng)頁外觀的具體操作步驟。

設計思路

首先新建一個空白的網(wǎng)頁文件，然后打開“頁面屬性”對話框，依次設置頁面字體、顏色、背景顏色和背景圖像，最后設置鏈接文本的樣式和標題／編碼。

操作步驟

（1）啟動Dreamweaver CC 2018，執(zhí)行“文件”|“新建”命令，在彈出的“新建文檔”對話框中選擇“新建文檔”分類，文檔類型為“HTML”，無框架，然后單擊“創(chuàng)建”按鈕，新建一個空白的網(wǎng)頁文件。

（2）執(zhí)行“文件”|“頁面屬性”命令，打開“頁面屬性”對話框。

（3）在“外觀”（CSS）分類中，設置頁面字體為默認字體，且字體加粗，大小為14；文本顏色為深藍色（#0B1A4D）；背景顏色為淺綠色（#94CDC7），背景圖像為包含透明背景的GIF圖像，且背景圖像“垂直平鋪”；在“左邊距”和“上邊距”文本框中輸入0，其他保留默認設置。

（4）切換到“鏈接”（CSS）分類，設置鏈接文本的大小為16，鏈接顏色為藍色（#0B10EF），已訪問鏈接顏色為深紅色。

（5）切換到“標題／編碼”分類，輸入頁面的標題為“魚戲蓮葉間”，其他選項保留默認設置。

（6）為觀察頁面字體效果，在頁面中輸入文本。選中“魚戲蓮葉間”，執(zhí)行“窗口”|“屬性”命令，打開屬性面板，在“鏈接”文本框中輸入“#”。有關鏈接的設置將在本書后續(xù)章節(jié)中進行講解。

（7）執(zhí)行“文件”|“保存”命令，在彈出的“另存為”對話框中指定文件保存的位置，并輸入文件名稱（例如lianye.html），單擊“保存”按鈕保存文件。

（8）雙擊保存的網(wǎng)頁文件，在瀏覽器中預覽頁面效果，如圖1-49所示。