网人模板制作教程
一、网人模板的组成
网人模板主要由 模板、CSS和标签三部分组成,下面,我们对这几部分做一个简单的介绍:
1, 模板:也就是我们常说的HTML或DIV+CSS代码,他的主要作用就是排版网页上要显示的内容,把我们所要显示的网页按内容、要求排好,以便网站访问者能更好更方便的访问您的网页。
2, CSS:Cascading Style Sheets(层叠样式表单)的简称。简单的说,它可以提供更多的网页样式,使网页的元素更丰富,比如它可以方便的设置文字的大小、间距,图片的阴影、位置等等。
3, 标签:标签的作用是调用内容到前台模板中显示,根据内容不同,标签又分为常规标签、静态标签、动态标签和JS标签几种:
常规标签主要为调用网站系统设定的内容,如网站名称、网站地址等等;
静态标签主要是方便前台多个页面调用相同的内容,如页头,页尾,网站菜单等这些公用的内容,可以做为一个静态标签,然后在前台调用,这样,方便整体的修改!如果菜单要加个什么频道,只要修改这个静态标签,前台所有页面就跟着变化,而不用去每个模板页里面去修改了;
动态标签主要功能是读取数据库里面的动态数据并在前台显示,如设定一个新进分类信息的动态标签,然后插入到首页模板中,这样,这个位置就会显示最新发表的分类信息了,而且会实时更新;
JS标签,这个也分为静态JS标签和动态JS标签,作用及用法根上面的一样,只是适用于远程调用,如在别的网页上面调用网人内容;
标签的使用及区分见下图:
二、认识网人模板管理
首先是登录网人网管后台,点击最左边模板的大菜单,然后看到出现的下级的模板管理的相关菜单,以下图为例(这里只做大体说明,可能各不同版本间会有些差异):
① 风格管理区:其中,第一行风格主题管理,点击进去后是当前安装在系统上的所有主题,点击修改主题,可以修改这个主题相关的CSS样式表,第二行,则可以导入导出主题,方便各模板在不同网站间迁移。
② 标签管理区:用户可以在这里设定和管理你网站的所有标签,包括常规、静态、动态和JS标签。
③ 模板管理区:在这里可以添加和修改网站前台所有模板。
三、模板制作前的准备
您至少要会HTML或 DIV+CSS 中的一种,最好还学会一点JavaScript,另外,你还得会使用Dreamweaver或相关的网页制作软件,如果您还不会,建议您先在学习一下相关知识。
参考:
HTML:http://baike.baidu.com/view/692.htm
DIV+CSS:http://baike.baidu.com/view/939547.htm
Dreamweaver:http://baike.baidu.com/view/7919.htm
JavaScript:http://baike.baidu.com/view/16168.htm
四、做一个网人首页模板
1,新建一个模板
进入网人后台,点击新建一个通用模板,如下图:
2,用HTML或DIV+CSS搭建好页面框架;
注意:在网人后台用模板编辑器做一个完整的模板不是很方便,您可以直接打开 Skins\您的主题目录\Templates 目录,找到您刚才新建的 index.htm 模板文件,直接用DW打开进行编辑。
这步不多说,主要是HTML及DIV+CSS知识,不懂的可以网上自己找找相关资料。
3,在做好的模板中插入标签(这里我们将不对标签制作方法做详细说明,因为我们会出专门的标签制作教程)
在模板做完后,接下来的工作便是显示内容了,也就是说把您要显示的内容做成标签并插入到模板中要显示此内容的位置,这里我们也用一些图片来做说明:
a、插入网页标题标签
b、插入推荐信息标签
c、插入为您服务标签
以上这些图片,举列说明了标签和前台显示内容的关系,大家在做模板的过程序就可按这些例子来接入您需要显示的内容!
四、小结
系统默认提供的模板,以最少的图片及尽可能全的功能来设计模板,因此并不一定就符合您的要求。您可以参考默认模板中各个模块显示的标签及风格调用方式,来理解各个显示内容、调用的标签与模板设计之间的相互关系与作用。
如果要做一个完全有个性的网站模板,需要您花费一定的时间精心设计与制作。系统提供的模板功能,能满足您在不同频道、不同栏目与不同内容页面,设计与显示不同的风格与版式。
图片附件: 1.gif (2008-12-8 00:51, 19.83 KB) / 下载次数 27
http://bbs.wangren.net/attachment.php?aid=1374&k=a22c34de6b190e00a3990dbda76b67c2&t=1265554762&sid=3D0n0j
图片附件: 2.gif (2008-12-8 00:51, 41.86 KB) / 下载次数 2
http://bbs.wangren.net/attachment.php?aid=1375&k=7ec22c1d7abc4e2fbbfeed9dd0fdd954&t=1265554762&sid=3D0n0j
图片附件: 3.gif (2008-12-8 00:51, 92.63 KB) / 下载次数 39
http://bbs.wangren.net/attachment.php?aid=1376&k=cd0aa9705e1e3e2c824fd67d51aa1ec5&t=1265554762&sid=3D0n0j
图片附件: 4.gif (2008-12-8 00:51, 74.32 KB) / 下载次数 28
http://bbs.wangren.net/attachment.php?aid=1377&k=4971720654edc7b5f2ce4447111dfa9e&t=1265554762&sid=3D0n0j
图片附件: 6.gif (2008-12-8 00:51, 87 KB) / 下载次数 21
http://bbs.wangren.net/attachment.php?aid=1378&k=44c904c5fb53e72df04e97b52e09d4c7&t=1265554762&sid=3D0n0j
图片附件: 5.gif (2008-12-8 00:51, 73.55 KB) / 下载次数 25
http://bbs.wangren.net/attachment.php?aid=1379&k=604fe93e9d9bc959616c692ea10e78a8&t=1265554762&sid=3D0n0j