網頁設計與網站經營

蔡哲民2004.4.25 日

http://c26.club.kmu.edu.tw/~tjm/

課程大綱（一） 網路概論與網站基本觀念

網際網路近況 網路的基本觀念 能力、倫理與期許 賣點、對象、人數與影響力 對手與合作對象 經營與行銷技巧 網站型態介紹

網頁設計基礎 工具、資源 網頁結構

課程大綱（二）

HTML 語法介紹 HTML 的特性 HTML 基本標記 HTML 排版標記 HTML 文字處理標記 HTML 圖形、超連結標記 HTML 表格標記 HTML 進階標記

網際網路近況（一）

2003 年 12 月底，台灣經常上網人口達 883 萬人 電話撥接用戶數為 399 萬戶 xDSL 用戶數為 259 萬戶 Cable Modem 用戶數為 31 萬戶 固接專線用戶數為 1.5 萬戶， ISDN 用戶數為 1.2 萬

戶 學術網路 (TANet) 用戶數為 358 萬人。

學校連網率 100% 經常上網之師生員工比例 66%

台灣的網路人數已經進入穩定期

網際網路近況（二）

網際網路中，使用者最常使用的服務 Web Email 在台灣的學校中， BBS 也是很常使用的服務 MSN 等即時傳訊系統也漸漸流行

網站的經營者或消息的提供者，也應該用這三個管道來提供消息 網頁 電子報 BBS 討論區

網路的基本結構 Gateway 或 router ：作為銜接兩個不同網路之

用

Modem

ºô»Úºô ô̧Internet

網路的基本觀念 網際網路上靠 IP address 來定位一台電腦： 32 位元

的位址，相當於 Internet 上的電話號碼 由四組 0~255 的十進位數字組成，例： 163.15.153.78

subnetmask(netmask) ： 32 位元的位址遮罩，用來克服網路安排或組織上的問題 例如： 255.255.255.0 255.255.0.0 通常電腦會透過 netmask 來分辨 IP address ，網路內的就

直接送到對應的位置去，網路之外的就送到 Router 或Gateway 去轉送出去。

DHCP 、 BOOTP ：由伺服器自動發給 IP 等網路設定， Client 端應設定為「自動取得 IP 」。

簡易網路檢修（一） 網路卡與 Hub 燈號

Power ：電源燈 Link ：網路卡與 Hub 已經正常連接上 Tx, Rx ：閃爍表示有傳送（ Tx ）或接收（ Rx ） Collision ：發生封包碰撞

Ping Ping IP 或 Ping 名稱：測試這台機器到對方通不通與

通訊速度。 當發現網路不通時，可以 ping 一下同一個子網路內的

機器或 gateway ，看看是否是 Hub 或 gateway 的問題。

簡易網路檢修（二） Tracert(Traceroute)

tracert IP 或 tracert 名稱：檢測由所在電腦到目的電腦之間所有經過的路徑（ gateway ）的通信狀況。

發現網路速度緩慢或網路不通要確定問題點時使用。（平常可以先存一份暢通時的tracert 結果，以備網路不通時釐清問題所在）

winipcfg ： Win98 或 Win95 作業系統中用來顯示網路卡卡號等資訊

ipconfig ： Windows 2000 、 XP 中類似 winipcfg的指令 ，常用 ipconfig /all

DNS 相關觀念（一） Domain Name( 正查、反查）

用來幫助記憶之用（有如手機的電話簿功能） Domain Name Server (DNS) 用來做 Domain Name 與

IP查詢，並回應外界對所管轄網路機器的名稱查詢。 由 Domain name 查 IP 稱為正查，由 IP 查 Domain

name 稱為反查 例： www.kmu.edu.tw bcc.gec.kmu.edu.tw 可以在 UNIX 與 Windows NT 底下用 nslookup 名稱

來查對應的 IP ，用 nslookup IP 來查對應的名稱。

DNS 相關觀念（二） DNS 正查圖解 www.kmu.edu.tw.

"."

tw com org

com net edu

ntu nsysu kmu

www cc com

由 InterNIC負責管理

由 TWNIC負責管理

DNS 相關觀念（三）

DNS反查圖解

163.15.153.7878.153.15.163.in-addr.arpa.

"."

arpa com org

in-addr

0 1 163 255

2550

15

2550

153

2550

78

gec.kmu.edu.tw

DNS 相關觀念（四） Domain Name Server 的重要性

沒有設定正查的機器不太可能成為公共網站（取個好記的名字吧）

沒有設定反查的機器就無法使用學術網路上的部分服務 一般一個單位內會設定兩台以上的 DNS Server ，我們

的電腦裡面也會設定兩部以上的 DNS Server 。以防一台機器當掉就造成整個單位電腦名稱無法轉換。

高醫有三台 DNS Server : 163.15.154.1 163.15.154.31 163.15.154.33

Windows 可由「控制台」裡面的「網路」裡面的「 TCP/IP 」中設定 DNS Server 。

通常 DHCP 也會幫忙設定 DNS

WWW 相關觀念（一） 瀏覽器是利用 URL （ Uniform Resource Locator) 來尋找資訊的所在，常用的 URL 有以下幾種： http （ http://bcc.gec.kmu.edu.tw ）超文字傳輸協定 telnet （ telnet://bcc.gec.kmu.edu.tw ）遠程簽入 ftp （ ftp://ftp.cis.nctu.edu.tw ）檔案傳送 file （ file:///D|/tmp/ 電腦硬體概論 /index.htm ） 檔案

