完成20屆畢業典禮網頁－bhnknu的資訊筆記

這次從網頁開工到完成，大概只花了一週，算是速度快的一次作業吧？
紀錄一下工作的流程，當作以後的參考。
蒐集資料：

這個算是最簡單的部分了。
主要是取得各個數位相機的檔案、錄影檔 (在 DV 裏的要先轉檔轉出來)和活動相關文件檔。
只要知道有什麼資料、資料在什麼人手上，事情就差不多解決了。
相片的部分，這次是從鄭遠炯師和李銘偉師兩人手上取得的。
這次相片比運動會少多了，大概總共八百多張吧；少一點也好，比較好整理。
錄影檔的部分，是蔡宛樺師提供的。有檔案型也有原始 DV 帶的。
檔案型的相當好處理，把檔名改成 mpg 就可以處理了。
DV 帶的部分，就小小的麻煩，要一比一的時間轉出來。
轉出來的時候是轉成 320x240 wmv 的檔，因為那時想說應該只會放上這樣大小的檔，而且這樣檔案會小一點。
結果後來要作成 640x480 wmv 的檔，就自討苦吃了……
所以要從 DV 帶裏轉檔出來的話，還是弄成 DVD 片，以後要轉什麼檔都可以。
整理資料：

這比蒐集資料麻煩多了，因為在整理資料的同時，還要開始在腦中模擬後續的網頁架構問題。
相片的部分就是篩選分類，把模糊不清的去掉。
看來是蠻簡單的工作，不過作起來除了費時外，還要去想怎麼把它們分類。
影片就是剪接、轉檔。
以前拿到原始檔後，就自己去把它看過一兩次然後再分段。
可是這樣的的工作真的是難度很高。
因為我沒有全程參與現場活動，所以看了半天有時候也搞不清楚是畫面裏的人在作什麼。
現在的作法，就是把轉過的檔請主要的承辦人 (蔡宛樺師)看過，然後幫我寫上幾分幾秒是在作什麼，最後我再來分段。
這樣我可就省下相當多的時間了；雖然後續的剪接轉檔還是要花很多時間。
文件的部分，也是要每一個檔都打開來看過，再決定要不要放到網頁上。
設計架構：

動腦動腦動腦動腦動腦………總之就是動腦啦！
平常閒逛各種無聊人士作的網頁，或是看書看雜誌得到的知識，就是在這時候派上用場了。
通常這時候會在紙上畫架構的草圖，大略的計算那邊要圖或是按鈕，這一層的寬高大概多少，下一層的寬高多少；不過只能算個估計值，實際的數字要到下個階段才能確定的作出來。
說實在的，這個部分最傷神了。
如果早已想好那裏要放文字、那裏要放圖案，那後續的只是技術問題，還算好克服。
難的地方就在，到底要分幾個大項？每個大項下有幾個細項？版面的放置方法是那種？各種顏色的安排？相片的大圖要用多少 (600x450 或 640x480 或 ……)？header 要佔掉多少高度？用 asp 還是 htm ？
要考慮的項目，真的是非常非常多。
也許有人會覺得，這不是後面開始作網頁的時候，才需要考慮的事嗎？
根據我的經驗，如果這些事在開始作網頁前就能定案，那到了真的作網頁時，會省下非常非常多的時間。
因為如果製作的方向錯誤，到時候要修正，會花上更多更多的時間，絕對是得不償失。
網頁動工：

架構設計完了，就可以開始真正的寫網頁了。
嘿嘿，以前是「作」網頁，最近真的越來越像「寫」網頁了。
早期作網頁時，全部是在「設計」模式下完成 (就是「所見即所得」的畫面)。
那時覺得 html 語法，真的是天書呢！看得懂的真是神人呀！
後來網頁上要放 javascript，不學點語法是不行的。
再後面，還要放上別人寫的 asp 程式。
當然，要改些東西才能放上去用，這又得再多學點語法了。
真正開始「寫」網頁，大概就是從寫這個日誌開始吧？
因為，開始全面用 css 來控制版面，用 div 來取代框架、表格，不是用「寫」的，我看很難吧？
也從那個時候開始，差不多都是在「文字編輯器」的狀態下完成網頁作品的。
還好先習慣了這樣的形式，所以後來學用 asp 來寫網頁時，很快就習慣了。
因為現在都用 css 來控制版面了，所以，當然就會先寫 css 檔，把基本的版面值寫進去。
以往會從 index, header 開始寫，然後目錄頁，最後是內容頁。
也就是使用者的瀏覽方式，由外到內。
不過開始寫 asp 以後，就發現由內往外的方式，會好寫多了。
這次，是從相片大圖那頁開始寫的。
大圖寫完，寫相片目錄頁，依次是影片，最後才是文件頁、header 和 index。
網頁技術：

這次最好玩的事，就是底下這部分的 css 了：
a img {filter:alpha(opacity=50);}
a:visited img {filter:gray;}
a:hover img {filter:alpha(opacity=100);}
這是讓有超連結的圖片，在還沒有點閱過時，是半透明的；點閱過的話，是黑白的；滑鼠移過時，是正常色彩。
用 javascript 可以作到半透明和正常色彩，而且還會有漸變的樣子。
可是，為了這個可有可無的效果，要去浪費使用者端的電腦資源，想想還是算了。
還是用 css 就好了，雖然沒有漸變的特效，不過也不錯吧？
很遺憾地，這個特效，在 firefox 會出不來。
這也是另一個痛呀！
在 ie 下，我的線上影片播放器是正常的。
但在 firefox 下，如果我把 320x240 的影片，強迫以 640x480 來呈現，那就會出現播放器變形的結果。
就不要提 div, p, margin, padding 這類最常在 ie6, ie7, firefox 會有不同認定的事了。
真心的希望，不要再改變對 css 的認定了，會搞死我們這些寫網頁的人！
本來還在考慮，要用 htm 還是 asp 來寫網頁。
後來發現，唉，超連結那麼多(快一千個吧？)，還是不要找罪受，就用 asp 來作吧。
嗯，現在看來，用 asp 是對的。
全部的 htm 加 css 加 asp，也不過十四個檔而已。
如果改成 htm 檔的話，嘿嘿，我不知道會有幾百個 htm？
而且，如果要改某些文字或設定……應該不會去改了，因為，不知道要因此改幾百個檔了。
片頭的 swf，因為圖片沒有先縮小，所以短短十三、四秒，結果竟然檔案大到 2.5M！
後來想想，就發現，應該是用到的圖片，沒有先把它縮小再匯入。
唉，沒力氣改了，下次會注意的。
因為最近中了變形金剛的毒，本來按鈕也想那樣作。
後來花了半小時，作出來不是很滿意的作品：