亲宝软件园·资讯

展开

Pjblog模板制作教程 超强推荐

人气:0
想了解Pjblog模板制作教程 超强推荐的相关内容吗，在本文为您仔细讲解的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：Pjblog模板制作教程,超强推荐，下面大家一起来学习吧。
2007.1.30更新……转载自 http://www.dnxh.cn/blog/article.asp?id=155
Pjblog的用户群越来越大，一个Blog就相当于一个Blogger网上的家。而现在追求个性的时代，给自己的Blog做过有个性的、符合自己特点的Skin是大家的一个愿望。但这个毕竟涉及到一些知识，我们需要通过自己的努力学习来完成我们的愿望。我将从零说起，大概是这样的一个过程：准备工作→Skin的构思→制图→切片→编写CSS→预览→调试兼容性→美化细节，预览和编写是个循环过程。我想通过本教程能够使大家了解Skin制作，不需要再用别人做的Skin，靠自己的努力把自己的Blog装饰的漂亮有个性。很振奋吧，那我们往下看……
一、准备工作
1.1 必需的一些基础
你要有学习知识的欲望，这个是一切的前提。你对Pjblog的使用有一定的了解（如果你还不知道Skin是什么、怎么安装，建议你不要往下看）。在做Skin的时候要细心，严格要求自己，有一定的审美观。最好熟悉一些制图软件（Adobe Potoshop、Fireworks之类）。对CSS方面番茄做过很不错的教程（需要注册）。
2.2 涉及的工具
首先你要有太电脑，并且显示器的色彩不是很差（我的本本的液晶显示器让我哭笑不得呀……）。制图软件Adobe Potoshop、Fireworks之类。CSS编写工具，你当然用记事本也可以写。色彩调配软件，屏幕截图软件。这些基本在本站都有下载，为了防止站点流量过大被K，我只能加了下载级别，并随机变换下载地址。请注册后下载，谢谢你的合作！
Macromedia Studio 8.0 官方简体中文正式版
电驴下载地址:http://lib.verycd.com/2005/10/14/0000069569.html
比较认同的网页制作类软件，这里我们主要是用套装里面的 Fireworks（教程里面用的就是他）。当然你也可以用Adobe Potoshop。
CSS编写工具EditPlus V2.1.2 Build 147 汉化版
下载地址：下载文件 点击下载文件
当然有人说用Dreamweaver不是更好？这里不建议用，手写更容易记住代码的含义，再说CSS可视化编写不是很理想。本来TopStyle3是可视化编写CSS的最佳工具，但介于Pjblog的CSS是分几个文件的用他效果也不怎么明显。
Color Schemer Studio1.5配色工具
下载地址：下载文件 点击下载文件
配色是你构思Skin的第一步。这款工具对颜色的搭配比较专业。
苏昱式样表中文手册2.0（一下简称《手册》）
下载地址：下载文件 点击下载文件
调试软件Firefox
下载地址：下载文件 点击下载文件

现在有94％的人在用IE，但Firefox的用户也在不断的增长。Firefox的好我在这里就不说了。但CSS在这两个浏览器之间肯定有兼容的问题。
截图工具HyperSnap5
下载地址：下载文件 点击下载文件
这个也是我用后认为功能比较强大的截屏软件。
如果你打瞌睡了[79]那就休息一下……
二、 构思你的Skin
2.1配色
你的Blog给人的第一印象就是视觉上的，所以说色很重要。

这里我们用的是白、灰、红。一般灰色是通用的，就像血型里的O型血一样。
2.2布局

页面的布局先不说太复杂的，你理解了结构后可以发挥自己的想象力。在这里要说的是CSS（Cascading Style Sheets层叠样式表单）这里的重点就是层叠。如果说Skin设计是平面设计，那我认为就错了。从欣赏的角度看这是个平面作品，但从设计的角度看那就是三维的。要不怎么有z-index这样的属性呢。再者我们可以这样做个比较，CSS是说的层类似于PS或FW里面的图层，不一样的地方仅仅在于：层交换顺序－－PS可以而DIV＋CSS不可以；Alpha通道－－PS可以而CSS不可以（一些浏览器可以）。图片的如上图所示，我们可以看到Pjblog的结构和DIV的前后顺序，前面的覆盖后面的（当然也可以是透明的）。我们先不玩花哨的，Blog的布局一般都就这样。
这里的header就是头部，里面包含Blog名、副标题、横向菜单；
Tbody是中部内容，里面包含着主内容（mainContent也就是我们写的日志，就像这个教程在的位置）、侧栏（sidebar）；
foot是底部，里面包含我们的一些版权信息、备案什么的；
我们说了这么多都是说的Pjblog的结构，也就是说是Box和Box之间的关系。而Box是怎么组成的呢？这里已经有高人Douglas做个个Flash模型，里面很明白的说明了margin，background-color，background-image，padding ，border 以及他们之间的关系。
当然这些是Pjblog的主体部分，每个部分里面还包含一些其他DIV，而这些细节（像横向菜单、侧栏内容面板、主内容模块等等）也是美化我们Blog的要点，但这个我们慢慢来。先看主体这样先可以在你的脑海里有个Skin的大概样子，为我们下面的制图做好充分的准备。
下面自己做了个Pjblog的结构模型。
三、制图
3.1了解背景
为什么要特设一节说背景呢？因为在CSS里所用的图片都是以背景的形式存在的。在我们制图、切图的过程中始终不能忘记这点，要做到尽可能的减少图片的体积（现在好多简洁的Skin都实现了不用图片或少用图片），为的是减少下载量，提高页面浏览的速度。
那我们来看看background :
他的属性包括了
background-color 颜色
background-image 图像
background-repeat 重复方式
background-attachment 是否滚动
background-position 位置
而我们制图的时候要注意的是那些呢？首先我们看color和image的关系，始终是color显示在下面image在上面。这个的作用就是某些大块单色的地方我们就不需要用image而是采用color；再个就是repeat，他可以让图片以X或Y重复或不重复的方式显示。这个的作用就是某背景有这样的重复的我们切图的时候宽（长）只要切1px就可以了；我们要结合Pjblog的结构对这些特性综合运用，要培养自己的3D思维。
3.2主体的制作
我们以我现在用的这款Skin做例子，来简述制图过程。
我们先来看看我们想做的是怎样的一个主体（这个在你自己的脑海里应该已经成型，或有个模糊的构思）。

白色的主调两边带点阴影，侧边是灰色（#EEEEEE）230px宽。
打开Fireworks，新建一个1000px×768px的白色背景的文件（因为这款Skin的主体背景是白色的）。确定我们的主体内容为800px宽，绘制一个宽度为800px，高度大于画布的矩形，再给加上1px宽的灰色（#999999）的边框。用滤镜发光给加点阴影，滤镜的参数设置成宽度为5，柔化为10，透明度为15，颜色为黑色，偏移为0。
再给加个侧栏绘制一个宽为230px，高度大于画布的矩形，放置到左边，注意不要压住1px的边框。这样我们的主体部分就绘制好了。制作主体部分我们要注意些什么呢。主要我们要考虑到页面的高度问题，因为页面的高度会随内容的不同而变化，那我们就要做一个有弹性的高度。我们可以利用Background-repeat设置值为y。那我们的背景就是纵向重复了。
3.2头部的制作
同样我们先看一下我们要做个什么样的Top。

我们看到的是两条带质感的半透明的横条压在主体上，
我们画两个矩形，宽度大于画布（因为我们要这两条自适应宽度）。通过调节渐变给矩形加点质感，调整透明度为80。

这样我们的Top就做好了。
3.3底部的制作
底部的制作一般比较简单，这里为了对应Top也加了个横条，这里就不做自适应宽度了（当然也是可以做的，我们从简单的做起）。下面是段灰色的矩形，上面压个横条。

到这里我们的图基本已经画了个大概了。你看了可能就一会儿，但有的时候我们从构思到成型可能需要几天。为了配合看效果最好加点内容里面。配合链接颜色看看，反复修改而达到最佳效果。
3.4切片
所谓切片，顾名思义就是把做好的图切成你需要的一块块。有很多朋友都是在这里卡住了，不知道怎么切好。这里要说的是在可以表现出你的效果的前提下，图切的越小越好、越少越好。那需要切那些呢？怎么切？其实是根据你CSS的需要来切的。你可以先跳过这个不看，在学习了CSS后你想在某个Box里设置背景的时候，你就会想到图，那你就到做好的图里面切一块去用吧。慢慢的你就明白怎么切图了。下图就是头部背景图的切片，我们还可以看到切图用的是什么工具（我认为Fireworks切图功能好点）。在Fireworks里面切片是放在网页层里面的，我们可以给切片命名，想要这个切片的时候我们就可以导出图片。这里还要说的是导出图片的格式，就是优化栏的属性。个人比较喜欢PNG32格式，他支持Alpha通道（未来的趋势）。要是不透明图片选JPG也很好（他体积小）。

整体的PNG分层文件提供给大家研究。下载文件 点击下载此文件
我们打开这个文件可以看到。如头部、主体背景、底部他们的宽度不是我们刚开始的时候说的800px，那是因为我们在外面加了阴影。一定要把这个尺寸算进去（一般要求算，而不是看阴影和背景色差不大的时候容易搞错，要做到仔细）。而全局背景并不需要拉的很高，因为下面的白色我们完全可以用CSS做，大了就浪费了。还有就是按钮背景图，如果你是有鼠标接触式样的建议你不要分两张图，我们做在一张图上，通过CSS控制图片的位置来实现不同的背景，这个等说到CSS的时候再详细说。
四、编写代码
4.1全局式样
终于进入了核心部分，我们将用CSS＋DIV美化我们的Blog。有好多朋友总是问这样一个问题，我怎样做Skin。我这里想说的是你先要了解CSS和DIV的关系。DIV就像房子的骨架（砖墙等等），而CSS就是室内外装潢，你不了解骨架是怎么构成的你怎么去装潢呢？还有要说的重要的一点是CSS的特点之一，后面定义的取代前面定义的。比如说我在全局式样里定义了字体颜色是红的，而在后面主体里面定义了颜色是蓝的，那我们看到的就是蓝的。
我们进入正题，先说全局式样（在Pjblog里面是Skin文件夹下面的global.css文件）。这里我们可以对整个页面的特定标签定义外观。特定标签比如body、img、select、th等等这些是内置标签。这里的式样对<body></body>里面的内容和DIV有效。看代码（<style type="text/css"></style>里面为CSS代码，</head>看作是DIV布局，以后都是用这种可运行代码表示，不在重复）

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

通过预览我们可以看到一个背景式样了，那其他的说怎么没提现呢。那是没有内容在里面，你可以试着在<body></body>之间添加代码或文字看看。你也可以改变式样里的属性看看起了些什么变化（如果你不知道属性是什么，建议你看看上面的《苏昱式样表中文手册2.0》）。你可以把background-color:的属性改成#000看看，背景是不是成黑色的了。是不是感觉有点成就感呢（我当时就感觉到了 !）。千万不要拘束于这几个标签，你可以试着用更多标签和属性的组合来改变外观。这样你才有可能做出有个性的Skin。
4.2主体式样
我们把全局式样看作是<body>的话，那就把主体式样看作是#container。说到这里我们可能有点明白了CSS的编写其实是一个细化的过程。为什么这么说呢？你看#container其实是包含在<body>里的，而我们以后说的有都是包含在#container里的。
通过上面的模型可以看出，#container里包含了#header、#Tbody、#foot通过这几个的定义我们就可以实现上面所画的图了。我们在上面的代码上继续添加，看代码

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

首先我们在<body>里添加了需要的<div>
<div id="">主体
       <div id="header">顶部
       </div>

       <div id="tbody">内容
       </div>

       <div id="foot">底部
       </div>

</div>
我们先从#container加起（为什么要加个#号，不明白的去看手册）。
#container{width:816px;宽度，应该和你切片的时候有所对应
             text-align:center;内容居中
             margin:0 auto;边框为零。这里要注意的是，要#container居中我们必须设置margin为auto而且父元素（body）为text- align:center;
                    background:url(skins/dnxh10/cont_bg.jpg) repeat-y;背景路径并以Y方向重复。
                    height:600px;
}
现在预览一下看看，好像主体出来了。但顶部不是我们想象的那样呀！在#container上不是有三个元素吗，那我们再来定义一下#header和#foot就可以了。#tbody我们可以留空有更大的活动性。
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

看到了，哈哈。整个结构是不是好像成型了。这里我们定义了#header。
#header {
                 width:816px;宽度，这里也就是图片的宽度
                 height:110px;高度，这里也就是图片的高度
                 text-align:left;内容左对齐，因为我们以后里面的Blog名字是要靠左的。
                 background:url(skins/dnxh10/top.jpg) no-repeat;背景路径，不重复
}
底部的定义也一样。就不在罗嗦了。
PS:这里的<div id="tbody" style="height:500px">因为里面没内容，而设置的高度做演示用的。
4.3顶部式样
顶部的美化很重要，因为用户打开你的Blog的时候首先进入眼帘的就是顶部。做顶部式样的时候你要知道顶部式样是在什么地方，他的结构是怎样的。顶部式样就是Header和他里面的内容，结构我们可以通过上面的Flash模型来了解。我们还是看代码：
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

不知道为什么这段不能加式样，可能是和页面的代码一样的缘故吧。那我们就不加，我们先来分析一下结构，看每个元素的作用是什么。我们先设置一下#header的式样，上面我们已经说过了。
  #container #header{width:816px;height:110px;background: url(top.jpg) no-repeat;text-align:left;}
#blogname就是我们的Blog的名字，他包含了#blogtitle子元素。我们设置的时候先设置#blogname再设置#blogtitle。
  #container #header #blogname{font-size:22px;color:#999;font-weight:bold;float:left;padding:15px 0 0 25px;}
   #container #header #blogname #blogTitle{display:none}
