網頁設計中的 CSS 小技巧

在這一節(jié)知識點中，我將帶領大家來學習 CSS 的一些技巧。當然， 有過 CSS 基礎的同學們可能知道，CSS 的技巧有很多，我們今天所講述的技巧算是入門的一些技巧。更深入的內容需要大家以后在實踐中多多積累。那么本節(jié)知識點你會學習到哪些有意思的知識點呢？首先我們會講解一下如何搭建頁面的布局。然后講解設置CSS類選擇器。然后講解控制頁面中的文本。最后我們會講解導航Navigator 標簽的使用。好了，閑話不多說，讓我們開始今天的學習吧！

1. 搭建頁面布局

在這個知識點中將學習如何利用 DreamWeaver 2018 CC 來構建頁面布局。在這里我們先說下為什么要頁面布局？

1.1 為什么要做頁面布局？

布局，主要是指對頁面展示結果的內容進行物理上的分區(qū)。就像我們買菜大多數情況下都喜歡把不同的菜裝到不同的塑料袋里一樣，如果你都裝在一個塑料袋里，回家是不是還要分類取出來才能烹飪使用。設計頁面也是一個道理。如果所有的 HTML 內容都放在一個頁面里，從開發(fā)角度講，很不容易維護。出了問題你不能迅速判斷是哪里的問題。這對于今后同學們可能接觸的工程級項目是很不利的。

1.2 如何把握頁面布局的原則？

布局原則這一塊，多數情況下你有很多現(xiàn)有的商業(yè)網站案例可以參考。但要知道一點，不同類型定位的網站，它是有適合它的布局風格的。而從瀏覽網頁的設備上分類，移動端，PC端又適合不同的布局。這里我們需要多多積累，在這一節(jié)知識點中我們不展開講解，只是給大家一個基本的認知。

1.3 如何用 Dreamweaver CC 2018 來設置頁面布局？

第一步：我們先創(chuàng)建一個空白 HTML 文檔，創(chuàng)建空白文檔的過程，具體參見之前的知識點。

第二步：我們保存這個文檔。

第三步：單擊 CSS 設計器，在源選項中選擇在頁面中定義（參考上一節(jié)知識點中的步驟），在選擇器中繼續(xù)新增一個選擇器，比如 #topdiv ，然后我們定義這個選擇器的樣式，比如長度為 320 px ，寬度為 200 px 。然后插入一個 div，在插入的時候選擇這個選擇器，插入完成。

第四步：再次點擊插入面板中的插入，插入一個 Div ，這次選擇在彈出的對話框中插入一行中選擇在標簽后，后面的標簽選擇剛剛那個 ID = topdiv 的標簽。之后在 ID 一欄填寫一個自定義 ID 值，比如 maindiv 。點擊確定完成：

第五步：兩個div添加好后，我們點擊 CSS 設計器，在選擇器一欄中新建一個選擇器，名稱對應剛剛設置的 maindiv，為這個選擇器設置長和寬等屬性。然后實時地看頁面中的變化。

從這里我們可以看到，頁面被分為上下兩部分，并且每個部分的大小空間都隨著我們設置的不同 div 屬性在實時變化。照此情景，你還可以再在底下設置一個 bottomdiv ，具體需要什么樣的布局風格，實際情況下還要看你的網站類型，信息類型。

以上就是使用 Dreamweaver CC 2018 構建布局的過程。操作步驟數量適中，又由于有不少回顧知識點，大家只要跟著操作一遍，相對比較容易掌握。

2. 設置 CSS 類選擇器

這個知識點中我們講解一下 CSS 的類選擇器，在 CSS 的語法中，一般是將 # 開頭的為 ID 選擇器，由.開頭的一般為類選擇器。類選擇器，顧名思義，對應 HTML 元素的 class 屬性。而我們今天并不是講如何寫 CSS 代碼，而是如何利用 Dreamweaver CC 2018 來設置類選擇器。其實大體步驟和設置 ID 選擇器是一樣的。

第一步：我們要先建一個空白頁面。

第二步：我們打開 CSS 設計器，點擊源，添加一個 style 。

第三步：在選擇器那一行中，點擊 + 添加一個選擇器，輸入的時候由之前的 #testelement 改為 .testelement，設置好屬性后，這樣就完成了一個類選擇器的創(chuàng)建/修改：

3. 控制頁面中的文本

在這個知識點中，將帶領大家學習如何控制頁面中的文本。

思維靈活的同學們想必已經猜到了文本的樣式控制是如何完成的。其實就是把 HTML 元素中涉及字體的屬性（大多數和 font 有關）進行編輯即可。

具體我們來看一下操作步驟：

第一步：在第一個知識點中的頁面布局中的 maindiv 中加入一段文字，然后在 CSS 設計器的選擇器中選擇這個 maindiv 在屬性面板中切換到文本類屬性，改變里面的值，觀察效果即可。

4. 導航 Navigator 入門

導航是我們在使用很多網站中都有的一個模塊，因為任何網站的設計者在設計其網站的時候都會把信息通過頁面進行一個統(tǒng)一的分類，我們暫且成為最頂級分類。

這個最頂級分類往往就對應著我們這里說的導航信息。從小時候的 QQ 空間中那一行相冊，說說，日志，留言板，到現(xiàn)在各種官網的信息公開，領導介紹等都是用導航來做的。

因其功能的通用性和實用性，我們就有了一個標簽來實現(xiàn)這一非常好用的功能。Navigator 標簽。那么具體這個標簽是如何使用的呢？我們通過下面的說明來了解一下。

4.1 如何使用 Dreamweaver CC 2018 設置導航？

還記得我們之前經常點擊的插入面板，沒錯，這里面就有我們要的 Navigator，其他步驟其實和之前創(chuàng)建別的元素一樣。先創(chuàng)建一個選擇器，然后在插入中點擊Navigator，其他選項按照之前的填寫方法即可完成導航的創(chuàng)建/修改。

5. 小結

本節(jié)中，老師帶領大家學習了如何搭建頁面布局。要理解布局的重要性，布局好比頁面的腳手架，網頁設計大樓的基石。合理的布局能夠直接影響用戶的使用反饋，在商業(yè)網站中，甚至決定了你的用戶量，日活，月活用戶。

試想一下，如果移動端的網頁某些信息放在了很難看到的地方，用戶在使用手機瀏覽的時候是否會嫌棄？因此，各位同學要掌握頁面布局設計的重要性。

其次是 CSS 的類選擇器。，CSS 選擇器的類型有幾種常見的，其中類選擇器就是其一。我們之前還學過標簽選擇器和 ID 選擇器。它們的存在都幫助我們更好的控制頁面中的元素。

從前端開發(fā)的角度，這有利于利用 JavaScript 設計更好的用戶交互。因此同學們必須掌握類選擇器的使用。在本節(jié)后續(xù)的內容中，老師還給大家講解了頁面文本的控制和 Navigator 標簽的使用。，HTML 標簽的一個易學之處就在于它大多數是見名知意的。對于標簽的使用我們會使用其主要功能就可以。至于其他的復雜的屬性還要在實際使用的時候去查閱相關的開發(fā)文檔。