汰我這快成技術blog了,我分明是個畫圖的?
FC2自製樣板製作心得* 主要講解自製skin時遇到的問題及建議
* HTML/CSS語言學習不在此教程內
雖然寫了HTML/CSS語言不在教學範圍內,不過我還是要說一句:
程序語言就跟外語一樣,是機器的語言,學習方法和學外語一樣,
拼命看、死命看就能看懂(被圍毆)
我也沒有上過正式的學習班,HTML和CSS純粹是一點一滴累積起來,俺對背代碼沒興趣,但寫多了總會背下來。
如果有一天你發現自己用記事本寫代碼比開dreamweaver之類的編輯器快,那麼恭喜你,你出師了 Orz
此外,寫代碼和英文水平毫無關系,無數英文很差的程序員幫我們證明了這一點。
同時,也和數學水平毫無關系,眾所周知我連1+1等於多少都不知道。(
注1)
· 寫樣板前的準備工作1,準備編輯器。可以是所見即所得(例如Dreamweaver,Frontpage或
Webeditor等,但不推薦),或者是單純的文字編輯器。這裏推薦
EmEditor,沒有比這更合適的編輯器了!(推薦綠色版)
2,準備模版文件。找一個基本合乎自己想法的skin,修改skin遠比自己重新寫要簡單。注意千萬不要修改的太過相似而導致盜用人家作品喔!也切勿將修改的skin作為公用分享!如果你對HTML/CSS有一定程度的了解,那麼會發現重新寫要比修改容易很多……(原因是各人寫代碼的風格不同,如果已經有自己風格的話,再看別人寫的會累)
3,準備參考文檔。如果無法背下大部分的代碼,那麼參考文件是很有必要的(如同字典)。推薦
OECSPACE和
CSS2中文手冊,前者也提供很多教學,後者則是字典,可以好好學習喔。
Tips:
寫之前,不管是否要通過W3C檢驗,都希望看一下這篇文章:
打造W3C XHTML 1.0標準的網站
養成良好的習慣非常重要!
· 寫作中的注意事項由於我是直接寫代碼的,因此這裏提到的都是直接寫代碼會遇到的問題。
我不推薦用所見即所得編輯器,一是因為這些軟件自動生成的代碼大部分已不符合W3C規範,二是skin內會有很多FC2專用標籤,這些標籤不能被軟件所識別,因此軟件很可能將之自動改掉(尤其FP,巨惡心)
1,仔細查看
FC2官方樣板參數說明文檔~~所有能用的標簽都在這裏。
可惜這都被擋了,我存了一份下來:
10. 有關樣板參數的設定|FC2部落格使用説明(繁體版)2,比較需要注意的是插件部分,FC2默認插件分為3大類,自我介紹、最新回復等固有機能都被默認歸類在插件內。而通常插件的排布位置是比較單一的。因此如果要做更自由的排布,擺脫普通模式的話,就需要將這些固有機能給單獨拿出來~~
要拿出來有兩種方法:
一種是參考說明文檔自己寫;
另一種是去官方插件的【編輯HTML】那裏複製代碼出來。
第二種比較省心保險/w\
只要將代碼拿出來,再自己插入到需要的地方就好了。
這樣做的好處是板式極為自由,壞處是泛用性降低。
如果只是做來自用的話,倒是推薦這樣做。
· 此Skin裏的技術成分下面是本Skin製作時所用到的一些技巧,當作參考~~
Skin截圖:

(使用
Super Screenshot!網頁截圖工具 截圖)
PNG透明圖像
這個skin運用了png透明圖像,如圖管理人頭像,上面就覆蓋了一張透明度為50%的「關於我…」小貼紙,這樣既可以隨時換圖,小貼紙又會一直覆蓋在圖上方,簡單的做成圖像處理~~
這個的詳細教學可以看這裏:
CSS圖片裝置藝術不過IE6是無法看到這個效果的。
圓角運用
代碼之前寫過了,在這裏:
CSS圓角邊框運用完美底部footer這個效果要在頁面很短時顯現出來,底部的橫條會隨著頁面的長度,自動保持在瀏覽器窗口最下方。這個的教學在:
實現完美的 footer 底部排版文字MENU裝飾
頂部的MENU,是利用背景圖片重疊+變換做出的,文字被寫在HTML裏,
這樣的好處是可以輕鬆修改MENU,而不必重新製作圖片。
這個方法我比較推薦大家使用,來詳細的解說一下~~
我們先來看HTML代碼部分:

(點開看大圖Orz)
這部分以 div 做包容,以 li 做分割,這樣的寫法結構清晰。
而同時對應的CSS代碼為:

(點開看大圖Orz)
這部分定義了MENU的背景圖(一整條),並利用 a:hover 鏈接屬性,定義mouseover時區域背景圖變換。變換的背景圖用一張透明度為50%的白色PNG圖代替,因此就出現高亮效果。
同時,a:hover 還可以定義字體屬性。
這裏也應用了 text-shadow 來做成字體陰影。不過因為IE系列讀不到,是否要用就自行斟酌吧。
PS:這一塊的代碼並沒有寫的很完善,HTML那邊把分割圖片也包容進去了。按理說圖片應該都交由CSS處理。但為了讓MENU區塊的寬度可以隨文字長度自由變化,因此就出此下策……Orz
所有利用到的圖片資源為:
MENU背景圖

覆蓋用透明PNG圖

分割線圖
分類模塊CSS裝飾
這裏運用了 li 標籤來進行親分類和子分類的分別裝飾。
代碼部分不難,主要是根據FC2提供的標簽來分別寫入,最後給 li 賦予CSS樣式即可。
其他沒什麼有技術含量的東西了,可以看到我大部分也都是現學現賣啊哈哈哈,
所以寫skin其實不難,難的是板式設計。不過那又是平設的幹活了……
* 注1:這是一個真實事件。某日,AYAKI和我各吃10個鍋貼。AYAKI多給了我1個鍋貼,於是我說「那你比我少吃1個呀」……發現了嗎,是的,AYAKI比我少吃2個鍋貼………………我真的是連1+1都不知道怎麼算呀!(摔碗)
» Hide Reading