基隆市教育網路中心研討會

全球資訊網簡介與網頁製作

海洋大學資訊科學系

丁培毅

pyting@cs.ntou.edu.tw

88/02/10

內容綱要:

1. 資訊系統簡介
   
2. 網路用途/架構/通訊協定
   
3. 全球資訊網架構
   
4. 瀏覽器使用與設定
   
5. 超文件與HTML標註語言
   
6. WWW資源導覽
   
7. WWW互動性
   
8. 網頁設計要點
   
9. 網頁媒體與設計工具說明
   
10. 網頁設計練習

一、資訊系統簡介

數據 (Data)

資訊 (Infomation)

處理 (Processing)：記錄、整理、查詢

資訊儲存的格式：二進位

字元

數字

影像

聲音

視訊

資訊儲存的單位：

位元

位元組

欄位 (記錄)

檔案

資料庫

處理資訊的硬體：

中央處理器

記憶體、磁碟機、光碟機

螢幕、鍵盤、滑鼠、喇叭

印表機

網路、數據機

　

二、網路用途/架構/通訊協定

網路是一種實體連接的概念，像蜘蛛網、交通網路、電話網路、銷售網路、服務網路、...等等，藉由網路實體的連接，被連接的個體可以進行某些交互的動作，使得每個個體可以藉由連結到其他個體來得到相關有用的資源。傳播媒介的進步使得網路也包括藉由無形的介質連接的網路，例如無線廣播網路、無線電話網路等等，這些網路雖然沒有實體連結，但是仍然藉由電磁波來傳遞訊息以達到資訊傳遞交換的作用。

電腦網路是繼電話網路、廣播網路、有線電視網路之後資訊傳遞最主要、最有效率的媒介，起初電腦網路只是將小區域的電腦連接在一起以便交換各自電腦上的資訊、使得各自電腦上設備的利用率得以提高，在結合電話網路之後許多區域性的網路都藉由一些中繼交換閘道連結在一起，擴充為所謂的廣域網路，廣域網路的涵蓋極廣，幾乎可說是無所不至，只要你的個人電腦撥一通電話透過數據機以及網路服務公司，立刻可以連上所謂的網際網路，與全世界所有上網的電腦互通有無，打破國界、語言的障礙，達到一個資訊的大同世界。

通訊網路

通訊網路應該是起源於使用傳遞訊息方式的郵務，人們藉由專人來傳送訊息，由於信件傳遞很容易耽誤，因此有所謂電報、電傳的發明，較短的訊息可以藉由線路上簡單電訊的傳遞來送達目的地，此時拍發電報的兩端已經需要以電纜線直接或是間接地連結在一起，直到電話發明以後，區域性的電話網路把所有的居民都連結在一起，然後透過地方電信局以容量較大的纜線連結到其他的地區，如此就形成了今日廣佈的通訊網路的前身，人們在任何地點只要能夠連接上這一個電話通訊的網路，就能夠與全世界各個角落聯繫，現在這個網路更藉由無線通訊技術的進步，即將把地表每一個角落都涵蓋在這個整體通訊網路之內，只要你擁有通訊的終端設備，你在無線訊號可以傳達的任何一個角落裡都可以連上這個通訊網路。

　

通訊系統示意圖

類比通訊

電話、無線電、廣播等等。

數據通訊

大家最熟悉的數據通訊莫過於傳真，只要透過標準的電話網路，就可以將影像以 G3/G4 的數據格式傳遞到遠端，每當你不小心接到傳真電話時，你一定會聽到一串的怪聲音，那是資料被表達成聲音的形式，如此才能透過原來是用來傳遞人的聲音的網路來傳遞資料；

第二種大家熟悉的數據通訊方式就是透過數據機讓你的個人電腦連上大型電腦的終端伺服器或是直接連上網際網路，每當數據機連上時一連串的怪聲音也是資料被表達成聲音的形式來傳送，雖然你我聽不懂這樣子表達的資料究竟是什麼，但是遠端的電腦數據機可以清楚地了解其內容，從而達到數據傳輸的目的;

第三種大家熟悉的數據通訊方式是所謂的 BB Call 或是稱為訊息傳遞服務 (Paging)，在這種通訊應用模式中，使用者在按鍵電話上按下所要傳送的電話號碼訊息，區域局端收到按鍵電話所送出的頻率訊息後會將此訊息轉為數據，再藉由無線的方式廣播出去，訊息的目的地必須具有終端無線接收器來接收廣播出來的數據訊息；

一般我們所說的數據通訊除了上面講的三種應用之外，其實泛指所有資料傳輸的應用，在這裡頭最主要的應用就是電腦網路了，以下我們簡單介紹支援電腦網路連線的基礎數據通訊架構：

兩點間的數據資料的傳遞模式

點對點 (Point-to-Point) 連接：實體連接

將兩台電腦直接連線來傳送資料，例如使用 WINDOWS 95/98 中的直接電纜連線，或是一般的 Ethernet 連線，兩台電腦上的網路應用軟體透過系統軟體與電腦硬體控制網路硬體，直接與對方聯絡傳送資料。

端對端 (End-to-End) 連接：間接連接

兩台電腦之間如果有相當的距離，常常需要透過第三台電腦來連接，中間的這台電腦實際上並不會把資料解讀出來送到網路應用軟體，只是由系統軟體、電腦硬體、與網路硬體共同合作將傳送的資料封包轉送到終點的電腦，如此對於兩端的電腦而言，資料就好像是直接點對點的連接一樣地傳送過來，中間的一台或是好多台電腦對於兩端點而言都是透明的，兩個端點不會感覺到中間轉送的橋接器、路由器、或是閘道的機器。

兩點間的數據資料的傳遞方法

封包交換 (Packet Switching)

數據資料和聲音的傳遞是不一樣的，聲音要傳遞的話，必須要在連線以後持續地保持連線，我們稱為線路交換，在傳遞數據資料時就不是在連線後一股腦地傳遞過去，而是將數據資料分為好多個段落 (所謂的資料封包) 來傳送，到達目的地後再組合為原來的數據資料，這些資料封包在網路上可能由不同的路徑各自朝向目的地前進，這種建立數據資料封包連線路徑的方式稱為封包交換。

　

---

　

電腦網路

根據網路所涵蓋的區域範圍來分類的話電腦網路可以分為下列幾種：

區域網路 (Local Area Network, LAN)

由數公尺到數公里，一般都侷限在同一個單位內部，例如一家公司或是一間學校，區域網路內通常不透過電信局的通訊服務，以直接連線的方式來達成資源共享的目的，常常也因為保密安全的原因，以防火牆和廣域網路或是都會網路間區隔開來。

都會網路 (Metropolitan Area Network, MAN)

通常是在一個城市中的網路連結，透過電話公司的專線或是撥接電話線路連接許多個區域網路。

廣域網路 (Wide Area Network, WAN)

連接各城市、跨越國界、跨越洲界的網路架構，通常必須架構在電話公司提供的電信數據網路上。

電腦網路由下列所構成

連線

同軸電纜、雙絞線、光纖、微波、視傳送的遠近而以基頻或是調變方式來傳送。

網路硬體設備

網路界面卡、集線器、接續器、交換式集線器、橋接器、路由器、網路閘道等等。

網路軟體

驅動程式、網路作業系統、網路管理軟體、網路協定、網路應用程式等等。

網路的拓撲結構

環狀 (Ring)

星狀 (Star)

匯流排狀 (Bus)

　

以太網路 (Ethernet)

是指利用 CSMA/CD (Carrier Sense, Multiple Access with Collision Detection) 的運作方式的網路，以 IEEE 802.3 為基礎來運作，傳遞速率可以到達 10 MBPS (共享); 現在已經發展到了快速的以太網路 (Fast Ethernet)，傳遞速率可以到達 100 MBPS (共享)。

記號環狀網路 (Token Ring)

由 IEEE 802.5 描述其相關標準資料，速率可以達到 16 MBPS。

網際網路 (Internet)

由 1970 年代的 ARPAnet 開始發展，經過 30 年的發展，目前以非常快的速度在發展中，每年加入連線的電腦快速地增加中，主要以 TCP/IP 為互連的通訊標準協定。

網路封包傳送的基本方式

任何一個由某一台機器送出的封包在集線器所連接的其他機器都可以看到，如果此封包的目的機器看到這個封包的話就直接讀取此封包的內容，若不是此封包的目的機器的話就忽略掉此封包，橋接器或是路由器如果看到一個封包的目的地和其來源是在其所連接不同的兩端的話，就將此封包由一端轉送到另一端，也就是讓此封包離開其管轄的區域，朝向其目的地前進、一個封包由起始的機器送出後常常要經過好多個路由器才能到達目的機器。

階層式的網路運作模型

網路上的資料通訊由於必須考慮到連線兩端點及其所有中間必須經過的網路，有不同的硬體連線裝置，不同的網路結構，不同的中繼網路硬體，不同的網路軟體，因此採用一種分層負責的運作模式，國際標準制定組織 (International Standard Organization, ISO) 為了促進電腦網路溝通，訂定了OSI (Open System Interconnect) 來標準化網路的分層架構，促進不同廠商網路軟體、硬體設備的共通性。

OSI 的七層網路架構如下表：

資料封包的層狀包裝

每一層次的資料都有他自己的控制資料 (Hn)，這裡頭的資料包括像目的地及來源位址，資料的長度等等：

通訊協定：

是電腦之間互相溝通的語言，兩台連線在一起的電腦必須使用相同的通訊協定才能夠互相了解所傳遞的資料。

一個通訊協定可以簡單地想像為兩個軟體間透過網路交談的格式：例如甲軟體希望送資料給在另一機器上的乙軟體，兩者之間必須遵循共同商量出來的順序來交談，例如：甲軟體可能需要先送一些打算送過去資料的格式、位元組的數目等等相關資料，然後再傳送真正的資料給乙軟體，這些溝通的資料的格式都必須由通訊協定來規範，甲軟體必須完全依照協定的規範來傳送資料，乙軟體才能夠了解甲軟體送出來的訊息；同樣的乙軟體也必須要根據協定在適當的時間送出回應訊息給甲軟體，如此溝通才能順利的進行。

　

