網頁設計乙級技術士技能檢定術科測試試題

Transcription

1 網頁設計乙級技術士技能檢定術科測試應檢參考資料 ( 此為草案, 請以公告版本為主 ) 試題編號 : ~5 審定日期 : 年月日 ( 此為草案, 請以公告版本為主 )

2 網頁設計乙級技術士技能檢定術科測試應檢參考資料目錄 ( 第二部分 ) 壹 網頁設計乙級技術士技能檢定術科測試應檢人須知... 1 貳 網頁設計乙級技術士技能檢定術科測試應用軟體使用須知... 3 參 網頁設計乙級技術士技能檢定術科測試應檢人自備工具參考表... 4 肆 網頁設計乙級技術士技能檢定術科測試試題使用說明... 5 伍 網頁設計乙級技術士技能檢定術科測試檢定場地設備規格表... 6 陸 網頁設計乙級技術士技能檢定術科測試評審表... 7 柒 術科測試時間配當表... 8 捌 網頁設計乙級技術士技能檢定術科測試試題名稱及編號... 9 玖 網頁設計乙級技術士技能檢定術科測試檢定試題 試題編號 : 試題編號 : 試題編號 : 試題編號 : 試題編號 : ( 此為草案, 請以公告版本為主 )

3 壹 網頁設計乙級技術士技能檢定術科測試應檢人須知 一 檢定內容為測試應檢人從事於視窗環境的網站架設 資料庫規劃與設計 網頁程式設計及視覺設計等能力 二 注意事項 : ( 一 ) 術科測試不分站, 應檢人須於規定時間內完成試題之功能要求, 成績及格者, 術科檢定評定為及格 ( 二 ) 應檢人依接到通知的日期 時間, 準時向考場報到, 辦理驗證手續 應檢人若遲到逾時 15 分鐘者, 以棄權論, 不予補檢 應檢人若遲到逾時 15 分鐘以內者, 不得因遲到而要求補加測試時間 ( 三 ) 由監評人員主持公開抽題 ( 無監評人員親自在場主持抽題時, 該場次之測試無效 ), 術科測試現場應準備電腦及印表機相關設備各一套, 術科辦理單位依時間配當表辦理抽題, 場地試務人員並將電腦設置到抽題操作介面, 會同監評人員 應檢人, 全程參與抽題, 處理電腦操作及列印簽名事項 應檢人依抽題結果進行測試, 遲到者或缺席者不得有異議 ( 四 ) 試題及檢定用光碟片, 需經術科辦理單位蓋有戳記者方為有效 ( 五 ) 應檢人使用之作業系統依考場使用之平台為主 ( 六 ) 應檢人在測試開始前, 應檢查所需使用之器材, 如有問題應立即報告監評人員處理, 否則一切受測設備之毀損, 術科辦理單位得要求應檢人照價賠償 ( 七 ) 應檢人若自備軟體時, 須符合 術科測試應用軟體使用須知 之各項規定, 若不符合 術科測試應用軟體使用須知 之任一規定時, 將不得使用該自備軟體, 否則以零分論處 ( 八 ) 應檢人所攜帶的自行安裝網頁設計相關軟體必須為貼有原版標籤之合法原版光碟軟體 ( 原版磁碟片及僅具使用權書之光碟片及試用版軟體, 均不予接受 ), 應檢人不得攜帶非法軟體或其它燒錄光碟進場, 否則以零分論處 ( 九 ) 應檢人自備之軟體於測試前應完成偵毒工作, 確保不含病毒 ( 十 ) 應檢人不得夾帶與測試有關的任何形式資料進場, 一經發現, 即視為作弊, 並以零分論處 ( 十一 ) 應檢人不得將試場內之任何器材及資料等攜出場外, 否則以零分論處 ( 十二 ) 應檢人不得接受他人協助或協助他人受檢, 如發現則視為作弊, 雙方均以 1 ( 此為草案, 請以公告版本為主 )

4 零分論處 ( 十三 ) 蓄意損壞公物設備者, 照價賠償外, 並依法處理 ( 十四 ) 應檢人於測試進行中, 應遵守測試場內外秩序, 禁止吸煙 窺視 嘻鬧 喧嘩 ( 十五 ) 應檢人於測試進行中, 若因急迫需上洗手間, 須取得監評人員同意並指派專人陪往, 應檢人不得因此要求增加測試時間 ( 十六 ) 應檢人若提前完成得舉手, 由監評人員發放檢定用隨身碟進行備份, 備份完成取回隨身碟後開始評分, 開始評分後, 不得要求更改 若應檢人不配合備份程序, 則視為重大缺點, 以不及格論 ( 十七 ) 應檢人不得將檢定用光碟片 試題本 網頁製作軟體等試場用品攜出場外 ( 十八 ) 應檢人於受檢時, 不得要求監評人員公布術科測試成績 ( 十九 ) 如有其他相關事項, 另於考場說明之 2 ( 此為草案, 請以公告版本為主 )

5 貳 網頁設計乙級技術士技能檢定術科測試應用軟體使用須知 術科辦理單位所準備或使用之各種電腦軟體均依 網頁設計乙級技術士技能檢定術科測試檢定場地設備表 規範準備與安裝, 提供應檢人術科測試時使用 術科辦理單位於應檢日十個工作天前 ( 日期以郵戳為憑 ), 寄交應檢人測試相關資料時, 應將所備妥之軟體填入 檢定場地設備規格表 中, 一併告知應檢人 若術科辦理單位所提供之中文輸入法或所準備之相關網頁設計軟體不合應檢人所需時, 應檢人可自行準備所需之中文輸入法軟體及相關網頁設計軟體, 但應檢人所自備之軟體, 必須符合下列各項規定, 若有任何使用權問題時, 其法律責任應由應檢人自行負責 一 應檢人自備之電腦軟體應為貼有原版標籤之合法原版光碟軟體 ( 原版磁碟片 試用版或僅具授權書之光碟片, 均不予接受 ) 二 應檢人自備之電腦軟體, 若不能完成術科測試試題之各項要求時, 由應檢人自行負責 三 應檢人須於應檢日七個工作天前 ( 日期以郵戳為憑 ) 將 自備之電腦軟體及聯絡電話 以 雙掛號限時專送 寄給術科辦理單位檢查及認證, 術科辦理單位應儘快於檢定前三個工作天通知應檢人驗證結果 四 應檢人寄給術科辦理單位之電腦軟體, 經術科辦理單位檢查及認證合格後, 術科辦理單位將於應檢日把該電腦軟體發給該應檢人, 以俾該應檢人於術科測試時安裝及使用 若該電腦軟體經考場檢查及認證不合格時, 應檢人於術科測試時, 將不可使用該電腦軟體, 後果由應檢人自行負責 五 應檢人所自備之電腦軟體中, 若含有任何與考題有關之資料 程式 模組或巨集時, 將以考試作弊論處 3 ( 此為草案, 請以公告版本為主 )

6 參 網頁設計乙級技術士技能檢定術科測試應檢人自備工具參考表 術科測試時, 除下列項目外, 應檢人禁止攜帶其他任何參考資料 軟體或工具, 若應檢人欲自行準備網頁設計或中文輸入法軟體完成術科測試試題之各項要求時, 其所自備之各種軟體應符合 術科測試應用軟體使用須知 之各項規定, 若不遵守 術科測試應用軟體使用須知 之任一規定時, 將不得使用該自備軟體, 否則以零分論處 項目名稱規格備註 1 網頁製作軟體合法原版的光碟片 ( 不含試用版 ) 2 繪圖軟體合法原版的光碟片 ( 不含試用版 ) 如欲自備左列軟體, 應檢人須於應檢日七個工作天前寄給術科辦理單位 ( 參考 術科測試應用軟體使用須知 ) 3 筆黑色或藍色原子筆 4 相關文 器具例 : 直尺 身心障礙應檢人之輔具 須徵得監評人員同意方 得使用 4 ( 此為草案, 請以公告版本為主 )

7 肆 網頁設計乙級技術士技能檢定術科測試試題使用說明 一 本試題係採檢定前公佈試題原則命製 二 本試題共五題, 每一應檢人應完成其中一題測試 三 測試時所使用之檢定用資料 ~5 資料, 其內容與所寄給應檢人之檢定用資料內容相同 四 術科測試時間每場為 7 小時 ( 含報到 進場 測試 評分 ) 五 試題抽題規定 : ( 一 ) 由監評人員主持公開抽題 ( 無監評人員親自在場主持抽題時, 該場次之測試無效 ), 術科測試現場應準備電腦及印表機相關設備各一套, 術科辦理單位依時間配當表辦理抽題, 場地試務人員並將電腦設置到抽題操作介面, 會同監評人員 應檢人, 全程參與抽題, 處理電腦操作及列印簽名事項 應檢人依抽題結果進行測試, 遲到者或缺席者不得有異議 ( 二 ) 每場測試所有試題均應全部使用, 測試當日於測試前由術科測試編號最小者為代表, 抽出其中一崗位號碼入座測驗, 其餘應檢人則依術科測試編號 ( 含遲到及缺考 ) 接續對應崗位號碼循環類推使用進行測試 例如 : 術科測試編號代表 ( 假設為第 2 號 ) 之應檢人抽中崗位號碼 7, 則第 2 號應檢人入座崗位號碼為 7, 第 3 號應檢人入座崗位號碼為 8, 第 4 號應檢人入座崗位號碼為 9, 其餘依此類推 六 檢定進行中提出評分要求者, 其評分順序依舉手先後順序評定之 ; 檢定時間結束後, 其評分順序依崗位順序評定之 5 ( 此為草案, 請以公告版本為主 )

8 伍 網頁設計乙級技術士技能檢定術科測試檢定場地設備規格表 本表為每一工作崗位之配備, 由術科辦理單位填妥後, 寄給應檢人參考 項目名稱規格 1 主機 CPU: Intel AMD 規格 : RAM: GB 2 顯示器 CRT LCD/LED 吋 3 硬碟 GB 4 光碟機 DVD 5 作業系統及 應用軟體名稱 a. 作業系統 : 1.Windows 7 2.Windows 8 3. 其他 ( 名稱 : ) b. 網頁製作軟體 : 1. Dreamweaver 2. Namo 3. SharePoint 4. 其他 ( 名稱 : ) 版本 : ( 必填 ) c. 繪圖軟體 : 1.PhotoImpact 2.Photoshop 3. 其他 ( 名稱 : ) 版本 : ( 必填 ) d. 防毒軟體 : 1.Trend PC-cillin 2. Avira Antivirus 3. 其他 ( 名稱 : ) 版本 : 1. 注音 2. 新注音 3. 倉頡 4. 新倉頡 5. 嘸蝦米 6 中文輸入法 6. 自然 7. 大易 8. 速成 9. 行列 10. 大新倉頡 11. 其他 ( 名稱 :,, ) 7 其他 術科辦理單位名稱及戳章 : 6 ( 此為草案, 請以公告版本為主 )