首頁：當打入 http://std.vexp.idv.tw 時，事實上是到主機的特定目錄下（例如： www ）取得 index.html 或index.htm 檔案 show 出來，這個檔案就稱為「首頁」

WWW 相關觀念（二） 虛擬主機技術：同一台機器扮演許多台機器的

技術 http://bcc.com.kmu.edu.tw/~y2k/ http://y2k.com.kmu.edu.tw/ http://internet.class.kmu.edu.tw/ http://proxy.kmu.edu.tw/~internet/

網頁位址 (Domain name) 有廣告效應，應該盡量利用虛擬主機技術，並慎選網頁名稱。

能力、倫理與期許 技術本身不重要（可以買到），觀念最重要。 到底是為了做網站而做網站，還是想要「利用網

站達成某種目的」？如果是後者，那「目的」何在？

社團或官方網站可以是敷衍上級、消耗預算的垃圾。也可以是提供資訊、促進互動的園地。網站是個有機體，期待有更多有意義的網站由這個課程中產生。

警告：網路上有各種不同的人，有小孩、青少年或身心不健全的人，我們不確定誰來看網站。

賣點在哪裡？ 網站經營，首先要確認的是「網站的賣點」。

一個樣樣都有卻沒有特色的網站很難經營，除非是有眾多資源的網站（例如：「奇摩站」）。

當然「技術」、「美工」、「個人資料」、「整理分類」也是賣點，不過最好評估自己或自己的組織能夠長期提供什麼再決定網站的主要賣點。

利用搜尋引擎來瞭解與分析目前網站的狀況，以決定自己網站的賣點。可不要以卵擊石，乃要找到網路上少有，又是自己強點的標的。

目前有內容又沒有商業意圖的中文網站非常缺乏，賣點並不難找。 (photo.fhl.net bible.fhl.net 的例子）

對象是誰？ 網站的對象，決定使用的語言與內容之編排。

網站天生是「小眾媒體」（當然有些可以發展成接近大眾媒體的狀況），所以一開始應該選定目標族群。

目前大多數的網站都針對「男性青年」族群。 青少年、兒童、老年、弱勢團體都是可以開發的對象。 先看一下統計

http://www.twnic.net.tw/total/net1114.htm 官方或社團網站都已經有初步的假定對象，只要多走

一步，網站就會不一樣。

人數與影響力 「提供資訊」、「傳遞思想」、「影響人」，終究是架設網站的背後目標。

雖說對社會有利遠比上站人數眾多重要，但不可否認的，一般來說「網站影響力與上站人數平方」是成正比的。

如何在既定的賣點與對象之下提高上站人數與影響力，就成了網站經營的目標了。

可能的對手與合作對象

該領域是否已經有網站存在？ 該先存網站的狀況如何？你能跟他競爭嗎？或

者是可以合作？ 以學術網路的立場來看，並不適合架設「非學

術用網站」，但仍鼓勵大家與外面或校內的網站、團體合作（合作並不是簡單的事）。

以經營非營利網站的角度來看，義工人數越多，越能撐下去成為大站（人脈、內容與知名度方面都會有好處）。

基礎建設 穩定的硬體系統、快速的網路環境。

如果要在外面架設網站，就要挑適當的 ISP 。 好記的虛擬主機名字、快速的網頁下載速度

（圖少一點，美工簡單大方一點）。 正確的 HTML撰寫。 穩定快速的 CGI 等特殊程式。 適當的資料編排。 搜尋引擎的登錄。

進階經營與行銷技巧（一） 經營與行銷的主體應該是「網站的賣點」、

「網站的思想」，而不一定是網站本身。 與對話媒體或小遊戲結合，形成使用者間的互

動，讓使用者也一起來經營網站內容。 留言板、投票工具的使用方法

與 BBS 轉信討論區結合，透過自己參與討論，順便廣告自己的網站。 漫畫、花、食物

與其他媒體、社團活動或商業活動結合，形成多方面的行銷管道。

進階經營與行銷技巧（二） 將網頁登錄在搜尋網站中可幫助使用者在網海

中找到你的網站。 與電子郵件結合，形成電子報，主動提供讀者

資訊，以克服網頁的「非強制閱讀性」。 南方電子報、李敖電子報 電子報的使用法

經常（定期）更新，讓使用者定期來閱讀。 參考統計資料，以檢驗經營策略是否有效。 思考怎樣讓人第一次進入網站？怎樣讓人願意再來？

網站型態介紹（一） ISP （ Internet Service Provider) ： Hinet 、 Seednet

