3-1　想做出甚麼樣的網站 現在您對網站、網頁已經有基本的概念了，不過要實際開始製作網站，還需要經過規劃的過程。本章中尚未開始動手設計網頁，而先來學習建立網站的重要觀念也就是網站的規劃與設定，首先您必須先對自己要建立的網站有基本的架構，才能動手建立網站，做好後續網頁設計的工作。可別看這個過程，這是能不能建構出一個好網站的重要關鍵，也是設計網站人員必須用心思考、規劃的部分。

基本流程介紹 要快速的學會如何設計網站，最快的方法就是馬上動手做，不論做的好壞，唯有真的動手設計製作一個網站，才能從中發現問題，找出自己不懂的地方，再慢慢解決問題。若永遠在思考或看書的階段，沒有動手操作軟體，只能了解其中的皮毛而無法建立網頁設計的完整概念。 當然要動手做網站第一個會產生的問題，就是我應該要製作甚麼樣的網站呢？我們提供您以下幾個思考的方向！

商業公司網站 隨著網路的興起有相當多的公司都會有公司的專屬網站，不論是用以宣傳公司、銷售產品或是單純的提供資訊，都是為了可以替公司創造出不同的媒體或視野。這類網站的特點是文字和圖片都多，網站不會過於花俏或活潑，根據公司、行業特性來設計出符合公司形象的網站風格。

網路商店 網路也是銷售產品的大宗，所以有相當多公司或個人透過網路購物，雖然若是公司網站也可以歸類為商業網站，不過購物網站要考慮的因素更為複雜。從最基本的安全性談起，購物網站最方便的付款方式就是利用信用卡支付款項，但如何提供消費者一個可安心消費的環境，就是購物網站公司搨n注意的部分。

媒體網站 所謂的媒體網站可不是單指大眾傳播媒體所架設的網站，而是透過網路提供各類資訊包括新聞、影片、線上廣播等，不論是即時或是非即時的資訊，都能讓人掌握社會的脈動，從中獲取各類知識或常識。

休閒、娛樂網站 休閒娛樂網站當然就是專門用來告訴你哪裡有好吃的、好玩的、好康等。不論美食、旅遊、藝文、遊戲，都有相當多專門提供這類資訊的網站。這類網站的特色是以有較完整的資料收集與呈現，讓您可以在網站上找到符合自己需求的資訊，當然搜尋功能也不能少，這樣根據每個人不同的要求，迅速提供合適的內容。

個人網站 您為甚麼要作網站呢？目前網路上有相當多的個人網站，各自有不同的目的，也些是因為個人的興趣和喜好，透過網路來找到更多的同好，還有些人為了宣傳自己打打廣告，或是教學心得的分享等等，而有些人完全沒有目的，只是想要有一個自己的網站。

設定網站的主題並且替網站命名 確定自己製作網站的目的之後，就得決定網站的主題，看你是要作哪一類的網站囉！這樣也才能幫自己的網站想個響亮的名字。網路上各種網站都有，千奇百怪，想找一個別人沒有作過的主題，是相當困難的事情，其實也不需要這麼作。

中英文並重 雖說國內不斷推行中文大五碼網站，但英文網址才能接通全世界，若您的網站是放在免費空間上，那最好申請轉址服務，才能獲得比較好記的名稱。目前越來越多人或公司直接去申購網址，讓這個獨一無二的名稱可以一直跟著您。

網址越短越好 網址和網站名稱越短，一來可以省去輸入的時間，二則好記、好背，對網頁觀眾記住網站當然有所幫助。不過目前多數英文單字的網站，都被特定企業或是網路蟑螂買走了，想找到好記的網址名稱並不容易。這時就得從中文或網站特性開始想起。如果無法取個簡短的名稱，那單字的組合也可以，並建議使用破折號來分隔，例如Design-Mall一樣，而非將所有的單字都連成一串，這樣就失去了以片語或單字組命名的意義了。

獨一無二的代表性 網站名稱的代表性也是不容忽略的，單單好記的名字卻無法讓人聯想到網站的內容和主題，同樣會讓人遺忘不再想起網站的內容。和網站內容、目標相輔的名稱，雖然不見得好記但容易聯想，所以不少公司、雜誌的網站會直接以名字作為網址和網站名稱，就是希望消費者直接從品牌名稱就可以進入該公司的網站。

