[Blog] 樣式二 youngbutstrong 樣式二 youngbutstrong 下載網址 http://www.serendipity-templates.org/template/60-youngbutstrong/ ========================================================== Serendipity templates youngbutstrong 為架構清楚的Blog樣式，DIV建構方式清楚明瞭，圖像也使用較簡潔的設計方式 首先了解基本的檔案內容： 相較於 Brown-paper 有較多部分設定的樣式檔(.tpl ) 1.主要以index.tpl 作為部落格基本架構設定，為基本的Layout編排架構設定 2.entries.tpl：以文章為單位，不同形式的設定，內容較為複雜 3.plugin_calendar.tpl：月曆列的設定 4.plugin_categories.tpl：目錄列的設定 5.sidebar.tpl：側邊欄(導航列)的設定 6.style.css：設計樣式 7.functions_entries_admin.inc.php： 8.info.txt：版權聲明 9.preview.png 預覽圖片 ========================================================== index.tpl 基本架構 [img]http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/youngbar-1.jpg[/img] http://mepopedia.com/forum/read.php?804,14953,14953#msg-14953 Fri, 23 Oct 2026 15:46:57 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,14953,15129#msg-15129 Re: [Blog] 樣式二 youngbutstrong http://mepopedia.com/forum/read.php?804,14953,15129#msg-15129
以youngbutstrong延伸的設計

1.[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-20_031835.jpg]原有樣式[/url]

2.[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-20_024051.jpg]YoungButStrong (Angela)[/url]

3.[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-20_024205.jpg]YoungButStrong (Elena)[/url]

4.[url=http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/2011-07-20_031007.jpg]My Blog,My Life[/url]]]> JinJin 網頁設計與語法（HTML/CSS） Wed, 20 Jul 2011 03:25:04 +0800 http://mepopedia.com/forum/read.php?804,14953,15016#msg-15016 佈局說明與CSS疏漏補充 - Re: [Blog] 樣式二 YoungButStrong http://mepopedia.com/forum/read.php?804,14953,15016#msg-15016
1. 第15行 body{} 裡面的 color 少打了冒號 ( : )。

2. 第96行的 #footer_sponsors {} 應該要加上 margin: 0 auto; 這樣 #footer_sponsors 才會置中。


接下來說明 index.tpl 與 style.css 相互搭配而構成的整體佈局。同時參考上文 JinJin 老師所畫的圖示。

學習重點：指定寬度的雙欄式佈局－DIV float 的運用

1. 整個頁面是以 div#container (紅色大框的那一塊) 為主進行排版。裡面包括 logo、ad_space、top、content、footer 五塊子 DIV。整個佈局的重點在以div#content中的 #left 和 #right 作為雙欄式佈局的核心。以下對 container 作簡要的介紹。
div#container { width: 850px; background: #342b22 url('{TEMPLATE_PATH}images/bg_body.jpg') repeat-y; margin: 0 auto; overflow: auto; } 這裡的 margin: 0 auto; 的意思是，上下margin是 0px，左右是置中(auto在margin中的效果就是置中)。在CSS的 margin 或 padding 簡寫中，若是遇到margin後接兩組數字，就是指上下margin共用第一個值，左右margin共同第二個值。所以，例如 margin:10px 15px; 意思就是上下各是10px margin，左右各是15px margin。

另外，overflow: auto; 是指若 container 裡面的內容左右或上下超過了原本的寬度或高度，要超出欄位呈現、只顯示欄位寬高的內窩，或是產生左右或上下的scroll bar以供捲動。這裡的 auto 的意思就是若左右超過了原有寬度就會在左右方向出現 scroll bar 可以捲動，若上下高度超過亦然(若設定為 scroll 則會左右和上下的捲軸同時出現)。

這個 div 最後要注意的是寬度設定為 850px，一般指定寬度(相對於width: 100%的全幅寬度)的雙欄式佈局可以以底下會介紹的 float: left 和 float: right 作佈局設定，若是全幅寬度的雙欄佈局，若用 float 在一些特殊情況會遇到問題。

2. #logo 與 #ad_space
這二個 div 可以視為一組，仔細觀察可發現裡面分別運用了 float: left 與 float: right，目的就是讓這二個 div 平行地並列，一個置左，一個置右，可以算是對後面 div#left 和 div#right 的雙欄佈局的預習。

float 就是「飄浮」，可以想成是咖啡的飄浮冰淇淋，設成了 float 了之後就會像飄浮冰淇淋一樣飄了起來，不會和其他的冰塊擠在一起。你要它向左它就向左，你要它向右它就向右。而且，很重要的是，它不會像巧克力分層或牛奶分層，一個人就占了一整層 (就像DIV一樣，一個 DIV 就占了100%的寬度，使得其他 DIV 就要換行，排在下面)，如果向老闆加錢的話，他是會給你二個「並排」的 DIV 的（冰淇淋）。


層次分明的冰咖啡剛好體現了 DIV 在設定為「飄浮 float」前層層獨立的特性（而且這張居然剛好是我常去的 ORSiR咖啡的教學網頁）

不過言歸正傳，以比較專業的角度來說，當一個 div 設定為 float 之後，它的「呈現屬性」(display)就會從占據整行的 display: block，轉變為只占據「內容寬度」的 display: inline。inline 的意思也就是如果 div 裡面只有「飄浮冰咖啡」五個字的話，這個 div 的寬度就只有五個字的寬度，如果後面再接了也是 inline 的「鮮奶油也很好吃」的話，這二個 div 就會接再一起，不會換行。

例如：
原始碼：<div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div>結果：
飄浮冰咖啡
鮮奶油也很好吃

我們可以發現雖然我們是用二個 DIV，但結果二段文字卻是連在一起。

(續)
div#logo { width: 374px; height: 90px; background: #ffffff url('{TEMPLATE_PATH}images/logo.gif') no-repeat; float: left; } div#ad_space { width: 476px; height: 90px; background: #ffffff url('{TEMPLATE_PATH}images/ad_space_bg.gif') no-repeat; float: right; } ]]> HP 網頁設計與語法（HTML/CSS） Mon, 11 Jul 2011 20:48:14 +0800 http://mepopedia.com/forum/read.php?804,14953,14953#msg-14953 [Blog] 樣式二 youngbutstrong http://mepopedia.com/forum/read.php?804,14953,14953#msg-14953 下載網址
http://www.serendipity-templates.org/template/60-youngbutstrong/

==========================================================

Serendipity templates
youngbutstrong
為架構清楚的Blog樣式，DIV建構方式清楚明瞭，圖像也使用較簡潔的設計方式


首先了解基本的檔案內容：
相較於 Brown-paper 有較多部分設定的樣式檔(.tpl )

1.主要以index.tpl 作為部落格基本架構設定，為基本的Layout編排架構設定
2.entries.tpl：以文章為單位，不同形式的設定，內容較為複雜
3.plugin_calendar.tpl：月曆列的設定
4.plugin_categories.tpl：目錄列的設定
5.sidebar.tpl：側邊欄(導航列)的設定

6.style.css：設計樣式

7.functions_entries_admin.inc.php：

8.info.txt：版權聲明
9.preview.png 預覽圖片

==========================================================

index.tpl 基本架構

[img]http://www.mepopedia.com//blog/templates/brownpaper-jinjin/img/youngbar-1.jpg[/img]]]> JinJin 網頁設計與語法（HTML/CSS） Sun, 10 Jul 2011 09:55:44 +0800