单元显示.ppt

作業4: ex4.html * ex4.html 執行結果 * 請修改 ex4.html 成作業4 * 作業4 完成檔 ex4a.html 為作業4的完成檔, 畫面如下： * 作業 5：題目 請完成這學期的課表: 欄位,? 節次,? 上課內容, 須設定不同底色 BGcolor (lime, yellow, pink), 星期1~5 欄位寬度 width=17%?   * 作業5: ex5.html * ex5.html 執行結果 * 作業5: ex5a.html * 作業5 完成檔 ex5a.html 為作業5的完成檔, 畫面如下： * * * 動態網頁程式設計實習1042 數位教材單元 3 : 列表及表格 主講老師：徐培倫 * 列表及表格 無序號的列表 有序號的列表 表格標籤的基本架構 表格標籤的屬性 作業3 作業4 作業5 單元3 無序號的列表 ＜ul＞非標序排列＜/ul＞ 左為非標序排列起始標記，右為結束標記 ＜lh＞列表標題 均可用於非標序排列，標序排列及敘述式排列中。 ＜li＞列表項目 內容幾乎為佈告方式，也可為段落、列表、表格、數字、圖案或其他連結等方式。 無序號的列表 DIR…/DIR MENU…/MENU UL 標籤的屬性 有序號的列表 ＜ol＞標序排列＜/ol＞ 使用方法和非標序列表一樣，不同的是列表中，會有數字之編排 (編號為遞增，即 1,2,3.....)。 ＜ol type=argument start=N＞ …＜/ol＞ argument 代表之符號型式如下： A：大寫英文字母 a：小寫英文字母 有序號的列表 I：大寫羅馬數字 i：小寫羅馬數字 1：數字 (預設) strat = value 設定起始值 改變編號的樣式 改變編號的起始值與改變值 巢狀列表 表格(Table)例子 在HTML中，可以使用Table表格標籤來顯示二維資料，如excel, access 資料表等內容 顏色表的表格 表格標籤的基本架構 表格標籤的屬性 TR…/TR 定義橫列 TH…/TH欄位標題 TH…/TH 定義欄位標題名稱 * TD…/TD資料欄位 TD…/TD 定義每一橫列中的資料欄位 TABLE 標籤精簡用法 表格標籤屬性 TABLE 的屬性 CAPTION 的屬性 TR、TH、TD 的屬性 COLSPAN 和 ROWSPAN 屬性—欄位的合併 BGCOLOR, BACKGROUND 屬性—設定欄位的背景 表格標籤屬性 TABLE BORDER、TABLE BORDER=N —為表格加上框線 TABLE WIDTH —調整表格的寬度 TABLE HEIGHT —調整表格的高度 TABLE CELLSPACING —調整儲存格線的寬度 * 表格標籤屬性 TABLE CELLPADDING —調整欄位邊界 TABLE BGCOLOR —設定表格背景顏色 TABLE BACKGROUND —設定表格背景圖片 CAPTION ALIGN —設定表格標題位置。ALIGN 的屬性值有 top 與 bottom * 表格標籤屬性 TR、TH、TD 的屬性 ALIGN 屬性 用來設定欄位內資料的水平對齊方式, 分為left、center、right 等 3 種設定值 VALIGN 屬性 用來設定欄位內資料的垂直對齊方式, 有 top、middle、bottom 等 3 種設定值 * COLSPAN 和 ROWSPAN 欄位的合併 COLSPAN=N ： 資 料 格 橫 跨 的 格 數 （ 寬 度 ） ROWSPAN=N ： 資 料 格 縱 含 的 格 數 （ 高 度 ） * BGCOLOR BACKGROUND BGCOLOR修改 Table 表格的背景顏色 整個表格 table bgcolor=“#RRGGBB” 一列 tr bgcolor=“#RRGGBB” 一欄位td bgcolor=“#RRGGBB” BACKGROUND設定 Table 表格的背景檔案 table background=“圖片” * 作業3：題目 請修改範例檔 ex3.html 達成下列列表結果 * 作業 3: ex3.html * ex3.html 執行結果 * 請修改 ex3.html 成作業3 * 作業3 完成檔 ex3a.html 為作業3的完成檔, 畫面如下： * 作業 4：題目 請修改範例檔 ex4.html 達成下列列表結果 * * *