CH03 全球資訊網

CH03 全球資訊網認識全球資訊網

認識Web 商務

認識 HTML 網頁設計

3-1 認識全球資訊網

WWW(World Wide Web) 念為 triple W 、 W3 或 3W 採用 HTTP(HyperText Transfer Protocol) 通訊協定

包含了聲音、文字、影像、圖片等多樣化的介面。由全球大大小小的網站 (Web Site) 組成

WWW

要連接上網際網路，都必須向 ISP(Internet Service Provider) 業者申請網路服務。

ISP 業者，主要分為以電信電路的 ADSL 系統和有線電視為主的 Cable 系統兩類。台灣最大的 ISP 服務業者為 Hinet

ISP

URL( 全球資源定位器 ) 就是一般所稱的網址用來指出一個網頁所在的 WWW 伺服器主機位置和存

取的方式。由四個部分組成

① 通訊協定② 網頁所在主機名稱③ 存放路徑④ 網頁名稱

URL

URL

通訊協定說明http:// 連線至全球資訊網ftp:// 檔案傳輸協定mailto:// 寄送 Email 給使用者telnet:// 遠端連線至某一伺服器主機news:// 新聞群組

常見的通訊協定

Domian Name System(DNS, 網域名稱系統 ) 主要用來做網址和 IP 位置之間的轉換動作

DNS 被提出前，使用 Host File( 主機檔案 ) 做為網址和 IP的對應

DNS

IP 位址和網址的對應使用多台 DNS 伺服器處理

DNS 系統採用樹狀階層式的架構來管理完整網域名稱。可分為四層 :① 根網域② 頂層網域③ 第二層網域④ 主機

DNS 架構

根網域 DNS 架構的最上層其下任何一層網域 ( 頂層網域、第二層網域、主機 ) 皆可

向其要求資源

頂層網域共有兩種命名方式 :

① ccTLD(Country Code Top Level Domain)

② gTLD(Generic Top Level Domain)

ccTLD 以 [ 國碼 ] 為命名方式美國以外的國家通常採用此方式命名依 ISO 3116 所制訂的 [ 國碼 ](country code) 作為區分，

例： tw 表示台灣、 jp 表是日本、 cn 表示中國、 ca 表示加

gTLD 以組織性質為命名方式例 : com 表示公司行號、 edu 表示教育單位

命名方式之種類

通常第二層網域會開放給一般大眾自由申請，而名稱則由申請者自訂

此層網域名稱必須是唯一，不能重複

[.com.tw] 、 [.edu.tw] 、 [.tku.edu.tw] 等皆屬於第二層網域

第二層網域

DNS 架構最底層

由各網域的管理員自行建立，不需向管理機構註冊。

主機

Proxy( 代理伺服器 ) 為一種網路服務允許用戶端透過它與另一個網路服務進行非直接的連線，也

稱「網路代理」

提供 Proxy 服務的電腦稱為代理伺服器 (Proxy Server)

Proxy

① 與代理伺服器建立連線② 向伺服器發出請求，要求目標網頁的檔案資源③ 伺服器回傳資料

Proxy 之運作方式

Proxy 的優點由於在代理伺服器中會留有之前使用者對網站所要求的資料

的備份，因此使用 Proxy 服務，在所要求的目標網頁有其他使用者瀏覽過時，可加快網頁瀏覽速度

用來瀏覽 WWW 上各類網站的軟體

最早的瀏覽器是 Netscape ，之後各式各樣的瀏覽器便紛紛出現

微軟的 Internet Explore(IE) 瀏覽器於 1995 年發表

瀏覽器

各瀏覽器全球市佔率

各大瀏覽器全球市佔率圓餅圖 ( 資料來源： StatCounter)

Google Chrome

又稱 Google 瀏覽器 Google 公司基於其他開放原始碼 (OpenSource) 的軟體所

開發的網頁瀏覽器。

以穩定性、速度和安全性做為 Google Chrome

開發目標

Apple Safari

蘋果公司所開發的網頁瀏覽器

特色 :

以自行研發的 WebKit 技術來進行網頁排版及執行 JavaScript

iPhone 、 iPad 等蘋果公司系列產品指定瀏覽器

Apple Safari

Apple Safari 瀏覽器畫面

Microsoft Internet Explore

