INDICE

CONTENIDO

DEFINICIÓN……………………….….…..01

MENÚ……………………………..….…....02

VENTAJAS……………………...…………03

ENTORNO DE TRABAJO……….….……04

PRINCIPALES BARRAS DE

HERRAMIENTAS…………….……..…….05

Definición

Dreamweaver es la herramienta de diseño

de páginas web más avanzada, tal como

se ha afirmado en muchos medios.

Aunque sea un experto programador de

HTML el usuario que lo maneje, siempre

se encontrarán en este programa razones

para utilizarlo, sobretodo en lo que a

productividad se refiere.

Cumple perfectamente el objetivo de

diseñar páginas con aspecto profesional,

y soporta gran cantidad de tecnologías,

además muy fáciles de usar:..

MENÚ

A continuación se describirá los

elementos más importantes del

Menú

De Adobe Dreamweaver CS3: El menú

Archivo

Contiene los elementos de menú

estándar como Nuevo, Abrir, Guardar,

Guardar como. También contiene otros

comandos para la visualización o

manipulación del documento actual,

como Vista previa en el navegador e

Imprimir código. El menú

Edición

Contiene los elementos de menú

estándar como Cortar, Copiar y Pegar.

También incluye comandos de selección

y búsqueda, como Seleccionar etiqueta

padre, Buscar y reemplazar, y

proporciona acceso al editor de

Métodos abreviados de teclado y al

Editor de la biblioteca de etiquetas. El

menú

Menú

Menú

Ver Le permite obtener diversas vistas

del documento (como la vista

Diseño y la vista Código) y mostrar

y ocultar diversos tipos de

elementos de página y

herramientas de Dreamweaver

CS3. El menú

Insertar Ofrece una alternativa a la barra

Insertar para la inserción de

objetos en el documento. El menú

Modificar Le permite cambiar las

propiedades del elemento de

página seleccionado. A través de

este menú, puede editar los

atributos de etiquetas, cambiar las

tablas y elementos de tablas y

realizar diversas operaciones

relacionadas con elementos de

biblioteca y plantillas. El menú

Menú

Texto Le permite aplicar formato al texto

fácilmente. El menú

Comandos Proporciona acceso a diversos

comandos, entre otros, uno para

aplicar formato al código

en función de las preferencias

de formato y otro para crear un

álbum de fotos. El menú

Sitio Proporciona opciones de menú

para crear, abrir y editar sitios, así

como para administrar los archivos

del sitio actual (en Macintosh). El

menú

Ventana

Proporciona acceso a todos

los paneles, inspectores

y ventanas de Dreamweaver

CS3.

Ventajas

·

La gran ventaja de este editor sobre otros es su gran

poder de ampliación y personalización del mismo,

puesto que en este programa, sus rutinas (como la de

insertar un hipervínculo, una imagen o añadir un

comportamiento) están hechas en Javascript-C, lo que le

ofrece una gran flexibilidad en estas materias.

· Como editor WYSIWYG que es, Dreamweaver

permite ocultar el código HTML de cara al usuario,

haciendo posible que alguien no entendido pueda crear

páginas y sitios web fácilmente sin necesidad de escribir

código.

· Un aspecto de alta consideración de Dreamweaver

es su funcionalidad con extensiones. Es decir, permite el

uso de "Extensiones". Las extensiones, tal y como se

conocen, son pequeños programas, que cualquier

desarrollador web puede escribir (normalmente en HTML

y Javascript) y que cualquiera puede descargar e

instalar, ofreciendo así funcionalidades añadidas a la

aplicación.

El entorno

de Dreamweaver

Vamos a ver cuáles son los elementos básicos de Dreamweaver

CS6, 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 y dónde,

como veremos más adelante.

El entorno

de Dreamweaver

En el resto de esta unidad vamos a ir describiendo los puntos más

importantes señalados en esta imagen por los números en azul del 1

al 9.

1.- Las barras.

2.- Las pestañas de documentos.

3.- La barra de estado.

4.- El panel de propiedades.

5.- Área de paneles.

6.- Paneles y ventanas.

7.- Línea inferior de pestañas.

8.- Vista diseño del documento.

9.- Vista código del documento.

El entorno

de Dreamweaver

Las barras

1.- La barra de la aplicación.

La barra la aplicación se incorporó en la versión anterior de

Dreamweaver. Si tenemos la ventana maximizada veremos

todos los elementos de la barra ocupando una sola línea, si

no, ocuparán dos líneas, como en la imagen superior.

Esta barra contiene los siguientes elementos: los menús (en la

imagen, en la parte inferior), varios botones propios de la

aplicación, el conmutador de espacio de trabajo y una caja de

búsquedas para obtener ayuda on line.

Los botones propios de la aplicación, que aparecen junto al

icono, nos permiten (de derecha a izquierda) cambiar entre la

vista de diseño o código, acceder a las extensiones que se

pueden añadir, o al administrador de sitios, que ya veremos.

El entorno

de Dreamweaver

Las barras

Más hacia la derecha observamos el conmutador del

espacio de trabajo, como un desplegable. Un espacio de

trabajo es la configuración del entorno (paneles visibles

y su disposición) que podemos guardar y cargar. Lo

veremos más adelante.

