HTML5設計實務

Size: px

Start display at page:

Download "HTML5設計實務"

役扶
5 years ago
Views:

tw/teachers/chienhua/ Note: Some slides and/or pictures in the following are adapted from slides 2015 旗標出版股份有限公司.

1 第 2 章 HTML5 設計實務第 2 章 HTML5 設計實務 2-1 設計檢視與程式碼編輯器的使用 2-2 建立 HTML5 網頁 2-3 HTML5 的文字編排標籤 2-4 HTML5 的圖片與超連結標籤 2-5 HTML5 的表格和容器標籤 2-6 HTML5 的語意與結構元素 Note: Some slides and/or pictures in the following are adapted from slides 2015 旗標出版股份有限公司設計檢視與程式碼編輯器的使用三種編輯模式設計檢視的控制項定位方式程式碼編輯器的基本使用設計檢視的控制項定位方式 - 預設定位方式 Visual Studio 在網頁編輯方面提供原始檔設計及分割等 3 種編輯模式, 其中原始檔模式就是前面建立網站後, 視窗中間出現的文字編輯器窗格在原始檔模式下就像使用記事本之類的文字編輯器在編寫網頁原始檔, 此時需自行輸入 HTML JavaScript ASP.NET 程式及網頁的文字內容 3 4 1

2-1-0 設計檢視的控制項定位方式 - 預設定位方式至於設計模式則是所見即所得 (WYSIWYG) 的編輯器, 或可稱之為

但 VWD 會自動將我們在設計模式下輸入的內容, 轉換成對應的 HTML 或 ASP.

同時可以查看原始碼 ; 或者希望修改原始碼時, 可以同時預覽網頁的樣貌, 即可如下切換為分割模式 5 6 2-1-1

NET 網頁本身是一份文件, 其內容排列方式類似記事本或 Word 編輯的文件, 預設控制項的編排方式是從左至右排列,

2 2-1-0 設計檢視的控制項定位方式 - 預設定位方式至於設計模式則是所見即所得 (WYSIWYG) 的編輯器, 或可稱之為網頁設計面板在此模式下可直接輸入網頁所要顯示的文字, 或置入網頁上要有的圖案按鈕表格等等此時不能直接輸入網頁的原始碼, 但 VWD 會自動將我們在設計模式下輸入的內容, 轉換成對應的 HTML 或 ASP.NET 程式碼儲存到網頁原始檔中設計檢視的控制項定位方式 - 預設定位方式如果您希望修改網頁時, 同時可以查看原始碼 ; 或者希望修改原始碼時, 可以同時預覽網頁的樣貌, 即可如下切換為分割模式設計檢視的控制項定位方式 - 預設定位方式 ASP.NET 網頁本身是一份文件, 其內容排列方式類似記事本或 Word 編輯的文件, 預設控制項的編排方式是從左至右排列, 如果超過文件寬度就自動換行靠左對齊, 然後從下一行繼續排列, 如同在 Word 中輸入一個個文字, 如下圖所示 : 設計檢視的控制項定位方式 - 絕對定位方式絕對定位方式可以任意調整控制項的位置, 如同在畫布上的指定位置繪出控制項, 如下圖所示 : 選絕對 7 8 2

2-1-1 設計檢視的控制項定位方式 - 相對定位方式相對定位方式是指其位置是相對於前一個控制項, 位置與前一個控制項相關聯,

Label 控制項使用 Enter 鍵換行, 可以看到 TextBox 控制項也自動往下移 2-1-2 程式碼編輯器的基本使用 -

NET 網頁且選原始檔檢視, 在上方選檔名標籤可以切換編輯的程式碼檔案, 檔案名稱後如有星號, 表示有更改但尚未儲存原始程式碼的標籤是深紅色,

或伺服端控制項標籤在程式碼編輯視窗輸入 HTML 或伺服端控制項標籤, 例如 : 表格的 <table> 標籤, 只需輸入 < 的部分標籤,

