En primer lugar, debe realizar los preparativos necesarios para crear el sitio web. Cree la estructura de directorios deseada. Por ejemplo, podría tener el siguiente aspecto:
asesor fiscal
---imágenes
---css
Esta es una estructura de directorios típica. Las páginas HTML se colocan en el nivel principal. Los archivos CSS van en el directorio css, mientras que todas las imágenes se almacenan en el directorio images. Añade todas las imágenes que hayas recortado previamente de la maquetación al directorio images.
Configurar la estructura básica
Cree un nuevo archivo CSS en el directorio css. A continuación, intégrelo en su archivo HTML. (En mi ejemplo, el archivo HTML tendrá el nombre index.html ). A partir de ahora, este archivo será la pieza central de los siguientes tutoriales.
En primer lugar, inserta en index. html la estructura HTML básica con la que ya estás familiarizado.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tu asesor fiscal</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Asegúrate de incluir también el archivo de hoja de estilos. Y ahora estás listo para empezar.
El elemento exterior es un div contenedor.
<div class="main-container"> </div>
También puedes formatear este contenedor usando sintaxis CSS.
.main-container { width: 100%; float: left; }
El contenedor principal tiene una anchura del 100% y flota a la izquierda. Ventaja de la anchura fijada en el 100%: Puede, por ejemplo, insertar una imagen de fondo con un degradado de color. Este fondo se extendería por todo el ancho de la pantalla.
Creo dos elementos div más dentro del contenedor principal.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div> </div>
Estos elementos también están formateados. El área de contenido real tiene una anchura de 1000 píxeles. Especificando margin: 0px auto;, también se consigue un centrado horizontal del elemento.
.container { anchura: 1000px; margen: 0px auto; }
Continuamos con el formateo del elemento Pages.
.page { anchura: 1000px; float: izquierda; padding: 40px 0px 0px 0px; }
Este elemento es el área de contenido real de la página. Todos los demás elementos se colocan aquí. Este elemento también tiene una anchura fija de 1000 píxeles. La especificación de relleno define el espaciado interior. El espaciado interior superior se establece en 40 píxeles y los otros márgenes en 0 píxeles.
Ya hemos implementado la estructura (muy) aproximada del diseño.
Ahora es el momento de llenar esta estructura con contenido. La página se divide primero en tres líneas.
- Cabecera
- Contenido
- Pie de página
Para ello se definen otras tres áreas div.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Por supuesto, estas tres áreas también se formatean mediante CSS.
.top { background-color: #f6f7f7; width: 980px; float: left; padding: 0px 10px 10px 10px; } .content { width: 980px; float: left; padding-top: 8px; } .bottom { text-align: center; width: 1000px; height: 110px; float: left; }
Ahora podemos seguir diseñando las distintas áreas.
Empecemos por la cabecera de la página. Esta a su vez se compone de varios elementos:
- Logotipo/título
- menú superior
- imagen grande
Estos tres elementos se definen dentro de top.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Tu asesor fiscal</h1> </div> <div class="topmenu"> El menú superior </div> <div class="header-img"> </div> </div> </div>
Esta es la estructura básica de la cabecera de la página. Por supuesto, esto también se formatea usando CSS.
.header { width: 980px; float: left; } .header-top { width: 980px; height: 87px; float: left; } .topmenu { background-image: url(../images/menue.jpg); background-repeat: repeat-x; width: 978px; height: 37px; float: left; } .header-img { background-image: url(../images/header.jpg); background-repeat: no-repeat; background-position: left top; width: 980px; height: 213px; float: left; }
La sintaxis contiene dos "características especiales". En primer lugar, eche un vistazo al contenido de la clase topmenu. Aquí observará dos detalles sobre la imagen de fondo.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Se integra el gráfico de un píxel menue. jpg. Esto muestra el conocido gradiente de color en el menú superior. Especificando background-repeat: repeat-x;, el gráfico se repite horizontalmente hasta llenar completamente el elemento.
Dividir el área de contenido
Continuamos con el área de la página en la que se mostrará finalmente el contenido. Esto tiene lugar dentro del contenido del elemento div. Esta zona se divide en varios elementos. En primer lugar, hay una pequeña imagen teaser y un mensaje de bienvenida.
La sintaxis HTML correspondiente es la siguiente:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Bienvenidos a nuestra web</h1> <p>Aquí sigue un texto de bienvenida</p> </div> </div>
Esta zona también está dividida en dos partes. A la izquierda se muestra la imagen y a la derecha el mensaje de bienvenida. Aquí es decisiva la clase content-image.
.content-image { width: 739px; float: left; padding-bottom: 10px; margin-bottom: 10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #eee; }
Esta clase encierra la imagen y el saludo. Dentro de content-image hay dos áreas más.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Bienvenido</div>
Si sólo quieres mostrar una imagen grande u otra cosa en lugar de una división de este tipo, combina estas dos áreas en un solo elemento div. La sintaxis CSS para la variante de dos elementos tiene este aspecto:
.img { float: left; } .slogan { width: 560px; float: right; }El resultado debería verse así en el navegador:
Continuamos con otros tres elementos:
- un cuadro de texto izquierdo,
- un cuadro de texto derecho,
- el menú derecho.
La sintaxis HTML es la siguiente en este caso:
<div class="teaser"> <div class="left"> Contenedor para el texto de la izquierda </div> <div class="right"> Contenedor para el texto de la derecha </div> </div> </div> </div> <div class="content-right"> El menú de la derecha </div> </div>.
Y aquí de nuevo, por supuesto, la sintaxis CSS:
.teaser { width: 737px; height: 216px; float: left; border: solid 1px #eee; } .left { width: 330px; height: 180px; float: left; padding: 20px; } .right { width: 327px; height: 180px; float: left; padding: 20px; } .content-right { width: 210px; float: right; padding-right: 20px; margin-top: 20px; border: 1px solid #eee; }Al final de este tutorial, tenemos la estructura básica de nuestro sitio web.
Por supuesto, esta estructura básica todavía necesita ser llenada con el contenido apropiado. Esto se hará en el próximo tutorial.
