1. La fuente
Esta es la URL de dicha plantilla: http://www.templatemonster.com/free-templates/free-website-template-learning-center.php. A partir de esta dirección podremos probarla en línea y descargar los archivos fuente.
2. El diseño del sitio web
Veamos el diseño de esta plantilla, de tipo portal web para centros educativos.
3. La estructura general
El sitio web se compone de dos cajas <div>, que utilizan dos clases CSS.
La primera caja <div class="body1"> permite visualizar la parte superior del sitio web. Esta contiene a su vez una caja <div class="main"> que se ha usado para aplicar el diseño. En esta caja encontramos un elemento <header> que corresponde a la parte superior del sitio web, la cabecera.
La segunda caja <div class="body2"> permite visualizar la parte inferior del sitio web. Esta contiene a su vez una caja <div class="main"> que se ha usado para aplicar el diseño. Esta caja contiene un elemento <section id="content"> para la visualización de la zona central del sitio web.
A continuación tenemos una caja <footer> para la visualización del pie de página del sitio web.
Esta es la estructura general:
4. La cabecera
Como acabamos de ver, el elemento <header> se encuentra dentro de dos cajas <div>. Este elemento <header> contiene a su vez tres cajas <div> para las tres partes de la cabecera y una lista <ul>:
- el menú de navegación,
- el título "Learn Center",
- el eslogan,
- los tres grandes botones en una columna.
5. El menú de navegación
El menú de navegación utiliza, como cabía esperar, el elemento <nav>, que contiene una lista <ul> con todos los vínculos. Los tres vínculos de la derecha para las redes sociales se incluyen en otra lista <ul>.
Este es el código de la primera caja <div class="wrapper">:
<div class="wrapper">
<nav>
<ul id="menu">
<li><a href="index.html">About</a></li>
<li><a href="Courses.html">Courses</a></li>
<li><a href="Programs.html">Programs</a></li>
<li><a href="Teachers.html">Teachers</a></li>
<li><a href="Admissions.html">Admissions</a></li>
<li class="end"><a href="Contacts.html">Contacts</a></li>
</ul>
</nav>
<ul id="icon">
<li><a href="#"><img src="images/icon1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/icon2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/icon3.jpg" alt=""></a></li>
</ul>
</div>
6. La continuación de la cabecera
A continuación, la cabecera presenta las típicas cajas <div>, un título <h1> y una lista <ul>:
<div class="wrapper">
<h1><a href="index.html" id="logo">Learn Center</a></h1>
</div>
<div id="slogan">
We Will Open The World<span>of knowledge for you!</span>
</div>
<ul class="banners">
<li><a href="#"><img src="images/banner1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/banner3.jpg" alt=""></a></li>
</ul>
7. Los artículos resaltados
Veamos con mayor detalle la estructura que permite visualizar los artículos resaltados en la parte superior de la zona central.
La zona central del sitio web es un elemento <section id="content"> que se encuentra dentro de dos cajas <div>.
Los tres artículos resaltados en la parte superior de la zona central se visualizan lógicamente gracias a tres elementos <article>.
La imagen que ilustra cada artículo se ha insertado gracias al elemento <figure>.
Como puede ver, esta plantilla utiliza correctamente los nuevos elementos de estructura del HTML5.
Este es el código que se ha usado para la presentación de los tres artículos resaltados:
<div class="body2">
<div class="main">
<section id="content">
<div class="wrapper">
<div class="pad1 pad_top1">
<article class="cols marg_right1">
<figure><a href="#"><img
src="images/page1_img1.jpg" alt=""></a></figure>
<span class="font1">Our Mission Statement</span>
</article>
<article class="cols marg_right1">
...
</article>
<article class="cols">
...
</article>
</div>
</div>
8. La continuación de la zona central
La continuación de la zona central sigue la misma lógica, con los elementos <article> y <figure>.
9. El pie de página
En el pie de página también se usan los elementos <article> para cada uno de los seis "bloques" de visualización. Personalmente, yo habría usado elementos <section>.
Espero haber ayudado en algo. Hasta la próxima oportunidad!
No hay comentarios:
Publicar un comentario