網頁設計丙級檢定教材 莊雅如 編.

Presentation on theme: "網頁設計丙級檢定教材 莊雅如 編."— Presentation transcript:

1 網頁設計丙級檢定教材 莊雅如 編

2 安裝IIS 題組一 & 題組六 1,2 題組二 & 題組七 1,2 題組三 & 題組八 1,2,3,補充 題組四 & 題組九 1,2,補充
題組一 & 題組六 1,2 題組二 & 題組七 1,2 題組三 & 題組八 1,2,3,補充 題組四 & 題組九 1,2,補充 題組五 & 題組十 1,2,3-1,3-2 網頁丙檢檢定教學資源

3 安裝IIS 我的電腦/右鍵/管理/IIS/網站/預設Web站台 （內容） 開始/控制台/新增或移除程式 點選「新增/移除Windows元件」
勾選「Internet Information Services (IIS)」，下一步，確定完成。

4 安裝IIS 開始/控制台/系統管理工具 點選Internet Information Service開啟。

5 安裝IIS 我的電腦/右鍵/管理/IIS/網站/預設Web站台 （內容） 點選主目錄，瀏覽，選C:\ WEBXX，按確定，即設定完成。

6 題組一 & 題組六 (四) menu.htm 網頁需含下面的資訊：
(※)3. 製作如下圖之圖片「社團介紹」，檔名為「0105.jpg」、寬150 像素、 高60 像素、標楷體、背景為由上到下漸層色（#FF00FF 到 #FFFFFF）。

7 1.開啟PhotoImpact「開新影像」設定寬150、高60像素

