Más capas, más capas

Ya tenemos nuestra primera capa llamada cabecera. Al final de estas lecciones esta capa contendrá la cabecera, que segurametne conste del logotipo de la web y de un hueco para, por ejemplo, algo de publicidad para sufragar los gastos de un posible dominio propio y quién sabe, de un hosting de pago... no es algo descabellado, no te creas.

Pero con esa capa solo no tenemos ni para empezar, je je. Vamos a crear una segunda capa que contendrá una barra de navegación. La llamaremos, navegacion (sin acentos, y todo en minúsculas, claro).

Qué es una barra de navegación?

Una de las cosas más importantes en una página web es el dar facilidades al visitante para que pueda navegar por nuestras páginas sin perderse y que lo tenga todo a mano. No es bueno tener páginas econdidas, es decir, páginas a las que para acceder haya que ir primero a la sección tal, luego a la subsección cual, luego entrar en otro lado y finalmente conseguir acceder a una página en concreto. Todas las páginas deberían ser accesibles sin más que pulsar un par de enlaces desde el index o página principal.

La barra de navegación nos ayuda a esto. En esta barra que aparecerá en todas las páginas de la web pondremos enlaces a las secciones que tratemos. Así, en cualquier momento el visitante puede ir de un lado a otro sin perderse.

Esto es son varios ejemplos de barras de navegación:

Como ves, dan acceso a varias secciones y pueden ser muy sencillas o más complicadas o llamativas con lengüetas y todo eso. Pues ahora que sabes lo que son, vamos a crear la capa de nuestra barra de navegación.

Creando la capa navegacion

La llamaremos "navegacion" y solo va a existir una por página, luego se trata de un estilo único y se define por tanto así en la Hoja de estilo:

#navegacion {background-color: gray }

Escribimos eso en la Hoja de Estilo. Después abrimos la plantilla.html y escribimos, a continuación del div cabecera, esta otra línea:

<div id="navegacion">Barra de Navegación</div>

Como puedes ver, en la Hoja de Estilo le hemos dado a navegacion la propiedad de color de fondo gris (gray). Más adelante le pondremos más cosas, pero ahora seguimos creando el resto de capas.

Creando las capas contenido y pie

Ya que estamos, vamos a crear dos capas más. La primera se llamará contenido y en ella pondremos luego un menú lateral y los textos de nuestra web, la parte principal. También vamos a crear otra capa para la parte más baja de la web que llamaremos pie en la que más tarde tendremos algunos enlaces, un mensaje de copyright y puede que otro espacio para publicidad, ya veremos.

Siguiendo las mismas instrucciones que antes, definimos estas otras dos capas en la Hoja de Estilo:

#contenido {background-color: orange}

#pie {background-color: brown}

Y tras guardas la Hoja de Estilo, abrimos la plantilla.html y ponemos estas otras dos líneas después de la de la capa navegacion:

<div id="contenido">Esta será la zona principal de la web</div>

<div id="pie">Este es el pié de página</div>

Y el resultado es...

Tras guardar todo, en la Hoja de Estilo tendrás esto:

En la plantilla.html esto otro:

Y aquí tienes el resultado del ejemplo. Se que no parece una página web, pero no me dirás que no está tomando forma, no? Verás como esto empieza a cambiar en breve..

Rescoluciones de pantalla y páginas web

Existen varias formas de darle un tamaño a una página web. Por ejemplo, podemos hacer que ocupe toda la pantalla del navegador del usuario, sea como sea esta de grande, la tenga o no maximizada (la ventana...), o también podemos darle un ancho concreto, de modo que los que tengan un monitor pequeño la verán muy grande y los que la tengan más grande (la pantalla...) la verán más chica...

Ambos casos tienen su parte buena y su parte mala. En el primer caso, si le decimos que ocupe toda la pantalla del navegador es muy posible que la web de desmorone cuando el usuario cambie el tamaño de esa ventana. Los elementos grandes no caben y desplazan el contenido siguiente hacia abajo, produciendo un caos en la web. Lo bueno es que se aprovecha todo el espacio, cuando lo hay, claro.

El otro caso es darle un ancho fijoa la página web (por ejemplo 20 cm, o 800 pixeles). Así el usuario podrá hacer lo que quiera con la ventana de su navegador que la web seguirá manteniendo su forma y no se deformará en absoluto. Eso es lo bueno, lo malo es que si no acertamos en qué anchura darle, pasará que unos la verán muy grande y la verán tan pequeña que tendrás más margenes a los lados que espacio para la web.

Qué opción tomamos entonces?

Lo mejor es tomar la segunda opción, dar un ancho fijo a la web, pero estudiando muy bien cuál será esa anchura. Lo mejor es darle un ancho que sea cómodo para la resolución más usada por todo nuestro público. Así, si unos pocos usan una resolución de pantalla un poco mayor no verán unos márgenes exagerados y los que usen resoluciones un poco menores al ancho que le demos, no tendrán que usar demasiado la barra de desplazamiento y además, serán la minoría.

Parece ser que hoy por hoy la anchura óptima para una página web es de 800 pixeles. De echo, si miras las webs que sueles visitar verás que es así y que quedan muy bien con cualquier resolución. Así que... vamos a darle a la web del ejemplo esa anchura y además vamos a hacer que aparezca centrada en la ventana del navegador, las dos cosas a la vez, oki?

Un Div para dominarlos a todosss

Exácto. Como queremos centrarlo todo, lo que haremos será encerrar toda la parte visible de la web en un div al que le definiremos en la Hoja de Estilo la propiedad de centrado, pero de un modo algo especial para que funcione en todos los navegadores. Lo llamaremos.... "global". Como va a ser único, es decir, solo va a haber uno por página, en lugar de definirlo con un punto delante y el class="global" en el Html, lo haremos con la almohadilla y con id="global".

Para encerrar todo lo visible, ponemos la etiqueta de inicio justo después de <body> y la de cierre justo antes de </body>. El código Html queda así:

Ves como encierra a los otros divs? Ahora, en la hoja de estilo definimos #global con las siguientes propiedades:

#global {width:800px ; margin: 4px auto }

Esto significa que la capa global tendrá un ancho de 800 pixeles y aparece una propiedad que no hemos visto antes, (margin: 4px auto) que define el margen a dejar entre el elemento (en este caso el div global) y el resto de cosas a su alrededor. El 4px es la cantidad de margen que vamos a dejar por encima y por debajo de la web, mientras que auto es la cantidad de margen que dejaremos por cada lado. Auto significa automático, por lo que se dejará todo lo que exceda de 800px y automáticamente, es decir, la mitad a la derecha y la otra mitad a la izquiera y por tanto, centrado. Lo veremos mejor más adelante, no te preocupes si no lo entiendes demasiado bien, vale?

Esto no funciona en todos los navegadores a menos que definamos una caracteristica a Body en la Hoja de Estilo estilo-general.css. Abrela si la cerraste y escribe al principio del todo esta nueva línea de css:

body {text-align: center}

