como crear tu web

una serie de páginas. Pero cómo sabe Google qué páginas ha de mostrar? Bien fácil. Google y el resto de buscadores se pasean continuamente por la red leyendo las 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 como párrafos los buscadores nunca sabrán que se trata de un título y no tomarán esa palabra tan en cuenta (también la tienen en cuenta, pero menos).

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 trampas 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 estar buscando cómo 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 pensarian que se te ha ido la cabeza... je je je.

Buscando alojamiento para la página webYa 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 ese sitio 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 cómo 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 aquí para seguir las lecciones, has de tener ya 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.

60

http://www.comocreartuweb.com/hosting-y-dominios/introducion.html

http://www.comocreartuweb.com/phpBB2

http://www.comocreartuweb.com/hosting-y-dominios/hosting-registro-en-razy.html

Configurar Html-Kit para el nuevo alojamientoAhora 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-KitRecuerdas 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 son y dónde van apuntados.

(1) Aquí pon la dirección de tu FTP. Suele empezar por ftp.nombredelservidor.. pero 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).

61

http://www.comocreartuweb.com/hosting-y-dominios/hosting-registro-en-razy.html

(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) Initial Directory: En ocasiones al registrarte en un servidor te indican la ruta inicial o FTP Path, 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 FTPAhora 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 construcció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 (varios 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.

62

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 cómo 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.

63



Cómo borrar archivosPara 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 archivoComo sabes, para que la gente vea tu web, los archivos han de estar en el hosting. De

nada sirve tenerlos en tu 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":

64

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 Settings\Usuario\Escritorio\mis-paginas-web\web-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.

65

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

Subir el resto de archivos al servidorEsto 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 carpetasHaz 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

66

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 webTal 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 que tener 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

67

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 bordesEn 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 ladosPara 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 bordesPara 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 navegadoresEl 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

68

http://www.comocreartuweb.com/curso-de-estilo-css/css-introducion-introducion.html

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 capasBueno, 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 navegacion 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 solidquedando 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 webLos 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

69


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 superiorLa 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="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-superior.gif, 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

70

http://www.comocreartuweb.com/html-kit-tutorial/ejemplos/plantilla-17.html

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) ;


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 es asombroso, es más profesional.

Borde redondeado para la parte inferiorLo 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>

71




</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) ;


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 servidorAunque 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.

72


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 webYa 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.

73

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:[email protected] 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"

74

http://www.comocreartuweb.com/herramientas-utiles/enciclopedia-r-rutas.html

http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-leccion1-18-email.html

http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-leccion1-18-email.html

http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-leccion1-17-imagenes.html

http://www.comocreartuweb.com/herramientas-utiles/imagenes-introducion.html

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">


alt="Haz clic aquí para volver a la página de inicio">75

http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-leccion2-07-enlaces-a-menu.html


</div>

le añades esto que marco en negrita:<div id="logotipo">

<a href="index.html">



</a>

</div>

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 webAunque 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ú HorizontalEl 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>

76



<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 .

77




Eliminando el punto negro del menú HorizontalPara 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 enlacesHemos 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>

78






http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-leccion2-15-margin-padding-border.html


<li><a href="#">Sección 1</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ú lateralEl 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

79


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

<div id="menu">

<ul>

<li><a href="#">Enlace 1</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>




</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 {}

80

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 }



81

width: 800px ;

height:12px ;

overflow: hidden }

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


#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 ;




#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;


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..

82

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 superiorLas 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 ;

83

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 esquinasEsto 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 imagenEste 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 retocadasLas 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:

84

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 inferiorSolo 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):

85

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 ;


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>


86




</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: yellow ; width: 150px ; float:left ;



background-position: bottom ;

padding-bottom:5px }

Pensando un poco... ahora que toda la capa del menú está cubierta por imagen de fondo, podemos eliminar eso de background-color: yellow que tenemos al principio del código de arriba, no crees? Así ahorramos! je je. Puedes eliminar esa parte.

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>:87


</ul>

</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><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 }

89



width: 800px ;

height:12px ;

overflow: hidden }

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


#logotipo {width:280px ; float:left }

#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }




#contenido {background-color: orange ; border-left: black 1px solid ;


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

#menu {width: 150px ; float:left ;



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) }





#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;


width: 800px ;

height:12px ;

overflow: hidden }


a:link {}

a:visited {}


90

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 webVes 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):

Listo, la vista previa se ve así:

Seguimos?

91

http://www.comocreartuweb.com/html-kit-tutorial/ejemplos/progresos.html

http://www.comocreartuweb.com/html-kit-tutorial/ejemplos/progresos.html


Colocar las capas en líneaComo era de esperar, nos ha pasado como cuando hicimos lo del logotipo. En lugar de

aparecer una capa junto a la otra nos han salido una debajo de otra. Recuerdas como arreglamos esto la otra vez? Venga, haz un esfuerzo!! je je. Lo arreglamos colocándole un float:left a cada capa. Así que abrimos la hoja de estilos estilo-general.css y definimos esas tres capas colocándole un color de fondo para ver bien dónde empieza y dónde termina cada una (te coloco también las líneas de antes y después para que veas donde añadir estas líneas, como verás las he colocado justo después de la capa #pie, por guardar un orden):............

#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.....

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

Ya se van colocando en su sitio. No te preocupes por los colores, en cuanto tengamos el pie listo le pondremos otros más decentes.

Ahora les daremos dimensiones de anchura colocándoles un width. Le vamos a dar un valor a #pieuno y #pietres de por ejemplo 150px y a la #piedos el resto, que serán unos... 800px - 2px (del borde izquierdo y derecho) -150px - 150px (de las otras dos capas) = 498pixeles. A ver que sale con esto...:#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

92

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):



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 capas93

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 ;


#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ácticaComo 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 pieLos 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>94

<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 listasBasta 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.

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

95

#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 listasPara 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.96

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 tiposYa 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:link {}

a:visited {}


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 enlacesAnteriomente 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 {}

97



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 claseVamos 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:

..........

98

#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 logotipoAhora 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 evitar que aparezcan mal las palabras con acentosSegún en qué servidor alojemos nuestra bonita página, veremos o no que las palabras

acentuadas aparecen mal escritas. Claro, eso solo va a pasar si has escrito con acentos, que últimamente te los comes todos!! je je je. Si por el contrario has puesto alguno (también estaría bien que lo pusieras correctamente....) y en lugar del acento aparece un símbolo raro, podemos arreglarlo rápidamente.

Pero por qué salen mal escritos los acentos?

99




Es por que los navegadores interpretan el código Html de muy distintas formas según piense que la web está escrita en un idioma o en otro. Distingue cada idioma por un tipo de "codificación". Lo que vamos a hacer nosotros ahora mismo es poner en la cabecera de TODAS nuestras páginas una línea que indica al navegador la codificación que debe interpretar. Esta codificación sabe de acentos, por lo que las palabras acentuadas aparecerán correctamente sin más.

La línea a insertar dentro de la cabecera de todas las páginas de la web (por el momento solo tenemos la plantilla, pero acuérdate de ponerlo en todas las demás también) es la siguiente:

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

No hay mucho que saber de esta línea. Es una de esas líneas que llaman Metatags que no muestran nada en la web, nada visible, sino que indican al navegador cómo interpretar el código de dentro del Body. Concretamente indica que el contenido del Body es código Html y que la codificación es del tipo iso-8895-1, que corresponde a la codificación europea (que entiende de acentos, vamos). No le hagas mucho caso, solo ponla dentro de la cabecera y ten fe en mí, je je je.

Pero dónde? En que parte de la cabecera? No temas, que te pones de los nervios en seguida! ja ja ja. En principio da igual en qué parte de la cabecera la pongas, pero para que tengamos tú y yo el mismo código y te sea más sencillo seguir el curso ponla por ejemplo justo debajo de la línea <head>.

Después de insertar esa línea, guarda la página, la subes al servidor y ve a verla con el navegador. Si todo a ido bien y yo no la he cagado ya no tendrás problemas con los acentos. Bueno, el único problema es que no sepas donde ponerlos, je je, pero se mostrarán correctamente, seguro.

Bueno, ahora en las dos siguientes lecciones os enseño un modo de ahorra tiempo al generar el resto de páginas de la web. También os enseño a poner enlaces de unas a otras. Ahora sí que conseguiremos una página completita.

Las partes comunes de nuestra página webComo te he dicho antes, existen varios modos de ahorranos tiempo y trabajo cuando se

realizan cambios en partes de una web que son idénticas en varias páginas. Pero antes de seguir déjame por favor que insista en definir eso de "partes de una web que son idénticas en varias páginas".

Cuando me refiero a idénticas quiero decir iguales, condenadamente iguales. Si hay alguna ligera diferencia este truco ya no nos sirve. Para que veas un ejemplo rápido te puedo adelantar que la siguiente parte de código es común a tooodas las páginas de nuestra web de ejemplo:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<head>

Verdad? En estas tres líneas no hay ningún valor o parámetros que tengamos que cambiar de una página a otra, por lo que es una parte bien común.

En cambio, esta otra línea no es común en todas las páginas de la web:<title>Este es el título de la página de la web</title>

Pues el título será normalmente distinto de una página a otra. Lo pillas, verdad? Vemos que partes comunes hay varias, pero nosotros vamos a prestar especial atención a unas partes comunes en concreto, las que más probabilidad tienen de ser modificadas por nosotros en el futuro, como por ejemplo, la cabecera, el menú lateral de la izquierda y el pie de página. Os voy a mostrar en las siguientes páginas estas tres partes, para que veais su código correspondiente y os familiariceis con ellas. Normalmente retocaremos algo de allí y no esta de más conocerlas bien.

La cabecera de la página web de ejemploLa cabecera es una parte idéntica a todas las páginas de la web y en ocasiones nos dá por

modificarla. Bien para cambiar el logotipo, ponerle unas curvitas en las esquinas, variar el fondo o quién sabe, para añadirle un bonito banner de publicidad y sacar un dinerillo para pagar el hosting... pero eso es otra historia para la que aún falta un poco. Entendemos que nuestra cabecera está formada por la parte superior de la web hasta el menú horizontal,

100

incluido este, oki? Aunque aún se podría dividir en la parte con fondo blanco y el menú horizontal con fondo gris.

Ese menú con fondo gris también será común a todas las páginas de la web y desde él se podrá acceder a las distintas secciones en las que dividamos los contenidos. Por ejemplo, para la página de un grupo de música estas secciones podrían ser Portada, Historia, Discografía, etc, etc. En breve trabajaremos sobre ese menú horizontal.

La cabecera, incluido el menú horizontal es por tanto todo esto:

El código de la cabecera, tal cuál está ahora en el ejemplo que llevamos hecho es este:




<div id="cabecera">

<div id="logotipo">

<a href="index.html">



</a>

</div>


</div>


<ul>




</ul>

</div>



Como ves, he añadido dos líneas para encerrar a este cacho de código. Esto es para que si alguna vez le metemos mano a la página, recordemos que lo que hay dentro es común a todas las páginas de la web, y por tanto no debemos tocar nada de su interior a menos que sea siguiendo las instrucciones que os cuento en breve.

No te preocupes por esas líneas de comentario, te las explico ahora después.

El menú lateral izquierdo

101

Este es otro cacho de código Html que en principio es igual en todas las páginas de la web, o al menos, en todas las páginas de una misma sección. En los casos en los que no sea común a toda la web sino solo a parte de la web, también nos vale este truco que veremos a continuación, también ahorraremos mucho tiempo, así que lo tendremos en cuenta como elemento común. El menú lateral izquierdo hoy por hoy es este:

Para que te hagas una idea, desde el menú de fondo gris accedemos a las secciones de la web y dentro de cada sección, desde este menú accederemos a las subsecciones. Por ejemplo, para una supuesta web dedicada a un grupo de música, la sección "Conciertos" podría dividirse en las subsecciones "Conciertos Anteriores" y "Próximos Conciertos", no?

Y su código Html es el siguiente. Como ves, le añado una línea al principio y otra al final para indicar donde empieza y termina, como antes:



<div id="menu">


<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li><a href="#">Enlace 3....

</div>



Como creo que ya te he comentado y como puedes ver en el código, he colocado todas las líneas <li> seguidas unas de otras, para evitar el fallo aquel que daba el Internet Explorer cuando las colocábamos separadas, una en cada renglón.

El pie de páginaLo mismo para el pie de página. Es algo común a todas las páginas de la web y en

ocasiones quizás queramos modificarlo para añadir enlaces, publicidad o qué se yo lo que se nos puede ocurrir.

Anda, acabo de hacer vista previa de esta página que estás leyendo ahora mismo y resulta que la imagen de abajo, la del pie de página, se me monta por debajo del menú de la izquierda de CCTW... y ahora que hago? Qué mal que queda.... Menos mál que conozco un truco para evitarlo. Te lo cuento? Je je je, es muy fácil.

Si escribo un poco más de texto aquí mismito conseguiré llenar este hueco, de la parte derecha del menú que tienes a la izquierda, y así la imagen del pie bajará y ya no se montará bajo el menú. Si, a veces hay que escrbir algo, aunque sea para llenar y conseguir eso, aunque no tenga mucho sentido, ja ja ja. Anda! pues acabo de llenarlo con esta chorrada que te acabo de contar! Fíjate que cosa tú! Qué alegria, qué bien. Bueno, seguimos... que ya se ha arreglao...

La imagen del pié es esta:

Y su código, con las líneas de comentario ya colocadas, es este:

102

<div id="pie">

<div id="pieuno">

<ul><li><a href="#">Foro Ejemploz/a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos..

</div>

<div id="piedos">pie dos</div>

<div id="pietres">

<ul><li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de..

</div>

</div>



Bien, imagino que a la vez que yo, has colocado esas líneas de comentario en la plantilla, no? (aún estás a tiempo para no perderte luego!!). Pues seguimos con esto, pero antes voy a explicaros mejor qué es eso de los comentarios dentro del código HTML y cómo se añaden, vale? No te quejarás, vas a aprender hasta el último detalle! je je.

Los comentarios dentro del código HTML de la página webEn el ejemplo que estamos construyendo tenemos ya un montón de código HTML. Por

ahora, como acabamos de crear la plantilla y no hay demasiada cosa, no nos perdemos con facilidad, pero en cuanto pasen unos días o en cuanto añadamos más y más código a nuestra plantilla llegará un momento que al ver el código estaremos más perdidos que un pulpo en un garaje.

Por ese motivo se inventaron los comentarios en el código. Se trata de poder añadir las notas que nos de la gana dentro, para que nos sirva de recordatorio de qué parte de código es, por qué lo pusimos o lo que nos de la gana. Eso si, para que el navegador no se lie tratando de investigar que debe hacer con esas líneas tan raras para él, lo que se hace es encerrar el comentario entre unos signos especiales. Así, cuando el navegador se pone a leer el código Html de nuestra página, al llegar al signo de inicio de comentario simplemente pasa de nosotros y no hace ningún caso a lo que hay escrito hasta que lea el signo de cierre de comentario. Fácil de entender, no?

Como habrás visto en la página anterior, el signo de inicio de comentario dentro de código Html es este:



De modo que si queremos poner una tonteria dentro de nuestro código Html bastaría con poner esta línea:



Si olvidas poner el signo de cierre es muy posible que algunos navegadores dejen de leer todo lo que queda de código Html, así que recuerda colocarlo, no te olvides.

Si la tonteria que queremos poner es muy larga y ocupa varias líneas (estoy seguro que tratándose de tonterias podrías llenar páginas y páginas... je je je je) bastaría con poner el signo al principio de la primera línea y el de cierre al final de la última línea. Vamos, que no es necesario abrir y cerrar cada una de ellas. Algo así sería:

103

Además de servirte para poner chorradas en el Html, también sirve para anular temporalmente alguna línea de código. Por ejemplo, imagina que tienes un enlace en tu menú lateral de la izquierda que vas a dejar fuera de uso, que no quieres que aparezca en el menú por que andas retocandolo. Bastaría con encerrarlo entre los signos de inicio y fin de comentario y el navegador no lo leería. Más tarde, basta eliminar esos signos para que vuelva a aparecerle a los visitantes. A veces es mejor que eliminar la línea, pues quizás al día siguiente no recuerdas bien lo que tenías puesto.

Por último decirte que tampoco conviene abusar de los comentarios, pues al fin y al cabo ocupan algo de memoria y el archivo de la web tardaría un pelín más en cargarse si hubieran muchos o fueran muy largos. Casi no se nota, pero si tardaría un poquillo más. Así que, los justos, oki?

La plantilla por tanto queda así. Sin cambios aparentes pues lo que hemos puesto son comentarios, pero puedes ver las nuevas líneas de comentario mirando su código Html.

Creando el resto de páginas de la web

Ahora que tenemos claras cuales serán las partes comunes de la web, podemos sin miedo empezar a crear el resto de páginas de nuestra web de ejemplo. Esto lo podemos hacer a partir de la plantilla, que para eso está. Y cómo hacemos esto? Pues como siempre te he dicho, antes de actuar debemos tener claro lo que queremos alcanzar. Antes de crear y crear páginas sin ton ni son tenemos que pensar cuántas secciones y subsecciones queremos tener en nuestra web. Más tarde podremos ir añadiendo más secciones y subsecciones, o incluso eliminar alguna, pero partiremos de una base ya pensada para no liarnos mucho.

De modo que el siguiente paso es pensar (no duele tanto...) en eso, qué secciones y subsecciones vamos a tener en nuestra nueva web.Lo mejor es coger lápiz y papel y empezar a elaborar un esquema de la web que tenemos en la cabeza. En el caso de este ejemplo ya te lo daré hecho, pero ten eso en cuenta cuando elabores tu própia web.

Cómo? No te aclaras con eso de dividir los contenidos en secciones y subsecciones? Bueno, te lo explico un poco.

Dividir los contenidos de la web en secciones y subsecciones