8 2.設定背景為由上到下漸層色(#FF00FF到#FFFFFF）點選填充工具中的「線性漸層填充工具）
3.在工具列，點選填充色彩設定。

9 4.設定漸層方向。題組一是由上到下拖曳。題組六是由左到右拖曳。
5.插入文字。點選「文字工具」 ，並鍵入「社團介紹」文字。 設定字型大小與色彩。

10 6.點選「挑選工具」 ，再點選「水平垂直置中」鈕。
7.存檔0105.JPG

11 題組一 & 題組六 (五) main.htm 網頁需含下面的資訊：
(★)2. 將圖片「0102.jpg」與「0104.jpg」做影像合成，存成「0106.jpg」。圖中人物的大小、位置及圖片寬高均不變動，參考完成結果如下圖。 合成圖片 (0106.jpg) 背景圖 (0104.jpg) 原圖片 (0102.jpg)

12 1.在PhotoImpact開啟0102.jpg及0104.jpg，點選0102.jpg，選擇魔術棒工具。

13 2.選擇「+」、「區域」、相似性「50」 3.逐一點選除了人物外的背景，點選後按右鍵，選「改選未選取部分」

14 4.人物已被選取，按「複製」鈕 5.點選0104.jpg，按「貼上」鈕 6.另存新檔為0106.jpg，並且不存檔直接關閉0102.jpg。

15 題組二 & 題組七 (★)3. 將圖片「0204.gif」製作具動態效果的新圖片「0204A.gif」，大小維持
不變，左右兩側的球需呈現「順時針」之原地自轉效果，旋轉角度變化為 度，原始圖片「0204.gif」中的「運動廣場」四字之動態效果需完全保留於新的圖片「0204A.gif」中（結果可參考「範例0204A.gif」檔，但請注意：禁止使用「範例0204A.gif」檔）。

16 1.選取Ulead GIF Animator，開啟現有的影像檔，選擇0204.gif
2.選取 將圖片放大。 3.由球左上角向右下拖曳。 4.編輯→複製合併結果。按貼上。

17 5.選取「變形工具」 順時針旋轉18度

18 6.按「再製選定的物件」鈕 ，按「順時針旋轉」鈕
重複步驟八次，共產生9個圓球。 7.重新命名02-1、03-1、04-1 ‥‥10-1。 8.按Shift選取02-1到10-1，9個圓球物件。按「再製選定的物件」鈕， 複製右邊9顆球。拖曳左邊被9個方框圍住的圓球至右邊與右邊圓球相重疊。

19 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。

20 題組二 & 題組七 (※)3. 將圖片「0205.jpg」製作具動態效果的新圖片「0205A.gif」，大小維持不變，左右兩側的 及 需呈現左右鏡射互換之閃動效果，互換間隔為1.5 秒（結果可參考「範例0205A.gif」檔，但請注意：禁止使用「範例0205A.gif」檔）。 (※)3. 將圖片「0705.jpg」製作具動態效果的新圖片「0705A.gif」，大小維持不變，上下兩側的 及 需呈現上下鏡射互換之閃動效果，互換間隔為1.5 秒（結果可參考「範例0705A.gif」檔，但請注意：禁止使用「範例0705A.gif」檔）。

21 1.開啟PhotoImpact ，開啟0205.jpg 2. 按「標準選取工具」 ，分別選取陽傘與眼鏡，拖曳出來產生二個未命名影像。 3.針對陽傘與眼鏡， 選取變形工具鈕，按水平翻轉鈕。

22 4.開啟Ulead GIF Animator，開啟0205.jpg
5. 按再製畫格，產生第2個畫格 6.切回PhotoImpact複製洋傘，切換回Animator按貼上。 將洋傘移至右邊，按變形工具鈕 將圖片拉寬以覆蓋眼鏡。 7.切回PhotoImpact複製眼鏡，切換回Animator按貼上。 將眼鏡移至左邊，按變形工具鈕 將圖片拉窄以免覆蓋文字。

23 8.設定播放時間1.5秒鐘 點選1.畫格按左鍵兩下，或選右鍵之「畫格內容」 重覆上步驟設定2.畫格。 9.完成存檔為0205A.GIF

24 題組三 & 題組八 (三) title.htm 網頁需含下面的資訊：
(※)3. 從「0308.jpg」、「0309.jpg」、「0310.jpg」、「0311.jpg」、「0312.jpg」、「0313.jpg」等六張圖片中任選三張製作具動態效果的標題圖片，需在同一位置以間隔一秒的速度輪播，輪播時三張圖片皆不得有毛邊現象(亦即三張圖片需調整大小一致)。

25 1.開啟Ulead GIF Animator，動畫精靈
2.選擇寬度150、高度109

26 3.新增影像，從0308~0313，選擇三張圖片

27 4.畫格輸入100 5.下一步，完成

28 6.調整圖片大小， 寬度150、高度109 勾掉「維持寬高比」 三張圖片皆須設定。 7.存檔 檔案/另存新檔/Gif檔 檔名自訂 「title.gif」

29 題組三 & 題組八 (四)menu.htm 網頁需含下面的資訊：
(★)3. 表格第一、三、五、七列分別插入0305.jpg、0306.jpg、0304.jpg、0303.jpg等四張圖片，每張圖片寬120 像素、高40 像素，水平置中對齊，當滑鼠移過時需呈現同樣圖片、不同顏色的動態效果。

30 1.開啟PhotoImpact，開啟圖片0305,0306,0304,0303 ※.記得3,4,6格式為gif圖片，須先另存為jpg檔 2.圖片縮小，「變形工具」、「維持寬高比」（開鎖）、寬120、高40 3.檔案/另存新檔，0305A.jpg

31 4.改變顏色， (1) 0303A、0304A、0306A， Or (2)選擇「上色」 必須關閉再開，才可執行特效。 5.檔案/另存新檔，0305B.jpg 其他三個檔案依此類推完成。

32 6.在Frontpage中，在1、3、5、7列分別插入0305A、0306A、0304A、0303A
7.圖片動態效果，檢視/工具列/DHTML效果。 選擇圖片，選0305B.JPG，以此類推完成。

33 題組三 & 題組八 (七) bb.htm 網頁需含下面的資訊：
(※)2. 將圖片「0306.jpg」及「0307.jpg」以上下並列、水平置中對齊方式製作 成圖片「0314.jpg」，寬340 像素、高280 像素。

34 1.在PhotoImpact中，開啟0306.jpg、0307.jpg 2.檔案/開新檔案/開新影像。設定寬340、高280

35 3.點0306按複製，點新影像，按貼上。點0307按複製，點新影像，按貼上。
4.調整位置。 5.存檔，0314.jpg

36 題組三 & 題組八 ※設定網路地圖的方法為 1.選取圖片 2.圖片工具列

37 題組四 & 題組九 (◎)2. 將「0404.jpg」圖片向左旋轉約30 度後插入網頁內，大小不變，水平置
中對齊，替代文字為「甲牌冷氣機」。（請另存新檔不要覆蓋） (◎)2. 將「0405.jpg」圖片向右旋轉約30 度後插入網頁內，大小不變，水平置 中對齊，替代文字為「乙牌冷氣機」

38 題組四 & 題組九 ※0401.Jpg，有gif問題，須至PhotoImpact另存成jpg檔。 ※題目如有表單與表格，要先做表單再做表格。
※選項按鈕分組的方法為：

39 題組五 (四) 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)

40 題組十 (四) 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)

41 1.在PhotoImpact，檔案/開新檔案/開新影像。
2.設定寬125、高20。透明。

42 3.選文字工具鈕。 3 5 2 4 6 1

43 4.點選輸入「書曼的旅遊相簿」 5.點選挑選工具鈕，選擇「水平垂直皆置中」。

44 6.按文字工具鈕，選取「分割文字」，按「分割」鈕。

45 7.編輯→再製→基底影像與物件，重複做6次。 ※.請拖曳影像做上下對齊排列，以利後來的上色動作。 8.點選文字按鈕，針對各別文字，進行上色。

46 9. 上色結果如右所列。 10.檔案→另存新檔 存在桌面，檔案類型為：gif 分別存檔為1.gif~7.gif。

47 11.開啟Ulead GIF Animator，動畫精靈
12.選擇寬度125、高度20

48 13.新增影像。 ※請注意調整順序為1.gif~7.gif，否則動畫順序會是錯誤的。

49 14.畫格輸入1 15.下一步，完成 16.檔案→另存新檔，請存C:\WEB05\images\0508.GIF

50 題組五 & 題組十 (五) main.htm 網頁需含下面的資訊：
(※)2. 將圖片「0511.jpg」與「0509.jpg」做影像合成，存成「0511a.jpg」，圖片寬、高均依相框規格調整，參考完成結果如上圖。

51 更有效的解法 1.在PhotoImpact，開啟0509.jpg。 2.選取0509.jpg內框的部分
4.另存新檔0511a.jpg即完成。 5.其他依3-5步驟，完成0521a、0531a、0541a、0551a.jpg。

52 題組十 排列350*480 7.檔案→開新檔案→開新影像。610x300、透明。 8.將0511a~0551a.jpg開啟，依順序複製、貼上到新的影像當中。並且按下圖排列。 ※若插入圖片順序正確，圖層位置就會正確，不需調整。 9.另存新檔為0510a.jpg 1 2 3 5 4 1 2 3 4 5

53 題組五 & 題組十

54

55 1.在album2下開新資料夾為images，將0521、0522、0523、0524、0525.jpg放入。
2.檔案→分享：Web相簿

56 3.

57 題組十 要選「底線」 4. 題組十 文字色彩「藍色」#0000FF

58 5. 題組十 欄為2、列為3

59 6. 題組十 框線3

60 7.預覽沒問題後（預覽有問題可以再回來修改） ，再按確定。

61 修改index1的超連結色彩 題組十 藍 紅 綠

62 題組五 & 題組十

63

64 1.檔案→分享：Web相簿

65 3.

66 連結、檢視過的連結、使用中的連結三個都是「紅色」#ff0000
題組十 文字色彩「紅色」#ff0000 4. 題組十 連結、檢視過的連結、使用中的連結三個都是「紅色」#ff0000

67 題組十選這個 5.

68 6. 題組十 框線3

69 7.預覽沒問題後（預覽有問題可以再回來修改） ，再按確定。

70 在FrontPage修改index1超連結色彩將表格置中
先修改表格的寬度100%，再刪除儲存格 題組十 綠 黃 紅

71 題組十 80%、20%調換

72 題組五 題組十 卡蹓標題→紅 卡蹓標題→藍 [上一頁][索引][下一頁] 紅 [上一頁][索引][下一頁] 紅 未點→紅 未點→藍
點ing→綠 已點→藍 蘭嶼標題→藍 [上一頁][下一頁] 藍 未點→藍 點ing→黃 已點→紅 題組十 卡蹓標題→藍 [上一頁][索引][下一頁] 紅 未點→藍 點ing→綠 已點→紅 蘭嶼標題→紅 [上一頁][下一頁] 紅 未點→綠 點ing→紅 已點→黃