CSS 教學 – 單欄式網頁版型設計

再過兩天,就是清明/兒童節連假的到來,大家除了可以安排慎終追遠、放鬆玩樂的活動之外,或者是……也可以選擇利用假期,跟著飛肯教學文,一起來練功囉! ^_^

這次要跟大家分享,如何用 CSS 語法來做一個單欄式網頁的版型設計!雖然只是一個很基本的架構,但是在教學文當中,大家可以跟著小編一起學習幾個常用的語法,例如「 text-indent 」 的兩種使用方式、選單之水平排列、清除浮動的寫法….等等。如果之前已經有學過的同學,也可以當作是複習,多練習幾次之後就可以熟能生巧!以下就開始我們這次的範例練習吧!
CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-final


【步驟一】HTML 網頁架構

首先,當然是從 HTML 網頁架構開始,請大家直接參考下方的圖示,建立一個新的網頁檔案。

body 裡面的主結構,這邊已幫大家用紅色框線標示出來,一共可分成四個區塊。

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-000-html0

接著,我們將四個區塊由上而下,依序設定 id 選取器並命名為 : 「HEADER」、「NAV」、「CONTENT」、「FOOTER」。

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-000-html1

完成之後,瀏覽網頁應該會如下方圖示 :

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-001


【步驟二】連結外部 CSS 樣式表

再來,就要請各位新建一個 CSS 樣式表 (在本文範例中,所使用的檔案名稱為: layout.css),並將此檔案附加在前一個步驟中完成的 HTML 裡。

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-002_ok

開啟 layout.css 檔案後,請大家先參照下方圖示,非常建議可以多加利用註解的方式 (也就是圖示中,呈現灰色的文字),將不同的區塊先標示出來,這樣子不僅看起來井然有序,日後也會方便自己修改或更新喔!

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-003


【步驟三】 CSS 排版 – body

首先,在準備開始 CSS 編寫時,請記得在第一行先匯入 reset.css 這個檔案來做重置歸零的動作,如果有不清楚的同學,歡迎參考飛肯之前的這一篇教學專文,裏頭有非常詳盡的說明: 《Reset CSS – 重置歸零 – 網頁排版在各瀏覽器快速一致化》

另外,也不要忘記將 reset.css 檔案下載之後,跟我們正在編寫的 layout.css 放在一起,這樣才能發揮它的功效喔!

再來,我們只需要在 body 部分,做簡單的網頁背景顏色以及指定文字字體即可,其他細節的地方,我們可以等到之後的步驟再來做設定。

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-005


【步驟四】 CSS 排版 – 頁首區 ( # HEADER )

在頁首區,小編已經事先準備好一張寬為 960 px ,高為 300 px 的 banner 圖片,要用來取代 h1 標題中的文字。這邊就請大家參考圖示,先在 #HEADER 這一層,設好寬度,以及將此區塊置中。

至於 #HEADER 中的 h1 ,由於 h1 標題原本在 W3C 制定中就預設為 display:block ,所以就算省略不寫其實不會有影響。(倘若是在自己不確定的狀況下,養成每次都寫的習慣也比較不容易出錯就是了~給大家做個參考~)

h1 除了要設定與圖片相同的寬度與高度,並且用背景圖的方式置入圖片之外,重點則是最後一行的 text-indent 用法一,這個寫法會幫我們將 h1 原本的文字,整個移出網頁可見區域以外,是個非常實用的隱藏文字技巧,請大家務必要牢記喔~

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-006

將頁首部分的 CSS 語法完成之後,網頁呈現如下圖 :

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-007


【步驟五】 CSS 排版 – 主選單區 ( # NAV )

接著,在主選單區的 CSS 語法,主要有項目清單以及超連結兩大部分需要編寫。

項目清單有個重點,就是如何讓選單按鈕從垂直變為水平排列;提醒大家,要記得將浮動設定寫在 li 裡,而不是 ul 喔。

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-008

另外一個重點是, overflow:hidden 的使用, overflow:hidden 如果用白話一點的解釋,就是將多出來的地方藏起來。

寫在 NAV 裏頭,就可以預防在沒有設定高度之狀態下,可能會因為水平排列而產生版面被破壞的情形喔~

完成之後的主選單,如下方圖示:

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-011-1

 


至於,超連結這邊的語法排版,則要請大家記得一定千萬不能忘記或省略 display:block 這一行!

再來,只要留意一下如何讓文字水平置中,以及高度置中的寫法,就ok囉。

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-009

在滑鼠移至超連結時的設定,我們這次只有做個簡單的顏色轉換而已,如果大家還想要進一步學習如何變換圖片的話,歡迎參考飛肯之前的這一篇教學文: 《CSS Sprite 教學 – 條例式按鈕設計》

以上,主選單的部分就完成了~

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-012


【步驟六】 CSS 排版 – 內容區 ( # CONTENT )

內容區的一開始,大家又可以學到一個解除浮動效果的語法,也就是 clear:both ,這個用法很重要,也要請大家記起來喔!

小小提醒一下,在 CONTENT 裡面為了美化版面,可以利用 padding-top 與 padding-bottom ,與上下其他區塊空出適當的間隔來~

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-014

再來則是 p 段落的設定,大家可以看到這邊出現了 text-indent 的第二種用法,也就是文字縮排的效果。

然後,在兩個不同的段落之間,我們也是可以利用 padding 來做間隔的編排喔~

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-015

下方為完成之後的圖示,請大家參照 :

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-016


【步驟七】 CSS 排版 – 頁尾區 ( # FOOTER )

頁尾區的部分比較簡單,都是些基本的語法,至於整個頁尾區的高度,大家可以直接設在 h2 行高上面(圖示中,紅色框框處),然後利用 text-align:center 將文字置中,這樣就可以輕鬆完成這一區的版型設定了!

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-018


完成以上所有步驟後,我們來檢視一下整個網頁的成果吧~

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-019

(當滑鼠移至選單按鈕上方,會變換底色:  ↓↓↓ )

CSS 語法 - 網頁設計  - CSS 教學 – 單欄式網頁版型設計 - text-020

如果大家做出的網頁跟上面圖示一樣,就大功告成了~(灑花)

其實 CSS 語法沒有大家想像中的困難,只要跟著飛肯的教學文,多練習幾次,初學者也可以輕鬆學習網頁版型設計!

最後,小編預祝大家都能度過一個充實又愉快的假期,下一次的教學文時間~再~見~囉!~
(下台一鞠躬)

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , , , , , , .

迴響已被關閉。