[Tutorial] Crear plantillas web

Les enseñaré a crear CSS DESIGN e ICE BLUE:

Iceblue


Este es el codigo modifica lo que esta en rojo y pegalo por encima de la pagina

Código:

<style type="text/css">

<!--

body{background-image:url(URL del fondo);background-attachment: fixed}
td.edit_below_nav{visibility:hidden;}
td.edit_navi_headbg{background-image:url();background-color:#;}
td.edit_rechts_sbg{visibility:hidden;background-color:#;}
td.edit_rechts_cbg{background-image: url();background-color:#;}
td.edit_rb_footer{background-image:url();background-color:#;}
td.edit_rechts_bottom{background-image: url();background-color:#;}
td.edit_content_bottom:hover{background-image:url();background-color:#;}

--></style></font>

<style type="text/css">
<!--
td.edit_header_full{background-image:url(URL del cabezal);background-color:;height:250px;}
--></style>

<style type="text/css">


<!--
td.nav{background-image:url(URL del boton 1);}
td.nav:hover{background-image: url(URL del boton 2);}

--></style>

<style type="text/css">


<!--
td.shouty{background-image:url(URL del fondo del box);background-color:#;}
td.shouty2{background-image:url(URL del fondo del box 2);background-color:#;}
td.shouty3{background-image:url(URL del fondo del box 3);background-color:#;}
td.shouty4{background-image:url(URL del fondo del box 4);background-color:#;}
td.shouty5{background-image:url(URL del fondo del box 5);background-color:#;}

--></style>

<style type="text/css">


<!--
td.edit_content_top{background-image:url(URL de la barra superior de texto);background-color:;}
td.edit_content_bottom{background-image:url(URL de la barra inferior del texto);background-color:;}

--></style>

<style type="text/css">


<!--
td.edit_content{background-image:url(URL de pagina de texto);background-color:#;}

--></style>

<style type="text/css">


<!--
td.edit_rb_footer{background-image:url(URL dela barra separador del menu principal);background-color:;}

--></style>

<style type="text/css">


<!--
td.nav_heading{background-image:url(-);background-color:;}

--></style>


<style type="text/css">


<!--
td.sidebar_heading{background-image:url(URL del separador del box);}

--></style>

<style type="text/css">


<!--
td.nav_heading{background-image:url(URL del separador del box inferior);}

--></style>

El siguiente diseño es:

CSS DESIGN



Se divide en 3 partes solo modifica lo que se encuentra en rojo


1 parte

Peguen esto por encima de la pagina

Código:

<div id="Design">
<div id="Header_oben"></div> 

2 parte

Peguen esto por debajo de la pagina

Código:

<div id="Feld_oben"><b> </b></div></div>
<div id="Feld_oben_2"><b> </b></div></div>
<div id="Feld_unten-2"><b> </b></div></div>
<div id="Feld_rechts_3"><b> </b></div></div>
<div id="Feld_rechts_5"><b> </b></div></div>
<div id="Feld_rechts_6"><b> </b></div></div>
<div id="Feld_rechts_7"><b> </b></div></div>
<div id="content_2"><b> </b></div></div>
<div id="Nav_hinten"><b> </b></div></div>
<div id="top_1"><b> </b></div></div>
<div id="Anzeige">
Design-"Css"
</div></div>

3 parte

-Esta zona requiere de mucha modificacion asi que analicen bien el codigo

-Peguen el siguiente codigo en CSS-Code sin Style Tags

Código:

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
div{z-index: 2px;}
#Header_oben {
height: 170px;
width: 955px;
background:;
background-image:url(URL del encabezado);
color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
z-index: 2;
position:absolute;left:20px;top:26px;
}
#top_1 {
height: 25px;
width: 980px;
background:;
background-image:url(URL de la barra superior del texto);
color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
z-index: 2;
position:absolute;left:13px;top:141px;
}
body {background-image:url();
background-attachment: fixed;
background:#000000;
background-repeat: repeat-y;
background-position: center center;
z-index: -2;
font-size: 12px;
font-family: Arial;
}
a{color#000000; font-size: 12px; text-decoration: none;}
a:hover {color: #000000; font-size: 12px; text-decoration: none;}
a:link {color: #00013B; font-size: 12px; text-decoration: none;}
a:active {color: #000000; font-size: 12px; text-decoration: none;}
a:visited {color: #000000; font-size: 12px; text-decoration: none;}
li.nav_element a{
color:#000000;
display: block;
line-height: 25px;
margin: 5px;
padding-left: 10px
text-decoration: none;
text-align: center;
width: 180px;
height: 30px;
background-image:url(URL del boton 1);
background-color:}
li.nav_element a:hover{
color:#ffffff;
display: block;
line-height: 25px;
margin: 5px;
padding-left: 10px
text-decoration: none;
text-align: center;
width: 180px;
height: 30px;
background-image:url(URL del boton 2);
background-color:}
* { padding: 0; margin: 0; }
* { padding: 0; margin: 0; }
#Design {
width: 921px;
height: 1520;
}
#nav_container {height: 300px;
width: 200px;
background:;
background-image:url();
color:#ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
border: 1px solid #6E6E6E;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:780px;top:240px;}
#Nav_hinten{
width: 218px;
height: 430px;
background:;
background-image:url();
color: ;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;overflow:auto;
z-index: 1;
position:absolute;left:650px;top:183px;}
#content {
height: 726px;
width: 730px;
background:;
background-image:url();
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px;
display: inline;
float: left;
overflow:auto;
border: 1px solid #6E6E6E;
z-index: 4;
position:absolute;left:25px;top:239px;}
#content_2 {
height: 1000px;
width: 980px;
background:;
background-image:url(URL del fondo de texto y de la web);
color: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
display: inline;
float: left;
overflow:auto;
z-index: 0;
position:absolute;left:13px;top:27px;}
#sidebar_container {
height: 396px;
width: 200px;
background:;
background-image:url();
color:#000000;
margin: 0px 0px 0px 0px;
padding: 0px;
border: 1px solid #6E6E6E;
float: left;
overflow:auto;
z-index: 4;
position:absolute;left:780px;top:570px;}
#Feld_oben {
width: 202px;
height: 20px;
background-image:url(URL de la barra principal del menu);
color: ffffff;
margin: 0px 0px 10px 0px;
padding: 0px;
clear: both;
z-index: 4;
position:absolute;left:780px;top:220px;}
#Feld_oben_2 {
width: 202px;
height: 20px;
background-image:url(URL);
color: ffffff;
margin: 0px 0px 10px 0px;
padding: 0px;
clear: both;
z-index: 4;
position:absolute;left:710px;top:500px;}
#Feld_rechts_5 {
height: 40px;
width: 742px;
background:;
background-image:url(URL de la barra separadora del box);
color:#ffffff ;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
overflow:auto;
z-index: 2;
position:absolute;left:25px;top:220px;}
#counter{
position:absolute;
left: 815px;
top: 6px;
font-size: 12px;
z-index: 6;
color: #ffffff;
}
#Anzeige{
position:absolute;
left: 40px;
top: 223px;
z-index: 5;
font-family:;
color: #ffffff;
}