En esta ocasion te guiare en el proceso de crear una web desde 0.
La web sera sencilla, con partes como cabezera,pie,contenido, y menu.
Es posible que ya sepas que toda web se compone por:
Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> <title>TITULO</title> </head>
<body>
<!--CONTENIDO->
</body>
</html>
Esta es la estructura base de toda web, si ya la conocias
talvez se te hizo raro el codigo en color rojo.
Este es el DOCTYPE, y es necesario agregarlo para que nuestra web sea vista igual por todos los navegadores (PWG ya lo trae incluido)
Mas informacion aqui: Cristalab
El codigo en verde sera el lugar donde pondremos nuestro contenido.
Todo el codigo que explique adelante sera puesto ahi, amenos que aclare lo contrario.
Empezare por colocar una capa central (DIV), sera la que contenga a toda nuestra pagina:
Cita: <div id="madre" >
</div>
Observa el codigo en color rojo, le asigne ala capa una identidad "madre", de esta manera podre aplicarle estilos, llamandola por su ID.
Anteriormente dije que nuestra web tendra cabezera,pie,contenido, y menu, entonces dentro de la capa "madre" agregaremos
mas capas.
Cita: <div id="madre">
<div id=" cabezera"> CABEZERA</div>
<div id=" cuerpo"> CUERPO</div>
<div id=" menu"> MENU</div>
<div id=" pie"> PIE</div>
</div>
Atencion:Codigo en Rojo es la identidad de las capas, para poder darle estilos mas adelante. Codigo en azul es el texto que se mostrara
Observa el orden en el que las coloque, primero la cabezera, y al final el pie.
La vista previa de esto seria asi:
O Dios !, que feo se ve !
es por que aun no le hemos agregado estiloss 
Los estilos son agregados dentro de <style> </style>, el cual debe ir dentro de <head> </head>
Observa que en la imagen, donde esta la parte del estilo coloque asi: <style type="text/css">
De esta manera le desimos al navegador que nuestros estilos seran CSS, es necesario agregar esa parte, aunque aveces quitarlo no provoque diferencias.
Ahora si lo divertido, dar estilo ala web !
empezaremos por la capa madre, de la siguiente manera nos referimos a ella:
Cita: <style type="text/css">
#IDENTIDAD { PROPIEDADES ; }
</style>
Mira que para referirme a una capa con id, es necesario colocar el caracter # delante de ella, despues se abren dos llaves { } y dentro de las llaves ira todo nuestro codigo, que seran las propiedades a editar, y ademas, cada propiedad termina en PUNTO Y COMA.
Sabiendo esto, ahora si le dare estilo a la capa madre, quiero que tenga un ancho de 800px, y ademas que aparezca centrada.
Cita: <style type="text/css">
#madre {
width:800px;
margin:auto;
}
</style>
El ancho se lo dimos con la propiedad width, y logramos que se centre con la propiedad margin
Al momento de poner un margin:auto; dejamos que el navegador calcule el espacio, y centre la web AUTOMATICAMENTE.
Atencion: Tambien pudimos haber utilizado margin-left:auto y margin-right:auto para referirnos especialmente a los lados de la web
En este momento ya tenemos una web centrada y con un ancho de 800px, ahora le daremos estilo alas capas interiores
empezare por la cabezera.
Editando Cabezera
Quiero que mi cabezera tenga una imagen de fondo, que seria mi logo, y ademas le dare una altura de 150px,
Cita: #cabezera {
height:150px;
background-image:url(http://img.webme.com/pic/a/adan-2994/cabezera.png);
}
mmm.... la imagen no aparece centrada, y ademas se repite ! 
Arreglemos eso, vamos hacer que la imagen aparezca centrada y ademas sin repetirse:
Cita: #cabezera {
height:150px;
background-image:url(http://img.webme.com/pic/a/adan-2994/cabezera.png);
background-position:center;
background-repeat:no-repeat;
}
Con la propiedad background-position logre centrar mi imagen, ami me funciono bien por las medidas de mi imagen
si tu tienes problemas tambien puedes hacer lo siguiente
Cita: background-position:IZQUIERDA ARRIBA;
En este caso queremos editar la distancia que tendra de separacion nuestra imagen de la izquierda, y ademas de arriba, como yo puse solo center, aplico un 50% y 50 %.
Cita: background-position:50% 50%;
La propiedad background-repeat permite editar la manera en que se repetira la imagen de fondo, como yo quiero que no se repita, coloco el valor no-repeat;
Otra opcion para la imagen de fondo seria colocarla dentro de :
<div id="cabezera"><center> <img src="TUIMAGEN"></center></div>
En este momento ya tenemos nuestra web con cabezera !, la vista previa quedaria asi:
Pon atencion en la imagen, en la parte que esta resaltada en amarillo, ese es el texto que puse al inicio ,recuerdas?
Cita: <div id="cabezera">CABEZERA</div>
Pues ami ya no me sirve, asi que lo quitare (la parte en rojo)
Aunque la cabazera ya se ve bien, quiero que tenga una separacion de abajo, de unos 50px, para lograr esto editare su margen inferior (margin-bottom)
Cita: #cabezera {
height:150px;
background-image:url(http://img.webme.com/pic/a/adan-2994/cabezera.png);
background-position:center;
background-repeat:no-repeat;
margin-bottom:50px;
}
con esto logramos que aparezca separada de el contenido y el menu.
Ahora editaremos el Contenido !!
Editando Contenido (capa cuerpo)
Quiero que el cuerpo, que es la parte donde agregaremos e lcontenido de nuestra web, tenga un ancho de 540px, un color de fondo gris(para distinguirlo)
y ademas estara FLOTANDO ala izquierda.
Atencion:Quiero que el cuerpo y el menu esten juntos,uno al lado de otro, para lograr eso hare que floten uno ala izquierda y el otro ala derecha
Cita: #cuerpo {
width:540px;
background-color: #CCC;
float:left;
}
Observa la propiedad float, le di un valor left para que flote ala izquierda.
El color de fondo es #CCC, que es igual a gris en codigo Hexadecimal.
La vista previa (con texto e imagenes) se veria asi:
En la vista previa se puede apreciar, ala derecha de la capa cuerpo (color gris) que aparecen el menu y el pie
Esto es causado por el float, mas adelante lo solucionaremos.
Otro detalle que se ve, es que el texto e imagenes de la capa cuerpo, aparecen pegados alos bordes !
Esto se soluciona con un padding, relleno en español.
Cita: #cuerpo {
width:540px;
background-color:#CCC;
float:left;
padding:36px 12px;
}
El codigo en rojo es el padding , debido a que le di 2 valores estos se aplicaran asi: arriba y abajo (36px) y alos lados (12px)
Vista previa (solo de la capa cuerpo)
Ya separamos el contenido de los bordes, y si aun quieres seguir editandolo puedes modificar los valores de padding
En este momento ya editamos el cuerpo y la cabezera, ahora seguiremos con el menu.
Editando Menu
Ya dije que quiero que el menu aparezca ala derecha del cuerpo, ademas quiero darle un ancho de 200px, y un color de fondo tambien gris, ademas de un padding de 12px en todos sus lados (arriba,derecha,abajo,izquierda).
Cita: #menu {
width:200px;
background-color:#CCC;
float:right;
padding:12px;
}
El codigo en rojo es para que flote ala derecha.
La vista previa seria asi:
Observa en la imagen previa, que el PIE aparece muy mal acomodado, esto lo solucionaremos mas adelante.
Pon atencion a esto:
Nuestra capa madre tiene un ancho de 800px, la capa cuerpo tiene un ancho de 540px pero ademas tiene un padding de 12px (en los dos lados, osea 24px total)
esto significa que su ancho real (conocido como offsetWidth) es la suma de su ancho+paddingLateral (540+24=564px)
Ahora si a los 800px de la capa madre le restamos 564 resulta 236px.
Y esto que ???
Pues si nuestra capa menu hubiera tenido un ancho mayor a ese espacio de 236px (incluyendo paddingLateral), no hubiera cabido, y por lo tanto tendria que recorrerse hacia abajo.
Imagen de ejemplo (con zoom bajo):
Esta explicacion te servira en tus proximos proyectos.
Ya tenemos nuestra capa menu , pero hace falta colocarle el menu (me refiero a el menu de navegacion)
El menu de la pagina sera una lista UL (<ul> </ul>)
Entonces dentro de la capa menu agregaremos esto:
Cita:
<ul id=" menuUl">
<li>Inicio</li>
<li>Entretenimiento</li>
<li>Historia de la web</li>
<li>Libro de visitas</i>
<li>Contacto</li>
<li>Otra cosa</li>
<li>Otra cosa 2</li>
</ul>
Observa el codigo en color rojo, a la lista UL le dimos una identidad menuUl para poder editarla mas adelante con CSS
Imagen Previa:
Por el momento nuestro menu de navegacion no nos dirige a ninguna parte, por que no tiene enlaces.
Para agregarselos solo coloca lo siguiente:
Cita: <li><a href="#top">Entretenimiento</a></li>
Editando menu de navegacion (identidad menuUl)
En la anterior vista previa podemos ver unas bolitas negras al lado de nuestro menu, vamos a quitarselos con CSS.
Cita: #menuUl {
list-style:none;
}
Ya se los quite ! , el codigo rojo quita o edita esta bolita negra, tambien puedes usar imagenes distintas.
Usare otra imagen para ponerla al lado izquierdo de cada enlace del menu, al poner el mouse sobre ellos la imagen cambiara por otra.
 