9 陸 網頁設計乙級技術士技能檢定術科測試評審表 檢定日期年月日檢定崗位編號試題編號 准考證編號 軟體名稱 與版本 網站伺服器 : 名稱 資料庫 : 名稱 應檢人姓名 版本 版本 項目評審標準 總分 ( 監評填寫 ) 總評結果 ( 監評填寫 ) 一 有下列任一情形者以不及格論 備註 重大缺點 1. 自動棄權者或未依規定將結果備份 2. 攜帶非法軟體 磁片 燒錄光碟 隨身碟 ( 含硬碟 ) 等進入考場者 3. 攜帶本試題規定外之任何參考書籍 資料等進場 4. 具舞弊行為或其他重大錯誤, 經監評人員在評審表內登記有具體事實, 並經監評長認定者 及格 不及格 二 試題要求扣分 : 以下各小項採扣分方式依應檢人實作狀況予以評分 以 100 分為滿分,0 分為最低分,60 分 ( 含 ) 以上者為 [ 及格 ] 劃記以 正 字累計 動作要求扣分項目註記扣分細項 30 分 20 分 10 分 * 5 分 1 分 ( 一 ) ( 二 ) ( 三 ) ( 四 ) ( 五 ) ( 六 ) ( 七 ) ( 八 ) ( 九 ) ( 十 ) ( 十一 ) ( 十二 ) ( 十三 ) ( 十四 ) ( 十五 ) ( 十六 ) ( 十七 ) 小計扣分 三 情意部份扣分 : 1. 應檢人員未能遵守測試場內外秩序者 2. 應檢人員未能於測試完畢後整理工作崗位者 違反上述每項扣 20 分, 實扣分 合計 ( 二 試題要求扣分 + 三 情意部份扣分 ) 監評人員簽名 ( 勿於測試結束前先行簽名 ) 監評長簽名 ( 勿於測試結束前先行簽名 ) 7 ( 此為草案, 請以公告版本為主 )

10 柒 術科測試時間配當表 每一檢定場, 每日排定測試場次一場 ; 程序表如下 : 時間內容備註 07:30 08:00 08:00 08:20 08:20 12:20 12:20 12:30 12:30 13:30 13:30 15:30 15:30 16:00 1. 監評前協調會議 ( 含監評檢查機具設備及材料 ) 2. 應檢人報到完成 1. 應檢人抽題及工作崗位 2. 場地設備及供料 自備機具及材料等作業說明 3. 測試應注意事項說明 4. 應檢人試題疑義說明 5. 應檢人檢查機具設備及材料 6. 其他事項 術科測試 1. 測試時間 240 分鐘 ( 未含備份時間 ) 2. 含安裝應用軟體及測試 測試結果備份應檢人員休息用膳 監評人員進行評分 1. 檢討會 2. 檢定場地復原 (1) 監評前協調會議 (2) 應檢人報到 簽名完成 (3) 場地設備作業說明 (4) 測試應注意事項說明 (5) 試題疑義說明 (6) 監評人員檢查機具設備及材料 (7) 其他事項 (1) 核對應檢人相關證件 (2) 每場測試所有試題均應全部使用, 測試當日於測試前由術科測試編號最小者為代表, 抽出其中一崗位號碼入座測驗, 其餘應檢人則依術科測試編號 ( 含遲到及缺考 ) 接續對應崗位號碼循環類推使用進行測試 (3) 抽題紀錄表 上簽名確認 (4) 核發應檢人自備之軟體 (5) 填寫評審表 (6) 說明應檢人須知及試場注意事項 (7) 提示操作機具設備時應注意事項 (8) 檢查電腦設備及術科測試用檔案 繳交術科測試評審表 發放隨身碟, 並進行備份未完成評分之應檢人, 應於監評長宣布時間內回到指定場地待命配合評分 監評人員評閱應檢人所製作之結果 監評人員及術科測試辦理單位視需要召開檢討會 8 ( 此為草案, 請以公告版本為主 )

11 捌 網頁設計乙級技術士技能檢定術科測試試題名稱及編號 名稱 試題編號 卓越科技大學校園資訊系統 網站 健康促進網社群平台 網站 ABC 影城 網站 精品電子商務 網站 個人數位助理 網站 ( 此為草案, 請以公告版本為主 )

12 玖 網頁設計乙級技術士技能檢定術科測試檢定試題試題編號 : 主題 : 卓越科技大學校園資訊系統 網站測試時間 :240 分鐘所需檔案 : 資料檔名稱 文書檔 圖形及動畫檔 檔案名稱 01A01.txt( 最新消息 ) 01A02.txt( 動態文字廣告 ) 01A03.txt ~01A05.txt( 主選單 ) 01B01.jpg ~01B04.jpg( 標題圖片 ) 01C01.swf ~ 01C 04.swf( 動畫 ) 01C05.gif~01C06.gif( 動畫圖片 ) 01D01.jpg ~ 01D 10.jpg( 校園映像 ) 01E01.jpg~01E02.jpg( 上 下小圖示 ) 試題說明 : 一 本試題為 卓越科技大學校園資訊系統 網站設計, 試題將會針對應檢人所需要製作的功能進行詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用, 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 10 ( 此為草案, 請以公告版本為主 )

13 八 動作要求 : ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : ( )1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) ( )2. 整體網站版面尺寸以 pixels 設計, 上下左右各留 10 pixels 空白, 水平置中 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( 二 ) 卓越科技大學校園資訊系統 網站版型建置本網站共需四種版型頁面, 包括網站首頁版型 更多內容或詳細資料顯示區頁面版型 管理登入區頁面版型及後台管理頁面版型, 其內容如下 : 1. 建置網站首頁版型 ( 如圖 1 及圖 2) 本版型由網站標題區 主選單區 進站總人數 動態文字廣告區 動畫圖片輪播區 最新消息區 管理登入按鈕 校園映像區及頁尾版權區所組成 網站標題區 主選單區主選單主選單主選單次選單次選單主選單次選單主選單進站總人數 : 動態文字廣告區動畫圖片輪播區最新消息區 More 頁尾版權區 管理登入校園映像區校園景觀 2 校園景觀 3 校園景觀 4 圖 1 網站首頁版型示意圖 11 ( 此為草案, 請以公告版本為主 )

14 圖 2 網站首頁之完成參考圖 2. 建置更多內容或詳細資料顯示區頁面版型 ( 如圖 3 及圖 4) 本版型由網站標題區 主選單區 進站總人數 動態文字廣告區 更多內容 ( 詳細資料 ) 顯示區 管理登入按鈕 校園映像區及頁尾版權區所組成 網站標題區 主選單主選單主選單主選單主選單 動態文字廣告區 更多內容 ( 詳細資料 ) 顯示區 管理登入校園映像區校園景觀 2 校園景觀 3 校園景觀 4 進站總人數 : 頁尾版權區 12 ( 此為草案, 請以公告版本為主 )

15 圖 3 更多內容或詳細資料顯示區頁面版型示意圖 圖 4 更多內容或詳細資料顯示區頁面之完成參考圖 3. 建置登入區頁面版型 ( 如圖 5 及圖 6) 本版型由網站標題區 主選單區 進站總人數 動態文字廣告區 管理登入區 管理登入按鈕 校園映像區及頁尾版權區所組成 13 ( 此為草案, 請以公告版本為主 )

16 網站標題區 主選單主選單主選單主選單主選單 動態文字廣告區 管理登入區 管理登入校園映像區校園景觀 2 校園景觀 3 校園景觀 4 進站總人數 : 頁尾版權區 圖 5 管理登入區頁面版型示意圖 圖 6 管理登入區頁面之完成參考圖 4. 建置後台管理頁面版型 ( 如圖 7 及圖 8) 本版型由網站後台管理標題區 後台管理選單區 進站總人數 後台管理標 14 ( 此為草案, 請以公告版本為主 )

17 示 管理登出按鈕 後台管理設定區及頁尾版權區所組成 後台管理標題區 後台管理選單區後台主選單後台主選單後台主選單後台主選單後台主選單 後台管理標示 後台管理設定區 管理登出按鈕 進站總人數 : 頁尾版權區 圖 7 管理登入區頁面版型示意圖 圖 8 後台管理頁面之完成參考圖 15 ( 此為草案, 請以公告版本為主 )

18 ( 三 ) 建置網站標題區 ( 如圖 9~11) 透過後台管理頁面之網站標題管理功能 ( 參見右圖 ) 設定網站標題區的圖片及替代文字, 並顯示於網站標題區內, 其功能包括 : (*)1. 透過後台管理, 可新增及上傳網站標題區圖片, 同時需顯示欲上傳圖片之縮圖 ( 像素 ) 於網站標題管理區中 (*)2. 透過後台管理, 可選擇欲顯示網站標題區所使用的圖片 (*)3. 網站標題區內顯示由後台管理程式所設定之網站標題區圖片及替代文字 (*)4. 透過後台管理, 可刪除已上傳的網站標題區圖片 (*)5. 透過後台管理, 可更新已上傳的網站標題區圖片 (*)6. 透過後台管理, 可設定及修改網站標題區圖片之替代文字 圖 9 網站標題區圖片編修功能頁面 圖 10 新增及上傳網站標題區圖片頁面 圖 11 網站標題區頁面 16 ( 此為草案, 請以公告版本為主 )

19 ( 四 ) 建置動態文字廣告區 ( 如圖 12 及圖 13) 透過後台管理頁面之動態文字廣告管理功能 ( 參見右圖 ) 設定動態文字廣告區的動態廣告文字, 並顯示於動態文字廣告區內, 其功能包括 : (*)1. 透過後台管理, 可新增廣告文字 (*)2. 透過後台管理, 可設定動態文字廣告區所顯示的廣告文字內容 (*)3. 動態文字廣告區內顯示由後台管理程式所設定多則之動態廣告文字 (*)4. 透過後台管理, 可修改廣告文字 (*)5. 透過後台管理, 可刪除廣告文字 圖 12 動態廣告文字後台管理頁面 圖 13 新增動態文字廣告頁面 ( 五 ) 建置動畫圖片輪播區 ( 如圖 14 及圖 15): 透過後台管理頁面之動畫影片及圖片管理功能 ( 參見右圖 ) 設定動畫圖片輪播區的動畫圖片, 並顯示於動畫圖片輪播區內, 其功能包括 : (*)1. 透過後台管理, 可新增上傳動畫圖片 上傳之圖片製作縮圖 像素供後台管理區顯示使用 (*)2. 透過後台管理, 可設定動畫圖片輪播區所使用的動畫圖片 (*)3. 動畫圖片輪播區內顯示由後台管理所設定之動畫圖片 17 ( 此為草案, 請以公告版本為主 )