Aunque tú tendrás tu propia idea para hacer tu página web, vamos a ponernos todos en el mismo lugar para realizar el resto del ejemplo. Sigue mis mismos pasos para no liarte mucho con el resto de explicaciones y haz todo igual que yo, con las mismas secciones y subsecciones. Luego, en otra carpeta, puedes hacer tus propios experimentos, oki?

Imagina que la web de nuestro ejemplo la vamos a dedicar a un grupo de música que tenemos o que nos gusta. En cuántas secciones principales se podría dividir? Quizás en estas:

Página de presentación o portada . En esta explicamos el estilo de música del grupo, y comentamos las partes más importantes de la web. Debería ser breve para que el visitante sepa de un solo vistazo qué puede encontrar en la web. Esta sección es breve y rápida así que no la dividimos en subsecciones. Recuerda, es la primera página que ve el visitante cuando acceder a la web, por tanto corresponde con la index.html

Historia del grupo . Aquí se puede comentar cómo, dónde y cuándo surgió la idea de la formación del grupo, qué músicos han formado parte de la banda a lo largo de los años, cuál es la formación actual, y cosas así. Esta sección se podría dividir en algunas subsecciones, por ejemplo, Cómo surge la banda, Miembros que han pasado por ella, Formación actual e incluso un Album de fotos!

104

Discografía . Lo típico, una sección en la que se muestra cada album o CD publicado. Esta sección se puede dividir por CDs publicados, por ejemplo en las subsecciones Maquetas, CD1, CD2, CD3.

Conciertos . Aquí se informa al visitante de cuáles son los próximos conciertos de la banda y se muestran también los conciertos celebrados hasta el momento. Se puede dividir por ejemplo en las subsecciones Conciertos Anteriores y Próximos Conciertos.

Foro . Siempre es buena idea saber la opinión de los visitantes, tanto para mejorar la propia web como para saber qué piensan del grupo de música. Nos reservamos una sección para en el futuro incorporar un foro a la web, si puede ser, integrado en la misma estructura de la página. Esta sección en principio no tendría subsecciones.

Descargas . En este otro apartado se pueden colocar cosas que los fans se pueden bajar como curiosidad. Por ejemplo, posters del grupo, imágenes, las mismas canciones, letras, videos, etc, etc. Esta sección se puede dividir en las subsecciones, Canciones MP3, Letras, Posters, Imágenes y Videos.

Souvenirs . Quizás se piense en vender camisetas, gorras o CDs del grupo. Esta puede ser otra sección que se puede dividir por ejemplo en Cómo Comprar, Camisetas y CDs.

Ves que fácil? No hay que preocuparse demasiado si más tarde se nos ocurren otras secciones, pues con el truco que te he comentado páginas atrás y que te explico más adelante será muy fácil añadir, eliminar o modificar las secciones. Pero sí está bien tener una idea más o menos clara al principio sobre la que partir.

Como imagino que adivinas, los títulos de las secciones (Portada, Historia, Discografía, etc) los colocaremos en el menú horizontal que hay bajo la cabecera de las páginas (el que ahora tiene fondo gris) y las subsecciones las colocaremos en el menú lateral izquierdo. Así será muy fácil para el visitante ir directamente a donde desea llegar.

Te dejo finalmente el esquema de secciones y subsecciones que vamos a usar en la web de ejemplo para que lo veas más claro. Este debería ser el resultado al que deberías llegar tras tomar papel y lapiz y pensar en los apartados de la web en la que estás trabajando. Es el esquema de la derecha.

Cuando hagas tu propia web, recuerda hacerte un esquema parecido y guárdalo como si fuera un mapa de tu web (vale escrito a mano con papel y lapiz en un papel) para tener una vista rápida de dónde está cada parte. Te será muy util a la hora de escribir rutas, ver dónde encajar un apartado nuevo que quieres añadir, etc, etc.

Bien, ahora que tenemos clara la estructura inicial de la web, vamos a rellenar en la plantilla.html todas estas secciones y comenzamos a crear las demás páginas y a enlazarlas entre sí, oki? Venga, ánimo!

105

Nombrando los archivos de las secciones de la web de ejemploAhora sí empezamos con todo esto. Vamos primero a decidir qué enlaces pondremos en el

menú horizontal de secciones que hemos comentado antes. Te dejo la chuleta a la derecha para que la tengas a mano. Como verás, las secciones son Portada, Historia, Discografía, Conciertos, Descargas, Foro y Souvenirs, no? Pues basta con añadir los enlaces correspondientes dentro de la capa "navegacion" en el código de la plantilla.html cuyo código era este hasta ahora:


<ul>




</ul>

</div>

Como adivinarás, tenemos que añadir algunas líneas <li> más (antes solo teníamos tres enlaces en la plantilla y ahora son siete los enlaces que queremos), y tenemos que añadir la ruta de cada una de ellas. Recuerda que la ruta hay que ponerla en lugar de la almohadilla (#). Por ahora las páginas de las secciones que queremos poner no existen, pero podemos decidir ya cómo se va a llamar cada archivo de cada una de estas páginas y así podemos escribir la ruta ya en esos enlaces. Lo mejor a la hora de decidir el nombre para un archivo Html es nombrarlo con el nombre de la sección o subsección y así será muy fácil saber qué contiene.

Recuerda estas normas básicas e importantísimas a la hora de nombrar archivos tanto html como de imágenes, carpetas, archivos de música o cualquier otra cosa:

Usar solo minúsculas. Solo usar letras y números, nunca símbolos raros.

Nunca empezar el nombre de un archivo con un número (1nombre.html).

No dejar espacios en blanco, como mucho guiones medios "-" (no bajos "_").

Nunca poner acentos en los nombres de los archivos.

Ponerle un nombre que refleje el contenido, sección o subsección de la web. Nunca cosas como pagina1.html sino nombres que tengan sentido.

Teniendo todo esto en cuenta, el nombre de los archivos de las páginas de estas secciones deberían ser estos:

portada.html (pero como corresponde a la página principal, sería en realidad index.html)

historia.html

discografia.html

conciertos.html

descargas.html

foro.html

souvenirs.html

106

Ves? Sencillos, representativos, sin cosas raras... make it simple! decía Einstein ;=)

Una carpeta para cada secciónSi tuvieramos todos los archivos de la web guardados en la misma carpeta, a la larga nos

sería muy complicado encontrar un archivo determinado, de modo que me parece una buena idea crear una carpeta para cada sección. Cada una de esas carpetas tendría el nombre de la sección (recordando las normas anteriores!). Dentro de cada una de ellas colocaríamos tanto las páginas de esa sección (las subsecciones) como las imágenes, archivos de música, etc que tenga, por ejemplo en una carpeta llamada "objetos".

Así que antes de nada ya puedes empezar creando una carpeta para cada una de esas secciones. Ya sabes, con los nombres historia, discografía, conciertos, descargas, foro y souvenirs. Recuerdas cómo se crean las carpetas? Puedes hacerlo de dos maneras. Una directamente abriendo la carpeta donde guardamos la web de ejemplo en tu escritorio y creando las carpetas y otro modo es desde el Html Kit. Vamos a hacerlo desde el Html Kit para recordar cómo era, oki?

Creando las carpetasVamos a recordar cómo se crean carpetas en el sitio web con el Html Kit, como siempre,

paso a paso para que no pierdas detalle.Abre para empezar el Html Kit y haz que se muestre la ventanita de WorkSpace. Ya sabes

cómo, clic en "Ver" del menú de arriba del Html Kit, y clic en "WorkSpace" dentro del desplegable que se abre. Haz clic con el botón derecho del ratón sobre la carpeta amarilla web-ejemplo-cctw-local y en este otro desplegable que se abre elige "New" y "Create New Folder", como en la imagen de aquí abajo....

... anda, me ha vuelto a pasar lo mismo, perdona. Si, se ve que si coloco a la derecha de mi menú de la izquierda de CCTW una imagen muy grande, como no cabe, se me queda un hueco entre el primer párrafo y la imagen, un espacio muy feo, todo vacio... menos mal que recuerdo el truco, escribir una chorrada para rellenar y conseguir así que la imagen se quede

107

un poco más abajo.. lo he logrado ya o tengo que seguir escribiendo tonterias... a ver... Pues sí, ya parece suficiente, perdona de nuevo, je je je

Se abre una ventana en la que pondremos el nombre de la carpeta que queremos crear. Recuerda que la sección portada dijimos que no iba a tener carpeta, por lo que la primera que crearemos será "historia". Recuerda, sin extensión ninguna, no es un archivo, es una carpeta:

Podremos ver como aparece esa carpeta en la ventana de WorkSpace:

108

Repite la misma operación con el resto de carpetas, discografia, conciertos, descargas, foro y souvenirs.

Las carpetas "objetos"Además, hemos dicho que dentro de cada una de estas carpetas que acabamos de crear

