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:
Veamos el código de la estructura general:
<!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:
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Aparece error la pagina de ejemplo
ResponderEliminarHola karloz, gracias por la visita y el aporte de tu comentario!
EliminarEfectivamente, al parecer freehtml5templates ha eliminado su página de ejemplo. Aunque deseo resaltar que cuando se realizó esta publicación, la página sí existía. Esperemos que freehtml5templates solucione el problema de su página!
Los mejores deseos!! Hasta cualquier momento!