MANUALES

Macromedia Dreamweaver

5. Tablas, capas y puntos de fijación

Tablas

Las tablas sirven para organizar datos e imágenes en un archivo HTML.

Consisten de tres elementos básicos: filas, columnas y celdas (que surgen de la intersección de una fila con columna). Para crear una tabla debemos hacer clic sobre el botón Insertar tabla (Insert Table) de la paleta de Objetos.

Se abrirá un cuadro de diálogo que nos preguntará cuántas filas y cuantas columnas tendrá nuestra tabla, qué ancho tendrá y si tendrá borde.

Imagen 1

El Cellpading: especifica la cantidad de pixels entre la celda y el borde de la celda.

El Cellspacing: especifica la cantidad de pixels entre celda y celda.

Las tablas se hacen en principio con las medidas en porcentaje pero si luego queremos que el usuario al achicar su navegador, éste no intente redimensionar la tabla al nuevo tamaño, lo que debemos hacer es convertir las medidas de porcentaje a pixels. Esto se hace con la tabla seleccionada desde el inspector de propiedades. Hay un icono con la sigla Px que permite convertir las medidas de tabla a pixels.

Podemos importar en Dreamweaver como una tabla, datos creados y con otra aplicación como Microsoft Excel. Para ello debemos hacer click sobre el botón Insertar datos tabulados (Insert tabular data) de la paleta de objetos. Se abrirá un cuadro de diálogo que nos pedirá que le indiquemos la ubicación del archivo. En el campo Delimitador debemos indicarle el tipo de delimitador con que fue guardado el archivo que estamos importando (coma, punto y coma, etc.). Luego debemos ingresar un ancho de tabla:
Ajustar a los datos (Fit to data): Para que adopte el ancho de acuerdo al valor mas largo de nuestro archivo.
Fijar (Set) : Para fijar el ancho de la tabla en porcentaje con respecto a la ventana del navegador o en pixels.
Luego seleccionamos las opciones de formato de la tabla (borde,itálica, negrita, espaciado de celdas) y oprimimos OK para importar.

Lo bueno que tiene el dreamweaver 4 es que ahora podemos diseñar las celdas directamente desde la tabla, solo tenemos que hacer click en la barra de propiedades, layout (debajo de todo) en la parte de common y vean el siguiente gráfico:

Imagen 2

Capas (Layers)

Una capa es un contenedor que se puede posicionar en cualquier parte de la página Web. Las capas o layers pueden contener texto, imágenes, formularios, plug-ins y hasta otras capas.

Las capas proporcionan al diseñador un control exacto del posicionamiento de los objetos en las páginas Web. Incluso es posible colocar capas por delante de otras y hasta animarlas.

Imagen 3

Dreamweaver puede crear dos tipos de capas:

Capas CSS: Posicionan texto en una página utilizando las etiquetas DIV y SPAN. Las especificaciones de las capas CSS son definidas por el World Wide Web Consortium's Positioning HTML Elements with Cascading Style Sheets. Este tipo de capas es soportado por los dos navegadores IE 4 y Netscape 4.

Capas Netscape: Posicionan el contenido en una página utilizando la etiqueta de Netscape LAYER y lLAHYER. Solo el Netscape soporta capas creadas de esta forma. Los navegadores anteriores mostrarán el contenido de las capas pero no lo posicionarán.

Lo que conviene hacer para no perder compatibilidad con navegadores anteriores es trabajar con capas y una vez que tenemos todos los elementos posicionados, utilizar la opción Convertir layers a menú Modificar (Modify).

Puntos de fijación (Anclas o Anchor)

Para colocar un enlace a otro punto de la misma página debemos primero colocar un ancla en el punto de destino del vínculo. Para ello, ubicamos el cursor en el punto de la página adonde deseamos crear una referencia y vamos a Insertar/Ancla con nombre (Insert/Named Anchor). Introducimos un nombre que represente esta ubicación en la página. Podemos asignar cualquier nombre, pero es recomendable escoger uno que sea fácil de recordar cuando se asigne el vínculo que navegará a esta ubicación. De esta forma se introduce un punto de fijación, representado por un pequeño icono con un ancla. Este icono no se verá luego al visualizar la página en un explorador.

Si aparece un cartel de advertencia es porque usted tiene seteado su programa para no mostrar elementos invisibles. Para mostrarlos y poder ver el ancla, deberá ir a Ver/Elementos invisibles (View/Invisible Elements).

Una vez creado el ancla podrá linkear a ella desde cualquier otro punto de la página (texto o gráfico ). Para hacer el vínculo deberemos tipear en el campo Vínculo (Link) el símbolo numeral seguido del nombre del ancla al que queremos linkear. Por ejemplo #textol.

Si desea poner un vínculo aun punto de fijación que se encuentra en otra página, lo que deberá hacer es escribir # y el nombre del ancla luego del nombre de la página adónde se encuentra dicho ancla. Por ej. : prueba.html#ancla

Páginas:
1 2 3 4 5 6 7 8 9 10