Team-AyudaMaster | Soporte para tu paginawebgratis - Aprende a crear una plantilla css avanzada

Aprende a crear una plantilla css avanzada

Primero que todo CSS no es algo facil de definir y usar, se debe aprender todas sus Extensiones y funciones, la parte mas importante de un Diseño CSS es la estructura por supuesto, esta puede estar formado por varias etiquetas, una estructura sencilla ceria con Llaves {}

Por ejemplo:

Código:

body {
background: #000000 url(Imagen.png);
font: normal 12px Verdana;
color: #345;
padding-bottom: 1em;
}

Otra forma seria usando signos de Numeros #

Por ejemplo:

Código:

#navigation {
background: #739CBA url(Imagen.png) no-repeat left bottom;
padding: 82px 10px 0;
}

Para Conformar partes de una estructura se deben tener en cuenta ciertos permisos, estos podrian ser:

Código:

No-repeat

Repeat

Repeat left – top

Que por defecto permitiran repetir o no repetir los elementos CSS.

Hasta ahora vamos bien, otra parte a explicar seria el Contenido o contenedor.

El problema con este es que si no lo estructuramos correptamente podria colocarse el Texto al final de la Plantilla y no en el centro, lo que les ha pasado a muchos.

Un ejemplo de contenido ceria:

Código:

#content {
width: 545px;
float:left;
}
#content a {
}
#content a:hover {
}

Podemos elegir el ancho del contenedor modificando 545px por ejemplo

El header, algo importante tambien, es lo que indica de que se trata tu web, por ejeplo juegos, ayuda, ocio, etc.

Código:

#header-wrapper {
background: #C5DEF0 url(HEADER.png) repeat-x left top;
padding: 6px 18px;
}

Luego sigue el Separador que es el que se encarga de Separar el Header del menu:

Código:

#top_separator {
background: url(SEPARADOR ENTRE HEADER Y MENU.png) repeat-x left top;
display: block;
font-size: 0;
height: 3px;
line-height: 0;
}

Mas tarde toca el Menu, alli podemos poner una Imagen grande que cera el fondo del Menu:

Código:

#navigation {
background: #739CBA url(IMAGEN DONDE ESTARA EL MENU.png) no-repeat left bottom;
padding: 82px 10px 0;
}

Y por ultimo factor estructurador ceria el Footer:

Código:

#footer {
background: #A3B5C1 url(Imagen.png) no-repeat left top;
padding: 8px 12px 2px;
font-size: 0.85em;
color: #FAFCFF;
text-align:center;
}

En CSS podemos agregar factores o etiquetas extras, como por ejemplo las Barras laterales de menu o mejor conocido como Sidebar, un factor muy utilizado hoy en dia en Muchas plantillas CSS.

Un ejemplo de un Sidebar completo ceria:

Código:

#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;
}

Otra cosa que me gustaria exoplicarles es la Forma de ocultar elementos por defecto en PWG, esto se logra agregando {display: none;} A los complementos por defecto, un ejemplo muy sencillo seria asi:

Código:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

Un ejemplo Avanzado, que es lo que estoy explicando seria haci:

Código:

Muy bien, aora que conocemos los Elementos Integrados en una Plantilla CSS, les mostrare como quedaria el Codigo completo de Estructuración:

Cita:

#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

* {
margin: 0;
padding: 0;
}

body {
background: #404040 url(FONDO.png);
font: normal 13px Verdana;
color: #345;
padding-bottom: 1em;
}

a {
color: #0066AA;
}

a:hover {
color: #003366;
}

p {
padding: 0.1em 0 0.8em;
}

h1 {
font: normal 1.8em Georgia,Tahoma,sans-serif;
}

h2 {
font: normal 1.5em Georgia,sans-serif;
}

h3 {
font: bold 1em Tahoma,sans-serif;
}

html {
height: 100%;
padding-bottom: 1px;
}

ul,ol {
margin: 0 0 1em 1.6em;
}
ul ul, ol ol {
margin: 0.3em 0 0.3em 1em;
}
img {
border: none;
}

