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

网页设计入门与实务(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語言相似，具備有優良的字串 處理能力。 編譯後的Java程式，其副檔名為.class，除了可直 接在JVM的機器上執行外，還可運用網頁的 及標籤來執行，此種型態的Java程式稱為 Java Applet。 是由網景公司所開發，而且可在客戶端完成網頁設計。 例如可附在HTML文件中，直接處理一些使用者所引 CGI Perl Java Applet JavaScript VBScript 是由微軟公司所開發的一種直敘語言，和 JavaScript一樣都是以物件為基礎，缺點是 不能單獨執行，而必須在瀏覽器或伺服器 上執行。 ActiveX類似於Java Applet的功用，可以將所設 計的應用程式加諸於網頁，並下載到客戶 端電腦上執行。 又稱為動態伺服器網頁，是由微軟所發展在 Web伺服器上使用的網頁文件，它是以 Active X為基礎的網頁程式設計語言，可結 合HTML、ActiveX物件，在用戶端的瀏覽 器上產生互動性動態網頁，副檔名為.asp。 也稱為Servlet，是Java運用於伺服端的網頁技 術之一，使用的語言架構為Java，主要是著 重於後端資料庫的處理。而要執行Servlet 程式，除了需要有JVM，還必需被掛在具 有Servlet引擎的網頁伺服器之下。 ActiveX ASP Java Servlet VRML 可以製作一個3D虛擬實境效果的WWW 網頁， 稱為虛擬實境描述模組語言。 Java Server Page的簡稱，使用的語法同樣為Java 語言，且也是運用於伺服端的動態網頁技術。 事實上，JSP程式也是Servlet的一種，只不 過JSP在撰寫上比Servlet來的容易。 JSP 9-2 網頁與HTML HTML(Hypertext Markup Language)標 記語言是一種純文字型態的檔案，它以一種 標記的方式來告知瀏覽器以何種方式來將文 字、圖像等多媒體資料呈現於網頁之中。 網頁的主檔名為index 或 default，副檔名 則為 htm、html、asp與aspx等。 HTML文件的建立 建立好一份HTML文件之後，只要開啟瀏覽 器讀取該檔案，就可以依HTML標記的指示， 將HTML文件以網頁的方式呈現在瀏覽器中。 建立一份HTML文件，可以直接開啟記事本， 依據一般的文字輸入即可。 HTML語法是以成對的方式出現，如下所示： 用來指示Html文件的開始與結束。 用來標示文件的資訊。 通常放置於之間，用來表 達網頁標題的資訊。 文字設定方式 HTML標籤中，有兩個可用來對文字做變化的標 籤，分別是font及h1h6，語法 中是以來表示設定標題文字的開始，而 表示結束，例如： 。 針對文字做變化的標籤此處等級為第4級 針對文字做變化的標籤此處等級為第2級 此標記可針對特定的文字 區塊 改變大小及色彩 文字對齊方式 Align屬性可用來設定對齊方式，其屬性值包 括center、left、right三種 文字齊右 這段文字會置中 段落與換行 瀏覽器會將網頁中的換行視為空白字元，因 此在網頁中要達成段落或換行的目的，就需 要使用 或 這兩個HTML標籤了。 清單的設計 清單的設計有編號清及項目清單兩種。 編號清單 大寫的英文字母,可使用TYPE=A 小寫的英文字母,可使用TYPE=a 大寫的羅馬數字,可使用TYPE=I 小寫的羅馬數字,可使用TYPE=i 圖片對齊方式 Align屬性 Top Middle AbsMiddle Bottom AbsBotom Right Left 說明 向上對齊 置中對齊 絕對置中對齊 向下貼齊基準線 絕對向下對齊 向右對齊 向左對齊 超連結功能 屬性名稱 text link alink vlink 功能說明 文件中的文字顏色。 連結文字的顏色。 按於連結文字時所顯現的色彩。 連結後，連結文字所顯示的顏色。 9-3網頁製作與FrontPage 2003 FrontPage 2003是Microsoft公司用來開 發網頁的軟體，並提供了網頁製作和網站管 理功能。此外FrontPage2003還具備所 見即所得(WYSIWYG)功能與支援HTML 語法 。 能將靜態的文字、圖片呈現給網友，還能夠 製作出計數器、留言版、討論區等具有互動 效果的超炫動態網頁，另外還提供佈景主題 功能，可以透過樣式表(CSS)來製定統一的 網頁風格及進行網路管理的工作。 FrontPage 2003工作環境 網站來開啟製作網頁的文件，工作視窗畫面 如下 標題列 標題列位於FrontPage視窗的最上方，顯示網 站或是網頁的名稱，如果在非最大化的狀態下， 只要使用滑鼠左鍵按住標題列，便可拖曳整個 視窗。 功能表 工具列 工具列是將一些經常使用功能加以整合，並以 圖示的方示顯示在軟體中，使用者只要點選工 具鈕便可執行其對應的功能。 編輯設計標籤 分割標籤 程式碼標籤 預覽標籤 網站編輯檢視列 檢視列項目 資料夾 遠端網站 報告 導覽 超連結 工作 特色與說明 用來管理網頁中的檔案與資料夾。 用來顯示本機網站與遠端網站同步情況。 用來分析網頁中的超連結情況。 用來快速建立網站的組織架構，善用它可 增加編輯效率。 用來檢視網頁中的超結連情況。 用來指派工作給網站管理員。 FrontPage 的網站建置模式 網站，簡單的說，就是一群有架構的網頁集 合，或者也可以看成是在電腦內新增一個資 料夾，然後將網頁、圖片儲存到這個資料夾。 FrontPage建置方式有二種:建立方式是指 定URL網址http:/電腦名稱/網站名稱， 或者以http:/localhost/網站名稱。 網站的建立 將以虛擬目錄方式，利用FrontPage來建立 一個單頁網站 建立網站架構 FrontPage還提供了導覽功能，讓網站 設計者先行建立網站架構，再來產生網頁內 容。 在網頁中輸入文字 建立網頁的基本架構後，接著要在網頁中加 入各式各樣的元素，包括文字、圖片超連結。 格式化文字功能 插入項目符號與編號功能 閱覽網頁內容時，如果使用條列式項目，能 讓資料有條不紊，閱讀者也能一目了然。 套用佈景主題功能 FrontPage的佈景主題提供了統一的格式設 定和色彩配置，以下來介紹套用佈景主題的 做法。 插入圖片功能 網頁中適時適地加入圖片，除了能減少冗長 的文字敘述之外，還可以加強美化版面的效 果喔！常見的網頁圖檔格式有GIF、JPEG、 PNG三種。 9-4 網頁空間申請 網頁空間主要做為存放網頁資料的網路磁碟 空間。您無法自行架設與管理網站，但是又 希望能建立一個網站供大家瀏覽時，這時就 可以申請一個付費或是免費的網頁空間存放 網頁資料。 網站 網址 Yahoo網頁空間申請說明說明 /index. 1. 2. html 3. 4. 15MB個人網頁空間。 會出現廣告視窗。 免費討論區、留言版與圖 庫供使用。 多種網頁樣式可挑選。 10MB個人網頁空間。 可選擇廣告出現模式。 可使用ftp上傳網頁。 6MB個人網頁空間。 會出現廣告視窗。 可使用ftp上傳網頁。 50MB個人網頁空間。 可使用FrontPage Server Extensions上傳網頁。 50MB個人網頁空間。 可使用FrontPage Server Extensions上傳網頁。 Yahoo!奇 摩 PCHome .tw 1. 2. 3. 1. 2. 3. 1. 2. 1. 2. TacoCity .tw Hyperment Tripod 以國內提供較大的免費網頁空間Yahoo奇摩 網站為例，申請免費網頁方式如下 9-5 網頁上傳實作 不管是免費及付費網頁空間，一旦建立完成 後即可上傳您的網頁資料 。 網頁空間所在的網址即是您將來開啟首頁的 網址，一般ISP(如Hinet)還提供轉址服務申 請，假如您覺得網頁的網址過長或是不易背 誦時，透過轉址服務還可以申請一個容易背 誦的網域名稱。 Internet Explorer上傳方式 FrontPage上傳方式 Microsoft FrontPage也是網頁製作相當 普變的軟體，除了簡單快速及使用介面非常 容易上手之外，當然還提