- Dreamweaver CC網頁設計從入門到精通（微課精編版）
- 前端科技
- 3693字
- 2019-12-09 14:39:25
2.2 初始化頁面樣式
新建網頁之后，應設置頁面的基本顯示屬性，如頁面背景效果、頁面字體大小、顏色和頁面超鏈接屬性等。在Dreamweaver CC中設置頁面顯示屬性可以通過【頁面屬性】對話框來實現。
【操作步驟】
第1步，啟動Dreamweaver CC，新建一個空白頁文檔，保存為test.html。
第2步，選擇【修改】｜【頁面屬性】命令，打開【頁面屬性】對話框，如圖2.5所示。
圖2.5 【頁面屬性】對話框
第3步，在【頁面屬性】對話框的【分類】列表框中選擇分類，然后在右側設置具體屬性。頁面基本屬性共有6類：外觀（CSS）、外觀（HTML）、鏈接（CSS）、標題（CSS）、標題／編碼和跟蹤圖像。
提示：在分類名稱后面小括號中，CSS表示該類選項中所有設置由CSS樣式定義，HTML表示使用HTML標記屬性進行定義。
2.2.1 設置外觀
外觀主要包括頁面的基本顯示樣式，如頁面字體大小、字體類型、字體顏色、網頁背景樣式、頁邊距等?！卷撁鎸傩浴繉υ捒蛱峁┝藘煞N設置方式。
如果在【頁面屬性】對話框左側【分類】列表框中選擇【外觀（CSS）】選項，則可以使用標準的CSS樣式來進行設置。
如果在【頁面屬性】對話框左側【分類】列表框中選擇【外觀（HTML）】選項，則可以使用傳統方式（非標準）的HTML標記屬性來進行設置。
【示例】
如果使用標準方式設置頁面背景色為白色，則Dreamweaver CC會生成如下樣式來控制頁面字體的大小：
<style type="text/css">
body { background-color: rgba(255,255,255,1); }
</style>
反之，如果使用非標準方式設置頁面背景色為白色，則Dreamweaver CC會在<body>標記中插入如下屬性：
<body bgcolor="#FFFFFF">
下面詳細講解頁面外觀屬性設置。
1．頁面字體
在【頁面字體】下拉列表框中選擇一種字體。如果字體列表中沒有顯示用戶要使用的字體，可以選擇列表最下面的【管理字體】選項，如圖2.6所示。
圖2.6 【頁面屬性】對話框中的【外觀】選項
在打開的【管理字體】對話框中，切換到【自定義字體堆棧】選項卡，在【可用字體】列表框中選擇一種字體，單擊
按鈕將該字體加入左側【選擇的字體】列表框中，如圖2.7所示，這樣就可以在Dreamweaver中使用。
圖2.7 【管理字體】對話框
在【頁面屬性】對話框的【頁面字體】右側的下拉列表框中，分別可以設置斜體（italic）和粗體（bold）樣式。
提示：建議使用系統默認字體（如宋體），不要使用非常用的藝術字體。如果要使用某些藝術字體，可以先在Photoshop中把藝術字體生成圖片，然后以背景樣式的形式顯示，或者插入網頁中。
2．大小
在【大小】下拉列表框中可以設置頁面字體大小，也可以輸入數字定義字體大小。輸入數字后，右側下拉列表框變為可編輯狀態，在這里可以選擇數字單位，如像素（px）、點數（pt）、英寸（in）、厘米（cm）和毫米（mm）等。在【大小】下拉列表框中還有一些特殊的字號，如圖2.8所示。
圖2.8 選擇特殊字號
圖2.9列出了這些特定字號所設置的字體大小，可直觀進行比較。
圖2.9 特殊字號效果比較
3．文本顏色
單擊【文本顏色】旁邊的矩形框
，打開顏色面板，其中每一個小色塊代表一種顏色，鼠標經過任何顏色，色板的下面區域都會顯示出該顏色相應的十六進制代碼（#號加上6個十六進制的數），選擇一個色塊單擊即可完成顏色的選取，如圖2.10所示。
圖2.10 顏色面板
提示：在顏色面板底部單擊
按鈕，鼠標指針會變成吸管形狀，此時可以在編輯窗口快速選擇一種顏色，如圖2.11所示。此外，單擊顏色面板底部的RGBa、Hex、HSLa按鈕，可以切換選擇顏色的表示方式，如rgba(229,222,168,1.00)、#E5DEA8、hsla(53,54%,78%,1.00)。
圖2.11 快速取色
返回【頁面屬性】對話框，在【文本顏色】右側的文本框中也可以直接輸入顏色值。HTML預設了一些顏色名稱，也可以在【文本顏色】右側的文本框中直接輸入這個顏色名稱。例如，在文本框中輸入紅色的名稱“red”，可設置紅顏色；輸入藍色的名稱“blue”，可設置藍顏色，如圖2.12所示。
圖2.12 輸入HTML預設顏色名稱
提示：常用的預設顏色名稱有black（黑色）、olive（橄欖色）、teal（鳧藍色）、red（紅色）、blue（藍色）、maroon（栗色）、navy（藏青色）、gray（灰色）、lime（檸檬色）、fuchsia（紫紅色）、white（白色）、green（綠色）、purple（紫色）、yellow（黃色）和aqua（淺綠色）。
4．背景顏色
背景顏色的設置方法與設置文本顏色的方法基本相同。背景色默認為白色，也可以在該文本框中輸入“#FFFFFF”顯式定義網頁背景顏色為白色，如果在這里不設置顏色，瀏覽器會把白色默認為網頁背景顏色。
5．背景圖像
在【背景圖像】文本框中可以直接輸入圖像的路徑，或者單擊后面的【瀏覽】按鈕，在打開的對話框中選擇想用作背景的圖像文件，如果圖像文件不在網站本地目錄下，會彈出如圖2.13所示的提示對話框，單擊【確定】按鈕，把圖像文件復制到網站根目錄中。
圖2.13 提示對話框
在【背景圖像】選項下面有一個【重復】下拉列表框，如圖2.14所示，該選項用來設置背景圖像在頁面上的顯示方式，主要包括no-repeat（不重復）、repeat（重復）、repeat-x（橫向重復）和repeat-y（縱向重復），效果如圖2.15所示。選擇的背景圖像，要避免用中文命名圖像，否則會無法顯示。
圖2.14 【重復】下拉列表框
圖2.15 不同背景圖像顯示方式
6．設置頁邊距
在【左邊距】【右邊距】【上邊距】【下邊距】文本框中輸入數字，分別用來設置網頁四周空白區域的寬度或高度，即網頁距離瀏覽器的邊框距離。在文本框中輸入數字，這時右側的下拉列表框為可選狀態，然后在其中選擇輸入數字的單位，包括像素（px）、點數（pt）、英寸（in）、厘米（cm）、毫米（mm）、12pt字（pc）、字體高（em）、字母x的高（ex）和%（百分比），如圖2.16所示。如果不輸入單位，系統默認單位為像素（px）。
圖2.16 設置頁邊距
2.2.2 設置鏈接
在【頁面屬性】對話框左側的【分類】列表框中選擇【鏈接（CSS）】選項，在右側顯示相關鏈接設置屬性，如圖2.17所示。這些內容主要是針對鏈接文字字體、大小、顏色和樣式屬性進行設置，而且只能對鏈接文字產生作用。
圖2.17 【頁面屬性】對話框中的【鏈接（CSS）】選項
【鏈接字體】用來設置頁面中超鏈接字體類型。
【大小】用于設置鏈接字體的大小。
【鏈接顏色】【變換圖像鏈接】【已訪問鏈接】【活動鏈接】這4個顏色項可以為文字設置4種不同鏈接狀態時的顏色，它們分別對應鏈接字體在正常時的顏色、鼠標指針經過時的顏色、鼠標單擊過的顏色和鼠標單擊時的顏色。Dreamweaver CC默認鏈接文字顏色為藍色，已訪問過的鏈接文字顏色為紫色。
【下畫線
樣式】下拉列表框主要設置鏈接字體的顯示樣式，共有4種下畫線樣式，即【始終有下畫線】【始終無下畫線】【僅在變換圖像時顯示下畫線】和【變換圖像時隱藏下畫線】。根據字面意思就可以知道每個選項的樣式效果。
2.2.3 設置標題
在【頁面屬性】對話框左側的【分類】列表框中選擇【標題（CSS）】選項，在右側則顯示相關標題設置屬性，如圖2.18所示。
圖2.18 【頁面屬性】對話框中的【標題（CSS）】選項
這里的標題主要針對頁面內各級不同標題樣式，包括字體、粗體、斜體和大小?？梢远x標題字體及6種預定義的標題字體樣式。
2.2.4 設置標題／編碼
在【頁面屬性】對話框左側的【分類】列表框中選擇【標題／編碼】選項，在右側則顯示相關標題／編碼設置屬性，如圖2.19所示。
圖2.19 【頁面屬性】對話框中的【標題／編碼】選項
這里主要設置網頁標題，該標題將顯示在瀏覽器的標題欄中。同時還可以設置HTML源代碼中字符編碼，網頁默認設置Unicode（UTF-8）即可。
2.2.5 設置跟蹤圖像
在制作網頁時，很多設計師習慣先用繪圖工具繪制網頁草圖（即設計網頁草稿），為方便設計師快速參考設計草圖，Dreamweaver CC可以將設計草圖設置成跟蹤圖像，鋪在編輯的網頁下面作為背景，用于引導網頁的設計。不過跟蹤圖像只是起輔助編輯的作用，最終并不會在瀏覽器中顯示，所以它與頁面背景圖像存在本質區別。
【操作步驟】
操作之前，用戶應準備好設計草圖或者參考效果圖，也可打開本案例素材設計圖bg2-1.jpg，然后執行下面的操作步驟。
第1步，啟動Dreamweaver CC，新建網頁保存為test.html。在【頁面屬性】對話框左側的【分類】列表框中選擇【跟蹤圖像】選項，在右側則顯示相關跟蹤圖像設置的屬性，如圖2.20所示。
圖2.20 【頁面屬性】對話框中的【跟蹤圖像】選項
第2步，在【跟蹤圖像】文本框中可以為當前制作的網頁添加跟蹤圖像。單擊文本框后面的【瀏覽】按鈕，打開【選擇圖像源文件】對話框，選擇參考圖像。如果圖像文件不在網站本地目錄下，會彈出如圖2.13所示的提示對話框，單擊【是】按鈕，把圖像文件復制到網站根目錄中。
第3步，拖動【透明度】滑塊可以設置跟蹤圖像的透明度，以確保它不影響正常的網頁設計操作。透明度越高，跟蹤圖像顯示得越明顯；透明度越低，跟蹤圖像顯示得越不明顯。最后，單擊【應用】按鈕，即可在編輯窗口中看到跟蹤圖像效果，如圖2.21所示。
圖2.21 設置跟蹤圖像效果
第4步，若要顯示或隱藏跟蹤圖像，可以選擇【查看】｜【跟蹤圖像】｜【顯示】命令，如圖2.22所示。
圖2.22 【跟蹤圖像】子菜單
（1）在網頁中選定一個頁面元素，然后選擇【查看】｜【跟蹤圖像】｜【對齊所選范圍】命令，可以使跟蹤圖像的左上角與所選頁面元素的左上角對齊。
（2）若要更改跟蹤圖像的位置，則選擇【查看】｜【跟蹤圖像】｜【調整位置】命令，打開【調整跟蹤圖像位置】對話框，如圖2.23所示。在【X】和【Y】文本框中輸入坐標值，單擊【確定】按鈕就可以調整跟蹤圖像的位置。例如，在【X】文本框中輸入“50”，在【Y】文本框中輸入“50”，則跟蹤圖像的位置被調整到距瀏覽器左邊框50px，距瀏覽器上邊框50px。
圖2.23 【調整跟蹤圖像位置】對話框
（3）若要重新指定跟蹤圖像的位置，選擇【查看】｜【跟蹤圖像】｜【重設位置】命令，跟蹤圖像會自動對齊Dreamweaver CC文檔編輯窗口的左上角。