Desarrolando el diseno

[Tema 5] desarrollando el diseño:
En este tema desarrollaremos el diseño, lo que quiere decir que las etiquetas que antes teniamos en CSS code sin style Tags pasaran a codigos por encima de la pagina.

un peqeuño ejemplo:
Tenemos la etiqueta header. Si miras el tema anterior, saldra algo asi:
#header

*con la almoadilla(#)
pues seria por encima de la pagina asi:
<div id="header"></div>

*con una etiqueta de cierre que seria (</div>)

Y ahora veremos otra forma:
.sidebar

*con el punto(.)
pues seria por encima de la pagina asi:
<div class="sidebar"></div>

PD: si os ha quedado claro este ejemplo, empezaremos a desarrolar nuestra pagina web.

Obiamente para empezar debes estar en "Editar diseño" - opciones avanzadas - codigo por encima d ela pagina.
Primero copia este codigo por encima de la pagina:

Código: <div id="navbar" class="navbar section">
<div id="Navbar1" class="widget Navbar">&nbsp;</div>
<div id="layout_wrapper">
<div id="layout_edgetop">&nbsp;</div>
<div id="layout_container"><!-- Head -->
<div id="header-wrapper">
<div id="header" class="header section">
<div id="Header1" class="widget Header">
<div id="header-inner">
<div class="titlewrapper"><!-- Titulo de la pagina -->
<h1 class="title">Versi&oacute;n 2010</h1>
<!-- Fin Titulo de la pagina --></div>
<div class="descriptionwrapper">
<p class="description"><span>Mi web site</span></p>
</div>
</div>
</div>
</div>
<div class="clear">&nbsp;</div>
</div>
<div id="top_separator">&nbsp;</div>
<div id="navigation">
<div id="tabs">
<ul>
    <li class="current_page_item"><!-- Menu horizontal -->  <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>
<!-- Menu horizontal -->
<div class="clear">&nbsp;</div>
</div>
</div>
<div class="spacer h5">&nbsp;</div>
<div id="content-wrapper"><br />
ssss</div>
</div>
</div>
</div>

Ahora copiamos los codigos por debajo de la pagina:

codigo:
<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'>

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

CONTENIDO SIDEBAR

<!-- Fin contenido box 1 -->

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

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

CONTENIDO SIDEBAR

<!-- Fin contenido box 2 -->

<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
</div></div>
<span class='widget-item-control'></div>
</div></div></div>
<!-- Limpiar flotacion-->
<div class='clear'></div></div>
<!-- Footer -->
<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>

Bueno pues lo que esta en rojo se puede modificar sin que afecte a la estructura de tu web, ya llego el final de este curso, por lo que quiero adelantar que habra un segundo curso de diseño web mas avanzado, asi vais practicando para que os adentrais al mundo CSS.

Recomendaciones:
-ver esta web en caso de dudas con algunas propiedades de esta web(clic aqui).
-subir imagenes a xooimages, ya que tinypic ha baneado a los Argentinos.
-Si no entiendes el tema, verlo dos veces.