[教學][完成度20%]phpBB風格修改全記錄

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

版主: 版主管理群

StickyKid
竹貓忠實會員
竹貓忠實會員
文章: 1019
註冊時間: 2003-01-31 10:32
來自: Taichung, Taiwan
聯繫:

[教學][完成度20%]phpBB風格修改全記錄

文章 StickyKid »

【前言】- What to do?
  風格,顧名思義就是要讓論壇SHOW出自己的STYLE。有自己的STYLE,論壇才不會一成不變,才不會單調乏味。我架站的構思正是如此,我喜歡讓網站充滿了自己的風格。不管是網頁也好,論壇也好,一個單調的網站是留不住什麼人的(如果站長是你的好友,當然另當別論啦~)
  不知道什麼時候聽過一位先進說過一句話:架站一分鐘,顧站十年功。現在CMS系統普及,不只限於phpBB,有心人只要有一個空間,一個資料庫,還有短短的一分鐘,馬上就可以弄好一個新網站˙˙˙˙˙˙不用再像以前一個一個頁面慢慢建構。正因為如此,各類型的論壇如雨後春筍般冒出。所以,為了讓自己的網站更具競爭力,一個好的風格是一定要的啦!你總不希望我的最愛裡面的論壇全部都生做一個樣吧~

【方法】- How to do?
  許多人對於論壇的風格設計總是望洋興歎,常常想說:我不會畫畫,怎麼可能做出好看的風格呢?其實,風格設計並沒有一般人想像的那麼複雜。簡單來說,網站就像一塊畫布,一塊巨大的畫布,而你所要做的事就是盡情揮灑顏料。這裡提供幾個方法:
  1. 圖片不一定要自創,風格也可以是一塊大拼布
  2. 別拘泥於原創,可以見賢思齊(參考),不過絕對不要拾人牙慧(抄襲)
  3. 借別人的圖記得要標明出處,就像用繁中語系要標明by phpbb-tw.net
  4. 沒有塗不到顏色的地方,只有不懂的技法
  我想前面三點大家應該都看的懂,應該沒有很文言吧(笑~)。比較看不出端倪的大概是第四點,到底什麼是只有不懂的技法呢?其實就是要多看、多問、多學~從先人的經驗中學到自己不暸的東西!子曰:知之為知之,不知為不知。第四點所講的正是如此,今天你不知道的事情,就算摸了在久也摸不出來˙˙˙˙˙˙畢竟HTML不是你想出來的程式碼,不知道的東西,就乖乖學吧!
  另外,正所謂工具善其事,必先利其器,帶著Google Search伴隨著你作風格,保證滿載而歸喔(炸~)

【必備】- Need to know
其實論壇風格就只是一般的HTML而已,以下先來介紹HTML:
圖檔
  來來來,借用喬巴醫生來當範例吧!HTML全名是Hyper Text Markup Language,中文翻譯為超文本標記語言,是由各式各樣的標籤組合而成的。而這些標籤呢,就好像喬巴身上的身體部位。圖片上的HTML碼如下:

代碼: 選擇全部

<HTML>
	<HEAD>
		<TITLE> I'm a doctor </TITLE>
	</HEAD>

	<BODY>
			Hello Chopper!
	</BODY>

</HTML>
  注意到了嗎?HTML的標籤很有趣,都是以身體部位來命名的,在圖上同部位的部份我把他用螢光筆畫過去了。首先,首尾的<HTML></HTML>宣告說我是HTML網頁,就像喬巴跟你說:我是麋鹿!不是怪物。再來是<HEAD></HEAD>,就像是喬巴的頭部一樣,你看到了他的臉,一眼就認出他是喬巴,而不是其他的麋鹿。<HEAD>內的<TITLE>就像喬巴的職業,告訴你喬巴是個醫生。
  最下面就是身體的部份啦,<BODY>顧名思義就是指身體,也是變化最多的地方。因為所有要讓瀏覽者看到的文字、圖片、音樂˙˙˙˙˙˙都是靠這裡處理。拿喬巴來說吧,喬巴很聰明,醫學知識豐富,不過光有頭腦也是不夠的,還需要身體來達成想要做的事情,不是嗎?
  大概了解HTML後,我們發現HTML只是在<>標籤內做文章,比方說以<HEAD>當開頭,當要結束時,便用</HEAD>當結尾,兩者只差在一個斜線而已。

