活動名稱 | 色禽運動會 |
|---|---|
主辦人 | |
網頁支援 | 班比牧場 |
活動網頁 | |
使用服務 | |
類型 | 一頁式網站、活動網頁 |
網頁規劃時間 | 約半天 |
網頁製作時間 | 約兩天 |
五月中左右胸毛房東提議做個小活動，
讓群組裡的 line 貼圖創作者們一起畫色禽 (=充滿顏色的鳥類) 貼圖在六月左右上架，
雖然時間很趕但感覺很可愛所以立刻決定參加，
還自告奮勇要做活動網頁，
於是就促成了這段良緣。
因為目前的 Webblize 系統可以建立無頁首 (Header) 的頁面，
也就是畫面上完全獨立於原有的站，
所以拿來做一頁式網站超方便。
以下來簡單紀錄一下製作流程：
獲得胸毛房東初步的金、銀、銅牆面設計後，
依據網頁設計規則調整元件。
之後列出需要素材清單後跟胸毛房東討論。
靜態貼圖 40 張 / 動態貼圖 24 張
靜態貼圖 24 ~ 32 張 / 動態貼圖 16 張
靜態貼圖 8 - 16 張 / 動態貼圖 8 張
跟宣傳圖的主要不同點有：
1. 移除左右的牆及天花板
2. 底座＆牆改成左右無限延伸
3. 每區的標題底圖會像微色禽牆一樣是長方形的圖置中
4. 把標題字直接用電腦字寫上 (色禽狂之牆 etc.)
5. 相框底下加上敘述及按鈕
會做這些調整主要是考慮到 RWD (響應式網頁設計) 及 SEO，
以能夠方便又快速做出符合所有裝置瀏覽的網頁為首要目標。
(請忽略粗糙的修圖 ... 因為只是 demo 用所以修得很隨意 啊哈哈)
進入頁面編輯後切換到「選項」Tab，
將頁面佈局改為 blank 就可以隱藏全站頁首 Menu 區，製作 Campaign 頁了。
♦ 選項由上到下分別為：
預設 (含頁首選單) 、側欄選單、空白頁面及頁首背景透明四種模式。
Webblize 頁面編輯器裡有提供目前大部分網頁設計會使用到的區塊。
這次相框區我就是選擇四欄的區塊 (點擊旁邊的問號 icon 可以看到手機版版面敘述)。
插入區塊後開始編輯內容：
點選左上編輯按鈕
開啟圖片編輯視窗，選擇由電腦上傳或從圖庫選擇
加入圖片後的樣子
點擊文字區塊就會出現文字編輯選單，可以切換字級大小及設定粗體、底線、連結、對齊方式 ... 等等。
點選黑色按鈕插入元件
選擇按鈕
點選編輯按鈕
設定按鈕文字、樣式、連結
點選左上區塊編輯按鈕，設定區塊背景
操作方式與圖片相同。
繼續重複以上流程建立需要的資料。
為確保標題區的圖片在所有畫面上都可以完整呈現，
我選擇自己寫 html 及 css。
由於目前 Webblize 還沒有直接上傳圖片到圖庫的功能，
所以我是先隨意找個空白圖片元件把圖片上傳後，
再用瀏覽器的開發者模式找到圖片網址並複製使用。
選擇進階區塊
點選編輯按鈕
把預設的 html 、css、 javascript 內容替換成自己想要的就可以了～
在打 code 的同時畫面上的內容就會同步更新，
但因為編輯區還是會佔據一部分畫面，
所以如果是比較複雜的內容還是推薦使用自己習慣的軟體 (vscode、atom 之類的) 編輯完再直接貼過去比較快。
原本是打算用電腦字呈現各區標題，
但後來覺得這樣整體氣氛不太對，
所以最後還是直接採用胸毛房東提供的手寫版本，
文字加在 image alt tag 上就好。
做網頁的過程中房東陸續完成了首圖、頁尾及精神參與區的設計，
首圖跟精神參與區一樣是用進階區塊客製，
但頁尾是直接使用了頁面編輯器內建的兩欄板型（手機顯示為單欄上下排列）。
頁尾設計圖
適用版型
在規劃階段被我排除的布簾，
因為網頁架構完成的差不多所以決定試著加入＆讓它們常駐在畫面上，
沒想到做完效果超好，
房東也給了大好評。
布簾在首圖看起來的樣子
布簾在相片牆的樣子
房東提出修改游標的想法，
然後很迅速畫了幾個草稿給我挑，
最後定案小天使加香蕉棒棒的組合，
也另外畫了一張滑到連結上時的變換圖，
讓整個網頁互動性更高。
為了增加畫面豐富性，我用 css 幫布簾加了從外面滑入的效果。
這個我就不放圖了直接到網站看動起來的效果吧！
以上～
雖然沒有到很炫炮、但絕對已經足夠可愛又吸睛的活動網頁就完成了！
真的很感謝胸毛房東發起這個活動還讓我接下IT大臣的工作，
才有這麼有趣的 side project 可以做 (自己的 side project 無限期擱置中 ... )，
也感謝參與活動的每一個人，
不論是粉絲幾萬的大大還是跟我一樣的小菜雞，
集結了所有人的創作才有辦法讓這個活動辦得這麼有趣 
(先炫耀一下超可愛的合照)
大家畫的各式各樣色禽擺在一起真的可愛爆炸，
害我做網頁的時候一直忍不住嘴角上揚，
期待以後還有更多有趣的活動可以做！
最後別忘了去看看色禽網站成果，
我沒放進來的精神參與區超級可愛的噢！！
也別忘了到底下的連結看看胸毛公寓跟我的色禽貼圖，
我們家色禽只是外表色，貼圖內容很純潔ㄉ。
除了活動網站外還有一連串的預告及計畫，
感覺會有很多里程碑或趣事可以記錄，
之後有機會再來寫文章。
