網頁架構
每一屆的資優班畢業生都必須製作紀念光碟,因此製作專題網頁應該很簡單,我們一開始是這樣想的....

網頁地圖

下圖是我們的網頁地圖,可以找到各種有關於我們網頁的資訊。
 
學習技藝
重要比賽
麵包看法
生命貴人
工作環境
麵包介紹
比賽作品介紹
第一次訪談準備
第一次實錄
第二次訪談準備
第二次實錄
歷程心得
整體回顧
網頁架構
網頁製作
計畫相關資訊
計畫總覽
計畫要素
基本資料和貢獻度

 

網頁設計歷程

為了完成整個網頁,我們在彙整了整個我們的訪問內容以後,將網頁內容整理成一份心智圖,並依照這個架構去設計每個選項。同時我們也上網去看了很多其他人的作品和網頁模板,試圖找到適合我們的範例並模仿。一切都很順利,但是當我們在模仿我們喜歡的網頁模板照樣製作的時候,卻發發現了很多細節沒有辦法做得很相像,只好對模板修改。但是卻越改問題越多。最後只好重新設計,沒想到卻還是有很多不滿意的地方。最後現在這個網頁,其實是我們的第三個版本的網頁。
在前幾個版本的網頁,我們是打算用內嵌網頁的方法,這樣可以維持整體版面的架構,只修正內容的地方即可,也不需要每換一個頁面就整個重做。但是在製作到一半的時候,發現因為內容太多,這樣的方法會讓內嵌的網頁顯得過於壅擠。我們只好整個打掉重做,也因為這樣讓我們覺得相當不耐煩,差一點做不下去。還好在老師和家長的鼓勵下我們還是決定堅持下去,繼續完成我們的網站。在這樣不斷重複修改的過程中真的花了很多時間和心血。
第一個版本的網頁
第二個版本的網頁
 
 
 
 
網頁製作
除了美工以外,各種版面設定和特效也花了我們很多腦筋....

插圖與照片來源

在製作網頁的過程中,圖片和插圖的來源也讓我們傷透腦筋。如果是自己可以拍攝的照片或是獲得謝忠祐師傅同意使用的照片都還好,問題是有些像是鳥越製粉的照片就讓我們傷透腦筋,還好我們之前老師有教過我們使用網路免費資源的方式,才不會陷入沒有圖片可用的窘境。
插圖的設計更麻煩,因為當初我們幾個人在組隊的時候,並沒有考慮到美術設計的問題,所以最後要畫圖的時候,只有一位同學圖畫得比較漂亮,只好全部由他畫圖,他花了非常多的功夫畫圖和電腦修圖,沒想到在我們修改網頁版面的時候,整個都放棄掉不能使用,令人相當挫折,而時間的壓力也讓我們相當焦慮。還好我們最後找到了其中一位同學家長認識的插畫家願意替我們繪圖,才解決了插畫的問題。
 
 

CSS設定與特效

圖片截圖:CSS3漸層產生器
圖片截圖:WOW Slider
雖然我們原本都有學過一些網頁設計,但是當我們要架設這麼大的網站,並且要求更好的效果的時候,就發現我們的技術相當的不足,常常都要去請教老師或是上網去找解決的辦法。老師除了盡力幫我們解決以外,也推薦我們一些可以使用的軟體或網站,例如WOW Slider免費版,可以讓我們輕鬆的製作出照片輪播的效果,雖然還是要一張一張的調整照片的大小和色彩,但這樣可以讓我們的網頁更加活潑。除此之外,我們也用了「css漸層產生器」這個網站,他可以輕鬆地設計出各種區塊的效果,讓我們的網頁更加立體。我們也學會了使用hover的功能,讓網站更活潑。
  • 回到最前
  • 網頁架構
  • 網頁製作