20 (*)4. 透過後台管理, 可更新已上傳的動畫圖片 (*)5. 透過後台管理, 可刪除已上傳的動畫圖片 圖 14 動畫圖片後台管理頁面 圖 15 新增動畫圖片輪播圖片頁面 ( 六 ) 建置校園映像區 ( 如圖 16~18): 透過後台管理頁面之校園映像資料管理功能 ( 參見右圖 ) 設定校園映像區的校園景觀圖片, 並顯示於校園映像區內, 其功能包括 : (*)1. 透過後台管理, 可新增上傳校園景觀圖片 上傳之圖片製作兩張縮圖, 前台顯示用 像素, 後台管理顯示用 像素 (*)2. 透過後台管理, 可設定校園映像區所使用的圖片 (*)3. 校園映像區內顯示的校園景觀圖片 若超過 3 張則可以利用及來控制顯示圖片 (*)4. 透過後台管理, 可更新已上傳的校園映像區圖片 (*)5. 透過後台管理, 可刪除已上傳的校園映像區圖片 (*)6. 透過後台管理, 可上傳圖片超過 3 張時, 能分頁顯示 (*)7. 分頁顯示中, < 為前一頁, > 為下一頁, 現行頁的頁碼放大顯示 18 ( 此為草案, 請以公告版本為主 )

21 圖 16 校園映像區頁面 圖 17 校園映像圖片後台管理頁面 圖 18 新增校園景觀圖片頁面 19 ( 此為草案, 請以公告版本為主 )

22 ( 七 ) 建置進站總人數區 ( 如圖 19 及圖 20): 透過後台管理頁面之進站總人數管理功能 ( 參見右圖 ) 設定維護進站總人數計數器內容, 並顯示於進站總人數區內, 其功能包括 : (*)1. 進站總人數區顯示目前瀏覽網頁的累積總人數 (*)2. 更新頁面時, 進站總人數不增加 (*)3. 關閉原來頁面, 重開新頁面時進站總人數才增加 (*)4. 透過後台管理, 可修改進站總人數 圖 19 進站總人數頁面之完成參考圖 圖 20 進站總人數後台管理頁面 ( 八 ) 建置頁尾版權區 ( 如圖 21 及圖 22): 透過後台管理頁面之頁尾版權資料管理功能 ( 參見右圖 ) 設定維護版權內容, 並顯示於頁尾版權區, 其功能包括 : (*)1. 頁尾版權區顯示由後台管理所設定的版權內容 (*)2. 透過後台管理, 可修改版權區內容 圖 21 頁尾版權區頁面 20 ( 此為草案, 請以公告版本為主 )

23 圖 22 頁尾版權內容後台管理頁面 ( 九 ) 建置最新消息區 ( 如圖 23~28): 透過後台管理頁面之最新消息資料管理功能 ( 參見右圖 ) 設定維護最新消息, 並顯示於更多內容 ( 詳細資料 ) 顯示區, 其功能包括 : (*)1. 透過後台管理, 可新增最新消息 (*)2. 透過後台管理, 可修改最新消息 (*)3. 透過後台管理, 可設定最新消息區所顯示的最新消息內容 (*)4. 在最新消息區內顯示由後台管理程式所設定之 5 則最新消息 (*)5. 滑鼠移至各條最新消息時, 以彈出視窗方式顯示最新消息詳細內容 (*)6. 最新消息超過 5 則時, 在本區上方標題列靠右顯示 More 超連結文字 (*)7. 點選本區上方標題列靠右顯示的 More 超連結文字時, 進入更多最新消息顯示 (*)8. 進入更多最新消息顯示時, 以每頁 5 筆, 設計分頁顯示功能 (*)9. 分頁顯示中, < 為前一頁, > 為下一頁, 現行頁的頁碼放大顯示 (*)10. 透過後台管理, 可刪除最新消息 圖 23 最新消息區頁面之完成參考圖 21 ( 此為草案, 請以公告版本為主 )

24 圖 24 滑鼠移至最新消息上方時頁面 圖 25 更多最新消息顯示區頁面 圖 26 滑鼠移至更多最新消息上方時頁面 圖 27 最新消息後台管理頁面 圖 28 新增最新消息頁面 22 ( 此為草案, 請以公告版本為主 )

25 ( 十 ) 建置管理登入按鈕功能 ( 如圖 29~31): 欲進入後台管理頁面進行管理, 需先通過身分確認並登入, 其功能包括 : (*)1. 點選 管理登入 按鈕後, 顯示管理登入頁面 (*)2. 輸入帳號 (admin) 及密碼 (admin1234) 並點選 送出 按鈕, 若正確, 則進入後台管理頁面, 且預設於網站標題管理 ; 若不正確, 則顯示 帳號或密碼輸入錯誤 訊息, 再點選 確定 按鈕將返回管理登入頁面, 同時清除帳號及密碼資料 預設管理者帳號為 admin 及密碼為 admin1234 (*)3. 點選 清除 按鈕, 將清空帳號及密碼資料 (*)4. 點選 管理登出 按鈕, 返回管理登入頁面 圖 29 點選 管理登入 按鈕並顯示管理登入區 圖 30 帳號或密碼輸入不正確之提示頁面 23 ( 此為草案, 請以公告版本為主 )

26 圖 31 管理帳號登入成功之完成參考圖 ( 預設於網站標題管理 ) ( 十一 ) 建置管理者帳號管理功能 ( 如圖 32 及圖 33): 透過後台管理頁面之管理者帳號管理功能 ( 參見右圖 ), 設定維護管理者帳號及密碼, 其功能包括 : (*)1. 透過後台管理, 可新增管理者帳號及密碼 (*)2. 透過後台管理, 可修改管理者帳號及密碼 (*)3. 透過後台管理, 可刪除管理者帳號及密碼 圖 32 管理者帳號管理之完成參考圖 24 ( 此為草案, 請以公告版本為主 )

27 圖 33 新增管理者帳號頁面 ( 十二 ) 建置選單管理功能 ( 如圖 34 及圖 35): 透過後台管理頁面之選單管理功能 ( 參見右圖 ), 設定維護主選單及次選單, 其功能包括 : (*)1. 透過後台管理, 可新增主選單 (*)2. 透過後台管理, 可修改主選單 (*)3. 透過後台管理, 可新增次選單 (*)4. 透過後台管理, 可修改次選單 (*)5. 主選單區內顯示由後台管理程式所設定之主選單及次選單 (*)6. 透過後台管理, 可刪除主選單 (*)7. 透過後台管理, 可刪除次選單 圖 34 主選單新增 修改及刪除頁面 25 ( 此為草案, 請以公告版本為主 )

28 圖 35 次選單新增 修改及刪除頁面 ( 十三 ) 資料備份 : 評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺失, 以不及格論 備份內容如下 : 1. 使用 PHP 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 環境設定檔 : A. xampp\apache\conf\extra\httpd.conf B. xampp\apache\conf\extra\httpd-ssl.conf C. xampp\apache\conf\extra\httpd-xampp.conf D. xampp\php\php.ini E. xampp\phpmyadmin\config.inc.php F. xampp\mysql\bin\my.ini (3) 資料庫 : 預設資料庫資料夾 ( 目錄 ), 例如 :xampp\mysql (4) 其它相關資料 : 如應檢人自行進行額外設定之資料 2. 使用 ASP.NET 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 資料庫 : 預設資料庫資料夾 ( 目錄 ) 之資料庫檔, 例如 :dbxx.mdf (3) 其它相關資料 : 如應檢人自行進行額外設定之資料 3. 其它備份 : 請自行依主文件目錄 環境設定檔 資料庫及其它相關資料進行備份, 其事後須能還原正常運作 ; 若無法還原正常運作, 則應檢人須自行承擔風險 26 ( 此為草案, 請以公告版本為主 )

29 試題編號 : 主題 : 健康促進網社群平台 網站測試時間 :240 分鐘所需檔案 : 資料檔名稱 文書檔 圖形檔 檔案名稱 02A01.txt( 主選單項目 ) 02A02.txt( 頁籤項目 ) 02A03.txt( 健康新知 ) 02A04.txt( 菸害防治 ) 02A05.txt( 癌症防治 ) 02A06.txt( 慢性病防治 ) 02A07.txt( 問卷調查題目 ) 02A08.txt( 測試用帳號 ) 02B01.jpg( 標題圖片 ) 02B02.jpg(QR Code 圖片 ) 02B03.jpg( 圖示 - 讚 ) 02B04.png( 背景圖 ) 試題說明 : 一 本試題為 健康促進網社群平台 網站設計, 試題將會針對應檢人所需要製作的動作功能詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用, 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 八 動作要求 : ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : ( )1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 27 ( 此為草案, 請以公告版本為主 )

30 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) ( )2. 整體網站版面尺寸以 pixels 設計, 上下左右各留 10 pixels 空白, 水平置中對齊 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( 二 ) 建置 健康促進網社群平台 網站版型 ( 如圖 1 及圖 2) 本網站版型由網站標題區 主選單區 動態文字廣告區 會員登入 主題內容顯示區及頁尾版權區所組成 網站標題區 主選單區 選單項目一選單項目二選單項目三選單項目四選單項目五 動態文字廣告區 主題內容顯示區 會員登入 頁尾版權區 圖 1 網站版型示意圖 28 ( 此為草案, 請以公告版本為主 )

31 圖 2 健康促進網社群平台 網站之完成參考圖 ( 三 ) 建置網站標題區 ( 如圖 3) (*)1. 設定圖片 02B01.jpg 為標題圖片, 替代文字為 健康促進網 - 回首頁 (*)2. 左上方顯示今天日期 今日瀏覽人次 累計瀏覽人次 (*)3. 右上方顯示 回首頁, 點選 回首頁 將返回首頁 (*)4. 當系統日期變更並重新整理後, 今天日期會自動改變 (*)5. 執行瀏覽器 重新整理 功能後, 今日瀏覽人次及累計瀏覽人次不會自動增加 29 ( 此為草案, 請以公告版本為主 )

32 圖 3 網站標題區 ( 四 ) 建置主選單區 ( 如圖 4): (*)1. 建立主選單, 其內容為 分類網誌 最新文章 人氣文章 講座訊息 及 問卷調查 等項目 (*)2. 點選各項目均可以正確連結至該項目的網頁 圖 4 主選單區示意圖 ( 五 ) 建置動態文字廣告區 ( 如圖 5): (*)1. 於動態文字廣告區內置入 請民眾踴躍投稿電子報, 讓電子報成為大家相互交流 分享的園地! 詳見最新文章 之動態廣告文字, 且文字方向由左至右 30 ( 此為草案, 請以公告版本為主 )

