網頁 CSS 初級知識

在這一節知識點中，我將帶領大家學習網頁設計中涉及到的 CSS 知識。對前端開發有一點了解的同學可能會知道，前端工程師的三樣法寶就是 HTML，CSS，Javascript。

我們在之前的章節中，多多少少有涉及到 HTML 的基礎。那么今天我們就來了解一下 CSS 的一些基礎模塊。本節我會從三個角度來給大家介紹 CSS 初級知識：學會設置圖像跟蹤，學會設置簡單的界面外觀，學會設置網頁中的字體。

1. 設置圖像跟蹤功能

1.1 什么是圖像跟蹤？

這是一個比較抽象的概念。對于 Dreamweaver 新手使用者來說確實是一個需要理解的問題。理解這個問題并不難，只要結合實際工作中遇到的問題就可以了。試想一下，在現代成熟的商業網站中，有成百個甚至數百個網頁元素在一個網頁里面。設計者要如何才能精確，有條不紊地把各個元素擺放好？這總得有一個實時的，最好是可見的參考。而這個參考，就是我們說的圖像跟蹤。圖像跟蹤的概念雖然難以理解，但是只要大家跟著教程中的步驟操作，很快就能理解圖像跟蹤為何如此好用？

1.2 實際網頁設計中的工作流程

涉獵廣泛的同學可能會了解到，很多設計領域都會有一個設計稿。同樣地，我們網頁設計領域也要有自己的設計稿。其實我們設計網頁這件事已經不是完全自主隨意發揮的時代了，已經有了前輩們歷史的積淀，因此很多現代的網頁設計工作往往分為兩類：根據網頁設計網頁，根據設計稿設計網頁。而圖像跟蹤這個設計稿就顯得很重要。

沒有規矩不成方圓，這個稿件可以說為整個網頁的定稿敲定了規矩。在多人協作的基礎上，這個稿件可以就大大加快了合作的效率。一般地，我們需要一個比較熟悉繪圖軟件的人來設計好網頁的外觀或者網頁排版的格局圖或者類似的網頁。然后再由精通網頁設計的人來根據這個排版格局圖在 Dreamweaver 中去一一實現真實的網頁。

1.3 圖像跟蹤實操

首先，不管你是要根據現有的參考網頁制作網頁，還是根據設計圖設計網頁。我們第一步都是要先導入你的網頁。因此我們首先點擊菜單欄中的文件，然后點擊打開，這樣就成功的把你要作為參照的跟蹤圖像導入到了 Dreawmweaver 中來。

第二步，我們導入進來的可能是個網頁，也可能是一個圖片。問題是我們要做的網頁并不是二者中任何一個。所以我們要把它們設置為跟蹤圖像，讓他們以半透明的狀態顯示在背景中。因此我們繼續點擊菜單欄中的文件，然后點擊靠近下拉列表下方的頁面屬性選項。

在打開頁面屬性后，我們可以看到如下圖所示的頁面。沒錯，你看到了圖像跟蹤四個字了。點擊圖像跟蹤，并且在右側的頁面中選擇你要跟蹤的路徑，然后把下面的透明度設置為50%，點擊確定完成操作。然后我們就可以看到一個半透明的網頁在你的網頁下方。這樣你就可以根據這個透明的參照背景來設計排版你的網頁了。

2. 設置界面外觀-初探CSS

網頁跟蹤是一個開始入門網頁布局的很好的例子，但要想真的入門網頁布局，一定離不開它——CSS。CSS的中文翻譯是級連樣式表。它可以控制web元素的外觀屬性，結合Javascript控制網頁的交互效果。那么在 Dreamweaver CC 2018 中該如何設置頁面外觀呢？下面就來了解一下。

2.1設置界面外觀

首先我們點擊一個成熟的網頁。這里以百度為例。大家可以訪問百度等成熟的商業網站，然后單擊Ctrl+S，再彈出的頁面中點擊保存，即可把百度首頁的HTML保存下來（同時會帶一些CSS文件和JS文件）。還是那句話，學習網頁設計沒有捷徑可走，最好的方式之一就是學習前人設計的網頁的思路和技巧，在自己的理解基礎上，進行積淀，才能成為一個合格的網頁設計師。

下面我們來具體的看一看用 Dreamweaver CC 2018 設置界面外觀具體需要哪些步驟：

第一步：我們先把保存到電腦內的百度網頁導入到 Dreamweaver CC 2018 中。點擊文件，再點擊打開。選擇剛剛保存的百度首頁。導入后點擊屏幕上方的拆分視圖，即可在一個頁面中同時觀察到網頁的預覽效果和代碼效果。

第二步：為了學會在 Dreamweaver CC 2018 中設置外觀的方法，我們需要打開屬性面板。認真學習本教程的同學們不難發現，如何打開屬性面板，我們在前兩節中就有過相關的講述，在此就不贅述。

打開屬性面板后，我們鼠標左鍵單擊上方實時視圖的時候可以發現，屬性面板中顯示的內容在動態的跟隨我們的點擊變化。如下圖所示。這個時候，我們只需要在屬性面板中修改你想要改變的外觀屬性之，就可以達到修改CSS，進而外觀的作用了。

3. 設置網頁頁面的字體

在學習完如何利用 DReamweaverf CC 2018 改變頁面的CSS外觀后，接下來我們要給大家介紹一下如何設置頁面的字體。Dreamweaver CC 2018 作為工具強大之處就在于托管和集成功能了得。首先，我們還是到第一個知識點中涉及到的頁面屬性頁面。在彈出的頁面中我們可以看到分類中有外觀選項，點擊它后看到右邊出現了我們想要設置的字體屬性。接下來只要修改相關屬性就可以改變整個網頁的字體啦。

4. 小結

通過本小節知識點我們學習到了入額和設置圖像跟蹤。如何用 Dreamweaver CC 2018 設置界面外觀，進而學習了如何用 Dreamweaver CC 2018 設置頁面字體。其中利用 Dreamweaver CC 2018 設置圖像跟蹤理解難度較大，本節用了大片字幅講述了該知識點，希望大家能夠仔細研讀的基礎上，多多實操，在自己的電腦上多多練習。本節的難度整體中等偏上，希望大家能在教程之外的學習時間里多多練習，觀察，才能掌握本節課的內容。

本節的重點是： 利用 Dreamweaver CC 2018 修改界面的外觀。
本節的難點是： 理解 Dreamweaver CC 2018 圖像跟蹤并使用。