網(wǎng)頁 CSS 初級知識

在這一節(jié)知識點(diǎn)中，我將帶領(lǐng)大家學(xué)習(xí)網(wǎng)頁設(shè)計中涉及到的 CSS 知識。對前端開發(fā)有一點(diǎn)了解的同學(xué)可能會知道，前端工程師的三樣法寶就是 HTML，CSS，Javascript。

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

1. 設(shè)置圖像跟蹤功能

1.1 什么是圖像跟蹤？

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

1.2 實(shí)際網(wǎng)頁設(shè)計中的工作流程

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

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

1.3 圖像跟蹤實(shí)操

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

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

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

2. 設(shè)置界面外觀-初探CSS

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

2.1設(shè)置界面外觀

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

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

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

第二步：為了學(xué)會在 Dreamweaver CC 2018 中設(shè)置外觀的方法，我們需要打開屬性面板。認(rèn)真學(xué)習(xí)本教程的同學(xué)們不難發(fā)現(xiàn)，如何打開屬性面板，我們在前兩節(jié)中就有過相關(guān)的講述，在此就不贅述。

打開屬性面板后，我們鼠標(biāo)左鍵單擊上方實(shí)時視圖的時候可以發(fā)現(xiàn)，屬性面板中顯示的內(nèi)容在動態(tài)的跟隨我們的點(diǎn)擊變化。如下圖所示。這個時候，我們只需要在屬性面板中修改你想要改變的外觀屬性之，就可以達(dá)到修改CSS，進(jìn)而外觀的作用了。

3. 設(shè)置網(wǎng)頁頁面的字體

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

4. 小結(jié)

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

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