En la imagen anterior de nuestro proyecto podemos observar que están definidos distintos sectores o divs, a saber:

Dados estos sectores, modifiquemos primeramente nuestro “index.html” para que quede de la siguiente forma: (ver el codigo desde aquí) Vamos a ir viendo cada uno de los divs, pero expliquemos primero sus usos. Recordemos que un div empieza con el tag o etiqueta “
” y termina con “
”.

Si observamos el código vemos que primero hay un div llamado “borde”, este nos servirá para darle un borde a toda nuestra página, es decir, todo lo que esté dentro de las etiquetas “
y “
” tendrá un borde que especificaremos en nuestro archivo de estilo “template.css”.

Siguiendo la estructura hay otro div llamado “contenedor” el cual “contendrá” toda nuestra página. Luego, dentro de este contenedor estarán todos los demás sectores.

¿Por qué usamos un contenedor? La respuesta es muy simple: de esta forma todo lo que esté dentro del contenedor quedará como un “bloque sólido” que podremos manejar a nuestro antojo. Principalmente para darle una alineación, como veremos más adelante.

Pero vayamos por partes...
Tomemos como que nuestro proyecto web va a tener un ancho máximo de 700 pixeles para que pueda ser visualizado en cualquier resolución de monitor y que además se aprecie el fondo de la misma.

Vamos a agregar imágenes a nuestra carpeta “images”, pondremos las siguientes:

1.- Nuestro Banner

2- Para el fondo utilizaremos este, es una imagen grande lo cual no es conveniente porque hace pesada su carga, pero vale puesto que el efecto de fondo corteza de árbol queda muy bonito, es algo más a tener en cuenta: sacrificar el diseño por la velocidad de carga o viceversa:

3- Nuestras viñetas

4- El botón buscador

5- El fondo de la barra de navegación:

Las mismas etiquetas que se usan en el archivo de html se pueden utilizar, es más se deberían utilizar, en el archivo de hojas de estilo.

Técnicamente hablando, cuando las invocamos desde el archivo CSS cambian de nombre y se las denomina “selectores” (haciendo una aproximación teórica sería algo como “selectores del html”) pero además el lenguaje CSS agrega muchísimos selectores más que sería largo enumerar aunque algunos iremos viendo.

En todo esto radica una de las cualidades más importantes de las CCS porque por defecto, al cargarse la web, ésta tomará los “atributos” de las “etiquetas” definidas en los “selectores” del archivo de estilo. ¡¡¡ Genial !!! ¡¡¡ Nos da una flexibilidad máxima!!!.

Redactado por :

tuxmerlin