Introducción a Dreamweaver 3

Como hemos visto, HTML es un lenguaje de marcación que puede viajar con el propio texto que se desea formatear. En principio, con cualquier editor de textos, por simple que este sea, se podría crear un documento HTML. Ahora bien, el proceso de componer una página de HTML puede ser tedioso y largo, ademas de que precisa del recuerdo de diferentes "tags" y las oportunas normas sintácticas. En todo este proceso hay que imaginar como va a quedar la página una vez terminada, ya que no estamos editando de modo visual. Esta manera de trabajar no es la mas adecuada para diseñadores.

Para mejorar este proceso creativo surgieron los editores de páginas web. Estos editores permiten trabajar en un modo visual, más cercano a un entorno WYSWYG(Whay You See is What You Get), típico de otros programas de diseño y maquetación de documentos. Dreamweaver fuen uno de los primeros editores de HTML. En la acutalidad, existen otros editores de páginas web, pero sin duda es Dreamweaver el que ocupa la posición de liderazgo actualmente.

Con Dreamweaver podemos crear páginas HTML sin tener que preocuparnos por el código HTML, recordar todos los "tags" necesarios para componer nuestra página o tener que previsualizar en nuestra cabeza cual será el resultado compositivo del documento final. De esta manera, crear un documento HTML se convierte en una tarea menos parecida a programar y más parecida a maquetar, tal y como se haría en un programa de maquetación tradicional como puede ser QuarkExpress o Pagemaker. En resumen, podríamos decir que Dreamweaver es un programa de "maquetación" de páginas web, salvando las lógicas distancias que lo separan de un programa de maquetación normal.

Con fin de facilitar aun más el proceso de creación de una página web, Dreamweaver añade junto a las opciones que permiten formatear un documento HTML otras opciones que pueden ser de gran utilidad, como funciones javascripts predefinidas (behaviors), opciones de HTML dinámico. Asi mismo, añade otras herramientas que potencian la productividad, como son la creación de plantillas o "templates" que permiten mantener y modificar la apariencia completa de un site modificando un solo documento, la posibilidad de convertir en símbolos elementos que se repiten en muchas páginas del site de manera que cualquier cambio en este símbolo actualice dicho elemento en todas las páginas del site. Por otro lado, alrededor de estas herramientas de diseño y composición se han ido añadiendo otras opciones que permiten gestionar un site completo, como puede ser el cliente FTP incluído en Dreamweaver.

Como verá, un editor de páginas web como Dreamweaver es ha dejado de ser una herramienta de composición para convertirse en una herramienta completa para la gestión y desarrollo de sitios web completos.

. Filosofía de la aplicación / Roundtrip

El objetivo final de todo editor de páginas web es generar un documento HTML correcto, que funcione en la mayoría de los navegadores y que facilite todo el proceso de creación al diseñador. La manera de conseguir esto varía enormemente de unos editores a otros. La filosofía de "transparencia" con la que Dreamweaver genera un documento HTML es en gran parte la responsable del éxito de esta aplicación.

El código HTML generado con Dreamweaver es bastante correcto, dando además la posibilidad de adaptarlo automáticamente a navegadores más antiguos. Dreamweaver utiliza la tecnología propia de Macromedia "Roundtrip".

Cuando creamos un documento nuevo en Dreamweaver, aparece una ventana en la que podemos ir añadiendo todos los elementos de nuestra página de manera visual. Esta ventana es el documento en sí, con bastante parecido a como se verá finalmente en el navegador. A medida que vamos añadiendo elementos a nuestro documento, Dreamweaver va generando el código HTML necesario. Cualquier cambio o modificación es inmediatamente actualizada en el código HTML. De igual forma, en cualquier momento podemos acceder al código HTML que se ha ido generando y editarlo manualmente, de manera que los cambios practicados afecten inmediatamente a la parte visual del documento. Esta doble manera de editar un documento HTML, perfectamente sincronizada entre el modo de edición visual y el modo de edición manual es lo que se llama Roundtrip.

De esta manera, tanto el diseñador menos familiarizado con lenguajes de marcación como HTML, como los programadores más experimentados tienen en Dreamweaver un gran aliado, ya que pueden editar un documento de la manera que resulte más conveniente en cada momento.

. Ajustando las preferencias de Dreamweaver

