opencms8.5.0-编写布局模板页

最新推荐文章于 2015-04-11 22:20:27 发布

于瓜瓜

最新推荐文章于 2015-04-11 22:20:27 发布

阅读量3.4k

点赞数

分类专栏： opencms 文章标签： opencms

本文链接：https://blog.csdn.net/nich002/article/details/8686156

版权

opencms 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

运用opencms编写页面布局一般有2种形式,(主页列表信息显示页面和详细信息显示页面),当然自己也可以写更多形式的页面布局,这里作为实例仅供参考。下面是BP Africa(英国石油公司南非分公司)使用opencms开发的网站

index页--主页:

detail页--详细信息显示页面:

可以看到index和detail页的2种布局风格.

index页分header,nav导航,main主体部分和footer部分,其中main部分可以再划分上中下,左中右等等结构,然后在以上提到的各个部分中添加上相应的内容或者拖拽合适的模块进来;

detail页分header,nav导航,面包屑导航,main主体部分和footer部分,其中main部分左边2级目录和右边的详细信息块,然后在以上提到的各个部分中添加上相应的内容或者拖拽合适的模块进来.

上面说的只是针对这个网站的布局分析，不过很有典型性.

在开始编写自己的布局页面需要说明的几点：

1.这个例子是建立在一个站点上,这里测试用的站点是school,至于如何新建一个站点已经有前辈写了很详细的教程了,这里就不赘述了. 查看如何新建一个站点

2.布局jsp页面中会使用到一些opencms常用的标签,后面给出了该标签和对应的学习页面,可以查看下.

<cms:link>标签 <cms:label>标签 <cms:property>标签 <cms:user>标签

下面开始编写自己的布局页面.

1.创建main.jsp

main.jsp源代码如下:

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>首页--我的校园</title>
	<meta name="robots" content="index, follow">
	<meta name="revisit-after" content="7 days">
         <cms:enable-ade/>
	<!--引用css样式表 -->
	<link href="<cms:link>%(link.weak:/system/modules/my.opencms.school/resources/css/style.css:2f8f1877-8c52-11e2-91b7-7bc38ef768ad)</cms:link>" type="text/css" rel="stylesheet"></link>
	
</head>
<body>
	<!-- begin : header -->
	<div id="header">
	       这里是header部分
	</div>
	<!-- end : header -->
	
	<!-- begin : navigation -->
	<div id="navigation">
	       这里是导航部分	
	</div>
	<!-- end : navigation -->
	
	<!-- begin : main -->
	<div id="main">
		
		<!-- begin : left -->
		<div id="left">
			    left部分
		</div>
		<!-- end : left -->
		
		<!-- begin : center -->
		<div id="center">
			  center部分
		</div>
		<!-- end : center -->
		
		<!-- begin : right -->
		<div id="right">
			 right部分
		</div>
		<!-- end : right -->
	</div>
	<!-- end : main -->
	
	<!-- begin : footer -->
	<div id="footer">
			footer部分
	</div>
	<!-- end : footer -->
</body>
</html>

2.在resources目录新建css文件夹,并在其中建立style.css样式文件.如下图

style.css源代码如下:

*{
	font: 12px/1.5 arial, helvetica, clean, sans-serif;
}

/*-----------------------
 border为测试用，OK后删除
------------------------*/
#header,#navigation,#main,#footer{
	margin:0px auto;
	width:1000px;
	border:1px solid blue;
}
#header,#footer{
	height:50px;
}
#main{
	min-height:300px;
}
#left{
	width:250px;
	min-height:100px;
	float:left;
	border:1px solid red;
}
#center{
	width:500px;
	min-height:100px;
	float:left;
	border:1px solid red;
}
/*-----------------------
 删除上面的border后width改回250px
------------------------*/
#right{
	width:244px;
	min-height:100px;
	float:left;
	border:1px solid red;
}

3.在前台页面引用简历的主页布局模板,如何引用模板前文已有介绍,不记得的同学查看新建模板,我们这里新建的的首页名为index.html,预览效果如下:

这是一个初步的布局页面就展示出来的,不过需要优化,添加内容等等.

4.创建导航条

在/system/modules/my.opencms.school/elements/menu//路径下新建nav_main.jsp主导航页(需要现在elements下面先建立以个menu文件夹),先在里面创建一个假导航条以供测试页面用,真导航条以后会讲.

nav_main.jsp源代码如下:

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<div id="nav_main">
    <ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">院系介绍</a></li>
		<li><a href="#">多彩校园</a></li>
		<li><a href="#">就业信息</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
</div>

在/system/modules/my.opencms.school/resources/css/目录下新建nav_main.css样式表.源代码如下:

#nav_main{
	overflow:hidden;
}
#nav_main ul li{
	float:left;
	height:25px;
	list-style:none;
}
#nav_main ul li a{
	margin:0px 8px;
	line-height:25px;
	text-decoration:none;
}
#nav_main ul li a:hover{
	text-decoration:underline;
}

