網頁設計技能競賽及選手訓練
孔崇旭
全國技能競賽 網頁設計 裁判長
國立台中教育大學 資訊科學系
技能競賽精神
國際賽
國際賽
• 網頁設計職類是因應產業界變遷的需求，近年來新增的職種
• 第36屆(2001年)在韓國斧山舉辦示範賽(Demonstration)
• 第37(2003年)屆在瑞士聖嘉倫舉辦表演賽(Presentation)
• 第38屆(2005年)在芬蘭赫爾辛基正式舉辦第一次世界賽
• 第39屆(2007年)在日本靜岡舉辦第二次世界賽
• 我國選手參賽經驗
– 第一次世界賽(38屆，2005)未獲獎項，
– 第二次世界賽(39屆，2007)獲得優勝獎項，
– 成績是在進步中，我國人員實際參與本職種的活動，只有第一次世
界賽及第一次世界賽兩次比賽活動，實際經驗不多
屆別/
年別/
地點
第38屆2005年芬蘭赫爾辛基 第39屆2007年日本靜岡
參賽 人數
16位 19位
國別 結果 獎牌
/名 次
國別 結果 獎牌/名次
澳洲 538 金牌 韓國 554 金牌
加拿大 537 金牌 澳門 527 銀牌
新加坡 525 銅牌 加拿大 527 銀牌
澳門 524 銅牌 巴西 525 銀牌
伊朗 521 優勝 瑞士 519 優勝
沙烏地阿拉伯 521 優勝 瑞典 519 優勝
德國 515 優勝 荷蘭 516 優勝
紐西蘭 510 優勝 新加坡 514 優勝
芬蘭 510 優勝 澳洲 511 優勝
瑞士 499 10 台灣 510 優勝
韓國 492 11 泰國 500 優勝
台灣 485 12 伊朗 494 12
馬來西亞 475 13 牙買加 493 13
牙買加 467 14 印尼 491 14
葡萄牙 452 15 日本 488 15
參賽
成績
(前15名)
1.試 題特 性
網頁設計職類的試題，為公開試題，正 式比賽時再修正 30%，試題為模組試 題，每天必須完成一個模組，若提前完 成，可提前往下一個模組進行，比賽時 選手可看到題目及評分表，題目著重在 網頁程式設計，特別是網站內容管理系 統(CMS)，再補以美術設計。
各國選手合
前 30 分與裁判長討論時才可看到評 分表，在作答時看不到評分表，題目 著重在網站企畫，美術設計、美術版 面及基本網頁排版設計，網站內容管 理系統(CMS)不難，考題有加重美術設 計的趨勢。
網頁設計職類的試題，為公開試題，
正式比賽時再修正 30%，試題為模組 試題，每天必須完成一個模組，若提 前完成，可提前往下一個模組進行，
比賽時選手只可看到題目，每次比賽
參賽選手與作品
台灣選手作品
第38屆2005年芬蘭赫爾辛基 第39屆2007年日本靜岡
2 . 競 賽 設 備 及 比 賽 方 式
競 賽 設 備 主 要 是 個 人 電 腦 一 部 ， 每 位 選 手 有 有 一 個 獨 立 的 空 間 及 電 腦 使 用 ， 選 手 可 自 備 鍵 盤 ， 但 滑 鼠 不 允 許 自 備 。 在 大 會 競 賽 期 間 ， 各 國 裁 判 長 不 可 與 選 手 接 觸 。 比 賽 時 ， 選 手 分 A . 、 B 兩 組 ， 每 一 位 選 手 ， 比 賽 時 間 為 每 天 半 天 ， A . B 分 為 早 上 及 下 午 輪 流 比 賽 作 答 ， 當 其 中 一 組 比 賽 時 ， 另 一 組 選 手 則 排 班 在 展 示 攤 位 作 展 示，輪 到 排 班 之 選 手 一 定 到 ， 否 則 展 示 的 分 數 就 得 不 到 。
大 會 競 賽 場 地
台 灣 選 手 競 賽 場 地
競 賽 設 備 主 要 是 個 人 電 腦 一 部 ， 每 位 選 手 有 有 一 個 獨 立 的 空 間 及 電 腦 使 用 ， 選 手 可 自 備 鍵 盤 ， 但 滑 鼠 不 允 許 自 備 。 在 大 會 競 賽 期 間 ， 各 國 裁 判 長 不 可 與 選 手 接 觸 ， 但 時 增 加 了 公 開 場 合 裁 判 長 與 選 手 接 獨 時 間 ， 在 比 賽 前 一 天 ， 選 手 在 檢 查 場 地 設 備 時 ， 有 一 小 時 時 間 ， 裁 判 長 可 與 選 手 講 解 題 目 及 評 分 表，每 天 比 賽 前 3 0 分 及 比 賽 結 束 後 3 0 分 ， 裁 判 長 可 與 選 手 討 論 。 比 賽 時 ， 選 手 分 A . 、 B 兩 組 ， 每 一 位 選 手 ， 比 賽 時 間 為 每 天 半 天 ， A . B 分 為 早 上 及 下 午 輪 流 比 賽 作 答 ， 當 其 中 一 組 比 賽 時 ， 另 一 組 選 手 則 排 班 在 展 示 攤 位 作 展 示 ， 輪 到 排 班 之 選 手 一 定 到 ， 否 則 展 示 的 分 數 就 得 不 到 。
大 會 競 賽 場 地
台 灣 選 手 競 賽 場 地
第38屆2005年芬蘭赫爾辛基 第39屆2007年日本靜岡
3.選 手 特性
網頁設計職類為新的競賽職種，目前各 國選手實力勢均力敵，但實力都很堅 強，選手的穩定度及熟練度為關鍵因 素。
各國選手合
網頁設計職類為新的競賽職種，目前 各國選手實力勢均力敵，但實力都很 堅強，選手的穩定度、熟練度、作答 速度及細心度為關鍵因素。且各國選 手準備時間都非常的久，特別是金牌 及銀牌選手(韓國及澳門)皆是長期專 門訓練及嚴格訓練方式，所以選手的 穩定度、熟練度、作答速度及細心度 都是非常好。本國選手的美術方面作 答速度及整體的細心度有需要加強。
各國選手合影
第38屆2005年芬蘭赫爾辛基 第39屆2007年日本靜岡
4.訓 練 環境
訓練地點主要在高雄海青高級職 業學校。
訓練地點主要在國立台中教育 大學訊系科學系，
平時有多次的模擬賽。
正式模擬賽則在37屆全國技能 競賽時配合舉行。
5.訓 練 老師
主要訓練老師為高雄海青高級職 業學校的老師。
協助老師有國立台中教育大學孔 崇旭老師、國立彰化師範大 學伍朝欽老師及國立彰化師 範大學陳冠君老師。
主要訓練老師為國立台中教育 大學孔崇旭老師。
協助老師有國立彰化師範大學 伍朝欽老師及朝陽科技大學 侯純純老師。
6.裁 判 長
裁判長為伍朝欽，負責加強技術 訓練計畫、模擬測驗命題及 約每隔月1次訪視、檢討及技 術指導。
裁判長為伍朝欽，負責加強技 術訓練計畫、模擬測驗命題 及約每隔月1次訪視、檢討及 技術指導。
第39屆2007年日本靜岡
第38屆2005年芬蘭赫爾辛基 第39屆2007年日本靜岡
第38屆2005年芬蘭赫爾辛基
國內賽
• 分區賽- 約選5名參加全國賽(上半年度5、6月)
• 全國賽- (下半年度，約9、10月)
– 參賽選手15約名 + 高中全國技藝競賽前3名 – 每二年選拔國手一次
– 選拔國手那一年，全國賽與選拔國手競賽合併同時舉 辦
– 前一屆(歷屆?，前三名?待查)選手可參加競選國手
• 今年是國內第38屆技能競賽
– 同時選拔第40屆國際技能競賽國手
網頁設計職類技術規範
技術規範
• Technical Description(TD)
(全國技能競賽職類技術說明網頁設計職類技 術說明及技能範圍)
• 要與國際技能競賽接軌，以國際技能競賽
的TD為主要的參考依據
技術規範 - 技術說明
職類名稱與說明
– 職類名稱：網頁設計（Web Design）
– 職類說明：網頁設計職類包括將網頁文件資訊發佈到網路上所需的技術，包含網 站企畫、網頁設計、網站建構等技能。
每一位裁判人員及選手都必須熟悉這一份職類技能說明內容。
競賽技能範圍
競賽項目以實際操作為主，而所運用到的理論知識以與實際操作有關的範圍為主。
實際操作項目
• 選手必須能獨立進行網站規畫、網頁版面設計及撰寫網頁程式碼，以完成競 賽所要求的項目。
客戶端的程式撰寫(Client side coding) – 包含下列功能 :
– 能使用HTML，DHTML，JavaScript，XHTML，XML等技術來設計一個網站。
– 能利用CSS產生一致性的文件
– 能在兩個不同的瀏覽器(最新穩定版本的微軟IE瀏覽器及Firefox 瀏覽器)上及不同的螢幕解析度上 呈現
– 產生的程式碼能符合W3C標準規範 (http://www.w3.org)
技術規範 - 技術說明
圖片(Image)
– 能運用圖片到網頁上及編輯圖片。
– 為了發佈到網路上而能對圖片做最佳化處理。
– 能利用多種影像處理軟體建立圖片
– 能利用多種影像處理軟體切割圖片
動畫(Moving image)
– 能修改並最佳化動畫以符合網頁製作的格式
– 能設計動畫的網頁版面
– 能實作或運用即時的串流技術( real-time streaming)
– 能建立網頁動畫來表達訴求的主題和視覺效果。
伺服器端的程式撰寫(Server Side Programming)
– 能在伺服器端安裝PHP及MySql Script
– 能撰寫PHP及MySql的應用程式，例如CMS(Content Management System)，
web database的應用程式
網站規畫(Planning)
– 能運用手寫稿或數位文件來規畫建制一個網站的企畫案及工作流程 – 能運用簡略圖形、分鏡圖及流程圖來描述設計的理念
– 競賽模組：將一個競賽主題網站，切割成數個小模組，稱之「競賽模組」，在
比賽期間，每天完成一個競賽模組
技術規範 - 理論知識
理論知識
• 主要是以設計一個Web網站所需要的理論 知識為主，包含下的相關理論知識
– 畫圖，影像處理，動畫製作，聲音處理運用，
– 客戶端及伺服器端程式撰寫(網頁程式設計、
– PHP程式設計及
– MySql資料庫程式設計，
– 版面的美觀設計等。
試題設計要求
競賽試題的要求
• 競賽試題設計原則為：
1. 模組化
2. 符合本技術說明
3. 配合競賽大會的相關規定
4. 需以本件1.3節描述的「實際操作項目」為主要參考依據，但不以此為限 5. 需能配合承辦單位能提供之場地、設備
• 選手必須在15~22小時競賽時間內完成3~4個模組試題，每個模組施作時間，
均依試題之難易度分配時間。
• 所有試題文件內容應包括試題說明、注意事項及評分表。
• 試題設計時能多樣性，並能符合下列的原則：
1. 創造力，企畫能力，
2. 網頁的基本觀念，設計元素的應用，版面的佈局，
3. 圖片，動畫，影片的應用
4. 資訊出現在網頁上的適當、使用者易於使用、容易瀏覽、容易找到資訊及容易觀
看(對視覺受損的人)
S k ill ID 1 7
O b je c tiv e M a rk in g 客 觀 分 數
F o rm 5
W E B D E S IG N
P a g e 2 o f 2 C rite rio n ID D
C o m p e tito r ID C o m p e tito r N a m e M e m b e r
C rite rio n C M S / F IN A L E V A L IA T IO N
A s p e c t ID
M a x M a rk
A s p e c t o f C rite rio n - D e s c rip tio n R e q u ire m e n t o r N o m in a l S iz e
R e s u lt o r A c tu a l V a lu e
M a rk A w a rd e d 1 7 0 .2 5
C M S – A d d ite m s in th e m e n u
C M S － 在 選 單 系 統 中 可 以 加 入 主 選 單 項 目 (ite m s )
1 8 0 .2 5
C M S – D e le te ite m s in th e m e n u C M S － 在 選 單 系 統 中 可 以 刪 除 主 選 單 項 目 (ite m s )
1 9 0 .5 0
C M S – M o d ify ite m s in th e m e n u C M S － 在 選 單 系 統 中 可 以 修 改 主 選 單 項 目 (ite m s )
2 0 0 .2 5
C M S – A d d ite m s in s u b m e n u
C M S － 在 選 單 系 統 中 可 以 加 入 次 選 單 項 目
(ite m s )
2 1 0 .2 5
C M S – D e le te ite m s in s u b m e n u C M S － 在 選 單 系 統 中 可 以 刪 除 次 選 單 項 目 (ite m s )
2 2 0 .5 0
C M S – M o d ify ite m s in s u b m e n u C M S － 在 選 單 系 統 中 可 以 修 改 次 選 單 項 目 (ite m s )
2 3 0 .5 0 S ite M a p d y n a m ic a lly lin k e d to m e n u
網 站 地 圖 與 選 單 系 統 動 態 地 連 結
2 4 0 .5 0 C M S – A d d p a g e s
C M S – 增 加 網 頁
2 5 0 .5 0 C M S – D e le te p a g e s
C M S – 刪 除 網 頁
2 6 1 .0 0 C M S – M o d ify p a g e s
C M S – 修 改 網 頁
2 7 0 .5 0 C M S – a d m in is tra to r c a n a d d a lu m n i
C M S – 管 埋 員 能 增 加 會 員 資 料
2 8 0 .5 0 C M S – a d m in is tra to r c a n d e le te a lu m n i
C M S – 管 埋 員 能 刪 除 會 員 資 料
2 9 1 .0 0
C M S – a d m in is tra to r c a n m o d ify a lu m n i in fo rm a tio n
C M S – 管 埋 員 能 修 改 會 員 資 料
3 0 0 .2 5
R e g is tra tio n – F o rm v a lid a tio n fo r a ll m a n d a to ry fie ld s (e rro r m e s s a g e )
註 冊 表 單 – 檢 查 表 單 是 否 所 有 必 要 項 目 都 已 填 寫 資 料 (顯 示 錯 誤 訊 息 )
3 1 0 .2 5
R e g is tra tio n – M is s in g fie ld s a re h ig h lig h te d (a fte r th e m e s s a g e )
註 冊 表 單 – 以 醒 目 的 方 式 顯 示 沒 有 填 寫 的 項 目 (於 錯 誤 訊 息 顯 示 後 )
3 2 0 .2 5
R e g is tra tio n – S u b m it a n d re s e t b u tto n a re w o rk in g
註 冊 表 單 – 確 認 (s u b m it)及 清 除 (re s e t)按 鈕 要 正 確 運 作
S k ill ID
1 7
S u b j e c t i v e M a r k i n g 主 觀 分 數
F o r m 5 A
W E B D E S I G N
P a g e 1 o f 1 C r it e r io n ID
D
C o m p e t it o r ID C o m p e t it o r N a m e M e m b e r
C r it e r io n C M S / F I N A L E V A L I A T I O N
E x p e r t S c o r e ( O u t o f 1 0 ) A s p e c t
I D
M a x M a r k
A s p e c t o f C r ite r io n - D e s c r ip t io n M a r k
A w a r d e d 1 1 .0 0 Is th e C M S in tu itiv e ?
C M S 管 理 介 面 是 否 直 觀 且 容 易 使 用 2 1 .0 0
Is th e w h o le w e b s ite in te r a c tiv ity in t u it iv e ?
整 個 網 站 之 瀏 覽 及 操 作 是 否 直 覺 且 具 高 互 動 性
3 1 .0 0
A p p r o p r ia te b a la n c e b e tw e e n im a g e s a n d te x t
圖 片 與 文 字 在 版 面 上 的 設 計 是 否 平 衡 適 當
4 1 .0 0
A r e g r a p h ic s a n d im a g e s u s e d a p p r o p r ia te ly th r o u g h th e c o n te n t?
圖 片 與 影 像 是 否 與 網 頁 內 容 搭 配 5 1 .0 0
U s e o f a n im a tio n e n h a n c e s th e w e b s ite a n d p r o m o te s th e W o r ld S k ills A lu m n i w e b s ite
動 畫 是 否 能 增 強 網 站 可 觀 性 及 推 廣 這 個 網 站
6 1 .0 0
Is th e u s e o f c o lo u r a p p r o p r ia te a n d c o n s is te n t to th e th e m e
網 站 顏 色 的 使 用 是 否 符 合 版 面 風 格 而 且 整 個 網 站 具 有 一 致 性
7 2 .0 0
Is th e s ite a e s th e tic a lly a p p e a lin g a n d u s e r fr ie n d ly ?
網 站 是 否 美 觀 具 吸 引 力 及 易 於 使 用 8 2 .0 0
Is th e w e b s ite in n o v a tiv e /o r ig in a l a n d c r e a tiv e ?
網 站 是 否 原 創 性 及 有 創 意
1 0 .0 0 M a x im u m M a r k f o r C r it e r io n
C o m p e t it io n D a y
M a r k A w a r d e d f o r C r i t e r i o n S i g n a t u r e s o f e x p e r t s s e l e c t e d t o c o n f i r m t h e a c c u r a c y o f t h i s p r i n t e d r e s u l t .
E x p e r t 1 M e m b e r E x p e r t 2 M e m b e r E x p e r t 3 M e m b e r
C o m p a t r i o t o r I n d e p e n d e n t E x p e r t C h i e f E x p e r t
D a t e
?S c o r e s x ( M a x M a r k ) M a r k A w a r d e d = — — — — — — — — — — —
1 0 x 3
D a y - M o n t h - Y e a r T i m e h h : m m
