Skip to content

Encabezado (Header)

1 agosto 2009

header

La mayoría ve un blog y lo ve como un todo, pero ya una vez que te adentras en su estructura te das cuenta que está hecho en partes, una de ellas y la que le da la personalidad y lo hace ver diferente de los demás es el Encabezado o Header, ésta parte la encuentras en tu CSS como #header{ }.

El simbolo # en CSS te ayuda a representar los conocidos DIV’s que es como ubicas tu contenido por medio de XHTML, tu blog está estructurado por los siguientes básicamente:

  • Wrapper (Area que rodea tu blog)
  • Header (Encabezado)
  • Container (Contenido)
  • Sidebar (Area lateral, izquierda o derecha, o ambas)
  • Footer (Parte inferior de tu blog)

En algunas ocasiones los hacen más complejos, sobre todo en el caso de los blog estilo revista (magazine). que se han puesto tan de moda, debido a que te pone extractos de cada noticia en tu página de inicio.

O simplemente utilizan DIV’s con nombres diferentes, pero en general casi todos son bastante parecidos a éstos que menciono.

Una forma de usar reglas CSS en tu header:

#header { background:#FF0066; width:920px; height:180px; }

Lo que estamos diciendo en ésta parte es que queremos que nuestro encabezado tenga un color de fondo (background) rosa, con un ancho (width) de 920 pixeles y una altura (height) de 180 pixeles, como verán no es nada del otro mundo, solo unas sencillas instrucciones y hemos cambiado el encabezado.

En caso de que deseen poner una imagen como fondo:

#header { background: url (image); width:920px; height:180px; }

Ya dependerá del diseño de tu blog, el tamaño que tenga el encabezado, me ha tocado ver algunos que ni siquiera tienen encabezado o en su caso, solo el menú donde va situadas las páginas que tienes en tu weblog.

Espero haber despejado algunas de tus dudas, existen muchas reglas en el CSS y muchas de ellas son aplicables para el encabezado, espero tus comentarios o dudas, saludos!

Anuncios
No comments yet

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: