Chapter 13 HTML網頁實作
Download
Report
Transcript Chapter 13 HTML網頁實作
Ch.13 HTML網頁實作
源流與發展
HTML全名為 Hyper Text Markup Language。
西元 1991 年提出。
主要為方便分享資料所設計。
主要顯示文字與超連結。
網頁內的內容皆可以透的 HTML 標準稱為 HTML5過
不同的標籤定義。
最新。
HTML瀏覽器
一般 HTML 網頁皆可透過網頁瀏覽器瀏覽。
目前主流的瀏覽器有
Microsoft Internet Explorer
Mozilla Firefox
Google Chrome
Apple Safari
Opera
HTML 標籤
大部分的標籤都是成雙成對的，有開始標籤，就會
有結尾標籤。如：
<html>…..</html>
<body>….</body>
網頁瀏覽器會將 HTML 轉譯成我們平常所看到的網
頁效果、排版與顏色等。
HTML 網頁架構
基本 HTML 網頁架構：
<!DOCTYPE HTML PUBLIC … >
<html>
<head> … </head>
<body> … </body>
</html>
HTML 網頁內容與標籤
一般網頁起始於 <html>，結尾於</html>。
網頁的主要內容，如表格、圖片、文字、影片與超
連結多媒體內容等，皆必須置於<body>...</body>之
中
<head>…</head> 用來定義網頁文件等訊息，如網頁
的標題等。
HTML 標籤與屬性
每個標籤內可能定義了多個屬性。
<body background=“bg.jpg”>….</body>
background 為 <body> 的屬性之一，代表的是網頁
所使用的背景圖片，而 bg.jpg 為其背景圖片之檔案
名稱。
HTML 標籤
格式化標籤
超連結及圖片標籤
表格標籤
列表標籤
表單標籤
頁框標籤
樣式標籤
Meta標籤
程式標籤
HTML 基本標籤
<!DOCTYPE>
定義文件型態是採用哪個HTML版本
<html>
網頁文件必須包含在<html>標籤內，<html>又包含了
<head>及<body>兩標籤
<body>
網頁文件的主體，
<h1> to <h6>
heading，標題1～6
<p>
paragraph，段落符號，兩段落之間空隔比<br>大
<br />
break，跳行符號
<hr />
horizontal，畫一條水平線
<!--...-->
註解用
HTML 格式化標籤
<b>
<big>
<center>
<cite>
<code>
<em>
<font>
<i>
<pre>
<small>
<strike>
<strong>
<sub>
<sup>
<u>
bold，定義為粗體字
定義為大字體
字體置中
citation，定義為引用字
定義為電腦程式字
emphasis, 定義為句意強調字
定義字型，顏色，字體大小
定義斜體字
preformatted，以事先定好的格式顯示
定義小字體
定義為刪除字
定義為重要性強調字
定義為下標字
定義為上標字
定義為字畫底線
HTML 超連結及圖片標籤
<a>
anchor，定義超連結
<img />
image，定義圖片
<map>
定義地圖
<area />
定義地圖內的區塊
HTML 表格標籤
<table>
定義表格
<caption>
定義表格名稱
<th>
table header，定義表格項目標題
<tr>
table row，定義表格列
<td>
table data，定義表格列內每格的內容
<thead>
table header，定義表格header資訊
<tbody>
table body，定義表格body訊
<tfoot>
table footer，定義表格footer資訊
HTML 列表標籤
<ul>
定義無序號列表
<ol>
定義有序號列表
<li>
定義列表項目
<dl>
定義「定義列表」
<dt>
定義列表項目
<dd>
定義列表說明
HTML 表單標籤
<form>
定義表單讓使用者可以輸入
<input />
輸入控制
<textarea>
文字輸入區
<button>
輸入按鈕
<select>
定義下拉式選單
<optgroup>
定義選項可為群組
<option>
定義下拉式選單之選項
<label>
給輸入元件命名
HTML 頁框標籤
<frame />
定義頁框
<frameset>
定義頁框組
<iframe>
定義內嵌網頁
HTML 樣式及Meta標籤
樣式標籤
<style>
定義文件內的CSS樣式
<div>
division，定義區段，同區段可以使用同樣的樣式
<span>
功能類同div，但是span範圍較小。
Meta 標籤
<title>
定義文件標題
<meta>
定義文件meta資訊，譬如編碼
HTML 程式標籤
<script>
定義網頁內的Javascript程式碼
<applet>
定義內嵌的Java程式碼
<object>
定義內嵌物件
<param />
定義內嵌物件的參數
HTML 編輯軟體-1
純文字編輯。如直接透過任何純文字編輯器，如
Windows 記事本。
透過 W3School TryIt Editor 編輯，並可即時預覽。
HTML好站推薦
標籤與屬性查詢:
(英文網站): http://www.w3schools.com/tags/
(中文網站): http://www.w3school.com.cn/tags/
這兩個網站都有HTML的教程
HTML 編輯軟體-2
利用文書編輯軟體，如大家常用的 Word 編寫網頁內
容與繪製表格等。
編輯完畢後儲存成 html 或 htm 的檔案格式。
由於該類文書編輯軟體並非針對專業網頁製作所設
計，因此若要網頁動態化，或是各種精緻化功能都
會有問題。
HTML 編輯軟體-3
透過專業網頁編輯軟體，方便設計者撰寫 HTML 以
及 Javascript 等語法。
較著名的網頁編輯軟體：
Microsoft FrontPage
Namo WebEditor
Adobe Dreamweaver
Microsoft Expression Web
Kompozer 為免費的網頁開發工具。
HTML Kompozer
13-2 HTML 網頁實作
以 2010 年 4 月 21 日所擷取的淡江大學首頁為例
TKU網頁結構設計分析
網頁結構分析(1) – table標籤
t1-12.jpg (1,2)
t1-11.jpg (1,1)
t1-21.jpg (2,2)
t1-31.jpg (3,2)
t1-22.jpg(2,3)
網頁結構分析(1) – HTML 碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TKU Website Structure</title>
</head>
<body>
<table cellspacing=0 cellpadding=0>
<tr>
<td rowspan=3> <img src="t1-11.jpg"></td>
<td colspan=2> <img src="t1-12.jpg"></td>
</tr>
<tr>
<td> <img src="t1-21.jpg"> </td>
<td> <img src="t1-22.jpg"> </td>
</tr>
<tr>
<td colspan=2> <img src="t1-31.jpg"></td>
</tr>
</table>
網頁結構分析(2) – td 含 table
網頁結構分析(2) – HTML 碼
<table>
<tr>
<td valign="top">
<table>
<tr> <td> <img src="t2-11-1.jpg"> </td> </tr>
<tr> <td> <img src="t2-11-2.jpg"> </td> </tr>
</table>
</td>
<td>
<table>
<tr>
<td valign="top" align="center"> <img src="t2-12-1.jpg"></td>
</tr>
<tr> <td> <img src="t2-12-2.jpg"></td> </tr>
</table>
</td>
<td> <img src="t2-13.jpg"> </td> </tr>
<tr> <td colspan=3> <img src="t2-21.jpg"> </td> </tr>
</table>
網頁結構分析(3) – td 插入影片
網頁結構分析(3) – 找到 td
原 HTML 語法
<tr>
<td valign="top" align="center"> <img src="t2-12-1.jpg"></td>
</tr>
網頁結構分析(3) – HTML 碼
替換為新的 HTML 語法
<tr>
<td valign="top" align="center">
<iframe title="YouTube video player" width="480" height="390"
src="http://www.youtube.com/embed/RechrtUxfQc" frameborder="0"
allowfullscreen></iframe>
</td>
</tr>
<tr>
<td style="color:#0000ff;background-color:#ffccff"><center><h3> 淡江大戲 Part <a href=
"http://www.youtube.com/watch?v=RechrtUxfQc&playnext=1&list=PLA134F7F5E4A537D2"
>[1]</a>
<a href= "http://www.youtube.com/watch?v=MRWX49Furew&feature=related">[2]</a>
<a href= "http://www.youtube.com/watch?v=METhdbL_iMw&feature=related">[3]</a>
<a href= "http://www.youtube.com/watch?v=ZyDbq-lEKTo&feature=related">[4]</a>
<a href=
"http://www.youtube.com/watch?v=NlsrJbVvjaA&feature=related">[5]</a></h3><center>
</td>
</tr>
取得YouTube影片之內嵌碼
網頁 -- 顏色表示法
<td style="color:#0000FF;background-color:#FFCCFF">
顯示在 <td> 格中背景是粉紅底(FFCCFF)，前景
顏色是藍色(0000FF)。這裡顏色是用RGB色彩
三原色表示，R是紅色(Red)，G是綠色(Green)，
B是藍色(Blue)，RGB每種顏色各有256種組合，
十進位數字為00~255，十六進位數字為00~FF。
網頁 – 顏色及RGB值
淡江大學網頁空間
學校針對 100 學年度新生提供的伺服器如
下 Web 伺服器：s00.tku.edu.tw
FTP 伺服器：ftp.s00.tku.edu.tw
學生上傳網頁成功後，瀏覽自己網頁的
URL 為 http://s00.tku.edu.tw/~ID
ID 為學生於淡江大學之學號。
FTP 軟體下載與安裝
至 Google 搜尋 FileZilla，下載後安裝。
FTP 軟體 -- Filezilla 設定
啟動Filezilla，並做好連線設定後，連線登入。
請從選單「檔案」中選「站台管理員」，先輸入站
名名稱(如ftp.s00)
主機名稱100年度大一新生請填寫 ftp.s00.tku.edu.tw，
99年度學生請填寫 ftp.s99.tku.edu.tw，依此類推。
使用者請輸入學號，密碼請輸入學校提供的密碼，
按確認就可以將ftp.s00站台儲存起起來，下一次就
不必再輸入。
設定好了按「連線」登入ftp.s00.tku.edu.tw
FTP 軟體 – Filezilla 畫面
Filezilla 連線TKU 提供之ftp 空間
瀏覽放在TKU網頁空間之網頁
啟動瀏覽器，輸入網址
http://s00.tku.edu.tw/~ID，看看是否能夠看到你
寫的網頁。如果可以就是成功了。
之後如果網頁檔案更新，只要將有更動的檔案
傳入 ftp.s00.tku.edu.tw 即可。
13-3 動態 HTML
CSS 簡介
HTML主要是用標籤來定義文件的結構。
CSS (Cascading Style Sheets) 主要是用來定義HTML
文件要如何顯示。
同一個網頁內容，因為不同的CSS而造成顯示產生差
異。
CSS的基本寫法
每一條 CSS 規則分為選擇器 (Selector) 和宣告
(Declaration) 兩個部分, 其中宣告 (Declaration) 則是
由屬性 (Property) 和值 (Value) 所組成的, 例
如：
CSS的基本寫法
所謂的選擇器是用來選擇這條規則要套用的對象, 例
如我們要設定 <h1> 標籤的字型大小為12點, 顏色為紅
色時, 寫法如下：
CSS的基本寫法
上例中, <h1> 標籤是我們套用的對象, 因此選擇器就
是h1。font-size及color是我們要設定的字型屬性；
12pt 及 red 是分別指定給font-size及color 屬性的值。
當選擇器包含多個宣告時, 請務必使用分號"；" 來區
隔宣告。
CSS的基本寫法
我們也可以同時讓多個選擇器共用相同的宣告, 例如
要把 <h1>、<h2>、<h3>標籤的字型大小都設為12 點：
當有多個選擇器要共用相同的宣告時, 可以合併寫在
一起, 但選擇器要使用逗號 "," 做區隔。
常見定義CSS的三種方式
Inline Styles (行內樣式，在個別標籤中使用style 屬
性)
<p style=“color:sienna;margin-left:20px”>這裡是一段文
字</p>
常見定義CSS的三種方式
Internal Style Sheet (內嵌樣式表，在 < head > 中用 <style
> 標籤定義 CSS)
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("imagesmypic.gif");}
</style>
</head>
常見定義CSS的三種方式
External Style Sheet (外部樣式表，用 <link > 標籤連
結 CSS 檔)
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
CSS 簡介
<body>
<h1>淡江大學</h1>
<hr>
<h2>World Wide Web</h2>
<table border="1" width="100%">
<tbody>
<tr>
<th align="left">Chapter</th>
<th align="left">Title</th>
</tr>
<tr>
<td width="10%">13</td>
<td width="50%">雲端服務</td>
</tr>
<tr>
<td width="10%">14</td>
<td width="50%">智慧型手機</td>
</tr>
</tbody>
</table><br>
<hr>
</body>
CSS 範例
於 <head>…</head> 中加入下列語法
<style type="text/css">
body
{
font-family:"lucida calligraphy",arial,'sans serif';
background-color:#DCDCDC;
color:#8A2BE2;
margin:10px;
}
h1 {font-size:250%;}
h2 {font-size:150%;}
th {background-color:#D3D3D3;}
td {background-color:#FFFAF0A;}
</style>
三種常見的選擇器
The tag Selector (標籤選擇器)
The class Selector (類選擇器)
The id Selector (id選擇器)
類選擇器
html
<h1 class="bluefont">這是第一行</h1>
<p class="right">這是第一行</p>
<p class="center">這是第二行</p>
<p class="bluefont">這是第三行</p>
css
p.right {text-align:right}
p.center {text-align:center}
.bluefont {color:blue}
id選擇器
html
<p id="red">這是第一行</p>
<p id="green">這是第二行</p>
<p id="blue">這是第三行</p>
css
#red {color:red}
#green {color:green}
p#blue {color:blue}
CSS 免費資源
(英文網站): http://www.w3schools.com/css/
(中文網站): http://www.w3school.com.cn/css/
無名小站有針對CSS提供畫面美化的服務，有興趣者
可以去試試看，不僅可以藉此更深入了解CSS的用法，
還可以做出個人風格的網頁來。
動態 HTML 免費資源
DynamicDrive (http://www.dynamicdrive.com/)
13-4 HTML 學以致用
HTML 編輯器- CKEditor
ckEditor(http://ckeditor.com/demo)
CKEditor 編輯畫面
CKEditor 顯示網頁
HTML 編輯器- Blogger
HTML 編輯器- Blogger
Google 問卷客製化
Google 問卷加入HTML編輯
Google 問卷整合HTML
Google 問卷 – Facebook發佈
Google問卷 – 調查結果
Google問卷 – 結果分析