Body no es un nombre de un estilo inventado por nosotros, como cabecera, pie, tal y cual, sino que es una etiqueta de Html, y a las etiquetas de Html (como body, p, a, table, div, etc..) no se les pone ni el punto delante ni la almohadilla (#). Lo que estamos haciendo al ponerle propiedades a una etiqueta es cambiar las propiedades que tiene por defecto. Con esto ya queda toda la web centrada en toooodos los navegadores. Si guardas ahora la Hoja de Estilo y haces vista previa de la plantilla.html verás como todo aparece centrado y con un ancho fijo de 800px. Ahora no será fácil descuadrar tu web.

Esto es lo que hemos conseguido con el ejemplo hasta el momento. Va mejorando poco a poco....

El menú de nuestra página web

Estate atento en esta lección, que igual es un poco espesa, pero merece la pena para crear el menú lateral y empezar a entender como se usan estas capas o divs.

Ahora queremos crear un menú lateral parecido al de esta misma web, el de la izquierda de estas líneas. Te gusta? Pues a ti te puede quedar mucho mejor si tienes un poco de gusto y ganas de experimentar. Como un menú es más o menos una zona rectangular, vamos a crear una capa para meter en ella este menú. Como queremos que salga dentro de la parte central de la página, dentro de la zona de los textos, meteremos o crearemos este div que vamos a llamar menu dentro del div contenido. Parece lógico, no? Esto es lo que se llama anidar capas.

Empezamos creando la capa. Abre en el Html-Kit la plantilla.html y escribe la siguiente línea justo después de la etiqueta de inicio de la capa contenidos y antes del texto de dentro suya (Esta será la tal y cual...), de forma que quede el código Html así:

Como verás, después del código Html de la capa menu, van los textos de la capa contenido (Esta será la ....) y después, en la siguiente línea vemos la etiqueta de cierre del div contenidos.

Ahora tienes que definir el estilo de la capa menu en la Hoja de Estilos. Abre estilo-general.css y escribe esta línea para el div menu:

#menu {background-color: yellow; width: 150px ; float:left }

Como solo hay un menú por página, lo definimos como estilo único, con la almohadilla (#). Le ponemos un color diferente al resto para distinguir donde empieza y donde termina la capa menu y colocamos dos propiedades más.

La primera es width:150px con la que le damos una anchura fija de 150 pixeles. Quizás sea poco, pero por ahora lo dejamos así hasta que veamos si nos va a faltar anchura en esa capa. La segunda nueva caraterística que vemos es nueva, la propiedad Float.

Para que sirve la propiedad Float?

La propiedad Float hace que el elemento flote sobre el resto de la web. Esto vale para cambiarlo de posición más fácilmente. A la propiedad float se le suele poner uno de estos dos valores, left (que flote a la izquierda) o right (lo manda a la derecha). Como nosotros queremos tenerlo a la izquierda, le pondremos la propiedad float:left y esto lo manda pegarse al borde izquierdo de la capa en la que está, es decir, a la izquierda de la capa contenido.

Y el resultado final.... por ahora...

La Hoja de Estilos queda por tanto así (puedes ver como voy ordenando los estilos definidos por orden de aparición en la página, de arriba a abajo):

Ale, lo de siempre.. guarda la Hoja de Estilos y mira como está quedando la plantilla haciendo vista previa, o si el cansancio puede contigo, miralo aquí mismo, je je je. Bueno, ya están todas las capas creadas (mucho más adelante quizás metamos alguna más...) así que ahora vamos a rellenarlas y a darles una mejor presencia, oki?

Rellenando el menú de nuestra página web

El menú así como lo hemos dejado ni parece menú ni parece ná de ná. Vamos a insertarle algunos enlaces (ficticios, pues aún no tenemos páginas que enlazar) y así de paso vemos como se estructura correctamente.

Si es un listado, usa listas

Puedes imaginar el menú como una serie de enlaces uno debajo de otro. Se podría pensar en colocar un div para cada uno de ellos, es decir, incluir tantos divs pequeños dentro de la capa menu como enlaces vayamos a poner, pero parece demasiada capa, no? En realidad un menú no es más que una lista y, lo mejor para poner una lista es usar el elemento... lista? Exácto.

Como se hace una lista

Las listas se definen en Html con dos etiquetas, la primera indica el principio de la lista y es <ul> mientras que la otra define en inicio de un elemento de la lista, que es <li>. Te lo puedes apuntar, yo siempre me liaba y terminaba poniendo lu y il, je je je.

Por supuesto, cuando termina la lista se coloca su etiqueta de cierre que será </ul> y cuando termina un elemento de la lista (un enlace en este caso) se coloca </li>, de forma que el código Html de una lista completa sería este mismo:

y se vería haciendo vista previa de este modo:

Para nuestro ejemplo, seguramente nos moleste el dichoso puntito negro a la izquierda de cada elemento de lista, pero eso lo podemos arreglar. Cómo? Pues como siempre, con solo poner una cosilla en la Hoja de Estilos. Pero antes vamos a ver qué cuál es el código que tendriamos que colocar dentro del div del menú.

Para empezar, abre tu Html-Kit y escribe el código de arriba dentro del div menu, eliminando claro la palabra "menú" que habia ya colocado.

Ha de quedar de este modo:

Si haces vista previa verás cosas un poco raras, como que el menú se descuelga un poco por debajo de la web, pero eso lo arreglamos en las siguientes páginas.

Enlaces para el menú de nuestra página web

Como recordarás (eso espero...) los enlaces tenian esta forma:

<a href="ruta/archivo.html">Texto del Enlace</a>

así que vamos a poner ese código dentro de cada elemento li de la lista del menú. Si ponemos una ruta falsa nos dará algún problema, asi que en lugar de poner nada en la ruta le vamos a colocar una almohadilla (#) que sierve para que haga el efecto de enlace pero sin enviarnos a ningún lado por ahora. Cuando tengamos más páginas en la web pondremos las rutas de aquellas páginas que queremos enlazar desde el menú, vale?

<a href="#">Enlace 1</a>

Como no vamos a querer que se abran esos enlaces en páginas distintas sino en la misma, no es necesario ponerle el target al código del enlace (el target="_blanck" se pone para que el enlace se abra en una página distinta, lo recuerdas?).

Pues adelante, abre tu Html-Kit, abre la plantilla.html y copia coloca un enlace en cada uno de los tres elementos de lista que tenemos. Para diferenciarlos, puedes escribir Enlace 1, Enlace 2 y Enlace 3.

Así que el código del menú completo se tiene que quedar así:

Eso es todo lo que tenemos que hacer en la plantilla.html porque lo demás, el "aspecto" como siempre, se lo daremos con la Hoja de Estilo ahora mimo.

Dar estilos Css a la lista del menú

Vamos a empezar a arreglar cosas en la Hoja de Estilos para dar mejor aspecto a este menú. Recuerda que la estrategia perfecta para no tener problemas con algunos navegadores y para tener un código Html sencillo para revisarlo nosotros, y sencillo para que los buscadores lo lean bien e indexen nuestras páginas correctamente, es poner en el Html lo justito, y dejar los detalles de cómo queremos adornar cada cosa para la Hoja de Estilo. Además esto nos permitirá hacer cualquier cambio en todas las páginas de nuestra web con solo cambiar una palabra en la Hoja de Estilos. Es genial.

Reparando el fallo del menú.

Si ya hiciste vista previa de la plantilla, habrás visto que al poner varios enlaces dentro ha crecido y se sale por debajo de la página web. Vamos a reparar esto desde la Hoja de Estilo. Abre tu Html-Kit y abre estilo-general.css

Esto, después de muuuchas pruebas lo he conseguido arreglar de este modo, colocando un width: 800px y un float:left a la capa contenido. No me preguntes mucho porqué, pero es la única combinación que logra que en todos los navegadores se corrija ese fallo. Realmente le estamos indicando a la capa contenido que ha de tener un ancho de 800 pixeles, igual que el ancho de la página. En realidad parece que ocupara menos, pero ten en cuenta que el menú está dentro de él, luego lo amarillo del menú es parte de la capa contenido. Ves ahora como si ha de tener 800px de ancho? El colocarle el float:left evita que en algún navegador se descuadre todo. No se explicarte porqué ahora mismo, y verás como a veces, a pesar de que cumplas todas las buenas prácticas que se pueden leer por la red, hay que hacer alguna "pirula" para que se vea correctamente la página web con cualquier navegador. Es todo un reto, pero por ahora lo estamos consiguiendo.

Sin más rollo, abres la Hoja de Estilo, dejas la línea del estilo contenido de este modo:

#contenido {background-color: orange ; width: 800px ; float:left}

y luego guardas la Hoja de Estilo y haces vista previa de la plantilla.html para que veas como ahora todo se ha solucionado... o no? Si ves algún fallo no dudes en decirmelo en el Foro CCTW, plis!

Eliminando los puntos de la lista

Esta es fácil y comprensible. Podemos modificar las propiedades del elemento li en la Hoja de Estilos, pero el problema que podemos tener es que si lo hacemos así, todas las listas que tengasmos en la web dejarán de tener ese punto, y es más, tomarán todas las propiedades que le digamos ahora. Por eso, mejor que modificar las propiedades del elemento li, lo que haremos será crear un estilo nuevo de li, que usaremos solo en el menú. De este modo todas las listas que pudieramos poner en las otras partes de la web serían normales.

Así que, definiremos en la Hoja de Estilo propiedades para todos los li que cumplan la condición de estar dentro de la capa menu. Toma ya. Cómo te has quedao? je je je. Esto se hace así:

#menu li { ...propiedades..... }

Cuando se pone la capa antes de un tipo de estilo, se está indicando que esas propiedades solo han de respetarse cuando el elemento (en este caso el li) esté dentro de la capa escrita antes (en este caso menu). Que bien, no?

Las propiedades que le vamos a dar son las siguientes:

#menu li { list-style:none }

Esto hace que no tenga ningún (none) tipo de estilo, como por ejemplo el puntito aquel. Si guardas la Hoja de Estilo (estilo-general.css) y haces vista previa de la plantilla verás que ya no aparece. En la página siguiente seguimos arreglando el menú. 

Formatear los estilos a cero

Si tubieras varios navegadores diferentes, como el Internet Exporer, el Opera, el Firefox, etc, etc, te darias cuanta que en cada uno de ellos el menú (y algunas otras cosas) se ve ligeramente distinto. En unos los enlaces aparecen en el centro, en otros un poco a la derecha, o un poco más a la izquierda en otros.. Esto es porque mientras no se indique lo contrario, unos navegadores deciden dejar un margen de unos pocos pixeles para cada elemento, mientras otros navegadores deciden que no, que hay que dejar un poco más o un poco menos... Al final lo que ocurre es que parece imposible ver una pçagina web exáctamente igual con todos los navegadores.

Todos los problemas de este tipo no los vamos a poder arreglar de golpe, pero uno bien importante si. Como cada uno toma por defecto un valor inicial para los margenes y bordes, lo que haremos será indicar nosotros en la Hoja de Estilos que TODOS los elementos van a tener un valor cero para los bordes y margenes. Luego, si deseamos cambiar alguno, lo definiremos en la Hoja de Estilos, pero por el momento lo ponemos todo a cero, o lo que es igual, vamos a formatear los estilos!

Para indicar que ha de aplicarse a todos, ponemos un asterisco. Para indicar que tengan margen, padding y borde cero basta con colocar en la primera línea de todas, esta:

* {margin:0px ; padding:0px ; border: 0px}

Si escribes esta línea en estilo-general.css, la guardas y haces vista previa de la plantilla verás como ahora el menú aparece centrado, justamente centrado, sin margenes. También han desaparecido otros margenes que rodeaban la capa global, etc. Tenemos el poder! je je je.. Eso si, no olvides colocar esa línea la primera de todas, no se te ocurra ponerla la cuarta, la quinta, etc, debe ser la primera de todas, arriba del todo en estilo-general.css. De lo contrario, como el navegador va leyendo los estilos de arriba a abajo, si la lee de las últimas anularás los margenes y bordes de las capas definidas antes de esa lína. Acuérdate!

Enlaces del menú hacia la izquierda

Has visto que todos los elementos de la web de ejemplo salen centrados? Sabes porqué? Pues porque pusimos text-align:center en la etiqueta body, y como el body contiene toda la web, entonces todos los elementos de la web estarán centrados, a no ser que..... a no ser que le indiquemos otra cosa a cada estilo concreto, claro.

Por ejemplo, los enlaces del menú quedan mucho mejor si aparecen alineados a la izquierda, verdad? Pues vamos a arreglar eso ahora mismito! Abre tu Html-Kit, la Hoja de Estilo y, escribe text:align:left dentro de las propiedades de la capa menu, tal que quede así:

#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left }

La verdad, también se hubiera podido poner el text-align:center en el estilo #menu li, no? De la forma anterior se aplica a todos los elementos de la lista, mientras que definiendolo en #menu li solo se aplicaría a los elementos encerrados entre <li> y </li>. Tiene sentido, verdad? Lo dejamos definido en el #menu por ahora.

Ahora los enlaces aparecen bien, a la izquierda, pero un poco demasiado pegados a la izquierda, verdad? Seguimos mejorando el aspecto en la página siguiente.

Qué tal lo llevas? Levántate un poco y estira las piernas, que te va a dar algo malo! je je je je. Si no entiendes algo o quieres que te explique mejor alguna parte dímelo en el Foro CCTW, sin problemas, o escribe allí tus dudas o sugerencias, que para eso estamos colega!

Arreglando los márgenes del menú

Esto ya es cosa de probar y probar, claro. Lo suyo es ajustar los margenes cuando tengamos los enlaces definitivos, pues según lo largo que sea el texto de cada enlace podemos ajustarlo más o menos, al igual que la anchura del menú. Pero como ya estamos liados con esto, vamos pa´lante y lo terminamos, te parece? Va a ser muy facilito.

Aún no te lo he dicho, pero quizás hayas visto ya por algún lado varias formas de especificar los margenes. Se pueden definir de estas formas:

margin: 10px

Esto indica que se ha de dejar 10 pixeles tanto por arriba como por abajo y por ambos lados.

margin: 10px 20px

Este otro modo, con dos cantidades, indica que se ha de dejar 10 pixeles por arriba y abajo y 20 pixeles por la derecha e izquierda. Es decir, la primera cifra indica el margen de arriba y abajo y la otra la de los lados.

margin: 10px 20px 5px 15px

Y este otro modo (puedes escoger el que te venga mejor según si los margenes son iguales para todos los lados o diferentes) define por orden los margenes a dejar por arriba, por la derecha, por abajo y por la izquierda respectivamente. O para acordarnos, la primera cifra es la de arriba y las demás van en sentido de las agujas del reloj (arriba, derecha , abajo e izquierda).

Nosotros, para el caso de los margenes del menú vamos a escoger la última forma, con las cuatro cifras, pues así podemos retocar muy facilmente y ver como va quedando. Empezamos como siempre, abrir tu Html-Kit, abrir la Hoja de Estilos y escribir dentro de los corchetes de la capa #menu li lo siguiente:

#menu li {list-style:none ; margin: 0px 0px 0px 0px}

Lo he puesto todos a cero (en realidad ya estaban todos a cero pues hicimos el formateo con el asterisco hace muy poco) y vamos probando con distintos valores para ver como va quedando.

Lo que más me interesa es dejar un poquito de margen hacia la izquierda para separar los enlaces del borde, y también un poco de margen por encima y por debajo para que no se vean muy apiñados. En cambio el margen derecho me interesa más que siga a cero, pues así tengo más hueco para colocar el texto de cada enlace, lo pillas?

Así que, tras varias pruebas (te invito a que hagas tus experimentos poniendo valores un poco exagerados para ver mejor los efectos) lo vamos a dejar así:

#menu li {list-style:none ; margin: 4px 0px 4px 6px}

Te recomiendo que en estos ejemplos que vamos haciendo pongas exactamente lo mimo que yo. Así no te liarás más adelante cuando hagamos cambios. Confía en mi un poco, no? Tu puedes ir a tu bola si quieres, pero en el otro sitio que hemos creado al principio, al que llamamos mis-experimientos, oki?

Sigo echando de menos algo... Ah! claro, lo de eliminar el subrayado y hacer que cambien de color los enlaces cuando pasas el ratón por encima! Eso mola, vamos a verlo en la página siguiente, es muy sencillo también, y gratis! je je je.

Aplicando estilos css a los enlaces del menú

Estoy seguro de que esto era algo que siempre quisiste hacer, je je. Vamos a ver cómo eliminar el subrayado de los enlaces y cómo resaltar los enlaces del menú cuando pasas el ratón por encima, oki? Eso si, primero un poco de base para que no te pierdas luego.

Cómo se definen las propiedades de los enlaces

Los enlaces como ya sabes, de definen con la etiqueta <a> luego está claro que para modificar sus propiedades basta con escribir una "a" en la Hoja de Estilos y modificar cosas entre los corchetes. Las características que definamos así para los enlaces se aplicarán a todos ellos sea cual sea su estado. Ahora te cuento qué es eso de los estados.

Se distinguen cuatro estados posibles para los enlaces, que son los siguientes:

- link: Es el estado normal que tiene un enlace cuando no está en ninguno de los otros tres estados.

- Visited: Imagino que te habrás fijado que en algunas webs se colorean de otro color los enlaces que ya has visitado antes, verdad? Pues "visited" es el estado del enlace cuando éste ya ha sido visitado por el usuario anteriormente.

- Hover: Es el estado del enlace cuando el cursor del ratón está justo encima de él, pero sin apretar el botón aún. También lo has debido ver, pasas el ratón sobre un menú y se van coloreando o poniendo en negrita los enlaces que señalas.

- Active: Y este es el estado de un enlace o vínculo cuando está siendo presionado por el ratón y mientras no se suelta el dedo.

Hay que ver cuanto estás aprendiendo eh? Y gratis! No te quejaras, je je je. Bueno, pues como te decía antes, si en la Hoja de Estilo solo indicas la "a" de enlace seguido de los corchetes con sus propiedades, entonces esas propiedades afectarán a los enlaces sean cuales sean sus estados. Se haría así (en la Hoja de Estilos, claro):

a {color: blue; font-size:1.3em ; text-decoration: none}

En este ejemplo de arriba le hemos indicado que TODOS los enlaces, sean cuales sean sus estados, han de ser azules (color:blue), han de tener un tamaño de letra de 1,3 veces lo que correspondería normalmente (font-size:1,3em) y finalmente que no deben tener ningún tipo de decoración, esto es, el subrayado (text-decoration: none). Por defecto siempre salen subrayados, que se define con text-decoration: underline

Si no quieres destacar los enlaces según los estados que te he expicado antes, basta con definirlos en esa única línea, no obstante si quieres darle algún toque diferente en función de alguno de esos estados, se vuelve obligatorio definirl los cuatro estados y además en ese mismo orden que te he puesto.

Sin subrayar y marrones, excepto cuando se lococa el cursor encima que pasan a rojos y subrayados

Con estos estilos los enlaces nunca aparecen subrayados hasta que se coloca el cursor del ratón sobre ellos. Esto es bueno, para destacar al usuario que son enlaces. Además pasan de color marrón (brown) a color rojo (red) cuando se pasa el ratón sobre ellos. Fíjate como defino todos los estados aunque deje vacios algunos estados. Siempre hay que ponerlos todos y en ese orden además.

Estas líneas de código puedes escribirlas ya en la Hoja de Estilos estilo-general.css Depués guárdala y mira los cambios con la vista precia en plantilla.html

Qué, se va animando esto o no? No? pues vamos a mejorarlo aún más...

Aplicando más estilos css a los enlaces del menú

Para que se note que controlamos esto un montón, vamos a aplicar un par de propiedades más a los enlaces del menú. Lo primero será tratar estos enlaces como bloques, lo segundo ponerles un color de fondo.

Tratar elementos como bloques

Si te fijas en la vista previa de la plantilla.html verás que es necesario poner el cursor justo encima de las palabras del enlace (se suele llamar Anchor Text a los textos de los enlaces) para que estos funcionen. En cambio podemos hacer un pequeño truco para que estos se activen, funcionen, con solo colocar el cursor sobre la línea, sin necesidad de colocarlo justamente sobre el texto. No se si te has enterado de lo que acabo de decir, igual suena un poco extraño, pero tu haz lo que te digo y verás a qué me refiero.

Añade esta última propiedad dejando el estilo de enlaces de la Hoja de Estilos estilo-general.css así:

a {color: brown ; text-decoration:none ; display: block }

Ocurren dos cosas ahora. La primera es buena, es el efecto que te acabo de comentar, que situando el cursor en la misma línea del enlace pero lejor del texto, también se activa el enlace. La segunda es mala, y es que se nos han separado demasiado los enlaces verticalmente. Por qué será?

Es un defecto de algunos navegadores, como el Internet Explorer, pero esto lo arreglamos rápido con otro truquillo. Pon todos los elementos de la lista uno seguido del otro, en lugar de uno en cada línea de código en la vista Html y verás como se arregla. En adelante, ya sabes que los elementos de las listas, los <li> hay que ponerlos todos seguidos, en la misma línea que los <ul> y </ul>. Con eso se solventa el tema.

Como te veo con los ojos perdidos mirando al techo... te dejo una imagen para que veas a qué me refiero con ponerlos seguidos. Antes estaban así:

Y hay que ponerlos así:

Aplicando un fondo a los enlaces activos

Bueno, en realidad es a los enlaces en estado Hover. Vamos a hacer que al poner el cursor sobre un enlace del menú, este aparezca sobmbreado, con un fondo de color.... gris. Se hace retocando el código de los enlaces de antes, pero solo la línea del hover, dejándola así:

a:hover {color:red ; text-decoration:underline ; background-color: silver}

La propiedad background-color te debería sonar, la vimos al principio del curso para poner fondo a la página index, te acuerdas? je je. Silver significa plata en inglés, es un color gris clarito. El resto de líneas del código no se tocan, que te veo. Si guardas y haces vista previa a la plantilla.html verás los efectos logrados con todo esto.

Rellenando la Zona Principal

Veamos realmente como funciona esta estructura que hemos hecho. Vamos a insertar más texto en la parte principal de la página web para ver como se comporta el menú lateral en el caso de que haya mucho más texto en la parte derecha. Abre el Html-Kit y abre tu plantilla.html

Elementos que no son nada ¿?

Ya sabemos que gracias a la Hoja de Estilos, podemos cambiar el tamaño de la letra de toda la web, podemos varias los aspectos de los enlaces, los fondos de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente. Pero para eso, todas las partes del contenido de la página web deben "ser algo". Si son enlaces modificaremos la etiqueta "a", si son párragos la etiqueta "p", pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la zona principal de la web"?

Va a ser dificil, pues no está encerrada entre ningúna etiqueta concreta, luego ni es un párrafo, ni un enlace, ni ná de ná. Nosotros pretendemos que sea un párrafo, verdad? Pues vamos a indicarselo poniendole a esa frase la etiqueta <p> al incio y como no, la etiqueta </p> de cierre al final. Ale, dale al teclado! Ha de quedar así:

Más contenidos

Tras esta aclaración, vamos a incluir un par de párrafos más a continuación de ese. Ya sabes, has de poner <p> y </p> al principio y al final de cada uno para que el navegador sepa donde empiezan y terminan. Escribe un par de párrafos que tengan bastante texto, al menos lo suficiente como para sobrepasar lo que ocupa el menú de la izquierda.

Si escribes lo suficiente en cantidad, conseguirás ver este aspecto en tu plantilla.html

Justificar los párrafos de la página web

Ups, los párrafos se ven centrados y eso parece una poesia más que una web, je je je. Eso es por que le pusimos align:center a body en la Hoja de Estilo. Pero no pasa nada, lo arreglamos rápido definiendo un estilo justificado para todos los párrafos de la web. Si más tarde nos interesa alguno con otra alineación, lo crearemos en su momento.

Por ahora, abre tu Hoja de Estilo e incluye esta nueva línea, por ejemplo, al final de su contenido:

p {text-align: justify}

Con esto los textos quedan justificados. Esto significa que se reparten para que empiecen justo en la parte izquierda y terminen todas las líneas justo en el margen derecho, sin huecos. A mi me gusta así, pero si lo prefieres, en tus páginas puedes definirlo como text-align: left o text-align:right o text-align:center, como quieras. En el ejemplo lo dejamos con Justity.

Los margenes de los párrafos de la página web

La cosa va mejorando, pero ahora vemos como los textos se pegan demasiado tanto al menú lateral como a los extremos de la página. Eso no queda muy bien, así que vamos a arreglarlo.

Tienes dos opciones, una es definirle el margen concreto a cada uno de los párrafos de todas tus páginas web, o algo un poco más sencillo, poner un par de palabras en la Hoja de Estilo y listo. Qué prefieres? je je je.

Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a reparar esos margenes. Como los textos que vemos sin margen pertenecen a la capa de fondo naranja (orange) y en la Hoja de Estilos solo pone "orange" en la capa "#contenido", ya sabemos a qué capa incluirle la propiedad padding (el padding es parecido al margin, ya veremos la diferencia), verdad? Por eso le pusimos esos colores tan feos, para encontrar cada capa rápidamente, je je je. Pero solo queremos por ahora poner margen a sus párrafos, es decir, queremos margenes para los párrafos de dentro de la capa #contenido, así que, si recuerdas bien lo que hicimos la otra vez, esto se pone así:

#contenido p {padding: 5px 10px 5px 10px}

Resumiendo, escribimos primero la capa y luego el elemento de dentro de esa capa al que queremos definir cosas y luego, entre paréntesis, las propiedades. Le hemos puesto 10px en los dos lados y solo 5 por arriba y abajo, para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si fuera necesario.

Escribe esa línea justo después de la definición en la Hoja de Estilo de la capa #contenido. Guarda la Hoja de Estilo, haz vista previa de la plantilla.html y vemos los resultados por si queremos variar alguna de esas dimensiones.

(Margen entre menú lateral y textos principales)

Vaya... los margenes no están mal del todo, pero vemos que los dos primeros párrafos no parece que hayan tomado el margen izquierdo para separarse del menú principal. Esto es por que se cuenta el margen desde la parte izquierda de la capa #contenido, mientras que en esos dos párrafos debería contarse desde la derecha del menú, verdad? Vamos a ver como solucionamos esto.

Para eso tendríamos que poner un margen por la derecha para el menú, y como pertenece a la capa #menu tocaría retocar esa línea en estilo-general.css añadiéndole esto último que he subrayado:

#menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px }

Ahora si que lo hemos conseguido, mira el resultado del ejemplo.

La indentación de los párrafos

Eso si que es una palabra rara. Imagino que proviene de la propiedad "text-indent" que se aplica para establecer un margen a la izquierda solamente de la primera línea de cada párrafo, de modo que ésta queda más metida a la derecha que las demás líneas.

Se aplica colocando "text-indent: XXpx" entre los corchetes del elemento al que se lo queremos aplicar.

Vamos a aplicarlo a todos los párrafos de la parte principal, que eso queda muy bien. Un indentado de 15px creo que es suficiente. Como va a ser una propiedad para los párrafos (p) de dentro de la capa #contenido, incluimos el text-indent en esta línea (lo subrayo para que lo veas claro):

#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}

Ahora guarda la hoja estilo-general.css y haz vista previa de la plantilla para ver como queda. Te gusta? Esto de indentar solo tiene sentido cuando los textos están justificados o alineados a la izquierda. Cuando están centrados no se suele usar, pues no hace falta ese efecto.

Cómo llevamos los códigos?

Para estar seguros de que estamos haciendo el ejemplo según las lecciones aprovecho ahora para dejaros los códigos de la plantilla.html y de la hoja estilo-general.css según han quedado hasta ahora (en realidad lo hago para llenar hueco, que esta página se me había quedado muy cortita, je je je je)

plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Page title</title> <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> </head> <body> <div id="global"> <div id="cabecera">Bienvenidos a mi Web</div> <div id="navegacion">Barra de Navegación</div> <div id="contenido"> <div id="menu"> <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3</a></li></ul> </div> <p>Esta será la zona principal de la web</p> <p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p> <p>Y este es el tercer párrafo. En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p> <p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p> </div> <div id="pie">Este es el pié de página</div> </div> </body> </html>

estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px} body {text-align: center } #global {width:800px ; margin:4px auto } #cabecera {background-color: pink } #navegacion {background-color: gray } #contenido {background-color: orange ; width: 800px ; float:left } #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px} #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin-right: 10px } #menu li {list-style:none ; margin: 4px 0px 4px 6px } #pie {background-color: brown } a {color: brown ; text-decoration:none ; display: block } a:link {} a:visited {} a:hover {color:red ; text-decoration:underline ; background-color: silver} a:active {} p {text-align: justify} 

Un poco más de estilos css

A estas alturas y aunque no lo creas, pocas capas más tendremos que crear para tener completa nuestra página web. El resto será contenido vuestro, propio y ya no tendremos que tocas mucho más la plantilla.html aunque realmente, poco la hemos tocado, verdad? El restop del trabajo lo tendremos con la hoja de estilo, que se encargará de darle vistosidad al Html. Repito de nuevo que lo bueno de las Hojas de Estilo es que si un día te cansas del aspecto de la web, con oslo cambiar un poco la Hoja de Estilos tendrás una web con el mismo contenido (pues no tocaremos el html) pero con una apariencia totalmente distinta. Para eso claro, hay que saberse los trucos del CSS y por eso vamos a profundizar tu y yo ahora con tres propiedades muy importantes que si no quedan claras nos van a dar muchos dolores de cabeza. Estas propiedades son margin, padding y border.

Border

Si en una capa solo definimos su contenido en Html, esta solo mostrará eso, el contenido, ya sea una imagen, un párrafo o lo que sea. Pues bien, la propiedad border dibuja un borde alrededor justo de ese contenido. El borde estará pegadito pegadito al contenido, como en este caso de la derecha.

Padding

El padding lo usaremos para definir una distancia de separación entre el borde y el contenido. Es decir, separa el borde de su contenido en una distancia igual a la que le indiquemos. Concretamente, esta zona sería como la parte rojo que se ve en esta otra imagen de la derecha. Como ves, el borde ahora no está pegado a la imagen, sino separada de ella por la zona roja que ha sido definida con la propiedad margin. Fíjate que el borde ahora está pegado al padding, no al contenido.

Margin

Ahora tenemos otra distancia más. El margin es la distancia de separación que se va a dejar entre el borde y la parte exterior del elemento de la capa. En este caso no se ve, pues es una zona exterior al dibujo en la que no se permite que aparezca nada. Por eso se usa para separar unos párrafos de otros, como vimos en las lecciones primeras. En este caso solo hay definido el margin en el ejemplo de la derecha. Como ves, hay una separación entre la imagen y este mismo párrafo, aunque no se ve.

El trio Margin-Padding-Border

En la imagen de abajo puedes ver mejor a qué zona corresponde cada una de estas propiedades.

Puedes ver el borde, que le he puesto color azul para distinguirlo. Entre el borde y el contenido está la separación creada por el padding y entre el borde y el exterior el espaciado dejado por el margin.

Así, si ponemos dos imágenes una junto a la otra y queremos separarlas, usaremos por ejemplo el margin. Lo mismo para los párrafos etc. Si quisieramos separar un elemento A de los que tiene alrededor, le pondriamos a A un margin.

Si tenemos un elemento encerrado en una capa y queremos que su contenido se separe un poco de su extremo (de su borde) le hariamos un padding.

El ejemplo del castillo de paladines rodeados de marginados

Hace mucho tiempo existía un castillo donde un montón de paladines (soldados de la edad media) se refugiaban de seres marginales, los marginados los llamaban. El rey ordenó contruir unas buenas barreras (border) para protegerse. Además, clavó un montón de estacas afiladas por fuera de los muros para evitar que los marginales se acercaran demasiado (margin) y para proteger a los paladines ordenó que ninguno de ellos se acercara al muro a menos de dos metros (padding: 2 metros) para evitar que los paladines sufierean alguna herida si algún marginal atravesara alguna lanza por alguna ventana del muro. De este modo, los marginales no podian acercarse mucho al castillo (gracias al margin) y a los paladines se les prohibio acercarse al muro (gracias al padding).

Es un cuento muy tonto, je je je, pero quizás te ayude a recordar para qué es cada uno.

En la página siguiente lo entenderás mejor al aplicárselo a nuestro menú lateral, ya verás.

Separar un poco el menú

Según lo explicado en la página de antes, para conseguir separar un poco el menú lateral (toda la zona amarilla) del borde de la parte naranja de la página, es decir, para meterlo un poco más dentro de la parte central, podríamos colocar un margin o un padding. Cuál de los dos?

Como lo que queremos es separar la capa #menu (la amarilla) de los elementos exteriores, tenemos que aplicar margin. Si aplicáramos padding a la capa #menu el efecto sería crear una separación entre el borde amarillo y los enlaces de dentro, no?

Hace un par de páginas pusimos a la capa #menu este margen: margin-right:10px, te acuerdas? Era para dejar una separación entre el menú y los textos de la parte naranja que están a su derecha. Ahora, como hemos visto que también sería bueno separarlo por la izquierda y por arriba (y ya puestos, por debajo también), ampliamos la definición y la ponemos de este modo:

# menu {................... margin:10px 10px 10px 10px}

Esto es lo mismo que poner solo margin: 10px, pero mejor lo dejamos del otro modo así podemos poner margenes diferentes en los cuatro lados si vemos que el mismo para todos los lados no nos gusta.

Colocando ese margin en estilo-general.css obtendríamos esta apariencia.

Realmente parece que por debajo es mucho y por arriba y la izquierda me he pasao un poco. Vamo a probarlo con estos otros valores (recuerda el orden de las dimensiones del margin, arriba-derecha-abajo-izquierda)

#menu {................... margin:3px 10px 3px 3px}

Y haciendo de nuevo vista previa sobre plantilla.html vemos que queda mucho mejor, dónde va a parar, je je je.

Aún no hemos aplicado ningún borde a ninguna capa. Esto es por que cada navegador interpreta el borde de un modo distinto y vamos a evitarlo todo lo posible. En su lugar usaremos imagenes de fondo con el borde ya dibujado y en los casos en los que no sea posible ya nos buscaremos las mañas para poder usar bordes sin problemas, pero eso será más adelante.

Te toca currártelo por tu cuenta

No estaría de más que crearas una página aparte e investigaras los efectos del margin, el border y el padding por tu cuenta. Para distinguir una cosa de otra lo mejor es ponerle un color al body (a estas alturas debes saber hacerlo), creas una capa a la que pones nombre y le aplicas otro color diferente y luego le aplicas otro color distinto más al elemento que pongas dentro de la capa, que puede ser una imagen, un párrafo, una lista, etc, etc. Seguro que te resultará curioso observar los cambios que produce variar esos datos en la hoja de estilo y seguro que aprendes un montón.

Yo por mi parte intentaré ponerte algunos ejemplos en cuanto pueda para esclarecer estos conceptos, oki? Pero recuerda, no lo pruebes en los archivos de este ejemplo para no perdernos en las lecciones, hazlo en un archivo aparte.

Mientras tanto, seguimos con las lecciones, vale?

Insertar títulos con h1, h2, etc.

Igual que para indicar que una frase debía tener aspecto de párrafo con las etiquetas <p> y </p>, existen otras etiquetas para indicar que se trata de un título y estas etiquetas se escriben con una "h" seguida de un número que puede ir del 1 al 6.

La forma correcta para un título sería esta:

<h1>Este es un título de importancia Uno</h1>

Fíjate como de nuevo, tiene una etiqueta de apertura al inicio y otra de cierre al final con la contrabarra.

En lugar de un h1 podemos usar un h2, un h3 y así hasta h6. Los h1 son títulos principales y el resto van siendo de menos importancia y por lo tanto aparecen con letra más pequeña cada vez. Se usan por tanto los h1 para títulos principales y los h2 para subtitulos. Normalmente no se usan los demás pues no se suele abusar de sub sub subtítulos, je je.

Si aplicamos esas etiquetas sin más obtendremos una simple frase pero en negrita y con un tamaño mayor de lo normal para que se vea destacado. Si no nos gusta cómo queda por defecto, podemos siempre cambiar su aspecto indicando las propiedades que nos de la gana en la Hoja de Estilo, que para eso está.

A mi me gustan por ejemplo titulos principales (h1) en negrita, con un tamaño ligeramente mayor y además subrayados y de otro color distinto al texto normal, que suele ser negro. Para los subtítulos (h2) me gusta en cambio un tamaño algo menor y además sin subrayar, pero también del color del h1 y en negrita. Así que, como las lecciones las hago yo, vamos a definir en la hoja de estilos este aspecto para esos dos elementos a mi gusto, je je je. Ah, tambien los quiero centrados los dos!

Abrimos el Html-Kit, abrimos el archivo estilo-general.css y definimos estos dos títulos del siguiente modo:

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}

h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}

