Tu portal de
formación online
United States

Infórmate
Inicio » Catálogo » Curso de Dreamweaver CS3 » 2. Crear SITIOS y páginas WEB

Curso de Dreamweaver CS3

2. Crear SITIOS y páginas WEB

 



Interfaz de Dreamweaver CS3.



Descripción de la Pantalla.

El formato de trabajo de Dreamweaver CS3 se basa en el de versiones anteriores del programa.
Combina el uso de paneles y conjunto de paneles para conseguir que el proceso sea lo más fluido posible.

Éste es el aspecto de la ventana de Dreamweaver MX 2004 en el proceso de trabajo (cuando haya un documento abierto).

Pantalla De Dreamweaver MX 2004

 

Éstos son los elementos que componen la pantalla de trabajo común de Dreamweaver CS3:

La Barra de menús: situada bajo la barra de título, permite acceder a todas las opciones del programa a través de sus menús.

La Ventana del documento: es el área principal de trabajo.
Aquí es donde van a abrir nuestras páginas Web y las editaremos. Ésta es una ventana que se puede minimizar, maximizar y restaurar.

Al iniciarlo por primera vez DW y no tener ningún archivo abierto todavía nos aparecerá la Ventana de bienvenida

Ésta es una ventana de ayuda que nos facilitará el acceso rápido a documentos recientes o nuevos.

Barra de Herramientas Documento:


Justo encima de la ventana de documento, Dreamweaver puede presentar dos barras de herramientas: Documento y Estándar.
La que vemos por defecto es la de Documento. Actúa directamente sobre la ventana de documento:

    • Para mostrar la vista del código HTML de la página Web: Código
    • Para mostrar una  vista conjunta del código y el diseño: Dividir
    • Para mostrar la vista del diseño nuestro documento: Diseño
    • Para dar un título a nuestra pagina Web en el cuadro de texto "Título"

Panel Insertar


Desde este panel y sus opciones, como desde su menú paralelo Insertar, introduciremos los elementos más utilizados para el diseño de los objetos de una página Web.

Panel de Propiedades


Es la herramienta principal para determinar los detalles de un objeto o texto seleccionado. El contenido de este panel varía dependiendo del objeto seleccionado en la ventana de documento (texto, imagen, tabla, ...), y así modificar sus atributos.

Menú de Paneles

Ocupa la parte derecha de la pantalla y está diseñado para contener los paneles más utilizados por el usuario.
Su uso es muy cómodo gracias a que se puede ocultar y visualizar todo el menú con sólo pulsar  el botón situado en medio de la barra que lo separa del resto de la pantalla.

Barra de Estado


Situada debajo de la ventana de documento.

    • Selector de etiquetas HTML. Éste es de gran utilidad. Si el documento es una página vacía solo se verá la etiqueta <body> ,pero a medida que la pagina se complique el Selector ampliará la lista de etiquetas según dónde se sitúe el cursor. Muestra las etiquetas que rodean la posición del cursor. Como su nombre indica, hace algo más que indicar la posición en el documento. Mediante él, se puede seleccionar rápidamente cualquier elemento que rodee al cursor en uso para modificarlo o eliminarlo.
    • Herramientas de visualización de diseño del documento. Desde la versión de DW 8 se han añadido este grupo de herramientas que recuerdan a las ayudas para la visualización de imágenes: Zoom en % (o usando la Lupa), Mano (para mover la visualización en un zoom cerrado) y la Flecha Negra que es el cursor normal.
      Es recomendable dejar el zoom al 100% y el cursor Normal mientras estemos trabajando.
    • Indicador de descarga, que nos informa del tamaño del documento y el tiempo previsto de descarga.
¡ojo! el arma secreta de dw

Una de las herramientas estrella de Dreamweaver es el Selector de etiquetas.
En la barra de estado siempre aparecen las etiquetas que rodean al cursor. Basta con picar en una de ellas para seleccionar el fragmento de código correspondiente en la ventana de trabajo

 



Barras de herramientas.

  • Para visualizar u ocultar una barra de herramientas, seleccionamos la opción Ver > Barras de herramientas y hacemos clic sobre la barra que se quiere visualizar u ocultar.
  • Para mover una barra de herramientas realizamos un arrastre sobre la zona punteada vertical de control situada a la izquierda de la barra . Si la barra está flotando hacemos el arrastre sobre la barra de título de la misma.

  • Si una barra de herramientas es flotante, la podemos fusionar con los márgenes superior o inferior de la ventana de documento sin más que arrastrarla hasta su nueva posición.

Barra de Herramientas Estándar:


Se muestra y oculta seleccionando Ver > Barras de Herramientas > Estándar.
Presenta las opciones básicas de gestión de ficheros junto con el uso del portapapeles y las opciones de deshacer y rehacer. Es común a muchos programas informáticos.
De forma predeterminada esta barra está oculta.



Paneles.

  • La visualización de los paneles y el resto de la interfaz de Dreamweaver se domina desde el menú VENTANA.
  • Los paneles INSERTAR y PROPIEDADES son los más importantes
    No se pueden incluir en el Menú de paneles y se pueden ocultar y visualizar directamente desde la opción Ventana.
  • Todos lo paneles tienen en su barra superior las mismas áreas sensibles:

PANEL/BARRA INSERTAR

El panel INSERTAR aparece por defecto como barra/menú, de la que se pueden elegir las categorías desde un menú.
Pues bien, tenemos la posibilidad de visualizar esa barra como si fuera un panel con solapas como los demás ( tal y como aparecía en versiones anteriores del programa).

  1. Pulsa la categoría de la barra de Insertar ( Común en el ejemplo)
  2. Se desplegará un menú con todas las categorías. Seleccionamos la última opción: Mostrar como fichas
  3. Ahora lo que tenemos es todas las categorías visibles en forma de solapas del panel Insertar.
    No varía su contenido pero se nos presenta más inmediato.

Para hacer el camino contrario, es decir, cambiar el panel Insertar por su visualización en barra solamente se debe pulsar el icono del panel y elegimos la opción Mostrar como menú.

¡LEY!

A partir de ahora visualizaremos el panel Insertar como panel, con sus solapas, y así nos referiremos a él al explicar su funcionamiento.


en la Versiónes MX...

... el panel Insertar no tiene ninguna visualización especial como hemos visto en la versión 2004.

Pero sigue siendo uno de los paneles capitales dentro del flujo de trabajo en Dreamweaver.

 

GESTIONAR PANELES

El Menú de paneles se puede configurar a placer por cada usuario para que aparezcan los paneles más útiles.
Para moverlos hemos de arrastrarlos desde la zona punteada de la esquina superior izquierda de cada panel .
Una vez fuera de su ubicación pasan a ser flotantes y se pueden cerrar fácilmente.
Para volver a abrirlos no encontraremos sus nombres en el menú Ventana.
Los paneles del Menú derecho se presentan en SOLAPAS . Son esas solapas las que podemos visualizar desde Ventana, y con ellas todo el conjunto de paneles

¡truco!

Para visualizar y ocultar TODOS los paneles que tengamos abiertos: Ventana>Ocultar paneles, o ,más rápidamente, Pulsa F4.

Podemos crearnos nuevos Paneles e incluso agrupar unas determinadas solapas en un panel u otro.
Para incluir una solapa en un determinado panel actuaremos como sigue:

  1. Seleccionamos la solapa que queremos incluir en otro panel.
  2. Pulsamos sobre el icono que aparece en la esquina superior derecha de cada panel.
  3. Del menú que se despliega elegimos la opción Agrupar "nombre de solapa" con y elegimos el panel en el cual se agrupará.
  4. Si queremos crear un panel elegiremos la opción Nuevo grupo de paneles.

Haciendo clic sobre el icono de la esquina superior derecha del panel, aparecen todas las opciones de configuración del mismo (a parte de las propias de cada panel) En este caso las del panel Bases de datos.



Espacios de trabajo.

En DW CS3 también puedes guardar tu ESPACIO DE TRABAJO, la configuración de paneles y barras de herramientas, para poder usarlo en próximas sesiones, al  igual que ocurre con otros programas gráficos en los que puedes configurar la apariencia de los paneles y el resto de la interfaz del programa.
 

De hecho DW ya tiene guardados varias espacios de trabajo.
Puedes acceder a ellos desde la opción de menú VENTANA > Diseño del Espacio de trabajo ...

Además tienes otra (Pantalla Doble) para aquellos usuarios que trabajen con dos monitores.

Si lo deseas, tu mismo puedes guardarte TU propio espacio de trabajo desde la opción VENTANA > Diseño de espacios de trabajo > Guardar Disposición de paneles.

 



Si desea obtener un acceso sin restricciones a los contenidos del curso de Dreamweaver CS3 y disfrutar de todas las herramientas del aula virtual (Videos explicativos streaming, acceso a los foros, chat, ejercicios resueltos, la ayuda del tutor, audioconferencia, estudio de grabación, test y actividades de autoevaluación, etc...) puede inscribirse completamente gratis y comenzar a realizar de forma inmediata el curso.