Configuración básica de una página web con Adobe Dreamweaver CS4

En este pequeño tutorial que iniciamos, daremos a conocer varias herramientas de Adobe Dreamweaver CS4 mediante su uso en la creación de una página web sencilla. Probablemente el resultado diste mucho de una página web profesional, pero para comprender algunas funciones avanzadas de este programa, debemos en primer lugar conocer los procedimientos básicos.

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: