La creación de una plantilla HTML le ayuda a construir rápidamente futuras páginas de un sitio web. Copiar el código de la plantilla y pegarlo en el editor para crear una nueva página. El uso de 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 el diseño de los divs a través de todo el sitio.
Instrucciones
1 Crear un archivo HTML en un editor de su elección.
2 Inserte el siguiente código HTML, lo que crea la estructura de la página e incluye un enlace al archivo CSS. (El archivo CSS se creará en una etapa posterior.)
<Html>
<Head>
<Title> Layout 1 </ title>
<Tipo de vínculo = "text / css" media = "pantalla" rel = "stylesheet" href = "MyName.css" />
</ Head>
<Body>
</ Body>
</ Html>
Añadir un título de su elección para reemplazar el texto "Diseño 1".
3 Añadir los siguientes "divs" entre los "<body>" etiquetas.
<Div id = "header">
Encabezamiento
</ Div>
<Div id = "navegación">
Navegación
</ Div>
<Div id = "contenido">
Contenido
</ Div>
<Div id = "pie">
Pie de página
</ Div>
Esta es una configuración típica para una página web. La "cabecera" se refiere a la parte superior de la página; el menú está situado debajo. El contenido principal de cada página individual entra en la sección "Contenido", y la sección "Pie de página" normalmente alberga el menú inferior en una página web. Cada sección tiene un ID que es utilizado por el archivo CSS para hacer referencia a cada elemento y colocarlo en la sección correspondiente de la página.
4 Guarde la página. (Asegúrese de que se guarda como un archivo ".html".)
5 Crear un nuevo archivo ".css".
6 Inserte el código del diseño del documento en general y luego añadir y manipular el tipo de letra y color de fondo usando el siguiente código:
{
margin: 0;
padding: 0;
}
cuerpo {
fondo: #eeeeee;
font-family: sans-serif;
font-size: 12px;
}
7 Añadir el estilo para el div de cabecera, el cual definirá la altura y el color:
div # header {
altura: 160px;
background: # 800000;
}
8 Definir el estilo de los otros elementos div de la página: la "navegación", el "contenido" y el "pie":
div # navegación {
Fondo: blanco;
anchura: 25%;
flotador izquierdo;
}
div # content {
margin: 0 25%;
background: # BDBD00;
}
# div pie de página {
background: # 800000;
width: 100%;
clear: left;
}
9 Guarde el archivo como "MyName.css".
10 Prueba de la página en un navegador mediante la apertura de la página HTML que acaba de crear. Copia el código HTML y añadir contenido aplicable a crear cada nueva página de su sitio web.