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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<cabeza>
<meta http-equiv="tipo de contenido" content="text/html; conjunto de caracteres=UTF-8" />
<título>Nombre de la empresa - Nombre de la página</título>
<meta http-equiv="Contenido-Idioma" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta nombre="MSSmartTagsPreventParsing" contenido="true" />
<meta nombre="descripción" contenido="Descripción" />
<meta nombre="palabras clave" contenido="Palabras clave" />
<meta name="autor" contenido="Iluminar diseños" />
<style type="text/css" media="all">@import "css/master.css";</style>
</cabeza>
<cuerpo>
</cuerpo>
</html>
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 <div id="page-container"> entre <body> y </body> en el archivo html
Hola Mundo.
</div>
Cree un archivo css, asígnele el nombre master.css y guárdelo en la carpeta /css/. Escribir:
#contenedor-página {
ancho: 760 px;
fondo: rojo;
}
El ancho del cuadro cuya identificación es el contenedor de página se controla para que sea html es 760 px y el fondo es rojo. El rendimiento es el siguiente.
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:
<div id="contenedor-página">
<div id="main-nav">Navegación principal</div>
<div id="header">Encabezado</div>
<div id="sidebar-a">Barra lateral A</div>
<div id="content">Contenido</div>
<div id="footer">Pie de página</div>
</div>
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:
<div id="contenido">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim mecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris Fusce malesuada enim vitae lacus.
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede Nam augue lorem, semper at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula In hac habitasse platea dictumst.
</div>
El rendimiento es el siguiente:
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:
<div id="barra lateral-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim mecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris Fusce malesuada enim vitae lacus.
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede Nam augue lorem, semper at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula In hac habitasse platea dictumst.
</div>
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, <h1> a <h6> son nuestros códigos de encabezado html de uso común. Por ejemplo, generalmente utilizamos <h1>nombre del sitio web</h1>, <h2>subtítulo del sitio web</h2>, <h3>título principal del contenido</h3>, etc. Agregamos lo siguiente a la capa Encabezado (Div) del archivo html:
<div id="encabezado">
<h1>Iluminar diseños</h1>
</div>
Actualice la página y podrá ver el título enorme y el espacio en blanco alrededor del título. Esto se debe al tamaño y margen predeterminados de la etiqueta <h1>>. Para eliminar estos espacios en blanco primero, debe agregar:
h1 {
margen: 0;
relleno: 0;
}
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:
<div id="navegación-principal">
<ul>
<li id="acerca de"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Acerca de</a></li>
<li id="servicios"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Servicios</a></li>
<li id="portafolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portafolio</a></li>
<li id="contacto"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Contáctenos</a></li>
</ul>
</div>
(Nota: el tutorial original usaba dl y dt, jorux usa las etiquetas ul y li más utilizadas aquí)
En la actualidad, el rendimiento de la barra de navegación es relativamente pobre, pero su rendimiento especial se presentará en futuros tutoriales, por lo que es necesario ocultar temporalmente la barra de navegación, así que agregué:
<div id="navegación-principal">
<dl clase="oculto">
<dt id="acerca de"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Acerca de</a></dt>
<dt id="servicios"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Servicios</a></dt>
<dt id="portafolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portafolio</a></dt>
<dt id="contacto"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Contáctenos</a></dt>
</dl>
</div>