Dreamweaver es un programa que permite ser personalizado en un alto grado. Para ello, tenemos un amplio panel de preferencias que vamos a desglosar en este apartado, de manera que el usuario pueda ajustar las opciones más comunes a su peculiar manera de trabajar.

Partamos de la base de que Dreamweaver es un programa de tecnología abierta y que cualquier persona puede personalizar los menús de la aplicación, añadir nuevos comandos y behaviors a la aplicación, asi como eliminar parte de los existentes. Estas opciones de personalización requieren un alto nivel de programación y se escapan al contenido de este curso. Nos centraremos aqui en las posibilidades de personalización que tiene el programa en su edición estándar, sin que esta haya sido modificada previamente. Para aquellos que tengan interés en estas opciones, hay más información al respecto en http://www.macromedia.com

Centrándonos en las preferencias, encontraremos el panel de preferencias a través de menu Edit > Preferences...

Una vez alli, tendremos accesibles distintos paneles en los que podremos ajustar la manera de mostrarse y de trabajar con distintos elementos y herramientas de la aplicación, de los cuales veremos a continuación los más importantes:

. General

General

En el panel de preferencias General se pueden ajustar aspectos importantes de la aplicación. Entre esos aspectos caben destacar los siguientes:

  • Update links: En este parámetro se puede decidir si la acutalización de los enlaces de los documentos de un site será automática o por el contrario tenemos preferencia porque se nos pregunte cuando esto sea necesario.
  • Dictionary: En este parámetro podemos elegir cual será el diccionario a utilizar en la corrección ortográfica que incluye Dreamweaver. En ese sentido podremos elegir entre los distintos diccionarios que esten instalados en la carpeta Configuration/Dictionaries, dentro de la carpeta de la aplicación. Se pueden descargar diccionarios desde http://www.macromedia.com

    TRUCO: Para añadir nuevos diccionarios a Dreamweaver, no basta con copiar los diccionarios descargardos a la carpeta Configuration / Dictionaries. Dentro de esa carpeta hay un fichero llamado Dictionary.ini. De este fichero primero hemos de hacer una copia de seguridad, por si acaso necesitamos recuperarlo más tarde. Una vez hecho esto, podemos abrirlo en cualquier procesador de textos y modificarlo de manera que aparezca el nuevo diccionario añadido en la carpeta entre corchetes. A continuación tenemos un ejemplo de un fichero Dictionary.ini al que se le ha añadido el diccionario español (en negrita):

    [English.dat]
    English (US) = 128
    English (UK -ise) = 64
    English (UK -ize) = 32

    [Spanish.dat]

    [French.dat]

    [German.dat]
    German (Scharfes s) = 128
    German (Doppel s) = 64

    De no hacer esto previamente, la aplicación Dreamweaver no nos mostrará los diccionarios añadidos a esa carpeta en el panel de preferencias y en consecuencia no podremos cambiarlos.

  • Add Extension when saving: Con esta opción podemos elegir la extensión que será añadido a nuestros ficheros cuando se salven. Esta opción por defecto es "html", aunque podemos cambiarla.
  • Show only site window on Startup: Cuando Dreamweaver arranca, por defecto crea un nuevo documento en blanco y muestra la ventana en la que esta definido el sitio en el que actualmente estamos trabajando. Esta opción puede ser desactivada aqui, de manera que solo nos muestre el sitio al arrancar pero no cree ningún documento nuevo. En ocasiones esto es bastante aconsejable.
  • Maximun number of History steps: Todos los comandos aplicados a un documento se van almacenando en una ventana "histórica", llamada History. El número de pasos que se pueden llegar a almacenar se define en este parámetro. Hay que tener en cuenta que la ventana History puede ser de gran utilidad en procesos de automatización de tareas, ya que conviene que el número de pasos guardados no sea pequeño en exceso.

. External Editors

External Editors

Dreamweaver es una aplicación que por su manera de trabajar, puede derivar determinadas tareas a un editor externo. En este panel de preferencias podemos ajustar que tipo de ficheros serán tratados por un editor externo y cual será ese editor externo. Para ello, podemos añadir distintas extensiones de ficheros y relacionarlas con los editores externos de la columna derecha.

. Floating Palettes

Floating Palettes

