初学,不当之处,请多多指教
1.最后目录结构
皮肤名称
--skins
--皮肤名称.zip(skin.css,xx.ascx或xx.html,xx.jpg)
--containers
--皮肤名称.zip (container.css,xxx.ascx或xxx.html,xxx.jpg)
2. 首先,确定版面布局
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{background:#555;}
.skinwrapper{border:5px #333 solid;background:#FFF;padding:1px;}
.skinheader{padding:10px;background:#EEE;}
.skinmenu{padding:10px;background:#C00;}
.skinuser{padding:5px;background:#CCC;text-align:right;}
.skincontentstable{width:100%;}
.leftpane{background:#EEE;width:200px;}
.contentpane{background:#FFF;}
.rightpane{background:#EEE;width:200px;}
.skinfooter{padding:5px;background:#CCC;text-align:center;}
</style>
</head>
<body>
<div class="skinwrapper">
<div class="skinheader">Logo</div>
<div class="skinmenu">Menu</div>
<div class="skinuser">Register - Login</div>
<table border="0" cellpadding="10" cellspacing="0" class="skincontentstable" summary="Design Table">
<tr valign="top">
<td class="leftpane">Left Pane</td>
<td class="contentpane">Content Pane</td>
<td class="rightpane">Right Pane</td>
</tr>
</table>
<div class="skinfooter">Copyright</div>
</div>
</body>
</html>
3.把body标签内的东西做为一独立文件保存(xx.ascx或xx.html)
4.把style标签内的东西做为一独立文件保存(skin.css)
5.在xx.ascx或xx.html插入Skin objects
ascx里如:<div class="skinfooter"><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="skinfooter" /></div>
html里如::<div class="skinfooter">[COPYRIGHT]</div>
如果使用xx.ascx的话,每个 skin object 都需要registered ,如:<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
需要注意的是,定义的pane都不许runat=server
6.补充skin.css的样式
containers的作法与这类似...
最后完成的目录如1所示即可.
1.最后目录结构
皮肤名称
--skins
--皮肤名称.zip(skin.css,xx.ascx或xx.html,xx.jpg)
--containers
--皮肤名称.zip (container.css,xxx.ascx或xxx.html,xxx.jpg)
2. 首先,确定版面布局
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{background:#555;}
.skinwrapper{border:5px #333 solid;background:#FFF;padding:1px;}
.skinheader{padding:10px;background:#EEE;}
.skinmenu{padding:10px;background:#C00;}
.skinuser{padding:5px;background:#CCC;text-align:right;}
.skincontentstable{width:100%;}
.leftpane{background:#EEE;width:200px;}
.contentpane{background:#FFF;}
.rightpane{background:#EEE;width:200px;}
.skinfooter{padding:5px;background:#CCC;text-align:center;}
</style>
</head>
<body>
<div class="skinwrapper">
<div class="skinheader">Logo</div>
<div class="skinmenu">Menu</div>
<div class="skinuser">Register - Login</div>
<table border="0" cellpadding="10" cellspacing="0" class="skincontentstable" summary="Design Table">
<tr valign="top">
<td class="leftpane">Left Pane</td>
<td class="contentpane">Content Pane</td>
<td class="rightpane">Right Pane</td>
</tr>
</table>
<div class="skinfooter">Copyright</div>
</div>
</body>
</html>
3.把body标签内的东西做为一独立文件保存(xx.ascx或xx.html)
4.把style标签内的东西做为一独立文件保存(skin.css)
5.在xx.ascx或xx.html插入Skin objects
ascx里如:<div class="skinfooter"><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="skinfooter" /></div>
html里如::<div class="skinfooter">[COPYRIGHT]</div>
如果使用xx.ascx的话,每个 skin object 都需要registered ,如:<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
需要注意的是,定义的pane都不许runat=server
6.补充skin.css的样式
containers的作法与这类似...
最后完成的目录如1所示即可.