Guardamos ahora la Hoja de Estilo y abrimos la plantilla.html

Si hacemos vista previa a la plantilla no veremos ningún cambio. Por qué crees que puede ser? Piensalo. Pues claro, porque como no hemos dicho a ningún elemento de la plantilla que es un título, no hay nada que mostrar con estos cambios en la Hoja de Estilo. Lógico no? Vamos ahora a crear un título (h1) y un subtítulo (h2).

El título está claro, va a ser el texto donde pone "Esta será la zona principal de la web". Una frase no debería ser a la vez párrafo y título, o una cosa o la otra, de modo que le cambiamos las etiquetas a esa frase, eliminamos la "p" y ponemos un "h1", tanto al principio como al final. No te olvides de la contrabarra en la etiqueta de cierre, que te veo... Veremos esto en la vista previa:

El subtítulo, de etiqueta h2, lo vamos a poner en el texto "Y este es el tercer párrafo" (en realidad ahora es el segundo, pues el pimero lo hemos convertido en un título h1, pero bueno). Para convertir ese trozo en subtítulo, ya sabes que no debe estar entre las etiquetas <p> y </p>, de modo que lo encerramos entre <h2> y </h2> y pasamos la etiqueta <p> de ese párrafo después de ese trozo de texto, quedando así:

Los títulos aparecen como elementos de una sola línea, o mejor dicho, no dejan que otra cosa como por ejemplo un párrafo, continue a su derecha, mandándolo directamente a la línea siguiente. Lo ves en la vista previa?

Aunque en el código HTML pongamos un párrafo seguido de un título (en la misma línea de código), el párrafo siempre aparecerá debajo, en la siguiente línea, pues para eso es un título, no? Pues ya está. Ya sabemos más cosas. Si te gustan los títulos alineados a la izquierda ya sabes como cambiar la Hoja de Estilo para conseguirlo (text-align: left). Lo mismo para el resto 

La importancia de los títulos en el posicionamiento de una página web

Y tú pensarás... bueno, si puedo definir el estilo que me da la gana.. no podría crear una clase de párrafo (p.titulo), definirle las propiedades de centrado, tamaño mayor, color y subrayado y usar ese estilo en lugar de las etiquetas h1?

Pues si, si que puedes, pero está muy bien usar las etiquetas de títulos por lo siguiente. Cuando una persona hace una búsqueda con por ejemplo Google y escribe "como crear páginas web" Google le muestra una serie de páginas. Pero como sabe Google qué páginas ha de mostrar? Bien fácil. Google y el resto de buscadores se pasean continamente por la red leyendo la palabras de cada página web. Si en mi web ven que aparecen las palabras "como", "crear", "páginas" y "web", lo memorizan y mostraran mi web en sus listas cuando alguien haga una búsqueda con alguna de esas palabras.

Y porqué unas páginas aparecen más arriba y otras más abajo en esas listas? Los motivos son muchos, pero uno de ellos (hay muchos más motivos) es que algunas de esas palabras aparezcan destacadas y destacadas es, o bien que aparezcan en negrita o bien que aparezcan dentro de un título tipo h1, h2 etc. Por eso es mejor hacer los titulos usando h1, pues si lo hacemos com párrafos los buscadores nunca sabrán que se trata de un título y no tomarán esa palabra tan en cuenta.

El resto de motivos los iremos viendo en lecciones sucesivas. Eso si, no por lo dicho antes vamos a poner toooodos los textos dentro de un título, pues los buscadores pueden pensar (con razón) que estamos haciendo tampas y en lugar de posicionarnos mejor en sus listas, apareceríamos los últimos. No se debe abusar.

Otra cosa importante. Ya que sabemos la importancia de las palabras de los títulos, es bueno incluir en estos aquellas palabras por las que queremos ser encontrados. Es por eso que en los títulos de CCTW se intenta colocar estas palabras clave. En esta sección por ejemplo, he aprovechado el título de arriba para colocar palabras que me interesan, como "titulos" (alguien puede estas buscando como insertar títulos en una web y me interesa que aparezca esta página en ese caso), tambien he colocado la palabra "posicionamiento" (me interesa que quien busque por esa palabra encuentre mi web) y por supuesto algo que no puede faltar en mi caso, las palabras "página web". Lo pillas?

Repito, no es cuestión de saturar con títulos, es suficiente con aprovecharlos muy bien, y saber qué palabras poner sin que el texto del título pierda su sentido, claro. Ha de tener que ver a la vez con el texto que hay debajo de él, sino, será muy bueno para el buscador pero los visitantes pensarán que se te ha ido la cabeza... je je je.

Buscando alojamiento para la página web

Ya va siendo hora de ir subiendo nuestro trabajo a la red, verdad? Aunque aún no esté terminada la página web, es bueno tener ya un sitio para alojarla (a esto se le llama Hosting) para ir viendo cómo se comporta la web en realidad.

Para no repetir aquí cosas que ya tenemos explicadas en CCTW, os invito a visitar la sección Hosting y Dominios. Una vez que entres allí aprenderas todos los conceptos relacionados, con los que podrás escoger con más idea el hosting que más se amolde a tus necesidades.

Si tienes mucha prisa y quieres ir al grano, ve directamente a la página donde explico como registrarte en un servidor gratuito sin publicidad, pero no olvides volver a esa sección y leer el resto de información cuando puedas, te será útil en el futuro.

Cuando termines de leer esa sección, te darás de alta en el Hosting que quieras y podrás seguir con las lecciones siguientes, pero recuerda apuntarte en un papelito (vale también una Hoja de Excel o del Notepad) los siguientes datos:

• Nombre de usuario para el Hosting.
• Contraseña de tu cuenta de Hosting.
• Dirección FTP con la que subir tus datos a la red.
• Dirección de tu página web.

Ahora seguramente te suene a chino todo eso, pero tras leer esa sección sabrás lo que significa cada cosa. Aprenderás allí a escoger un hosting tanto de pago como gratuito, ambos sirven perfectamente para aprender, de modo que no tienes escusa. Si no lo haces no podrás aprovechar las lecciones al 100%, aunque también aprenderias cosas, claro. Sería como aprender a conducir sin tocar nunca un coche.... osea, ná de ná.

No lo olvides, para cuando regreses aqui para seguir las lecciones, has de tener los datos anteriores, vale? Pues ya sabes. Y ante cualquier duda recuerda que en el Foro CCTW tienes una sección para cada consulta, úsalo sin que te de vergüenza preguntar tonterias y no te arrepentirás.

Configurar Html-Kit para el nuevo alojamiento

Ahora se supone que ya tienes los datos de los que te hablé en la página anterior, nombre de usuario, contraseña, dirección del FTP y además conoces la dirección de tu nueva web. Recuerda que puedes registrarte varias veces, con nombres distintos para crear más de una cuenta y por tanto tener más de una página web, por tanto, olvida usar estas lecciones para crear la página que tienes en la cabeza. Mejor sigue las instrucciones al pie de la letra hasta el final y una vez que aprendas podrás hacer lo que te de la gana en otra cuenta, con tu página web definitiva, oki? Es para que no te lies durante estas lecciones.

Terminado el sermón, je je je, pasamos a configurar el Html-Kit para poder subir la página de la lección al nuevo servidor, oki?

Configuración del nuevo Servidor en el Html-Kit

Recuerdas cuando creamos la carpeta local para colocar dentro los archivos de la web? Pues vamos a hacer algo muy similar, verás.

Abre tu Html-Kit y en la barra de arriba, donde pone Workspace escoge la opción Añadir Carpetas/Servidor FTP > Añadir Servidor FTP, como en la imagen de abajo:

Aparece una ventana donde tienes que colocar algunos de los datos que apuntaste, veamos qué datos con y donde van apuntados.

(1) Aquí pon la dirección de tu FTP. Suele empezar por ftp.nombredelservidor.. Otras veces en lugar de por ftp comienza por www, cada hosting es algo firerente. En la imágen de arriba puedes ver los datos que yo puse para la configuración del Ftp de una cuenta creada en Razy (recomendado para seguir el curso).

(2) Aquí se pone el puerto de conexión. Ni yo se lo que es, pero coloca un 21 a no ser que tu hosting te indique otra cosa.

(3) Tu nombre de usuario para el Hosting que tengas. En Razy son números aleatorios, como puedes ver en la imagen.

(4) La contraseña o password.

(5) Activa esta casilla si no quieres tener que estar escribiendo la contraseña cada vez que quieras conectar tu Ftp.

(6) Es solo el nombre que aparecerá en la ventana Workspace del Html Kit. Pon lo que más te guste. Yo he puesto web-ejemplo-cctw-internet para diferenciarlo de la carpeta local que llamamos web-ejemplo-cctw-local. Para seguir el ejemplo de este curso haz como yo y así evitarás perderte cuando me refiera a esa carpeta. Luego, para tus trabajos la puedes llamar como te de la gana, claro.

(7) En ocasiones al registrarte en un servidor te indican la ruta inicial que has de colocar en el Ftp. A veces es /www/ otras veces es /html_public/... Si te has registrado en Razy escribe aquí lo mismo que pusiste en el punto (1) y te funcionará bien. Para qué sirve? Simplemente indica al Ftp cuál será la carpeta raiz que se va a mostrar. Lo entenderás con el tiempo, no es muy importante.

(8) Passive Mode. Esto no lo domino bien. Si se que unos servidores piden que se use el modo activo y otros el modo pasivo. Si lo pones al contrario quizás te cueste conectarte. Razy por ejemplo pide que se active. Tiene que ver son los puertos que se usan para la conexión.... un rollo, vamos, je je.

El resto de opciones de esa pestaña y de las otras dos no hace falta tocarlas. Pulsa en OK y seguirmos.

Nuestro nuevo Servidor FTP

Ahora podemos ver una nueva carpeta en la ventana de la derecha (ver > Workspace) del Html-Kit. Es esta señalada en la imagen de abajo:

Si ahora simplemente pulsas sobre esa carpeta, se abrirá mostrando todos los archivos que hay en internet. Seguramente solo haya uno llamado index.html sin contenido alguno o con algún mensaje de "En contrucción". Esa página la pone el propio hosting mientras que tú no subes la tuya.

Ojo! Si al pulsar sobre el signo "+" de la carpeta azul ésta no llega a abrirse nunca sino que aparece una lupa buscando y tarda demasiado (vario minutos) sin que termine de mostrar los archivos de dentro, podría ser que:

• Tienes en casa un cortafuegos o firewall que impide al HtmlKit conectarse. Tendrás que darle permisos al HtmlKit en tu cortafuegos de windows.
• Estas en el trabajo (no diremos nada...) donde seguramente tienen un proxy que impide la conexión de FTPs. Pruebalo entonces desde casa.
• Los datos que has colocado no han sido escritos correctamente. A veces copiar y pegar no funciona (pues añade un espacio en blanco al final). Prueba a escribirlo a mano.
• Puede que los datos de usuario o contraseña los pusieras con alguna mayúscula y has de escribirlo igual que lo pusiste al registrarte.
• No has pagado la conexión a internet este mes o el gato le ha dao un bocao al cable...
• Si no logras conectarte verificando estas medidas, pregúntanos en el foro CCTW.

Qué? Ha sido facil? Si tienes problemas con esto lanza tu pregunta en el Foro CCTW, en la sección "Problemas de Conexión", oki? y recuerda indicarnos cuál es tu hosting para poder ayudarte mejor, y la dirección, etc, etc.

Subir el index.html de tu página web con Html-Kit

Ya tenemos unos cuantos archivos de nuestra web de ejemplo. Los podemos ver en la ventana Workspace del Html Kit, dentro de la carpeta "web-ejemplo-cctw-local". También tenemos el ftp configurado y lo podemos ver en la misma ventana, debajo de la carpeta anterior con un símbolo a su izquierda de color azul. Estos símbolos azules indican que se tratan de carpetas de servidores (archivos en la red) mientras que los amarillos indican que son locales (están en tu ordenata).

Ahora vamos a ver como nos las ingeniamos para subir los archivos desde nuestro des-ordenador hacia nuestro nuevo hosting usando el Ftp configurado antes.

Haciendo clic en el signo "+" de la izquierda de la carpeta del ftp "web-ejemplo-cctw-internet" podrás ver qué archivos hay en tu servidor (hosting) en estos momentos. Dale y verás que aparece un archivo index.html

Este archivo index.html es el primero que lee el navegador cuando se teclea la dirección de cualquier web en él. Todas las webs tienen un index.html y el que tú ves ahora es el que ha colocado tu hosting para que se vea alguna cosa mientras que subes tu propio index.

Cómo borrar archivos

Para empezar vamos a borrar ese index.html que nos han colocado por defecto (Ojo, el de la carpeta "web-ejemplo-cctw-internet", no vayas a borrar el de la carpeta "web-ejemplo-cctw-local"!!). Para ello basta con hacer clic sobre él una vez con el botón derecho del ratón y escoger "Delete..." que significa Borrar. Al final aprendes inglés y todo, je je je.

Te preguntará si estás seguro. Yo se que seguro seguro lo que se dice seguro... no lo vas a estar, pero como confias en lo que yo te diga, le dirás que si, je je je. Dale sin miedo. Tenemos ahora el hosting totalmente vacio. Verás que poco tardamos en llenarlo de tonterias, ja ja ja.

Subir el primer archivo

Como sabes, para que la gente vea tu web, sus archivos han de estar en el hosting. De nada sirve tenerlos en el Pc. Por tanto los tenemos que pasar desde la carpeta amarilla "web-ejemplo-cctw-local" hasta la carpeta azul "web-ejemplo-cctw-internet". Lo ideal sería pinchar desde la carpeta local y arrastrarlos hasta la otra, pero por el momento el Html Kit no nos permite esa opción. Ando investigando si hay algún mod para arreglar esto, pero por el momento nos tendremos que conformar con el método siguiente.

Vamos a subir el archivo index.html al hosting. Para ello hacemos clic con el botón derecho del ratón sobre la carpeta "web-ejemplo-cctw-internet" (en adelante la llamaremos simplemente "internet", que me estoy cansando de ese nombre tan largo, je je) y del menú que se abre escogemos la opción "Connect" que significa "Conectar al servidor". Si no te aparece activada es porque ya está conectado:

Despues hacemos lo mismo, clic con el botón derecho del ratón y escogemos esta vez la opción "Upload" que significa "Subir":

Se abre entonces una ventana donde debemos buscar, dentro de la carpeta donde guardamos los archivos de la web de ejemplo, el archivo index.html (la ruta sería algo así como C:Documents and SettingsUsuarioEscritoriomis-paginas-webweb-ejemplo-cctw). Selecciona el index.html y pulsa en "Abrir".

Pues ya está. Ahora aparecerá en la ventana Workspace del Html Kit el nuevo archivo index.html, pero esta vez es el nuestro. Si ahora visitas tu página web escribiendo en tu navegador la dirección, verás algo parecido a la página web del ejemplo que estamos haciendo. Concretamente verás esto:

No se ve ni la sonrisa, ni la imagen de fondo, ni el buzón ni se están respetando los estilos css. Por qué puede ser? Este es el error más frecuente al principio y por eso te pido que prestes atención a esto.... Si no subes el archivo correspondiente, no se ven los elementos. Si no se ve el buzón es porque no se ha subido (upload) el archivo del dibujo del buzón. Lo mismo para el fondo. Y si los estilos no se están respetando es porque no se ha subido aún la Hoja de Estilo (estilos.css). Obvio verdad? Pues verás como caes alguna vez, je je.

En la página siguiente aprendemos a subir el resto de archivos y así arreglamos el problema.

Subir el resto de archivos al servidor

Esto es fácil, pues lo acabas de hacer hace un momento con el index, no? Has de seleccionar los archivos uno por uno y hacerles el "Upload". Recuerda:

1.- Conectar con el servidor con botón derecho del ratón sobre la carpeta azul y pulsando en "Connect".

2.- Botón derecho sobre la misma carpeta azul de nuevo y seleccionar "Upload".

3.- Seleccionar un archivo y pulsar en "Abrir".

4.- Lo mismo para el siguiente archivo. Hazlo solo para los archivos estilos.css, estilo-general.css y plantilla.html.

A la hora de seleccionar el archivo que quieres subir puedes tener apretada la tecla Shift de tu teclado (la flecha del teclado que hay a la izquierda apuntando hacia arriba) y así podrás seleccionar varios archivos de una sola vez.

Verás como no es posible subir la carpeta "objetos". Cuando la seleccionas para subirla en lugar de subirse se abre mostrando sus componentes. Lo que hay que hacer es crear primero la carpeta objetos en el servidor o hosting. Veamos como:

Crear nuevas carpeas

Haz clic con el botón derecho del ratón sobre el nombre de la carpeta "web-ejemplo-cctw-internet". Selecciona la opción New + Create New Folder. Si no te aparece activa tendrás que conectar primero el Ftp (botón derecho sobre la carpeta y pulsar "Connect", como antes):

Se abre una ventanita donde has de ponerle el nombre a la carpeta. Recuerda, es "objetos" (todo en minúsculas) no "Objetos":

Ahora que ya tienes la carpeta "objetos" dentro de tu hosting. Ten en cuenta una cosa importante. Cuando quieras colocar un archivo directamente en la raiz de la web (la raiz significa en el primer nivel de la web, es decir, fuera de cualquier carpeta) has de hacer el "clic derecho" sobre el nombre "web-ejemplo-cctw-internet". Pero si lo que quieres es colocar algún archivo "dentro" de una carpeta, es sobre esa carpeta donde has de hacer "clic derecho" para escoger luego "Upload". En caso contrario el archivo no se subirá dentro de esa carpeta. Ojo!

