Sombrero adaptativo. Encabezado de página
En el último artículo hicimos esqueleto de nuestra plantilla HTML, que está listo para su llenado y registro. hoy te lo diré cómo hacer un hermoso encabezado de sitio web(parte superior) y un menú sencillo. Hoy también haremos algunos cambios en los estilos de otros bloques.
Entonces, ¿qué tenemos ahora? Ahora tenemos estos estilos:
HTML, cuerpo (altura: 100%; color: #000; fondo: #FFFFFF; ajuste de palabras: palabra de corte; tamaño de fuente: 12px; familia de fuentes: Verdana, Arial, Sans-Serif; ) #wrapper (altura :auto!importante; altura:100%; altura mínima:100%; ) #encabezado (altura:100px; ) #contenedor (ancho mínimo:800px; ) #centro (margen:0px 200px 0px 200px; ) #izquierda ( float:izquierda; ancho:200px; ) #right ( float:derecha; ancho:200px; ) #pie de página (alto:100px; margen superior:-100px; ) .clear ( clear:ambos; ) #espacio (alto:100px ; )
Y aquí está el código de la plantilla en sí:
En primer lugar, hagamos algunos cambios en el estilo del bloque contenedor:
#wrapper (altura:auto!importante; altura:100%; altura mínima:100%; ancho: 1024px; margen: 0 automático; alineación de texto: izquierda;)
Establecí un ancho fijo: el ancho del bloque, 1024 píxeles de tamaño, alineé el bloque en el centro y el texto en él a la izquierda usando text-align: left. Podemos alinear el bloque al centro usando el estilo de margen, configurando los márgenes superior e inferior en 0 y el ancho en automático. Desafortunadamente, esto no siempre funciona en Internet Explorer 6, por lo que en el cuerpo agregué text-align: center; y es por eso que tuve que alinear el texto en el bloque de ajuste y el pie de página a la izquierda. También especifiqué margen:0 en el cuerpo, estableciendo así los márgenes desde los bordes en 0 píxeles. Como resultado, Body terminó con los siguientes estilos:
HTML, cuerpo (altura: 100%; color: #000; fondo: #FFFFFF; ajuste de palabras: palabra de corte; tamaño de fuente: 12px; familia de fuentes: Verdana, Arial, Sans-Serif; margen: 0; texto -alinear: centro)
También hice cambios en el sótano:
#pie de página (ancho: 1024 px; margen: 0 automático; alineación de texto: izquierda; altura: 100 px; margen superior: -100 px; fondo: #4a90d9;)
Todo aquí es similar al bloque contenedor: establezca el ancho en 1024 px, alinee el bloque en el centro y alinee el texto a la izquierda. También agregué margin-top al contenedor: margin-top: 20px; y eliminamos el ancho mínimo, ya que tenemos un ancho envolvente fijo.
Bueno, hemos preparado la plantilla, es hora de pasar al encabezado del sitio. Los estilos serán así:
#encabezado (altura: 140 px; fondo: #fff; relleno superior: 40 px;)
La altura del bloque es de 140 píxeles, el fondo es blanco y el margen desde el borde superior es de 40 píxeles. Esos son todos los cambios en los estilos de encabezado.
¿Qué? ¿Esto es todo? ¿Y hay un artículo completo que lleva este nombre?
Por supuesto que no. El encabezado del sitio constará de otros elementos: un logotipo y un menú, que se diseñarán por separado.
registrémonos en código de plantilla HTML Dentro del bloque de encabezado hay esta línea:
Esto es esencialmente un enlace a la página principal sin texto, pero se le asigna una clase="logotipo". Ahora necesitas diseñarlo en estilos CSS.
Logotipo ( pantalla:bloque; alto: 104px; ancho: 390px; fondo: url("image/logo.png") sin repetición; )
Hice el bloque de elementos, le di ancho y alto, y también hice una imagen de logotipo como fondo, que puse en el directorio de imágenes. Todas las imágenes de plantilla se ubicarán en este directorio. El tamaño de la imagen es 388*100 píxeles, entonces, ¿por qué el tamaño del bloque es ligeramente diferente? Hice la altura de 104 píxeles para que hubiera un espacio de la imagen del logotipo en la parte inferior entre el menú futuro y el logotipo, y tomé el ancho dos píxeles más por si acaso, ya que un par de veces me encontré con que Mozilla determinó incorrectamente el tamaño de la imagen y la recorté un poco. Eso es todo, hemos terminado con el logo. Menú en
Del autor: Bienvenido a nuestro blog sobre creación de sitios web. Cualquier sitio tiene algo que normalmente lo hace memorable y se destaca del resto. Generalmente este es el encabezado del sitio. CSS te permite hacerlo de la manera que quieras.
Encabezado del sitio web: cómo es
Es sorprendente cuánto puede depender hoy en día simplemente del diseño de un recurso web. Pero, ¿qué diferencia particularmente a un recurso web de otros? Como regla general, este es el encabezado del sitio con un logotipo corporativo y un diseño único. Por lo general, así es como la gente recuerda algún tipo de proyecto de Internet. Esto queda muy bien grabado en la memoria de la gente.
Por ejemplo, si ve una letra "B" blanca sobre un fondo azul, probablemente concluya inmediatamente que se trata de un icono de la red social VKontakte. Y todo el mundo asocia inmediatamente la imagen de una paloma mensajera con Twitter. Todo esto fue posible porque estos sitios tenían esas imágenes en los encabezados y la gente las recordaba muy bien.
Bien, eso fue un poco de reflexión, ahora vayamos directamente a la parte técnica.
¿Cómo se puede diseñar el encabezado de un sitio web en CSS?
En general, los sombreros son diferentes. Según su ancho, se pueden dividir en dos grupos: los alineados al centro y los que abarcan todo el ancho de la página web.
Anteriormente, el encabezado se hacía de la misma manera que cualquier otro bloque: a una etiqueta div normal se le asignaba el identificador requerido, después de lo cual se ingresaba todo el contenido necesario y luego se formateaba todo. Hoy en día ya es costumbre escribir de otra forma. Especialmente para crear un encabezado de sitio en HTML5, apareció una etiqueta emparejada: encabezado. Se recomienda su uso, permite a los navegadores comprender qué es esta parte de la plantilla y qué hace. Por cierto, si quieres aprender los conceptos básicos de HTML5, tienes una ruta directa al nuestro, donde podrás ver lecciones sobre esta tecnología.
Por lo tanto, para crear un encabezado simple, simplemente escriba el siguiente código en html:
< header > < / header > |
Por supuesto, todavía no aparecerá nada en la página; todavía tenemos que agregarle contenido y diseñarla. Pero hagamos, por ejemplo, un bloque que ocupe todo el ancho de la pantalla y también lo decoremos un poco.
encabezado (ancho: 100%; fondo: #D8E3AB; alto: 70px;)
encabezado ( ancho: 100%; fondo: #D8E3AB; altura: 70 píxeles; |
En general, si todo se hace correctamente, entonces al bloque se le debe dar algún tipo de clase o incluso un identificador (ya que este es un elemento importante de la página web), pero por ahora simplemente nos referiremos al elemento por etiqueta.
La propiedad width: 100% hace que nuestro bloque se extienda a todo el ancho, independientemente del tamaño de la pantalla. Sin embargo, si las dimensiones necesitan ser limitadas de alguna manera, use la propiedad adicional de ancho máximo, donde el tamaño absoluto está escrito en píxeles, al alcanzar el cual el contenedor ya no se expandirá.
Ahora solo tenemos frente a nosotros una franja pintada del color seleccionado. Por lo general, la altura no se especifica; se determina automáticamente en función de los elementos que estarán en el encabezado.
< div id = "wrap" > < header > < / header > < / div > |
De esta manera, nuestra parte superior del sitio estará ubicada exactamente en el centro. Sólo queda llenarlo.
Arroz. 1. Por ahora, este es sólo un contenedor que contendrá todo el contenido.
¿Qué suele contener un sombrero?
Por lo general, allí se insertan un logotipo, un nombre y una descripción del sitio. También puede haber alguna información de contacto, navegación de la página o incluso publicidad.
El logotipo suele insertarse como imagen de fondo. Pongamos, por ejemplo, esto:
Para hacer esto, simplemente agregue algunas reglas en segundo plano:
fondo: #D8E3AB url(logo.png) sin repetición 5% 50%;
fondo: #D8E3AB url(logo.png) sin repetición 5% 50%; |
Es decir, además del color sólido, también le damos una imagen de fondo (en nuestro caso, logo.png) y primero la coloco en la misma carpeta que el archivo de estilos. Prohibimos la repetición del logotipo y determinamos su posición en el bloque: lo desplazamos ligeramente hacia la izquierda y verticalmente en el centro.
Agreguemos algo de contenido al encabezado. Por ejemplo, encabezado y menú.
< div class = "title" >Nombre del sitio< / div > < ul class = "menu" > < li > < a href = "#" >Contactos< / a > < / li > < li > < a href = "#" >Sobre nosotros< / a > < / li > < li > < a href = "#" >Servicios< / a > < / li > < / ul > |
Ahora formalicemos todo esto.
Título( tamaño de fuente: 36px; relleno-superior: 10px; alineación de texto: centro; ) .menu( estilo de lista: ninguno; posición: absoluta; superior: 10px; derecha: 100px; )
Título ( tamaño de fuente: 36px; relleno-superior: 10px; alineación de texto: centro; |
Vi un curso en vídeo sobre diseño de sitios web en bloques de Andrey Morkovina.
Empecé a mirar con la sensación de que estaba a punto de aprender algo nuevo. Pero tuve suficiente paciencia para mirar hasta la novena parte. Estoy cansado de ver al autor luchar con el diseño de la plantilla y, en particular, con cómo se creó el encabezado.
Por alguna razón, el autor recortó solo una parte del fondo con navegación, insertó una imagen de logotipo en un marco html y la envolvió con un enlace, e intentó adivinar la ubicación de la navegación usando posicionamiento absoluto o relativo. Decidí intentar hacer yo mismo el encabezado del sitio de una manera que me parezca más correcta.
Basé la creación del encabezado en la propiedad de las capas anidadas en
, , que define las propiedades de centrar la página y establecer su ancho: #wrap (ancho: 800px; alto: 100%; margen: 0 auto; fondo: #c0c0c0;)Luego se crea una capa
y establezca su altura: #header (ancho: 100%; alto: 70px;)Luego creo una capa
| 1 | div id = "navegación" |
La imagen es corta y no ocupará todo el ancho del encabezado, sino solo parte de su parte derecha, lo suficiente para acomodar la lista de navegación. El código CSS para esta capa se encuentra a continuación:
#nav (fondo: url(i/bg-nav.gif) #b318cf 100% 0 sin repetición; altura: 70px;)Ahora creo otra capa.
y se ubicará encima de esta capa, superponiéndola.Por lo tanto el fondo de la capa
Establecí explícitamente su altura. El código con las propiedades se muestra a continuación: #head (fondo: url(i/bg-header.gif) #2b66c8 0 0 no-repeat; altura: 50px;)Pues el problema está prácticamente solucionado. En este caso no se utilizó posicionamiento absoluto ni relativo. solo compensa el fondo de la capa. Queda por crear la última capa, que realizará la tarea del logotipo del sitio. Lo coloco encima de todas las demás capas y hago que se pueda hacer clic en todo su espacio.
En este caso volveré a utilizar la imagen de fondo, que pondré dentro de esta capa. ¡No hay img en el código html! No es necesario posicionarlo ni moverlo a ningún lado, ya que por defecto estará ubicado en la esquina superior izquierda del bloque ( como pretendía para la simplicidad del experimento). Simplemente estableceré explícitamente la altura y el ancho de esta capa para que sean iguales a la altura y el ancho de la imagen de fondo:
#logo (fondo: url(i/logo.gif) #36cf18 0 0 sin repetición; ancho: 30px; alto: 30px;)Para que se pueda hacer clic en la capa, coloco un enlace dentro de ella. Dado que inicialmente es un elemento en línea (
.| 1 | pantalla: bloque |
Todo lo que queda es crear el menú de navegación del encabezado, que debe estar ubicado en la parte superior de la capa.
. Ya que según el código la capa es .Ahora basta con desplazar la lista hacia la derecha usando
| 1 | flotador: derecha |
El único punto que me causó dificultades fueron las hendiduras apenas perceptibles que aparecieron entre el bloque externo.
. Inicialmente les registré la propiedad y el problema se resolvió. Para elementos y para, además configuro la altura de la línea. Los espacios desaparecieron y los elementos del menú se extendieron hasta toda la altura del bloque principal.Eso es todo, el encabezado del sitio está listo. Si miras el código html, puedes ver que es "correcto". Es decir, no está plagado de todo tipo de
| 1 | imagen |
A continuación se muestra el marco HTML completo y el código CSS.
/* restablecer */ * (margen: 0; relleno: 0;) /* principal */ #wrap (ancho: 800px; alto: 100%; margen: 0 auto; fondo: #c0c0c0;) #encabezado (ancho: 100 %; altura: 70px;) #nav (fondo: url(i/bg-nav.gif) #b318cf 100% 0 sin repetición; altura: 70px;) #nav ul (tipo de estilo de lista: ninguno; flotante: derecha;) #nav li (pantalla: bloque en línea;) #nav a (decoración de texto: ninguna; color: #fff; peso de fuente: negrita; margen derecho: 15 px; altura de línea: 20 px; pantalla: en línea -block;) #head (fondo: url(i/bg-header.gif) #2b66c8 0 0 no-repetir; altura: 50px;) #logo (fondo: url(i/logo.gif) #36cf18 0 0 no -repetir; ancho: 30px; alto: 30px;) #logo a (pantalla: bloque; ancho: 100%; alto: 100%;)Aquí presentaré un diagrama que dibujé de la ubicación de todos los bloques en el encabezado del sitio.
El elemento del sitio que veremos hoy es uno de los más importantes y notables de la página. A veces no lo hacen demasiado grande. Puede ser estático o dinámico. Todo depende de los deseos y fantasías del diseñador y propietario del sitio. Quizás ya hayas adivinado de qué hablaremos; así es, del encabezado del sitio. Hoy veremos cuatro formas no estándar de diseñar esta parte del sitio. Gracias a estos métodos, su sitio definitivamente se destacará de los demás.
Puedes ver cuatro ejemplos en el siguiente enlace:
Descargar
¿Cómo utilizar? — Encabezados animados para el sitio.
parte HTML
En el código de la página, todo lo que necesitas insertar es:
| 1 2 3 | <div id = "encabezado grande" clase = "encabezado grande" > |
en el bloque Luego, al final de la página, debe conectar las bibliotecas necesarias. estan en la carpeta js(en el archivo con fuentes - enlace al principio del artículo). Por ejemplo, en el ejemplo número 1, debe incluir las siguientes bibliotecas: A continuación he tomado capturas de pantalla de cada uno de los efectos.parte de javascript
