Ch03 HTML5 + CSS 表格與多媒體 網頁程式設計
大綱 HTML 5 建立表格 表格與儲存格格式化 表格標題、表頭、主體、表尾 超連結 圖片 影音多媒體 2018/11/24
建立表格 <table> </table>: 標示表格 summary=“”: 表格的說明文件 width=“”: 表格的寬度(像素數或視窗寬度比例) align=“{left, center, right}”:表格對齊(靠左,置中,靠右) bgcolor=“color|#rrggbb”: 背景色彩 background=“uri”:背景圖片的位址uri bordercolor=“color|#rrggbb”: 框線色彩 2018/11/24
建立表格 <tr> </tr>:建立表格中的一列(row) align=“{left, right, center, justify, char}”: 指定某列儲存格的水平對齊方式(靠左, 靠右, 置中, 左右對齊,對齊指定字元) valign=“{top, middle, bottom, baseline}”: 某列儲存格垂直對齊方式(靠上,中央,靠下,基準線) bgcolor=“color|#rrggbb”:某列儲存格的背景色彩 background=“uri”:儲存格背景圖片的位址uri bordercolor=“color|#rrggbb”: 儲存格框線色彩 2018/11/24
建立表格 <td> </td>:建立表格一列中的儲存格 align=“{left, right, center, justify, char}”: 指定某儲存格的水平對齊方式(靠左, 靠右, 置中, 左右對齊,對齊指定字元) valign=“{top, middle, bottom, baseline}”: 儲存格垂直對齊方式(靠上,中央,靠下,基準線) bgcolor=“color|#rrggbb:儲存格的背景色彩 2018/11/24
colspan=“n”: 指定某個儲存格是由幾欄合併而成 rowspan=“n”:指定某個儲存格是由幾列合併而成 width=“n”: 指定某個儲存格的寬度 height=“n”:指定某個儲存格的高度 2018/11/24
建立表格 <th> </th>: 表格中的一列,標示標題儲存格 內容會置中,並加上粗體 <th>的屬性與<td>相同 2018/11/24
建立表格 表格的表頭<thead> 主體<tbody> 表尾<tfoot> 2018/11/24
2018/11/24
練習一:建立以下表格 二甲: 小琉球知名景點介紹 二乙: 台灣好漁,產品介紹 參考網址: http://liuqiu.pthg.gov.tw/liuqiu/web_tw.php?prog=travel 二乙: 台灣好漁,產品介紹 http://www.asher.com.tw/products.php 2018/11/24
uri介紹 超連結的定址方式稱為URI (Universal Resource Identifier)，通常包含下列幾個部分： 例如： 絕對URI (Absolute URI)包含通訊協定、伺服器名稱、資料夾和文件名稱。 相對URI (Relative URI) 通常只包含資料夾和文件名稱，有時甚至連資料夾都可以省略不寫。相對URI 又分為下列兩種類型： 文件相對URI (Document-Relative URI) 伺服器相對URI (Server-Relative URI) 2018/11/24
uri介紹 若目前正在執行的檔案為default.html: 若目前正在執行的檔案為question.html: MyWeb default.html Contact email.html Support staff.html FAQ question.html 若目前正在執行的檔案為default.html: 若要連結email.html, 則相對uri為../Contact/email.html 若目前正在執行的檔案為question.html: 若要連結email.html, 則相對uri為../../Contact/email.html 2018/11/24
超連結 <a> charset=“…”: 指定超連結的字元編碼方式 coords=“x1,y1,x2,y2”: 指定影像地圖的熱點座標 href=“uri”: 指定超連結所連結之文件的相對或絕對位址 name=“…”: 指定書籤(bookmark)名稱 rel=“…”: 從目前文件到href屬性指定之文件的關聯 <a rel=“next” href=“nextpage.html”> rev=“…”: 從href屬性指定之文件到目前文件之關聯 <a rev=“pre” href=“backpage.html> 2018/11/24
shape=“{rect, circle, poly}”: 指定影像地圖的熱點形狀 target=“…”: 指定目標框架的名稱 media=“{screen, print, projection, braille, speech, tv,handheld, all}”: 指定目標媒體類型(螢幕,印表機,投影機,點字機,聲音合成器,電視,可攜式裝置,全部),預設為all 2018/11/24
超連結色彩 在<body>的屬性中: link=“color|#rrggbb”: 尚未瀏覽的超連結文字色彩 vlink=“color|#rrggbb”: 已經瀏覽的超連結文字色彩 alink=“color|#rrggbb”: 被選取的超連結文字色彩 2018/11/24
指定相對uri的路徑資訊<base> <base>要放在<head>元素裡,而且沒有結束標籤 href=“uri”: 指定對URI的絕對位址 targer=“…”: 指定目標框架的名稱 2018/11/24
建立書籤 2018/11/24
嵌入圖片－<img> 元素 嵌入圖片,沒有結束標籤 src=“uri”: 指定圖片的相對或絕對位址 name=“…”: 指定圖片的名稱,供書籤使用 alt=“…”: 指定圖片的替代顯示文字 width(寬度), height(高度), border(框線粗細), align(對齊方式) 2018/11/24
嵌入影片<video>與聲音<audio> src=“uri”: 指定影片或聲音的相對或絕對位址 loop: 重複播放影片或聲音 autoplay: 瀏覽器在載入網頁的同時,自動播放影片 muted: 靜音 controls: 顯示瀏覽器內建的控制面板 preload=“{none,metadata,auto}”: 指定是否載入網頁的同時,將影片預先下載到緩衝區 poster=“uri”: 在下載完成前,或開始播迟前,顯示的第一個畫格 width(寬度), height(高度) 2018/11/24
練習二 將練習一中,加入圖片 2018/11/24
練習三 建立一個人履歷的網頁 考慮用表格來呈現資料 考慮當晝面很長時,如何快速到文件一位置 2018/11/24