簡易網頁製作方法

在開始製作網頁之前,首先必須認識基本的HTML(Hyper Text Markup Lanage)語言,它是瀏覽器認識的一種語言,瀏覽器可將它轉換成實際的網頁畫面,HTML碼其實是由標籤(Tag)所構成,例如HTML檔案的結構,是由<HML>標籤起始,而由</HTML>標籤結束,其結構如下圖所示。

在HTML檔案結構中,其標籤種類可分成單一標籤及對稱標籤,舉例來說,加入圖片的標籤為<IMG>,而段落標籤為<P></P>,當兩個標籤屬對稱類別時,其中間的文字則屬於該標籤的內容,常見的標籤如下表所示。

表1.1常用的HTML標籤。

標籤

說明

使用方法

<Title></Title>

視窗藍色標題列的內容,通常置於<Head>標籤之內

<Title>果子小站</Title>

<Hr>

用來產生分隔線

第一段<Hr>第二段

<H1></H1>

標題一樣式及內容,通常標題樣式有H1~H6的大小,H1字型最大,而H6字型最小

<H1>個人簡介</H1>

<H6>最小標題字型</H6>

<P></P>

將標籤內容個別成一段落,通常段落和段落之間會間隔一個空白行

<P>段落的內容</P>

<Br>

將標籤後的文字顯示於下一行

本行<Br>下一行

<Marquee> </Marquee>

其間的內容將產生跑馬燈的效果

<Marquee>希望你喜歡這個網頁</Marquee>

<Font></Font>

更改字體、尺寸及色彩

<Font Face="標楷體"  Size=3 Color=Yellow>更改字型</Font>

<IMG>

加入圖片

<IMG SRC="icon1.gif">

<A></A>

可製作超連結項目

<A HREF = "www.ntu.edu.tw" >台大</A>

<Table> </Table>

製作表格,表格必須再搭配<TR>及<TD>標籤才可製作出完整的表格

<Table><Tr><Td>格子內容</Td></Tr></Table>

由上面所列的幾個例子中,有些需要注意的地方,例如在HTML標籤語法中,我們必須注意到其順序及位置,以標籤<X><Y><Z>開始的內容,其結尾必須以倒著的順序來排列,如</Z></Y></X>,排列位置錯誤只會造成顯示結果的不正確,

標籤內有時候會有其它參數存在,舉例來說,插入圖形<IMG>標籤的指定圖檔名稱的參數為Src="圖檔名稱",而更改背景圖片則必須修改<Body>標籤的參數,例如<Body Background="Test1.JPG">,因此,當直接以HTML的模式編輯網頁時,記得不要將這些規則及參數弄錯了,才能讓網頁執行的更好、更有效率

認識FrontPage

在學會了基本的HTML標籤語法之後,接著我們要實際的來製作網頁。製作網頁有許多工具可供使用,在本節中將以Microsoft FrontPage的例子來學習如何製作網頁。在安裝FrontPage之後,可於「開始/程式集/Microsoft FrontPage」下,執行該程式,其執行畫面如下所示。

FrontPage的工具列和Microsoft公司的Office系列軟體的工具列非常相似,因此,若你已經熟悉了Office系列工具,使用FrontPage應該能夠很快的入手,其常用的一般及格式工具列介紹如下:

FrontPage的網頁文件編輯模式可分為一般文件及網站模式,一般文件是指編輯單一文件而言,而網站模式則是以一個網站下的所有網頁來編輯,因此,若以網站模式而言,在畫面中左側的網站狀態檢視列上,可隨時檢視目前連結的各種狀態,可使得網站的編輯更加的方便。

網頁實作練習

在製作網頁的過程中,最常用到的就是超連結了,而所謂的超連結(Hyper Link),則是從原來的網頁中,透過關鍵字或一個進入點的方式,將目前的網頁視窗轉移至另外一個網頁視窗。超連結又可稱之為超文(Hyper text),而被連結網站中的任何媒體資料(如聲音、影像及動畫),我們稱之為超媒體(Hyper Media)。

FrontPage在應用上很像是一套文書編輯軟體,它把連結的動作簡化成功能設定一般,簡易的網頁幾乎可以不需用到HTML模式,接著我們就以它來實際的製作一份簡單的網頁,並且連結到幾個知名的網站上。

實例1.4-1:請製作一份個人簡介網頁,並於網頁的最末項加入我最喜歡的網站超連結

STEP1.      於FrontPage的本文區中輸入下列文字,並完成基本的設定。

STEP2.      標示欲製作超連結的文字區塊,按下「超連結」鈕輸入超連結。

STEP3.      重覆步驟2的方法,將超連結一一加入,直到全部完成為止。

STEP4.      按下預覽標籤預覽結果。

在製作超連結的過程中,我們使用了一個超連結功能,而超連結除了針對其它的網站之外,尚可針對「個別檔案」、「電子郵件」及「新網頁」來製作超連結。

實例1.4-2:製作「檔案下載」、「寫信給作者」、「連結至新網頁」的超連結。

STEP1.      於FrontPage的本文區中輸入下列文字。

STEP2.      將Winzip程式複製到與網頁相同的資料夾下,標示欲製作「下載的區域」,按下超連結鈕,選擇連結至檔案的按鈕。

STEP3.      在開啟檔案對話盒中,選擇欲製作超連結的檔案(例:Winzip70.exe)。

STEP4.      標示「寫信給作者」文字區域,按下超連結鈕,選擇「電子郵件」超連結按鈕,輸入欲超連結的郵件信箱。

STEP5.     標示「連結至新網頁」文字區域,按下超連結鈕,選擇「連結至新網頁」按鈕,再按下確定,於新增的網頁中輸入「新網頁連結」文字。    

STEP6.  選擇選單「視窗」,切換回之前的網頁,按下「預覽」標籤執行預覽的動作。

超連結除了應用於不同的網頁之外,亦可應用於同一個網頁之中,通常同一個網頁中的超連結較常應用的例子有:「各章節目錄」與「本文」的連結,「特殊名詞」與「重要說明」的連結…等等。以「各章節目錄」與「本文」的連結為例,其連結方式如下圖(a)所示。

實際操作時,必須先在各章節內文的起始處加入書籤,然後在目錄的各個主題上,連結到書籤上,即可完成在同一頁內製作超連結。

實例1.4-3:首先準備一份較長的文件,利用該文件在同一網頁中製作超連結,並在各章節之間加入水平線,以及加入背景圖。

STEP1.將文件輸入至FrontPage的本文區,將各章節的目錄列示於文件起始,並格式化標題及內文。

STEP2. 框選主題前的標題部份,選擇選單「插入/書籤」,於書籤的對話盒中按下確定。


STEP3. 重覆步驟2,將每個章節的標題加入書籤。
STEP4. 框選欲製作超連結的目錄部份,按下「超連結」鈕,選擇欲超連結的書籤。


STEP5. 重覆步驟4,將目錄上的其它項目加入超連結。
STEP6. 選擇選單「格式/背景」,為網頁指定一張背景圖。


STEP7. 按下預覽標籤預覽,當按下某一主題的目錄時,隨即連結至該主題上。

  目前路網上的網頁大多內含了許多的多媒體的效果,以期能夠吸引更多的訪客來瀏覽,因此,在製作網頁時,最好能夠兼具美觀、動態及實用性的價值,而讓網頁具有多媒體的效果,不外乎加入圖形、聲音及影像檔,以及利用一些描述語言(例如:Java Script及VB Script)、Java元件及ActiveX元件,來產生多媒體及動態的效果。

  想要在自己的網頁中加入圖片,首先必須了解瀏覽器能夠辨識的圖形種類有那些,一般而言,瀏覽器能夠辨識的圖形種類只有GIF及JPEG兩種格式,其最主要的因素,在於GIF可製作成動態圖片,而JPEG格式由於壓縮效率高,佔用檔案空間小,因此可以減低網頁上傳及下載的時間。

  除了圖形的格式之外,瀏覽器可辨識的聲音及音樂格式有Wav、Mid、Au、Mp3及Aif格式,其中檔案佔用空間最小的格式為Mid(數位合成樂器音效檔),它只儲存樂器的資料及樂譜的內容,而其它類型的音效檔則是將聲音檔案壓縮並儲存。以壓縮的效率而言,Mp3的壓縮格式可以說是壓縮比率較高的一種,因此目前廣泛的為大眾所接受。

  接下來,我們就以加入一張圖片,並將該圖片製作成網路地圖,並加入MID音樂檔,以及加入一個跑馬燈,其作法如下:

實例1.4-4:練習製作網路地圖,並加入跑馬燈及背景聲音效果。

STEP1. 先以繪圖軟體合成一張圖,儲存成JPG格式,於FrontPage中選擇選單「插入/圖片/從檔案」,將該圖形插入。
STEP2. 以滑鼠點選該圖片,於視窗下方將出現圖形工具列(若未顯示請選擇選單「檢視/工具列/圖片」),按下矩形、圓形或多邊形作用區任一按鈕,框選圖形中欲製作超連結的區域。


STEP3. 接著出現一超連結對話盒,請於對話盒中輸入欲超連結的網址(此處以http://netcity2.web.hinet.net/UserData/garylee0/,台灣旅遊網為例)。


STEP4. 重覆步驟2及步驟3,將各別區域加上超連結。


STEP5. 將游標移至圖形下方,選擇選單「插入/元件/跑馬燈」,於對話盒中加入跑馬燈文字,並按下確定鈕。


STEP6. 按下HTML標籤,在<head> </head>標籤內輸入:<BGSOUND SRC="a1.mid" LOOP="true" >(參數Loop="True"表示重覆播放)。


STEP7. 按下預覽標籤,預覽結果。

發佈網頁

通常第一頁所呈現的網頁稱之為首頁,在不同作業系統所建構的網站上,首頁的命名也會有所差異,通常Windows NT所建構的網站,預設的首頁名稱為Default.htm,而UNIX所建構的網站,預設的首頁名稱為Index.htm,必須依該站台發佈時的規定而定。

設計完的網頁檢查連結無誤後,接著就是要將它發佈於網站上;首先必須申請網頁硬碟空間,申請認證後再依規定將網頁內容傳送至網頁磁碟空間裡,接著在瀏覽器裡鍵入網址,網頁呈現後表示登錄成功,其步驟如下。

實例1.4-5:將先前設計好的網頁發佈至網站上。

STEP1.      申請免費的網頁磁碟空間:在網路上透過搜尋引擎,鍵入關鍵字「免費網頁」,經過一些申請程序,即可取得網頁磁碟空間。(以www.tacocity.com.tw為例)

STEP2.      逐次開啟設計好的檔案,依序存檔:「檔案/另存新檔」,將「儲存位址」選擇在「FTP位置」。

STEP3.      鍵入FTP位址、使用者名稱及密碼 (說明:雖然網頁空間是免費的,申請時會要求申請者鍵入使用者名稱及密碼,只是為了讓使用者方便管理自己的網頁防止遭不法人士盜用)。

STEP4.      進入網頁空間後按 儲存檔案

STEP5.      開啟IE並鍵入網址,檢查網頁上網是否正常運作。正常營運後就可告訴親朋好友上網來逛逛。