2.10.09

221/365 » La estructura del sitio

¿Te gustaría leer este tutorial desde el inicio? 

Como vimos ayer, los sitios web están organizados por medio de los div. Revisemos un código que preparé para comenzar a diseñar nuestra plantilla. Cópienlo y peguenlo dentro de la parte de edición de HTML de su blog:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name:     Templeit
Designer: Esnipi
URL:      www.snipedia.net
Date:     10/01/09
----------------------------------------------- 
*/

 ]]></b:skin>
</head>
<body>
   <div id='wrapper'>
  <div id='container'>
   <div id='content'>
    <div class='post-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
     <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
    </b:section>
    </div>
</div>
<div id='sidebar-wrapper'>
    <div id='sidebar'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
     </b:section>
    </div>
</div>
</div>
<!-- acá termina container -->
<div id='footer'>
   <div align="center">
Hacer plantillas es fácil.</div>
</div>
</div>
<!-- acá termina wrapper -->
</body>
</html>

Ahora, hablemos de lo que pensamos hacer. Primero, hay que tener en cuenta que dentro del header va generalmente todo el código CSS. Este nos va a servir para darle forma a todo lo que hagamos con el HTML: tamaños, formas, colores, etc. Ahora, esta plantilla ya está lista para que comencemos a jugar. Primero, revisemos de forma general qué es lo que tenemos dentro del body del código. Entremos a nuestro blog y revisemos qué es lo que se puede ver:



Et voílà! ¿Les gusta cómo vamos? Bueno, no podemos quejarnos, si solo tenemos un post de prueba, y nada más. Ahora, comencemos con la magia. Antes que nada, revisemos la estructura de los divs, para tener claro qué es lo que estamos haciendo.


Con esto en mente, podemos comenzar a jugar con el CSS un poco. Una regla básica de este lenguaje es que todo atributo que se aplique a un elemento, se aplica también a los elementos dentro de ella. Así, por ejemplo, si decidimos el atributo:

body {background-color:green;}

Va a significar que no solo body, sino que todos los elementos dentro de él (container, content, footer, sidebar-wrapper, etc.) tendrán un fondo color verde. Así, si deseáramos que container tenga un fondo blanco, por ejemplo, tendríamos que especificarlo dentro del  código, haciendo que ese div (y los contenidos dentro de él) sean una excepción del atributo global que hemos creado antes.

Juguemos un poco con el código que ya tenemos en nuestro sitio, ¿Les parece? El código CSS puden ponerlo una línea antes de ]]>, dentro del head. Comencemos con quitarle la barra de navegación, y con ponerle algo de color, por motivos puramente didácticos. Voy a escoger una paleta bonita:

#navbar-iframe {height:0px;visibility:hidden;display:none;} /*que significa: el div navbar-iframe va a tener una altura de 0 pixeles, estará escondido, y no tendrá visibilidad.*/
#wrapper {background-color:#7BA38B;}
#container {background-color:#D5A423;}
#content {background-color:#EED4AF;}
#sidebar {background-color:#BE270A;}
#footer {background-color:#CE6C11;} 

Ahora, veamos qué es lo que obtenemos al guardar los cambios. ¿Notan la falta de algunos elementos? Eso es porque todavía no tienen forma, ni contenido. Pero eso es justamente lo que haremos mañana.

No hay comentarios :