[討論] 三角貓風格修改法

文章由謬西 » 2005-02-03 05:09

三角貓風格修改法

壹、前言

　　一、首先聲名，這些技巧並不一定是最佳的，甚至搞不好還是最差的一種；這只是我個人一點小小經驗，希望大家能夠提出更好的意見加以補強。
　　二、這「修改法」的基本精神在於，修改出一個不大像一般大家常見的PHPBB的PHPBB……也就是說讓你的網頁更個人、更私有化？
　　三、在進行這些動作之前，請先具備有至少一種「繪圖軟體」，以及一種「所見即所得網頁編輯器」使用能力，並請先熟悉HTML，對CSS要有初步瞭解，能懂一些程式語言那就更完美了──所以基本上，如果你完全沒玩過FrontPage或Dreamweaver，底下所說的你可能完全不懂，更別說是對HTML語法不熟悉，或是一點都不瞭解CSS，又或者是你連一套最基本的繪圖程式都不會使用。
　　四、我個人使用的網頁編輯器為「Dreamweaver MX 200」，繪圖程式為「Ulead PhotoImpact 10」，文書編輯器為「EmEditor v3」，以下基本上都以此為敘述方式，不再贅述……在文書編輯器與會圖軟體部分，彈性很大，用什麼都可以，但底下有部分特效將使用到「Dreamweaver」的特有功能，這部分如果您使用「FrontPage」可能就無法做到；事實上，我個人感覺這兩個編輯器各有好處，「FrontPage」好上手，但「Dreamweaver」在功能上強大了許多。

貳、創意與網站定位

　　原則上，我們先假定自己在美學創造力上有這麼點瑕疵；所以我的作法是，先去參考別人的網站，再將之個人化。無論是任何網站都可以，但以PHPBB論壇為佳，因為它的結構很老實的遵守了「頭、中、尾」這三個部分，而之後的編輯我們也得盡量遵守這個原則……除非你有很多力氣去修改那templates底下一堆的tpl檔。
　　底下範例以我個人網站為準（http://www.miousi.idv.tw），也以抄襲我的網站為範例。
　　在確定風格前，請先確定你網站的定位。我不清楚別人定位為何，但我的網站是個很私人的個人小站，所以就完全以我自己的私人喜愛為主。基本上，我希望版面不要花俏，顏色簡單；我需要較大的空間好讓人閱覽文字（因此我的閱讀區域全修改成一個欄位，也就是發文者資料被挪到上端，並且不會出現頭相）……這些都很重要，如果不想好網站的性質與走向，只一昧想要添加東西，只會讓網站四不像而已。
　　這也是我喜歡PHPBB的最大原因，基本上他是個光桿論壇程式，你可以擁有很大彈性去建置、去美化它；要花要素，全憑己意。

參、預備工作

