第13屆全國身障技能競賽網頁設計試題解題

這幾天在試解2014年第13屆全國身障技能競賽的網頁設計題目，這題目是我收集的三屆題目中算比較有難度的，全國競賽通常會有現場30% 的題目變化，我並不知道當年的30%變化是什麼，只能就目前從競賽網站下載的資料來做解題；

這題要做的是一個旅遊資訊網站，主要的難度第一個是檔案匯入及整理的工作，這部份一般的網頁設計程式教學並不一定會教到，由於題目是賽前一個月公佈的，所以如果賽前知道會有這個內容，預做準備的話也還算可以從容應對；首頁動畫的部份，當年的題目大多是要求做一個flash動畫出來，但這時代flash已經確認退流行了，所以這部份我改用jQuery來做動畫；最麻煩的是篩選資料的功能部份，這一頁中除了資料的撈取條件外，還有一堆的CSS要處理，版面的安排需要從無到有自建構出來，而左方的排名部份會使用到比較麻煩的sql語法，我在解題上也幾乎能用的技巧都用上了。

資料匯入存在著一些陷阱，由於題目提供的檔案格式及編碼並不是當今通用的規範，所以花了點時間研究資料檔案的問題，再加上，資料的欄位格式其實也很怪，像是類別這個欄位有用逗號分開的，也有用斜線分開的，到底那一種才是正確的格式令人疑惑，而這問題到了篩選資料時也變成麻煩的問題，比如同樣一個type，有的資料前面有加了一個空白，這在做比較時會變成兩個不同的類別，所以得在撈取資料時再去處理一下空白的問題，另外，資料中有些欄位資料是有單引號或雙引號的，這在程式或sql語法的判讀上會造成問題，也得處理。

篩選資料的功能主要是在版面安排上會花費比較多的時間，由於題目並沒有要求得在1024×768的範圍內來做，所以這邊我採用的是全版面及RWD的方式來處理，不過我也只是做到能看的程度而已，畫面尺寸變化太大時還是會有版面跑掉的狀況。