以下設計感謝<a href="http://ooo.tnc.edu.tw/~data/modules/tadbook2/view.php?book_sn=20&bdsn=482">tad講義教材</a>網提供相關訊息 , 本設計自行修改設計 順便力入自己的觀點
內容如下 : 一般佈景的位置目錄在themes,且一個目錄就是一個佈景 , 再則目錄中一定要有theme.html檔案做為前端的網頁樣板
以下說明如何製作自己的佈景主題網頁
1.請於themes目錄下建立 MYSTYLE(新資料夾)
2.建立一個網頁theme.html,儲存於MYSTYLE目錄下。
3.網頁內容請使用表格繪製 , 並設定名稱及id名稱 , 因為這些ID名稱具有版面連結功能 , 以下簡單各個名稱
1 id="content" ( 主要內容區 ) ,id="leftcolumn" (左邊區塊) ,id="centerCcolumn" (中間區塊) , id="centerLcolumn" (中間左邊區塊) , id="centerRcolumn" (中間右邊區塊) , id="rightcolumn" ( 右邊區塊 ) , id="footerbar" ( 頁尾區 )
2.以上皆用表格設計 , 至於位置其實是沒有規定的 可以任意放置 但為了管理方便 , 建議還是要有所整理
註 : 使用表格 不可設定 高度喔 , 對齊一定要用垂直靠左上
如有圖片可存在 themes/佈景目錄/images下
ID的命名表格是用<TD>
結果如下:請複製下列語法並將中文部份刪除即可使用
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3" valign="top"><{foreach item=block from=$xoops_lblocks}>
<{include file="MYSTYLE/blocks/theme_blockleft.html"}>
<{/foreach}>左區塊</td>
<td colspan="2" valign="top"><{foreach item=block from=$xoops_ccblocks}>
<{include file="MYSTYLE/blocks/theme_blockcenter_c.html"}>
<{/foreach}>
中間區塊</td>
<td rowspan="3" valign="top"><{foreach item=block from=$xoops_rblocks}>
<{include file="MYSTYLE/blocks/theme_blockright.html"}>
<{/foreach}>
右區塊</td>
</tr>
<tr>
<td valign="top"><{foreach item=block from=$xoops_clblocks}>
<{include file="MYSTYLE/blocks/theme_blockcenter_l.html"}>
<{/foreach}>
中間左區塊</td>
<td valign="top"><{foreach item=block from=$xoops_crblocks}>
<{include file="MYSTYLE/blocks/theme_blockcenter_r.html"}>
<{/foreach}>中間右區塊</td>
</tr>
<tr>
<td colspan="2"valign="top">主內容區<{$xoops_contents}></td>
</tr>
<tr>
<td colspan="4" valign="top"><{$xoops_footer}>頁尾</td>
</tr>
</table>
4 請將DEFAULT的全部目錄複製到MYSTYLE目錄下。
5.如有圖片請修正路徑成為 <{$xoops_imageurl}>images/檔案名稱(含副檔名喔)。
6.將下列內容複製到</head>之前。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<!-- RMV: added module header -->
<{$xoops_module_header}>
<script type="text/javascript">
<!--
<{$xoops_js}>
//-->
</script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="<{$xoops_imageurl}>js/adminmenu.js"></script>
<script type="text/javascript" src="<{$xoops_imageurl}>js/ie5.js"></script>
<script type="text/javascript">
function toggle(notifs_form)
{
obj=document.getElementById(notifs_form);
obj.style.display=!(obj.style.display=="block")? "block" : "none";
}
function swapimage(swap)
{
img_plus="<{$xoops_imageurl}>images/plus.gif";
img_minus="<{$xoops_imageurl}>images/minus.gif";
obj=document.getElementById(swap);
obj.src=!(obj.src==img_minus)? img_minus : img_plus;
}
</script>
</head>
註 : 大功告成 , 請複製程式碼的朋友 , 記得要轉半型喔
別忘了要修改設定啟用樣板喔
一般設定的內容
>即時新聞-熱門
2008年1月18日星期五
XOOP -自訂佈景
订阅:
博文评论 (Atom)
0 评论:
发表评论