Diseño Web Dreamweaver

Tablas
Las cosas en su lugar
Como ya vimos, Dreamweaver trabaja como si fuera un procesador de texto. Al escribir texto o incorporar
imágenes lo hace formando una línea que ocupa todo el ancho de la ventana. Si la ventana cambia de tamaño,
la ubicación de los objetos cambia.
Es evidente que esta forma de trabajar no permite realizar diseños estables. Es probable que, con mucho
esfuerzo, podamos colocar imágenes y textos de determinada manera, conforme a un diseño que nos agrade.
Pero, si modificamos la medida de la ventana del navegador, ese cuidadoso diseño se desarma (ver figura
4.10).
El problema de esta forma de trabajo que inserta los objetos en una “línea de texto”, se puede sintetizar en
una pregunta: ¿Cómo hacer para ubicar las cosas donde yo quiera y no donde esté insertado el cursor?

La solución de las tablas

Recordemos que, en su origen, el html fue usado para intercambiar documentos científicos. Estos documentos
suelen tener datos ordenados en planillas similares a las que se usan en programas como MicrosoftExcel. En
este tipo de elementos está la solución para ubicar los objetos sobre la superficie de la página con mayor
libertad. Los elementos del lenguaje html denominados Tablas son objetos que contienen una o varias filas y
columnas.
Las celdas de las tablas pueden contener cualquier tipo de objetos: imágenes, texto, animaciones, botones
interactivos, otras tablas, etc.
Al hacer click sobre el botón Tablas del panel de objetos comunes se nos despliega un cuadro de diálogo
denominado Insertar tabla, en donde definimos las características de la tabla que vamos a construir.
Para entender mejor el significado de los parámetros del cuadro Insertar tabla podemos apreciar dos cosas:
- Al ser creada, la tabla presenta sus celdas de igual tamaño.
- Apenas se incorpora un elemento a una de sus celdas (imagen, texto, etc.) la misma se agranda reduciéndose
el tamaño de las otras.

Tablas fijas y porcentuales

El ancho de una tabla puede determinarse como una medida fija en píxeles o como un porcentaje del tamaño
de la ventana del navegador. La elección del sistema de medida dependerá del tipo de trabajo que realicemos.
Estos diferentes criterios de medida se usan en la medida total de la tabla y en la de las celdas.
Las tablas porcentuales son elásticas. Siempre que pueden su medida corresponde a un porcentaje de la
ventana del explorador.
Las medidas de las tablas y de sus celdas pueden definirse de la forma explicada, pero eso no significa que
estos elementos mantendrán tales medidas “pase lo que pase”. Una impresión común al comenzar a usar estos
elementos html es que su comportamiento parece impredecible.
Las dimensiones de las celdas de las tablas depende de dos factores: de su contenido y de las dimensiones que
se le asignaron. Ambos factores se relacionan de un modo a veces no demasiado claro para el usuario, por lo
que es necesario practicar y probar.
Veamos algunas cuestiones prácticas:
- Las celdas tengan o no dimensiones asignadas, se agrandan hasta poder contener el objeto que coloquemos
dentro.

Instituto Taller Espíritu Santo 1

Diseño Web Dreamweaver
- Si se inserta un objeto en una celda (texto o imágenes), la misma se agranda hasta poder contenerlo. Las otras
celdas, si no tienen contenido ni dimensiones asignadas, colapsan reduciendo su tamaño a la menor medida
posible.

Modo Layout
Una de las herramientas que permite tener mayor control sobre las tablas la encontramos en el panel de
objetos, en la solapa denominada
Disposición / Layout, que permite crear tablas y celdas en un modo especial en donde las medidas de las tablas
y celdas estarán visibles y serán editables en forma directa.
En este panel podremos elegir entre dos modos de trabajo: el estándar y el Disposición / Layout. En este último
las columnas aparecen con sus medidas en píxeles, las que podemos modificar interactivamente. Este modo,
además, habilita las herramientas Crear celda y Crear tabla, que nos permiten crear celdas y tablas en cualquier
lugar de la página. Una vez que salgamos del modo Disposición / Layout veremos creada una o varias tablas
consistentes, que no se deformarán fácilmente.

Trabajo con celdas

Una vez construida la tabla será necesario manipularla para que
tome la forma que necesitamos para realizar nuestro trabajo.
Para unir varias celdas y transformarlas en una sola, primero se las
selecciona arrastrando el mouse y luego se pulsa el botón Unir
celdas. Una condición esencial de esta herramienta es que la celda
resultante sea rectangular: no se pueden lograr celdas en forma de
“L” o “T”.
La herramienta para dividir celdas permite transformar una celda
en varias. Seleccionamos una celda y, al presionar el botón Dividir
celda, se nos presenta un cuadro de diálogo en donde deberemos definir cuántas filas o columnas queremos
que se creen dentro de la celda.
Con la ayuda de estas herramientas podemos personalizar las tablas y ubicar con mayor libertad las imágenes,
botones, textos, etc. en la superficie de nuestra página.