　　一、你並不需要下載你喜歡的風格，因為我們要的只是「類似」風格而已；所以我們先要做的是按下你鍵盤上的「PrtSc SysRq」按鍵擷取下畫面。要知道在繪圖軟體上排版永遠比在網頁編輯器上排版容易，所以我們先將它首頁畫面分幾次擷取下來，然後接成一張大圖……記住，這圖千萬不要壓縮，以便之後我們製圖使用。
　　二、使用繪圖軟體將整張圖、或部分圖樣變成你想要的樣子，字樣不管，重點是顏色、圖樣等等……這裡我是使用「PhotoImpact」的「色相與彩度」外加「亮度與對比」工具，先將基本首頁顏色調成你喜歡的樣子，再逐次繪製出些你要的東西。
　　當然，最重要的是排版。如果你希望你的選單清楚，但對給予額外資訊沒太多興致，那傳統式的選單在左、主區在右就很適合了；但這兒，我自己認為瀏覽者該夠聰明學會找到選單，且我有希望自己的某些行為能快速讓瀏覽者知道，所以我就將選單放在上頭，將一些資訊公告放在右邊。這點很重要，因為牽涉到將來檔案位置問題──
　　templates底下的index_body.tpl這檔案就是用來控制你的「主要頁面」，將來網頁不管怎樣變，變得也只是index_body.tpl這個區塊。在index_body.tpl上端的HTML是屬於overall_header.tpl，下端屬於overall_footer.tpl……有人說你夠厲害的話可以將所有檔案寫進overall_header.tpl，這是錯誤的……或許你可以寫進index_body.tpl，但將來你得在每一個檔案裡都重複寫入一些HTML碼，非常之愚蠢且無意義；三段式的網頁設計非常高明，那就盡量利用它吧。
　　三、在你的PHPBB下的templates底下建一個你將來風格名稱的資料夾（我的風格叫MiouSi，你可以取你自己的名字），然後將原本下載下來的subSilver（越乾淨越好，也就是未經過任何修改的）資料夾裡所有東西都COPY過來。
　　請打開你的文書編輯器（要有「取代」功能的），逐一打開所有subSilver資料夾下的檔案，將「subSilver」這兩個字取代為「你風格名稱」（也就是你資料夾名稱），也請將subSilver.cfg與subSilver.css更名為「風格名稱」.cfg與「你風格名稱」.css。
　　確定全部都修改到以後，請至PHPBB「系統管理台」──「風格管理」──「新增」──「完整安裝」。等安裝完畢後，請至「風格管理」──「管理選項」檢查，這時應該出現了一個「你風格名稱」的風格檔……然後到「一般管理」──「基本組態」──「預設樣式」中的下拉式選單中找到「你風格名稱」，選取它，按下「送出」後，回到討論區裡……這時你會發現的風格與原本subSilver風格完全一樣，因為你還沒有編輯它。
　　四、現在我們擁有了一張製好的圖，一個屬於你自己名稱的風格了（雖然這風格外觀、功能都與預設subSilver沒兩樣，但起碼這風格擁有你專屬名字）

肆、將TPL組合成HTML來顯示

　　一、用網頁編輯器開一個空白網頁，隨便什麼名字都好（但千萬不要是index.htm，因為裡面已經有一個了），我個人是取名叫PHPBB.htm，然後將這空白網頁儲存到templates資料夾下。
　　二、打開overall_header.tpl（頭）、index_body.tpl（中）、overall_footer.tpl（尾），依這次序將檔案全部貼進編輯器的原始檔位置──一定要按照頭、中、尾的次序貼，因為這才是一個完整的HTM頁面。
　　三、請將overall_header.tpl前的一堆CSS敘述全部刪掉，將你的檔頭改成：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css"; charset=big5">
{META}
{NAV_LINKS}
<title>{SITENAME} {PAGE_TITLE}</title>
<link rel="stylesheet" href="templates/「你的風格名稱」/「你的風格名稱.css" type="text/css">

<script language="Javascript" type="text/javascript">

</script>
</head>

……以下是BOBY……\r

　　這樣你的檔案將全部由「你的風格名稱.css」來控制，而非由「系統控制台」控制。
　　這裡注意，「<link rel="stylesheet" href="templates/「你的風格名稱」/「你的風格名稱.css" type="text/css">」將來等寫回overall_header.tpl時，最好改回成「<link rel="stylesheet" href="templates/「你的風格名稱」/{T_HEAD_STYLESHEET}" type="text/css" />」（不改也無所謂，似乎改回來比較專業？）……這裡這樣修改，是因為網頁編輯器並不認識「{T_HEAD_STYLESHEET}」這個變數，所以我們就直接將它寫明白來。
　　三、打開瀏覽器……除了原本是文字的部分會被一堆{xxxxxx}的東西取代外，基本上網頁跟你在網路上看到的subSilver風格是一樣的。這時打開你PHPBB資料夾底下language底下lang_chinese_traditional_taiwan底下的lang_main.php，對照這些{xxxxxx}。
　　比如你看到一個{L_REGISTER}，不要管「L_」而到lang_main.php裡找「REGISTER」，你會發現它叫「會員註冊」……你也可以直接將這些以「L_」開頭的變數刪掉直接改用文字顯示──也就是用「會員註冊」直接取代「{L_REGISTER}」（記住，「U_」開頭的別亂改，那是連結路徑），但最好不要，因為這樣顯然就不太專業了，呵！

