Planificación de un sitio web
Primero debe planificar un sitio web. Este tutorial tomará la siguiente figura como ejemplo para crear un sitio web.
la Figura 1
se muestra a continuación:
La figura 2
consta principalmente de cinco partes:
1. Barra de navegación de navegación principal, con efectos de botones.
Ancho: 760px Alto: 50px
2. Encabezado El icono del encabezado del sitio web contiene el logotipo y el nombre del sitio web.
Ancho: 760 px Alto: 150 px
3. Contenido El contenido principal del sitio web.
Ancho: 480px Alto: Cambia según el contenido
4. Borde de la barra lateral, alguna información adicional.
Ancho: 280px Alto: Cambia según
5. La columna inferior del sitio web de pie de página contiene información de derechos de autor, etc.
Ancho: 760px Alto: 66px
1. Cree plantillas html y directorios de archivos, etc.
El código es el siguiente:
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Guárdelo como index.html y cree carpetas css e imágenes. La estructura del sitio web es la siguiente:
Figura 3
2. Cree un cuadro grande para el sitio web :
cree un cuadro de 760 px de ancho que contendrá todos los elementos del sitio web.
Escriba
Figura 4
Ahora para centrar el cuadro, escriba margin: auto;, de modo que el archivo css sea:
#contenedor-página {
ancho: 760 px;
margen: automático;
fondo: rojo;
}
Ahora puede ver que hay un espacio de 8 píxeles de ancho entre la parte superior del cuadro y el navegador. Esto se debe al relleno y los bordes predeterminados del navegador. Para eliminar esta brecha, debe escribir en el archivo CSS:
html, cuerpo {
margen: 0;
relleno: 0;
}
Divida el sitio web en cinco divs
1. Coloque las cinco partes mencionadas en el "Paso 1" en cuadros y escriba en el archivo html:
se comporta de la siguiente manera:
Figura 5
2. Para distinguir las cinco partes, marcamos estas cinco partes con diferentes colores de fondo y escribimos en el archivo css:
#navegación principal {
fondo: rojo;
altura: 50 píxeles;
}
#encabezado {
fondo: azul;
altura: 150 px;
}
#barra lateral-a {
fondo: verde oscuro;
}
#contenido {
fondo: verde;
}
#pie de página {
fondo: naranja;
altura: 66 píxeles;
}
El rendimiento es el siguiente:
Figura 6
Diseño de página web y div flotante, etc.
1. Flotante: Primero, deje que el borde flote a la derecha del contenido principal. Utilice CSS para controlar la flotación.
#barra lateral-a {
flotar: derecha;
ancho: 280px;
fondo: verde oscuro;
}
El rendimiento es el siguiente:
Figura 7
2. Escriba algo de texto en el cuadro de contenido principal. Escribe en el archivo html:
Figura 8
Pero puede ver que el cuadro de contenido principal ocupa todo el ancho del contenedor de página y debemos establecer el borde derecho de #content en 280 px. para que no entre en conflicto con la frontera.
El código CSS es el siguiente:
#contenido {
margen derecho: 280px;
fondo: verde;
}
Al mismo tiempo, escribe algo de texto en el borde. Escribe en el archivo html:
se comporta de la siguiente manera:
Figura 9
Esto no es lo que queremos. El marco inferior del sitio web ha quedado debajo del borde. Esto se debe a que flotamos el borde hacia la derecha. Como está flotante, se puede entender que está en otra capa encima de todo el cuadro. Por lo tanto, el cuadro inferior y el cuadro de contenido están alineados.
Entonces escribimos en CSS:
#pie de página {
claro: ambos;
fondo: naranja;
altura: 66 píxeles;
}
El rendimiento es el siguiente:
Figura 10
El diseño y presentación de estructuras adicionales fuera del marco principal de la página web. La presentación (Diseño) de estructuras adicionales fuera del marco principal de la página web, incluyendo lo siguiente:
1. Barra de navegación principal;
2. Título, incluido el nombre del sitio web y el título del contenido;
3. Contenido;
4. Información del pie de página, incluidos derechos de autor, certificación y barra de subnavegación (opcional).
Al agregar estas estructuras, para no destruir el marco original, debemos agregar debajo de la etiqueta "cuerpo" (TAG) del archivo css:
.oculto {
pantalla: ninguna;
}
".hidden" es la clase que agregamos. Esta clase puede hacer que cualquier elemento de la página que pertenezca a la clase oculta no se muestre. Estos se utilizarán más adelante, así que olvídalo por ahora.
Ahora agregamos el encabezado:
Primero regrese al código HTML,
La siguiente es la barra de navegación :
el código CSS que controla el rendimiento de la barra de navegación es relativamente complicado. Lo presentaremos en detalle en el noveno o décimo paso. Ahora agregue el código de navegación al archivo html: