網頁設計與網站經營

1. 網頁設計與網站經營 蔡哲民 2004.4.25日 http://c26.club.kmu.edu.tw/~tjm/

2. 課程大綱（一） • 網路概論與網站基本觀念 • 網際網路近況 • 網路的基本觀念 • 能力、倫理與期許 • 賣點、對象、人數與影響力 • 對手與合作對象 • 經營與行銷技巧 • 網站型態介紹 • 網頁設計基礎 • 工具、資源 • 網頁結構

3. 課程大綱（二） • HTML語法介紹 • HTML的特性 • HTML基本標記 • HTML排版標記 • HTML文字處理標記 • HTML圖形、超連結標記 • HTML表格標記 • HTML進階標記

4. 網際網路近況（一） • 2003年12月底，台灣經常上網人口達883萬人 • 電話撥接用戶數為399萬戶 • xDSL用戶數為259萬戶 • Cable Modem用戶數為31萬戶 • 固接專線用戶數為1.5萬戶，ISDN用戶數為1.2萬戶 • 學術網路(TANet)用戶數為358萬人。 • 學校連網率 100% • 經常上網之師生員工比例 66% • 台灣的網路人數已經進入穩定期

5. 網際網路近況（二） • 網際網路中，使用者最常使用的服務 • Web • Email • 在台灣的學校中，BBS也是很常使用的服務 • MSN等即時傳訊系統也漸漸流行 • 網站的經營者或消息的提供者，也應該用這三個管道來提供消息 • 網頁 • 電子報 • BBS討論區

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

7. 網路的基本觀念 • 網際網路上靠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」。

8. 簡易網路檢修（一） • 網路卡與Hub燈號 • Power：電源燈 • Link：網路卡與Hub已經正常連接上 • Tx, Rx：閃爍表示有傳送（Tx）或接收（Rx） • Collision：發生封包碰撞 • Ping • Ping IP 或Ping 名稱：測試這台機器到對方通不通與通訊速度。 • 當發現網路不通時，可以ping一下同一個子網路內的機器或gateway，看看是否是Hub或gateway的問題。

9. 簡易網路檢修（二） • Tracert(Traceroute) • tracert IP 或tracert 名稱：檢測由所在電腦到目的電腦之間所有經過的路徑（gateway）的通信狀況。 • 發現網路速度緩慢或網路不通要確定問題點時使用。（平常可以先存一份暢通時的tracert結果，以備網路不通時釐清問題所在） • winipcfg：Win98或Win95作業系統中用來顯示網路卡卡號等資訊 • ipconfig：Windows 2000、XP中類似winipcfg的指令 ，常用 ipconfig /all

10. 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來查對應的名稱。

11. DNS相關觀念（二） • DNS正查圖解 由InterNIC負責管理 由TWNIC負責管理

12. DNS相關觀念（三） • DNS反查圖解

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

14. 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出來，這個檔案就稱為「首頁」

15. 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)有廣告效應，應該盡量利用虛擬主機技術，並慎選網頁名稱。

16. 能力、倫理與期許 • 技術本身不重要（可以買到），觀念最重要。 • 到底是為了做網站而做網站，還是想要「利用網站達成某種目的」？如果是後者，那「目的」何在？ • 社團或官方網站可以是敷衍上級、消耗預算的垃圾。也可以是提供資訊、促進互動的園地。網站是個有機體，期待有更多有意義的網站由這個課程中產生。 • 警告：網路上有各種不同的人，有小孩、青少年或身心不健全的人，我們不確定誰來看網站。

