Académique Documents
Professionnel Documents
Culture Documents
En el Laboratorio vamos a realizar un ejemplo 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 un archivo de estilos .css. El ejemplo lo realizaremos paso a
paso, partiendo de una imagen diseñada previamente con un programa de edición gráfica como Photoshop.
Imágenes de partida
Podemos ver la imagen que hemos creado y que vamos a maquetar lo más parecido posible usando CSS.
Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con los que
INTRODUCCION AL DESARROLLO WEB
trabajar.
De esta imagen hemos extraído algunos gráficos, que utilizaremos a la hora de maquetar el diseño y están
en el archivo imageneslabmaq1.zip que se adjunta al presente
Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos explicar las
etiquetas y estilos que hemos utilizado para cada parte de la página.
Como primer paso creamos un página html con el nombre index1.htm y otra página de estilos con el
nombre estilo1.css
Estilos css
INTRODUCCION AL DESARROLLO WEB
INTRODUCCION AL DESARROLLO WEB
Definiendo en la hoja de estilos, en la declaración de estilos CSS, para el cuerpo de la página. También se
definen unos márgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la
página aparezca en el centro, el centrado y otros navegadores se realiza en la capa principal con el atributo
"margin" definido como "auto").
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.
INTRODUCCION AL DESARROLLO WEB
La hoja de estilos css para cada elemento de la página queda de la siguiente manera:
INTRODUCCION AL DESARROLLO WEB
INTRODUCCION AL DESARROLLO WEB
INTRODUCCION AL DESARROLLO WEB
INTRODUCCION AL DESARROLLO WEB
La capa contenedor
Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta capa se
colocan todos los elementos que va a tener la página.
La cabecera de la página
La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es lo más
cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.