設計範例網站時所希望達成的目標和選定的主題 僅供各位參考： 網站名稱：旅人手札 網站目標：筆者自己設計的個人網站，主要用來記錄旅行的心情以及沿途的景色，作為旅途的記錄： 1. 提供旅遊的心得與照片。 2. 提供自助旅遊的心得和資訊。 3. 提供網頁觀眾各地的旅遊景點與特色。 4. 提供網頁觀眾旅遊心得的參考與討論。 5. 做出一個具有設計感的網站。

收集分析資料 當確定所要製作的網站內容之後，下一步便是蒐集相關資料，並且加以分析。當您想製作一個介紹三國志遊戲的網站，當然要搞清楚遊戲的內容、人物、劇情、過關畫面等，這樣網站的內容對於三國志的愛好者才會有所幫助，也才會經常上您的網站尋找相關資料。 或是您的網站是個人自助旅遊的去東京的心得和旅行情報，那當然少不了東京各區域的風景名稱介紹、照片、路線交通資訊等，這些資料您未必都知道，當然就得透過網路到其他的網站找到相關的資料。

規劃網站架構 決定網站的主題後，就開始設計網站的架構了，可別想得太複雜，筆者只是要你先把自己想做的東西加以分類，像如果是家族的網站，那少不了有照片、日記或是自我介紹，作個桌面的網站，就可以分為桌布、螢幕保護程式、桌面玩具等，底下再去細分桌布區，還可以有風景、遊戲等，當然各區底下還可以再細分為不同的層次。

網站的設計與製作 把網站的大綱和資料都蒐集好後，當然就要開始動手施工。當您製作網站架構之後，就是根據架構逐一準備網站的資料。例如網站共用的圖片、Logo、每一個網頁的文字，您還可以替網頁加上動畫、多媒體等效果。

網站上傳發行 網站空間申請好了，網頁也製作好了，恭喜你！只要利用該網站上傳功能，或是FTP(上傳軟體)將你辛苦製作的網頁上傳至所申請的網頁空間之中，網站就開張了！您可以透過FrontPage的Web發送精靈或Dreamweaver的上傳功能來上傳檔案，或是利用FTP上傳，不論哪一種方式，要記得把所有的網頁、圖片等相關檔案，一併傳到Web伺服器中。

網站的更新與維護 網站可不是開張就行了，這只是你的第一步，往後還需要不斷的更新你的網站內容，這樣網友們才會願意一再來你的網站拜訪。當然網站的更新會讓您的網站越來越大，這時網站檔案的管理就相當重要了。

人氣及商業網站的注意事項 當你在設計個人網站時，考量上面的因素就應該足夠了。但若希望設計一個超人氣的網站，或是公司、學校的網站，那還得考慮網頁瀏覽觀眾和自己的硬體設備。

多媒體軟體版本也得一併考量 隨著寬頻用戶的增加，瀏覽速度不在是最主要的考量後，在網頁上放置Flash動畫、多媒體影片或音效的播放和線上影音的設計者越來越多，特別是Flash動畫幾乎成為公司首頁的招牌門面，再使用這些新技術的同時，當然也得考量到瀏覽器的版本和播放程式的版本。

希望網站可以帶來的附加效益 你希望這個網站也可以達成的附加效益是什麼？例如你想順帶提升企業的形象？你想表達企業的精神？除了符合網站目標外，網站可以有越多附加效益當然越好。

3-2　網站的架構與目錄結構 經過第一節的分析，現在您腦中對自己要建立的網站應該有清楚的輪廓，也動手蒐集了相關的資料，作為設計網站內容的輔助，而這只是您的第一步。接著確定網頁內容的重點，規劃出網站的特色，就要實際將想法化為文字，將整個網站內容作成具體的執行企劃書。

透過樹狀圖來網站架構 一般最常見的網站架構圖是用樹狀圖來表示，一來他的格式和檔案總管相類似，二來分層次相當清楚，在網頁編輯軟體中，也可以使用樹狀圖來瀏覽網站的。當您在繪製樹狀圖時得先將網站加以分類。例如底下用班級網站來介紹分類方式。

