You are on page 1of 134

第 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