Diseño de Páginas Web con Dreamweaver CS3:
Entorno de trabajo y configuarción de un sitio Local.

Dreamweaver

Hasta hace muy poco tiempo el diseño de páginas Web exigía el conocimiento de los códigos propios del lenguaje HTML, DHTML, y últimamente XML los cuales pueden resultar confusos y de difícil manejo para una persona no especialista en tareas de programación informática. Sin embargo, la utilización de este lenguaje de programación está al alcance de cualquier usuario. Actualmente existen en el mercado distintos programas creados específicamente para facilitar el diseño de websites. Estos son editores en modo gráfico que nos facilita el diseño de una página Web. Dentro de esos editores encontramos a Dreamweaver.

Dreamweaver 8 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML

Se pueden 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.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, y otros más que tienen la ventaja de ser gratuitos como por ejemplo Arachnophilia.

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. Hay empresas que ofrecen este servicio en forma gratuita, pero con algunas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya y sin manejo de bases de datos. Hay que tener también en cuenta que estas empresas generan sus ingresos a través de la venta de espacios publicitarios dentro de nuestras páginas, publicidad que no podemos evitar y con frecuencia causa molestias al usuario.

Cuando se contrata un servicio de hospedaje es necesario contratar también un dominio. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, debe ser único. Es posible registrar un mismo dominio con distintas terminaciones, como por ejemplo, .net, .org, .es, .com o .com.mx.

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 del dominio de la empresa contratada.

Iniciar y cerrar Dreamweaver.

Desde el botón Inicio situado, en la esquina inferior izquierda del escritorio de Windows. Hacer clic sobre el botón Inicio, se despliega un menú; colocar el cursor sobre Todos los programas y aparece otra lista con los programas que hay instalados en tu computadora, buscar Macromedia (o Adobe), seguidamente Dreamweaver 8, (o Adobe Dreamweaver CS3) hacer clic sobre él, y y se iniciará el programa. Tambíen podemos iniciar el programa dando doble clic sobre el acceso directo que aparece en el escritorio.

Para cerrar Dreamweaver podemos utilizar el menú Archivo y luego la opción Salir, después de haber guardado nuestro documento. Si usamos la opción Archivo > Salir sin haber guardado previamente Dreamweaver nos preguntará si deseamos guardar nuestro documento antes de salir.

El entorno de trabajo de Dreamweaver.

El primer elemento que vemos es la barra de Menús que contiene los menús desplegables y nos sirven para trabajar con Dreamweaver: Archivo, Edición, Ver, Insertar, Modificar, Texto, Comandos, Sitio, Ventana y Ayuda.

Debajo de la Barra de menús se encuentra la barra Insertar que permite insertar Tablas, Formularios, Capas, Imagenes y muchos otros elementos más.

Debajo de la barra Insertar se encuentra la barra de herramientas Documento que nos permite obtener diferentes vistas del documento que estamos creando. También nos muestra la barra Título y algunas operaciones que se pueden realizar como son: Administrador de archivos, Depurador del servidor, Ayudas visuales, Vlidación del formato y Comprobar compatibilidad con navegadores.

Un elemento que no aparece dentro del espacio de trabajo es la barra de herramientas Estándar la cual contiene botones para las operaciones comunes que ya conocemos como son: Copiar, Cortar, Pegar, Abrir, Guardar, Deshacer, Rehacer, Nuevo. Para visualizar esta barra de herramientas hacemos uso del menú Ver y elegir barra de Herramientas y luego la opción Estándar.

Debajo de las diferentes barras de herramientas se muestra la Ventana del Documento que muestra el documento actual mientras se esta creando.


 

Inmediatamente debajo de la ventana de documento se encuentra el Selector de etiquetas que muestra la jerarquía de etiquetas que rodean a la seleción actual en la vista Diseño. Al dar clic sobre una etiqueta vemos que se selecciona todo su contenido, y si damos clic con botón derecho aparece un menú contextual cuyas opciones permiten Editar la etiqueta, Quitarla, Agregar una Clase o un Identificador a la etiqueta seleccionada.

La herramienta Mano permite hacer clic en el documento y arrastrarlo hasta la ventana del documento. Dando clic sobre la herramienta Seleccionar (flecha inclinada) se desactiva la herramienta Mano. La herramienta Zoom nos permite establecer un nivel de ampliación del documento. Enseguida vemos el tamaño de la ventana e inmediatamente después vemos el peso de la página y el tiempo que toma en descargarse incluidos todos los archivos contenidos.

 

En la parte inferior del marco de trabajo se encuentra el Inspector de Propiedades que permite ver y modificar diversas propiedades del objeto o texto seleccionado. Las propiedaes mostradas en el inspector cambian con cada tipo de objeto.

En la parte superior derecha del marco de trabajo se encuentran los Grupos de Paneles que están relacionados y apilados bajo un encabezado común, los cuales son: CSS, Aplicación, Inspector de etiquetas.