Microsoft Internet Explorer ，簡稱 IE 。微軟公司所開發的網頁瀏覽器由一款商業性的專利網頁瀏覽器 Spyglass Mosaic 衍生出

來。

從 Inter Explore 4.0 開始，與微軟所開發的作業系統綁定販售

由於和微軟所開發的作業系統綁定，目前仍是全球市佔率最高的瀏覽器

Firefox

一般稱做火狐瀏覽器，最初叫做 Phoenix 。目前全球市場占有率第二高的瀏覽器

由 Mozilla 基金會從MozillaApplication Suite 獨立出來，採用開放原始碼

Opera

為 Opera Software ASA 公司所開發

Opera 瀏覽器能適用於各種平台與作業系統包含 Mac 、 PC 、 Linux 、 PDA 、手機甚至在遊戲機上

在手機平台上，是目前市場佔有率最大的行動瀏覽器之一。

在個人電腦上的市佔率，則不及 IE 、 Firefox 、 Chrome 三大主流瀏覽器。

CH09 全球資訊網

Google Search

目前搜尋引擎的龍頭由史丹佛大學的兩位博士生於 1998創立除了一般輸入關鍵字搜尋外，還有多種進階搜尋方法


Google Search 進階搜尋

搜尋同時擁有關鍵字 A 和關鍵字 B 的資料例 : 關鍵字 A+ 關鍵字 B

關鍵字 A[空格 ] 關鍵字 B

關鍵字 A AND 關鍵字 B 注意 :

① AND 一定要是大寫，輸入小寫會被 google視為一般關鍵字

AND 或 + 或空格



搜尋擁有關鍵字 A 或關鍵字 B 的資料例 : 關鍵字 A OR 關鍵字 B 注意 :

① OR 一定要是大寫，輸入小寫會被 google視為一般關鍵字

OR



例 : 關鍵字 A - 關鍵字 B 注意 :

① 減號” -” 和關鍵字 B 之間不能有空格② 減號“ -” 為英文字半型符號

- ( 減號 ) 搜尋擁有關鍵字 A 但排除關鍵字 B 的資料



針對某網站的資源進行進行搜尋例 : 關鍵字 Asite:tku.edu.tw 注意 :

① OR 一定要是大寫，輸入小寫會被 google視為一般關鍵字② 關鍵字和 site 之間可不需空格③ 冒號” :” 之後不能有空格，不然 site 會被視為一般關鍵字

site: 網址



限制搜尋特定檔案類型例 : 關鍵字 Afiletype:pdf 注意 :

① 關鍵字和 filetype 之間可不需空格② 冒號” :” 之後不能有空格，不然 filetype 會被視為一般關鍵

字

filetype:



搜尋數字範圍例 : 想要找 iphone ，且價格在 18000~22000 之間。可輸入 iphone[空格 ]$18000..$23000 注意 :

① 必須指定數字範圍所代表的單位，如 :$ 、 kg

.. ( 兩個點 )



查詢專有名詞或片語例 : 想找出包含 Well begun is half done 完整句子的網頁可輸入 “Well begun is half done” 注意 :

① 雖然一般搜尋也會將整句關鍵字列於搜尋結果中，但有時由於字與字之間的空格。所以可能會被 google 是為好幾個分開的字詞。而無法搜出完整句子。因此可用此語法搜尋

“ ” ( 雙引號 )


電子郵件

電子郵件 (Electronic Mail,e-mail) ，利用電子通訊的技術，來達到傳遞信件的目的。

可利用各種的電子郵件軟體 ( 例 :Outlook Express 、Eudora ) ⋯ 或使用各家業者所提供的 Web mail 服務，寄送 email 。


電子郵件格式

電子郵件地址的標準格式為 : username@hostname

username 為使用者帳號 hostname 為郵件伺服器位址 @ ，英文上為 at 的意思，通常念為 at 或小老鼠


電子郵件通訊協定

使用電子郵件作收信和送信的動作各會使用到不同的通訊協定


Email 運作流程圖

A 的電腦 B 的 Mail Server B 的電腦A 的 Mail Server

SMTP SMTP Access Protocol

SMTP: delivery/storage to receiver’s serverMail access protocol: retrieval from server

POP: Post Office Protocol [RFC 1939] authorization (agent <-->server) and

download IMAP: Internet Mail Access Protocol [RFC

1730] more features (more complex) manipulation of stored msgs on server

HTTP: gmail, Hotmail, Yahoo! Mail, etc.


Web Mail

傳統一般使用 Outlook 等 Email 軟體收發電子郵件郵件必須下載至本機電腦才可瀏覽內容，長時間累積將造成儲存空間的浪費

目前一般使用 WWW 上的 Web mail 服務使用瀏覽器即可直接在網頁上瀏覽郵件內容


常見 WWW 上 Web Mail 服務

3-2 Web 商務

41

Web 也就是我們平常所稱的 WWW(World Wide Web ，全球資訊網 )

一般依照網頁類型和網頁內容的提供者，可分為 Web1.0 和Web2.0

Web2.0

42

Web 1.01.靜態網頁，與網頁內容提供者或其他瀏覽網頁的訪客叫無互動。2. 網頁內容為網站經營者所提供。

Web 2.01. 動態網頁，網路使用者之間互動頻繁2. 所有使用者成為網路內容的提供者，以使用者為中心。

Web2.0

43

目前常見的各種社群網站皆為 Web2.0 的典型應用ex: Wiki 、 Blog 、 Facebook 、 Google+ 、 Plurk 、 Twitter ...

等。

Web2.0

44

Wiki 是一種在網路上開放、可供多人協同創作的文字系統。使用 Wiki 系統的網站稱為 Wiki 網站

例 : 維基百科

維基百科是一個動態的、可自由存取和編輯的線上百科全書

世界網站流量排名第七大網站與第一大無廣告網站。

維基百科Wikipedia

45

特色 :1. 大部分頁面都可以由任何人使用瀏覽器進行閱讀和修改2. 由於內容修改自由度高，使用者對於其內容之準確性產生質疑

維基百科有管理員負責對使用者發佈的內容進行審核

維基百科Wikipedia

46

部落格，由英文 Blog 而來是 web log 的組合字

使用者可在其部落格上發表文章、相片、影音 ... 等內容利用留言、回應等各種方式與部落格的訪客互動部落格撰寫者稱為部落客 (blogger)

部落格

已成為一種社會媒體，具一定影響力

RSS(Really Simple Syndication 或 Rich Site Summary)

1.部落格使用的一種技術2. 訂閱該部落格的 RSS ，可取得部落格的更新訊息

47

於目前網路上有許多網站都有提供免費申請個人部落格的服務例 :無名小站、 Google 的 Blogger 、痞客邦 PIXNET 、 yam 天空部落 ... 等

部落格

48

常見部落格服務提供網站

49

Twitter ，中文稱為推特。是國外的一個微網誌服務

Twitter ，英文表示「很弱的脈衝訊號」與「小鳥的啁啾」

多平台閱讀與發文可透過即時通訊、 SMS 、 RSS 、電子郵件等各種方式來發佈訊息

Twitter

50

Plurk ，中文稱為噗浪。與 Twitter同為一種微網誌服務 Plurk 目前在臺灣較為流行，市場佔有率遠高於 Twitter

特色 :plurk 使用時間軸的方式在一條時間軸上顯示了自己和朋友的所有訊息。

Plurk

Plurk 提供時間軸、背景的主題，供使用者套用，也支持使用CSS 來修改背景主題。

Karma值 Plurk 使用者的使用率和發言頻率的指標

51

Facebook ，中文稱作臉書屬於一種社群網站服務

可在 Facebook 上發佈訊息、照片、影片、寫網誌、聊天

可建立社團、紛絲專頁等加強使用者之間的互動性

CH10 Web 商務

Facebook

52

塗鴉牆(1)Facebook 的主要使用者介面(2) 與傳統留言板相似(3) 使用者只要在自身的塗鴉牆上發布訊息，就會同步顯示在所有好友的塗鴉牆上

Facebook

好友搜尋功能 : Facebook具有強大的好友搜尋功能可經由 MSN 、 Yahoo即時通、 Skype 等好友名單找出有使

用 Facebook 的人可經由共同朋友或個人資本資料找出可能認識的人

53

微軟於 2011 年 10 月正式將 Skype 收購，成為微軟的一個獨立部門。並於 2013 年 4 月 25 日 ( 台灣地區 ) 將MSN 正式轉換到 Skype 。

Skype

54

Web2.0 下社群網站出現，網路社群之間訊息交換快速。可做為散布消息、發起活動的有效工具

行銷方式改變，廣告成本降低企業使用部落格，社群網站等網路行銷方式推廣產品

Web 2.0 的影響

55

Web 商務，也稱做電子商務 (E-commerce)

指企業或個人透過網際網路從事商業活動或各種相關服務。

包含下列 4 大領域 : 資訊科技商業服務管理科學法律政策

Web 商務

56

全球性潛在市場龐大成本低豐富性互動性速度快自由競爭

電子商務的優點

57

依照企業、個人、政府在電子商務中的供給者和消費者的關係，將電子商務分為四大類 B2C B2B C2C B2G

Web 商務的種類

58

B2C ，英文 Business-to-Consumer 企業對消費者的電子商務模式

線上購物、線上訂票 ... 等皆屬於 B2C ，是我們最常接觸的一塊

B2C

企業使用線上商店的方式進行經營，較傳統具有許多優勢不須實體店面節省成本無須聘請門市人員顧店營業時間無限制商品價格較便宜

59

知名的 B2C 網站有 PChome 網路購物、 Yahoo! 奇摩購物中心、博客來網路書店 ... 等。

B2C

60

B2B ，英文 Business-to-Business

是企業對企業的商務行為將企業之間的金流、物流 ... 等，透過網路連結

提升企業對消費者的反應速度和企業發展

B2B

當消費者在網路下訂單後，供應商、製造商、經銷商等各家公司廠商分工合作，將商品順利出貨，送達消費者手中。

61

消費者下單後的 B2B流程如下消費者下單銷售商向供貨商查詢庫存供貨商回報查詢結果銷售商詢問送貨商可運送時間日期送貨商回報時間日期銷售商向供貨商請求出貨、通知送貨商送貨款項結算交易完成

B2B

62

C2C ，英文為 Consumer-to-Consumer 消費者對消費者的電子商務模式

提供消費者之間的交易平台

交易平台的供應商在 C2C 中扮演重要角色，維持交易公平性和提供安全的交易環境

C2C

63

交易平台的供應商應提供下列服務負責監督管理交易進行，保障消費者權益提供技術支援 :

幫助建立線上商店提供付款機制幫助買方搜尋商品線上比價

C2C

64

典型的 C2C 網站，也就是交易平台的供應商 Yahoo! 奇摩拍賣、露天拍賣、 ebay... 等。

C2C

65

B2G ，英文為 Business-to-Government 企業跟政府間的電子商模式電子報稅等皆屬於 B2G 的範疇

目前的 E 化政府，為一個典型 B2G 的實現政府和各級單位、民間機構。透過網路完成各種服務

B2G

66

透過網路完成各種業務。速度快、減少相關事務處理的花費時間與金錢

具下列優點1. 加強民意反應與接觸2.增加政府與民眾互動3. 公文電子化使處理流程透明4.紙張減量5. 透過網路可 24 小時服務6.節省成本

E 化政府

67

行動商務，或稱為 m-commerce 、 mobile commerce

透過手機、平板電腦或其他可攜式裝置與網路連線，進行通訊與交易等活動

提高工作效率、降低營運成本、提供客戶即時服務

行動商務

依服務對象分為兩類 : 1. 個人服務 (customer service) 2.企業服務 (business service)

68

個人服務 : 遊戲下載音樂下載生活情報路況氣象或新聞查詢股市基金交易

行動商務

企業服務 : 行動會議行動工作行動供應鏈管理

69

行動商務的產品或服務應具備下列特點：時效性

如新聞、氣象、即時路況適地姓

如訂機票、火車票、電影票、旅館、景點導覽娛樂性

如遊戲下載、音樂下載

行動商務

70

電子商務的交易皆在網路上進行。需要有可靠的網路交易機制支持

常見的網路付款機制電子現金電子支票智慧卡

付款系統

71

電子現金 (e-cash) ，又稱做電子錢包 (e-Wallet) 數位簽章為基礎

使用前需向銀行或金融機構開戶、存入金錢

消費時使用銀行提供的公鑰進行加密，店家將加密後訊息金額傳送給銀行完成扣款和交易動作

電子現金

目前較為成熟的電子現金為 Mondex

英國西敏寺銀行創立台灣的 Mondex 卡由 Mondex Asia 、宏碁、萬事達卡國際組織

