creando el desing

Configuracion avanzada.
EN TEXTO SOBRE EL DISEÑO:
Texto por debajo de la página
CSS-Code
sin Style Tags
-------------------------------
 
EDITAR EL MENU:
cada boton seria:
<ul>
    <li class="top"><a class="top_link" href="LINK"><span>TEXTO</span></a></li>
</ul>
 
Para un boton con subpagina:
<ul>
    <li class="top"><a class="top_link" href="#"><span class="down">TEXTO PAGINA</span></a>
    <ul class="sub">
        <li><a class="fly" href="URL de la sub">Subpagina 1</a></li>
    </ul>
    </li>
</ul>
 
Si quisieramos subpagina de  subpagina, osea  el segundo nivel:
<ul>
<li class="top"><a class="top_link" href="#"><span class="down">MENU</span></a>
   <ul class="sub">
   <li><a class="fly" href="">subpagina 1</a>
        <ul>
            <li><a href="">subpagina 1.1</a></li>
            <li><a href="">subpagina 1.2</a></li>
        </ul>
    </li>
    </ul>
</li>
</ul>
Fijate  que  cada  vez que se  abre  un ul, o se  cierra, estan emparejados y tienen una  sangria (varios  espacios delante) aqui lo he  representado por  color para  identificarlos, es  para ordenarlos y saber  que  estan bien colocados... acostumbrese a tratar los  codigos htmls de  esta  manera para  ser  mas  facil trabajarlos.
------------------------------------------------------
 
Trabajar el css, en teoria no deberias  tocarlo, pero por  si un dia quisieras modificarlo
a { color: #ff000;
a hover: { color:#336699;
}
esto es  el color de  los  links activos, y de  pasar  el raton por  ellos
/* fondo */
body {
background: #FFFFFF url(https://img.webme.com/pic/s/sweetyandlatina/fondos.jpg);
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #7F7772;
}
 Aqui determinamos, el color  de  fondo o si le  pones  tu propio fondo.
ademas del tipo de  letra extandar en fon-familiy.. cuando hay mas  de  uno, es  porque  si falla  el primero, el navegador  del internauta activaria el segundo y sucesivamente. con font-size, tamaño de  texto general.. y color preterminado
 /* cabezal */
#logo {
width: 250px;
height: 160px;
background: url(https://img.webme.com/pic/d/disenyo/logo2.png) no-repeat;
}
#banner {
width: 800px;
height: 160px;
background: url(https://img.webme.com/pic/d/disenyo/banner2.png) no-repeat;
}
#head {
width: 100%;
height: 32px;
background: none no-repeat;
}
 De aqui solo usamos el "head" que  determina la  altura que  quisimos  darle para  crear  el espacio del menu... tanto el banner, como el logo, auqnue  esten aqui preparados  para usarse, no estan activados... pero los  deje  ahy por si quieres  usarlos...
Truco, si quieres  ponerlo en la  web, por  una  pagina  por  ahy, en lugar  de  cargarlo como imagen prueba  poner en codigo html: img id="logo" o img class="logo" y sale.
 #container {
width: 95%;
margin: 0 auto;
padding: 0;
background: #DDA92F;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Google Chrome y Safari */
border-radius: 20px; /* CSS3 (Opera 10.5, IE 9) */
}
 Este es  el contenedor de  fabrica de  pwg, como veras  el ancho esta en porcentage, lo que quiere decir  que  aunque nuestro monitor  sea  mas  grande, siempre  ocuparia el 95% ademas tiene bordes redondeados adaptados a  los  navegadores principales.
su color  de  fondo es  el mostaza. DDA92F
 /* caja lateral izquierdo */
#sidebar {
width: 240px;
float: left;
margin: 5px 10px;
padding-bottom: 30px;
}
 Para activar el box, debes  ir a "texto sobre  la  pagina"
y ponerlo despues de  "content" como div... 
de  todas  formas  te  enviare el codigo con sidebar.
 
 /* BLOQUE DE TEXTOS */
h2#title span {color:#ff0000;}
#content {
float: auto;
width: 98%;
margin: -10px 5px;
padding: 0 0 30px 10px;
background: #ffffff;
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Google Chrome y Safari */
border-radius: 20px; /* CSS3 (Opera 10.5, IE 9) */
}
 Aqui es donde  saldran los textos de  la  web, toda  la  informacion o imagenes.. con bordes redondos adaptados.
Ademas del tamaño y color de  titulo de  cada pagina
 /* textos de copyright y agradecimientos */
#footer {
clear: both;
height: 30px;
padding: 5px;
border-top: 3px solid #bbd9ee;
background: #DDA92F;
}
 Esta es  la  zona de abajo... 
border-top seria  esa  linea horizontal.
el fondo general seria background.