ibamos a crear otra carpeta llamada objetos, en la que guardaríamos los archivos de imágenes, sonido etc que pertenecieran a esa sección, así que adelante. En esta ocasión como la carpeta que queremos crear está dentro de cada una de las creadas recientemente, tendremos que hacer clic con el botón derecho del ratón sobre el nombre de la carpeta en la que la queramos crear. Me explico con un ejemplo. Para crear la carpeta objetos dentro de la carpeta historia, haz clic con el botón derecho del ratón sobre la carpeta historia, pulsa sobre New + Create New Folder y ponle el nombre "objetos" cuando te lo pregunte. Lo ves? Fácil no? Pues haz tú lo mismo con el resto de carpetas objeto que tenemos que crear en el resto de carpetas, oki? Al final querdaría una cosa así en la ventana de WorkSpace:

La única sección que no va a estar dentro de ninguna carpeta será la portada, pues como va a ser la misma página principal (index.html) no podemos colocarla dentro de ninguna carpeta, debe ir directamente en la raiz del servidor y además se debe llamar index.html, es decir, el archivo de la portada no se llamará portada.html sino index.html y no estará dentro de ninguna carpeta. [Más información sobre qué es la raiz del servidor aquí]

Los archivos de la portada también estarán en una carpeta objetos, que es la que ya teníamos. Es la que he señalado en azul en la imagen de arriba y que ya contiene algunos archivos, los de los bordes del menú, etc.

Creando las páginas de las seccionesBien, ha llegado el gran día! Vamos a crear las páginas de cada una de las secciones ahora

mismo. Te imaginas tener que hacer todo lo que llevamos hecho cada vez que queremos hacer una nueva página? Pffff, sería de locos. Es por eso que hemos creado la plantilla, para ahorrarnos todo ese trabajo. Verás qué rápido generamos todas las demás páginas.

Abre el Html-Kit y abre la plantilla.html. Bien, de esa plantilla vamos a aprovechar todo. La copiaremos en todas las carpetas y así en lugar de empezar desde cero con cada una solo tendremos que añadir los contenidos. Pero antes vamos a retocarla ligeramente, eliminando lo que no nos hace falta y colocando unas equis en los lugares donde deberiamos rellenar algo, para más tarde acordarnos, vale? Vamos a ver qué cosas son las que debemos rellenar para personalizar cada una de las páginas que vamos a crear.

Abre la plantilla y mira su código Html. En la quinta línea vemos que se define el título de esa página. Ahora mismo pone "Page Title" cuando en realidad debería poner el título de esa página concreta. Vamos a borrar "Page Title" y colocaremos unas pocas equis, y así recordaremos que ese es un hueco que tendremos que rellenar en todas las páginas que vamos a crear. Debe quedar así:

109

http://www.comocreartuweb.com/herramientas-utiles/enciclopedia-r-raiz-de-la-web.html

Por otro lado, si miras más abajo en ese mismo código Html de la plantilla, más o menos en las líneas 31, 32, 33 y 34 (estos números se ven en la parte izquierda de cada línea, lo ves en la imagen de aquí arriba?) tenemos los comentarios o textos que aparecen en la plantilla de ejemplo. Como esos textos no deben aparecer en las páginas de las secciones (que ya tendrán sus propios textos) vamos a borrarlos y poner de nuevo unas equis en su lugar para acordarnos que es ahí donde podemos escribir lo que queremos que salga en las nuevas páginas.

Hasta hace un minuto esa parte de código Html era así:

Y ahora debería quedar así:

110

Ahora ya sabes que cuando copiemos la plantilla en cada una de las carpetas de las secciones, solo tenemos que rellenar las partes con XXXXX para personalizar cada página, lo veremos más adelante. El resto de la plantilla nos vale tal y como está, por ahora. Guarda la plantilla y seguimos.

Una observación. Si haces vista previa a la plantilla ahora, verás que sale algo (bastante) deformada. Algo así:

No te preocupes en absoluto. Eso se debe a que hemos eliminado gran parte del contenido, de los textos de la parte central. Como apenas tenemos dos frases (las de las equis) la página se queda tan cortita que se desmorona un poco, pero en cuanto le añadamos algo de contenido todo se arregla solo, la página vuelve a recuperar su forma. Si lo prefieres, escribe

111

muchas más equis dejando algunos espacios entre ellas, hasta tener las suficientes como para llenar un espacio considerable de la web. De ese modo no sale esa deformación.

Una nueva página para la sección historiaPara crear la página historia.html que guardaremos en la carpeta historia, haremos lo

siguiente. Abre el Html Kit, abre la plantilla.html y ahora la guardamos con otro nombre y en otro lugar. El otro nombre será historia.html y el lugar donde la vamos a guardar es dentro de la carpeta historia.

Para hacer eso, en el Html Kit y con la plantilla abierta, pulsa en el menú de arriba donde pone Archivo y del desplegable que se abre, pulsa en Salvar Como:

Se abre entonces una ventana desde la que tienes que elegir la carpeta en la quieres guardar la copia. En este caso será la carpeta historia. Además, antes de guardar o salvar (es lo mismo) tienes que ponerle un nombre al archivo, pues ya no se va a llamar plantilla sino historia.html

112

Ves?

En este caso, al tratarse de una página web lo que guardamos, no olvides ponerle la extensión correspondiente, es decir, el nombre más un punto y las letras html (en minúscula todo!!)

Pues ya tenemos lista la página historia. La página que se te queda abierta ahora en el Html Kit ya no es plantilla.html sino historia.html pero como ambas son idénticas, podemos usar historia.html que ya está abierta para hacer lo mismo con el resto de páginas de las demás secciones. De modo que, de nuevo, pulsa sobre Archivo + Salvar Como, y ahora dentro de la carpeta discografia guarda una copia llamada discografia.html

Cuando hagas eso, repites creando otra llamada conciertos.html dentro de la carpeta conciertos, después dentro de la carpeta descargas otra página llamada descargas.html y lo mismo para foro y souvenirs. Quizás te parezca un poco pesado, pero imagina si tuvieras que hacerlas desde cero.... vaya tela, no?

Qué les pasa a los estilos CSS de estas páginas de sección?Vaya, si hacemos vista previa a alguna de esas páginas de sección que hemos creado....

se ve toda deformada. Por qué puede ser? Parece como si los estilos CSS que tenemos definidos en la hoja de estilo no funcionaran...

113

En realidad lo que ocurre es que las páginas no encuentran la hoja de estilos. Vamos a ver cuál es la ruta que tienen en el enlace de la cabecera para descubrir qué es lo que está mal, vale? [Más información sobre qué son las rutas aquí]

Si miramos el código de, por ejemplo, la página historia.html vemos que dentro de la cabecera (head) el enlace a la hoja de estilos es este:

Bien, vemos que la ruta (relativa) de la hoja de estilos es "estilo-general.css". Esto significa que el navegador cuando visita la página historia.html debe buscar la hoja de estilos en la misma carpeta en la que esté historia.html y ese no es el caso. Para arreglarlo tenemos dos opciones.

La primera de ellas es colocar una copia de estilo-general.css en cada una de las carpetas de sección que tenemos. Esto tiene varios inconvenientes. Tendríamos unos cuantos archivos repetidos. Si un dia decidimos hacer un cambio en la hoja de estilos tendríamos que hacer lo mismo en la el resto de carpetas y eso es un rollo.

La segunda opción es retocar la ruta para que busque la hoja de estilos donde está ahora, es decir, fuera de la carpeta historia, en la raiz del servidor. Así tendríamos una sola hoja de estilos para todas las páginas de todas las secciones. Esta opción parece mejor, pues si alguna vez queremos hacer un cambio basta con retocar una sola hoja de estilo. De modo que vamos a retocar la ruta.

Y qué ruta tenemos que poner? Si el navegador está visitando la página historia.html, para acceder a estilo-general.css tendrá primero que salir de la carpeta historia y después abrir estilo-general.css Te acuerdas como se escribía eso en Html? Para salir de una carpeta se

114

http://www.comocreartuweb.com/herramientas-utiles/enciclopedia-r-rutas.html

escribian en la ruta dos puntos y después una contrabarra (../). Y para abrir un archivo se escribia su nombre. Así que la ruta que debemos colocar será:

<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">

Estás de acuerdo? Bien. Y qué ruta habrá que poner por ejemplo en la nueva página discografia.html? Pues si te fijas, sería la misma que la de historia.html pues hace falta lo mismo, salir de su carpeta (../) y abrir la hoja de estilo.

Fíjate el trabajo que tenemos ahora.... tenemos que modificar la ruta de todas las páginas que tenemos creadas... Y eso no es nada. Imaginas cuando queramos cambiar algo en todas las páginas de la web y tengamos unas 500 o mil páginas!!! juas! Hay que inventar algo para evitar eso verdad? Pues no pienses mucho que ya está inventado. Lo vemos en la lección siguiente.

Buscar y ReemplazarPara arreglar las rutas que vimos antes de un solo plumazo podemos recurrir a un software

(programa, recuerda, je je) que trabaje por nosotros. No existen muchos programas que hagan lo que necesitamos, yo solo conozco un par de ellos. El primero es el Dreamweaver pero es de pago y cuesta una pasta y el segundo gracias a Dios es gratuito y se llama EditPad Lite. Este es el que vamos a utilizar, no solo para retocar esta ruta que tenemos mal, sino para miles de cosas más adelante. Por el momento vamos a descargarlo a nuestro ordenador, lo instalamos y aprovechamos el problemilla de las rutas para aprender a usarlo, oki? Será tu mejor aliado y un genial complemento para el Html Kit, verás.

