Introducción al diseño de páginas web DIV+CSS

¿Estás aprendiendo diseño CSS? ¿Aún no puedes dominar completamente el diseño CSS puro? Suelen existir dos situaciones que dificultan tu aprendizaje:

La primera posibilidad es que no hayas comprendido el principio del procesamiento de páginas CSS. Antes de considerar el rendimiento general de su página, primero debe considerar la semántica y la estructura del contenido, y luego agregar CSS para la semántica y la estructura. Este artículo le dirá cómo estructurar HTML.

Otra razón es que no conoce esas propiedades de capa de presentación tan familiares (como cellpadding, hspace, align=left, etc.) y no sabe en qué declaraciones CSS convertirlas. Una vez que hayas resuelto el primer problema y sepas cómo estructurar tu HTML, te daré una lista detallando qué CSS usar para reemplazar los atributos de presentación originales.

HTML estructurado

Cuando aprendemos por primera vez a producir una página web, siempre consideramos primero cómo diseñarla, considerando las imágenes, las fuentes, los colores y los planos de diseño. Luego usamos Photoshop o Fireworks para dibujarlo y cortarlo en imágenes pequeñas. Finalmente, edite el HTML para restaurar todos los diseños en la página.

Si desea que su página HTML esté diseñada con CSS (compatible con CSS), debe regresar y comenzar de nuevo. No piense primero en la "apariencia", sino primero en la semántica y la estructura del contenido de su página.

La apariencia no es lo más importante. Una página HTML bien estructurada se puede presentar con cualquier apariencia y CSS Zen Garden es un ejemplo clásico. CSS Zen Garden nos ayuda a darnos cuenta finalmente del poder de CSS.

HTML no es sólo para leer en la pantalla de una computadora. Es posible que sus imágenes cuidadosamente diseñadas en Photoshop no se muestren en PDA, teléfonos móviles ni lectores de pantalla. Pero una página HTML bien estructurada se puede mostrar en cualquier lugar y en cualquier dispositivo de red mediante diferentes definiciones de CSS.

empieza a pensar

Empiece por aprender qué es la estructura, lo que algunos escritores también llaman semántica. Lo que este término significa es que debe analizar sus bloques de contenido y el propósito de cada contenido, y luego construir la estructura HTML correspondiente en función de estos propósitos de contenido.

Si se sienta y analiza y planifica cuidadosamente la estructura de su página, podría terminar con algo como esto:

Generalmente usamos elementos DIV para definir estas estructuras, similar a esto:

<div id=encabezado></div>

<div id=contenido></div>

<div id=globalnav></div>

<div id=subnav></div>

<div id=búsqueda></div>

<div id=tienda></div>

<div id=pie de página></div>

No es el diseño, es la estructura. Esta es una descripción semántica de bloques de contenido. Cuando comprenda su estructura, puede agregar la ID correspondiente al DIV. Cualquier bloque de contenido puede estar contenido dentro de un contenedor DIV y se puede anidar otro DIV dentro de él. Los bloques de contenido pueden contener cualquier elemento HTML: títulos, párrafos, imágenes, tablas, listas, etc.

Según lo anterior, ya sabe cómo estructurar HTML y ahora puede definir el diseño y los estilos. Cada bloque de contenido se puede colocar en cualquier lugar de la página y se pueden especificar el color, la fuente, el borde, el fondo, las propiedades de alineación, etc. del bloque.

Usar selectores es algo maravilloso.

El nombre de la identificación es un medio para controlar un determinado bloque de contenido. Al envolver este bloque de contenido con un DIV y agregar una identificación única, puede usar selectores CSS para definir con precisión la apariencia de cada elemento de la página, incluidos títulos, listas e imágenes. , enlaces o párrafos, etc. Por ejemplo, si escribe una regla CSS para #encabezado, puede ser completamente diferente de la regla de imagen en #contenido.

Otro ejemplo: puedes usar diferentes reglas para definir estilos de enlace en diferentes bloques de contenido. Algo como esto: #globalnav a:link o #subnav a:link o #content a:link. También puedes definir diferentes estilos para el mismo elemento en diferentes bloques de contenido. Por ejemplo, defina el estilo de p en #content y #footer a través de #content p y #footer p respectivamente. Estructuralmente hablando, su página se compone de imágenes, enlaces, listas, párrafos, etc. Estos elementos en sí no afectan en qué dispositivo de red se muestran (PDA, teléfono móvil o TV por Internet). Se pueden definir como cualquier apariencia de rendimiento.

Una página HTML cuidadosamente estructurada es muy simple y cada elemento se utiliza con fines estructurales. Cuando desee sangrar un párrafo, no necesita usar la etiqueta blockquote. Simplemente use la etiqueta p y agregue una regla de margen CSS a p para lograr el propósito de sangría. p es una etiqueta estructurada y el margen es un atributo de presentación. La primera pertenece a HTML y el segundo pertenece a CSS. (Esta es la separación de estructura y expresión).

Las páginas HTML bien estructuradas casi no tienen etiquetas de atributos. El código es muy limpio y conciso. Por ejemplo, el código original <table width=80% cellpadding=3 border=2 align=left> ahora solo puede escribir <table> en HTML, y todo lo que controla el rendimiento se escribe en CSS en HTML estructurado en la tabla. es una tabla, nada más (como ser utilizada para diseño y posicionamiento).

Practica estructurarte

Lo anterior es solo la estructura más básica. En la aplicación real, puede ajustar los bloques de contenido según sus necesidades. El anidamiento DIV ocurre a menudo y verá que hay otras capas en la capa contenedora, con una estructura similar a esta:

<div id=contenedor de navegación>

<div id=navegación global>

<ul>una lista</ul>

</div>

<div id=subnavegación>

<ul>otra lista</ul>

</div>

</div>

Los elementos div anidados le permiten definir más reglas CSS para controlar la presentación. Por ejemplo, puede darle a #navcontainer una regla para centrar la lista a la derecha, darle a #globalnav una regla para centrar la lista a la izquierda y darle a #subnav otra. regla para centrar la lista por completo.