En esta entrada vamos a crear un módulo para dar estilo a nuestro portal. Vamos a plantear dos páginas diferentes. Una para la página inicial, donde irán las noticias y eventos en dos columnas, y el resto de las páginas con un menú a la izquierda, una parte central y un espacio a la derecha.
Empezaremos creando un módulo para este tipo. Para ello vamos al interfaz de administrador -> Gestión de módulos -> Módulo nuevo. En nuestro caso será el paquete “es.uva.web.portal.template” y seleccionamos que cree todas las carpetas..
Después nos vamos al explorador y cambiamos el sitio a “/”. A partir de aquí debemos ir a la carpeta del nuevo módulo creado: /system/modules/es.uva.web.portal.template/ donde tendremos tantas carpetas como hayamos indicado al crear el módulo.
1. Dentro de elementos vamos a tener diversos contenidos que nos ayudarán a reutilizar y simplificar el template. En nuestro caso vamos a tener:
- header.jsp con el campo «head» de la página
- footer.jsp con el pie de la página
- cabecera.jsp con la cabecera de la página que contiene el logo y una imagen.
- menu/nav_main.jsp con el menú de navegación principal.
- menu/nav_breadcrumb.jsp con las «miguitas» que indican nuestra situación en el portal.
- menu/nav_side.jsp con el menú de navegación izquierdo.
Vamos a ver rápidamente el código de estas páginas.
1.1 Header.jsp
[code]
<%@page buffer=»none» session=»false» taglibs=»c,cms,fn» %>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=${cms:vfs(pageContext).requestContext.encoding}»>
<title><cms:info property=»opencms.title» /></title>
<meta name=»description» content=»<cms:property name=»Description» file=»search» default=»» />»>
<meta name=»keywords» content=»<cms:property name=»Keywords» file=»search» default=»» />»>
<meta name=»robots» content=»index, follow»>
<meta name=»revisit-after» content=»7 days»>
<cms:enable-ade/>
<c:set var=»cols»><cms:property name=»style.columns» file=»search» default=»3″ /></c:set>
<link rel=»shortcut icon» href=»<cms:link>%(link.strong:/system/modules/es.uva.web.portal.template/resources/images/favicon.ico)</cms:link>»></link>
<link rel=»stylesheet» type=»text/css» href=»<cms:link>%(link.strong:/system/modules/es.uva.web.portal.template/resources/css/estilo.css)</cms:link>»></link>
<cms:headincludes type=»css» />
<cms:headincludes type=»javascript» />
</head>
[/code]
1.2 Footer.jsp
[code]
<%@page buffer=»none» session=»false» taglibs=»c,cms,fn» %>
<!– footer –>
<div id=»footer»>
<ul>
<li class=»en_linea»> © Universidad de Valladolid |</li>
<li class=»en_linea»> Aviso legal |</li>
<li class=»en_linea»> Contacto</li>
</ul>
</div>
[/code]
1.3 Cabecera.jsp
[code]
<%@page buffer=»none» session=»false» taglibs=»c,cms,fn» %>
<!– Cabecera –>
<div class=»cabecera»>
<div class=»logo»>
<a href=»»><img src=»<cms:link>%(link.strong:/system/modules/es.uva.web.portal.template/resources/images/logo.jpg)</cms:link>» alt=»Universidad de Valladolid» title=»Universidad de Valladolid»></a>
</div>
<img class=»cabecera_impresion» src=»<cms:link>%(link.strong:/system/modules/es.uva.web.portal.template/resources/images/cabecera.jpg)</cms:link>» alt=»Universidad de Valladolid» title=»Universidad de Valladolid» align=»right»>
</div>
[/code]
1.4 menu/nav_main.jsp
[code]
<%@page buffer=»none» session=»false» taglibs=»c,cms,fn» %>
<c:set var=»navStartLevel» ><cms:property name=»NavStartLevel» file=»search» default=»0″ /></c:set>
<cms:navigation type=»forFolder» startLevel=»${navStartLevel}» var=»nav»/>
<div id=»nav_main» class=»gradient»>
<c:if test=»${!empty nav.items}»>
<ul>
<c:set var=»oldLevel» value=»» />
<c:forEach items=»${nav.items}» var=»elem»>
<c:set var=»currentLevel» value=»${elem.navTreeLevel}» />
<c:choose>
<c:when test=»${empty oldLevel}»></c:when>
<c:when test=»${currentLevel > oldLevel}»><ul></c:when>
<c:when test=»${currentLevel == oldLevel}»></li></c:when>
<c:when test=»${oldLevel > currentLevel}»>
<c:forEach begin=»${currentLevel+1}» end=»${oldLevel}»></li></ul></c:forEach>
</c:when>
</c:choose>
<li>
<a href=»<cms:link>${elem.resourceName}</cms:link>» <c:choose><c:when test=»${fn:startsWith(cms.requestContext.uri, elem.resourceName)}»>class=»gradient current»</c:when><c:otherwise>class=»gradient»</c:otherwise></c:choose>>${elem.navText}</a>
<c:set var=»oldLevel» value=»${currentLevel}» />
</c:forEach>
<c:forEach begin=»${navStartLevel+1}» end=»${oldLevel}»></li></ul></c:forEach>
</ul>
</c:if>
</div>
[/code]
1.5 menu/nav_breadcrumb.jsp
[code]
<%@page buffer=»none» session=»false» taglibs=»c,cms,fn» %>
<c:set var=»navStartLevel» ><cms:property name=»NavStartLevel» file=»search» default=»0″ /></c:set>
<cms:navigation type=»breadCrumb» startLevel=»${navStartLevel+1}» endLevel=»-1″ var=»nav» param=»true» />
<c:set var=»first» value=»true» />
<c:forEach items=»${nav.items}» var=»elem»>
<c:set var=»navText»>${elem.navText}</c:set>
<c:if test=»${empty navText or fn:contains(navText, ‘??? NavText’)}»>
<c:set var=»navText»>${elem.title}</c:set>
</c:if>
<c:if test=»${!empty navText}»>
<c:if test=»${!first}»> » </c:if>
<a href=»<cms:link>${elem.resourceName}</cms:link>»>${navText}</a>
<c:set var=»first» value=»false» />
</c:if>
</c:forEach>
<c:set var=»navTextOnFolder» value=»${navText}» />
<c:set var=»navText»><cms:property name=»NavText» /></c:set>
<c:if test=»${empty navText or fn:contains(navText, ‘??? NavText’)}»>
<c:set var=»navText»><cms:property name=»Title» /></c:set>
</c:if>
<c:if test=»${!empty navText and (navText ne navTextOnFolder)}»>
<c:if test=»${!first}»>
»
</c:if>
<c:out value=»${navText}» />
</c:if>
[/code]
1.6 menu/nav_side.jsp
[code]
<%@page buffer=»none» session=»false» taglibs=»c,cms,fn» %>
<c:set var=»navStartLevel» ><cms:property name=»NavStartLevel» file=»search» default=»0″ /></c:set>
<cms:navigation type=»treeForFolder» startLevel=»${navStartLevel + 1}» endLevel=»${navStartLevel + 3}» var=»nav»/>
<div id=»nav_left»>
<ul>
<c:set var=»oldLevel» value=»» />
<c:forEach items=»${nav.items}» var=»elem»>
<c:set var=»currentLevel» value=»${elem.navTreeLevel}» />
<c:choose>
<c:when test=»${empty oldLevel}»></c:when>
<c:when test=»${currentLevel > oldLevel}»><ul></c:when>
<c:when test=»${currentLevel == oldLevel}»></li></c:when>
<c:when test=»${oldLevel > currentLevel}»>
<c:forEach begin=»${currentLevel+1}» end=»${oldLevel}»></li></ul></c:forEach></li>
</c:when>
</c:choose>
<li><a href=»<cms:link>${elem.resourceName}</cms:link>» <c:if test=»${nav.isActive[elem.resourceName]}»>class=»current»</c:if>>${elem.navText}</a>
<c:set var=»oldLevel» value=»${currentLevel}» />
</c:forEach>
<c:forEach begin=»${navStartLevel}» end=»${oldLevel}»></li></ul></c:forEach>
<c:if test=»${not empty nav.items}»></li></c:if>
</ul>
</div>
[/code]
2. Creados los elementos vamos a crear las dos páginas del template dentro de la carpeta template.
2.1 frontpage.jsp
[code]
<%@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>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/header.jsp)» />
<body>
<div class=»contenedor»>
<!– begin: cabecera –>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/cabecera.jsp)» />
<!– end: cabecera –>
<!– begin: main navigation –>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_main.jsp)» />
<!– end: main navigation –>
<!– begin: breadcrumb –>
<div id=»breadcrumb»>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_breadcrumb.jsp)» />
</div>
<!– end: breadcrumb –>
<!– begin: content area #main –>
<div id=»main»>
<!– begin: left column –>
<div id=»col4″>
<div id=»col4_content» class=»clearfix»>
<!– anchor for accessible link to main content –>
<a id=»content» name=»content»></a>
<cms:container name=»leftcontainer» type=»center» width=»300″ maxElements=»8″ detailview=»true»/>
</div>
<div class=»clear»> </div>
</div>
<!– end: left column –>
<!– begin: right column –>
<div id=»col5″>
<div id=»col5_content» class=»clearfix»>
<!– anchor for accessible link to main content –>
<a id=»content» name=»content»></a>
<cms:container name=»rightcontainer» type=»center» width=»300″ maxElements=»8″ detailview=»true»/>
</div>
<div class=»clear»> </div>
</div>
<!– end: right column –>
<div class=»clear»> </div>
</div>
<!– end: content area –>
<!– begin: #footer –>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/footer.jsp)» />
<!– end: #footer –>
<!– end: #page –>
</div>
</body></html>
[/code]
2.2 main.jsp
[code]
<%@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>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/header.jsp:0d7d1a1b-4686-11e1-9cda-dd53e398b2ed)» />
<body>
<div class=»contenedor»>
<!– begin: cabecera –>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/cabecera.jsp:640f026d-4687-11e1-9cda-dd53e398b2ed)» />
<!– end: cabecera –>
<!– begin: main navigation –>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_main.jsp:fb833b27-4131-11e1-9e7c-dd53e398b2ed)» />
<!– end: main navigation –>
<!– begin: breadcrumb –>
<div id=»breadcrumb»>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_breadcrumb.jsp:07b79eed-4132-11e1-9e7c-dd53e398b2ed)» />
</div>
<!– end: breadcrumb –>
<!– begin: content area #main –>
<div id=»main»>
<!– begin: left column –>
<div id=»col1″>
<div id=»col1_content» class=»clearfix»>
<!– include the left navigation menu –>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/menu/nav_side.jsp:00aaf6ba-4132-11e1-9e7c-dd53e398b2ed)» />
<!– include the boxes on the left side –>
<cms:container name=»leftcontainer» type=»left» width=»230″ maxElements=»8″ />
</div>
</div>
<!– end: left column –>
<!– begin: right column –>
<div id=»col3″>
<div id=»col3_content» class=»clearfix»>
<!– include the boxes on the right side –>
<cms:container name=»rightcontainer» type=»right» width=»230″ maxElements=»8″ />
</div>
</div>
<!– end: right column –>
<!– begin: center column –>
<div id=»col2″>
<div id=»col2_content» class=»clearfix»>
<!– anchor for accessible link to main content –>
<a id=»content» name=»content»></a>
<cms:container name=»centercontainer» type=»center» width=»450″ maxElements=»8″ detailview=»true»/>
</div>
<div class=»clear»> </div>
</div>
<!– end: center column –>
</div>
<!– end: content area –>
<!– begin: #footer –>
<cms:include file=»%(link.weak:/system/modules/es.uva.web.portal.template/elements/footer.jsp:d6e22369-46a8-11e1-9cda-dd53e398b2ed)» />
<!– end: #footer –>
</div>
<!– end: #page –>
</div>
</body></html>
[/code]
3. Ya para terminar sólo nos falta subir los recursos, como las imágenes y la hoja de estilos que usemos dentro de la carpeta resources.
- images/logo.jpg
- images/favicon.ico
- images/cabecera.jpg
- css/estilo.css
Donde el fichero estilo.css es el siguiente:
[code]
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 0.7em;
margin : 20px 0px 20px 0px;
text-align: center;
background-color: #E4E4CA;
color: black;
}
a, a:link, a:visited {
color: black;
text-decoration: none;
}
a:hover {text-decoration: underline;}
.contenedor {
position: relative;
margin: auto;
text-align: left;
width: 748px;
width: 970px;
}
/*===============================================================================================*/
/* ================================== CABECERA =============================================== */
/*===============================================================================================*/
.cabecera {
position: relative;
background-position: top right;
background-repeat: no-repeat;
height: 71px;
}
.logo {
position: absolute;
left: 7%;
left: 55px;
bottom: 0;
}
.logo img {
border: none;
margin: 0;
padding: 0;
}
/* NAVMAIN */
#nav_main{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;background:#C0C7CC url(../../images/gradient.png) repeat-x top left;}
#nav_main ul{margin:0;padding:0;list-style-type:none;width:auto;}
#nav_main ul li{display:block;float:left;margin:0 1px 0 0;}
#nav_main ul li a{display:block;float:left;text-decoration:none;padding:4px 20px 0 20px;height:20px;}
#nav_main a {color:#000;}
#nav_main a:hover {color:#fff;background:#212E3F;}
#nav_main a.current {color:#fff;background:#212E3F;}
/* NAV LEFT ^*/
#nav_left { margin-bottom: 15px; width: 100%; border-top: 1px #eee solid;}
#nav_left ul {margin: 0; padding: 0; list-style-type: none; }
#nav_left li { margin: 0; }
#nav_left a {display: block;padding: 3px 0px 3px 10%;width: 90%;background-color: #fff;text-decoration: none;border-bottom: 1px #eee solid; }
#nav_left a.current { font-weight: bold;background-color: #aab;}
#nav_left a:hover {color: #fff;background-color: #69C;text-decoration: none;}
#nav_left ul ul a {width: 85%;padding-left: 15%;background-color: #f8f8f8;}
#nav_left ul ul ul a {width: 80%;padding-left: 20%;background-color: #fcfcfc;}
#nav_left ul ul ul ul a {width: 75%;padding-left: 25%;background-color: #fff; }
#breadcrumb {
padding: 5px 0px 5px 20px;
border-bottom: 1px solid;
position: relative;
height: 1%;
}
#breadcrumb a {
color: #444444;
}
#main {
padding: 10px 0;
}
#col1 {
width: 240px;
float: left;
}
#col1_content {
padding: 10px 10px 10px 0px;
}
#col2 {
width: 470px;
margin-left: 240px;
margin-right: 240px;
border-left: ;
border-right: ;
}
#col2_content {
padding: 10px;
}
#col3 {
width: 240px;
float: right;
}
#col3_content {
padding: 10px 0px 10px 10px;
}
#col4 {
width: 460px;
margin-left: 10px;
margin-right: 10px;
border-left: ;
border-right: ;
float: left;
}
#col4_content {
padding: 10px;
max-width: 500px;
}
#col5 {
width: 460px;
margin-left: 480px;
margin-right: 10px;
border-left: ;
border-right: ;
float: inherit;
}
#col5_content {
max-width: 500px;
padding: 10px;
}
#footercnt {
margin: 5px 0px;
clear: both;
width: 100.6%;
}
#footercnt div.box {
margin-right: 5px;
width: 32.5%;
float: left;
min-height: 150px;
}
#footer{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;background:#C0C7CC;top left; padding: 10px; margin-top: 10px;}
#footer ul{margin:0;padding:0;list-style-type:none;width:auto;}
#footer ul li{display:block;float:left;margin:0 1px 0 0;}
#footer ul li a{display:block;float:left;text-decoration:none;padding:4px 20px 0 20px;height:20px;}
#footer a {color:#000;}
#footer a:hover {color:#fff;background:#212E3F;}
#footer a.current {color:#fff;background:#212E3F;}
.clearfix:after {
content: «.»;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: block; }
.clear {
clear: both;
}
[/code]
Y las imágenes son:
