PJBlog2最新版本下载\|升级包(2007.12.23)	Bo-Blog V2.1.0 到 PJBlog 2.7 的转换程序	WP 2.3 到 PJ 2.6/2.7 的转换程序	手把手教您在PJForum上传图片
PJBlog技术支持论坛使用问题总索引	手术式讲解视频教程如何制作	PJblog2.7.05终极资源包电驴免费下载	风格使用区-HOT! 凤凰行动开始！

[PJblog^2]技术支持论坛 - PJBLOG SUPPORT FORUM » 『界面风格讨论』 » 『 PJ-Blog皮肤教程新区』 » ★PJ模版结构图CSS示意图──★PJ风格制作入门①

打印

★PJ模版结构图CSS示意图──★PJ风格制作入门①

本主题由 anson 于 2008-2-23 00:30 解除精华

ilank

iLank

｛PJFORUM版主｝

Rank: 21

风格区版主

UID: 12560
帖子: 634
精华: 4
积分: 7266
PJ币: 2841 元
阅读权限: 100
在线时间: 659 小时

PJBLOG SKIN设计师 - 第二届PJBLOG2 SKIN设计大赛入围前十名颁发

发短消息
加为好友
当前离线

1^# 大中小发表于 2008-2-20 14:51 只看该作者

★PJ模版结构图CSS示意图──★PJ风格制作入门①

------------------------3D CSS架构拓扑flash：------------------------

--------------------------------pj整体结构-------------------------------

-------------------------pj顶部结构------------------------------

----------------------------pj内容结构-------------------------------

----------------------------pj侧边结构-------------------------------

PJBlog2的界面一共用到 5 个CSS文件,(5个文件,其实不用担心,我只是为了方便阅读,所以把CSS文件分成了5个)
global.css 全局样式表
layout.css 层次样式表
typography.css 局部样式表
link.css 超链接样式表
UBB/editor.css UBB编辑器样式表

------------------------------------模板结构html代码------------------------------

复制内容到剪贴板

代码:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </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>

2. 关于Skins的XML定义
PJBlog2的界面必须拷贝到 Skins\ 文件夹下面,而且每一个界面都必须包含一个 skin.xml 界面配置的XML文件才可以被系统读取
1. 界面配置文件 skin.xml 结构

复制内容到剪贴板

代码:

<?xml version="1.0" encoding="UTF-8"?>

<SkinSet>

<SkinName>默认皮肤 - Flash导航条风格</SkinName>

<SkinDesigner>PuterJam</SkinDesigner>

<pubDate>2004-11-6</pubDate>

<DesignerURL>http://puterjam.vipx.net</DesignerURL>

<DesignerMail>puterjam@etang.com</DesignerMail>

<Flash>

<UseFlash>-1</UseFlash>

<FlashPath>head.swf</FlashPath>

<FlashWidth>748</FlashWidth>

<FlashHeight>80</FlashHeight>

<FlashAlign>center</FlashAlign>

<FlashTop>0</FlashTop>

<FlashTransparent>-1</FlashTransparent>

</Flash>

</SkinSet>

2. 界面配置文件 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/ 文件夹里面的文件都不能少.因为它提供给UBB编辑器图片和样式等信息
2. 自定义模块也有属于自己的样式定义. 自定义模块目前有两总类型:
一种是内容模块 Content Module
另一种是侧边模块 Side Module.
我们需要控制某个自定义模块时就可以使用
#Content_ 或者 #Side_ 来独立控制它们的样式.例如:
某个 侧边模块 的标识是 Category, 那么就可以用 #Side_Category 来控制这个模块的CSS.
3. Flash 导航条如何获取日志分类?
PJBlog2提供了一个 menu.asp 的文件,它动态输出了日志分类的XML文件
演示看这里

SiteName 站点名字
SiteURL 站点地址
Menu/MenuName 分类名称
Menu/MenuIntro 分类说明
Menu/MenuType 分类类型 0=同时在顶部和侧边显示 1=只在顶部显示 2=只在侧边显示
Menu/MenuUrl 分类链接地址
Menu/logNum 分类日志数目

PJBlog2皮肤立体拓扑图.swf(登录论坛才能下载)

[ 本帖最后由 ilank 于 2008-2-21 18:45 编辑 ]