伍、開始編輯

　　一、規劃你的表格……先注意一個觀念，index_body.tpl部分基本上是用一個table包起來的，這是為了方便你未來修改其他tpl檔……所以我們可將index_body.tpl視為一個區塊，在表格規劃中留給他一個位置，這位置多半是一個儲存格（td）──大部分的風格裡，overall_header.tpl的結束會是個td，而overall_footer.tpl的起頭會是個/td；當然也可能是/table與table，基本上不脫這兩種型態。
　　在「http://www.miousi.idv.tw」的範例中，我們發現他可以用一個五乘五的表格（表格內有五欄、五列）來完成……你可以擴大一些，比如做成七乘七，將來如不需要時再將多餘欄位刪除就好。我們在編輯器顯示出的網頁底端，做一個七乘七的表格……\r
　　二、開始用網頁編輯器，按你原本規劃方式修改你的首頁吧！你可以以分割、插入的方式編輯你的表格，然後將上端的{xxxxxx}用拖曳方式拉到下方你新位置上，甚或是將上方原本整個表格拉過來。這同時，你可以切割、壓縮你擷取下來的圖檔，或偵測出圖的顏色更改你的CSS檔……總之，這部分就像是一個標準的HTML製作過程，除了一堆的{xxxxxx}刺眼之外，沒什麼特殊的地方。
　　三、如果你想要弄出個彈出式選單，那麼請用「Dreamweaver」當你的網頁編輯器。
　　四、編輯完成，滿意之後，請到「程式碼」或「原始檔」處。請找出index_body.tpl包住的那塊table，在其上與其下HTML程式碼按一串「Enter」。這樣是為了好將網頁區分為三部分，在index_body.tpl之上的，將來要COPY回overall_header.tpl；之下的，將來要COPY到overall_footer.tpl中。
　　五、你剛剛重建了一個新的表格，並且也將所有想用的東西都拖曳到夏方新位置上了。這時，請將<BOBY>之後，你多餘出來的那些原本HTML碼刪除，讓網頁看起來完整無缺……到此，雖然你的HTML網頁看起來非常完美，但還不要COPY回去，這時我們必須做一些修正。

陸、修正
　　
　　前者是指出，當會員登出、或非會員時，被包在其中的程式碼將會出現；如相反，也就是會員登入時，這段程式碼將不會顯示。後怎則相反，會員登入時才會顯示，而非會員或會員登出後則看不到這段程式碼。
　　不一定要按原本規定去做，只要瞭解這兩段陳述，我們可以不按原本規定，自行決定哪些要讓會員看到，哪些不要。例如「搜尋」、「會員列表」等，我們都可以包進中，而「會員登入」、「註冊」等包進。
　　注意一：有就一定要有一個作為對應，不然會出現錯誤訊息。
　　注意二：在與中包住的HTML碼，必須是一段完整的敘述，比如是一段完整的table或是tb……因為在會員登入或登出時，被包住的這段程式碼將會消失，如果這段程式碼不完整，將來在PHPBB上會出現你無法預期的混亂狀況。
　　二、其次，注意index_body.tpl中的兩段程式碼：
　　
　　
　　這兩段程式碼包住的部分，將會因著你主題增加而複製HTML碼。這種複製很有趣，你可以多方嘗試它的組合方式……\r
　　注意一：如上，有就一定要有一個作為對應，不然會出現錯誤訊息。
　　注意二：但相同的，你必須事先想像，當網頁不斷生成這些複製的程式碼後，是否完整。有時只有一個版面時PHPBB的index_body.tpl看來沒問題，但出現兩個以上版面時就亂了，問題就出於包住的部分HTML碼不完整。
　　注意三：在viewforum_body.tpl、viewtopic_body.tpl或其他tpl檔中的 等等意思與這相似……你可以自行組合，看看會出現什麼變化。
　　三、完成修正後，請將三個段落COPY回overall_header.tpl 、index_body.tpl、 overall_footer.tpl中……開啟網頁，由網路來讀，看看是否有錯誤……大部分錯誤會出在 包住的位置，這是出於你事先沒規劃好HTML碼，你可以調整個位置試試。

