网页设计与网站经营Stillwatersrundeep.流静水深流静水深,人静心深人静心深Wherethereislife,thereishope。有生命必有希望。有生命必有希望課程大綱（一）網路概論與網站基本觀念網際網路近況網路的基本觀念能力、倫理與期許賣點、對象、人數與影響力對手與合作對象經營與行銷技巧網站型態介紹網頁設計基礎工具、資源網頁結構課程大綱（二）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%台灣的網路人數已經進入穩定期 網際網路近況（二）網際網路中，使用者最常使用的服務WebEmail在台灣的學校中，BBS也是很常使用的服務MSN等即時傳訊系統也漸漸流行網站的經營者或消息的提供者，也應該用這三個管道來提供消息網頁電子報BBS討論區網路的基本結構Gateway或router：作為銜接兩個不同網路之用Internet網路的基本觀念網際網路上靠IP address來定位一台電腦：32位元的位址，相當於Internet上的電話號碼由四組0255的十進位數字組成，例：163.15.153.78subnetmask(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：發生封包碰撞PingPing IP 或Ping 名稱：測試這台機器到對方通不通與通訊速度。當發現網路不通時，可以ping一下同一個子網路內的機器或gateway，看看是否是Hub或gateway的問題。簡易網路檢修（二）Tracert(Traceroute)tracert IP 或tracert 名稱：檢測由所在電腦到目的電腦之間所有經過的路徑（gateway）的通信狀況。發現網路速度緩慢或網路不通要確定問題點時使用。（平常可以先存一份暢通時的tracert結果，以備網路不通時釐清問題所在）winipcfg：Win98或Win95作業系統中用來顯示網路卡卡號等資訊ipconfig：Windows 2000、XP中類似winipcfg的指令 ，常用 ipconfig /allDNS相關觀念（一）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正查圖解由InterNIC負責管理由TWNIC負責管理DNS相關觀念（三）DNS反查圖解DNS相關觀念（四）Domain Name Server的重要性沒有設定正查的機器不太可能成為公共網站（取個好記的名字吧）沒有設定反查的機器就無法使用學術網路上的部分服務一般一個單位內會設定兩台以上的DNS Server，我們的電腦裡面也會設定兩部以上的DNS Server。以防一台機器當掉就造成整個單位電腦名稱無法轉換。高醫有三台DNS Server : 163.15.154.1 163.15.154.31 163.15.154.33Windows 可由控制台裡面的網路裡面的TCP/IP中設定DNS Server。通常DHCP也會幫忙設定DNSWWW相關觀念（一）瀏覽器是利用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 ExtensionsWeb-Based網頁製作工具或檔案管理工具之檔案上傳功能幾個網頁設計工具DreamweaveFrontpageComposerHTMLABCHTML123Word (示範一下）Power (示範一下）Excel （示範一下）網頁設計工具之選擇好用，功能強大產生的HTML碼依循標準產生的HTML碼簡單易讀產生的HTML檔案越小越好英文字母大小寫要區分盡量少使用特殊的Plug-in或CGIPlug-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/expHTML介紹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.htmlHTML的特性（一）HTML特性：Free Format：文件中可忽略多餘的空白與跳行自動排版：可隨視窗大小自動編排有超鏈結功能HTML基本結構：HTML是由內文（Text）與標記（Tag）組成，內文定義文件內容，標記定義文件外觀與架構。標記是由通常標記是成對出現：內文 TEST HTML的特性（二）標記不分大小寫，但標記屬性、超連結的內容就可能必須區分大小寫反正我們就養成注意大小寫的習慣即可HTML文件與一般文字檔一樣，可用文字檔編輯器來編輯（PE2、Notepad、vi、pico）Word、Wordpad等非文字檔編輯器不能直接拿來編輯HTML文件，必須透過轉換的程序才能產生HTML文件HTML基本標記（一） ：定義HTML文件段落 ：定義HTML文件檔頭該處內容是用來描述HTML文件的內容與屬性該處的內容不會被瀏覽器顯示出來，但對搜尋引擎等有相當的重要性 ：定義文件標題放置於HTML檔頭處瀏覽器的信息欄會顯示出標題HTML基本標記（二） ：定義出文件內容的界線：瀏覽器不會處理，做說明用以上許多標記都可以省略，但為了增進文件的可用性，還是應該盡量撰寫完整的HTML文件一個基本的HTMLTestThis is a real test.HTML排版標記：換行標記：段落，許多人習慣用來表示空一行。到：項目標題 ：無次序列表 ：有次序列表 ：項目列表：對中 ：預先排版文字（瀏覽器不排版）文字處理標記強調標記：（斜體處理）、（粗體處理）。：粗體 ：閃爍 ：斜體 ：刪除 ：加上底線:直接定義文字屬性，常用屬性如下color：color=red 或 color=#FEFEFEsize：size 可由1到7。例： 大字啦！圖形、超鏈結相關標記（一）：橫線，重要屬性如下（單位都是點）size：線條寬度width：一般橫線是劃過整個畫面，可以用此屬性來限制寬度例： ：圖形，重要屬性如下src：圖形的URLalt：無法顯示圖形時的替代文字height跟width：自行決定圖形高度與寬度例： 圖形、超鏈結相關標記（二） ：鏈結，重要屬性如下href：鏈結目標的URL（可以是相對或絕對位置）name：建立辨識標籤，建立辨識標籤後就可以用#標籤名稱來鏈結（參考http:/internet.class.kmu.edu.tw/barebone_tw.html）例： 測試啦！URL mailto:EMAIL 可以用來讓使用者寄信給EMAIL中文網頁之特殊背景資訊表格標記表格標記不單單是用來建立表格，尤其常常用來排列物件或圖片 ：定義表格文件，重要屬性如下bgcolor：背景顏色border：格線寬度align：表格對齊方式，left、right與center ：定義表格的一列 ：定義表格中的一格HTML進階介紹：分割視框 範例：http:/www.kmu.edu.tw/cc/index.htm：引入JAVA程式範例：http:/ana.vexp.idv.tw/java.html ：引入Script程式 範例：http:/bible.fhl.net/new/read.htmlFORM指令通常網頁呼叫CGI的方式文字1form 的 method可以指定為POST或GETaction 的內容則是指向CGI的位置輸入元件：Form 的 Input TypeTEXT：一般的單行文字輸入模式password：用*字號來替代文字輸出radio：單選的選擇項，以value來設定值checkbox：多選的選擇項，選定後則變數有值select、option：選單選擇項，以value來設定值：多行文字區域hidden：不讓user改變的項目submit：開始執行CGIreset：清除剛剛的輸入Form輸入的範例與製作方法先瞭解CGI用途如何、接受何種輸入變數、產生何種輸出再瞭解你的用途給誰使用、有沒有更方便使用者選擇的方式有沒有更少的選項範例：http:/db.vexp.idv.tw/sql.htmlhttp:/unix.vexp.idv.tw/Style元素的運用目前主要的瀏覽器支援到CSS1（Cascading Style Sheets Level 1）標籤定義這是用來自定標籤，以統一與簡化整個網頁設計的複雜性。參考：http:/www.fhl.net結論請自行製作一個網站作為作業網研社與電研社可以成為大家設計網站時的協助