電腦網路的頻寬

所謂的頻寬是指在電腦網路上數據資料傳輸的速率，由於兩點間在傳送資料時所經過的網路區段上速率不一，有的可能速率非常的快，有些可能速率非常的慢，通常最慢的那一個網路區段也就決定了兩點間電腦網路的虛擬距離，通常我們用每秒鐘傳遞多少個位元做為基本的頻寬度量參數。

電腦網路的傳輸速率和網路所採用的介質、網路架構、網路設備、以及使用網路的傳輸量都有直接的關係，有時甚至一些壞損的網路界面會使得網路整體的傳輸幾乎崩潰。

舉例來說，當你使用數據機透過電話撥接網路連上網際網路時，你的電話線路及數據機的速率就決定了你在下傳資料時的頻寬，例如：你使用 33.6 KBPS 的數據機來連線時，你最快可以傳遞 33600 BPS，不過常常你會發覺你沒有辦法達到這個速率，而只達到 22600 BPS 或是 28800 BPS，這是因為電話線路的關係，有時由於線路的雜訊較高，數據機會自動選擇較低的速率，以免傳遞的資料錯誤率太高；如果你使用 56 KBPS 速率的數據機時情況也是很類似的。

另外舉一個例子來說：如果在 TANET 上連線到國外查詢資料時，常常只能達到 100 BPS 左右的傳輸速率，你需要透過教育部的兩條 T1 線路 (各1.544 MBPS)，這就是速度慢的瓶頸了，

一般的應用程式在使用頻寬時大概的範圍如下：

遠端登錄連線：小於 2 MBPS

檔案傳輸：3 MBPS 至 50 MBPS

分散式檔案系統：3 MBPS 至 50 MBPS

影像傳輸：1 MBPS 至 100 MBPS

多媒體應用、視訊與 CAI：10 MBPS 至 500 MBPS

　

資料壓縮

網路的頻寬有限，傳送資料的量越大所需要的傳送時間越久，尤其是透過數據機及電話撥接網路來傳送資料的話，因為電話線路的頻寬很低，傳送速度也就比較慢，因此如果能夠把資料做一些壓縮的話，可以減少傳送的時間。

資料的內容常常會有相當的重複性，例如在影像資料中相鄰的兩個影像點常常具有同樣的顏色其亮度，或是在資料檔案中常常會出現同樣的字元 (例如空白字元)，這些都是可以藉由電腦中央處理器的運算來偵測到，並且用較為經濟的方式來儲存起來，這就是資料的壓縮。一般來說文件的壓縮第一要件就是要能夠正確地還原，或者說是無失真的壓縮，像是 zip 檔案、lzh 檔案、arj 檔案、GIF 影像檔案都是無失真壓縮的範例，影像或是聲音的壓縮則比較可以容忍一些失真，因為人的感官不一定分辨得出原始的資料和還原的資料，像是 JPEG 影像檔案、MP3 音樂檔案等等。

　

網際網路位址 (Internet Address)

在 IP (Internet Protocol) 通訊協定中，每一台機器有一個四個位元組 (4 bytes) 的網路位址，例如：140.121.196.50 或是 140.121.81.16，用來區辨每一台機器，每一個資料封包中都有來源機器以及目的機器的 IP 位址。

網域名稱 (Domain Name) 及
網域名稱伺服器 (Domain Name Server, RFC 1034, RFC 1035)

一般的人都很討厭去記數字，尤其是像上面這樣子的四個連續的數字只代表一部機器，如果一次要記下十台機器的位址的話，那該如何是好呢?

舉例來說，並不是每個人都知道 "24622192" 所代表的意義，但是 "海洋大學的電話號碼" 是不是也代表相同的意義呢? 你很輕鬆地說 "撥海洋大學的電話" ，是不是比說 "撥 24622192" 要簡單呢? 查電話號碼的動作留給 104 查號台去做嘛!

在 IP 位址上也是這樣子的，我們用所謂的 DNS 這樣子的分散式網域位址資料庫來記錄及查詢任何一串 IP 位址，例如：cs.ntou.edu.tw 這個網域名稱經過查詢 DNS 之後，得到 140.121.196.50 這一連串的數字，從此以後我們可以記憶 cs.ntou.edu.tw 這樣子的網域名稱來存取該主機了。

DNS 具有階層式的架構，例如 tw 網域下有 edu, com, org, gov, ... 等等子網域，edu.tw 子網域下又分為 ntu, nctu, ntou, .... 各個子網域，ntou.edu.tw 子網域下又分為 cs, ee, na, ... 各個子網域，在上面任何一個子網域可以代表一個主機也可以是一堆主機。

　

TANET 架構

三、全球資訊網 (World Wide Web, WWW) 架構

　

全球資訊網是架構在網際網路上的一個應用服務，其架構如下圖：

　

　

HTTP 通訊協定：

為了全球資訊網/瀏覽器/伺服器應用而設計的應用層通訊協定。

URL (Uniform Resource Locator)：

指定虛擬網路世界中的地址與傳訊工具

全球資訊網中參閱每一筆資訊都要指定一個位址和一個傳輸媒介

例: http://www.ntou.edu.tw/index.html

通信傳輸協定   http:

機器網路位址   www.ntou.edu.tw

文件位置與名稱    index.html

ftp: //ftp.edu.tw/pub/PC/antivirus/clue.exe

gopher: //gopher.motc.gov.tw/

telnet: //bbs.cs.ntou.edu.tw

瀏覽器

HTML (Hyper Text Markup Language)

Proxy 伺服器

在全球資訊網架構中資訊為了避免重複傳遞的暫存機器

TANET 上 Proxy 伺服器架構

為疏解 TANET 對國外兩條 T1 專線壅塞現象，教育部規劃以階層式之 Proxy Server 系統，來改善目前傳輸混亂情形。首先教育部電算中心保留其中一條 T1 線路專供最上層之 Proxy Server 使用，並且設定只接受第二層之 Proxy Server 才能存取。第二層之 Proxy Server由各區域網路中心負責建置，設定利用第一層 Proxy Server 搜尋資料，並且只接受第三層之 Proxy Server 才能存取。第三層 Proxy Server 則由各級學校自行建置，提供校內之瀏覽器連接服務，經由二層之 Proxy Server 協助搜尋資料。如此階層式架構可有效管理全國眾多 Proxy Server 儲存資料，避免各自往國外傳輸，浪費有限網路頻寬。本校目前建置之第三層 Proxy Server 為 Proxycc.ntou.edu.tw 並提供 port 3128 連線服務。

如欲查詢台灣地區 Proxy 伺服器之位址請至 http://www.twnic.net/proxy.html

架設 WWW 伺服器

兩大伺服器版本 CERN 和 NCSA (Apache)

WIN 98 內建 Personal Web Server

FrontPage 98 包括 FrontPage Web Server

Apache Web Server (For WIN95/WIN98/WIN NT/UNIX)

WebSite

四、瀏覽器使用與設定

微軟 Internet Explorer

網景 NetScape

昇陽 (Sun) HotJava

五、超文件與HTML 標註語言簡介

HTML 是 Hyper Text Markup Language 的縮寫，在這種語言架構下，所有與版面相關的命令都是以文字標註 (tag) 的方式儲存在單一的檔案內，這和 WORD 文件內以二進位命令碼來儲存版面格式是不相同的，以文字方式來儲存的話其格式是完全透明的，任何人可以用一般的文字編輯器來編輯文件的內容，此格式遵循一個由許多廠商與學術研究機關共同參予的標準制定協會的規定，排版的動作是在瀏覽器內動態進行的，以下我們分為幾個部份簡介一下基本的 HTML 架構：

1. 文件基本架構
2. 設定字形
3. 段落排版與條列項目
4. 影像
5. 表格

　

---

1. 文件基本架構

基本架構

<--Author:Pei-yih Ting-->
<--Create Date :12/15/1998-->

<html>...</html>

<head>...</head>

<meta>...</meta>

<body>...</body>

範例：

<HTML>

<HEAD>
<title>文件標題</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
</HEAD>

<BODY>
文件主體
</BODY>

</HTML>

<title> 標籤的用途：自行訂定文件的標題名稱，每一個 HTML 文件只有一個標題，這個標題將會顯示於瀏覽器的視窗標題欄上。而大部份瀏覽器所顯示的書簽或是過去瀏覽主題頁也都是顯示這個文件標題。

背景顏色與文字顏色

<body bgcolor=#rrggbb text=#rrggbb
          link=#rrggbb vlink=#rrggbb>

<body background="image-URL">

bgcolor --- 背景顏色
text --- 文字顏色
link --- 連結文字顏色
vlink --- 已閱讀過連結文字顏色
background ---背景圖案

顏色是以十六進位數來表示 分別為(紅 藍 綠 red-green-blue)三原色，rr gg bb 的每一值為十六進位數: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

例如 BGCOLOR="#FFFF00"
代表紅色成分 FF (十進位的 255), 代表綠色成分 FF (十進位的 255), 代表x藍色成分 0 ,紅配綠為黃色背景顏色。

背景圖案
<body background="image-URL" bgproperties=FIXED>

在選用背景圖案時 , 應力求花樣簡單清晰 ,以免造成文字或是其它內容不易辨認的現象。



連結

<a href="URL"> ... </a>

範例:

請按一下畫底線的藍字，參觀
<a href="http://www.ntou.edu.tw">海洋大學首頁</a>

請按一下畫底線的藍字，參觀 海洋大學首頁

連結到同文件的其它部份
      <a href="#name"> ... </a>

      ....

      <a name="name"> ... </a>


範例：

連結處：
<a href="#jump-test">
如果您要看 "文件基本架構"
</a>

被連結處：
<a name="jump-test">文件基本架構</a>

連結到不同文件的其它部份
      <a href="URL#name"> ... </a>
      <a name="name"> ... </a>



水平線

<hr>
<hr size=#>
<hr width=#>
<hr align=#> #=left, right

範例：

<hr size=10>
<hr width=50>
<hr width=50%>
<hr width=50% align=left>

---

2. 設定字形

標題

國立台灣海洋大學

   <h1>國立台灣海洋大學</h1> (24pt)

國立台灣海洋大學

   <h2>國立台灣海洋大學</h2> (18pt)

國立台灣海洋大學

   <h3>國立台灣海洋大學</h3> (14pt)

國立台灣海洋大學

   <h4>國立台灣海洋大學</h4> (12pt)

國立台灣海洋大學

   <h5>國立台灣海洋大學</h5> (10pt)

國立台灣海洋大學

   <h6>國立台灣海洋大學</h6> (8pt)

字形大小

國立台灣海洋大學

   <font size=7>國立台灣海洋大學</font> (36pt)

國立台灣海洋大學

   <font size=6>國立台灣海洋大學</font> (24pt)

國立台灣海洋大學

   <font size=5>國立台灣海洋大學</font> (18pt)

國立台灣海洋大學

   <font size=4>國立台灣海洋大學</font> (14pt)

國立台灣海洋大學

   <font size=3>國立台灣海洋大學</font> (12pt)

國立台灣海洋大學

   <font size=2>國立台灣海洋大學</font> (10pt)

國立台灣海洋大學

   <font size=1>國立台灣海洋大學</font> (8pt)

更改字體

國立台灣海洋大學  Bold

   <b>國立台灣海洋大學  Bold</b>

國立台灣海洋大學  Italic

   <i>國立台灣海洋大學  Italic</i>

國立台灣海洋大學  Underline

   <u>國立台灣海洋大學  Underline</u>

國立台灣海洋大學  blink

   <blink>國立台灣海洋大學  Typewriter</blink>

國立台灣海洋大學  ^Superscript

   國立台灣海洋大學  ^Superscript

國立台灣海洋大學  _Subscript

   國立台灣海洋大學  _Subscript

國立台灣海洋大學  Strike through

   <s>國立台灣海洋大學  Strike through</s>

---

3. 段落排版與條列項目

段落排版 <p>

範例：

WWW到底能做什麼？

基本上這是不可限量的。


WWW到底能做什麼？<p>基本上這是不可限量的。

換列 <br>

範例：

WWW到底能做什麼？
基本上這是不可限量的。


WWW到底能做什麼？<br>基本上這是不可限量的。

不准換列 <nobr>

置於頁面中央

<hn align=center>...</hn>

<p align=center>...</p>

<center>...</center>

範例：

　

<h3 align=center>
網際網路!!
</h3>
<center>
網際網路!!
</center>

列示

無編號列示
<ul>
   <li>...
   <li>...
</ul>

範例：

• 集線器
• 網路卡
• 路由器

<ul><ul>
   <li>集線器
   <li>網路卡
   <li>路由器
</ul></ul>

有編號列示

<ol>
   <li>...
   <li>...
</ol>

範例：

1. 電子郵件 (E-Mail)
2. 全球資訊網 (WWW)

<ul>
<li>電子郵件 (E-Mail)
<li>全球資訊網 (WWW)
</ul>

---

4. 影像

大多數瀏覽器都可以顯示 GIF 和 JPG 兩種格式的圖形檔 ，GIF 檔一般用於商標、圖示、與插圖，JPG 檔用於照片。

其他影像格式像 BMP 檔案，Internet Explorer 可以直接看到，但是 NetScape 就只能下載存檔或是用外掛的程式來觀看。

<img src=image_URL>
<img src=image_URL alt=alternate-text>

只能顯示文字的瀏覽器或是當你將瀏覽器的自動下載影像選像關閉後，瀏覽器只會顯示 "alternate-text" 而不顯示圖片。

範例：

<img src=URL alt="替代文字" align=top>

<img align=#> #=top, left, right, middle, bottom

<img vspace=# hspace=#> #=value

<img border=#> #=value

---

5. 表格

表格基本標籤

<table>...</table> - 表格
<tr>...</tr>- 表格列
<th>...</th>- 表格標題
<td>...</td>- 表格內涵

範例：

國語	數學	音樂
80	70	85

<table border=1>
<tr>
<th>國語</th>
<th>數學</th>
<th>音樂</th>
<tr>
<td>80</td>
<td>70</td>
<td>85</td>
</table>

　

六、WWW資源導覽

搜尋引擎

蕃薯藤 www.yam.com.tw

奇摩站 www.kimo.com.tw

中文雅虎 chinese.yahoo.com

台灣網路資源搜尋 www.openfind.com.tw

www.lycos.com

www.yahoo.com

altavista.digital.com

WAIS 與 GAIS 資料搜尋

http://gais.cs.ccu.edu.tw/cgais.html

http://www.openfind.com.tw/

http://www.ht.net.tw/

Archie 伺服器

檔案搜尋服務

http://archie.edu.tw/

FTP 伺服器

http://ftp.edu.tw/

http://nctuccca.edu.tw/

全球資訊網為您做些什麼?

網際網路對於工商業的影響

原始的網際網路只是為了學術上資料的交流來設計的，但是隨著連線上網際網路的方式愈來愈容易，連上網際網路的機器與用戶也愈來愈多，網際網路上提供的應用也愈來愈多，形式愈來愈多樣化，這達到了要在網際網路上進行商業行為的第一個條件，因此網際網路對於工商業的影響與日俱增。

企業內網路 (Intranet)

傳統上企業內部的網路或是電腦連線是每一家都不一樣的，隨這個企業使用的電腦系統而有所不同，一方面維護的工作由某一家特殊的電腦公司來簽約負責，可以輕鬆地透過交易的方式來取得電腦公司的服務，另一方面電腦連線的特殊化使得網路連線自成一格，反而比較沒有安全上的顧慮。

但是由於各個公司、政府機關內部資料的電腦化都已經達到相當的水準，有時互相需要交換資料，如果各個公司的內部資料格式完全採用某一家電腦公司封閉的格式的話，又會受制於該電腦公司，所以目前慢慢改採用網際網路上許多開放式的格式，以維持自己內部資料格式與大家相同，便於交換，許多電腦公司所提供的企業內部網路由相容於網際網路的架構也逐漸乾脆改採網際網路的架構，但是公司內部與網際網路之間還是設計一些維持資料安全的界面或是閘道 (也稱為防火牆)，避免外人入侵公司內部的電腦，偷取商業機密或是毀壞公司內部的資料。

另外由於企業體內部的人員都可以隨時在網路上的任何一個節點連上網路，因此可以隨時存取公司內部的資料，管理階層可以在任何時候得到最新的運作資料，公司內的員工也可以在家裡就完成一些工作，正面地促進公司的競爭力。

企業體整合網路 (Extranet)

由於在產業界上下游廠商必須通力合作，並與行銷通路業界有密切的配合，一致化的電腦網路是密切合作的起點，大家可以快速地交換資料、共同研發、進行有效率的流程監控，提昇企業體的競爭力，更可以和客戶之間有直接的聯繫，例如透過網路直接服務客戶，這些工商業的行為很自然地導致企業體整合網路的發展。

電子商業 (Electronic Commerce)

電子商業最主要是希望將所有商業行為都藉在網路以電子化的形式來進行，這包括商品展示、商品採購交易行為、與付款行為等等這些原先都必須要當面完成的事情：

商品展示：

通常必須要顯示產品的功能性、美觀、造型、耐用程度等等，透過電子化的話必須用文字、照片、以及 3D 的模型來說服購買者，有時也必須佐以行銷的手段，例如提供許多其他使用者的回饋經驗、線上直接以聲音視訊交談等等。

例如:台灣網路交易市場，或是3D shopping

採購交易：

在網路上可以同時比較很多家不同供應商的產品，透過適當的軟體也可以報價、比價、出價，下訂單。

付款：

利用電子銀行以及信用卡的服務可以結合線上的採購行為，將整個流程電子化。

上面這三種行為其實都必須考慮資料的安全性以及流程的安全性，這也是許多發展電子商業行為的研究正在積極克服的問題。

Low bit-rate Stream line Vedio

一般視訊訊號的資料量很大，所需要的頻寬也很大，如果在網路頻寬有限的情況下，資料很可能會斷斷續續的，也就會造成訊號的中斷，效果大受影響了。

長久以來視訊資料的壓縮一直是工程師很重要的研發題材，現在很多視訊資料都可以在畫面比較小、品質比較差、同時考慮以較大的緩衝暫存空間來透過數據機傳送，即時的收看，例如前面的微軟 NetMeeting 軟體就是一個視訊壓縮應用在視訊會議上的範例例子，下面我們再看看另外幾個例子，分別應用視訊資料的壓縮在網路教學及新聞廣播：

軟體：

RealAudio 5.0

VXtreame Web Theater (Vitek, 偉仲科技)

MS NetShow

ShockWave Flash 3.0

MS Media Player 6.0

影音資料：

HINET 影音媒體中心

中華電視線上影音

教育部教學中心資料館

3D VRML (Virtual Reality Modeling Language) and Quick Time VR

• VRML samples: Floops sample #1 , Floops sample #2 , PorscheProduction , Simple rotating cubes , Dolphin models
• QTVR samples: Paranoma #1 , Paranoma #2 , ( 原始文件請見http://www.homelife.com.tw/cni/html/qtvr.htm ) , QTVR Object #1 , QTVR Object #2

七、WWW互動性

全球資訊網在設計之初最主要的目的是資訊的提供，其後由於使用量的大增，逐漸衍生出非常強烈的互動需求，瀏覽者不但想看到網頁設計者提供的資訊，他還希望能夠和設計或是維護的人溝通，同時因為電腦網路是活的，伺服器及客戶端的機器都是在運作中的，如果只提供像是平面媒體 (報紙、雜誌等等) 的功能的話，那麼唯一達到的好處只是 "資料更新的快速以及超文件連結" 而已，實在還沒有辦法說服一般大眾來使用；因為全球資訊網整個系統的各部份都是在運作中的，所以它提供的資訊除了要是即時性的之外，還應該針對使用者的需求來提供，平面媒體就沒有辦法做到這一點，每一期的刊物不管是張三李四來看，看到的都是一模一樣的東西。

全球資訊網上使用者可以填寫他所需要的或是感興趣的，然後網頁再提供適當的內容給他，所以每個使用者在同一時間所看到的資料可以是完全不同的。

全球資訊網上互動的設計包括下列元件：

超連結

表單

CGI (Common Gateway Interface)

Perl, Shell Script, C, VB, Serverlet, ISAPI, IDC....

Script (JavaScript, VBScript)

JAVA

Active X

ASP (Active Server Page)

　

八、全球資訊網 (WWW) 網頁界面的設計要點

全球資訊網是一個比較特殊的資訊系統，在設計其網頁的時候其實也就是在設計一個資訊系統的界面：

　

8.1 網頁設計的基本原則：

　

8.1.1 網頁的功能

　

網頁 (Web page) 在全球資訊網 (WWW) 系統中可以有各種不同的功能：

1. 多媒體資訊傳遞：
   
   簡單的網頁可以用平面或是 3D 的方式來傳達聲音、影像、動畫、視訊、虛擬時境的多媒體資訊。
   
2. 互動的佈告欄：
   
   網際網路上來觀看網頁的人可以在網頁上留言，藉以和其他來觀看的人或是網頁的製作人溝通。
   
3. 資訊系統之介面：
   
   網頁本身可以是一個資料庫、GIS 系統、或是應用資訊系統的人機介面，允許使用者在遠端透過網路來操作該系統。

不論其功能為何，網頁是一個網路資訊系統的人機介面，一個網頁的基本目的是給使用者瀏覽，它負有讓使用者清楚瞭解系統所呈現資訊的任務，它也要讓使用者產生對資訊系統所提供資訊的興趣，並且提供適當的互動管道，讓使用者與資訊系統維持適當的互動。

設計一個電腦系統的人機介面所需要遵循的一般通則在設計網頁時都需要注意到，就人機互動的功能面來說，網頁受限於瀏覽器的特性，所提供的平面或是 3D 的表現方式都有固定的框架，不能做太多的變化，而且資訊的來源都是遠端的機器，必須考慮資料傳遞的時間延遲，在這樣子的框架下要有效率地達成傳遞資訊給使用者的目的，必須要特別考慮下面這些增加整體系統可用性 (usability) 的設計原則：

1. 全方位地規劃一個網頁
   
2. 在網頁上提供製作者及維護者的基本資訊
   
3. 用有效的方式和網頁的瀏覽者溝通
   
4. 幫助使用者迅速地找到他要的資訊
   
5. 清楚地讓使用者知道系統將如何反應他的每一個動作
   
6. 時時考慮使用者操作及資訊傳遞的效率
   
7. 考慮網際網路上使用者使用各種不同的硬體與軟體
   
8. 讓你的網頁看起來更舒服
   
9. 強調互動性
   
10. 維護你的網頁
    
11. 注意一些 HTML 的小細節

　

　

8.1.2全方位地規劃一個網頁

網頁的目的是為了和使用者溝通 (單向或雙向地傳遞資訊) ，在製作一個網頁時請無時無刻牢記此點，來看你的網頁的人通常不是像逛街一樣毫無目標，而是為了尋找一些特定的資訊而來，使用者不是為了崇拜你製作的一些很炫的媒體效果而來，所以就像設計一般電腦系統的人機介面一樣，你必須瞭解系統的使用者：

1. 是哪些人會來看你的網頁 (他們共同的特質是什麼? 年齡? 專業? 教育程度? )
   
2. 他們會在哪裡 (在區域網路內呢? 還是廣佈全世界? )
   
3. 他們的目的是什麼?
   
4. 你想要呈現給他們什麼樣子的資訊?
   
5. 你想要如何來呈現這些資訊?

你需要由使用者的角度來看 "我到底在這個網頁上要得到什麼資訊?" 這樣的問題，如此在設計的過程中你所做的決定才能夠滿足潛在的使用者。

　

8.1.2.1 訂定網頁的目標

1. 告知瀏覽者資訊
   
2. 教育瀏覽者
   
3. 娛樂
   
4. 獲得瀏覽者的回饋
   
5. 提供瀏覽者討論的空間與基本內容

不管怎樣，每一個網頁一定要有一個目標。

網頁是一個溝通的工具，如果你沒辦法替它找到一個有意義的目標，或是目標分歧的話，那你應該要考慮放棄製作這個網頁或是使用多個網頁來達到不同的目標。

8.1.2.2 網頁內容與網頁頁面的設計互為表裡

就像一般的平面媒體一樣，撰稿和美術編輯是有不同責任的，資訊的內容是網頁的內涵，是網頁的精髓，美工藝術設計有畫龍點睛之效，是網頁的外表，缺一不可，但是內涵必須為主，其它的設計方能依附其上，加強資訊傳遞的效果，加快資訊傳遞的速度。

網頁中各種媒體的運用千萬不要喧賓奪主，讓網頁的主題為之失色，同樣地其它附帶的資訊，例如廣告，或是其它的連結，不要蓋過網頁的主題。

8.1.2.3 如何呈現網頁的主題

就像一般電腦系統的人機界面一樣，製作網頁在一開始時需要由瀏覽者熟悉的領域中構思一個隱喻 (metaphor) 來介紹你的主題，以便瀏覽者迅速地建立正確的心智模型，如此能夠加快使用者接受你所要呈現的資訊，加深此資訊在瀏覽者腦中的印象，各種媒體的運用之基本目的是為了引導瀏覽者的注意力專注在你所要表達的主題上，不是要分散瀏覽者注意力在各個相關的內容上。

　

8.1.3 在網頁上提供製作者及維護者的基本資訊

網頁這種新興的資訊傳播媒體是不經過任何人審核的 (moderated) ，所要展現的內容是完全自由的，完全由網頁的製作者自己決定，內容的正確性與適當性也完全由網頁的製作者自己負責，當我們閱讀一網頁時，是否相信它的內容必須由我們自己根據網頁的內容來判斷，一般情況下瀏覽者首先根據網頁製作者的身份與其所屬機構來做第一層的篩揀判斷此資訊的可靠度，然後瀏覽者會根據網頁本身的邏輯性來判斷資訊的可信性，再與瀏覽者自己的知識相互印證來判斷資訊的正確性，最後瀏覽者會根據網頁維護的狀況與網頁中提供的互動性來判斷所提供資訊的即時性。

在設計一個網頁的時候設計者除了盡力維護資訊的正確性與即時性之外，必須想辦法來加強與瀏覽者相互間的溝通，加強瀏覽者之間的溝通，建立瀏覽者的信心，例如：

1. 列出作者或是連絡人：包括作者或是連絡人的名字、所屬機構、電子郵件信箱、網頁位址、或是其它的聯絡方式。
   
2. 列出公司或是組織名稱：如果此網頁是某一個組織或是公司資助來建立的，請清楚地表明該組織之企業識別符號或是其名稱。
   
3. 列出網頁之 URL：一般的瀏覽器在列印網頁是會將網頁之 URL 列於首頁，以便瀏覽者日後可以知道此網頁文件之來源，不過這個功能大部份都是瀏覽器的選項，因此也有可能不自動印 URL，此時設計者最好是自己在網頁上列出 URL。
   
4. 列出網頁修改或是維護的時間：讓瀏覽者知道網頁最後修改的時間或是修改的過程，可以幫助瀏覽者判斷資訊相對之可用性。
   
5. 考慮使用較多互動的網頁元件：給予瀏覽者更多表達意見以及得到更多資訊的管道。

　

8.1.4用有效的方式和網頁的瀏覽者溝通

在確定好網頁目的、主題、瀏覽對象之後，切記網頁是溝通的工具，任何溝通都要盡力使得溝通有效，以免浪費時間，瀏覽者在全球資訊網的大海中好不容易走到你這一個網頁上，你用細心的設計與美觀調和的畫面來顯示真誠的態度之外，也要用簡捷有條理的方式展現你的主題，確保你的目的能在瀏覽者的耐心用完之前完全達到，以下是幾個該注意的重點：

1. 降低文字的篇幅：
   
   大多數人線上閱讀文章時的速度要比閱讀印出來的文章要慢，網頁上大部份的文章是希望瀏覽者線上閱讀，並且讓瀏覽者隨時保持互動性，可以決定是否要讀下去或是跳到更適當的地方去閱讀，因此內容要儘量縮減。
   
2. 儘量以標題摘要文章內容：
   
   這是瀏覽者決定是否要閱讀此段文章的關鍵，如果可以的話，儘量以條列式的方法分層表達，將重點一一標出，在適當的地方再輔以較詳細的說明。
   
3. 斜體字、粗體字、不同顏色的字要小心使用：
   
   雖然這是在文字段落中提醒瀏覽者注意某些文字的好方法，可是這也常常使得頁面零亂，使得文字的篇幅不自覺地增加，如果可以的話應該儘量用條列式的方法，替瀏覽者把大綱整理出來。
   
4. 超連結 (hyperlink) 文字常常也就是關鍵詞：
   
   關鍵詞的詳細說明應該放另一個頁面上，如此可以階層式地化解篇幅的壓力，同時關鍵詞的本身和其所在的句子，也說明了該連結將引導瀏覽者到什麼樣子的畫面上去。
   
5. 網頁中的文章請使用固定的風格：
   
   例如：人稱、相關名詞及其翻譯、字詞的用色、同義字，如果是英文的話，其大小寫、拼法、連線等等在網頁中都需要用固定的表示方法，不要任意轉變。
   
6. 使用瀏覽者熟悉的名詞：
   
   依據你所定義的使用族群，選用適當的詞語，不要不經意地使用專業的詞語或是你個人所熟悉的詞語。
   
7. 使用互動式元件時必須選用能夠清楚地代表該選項或是動作的詞語：
   
   所謂互動式元件是指瀏覽者可以操作的螢幕上顯示物件，例如：表單中的 Radio Buttons、Push Buttons 等等，這通常是很困難的，在一個按鈕上所保留的空間通常是很有限的 (例如：確定按鈕) ，如何選用簡單的詞語代表將會進行的動作? 在 select 中的每一個選項所代表的特性也可能很難用一個減捷的名詞來說明，但是無論多困難，不可以為了頁面空間配置而犧牲掉清晰度，如此可用度 (usability) 會急速降低。
   
8. 在設計互動式界面時必須使用清楚、建設性的訊息：
   
   在設計一個使用者可以輸入資料或是回答問題的網頁時，通常會使用 CGI 或是 JAVA、JAVA Script 等等技術，因為使用者不單單只是接受資訊，還要提供資訊，常常可能發生一些系統無法處理的狀況，必須提供一些訊息給使用者。
   
   任何錯誤訊息或是狀態訊息的目的都是希望使用者能夠瞭解目前的狀況，做出系統所希望的反應，例如：常常看到的瀏覽器錯誤訊息 "Error 404：File not found" 就是一個使用者很難瞭解的訊息，使用的詞語完全是電腦專業領域內的名詞，也沒有告訴使用者該如何反應，下面這樣子的訊息會好一些： "The page you requested is no longer at this location,  please click the Back Button of the browser to go back to the referring page and inform the page owner!"
   
9. 注意網頁中標題、圖片與文字段落讀序的安排：
   
   就像一般的平面媒體一樣，標題與圖片引導瀏覽者視線及注意力，必須小心有系統地由使用者的角度來設計。

　

8.1.5 幫助使用者迅速地找到他要的資訊

在瀏覽超文件或是超媒體時大多數的瀏覽者很快地就在錯綜複雜的連結中迷失了，也許方才看到某一個資訊覺得很重要，但是跟著某一個連結下去卻再也回不來了，甚至由最上層網頁重新走一遍也不一定找得到同樣的那一頁。在瀏覽超文件時像是一腳踏進濃密的叢林，沒有任何指標、任何方向，這時比較有用的是你的短期記憶，而不是組織能力，有時很多實際世界中的路癡，到了網上多維的世界中反而神勇異常呢?

不管怎樣，在頁面的設計上一定要想辦法幫助使用者認識網頁的架構，希望瀏覽者能夠自由自在的瀏覽而不會迷失，由於全球資訊網透過網路傳輸的架構，每一次跟隨一個連結都需要一定的時間，因此一個簡單的檢驗原則是不管瀏覽者目前身在何處，如果要尋找某一個特殊的資訊的話，最好能在三個連結之內找到，這個要求成為網頁設計者在設計頁面及組織資訊時一個很基本的原則，以下我們討論一些輔助瀏覽者的頁面設計原則：

1. 使用一致的關鍵字：
   
   在網頁中使用一致的關鍵字，不管是英文還是中文，都盡量用一致的名詞來闡釋或描述一個概念，這個理由很簡單，因為大多數的搜尋引擎 (Search Engine) 都是藉由關鍵字出現的次數來比較某一網頁的內容是否與查詢的內容相關，因此如果你使用一致的關鍵字的話，當使用者以該關鍵字查詢時這個網頁出現的機率就高得多了。
   
2. 建立超連結目錄表：
   
   如果網站上不只一頁網頁，替所有的網頁做一個超連結目錄表能夠幫助瀏覽者快速地掌握資訊的組織。
   
3. 顯示瀏覽者目前瀏覽的位置：
   
   超連結連在一起的網頁很可能不是一度空間或是二度空間的關係圖可以清楚表示出來的，可是一般情況下我們在組織資料時會根據某一兩個主軸來準備呈現資料，因此我們可以用這些主軸來描述網頁之間的架構，可以用樹狀圖或是階層圖來繪製這個結果，然後在圖上 (不見得是圖片，也可以是文字) 標示瀏覽者目前的位置，如此有助於瀏覽者在實際瀏覽過程中組織整體的資訊。
   
4. 盡量避免讓瀏覽者使用捲動軸和調整視窗大小：
   
   使用者常常希望看到全貌以便瞭解資訊呈現的順序與架構，但是一個大的網頁常常要讓瀏覽者使用捲動軸，大的表格和圖片常常強迫使用者調整視窗的大小，甚至太大的圖片在某些環境下只能用捲動軸來觀看其全貌，這些動作都需要時間，也影響使用者的專注力，更讓瀏覽者產生一種無法掌握的感覺，讓瀏覽者必須多花一份心力去組織、重新建構這一頁內資訊的心智模型 (mental model) 。
   
5. 使用清楚的標題 (TITLE) 標注 (tag) ：
   
   HTML 中< TITLE> 的標注是各個瀏覽器在記錄書籤 (bookmark) 時所記下相對的文字說明，如果你的 TITLE 標注能夠清楚的描述你的網頁內容的話，使用者記下書籤後，可以很輕鬆地再找到你的網頁。
   
   請注意：很多標題在你整體瀏覽你的網頁時可能具有明確的意義，但是單獨看這個標題就可能會變得毫無意義，瀏覽者過一段時間後光看標題可能完全無法回憶當初看到的頁面是關於哪方面的，因此在設計的時候你應該考慮將標題和內容分開來單獨思考一遍，是不是完整，例如：有時副標題前需要主標題以釐清其關係，有時甚至需要公司名稱、計畫名稱、作者姓名等等。
   
6. 在網站的深度和廣度之間做一個適當的選擇：
   
   網頁的縱向連結愈深，表示資訊分層整理的愈詳細，表示資訊的深度夠，不是膚淺的文字組合，但也可能表示瀏覽者可能無法理解太深入的資訊；網頁橫向的連結愈多，表示相關輔助資訊蒐集的很齊全，但是也可能表示網站主題定訂的太廣，資訊範疇擴展得太大，可能會超過瀏覽者所能重建的心智模型，因此對不同的瀏覽族群而言，必須以適當的深度與廣度來呈現網站上的資訊。
   
7. 使用適當的導覽按鍵 (影像或文字之超連結) ：
   
   如前面所述，設計者常常會依照幾個主軸來安排資訊，例如在一個虛擬的藝術館的網頁中，作品除了依照畫風與畫派來排列之外，也可以依照年代來排列，或是依照畫家來排列，針對某一種特殊的排列方法可以獨立設計一個超連結目錄頁，在所有的頁面上置入連結連回此目錄頁，甚至可以在所有的頁面上置入依此主軸之前進及後退按鈕，讓瀏覽者輕鬆地挑選喜歡的資訊瀏覽方式。
   
8. 避免瀏覽者無法離開某一頁的窘境：
   
   不要讓瀏覽者發現他除了鍵入 URL 或是使用瀏覽器提供的 GOTO (至) 或是 BACK (後退) 按鈕才能離開得了某一網頁，進入這樣子的網頁中，好像走進一個陷阱一樣。如果你的網頁本身沒有提供瀏覽者適當的操作選項，瀏覽者需要藉由瀏覽器提供的功能來瀏覽你的網站時，瀏覽者需要很熟悉瀏覽器所提供的功能，而且當瀏覽者使用不同的瀏覽器時所見到的操作介面就不一致了。
   
9. 使用 HTML 的內部連結：
   
   如果某一個網頁的資料內容很多 (一整個螢幕放不下的話) ，請整理一個超連結目錄頁連結到每一個子題上，每一段結束時也應該讓使用者可以重新回到超連結目錄頁上。
   
10. 如果你的網站有很多網頁的話，請你考慮在每一頁內提供連結來連結到下列重要的網頁上：
    
        a. 你的首頁 (home page)
    
        b. 內容連結頁 (TOC, Table Of Content)
    
        c. 索引頁 (index page)
    
        d. 搜尋頁 (local search page)
    
11. 不管使用者在瀏覽任何資訊時，上面這些連結最好能夠都一致地呈現出來：
    
    這些導覽性的連結是幫助使用者在你的網站中尋找資料的，最好能夠一致地呈現在畫面中固定的地方，不要讓瀏覽者四處去尋找這些導覽性的連結，當然你在設計時也要注意考慮畫面的大小，不要放太多的導覽連結進去。
    
12. 提供相關資訊的連結：
    
    我們製作一個網頁通常都會有參考資料或是相關資料，大部份的使用者對於相關的資料通常也會有興趣的，提供相關網頁的連結對瀏覽者是一大幫助，應該儘量提供相關的連結，不過也不要為了湊數而隨便連結，同時應該對所提供的連結做簡單的解釋以及整理。

　

8.1.6 清楚地讓使用者知道系統將如何反應他的動作

瀏覽者每次按下一個連結按鍵以後，瀏覽器必須去遠端伺服器取得相關的文字、圖片或是聲音檔案，這些都很花時間，而且會打斷瀏覽者的思考，如果瀏覽者能夠在按下按鍵 (連結) 之前瞭解這個動作是什麼的話，可以讓使用者省掉一些冤枉路。

1. 網頁的內容必須用標題、簡介、重點提示等等來分層次地介紹給瀏覽者；別一股腦地拼命講下去。
   
2. 任何一個連結應該要清楚地說明它的目的：是到一個新的網頁，還是下載檔案，檔案的內容是什麼，大小有多大，網頁的內容與性質大概是什麼等等。

　