Para ampliar algún grupo de paneles de clic sobre la flecha que se encuentra a la izquierda de cada panel y para contraer usamos también la flecha que aparece a la izquierda del panel desplegado

Debajo de los grupos de paneles se encuentra el panel Sitio con el que se administran los archivos y las carpetas que forman el sitio. Los archivos y carpetas que muestra son los que están guardados en el disco duro y se asemeja al explorador de Windows.

Dreamweaver ofrece otros paneles, inspectores y ventanas que no se muestran por defecto, pero se pueden abrir utilizando el menú Ventana como son: el panel Historial, el panel Marcos, la Ventana Resultados, el Inspector de etiquetas, el inspector de código y el Inspector Lineas de tiempo.

La ventana de documento.

Se pueden elegir entre una de las vistas siguientes:

Configuración de un sitio local.

Siempre que trabajes en Dreamweaver deberás crear un sitio para cada Proyecto. Al definir un sitio local, está indicando a Dreamweaver el lugar en el que tiene intención de almacenar todos los archivos de un sitio concreto.

Un sitio web es un conjunto de archivos y carpetas, relacionados entre si, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio antes de crear las páginas. Para crear el sitio se recomienda primero crear una Carpeta en el disco duro local que será la carpeta raíz del sitio (cuyo nombre es el del sitio) y contendrá los documentos HTML que sean creados. Para organizar en forma más eficiente nuestros archivos debemos crear otras carpetas dentro de ésta, para almacenar las imágenes, las hojas de estilo, archivos de flash, etc.

Una vez que ya creamos nuestras carpetas que formarán parte del Sitio local, procedemos a definir el Sitio sin conexión a Internet pero que será visible con el explorador que tengamos instalado en nuestra máquina. Seguimos los siguientes pasos:

Paso 1. Para acceder a la ventana de Sitio lo hacemos con la opción Sitio del menú de Dreamweaver.

.
Paso 2.
  • En la casilla Nombre del sitio, hay que poner el nombre que quieras para el sitio. Es importante asignarle un nombre.
  • La casilla siguiente es más importante. En Carpeta raíz local hay que poner la dirección local del sitio. Es decir, es la carpeta que creamos por anticipado en nuestro disco duro.
  • En Dirección HTTP, sería la dirección del sitio en Internet. Por el momento no nos interesa ya que no será publicado en Internet.
  • La casilla Caché debe dejarse siempre activada. Al tener él caché activado se establece un registro de los archivos existentes de modo que Dreamweaver pueda actualizar rápidamente los vínculos al mover, cambiar el nombre o eliminar un archivo.
Paso 3.
  • Por último hay que darle clic al botón aceptar, para cerrar el cuadro de diálogo.

Si se desea, se puede definir la página de inicio desde esta ventana dando clic sobre la opción Mapa de diseño del sitio.Es importante que la página inicial del sitio tenga el nombre index.htm, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.

El panel Sitio mostrará a continuación una lista de todas las carpetas y archivos contenidos en el sitio local. La lista también actúa como administrador de archivos, ya que permite copiar, pegar, eliminar, mover y abrir archivos del mismo modo que en el explorador de Windows. En caso de no estar visible el panel Archivos se puede abrir a través del menú Ventana con la opción Archivos o también pulsando F8.

Otra forma de crear el sitio es utlizando la pestaña Básicas en lugar de la de Avanzadas.

Una vez definido un Sitio podemos editarlo y para ello utilizamos el menú Sitio y elegimos la opción Administrar sitios con lo que aparece una ventana similar a la mostrada en la figura. Con la opción Nuevo podemos crear un sitio nuevo y con Editar podemos realizar modificaciones al sitio selecionado.

Podemos Duplicar, Quitar, Exportar o Importar un Sitio. Una vez terminada la operación realizada Dreamweaver nos regresa a esta ventana y para terminar y grabar las operaciones realizadas damos clic en "Listo"

 

Para tener una idea de nuestro programa Dreamweaver, crearemos una página Web sencilla en la cual incluiremos básicamente texto y crearemos un enlace con otra página Web de nuestra misma carpeta.

Ahora vamos a modificar el título de la página, agregaremos un color de fondo y cambiaremos el tipo de letra.

Para hacer los cambios se requiere utilizar el menú Modificar y luego elegir Propiedades de la página.

Otra forma es abrir el Inspector de propiedades que se encuentra en la parte inferior de la ventana. Si está cerrado dar clic sobre Propiedades para abrirlo.

Para ver los cambios en Internet Explorer debemos oprimir F12.

 

Vamos a agregar un Título a la página y para ello damos clic sobre la opción Título/Codificación y escribimos el Título deseado.

En la opción Aspecto podemos elegir el tipo, el tamaño y el color de la fuente que aparecerá en todo el cuerpo de nuestra página. En Color de fondo elegimos el color de nuestra página.

Para este ejemplo podemos elegir el color del fondo y escribimos #6FFFC3 que es un tono aguamarina.

