Entendido.

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

Logo

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++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 10

Visitas el mes pasado: 16

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




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:

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







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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