【動刀啦~XD】- Ready? GO!
圖檔
↑論壇首頁概觀圖
  看到了嗎?phpBB剛架設完的樣子,感覺很單調吧(炸),現在來開始研究這些檔案。圖中色塊右下角皆有標明檔案名稱,這些檔案在templates/subSilver/中。逐一用文字編輯程式,像EditPlus、EmEditor之類的軟體開啟,個人比較推薦EditPlus。開啟後會發現裡面都是HTML碼,現在先來看看overall_header.tpl
圖檔  圖檔
  左圖就是整個overall_header.tpl的縮圖,長度很長XD,要不要開看你方便就好。開啟檔案後,發現全部都是黑白的@_@,這樣要改檔案好像海底撈針一般,有沒有方法讓原始碼顯示成彩色呢?當然可以,以EditPlus為例,把overall_header.tpl另存新檔為overall_header.html,EditPlus就會自動幫你把原始碼飆上顏色。結果就跟右圖一樣啦,有顏色的話改起來也方便了許多,不過改完別忘記要把內容再次複製回去overall_header.tpl喔!如果您電腦有Macromedia Dreamweaver的話,也可以參考此篇讓DW看的懂*.tpl。
最後由 StickyKid 於 2005-02-06 11:31 編輯,總共編輯了 2 次。
Helvetica is a feature-length independent film about typography.
hpo14
竹貓忠實會員
竹貓忠實會員
文章: 414
註冊時間: 2003-05-10 16:37
來自: M Starbucks

文章 hpo14 »

此篇的價值不斐阿.... (:Y) Good Job
不推的不是人....可當精華收錄了!
(ps.便用</HEAD>當傑偉 ← 結尾.. :-) )
非官方外掛問題區公告: [必看]請配合發問格式及明確主題發問(2004 02/16更新)

竹貓星球發問規則:
http://phpbb-tw.net/phpbb/viewtopic.php?t=16149

請不要濫用 私人訊息 或是 MSN 問問題...你以為竹貓是架好看的阿
napoleon0319
星球普通子民
星球普通子民
文章: 20
註冊時間: 2003-11-28 10:19
來自: Mordor
聯繫:

文章 napoleon0319 »

這個好!
我很需要這類的教學\r
Orz大大加油~
圖檔
StickyKid
竹貓忠實會員
竹貓忠實會員
文章: 1019
註冊時間: 2003-01-31 10:32
來自: Taichung, Taiwan
聯繫:

文章 StickyKid »

hpo14 寫:此篇的價值不斐阿.... 讚 Good Job
不推的不是人....可當精華收錄了!
(ps.便用</HEAD>當傑偉 ← 結尾.. 微笑 )
XD~ 沒有你說的那麼好啦\r
最近看到很多人都分享了許多經驗之談
自己在竹貓混了兩年多.. 連一篇教學都沒生過
另外.. 您提醒的事情已經修正嚕 :-P
napoleon0319 寫:這個好!
我很需要這類的教學\r
Orz大大加油~
謝啦~ 這個的確是為新手想的...
以前自己再改也是很痛苦.. 痛不欲生XD
Helvetica is a feature-length independent film about typography.
黑風凱特
星球公民
星球公民
文章: 267
註冊時間: 2004-12-13 22:12
來自: 台灣台北
聯繫:

文章 黑風凱特 »

早就想學改風格了...只是沒有html的底子~~XD~

直接死在分不清版面區塊的對應程式~~

期待完整的教學@@!~~~~
圖檔
hpo14
竹貓忠實會員
竹貓忠實會員
文章: 414
註冊時間: 2003-05-10 16:37
來自: M Starbucks

文章 hpo14 »

呵呵...^^
我又發現囉..
(因為所有要讓瀏覽者看到的文字、圖片、音樂˙˙˙˙˙˙都是靠這里處裡)

