Unidad 1. Conceptos básicos de Dreamweaver MX 2004 (I)

Qué es Dreamweaver MX 2004

Dreamweaver MX 2004 es un software fácil de usar que permite crear páginas web profesionales.

Las funciones de edición visual de Dreamweaver MX 2004 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Te puedes descargar gratuitamente la última versión de Dreamweaver desde la página de Macromedia, la versión caduca al cabo de 30 días, pero seguro que te animas a comprar la versión de pago de este estupendo programa.

Si no conoces las características básicas de HTML puedes verlas aquí.

Editar páginas web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedia Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.

Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.

Unidad 2. El entorno de trabajo (I)

Vamos a ver cuáles son los elementos básicos de Dreamweaver MX 2004, la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.

La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.

Las barras

La barra de título

La barra de título contiene el nombre del programa (Macromedia Dreamweaver MX 2004) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

La barra de menús

La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.

La barra de herramientas estándar

La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc.

Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha.

Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.

La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.

Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.

Unidad 3. Configuración de un sitio local (I)

En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

Introducción

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.

Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.

Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.com en el navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm.

Crear o editar un sitio web sin conexión a Internet

Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios....

Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio.

En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opción Nuevo, como si se elige la opción Editar, se mostrará la misma ventana en la que definir las características del sitio.

Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

Para visualizar las características de una Categoría basta con seleccionarla de la lista haciendo clic en ella.

Vamos a ver los datos que hay que editar para la categoría Datos locales.

Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local.

Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto.

Estas tres características son las imprescindibles para definir un sitio local.

Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.

Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable de la pestaña Archivos.