Transcript 投影片 1
網頁製作之基本概念 林建良 大綱 常用名詞解釋 基本觀念 網頁製作相關軟體 網頁製作流程 網頁製作注意事項 常用名詞解釋 WWW ＷＷＷ：Ｗorld Ｗide Ｗeb ＷＷＷ：汪汪汪 ＷＷＷ：旺旺旺 ＷＷＷ：Ｗ３ ＷＷＷ：Ｔripple Ｗ ＷＷＷ：全球資訊網 Home Page 利用ＨＴＭＬ寫成，可以用瀏覽器看到的超 文件。中文翻做【首頁】、【家頁】、【烘 培雞】、【烘培機】、或【烘培姬】。 WWW：由一堆網站所連結而成。 網站：由一堆網頁所構成的完整內容。 網頁：就是我們準備要做的東西。 首頁：當我們進站時，第一眼看到的網頁。 網站與網頁的概念 網站(Web Site)： 網頁的集合 網際網路上的ㄧ個儲存空間 網際網路上訪問者可以透過瀏覽器查看網頁的場所 網頁 : 瀏覽器所看到的頁面 網頁類型 : ㄧ般網頁、框架網頁、表單網頁、動態 網頁等 首頁 : 進入網站所看到的第一個網頁 首頁預設名稱 : 主檔名 : index或default 副檔名 : htm, html, asp, php… HTML HTML（Hyper Text Markup Language 的簡稱）是根 據國際標準化組織（ISO）的SGML（Standard Generalized Markup Language）標準定義的一種標記 語言。透過HTML的編寫，就能讓網頁的資料在世 界各地互相流通。這份文件只要經過瀏覽器的「解 譯」（等於是翻譯），就會呈現出我們在網路上所 見到的網頁了。 W3C網址：http://www.w3.org/ Version：1.0, 2.0, 3.2, 4.0, 4.01 超文件（Hyper Text） 超文件是指在文件中包含有鏈結到其他文件 的能力，通常是利用不同顏色或加底線的字， 此外當滑鼠移到這些字上時會由箭頭變成手 指狀，使用者只需經由滑鼠點取，便可鏈結 到其他相關的文件。 除了超文件的鏈結外，ＨＴＭＬ編輯出來的 超文件同時具備展現多媒體的能力，因為文 件可加入圖片、聲音、及動畫及等效果。 標記語言（Markup Language） 在倚天中文環境下使用PE2時，必須加入一些 控制碼讓印出來的文件出現放大、改變字形 等的效果。 同樣地，製作HTML文件的過程中也必須加 入所謂的標籤（TAG），讓瀏覽器知道該如 何處理及呈現原始文件的內容。在HTML語 法中，除了少數例外，大都是以：<XX>開始， 以</XX>結束；其中XX就是HTML的標籤。 URL 如何描述你家的住址？ ★縣★鄉★村★路★號★鄰 如何描述你家的電話？ 〔區域號碼〕電話號碼 如何描述你電腦的IP？ 163.128.111.1或jenner.csie.ksu.edu.tw 在WWW的世界裡，大家統一用URL （Uniform Resource Locator）來說明地址。 URL（續） URL格式分成兩部份，第一個部份用來指定網路通訊協定， 第二個部份用來指定伺服器網域名稱及文件的路徑和檔名， 兩者之間以 ：// 符號隔開。如下所示： scheme://host.domain[:port]/path/filename 存取方式://完整主機網域名稱[:埠號]/目錄路徑/網頁文件檔名 以下是常見的ＵＲＬ格式。 http://www.csie.nctu.edu.tw gopher://gopher.csie.nctu.edu.tw ftp://nctuccca.nctu.edu.tw telnet://bbs.csie.nctu.edu.tw/ news:tw.bbs.comp.www mailto:[email protected] URL（存取方式） 協定名稱 功能 範例 http WWW的存取 http://www.hinet.net ftp 連接到ftp伺服器進 行檔案傳輸 ftp://ftp.ntu.edu.tw telnet 連接遠端主機進行 遠端登入 存取gopher伺服器 的資料 發送e-mail telnet://bbs.ntu.edu.tw gopher mailto gopher://gopher.ntu.edu.tw mailto://[email protected] URL（機構型態與國碼） 機構型態 .com .gov .org .edu .net .idv 代表機構 公司行號 政府機構 民間組織單位 教育機構 ISP服務商 個人 國碼 國別 .tw 台灣 .cn 中國 .hk 香港 .jp 日本 .kr 韓國 .us 美國 .eu 歐洲 .uk 英國 .de 德國 .ft 法國 Internet（網際網路）與Intranet ＷＷＷ帶來的便利也可以用在公司內部作為 訊息發佈及溝通的橋樑，優點是可以節省公 文的往返與紙張的耗費，這也就是所謂的 Intranet，與Internet不同的地方在於其區域縮 小為公司或企業內部。 基本觀念 網頁後端技術探討 網際網路 後端技術 客戶端及伺服器端 後端技術及客戶端技術的分別 後端語言 網際網路 Internet的意義是「網際網路」，源起於1960- 1970。起初，美國政府希望內部的電腦能夠 作資料的交換，便開始執行一個名為ARPA的 計畫，這個計劃便是Internet的起源。之後這 種技術由美國不斷伸展直到全世界，可惜這 種技術只能夠在網路上傳送文字。於是，以 Internet為基礎的WWW(World Wide Web，全 球資訊網)技術便被研發出來，網路也因此而 變得生動有趣。 後端技術 後端技術可以說是一個Web介面的後端應用 程式，使用者必須編寫一個程式，讓伺服器 的解讀引擎執行，使它在網路上運行。 HTML網頁是一個系統的操作介面，真正需 要處理的東西，都透過這個介面傳輸到後端 系統，它的工作便是處理這些資料，當然如 何處理是系統編寫人員所控制的。 客戶端及伺服器端 要明白「後端系統」的概念，你必須先明白 「客戶端」(Client)和「伺服器端」(Server)。 客戶端是要看網頁的人透瀏覽器發出的資料， 即是說，你的電腦接上網路後便是客戶端。 而伺服器端則是處理客戶端送出資料的一台 電腦。處理資料的過程，如下所示： 1. 提出需求(request) 客戶端 伺服器端 2. 處理客戶端的需求 3. 回覆(response) 後端技術及客戶端技術的分別 所謂的JavaScript、VBScript，是由一個使用 者寫了程式， 再由瀏覽器「翻譯」成電腦看 得懂的東西，變成大家看到的效果。由於在 客戶端「翻譯」，所以原始碼會全部送到客戶 端。 而後端技術如ASP(Active Server Page)、 PHP(PHP: Hypertext Preprocessor)等，這個 「翻譯」的過程，是在伺服端進行的，在伺 服器那裏有一個「翻譯員」(解釋引擎)，他先 解讀並且執行命令，再把結果送回客戶端。 後端技術及客戶端技術的分別(續) JavaScript、VBScript等運作如下所示： 伺服器──────→客戶端 傳送網頁 │ │瀏覽器：讓我來解讀吧。 └────────────客戶端：使用者看到網頁。 ASP、PHP等運作則如下所示： 伺服器───────────→客戶端 這些東西瀏覽器看不懂的，│ 我先來翻譯及執行吧。 │沒有看不懂的啊！ └────────客戶端：使用者看到網頁。 後端技術及客戶端技術的分別(續) 當然一個網頁也可以同時擁有兩種技術，只是雙方 不能交流而已。 伺服器──────→客戶端 解釋後端語言，│還有前端程式要解譯， 都翻譯好了 │翻譯的給我滾出來！ └─────────客戶端：使用者看到網頁。 由於兩者使用不同的技術，「翻譯員」也是不同的 人(一個是Server、一個在Client)，它們並不能溝通， 因此無法作訊息交流。 後端語言 後端程式語言種類明顯比前端程式為多。在 此就ASP/ASP.net、CGI、PHP、JSP及Cold Fusion逐一介紹。 ASP/ASP.net ASP可使用Jscript、VBScript及PerlScript的語法，加上內建的 五大物件來進行伺服器端的程式處理，目前推出了三個主要 的版本，它採用直譯的方式執行。ASP.net則是較遲推出，可 使用VB.net、C#.net及J#.NET的語法。它們都是Microsoft推 出的產品，因此必須在微軟視窗作業系統加上Internet Information Services(IIS)的直譯器才能運行，ASP.net則還要 加上.net Framework這個編譯器方可運行。ASP的運作速度稍 慢，但語法比較簡單；而ASP.net則在效能方面有所提升，因 為它採用編譯方式執行，可惜語法繁複，對初學者有一定的 難度。微軟視窗及IIS一直是發現漏洞比較多的產品，IIS更 有三個著名的漏洞──Unicode、ISAPI及MDAC/RDS。因此， 後端程式採用ASP/ASP.net有一定的危險性，但是ASP仍是入 門者的首選。 CGI、PHP、JSP及Cold Fusion CGI是眾多後端程式語言中歷史最為悠久，執行速 度最慢，編寫也頗為不方便，一個比較著名的CGI 程式編寫語言是Perl。 PHP是一個很接近C的網頁後端語言，由於它擁有強 大的函式庫，加上解讀引擎更新頻率快速，因此有 很多的使用者。PHP3是採用直譯的，而PHP4則是 使用編譯的。PHP被發現的漏洞較IIS少。 JSP採用Java的語法，由於較為複雜，因此使用者比 較少。JSP是採用編譯的，效能比ASP好。 Cold Fusion則是由一個個類似HTML的標籤組成， 非常簡單易用，但目前仍不太普及。 網頁製作流程 網頁製作前置準備 網頁編輯器： 小作家、FrontPage、Dreamwaver等 網頁瀏覽器 網頁上下傳軟體 其他工具 多媒體編輯工具 程式語言工具 資料庫工具 網頁瀏覽器（Browser） 在網際網路上瀏覽網頁的工具。目前最常見 的瀏覽器有下列幾種： Mosaic Netscape Explorer Mozilla Firefox 網頁上下傳軟體 Cute FTP：上傳網頁用，有支援續傳。 WS FTP Pro：受歡迎的FTP傳輸工具。 Leap FTP： 支援上傳檔案續傳。 FTP Voyager：操作介面類似檔案總管。可利用滑鼠拖曳， 亦可直接執行或閱讀遠端的檔案等。 Internet Neighborhood：(網路芳鄰）可以讓您輕鬆地直接以 檔案總管來瀏灠 FTP 站台，然後將您想要下載或上傳之檔案 利用滑鼠拖曳即可。 Getright ：很棒的檔案下載軟體，有續傳的功能。 Teleport Pro ：可將他人的網站全部抓下來觀摩學習。 網頁製作注意事項 網頁的命名法則 全部採用英文輸入 檔案名稱不可有標點符號或特殊符號，底線 與連接線可以使用 不可使用空白鍵 檔案名稱一律以小寫為主 檔案名稱最好不要全部是數字 為了讓所有的網站伺服器皆可資源，最好將 網頁的副檔名改為.htm 成功網站的要素 有豐富內容 瀏覽速度快 網頁版面靚 經常去更新 多些好連結 常去做宣傳 注意事項 首頁應有的特質及重要性 注意螢幕的解析度 兩種瀏覽器的相容性 檔名大小寫 無障礙網路空間 首頁應有的特質及重要性 About Open Page：打開browser看到網站的第一個部 份，有人稱之為Open Page(通常是首頁的一半或三 分之一)，這個部份應該包含網站的主功能(亦即使 用者上這個網站最希望或者最可能做的事)，ex. 一 進入Allproducts.com即可看到「Key word search」及 「Search by category」，應該儘量避免讓使用者還 要使用滑鼠上下左右拉才能看到他(她)所想要的功 能或資訊，有時資訊太多，在不得已的情況下，頁 面可以往下沿伸，但切忌左右畫面過大，不符一般 人的使用習慣，也會造成列印上的困擾。 首頁應有的特質及重要性(續) 主題明確：Open Page應包含公司Logo、網站主題(最好是一 段簡短的Slogan，讓使用者一看就知道這個網站主要功能或 架站目的，例如 Allproducts.com上的The world's best products directory for volume buyers) Navigation：讓使用者很明確了解他(她)目前在網站的什麼地 方(或功能)，首頁上應該有主要功能的連結，各個icon如果 可能的話，儘量加上一些純文字的說明及link；至於icon或者 link的擺放亦應有其相對應的邏輯，如與整個網站或大架構 較為相關的，放在較外層，與目前執行的功能或頁面較為相 關的link應該放在內層；另外，最好能在首頁上提供Site Map 的連結，讓使用者可以很快了解網站的架構；所有的link應 該把握 intuitive , obvious , fast的原則。 首頁應有的特質及重要性(續) Color or image：對於顏色的採用，應該考慮到該網 站的特性及與其它相關網站的區別，特別是首頁的 顏色配置，應該讓使用者感覺很舒服、沒有壓迫感， 但又不失其專業性，但切忌過度追求美感而犧牲其 功能性，就公司目前的網站設計理念，應該是功能 性的考量優於純美術的考量，首頁的設計最好設定 在60k以內，而且不要用太多層的table。 Meta tag：該部份不會出現在前端的頁面上，但網站 規劃時應該將該部份一併考量，做為網站登錄時使 用，網站上線時務必將相關資料加入。 其它：首頁上應該有service account及聯絡資料 注意螢幕的解析度 電腦的解析度設定不可能每台完全一樣，一 般個人用大多是800*600，而擁有大尺寸螢幕 者不來個 1024*768 似乎太對不起螢幕，然而， 這和網頁設計有關係，在不同的解析度下設 計網頁，會造成的結果可大不相同，甚至你 會發現，為什麼換了個解析度後，整個文字 圖片或表格均來個乾坤大挪移，甚至有些東 西看不到，尤其是使用分割視窗時更容易有 這毛病，那可就糗大了！ 注意螢幕的解析度（續） 最簡單的檢查方法就是更變螢幕的解析度之 後實際試看看，看網頁有沒有變形。 怎麼設 定螢幕解析度呢？ 方法如下。【開始】【設 定】【控制台】【顯示器】選取【設定】選 項，然後您就會看到【桌面區域】，上面有 個指針，用滑鼠去移動他就行了！ 在各種解 析度下瞧一瞧同一個網頁後就會發現...光是 三種解析度也會造成不小的困擾。建議可以 多利用表格來排版！ 瀏覽器的相容性 這是最討厭的問題了！明明有html4.0明確的規格書 出爐，瀏覽器的廠商卻仍我行我素，例如Netscape 開發出JAVA Script，IE不甘示弱便弄個VB Script... 更別說其他的語言了，光是基本標籤兩者的差異性 就頗大了！ 遇到這種問題，解決的方式不少，有人 利用CGI 或 是JAVA Script寫個判別瀏覽器的程式， 然後再為這些瀏覽器各自打造網頁，也有人乾脆就 用最簡單的語法來寫，求得兩者皆通，另外更性格 者，在網頁上大筆一揮『本網頁只適用於IE4.0以上 版本』這樣也算交差了事。 檔名大小寫 為什麼要注意這個呢！在這兒就要稍微解釋一下了。一般我 們個人使用的電腦多是用windows作為作業系統，因為他簡 單好用（雖然有時不穩定），用因簡單好用，所以他的一些 使用規定就少了，例如win.gif 和 win.GI F在 windows 的環境 下，他都把他們倆個當作是同一個檔案，所以在寫網頁時， 不論你大小寫怎麼改，windows 環境下都能正確無誤的秀給 你看，但是，一但上傳到網路主機上時，您就會發現事情大 條了！ 因為在網路上的主機系統很多都是採用 UNIX 的相關 作業平台如 LINUX 或是 FreeBSD 等，他們的使用規定是很 嚴格的，win.gif、Win.gif、win.GIF 對他而言是三個不同的 檔案，所以常常會發生『我在電腦上看沒事，一上傳後卻說 找不到檔案』的情形。 所以建議...沒事的話，檔名盡量用英 文小寫的吧！中文檔名就盡量避免...以免出什麼狀況。 無障礙網路空間 What? －什麼是無障礙網路空間？ Who? －無障礙網路空間是為什麼樣的人設 計的？ Why? －為什麼要推廣無障礙網路空間？ What 關於「無障礙網路空間」的3個W，首先就是「What？」 －什麼是無障礙網路空間？它跟無障礙設施例如導盲磚、 坡道斜板等殘障設施，讓殘障者使用方便的意思差不多嗎？ 概念相同，但不完全如此！你有沒有看過有些網頁，字型 設的很小很小，或是網頁的底色跟字的顏色很接近，要閱 讀網頁內容時，覺得很吃力？你有沒有看過有些網頁，有 好大一個區塊，感覺它不停的在閃爍，沒多久眼睛就覺得 很不舒服？還有些網頁，被點選的區域或是文字非常非常 的小，讓滑鼠很難瞄準點選？這些網頁，對於擁有正常視 力的你我而言，閱讀或是使用起來都很吃力了，更何況是 看不見、或是聽不到的人呢？所以，簡單來說，無障礙網 路空間，就是讓每個人－無論是否有身體上的缺陷，讓每 個頁面在不同的瀏覽器上，使用或是閱讀網頁內容時，都 覺得很方便、很好用。 Who 第二個問題「Who？」－無障礙網路空間是為什麼樣的人 設計的？網路的使用者除了一般人以外，還有可能是視覺 障礙（包括全盲、色盲、弱視等）、聽覺障礙（全聾或是 重聽）、行動或有認知障礙、對閱讀或是文字理解有困難 的人。另外，使用者有可能無法使用滑鼠或是鍵盤，例如 有些觸控式導覽機台（Kiosk）的操作方式都是點選 （Click）的方式，沒有滑鼠中拖曳（Drag）的功能；還有 有些電腦老舊、或是不同的作業系統、不同的瀏覽器、不 同的文字語言、連線的速度過慢等等，這些狀況都會使網 頁資訊的讀取產生或多或少、或大或小的問題。所以無障 礙網路空間的設置，是在製作網站時，要考量以上這些諸 多情形，採取「可及性（Accessibility）」的設計，讓不同 的使用者、不同的連線狀況下，都能順利讀取網頁資訊。 Why 為什麼要推廣無障礙網路空間？資訊發達的時代，網路讓 每個人搜尋資料、獲取知識的空間變大、速度加快，尤其 是各國的政府機關也紛紛架設官方網站，透過網路機制， 民眾可以很方便地上網申辦證照、繳交各種費用等等；學 校更是利用網路功能註冊、加退選修課程、繳交作業、報 名各種入學考試等等。在這種情形下，網路無異是一種公 共空間，如果政府機關以及學校的公眾資訊取得對某些民 眾而言是種障礙，那麼公民的平等權，例如就業、接受教 育等權利，就被忽視了。另一方面，科技發展越來越快速， 上網的工具不再只限於桌上型電腦；手機、PDA等設備， 也漸漸成為上網讀取資訊的工具。這些工具的視窗大小不 再是4:3的比例，瀏覽器也不一定是IE、Netscape，要如何 讓不同的上網工具、不同的視窗大小、不同的瀏覽器都可 以讀取網頁資訊，也是推廣無障礙網路空間的重要課題。 無障礙網頁開發十四條規範 對於聽覺及視覺的內容要提供相等的替代文 字內容 不要單獨靠色彩來提供特殊資訊 適當地使用標記語言和樣式表單 闡明自然語言的使用 建立編排良好的表格 確保網頁能在新科技下良好地呈現 確保使用者能處理時間敏感內容的改變 無障礙網頁開發十四條規範(續) 確保嵌入式使用者介面具有直接可及性 設計裝置獨立網頁 使用過渡的解決方案 使用國際與國內官方訂定的技術和規範 提供內容導引資訊 提供清楚的瀏覽網站機制 確保簡單清楚的網頁內容 無障礙網路空間測試網頁 無障礙網路空間服務網 http://www.enable.nat.gov.tw/check.jsp W3C Markup Validation Service http://validator.w3.org/ Watchfire WebXACT http://webxact.watchfire.com/