Wenplus模板制作教程.PDFVIP

Wenplus模板制作教程 Webplus 网站群管理系统中网站的前台页面是通过模板来展示的，不管网站 的内容如何，一个好的模板可以为为网站增色不少，以此来吸引更多人的访问。 所以，模板的制作显然成为Webplus 网站群管理工作中的一个重要的组成部分。 那有人就会问：我只会做一些静态页面，那么制作webplus的模板会不会有 问题呢？答案是否定的。其实Webplus 模板的制作简单易懂，只要是对html 和 css 稍有了解，就会对我们的模板进行编辑和制作。对于一些经常制作静态页面 的人来说，更是得心应手。下面我们通过一个简单的实例，来一步一步教会大家 使用DIV+CSS进行网页布局设计，最终做成webplus的模板。 一、页面布局 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或者 FireWorks等图片处理软件将需要制作的界面布局简单的构画出来（切图操作请 参阅PhotoShop相关文档）。以下是一个设计好的界面布局： 我们需要根据构思图来规划一下页面的布局，仔细分析一下该不难发现图片 大致分为以下几个部分： A LOGO MENU Banner 、顶部部分：其中又包括了 、 和一幅 图片等元素； B、内容部分：可分为侧边栏内容部分和主体内容部分； C、底部部分：包括一些版权信息等内容； 有了以上的分析我们就可以很容易的布局了，我们设计层如下图： 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样 理解起来就会更简单了。 DIV结构如下： │body {} /*这是一个HTML元素，具体我就不说明了*/ └#Container {} /*页面层容器*/ ├#Head {} /*页面头部*/ ├#PageBody {} /*页面主体*/ │ ├#Sidebar {} /*侧边栏*/ │ ├# MainBody {} /*主体内容*/ ├#Foot {} /*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写 html和 css代码。 二、新建模板页面 模板是由放在同一个文件夹下面的3个文件组成的，首页为main.htm， 列表页面为listcolumn.htm，文章展示页面为displayinfo.htm。下面我们就对 main.htm页面来进行编辑： 三、编写代码 我们先打开main.htm页面，添加如下代码，以此来创建我们模板html 的一 个基本结构： head meta http-equiv=Content-Type content=text/html; charset=gb2312/ titleWebplus模板制作/title link href=css.cssrel=stylesheettype=text/css/ /head body /body /html 下面，我们在body/body标签对中写入DIV的基本结构，代码如下： div id=container!--页面层容器-- div id=Header!--页面头部--/div div id=PageBody!--页面主体-- div id=Sidebar!--侧边栏-- /div div id=MainBody!--主体内容--/div /div div id=Footer!--页面底部-- /div /div 接下来，我们在css里面可以创建一些通用的css样式,例如规定每个层的 大小位置，页面字体的大小，超链接的样式等等。（具体的css使用方法请参阅 《CSS2.0中文手册》） body {margin: 0px;background-color:C6C3C6;} body,td,input,select,textarea {font-size:9pt;line-height:15pt;} #container{width:1002px;}