陸、修正你的CSS檔

　　一切無誤後，就可以細部調整字型、表單等等了。
　　一、這裡特別注意一個位置，就是CSS開頭時的body、或font,th,td,p部分，增加個字型大小，如font:10pt這樣的敘述……如此等於多加了一個字形定義，凡是你網頁未另行定義的文字，都會以這字型顯示。
　　二、原有的CSS底下定義敘述大部分都可廢掉重寫，但最好還是盡量採用原本定義的意義，或是固定的個人習慣。比如我個人習慣：

/* 網頁風格部分僅能在 IE5 以上瀏覽器中生效 */
body { }
/*整體字型控制，含表格、儲存格、圖形等 */
font,td,p { }
a:link,a:active,a:visited,a.postlink { }
a:hover { }
hr { }
img { }
/* 最上層的表格設定 */
.bodyline {}
/* 主要表格設定 */
.forumline { }
/* 一般儲存格設定 */
td.cat { }
td.row1 {}
td.row2 { }
td.row3 { }
/* 首標文字設定等等 */
.maintitle { }
a.maintitle { }
a.maintitle:visited { }
a.maintitle:hover { }
/* 一般用字 */
.gen { }
a.gen { }
a.gen:visited { }
a.gen:hover { }
.genmed { }
a.genmed {; }
a.genmed:visited { }
a.genmed:hover { }
.gensmall {}
a.gensmall { }
a.gensmal:visited {}
a.gensmal:hover { }
/* 使用在頂端、登記、註冊、搜索等等的文字設定 */
.mainmenu { }
a.mainmenu { }
a.mainmenu:visited {}
a.mainmenu:hover { }
/* 論壇版別用的文字設定 */
.cattitle { }
a.cattitle { }
a.cattitle:visited { }
a.cattitle:hover{ }
/* 論壇名稱、索引用的文字設定 */
.forumlink { }
a.forumlink { }
a.forumlink:visited { }
a.forumlink:hover { }
/* 用於本文、頁數的文字設定 */
.nav { }
/* 頂端用的文字設定 */
.topictitle { }
a.topictitle { }
a.topictitle:visited { }
a.topictitle:hover { }
/* 名字用的文字設定 */
.name { }
a.name { }
a.name:visited { }
a.name:hover {}
/* 發文資料、日期等等文字設定 */
.postdetails { }
/* 本文文字設定 */
.postbody {}
/* 引用還有碼塊的設定 */
.code { }
/* 版權以及底部資訊的文字設定 */
.copyright { }
a.copyright { }
a.copyright:visited { }
a.copyright:hover {}
/* 發文表單設定 */
input.post,textarea.post { }
/* 下拉文字表單設定 */
form { }
input { }
select {}
/* 按鈕表單*//* 按鈕表單（一個當中文、一個當英文，因為二者與頂端距離位置有點不同） *//* 主要的提交按鈕設定 */
input.button,input.liteoption,.fakebut {}
input.mainoption {}
input.catbutton { }
/* 發文說明顯示列 */
.helpline {}

　　三、部分要到PHP檔中修正，比如NAME的顯示，這裡不做贅述……\r

柒、完成

　　依序修改下一個tpl檔，作法與上面相同，你只需要將原本index_body.tpl的位置程式碼改由各tpl取代即可……當然不是全部，各tpl的定義大致如下：