El EditPadLite se puede descargar desde este enlace que nos lleva a la web oficial:Descargar EditPadLiteAl hacer clic se abrirá la web oficial del programa en una nueva ventana, para que puedas

ir leyendo estas instrucciones a la vez que lo descargas. El primer paso es hacer clic en la parte de abajo del todo de esa web, donde pone Download EditPad Lite:

Como ves está en inglés, pero no te preocupes que no nos hace falta entender demasiado. Además quizás encuentre algún modo de traducirlo al español, pero vamos, que no va a ser ningún problema, verás que no.

Al hacer clic en Download, aparece una ventana de Windows preguntándonos si queremos guardarlo. Qué cosas verdad? Pulsa sobre Guardar Archivo:

Creo que una vez te comenté que podías tener una carpeta en la que ir guardando todo el software que vayamos usando, por si algún día te hace falta. Si lo hiciste puedes guardar este programa también allí.

115

http://www.editpadpro.com/editpadlite.html

Una vez que tengas el archivo de instalación en tu PC, haz doble clic sobre él para instalarlo. La instalación es bien sencilla, le dices a todo que si y listo. Si tienes algún problema me lo comentas en el foro y lo explico más detalladamente, pero imagino que no es necesario.

Una vez instalado el programa puedes ya abrirlo para aprender a manejarlo. Lo vemos a continuación.

Poniendo en marcha el EditPad LiteNada más abrir el nuevo programa, el EditPad Lite, nos aparecerá una ventana de Tips. Los

Tips son consejos que te dan para que aprendas a usar el programa mejor. Siempre sale uno al iniciar el programa. Como están en inglés de poco nos van a servir, je je, así que desmarcamos (quitamos) la casilla de abajo para que no vuelva a aparecer la próxima vez que abramos el programa. Después de desactivarla pulsa sobre Thanks!

Ahora sí que vemos la ventana del EditPad Lite. Busca en el menú de arriba de ese programa la opción Search (que significa Buscar) y dentro del desplegable escoge la opción "Show Search Panel" que significa mostrar el panel de búsqueda. También se puede abrir pulsando a la vez las teclas de tu teclado Ctrl + F:

116

Se abre entonces el panel de búsqueda del EditPad Lite, que es así:

Pues bien, en la ventanita donde pone "Search", abajo, donde yo he escrito "Codigo que queremos buscar" podemos poner las líneas de código que ya no nos valen y que queremos sustituir por otras nuevas. Así, el EditPad Lite buscará en todos los archivos que le digamos esa parte de código. Si encuentra ese trozo de código que hemos colocado en esa ventana, lo que hace es sustiruirlo por el que pongamos en la ventana de abajo.

Esto que quizás ahora no te diga mucho es de una utilidad bestial! Fíjate que a partir de ahora, cada vez que queramos cambiar algo que está en varias páginas de nuestra web solo tendremos que abrir el EditPad Lite, pegar el código que queremos sustituir arriba, el nuevo abajo y Uala! El se encarga de todo en cuestión de segundos.

Vamos a aprovechar que tenemos que corregir la ruta de la hoja de estilo en todas aquellas páginas para hacer un ejemplo de uso de este programa. Sigue todos mis pasos y verás que fácil es.

Reparando la ruta de la hoja de estiloTienes abierto el EditPad Lite? Pues vamos a reparar las rutas aquellas. Ten en cuenta que

este programa va a buscar y reemplazar el código que le indiquemos solo en las páginas que abramos con él en ese momento. Es decir, si quiero hacer la "búsqueda y reemplazo" en tres páginas concretas, tenemos que abrirlas con ese programa, dejarlas abiertas y entonces hacer eso de buscar y reemplazar. De este modo nos aseguramos de que no se va a buscar ese código en otras páginas que no nos interesen.

Como nosotros queremos hacer la búsqueda y reemplazo en las páginas de las carpetas de las secciones que hemos creado antes, lo primero que vamos a hacer es abrirlas con el EditPad Lite. Cómo se hace esto? Vamos a verlo.

Primero abre el EditPad Lite. Ahora ve a File (significa archivo) que está en el menú horizontal de arriba de ese programa y escoge Open (abrir).

117

Se abre entonces una ventana como esta, desde la que debes indicar qué archivos quieres abrir. Ve buscando una por una todas las páginas en las que queremos arreglar las rutas y las vas abriendo, una por una. Así por ejemplo se abre la página historia.html:

Ya has abierto todas? Recuerda, son todas estas, historia.html, discografia.html, conciertos.html, descargas.html, foro.html y souvenirs.html. Bien, pues seguimos en la página siguiente.

Rellenando datos en el EditPad LiteAhora, en ese mismo programa, selecciona la línea completa de la ruta en cualquiera de

esas páginas abiertas. En la imágen de aquí abajo verás como el código Html de las páginas abiertas aparece en la ventana de arriba del todo del EditPad Lite. Es ahí donde puedes seleccionar esa línea de código.

Para seleccionarla ya sabes, haces clic al principio de la línea, arrastras sin soltar el botón del ratón hasta el final de esa línea, sueltas (se queda todo azulado) y ahora pulsas sobre la selección (lo azul) con el botón derecho del ratón y escoges Copy, tal y como puedes ver en la imagen de abajo.

Has merendado ya? No tienes hambre? Pues yo me tomaba ahora mismo un bocata de nocilla y me quedaba listo, je je je. Vaya, ya me has pillado otra vez escribiendo chorradas para que se baje un poco la imagen. Jo, es que me tropezaba con el menú... je je. Venga vale, seguimos... aquí tienes la imagen:

118

En esa imagen también puedes ver las lengüetas de las páginas abiertas. Las he señalado con un borde rojo, las ves en la parte de arriba? Solo por curiosidad. Pues ahora que tenemos el código que queremos cambiar copiado, ve a la ventana de Search y pegas lo que acabas de copiar. Para pegar, pon el cursor del ratón sobre esa ventana (de las dos de abajo es la de arriba) y haciéndo clic con el botón derecho del ratón sobre ella escoge Paste (que significa pegar). Queda entonces así:

Ahora, en la ventana de debajo de esa, en la que pone Replace a su izquierda, tenemos que escribir la nueva línea que queremos que reemplace a la anterior. Como son casi iguales, pega de nuevo en esa ventana la que tenemos copiada y le corregimos la ruta luego a mano, pues lo demás está bien. Tiene que quedar de esta forma:

119

Como ves, la única diferencia entre las líneas que hemos pegado es la ruta, que abajo le hemos añadido ../ para que salga de la carpeta. Ya estamos listos para que el EditPad Lite haga su trabajo, pero antes hay que marcar la casilla que te he señalado con un circulo rojo, la de la derecha. Pone "All Files" que significa que ha de buscar y reemplazar esas líneas en todos los archivos que tiene abierto el programa. Si no se marca, solo hará el trabajo en la página que esté activa.

Vamos a la página siguiente y empezamos a reemplazar. Será pan comido!

Reemplazando códigos con EditPad LiteBien, vamos allá a ver que pasa. Pulsa donde pone Replace All y cruza los dedos!!! El

botón de Replace All te lo señalo en la imagen de abajo por si no lo encuentras:

120

Tres dos uno.... haz clic!!! .... em... pues con tanto rollo seguro que esperabas un redoble de tambores, o fuegos artificiales o qué se yo, pero... la verdad es que al apretar el botón ese no he sentido nada por el cuerpo... Abrá funcionado? Pues sí! Si te fijas pulsando en las distintas lengüetas de las páginas abiertas en el EditPad Lite podrás ver como esa línea ha sido reemplazada y que ahora todos esos archivos tienen la ruta correcta! Si que ha sido rápido verdad? Ahora solo hace falta cerrar el EdipPad Lite pulsando sobre la X que hay en la esquina superior derecha.

Cuando pulses sobre esa X para cerrarlo, cómo es lógico, el programa te pregunta si quieres guardar los cambios. Te pregunta por estas cuatro opciones:

"Save This File": Esto es si quieres guardar la página que está activa, no las otras."Don´t Save This File": Significa que la que está activa no quieres guardarla."Save All Files": Escoge esta opción cuando quieras guardarlas todas. Esta es la opción

que necesitamos ahora nosotros. Haz clíc en ella."Don´t Save Any": Significa que no quieres guardar ningún cambio."Cancel Close": Es para cancelar el cerrar el programa.

Oki? Así que elige "Save All Files" y ya te funcionarán los estilos en todas esas páginas. Grandioso, no?

Reparando el logotipoBueno, a veces todo arreglo tiene sus daños colaterales, je je je, pero no pasa nada. Estas

cosillas nos sirven muy bien para seguir aprendiendo y practicar con todo lo que voy

121

