第二堂課： 建立瀏覽器瞭解的 HTML5 版面設計
為了讓更多的硬體能夠透過瀏覽器瞭解網站設計者想要表達的內容，因此設計者最好能夠遵循 HTML5 希望設計者達成的版面設計元件較佳。
HTML 5 的版面設計主要有： doctype, html, body, header, nav, aside, footer 等等。不過要讓這些版面順利生成一個漂亮的頁面，
那就不能不透過 CSS 的呼叫了。CSS 重點是在輔助 HTML 預設標籤無法達到的功能，而不是獨立於 HTML 之外的存在喔！CSS 可以有內部呼叫、
外部呼叫與直接設定等方式，本週要用的是外部呼叫的方式喔！重點還有 CSS 的方塊設計囉。
本章重點目標：
- HTML5 除了 head, body 之外，針對版面額外設計了 header, footer, nav, aside, article 等版面，相關版面定義請參考第十七章，
page 428 ~ 442 的解釋喔！
- 參考老師在白板上面所規範的上述各個版面的相對位置，並將上周的 demo.html 複製成為 demo2.html 檔案，開始修訂 demo2.html 檔案
(一般來說，畫面需要置中，版面多寬比較好？哪個方塊包在哪個方塊內？都需要了解才好)
- 預計將所有的版面生成，需要透過外部的 CSS 檔案呼叫，外部呼叫的方式可以參考 www.ksu.edu.tw 的原始碼來設計
(<link... />)。並請設定 include/style2.css 的檔案，該檔案準備用來設計整體的網站風格！並且你的 demo2.html
必須要能夠呼叫這個 style2.css 的檔案才行。
- 針對 body 標籤的 CSS 定義：
- 請建立一些預設的資料，包括背景色 (background-color and rgba)、預設字型 (font-family)、大小 (font-size) 等等資訊
- 依據上頭的背景色，建立文字的基本色彩 (color)
- 最好也能夠定義列與列之間的行高，亦即是 line-height 的設定 (一般建議為 1.4~1.8 之間)。
- 針對最外層方塊 (可以是 page) 的 CSS 定義：
- 因為是不存在的預設標籤，因此需要使用額外的定義。我們這裡使用 class 搭配 .page 來設計的
- 需要定義出寬度(width)、邊框(border)、邊框陰影(box-shadow)、置中對齊(margin + auto)、與 body 不同的深對比底色等項目
- 針對 header 標籤的 CSS 定義：
- 定義出寬度、邊框、外框留白、內框留白、最小高度 (或固定寬度)、對齊方向、字體顏色是否特別顯示等
- 可能可以透過製作橫幅、定義使用背景圖示等方式來展示項目。
- 也能夠使用圓角 (border-radius) 而不使用死板的四方直角～
- 針對 nav 標籤的 CSS 定義：
- 建議使用清單 (ul, li) 的模式來設計導覽列較佳
- 下週會設計下拉式選單唷！
- 針對內文 (可以使用 content) 所設計的 CSS 定義：
- 可以先加邊框稍晚使用
- 可以加上 padding 的留白效果，這樣字跟邊框才不會黏在一起。
- 可以修改一下超連結的相關屬性，包括 a:active, a:hover, a:visited 等等
- 在 content 內的 aside 設定依據，可以是這樣的：
- 可以使用 float 來處理對齊的問題
- 建議要定義出整體的寬度與高度 (width, height)，或者是定義最小高度 (min-height) 也比較好。
- 因為內部用了 float 的項目，因此在 content 的設定方面，需要加上 overflow: auto 才有辦法自動將父元素的文件拉長。
- 針對 footer 標籤的 CSS 定義：
- 可以在上邊框加點樣式，可以使用不同的底色
- 建議字體可以縮小、可以宣告作者相關事宜、可以字體顏色變淡等等
- 除了置中的選擇，可以靠右顯示。
本章練習與習題：
- 將上述動作進行完畢，且在你的首頁 index.html 當中，加入 demo2.html 以及 style2.css 的檔名連結才行。