Introducción a Dreamweaver cs5
Descargar como PPTX, PDF2 recomendaciones2,749 vistas
Dreamweaver CS5 es un software para crear páginas web de forma sencilla y visual. Ofrece funciones como crear tablas, editar marcos, trabajar con capas e insertar comportamientos JavaScript. Incluye compatibilidad integrada con sistemas de gestión de contenido y la capacidad de comparar el diseño de páginas web en diferentes navegadores a través de Adobe Browserlab. Proporciona un entorno gráfico con barras de menús, herramientas y vistas que permiten editar el código HTML y el diseño visual de manera
Introducción a Dreamweaver cs5
- 1. Dreamweaver CS5 Diego Mariano Espinosa Casso
- 2. ¿Qué es? Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
- 3. Novedades Compatibilidad con CMS integrada. Es una interfaz o programa que nos permite gestionar el contenido de un sitio web. Integración Adobe Browserlab, es un servicio en línea de Adobe, que nos permite comparar cómo se ve una misma página web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.
- 4. Funciones Editar páginas web Crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Hoy en día existe una amplia gama de editores de páginas web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. No se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.
- 5. Entorno gráfico Pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta, la pantalla que se muestra a continuación 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.
- 6. Barras Barra de la aplicación 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. Botones Menús Conmutador Caja de búsquedas
- 7. 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. 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.
- 8. 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, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. 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.
- 9. Barra de representación de estilos Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan de eso. En esta nueva versión se han añadido más opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento. 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.
- 10. Vistas de un documento Vista de diseño La vista Diseño permite trabajar con el editor visual. Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
- 11. Vista Código La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.
- 12. Vista Dividir La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el código fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.