enseñando así que, sigamos. Resulta que si ahora haces vista previa sobre cualquiera de las nuevas páginas creadas, como por ejemplo sobre historia.html te darás cuenta de que ahora no se ve el logotipo que teníamos, el de comocreartuweb de la parte superior. Además, ya no funciona su enlace y en lugar de llevarnos a index.html nos da un error. No es dificil adivinar porqué, pero te lo digo yo que soy más rápido, je je.

Resulta que ahora las rutas del archivo del logotipo.gif y la del enlace hacia el index no son correctas. Esto es por el mismo motivo que antes, porque son copia de la plantilla que antes no estaba dentro de ninguna carpeta y como ahora si lo está, tenemos que reparar las rutas, corregirlas.

Veamos rápidamente cuales son las rutas de logotipo.gif y la del enlace a index.html en la página historia.html. En el código Html de esa página vemos esto:

<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>

Como ves, el navegador cuando visite esa página intentará buscar un archivo llamado logotipo.gif dentro de la carpeta objetos que hay dentro de la carpeta historia (pues es en esta carpeta donde está la página que está visitando, historia.html). Pero en realidad el logotipo.gif se encuentra en la carpeta objetos de la raiz de la web, fuera de la carpeta historia. Así que, la ruta correcta sería otra. Para llegar desde historia.html hasta el logotipo.gif es necesario, primero salir de la carpeta historia (eso se hacía con ../ ), luego entrar en la carpeta objetos (la antigua, en la que guardamos al principio los archivos del logotipo, etc), y finalmente abrir el logotipo.gif

Por otro lado, para llegar desde cualquier página que haya dentro de una de las carpetas de la web de ejemplo al index.html, es necesario salir de la carpeta. Así que la ruta correcta del enlace será "../index.html" y no "index.html"

Por tanto las rutas correctas serán:

<div id="cabecera">

<div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif" width="270" height="80"


<div id="publicidad">Bienvenidos a mi web</div>

</div>

Muy parecidas, solo cambia el añadirle los puntos y la contabarra.

Pero esto hay que cambiarlo en tooodas las páginas web que tenemos dentro de las carpetas de sección! Vaya tela, no? Menos mal que ahora sabemos manejar perfectamente el EditPad Lite y será coser y cantar! Vamos allá y lo recordamos? Esta vez te lo explico de un modo más rápido, no creo que necesites mucha ayuda otra vez, no?

Abrimos el EditPad Lite, abrimos desde él todas las páginas que tenemos dentro de carpetas (las mismas que la vez anterior). Escribimos en la ventana de arriba (la de Search) esto:<div id="cabecera">

<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270" height="80"



122

</div>

Y en la ventana de abajo esto otro:

<div id="cabecera">

<div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif" width="270" height="80"



</div>

Le damos al botón "Replace All", cerramos el EditPad Lite, le indicamos que guarde todos los archivos y... ya está. Todo reparado. Que gusto verdad? Je je je.

Personalizando un poco cada página de secciónBien, ya tenemos lista la estructura de carpetas de la web para tenerlo todo bien

ordenado. Además tenemos la página principal de cada una de las secciones. El siguiente paso sería hacer funcionar el menú horizontal (la barra de navegación que hay bajo la cabecera, con el fondo gris) de todas estas páginas, es decir, colocar los enlaces en ese menú (un enlace para cada sección) para que estemos en la sección que estemos, desde allí podamos dirigirnos a cualquier otra sección de la web.

Hay una pequeña pega y es que, como todas las páginas que tenemos ahora mismo son exáctamente iguales, cuando hagamos funcionar el menú horizontal no sabremos si funciona o no, pues nos dirigirá a una página idéntica y no vamos a observar ningún cambio. Recuerda que todas ellas son copia exácta de la plantilla. Lo pillas? Así que antes de ponernos a arreglar el menú y sus enlaces vamos a personalizar un poco cada una de las páginas de las distintas secciones.

Para ello simplemente abriremos cada una de ellas con el Html Kit y rellenaremos el titulo (<title>) y pondremos un poco de texto en la parte del contenido principal. vale? Pues vamos allá.

Empezaremos por la página historia.html Abrela con el Html Kit y pone como título este, "Historia de la banda". Ya sabes cómo, no? Escribiéndolo entre <title> y </title>. Ahora en el título del contenido, entre <h1> y </h1> escribe esto otro: "Esta es la historia de la banda". Ya, no es muy original, pero es lo que doy de sí a estas horas... je je je. Y para terminar, invéntate algo para poner en el párrafo que hay debajo del título que acabas de retocar. Quitas las equis y te inventas algo tal que así:

"La banda nació en 1982, cuando tras ver por la tele un concierto de Bruce Springsteen dos chavalotes se digeron... y si aprendemos a tocar algo? Fue entonces cuando Juanito se compró su primera batería y Pepito su primer ampli y guitarra. Tras encontrarse con Pablito y convencerle de que le pidiera el bajo a su tio, empezaron a ensayar en el garaje de uno de ellos. Al principio intentaban tocar sus canciones preferidas, las que sonaban en esos momentos por la radio y cosas así. Más tarde Pepito empezó a escribir algunas letras a las que pusieron música. Así nació la banda, imagino que, igual que muchas otras".

Si yo fuera bueno escribiendo novelas no estaría aquí enseñandote a crear páginas web, así que no te rias de mí y de lo que me invento y ale, a copiar gandúl! je je je. Ahora haz lo mismo con el resto de las páginas que tenemos en las demás carpetas. Ponle el Title y el título H1 a cada una e intenta inventarte un par de párrafos para que las páginas recuperen un poco la forma, oki? Si, se que es un tostón, pero hay que hacerlo para poder seguir, venga....

Haciendo funcionar los enlaces del menú horizontal

123

Ya estamos en condiciones de hacer funcionar el menú horizontal de arriba, también llamado barra de navegación. Para ello abre una página cualquiera de las que tenemos hechas, por ejemplo historia.html

Si te fijas en su código Html, en la capa navegacion teniamos puesto esto:


<ul>




</ul>

</div>

Ese código tenemos que transformarlo para que aparezcan enlaces a todas las secciones, incluida la portada. Para ello basta con añadir 4 líneas más como las que ya hay, quedando una para cada uno de los enlaces que necesitamos. Y ya que estamos, en lugar de Sección 1, Sección 2, etc, escribiremos el texto que queremos que aparezca en el menú, es decir, Portada, Historia, Discografía, Conciertos, Descargas, Foro y Souvenirs:


<ul>

<li><a href="#">Portada</a></li>

<li><a href="#">Historia</a></li>

<li><a href="#">Discografía</a></li>

<li><a href="#">Conciertos</a></li>

<li><a href="#">Descargas</a></li>

<li><a href="#">Foro</a></li>

<li><a href="#">Souvenirs</a></li>

</ul>

</div>

