Transcript 網頁設計丙級檢定

網頁設計丙級檢定教材
莊雅如 編
1
安裝IIS
題組一 & 題組六 1,2
題組二 & 題組七 1,2
題組三 & 題組八 1,2,3,補充
題組四 & 題組九 1,2,補充
題組五 & 題組十 1,2,3-1,3-2
網頁丙檢檢定教學資源
http://203.68.83.3/wkl/173003.html
2
安裝IIS
我的電腦/右鍵/管理/IIS/網站/預設Web站台 （內容）
 開始/控制台/新增或移除程式
 點選「新增/移除Windows元件」
 勾選「Internet Information Services (IIS)」，下一步，確定完成。
3
安裝IIS
 開始/控制台/系統管理工具
 點選Internet Information Service開啟。
4
安裝IIS
我的電腦/右鍵/管理/IIS/網站/預設Web站台 （內容）
 點選主目錄，瀏覽，選C:\ WEBXX，按確定，即設定完成。
5
題組一 & 題組六
(四) menu.htm 網頁需含下面的資訊：
(※)3. 製作如下圖之圖片「社團介紹」，檔名為「0105.jpg」、寬150 像素、
高60 像素、標楷體、背景為由上到下漸層色（#FF00FF 到 #FFFFFF）。
6
1.開啟PhotoImpact「開新影像」設定寬150、高60像素
7
2.設定背景為由上到下漸層色(#FF00FF到#FFFFFF）點選填充工具中的「線性
漸層填充工具）
3.在工具列，點選填充色彩設定。
8
4.設定漸層方向。題組一是由上到下拖曳。題組六是由左到右拖曳。
5.插入文字。點選「文字工具」
設定字型大小與色彩。
，並鍵入「社團介紹」文字。
9
6.點選「挑選工具」
，再點選「水平垂直置中」鈕。
7.存檔0105.JPG
10
題組一 & 題組六
(五) main.htm 網頁需含下面的資訊：
(★)2. 將圖片「0102.jpg」與「0104.jpg」做影像合成，存成「0106.jpg」。圖
中人物的大小、位置及圖片寬高均不變動，參考完成結果如下圖。
原圖片 (0102.jpg)
背景圖 (0104.jpg)
合成圖片 (0106.jpg)
11
1.在PhotoImpact開啟0102.jpg及0104.jpg，點選0102.jpg，選擇魔術棒工具。
12
2.選擇「+」、「區域」、相似性「50」
3.逐一點選除了人物外的背景，點選後按右鍵，選「改選未選取部分」
13
4.人物已被選取，按「複製」鈕
5.點選0104.jpg，按「貼上」鈕
6.另存新檔為0106.jpg，並且不存檔直接關閉0102.jpg。
14
題組二 & 題組七
(★)3. 將圖片「0204.gif」製作具動態效果的新圖片「0204A.gif」，大小維持
不變，左右兩側的球需呈現「順時針」之原地自轉效果，旋轉角度變化為
18度，原始圖片「0204.gif」中的「運動廣場」四字之動態效果需完全保留於
新的圖片「0204A.gif」中（結果可參考「範例0204A.gif」檔，但請注意：禁
止使用「範例0204A.gif」檔）。
15
1.選取Ulead GIF Animator，開啟現有的影像檔，選擇0204.gif
2.選取
將圖片放大。
3.由球左上角向右下拖曳。
4.編輯→複製合併結果。按貼上。
16
5.選取「變形工具」
順時針旋轉18度
17
6.按「再製選定的物件」鈕
，按「順時針旋轉」鈕
重複步驟八次，共產生9個圓球。
7.重新命名02-1、03-1、04-1 ‥‥10-1。
8.按Shift選取02-1到10-1，9個圓球物件。按「再製選定的物件」鈕，
複製右邊9顆球。拖曳左邊被9個方框圍住的圓球至右邊與右邊圓球相重疊。
18
9.重新命名新增的9顆球為02-2、03-2、04-2 ‥‥10-2。
10.排列圓球物件位置，選取02-2，向下拖曳至02-1物件上方。
使同一畫格的2球連續擺放。
11.使用shift，選取所有畫格。按「將不同畫格的物件調成一致」鈕
12.針對畫格點眼睛。畫格2，
點選02-1、02-2，依序設定。
第1、11、21，不需設定。
13.設定完成，
另存新檔為0204A.GIF。
19
題組二 & 題組七
(※)3. 將圖片「0205.jpg」製作具動態效果的新圖片「0205A.gif」
，大小維持不變，左右兩側的
及
需呈現左右鏡射互
換之閃動效果，互換間隔為1.5 秒（結果可參考「範例0205A.gif
」檔，但請注意：禁止使用「範例0205A.gif」檔）。
(※)3. 將圖片「0705.jpg」製作具動態效果的新圖片「0705A.gif」，
大小維持不變，上下兩側的
及
需呈現上下鏡射互換之閃動
效果，互換間隔為1.5 秒（結果可參考「範例0705A.gif」檔，但請注
意：禁止使用「範例0705A.gif」檔）。
20
1.開啟PhotoImpact ，開啟0205.jpg
2. 按「標準選取工具」
，分別選取陽傘與眼鏡，拖曳出來產生二個未命名
影像。
3.針對陽傘與眼鏡，
選取變形工具鈕，按水平翻轉鈕。
21
4.開啟Ulead GIF Animator，開啟0205.jpg
5. 按再製畫格，產生第2個畫格
6.切回PhotoImpact複製洋傘，切換回Animator按貼上。
將洋傘移至右邊，按變形工具鈕
將圖片拉寬以覆蓋眼鏡。
7.切回PhotoImpact複製眼鏡，切換回Animator按貼上。
將眼鏡移至左邊，按變形工具鈕
將圖片拉窄以免覆蓋文字。
22
8.設定播放時間1.5秒鐘
點選1.畫格按左鍵兩下，或選右鍵之「畫格內容」
重覆上步驟設定2.畫格。
9.完成存檔為0205A.GIF
23
題組三 & 題組八
(三) title.htm 網頁需含下面的資訊：
(※)3. 從「0308.jpg」、「0309.jpg」、「0310.jpg」、「0311.jpg」、「
0312.jpg」、「0313.jpg」等六張圖片中任選三張製作具動態效果的標
題圖片，需在同一位置以間隔一秒的速度輪播，輪播時三張圖片皆不得
有毛邊現象(亦即三張圖片需調整大小一致)。
24
1.開啟Ulead GIF Animator，動畫精靈
2.選擇寬度150、高度109
25
3.新增影像，從0308~0313，選擇三張圖片
26
4.畫格輸入100
5.下一步，完成
27
6.調整圖片大小，
寬度150、高度109
勾掉「維持寬高比」
三張圖片皆須設定。
7.存檔
檔案/另存新檔/Gif檔
檔名自訂
「title.gif」
28
題組三 & 題組八
(四)menu.htm 網頁需含下面的資訊：
(★)3. 表格第一、三、五、七列分別插入0305.jpg、0306.jpg、0304.jpg、
0303.jpg等四張圖片，每張圖片寬120 像素、高40 像素，水平置中對齊，
當滑鼠移過時需呈現同樣圖片、不同顏色的動態效果。
29
1.開啟PhotoImpact，開啟圖片0305,0306,0304,0303
※.記得3,4,6格式為gif圖片，須先另存為jpg檔
2.圖片縮小，「變形工具」、「維持寬高比」（開鎖）、寬120、高40
3.檔案/另存新檔，0305A.jpg
30
4.改變顏色，
(1) 0303A、0304A、0306A， Or (2)選擇「上色」
必須關閉再開，才可執行特效。
5.檔案/另存新檔，0305B.jpg
其他三個檔案依此類推完成。
31
6.在Frontpage中，在1、3、5、7列分別插入0305A、0306A、0304A、0303A
7.圖片動態效果，檢視/工具列/DHTML效果。
選擇圖片，選0305B.JPG，以此類推完成。
32
題組三 & 題組八
(七) bb.htm 網頁需含下面的資訊：
(※)2. 將圖片「0306.jpg」及「0307.jpg」以上下並列、水平置中對齊方式製作
成圖片「0314.jpg」，寬340 像素、高280 像素。
33
1.在PhotoImpact中，開啟0306.jpg、0307.jpg
2.檔案/開新檔案/開新影像。設定寬340、高280
34
3.點0306按複製，點新影像，按貼上。點0307按複製，點新影像，按貼上。
4.調整位置。
5.存檔，0314.jpg
35
題組三 & 題組八
※設定網路地圖的方法為
1.選取圖片
2.圖片工具列
36
題組四 & 題組九
(◎)2. 將「0404.jpg」圖片向左旋轉約30 度後插入網頁內，大小不變，水平置
中對齊，替代文字為「甲牌冷氣機」。（請另存新檔不要覆蓋）
(◎)2. 將「0405.jpg」圖片向右旋轉約30 度後插入網頁內，大小不變，水平置
中對齊，替代文字為「乙牌冷氣機」
37
題組四 & 題組九
※0401.Jpg，有gif問題，須至PhotoImpact另存成jpg檔。
※題目如有表單與表格，要先做表單再做表格。
※選項按鈕分組的方法為：
38
題組五
(四) menu.htm 網頁需含下面的資訊：
(★)3. 製作一個「書曼的旅遊相簿」圖片，檔名為「0508.gif」、標楷體、外框字效果、背
景為透明色，每一個字初值顏色為書(000000)、曼(FF0000)、的(FFFF00)、旅
(00FF00)、遊(00FFFF)、相(0000FF)、簿(FF00FF)等七種，然後依照下列方式，由左
至右間隔約1 秒輪替循環變化（結果可參考「範例0508.gif」檔 ）。
(＊)4. 表格第一列插入圖片「0508.gif」，寬125 像素、高20 像素，水平置中對齊，替代文
字為「書曼的旅遊相簿」（注意：若應檢人無法完成前項之圖片「0508.gif」，需以圖
片「範例0508.gif」代替，以利完成替代文字的設定）。
(1)書(000000)、曼(FF0000)、的(FFFF00)、旅(00FF00)、遊(00FFFF)、相(0000FF)、簿(FF00FF)
(2)書(FF00FF)、曼(000000)、的(FF0000)、旅(FFFF00)、遊(00FF00)、相(00FFFF)、簿(0000FF)
(3)書(0000FF)、曼(FF00FF)、的(000000)、旅(FF0000)、遊(FFFF00)、相(00FF00)、簿(00FFFF)
(4)書(00FFFF)、曼(0000FF)、的(FF00FF)、旅(000000)、遊(FF0000)、相(FFFF00)、簿(00FF00)
(5)書(00FF00)、曼(00FFFF)、的(0000FF)、旅(FF00FF)、遊(000000)、相(FF0000)、簿(FFFF00)
(6)書(FFFF00)、曼(00FF00)、的(00FFFF)、旅(0000FF)、遊(FF00FF)、相(000000)、簿(FF0000)
(7)書(FF0000)、曼(FFFF00)、的(00FF00)、旅(00FFFF)、遊(0000FF)、相(FF00FF)、簿(000000)
39
題組十
(四) menu.htm 網頁需含下面的資訊：
(★)3. 製作一個「書曼的旅遊相簿」圖片，檔名為「1008.gif」、標楷體、外框字效果、背
景為透明色，每一個字初值顏色為書(000000)、曼(FF0000)、的(FFFF00)、旅
(00FF00)、遊(00FFFF)、相(0000FF)、簿(FF00FF)等七種，然後依照下列方式，由左
至右間隔約1 秒輪替循環變化（結果可參考「範例1008.gif」檔 ）。
(＊)4. 表格第一列插入圖片「1008.gif」，寬125 像素、高20 像素，水平置中對齊，替代文
字為「書曼的旅遊相簿」（注意：若應檢人無法完成前項之圖片「1008.gif」，需以圖
片「範例1008.gif」代替，以利完成替代文字的設定）。
(1)書(000000)、曼(FF0000)、的(FFFF00)、旅(00FF00)、遊(00FFFF)、相(0000FF)、簿(FF00FF)
(2)書(FF0000)、曼(FFFF00)、的(00FF00)、旅(00FFFF)、遊(0000FF)、相(FF00FF)、簿(000000)
(3)書(FFFF00)、曼(00FF00)、的(00FFFF)、旅(0000FF)、遊(FF00FF)、相(000000)、簿(FF0000)
(4)書(00FF00)、曼(00FFFF)、的(0000FF)、旅(FF00FF)、遊(000000)、 相(FF0000)、簿(FFFF00)
(5)書(00FFFF)、曼(0000FF)、的(FF00FF)、旅(000000)、遊(FF0000)、相(FFFF00)、簿(00FF00)
(6)書(0000FF)、曼(FF00FF)、的(000000)、旅(FF0000)、遊(FFFF00)、相(00FF00)、簿(00FFFF)
(7)書(FF00FF)、曼(000000)、 的(FF0000)、旅(FFFF00)、遊(00FF00)、相(00FFFF)、簿(0000FF)
40
1.在PhotoImpact，檔案/開新檔案/開新影像。
2.設定寬125、高20。透明。
41
3.選文字工具鈕。
3
2
4
5
6
1
42
4.點選輸入「書曼的旅遊相簿」
5.點選挑選工具鈕，選擇「水平垂直皆置中」。
43
6.按文字工具鈕，選取「分割文字」，按「分割」鈕。
44
7.編輯→再製→基底影像與物件，重複做6次。
※.請拖曳影像做上下對齊排列，以利後來的上色動作。
8.點選文字按鈕，針對各別文字，進行上色。
45
9. 上色結果如右所列。
10.檔案→另存新檔
存在桌面，檔案類型為：gif
分別存檔為1.gif~7.gif。
46
11.開啟Ulead GIF Animator，動畫精靈
12.選擇寬度125、高度20
47
13.新增影像。
※請注意調整順序為1.gif~7.gif，否則動畫順序會是錯誤的。
48
14.畫格輸入1
15.下一步，完成
16.檔案→另存新檔，請存C:\WEB05\images\0508.GIF
49
題組五 & 題組十
(五) main.htm 網頁需含下面的資訊：
(※)2. 將圖片「0511.jpg」與「0509.jpg」做影像合成，存成「0511a.jpg」，圖
片寬、高均依相框規格調整，參考完成結果如上圖。
50
更有效的解法
1.在PhotoImpact，開啟0509.jpg。
2.選取0509.jpg內框的部分
3.選擇編輯→填充。選影像書籤，載入0511.jpg。點選調成影像大小。
4.另存新檔0511a.jpg即完成。
5.其他依3-5步驟，完成0521a、0531a、0541a、0551a.jpg。
51
題組十
排列350*480
7.檔案→開新檔案→開新影像。610x300、透明。
8.將0511a~0551a.jpg開啟，依順序複製、貼上到新的影像當中。並且按下圖排列。
※若插入圖片順序正確，圖層位置就會正確，不需調整。
9.另存新檔為0510a.jpg
1
1
3
2
5
3
2
4
4
5
52
題組五 & 題組十
53
54
1.在album2下開新資料夾為images，將0521、0522、0523、0524、0525.jpg放入。
在album5下開新資料夾為images，將0551、0552、0553、0554、0555.jpg放入。
2.檔案→分享：Web相簿
55
3.
56
題組十
要選「底線」
4.
題組十
文字色彩「藍色」#0000FF
57
5.
題組十
欄為2、列為3
58
6.
題組十
框線3
59
7.預覽沒問題後（預覽有問題可以再回來修改） ，再按確定。
60
修改index1的超連結色彩
題組十
藍
紅
綠
61
題組五 & 題組十
62
63
1.檔案→分享：Web相簿
64
3.
65
題組十
文字色彩「紅色」#ff0000
4.
題組十
連結、檢視過的
連結、使用中的
連結三個都是
「紅色」#ff0000
66
題組十選這個
5.
67
6.
題組十
框線3
68
7.預覽沒問題後（預覽有問題可以再回來修改） ，再按確定。
69
 在FrontPage修改index1超連結色彩將表格置中
先修改表格的寬度100%，再刪除儲存格
題組十
綠
黃
紅
70
題組十
80%、20%調換
71
 題組五
 題組十





卡蹓標題→紅
[上一頁][索引][下一頁] 紅
未點→紅
點ing→綠
已點→藍





卡蹓標題→藍
[上一頁][索引][下一頁] 紅
未點→藍
點ing→綠
已點→紅





蘭嶼標題→藍
[上一頁][下一頁] 藍
未點→藍
點ing→黃
已點→紅





蘭嶼標題→紅
[上一頁][下一頁] 紅
未點→綠
點ing→紅
已點→黃
72