抱歉一直挑你打錯的字...
非官方外掛問題區公告: [必看]請配合發問格式及明確主題發問(2004 02/16更新)

竹貓星球發問規則:
http://phpbb-tw.net/phpbb/viewtopic.php?t=16149

請不要濫用 私人訊息 或是 MSN 問問題...你以為竹貓是架好看的阿
StickyKid
竹貓忠實會員
竹貓忠實會員
文章: 1019
註冊時間: 2003-01-31 10:32
來自: Taichung, Taiwan
聯繫:

文章 StickyKid »

@_@" 不會 新注音詬病..XD
本來選好字都會跳掉...
Helvetica is a feature-length independent film about typography.
問題狂
竹貓忠實會員
竹貓忠實會員
文章: 1947
註冊時間: 2004-06-28 17:13

文章 問題狂 »

我通常都是用FrontPage改的...
實在是看不懂HTML語法...@@
頭像
flw
星球公民
星球公民
文章: 48
註冊時間: 2003-09-23 23:46
來自: 高雄
聯繫:

文章 flw »

哇哈哈~
這篇真的很讚^^"
呵....給你N個掌聲= = :mrgreen:
Kill
竹貓忠實會員
竹貓忠實會員
文章: 874
註冊時間: 2003-07-31 12:40
來自: CKD Studio
聯繫:

文章 Kill »

SK寫教學XD
之前我寫的一些東西都在掛掉的時候不見了- -
喜歡...就是淡淡ㄉ愛... ...則是深深ㄉ喜歡...
圖檔
提供phpBB代架服務以及外掛安裝

有付費服務的問題請移駕至CKD Studio發問 ╮( ̄▽ ̄)╭
StickyKid
竹貓忠實會員
竹貓忠實會員
文章: 1019
註冊時間: 2003-01-31 10:32
來自: Taichung, Taiwan
聯繫:

文章 StickyKid »

下次記得備份XD|||
Helvetica is a feature-length independent film about typography.
Kill
竹貓忠實會員
竹貓忠實會員
文章: 874
註冊時間: 2003-07-31 12:40
來自: CKD Studio
聯繫:

文章 Kill »

怎麼備份\r
用txt存起來?
害我那麼辛苦打在這..
居然在一夕之間不見了(泣
喜歡...就是淡淡ㄉ愛... ...則是深深ㄉ喜歡...
圖檔
提供phpBB代架服務以及外掛安裝

有付費服務的問題請移駕至CKD Studio發問 ╮( ̄▽ ̄)╭
米加
星球普通子民
星球普通子民
文章: 14
註冊時間: 2004-11-24 09:37
聯繫:

文章 米加 »

真的很好的教學文章 ~
不過 @@ 大大 可否再介紹 該怎樣構思 或者 規劃 一個好的風格呢 ?
因為我很想自寫一個風格 可是一直礙於不知該朔造出怎樣的型態 .
一口一 好頭痛唷 .
StickyKid
竹貓忠實會員
竹貓忠實會員
文章: 1019
註冊時間: 2003-01-31 10:32
來自: Taichung, Taiwan
聯繫:

文章 StickyKid »

k122417901 寫:怎麼備份\r
用txt存起來?
害我那麼辛苦打在這..
居然在一夕之間不見了(泣
我都直接用TXT編輯才發布的
分享檔案的時候也是\r
誰知道主機哪天會掛掉? :-|
米加 寫:真的很好的教學文章 ~
不過 @@ 大大 可否再介紹 該怎樣構思 或者 規劃 一個好的風格呢 ?
因為我很想自寫一個風格 可是一直礙於不知該朔造出怎樣的型態 .
一口一 好頭痛唷 .
等到有IDEA的時候會再補完...
目前..就先當作DEMO吧(炸
Helvetica is a feature-length independent film about typography.
laocung
星球公民
星球公民
文章: 62
註冊時間: 2005-01-08 01:07
來自: 桃園縣

文章 laocung »

:-D 小技巧大受益
都沒想到把它存成.html, 看起來輕鬆多了! 感謝 !
主題已鎖定

回到「風格問題討論」