life is ... ?

喔自以為是的寫了這篇文章
總之想要知道的人就點進來點進來吧


第一步，css要摸熟

不用我說這一定是必備的條件
我還是不太喜歡用wretch的小幫手之類的東西
畢竟css不難，花個一星期到cenay oec的網站研究css的用法我覺得是必備的，如果你想要你的blog很漂亮的話
當然是因為我有做網頁的底子（畢竟以前管過幾個網站）
所以在做blog的版面時，我只要清楚div的先後順序，做起來就很順手
但如果你是初手，很抱歉還是需要把css研究徹底

以下摘用糖糖在Css教學的說法CSS是Cascading Style Sheets的縮寫
我們中文稱為「串聯樣式表」
CSS有甚麼好處？為甚麼要學呢？
以下說明幾點你就會發現使用CSS的好處

它能讓我們更精確的控制網頁版面的文字、背景、字型等...
它能只修正一個CSS文件，便可同時更新眾多的網頁版面外觀及格式。
它可以使html的文件內碼更精簡，縮小檔案下載的速度。
它適用於各種作業平台。

也就是說，學習css還是做出漂亮blog版面的基本必備條件（當然如果你是用日本fc2的blog，就必須要有會做網頁的必備條件了）
當然糖糖的解說是適用在網頁或是說網站上面比較適當
像是如果你寫好了css，只要套用在你的網站上，以後你想要改版的時候就不用一次把網頁全改了，只要改變你的css這個檔案，就可以把所有網頁的樣式給改變。
這對於做網站的人來說是非常方便的，因為改版是滿花費時間的。
但當然最吸引做網站者的特點還是應用於各種平台，畢竟你還是想把自己精心之作給大家欣賞。

第二步，fp、dw速成法

所謂的FP就是FRONTPAGE這是我的簡稱法(笑)
而DW當然就是DREAMWEAVER了
為什麼需要這兩樣軟體呢？
其實這在你測試BLOG或是搞清楚DIV和class的屬性順序是非常方便的那什麼是div和class呢？
Blog的版面是怎麼形成的呢？或許你會這樣問
呃，通常來說，其實他的結構是非常簡單的，你只要把他想像成一張大紙裡面放著許多小紙片
我們把大紙叫做html
而這些紙片就叫做div或者是class
div及class真正要講起來，他的寫法其實沒什麼不同（關於DIV和CLASS可以去candy oec參考他的說法）
只是div的開頭要加個#字號
class要一點.
也就是說html裡包含了許多div 紙片，而這些div和CLASS紙片就需要用css的方法去制定他的大小及顏色

以無名的慣用的css語法舉例：
顯現書寫日期的塊紙片叫做.date
由此知道他是class的屬性那怎樣設定顯示日期那一塊紙片的設計呢？
很簡單只要寫成

.date{
background:black;
}

由這一行你可以知道，我將要把日期這一塊紙片的background，背景，設成black，黑色
只要記得在結尾寫個;
這是分隔每一種屬性的辦法
怎麼樣很簡單吧！
當然還有許許多多寫法
而這就要看你怎麼活用css了

我們再來舉個例子吧
這一次，我要藉由css來設定日期那一塊紙片的大小，我們只要寫成

.date{
width:150px;
height:30px;
}

由此知道，我們要把width，寬度設成150px
高度設成30px
px就是pixel，中文翻譯成像素(註一)

由此你可以慢慢推知，blog就是一張大紙，我們只要把每個小紙片，class，div給設定好，就可以得到一個漂亮的blog

那怎麼知道這些紙片的順序呢？

有一個很方便的方法，把blog的原始檔複製起來，然後貼到FP或者是D W的原始碼上，再來一一比照他的屬性，就可以知道哪個東西的紙片屬性叫做什麼名字
用說的不清楚，再來舉個例吧
(這個例是我亂掰的，不用拿來用唷～！！！)

如果你複製你的blog原始碼貼在fp或者是dw上後
發現有這一段東西

<div id="extend">
...繼續閱讀
</div>

一開始我們要來判斷他是什麼屬性
看到第一行，是div開頭對吧！但這還不表示他是div屬性唷
你要看到id這一個關鍵字！
如果他是id，那就表示他的屬性就是div了！

如果變成這樣

<div class="exte nd">
...繼續閱讀
</div>

有div又有class，他的屬性到底是什麼？
答案是class

你看出有什麼不同了嗎？
關鍵就是 id or class="紙片名字"
沒錯，這就是關鍵那現在我們回到原題

<div id="extend">
...繼續閱讀
< /div>

從上面的語法，你就可以知道說＂...繼續閱讀＂這個＂紙片＂叫做extend
他的屬性是div藉由這樣反覆的查詢，你就可以知道哪一個紙片是叫什麼名字
這樣你寫css也就比較方便了，不用一個個去驗證！

(註一)這裏附上像素的解釋
摘自lovepixel網站
何謂像素
像素(pixel)是組成電腦數位影像(點陣圖)的最小單位。你可以試著在看圖軟體把點陣圖檔放大，
你會發現這些圖檔其實是由一個一個小方塊所組成的，這些小方塊稱之為像素(Pixel)

第三步，要有製圖的底子

如果你是喜歡簡單風格的人，那或許你不太需要這樣能力
但如果你是喜歡有些創意、有些華麗、有些POP風格的人
那我想你的製圖底子，必須要有一定的功夫就拿我們在第二步舉過的例子來講好了

.date{
background:black;
}

上頭語法是在設定書寫日期那一塊的顏色
但單靠顏色的拼排，是不太可能可以做出多麼華麗或者是POP風格的blog的
而這時候如果你把背景改成了一張漂亮，經過設計的圖片，或許你就可以做出你想要的感覺
我們就可以把他改成

.date{
background:url(http://圖片的網址.副檔名);
}

這樣你的書寫日期紙片裡的背景，就是你喜歡的圖片（當然你的紙片大小也要設定成圖片的大小，這樣才可以完全的把圖片顯示出來）
通常我做blog的順序是這樣的

1 先用photoshop或者是photoimpact這兩樣製圖軟體畫好圖片

在構圖的時候就要決定哪裡是要擺放日期的位置
哪裡是擺放文章的位置…等等等

2.把畫好的圖片切割

banner區有banner的背景
文章擺放區有文章的背景
一一把他切割好
這樣你的紙片＂組合＂起來時，才有完整網站的感覺

3.上傳圖片，開始寫語法
我會一邊測試，一邊寫，一邊修改
這樣才知道哪裡做個不夠，或者是哪邊的圖片需要修

4.最終就是完成了

測試好你的blog，確定他已經是你想要的樣子後，就可以把css分享給大家讓他們使用了
或許剛開始你會不滿意你的作品，但所有事都一樣，需要的就是練習
就算是現在的樣式達人，或者他以前做出來的東西現在來看他也會覺得一點都不像他做出來的東西(笑)