Por tanto, para subir ahora los archivos que hay dentro de la carpeta "objetos" de tu disco duro a la carpeta "objetos" del servidor, has de hacer clic derecho sobre la carpeta objetos azul, hacer clic en "upload" (o en Connect antes si se ha desconectado) y después escoger los archivos a subir, vale? Pues dale, a ver si lo consigues...

En definitiva...

Al final, si abres las carpetas web-ejemplo-cctw-local y web-ejemplo-cctw-internet en la ventana Workspace del Html Kit y si has hecho los deberes correctamente, te ha de aparecer algo como lo que se muestra en la imagen de la derecha.

Ya tenemos los archivos de lo que llevamos hecho de ejemplo en el nuevo hosting. No es emocionante? A partir de ahora, cada vez que hagamos algún cambio o mejora en el ejemplo podremos subirlo al servidor (o hosting) para ver como va quedando. Aún nos queda mucho por hacer, así que... paciencia y ánimo.

Por cierto, si quieres ver tu plantilla.html en tu servidor después de haberla subido, basta con escribir su dirección en tu navegador. Su dirección será la misma que escribes para ver el index, seguido de /plantilla.html

Es decir, si tu dirección es http://yomismo.onlinewebshop.net/ la dirección de la plantilla será http://testeando.onlinewebshop.net/plantilla.html

Como colocar bordes a la plantilla de nuestra página web

Tal y como tenemos la plantilla, queda un poco cutre, así que vamos a ponerle unos bordes a los lados para mejorar su aspecto.

Con los bordes hay quetener mucho cuidado, pues cada navegador interpreta los bordes de un modo distinto y podría estropearnos el aspecto de nuestra página. Imagina un rectángulo. Si le definimos un borde de 10 pixeles de anchura, unos navegadores pintan ese borde por fuera de ese rectángulo, mientras que otros lo pintan por dentro del rectángulo. Al final resulta que los visitantes que vean la web con un tipo de navegador la veran bien, pero otros que usen otros navegadores no la verán como nosotros queremos. La forma que aquí proponemos es sencilla y procura que la página web se vea idéntica usando cualquier navegador.

Dónde se define un borde

Si aún te acuerdas de lo explicado al principio de las lecciones (esperemos que sí...) nos propusimos definir los contenidos en el código html de las páginas dejando la definición del aspecto en la Hoja de Estilo. Como los bordes son más aspectos decorativos que contenidos en sí, vamos a definirlos en la Hoja de Estilo. Así además podremos cambiarlo cuando nos de la gana con solo variar algunos detalles del archivo de estilo en lugar de tener que hacerlo en cada una de las páginas de la web.

Cómo se definen los bordes

En la Hoja de Estilos, se define el borde de un elemento (por ejemplo de una capa o div) escribiendo esto entre sus corchetes:

border: 1px solid black ;

donde 1px es la anchura del borde, solid significa que será una línea continua y black (negro) será el color que queremos que tenga la línea de borde. Hay otras formas de definir el borde, pero para el ejemplo nos basta con saber esto. Cuando quieras aprender más cosas sobre el Border solo tienes que visitar la sección Curso de Estilos CSS de ComoCrearTuWeb.

La línea anterior crea por tanto un borde de 1 pixel de ancho, con una línea continua de color negro por arriba, abajo y por los lados del elemento al que se lo apliquemos. Pero en ocasiones quizas prefiramos dibujar el borde solo por uno de los lados dejando sin borde los otros. Cómo podríamos hacer esto?

Dibujar el borde solo por algunos lados

Para dibujar el borde solo por un lado, se pone esta línea en lugar de la anterior:

border-top: black 1px solid (dibuja el borde solo por arriba)

border-bottom: black 1px solid (dibuja el borde solo por abajo)

border-left: black 1px solid (dibuja el borde solo por la izquierda)

border-right: black 1px solid (dibuja el borde solo por derecha)

Si queremos dibujar el borde por varios lados pero no por los cuatro, basta con escribir (entre los corchetes del elemento al que se lo queremos aplicar) las líneas anteriores que queramos, separadas por punto y coma ";".

Veamos un ejemplo de aplicación de bordes

Para practicar, vamos a dibujar algunos bordes en el ejemplo que llevamos hecho. Abre tu Html Kit y abre el archivo estilo-general.css

Ahora, dentro de los corchetes del elemento "contenido" escribe esto de abajo para dibujar un borde a la izquierda y un borde a la derecha:

contenido { ....lo que ya había .......... ; border-left: black 1px solid ; border-right: black 1px solid }

Si ahora guardas la Hoja de Estilo estilo-general.css y haces vista previa en el archivo plantilla.html podrás ver como aparecen bordes negros a los lados de la capa "contenidos".

Problema con los distintos navegadores

El objetivo de toda página web es que se vea identicamente en cualquier navegador. Con lo que llevamos hecho en el ejemplo ya podemos observar un fallo. Acabo de descubrir una regla:

"Si defines un borde en un elemento, ese elemento no puede llevar también definido un ancho concreto mediante el width, es decir, no le podemos asignar una cantidad numérica, solamente se le puede definir width:auto". Si no seguimos esta regla, la web no se verá bien en todos los navegadores!"

Para arreglar esto basta con eliminar la cifra de la anchura para la capa "contenido". Realmente no va a ser un problema eliminar ese width:800px, pues la anchura ya está definida por la capa que contiene a contenido (global), así que eliminamos width:800px de la capa contenidos en estilo-general.css la guardamos y hacemos vista previa para ver que ha ocurrido.

Vaya, más problemas.... ahora resulta que en Internet Explorer se ve bien, pero con el Opera se nos estropea la estructura... Esto lo arreglamos ahora mismo eliminando en la definición de estilo de la capa contenido la propiedad float:left que en realidad no nos hacía mucha falta.

Ahora sí que se ve correctamente en todos los navegadores... o al menos.. eso espero. Si no es así dímelo en el Foro CCTW vale?

Bordes para el resto de capas

Bueno, ahora que vemos que esto del borde funciona, vamos a ponerle borde a otras capas, recordando por supuesto la regla anterior que decía... "Si la capa tiene definida una cantidad numérica para el width, no podemos definirle el borde o se deformará la capa un poco".

Ahora vamos a ir colocando bordes a varias de las capas de la plantilla, teniendo en cuenta que cuando tenemos una capa encima de otra, si le ponemos un borde inferior a la de arriba, no será necesario ponerle borde superior a la de abajo (pues le vale el borde inferior de la de encima... se entiende esto?...).

A la capa o div llamada navegación le vamos a poner borde por lo cuatro costados (por arriba, abajo , izquierda y derecha), que como ya sabemos, se hace añadiendo esto de abajo entre los corchetes de la Hoja de Estilo estilo-general.css:

border: black 1px solid

quedando esa línea así en la Hoja de Estilo:

#navegacion {background-color: pink ; border: black 1px solid }

Si ahora le pusieramos borde a la capa de arriba del todo (cabecera) por los cuatro costados, nos aparecería un borde de 2 pixeles entre esa capa y la capa navegacion, (1 pixel definido en la capa navegacion más otro pixel definido para la capa cabecera). Por tanto y para no tener unos bordes más gruesos que otros, a la capa cabecera le vamos a definir el borde solamente por ariba y por los lados. Esto, como ya sabes, se hace así:

#cabecera { background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }

Ahora vamos con la capa pie. Vamos a definirle un borde por los cuatro costados de este modo:

#pie {background-color: brown ; border: black 1px solid }

Y con esto quedan todas la capas bordeadas. Ya sabes usar los bordes y la página tiene mejor pinta. En adelante la mejoraremos aún más hasta que quede totalmente profesional...

Esquinas redondeadas para las capas de la web

Los bordes no quedan mal del todo, pero si consiguiéramos redondear las esquinas ya sería para sacar nota, verdad? Pues vamos allá.

No existe ninguna propiedad por el momento para conseguir mediante css ni html crear el efecto de redondeado de aristas o esquinas, pero yo que soy muy listo... he descubierto la forma de hacerlo de otro modo. Cómo? Simplemente dibujando el contorno redondeado en una imagen y colocándola después en la capa como imagen de fondo. De este modo no solo podemos conseguir el redondeado, sino también cualquier otra forma que seamos capaces de dibujar, como por ejemplo lazos, sombras de colores, etc, etc (el etc depende solo de tu imaginación).

Solo es necesario tener un poco de destreza para dibujar lo que necesitamos con un programa de dibujo, como el Paint del Windows, o similar. En el Foro CCTW hay una sección en la que se habla del Paint Shop Pro (PSP) que quizás te sea de ayuda para aprender a dibujar con el ordenador.

Para no mezclar mucho las cosas, partirémos aquí de algunas imágenes ya hechas. Las usaremos para este ejemplo de página web que estamos haciendo y te dejo a tí que crees las tuyas para que la pongas en tu propia web, oki?

Para empezar, cópiate estas dos imágenes y pégalas en la carpeta "objetos" para poder seguir estas lecciones. Por si no recerdas cómo se copiaban imágenes de otras webs, te recuerdo que solo tiene que hacer clic con el botón derecho del ratón sobre la imágen y escoger la opción "Copiar Imagen..." (o algo parecido). Luego seleccionas la carpeta de tu disco duro donde la quieres pegar (la carpeta objetos) y listo.

Se trata de imágenes con extensión gif y con fondo transparente. Guárdalas poniéndoles de nombre curva-superior.gif y curva-inferior.gif

A continuación veremos paso a paso como poner estas imágenes en la parte alta y baja de la página web para conseguir un efecto más profesional.

Una capa nueva para el borde superior

La imágen de la curva de la parte superior de la página web la vamos a poner como una imagen de fondo (un gif) en una nueva capa que vamos a insertar en la página web, justo que quede al principio de todas las demás. La vamos a llamar curva-superior. Ya sabes, por un lado escribimos unas líneas en el código html de la plantilla.html y por otro lado definiremos las propiedades de esta nueva capa en la Hoja de Estilos llamada estilo-general.css

Abre el archivo plantilla.html con tu Html Kit e inserta esta línea justo entre la línea de la capa glogal y la de contenido:

<div id="curva-superior"></div>

Ha de quedar por tanto así:

.....
<div id="global">
  <div id="curva-superior"></div>
  <div id="cabecera">Bienvenidos a mi web</div>
.....

Como verás, esta línea no tiene contenido ninguno. Realmente no le hace falta pues lo único que queremos ponerle es la imagen de la curva de antes, pero eso lo vamos a definir con estilos css, no en el html de modo que se va a quedar así, vacia.

Ahora abre la hoja de estilos estilo-general.css e inserta esta otra línea donde definimos las propiedades de la capa curva-superior:

#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat }

Qué hemos definido conesa línea de estilo? Le hemos dicho que la imagen de fondo será curva-superiorgif, que está en la carpeta objetos y que no se repita. Si ahora guardas la hoja de estilo estilo-general.css y haces vista previa desde el Html Kit verás este resultado.

Vaya mierda, que decepción. Se ve exáctamente lo mismo que antes de insertar la capa, nada de imagenes con bordes redondeados... qué ha pasado? Bueno, como la capa curva-superior no contiene nada de nada en su interior (en el html) el navegador la muestra con una anchura de cero y una altura cero, por lo que vemos... cero de esa capa y por tanto nada de imagen de fondo. Para arreglarlo basta con ponerle algo de contenido a esa capa, como por ejemplo una letra o una palabra, pero como no quiero que aparezca nada de eso, lo que haremos será definirle en la hoja de estilo una anchura y una altura. Cuál? pues la misma que tiene la imagen y asi nos aseguramos que se ve entera.

#curva-superior { background-image: url(objetos/curva-superior.gif) ;
                  background-repeat: no-repeat ;
                  width:800px ; 
                  height: 12px }

Has visto? Con width: 800px le indicamos que la capa ha de tener 800 pixeles de ancho y con height: 12px le decimos que su altura ha de ser de 12 pixeles, igual que la imagen de fondo. Ahora es de esperar que se vea y además completa, vamos a ver....

Bueno, la cosa va mejorando, aunque ahora encontramos otra cosilla que no nos gusta, y es que haciendo vista previa con Internet Explorer (con el Firefox no ocurre) aunque la imagen sale prefectamente, aparece un espacio en blanco separando la imagen del resto de la página y queda bastante feo.

Esto se arregla muy fácil añadiendo en la hoja de estilo, además de la altura y la anchura de antes, una palabra mágica nueva, que no vamos a explicar ahora pero que puedrás encontrar en el Curso de Estilos CSS. Lo que hemos de añadir es esto:

#curva-superior { background-image: url(objetos/curva-superior.gif) ;
                  background-repeat: no-repeat ;
                  width:800px ;
                  height: 12px ;
                  overflow : hidden }

Ahora, si guardas la hoja de estilo y haces vista previa si que se ve correctamente, aunque ahora parece que sobran dos cosas. Por un lado el borde entre la imagen y la capa donde pone bienvenido sobra y por otro lado, si le damos color de fondo blanco (white) a esa capa rosa, el efecto será aún mejor.

Para eliminar el borde solo de la parte de arriba de la capa cabecera eliminamos lo que pongo en rojo abajo:

#cabecera { background-color: pink ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid }

y para poner color de fondo blanco (white) en lugar de rosa (pink) dejamos finalmente la línea así:

#cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }

El efecto conseguido, aunque no asombroso, es más profesional.

Borde redondeado para la parte inferior

Lo mismo que hemos hecho con la parte de arriba podemos volver a hacerlo para la parte inferior de la página para conseguir un mejor aspecto. Te lo recuerdo paso a paso y así terminas de pillarlo, vale?

1.- Creamos una nueva capa en plantilla.html llamada curva-inferior sin ningún contenido dentro. La colocamos al final de todas las capas:

.....
   <div id="pie">Este es el pié de página</div>
   <div id="curva-inferior"></div>
 </div>
 .....

2.- Abrimos estilo-general.css e incluimos la definicion de la nueva capa curva-inferior que será igual que la de antes pero cambiando el nombre de la imagen de fondo:

#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
                  background-repeat: no-repeat ;
                  width:800px ; 
                  height: 12px
				  overflow: hidden }

3.- Quitamos el borde de abajo de la capa pie (ya sabes, eliminamos border: black 1px solid que da borde a los cuatro lados y añadimos los tres lados que queremos, left, right y top) y además le ponemos color blanco (white) de fondo a esa capa:

#pie { background-color: white ; 
       border-left: black 1px solid ; 
       border-right: black 1px solid; 
       border-top: black 1px solid }

Repito, he eliminado el border: black 1px solid que le daba borde a los cuatro costados y he colocado en su lugar el borde por la izquierda, derecha y arriba solamente.

4 .- Guardamos la hoja de estilo y obtenemos esta visión.

Uploading... Subiendo los archivos al servidor

Aunque ya lo hemos hecho antes con el index.html y algunos archivos de la carpeta objetos, vamos a repetir cómo se suben los archivos al servidor y así aprovechamos para subir estos últimos que hemos creado, vale? Así quedará todo un poco más claro y no lo olvidaremos (espero...).

Si no recuerdo mal, desde esa vez anterior tenemos varios archivos nuevos, como las dos imágenes de la carpeta objetos, los de arriba y abajo de la plantilla, y por otro lado también hemos variado la plantilla.html y la hoja de estilos estilo-general.css

Recuerda que cuando hacemos un cambio en los archivos de nuestra página web, estos cambios solo están en nuestro ordenador. De modo que para que los visitantes de la web puedan verlos, tenemos que subir esos mismos archivos con los cambios realizados al servidor. Si no, los visitantes seguirían viendo la versión antigua.

Por tanto, los archivos que tenemos que subir son:

• curva-superior.gif
• curva-inferior.gif
• plantilla.html
• estilo-general.css

Para subir los archivos plantilla.html y estilo-general.css basta con hacer clic con el botón derecho del ratón sobre la carpeta azul web-ejemplo-cctw-internet, escoger la opción "connect" para conectar el FTP al servidor, depués hacer clic de nuevo sobre el mismo sitio y escoger la opción "Upload...", seleccionar el archivo que queremos subir al servidor (puedes seleccionar esos dos de una sola vez manteniendo pulsada la tecla Control a la vez que haces clic en varios de los archivos) y listo. Si el archivo ya existía, te dirá que ya existe y te pregunta si lo quieres sobreescribir.

Dile que sí y listo, archivo actualizado.

Para subir los dos archivos de las imágenes de la parte alta y baja de la plantilla que acabamos de usar en las páginas anteriores, se hace del mismo modo, pero haciendo clic derecho sobre la carpeta objetos antes de elegir Upload. En caso contrario los archivos irán a parar a la raiz del servidor, es decir, fuera de la carpeta objetos y claro, no aparecerán en la web, pues el navegador los va a buscar dentro de esa carpeta. Si te ocurriera eso, simplemente borra los archivos que se han colado fuera de la carpeta y vuelves a subirlos, esta ves correctamente.

Ha de quedar una cosa así en la vista de Workspace del Html-Kit:

Cómo colocar el logotipo con enlace en la web

Ya se que aún es pronto para que tengais el banner o logotipo de la web listo, pues seguramente aún nisiquiera tienes claro de qué va a tratar, pero vamos a explicar cómo insertar el logo en la parte superior y cómo colocarle un enlace para que al hacer clic sobre él se dirija al visitante a la página principal. Cuando más adelante tengas el banner o logotipo terminado solo tendrás que sustituir uno por otro.

En cualquier caso, te recuerdo que este ejemplo que estamos "fabricando" debes seguirlo al pie de la letra para no perderte en ningún paso. Luego, en tus experimentos puedes colocar lo que te de la gana , oki? je je.

Bien, vamos a partir de un banner genial, el de CCTW que nos ha creado nuestra amiga Yaneth (con tu permiso...). Imagino que ya sabes copiar y pegar imagenes desde una web, verdad? Pues copiate este banner que dejo abajo y pégalo dentro de tu carpeta objetos para seguir.

Ahora que lo has pegado en tu carpeta objetos, cambiale el nombre. Ha de llamarse logotipo.gif, oki?

Este logotipo.gif lo vamos a situar en la parte superior de cada una de las páginas, por lo que la capa correspondiente será el div llamado cabecera. Para facilitar la colocación de los elementos que pongamos en la cabecera, que mejor que crear dos divisiones dentro de ese espacio o capa? Así, será más fácil colocar el logotipo a la izquierda y dejar un espacio a la derecha, en otro div, para en un futuro colocar una foto guapa o quien sabe, quizás publicidad para ganar algo de dinero extra y pagarnos el hosting de la web, no?

Pues según eso, vamos a crear dos divs dentro del div cabecera. Los llamaremos... logotipo y ... publicidad, por qué no. Así que, abre la plantilla.html con tu Html Kit, y ve a la vista de código para cambiar esta línea (te recuerdo que los códigos Html los escribo en azul y los de la hoja de estilos en verde):

<div id="cabecera">Bienvenidos a mi Web</div>

por estas otras:

<div id="cabecera">
  <div id="logotipo"></div>
  <div id="publicidad">Bienvenidos a mi Web</div>
</div>

Como ves, hemos metido las dos capas nuevas dentro de la capa cabecera, y hemos quitado el mensaje de Bievenida de la capa cabecera para colocarlo directamente dentro de la capa publicidad, por poner algo mientras en ella.

Ahora toca colocar dentro el logotipo. Ya vimos cómo colocar una imagen y también cómo hacerle un enlace cuando vimos lo del buzón de correo, te acuerdas? Pues ahora es casi igual (pero en lugar de mailto:tudireccion@email.com se pone la ruta de la página destino). Escribimos la línea de la imagen dentro del div logotipo, quedando esa línea de este modo:

<div id="logotipo">
<img src="objetos/logotipo.gif" width="270" height="80"
       alt="Haz clic aquí para volver a la página de inicio">
</div>

Lo que he puesto dentro del alt="" es el mensaje que aparecerá en algunos navegadores si dejamos el cursor sobre el logotipo.

Ahora nos toca crear y darle propiedades a esa nuevas capas en la hoja de estilos estilo-general.css así que la abrimos y añadimos esto (le he puesto colores de fondo para ver donde está cada una):

#logotipo   {background-color: brown}
#publicidad {background-color: pink}

Para guardar un cierto orden, incluye esas dos lineas justo después de la definición de la capa cabecera de la hoja de estilo. Así, en orden, nos será más fácil encontrarlo todo.

