ubiquitour.com

Cómo crear una plantilla con Divs

Cómo crear una plantilla con Divs

Crear una plantilla HTML le ayuda a crear rápidamente páginas futuras de un sitio Web. Copia el código de la plantilla y pegar en el editor para crear una nueva página. Uso divs significa que usted puede cambiar fácilmente el diseño de su sitio web mediante la edición de un archivo: el archivo CSS que controla la disposición de los divs en todo el sitio.

Instrucciones

1 Crear un archivo HTML en un editor de su elección.

2 Inserte el siguiente código HTML, que crea la estructura de su página e incluye un enlace hacia el archivo CSS. (Se creará el archivo CSS en una etapa posterior.)

< html >

< head >

< title > diseño 1 < / title >

< link tipo = "text/css" media = "pantalla" rel = "stylesheet" href="MyName.css" / >

< /HEAD >

< cuerpo >

< /body >

< / html >

Agregar un título de su elección para sustituir el texto "esquema 1".

3 Añadir los siguientes "divs" entre las etiquetas "< body >".

< div id = "cabecera" >

Cabecera

< / div >

< div id = "navegación" >

Navegación

< / div >

< div id = "contenido" >

Contenido

< / div >

< div id = "footer" >

Pie de página

< / div >

Este es un diseño típico de una página web. El "encabezado" se refiere a la parte superior de la página; el menú está situado por debajo. El contenido principal de cada página individual entra en la sección "Contenido", y la sección de "Pie" casas generalmente el menú de la parte inferior de una página web. Cada sección tiene un ID que utiliza el archivo CSS se refieren a cada elemento y ponerlo en la sección correspondiente de la página.

4 Guarde la página. (Asegúrese de que está guardado como un archivo ".html").

5 Cree un nuevo archivo "CSS".

6 Insertar código de diseño para el documento general y luego añadir y manipular el color de fuente y fondo utilizando el siguiente código:

{

margen: 0;

padding: 0;

}

{cuerpo}

fondo: #eeeeee;

font-family: sans-serif;

font-size: 12px;

}

7 Agregue el estilo de la div de cabecera, que definirá la altura y el color:

div #header {}

altura: 160px;

fondo: #800000;

}

8 Definir el estilo de los otros elementos del div de la página: la "navegación", el "contenido" y el "footer":

{} div #navigation

fondo: blanco;

anchura: 25%;

Float: left;

}

div #content {}

margen: 0 25%;

fondo: #BDBD00;

}

div #footer {}

fondo: #800000;

anchura: 100%;

claro: a la izquierda;

}

9 Guarde el archivo como "MyName.css".

10 Probar la página en un navegador al abrir la página HTML que acaba de crear. Copia el código HTML y agregar contenido aplicable para crear cada página nueva para su sitio Web.