:::

11. 把圖片製成網頁

一、建立佈景目錄
1.建立一個資料夾,如xxx_themes_01,用來放置所有佈景相關檔案。
2.在佈景資料夾下建立images,用來放置圖檔。

二、先將背景弄出來
1.把畫面縮到50%,然後選取所有物件,拉出視窗外成為新圖檔。
2.原底圖可另存新檔到xxx_themes_01/images/bg.jpg。
3.若想縮小底圖,可選「魔術棒工具」,設成 ,然後在白色區域點一下,於選取區按右鍵→改選未選取部份,然後將選取部份拉出成新檔,儲存即可。

三、製作theme.html(XOOPS佈景主架構檔)
1.若XOOPS為UTF8,theme.html檔亦需用UTF8編碼。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
2.製作CSS檔,如:style.css,並於佈景檔中引入:
<link rel="stylesheet" type="text/css" media="all"  href="style.css" />

四、切割主畫面
1.為讓內容可以和背景融合,我們需要透明背景。開新圖檔,透明背景,大小選「使用中影像」,把剛剛拉出來的新圖檔,用 全選並複製所有物件,然後到透明圖貼上。
2.用剪裁工具,裁下標題,以下均用png格式存檔到xxx_themes_01/images/。
3.接著復原剪裁,把標題部份物件都先刪掉,並裁出主內容區的背景圖。
4.一樣復原剪裁,最後裁出頁尾部份。

 



五、拼湊主畫面成網頁

1.利用1x3表格,將圖檔合併起來。我們替表格及儲存格命名,以進行CSS設定。
<table cellspacing="0" cellpadding="0" id="content_all" >
<tr><td id="content_head"></td></tr>
<tr><td id="content_main"></td></tr>
<tr><td id="content_foot"></td></tr></table>
2.原則上,我們會把剛做的三張圖都當作背景放入儲存格中。除了中間部份,頭尾部份的圖都是不重複,並且要根據圖檔高度指定好儲存格高度。

六、製作各個區塊呈現區
1.XOOPS2.3共有八個區塊呈現區,您可自訂之。請在content_main插入4x5或3x5的表格,並未每個儲存格命名。
<table border=1 align="center" id="show_zone">
<tr><td rowspan=5 id='blocks_l'>左</td><td id='blocks_ucl'>上中左</td><td id='blocks_ucr'>上中右</td></tr>
<tr><td colspan=2 id='blocks_uc'>上中</td></tr>
<tr><td id='blocks_dcl'>下中左</td><td id='blocks_dcr'>下中右</td></tr>
<tr><td colspan=2 id='blocks_dc'>下中</td></tr>
<tr><td colspan=2 id='content'>主內容區</td></tr>
</table>
2.接著,就請替這些區域來設定CSS吧!


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

18人線上 (7人在瀏覽線上書籍)

會員: 0

訪客: 18

更多…