33 圖 5 動態文字廣告區示意圖 ( 六 ) 建置會員登入 / 登出區 ( 如圖 6~8): (*)1. 點選 會員登入, 顯示 會員登入 畫面 (*)2. 輸入會員帳號 (test) 及密碼 (5678), 並點選 登入 按鈕 若正確, 則進入主題內容頁面, 且顯示 歡迎,test 登出 ; 若點選 清除 將重置 (Reset) 帳號及密碼以利重新填寫 (*)3. 若輸入不正確之帳號及密碼並點選 登入 按鈕, 則顯示 查無帳號 或 密碼錯誤 訊息, 同時點選 確定 按鈕將返回, 並重置帳號及密碼資料 (*)4. 點選 忘記密碼, 連結至忘記密碼頁面 (*)5. 點選 尚未註冊, 連結至註冊會員頁面 (*)6. 輸入管理者帳號及密碼, 並點選 登入 按鈕 若正確, 則進入後台管理頁面 ; 若不正確, 則同項次 3 預設管理者帳號為 admin 及密碼為 1234 圖 6 會員登入區 31 ( 此為草案, 請以公告版本為主 )

34 圖 7 主題內容頁面 (a) (b) 圖 8 (a) 帳號及 (b) 密碼資料輸入錯誤處理示意圖 ( 七 ) 建置主題內容顯示區 ( 如圖 9): (*)1. 左上方應呈現路徑導覽列 (Navigation Path) 目前位置: 首頁 > 主選單名稱 > 頁籤名稱, 依使用者點選不同連結而自動改變 ; 例如 : 進入頁籤 慢性病防治, 則呈現 目前位置 : 首頁 > 分類網誌 > 慢性病防治 (*)2. 點選主選單 分類網誌 後, 將以頁籤方式呈現, 其頁籤項目參見檔案 02A02.txt (*)3. 點選頁籤後, 則需顯示該頁籤之分類文章, 其內容分別參見檔案 02A03.txt ( 健康新知 ) 02A04.txt ( 菸害防治 ) 02A05.txt ( 癌症防治 ) 02A06.txt ( 慢性病防治 ) 32 ( 此為草案, 請以公告版本為主 )

35 圖 9 主題內容顯示區之示意圖 ( 八 ) 建置頁尾版權區 ( 如圖 10): (*)1. 第一列顯示 本網站建議使用 :IE 9.0 以上版本 1024 x 768 pixels 以上觀賞瀏覽,Copyright 2013 健康促進網社群平台 All Right Reserved, 並置中對齊 ; 第二列顯示 服務信箱 :health@test.labor.gov.tw 及 QR-Code 圖片 02B02.jpg, 並靠右對齊 圖 10 頁尾版權區之示意圖 ( 九 ) 建置忘記密碼頁面 ( 如圖 11): (*)1. 內容應包括提示文字 請輸入信箱以查詢密碼 輸入信箱位址的欄位及 尋找 按鈕 (*)2. 若輸入正確之電子郵件地址, 則顯示 您的密碼為 :xxx, 其中 xxx 表示密碼 ; 若輸入不正確之電子郵件地址, 則顯示 查無此資料 33 ( 此為草案, 請以公告版本為主 )

36 圖 11 忘記密碼畫面之示意圖 ( 十 ) 建置註冊會員頁面 ( 如圖 12): (*)1. 內容應包括提示文字 * 請設定您要註冊的帳號及密碼 ( 最長 12 個字元 ) 帳號及密碼之輸入文字方塊 註冊 按鈕及 清除 按鈕 (*)2. 若輸入正確之資料並點選 註冊 按鈕, 則可完成註冊 ; 若點選 清除 按鈕, 可重置輸入的資料並重新輸入 (*)3. 若輸入不完整或帳號重複之資料並點選 註冊 按鈕, 則會出現 不可空白 或 帳號重複 提示對話框 (a) (b) 圖 12 註冊會員資料 (a) 輸入不完整及 (b) 帳號重複之訊息示意圖 ( 十一 ) 建置最新文章區 ( 如圖 13~15): (*)1. 匯入最新文章之文字檔 02A03.txt~02A06.txt 至資料庫中 (*)2. 顯示由後台管理之最新文章, 若超過 3 則時, 則以分頁方式顯示, 其中 34 ( 此為草案, 請以公告版本為主 )

37 < 為前一頁, > 為下一頁, 現行頁的頁碼須放大顯示 (*)3. 滑鼠點選各則最新文章時, 可顯示最新文章詳細內容 (*)4. 最新文章顯示時, 登入的使用者可以點選 讚 或 收回讚, 以記錄評價次數統計人氣文章 圖 13 最新文章區之示意圖 35 ( 此為草案, 請以公告版本為主 )

38 圖 14 顯示最新文章詳細內容 36 ( 此為草案, 請以公告版本為主 )

39 圖 15 點選 讚 或 收回讚 以記錄最新文章評價次數 ( 十二 ) 建置人氣文章區 ( 如圖 16~18): (*)1. 顯示由後台管理程式所設定之 5 則最高點閱人數之人氣文章 ; 若超過 5 則時, 則以分頁方式顯示, 其中 < 為前一頁, > 為下一頁, 現行頁的頁碼須放大顯示 (*)2. 滑鼠移至各則人氣文章時, 以彈出視窗方式顯示人氣文章詳細內容 (*)3. 人氣文章顯示時, 登入的使用者可以點選 讚 或 收回讚, 以記錄評價次數統計人氣文章 圖 16 人氣文章區之示意圖 37 ( 此為草案, 請以公告版本為主 )

40 圖 17 彈出視窗內顯示人氣文章詳細內容 圖 18 點選 讚 或 收回讚 以記錄人氣文章評價次數 ( 十三 ) 建置問卷調查區 ( 圖 19~22): (*)1. 左上方呈現路徑導覽列 目前位置 : 首頁 > 問卷調查 (*)2. 顯示問卷調查內容, 且呈現 編號 問卷題目 投票總數 結果 及 狀態 等欄位 問卷題目內容參見檔案 02A07.txt (*)3. 點選 結果 可呈現問卷統計結果 (*)4. 會員登入後, 點選 參與投票 可顯示該問卷的詳細內容 (*)5. 點選 我要投票 可參與投票, 並顯示該問卷的統計結果 38 ( 此為草案, 請以公告版本為主 )

41 圖 19 問卷調查區之示意圖 圖 20 問卷調查之統計結果示意圖 圖 21 會員登入後可觀看統計結果與參與投票 39 ( 此為草案, 請以公告版本為主 )

42 圖 22 參與問卷調查投票 ( 十四 ) 建置後台管理選單 ( 圖 23): (*)1. 後台管理選單包括 帳號管理 分類網誌 最新文章管理 講座管理 及 問卷管理 等 5 項目 帳號管理 圖 23 後台管理頁面之示意圖 40 ( 此為草案, 請以公告版本為主 )

43 ( 十五 ) 建置帳號後台管理 ( 圖 24): 透過後台管理頁面之帳號管理功能 ( 參見右圖 ) 進行帳號管理, 其功能包括 : (*)1. 透過後台管理, 可刪除帳號 ; 即核取欲刪除之帳號並點選 確定刪除 按鈕, 可進行帳號刪除 此外, 點選 清空選取 按鈕, 可取消選取項目 (*)2. 輸入 登入帳號 登入密碼 再次確認密碼 信箱 之資料並點選 新增 按鈕, 可新增帳號及密碼至系統中 此外, 點選 清空 按鈕, 可重置已輸入的項目資料 圖 24 帳號之後台管理示意圖 ( 十六 ) 建置最新文章後台管理 ( 圖 25): 透過後台管理頁面之最新文章管理功能 ( 參見右圖 ) 進行最新文章管理, 其功能包括 : (*)1. 建立 4 篇最新文章資料 ; 即分別匯入文字檔 02A03.txt~02A06.txt 於資料庫中, 需包括 標題 及 內容 兩個欄位 (*)2. 核取想要顯示或刪除的文章後, 按下 確定修改 按鈕即可修改最新文章資料至系統資料庫內 41 ( 此為草案, 請以公告版本為主 )

44 圖 25 最新文章之後台管理示意圖 ( 十七 ) 建置問卷後台管理 ( 圖 26~27): 透過後台管理頁面之問卷管理功能 ( 參見右圖 ) 進行問卷管理, 其功能包括 : (*)1. 透過後台管理, 可新增問卷 (*)2. 透過後台管理, 可增加問卷調查選項 ; 即點選 更多 按鈕, 可增加問卷選項 (*)3. 點選清空按鈕, 可清除已輸入之內容 圖 26 問卷調查新增管理之示意圖 圖 27 增加問卷調查選項之示意圖 42 ( 此為草案, 請以公告版本為主 )

45 ( 十八 ) 資料備份 : 評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺失, 以不及格論 備份內容如下 : 1. 使用 PHP 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 環境設定檔 : A. xampp\apache\conf\extra\httpd.conf B. xampp\apache\conf\extra\httpd-ssl.conf C. xampp\apache\conf\extra\httpd-xampp.conf D. xampp\php\php.ini E. xampp\phpmyadmin\config.inc.php F. xampp\mysql\bin\my.ini (3) 資料庫 : 預設資料庫資料夾 ( 目錄 ), 例如 :xampp\mysql (4) 其它相關資料 : 如應檢人自行進行額外設定之資料 2. 使用 ASP.NET 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 資料庫 : 預設資料庫資料夾 ( 目錄 ) 之資料庫檔, 例如 :dbxx.mdf (3) 其它相關資料 : 如應檢人自行進行額外設定之資料 3. 其它備份 : 請自行依主文件目錄 環境設定檔 資料庫及其它相關資料進行備份, 其事後須能還原正常運作 ; 若無法還原正常運作, 則應檢人須自行承擔風險 43 ( 此為草案, 請以公告版本為主 )

46 試題編號 : 主題 : ABC 影城 網站測試時間 :240 分鐘所需檔案 : 資料檔名稱 圖形檔 檔案名稱 03A01.jpg ~ 03A09.jpg( 預告片 ) 03B01.png ~ 03B25.png( 院線片電影海報 ) 03C01.png( 普遍級 ) 03C02.png( 輔導級 ) 03C03.png( 保護級 ) 03C04.png( 限制級 ) 03D01.png( 訂票人物圖片 ) 03D02.png( 訂票座位圖片 ) 03D03.png( 訂票有人坐之座位圖片 ) 03D04.png( 訂票電影院座位 ) 試題說明 : 影片檔 03B01v.avi~03B25v.avi( 院線片影片檔 ) 一 本試題為 ABC 影城 網站設計, 試題將會針對應檢人所需要製作的動作功能詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用, 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 八 動作要求 : ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : ( )1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 44 ( 此為草案, 請以公告版本為主 )

47 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) ( )2. 整體網站版面尺寸以 pixels 設計, 上下左右各留 10 pixels 空白, 水平置中 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( 二 ) ABC 影城 網站版型建置本網站共需三種版型頁面, 包括網站首頁版型 院線片簡介頁面版型及後台管理頁面版型, 其內容如下 : 1. 建置網站首頁版型 ( 如圖 1~2) 本版型由網站標題區 主選單區 ( 首頁 線上訂票 會員系統 管理系統 ) 動態文字廣告區 預告片導覽區 院線片清單區及頁尾版權區所組成 網站標題區 首頁線上訂票會員系統管理系統 動態文字廣告區 預告片導覽區 院線片清單區 頁尾版權區 圖 1 網站首頁版型示意圖 45 ( 此為草案, 請以公告版本為主 )

48 圖 2 網站首頁之完成參考圖 2. 建置院線片簡介頁面版型 ( 如圖 3~4) 本版型由網站標題區 主選單區 ( 首頁 線上訂票 會員系統 管理系統 ) 動態文字廣告區 院線片簡介區及頁尾版權區所組成 網站標題區 首頁線上訂票會員系統管理系統 動態文字廣告區 院線片簡介區 頁尾版權區 圖 3 院線片簡介頁面版型示意圖 46 ( 此為草案, 請以公告版本為主 )

49 圖 4 院線片簡介頁面之完成參考圖 3. 建置後台管理頁面版型 ( 如圖 5~6) 本版型由網站標題區 主選單區 ( 首頁 線上訂票 會員系統 管理系統 ) 動態文字廣告區 管理選單區( 網站標題管理 動態文字管理 預告片海報管理 院線片管理 電影訂票管理 ) 內容管理區及頁尾版權區所組成 網站標題區首頁線上訂票會員系統管理系統動態文字廣告區網站標題管理 動態文字管理 預告片海報管理 院線片管理 電影訂票管理 內容管理區 頁尾版權區 圖 5 後台管理頁面版型示意圖 47 ( 此為草案, 請以公告版本為主 )

50 圖 6 後台管理頁面之完成參考圖 ( 三 ) 建置網站標題區 ( 如圖 7~8) 透過後台管理頁面之網站標題管理功能 ( 參見右圖 ) 設定網站標題區的圖片及替代文字, 並顯示於網站標題區內, 其功能包括 : (*)1. 透過後台管理, 可新增及上傳網站標題區圖片, 並允許多次新增網站標題區圖片 (*)2. 透過後台管理, 可選擇網站標題區所使用圖片的功能 (*)3. 在網站標題區顯示由後台管理程式所設定之網站標題區圖片, 且替代文字預設為 ABC 影城資訊系統 - 回首頁 (*)4. 透過後台管理, 可刪除已上傳的網站標題區圖片 (*)5. 透過後台管理, 可更新已上傳的網站標題區圖片 (*)6. 透過後台管理, 可設定及修改網站標題區圖片替代文字 48 ( 此為草案, 請以公告版本為主 )

51 圖 7 網站標題區之後台編修管理頁面示意圖 圖 8 網站標題區之完成參考圖 ( 四 ) 建置主選單區 ( 如圖 9) (*)1. 設定 線上訂票 超連結, 連結到 線上訂票 頁面 (*)2. 設定 首頁 超連結, 連結到 首頁 頁面 (*)3. 設定 管理系統 超連結, 連結至後台管理之登入頁面, 且以預設管理者帳號及密碼可進入管理頁面 預設管理者帳號為 admin 及密碼為 ( 此為草案, 請以公告版本為主 )

52 圖 9 主選單區之完成參考圖 ( 五 ) 建置動態文字廣告區 ( 如圖 10) (*)1. 於動態文字廣告區內置入 終極網頁設計 HTML PHP ASP.NET~ 之動態廣告文字, 且文字方向由右至左 ( 本項功能可直接以程式撰寫, 無須透過後台管理 ) 圖 10 動態文字廣告區之完成參考圖 ( 六 ) 建置預告片海報導覽區 ( 如圖 11~13) 透過後台管理頁面之預告片海報管理功能 ( 參見右圖 ) 設定預告片海報導覽區的預告片海報, 以預告影城即將放映之影片, 其功能包括 : 50 ( 此為草案, 請以公告版本為主 )

53 (*)1. 製作一個 預告片海報導覽 之動畫, 並嵌入至主頁面中 預告片導覽區 中, 動畫 (Flash 的影片 ) 大小請自行斟酌版面之大小來設計, 以不超出 預告片導覽區 的範圍 (*)2. 動畫會自動切換展示所有後台設定要展示的海報圖檔及名片 ( )3. 動畫中, 海報圖檔採外部載入的方式 ( 素材檔並非直接內嵌於 Flash 元件庫中, 而是由網站伺服器單獨下載圖檔後再載入 ) (*)4. 當 Flash 影片載入任何一張海報圖檔後, 均自動產生一個海報縮圖按鈕, 並置放於影片下方之 按鈕列 中 (*)5. 預告片導覽區於按鈕列中只能置放四個按鈕, 超過時則採用按鈕來顯示隱藏的按鈕 當點選會水平移動出現下一個按鈕 ; 反之點選會水平移動出現上一個按鈕 (*)6. 當訪客點選按鈕列之按鈕時, 能切換相對應預告片海報圖片及名片, 切換時使用轉場效果, 至少須提供淡入 小到大 移出等效果, 並由後台指定採用何種展示效果 (*)7. 透過後台管理, 可新增上傳新的電影海報圖片及名片 (*)8. 透過後台管理, 可刪除已上傳的電影海報圖片及名片 (*)9. 透過後台管理, 可設定已上傳電影海報圖片那些可在 預告片導覽區 播放 (*)10. 透過後台管理, 可設定已上傳電影海報圖片在 預告片導覽區 播放順序 圖 11 預告片導覽區示意圖 51 ( 此為草案, 請以公告版本為主 )

54 圖 12 預告片導覽區之後台編修管理頁面示意圖 圖 13 預告片導覽區之完成參考圖 ( 七 ) 建置院線片清單區 ( 如圖 14~18) 透過後台管理頁面之院線片管理功能 ( 參見右圖 ) 設定院線片清單區的院線片資料, 以介紹上映中影片, 其功能包括 : (*)1. 透過後台管理, 能提供 新增電影 的功能, 其中需包含片名 分級 片長 上映日期 ( 分為年月日 3 個欄位, 其中年為西元年, 月為 1~12 月, 日為 1~31 日 ) 發行商 導演 預告影片 電影海報等資料項目 ( )2. 在 院線片清單區 中, 列出 院線片清單 標題 正在上映的電影清 52 ( 此為草案, 請以公告版本為主 )

55 單 (4 部,2 列 x2 欄 ) 每部影片內容至少包含圖中所列之項目, 包括片名 電影海報 分級 ( 普通級 保護級 輔導級 限制級 ) 上映日期 劇情簡介 按鈕及 線上訂票 按鈕 ( 參見圖 14 及圖 17) (*)3. 點選電影清單中的 電影海報 或 劇情簡介, 即可顯示該影片的 院線片介紹 頁面, 每部影片內容至少包含圖中所列之項目 ( 參見圖 18) (*)4. 在 院線片介紹 頁面中, 按 播放 鍵, 可播放該影片介紹檔 (*)5. 在 院線片介紹 頁面中, 按 線上訂票 按鈕, 可連結到 線上訂票 頁面 (*)6. 透過後台管理, 提供 修改電影資料 的功能 (*)7. 透過後台管理, 提供 刪除電影 的功能 (*)8. 透過後台管理, 可設定那些電影會在 院線片清單區 展示, 不用檢查上映日期是否過期 (*)9. 透過後台管理, 可設定在 院線片清單區 展示電影的順序 圖 14 院線片清單區示意圖 53 ( 此為草案, 請以公告版本為主 )

56 圖 15 院線片清單區之後台編修管理頁面示意圖 (a) (b) 圖 16 院線片清單區之後台新增 編輯電影之 (a) 示意圖及 (b) 完成參考圖 54 ( 此為草案, 請以公告版本為主 )

57 圖 17 院線片清單區之完成參考圖 (a) (b) 圖 18 院線片簡介 之 (a) 示意圖及 (b) 完成參考圖 ( 八 ) 建置線上訂票功能 ( 如圖 19~23) 透過線上訂票功能可逕行於線上完成電影票預約訂購, 同時藉由後台之電影訂票管理功能 ( 參見右圖 ), 可完善地處理電影票訂單管理之事宜, 其功能包括 : (*)1. 線上訂票 頁面應包含 電影 日期 場次 確定 按鈕及 重置 按鈕 (*)2. 電影 欄位, 為下拉式選單, 以前述 ( 七 ) 之院線片清單為基礎, 但是要扣除上映日期超過訂票日 ( 應檢日 ) 的電影 (*)3. 日期 欄位, 為下拉式選單, 能列出已選擇的電影的上映日 ( 含 ) 起共三天 ( 不考慮潤年及潤月 ) ( )4. 場次 欄位, 為下拉式選單, 當選擇 電影 及 日期 後, 能列出 5 個場次時間及各場次剩餘座位數 : a. 場次時間為 2 小時一場, 從 14:00~16:00 16:00~18:00 18:00~20:00 20:00~22:00 22:00~24:00 共 5 個場次 b. 剩餘座位數計算方式為該電影上映的廳的座位數扣除已經訂購的座位數量 (*)5. 點選 確定 後, 即進入 挑選座位 的畫面, 且功能須包含如下 : a. 能呈現 挑選座位 的畫面, 座位的排列為 4 列 x 5 欄, 共 20 個座位 b. 已經賣出的座位, 會顯示 已售出 的文字, 該座位格子並改成有人坐的圖, 且不可以勾選 c. 會顯示已選擇的電影 日期及時刻 55 ( 此為草案, 請以公告版本為主 )

58 d. 當使用者勾選座位的同時, 會即時顯示目前已經勾選幾個座位, 最多只能勾選四個座位, 超過時就無法再勾選了 e. 點選 上一步 時, 則取消勾選資料, 回到 訂票 頁面, 並保留原先選擇的資料, 繼續挑選 f. 點選 訂購 時, 訂購完成, 並出現 電影票訂單 頁面, 顯示訂購的相關資料, 包含電影名稱 日期 場次時間 座位, 以及產生一組訂單編號 g. 訂單編號前 8 碼是電影的日期, 後面 4 碼為流水號 ( 遞增 ) (*)6. 在後台之電影票訂單管理頁面中, 應顯示所有訂購資料, 包含訂單編號 電影名稱 日期 場次時間 訂購數量 訂購位置及 刪除 按鈕, 依照訂購時間列出 (*)7. 在後台之電影票訂單管理頁面的訂購資料列表中, 可使用 刪除 按鈕來刪除該訂單 (*)8. 在後台之電影票訂單管理頁面中, 可使用 快速刪除 的功能, 依所選擇的電影, 來刪除該電影的所有訂單 ( 刪除前須有確認之動作 ) (*)9. 在後台之電影票訂單管理頁面中, 可使用 快速刪除 的功能, 依所指定的日期, 來刪除該日期的所有訂單 ( 刪除前須有確認之動作 ) 圖 19 線上訂票之完成參考圖 56 ( 此為草案, 請以公告版本為主 )