5.在main.jsp引用创建的导航条nav_main.jsp
main.jsp的源代码如下:

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>首页--我的校园</title>
	<meta name="robots" content="index, follow">
	<meta name="revisit-after" content="7 days">
         <cms:enable-ade/>
	<!--引用css样式表 -->
	<link href="<cms:link>%(link.weak:/system/modules/my.opencms.school/resources/css/style.css:2f8f1877-8c52-11e2-91b7-7bc38ef768ad)</cms:link>" type="text/css" rel="stylesheet"></link>
	<link href="<cms:link>%(link.weak:/system/modules/my.opencms.school/resources/css/nav_main.css:27a3b1d4-8f9e-11e2-a6de-7bc38ef768ad)</cms:link>" type="text/css" rel="stylesheet"></link>
</head>
<body>
	<!-- begin : header -->
	<div id="header">
	       这里是header部分
	</div>
	<!-- end : header -->
	
	<!--  引用导航条页面nav_main.jsp -->
	<!-- begin : navigation -->
	<div id="navigation">
	       <cms:include file="%(link.weak:/system/modules/my.opencms.school/elements/menu/nav_main.jsp:2e76c8e1-8f9d-11e2-a6de-7bc38ef768ad)" />
	</div>
	<!-- end : navigation -->
	
	<!-- begin : main -->
	<div id="main">
		
		<!-- begin : left -->
		<div id="left">
			    left部分
		</div>
		<!-- end : left -->
		
		<!-- begin : center -->
		<div id="center">
			  center部分
		</div>
		<!-- end : center -->
		
		<!-- begin : right -->
		<div id="right">
			 right部分
		</div>
		<!-- end : right -->
	</div>
	<!-- end : main -->
	
	<!-- begin : footer -->
	<div id="footer">
			footer部分
	</div>
	<!-- end : footer -->
</body>
</html>

在/sites/school 下预览得到下图:

6,继续编辑main.jsp,在其中添加<cms:container>标签,使之能够放入拖拽的控件.

main.jsp源代码如下:

<%@page buffer="none" session="false" taglibs="c,cms,fn" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>首页--我的校园</title>
	<meta name="robots" content="index, follow">
	<meta name="revisit-after" content="7 days">
	<cms:enable-ade/>
         <!--引用css样式表 -->
	<link href="<cms:link>%(link.weak:/system/modules/my.opencms.school/resources/css/style.css:2f8f1877-8c52-11e2-91b7-7bc38ef768ad)</cms:link>" type="text/css" rel="stylesheet"></link>
	<link href="<cms:link>%(link.weak:/system/modules/my.opencms.school/resources/css/nav_main.css:27a3b1d4-8f9e-11e2-a6de-7bc38ef768ad)</cms:link>" type="text/css" rel="stylesheet"></link>
</head>
<body>
	<!-- begin : header -->
	<div id="header">
	       这里是header部分
	</div>
	<!-- end : header -->
	
	<!--  引用导航条页面nav_main.jsp -->
	<!-- begin : navigation -->
	<div id="navigation">
	       <cms:include file="%(link.weak:/system/modules/my.opencms.school/elements/menu/nav_main.jsp:2e76c8e1-8f9d-11e2-a6de-7bc38ef768ad)" />
	</div>
	<!-- end : navigation -->
	
	<!-- begin : main -->
	<div id="main">
		
		<!-- begin : left -->
		<div id="left">
			    <cms:container name="leftcontainer" type="left" width="250" maxElements="3" />
		</div>
		<!-- end : left -->
		
		<!-- begin : center -->
		<div id="center">
			  <cms:container name="centercontainer" type="center" width="500" maxElements="3" />
		</div>
		<!-- end : center -->
		
		<!-- begin : right -->
		<div id="right">
			 <cms:container name="rightcontainer" type="right" width="250" maxElements="3" />
		</div>
		<!-- end : right -->
	</div>
	<!-- end : main -->
	
	<!-- begin : footer -->
	<div id="footer">
			footer部分
	</div>
	<!-- end : footer -->
</body>
</html>

<cms:container>标签,name属性唯一,不能有重复的(特别重要);maxElements属性为该容器块最多能放几个拖拽进来的模块. 现在把样式表里的border属性都去掉,然后预览下:(注意右上角标注的小眼睛)

OK,现在就可以往里面拖拽控件了。

于瓜瓜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
10
评论
opencms8.5.0-编写布局模板页

运用opencms编写页面布局一般有2种形式,(主页列表信息显示页面和详细信息显示页面),当然自己也可以写更多形式的页面布局,这里作为实例仅供参考。下面是BP Africa(英国石油公司南非分公司)使用opencms开发的网站 index页--主页: detail页--详细信息显示页面: 可以看到index和detail页的2种布局风格.
复制链接

扫一扫

专栏目录