Professional Documents
Culture Documents
CH 07
Uploaded by
wahahaOriginal Title
Copyright
Available Formats
Share this document
Did you find this document useful?
Is this content inappropriate?
Report this DocumentCopyright:
Available Formats
CH 07
Uploaded by
wahahaCopyright:
Available Formats
第 7 章多媒體網頁設計
7-1 認識網頁設計 7-6 Dreamweaver 靜態網頁
7-2 HTML 簡介 元件
7-3 CCS 樣式表 7-7 圖片屬性變化
7-4 網頁配色快易通 7-8 表格屬性變化
7-5 認識 Dreamweaver 87-9 超連結大集合
7-10 動態按鈕
1
電子商務網站到個人的個性化網頁，一瞬間幾乎
所有的資訊都連上了網際網路。
網頁技術的種類也不斷地推陳出新，由 HTML 、
CSS 到炙手可熱的 ASP( 動態伺服器網頁 ) 或
ASP.NET ，亦或是客戶端的 JavaScript 到伺服端
的 JSP 等。
2
7-1 認識網頁設計
第一個網頁畫面，即稱為「首頁」 (HomePage)
通常為了達到迅速彰顯這個網站主題的效果，首
頁設計就顯得相當重要。
3
網站建置流程簡介
構成網頁的基本元素，包含了文字、圖形和超連
結三種
網頁基本元素 特色與說明
文字 文字構成網頁主題，用來傳達網頁訊息，它包含
了標題、大小、層次、樣式與顏色。
圖形 善用圖形能豐富網頁內容。常用的圖檔類型有
JPG 、 GIF 、 PNG ，每張圖片的應用包含有
標題、背景圖、主圖等。
超連結 超連結的使用，可讓上網者悠遊在不同網頁和不
同網站。
4
建置一個網站的流程
5
擬定網站主題，才能針對網站收集相關資料，並
規劃出此網站所需網頁及相關素材。
選擇一個製作網頁與處理影像的軟體，如
FrontPage 、 PhotoImpact 。
將製作完成的網頁進行上傳與測試，這時必須要
知道申請網頁空間的大小，是否能容納製作的網
頁，另外還包括不同瀏覽器的觀看效果、螢幕解
析度與螢幕大小、色彩顯示、字型的設定、網路
的傳輸速度等。
除了要去較具規模的網站，如雅虎登錄來推廣網
站，網頁的內容必須經常進行更新與維護。
6
7-2 HTML 簡介
要建立一份 HTML 文件，可以直接開 記事本，
依據一般的文字輸入即可。
<html>…</html>
用來指示 Html 文件的開始與結束。
<head>…</head>
用來標示文件的資訊。
<title>…</title>
通常放置於 <head>…</head> 之間，用來表達網頁標題的資訊。
<body>…</body>
7
網頁中可以顯示各種文字、圖形、表格、表單或
超結連等多媒體資料。
8
文字設定方式
HTML 標籤中，有兩個可用來對文字做變化的標
籤，分別是「 font 」及「 h1 」～「 h6 」，語法
中是以 <h> 來表示設定標題文字的開始，而 </h>
表示結束，例如： <h1>…</h1> 。
兩者間有一點差異，其中 <h> 標記會在設定標題
的同時自動加粗字體，還會自動換行。
9
<font size> 則不會換行也不會加粗字體，其中
size 可允許設定的 為 1-7
<Html>
<Body>
<H4> 針對文字做變化的標籤此處等級為第 4 級 </H4>
<H2> 針對文字做變化的標籤此處等級為第 2 級 </H2>
<Font Color=“Blue” Size=6> 此標記可針對特定的文字區
塊
改變大小及色彩
</Body>
10
</Html>
11
<font> 標記如果搭配 face 屬性，可以指定字型，其用法如下
：
<font face= 第 1 種字型 , 第 2 種字型 ,…>
至於 <font> 標記如果搭配 color 屬性，可以指定文字的色彩
：
<font color=”FFFF00” 文字的顯示顏色 >
12
段落與換行
瀏覽器會將網頁中的換行視為空白字元，因此在
網頁中要達成段落或換行的目的，就需要使用
<p> 或 <br> 這兩個 HTML 標籤了。
<br> 標記能為您做換行的動作，但 <p> 標記除了
和 <br> 標記一樣可以進行換行的動作外，還會另
外增加一個空白列。
13
插入圖形
使用 <Img> 標籤可以在網頁中放置圖形，底下用
個例子來說明：
<Html>
<Body>
<Img Src="A004.gif">
</Body>
</Html>
14
圖片對齊方式
圖片的對齊方式就比文字來的多，底下以表格來
說明圖片的 Align 屬性其所代表的意義。
Align 屬性 說明
Top 向上對齊
Middle 置中對齊
AbsMiddle 絕對置中對齊
Bottom 向下貼齊基準線
AbsBottom 絕對向下對齊
Right 向右對齊
Left 向左對齊 15
要注意的是，「 Align="Right" 」會將圖片放置在
視窗的最右方，而文字則維持齊左的預設 。
16
超連結功能
HTML 標籤裡，超連結是以 <A> 來表示，而它還
可再分為「文字超連結」以及「圖片超連結」。
網頁中的「文字超連結」上，當我們在該超連結
上按下滑鼠左鍵後，將網頁帶到它所指定的另一
份網頁去：
17
<Html>
<Body>
<A Href="ch16_01.htm"> 請參閱介紹 </A>
</Body>
</Html>
18
「 Href 」屬性是用來設定要連結的檔案位置，它
可以是網頁、圖片或音訊媒體 。
超連結除了可以文字型態出現外，也可使用圖片
來建立超連結，例如底下例子：
19
<Html>
<Body>
<A Href="http://www.travel.com.tw/">
<Img Src="travel.gif" Border="0" Align="right">
</A>
</Body>
</Html>
20
「圖片超連結」就是將圖片放置於超連結的標籤
之中。
其中「 Src 」屬性是用來指出圖片的所在位置。
例如：
<Img Src="linux.gif">
21
HTML 標記中有四個屬性可以讓您選定文字顏色
、連結字顏色、甚至您按下連結文字後的顏色變
化，讓瀏覽者知道哪些 案已經 讀過：
屬性名稱 功能說明
text 文件中的文字顏色。
link 連結文字的顏色。
alink 按於連結文字時所顯現的色彩。
vlink 連結後，連結文字所顯示的顏色。
22
幾個屬性的設定必須加在 <body> 標記裡才會有
作用，如下所示：
<body text="#000000" link="#FF0000" alink="#00FF00" vlink="FFFFFF">
23
製作表格功能
表格所使用到的 HTML 標籤共有三組 <Table> 、
<Tr> 及 <Td>
<Table> 區段是由許多個 <Tr> 所構成，而 <Tr>
區段則是由一個以上的 <Td> 所組成。
<Td> 區段裡的內容，即是要顯示的資料，至於
<Tr> 標籤則是用來分隔資料列。
24
簡單的表格應用
<Html>
<Body>
<Table Border="1">
<Tr>
<Td><Img Src="pic1.tif"></Td>
<Td><Img Src="pic2.tif"></Td>
</Tr>
<Tr>
<Td> 圖片一
</Td>
<Td> 圖片二
</Td>
</Tr>
<Table>
</Body>
</Html>
25
26
利用 <Td> 標籤的「 Colspan 」及「 Rowspan 」
屬性，我們還可製作出跨行或跨列的表格。
「 Colspan 」屬性是用來設定要水平合併的儲存
格數，而「 Rowspan 」屬性則是用來設定要垂直
合併的列數。
27
<Html>
<Body>
<Table Border="1">
<tr>
<Td rowspan="4"><Img Src="pic1.gif" ></td>
<Td> 人的特 徵 </td>
</tr>
<tr>
<td> 男女 姓別 都有 </td>
</tr>
<tr>
<td> 星座 ：天 蠍 </td>
</tr>
<tr>
<td> 血型 ： B 型 </td>
</tr>
<tr>
<td colspan="2"> 我是萬 物之靈 ，我 之所以 和動 物不 同的是
<Br>
我有高 度思考 的能 力 </td>
</tr>
</table>
</Body>
</Html>
28
29
7-3 CSS 樣式表
CSS 的全名是 Cascading Style Sheets ，一般稱
之為串聯式樣式表，其作用主要是為了加強網頁
上的排版效果 ( 圖層也是 CSS 的應用之一 )
HTML 之後繼續開發 CSS 語法，它可用來定義
HTML 網頁上物件的大小、顏色、位置與間距，
甚至是為文字、圖片加上陰影等等功能。
30
介紹 CSS 規格技術的網站 www.w3.org
31
CSS 的精彩功能
CSS 不但可以大幅簡化在網頁設計時對於頁面格
式的語法文字，更提供了比 HTML 更為多樣化的
語法效果。
要將所有 <H1> 標籤內的文字都調整為「藍色及
置中對齊」，如下所示：
32
使用 HTML 語法，必須對每一個要建立格式效果
的文字都加上語法標籤：
33
CSS 時，，只要事先定義好 <H1> 標籤的文字格
式效果，再來直接套用即可，以下
<head></head> 內宣告 <H1> 樣式，所以整個網
頁內的 <H1> 標籤都會套用同樣的樣式。
style 標籤內加上註解符號 <!--…--> 是為了讓不
支援 CSS 的瀏覽器忽略 style 標籤內的敘述。
34
35
現有的語法標籤都不適於加入 CSS 效果時，則可
另外自訂一個標籤來加入 CSS 效果：
.RedColor{color:#FF0000;}
請注意， RedColor 前方有一個點 (.) ，相當於
*.RedColor ，意思就是類別 RedColor 可以套用
在所有標籤。
36
37
CSS 最令人驚喜之處的就是文字方面的應用，除
了文字性質之外，還可以藉由 CSS 來包裝或加強
圖片或動態網頁的特效。
使用 CSS 指令，則能直接控制水平或垂直的排列
方式。
38
CSS 功能還可以任意調整網頁文繞圖的形式、濾
鏡特效、漸層效果、光暈效果、探照燈效果、淡
入淡出效果等，請看以下範例網頁。
39
網頁上的文繞圖效果 網頁上的各種濾鏡效果
40
網頁上的探照燈效果 網頁上的轉場效果
7-4 網頁配色快易通
網頁儼然成為推銷產品、公司行號及個人的一項
利器，很多網頁設計師都會善用色彩來做推銷，
讓網站與該公司的形象合而為一。
不同的平台或瀏覽器都有各自的調色盤所致。
41
網頁安全色
網頁安全色包含如下的 216 種色彩
在繪圖軟體中輸入 RGB 數 ，即可得到該顏色，
或是在 HTML 語法中輸入它的 16 進位，網頁編
輯程式即可轉譯成該顏色：
42
想在繪圖程式中直接選用網頁安全色彩也並不困
難，因為現今的影像繪圖軟體或網頁編輯程式都
有提供如此的功能。
Photoshop 為例，當按下顏色色塊進入檢色器裡
，勾選「僅網頁色彩」，所選定的顏色就適用於
網頁上。
43
「色彩面板」右側下拉選擇「色譜中的 Web 安全
色彩」，就可以使用網頁安全色：
44
網頁色相配色技巧
編輯網頁時，通常都不會只使用一個顏色，而是
使用數個色彩來做搭配，因此想要配出好的網頁
效果，基本的網頁配色技巧可得知道才行。
45
色相方面來說，色彩是以紅、橙、黃、綠、藍、
紫的順序排列成如下的色相環：
46
通常運用色相配色時，可以考慮以「類似色相」
或「互補色相」兩種方式來配色：
– 類似色相的配色
類似色相的配色 ( 黃 / 綠 / 藍 )
類似色相的配色 ( 黃 / 綠色 )
47
– 互補色相的配色
互補色相的配色 ( 橙 / 藍 )
48
網頁色調配色技巧
明度
彩度
49
以色調做配色時，也可以採用「類似色調」或
「相對色調」來做配色。
– 類似色調的配色
• 以「淡」色為例，與其鄰近的色調就稱為「類似色
調」，諸如淺色、帶淺灰、淺灰等色均屬之。
類似色調的配色 ( 橙色調 )
50
– 相對色調的配色
• 距離「淡」色較遠的色調則稱為「相對色調」，諸
如：鮮 、濃、暗、帶暗灰…等色，由於其明暗的對
比差異較大，因此易形成視覺注意的焦點。
相對色調的配色 ( 綠色調 )
51
好用工具介紹
設計網頁時，大多數設計師都費盡心力地在挑選
色彩，希望讓網頁的圖文搭更吸引人。如果您正
為色彩搭配的問題傷透腦筋，那麼，網路上有一
些好用的配色工具，不妨多加利用。
52
Visibone Color Lab
– 網址： http://www.visibone.com/colorlab/big.html
53
配色分類字典
– 網址： http://www.print100.com/hk/html/csi.aspx
54
Color Schemer Online v2
– 網址： http://www.colorschemer.com/online.html
55
7-5 網頁設計大師－ Dreamweaver 8
Dreamweaver 8 是由 Macromedia 公司發展出
來，一套網頁設計的 HTML 編輯器軟體。
一般來說網站規劃會以樹狀結構圖來表示各主
題網頁連結的狀況。
56
Dreamweaver 8 操作環境簡介
功能群組
主功能表
面板
文件編輯
區
按此鈕可
隱藏群組
面板
屬性面板
57
規劃網站藍圖
58
建立網站的第一步
執行 ｢網 站 /
管理 網站 ｣
指令 ，開 啟
此視 窗， 接
著按 下｢ 新
增｣鈕， 並
選擇 ｢網 站｣
選項
59
1. 輸入 網站 名稱
2. 按「下一 頁」
鈕
60
1. 選此 單選 扭
2. 按「 下一 頁」
鈕 61
1. 選此單選
鈕
2. 選擇存 資料
夾
3. 按「下一頁
」鈕
62
1. 按下拉
式清單鈕
，選擇
「無」
2. 按「下
一頁」鈕
63
顯示網站相關資訊
按「完成」鈕
64
網頁檔案管理
網站資料夾中建立新的網頁 案和資料夾，以便
我們在設計網頁時連結 案及存放相關資料使用。
在檔案群組的網站
面板中選此網站後
再點取滑鼠右鍵
執行此
指令
65
66
67
版面檢視模式
利用表格，將網頁的版面分隔出適當的區域，放
置不同種類的物件。
使用前
68
69
7-6Dreamweaver 靜態網頁元件
靜態網頁基本的組成要素不外乎文字、圖片及表
格，運用這三個基本要素就可以變化出千變萬化
的各式網頁。
Dreamwever 為了 助我們節省 案空間，會自動
將空格刪除。
70
文字屬性變化
Dreamweaver 將文字分成標題字與一般段落文
字，兩者之間的差異在於使用標題字時，會自動
為字體加粗。
71
72
73
插入空白符號
Dreamwever 為了 助我們節省 案空間，會自
動將空格刪除。如果要加的話切換成全形即可插
入空白符號，或修改偏好設定。
74
使用前
75
使用後
76
插入項目符號 ( 使用前 )
不仔細看
還真雜亂
77
1. 選取全
部文字
2. 選擇「段落」
格式
78
按此鈕
79
使用後
段落內容更清
楚了
80
7-7 圖片屬性變化
插入圖片 製作影像地圖
調整影像大小 加入水平線
預留影像位置 設定影像藍圖
為影像加上邊框 背景圖片別亂動
81
插入圖片
網頁設計師習慣利用其他繪圖軟體
（ PhotoImpact 或 Photoshop ）處理及圖片
影像，然後再進入 Dreamweaver 插入圖形編排
，以簡化網頁設計流程。
82
83
調整影像大小
84
85
預留影像位置
86
87
為影像加上邊框
Dreamweaver 中可以影像加上邊框而已。控制
的就是邊框的粗細，至於顏色就要視這張圖片是
否有加上超連結而定。
88
89
製作影像地圖
當一張圖片包含了好幾個重要資訊的時候，但是
如果將圖片製作影像地圖後，一張圖片就能 同
時連結幾個不同的網頁。
90
使用前
整張圖只能建立一個連結
91
92
93
使用後
在標題範圍中皆可建立連結
94
加入水平線
水平線具有區隔版面特性的重要地位，使用方法
和插入影像圖片一樣簡單
95
96
97
設定影像藍圖
98
99
100
背景圖片別亂動
使用影像圖片作背景的最大困擾，就是內容過多
，導致影像重疊的情況發生。除了預先製作較長
的背景影像之外，如果能讓背景不要亂動，更是
事半功倍的方法。
使用前 101
102
使用後
103
7- 8 表格屬性變化
改變整體表格屬性
套用預設色彩
合併及分割儲存格
修改儲存格屬性
104
改變整體表格屬性
使用表格工具繪製表格後，只要修改屬性面板上
的設定 ，就可以將表格的邊框加粗、間距加大
、以及改變表格色彩等整體性變化。
105
106
修改儲存格屬性
在 Dreamweaver 表格和表格內的儲存格可以分
開設定屬性。
107
使用前
此儲存
格背景
色為黃
色
108
1. 選此儲存格
2. 按插
入背景圖
片鈕
109
1. 選
擇影
像檔 案
2. 按此
鈕
110
使用後
背景 為 影像
圖片
111
7-9 超連結大集合
以文字建立超連結
建立郵件超連結
以圖形建立網站超連結
命名錨點
112
以文字建立超連結
113
114
建立郵件超連結
網頁如果有問題的時候，或者希望與瀏覽者有更
進一步的互動時，不妨留下 E-mail 作為溝通管
道。
115
116
117
以圖形建立網站超連結
118
119
命名錨點
遇到網頁內容太長，或者相同網頁中有幾個不同
的單元時，建議您使用命名錨點的功能，讓使用
者可以在同一個頁面中，快速切換 讀段落的位
置。
120
使用前
必須使用垂
直捲動軸才
看到下方內
容
121
1. 將游
標移到此處
2. 執行此指
令
122
2. 按此
鈕
1. 輸入錨點名
稱（只能用英文
）
123
出現已命名錨
點符號
124
1. 選此文
字
2. 再此輸入
「 #john 」 125
按此鈕
則跳到
下方個
人資料
處
126
7-10 動態按鈕
動態按鈕就是利用二到三張的圖片，藉由滑鼠的移
動產生一些影像變化。
標題按鈕可以利用滑鼠變動影像功能，當滑鼠移到
標題圖示時，影像就會產生變化。
導覽列多加了一組影像的變化，當滑鼠執行過超連
結之後，影像又變成另一個樣式。
127
標題按鈕
標題按鈕可以利用滑鼠變動影像功能，當滑鼠移
到標題圖示時，影像就會產生變化。
使用前
128
129
130
導覽列
導覽列可以在一個視窗之中同時設定多組連結按
鈕，而且每個連結按鈕可以有四組影像效果
使用前
131
132
133
使用後
134
