網頁

2013年4月9日

從零開始學CSS-部落格模版CSS基本結構

Tag:

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 網頁元素的標題的字型大小

Miss Melody 部落格模版 CSS基本結構

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 }

Blogger- Miss Melody - 範本設計工具

為了更熟悉這些CSS結構設定關鍵字,我在部落格後台: "http://www.blogger.com/blogger.g?blogID=你的部落格編號#template" 複製了部落格模板的html,利用搜尋key word的功能找出各種結構在程式碼裡的位置與寫法來加深學習的印象。你也可以試著這樣做做看,效果應該很好!!

沒有留言:

張貼留言