Va tomando forma, bien bien. Ahora solo falta colocarle la ruta en lugar de la almohadilla (#). Cuál crees que será la ruta de estos archivos? Pues, esté el navegador en la página que sea, siempre tendrá que, primero salir de esa carpeta ( ../ ), después entrar en la carpeta de la sección correspondiente ( nombre de la carpeta) y finalmente abrir el archivo de la página (nombredelapagina.html). Es decir, así:


<ul>


<li><a href="../historia/historia.html">Historia</a></li>

<li><a href="../discografia/discografia.html">Discografía</a></li>

<li><a href="../conciertos/conciertos.html">Conciertos</a></li>

<li><a href="../descargas/descargas.html">Descargas</a></li>

<li><a href="../foro/foro.html">Foro</a></li>

124

<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>

</ul>

</div>

Como verás, la ruta de la portada no la he puesto aún. Esa ruta será diferente, pues para llegar desde la página de cualquier sección a la portada (que como digimos iba a ser la index.html) la ruta a seguir es simplemente ../ (para salir de la carpeta de sección en la que se esté) seguido de index.html quedando todo ese código así:<div id="navegacion">

<ul>

<li><a href="../index.html">Portada</a></li>

<li><a href="../historia/historia.html">Historia</a></li>

<li><a href="../discografia/discografia.html">Discografía</a></li>

<li><a href="../conciertos/conciertos.html">Conciertos</a></li>

<li><a href="../descargas/descargas.html">Descargas</a></li>

<li><a href="../foro/foro.html">Foro</a></li>

<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>

</ul>

</div>

Estás de acuerdo conmigo en estos códigos? Si, verdad? Je je je je, ves? Ya hablamos de códigos Html de tú a tú! Estás hecho todo un Webmaster!!!

Bueno, para ser correctos del todo, deberías recordar aquél error que comentamos una vez que surge en el Internet Explorer si ponemos las líneas de código Html de ese modo. La norma era que todo el código Html de una lista ha de estar todo seguido, por tanto antes de reemplazar ese código vamos a ponerlo en una sola línea. Para ello, pones el cursor al final de cada línea y das a la tecla "Supr" hasta que la siguiente quede pegada a la anterior. Y así con todas. Debe quedar más o menos así:<div id="navegacion">

<ul><li><a href="../index.html">Portada</a></li><li><a href="../historia/historia.html">Historia</a>

</li><li><a href="../discografia/discografia.html">Discografía</a></li><li><a href="../conciertos/

conciertos.html">Conciertos</a></li><li><a href="../descargas/descargas.html">Descargas</a></li><li>

<a href="../foro/foro.html">Foro</a></li><li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>

</ul>

</div>

Ahora solo nos queda usar el buscar y reemplazar del EditPad Lite para de un plumazo actualizar los códigos de los menús horizontales de tooodas las páginas de las secciones. Te atreves a hacerlo sin ayuda?

Abre el EditPad Lite, abre todas las páginas de las secciones, (Portada, Historia, Discografía, Conciertos, Descargas, Foro y Souvenirs), y desde una de ellas, escribes el código a buscar en la parte de arriba y el nuevo código que queremos en la parte de abajo. Te recuerdo que el código a buscar era este: <div id="navegacion">

<ul>

125




</ul>

</div>

El que queremos (que va en la ventada de abajo del EditPad Lite) lo puse antes. Ahora pulsas sobre "Replace All" y listo, cierras el programa, le dices que guarde todas y... misión cumplida de nuevo!

Corrigiendo la deformación del menú lateralSi si, ya se que llevamos un montón de lecciones ya corrigiendo cosas, pero.... y lo que

estás aprendiendo? Je je je. Verás como pronto tenemos la web de ejemplo terminada y puedes entrar a construir la tuya propia. Además, verás que cada vez que corregimos algo aprendemos cosas nuevas, no? De eso se trata.

Si haces vista previa en cualquiera de las páginas de sección, por ejemplo de la página historia.html, verás como ahora el menú lateral de la izquierda aparece casi en el centro deformando la web. Esta deformación solo se ve bien usando Firefox, pues si usas el Internet Explorer apenas se aprecia. En cualquier caso hay que arreglarlo.

Además, verás como los elementos del menú horizontal que acabamos de hacer, están descentrados. Hay que modificar los margenes de la capa navegación para ajustarlo mejor y evitar además la deformación que tenemos. Eso se hace muy rápido retocando la hoja de estilos, estilo-general.css

Mira, esta es la deformación que te digo usando Internet Explorer:

126

Y esta es usando Firefox:

Hay un hueco demasiado grande a la izquierda de los enlaces del menú horizontal y

además se nos baja el enlace Souvenirs a una segunda línea que no queremos. Además puedes ver como los usuarios de Firefox van a ver la web deformada por ese mismo motivo, al desplazarse el enlace Souvenirs a una segunda línea, desplaza también el menú lateral. No te preocupes, lo arreglamos enseguida.

Abre la hoja de estilos, estilo-general.css y echa un vistazo a las líneas donde hemos definido estilos a la capa navegación, son estas tres principalmente:




El problema lo tenemos en la tercera de esas líneas. Al principio le pusimos un margen por la izquierda de 180 pixeles. Lo hicimos para centrar los tres enlaces que teníamos al comienzo de la lección, pero como ahora tenemos unos siete, es necesario hacerlo más pequeño. Así que en lugar de 180px vamos a ver qué tal se ve con solo 60px, es decir, modificándo esa línea para dejarla así:

127


Si ahora guardas la hoja de estilo y haces vista previa sobre cualquier página de sección, verás que ahora se ve... genial! No somos unos genios?

Aún podríamos retocarlo un poco más variando la segunda línea ( margin: 0px 20px 0px 20px ). Retocando esos parámetros puedes hacer que los enlaces estén más o menos cerca unos de otros, pero eso te lo dejo para cuando hagas tu propia web, oki? Solo recuerdalo por si te hace falta.

Nota: Te recuerdo que si ves que las páginas aparecen un poco deformadas, es por que te falta escribir algo de contenido en la parte central. Hazme caso y rellenala, así como el título y esas cosas que te he dicho.

Si se deforman pero no se arregla con eso, tal vez hayas cometido algún error al usar el EditPad Lite. En ese caso coméntanoslo en el foro y te ayudamos a corregirlo, oki? Esto va viento en popa!!!

La nueva index o portadaSeguramente en muchas ocasiones habrás visto que al entrar en una página web aparece

en primer lugar una página de presentación que suele ser ya típica. Un banner o logotipo grande de la web en cuestión y un enlace en el que pone con letras grandes "ENTRAR" y... poco más. Personalmente y aunque en mis comienzos la usaba en mis webs, hoy en día no me gusta nada ese tipo de portada o página de presentación.

Los motivos son diversos. Por un lado la apariencia de esas páginas no suele tener mucho que ver con las que encontramos luego en el interior de la web, perdiendo coherencia con el resto de páginas. Por otro lado, hoy pienso que el visitante quiere encontrar lo que busca de un modo rápido y ese tipo de página de presentación no es más que un clic más que tiene que hacer el visitante para acceder a esa información que busca.

De modo que, a pesar de que hemos construido una index.html a modo de presentación, vamos a eliminarla y a colocar en su lugar una página copiada de nuestra plantilla. De este modo la apariencia será la misma que la de las demás páginas quedando el conjunto más coherente. Desde el menú horizontal de arriba de esa página el visitante puede ya acceder a las distintas secciones de la web. En la parte central, donde se coloca el texto o contenidos, pondremos una breve descripción de lo que el visitante puede encontrar en la web. Os parece bien?

Si, si, ya se que después de lo que hemos trabajado en la index en estas lecciones da un poco de pena eliminarla así, tan friamente, je je, pero recuerda que al construirla has aprendido conceptos básicos que nos servirán para seguir aprendiendo, no creo que haya sido en vano.

Así que para crear la nueva index.html abre tu Html Kit, y abre la plantilla con él. Ahora lo que haremos es irnos al menú de arriba del Html Kit y pulsar sobre Archivo + Salvar Como.

En la ventana que se abre ponedle de nombre index.html y pusa en Guardar. Te avisa entonces de que ya existe un documento con ese nombre y te pregunta si quieres sobreescribirlo. Dile que sí y el index antiguo dejará de existir. En su lugar tendremos un index.html cuyo contenido es idéntico al de la plantilla.

Personalizando el index.htmlAunque parezca un poco pesado, realmente esto nos sirve para seguir practicando de

modo que no te quejes demasiado, je je je. Para mí sería más fácil dártelo todo ya terminado, pero entonces no tendría sentido esto de las lecciones.

El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar el menú horizontal de arriba igual que hicimos con las páginas de las secciones. En este caso no nos vale el mismo código que en aquellas páginas, pues esas estaban dentro de una carpeta mientras que index.html está fuera. Por eso, las rutas no son exáctamente las mismas y tenemos que ponérselas correctamente. Es fácil, ya veras.

Una vez tengas abierta la página index.html con el Html Kit, ve a ver su código, concretamente la parte del menú superior horizontal. Ahora mismo es como este:


<ul>

<li><a href="#">Sección 1</a></li>128



</ul>

</div>

Hay que añadir los enlaces para el resto de secciones, como hicimos antes. Quedaría así:


<ul>


<li><a href="#">Historia</a></li>

<li><a href="#">Discografía</a></li>

<li><a href="#">Conciertos</a></li>

<li><a href="#">Descargas</a></li>

<li><a href="#">Foro</a></li>

<li><a href="#">Souvenirs</a></li>

</ul>

</div>

Y ahora le ponemos las rutas correctas. Para la portada es fácil, como estamos en la portada, para volver a ella otra vez solo es necesario abrir su archivo, por lo que la ruta sería "index.html" (recuerda que el archivo de la portada es index.html, no portada.html).

Para el resto de páginas de ese menú tendríamos que, para llegar desde la portada hasta cada una de ellas hay que, primero entrar en la carpeta correspondiente y después abrir el archivo de la página, por lo que las rutas al final quedan todas de este modo:


<ul>

<li><a href="index.html">Portada</a></li>

<li><a href="historia/historia.html">Historia</a></li>

<li><a href="discografia/discografia.html">Discografía</a></li>

<li><a href="conciertos/conciertos.html">Conciertos</a></li>

<li><a href="descargas/descargas.html">Descargas</a></li>

<li><a href="foro/foro.html">Foro</a></li>

<li><a href="souvenirs/souvenirs.html">Souvenirs</a></li>

</ul>

</div>

Estás de acuerdo con esto? Pero recuerda, el código de las listas deben tener todas las líneas seguidas, de modo que lo pondríamos de este modo (eliminando espacios y saltos de líneas):


<ul><li><a href="index.html">Portada</a></li><li><a href="historia/historia.html">Historia</a></li>

129

<li><a href="discografia/discografia.html">Discografía</a></li><li><a href="conciertos/conciertos.h

tml">Conciertos</a></li><li><a href="descargas/descargas.html">Descargas</a></li><li><a href="foro/

foro.html">Foro</a></li><li><a href="souvenirs/souvenirs.html">Souvenirs</a></li></ul>

</div>

Bien. Pues pon en la index.html ese código y ya lo puedes guardar. Si le haces vista previa ahora al index.html verás como aparece algo descuadrado. Ya sabes que és por no tener a penas contenido, de modo que aprovechando que estamos liados con ese archivo, escríbele un par de párrafos más o menos largos, ponle un <title> decente, como por ejemplo:

<title>Página Oficial de la banda</title>

y ya puestos, escríbele también algún título entre <h1> y </h1>, donde pusimos las equis, vale? Por ejemplo esto:

<h1>Bienvenidos a la página oficial de la banda</h1>

Ahora sí debe verse bien la vista previa.Ahora en teoría se puede navegar perfectamente por toda la web que tenemos desde el

menú horizontal superior y desde todas las páginas de la web de ejemplo. Por cierto, como hemos eliminado la antigua index.html, puedes borrar de la carpeta objetos todos los archivos que usaba el index, como por ejemplo la sonrisa y el buzón de correo. Así evitas ir acumulando archivos que al fin y al cabo no usas en la web y ya no nos hacen falta. Si no sabes borrar carpetas o archivos con el Html Kit aquí tienes unas pistas.

El siguiente paso es hacer funcionar también el menú lateral de la izquierda y es ese el paso que daremos a continuación. Como poco te mereces ya un diploma!

Completando el menú lateral izquierdoEn primer lugar tendríamos que decidir qué secciones van a tener o no ese menú lateral

izquierdo que ahora mismo poseen todas las páginas de nuestra web. Si recuerdas el esquema que hicimos al principio, habiamos decidido crear todas estas secciones y subsecciones:

130

http://www.comocreartuweb.com/html-kit-tutorial/tutorial-html-kit-dudas-resueltas-001-eliminar-carpeta.html

Si aún mantenemos esa estructura, vemos que desde el menú horizontal se puede acceder a la portada y a las páginas principales de cada sección. Una vez en ellas, haremos que desde el menú lateral izquierdo se pueda acceder a las subsecciones. La portada no va a tener subsecciones y por tanto no tiene sentido mantener en ella ese menú lateral. Lo mismo ocurre con la sección Foro, no va a tener subsecciones, de modo que eliminaremos ese menú lateral de ambas, tanto de la portada (index.html) como del foro (foro.html).

Para eliminar el menú, basta con borrar las líneas de código que lo definen en los archivos index.html y foro.html. Recuerda que el código a eliminar es 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><li><a href="#">Enlace 4</a></li></ul>

</div>

Las páginas portada y foro no se van a deformar por eliminar esa parte de código. Tan solo no se verá el menú y el espacio que ocupaba pasa a formar parte del contenido central. En el futuro, si cambiamos de idea y queremos colocar de nuevo el menú, bastará con colocar de nuevo esas líneas de código, de modo que ya lo puedes eliminar sin miedo de ambas páginas, oki?

Si lo deseas, elimina solo el código que te acabo de decir arriba, pero deja las dos líneas de comentarios que habíamos puesto hace unas páginas. Me refiero a estas dos:





De ese modo, si un día quieres volver a poner el menú sabrás dónde iba, vale? Adelante! Elimina esos códigos y seguimos pa´lante!

131

Menú lateral de Historia

El método es muy similar al anterior, al que hemos usado para crear el menú horizontal de la parte de arriba, pero en este caso no vamos a partir de la plantilla sino que vamos a partir de la página que ya existe en cada una de las carpetas de sección. Es decir, para generar las páginas de la sección historia, abriremos el archivo historia.html y la guardaremos con los nombres de las subsecciones.

Pero antes de hacer eso arreglaremos el menú lateral de esa página. De ese modo, cuando guardemos con el nombre del resto de página de esa sección ya se guardan con el menú lateral terminado y no será necesario acudir al EditPad Lite para reemplazar esa parte de código. Entiendes? Qué bien! je je.

Empezaremos entonces abriendo el archivo historia.html y mirando el código que por ahora tenemos para ese menú lateral. Ese código es 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><li><a href="#">Enlace 4</a></li></ul>

</div>

Bien, qué cosas hay que cambiar aquí? Para empezar le vamos a poner el título de la sección entre <h1> y </h1>. Lo que escribamos ahí aparecerá en la parte alta del menú lateral. Pondremos entonces "Historia" y quedaría así esa línea: <h1>Historia</h1>

A continuación escribimos los anchor text de cada enlace. Aunque ya lo he dicho, quizás se te haya olvidado. El anchor text es el texto que aparece visible en el enlace, es decir, las palabras sobre las que hay que pulsar para ir a la página enlazada. Como las subsecciones de la sección historia son Origen, Miembros, Formación Actual y Album de Fotos, pondremos esos textos como Anchor Text. Quedaría así por ahora el código del menú:

<div id="menu">

<h1>Historia</h1>

<ul><li><a href="#">Origen</a></li><li><a href="#">Miembros</a></li><li><a href="#">

Formación Actual</a></li><li><a href="#">Album de Fotos</a></li></ul>

</div>

Ahora solo queda colocar bien las rutas. Pero claro, aún no existen los archivos de las subsecciones, verdad? Así que no sabemos qué poner en la ruta de cada uno... No pasa nada. Decidimos yá cómo se van a llamar esos archivos y como sabemos que los vamos a guardar en la carpeta historia, tenemos todos los datos que nos hacen falta para escribir las rutas correctamente. Veamos.

Si el archivo de la subsección Origen lo vamos a llamar origen.html, y sabemos que lo vamos a guardar (cuando lo generemos) dentro de la carpeta historia, sabremos que para ir desde cualquier página de la sección historia a la página origen.html solo es necesario abrir dicho archivo. No es necesario salir ni entrar en ninguna carpeta, por lo que la ruta será simplemente el nombre del archivo, es decir, "origen.html".

132

Lo mismo va a ocurrir con el resto de enlaces de las demás subsecciones, no es así? Entonces es fácil adivinar que el código completo quedaría de este modo:

<div id="menu">

<h1>Historia</h1>

<ul><li><a href="origen.html">Origen</a></li><li><a href="miembros.html">Miembros</a>

</li><li><a href="formacion.html">Formación Actual</a></li><li><a href="album.html">

Album de Fotos</a></li></ul>

</div>

Correcto? Pues listo, ya podemos escribir ese código en lugar del antiguo que había en el archivo historia.html. Una vez hecho, guarda la página historia.html (esta vez con su mismo nombre).

Generando el resto de subsecciones de HistoriaEl resto es bien fácil, vuelve a abrir la página historia.html y ahora vas arriba, al menú del

Html Kit y pulsando sobre Archivo + Salvar Como le vas dando los nombres de los archivos de las subsecciones uno a uno. Es decir, la guardas como origen.html, miembros.html, formacion.html y album.html y ya tenemos toda esa sección completa.

Solo nos faltaría ahora personalizar un poco cada una de esas subsecciones. Cómo? Pues igual que hicimos con las secciones. Le ponemos el título correspondiente en el <title>, cambiamos el contenido, los párrafos para hablar de lo que toque en cada subsección, etc, etc. De lo contrario, cuando naveguemos por la web no nos vamos a dar cuenta de dónde estamos, pues todo el contenido será copia de historia.html. De acuerdo?

El resto es cosa tuya. No creo que sea necesario que te explique paso a paso cómo actuar con el resto de secciones, no? Ya sabes, ahora abres la página de la siguiente sección, discografia, arreglas el menú lateral en ella, la guardas y luego generas el resto de páginas de las subsecciones de discografia, que son maquetas.html, cd1.html, cd2.html y cd3.html. Luego le personalizar los títulos, les pones algo de texto personalizado, algo que hable de esa sección y listo, pasas a la sección siguiente. Si, es una lata, lo se, je je je.

Cuando termines con todo eso tendrás una web completamente lista para ser publicada en internet. Con solo cambiar los títulos, los párrafos con la información que te de la gana, añadir o quitar secciones o subsecciones, modificar colores de fondo en la hoja de estilo, etc, etc, tendrás tu propia página web. Qué me dices? Y todo sin costarte un chavo! No ha sido genial? Ja ja ja ja.

Te dejo aquí un enlace de cómo ha quedado esta web de ejemplo hasta el momento.

Claro que aún queda mucho que aprender y cosas que aplicar a este ejemplo, como aprender a insertar imágenes en la parte central de la web, donde va el contenido, saber colocarlas a la izquierda o a la derecha, que el texto las rodee o no, hacer que los enlaces se marquen indicando en qué página está el visitante, mejorar cosas para aparecer de los primeros en Google, aprender a insertar publicidad para costear un hosting y dominio... y cientos de cosas más, pero lo básico ya lo tienes.

Todo eso y mucho más lo encontrarás en las lecciones siguientes de CómoCrearTuWeb. Por cierto, si te sientes en deuda con CCTW te agradeceríamos que cuando cuelgues tu nueva web en internet coloques un enlace hacia nosotros y por qué no, que recomiendes estas lecciones a tus amigos. Eso nos ayudará a crecer y repercutirá sin duda en la mejora de esta página. Desde ya mis más sinceros agradecimientos por tu apoyo.

En las próximas lecciones (tengo que terminarlas primero) veremos como mejorar aún más esta web de ejemplo. Mientras tanto haz tus propios experimentos, retoca todo lo que puedas para ir practicando y usa el foro para resolver tus dudas y ayudar a los colegas rezagados!

133

http://www.comocreartuweb.com/html-kit-tutorial/web-ejemplo-cctw-001/index.html