Con la opción Vínculos podemos elegir el color y el aspecto que tendrán nuestros hipervínculos en nuestra página.

Finalmente da clic sobre el botón Aceptar y nuestra página ya tiene otro aspecto. Probar con F12.

Ahora vamos a modificar el formato del texto y para poder hacerlo utlizamos el Inspector de propiedades. Si no te aparece es probable que se encuentre contraido por lo que deberás dar clic sobre la punta de flecha horizontal que se encuentra enseguida del título Propiedades.

Aquí puedes elegir la Fuente y para ello selecionamos la primera línea y desplegamos la lista y elegimos "Arial, Helvetica, Georgia" luego en Tam elegimos el tamaño de la fuente, por ejemplo 14 y si lo deseamos elegimos el color de la fuente que es el recuadro que aparece después de Tam. Ahora selecionamos la segnda línea y en Formato del Inspector de propiedades elegimos "Encabezado 3". Una vez terminadas las modificaciones guardamos el documento con la extensión HTM o HTML.

Finalmente crearemos el vínculo y esto lo logramos primero seleccionando la palabra que servirá para vincular con otra pa´gina que en este caso es ITHINKWEB, luego abrimos el Inspector de Propiedades y en el cuadro que dice Vínculo damos clic sobre el icono "Señalar archivo" y lo arrastramos hacia el nombre del archivo deseado y soltamos. De esta forma se crea el vínculo de forma automática, apareciendo en nuestra página el siguiente código:

<a href="pagina_ref.html">ITHINKWEB</a>

Con este procedimiento de arrastrar y soltar se crea el vínculo aún cuando nuestro archivo se encuentre en otra carpeta diferente, dentro del mismo sitio. Por ejemplo, si la página vinculada se encuentra en la carpeta PRUEBAS el código sería <a href="pruebas/pagina_ref.html">ITHINKWEB</a>.

Probar con F12.

Tipos de archivos de Flash

Dreamweaver viene con objetos Flash que pueden utilizarse con independencia de que tenga o no Flash instalado en su equipo. Antes de utilizar los comandos Flash que están disponibles en Dreamweaver conviene conocer los distintos tipos de archivos Flash que existen:

Archivos (.fla) de Flash.

Archivos de origen de cualquier proyecto, que se crean en el programa Flash. Este tipo de archivo sólo se puede abrir en Flash (no en Dreamweaver ni en los navegadores). Puede abrir el archivo Flash en Flash y, a continuación, exportarlo a SWF o SWT para utilizarlo en los navegadores.

Archivos SWF de Flash (.swf)

Versión comprimida del archivo Flash (.fla) optimizada para la Web. Este archivo se puede reproducir en navegadores y ver en Dreamweaver, pero no se puede editar en Flash. Éste es el tipo de archivo que se crea utilizando el botón Flash y objetos de texto Flash.

Archivos de plantilla Flash (.swt)

Estos archivos permiten modificar y reemplazar información de un archivo SWF de Flash. Se utilizan en el objeto de botón Flash, que permite modificar la plantilla con texto o vínculos propios, para crear un SWF personalizado e insertarlo en el documento. En Dreamweaver, estos archivos de plantilla se encuentran en las carpetas Dreamweaver/Configuration/Flash Objects/Flash Buttons y Flash Text.

Elementos Flash (.swc)

Archivos Flash SWF que permiten crear aplicaciones de Internet completas mediante su incorporación en una página Web. Los elementos Flash tienen parámetros personalizables que pueden modificarse para realizar diferentes funciones de la aplicación.

Formato de archivo Flash Video (.flv)

Archivo de vídeo que contiene datos codificados de audio y vídeo para enviarlos a través de Flash Player. Por ejemplo, si tuviera un archivo de vídeo de QuickTime o Windows Media, debería utilizar un codificador (como Flash  8 Video Encoder) para convertir el archivo de vídeo en un archivo FLV.

Inserción de un archivo SWF contenido de Flash

En la vista Diseño de la ventana de documento, sitúe el punto de inserción en el lugar donde desea insertar el contenido y luego siga uno de estos procedimientos. En la categoría Común de la barra Insertar, seleccione Media y haga clic en el icono Flash. también puede hacer uso del menú Insertar > Media > Flash. En el cuadro de diálogo que aparece, seleccione un archivo Flash (.swf). En la ventana de documento aparecerá un marcador de posición de Flash. Cuando insertamos Texto o un Botón flash tenemos un cuadro de diálogo diferente y se inserta directamente el objeto.

Inserción de Flash Video

Puede insertar fácilmente contenido de Flash Video en las páginas Web sin necesidad de utilizar la herramienta de creación de Flash. Para poder empezar, debe disponer de un archivo codificado de Flash Video (FLV). Dreamweaver inserta el componente de Flash Video; al visualizarlo en un navegador, este componente muestra el contenido de Flash Video seleccionado, además de un conjunto de mandos de reproducción. Para más información consulta el Tutorial de Flash.

Ir a Inicio