Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

8. La segunda página (IV)

8.4. Estilo de las cajas.

Color de fondo

Vamos a establecer un color de fondo distinto para cada una de las cajas o apartados en los que se va a dividir nuestra página. para ello abrimos el archivo general.css con el HTML-Kit y después de la última línea escribimos las siguientes:(texto en verde)

* { margin: 0px; padding: 0px auto; text-align: center }
body { background-color: white; font-family: arial; font-size: 1em; }

#cabecera  { background-color: #ccffff; }
#navegacion  { background-color: #ffff99; }
#menu  { background-color: #e2ffde; }
#contenidos  { background-color: #ffffff; }
#pie  { background-color: #ffd08f }

Los distintos selectores que hemos puesto hacen referencia a las etiquetas <div id=" ... "> que hay en el archivo plantilla.html. Se escriben con el signo # (llamado almohadilla, se escribe pulsando las teclas Alt Gr y 3 a la vez) seguido del nombre que les hemos dado.

El valor de los colores también los hemos escrito en otro formato: es el modelo RGB hexadecimal. Se escribe siempre en primer lugar el signo " # " , las dos primeras cifras (o letras) indican el color rojo, las dos siguientes el verde, y las dos últimas el azul. Las cifras están escritas en el sistema hexadecimal, es decir, que hay 16 cifras que son del 0 al 9 y las letras de la a a la f. Muchos programas de dibujo o de tratamiento de fotografías dan el nombre de los colores en este sistema. si quieres saber más sobre los metodos para definir los colores en CSS consulta la página Colores y medidas. del manual de CSS

Una vez copiadas las líneas en el archivo general.css lo guardamos y abrimos el archivo plantilla.html con el navegador para ver los cambios.

Tu página Web quedará así: Ver mi Web.

Sigue sin parecerse mucho a lo que pretendemos, pero por lo menos hemos puesto unos colores de fondo.

Formato de las cajas

Ahora vamos a seguir dando instrucciones CSS para dar forma a los distintos apartados.

Abre el archivo general.css con el HTML-Kit. Vamos a escribir algunas instrucciones más para dar forma a las cajas. Añadiremos las siguientes instrucciones (texto en verde):

* { margin: 0px auto; padding 0px ; text-align: center }
body  { background-color: #ffffff; font-family: arial; font-size: 1em; min-width: 800px; }

#cabecera { background-color: #ccffff; min-height: 65px; }
#navegacion { background-color: #ffff99; width: 100%; min-height: 65px; }
#menu { background-color: #e2ffde; width: 20%; border: 2px solid black;
        margin: 2% ; float: left; min-height: 150px ; }
#contenidos { background-color: #ffffff; width: 75%; float: left;  }
#pie { background-color: #ffd08f ; clear: both; min-height: 60px; }

Veamos cuales son las propiedades que hemos aplicado:

• min-heigh : Esta propiedad establece una altura mínima para la caja. como puedes ver la hemos aplicado en varias de ellas.
• width : Esta propiedad establece el ancho de la caja. Si queremos que dos cajas vayan en la misma línea su suma no debe sobrepasar el 100%. También hay que tener en cuenta que los márgenes y bordes entran dentro de esta cuenta, con lo que habrá también que dejarles sitio. Nosotros hemos dado al menú un valor de 20%, al contenido un 75%, y a los márgenes del menú un 2% por cada lado. lo cual hace un total del 99%. Queda un 1% para los bordes del menú que los hemos puesto en 2 pixeles por cada lado.
• float: ya vimos la propiedad float en pasos anteriores, aquí hace que se posicionen las cajas centrales una al lado de otra al tener sitio en la misma línea.
• border : Establecemos un borde en la caja del menú.
• margin : También dejamos ya marcado el margen de la caja menu.
• clear : Esta propiedad impide que la caja pie se solape con las anteriores. sus valores son left (izquierda) right (derecha) y both (ambos).

Una vez hayamos copiado el texto en su lugar correspondiente, guardamos el archivo general.css y abrimos el archivo plantilla.html para ver los cambios.

Tu página Web quedará así: Ver mi Web.

Parece que esto empieza a tomar forma, ahora tenemos que rellenar las distintas cajas con texto, enlaces, etc. pero eso lo haremos en las siguientes lecciones. Empezaremos pues por la cabecera:

Ir a la siguiente lección: La cabecera

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com