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

Transcription

1 網頁設計乙級技術士技能檢定術科測試應檢參考資料 試題編號 : ~4 審定日期 : 103 年 3 月 31 日 修訂日期 : 104 年 6 月 07 日

2 網頁設計乙級技術士技能檢定術科測試試題目錄 ( 第二部分 ) 壹 網頁設計乙級技術士技能檢定術科測試試題使用說明... 1 參 網頁設計乙級技術士技能檢定術科測試應用軟體使用須知... 2 肆 術科測試時間配當表... 3 陸 網頁設計乙級技術士技能檢定術科測試檢定場地設備規格表... 4 柒 網頁設計乙級技術士技能檢定術科測試應檢人自備工具參考表... 6 捌 網頁設計乙級技術士技能檢定術科測試評審表... 7 拾 網頁設計乙級技術士技能檢定術科測試應檢人須知... 8 拾壹 網頁設計乙級技術士技能檢定術科測試試題名稱及編號 拾貳 網頁設計乙級技術士技能檢定術科測試檢定試題 試題編號 : 試題編號 : 試題編號 : 試題編號 :

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

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

5 參 術科測試時間配當表 每一檢定場, 每日排定測試場次一場 ; 程序表如下 : 時間內容備註 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) 提示操作機具設備時應注意事項 (9) 檢查電腦設備及術科測試用檔案 繳交術科測試評審表 發放隨身碟, 並進行備份 未完成評分之應檢人, 應於監評長宣布時間內回到指定場地待命配合評分 監評人員評閱應檢人所製作之結果 監評人員及術科測試辦理單位視需要召開檢討會 3

6 肆 網頁設計乙級技術士技能檢定術科測試檢定場地設備規格表 本表為每一工作崗位之配備, 由術科辦理單位填妥後, 寄給應檢人參考 項目名稱規格 1 主機 CPU: Intel AMD 規格 : RAM: GB 2 顯示器 CRT LCD/LED 吋 3 硬碟空間配置系統磁碟 C: GB 資料磁碟 D: GB 4 光碟機 DVD 虛擬光碟機軟體名稱 : 版本 : a. 作業系統 : 1.Windows 2. 其他 ( 名稱及版本 : ) 5 作業系統及 應用軟體名稱 ( 原評鑑軟體環境 ) b. 網站伺服器及資料庫軟體 XAMPP IIS + Visual Studio 或 Visual Studio Express c. 網頁製作軟體 : 1. Dreamweaver 2. Namo 3. SharePoint 4. 其他 ( 名稱及版本 : ) d. 繪圖軟體 : 1.PhotoImpact 2.Photoshop 3. 其他 ( 名稱及版本 : ) e. 防毒軟體 : 1.Trend PC-cillin 2. Avira Antivirus 3. 其他 ( 名稱及版本 : ) f. 其他相關軟體 UltraEdit PSPad EditPlus Notepad++ 1. 注音 2. 新注音 3. 倉頡 4. 新倉頡 5. 嘸蝦米 6 中文輸入法 6. 自然 7. 大易 8. 速成 9. 行列 10. 大新倉頡 11. 其他 ( 名稱 :,, ) 4

7 項目名稱規格 7 其他版本軟體 ( 僅供應檢人參考 使用 ) 辦理單位依實際狀況載明軟體資料, 惟須符合場地設備表之各項規 格, 若無則可免填 a. 網站伺服器及資料庫軟體 XAMPP IIS + Visual Studio 或 Visual Studio Express b. 網頁製作軟體 : 1. Dreamweaver 2. Namo 3. SharePoint 4. 其他 ( 名稱及版本 : ) c. 繪圖軟體 : 1.PhotoImpact 2.Photoshop 3. 其他 ( 名稱及版本 : ) d. 防毒軟體 : 1.Trend PC-cillin 2. Avira Antivirus 3. 其他 ( 名稱及版本 : ) e. 其他相關軟體 UltraEdit PSPad EditPlus Notepad++ 術科辦理單位名稱及戳章 : 5

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

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

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

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

12 捌 網頁設計乙級技術士技能檢定術科測試試題名稱及編號 名稱 試題編號 卓越科技大學校園資訊系統 網站 健康促進網社群平台 網站 ABC 影城 網站 精品電子商務 網站

13 玖 網頁設計乙級技術士技能檢定術科測試檢定試題 試題編號 : 主題 : 卓越科技大學校園資訊系統 網站測試時間 :240 分鐘所需檔案 : 資料檔名稱 檔案名稱 文書檔 01A01.txt( 最新消息 ) 01A02.txt( 動態文字廣告 ) 01B01.jpg ~01B04.jpg( 標題圖片 ) 01C01.swf ~ 01C 04.swf( 動畫 ) 圖形檔 版型檔案 01C 05.gif~01C 06.gif( 動畫圖片 ) 01D01.jpg ~ 01D 10.jpg( 校園映像 ) 01E01.jpg~01E02.jpg( 上 下小圖示 ) 01P01.htm( 管理登入版型 ) 01P02.htm( 首頁版型 ) 01P03.htm( 後台管理版型 ) 01P04.htm( 詳細內容版型 ) 1. 函式庫 : Prototype 1.7 JQuery MooTools Core with compatibility ( 含 ) 以上 函式庫 2. PHP Framework: CodeIgniter CakePHP 2.4 Yii ( 含 ) 以上 3. ASP.NET Framework: 已內建, 不再另行提供 試題說明 : 一 本試題為 卓越科技大學校園資訊系統 網站設計, 試題將會針對應檢人所需要製作的功能進行詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用 11

14 , 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但 以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 八 動作要求 : ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : (*)1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建 立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) (*)2. 整體網站版面尺寸以 pixels 設計, 上下左右各留 10 pixels 空 白, 水平置中 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( )4. 應檢人需自行架設資料庫伺服器, 且正常運作, 提供網站伺服器使用 ( 二 ) 卓越科技大學校園資訊系統 網站架構與版型 ( 如圖 1~9) 1. 本網站架構圖 : 如圖 1 所示 卓越科技大學校園資訊系統 資料庫 Web Server 網站標題區 選 單 區 動態文字廣告區 動畫圖片輪播區 最新消息區 校園映像區 進站總人數 頁尾版權區 後台管理 圖 1 網站架構圖 12

15 2. 本網站版型本網站共需四種版型頁面, 包括網站首頁版型 更多內容或詳細資料顯示區頁面版型 管理登入區頁面版型及後台管理頁面版型, 請參考素材版型檔案內容, 或分別依圖 2 圖 4 圖 6 及圖 8 之版型配置自行重新設計, 完成所有動作之要求 (1) 網站首頁版型 ( 如圖 2 及圖 3) 本版型由網站標題區 主選單區 進站總人數 動態文字廣告區 動畫圖片輪播區 最新消息區 管理登入按鈕 校園映像區及頁尾版權區所組成 網站標題區 主選單區主選單主選單主選單次選單次選單主選單次選單主選單進站總人數 : 動態文字廣告區動畫圖片輪播區最新消息區 More 頁尾版權區 管理登入校園映像區校園景觀 2 校園景觀 3 校園景觀 4 圖 2 網站首頁版型示意圖 13

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

17 圖 5 更多內容或詳細資料顯示區頁面之完成參考圖 (3) 登入區頁面版型 ( 如圖 6 及圖 7) 本版型由網站標題區 主選單區 進站總人數 動態文字廣告區 管理登入區 管理登入按鈕 校園映像區及頁尾版權區所組成 網站標題區 主選單主選單主選單主選單主選單 動態文字廣告區 管理登入區 管理登入校園映像區校園景觀 2 校園景觀 3 校園景觀 4 進站總人數 : 頁尾版權區 圖 6 管理登入區頁面版型示意圖 15

18 圖 7 管理登入區頁面之完成參考圖 4. 後台管理頁面版型 ( 如圖 8 及圖 9) 本版型由網站後台管理標題區 後台管理選單區 進站總人數 後台管理標示 管理登出按鈕 後台管理設定區及頁尾版權區所組成 後台管理標題區 後台管理選單區後台主選單後台主選單後台主選單後台主選單後台主選單 後台管理標示 後台管理設定區 管理登出按鈕 進站總人數 : 頁尾版權區 圖 8 管理登入區頁面版型示意圖 16

19 圖 9 後台管理頁面之完成參考圖 ( 三 ) 建置網站標題區 ( 如圖 10~12) 透過後台管理頁面之網站標題管理功能 ( 參見右圖 ) 設定網站標題區的圖片及替代文字, 並顯示於網站標題區內, 其功能包括 : (*)1. 評分前利用標題圖片素材檔案 01B01.jpg, 新增完成四筆完整的標題區使用圖片及替代文字資料至資料庫中, 並能正確顯示於首頁及後台管理頁面中 (*)2. 透過後台管理, 可新增及上傳網站標題區圖片, 同時需顯示欲上傳圖片之縮圖 ( 像素, 誤差範圍 ±2 像素 ) 於網站標題管理區中 (*)3. 透過後台管理, 可選擇欲顯示網站標題區所使用的圖片 (*)4. 網站標題區內顯示由後台管理程式所設定之網站標題區圖片及替代文字 (*)5. 透過後台管理, 可刪除已上傳的網站標題區圖片 (*)6. 透過後台管理, 可更新已上傳的網站標題區圖片 (*)7. 透過後台管理, 可設定及修改網站標題區圖片之替代文字 17

20 圖 10 網站標題區圖片編修功能頁面 圖 11 新增及上傳網站標題區圖片頁面 圖 12 網站標題區頁面 ( 四 ) 建置動態文字廣告區 ( 如圖 13 及圖 14) 透過後台管理頁面之動態文字廣告管理功能 ( 參見右圖 ) 設定動態文字廣告區的動態廣告文字, 並顯示於動態文字廣告區內, 其功能包括 : (*)1. 評分前利用動態文字廣告素材檔案 01A02.txt 之內容, 新增完成四筆完整的動態文字廣告區使用的資料至資料庫中, 並能正確顯示於首頁及後台管理頁面中 (*)2. 透過後台管理, 可新增廣告文字 (*)3. 透過後台管理, 可設定動態文字廣告區所顯示的廣告文字內容 (*)4. 動態文字廣告區內顯示由後台管理程式所設定多則之動態廣告文字 (*)5. 透過後台管理, 可修改廣告文字 (*)6. 透過後台管理, 可刪除廣告文字 18

21 圖 13 動態廣告文字後台管理頁面 圖 14 新增動態文字廣告頁面 ( 五 ) 建置動畫圖片輪播區 ( 如圖 15 及圖 16): 透過後台管理頁面之動畫影片及圖片管理功能 ( 參見右圖 ) 設定動畫圖片輪播區的動畫圖片, 並顯示於動畫圖片輪播區內, 其功能包括 : (*)1. 評分前利用動畫文件 (01C01.swf~01C04.swf) 及動畫圖片 (01C05.gif~01C06.gif) 素材檔案之內容, 新增完成四筆完整的動畫輪播區使用的文件或圖片至資料庫中, 並能正確顯示於首頁及後台管理頁面中 (*)2. 透過後台管理, 可新增上傳動畫圖片 並於後台管理區顯示使用 (*)3. 透過後台管理, 可設定動畫圖片輪播區所使用的動畫圖片 (*)4. 動畫圖片輪播區內顯示由後台管理所設定之動畫圖片 (*)5. 透過後台管理, 可更新已上傳的動畫圖片 (*)6. 透過後台管理, 可刪除已上傳的動畫圖片 19

22 圖 15 動畫圖片後台管理頁面 圖 16 新增動畫圖片輪播圖片頁面 ( 六 ) 建置校園映像區 ( 如圖 17~19): 透過後台管理頁面之校園映像資料管理功能 ( 參見右圖 ) 設定校園映像區的校園景觀圖片, 並顯示於校園映像區內, 其功能包括 : (*)1. 評分前利用校園映像圖片素材 (01D01.jpg~01D10.jpg) 檔案, 新增完成四筆完整的校園映像區使用的圖片至資料庫中, 並能正確顯示於首頁及後台管理頁面中 (*)2. 透過後台管理, 可新增上傳校園景觀圖片 上傳之圖片製作兩張縮圖, 前台顯示用 像素, 後台管理顯示用 像素 ( 誤差範圍 ±2 像素 ) (*)3. 透過後台管理, 可設定校園映像區所使用的圖片 (*)4. 校園映像區內顯示的校園景觀圖片 若超過 3 張則可以利用 及 來 控制顯示圖片 (*)5. 透過後台管理, 可更新已上傳的校園映像區圖片 (*)6. 透過後台管理, 可刪除已上傳的校園映像區圖片 (*)7. 透過後台管理, 可上傳圖片超過 3 張時, 後台管理能分頁顯示 (*)8. 後台管理分頁顯示時, < 為前一頁, > 為下一頁, 現行頁的頁碼 放大顯示 20

23 圖 17 校園映像區頁面 圖 18 校園映像圖片後台管理頁面 圖 19 新增校園景觀圖片頁面 21

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

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

26 圖 24 最新消息區頁面之完成參考圖 圖 25 滑鼠移至最新消息上方時頁面 圖 26 更多最新消息顯示區頁面 圖 27 滑鼠移至更多最新消息上方時頁面 圖 28 最新消息後台管理頁面 24

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

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

29 圖 34 新增管理者帳號頁面 ( 十二 ) 建置選單管理功能 ( 如圖 35 及圖 36): 透過後台管理頁面之選單管理功能 ( 參見右圖 ), 設定維護主選單及次選單, 其功能包括 : (*)1. 評分前先建立二個主選單項目, 分別為 管理登入 及 網站首頁, 其選單連結網址分別連結至 管理區登入頁面 及 網站首頁頁面 (*)2. 評分前, 請於前項 (1.) 所建立的網站首頁主選單項目下建立一個次選單項目為 更多內容, 次選單連結網址為 更多內容或詳細資料顯示頁面 (*)3. 透過後台管理, 可新增主選單 (*)4. 透過後台管理, 可修改主選單 (*)5. 透過後台管理, 可新增次選單 (*)6. 透過後台管理, 可修改次選單 (*)7. 主選單區內顯示由後台管理程式所設定之主選單及次選單 (*)8. 透過後台管理, 可刪除主選單 (*)9. 透過後台管理, 可刪除次選單 圖 35 主選單新增 修改及刪除頁面 圖 36 次選單新增 修改及刪除頁面 27

30 ( 十三 ) 資料備份 : 評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺失, 以不及格論 備份內容如下 : 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. 其它備份 : 請自行依主文件目錄 環境設定檔 資料庫及其它相關資料進行備份, 其事後須能還原正常運作 ; 若無法還原正常運作, 則應檢人須自行承擔風險 28

31 試題編號 : 主題 : 健康促進網社群平台 網站測試時間 :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( 背景圖 ) 版型檔案 02P01.htm( 首頁版型 ) 函式庫 1. 函式庫 : Prototype 1.7 JQuery MooTools Core with compatibility ( 含 ) 以上 2. PHP Framework: CodeIgniter CakePHP 2.4 Yii ( 含 ) 以上 3. ASP.NET Framework: 已內建, 不再另行提供 試題說明 : 一 本試題為 健康促進網社群平台 網站設計, 試題將會針對應檢人所需要製作的動作功能詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地 29

32 及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用, 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但 以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 八 動作要求 : ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : (*)1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建 立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) (*)2. 整體網站版面尺寸以 pixels 設計, 上下左右各留 10 pixels 空 白, 水平置中對齊 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( )4. 應檢人需自行架設資料庫伺服器, 且正常運作, 提供網站伺服器使用 ( 二 ) 建置 健康促進網社群平台 網站架構與版型 ( 如圖 1~3) 1. 本網站架構圖 : 如圖 1 所示 健康促進網社群平台 資料庫 Web Server 分類網誌 最新文章 人氣文章 講座訊息 問卷調查 後台管理 圖 1 網站架構圖 30

33 ( )2. 版型由網站標題區 主選單區 動態文字廣告區 會員登入 主題內容 顯示區及頁尾版權區所組成, 請參考素材版型檔案內容, 或依圖 2 之版 型配置自行重新設計, 完成所有動作之要求 網站標題區 主選單區 選單項目一選單項目二選單項目三選單項目四選單項目五 動態文字廣告區 主題內容顯示區 會員登入 頁尾版權區 圖 2 網站版型示意圖 圖 3 健康促進網社群平台 網站之完成參考圖 31

34 ( 三 ) 建置網站標題區 ( 如圖 4) (*)1. 設定標題圖片 02B01.jpg, 替代文字為 健康促進網 - 回首頁 (*)2. 左上方顯示今天日期 今日瀏覽人次 累計瀏覽人次 (*)3. 右上方顯示 回首頁, 點選 回首頁 將返回首頁 (*)4. 當系統日期變更並重新整理後, 今天日期會自動改變 圖 4 網站標題區 ( 四 ) 建置主選單區 ( 如圖 5): (*)1. 建立主選單, 其內容為 分類網誌 最新文章 人氣文章 講座訊息 及 問卷調查 等項目, 參考 02A01.txt 檔案 (*)2. 設定背景圖片為 02B04.png (*)3. 除 講座訊息 外, 點選各項目均可以正確連結至該項目的網頁 圖 5 主選單區示意圖 32

35 ( 五 ) 建置動態文字廣告區 ( 如圖 6): (*)1. 於動態文字廣告區內置入 請民眾踴躍投稿電子報, 讓電子報成為大家相互交流 分享的園地! 詳見最新文章 之動態廣告文字, 且文字移動方向由右至左 圖 6 動態文字廣告區示意圖 ( 六 ) 建置會員登入 / 登出區 ( 如圖 7~9): (*)1. 點選 會員登入, 顯示 會員登入 畫面, 內容應包括 帳號 密碼 及文字方塊 登入 及 清除 按鈕 忘記密碼 及 尚未註冊 文字 (*)2. 使用後台預先建立的帳號 密碼登入 ( 參考 02A08.txt 檔案), 如 : 輸入會員帳號 (test) 及密碼 (5678), 並點選 登入 按鈕 若正確, 則進入主題內容頁面, 且顯示 歡迎,test 登出 ; 若點選 清除 將重置 (Reset) 帳號及密碼以利重新填寫 (*)3. 若輸入不正確之帳號及密碼並點選 登入 按鈕, 則顯示 查無帳號 或 密碼錯誤 訊息, 同時點選 確定 按鈕將返回, 並重置帳號及密碼資料 (*)4. 點選 忘記密碼, 連結至忘記密碼頁面 (*)5. 點選 尚未註冊, 連結至註冊會員頁面 (*)6. 輸入管理者帳號及密碼, 並點選 登入 按鈕 若正確, 則進入後台管理頁面 ; 若不正確, 則同項次 3 預設管理者帳號為 admin 及密碼為

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

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

