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 工作表」能切換日期,編輯不同的日期的「工作項目」。
**針對系統能切換日期後,檢測人機介面設計,及系統功能的操作的 順暢度及功能完整性。