La plantilla Da Front Page
La plantilla Da Front Page
1. La fuente
Esta es la URL de dicha plantilla: http://freehtml5templates.com/dafrontpage-html5-and-css3-template/. A partir de esta dirección podremos probarla en lÃnea y descargar los archivos fuente.
2. El diseño del sitio web
Asà se presenta esta plantilla, al estilo de una revista.
3. La estructura general
La estructura general del sitio web aparece dentro de una caja <div id="wrapper">.
El tÃtulo del sitio web se encuentra dentro de un elemento de tÃtulo de nivel 1: <h1>.
El menú de navegación se incluye, como cabÃa esperar, dentro de un elemento <nav>.
El artÃculo resaltado en la parte superior se encuentra dentro del elemento <header> de la página.
La estructura de tres columnas se encuentra dentro de un elemento <section>, ya que las tres columnas presentan un contenido similar.
Por último, el pie de página aparece, claro está, dentro de un elemento <footer>.
Veamos la estructura de las cajas:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Da Front Page</title>
<link rel="stylesheet" href="styles.css" type="text/css"
media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
media="print" />
<!--[if IE]><script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
</head>
<body>
<div id="wrapper">
<h1><a href="#">Da Front Page</a></h1>
<nav>
...
</nav>
<header>
...
</header>
<section id="main">
...
</section>
<footer>
...
</footer>
</div>
</body>
</html>
4. El tÃtulo del sitio web
El tÃtulo del sitio web ha sido insertado dentro de un elemento <h1>.
<h1><a href="#">Da Front Page</a></h1>
5. El menú de navegación
El menú de navegación aparece lógicamente dentro de un elemento <nav>. En una caja <div>, todos los vÃnculos están ordenados con la clásica lista <ul>.
Este es el código que se ha usado:
<nav><div class="menu">
<ul>
<li><a href="#">Top News</a></li>
<li><a href="#">National</a></li>
...
</ul>
</div>
</nav>
La visualización del menú de navegación:
6. El encabezado del sitio web
En el elemento <header> encontramos el artÃculo "en portada". Es el diseñador del sitio web quien ha querido mostrar un artÃculo como cabecera del sitio web. Siguiendo la lógica semántica, este artÃculo se mostrará en todas las páginas del sitio web.
El elemento <header> contiene dos cajas <div>: una para mostrar la imagen y otra para el contenido textual.
Este es el código que se ha usado:
<header>
<div class="headlineimage">
<img src="images/headlineimg.jpg" alt="" />
</div>
<div class="headline">
<h2><a href="#">Fans Mourn Pop Singer’s Tragic Death</a></h2>
<p>Duis sagittis ipsum...</p>
<p>Class aptent...</p>
</div>
</header>
7. La zona central
La zona central del sitio web, que contiene los artÃculos en columnas, utiliza el elemento <section id="main">. Este contiene dos elementos <section class="triplecols"> para presentar las dos series de artÃculos en tres columnas.
Cada elemento <section class="tripelcols"> contiene tres elementos <article>. Y cada elemento <article> contiene, como es lógico, un artÃculo, que incluye elementos <a> para los vÃnculos, <img> para las imágenes y <p> para los párrafos.
Veamos la estructura de los artÃculos en columnas:
Este es el código que se ha usado:
<section id="main">
<section class="triplecols">
<article class="tripleblocks tripleleftblock">
<a href="#">
<img class="thumbnail".../>
<span class="caption"><b>Protest Outside
Courtroom</b>
</span>
</a>
<p class="byline">By Jeffrey Wiggins</p>
<p>Duis sagittis ipsum...</p>
</article>
<article>
...
</article>
<article>
...
</article>
</section>
<section class="triplecols">
<article>
...
</article>
<article>
...
</article>
<article>
...
</article>
</section>
</section>
Asà se presenta la zona central con los artÃculos:
8. El pie de página
El pie de página <footer> usa dos cajas <div> para su presentación. Cada una de las cuatro zonas de visualización utiliza un elemento <aside>.
Esta es la estructura del pie de página:
Y este es el código que se ha usado:
<footer>
<section id="footer-area">
<section id="footer-outer-block">
<aside class="footer-segment first">
<h3>Friends</h3>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
...
</ul>
</aside>
<aside class="footer-segment second">
...
</aside>
<aside class="footer-segment third">
...
</aside>
<aside class="footer-segment last">
...
</aside>
</section>
</section>
</footer>
Asà se visualiza el pie de página:
COMENTA LA PUBLICACION