Transcript 網頁設計與網站經營 - 信望愛站專案資源網頁

網頁設計與網站經營
蔡哲民
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：作為銜接兩個不同網路之用
ºô»Úºô¸ô
Internet
Modem
網路的基本觀念
 網際網路上靠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相關觀念（二）
www.kmu.edu.tw.
 DNS正查圖解
"."
由TWNIC負責管理
com
tw
由InterNIC負責管理
com
net
ntu
org
edu
nsysu
www
kmu
cc
com
DNS相關觀念（三）
163.15.153.78
78.153.15.163.in-addr.arpa.
"."
 DNS反查圖解
arpa
com
org
in-addr
0
1
163
255
15
255
0
153
0
78
0
gec.kmu.edu.tw
255
255
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
 本身沒有太多內容，依賴指引到其他網站內容為主
要的賣點
 搜尋引擎為核心技術
 目前結合對話媒體並提供個人性服務（免費Email），
以形成一虛擬社區
 該類網站經營的目標：讓使用者經由該網站進入網
際網路世界
 未來朝結合其他媒體與結合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
結論
 請自行製作一個網站作為作業
 網研社與電研社可以成為大家設計網站時的協
助