[討論]風格修改教學 ~ 藍色的天空

phpBB 2 Style Support
討論的範圍包含版面排列、樣式、配置;外掛問題,請到相關版面依發問格式發表!
(發表文章請按照公告格式發表,違者砍文)

版主: 版主管理群

.::藍色的天空::.
竹貓忠實會員
竹貓忠實會員
文章: 587
註冊時間: 2003-09-14 17:29
來自: 我不知道
聯繫:

[討論]風格修改教學 ~ 藍色的天空

文章 .::藍色的天空::. »

做一個 phpBB 的風格, 會先理解什麼是 Header, Footer, Main:

Header: 就是論壇的開頭部份, 看到常見問題, 文章搜尋等等的就是 Header.
Footer: 就是論壇的結尾部份, Powered by phpBB 2.0.10 © 2001 phpBB Group 那裡的就是了。
Main: 內容部份, 就是你們看文章等等的地方。

說明了, 就是解釋如果分位 Header, Footer, Main, 大家用 DW / FP 就會用到 Table, 那我會說明一下 HTML, 讓大家更易上手。

table - 表格, 不可單一使用, 必須配合 td, tr, th 使用。
th - 是一個標題儲存格, 橫向的, 內容都會成粗體。
td - 同樣是儲存格, 橫向的。
tr - 是一個分行碼, 如 <tr><td></td><td></td><td></td></tr>, 就會出現橫向3格的存格如果再加上<tr>, 就出多出一列, 就像我們常用的 <br>

說明了之後, 要入正題了~ 分區有3, 如下:
田 = Header 部份
口 = Footer 部份
曰 = Main 部份

第一個, 3層式, 新手建議:
田田田\r
曰曰曰\r
口口口\r
都是用3個table做, 上中下的做法, Header, Footer 都是用以下的格式來包著內容(Main):

Header 部份

代碼: 選擇全部

<table>
 <tr>
  <td>這裡是 Header</td>
 </tr>
</table>
<table>
 <tr>
  <td>這裡是 Main
Footer 部份

代碼: 選擇全部

這裡是 Main</td>
 </tr>
</table>
<table>
 <tr>
  <td>這裡是 Footer</td>
 </tr>
</table>
第二個, 選單式, 選單效果:
田田田\r
田曰曰\r
口口口\r
這個用二個table做, 方法比較複雜, Header, Footer 都是用以下的格式來包著內容(Main):

Header 部份

代碼: 選擇全部

<table>
 <tr>
  <td colspan="3">這裡是 Header</td>
 </tr>
 <tr>
  <td>這裡是選單</td>
  <td colspan="2">這裡是 Main
Footer 部份

代碼: 選擇全部

這裡是 Main</td>
 </tr>
</table>
<table>
 <tr>
  <td>這裡是 Footer</td>
 </tr>
</table>
colspan="3" - 就是一個儲存格所佔的格數,必須有 2 行(tr)才能有用,如果你要第一層 (tr) 有第二層三格儲存格的長度,而只需要一個儲存格的話,就可以用了, 附圖:
colspan="3" 的 1:3 儲存格。(田) (口), 都是一個組合

代碼: 選擇全部

--田--
口口口
這做會變成一個儲存格了。

colspan="2" 的 1:2:3 儲存格。(田) (口) (曰), 都是一個組合

代碼: 選擇全部

-田-曰\r
口口口
就佔了兩個格,只得一個, 而 table 內會變為 <table><td colspan="2"></td><td></td></table>
如果把 colspan="2" 放在另一個 td, 就會變成

代碼: 選擇全部

曰-田-
口口口
第三個, 包裝式, 用於極多資訊的論壇, 分左右選單。
一個 Table 就可以做到, 但內容會比較小, 所以不適用於 800x600 的用家。
田田田\r
田曰口\r
口口口\r
Header 部份

代碼: 選擇全部

<table>
 <tr>
  <td colspan="3">這裡是 Header</td>
 </tr>
 <tr>
  <td>這裡是選單</td>
  <td width="10" nowrap="nowrap"></td>
  <td colspan="2">這裡是 Main
Footer 部份

代碼: 選擇全部

  這裡是 Main</td>
  <td width="10" nowrap="nowrap"></td>
  <td>這裡是選單</td>
 </tr>
 <tr>
  <td colspan="3">這裡是 Footer</td>
 </tr>
</table>
nowrap="nowrap" - 不斷行的意思, 如果有一個格寬 100%, 它都不會因為那個格太大而變形, 會保持原來的寬度。

這裡不是太清楚的解釋, 我有時間會再整理一下。
i-Web System 隨坊出來耶

新聞:
遊戲區開幕啦! 打造隨城最強的遊戲王國!
宣傳車出動! 賣力宣傳隨坊吧!
版主召募!版主魂激發!
中文好好學,不要方言通天飛
i-Web System 正式版上架測試!
Kill
竹貓忠實會員
竹貓忠實會員
文章: 874
註冊時間: 2003-07-31 12:40
來自: CKD Studio
聯繫:

文章 Kill »

痾.......
看不太懂(汗
田曰口\r
這些是什意思阿\r
是框架嗎
喜歡...就是淡淡ㄉ愛... ...則是深深ㄉ喜歡...
圖檔
提供phpBB代架服務以及外掛安裝

有付費服務的問題請移駕至CKD Studio發問 ╮( ̄▽ ̄)╭
.::藍色的天空::.
竹貓忠實會員
竹貓忠實會員
文章: 587
註冊時間: 2003-09-14 17:29
來自: 我不知道
聯繫:

文章 .::藍色的天空::. »

田 = Header 部份
口 = Footer 部份
曰 = Main 部份

(是否用詞太專業... 看不懂=.=")
i-Web System 隨坊出來耶

新聞:
遊戲區開幕啦! 打造隨城最強的遊戲王國!
宣傳車出動! 賣力宣傳隨坊吧!
版主召募!版主魂激發!
中文好好學,不要方言通天飛
i-Web System 正式版上架測試!
beowolf
竹貓好朋友
竹貓好朋友
文章: 267
註冊時間: 2002-04-11 21:23
來自: 竹貓東京分局
聯繫:

文章 beowolf »

藍大
應該實例說明會讓初學者比較容易懂吧
圖檔2014新作-達人聯盟

斷斷續續玩了12年的phpbb. 真的看不上別的論壇啊..
Kill
竹貓忠實會員
竹貓忠實會員
文章: 874
註冊時間: 2003-07-31 12:40
來自: CKD Studio
聯繫:

文章 Kill »

不是...
Header 部份
Footer 部份
Main 部份
這個我看的懂
不過
田曰口\r
看不太出來是什東西...
喜歡...就是淡淡ㄉ愛... ...則是深深ㄉ喜歡...
圖檔
提供phpBB代架服務以及外掛安裝

有付費服務的問題請移駕至CKD Studio發問 ╮( ̄▽ ̄)╭
.::藍色的天空::.
竹貓忠實會員
竹貓忠實會員
文章: 587
註冊時間: 2003-09-14 17:29
來自: 我不知道
聯繫:

文章 .::藍色的天空::. »

貼圖吧~
等我找一找一些網頁~
i-Web System 隨坊出來耶

新聞:
遊戲區開幕啦! 打造隨城最強的遊戲王國!
宣傳車出動! 賣力宣傳隨坊吧!
版主召募!版主魂激發!
中文好好學,不要方言通天飛
i-Web System 正式版上架測試!
.::藍色的天空::.
竹貓忠實會員
竹貓忠實會員
文章: 587
註冊時間: 2003-09-14 17:29
來自: 我不知道
聯繫:

文章 .::藍色的天空::. »

田曰口 只是用來解釋網頁九宮格, 因為一個網頁最多會放為9個部份的。
i-Web System 隨坊出來耶

新聞:
遊戲區開幕啦! 打造隨城最強的遊戲王國!
宣傳車出動! 賣力宣傳隨坊吧!
版主召募!版主魂激發!
中文好好學,不要方言通天飛
i-Web System 正式版上架測試!
design
竹貓忠實會員
竹貓忠實會員
文章: 330
註冊時間: 2003-10-31 00:36
聯繫:

文章 design »

藍色的天空說明的很好,

不過我建議大家在使用軟體工具之前..要打好馬步,練練基本功..
不管是什麼曠世絕招.. 一定是雄厚的基本功..深厚的內力自然會領悟出一些招式..

網頁設計的基本功是什麼.

HTML,CSS 這兩種東西必須熟練熟記,不需翻書不需要軟體..每一種屬性..
網頁排版最常用的就是藍大說的,TABLE,TR,TD ..
很多表格不是軟體拉的出來的..這時候就要靠人腦去切割了...

如果你很熟很熟的話.... 在網頁還沒排版之前.. 表格就在心裡有個底了.
想像不到吧.

怎麼訓練自己到這種程度.
要求自己不用DW或Frontpage等軟體去設計網頁.. 尤其是巢狀表格\r
很快.. 就會看出效果.
yanglintw
星球普通子民
星球普通子民
文章: 3
註冊時間: 2004-10-12 11:44

文章 yanglintw »

請問藍大\r

風格名稱:iCGstation
作者:.::藍色的天空::.
版本:1.0.0
phpBB 版本:2.0.10

我用藍大的style

想要改背景顏色\r

改iCGstation.css這個沒錯吧\r

可是怎麼改都不會變

藍大寫的格式好像跟一般的不太一樣...

找不到類似\r

代碼: 選擇全部

body {
background-color: #E5E5E5;
}
這種\r

不知道要怎麼辦 :-?
.::藍色的天空::.
竹貓忠實會員
竹貓忠實會員
文章: 587
註冊時間: 2003-09-14 17:29
來自: 我不知道
聯繫:

文章 .::藍色的天空::. »

yanglintw 寫:請問藍大\r

風格名稱:iCGstation
作者:.::藍色的天空::.
版本:1.0.0
phpBB 版本:2.0.10

我用藍大的style

想要改背景顏色\r

改iCGstation.css這個沒錯吧\r

可是怎麼改都不會變

藍大寫的格式好像跟一般的不太一樣...

找不到類似\r

代碼: 選擇全部

body {
background-color: #E5E5E5;
}
這種\r

不知道要怎麼辦 :-?
喔喔, 這就是不熟悉 CSS 的問題, 你在 css 中加入\r

代碼: 選擇全部

body {
background-color: #E5E5E5;
}
那背景的 css 變數不就是出了來嗎?
i-Web System 隨坊出來耶

新聞:
遊戲區開幕啦! 打造隨城最強的遊戲王國!
宣傳車出動! 賣力宣傳隨坊吧!
版主召募!版主魂激發!
中文好好學,不要方言通天飛
i-Web System 正式版上架測試!
yanglintw
星球普通子民
星球普通子民
文章: 3
註冊時間: 2004-10-12 11:44

文章 yanglintw »

我加過耶\r

可是一樣不會變

難道是加錯地方還是... :-?
StickyKid
竹貓忠實會員
竹貓忠實會員
文章: 1019
註冊時間: 2003-01-31 10:32
來自: Taichung, Taiwan
聯繫:

文章 StickyKid »

找實際範例大家就瞭了吧^____^
Helvetica is a feature-length independent film about typography.
阿維
竹貓忠實會員
竹貓忠實會員
文章: 868
註冊時間: 2003-02-23 13:36
來自: 台南市

文章 阿維 »

CSS的話,不是有subSilver的CSS中文對照表嗎?
只不過有些中文解釋出現亂碼,只要幫忙重新修正就可以了

代碼: 選擇全部

/*
The original subSilver Theme for phpBB version 2+
Created by subBlue design
http://www.subBlue.com
*/


/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #EFF2F8; /*背景顏色*/
scrollbar-face-color: #DEE3E7; /*表格列顏色二*/
scrollbar-highlight-color: #FFFFFF; /*資料格顏色二*/
scrollbar-shadow-color: #DEE3E7; /*表格列顏色二*/
scrollbar-3dlight-color: #D1D7DC; /*表格列顏色三*/
scrollbar-arrow-color: #006699; /*正常的連結顏色*/
scrollbar-track-color: #EFEFEF; /*表格列顏色一*/
scrollbar-darkshadow-color: #98AAB1; /*項目標題顏色一*/
} 

/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #006699; } /*正常的連結顏色*/
a:hover { text-decoration: underline; color : #DD6900; } /*滑鼠移過的連結顏色 (hover)*/
hr { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;} /*表格列顏色三*/


/* This is the border line & background colour round the entire page */
.bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; } /*資料格顏色二*//*項目標題顏色一*/

/* This is the outline round the main forum tables */
.forumline { background-color: #FFFFFF; border: 2px #006699 solid; } /*資料格顏色二*//*項目標題顏色二*/


/* Main table cell colours and backgrounds */
td.row1 { background-color: #EFEFEF; } /*表格列顏色一*/
td.row2 { background-color: #DEE3E7; } /*表格列顏色二*/
td.row3 { background-color: #D1D7DC; } /*表格列顏色三*/


/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: #FFFFFF; /*資料格顏色二*/
background-image: url(images/cellpic2.jpg);
background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th {
color: #FFFFFF; font-size: 11px; font-weight : bold; /*字型顏色三*//*字型大小二*/
background-color: #006699; height: 25px; /*正常的連結顏色*/
background-image: url(images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(images/cellpic1.gif);
background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px; /*表格列顏色三*//*項目標題顏色三*/
}


/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; } /*資料格顏色二*/
td.row3Right,td.spaceRow {
background-color: #D1D7DC; border: #FFFFFF; border-style: solid; } /*表格列顏色三*//*項目標題顏色三*/

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; } /*font-size: 字型大小三*/
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }\r


/* The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2 {
font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; /*font-family: "字型種類二",字型種類一,*/
text-decoration: none; line-height : 120%; color : #000000; /*color : 文字顏色*/
}


/* General text */
.gen { font-size : 12px; } /*字型大小三*/
.genmed { font-size : 11px; } /*字型大小二*/
.gensmall { font-size : 10px; } /*字型大小一*/
.gen,.genmed,.gensmall { color : #000000; } /*color : 文字顏色*/
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; } /*正常的連結顏色*/
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #DD6900; text-decoration: underline; } /*滑鼠移過的連結顏色 (hover)/*


/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #000000 } /*字型大小二*//*文字顏色*/
a.mainmenu { text-decoration: none; color : #006699; } /*正常的連結顏色*/
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; } /*滑鼠移過的連結顏色 (hover)*/


/* Forum category titles */ 
.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}/*字型大小三*/ /*正常的連結顏色*/
a.cattitle { text-decoration: none; color : #006699; } /*正常的連結顏色*/
a.cattitle:hover{ text-decoration: underline; }


/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 12px; color : #006699; }/*字型大小三*/ /*正常的連結顏色*/
a.forumlink { text-decoration: none; color : #006699; } /*正常的連結顏色*/
a.forumlink:hover{ text-decoration: underline; color : #DD6900; } /*滑鼠移過的連結顏色 (hover)*/


/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #000000;} /*字型大小二*/ /*color : 文字顏色*/
a.nav { text-decoration: none; color : #006699; } /*正常的連結顏色*/
a.nav:hover { text-decoration: underline; }


/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; } /*字型大小二*/ /*color : 文字顏色*/
a.topictitle:link { text-decoration: none; color : #006699; } /*正常的連結顏色*/
a.topictitle:visited { text-decoration: none; color : #5493B4; } /*參考過的連結顏色 (visited)*/
a.topictitle:hover { text-decoration: underline; color : #DD6900; } /*滑鼠移過的連結顏色 (hover)*/


/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #000000;} /*字型大小二*/ /*color : 文字顏色*/

/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #000000; } /*字型大小一*/ /*color : 文字顏色*/


/* The content of the posts (body of text) */
.postbody { font-size : 12px;} /*字型大小三*/
a.postlink:link { text-decoration: none; color : #006699 } /*正常的連結顏色*/
a.postlink:visited { text-decoration: none; color : #5493B4; } /*參考過的連結顏色 (visited)*/ 
a.postlink:hover { text-decoration: underline; color : #DD6900} /*滑鼠移過的連結顏色 (hover)*/ 


/* Quote & Code blocks */
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600; /*字型種類三*//*字型大小二*//*字型顏色二*/
background-color: #FAFAFA; border: #D1D7DC; border-style: solid; /*資料表顏色一*/ /*表格列顏色三*
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote { 
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%; /*字型種類一*//*字型大小二*//*字型顏色一*/
background-color: #FAFAFA; border: #D1D7DC; border-style: solid; /*資資料格顏色一*/ /*表格列顏色三*/
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}


/* Copyright and bottom info */ 
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;} /*字型大小一*//*字型種類一*//*字型顏色一*/
a.copyright { color: #444444; text-decoration: none;} /*字型顏色一*/
a.copyright:hover { color: #000000; text-decoration: underline;} /*color : 文字顏色*/


/* Form elements */
input,textarea, select {
color : #000000; /*color : 文字顏色*/
font: normal 11px Verdana, Arial, Helvetica, sans-serif; /*字型大小二*//*字型種類一*/
border-color : #000000; /*color : 文字顏色*/
} 

/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #FFFFFF; /*資料格顏色二*/
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
background-color : #EFEFEF; /*表格列顏色一*/
color : #000000; /*color : 文字顏色*/
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; /*字型大小二*//*字型種類一*/
}

/* The main submit button option */
input.mainoption { 
background-color : #FAFAFA; /*資料格顏色一*/
font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
background-color : #FAFAFA; /*資料格顏色一*/
font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/ 
.helpline { background-color: #DEE3E7; border-style: none; } /*表格列顏色二*/


/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");
最後由 阿維 於 2005-08-09 11:49 編輯,總共編輯了 1 次。
yanglintw
星球普通子民
星球普通子民
文章: 3
註冊時間: 2004-10-12 11:44

文章 yanglintw »

阿阿阿.. :-o

原來是藍大的style排的比較不一樣\r

仔細一找就看到了

感謝大家回覆 :oops:
頭像
大佬
星球公民
星球公民
文章: 260
註冊時間: 2003-11-30 13:38
來自: Kluang,Johor,Malaysia
聯繫:

文章 大佬 »

好熱心的藍大!
如果小弟解答有錯誤請其他大大修正吧!
●免費空間連結:來看看吧!
●您的 phpBB2 版本:phpBB 2.0.8
●您的 phpBB2 連結網址: http://holymation.57host.com
主題已鎖定

回到「風格問題討論」