网页设计入门与实务(Front page).docVIP

网页设计入门与实务(Front page) 本文由er435dd贡献 ppt文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。 第九章 網頁設計入門與實務 (Front page) 9-1 網頁設計基本認識 9-2 網頁與HTML 9-3網頁製作與FrontPage 2003 9-4 網頁空間申請 9-5 網頁上傳實作 近年來全球吹起了網際網路的風潮，從電子 商務網站到個人的個性化網頁，一瞬間幾乎 所有的資訊都連上了網際網路。 網頁架設已成為全民學習的浪潮，當然網頁 技術的種類也不斷地推陳出新，由HTML到 炙手可熱的ASP(動態伺服器網頁) 或 ASP.NET，亦或是客戶端的JavaScript到 伺服端的JSP等等。本章中將為各位說明網 頁製作的相關資訊。 9-1 網頁設計基本認識 瀏覽器進入某一個網站後，所看到的第一個 網頁畫面，即稱為「首頁」(HomePage)， 通常為了達到迅速彰顯這個網站主題的效果， 首頁設計就顯得相當重要 。 首頁中還可以透過按下超連結功能，再進入 此網站的其他相關網頁，因此我們可以將網 站看成是網頁的集合。 網站建置流程簡介 ，網站中的網頁往往會因設計的主題不同而呈現多 元化面向，並佐以文字、圖片來組合不同的面貌。 網頁基本元 素 文字 特色與說明 文字構成網頁主題，用來傳達網頁訊息， 它包含了標題、大小、層次、樣式 與顏色。 善用圖形能豐富網頁內容。常用的圖例 類型有JPG、GIF、PNG，每張圖片 的應用包含有標題、背景圖、主圖 等。 超連結的使用，可讓上網者悠游在不同 網頁和不同網站。 圖形 超連結 網站的流程大致如下圖所示 步驟一 擬定網站主題，才能針對網站收集相關資料，並規劃出 此網站所需網頁及相關素材。 步驟二 選擇一個製作網頁與處理影像的軟體，如FrontPage、 PhotoImpact。 步驟三 將製作完成的網頁進行上傳與測試，這時必須要知道申 請網頁空間的大小，是否能容納製作的網頁，另外還 包括不同瀏覽器的觀看效果、螢幕解析度與螢幕大小、 色彩顯示、字型的設定，網路的傳輸速度等。 步驟四 除了要去較具規模的網站，如雅虎登錄來推廣網站，網 頁的內容必須經常進行更新與維護。 網頁圖片規格 檔案名稱 GIF格式 功能說明 副檔名為.gif，支援透明背景圖與動畫。網頁中要加入背 景圖片，通常會插入GIF圖檔，這樣才能將圖形的透 明背景保留下來，也支援交錯圖形式，瀏覽者可看 到圖片概括樣子，再持續戴入完整的圖片。適合卡 通類小型圖片或按鈕圖示。GIF圖檔最多只能儲存256 色(8 bits)，當圖片超過256色，若以GIF圖檔儲存，顏 色就會被降到256色了。 JPEG格式 副檔名為.jpg或.jpeg，是採用失真式(lossy)的壓縮方式， 在壓縮圖檔的過程中，圖片的「像素資料」會被減 去一些，而產生失真情形，不過可以壓縮檔案到很 小。另外它可以支援到全彩的16.7百萬色(24 bits)，適 合大自然或人物等連續色調的全彩相片。 PNG格式 副檔名為.png，是用來取代GIF圖檔格式，並且希望廣泛 應用於Internet上。它的色彩能支援到48 bits，又採取 非失真的壓縮方式，可說是「保住色彩，又不失線 條」!雖然PNG圖檔很有機會取代GIF圖檔，但是目前 還是有些影像軟體或瀏覽器尚未支援PNG圖檔格式， 因此尚未被普遍採用。 認識網頁相關技術 網頁技術名詞 XML 特色與說明 是一種可延伸的標記語言，可將描述的 資料予以結構化。由於HTML的標 記是固定不變，無法依據使用者的 需求來自訂新標記，不過在XML文 件中則可自定標記語言，來建立文 件的結構性。 專為XML所設計的樣式語言。當XSL架 構在XML之上時，XML的文件資料 就會依據XSL的編排樣式輸出到瀏 覽器的視窗上。 又稱為 Dynamic HTML(動態網頁)，是 由許多種網頁技術，如 HTML、 JavaScript、CSS所組成。功能包括 動態排版樣式、定位、網頁效果、 XSL DHTML CSS 又稱為 Cascading Style sheets(樣式表)，可以美化網頁 版面，如定義物件大小、顏色、間距、陰影等，並能 讓其它網頁套用相同的CSS。 又稱為「共同閘道介面」，可用來擷取客戶端想要查 詢的資料，並當作Web Server與應用軟體(可能是程資 料庫)間的溝通管道。例如網站上的討論區、留言板功 能，都是CGI的應用。 是Unix平台下的程式語言之一，經常用來作為CGI的 撰寫語言，架構上與C語言