Primero definiremos un esqueleto genérico para nuestro portal, en nuestro caso un patrón de dos columnas con cabecera y pie, y una sección destinada a un menú rápido. He tomado como ejemplo las múltiples plantillas gratuitas que circulan por Internet, concretamente la usada aquí puede encontrarse en http://www.maxdesign.com.au/articles/css-layouts/two-liquid/
Seguiremos los siguientes pasos:
- Header: Cabecera del portal, logo, motor de búsqueda, etc.
- Navigation: Menú de acceso rápido.
- Aside: Menú lateral de usuario.
- Main Content: Contenido del portal.
- Footer: Pie del portal, contacto, copyright, etc.
- Crearemos una carpeta nueva en el directorio application llamada layouts.
- En la nueva carpeta creada añadiremos una subcarpeta llamada scripts.
- Crearemos el fichero layout.phtml en application/layouts/scripts.
- Crearemos una carpeta llamada css en public.
- Crearemos una carpeta llamada images en public, donde depositaremos el fondo de la columna derecha.
Contenido del fichero application/layouts/scripts/layout.phtml
<?php
echo $this->doctype ();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<?php
echo $this->headTitle ();
echo $this->headScript ();
// add a link to the site style sheet
$this->headLink ()->appendStylesheet ( '/css/layout.css' );
echo $this->headLink ();
?>
</head>
<body>
<div id="container">
<div id="header">
<h1>Zend Framework CMS</h1>
</div>
<div id="navigation">
<?php echo $this->layout()->nav;?>
</div>
<div id="content-container">
<div id="content">
<?php echo $this->layout()->content?>
</div>
<div id="aside">
<?php echo $this->layout()->subNav;?>
</div>
<div id="footer">
<em>Powered by the Zend Framework</em>
</div>
</div>
</div>
</body>
</html>
Contenido del fichero public/css/layout.css:@CHARSET "ISO-8859-1";
#container {
margin: 0 auto;
width: 100%;
background: #fff;
}
#header {
background: #ccc;
padding: 20px;
}
#header h1 {
margin: 0;
}
#navigation {
float: left;
width: 100%;
background: #333;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style-type: none;
display: inline;
}
#navigation li a {
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover {
background: #383;
}
#content-container {
float: left;
width: 100%;
background: #FFF url(/images/layout-two-liquid-background.gif) repeat-y 68% 0;
}
#content {
clear: left;
float: left;
width: 60%;
padding: 20px 0;
margin: 0 0 0 4%;
display: inline;
}
#content h2 {
margin: 0;
}
#aside {
float: right;
width: 26%;
padding: 20px 0;
margin: 0 3% 0 0;
display: inline;
}
#aside h3 {
margin: 0;
}
#footer {
clear: left;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
Hemos de incluir el directorio de layouts creado en nuestro fichero de configuración para que la aplicación cargue sus contenidos. Para ello editamos application/configs/application.ini y añadimos en la sección production la entrada :
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
Para finalizar sustituiremos el contenido del portal por un texto más simple. Para ello editaremos el fichero application/views/scripts/index/index.phtml con el siguiente código:
<h2>Home</h2> <p>Esta es la página Home por defecto...</p>
Podemos probar el resultado navegando en http://localhost:
