Paso 6 - Contenido gráfico
La apariencia de un Web es uno de los aspectos más importantes en la creación de este. Por ello dedicamos un largo capítulo 5 a él. Ahora es el momento de poner en práctica de nuestros conocimientos. A la hora de insertar gráficos tenemos dos posibilidades:
-
Crear nuestros propios gráficos usando un programa de dibujo vectorial y/o un programa de retoque fotográfico. Esta es, sin duda, la mejor de las dos opciones, pero también es la que lleva más tiempo así como varios programas y amplios conocimientos de su uso por parte del creador de los gráficos. Por esta razón es común recurrir a la segunda de las posibilidades.
-
Crear nuestros propios gráficos usando un programa de dibujo vectorial y/o un programa de retoque fotográfico. Esta es, sin duda, la mejor de las dos opciones, pero también es la que lleva más tiempo así como varios programas y amplios conocimientos de su uso por parte del creador de los gráficos. Por esta razón es común recurrir a la segunda de las posibilidades.
En nuestro caso vamos a optar por la segunda opción. Hemos usado algunos gráficos del clipart que acompaña a Microsoft FrontPage, en concreto al tema Travel.Posteriormente hemos retocado alguno de estos gráficos con Paint Shop Pro(podríamos haber usado cualquier otro programa de retoque fotográfico, pero hemos elegido este por ser shareware). Usando este programa hemos creado una especie de botones (tranque servirán como enlace a las distintas páginas de la Web. Ahora ya podemos escribir el código usado:
<TABLE ALIGN="center">
<TR>
<TD><IMG SRC="img/logo.gif" WIDTH=90 HEIGHT=99 BORDER=0 ALT="[LOGO]"></TD>
<TD><IMG SRC="img/losalpes.gif" WIDTH=440 HEIGHT=99 BORDER=0 ALT="LOS ALPES - Agencia de Viajes"></TD>
</TR>
</TABLE>
</CENTER>
<TABLE CELLPADDING="10">
<TR>
<TD VALIGN="top">
<!-- Opciones -->
<A HREF="medida.htm"><IMG SRC="img/tranvha1.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Viajes a su medida"></A>
<A HREF="mes.htm"><IMG SRC="img/tranvha2.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="Ofertas del Mes"></A>
<A HREF="superofe.htm"><IMG SRC="img/tranvha3.jpg" WIDTH=136 HEIGHT=48 BORDER=0 ALT="La superOFERTA"></A>
</TD>
<TD>
<!-- texto -->
<P><FONT SIZE="+2">L</FONT>a agencia de viajes Los Alpes goza de un gran prestigio en el mundo de...
|
|
También podíamos usar una tabla de tres filas dentro de esta celda para tener un mayor control sobre la disposición de los botones, poniendo cada uno en una de las filas. Dejamos la realización de esta mejora como ejercicio para el lector. |
Paso 7 - Cambiar el fondo y color del texto
Hemos elegido usar una imagen de fondo, y como esta imagen es oscura debemos además cambiar el color del texto y los enlaces. Todo ello lo hacemos con los atributos de la etiqueta BODY:
<BODY LINK="#FED354" VLINK="#EDB301" ALINK="#FFFF00" BGCOLOR="#335142" TEXT="#71AC84" BACKGROUND="img/tratilea.jpg">
|
Este código deberemos usarlo en todas y cada una de las páginas. En él hemos usado el atributo BGCOLOR para poner un color de fondo similar al color de la imagen, de esta forma si hay algún problema con la imagen el color de fondo especificado se usará en su lugar y la página no perderá mucho.
Paso 8 - Realización del resto de las páginas
Lo que queda es ya muy similar a lo que llevamos hecho. Usando la plantilla creada en el paso 4 y ciertas imágenes (aunque invitamos al lector a crear las suyas) no nos será difícil. Para que sea más fácil ahí van algunas pistas:
-
En las figuras 6.33, 6.34 y 6.35 hemos ido mostrando el resultado final de estas páginas.
-
Para la página mes.htm hemos creado 5 nuevos botones para cada uno de los viajes y los hemos situado en la columna de la derecha de la segunda tabla, tal y como habíamos planeado.
-
Igualmente hemos creado botones para la página medida.htm.
-
El último comentario es que para el archivo SuperOFE.htm al final suprimimos la segunda de las tablas por ser innecesaria. En esta página usamos la tabla creada en la práctica 3.
Paso 9 - Retoques, pruebas, revisión y mantenimiento
El último paso es el más largo de todos y consta de varias tareas. En primer lugar se pueden retocar las imágenes para que queden mejor y/o ocupen menos se puede aumentar el tamaño de la primera letra de cada párrafo (como hemos hecho nosotros) y en definitiva cualquier mejora del aspecto de las páginas. Después hay que hacer pruebas de la página. Son especialmente importantes las pruebas con otros navegadores, con varias resoluciones de pantalla (600x480 y 800x600 especialmente) y con distintas cantidades de colores, en concreto debemos ver si con 256 colores los gráficos todavía se ven bien.
Si este fuese un sitio Web real deberíamos además deberíamos realizar continuas revisiones de las páginas y mantener un contenido actualizado constantemente.
Una vez hemos creado el Web completo podemos tomarnos un descanso y enseñar las páginas a nuestros conocidos. Sin duda es como para estar orgullosos de lo que ya somos capaces de hacer. De ahora en adelante aprenderemos los aspectos más avanzados, y a la vez más interesantes, del lenguaje HTML.