En este panel de preferencias podemos ajustar las distintas paletas que estarán siempre encima del documento, que en el ejemplo de la ventana superior son todas. También podemos ajustar cuales serán las ventanas que serán accesibles desde el "Launcher" o lanzador. Este lanzador es una ventana desde la que podemos acceder a las distintas paletas de control de la aplicación con un solo click, sin tener que buscarlas por los menús. Este lanzador también se visualiza en la parte inferior-derecha de la ventana del documento en que estemos trabajando. Para abrir el "Launcher" o cualquier otra paleta de control del programa, podemos acudir a menu Window.

. Fonts / Encoding

Fonts / Encoding

En este panel de preferencias podemos ajustar dos cosas importantes: Las fuentes con las que se visualizarán por defecto nuestros documentos cuando los estemos editando y el sistema de codificación de caracteres que se utilizará por defecto. Como se sabe las fuentes por defecto de los navegadores actuales son times y courier. En principio podemos escoger como fuente por defecto cualquiera de las fuentes que haya instaladas en nuestro sistema, pero esto solo afectará a como nosotros vemos las páginas. Como las verá el usuario final depende de la configuración que este tenga en su ordenador, por tanto conviene respetar los estándares si no queremos inducirnos a error. Por otro lado, el sistema de codificación de caracteres que utilizaremos dependerá del juego de caracteres más comunmente utilizado en nuestros documentos. Normalmente el utilizado por la mayoría de los lenguajes europeos es el Western (Latin1), aunque podemos elegir otros juegos de carácteres como el japonés o el Cyrilico.

. HTML Colors

HTML Colors

En este panel de preferencias definimos los colores que por defecto tendrán los elementos de todos los documentos que creemos en Dreamweaver. Este panel de preferencias marca los colores por defecto, aunque estos colores pueden ser individualmente ajustados en las propiedades de cada documento posteriormente.

Una funcionalidad muy importante de este panel de preferencias, es la posibilidad de ajustar distintos colores a los "tags" de HTML, de manera que cuando visualicemos el código estos tengan un color distinto y podamos identificarlos más claramente.

TRUCO: Puede ser de mucha utilidad ajustar una serie de colores para distintos "tags" relacionados entre si, de manera que sean facilmente identificables en esas ocasiones en que tenemos que editar el código HTML de una página manualmente. Por ejemplo, los formularios y los tags relacionados con los formularios pueden tener un color propio, los "scripts" pueden tener otro color asociado, los "tags" de formateado de textos pueden tener otro. Asi, podemos facilitarnos mucho la labor de localización y edición de código manualmente.

. HTML Format

HTML Colors

En este panel de control se ajustan algunas de las características con las que Dreamweaver generará el código HTML de nuestros documentos. Por ejemplo, podemos elegir que los "tags" se escriban siempre en Mayúsculas, que los atributos de los "tags" lo hagan en minúsculas. No se pueden cambiar grandes aspectos en el estilo de HTML que Dreamweaver genera automáticamente, pero algunos aspectos de este estilo si. De todas formas, el HTML que genera Dreamweaver es bastante "limpio" si lo comparamos con otros editores de páginas web.

. Invisible Elements

Invisible Elements

Cuando Dreamweaver inserta en el código algunos elementos que no son visibles en la parte "gráfica" del documento, añade una especie de "escudos" amarillos que indican la existencia de ese elemento invisible en el código. En este panel de preferencias podemos elegir cuales de esos elementos invisibles serán visible en la forma de edición gráfica y cuales no. De tal forma, podemos hacer que se muestren o se escondan los "scripts" de un documento, los campos ocultos de un formulario, los enlaces "anchor" dentro de un mismo documento, los "tags" de otros lenguajes como ASP o CFML.

El hecho de que estos elementos sean o no visibles en el modo de edición gráfica no afecta para nada al código HTML, simplemente supone una mayor o menor claridad a la hora de editar gráficamente un documento en Dreamweaver.

. Layers

Layers

Por defecto, cada vez que insertamos una layer en un documento, esta layer adopta una serie de propiedades iniciales que se toman de las que hayan sido establecidas en este panel de preferencias. Asi, podemos definir cual será el "tag" con el que se genere la layer, que como veremos en el capítulo adecuado pueden ser varios, cual será el ancho y el alto de esa layer, su color de fondo, etc..

