網頁設計與網站經營

網頁設計與網站經營
蔡哲民
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
結論
 請自行製作一個網站作為作業
 網研社與電研社可以成為大家設計網站時的協
助