Educativo

1. TUTORIAL SOBRE DREAMWEAVER
Nombre : Paola Fernández Anchapuri
Profesor : Emilio Felix Alberto
Grado y Sección : 4 “J”
Colegio : “Republica del Ecuador”

2.  Ventana principal de DreamWeaver

3. ¿ QUÉ ES DREAMWEAVER?
 Dreamweaver CS6 es un software fácil de usar que
permite crear páginas web profesionales.
 Las funciones de edición visual de Dreamweaver CS6
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.

4. 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.

5.  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 previsualizar 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.

6.  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.
Para poner, obtener o proteger un archivo, haga clic en el botón de menú de "Estado de archivo".
Para previsualizar 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.

7.  El pánel objetos Este pánel contiene botones que permiten la creación e
inserción de diversos tipos de objetos, como tablas, vínculos, capas e
imágenes. El pánel 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 pánel.
 Si desea insertar un objeto en el documento haga clic en el correspondiente
botón del pánel 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.)
 Nota: Esto no permite omitir todos los cuadros de diálogo. Algunos objetos,
como las barras de navegación, las capas, los botones Flash, los marcos, etc.,
no insertan marcadores de espacio.

8. LAS BARRAS :
La barra la aplicación es una novedad en Dreamweaver CS4. 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

9.  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.
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.

10.  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.

11.  Las pestañas de documento Cada archivo que
tengamos abierto, mostrará una pestaña con su nombre,
lo que nos permitirá cambiar de uno a otro fácilmente. Si
junto al nombre aparece un *, indica que ese archivo
tiene cambios sin guardar. Podemos cerrar cada
documento clicando en el aspa, o acceder a otras
acciones haciendo clic con el botón derecho, comoCerrar
otros archivos.
 Dreamweaver CS4 añade una novedad. Debajo de las
pestañas encontramos los archivos a que utiliza nuestra
página, como la hoja de estilos, archivos JavaScript,
etc... pudiendo acceder a ellos con un clic. Esto nos
ahorrará bastante tiempo

12.  La barra de estado. Esta barra la encontramos
debajo de la ventana de documento, y nos da
información sobre el mismo.
 A la izquierda, encontramos el selector de etiquetas.
Nos sirve para seleccionar etiquetas completas.
Siguiendo hacia la derecha encontramos las
herramientas de Selección, Mano (para desplazarse)
y Zoom. Y otros datos como el tamaño de la ventana,
el tamaño de la página o su codificación
Hasta aquí las barras que siempre veremos en la
aplicación. A parte, existen otras que podemos ver u
ocultar desde el menú Ver → Barras de herramientas.

13.  La barra de herramientas estándar. La barra de
herramientas estándar contiene iconos para
realizar las acciones más habituales del
menú Archivo yEdición. De izquierda a derecha:
Nuevo archivo, Abrir, explorar con Adobe Bridge,
Guardar, Guardar todo, Imprimir el código fuente,
Cortar, Copiar, Pegar, Deshacer y Rehacer.

14.  La barra de herramientas de documento. La barra
de herramientas de documento contiene iconos
que nos permiten cambiar entre las distintas vistas
de edición y la vista en vivo, acceder cómodamente
al título de la página, o realizar las distintas
opciones de validación que nos ofrece el programa.

15.  La barra de representación de estilos. Esta barra,
mucho menos utilizada, nos permite ver la
apariencia de nuestra web en distintos dispositivos,
si estamos utilizando hojas distintas que dependan
del eso.
 Como veremos al personalizar el entorno, algunos
paneles, como Insertar nos permiten colocarlo
como otra barra de herramientas.