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