Web设计入门.docVIP

Web設計入門 一、前言 除非你這幾年過著沒水沒電的原始生活，否則應該有聽過一個叫全球資訊網( World Wide Web )的東西紅透半邊天。網址到處都看的到：從雜誌到報紙，從電影海報到佈告欄，儼然成為生活中的必需品。所以，學習網頁的製作也成為新世代年輕人必備的技能之一，建構一個網站成本低廉，可是網站觸角所能及之處可以說是無遠弗屆，這一門課就是教大家以最少的成本建立一個自己的網站，你可以把自己想要告訴別人的東西放到網路上，不管是自己創作的歌曲，自己畫的畫或者是自己寫的文章、程式作品、影片等可以數位化的東西，網路都可以幫你傳播讓全世界知道。網路功能強大，想要徹底利用它就從學習製作Web開始！廢話不多說，立刻帶大家進入數位化的Web世界。 二、Web網站的架構 要設計一個Web網站當然要對整個Web架構有所了解，我們第一堂課就先概括介紹一下整個Web的基本架構。 (1) URL 當你想要造訪一個網頁或者是Web網站時，你必須使用一個Web位址，這個位址的正式名稱稱為URL。URL( 唸做U-R-L或者是發音和girl類似的”url”)是一致資源定址器( Uniform Resource Locator)的縮寫，他就像Web網站在Internet上的街道位址，我們利用下面一個範例來說明一個Web網站如何被找到： 這是一個URL最基本的為三個欄位一一說明如下： ?http:// 這一段是指這一段位址的通訊協定，因為我們是Web位址，所以通訊協定就是http相對的，如果要用ftp就把前面打上ftp即可。 ?.tw 這一段是主機名稱，利用DNS由右到左查詢而來，由於DNS牽涉有點複雜，所以在此先保留，現在只要知道網頁是放在.tw這台機器上就好。 ?Index.html 這就是網頁的檔名，這是一個用HTML所寫的網頁，所以副檔名為html以後我們還可以看到其他不一樣語言所製作的網頁。 所以我們可以知道，當我在瀏覽器輸入網址時，瀏覽器會先判斷是哪種通訊協定決定處理的方式，在找到遠端主機後把文件下載下來，利用解譯程式把文件轉成網頁呈現在瀏覽器上。這就是URL位址的功用了！ (2) Web伺服器 每個Web網站和Web網頁都需要一個Web伺服器。簡單的來說，Web伺服器就是一台執行特殊軟體的電腦，這個軟體能夠讓電腦存放一個以上的Web網站。這台Web伺服器則是隨時連接到Internet上。 當我們在瀏覽器上輸入一個URL或在網頁中按下一個連結時，事實上我們是將需求送往存放資訊的伺服器。這個過程就類似於使用電話來撥出號碼時。我們的需求會要求存放所有資訊的電腦來向我們顯示我們所想看到的網頁。 由於Web伺服器架設需要一台電腦專門提供Web服務，但是並不是每個人都有這個閒功夫自己架設伺服器，所以許多的大型網站提供了免費個人網頁的功能，因此，我們到這些網站申請免費的網頁空間，這樣就可以把自己寫的網頁公佈到網際網路上了！下面就是一些提供免費網頁的網站： Yahoo!奇摩站 PCHome電腦家庭 Tripod Online 因為這些網站的主要服務對象都是初學者，因此讓他們上傳和維護網站的工作變的相當簡單。他們大部分都使用了Web介面的工具來進行上傳和維護，這表示甚至不需要其他軟體。 (3) Web瀏覽器 Web瀏覽器是可以在電腦上執行的軟體，他能夠讓我們觀看Web網頁。他能夠解譯HTML和其他Client端的Web程式並在螢幕上顯示文字的內容。有許多的瀏覽器也用在檢視電子郵件及新聞群組。 最常見的瀏覽器就是Netscpae Navigator( 網際領航員，簡稱NN)和Microsoft Internet Explorer(網際探險家，簡稱IE)。下面就是Netscape Navigator和Internet Explorer的畫面： 二、介紹一些製作網頁常見的工具及語言 當我們決定要在Web上設計能夠被觀看的內容時，我們要根據我們所顯示的內容做出許多抉擇。接下來將介紹在Web上顯示內容的一些最常見的方法，並且簡單的介紹如何使用這些方法。 我們可以把網頁設計分成頁面設計和程式設計，頁面設計是為了網頁的美觀，程式設計則是提供了使用者和網頁間的互動，讓我們設計的網頁有更多的功能。所以接下來就把介紹的主題分為兩大部份。一個是網頁製作及管理工具，另外一個是寫網頁所提供的語言。 (1)網頁製作及管理工具 Macromedia Flash Flash是網頁製作上整合圖形、聲音、影像的頁面製作軟體，使用者可以在有限的頻寬下製作相當炫麗的畫面，搭配ActionScript語言可以輕鬆做出許多和使用者互動的介面。 Macromedia Dreamwaver Dreamwaver也是Macromedia公司的產品之一，主要的任務是繪圖及製作頁面。它提供了一