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