InicioComo crear una pagina web con HTML5 y Dreamweaver › Comenzar a maquetar con CSS3

Comenzar a maquetar con CSS3

pagina web con HTML5

Ya hemos visto algunos elementos de maquetado, como los estilos de las letras y la posibilidad de añadir fondos a nuestros sitios web. Ahora, veremos cómo darle forma a la página, este procedimiento variará según nuestros gustos. En nuestro ejemplo, crearemos un sitio tipo blog que podemos cambiar a nuestro gusto, utilizando los conocimientos adquiridos en este curso y mucha práctica.

Diseño general

Lo primero a tener en cuenta es qué tipo de sitio deseamos. Para comenzar, veremos un ejemplo clásico con una cabecera, un cuerpo central, un menú de navegación y una barra lateral. Por supuesto, que podemos cambiarlo siguiendo las pautas de diseño que vamos a explicar más adelante.

Comenzaremos la lección, abriendo en el Dreamweaver los archivos sitio.html y estilo.css. Esto lo haremos ingresando al menú File y seleccionando la opción Open y luego, elegimos los archivos a abrir uno por uno.

abriendo archivo estilo.css

Ahora, seleccionamos la pestaña estilo.css y ubicamos la zona que le dará estilo a la etiqueta body. Una vez allí, ingresamos la orden de anchura del sitio web y los márgenes, justo arriba de la orden de estilo backkground-color, como veremos en la siguiente figura:

comenzando la maquetación en CSS3

Podemos notar que la orden margin será automática para el lado izquierdo y 0 px para el derecho, quedando completamente centrado el sitio web.

Una vez que tengamos el ancho y los márgenes listos, es momento de dar formato a la cabecera de nuestro sitio web. Para ello, vamos a ubicarnos en la sección header del archivo estilo.css y colocaremos el tamaño de nuestro sitio web, de la siguiente manera:

maquetando las cabeceras en CSS3

Como ya hemos dado el formato a las fuentes, vamos a crear el menú en la parte superior, justo debajo de las líneas de la cabecera con el título y descripción de nuestro sitio web. Para ello, vamos a crear las secciones dedicadas a la etiqueta nav, y la primera, nos dará el estilo específico de la lista no numerada. Le daremos el nombre de nav ul, y justo allí daremos el estilo al sitio, colocando márgenes, altura del bloque y eliminando los enlaces de la lista de la siguiente manera:

maquetando la pestaña nav en CSS3

A continuación, vamos a dar un estilo especial a cada uno de los ítems de la lista no numerada con la sección nav ul li que crearemos justo debajo de nav ul en el archivo estilo.css, como veremos a continuación:

modificando el menú CSS3

Notaremos que hemos creado una cuadrícula con los items, como un menú tradicional de blog, con bordes verticales al final de cada item y el despliegue de los ítems de manera horizontal.

Es momento de darle un toque especial a cada uno de los enlaces del menú, dándole color a las letras y eliminando por completo el subrayado, mejorando la apariencia de las fuentes del menú de la siguiente manera:

mejorando el menú CSS3

Luego, ingresaremos una sección llamada nav ul li a:hover, en donde, daremos un efecto especial a cada uno de los ítems, una vez que hagamos click en ellos. Para ello, en el archivo estilo.css ingresaremos el siguiente código:

efectos el menú CSS3

Vamos a dar estilo a la etiqueta article. Para ello, le daremos un ancho de 600 px y la colocaremos a la izquierda. Utilizaremos la orden float: left, y el código quedará de esta forma:

maquetando la etiqueta article

Ahora, hemos creado un par de columnas gracias a float. En la izquierda tendremos a article, que vamos a modificar para dar un estilo interesante, coloreando la barra de la fecha del artículo a escribir, y por supuesto, adicionaremos código especial para varias de las zonas de dicha etiqueta. Comenzaremos con article > header time, que nos permitirá modificar la sección de la fecha con un cuadro, como en un blog comercial. El código quedaría así:

maquetando la fecha en article

Una vez hecho esto, es momento de seguir ajustando la cabecera de la sección article, específicamente, la etiqueta span, modificando el estilo de fuentes, colocando el texto en mayúsculas y eliminando el estilo. En la siguiente figura, veremos como queda el código.

maquetando la cabecera de article

Cambiamos el estilo del título de la cabecera, adicionando la sección article > header h1, de la siguiente manera:

dando formato al título de article

Modificamos los enlaces de los títulos de article así:

dando formato al título de article

Con la base article lista, vamos a dar formato a las secciones dentro de article, en nuestro caso section. Para ello, modificaremos el tamaño de los títulos h1 de la siguiente manera:

dando formato al título de section

Para culminar con el estilo de article, vamos a colocar todos los párrafos de esta etiqueta con un retorno de carro y debajo de los títulos, o de otro párrafo con el atributo both, como veremos a continuación:

dando formato a los párrafos

Una vez que tengamos lista la parte principal del sitio web, es momento de darle forma a la barra lateral (aside). Para hacerlo, crearemos una sección aside dentro de la hoja de estilo, alineando la barra a la izquierda y adicionándole margen y color de fondo, como veremos en la siguiente figura:

dando formato a la barra lateral

Por último, vamos a colocar el pie de página. Para ello, ingresaremos el siguiente código:

dando formato al pie de pagina

Podemos notar que no es necesario utilizar la etiqueta div, aunque podemos incluirla si deseamos. También, aprendimos a ingresar estilos a etiquetas embebidas utilizando el conector “>”, lo que facilita enormemente la maquetación en CSS3, sólo resta practicar bastante los conceptos vistos, y explotar toda nuestra creatividad para crear sitios fenomenales.

En la próxima lección, veremos cómo enlazar entre páginas internas de nuestro sitio.