100 likes | 172 Views
05. 圖 片. 5-1 嵌入圖片- < img > 元素 5-2 影像地圖- <map> 、 <area> 元素 5-3 標註- < figure > 、 < figcaption > 元素 5-4 建立繪圖區- <canvas> 元素. 5-1 嵌入圖片- < img > 元素 5-1-1 圖片的高度、寬度與框線 下面是一個例子。. 回首頁. P.5-2~3. 5-1-2 圖片的對齊方式. P.5-4~5. 5-1-3 圖片的替代顯示文字 例如:. P.5-6. 5-1-4 圖片的水平間距與垂直間距 例如:.
E N D
05 • 圖 片 • 5-1 嵌入圖片-<img> 元素 • 5-2 影像地圖-<map>、<area> 元素 • 5-3 標註-<figure>、<figcaption> 元素 • 5-4 建立繪圖區-<canvas> 元素
5-1 嵌入圖片-<img> 元素 • 5-1-1 圖片的高度、寬度與框線 • 下面是一個例子。 回首頁 • P.5-2~3
5-1-2 圖片的對齊方式 • P.5-4~5
5-1-3 圖片的替代顯示文字 • 例如: • P.5-6
5-1-4 圖片的水平間距與垂直間距 • 例如: • P.5-6~7
5-2 影像地圖-<map>、<area> 元素 • 一、繪製圖片並定義熱點 • 第一個步驟是選擇一套影像處理軟體繪製要做為影像地圖的圖片,然後定義熱點,例如: 回首頁 • P.5-10~11
二、在HTML 文件中建立影像地圖 • 第二個步驟是要在HTML 文件中建立影像地圖,此時會使用到 <map> 和 <area> 兩個元素,下面是一個例子。 三、指定圖片與影像地圖的關聯 最後一個步驟是要指定圖片與影像地圖的關聯,如下: • P.5-11~13
5-3 標註-<figure>、<figcaption> 元素 • 下面是一個例子。 回首頁 • P.5-15
5-4 建立繪圖區-<canvas> 元素 • 下面是一個例子。 回首頁 • P.5-16~17