SlideShare uma empresa Scribd logo
1 de 10
Escuela normal superior del distrito de barranquilla

                           Trabajo de : informática



                     Presentado por : Alexia Bethel



                    Presentado a : Analida Carvajal



                                         Curso :11°d
Adobe Dreamweaver es una aplicación en forma de estudio
(basada en la forma de Adobe Flash) enfocada a la construcción
    y edición de sitios y aplicaciones Web basados en estándares.
  Creado inicialmente por Macromedia (actualmente producido
  por Adobe Systems). Es el programa de este tipo más utilizado
            en el sector del diseño y la programación web, por sus
   funcionalidades, su integración con otras herramientas como
 Adobe Flash y, recientemente, por su soporte de los estándares
  del World Wide Web Consortium. Su principal competidor es
 Microsoft Expression Web y tiene soporte tanto para edición de
   imágenes como para animación a través de su integración con
       otras. Hasta la versión MX, fue duramente criticado por su
 escaso soporte de los estándares de la web, ya que el código que
generaba era con frecuencia sólo válido para Internet Explorer, y
no validaba como HTML estándar. Esto se ha ido corrigiendo en
                                             las versiones recientes.
Cumple perfectamente el objetivo de diseñar páginas con
aspecto profesional, y soporta gran cantidad de tecnologías,
                                  además muy fáciles de usar:
                                        Hojas de estilo y capas
              Java script para crear efectos e interactividades
                          Inserción de archivos multimedia...
Sugerencias de código. Ahora las sugerencias de código incluyen nuestras clases personalizadas,
                           y los comandos y funciones propios de los distintos CMS soportados.

    Integración Adobe Browserlab. Adobe Browser Lab 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.



          Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglés Content
 Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido
de un sitio web. Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiendo
                                                     crear nuestras páginas con la estructura adecuada.

 Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados
    al elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los
                                                                                      elementos padre.
Características del texto
Lista:
Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las
    listas en el siguiente apartado.
Sangría:
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una
    especie de margen que se establece a ambos lados del texto. En este caso los
    botones se refieren a sangría a la izquierda del texto.
Si lo aplicamos sobre texto normal, lo encerrará en una
    etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la
    derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.
Formato:
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser
    encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para
    establecer títulos dentro de un documento. El formato predeterminado sirve para que
    el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se
    introducen varios espacios solo se considera uno, pero al establecer el formato
    predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto
    normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como
    tablas o listas.
Es importante emplear correctamente los encabezados, ya que se organizará mejor el
    contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te
    preocupes por cómo se muestran esos encabezados, recuerda que siempre
    podremos personalizarlo.
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no
se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un
                                                               archivo Flash, de la hoja de estilo, etc.
                                                                                Referencia absoluta:
         Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo,
                                                                        incluyendo el protocolo http://.
         Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html.
 La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será
           válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si
                            pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

                                                    Referencia relativa al documento (por defecto):
       La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir,
                                         partimos de la carpeta en la que se encuentra el documento.
    Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que
                                                        utilizar su nombre. Por ejemplo, pagina2.htm.
 Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta
              antes del archivo, y separarlos por una barra (/). Por ejemplo imágenes/miimagen.gif.
           Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos
                                                                                  deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente
     dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos
                                                          mostrar una imagen que se encuentra en la
    carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo?
  Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/)
                                                          para poder ir luego a la carpeta secciones.
                              El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta información, subimos un nivel y luego nos
                  movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
Esta opción depende de la ubicación del archivo, y pueden no funcionar correctamente si alteramos
                                                                              la estructura de carpetas.
   Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos
                                                                                         dentro del sitio.
Formulario
Los elementos de formulario pueden insertarse en una página a través del
    menú Insertar, opción Formulario, o lo que es más cómodo si vamos a insertar
    varios elementos, desde el panel Insertar en la sección Formularios.
A través de esta opción se puede acceder a la lista de todos los objetos de formulario
    que pueden ser insertados en la página.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de
    un formulario, así como algunas de sus propiedades.
 Campo de texto y Área de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea,
    mientras que el Área de texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de
    propiedades, marcando la opción Una línea o Multi línea respectivamente.
También es posible definirlo como Contraseña es como el campo de texto pero las
    letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en
    la imagen siguiente.
A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en
    ellos para ver su funcionamiento.
A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de
    líneas o caracteres, y el valor inicial del cuadro.
Botón
     Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar
formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para
                             poder asignarle un comportamiento diferente de los dos anteriores).
  También es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de
                                                                                   propiedades.
Ventana principal de dreamweaver

Mais conteúdo relacionado

Mais procurados (18)

Html presentacion
Html presentacionHtml presentacion
Html presentacion
 
Taller de Drupal 5
Taller de Drupal 5Taller de Drupal 5
Taller de Drupal 5
 
Frontpage3
Frontpage3Frontpage3
Frontpage3
 
Microsoft access
Microsoft accessMicrosoft access
Microsoft access
 
Manual Admon Contenidos Joomla 1.5 V2 Gen
Manual Admon Contenidos Joomla 1.5 V2 GenManual Admon Contenidos Joomla 1.5 V2 Gen
Manual Admon Contenidos Joomla 1.5 V2 Gen
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Delphi para PHP “en acción”
Delphi para PHP “en acción”Delphi para PHP “en acción”
Delphi para PHP “en acción”
 
Adicion de contenido a dreamweaver
Adicion de contenido a dreamweaverAdicion de contenido a dreamweaver
Adicion de contenido a dreamweaver
 
Itecnor evelin oliva
Itecnor evelin olivaItecnor evelin oliva
Itecnor evelin oliva
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Lenguaje de marcas html
Lenguaje de marcas htmlLenguaje de marcas html
Lenguaje de marcas html
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Html
HtmlHtml
Html
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 
Consulta sobre acces, HMTL
Consulta sobre acces, HMTLConsulta sobre acces, HMTL
Consulta sobre acces, HMTL
 

Destaque

Asplantas
AsplantasAsplantas
Asplantasarorofo
 
Bootstrap ruby on rails (DevCAST)
Bootstrap ruby on rails (DevCAST)Bootstrap ruby on rails (DevCAST)
Bootstrap ruby on rails (DevCAST)Ivan Santos
 
Proyecto social adopta hoy
Proyecto social adopta hoyProyecto social adopta hoy
Proyecto social adopta hoyandrea1331
 
Construindo Web APIs com Grape
Construindo Web APIs com GrapeConstruindo Web APIs com Grape
Construindo Web APIs com GrapeIvan Santos
 
Ruby applications in real life
Ruby applications in real lifeRuby applications in real life
Ruby applications in real lifeIvan Santos
 
Catálogo yves rocher campaña 5, 2015
Catálogo yves rocher campaña 5, 2015Catálogo yves rocher campaña 5, 2015
Catálogo yves rocher campaña 5, 2015Paty Cj
 

Destaque (8)

Asplantas
AsplantasAsplantas
Asplantas
 
Bootstrap ruby on rails (DevCAST)
Bootstrap ruby on rails (DevCAST)Bootstrap ruby on rails (DevCAST)
Bootstrap ruby on rails (DevCAST)
 
Proyecto social adopta hoy
Proyecto social adopta hoyProyecto social adopta hoy
Proyecto social adopta hoy
 
Construindo Web APIs com Grape
Construindo Web APIs com GrapeConstruindo Web APIs com Grape
Construindo Web APIs com Grape
 
168. Where He Leads Me
168. Where He Leads Me168. Where He Leads Me
168. Where He Leads Me
 
A Retina
A RetinaA Retina
A Retina
 
Ruby applications in real life
Ruby applications in real lifeRuby applications in real life
Ruby applications in real life
 
Catálogo yves rocher campaña 5, 2015
Catálogo yves rocher campaña 5, 2015Catálogo yves rocher campaña 5, 2015
Catálogo yves rocher campaña 5, 2015
 

