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