IMPORTANTE: Cuando un documento que contiene "layers" de HTML dinámico es visualizado en Netscape, en ocasiones si la página se recarga accidentalmente o se redimensiona, las capas se descolocan y la página puede mostrar un aspecto caótico. Para evitar eso, Dreamweaver añade un parche en forma de función Javascript que resuelve este problema. Desde este panel de preferencias podemos elegir la opción de que este "parche" se inserte automáticamente en el documento cuando creemos una layer. También podemos escoger manualmente esta opción posteriormente, pero no es mala idea que este proceso se automatice.

. Preview in Browser

Preview in Browser

Dreamweaver nos permite en cualquier momento de la edición, visualizar nuestro contenido en uno o en varios navegadores predefinidos. En este panel de preferencias es donde definimos cuales serán esos navegadores y cual será el atajo de teclado que nos lleve hasta ellos.

. Status Bar

Status Bar

En la ventana del documento en el que estamos trabajando, en la parte inferior, Dreamweaver muestra siempre información que puede ser muy interesante cuando estamos trabajando en un documento. De tal forma, podemos configurar en la parte inferior de la ventana, el tamaño de la ventana para que se ajuste a los tamaños y las resoluciones estándar. Con esta opción tendremos un tamaño de trabajo bastante aproximado al tamaño real en que serán visualizadas nuestras páginas. Por otro lado también se nos muestra el tamaño actual del fichero que estamos creando y el tiempo que tardaría en ser cargado (de manera aproximada) en un modem que trabaje a una velocidad determinada. Todos esos valores se pueden definir en este panel de preferencias. Asi, podemos elegir cual será la velocidad del modem que se tomará como referencia para calcular el tiempo de descarga, o cuales serán los distintos tamaños estándar con los que queremos trabajar.

También podemos elegir si mostrar o no el mini lanzador del que hablabamos anteriormente.

Hasta aqui hemos visto algo más en profundidad como podemos personalizar la aplicación a nuestras necesidades, gracias al amplio panel de preferencias que incluye Dreamweaver 3. Hemos visto las opciones más importantes, aunque hay algunas más que sin ser menos importantes son bastante menos usuales. Mi consejo es que aproveche el alto grado de personalización que le ofrece Dreamweaver y que haga de esta herramienta el entorno de trabajo más agradable posible, cosa que no le será dificil. Algunas opciones de personalización le ahorrarán mucho tiempo a la hora realizar determinadas actividades, si las adecua a sus métodos de trabajo. En ese sentido no voy a sugerirle que configure la aplicación de esta o de aquella otra manera. La mejor configuración es aquella que le haga sentir más cómodo a la hora de trabajar.

. Interface y paletas

Cuando abrimos Dreamweaver nos encontraremos un aspecto similar al de la imagen siguiente. Esta interface no es muy distinta a la de otras aplicaciones de edición. En primer lugar tenemos el documento sobre el que podremos empezar a trabajar. Este documento es ya un documento HTML. Aunque no veamos el código correspondiente, Dreamweaver ya ha incluido los "tags" HTML correspondientes para definir un documento HTML, también ha creado la cabecera y el cuerpo del documento. Lo que estamos viendo en la ventana del documento en la imagen de ejemplo es el cuerpo del documento HTML.

A la izquierda del documento tenemos la paleta Objects. En esta paleta se encuentran gran parte de los elementos más comunes que necesitaremos insertar/definir en nuestros documentos.

A la derecha del documento vemos el Launcher, desde el que podremos lanzar otras paletas de control más especificas, que nos permitirán tener a mano herramientas de control sobre distintos aspectos de nuestros documentos y sitios web.

Finalmente, en la parte baja de la imagen nos encontramos la paleta Properties. Esta paleta es bastante útil, ya que desde ella podremos ajustar los parámetros y caracteristicas de los elementos añadidos en nuestros documentos HTML. Esta paleta cambia su contenido de manera contextual, en funcion al elemento seleccionado sobre la ventana del documento.

Interfaz

En la parte superior, tenemos una barra con los distintos menús de la aplicación. Gran parte de ellos son comunes a otras aplicaciones, como el menú File, Edit o Help. El resto de los menús son más específicos de Dreamweaver.