在这里我们设置了#blogname的字体大小、颜色、粗体、和浮动左、补白的距离。而blogtitle设置了不显示。
再往下看，看到了#left和#right两个元素，看命名的意思我们就知道了。那是#header两头的式样，我们可以靠float:left和float:right来实现，在这个式样里我们不需要设置。这个主要可以实现圆角之类的#header。
#menu是菜单项，一般我们看这里的时候比较糊涂，再加上含有float属性，运用起来比较难以驾驱。我们来分析一下：
#menu是个整体式样。里面包含了一个<ul><li></li></ul>的结构。关于项目列表,而li里面又有绑定了式样，分别是menuL、menuA、menuDIV、menuR分别的作用就是menuL利用Float:left;控制菜单左端的式样，menuDIV控制菜单项目之间的式样也就是分隔符，而menuR就是利用float:right;控制菜单右端的式样。
  #container #header #menu{float:right;margin:35px 15px 0 0}
  #container #header #menu ul{}
  #container #header #menu ul li{float:left;height:20px;list-style:none;}  
   .menuL{}
   .menuR{}  
   .menuDiv{width:1px;height:20px;background:#999;margin-right:15px;margin-left:15px;}
li里面的float:left;是实现横向菜单的必要条件，list-style:none;是消除列表前的小圆点的。
仅仅就这些式样顶部还是不完美的。我们要设置菜单的链接式样。也就是我们刚才少一个没说的menuA的式样。
.menuA:link,.menuA:visited{text-align:center;text-decoration:none;color:#cc3300;line-height:19px;height:15px;}  
.menuA:hover{text-decoration:none;}
:visited是访问后的式样，:link是通常的式样，:hover是鼠标接触的式样，其实还有个:active（在鼠标点击与释放之间发生的事件时的样式）这里有个书写的顺序“LoVe/HAte”（爱/恨）链接规则：Link, Visited, Hover, Acitve。具体参数可以参照手册。
4.4内容式样
内容式样里包含的元素比较多，变换也比较多，我们看看到底要做的是那些式样。首先是内容#Tbody，这个里面在首页的时候包含的是主内容#mainContent和工具条也就是侧栏#sidebar。而在登陆页的时候里面就是登陆框，注册页，还有信息提示出错，恭喜通过什么这些就是消息框式样#MsgContent。如果你看过以前的式样文件里的Layout.css的你可能会发现一个问题，我上面说的这些标签都是带#号的也就是ID选择符，而上面没有提及是.开头的是类选择符，也就是class="*"。为什么会有这样的命名方式，我们知道Pjblog是一个模块化的程序。我们可以自己自定义侧栏模块和内容模块，也就是说侧栏工具条里的若干个工具箱里的ID（模块标识）是可以自己定义名字的，内容里的模块也是如此。这就为我们的模板创造了更多式样的可能。你可以这样理解，首先我们用了统一的类class，再个我们又给每个工具箱定义了唯一的一个ID，那我们通过这两组合就可以定义每个工具箱的式样了。形式如下：

我们从侧栏开始，侧栏的结构很清晰。一个#sidebar主元素，里面包含了#sidebar-topimg、#innersidebar、#sidebar-bottomimg三个子元素，很明显#sidebar-topimg、#sidebar-bottomimg是侧栏的顶部和底部的式样，而#innersidebar里面是放工具箱.sidepanel的。工具箱.sidepanel又作为一个主元素，里面包含了.Ptitle标题、.Pcontent内容面板、.Pfoot底部。看代码：
程序代码 程序代码

<div id="sidebar">
     <div id="sidebar-topimg"></div>
     <div id="innersidebar">
           <div id="Side_AA" class="sidepanel">
           <h4 class="Ptitle"></h4>
           <div class="pcontent"></div>
           <div class="pfoot"></div>
           </div>

           <div id="Side_BB" class="sidepanel">
           <h4 class="Ptitle"></h4>
           <div class="pcontent"></div>
           <div class="pfoot"></div>
           </div>

           <div id="Side_CC" class="sidepanel">
           <h4 class="Ptitle"></h4>
           <div class="pcontent"></div>
           <div class="pfoot"></div>
           </div>
     </div>
     <div id="sidebar-bottomimg"></div>
</div>

代码里的AA、BB、CC就是我们自定义的模块标识。这个在后台模块设置里可以自己定义。

那我们把上面的代码定义一下式样看看效果，想要的效果就是每个功能块(AA、BB、CC)的头部(ptitle)有一个自己的式样（分别是：红、黄、蓝）。
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

.ptitle{height:10px}定义一下ptitle共有的式样属性；
#Side_aa .ptitle{background:red}下面就分别定义不同的颜色。
#Side_bb .ptitle{background:yellow}
#Side_cc .ptitle{background:blue}
这里要注意的是PJ侧栏模块的ID命名规则：在模块标识前加Side_。比如这里的aa，那就是#Side_aa。而程序默认得模块标识是不可以更改的。
看到效果后你是不是已经感觉到了Pjblog的模块功能的神奇了，我们还可以给个个模块给于绝对定位来实现各式各样的布局。比如Eternal Love的日历式样、Yahoo Weight的Skins切换模块式样。我们这里同样说的是Pj的构造和怎么运用这些构造，具体的CSS属性还是去参考手册。
这里我们着重要了解的是模块标识、选择符之间的关系。关于选择符手册里有更详细的说明。

然后我们看主内容的式样。主内容的式样比侧栏要复杂一点，首先主内容的标签是#innermainContent，这也是一个三栏（或说成是多栏，因为可以添加自定义模块）的布局。包括了头部#mainContent-topimg、中栏#Content_Contentlist和底部#mainContent-bottomimg。我们可以分别定义他们的式样，头部和底部已经是最基层的DIV了，不含有子元素了，你可以尽情的定义他们的式样，不用考虑他里面还有什么式样，这句话的含义就是定义完后就是最终式样了。而#Content_Contentlist是程序的默认模块，是不可以删除的，在后台设置模块的最下面一个。如果你增加了内容模块，那增加的那些内容模块就像上面侧栏说到的一样，可以自由定义。这里也要注意的是：PJ内容模块的ID命名规则：比如内容模块标识是Contentlist那这个模块的ID就是#Content_Contentlist，要在内容模块标识前加Content_，这个很重要
自定义模块因为具有不确定性，我在这里就不具体的说了，着重说说Contentlist这个默认模块。这里面的内容和侧栏一样不再是用ID选择符了，用的是类选择符。首先#Content_Contentlist包含了两栏，.pageContent和.Content，.pageContent是分页式样，这也是最终定义的式样。具体的是那部分呢，我们看下图：

凡是这些地方都属于.pageContent这个类的。这就是类选择符的优点。你可能觉得怎么说了半天的结构不说CSS呢，别急，了解结构很重要。忍着点往下看。
分页式样了解后我们再看.Content的式样。.Content里面的内容比较丰富。首先他是一个三栏的布局，头部.Content-top、内容.content-body、底部.content-bottom。而头部和底部又分别挂了左右两DIV。头部的是.Contentleft和.contentright，底部的是.ContentBleft和.contentBright。我们从字面上就可以了解到这些分别是在那个位置了。如果你还不了解请去看模型。
在.Content-top里面还包含着一些日志其他信息，就是日志的标题、作者、日期。那这些分别是在哪里呢？标题是属于.ContentTitle一类，作者和日期包是属于.ContentAuthor一类。他们分别包含在<h1></h1>和<h2></h2>里面。
上面说道这些是在首页情况下的式样，在单篇日志的模式下有一点不一样。在<h2></h2>下面多了个.Content-Info类，再里面又包含了InfoAuthor和InfoOther两个类。这里包含的信息如下图：

再下面就是正文了.Content-body了。在单篇日志里因为【文章来自】【引用通告地址】【Tags】等内容也赋予了.Content-body这个类，为了和【文章来自】【引用通告地址】【Tags】区别还给这个ID加了#logPanel标签，在首页里是没有的。其实在首页里加个也可以，我在做Yahoo Weight这个式样的时候，内容首字母式样就在首页加了个#logPanel标签，可以单独控制日志内容和首页摘要的式样。
内容里除了这些式样外还有评论框式样.comment和信息框式样#MsgContent、UBB框.comment。
评论框式样.comment一般是在单篇日志内容里，他是一个两栏的布局。里面包含了.commenttop和.commentcontent两个类。

你往下拉了看看是不是这样的。
信息框式样#MsgContent。就是评论信息的下面，你发表评论的地方（当然还有登陆框、信息提示宽、注册等等要用到）。这个也不复杂，就一个头部#MsgHead和#MsgBody，意思也很明了。而内容里面的UBB编辑器式样是另外一个文件控制，这就放到后面说。
到这里内容式样基本结束，下面我们主要看这节的部分代码。
内容块的结构会出现几种情况，首页状态、单篇日志、内容插件等模式。着重说前两种情况。
首页状态代码
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

从上面的代码可以看到，我并不没有用多少式样，我只用了背景色和前景色来区别各个元素。看上去可能不是很漂亮，重要的是自己改。有些时候一个元素里没有内容，我们就不容易了解这个元素的存在。我一些模块里没有文字等内容的元素添加了文字说明。你可以试着把CSS代码删掉或改动，来进一步了解没个元素的作用。这里还有个小技巧，在首页普通模式下Pjblog给每个日志摘要都给于了一个ID，单独定义或批量定义式样，命名规则是"log_"+"日志ID号"。我们从上面的代码可以看到日志173和174的不同的地方。那日志的ID怎么知道？我们把鼠标挪到日志的链接那里，看到链接的最后有?id=***这样的，就是日志的ID了。
单篇日志状态
单篇日志状态和首页有很大的不同。里面包括的内容有自定义模块、分类和上下篇（.pageContent）、标题作者日期（.ContentTitle.ContentAuthor）、自定义字体大小和日志等级天气情况（.Content-Info）、内容、评论分页（pageContent）、评论（comment）、发表评论框（MsgContent）等等。
看代码
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

发表评论框（MsgContent）准备放到以后的章节里详细说明。内容通用部分大体就说完了，重要的是自己把上面的代码通过改动，细化来认识Pjblog的结构和CSS各个属性的具体含义和产生的效果。
4.5底部式样
底部式样内容其实不是很多，可以说是非常的少。但这里为什么也要开一节说呢，这里要涉及一些教程的题外话。大家也不得不看一下，要不做的再好的Skin也会被人BS的。
我们知道Blog的底部包含着一些重要的信息。第一行开头就是很重要的版权信息，说明了Pjblog的版权并含有官方的网址链接，后面是自己站点的名字，站点是有什么构架的（就是xhtml | css）。第二行是页面执行的时间和查询数据库的次数，再后面就是我们Skin的一些信息了包含了Skin名字作者的站点和Email地址。第三行是站点的备案。
这里要着重说说版权。Skin的一些信息就标明了这个Skin是你做的（具体怎么弄，等后面的章节里会说到的），使用者可以通过这些信息和你联系反应一些问题，当然也是宣传你的好方法，也是鼓励大家做Skin的好处。对于Pjblog的版权信息我们要绝对的保护。我们也讨论过这个问题，说Windows这么多盗版的但这些也保留了MS的版权，都知道Windows是微软的产品。盗版可能是某些人穷，这我可以理解。但对于Pjblog这样一个优秀的开源程序，要你一分钱了吗？你有必要把他的版权去掉吗？这样就会失去了基本的道德。所以我们无论是在做Skin还是在使用Pjblog都应该尊重作者。似乎叉的远了点。
言归正传，来简单的看一下底部式样。很简单，看代码：
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

很清楚，一个Foot标签的DIV和两个<p>。通过前面的学习我想大家应该了解怎么做了。其实一般这个不需要我们设置，基本的字体大小什么的都默认已经定义了。但我们可以要在底部加一些图片之类的，利用padding、margin等属性控制文字的位置，文本的左对齐、右对齐等等。这里要了解的一点是对<p>的控制，程序里面用了两<p>字段，可能在设置边框或补白的时候出现分行的问题。
五、细节表现
5.1 Pjblog默认模块
我们知道Pjblog的很多功能是有模块构成的，而程序默认的模块我们在做Skin的时候为了通用性也必须要注意定义的。
5.1.1 日历式样
同样我们要来了解它的结构。
日历它是一个侧栏模块。我们前面说了模块是包含在侧栏的sidepanel面板里的，然后给各自的模块一个唯一的ID。在这里日历的ID就是Side_Calenbar。那我们就可以对这class为sidepanel、ID为Side_Calendar的DIV进行定义了。对于class、ID 是怎样定义式样的我们前面也说了在这里再复习一下。前者是类选择符，表现形式为：.类属性。后者是ID选择符，表现形式为：#ID名称。以后就不再重复了。一般为了Skin的统一协调是对sidepanel进行统一定义的，只有特殊式样的时候才定义这个ID为Side_Calendar的DIV。当然这个DIV里面和其他侧栏面板一样同样有一个Class为Ptitle的H4标签、一个Class为Pcontent的内容DIV和一个Class为Pfoot的底部DIV。
日历的主要内容是在Pcontent里的一个ID为Calendar_Body的DIV。这里面一共保护了7行。一个ID为Calendar_Top的DIV里面显示的就是XXXX年XX月和两个方向按钮，一个ID为Calendar_week的DIV里面显示的是星期， 还有5个都是ID为Calendar_Day的DIV这里就是具体的日期了。

我们再来看看进一步的结构，充分的了解结构才能做好Skin。
Calendar_Top:除了内容外还有ID为LeftB和RightB两个DIV，分别控制两个方向按钮。我们可以自定义按钮的图片
Calendar_week:里面是一个<ul><li></ul></li>的结构其中第一个也就是星期天“日”外面套了一个<font>程序默认定义了红色。我们通过导航的了解知道了这个结构要使它横向排列必须用Float，要不见点必须用liststyle:none;
Calendar_Day:这里面的结构和Calendar_week是一样的，不同的是li里面都包含超链接<a>,对不同情况的日期做了不同的Class。日期选中（.click）、今天（.today）、非本月日期（.otherday）、本日存在日志（.haveD）、今天存在日志（.DayD）
那我们来看代码，日历的式样表在模板的typography.css里面。因为CSS有继承的特性，因此我们最好按照默认式样的顺序书写代码。
文本查看复制到剪贴板打印©
  1. /*日历式样－－－对整个框架进行定义，这里定义的内容是会继承的下面的。也就是说如果下面的不另外声明就表现这里定义的内容*/  
  2.   #Calendar_Body{margin:5px 10px 5px 0px;font-family:arial;line-height:120%}   
  3. /*顶部－－－对顶部定义式样，这里定义了一下文本居中*/  
  4.   #Calendar_Body #Calendar_Top{padding:0px 2px 0px 2px;height:18px;text-align:center;font-weight:bold;}   
  5. /*按钮左－－－按钮图片（我这里用了颜色背景代替）*/  
  6.   #Calendar_Body #Calendar_Top #LeftB{background:#333;width:9px;height:16px;float:left;cursor:pointer;overflow:hidden;}   
  7. /*按钮右－－－和上面的一样都要注意float*/  
  8.   #Calendar_Body #Calendar_Top #RightB{background:#333;width:9px;height:16px;float:rightright;cursor:pointer;overflow:hidden;}   
  9.  /*星期－－－这里要注意的是浮动（float）和宽度（width），宽带是用的%，这样做是为了适应个个Skin*/  
  10.   #Calendar_Body #Calendar_week{text-align:center;height:20px;padding:0px 0px 0px 2%;font-weight:bold;}   
  11.   ul.Week_UL{display:inline;list-style:none;margin:0px;padding:0px;}   
  12.   ul.Week_UL li{display:inline;margin:3px 0px 2px 0px;padding:0px;float:left;color:#003;width:14%;}   
  13. /*日期－－－日期的整体使用这里定义了li使之横向排列同时注意宽带也是和上面一样用的%*/  
  14.   .Calendar_Day {text-align:center;height:20px;padding:0px 0px 0px 2%;color:#9c1c1c}   
  15.   .Calendar_Day ul.Day_UL{display:inline;list-style:none;}   
  16.   .Calendar_Day ul.Day_UL li{display:inline;float:left;width:14%;}   
  17.   
  18.  /*日期超链接－－－可以定义鼠标式样等等，包括下面的个个项完全可以自由发挥，不过要注意的是宽带、高度不需要再定义了。*/  
  19.   .DayA a{cursor:default;padding:2px 0px 3px 0px;display:block;font-size:11px;height:13px;color:#9c1c1c}   
  20.   .DayA a:link,.DayA a:visited{color:#06c;}   
  21.   .DayA a:hover{color:#f0821d;background:#FFBFBF}   
  22.  /*选中日期*/  
  23.   .DayA a.click{cursor:default;background:#9c1c1c;font-weight:bold;}   
  24.   .DayA a.click:link,.DayA a.click:visited{cursor:pointer;font-weight:bold;text-decoration:none;color:#fff}   
  25.   .DayA a.click:hover{text-decoration:none;color:#336633;}   
  26.  /*今天*/  
  27.    .DayA a.today{cursor:default;color:#9c1c1c;border:1px solid #9c1c1c;background:#fff;}   
  28.       
  29. /*非本月日期*/  
  30.    .DayA a.otherday{cursor:default;color:#fff;text-decoration:none;/*visibility:hidden*/}   
  31.    .DayA a.otherday:link,.DayA a.otherday:visited{cursor:default;color:#eee;font-weight:bold;}   
  32.    .DayA a.otherday:hover{cursor:default;color:#9c1c1c;font-weight:bold;}   
  33.   
  34.  /*本日存在日志*/  
  35.    .DayA a.haveD{cursor:pointer;}   
  36.    .DayA a.haveD:link,.DayA a.haveD:visited{color:#9c1c1c;font-weight:bold;}   
  37.    .DayA a.haveD:hover{color:#9c1c1c;}   
  38.  /*今天存在日志*/  
  39.    .DayA a.DayD{cursor:pointer;}   
  40.    .DayA a.DayD:link,.DayA a.DayD:visited{border:1px solid #9c1c1c;background:#fff;font-weight:bold;text-decoration:none;color:#9c1c1c}   
  41.    .DayA a.DayD:hover{color:#9c1c1c;text-decoration:underline;border:1px solid #9c1c1c;background:#fff;font-weight:bold;}  

5.2 按钮、信息框和输入框
    都被指着鼻子说了，实在是不好意思再偷懒了。由于前段时间工作的变动，以及自己的懒惰 这文章一直没续，今天开始继续来完成他。顺便自己也对CSS也温习一下。
   以后说的内容可能影响的地方不大，都是对一些细节方面的表现。前一节我们说了默认模块日历的编排，这最重要的就是要学习和了解CSS的继承性，其他默认模块里面其实就是一些超链接，其他没什么特别的。
    首先我们要了解这一节里面我们要对哪些地方的式样进行定义。内容有文本输入框（用户名）、密码输入框（密码）、按钮、置顶日志按钮、日志分类图标、信息框（确认、报错等等）。而这些部位有些内容是在特定的时候出现的往往一些朋友刚开始做Skin的时候不注意这些地方，使得模版不够完美。这些内容Pjblog一般都是用类选择符来定义的，什么是类选择符我们在第四章第一节里面做了简短的说明。
    在CSS里面你只要选择了一个元素那你可以把这个元素看成或认为这个元素就是一个BOX。在第二章第二节里面有BOX的Flash模型，你可以尽情的对他们定义发挥你的创意。其中输入框（.inputBox）、密码输入框（.userpass）、按钮（.userbutton）、分类图标（.CateIcon）。这些我们可以定义他们的背景（background）、边框等等。重要的是他们还具有伪类（什么是伪类，在上面提供下载的CSS2.0手册里面有详细的说明），这样我们就可以做出鼠标在和不在的时候的式样。对于分类图标你还可以利用BOX的display属性定义他是否需要显示。还有就是置顶按钮，我们知道置顶按钮有两种状态，一个就是打开的时候的状态（.BttnC），还有一个就是关闭的状态（.BttnE），这样我们就可以给两个不同的图片作为按钮了。在当前我的这个Skin上面做了以下定义：
文本查看复制到剪贴板打印©
  1. .userpass{border:1px solid #cc3300;font-size:12px;font-family: Verdana, Arial, Helvetica, sans-serif;background:#fff;}   
  2.  .userpass:hover,.userpass:focus{border-color:#cc3300;background:#fff;}   
  3.  .inputBox{border:1px solid #cc3300;;font-size:12px;}   
  4.  .inputBox:hover,.inputBox:focus{border-color:#cc3300;}   
  5.  .userbutton{height:21px;background:url(button_bg.jpg) repeat-x;border:none;padding:3px;border-right:2px solid #d6d6d6;border-bottom:2px solid #d6d6d6;}   
  6.  .CateIcon{display:none}  

    对于信息框我们来看一下他的结构。

首先我们这个信息框（MsgContent）是包含在Tbody）里面的，这个也要了解的，因为Tbody里的定义一般会继承到他的子元素里面。我们了解了结构就好办了分别对这3个BOX定义就是了。
文本查看复制到剪贴板打印©
  1.   /*---信息框--*/  
  2.   #MsgContent{text-align:center;margin:auto;border:1px #999 solid;width:450px;}   
  3.   #MsgContent #MsgHead{padding:4px;color:#999;font-weight:bold;}   
  4.   #MsgContent #MsgBody{padding:4px;line-height:180%;color:#333;}  

而在MsgBody里面可能有一些不同的情况发生，比如包含一个注册的表单和就只有一些文字。而需要定义的就是提示（.MessageIcon）、出错（.ErrorIcon）、警告（.WarningIcon）和询问（.QuestionIcon）的图标和文字。
文本查看复制到剪贴板打印©
  1. /*信息框图标以及文字*/  
  2.    .MessageText{height:76px;margin-right:18px;margin-top:2px}   
  3.    .MessageIcon{background:url(2.gif) no-repeat;width:60px;height:60px;float:left;margin-left:10px;}   
  4.    .ErrorIcon{background:url(5.gif) no-repeat;width:60px;height:60px;float:left;margin-left:10px;}   
  5.    .WarningIcon{background:url(5.gif) no-repeat;width:60px;height:60px;float:left;margin-left:10px;}      
  6.    .QuestionIcon{background:url(5.gif) no-repeat;width:60px;height:60px;float:left;margin-left:10px;}  

这里再提一个额外的式样，一般Pjblog默认情况下是不开启这个功能的。那就是提示框。

这个只有在header.asp文件里面启用一个JS文件的时候才有效，但是你做的Skin无论是愿意提供给别人还是自己用建议都应该定义一下。
文本查看复制到剪贴板打印©
  1. /*提示框CSS*/  
  2.    div.nicetitle {   
  3.     position: absolute;   
  4.     padding: 4px !important;   
  5.     padding: 6px 4px 4px 4px;   
  6.     top: 0;   
  7.     left: 0;   
  8.     font-family: Verdana, Helvetica, Arial, sans-serif;   
  9.     font-size: 12px;   
  10.     width: 15em;   
  11.     background: #FFFBD1 url(nicetitlebg.jpg);   
  12.     color: #3D2C05;   
  13.     border: 1px solid #715208;   
  14.     text-align: left;   
  15. }   
  16.    div.nicetitle p {   
  17.     margin: 0; padding: 0 3px;   
  18. }   
  19.    div.nicetitle p.destination {   
  20.     font-size: 9px;   
  21.     text-align: left;   
  22.     padding:3px 0px 0px 3px;   
  23.     color: #715208;   
  24. }  

5.3 UBB编辑器以及内容
    这应该是全部模块讲述里面的最后一个部分了。有的时候我们使用UBB编辑器写的内容里包含一些代码块，说代码块可能不是很好理解。举例子就像插入Flash、视频、代码、可运行代码等等。这些我们可以在定义完内容面板式样后定义这些内容。这些内容就是包含在一个大的元素（.UBBPanel）里面的，同样是类选择符。

从上图中可以看出这个结构很容易理解，同样我们只要分别把里面的每个元素看成是一个BOX，然后对他们进行定义。而其中的.UBBContent TEXTAREA为文本框多数在可运行代码里可以看到，里面的字体不要设置的过小哦，看代码太小很累的。
说完内容部分接下来就说说UBB编辑器的式样。UBB式样是包含在模版主目录里的UBB文件夹里面，里面分别有一个editor.css的式样文件、bar.gif的栏目分割图片、和一个Icons的图标文件夹。我们可以替换这些图片但不能改文件名（有的时候为了和模版协调，需要更换UBB图标）。这里重点看editor.css这个式样文件。我们先开看看UBB编辑器的结构

我们从图中的结构可以看出，.editorContent部分的内容相对比较简单就是一个大的里面包含了一个文本框。主要是在#editorHead里的内容首先是包含了一个纵向排列的.editorTools我们可以看做是一个个工具栏。在工具栏里面又包含了一个个.Toolsbar工具条。工具条里是一个有Ul、Li构成的列表列表里是一个个的.Toolsbutton按钮，当然有的时候也有选择框.ToolsUL Li select。在一般情况下默认式样文件里的UBB式样可以通用不需要自己写，当然如果你的模版要求UBB编辑器协调的话可以在默认的基础上修改比如边框色、背景色之类的。当然如果你要在鼠标移到图标的时候当前图标稍微变大点，那你就可以.Toolsbutton:hover的式样，在里面定义一下尺寸。每个按钮除了有一个统一的Toolsbutton类之外他们各自还有一个唯一的ID，比如粗体就是A_bold。
    说到这里似乎要完了，但还有很重要的一个元素，那就是.UBBSmiliesPanel。这个是就是表情面板，就是点击插入表情的那个按钮时跳出给你选择表情的面板。因为这个元素默认是隐藏的，一般不会很注意他。这个面板除了自身的一个元素.UBBSmiliesPanel外，里面包含的就是一个表格，表格里面是一个个图像链接每个链接都有一个名为Smilie的类。我们定义的时候就定义.Smilie{}。这里要注意的是.UBBSmiliesPanel这个面板的定义，因为一些有些朋友用visibility:hidden来定义这个面板的隐藏。这里要注意，隐藏一个元素有两种方法visibility:hidden和display:none，这两个不同的是display:none不为被隐藏的对象保留其物理空间。也就是说display:none这个隐藏了就不占地方了，如果有的时候你做了一个800px的模版，但是有时遇到有横向滚动条的情况，但找不到那里出了问题，那你就试试这里有问题没有。
六、兼容调试
    兼容问题一直是设计制作模版最头疼的问题。这里我们就目前主要流行的浏览器Firefox和IE6/7做为主要浏览器。在我们编写CSS过程中我们要经常的预览观看书写的效果，这个预览的过程最好使用一种浏览器或Firefox或IE，这里推荐使用Firefox。这里我就主要会出现的问题来进行说明。
    居中的问题。我们在要使一个DIV居中的时候，首先要对这个DIV的父元素（就使这个BOX的外面一层）设置text-align为center，然后设置目标DIV的margin为auto；
    尺寸问题。Firefox在设置padding后会加上这个BOX的高度和宽度，而IE就不加。由于Firefox和IE中的BOX模型解释不一致导致margin相差2px，就是说Firefox下设置margin:30px，那IE下就显示的尺寸为28px。margin还有个问题就是解决办法在IE7没出来前是用!important来解决的，IE出来了对!important认识了那就要另外解决了，解决方法看这里。另外在计算BOX宽度的时候一定要记得算上边框border的宽度。比如
程序代码 程序代码
<div id="1">
<div id="2"><div>
</div>

这样的结构在Pjblog里随处可见。看式样
程序代码 程序代码

#2{width:100px;height:100px;border:2px solid #fff;}

这样的式样，由于1没设置固定的高和宽，而2设定了高和宽都为100px并且边框为2px，那1就被撑开到的高度和宽度尺寸为104px=100px+2px+2px。
    浮动的问题，这个最头疼了。这个主要是在使用横向布局的时候，比如使用Ul、Li结构的菜单、工具条等等。设置浮动的DIV那这个元素的margin的数值在IE下会加倍，这是一个ie6都存在的bug。解决方案是在这个浮动的div里面加上display:inline
    由于兼容出现的问题会根据不同的情况而出现，所以在这里就讲这些比较常见的问题。同时推荐一些调试工具，都是浏览器插件。一个是在IE下的由微软自己出的Internet Explorer Developer Toolbar，就是英文版的。还有个就是Firefox的Web Developer Extension
七、打包
    如果你认真看过Pjblog的官方文档，这部分基本没什么问题了。所谓的打包，就是我们所做的模版的一些文件按Pjblog要求的文档结构布置。并且放置一个可以给Blog程序识别的skin.xml文件。文档的放置结构你随便拿个可用的模版参考一下就行了。我们重点看一下这个skin.xml文件
文本查看复制到剪贴板打印©
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <SkinSet>  
  3.  <SkinName>2007</SkinName><!-- 模版名字 -->  
  4.  <SkinDesigner>dnxh</SkinDesigner><!-- 作者名字 -->  
  5.  <pubDate>2001-01-25</pubDate><!-- 发布日期 -->  
  6.  <DesignerURL>http://www.dnxh.cn</DesignerURL><!-- 作者站点 -->  
  7.  <DesignerMail>embont@gmail.com</DesignerMail><!-- 作者邮箱 -->  
  8. </SkinSet>  
这是一个标准的XML文件。每一项我都已经注明了含意。最后强调的是模版里的所有文件，包括这个XML全部采用UTF-8的编码
未完待续……

加载全部内容
相关教程
猜你喜欢
用户评论