Dreamweaver Interfaz

4º medio – Sitio WebCurso de Dreamweaver: interfazpresentación del espacio de trabajo

Presentación del espacio de trabajoMacromedia 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.


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.


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.


1

2

3

7

5 6

4

1Barra de Menú – Barra de Herramientas del Documento

2Barra 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

3Grupo de paneles (diseño, código, aplicación, archivos, disposición avanzada, respuestas)

4Botón que permite acoplar o visualizar el Grupo de Paneles.

5Barra de Propiedades permite modificar las propiedades de los elementos que estén seleccionados.

6Barra de Línea de tiempo: permite realizar animación flash.

7 Espacio de trabajo que puede visualizarse mejor al esconder el Grupo de Paneles


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 documentoGuardar: 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.

1Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.


Barra de menú


Deshacer: permite deshacer la ultima acción realizada.Rehacer: permite rehacer los cambios realizados.

Cortar: permite cortar objetos seleccionados dentro del documentoCopiar: 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.


Barra de menú


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.

1Corresponde a la barra superior que aparece en todas las ventanas que abre nuestro computador, permitiendo ejercer las acciones más comunes en nuestro equipo.


Barra de menú


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.



Barra de menú


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.



Barra de menú


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.



Barra de menú


Permite realizar trabajos con mayor complejidad.En él encontramos las opciones para crear y ejecutar comandos definidos por el usuario.



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.


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.

3Permite 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


Barra de propiedades 5Permite 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.



Permite visualizar, una paleta de colores y determinar color de texto o color de fondo de capa

Propiedades de capa

Permite buscar en nuestra carpeta raíz una imagen para como fondo

Visible: deja visible a la capaHidden: deja invisible a la capaScroll: 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 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.


Barra linea de tiempo

indicador de fotograma, seleccionado

2contiene 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.


Espacio de Trabajo7

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.


Espacio de Trabajo7


Esta cuadricula nos permite guiarnos en nuestro espacio de trabajo. Para visualizarla hacer clic en barra de menú > ver > cuadricula > mostrar cuadricula


Espacio de Trabajo7


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


Visita: http://es.geocities.com/r2_artesvisuales/

Consultas online: [email protected]

http://es.geocities.com/r2_artesvisuales/

mailto:[email protected]

Dreamweaver Interfaz

Technology

Transcript of Dreamweaver Interfaz