國立臺灣大學學生電視台National Taiwan University Broadcasting Center，簡稱TBC
於2007年九月，甫進TBC便接下社團網管的職務，也或許是只適合接網管才進了TBC也說不定呢(XD)。但也因著這樣的機緣，促使我開始網頁自學的一條路：)
在接網管之前的網頁編寫能力是架構於Dreamweaver可視化編輯上，網頁檔更動就如同修改Word文件檔一般進行，雖然也曾用網站軟體建構過一整個網站，但其實並不十分瞭解網頁原理以及其標準。是故，初接TBC網管後僅是修改掉由frameset架構而成的社團網站便耗掉許多的心力(其實當時也改得手亂腳的…)。而後漸進式地將原始網頁改寫成xHTML+CSS，但站內資料架構並沒有真正地去做調整，原始碼內容至今看來仍是非標準化，資料分類也凌亂地非常可怖，實在是非常抱歉吶。
體認到自身知識不足後便開始努力研讀相關的資料，包括嚴謹的xHTML格式、CSS樣式表的好處及其語法標準，甚至是各瀏覽器不同程度的支援等等，尤其相當多的資料都是首次接觸到，在不段試誤過程中，漸漸地知曉哪些地方是特別需要著重的，也在這樣的資學自修一段時日後，開始著手進行第二次的網站修改。
第二次的修改是在離社後，因在工讀期間亦處理網頁維護相關事務，所以在閒暇時期自己做了網站修改。此次更動便照著網站架設的流程去走，而非以往直接進行單一網頁逐個編修。首先確認了架設網站的目的與訴求，因是改版而非重頭建置，所以只要確認好改版的目標後，便可進行網站介面的呈現預劃，選單及整體外觀必需要先以往的讓瀏覽者(回頭客)有熟悉感，外觀除了些新增的一些小花樣外，有許多部分是可以保留延用的
再者是較為重要的資料分類了，必須決定各個網頁檔的內容概要，如此才能將資料妥善地分類，也才曉得需要幾個網頁頁面、或是多少資料夾以利分類，統而言之就是網站的資料結構細分，這些是瀏覽者較不會留意但卻對日後網站維護相當重要的部份！
改版最後的重頭戲便是個別網頁的修改，但在這之前還有不少事情得處理，這包括網頁結構確認、建立基本網頁模版、CSS樣式表建立【reset、基本骨幹、各簇區塊位移、多彩多姿的小花樣以及最後的除錯&簡化...etc】、圖片修飾、網頁互動行為的javascript程式撰寫以及常被忽略的相容性檢查。這些處理並非總是能順順利利地持續進行下去，很可能突然忙到一半才發現『啊!之前那段語法好像要改一下…』幸運的話改一小部份就結了，比較棘手的是遇到架構要改寫的狀況，有時真的可能會做到欲哭無淚呢～但這些也都只能通通往肚裡吞，閉上眼賞一刀、砍掉重練了...
下面這張圖示是改寫過程中，自己預設的成效圖，以便完工後確認一下與當初的目標有無謀合。這是一個蠻方便的小方法唷～
ps: 順道附上一張惡搞IE的XD
※註：原網站是彩色的，但用IE瀏覽該網站時會呈現如下的灰階，這是使用了CSS Hack的小技巧。
因第二次修改網站完成時，已經沒有在處理社務，所以這一份網站只是自己練習用，社站並未真正置換成新款版型。新版型因在學習jQuery特效過程中，正巧拿來練習，所以應用了許多的jQuery特效，諸如滑動效果、手風琴效果還有DOM操作等等，學了不少有趣的應用方式；除了jQuery技巧外，也練習相容至ie6的處理方法，像是CSS Hack、條件式語法等等。做了這個Demo網站，雖然沒有正式地派上用場，但也讓自己學了不少東西！
因為社站已久未維護，至今似乎已被砍站了，文末附上的是個人的存留檔案。
※註：影片因檔案過大而沒有含括其內
沒有留言:
張貼留言