Bien. Qué propiedades le damos a estas dos capas? Para empezar habría que definirles la anchura. En principio le daremos un ancho de 280 pixeles a logotipo, pues es un poco más que lo que ocupa la imagen (270px). A publicidad le daremos el resto, es decir, 800-280-2=518 pixeles. (ese 2 es un pixel del borde izquierdo más otro pixel de grosor del lado derecho de esa capa, pues los grosores también ocupan un espacio).

#logotipo   {background-color: brown ; width:280px}
#publicidad {background-color: pink  ; width:518px}

Guardando la hoja de estilos y haciendo vista previa vemos que realmente estas dos capas están una encima de otra. Cómo se evitaba esto ? Venga, haz memoria... qué propiedad permite que podamos poner una a un lado y la otra al otro lado? A ver si te haces una chuleta! (en Mejico creo que se llama acordeón, je je).

Por si no te acuerdas te ayudo un poco. Vamos a ponerle float:left a logotipo para colocarlo a la izquierda y float:right a publicidad para mandarla a la derecha.

#logotipo   {background-color: brown ; width:280px ; float:left }
#publicidad {background-color: pink  ; width:518px ; float:right }

Guardamos la hoja de estilo y hacemos vista previa en plantilla.html para ver cómo ha quedado... exácto, una verdadera mierda , je je je. Vamos a arreglarlo un poco. Para empezar vamos a darle una altura concreta a la capa cabecera, por ejemplo de 85 pixeles (un poquito más que la altura del logotipo que es 80px). Así la capa gris que vemos que se mete dentro del espacio de publicidad respetará esa dimensión. Así que dejamos cabecera así:

#cabecera {background-color: white ; border-left: black 1px solid ; 
           border-right: black 1px solid ; height:85px}

Con esto la cosa se arregla bastante. Ahora solo queda bajar un poco el texto de Bienvenida y quizás hacer el tamaño de letra algo mayor (esto del tamaño de letra lo vemos luego). Modificamos en la hoja de estilos la capa publicidad para dejarla así:

#publicidad {background-color: pink; width:518px ; float:right ; margin-top:25px}

Ahora, si guardas la hoja de estilo y haces vista previa sí que se ve realmente bien. Ya pudes eliminarle los background-color a las capas logotipo y publicidad, pues ya no necesitamos esos colores para saber dónde acaba cada una. Tras eliminar eso vuelve a guardar la hoja de estilo. Esto ya pinta mejor, no?

Solo nos queda ponerle el enlace hacia la página principal. Eso lo vimos ya, así que pongo directamente la línea, vale? Abres la plantilla.html y a esta línea:

<div id="logotipo">
<img src="objetos/logotipo.gif" width="270" height="80" 
    alt="Haz clic aquí para volver a la página de inicio">
</div></p>

le añades esto que marco en negrita:

<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270" height="80"
       alt="Haz clic aquí para volver a la página de inicio">
</a>
</div></p>

Listo, haz vista previa y verifica que todo va bien. Ahora no solo tenemos el banner, sino que tenemos preparado un hueco para poder poner un fondo que mejore el aspecto o publicidad, si lo deseamos. Para cualquiera de esas dos cosas, habría que retocar algo, como por ejemplo eliminar el margin-top:25px de la capa publicidad en la Hoja de Estilos, pero es algo que veremos en su momento. Si ves que se me olvida me lo recuerdas en el Foro CCTW!

Cómo colocar el menú horizontal en enlace en la web

Aunque más adelante veremos como crear menús más complicados en la parte superior, vamos a comenzar por uno sencillo para no asustarnos e ir cogiendo base.

Antes de crear tu propia web es muy importante que tengas claro un par de cosas. Lo primero es saber de qué vas a hablar en la web y lo sengundo es tener más o menos claro cómo vas a estructurar esos contenidos. Es decir, desglosar lo que quieres contar en secciones y subsecciones. De ese modo sabrás qué secciones vas a colocar en el menú superior.

A la hora de crear la web, colocarías las secciones en el menú horizontal superior y al hacer clic sobre cada una de esas secciones, se abriría la página principal de esa sección mostrando en el menú vertical lateral (el de la izquierda que ya hemos colocado en este ejemplo) las subsecciones.

Por ejemplo, digamos que voy a crear una web de un grupo de música. Las secciones que se me ocurren son, "Presentación", "Historia del grupo", "Trabajos musicales", "Conciertos" y "Zona de Descarga". Luego, cada una de esas secciones principales pueden desglosarse o dividirse en otras subsecciones. Por ejemplo, en la sección "Trabajos Musicales" podrían aparecer las subsecciones "Disco 1", "Disco 2"...."Disco 9". La sección descargas podría dividir se "Canciones", "Videos", "Poster y Carteles", "Letras"....

Para que entendais la idea, las secciones principales irian en el menú horizontal que vamos a aprender a crear ahora mismo, mientras que las subsecciones irian en el menú lateral.

Creando el Menú Horizontal

El menú horizontal lo vamos a colocar en la capa que hemos llamado navegacion. Es esa capa gris horizontal que hay debajo del logotipo. Así que, como imaginarás, tendremos que retocar un poco el html de la plantilla y luego colocar las propiedades apropiadas en la hoja de estilo para la capa navegacion.

Colocando el Html para el menú

Como siempre, abre la plantilla.html con tu Html-Kit. Ve a la vista de código y encontrarás la línea de la capa navegacion:

<div id="navegacion">Barra de Navegación</div>

Borraremos las palabras Barra de Navegación y las sustituiremos por una lista, en la que cada elemento será un enlace del menú. Las listas en Html empiezan con un <ul> y terminan con un </ul>. Dentro de una lista cada elemento de la misma empieza por un <li> y termina con un </li>, te acuerdas?

La lista completa con los enlaces sería algo así:

<ul>
  <li>Sección 1</li>
  <li>Sección 2</li>
  <li>Sección 3</li>
  <li>Sección 4</li>
</ul>

Pues ese es el código Html que tenemos que poner dentro de la capa navegación, eliminando claro el texto que tenía de "Barra de Navegación" quedando al final así:

<div id="navegacion">
  <ul>
    <li>Sección 1</li>
    <li>Sección 2</li>
    <li>Sección 3</li>
    <li>Sección 4</li>
  </ul>
</div>

Cuando hagas tus experimentos y quieras añadir o eliminar enlaces en el menú horizontal, solo tendrás que irte a la plantilla.html y añadir o eliminar líneas <li> Sección X</li> a este trozo de código de arriba.

Si haces vista previa de la plantilla verás algo así. Sorpresa? Puedes ver que los elementos no aparecen uno al lado de otro sino un debajo del otro. Esto es normal, pues las listas son así. Pero nosotros vamos a cambiar eso con solo poner la palabra mágica adecuada en la hoja de estilos, que para eso está.

Abre el archivo estilo.general.css con el Html-Kit y vamos a modificar la línea de la capa navegacion, que hasta este momento era así:

#navegacion {background-color: gray ; border: black 1px solid }

Para empezar vamos a intentar que todos los elementos de este menu de navegación aparezcan uno al lado de otro, en línea. Para ello usaremos la propiedad float, que hace que los elementos floten y se desplacen hacia el lado que queramos. Si a definimos que todos los elementos floten hacia la izquierda, el primero de ellos se irá hacia la izquierda, el segundo igual quedando al lado del anterior y así con todos los demas. Vamos a probarlo a ver qué pasa.

Al querer ponerle float:left a todos los elementos de la lista, parece lógico pensar que en la hoja de estilo hay que ponérselo a los li que haya dentro de la capa navegacion (hay que evitar que los li de la otra capa del menú lateral tomen esa propiedad), así que añadiriamos esta otra línea en la hoja estilo-general.css:

#navegacion li {float:left}

Haciendo vista previa vemos este resultado en la plantilla. Como era de esperar... vemos un auténtico churro, pero vamos a terminar de arreglarlo. Normalmente, si le damos una altura concreta a la capa, se arregla todo. Vamos a colocarle height:20px a la capa navegacion (no a #navegacion li {...., sino a #navegacion {.... ) y veamos que pasa:

#navegacion {background-color: gray ; border: black 1px solid ; height:20px}

Ahora sí que sale realmente como queremos. Nos faltan aún algunas cosillas, como eliminar el punto negro de la izquierda de cada elemento del menú lateral y como ponerle unos margenes adecuados para separarlos un poco.

En la página siguiente aprenderemos a mejorar aún más el aspecto de este menú horizontal. Verás que bien nos va a quedar .

Eliminando el punto negro del menú Horizontal

Para eliminar ese puntito tan molesto, hay que ponerle la propiedad list-style:none a alguna de las líneas de la hoja de estilo. A cuál crees que hay que ponérsela? Pues por ejemplo a la línea #navegacion li, pues esa línea contiene las propiedades de cada una de las secciones del menú, verdad? Vamos a ver que pasa. Añade esto:

#navegacion li {float:left ; list-style:none }

Conseguimos esta otra vista previa de la plantilla. Ahora no aparecen esos punto, que bien.

Acomodando el margen de los enlaces del menú horizontal

A estas alturas ya debes saber como retocar los margenes para que en lugar de aparecer todos los enlaces del menú horizontal tan pegados se muestren un poco más separados. Imagino que sospechas que eso se hace o bien con el margin o bien con el padding. Reconozco que es un poco complicado saber si hay que usar el margin o el padding, a mí me ocurre lo mismo. Siempre recurro a la foto del apartado Margin o Padding para aclararme, je je je. Pero ante la duda lo mejor es probar, si uno no va bien, usa el otro.

Vamos a intentar separar cada enlace del menú. Para ello le pondremos un margin al los elementos li de la capa navegacion. Para ello ya sabes, hacemos esto:

#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px }

Si recuerdas, el orden de esas cifras era: la primera cifra para el margen superior, la segunda para el de la derecha, la tercera para el margen inferior y la última para el de la izquierda. Según la línea de arriba, hemos dejado unos margenes de 10 pixeles por la izquierda y derecha de cada enlace del menú. Queda así ahora la plantilla de nuestra web.

Parece un poco escaso. Vamos a cambiar los dos 10px por 20px para aumentar la separación entre ellos, quedando ahora así la plantilla. Ahora queda mejor.

Dando margen al conjunto de enlaces

Hemos visto como separar los enlaces entre ellos, pero aún podemos dejarlo mejor si los centramos, no? Como no consigo centrarlos fácilmente vamos a hacerlo de otro modo. Vamos a colocarle un margen a la capa navegacion ul por la izquierda de unos 50px. Con eso conseguimos mover a la derecha todo el grupo de enlaces. La nueva línea de css que hay que poner a la hoja de estilos es esta:

#navegacion ul { margin-left: 50px }

Ahora tendremos este aspecto. Como ves, hemos desplazado todos los enlaces un poco (50 pixeles) a la derecha. Vamos a aumentarlo a 180px para que quede más centrado. Este el el resultado.

Ya sabes que cuando hagas tus propios experimentos basados en este ejemplo, si añades más enlaces a este menú horizontal tendrás que disminuir estas cantidades para centrarlo.

Colocando enlaces al menú

Solo nos falta ya colocarle los enlaces a los elementos del menú. Eso si que debes saberlo ya, pero lo repetimos para recordarlo. Como aún no sabemos a qué página mandar al visitante cuando hagan clic en ellos, en lugar de ponerle la ruta de la página destino le colocaremos un simple #. Eso hace que los enlaces se muestren como tales, pero al pulsar sobre ellos no te mandan a ningún lado.

Para convertir los elementos de la lista del menú horizontal en enlaces, basta con colocarle esto que os señalo en negrita al código inicial que pusimos en el archivo plantilla.html:

<div id="navegacion">
  <ul>
    <li><a href="#">Sección 1</a></li>
    <li><a href="#">Sección 2</a></li>
    <li><a href="#">Sección 3</a></li>
    <li><a href="#">Sección 4</a></li>
  </ul>
</div>

Con eso, la plantilla se ve ahora de esta forma.

Fíjate que ahora los enlaces del menú horizontal se comportan como los del menú lateral, es decir, aparecen rojos y sin subrayar y cuando colocas el cursor del ratón sobre ellos aparecen con fondo gris claro y con línea bajo ellos. Esto es porque cuando definimos las propiedades a las etiquetas a en la hoja de estilo, lo hicimos de forma general, es decir, para TODOS los enlaces. Más adelante aprenderemos a crear varios tipos de enlaces, por si queremos que los del menú lateral se comporten de un modo distinto a los del menú horizontal o incluso distintos a otros elementos del cuerpo de la página web.

Mejorando el menú lateral

El menú lateral quedó más o menos bien, pero estarás de acuerdo en que puede mejorarse, verdad? Pues vamos a ello. Lo que vamos a ver aquí es cómo darle la apariencia que tienen los menús de la web de ComoCrearTuWeb, que pueden gustarte más o menos, pero eso da igual, pues una vez sepas hacer lo que te propongo a continuación, serás capaz de mejorar su aspecto. Ten en cuanta que lo que yo intento enseñarte es a crear el "esqueleto", pero una vez sepas esto si tienes un poco de gusto y buena mano podrás dejarlo mucho más guapo que el mio, pues será solo cuestión de ponerle buenos gráficos, imagenes mejores, colores más vistosos.. ahí es donde entra el genio que llevas dentro... o no... je je je.

Bien, se trata de escoger dos imagenes. Una se coloca arriba del todo del menú lateral y la otra justo debajo. Como ese menú irá creciendo hacia abajo conforme vayamos incorporando nuevas secciones (enlaces) al mismo, lo haremos de un modo algo peculiar.

La imagen de arriba será fija y tendrá una altura concreta. En cambio la imagen de abajo ha de ser bastante larga, lo suficientemente larga (hacia abajo) como para contener el máximo número de enlaces que tengamos previsto colocar en un futuro en cada uno de los menús laterales (digo cada uno porque cada sección tendrá su propio menú lateral).

Las imágenes que vamos a utilizar para el ejemplo que estamos creando son las siguientes:

Igual que hemos hecho en otras ocasiones, guarda estas dos imágenes en tu carpeta objetos y ponles estos nombres: menu-curva-superior.gif y menu-parte-inferior.gif

Imagino que imaginas lo que toca hacer ahora... un poquito de Html y otro poco de CSS y asunto concluido. Será fácil. Estate atento y podrás aplicar luego todo esto a tu propio proyecto.

Retocando los códigos

El código Html completo del menú lateral era por el momento este:

<div id="menu">
  <ul>
    <li><a href="#">Enlace 1</a></li>
    <li><a href="#">Enlace 2</a></li>
    <li><a href="#">Enlace 3</a></li>
  </ul>
</div>

Bueno, realmente es ese pero todas las líneas entre <ul> y </ul> han de estar seguidas una justo después de la otra para que el internet explorer muestre bien el menú. Yo aquí lo escribo en líneas separadas para que se vea más claro, pero acuérdate de luego guardar la plantilla con todas esas líneas seguidas.

La idea de colocar las imágenes anteriores como fondos, pues así no nos molestará a la hora de escribir los enlaces dentro. Para ello la imagen más larga se la vamos a poner de fondo a la capa menu, mientras que la imagen más corta, la de arriba se la tenemos que poner a algún elemento de dentro de esa capa. Si se la ponemos de fondo a los enlaces, esa imagen se repetirá con cada enlace, con lo que no nos vale (solo debe aparecer una vez y además arriba del todo).

Para remediarlo le vamos a poner un título al menú. Como cada sección tendrá su propio menú parece buena idea que ese título sea el nombre de esa sección. Así, si una sección se llama "poesias", por ejemplo, pondremos la palabra "Poesias" arriba del todo del menú, como si fuera un título, y al elemento título (h1) le colocaremos ese fondo corto. Y todo arreglado.

De modo que, lo único que hemos de retocar en el código Html de la plantilla.html será el incluir el título. Si recuerdas de lecciones anteriores, los títulos se escriben igual que los párrafos, pero en lugar de usar las etiquetas <p> y </p> se usaban estas otras, <h1> y <h1> (es un uno, no una ele!).

El menú anterior con el título puesto quedaría entonces con este código Html:

<div id="menu">
  <ul>
    <h1>Título de Sección 1</h1>
    <li><a href="#">Enlace 1</a></li>
    <li><a href="#">Enlace 2</a></li>
    <li><a href="#">Enlace 3</a></li>
  </ul>
</div>

El problema que se nos presenta es que nosotros ya habíamos definido unas características para los párrafos tipo h1, por lo que ahora si las cambiamos, también cambian las propiedades de los títulos que en un futuro pongamos en el contenido de la página.

Esto se supone que sabemos arreglaro. Queremos definir unas propiedades para los títulos del tipo h1, pero solo para los que están dentro del menú, es decir, los que pertenecen a la capa menu. Te acuerdas como se hacía? Je je je, que memoria...

Abre el archivo estilo-general e incluye esta línea, por ejemplo, debajo de la línea donde definimos la capa menu, así seguiremos cierto orden.

#menu h1 {}

Con esa línea lo que conseguimos es darla propiedades SOLO a los títulos que hay dentro de la capa menu, sin tocar para nada los demás. Solo un problema, y es que como los navegadores leen desde arriba hacia abajo. Te lo explico mejor.

Imagina una casa llamada Body. Dentro de ella hay unas cuantas habitaciones que llamamos Capas y dentro de cada habitación o capa hay varios elementos (párrafo, enlaces, etc). Imagina ahora que la hoja de estilos le cambia los aspectos a los elementos de la casa. Por ejemplo, si escribo esto:

* {el color del pelo será rubio}

Todos (el asterisco * indica TODOS los elementos) los habitantes de la casa serán rubios. Te acuerdas? Nosotros en lecciones pasadas pusimos una línea similar, que empezaba con un asterisco.

Ahora imagina que le digo con esta otra línea:

#cocina {el color del pelo será moreno}

que todos los elementos de la cocina (la capa cocina) han de ser morenos. Qué ocurre? Al final serán rubios como decía la línea de antes o serán morenos como dice esta otra? Pues como la última orden que he dado es la segunda, la de cocina, esa será la que manda. En caso de que dos líneas digan distintas cosas para una misma propiedas (altura, anchura, borde.... color del pelo..) la que al final se muestra en el navegador es siempre la última.

Por supuesto, los elementos del baño y del salón siguen siendo rubios, pues la línea de la "capa" cocina solo habla de sus elementos, no de los del resto de la casa. Se entiende ahora? Espero que si, je je. Y si no se entiende, dímelo en el Foro CCTW e intento explicarlo mejor, oki? Te lo agradecería mucho!

Bien, pues si miras en la hoja de estilo-general.css, verás que tenemos al final del todo esta línea:

h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}

Al estar al final, y estar definiendo propiedades para todos los h1 de la web, son esas las características que mandan y será inutil darle otras propiedades en la línea nueva que hemos puesto. Por qué? Pues porque ésta línea está después.

Cómo lo arreglamos? Fácil, la situamos antes de la otra y listo, oki?

Para no perdernos, te dejo la hoja de estilo-general.css tal y como ha de estar ahora mismo, después de haber incluido (aunque aún vacia) la línea para definir los títutlos de dentro de la capa menu. Comparala con la que tienes por el momento y si no está igual, sustituyela, oki? Debe tener ese orden para no liarnos lecciones sucesivas:

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
    text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; 
    text-align: center}
body        {text-align: center }
#global     {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ; 
                  background-repeat: no-repeat ;
                  width: 800px ;
                  height:12px ;
                  overflow: hidden }
#cabecera   {background-color: white ; border-left: black 1px solid ;
             border-right: black 1px solid ; height:85px}
#logotipo   {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid  ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido  {background-color: orange ; border-left: black 1px solid ; 
             border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu       {background-color: yellow ; width: 150px ; float:left ; 
             text-align:left ; margin: 3px 10px 3px 3px }
#menu li    {list-style:none ; margin: 4px 0px 4px 6px }
#menu h1 {}
#pie { background-color: white ; 
       border-left: black 1px solid ; 
       border-right: black 1px solid; 
       border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; 
                  background-repeat: no-repeat ;
                  width: 800px ;
                  height:12px ;
                  overflow: hidden }
a         {color: brown ; text-decoration:none ; display: block }
a:link    {}
a:visited {}
a:hover   {color:red ; text-decoration:underline ; background-color: silver}
a:active  {}

Si te fijas, he puesto casi arriba del todo las líneas que definen p, h1 y h2. Recuerda además que la línea del asterisco ha de estar por narices la primera de todas. Por qué? Pues por que si la ponemos en medio o al final, vuelve a poner a cero los margenes y bordes de las capas que estén definidas antes que ella. Es por lo mismo que acabo de explicarte.

