ASP.NET網頁製作徹底研究
Download
Report
Transcript ASP.NET網頁製作徹底研究
第2章 HTML、XML和CSS的
基礎
•
•
•
•
•
•
•
2-1 HTML的基礎
2-2 HTML標籤
2-3 XML文件的基礎
2-4 Cascading Style Sheets
2-5 局部套用的CSS
2-6 內建網頁的CSS
2-7 使用CSS進行絕對位置的編排
2-1 HTML的基礎
• 2-1-1 第一份HTML文件
• 2-1-2 HTML文件的基本架構
• 2-1-3 Meta標籤的使用
2-1-1 第一份HTML文件-1
• 「HTML」（HyperText Markup Language）標
記語言屬於一種文件編排語言，其目的是編排
文件的內容，以便顯示漂亮的文件內容。
• Tim Berners-Lee在1991年建立HTML，在1993
年HTML1.0版由Berners-Lee和Connolly完成，
HTML只是使用SGML的慣用語法，也就是標
籤和屬性，如下所示：
– 「標籤」（Tag）：HTML標籤是一個字串符號，主要是標示
需要套用編排格式的文字內容，在標籤內的文字是使用預設
格式編排。
– 「屬性」（Attribute）：每一個標籤可以擁有一些屬性來定義
文字內容的細部編排。
2-1-1 第一份HTML文件-2
01: <html>
02: <head>
03: <title>Ch2-1-1.htm</title>
04: </head>
05: <body>
06: <b>From: </b>[email protected]<br>
07: <b>To: </b>[email protected]<br>
08: <b>Subject: </b>測試郵件功能<br>
09: <p>這是第一封郵件</p>
10: </body>
11: </html>
2-1-2 HTML文件的基本架構
• HTML文件標籤的基本架構，如下所示：
<html>
標示著一份HTML網頁
<head> HTML網頁的基本定義
</head>
<body> HTML網頁的內容
</body>
</html>
• HTML文件是包含於<html>和</html>標籤間的
內容和定義，其中<head>和</head>標籤包圍的
區塊定義HTML網頁的本身，網頁內容是定義
在<body>和</body>標籤間。
2-1-3 Meta標籤的使用
• <meta>標籤是位在<head>區塊，可以用來定義
HTML標籤所沒有定義的相關資訊，常用的應
用如下所示：
– 設定使用的編輯工具
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
– 設定網頁使用的語系
<meta http-equiv="Content-Type" content="text/html;
charset=big5">
– 自動更新網頁內容
<meta http-equiv="refresh" content="10,url=UsersList.aspx">
2-2 HTML標籤
•
•
•
•
•
•
•
2-2-1 HTML的標頭標籤
2-2-2 文字格式標籤
2-2-3 清單項目標籤
2-2-4 圖片和超連結標籤
2-2-5 網頁表格標籤
2-2-6 網頁表單標籤
2-2-7 框架頁標籤
2-2-1 HTML的標頭標籤
標籤
說明
<title>…</title> 網頁標題，顯示在瀏覽程式的標題列
<base>
指定基底的 URL 網址
<meta>
設定伺服端或客戶端所需的識別資訊
<link>
連結其它網頁，例如：CSS 外部樣式表檔案
2-2-2 文字格式標籤-1
標籤
說明
<hn>…</hn>
顯示粗體的標題文字，n 的值是 1~6，表示不同
的尺寸，愈小愈大
<b>…</b>
粗體字
<i>…</i>
斜體字
<u>…</u>
底線字
<s>…</s>
刪除線，在文字中間有一條線
<strike>…</strike>
刪除線，另一種刪除線
2-2-2 文字格式標籤-2
<sub>…</sub>
下標字
<sup>…</sup>
上標字
<tt>…</tt>
打字機字體
<big>…</big>
放大字體的字型
<address>…</address> 使用地址的字體
<small>…</small>
縮小字體的字型
<center>…</center>
文字內容是置中對齊
2-2-2 文字格式標籤-3
<blink>…</blink>
閃爍字
<font>…</font>
使用 face、size 和 color 屬性設定編排使用的字
體、尺寸和色彩
<basefont>
指定網頁的基本字型
<br>
強迫文字換行
<hr>
插入一條水平線
<p>…</p>
使用文字段落編排
2-2-3 清單項目標籤
標籤
說明
<ul>…</ul>
項目符號
<ol>…</ol>
項目編號
<dl>…</dl>
定義式清單
<menu>…</menu> 選單式清單
<dir>…</dir>
目錄式清單
<lh>
清單標題
<li>
清單項目
<dt>
定義式的項目名稱
<dd>
定義式的項目說明
2-2-4 圖片和超連結標籤
標籤
說明
<a>…</a>
在網頁插入超連結
<img>
在網頁插入圖片
<bgsound>
在網頁插入背景音樂
<embed>
在網頁插入 MIDI 音樂檔
<marquee>…</marquee> 跑馬燈文字
2-2-5 網頁表格標籤
標籤
說明
<table>…</table>
網頁表格
<tr>…</tr>
表格中的一列
<td>…</td>
表格中的一個儲存格
<caption>…</caption> 表格標題
2-2-6 網頁表單標籤
標籤
說明
<form>…</form>
建立表單
<input type=…>
表單輸入或選擇資料的表單欄位，包含按鈕、
文字方塊、選擇鈕和核取方塊欄位，不同 type
屬性表示不同的欄位
<select>…</select>
清單方塊或下拉式清單方塊
<option>…</option>
清單方塊的選項
<textarea>…</textarea> 文字區域
2-2-7 框架頁標籤
標籤
說明
<frameset>…</frameset>
設定網頁是一頁框架頁
<frame>
框架頁的框架分割，可分為上下或左右分割
<iframe>
網頁的內置框架，可以直接在網頁插入所需
的框架
<noframes>…</noframes> 不支援框架的瀏覽程式顯示的網頁內容
2-3 XML文件的基礎
• 2-3-1 什麼是XML
• 2-3-2 XML文件的組成
2-3-1 什麼是XML-1
• 「XML」（eXtensible Markup Language）可擴
展標示語言屬於一種標籤語言，XML 1.0版規
格在1998年2月正式推出，XML的寫法十分類
似HTML，繼承SGML自定標籤的優點，並且
刪除一些SGML複雜的部分，在功能上能夠補
足HTML標籤的不足，而擁有更多的擴充性。
• XML並不是用來編排內容，而是用來描述資料，
它並沒有如同HTML一般的預設標籤，使用者
需要自己定義描述資料所需的各種標籤。
2-3-1 什麼是XML-2
01: <?xml version="1.0" encoding="Big5"?>
02: <!--網頁製作徹底研究系列-->
03: <booklist>
04: <book>
05:
<code>F8915</code>
06:
<title>ASP網頁製作徹底研究</title>
07:
<authorlist>
08:
<author>陳會安</author>
09:
</authorlist>
10:
<price>580</price>
11: </book>
12: <book>
13:
<code>F8916</code>
14:
<title>ASP與IIS 4/5網站架設徹底研究</title>
15:
<authorlist>
16:
<author>陳會安</author>
17:
</authorlist>
18:
<price>550</price>
19: </book>
20: </booklist>
2-3-2 XML文件的組成
• XML文件基本上是由標籤和內容組成，
一共七種組成的元素可以出現在XML文
件中。
–
–
–
–
–
–
–
元素（Element）
屬性（Attribute）
實體參考（Entity Reference）
註解（Comment）
CDATA區塊（CDATA Section）與PCDATA
PI（Processing Instructions）
DTD（Document Type Declarations）
2-4 Cascading Style Sheets
• 2-4-1 CSS的基礎
• 2-4-2 CSS的基本語法
• 2-4-3 常用的CSS樣式屬性
2-4-1 CSS的基礎-1
• 「Cascading Style Sheets」簡稱CSS，中
文稱為層級式樣式表，CSS層級式樣式表
是一種樣式語言，能夠定義HTML標籤
的顯示效果。
• 瀏覽程式在解譯HTML標籤時是使用預
設顯示樣式，例如：<p>標籤是段落、
<ul>為清單項目，CSS能夠重新定義標籤
的顯示樣式。
2-4-1 CSS的基礎-2
• 如果想在網頁上使用CSS編排網頁內容，
一共有三種方式，如下所示：
– 局部套用的CSS（In-Line Style Sheets）。
– 內建網頁的CSS（Embedded Style Sheet）。
– 外部連結的CSS（External Style Sheet）。
2-4-2 CSS的基本語法
• CSS能夠針對指定標籤定義全新的樣式，
其基本語法如下所示：
Selector {property1: value1; property2: value2 }
• 選擇器Selector選擇樣式套用的標籤，大
括號括起的樣式組，就是重新定義的標
籤樣式，例如：前面的<p>標籤，如下所
示：
p { font-size: 10pt;
color: red; }
2-4-3 常用的CSS樣式屬性
• 在選擇好定義的標籤後，可以定義CSS，CSS
常用的樣式屬性分類成幾大類。
– 字型的樣式屬性
• 文字內容顯示的字型效果屬性
– 色彩和背景樣式屬性
• 標籤內容的顯示和背景色彩屬性
– 文字樣式屬性
• 文字內容的顯示屬性包含對齊、字距的屬性
– 區塊樣式屬性
• 文字內容顯示的區塊，這也包含外框顯示的屬性
– 絕對位置的樣式屬性
• 絕對位置編排，也就是可以顯示在指定的位置
2-5 局部套用的CSS
• 局部套用的CSS是直接在標籤使用style屬
性定義樣式，常用的HTML標籤有<div>、
<a>、<span>和<p>。
<div style="color: green; font-size: 24pt; margin-left: 5px">
<div style="position:absolute; top:40px; width:130px;
height:130px">
2-6 內建網頁的CSS
• 2-6-1 重設HTML標籤樣式
• 2-6-2 重新設定超連結標籤的樣式
• 2-6-3 自訂樣式名稱
2-6-1 重設HTML標籤樣式
• CSS能夠重新定義HTML標籤顯示的編排樣式，內建網
頁的CSS是將樣式定義在<body>標籤前的<style>標籤，
如下所示：
<style type="text/css">
body { font-size: 9pt;
font-family: 標楷體;
line-height: 120%;
}
span {text-transform: uppercase}
p
{ font-size: 12pt;
color: yellow;
background-color: blue;
line-height: 20px;
}
</style>
2-6-2 重新設定超連結標籤的樣
式
• 網頁超連結的顯示狀態分為多種情況，
不同狀態的超連結樣式需要分別定義，
如下所示：
<style type="text/css">
a:link {font-size: 9pt; text-decoration: none}
a:active {font-size: 9pt; text-decoration: none}
a:visited {font-size: 9pt; text-decoration: none}
a:hover {font-size: 15pt; text-decoration: underline}
</style>
2-6-3 自訂樣式名稱
• CSS允許使用者在網頁定義個人風格的樣
式名稱，樣式名稱是一個Class，以「.」
句點開始的名稱定義在<style>標籤，如
下所示：
.littlered {color: red; font-size: 9pt}
.littlegreen {color: green; font-size: 9pt}
• HTML標籤使用class屬性指定樣式名稱，
在標籤套用定義的樣式，如下所示：
<font class="littlered">Style</font>
2-7 使用CSS進行絕對位置的編
排
• CSS擁有絕對位置的定位能力，能夠讓您隨心
所欲的編排網頁元素，如下所示：
.titlered {
position: absolute;
top: 100pt;
left: 50pt;
visibility: visible;
z-index: 1;
background-color: blue;
color: yellow;
font-size: 19pt;
}
• 樣式使用絕對位置顯示元素，即absolute，其位
置是離上方邊界100像素，左邊50像素的位置。