webs amigas
[u][size=18][b]Como empezar.[/b][/size][/u]
Bien antes de crear un diseño, debes decidir de que va hacer tu web, en el ejemplo que os voy a poner va hacer una web de perros, lo primero que vamos a hacer es comprender unas etiquetas fundamentales que he encontrado en el foro de PWG publicadas por "team-ayudamaster".
[b]
PD: todavia no metais codigos en el diseño de vuestra web.[/b]
[b]1.1 El codigo body:[/b]
[code]body {
background: #000000 url(Imagen.png);
font: normal 12px Verdana;
color: #345;
padding-bottom: 1em;
}[/code]
En este codigo podemos poner el fondo de nuestra web, puede ser en colores hexadecimales o una imagen de fondo. Tambien se elige el tipo de font, se puede cambiar por otra, modificar el tamaño y ponerle color.
He modificado mi web y el primer codigo es el siguiente:
[code]body {
background: url(http://i50.tinypic.com/2642s09.jpg);
font: normal 13px Verdana;
color: #000000;
padding-bottom: 1em;
}[/code]
Como veis he puesto una imagen de fondo y la fuente es de 13 px, verdana y de color negro (#000000).
[b]1.2 El contenido:[/b]
[code]#content {
width: 545px;
float:left;
}
#content a {
}
#content a:hover {
}[/code]
En el codigo dice que el contenido mide de ancho 545px y empieza por la izquierda.
[b]1.3 header:[/b]
[code]#header-wrapper {
background: #C5DEF0 url(HEADER.png) repeat-x left top;
padding: 6px 18px;
}[/code]
Aqui tambien hay que sustituir, por lo que podemos poner un color o una imagen. Aconsejamos poner una imagen y si no sabes diseñar, entra al foro de PWG y has un pedido en cualquier taller de diseño. Ahora vemos "repeat-x left top" Lo dejamos asi.
Padding es recomendable ir aumentando el padding depende del tamaño del header. Si aumentas mucho se separa del menu, Pero si seguis nuestros pasos en el curso entendereis mejor para que sirve.
[b]1.4 menu:[/b]
[code]#navigation {
background: #739CBA url(IMAGEN DONDE ESTARA EL MENU.png) no-repeat left bottom;
padding: 82px 10px 0;
}[/code]
Tambien recomendamos una imagen de fondo para el menu, ya que se puede hacer un degradado y queda mas dinamico, si relizas el curso entero veras como ñadimos un menu con submenus para que la web agrupe mas contenidos en sus respectivas categorias. Ahora vemos "no-repeat left bottom" Que significa que la imagen no se repite, pero si haceis un menu con medida de alto: 26px y ancho:10px, recomendamos que pongan "repeat left bottom".
[b]1.5 Footer:[/b]
[code]#footer {
background: #A3B5C1 url(Imagen.png) no-repeat left top;
padding: 8px 12px 2px;
font-size: 0.85em;
color: #FAFCFF;
text-align:center;
}[/code]
Tambien recomendamos una imagen de fondo y aqui pasa lo mismo que en el menu. El padding de un elemento es la cantidad de espacio entre el borde y el contenido del elemento. Luego tenemos la font en 0.85em, tambien podeis poner 18px y el color blanco (#FFFFFF).
que seria:
[code]#footer {
background: #A3B5C1 url(Imagen.png) no-repeat left top;
padding: 8px 12px 2px;
font-size: 118px;
color: #FFFFFF;
text-align: center;
}[/code]
[b]
1.6 Sidebar:[/b]
[code]#sidebar {
float:right;
width: 220px;
}
#sidebar ul{
margin-left: 0;
border-bottom: 1px solid #E2ECF2;
}
#sidebar li{
list-style: none;
padding: 4px;
border-top: 1px solid #E2ECF2;
border-bottom: 1px solid #D0D8DE;
}
#sidebar li:first-child {
border-top: none;
}
#sidebar li a{
text-decoration: none;
}
#sidebar li a:hover{
text-decoration: underline;
}
#sidebar h2 {
background: #C6D2DB url(Imagen.png) no-repeat left top;
padding: 6px 10px 5px;
font-weight: bold;
font-size: 0.9em;
color: #505E69;
display:block;
}
#sidebar .widget-content {
background: #DAE3E9 url(Imagen.png) repeat-x left top;
padding: 8px 10px 1px;
font-size: 0.9em;
}
#sidebar .widget {
padding-bottom: 5px;
background: url(Imagen.png) no-repeat left bottom;
margin-bottom:5px;
}[/code]
El sidebar es un elemento importante, por lo que en otro tema explicaremos bien para que sirve.
[b]PD: de momento no hagas nada ya que no te saldra tu diseño. Espera al siguiente tema.[/b]
Mañana te lo envio.