Parece un poco lio tanto código, verdad? Pero imagino que mirándo línea por línea más o menos sabes de que va todo, no? De hecho lo has ido escribiendo tú mismo a lo largo de estas lecciones... Si no te aclaras mucho siempre puedes empezar desde el principio y puedes ir repasando porqué se puso cada cosa. No te vendría mal para ir repasando estilos.. No te asustes, pronto, con un poco de más práctica estos códigos no tendrán secretos para tí. Te aseguro que muchos de los que se hacen llamar Webmaster no tienen ni idea de estilos ni de capas. Ya eres mejor que la mayoria!!

Volviendo al menú

Guardando estilo-general.css y haciendo vista previa a la plantilla.html podemos ver esto:

Bueno, quizás quede mejor sin el subrayado y con una letra más pequeña, verdad? Para eliminarle el subrayado se ponia en la hoja de estilo esto:

text-decoration:none

Para cambiar el tamaño del texto se pone esto otro:

font-size:10px

donde 10px es la altura de una letra en pixeles. Hay otras unidades que podemos usar en lugar de pixeles, pero lo veremos más adelante.

El caso es que la línea de estilo-general.css que define a los títulos de dentro de la capa menu ha de quedar, por el momento así:

#menu h1 {text-decoration:none ; font-size:10px}

Guardamos la hoja de estilo, hacemos un preview o vista previa y....

Mucho mejor, no? Ahora cámbiale el tamaño por 12px que así quizás sea un poco pequeña de más.

A veces parece mentira como cambia una web con solo ir retocando la hoja de estilos, verdad?. Sigamos investigando a ver si logramos colocarle las imágenes, vale?

Colocando la imagen superior

Las imágenes de fondo ya sabes ponerlas así que te dejo solo con esto.... je je je. Te has puesto blanco? ja ja. Venga, te ayudo un poquito.

Ya dijimos que la imagen superior se la ibamos a poner de fondo al título del menú, así que añadimos las palabras mágicas del fondo de imagen a la capa #menu h1, quedando así:

#menu h1 {text-decoration:none ; font-size:12px ; 
          background-image: url(objetos/menu-parte-superior.gif) }

Si guardas y haces vista previa verás esto:

Nos vamos acercando eh? Vemos dos "fallos". Me encantan los fallos, así aprendemos más! je je je.

El primero es que la imagen se repite por la derecha y el segundo fallo es que se ven las esquinas de color blanco y queda un poco feo.. bueno, bastante feo, si que si.

Evitando el blanco de las esquinas

Esto va a ser rápido. Tan solo hace falta abrir los archivos de las imágenes con un programa de dibujo (por ejemplo el Paint de Windows) y colorear esas esquinas del mismo color que vayamos a poner el fondo de la web (que ahora es naranja, pero que pronto cambiaremos a otro más mono). Así que bastaría con eso, colorear las esquinas de naranja y volver a guardar esas mismas imagenes con el mismo nombre y extensión. (no es necesario que lo hagas, espera un poco, impaciente! )

Amoldando la anchura de la imagen

Este fallito se arregla con un programa de dibujo, variando su anchura. Por ejemplo con el Paint de Windows que imagino que lo tenemos todos. Si no lo tienes seguramente cualquier otro programa sea capaz de hacer lo mismo. Pero para no perder mucho tiempo te dejo aquí los dos archivos ya arreglados y en otro momento, cuando encuentre un software gratis de dibujo que esté bien os lo explico paso a paso todo (en realidad basta con decirle al programa que cambie el ancho de la imagen para que tenga 150 pixeles, que es el ancho que le dimos a la capa menu, de ese modo coincidirán ambos anchos).

Las nuevas imágenes ya retocadas

Las nuevas imágenes, con la anchura adecuada (que coincide con el ancho de la capa menu) y con las esquinas ya pintadas de naranja son estas dos:

Guarda esos dos archivos (guárdate esas imagenes en objetos), sustitúyelos por los archivos que tenías en la carpeta objetos y seguimos.

Si ahora haces vista previa de nuevo, has de ver esto de la foto de abajo. Si no lo ves así, guarda la plantilla.html, ciérrala y vuelve a abrirla con el Html-Kit:

Ahora si! Ahora vamos a por el fondo de la parte inferior. A ver si nos sale tan bien como este!

Colocando la imagen inferior

Solo se puede poner una imagen de fondo a un elemento, no se le pueden poner dos. La razón por la que no le hemos puesto un único fondo que sea el dibujo del menú completo es por que no quiero estar retocando la imagen cada vez que incluya un enlace más al menú. Con esto que hacemos nos olvidamos de los fondos ya sea el menú muy cortito o muy largo, ya lo verás.

Este otro fondo que será la parte inferior se lo vamos a colocar directamente a la capa menu. Para ello, incluimos el siguiente trozo de código css en la hoja de estilo estilo-general.css:

#menu  {background-color: yellow ; width: 150px ; float:left ; 
        text-align:left ; margin: 3px 10px 3px 3px ;
        background-image: url(objetos/menu-parte-inferior.gif) }

Haciendo vista previa de la plantilla.html vemos esto (acuérdate, antes de hacer vista previa siempre guarda la hoja de estilo):

Bueno... ahora se ve el fondo, pero no conseguimos ver bien la parte inferior... por qué puede ser? A ver, a ver... Pues claro! Resulta que si no se indica nada, las imágenes se colocan pegando su parte de arriba a la parte de arriba de la capa y como la capa es más pequeña que la imagen no vemos la parte inferior que es la que nos interesa! Lo que nos interesa realmente es que la parte inferior del fondo se pegue a la parte inferior de la capa y así podremos ver la curva de la imagen que está en su parte más baja.

Cómo lograremos esto? Pues solo hay que decir en la hoja de estilo, que en esa capa, la imagen de fondo ha de alinearse por la parte de abajo. Esto se hace así:

#menu {background-color: yellow ; width: 150px ; float:left ; 
       text-align:left ; margin: 3px 10px 3px 3px ;
	   background-image: url(objetos/menu-parte-inferior.gif);
	   background-position: bottom }

Bottom significa culo o parte de abajo. Haciendo vista previa (como siempre, guarda antes la hoja de estilo) la cosa queda.... genial, sencillamente genial! Mira:

Qué te parece?

Últimos Retoques

Fíjate ahora. Abre tu plantilla.html con el Html-Kit si la tienes cerrada y añade un tercer enlace al menú. Ya sabes, después de la línea del Enlace 3, pones una idéntica y le cambias el número 3 por el 4, es decir, añades esto:

<div id="menu">
  <ul>
    <li><a href="#">Enlace 1</a></li>
    <li><a href="#">Enlace 2</a></li>
    <li><a href="#">Enlace 3</a></li>
    <li><a href="#">Enlace 4</a></li>
  </ul>
</div>

Si de nuevo haces vista previa verás como no hay que tocar para nada los fondos del menú, sino que estos crecen con él. Hay que ahorrar trabajo, no? je je je.

Ya para terminar de dejarlo perfecto, añade un padding-top:12px (margen por arriba al título del menú) para separarlo un poco de la franja oscura de la imagen y listo, queda perfecto, genial, fenomenal... er.. no tengo palabras, casi lloro de emoción, tú no? je je.

También vendría bien dejar un poco de margen por la parte inferior, pues parece que el Enlace 4 está demasiado pegado a la parte baja de la imagen, no? Esto lo podemos arreglar colocando un padding por abajo de unos 5 pixeles a la capa menu, incluyendo en su estilo algo así:

#menu  {background-color: lorange ; width: 150px ; float:left ; 
        text-align:left ; margin: 3px 10px 3px 3px ;
	    background-image: url(objetos/menu-parte-inferior.gif);
	    background-position: bottom ;
	    padding-bottom:5px }

Más cosas? Venga vale.... a ver... SI! Haz vista previa y pon el ratón sobre cada uno de los enlaces de este menú vertical. Como verás, la sombra gris que aparece cuando haces eso tiene un margen por la izquierda, pero en cambio no lo tiene por la derecha y ese efecto es un poquillo feo. Cómo lo arreglamos? El margen que vemos por su izquierda ha de estar definido por nosotros en algún lugar de la hoja de estilos... seguramente en la línea que define los li del menú, es decir, en esta línea:

#menu li    {list-style:none ; margin: 4px 0px 4px 6px }

y ahí está la solución. Vemos que tiene definidos unos margenes de 4 por arriba y por abajo, 6 pixeles por la izquierda y un cero patatero por la derecha. Ponle un 8px por ejemplo en lugar de cero y fíjate como ahora se ve mejor, verdad?

Sómos unos Cracks!

El efecto ahora es para morirse de gusto! GUAU!!

Por cierto. Quizás no veas bien los acentos en tu web cuando la subas al sevidor. En ese caso no olvides insertar esta línea de código entre <head> y </head>:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Toma nota e insertalo en todas las páginas que hagas, siempre que en ellas se usen acentos, oki? 

Recordando el código que llevamos hasta el momento

Si te has fijado, si no sigues al pie de la letra las explicaciones y se te ocurre crear alguna capa más, alguna capa menos, otros textos, otros párrafos etc distintos a lo que aqui te comento lo único que conseguirás es perderte, pues cuando más adelante te diga "en el párrafo donde pone Bienvenido haz esto y lo otro" no sabrás a qué me refiero.

Es por eso que debes seguir todo esto al pie de la letra, sin improvisar nada, sin cambiar nada de nada de nada.

Claro que por el camino se te van a ocurrir ideas propias e incluso vas a querer ir remodelando lo que yo te explico para que el ejemplo se vaya pareciendo a tu idea de web, pero eso es algo que puedes hacer a la par, pero en otra carpeta distinta, de modo que la del ejemplo de estas explicaciones quede tal cual la explico, oki? En otra carpeta puedes hacerlo a tu manera y de hecho, es lo que deberías estar haciendo ya para ir asentando lo que aprendes y para ir ensayando etc.

Por si acaso te has columpiado ya (seguro que si, je je) te dejo ahora los códigos de los archivos plantilla.html y estilo-general.css para que verifiques que son iguales a los tuyos, oki?

A veces puede que te diga... "en la línea 15 de la hoja de estilo cambia tal por cual". Así que, procura que sean exactamente iguales para no perderte. No solo es por eso claro, es porque tanto en Html como en CSS el orden que tomen las líneas tiene gran importancia. En CSS colocar cierta línea al principio o al final puede cambiarlo todo (si no te lo crees prueba a colocar la lína del asterisco al final y verás como todo cambia...).

Código Html de la plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="global">
  <div id="curva-superior"></div>
  <div id="cabecera">
    <div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270" 
height="80" alt="Haz clic aquí para volver a la página de inicio"></a></div>
    <div id="publicidad">Bienvenidos a mi Web</div>
  </div>
  <div id="navegacion">
    <ul>
      <li><a href="#">Sección 1</a></li>
      <li><a href="#">Sección 2</a></li>
      <li><a href="#">Sección 3</a></li>
    </ul>
  </div>
  <div id="contenido">
       <div id="menu">
         <h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
       </div>
<h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>
<p>En pocas lecciones aprenderé a darle margenes para
separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
  </div>
  <div id="pie">Este es el pié de página</div>
  <div id="curva-inferior"></div>
</div>
</body>
</html>

Código CSS de estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
    text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; 
    text-align: center}
body        {text-align: center }
#global     {width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ; 
                  background-repeat: no-repeat ;
                  width: 800px ;
                  height:12px ;
                  overflow: hidden }
#cabecera   {background-color: white ; border-left: black 1px solid ; 
             border-right: black 1px solid ; height:85px}
#logotipo   {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid  ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido  {background-color: orange ; border-left: black 1px solid ; 
             border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu       {background-color: lorange ; width: 150px ; float:left ; 
             text-align:left ; margin: 3px 10px 3px 3px ;
             background-image: url(objetos/menu-parte-inferior.gif);
			 background-position: bottom ;
             padding-bottom:5px }
#menu li    {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
          background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ; 
       border-left: black 1px solid ; 
       border-right: black 1px solid; 
       border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; 
                  background-repeat: no-repeat ;
                  width: 800px ;
                  height:12px ;
                  overflow: hidden }						
a         {color: brown ; text-decoration:none ; display: block }
a:link    {}
a:visited {}
a:hover   {color:red ; text-decoration:underline ; background-color: silver}
a:active  {}

Bien. Y este es el aspecto que ha de tener esa plantilla. Vamos ahora a la siguiente lección? Venga, vamos! Pero antes os dejo una chorrada, vale? je je je. Esto es para ver la progresión que hemos logrado. Os gusta? je je je, tonterias que se me ocurren! ja ja ja.

El pie de página de nuestra web

Ves como poco a poco esto va tomando forma? Ha llegado el momento de meterle mano al pie de página. Vamos a intentar colocarle un hueco a la izquierda y otro a la derecha donde colocaremos accesos directos (enlaces) a diversas secciones de la web que conviene que el visitante tenga a la vista en todo momento. Me refiero a enlaces al mapa de la web (importante para el posicionamiento de la página), a una página desde donde puedan contactarnos (muy útil para conocer siempre el punto de vista del visitante), otro enlace hacia una página de enlaces (que usaremos a la hora de darnos de alta en directorios) y también por qué no, unos enlaces al futuro foro, top y directorio de nuestra web (todo eso lo aprenderemos más adelante).

En medio de estos dos espacios dejaremos un hueco con dimensiones idoneas para incorporar en un futuro, o bien otra serie de enlaces amigos, o bien una ventanita donde colocar las últimas noticias o avisos que queramos dejar o, seguramente, para colocar un poco de publicidad que nos ayude a pagar un buen hosting sin necesidad de poner un centavo de nuestro bolsillo. Los hobbies están muy bien, pero si nos salen gratis... mejor que mejor, no? Je je je.

Dónde va el pie de página?

Como bien habrás adivinado el pie de página lo vamos a colocar dentro de la capa #pie (tampoco hay que ser muy adivino...). Este es su código en la plantilla.html en estos momentos:

<div id="pie">Este es el pié de página</div>

Cada uno tiene sus manias, y yo no voy a ser menos. Cuando quiero colocar varias capas que están juntas horizontalmente (una justo al lado de la otra) siempre las meto dentro de otra capa que las engloba. Así me es más fácil aplicarle luego los estilos y queda todo más recogidito. Como en este caso quiero crear tres huecos rectangulares, y todos uno al lado del otro, crearé tres capas, una para los enlaces de la izquierda, otra para el espacio central que en principio usaremos para poner publicidad y otra para los enlaces de la derecha. Esas tres capas las voy a meter dentro de la capa #pie.

Los nombres que les voy a dar son, #pieuno #piedos y #pietres así que ahora mismo, las escribo en el código de la plantilla.html y coloco una palabrita dentro para ver como van quedando cuando haga vista previa. Ha de quedar así en la plantilla.html (fíjate que borro el texto "Este es el pié de página" que había antes):

<div id="pie">
  <div id="pieuno">pie uno</div>
  <div id="piedos">pie dos</div>
  <div id="pietres">pie tres</div>
</div>

Listo, la vista previa se ve así:

Seguimos?

............

#pie     {border-left:  black 1px solid ; 
          border-right: black 1px solid ; 
          border-top:   black 1px solid ; }
#pieuno  {background-color: brown ; float:left}
#piedos  {background-color: green ; float:left}
#pietres {background-color: red   ; float:left}
#curva-inferior { background-image: url(objetos/curva-infe.....
...............

#pieuno  {background-color: brown ; float:left ; width:150px }
#piedos  {background-color: green ; float:left ; width:498px }
#pietres {background-color: red   ; float:left ; width:150px }
Dónde está la capa #pie?
Ahora vamos a comprender una cosilla de las capas y del css que nos vendrá muy bien en el futuro. Si haces vista previa te encontrarás con esto:
Que habrá pasado con el borde? Pues te lo explico. En teoría, como las tres nuevas capas están dentro de la otra capa llamada #pie, debería aparecer un borde por sus partes izquierda, derecha y arriba, pues así está definido en la hoja de estilos, pero parece que al incluir estas tres capas el borde ha desaparecido tal y como os señalo con círculos rojos en la imagen de arriba.
Quizás no me creas, pero los bordes de la capa #pie sí que están dibujados. Lo que ocurre es que cuando una capa no tiene ningún contenido, la altura que toma es cero y por tanto en lugar de ser un rectángulo se queda como una línea.
Pero... la capa #pie síi que tiene contenido, ni más ni menos las otras capas #pieuno, #piedos y #pietres, no? Pues No. Como le he escrito a estas tres capas la propiedad float, las capas están flotando sobre la capa #pie por lo que es como si #pie no tuviera ningún contenido.
Venga vale, pero dónde está entonces la capa #pie y sus bordes? Pues están justo encima de las tres nuevas capas. Ves esa línea negra fina que va por la parte de arriba de las tres capas? Pues esa línea es la capa #pie. Como no tiene ningún contenido dentro, su altura es 1px y por eso tiene forma de línea. Te señalo la capa #pie en el dibujo para que lo veas más claro:
Esa línea negra rodeada de rojo es todo lo que nos queda de la capa #pie. Las otras tres capas se salen de la capa #pie, pues como son flotantes... quedan justo debajo, pero fuera de #pie. Entiendes ahora por qué no vemos los bordes? Pues ya sabes, "Siempre que pongas una capa en tu web has de colocarle algo de contenido, por ejemplo un punto, una letra, una palabra, una imágen o una capa siempre que no tenga un float".
Pero si no te interesa colocarle nada que no sea una capa con float aún nos queda una opción y es definirle nosotros la altura. Y eso es lo que vamos a hacer.
Ve a la hoja de estilos estilo-general.css y define una altura de, por ejemplo, 65px a la capa #pie. Más tarde podremos retocar esa cantidad para amoldarla a nuestro gusto. Quedaría así la capa #pie (Recuerda que siempre escribo en negrita los códigos que incluyo o modifico):
#pie { background-color: white ;
       border-left:  black 1px solid ;
       border-right: black 1px solid ;
       border-top:   black 1px solid ;
       height: 65px ;
     }
Haciendo vista previa vemos que hemos conseguido esto:

Ves? Las tres capas #pieuno, #piedos y #pietres ahora parecen estar dentro, aunque realmente están "flotando dentro". Siguen sin ser contenido de la capa #pie, pero al darle altura ocupa el espacio que necesitábamos y queda pintado el borde como queríamos. Parece un poco complicado, pero en realidad son solo unos pocos trucos los que necesitamos conocer.
Y por qué las tres capas de dentro no ocupan esa misma altura? Pues porque si no le indicamos la altura que queremos que tenga, ocuparán solo el espacio necesario para contener lo que tengan dentro, en este caso las palabras "pie uno", "pie dos" y "pie tres".
Nosotros no vamos a darle altura a esas tres capas, pues conforme le añadamos el contenido a cada una iran llenando todo ese lugar.
Bordes para separar las tres capas
Vamos a separar visualmente las tres capas dibujándoles un borde. Los bordes si que debes ya saber colocarlos, verdad? De todas formas te ayudo. La verdad es que para separarlas solo necesitamos una sola línea de borde entre las capas #pieuno y #piedos y otra entre las capas #piedos y #pietres, de modo que el código de esas tres capas quedaría así:
#pieuno  {background-color: brown ; float:left ; width:150px ; 
          border-right: black 1px solid }
#piedos  {background-color: green ; float:left ; width:498px }
#pietres {background-color: red   ; float:left ; width:150px ; 
          border-left: black 1px solid }
Con eso hemos puesto un borde por la derecha de la capa #pieuno y otra por la izquierda de la capa #pietres. Lo mismo hubiéramos conseguido colocando borde a ambos lados de la capa #piedos o cualquier otra combinación.
Como verás, aunque la primera vez te sonó a chino, ahora ya dibujar un borde no guarda muchos secretos para tí. Lo mismo te va a ocurrir con el resto de cosas, la primera vez no se entiende muy bien, pero en cuanto aparezcan dos o tres veces en las lecciones seguro que te acabas familiarizando.
El efecto conseguido es este:

Ahora que has visto de nuevo cómo colocar bordes, vamos a quitárselos pues el efecto no queda del todo bien. Como ejercicio de repaso te propongo algo, a ver si lo consigues, oki?
Ejercicio de práctica
Como ejercicio de prácticas, intenta hacer que tanto el fondo de #pieuno como el de #pietres sean blancos, que el fondo de #piedos sea gris claro (silver) y elimina los bordes que dejamos antes. Así terminarás de familiarizarte con todo esto, oki?
Pero inténtalo de verdad antes de mirar el código de abajo. 3, 2 1... venga!
El código CSS de las 4 capas del pie han de quedar como te indico abajo. Si el ejercicio te sale bien y funciona, enhorabuena! pero pon este otro para que así tanto tú como yo tengamos el mismo y así no te pierdas en las lecciones siguientes, oki?
#pie     {border-left:  black 1px solid ; border-right: black 1px solid ; 
          border-top:   black 1px solid ; height: 65px }
#pieuno  {float:left ; width:150px }
#piedos  {float:left ; width:498px ; background-color: silver}
#pietres {float:left ; width:150px }
Cómo colocar los enlaces del pie
Los enlaces ya vimos como se colocaban cuando hicimos los menús. En este caso van a ser tres enlaces en la capa #pieuno y otros tres en la capa #piedos colocados uno encima de otro. Como eso parece una lista, lo mejor es usar una lista para ello, verdad? Vamos allá.
Dentro del código Html de la plantilla.html, en la parte correspondiente a la capa #pieuno coloca esto:
<div id="pieuno">
  <ul>
    <li><a href="#">Foro Ejemplo</a></li>
    <li><a href="#">Contactos</a></li>
    <li><a href="#">Nos Enlazan</a></li>
  </ul>
</div>
Y haz lo mismo con el Html de la capa #pietres con este otro código:
<div id="pietres">
  <ul>
    <li><a href="#">Directorio</a></li>
    <li><a href="#">TopSite</a></li>
    <li><a href="#">Mapa de la Web</a></li>
  </ul>
</div>
Haciendo vista previa, como siempre nos pasa antes de retocar la hoja de estilo... nos encontramos este churro...

Ya puedes imaginarte un poco cómo debemos arreglarlo para reducir un poco el espacio que hay entre ellos, eliminarles el punto negro de la izquierda y reducirles un poco el tamaño de la letra, no? Inténtalo tú, oki? je je je.
Cómo eliminar el punto negro a las listas
Basta con poner list-style:none en el lugar adecuado de la hoja de estilos estilo-general.css, pero veamos qué posibilidades tenemos.
La primera puede ser incluir ese código dentro de la primera línea de la hoja de estilos, aquella que comienza con un asterisco *. Como recordarás el asterisco representa a tooodos los elementos por lo que si escribimos ese código dentro de sus corchetes estaremos diciendo que todos los elementos de la web han de aparecer sin ese puntito.
Lo bueno de esta opción es que con solo eso ya no tenemos que preocuparnos más en los dichosos puntos. Lo malo? Que si alguna vez queremos hacer una lista con sus puntos, por ejemplo alguna vez en el contenido de la web, vamos a encontrarnos con que el punto no aparece. Así que desechamos esta opción.
La segunda opción es poner ese código dentro de las propiedades de las capas #pieuno li y #pietres li. Lo bueno es que funciona, y lo malo es que tenemos que crear dos líneas más de codigo css y no tenemos ganas de escribir tanto... je je
La tercera opción es sencilla también, y es colocar ese código en una nueva línea que indique que todas las listas de dentro de la capa #pie han de salir sin esos puntos. Lo bueno es que matamos dos pájaros de un tiro y lo malo... lo malo es que te metan en el ojo un palo, ja ja ja.
Esa tercera opción se consigue con esta nueva línea, que vamos a colocar por seguir un orden justo después de la línea de la capa #pie.
.............

#pie     {border-left:  black 1px solid ; border-right: black 1px solid ; 
          border-top:   black 1px solid ; height: 65px }
#pie li  {list-style: none }
#pieuno  {float:left ; width:150px }
.............
Y papeleta solucionada.
Cómo ponerle el tamaño de letra algo menor a esas listas
Para definir el tamaño de letra se usaba font-size, asi que en esa misma linea que hemos creado indicamos un tamaño de 12px de este modo:
#pie li  {list-style: none ; font-size: 12px }
Si te fijas en la vista previa, verás como todos los textos del pie son ahora menores, menos el texto de la capa #piedos. Esto es lógico, pues el texto "pie dos" no pertenece a un elemento de lista (li) y por tanto el estilo definido no le afecta para nada
Aminorar la distancia de separación entre los elementos de las listas
Es curioso, pues aunque en la hoja de estilo le habiamos indicado al navegador que pusiera todos los margenes a cero (con la famosa línea del asterisco) ahora nos encontramos con un margen en esa lista y además bastante grande (al menos usando el Internet Explorer). Vamos a probar el truco aquel que te conté, el de poner todo el código html de la lista en la misma línea, recuerdas? Ha de quedar así:
<div id="pieuno">
  <ul>
    <li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li>....
  </ul>
</div>
Y lo mismo para la otra lista, la de la capa #pietres, oki?
<div id="pietres">
  <ul>
    <li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a......
  </ul>
