二、根据页面设计图，编辑模板

1 、对设计图进行准确分析

第一步 　对整体布局框架进行分析

由于浏览器之间的存在兼容性问题，页面布局中的横向间隙，尽可能在布局中考虑进去。纵向间隙可按情况而定。

分析：

　整体为四行三列的表格（中间一列为间隙）

　整体第一、三、四行合并为一列

　右侧内容整体插入一个五行一列表格

　右侧内容第一行插入一个二行三列或一行三列表格（中间一列为间隙）

　右侧内容第五行插入一个一行五列表格（第二、四列为间隙）

　整体第三行插入一个一行三列表格（中间一列为间隙）

注： 一些结构简单的布局也可以简化处理，如上面说的“右侧内容上部分”设计图中是二行三列，如简化处理就可以用一行三列的表格实现。这样一行里面可以放纵向的两个栏目。

第二步 　根据设计图记录并计算相应框架部分的具体单元格准确数据如下（单位：像素）：

设计图宽： 1002 　左右各空 101

整体布局：主体宽 800 　左边宽 204 （居右　 200 ）　中间隙为 4 　右边宽 592 （居左　 588 ）

右上部分：主体宽 588 　左边宽 246 　中间隙为 4 　右边宽 338

右下部分：主体宽 588 　三个栏目各 192 　中间间隙 6

内容底一行：主体宽 792 　左右各 394 　中间隙 4

第三步 　给相应的布局框架内容块确定相应的标识名

由于定制的皮肤中会有一些栏目模块的美工效果不同，为了方便个别栏目的特殊美工效果，需要对模板中的布局区域块定义一个 id 名，用于实现添加相同栏目模块到不同区域时设置不同的美工效果。这里的 id 名可以以栏目拼音命名，也可根据模板中所处的位置命名，按自己的习惯而定。

同时，如果有哪几个区域要设置相同的美工效果，也可以在模板中添加相应的 class 名。如天一蓝色效果图中的“学生天地”里三个栏目中间的两个分隔区，就可以添加一个 class 标识以便后面皮肤里调用来定义它的背景图片。

根据对效果图中各栏目美工效果的差异进行进一步的细致分析，确定相应布局区域块的 id 名:

顶部内容区为： TOP

左侧内容区为： LEFT

右侧内容上部分为： RIGHT_T

右侧内容中间三行分别为： RIGHT_C1 （插图及天一教研栏目） ,RIGHT_C2 （德育在线） ,RIGHT_C3 （学生天地的标题图片）

右侧内容下部分为： RIGHT_B

内容区底部一行为： CONTENT_B 　两个间隙区加注 class 名为 line ，另三个栏目区加注 id 名分别为 CONTENT_B1 、 CONTENT_B2 、 CONTENT_B3

底部内容区为： BOTTOM

注： 对于布局中区域块的确定，可以根据相邻区域的美工效果是否相同或相近以及后面的内容栏目实现情况来确定。如果现在确定好了，后面选择栏目时发现原先设想的栏目模块不能实现效果，也没有关系，可以再回到模板编辑处对模板进行细节上的调整与修改再在保存时勾选“直接更新到应用频道栏目”即可。

2 、编辑页面模板

第一步 　在后台编辑页面新建布局模板框架

在后台里选择布局管理菜单集下的模板管理，单击“添加”按钮添加一个新模板，在其编辑区域内根据前面的分析与准备，插入表格，并对单元格进行相应的属性设置。

（１）插入表格操作

在需要插入表格的区域单击鼠标左键，再在编辑工具栏中的表格菜单按钮上单击，在弹出的菜单中单击“插入表格”，会弹出如 图 3 所示的表格属性窗口。

图 3 　表格属性窗口

在此窗口中设置相应的表格属性后，单击“确定”，完成插入表格操作。

注： 用于布局的表格，其边框、间距、间隙最好都设为 0 （除非有特殊要求）。另外如果按确定后，并没有显示虚线表格，也没有关系，只需单击表格菜单右侧的“显示或隐含表格 BORDER 为 0 的表格边框”按钮，即可显示出来。

如果加入的表格是整体表格，那么在表格属性窗口中必须把“对齐方式”设为“居中”。另外，考虑到 FF 浏览器的兼容性问题，在此转换到“代码”编辑状态，在“ <table ”后面加入“ style=”margin:auto;” ”代码，注意“ style ”前面有个空格。

另外，在表格的某个单元格中再插入一个表格或后面的插入拖动区时要注意：在插入前，首页要把单元格里空格占位符删除，不然模板中表格或拖动区域会显得参差不齐。当然您也可以在最后框架编辑完成后，直接在代码页里把所有的“ &nbsp; ”去掉。

（２）单元格属性设置

在需要设置的单元格内单击鼠标左键，再在编辑工具栏中表格菜单按钮上单击，当然也可直接在需要设置的单元格中右键，在弹出菜单中单击“单元格属性”，即可弹出如 图 4 所示的“单元格属性”窗口。

图 4 　单元格属性窗口

在此窗口中设置相应的单元格属性后，单击“确定”，完成单元格属性设置操作。

如需合并单元格，也可以在右键菜单中找到“合并行（向下侧）”或“合并列（向右侧）”的菜单命令。

注： 在此建议您最好在每个单元格的属性中，设置“垂直对齐”为“顶部对齐”，这样当某个栏目把整个区域撑高时，该区域的所有栏目还是以居顶显示。

（３）插入 id 或 class 标识定义

因为标识定义必须在代码里插入，所以必须要转入到代码编辑状态下进行（只需单击左下角的“代码”按钮即可进入代码编辑状态。）

Html 中的元素即网页元素，都是由起始标签、元素内容、结束标签组成。以表格的单元格为例， <td>&nbsp;</td> ，其中 <td> 是起始标签， &nbsp; 是元素内容， </td> 是结束标签。而元素属性一般都是写在起始标签内的，在此 id 、 class 的定义就是作为元素属性中的一种，所以也是写在起始标签内的。书写格式为：

<td id=TOP>&nbsp;</td>

<td class=line>&nbsp;</td>

所以在此，你只需找到需要标注标识定义的起始标签，在其间加入相应的 id 或 class 定义语句，就可以了。如果表格嵌套较多，你也可以在所有拖动区域都插入编辑好后，再到代码编辑状态下，根据相应的拖动区域相关说明文字，来分辩哪几个起始标签需要定义 id 或 class 。

提示： 如果您对 html 代码很熟悉，那么后面的两个操作要点都可以直接在代码编辑状态下同时进行。另外， id 名、 class 名是区分大小写的。

最后的整体框架效果如 图 5 所示。

图 5 　布局模板框架

第二步 　在内容区域块中插入拖动区域，并添加相应的默认栏目设置

（１）对页面设计图中的各栏目内容实现进行分析，确定相应的默认栏目

提示： 对于一些特殊效果的栏目，可以用库模板来实现，如“校园风景线”、“插图”栏目。

顶部内容区为： TOP （横幅、菜单导航、库模板）

左侧内容区为： LEFT （登录、库模板、文章列表、文章类别）

回顶部