Transcript 2-1 網站與網頁
2-1 網站與網頁 本章中，來說明網頁、網站等基本觀念以及工 具，請您先準備好合適的工具，才能動手建置 您的網站。想架站的人，應該都曾經連上網際 網路，欣賞過其中各式各樣的站台，才會想自 己也來動手架站，那麼你知道網站是由哪些東 西組合而成的嗎？當然得先搞清楚這些觀念， 後面實際動手操@時，才不會霧煞煞。 入門觀念的說明 WWW是由無數個網站和網頁所構築而成，當 您在Internet遨遊時，就是在各種不同的網站 中穿梭，每個網站都提供不同的資訊，詳盡的 文字資料、活潑的動畫展示、炫麗的圖片效果， 這些都是設計者心血的呈現。 網站就是網頁的集合 網站其實是許多的網頁根據其特性，分門別類 集合而成的，所以網站設計者在架設網站初期 就必須先規劃好網站的架構、根據架構來製作 網頁，讓網頁之間互相連結，並且具備相關性。 當您先架構出網站時，才能將自己所想的內容， 一一透過網頁來呈現。 構成網頁的要素 清楚網站的意義之後，底下則來說明網頁的內容。當 你進入一個網站時，所看到的畫面就是網頁，網頁是 指當我們連上網路時，使用瀏覽器軟體所看到的任何 一個畫面，都是一個網頁，其內容主要包含了文字、 圖像，還可以加上聲音、動畫等等。和雜誌或圖書不 同的是，雜誌是平面性的文r，除了文字和圖片沒有其 他，但是網頁就不同了，透過超連結，可以從這一個 網頁連到其他的網頁，其他的網頁也會有其他的連結， 透過這些龐大的連結，內容可以說是無限大，因為超 連結使得資訊的內容可以無遠弗屆，資訊傳達的方式 可以由點而線最後到面。 圖形 圖片可說是網頁視覺影響效果中最重要一環， 配合適當的圖片，絕對可以讓你的網頁呈現獨 特的風格，但相對圖形也佔掉網站中很大的資 料量，對瀏覽的速度影響很大。通常網頁可接 受的圖檔格式為GIF、JPEG兩種。由於圖片 會拖慢網頁的瀏覽速度，所以一般並不會將網 頁全部作成圖片，底下是圖片經常使用的地方。 超連結 超連結是Internet中最重要的東西，因為當滑鼠游標點 選超連結後，就可以移動到其他的地方，不論是網站、 網頁、檔案或是電子郵件，都可以透過超連結將網頁 上的各項元素加以連接。如同馬路上的路標，超連結 就是網站的路標，來指引您瀏覽正確的頁面，找到想 找的資訊。連結的種類大致分為檔案連結、網址連結、 電子郵件。而可被作為連結的元件包含了文字、圖形、 區域圖形、頁框。當然連結]可以發生在同一個網頁之 內。底下就來看看這三種不同的連結。 2-2 網頁程式語言 本書是透過HTML在Dreamweaver的環境下來 製作網頁，也就是直接透過網頁程式語言一一 輸入內容，再透過瀏覽器轉為網頁內容，底下 來認識常見的網頁程式語言。 何謂程式語言 所謂的程式語言，就是設計讓電腦執行特定動 作的文字，由於電腦並不認得中文、英文等文 字，只認得0和1，當我們要指揮它從事特定動 作時，就必須透過程式語言將我們常用的指令 轉換為電腦可辨識的語言，才能順利執行。 常見的網頁程式語言 早期製作網頁，一定得慢慢的輸入程式語言的 指令來完成網頁內容，而現在透過網頁製作軟 體就可以完成這項工作了，不過有時還是有需 要輸入程式的地方，底下就來看看常見的網頁 程式語言。 HTML HTML(HyperText Markup Language)超文件 標記語言，是目前最常見用來撰寫網頁的程式 語言，用來表示網頁文件檔案的規範。HTML 透過標記來確定網頁顯示的格式。HTML的原 始檔案為純文字檔，所以利用記事本等單純的 文書編輯軟體就可以輸入程式。 HTML檔案中並不包括圖片、動畫、音樂等多 媒體元件，不過透過指標的輸入，就可以指向 這些多媒體檔案，讓網頁可以正確的顯示圖片、 動畫等多媒體效果。雖然HTML的檔案格式為 純文字，不過原始檔案的附檔名為.htm或.html， 這樣才能透過瀏覽器來開啟文件。 XML XML(eXtensible Markup Language)可擴展標 記語言，用來傳送Internet的資料或資料的處 理，XML並不是用來取代HTML的程式語言， 而是用以補HTML的不足。其檔案文件同樣是 以純文字所組成，其副檔名為.xml。 CSS CSS(Cascading Style Sheets)階層樣式表， 用以定義網頁內容的資料樣式。如同Word可 以定義樣式來統一文件的格式，網頁也可以透 過樣式表來建立文字的樣式，讓網頁的文字可 以統一。在本書的第15章會說明如何建立並使 用樣式表。 VRML VRML(Virtual Reality Modeling Language)虛 擬實境描述模組語言，用以呈現3D物件的效 果。不論網頁、圖片都是平面效果，當然透過 動畫也可以呈現立體效果。不過目前VRML已 經很少使用在網頁上，被Flash所取代了。 Script Script是內嵌在HTML程式碼中的小程式，主要用來顯示動態和 即時的資料，例如網頁特效、即時日期、股市資訊等，大多透過 Script來顯示。目前常用的Script有Netscape公司所開發的 JavaScript和Microsoft所開發的VB Script，二者都可以用來撰寫 瀏覽器端的Script。 而伺服器端的Script目前常見的也有二種，分別是ASP和CGI。 ASP(Active Server Pages)動態伺服器網頁是在微軟的IIS或 PWS等Web伺服器上執行的Script，是微軟發展的一種，利用 Active X 技術來開發動態網頁的環境，是屬於 Active X Server 端的技術，網頁設計者可以利用 ASP 的技術將 Script 敘述及程 式碼嵌在 HTML 檔案中，以產生動態、互動、高效能的網頁。 CGI (Common Gateway Interface)共同閘道介面， 也就是連結網路主機端與瀏覽器端，使其能夠 作檔案存取等動作的一種介面，CGI程式可以 使用多種程式語言撰寫，最常見的是由Perl或 C撰寫而成。ASP目前最常被使用在網頁互動 資料庫中，而CGI也是互動程式介面，例如留 言版、討論區等都是CGI程式。 Java Applet Java Applet是使用Java所撰寫的程式，同樣 可以內嵌在HTML程式中，製作網頁的Java Applet特效。例如不少網站常見的計數器、水 波效果、跑馬燈等讓網頁更加多變。 DHTML DHTML(Dynamic HTML)動態HTML， DHTML同樣是用來撰寫網頁的程式語言，其 所使用的網頁程式標籤和HTML相同，不過在 功能上卻有相當的差異。HTML最大的缺點就 是當您更新網頁後，瀏覽器必須從伺服器重新 下載整個網頁，而微軟提出了DHTML的技術， 可以在網頁下載完後插入、刪除或取代網頁中 的HTML程式，瀏覽器也會根據所根據的程式 碼內容來更新網頁內容。 2-3 製作網站必備工具 準備好要製作網頁了嗎？在動手之前讓我們先 來看看要製作網頁需要哪些工具軟體。當您去 書局隨便繞一圈，可以發現教人製作網頁的書 著實不少，而且各家所使用的軟體都不盡相同， 難道每一套軟體都需要學會嗎？ 網頁排版編輯軟體 要製作網頁當然需要一套網頁排版軟體，目前 市面上最多人使用的就是FrontPage 和 Dreamweaver這二套軟體。FrontPage是微軟 Office家族中的一員，以既有Office的使用者 為基礎加上容易學習、入門的關係，使用者一 直相當多，是網頁設計入門的工具。 Dreamweaver也是一套相當好用的網頁排版 軟體，它具備了網頁排版、組頁、連結、上傳 等功能，甚至連網站的管理維護、資料庫設計 等複雜的網頁技術也一應具備。 FrontPage 對不少初學者而言，多半會選擇FrontPage來 製作網站的，因為軟體介面比較容易上手，身 為Office 家族的一員，當然有相似的介面，所 以不需要重新學習軟體的操作和技巧，而且軟 體之間的資料互換也相當方便。 Dreamweaver 這套網頁排版軟體，可說是近年來最Hit的軟 體之一，除了因為同門的Flash受矚目外，網 頁圖層的使用、強調所見即所得的觀念，才是 它受歡迎的原因。Dreamweaver可說是網頁 程式設計師的最愛，和FrontPage相比，在程 式碼的取代、網頁效果的使用，就網頁製作上 功能確實優於FrontPage。本書在編寫HTML 等程式時，會在Dreamweaver介面下處理， 可以即使瀏覽到網頁的內容，並發現錯誤。 圖片影像處理軟體 要有漂亮的網頁，當然少不了好看的圖片，所 以如果你會一些基本的圖片編輯技巧，而且網 頁的圖片必須經過最佳化來縮小圖檔的大小， 放在網頁中才不會拖慢瀏覽的速度。 PhotoShop 說到影像處理軟體，Photoshop是多數人的首 選，製作網頁時想要有漂亮的圖片當然得透過 Photoshop影像合成和特效的功力，來設計出 各類別具風格的圖片。如果你是專業的美編人 員，製作的成品需要印刷甚至對外販售，那就 得好好學習這套軟體。如果你希望網頁的特效 影像非常漂亮，也可以考慮用PhotoShop來製 作，不過想要短時間上手學會這套軟體，並不 是件容易的事。 Photo Impact 國產的Photo Impact，一直在國內的市場上有 不錯的風評。不但好用而且售價也遠比那些國 外廠商的軟體便宜。為了方便使用，Photo Impact也內建了相當多的範本及特殊效果，例 如邊框、光、雲彩特效等，可以直接套用，對 初學者而言不需要花費過多的時間，就可以美 化影像。 網頁動畫多媒體設計軟體 多媒體的網頁在近年來越來越熱，每一個網頁 都在比炫、比華麗，也使得這類軟體變成目前 各大電腦書籍、雜誌的熱門話題，不過筆者建 議初學者暫且不要去碰他，先把基本的東西學 好，才來搞清楚這些軟體的內容也不遲。 Flash 這應該是近期最熱門的軟體吧！Flash可以做 出各種文字、網頁的動態效果、動畫特效，你 有看過春水堂的阿貴動畫嗎？就是Flash的傑 作。因為Flash的檔案體積相當小，可是效果 卻非常炫麗，所以使用人口越來越多。 GIF Animator 友立Photo Imapct隨附了GIF Animator，也是 一套不錯的動畫製作軟體，可以將圖檔如GIF 檔案轉為動畫，那GIF檔從哪來，透過 PhotoImpact來製作囉！這二套軟體都有精靈 指引，只要跟著步驟走就沒問題啦！ 其他工具軟體 這些工具可能和製作網頁無關，不過都是你在 做網站時必備的工具軟體，這些軟體的使用都 不複雜，所以只要多試幾次相信可以很快上手。 這些工具軟體包括FTP檔案傳輸、螢幕擷取軟 體、看圖軟體和離線瀏覽軟體，當然每一大類 的軟體工具都有相當多套不同的產品可供選擇。 FTP檔案傳輸軟體 把網頁做好後，還得把做好的檔案傳到我們申 請的免費網頁空間中，別人才能看到這個網頁 的檔案，目前常見的上傳的方式有三種： 透過網頁編輯軟體來上傳：直接利用網頁編輯 軟體來上傳，軟體內提供了FTP上傳功能，讓 您可以將檔案上傳到伺服器中。 直接透過網頁來上傳：提供免費網頁空間的網 站，讓您可以透過Web介面來上傳檔案到伺服 器中。 利用FTP檔案傳輸軟體：透過FTP工具軟體， 將檔案上傳到免費網頁空間所提供的網站FTP 伺服器中，目前常用的FTP工具有Cute Ftp、 Leap Ftp。 抓圖軟體 你在瀏覽本書時，有沒有想過筆者是怎麼呈現 這些視窗圖呢？用Print Screen 鍵當然可以， 不過它只能抓下全螢幕圖，想擷取局部圖或視 窗圖，就得靠專業的抓圖軟體來處理了， HyperSnap是筆者最常用的抓圖軟體，一來設 定方便，二來連VCD、DVD這些畫面都可以 順利擷取。其他像PhotoImpact也內建的抓圖 功能，可以幫您執行螢幕擷取的動作。 看圖軟體 專門瀏覽及管理圖片的軟體，雖然不是必要工 具，但如果圖檔很多，一個個開是相當浪費時 間的事，利用看圖軟體就可以一次瀏覽整個資 料夾的圖片，對需要處理大量圖檔例如像筆者 這種桌布迷，就非得有一套好用的看圖軟體。 下載續傳工具 下載工具就是專門用來下載檔案的軟體，這類 軟體可以幫助你比較快速的下載檔案。如果你 常常上網，那應該知道目前台灣網路的傳輸品 質實在是不怎麼樣，想看一個網頁總得花上好 幾秒，更何況是要抓一個檔案回來。如果不幸 碰上網路大塞車或是斷線，那抓了一半的檔案 就毀了，得重頭來L，實在是太辛苦了。這也 就下載軟體最大的功用，就算是檔案抓了一半 就斷線，下次連線時會保留前半段，讓你只抓 回後半段就好了。 離線瀏覽工具 當您看到喜歡的站台應該會馬上把網站加入我 的最愛，才可以經常上去瀏覽。不過每次上網 也挺麻煩的，加上當網路塞車時就會拖慢瀏覽 的速度。這時您可以利用離線瀏覽軟體把網站 的內容抓下來，就可以慢慢的看。 你該準備的工具 介紹了這麼多種軟體，到底要準備哪些軟體才 能開始動手製作網頁呢？ 你需要一台可以連上網路的電腦。 一套網頁編輯軟體(本書使用的是FrontPage)。 免費網頁空間的帳號、密碼和網址。 準備好這些工具，就可以開始進行準備製作網 站前置工作了。 2-4 不同瀏覽器的差異 當您在製作網頁時，當考量使用者在瀏覽網站 時，所看的網頁是否與您製作時所看到的內容 一致，這關係到網頁的版面以及瀏覽器的問題。 而瀏覽器的差異，就得從瀏覽器的歷史談起了。 IE不支援的Java 效果 早期網路風行時，多數人都是使用Netscape 這套瀏覽器軟體，不過微軟為了搶下瀏覽器市 場，而推出了Internet Explorer，從早期的免 費都後來在作業系統中就隨附了Internet Explorer，所以IE也成了最多人使用的瀏覽器 軟體。 舊版的瀏覽器 當然另一個考慮的因素就是使用者所使用的瀏 覽器版本較舊，對於一些引用新技術的網頁無 法順利瀏覽。例如當您在網頁上放置Flash MX所製作的動畫時，就必須要下載Flash MX Player才能瀏覽。 2-5 網頁設計硬體需求 使用軟體來完成各項工作的同時，一套好的設 備當然有相當的幫助。Photoshop的使用者應 該或多或少都碰過記憶體不足的問題，在使用 Illustrator繪圖時，滑鼠和觸控筆、觸控版相比， 方便和實用性當然也有差異。所以想順利的設 計出漂亮的網頁，電腦配備當然也不能太差， 否則單單作個網頁元件都要等個幾秒，那想製 作一張放在首頁的大圖，不就得經常望電腦等 待而興嘆了。 使用Macintosh或是Windows為操作 平台 過去美工專業設計使用Macintosh而個人使用 PC是非常清楚的劃分，但隨著網頁設計軟體 的興起，那個藩籬就漸漸被打破了。Flash的 PC使用者絕對比Macintosh多，而套用PHP、 CGI程式時，Windows所碰上的問題也肯定比 Macintosh少，那使用者應當如何呢？ 如果您是個人使用或以網頁設計為主，那PC 當然是最好的考量，過去以Macintosh為主的 軟體，不但都有Photoshop版本，而且使用介 面上並沒有太大的差別。即使公司要求使用 Macintosh，那熟悉軟體的您而言相信要入門 也非難事。 記憶體 在平面設計的環境中，電腦的記憶體多寡當然 對於作業的流暢度有影響。使用者當然會希望 記憶體越多越好。以目前的電腦配備而言，不 論是CPU、記憶體和顯示卡其實都不用特別提 出來討論，因為配備都相當夠用。 螢幕 一個專業的美工設計，目前至少擁有一台17吋 的螢幕，甚至19吋的螢幕，那螢幕要討論甚麼 呢？就是液晶螢幕了，同樣大螢幕、大尺寸， 所佔的桌面空間比CRT螢幕小的多，所以液晶 螢幕漸漸成為多數人的新寵。但也有不少美工 人員反應液晶螢幕有色偏，和既有螢幕比起來 要進行影像會增加難度。 儲存媒體 這裡的儲存媒體所指的不單單是硬碟，其實硬 碟應該一點都不用擔心。目前最常見的硬碟容 量是80G，檔案的存放綽綽有餘。不過網頁設 計師經常需要將完成的作品交給公司或其他使 用者，哪一台光碟燒錄機就是少不了的設備。 目前一台光碟燒錄機的價格不超過台幣2000 元，幾乎成為個人電腦的必備設備了，如果您 的電腦還沒有燒錄機，那實在有點遜喔！ 數位相機 美工設計人員應該都有一台掃描器吧，不過網 路上的圖像並不需要高解析度的圖片，所以使 用掃描器來掃圖自然方便，不過數位相機也是 一個更好用的工具。目前數位相機越來越普及， 而且數位影像直接傳輸到電腦，使用起來也方 便。 不過數位相機的圖片若要使用在網頁中，多半 需要經過處理，因為拍出來的色彩可能過暗或 是顏色有差異，這時就發揮您高超的 Photoshop功力，將您生活中的點點滴滴都放 到網頁上吧！