3 2-1-1 設計檢視的控制項定位方式 - 相對定位方式相對定位方式是指其位置是相對於前一個控制項, 位置與前一個控制項相關聯, 如果調整前一個控制項的位置, 也會同時自動調整後一個控制項的位置在位置對話方塊指定相對, 就可以指定控制項使用相對定位方式在前一個 Label 控制項使用 Enter 鍵換行, 可以看到 TextBox 控制項也自動往下移程式碼編輯器的基本使用 - 切換程式碼檔案與輸入程式碼請開啟兩頁 ASP.NET 網頁且選原始檔檢視, 在上方選檔名標籤可以切換編輯的程式碼檔案, 檔案名稱後如有星號, 表示有更改但尚未儲存原始程式碼的標籤是深紅色, 屬性是紅色,Visual Basic 關鍵字為藍色, 註解為綠色, 其他程式碼為黑色程式碼編輯器的基本使用 - 輸入 HTML 或伺服端控制項標籤在程式碼編輯視窗輸入 HTML 或伺服端控制項標籤, 例如 : 表格的 <table> 標籤, 只需輸入 < 的部分標籤, 就會顯示可能標籤的清單, 如下圖所示 : 程式碼編輯器的基本使用 - 智慧 Visual Basic 程式碼輸入在程式碼編輯視窗輸入 Visual Basic 程式碼時, 供智慧提示可以在輸入部分程式碼內容時, 顯示程式語法可能的關鍵字清單物件屬性方法和列舉常數清單等提示訊息

2-2 建立 HTML5 網頁 2-2-1 建立 HTML5 網頁 2-2-2 HTML5 的基本語法與共同屬性 2-2-3 <head> 標籤 2-2-1 建立 HTML5 網頁 - 建立網頁請在方案總管視窗的專案名稱上,

DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title> 網頁標題文字 </title> </head> <body> 網頁內容 </body> </html>

4 2-2 建立 HTML5 網頁建立 HTML5 網頁 HTML5 的基本語法與共同屬性 <head> 標籤建立 HTML5 網頁 - 建立網頁請在方案總管視窗的專案名稱上, 執行右鍵快顯功能表的加入 /HTML 網頁指令, 可以看到指定項目的名稱對話方塊建立 HTML5 網頁 - 標籤結構 HTML5 網頁和 HTML 4 網頁的結構十分相似, 其基本標籤結構如下所示 : <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title> 網頁標題文字 </title> </head> <body> 網頁內容 </body> </html> 建立 HTML5 網頁 -<!DOCTYPE> <!DOCTYPE> <!DOCTYPE> 不是 HTML 標籤, 其位置是在 <html> 標籤之前, 可以告訴瀏覽器使用的 HTML 版本, 以便瀏覽器使用正確的引擎來產生 HTML 網頁內容

2-2-1 建立 HTML5 網頁 -<html> 標籤 2-2-1 建立 HTML5 網頁 -<head> 標籤 <html> 標籤 <html> 標籤是 HTML 網頁的根元素, 它是一個容器元素, 其內容就是其他 HTML 標籤, 擁有 <head> 和 <body> 兩個子標籤如果需要, 在 <html> 標籤可以使用 lang 屬性指定網頁使用的語言, 如下所示 : <html

5 2-2-1 建立 HTML5 網頁 -<html> 標籤建立 HTML5 網頁 -<head> 標籤 <html> 標籤 <html> 標籤是 HTML 網頁的根元素, 它是一個容器元素, 其內容就是其他 HTML 標籤, 擁有 <head> 和 <body> 兩個子標籤如果需要, 在 <html> 標籤可以使用 lang 屬性指定網頁使用的語言, 如下所示 : <html lang="zh-tw"> lang 屬性值常用 2 碼值有 :zh( 中文 ) en( 英文 ) fr ( 法文 ) de( 德文 ) it( 義大利文 ) 和 ja( 日文 ) 等在 lang 屬性值也可以加上次 2 碼的國家或地區, 例如 :en- US 是美式英文 zh-tw 是台灣的正體中文等 <head> 標籤的內容是標題元素, 包含 <title> <meta> <script> 和 <style> 標籤 <meta> 標籤可以指定網頁的編碼為 utf-8, 如下所示 : <meta charset="utf-8"> 建立 HTML5 網頁 -<body> 標籤 <body> 標籤 <body> 標籤是網頁文件的內容, 包含文字超連結圖片表格清單和表單等網頁內容, 詳見第 2-3~2-5 節的說明建立 HTML5 網頁 -Ch2_2_1.htm 01: <!DOCTYPE html> 02: <html lang="zh-tw "> 03: <head> 04: <meta charset="utf-8"/> 05: <title>html5 網頁 </title> 06: </head> 07: <body> 08: <h3>html5 網頁 </h3> 09: <hr/> 10: <p> 第一份 HTML5 網頁 </p> 11: </body> 12: </html> 20 5

