您现在的位置是:门户> 编程语言> HTML/CSS

Pjblog模板制作教程 超强推荐
2020-04-08 39人围观 0条评论
简介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等等这些是内置标签。这里的式样对里面的内容和DIV有效。看代码(里面为CSS代码,看作是DIV布局,以后都是用这种可运行代码表示,不在重复)
分享:

文章评论