Creando la plantilla

Lo siguiente es crear la plantilla para lo que vamos a hacer es crear un nuevo documento html.

Selecciona le pestaña Layout y selecciona Insert Div Tag en ID escribimos cabecera así sucesivamente menú, contenido, pie.

Después de haber insertado cabecera crear una capa que se llame contenedor y dentro de ella insertas el div menú y contenido. ya que hayas terminado se vera algo como la imagen de aquí bajo.
Selecciona la capa cabecera abre el panel CSS Styles haz clic en el botón New CSS Rule se abre el menu y en esta aparecen varias opciones selecciona Advanced ID’s, pseudo-class selectors abajo aparecerá el selector como #cabecera en Define debe de estar en (New Style Sheet File).

Seleccione el lugar donde se va a guardar el archivo en este caso yo lo he nombrado layout.css y lo se va guardar en la carpeta C:\AppServ\www\sitionuevo\misitio\css.

Ahora vamos a darle estilo a las capas selecciona la categoría Box aquí en width: pon 1000px en height 100px, ahora a la categoria Background en Background Color especificamos un color de fondo para la capa #cabecera. una vez terminado haces clic en Ok. haces lo mismo con la capa #pie aqui en la misma categoria Box selecciona Clear: Both

Selecciona la capa #contenedor y haces los mimos pasos para crear un estilo aquí solo vamos a agregar un width 1000px, aplica el estilo y haces clic en OK. recordaras que dentro de esta capa tienes dos capas #menu y #contenido. #header, #contenedor y #pie tiene un ancho (width) de 1000px, lo que necesitamos es acomodar #menu y #contenido para que cuadre dentro de #contenedor con un margen de 10 px entre cada capa para eso nada mejor que explicado con esta imagen podemos hacer el calculo de cuanto tiene que tener de ancho el menú y el contenido para después aplicarles un margen de separación de 10px.

ya que tenemos la idea precisa de las medidas de cada capa selecciona la capa #menu seguido del botón New Style Rule. selecciona la categoría Box y en el width pones 250px en float left, margen top:10px, right:5px, bottom 10px y left 10px y OK.

Selecciona la capa #contenido New Style Rule/Category/Box en width: 720px, float: left en margin top 10px, right 5px, bottom 10px, left 10px y OK

Presiona F12 para ver la plantilla en el navegador.

Ahora vamos a crear una hoja de estilos aparte de la ya tenemos que es layout esta solo contiene los tamaños y colores de la pagina, vamos a crear una nueva que de estilos al código HTML, que vamos a llamar screen.css, para eso vamos hacemos clic en el New Style Rule Selector Type/Tag Tag Body Define in: (New Style Sheet File) OK y lo guardas como screen.css en la carpeta CSS.
Categoria Type:

• Font: Arial, Helvetica, sans-serif
• Size: 12px
• Color: #333333

Category: Box

• Margin: 0
• Padding: 0

Notaras que se han eliminado los margenes de la pagina ademas de que cambio el tipo de letra y el color, en el siguiente post vamos a editar la plantilla para darle mas presentación así como empezar a agrear estilos al código como Titulos <h1>, Parrafos <p> y listas <li>.