《Wenplus模板制作教程》由会员分享，可在线阅读，更多相关《Wenplus模板制作教程（11页珍藏版）》请在金锄头文库上搜索。
1、W Wenplusenplus 模板制作教程模板制作教程 Webplus 网站群管理系统中网站的前台页面是通过模板来展示的 不管网站 的内容如何 一个好的模板可以为为网站增色不少 以此来吸引更多人的访问 所以 模板的制作显然成为 Webplus 网站群管理工作中的一个重要的组成部分 那有人就会问 我只会做一些静态页面 那么制作 webplus 的模板会不会有 问题呢 答案是否定的 其实Webplus 模板的制作简单易懂 只要是对 html 和 css 稍有了解 就会对我们的模板进行编辑和制作 对于一些经常制作静态页面 的人来说 更是得心应手 下面我们通过一个简单的实例 来一步一步教会大家 使用
2、 DIV CSS 进行网页布局设计 最终做成 webplus 的模板 一 页面布局一 页面布局 所有的设计第一步就是构思 构思好了 一般来说还需要用 PhotoShop 或者 FireWorks 等图片处理软件将需要制作的界面布局简单的构画出来 切图操作请 参阅 PhotoShop 相关文档 以下是一个设计好的界面布局 我们需要根据构思图来规划一下页面的布局 仔细分析一下该不难发现图片 大致分为以下几个部分 A 顶部部分 其中又包括了 LOGO MENU 和一幅 Banner 图片等元素 B 内容部分 可分为侧边栏内容部分和主体内容部分 C 底部部分 包括一些版权信息等内容 有了以上的分析我们
3、就可以很容易的布局了 我们设计层如下图 根据上图 我再画了一个实际的页面布局图 说明一下层的嵌套关系 这样 理解起来就会更简单了 DIV 结构如下 body 这是一个 HTML 元素 具体我就不说明了 Container 页面层容器 Head 页面头部 PageBody 页面主体 Sidebar 侧边栏 MainBody 主体内容 Foot 页面底部 至此 页面布局与规划已经完成 接下来我们要做的就是开始书写 html 和 css 代码 二 新建模板页面二 新建模板页面 模板是由放在同一个文件夹下面的 3 个文件组成的 首页为 main htm 列表页面为 listcolumn htm 文章展
4、示页面为 displayinfo htm 下面我们就对 main htm 页面来进行编辑 三 编写代码三 编写代码 我们先打开 main htm 页面 添加如下代码 以此来创建我们模板 html 的一 个基本结构 下面 我们在标签对中写入DIV的基本结构 代码如下 接下来 我们在 css 里面可以创建一些通用的 css 样式 例如规定每个层的 大小位置 页面字体的大小 超链接的样式等等 具体的 css 使用方法请参阅 CSS2 0 中文手册 Webplus模板制作 body margin 0px background color C6C3C6 body td input select text
5、area font size 9pt line height 15pt container width 1002px 页面头部 Header width 100 margin 0 auto background FFCC99 页面主体 PageBody width 100 margin 0 auto height 400px background CCFF00 MainBody width 700px Float right SiteBar width 700px Float left 页面底部 Footer width 100 margin 0 auto height 50px backgr
6、ound 00FFFF 超链接的样式 A link A visited text decoration none color 000000 A active A hover text decoration none color 990000 最后我们可以在每一个 div 里面去添加页面代码 所有的新闻展示部分都必 须添加 webplus 的模板标签 具体标签参阅本文档下方的标签说明章节 例如 左侧的公告栏 我们需要添加 频道 i 的标签 而且每一个 频道 i 的 标签必须放在一个单独的表格里面 代码如下 divid Sidebar 公告栏 频道 1 参考以上公告栏的制作方法 我们可以完善 ma
7、in 页面的其他频道 下面 我们再来简单讲解一下对模板的其他两个页面 列表页面和文章页面 的制作 首先新建文章页面 displayinfo htm 下文章页制作完以后的效果图如下 文章页面的制作最为简单 由于文章页面上面出现的标签无需单独嵌套表 格 甚至多个标签可以添加在同一个单元格里面 我们以发布时间和访问次数为 例 代码如下 发布时间 发布时间 访问次数 访问次数 文章列表页面的制作和 main 页面比较相近 列表页效果图如下 由于文章列表页面上面出现的标签 栏目列表 二级栏目 文章列表 也需要单独嵌套表格 尤其是栏目列表和二级栏目两个标签 当前栏目存在子栏 目的时候 栏目列表标签会递归调
8、用下面的子栏目 代码如下 错误的代码 错误的代码 栏目列表 二级栏目 正确的代码 正确的代码 栏目列表 二级栏目 以上就是 webplus 模板的三个页面主要的制作方法 模板制作完成以后 就 可以对模板进行打包上传的操作了 四 模板打包上传四 模板打包上传 模板必须使用 zip 压缩 打包时必须选中全部文件后进行压缩 如下图 五 五 webpluswebpluswebpluswebplus 模板标签说明模板标签说明 页面页面标记名标记名功能功能 首页 main htm 频道 i 定义信息输出结构 如前面有箭头 后面跟文章标题 必 须放置在一个单独的内 标题 i 显示相应频道的标题 更多按钮 i
9、 更多不放右下角时的标签 文 章 列 表 页 listcolumn h tm 栏目列表 定义列表页栏目输出结构 如前面有箭头 后面跟文章标 题 必须放置在一个单独的内 二级栏目 可以显示栏目列表下级栏目 和 栏目列表 配合使用 如下图样式 文章列表 定义列表页信息输出结构 如前面有箭头 后面跟文章标 题 必须放置在一个单独的内 栏目名称 点击各栏目后自动显示栏目名称 位置名称 点击根栏目后显示根栏目名称 点击下级栏目不会发生变 化 当前位置 显示用户当前在网站内的访问路径信息 频道 i 和首页一样 但必须是首页已有的频道 栏目图片 列表页面是通过一个页面解析的 样式是完全统一的 但 可以通过增
10、加此标记使得访问不同栏目时调用不同的 banner 图 使每个栏目页面有所不同 点击 模板管理 模块绑定 然后选中模板 点击下面的 维护栏目图片 就可以按照栏目维护图片 文 章 展 示 页 displayinfo htm 文章标题 显示文章的标题 文章内容 显示文章的内容 文章副标题 显示文章的副标题 发布时间 显示文章的发布时间 访问次数 显示文章的访问次数 发布人 显示文章的发布人 功能按钮 显示评论按钮 同栏目文章 显示在同一栏目的其他文章 相关文章 显示该文章的 相关文章 相关文章由用户发布文章时 定义 六 其他注意事项六 其他注意事项 1 模板是由放在同一个文件夹下面的 3 个文件组
11、成的 首页为 main htm 列表 页面为 listcolumn htm 文章展示页面为 displayinfo htm 必须采用以上文件名 否则程序不能解释 2 所有频道标记必须外面套用一个表格 不能直接添加到单元格里 其他标签 不受限制 3 首页频道结构必须采用表格 如下图样式 4 可以任意在模板里增加在客户端执行的 javascript 脚本 如日历代码 5 WebPlus 运行在 Java 环境下的版本 对大小写敏感 例如 在编辑模板时 实 际文件和 html 代码里分别是 banner JPG 和 banner jpg 在本地微软环境下看是好 的 但传上去后就看不到了 6 搜索宽度的控制 在样式表中加名为 searchcolumnlist 样式 可以定义 栏目 下拉框的宽度 在样式表中加名为 searchtitleinput 样式 可以定义 标题 输入 框的宽度 7 用户登陆区域 input 宽度的控制 在样式表中加名为 toolsinput 样式 定义宽 度就可以了
