The 4th letter 無名網誌的標籤

　　我覺得打完這篇後，只有我看的懂吧..orz，因為我只花了十幾分鐘打這篇，眼睛好痛，好像生病了…

　　無名blog的標籤其實以前少的可憐，沒有container所以以前只能用百分比型的版型，除非在body設width。 後來在今年(2005年)三月的時候加了很多標籤，直到現在才慢慢發現，有些加對了，有些加錯了。

　　其實當初標籤有些訂錯了，寫css的人不一定會找標籤，會找標籤的人才有辦法精通css，可是精通css的人卻 不一定會包標籤，這三個的差異一直存在著，可是我覺得，若是要包標籤，一定要給精通CSS的人包才行，懂程式、 懂HTML沒有太大的作用，因為標籤是包給寫CSS的人看的，訂的清楚明瞭、結構分明很重要，無名當初網誌標籤新增 的時候不容易，因為前提是，必須與之前的相容才行，也就是說，包完標籤以後，套上舊版的CSS，要能夠1 pixel 也不差，有這前提侷限住其實就不好包了。

　　慢慢來說哪些包對哪些包錯了，當初我在container包了兩層，分別為container和container1，結果有使用 者唉唉叫，原因是因為他不知道去哪個站copy來的CSS，裡頭有針對container做設定，因此只好將這兩個改為 container1和container2，container2的作用其實不大，幾乎不曾用到，之後發現其實可以在body跟container1 中間加個table，作用是當版型的高度是窄的時候，利用table的vertical-align屬性，可以把整個content的水平 位置移到中間，不過，加上table後container1裡的margin屬性值0px auto這個就沒用了，因此最後沒有加上table。

　　再來banner裡多了pageheader，其實名稱可以叫做banner和banner1之類的，可是我就是想用pageheader， 嘿嘿…這不是重點，pageheader還漫常被用到的，用途在於包第二層背景時。接著content和links被main2包起來 ，這個main2是19提議加的，很多人一定覺得很奇怪，為什麼要用main2不要用main阿或main1之類的，原因就是記取 了container的教訓後，乾脆用個別的站不會有的標籤，於是叫做main2，main2這個標籤很好用，當他設定width和 height後，加上overflow為auto，就可以有窄版型的效果了，1024*768的人好像很喜歡這個，不過有很多人背景都 亂設，以致於1280*1024觀看的時候，整個背景跑掉，在這裡提醒大家，若是container1有設margin為0px auto的 話，記得background-position要設50% 0%，若是container1沒有設定margin時，background-position就要設 left top。

　　另一個設標籤和其他網站(或網誌)不一樣的原因是，如此一來別人不能copy無名的css檔案去套在別的網誌，因為 標籤不一樣，雖然小小修改幾個就可以了，只是如此一來還是要會CSS的人去修改才行，我試過將無名的CSS套在樂多 日誌上，完成度幾乎80%了，我修改不到3分鐘它的外觀就有95%相似了。不過這只是陽春的樣式才如此，比較多變的樣 式的話可能就沒辦法套在樂多了，因為樂多標籤太少了。


　　.blog是舊的標籤，我在外層多加了content，因此最後大家常設定content，忘記.blog這個標籤的存在了，其實 他漫重要的，當content設定float後，其margin或padding在IE會有bug，數值會變成兩倍，意思就是說，float不能 和margin或padding同一時候使用，因為IE會出問題，這時候就可以在content設float，然後在.blog裡面設padding ，就可以解決這一問題了。

　　內文是date和blogbody平行，各兩個同性質的標籤，主要是用來包雙層背景用的，blogbody裡的最後還有 total-comments-div，這標籤的名稱很白話吧，我想出來的orz，就是全部回應的div，包的不是很好，因為沒有第二層， 所以回應欄的部分沒辦法做到上下圓角，雖然我之前是過在comments-body裡的form做設定，當作最底下的圓角，可是好像 有問題…忘了。

　　links是一個很複雜的東西，其實blog要做的好看，就是banner弄好，links弄精緻，content全都留白也沒關係， links的每一個box都有5個div，有兩個是舊的，分別是sidetitle和side，其餘三個，有一個包對了，兩個包錯了， 以boxProfile來講，五個標籤分別是#boxProfile, .boxProfile0, sidetitle, .boxProfile1, side，可是 其實.boxProfile0和.boxProfile1這兩個是不好的，必須用成sidetitle2和side2比較恰當，因為設定不一樣的 作用是給每一個區塊可以獨立設定樣式，只是每個box都已經有不同名稱了，子元素就可以訂成相同的名稱， XXX的地盤變成#boxProfile, .sidetitle2, sidetitle, side2, side五個，而最新的文章的box變成 #boxNewArticle, .sidetitle2, sidetitle, side2, side五個，若是要個別設定sidetitle2的話， 就可以用#boxProfile .sidetitle2和#boxNewArticle .sidetitle2這兩個來區分了，不過訂都訂了， 也沒辦法改了，真是抱歉欸。

　　這個方法是在做blog新首頁想到的。

　　其餘就是extradiv的部分了，反而變色龍用extradiv用的比網誌兇，extradiv總共有6個，可是真正能設定的 卻有12個，因為每個div裡又包了span，span是個行內型組件，且不會打斷文字流，預設的顯示型態是inline，可是 可以將span設定成block，就和extradiv的形式是一樣的了。而且extraDiv擺放的位置都不一樣，分成三個位置，extraDiv1和 extraDiv2在container2裡面，extraDiv3和extraDiv4夾在container1和container2中間，extraDiv5和extraDiv6 是在container1外面，原因是因為…怎麼說呢，舉例來說，若container1設寬度750，位置置中，位置為相對(relative)，那麼extraDiv1,2,3,4若設定 絕對位置，其基準點top, left是從container1開始計算，而extraDiv5,6是從body開始計算，因此若是某個版型其 extraDiv需要四個在body時，就可以設定container2的position為relative而不要設定container1，如此一來就可以很彈性 的要哪個extraDiv在外，哪個extraDiv在內了!

　　改blog的標籤其實還是件容易的事，前陣子在弄相簿首頁的時候，因為必須配合之前的廣告專案，所以除了table 都要轉成div外，舊的css套上去還必須一致，那時解決的方法是在外部連結css檔的上面多連一個fix.css，當新版首 頁整個架構出來後，去讀fix.css讓他的介面跑回和舊版的一樣，然後再去讀真正的CSS檔。

　　而包標籤的時候是在做blog首頁的時候才真正一個人從頭包到尾，因為會寫CSS了，所以包的算輕鬆，只是多了一點。

　　自己有空在做網站的時候，不妨認真的先把架構做出來，其餘的美工全交給CSS，試試看，你會知道…不好包，可是 包完後，你改版可容易多了，改個CSS檔，外觀全都不一樣。

　　最後我要說，再過幾年，這些標籤都是賽了，都沒用了，包了兩層的原因是為了可以設定兩層的背景，可是等到CSS3 出了以後，支援多層背景的background屬性，一個一個的div就變大便被採在地上沒人要用了。

You can leave comment to this collection

Collection Category: 未分類(0) Add Collection Category
Collection Comment: