竹貓星球

發表於 : **2004-10-17 10:27**

做一個 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%, 它都不會因為那個格太大而變形, 會保持原來的寬度。

這裡不是太清楚的解釋, 我有時間會再整理一下。

發表於 : **2004-10-17 10:31**

痾.......
看不太懂(汗
田曰口\r
這些是什意思阿\r
是框架嗎

發表於 : **2004-10-17 10:33**

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

(是否用詞太專業... 看不懂=.=")

發表於 : **2004-10-17 10:36**

藍大
應該實例說明會讓初學者比較容易懂吧

發表於 : **2004-10-17 10:38**

不是...
Header 部份
Footer 部份
Main 部份
這個我看的懂
不過
田曰口\r
看不太出來是什東西...

發表於 : **2004-10-17 10:38**

貼圖吧~
等我找一找一些網頁~

發表於 : **2004-10-18 10:34**

田曰口只是用來解釋網頁九宮格, 因為一個網頁最多會放為9個部份的。

發表於 : **2004-10-18 11:18**

藍色的天空說明的很好,

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

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

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

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

怎麼訓練自己到這種程度.
要求自己不用DW或Frontpage等軟體去設計網頁.. 尤其是巢狀表格\r
很快.. 就會看出效果.

發表於 : **2004-10-18 12:37**

請問藍大\r

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

我用藍大的style

想要改背景顏色\r

改iCGstation.css這個沒錯吧\r

可是怎麼改都不會變

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

找不到類似\r

代碼: 選擇全部

body {
background-color: #E5E5E5;
}

這種\r

不知道要怎麼辦

發表於 : **2004-10-18 13:45**

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 變數不就是出了來嗎?

發表於 : **2004-10-18 14:39**

我加過耶\r

可是一樣不會變

難道是加錯地方還是...

發表於 : **2004-10-20 06:32**

找實際範例大家就瞭了吧^____^

發表於 : **2004-10-20 08:15**

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");

發表於 : **2004-10-20 20:25**

阿阿阿..

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

仔細一找就看到了

感謝大家回覆

發表於 : **2004-10-20 22:01**

好熱心的藍大！

竹貓星球

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

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