靠「經濟規模」或「雄厚的資本」。 B2B （ Business to Business) ：企業間採購等

需要專業領域的優勢（居專業方面的領導地位）：最大的醫院、最大的汽車公司等等

ASP （ Application Service Provider ）： Geocities 提供網頁空間、網頁設計工具與 Webmail 等工具，依賴提供優良之網路工具以吸引使用者

經營得靠「殺手技術」。

網站型態介紹（二） 入口網站（大門網站）：奇摩站、蕃薯藤、 OpenFind 、 AOL 本身沒有太多內容，依賴指引到其他網站內容為主

要的賣點 搜尋引擎為核心技術 目前結合對話媒體並提供個人性服務（免費 Emai

l ），以形成一虛擬社區 該類網站經營的目標：讓使用者經由該網站進入網

際網路世界 未來朝結合其他媒體與結合 ISP 方向發展

網站型態介紹（三） B2C （ Business to Custom ）：網路書店、網路花店、網路買機票等等 要有企業為後盾，價格要夠便宜、物流等配套系統必須完善

目前的消費者不習慣網路消費 ICP (Internet Content Provider) ：中時電子報、崴

達健康網等 提供特定的內容，如新聞、醫療等等，依賴提供大量且隨時更新之資訊以吸引使用者。

以「內容」為主要賣點，常常與全文檢索系統結合。 一般非營利的網站網站通常是採取這種型態。

網站型態介紹（四） C2C （ Custom to Custom ）： BBS 、網路拍

賣、網路二手市場、 104 人力銀行、社群網站 很容易凝聚人氣，但人氣聚集後對系統資源與管理

人力需求甚大，你撐得下去嗎？ C2B （ Custom to Business ）：合購、動態議價

電子商務（一） 網路行銷，行銷的可以是思想，也可以是實際的

在網路上賣貨品。 目前一般網站獲利的方法跟電視台接近，是利用

「廣告」來獲利，少數網站已經開始賣實際的貨品。

電子商務系統通常透過網路直接交易，在技術上「安全」與「認證」就成了特別重要的關鍵科技（ SSL 與 SET 是重要的相關技術）。

電子商務（二） 技術本身還算容易，但是什麼東西在網路上賣

可以賣的比平常的行銷通路好呢？ 成功的案例：股票、亞瑪遜書店（書、禮品）、音樂（ MP3 、 CD ）、軟體、資料庫… . 等等

不過以目前的狀況來看，要跨越目前消費者的習慣，進而取得網路購物的利基，還需要有相當的努力。

目前真正在網際網路上賺到錢的人不多，最近幾家入口網站開始獲利（靠廣告）。

.com還是 .org

小結論 非營利網站走 Internet Content Provider類型比較適合。

學術界的義工行為常常是小型商業網站獲利的障礙。因為使用者常常可以取得免費的資源，因此不夠好的收費資源就沒有生存空間了。不過獲利的總是使用者，可以享受低廉或免費的網路服務。

花一點時間思考一下自己網站的目的、對象、賣點，以及可能的行銷手法。

資料交換工具 標準方式：

FTP:wsftp, cuteftp (ftp://ftp.kmu.edu.tw/pub/Win/network/ftp/)

網路芳鄰（ Samba ） scp:WinSCP (http://winscp.vse.cz/eng/)

特殊方式： FrontPage 的 FrontPage Extensions Web-Based 網頁製作工具或檔案管理工具之檔案上

傳功能

幾個網頁設計工具 Dreamweave Frontpage Composer HTMLABC HTML123 Word ( 示範一下） Power ( 示範一下） Excel （示範一下）

網頁設計工具之選擇 好用，功能強大 產生的 HTML 碼依循標準 產生的 HTML 碼簡單易讀 產生的 HTML檔案越小越好 英文字母大小寫要區分 盡量少使用特殊的 Plug-in 或 CGI

Plug-in ：在瀏覽器上外掛的附屬程式，用以瀏覽特殊格式的資料（例如： Flash ）

網頁設計小工具 使用 vi 、 joe 、 pico 、 ve 等 Unix 上的文字編輯軟體來修改。

使用記事本來修改 免費的影像處理軟體

GIMP ： http://www.gimp.org

Windows 版本 http://www.gimp.org/~tml/gimp/win32/ Pixia ： http://www.pixia.org/ Sodipodi: http://sodipodi.sourceforge.net SVG 向量圖形 PhotoImpact （本校有全校使用版權）

一些網頁設計的資源

網頁設計最大的困難：版權 免費的圖形資源

http://www.clip-art.com 免費圖庫 http://www.taconet.com.tw/byemo/MAIN.htm

圖庫搜尋 http://www.abcgallery.com 古典名畫 http://photo.fhl.net 免費照片 http://www.google.com 用 free clipart 搜尋

便宜的圖形資源：購買素材光碟 要注意版權宣告，看看是否可以放上網站

網頁的結構（一） 網頁結構雖然複雜，可變性也大，但是基本上我們還是可以將網頁分成「目錄性」與「資料性」兩大類。 目錄性網頁主要是用來指引使用者閱讀到資料，目

標是以「指引」為主。 資料性網頁主要是提供資料，目標是以「陳述完整

觀念」為主。

網頁的結構（二） 資料性的網頁可以更多依賴一般文書處理軟體

等工具直接將結果轉出來。 目錄性的網頁比較適合透過手寫 HTML 或網頁編輯工具來完成。 目錄性網頁不宜太長，如有必要可配合全文檢索或

資料庫等工具來處理。 網頁使用圖形也盡量使用標準格式：

GIF 、 JPG 、 PNG

特殊網頁產生工具

資訊遠比美觀或技術重要（美觀、技術也很重要啦！），無法追求美觀或技術之前，可以先利用一些程式快速產生網頁。

Blog ：產生個人網頁 布告欄：產生公告事項

http://c26.club.kmu.edu.tw/cgi-bin/rogbook.cgi?tjm

網頁設計 HTML 介紹 HTML 特性 基本標記 排版標記 文字處理標記 圖形、超鏈結相關標記 表格標記 HTML 進階介紹參考 http://c26.club.kmu.edu.tw/~tjm/exp

HTML 介紹 HTML ： HyperText Markup Language ，是由 SGML

發展出來的。 標準：目前的 HTML 標準是由 W3C 這個單位來制訂

（ http://www.w3c.org ） 目前有 HTML 2.0 、 3.0 、 4.0 ， Netscape

Extension 、 Microsoft Extension 目前最普遍的標準規格是 HTML 3.0 未來的標準可能是 XHTML

參考 http://internet.class.kmu.edu.tw/barebone_tw.html

HTML 的特性（一） HTML 特性：

Free Format ：文件中可忽略多餘的空白與跳行 自動排版：可隨視窗大小自動編排 有超鏈結功能

HTML 基本結構： HTML 是由「內文（ Text ）」與「標記（ Tag ）」

組成，內文定義文件內容，標記定義文件外觀與架構。

標記是由 < 標記名稱 標記屬性 > 通常標記是成對出現： < 標記 > 內文 </ 標記 >

<title>TEST</title> <body> </body>

HTML 的特性（二） 標記不分大小寫，但標記屬性、超連結的內容

就可能必須區分大小寫 反正我們就「養成注意大小寫」的習慣即可

HTML 文件與一般文字檔一樣，可用文字檔編輯器來編輯（ PE2 、 Notepad 、 vi 、 pico ） Word 、 Wordpad 等非文字檔編輯器不能直接拿來編輯 HTML 文件，必須透過「轉換」的程序才能產生 HTML 文件

HTML 基本標記（一） <html> </html> ：定義 HTML 文件段落 <head> </head> ：定義 HTML 文件檔頭

該處內容是用來描述 HTML 文件的內容與屬性 該處的內容不會被瀏覽器顯示出來，但對搜尋引擎

等有相當的重要性 <title> </title> ：定義文件標題

放置於 HTML檔頭處 瀏覽器的信息欄會顯示出標題

HTML 基本標記（二） <body> </body> ：定義出文件內容的界線 <!-- 註解 --> ：瀏覽器不會處理，做說明用 以上許多標記都可以省略，但為了增進文件的

可用性，還是應該盡量撰寫完整的 HTML 文件 一個基本的 HTML

<html>

<head><title>Test</title></head>

<body>This is a real test.</body>

</html>

HTML 排版標記 <br> ：換行標記 <p></p> ：段落，許多人習慣用 <p> 來表示「空

一行」。 <h1></h1> 到 <h6></h6> ：項目標題 <ul> </ul> ：無次序列表 <ol> </ol> ：有次序列表 <li> </li> ：項目列表 <CENTER></CENTER> ：對中 <pre> </pre> ：預先排版文字（瀏覽器不排版）

文字處理標記 強調標記： <em></em> （斜體處

理）、 <strong></strong> （粗體處理）。 <b> ：粗體 <blink> ：閃爍 <i> ：斜體 <strike> ：刪除 <u> ：加上底線

<font></font>: 直接定義文字屬性，常用屬性如下 color ： color=red 或 color=#FEFEFE size ： size 可由 1 到 7 。 例： <font color=#FE00FE size=7> 大字啦！ </font>

圖形、超鏈結相關標記（一） <hr> ：橫線，重要屬性如下（單位都是「點」）

size ：線條寬度 width ：一般橫線是劃過整個畫面，可以用此屬性來限制寬度

例： <hr size=7 width=50>

<img> ：圖形，重要屬性如下 src ：圖形的 URL alt ：無法顯示圖形時的替代文字 height 跟 width ：自行決定圖形高度與寬度 例： <img src=“http://www.kmu.edu.tw/99title.jpg”>

圖形、超鏈結相關標記（二） <a> </a> ：鏈結，重要屬性如下

href ：鏈結目標的 URL （可以是相對或絕對位置） name ：建立辨識標籤，建立辨識標籤後就可以用「 #

標籤名稱」來鏈結（參考 http://internet.class.kmu.edu.tw/barebone_tw.html ） 例： <a href=“test.html”> 測試啦！ </a> URL mailto:EMAIL 可以用來讓使用者寄信給 EMAIL

中文網頁之特殊背景資訊<meta http-equiv="content-type" content="text/html;

charset=big5">

表格標記 表格標記不單單是用來建立表格，尤其常常用來

排列物件或圖片 <table> </table> ：定義表格文件，重要屬性如下

bgcolor ：背景顏色 border ：格線寬度 align ：表格對齊方式， left 、 right 與 center

<tr> </tr> ：定義表格的一列 <td> </td> ：定義表格中的一格

HTML 進階介紹 <FRAME></FRAME> ：分割視框 範例： http://www.kmu.edu.tw/cc/index.htm <applete></applete> ：引入 JAVA 程式 範例： http://ana.vexp.idv.tw/java.html <SCRIPT></SCRIPT> ：引入 Script 程式 範例： http://bible.fhl.net/new/read.html

FORM指令 通常網頁呼叫 CGI 的方式

<form method=“POST” action=“cginame”>

文字 1<input type=“text” name=“INPUT1” size=40>

……

<input type=“submit” name=“SUBMIT” value=“輸入” >

</from> form 的 method 可以指定為 POST 或 GET action 的內容則是指向 CGI 的位置

輸入元件： <input type=… name=… value=…. Size=….>

Form 的 Input Type TEXT ：一般的單行文字輸入模式 password ：用「 * 」字號來替代文字輸出 radio ：單選的選擇項，以 value 來設定值 checkbox ：多選的選擇項，選定後則變數有值 select 、 option ：選單選擇項，以 value 來設定值 <textarea rows=m cols=n> ：多行文字區域 hidden ：不讓 user改變的項目 submit ：開始執行 CGI reset ：清除剛剛的輸入

Form輸入的範例與製作方法 先瞭解 CGI

用途如何、接受何種輸入變數、產生何種輸出 再瞭解你的用途

給誰使用、有沒有更方便使用者選擇的方式 有沒有更少的選項

範例： http://db.vexp.idv.tw/sql.html http://unix.vexp.idv.tw/

Style 元素的運用 目前主要的瀏覽器支援到 CSS1 （ Cascading

Style Sheets Level 1 ） <STYLE TYPE=

“TEXT/CSS”> 標籤定義 </STYLE> 這是用來自定標籤，以統一與簡化整個網頁設

計的複雜性。 參考： http://www.fhl.net

結論

請自行製作一個網站作為作業 網研社與電研社可以成為大家設計網站時的協助