Cómo crear una página Web de dos columnas

Los diseñadores web a menudo se enfrentan al problema de presentar la información de una manera que es visualmente atractiva. páginas web de dos columnas proporcionan una solución que crea más fácil la lectura y separa el contenido de la página principal de información complementaria. Cuando se utiliza el formato de dos columnas para separar el contenido, es importante tener un contenido en la misma anchura y altura similar para facilitar la lectura. Cuando separar el contenido de los recursos, lo ideal es no tener su contenido tanto tiempo que los recursos se pierden. El objetivo es crear una página web que llama la atención de su lector.

Instrucciones

Instrucciones

1 Crear dos divisiones (divs) en el cuerpo de su contenido lenguaje de marcado de hipertexto (HTML). Estos pueden incluir divs un estilo en línea de "float: left". El código HTML para esto es:

<Div style = "float: left"> contenido </ div>
<Div style = "float: left"> recursos </ div>.

(No incluya el punto al final como parte de ese comando o comandos adicionales.)

Reemplazar "contenido" y "recursos" con el contenido de su página web.

2 Crear un div de compensación. Un div de compensación se detiene elementos floten en su página web. Este es el código HTML de un div con un \ "clara \" clase:

<Div class = "clear"> </ div>.

En su hoja de estilo, definir esa clase clara con los siguientes atributos:

font-size: 0px
IR
margin: 0
IR
padding: 0
IR
line-height: 0px
IR
Limpia los dos
IR
float: none
IR
border: none
IR

El div de compensación cancela los elementos flotantes de los dos divs flotantes creadas en el paso 1. Si no limpiamos los divs flotantes, entonces cualquier contenido posterior sigue a "flotar" a la izquierda del último contenedor.

3 Crear un canal entre las dos columnas flotaban. Un canal es el espacio utilizado para separar las dos columnas visualmente. Hay cinco formas de crear un canalón:

1) Se añaden 20 píxeles de relleno de la derecha a la primera div flotante. La primera div flotante a continuación, se ve así: <div style = "float: left; padding-right: 20px; "> contenido </ div>.

2) Añadir 20 píxeles de izquierda-relleno para la segunda div flotante: <div style = "float: left; padding-left: 20px; recursos "> </ div>.

3) Añadir 10 píxeles de relleno de la derecha a la primera div flotante y 10 píxeles de izquierda relleno para la segunda div flotante:

<Div style = "float: left; padding-right: 10px; "> contenido </ div>
<Div style = "float: left; padding-left: 10px; recursos "> </ div>.

4) Crear un nuevo div que va entre la primera div flotante y el segundo div flotante:

<Div style = "float: left;"> contenido </ div>
<Div class = "canaleta"> </ div>
<Div style = "float: left;"> recursos </ div>.

Esta clase \ "canaleta \" debe tener los siguientes atributos:

bloqueo de pantalla
IR
flotador izquierdo
IR
Ancho: 20px; .

5) En lugar de la segunda contenedor flotante a la izquierda, puede flotar derecha. Dar a los contenedores flotantes anchuras iguales que no son iguales al contenedor principal. Por ejemplo, si su contenedor principal tiene un ancho de 900 píxeles, entonces sus contenedores flotantes pueden tener una anchura de 440 píxeles, que le da un canalón 20 de píxel. Aquí está el código:

<Div style = "float: left; Anchura: 440px; "> contenido </ div>
<Div style = "float: right; Anchura: 440px; "> recursos </ div>.

4 Guarde el archivo con la extensión .html.

5 Abre el archivo HTML en un navegador web y revisar la página web. Realizar modificaciones a su código si es necesario para conseguir los resultados deseados.

Consejos y advertencias

• En lugar de los estilos en línea, puede crear clases en sus contenedores flotantes. Por ejemplo, una clase floatLeft se puede definir en su hoja de estilo como "float: left".
• Cuando separar el contenido de los recursos, su divs no tienen que ser igual anchura. Por lo general, la relación entre el contenido y los recursos es de entre 2 a 1 y 3-1.
• Colocar un comentario en blanco dentro de la div de compensación para los propósitos de IE6. De lo contrario, es posible obtener algunas cuestiones de espacio entre Microsoft Internet Explorer versión 6 (IE6) y otros navegadores web.