编辑“OBLOG OBLOG用户模板教程（初级）”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[OBLOG使用手册]] | {{template:oblog导航}}</span>
<div style="clear:both;"></div>
[[OBLOG]]朋友们，你们好，我们来讲一下用户模板制作方法。此教程是以表格制作模板为例，主要针对初级用户对象，比较简单，高手路过吧：

*'''一、工具'''

绘图工具[[PhotoShop]]或[[FireWorks]]

制作页面工具[[DreamWeaver]]或记事本、[[EditPlus]]

初级用户最好选用DEREAMWEAVER，因为这款软件有可视化窗口，方便大家制作。

*'''二、测试'''

到OBLOG官方站下载OBLOG程序，然后再安装[[IIS]]，把本地机器架设成一个[[服务器]]，这样来预览我们制作后模板效果。

*'''三、模板准备工作'''

新建一个文件夹oblog，在新建一文件index.[[html]]。将文件保存到这个文件夹下。路径是这样：oblog/index.html;在oblog文件夹里建一个文件夹image,这个文件夹是用来放图片和样式表的。也可以不用这样，随个人喜好。
<div>[[{{ns:image}}:ob593.jpg]]</div>
*'''四、模板分析'''

下面我们以这个模板为例子进行讲解：
<div>[[{{ns:image}}:ob594_1.jpg]]</div>
<div>[[{{ns:image}}:ob594.jpg]]</div>
在PHOTOSHOP里把图做好，然后对它进行切割。这个模板是上面一个大BANNER下面是文章主体部位。宽度为778PX在屏幕里居中显示。

我们把这里面的图片都切割一下分别取个名字:BANNER.[[GIF]]
<div>[[{{ns:image}}:ob595.jpg]]</div>
NAV.GIF
<div>[[{{ns:image}}:ob596.jpg]]</div>
TIAO.GIF
<div>[[{{ns:image}}:ob597.jpg]]</div>
'''进入DREAMWEAVER进行编辑'''

我们在index.html里进行编辑，也就是主模板

我们来用DREAMWEAVER(DW)进行帮助。

一、定义主窗口

首先看它的背景色以及边间距,在定义一下默认字体大小。然后在DW修改菜单里选择页面属性,会弹出一个对话框,具体参数如下:
<div>[[{{ns:image}}:ob598.jpg]]</div>
二、制作大表格

仔细看大图外部有个边框，我们先做一个边框是1像素的表格

◆点击
: 插入菜单－表格　会弹出对话框，具体参数如下：
<div>[[{{ns:image}}:ob599.jpg]]</div>
'''提示：'''如果在DW里插入表格，设置表格的“边框粗细”为1像素，那么我们看到的实际页面中的表格其实并不是1像素宽的边框，我们用下面的方法制作边框是1像素的表格：

◆插入表格后，将表格居中（如下图）。再设置表格其他属性（间距为１，背景颜色为：#623921）
<div>[[{{ns:image}}:ob600.jpg]]</div>
◆点击表格的每个单元格，在下面的“属性”面板中设置背景色为白色 #FFFFFF，这时细线边框就会出现。如下图：
<div>[[{{ns:image}}:ob601.jpg]]</div>
三、头部

◆在大表格里插入新的表格，在DW下面的属性面板中将BANNER.[[JPG]]大图做成背景图，调节表格高度和宽度让背景图片全部显示出来。

◆在表格里放入[[博客]]地址标签:"$show_blogurl$"。如下图：
<div>[[{{ns:image}}:ob602.jpg]]</div>
四、导航栏

◆在ＤＷ里新建一个表格，置于Banner表格的下方，设置表格的背景为NAV.GIF图片

◆加入导航标签:"$show_subject_l$" 导航栏就出来了，如下图：
<div>[[{{ns:image}}:ob603.jpg]]</div>
五、内容部分

新建一个一行两列的大表格，左侧放登录、日志、日历等一些标签

右侧为日志内容。

（1）左侧开始

◆左侧表格里是居中对齐，为了防止表格里内容贴到边框上，不美观，所以我们让他来居中，离左右都有一点距离：新建一个两行一列的表格，宽度为左侧宽度的９８％；

第一行做为标题，第二行用来放置标签。

将TIAO.GIF做为第一行背景图像

制作方法如下：
<div>[[{{ns:image}}:ob604.jpg]]</div>
◆复制我们刚做的这个公告的表格，粘贴于其下方，换下标题，标签。以此类推，左侧制作完成。

（２）右侧部分=====副模板定义

◆加入一个标签:"$show_log$" 就可以：把标签:"$show_log$"粘贴到右侧的表格内，这个标签调用副模板里的内容。至此，用户主模板制作完成。

六、副模板　Fu.html

整体效果如下：
<div>[[{{ns:image}}:ob605.jpg]]</div>
１．定义日志时间

打开Fu.html插入新表格，加入标签:"$show_addtime$"，鼠标置于单元格内部，在属性面板中设置字体颜色#666666。具体操做如下：
<div>[[{{ns:image}}:ob606.jpg]]</div>
2．日志标题定义

新建一个表格，放置日志标题标签:"$show_topictxt$"，这里需要定义一下链接样式,窗口菜单――[[CSS]]样式，右面会出现CSS对话框
<div>[[{{ns:image}}:ob607.jpg]]</div>
点新建样式按钮，效果如下，按照下图制作
<div>[[{{ns:image}}:ob608.jpg]]</div>
点击确定，按照以下参数设定。
<div>[[{{ns:image}}:ob609.jpg]]</div>
点击确定，这样文字链接时的效果完成，接下来制作鼠标经过效果。

在新建样式
<div>[[{{ns:image}}:ob610.jpg]]</div><br>
<div>[[{{ns:image}}:ob611.jpg]]</div>
日志标题链接效果制完成。

3．日志内容定义

新建一个表格，把标签$show_logtext$放进去，具体效果如下：
<div>[[{{ns:image}}:ob612.jpg]]</div>
*注意：如果[[上传]]大图就会把表格撑开，所以要加上这个代码，效果图如下：

选中表格，加样式
<div>[[{{ns:image}}:ob613.jpg]]</div>
4. 回复阅读定义

新建一个表格，将$show_more$标签放入表格中，将标签选中在属性面板里设置样式.效果图如下：

＊文字居右对齐，颜色为橙色
<div>[[{{ns:image}}:ob614.jpg]]</div>
副模板制作完成。

**总体链接效果
<div>[[{{ns:image}}:ob615.jpg]]</div><br>
<div>[[{{ns:image}}:ob616.jpg]]</div>
以上是链接时候效果A:LINK
<div>[[{{ns:image}}:ob617.jpg]]</div>
<div>[[{{ns:image}}:ob618.jpg]]</div>
以上是链接访问过的效果A:VISITED
<div>[[{{ns:image}}:ob619.jpg]]</div>
<div>[[{{ns:image}}:ob620.jpg]]</div>
以上是链接时候效果A:hover
<div>[[{{ns:image}}:ob621.jpg]]</div>
<div>[[{{ns:image}}:ob622.jpg]]</div>
以上是鼠标点下去的效果A:ACTIVE

'''主模板总体效果'''
<div>[[{{ns:image}}:ob623.jpg]]</div>

'''副模板总体效果：'''
<div>[[{{ns:image}}:ob625.jpg]]</div>












[[category:OBLOG使用手册]]