OBLOG用户模板教程    (初级)

OBLOG朋友们，你们好，我们来讲一下用户模板制作方法。此教程是以表格制作模板为例，主要针对初级用户对象，比较简单，高手路过吧：

一、工具

绘图工具PHOTOSHOP或FIREWORKS

制作页面工具 DREAMWEAVER或记事本、EDITPLUS 

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

二、测试

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

三、模板准备工作

新建一个文件夹
   oblog，在新建一文件index.html。将文件保存到这个文件夹下。路径是这样：oblog/index.html

在oblog文件夹里建一个文件夹image,这个文件夹是用来放图片和样式表的。也可以不用这样，随个人喜好。

四、模板分析

下面我们以这个模板为例子进行讲解：

   
在PHOTOSHOP里把图做好，然后对它进行切割。这个模板是上面一个大BANNER下面是文章主体部位。宽度为778PX在屏幕里居中显示。

我们把这里面的图片都切割一下分别取个名字

BANNER.GIF

NAV.GIF

TIAO.GIF

---------------------------------------------------------------------------------------------------------------------

进入DREAMWEAVER进行编辑

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

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

一、定义主窗口

首先看它的背景色以及边间距,在定义一下默认字体大小。然后在DW修改菜单里选择页面属性,会弹出一个对话框,具体参数如下:

二、制作大表格

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

◆点击
   插入菜单－表格　会弹出对话框，具体参数如下：

提示： 如果在DW里插入表格，设置表格的“边框粗细”为1像素，那么我们看到的实际页面中的表格其实并不是1像素宽的边框，我们用下面的方法制作边框是1像素的表格：

◆插入表格后，将表格居中（如下图）。再设置表格其他属性（间距为１，背景颜色为：#623921）
   

◆点击表格的每个单元格，在下面的“属性”面板中设置背景色为白色 #FFFFFF，这时细线边框就会出现。如下图：

三、头部

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

◆在表格里放入博客地址标签
    $show_blogurl$。如下图：

四，导航栏

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

◆     加入导航标签
    $show_subject_l$ 导航栏就出来了，如下图：

五、内容部分

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

右侧为日志内容。

（1）左侧开始

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

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

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

制作方法如下：

◆
   复制我们刚做的这个公告的表格，粘贴于其下方，换下标题，标签。以此类推，左侧制作完成。

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

◆
   加入一个标签
   $show_log$ 就可以：把标签
   $show_log$ 粘贴到右侧的表格内，这个标签调用副模板里的内容。

至此，用户主模板制作完成。

六、副模板　Fu.html

整体效果如下：

１．定义日志时间

打开Fu.html插入新表格，加入标签
   $show_addtime$
   ，鼠标置于单元格内部，在属性面板中设置字体颜色#666666。具体操做如下：

2．日志标题定义

新建一个表格，放置日志标题标签
   $show_topictxt$
   ，这里需要定义一下链接样式

窗口菜单――ＣＳＳ样式，右面会出现ＣＳＳ对话框

点新建样式按钮，效果如下，按照下图制作

点击确定，按照以下参数设定。

点击确定，这样文字链接时的效果完成，接下来制作鼠标经过效果。

在新建样式

日志标题链接效果制完成。

3．日志内容定义

新建一个表格，把标签$show_logtext$放进去，具体效果如下：

*注意：如果上传大图就会把表格撑开，所以要加上这个代码，效果图如下：

选中表格，加样式

4. 回复阅读定义

新建一个表格，
   将$show_more$标签放入表格中，将标签选中在属性面板里设置样式

效果图如下：

＊文字居右对齐，颜色为橙色

副模板制作完成。

**总体链接效果 

 

 

 

 

 

链接时候效果A:LINK

 

 

链接访问过的效果A:VISITED

 

 

链接时候效果A:hover

 

鼠标点下去的效果A:ACTIVE

主模板总体效果

主模板总体效果

副模板总体效果：