</div>
Pues sí, era eso, je je je.
Aún puedes disminuir algo más el espaciado entre los enlaces de esas capas. El problema es que no sabría explicártelo muy bien, pues a simple vista no tiene mucho sentido, pero el caso es que funciona. En fin, te digo cómo y pasamos de la explicación por el momento pues me llevaría unas cuantas páginas convencerte del porqué, je je. Además en el ejemplo no lo dejaremos así, sino como lo tenemos hasta ahora, oki? Sería añadiendo la propiedad font-size:12px a la línea de definición de la capa #pieuno. Si en lugar de 12px disminuyes ese valor verás como el tamaño del texto no varia (pues ese tamaño está definido en la capa #pie li) pero sí decrece el espacio entre los tres enlaces. Pero repito, eso no lo hacemos en este ejemplo, oki? Úsalo tú en tus cosas si lo necesitas.
Con esto queda por terminado por el momento el pie de página. Así que quita ya el color gris claro (silver) que habíamos puesto a la linea de la capa #piedos (elimínale el ; background-color: silver), guarda la hoja de estilo y haz vista previa para ver cómo ha quedado.


 
Definir enlaces de distintos tipos
Ya vimos cómo conseguir cambiar el estilo de los enlaces de toda la web de una sola vez. La cuestión ahora es... y si quiero tener varios enlaces con aspectos distintos? Pues como siempre, lo conseguimos gracias a la hoja de estilos.
Las líneas de estilo-general.css que por el momento están afectando a los estilos son las siguientes:
*         {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
a         {color: brown ; text-decoration:none ; display: block }
a:link    {}
a:visited {}
a:hover   {color:red ; text-decoration:underline ; background-color: silver}
a:active  {}
Y por qué incluyo la línea del asterisco *? Sencillo, porque como ya hemos dicho antes, esa línea, al llevar asterisco afecta a todos los elementos de la web.
Bien. Eso nos da un tipo de enlace general, para todos los enlaces de la web. Tendrán por tanto margenes nulos, nada de indentado, sin bordes, de color marrón todos, etc, etc. Vamos a ver la forma de crear una nueva clase de enlace con otras propiedades sin que por ello se pierda el tipo ya definido.
Una nueva clase de enlaces
Anteriomente hemos dicho que los estilos para elementos que solo aparecen una sola vez en una página web concreta los definiriamos con la almohadilla # antes de su nombre. Pero como este nuevo estilo de enlace si puede que se repita para varios elementos dentro de una página, lo definimos del otro modo, con un punto en la hoja de estilo y llamándolos con class="loquesea" en lugar de con id="loquesea" en el html de la página.
Para definir una clase de enlace nueva, primero escogemos un nombre. Como siempre, todo en minúsculas, sin espacios ni símbolos raros ni empezando con un número. Le pondremos el nombre .enlaceuno y lo escribimos así en estilo-general.css, justo al final (no escribas este código aún en tu hoja de estilos):
a.enlaceuno         {}
a.enlaceuno:link    {}
a.enlaceuno:visited {}
a.enlaceuno:hover   {}
a.enlaceuno:active  {}
Los enlaces definidos en las otras líneas que ya teníamos actuan sobre todos los enlaces, pero como estos nuevos están colocados después, serán respetados para aquellos enlaces donde indiquemos que son de la clase .enlaceuno


Y cómo se indica a un enlace que ha de mostrarse según lo definido en la clase "enlaceuno"?
Un enlace normal tiene esta forma:
<a href="#">Soy un enlace normal</a>
Este enlace tomará la forma que tengamos definida en la hoja de estilo estilo-general.css en la parte general (la antigua). Si ahora quiero que tome otras propiedades (color, tamaño, subrayado...) tengo que indicar en esa línea de Html que es de la clase .enlaceuno y se hace añadiendo esto:
<a class="enlaceuno" href="#">Ahora soy un enlace de la clase enlaceuno</a>
Qué ocurre entonces? Cuando alguien visita tu web el navegador primero mira todo el html, ve que existe un enlace y ve que hay hoja de estilo en el Head así que empieza a leerla por el principio. Ve la primera línea, la del asterisco y le da margenes cero, le quita los bordes y el indentado. Sigue leyendo estilo-general.css y ve que primero se han definido una serie de propiedades para todos los enlaces y se los da (los antiguos) pero al seguir leyendo ve que está definido en esa misma hoja de estilo una nueva clase, la clase enlaceuno, de modo que añade esas nuevas propiedades a las propiedades antiguas. Si alguna está repetida dos veces, toma la nueva por buena y elimina la antigua.
Convirtiendo enlaces a la nueva clase
Vamos a darle la clase .enlaceuno a todos los enlaces del pie de página. Un modo es colocando el código class="enlaceuno" a cada una de las líneas Html de los enlaces del pie, un poco trabajoso, verdad? Sería así (no lo hagas aún):
<div id="pieuno">
  <ul>
    <li><a class="enlaceuno" href="#">Foro Ejemplo</a></li><li><a class="enlaceuno" href="#">Contactos
    </a></li><li><a class="enlaceuno" href="#">Nos Enlazan</a></li>
  </ul>
</div>
y lo mismo para los enlaces de la capa #pietres. Ahora que has aprendido a definir una clase de enlace y a aplicarlo, te enseño otro modo más fácil y rápido.


 
Aplicando una clase de estilos solo a los enlaces de una determinada capa
Se trata de definir en la hoja de estilos que todos los enlaces que pertenezcan a una capa determinada deban seguir esos estilos. Con esto nos ahorramos escribir nada en el código Html de la plantilla.html, verás.
Abre estilo-general.css y añade (sin eliminar el antiguo código de los enlaces) esto, justo al final:
..........
#pie a         {color: red; text-decoration:none ; display: block }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:red ; text-decoration:underline ; background-color: yellow }
#pie a:active  {color:blue}
Si guardas la hoja de estilo y haces vista previa ahora a la plantilla, verás como todos los enlaces del pié de página han tomado las nuevas propiedades sin necesidad de tocar para nada el código Html de la plantilla.html, mágico, verdad? je je
Como esas propiedades son realmente horribles, cámbialas por estas otras para que al menos sean... presentables, je je je:
 
#pie a         {color: blue; text-decoration:none ; display: block }
#pie a:link    {}
#pie a:visited {}
#pie a:hover   {color:black ; text-decoration:underline ; background-color: white }
#pie a:active  {color:black}
Ahora se ven un poco mejor.
Eliminar el fondo del enlace del logotipo
Ahora que sabemos variar las propiedades de solo algunos enlaces determinados sin variarlos todos, podemos eliminar ese fondo gris que aparece al poner el ratón sobre el logotipo. Por qué aparece? Pues simplemente porque al tener el logotipo un enlace hacia el index.html se convierte la imagen en un enlace adoptando los estilos definidos para los enlaces en la Hoja de Estilos.
Si añadimos algo similar a lo anterior pero para todos los enlaces de la capa #logotipo podremos conseguir eliminar ese fondo gris tan feo. Qué propiedades le pondrías para evitar eso? Realmente, como no contiene textos me da igual, solo me interesa eliminar el fondo gris y eso lo consigo colocándole un fondo blanco cuando el ratón se situe sobre el logotipo (:hover), así que puedo colocar esto al final de la hoja de estilo:
#logotipo a         {}
#logotipo a:link    {}
#logotipo a:visited {}
#logotipo a:hover   {background-color: white }
#logotipo a:active  {}
Ahora se ve el logotipo sin esa sombra gris. Ya sabes algo más de los enlaces. Eres todo un maestro!


 
Cómo instalar un menú desplegable en una página web
Se que esta será la lección estrella, así que trataré de explicarlo bien porque para principiantes puede resultar un poco complicado. pero bien explicado seguro que lo consigues. Se trata de insertar un menú desplegable que colocaremos donde ahora tenemos el menú horizontal, debajo del logotipo.
Por si alguien no sabe a lo que me refiero lo explico un poco. Se trata de un menú horizontal en el que cuando colocas el puntero de ratón sobre una de sus secciones, esta se abre mostrando el resto de subsecciones. Es un recurso muy bueno pues permite tener multitud de enlaces en una página web sin necesidad de tenerlos todos visibles continuamente, lo que nos ahorra espacio en la web para otras cosas. Además, resulta bastante elegante.
Si sigues estas páginas conseguirás colocar en tu plantilla este menú desplegable.
Conseguir los archivos necesarios
Para instalar un menú desplegable como el que vamos a ver necesitaremos unos cuantos archivos que contienen el código necesario para definir las distintas secciones, el estilo css que tendrá, que definan el movimiento de desplegue del menú etc. No te preocupes porque en esta web encontrarás todos ellos. Despues de descargarlos y guardarlos en la carpeta que te indique, tendremos que hacer unos retoques para personalizarlos un poco a nuestro gusto. Cuando termines la lección y tengas tu menú desplegable en tu página web de ejemplo sabrás sin problemas colocarlo más tarde en tu propia página web, así que hazme caso en cada uno de los pasos que te muestro y síguelos al pie de la letra para no perderte. Más tarde puedes hacer tus propios experimentos, pero por ahora hazme caso y sigue las instrucciones tal cual te las muestro, oki?
Los archivos necesarios son estos. Descárgalos y guardalos en el lugar donde se indica en cada uno de ellos:




    
estilo-menu-desplegable.css (en la raiz de tu web)
    
no-tocar.txt (en la raiz de tu web)
    
definir-menus.txt (en la raiz de tu web)
    
numero-de-menus.txt (en la raiz de tu web)
    
blanco.png (en la carpeta "objetos")
    
gris.png (en la carpeta "objetos")
    
punto.gif (en la carpeta "objetos")
    
submenu-abierto.gif (en la carpeta "objetos")
    
submenu-cerrado.gif (en la carpeta "objetos")
    
espaciador.gif (en la carpeta "objetos")
    
fondo-activo.gif (en la carpeta "objetos")
    
fondo-no-activo.gif (en la carpeta "objetos")

Te los dejo todos comprimidos en dos archivo zip. En el primero están los archivos que has de pegar en la carpeta objetos y en el segundo los que tienes que colocar directamente en tu carpeta raiz.
Bien, una vez tienes todos esos archivos guardados en las carpetas correspondientes seguimos con las instrucciones. Recuerda dejarles los mismos nombres que yo he colocado, y cada uno en su lugar (en su carpeta) o no funcionará bien este invento!
Los estilos css del menú desplegable
Este menú desplegable se basa en una hoja de estilos llamada estilo-menu-desplegable.css y es el primero de los archivos de la lista anterior. Como ya sabes, para que una página web pueda leer una hoja de estilos hay que colcocar dentro del head una línea de código. Te acuerdas de la que pusimos al principio para la hoja de estilos estilo-general.css? Pues ahora hemos de colocar otra idéntica (pero con este otro nombre) seguida de aquella primera.
Trata de hacerlo tú mismo sin mirar más pistas. Deberias saber hacerlo! je je je. El código de la cabecera (head) de tu plantilla.html ha de quedar así:
.....
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css"          type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
</head>
.....
Con esta línea conseguimos por tanto que la plantilla lea los estilos de la hoja de estilos del menú. Por suerte ya está terminada de modo que no vamos a entrar a analizarla, oki? Lo importante es que funcione! je je je.
Asociando los scripts de menú desplegable
Algunos menús desplegables funcionan tan solo con "trucos" hechos con css, sin más, pero este menú desplegable que os presento está hecho con scripts. Como aún no los hemos estudiado no os lo explico e iremos directamente a colocarlos en la web.
Igual que el código Css, el código de los scripts puede o bien escribirse directamente dentro del html de la página o bien guardarlo todo dentro de un archivo y luego hacerle una llamada desde el head de la web (igual que se hace con la hoja de estilos) que es lo que vamos a hacer.
Todo el código script que necesita este menú se va a guardar en tres archivos diferentes. En principio a estos archivos se les suele poner extensión .js pero como algunos vamos a tenerlos que editar para retocarlos les vamos a poner extensión .txt para que nos sea más fácil abrirlos con el block de notas (tranquilo, ya llevan la extensión .txt).
Abre de nuevo la plantilla.html y coloca estas nuevas línea debajo de la que hemos escrito antes:
.....
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css"          type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt"          type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt"   type="text/javascript"></script>
</head>
.....
Lo que hacen realmente estas líneas es insertar en su lugar todo el contenido de los archivos txt. Otro modo habria sido colocar el contenido directamente, pero de este modo ganamos dos cosas. Por un lado evitamos tener demasiado contenido en las páginas html y por otro lado evitamos tener que reformar todas las páginas html de la web cada vez que queremos retocar algo de ese código. Para cualquier cambio solo necesitamos de este modo retocar el archivo txt y no todas las páginas de la web. Todo un invento, no?
Ya tenemos la hoja de estilos y las hojas de scripts relacionadas. Ahora vamos al siguiente paso.


 
Retocar el Body
Para que estos scripts funcionen bien, nuestro servidor tiene que leerlos (cargarlos) antes de mostrar el menú. Esto se soluciona facil y rápidamente retocando la linea <body> para que ponga esto otro:
<body onload="init();">
Si quieres que te diga la verdad, aún no se muy bien qué es lo que hace exáctamente esa línea  pero creo que sirve para eso, para que cuando el navegador llegue a ella éste se vea obligado a leer los códigos script incluidos en la página antes de seguir leyendo contenidos del bpdy.... creo..
Otro archivo con Scripts para el Body
Como verás aún nos queda un archivo de scripts pendiente (definir-menus.txt). Esta otra parte de código iría dentro del Body. Es necesario colocarlo en cualquier lugar después de que ya se haya definido el menú al que vamos a asociar este desplegable, es decir, después del código html del div navegación. Para no liarnos lo que vamos a hacer es colocarlo justo antes del final del body, es decir, justo antes de la línea </body>, oki?
Igual que antes, en lugar de pegar unas cuantas líneas de scripts, lo que hemos hecho es meterlas todo dentro del archivo definir-menus.txt por lo que será solo necesario hacer una llamada a ese archivo igual que hemos hecho antes. El código de la plantilla.html ha de quedar así (recuerda, la línea la ponemos antes de la línea </body>):
.......
	 <div id="curva-inferior"></div>
</div>
<script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
</body>
</html>
No dirás que no es facil, no?


 
Asignando estilos a las secciones de nuestro menú de navegación
Al igual nosotros al principio hemos definido una capa llamada cabecera, otra llamada logotipo, etc, en los archivos estos tan raros que acabamos de pegar en nuestra carpeta de ejemplo se ha definido un tipo de menú (que va a ser desplegable) y se le ha puesto el nombre de desplegable1.
Por lo tanto, para que una sección de nuestro menú de navegación sea desplegable hemos de aplicarle esa clase llamada "desplegable1". Para hacer esto basta con abrir la plantilla.html y escribir esto:
......
  <div id="navegacion">
    <ul>
      <li><a id="desplegable1" href="#">Sección 1</a></li>
      <li><a href="#">Sección 2</a></li>
      <li><a href="#">Sección 3</a></li>
    </ul>
  </div>
......
Con esto tendremos un menú desplegable asignado a la Sección 1. Más adelante seguiremos colocándole desplegables a las otras dos secciones.
Si ahora guardas la plantilla.html y le haces una vista previa podrás ver lo que hemos conseguido. Cuando pones el cursor encima de Sección 1 aparece un deplegable bastante profesional. Eso si, los apartados que aparecen seguramente no sean los que tú quieres. Esos que puedes ver están predefinidos en uno de los archivos de scripts que hemos copiado en la web. Si quieres modificarlo para que aparezcan los apartados que tú quieres y además colocarle las rutas hacia las páginas que deseas tendrás que retocar esos archivos. Quieres aprender conmigo? Pues adelante!
Personalizando los textos de los enlaces en el menú desplegable
El archivo donde se guarda la información de los apartados y subapartados del menú desplegable se llama definir-menus.txt y ha de estar en la raiz de tu web. Al tener extensión .txt te será fácil abrirlo con el block de notas de windows. Abrelo y vamos a verle las tripas.
if (TransMenu.isSupported())
{
var ms=new TransMenuSet
  (TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);
var desplegable1 = ms.addMenu
  (document.getElementById('desplegable1'));
 desplegable1.addItem('Seccion 1','ruta');
 desplegable1.addItem('Seccion 2','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
 	 desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable1.addItem('Seccion 3','ruta');
TransMenu.renderAll();
}
Por cierto, recuerdas que quedamos en que los códigos html los ibamos a poner en azul y los códigos css en verde para diferenciarlos? Pues a los codigos de scripts los pondremos en rojo.
No intentes adivinar nada, je je je. Esto seguramente no tenga ningún sentido para tí y reconozco que tampoco tiene demasiado para mí, ja ja ja ja. Nos será suficiente con saber qué es lo que debemos retocar para que nuestro menú desplegable funcione como queremos, no?
En negrita puedes ver el nombre de este tipo de desplegable. Te dije que se llamaba desplegable1. Eso no tienes que modificarlo. Lo único que has de retocar será lo que te indico en oscuro. Donde pone Seccion 1, Seccion 2 y Seccion 3 has de colocar el texto que quieres que aparezcan en esas tres secciones del desplegagle. Si te fijas en el ejemplo que hemos hecho, al poner el cursor sobre Seccion 2 se abre otro desplegable mostrando las sub-secciones 2.1, 2.2 y 2.3. Si modificas esos textos en el Script (señalados también de oscuro) modificarás el texto que aparece en el menú.
Verás que junto al texto pone también ruta. Ahí es donde has de escribir la ruta de la página que pretendes que se abra cuando se haga clic sobre ese enlace.
Esto no tiene mucha más historia, no? Parece complicado, pero llevando cierto orden creo que lo vas a conseguir.
Aumentando el número de secciones
Imaginemos ahora que has puesto los textos que quieres y las rutas adecuadas, pero que necesitas añadir dos secciones más. Cómo lo conseguimos? Pues basta con añadir más líneas a ese script. Por ejemplo, si deseamos dos secciones más, las secciones 4 y 5, bastaría con añadir estas dos líneas al script:
if (TransMenu.isSupported())
{
var ms=new TransMenuSet
   (TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);
var desplegable1 = ms.addMenu
   (document.getElementById('desplegable1'));
 desplegable1.addItem('Seccion 1','ruta');
 desplegable1.addItem('Seccion 2','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
 	 desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable1.addItem('Seccion 3','ruta');
 desplegable1.addItem('Seccion 4','ruta');
 desplegable1.addItem('Seccion 5','ruta');
TransMenu.renderAll();
}
Fácil, no?
Aumentando el número de Sub Secciones
Ahora imaginemos que quieres colocar 2 subsecciones a la sección 5. Sería suficiente con insertar estas otras tres líneas:
if (TransMenu.isSupported())
{
var ms=new TransMenuSet
  (TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);
var desplegable1 = ms.addMenu
  (document.getElementById('desplegable1'));
 desplegable1.addItem('Seccion 1','ruta');
 desplegable1.addItem('Seccion 2','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
 	 desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable1.addItem('Seccion 3','ruta');
 desplegable1.addItem('Seccion 4','ruta');
 desplegable1.addItem('Seccion 5','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[4]);
 	 desplegable1_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 5.2','ruta');
TransMenu.renderAll();
}
Ves que sencillo? Basta con añadir la linea esa que empieza por var y luego tantas líneas como subsecciones queramos. Luego acuérdate de ponerle el texto que quieras y la ruta correspondiente a la página que deseas abrir con cada nueva subsección.
Una cosa importante que aún no te he dicho. Ves ese número marcado en oscuro? Ese cuatro encerrado entre corchetes [4]? Te explico para que sirve. Presta atención que quizás sea un poco complicado.
El número que has de colocar entre esos corchetes ha de ser el número de la sección a la que pertenece pero restándole uno. Es decir, como estas últimas subsecciones pertenecen a la sección 5, le restas uno y colocas allí un 4.
Ves como en la lína correspondiente a la sección 2 hemos puesto antes un 1 entre los corchetes? Es por eso, porque corresponde a la sección 2 y por tanto, 2 - 1 = 1, ponemos un 1. Bueno, no es tan complicado al fin y al cabo, verdad?
Para eliminar secciones y subsecciones se hace del mismo modo, eliminas las líneas que no quieres y listo, solucionado.
Me ha costado mucho encontrar este menú por internet, de modo que espero que lo aproveches bien! je je je. Ah, esos códigos de script no los he hecho yo (no soy tan listo! je je je) sino un tal Aaron Boodman. Ese tio fue quién lo invento y sus créditos aparecen escritos dentro del archivo llamado no-tocar.txt además de otros códigos imprescindibles para que el menú funcione. Todos podeis usar ese script que él nos cede a cambio de respetar el contenido del archivo no-tocar.txt, oki? Mis más sinceros agradecimientos a Aaron desde acá.
Por si solo has leido pero no has puesto en práctica estas lecciones, te dejo cómo queda la plantilla tras estos retoques. En la página siguiente te enseño como hacer lo mismo con el resto de secciones de la barra de navegación.
Nota: Si al hacer vista previa usas Internet Explorer verás como el menú aparece entrecortado. No te preocupes, lo arreglamos en la última de estas lecciones, pero ya llegaremos. En el resto de navegadores no ocurre, pero en cualquier caso, uses el que uses, tendrás que repararlo, oki?


 
Más desplegables para otras secciones
Ya tenemos listo el desplegable de la Sección 1. Vamos a ver ahora cómo ponemos desplegables también a las secciones 2 y 3. Una vez controles esto verás lo fácil que te resulta colocar desplegables a cualquier otra sección.
Para empezar tenemos que abrir el archivo numero-de-menus.txt y veremos así este contenido de código script:
function init()
{
if (TransMenu.isSupported()) 
  {
  TransMenu.initialize();
desplegable1.onactivate=function(){document.getElementById('desplegable1').className='hover';};
desplegable1.ondeactivate=function(){document.getElementById('desplegable1').className = ''; }
  }
}
Si si, ya se que se sale el código de esta ventana, je je, pero prefiero que lo veas entero a recortarlo ;=)
De todas esas líneas, las que he marcado en negrita (bueno, quizás debería decir rojita.... je je je je) son las correspondientes al desplegable de antes (desplegable1) y el resto de línea son comunes para todos los menús desplegables que pongamos.
De modo que para incluir un segundo desplegable al que llamaremos desplegable2 bastará con copiar esas dos líneas, pegarlas debajo y cambiar el número 1 de desplegable1 por un 2.
Como queremos aplicar un desplegable a la sección 2 y otro a la sección 3, realmente debemos hacer eso dos veces, es decir, copiar esas dos líneas que he señalado arriba y pegarlas dos veces justo debajo de las mismas y luego, en las líneas 3 y 4 colocar un 2 donde pone un 1 y en las líneas 5 y 6 sustituir el 1 por un 3.
El código final ha de quedar de este modo. Os coloreo con colores diferentes las líneas nuevas para el desplegable2 y desplegable3, oki?
function init()
{
if (TransMenu.isSupported()) 
  {
TransMenu.initialize();
desplegable1.onactivate=function(){document.getElementById('desplegable1').className = 'hover'; };
desplegable1.ondeactivate=function(){document.getElementById('desplegable1').className = ''; }
desplegable2.onactivate=function(){document.getElementById('desplegable2').className = 'hover'; };
desplegable2.ondeactivate=function(){document.getElementById('desplegable2').className = ''; }
desplegable3.onactivate=function(){document.getElementById('desplegable3').className = 'hover'; };
desplegable3.ondeactivate=function(){document.getElementById('desplegable3').className = ''; }
  }
}
No dirás que es dificil! je je je.


 
Aplicando estos tipos en el Html
Recuerdas cómo al principio le pusimos un id="desplegable1" al código html de la sección 1? Pues ahora tendremos que volver a hacerlo para las secciones 2 y 3, claro. Abre la plantilla.html y modifica el código html de la parte de la capa #navegación hasta dejarlo de este modo:
......
  <div id="navegacion">
    <ul>
      <li><a id="desplegable1" href="#">Sección 1</a></li>
      <li><a id="desplegable2" href="#">Sección 2</a></li>
      <li><a id="desplegable3" href="#">Sección 3</a></li>
    </ul>
  </div>
......
Ya puedes guardar y cerrar la plantilla. Si haces vista previa no notarás ningún cambio aún. Por qué puede ser? Lógico, aún no hemos definido los apartados y subapartados que queremos para cada uno de estos dos nuevos desplegables. Si recuerdas, eso habia que hacerlo en el archivo de scripts llamado definir-menus.txt
Definiendo secciones y subsecciones al resto de menús desplegables
El contenido que ya teniamos para ese archivo era este:
if (TransMenu.isSupported())
{
var	ms=new TransMenuSet(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);

var desplegable1 = ms.addMenu(document.getElementById('desplegable1'));
 desplegable1.addItem('Seccion 1','ruta');
 desplegable1.addItem('Seccion 2','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
 	 desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable1.addItem('Seccion 3','ruta');
 desplegable1.addItem('Seccion 4','ruta');
 desplegable1.addItem('Seccion 5','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[4]);
 	 desplegable1_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 5.2','ruta');

TransMenu.renderAll();
}
Las líneas en rojo oscuro son exclusivamente para el desplegable1. Las otras líneas del principio y del final son comunes a todos los desplegables y no se tocan. De acuerdo? Pues para definir los desplegables 2 y 3 podemos empezar por copiar las líneas del desplegable1 y pegarlas dos veces a continuación. Con eso obtendremos menús idénticos al desplegable1 y luego solo tendríamos que cambiar lo que corresponda, es decir, eliminar o insertar más líneas si queremos más secciones o menos, cambiar el 1 de desplegable1 por el 2 o el 3, y colocar los textos y las rutas de los enlaces.
Si copiamos las líneas correspondientes al desplegable1 y lo pegamos dos veces a continuación del que tenemos, nos queda así (ya le he cambiado el numero 1 por el 2 y el 3):
if (TransMenu.isSupported())
{
var ms=new TransMenuSet(TransMenu.direction.down,1,0, TransMenu.reference.bottomLeft);

var desplegable1 = ms.addMenu(document.getElementById('desplegable1'));
 desplegable1.addItem('Seccion 1','ruta');
 desplegable1.addItem('Seccion 2','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[1]);
 	 desplegable1_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable1_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable1.addItem('Seccion 3','ruta');
 desplegable1.addItem('Seccion 4','ruta');
 desplegable1.addItem('Seccion 5','ruta');
 var desplegable1_0 = desplegable1.addMenu(desplegable1.items[4]);
 	 desplegable1_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable1_0.addItem('Sub-Seccion 5.2','ruta');

var desplegable2 = ms.addMenu(document.getElementById('desplegable2'));
 desplegable2.addItem('Seccion 1','ruta');
 desplegable2.addItem('Seccion 2','ruta');
 var desplegable2_0 = desplegable2.addMenu(desplegable2.items[1]);
 	 desplegable2_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable2_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable2_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable2.addItem('Seccion 3','ruta');
 desplegable2.addItem('Seccion 4','ruta');
 desplegable2.addItem('Seccion 5','ruta');
 var desplegable2_0 = desplegable2.addMenu(desplegable2.items[4]);
 	 desplegable2_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable2_0.addItem('Sub-Seccion 5.2','ruta');

var desplegable3 = ms.addMenu(document.getElementById('desplegable3'));
 desplegable3.addItem('Seccion 1','ruta');
 desplegable3.addItem('Seccion 2','ruta');
 var desplegable3_0 = desplegable3.addMenu(desplegable3.items[1]);
 	 desplegable3_0.addItem('Sub-Seccion 2.1','ruta');
	 desplegable3_0.addItem('Sub-Seccion 2.2','ruta');
	 desplegable3_0.addItem('Sub-Seccion 2.3','ruta');
 desplegable3.addItem('Seccion 3','ruta');
 desplegable3.addItem('Seccion 4','ruta');
 desplegable3.addItem('Seccion 5','ruta');
 var desplegable3_0 = desplegable3.addMenu(desplegable3.items[4]);
 	 desplegable3_0.addItem('Sub-Seccion 5.1','ruta');
	 desplegable3_0.addItem('Sub-Seccion 5.2','ruta');

TransMenu.renderAll();
}
Ya los tenemos a los tres funcionando. Solo te queda eliminar o insertar nuevas líneas si quieres quitar o poner más secciones o subsecciones, escribir los textos de cada enlace y terminar de poner las rutas a las páginas que enlaza cada enlace del menú desplegable.
Más sencillo imposible! Aquí tienes el restultado final de la plantilla con los 3 menús desplegables.


 
Posibles errores y fallos
Si tras estas instrucciones el desplegable no aparece puede deberse a varias cosas:
1.- Tu servidor no admite este tipo de importación de archivos. Es decir, no admite guardar códigos en estos txt y luego llamarlos desde la página web.
2.- Has olvidado subir todos los archivos a tu servidor.
3.- Has subido algunos archivos a carpetas incorrectas de tu servidor.
4.- Has nombrado a algunos archivos con alguna mayúscula, espacio, acento o símbolo raro.
5.- Te has equivocado al escribir el código, o te ha faltado cambiar algún número (desplegable2 en lugar de desplegable3, etc).
Si no te funciona revisa esos puntos o pregúntanos en el Foro CCTW donde te ayudaremos encantados!
Gracias a vuestra colaboración en el foro he podido corregir un fallo que nos volvió locos por unas horas! je je je. Se trata de lo siquiente. AL ver el menú desplegable con Internet Explorer resulta que el menú se ve recortado, solo se muestra la mitad izquierda. Tras estudiar el fallo he visto que se trata de una pelea entre estilos-general.css y estilo-menu-desplegable.css (creo). El caso es que la línea
body {text-align:center}
que habiamos definido desde el principio de las lecciones produce ese mal efecto en el menú. De modo que para corregirlo basta con eliminar el contenido de los corchetes del body dejándolo vacio, así:
body { }
Esto hace que el contenido del pie de la plantilla aparezca alineado a la izquierda cuando lo que nos interesa es tenerlo centrado. Para arreglar este efecto secundario basta con añadir text-align: center dentro de la definición de la capa #pie en la hoja de estilo estilo-general.css, quedando así:
#pie     
   { border-left:  black 1px solid ;
     border-right: black 1px solid ; 
     border-top:   black 1px solid ; 
     height: 65px ;
     text-align: center ;
   }
Y tooodo solucionado! Aún no se a qué se debe ese fallo... pero que quieres que te diga... funciona? Si, pues no le des más vueltas, je je je je. Bueno si lo descubres avisa en el foro, claro ;=)
Cómo personalizar los menús desplegables
Sabía que no tardarias mucho en hacerme esa pregunta, así que prefiero adelantarme y responderte ahora, je je je. Si, es posible hacer algunos cambios en estos desplegables. Podemos cambiar las imágenes de los archivos que subimos al principio con solo editarlos, dibujar en ellos lo que queremos, guardarlos y subirlos de nuevo al servidor. Los cambios serán instantaneos.
También podemos cambiar el tipo de letra de estos menús, el color, etc, etc haciendo uso de nuestra hoja de estilo, claro.
Por otro lado, si abres el archivo que hemos llamado no-tocar.txt podrás ver como muy al principio aparecen unas cuantas opciones que puedes personalizar. Están bajo el título de "Configuration properties". Desde ahí puedes cambiar la ruta de las imagenes usadas, modificar la velocidad de apertura y cierre de los desplegables y poco más. El resto de código de ese archivo mejor no lo toques (a no ser que sepas lo que haces) o puede que los desplegables te dejen de funcionar.
Quieres un menú desplegable transparente?
Otra cosa muy muy interesante. Recuerdas esos dos archivos llamados fondo-no-activo.gif y fondo-activo.gif? Pues bien. El primero es una simple imagen de fondo para cada una de las subsecciones abiertas cuando no tiene el cursor del ratón encima. El otro es el fondo que se muestra en una subsección cuando el ratón pasa por encima. Hasta aquí bien, pero... qué ocurre si eliminas esos dos archivos? Qué crees que pasara?
Pues que como no tienen fondo los menús serán ligeramente transparentes, mostrandose lo que hay detras. El efecto es genial, de veras. Haz la prueba. Pero en lugar de eliminarlos (por si acaso no te gusta el efecto de transparencia) cambiales el nombre. Luego, si los quieres recuperar le pones el nombre original y marchando.
Qué? Qué tál lo ves transparente? Mola verdad? je je je.
Cambiar el color de la transparencia del menú desplegable
Otra cosa más. Si te decides por el modo transparente, quizás no te guste mucho el color que queda. Para cambiarlo solo tienes que poner el color que te guste en la linea 34 (más o menos) del archivo no-tocar.txt. Es una línea así:
TransMenu.backgroundColor = "#C4CCCC";    // color of the background (transparency set in CSS)
Si cambias lo que he señalado en negro cambiará el color de ese fondo.
Cambiando el color de la sombra del menú desplegable
Además, en ese mismo archivo un par de líneas por encima verás otra línea similar en la que podrás cambiar el color de la sombra.
Que creias? Que todos ibamos a tener el desplegable identico? ja ja ja.
Nota Final
Ahora ya sabes colocar un menú horizontal (capa #navegacion), un menú lateral (capa #menu) y también uno desplegable. Seguramente sean demasiados menús para tu plantilla. Recuerda que puedes eliminar por ejemplo el menú lateral que seguramente ya no te haga falta si te decides por el desplegable. También puedes vaciarlo, pero no eliminarlo y aprovechar así ese espacio rectangular para colocar en un futuro algún anuncio tuyo comentando alguna noticia o novedad en tu web, o para poner publicidad, algún dibujo decorativo, etc.
Nos vemos pronto con más lecciones!
 


 
Hasta el momento hemos aprendido...
Bueno, ya tenemos el programa instalado, sabemos usarlo un poco y hemos creado una index muy sencilla y una plantilla ya más avanzada. Además ya nos suena bastante eso del código Html como los estilos CSS, que no es poco, y sabemos ya conectarnos al FTP de nuestro sitio y subir archivos (espero... je je je). No todo el mundo usa estilos y como verás son lo mejor que hay para crear páginas web. Ahora quizás no lo notes mucho, pero pronto verás la cantidad de ventajas que tiene. Además sabemos enlazar páginas que es un elemento imprescindible en toda web y hemos aprendido a colocar imagenes en capas para dar un mejor aspecto a la página web, colocar un banner, mejorar el aspecto de las capas como hemos hecho en el menú lateral, e incluso ahora sabemos ya colocar un menú desplegable!! No te podrás quejar, no? .... Para ser solo cuatro lecciones no ha estado mal, no? Dolió? je je je.




Y ahora qué hago?
Verás que aún queda mucho por enseñarte, pero parece eres más rápido aprendiendo que yo haciendo las lecciones, je je je. Mientras que publico más (suelo tardar más o menos una semana o dos en publicar lecciones nuevas...), puedes ir haciendo experimentos, creando otra carpera local según los pasos vistos al principio y haciendo cosas por tu cuenta. Así aprenderás cosas nuevas por tí mismo, que tampoco esta mal. Pero procura no tocar la web del ejemplo o te perderás en las siguientes lecciones, pues nos basaremos en el trabajo que llevamos hecho.
Y cualquier duda que te surja pregúntanosla en el Foro CCTW (hay un enlace en la parte de abajo de todas las páginas de CCTW) y te responderemos enseguida. Hay una sección para este programa (Html Kit), búscala y pregunta cuanto quieras. También te agradecería que en ese mismo apartado me comentaras qué partes no has entendido y en cuanto pueda lo intento mejorar, oki? Las lecciones son para vosotros, vosotros mandáis!
Espero incluir más lecciones pronto. Estate atento, suerte, ánimo y .. paciencia!! 
NOTA: Por favor, no sigais preguntando en el foro para cuando saldrá la próxima lección. No dispongo de mucho tiempo libre para crearlas y este tipo de mensajes en el foro solo me hacen gastar ese poco tiempo que tengo.. Siempre estoy trabajando en nuevas lecciones, pero aunque os parezca fácil, llevan mucho trabajo. Lo siento, pero es la realidad....