8.1.6 時時考慮使用者操作及資訊傳遞的效率

在網際網路上每一個使用者所能使用的頻寬差異很大，如果是透過電話線連上網路的話，很可能每秒只能傳遞數十K位元組，如果連線到國外的話很可能只有每秒數百個位元組，因此設計網頁時要時時想到如何讓使用者很有效率地瀏覽網頁的內容。

1. 別把重要的資訊藏起來：
   
   一個網頁並不是在炫耀它擁有那些資訊，而是要把這些資訊分享給瀏覽者，要仔細地設計瀏覽者目光及注意力的動線，讓重要的資訊自然地出現瀏覽者眼前，要讓他躲不掉，才能達到網頁傳遞資訊的目的。
   
2. 讓每一個網頁儘量縮短：
   
   短的網頁所需要的傳遞時間少，反應給瀏覽者的速度快，如果你有很多的文字資料要展現，儘量考慮階層式的網頁架構，影像檔案及 3D檔案也是很花時間來傳送的，可能的話用小一點、解析度較低的影像來取代，影像中不相干的景物可以將它裁切掉。
   
3. 使用小縮圖影像來取代大的影像：
   
   但是提供連結連到較細緻、解析度較高的影像上，讓使用者自己決定要不要看。
   
4. 重複使用影像：
   
   同一網站中重覆使用多次的影像通常只下載一次，所以可以重覆使用的影像儘量提昇其利用率。
   
5. 在 HTML 中設定影像標注中的 width、height、以及 alt 參數，例如：
   
   <img src=http://foo.com.tw/foo.jpg
            width=200 height=150"  alt="foo.jpg">
   
   設定這兩個參數的話，可以使得瀏覽器在還沒有透過網路得到影像之前先編排文字資料，可以讓瀏覽者先看到文字的內容；如果設定 alt 之替代文字的話，也可以在影像還沒下傳之前先看到影像的替代描述。
   
6. 使用交錯格式影像：
   
   使用交錯 (interlaced) 格式儲存的影像在下載時會分為多個階段下載，每一階段下載後其影像會變得比較清晰，瀏覽者可以在影像還沒完全下載之前就看到部分的影像，感覺起來會比一般的影像下載的快一些 ，GIF 檔案支援交錯式的影像格式，JPEG 檔案支援則支援所謂漸進式 (progressive) 的影像模式。
   
7. 使用 GIF 格式影像與 JPEG 格式影像的差別：
   
   對於照片影像而言 JPG 格式壓縮得比較好，檔案比較小，下載的速度也比較快，但是對於表格、文字、線條、圖形等等色彩較少，邊緣銳利的圖片來說 JPG 壓縮因為是一種全彩、有失真的壓縮，會使得圖片看起來模糊、色彩不均勻，反之 GIF 檔是沒有失真的壓縮檔案，對於這類的圖片就比較適合。

　

8.1.7 考慮網際網路上使用者使用不同的硬體與軟體

1. 網路上瀏覽者可能用不同廠牌不相容的各型電腦，大家雖然都有統一的全球資訊網界面，但是各自的檔案系統、編輯排版系統、影像處理系統都是不一樣的。如果考慮檔案資料、文件資料，或是執行檔下載的話，最好是提供各家廠牌電腦共通的版本，例如：文件檔可以用 PDF 檔，否則至少應該標明所下載的檔案適合在什麼樣子的機器與作業系統上使用。
   
2. 網路上有的機器是只能看英文的，有的機器是能夠看到中文的。因此最好能夠準備英文和中文的兩個版本，否則至少要有英文的基本說明。
   
3. 有的使用者的網路連線頻寬很大，有的使用者頻寬很小，在頻寬很小的網路上的使用者很可能會藉由瀏覽器所提供的功能選擇不自動下傳影像，但是沒有影像圖片的網頁有時是很無味的，如果連一些導覽按鈕都看不到的話甚至是完全無法操作的，所以如果可以的話設計者可以考慮提供幾個版本的網頁：一個有正常解析度的圖片、另一個則有低解析度的圖片、一個只有文字界面的網頁，讓使用者自己根據自己的配備來選擇。
   
4. 不同的電腦系統上可能安裝不同的字型，不同的瀏覽器上可以設定不同的字體大小，瀏覽器視窗的大小也可以由瀏覽者自己設定，這些都使得相同的網頁在不同的電腦上顯示的樣子不同。
   
   HTML 是一種動態的文件排版格式，不管瀏覽器使用多大的字體，瀏覽器的視窗有多大，文字都可以重新在視窗內編排，因此設計網頁的人不能夠假設某一段文字應該出現在視窗內的什麼地方，設計者也不應該使用絕對的字體大小、某一種特殊的字體、或是假設視窗該有多大，在設計時網頁內字體的大小可以用相對的，例如 normal size, H1, H2, …, H6, size=+1, size=-1 等等，避免用 size=4 這種絕對的方式來指定字體的大小。
   
   另外某些 HTML 編輯器讓你很方便地修改字型的種類，例如楷書，於是變相地鼓勵設計者運用不同的字型來表現網頁的內容，可是真正顯示在瀏覽者頁面上的字型是瀏覽者系統上安裝的字型，如果該系統上沒有裝你指定的字型的話就用預設的字型，如果你使用字型表現什麼效果的話使用者完全看不到，所以請避免用特殊字型。
   
   在運用表格及圖片時 HTML 可以讓你用百分比的方式指定元件的大小，這是相對於瀏覽器頁面大小的，如果你使用絕對的點數來指定大小的話，使用者視窗太小時就無法看到整個頁面，必須以捲動軸來操作。當然實際的效果也必須看頁面中要表現的內容而定，不過儘量不要假設使用者的瀏覽器視窗超過 640×480 個像點。

　

8.1.8 讓你的頁面看起來更舒服

1. 不要隨便更改超連結的顏色：
   
   HTML 允許網頁設計者更改頁面中超連結的顏色，包括未檢視過的連結及已檢查過的連結，有時網頁設計者更改背景顏色或是背景影像時必須一併更改連結的顏色，以便瀏覽者可以清楚地檢驗頁面上所有的連結，但是一般來說色彩視覺效果的設計常常需要一些美工的專業知識才能勝任，隨便調整的話不見得能夠達到你想要的效果，反而是對使用者造成一種負擔，使用者切換到你的網頁時所有連結的顏色都不一樣了，需要花時間嘗試錯誤、重新適應，如果一定要更改的話，至少也要讓整個網站上所有的顏色運用一致，使用者才不會無所適從。
   
2. 換列字元：
   
   HTML中換列字元是當成空白 (white space) 字元來處理的，由上二節的討論，你知道HTML是一種動態的排版語言，使用者看到的網頁內文字編排方式和設計者在檔案內看到的文字編排方式是不一樣的，尤其是換列的地方更是不一樣，因此一般為了避免換列的地方多出一個空白，造成頁面中字元間隔不均勻的現象，在 HTML 的文件中我們常常會一段話一直打到底，完全不換列，或是在每一個標點符號後面換列，來避免這個問題。
   
3. 使你的網站中各個網頁的外觀一致 (顏色及配置) ：
   
   通常我們會用 Table 或是 Frame 來配置頁面，不同的網頁中資訊的內容當然是不一樣的，但是頁面的架構是一樣的，瀏覽者可以在相同的地方找到標題、導覽的元件，而不會每到一個網頁就好像外地人，完全不知如何操作。
   
   在顏色的選用上不要太極端，黑色、暗紅色的背景給瀏覽者的感覺和明亮的粉彩色系當然是不一樣的，在你的網站上的各個網頁在色系的選取上也需要有整體性，不要變成一個大雜燴，像是一堆摔爛了的顏料罐，很多顏色雖然有刺激感官的效果，但是看久了就會麻痺，甚至會緊張，找個專家談談，別隨便使用。
   
4. 圖片和文字整體編排的方式最好一致：
   
   如果你將圖片夾雜在文字當中，那就一律如此，如是你讓文字將圖片包圍起來，在整個網頁中也要維持一致，如果你在頁面上讓圖文分離，各佔一行的話，那也需要維持整體的一貫性。
   
5. 文字對齊的方式要一致：
   
   各個段落向左對齊、置中對齊、或是向右對齊的方式必須一致。

　

8.1.9 強調互動性

全球資訊網的架構中雖然最主要強調的是單向資訊的傳遞，但是它也提供了雙向互動的方式，包括即時性的互動：像 CGI 與表單、JAVA 界面、以及非即時性的互動：像 e-mail 的連結，讓瀏覽者不只單方面的閱讀網頁上提供的資訊，也能夠提供一些他所知道的資訊，讓瀏覽者能夠回饋、參與網頁內資料的更新，讓瀏覽者能夠有再回來看看的動機。

1. 提供意見討論的佈告欄或是留言板：讓眾多瀏覽者可以針對網頁的內容或是論點來抒發自己的看法，眾多瀏覽者可以藉由此一網頁相互溝通心得，可以由各種不同的角度來探討同一件事，這是瀏覽者所以喜歡常常光顧你的網頁的一大動機。
   
2. 如果可能的話，可以請一些相關的專業人士評論你的網頁，做為網頁的序言，甚至邀請他們定時在留言板上提供看法，或是主持意見專欄。
   
3. 提供電子郵件地址，鼓勵使用者提出意見。
   
4. 提供簡單的評量表格，針對網頁的編排、資訊內容的合適度、深度與廣度請瀏覽者做一評論，並提供目前的統計資料。
   
5. 可以根據使用者的意見，整理所謂的 FAQ (Frequently Asked Questions) 來提供使用者參考一些綜合的問題與解答。

　

8.1.10 維護你的網頁

