Web设计入门.doc

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網站如何被找到：.tw/index.html 這是一個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 FlashFlash是網頁製作上整合圖形、聲音、影像的頁面製作軟體，使用者可以在有限的頻寬下製作相當炫麗的畫面，搭配ActionScript語言可以輕鬆做出許多和使用者互動的介面。Macromedia DreamwaverDreamwaver也是Macromedia公司的產品之一，主要的任務是繪圖及製作頁面。它提供了一個非常強大的所見即所得的介面，整合HTML、CSS、XML等標記及樣規讓他設計出來的頁面非常漂亮。網頁原始碼非常乾淨，像是人寫出來的也是一大賣點之一。Corel DrawCorel Draw是Corel公司所開發的一套向量繪圖軟體，內附的網頁製作工具雖然和前面兩套比起來比較陽春，但是用他強大的向量繪圖功能可以設計出許多漂亮的網路元件。Microsoft WordWord雖然是文書處理軟體，但是他也支援HTML的製作，只要在存檔的時候選擇存成HTML格式即可，因為製作簡便直觀。Word又是大家比較熟悉的工具，所以也被常運用來製作網頁。Microsoft FrontPageMicrosoft FrontPage是微軟公司所開發的網頁製作及管理個工具，製作頁面功能也比Flash、Dreamwaver、Corel Draw陽春，但是功能也還算齊全，適合網頁初學者使用。(2) 網頁程式語言網頁程式語言提供了使用者與伺服端的互動，分為伺服端及客戶端兩種。伺服端的語言程式的編譯與執行是再遠端伺服器上，伺服器在透過網路將結果傳給使用者，這樣的好處是：客戶端不用將所有的資訊都往自己的電腦塞，節省網路傳輸平寬的使用。客戶端的程式通常是瀏覽器將程式原始碼下載到客戶端電腦上再將結果邊譯，這樣做的好處是可以節省伺服器的CPU負荷。一般常見的伺服端程式語言有：PERL、ASP、JSP、PHP、C等，客戶端語言則有：Javascript、VBScript、ActionScript(前面的Flash有提到過)。(3) 網頁格式化及樣規上面提到那麼多工具，及程式可以運用在網頁製作上，現在開始說網頁上的畫面是靠那些語法格式畫出來的。一般而言，一份文件若沒有經過格式化，則稱為純文字文件。沒有顏色，圖片，聲音，只有文字，這樣的文件非常難看，且不易閱讀。所以就發展了所謂的標記語言作為網頁格式化之用，最常見的就是HTML語法，HTML( Hypertext Markup Language)是網頁製作最基本也是最容易學習和精通的語言。通常瀏覽器拿到一份HTML檔案會依照他的語法把他格式化成使用者所希望看到的樣子，如畫面的範例：HTML原始碼：Hello World瀏覽器呈現的結果：hello world這是一個簡單的HTML語法，所要格式化的是”HELLO WORLD這個字，用兩個標籤將”HELLO WORLD”這個字包起來，就可以告訴瀏覽器我們希望這個字在瀏覽器呈現的方式，其中，是對於文字格式設定的標籤，這個範例用到兩個設定一個是size也就是告訴瀏覽器HELLO WORLD要顯示的大小，我們這裡的設定是4點，color很清楚就是表示顏色，我們這裡用紅色呈現這個字，最後面的表示的是這個標籤的設定在這裡結束，也就是說只有在和之間的文字才接受這個設定啦！下面就是在瀏覽器的結果