PJblog皮肤模版制作说明-皮肤结构CSS
PJblog皮肤模版制作说明-皮肤结构CSS示意图
2007-11-02 11:24
PJblog皮肤模版制作说明-皮肤结构CSS示意图,对于皮肤开发者来说，这是很有用的。
以下内容为局部的CCS示意图
图1 PjBlog2 CSS布局-整体框架
图2 PjBlog2 CSS布局-顶部#header结构
图3 PjBlog2 CSS布局-内容#innermainContent结构
图4 PjBlog2 CSS布局-侧边#sidebar结构
下面的是全局的CCS 示意图。
PJBLOG2 皮肤制作视频教程
1.PJBlog2的界面一共用到 5 个CSS文件
global.css 全局样式表
layout.css 层次样式表
typography.css 局部样式表
link.css 超链接样式表
UBB/editor.css UBB编辑器样式表
2. 关于Skins的XML定义
PJBlog2的界面必须拷贝到 Skins\\ 文件夹下面,而且每一个界面都必须包含一个
skin.xml 界面配置的XML文件才可以被系统读取
界面配置文件 skin.xml 字段分析
SkinName 界面名称
SkinDesigner 界面设计者
pubDate 发布时间
DesignerURL 设计者主页
DesignerMail 设计者电子邮件
Flash/UseFlash 是否使用Flash导航条 0=false -1=true
Flash/FlashPath Flash导航条路径名
Flash/FlashWidth Flash导航条宽度
Flash/FlashHeight Flash导航条高度
Flash/FlashAlign Flash导航条对齐方式 left | right | center
Flash/FlashTop Flash导航条距离页面顶部高度
Flash/FlashTransparent Flash导航条是否透明 0=false -1=true
3. PJBlog2界面的其他说明
(1). 每个界面下面的 UBB/ 文件夹里面的文件都不能少.这个文件夹一般是不需要改动的，在每次制作SKIN时都要记得把这个目录拷到你的皮肤目录下。
(2). 自定义模块也有属于自己的样式定义. 自定义模块目前有两总类型:
一种是内容模块 Content Module
另一种是侧边模块 Side Module.
我们需要控制某个自定义模块时就可以使用#Content_<模块标识> 或者 #Side_<模块标识> 来独立控制它们的样式.
例如:
某个 侧边模块 的标识 是 Category, 那么就可以 用 #Side_Category 来控制这个模块的CSS.以下是HTML代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> <a href="http://www.8dig.com" target="_blank">八度空间</a>——<a href="http://www.8dig.com" target="_blank">http://www.8dig.com</a></TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> body{ background-color:#FFFAFA; border:1px solid #7D7D7D; color: #8B4513; font:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:13px; padding:2px; margin:0px; } #blogname{ MARGIN:5px; BORDER: 1px solid #9ACD32; BACKGROUND: #C6E28D; WIDTH:970px; HEIGHT:20px; } #blogtitle{ MARGIN:5px; BORDER: 1px solid #9ACD32; BACKGROUND: #F0E68C; WIDTH:960px; HEIGHT:20px; } #menu{ MARGIN:5px; BORDER: 1px solid #9ACD32; BACKGROUND: #8AB632; WIDTH:970px; HEIGHT:20px; } #ul{ MARGIN:5px; BORDER: 1px solid #9ACD32; BACKGROUND: #F0E68C; WIDTH:960px; HEIGHT:20px; } #menuL{float:left; width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32; margin: 5px 3px 5px 4px; } #li{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 4px 5px 2px; } #menuDiv{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px; } #menuR{float:right;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px; } #header{ MARGIN:5px; BORDER: 1px solid #7B7B7B; BACKGROUND:#ccd2de; WIDTH:980px; HEIGHT:20px; } #container{ WIDTH:980px; BACKGROUND:#FFF; border: 1px double #9ACD32; margin: 2px 2px 2px 2px; text-align: center; } #leftsidebar{ border:1px solid #5F82E9; FLOAT:left; MARGIN:1px 0px 5px 5px; BACKGROUND:#F2F3F7; WIDTH:190px; clear:left; line-height: 150%; } #tbody{ border: 1px solid #ACD558; MARGIN:5px 3px 3px 5px; PADDING:0px; WIDTH:970px; BACKGROUND: #F0E68C; } #maincontent{ border:1px solid #A68100; MARGIN:3px 5px 3px 5px; PADDING:0px; WIDTH:970px; BACKGROUND: #C8C8C8; } #innermaincontent{ border:1px solid #5F82E9; MARGIN:1px 3px 3px 5px; WIDTH:546px; BACKGROUND: #F0E68C; line-height: 150%; FLOAT:left; } #mainContent-topimg{border:1px solid #B58615; MARGIN:1px 3px 8px 5px; WIDTH:540px; BACKGROUND: #ECC56A; line-height: 150%; } #content-width{border:1px solid #B58615; MARGIN:5px 3px 3px 5px; WIDTH:540px; BACKGROUND: #ECC56A; line-height: 150%; } #pageContent{border:1px solid #9ACD32; MARGIN:5px 3px 8px 3px; WIDTH:530px; BACKGROUND: #B4D96A; line-height: 150%; } #Content{border:1px solid #9ACD32; MARGIN:8px 3px 5px 3px; WIDTH:530px; BACKGROUND: #B4D96A; line-height: 150%; } #Content-top{border: 1px solid #70922B; MARGIN:5px 3px 12px 3px; WIDTH:520px; BACKGROUND: #8AB632; line-height: 150%; } #ContentTitle{border: 1px solid #AEA01A; MARGIN:5px 3px 5px 3px; WIDTH:250px; BACKGROUND: #EBDB47; line-height: 150%; float:left; } #ContentAuthor{border: 1px solid #AEA01A; MARGIN:5px 3px 5px 3px; WIDTH:250px; BACKGROUND: #EBDB47; line-height: 150%; float:right; } #Content-body{border:1px solid #70922B; MARGIN:12px 3px 5px 3px; WIDTH:520px; BACKGROUND: #8AB632; line-height: 150%; } #Content-bottom{border:1px solid #70922B; MARGIN:12px 3px 8px 3px; WIDTH:520px; BACKGROUND: #8AB632; line-height: 150%; } #mainContent-bottomimg{border: 1px solid #B58615; MARGIN:8px 3px 12px 5px; WIDTH:540px; BACKGROUND: #ECC56A; line-height: 150%; } #rightsidebar{ border: 1px solid #5F82E9; FLOAT:right; MARGIN:1px 5px 5px 2px; WIDTH:190px; BACKGROUND:#F2F3F7; clear:right; line-height: 150%; } #sidebar-topimg{ border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:190px; BACKGROUND: #C6E28D; line-height: 150%; } #sidepanel{ border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:190px; BACKGROUND: #C6E28D; line-height: 150%; } #Ptitle{border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:178px; BACKGROUND: #F0E68C; line-height: 150%; } #Pcontent{border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:178px; BACKGROUND: #F0E68C; line-height: 150%; } #Pfoot{border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:178px; BACKGROUND: #F0E68C; line-height: 150%; } #sidebar-bottomimg{ border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:190px; BACKGROUND: #C6E28D; line-height: 150%; } #footer{ CLEAR:both; MARGIN:5px; PADDING:5px 0px 5px 0px; BACKGROUND:#ccd2de; HEIGHT:20px; WIDTH:985px; BORDER: 1px solid #7B7B7B; } </style> </HEAD> <BODY> <div id="container"> container <div id="header">header <div id="blogname">blogname <div id="blogtitle">blogtitle</div> </div> <div id="menu">menu <div id="ul">ul <div id="menuL">menuL</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuR">menuR</div> </div> </div> </div> <div id="tbody">tbody <div id="maincontent">maincontent <div id="leftsidebar">leftsidebar <div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel <div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div> </div><div id="sidebar-bottomimg">sidebar-bottomimg</div> </div> <div id="innermaincontent">innermaincontent <div id="mainContent-topimg">mainContent-topimg</div> <div id="content-width">content-width <div id="pageContent">pageContent</div> <div id="Content">Content <div id="Content-top">Content-top <div id="ContentTitle">ContentTitle</div><div id="ContentAuthor">ContentAuthor</div> </div><div id="Content-body">Content-body</div><div id="Content-bottom">Content-bottom</div> </div> </div> <div id="mainContent-bottomimg">mainContent-bottomimg</div> </div> <div id="rightsidebar">rightsidebar <div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel <div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div> </div><div id="sidebar-bottomimg">sidebar-bottomimg</div> </div> </div> </div> <div id="footer">footer</div> </div> <div></div> </BODY> </HTML>
文章来自: 本站转载
2007-11-02 11:24
PJblog皮肤模版制作说明-皮肤结构CSS示意图,对于皮肤开发者来说，这是很有用的。
以下内容为局部的CCS示意图
图1 PjBlog2 CSS布局-整体框架
图2 PjBlog2 CSS布局-顶部#header结构
图3 PjBlog2 CSS布局-内容#innermainContent结构
图4 PjBlog2 CSS布局-侧边#sidebar结构
下面的是全局的CCS 示意图。
PJBLOG2 皮肤制作视频教程
1.PJBlog2的界面一共用到 5 个CSS文件
global.css 全局样式表
layout.css 层次样式表
typography.css 局部样式表
link.css 超链接样式表
UBB/editor.css UBB编辑器样式表
2. 关于Skins的XML定义
PJBlog2的界面必须拷贝到 Skins\\ 文件夹下面,而且每一个界面都必须包含一个
skin.xml 界面配置的XML文件才可以被系统读取
界面配置文件 skin.xml 字段分析
SkinName 界面名称
SkinDesigner 界面设计者
pubDate 发布时间
DesignerURL 设计者主页
DesignerMail 设计者电子邮件
Flash/UseFlash 是否使用Flash导航条 0=false -1=true
Flash/FlashPath Flash导航条路径名
Flash/FlashWidth Flash导航条宽度
Flash/FlashHeight Flash导航条高度
Flash/FlashAlign Flash导航条对齐方式 left | right | center
Flash/FlashTop Flash导航条距离页面顶部高度
Flash/FlashTransparent Flash导航条是否透明 0=false -1=true
3. PJBlog2界面的其他说明
(1). 每个界面下面的 UBB/ 文件夹里面的文件都不能少.这个文件夹一般是不需要改动的，在每次制作SKIN时都要记得把这个目录拷到你的皮肤目录下。
(2). 自定义模块也有属于自己的样式定义. 自定义模块目前有两总类型:
一种是内容模块 Content Module
另一种是侧边模块 Side Module.
我们需要控制某个自定义模块时就可以使用#Content_<模块标识> 或者 #Side_<模块标识> 来独立控制它们的样式.
例如:
某个 侧边模块 的标识 是 Category, 那么就可以 用 #Side_Category 来控制这个模块的CSS.以下是HTML代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> <a href="http://www.8dig.com" target="_blank">八度空间</a>——<a href="http://www.8dig.com" target="_blank">http://www.8dig.com</a></TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> body{ background-color:#FFFAFA; border:1px solid #7D7D7D; color: #8B4513; font:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:13px; padding:2px; margin:0px; } #blogname{ MARGIN:5px; BORDER: 1px solid #9ACD32; BACKGROUND: #C6E28D; WIDTH:970px; HEIGHT:20px; } #blogtitle{ MARGIN:5px; BORDER: 1px solid #9ACD32; BACKGROUND: #F0E68C; WIDTH:960px; HEIGHT:20px; } #menu{ MARGIN:5px; BORDER: 1px solid #9ACD32; BACKGROUND: #8AB632; WIDTH:970px; HEIGHT:20px; } #ul{ MARGIN:5px; BORDER: 1px solid #9ACD32; BACKGROUND: #F0E68C; WIDTH:960px; HEIGHT:20px; } #menuL{float:left; width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32; margin: 5px 3px 5px 4px; } #li{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 4px 5px 2px; } #menuDiv{float:left;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px; } #menuR{float:right;width:130px;HEIGHT:20px;BORDER: 1px solid #9ACD32;margin: 5px 3px 5px 4px; } #header{ MARGIN:5px; BORDER: 1px solid #7B7B7B; BACKGROUND:#ccd2de; WIDTH:980px; HEIGHT:20px; } #container{ WIDTH:980px; BACKGROUND:#FFF; border: 1px double #9ACD32; margin: 2px 2px 2px 2px; text-align: center; } #leftsidebar{ border:1px solid #5F82E9; FLOAT:left; MARGIN:1px 0px 5px 5px; BACKGROUND:#F2F3F7; WIDTH:190px; clear:left; line-height: 150%; } #tbody{ border: 1px solid #ACD558; MARGIN:5px 3px 3px 5px; PADDING:0px; WIDTH:970px; BACKGROUND: #F0E68C; } #maincontent{ border:1px solid #A68100; MARGIN:3px 5px 3px 5px; PADDING:0px; WIDTH:970px; BACKGROUND: #C8C8C8; } #innermaincontent{ border:1px solid #5F82E9; MARGIN:1px 3px 3px 5px; WIDTH:546px; BACKGROUND: #F0E68C; line-height: 150%; FLOAT:left; } #mainContent-topimg{border:1px solid #B58615; MARGIN:1px 3px 8px 5px; WIDTH:540px; BACKGROUND: #ECC56A; line-height: 150%; } #content-width{border:1px solid #B58615; MARGIN:5px 3px 3px 5px; WIDTH:540px; BACKGROUND: #ECC56A; line-height: 150%; } #pageContent{border:1px solid #9ACD32; MARGIN:5px 3px 8px 3px; WIDTH:530px; BACKGROUND: #B4D96A; line-height: 150%; } #Content{border:1px solid #9ACD32; MARGIN:8px 3px 5px 3px; WIDTH:530px; BACKGROUND: #B4D96A; line-height: 150%; } #Content-top{border: 1px solid #70922B; MARGIN:5px 3px 12px 3px; WIDTH:520px; BACKGROUND: #8AB632; line-height: 150%; } #ContentTitle{border: 1px solid #AEA01A; MARGIN:5px 3px 5px 3px; WIDTH:250px; BACKGROUND: #EBDB47; line-height: 150%; float:left; } #ContentAuthor{border: 1px solid #AEA01A; MARGIN:5px 3px 5px 3px; WIDTH:250px; BACKGROUND: #EBDB47; line-height: 150%; float:right; } #Content-body{border:1px solid #70922B; MARGIN:12px 3px 5px 3px; WIDTH:520px; BACKGROUND: #8AB632; line-height: 150%; } #Content-bottom{border:1px solid #70922B; MARGIN:12px 3px 8px 3px; WIDTH:520px; BACKGROUND: #8AB632; line-height: 150%; } #mainContent-bottomimg{border: 1px solid #B58615; MARGIN:8px 3px 12px 5px; WIDTH:540px; BACKGROUND: #ECC56A; line-height: 150%; } #rightsidebar{ border: 1px solid #5F82E9; FLOAT:right; MARGIN:1px 5px 5px 2px; WIDTH:190px; BACKGROUND:#F2F3F7; clear:right; line-height: 150%; } #sidebar-topimg{ border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:190px; BACKGROUND: #C6E28D; line-height: 150%; } #sidepanel{ border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:190px; BACKGROUND: #C6E28D; line-height: 150%; } #Ptitle{border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:178px; BACKGROUND: #F0E68C; line-height: 150%; } #Pcontent{border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:178px; BACKGROUND: #F0E68C; line-height: 150%; } #Pfoot{border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:178px; BACKGROUND: #F0E68C; line-height: 150%; } #sidebar-bottomimg{ border: 1px solid #5F82E9; MARGIN:1px 5px 2px 5px; WIDTH:190px; BACKGROUND: #C6E28D; line-height: 150%; } #footer{ CLEAR:both; MARGIN:5px; PADDING:5px 0px 5px 0px; BACKGROUND:#ccd2de; HEIGHT:20px; WIDTH:985px; BORDER: 1px solid #7B7B7B; } </style> </HEAD> <BODY> <div id="container"> container <div id="header">header <div id="blogname">blogname <div id="blogtitle">blogtitle</div> </div> <div id="menu">menu <div id="ul">ul <div id="menuL">menuL</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuDiv">menuDiv</div><div id="li">li</div><div id="menuR">menuR</div> </div> </div> </div> <div id="tbody">tbody <div id="maincontent">maincontent <div id="leftsidebar">leftsidebar <div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel <div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div> </div><div id="sidebar-bottomimg">sidebar-bottomimg</div> </div> <div id="innermaincontent">innermaincontent <div id="mainContent-topimg">mainContent-topimg</div> <div id="content-width">content-width <div id="pageContent">pageContent</div> <div id="Content">Content <div id="Content-top">Content-top <div id="ContentTitle">ContentTitle</div><div id="ContentAuthor">ContentAuthor</div> </div><div id="Content-body">Content-body</div><div id="Content-bottom">Content-bottom</div> </div> </div> <div id="mainContent-bottomimg">mainContent-bottomimg</div> </div> <div id="rightsidebar">rightsidebar <div id="sidebar-topimg">sidebar-topimg</div><div id="sidepanel">sidepanel <div id="Ptitle">Ptitle</div><div id="Pcontent">Pcontent</div><div id="Pfoot">Pfoot</div> </div><div id="sidebar-bottomimg">sidebar-bottomimg</div> </div> </div> </div> <div id="footer">footer</div> </div> <div></div> </BODY> </HTML>
文章来自: 本站转载