59 (a) (b) 圖 20 線上訂票之 (a) 電影名稱及 (b) 場次呈現示意圖 (a) (b) 圖 21 挑選座位之 (a) 示意圖及 (b) 完成參考圖 圖 22 電影票訂單的畫面 57 ( 此為草案, 請以公告版本為主 )

60 圖 23 電影票訂票之後台管理示意圖 ( 九 ) 資料備份 : 評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺失, 以不及格論 備份內容如下 : 1. 使用 PHP 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 環境設定檔 : A. xampp\apache\conf\extra\httpd.conf B. xampp\apache\conf\extra\httpd-ssl.conf C. xampp\apache\conf\extra\httpd-xampp.conf D. xampp\php\php.ini E. xampp\phpmyadmin\config.inc.php F. xampp\mysql\bin\my.ini (3) 資料庫 : 預設資料庫資料夾 ( 目錄 ), 例如 :xampp\mysql (4) 其它相關資料 : 如應檢人自行進行額外設定之資料 2. 使用 ASP.NET 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 資料庫 : 預設資料庫資料夾 ( 目錄 ) 之資料庫檔, 例如 :dbxx.mdf (3) 其它相關資料 : 如應檢人自行進行額外設定之資料 58 ( 此為草案, 請以公告版本為主 )

61 3. 其它備份 : 請自行依主文件目錄 環境設定檔 資料庫及其它相關資料進行備份, 其事後須能還原正常運作 ; 若無法還原正常運作, 則應檢人須自行承擔風險 59 ( 此為草案, 請以公告版本為主 )

62 試題編號 : 主題 : 精品電子商務 網站測試時間 :240 分鐘所需檔案 : 資料檔名稱 文書檔 圖形檔 檔案名稱 0401.txt( 商品分類 ) 0402.txt( 最新消息 ) 0403.txt ~ 0410.txt( 銷售商品詳細說明 ) 0401.jpg( 購物流程 ) 0402.jpg( 我要購買 ) 0403.jpg ~ 0410.jpg( 銷售商品 ) 0411.jpg( 繼續選購商品 ) 0412.jpg( 進入結帳櫃台 ) 0413.jpg( 按此註冊 ) 0414.jpg( 登入按鈕 ) 0415.jpg( 刪除按鈕 ) 0416.jpg( 公司 LOGO) 0417.jpg( 後台管理中心 ) 試題說明 : 一 本試題為 精品電子商務 網站設計, 試題將會針對應檢人所需要製作的動作進行詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用, 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 八 動作要求 : ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : 60 ( 此為草案, 請以公告版本為主 )

63 ( )1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) ( )2. 整體網站版面尺寸以 pixels 設計, 上下左右各留 10 pixels 空白, 水平置中 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( 二 ) 精品電子商務 網站版型建置( 如圖 1~4) 本網站共需兩種版型頁面, 包括網站首頁版型及後台管理頁面版型, 其內容如下 : ( )1. 建置網站首頁版型網站首頁版型由標題區 商品分類區 進站總人數 最新消息區 商品介紹區及頁尾版權區所組成 標題區 商品分類區 全部商品 大分類 最新消息區 中分類 中分類 中分類中分類大分類大分類 商品介紹區 進站總人數 頁尾版權區 圖 1 網站首頁版型示意圖 61 ( 此為草案, 請以公告版本為主 )

64 圖 2 網站首頁完成參考圖 ( )2. 建置後台管理頁面版型後台管理頁面版型由標題區 管理功能選單 起始頁面及頁尾版權區所組成 ; 其中管理功能選單包含 管理權限設置 商品分類與管理 訂單管理 會員管理 頁尾版權區 最新消息管理 及 登出 標題區 管理功能選單 管理權限設置 商品分類與管理 訂單管理 會員管理 起始頁面 頁尾版權區 最新消息管理 登出 頁尾版權區 圖 3 後台管理頁面版型示意圖 62 ( 此為草案, 請以公告版本為主 )

65 圖 4 後台管理頁面完成參考圖 ( 三 ) 建置前台網站首頁標題區 ( 如圖 5) 前台網站首頁標題區應包括 公司 LOGO 與 回首頁 最新消息 購物流程 購物車 會員登入 管理登入 功能選單 (*)1. 公司 LOGO 應使用素材檔 0416.jpg (*)2. 點選 回首頁 應返回網站首頁頁面 ( )3. 點選 最新消息 應顯示最新消息頁面 (*)4. 點選 購物流程 應顯示購物流程說明頁面, 購物流程說明應使用素材檔 0401.jpg (*)5. 點選 購物車 應顯示購物資訊頁面 (*)6. 點選 會員登入 應顯示會員登入頁面 (*)7. 點選 管理登入 應顯示管理人員登入頁面 圖 5 前台網站標題區完成參考圖 ( 四 ) 建置前台商品分類區 ( 如圖 6~7) 前台商品分類項目內容由素材檔 0401.txt 提供, 包含全部商品之大分類 : 流行皮件 流行鞋區 流行飾品 背包與各大分類商品包含之中分類商品 ; 素材檔 0403.txt~0410.txt 則分別提供商品 1~8 之大分類 中分類 簡介 價錢 規格 庫存量與詳細介紹 ( )1. 商品分類區應呈現各分類之商品種類與數量, 分類包含全部商品 流行 63 ( 此為草案, 請以公告版本為主 )

66 皮件 流行鞋區 流行飾品 背包 (*)2. 點選全部商品時, 所有商品應於商品介紹區中呈現, 各商品應包含 圖示 商品名稱 價錢 規格 與 簡介 內容以及 我要購買 按鈕, 我要購買 按鈕應使用素材檔 0402.jpg ( )3. 每頁最多呈現 5 件商品, 若商品數量超過 5 件時, 則提供分頁功能, 即以 1 2 等選項供使用者點選上下頁商品 (*)4. 點選分類商品時, 商品介紹區僅出現該分類商品, 頁面應呈現 圖示 商品名稱 價錢 規格 與 簡介 內容以及 我要購買 按鈕 (*)5. 點選商品介紹區之商品圖片時, 出現該商品之詳細介紹頁面, 應包含 商品名稱 商品縮圖 分類 編號 價錢 詳細說明 庫存量 購買數量 與 我要購買 按鈕 圖 6 商品介紹區內容之完成參考圖 64 ( 此為草案, 請以公告版本為主 )

67 圖 7 商品介紹區詳細介紹畫面完成參考圖 ( 五 ) 建置商品介紹區 ( 如圖 8~11) 透過後台管理頁面之商品分類與管理功能 ( 參見右圖 ) 設定商品分類與商品管理, 結果並顯示於商品介紹區中, 其功能包括 : ( )1. 商品分類 功能應提供 新增大類 與 新增中類 功能, 並可對原分類作 修改 及 刪除 動作 (*)2. 新增大類 功能提供管理者新增商品之大類名稱 (*)3. 新增中類 功能提供管理者新增商品之中類名稱 (*)4. 修改 功能提供修改大類或中類之分類名稱 (*)5. 刪除 功能提供刪除大類或中類之分類名稱 ( )6. 商品管理 功能應提供 新增產品 功能, 並呈現商場中所有商品之編號 商品名稱 庫存量及狀態等內容, 以及 修改 刪除 上架 與 下架 功能 (*)7. 新增產品 功能提供新增商品之詳細內容, 包含所屬大類 所屬中類 商品編號 商品名稱 商品價格 規格 庫存量 商品圖片( 請使用素材檔 0403.jpg ~ 0410.jpg) 及商品介紹 ( )8. 修改 功能提供修改商品之詳細內容, 包含所屬大類 所屬中類 商品編號 商品名稱 商品價格 規格 庫存量 商品圖片及商品介紹 (*)9. 刪除 功能提供刪除該商品 (*)10. 上架 功能提供該商品出現在銷售商品中, 且狀態欄位呈現 販售中 (*)11. 下架 功能提供設定該商品不出現在銷售商品中, 且狀態欄位呈現 已下架 圖 8 產品分類功能之完成參考圖 65 ( 此為草案, 請以公告版本為主 )

68 圖 9 商品管理功能之完成參考圖 圖 10 新增產品功能之完成參考圖 66 ( 此為草案, 請以公告版本為主 )

69 圖 11 修改產品功能之完成參考圖 ( 六 ) 建置最新消息區 ( 如圖 12~13) (*)1. 點選最新消息時, 顯示最新消息之標題 消息內容由素材檔 0402.txt 所提供 (*)2. 點選最新消息之標題時, 應顯示該筆消息之詳細內容 圖 12 點選前台頁面之最新消息時呈現標題之完成參考圖 67 ( 此為草案, 請以公告版本為主 )

70 圖 13 點選最新消息呈現詳細內容之完成參考圖 ( 七 ) 建置購物功能 ( 如圖 14~18) 設定會員註冊 登入與建置購物車之各項功能, 內容包含 : ( )1. 點選商品介紹區 我要購買 按鈕後, 會出現 第一次購物 與 會員登入 選項頁面, 點選 按此註冊 按鈕可進入會員註冊頁面, 按此註冊 按鈕應使用素材檔 0413.jpg (*)2. 會員註冊 頁面應提供 姓名 帳號 密碼 電話 住址 與 電子信箱 等資料, 並提供 檢測帳號 功能由後台檢測該帳號是否已存在 ( )3. 會員註冊成功後, 後台資料庫應自動產生該筆會員資料 ( )4. 會員登入 需輸入會員帳號密碼與驗證碼等資料, 驗證碼由系統亂數產生兩位數字作加法運算, 若正確則進行下一步驟 (*)5. 會員登入成功後, 可在購物車中查看已購買之商品, 購物車應提供 編號 商品名稱 數量 庫存量 單價 小計 資訊與 刪除 按鈕, 並提供 繼續選購商品 與 進入結帳櫃檯 按鈕 (*)6. 點選 繼續選購商品 按鈕後, 可繼續選購其他商品, 繼續選購商品 按鈕應使用素材檔 0411.jpg (*)7. 點選 進入結帳櫃檯 按鈕後, 畫面出現會員資料內容與已訂購之商品資訊, 並提供 確定送出 與 返回修改訂單 按鈕, 進入結帳櫃檯 按鈕應使用素材檔 0412.jpg (*)8. 點選 確定送出 按鈕後, 出現訂購成功訊息, 並將訂購資訊傳送至後台資料庫 (*)9. 點選 返回修改訂單 按鈕後, 則回到購物車的畫面 68 ( 此為草案, 請以公告版本為主 )

71 圖 14 會員登入頁面完成參考圖 圖 15 會員註冊畫面完成參考圖 圖 16 購物車完成參考圖 69 ( 此為草案, 請以公告版本為主 )

