1
第 52 屆全國技能競賽分區技能競賽
競賽試題
職類名稱：17 網頁設計職類
注意事項
1. 選手不得攜帶其他軟硬體參賽 (包含鍵盤及滑鼠)。
2. 大會將提供 XAMPP 安裝檔，競賽時再由選手自行安裝及設定，
包含 web server 及資料庫，因此請選手務必熟悉其安裝及設定之 方法。
3. 若有同分時，名次之比較依據下列之方式依序比較：(1)先依照題 目模組項目之總得分，由後到前，例如「模組項目 5，4，3，2，1」
之得分高低來比序，(2)再依照評分項目之編號，由後到前之每一 評分項目得分比較，例如 30，29，28，….，2，1 之每一評分項目 得分比較；(3)若還是無法分出名次時；則額外再增加主觀評分項 目「系統整體操作順暢度及整體表現」來評出名次。
4.
注意事項：
1. 每一「工作崗位」的電腦皆配置一個隨身碟，內有一個「參考資 料」資料夾，作答時可參考使用此資料夾內的資料。
2. 請每位選手依 web+「考場工作崗位號碼」在桌面建立一個資料夾 (例如 web01, web02)，用來存放作答的資料。
3. 網站首頁請設定為 index.php 或 index.htm，並製作超連結，連結到 各題之作答結果，且將 Internet Explorer 的首頁設定為
http://localhost/。但實際以競賽評分要求為主。
4. 作答期間，若是資料庫或是網頁需設定帳號密碼時，帳號設定為 admin，密碼設定為 1234，若未依規定將被扣分。
5. 競賽相關資料於競賽後，全部收回大會保管，包括競賽場地提供 的空白紙，試題、評分表、資料片等，請勿將任何資料攜帶出考 試場外。
6. 每一「評分項目」的前面，皆有標明「主」or「客」 代表「主觀
2 評分」or 「客觀評分」。
7. 其他注意事項：
(a) 請參考評分表作答。
(b) 除非題目中特別說明，否則表單無須檢查資料是否有誤，或是 有沒有填寫。
(c) 除非題目中特別說明要評量美工之設計分數，否則評分重點在 於功能是否完成，與畫面之美工無關。
(d) 請隨時將設計好之網頁、圖片及資料庫等儲存至隨身碟中，以 避免當機等意外情形發生。
(e) 比賽結束前請將作答之整個資料夾複製到隨身碟中。若成績產 生爭議時，將以此隨身碟中之結果為依據。
(f)
比賽結束時間一到，選手不可以再操作電腦，若因此未能將最 新之答案存入隨身碟及桌面評分資料夾內，導致成績產生問題，
選手須自負一切責任。
(g)
比賽結束時，請勿關機，以利評分作業之進行。
3
第 52 屆全國技能競賽分區技能競賽
競賽試題(說明)
職類名稱：17 網頁設計 第____頁，共 頁
1、LOGO 設計(14%)
請設計「TODO 工作管理系統」的彩色標誌 LOGO，LOGO 設計圖除標誌圖形外，
需包含文字「TODO」(大小寫不拘)在 LOGO 內，並將設計之標誌置於 A4 直式文 件上方二分之一處，下方須有至少 30 個字之設計理念說明，版面配置如下圖。
圖 1 LOGO 版面配置示意圖
項 次
主 客
配 分
得
分 工作項目及評分說明
1. 客 2 文件版面是否為 A4 直式，上方內容為 LOGO，下方為 設計理念說明。
建立 1 個目錄，命名為 01，將作答成果檔存在 01 目錄 下，存檔為「A01_工作崗位號碼.docx」(Word 格式)，並 將 LOGO 之原始設計可編輯檔存放在 01/source 目錄下。
4
2. 客 2 LOGO 標誌圖須包含文字「TODO」(大小寫不拘) 3. 主 2 LOGO 整體造型設計技法水準。
4. 主 2 LOGO 整體色彩設計表現水準。
5. 主 4 LOGO 圖案表現是否符合工作管理系統的意象。
設計理念說明切合主題。
TODO 工作管理系統
請設計一個「TODO 工作管理系統」，系統包含之前台及後台，前台包含工作管 理系統相的功能，例如，工作新增、刪除、修改、進度追蹤、及檢視等功能；後 台包含管理相關的功能，例如，會員新增、刪除、修改、權限修改、登入驗證、
及登入登出紀錄功能等。
2、
TODO 工作管理系統--會員網站前台登入模組
(26%)請設計一個會員網站前台登入模組, 使用者登入驗證頁面(參考畫面如圖 2所示)，包 含輸入帳號及密碼的欄位，並提供圖形驗證功能。功能要求，請看評分細項，說明 如下：
圖 2登入驗證頁面
5
項 次
主 客
配 分
得
分 工作項目及評分說明
6. 客 2 建立一個「網站前台登入頁面」，網頁包含你所設計的 logo 圖案，頁面命名為 index.html/ index.htm 或 index.php。
7. 客 4 「網站前台登入頁面」，以圖2所包含的元素為主，頁面內至 少有12個元素，包含說明及輸入帳號、密碼、圖形驗證碼、及 按鈕等。
每少一欄位扣1分
不用檢查驗證碼圖片是如何產生的
8. 客 2 預設使用者帳號是:todo，密碼是:1234。可以執行帳號及密碼的 驗證，驗證成功就顯示成功登入的訊息，否則顯示錯誤的訊息。
(本項目，不檢測圖形驗證功能是否正確) (由前端程式或伺服器 端程式驗證帳號及密碼皆可)。
9. 客 4 若能產生圖形驗證功能的驗證碼是以圖片顯示，圖片需只包含 3個英文字母小寫的圖片，圖片驗證碼必須是由SERVER端產生 的。
10. 客 6 能夠成功進行圖形驗證。
圖形驗證的方式用下列之一種方式驗證，依訊息指示輸入/拖拉 到指定區域，依指定順序排列出來(由大到小或由小到大排列，
亂數產生)：(二項選其中一項，得分不一樣) (1)以輸入文字方式來回答。 (得2分)
(2)使用互動用拖拉的方式來回答，頁面顯示3張文字圖片，並 依訊息指示拖拉到另外一區。(得6分)
11. 客 2 若輸入的帳號、密碼、或圖形驗證碼有誤，則顯示錯誤的訊息，
且訊息的內容能分別指出錯誤的類型，包含：
**帳號有誤、密碼有誤(得1分)。
**若也能分辦出圖形驗證碼有誤 (得1分) 。
12. 客 2 登入若連續錯誤3次，則自動切換到「登入失敗」的頁面，頁 面內容顯示連續誤錯3次的訊息。
13. 客 2 點擊「重新產生」按鈕時，會更換新驗證碼圖片。
14. 客 2 點擊「清除」按鈕時，會清除所有欄位的內容。包含拖拉的區 域。
6
3、TODO 工作管理系統--會員網站後台管理模組(28%)
延續前一個模組，請設計一個會員網站後台管理模組，包含會員新增、刪除、修改、
權限修改、登入驗證、及登入登出紀錄功能等。功能說明請依評分項說明。
項 次
主 客
配 分
得
分 工作項目及評分說明
15. 客 2 *預設在資料庫內，建立1個管理者帳號「admin」, 密碼
「1234」、姓名「超級管理者」，權限「管理者」。
*以管理者帳號登入系統後：
能新增使用者帳號，包含帳號、密碼、姓名、及權限，並能在 前台成功登入。使用者權限分「一般使用者」及「管理者」。
16. 客 4 新增使用者帳號時，系統會自動產生一個「編號」，「編號」
是唯一號碼，每一使用者皆不一樣，是以流水號的方式產生，
共4碼從001開始。每新增一個使用者，「編號」為前一個新增 使用者再加1，「一般使用者」及「管理者」分別計算。「一 般使用者」編號為u001開始，「管理者」編號為a001開始，管 理者帳號「admin」的「編號」為a001。預設使用者帳號「todo」
的「編號」為u001。
***新增「一般使用者」帳號功能正確 (2分)
***新增「管理者」帳號功能正確 (2分)
17. 客 2 以管理者帳號登入系統後，能進入後台管理畫面，畫面標題需 為「管理者專區」的文字出現。
以一般使用者帳號登入系統後，能進入會員的畫面頁面，畫面 標題需為「一般會員專區」的文字出現。
18. 客 2 以管理者帳號登入系統後：
能修改使用者帳號資料，包含帳號、密碼、及姓名，並能在前 台成功登入，但不能修改使用者「編號」。
19. 客 2 但不能修改超級管理者「admin」管理者帳號的資料。
20. 客 2 以管理者帳號登入系統後：
能以關鍵字查尋所有使用者帳號資料，並能以使用者「編號」
升冪的排序方式呈現。每一筆資料包含使用者編號、帳號、密 碼、姓名、及權限。
21. 客 2 能以關鍵字查尋所有使用者帳號資料，並能選擇以帳號、姓名 或使用者編號」及「升冪或降冪」的排序方式呈現。
7
22. 客 2 以管理者帳號登入系統後：
能刪除使用者帳號資料，包含「一般使用者」及「管理者」。
23. 客 2 但不能刪除超級管理者「admin」管理者的帳號。
24. 客 2 刪除一位使用者後，「使用者編號」不可再重複使用。若再新 增一位使用者時，不可再重複再使用先前被刪使用者的「編 號」。
25. 客 2 系統具有登入登出紀錄功能，管理者身份的使用者可以檢視紀 錄資料。
紀錄資料包含，使用者的編號，帳號，登入時間、登出時間及 動作行為。
動作行為，至少分為，登入失敗、登入成功。
若因登入失敗，則登出時間紀錄為「null」.
26. 客 4 動作行為，若能再記錄登入系統後，對系統操作的動作及該動 作操作時的時間，至少能紀錄3種不同操作動作。
4、TODO 工作管理系統--基本功能(24%)
請設計一個人「TODO 工作管理系統」系統，功能如下：
設計一個「TODO 工作表」頁面，當使用者登入系統後，能顯示當天「TODO 工作表」頁面，
包含一天的工作項目，時間從每日的 00:00~24:00，每一工作項目至少包含工作名稱、開始時 間及結束時間、處理狀態、優先順序等訊息。。
系統功能簡述如下，系統細詳功能要求如評分項所示，以評分項目的說明為主：
能新增一個工作項目，至少包含工作名稱、開始時間、結束時間、處理情形、優先情形 及工作內容等
能修改一個工作項目，至少包含工作名稱、開始時間、結束時間、處理情形、優先情形 及工作內容等
能刪除一個工作項目。
能排序全天的工作項目。
能設定條件來篩選工作項目，呈現符合條件的工作項目。
進階要求：
頁面是以表格方式呈現，有時間軸的概念，由上到下以 2 小時為單位，來畫分時間 區間。
並將一天的所有工作項目，每一工作項目以一個工作區塊的方式，底色使用不同顏 色來填入到表格中。並能依時間長短依比例呈現不同大小。
工作時間以半小時為最小單位。
在單一時間區間，包含多個工作項目時，若時間不同時，會由上到下呈現；若不同
8
工作項目有時間重疊時，會由左到右呈現，在畫面上的工作區塊呈現時，不可重疊。
同一個時間區間的多個工作項目時，不會將該時間區間高度變大。
能運用拖拉的方式來修改工作項目。
「TODO 工作表」畫面參考介面如圖 3 所示，說明如下：
A 區：標題。
B 區：時間軸，每天可提供設定的時間區段為 00~24 時，每個小區塊之時間區間為
「2 個小時」。
C 區：工作列表區。
D 區：一個工作項目範例，內容包含開始時間及結束時間、工作名稱、處理情形、
優先情形等。
圖 3 日工作計畫表畫面參考介面
新增/修改工作項目說明及參考畫面如圖 4 所示：
a.標題：以「工作編輯」字串，為表單之標題。
b.工作名稱：表示工作計畫的項目名稱。
c.處理情形：以下拉式選單顯示「未處理」、「處理中」、「已完成」等三個選項，表 示工作計畫項目目前的處理情形。
d.優先情形：以下拉式選單顯示「普通件」、「速件」、「最速件」等三個選項，表示 工作計畫項目處理時的急迫性。
e.開始時間：表示工作計畫項目的開始時間，以半小時為單位。
f.結束時間：表示工作計畫項目的結束時間，以半小時為單位。
g.工作內容：表示工作計畫項目的工作內容說明。
9
圖 4 新增/修改參考畫面
項 次
主 客
配 分
得分 工作項目及評分說明
27. 客 2 設計一個「「TODO 工作表」頁面.
當使用者登入系統後，能顯示當天「TODO 工作表」頁面，包含一天 的工作項目，時間從每日的 00:00~24:00，每一工作項目至少包含工作 名稱、開始時間及結束時間、處理狀態、優先順序及及工作內容等訊 息。
28. 客 2 若設計的頁面是以表格方式呈現，有時間軸的概念，由上到下以 2 小 時為單位，來呈現時間區間格線，並將一天的所有工作項目，每一工 作項目以一個工作區塊的方式，填入到表格中。
29. 客 2
呈現時間區間格線時，時間區間以 2 種底色交互呈現。
30. 客 2 每一個工作區塊，用與底色不同顏色來填入到表格中。並能依時間長 短依比例呈現不同大小。
31. 客 2 一個工作項目，是以半小時為最小計算單位。能新增一個工作項目，
至少包含工作名稱、開始時間、結束時間、處理情形、優先情形及工 作內容等。
32. 客 2 能修改一個工作項目，至少包含工作名稱、開始時間、結束時間、處 理情形、優先情形及工作內容等
33. 客 2 能刪除一個工作項目，在執行刪除動作前，必須有確認的動作。
34. 客 2 能排序當天的所有工作項目，可依開始時間、處理情形、或優先情形 3 種方式來排序，依升冪或降冪來排序。
排序的結果是在新的頁面或原來的頁面呈現皆可。
10
35. 客 2 能依檢索篩選的條件，列出當天所有符合檢索篩選條件的工作項目，
可依處理情形、或優先情形 2 種方式來設定檢索條件，符合相同篩選 條件的工作項目，並依工作「開始時間」升冪或降冪來排序，列出升 冪或降冪的選項。
檢索的結果可在新的頁面或原來的頁面呈現皆可。
36. 客 6 能運用拖拉的方式，來修改工作項目的時間。
拖拉「工作項目」方塊的位置，就能改變工作項目的時間，拖拉動作 完成後，變動的時間能及時呈現在「工作項目」上。
5、TODO 工作管理系統--進階功能(28%)
延續前一模組，請將「TODO 工作表」以表格方式呈現，並以拖曳方式來操作，功能說明如 下：
系統拖曳操作方式說明：
當滑鼠游標於 C 區任何一個工作項目區塊中「按下左鍵」並進行拖曳時，在 C 區畫面上
「工作項目區塊」會即時顯示拖曳中之工作項目之「起始及結束時間」，如圖 5 所示。
當跨越時間軸區間時(以「工作項目區塊」的最上方為參考點)，拖曳中之工作項目之「起 始及結束時間」會即時更改為所橫跨的時間區間。(不需考慮工作計畫項目重疊之問題)，
當滑鼠左鍵按放開時，該「工作項目」之「起始及結束時間」會更改為最後所橫跨的時 間區間的時間，並呈現在該時間區間。
圖 5 系統拖拉操作示意圖
「TODO 工作表」上有新增的按鈕，當滑鼠按新增按鈕時，可新增一工作計畫項目。
11
「TODO 工作表」上的每一「工作項目」上有編輯按鈕，當滑鼠點選某一「工作項目」
區塊時，滑鼠再按編輯按鈕時，會秀出一個「工作項目」編輯表單，如圖 6 所示，讓使 用者編輯該工作計畫項目的內容。
圖 6 編輯工作計畫項目示意圖
「TODO 工作表」上的每一「工作項目」上有預覽按鈕，當滑鼠點選某一「工作項目」
區塊時，滑鼠再按預覽按鈕時，可預覽該工作計畫項目之詳細內容。
「TODO 工作表」能切換日期。
37. 客 4 若設計的頁面是以表格方式呈現：
能使用滑鼠在「TODO 工作表」中拖曳「工作項目」區塊來改變開始 時間，不管由上往下，或者由下往上拖曳時，「工作項目」區塊能隨 著拖曳時所橫跨的時間區間正確顯示。(以「工作項目區塊」的最上方 為參考點)
拖曳時, 時間變動單位為 0.5 小時
僅能正常顯示「由上往下拖曳」或者「由下往上拖曳」其中之一 者不給分。
38. 客 2 能使用滑鼠在「TODO 工作表」中空白處拖曳及放開後，能新增「工 作項目」。
12
39. 客 2 若設計的頁面是以表格方式呈現：
「TODO 工作表」上的每一「工作項目」上有編輯按鈕，當滑鼠點選 某一「工作項目」區塊時，滑鼠再按編輯按鈕時，會秀出一個「工作 項目」編輯表單，如圖 6 所示，讓使用者編輯該工作計畫項目的內容。
40. 客 2 當使用者編修完畢後，該「TODO 工作表」之內容必須正確更新。
41. 客 2 使用者若有修改「開始時間」與「結束時間」，該工作計畫項目所橫 跨的時間區間也會跟著進行變更。
42. 客 2 若設計的頁面是以表格方式呈現：
「TODO 工作表」上的每一「工作項目」上有預覽按鈕，當滑鼠點選 某一「工作項目」區塊時，滑鼠再按預覽按鈕時，可預覽該工作計畫 項目之詳細內容。
43. 客 4 「TODO 工作表」能切換日期，編輯不同的日期的「工作項目」。
**檢測時，會檢測當天，及前後 3 天，是否能正常新增、修改、刪除
「工作項目」。
44. 客 4 能依檢索篩選的條件，列出所有(系統內多天的內容)符合檢索篩選條 件的工作項目，可依處理情形、及優先情形 2 種方式來設定檢索條件，
符合相同篩選條件的工作項目，並依工作「開始時間」升冪或降冪來 排序，列出升冪或降冪的選項。
檢索的結果可在新的頁面或原來的頁面呈現皆可。
45. 主 6 「TODO 工作表」能切換日期，編輯不同的日期的「工作項目」。
**針對系統能切換日期後，檢測人機介面設計，及系統功能的操作的 順暢度及功能完整性。