Los menús, están agrupados en categorías.

Al hacer clic en Insertar, por ejemplo, veremos las

operaciones relacionadas con los diferentes elementos

que se pueden insertar en Dreamweaver. Todas las

opciones de Dreamweaver son accesibles a través de los

menús, aunque en ocasiones nos envíen a los paneles.

El entorno

de Dreamweaver

La barra de navegación con

navegador

Esta barra nos permite usar Dreamweaver como un

navegador web y navegar por las páginas de nuestro

sitio, aunque sólo tiene sentido con la Vista en vivo,

como ya veremos.

Como también veremos al personalizar el entorno,

algunos paneles, como Insertar nos permiten

colocarlo como otra barra de herramientas

Dreamweaver utiliza ventanas flotantes similares a las

barras de herramientas, que se conocen como paneles

(ventanas) o inspectores. La diferencia entre panel e

inspector es que, en general, la apariencia y opciones

de un inspector cambian dependiendo del objeto

seleccionado, mientras que el panel nos da acceso a

opciones generales fijas.

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. A continuación vamos a ver el inspector

de Propiedades y más adelante veremos el panel

Insertar.

Principales barras de

herramientas

La barra de herramientas

La barra de herramientas de Dreamweaver contiene botones que

permiten alternar entre diferentes vistas del documento

rápidamente, cambiar el título del documento o pre visualizar la

página en el navegador. Los elementos del menú Opciones

(botón situado en el extremo derecho de la barra de

herramientas) cambia en función de la vista que seleccione.

Para ver u ocultar la barra de herramientas, elija en el menú Ver

la opción Barra de herramientas.

Para ver sólo código en la ventana de documento, haga clic en

el botón Vista de código.

Para ver una vista que contenga las vistas de Código y de

Diseño, haga clic en el botón Vistas de código y diseño.

Para ver sólo la vista de Diseño, haga clic en el botón Vista de

diseño.

Para introducir un título para el documento, utilice el campo

Título. Si el documento ya tiene título, éste aparecerá en dicho

campo.

Principales barras de

herramientas

Para poner, obtener o proteger un archivo, haga clic

en el botón de menú de "Estado de archivo".

Para pre visualizar o depurar un documento en un

navegador, haga clic en Vista previa/depurar en

navegador y elija uno de los navegadores

enumerados en el menú emergente.

Para actualizar la vista de Diseño, haga clic en el

botón Actualizar vista de diseño.

Para obtener información de referencia sobre código

HTML, CSS y JavaScript, haga clic en el botón

Referencia.

Para desplazarse por el código, haga clic en el botón

Navegación por el código. Para obtener más

información, consulte "Introducción al depurador

JavaScript".

Para mostrar u ocultar la regla, la cuadrícula y las

ayudas visuales, haga clic en el botón de menú

Opciones.

Principales barras de

herramientas

El panel objetos

Este panel contiene botones que permiten la creación e

inserción de diversos tipos de objetos, como tablas,

vínculos, capas e imágenes. El panel contiene siete

categorías de forma predeterminada: Común, Formularios,

Marcos, Head, Invisibles y Caracteres. También contiene

botones que cambian de vista: Estándar y Disposición.

Cada uno de estos elementos serán explicados en temas

posteriores.

Para cambiar de categoría dé clic sobre alguna de las

pestañas situadas en la parte superior del panel.

Si desea insertar un objeto en el documento haga clic en el

correspondiente botón del panel o arrastre el ícono del

botón hasta la ventana de documento. Dependiendo del

objeto, aparecerá un cuadro de diálogo en el cual se le

pedirá que seleccione o inserte el archivo u objeto

deseado.

Si desea insertar un marcador de posición mantenga

presionada la tecla Control mientras da clic en el ícono

para insertar el objeto. (Por ejemplo, para insertar un

marcador de posición para una imagen sin especificar un

archivo de imagen, mantenga presionada la tecla Control y

haga clic en el botón Imagen.)

Principales barras de

herramientas

Inspector de propiedades El inspector de propiedades permite examinar y editar las

propiedades del elemento que esté seleccionado actualmente, puede

ser un objeto o texto. Es posible seleccionar los elementos en la

ventana de documento o en el inspector de código.

La mayoría de los cambios realizados en las propiedades se aplicarán

de inmediato en la ventana de documento. (Para algunas

propiedades, los cambios no se aplican hasta que se hace clic fuera

de los campos de texto de edición de la propiedad, se presiona Enter

o se presiona Tab para cambiar a otra propiedad.)

El contenido del inspector de propiedades varía en función del

elemento seleccionado. Si quiere obtener información sobre

propiedades concretas, seleccione un elemento en la ventana de

documento y, a continuación, haga clic en el icono Ayuda, situado en

la esquina superior derecha del inspector de propiedades.

El inspector de propiedades muestra inicialmente las propiedades del

elemento seleccionado que se utilizan con mayor frecuencia; para ver

todas las propiedades haga clic en la flecha de ampliación situada en

la esquina inferior derecha del inspector de propiedades, para ver

más propiedades del elemento.

Universidad Bicentenaria de Aragua

Cátedra: Informática IV

Elaborado por:

Gleidys Morales Profesora: Ysabel Sánchez