| 引用: | 以下内容是我一一打出来的,不可避免的会有些错误,大家发现后请通知我,我会及时更正
此帮助文档写给那些刚接触Diy-Page的朋友,以下我将以DiY-Page默认风格为例为大家简单介绍一下Diy-page的风格! |
|
一.风格文件的存放位置:
1.图片:dpimages\style\default
2.模板:dpmain\style\default
二.模板文件介绍:
1.domain\style\index.php : 风格的基本信息,如风格名称,图片所在文件夹名称以及设计者的信息
2.dpmain\style\default\box : 对象所用样式的目录
index.php : box文件默认的所属页面区域,如header.left.right,此文件一般不需要改动,可以忽略
longbar.htm 
miniframe.htm 
null.htm 
smallbox.htm 
topbar.htm 
wideframe.htm 
3.dpmain\style\default\divfrm :
index.php :不用考虑
index.htm :首页的基本框架(制作风格时要修改css的路径)
index.css :风格的核心,所有的属性都在这里,如首页背景,字体颜色以及box和obj文件的属性等等
4.dpmain\style\default\obj : 对象所在目录
A.论坛基本模块:
| 引用: | bbscms_announcelist.htm //论坛公告显示
bbscms_attachgallery.htm //附件图片展示
bbscms_forumdisplay.htm //论坛帖子列表(内容对象)
bbscms_forumlink.htm //联盟论坛链接显示
bbscms_forumlist.htm //论坛列表
bbscms_memberlist.htm //自定义会员列表
bbscms_onlinelist.htm //论坛在线列表
bbscms_posterlist.htm //会员发帖排行
bbscms_statinfo.htm //论坛统计信息
bbscms_threadcontent.htm //帖子内容显示(内部对象)
bbscms_threadlist.htm //主题列表 |
|
B.系统基本模块:
| 引用: | common_guidebar.htm //页面导航栏
common_htmlcode.htm //HTML代码
common_iframe.htm //iFrame内嵌页面
common_imagecode.htm //图片(可链接)
common_linkbar.htm //底部链接栏
common_swfcode.htm //Flash动画 |
|
三.风格属性简单介绍:
这里只是简单介绍一下css所修饰的模板,对css的学习请找专业教程
dpmain\style\default\divfrm\index.css :
| 引用: | //整体定义部分
body,td,th { //主体部分
font-family: Tahoma, Arial; //主体部分字体 按优先顺序排列
font-size: 12px; //主体部分字体大小
color: #38548D; //主体部分字体颜色
}
body { //主体部分扩展
margin-left: 0px; //模块左侧边距
margin-top: 0px; //模块顶部边距
margin-right: 0px; //模块右侧边距
margin-bottom: 0px; //模块右侧边距
background-color: #EDF2FB; //模块背景
}
a:link { //主体链接颜色部分
text-decoration: none; //链接效果
color: #38548D; //链接颜色
}
a:visited { //访问过的链接的颜色部分
text-decoration: none; //链接效果
color: #38548D; //链接颜色
}
a:hover { //鼠标经过的链接颜色部分
text-decoration: none; //链接效果
color: #8AA3BF; //链接颜色
}
a:active { //活动连接的颜色部分
text-decoration: none; //链接效果
color: #38548D; //链接颜色
}
hr { //分隔线的颜色部分
color: #BCD5F1; //分隔线的颜色
}
input,textarea,select { //输入框部分
padding: 2px; //边距
border-left: 1px #BCD5F1 solid; //左边框边距与颜色及属性
border-right: 1px #8AA3BF solid; //右边框边距与颜色及属性
border-top: 1px #BCD5F1 solid; //上边框边距与颜色及属性
border-bottom: 1px #8AA3BF solid; //下边框边距与颜色及属性
color: #38548D; //输入框文字颜色
background: #FFFFFF; //输入框背景颜色
}
ul { //列表项目部分
margin: 0; //边界
padding: 0; //边距
}
li { //列表项目扩展
list-style: none; //列表属性
}
//框架部分
#header { //头部属性
width: 994px; //宽度
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #FFFFFF;
}
#contain { //中间整体部分
width: 994px;
margin-right: auto;
margin-left: auto;
}
#mainbg { //中间整体部分扩展
width: 994px;
padding: 0px;
background: #FFFFFF;
float: left;
}
#left{ //左侧部分
width: 200px;
float: left;
margin: 2px 2px 1px 1px;
padding: 1px;
background: #FFFFFF;
}
#right { //右侧部分
width: 780px;
overflow: hidden;
float: right;
margin: 2px 0px 2px 0px;
padding: 1px;
background: #FFFFFF;
}
#footer{ //底部部分
width: 994px;
clear: both;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #FFFFFF;
}
//box部分(属性名称和box里的模板基本一致)
//null.htm部分
.NullDIV {
margin: 0;
padding: 0;
}
//longbar.htm部分
.LongBarTable {
border: 0;
}
.LongBarTitleTD {
border-right: 1px solid #DCDDE2;
background-image: url("../../../../dpimages/style/default/longbar_bg_left.gif");
letter-spacing: 0.2em;
color: #000000;
}
.LongBarMainTD {
background-image: url("../../../../dpimages/style/default/longbar_bg.gif");
padding-left: 12px;
}
//miniframe.htm部分
.MiniFrameTitleTable {
border: #BCD5F1 1px solid;
background-image: url("../../../../dpimages/style/default/bg1.gif");
margin: 5px 0 5px 0;
}
.MiniFrameTitlePreTD {
background-image: url("../../../../dpimages/style/default/plus.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.MiniFrameTitleTD {
background-image: url("../../../../dpimages/style/default/bg1.gif");
font-weight: bold;
letter-spacing: 0.2em;
color: #38548D;
}
.MiniFrameMainTable {
border: #BCD5F1 1px dashed;
background-color: #F2FFFF;
}
//smallbox.htm部分
.SmallBoxTable {
border: 1px solid #76D9D8;
margin: 5px 0 5px 0;
}
.SmallBoxTitleTD {
background-image: url("../../../../dpimages/style/default/smallboxbg.gif");
color: #38548D;
}
.SmallBoxMainTD {
padding: 5px;
}
//topbar.htm部分
.TopBarTable {
border: #BCD5F1 1px solid;
background-image: url("../../../../dpimages/style/default/bg1.gif");
margin: 5px 0 5px 0;
}
.TopBarPreTD {
background-image: url("../../../../dpimages/style/default/plus.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.TopBarTitleTD {
font-weight: bold;
letter-spacing: 0.2em;
color: #38548D;
}
.TopBarMainTD {
padding: 0;
}
//wideframe.htm部分
.WideFrameTitleTable {
border: #BCD5F1 1px solid;
background-image: url("../../../../dpimages/style/default/bg1.gif");
margin: 5px 0 5px 0;
}
.WideFrameTitlePreTD {
background-image: url("../../../../dpimages/style/default/plus.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.WideFrameTitleTD1 {
font-weight: bold;
letter-spacing: 0.2em;
color: #38548D;
}
.WideFrameTitleMidTD {
background-image: url("../../../../dpimages/style/default/gtgt.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.WideFrameTitleTD2 {
font-size: 9px;
text-transform: uppercase;
color: #38548D;
}
.WideFrameMainTable {
border: #BCD5F1 1px dashed;
background-color: #F2FFFF;
}
//obj部分
//bbscms_forumdisplay.htm和bbscms_threadcontent.htm的属性
.FullLightBorder {
border: 1px solid #CCCCCC;
}
.BoldLighted {
font-weight: bold;
color: #38548D;
}
.Lighted {
color: #38548D;
}
.DarkBg {
background-color: #DFEAF6;
}
.LessDarkBg {
background-color: #F2FFFF;
}
//common_linkbar.htm的属性
.LinkBar {
width: 994px;
height: 38px;
background-image: url("../../../../dpimages/style/default/linkbar_bg.gif");
text-align: center;
padding-top: 10px;
}
.LinkBarTitle {
font-weight: bold;
color: #000000;
}
.LinkBarText {
color: #000000;
}
//common_guidebar.htm属性
#topnav {
background: url("../../../../dpimages/style/default/topnav_bg.gif");
overflow: hidden;
height: 36px;
font-size: 14px;
padding-top: 3px;
}
#topnav ul {
width: 1000px !important;
width: 980px;
line-height: 33px;
margin-left: 5px;
margin-right: auto;
}
#topnav li {
float: left;
width: 97px;
color: #000000;
font-weight: bold;
text-align: center;
}
#topnav li a,#topnav li a:visited {
color: #000000;
text-decoration: none;
font-weight: bold;
display: block;
width: 97px;
height: 33px;
margin-left: auto;
margin-right: auto;
}
#topnav li a:hover {
background: url("../../../../dpimages/style/default/topnav_bg_hover.gif") no-repeat 2px 0px;
}
#topnav li.activate {
width: 100px;
background: url("../../../../dpimages/style/default/topnav_bg_activate.gif") no-repeat 2px 0px;
text-align: center;
}
#topnav li.activate a:hover{
background: none;
text-align: center;
}
//引用.代码所用table的属性
.BoxBorder {
background-color: #DDDDDD;
}
.BoxBackground {
background-color: #F7F7F7;
} |
|
|
视频教程?一个风格要是10分钟就能做好的话,我就做一个,但问题不是啊,真正要做合格(不是好哦),都要花不少时间,这样的视频怎么能做出来,就算做出来我估计也得几百M什么的