Scribd Logo
Upload

Welcome to Scribd!

  • Blog Design

    Uploaded by

    api-3702606
    108 views24 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    108 views24 pages

    Blog Design

    Uploaded by

    api-3702606

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 24

    Blog 版面設計

    Blog 版面剖 析

    body

    container
    banner

    　　在這邊一共包含五個部份，” body” 、
    ”container” 、” banner” 、” left” 及” center” ，這五
    部份形成一個包一個的巢狀架構。在較外層的地
    left center 方，主要是設定這一區塊的大小和位置，在較裡
    層的地方，則是設定這一區塊的顏色、字體、邊
    線等等格式。而在 Blog 的 CSS 中，它的名稱也有
    些許的不同，像是” left” 這個區塊就由” links” 和
    ”menu” 所取代，不過基本上的設定還是相同的。
    Blog 版面剖 析
    Blog 版面剖 析

    本課程預定完成結果：
    Blog 版面設 計
    Blog 版面設 計

     　　在構想好了自已想要的版面後，
    便可開始動手修改自已的 Blog 囉！

    一開始我們先來看 body 這個部份，裡


    面有一段程式碼如下：

    body {
    margin:0px 0px 20px 0px;
    /* 四週的留邊，上 0 點；右 0 點
    ；
    　下 20 點；左 0 點 */

    background:#FFF;
    /* 背景為純白 */
    }

    　　這個部份即是最外圈的 body ，若
    想改變底色及最外圈網頁四週的留邊的
    話，可以修改此處，在這邊我們把背景
    Blog 版面設 計

    #banner {
    font-family:palatino, georgia, verdana, arial, sans-serif;
    /* 字體的設定 */
    color:#333;
    /* 字體的顏色 */
    font-size:x-large;
    /* 字型大小為 x-large */
    font-weight:normal;
    /* 字體的粗細 */
    padding:15px;
    /* 區塊內的留邊 , 設為 15 點 */
    border-top:4px double #666;
    /* 上邊線粗 4 點 , 兩倍實線 , 顏色為 #666 */
    }
    Blog 版面設 計

    　　在這邊有一個要注意的地方，如果的你 #banner {
    的 banner 是一個圖檔的話，那麼便要注意 position: relative; z-index: 1;
    ， color:#ffffff;
    background-position:right;
    要把 padding 改成 0 點，上下邊線的設定也
    background-repeat:no-repeat;
    拿
    background-image: url("image
    掉，高度也要和你的圖檔高度一樣，否則會 /robottitle.gif");
    有很奇怪的結果。有可能會出現歪掉 banner /* banner 背景圖片的相關位址 */
    ，甚至會蓋到下面的文章。 font-size:large;
    font-weight:normal;
    padding-top:20px;
    　　在這裡我們放一個圖檔來試試，先將任
    padding-bottom:200px;
    一圖檔備妥放到 blog 的資料夾中，這邊我用 padding-right:90px;
    的是這個圖檔 BlueRobot padding-left:290px;
    ( margin-right:30px ;
    }
    http://www.sucharaka.jp/blog/archives/img/robottitle.gif
    ) ，上傳到 \image 資料夾中，然後將剛
    才的程式碼改成右列這串：
    Blog 版面設 計
    Blog 版面設 計

    　　經過上面的練習，是不是已經知道如何設計自已想要的 Blog 的版面了


    呢？接下來我們來實際操作一次，把整個 Blog 的版面來個大改造。

    Step 1 ：將 body 內 background 的值改為 #cee


    body {
    margin:0px 0px 20px 0px;
    background:#cee;

    Step 2 ：將 .blog 及 blogbody 內 background 的值皆改為 #ece


    .blog {
    background:#ece; }

    .blogbody {
    background:#ece;}
    Blog 版面設 計

    Step 3 ：將 .side 內 background 的值改為 #cfc


    .side {
    background:#CFC;
    }

    Step 4 ：將 .calendar 內 background 的值改為 #ec4


    .calendar {
    background:#ec4;
    }
    Blog 版面設 計

    重建後結果就會變成這樣：
    Blog 版面設 計

    　　若你實在是懶得去設計這些網頁的話，這邊還是提供了一個
    可以馬上讓你的 Blog 變得美美的方法 ~~ 那就是套用網路上許多
    別
    人做好的樣版及模版的程式碼，讓你的 Blog 有如灰姑娘一樣，瞬
    間變得閃閃動人。

    　　在這裡我利用一個日本的樣版網站來做實際操作說明。首先
    ，
    先連到すちゃらか CSS 素材集 (
    http://www.sucharaka.jp/blog/)
    這個日文網站，這裡面提供了有趣的樣版讓人選用。
    Blog 版面設 計

    先選擇分類選單中的“ MovableType2 段用”選項


    Blog 版面設 計

    進入後便能看到它所提供的一些 blog 樣版，在這我們選用 BlueRobot(MT)


    來
    做測試。
    Blog 版面設 計

    進入後會看到下面的圖示，在這邊它提供了一個結果的範例圖供人參考。
    Blog 版面設 計

     首先，先將該頁面下半部所列出的圖檔先存到本機端的資料夾中，接著
    再將它所提共的 styles-site.css 、 Main Index 、 Category Archive 的程
    式碼複製到自已的 Blog 相同的位置，記得要將圖檔的相對位置設定好
    ，然後重建 Blog 後就可以看到自已 Blog 來個大變身啦 ~~

    body ： .title ：

    #banner ： #links ：

    .blogbody ： .side ： .sidetitle ：


    Blog 版面剖 析

    最後的完成結果， Blog 是不是變得很可愛呢 ^_^


    附錄： 相關網路資 源

    – http://www.blogskins.com(blog 樣版 )
    – 憂鬱馬戲團 (MT 初心技及 CSS 教學 )
    – http://www.nivlac.com/site/(blog 樣版 )
    – http://www.blogstyles.com(blog 樣版
    – http://love-productions.com/graphics/setlist.html(blog 樣版 )
    – すちゃらか CSS 素材集 : Movable Type アーカイブ (CSS 樣版設
    計)
    串接樣 式表
    (Cascading Style sheet CSS) 概要

    　 　　「串聯式排版樣式表」簡稱 CSS ，為 W3C 於 1996 年 12 月 07 日


    公佈的正式標準，係因應 HTML 所發展之簡單機制，其目的在提供使用
    者自行定義網頁內的文字（ Text ）、連結（ Link ）及標題（ Title ）等
    內容顯示方式之功能。

    　 　　藉由 CSS ，網站建置者能針對網頁（ Web Page ）多個組件之配


    置與樣式，進行更加精確地控制，只要簡單修改對應之代碼，即可改變
    同一頁面之不同部分，或頁數不同之網頁的外觀和格式。

    　 　　 CSS 語法的產生，促使頁面展現方式與本文分開，減少重覆設定
    的工作。其設定對象不僅包含文字，還囊括圖片與媒體的呈現，以往一
    些必須透過圖片轉換方能實現之功能，透過 CSS 即可輕鬆達成。因無
    須經由圖片轉換，亦可直接改善頁面下載之速度。
    CSS 語法定義

     CSS 的語法定義基本上如以下的形式：
    <style>
    slector {property:value; property:value; ....}
    </style>

    第一種 selector 方式是以指定 HTML 元素樣式的方式定義，比如 FONT 、


    BODY 、 TD... 等等
    第二種 selector 方式是以 CLASS 元素樣式的方式定義
    第三種 selector 方式則是以 ID 樣式的方式定義
    第四種 selector 方式則是以 inline 樣式的方式定義
    第五種 selector 方式則是以 Contextual 樣式的方式定義

    property 則是指要修改的性質，如 boder 、 font-color 、 font-size... 等性質，


    value 則是給予 property 的值，如： P {color: #FF0000; } 或 P {color: red; }
    CSS 語法定義

     內嵌式：  外部載入式：

    <head> <head>
    <style> <link rel=stylesheet type="text/css"
    <!-- href="styles-site.css">
    #slidemenubar, #slidemenubar2{ </head>
    position:absolute;
    left:-155px;
    width:160px;
    top:0px;  檔案 styles-site.css 內容：
    border:1.5px solid green;
    background-color:skyblue;
    layer-background-color:skyblue; body {
    font:bold 12px Verdana; margin:0px 0px 20px 0px;
    line-height:20px; background:#FFF;
    } }
    --> A { color: #003366; text-decoration: underline; }
    </style> ………
    </head>
    CSS 語法定義

    HTML 元素樣式
    說明：當 slector 為 HTML 元素名稱時，瀏覽器會以 HTML 元素本身的特性為依據，再
    加上
    此部分之 HTML 元素樣式設定，以增加 HTML 元素本有的特性，來呼喚使用。
    設定格式： HTML 元素名稱 {property:value; property:value; ....}
    　　範例： A { color: #003366; text-decoration: underline; }
    CLASS 元素樣式
    說明： 在 CSS 中做設定，針對群族做樣式處理，以達到使用同一個 HTML 元素名稱時
    ，
    有多個不同樣式設定的選擇。
    設定格式： HTML 元素名稱 .CLASS 樣式名稱 {property:value; property:value; ..}
    　　範例： A:link{ color: #003366; text-decoration: underline; }
    ID 樣式
    說明：針對單一元素做樣式設定，以配會不同 HTML 元素名稱，皆可使用此樣式設定。
    設定格式： #ID 樣式名稱 {property:value; property:value; ..}
    　　範例： #menu {margin-bottom:15px;background:#FFF;text-align:center;}
    Blog 版面設 計

    •　　在暸解了 Blog 版面的架構及模版和 CSS 樣式表的關係之後，我們便可以


    開始構想自已的個人化版面。當然，在著手實作之前，還有些東西要先熟悉才
    能更加的得心應手。

    以下是一些可供參考的網路資源：
    1 、十六進位顏色碼對照表 (copy from 9W 個人設計工作室 )
    　網址： http://www.9w2u.com/htmlbook/hexcolorcode2.asp
    2 、 CSS 性質參考資料表 (copy from 台灣力協訊息中心 )
    　網址： http://www.casys.com.tw/news/ReadNews.asp?NewsID=3
    3 、 CSS 實務排版技巧、秘訣與技術 (copy from CSS 實務排版技巧、秘訣與技術 )
    　網址： http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/

    You might also like