38 圖 12 忘記密碼畫面之示意圖 ( 續 ) ( 十 ) 建置註冊會員頁面 ( 如圖 13): (*)1. 內容應包括提示文字 * 請設定您要註冊的帳號及密碼 ( 最長 12 個字元 ) Step1: 登入帳號 Step2: 登入密碼 Step3: 再次確認密碼 Step4: 信箱 ( 忘記密碼時使用 之輸入文字方塊 註冊 按鈕及 清除 按鈕 (*)2. 若輸入正確之資料並點選 註冊 按鈕, 則可完成註冊, 並出現 註冊完成, 歡迎加入 訊息 ; 若點選 清除 按鈕, 可重置輸入的資料並重新輸入 (*)3. 若輸入不完整或帳號重複之資料並點選 註冊 按鈕, 則會出現 不可空白 或 帳號重複 提示對話框 ( 最長 12 個字元 ) (a) (b) (c) 圖 13 註冊會員頁面 (a) 註冊會員資料 (b) 輸入不完整及 (c) 帳號重複之訊息示意圖 ( 十一 ) 建置最新文章區 ( 如圖 14~16): (*)1. 匯入最新文章之文字檔 02A03.txt~02A06.txt 至資料庫中 36

39 (*)2. 左上方呈現路徑導覽列 目前位置 : 首頁 > 最新文章區 (*)3. 建立 標題 內容 欄位, 並顯示由後台管理之最新文章, 若超過 5 則時, 則以分頁方式顯示, 其中 < 為前一頁, > 為下一頁, 現行頁的頁碼須放大顯示 ( 如圖 14) (*)4. 未登入之使用者, 以滑鼠點選各則最新文章時, 可顯示最新文章詳細內容 ( 如圖 15) (*)5. 最新文章顯示時, 登入的使用者可以點選 讚 或 收回讚, 以記錄評價次數統計人氣文章 ( 如圖 16) 圖 14 最新文章區之示意圖 37

40 圖 15 顯示最新文章詳細內容 圖 16 點選 讚 或 收回讚 以記錄最新文章評價次數 ( 十二 ) 建置人氣文章區 ( 如圖 17~19): (*)1. 左上方呈現路徑導覽列 目前位置 : 首頁 > 人氣文章區 (*)2. 建立 標題 內容 人氣 等欄位, 顯示資料庫中人氣文章, 由大到小排序, 顯示人氣的內容需使用 02B03.jpg 圖片 ( 如圖 17) (*)3. 若超過 5 則時, 則以分頁方式顯示, 其中 < 為前一頁, > 為下一頁, 現行頁的頁碼須放大顯示 (*)4. 滑鼠移至各則人氣文章時, 以彈出視窗方式顯示人氣文章詳細內容 ( 如圖 18) (*)5. 人氣文章顯示時, 登入的使用者可以點選 讚 或 收回讚, 以記錄評價次數統計人氣文章, 人氣會自動改變 ( 如圖 19) 38

41 圖 17 人氣文章區之示意圖 圖 18 彈出視窗內顯示人氣文章詳細內容 圖 19 點選 讚 或 收回讚 以記錄人氣文章評價次數 39

42 ( 十三 ) 建置問卷調查區 ( 如圖 20~23): (*)1. 左上方呈現路徑導覽列 目前位置 : 首頁 > 問卷調查 (*)2. 顯示問卷調查內容, 且呈現 編號 問卷題目 投票總數 結果 及 狀態 等欄位 問卷題目內容參見檔案 02A07.txt ( 如圖 20) (*)3. 未登入的會員點選 結果 可呈現問卷統計結果 ( 如圖 21), 狀態欄應呈現 請先登入 (*)4. 會員登入後可觀看統計結果與參與投票, 點選 參與投票 可顯示該問卷的詳細內容 ( 如圖 22) (*)5. 點選 我要投票 可參與投票, 並正確顯示該問卷投票後的統計結果 ( 如圖 23) 10 圖 20 未登入會員之問卷調查區之示意圖 圖 21 問卷調查之統計結果示意圖 40

43 圖 22 會員登入後可觀看統計結果與參與投票 圖 23 參與問卷調查投票 ( 十四 ) 建置後台管理界面 ( 如圖 24): (*)1. 後台管理選單包括 帳號管理 分類網誌 最新文章管理 講座管理 及 問卷管理 等 5 項目 (*)2. 主題內容顯示區輸入 請選擇管理項目 圖 24 後台管理頁面之示意圖 41

44 ( 十五 ) 建置帳號後台管理 ( 如圖 25): 透過後台管理頁面之帳號管理功能 ( 參見右圖 ) 進行帳號管理, 其功能包括 : (*)1. 內容應包括提示文字 帳號 密碼 刪除 及核取方塊, 確定刪除 及 清空選取 按鈕 下方呈現 新增會員 * 請設定您要註冊的帳號及密碼 ( 最長 12 個字元 ) Step1: 登入帳號 Step2: 登入密碼 Step3: 再次確認密碼 Step4: 信箱 ( 忘記密碼時使用 之輸入文字方塊 註冊 按鈕及 清除 按鈕 (*)2. 透過後台管理, 可新增及刪除帳號 ; 即核取欲刪除之帳號並點選 確定刪除 按鈕, 可進行帳號刪除 此外, 點選 清空選取 按鈕, 可取消選取項目 (*)3. 輸入 登入帳號 登入密碼 再次確認密碼 信箱 之資料並點選 新增 按鈕, 可新增帳號及密碼至系統中 此外, 點選 清除 按鈕, 可重置已輸入的項目資料 ( 最長 12 個字元 ) 圖 25 帳號之後台管理示意圖 42

45 ( 十六 ) 建置最新文章後台管理 ( 如圖 26): 透過後台管理頁面之最新文章管理功能 ( 參見右圖 ) 進行最新文章管理, 其功能包括 : (*)1. 建立 4 篇最新文章資料 ; 即分別匯入文字檔 02A03.txt~02A06.txt 於資料庫中, 需包括 標題 及 內容 兩個欄位 (*)2. 最新文章超過 3 則時, 則以分頁方式顯示, 其中 < 為前一頁, > 為下一頁, 現行頁的頁碼須放大顯示 (*)3. 內容應包括 編號 文字 標題 文字 顯示 及 刪除 核取方塊, 確定修改 按鈕 核取想要顯示或刪除的文章後, 按下 確定修改 按鈕即可修改最新文章資料至系統資料庫內 圖 26 最新文章之後台管理示意圖 ( 十七 ) 建置問卷後台管理 ( 如圖 27~28): 透過後台管理頁面之問卷管理功能 ( 參見右圖 ) 進行問卷管理, 其功能包括 : (*)1. 內容應包括 問卷名稱 選項 文字及方塊 新增 清空 及 更多 按鈕 ( 如圖 27) (*)2. 透過後台管理, 可增加問卷調查選項 ; 即點選 更多 按鈕, 可增加問卷選項 (*)3. 點選 新增 按鈕, 可新增問卷 (*)4. 點選 清空 按鈕, 可清除已輸入之內容 43

46 圖 27 問卷調查新增管理之示意圖 圖 28 增加問卷調查選項之示意圖 ( 十八 ) 資料備份 : 評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺失, 以不及格論 備份內容如下 : 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) 其它相關資料 : 如應檢人自行進行額外設定之資料 44

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

48 試題編號 : 主題 : ABC 影城 網站測試時間 :240 分鐘所需檔案 : 資料檔名稱 圖形檔 檔案名稱 03A01.jpg ~ 03A09.jpg( 預告片 ) 03B01.png ~ 03B25.png( 院線片電影海報 ) 03C01.png ~ 03C04.png( 普遍 輔導 保護及限制等分級圖示 ) 03D01.png( 訂票人物圖片 ) 03D02.png( 訂票座位圖片 ) 03D03.png( 訂票有人坐之座位圖片 ) 03D04.png( 訂票電影院座位 ) 影片檔 03B01v.avi~03B25v.avi( 院線片影片檔 ) 版型檔案 函式庫 03P01.htm( 首頁版型 ) 03P02.htm( 院線片簡介版型 ) 03P03.htm( 後台管理頁面版型 ) 1. 函式庫 : Prototype 1.7 JQuery MooTools Core with compatibility ( 含 ) 以上 2. PHP Framework: CodeIgniter CakePHP 2.4 Yii ( 含 ) 以上 3. ASP.NET Framework: 已內建, 不再另行提供 試題說明 : 一 本試題為 ABC 影城 網站設計, 試題將會針對應檢人所需要製作的動作功能詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用 46

49 , 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 八 動作要求 : ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : (*)1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) (*)2. 整體網站版面尺寸以 pixels 設計, 上下左右各留 10 pixels 空白, 水平置中 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( )4. 應檢人需自行架設資料庫伺服器, 且正常運作, 提供網站伺服器使用 ( 二 ) ABC 影城 網站架構與版型本網站由網站標題區 主選單區 動態文字廣告區 預告片導覽區 院線片清單區 頁尾版權區 及後台管區所組成, 如下圖所示 本網站主要有三種版型頁面, 包括網站首頁版型 院線片簡介版型及後台管理頁面版型, 請參考素材版型檔案內容, 或分別依圖 2 圖 4 及圖 6 之版型配置自行重新設計, 完成所有動作之要求 1. 本網站架構圖 : 如圖 1 所示 47

50 ABC 影城 網站 資料庫 Web Server 網站標題區 主選單區 動態文字廣告區 預告片導覽區 院線片清單區 頁尾版權區 後台管理 預告片海報管理 院線片清單管理 院線片簡介 電影票訂單管理 圖 1 網站架構圖 2. 建置網站首頁版型 ( 如圖 2~3) 本版型由網站標題區 主選單區 ( 首頁 線上訂票 會員系統 管理系統 ) 動態文字廣告區 預告片導覽區 院線片清單區及頁尾版權區所組成 網站標題區 首頁線上訂票會員系統管理系統 動態文字廣告區 預告片導覽區 院線片清單區 頁尾版權區 圖 2 網站首頁版型示意圖 48

51 圖 3 網站首頁之完成參考圖 3. 建置院線片簡介版型 ( 如圖 4~5) 本版型由網站標題區 主選單區 ( 首頁 線上訂票 會員系統 管理系統 ) 動態文字廣告區 院線片簡介區及頁尾版權區所組成 網站標題區 首頁線上訂票會員系統管理系統 動態文字廣告區 院線片簡介區 頁尾版權區 圖 4 院線片簡介版型示意圖 49

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

53 圖 7 後台管理頁面之完成參考圖 ( 三 ) 建置主選單區 ( 如圖 8) (*)1. 設定 線上訂票 超連結, 連結到 線上訂票 頁面 (*)2. 設定 首頁 超連結, 連結到 首頁 頁面 (*)3. 設定 管理系統 超連結, 連結至後台管理之登入頁面, 且以預設管理者帳號及密碼可進入管理頁面 預設管理者帳號為 admin 及密碼為 1234 圖 8 主選單區之完成參考圖 ( 四 ) 建置預告片海報導覽區 ( 如圖 9~10) 透過後台管理頁面之預告片海報管理功能 ( 參見右圖 ) 設定預告片海報導覽區的預告片海報, 以預告影城即將放映 51

54 之影片, 其功能包括 : (*)1. 在 預告片海報導覽區 中能展示海報圖檔 (*)2. 多張海報圖檔展示時, 能以動畫展示, 動畫會自動切換海報圖檔及名片 (*)3. 每一張海報圖檔, 均會自動產生一個 海報縮圖 按鈕, 並置放於動畫下方之 按鈕列 中 (*)4. 按鈕列 中只能置放四個按鈕, 超過時則採用按鈕來顯示隱藏的按鈕 當點選會水平移動出現下一個按鈕 ; 反之點選會水平移動出現上一個按鈕 (*)4. 在 預告片海報導覽區 中, 至少要包含素材檔中的海報圖檔 6 張 (*)5. 當訪客點選按鈕列之按鈕時, 能切換相對應預告片海報圖片及名片 (*)6. 海報圖檔切換時 ( 動畫自動切換或是點選按鈕切換 ), 會使用轉場效果, 使用淡入 縮放 ( 小到大 ) 或滑出之其中一種效果 圖 9 預告片導覽區示意圖 52

55 圖 10 預告片導覽區之完成參考圖 ( 五 ) 建置後台預告片海報管理功能 ( 如圖 11) (*)1. 透過後台管理, 可新增上傳新的電影海報圖片及名片, 並在前台正確展示 (*)2. 透過後台管理, 可刪除已上傳的電影海報圖片及名片, 並在前台正確展示 (*)3. 透過後台管理, 可設定已上傳電影海報圖片那些可在 預告片導覽區 播放, 並在前台正確展示 (*)4. 透過後台管理, 可設定已上傳電影海報圖片在 預告片導覽區 播放順序, 並在前台正確展示 (*)5. 透過後台管理, 可設定動畫切換時使用何種的轉場效果, 至少須提供淡入 縮放 ( 小到大 ) 滑出等效果, 並在前台正確展示 圖 11 預告片導覽區之後台編修管理頁面示意圖 53

56 ( 六 ) 建置院線片清單區 ( 如圖 12~14) 在 院線片清單區 中, 能展示上映中的電影, 所有電影的上映檔期為上映日期 ( 含 ) 開始三天結束 功能說明如下 : (*)1. 在 院線片清單區 中, 列出 院線片清單 的標題及上映中的電影,, 每部影片內容至少包含圖中所列之項目, 包括片名 電影海報 分級 ( 普通級 保護級 輔導級 限制級 ) 上映日期 劇情簡介 按鈕及 線上訂票 按鈕 ( 參見圖 12 及圖 13) (*)2. 每一頁面展示 4 部,2 列 x2 欄, 顯示的順序為左上 右上 左下及右下 (*)3. 若上映中的電影超過 4 部, 則要分頁展示, 並且有分頁的編號, 按分頁的編號可切換到該分頁 (*)4. 在 院線片清單區 中, 需列出至少 6 部上映中的電影 (*)5. 在 院線片清單區 中, 展示的電影清單會自動過濾已經下檔的電影 (*)6. 點選電影清單中的任一部電影的 線上訂票 按鈕, 可連結到 線上訂票 頁面, 且 線上訂票 頁面中已自動選擇了該部電影 (*)7. 點選電影清單中的 電影海報 或 劇情簡介, 即可顯示該影片的 院線片簡介 頁面, 每部影片內容至少包含片名 分級 片長 上映日期 ( 分為年月日 3 個欄位, 其中年為西元年, 月為 1~12 月, 日為 1~31 日, 例如 2014/02/16) 發行商 導演 電影海報及劇情簡介等項目 預告影片可有可無 ( 參見圖 14) (*)8. 在 院線片簡介 頁面中, 出現預告影片區, 按 播放 鍵, 可播放該影片介紹檔 圖 12 院線片清單區示意圖 54

57 圖 13 院線片清單區之完成參考圖 (a) (b) 圖 14 院線片簡介 之 (a) 示意圖及 (b) 完成參考圖 ( 七 ) 建置後台院線片清單管理功能 ( 如圖 15~16) 透過後台管理頁面之院線片管理功能 ( 參見右圖 ) 設定院線片清單區的院線片資料, 以介紹上映中影片 其他功能包括 : (*)1. 提供 新增電影 的功能, 每一部電影需包含片名 分級 片長 上映日期 發行商 導演 預告影片 ( 視訊檔 ) 電影海報( 圖片 ) 及電影簡介等資料項目, 並能在前台正確展示新增結果 a. 分級為下拉式選單, 包含普遍級 輔導級 保護級及限制級等 4 個選項 b. 上映日期, 分為年月日 3 個欄位, 其中年為西元年, 月為 1~12 月, 日為 1~31 日 55

58 (*)2. 提供 修改電影資料 的功能, 並在前台正確展示修改結果 (*)7. 提供 刪除電影 的功能, 並在前台正確展示 (*)8. 可設定那些電影會在 院線片清單區 展示, 並在前台正確展示 (*)9. 可設定在 院線片清單區 展示電影的順序, 並在前台正確展示 圖 15 院線片清單區之後台編修管理頁面示意圖 (a) (b) 圖 16 院線片清單區之後台新增 編輯電影之 (a) 示意圖及 (b) 完成參考圖 ( 八 ) 建置前台線上訂票功能 ( 如圖 17~20) 透過線上訂票功能可逕行於線上完成電影票預約訂購, 同時藉由後台之電影訂票管理功能 ( 參見右圖 ), 可完善地處理電影票訂單管理之事宜, 其功能包括 : (*)1. 線上訂票 頁面應包含 電影 日期 ( 觀看日期 ) 場次 確定 按鈕及 重置 按鈕 56

59 (*)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. 若是訂當日的電影票, 則場次選單只能列出尚未放映的場次, 例如在 17:00 訂票, 則場次選單只能列出 18:00~20:00 20:00~22:00 及 22:00~24:00 共 3 個場次 c. 剩餘座位數計算方式為該電影上映的廳的座位數扣除已經訂購的座位數量, 每一廳的座位數共 20 個座位, 可供訂位 (*)5. 點選 確定 後, 即進入 挑選座位 的畫面, 畫面內容要求如下 : a. 能呈現 挑選座位 的畫面, 座位的排列為 4 列 x 5 欄, 共 20 個座位, 並且有 上一步 按鈕及 訂購 按鈕 b. 未賣出的座位格子, 會顯示沒有人的座位圖 ( 使用所提供的素材 ), 可以勾選 c. 已經賣出的座位格子, 會顯示有人的座位圖 ( 使用所提供的素材 ), 且不可以勾選 e. 會顯示已選擇的電影 觀看日期及時刻 (*)6. 在 挑選座位 的畫面, 挑選座位的動作說明下 : a. 當使用者勾選座位的同時, 會即時顯示目前已經勾選幾個座位, 最多只能勾選四個座位, 超過時就無法再勾選了 b. 點選 上一步 按鈕時, 則取消勾選資料, 回到 訂票 頁面, 並保留原先選擇的資料, 繼續挑選 c. 點選 訂購 按鈕時, 訂購完成, 並出現 電影票訂單 頁面. (*)7. 在 電影票訂單 頁面, 包含的資訊如下 : a. 包含電影名稱 觀看日期 場次時間 座位, 以及產生一組訂單編號 b. 訂單編號前 8 碼是電影的訂購日期, 後面 4 碼為流水號 ( 遞增 ) 57

60 圖 17 線上訂票之完成參考圖 (a) (b) 圖 18 線上訂票之 (a) 電影名稱及 (b) 場次呈現示意圖 (a) (b) 圖 19 挑選座位之 (a) 示意圖及 (b) 完成參考圖 58

61 圖 20 電影票訂單的畫面 ( 九 ) 建置後台電影票訂單管理功能 ( 如圖 21) (*)1. 在後台之電影票訂單管理頁面中, 顯示所有訂單資料, 每一筆訂單包含訂單編號 電影名稱 觀看日期 場次時間 訂購數量 訂購位置及 刪除 按鈕 (*)2. 所有訂單依照訂單編號, 由大到小列出 (*)3. 可使用 刪除 按鈕來刪除該筆訂單 (*)4. 可使用 快速刪除 按鈕, 依所選擇的電影, 來刪除該電影的所有訂單, 刪除前須有確認之動作 (*)5. 可使用 快速刪除 按鈕, 依所指定的觀看日期, 來刪除該日期的所有訂單, 刪除前須有確認之動作 圖 21 電影票訂票之後台管理示意圖 ( 十 ) 資料備份 : 評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自 行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺 59

62 失, 以不及格論 備份內容如下 : 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. 其它備份 : 請自行依主文件目錄 環境設定檔 資料庫及其它相關資料進行備份, 其事後須能還原正常運作 ; 若無法還原正常運作, 則應檢人須自行承擔風險 60

63 試題編號 : 主題 : 精品電子商務 網站測試時間 :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( 後台管理中心 ) 版型檔案 04P01.htm( 首頁版型 ) 04P02.htm( 後台管理版型 ) 1. 函式庫 : Prototype 1.7 JQuery MooTools Core with compatibility ( 含 ) 以上 函式庫 2. PHP Framework: CodeIgniter CakePHP 2.4 Yii ( 含 ) 以上 3. ASP.NET Framework: 已內建, 不再另行提供 試題說明 : 一 本試題為 精品電子商務 網站設計, 試題將會針對應檢人所需要製作的動作進行詳細的說明 二 應檢人需依照試題說明進行網頁設計, 所有需用到或參考的檔案 資料均放置於 D: 磁碟之中, 其包含以下資料夾 : ( 一 ) 試題本 資料夾: 提供網頁設計乙級技術士技能檢定術科測試試題電子檔 ( 二 ) 素材 資料夾: 提供應檢網頁設計之素材 ( 三 ) 原評鑑軟體 資料夾: 提供原評鑑規格之安裝軟體 ( 四 ) 其它版本軟體 資料夾: 提供原評鑑軟體其它版本之安裝軟體 三 自行安裝軟體以考場評鑑規格 ( 詳見考場設備規格表 ) 為主, 若考場提供符合 場地 61

