Dicen que cada webmastercillo tiene su librillo... je je y yo tengo el mio, claor. Para mi, una buena manera es la siguiente:
Si tu web tiene por ejemplo cinco secciones llamadas seccion1, seccion2....seccion5, crea en tu espacio web 5 carpetas con esos nombres (no estos, sino los nombres de las secciones que en tu caso serían portada, noticias, etc)
Espacio web y sus carpetas:
-seccion1
-seccion2
-seccion3
-seccion4
-seccion5
-comun
Crea también una carpeta llamada, por ejemplo, comun, donde puedes guardar eso, todos los archivos comunes, como el logotipo, la hoja de estilo comun a todas, etc.
Bien. Una vez que tienes terminada una página, puedes guardarla en la carpeta comun con el nombre plantilla.html. Esa página te sirve de base para generar todas las demás.
Igual que puedes ponerle una hoja de estilo a una página, también puedes ponerle dos. De este modo, puedes hacer que lea una primera hoja de estilos donde has definido propiedades comunes, que han de respetar tooodas las subpaginas de la web. Esto se hacía así, inlcuyendo esta línea en el Head de cada página:
<LINK rel="stylesheet" href="../comun/estilos.css" type="text/css" media="all">
Fíjate que como se supone que guardas las subpáginas en la carpeta de su sección, para llegar desde allí a la hoja de estilo ubicada dentro de la carpeta común tienes primero que salir de la carpeta de esa sección (eso se logra poniendo en la ruta dos puntos "..") y luego has de entrar en la carpeta comun (eso se logra escribiendo despues de los dos puntos esto: /comun) para llegar finalmente al archivo estilos.css. Por eso en la ruta he colocado "../comun/estilos.css".
Bien, con eso cada subpágina lee los estilos generales que has definido en estilos.css El estilo al que te refieres, para colorear la lengüeta de la sección correspondiente solamente, no has de definirla allí, pues allí solo ponemos lo común.
Para definir cosas que solo pretenecen a una sección concreta (el color de su lengüeta, por ejemplo) lo puedes haces en una segunda hoja de estilos, que guardarás dentro de cada una de las carpetas de cada sección. Imagina que llamas a esa segunda hoja de estilo "estilo-de-seccion.css". Pues en ella defines el coloreado de la sección y la guardas dentro de su carpeta correspondiente. Haz lo mismo con el resto de secciones.
Ahora, dentro del Head de cada una de las subpáginas y justo después de la línea que enlaza a la primera hoja de estilo, escribes esto:
<LINK rel="stylesheet" href="estilo-de-seccion.css" type="text/css" media="all">
Con esa línea, el navegador primero lee la hoja de estilos comun y cuando termina lee la segunda y memoriza todos los estilos.
Fíjate que en este caso, la ruta es distinta. Ya no retrocedemos para salir de la carpeta seccionX, pues como tanto la subpágina como esta otra hoja de estilo están en la misma carpeta, no es necesario y basta con poner directamente el nombre de esa segunda hoja de estilo.
Es bueno que estas hojas de estilo secundarias se llamen todas igual. El navegador no se va a confundir leyendo otra de otra carpeta pues en la ruta queda claro que ha de leer la de SU carpeta.
Espacio web, sus carpetas en negrita y sus archivos dentro:
index.html
-seccion1:
.........subpagina1deseccion1.html
.........subpagina2deseccion1.html
.........estilo-de-seccion.css
.........objetos
..................fotouno.gif
..................fotodos.gif
-seccion2:
.........subpagina1deseccion2.html
.........subpagina2deseccion2.html
.........estilo-de-seccion.css
-seccion3:
.........subpagina1deseccion3.html
.........subpagina2deseccion3.html
.........estilo-de-seccion.css
-seccion4:
.........subpagina1deseccion4.html
.........subpagina2deseccion4.html
.........estilo-de-seccion.css
-seccion5:
.........subpagina1deseccion5.html
.........subpagina2deseccion5.html
.........estilo-de-seccion.css
-comun:
.........estilos.css
.........logotipo.gif
.........fondo-de-paginas-gif
Como ventaja, seguimos teniendo el codigo html de la plantilla exactamente igual para todas las secciones, lo que es un ahorro de tiempo al no tener que modificar nada en función de a qué sección corresponda cada subpágina, no?
Ahora queda cómo decir con la hoja de estilo secundaria, que la lengüeta se muestre con un color u otro. Vamos allá:
Gracias a que tu ya has colocado una clase de estilo a cada lengueta, basta con colocar en la hoja de estilo secundaria la definición del color verde para el tema que corresponda.
Así, por ejemplo y en tu caso, para dibujar como Activa la lengüeta de la sección Noticias, te basta con crear la hoja de estilo secundaria llamada estilo-de-seccion.css, abrirla, ponerle esta línea:
#tema02 {background-image: url(objetos/pestana-corta-activa.gif);}
y guardarla dentro de la carpeta
noticias.
Y haces lo mismo con el resto de secciones, crear la hoja
estilo-de-seccion.css en cada carpeta y le pones a cada una esa línea cambiando el número del tema que le corresponda.
Solo una cosa más. Antes debes abrir la hoja dde estilos común (en tu caso es plantilla.css) y dejar inactivos todos los temas, es decir, asignarle la imagen en estado inactivo, con fondo blanco, pues será la hoja de estilos secundaria la que cambie esto.
Te hablo de cabeza... si algo falla me lo dices y lo arreglamos, oki?
Con esto podeis ver las ventajas que tiene el guardar las subpáginas de cada sección en carpetas distintas. Tiene más ventajas que ireis descubriendo poco a poco.
Un abrazo y buen trabajo! :wink:
