最近這個禮拜都在玩 css 樣式設計。因為原先相簿頂上的橫幅太高、『控制面板』又在頁面上方，夫夫抱怨每看一張照片都要拉捲軸往下，才能看到註解寫什麼。所以我就決定放棄原先套用的樣板，換個『控制面板』在左側的。但是選來選去都沒有喜歡的樣式，只好自己設計。
▲ Amaryllis Belladonna (套用 412 / 留言 97)
第一件作品想走優雅風格，只用了三張圖片，其它都是標準 css 語法，畫框畫虛線什麼的。
並非我特別喜歡粉紅色，只是剛好選了粉紅色的 Belladonna 當背景，所以就搭配她變成粉紅色系。
左上角的藍眼睛眨眼貓是我從網路上抓來再修改成動畫的（要有點耐心才會看到牠俏皮眨眼）
另外有張『我要留言』的圖片上面這張圖沒有顯示（瀏覽相片的頁面才會出現），
那也是我去抓來再修改的圖片：一支墨水瓶裡的彩色羽毛筆（希望漂亮圖示能提升相簿的留言比例 :p）
字型選用優雅的 Monotype Corsiva，應該是標準字型。
為什麼要強調『標準語法』和『標準字型』？因為我對設計的東西非常龜毛，一定要確定各種解析度和瀏覽器都能看到『正確』頁面才行。因為是第一次設計版面，戰戰兢兢，來來回回試了各種瀏覽器（Safari, Firefox, Opera, IE, Camino），不是不辛苦的。
設計完之後覺得很滿意，本來只想自己套用就好了，後來又覺得『好東西要和大家分享』，就上傳到 Pixnet 的『樣式貢獻區』。沒想到短短幾小時就有數十人套用，大大滿足了我的虛榮心啊。 :D
▲ Starry Starry Night (套用 404 / 留言 92)
看完英仙座流星雨的那個晚上，心裡滿滿的幸福感，我又想設計一個星空的版面。
若是本網誌的忠實讀者，可能會發現這張底圖就是之前介紹星座時那張圖。 :p
本來想把燦爛的夏季星座都畫上去的，不過那樣好像 high 過頭了，所以最後改畫地平線上的小帳蓬。
我一直很嚮往這樣搭在山野的小帳蓬，點一盞微亮的燈，就透出了帳蓬鮮豔的顏色；沒有月亮的夜晚，天幕鑲滿了星星，銀河閃爍，遠方有大樹的華麗剪影...（想像總是美好的。真實的曠野小帳蓬裡可能冷得要死、或者蚊子么壽多、還要擔心被熊吃掉之類的.... XD）
我承認這份樣式設計得不太好 -- 離我心目中的完美畫面還差得很遠很遠。而且底圖太大了，雖然只有一百多 KB，還是有違我本人偏愛的簡單風格。
另外一般網友對於『滑鼠移過可以 點亮 相簿』的設計挺有好感。不過這只是譁眾取寵的小技巧啦，我覺得一個真正好的樣式不應該用到這些會拖慢瀏覽速度的旁門左道 :p
▲ 旅行的意義 ( 套用 849 / 留言 228)
我一直很喜歡郵票：小小方方滑滑的紙，印著五彩繽紛的細緻圖案。從小媽媽教我集郵，沿著郵票邊邊把信封剪下來，然後泡在水裡，等漿糊溶了、郵票浮起來了，再把郵票正面貼到窗子上，等它風乾之後存到集郵簿裡。
之前在『春天的顏色』那篇文章就畫過郵票了，顯然很受大家喜愛。所以拿來相簿樣式再用一次。
郵票上的數字標示了里程，而非郵資，這個構想來自蛙男先生。他的登山紀錄郵票寫著高山海拔，很有趣。旅行的遊人們應該也是用里程紀錄著自己的腳印吧。把所有的相簿連成一個『大全張』，就很有味道啦。
登上樣式貢獻區之後，覺得版面太黑了，我本身不喜歡太厚重的質感，所以又重新設計了一個『明亮』的版本如下：
▲ 旅行的意義-明亮信箋版 ( 留用 532 / 留言 113)
原本的黑色版面，郵票浮在空中飄來盪去，有點浮躁。將郵票黏上信封，寄出去，蓋上郵戳 -- 這才是郵票真正的歸屬啊！因此設計了這個明亮信箋版。
不過看起來黑色比白色受歡迎得多哩！ ^^;
▲ Puzzle (套用 327 / 留言 74)
拼圖也是我很愛的休閒娛樂。所以當然要設計一個拼圖樣式。
我自認這個樣式有個大突破：每本相簿的拼圖不同，但可以彼此完美接合！
Pixnet 提供的樣式項目原本就有「albBoxOdd」和「albBoxEven」兩個類別（class），所以可以做出左右兩欄式的相簿（無名小站好像沒有這種 class，所以沒有兩欄式相簿）。不過大部份的樣式設計者都將左右兩欄設計得一模一樣，兩欄就只是兩欄，頂多一欄靠右對齊、一欄靠左對齊，一點小小變化而已。
我想到拼圖的對稱特性剛好可以利用這個分別 Even/Odd 的特性，
故意做成三欄相簿（其實只要螢幕夠寬，五欄也沒問題，只要奇數都可以）
如此一來，相簿的排列就會是『奇偶奇、偶奇偶、奇偶奇...』這樣，
只要奇數相簿使用第一種拼圖、偶數相簿使用第二種拼圖，就可以設計出上面這樣的版面啦！
本來只是在頭腦裡想像實驗，結果真的讓我做出來，非常開心 + 得意！
▲ Calla Lily (套用 38 / 留言 11)
海芋的英文是 Calla Lily。很奇怪吧，百合、蓮花、天南星科，通通叫 lily..... ^^;
這個樣式同樣應用『奇偶相簿使用不同背景圖』的小技巧，除此之外就是耍優雅而已，毫無創新。 :p
▲ film 135
這是剛剛上架的最新作品（2007/8/20）
懷舊的135底片啊...
應使用者要求，加上了相簿描述的小黑板。由於本人生性不愛接受點菜，所以任性地畫了一隻小豬頭... XD
這個版本沒什麼特別，但是因為膠卷是畫在整頁的底圖（background）上，和相簿縮圖的底片圖接合是一大問題。我好不容易試了 Firefox, Safari, Opera 都沒問題，天殺的 IE 卻一直搞不定。最後使出 expression 這招殺手戩（這個字到底怎麼打??）才勉強讓『我家的 IE』乖乖就範.....（對，僅限於我家的 IE，因為好像有很多使用者都有底圖接合的問題...真傷腦筋....早知道就把膠卷圖放在左下角就沒事了....可是我是工程師！我要勇於接受挑戰！我要面對困難！我要.......算了我還是去煮飯好了.........學人家當什麼工程師嘛，還是好好地做我家庭主婦這個很有前途的職業去吧......）
***********************************************************************
我本來就喜歡設計網頁，尤其是美工。這個禮拜都在忙這個。
因為腦袋瓜每天都有新的想法蹦出來，搔得我手癢，於是就不停設計下去。很多點子都是實驗性質居多，一開始只是想『如果這樣這樣，不知道做不做得出來？』然後就做看看。結果一開工就停不下來，一定要克服萬難做到完美。（果然是工程師體質 XD）
這是我畫拼圖版面時遇到的小問題，出在這裡讓大家腦力激盪一下：
當我畫出了第一種拼圖如上，要怎麼畫出與它對應的第二種拼圖呢？（上下左右都要完全接合喔！）
以下回應區開放觀眾 call-in，提出最佳答案的人可獲得小貓設計的相簿 css 樣式一枚（可指定主題 :p）
2007/08/24 答案公布囉！
方法 1 是我一開始想到的，但是很爛，因為很難接得精準（見藍色箭頭及問號），到了步驟 1.3 須細修四個角落。最後勉強做出來的東西沒辦法與原來的拼圖完美接合。
方法 2 就好多了，雖然仍有藍色箭頭的問題，但是 2.2 那個步驟就可以確認藍色箭頭的高度了，最後可以做出完美拼圖。
而方法 3 和方法 2 是一樣意思，只不過更簡單：其實根本不需要把拼圖切一半還搬來搬去的啊，只要複製四份就得到中間那一塊啦！ ^^;
留言列表
