INFORMTICA Y TECNOLOGA SERGIO FERREIRA DOCENTE Bienvenidos Sesin

INFORMÁTICA Y TECNOLOGÍA SERGIO FERREIRA DOCENTE Bienvenidos Sesión Virtual 5 FECHA: MAYO 4 A 8 GRADO: UNDECIMOS SESIÓN 5

TEMA DEL 2 do PERIODO ELABORACION DE PAGINAS WEB

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Elementos de su ventana Haz clic sobre la versión que tienes instalada

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión CS 6 Portable BARRA DE APLICACIÓN 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 En línea. Permite cambiar entre la vista de diseño o código, acceder a las extensiones y administrar los sitios Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión CS 6 Portable PESTAÑA DE DOCUMENTOS Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. El * indica que ese archivo tiene cambios sin guardar. BARRA DE HERRAMIENTAS ESTÁNDAR La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar todo, imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión CS 6 Portable BARRA DE HERRAMIENTAS DE DOCUMENTO Contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, vistas previa en multi pantalla, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa. BARRA DE ESTADO Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. Nos indica, al lado izquierdo la etiqueta intervenida, nos permite ampliar o reducir la visualización, nos muestra una vista previa de como se visualizará en varios dispositivos, entre otros.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión CS 6 Portable 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. INSPECTOR DE PROPIEDADES Muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión CS 6 Portable ÁREA DE PANELES El área de paneles contiene unos determinados elementos, pero podemos quitar y poner los elementos queramos. Para quitar un elemento del área de paneles basta hacer clic con el botón derecho sobre su nombre para que aparezca un menú con la opción Cerrar. Para añadir un elemento al área de paneles hay que ir al menú Ventana y hacer clic en el elemento queramos añadir, si el elemento se abre en una ventana flotante, bastará arrastrarlo al área de paneles. Los paneles una vez abierto los podemos apreciar como: dentro del área de paneles, al lado del área de paneles y como panel flotante.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión CS 6 Portable LINEA INFERIOR DE PESTAÑAS En la parte inferior de la pantalla tenemos una línea que contiene varias pestañas (Buscar, Validación, . . . ) Para abrir una pestaña basta hacer clic sobre ella, para cerrarla hacer doble clic en su título. VISTAS DISEÑO – CÓDIGO: Formas de ver el documento que se construye.

ENTORNO DE Actividad en Clase DREAMWEAVER Usando Adobe Dreamweaver diseña una pagina web en la cual que muestre cuales son los tres lenguajes de programación más usados actualmente, agregue imagen de fondo y el logotipo o imagen corporativa de cada uno de ellos junto con una característica.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión Gratuita BARRA DE APLICACIÓN Esta barra contiene los menús (parte superior izquierda). Permite cambiar la presentación de la ventana, modos estándar o desarrollador, así como también administrar las áreas de trabajo y al final los ajustes de sincronización Contiene todas las opciones de Dreamweaver, son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión Gratuita PESTAÑA DE DOCUMENTOS Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. El * indica que ese archivo tiene cambios sin guardar. BARRA DE HERRAMIENTAS La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Ver. De arriba abajo encontramos la opción para abrir archivos, administrador de archivos, opciones de vista en vivo, alternar la barra de medios visuales, activar la vista en vivo y modo de inspección.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión Gratuita PESTAÑA DE DOCUMENTOS Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. El * indica que ese archivo tiene cambios sin guardar. BARRA DE HERRAMIENTAS La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Ver. De arriba abajo encontramos la opción para abrir archivos, administrador de archivos, opciones de vista en vivo, alternar la barra de medios visuales, activar la vista en vivo y modo de inspección.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión Gratuita BARRA DE ADMINISTRACION DEL AREA DE TRABAJO Permite cambiar entre las distintas vistas o formas de ver el documento, contiene la vista en vivo, vista de solo código y vista Dividir que combina el código y la visualización previa de la pagina web en el navegador. BARRA DE ESTADO Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. Nos indica, al lado izquierdo la etiqueta intervenida, nos indica la resolución en pixeles, nos muestra el lenguaje que se esta usando, también la vista previa en el navegador, entre otros.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión Gratuita ÁREA DE PANELES El área de paneles contiene unos determinados elementos, este panel se puede ocultar o ver totalmente, se compone de: Archivos, Bibliotecas CC, insertar, y diseñador CSS. El panel de archivos, muestra a manera de explorador los archivos que hacen parte de tu proyecto web. El archivo Biblioteca, es una aplicación de adobe asociado a las biblioteca creative cloud, permite acceder a recursos de la web. Insertar tiene una gran funcionalidad al momento de agregar elementos propios del lenguaje HTML. Diseñador CSS, es una sección pensado en los profesionales del diseño web.

ENTORNO DE DREAMWEAVER Adobe Dreamweaver Versión Gratuita ÁREA DE PANELES GRUPO DE FICHAS FORMAS DE VISUALIZAR Visualización de Diseño En la parte inferior del panel de archivos, encontraras una ficha complementaria en donde manipulamos insertar elementos de etiquetas, elementos gráficos en activos, y en fragmentos agregar rápidamente elementos adicionales del encabezado a tu proyecto web. Visualización de desarrollador

ENTORNO DE Actividad en Clase DREAMWEAVER Usando Adobe Dreamweaver diseña una pagina web en la cual que muestre cuales son los tres lenguajes de programación más usados actualmente, agregue imagen de fondo y el logotipo o imagen corporativa de cada uno de ellos junto con una característica.