Blog Design
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Blog Design as PDF for free.
More details
- Words: 660
- Pages: 24
Blog 版面設計
Blog 版面剖 析 body banner
left
center
container
在這邊一共包含五個部份，” body” 、 ”container” 、” banner” 、” 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 是一個圖檔的話，那麼便要注意 ， 要把 padding 改成 0 點，上下邊線的設定也 拿 掉，高度也要和你的圖檔高度一樣，否則會 有很奇怪的結果。有可能會出現歪掉 banner ，甚至會蓋到下面的文章。
#banner {
在這裡我們放一個圖檔來試試，先將任 一圖檔備妥放到 blog 的資料夾中，這邊我用 的是這個圖檔 BlueRobot ( } http://www.sucharaka.jp/blog/archives/img/robottitle.gif ) ，上傳到 \image 資料夾中，然後將剛 才的程式碼改成右列這串：
position: relative; z-index: 1; color:#ffffff; background-position:right; background-repeat:no-repeat; background-image: url("image /robottitle.gif"); /* banner 背景圖片的相關位址 */ font-size:large; font-weight:normal; padding-top:20px; padding-bottom:200px; padding-right:90px; padding-left:290px; margin-right:30px ;
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 ：
.blogbody ：
#links ：
.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; ....} 第一種 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 語法定義
內嵌式： <style>
外部載入式：
檔案 styles-site.css 內容： body { margin:0px 0px 20px 0px; background:#FFF; } A { color: #003366; text-decoration: underline; } ………
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/
Blog 版面剖 析 body banner
left
center
container
在這邊一共包含五個部份，” body” 、 ”container” 、” banner” 、” 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 是一個圖檔的話，那麼便要注意 ， 要把 padding 改成 0 點，上下邊線的設定也 拿 掉，高度也要和你的圖檔高度一樣，否則會 有很奇怪的結果。有可能會出現歪掉 banner ，甚至會蓋到下面的文章。
#banner {
在這裡我們放一個圖檔來試試，先將任 一圖檔備妥放到 blog 的資料夾中，這邊我用 的是這個圖檔 BlueRobot ( } http://www.sucharaka.jp/blog/archives/img/robottitle.gif ) ，上傳到 \image 資料夾中，然後將剛 才的程式碼改成右列這串：
position: relative; z-index: 1; color:#ffffff; background-position:right; background-repeat:no-repeat; background-image: url("image /robottitle.gif"); /* banner 背景圖片的相關位址 */ font-size:large; font-weight:normal; padding-top:20px; padding-bottom:200px; padding-right:90px; padding-left:290px; margin-right:30px ;
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 ：
.blogbody ：
#links ：
.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; ....} 第一種 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 語法定義
內嵌式： <style>
外部載入式：
檔案 styles-site.css 內容： body { margin:0px 0px 20px 0px; background:#FFF; } A { color: #003366; text-decoration: underline; } ………
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/
Related Documents
Blog Design
October 2019 5
Design Cycle- Blog
April 2020 6
Design Cycle- Blog
May 2020 5
Blog Blog
June 2020 44
Blog
April 2020 42