再過兩天，就是清明/兒童節連假的到來，大家除了可以安排慎終追遠、放鬆玩樂的活動之外，或者是……也可以選擇利用假期，跟著飛肯教學文，一起來練功囉！ ^_^
這次要跟大家分享，如何用 CSS 語法來做一個單欄式網頁的版型設計！雖然只是一個很基本的架構，但是在教學文當中，大家可以跟著小編一起學習幾個常用的語法，例如「 text-indent 」 的兩種使用方式、選單之水平排列、清除浮動的寫法….等等。如果之前已經有學過的同學，也可以當作是複習，多練習幾次之後就可以熟能生巧！以下就開始我們這次的範例練習吧！
★ 飛肯的CSS教學課程 教學課程：CSS 語法 div 版面設計專修班 有興趣的同學可以報名唷！
【步驟一】HTML 網頁架構
首先，當然是從 HTML 網頁架構開始，請大家直接參考下方的圖示，建立一個新的網頁檔案。
body 裡面的主結構，這邊已幫大家用紅色框線標示出來，一共可分成四個區塊。
接著，我們將四個區塊由上而下，依序設定 id 選取器並命名為 : 「HEADER」、「NAV」、「CONTENT」、「FOOTER」。
完成之後，瀏覽網頁應該會如下方圖示 :
【步驟二】連結外部 CSS 樣式表
再來，就要請各位新建一個 CSS 樣式表 (在本文範例中，所使用的檔案名稱為: layout.css)，並將此檔案附加在前一個步驟中完成的 HTML 裡。
開啟 layout.css 檔案後，請大家先參照下方圖示，非常建議可以多加利用註解的方式 (也就是圖示中，呈現灰色的文字)，將不同的區塊先標示出來，這樣子不僅看起來井然有序，日後也會方便自己修改或更新喔！
【步驟三】 CSS 排版 – body
首先，在準備開始 CSS 編寫時，請記得在第一行先匯入 reset.css 這個檔案來做重置歸零的動作，如果有不清楚的同學，歡迎參考飛肯之前的這一篇教學專文，裏頭有非常詳盡的說明： 《Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化》
另外，也不要忘記將 reset.css 檔案下載之後，跟我們正在編寫的 layout.css 放在一起，這樣才能發揮它的功效喔！
再來，我們只需要在 body 部分，做簡單的網頁背景顏色以及指定文字字體即可，其他細節的地方，我們可以等到之後的步驟再來做設定。
【步驟四】 CSS 排版 – 頁首區 ( # HEADER )
在頁首區，小編已經事先準備好一張寬為 960 px ，高為 300 px 的 banner 圖片，要用來取代 h1 標題中的文字。這邊就請大家參考圖示，先在 #HEADER 這一層，設好寬度，以及將此區塊置中。
至於 #HEADER 中的 h1 ，由於 h1 標題原本在 W3C 制定中就預設為 display:block ，所以就算省略不寫其實不會有影響。(倘若是在自己不確定的狀況下，養成每次都寫的習慣也比較不容易出錯就是了~給大家做個參考~)
h1 除了要設定與圖片相同的寬度與高度，並且用背景圖的方式置入圖片之外，重點則是最後一行的 text-indent 用法一，這個寫法會幫我們將 h1 原本的文字，整個移出網頁可見區域以外，是個非常實用的隱藏文字技巧，請大家務必要牢記喔~
將頁首部分的 CSS 語法完成之後，網頁呈現如下圖 :
【步驟五】 CSS 排版 – 主選單區 ( # NAV )
接著，在主選單區的 CSS 語法，主要有項目清單以及超連結兩大部分需要編寫。
項目清單有個重點，就是如何讓選單按鈕從垂直變為水平排列；提醒大家，要記得將浮動設定寫在 li 裡，而不是 ul 喔。
另外一個重點是， overflow:hidden 的使用， overflow:hidden 如果用白話一點的解釋，就是將多出來的地方藏起來。
寫在 NAV 裏頭，就可以預防在沒有設定高度之狀態下，可能會因為水平排列而產生版面被破壞的情形喔~
完成之後的主選單，如下方圖示:
至於，超連結這邊的語法排版，則要請大家記得一定千萬不能忘記或省略 display:block 這一行！
再來，只要留意一下如何讓文字水平置中，以及高度置中的寫法，就ok囉。
在滑鼠移至超連結時的設定，我們這次只有做個簡單的顏色轉換而已，如果大家還想要進一步學習如何變換圖片的話，歡迎參考飛肯之前的這一篇教學文： 《CSS Sprite 教學 – 條例式按鈕設計》
以上，主選單的部分就完成了~
【步驟六】 CSS 排版 – 內容區 ( # CONTENT )
內容區的一開始，大家又可以學到一個解除浮動效果的語法，也就是 clear:both ，這個用法很重要，也要請大家記起來喔！
小小提醒一下，在 CONTENT 裡面為了美化版面，可以利用 padding-top 與 padding-bottom ，與上下其他區塊空出適當的間隔來~
再來則是 p 段落的設定，大家可以看到這邊出現了 text-indent 的第二種用法，也就是文字縮排的效果。
然後，在兩個不同的段落之間，我們也是可以利用 padding 來做間隔的編排喔~
下方為完成之後的圖示，請大家參照 :
【步驟七】 CSS 排版 – 頁尾區 ( # FOOTER )
頁尾區的部分比較簡單，都是些基本的語法，至於整個頁尾區的高度，大家可以直接設在 h2 行高上面(圖示中，紅色框框處)，然後利用 text-align:center 將文字置中，這樣就可以輕鬆完成這一區的版型設定了！
完成以上所有步驟後，我們來檢視一下整個網頁的成果吧~
(當滑鼠移至選單按鈕上方，會變換底色： ↓↓↓ )
如果大家做出的網頁跟上面圖示一樣，就大功告成了~(灑花)
其實 CSS 語法沒有大家想像中的困難，只要跟著飛肯的教學文，多練習幾次，初學者也可以輕鬆學習網頁版型設計！
★ 飛肯的CSS教學課程 教學課程：CSS 語法 div 版面設計專修班 有興趣的同學可以報名唷！
最後，小編預祝大家都能度過一個充實又愉快的假期，下一次的教學文時間~再~見~囉！~
(下台一鞠躬)
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！