Webmasters_UI#6.

qxd

5/7/01

2:22 PM

Page 72

EXPERTOS

WEBMASTERS

CON EL PROGRAMA DE ADOBE, ES MS FCIL SER WEBMASTER

Adobe GoLive a fondo

oLive es un completo editor HTML, el cual, debido a las facilidades WSIWYG, nos permite crear sitios profesionales sin ser webmasters expertos. Con las ventanas y objetos podemos escribir prcticamente toda la pgina, sin haber visto nunca el cdigo fuente. En muchos aspectos, es muy parecido a Macromedia Dreamweaver.

Usando la interfase grfica, es posible crear una pgina con ROLLOVERS y CAPAS ANIMADAS en slo algunos pasos, con DHTML. La CUADRCULA es una utilidad simple pero muy til. Adems, el programa permite incluir pelculas de Flash muy fcilmente; y con COMPONENTE, ingresamos una pgina como template.
10 pixeles por cada celda, podemos ajustar los elementos del documento con una exactitud y facilidad sorprendentes. El ttulo de nuestra pgina ser una imagen. Hacemos doble clic sobre [Imagen], en [Objetos], e ingresamos el origen. La imagen se ubicar en (0, 0) de la cuadrcula, aunque podemos arrastrarla y mirar las posiciones en la ventana Transformacin. nes rollovers con enlaces, creadas a travs de [Objetos/Inteligentes/Imagen de botn]. Esto resulta muy fcil, ya que para ver el origen de la imagen principal slo debemos hacer clic sobre el pequeo cono de la carpeta, y seleccionar la imagen (en nuestro caso, botones.gif). Luego, dentro de URL ingresamos el link. A continuacin, hacemos clic sobre [Encima] (la otra imagen), especificamos la ubicacin de botoneson.gif (de 89 por 31) y guardamos el documento como barra.html. Ahora, para realizar algo as como un template no editable directamente, crearemos un componente haciendo doble clic sobre el segundo cono, dentro de [Objetos/Inteligentes], y arrastraremos el objeto hasta la posicin (0, 100).

A empezar!
Luego de abrir un nuevo documento conviene tener desplegado [Conmutar seccin de encabezado], en [Composicin]. Veremos dos smbolos de meta tags y uno de ttulo. Hacemos clic sobre [title] e ingresamos Webmaster, en la ventana Inspector, en [Pgina/Ttulo]. Del men, solamente habilitaremos la opcin [Color de fondo], que ser blanco.

Cuadrcula y ttulo
Para empezar, iremos a la ventana Objetos y haremos doble clic sobre [Cuadrcula de composicin] (en realidad GoLive genera tablas inteligentes en el cdigo, con precisin de pixeles). Este elemento es muy til, ya que configurando la cuadrcula de 500 por 300 a 10 por

Rollovers en componente
Como queremos ser buenos webmasters, debemos brindar algunos links. Vamos a crear otro documento solamente con una tabla de dos filas por una columna (89 pixeles de ancho), ya que nuestras imgenes tienen esa dimensin. Dentro de cada celda, pondremos imge-

Creado el documento nuevo, incluimos en cada celda de la tabla dos links con rollovers. Insertaremos el archivo como [Componente].

Agregar un objeto Flash es tan fcil como en Dreamweaver; todo se puede editar desde las ventanas.

72

u s e r s . t e c t i m e s . c o m

Webmasters_UI#6.qxd

5/7/01

2:22 PM

Page 73

Este programa de Adobe nos permite armar una atractiva pgina sin saber nada de HTML. Incluso, sin darnos cuenta, escribimos el cdigo DHTML para animar linealmente un cuadro flotante.
Agregando Flash
Actualmente, la mayora de los sitios tienen objetos Flash, por eso nos sumamos a la tendencia. Si no se nos ocurre nada, o no tenemos ninguno, podemos inspeccionar la seccin Developers de esta revista. Pero en este caso trabajaremos con otro movie clip. Para empezar, hacemos doble clic sobre [SWF], seleccionamos el objeto y luego ingresamos el archivo en [Inspector/ Bsicos]. Nuestro archivo de 150 por 190 estar en (140, 50). Generalmente no hace falta tocar nada ms, pero en este caso haremos una excepcin, a modo de ejemplo. Vamos a abrir la lengua [SWF] y a deshabilitar [Reproduccin automtica], porque as lo requiere, en nuestro ejemplo, el movie clip.

Men de URL
Tambin es til ir viendo los resultados en [Vista previa], o aprender el cdigo con [Origen]. Para ser exquisitos, vamos a agregar un men emergente de URL, en [Objetos/Inteligentes], con un cono ms que descriptivo. Si no lo conocen, es una combinacin entre JavaScript y una lista de formulario, para usarlo como barra de navegacin, que, adems, es muy liviano para el cdigo. Luego de hacer doble clic y ubicarlo en (180, 250) (para nuestro ejemplo), en [Inspector], cambiamos la etiqueta por Opciones y trabajamos con dos vnculos, Botones y Contacto. El URL del segundo puede ser, adems de documentos, algo como mailto:dpark@tec times.com?subject=Sos groso.

Capas animadas
Vamos a conocer las facilidades de GoLive y usar capas dinmicas. La idea es que una capa con una imagen dentro se mueva por el documento en forma lineal; por eso dejaremos la propiedad en [Inspector]. En [Objetos/Bsicos] hacemos doble clic sobre [Cuadro flotante]. All habr que reubicar el cuadro en (350, 50), y abrir el Editor de lnea cronolgica DHTML. Con la tecla <CTRL> apretada, arrastramos el mouse hasta el cuadro 20, seleccionamos esta capa y lo movemos hasta (350, 200). En las opciones, habilitamos Bucle y Palndromo. Finalmente, vamos a [Vista previa] y apreciamos el sitio que creamos juntos. Diego PARK dpark@tectimes.com

El men de URL combina JavaScript y una lista para ofrecer mayor navegabilidad en los sitios.

Con el Editor de lnea cronolgica, podemos animar a Duke, de Java, a lo largo de la pgina.

u s e r s . t e c t i m e s . c o m

73