17. 賣點在哪裡？ • 網站經營，首先要確認的是「網站的賣點」。 • 一個樣樣都有卻沒有特色的網站很難經營，除非是有眾多資源的網站（例如：「奇摩站」）。 • 當然「技術」、「美工」、「個人資料」、「整理分類」也是賣點，不過最好評估自己或自己的組織能夠長期提供什麼再決定網站的主要賣點。 • 利用搜尋引擎來瞭解與分析目前網站的狀況，以決定自己網站的賣點。可不要以卵擊石，乃要找到網路上少有，又是自己強點的標的。 • 目前有內容又沒有商業意圖的中文網站非常缺乏，賣點並不難找。(photo.fhl.netbible.fhl.net的例子）

18. 對象是誰？ • 網站的對象，決定使用的語言與內容之編排。 • 網站天生是「小眾媒體」（當然有些可以發展成接近大眾媒體的狀況），所以一開始應該選定目標族群。 • 目前大多數的網站都針對「男性青年」族群。 • 青少年、兒童、老年、弱勢團體都是可以開發的對象。 • 先看一下統計 http://www.twnic.net.tw/total/net1114.htm • 官方或社團網站都已經有初步的假定對象，只要多走一步，網站就會不一樣。

19. 人數與影響力 • 「提供資訊」、「傳遞思想」、「影響人」，終究是架設網站的背後目標。 • 雖說對社會有利遠比上站人數眾多重要，但不可否認的，一般來說「網站影響力與上站人數平方」是成正比的。 • 如何在既定的賣點與對象之下提高上站人數與影響力，就成了網站經營的目標了。

20. 可能的對手與合作對象 • 該領域是否已經有網站存在？ • 該先存網站的狀況如何？你能跟他競爭嗎？或者是可以合作？ • 以學術網路的立場來看，並不適合架設「非學術用網站」，但仍鼓勵大家與外面或校內的網站、團體合作（合作並不是簡單的事）。 • 以經營非營利網站的角度來看，義工人數越多，越能撐下去成為大站（人脈、內容與知名度方面都會有好處）。

21. 基礎建設 • 穩定的硬體系統、快速的網路環境。 • 如果要在外面架設網站，就要挑適當的ISP。 • 好記的虛擬主機名字、快速的網頁下載速度（圖少一點，美工簡單大方一點）。 • 正確的HTML撰寫。 • 穩定快速的CGI等特殊程式。 • 適當的資料編排。 • 搜尋引擎的登錄。

22. 進階經營與行銷技巧（一） • 經營與行銷的主體應該是「網站的賣點」、「網站的思想」，而不一定是網站本身。 • 與對話媒體或小遊戲結合，形成使用者間的互動，讓使用者也一起來經營網站內容。 • 留言板、投票工具的使用方法 • 與BBS轉信討論區結合，透過自己參與討論，順便廣告自己的網站。 • 漫畫、花、食物 • 與其他媒體、社團活動或商業活動結合，形成多方面的行銷管道。

23. 進階經營與行銷技巧（二） • 將網頁登錄在搜尋網站中可幫助使用者在網海中找到你的網站。 • 與電子郵件結合，形成電子報，主動提供讀者資訊，以克服網頁的「非強制閱讀性」。 • 南方電子報、李敖電子報 • 電子報的使用法 • 經常（定期）更新，讓使用者定期來閱讀。 • 參考統計資料，以檢驗經營策略是否有效。 • 思考怎樣讓人第一次進入網站？怎樣讓人願意再來？

24. 網站型態介紹（一） • ISP（Internet Service Provider)：Hinet、Seednet • 靠「經濟規模」或「雄厚的資本」。 • B2B（Business to Business)：企業間採購等 • 需要專業領域的優勢（居專業方面的領導地位）：最大的醫院、最大的汽車公司等等 • ASP（Application Service Provider）：Geocities • 提供網頁空間、網頁設計工具與Webmail等工具，依賴提供優良之網路工具以吸引使用者 • 經營得靠「殺手技術」。

25. 網站型態介紹（二） • 入口網站（大門網站）：奇摩站、蕃薯藤、OpenFind、AOL • 本身沒有太多內容，依賴指引到其他網站內容為主要的賣點 • 搜尋引擎為核心技術 • 目前結合對話媒體並提供個人性服務（免費Email），以形成一虛擬社區 • 該類網站經營的目標：讓使用者經由該網站進入網際網路世界 • 未來朝結合其他媒體與結合ISP方向發展

26. 網站型態介紹（三） • B2C （Business to Custom）：網路書店、網路花店、網路買機票等等 • 要有企業為後盾，價格要夠便宜、物流等配套系統必須完善 • 目前的消費者不習慣網路消費 • ICP (Internet Content Provider)：中時電子報、崴達健康網等 • 提供特定的內容，如新聞、醫療等等，依賴提供大量且隨時更新之資訊以吸引使用者。 • 以「內容」為主要賣點，常常與全文檢索系統結合。 • 一般非營利的網站網站通常是採取這種型態。

27. 網站型態介紹（四） • C2C （Custom to Custom）：BBS、網路拍賣、網路二手市場、104人力銀行、社群網站 • 很容易凝聚人氣，但人氣聚集後對系統資源與管理人力需求甚大，你撐得下去嗎？ • C2B （Custom to Business）：合購、動態議價

28. 電子商務（一） • 網路行銷，行銷的可以是思想，也可以是實際的在網路上賣貨品。 • 目前一般網站獲利的方法跟電視台接近，是利用「廣告」來獲利，少數網站已經開始賣實際的貨品。 • 電子商務系統通常透過網路直接交易，在技術上「安全」與「認證」就成了特別重要的關鍵科技（SSL與SET是重要的相關技術）。

29. 電子商務（二） • 技術本身還算容易，但是什麼東西在網路上賣可以賣的比平常的行銷通路好呢？ • 成功的案例：股票、亞瑪遜書店（書、禮品）、音樂（MP3、CD）、軟體、資料庫….等等 • 不過以目前的狀況來看，要跨越目前消費者的習慣，進而取得網路購物的利基，還需要有相當的努力。 • 目前真正在網際網路上賺到錢的人不多，最近幾家入口網站開始獲利（靠廣告）。 • .com還是.org

30. 小結論 • 非營利網站走Internet Content Provider類型比較適合。 • 學術界的義工行為常常是小型商業網站獲利的障礙。因為使用者常常可以取得免費的資源，因此不夠好的收費資源就沒有生存空間了。不過獲利的總是使用者，可以享受低廉或免費的網路服務。 • 花一點時間思考一下自己網站的目的、對象、賣點，以及可能的行銷手法。

