[失敗之作]「心火相傳-老婆餅傳天下」專題網頁模板

前陣子銘跟學弟妹們一起參加了「臺灣學校網界博覽會」的專題網頁設計競賽,專題網頁部分主要是由我負責製作,不過很可惜,最後跟獎項無緣,距離得獎公告釋出已經過了三個多月左右了,六月初的時候,打算將這次專題網頁的網頁檔案釋出,不過文章還沒開始寫又丟草稿了,今天突然心血來潮,決定把這個沒得名的失敗之作釋出,給有興趣的朋友抓去研究、再利用。

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/logo.png

  • 模版名稱:心火相傳-老婆餅傳天下(Pass The Tradition─ Sweetheart Cake Spread The World)
  • 模板作者:SanDuo Cyberfair Team(用「餅」如神-2011)
  • 授權形式:無使用限制,歡迎任意用途、盜連
  • 線上預覽:《點我觀看》
  • 模板載點:《點我下載》|《備用載點》

※網頁中有部分頁面套用Lightbox Plugin,該光箱外掛版權為Lokesh Dhakar所有,網頁模板中有引用一些網路上的素材,不在一一聲明,在此感謝這些創作者的辛勤,若對本模板中引用你的創作有異議請來信告知,會立即移除或者加上聲明。

簡易架構說明:

  • narrative.htm為專題簡報(藍色風格)
  • index.htm為專題網頁(紅色風格)
  • narimages資料夾主要存放專題簡報圖片
  • images資料夾主要存放專題網頁圖片,js存放光箱外掛的Js檔案

這個網頁沒有運用太多的特殊技巧,純粹的使用HTML 4+CSS 2打造(除了一個套用網路上發表的Lightbox Plugin之外),網頁部分銘盡力讓他支援行政院無障礙網頁標準+W3C XHTML+W3C CSS,有過的也只有首頁而已,沒有辦法每個頁面都通過W3C標準算是比較遺憾的地方。

標準性/相容性概況:

專題網頁盡量每個頁面都符合W3C XHTML、CSS、行政院無障礙網頁標準,首頁亦可通過W3C XHTML/CSS、行政院無障礙網頁認證A+(A++基本上也沒問題,只要稍作修改即可)

相容性部分,Firefox/Chrome/Internet Explorer近幾年的版本基本上都正常支援不會有跑版現象,目前已知會跑版的瀏覽器:Internet Explorer 6,這部分應該可以透過技術克服,不過銘在倉卒之下就送審了,有興趣的人可以將此完善化。

模板欣賞:

為了不讓文章太乾淨,還例丟幾張圖上來。

專題簡報部分的頁面:

專題簡報的模板看起來很熟悉,沒錯,是抄襲Blue Weed 1.0的,基本上就是這個WordPress Themes的仿作殘障版本。

為何會直接抄襲Blue Weed呢?因為銘當初想破頭實在想不到idea,只好……(慚愧)

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/01.png

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/03.png

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/04.png

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/05.png

專題網頁部分網頁:

專題網頁部分基本上是抄襲FileDeck的架構,一樣是抄襲的殘障版本。

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/06.png

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/09.png

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/07.png

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/08.png

將心火相傳老婆餅傳天下完善化

這個網頁模板當初其實寫的很趕,其實還是有些小問題,例如:

  • 專題網頁(非簡報)右邊的選單列在Internet Explorer 6執行會有跑版現象。

Flymia亦有針對這個專題網頁部分指出很多美工上的缺失/可以改進的地方,有興趣完善的人可以參考我們的對話紀錄:

銘:不過老實說idea也是抄來的…ˇ
Flymia:?
銘:http://filedeck.net/
銘:如果這次有得獎大概會挺不踏實的,概念其實是源自這個網站
Flymia:還好啦~人家做得比你好看XD
銘:摁 這個簡單的很好看
Flymia:你 layout 的元素太少了…..
銘:怎麼說?
Flymia:你的網頁再傳給我一次~
銘:http://goo.gl/0A34t
銘:不過這還是第一個配色沒被弦夜挑剔的。
銘:應該是說我以前都做黑白色的
Flymia:對…….你元素真的太少了
銘:元素?
Flymia:以filedeck來說,他在網頁最上方有一條行的灰色,讓畫面比較沒有壓迫感(有漸進),同理,中間乍看下是白色的主區塊其實也有淡淡的灰色漸進(除了降低壓迫感外,讓畫面的圖層(我也不知用什麼名詞)數提高。
銘:哪個地方?
Flymia:最上方有個約15pix(?)的淺灰
銘:我也有做的樣子..,可能是色系太亮,應該是整體色系過量,不明顯。
Flymia:不,你色系用錯了,它的漸進是為了增加圖層量,所以必須和主畫面同色系(灰藍色。
銘:摁…,所以,灰色用甚麼顏色取代比較好?
Flymia:若你要用的話加點紅色才會有效果,因為不同色系會變成不同物件,大概就像主標題那漸進色吧?略略粉紅
銘:摁…原來如此,當初沒考慮到(死)
Flymia:你看,網頁頁面最上方多了條bar,filedeck感覺上就有層次許多,filedeck的副標題用了淺灰色也同樣讓畫面有了活力(你試著想像沒有的感覺),而中間的"."用了藍色有些畫龍點睛的fu。
銘:摁..,襯托出主標題
Flymia:再來,filedeck的圖示其實很華麗又複雜,讓畫面的"資訊量"多了許多
Flymia:我會覺得你要是能放個"餅"的圖片(經過藝術化,ex黑白照片畫後調成紅色調)在左上角或再把圖淡化、放大後放到右上角(只露出約1/4個餅)應該會更好看
銘:唉.,這我想過,不過要考慮到窄螢幕
Flymia:作相對物件呢?
銘:就是相對物件才慘,你可以試著想一下,當窄螢幕的話,兩邊會互相擠壓,logo跟選單就可能撞在一起,雖然800*600沒甚麼人在用了,北縣北市也都淘汰的差不多了。
Flymia:放在右邊的圖片本身做淡化的目的是當作背景圖使用(選單在圖上),放在左邊的則要注意壓到的問題(把選單稍微往下調剛好掠過字體,然後logo稍微放大就算被選單壓到也能當作是"設計上的一部分"這樣?
銘:摁..我那時候應該要把選單壓低的,這樣即使撞到也不會擋到字
Flymia:恩,另外,filedeck網頁下方有一條設計得很華麗的藍色bar,這讓畫面少了份陰沉多了點動感,bar本身除了華麗外,也有細心地在上方加上陰影讓整個網頁的層次再多加了一層
銘:bar嗎,當初有做,不過最後拿掉了。
Flymia:恩,可惜,要不就是把bar的顏色調成和最上面的紅色一樣,讓中間的白色區塊有種"陷下去"的感覺(目的仍然是增加網頁的豐富度和層次
Flymia:選單的第二重色彩(滑鼠移動到按鈕上時)太紅(亮?淡?)了…反而降低了統一感
Flymia:最後~當時開你網頁時不知為何總是在等背景(或上面)飄出落葉or愛心的動畫說~~
銘:…是嗎,小的不才,能力不及
Flymia:哈哈~~因為配色有點像是秋天呢……,喔,還有一點
Flymia:像filedeck,他幾乎沒有"單純的物件,像是"開始上傳"那些選單,它下方有一條白色的bar讓他不僅僅是"方形",而像是tab,中間淺灰色的區塊,用了稍微深色一點的灰來做邊線提高層次,中間的瀏覽檔案的選框,有做圓弧和陰影,下方的藍色bar一樣有做陰影(1pix吧?),總之,"每個元素"都很豐富。
Flymia:相比下,你的網站因為元素太過單純(用css也能做透明、圓角跟斜角吧…),單純的方框、單純的線框、單色文字(filedeck的字體顏色和整體不同以做層次區分)等等,讓人有種"還沒完成"的感覺這樣~
Flymia:以上。其實也沒什麼啦XD,畢竟我們只是學生而已,沒必要像那些商業公司layout個東西就要在那調細節調半天的~~

結語:

https://sites.google.com/a/alone.tw/space/images/blog/article/2011/august/15/cyber/11.png

這個作品其實是個很失敗的作品就是了,整體架構幾乎都是抄襲來了,這部分也顯現出自己的能力不足,很多地方都還沒有辦法達到"隨心所欲"的境界。

很早就想把檔案丟出來了,不過一直偷懶ing,所以就一直拖到現在,網頁寫的還不是很完善,還有很多可以修改的更好的地方。

釋出這個模板,有興趣的人可以拿去研究一下架構,推薦使用Notepad++編輯器編輯,CSS部分寫的有點奇怪,那是因為把CSS當成C++的ANSI標準,所以才會有

#body
{

}

這樣的括號法,直得修正的地方非常的多(Flymia跟我說的那些),編寫HTML的過程有點過度縮排(C++很講求縮排,所以HTML也順便把這個習慣帶上了..)

這個作品算是近來架構比較完整的一個,比賽結束了,雖然沒得名,不過希望這個模板可以有更多的作用,想起當初銘在學習網頁製作的時候,也缺少一些實際網頁架構可以參考,所以希望這個專題網頁在比賽結束之後,就永遠沉睡在我的電腦當中。

  • kakeong8

    那銘大我拿去再利用了哦..
    我學校剛好有專題網頁比賽AoA
    ————————————————————————-
    回覆『kakeong8』:
    如果是比賽的話,建議你將Flymia跟我對話的部分在進行完善化
    畢竟我這個模板開發的很趕,
    選單的部分IE 6會跑版,我也來不及修復就送出去比賽了。

  • http://qqboxy.blogspot.com/ QQBoxy

    用心最重要。