　　agreement.tpl（會員註冊同意聲明）
　　bbcode.tpl（BBCODE系統，引言部分在此修改）
　　confirm_body.tpl（管理刪除文章確認）
　　error_body.tpl（錯誤訊息）
　　faq_body.tpl（常見問題）
　　formIE.css（IE的表單……不大需要理會）
　　groupcp_info_body.tpl（群組訊息）
　　groupcp_pending_info.tpl （審核群組成員）
　　groupcp_user_body.tpl（群組首頁）
　　index.htm（首頁HTML模版，不用理它）
　　index_body.tpl（首頁中段）
　　jumpbox.tpl（前往選擇面版）
　　login_body.tpl（登入）
　　memberlist_body.tpl（會員列表）
　　message_body.tpl（系統訊息）
　　xxx.cfg（本風格記錄檔）
　　xxx.css（本風格 CSS檔）
　　modcp_body.tpl（管理功能主面版）
　　modcp_move.tpl（移動主題管理）
　　modcp_split.tpl（分割主題管理）
　　modcp_viewip.tpl（查找IP）
　　overall_footer.tpl（首頁尾段）
　　overall_header.tpl（首頁前段）
　　posting_body.tpl（發表文章、私訊等）
　　posting_poll_body.tpl（票選模組）
　　posting_preview.tpl（預覽）
　　posting_smilies.tpl（更多笑臉標誌，用到simple）
　　posting_topic_review.tpl（發表、預覽、引述尾段，用到simple）
　　privmsgs_body.tpl（私訊）
　　privmsgs_popup.tpl（私訊通告，用到simple）
　　privmsgs_preview.tpl（預覽私訊）
　　privmsgs_read_body.tpl（閱讀私訊）
　　profile_add_body.tpl（加入會員表格）
　　profile_avatar_gallery.tpl（系統相簿）
　　profile_send_email.tpl（發送電子聯絡簿）
　　profile_send_pass.tpl（發送新密碼）
　　profile_view_body.tpl（會員個人資料檢視）
　　search_body.tpl（搜尋系統）
　　search_results_posts.tpl（搜尋結果文章）
　　search_results_topics.tpl（搜尋結果主題）
　　search_username.tpl（尋找會員）
　　simple_footer.tpl（樣版）
　　simple_header.tpl（樣版，注意它的CSS連結位置，可比照overall_header.tpl修改指向「你的風格名稱」.css）
　　theme_info.cfg（網頁組態）
　　viewforum_body.tpl（發表區本文第二層）
　　viewonline_body.tpl（看誰在線上）
　　viewtopic_body.tpl（發表區本文第三層）
　　viewtopic_poll_ballot.tpl（票選瀏覽）
　　viewtopic_poll_result.tpl （觀看目前投票結果）

　　第一個首頁比較難，其次則比較簡單，製作一個抄襲而來的新風格（當然，是按你的意思重新再編排一次），網頁製作熟練者大約只需要十幾小時（我個人大概需要一倍時間）。
　　改風格非常簡單，幾乎所有連結、圖示，在合乎HTML語法下你都可任意變換位置；只要記住整個PHPBB都是由三個（頭、中、尾）的檔所組成，而被抽換顯示的始終都是首頁index_body.tpl卡住的那個位置。你只需要將那塊好好保留起來，其餘位置想怎樣排就可以怎樣排。
　　我個人接觸PHP才一個多月不到，所以以上敘述錯誤在所難免，請多指正。

謬西 2005.02.27 第二次修正

文章由 **StickyKid** » 2005-02-03 17:41

nice~! 好久沒看到這麼詳細的教學了^"^
整理這些辛苦你啦~ 的確幫助很多對風格不了解的人呢

文章由謬西 » 2005-02-03 22:42

StickyKid 寫:nice~! 好久沒看到這麼詳細的教學了^"^
整理這些辛苦你啦~ 的確幫助很多對風格不了解的人呢

