Taller diseño web 1 El ejercicio trata de llevar a cabo el diseño de una pequeña web con el objetivo de reforzar todo lo visto hasta el momento. Vamos por partes: En primer lugar muy importante a la hora de diseñar una web es tener claro cual va a ser su estructura, tanto a nivel de organización de su información, como las paginas html que necesitaremos y los vinculos entre ellas. Yo os he adelantado este trabajo y aquí teneis como yo lo he organizado, aunque vosotros siempre podríais decidir organizarlo de otro modo. Si os fijais en el raiz de mi web (la carpeta marcos), es donde yo he organizado toda mi web. He colocado en la raiz: El archivo index.html será el primer archivo que se cargará al entrar a la web, en el he descrito los marcos que voy a utilizar. He definido 2 columnas (20% y 80%) y la segunda columna la he dividido a su vez en 2 franjas horizontales (20% y 80%). Al marco de la 1ª columna le llamaré menuizqu (recuerda parametro NAME= menuizqu ), al marco de la 1ª fila horizontal le llamaré menuarri y al marco de la 2ª fila horizontal le llamaremos contenido.
El archivo menuizqu.html tendrá el contenido que mostraré en la barra lateral izquierda, es decir será el archivo html que cargaré en el marco llamado menuizqu. Como veis en la imagen este archivo esta compuesto por un cabecera, una linea horizontal y una tabla de 1x4. En la tabla de arriba a abajo he colocado sendas imagenes en las celdas (fran.jpg, guille.jpg, oscar.jpg, salva.jpg, profe.jpg). Fíjate que el fondo de la página (Parámetro BGCOLOR= color de la etique BODY) es azul claro (su código en hexadecimal es c1f8fd. El archivo menuarri.html tendrá el contenido que mostraré en el primer acceso a la web en el marco de arriba (menuarri). Digo primer acceso porque una vez yo pulse en el menú de la izquierda las diferentes imagenes (que simulan botones), automaticamente en este marco (menuarri) se deberán cargar los menús correspondientes a esta persona, me explico: cuando yo pulse sobre el botón deberá cargarse en el marco menuarri el archivo html menuafran.html que colocaremos en la carpeta fran. Por tanto en cada una de las imagenes de menuizqu.html tengo que colocar un hipervinculo a su menú correspondiente. De igual modo que cuando se pulse la imagen del profe deberá menuaprofe.html (que tendré dentro de la carpeta profe) cargarse el archivo Fíjate en la imagen anterior, estos son los diferentes archivos que tendrás que crear en la carpeta con tu nombre. De menuaxxxx.html (menu de arriba de xxxx) ya hemos hablado antes. Los otros archivos corresponden a las páginas que cargaré cuando pulse en los diferentes hipervínculos del menú de arriba correspondiente. El marco destino de estas páginas sera el nombrado como contenido
Por ejemplo cuando pulse sobre el hipervinculo Mi chica@ favorit@ deberá cargarse la página michi.html (en el marco nombrado como contenido) que en el caso del profe es algo como esto: Fíjate como he formateado este página, he utilizado una tabla Cuando pulse sobre Mi ídolo, la pagina a cargar en el marco contenido es miidolo.html
En este caso lo único que he puesto es una marquesina, te inserto el código para que me averigues como funciona esta etiqueta, y sus diferentes parametros: <BODY bgcolor="f3ffb1"> <MARQUEE align="middle" direction="right" bgcolor = "#FFFFFF" width = "75%" height="40%" loop="infinite" scrolldelay="0" scrollamount="10" behavior="alternate"> No tengo ídolos. Y tú? </MARQUEE> </BODY> Cuando pulse sobre Mi pueblo mi ciudad, la pagina a cargar en el marco contenido es mipueblo.html A parte de utilizar tablas para formatear la página, he utilizado un mapeo de la imagen del toro para saltar al la pagina http://www.bousalcarrer.com Utiliza estas etiquetas en tu web
Cuando pulse sobre Mi equipo, la pagina a cargar en el marco contenido es miequipo.html En esta página a parte de lo que se ve en esta imagen, he añadido información textual debajo situada en la misma página. He dejado el contenido de esta información en la carpeta archivos de la estructura, el nombre del archivo es hisnules.txt. Coge el contenido del archivo y lo pegas en la página, corrige los acentos y demás caracteres extraños que te salgan al visualizarlo como html. En esta página tendrás que utilizar anclas, pues pretendo que pulsando en el menú que hay dentro de la tabla, puedas saltar a las anclas definidas en el texto. Por ejemplo, que pulsando en el hipervinculo Su inicio y desaparicion salte directamente a esta parte del
documento. O de igual modo pulsando en Actualidad salte al párrafo correspondiente dentro del texto de la página Fíjate que al final de cada apartado he añadido una imagen gif (flecha.gif), que va a permitir regresar a la parte de arriba de la página, que es precisamente donde tengo la tabla con el con los diferentes puntos. Por último he creado dos hipervinculos (txt odt) a sendos archivos (hisnules.txt y hisnules.odt) de la carpeta archivos, para que el usuario pueda descargaselos si quiere. Notas: El archivo contenido.html de la raiz de nuestra web (en mi caso la carpeta marcos), es el archivo que cargaré en el marco contenido la primera vez que acceda a la web, ya lo habeis visto en la primera imagen de este documento, simplemente muestra la frase Contenido inicial y luego situa una barra horizontal <hr size= 15 width= 95% color="#ff0000">, modifica los parametros y comprueba como afectan a la linea. Comentar que todas las imagenes las he situado en la carpeta imagenes, haced vosotros lo mismo Y muy importante, tened en cuenta siempre a la hora de referenciar los diferentes archivos, que es mejor hacerlo como rutas relativas, dar las rutas partiendo siempre de la raiz de vuestra web. Por ejemplo para el diseño que yo he hecho la carpeta marcos es mi raiz, mi origen. Ahora si yo dentro de un archivo html que está en mi raiz, tengo que referenciar una imagen que está en la carpeta imágenes lo haré del siguiente modo:./imagenes/imagen.jpg sin embargo si mi archivo html estuviese en la carpeta marcos/profe, para referenciar esa misma imagen debería indicar la siguiente ruta../imagenes/imagen.jpg (subo un nivel, es decir de profe a marcos y ahora bajo a la carpeta imagenes) Recuerda el punto. hace referencia al directorio en el que te encuentras, y los dos puntos.. hacen referencia al directorio padre de donde te encuentras, a efectos prácticos consiste en subir un nivel.