Las reglas y normas rígidas que gobiernan la World Wide Web proporcionan un marco coherente en el que los talentos del diseño web pueden florecer. HTML, o HyperText Markup Language, y Cascading Style Sheets, CSS o, deja que usted presenta el contenido Web con precisión. El elemento de división "div", o página, separa el contenido en bloques que pueden ser decoradas individualmente y se colocan. Un div puede contener otros divs. Puede afinar las propiedades CSS como el ancho y el desbordamiento para dar cabida a diferentes capacidades de navegador Web. Crear un borrador de su diseño en el papel primero y averiguar aspectos de diseño antes de empezar a escribir código.
Instrucciones
1 Haz un dibujo de su diseño con un lápiz o un bolígrafo y papel dibujando el contorno de la div exterior.
2 Etiquetar su dibujo div exterior con la altura deseada, ancho, color de fondo, la designación de la frontera y el relleno. Dar el div exterior un nombre único de identificación para la hoja de estilo.
3 Dibuje el contorno de la div interior. Etiqueta este div con la altura deseada, ancho, color de fondo, la designación de la frontera, el relleno y el nombre único de identificación.
4 Iniciar el editor Bloc de notas de texto sin formato haciendo clic en el botón "Inicio", "Todos los programas", "Accesorios" y "Bloc de notas". Crear el CSS basado en su borrador. Añadir los estilos de su boceto entre las etiquetas <head> </ head> etiquetas.
<Style type = "text / css"> <! -
Sus estilos aquí
-> </ Style>
5 Añadir la propiedad CSS "overflow: hidden;" a cada DIV para prevenir el exceso de contenido se derrame. Utilice los siguientes estilos entre las etiquetas <head> </ head> de su página web:
<Style type = "text / css"> <! -
{externa
background-color: # FFB3B3;
Anchura: 500px;
frontera: 1px solid negro;
altura: 200px;
padding: 5px;
sobrecarga oculta;
}
interior {
background-color: # C1ACEE;
width: auto;
altura: 200px;
frontera: 1px punteada de color rojo;
sobrecarga oculta;
}
más interior {
background-color: blanco;
Anchura: 200px;
altura: 100px;
frontera: 2px sólido de color azul;
flotador izquierdo;
}
-> </ Style>
6 Añadir el contenido que va a utilizar para el div más interior - y el div exterior, si es necesario - en la sección <body> de su página Web. Etiquetar los divs con el mismo ID que ha creado para la hoja de estilo.
7 Asegúrese de añadir el siguiente tipo de documento en la parte superior de su documento Web para asegurar la compatibilidad entre navegadores.
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN"
"Http://www.w3.org/TR/html4/strict.dtd">
8 Haga clic en el menú Archivo. Seleccionar la opción "Guardar". Guardar bajo un nombre de archivo apropiado, como "test.html".
9 Iniciar el navegador Web haciendo clic en el botón "Inicio", "Todos los programas" y "Internet Explorer". Haga clic en la opción de menú "Archivo" y seleccionar "Abrir archivo". Busque el archivo que acaba de crear, seleccionarlo, a continuación, haga clic en "Abrir". Probar la página Web. Ajuste el ancho y la altura del div interior y exterior para adaptarse al contenido o ajustar la cantidad de contenido o su estilo de fuente.
Consejos y advertencias
- Como no se puede saber de antemano que tendrá acceso a su página Web, usted debe probar su diseño, intentando múltiples familias de fuentes y tamaños. Si utiliza el relleno en cualquiera div, ver lo que su diseño se parece con una configuración diferente. Tratar de simular su página en un dispositivo con una pantalla más pequeña, tal como un teléfono inteligente o netbook. Pruebe su diseño en las versiones anteriores de Internet Explorer.
- Los distintos navegadores Web que se ejecutan en sistemas operativos diferentes en diferentes dispositivos a veces mostrar el mismo código HTML de forma diferente. Una forma de eliminar los errores de visualización es dar al navegador web toda la información que necesita para hacer correctamente su trabajo. Utilizando el tipo de documento correcto en la cabecera de su página Web le dice al navegador qué tipo de información está llegando y qué normas a seguir en mostrarlo. El tipo de documento HTML 4.01 4.01 Transición estricta o HTML funciona con la mayoría de los navegadores:
- <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN"
- "Http://www.w3.org/TR/html4/strict.dtd">