En la producción de páginas web, existen muchos términos, como: CSS, HTML, DHTML, XHTML, etc. En el siguiente artículo utilizaremos algunos conocimientos básicos sobre HTML. Antes de estudiar este tutorial introductorio, asegúrese de tener ciertos conocimientos básicos de HTML. Comencemos a usar DIV+CSS paso a paso para diseñar el diseño de una página web.
El primer paso en todos los diseños es concebir. Después de concebir, en términos generales, debe usar PhotoShop o FireWorks (en lo sucesivo, PS o FW) y otro software de procesamiento de imágenes para dibujar simplemente el diseño de la interfaz que se debe realizar. El siguiente es el diagrama de diseño de la interfaz que he concebido.
A continuación, debemos planificar el diseño de la página de acuerdo con el diagrama conceptual. Después de analizar cuidadosamente el diagrama, podemos encontrar fácilmente que la imagen se divide aproximadamente en las siguientes partes:
1. La parte superior, que también incluye LOGO, MENÚ y una imagen de Banner;
2. La parte de contenido se puede dividir en barra lateral y contenido principal;
3. La parte inferior incluye información sobre derechos de autor.
Con el análisis anterior, podemos diseñar fácilmente nuestra capa de diseño como se muestra a continuación:
Con base en la imagen de arriba, dibujé un diagrama de diseño de página real para ilustrar la relación de anidamiento de las capas, para que sea más fácil de entender.
La estructura DIV es la siguiente:
│body {} /*Este es un elemento HTML, no explicaré los detalles*/
└#Container {} /*Contenedor de capa de página*/
├#Header {} /*Encabezado de página*/
├#PageBody {} /*Cuerpo de la página*/
│ ├#Barra lateral {} /*Barra lateral*/
│ └#MainBody {} /*Contenido principal*/
└#Footer {} /*Parte inferior de la página*/
En este punto, el diseño y la planificación de la página se han completado y lo siguiente que debemos hacer es comenzar a escribir código HTML y CSS.