成立的萬碁股份有限公司所發行

72

與傳統支票相同的部分包含付款人姓名、金融機構、帳戶及收款人姓名、金額、到期日

需先向發行電子支票的金融機構開戶註冊

電子支票

73

消費者向發行智慧卡金融機構預先支付金額，再由金融機構香等值的金額資訊儲存在消費者持有的儲值卡或預付卡中

手機的 sim 卡、捷運悠遊卡、銀行的金融 IC 卡、健保 IC 卡、7-11 便利商店的 icash 皆屬於智慧卡

智慧卡

74

無論使用何種網路付款機制，都需配合各種加密或認證技術來確保交易的安全進行

一般常見的加密技術加密演算法• 對稱式• 非對稱式

數位簽章安全通訊協定 (SSL) SET

線上交易安全機制

75

加密演算法，共可分為兩類：對稱式密碼系統和非對稱式密碼系統

都需要金鑰做加解密工具

金鑰為一串數字，由數個位元 (byte) 所組成

加密演算法

76

數位簽章 (Digital Signature) ，又稱為電子簽章

主要是用於確認某項訊息的送出者的身分

需利用 [ 非對稱式密碼系統 ] 技術實現

訊息量較大時，會先透過 Hash( 雜湊函數 ) 運算，將資料轉換為較短的摘要

數位簽章

77CH10 Web 商務

安全通訊協定 (SSL)

78

SET ， Secure Electronic Transaction 的縮寫，中文稱為安全電子交易

為VISA 、 MasterCard 、 IBM 、 Microsoft 、 GTE 、 VeriSign ⋯等公司在 1996 年聯合制訂

SET

3-3 HTML 網頁設計

全名為 Hyper Text Markup Language 。西元 1991 年提出。主要為方便分享資料所設計。主要顯示文字與超連結。網頁內的內容皆可以透過不同的標籤定義。最新的 HTML 標準稱為 HTML5 。

源流與發展

一般 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 標籤與屬性

<!DOCTYPE> 定義文件型態是採用哪個 HTML 版本

<html>網頁文件必須包含在 <html> 標籤內， <html> 又包含了 <head> 及 <body> 兩標籤

<body> 網頁文件的主體，

<h1> to <h6> heading ，標題 1 ～ 6

<p> paragraph ，段落符號，兩段落之間空隔比 <br> 大

<br /> break ，跳行符號

<hr /> horizontal ，畫一條水平線

 註解用

HTML 基本標籤

HTML 格式化標籤<b> bold ，定義為粗體字<big> 定義為大字體<center> 字體置中<cite> citation ，定義為引用字<code> 定義為電腦程式字<em> emphasis, 定義為句意強調字<font> 定義字型，顏色，字體大小<i> 定義斜體字<pre> preformatted ，以事先定好的格式顯示<small> 定義小字體<strike> 定義為刪除字<strong> 定義為重要性強調字<sub> 定義為下標字<sup> 定義為上標字<u> 定義為字畫底線

<a> anchor ，定義超連結

<img /> image ，定義圖片

<map> 定義地圖

<area /> 定義地圖內的區塊

HTML 超連結及圖片標籤

HTML 表格標籤<table> 定義表格

<caption> 定義表格名稱

<th> table header ，定義表格項目標題

<tr> table row ，定義表格列

<td> table data ，定義表格列內每格的內容

<thead> table header ，定義表格 header 資訊

<tbody> table body ，定義表格 body 訊

<tfoot> table footer ，定義表格 footer 資訊

<form> 定義表單讓使用者可以輸入

<input /> 輸入控制

<textarea> 文字輸入區

<button> 輸入按鈕

<select> 定義下拉式選單

<optgroup> 定義選項可為群組

<option> 定義下拉式選單之選項

<label> 給輸入元件命名

HTML 表單標籤

<frame /> 定義頁框

<frameset> 定義頁框組

<iframe> 定義內嵌網頁

HTML 頁框標籤

<style> 定義文件內的 CSS 樣式

<div> division ，定義區段，同區段可以使用同樣的樣式

<span> 功能類同 div ，但是 span 範圍較小。

HTML 樣式及Meta 標籤

Meta 標籤

<title> 定義文件標題

<meta> 定義文件 meta 資訊，譬如編碼

樣式標籤

