Se Trata de Un Diseño Sencillo

Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados
con los que trabajar.
Desarrollo de la página y la hoja de estilos
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, en la cabecera <head> del documento HTML, enlazaremos con una hoja
de estilos externa.
<head>
<title>La web del invierno</title>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>
El cuerpo de la página <body>
En la declaración de estilos CSS, para el cuerpo de la página, hemos definido una imagen de
fondo "fondo.gif", 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, para que el contenido de
la página aparezca en el centro (esto es necesario para Internet Explorer, el centrado en
Mozilla 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.
BODY {
background : #C0D9D9 url(images/fondo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}
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.
<div id="contenedor">
</div>
En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo

habíamos centrado el texto, para que Internet Explorer centre la capa contenedor y
deseamos que la alineación por defecto sea a 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.
#contenedor{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}
Por cierto, nos hemos dejado deliberadamente el borde de la capa, que habíamos definido en
el diseño original. Se podría haber definido el atributo "border", pero eso nos repercute
negativamente en la maquetación en Explorer. Veremos más adelante cómo colocarlo para
que se vea correctamente en todos los navegadores.
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.
<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web

del Invierno" border="0"></div>
Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a
continuación de <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer,
nos introducirá un pequeño márgen debajo de la imagen, que queremos evitar.
Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que
queremos que sean las mismas que las de la imagen. Aunque en este caso podríamos
habernos ahorrado definir esos valores porque son los que se tomarían por defecto.
#cabecera{
height : 106px;
width: 700px;
}
La barra de navegación
Vamos con la capa utilizada para definir la barra de navegación horizontal que hay debajo de
la cabecera.
<div id="navegador">
<a href="#" class="enlacenav">Portada</a> |
<a href="#" class="enlacenav">Invierno</a> |
<a href="#" class="enlacenav">Diciembre a marzo</a> |
<a href="#" class="enlacenav">La chimenea</a> |
<a href="#" class="enlacenav">Deportes de invierno</a> |
<a href="#" class="enlacenav">Contacto</a>
</div>
Como se puede 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, se define un color y una imagen de fondo, unos márgenes
internos (atributo padding) y un borde, tanto para la parte de arriba de la capa como para la
de abajo.
#navegador{
background : #F5F4C3 url(images/fondonav.gif);
padding : 3px 10px 5px 10px;
border-top : 1px solid #cccccc;
border-bottom : 1px solid #cccccc;
}
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.
A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:FOCUS,
A.enlacenav:LINK{
color: #494E6B;
}
A.enlacenav:HOVER{
color: #3F7DE3;
}
Realizamos la maquetación del área del cuerpo, donde se mostrará

el contenido de la página.
El cuerpo de la página
La parte de la página donde colocamos la información principal. Crearemos una capa

independiente para el cuerpo y colocaremos dentro el título, el texto y otros elementos que
queramos situar. Los elementos los introducimos con las etiquetas HTML que deberían tener
en una página básica. Luego, con CSS definiremos el estilo para el cuerpo y cada una de las
etiquetas que colocamos dentro.
<div id="cuerpo">
<h1>Título de la página</h1>
<p>
En este artículo vamos a conocer la maquetación de paginas utilizando Hojas de estilos
en cascada (CSS). Veremos cómo realizar este tipo de maquetación, junto con algunas
ventajas e inconvenientes. Para muchos será todavía un campo por explorar. Aunque no
vamos a entrar en grandes detalles, vamos a intentar dar a conocer la maquetación con
CSS para que cubrir la posible laguna por parte del lector. En capítulos sucesivos
ampliaremos la información y ofreceremos tutoriales más prácticos.
</p>
<p>
Como se ha podido aprender en el Manual de CSS, las hojas de estilo en cascada ayudan a
separar el contenido de la forma, es decir...
</p>
<div id="navabajo">
<a href="#">Volver</a> |
<a href="#">Portada</a> |
<a href="#">Mapa del sitio</a>
</div>
</div>
Vemos que el cuerpo tiene un título, varios párrafos y un div, incluido dentro del propio
cuerpo, con una segunda barra de enlaces que faciliten la navegación para las personas que
lleguen al final del scroll vertical de la página.
Los estilos del cuerpo definen la anchura, margen, margen interno, y un color de fondo.
Además, se define el atributo "float:left" para hacer que el cuerpo "flote" a la izquierda. El
resultado es que la capa del cuerpo se coloque a la izquierda y el contenido escrito a
continuación se sitúe, rodeando a esta capa, a la derecha. (El efecto es el mismo que si
asignamos en HTML el atributo align=left en una imagen)
Para posibilitar la disposición en dos columnas que hemos definido en el diseño original,
vamos a hacer que la capa de la izquerda -el cuerpo- "flote" a la izquierda. Posteriormente,
la capa de la derecha que aun no hemos colocado-el lateral-, haremos que "flote" a la
derecha.
#cuerpo{
width:480px;
margin-left: 8px;
padding: 12px 0px 10px 0px;
background-color : #ffffff;
float:left;
}
También se define un estilo para cada algunas de las etiquetas que hemos situado dentro del
cuerpo:
H1{
font-size: 12pt;
}
Los encabezados de nivel 1, que tengan tamaño de letra 12pt.
#navabajo{
font-weight : bold;
}
Para asignar una negrita en el div de la parte inferior del cuerpo, que tiene enlaces para
facilitar la navegación.

Se Trata de Un Diseño Sencillo

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Se Trata de Un Diseño Sencillo

Uploaded by

Copyright:

Available Formats

Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados

con los que trabajar.

Desarrollo de la página y la hoja de estilos

El cuerpo de la página <body>

En esta capa definimos el alineamiento del texto a la izquierda (porque en el cuerpo

La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico.

<div id="cabecera"><img src="images/cabecera.jpg" width="700" height="106" alt="La Web

Realizamos la maquetación del área del cuerpo, donde se mostrará

La parte de la página donde colocamos la información principal. Crearemos una capa

Los encabezados de nivel 1, que tengan tamaño de letra 12pt.

You might also like