Pagina con muchos iconos gratis: http://www.iconosgratis.us/coleccion-iconos-16x16/
Pero primero debemos saber como editar los enlaces del menu.
Sabemos que nuestro enlace esta dentro de un LI (<li></li>) el cual esta dentro de un UL (<ul></ul>) entonces para editarlos haremos lo siguiente:
En el codigo Azul estamos indicando que queremos editar el UL, PERO como delante colocamos LI (color marron) desimos que queremos editar todos los LI que esten dentro del UL.
PERO como delante aun existe un a estamos diciendo que queremos editar todos los a (enlaces) que esten dentro de un LI (elemento) que esta dentro de un UL (lista desordenada).
Sabiendo esto , este seria el codigo:
Cita: #menuUl li a {
background-image:url(http://img.webme.com/pic/a/adan-2994/flechablanca.png);
}
El resultado seria este:
Que feo se ve !!! 
En primer lugar la imagen se repite, y ademas aparece el texto encima de la imagen, y lo que yo quiero es que el texto aparezca separado.
Solucion:
Cita: #menuUl li a {
background-image:url(http://img.webme.com/pic/a/adan-2994/flechablanca.png);
background-repeat:no-repeat;
padding-left:20px;
}
En el codigo rojo le estoy diciendo que no se repita (background-repeat:none) ademas que quiero que tenga un padding de 20px ala izquierda (padding-left:20px)
Resultado:
Quedo como queria, ahora quiero que al tener el mouse encima la imagen cambie por esta
Eso lo logro de la siguiente manera.
Cita: #menuUl li a:hover {
background-image:url(http://img.webme.com/pic/a/adan-2994/flechaazul.png);
}
El codigo en rojo , es para indicarle al navegador que me cambie la imagen de fondo (por la que especifique en codigo azul) en el momento que el raton este encima (hover).
Entonces el codigo completo para la imagen del menu de navegacion quedaria asi:
Cita: #menuUl li a {
background-image:url(http://img.webme.com/pic/a/adan-2994/flechablanca.png);
background-repeat:no-repeat;
padding-left:20px;
}
#menuUl li a:hover {
background-image:url(http://img.webme.com/pic/a/adan-2994/flechaazul.png);
}
Resultado:
Y ya para terminar con el menu de navegacion, quiero que los enlaces esten separados de abajo, unos 10px.
Cita: #menuUl li{
margin-bottom:10px;
}
Observa que estoy editando todos los LI dentro de menuUl.
Recuerda que el margin-bottom crea una separacion hacia abajo, tambien permite valores negativos, permitiendo acercar en vez de alejar.
Ahora pasemos a editar el PIE
Editando pie (identidad pie)
en las imagenes anteriores (vistas previas) se vio que el pie estaba mal acomodado, esto es causado por que estaba colocado despues de elementos flotantes.
Para poder solucionar estoo se utiliza una propiedad del CSS llamada CLEAR, la cual permite que nuestro pie ignore los espacios de flotacion, y siga colocandose abajo.
Cita:
#pie {
clear:both;
text-align:center;
padding-top:80px;
font-size:10px;
}
Observa que ala propiedad clear le di el valor both (ambos en español) mas informacion aqui http://www.ignside.net/man/css/float.php
La propiedad text-align:center la utilizo para centrar el texto.
Y el padding-top:80px; para agregar un relleno arriba, esto es para simular el margin-top, pero debido a que se trata de elementos flotantes este no nos servira (a menos que tu capa pie esta fuera de la capa madre, para eso tendrias que alinearla tambien al centro y ya podrias darle un margin-top)
El font-size:10px es para el tamaño de la fuente, la mayoria de los pies de pagina tienen una letra mas pequeña, por eso agregue font-size:10px; tu puedes editarlo a tu gusto tambien.
bueno pues el pie fue facil de editar, aun sele pueden agregar mas cosas claro.
Ahora editare el tipo de letra y tamaño de toda la pagina asi como enlaces para que no esten subrayados.
Cita: body {
font-family:Verdana,tahoma,Arial;
background-color: #0a2d5c;
font-size:14px;
}
a {
color:blue;
text-decoration:none;
}
a:hover {
color:red;
}
Mira el codigo en rojo, la primera propiedad en el Body que es font-family se utiliza para especificar que fuente quieres, siempre utiliza varias, separadas por coma, si el visitante no tiene instalada en su PC la primera fuente, entonces el navegador asignara la siguiente.
Luego edito el tamaño de letra de el body (pagina completa) con la propiedad font-size la cual ya vimos.
Ahora observa el codigo en color rojo en los elementos a (enlaces). Les agregue un color de letra azul con la propieedad color.
Tambien quite el subrayado que tienen por defecto, gracias ala propiedad text-decoration:none;
cuando el mouse esta posicionado encima de ellos cambiaran su color de letra por rojo.
La pagina ya esta terminada, o al menos lo esencial.
Todo depende siempre de la creatividad que tu tengas al diseñar, te dejare una imagen vista previa de como arregle la pagina despues.
Puedes descargar el archivo HTML: Fileserve
.
.
. ______________ COLECCION DE EMOTIKONOS PARA TU WEB PWG
Ultima edición por adan-2994 el Sab Sep 10, 2011 3:10 am; editado 1 vez
|