網頁是資訊傳播的工具，但是資訊是需要小心去維護、更新的，大家都知道去瀏覽一個維護得很好的網頁就像是去參觀一個乾淨整齊、百花齊放的花園一樣，是很賞心悅目的，同時你在引用此網頁提供的資訊時也比較能夠放心，因此一個網頁設計出來以後必須經常性的去維護它、去灌溉它，網頁是活的，是會慢慢成長的，眾多瀏覽者的意見與互動會激發出智慧的火花，能夠讓網頁的內容茁壯，也能吸引更多的使用者前來。

1. 謹慎地檢查打字：
   
   不要有打字的錯誤或是語法和詞語的誤用，最好請一個人仔細地閱讀過一遍
   
2. 測試網頁呈現的效果：
   
   在不同的網路連線情況下表現如何?  (反應時間如何? ) 在多人同時使用的情形下表現如何? 如果瀏覽者使用不同的瀏覽器，甚至純文字的瀏覽器效果如何? 使用者視窗的大小會不會影響到資訊的呈現? 在不同的作業平台下表現如何?  (在純英文的 UNIX 系統上表現如何?
   
3. 不要濫用 "建構中 (Under Construction) " 的標示：
   
   很多人在建構網頁的時候只要覺得還有一些資訊沒有補齊的時候，或是怕別人覺得網頁的內容很空洞，就乾脆放一張會動或是不會動的圖畫寫著 "施工中" 或是 "建構中"，瀏覽者現在如果在網頁上看到這樣子的標示，通常都有一種危險不要擅闖的意念浮現出來，可能會意識到這個網頁的資訊內容也許不完全正確，也許網頁的主人是新手，也許網頁是空洞的連結雜燴而已。別再這樣用了，大方地說你預定何時完成嘛，現在所有的公共工程都有這樣子的標示喔! 或者乾脆就說短期內不打算進行建置，需要相關資料者請 email 或電洽 ×××。
   
4. 定期檢查網頁中的連結：
   
   全球資訊網是一個變動很大的資料庫，很多連結一小段時間後都會改變，最主要是因為網站的資源可能在持續的擴充下無法應付而必須將某些網頁分家，或者也可能是網路負荷、伺服器負荷的問題，也可能是由小而大，成立新的公司了…，不管怎樣，請用一些軟體來檢查這些連結，例如FrontPage，或是某些網站也提供這樣子的服務，或是乾脆你自己一個一個的檢查。
   
5. 定期更新你的網頁：
   
   在你的網頁上留下最近更新的時間，已更新的次數，下一次預定更新的日期甚至保留過去變動的資料，在一個獨立的回顧網頁中讓瀏覽者比對，在定期更新的過程中你可以在更新的資料前後做一些醒目的提示，例如： "New" 圖示，來提醒瀏覽者注意。
   
6. 如果你運用一個網頁來宣布事項的話，請務必將刪除過期無效的資訊。
   
7. 如果你在網頁上放置一些讓使用者下載的執行程式或是含有巨集的文件時，請注意定時掃毒：
   
   不要讓你的網頁成為電腦病毒寄居的場所。

　

8.1.11 注意一些 HTML 的小細節

1. 如果你自己編寫 HTML 文件的話，請在適當的地方加上註解：
   
   HTML 的語法很簡單，可是在複雜多層的頁面設計下，HTML 文件是很難看懂也是很不容易維護的，請在適當的地方加入註解，例如：
   
   </UL><!-- end of level 2 list>
   
   </TABLE><!-- end of outer table>
   
2. 請考慮不同的瀏覽器功能的差異：
   
   HTML 是一個不斷在演進的標注語言，有些瀏覽器可能上市一兩年後就看不懂新的 HTML 的語法了，例如 Cascaded Style Sheet，有些瀏覽器可能不支援 JAVA Script 或是 Active X 元件，請在適當的地方加上保護的措施，例如：
   
   <SCRIPT LANGUAGE="JavaScript">
   
   <!---
   .....
   //-->
   </SCRIPT>
   
   對於 HTML 的瀏覽器而言，一個看不懂 TAG，例如：<SCRIPT…> 對於不支援 SCRIPT 的瀏覽器而言，是完全沒有意義的東西，也不會影響到文件的編排；同樣地一個看不懂的參數，例如：<IMG SRC=…WIDE=20 HIGH=40>中的 WIDE 及 HIGH 就是沒有意義的參數，Cascade Style Sheet 就是以這種方式來擴充 HTML，因此有用到 JavaScript 或是 CSS 的網頁在沒有支援JavaScript 或是 CSS 的瀏覽器上可能只是失色，也可能根本失去了基本功能，在設計時請務必考慮此項差異。
   
   
3. 當連結 <A> TAG 和別的 TAG 巢狀地使用時，<A>TAG 請放在最內層。
   
4. 請用相對的字體大小。
   
5. 請用一般的字型。
   
6. 請用相對的方式來指定表格的寬度及高度。
   
7. 請在圖片內指定 width 及 height 參數。
   

　

8.2 網頁使用者介面的設計原則

　

設計目標	設計原則
了解使用對象及經驗	是否有新拜訪者到你的網頁 先前的拜訪者是否重返網頁 使用者是否有任何先前的網頁經驗
了解網頁設計及使用者之目的	搜尋資訊 學習產品使用方法 訂購產品 追蹤產品使用狀況 與客戶服務代表聯絡 與公司雇員通訊 取得技術支援 給予回饋 下載產品型錄 下載驅動程式並更新
協助使用者操縱與搜尋	提供清楚的、直覺的網站組織資訊 (超連結目錄表格、索引表格、新訊息) 提供可了解的、明顯的視覺導覽設計 (按鈕、文字、影像地圖) 提供網站內標題、關鍵字詞、名稱的搜尋 在每一個網頁上提供導覽援助 (讓使用者能夠從任一網頁上找到搜尋引擎或是回到主網頁) 讓使用者知道任一超連結或是導覽連結將帶領他們前往何處 避免使用者必須使用回上一頁的無雙親連結，提供至少一個回到前一個網頁的方式 定期確認是否網頁中所有的連結仍然有效 使用標準的文字連結色彩及標示重點的色彩
設法讓使用者快速地執行任務	減少尋找某一資訊的時間 減少載入網頁與影像的時間 減少網頁中的捲軸 (降低網頁的篇幅) 限制同一層中的選項數目 將重要的選擇群集在一起 組織網頁內的訊息 提供網站上資訊的全景 使用熟悉且可辨別的導覽控制 不要過度使用先進的技術 (例如：使用VRML) 不要過度使用刺激視覺的動畫和色彩 維持簡單的目錄：盡量讓每一個網頁上僅含一個標題 提供快速連結目錄：放置重要的導覽連結於頁面上固定的位置 使網頁上的資料容易閱讀：使用簡單、不突出、不會與文字及按鈕衝突的背景圖片 使用空格及適當的編排敘述來調整使用者的注意力與閱讀動線 使用標準的調色板和字型：不要使用特殊的顏色和字型 使用夠大的字體 使用相對的字體大小 使用足以與背景對照的文字型態
維持使用者介面的一致性	使用圖形、影像、色彩、字型及版面設計建立一個共同的統一性界面使其貫穿整個網頁 建立一個網頁設計版面模板並沿用於所有網頁 使用一致的標題、用語、連結及導覽名稱並用於所有介面 提供製作者背景資訊 (URL、版權、電子郵件信箱等等) 使你的導覽設計一致 設計多數瀏覽器與平台易取得的、使用方便的介面 不嚴格限定使用者或瀏覽者能夠控制或改變的介面元件 (如：文字、色彩…)

九、網頁媒體與設計工具說明

全球資訊網上所使用到的資訊呈現媒體簡單地歸類一下有下列幾種：

• 文字

• 圖片/照片

• 聲音

• 動畫

• 視訊

• 3D 物件/佈景

其中又以文字、圖片、以及動畫的製作最為簡單，我們可以用一些現成的軟體來編輯製作這些媒體，很簡單地完成一個功能明確的網頁。

HTML 及文字

在下一節的實習中，我們將會使用 FrontPage 軟體來編輯網頁，它最主要是一個文字的編輯器，其中的圖片和動畫則是由別的軟體編輯以後再引入其中的。

除了使用 FrontPage 之外，HTML 文件其實可以用任何一個文字的編輯器來製作，例如： Windows 95/98/NT 中的筆記本應用程式就可以來編輯，或者使用微軟的 WORD 來編輯，Adobe 公司也有一套 PageMill，NetScape 瀏覽器也有一個 Composer 的 HTML 編輯程式，微軟的 PowerPoint 或是 Excel 也可以把資料轉為 HTML 格式來呈現。

　

影像

大家一般常用的影像處理軟體有許多，例如

• LviewPro

• PhotoEditor

• FrontPage Image Composer

• PhotoShop

• PhotoImpact

• PaintShop Pro

等等都是很適合用來處理網頁中的圖片的軟體，其中功能最強大的可能要算是 PhotoShop 了，最接近專業的處理效果，當然使用起來也就稍微複雜一些，其它像是 Image Composer, PhotoEditor, 或是 Lview Pro 是基本的點陣圖編輯軟體，可以做一些基本的效果，裁切影像等等，至於像是 PhotoImpact 或是 PaintShop Pro 則是比較適合業餘的網頁編輯，提供較多的功能，但是又盡量避免太專業的影像處理概念。我們在下一節的練習中會讓大家試著使用 PhotoImpact 來製作一些效果。

PhotoImpact 影像處理軟體

PhotoImpact 是一種物件式的繪圖軟體，而不像微軟 Windows 中的小畫家一樣是點陣圖的繪圖軟體，物件式的繪圖軟體一般來說比較容易操作，複雜的影像也比較容易處理，可以針對任何一個物件來進行單一的處理而不影響其它的物件，相對的點陣式的繪圖軟體就像是在畫布上作畫，一旦你在圖面上畫下一筆或是作某一種處理之後，就不容易再作修改了，我們將這兩種繪圖軟體的特性作一個簡單的比對如下：

動畫

一般我們在製作網頁動畫的時候有幾種選擇，最普通的方法是用 GIF 格式的圖片集合來呈現動畫，另外一種動畫則是使用 JAVA 語言來製作 ，我們在下一節的練習中將要介紹大家製作 GIF 動畫，這種方式比較直接，但是比較浪費網路的頻寬，JAVA 方式的動畫雖然可以省卻許多網路上資料傳輸的時間，但是比較適合專業的資訊人員來製作。

我們常用來製作 GIF 動畫的軟體有幾個，一個是 gifcon32 這個共享軟體，另外一個是 Ulead 公司的 Gif Animator，JFrontPage 軟體中也有提供一個 Gif Animator，下一節我們將介紹大家使用 Ulead 公司的 Gif Animator 來製作一些動畫出來。

十、一步一步地建立你的第一個網頁

步驟一：建立一張空白網頁

1. 由 "工作列/開始" 開啟 FrontPage 應用程式
   
2. 切換至 FrontPage 編輯器
   
3. 選擇 File/New.../Normal Page 開啟一空白新網頁
   
   請注意按下 File/New... 之後你可以看到分為兩個選擇頁，一個是 Page，一個是 Frames，個別又有許多不同的選項，在 Preview 欄中可以看到這些選項所配置的頁面，FrontPage 預先幫我們設計出來一些常用的頁面配置，例如 Page 頁中的 One-column Body with Contents and Sidebar 就是運用 HTML 中的表格事先將版面配置好可以放置主文、重點提示、和圖片欄位，如果你選擇這個選項的話，你可以在 FrontPage 產生的新頁面中直接代換掉裡面的文字就可以了，目前我們希望製作一個標題頁，所以我們選擇 Normal Page，等一下在其它的步驟裡我們會運用到其它的選項。至於 Frames 頁中的選項最主要是配置導覽頁面的，下面會應用到這種方法來配置頁面。
   
4. 設定頁面標題：
   請在頁面中按下滑鼠右鍵選擇 Page Properties... 來更改這一頁的基本特性，在 General 頁中的 Title 欄位中填入這一個網頁的標題
   
5. 編輯大標題文字：設定為 Heading 1 字體
   
6. 儲存檔案：
   請選擇 File / Save 並鍵入一檔案名稱
   請盡量使用英文名稱，例如：\temp\firstPage.html，在全球資訊網上中文名稱需要經過編碼，會造成額外的困擾，在 Title 欄位你也可以再更改網頁的標題

　

步驟二：發表這張網頁

1. 要發表這張網頁的話，當然要找到一個出版商．．．也全球資訊網系統中的伺服器了 (WWW server)，通常如果是在學校內的話，在教育部提供的 TANET 上我們可以架設固定的伺服器，如果不是在學校的話，通常必須透過所謂的 Internet 服務提供業者 ISP (Internet Service Provider) 公司來連結全球資訊網，如果是採用固接式的方式連上網際網路的話，就可以自行架設全球資訊網的伺服器，如果是採用撥接方式連上網際網路的話那就需要向 ISP 公司或是網頁存放提供業者 PP (Presence Provider) 來租用一個存放網頁的空間來存放個人或是公司的網頁了。

2. 我們現在利用海洋大學提供的 kl.ntou.edu.tw 這台機器 上的 WWW 伺服器來讓大家測試你編寫的網頁，請使用   guest02, guest03, .... 到 guest40 這三十九個帳號來測試你的網頁

3. 使用 WS_FTP32 程式連上 kl.ntou.edu.tw，請任意挑選一個帳號登入

4. 登入之後在右邊的視窗內，你可以看到有一個目錄叫做 www，如果沒有的話請按下右邊 MkDir 的按鍵來產生一個 www 的資料夾，這個資料夾是我們這個伺服器規定一定要有的，請在 www 上點兩下進入此資料夾內，然後請你再建立一個資料夾，名稱由你自己決定 (例如:ting)，這是因為大家在這裡可能同時使用一個帳號，互相會有衝突，所以才這樣子做，請在 ting 上點兩下進入你自己建立的 ting 目錄中。

5. 在左邊的視窗內請移動至 \temp 資料夾內，此時你可以看到你剛才在第一步驟中存檔的 firstPage.html，點一下中間的 >> 按鍵，可以將個人電腦上的 firstPage.html 上傳到 kl.ntou.edu.tw 伺服器上

6. 這時就是我們欣賞一下初步結果的時候了:
   
   請打開 Netscape 瀏覽器，在 Location 欄位上填入 URL
   
   http://kl.ntou.edu.tw/~guest10/ting/firstPage.html
                                 ==1==     =2=   ===3===
      1: guest10 是假設你使用 guest10 帳號
      2: ting 是剛才在 4 中建立的目錄名稱
      3: firstPage.html 是步驟一中選取的名稱
   
   您應該可以看到你所製作的網頁了，當然不只是你可以看到，任何一個知道這個 URL 的人都可以看到你所製作的網頁了。

7. 　

步驟三：確定主題

通常一個全球資訊網的網頁一定要有一個明確的主題，它可以是具有

• 資訊提供功能的主題，例如：

  公司介紹	城市介紹
  個人簡介	課程介紹
  產品介紹	新聞報導
  旅遊點介紹

• 雙向溝通功能的主題，例如：

  資料查詢系統	電子佈告欄
  客戶服務系統	資訊系統
  線上交易	電子銀行

不論如何，你必須確定一個主題後才能夠開始動工，在開始學習製作網頁的時候，我們可以先選擇資訊提供功能的主題來製作，因為雙向溝通功能的主體需要較多互動的元件，等到大家比較熟悉全球資訊網的運作模式之後，再設計那樣子的主題會比較合適。

　

步驟四：規劃網頁的外觀

在這個步驟中，我們需要依照所要呈現主題的特性以及資料量的多寡來設計整組網頁的外觀，其中包括：

導覽的方式：

資料量是否需要使用導覽頁面

是否使用 3D 或是平面導覽頁面?

是否要使用 "框頁 (Frame)" 來導覽?

如果你決定用獨立的框頁來導覽的話，FrontPage 中提供的各種框頁架構就有很大的幫助了，你可以由這些配置當中選取一種最適合你設計的資料架構來使用，或是自己設計框頁。

導覽按鈕 (連結) 的設計

連結可以是下列各種方式

文字

影像按鈕

可以自備影像，或是使用 PhotoImpact 來設計

影像地圖 (Image Map)

動畫按鈕 (例如：Hover Button)

每一資料頁面中該如何配置?

此時 FrontPage 中提供的各種頁面配置就有很大的幫助了，你可以由這些配置當中選取一種最適合呈現你的主題的配置來使用，當然你也可以自己運用一些平面媒體常用的方式來設計，最後以表格 (Table) 來實現。

背景顏色 (圖片) 以及網頁色系的選取

這必須配合主題的呈現，你可以在 FrontPage 的編輯視窗中用滑鼠右鍵點一下，並選取 Page Properties...，選擇 Background 頁面來修改網頁的背景圖片或是背景顏色。

　

步驟五：構思網頁的內容

超本文 (hypertext) 的呈現方式基本上是將資訊之間的網狀關係直接呈現出來，而不受限於傳統媒體單線式的資訊呈現，因此在設計網頁的內容的時候，除了要將內容綱要逐一寫下來之外，也要將這些內容之間的關係記錄下來，我們可以使用所謂的 Mind Map (Tony Buzan 在 1974 年就提出這樣子的設計方式) 來完成這個要求，所謂的 Mind Map 簡單地說就是：

1. 在紙上先寫下中心主題的摘要，

2. 使用聯想法寫出相關的主題文字/圖形，

3. 並以線條適當地連接這些主題

如下圖：

步驟六：建立維護資料

雖然在這個練習中我們只是製作一個資料提供的網頁，但是我們還是要維持和瀏覽的人之間最基本互動，我們必須提供以下的資訊：

維護者或是作者

電子郵件信箱

其他聯絡方式 (住址或是電話)

單位名稱

製作日期以及維護日期

如此瀏覽者才能建立對此網頁內資訊最基本的信任。

　

步驟七：針對網頁中各項子題準備素材

此時可以一一針對各種資料來準備呈現的素材，包括

• 文字 (內容、字體、大小...)
  
• 圖片 (標題、資訊、美觀...)
  
• 聲音 (錄製、MIDI...)
  
• 動畫 (動態資訊呈現、吸引注意力)
  
• 3D VRML ...

讓我們運用 FrontPage / PhotoImpact / Gif Animator 來練習一下基本的素材製作。

　

步驟八：抓住瀏覽者的視線

人的注意力一般來說是單一的，在觀看網頁時會依照某一種線性的排列來閱讀資料，至於如何安排這個動線，要看瀏覽者的經驗和習慣，並沒有辦法限定瀏覽者的閱讀習慣，但是因為全球資訊網這種多媒體互動的呈現方式，網頁設計者可以想辦法來吸引瀏覽者的注意力，讓他不要錯過所有精彩的內容，也不要錯失所有基本的內容，如何幫助使用者和你來交換資訊就是網頁設計者一個很重要的工作，別讓你辛辛苦苦製作的內容被瀏覽者跳過去了，那你為什麼要做網頁呢?

一般人瀏覽的習慣都不會讓目光變化太大，如下圖就是不太可能的瀏覽動線：

網頁設計者不會希望瀏覽者依照這種順序來瀏覽網頁的內容，因為瀏覽者在看到這樣子的網頁時通常會由上往下看，由左往右或是由右往左就要看習慣了，請注意：有時網頁設計者其實不希望瀏覽者依照上圖的動線來瀏覽，可是在安排素材的時候卻用了太誇張的顏色或是元件，就會意外地影響使用者瀏覽的動線。

通常我們安排的動線會像下圖所示：

用很單純、很平滑的方式來設計，兼顧頁面整體的協調性和美感。