<script> 定義網頁內的 Javascript 程式碼

<applet> 定義內嵌的 Java 程式碼

<object> 定義內嵌物件

<param /> 定義內嵌物件的參數

HTML 程式標籤

純文字編輯。如直接透過任何純文字編輯器，如 Windows 記事本。

透過 W3School TryIt Editor 編輯，並可即時預覽。

HTML 編輯軟體 -1

利用文書編輯軟體，如大家常用的 Word 編寫網頁內容與繪製表格等。

編輯完畢後儲存成 html 或 htm 的檔案格式。

由於該類文書編輯軟體並非針對專業網頁製作所設計，因此若要網頁動態化，或是各種精緻化功能都會有問題。


透過專業網頁編輯軟體，方便設計者撰寫 HTML 以及 Javascript 等語法。

較著名的網頁編輯軟體：Microsoft FrontPage

Namo WebEditor

Adobe Dreamweaver

Microsoft Expression Web Kompozer 為免費的網頁開發工具。


HTML Kompozer

TKU 網頁結構設計分析

網頁結構分析 (1) – table 標籤

t1-11.jpg (1,1)

t1-12.jpg (1,2)

t1-21.jpg (2,2) t1-22.jpg(2,3)

t1-31.jpg (3,2)

<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>

網頁結構分析 (1) – HTML 碼

網頁結構分析 (2) – td 含 table

<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>

網頁結構分析 (2) – HTML 碼

網頁結構分析 (3) – td 插入影片

網頁結構分析 (3) – 找到 td

<tr> <td valign="top" align="center"> <img src="t2-12-1.jpg"></td> </tr>

原 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>

網頁結構分析 (3) – HTML 碼替換為新的 HTML 語法

取得 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 為學生於淡江大學之學號。

淡江大學網頁空間

http://s00.tku.edu.tw/~ID

至 Google 搜尋 FileZilla ，下載後安裝。

FTP 軟體下載與安裝

啟動 Filezilla ，並做好連線設定後，連線登入。請從選單「檔案」中選「站台管理員」，先輸入站名名

稱 (如 ftp.s00) 主機名稱 100 年度大一新生請填寫 ftp.s00.tku.edu.tw ，

99 年度學生請填寫 ftp.s99.tku.edu.tw ，依此類推。使用者請輸入學號，密碼請輸入學校提供的密碼，按確

認就可以將 ftp.s00 站台儲存起起來，下一次就不必再輸入。

設定好了按「連線」登入 ftp.s00.tku.edu.tw

FTP 軟體 -- Filezilla 設定

ftp://ftp.s00/

FTP 軟體 – Filezilla 畫面

Filezilla 連線 TKU 提供之 ftp 空間

瀏覽放在 TKU 網頁空間之網頁啟動瀏覽器，輸入網址 http://s00.tku.edu.tw/~ID，看看是否能夠看到你寫的網頁。如果可以就是成功了。

之後如果網頁檔案更新，只要將有更動的檔案傳入 ftp.s00.tku.edu.tw 即可。

http://s00.tku.edu.tw/~ID

ftp://ftp.s00.tku.edu.tw/

HTML 主要是用標籤來定義文件的結構。 CSS (Cascading Style Sheets) 主要是用來定義 HTML

文件要如何顯示。同一個網頁內容，因為不同的 CSS 而造成顯示產生差異。

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 簡介

CSS 範例<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>

於 <head>…</head> 中加入下列語法

http://www.w3school.com.cn/css/

無名小站有針對 CSS 提供畫面美化的服務，有興趣者可以去試試看，不僅可以藉此更深入了解 CSS 的用法，還可以做出個人風格的網頁來。

CSS 免費資源




DynamicDrive (http://www.dynamicdrive.com/)

動態 HTML 免費資源

http://www.dynamicdrive.com/



ckEditor(http://ckeditor.com/demo)

HTML 編輯器 - CKEditor

http://ckeditor.com/demo

http://ckeditor.com/demo

CKEditor 編輯畫面

CKEditor 顯示網頁

HTML 編輯器 - Blogger

HTML 編輯器 - Blogger

Google 問卷客製化

Google 問卷加入 HTML編輯

Google 問卷整合 HTML

Google 問卷 – Facebook 發佈

Google問卷 – 調查結果

Google問卷 – 結果分析

Documents

CH03 全球資訊網