Unidad 2

444 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
444
En SlideShare
0
De insertados
0
Número de insertados
3
Acciones
Compartido
0
Descargas
18
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Unidad 2

  1. 1. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 2 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 1 de 8 EL ENTORNO DE DREAMWEAVER CS5Vamos a ver cuáles son los elementos básicos de Dreamweaver CS5, la pantalla, las barras, los paneles, etc...,para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven.También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuandoconozcamos todo esto estaremos en disposición de empezar a crear páginas web.La pantalla inicialAl arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales.Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto. La pantalla que semuestra a continuación puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuariopuede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.Las barras• La barra de la aplicación.
  2. 2. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 2 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 2 de 8La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizadaveremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagensuperior.Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botonespropios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda online.Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda)cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador desitios, que ya veremos.Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio detrabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Loveremos más adelante.Los menús, están agrupados en categorías.Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que sepueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús,aunque en ocasiones nos envíen a los paneles. Las pestañas de documento.Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno aotro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemoscerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botónderecho, como Cerrar otros archivos.Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivosJavaScript, etc... Pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo. La barra de estado.
  3. 3. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 2 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 3 de 8Esta 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. Siguiendohacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datoscomo el tamaño de la ventana, el tamaño de la página o su codificación. Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultardesde el menú Ver → Barras de herramientas. La barra de herramientas estándar.La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo yEdició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. Esta barra puede ser muy útil, pero enrealidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + Cpara copiar, etc.) La barra de herramientas de documento.La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, accedercómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.
  4. 4. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 2 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 4 de 8 La barra de representación de estilos.Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamosutilizando hojas distintas que dependan del eso. En esta nueva versión se han añadido más opciones, como lasde ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento. La 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, como ya veremos. Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo comootra barra de herramientas.Inspectores y panelesDreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles oinspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspectorcambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales.A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles oinspectores. Vamos a ver los más importantes. El inspector de PropiedadesEl inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonoseditarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuandoel elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc...
  5. 5. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 2 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 5 de 8Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferenteselementos de la página Web que estemos diseñando. El panel Insertar.En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificadosen categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquierelemento que nuestra web necesite.Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel flotante ocomo una barra de herramientas integrada en la ventana de trabajo.Vistas de un documentoPodemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento: La vista DiseñoLa vista Diseño permite trabajar con el editor visual.
  6. 6. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 2 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 6 de 8Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable. La vista CódigoLa vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. Nopermite tener directamente una referencia visual de cómo va quedando el documento según se va modificandoel código.
  7. 7. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 2 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 7 de 8El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.La vista DividirLa vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el códigofuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplicadirectamente sobre la otra. La Vista en vivoLa vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no editable. Adiferencia de la vista Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos,tal como lo haríamos con el navegador.La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios seprevisualizan correctamente en el navegador.No obstante, siempre hay que comprobar la página con los principales navegadores del mercado, que serán losque emplearán nuestros visitantes. De hecho, a lo largo del curso verás cómo algunos elementos se ven deforma muy distinta si los vemos en la vista de diseño, en la vista en vivo o en el navegador. La vista Código en vivoEsta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin quepodamos editar el código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccionesu correspondiente código fuente.
  8. 8. Sistema de Gestión de la Calidad REGIONAL META Fecha: Abril 17 de 2012 INSTITUCION EDUCATIVA CAPITAN MIGUEL LARA Versión: 2 TECNOLOGÍAS DE LA INFORMACIÓN, DISEÑO Y DESARROLLO DE SOFTWARE Página 8 de 8La ayudaA través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:• Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1.• Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un resumen de esta herramienta.• Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML.• Acceder a Dreamweaver Support Center en la web.• Acceder al Foros en línea de Adobe.Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos de la búsqueday buscar, iremos a la ayuda online de Adobe.

×