網頁檔案也需要分類 您平時的檔案、文件是否有分門別類加以存放呢？如果沒有，那應該經常發生找不到檔案的事情吧，若平時就有透過資料夾來分類，要找到資料檔案也方便的多。網頁檔案也是相同，必須要透過資料夾加以分類，例如網頁檔和圖檔分開，而圖檔也得再加以分類。

3-3　網站的維護與更新問題 隨著網站年齡的增加，只要您用心經營自然會吸引到一群固定的網頁觀眾，當您掌握了這一群網頁觀眾後，就可以更清楚知道所設計的網站是否符合他們的需求，以及還缺少甚麼？需要補強甚麼？不過網頁觀眾的要求五花八門，是否合理或可行還是得要您自己下判斷才行。

網頁空間的不足 公司網站自然問題較小，但個人網站就得面對空間不足和網頁瀏量增加的困擾。特別是網頁內容都是放置在免費網頁空間的網站上時。目前的免費網頁空間所提供的空間從3~10MB都有，也都有檔案大小的限制，所以當網站成立一段時間後，勢必要考量移除舊資料，或請他人提供免費網頁空間，不然是肯定不夠用了。

會員制與收費的考量 另一個困擾的問題就是網站的流量了，製作網站當然希望看的人越多越好，但當瀏覽網站的人數增加就造成的瀏覽的問題。放在免費網頁空間的網站容易發生問題，因為太多人上網對該網業公司也是負擔，所以無法正常進入網站、無法正常瀏覽網頁這類問題就會不斷產生。 若您的公司或個人網站直接在網站公司申購網頁空間，那當瀏覽人次越多所需要的頻寬也隨之增加，這時所支付的費用也相對提高。對公司而言有成本上的考量；而個人網站更是一筆大開銷。所以適當的管理就是必要的措施。

資訊的更新與瀏覽習慣 網站內容的更新是不可少的，也是網站要受歡迎的第一要素。想想您在瀏覽網站時如果每次上去都看到舊內容，幾次之後往往就捨棄這個網站改到其他有更新的地方找資料。即使您所提供的資料並無時效性，但再完整的資料也只能吸引人上去幾次而無法建立瀏覽習慣。

3-4　建議製作網站程序 不論您是否動手設計過網站，或是新入門的初手，動手設計的第一步以及後續應該如何執行，是相當重要的安排。前面所討論的不論網站風格、企劃，都在文字討論的階段，而不到實際動手撰寫的階段。

網站文字的取得與整理 先將網站上的文字作出整理以及標題文字的設定，文字是網頁最多的內容，當您將網站規劃和風格設計出來後，若在放上文字發現看起來不搭，那不是很可惜的事情嘛！當然筆者並不是說先把所有的文字資料都準備出來，那您至少必要有基本的文字內容。在設計後續網站風格、圖片及網頁時，直接放上文字s覽最後作出的結果才會準確。

先完成風格圖片 網站的首頁以及整個網站多會使用圖片作為網站的選單或是標題列，而首頁和主體網頁更少不了圖片，對網站的風格定調。所以先使用影像繪圖軟體例如PhotoShop完成圖片的設計，到時直接放入網頁中。

CSS樣式表的設計 網站的文字樣式需要一致，因此必須利用CSS來管理這些文字。先設計出網站的文字樣式，在製作出文字樣式表。樣式表的設計和網站風格也必須配合，例如暗色系的網站，圖片、自然文字的色彩就得以白色等明亮顏色，才能看清楚。

動畫、GIF的使用 如果網站要使用Flash動畫、音效檔案和GIF動畫等多媒體物件，那當然也得先準備好檔案。Flash的動畫、背景音樂都得符合網站風格，而也得約略評估一下加上先前的圖片、文字，所有檔案的總合，來評估可以放置多少多媒體元件。

3-5　認識網頁圖片的格式 本節來討論網頁圖片的格式，圖片也是一門學問，因為圖檔的格式相當多，不同色彩、尺寸，檔案的容量大小就差很多。要放在網頁上的圖片更需要斤斤計較，因為圖檔的大小不但會影響瀏覽網頁的速度，也會佔用免費網頁的網站空間。

