自Miss Melody部落格成立到現在,一直都還沒著手修改版型的原因是對CSS很陌生,知道CSS的用途、看得懂簡單的CSS語法,但說到底要派得上用場來修改模板還有好大一步要跨越,我的程度若以學css前要準備什麼?這篇關於CSS介紹的文章來衡量,能回答的出來的只有Q1、Q2、Q5,所以無庸置疑…得認證自己是「css完全初學者」。
你是css完全初學者嗎?
你對CSS的了解有多少? 你是CSS完全初學者嗎?
試著回答學css前要準備什麼?這篇文章列出的10個問題,
如果以下10個問題,你有7項都符合你的狀態,那你就符合「css完全初學者」。
1.如果不查資料,我不知道css的全名是什麼?
2.在我的印象裡頭,css就等於是讓排版美觀的意思。
3.我不懂html,也不懂怎麼把html還有css兜在一起。
4.看到很漂亮的blog(ex.muki :p),我會發自內心的讚嘆。卻不會去思考blogger如何建構他的排版。(意思就是我不會去想他怎麼分割、怎麼寫...就只是單純欣賞.羨慕)
5.如果不查資料,我不懂margin以及padding的差別。
6.我一直不能理解標籤怎麼控制我的版面
7.打開一份css文件,我不懂要從何開始學習、觀看,甚至修改。
8.如果我成功的修改了字型大小、顏色還有超連結的狀態,我會覺得自己很厲害。
9.給我一份完全沒有css標籤的html檔案,我沒辦法獨力將他加上標籤、搭配css呈現出來。
10.我真的很想學css,可是我不知道從何學起。
如果你符合「css完全初學者」,那就跟我一樣找Blogger template模板教學課程---CSS外觀解說開始入門或者買/借一本淺顯易懂的CSS書,一起從基本概念開始學起吧。
部落格模版CSS基本結構
為了方便修改Miss MelodyCSS模版能馬上進入狀況,我把部落格模版CSS基本結構說明直接套上Miss Melody的CSS外觀做成圖解說明,並且把一些重要的元素、參數用法摘要在旁,這樣就可以一目了然看出CSS基本結構與實際樣式的相對應關係。
‧ Body 整個網頁的主體
‧Outer-wrapper 網頁大小layout的範圍
‧ Header-wrapper 標題區塊的範圍
‧ Content-wrapper 網頁內容區塊的範圍
‧ Main-wrapper 主文區,包含
#main這個網頁元素,#main這個元素內通常包含:
*(.post h3)文章標題
*(.date-header)日期
*(.post)內容
*(.post-footer)文章相關資訊,例如:
-(posted by)創作者、發佈時間、(comments)意見及文章分類等
‧ Sidebar-wrapper 側欄區
‧ Footer-wrapper 頁尾區
‧ h1~ h6 網頁元素的標題的字型大小
CSS基本結構說明
‧ Body 整個網頁的主體
通常不用設寬度,只要設底色,但如果有用固定背景圖,則建議要設,控制網頁的展示
‧Outer-wrapper 網頁大小layout的範圍
如果你想設計1024*768大小的模板,就要在此定義width的大小(例:width:990px;)
如果你想依解析度大小彈性運用,這裡就要設百分比(例:width:95%;)
‧ Header-wrapper 標題區塊的範圍
這個區塊通常包含#header這個網頁元素及.description(網誌形容),較高階的這裡會放導覽條(menu_bar或header_menu)
‧ Content-wrapper 網頁內容區塊的範圍
內容區塊包含main-wrapper(主文區) 與 sidebar-wrapper(側欄區),寬度要設好,要預留邊界的空間
sidebar往下掉大多是因為寬度不夠、文章裡的圖片超過post的寬度、或是sidebar裡的widget超過sidebar寬度
這些都可以透過修改寬度或利用overflow:hidden;來避免
‧ Main-wrapper 主文區
這個區塊通常包含#main這個網頁元素,#main這個元素內通常包含以下資料:
*(.post h3)文章標題
*(.date-header)日期
*(.post)內容
*(.post-footer)文章相關資訊,例如:
-(posted by)創作者、發佈時間、(comments)意見及文章分類等
-很多人勾選了版面配置的網誌文章編輯,還是無法控制這些元素的出現或隱藏及移動位置,
原因是使用非官方設計的模板,所以更改後還是沒有效果,這時就要利用html裡面的語法來作調整。
* 這裡還可以加些讓文章內容格式更漂亮、更專業的元素,例如利用:
-blockquote,引用他人文章的區塊設計。
-code,程式碼的外觀設計。
-讓文字加上底線,顯示重要性。
‧ Sidebar-wrapper 側欄區
側欄區是可以放至很多widget(小工具)的地方,有的模板會分兩欄、三欄,或是綜合式(多欄)模板,
這裡寬度控制更要留心,儘量讓widget寬度與邊線預留5px的空間。
‧ Footer-wrapper 頁尾區
一般多放置會放網站連結、版權宣告、模版設計來源,後台登入等資料。
‧ h1~ h6 網頁元素的標題大小
通常用來定義元素的標題大小,大部分模板都是如此定義,但也有少數有自己獨特定義的型態。常見的是:
* #header h1 網站標題
* h2.date-header 每篇文章日期的格式
* .sidebar h2 ,邊欄的標題,例如最新文章、最新回應
* .post h3 文章標題
* #comments h4,意見,文章下方顯示幾則意見的文字格式。
Miss Melody目前使用的h1~h6 CSS樣式如下,進入Blogger後台-->範本設計工具—>進階-->新增CSS
複製以下CSS宣告,貼上、套用至網誌後就會生效:
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4 { font-size: 1em; margin: 1.5em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6 { font-family:Arial,Verdana,Sans-Serif; font-weight: bolder }
為了更熟悉這些CSS結構設定關鍵字,我在部落格後台: "http://www.blogger.com/blogger.g?blogID=你的部落格編號#template" 複製了部落格模板的html,利用搜尋key word的功能找出各種結構在程式碼裡的位置與寫法來加深學習的印象。你也可以試著這樣做做看,效果應該很好!!
沒有留言:
張貼留言