Inicio > Maquetando nuestra página web
Cursos relacionados

    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/comocrea/public_html/leccion.php on line 178
Sitios amigos

Maquetando nuestra página web

Recomendar lección:
Que no te asuste el titulo, no es más que organizar el contenido en bloques para lograr un diseño limpio y ordenado. Lo haremos con la ayuda de estilos CSS y trataremos de separar el diseño del contenido para rediseñar nuestra pagina web las veces que sea necesario sin modificar todas las paginas de nuestro sitio.



Diagramando nuestro diseño

El primer paso es diagramar la estructura, el esqueleto de nuestra pagina por así decirlo, nosotros lo haremos así:

  • Encabezado (donde irá el logo)

  • Barra lateral (acá pondremos los enlaces y demás chiches que queramos)

  • Contenido (texto, imágenes, videos, etc)

  • Pie de página (créditos, copyrigth)

teniendo la idea de la estructura podemos comenzar a escribir nuestro código.



Primero lo primero: creamos la hoja de estilos CSS

Lo primero que debemos hacer es crear la hoja de estilos “estilos.css” y guardarla en el directorio principal de nuestra página web. Ahora comenzaremos a crear el código para estructurar los bloques.

Primero definimos el color, tamaño y tipo de fuente que usará nuestra página web:

body{

color: black;

font-size: 12px;

font-family: verdana, sans-serif;

}

ahora deberemos crear el bloque contenedor donde asignaremos el ancho, los márgenes y demás atributos de nuestra página web:

#contenedor {

width: 760px;

border: 1px solid gray;

margin: 10px;

margin-left: auto;

margin-right: auto;

padding: 10px;

}

y ahora si comenzamos a crear los bloques de nuestro diagrama, primero el encabezado:

#encabezado {

padding: 5px;

margin-bottom: ;

background-color: rgb(213, 219, 225);

}

es el turno del bloque que contendrá lo mas importante, el contenido:

#contenido {

padding: 5px;

margin-left: ;

background-color: gray;

}

Lo que sigue es crear la barra lateral:

#barra-lateral {

float: left;

width: ;

margin: 0;

margin-right: ;

padding: 5px;

background-color: rgb(235, 235, 235);

}

y por último el pie de página:

#pie{

clear: both;

padding: 5px;

margin-top: ;

background-color: rgb(213, 219, 225);

}

Bien, con esto ya tenemos los bloques creados, ahora viene lo más importante, la maquetación.

Maquetando los bloques CSS

Ya tenemos nuestra hoja de estilos creada, ahora deberemos vincularla con nuestro código HTML, para eso insertamos la etiqueta <link> dentro de <head></head> con la ubicación de nuestro archivo css:

<link href="estilos.css" rel="stylesheet" type="text/css">

El orden en que debemos llamar a los bloques es importante para que quede como queremos, sería así:

<html>

<head>

<title>Maquetando con estilos CSS</title>

<link href="estilos.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="contenedor">

<div id="encabezado">ENCABEZADO</div>



<div id="barra-lateral">BARRA LATERAL</div>



<div id="contenido">CONTENIDO</div>

<div id="pie">PIE DE PÁGINA</div>

</div>

</body>

</html>

Pueden ver como queda este ejemplo haciendo clic acá.



Quinta Lección: Subir una página Web

Lecciones relacionadas