Ing. Luz Rodríguez
Macromedia Dreamweaver 8 es un editor HTML profesionalpara diseñar, codificar y desarrollar sitios, páginas yaplicaciones ...
Se puede accesar de varias maneras:1- Desde el botón INICIO                      situado por lo general, enla esquina infe...
Para Salir o Cerrar Dreamweaver, se             puede realizarcualquiera de las siguientes operaciones: 1- Hacer clic en e...
Para abrir un documento, puede realizar cualquiera de lassiguientes operaciones:1- Hacer clic en el botón abrir          d...
Para abrir un documento nuevo, puedes utilizar cualquierade las siguientes operaciones.1- Hacer clic en el botón abrir de ...
Para guardar un documento, puede realizar cualquiera de lassiguientes operaciones:1- Hacer clic en el botón guardar de la ...
Para guardar todos los archivos abiertos, puede realizarcualquiera de las siguientes operaciones:1- Hacer clic en el botón...
Al arrancar Dreamweaver aparece la pantalla inicial, allíse visualizarán diferentes barras y paneles que sedescriben a con...
La barra de menús contiene las operaciones de Dreamweaver,agrupadas en menús desplegables. Al hacer clic en Insertar, pore...
La barra de herramientas estándar contiene iconos paraejecutar de forma inmediata algunas de las operacionesmás habituales...
La barra de estado indica en cada momento en qué etiquetaHTML nos encontramos (en la imagen al encontrarnos en undocumento...
Dreamweaver utiliza ventanas flotantes similares a las barras deherramientas, que se conocen como paneles o inspectores. L...
Permite insertar elementos en un documento sin la necesidad derecurrir al menú Insertar. Los elementos están clasificados ...
En Dreamweaver existen varias maneras de trabajar ovisualizar un documento o página web. Se puede cambiarla vista del docu...
La vista Código se utiliza para poder trabajar en unentorno totalmente de programación, de códigofuente. No permite tener ...
La vista Código y Diseño permite dividir la ventana en doszonas. La zona superior muestra el código fuente, y la inferiore...
A través del menú Ayuda se puede:1- Acceder al cuadro de diálogo de ayuda muy similar al deWindows donde se puede buscar p...
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí,con un diseño similar o un objetivo común. Es ne...
Las características del sitio se agrupan en diferentes categorías queaparecen en la parte izquierda. Para visualizar las c...
Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a laopción Administrar Sitios. Se debe seleccionar el sit...
Es posible visualizar un sitio en el panel Archivos o en unaventana.El panel Archivos se puede abrir a través del menú Ven...
Es conveniente definir sitios homogéneos, es decir, que todaslas páginas del mismo tengan o sigan un mismo formato(igual c...
En la categoría Aspecto, se encuentran las propiedades:Imagen de fondo: permite especificar una imagen de fondo parael doc...
En la categoría Título/Codificación se encuentra la propiedad:Título: es el título del documento, que aparecerá en la barr...
Para asignar colores es posible desplegar una paleta de colores.Al seleccionar un color de esta paleta, se muestra el valo...
Fuente: Permite seleccionar un conjunto de fuentes. Aparecenconjuntos de fuentes en lugar de una sola, ya que es posible q...
Estilo: permite establecer si el texto aparecerá en negrita o en cursiva. Através del menú Texto también se puede, entre o...
Dreamweaver generalidades
Upcoming SlideShare
Loading in …5
×

Dreamweaver generalidades

1,667 views

Published on

Esta presentación muestra de forma sencilla aspectos básicos, generales sobre Macromedia Dreamweaver 8

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,667
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dreamweaver generalidades

  1. 1. Ing. Luz Rodríguez
  2. 2. Macromedia Dreamweaver 8 es un editor HTML profesionalpara diseñar, codificar y desarrollar sitios, páginas yaplicaciones Web. Tanto si desea controlar manualmente elcódigo HTML como si prefiere trabajar en un entorno de ediciónvisual, Dreamweaver le proporciona útiles herramientas quefacilitarán la creación Web (Se pueden crear tablas, editarmarcos, trabajar con capas, insertar comportamientosJavaScript, etc., de una forma muy sencilla y visual. Ademásincluye un software de cliente FTP completo, permitiendo entreotras cosas trabajar con mapas visuales de los sitios web,actualizando el sitio web en el servidor sin salir del programa). Esta presentación es una introducción para utilizarMacromedia Dreamweaver 8, dirigida a los usuarios que noestán familiarizados con algún aspecto fundamental de estaaplicación.
  3. 3. Se puede accesar de varias maneras:1- Desde el botón INICIO situado por lo general, enla esquina inferior izquierda de la pantalla. Se debe colocar el cursory hacer clic sobre él, se desplegará un menú; al colocar el cursorsobre Todos los programas aparece otra lista con los programas quehay instalados en el ordenador, ubica Macromedia (o Adobe sitienes las últimas versiones), seguidamente ubicar Dreamweaver8, hacer clic sobre él, en ese momento arrancará el programa.2- Haciendo doble clic sobre el acceso directo, si éste se encuentraen el escritorio .
  4. 4. Para Salir o Cerrar Dreamweaver, se puede realizarcualquiera de las siguientes operaciones: 1- Hacer clic en el botón cerrar 2- Pulsar la combinación de teclas ALT + F4. 3- Hacer clic sobre el menú Archivo y elegir la opción Salir.*** Si existe algún documento que no haya sido guardadoantes de cerrar Dreamweaver, se pedirá la confirmaciónpara guardarlo o no.
  5. 5. Para abrir un documento, puede realizar cualquiera de lassiguientes operaciones:1- Hacer clic en el botón abrir de la barra deherramientas estándar.2- Pulsar la combinación de teclas Ctrl + O.3- Hacer clic sobre el menú Archivo y elegir la opciónAbrir.4- Hacer doble clic sobre el archivo en la ventana delsitio.
  6. 6. Para abrir un documento nuevo, puedes utilizar cualquierade las siguientes operaciones.1- Hacer clic en el botón abrir de la barra de herramientasestándar.2- Pulsar la combinación de teclas Ctrl+N.3- Hacer clic sobre el menú Archivo y elegir la opciónNuevo.4- Hacer doble clic sobre el archivo en la ventana del sitio.*** Después de esto aparecerá una nueva ventana, en laque deberá elegir la Categoría Página básica, HTML.
  7. 7. Para guardar un documento, puede realizar cualquiera de lassiguientes operaciones:1- Hacer clic en el botón guardar de la barra de herramientasestándar.2- Pulsar la combinación de teclas Ctrl + S.3- Hacer clic sobre el menú Archivo y elegir la opciónGuardar.
  8. 8. Para guardar todos los archivos abiertos, puede realizarcualquiera de las siguientes operaciones:1- Hacer clic en el botón guardar todo de la barra deherramientas estándar.2- Hacer clic sobre el menú Archivo y elegir la opción Guardartodo.NOTA: Al tener varios documentos abiertos es fácil olvidarse detodos las modificaciones hechas en cada uno de ellos. Se debetener mucho cuidado al utilizar la opción GUARDAR TODO, yaque en ocasiones es posible no desear guardar los cambios entodos los documentos modificados. Por ello es conveniente queal principio no se utilice esta opción hasta que esté habituado amanejar el programa
  9. 9. Al arrancar Dreamweaver aparece la pantalla inicial, allíse visualizarán diferentes barras y paneles que sedescriben a continuación. La barra de título contiene el nombre del programa (Macromedia Dreamweaver 8), seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.
  10. 10. La barra de menús contiene las operaciones de Dreamweaver,agrupadas en menús desplegables. Al hacer clic en Insertar, porejemplo, se desplegarán las operaciones relacionadas con losdiferentes elementos que se pueden insertar en Dreamweaver.Muchas de las operaciones se pueden hacer a partir de estosmenús, pero para algunas es preferible o indispensable hacerlasdesde los paneles.
  11. 11. La barra de herramientas estándar contiene iconos paraejecutar de forma inmediata algunas de las operacionesmás habituales, como Abrir , Guardar , Copiar, Cortar, Pegar,etc.La barra de herramientas de documento contiene iconos paraejecutar de forma inmediata algunas otras operacioneshabituales que no están incluidas en la barra de herramientasestándar. Estas operaciones son las de cambio de vista deldocumento, vista previa, ejecutar en el navegador, entre otras.
  12. 12. La barra de estado indica en cada momento en qué etiquetaHTML nos encontramos (en la imagen al encontrarnos en undocumento en blanco estamos directamente sobre la etiqueta<body>).También es posible alternar entre los modos de selección, mano(para arrastrar la página), o zoom. En cualquier momento sepuede seleccionar el zoom preferido desde el desplegablezoom y ajustar la vista al porcentaje preferido (por defectosiempre viene al 100%).
  13. 13. Dreamweaver utiliza ventanas flotantes similares a las barras deherramientas, que se conocen como paneles o inspectores. Ladiferencia entre panel e inspector es que, en general, la apariencia yopciones de un inspector cambian dependiendo del objetoseleccionado. 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. Losmás importantes son:Muestra y permite modificar las propiedades del elemento seleccionadoque son usadas de forma más frecuente. Por ejemplo, cuando elelemento seleccionado sea texto mostrará el tipo de fuente, laalineación, si está en negrita o cursiva, etc. Pulsando sobre el botón sedespliega para mostrar más opciones. Este botón se encuentra en laesquina inferior derecha.
  14. 14. Permite insertar elementos en un documento sin la necesidad derecurrir al menú Insertar. Los elementos están clasificados según sucategoría: tablas, texto, objetos de formulario, etc.Es posible configurar este panel para que en los botones semuestren los iconos de los objetos, para que se muestren losnombres de los objetos, o para que se muestren ambos a la vez.
  15. 15. En Dreamweaver existen varias maneras de trabajar ovisualizar un documento o página web. Se puede cambiarla vista del documento a través de la barra de herramientasde documento.La vista Diseño permite trabajar con el editor visual. Es lavista predeterminada de Dreamweaver y la que se sueleutilizar habitualmente.
  16. 16. La vista Código se utiliza para poder trabajar en unentorno totalmente de programación, de códigofuente. No permite tener directamente una referenciavisual de cómo va quedando el documento según seva modificando el código
  17. 17. La vista Código y Diseño permite dividir la ventana en doszonas. La zona superior muestra el código fuente, y la inferiorel editor visual.Cuando se realiza un cambio en alguna de las zonas, estecambio se aplica directamente sobre la otra.
  18. 18. A través del menú Ayuda se puede:1- Acceder al cuadro de diálogo de ayuda muy similar al deWindows donde se puede buscar por temas, por índice o porcontenido, si se selecciona la opción Utilización deDreamweaver o simplemente pulsando F1.2- Acceder a tutoriales (opción Primeros pasos conDreamweaver).3- Abrir el panel Referencia en el que se encontrará lasintaxis y descripción de las etiquetas HTML.4- Acceder al Centro de servicio técnico de Dreamweaveren la web.5- Acceder al Foros en línea de Dreamweaver.
  19. 19. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí,con un diseño similar o un objetivo común. Es necesario diseñar yplanificar el sitio web antes de crear las páginas que va a contener.La forma habitual de crear un sitio consiste en crear una carpeta en eldisco local. Los documentos HTML normalmente se crean dentro dedicha carpeta, mientras que para contener las imágenes, lasanimaciones, las hojas de estilo, etc., se deben crear nuevas carpetasdentro de ésta, con el objetivo de tener una mejor organización de losarchivos a la hora de trabajar. Esto es lo que se conoce como sitio local.Después se podrán copiar los archivos en un servidor web, en eldenominado sitio remoto, lo que equivale a publicar el sitio, de modoque la gente podrá verlo en Internet. Es conveniente que la página inicialdel sitio tenga el nombre index.htm o index.html, ya que los navegadoresbuscan una página con ese nombre cuando se intenta acceder a unaURL genérica.
  20. 20. Las características del sitio se agrupan en diferentes categorías queaparecen en la parte izquierda. Para visualizar las características deuna categoría basta con seleccionarla de la lista haciendo clic enella.Para la categoría Datos locales: Debe definirse el Nombre del sitio yla Carpeta raíz local, que es en la que se encuentra el sitio dentrodel disco duro local. Después, si se desea, a través de la categoríaMapa de diseño del sitio puede definirse la página principal delsitio, de la que se desplegarán el resto de documentos HTML dentrodel sitio; si en la carpeta raíz del sitio existe una página con elnombre index.htm, Dreamweaver la seleccionará por defecto.*** Estas tres características son las imprescindibles para definir unsitio local.Después de rellenar los datos se debe pulsar el botón Aceptar yabrir el sitio.
  21. 21. Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a laopción Administrar Sitios. Se debe seleccionar el sitio de la listade sitios que aparece y hacer clic sobre el botón Listo.También se puede utilizar el panel Archivos, buscar yseleccionar el sitio que se desea abrir en el menú desplegablede la pestaña Archivos.
  22. 22. Es posible visualizar un sitio en el panel Archivos o en unaventana.El panel Archivos se puede abrir a través del menú Ventana,opción Archivos. También pulsando F8.Para cambiar de una vista a otra hay que pulsar sobre el botónque aparece en la parte superior del panel y de la ventana. Almismo tiempo, es posible visualizar el sitio local, el sitio remoto,el servidor remoto de prueba o el mapa del sitio.
  23. 23. Es conveniente definir sitios homogéneos, es decir, que todaslas páginas del mismo tengan o sigan un mismo formato(igual color de fondo, tipo de fuente, etc.)Puede definirse el formato de cada una de las páginas através del cuadro de diálogo Propiedades de la página.Este cuadro se puede abrir de tres modos diferentes:1- Pulsar la combinación de teclas Ctrl+J.2- Hacer clic sobre el menú Modificar y elegir la opciónPropiedades de la página.3- Hacer clic con el botón derecho del ratón sobre el fondode la página. Aparecerá al final del menú contextual laopción Propiedades de la página.Las propiedades están organizadas en categorías.
  24. 24. En la categoría Aspecto, se encuentran las propiedades:Imagen de fondo: permite especificar una imagen de fondo parael documento. Dicha imagen se muestra en mosaico. Esimportante al elegir una imagen de fondo tener en cuenta quesegún los colores de la imagen será necesario establecer unosu otros colores para el texto, así como que no es convenientetener un gif animado como fondo.Color de fondo: permite especificar un color de fondo para eldocumento, pero dicho color solo se mostrará en el caso de nohaber establecido ninguna imagen de fondo.Tamaño: permite definir el tamaño de la letra o fuente.Color del texto: permite definir es el color de la fuente.Márgenes: permiten establecer márgenes en el documento.
  25. 25. En la categoría Título/Codificación se encuentra la propiedad:Título: es el título del documento, que aparecerá en la barra detítulo del navegador y de la ventana de documento deDreamweaver.En la categoría Vínculos se encuentran las propiedades:Color de vínculo: es el color de los vínculos, que ayudan alusuario a distinguir entre el texto normal y los vínculos quesirven de enlace a otras páginas.Vínculos visitados: es el color que permite distinguir al usuariosi unos vínculos ya han sido visitados o no.Vínculos activos: es el color de los vínculos activos.Estilo subrayado: por defecto, cuando se tiene un texto con unvínculo asociado, el texto aparece subrayado, con esta opciónse puede elegir otro tipo de estilo por ejemplo para que noaparezca subrayado.
  26. 26. Para asignar colores es posible desplegar una paleta de colores.Al seleccionar un color de esta paleta, se muestra el valorhexadecimal del color en la parte superior.Las paletas de colores de Dreamweaver utilizan la paleta de 216colores seguros para web. Éstos son los colores que se muestrande la misma forma en Microsoft Internet Explorer y en NetscapeNavigator, tanto en Windows como en Macintosh.También es posible personalizar los colores a través del botón dela parte superior de la paleta.
  27. 27. Fuente: Permite seleccionar un conjunto de fuentes. Aparecenconjuntos de fuentes en lugar de una sola, ya que es posible queal establecer una única fuente el usuario no la tenga en suordenador. El seleccionar un conjunto de fuentes posibilita que enel caso de que el usuario no tenga una fuente se aplique otra delconjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif,el texto se verá con la fuente Arial, pero si esta no existe se verá enHelvetica.Tamaño: Permite cambiar el tamaño del texto. El tamaño se puedeindicar en diversas unidades, en píxeles, centímetros, etc...Color: Permite seleccionar el color de la fuente, ignorando el colorque se haya definido en las propiedades de la página. Si no se haestablecido ningún color en las propiedades de la página ni aquí, elcolor del texto por defecto será el negro.
  28. 28. Estilo: permite establecer si el texto aparecerá en negrita o en cursiva. Através del menú Texto también se puede, entre otras cosas, subrayar eltexto. Esta opción no aparece en el panel de Propiedades ya que denormal no suele utilizarse, debido a que los vínculos aparecensubrayados y el subrayar texto normal podría hacer que el usuariopensara que se trata de un vínculo.Alinear: A través de estos botones es posible establecer la alineacióndel texto de una de estas cuatro formas distintas: izquierda, centrada,derecha y justificada.Lista: Permiten crear listas con viñetas o listas numeradas.Sangría: Permite sangrar el texto y anular la sangría. La sangría es unaespecie de margen que se establece a ambos lados del texto. En estecaso los botones se refieren a sangría a la izquierda del texto.

×