¿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 encuentra esos atributos de capa de presentación tan familiares (como cellpadding, hspace, align="left", etc.) y no sabe en qué declaraciones CSS convertirlos. 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
Lo primero que hay que aprender es qué es la "estructura", lo que algunos escritores también llaman "semántica". Lo que este término significa es que necesita analizar sus bloques de contenido y el propósito de cada contenido, y luego construir la estructura HTML correspondiente basada en 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:
Logotipo y nombre del sitio
Contenido de la página principal
Navegación del sitio (Menú principal)
submenú
cuadro de búsqueda
Áreas funcionales (por ejemplo, carrito de compras, caja)
Pie de página (derechos de autor y avisos legales relacionados)
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, fuente, borde, fondo, propiedades de alineación, etc. del bloque.