TECNOLOGÍA DE LA INFORMACIÓN Y COMUNICACIÓN ÁREA SISTEMAS INFORMÁTICOS. Entorno dreamweaver DESARROLLO DE APLICACIONES WEB I

Tamaño: px

Comenzar la demostración a partir de la página:

Download "TECNOLOGÍA DE LA INFORMACIÓN Y COMUNICACIÓN ÁREA SISTEMAS INFORMÁTICOS. Entorno dreamweaver DESARROLLO DE APLICACIONES WEB I"

Esperanza Guzmán Franco
hace 6 años
Vistas:

1 TECNOLOGÍA DE LA INFORMACIÓN Y COMUNICACIÓN ÁREA SISTEMAS INFORMÁTICOS Entorno dreamweaver DESARROLLO DE APLICACIONES WEB I Lic. RUBICELL PINEDA TELLEZ ALUMNA: DURÁN VARGAS CLAUDIA MATRICULA: e 15/JUNIO/2011

2 ENTORNO DE DREAMWEAVER 8 1. Barra de título 2. Barra de menús 3. Barra Insertar 4. Barra de herramienta de documento 5. Barra de herramientas representación de estilos 9. Paneles e inspectores 7. Barra de herramientas estándar 6. ventana de documento 8. Barra de estado

3 1. Barra de título: contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar. 2. Barra de menús: contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. 3. Barra Insertar: La barra Insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre del botón. Los botones están organizados en categorías, a las que puede cambiar en la parte izquierda de la barra Insertar. Si el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también otras categorías. Cuando se inicia Dreamweaver, se abre la última categoría con la que ha trabajado. La barra Insertar está organizada en las categorías siguientes: NOMBRE GRAFICO DESCRIPCIÓN Hipervínculo Vinculo de correo electrónico Anclaje con nombre El comando Hipervínculo permite crear un vínculo de texto hasta una imagen, un objeto u otro documento o archivo. Cuando el usuario hace clic en un vínculo de correo electrónico se abre una nueva ventana de mensaje en blanco. En la ventana de mensaje de correo electrónico, el cuadro de texto Para se rellena automáticamente con la dirección especificada en el vínculo del mensaje de correo electrónico. Permite establecer marcadores en un documento, que a menudo se colocan en un tema específico o en la parte superior del documento. Posteriormente podrá crear vínculos con esos anclajes con nombre que llevarán rápidamente al visitante a la posición especificada. Tabla Insertar etiqueta DIV Este inspector de propiedades permite establecer las propiedades de las tablas. Esta etiqueta se puede utilizar para crear bloques de diseño CSS e insertarlas en el documento.

4 Imágenes Media Fecha Server-Side Include Comentario Plantillas Selector de etiquetas Este inspector de propiedades permite establecer las propiedades de una imagen. Si no ve todas las propiedades de imagen como se muestran a continuación, haga clic en la flecha de ampliación situada en la esquina inferior derecha. Puede insertar archivos SWF u objetos de Flash, películas QuickTime o Shockwave, applets de Java, controles ActiveX y otros objetos de audio o vídeo en un documento de Dreamweaver. Dreamweaver proporciona un objeto Fecha que permite insertar la fecha actual con el formato que prefiera y ofrece la posibilidad de actualizarla cada vez que guarde el archivo. Un server-side include es un archivo que el servidor incorpora en el documento cuando un navegador solicita el documento del servidor. Un comentario es un texto descriptivo que se inserta en el código HTML para explicar el código o facilitar otra información. El texto del comentario aparece sólo en la vista Código y no se muestra en los navegadores. Puede crear plantillas mediante Dreamweaver para ayudar a los usuarios de Macromedia Contribuye a crear nuevas páginas, lograr un aspecto coherente para el sitio y permitir una actualización del diseño de muchas páginas a la vez. El Selector de etiquetas se utiliza para ajustar una etiqueta div alrededor de una de las imágenes de la página. 4. Barra de herramienta de documento: La barra de herramientas de Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño. La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.

En la barra de herramientas de Documento, aparecen las siguientes opciones: Mostrar vista de código sólo muestra la vista Código en la ventana de documento.

5 En la barra de herramientas de Documento, aparecen las siguientes opciones: Mostrar vista de código sólo muestra la vista Código en la ventana de documento. Mostrar vistas de código y diseño muestra la vista Código en una parte de la ventana de documento y la vista Diseño en la otra parte. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento. Mostrar vista de diseño sólo muestra la vista Diseño en la ventana de documento. Depuración del servidor muestra un informe que le ayudará a depurar la página de ColdFusion actual. El informe contiene los errores de la página, si los hay. Título del documento permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo. No hay errores de comprobación de navegador permite comprobar la compatibilidad con distintos navegadores. Validar formato permite validar el documento actual o una etiqueta seleccionada.

6 Administración de archivos muestra el menú emergente Administración de archivos. Vista previa/depurar en explorador permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un navegador en el menú emergente. Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón. Ver opciones permite definir las opciones de las vistas Código y Diseño, y establecer qué vista va a aparecer en la parte superior de la ventana. Las opciones del menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas. Ayudas visuales permite utilizar distintas ayudas visuales para el diseño de las páginas. 5. Barra de herramientas representación de estilos: La barra de herramientas Representación de estilos (oculta de manera predeterminada) contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de medios si utilizase hojas de estilos dependientes de los medios. También contiene un botón con el que es posible activar o desactivar los estilos CSS. Para mostrar la barra de herramientas, seleccione Ver > Barras de herramientas > Representación de estilos. Esta barra de herramientas sólo funciona si los documentos utilizan hojas de estilos dependientes de los medios. Por ejemplo, su hoja de estilos puede especificar una regla para imprimir y otra regla distinta para los dispositivos de mano. 6. Ventana de documento: La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes:

7 Vista Diseño Un entorno para el diseño visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador. Vista Código Un entorno de codificación manual para escribir y editar código HTML, JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código. Vista de código dividida Versión dividida de la vista Código que le permite desplazarse por el trabajo realizado en diferentes secciones del documento a la vez. Vistas Código y Diseño Le permite ver las dos vistas, Código y Diseño, para el mismo documento en una sola ventana. Vista en vivo La Vista en vivo, que es similar a la vista Diseño, muestra una representación más realista de la apariencia que tendrá el documento en un navegador y le permite interactuar con el documento de la misma forma que lo haría en un navegador. La Vista en vivo no es editable. No obstante, puede realizar modificaciones en la vista Código y actualizar la Vista en vivo para ver los cambios. Vista Código en vivo Sólo está disponible al visualizar un documento en la Vista en vivo. La vista Código en vivo muestra el código que un navegador utiliza para ejecutar la página y cambia dinámicamente conforme se interactúa con la página en la Vista en vivo. La vista Código en vivo no es editable. 7. Barra de herramientas estándar: Contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se utilizan del mismo modo que los comandos de menú equivalentes.

8 8. Barra de estado: La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando. 9. Paneles e inspectores: Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. 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. REFERENCIAS: AYUDA DE DREAMWEAVER

Documentos relacionados

COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS DREAMWEAVER UNO- PRÁCTICAS DOC RAUL MONROY PAMPLONA

COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS DREAMWEAVER UNO- PRÁCTICAS DOC RAUL MONROY PAMPLONA Metas de comprensión cuarto periodo Comprende sus responsabilidades a la hora de formular sus propuestas como soluciones a problemas reales que impliquen el uso de las tecnologías de información y la gestión