31. 資料交換工具 • 標準方式： • 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網頁製作工具或檔案管理工具之檔案上傳功能

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

33. 網頁設計工具之選擇 • 好用，功能強大 • 產生的HTML碼依循標準 • 產生的HTML碼簡單易讀 • 產生的HTML檔案越小越好 • 英文字母大小寫要區分 • 盡量少使用特殊的Plug-in或CGI • Plug-in：在瀏覽器上外掛的附屬程式，用以瀏覽特殊格式的資料（例如：Flash）

34. 網頁設計小工具 • 使用 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 （本校有全校使用版權）

35. 一些網頁設計的資源 • 網頁設計最大的困難：版權 • 免費的圖形資源 • 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搜尋 • 便宜的圖形資源：購買素材光碟 • 要注意版權宣告，看看是否可以放上網站

36. 網頁的結構（一） • 網頁結構雖然複雜，可變性也大，但是基本上我們還是可以將網頁分成「目錄性」與「資料性」兩大類。 • 目錄性網頁主要是用來指引使用者閱讀到資料，目標是以「指引」為主。 • 資料性網頁主要是提供資料，目標是以「陳述完整觀念」為主。

37. 網頁的結構（二） • 資料性的網頁可以更多依賴一般文書處理軟體等工具直接將結果轉出來。 • 目錄性的網頁比較適合透過手寫HTML或網頁編輯工具來完成。 • 目錄性網頁不宜太長，如有必要可配合全文檢索或資料庫等工具來處理。 • 網頁使用圖形也盡量使用標準格式： • GIF、JPG、PNG

38. 特殊網頁產生工具 • 資訊遠比美觀或技術重要（美觀、技術也很重要啦！），無法追求美觀或技術之前，可以先利用一些程式快速產生網頁。 • Blog：產生個人網頁 • 布告欄：產生公告事項 • http://c26.club.kmu.edu.tw/cgi-bin/rogbook.cgi?tjm

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

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

41. HTML的特性（一） • HTML特性： • Free Format：文件中可忽略多餘的空白與跳行 • 自動排版：可隨視窗大小自動編排 • 有超鏈結功能 • HTML基本結構： • HTML是由「內文（Text）」與「標記（Tag）」組成，內文定義文件內容，標記定義文件外觀與架構。 • 標記是由<標記名稱 標記屬性> • 通常標記是成對出現：<標記>內文</標記> <title>TEST</title> <body> </body>

42. HTML的特性（二） • 標記不分大小寫，但標記屬性、超連結的內容就可能必須區分大小寫 • 反正我們就「養成注意大小寫」的習慣即可 • HTML文件與一般文字檔一樣，可用文字檔編輯器來編輯（PE2、Notepad、vi、pico） • Word、Wordpad等非文字檔編輯器不能直接拿來編輯HTML文件，必須透過「轉換」的程序才能產生HTML文件

43. HTML基本標記（一） • <html> </html>：定義HTML文件段落 • <head> </head>：定義HTML文件檔頭 • 該處內容是用來描述HTML文件的內容與屬性 • 該處的內容不會被瀏覽器顯示出來，但對搜尋引擎等有相當的重要性 • <title> </title>：定義文件標題 • 放置於HTML檔頭處 • 瀏覽器的信息欄會顯示出標題

44. HTML基本標記（二） • <body> </body>：定義出文件內容的界線 • <!-- 註解-->：瀏覽器不會處理，做說明用 • 以上許多標記都可以省略，但為了增進文件的可用性，還是應該盡量撰寫完整的HTML文件 • 一個基本的HTML <html> <head><title>Test</title></head> <body>This is a real test.</body> </html>

45. HTML排版標記 • <br>：換行標記 • <p></p>：段落，許多人習慣用<p>來表示「空一行」。 • <h1></h1>到<h6></h6>：項目標題 • <ul> </ul>：無次序列表 • <ol> </ol>：有次序列表 • <li> </li>：項目列表 • <CENTER></CENTER>：對中 • <pre> </pre>：預先排版文字（瀏覽器不排版）

46. 文字處理標記 • 強調標記：<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>

47. 圖形、超鏈結相關標記（一） • <hr>：橫線，重要屬性如下（單位都是「點」） • size：線條寬度 • width：一般橫線是劃過整個畫面，可以用此屬性來限制寬度 • 例： <hr size=7 width=50> • <img>：圖形，重要屬性如下 • src：圖形的URL • alt：無法顯示圖形時的替代文字 • height跟width：自行決定圖形高度與寬度 • 例： <img src=“http://www.kmu.edu.tw/99title.jpg”>

48. 圖形、超鏈結相關標記（二） • <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">

49. 表格標記 • 表格標記不單單是用來建立表格，尤其常常用來排列物件或圖片 • <table> </table>：定義表格文件，重要屬性如下 • bgcolor：背景顏色 • border：格線寬度 • align：表格對齊方式，left、right與center • <tr> </tr>：定義表格的一列 • <td> </td>：定義表格中的一格

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