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*/
└#Contenedor {} /*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.
A continuación, creamos una nueva carpeta en el escritorio y la llamamos "Ejercicio de diseño DIV+CSS". Crea dos documentos de Bloc de notas vacíos debajo de la carpeta e ingresa el siguiente contenido:
Esta es la estructura básica de XHTML, asígnele el nombre index.htm y el otro documento del Bloc de notas css.css.
A continuación, escribimos la estructura básica de DIV en el par de etiquetas <body></body>, el código es el siguiente:
<div id=contenedor><!--Contenedor de capa de página-->
<div id=Encabezado><!--Encabezado de página-->
</div>
<div id=PageBody><!--Cuerpo de la página-->
<div id=Barra lateral><!--Barra lateral-->
</div>
<div id=MainBody><!--Contenido principal-->
</div>
</div>
<div id=Pie de página><!--Parte inferior de la página-->
</div>
</div>
Para facilitar la lectura del código en el futuro, debemos agregar comentarios relevantes. A continuación, abra el archivo css.css y escriba la información CSS.