72 圖 17 訂購資料填寫及確認頁面 圖 18 訂購成功訊息提示 ( 八 ) 建置訂單管理功能 ( 如圖 19~20) 透過後台管理頁面之訂單管理功能 ( 參見右圖 ) 設定維護訂單資料, 其功能包括 : ( )1. 訂單管理 應呈現資料庫中已建立之訂單, 包含訂單編號 金額 會員帳號 姓名及下單時間, 並提供 刪除 訂單之功能 (*)2. 點選 刪除 可刪除該筆訂單 ( )3. 點選訂單編號後, 可查詢該筆訂單之詳細資料, 包含會員帳號 姓名 電子信箱 聯絡地址與聯絡電話等資料, 並呈現商品名稱 編號 數量 單價 小計及總價 ( )4. 訂單編號是當購物車確定送出後產生, 共計 14 位數字, 前 8 位是該筆訂單產生之日期 (yyyymmdd), 後 6 位由應檢人自訂 70 ( 此為草案, 請以公告版本為主 )

73 圖 19 訂單管理頁面完成參考圖 圖 20 商品查詢結果頁面完成參考圖 ( 九 ) 建置會員管理功能 ( 如圖 21~22) 透過後台管理頁面之會員管理功能 ( 參見右圖 ) 設定維護會員資料, 其功能包括 : ( )1. 會員管理 應呈現資料庫中之會員資料, 包括姓名 會員帳號 註冊日期等資料, 並提供 修改 與 刪除 會員資料之功能 (*)2. 點選 修改 可編輯會員資料, 包括姓名 電子信箱 地址及電話等資料 (*)3. 點選 刪除 可刪除該會員資料 71 ( 此為草案, 請以公告版本為主 )

74 圖 21 會員管理頁面完成參考圖 圖 22 編修會員資料頁面完成參考圖 ( 十 ) 建置管理登入功能 ( 如圖 23~27) 點選前台首頁網站標題區 管理登入 可開啟管理登入頁面, 其功能包括 : ( )1. 輸入帳號 (admin) 密碼(admin1234) 及驗證碼, 驗證碼由系統亂數產生兩位數字作加法運算, 若正確則進行下一步驟, 若資料不正確則顯示 對不起, 您輸入的帳號或密碼或驗證碼有誤請您重新登入 訊息 (*)2. 若輸入之帳號 密碼與驗證碼正確, 則進入後台管理頁面 (*)3. 後台管理頁面預設為管理權限設置頁面, 內容呈現目前已存在之管理者帳號資料, 並提供 新增管理員 功能, 以及對現有之帳號作 修改 刪除 動作 (*)4. 新增管理員 可新增管理帳號 密碼與指定管理權限, 管理權限包含 商品分類與管理 訂單管理 會員管理 頁尾版權區管理 及 最新消息管理 (*)5. 點選 修改 可修改管理員之帳號及密碼, 並重設該管理帳號之管理權限 (*)6. 點選 刪除 可刪除該管理員帳號, 但帳號 admin 不允許修改與刪 72 ( 此為草案, 請以公告版本為主 )

75 除 圖 23 管理登入頁面完成參考圖 圖 24 登入資料錯誤之訊息提示框完成參考圖 圖 25 後台管理頁面完成參考圖 73 ( 此為草案, 請以公告版本為主 )

76 圖 26 新增管理帳號頁面完成參考圖 圖 27 修改管理員權限頁面完成參考圖 ( 十一 ) 建置頁尾版權區 ( 如圖 28~29) 透過後台管理頁面之頁尾版權區管理功能 ( 參見右圖 ) 設定維護頁尾版權區, 其功能包括 : ( )1. 頁尾版權區提供 編輯 及 重置 功能 (*)2. 管理人員可編修原頁尾宣告內容 (*)3. 點選 編輯 按鈕後, 頁尾版權區內容應修改成該筆內容, 且前台頁尾版權區內容應同步更新 (*)4. 點選 重置 按鈕後清除輸入欄位之所有內容 74 ( 此為草案, 請以公告版本為主 )

77 圖 28 頁尾版權區管理功能完成參考圖 圖 29 前台頁尾版權區頁面 ( 十二 ) 資料備份評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺失, 以不及格論 備份內容如下 : 1. 使用 PHP 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 環境設定檔 : A. xampp\apache\conf\extra\httpd.conf B. xampp\apache\conf\extra\httpd-ssl.conf C. xampp\apache\conf\extra\httpd-xampp.conf D. xampp\php\php.ini E. xampp\phpmyadmin\config.inc.php F. xampp\mysql\bin\my.ini (3) 資料庫 : 預設資料庫資料夾 ( 目錄 ), 例如 :xampp\mysql (4) 其它相關資料 : 如應檢人自行進行額外設定之資料 2. 使用 ASP.NET 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 資料庫 : 預設資料庫資料夾 ( 目錄 ) 之資料庫檔, 例如 :dbxx.mdf (3) 其它相關資料 : 如應檢人自行進行額外設定之資料 3. 其它備份 : 請自行依主文件目錄 環境設定檔 資料庫及其它相關資料進行備份, 其事後須能還原正常運作 ; 若無法還原正常運作, 則應檢人須自行承擔風險 75 ( 此為草案, 請以公告版本為主 )

78 試題編號 : 主題 : 個人數位助理 網站測試時間 :240 分鐘所需檔案 : 資料檔名稱 檔案名稱 文書檔 0500.txt( 預設會員資料 ) 0500T.jpg( 預設桌面圖 ) 0501T.jpg ~ 0516T.jpg( 預設會員 01~16 桌面圖 ) 圖形檔 0501A.jpg ~ 0516A.jpg( 預設會員 01~16 肖像圖 ) 0501B.jpg ~ 0516B.jpg( 預設會員 01~16 標題暨功能選項區背景圖 ) speaker.gif( 聲音控制 ) 0500M.mid( 預設背景音樂 ) 音樂檔 0501M.mid ~ 0516M.mid( 預設會員 01~16 背景音樂 ) 試題說明 : 一 本試題為 個人數位助理 網站設計, 試題將會針對應檢人所需要製作的功能進行詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用, 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 八 動作要求 : 76 ( 此為草案, 請以公告版本為主 )

79 ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : ( )1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) ( )2. 整體網站版面尺寸以 pixels(326 ppi) 設計, 上 下 左 右邊界均為 0 pixel, 垂直及水平均置中對齊, 用以模擬智慧型行動裝置螢幕 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( )4. 應檢人需自行匯入或註冊會員所對應之檔案資料, 以便進行測試 ( 二 ) 個人數位助理 網站版型建置( 如圖 1 及圖 2) 本版型由標題暨功能選項區及內容顯示區所組成 640 pixels 標題暨功能選項區 4 吋顯示器 ( 對角 內容顯示區 線 ) 1136 pixels 1136 x 640 pixels 解析度 326 p 圖 1 頁面版型示意圖 77 ( 此為草案, 請以公告版本為主 )