Semelhante a Presentación2

Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernestoerjenate
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernestoerjenate
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 natynataliareniz
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverastridcmc
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverIvan Llerena
 
Dreamweaver trabajo con fotos
Dreamweaver trabajo con fotosDreamweaver trabajo con fotos
Dreamweaver trabajo con fotosstephanyzambrano
 
Dreamweaver trabajo con fotos
Dreamweaver trabajo con fotosDreamweaver trabajo con fotos
Dreamweaver trabajo con fotosstephanyzambrano
 
Hiperenlaces 6 f
Hiperenlaces 6 fHiperenlaces 6 f
Hiperenlaces 6 fjaxjl14
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 eaybeth9414
 
Dreamweaver Interfaz
Dreamweaver InterfazDreamweaver Interfaz
Dreamweaver Interfazr2diseno
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaverpaosinning
 
Planeación didáctica4-5
Planeación didáctica4-5Planeación didáctica4-5
Planeación didáctica4-5miguel angel
 

Semelhante a Presentación2 (20)

Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Hiperenlaces
HiperenlacesHiperenlaces
Hiperenlaces
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 naty
 
Tutorial de dreamweaver
Tutorial de dreamweaverTutorial de dreamweaver
Tutorial de dreamweaver
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Lorena
LorenaLorena
Lorena
 
dreamweaver
dreamweaverdreamweaver
dreamweaver
 
dreamweaver 8
dreamweaver 8dreamweaver 8
dreamweaver 8
 
Dreamweaver trabajo con fotos
Dreamweaver trabajo con fotosDreamweaver trabajo con fotos
Dreamweaver trabajo con fotos
 
Dreamweaver trabajo con fotos
Dreamweaver trabajo con fotosDreamweaver trabajo con fotos
Dreamweaver trabajo con fotos
 
Hiperenlaces 6 f
Hiperenlaces 6 fHiperenlaces 6 f
Hiperenlaces 6 f
 
Resumen de dreamweaver aybeth orozco morales 11 e
Resumen de dreamweaver  aybeth orozco morales 11 eResumen de dreamweaver  aybeth orozco morales 11 e
Resumen de dreamweaver aybeth orozco morales 11 e
 
Informe de bre k..
Informe de bre k..Informe de bre k..
Informe de bre k..
 
Dreamweaver Interfaz
Dreamweaver InterfazDreamweaver Interfaz
Dreamweaver Interfaz
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaver
 
Planeación didáctica4-5
Planeación didáctica4-5Planeación didáctica4-5
Planeación didáctica4-5
 

Presentación2

  • 1. Escuela normal superior del distrito de barranquilla Trabajo de : informática Presentado por : Alexia Bethel Presentado a : Analida Carvajal Curso :11°d
  • 2. Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
  • 3. Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar: Hojas de estilo y capas Java script para crear efectos e interactividades Inserción de archivos multimedia...
  • 4. Sugerencias de código. Ahora las sugerencias de código incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados. Integración Adobe Browserlab. Adobe Browser Lab 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. Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiendo crear nuestras páginas con la estructura adecuada. Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.
  • 5. Características del texto Lista: Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado. Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto. Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta. Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas. Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.
  • 6. Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://. Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html. La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos). Referencia relativa al documento (por defecto): La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir, partimos de la carpeta en la que se encuentra el documento. Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm. Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imágenes/miimagen.gif. Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../
  • 7. Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones. El resultado de la ruta sería el siguiente: ../secciones/seccion1.html. De esta forma, mientras nos encontramos en la carpeta información, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html. Esta opción depende de la ubicación del archivo, y pueden no funcionar correctamente si alteramos la estructura de carpetas. Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos dentro del sitio.
  • 8. Formulario Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario, o lo que es más cómodo si vamos a insertar varios elementos, desde el panel Insertar en la sección Formularios. A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades. Campo de texto y Área de texto Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias. Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente. También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente. A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento. A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.
  • 9. Botón Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores). También es posible cambiar el texto del botón, a través de la propiedad Valor del inspector de propiedades.
  • 10. Ventana principal de dreamweaver