6 2-2-2 HTML5 的基本語法與共同屬性 - 語法 1 <html> <head> 和 <body> 標籤都可有可無, XHTML 一定需要這些標籤元素和屬性不區分英文大小寫,<html> <Html> <HTML> 都是相同標籤元素不一定需要結尾標籤 (End-Tag), 如果是沒有內容的元素, 也不需要使用 /> 符號代替結尾標籤, 例如 : 下列標籤都是合法的 HTML5 標籤, 如下所示 : <p> 這是一個測試 </p> <p> 這是一個測試 <br> <br/> HTML5 的基本語法與共同屬性 - 語法 2 標籤屬性值的引號也是可有可無, 例如 : 下列標籤的屬性都是合法的 HTML5 屬性, 如下所示 : <img src="sample.jpg" width=20 height=30 /> 屬性沒有屬性值, 只需使用屬性名稱即可, 如下所示 : <option selected> <input type="radio" checked> 文字可以單獨存在, 並不用位於 HTML 開始與結束標籤之中一些 XHTML 的屬性已經不再需要, 例如 :<script> 標籤的 type 屬性和 <html> 標籤的 xmlns 屬性等 HTML5 的基本語法與共同屬性 - 共同屬性 HTML 標籤擁有很多共同屬性, 即每一個標籤都支援的屬性, 常用共同屬性的說明, 如下表所示 : 屬性 id accesskey class dir lang style tabindex title 說明指定 HTML 元素唯一的識別名稱, 在整頁 HTML 網頁中的名稱必須是唯一, 不能重複指定元素的快捷鍵來取得焦點指定元素套用的樣式類別, 詳見第 3 章的說明指定元素內容的文字方向是從左至右, 或從右至左, 其值可以是 ltr rtl 或 auto 指定 HTML 元素使用的語言指定 HTML 元素套用的局部套用 CSS, 詳見第 3 章的說明指定按下 tab 鍵移動元素取得焦點的順序指定 HTML 元素的額外資訊 <head> 標籤 <head> 標籤是 <html> 標籤的子標籤, 它是一個容器元素, 可以包含標題元素 :<title> <meta> <script> 和 <style> 等標籤, 如下表所示 : 標籤 <title> <meta> <script> 說明必須元素, 可以顯示瀏覽器視窗上方標題列或標籤頁的標題文字提供 HTML 網頁的 metadata 資料, 例如 : 網頁描述關鍵字作者和最近修改日期等資訊此標籤是用來定義客戶端的腳本程式碼, 例如 :JavaScript,HTML 4.0 版需要指定 type 屬性 ;HTML5 版可有可無 <style> 此標籤是用來定義 HTML 網頁套用的 CSS 樣式, 在第 3 章有進一步的說明 <link> 此標籤是用來連接外部資源的檔案, 主要是用來連接樣式表檔案, 在第 3 章有進一步的說明 24 6

2-3 HTML5 的文字編排標籤 2-3-1 標題文字 2-3-2 段落換行與水平線 2-3-3 標示文字內容 2-3-4 HTML 清單 2-3-1 標題文字在 HTML 網頁的標題文字可以提綱挈領來說明文件內容,<hn> 標籤可以定義標題文字,<h1> 最重要, 依序遞減至 <h6>, 提供 6 種不同尺寸變化的標題文字, 其基本語法如下所示 : <hn>.