64 及機具設備評鑑自評表 中原軟體規格 ( 含 ) 以上之其他版本供應檢人選擇安裝使用, 則應檢人使用該版本軟體之風險須自行承擔 四 應檢人須自行完成 : ( 一 ) 建置 Web Server 並測試其功能 ( 二 ) 建立資料庫並測試其連接功能 五 評分時, 動作要求各項目的所有功能, 只要有一細項功能不正確, 則扣該項分數, 但以扣一次為原則 六 有錯別字 ( 含標點符號 英文單字 ) 漏字 贅字 全型或半型格式錯誤者, 每字扣 1 分 七 試題要求中的物件, 若無特別指定則以美觀為原則, 自行設定, 不列入扣分項目 八 動作要求 : ( 一 ) 建立資料夾 網站版面尺寸及伺服器, 內容包括 : (*)1. 在 D: 磁碟建立本網站主文件資料夾 webxx, 儲存製作完成的結果 ; 此外, 資料庫須以安裝程式預設路徑來安裝, 並以 dbxx 為名稱建立本網站資料庫 (XX 為個人檢定工作崗位號碼, 如 等 ) (*)2. 整體網站版面尺寸以 pixels 設計, 上下左右各留 10 pixels 空白, 水平置中對齊 ( )3. 應檢人需自行架設本機網站伺服器, 可於瀏覽器網址列 (URL) 中輸入 或 以瀏覽網站 ( )4. 應檢人需自行架設資料庫伺服器, 且正常運作, 提供網站伺服器使用 ( 二 ) 精品電子商務 網站版型建置( 如圖 1~4) 1. 本網站架構圖 : 如圖 1 所示 精品電子商務 資料庫 Web Server 商品選單 最新消息 購物車 會員管理 訂單管理 後台管理 圖 1 網站架構圖 62

65 ( )2. 版型由網站標題區 商品分類區 進站總人數 最新消息區 商品介紹 區及頁尾版權區所組成, 請參考素材版型檔案內容, 或分別依圖 2 及圖 4 之版型配置自行重新設計, 完成所有動作之要求 標題區 商品分類區 全部商品大分類中分類中分類中分類中分類大分類大分類 最新消息區 商品介紹區 進站總人數 頁尾版權區 圖 2 網站首頁版型示意圖 圖 3 網站首頁完成參考圖 ( )3. 建置後台管理頁面版型 後台管理頁面版型由標題區 管理功能選單 起始頁面及頁尾版權區所組成 63

66 ; 其中管理功能選單包含 管理權限設置 商品分類與管理 訂單管理 會員管理 頁尾版權區 最新消息管理 及 登出 標題區 管理功能選單 管理權限設置 商品分類與管理 訂單管理 會員管理 起始頁面 頁尾版權區 最新消息管理 登出 頁尾版權區 圖 4 後台管理頁面版型示意圖 圖 5 後台管理頁面完成參考圖 ( 三 ) 建置前台網站首頁標題區 ( 如圖 6) 前台網站首頁標題區應包括 公司 LOGO 與 回首頁 最新消息 購物流程 購物車 會員登入 管理登入 功能選單 (*)1. 公司 LOGO 應使用素材檔 0416.jpg 64

67 (*)2. 點選 回首頁 應返回網站首頁頁面 (*)3. 點選 最新消息 應顯示最新消息頁面 (*)4. 點選 購物流程 應顯示購物流程說明頁面, 購物流程說明應使用素材檔 0401.jpg (*)5. 點選 購物車 應顯示購物資訊頁面 (*)6. 點選 會員登入 應顯示會員登入頁面 (*)7. 點選 管理登入 應顯示管理人員登入頁面 圖 6 前台網站標題區完成參考圖 ( 四 ) 建置前台商品分類區 ( 如圖 7~8) 前台商品分類項目內容由素材檔 0401.txt 提供, 包含全部商品之大分類 : 流行皮件 流行鞋區 流行飾品 背包與各大分類商品包含之中分類商品 ; 素材檔 0403.txt~0410.txt 則分別提供商品 1~8 之大分類 中分類 簡介 價錢 規格 庫存量與詳細介紹 (*)1. 商品分類區應呈現各商品分類的名稱與數量, 商品分類包含 : 全部商品 與 流行皮件 流行鞋區 流行飾品 背包 等分類名稱 (*)2. 點選全部商品時, 商品介紹區中應呈現素材檔所提供之 8 件商品, 各商品應包含 圖示 商品名稱 價錢 規格 與 簡介 內容以及 我要購買 按鈕, 我要購買 按鈕應使用素材檔 0402.jpg (*)4. 滑鼠移動至大分類名稱時應出現該大分類之中分類名稱 (*)5. 點選分類商品時, 商品介紹區僅出現該分類商品, 頁面應呈現 圖示 商品名稱 價錢 規格 與 簡介 內容以及 我要購買 按鈕 (*)6. 點選商品介紹區之商品圖片時, 出現該商品之詳細介紹頁面, 應包含 商品名稱 商品縮圖 分類 編號 價錢 詳細說明 庫存量 購買數量 我要購買 按鈕與 返回 按鈕 65

68 圖 7 商品介紹區內容之完成參考圖 圖 8 商品介紹區詳細介紹畫面完成參考圖 ( 五 ) 建置商品介紹區 ( 如圖 9~12) 透過後台管理頁面之商品分類與管理功能 ( 參見右圖 ) 設定商品分類與商品管理, 結果並顯示於商品介紹區中, 其功能包括 : (*)1. 商品分類 功能應提供 新增大類 與 新增中類 功能, 並可對原分類作 修改 及 刪除 動作 (*)2. 新增大類 功能提供管理者新增商品之大類名稱 (*)3. 新增中類 功能提供管理者新增商品之中類名稱 (*)4. 修改 功能提供修改大類或中類之分類名稱 66