80 書曼 Suman 斐凌 Feiling Urooj Mehmod Paige Albert 圖 2 頁面之完成參考圖 ( 三 ) 建置網站首頁 ( 如圖 2 及圖 3) ( )1. 瀏覽器標題為 個人數位助理, 預設桌面圖 0500T.jpg 背景聲音 0500M.mid ( )2. 標題暨功能選項區, 由左而右依序羅列喇叭圖示 speaker.gif 最新訊息 活動報名 尋找會員 註冊 登入 等功能選項 非作用中之按鈕文字顏色為藍色 (#0000FF), 作用中則變為紅色 (#FF0000) ( )3. 內容顯示區, 由左而右 由上而下依序羅列會員肖像照片及暱稱 ( 預設顯示全部會員 ), 並以 2 列 2 欄呈現 當會員人數超過 4 人時, 在置中靠下位置以分頁方式顯示, 表前一頁 表下一頁, 且現行頁的頁碼須放大顯示 ( )4. 點選喇叭圖示 speaker.gif 可控制聲音 off 及 三段音量 ( )5. 尋找會員 功能, 可藉由輸入關鍵字來搜尋姓名及暱稱欄位, 尋找含有關鍵字之會員 若無相關會員, 則彈跳出訊息對話框顯示 無此會員, 點選 確定 後應回到首頁 ; 若有相關會員, 則在內容顯示區列出符合條件的會員, 且顯示方式參照上述第 3 點所述 ( )6. 點選 註冊 連結到資料維護頁面 ( 參見動作要求 ( 四 )) ( )7. 點選 登入 連結到登入頁面 ( 參見動作要求 ( 五 )) 78 ( 此為草案, 請以公告版本為主 )

81 圖 3 搜尋結果無此會員示意圖 ( 四 ) 建置資料維護頁面 ( 如圖 4~6): (*)1. 標題暨功能選項區顯示會員肖像圖片及上傳檔案 若會員未上傳照片時, 於左側顯示歡迎詞 上傳照片 Hi, 您好! 歡迎加入成為會員, 請留下聯絡資料 ; 若會員上傳照片後即顯示會員肖像圖片 (*)2. 內容顯示區, 建置姓名 性別 出生日期 學歷 行動電話 電子郵件 暱稱 設定帳號 設定密碼 ( 含 再輸入一次 ) 等資料欄位, 公開 / 限會員 / 隱藏 選項按鈕, 送出 重寫按鈕 (*)3. 點選 重寫, 上述各欄位之資料回到預設狀態 (Reset) (*)4. 點選 送出, 須對姓名 暱稱 設定帳號及設定密碼等欄位資料檢核, 其中帳號必須唯一不可重複, 姓名 暱稱及密碼不可空白 若有未設定或錯誤需更正, 將該欄位名稱以紅色文字呈現, 相對應之帳號輸入欄位顯示 帳號已有人使用, 姓名 暱稱及密碼等輸入欄位顯示 檢核錯誤重新輸入 ; 若完全正確無誤, 則將填寫結果呈現出來, 並回應訊息框 註冊完成歡迎加入, 點選 確定 回到首頁 上傳照片 Hi, 您好! 歡迎加入成為會員, 請留下聯絡資料 姓名 : 性別 : 出生日期 : 學歷 : 行動電話 : 電子郵件 : 暱稱 : 設定帳號 : 設定密碼 : 再輸入一次 : 圖 4 註冊加為會員頁面之完成參考圖 79 ( 此為草案, 請以公告版本為主 )

82 姓名 : 性別 : 出生日期 : 學歷 : 行動電話 : 電子郵件 : 暱稱 : 設定帳號 : 設定密碼 : 再輸入一次 : 圖 5 註冊加為會員頁面之資料建置參考圖 圖 6 會員完成註冊之提示訊息 ( 五 ) 建置會員登入頁面 ( 如圖 7~9) (*)1. 內容顯示區建置帳號 密碼及 4 碼 ( 由數字及大寫英文字母組成 ) 識別碼等欄位 ; 識別碼若無法辨識可點選 更換, 重新產生新的識別碼 (*)2. 帳號 密碼及識別碼輸入後並點選 送出, 若資料正確, 則直接進入會員登入成功畫面 ; 若資料不正確, 則出現錯誤訊息框, 顯示 無此會員 / 密碼錯誤 / 識別碼錯誤, 點選 確定 後應回到會員登入頁面要求重新輸入 ( )3. 登入後, 內容顯示區之上方顯示登入者肖像照片 暱稱 喇叭圖示 speaker.gif 尋找會員 登出 線上聊天 好友管理 資料維護 等內容及功能選項 ( 點選喇叭圖示 speaker.gif 可控制聲音 off 及 三段音量 ) 內容顯示區顯示會員列表內容內容顯示區, 由左而右 由上而下依序羅 80 ( 此為草案, 請以公告版本為主 )

83 列會員肖像照片及暱稱 ( 預設顯示全部會員 ), 並以 2 列 2 欄呈現 當會員人數超過 4 人時, 在置中靠下位置以分頁方式顯示, 表前一頁 表下一頁, 且現行頁的頁碼須放大顯示 ( 依序羅列則按中文字筆畫 英文字母及數字排列 ) ( )4. 點選 尋找會員, 其與動作要求 ( 三 ) 之 尋找會員 相同 ( )6. 點選 登出 則離開登入狀態, 並回到首頁 ( )7. 點選 線上聊天 連結到線上聊天頁面 ( 參見動作要求 ( 七 )) ( )8. 點選 好友管理 連結到好友管理頁面 ( 參見動作要求 ( 六 )) ( )9. 點選 資料維護 連結到資料維護頁面 ( 參見動作要求 ( 四 )) 帳號 : 密碼 : 識別碼 : 8M3A 更換 圖 7 會員登入頁面之完成參考圖 圖 8 密碼錯誤之訊息提示 81 ( 此為草案, 請以公告版本為主 )

84 尋找會員 登出 書曼 (suman) 線上聊天好友管理資料維護 Victoria Sseceret 斐凌 Feiling Urooj Mehmod Paige Albert 圖 9 會員登入後之完成參考圖 ( 六 ) 建置好友管理網頁 ( 如圖 10 及圖 11) ( )1. 內容顯示區, 由上而下依序羅列所有會員, 每列呈現一位會員資料, 包含照片 暱稱 身分 登入狀態 (online/offline) 及相關功能按鈕, 每個頁面顯示 4 個會員, 當會員人數超過 4 人時, 在置中靠下位置以分頁方式顯示, 表前一頁 表下一頁, 且現行頁的頁碼須放大顯示 若點選 好友, 則依序羅列出身分為好友者 ; 若點選 已發邀請, 則依序羅列出身分為已發邀請者 ; 若點選 來訊邀請, 則依序羅列出身分為來訊邀請者 ; 若點選 一般會員, 則依序羅列出身分為一般會員者 ; 若點選 全部列出, 則羅列所有會員 ( 依序羅列則按中文字筆畫 英文字母及數字排列 ) 會員身分 ( 包含好友 已發邀請 來訊邀請 一般會員 ) 說明如下 : (1) 好友 : 已方 ( 登入者 ) 與對方皆同意接受邀請成為好友 (2) 已發邀請 : 已方 ( 登入者 ) 發邀請且等待對方同意成為好友 (3) 來訊邀請 : 對方來訊邀請且等待己方 ( 登入者 ) 同意成為好友 (4) 一般會員 : 雙方皆未發送邀請成為好友 82 ( 此為草案, 請以公告版本為主 )

85 尋找會員 登出 書曼 Suman 線上聊天好友管理資料維護 好友已發邀請來訊邀請一般會員全部列出 Paige Albert 好友 檢視資料聊天記錄取消好友 online Victoria Sseceret 已發邀請 檢視資料聊天記錄取消邀約 offline 斐凌 Feiling 來訊邀請 檢視資料聊天記錄同意邀請 online Marta Cuberos Gallardo 一般會員 檢視資料聊天記錄發出邀請 online 圖 10 好友管理示意圖 (*)2. 登入者與該會員的身分若為好友, 則 檢視資料 及 取消好友 為啟用中, 聊天記錄 視有/ 無而為啟用中 / 無啟用 ; 點選 取消好友, 則登入者與該會員的關係改為一般會員, 並送出取消好友之訊息給相對應之會員, 原本 取消好友 改顯示為 發出邀請 (*)3. 登入者與該會員的身分若為已發邀請, 則 檢視資料 及 取消邀請 為啟用中, 聊天記錄 視有/ 無而為啟用中 / 無啟用 ; 點選 取消邀請, 則登入者與該會員的關係改為一般會員, 原本 已發邀請 改顯示為 發出邀請 (*)4. 登入者與該會員的身分若為來訊邀請, 則 檢視資料 及 同意邀請 為啟用中, 聊天記錄 視有/ 無而為啟用中 / 無啟用 ; 點選 同意邀請, 則登入者與該會員的關係改為好友, 則原本 同意邀請 改顯示為 取消好友 (*)5. 登入者與該會員的身分若為一般會員, 則 檢視資料 及 發出邀請 為啟用中, 聊天記錄 視有/ 無而為啟用中 / 無啟用 ; 點選 發出邀請, 則登入者與該會員的關係改為已發邀請, 則原本 發出邀請 改顯示為 取消邀請 83 ( 此為草案, 請以公告版本為主 )

86 茲對上述 2~5 動作要求之每種身分的功能按鈕, 整理如下表 : 身分 功能項目 檢視資料 聊天紀錄 取消好友 取消邀請 同意邀請 發出邀請 好友 / x x x online / offline 已發邀請 / x x x online / offline 來訊邀請 / x x x online / offline 一般會員 / x x x online / offline 註 : 表示按鈕啟用中 ( 黑色 #000000) 表示按鈕不啟用 ( 灰階 #333333) x 表示按鈕不需出現 (*)7. 點選 聊天記錄, 則連結到動作要求 ( 七 ) 線上聊天 網頁之 3 的資 訊, 進入登入者與該會員的聊天記錄內容 (*)8. 點選 檢視資料, 登入者後能看到相對應會員願意顯示的基本資料, 基 本資料的姓名 暱稱 生日 性別等顯示於會員肖像右側, 其餘則依格 表列於下, 最下方新增一文字欄位, 於欄位左上角顯示 註記欄, 顏 色為 #333333, 供登入者由此文字註記, 點選 送出 後回到上一頁面 登狀 入態 尋找會員 登出 書曼 Suman 線上聊天好友管理資料維護 好友已發邀請來訊邀請一般會員全部列出 Paige Albert (Y Paige) 西元 1967 年 8 月 13 日生 ( 女 ) 學 歷 : National Taiwan Nornal University 行動電話 : 電子郵件 : paige@labor.gov.tw 註記欄 圖 11 檢視資料網頁示意圖 84 ( 此為草案, 請以公告版本為主 )

87 ( 七 ) 建置線上聊天網頁 ( 如圖 12~14) (*)1. 內容顯示區, 由上而下依序羅列所有會員, 每列呈現一位會員資料, 包含照片 暱稱 身分 登入狀態 (online/offline) 及相關功能按鈕, 每個頁面顯示 4 個會員, 當會員人數超過 4 人時, 在置中靠下位置以分頁方式顯示, 表前一頁 表下一頁, 且現行頁的頁碼須放大顯示 ; 若點選好友按鈕則依序羅列出身分為好友者 若點選已發邀請按鈕則依序羅列出身分為已發邀請者 若點選來訊邀請按鈕則依序羅列出身分為來訊邀請者 若點選一般會員按鈕則依序羅列出身分為一般會員者 若點選全部列出按鈕則羅列所有會員 登入者與會員有聊天記錄者聊天記錄及刪除記錄按鈕為啟用中, 字跡顏色為 #000000; 無聊天記錄者聊天記錄及刪除記錄按鈕為無啟用, 字跡顏色為 # ( 依序羅列則按中文字筆畫 英文字母及數字排列 ) ( )2. 點選啟用中之 刪除記錄, 則刪除登入者與該會員的聊天記錄內容, 其 聊天記錄 及 刪除記錄 改為無啟用, 字跡顏色為 # ( )3. 點選啟用中之 聊天記錄, 進入登入者與該會員的聊天記錄內容, 以左右之方式呈現對話的內容及日期時間 ( )4. 最下方為聊天訊息輸入框, 輸入對話之內容, 點選 送出 可將對話訊息送出 尋找會員 登出 書曼 Suman 線上聊天好友管理資料維護 Paige Albert 好友 聊天記錄刪除紀錄 online Maria Albert 好友 聊天記錄刪除紀錄 offline Ines Padilla Lucas 好友 聊天記錄刪除紀錄 online Paula Bg 好友聊天記錄刪除紀錄 online ( 此為草案, 請以公告版本為主 )

88 圖 12 線上聊天網頁之示意圖 尋找會員 登出 書曼 Suman 線上聊天好友管理資料維護 :13 Hi! 好久不見! 考試考得如何? : :22 還好! 不錯哦!! 下午一起去逛街嗎 Orz? 送出 圖 13 線上聊天網頁之對談結果示意圖 86 ( 此為草案, 請以公告版本為主 )

89 尋找會員 登出 書曼 Suman 線上聊天好友管理資料維護 :13 Hi! 好久不見! 考試考得如何? : :22 還好! 不錯哦!! 下午一起去逛街嗎 Orz? :23 送出 圖 14 聊天訊息送出示意圖 ( 八 ) 資料備份評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺失, 以不及格論 備份內容如下 : 1. 使用 PHP 之備份 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 環境設定檔 : A. xampp\apache\conf\extra\httpd.conf B. xampp\apache\conf\extra\httpd-ssl.conf C. xampp\apache\conf\extra\httpd-xampp.conf D. xampp\php\php.ini E. xampp\phpmyadmin\config.inc.php F. xampp\mysql\bin\my.ini (3) 資料庫 : 預設資料庫資料夾 ( 目錄 ), 例如 :xampp\mysql (4) 其它相關資料 : 如應檢人自行進行額外設定之資料 2. 使用 ASP.NET 之備份 87 ( 此為草案, 請以公告版本為主 )

90 (1) 主文件目錄 : D: 磁碟下之網站資料夾 webxx (XX 為個人檢定工作崗位號碼, 如 等 ) (2) 資料庫 : 預設資料庫資料夾 ( 目錄 ) 之資料庫檔, 例如 :dbxx.mdf (3) 其它相關資料 : 如應檢人自行進行額外設定之資料 3. 其它備份 : 請自行依主文件目錄 環境設定檔 資料庫及其它相關資料進行備份, 其事後須能還原正常運作 ; 若無法還原正常運作, 則應檢人須自行承擔風險 88 ( 此為草案, 請以公告版本為主 )