7 2-3 HTML5 的文字編排標籤標題文字段落換行與水平線標示文字內容 HTML 清單標題文字在 HTML 網頁的標題文字可以提綱挈領來說明文件內容,<hn> 標籤可以定義標題文字,<h1> 最重要, 依序遞減至 <h6>, 提供 6 種不同尺寸變化的標題文字, 其基本語法如下所示 : <hn>...</hn>,n=1 ~~ 段落換行與水平線 - 段落與換行一般來說,HTML 網頁的文字內容是使用段落來編排, 使用的是 <p> 標籤,<p> 標籤可以定義段落, 瀏覽器預設在之前和之後增加邊界尺寸 ( 可以使用 CSS 的 margin 屬性來更改 ), 如下所示 : <p>javascript 原為網景公司開發的腳本語言, 提供該公司瀏覽器 Netscape Navigator 開發互動網頁的功能 </p> 一般來說, 在文書處理程式, 例如 : 記事本或 Word 等, 當編輯時按下 Enter 鍵就是換行或建立新段落, 但 HTML 網頁顯示換行是使用換行標籤 ( 不是建立段落 ),Enter 鍵不會顯示換行編排, 如下所示 : <br/> 段落換行與水平線 - 水平線 HTML 的 <hr> 標籤在瀏覽器是顯示一條水平線, 但 HTML5 的 <hr> 標籤不再只是為了美化版面, 而是給予內容上主題分割的意義, 可以用來分割網頁內容, 如下所示 : <h3>html</h3> <p>html 語言是 Tim Berners-Lee 在 1991 年建立 </p> <hr/> <h3>javascript</h3> <p>javascript 原為網景公司開發的腳本語言 </p> 上述內容分割成 HTML 和 CSS 的定義, 使用的就是 <hr> 標籤

2-3-3 標示文字內容 2-3-4 HTML 清單 - 項目編號 (Ordered List) 在 HTML 網頁的文字內容中, 可能有些名詞或片語需要特別標示, 如下表所示 : 標籤 <b> <i> <em> 說明使用粗體字來標示文字,HTML5 代表文體上的差異, 例如 :

<ol> <li> 項目 1</li> <li> 項目 2</li>.. <strong> HTML 4.x 是更強的強調文字,HTML5 是重要文字 <cite> HTML 4.

x 是顯示縮小文字,HTML5 是輔助說明或小型印刷文字, 例如 : 網頁最下方的版權宣告等 29 </ol> <ol> 標籤可以建立項目編號, 每一個項目是一個 <li> 標籤 30 2-3-4 HTML 清單 - 項目符號 (Unordered List) 2-3-4 HTML 清單 -

8 2-3-3 標示文字內容 HTML 清單 - 項目編號 (Ordered List) 在 HTML 網頁的文字內容中, 可能有些名詞或片語需要特別標示, 如下表所示 : 標籤 <b> <i> <em> 說明使用粗體字來標示文字,HTML5 代表文體上的差異, 例如 : 關鍵字和印刷上的粗體字等使用斜體字來標示文字,HTML5 代表另一種聲音或語調, 通常是用來標示其他語言的技術名詞片語和想法等顯示強調文字的效果, 在 HTML5 是強調發音上有細微改變句子的意義, 例如 : 因發音改變而需強調的文字 HTML 清單提供數字順序的項目編號, 如下所示 : <ol> <li> 項目 1</li> <li> 項目 2</li>.. <strong> HTML 4.x 是更強的強調文字,HTML5 是重要文字 <cite> HTML 4.x 是引言或參考其他來源,HTML5 是用來定義產品名稱, 例如 : 一本書一首歌一部電影或畫作等 <small> HTML 4.x 是顯示縮小文字,HTML5 是輔助說明或小型印刷文字, 例如 : 網頁最下方的版權宣告等 29 </ol> <ol> 標籤可以建立項目編號, 每一個項目是一個 <li> 標籤 HTML 清單 - 項目符號 (Unordered List) HTML 清單 - 定義清單 (Definition List) HTML 清單可以使用無編號的項目符號, 即在項目前是小圓形正方形等符號, 如下所示 : <ul> <li> 項目 1</li> <li> 項目 2</li>.. </ul> HTML5 的定義清單是一個任何名稱和值成對群組的結合清單, 例如 : 詞彙說明的每一個項目是定義和說明, 如下所示 : <dl> <dt>javascript</dt> <dd> 客戶端腳本語言 </dd> <dt>html</dt> <dd> 網頁製作語言 </dd> </dl> <dl> 標籤建立定義清單,<dt> 清單定義項目 ; <dd> 標籤描述, 項目

2-4 HTML5 的圖片與超連結標籤 2-4-1 圖片 2-4-2 超連結 2-3-1 圖片 HTML 網頁屬於一種超媒體 (HyperMedia) 文件, 除了文字內容外, 還可以在網頁插入圖片, 其基本語法如下所示 : <img src="filename" width="value"

<a href="url" target="frame_name"> 超連結名稱 </a> 上述 <a> 超連結標籤預設在瀏覽器顯示藍色底線字, 造訪過的超連結顯示紫色底線字, 啟動的超連結是紅色底線字 HTML5 超連結不只可以使用 <img> 子元素建立圖片超連結, 我們還可以在 <a>

9 2-4 HTML5 的圖片與超連結標籤圖片超連結圖片 HTML 網頁屬於一種超媒體 (HyperMedia) 文件, 除了文字內容外, 還可以在網頁插入圖片, 其基本語法如下所示 : <img src="filename" width="value" height="value" alt=" 替代文字 "/> 超連結 HTML 網頁是一種超文件 (HyperText), 內含超連結可以連結全世界不同伺服器的資源, 超連結不僅能夠連接同網站的其他 HTML 網頁, 還可以連接其他網站的網頁, 其基本語法如下所示 : <a href="url" target="frame_name"> 超連結名稱 </a> 上述 <a> 超連結標籤預設在瀏覽器顯示藍色底線字, 造訪過的超連結顯示紫色底線字, 啟動的超連結是紅色底線字 HTML5 超連結不只可以使用 <img> 子元素建立圖片超連結, 我們還可以在 <a> 元素中使用區塊元素, 例如 :<h3>, 如下所示 : <a href=" <h3> 旗標出版公司 </h3></a> 2-5 HTML5 的表格與容器標籤 HTML 的表格標籤 <div> 和 <span> 容器標籤

net</td> <tr> <td>vbscript</td> <td>php</td> </table> 37 2-5-1 HTML 的表格標籤 - 複雜 HTML 表格 <table border=""> <caption> 每月存款金額 </caption> <thead> <tr> <th> 月份 </th> <th> 存款金額 </th> </thead> <tbody> <tr>

10 2-5-1 HTML 的表格標籤 - 基本 HTML 表格 <table border="1"> <tr> <th id="client"> 客戶端 </th> <th id="server"> 伺服端 </th> <tr><td colspan="2">ajax</td> <tr> <td headers="client">javascript</td> <td headers="server">asp.net</td> <tr> <td>vbscript</td> <td>php</td> </table> HTML 的表格標籤 - 複雜 HTML 表格 <table border=""> <caption> 每月存款金額 </caption> <thead> <tr> <th> 月份 </th> <th> 存款金額 </th> </thead> <tbody> <tr> <td> 一月 </td> <td>nt$ 5,000</td> <tr> <td> 二月 </td> <td>nt$ 1,000</td> </tbody> <tfoot> <tr> <td> 存款總額 </td> <td>nt$ 6,000</td> </tfoot> </table> <div> 和 <span> 容器標籤 - <div> 標籤 <div> 和 <span> 容器標籤 - <span> 標籤 <div> 標籤 HTML 的 <div> 標籤可以在 HTML 網頁定義一個區塊, 其主要目的是建立文件結構和使用 CSS 來格式化群組的元素, 如下所示 : <div style="color:blue"> <h3>javascript</h3> <p> 客戶端網頁技術 </p> </div> 上述 style 屬性定義 CSS 樣式 39 <span> 標籤 HTML 的 <span> 標籤也是用來群組元素, 不過, 它是一個單行元素, 並不會建立區塊, 即換行, 如下所示 : <p> 外國人很多都是 <span style="color:lightblue"> 淡藍色 </span> 眼睛 </p> 40 10

