1 / 72

網頁設計丙級檢定教材

網頁設計丙級檢定教材. 莊雅如 編. 安裝 IIS 題組一 & 題組六 1 , 2 題組二 & 題組七 1 , 2 題組三 & 題組八 1 , 2 , 3 , 補充 題組四 & 題組九 1 , 2 , 補充 題組五 & 題組十 1 , 2 , 3-1 , 3-2 網頁丙檢檢定教學資源 http://203.68.83.3/wkl/173003.html. 安裝 IIS. 我的電腦 / 右鍵 / 管理 /IIS/ 網站 / 預設 Web 站台 （內容）. 開始 / 控制台 / 新增或移除程式

desma
Download Presentation

網頁設計丙級檢定教材

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 安裝IIS • 題組一 & 題組六 1,2 • 題組二 & 題組七 1,2 • 題組三 & 題組八 1,2,3,補充 • 題組四 & 題組九 1,2,補充 • 題組五 & 題組十 1,2,3-1,3-2 • 網頁丙檢檢定教學資源 • http://203.68.83.3/wkl/173003.html

  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像素1.開啟PhotoImpact「開新影像」設定寬150、高60像素

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

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

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

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

  12. 1.在PhotoImpact開啟0102.jpg及0104.jpg，點選0102.jpg，選擇魔術棒工具。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」，大小維持 不變，左右兩側的球需呈現「順時針」之原地自轉效果，旋轉角度變化為18度，原始圖片「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、0303A6.在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按複製，點新影像，按貼上。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.按文字工具鈕，選取「分割文字」，按「分割」鈕。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」，圖片寬、高均依相框規格調整，參考完成結果如上圖。

More Related