Download presentation
Presentation is loading. Please wait.
2
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
2-8 反應式網站設計與Media Queries
3
2-1 HTML5的頁面結構 2-1-1 建立HTML5網頁 2-1-2 HTML5的基本語法與共同屬性 2-1-3 <head>標籤
4
2-1-1 建立HTML5網頁-新增 使用WebMatrix和VS Express for Web新增HTML網頁，以WebMatrix為例，如下圖所示：
5
2-1-1 建立HTML5網頁-標籤結構 HTML5網頁和HTML 4.x和XHTML網頁的結構都十分相似，其基本的標籤結構如下所示：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>網頁標題文字</title> </head> <body> 網頁內容 </body> </html>
6
2-1-1 建立HTML5網頁-<!DOCTYPE>
<!DOCTYPE>不是HTML標籤，其位置是在<html>標籤之前，可以告訴瀏覽器使用的HTML版本，以便瀏覽器使用正確的引擎來產生HTML網頁內容。
7
2-1-1 建立HTML5網頁-<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是台灣的正體中文等。
8
2-1-1 建立HTML5網頁-<head>標籤
<head>標籤的內容是標題元素，包含<title>、<meta>、<script>和<style>標籤。<meta>標籤可以指定網頁的編碼為utf-8，如下所示： <meta charset="utf-8">
9
2-1-1 建立HTML5網頁-<body>標籤
10
2-1-1 建立HTML5網頁-Ch2_1_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>
11
2-1-2 HTML5的基本語法與共同屬性-語法1 <html>、<head>和<body>標籤都可有可無，XHTML一定需要這些標籤。 元素和屬性不區分英文大小寫，<html>、<Html>、<HTML>都是相同標籤。 元素不一定需要「結尾標籤」（End-Tag），如果是沒有內容的元素，也不需要使用「/>」符號代替結尾標籤，例如：下列標籤都是合法的HTML5標籤，如下所示： <p>這是一個測試</p> <p>這是一個測試 <br> <br/>
12
2-1-2 HTML5的基本語法與共同屬性-語法2 標籤屬性值的引號也是可有可無，例如：下列標籤的屬性都是合法的HTML5屬性，如下所示：
<img src="sample.jpg" width=20 height=30 /> 屬性沒有屬性值，只需使用屬性名稱即可，如下所示： <option selected> <input type="radio" checked> 文字可以單獨存在，並不用位於HTML開始與結束標籤之中。 一些XHTML的屬性已經不再需要，例如：<script>標籤的type屬性和<html>標籤的xmlns屬性等。
13
2-1-2 HTML5的基本語法與共同屬性-共同屬性
說明 id 指定HTML元素唯一的識別名稱，在整頁HTML網頁中的名稱必須是唯一，不能重複 accesskey 指定元素的快捷鍵來取得焦點 class 指定元素套用的樣式類別 dir 指定元素內容的文字方向是從左至右，或從右至左，其值可以是ltr、rtl或auto lang 指定HTML元素使用的語言 style 指定HTML元素套用的局部套用CSS，詳見第3章的說明 tabindex 指定按下tab鍵移動元素取得焦點的順序 title 指定HTML元素的額外資訊
14
2-1-3 <head>標籤 <head>標籤是<html>標籤的子標籤，它是一個容器元素，可以包含標題元素：<title>、<meta>、<script>和<style>等標籤，如下表所示： 標籤 說明 <title> 必須元素，可以顯示瀏覽器視窗上方標題列或標籤頁的標題文字 <meta> 提供HTML網頁的metadata資料，例如：網頁描述、關鍵字、作者和最近修改日期等資訊 <script> 此標籤是用來定義客戶端的腳本程式碼，例如：JavaScript，HTML 4.0版需要指定type屬性；HTML5版可有可無 <style> 此標籤是用來定義HTML網頁套用的CSS樣式 <link> 此標籤是用來連接外部資源的檔案
15
2-2 HTML5的文字編排標籤 2-2-1 標題文字 2-2-2 段落、換行與水平線 2-2-3 標示文字內容 2-2-4 HTML清單
16
2-2-1 標題文字 在HTML網頁的標題文字可以提綱挈領來說明文件內容，<hn>標籤可以定義標題文字，<h1>最重要，依序遞減至<h6>，提供6種不同尺寸變化的標題文字，其基本語法如下所示： <hn>....</hn> ,n=1 ~~ 6
17
2-2-2 段落、換行與水平線-段落與換行 一般來說，HTML網頁的文字內容是使用段落來編排，使用的是<p>標籤，<p>標籤可以定義段落，瀏覽器預設在之前和之後增加邊界尺寸（可以使用CSS的margin屬性來更改），如下所示： <p>JavaScript原為網景公司開發的腳本語言， 提供該公司瀏覽器Netscape Navigator開發互動網頁的功能。</p> 一般來說，在文書處理程式，例如：記事本或Word等，當編輯時按下Enter鍵就是換行或建立新段落，但HTML網頁顯示換行是使用換行標籤（不是建立段落），Enter鍵不會顯示換行編排，如下所示： <br/>
18
2-2-2 段落、換行與水平線-水平線 HTML的<hr>標籤在瀏覽器是顯示一條水平線，但HTML5的<hr>標籤不再只是為了美化版面，而是給予內容上主題分割的意義，可以用來分割網頁內容，如下所示： <h3>HTML</h3> <p>HTML語言是Tim Berners-Lee在1991年建立…</p> <hr/> <h3>JavaScript</h3> <p>JavaScript原為網景公司開發的腳本語言…</p> 上述內容分割成HTML和CSS的定義，使用的就是<hr>標籤。
19
2-2-3 標示文字內容 在HTML網頁的文字內容中，可能有些名詞或片語需要特別標示，如下表所示： 標籤 說明 <b>
<i> 使用斜體字來標示文字，HTML5代表另一種聲音或語調，通常是用來標示其他語言的技術名詞、片語和想法等 <em> 顯示強調文字的效果，在HTML5是強調發音上有細微改變句子的意義，例如：因發音改變而需強調的文字 <strong> HTML 4.x是更強的強調文字，HTML5是重要文字 <cite> HTML 4.x是引言或參考其他來源，HTML5是用來定義產品名稱，例如：一本書、一首歌、一部電影或畫作等 <small> HTML 4.x是顯示縮小文字，HTML5是輔助說明或小型印刷文字，例如：網頁最下方的版權宣告等
20
2-2-4 HTML清單-項目編號（Ordered List）
<ol> <li>項目1</li> <li>項目2</li> ….. </ol> 上述<ol>標籤可以建立項目編號，每一個項目是一個<li>標籤。
21
2-2-4 HTML清單-項目符號（Unordered List）
<ul> <li>項目1</li> <li>項目2</li> ….. </ul>
22
2-2-4 HTML清單-定義清單（Definition List）
<dl> <dt>JavaScript</dt> <dd>客戶端腳本語言</dd> <dt>HTML</dt> <dd>網頁製作語言</dd> </dl> 上述<dl>標籤建立定義清單，<dt>清單定義項目；<dd>標籤描述,項目。
23
2-3 HTML5的圖片與超連結標籤 2-3-1 圖片 2-3-2 超連結
24
2-3-1 圖片 HTML網頁屬於一種「超媒體」（HyperMedia）文件，除了文字內容外，還可以在網頁插入圖片，其基本語法如下所示：
<img src="filename" width="value" height="value" alt="替代文字"/> 上述標籤的src和alt屬性是必須屬性，支援gif、jpg或png格式的圖片檔案。
25
2-3-2 超連結 HTML網頁是一種「超文件」（HyperText），內含超連結可以連結全世界不同伺服器的資源，超連結不僅能夠連接同網站的其他HTML網頁，還可以連接其他網站的網頁，其基本語法如下所示： <a href="URL" target="frame_name">超連結名稱</a> 上述<a>超連結標籤預設在瀏覽器顯示藍色底線字，造訪過的超連結顯示紫色底線字，啟動的超連結是紅色底線字。HTML5超連結不只可以使用<img>子元素建立圖片超連結，我們還可以在<a>元素中使用區塊元素，例如：<h3>，如下所示： <a href=" <h3>Yahoo!奇摩</h3></a>
26
2-4 HTML5的表格與容器標籤 2-4-1 HTML的表格標籤 2-4-2 <div>和<span>容器標籤
27
2-4-1 HTML的表格標籤-基本HTML表格
<table border="1"> <tr> <th id="client">客戶端</th> <th id="server">伺服端</th> </tr> <tr><td colspan="2">Ajax</td></tr> <td headers="client">JavaScript</td> <td headers="server">ASP.NET</td> <td>VBScript</td> <td>PHP</td> </table>
28
2-4-1 HTML的表格標籤-複雜HTML表格
<table border=""> <caption>每月存款金額</caption> <thead> <tr> <th>月份</th> <th>存款金額</th> </tr> </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>
29
2-4-2 <div>和<span>容器標籤-<div>標籤
HTML的<div>標籤可以在HTML網頁定義一個區塊，其主要目的是建立文件結構和使用CSS來格式化群組的元素，如下所示： <div style="color:blue"> <h3>JavaScript</h3> <p>客戶端網頁技術</p> </div> 上述style屬性定義CSS樣式。
30
2-4-2 <div>和<span>容器標籤-<span>標籤
HTML的<span>標籤也是用來群組元素，不過，它是一個單行元素，並不會建立區塊，即換行，如下所示： <p>外國人很多都是<span style="color:lightblue">淡藍色</span>眼睛</p>
31
2-5 HTML5的語意與結構元素 2-5-1 HTML5的語意與結構標籤 2-5-2 使用HTML5的語意與結構標籤
32
2-5-1 HTML5的語意與結構標籤 標籤 說明 <article> 建立自我包含的完整內容成份，例如：部落格或BBS文章
<aside> 建立非網頁主題，但相關的內容片斷，只是有些離題 <footer> 建立網頁或區段內容的註腳區塊 <header> 建立網頁的標題區塊，可以包含說明、商標和導覽 <hgroup> 群組<h1>~<h6>標籤來建立多層次的標題文字，例如：副標文字等 <nav> 建立網頁的導覽區塊，即連接其他網頁的超連結 <section> 建立一般用途的文件或應用程式區段，例如：報紙的體育版、財經版等
33
2-5-2 使用HTML5的語意與結構標籤-說明 HTML4版的<div>標籤只是一般用途的區塊容器，並沒有任何除了將網頁內容分割成區塊之外的語意。 HTML5提供描述頁面內容結構的語意標籤 ：<header>、<section>、<article>、<nav>、<aside>和<footer>，可以讓我們建立擁有自我描述能力的HTML網頁。
34
2-5-2 使用HTML5的語意與結構標籤-圖例 頁面的內容結構是使用HTML5的語意標籤 ：<header>、<section>、<article>、<nav>、<aside>和<footer>來建立，其優點是開發者可以很容易且快速存取指定語意的元素，例如：標題就找<header>標籤。
35
2-5-2 使用HTML5的語意與結構標籤-標籤碼1
<header> <h1>程式設計之家</h1> <nav> <ul> <li><a href="/News/">最新消息</a></li> …… </ul> </nav> </header> <section> <article> <h2>歡迎光臨程式設計之家</h2> <p>…</p> </article> <h2>服務說明</h2> </section>
36
2-5-2 使用HTML5的語意與結構標籤-標籤碼2
<aside> <h2>相關資源網站</h2> <ul> <li><a href="">HTML5教學網站</a></li> … </ul> <p><a href="/Resources/">更多資源</a></p> </aside> <footer> <small>Copyright © 2012 陳會安 版權所有</small> </footer>
37
2-5-2 使用HTML5的語意與結構標籤-執行結果
38
2-6 CSS層級式樣式表 2-6-1 CSS的基本語法 2-6-2 在HTML網頁套用CSS
39
2-6-1 CSS的基本語法-說明 HTML標籤配合CSS樣式能夠針對指定標籤定義全新的顯示樣式，我們只需選擇需要重新定義的HTML標籤，就可以定義所需的顯示樣式。CSS的基本語法，如下所示： Selector {property1: value1; property2: value2} 上述CSS語法可以建立一個樣式規則，分成兩大部分，在大括號前是選擇器（Selector），可以選擇套用樣式的標籤，在括號之中是重新定義顯示樣式的樣式組。樣式組是CSS樣式屬性的集合，能夠指定不同的樣式屬性值。
40
2-6-1 CSS的基本語法-範例 例如：定義<p>標籤的CSS樣式，如下所示： p { font-size: 10pt; color: red; } 上述選擇器選擇<p>標籤，表示HTML網頁所有<p>標籤都套用之後樣式組的樣式，font-size和color是樣式屬性名稱；10pt和red是屬性值，基於閱讀上的便利性，樣式組的樣式都會自成一行。
41
2-6-2 在HTML網頁套用CSS-說明 在HTML網頁套用CSS樣式編排時，我們有三種方式來套用CSS樣式。在實作上，讀者可以考量樣式的影響範圍來決定使用哪一種方法。 例如：整個網站的一致外觀，可以建立外部樣式表檔案；如果只針對幾頁HTML網頁，就是使用內建網頁CSS；對於單獨HTML標籤，請使用局部套用CSS。
42
局部套用的CSS（In-Line Style Sheets）
2-6-2 在HTML網頁套用CSS-1 局部套用的CSS（In-Line Style Sheets） HTML標籤可以使用style屬性定義顯示樣式，其影響範圍僅限於此標籤套用的文字或圖片，通常是使用在<div>和<span>標籤，如下所示： <div style="position:absolute; top:50px; width:130px; height:130px"> … </div>
43
2-6-2 在HTML網頁套用CSS-2 內建網頁的CSS（Embedded Style Sheet） 在<head>區塊可以使用<style>標籤定義內建網頁的CSS樣式，其影響範圍是整頁網頁內容，可以讓我們重新定義HTML標籤，或自訂樣式類別（Classes），如下所示： <style> p { font-size: 10pt; color: red; } </style>
44
2-6-2 在HTML網頁套用CSS-3 外部連接的CSS（External Style Sheet）
如果是針對整個網站的網頁，我們可以使用<link>標籤連接外部樣式表檔案，換句話說，只需建立一個樣式表檔案，就可以套用在網站的所有網頁，輕鬆建立出一致顯示風格的網站外觀。 在建立外部樣式表檔案後，我們就可以套用到現存的HTML網頁，即在<head>區塊使用<link>標籤連接外部樣式表檔案，其基本語法如下所示： <link rel="stylesheet" href="css_file" type="text/css">
45
2-7 CSS選擇器和樣式屬性 2-7-1 選擇器 2-7-2 CSS的樣式屬性
46
2-7-1 選擇器 CSS選擇器 範例 範例說明 .class .test 選擇所有class="test"的元素 #id #name
element p 選擇所有p元素 element, element div, p 選擇所有div元素和所有p 元素 element element div p 選擇所有是div後代子孫的p元素 [attribute] [count] 選擇所有擁有count屬性的元素 [attribute=value] [target=_blank] 選擇所有擁有target="_blank"屬性的元素 [attribute~=value] [title~=flower] 選擇所有元素擁有title屬性且包含"flower" [attribute|=value] [lang|=en] 選擇所有元素擁有lang屬性且屬性值是"en"開頭
47
2-7-2 CSS的樣式屬性 當CSS選擇器選出需要定義的HTML元素後，就可以使用CSS樣式屬性來建立樣式組的樣式規則，以便重新定義HTML標籤的字型、色彩、對齊方式和邊界等顯示外觀。一般來說，CSS樣式屬性可以分成兩大類，如下所示： 版面配置的樣式屬性（Layout Properties）：這些樣式屬性是用來定義網頁元素的位置，例如：邊界、填充和對齊方式等。 格式的樣式屬性（Formatting Properties）：這些樣式屬性是用來定義網頁元素的顯示外觀，例如：字型種類、尺寸和色彩等。
48
2-8 反應式網站設計與Media Queries
2-8-1 反應式網站設計的基礎 2-8-2 CSS3的Media Queries
49
2-8-1 反應式網站設計的基礎-說明 反應（Responsive）本來是指連線Web網站時傳回網頁內容的反應時間，現在所謂的反應式網站（Responsive Website）是指網站可以建立全尺寸的網頁內容，從27吋桌上型電腦到手機螢幕，並且適用不同螢幕解析度從240 X 320到2560 X 1440的網頁內容。 簡單的說，反應式網站設計就是針對不同螢幕尺寸，打造出符合各種使用者需求的網頁內容。在實務上，我們可以針對不同螢幕尺寸建立不同的網頁版面配置，另一種簡單的方式是使用CSS3的Media Queries，可以依據不同平台PC、iPhone、iPad、Android、Blackberry和Window Phone等螢幕尺寸來分別套用不同的CSS樣式來動態調整元素尺寸，以便依據螢幕尺寸來最佳化使用者經驗。
50
基本上，反應式網站設計需要解決的問題，如下所示：
2-8-1 反應式網站設計的基礎-解決的問題 基本上，反應式網站設計需要解決的問題，如下所示： 建立適用桌上型電腦和各種行動裝置的最佳化網站內容。 網站使用者不需拖拉和縮放，就可以最佳化網頁使用經驗。 一個網站可以適用各種不同的上網裝置，能夠大幅降低開發成本。 對於行動裝置來說，不只螢幕尺寸小，其連線速度的頻寬也會因所在位置而有很大的差異，反應式網站設計也需要針對低頻寬建立最佳化的使用經驗。
51
2-8-2 CSS3的Media Queries-語法
CSS3的Media Queries可以指定目標裝置的特定媒體條件來套用不同CSS樣式規則，以反應式網站設計來說，主要是針對螢幕的screen媒體（print媒體可以指定列印樣式），其基本語法如下所示： @media screen and (max-width: 520px) { /* CSS樣式規則 */ } @media開頭的Media Queries指出螢幕條件是screen，and且最大寬度max-width是520px，如果符合螢幕媒體和尺寸條件，就套用大括號的CSS樣式規則。對於PC的瀏覽器視窗來說，就是當使用者調整視窗尺寸小於520px時，就套用大括號的樣式規則。
52
2-8-2 CSS3的Media Queries-手機
假設手機螢幕尺寸寬度小於520px，我們可以使用CSS3的Media Queries套用手機的特殊樣式規則，如下所示： @media screen and (max-width: 520px) { aside ul { list-style: none; } aside ul li a { padding-left: 30px; background: url( .jpg) left center no-repeat;
53
2-8-2 CSS3的Media Queries-平板
假設平板電腦的螢幕尺寸寬度是位在520~768px之間，我們可以使用CSS3的Media Queries套用平板電腦的特殊樣式規則，如下所示： @media screen and (max-width: 768px) and (min-width: 519px) { aside ul li a:before { content: "Hot!"; font-size: 12px; font-style: bold; color: red; }
54
2-8-2 CSS3的Media Queries-PC
假設PC電腦的螢幕尺寸寬度是大於768px，我們可以使用CSS3的Media Queries套用PC電腦的特殊樣式規則，如下所示： @media screen and (min-width: 769px) { aside ul li a:after { content: " ("attr(data-title)")"; font-size: 14px; font-style: bold; color: brown; }
55
2-8-2 CSS3的Media Queries-圖例
Similar presentations
