Regiones repetidas

Las regiones repetidas son aquellas que pueden ser utilizadas en forma reiterada dentro de una plantilla. Esto quiere decir que, si tenemos una región que utilizaremos en otras partes de la plantilla, podremos definirla como región repetida y duplicarla en el lugar que la necesitemos, ahorrando un tiempo considerable en la creación de regiones que ya fueron diseñadas.

Este tipo de elementos fue pensado (como casi todo Dreamweaver) para su utilización en maquetación  con tablas, aunque también admite otros tipos de elementos. Hay dos tipos de regiones repetidas: las regiones repetidas propiamente dichas y las tablas repetidas.

Otra característica importante de las regiones repetidas es que no necesariamente tienen por que ser editables. Sin embargo, lo más frecuente es que necesitemos que algunas partes de las regiones repetidas sean editables mientras que otras permanezcan bloqueadas. Esto es posible, ya que dentro de las regiones repetidas es posible establecer regiones editables.

Teniendo en cuenta sus características (posibilidad de duplicarse y de inserción de regiones editables), podría decirse que se trata de plantillas dentro de la plantilla.

Creación de regiones repetidas

Al igual que en el caso de las regiones editables, la selección de la región a convertir debe realizarse en la vista de diseño, por lo que todos los pasos que daremos en adelante se harán en esta vista.

En primer lugar, se debe señalar la región que utilizaremos como región repetida dentro del diseño que ya se encuentre desarrollado. Puede tratarse de un texto, una lista, títulos, imágenes o una combinación de elementos.

Luego podremos optar, al igual que en el caso de las regiones editables, por hacer clic con el botón derecho del ratón sobre la región señalada y hacer clic sobre “Plantillas / Nueva región repetida”, con lo que se abrirá un pequeño cuadro en el que deberemos introducir el nombre que le daremos a esta región para luego poder identificarla.

En la vista de diseño aparecerán las regiones repetidas rodeadas de un borde celeste con una etiqueta en la que puede leerse el nombre de la región. Es importante aclarar que solo se pueden introducir letras (mayúsculas o minúsculas) y números en la formación de un nombre de región.

Tablas repetidas

Dentro de las posibilidades de establecer regiones repetidas, se encuentra la opción de crear tablas con filas repetidas. Al igual que en el caso de las regiones repetidas propiamente dichas, se puede optar por hacer que algunas celdas sean editables, mientras que el resto permanece bloqueado.

Para crear una tabla repetida, se pueden utilizar los mismos procedimientos que se emplean en la creación de regiones repetidas, seleccionando la opción correspondiente a las tablas. En el cuadro que se abre, deberemos definir el número de filas y columnas que tendrá la tabla, además de las características de las mismas (ancho, altura, bordes, colores, etc.), además de definir el nombre de la tabla repetida.

La tabla creada de esta forma, puede ser parcialmente repetida, ya que la región repetida puede establecerse en este mismo cuadro, estableciéndose las filas inicial y final de la parte repetida de la tabla.
El color de fondo de las celdas y filas puede editarse para que se muestre con colores diferentes cuando la tabla repetida se inserta en un punto cualquiera del diseño. Para ello, bastará con editar el código en la vista de código, para lo cual se deben tener algunos conocimientos de HTML.

Regiones opcionales

La utilización de regiones opcionales es bastante más compleja, ya que incluye opciones de programación. Las regiones opcionales se establecen cuando se desea que las mismas se muestren u oculten ante determinadas circunstancias, por lo que se deben establecer algunos elementos condicionales (if, else), típicos de los lenguajes de programación.

Esto quiere decir que cuando nos encontramos diseñando, podremos definir algunos parámetros que harán que la región se muestre o permanezca oculta. Cuando más de una región opcional se vincula a un determinado parámetro, la modificación de éste puede hacer que el conjunto de regiones se muestren o se oculten.

Las regiones opcionales pueden ser de dos tipos: editables y no editables. Cuando se establece una región opcional no editables, se permite a los usuarios de la plantilla modificar los parámetros que hacen que ésta permanezca oculta o sea visible, pero sin poder editar su contenido. En las regiones opcionales editables, el usuario puede, adicionalmente, editar el contenido de dicha región.

Establecer regiones opcionales

El procedimiento para crear regiones opcionales es igual a los casos anteriores. En este caso, el cuadro que se abre cuenta con dos pestañas, que vemos en la imagen siguiente:

Como puede verse en la parte inferior de la imagen, en la pestaña correspondiente a las opciones avanzadas pueden introducirse las variables según las cuales se visualizará  o no la región establecida.

Tanto cuando se emplea el menú desplegable del botón derecho del ratón como yendo a través del menú Insertar, pueden verse las dos opciones posibles para el establecimiento de una región opcional. Si se establece simplemente “Región opcional”, ésta no será editable, ya que para ello puede verse más abajo el ítem correspondiente a las regiones opcionales editables.

Plantillas anidadas

En ciertas ocasiones, es posible que la utilización de plantillas no sea suficiente para colaborar en el diseño de una página web, como en el caso de páginas dentro de un mismo diseño, que requieren ciertos cambios respecto de la plantilla para que su visualización sea correcta.

Para ello, Dreamweaver CS4 presenta la opción de crear una nueva plantilla basada en la plantilla original, por lo que ambas plantillas se encontrarán vinculadas entre si, aunque su utilización en el diseño de una página web sea independiente.

Las regiones editables de la plantilla original se pasarán como tales a la plantilla anidada. Todos los cambios que se realicen en la plantilla original, se actualizan automáticamente en las plantillas anidadas.

Luego de creada la plantilla anidada, la misma puede ser modificada en todo aquello que se crea conveniente. Todo aquello que permanezca sin modificaciones, será actualizado desde la plantilla original cuando se edite la misma.

Creación de una plantilla anidada

Para crear una plantilla anidada, se debe crear un documento a partir de la plantilla que será base del diseño. Para ello, se debe ir a “Nuevo” del menú principal. Cuando se abre el cuadro correspondiente, se debe seleccionar “Página de plantilla”, tras lo cual se debe seleccionar la plantilla que será base.

Luego de realizadas las modificaciones que se entiendan necesarias, se utiliza “Guardar como plantilla”. Una vez guardado el documento, se actualizan los vínculos con el diseño original, del mismo modo que lo hace cuando se abre.

Pero además, luego de creado un nuevo documento basado en una plantilla, este documento permanece conectado a ella, de forma tal que cuando se realicen modificaciones a la plantilla, los documentos creados con ella pueden ser modificados mediante la actualización de los documentos.

Esto también representa una gran ventaja, ya que es posible realizar cambios profundos en el diseño de una página web realizando cambios únicamente en la plantilla, y luego solo deberá actualizarse el diseño de la página, con lo que los cambios realizados en la plantilla pasarán en forma automática a todas las páginas de la web creadas con ella.

Regiones de la plantilla

Las plantillas cuentan con cuatro tipos de región diferentes:

1. Regiones editables: Son aquellas regiones que el diseñador deja sin bloquear y en las que se podrán introducir modificaciones durante el proceso de creación de páginas web con plantillas. Generalmente estas regiones editables están relacionadas con la introducción de los contenidos de la página.
2. Regiones repetidas: Una región repetida es una sección del documento que puede encontrarse parcialmente bloqueada (como si se tratara de una plantilla dentro de una plantilla), de forma que puedan introducirse copias de este tipo de regiones dentro del documento creado con la plantilla. Por ejemplo, puede crearse una región repetida para los menús, en los que el diseño general está bloqueado, pero pueden introducirse ítems.
3. Regiones opcionales: Son regiones bloqueadas o parcialmente bloqueadas, en las que el usuario puede determinar si el elemento será mostrado o no. Esto es útil en aquellos casos en los que un diseño puede introducir algunos elementos en algunas páginas, pero no necesariamente en todas.
4. Regiones con atributos editables: Algunas regiones de la plantillas, pueden estar parcialmente bloqueadas, pero no en porciones visibles, sino en sus atributos. Por ejemplo, es posible hacer que al introducirse una imagen por parte del usuario de la plantilla, éste solo tenga la opción de determinar la alineación, mientras que el resto de los atributos permanece fijo.

Al momento de guardarse una plantilla y ésta no contiene regiones editables, Dreamweaver envía una alerta para que en caso de que se haya tratado de un olvido, se hagan las modificaciones necesarias.

Creación de una plantilla

Existen dos formas para crear una plantilla con Adobe Dreamweaver CS4. La primera, es la creación de una plantilla desde cero, o sea, a partir de una plantilla en blanco. La segunda, es la creación de una plantilla a partir de un documento existente. En esta última opción, permite que luego de la creación del diseño de una página web, establezcamos el mismo como plantilla para la creación del resto de las páginas de la web, con lo que se puede repetir el diseño de la página en el resto de la web con extrema facilidad.

Crear una plantilla a partir de un documento existente

El procedimiento para la creación de una plantilla a partir de un documento existente es muy sencillo, ya que solo basta con abrir el documento y guardarlo como plantilla en “Archivo / Guardar como plantilla”, tras lo cual se deberá establecer un sitio en cuya raíz se guardará la plantilla.

Crear plantillas en blanco

La forma de crear una plantilla en blanco es a través de “Archivo / Nuevo”. En el cuadro, se debe seleccionar “Plantilla en blanco” y luego se debe seguir el mismo procedimiento que se emplea en la creación de un documento nuevo, pudiendo seleccionar el tipo de lenguaje que se empleará, alguno de los diseños predeterminados, si se empleará CSS en la propia página o externo y el tipo de documento.

Establecimiento de las regiones editables

Luego de que se ha realizado un diseño para una plantilla en blanco o se ha abierto un documento para establecerlo como plantilla, se debe definir cuales serán las regiones editables del documento, a fin de proteger mediante el bloqueo a aquellas regiones que no se modificarán, pero que permita a la vez la introducción de los elementos necesarios para la creación de nuevas páginas basadas en la plantilla.

Cada elemento del diseño de una página web puede establecerse como una región editable. Sin embargo, no es posible establecer a varios elementos en conjunto como región editable. Para definir como región editable a un elemento, basta con seleccionarlo en vista de diseño, hacer clic con el botón derecho del ratón e ir a “Plantillas / Nueva región editable”.

También es posible crear una nueva región editable a través de “Insertar / Objetos de plantilla / Región editable” del menú principal.

En cualquiera de los dos casos, aparecerá un pequeño cuadro en el cual deberemos introducir el nombre de la región editable. Debemos tener en cuenta que cada región editable debe tener un nombre que será único en la plantilla. Una vez finalizado el procedimiento, la región editable aparecerá en la vista de diseño enmarcada por un rectángulo de color azul, que en la esquina superior izquierda tendrá una etiqueta con el nombre de la región editable.

Para eliminar una región como editable, se debe hacer clic con el botón derecho sobre la etiqueta con el nombre de la región editable, y hacer clic nuevamente en “Quitar formato de plantilla”. También es posible hacerlo seleccionando el elemento e ir a “Modificar / Plantillas / Quitar formato de plantilla” del menú principal.

Para cambiar el nombre de la región editable, se debe seleccionar el elemento e ir al cuadro Propiedades (si no aparece en la ventana el cuadro se abre desde “Ventana / Propiedades” o con Ctrl + F3), donde se muestra el nombre en un campo, en el cual introduciremos el nuevo nombre, siempre recordando que no deben repetirse los nombres de las regiones editables dentro de una plantilla.

En la segunda parte de este artículo, veremos como crear otros tipos de regiones y como trabajar con ellas.

Otro de los problemas a los que se enfrentan los diseñadores de páginas web, es la dificultad para previsualizar sus trabajos desde dispositivos móviles. Esto tiene una solución parcial mediante la utilización de algunas páginas que ofrecen un servicio de visualización, lo que obliga al diseñador a estar subiendo el diseño a un servidor cada poco tiempo.

También es frecuente que nos enfrentemos al problema de las diferentes configuraciones de los navegadores. Muchos usuarios optan por bloquear algunos tipos de contenidos, como Javascript, controles Activex y Flash, entre otros. A esto hay que sumar que en muchas ocasiones, por desconocimiento o por olvido, hay personas que tienen configuraciones con bloqueos parciales, bloqueando alguno de estos contenidos y otros no.

Cuando un diseño se encuentra basado en alguna de estas tecnologías, es singularmente importante conocer el comportamiento del diseño ante la falta de los elementos necesarios para que el sitio se aprecie en su totalidad.

Adobe Dreamweaver CS4 tiene esto solucionado y concentrado en su software, de forma tal que el diseñador no tiene por que abandonar el mismo para visualizar su trabajo en forma externa.

La vista de diseño

Como hemos visto en anteriores artículos, la vista de diseño permite al diseñador observar los resultados mientras está trabajando en la página, lo que resulta de gran ayuda. Sin embargo, la vista de diseño no presenta los trabajos tal y cual se verán en un navegador, en primer lugar porque no está pensado para ello, sino que es un lugar sobre el que trabajar, y segundo porque sería imposible implementar una vista en la cual se fueran reflejando los resultados del trabajo tal como se vería en diferentes navegadores.

La vista en vivo

La vista en vivo se asemeja más a la vista que se obtendrá en un navegador, pero tiene como inconveniente que los trabajos presentados en este espacio, no son editables. Además, mientras la vista en vivo se encuentra activada, la vista de diseño no es editable. Sin embargo, si es posible realizar ediciones en la vista de Código, haciendo posible realizar trabajos en ésta mientras se aprecian los resultados en la vista en vivo.

Sin embargo, debemos recordar que el problema principal de las vistas previas es que hay notables diferencias en la visualización que hacen los navegadores de las páginas web, lo que significa que no es posible tener una idea acabada de los resultados, siendo imprescindible en todos los casos, realizar pruebas en navegadores, o en su defecto, utilizar alguno de las páginas que ofrecen un servicio de vista previa desde diferentes navegadores.

Las diferentes vistas pueden combinarse, de forma tal que el usuario de Dreamweaver puede definir cual es la organización que mejor se adecúa a sus necesidades. Por ejemplo, si mientras se encuentra activa la vista en vivo se hace clic sobre el ícono de vista dividida, aparecerá la vista en vivo en el lugar en el que suele mostrarse la vista de diseño.

También es importante recordar que para que se pueda habilitar la vista en vivo, se debe haber seleccionado previamente la vista de diseño o la vista dividida. Si mientras se está desarrollando la edición de la página web se tiene activada la vista en vivo, los cambios que se realicen no se verán hasta tanto no se guarden los cambios efectuados y se refresque la vista en vivo.

Opciones de la vista en vivo

Para simular algunas de las situaciones que se pueden presentar cuando la página sea abierta por un navegador, la vista en vivo puede configurarse para que adopte alguna de las posibles variantes que se pueden presentar en un navegador.

Para acceder a estas opciones, se debe ir a “Ver / Opciones de vista en vivo” y seleccionar una o más de estas opciones que aparecen en el menú desplegable, tal como vemos en la imagen siguiente:

La primera opción que se presenta es “Congelar Javascript”, opción a la que se puede acceder presionando la tecla F6. Esta opción detiene la ejecución de los códigos Javascript y los congela en el punto en que se ha hecho uso de la opción.

La segunda y la tercera opción permite desactivar Javascript y los plugins, tal como algunos usuarios configuran sus navegadores por razones de seguridad, lo que permite ver la página que se encuentra en diseño tal como la verán estos usuarios, permitiendo al diseñador realizar los ajustes necesarios para este tipo de situaciones.

“Utilizar servidor de prueba para origen de documentos” es la opción siguiente, y permite la visualización de páginas dinámicas empleando un servidor de prueba. Esta opción puede ser utilizada en combinación con la siguiente opción, “Utilizar archivos locales para vínculos de documento”, que permite emplear los archivos locales (CSS, Javascript, etc.) para la visualización del resultado. En caso de que no esté activada esta opción, Dreamweaver utilizará los archivos existentes en el servidor de prueba.

Finalmente, nos encontramos con la opción “Configuración de petición HTTP”, el que se emplea para dar parámetros a la configuración avanzada de la vista en vivo. Dado que se trata de opciones avanzadas y se debe contar con conocimientos de programación, dejaremos esta opción para un artículo posterior, teniendo en cuenta además que es muy probable que durante el desarrollo de páginas web corrientes, este tipo de opciones no sean utilizadas.

Vista previa en navegadores

Adobe Dreamweaver cuenta con una opción que permite utilizar los navegadores instalados en el ordenador para previsualizar las páginas. En estos casos, Dreamweaver abre los navegadores solicitados y presenta la página en ellos. Antes de proceder a utilizar esta vista previa, es conveniente haber guardado los archivos que se están creando, de forma tal que cuando se abra el navegador, éste presenta la versión más actualizada de los mismos. En caso de que no se haga, la vista que aparecerá en el navegador será la última que se haya guardado, y en caso de que se guarde posteriormente, se deberá refrescar el navegador para que presente los cambios ejecutados.

Para que se pueda llevar adelante este tipo de visualizaciones, es necesario que se hayan agregado los navegadores a la lista de navegadores de Dreamweaver. En caso de que esto no se haya hecho, se debe ir a “Edición / Preferencias”, con lo que se abrirá el siguiente diálogo:

En este cuadro podemos ver que a la izquierda se encuentra una lista de opciones. En ella, para este caso, seleccionaremos la última, “Vista previa en el navegador”. En la parte central del cuadro veremos que aparece una lista de navegadores. En caso de que no haya ningún navegador en la lista o se desee agregar nuevos navegadores, deberemos hacer clic en “editar”, ante lo cual se abre un nuevo diálogo, en el que introduciremos el nombre del navegador y la ruta de acceso al mismo (se puede emplear el botón “Examinar” que permite navegar por el disco duro).

Más abajo, aparecen casillas de verificación para seleccionar si se trata del navegador principal (predeterminado) o secundario. Esto también se puede configurar en el cuadro de diálogo anterior.

Vista previa para dispositivos móviles

Así como resulta de dificultoso diseñar páginas que sean compatibles con la gran cantidad y variedad de dispositivos móviles existentes, resulta también bastante complejo saber como se verá una página web en uno de estos dispositivos.