Iremos profundizando en los distintos menús y paletas de esta aplicación a medida que vayamos avanzando por este curso. De momento, en este primer contacto con la interface daremos una pequeña explicación de cada una de las distintas paletas y menús de la aplicación.

  • Menu File: En este menú se encuentran las opciones comunes de abrir y guardar ficheros. También encontramos las opciones de Importar y Exportar, las opciones de previsualización en los navegadores predefinidos en las preferencias, asi como opciones para chequear la compatibilidad del documento con navegadores antiguos y que los "links" de un documento funcionan perfectamente.
  • Menu Edit: En este menú encontramos las opciones de copiar y pegar, rehacer y deshacer, encontrar y reemplazar. En este menú encontramos las preferencias del programa.
  • Menu View: Encontramos las opciones de mostrar o esconder distintos elementos del documento, como pueden ser los elementos invisibles, los bordes de los frames, los bordes de las capas, los bordes de las tablas. También se pueden mostrar las reglas y ajustar la rejilla o "grid" desde aqui.
  • Menu Insert: Desde este menú podemos ir insertando distintos elementos a nuestro documento. La variedad de elementos que podemos insertar desde este menú va desde imagenes o elementos multimedia hasta datos desde un fichero tabulado, pasando por frames, tablas, scripts, formularios o enlaces dentro del documento actual (anchors). La mayoría de los elementos que se pueden añadir desde este menú, se pueden añadir también desde la paleta Objects.
  • Menu Modify: Desde este menú podemos modificar las propiedades de los elementos incluídos en nuestro documento. También podremos modificar otros aspectos relacionados con el site en el que estamos trabajando, como los elementos de la librería y los templates relacionados con el site.
  • Menu Text: Desde estos menús se pueden ajustar los parámetros del texto, tales como alineación, estilos, tamaños, etc.. En este menú estan accesibles tambien las hojas de estilos dinámicas (CSS).
  • Menú Commands: En este menú estan accesible algunos de los comandos destinados a automatizar algunas tareas tediosas en la creación de documentos. Opciones automáticas de optimizado de HTML, formatear u ordenar tablas son algunas de las cosas que podremos hacer desde aqui. Desde este menú tenemos la posiblidad de crear comandos personalizados que realicen distintas tareas repetitivas, a modo de proceso por lotes.
  • Menú Site: En este menú estan accesibles todos los controles que nos permiten gestionar un site completo desde Dreamweaver. Las opciones son muy avanzadas y las veremos en más profundidad en el capítulo 12.- Administrando el site.
  • Menú Window: Desde este menú podremos abrir las distintas ventanas y paletas de Dreamweaver, asi como navegar por los distintos documentos que estén actualmente abiertos. También podremos ordenar automáticamente todas las paletas abiertas, de manera que el espacio de trabajo quede más organizado u ocultar todas las paletas de manera que quede unicamente el documenot visible.
  • Menú Help: A través de este menú podremos acceder al centro de ayuda de la aplicación.

Veamos ahora las paletas más importantes de Dreamweaver:

  • Paleta Objects: En esta paleta están accesibles la mayoría de los objetos que se pueden incluir en un documento HTML. Esta paleta clasifica los objetos en distintos grupos, de manera que de un solo vistazo podemos tener accesibles los objetos relacionados entre si. De tal manera, tenemos los siguientes grupos dentro de esta paleta:
    • Common: En este grupo de objetos encontramos los elementos más comunes que se pueden añadir a un documento HTML, tales como imagenes, tablas, capas, películas de Flash, Applets de Java, elementos multimedia, datos desde un fichero tabulado, etc...
      Objects
    • Characters: Este nuevo grupo añadido en Dreamweaver 3, permite insertar en el documento caracteres especiales como los caracteres de marca registrada, el símbolo del euro o el simbolo de copyright.
      Characters
  • Forms: En este grupo están accesible todos los elementos que se pueden añadir a un formulario de HTML, como botones, campos de texto, botones de radio o campos ocultos. Como funcionalidad añadida en Dreamweaver 3, tenemos la posibilidad de añadir una lista de elementos que actuén como menú de navegación. Esta funcionalidad es bastante útil cuando tenemos un site con un gran número de enlaces.
    Form
  • Frames: En este grupo se han añadido algunos de los framesets más comunes ya predefinidos, de manera que no tengamos que crearlos manualmente.
    Frames
  • Head: En este grupo están accesibles algunos de los elementos más habituales que se pueden añadir a la cabecera de un documento HTML, tal como palabras claves, descripción del documento o un refrescado automático de la página.
    Head
  • Invisibles: Desde este grupo podemos añadir elementos invisibles a nuestro documento, como enlaces a partes del documento actual, comentarios, scripts o espacios en blanco.
    Invisible
  • Paleta Propiedades: En esta paleta irán apareciendo de manera contextual distintas propiedades relacionadas con el elemento seleccionado en el documento, de manera que podamos ajustarlas desde aqui sin tener que ir ajustandolas individualmente a través de los menús de la aplicación.
    Propiedades
  • Launcher: Desde esta paleta podemos ir abriendo las distintas paletas de control que hay en Dreamweaver, como la librería o la paleta de behaviors. Iremos viendo poco a poco esas paletas a lo largo de este curso. De momento baste decir que todas ellas son bastante útilies y que facilitan bastante la labor de editar documentos HTML. Todas esas paletas están accesibles a través del menú Window.
    Launcher

. Definiendo un site

Menu Site

Dreamweaver es una herramienta orientada a crear, edita y gestionar sites web enteros. En ese sentido, para dreamweaver un documento siempre forma parte del site actual en el que estemos trabajando. Con respecto a ese site, Dreamweaver calculará la URL de los enlaces y de los distintos elementos que vayamos añadiendo a nuestras páginas. Aparte de esto, la relación de un documento con el site del que forma parte es fundamental para distintas operaciones que Dreamweaver realiza. Por tanto, antes de crear un documento nuevo o a editar un documento existente, conviene que definamos un site, en el cual queremos trabajar.

Para definir un site, hemos de ir a menú Site > Define Sites..., tal como se muestra en la imagen de la derecha. Una vez alli, se mostrará una ventana como la siguiente:

Define Sites

En esta primera ventana, tenemos las siguientes opciones:

    New: Daría paso a la ventana desde la que se definirían las opciones de un nuevo site. Edit: Seleccionando uno de los sites que ya hemos creado anteriormente, podemos acceder a las opciones que lo definen para modificarlas si fuera oportuno. Duplicate: Duplicaria el site seleccionado. Esta opción puede ser muy adecuada para crear un site a partir de uno ya existente. Para ello, primero duplicariamos el antiguo site, y posteriormente editariamos la copia creada. Remove: Elimina el site seleccionado. Al eliminar un site, no estamos eliminandolo fisicamente del disco duro, simplemente dejamos de tener accesible ese site y sus parámetros desde Dreamweaver.

El botón Done indica que la operación que deseabamos realizar ya esta hecha y nos lleva de vuelta al area de trabajo de la aplicación.

Por tanto, a tenor de lo explicado anteriormente, a través del botón New... accedemos a la ventana en la que crearemos el nuevo site. En esta ventana, habremos de definir distintos aspectos de nuestro site, como la carpeta local en la que se encontrarán los documentos del nuevo site, el sitio remoto donde publicaremos esos documentos para que sean visualizados en Internet, a través de FTP, u otras configuraciones que describiremos a continuación en más detalle.

. Definir el sitio local

Site Local

Primeramente hemos de definir el sitio localmente, es decir cual será la carpeta de nuestro disco duro en la que se encontrarán los documentos que compondrán nuestro site. Para ello, tenemos que definir los siguientes campos:

  • Site Name: En este campo introducimos el nombre con el que queremos que sea conocido nuestro sitio dentro de Dreamweaver. Este nombre será el que utilizaremos después dentro de Dreamweaver cada vez que queramos trabajar en este site.
  • Local Root Folder: En este campo le indicamos a Flash cual será la carpeta "raíz" a partir de la cual se localizarán los documentos del site que estamos definiendo. Podemos introducir el nombre manualmente, aunque la opción más cómoda es hacer click en la pequeña carpeta que hay asociada a este campo y podremos navegar por los distintos directorios y carpetas de nuestro disco duro, hasta localizar y seleccionar la carpeta que deseamos como "raíz". Dreamweaver insertará las cadena adecuada en este campo automáticamente. Podemos activar o desactivar la opción de que la lista de ficheros locales se actualice automáticamente cada vez que se realice un cambio en la misma. Esta opción es bastante cómoda, ya que sino tendríamos que refrescar la lista manualmente.
  • HTTP Address: Si incluimos la dirección URL correspondiente al site que estamos creando, Dreamweaver podrá utilizar este parámetro para calcular automáticamente las URL absolutas de los enlaces del sitio. Veremos más adelante como funciona todo lo relacionado con los enlaces.
  • Use Cache to Speed Link Updates: Activando esta opción, Dreamweaver crea una cache de uso interno en la que se almacenan todos los enlaces asi como información cruzada de los distintos documentos que componen el site, de manera que determinadas tareas se realicen más rápido.

. Definir el sitio remoto

Site Remoto

Una vez definido el sitio localmente, tenemos la opción de definir el sitio remoto, que será aquel en donde publiquemos nuestro site. Este sitio remoto puede ser una localización dentro de una red interna a la que este conectada nuestro ordenador, incluso un directorio distinto dentro de nuestra misma maquina, o una dirección de Internet, en cuyo caso habrá que definir los parámetros de FTP que nos permitirán conectarnos con esa dirección para subir nuestros ficheros.

  • Server Access: Como ya hemos comentado anteriormente, la localización del sitio remoto puede ser "local" o puede ser una dirección de Internet. En este primer parámetro escojemos entre esas dos opciones, o una tercera que sería "ninguna de las anteriores", en cuyo caso no tendríamos definido sitio remoto.

Eligiendo una opción u otra, a continuación apareceran unos parámetros que nos permitirán configurar las distintas opciones de la localización remota de nuestro site. En la imagen superior tenemos un ejemplo de la apariencia que tendría esta ventana, caso de haber elegido la opción FTP en el parámetro anterior. En este caso, la información a incluir nos será facilitada por el servidor en el que queramos alojar nuestras páginas. En caso de haber escogido la opción "Local/Network", todo el proceso se limitará a escoger una carpeta en la red local a la que estemos conectados.

. Opciones Check in/Check out

Check in/Check out

Check in / Check out es una funcionalidad interna de Dreamweaver, pensada para facilitar el proceso de actualización de un site en un entorno de trabajo en equipo. Esta función puede ser muy útil en ese entorno de trabajo, aunque veremos más en detalle cual es esta funcionalidad en el capítul 12.- Administrando el site. De momento, esta opción no la activaremos.

. Site Map Layout

Site Map Layout

En esta ventana, describiremos algunos aspectos que le permitirán a Dreamweaver fabricar un "mapa" gráfico de nuestro sitio. Veremos esta opción en el siguiente apartado. De momento decir que en esta ventana hemos de definir cual será el documento de nuestro site que hará las veces de documento inicial, a partir del cual empezar a construir ese mapa con sus distintas ramificaciones.

  • Home Page: El documento a partir del cual se construirá el mapa.
  • Number of Columns: El número de columnas que tendrá ese mapa jerárquico. A mayor número de columnas, más páginas aparecerán alineadas en la misma fila en el mapa. A menor número de columnas, más serán las líneas en las que se distribuya el mapa.
  • Icon Labels: Cuando Dreamweaver crea ese mapa, junto a la representación gráfica de cada documento, se añade un texto descriptivo. En estos dos botones de radio podemos elegir si queremos que ese texto se corresponda con el nombre del fichero, o con el título definido en el documento HTML.
  • Options: Como opciones añadidas, podemos activar/desactivar que se muestren los ficheros marcados como "ocultos" y los ficheros dependientes de un documento, como pueden ser sus imagenes. Activar estas opciones daría como resultado un mapa más detallado, pero también más complejo.

. Design Notes

Site Design Notes

Una funcionalidad nueva en Dreamweaver 3, con respecto a versiones anteriores, es la posibilidad de añadir notas a distintos elementos de una página, de manera que sean visualizadas por otras personas cuando abran el documento. Esta utilidad, como algunas otras que hemos visto anteriormente o iremos viendo a lo largo de este curso, están orientadas a un entorno de trabajo en equipo.

  • Maintain Design Notes: Activa la opción de "notas de diseño", de manera que los documentos del site soporten esta funcionalidad.
  • Upload Design Notes for Sharing: Subiría las notas asociadas a nuestros documentos al sitio remoto, de manera que también puedan ser vistas por personas que se "descarguen" los ficheros del servidor para trabajar con ellos en otro lugar.
  • Clean Up... Esta opción eliminaria las notas que hubieran dejado de estar asociadas a un fichero del site, de manera que dejaran de "contaminar" el sitio.

Ajustando estas opciones, habremos definido un sitio y podremos empezar a trabajar en el. No necesariamente cada vez que definamos un sitio estaremos partiendo desde cero. En muchas ocasiones, definiremos en Dreamweaver un sitio que ya existía anteriormente en la carpeta seleccionada. En cualquier caso, desde el momento en que tengamos definido un sitio, Dreamweaver nos mostrará la información relativa a ese sitio en una ventana llamada Site Files, y que es accesible desde el menú Window. Desde esa ventana podremos abrir ficheros de nuestro site, cambiar nombres de los ficheros, añadir o eliminar directorios, publicar nuestro site en Internet y otras muchas actividades relacionadas con la administración y mantenimiento del site que veremos más adelante.

Site Window

En esta toma de pantalla, podemos observar cual es el aspecto que presenta la ventana Site Files una vez un sitio ha sido definido. Describamos algunas de sus zonas más importantes:

  • Ficheros Remoto / Mapa del sitio: Con estos dos botones podemos alternar entre visualizar los ficheros remotos (en caso de que estemos conectados al site remoto), o visualizar el mapa del sitio. Veremos un poco más adelante en este capítulo que es un mapa del sitio y como crearlo.
  • Lista de sitios Definidos: En esta lista desplegable aparecerán todos los sitios definidos en Dreamweaver, de manera que podamos cambiar el sitio en el que trabajamos en cualquier momento.
  • Opciones FTP: Este grupo de botones, que puede variar mostrando las opciones de Check in y Check out, son algunos de los controles que nos permitirán realizar labores de FTP. Describiremos en más detalle el funcionamiento de los mismos posteriormente.

. Creando un mapa del sitio

Una vez hemos definido un site, desde Dreamweaver 3 podemos realizar en cualquier momento un mapa gráfico del sitio, de manera que podamos de un solo vistazo comprobar la estructura actual del mismo. Esta es una gran ventaja para organizar mejor nuestros sitios y ver como están enlazados cada uno de nuestros documentos con el resto, como funciona la navegación y que páginas hemos dejado aisladas por error. Todas estas ventajas son especialmente útiles cuando retomamos un sitio que ya ha sido creado, bien por nosotros bien por otra persona, para reorganizarlo. En esas situaciones, el tiempo que se emplea para descifrar la estructura del sitio se puede ver muy reducido con el uso de esta herramienta, y esa es la razón por la que le dedicamos este apartado.

Este mapa puede mostrar información muy variada, según haya sido definida su estructura en la definición del site que hemos visto anteriormente.

A continuación tenemos un ejemplo de un mapa creado en Dreamweaver:

Mapa del sitio

El mapa que vemos arriba es un mapa de un site sencillo, pero sirve perfectamente para mostrar cual puede ser el resultado y la utilidad de esta funcionalidad. Como vemos, la página principal a partir de la cual se muestra el resto del sitio es "index.htm", que coincide con la página que fue definida en el site como documento "raiz" para componer el mapa.

TRUCO: Podemos variar el documento "raíz" del mapa en cualquier momento y no necesariamente tiene que coincidir con la "home page" del site. Esto último puede ser útilo cuando queremos comprobar de manera visual cuales son los enlaces que tiene un documento determinado. Para ello, basta con ir a las opciones de definición del sitio, menú Site > Define Sites..., para editar el site actual y cambiar el documento a partir del cual se construye el mapa en las opciones de Site Map Layout.

Para construir el mapa, lo único que tenemos que hacer es ir al menú Window > Site Map. Al hacer esto, automáticamente Dreamweaver construirá el mapa teniendo en cuenta los parámetros ajustados en la definición del site y nos lo mostrará en una ventana Site Files..., que como hemos visto anteriormente, es la misma desde la que podemos visualizar y administrar los ficheros de nuestro site.

Para reajustar algunas de las opciones de "layout" del mapa definidas para el site, podemos ir directamente al menú Site > Site Map View, en lugar de acudir nuevamente a la definición del site. En este menú, hay una opción que puede resultar muy interesante: Existe la posibilidad de guardar el mapa generado como una imagen. Para ello, basta con realizar menú Site > Site Map > Save Site Map y seleccionar uno de los formatos que nos aparecerán para salvar la imagen.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.