Vamos a realizar un ejercicio de maquetación de una página web utilizando únicamente hojas de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las definiciones del aspecto, que se guardarán en el archivo css3.css. El ejercicio lo realizaremos paso a paso, partiendo de una imagen diseñada previamente con un programa de edición gráfica, en este caso usaremos el gráfico del titular del Baúl de Linux.
Guarda esta imagen.- Haz clic derecho con el ratón sobre la imagen y elige la opción «Guardar imagen como…».
Primero vamos a cargar nuestra plantilla HTML que renombramos como «index.html» y creamos el archivo CSS que llamaremos «css3.css» y todo ello en una carpeta que llamaremos «maqueta«. Construiremos los dos archivos a la vez. Tambien guardaremos la imagen de la izquierda en la carpeta que acabamos de crear y que se llamará logo.png.
Como primer paso, entre las etiquetas <head> ... </head> del documento HTML, enlazaremos con una hoja de estilos externa.
El cuerpo de la página
En la declaración de estilos CSS, para el cuerpo de la página, hemos definido una imagen de fondo «fondo11.jpg» (guárdala en la misma carpeta para este ejemplo) que se repetirá por toda la página en un mosaico. También se definen unos márgenes y el alineamiento del texto, en este caso centrado.
Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros elementos, como el tipo de letra o el color del texto. Escribe en el archivo CSS «css3.css«.
La capa contenedor
Dentro de esta capa se colocan todos los elementos que va a tener la página. Esta capa la colocaremos entre las etiquetas <body> ... </body>.
Definimos la capa «contenedor» con un alineamiento del texto a la izquierda. También definimos una anchura de 700px, un color de fondo blanco y el margen, con el atributo «margin», lo definimos como «auto», para que Mozilla y otros navegadores centren la capa.
La cabecera de la página
La imagen «logo.png» la vamos a colocar en un único archivo gráfico. Es lo más cómodo para este diseño. Colocaremos la «cabecera» dentro del «contenedor«
Los atributos de estilo que definiremos para la cabecera con las mismas dimensiones de la capa, que las de la imagen. Este caso podríamos habernos ahorrado definir esos valores porque son los que se tomarían por defecto.
La barra de navegación
Creamos la capa utilizada que definirá la barra del «navegador» horizontal que hay debajo de la cabecera. La pondremos justo debajo de la «cabecera«.
Como podemos ver, simplemente hemos definido una serie de enlaces dentro de una capa. Hay que fijarse que además los enlaces tienen una clase, llamada «enlacenav«, que utilizaremos para darle un estilo específico a a estos enlaces, independiente del definido por defecto en la página.
Por lo que respecta a la capa, definiremos un color, unos márgenes internos (atributo padding), tanto para la parte de arriba de la capa como para la de abajo.
Para los estilos de los enlaces utilizamos una clase. Para definir los estilos de cada uno de los estados de los enlaces (visitados, activos, no visitados, etc), se utilizan las pseudo-clases visited, active, focus, link y hover. Simplemente definimos el color de los enlaces, el mismo para todas las pseudo-clases, menos para hover, que tiene un color distinto, hover es el estado del enlace cuando el puntero ratón está situado encima. En este caso, cuando el ratón esté encima, cambiará de color.
Si no os gusta la línea que hay debajo de cada enlace, añadimos la regla «text-decoration: none;«:
Resumen
Así debe quedar nuestros listados.
-
HTML
-
CSS
- Con lo aprendido en esta sección, haz algunos cambios de color, de logo, de fondo.
Linux, C/C++, Apuntes, etc... 
Debe estar conectado para enviar un comentario.