Es muy probable que las personas acostumbradas a la flexibilidad de QuarkXPress o a PageMaker sufran un choque cultural cuando aprendan cómo se diseñan las páginas web. Esto se debe a que las marcas de alineación del formato HTML sólo permiten izquierda, derecha o centrado. Es posible obtener una alineación más precisa por medio de hojas de estilo en cascada (CSS), pero a cambio hay que pagar un alto precio, las capas CSS no son compatibles con las versiones anteriores a la 4.0 de los navegadores más populares, además Netscape Navigator y Microsoft Internet Explorer soportan CSS de distintos modos, por lo que si emplea CSS tendrá que escribir el código de forma adecuada para cada uno de los navegadores.

Pero no desespere, las tablas HTML vienen en su ayuda. Las tablas son la segunda opción favorita después de las CSS cuando se desea alinear elementos con precisión. Además son mucho más compatibles que las CSS, funcionando igual en diversas plataformas y con las versiones 2 y posteriores de los navegadores.

Pero aunque las tablas permiten realizar alineaciones precisas, no son fáciles de crear ni intuitivas. Afortunadamente, muchos de los editores HTML de tipo WYSIWYG, como Dreamweaver de Macromedia y GoLive de Adobe permiten crear tablas de una forma mucho más sencilla que si se teclea el código.

El nuevo planteamiento de Dreamweaver

Dreamweaver 2 destaca por su planteamiento innovador del alineamiento. Es el primer editor HTML que incorpora trazado. Trazar una imagen, como Dreamweaver lo llama, es emplear una imagen como referencia para el diseño de una página web. Por ejemplo, si quiere colocar todos sus enlaces alrededor de medio círculo, se puede dibujar este medio círculo en un editor de imágenes; guardarlo como GIF, JPEG o PNG e incorporar dicha imagen en Dreamweaver como una imagen de trazado. Una vez que se tiene la imagen en la página, se puede emplear para colocar los enlaces alrededor de la línea marcada por la imagen. El programa también permite cambiar la transparencia de la imagen, de forma que puede controlarse la cantidad de dibujo que se ve a través de ella, además de permitir cambiar su posición y esconderla de forma que cuando se publique la página, aparezcan los enlaces distribuidos en medio círculo pero sin mostrar la imagen.

Aprender con el ejemplo

Este artículo muestra la forma de utilizar un diseño de página creado en Adobe Photoshop como una imagen de trazado en Dreamweaver (vea “La magia del trazado de imágenes en Dreamweaver 2”). Dreamweaver emplea capas CSS para crear el diseño del ejemplo, pero como se desea que todos los visitantes puedan ver la página, se ha realizado un trabajo adicional convirtiendo capas en tablas. El programa permite hacer esto casi sin esfuerzo y proporcionando lo mejor de ambos mundos: la precisión de las capas y la compatibilidad de las tablas.

Qué hace falta

--------------------

- Macromedia Dreamweaver 2

- Un editor de imágenes (por ejemplo, Adobe Photoshop)

- Navegador Web

La magia del trazado de imágenes en Dreamweaver 2

--------------------------------------------------------------------------

Dreamweaver 2 simplifica la creación de diseños artísticos en sus páginas web. Esto se debe a que tiene una nueva característica, el trazado de imagen, que le permite emplear un dibujo creado con Macromedia Fireworks, Adobe Photoshop o cualquier otro programa de edición de imágenes como guía para la distribución de elementos. Los siguientes pasos muestran cómo emplear una imagen de trazado para distribuir los elementos de la página. Para preparar la base de este diseño, cree un dibujo en un editor de imágenes y guárdelo en formato GIF, JPEG o PNG.

1. Aplicar una imagen de trazado

A- Abra un nuevo documento sin título en Dreamweaver. Guarde el documento. Seleccione Page Properties en el menú Modify. Haga clic en el botón Choose situado al lado del cuadro Tracing Image. Busque la imagen que acaba de crear, selecciónela y pulse en OK.

B- La imagen de trazado aparece en el fondo de su página. Fíjese en que puede modificar diversos parámetros de la imagen mediante la opción Tracing Image en el menú View. El botón Show muestra y oculta la capa de la imagen. Este es útil si desea ver el color o imagen de fondo. La opción Align With Selection le permite alinear la esquina superior izquierda de la imagen con la esquina superior izquierda del objeto seleccionado. El parámetro Adjust Position se emplea para ajustar la posición exacta de la imagen de trazado con coordenadas X e Y. Por omisión, la imagen se sitúa en la página con unos márgenes de 8 por 11 puntos. El botón Reset Position le permite volver a colocar en esta posición una imagen si la ha movido y decide que estaba mejor en su posición original.

2. Cree capas

Ahora que tiene la imagen de trazado en su sitio, puede empezar el diseño de la página con capas. En este momento es cuando la auténtica potencia del trazado de imágenes y de las capas empieza a verse.

Las capas posibilitan la colocación absoluta de los objetos en la página. Puede insertar imágenes y texto dentro de capas y moverlos por la página con la sencilla operación de arrastrar la capa. Estos son los pasos para trabajar con las capas en Dreamweaver:

A- Haga clic en el botón Draw Layer en la paleta de objetos.

B- Dibuje una capa alrededor de cada área en la que desea colocar una imagen (En este ejemplo se ha empezado con la caja superior).

TRUCO

Al dibujar las capas en la página, aparecen pequeños iconos amarillos en la esquina superior izquierda de la pantalla. Estos iconos representan las capas que se han añadido. Si prefiere esconderlos, elija Invisible Elements en el menú View.

C- Haga clic dentro de una capa y, a continuación, haga clic en el botón Insert Image de la paleta de objetos. Navegue hasta la imagen que quiere insertar y haga clic en OK. Si quiere añadir texto HTML a la capa sólo tiene que hacer clic dentro de ésta y empezar a teclear.

TRUCO

Si quiere mover capas alrededor de la página, asegúrese de que las agarra por el asa (el pequeño cuadro situado en la esquina superior izquierda de la capa). Si hace clic y arrastra desde la mitad de la capa intentando moverla, lo más probable es que elimine el contenido de dicha capa.

3. Convertir las capas a tabla

Las capas son útiles pero no funcionan con las versiones inferiores a la 4.0 de los navegadores. No se preocupe, Dreamweaver tiene una interesante característica que le asegura la compatibilidad de sus páginas web con versiones anteriores de navegadores Web. Con unos sencillos clic puede convertir un diseño creado con capas en una tabla (vea “Crear la tabla”). Las versiones 2.0 y posteriores de los navegadores pueden manejar dichas tablas.

Lo único que tiene que hacer es seleccionar Convert en el menú File y, a continuación, 3.0 Browser Compatible. Por último, elija Layers To Table. Esto es todo. Dreamweaver crea automáticamente un nuevo documento y convierte las capas en tablas. Esto le permite guardar las versiones de capas y tablas en documentos separados.

LYNDA WEINMAN (www.lynda.com) ha escrito diversos libros sobre el diseño de páginas web.