69 (*)5. 刪除 功能提供刪除大類或中類之分類名稱 (*)6. 商品管理 功能應提供 新增商品 功能, 並呈現商場中所有商品之編號 商品名稱 庫存量及狀態等內容, 以及 修改 刪除 上架 與 下架 功能 (*)7. 新增商品 功能提供新增商品之詳細內容, 包含所屬大類 所屬中類 商品編號 商品名稱 商品價格 規格 庫存量 商品圖片( 請使用素材檔 0403.jpg ~ 0410.jpg) 及商品介紹 (*)8. 修改 功能提供修改商品之詳細內容, 包含所屬大類 所屬中類 商品編號 商品名稱 商品價格 規格 庫存量 商品圖片及商品介紹 (*)9. 刪除 功能提供刪除該商品 (*)10. 上架 功能提供該商品出現在銷售商品中, 且狀態欄位呈現 販售中 (*)11. 下架 功能提供設定該商品不出現在銷售商品中, 且狀態欄位呈現 已下架 圖 9 產品分類功能之完成參考圖 圖 10 商品管理功能之完成參考圖 67

70 圖 11 新增商品功能之完成參考圖 圖 12 修改商品功能之完成參考圖 ( 六 ) 建置最新消息區 ( 如圖 13~14) (*)1. 最新消息區應以跑馬燈方式輪撥 2 則最新消息之標題 消息內容由素材檔 0402.txt 所提供 (*)2. 點選最新消息時, 應於商品介紹區顯示 2 則最新消息之標題 68

71 圖 13 點選前台頁面之最新消息時呈現標題之完成參考圖 圖 14 點選最新消息呈現詳細內容之完成參考圖 ( 七 ) 建置購物功能 ( 如圖 15~19) 設定會員註冊 登入與建置購物車之各項功能, 內容包含 : (*)1. 點選商品介紹區 我要購買 按鈕後, 會出現 第一次購物 與 會員登入 選項頁面, 點選 按此註冊 按鈕可進入會員註冊頁面, 按此註冊 按鈕應使用素材檔 0413.jpg (*)2. 會員註冊 頁面應提供 姓名 帳號 密碼 電話 住址 與 電子信箱 等資料, 並提供 檢測帳號 功能由後台檢測該帳號是否已存在 ; 但不得使用 admin 作為帳號註冊 (*)3. 會員註冊成功後, 後台資料庫應自動產生該筆會員資料 (*)4. 會員登入 需輸入會員帳號密碼與驗證碼等資料, 驗證碼由系統亂數產生兩位數字作加法運算, 若正確則進行下一步驟 (*)5. 會員登入成功後, 應進入網站首頁 ; 並可在購物車中查看已購買之商品, 購物車應呈現會員帳號並提供 編號 商品名稱 數量 69

72 庫存量 單價 小計 資訊與 刪除 按鈕, 並提供 繼續選購商品 與 進入結帳櫃檯 按鈕 (*)6. 點選 繼續選購商品 按鈕後, 可回到網站首頁繼續選購其他商品, 繼續選購商品 按鈕應使用素材檔 0411.jpg (*)7. 點選 進入結帳櫃檯 按鈕後, 畫面出現會員資料內容與已訂購之商品資訊, 並提供 確定送出 與 返回修改訂單 按鈕, 進入結帳櫃檯 按鈕應使用素材檔 0412.jpg (*)8. 點選 確定送出 按鈕後, 出現訂購成功訊息, 並將訂購資訊傳送至後台資料庫 (*)9. 點選 返回修改訂單 按鈕後, 則回到購物車的畫面 圖 15 會員登入頁面完成參考圖 圖 16 會員註冊畫面完成參考圖 70

73 圖 17 購物車完成參考圖 圖 18 訂購資料填寫及確認頁面 圖 19 訂購成功訊息提示 ( 八 ) 建置訂單管理功能 ( 如圖 20~21) 透過後台管理頁面之訂單管理功能 ( 參見右圖 ) 設定維護訂單資料, 其功能包括 : (*)1. 訂單管理 應呈現資料庫中已建立之訂單, 包含訂單編號 金額 會員帳號 姓名及下單時間, 並提供 刪除 訂單之功能 (*)2. 點選 刪除 可刪除該筆訂單 71

74 (*)3. 點選訂單編號後, 可查詢該筆訂單之詳細資料, 包含會員帳號 姓名 電子信箱 聯絡地址與聯絡電話等資料, 並呈現商品名稱 編號 數量 單價 小計及總價 ; 點選 返回 按鈕後, 可回到 訂單管理 頁面 (*)4. 訂單編號是當購物車確定送出後產生, 共計 14 位數字, 前 8 位是該筆訂單產生之日期 (yyyymmdd), 後 6 位由應檢人自訂 圖 20 訂單管理頁面完成參考圖 圖 21 商品查詢結果頁面完成參考圖 ( 九 ) 建置會員管理功能 ( 如圖 22~23) 透過後台管理頁面之會員管理功能 ( 參見右圖 ) 設定維護會員資料, 其功能包括 : (*)1. 會員管理 應呈現資料庫中之會員資料, 包括姓名 會員帳號 註冊日期等資料, 並提供 修改 與 刪除 會員資料之功能 (*)2. 點選 修改 可編輯會員資料, 包括姓名 電子信箱 地址及電話等資料 (*)3. 點選 刪除 可刪除該會員資料 72

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

76 圖 24 管理登入頁面完成參考圖 圖 25 登入資料錯誤之訊息提示框完成參考圖 圖 26 後台管理頁面完成參考圖 圖 27 新增管理帳號頁面完成參考圖 74

77 圖 28 修改管理員權限頁面完成參考圖 ( 十一 ) 建置頁尾版權區 ( 如圖 29~30) 透過後台管理頁面之頁尾版權區管理功能 ( 參見右圖 ) 設定維護頁尾版權區, 其功能包括 : (*)1. 頁尾版權區提供 編輯 及 重置 功能 (*)2. 管理人員可編修原頁尾宣告內容 (*)3. 點選 編輯 按鈕後, 頁尾版權區內容應修改成該筆內容, 且前台頁尾版權區內容應同步更新 (*)4. 點選 重置 按鈕後清除輸入欄位之所有內容 圖 29 頁尾版權區管理功能完成參考圖 圖 30 前台頁尾版權區頁面 ( 十二 ) 資料備份 評分前, 將製作完成之結果及相關檔案備份至 工作崗位 + 姓名 資料夾 ( 自 75

78 行新增 ), 並存入檢定用之隨身碟中, 若應檢人未依規定備份資料, 將視為重大缺失, 以不及格論 備份內容如下 : 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. 其它備份 : 請自行依主文件目錄 環境設定檔 資料庫及其它相關資料進行備份, 其事後須能還原正常運作 ; 若無法還原正常運作, 則應檢人須自行承擔風險 76