img.bordered {
background: #FFF;
padding: 5px;
border: 1px solid #DDD;
}

img.left {
margin-right: 1em;
}

img.right {
margin-left: 1em;
}

small,.small {
font-size: 0.8em;
}

big,.big {
font-size: 1.2em;
}

#layout_wrapper {
margin: 10px auto 0;
width: 780px;
}

#layout_container {
background: #FFF;
padding: 0 5px;
}

#layout_edgetop, #layout_edgebottom {
background: url(BARRA SOBRE HEADER) no-repeat left top;
display: block;
height: 10px;
font-size: 0;
line-height: 0;
}

#layout_edgebottom {
background-position: left bottom;
}

/* Seachform */
table.search {
width: 100%;
border-collapse: collapse;
}
.search td {
vertical-align: center;
}
#main-wrapper {
overflow:hidden;
}
.clear {
clear:both;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}

/*-- (Cabecera) --*/
#header-wrapper {
background: #C5DEF0 url(HEADER.png) repeat-x left top;
padding: 6px 18px;
}
#header-wrapper h1 {
font: normal 2.4em sans-serif;
letter-spacing: -1px;
color: #507A9A;
float:left;
}
#header-wrapper h1 a {
color: #507A9A;
text-decoration: none;
}
#header-wrapper h1 a:hover {
color: #305A7A
}
#header-wrapper p {
padding: 1.4em 0 0;
font: normal 1.1em sans-serif;
color: #667799;
float:right;
}

#top_separator {
background: url(SEPARADOR ENTRE HEADER Y MENU.png) repeat-x left top;
display: block;
font-size: 0;
height: 3px;
line-height: 0;
}

/*-- (Menu) --*/
#navigation {
background: #739CBA url(IMAGEN DONDE ESTARA EL MENU.png) no-repeat left bottom;
padding: 82px 10px 0;
}
/* Tabs */
#tabs ul {
margin: 0;
padding: 0;
}
#tabs li {
display:inline;
list-style:none;
}
#tabs a {
background: url(MENU HOVER.png) no-repeat left top;
float: left;
font: bold 0.9em sans-serif;
margin-right: 3px;
padding-left: 4px;
text-decoration: none;
}
#tabs a span {
float: left;
display: block;
background: url(MENU AHOVER.png) no-repeat right top;
padding: 5px 10px 5px 6px;
color: #608AAA;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabs a span {float: none;}
/* End IE5-Mac hack */
#tabs a:hover span {color: #608AAA;}
#tabs a:hover {background-position: 0% -42px;}
#tabs a:hover span {background-position:100% -42px;}
#tabs li.current_page_item a {color: #47A; background-position: 0% -42px;}
#tabs li.current_page_item a span {background-position:100% -42px;}

/*-- (Contenedor) --*/
.h5 {
height:5px;
}

/* Contenido */
#content {
width: 545px;
float:left;
}
#content a {
}
#content a:hover {
}

.date-header {
color: #999999;
padding-top: 1px;
font-size: 0.85em;
float:right;
}
.post-footer, p.comment-footer {
padding: 8px 10px 6px;
background: #F5F5F5;
color: #666;
border-top: 1px solid #E5E5E5;
font-size: 0.8em;
}
.post-footer a{
color: #567;
}
.post-footer a:hover{
color: #002;
}
.post-footer .comment-link {
background: none no-repeat left center;
padding-left: 18px;
float:right;
}
.post_bottom {
background: url(BARRA ABAJO DE FOOTER) no-repeat left top;
display: block;
height: 5px;
font-size: 0;
line-height: 0;
}
.feed-links {display:none;}
.blog-pager {margin:10px 0; font-size:0.8em;}

/* Sidebar */

#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(BARRA SIDEBAR SUPERIOR.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 DE CONTENIDO SIDEBAR.png) repeat-x left top;
padding: 8px 10px 1px;
font-size: 0.9em;
}
#sidebar .widget {
padding-bottom: 5px;
background: url(BARRA SIDEBAR INFERIOR.png) no-repeat left bottom;
margin-bottom:5px;
}