BMP檔 這是一般最常見的檔案格式，當你要製作電腦桌布、開機畫面都經常存成BMP檔。如果你必須要將圖檔給其他人，又不知道他使用哪一種軟體，那給BMP檔準沒錯，因為小畫家就可以開啟BMP檔了。點陣圖檔的好處是保存影像的資料相當完整，不過相對檔案大小也相當大，所以除非你打算製作桌布檔提供下載，再使用點陣圖檔，放在網頁上就免了吧！

TIF檔 這種檔案格式主要是用來排版、印刷方面，因為他同時擁有全彩及壓縮圖檔的能力，所以大多數的排版軟體，都使用此種圖檔格式。一般處理圖片倒不需要存成TIF檔，也建議你不要在網頁上使用這種圖檔格式。

JPEG檔 照片類影像的最佳選擇之一，JPEG檔因為有全彩及體積小的優點，所以被大量的使用在網頁上。對於照片這種比較複雜的影像資料，也是個不錯的選擇。不過影像會有一定程度的失真效果，因為JPEG會將檔案壓縮，所以當壓縮的檔案越小，圖檔就越容易失真。所以當您將圖檔加以大大或是用來作印刷方面的處理，就可以明顯的看出圖片的模糊。

GIF檔 這也是網路上常見的檔案，特別是一些動畫效果就常使用GIF檔，因為它可以將背景設為透明，或是利用GIF檔製作為動畫，不過筆者不建議你把照片存成此種檔案格式，因為它只支援256色，所以雖然體積小，但顏色卻有失真的現象，一般的小Logo或網頁元件大都存成GIF圖檔格式。

使用圖片的技巧 圖片是網頁中少不了的物件，善用圖片可以美化網頁，但過多的圖片也會破壞網頁的美感，底下筆者整理了在網頁中使用圖片的一些心得，才能將美美的圖片發揮最大的功效。

JPG還是GIF 這二種圖檔格式都是網頁中最常使用的，那甚麼時候該開始哪一種圖檔格式呢！您可以依照底下的狀況來判斷。 使用GIF圖檔的時機： 單一顏色的圖形例如水平線、按鈕圖示、跑馬燈。 要使圖像的一部分透明的圖形。 製作動畫效果的圖片。

圖檔的大小必須非常小。 何時應該使用JPEG圖檔。 自己拍攝的照片或圖檔。 連續色調的影像如油畫、插畫等色彩豐富的圖片。 圖片邊緣平滑的圖像。

圖片請儘量壓縮 網頁上的圖片當然越小越好，筆者可不是希望您放一張小到看不清楚或是相當模糊的圖檔，只是提醒您要放上網頁的圖片，最好都經過處理，也就是所謂的網頁圖檔『最佳化』。

過大的圖片請加以切割 如果您非得在網頁中放在一張大圖，來表達自己的創意，又擔心因為圖片過大讓大家看到您的網站就紛紛掉頭而去，那就將圖片加以切割吧！您可以自己手動裁切圖片透過表格或Layer等網頁排版軟體來排列圖片，或是利用影像地圖的功能來切割圖片。

3-6　打造個人網站風格 最後要討論的網站風格，其實是相當難說明的東西。但對於一個好的網站而言，卻是少不了的東西。對於初學者而言，在一開始就想打造一個有個人風格的網站並不容易，因為這些往往需要不斷的製作、學習所累積的實力。

網站的視覺效果 網站的風格第一步，就是看到網頁的第一個印象。商業網頁希望打造公司的形象，網站的風格會較為嚴謹、穩重，新聞網站會有大量的文字和照片，能否清楚的呈現訊息，才是網站的重點。

網頁內容的排列 其次要討論的是網頁的版型，網頁也是需要版面配置的，這樣文字和圖才能讓人流暢的閱讀，特別是文字和圖片都相當多的大型網站，如果版面未經過設計，很容易看起來一片混亂。目前網頁基本的版型分為二種，上下分隔型和左右分隔型。

上下分隔型 公司的名稱、Logo等資訊，都放在網站的上方，若有導覽列也同樣放在網站的上方。當您在瀏覽網頁時，上方的Logo和導覽列的頁面會一直存在，便於切換到其他網頁中。

左右分隔型 左右分隔的網站通常是將公司的Logo、網站名稱和導覽列放在網頁左側，而網頁的內容當然就放在右邊，對稱式切換網頁來瀏覽網頁的內容。不過也有些網站會將Logo放在上面而導覽列放於左側，將網頁分隔為三區。