oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso Dreamweaver - Lección 6: Encabezados II
Para aplicar un estilo de encabezados a nuestra página lo primero que vamos a hacer es abrir nuestra hoja de estilos, como veras primero insertamos los códigos en nuestra hoja de estilos y esto esta haciendo que todo nuestro trabajo actual nos sirva para futuras modificaciones de nuestra web puesto que si modificamos algo en nuestra hoja de estilos se aplicara esa modificación a todas nuestras páginas de nuestra web... imaginate cambiar pagina por pagina los titulos de oletusWEBos que actualmente tendrá unas 80 paginas bufffffff!!! no quiero ni imaginarlo así cambiando algún atributo de mi hoja de estilos se cambiara automáticamente en todas las páginas.
Bien una vez abierto nuestra hoja de estilos insertamos el siguiente código para los encabezados h1:
h1 {
color:#F90;
text-decoration: none;
font-size: small;
font-weight: bold;
}
Y este otro para los encabezados h2:
h2
{color: #00F;
text-decoration: none;
font-size: small;
font-weight: bold;
}
Guarda los cambios en el archivo estilo.css y abre ahora el index.html dale al botón de previsualizacion y observaras que los titulos que antes eran demasiado grades y en color negro han cambiado de aspecto:
Eso es porque esos encabezados de la plantilla del Dreamweaver que hemos elegido al principio del curso ya tenían puestas las etiquetas <h1> y su cierre </h1> y <h2> y su cierre </h2>. Vamos a borrar nosotros esos encabezados para poner unos nosotros que peguen mejor con nuestra web de motos.
Primero borra los encabezados "Contenido principal" y "Encabezado de nivel H2", sombrea en la pantalla de Diseño el encabezado "Contenido principal" y antes de borrarlo observa en la pantalla del código HTML no estan sombreadas las etiquetas <h1> y </h1> borralas también para que aprendas bien como insertar el encabezado h1
Sigue leyendo en la siguiente página para ver como insertamos un nuevo encabezado h1 para nuestra página y si tienes alguna duda comentanoslo en el Foro OTW.
Quiero aprender más!!!
- Avanzar a Lección 6: Encabezados III
- Retroceder a Lección 6: Encabezados
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®