Los conceptos básicos de un sitio web basado en Div: 7 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:45

Este instructivo le mostrará los conceptos básicos de cómo construir un sitio web con divs. ¡Porque las tablas utilizadas para el diseño son malas!: pPara comprender este instructivo, necesitará conocer html y css básicos. Si no entiende algo, no dude en preguntar. Mi página de inicio personal también utiliza este tipo de estructura div.

Paso 1: crea los archivos básicos

Primero crea tu archivo html. Le agregaremos los conceptos básicos. El archivo css estará vacío por ahora. El archivo html ahora contiene: prueba Guarde su archivo html como algo.html. Puede elegir el nombre usted mismo. Su archivo css debe guardarse como.css. Asegúrese de darle el mismo nombre que se menciona en el archivo html. En este caso, "style.css". Ahora tenemos una página html vacía cuando se obtiene una vista previa en nuestro navegador.

Paso 2: Edite la etiqueta del cuerpo para colores básicos, fuentes,…

Dejaremos el archivo html como está y editaremos solo el archivo css. Agregue el siguiente código a su archivo css: body {background: # 444444; familia de fuentes: verdana, arial, sans-serif; color: # 444444; tamaño de fuente: 12px; margin: 0px;} Con este fragmento de código definiremos todas las propiedades de la etiqueta del cuerpo. Dado que todo el contenido está en la etiqueta del cuerpo, esta configuración afectará a toda la página. El fondo y el color de la fuente (color) se han establecido en un gris oscuro. La familia de fuentes (font-family) se ha establecido en verdana. Si la computadora utilizada para ver nuestro sitio web no tiene la fuente "verdana", mostrará nuestro sitio en la fuente "arial". Puede agregar más fuentes a la lista. El "sans-serif" es el tipo genérico que se utilizará cuando no haya ninguna fuente disponible. El tamaño de fuente (tamaño de fuente) se ha establecido en 12 píxeles. Este es un valor absoluto. Si desea editar otros tamaños de fuente (como encabezados, párrafos, elementos de menú,…) puede usar la unidad relativa "em" en lugar de "px". De esta manera, si desea cambiar el tamaño de su sitio web, solo tendrá que cambiar el tamaño de la fuente del cuerpo. El margen se ha establecido en 0px para los cuatro lados de la etiqueta del cuerpo. Esto se hace para asegurarse de que el sitio se adhiera a la parte superior de la ventana.

Paso 3: agregar un contenedor con encabezado y contenido

Ahora agregaremos el contenedor. Esto es simplemente un div centrado que contendrá todo nuestro sitio web. En este contenedor, agregaremos dos divs más; un div de contenido y un div de encabezado. Nuestro archivo html ahora se verá así: test Content Header Agregaremos el siguiente código a nuestro archivo css: div # container {width: 800px; margen: 0px automático; fondo: #FFFFFF; padding: 0px;} div # content {ancho: 800px; padding-top: 100px; background: yellow;} div # header {ancho: 800px; altura: 100px; fondo: azul; posición: absoluta; top: 0px;}. clearfix: after {content: "."; bloqueo de pantalla; altura: 0; Limpia los dos; visibilidad: oculta;}. clearfix {display: inline-block;} / * Hide from IE Mac / * /. clearfix {display: block;} div # container significa que tenemos una etiqueta div con id "container". Agregaremos algunos colores y un "margin: 0px auto;" para asegurarnos de que nuestro contenedor esté centrado en la página. Tenemos que darle al contenido un padding-top y al encabezado un valor absoluto con un "top: 0px" para asegurarnos de que el encabezado esté posicionado por encima del otro contenido. los colores feos. Es solo para facilitar la lectura de los colores y ver los diferentes div. Necesitaremos este extraño código clearfix para asegurarnos de que nuestros divs de navegación y contenido (agregados en el siguiente paso) no se salgan del div circundante.

Paso 4: cree dos divisiones en la división de contenido para la navegación y el contenido real

Ahora agregaremos dos divs más en el div de contenido. Uno para la navegación y otro para el contenido real. Entre la etiqueta de contenido; agregarás el nuevo código:

Navegación Contenido principal Agregaremos algo de código CSS para mostrar la navegación y el contenido principal divs; div # nav {width: 200px; flotador izquierdo; background: orange;} div # maincontent {ancho: 600px; flotar derecho; background: pink;} Tenga en cuenta el hecho de que estos dos divs son flotantes. Si no hubiéramos puesto el código clearfix adicional en el paso anterior, los divs flotarían fuera del div circundante. Con el método clearfix, nos aseguraremos de que eso no suceda.

Paso 5: agregue algunos Divs adicionales para la estructura en la navegación

Ahora agregaremos algunos divs adicionales al div "nav" para crear algún tipo de estructura en nuestra página web. Cambie el siguiente código:

• Foo
• Bar

Ahora agregaremos un fragmento de código para definir cómo se debe mostrar el div "navblock". Tenga en cuenta que el navblock tiene una clase, no una identificación. La razón de esto es simple; los divs con una identificación solo se muestran una vez (el bloque de navegación, el encabezado, el pie de página,…). Los divs con clases se pueden mostrar más de una vez. Aquí usaremos una clase. En caso de que queramos agregar otro bloque de navegación más adelante..div.navblock {width: 180px; margen: 5px automático; border: 1px solid red;} Si queremos agregar otro bloque de navegación, solo tendrá que agregar una nueva … estructura. Su código ahora se verá así;

• Foo
• Bar
• Abucheo
• Lejos

Paso 6: agregue algunos Divs adicionales para la estructura en el contenido principal

Ahora haremos lo mismo para el div maincontent. El código ahora se ve así:

Lorem ipsum dolor sit amet, …

Nuevamente, agregaremos un fragmento de código a nuestro archivo css para determinar cómo se debe mostrar el div: div.contentblock {width: 580px; margen: 5px automático; border: 1px solid white;} Ahora podemos agregar otro bloque de contenido agregando otro "…" en el div maincontent de esta manera;

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum,…

Paso 7: haz que el sitio sea un poco menos feo

Ahora la parte divertida; colors. Ahora que tenemos la estructura div principal, podemos cambiar los colores a algo un poco menos caótico / feo / … Simplemente juega con los colores en el archivo css. Aquí está el archivo html completo de la página web que se muestra en la imagen: prueba

• Foo
• Bar
• Abucheo
• Lejos

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum,…

Encabezado Y este es el archivo CSS completo: cuerpo {fondo: # 444444; familia de fuentes: verdana, arial, sans-serif; color: # 444444; tamaño de fuente: 12px; margin: 0px;} div # container {width: 800px; margen: 0px automático; fondo: #FFFFFF; padding: 0px;} div # content {ancho: 800px; padding-top: 100px; fondo: #FFFFFF;} div # encabezado {ancho: 800px; altura: 100px; fondo: # 888888; posición: absoluta; top: 0px;} div # nav {ancho: 200px; flotador izquierdo; fondo: #FFFFFF;} div # maincontent {ancho: 600px; flotar derecho; fondo: #DDDDDD;} div.navblock {ancho: 180px; margen: 5px automático; borde: 1px sólido #DDDDDD;} div.contentblock {ancho: 580px; margen: 5px automático; borde: 1px sólido #FFFFFF;}. clearfix: after {content: "."; bloqueo de pantalla; altura: 0; Limpia los dos; visibilidad: oculta;}. clearfix {display: inline-block;} / * Ocultar de IE Mac / * /. clearfix {display: block;} Así que ahora tienes lo básico. Por supuesto, todavía hay mucho que editar, como colores, tamaños de fuente, un bloque de navegación más atractivo,… Pero este instructables trata solo sobre la estructura div. Si desea ver otros instructivos relacionados, siempre puede preguntar. Veré si encuentro tiempo.