Dreamweaver cuenta con una solución para ello, que es la “vista previa en dispositivos móviles”, que se obtiene mediante la utilización de la función “Opera Small-Screen Rendering” y que se encuentra incorporada en “Device Central”. Para acceder a ella, se debe ir a “Archivo / Vista previa en el navegador / Device Central”. Se abrirá la ventana siguiente:

En primer lugar, Adobe Dreamweaver intentará establecer contacto por Internet con una base de datos donde se encuentra la información necesaria acerca de nuevos dispositivos móviles disponibles, de forma de tener la información al día en esta materia.

En la ventana podremos seleccionar el tipo de dispositivo móvil en el cual queremos ver la página que estamos diseñando. En la columna de la izquierda, podremos optar por las diferentes resoluciones de móviles, alternando las vistas. En la columna de la derecha, se pueden configurar algunos parámetros, como la visualización en pantalla pequeña, tipo de contenido, además de un teclado numérico para simular el comportamiento de un móvil.

Es por esta razón, que daremos un ejemplo de cómo realizar un diseño desde cero, comenzando con una página en blanco, de forma que puedan conocer los procedimientos necesarios para realizar una página web desde cero con Adobe Dreamweaver CS4.

Creación de la página y encabezado

El primer paso, como es de suponerse, es la creación de los archivos necesarios. Para crear el archivo html, iremos a “Archivo / Nuevo…”. Cuando se abre el cuadro “Nuevo Documento”, seleccionaremos “HTML”, y en la segunda columna, “ninguno”, con lo que estaremos creando un archivo HTML sin un diseño predefinido. Más a la derecha, seleccionaremos el tipo de documento que deseamos crear (para el ejemplo, XHTML 1.1).

Dado que se trata de un archivo HTML que no contiene formato alguno, no se tendrá la posibilidad de crear un archivo CSS relacionado o insertar el código CSS en el <head>, lo que podremos hacer posteriormente.

Una vez que hemos creado el archivo HTML, veremos que el mismo tiene el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
</body>
</html>

Una vez que hemos creado el archivo, debemos guardarlo. Luego crearemos el archivo CSS, para lo cual iremos a “Archivo / Nuevo…” y haremos clic en la opción “CSS”. Al hacer clic en “Crear”, se generará un archivo donde solo aparecerá la codificación de caracteres y un comentario indicando el tipo de documento de que se trata. Al igual que en el caso anterior, este archivo será guardado. Para el ejemplo lo guardaremos en el mismo directorio que se encuentra el archivo HTML con el nombre “estilo.css”.

Siguiendo los procedimientos descritos en el artículo “Dreamweaver. Propiedades de la página web”, modificaremos las propiedades de la página en caso de ser necesario. También deberemos darle título a la página (“Ejemplo”), que introduciremos en el campo que a tales efectos se encuentra en la barra de herramientas.

Una vez que se han creado los archivos, deberemos comenzar a generar el encabezado de la página, el cual tiene información muy relevante para el funcionamiento de la página y su posicionamiento, que no es aportado por el encabezado que contiene por defecto.

Creando el encabezado

El encabezado, como podremos ver, contiene ya alguna información, como la codificación de caracteres y el título de la página.

Pero esto es insuficiente para una página web normal, por las razones que ya hemos expuesto, de modo que deberemos crear, entre otras cosas, las etiquetas “meta” que consideremos necesarias y el vínculo del documento HTML con el archivo CSS.

Para crear una etiqueta “meta”, tendremos que ir a “Insertar / HTML / Etiquetas head”, ante lo cual se abren seis posibilidades, que son etiquetas “meta”, palabras clave, descripción, actualizar, base y vínculo.

Siguiendo un orden lógico en el encabezado, comenzaremos insertando la descripción de la página, seleccionando la opción correspondiente en el menú descrito, tras lo que se abrirá un cuadro muy sencillo donde tendremos un área de texto donde introduciremos la descripción de la página. A continuación crearemos la etiqueta de las palabras clave, que se realiza tras abrirse un cuadro similar al anterior, donde introduciremos las palabras o frases clave separadas por una coma, tal como cuando escribimos el código directamente.

Luego, en caso de que la página lo requiera, se puede comenzar a introducir las etiquetas “meta” que sean necesarias, a través de la opción correspondiente que se encuentra en el menú, que abre el siguiente cuadro:

Ahora deberemos realizar uno de los pasos más importantes de toda la creación de los elementos del encabezado, que es la vinculación del documento HTML con el archivo CSS. La posibilidad de realizarlo se encuentra en el mismo menú que se crean el resto de las etiquetas del encabezado, seleccionando en este caso, la opción “Vínculo”. Esta etiqueta también servirá llegado el momento para introducir el favicon.

Una vez que completamos estos procedimientos, estamos prontos para iniciar el proceso de creación del diseño de la página web.

Inicio de la creación del diseño

Los primeros pasos en la definición del diseño de la página, pueden comenzarse, como ya se ha descrito en un artículo anterior, en “Modificar / Propiedades de la página”, donde se abre un cuadro en el que, además de los parámetros básicos de la planta, se encuentran una serie de elementos que están relacionados con el diseño de la página, como por ejemplo las propiedades del elemento “body” y algunos estilos CSS elementales.

De todas formas, si hemos creado un archivo CSS, no es conveniente emplear esta opción, ya que el código CSS generado por este método se incluyen dentro de las etiquetas “head” y en el propio elemento “body”.

Definición de los atributos de “body”

Los atributos de la etiqueta “body”, define las propiedades de todos aquellos elementos que están incluidos dentro de ella, por lo que sus efectos, a menos que se defina otra cosa en los elementos hijos, se verán en toda la página.

Para crear los atributos del elemento “body”, eliminando los que los navegadores definen por defecto, se debe ir a la barra de herramientas “estilos CSS”, donde buscaremos, al pie de la misma, el botón para crear una nueva regla.

Una vez que hemos seleccionado esta opción, se abre el cuadro para la creación de nuevas reglas CSS, en el que seleccionaremos “Etiqueta” en “Tipo de selector”, “body” en “Nombre del selector” y haremos clic en Aceptar.

En el cuadro que se abre, introduciremos todas las características básicas que serán válidas para todo el documento, salvo que en elementos posteriores se definan otros parámetros. Para el ejemplo, definiremos la familia de fuente como “Arial, Helvetica, Sans-Serif”, un tamaño de fuente de 12px, el color de la misma en negro, definiremos el color de fondo de la página (blanco), margen y relleno en 0px, dejando el resto de las opciones sin definir.

Creación de una capa contenedora

Cuando nos encontramos en el inicio del diseño, uno de los primeros pasos que debemos dar es la definición de las características principales de la página. Una de estas características es el tipo de diseño que llevaremos adelante, si se trata de un diseño de ancho fijo, elástico o flotante.

Para el caso del ejemplo, crearemos una capa contenedora de ancho fijo, pero el procedimiento siguiente es similar para todos los casos, cambiando el tipo de unidades que se emplearán.

Como las características de la capa contenedora está definida en el archivo CSS, el primer paso es crear la regla CSS en el archivo, para lo cual deberemos emplear la opción “Crear nueva regla” que se encuentra en la parte inferior del cuadro “Estilos CSS”.

En el cuadro que muestra la imagen anterior, deberemos colocar el tipo de regla (id, class) y el nombre de la misma. Una vez que introducimos estos datos y hacemos clic en Aceptar, se abre un nuevo cuadro donde deberemos introducir los atributos de esta capa:

Para el caso del ejemplo, daremos un ancho de 800px, un color de fondo #eee, márgenes derecho e izquierdo “auto” (para que la capa se centre), un relleno (padding) de 10px y bordes derecho e izquierdo de 4px de ancho, sólido y de color #999.

Introducción de la capa contenedora en el archivo HTML

Una vez que hemos definido los atributos que tendrá la capa contenedora, solo resta introducir la misma dentro del archivo HTML y generar algún contenido de ejemplo, para que veamos como queda, que en el ejemplo que estamos desarrollando se trata de un texto.

La vista de la página quedará como se ve en la imagen inferior, y tras lo cual, podremos comenzar a definir la maquetación de la página y la inclusión de los elementos componentes de la misma, procedimientos que se describirán en un artículo posterior.

La maquetación de páginas web requiere de la utilización de medidas precisas de sus elementos, de forma que estos se alineen perfectamente y aparezcan visualmente ordenados de una forma determinada, de acuerdo al diseño que se ha elegido. Por ejemplo, es frecuente que queramos que un elemento esté perfectamente alineado con otro, por lo que deberemos utilizar, o bien mediciones perfectas, o alguna herramienta que facilite la visualización de la alineación de los elementos.

Adobe Dreamweaver CS4 cuenta con reglas, guías, cuadrículas e imágenes de rastreo, elementos que brindan grandes ventajas a los diseñadores a la hora de maquetar una página web.

Las reglas

La más conocida de todas las herramientas de maquetación de Dreamweaver son las reglas, ya que este tipo de herramientas se emplean en muchos otros programas. Se trata de reglas que aparecen en el borde izquierdo y superior de la Vista de Diseño y que cuentan con escalas expresadas en pixeles, centímetros o pulgadas, según como se hayan configurado. En estas reglas aparece marcada la posición del puntero con una línea punteada. En la medida que el puntero es desplazado, estas líneas siguen el movimiento del mismo, brindando siempre la posición extacta.

