奇新CMS系统主题样式制作（1）——熟悉网页代码及样式

时间：2010-09-21 来源：fralepg

奇新CMS内容管理系统采用基于 JavaEE框架的3层架构，是一款真正意义上做到网页与程序完全脱离的Java CMS系统。

了解奇新CMS页面标签代码

奇新CMS内容管理系统支持不同的整站主题样式。奇新CMS前后台页面全部采用 DIV+CSS布局，能够满足网页开发者的需要，从而实现个性化的主题风格。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets">

<head>

……

</ul>

</div>

</div>

<div>

</div>

</div>

<div>

</div>

</div>

</div>

……

</body>

</html>

当了解奇新CMS页面代码后，您就可以设计新的主题样式了。刚开始也许您还不太熟悉，建议您采用从整体到局部的方式设计，得到网页效果图并完成切图后，先添加外层标签样式（如#page等），这样可以看到整体页面效果，再编写#menubar, #navbar, .box, .box2，menuList2,
. ser_online , .forum_ulist, .forum_table, .boxx, .forum_title, .forum_list 等样式。您可以使用预定义样式，当然也可以修改我们的预定义样式以实现您的个性化页面，然后再做浏览器兼容性测试，最终完成主题样式的开发工作。

页面标签CSS背景图片的使用

奇新CMS全部应用CSS背景图片来呈现页面整体效果，做到表现与内容的完全分离，从而实现整站换肤的功能。每套主题样式采用自适应宽度的背景图片，这样只需要通过修改样式即可实现页面不同宽度的多种布局。

背景图片

背景图片主要用于以下标签：

html，body，#page，#header，#footer，#menubar，. menuList，. menuList li{}，. menuList li a{}，. menuList li a:hover{}， #navbar，#content，.box, .box2等。

结合网页整体布局，可能添加的背景图片有：.logo，. banner，#main，#sidebar，.sidebar_h，.sidebar_b，.sidebar_f等。

页面图标

页面图标主要用于如下标签：

.menulist li{} , .menulist li a {} , .menulist li a:hover {}

#navbar {}

. box_h b {} , box2_h b {}

. menuList2 li{} , . menuList2 li a{} , . menuList2 li a:hover{}