| 回教學網站 | 回網站規劃與設計首頁 | 作業繳交區 |
第五章、清單介紹
課前複習：
  • 常見的特殊字元中， & > < 等等，應該如何使用 HTML 的特殊語法寫出？
  • 網頁背景可使用什麼標籤的屬性來處理？
  • 空白行與段落的標籤分別是？
  • 保有原有的文字排版格式使用的標籤是？
  • 什麼是縮排？可以使用的標籤為？
  • 橫線條可以使用什麼標籤來處理？
  • 可以使用字體顏色、字體形式的標籤為？屬性主要是哪三個？

本週目標：
  • 瞭解清單；
  • 使用 ul 清單格式搭配 li
  • 使用 ol 搭配不同的數字或文字做為清單類型；

第五章內容重點：
  • 標準清單中，主要透過 <ul> 與 </ul> 來規範，內容每個項目則以 <li> 來規範；
    • 在 <ul type="disc, circle, square"> 可選擇不同的項目符號，預設是實心圓形；
    • 項目的部分會與項目上一行有空格，且項目會縮排；
    • 可參考課本 5-9 的說明。
    • 觀察純文字範例：05_chap_05-1.txt

  • 序號清單，可使用 <ol> 來與 <li> 搭配使用。使用的方法與 <ul> 一模一樣，差別為：
    • 每個項目變成序號方式，序號有 1, a, A, I, i 等；
    • 序號的處理方法同樣使用 type 屬性，例如 <ol type="a"> 就會以 a, b, c... 為序號；
    • 序號開始的數字是可變的，使用 start 屬性來處理即可。例如 <ol start="5">
    • 將上述的 week04-1.txt 修訂一下

  • 另外標準清單中，如果不需要換列與縮排的話，可以使用 <lh> 來處理！
    • 與 <ul> 幾乎相同，也使用 type 的屬性與 <li> 來規範每個項目；
    • 但項目不會縮排，與前一列不會有空一行的情況發生。
    • 將上述的 week04-1.txt 修訂一下

  • 敘述式清單，沒有項目符號的狀態，例如課本 p5-12 範例 5-6 的說明。此時可用如下方式處理：
    <dl>
	<dt>內容有的沒有的</dt>
		<dd>內容有的沒有的</dd>
		<dd>內容有的沒有的</dd>
		<dd>內容有的沒有的</dd>
</dl>
    觀察純文字範例：05_chap_05-2.txt

  • 巢狀清單：顧名思義，就是呈現巢狀啦！一層一層的！請參考 p5-23 的範例 5-13 來設計！
    觀察純文字範例：05_chap_05-3.txt

本章練習：實作題：請依照如下提示來製作本週習題：
  1. 依據課本 P5-27 第二題的說明，使用本範例檔：05-chap05-01.txt 的進行：
    • 使用敘述式清單！
    • 清單項目請配合字體的變化，注意大小寫、顏色等；
    • 內文的部分字體需要變寫(hint: font or small 等等)

  2. 依據課本 p5-27 第三題的說明，使用本範例檔：05-chap05-02.txt 來進行：
    • 底色黑色、字體白色
    • 紅色部分字體變小；
    • 利用巢狀清單來處理。

  3. 請修改 index.html 檔案，將本週之前的每週練習之連結分別在不同的行顯示出來！