工房版面Ⅵ

2011年6月22日起的版面,由於上一版已用二年多,版型寬度較小,在高解析度螢幕上呈現效果應該不太好,加上想讓字更大點閱讀更舒服點,於是決定再思考新版型。

構思過程,是先上免費提供CSS佈景主題的網站「Free CSS Templates」逛逛有沒有順眼的,選幾個試試效果,最後挑中「lotusflower」這個,除了保留該頁面當首頁,自行用PhotoImpact設計其他顏色的外觀圖片,製作出其他顏色配色及圖片,成了此版的模式。

 

◆ MemoryFun3.9

這個版型乍看之下有點像BLOG,實際上它的CSS確實也是設計給BLOG用的,不過其實所謂的BLOG本來也就是由網頁所製,區別只在於BLOG導入資料庫提供互動功能而已。

總之這版把「邊欄」的方便功能拿來用,設計成除了最後的內文頁,其他目錄頁都有邊欄,昔有某人無限劍製,今有某珊無限邊欄 >W<(雖然每個邊欄都要手動輸入 XD)

 

為了保持整體性,每頁都有共通選單,一是「目錄頁」,上方為功能列,左邊為分區項目列,另一種則是「內容頁」,功能和分類都在上方(點選時呈現不同顏色以作區別)。

這版較之前版面最大的不同,在於以Dreamweave 8 製作!

不才小妹我製作網頁的技術普普,之前都是用FrontPage 2003設計, 不過這次DIV的CSS設計概念,用FrontPage開啟會跑版,於是安裝了Dreamweave 8,摸索一陣子後,總算適應並發現其妙用,一邊程式碼一邊預覽,編寫套用CSS相當方便,我終於從FrontPage畢業了(呼喊)

 

各區目錄頁,還是保持上版分區換色設計,二次元讓我的人生五彩繽紛 <( ̄︶ ̄)/

   

 

分區目錄頁後,以系列目錄頁→遊戲目錄頁→內文,如此分層:

  

 

有變化的其他頁面如下,包括水旋特典信封信紙形式、表格頁,還有小N頁:

  

 

想特別一提的是生日特區和同人二次創作頁!

這次改版,把生日賀詞文集中到一頁,並把近期有慶生的列在旁邊。

是說2011前半年一直在休息、改版,隔了半年才繼續營業,相隔頗久,看了還真有點汗顏。

生日頁另外幫人物寫點簡單介紹,也將與作品、同源人物的關連性連結整理出來。

 

而同人二次創作的頁面,牽涉到寫真素材的搭配,想和寫真圖搭配,可以跟一般感想文作區別,另方面許多好看又符合該文主題的圖片也實在美觀,但寫真圖必須白底,固定背景寫真素材還必須放在四個邊角處。

前前版本能用寫真素材,因為是白底能固定在邊角(圖放在BODY背景),前版本雖然是色框形式也能用寫真素材,因為色框內是白底,色框成了邊角(圖放在表格背景),而這次,背景已經用了張漸層圖片,所以寫真素材只能放表格或DIV內,且不能使用固定背景。

然後又會遭遇問題,圖的位置喬不妥,最後想出了一個辦法:

 

一開始看文,會呈現圖一狀態,看不到寫真圖片(隱藏在上方圖層後),下拉閱讀內文時,寫真圖片就會很神奇地跑出來喲(笑),變成這樣的設計,以上,大概是此版面的製作情況。

發表迴響