2. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Presentación del espacio de trabajo Macromedia Dreamweaver MX, es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Dreamweaver permite diseñar nuestro proyecto Web a partir de código HTML o a través de la edición visual. Es desde esta última forma como se enfocara el curso de sitio Web. Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el trabajo de desarrollo Web, mediante la creación y edición de imágenes en Macromedia Fireworks o Adobe Photoshop, o bien añadir objetos Multimedia Flash y su posterior importación directa a Dreamweaver.

3. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Cuando instalamos el programa, y lo abrimos por primera vez, Dreamweaver MX nos muestra la siguiente pantalla: Nota: Esta imagen corresponde a Dreamweaver MX ingles) Escogemos el espacio de trabajo, donde sus componentes están acoplados.

4. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Interfaz Cada uno de los elementos del espacio de trabajo tienen este icono, el cual permite visualizar o acoplar los paneles o barras de herramientas. Corresponde a los elementos que nosotros vemos en nuestra,es decir: barra de menú, paneles, herramientas, etc.

5. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo 1 2 3 7 5 6 4 1 Barra de Menú – Barra de Herramientas del Documento 2 Barra insertar permite de insertar rápidamente distintos objetos a nuestro espacio de trabajo. También podemos encontrar esta opción en la barra de menú > insertar 3 Grupo de paneles (diseño, código, aplicación, archivos, disposición avanzada, respuestas) 4 Botón que permite acoplar o visualizar el Grupo de Paneles. 5 Barra de Propiedades permite modificar las propiedades de los elementos que estén seleccionados. 6 Barra de Línea de tiempo: permite realizar animación flash. 7 Espacio de trabajo que puede visualizarse mejor al esconder el Grupo de Paneles

6. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de menú Explicación de los comandos más utilizados. Nuevo: permite crear un nuevo documento. Abrir: permite abrir un archivo HTML, ya creado Cerrar : permite cerrar el documento Guardar : permite guardar el documento. Guardar como : permite guardar un documento con otro nombre u otro formato. Guardar todo : comando utilizado en el trabajo de marcos, permitiendo guardar el conjunto de marcos. 1 Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.

7. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de menú Explicación de los comandos más utilizados. Deshacer: permite deshacer la ultima acción realizada. Rehacer : permite rehacer los cambios realizados. Cortar : permite cortar objetos seleccionados dentro del documento Copiar : permite copiar objetos seleccionados dentro del documento. Pegar: permite pegar objetos seleccionados dentro del documento. Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.

8. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de menú Explicación de los comandos más utilizados. Código: permite crear nuestra pagina a través de códigos HTML (script). Diseño: permite crear nuestra pagina a través de objetos visuales. Con esta opción no necesitamos saber de códigos HTML. Código y diseño: permite ver nuestra pagina a través de códigos y objetos visuales. Vista de tabla: permite visualizar tablas. Estas son parecidas a las capas pero más rígidas para diseñar. Reglas : permite visualizar o ocultar reglas de pagina , permitiendo establecer medidas en píxel reales. Cuadricula: permite visualizar en nuestro espacio de trabajo una cuadricula. Esta no se ve cuando navegamos (F12) nuestra pagina. 1 Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.

9. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de menú Explicación de los comandos más utilizados. Imagen : permite incorporar imágenes en nuestro proyecto. Imágenes interactivas: permite insertar y realizar interacción con diferentes elementos (imagen de sustitución, barra de navegacion, boton flash, texto flash,) dentro del proyecto. Media: permite insertar películas flash o de otros formatos. Tabla: permite insertar tablas, determinando nº de columnas y filas. Capa: permite insertar capas, las cuales pueden contener diferentes objetos dentro de esta (imágenes, tablas, películas, etc). Sus propiedades se establecen en el panel propiedades. Formulario: permite crear formularios (de contacto u otros). Hipervinculo : permite crear hipervinculos dentro de objetos seleccionados. Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.

10. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de menú Explicación de los comandos más utilizados. Propiedades de la pagina : permite cambiar las propiedades de nuestro documento. ( titulo, imagen de fondo, color de textos, color de fondo, color de vínculos, etc.) Propiedades de selección: permite visualizar la barra de propiedades Crear vinculo: permite crear vinculo en los objetos seleccionados ya sea con otro documento html o un sitio Web.(esta opción también se encuentra en la barra de Propiedades. Destino del vinculo: permite definir de que manera la pagina que se vincula sea visualizada. (blank – parent – self). Esta opción se encuentra dentro de la barra de propiedades. Organizar: permite distribuir los elementos de nuestro documento. Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.

11. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de menú Explicación de los comandos más utilizados. Permite modificar propiedades de texto , párrafo, formato de párrafo, alineación de texto, tipo de fuente, tamaño de fuente, color de fuente, etc. Estas opciones también las encontramos en la barra de propiedades siempre que el texto este seleccionado. Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.

12. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de menú Explicación de los comandos más utilizados. Permite realizar trabajos con mayor complejidad . En él encontramos las opciones para crear y ejecutar comandos definidos por el usuario. Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.

13. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra insertar los iconos indican diferentes opciones para insertar. 2 Contiene los elementos más utilizados para diseñar la página web, como por ejemplo insertar imágenes, tablas, capas, caracteres especiales, animaciones flash, formularios, frames (marcos), etc. Se divide en 12 paneles diferentes que se seleccionan a través de las etiquetas situada en la parte superior derecha de la paleta.

14. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Grupo de paneles Los grupos más utilizados son: Archivos: que permite visualizar los contenidos de nuestra carpeta raiz. Además de localizar el FTP (carpeta alojada en internet). Disposición avanzada : Permite el trabajo con capas y marcos . Visualizando y ocultando estos. 3 Permite acceder de forma rápida a comandos de diseño, código, aplicación, archivos, capas, marcos, entre otros. Botón que permite visualizar o acoplar el grupo de paneles. 4

15. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de propiedades 5 Permite modificar objetos seleccionados: capas, texto, marcos, imagen, botón, etc. Permite buscar en nuestro carpeta raiz; un archivo HTML para vincular Permite visualizar, una paleta de colores y determinar color de texto o color de fondo de capa Propiedades de texto Permite configurar el tamaño de texto, para Web. Configura la fuente a utilizar. Da la opción de configurarel texto: cursiva, negrita, parrafo,etc.

16. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de propiedades 5 Permite modificar objetos seleccionados: capas, texto, marcos, imagen, botón, etc. Permite visualizar, una paleta de colores y determinar color de texto o color de fondo de capa Permite buscar en nuestra carpeta raíz una imagen para como fondo Visible: deja visible a la capa Hidden: deja invisible a la capa Scroll: convierte nuestra capa en scroll (incluye barras de navegación vertical y horizontal.) Auto: incluye automaticamente scroll, sólo si es necesario Modificar ancho y alto de la capa Propiedades de capa

17. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra de propiedades 5 Permite modificar objetos seleccionados: capas, texto, marcos, imagen, botón, etc. Propiedades de imagen Indica el nombre y ubicación de la imagen seleccionada, llamada imagen de origen Modificar ancho y alto de la imagen Permite buscar en nuestro carpeta raiz; un archivo HTML para vincular Permite dar interacción total o parcial a una imagen, es decir, que al pasar el puntero o mouse sobre esa zona, este se convierte en una manito , indicando un vinculo o link Miniatura – previsualización de la imagen seleccionada Permite editar, la imagen en fireworks, programa de macromedia, similar a photoshop.

18. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Barra linea de tiempo indicador de fotograma, seleccionado 2 contiene los elementos básicos para realizar pequeñas animaciones. Sin embargo es recomendable realizar las películas flash, y luego importarla dentro de una capa.

19. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Espacio de Trabajo 7 Reglas que nos dan las medidas en píxeles reales. Para visualizarla ir a barra de menú > ver > reglas > mostrar Corresponde al área en la cual disponemos los diferentes objetos que componen nuestro sitio Web. Es decir es el área que visualizamos cuando navegamos (F12) nuestro sitio Web en Internet.

20. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Espacio de Trabajo 7 Corresponde al área en la cual disponemos los diferentes objetos que componen nuestro sitio Web. Es decir es el área que visualizamos cuando navegamos (F12) nuestro sitio Web en Internet. Esta cuadricula nos permite guiarnos en nuestro espacio de trabajo. Para visualizarla hacer clic en barra de menú > ver > cuadricula > mostrar cuadricula

21. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Espacio de Trabajo 7 Corresponde al área en la cual disponemos los diferentes objetos que componen nuestro sitio Web. Es decir es el área que visualizamos cuando navegamos (F12) nuestro sitio Web en Internet. 788 x 496 Señala la medida de nuestra ventana (visualización), la cual se puede modificar, haciendo chic en la flecha negra. 1K/1s indica el tiempo y peso que se demorara en descargar nuestro archivo HTML en Internet Al seleccionar editar tamaños aparecerá un listado de tamaños de los cuales, los más utilizados según a resolución de monitor son: Área visible descartando los menús y barras de navegación 760 x 420 px 955 x 600 px Configuración de monitor (resolución pantalla) 800 x 600 px 1024 x 768 px

22. 4º medio – Sitio Web Curso de Dreamweaver: interfaz presentación del espacio de trabajo Visita: http://es.geocities.com/r2_artesvisuales/ Consultas online: [email_address]