Cuando se desea saber la posición de un determinado elemento, basta con posar el puntero en el punto de origen del elemento y ver la lectura que arroja en las reglas.

Configuración de las reglas

Para activar y desactivar las reglas, se debe ir a “Ver / Reglas / Mostrar”. Haciendo clic sobre “Mostrar” se activará o desactivará la vista de las reglas. Esto también puede hacerse empleando las teclas del método abreviado “Ctrl + Alt + R”.

En el mismo menú se configura el resto de las propiedades de las reglas. Por ejemplo, más abajo puede seleccionarse la unidad de longitud que se empleará para las reglas, tal como puede observarse en la siguiente imagen, donde también aparece una función que veremos más adelante

En la unión de ambas reglas, en la esquina superior izquierda, aparece un pequeño cuadrado. Cuando se hace clic en este cuadrado y se desplaza el puntero con el botón izquierdo presionado, se puede desplazar el punto de origen de las reglas hasta el punto del diseño que deseemos. Con esta herramienta, podremos instalar el 0 de ambas reglas, por ejemplo, en el origen de un elemento determinado, de forma que las reglas sirvan para establecer las dimensiones del mismo. En la siguiente imagen, vemos a la izquierda a ambas reglas con su origen en cero, mientras que en la imagen de la derecha vemos el desplazamiento del puntero con el origen de las reglas hacia otro punto del diseño.

Para restablecer el punto de origen de las reglas, basta con ir a “Ver / Reglas / Restablecer origen” para que las reglas marquen como cero al extremos superior izquierdo del diseño.

Las guías

Las guías son líneas horizontales o verticales que pueden colocarse en cualquier parte del diseño para facilitar la alineación de objetos o marcar las dimensiones de las diferentes resoluciones de pantalla. Estas líneas solo se muestran en la “Vista de diseño”, desapareciendo en la “Vista en vivo”.

Para instalar una línea guía en el diseño, en primer lugar deben estar activadas las reglas. Para crear una línea guía, hay que arrastrar el puntero desde una de las reglas (para crear una guía vertical, desde la regla izquierda; para crear una guía horizontal, desde la regla superior) y soltar el botón en el punto donde deseamos instalarla.

Luego de colocada en un lugar, las guías pueden desplazarse haciendo clic sobre ellas y desplazándolas. Para eliminar una guía, basta con arrastrarla hasta la regla correspondiente. Si se desean borrar todas las guías a la vez, hay que seleccionar “Ver / Guías / Borrar guías”, como se muestra en la siguiente imagen.

También es posible ocultar y mostrar las guías sin necesidad de borrar y crear nuevas, empleando la opción correspondiente en el menú. Para evitar que se produzcan borrados o movimientos no deseados, las guías pueden bloquearse empleando la opción Bloquear Guías del menú.

La posición de las guías puede ajustarse a los elementos, empleando la opción “Ajustar guías a elementos”, con lo que cuando desplazamos una guía y nos acercamos a un elemento, la guía se tratará de ajustar al mismo. Otra opción es ajustar los elementos a las guías, empleando la opción del menú que corresponde, con lo que los elementos que desplacemos (siempre que tengan posición absoluta), se ajustarán a la guía en cuanto estén próximos a ella.

Para desplazar una guía a una posición concreta, dada en unidades de longitud, hay que hacer doble clic en la guía, con lo que se abrirá un cuadro que mostrará un campo donde puede introducirse un valor numérico y una lista con las unidades que se pueden emplear. Una vez que se hace clic en “Aceptar”, la guía se establecerá en el punto deseado.

Si se desea conocer la distancia que existe entre dos guías, basta con colocar el puntero entre ellas y presionar la tecla Ctrl. Automáticamente aparecerá la distancia que existe entre las guías, dadas en la misma unidad que las que tienen las reglas, tal como se muestra en la siguiente imagen:

Una utilidad interesante de las guías es que es posible emular las dimensiones de distintas resoluciones de pantalla, empleando para ello las opciones que hemos visto en el menú “Ver / Guías”. Automáticamente dos guías se ubicarán en los límites vertical y horizontal de dicha resolución.

Las guías pueden ser configuradas para su visualización por defecto. Para ello hay que seleccionar “Ver / Guías / Editar guías”, donde se podrá modificar el color, el color en que se muestran las distancias, además de otras opciones que ya hemos visto en este tutorial. Una vez que se han modificado estos parámetros, éstos aparecerán por defecto en todas las guías que utilicemos, aún cuando reiniciemos el programa.

Cuadrícula de diseño

La cuadrícula es una serie de líneas horizontales y verticales que aparecen superpuestas al diseño (aunque no forman parte del mismo), que sirven para tener una mayor precisión en la ubicación de los diferentes elementos del diseño.

Al igual que las guías, la cuadrícula puede mostrarse u ocultarse, debiendo emplearse la opción “Ver / Cuadrícula / Mostrar cuadrícula”. También puede hacerse que los elementos del diseño con posición absoluta se ajusten a la misma.

La configuración de la cuadrícula permite seleccionar el color de las líneas que la conforman, definir el espaciado entre las líneas, si se mostrarán como líneas o puntos, y las opciones ya vistas de mostrar y ocultar y de ajuste.

Imagen de rastreo

Una de las opciones más interesantes con que cuentan las ayudas para la maquetación, es la posibilidad de insertar una imagen de rastreo. Esta imagen puede insertarse para ser utilizada como guía para el diseño, siendo visible solo en la “Vsita de diseño”, sin que afecte la visualización del diseño en un navegador.

Para colocar una imagen de rastreo, hay que seleccionar “Ver / Imagen de rastreo / Cargar”, tras lo cual se abre un cuadro que nos permitirá cargar una imagen de guía. Posteriormente, tal como puede hacerse con las guías y cuadrícula, esta imagen puede mostrarse u ocultarse.

En este mismo menú puede abrirse un cuadro que permite ajustar la posición de la imagen de rastreo, en el cual pueden introducirse las coordenadas x e y en valores numéricos con unidades de longitud. Una vez modificada la posición de la imagen de rastreo, ésta puede ser restablecida, empleando la opción correspondiente en el menú. Siempre que se utilice esta opción, se restablecerá la imagen a la primera posición en que se emplazó.

Se puede alinear la imagen de rastreo con otro elemento que se encuentra en el diseño. Para ello emplearemos la opción “Ver / Imagen de rastreo / alinear con selección”, tras lo que la esquina superior izquierda de la imagen de rastreo se alineará con la esquina superior izquierda del elemento seleccionado.

Conclusión

Estas herramientas hacen que la tarea de maquetación de una página web empleando Adobe Dreamweaver sea más sencilla. Como veremos en otros artículos, estas opciones no son solo útiles para la maquetación general del diseño, sino que también pueden ser empleadas para la maquetación de otros elementos dentro del diseño, como por ejemplo, durante la creación de tablas.

Los enlaces o hiperenlaces son uno de los elementos esenciales de las páginas web, e inclusive de la propia web, ya que ésta consiste en una gran cantidad de páginas enlazadas entre sí. Los enlaces son de tres tipos diferentes:

Enlaces de referencia absoluta

Son aquellos que llevan a un sitio o un archivo especificando la ruta completa, como por ejemplo, http://www.unsitiocualquiera.com/sección/documento.html.

Enlaces de referencia relativa

Este tipo de enlaces solo puede ser empleado para enlazar páginas o documentos que se encuentran dentro del mismo sitio. Para ello utiliza la ruta relativa, es decir, marcando la ruta desde la página donde se encuentra el enlace. Utilizando el esquema anterior, si la página donde ubicamos el enlace se llama página.html y se encuentra en el mismo directorio que documento.html, el enlace solo debería decir “documento.html”.

En el caso de que la página a vincularse se encuentre en un directorio de un nivel superior, debe escribirse de la siguiente forma: “../documento.html”. Del mismo modo, si se encuentra en un directorio dos niveles por encima, se escribirá “../../documento.html”. En el caso de que su ubicación sea en un directorio de un nivel inferior, la ruta debe escribirse “directorio/documento.html”.

Puntos de fijación o anclajes

Es un tipo de enlace que conduce a un punto específico del documento actual o de un documento externo. El enlace se dirige a un punto que se establece anteriormente, llamado “anclaje”, que lleva un nombre para ser identificado por el navegador.

Un ejemplo podría ser “documento.html#capitulo4”.

Crear enlaces en un documento

Para crear enlaces en HTML, en primer lugar, crearemos un documento html. Para ello utilizaremos el procedimiento ordinario. En el ejemplo que desarrollaremos en adelante, crearemos un documento con una única columna, sin encabezado ni pie, del tipo XHTML 1.1 y con el CSS dentro del propio documento.