2-6 HTML5 的語意與結構元素 2-6-1 HTML5 的語意與結構標籤 2-6-2 使用 HTML5 的語意與結構標籤 2-6-3 測試網頁 2-6-1 HTML5 的語意與結構標籤 HTML5 提供語意和結構標籤來建立網頁內容的結構, 其簡單說明如下表所示 : 標籤 <article> <aside> <footer> <header> <hgroup> <nav> <section>

11 2-6 HTML5 的語意與結構元素 HTML5 的語意與結構標籤使用 HTML5 的語意與結構標籤測試網頁 HTML5 的語意與結構標籤 HTML5 提供語意和結構標籤來建立網頁內容的結構, 其簡單說明如下表所示 : 標籤 <article> <aside> <footer> <header> <hgroup> <nav> <section> 說明建立自我包含的完整內容成份, 例如 : 部落格或 BBS 文章建立非網頁主題, 但相關的內容片斷, 只是有些離題建立網頁或區段內容的註腳區塊建立網頁的標題區塊, 可以包含說明商標和導覽群組 <h1>~<h6> 標籤來建立多層次的標題文字, 例如 : 副標文字等建立網頁的導覽區塊, 即連接其他網頁的超連結建立一般用途的文件或應用程式區段, 例如 : 報紙的體育版財經版等使用 HTML5 的語意與結構標籤 - 說明 HTML4 版的 <div> 標籤只是一般用途的區塊容器, 並沒有任何除了將網頁內容分割成區塊之外的語意 HTML5 提供描述頁面內容結構的語意標籤 :<header> <section> <article> <nav> <aside> 和 <footer>, 可以讓我們建立擁有自我描述能力的 HTML 網頁, 如右圖所示 : 使用 HTML5 的語意與結構標籤 - HTML 標籤 1 <header> <h1> 程式設計之家 </h1> <nav> <ul> <li><a href="/news/"> 最新消息 </a></li> </ul> </nav> </header> <section> <article> <h2> 歡迎光臨程式設計之家 </h2> <p> </p> </article> <article> <h2> 服務說明 </h2> <p> </p> 44 11

- 圖例 45 46 2-6-3 使用 HTML5 的語意與結構標籤 - 圖例編輯完網頁後, 我們即可由 Visual Studio 中啟動瀏覽器, 測試我們的網頁 : 2-6-3 使用 HTML5 的語意與結構標籤 - 圖例在瀏覽器的網址列可看到,

12 2-6-2 使用 HTML5 的語意與結構標籤 - HTML 標籤 2 </article> </section> <aside> <h2> 相關資源網站 </h2> <ul> <li><a href="">html5 教學網站 </a></li> </ul> <p><a href="/resources/"> 更多資源 </a></p> </aside> <footer> <small>copyright 2012 陳會安版權所有 </small> </footer> 使用 HTML5 的語意與結構標籤 - 圖例使用 HTML5 的語意與結構標籤 - 圖例編輯完網頁後, 我們即可由 Visual Studio 中啟動瀏覽器, 測試我們的網頁 : 使用 HTML5 的語意與結構標籤 - 圖例在瀏覽器的網址列可看到, 我們所瀏覽的網站名稱是 localhost, 也就是本機電腦, localhost 後的數字則是虛擬網站所用的通訊埠編號, 由於 Visual Studio 虛擬網站所用的通訊埠編號都不固定, 所以在您電腦上看到的通訊埠編號也可能與書上的編號不同

13 Reading Assignment Chapter 2 of ASP.NET 4.5 網頁製作徹底研究, 陳會安 Slides developed by Chien-Hua Tsai 49 13

Microsoft PowerPoint - CH02.pptx

Microsoft PowerPoint - CH02.pptx 第 2 章文件結構本投影片參考陳惠貞投影片製作修改, 僅供教學使用楊偉儒 Email: wzyang0825@gmail.com 2 Part1 HTML 篇 2-1 HTML 文件的 DOCTYPE- 元素 2-1 HTML 文件的 DOCTYPE - 元素 2-2 HTML 文件的根元素 - 元素 2-3 HTML 文件的標頭 -