DwDesigner

Bienvenido, Te recive el Equipo de Webdejuegosya y Team-Drakox, Elige una de estas opciones!

Registrar;Conectar;No Preguntar

Que te diviertas

Unirse al foro, es rápido y fácil

DwDesigner

Bienvenido, Te recive el Equipo de Webdejuegosya y Team-Drakox, Elige una de estas opciones!

Registrar;Conectar;No Preguntar

Que te diviertas

DwDesigner

¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.
DwDesigner

Diseño Webmaster Todo lo que tu web necesita


    [Tutorial] Crear plantillas web

    TeamDrakox
    TeamDrakox
    Support
    Support


    Masculino Cantidad de envíos : 137
    Fecha de inscripción : 08/03/2009
    Edad : 27

    Hoja De Personaje
    Juego1:
    Juego1[Tutorial] Crear plantillas web Empty
    [Tutorial] Crear plantillas web Empty

    [Tutorial] Crear plantillas web Empty [Tutorial] Crear plantillas web

    Mensaje  TeamDrakox Dom Mar 08, 2009 2:11 pm

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

    Iceblue
    [Tutorial] Crear plantillas web 29yfrz4

    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

    [Tutorial] Crear plantillas web 10xa3ys

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

      Fecha y hora actual: Vie Mar 29, 2024 11:38 am