Plantillas y bibliotecas
Las plantillas de Dreamweaver son un tipo especial de documento, que tiene extensión .dwt (DreamWeaver
Template), y sirven para automatizar trabajos rutinarios en la construcción de sitios web. Las principales
ventajas son:
1 Los elementos comunes a varias páginas se realizan una sola vez y son aplicados a todas las páginas
construidas a partir de la plantilla.
2 Si se hace un cambio en la plantilla; Dreamweaver se encarga de actualizar automáticamente todas las
páginas que se crearon a partir de la misma. //
Los elementos de Biblioteca trabajan con criterio parecido. La Biblioteca de un sitio Dreamweaver permite
almacenar elementos reutilizables –tablas con textos e imágenes u otros objetos– que se pueden insertar en
cualquier página del sitio. Si se modifica alguno de estos elementos, el programa actualiza de una sola vez
todas las páginas del sitio que contenga dicho elemento.

Plantillas / Templates
Las plantillas de Dreamweaver son documentos html que tiene la extensión .dwt, que es la abreviatura de
DreamWeaver Template. En estos documentos se definen áreas editables y áreas bloqueadas o no editables.
Instituto Taller Espíritu Santo 2
Diseño Web Dreamweaver
Los contenidos específicos de cada página estarán ubicados en las áreas editables de la plantilla y estos podrán
ser modificados desde cada una las páginas creadas a partir de la plantilla.
Si utiliza una plantilla para la creación de un grupo de páginas, modificando la plantilla cambiará de una vez
todos los elementos comunes de las páginas, mientras que los contenidos exclusivos de cada página
permanecerán sin cambios.
El uso de plantillas garantiza que todas las páginas del sitio que lo necesiten, tengan un diseño y un formato
idénticos y que tengamos un control total del mismo.

Crear una Plantilla

Para construir una plantilla como modelo de varias páginas de un sitio se puede proceder de dos maneras
diferentes:
- Usar un documento html existente y guardarlo como plantilla.
- Crear una plantilla desde un documento html en blanco.
En cualquiera de los dos casos será necesario determinar las áreas editables y no editables de acuerdo a las
necesidades.
Las plantillas quedan guardadas con la extensión de archivo .dwt, en una carpeta llamada Templates, en la
carpeta raíz local del sitio. Dreamweaver creará esta carpeta al guardar la primera plantilla creada. Es
importante no realizar ninguna modificación en la misma, como cambiarle el nombre o el de los archivos que
contiene, poner otros archivos, etc. Cualquiera de estas modificaciones será fuente de errores en el
comportamiento de las plantillas.

Definir las regiones de una plantilla

Al crear una plantilla nueva todos sus elementos estarán bloqueados en los documentos html que se creen a
partir de ella. Para que la plantilla se pueda utilizar será necesario desbloquear algunas áreas. Cuando estamos
construyendo una plantilla se pueden realizar cambios en todas sus áreas, tanto las editables como en las
bloqueadas. En cambio, en un documento basado en una plantilla, sólo se podrán realizar cambios en las
regiones editables del documento; las áreas bloqueadas no se podrán modificar.
Las áreas editables o bloqueadas pueden ser tablas enteras, filas, columnas o celdas individuales de una tabla.
Los comandos para crear zonas editables se encuentran en el menú Insertar > Objetos de plantilla / Insert >
Template Objects.
Las áreas editables pueden ser de tres categorías:
- Región editable / Editable Region. Son las áreas que se podrán modificar libremente en el documento html
normal basado en la plantilla correspondiente.
- Región Opcional / Optional Region. Estas áreas de la plantilla pueden ser mostradas u ocultadas en el
documento normal basado en la misma.
- Región Repetible / Repeating Region. Una región repetible es un área de la plantilla que, en el documento
html basado en ella, puede ser duplicada cuantas veces se necesite. Esta prestación es usada generalmente en
celdas de tablas, pero puede ser usada en otros elementos html.

Enlaces en las plantillas

Los enlaces que tienen los elementos ubicados en las partes bloqueadas de las plantillas deben establecerse
con mucho cuidado. Aquí se presenta un problema que se puede plantear de la forma siguiente. Un vínculo,
enlace o link, como ya vimos páginas atrás, está definido por la ruta que existe entre la página que lo contiene y
la página de destino. Cuando se trata de páginas normales no existe ningún problema.

Instituto Taller Espíritu Santo 3

Diseño Web Dreamweaver
Como las plantillas están guardadas en una carpeta especial llamada Templates, la ruta cambia. Dreamweaver
actualiza automáticamente esta ruta cuando se crea un documento html normal, basado en esa plantilla. Para
que esto suceda sin problemas lo más aconsejado es establecer los vínculos usando el ícono de carpeta o el de
“mira”. Escribir la ruta en forma manual puede ser fuente de errores y es posible que Dreamweaver no la
actualice en forma adecuada cuando se use la plantilla para crear un documento html normal.

Instituto Taller Espíritu Santo 4