网页设计入门及实务(Front.pptVIP

第九章 網頁設計入門與實務(Front page) 9-1 網頁設計基本認識 9-2 網頁與HTML 9-3網頁製作與FrontPage 2003 9-4 網頁空間申請 9-5 網頁上傳實作 近年來全球吹起了網際網路的風潮，從電子商務網站到個人的個性化網頁，一瞬間幾乎所有的資訊都連上了網際網路。 網頁架設已成為全民學習的浪潮，當然網頁技術的種類也不斷地推陳出新，由HTML到炙手可熱的ASP(動態伺服器網頁) 或ASP.NET，亦或是客戶端的JavaScript到伺服端的JSP等等。本章中將為各位說明網頁製作的相關資訊。 9-1 網頁設計基本認識 瀏覽器進入某一個網站後，所看到的第一個網頁畫面，即稱為「首頁」(HomePage)，通常為了達到迅速彰顯這個網站主題的效果，首頁設計就顯得相當重要 。 首頁中還可以透過按下超連結功能，再進入此網站的其他相關網頁，因此我們可以將網站看成是網頁的集合。 網站建置流程簡介 ，網站中的網頁往往會因設計的主題不同而呈現多元化面向，並佐以文字、圖片來組合不同的面貌。 網站的流程大致如下圖所示 網頁圖片規格 認識網頁相關技術 9-2 網頁與HTML HTML(Hypertext Markup Language)標記語言是一種純文字型態的檔案，它以一種標記的方式來告知瀏覽器以何種方式來將文字、圖像等多媒體資料呈現於網頁之中。 網頁的主檔名為index 或 default，副檔名則為 htm、html、asp與aspx等。 HTML文件的建立 建立好一份HTML文件之後，只要開啟瀏覽器讀取該檔案，就可以依HTML標記的指示，將HTML文件以網頁的方式呈現在瀏覽器中。 建立一份HTML文件，可以直接開啟記事本，依據一般的文字輸入即可。 HTML語法是以成對的方式出現，如下所示： 用來指示Html文件的開始與結束。 用來標示文件的資訊。 通常放置於head…/head之間，用來表達網頁標題的資訊。 文字設定方式 HTML標籤中，有兩個可用來對文字做變化的標籤，分別是「font」及「h1」～「h6」，語法中是以h來表示設定標題文字的開始，而/h表示結束，例如：h1…/h1。 文字對齊方式 「Align」屬性可用來設定對齊方式，其屬性值包括center、left、right三種 段落與換行 瀏覽器會將網頁中的換行視為空白字元，因此在網頁中要達成段落或換行的目的，就需要使用p或br這兩個HTML標籤了。 清單的設計 清單的設計有編號清及項目清單兩種。 圖片對齊方式 超連結功能 9-3網頁製作與FrontPage 2003 FrontPage 2003是Microsoft公司用來開發網頁的軟體，並提供了網頁製作和網站管理功能。此外FrontPage2003還具備「所見即所得」(WYSIWYG)功能與支援HTML語法 。 能將靜態的文字、圖片呈現給網友，還能夠製作出計數器、留言版、討論區等具有互動效果的超炫動態網頁，另外還提供佈景主題功能，可以透過樣式表(CSS)來製定統一的網頁風格及進行網路管理的工作。 FrontPage 2003工作環境 網站來開啟製作網頁的文件，工作視窗畫面如下 標題列 標題列位於FrontPage視窗的最上方，顯示網站或是網頁的名稱，如果在非最大化的狀態下，只要使用滑鼠左鍵按住標題列，便可拖曳整個視窗。 功能表 工具列 工具列是將一些經常使用功能加以整合，並以圖示的方示顯示在軟體中，使用者只要點選工具鈕便可執行其對應的功能。 編輯設計標籤 分割標籤 程式碼標籤 預覽標籤 網站編輯檢視列 FrontPage 的網站建置模式 網站，簡單的說，就是一群有架構的網頁集合，或者也可以看成是在電腦內新增一個資料夾，然後將網頁、圖片儲存到這個資料夾。 FrontPage建置方式有二種:建立方式是指定URL網址「http://電腦名稱/網站名稱」，或者以「http://localhost/網站名稱」。 網站的建立 將以虛擬目錄方式，利用FrontPage來建立一個「單頁網站」 建立網站架構 FrontPage還提供了「導覽」功能，讓網站設計者先行建立網站架構，再來產生網頁內容。 在網頁中輸入文字 建立網頁的基本架構後，接著要在網頁中加入各式各樣的元素，包括文字、圖片超連結。 格式化文字功能 插入項目符號與編號功能 閱覽網頁內容時，如果使用條列式項目，能讓資料有條不紊，閱讀者也能一目了然。 套用佈景主題功能 FrontPage的佈景主題提供了統一的格式設定和色彩配置，以下來介紹套用佈景主題的做法。 插入圖片功能 網頁中適時適地加入圖片，除了能減少冗長的文字敘述之外，還可以加強美化版面的效果喔！常