Luego seleccionaremos aquello que vincularemos, que puede ser un texto, una imagen u otro objeto. En este caso, tomaremos las palabras “Loren ipsum”, seleccionándolas. Luego iremos a “Insertar / hiperenlace” (también es posible hacerlo con el botón derecho del ratón, y en el menú, seleccionar “Crear enlace”, tras lo cual se abrirá el cuadro siguiente:

En el campo “Texto”, aparecerá el texto que hemos seleccionado, el cual poseerá el enlace. Debajo, se encuentra el campo “enlace”, en el cual podremos seleccionar el archivo de destino del enlace. Allí colocaremos la ruta del archivo que estamos enlazando. Luego aparece una lista, en la que aparecen los tipos de destino que podremos dar, que son los siguientes:

1. _blank: si seleccionamos este tipo de enlace, el archivo o el sitio que se vincula se abrirá en una nueva ventana (si el navegador tienen esta posibilidad y se encuentra configurado para ello, se abrirá en una nueva pestaña).
2. _parent: cuando nos encontramos trabajando con marcos, el sitio o el archivo se abrirá dentro del marco, o en su defecto, se abrirá en la ventana marco que contiene el enlace. Si el enlace no se encuentra anidado en el marco, el archivo se abrirá en la ventana completa del navegador.
3. _self: el archivo abierto lo hace en el mismo marco o ventana que se encuentra el enlace. Esta es la opción por defecto de los enlaces, por lo que es lo mismo que si no se especifica el tipo de enlace.
4. _top: Se carga en la ventana completa del navegador, quitando todos los marcos.

El siguiente campo contiene la clave de acceso, que es una letra que permite el acceso al enlace tecleando la misma más la tecla “Alt”, lo que es útil para la accesibilidad. En el último campo, aparece “índice de fichas”, en el cual se introducirá (si esto es necesario) el número de orden de la ficha del enlace. Este número, es el orden en que se desplazará el navegador entre enlaces cuando se presiona la tecla “tabulador”.

Ahora, para ver como funciona, estableceremos un enlace empleando los procedimiento que hemos descrito. En el cuadro, colocaremos http://www.lawebera.es como enlace, _blank como destino y dejando el resto de los campos vacíos, ya que no nos serán útiles.

Guardando la página, al hacer clic sobre el enlace, deberá abrirse una nueva ventana donde aparecerá la página principal de “lawebera.es”.

Formato del hiperenlace

Tal como vemos en el documento que estamos desarrollando, los enlaces tienen un formato determinado por defecto. El color de la fuente es azul y el texto se encuentra subrayado. Cuando el enlace ya ha sido visitado, el color es morado, mientras que los enlaces activos son de color rojo. En el caso de las imágenes, estas aparecen con un borde azul de 1px.

Esto puede ser modificado del mismo modo que pueden ser modificadas las propiedades de cualquier objeto. Al igual que en el caso del formato de otros tipos de objetos, las propiedades pueden ser modificadas en conjunto (para todos los enlaces, mediante la regla “a”, o en forma particular para cada uno de los enlaces o para todos los enlaces de una sección.

enlace a correo electrónico

Este tipo de enlaces se inicia, al igual que en cualquiera de los demás casos, en un texto, una imagen o cualquier otro objeto. La diferencia con el resto de los enlaces, es que este sirve para enviar un email, abriendo el cliente de correo electrónico del usuario. La sintaxis del enlace es:

mailto:dirección@correo.com

Para generar un enlace de correo electrónico, deberemos seguir el siguiente procedimiento. En la página que estamos creando, debajo de cualquier párrafo, daremos enter para que se cree un nuevo párrafo. Luego iremos a “insertar / enlace de correo electrónico”, tras lo que se abrirá el siguiente cuadro:

Comprobación de enlaces rotos

Una de las herramientas más interesantes que presenta Adobe Dreamweaver es la que comprueba los enlaces, marcando los errores que la página pueda tener. Para acceder a esta herramienta, hay que seguir la ruta “Archivo / Comprobar página / enlaces”. Esto abre un cuadro donde se muestran todos los enlaces y su estado. Esta comprobación se realiza sobre todo el sitio y no solo sobre una página en particular.

Lo primero que hay que hacer es hacer clic sobre el botón con una flecha verde, a través del cual se ofrece la posibilidad de elegir dónde se comprobarán los enlaces rotos. Puede ser en el documento actual, en todo el sitio o en los archivos o carpetas del sitio seleccionados previamente.

A través de “Ver” hay que especificar si han de mostrarse los enlaces rotos, externos o huérfanos. Como ya dijimos, los enlaces rotos son aquellos que enlazan a una ruta no válida o a un archivo que no existe. Los enlaces externos son los que enlazan a archivos que se encuentran fuera del sitio, pero que Dreamweaver no verifica su validez, ya que solo los enumera. Los enlaces huérfanos son aquellos que no se encuentran enlazados por otros documentos, ni contienen enlaces a otros documentos; en ocasiones, este tipo de documentos son archivos que no se encuentran en uso y no fueron debidamente eliminados.

Reparación de enlaces rotos

Dreamweaver presenta dos posibilidades de reparación de enlaces rotos. La primera es abriendo el archivo desde la columna “Archivos” del cuadro y editando directamente los enlaces en el archivo. La segunda opción es haciendo clic en el nombre del enlace en el mismo cuadro, haciendo la reparación allí mismo.

No tendría ningún sentido contar con un programa WYSIWYG para la creación de páginas web, si necesitáramos crear todo o buena parte de los códigos de los archivos CSS en forma manual. Adobe Dreamweaver brinda la posibilidad de realizar el ingreso de nuevas reglas y propiedades CSS y su posterior edición, sin necesidad de salir de la ventana de edición.

A continuación, explicaremos como utilizar esta herramienta. Para ejemplificar cada uno de los pasos que daremos, tomaremos la misma página de ejemplo que hemos utilizado para el artículo anterior. En caso de no haberlo leído, es conveniente que sigan los pasos allí descritos, para lo cual deberán acceder al artículo desde aquí.

Ubicación de las herramientas

Cuando nos encontremos diseñando una página, es conveniente que el cuadro de “Estilos CSS” se encuentre abierto, ya que desde allí podremos crear y modificar todos los estilos, mientras estamos visualizando los resultados.

Para abrir el cuadro, debemos hacerlo desde el menú “Ventana / Estilos CSS” o con el método abreviado “Mayús+F11”. De inmediato, en la columna izquierda de la ventana del programa, donde seguramente ya se encontrarán otros cuadros, se abrirá el cuadro de edición CSS.

Para desplegar dicho cuadro, tal como se realiza con otros cuadros, basta con hacer clic en la pestaña correspondiente, desplegándose el cuadro en la misma columna. Para retirarlo de la ventana y trasladarlo a otra parte de la página, se hace mediante el método de arrastrar desde la propia pestaña.

El cuadro aparece dividido en tres secciones, cuyos tamaños pueden modificarse desde la ventana que encabeza cada una de estas secciones. La posición del cuadro dentro de la columna que contiene los cuadros puede modificarse también arrastrando con el puntero.

Edición de reglas CSS existentes

Esto se aplica a los elementos del diseño que ya han sido creados y que tienen sus reglas y propiedades definidas.

Selección del elementos cuyas reglas y propiedades van a modificarse

Para seleccionar las reglas CSS a editarse, hay dos métodos que se pueden emplear. El primero es seleccionar el elemento cuyas propiedades se van a editar desde la vista de diseño. Si el elemento es texto o imagen, basta con hacer clic en cualquier parte de los mismos. De inmediato aparecerán las reglas y propiedades que definen al elemento en el cuadro.

Si el elemento es una capa (div) o una tabla (table), se debe hacer clic en el borde del elemento. En este caso, aparecerán las reglas que definen a la capa o la tabla, así como las de todos los elementos padre del mismo. Por ejemplo, para editar las reglas y propiedades del encabezado (nos referimos a la capa encabezado), haremos clic en el borde del mismo. El resultado es igual al que se muestra en la imagen anterior.

Modificación e introducción de propiedades

En la parte superior del cuadro, hay dos pestañas que permiten seleccionar entre ver todas las reblas o la actual (seleccionada). Al seleccionar la última, aparecen tres divisiones iguales a las que se muestran en la imagen. En la división superior aparecen todas las propiedades del elemento, aún aquellas que no están especificadas y tienen valores por defecto.

En la división del centro, se muestran la regla involucrada y todos sus padres, hasta llegar a “body”. En la división inferior aparecen las propiedades que figuran en el archivo CSS a la izquierda, mientras que los valores respectivos aparecen a la derecha. Esta sección es editable, bastando para ello hacer clic en la celda que se pretende editar e introducir los nuevos valores.

En la última fila aparece una celda a la izquierda que dice “Añadir Propiedad”. Haciendo clic en ella es posible introducir una nueva propiedad, escribiendo su nombre o seleccionándola del menú desplegable que aparece allí. Hagamos una prueba de ejemplo. Seleccionaremos la capa del encabezado de la página, haciendo clic en el borde. Luego, en la sección inferior haremos clic en “Añadir Propiedad” y buscaremos las propiedades de borde.

Seleccionaremos “border-color” y seleccionaremos el color de borde de la paleta de colores que aparece. Para el ejemplo, utilizaremos uno de los colores que ya nos encontramos empleando, que es el azul “#00C”. Luego introduciremos la propiedad “border-width” a la que le daremos 1px, y la propiedad “border-style”, introduciendo “solid”. Luego de finalizada esta introducción de propiedades, un borde azul debe aparecer alrededor de la cabecera.

Introducción de nuevas reglas

Para introducir una nueva regla, en el ejemplo deberemos crear un elemento nuevo, ya que todos los elementos que se encuentran en la página actual tienen definidas sus reglas y propiedades.

Introduciremos una nueva capa, que será el inicio de un menú sencillo. Haremos un menú horizontal debajo de la cabecera. Para ello deberemos colocar una nueva capa. En la vista de código, haremos clic a continuación de la etiqueta de cierre de la capa del encabezado. Luego daremos “enter” para que se genere una nueva línea en el código, donde introduciremos el nuevo elemento.

Luego haremos clic en “Insertar / Objetos de diseño / Etiqueta div”, abriéndose un nuevo cuadro flotante donde deberemos indicar el lugar donde colocaremos la etiqueta, el nombre de la clase y el Id (o uno solo de los dos, según sea el caso).

Luego de haber rellenado los datos, haremos clic en “Crear nueva regla”, tras lo cual aparece otro cuadro, donde en primera instancia seleccionaremos el tipo de selector que se trata (class, id, una etiqueta html o un selector compuesto) y el lugar donde va a quedar definida la nueva regla.

Tras hacer clic en “Aceptar”, se abrirá el cuadro donde se definen las propiedades de la nueva regla, en el cual colocaremos todas las propiedades que definan a la nueva regla. En este cuadro hay una columna izquierda, donde seleccionaremos la categoría de propiedades que introduciremos. Al hacer clic en ellas, aparecen las distintas propiedades a las cuales podremos ir dando los diferentes valores.

Para el ejemplo, definiremos las siguientes propiedades con los respectivos valores:

• Font-family: Arial, helvética, sans-serif
• Font-size: 12px
• Font-style: normal
• Line-height: 20px
• Font-weight: bold
• Font-variant: normal
• Text-transform: none
• Text-decoration: underline
• Color: #FFF

Luego seleccionaremos “Fondo” a la izquierda e introduciremos el siguiente valor y dejando el resto en blanco:

• Background-color: #06F

Luego iremos a cuadro, donde introduciremos el ancho de la nueva capa (la altura está dada por la propiedad “line-height”) en 99% para que junto al 1% del relleno derecho e izquierdo ocupen todo el ancho del diseño.

El resto de las categorías de propiedades y sus valores los dejaremos en blanco, ya que no serán necesarios para establecer la capa que albergue un menú. Al hacer clic en “Aceptar” volveremos al primer cuadro de creación de nuevas reglas, donde haremos clic en “Aceptar”. De esta forma quedará conformada la nueva capa, que aparecerá con un texto indicándonos que deberemos introducir un contenido.

Una vez que abramos el ejemplo en el navegador, deberemos ver la siguiente imagen:

Ahora que conocemos como introducir capas, agregar y modificar reglas y propiedades, veremos en el siguiente artículo la construcción de algunos elementos, como un menú y como darle formato al encabezado, para poco a poco ir dándole forma al nuevo diseño.

El primer paso es la creación de los archivos correspondientes. Para ello, seleccionamos “Archivo/Nuevo…”. En el cuadro que se abre, seleccionamos “HTML” y “dos columnas fijas, barra lateral izquierda, encabezado y pie” en cada uno de los cuadros correspondientes. Luego, en la columna derecha del cuadro, seleccionamos “XHTML 1.1” en “Tipo de documento” y “Crear nuevo archivo” en “Diseño CSS en:”.

Luego hacemos clic en “Crear”, tras lo cual se abre un cuadro para guardar el archivo CSS que deseamos crear. Seleccionamos “Crear nueva carpeta”, le damos el nombre “archivos” a la carpeta creada, hacemos doble clic en ella y en la parte inferior del cuadro colocamos el nombre del archivo CSS, que será “estilos” (la extensión del archivo se creará automáticamente), tras lo cual haremos clic en “Guardar”.

Una vez guardado el archivo CSS, se abrirán los archivos html y CSS. Ahora guardaremos el archivo html haciendo clic en “Archivo/Guardar como…”. Seleccionamos el directorio raíz (en el mismo que hemos creado la carpeta “archivos”) y le damos nombre al archivo, en este caso, “ejemplo” (nuevamente, la extensión se creará automáticamente si no la colocamos).

Veremos a continuación que tenemos una página elemental en la vista de diseño y los códigos correspondientes en la vista de código. Para trabajar más cómodos, sin tener que estar cambiando las vistas a cada momento, colocaremos la vista dividida.

IMPORTANTE: Para poder completar el ejemplo, necesitarán un archivo de imagen, que pueden descargar aquí.

Establecer valores básicos del diseño

Si hemos mantenido la vista que Adobe Dreamweaver tiene por defecto, en la parte inferior de la ventana hay un panel llamado “Propiedades”. En caso de haber modificado la vista por defecto, podremos restablecerla seleccionando “Ventana/Diseño del espacio de trabajo/Clásico”. Si deseamos mantener la configuración del espacio de trabajo en la forma que la hemos personalizado, para abrir el panel “Propiedades” seleccionaremos “Ventana/Propiedades”.

Arrastraremos este panel hacia arriba, para tener una vista completa del mismo, y en la parte inferior del mismo aparecerá un botón “Propiedades de la página”, que abrirá un cuadro del mismo nombre. En este cuadro estableceremos las propiedades que serán comunes a toda la página, con excepción de aquello que modifiquemos en el archivo CSS con posterioridad.

A la izquierda se encuentra un campo en el cual seleccionaremos cada uno de los tipos de parámetros, propiedades y atributos que podemos modificar.

Modificación de la fuente por defecto

Seleccionaremos en primer lugar “Apariencia (CSS)”. A la derecha de este cuadro, en primer lugar modificaremos las fuentes que la página tendrá por defecto. Esto quiere decir que todo elemento cuyos atributo de fuente no sea marcado tendrá esta característica.

En el campo desplegable de “Fuente de la página” veremos que Dreamweaver nos muestra una lista de combinaciones de fuentes. Estas combinaciones ya están estudiadas, son correctamente visualizadas por todos los navegadores y sistemas operativos, por lo que es conveniente que empleemos alguna de ellas, aunque el programa habilita (ver al final de la lista) la posibilidad de modificar el listado de fuentes.

A la derecha del campo mencionado, hay dos íconos para alternar entre fuentes “normales” y los valores “bold” e “italic”. Es recomendable que las fuentes tengan estos dos valores en “normal” (sin seleccionar nada) para una correcta visualización de los textos de la página y manejar correctamente los contrastes (ver el artículo sobre este tema).

Para el ejemplo, seleccionaremos “Verdana, Arial, Helvetica, sans-serif”, con un tamaño de 12px. El color de la fuente lo podemos establecer mediante el tecleado del valor correspondiente en unidades hexadecimales, o empleando la paleta de colores básicos o de un selector de colores estilo Windows. Para el ejemplo, seleccionaremos el color “#006”.

Modificación del fondo de la página

En esta misma ventana podremos modificar otros valores de la página, como el fondo, sea este establecido mediante color, imagen o ambas a la vez.

En el mismo lugar donde hemos modificado las fuentes, podremos modificar los valores de los atributos de fondo. Inmediatamente debajo del campo del color de las fuentes, aparece el campo del color de fondo. En él podremos utilizar la paleta de colores del programa o colocar el valor numérico del color en unidades hexadecimales, que para el caso del ejemplo es lo que haremos, tecleando “#f84”, que nos dará un naranja claro.

A continuación haremos un efecto bastante frecuente en las páginas web, que consiste en establecer un degradado de dos colores en la parte superior del fondo de la página. Para ello utilizaremos una imagen que guardaremos en un directorio llamado “imagenes” que colocaremos en la raíz del sitio. Esta imagen, para el ejemplo, se encuentra en la carpeta comprimida que han descargado.

En primer lugar, deberán seleccionar la imagen examinando en su disco o indicar la ruta de la misma en el campo “Imagen de fondo”. Una vez que han establecido cual es la imagen que utilizarán (para el ejemplo “fondo.jpg” que tiene una ruta “imágenes/fondo.jpg”). Luego estableceremos el tipo de repetición que tendrá, seleccionando uno de los valores de la propiedad “background-repeat” que se encuentra debajo. En el caso del ejemplo que estamos llevando adelante, utilizaremos “repeat-x”.

En esta misma ventana se pueden establecer los márgenes de todo el diseño respecto de la ventana del navegador. En este caso, simplemente daremos un valor de 10px al margen superior, para que el encabezado aparezca algo despegado.

Estos mismos parámetros que hemos modificado, pueden ser establecidos en el HTML (práctica no recomendada) mediante la selección en “Apariencia (HTML)”.

Formato general de los vínculos

En la misma ventana de Propiedades de la Página, se pueden establecer los valores básicos (que tendrán todos aquellos elementos que no tengan valores definidos en forma separada en el archivo CSS) de los vínculos. Para ello se debe seleccionar “Vínculos (CSS)” a la izquierda.

Al igual que todas las demás fuentes de la página, los vínculos pueden ser modificados en todos sus valores. De todas formas cabe recordar que en muy pocos casos se establecen variaciones del tipo de fuente respecto de la fuente principal, por lo que la modificación de este valor muy rara vez la utilizaremos.

Debajo del campo donde se establece el tipo de fuente, aparecen las modificaciones de color para vínculos (general), vínculos de sustitución (establece el valor de “a:hover”), vínculos visitados (“a:visited”) y vínculos activos (“a:active”), por separado, pudiendo optarse por seleccionar un color de la paleta de colores presentada o colocar un valor en RGB.

Más abajo, aparece la configuración del subrayado, algo típico en los vínculos. En este caso se puede elegir entre que los vínculos permanezcan subrayados siempre, no subrayar nunca, mostrar el subrayado cuando se posa el cursor encima, o que siempre permanezca subrayado excepto cuando el puntero se posa encima del vínculo.

Para el ejemplo en el que estamos trabajando, dejaremos el tipo de fuente con su valor por defecto y tampoco modificaremos el tamaño. Para poder visualizar como quedan los vínculos y teniendo en cuenta que el ejemplo con el que viene la plantilla inicial, deberemos crear un vínculo en un sitio cualquiera de la página (por ejemplo, seleccionar algunas palabras e insertarle un vínculo vacío mediante “Insertar/Hipervínculo” y colocar el valor “#” en el campo vínculo. Para poder ver como funcionan los vínculos deberemos poner el área de trabajo en “Vista en Vivo”.

Los colores que utilizaremos serán los siguientes: color de vínculo #900, vínculo de sustitución #f00, vínculos visitados #00C y vínculos activos #f00. El subrayado lo colocaremos en “Ocultar el subrayado al situar cursos encima”.

Formato de los encabezados

Cambiando en el cuadro a “Encabezados (CSS)”, podremos modificar los encabezados de títulos y subtítulos (h1 a h6). Tengamos en cuenta que en Dreamweaver solo se puede establecer un único grupo de fuentes para todos los encabezados. Si se desea establecer fuentes diferentes para distintos encabezados, debe recurrirse a la modificación del archivo CSS directamente. Siguiendo con el ejemplo, estableceremos el tipo de fuente como “Palatino Linotype, Book Antiqua, Palatino, serif”.

Más abajo se puede establecer el tamaño y el color de cada uno de los encabezados. Para el ejemplo solo estableceremos tres niveles de encabezados (h1, h2 y h3) que tendrán todos el mismo color (#a60) y los tamaños serán de 24, 18 y 14 píxeles respectivamente.

Título y codificación

Esto es algo que hemos definido desde el inicio de la creación de la página de ejemplo, pero que en ocasiones puede ser útil cuando estamos trabajando, no tenemos mucha idea de que tipo de codificación va a llevar, o cuando queremos hacer modificaciones del título.

En título deberemos colocar “Ejemplo” para la página que estamos creando. Luego podremos seleccionar el tipo de documento (DTD) de la lista desplegable. Recuerden que siempre es conveniente utilizar lo más avanzado en lenguajes. Debajo del DTD encontraremos la codificación de caracteres. De la lista que trae Dreamweaver, la que nos puede resultar útil es la que tiene por defecto (UTF-8). Para los caracteres en español (el idioma español tiene caracteres que son especiales, como por ejemplo la “ñ” y el tilde), hay otras codificaciones que pueden ser utilizadas, aunque no se encuentran en la lista de Dreamweaver, por lo que solo utilizaremos la ya dicha.

Formulario de normas Unicode y firma Unicode (BOM)

Estos dos parámetros son de programación avanzada. A todos los principiantes les conviene dejar todo esto con los valores que tiene por defecto. Si se activan o modifican estos valores, a lo sumo podrán aparecer algunos caracteres “extraños” en la esquina superior izquierda, y en el caso del BOM, no nos permitirá validar la página.

Solo a los efectos de que tengan una idea de que se trata, daré una breve descripción. En primer lugar, cabe destacar que estos parámetros solo se definen si la codificación de caracteres seleccionada es (UTF-8). Los formularios de normas Unicode es la forma en que algunos caracteres se almacenan. Dos caracteres iguales visualmente, pueden almacenarse en forma diferente, y es con los formularios de normas Unicode que se define esto.

Existen cuatro formularios de normas Unicode, de las cuales la más utilizada, y la que deberemos dejar en nuestra página, es C (Descomposición de compatibilidad).

La firma Unicode BOM, está relacionada con el sentido de lectura del documento. Si esta opción, tal como aparece en Dreamweaver por defecto, se deja desactivada, no sucede nada y el documento puede verse perfectamente y se validará (si el código es válido, claro) en W3C. Los problemas pueden suceder por su activación.

Imagen de rastreo

La imagen de rastreo es una herramienta muy útil que posee Adobe Dreamweaver. Imaginemos que queremos elaborar la página tal como se ve en un layout en psd que hemos hecho antes. Dreamweaver ofrece la posibilidad de colocar esta imagen como fondo mientras encima se va diseñando la nueva página, de forma tal que tendremos siempre la referencia exacta de la imagen.

En el cuadro, cuando seleccionamos esta sección, nos permite abrir una imagen para esta utilidad, y se abrirá un cuadro para su configuración. Este es un tema bastante complejo y que trataremos en otro artículo.

Finalización del ejemplo

Una vez que hemos terminado con este último paso, procederemos a hacer clic en “Aplicar”, para que el resultado se vea en la vista de diseño (esto pueden hacerlo durante el proceso, ya que el cuadro no se cerrará). Luego cerraremos el cuadro “Propiedades de la página”. Para poder ver este trabajo en un navegador, deberemos guardar la página mediante “Archivo/Guardar”. Luego abrimos el navegador y podremos ver la página de ejemplo. El resultado debería ser el siguiente:

Para probar como funciona, deberemos crear una página de ejemplo. Para este trabajo, hemos creado una página XHTML 1.1 y un archivo CSS, con dos columnas flotantes con barra lateral izquierda, encabezado y pie.

El panel de estilo CSS

Cuando dicho panel no se encuentra abierto desde el inicio del programa, se puede abrir de dos formas. La primera, yendo a Ventana / Estilo CSS de la barra de herramientas estándar. La segunda, consiste en emplear las teclas del método abreviado: Mayús + F11. Cuando se abra el panel, puede hacerlo en varias posiciones diferentes, pero en todos los casos, siempre se abrirá en el mismo sitio que se le ha cerrado por última vez. Puede formar parte de una columna en cualquiera de las dos posiciones, puede ocupar un lugar entre las barras de herramientas que se encuentran en la parte superior de la vista, en la parte inferior o como ventana.

En la parte superior del panel, se encuentran dos botones destinados a seleccionar el modo en que se visualizará. Cuando seleccionamos “Todo”, en la parte central del panel podemos ver un listado completo de las reglas CSS que se encuentran en el archivo, mientras que si se selecciona “Actual”, se muestra la regla CSS del elemento seleccionado y las reglas que tienen influencia (las reglas de los elementos “padres”) en el elemento seleccionado. La siguiente imagen nos muestra la ventana en los dos modos de visualización.

Como vemos en la imagen anterior, cuando el panel se encuentra en modo “Actual”, aparece un sub-panel en el centro llamado “Reglas”. En la parte superior derecha de dicho sub-panel, hay dos íconos. Cuando hacemos clic en el izquierdo, se muestra la información de la regla seleccionada, mientras que cuando se hace clic en el ícono derecho, se ve la regla del elemento y sus padres.

Al pie del panel y a la izquierda, aparecen tres íconos cuya finalidad es cambiar el modo en que se visualizan las propiedades de las reglas CSS. Seleccionando el primero, se muestran todos los atributos posibles clasificados de acuerdo al tipo de atributo (Fuente, fondo, bloque, borde, cuadro, lista, posición, extensiones y tablas, contenido, comillas). En azul aparecen los atributos que tienen valores definidos, mientras que en negro se muestran aquellos que no tienen un valor establecido. Cuando se selecciona el segundo botón, los atributos también aparecen todos, pero ordenados alfabéticamente. También en este caso, los atributos que tienen valor definido se muestran en azul, mientras que los atributos no empleados (con su valor por defecto) se encuentran en negro. Seleccionando el tercer botón, solo se mostrarán los atributos con un valor definido.

También en el pie del panel pero a la derecha, también aparecen tres íconos. El primero permite adjuntar un nuevo archivo de estilo CSS. Cuando se selecciona esta opción, se abre un cuadro donde aparece, en primer lugar, un campo donde introduciremos la URL del archivo CSS. Debajo de éste, se encuentran dos selectores que nos permiten señalar como se vinculará el archivo de estilo con la página (vincular o importar). Aún más abajo podremos señalar el tipo de medio o medios para los cuales nos encontramos diseñando la página (para su visualización en pantalla, móvil, proyector, sistema Braille). En la parte inferior del cuadro, Dreamweaver nos dice que tiene hojas de estilo de muestra, las que podremos emplear como inicio de nuestro trabajo y modificarlas.

El segundo botón permite la introducción de una nueva regla CSS. Cuando seleccionamos esta opción, se abre un cuadro dividido en secciones. En la primera, podremos elegir el tipo de selector que emplearemos (class, id, modificar el existente o redefinir un elemento HTML). En la siguiente sección se define el nombre del selector y en la última sección, se definirá el lugar donde se introducirá la regla (en qué archivo CSS o si se desea incluir en el encabezado del HTML).

Modificación de estilos con el panel de estilo CSS

Cuando se desea ingresar una nueva regla CSS para un nuevo elemento, se emplea el botón ya descrito ubicado en el pie del panel. A modo de ejemplo, haremos una prueba sobre el archivo ya creado, introduciendo una imagen a la cual le modificaremos algunos atributos. Podremos el área de trabajo de Dreamweaver en modo “dividir” para poder visualizar tanto el código como el diseño. Luego seleccionaremos en la barra de herramientas estándar “Insertar / Imagen”. Seleccionaremos la imagen cualquiera y le colocaremos el texto alternativo (por ser un ejemplo, esto no es absolutamente necesario, pero es conveniente hacer las cosas en la forma correcta, de modo de ir acostumbrándose a la forma de hacerlo) e insertaremos la imagen.

Ahora introduciremos una nueva regla CSS, haciendo clic en el segundo botón de la derecha del pie del panel. Se abrirá el cuadro correspondiente, donde en el primer campo seleccionaremos “Etiqueta. Redefine un elemento HTML”. En el campo destinado al nombre del selector, aparecerá automáticamente “img” (lo que quiere decir que daremos atributos válidos para todas las imágenes del documento, excepto para aquellas que tengan reglas CSS definidas). En el último campo, seleccionaremos el archivo CSS de la página y haremos clic en “Aceptar”.

Una vez hecho esto, se abrirá un nuevo cuadro, el que se encuentra dividido en dos secciones verticales. A la izquierda, aparece un listado de las categorías o tipos de atributos que podremos definir, mientras que a la derecha, se encuentra la sección donde introduciremos los valores correspondientes a los atributos. En primer lugar, definiremos las dimensiones de las imágenes, haciendo clic en primer lugar en la categoría “bloque”. A la derecha, definiremos los valores para los diferentes atributos. Para el ejemplo, hemos decidido un ancho y una altura de 100px, un relleno (“padding”) de 5px para todos los lados de las imágenes, hacer que flote a la izquierda y márgenes de 5, 10, 5 y 0px arriba, a la derecha, abajo y a la izquierda respectivamente.

Luego le daremos un borde, haciendo clic en la categoría “borde”. Definiremos “solid” para el estilo de borde, 1px para el ancho y #03F para el color. El resultado (con la imagen seleccionada por ustedes) deberá ser parecido al siguiente ejemplo:

Las propiedades también pueden ser agregadas o modificadas en el propio panel. Para modificar una propiedad, basta con hacer clic sobre ella e introducir un nuevo valor. Para agregar una nueva propiedad, se debe hacer clic en el campo “Añadir propiedad”, ubicado al final de la lista de propiedades de la regla seleccionada. Una vez realizado esto, aparecerá un selector donde podremos elegir la propiedad. Al hacer clic sobre ella, la nueva propiedad aparecerá en el listado, donde le deberemos agregar el valor que deseemos.

Adobe Dreamweaver hace posible la utilización de varias vías para ingresar y modificar textos en un diseño. Esto no solo tiene la ventaja de permitir al usuario el empleo del sistema de trabajo que le resulte más cómodo, sino que además, dependiendo de la tarea que se encuentre desarrollando, pueda seleccionar el modo más conveniente para hacerlo.

Como agregar o modificar texto en un diseño

Todos los conceptos que manejaremos en adelante, serán mejor comprendidos si se realiza un trabajo práctico a la vez que se lee este artículo. Para ello, bastará con abrir Adobe Dreamweaver, crear un nuevo documento con su archivo CSS (recordemos que es preferible emplear siempre las versiones de los lenguajes y los métodos más avanzados, por lo que recomendamos emplear XHTML 1.1 y CSS en archivo aparte) para practicar todo lo que vayamos aprendiendo.

Agregar texto en el código HTML

Este es el método tradicional, consiste en agregar texto en una página web directamente en su código. Para ello colocaremos el espacio de trabajo en vista de código, que se verá de la siguiente forma:

Allí, agregaremos el texto en el sitio que decidamos o modificaremos el existente, dentro de uno de los párrafos o creando un nuevo párrafo. En este último caso, a continuación de una etiqueta de cierre de párrafo </p>, escribiremos el texto entre dos etiquetas <p> y </p> que generaremos.

Agregar el texto en la vista de diseño

Este es el método que distingue a los editores WYSIWYG como Adobe Dreamweaver, ya que permite introducir elementos o modificaciones de los mismos en misma vista de la página. Para este ejercicio, colocaremos el área de trabajo de Dreamweaver en vista de diseño, obteniéndose la siguiente vista:

Una vez allí, introduciremos el texto en el sitio que queramos o modificaremos el texto presente. Si hacemos clic en una línea de un párrafo, agregaremos el texto o podremos modificar el texto del párrafo seleccionado. Si le damos “enter”, generaremos un nuevo párrafo y podremos introducir allí un texto. Si pasamos a la vista de diseño o a la vista dividida, podremos apreciar que los cambios que introducimos en la vista de diseño son traducidos en la vista de código y viceversa.

Modificar textos con “Buscar y remplazar”

La forma más eficiente de sustituir un texto en Dreamweaver es emplear la herramienta de búsqueda y sustitución. Para esto, haremos clic en “Edición / Buscar y remplazar” de la barra de herramientas estándar, tras lo que se abrirá el siguiente cuadro:

En este cuadro seleccionaremos primero el lugar donde realizaremos la búsqueda. Para ello contamos con las siguientes opciones:

1. Texto seleccionado: Se realiza la búsqueda y sustitución en un texto previamente seleccionado.
2. Documento actual: La búsqueda y remplazo de texto se produce en todo el documento que se encuentra en pantalla.
3. Documentos abiertos: Busca y remplaza textos en todos los documentos que en ese momento se encuentran abiertos.
4. Carpeta: Al seleccionar esta opción, aparece un ícono que permite seleccionar una carpeta o introducir su nombre. La búsqueda se realizará en todos los documentos HTML y de texto que se encuentren en ella.
5. Archivos seleccionados en el sitio: La búsqueda y remplazo de texto se producirá en los archivos previamente seleccionados del panel Archivos (Ventana / Archivos de la barra de herramientas estándar).
6. Sitio local actual: La búsqueda comprenderá todos los archivos que se encuentran en todos los directorios del sitio en el que nos encontremos trabajando.

A continuación se puede elegir que tipo de búsqueda que se realizará, pudiendo optarse por tres tipos:

1. Código fuente: La búsqueda se producirá dentro del código.
2. Texto: Buscará el texto dentro de la vista en la que se encuentre trabajando.
3. Texto (avanzado): Permite la búsqueda dentro o fuera de la etiqueta HTML que se seleccione.
4. Etiqueta específica: Buscará la etiqueta HTML que se seleccione.

Luego, en el cuadro correspondiente, insertaremos el texto que deseamos buscar y en el siguiente, el texto que remplazará al existente. Debajo podremos optar por que la búsqueda sea sensible o no a mayúsculas y minúsculas, omitir o no los espacios en blanco o si se empleará expresión regular. Si selecciona esta última opción, se considera a algunos caracteres como operadores de expresiones regulares; por ejemplo, si se busca “el vaso v\*”, podrá encontrar “el vaso vacío” o “el vaso volcado

Como ejercicio, abramos el cuadro “Buscar y Remplazar”. En él seleccionaremos “Documento actual” y “Texto”. En el campo “Buscar” escribiremos “el color” y en el campo remplazar escribiremos “la coloración”. A continuación haremos clic en “Remplazar todos”, y los dos textos “el color” que aparecen en la página de ejemplo en ambas columnas, serán remplazados. Luego, podremos emplear otras opciones para familiarizarnos con esta poderosa herramienta.

En el cuadro, aparecen dos íconos, uno para guardar la búsqueda y otro para cargar una búsqueda guardada, que permiten automatizar tareas de búsqueda o búsqueda y remplazo que se realizan con frecuencia. Una vez finalizada la búsqueda y cerrado el cuadro, si se desea repetir la última búsqueda, bastará con presionar la tecla F3 y la misma se hará sin necesidad de abrir nuevamente el cuadro. Cada vez que se presione esta tecla, se obtendrá el mismo resultado que si se hiciera clic en el botón “Buscar Siguiente” del cuadro “Buscar y Remplazar”.

Buscar un texto seleccionado

Otra forma de buscar un texto determinado, es seleccionar el texto en cualquiera de los modos de vista de Dreamweaver y hacer clic en “Edición / Buscar selección” de la barra de herramientas estándar, o empleando las teclas de método abreviado “mayúscula + F3”. En este caso, se buscará un texto igual al seleccionado.

Para probar esta opción, seleccionaremos las palabras “El color de fondo de este div sólo se mostrará a lo largo del contenido” que se encuentra en la columna izquierda. Empleando cualquiera de los dos métodos descritos en el párrafo anterior, automáticamente quedará seleccionado un texto idéntico que se encuentra en la barra derecha de la página de ejemplo.