/*-- Footer --*/

#footer {
background: #A3B5C1 url(IMAGEN FOOTER.png) no-repeat left top;
padding: 8px 12px 2px;
font-size: 0.85em;
color: #FAFCFF;
text-align:center;
}

#footer {
color: #C8DBE8;
}

#footer a {
color: #D3E5F1;
text-decoration: none;
}

#footer a:hover {
color: #FFE;
text-decoration: underline;
}

.left {
float: left;
}

.right {
float: right;
}

.clear,.clearer {
clear: both;
}

.clearer,.spacer {
display: block;
font-size: 0;
line-height: 0;
}

Muy bien, ahora viene lo mas facil, los DIV y elementos para colocar Links y Contenidos en Sidebar y Footer, es lo que toca POR ENCIAMA Y DEBAJO DE LA PAGINA:

Primero ira el Codigo para centrar la Plantilla:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Luego sigue modificar los Div:

Cita:

<div class='navbar section' id='navbar'>
<div class='widget Navbar' id='Navbar1'></div>
<div id='layout_wrapper'>
<div id='layout_edgetop'></div>
<div id='layout_container'>


<div id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'><div class='titlewrapper'>



<h1 class='title'>Versión 2009</h1>



</div>
<div class='descriptionwrapper'>
<p class='description'><span>Mi web site</span></p>
</div>
</div>
</div></div>
<div class='clear'></div>
</div>
<div id='top_separator'></div>
<div id='navigation'>
<div id='tabs'>
<ul>
<li class='current_page_item'>



<a href=' URL '><span>Inicio</span></a></li>
<li><a href='URL'><span>Noticias</span></a></li>
<li><a href='URL'><span>Videos</span></a></li>
<li><a href='URL'><span>Contacto</span></a></li>
</ul>



<div class='clear'></div>
</div>
</div>
<div class='spacer h5'></div>
<div id='content-wrapper'>

Modificar lo que esta de color Rojo, si quieres agregar mas pestañas de menú solo agrega otro: <li><a href='URL'><span>Contacto</span></a></li>

Y por ultimo, modificar el Contenido de la Sidebar y Footer:

Cita:

<div id='sidebar'>
<div class='widget' id='search'>

<h2>Buscar</h2>
<div class='widget-content'>
<form action='buscar.htm' id='searchform' method='get'>
<div>

<table class='search'>
<tbody><tr>
<td><input id='s' name='q' type='text' value=''/></td>
<td style='padding-left: 10px;'><input src='http://pixelea.com/s/c1b484ad29.gif' type='image'/></td>
</tr>
</tbody></table>
</div></form>
</div></div>
<div class='sidebar section' id='sidebar'><div class='widget Feed' id='Feed1'>


<h2>Box de contenido 1</h2>
<div class='widget-content'>

CONTENIDO SIDEBAR



</div></div>
<div class='widget BlogArchive'>


<h2>Box de contenido 2</h2>
<div class='widget-content'>

CONTENIDO SIDEBAR



<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
</div></div>
<span class='widget-item-control'></div>
</div></div></div>

<div class='clear'></div></div>

<div id='footer'>
<p class='links'> Copyright © 2009 <a href=' http://www.miweb.es.tl '>Tuweb.es.tl</a> |
| Diseño creado por: <a href=' http://www.autor.com '>Autor</a><a href=' URL '>Site Map</a>
</div>
</div>
<div id='layout_edgebottom'></div>
</div>

Cuando se usan caracteres en CSS es para llamar a los siguientes:

#logo { -- } para llamar a un DIV ID ejemplo: <div id="logo">
.logo { -- } para llamar a un CLASS ejemplo: <span class="logo">
etiqueta { -- } para llamar a una ETIQUETA ej: <table> </table>

Recuerden que pueden subir sus Imagenes a:

http://xooimage.com [Ver Tutorial]

http://subirimagenes.com

http://imageshack.us

Espero que les guste el Tutorial!

Salu2!
El Equipo de Team-AyudaMaster.