Como hacer una pagina web y ganar dinero
Creada para aprender lo que mas nesesitas porque la calidad es mejor que la cantidad.
Blog

Comenzando Maquetación CSS

Tags: maquetar, css, estilo, html, contenedor, general
publicado el 2010-06-03   leido 5315 leídas

A lo largo del manual de hacer una web paso a paso vimos los conceptos básicos para crear y poder flotar capas entre otras cosas, ahora vamos a tratar de poner en práctica lo que aprendimos para maquetar una pagina con la siguiente estructura:
  • Cabecera: acá puede ir un logo o el nombre de tu pagina web
  • Barra lateral: podemos poner un menu vertical con listas HTML
  • Contenido: donde irá el contenido de la web
  • Pie de pagina: podemos poner lo que necesitemos, desde el copyright hasta los enlaces recomendados
La estructura deberá quedar así:



comenzaremos maquetando el contenedor general.

Maquetar el contenedor general con CSS


La primer capa que tendremos que crear es un contenedor general al que le aplicaremos un ancho y alto fijo para todo el sitio Web.

Para este ejemplo lo haremos con estas medidas:
  • Ancho: 900 pixeles
  • Alto: 400 pixeles
Sabiendo esto podemos ponernos manos a la obra :)

A este DIV lo llamaremos "contenedor", y sería algo asi:
#contenedor {
       width: 900px;
       height: 400px;
}
Nota: en este ejemplo usaremos la hoja de estilo estilos.css que esta vinculada al archivo index.html.

Ahora comenzamos a armar las capas, por ahora solo tenemos que llamar a la capa "contenedor", así:

<html>
<head>
<title>Maquetando con estilos CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
        <div id="contenedor">

       </div>
</body>
</html>
Ya tenemos el contendor general, ahora maquetaremos la cabecera.

Te gustó?

¿Qué es la maquetación?

Maquetando cabecera y barra lateral

 
Información
Christian Valencia publicado porPor: Ero-Fierce

Suscribete
Recibe los ultimos articulos en tu email:


Ultimos Artículos
Como ponerle nieve a la pagina web
Qué es Composer y cómo instalarlo en Windows Linux y MAC
Hacer SEO en el 2016 - 2017
Habilitar sonido al pulsar las teclas Bloq Mayús, Bloq Num y Bloq Des
10 trucos viejos, seo que nunca te dijeron
15 Efectos carrusel como pagina de libro animado con ejemplos

Todos los tutoriales

Hacer una web paso a paso Php y MySQL Javascript
Posicionamiento Web SEO Cómo ganar dinero con tu web Herramientas y Programas Web
Maquetación con CSS Hosting y Dominios MySQL y Phpmyadmin
Ajax UML: Analisis y Diseño Programacion Orientada a Objetos
Java
 
Copyright © 2009 - pagina Web 2 - Todos los derechos Reservados