如何制作OBLog 3.0 用户模版？

现在的BLOGER越来越多，挡都挡不住，是什么时候大家都开始写BLOG了呢？BLOG就相当于自己在网上的一个家，既然是家就要有自己的个性，每个人都希望自己的BLOG与众不同，在这里SNAKE就为大家讲一下BLOG模版的怎样做成的。以“沉静青春 youth CSS系列 12”模版为示例，在http://skin.midicn.cn/jc/mbjc/htm/youth.rar可以下载到，内有PNG（Fireworks MX 2004修改）源文件。 本教程都是在2000系统IE6.0，Mozilla Firefox 1.0下测试。不敢保证都和SNAKE看到的一样。之所以要用Mozilla Firefox测试是因为那5%的用户。不过说真的，尽管有时候我很想抛弃他们…… 一、基本必要条件 1.1 做模版需要什么能力吗？ 做OBLog的模版你需要了解HTML和CSS还有美工基础，当然这不是很难，甚至可以说很简单，不会的朋友马上学，买书一个星期就可以学会。另外就是细心、耐心，毕竟我们也是在做设计，严格要求是当然的。 1.2 准备工具 一台电脑，制作网页的工具Macromedia Dreamweaver MX 2004和做图工具Macromedia Fireworks MX 2004（PS也可以）。测试浏览器Mozilla irefox，IE6.0在XP下自带。截图工具HprSnap5，论坛里有使用方法（滚屏截图）。这几个工具可以在天空下载站下载到。 Macromedia Dreamweaver MX 2004： http://www2.skycn.com/soft/860.html Macromedia Fireworks MX 2004： http://www2.skycn.com/soft/1824.html Mozilla Firefox V1.0.6 中文增强版 http://www2.skycn.com/soft/20595.html SN: Macromedia Dreamweaver MX 2004: WPD700-52206-61494-40475 Macromedia Fireworks MX 2004： WPD700-52206-61494-40475 Macromedia Studio 8正式版序列号 flash：WPD800-53933-19632-12307 dreamweaver：WPD800-52430-29332-35254 fireworks：WPD800-59537-39432-12200 这里还要推荐一款很好用的CSS编写软件：TopStyle3。你可能用不到。下载地址： http://skin.midicn.cn/soft/TopStyle3.rar 以及《样式表中文手册css2》是CHM格式的，可直接打开。你一定要用到。下载地址： http://skin.midicn.cn/soft/css2.rar 屏幕滚动截图工具HprSnap5。做好模版后截图工具，可能用到。下载地址： http://skin.midicn.cn/soft/HyperSnap-DX.rar 二、构思 2.1 色调 首先要考虑BLOG的基本色系是什么颜色，然后是基本布局，这里我们不做太复杂的，只做最简单的考虑。这里我考虑绿色，而且只考虑绿色和灰色搭配。（传说中灰色是万能色，就好象O型血一样。） 2.2 布局 BLOG的布局很简单，不用考虑太多因素。最常见的无非是左右两列布局（我们不讲太个性的）。 三、制图 在FW下面新建一个890*1344的图。优化设置里面选择PNG32格式（推荐使用PNG格式的图片，导出后画质最好，体积校个人经验。） 3.1 背景 我们先考虑整个页面的背景色，使用#CCFF66颜色。 然后是中间部分的背景图片，我们设计一个圆角矩形，效果如下图。 3.2 HEAD的设计 再把刚才的大圆角矩形复制粘贴一遍，并且把修改高度到150，注意使用鼠标拖放修改，直接修改数字会变形。（汽车人） 从网上随便找个风景图，然后使用魔术棒随便扣，再填充成灰色，再“平面化所选”，再把尺寸对齐，多余的削掉，位图属性设置成“屏幕”。 在合适的地方画个矩形，特效是阴影。这样看起来会和背景和谐。 3.3 FOOTER的设计 再复制圆角矩形，和刚才的HEAD修改一样，颜色改成黑色。注意细节。 现在整个背景就OK了，新建一个图层，并且把这个图层锁定。 3.4 公告烂的设计 公告栏简单，看图。 3.5 内容页的设计 我是这么设计的。

本文地址：http://www.45fan.com/a/question/47883.html