老天，我好喜歡你版面的風格，是你網站的崇拜者
曾經以假亂真的做了一個仿PHPBB的……呵！
但是頂端最具風格的圖我畫不出那種味道，只好放棄了
我要說，色調配得真好\r
簡單、清爽外加美

文章由 **StickyKid** » 2005-02-03 23:11

謬西寫:老天，我好喜歡你版面的風格，是你網站的崇拜者
曾經以假亂真的做了一個仿PHPBB的……呵！
但是頂端最具風格的圖我畫不出那種味道，只好放棄了
我要說，色調配得真好\r
簡單、清爽外加美

我做過的風格沒有你說的那麼好啦

頂端的圖? 是說前年的kuloo.com嘛?
還是去年的loveloli.net?
XD~ 我好像做過四個風格了
不過都沒釋出

文章由 bu » 2005-02-03 23:50

呵.... =.=||
期待最新的 ORZ 風格吧 ^^

文章由 **Kill** » 2005-02-04 08:01

呵\r
相信我
一定不會釋出－　－

文章由謬西 » 2005-02-04 10:26

我做過的風格沒有你說的那麼好啦
頂端的圖? 是說前年的kuloo.com嘛?
還是去年的loveloli.net?
XD~ 我好像做過四個風格了
不過都沒釋出

應該是今年的吧！或許該說，就是你現在這個……\r
我有三四年沒碰任何關於網路的玩意了
接觸PHP這種語言……甚至玩PHPBB才整整一個月
臨時起意想架個站當窩，所以之前……呵！
老實說，關於PHP我還在摸索中，寫了兩個留言版MOD都出現BIG5字元問題
還需要大家多多指教

PS.
關於RO，呵！我也曾經瘋過，還是最老、測試期開始的

文章由 **StickyKid** » 2005-02-04 17:53

bu 寫:呵.... =.=||
期待最新的 ORZ 風格吧 ^^

那是老外做的
我只是改改圖而已

k122417901 寫:呵\r
相信我
一定不會釋出－　－

你想要哪個風格啊我找找看啊

謬西寫:應該是今年的吧！或許該說，就是你現在這個……

今年... 今年還沒有論壇誕生吧呢

文章由 **Kill** » 2005-02-04 18:27

酷魯的還在嗎
不是已經掛了嗎?

文章由 **mamtinagirl** » 2005-02-05 13:02

謬西寫: 所以我們先要做的是按下你鍵盤的按鍵擷取畫面

請問這是哪幾個按鍵

?!
因為我是初學者....
所以不要打我喔

~

文章由 **[ffs]hunej** » 2005-02-05 13:07

StickyKid 寫:
謬西寫:老天，我好喜歡你版面的風格，是你網站的崇拜者
曾經以假亂真的做了一個仿PHPBB的……呵！
但是頂端最具風格的圖我畫不出那種味道，只好放棄了
我要說，色調配得真好\r
簡單、清爽外加美
我做過的風格沒有你說的那麼好啦
頂端的圖? 是說前年的kuloo.com嘛?
還是去年的loveloli.net?
XD~ 我好像做過四個風格了
不過都沒釋出

該不會是你的部落格吧

文章由 **StickyKid** » 2005-02-05 13:24

k122417901 寫:酷魯的還在嗎
不是已經掛了嗎?

找找看吧.. 我記得圖好像還在我媽筆記型電腦的樣子
那是之後才想起來的...

mamtinagirl 寫:請問這是哪幾個按鍵哈哈哈 ?!
因為我是初學者....
所以不要打我喔嘲笑 ~

右上方找找看Pring Scrn

hunej 寫:該不會是你的部落格吧

如果是的話就是最愛羅莉的追殺比爾風格啦

文章由 **風之劍客** » 2005-08-16 17:01

感謝大大，正想自己做風格說！！

竹貓星球

[討論] 三角貓風格修改法

[討論] 三角貓風格修改法

Re: [討論] 三角貓風格修改法