a.figure & img
1. 過去的寫法
1. Past style of code
<body>
<img src="../../../../../All Users/Documents/My Pictures/Blue hills.jpg" width="800" height="600" />
<p> This is the sample picture </p>
</body>
2. 現在的寫法：利用 figure + figcaption + CSS設定型態
2. New style of code：use figure + figcaption + CSS to set the pattern
<title>No title document</title>
<style type="text/css">
figcaption {
font-style: italic;
font-weight: bold;
color: #F00;
}
</style>
</head>
<body>
<figure>
<img src="../../../../../All Users/Documents/My Pictures/Blue hills.jpg" width="800" height="600" />
<figcaption>This is the sampe picture </figcaption>
</figure>
</body>
3.讓圖片及文字整合成一個超連結：包在 <a href="..."> </a> 之間的圖與文字算是一體
3. Integrate images and text into a hyperlink: the image and text between <a href="..."> </a> are one
Code:
<body>
<figure>
<a href="http://tw.yahoo.com">
<img src="../../../../../All Users/Documents/My Pictures/Blue hills.jpg" width="800" height="600" />
<figcaption>This is the sample picture </figcaption>
</a>
</figure>
</body>
PS：但是圖片會出現 藍色框框
PS：But there is a Blue frame around the picture
4. 將圖片的藍色框框去除：設定 img 的 border ="0"
4. Remove the blue frame of the image: set img's border = "0"
b. img - map
先在一張圖片中加上 map 讓圖中的某些區塊分別有各自的超連結：
1.點選圖片
2.點選下方地圖 map 的 area 屬性 -- retect (矩形)
3. 在沿著google 圖形區域，框出一個大小一樣的矩形
4.在連結的地方輸入google 的超連結；重複上面步驟做出 yahoo的部分
First, add a map to an image so that some of the blocks in the image have their own hyperlinks:
1. Click on the picture
2. Click on the area property of the map below -- retect (rectangular)
3. In the google graphics area, frame a rectangle of the same size
4. Enter the google hyperlink in the link; repeat the above steps to make the yahoo part
5. 加入替代文字：可讓閱讀器讀到，幫助視障者
5. Add a replacement text: let the reader read it and help the visually impaired
6. 加入 title (必須輸入程式碼)：讓游標移動至圖片區塊石，出現文字標記
6. Join title (must enter the code): move the cursor to the image block stone and display the text mark
PS1： Other attributes of "img - map" ("img - map" 的其他屬性)
circle：圓形
poly：任意形狀，可根據公司的 logo 而描邊
PS2：以上做法，會在 img 標籤內加入一個 usemap 屬性，名為 "map" (可以自訂名稱)。然後圖片中的每個區塊稱為 area，再加入座標。
PS2: In the above, a usemap attribute will be added to the img tag, named "map" (you can customize the name). Then each block in the picture is called area, and then the coordinates are added.
2. Video and music in HTML5
重點：
1. <source> 不可單獨存在，必須包在 <video> 或 <audio> 裡面。
2. 在 <video> 或 <audio> 之中的多個 <source> 是代表依順序測試能不能撥放。
3. 很多視訊格式 IE8 不支援，可用 flash (副檔名為 flv)檔案，讓 IE8 可以撥放
Important：
1. <source> cannot exist alone and must be wrapped in <video> or <audio>.
2. Multiple <source> in <video> or <audio> means that the test can be played in order.
3. Many video formats are not supported by IE8. The flash (deputy name is flv) file can be used to make IE8 playable.
4. 完成後，會自動在 Deramweaver 中加入許多程式碼，這樣 IE8 就可以播放了
4. When you're done, you'll automatically add a lot of code to Deramweaver so that IE8 can play.
3. iframe
a. Example：
<iframe src="mytest.html" width="600" height="80">
</iframe>
b. Pay attention to the security issue
1. 若將 01 + 04 則會出現在 iframe 中使用 javascript 來控制父頁面的DOM的安全隱憂
1. If 01 + 04 will appear in the iframe, use javascript to control the security of the parent page's DOM.
4. Create Table (建立表格)
a. <table><tr><td></td></tr></table>
1. 內距：內文到邊框的距離
2. 間距：每個 <td> 間的距離
1. Inside distance: the distance from the text to the border
2. Spacing: the distance between each <td>
b. Caption：在表格上方加上標題
在 <table> 後面加上 <caption>
Example：
<table width="300" border="1">
<caption>test table</caption>
c. th + scope attribute
1. 對搜尋引擎來說：會搜尋到同一 scope 的內容
2. 對使用者來說：文字會自動變粗體、置中對齊
3. th 可以行 + 列
1. For search engines: will search for content in the same scope
2. For the user: the text will automatically be bolded, centered and aligned
3. th can be row + column
4. 可再加上 CSS 樣式，會在 th 內自訂 calss 屬性
4-1 做完 CSS 樣式後，選取要套用的物件
4. Can be added with CSS style, custom calss attribute in th
4-1 After completing the CSS style, select the object to be applied.
4-2 在選取下方工具列的 CSS --> 目標規則 --> CSS樣式的類別名稱 (這裡是 h_w)
4-2 Select CSS --> Target Rules --> CSS Style Category Name (here h_w) in the toolbar below
d. thead (table head / 表頭)、tfoot (table foot /表尾)、tbody
1. 在程式碼中，需依照順序 thead --> tfoot --> tbody 來編寫。
2. 若資料筆數非常多，當預覽列印時超過2頁以上，thead 跟 tfoot 都會在每一頁加上
1. In the code, you need to write in the order of thead --> tfoot --> tbody.
2. If there are a lot of data, when the preview prints more than 2 pages, both the head and the tfoot will be added to each page.
5. Create HTML5 new form
a. form
b. input
c. HTML5 new control (新的控制項)
Example：
<form>
<input type="date" />
date<br/>
<input type="datetime" />
datetime<br/>
<input type="time" />
time<br/>
<input type="month" />
month<br/>
<input type="week" />
week<br/>
</form>
No comments:
Post a Comment