SlideShare una empresa de Scribd logo
1 de 5
Descargar para leer sin conexión
Dreamweaver
Análisis en contexto de trabajo.
Introducción a Dreamweaver. Creación de un sitio Web.


Macromedia Dreamweaver es un editor HTML para diseñar, codificar y
desarrollar sitios, páginas y aplicaciones Web. Dreamweaver contiene útiles
herramientas tanto si se desea controlar manualmente el código HTML como si
se prefiere trabajar en un entorno de edición visual.
Con Dreamweaver se puede controlar todo el proceso de creación de un sitio
Web: creación del sitio, estructurar el árbol de links, diseño de las páginas y la
subida del trabajo a un servidor Web.


Un sitio Web es un conjunto de documentos y de objetos vinculados, bajo un
diseño similar u objetivo común. Dreamweaver es una herramienta de creación
y administración de sitios, por lo que se puede utilizar para crear sitios Web
completos, además de documentos por separado.


El primer paso al crear un sitio Web consiste en planificarlo. Para obtener
resultados óptimos, se debe diseñar y planificar la estructura del sitio Web
antes de crear las páginas.
Se debe empezar definiendo la estrategia o la finalidad de un sitio. Planificar y
organizar cuidadosamente el sitio desde el primer momento puede ayudar a
ahorrar tiempo más adelante. La organización del sitio no sólo implica la
determinación de los archivos que van a incluirse, sino que también requiere un
examen de las necesidades, el perfil de la audiencia y sus objetivos.


El siguiente paso consiste en configurar Dreamweaver para poder trabajar con
la estructura básica del sitio. Este es el paso más importante: dejar bien
configurado en qué carpeta se va a colocar todo lo que se va a diseñar, y dejar
estructurado el sitio tal y como se subirá al servidor. Por tanto el desarrollo de
un sitio Web con Dreamweaver comienza en la definición de una carpeta local
para el sitio. En esta carpeta se guardarán todos los archivos que lo
compongan.

Una vez que se haya organizado la información y determinado una estructura,
se podrá comenzar a diseñar el aspecto y el funcionamiento del sitio.
Hay varias formas de seleccionar un nuevo documento para empezar a trabajar
en él: con un documento en blanco, partiendo de un archivo de diseño de
Dreamweaver o utilizando una plantilla que defina el aspecto del documento y
establezca las partes que se puedan cambiar.

Se puede empezar creando páginas de muestra y trabajar en el diseño
definitivo de las páginas. Son interesantes herramientas como las capas, hojas
de estilo, las tablas para la estructura de las páginas, los marcos para la
organización o las plantillas para reutilizar los diseños. Con Dreamweaver, es
muy fácil añadir todo tipo de contenidos (texto, imágenes, películas, sonidos y
elementos multimedia).

Hay dos métodos para crear las páginas. La edición visual, con herramientas
sencillas, o el entorno de codificación que permite trabajar directamente con
código. Puede utilizarse uno de los dos modos, o una combinación de ambos.
En Dreamweaver, se puede trabajar en la vista “Diseño” o en la vista “Código”
para insertar imágenes en un documento. Al añadir imágenes a un documento
de Dreamweaver, se puede establecer o modificar las propiedades de imagen y
ver los cambios directamente en la ventana de documento.

Existen diversos formatos de archivo gráfico, aunque para páginas Web
generalmente se utilizan tres formatos: GIF, JPEG y PNG. Actualmente, GIF y
JPEG son los formatos de archivo que cuentan con mayor compatibilidad y
pueden verse en la mayoría de los navegadores.
Se recomienda que se haga una optimización previa de las imágenes tal y
como se van a insertar, y que los textos se redacten en un editor de textos. Con
esto se ahorra tiempo y dudas a la hora de hacer la web.


Una vez que el diseño esté finalizado, es cuando se crea el sitio y codifican las
páginas, añadiendo el contenido y la interactividad. A continuación, se
vincularán las páginas y se comprobará si el sitio funciona y si cumple los
objetivos para los que ha sido diseñado. Para terminar el ciclo, publicará el sitio
en un servidor.
Entorno de trabajo de Dreamweaver.


El espacio de trabajo de Dreamweaver permite ver las propiedades de los
documentos y los objetos. Además, coloca muchas de las operaciones más
frecuentes en barras de herramientas para que se puedan realizar cambios en
los documentos rápidamente. Estas son algunas de las funciones principales
de Dreamweaver:


      La página de inicio permite abrir un documento reciente o crear un
       documento nuevo.
      La barra de herramientas “Insertar” contiene botones para la inserción
       de diversos tipos de objetos, como imágenes, tablas y capas, en un
       documento. Cada objeto es un fragmento de código HTML que permite
       establecer diversos atributos al insertarlo.
      La   barra   de   herramientas    “Documento”    contiene   botones   que
       proporcionan opciones para diferentes vistas de la ventana de
       documento (como la vista “Diseño” y la vista “Código”), diversas
       opciones de visualización y algunas operaciones comunes como la
       obtención de una vista previa en un navegador.
      La barra de herramientas “Estándar” contiene botones para las
       operaciones más habituales de los menús “Archivo” y “Edición”: Nuevo,
       Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y
       Rehacer.
      La ventana de documento muestra el documento actual mientras se está
       creando y editando.
      El inspector de propiedades permite ver y cambiar diversas propiedades
       del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes
       propiedades.
      El selector de etiquetas (código HTML), que aparece en la barra de
       estado en la parte inferior de la ventana de documento, muestra la
       jerarquía de etiquetas que rodean a la selección actual.
Bibliografía


   Macromedia Dreamweaver MX, Desarrollo de aplicaciones y bases
    de datos en la Web. César Pérez


   Macromedia Dreamweaver MX 2004, Guía Práctica para usuarios.
    Óscar Peña de San Antonio


   Macromedia Dreamweaver MX 2004, Diseñe y actualice sus sitios
    Web con eficacia. Khristine Annwn Page

Más contenido relacionado

La actualidad más candente

Barras dreamweaver
Barras dreamweaverBarras dreamweaver
Barras dreamweaverLISBETH-17
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverastridcmc
 
P R E S E N T A C I O N P O W E R D R E A M W E A V E R
P R E S E N T A C I O N  P O W E R  D R E A M W E A V E RP R E S E N T A C I O N  P O W E R  D R E A M W E A V E R
P R E S E N T A C I O N P O W E R D R E A M W E A V E Rguest777d3e
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverMelii Duarte P
 
Dreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trochaDreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trochamarcela1406
 
Espacio de trabajo de macromedia dreamweaver
Espacio de trabajo de macromedia dreamweaverEspacio de trabajo de macromedia dreamweaver
Espacio de trabajo de macromedia dreamweaverJack Daniels
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaverpaosinning
 
OBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVEROBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVERAntonio Galicia
 
Dreamweaver j-l
Dreamweaver j-lDreamweaver j-l
Dreamweaver j-lAquino1912
 
Manual de DreamWeaver
Manual de DreamWeaverManual de DreamWeaver
Manual de DreamWeaverarte6
 
1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaverMarianmv
 

La actualidad más candente (20)

Dreamweaver interfaz
Dreamweaver interfazDreamweaver interfaz
Dreamweaver interfaz
 
Barras dreamweaver
Barras dreamweaverBarras dreamweaver
Barras dreamweaver
 
Adobe dreamweaver cs5
Adobe dreamweaver cs5Adobe dreamweaver cs5
Adobe dreamweaver cs5
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
P R E S E N T A C I O N P O W E R D R E A M W E A V E R
P R E S E N T A C I O N  P O W E R  D R E A M W E A V E RP R E S E N T A C I O N  P O W E R  D R E A M W E A V E R
P R E S E N T A C I O N P O W E R D R E A M W E A V E R
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Dreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trochaDreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trocha
 
Presentación dreamweaver 1
Presentación dreamweaver 1Presentación dreamweaver 1
Presentación dreamweaver 1
 
Espacio de trabajo de macromedia dreamweaver
Espacio de trabajo de macromedia dreamweaverEspacio de trabajo de macromedia dreamweaver
Espacio de trabajo de macromedia dreamweaver
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaver
 
Dreamweaver Tutorial
Dreamweaver Tutorial Dreamweaver Tutorial
Dreamweaver Tutorial
 
OBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVEROBJETIVOS DE DREAMWEAVER
OBJETIVOS DE DREAMWEAVER
 
Dreamweaver j-l
Dreamweaver j-lDreamweaver j-l
Dreamweaver j-l
 
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
 
Dreamweaver P
Dreamweaver PDreamweaver P
Dreamweaver P
 
Curso Dreamweaver CS6
Curso Dreamweaver CS6Curso Dreamweaver CS6
Curso Dreamweaver CS6
 
Manual de DreamWeaver
Manual de DreamWeaverManual de DreamWeaver
Manual de DreamWeaver
 
Frontpage3
Frontpage3Frontpage3
Frontpage3
 
1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaver
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 

Destacado (20)

PATOGENOS DEL TRACTO URINARIO
PATOGENOS DEL TRACTO URINARIOPATOGENOS DEL TRACTO URINARIO
PATOGENOS DEL TRACTO URINARIO
 
Topologia en estrella
Topologia en estrellaTopologia en estrella
Topologia en estrella
 
Power educar
Power educarPower educar
Power educar
 
Access
AccessAccess
Access
 
Mujeres pioneras del cine
Mujeres pioneras del cineMujeres pioneras del cine
Mujeres pioneras del cine
 
Legislacion autonomica
Legislacion autonomicaLegislacion autonomica
Legislacion autonomica
 
Programa de estudios
Programa de estudiosPrograma de estudios
Programa de estudios
 
Bandeiras
BandeirasBandeiras
Bandeiras
 
Par trenzado
Par trenzadoPar trenzado
Par trenzado
 
Floss - Programa de open source
Floss - Programa de open sourceFloss - Programa de open source
Floss - Programa de open source
 
Katalog Clothink Konveksi Grosir
Katalog Clothink Konveksi GrosirKatalog Clothink Konveksi Grosir
Katalog Clothink Konveksi Grosir
 
Guia Da SessãO 7
Guia Da SessãO 7Guia Da SessãO 7
Guia Da SessãO 7
 
#Desafio100
#Desafio100#Desafio100
#Desafio100
 
HISTÓRIA SUELY 1VB
HISTÓRIA SUELY 1VBHISTÓRIA SUELY 1VB
HISTÓRIA SUELY 1VB
 
Abrindo Portas
Abrindo PortasAbrindo Portas
Abrindo Portas
 
1VC VERA KAISSA URBANIZAÇÃO
1VC VERA KAISSA URBANIZAÇÃO1VC VERA KAISSA URBANIZAÇÃO
1VC VERA KAISSA URBANIZAÇÃO
 
Fabula Empresarial
Fabula EmpresarialFabula Empresarial
Fabula Empresarial
 
Movimento de tierras
Movimento de tierrasMovimento de tierras
Movimento de tierras
 
MENINGITIS
MENINGITISMENINGITIS
MENINGITIS
 
TITULARIA RÉGIA
TITULARIA RÉGIATITULARIA RÉGIA
TITULARIA RÉGIA
 

Similar a Dreamweaver

Similar a Dreamweaver (20)

Capitulo 2: Espacio_trabajo
Capitulo 2: Espacio_trabajoCapitulo 2: Espacio_trabajo
Capitulo 2: Espacio_trabajo
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Guia de aprendizaje
Guia de aprendizajeGuia de aprendizaje
Guia de aprendizaje
 
Johan T,T
Johan T,TJohan T,T
Johan T,T
 
Ppt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperadoPpt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperado
 
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
 
M ventana de dreamweaver
M ventana de dreamweaverM ventana de dreamweaver
M ventana de dreamweaver
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Trabajo dreamweaver
Trabajo dreamweaverTrabajo dreamweaver
Trabajo dreamweaver
 
Trabajo dreamweaver (1)
Trabajo dreamweaver (1)Trabajo dreamweaver (1)
Trabajo dreamweaver (1)
 
Trabajo dreamweaver (1)
Trabajo dreamweaver (1)Trabajo dreamweaver (1)
Trabajo dreamweaver (1)
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Tutorial de dreamweaver
Tutorial de dreamweaverTutorial de dreamweaver
Tutorial de dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Informatica import....
Informatica import....Informatica import....
Informatica import....
 

Más de restauracio

Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscaperestauracio
 
Adobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea MorenoAdobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea Morenorestauracio
 
the gimp espai de treball i restaura fotos
the gimp espai de treball i restaura fotosthe gimp espai de treball i restaura fotos
the gimp espai de treball i restaura fotosrestauracio
 
Linea del temps open office Text
Linea del temps open office TextLinea del temps open office Text
Linea del temps open office Textrestauracio
 
Diferencias esenciales entre microsoft office y open office (final)
Diferencias esenciales entre microsoft office y open office (final)Diferencias esenciales entre microsoft office y open office (final)
Diferencias esenciales entre microsoft office y open office (final)restauracio
 
T4 ex2 o oo texto
T4 ex2 o oo textoT4 ex2 o oo texto
T4 ex2 o oo textorestauracio
 
T4 ex1 o oo presentacio
T4 ex1 o oo presentacioT4 ex1 o oo presentacio
T4 ex1 o oo presentaciorestauracio
 
Adobe photoshop power point
Adobe photoshop power pointAdobe photoshop power point
Adobe photoshop power pointrestauracio
 
Trabajo adobe photoshop
Trabajo adobe photoshopTrabajo adobe photoshop
Trabajo adobe photoshoprestauracio
 

Más de restauracio (20)

Adobe illustrator vs inkscape
Adobe illustrator vs inkscapeAdobe illustrator vs inkscape
Adobe illustrator vs inkscape
 
Adobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea MorenoAdobe illustrator vs inkscape - Andrea Moreno
Adobe illustrator vs inkscape - Andrea Moreno
 
the gimp espai de treball i restaura fotos
the gimp espai de treball i restaura fotosthe gimp espai de treball i restaura fotos
the gimp espai de treball i restaura fotos
 
Linea del temps open office Text
Linea del temps open office TextLinea del temps open office Text
Linea del temps open office Text
 
Diferencias esenciales entre microsoft office y open office (final)
Diferencias esenciales entre microsoft office y open office (final)Diferencias esenciales entre microsoft office y open office (final)
Diferencias esenciales entre microsoft office y open office (final)
 
Tabla
TablaTabla
Tabla
 
Vistes citerea
Vistes citereaVistes citerea
Vistes citerea
 
Citerea
CitereaCiterea
Citerea
 
T4 ex2
T4 ex2T4 ex2
T4 ex2
 
T4 ex1
T4 ex1T4 ex1
T4 ex1
 
T2 ex1
T2 ex1T2 ex1
T2 ex1
 
T4 ex2 o oo texto
T4 ex2 o oo textoT4 ex2 o oo texto
T4 ex2 o oo texto
 
T4 ex1 o oo presentacio
T4 ex1 o oo presentacioT4 ex1 o oo presentacio
T4 ex1 o oo presentacio
 
Adobe photoshop power point
Adobe photoshop power pointAdobe photoshop power point
Adobe photoshop power point
 
Tabla
TablaTabla
Tabla
 
Trabajo adobe photoshop
Trabajo adobe photoshopTrabajo adobe photoshop
Trabajo adobe photoshop
 
Vistesl
VisteslVistesl
Vistesl
 
T4 ex1
T4 ex1T4 ex1
T4 ex1
 
T4 ex2
T4 ex2T4 ex2
T4 ex2
 
T2 ex1taula
T2 ex1taulaT2 ex1taula
T2 ex1taula
 

Dreamweaver

  • 2. Introducción a Dreamweaver. Creación de un sitio Web. Macromedia Dreamweaver es un editor HTML para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Dreamweaver contiene útiles herramientas tanto si se desea controlar manualmente el código HTML como si se prefiere trabajar en un entorno de edición visual. Con Dreamweaver se puede controlar todo el proceso de creación de un sitio Web: creación del sitio, estructurar el árbol de links, diseño de las páginas y la subida del trabajo a un servidor Web. Un sitio Web es un conjunto de documentos y de objetos vinculados, bajo un diseño similar u objetivo común. Dreamweaver es una herramienta de creación y administración de sitios, por lo que se puede utilizar para crear sitios Web completos, además de documentos por separado. El primer paso al crear un sitio Web consiste en planificarlo. Para obtener resultados óptimos, se debe diseñar y planificar la estructura del sitio Web antes de crear las páginas. Se debe empezar definiendo la estrategia o la finalidad de un sitio. Planificar y organizar cuidadosamente el sitio desde el primer momento puede ayudar a ahorrar tiempo más adelante. La organización del sitio no sólo implica la determinación de los archivos que van a incluirse, sino que también requiere un examen de las necesidades, el perfil de la audiencia y sus objetivos. El siguiente paso consiste en configurar Dreamweaver para poder trabajar con la estructura básica del sitio. Este es el paso más importante: dejar bien configurado en qué carpeta se va a colocar todo lo que se va a diseñar, y dejar estructurado el sitio tal y como se subirá al servidor. Por tanto el desarrollo de un sitio Web con Dreamweaver comienza en la definición de una carpeta local para el sitio. En esta carpeta se guardarán todos los archivos que lo compongan. Una vez que se haya organizado la información y determinado una estructura, se podrá comenzar a diseñar el aspecto y el funcionamiento del sitio.
  • 3. Hay varias formas de seleccionar un nuevo documento para empezar a trabajar en él: con un documento en blanco, partiendo de un archivo de diseño de Dreamweaver o utilizando una plantilla que defina el aspecto del documento y establezca las partes que se puedan cambiar. Se puede empezar creando páginas de muestra y trabajar en el diseño definitivo de las páginas. Son interesantes herramientas como las capas, hojas de estilo, las tablas para la estructura de las páginas, los marcos para la organización o las plantillas para reutilizar los diseños. Con Dreamweaver, es muy fácil añadir todo tipo de contenidos (texto, imágenes, películas, sonidos y elementos multimedia). Hay dos métodos para crear las páginas. La edición visual, con herramientas sencillas, o el entorno de codificación que permite trabajar directamente con código. Puede utilizarse uno de los dos modos, o una combinación de ambos. En Dreamweaver, se puede trabajar en la vista “Diseño” o en la vista “Código” para insertar imágenes en un documento. Al añadir imágenes a un documento de Dreamweaver, se puede establecer o modificar las propiedades de imagen y ver los cambios directamente en la ventana de documento. Existen diversos formatos de archivo gráfico, aunque para páginas Web generalmente se utilizan tres formatos: GIF, JPEG y PNG. Actualmente, GIF y JPEG son los formatos de archivo que cuentan con mayor compatibilidad y pueden verse en la mayoría de los navegadores. Se recomienda que se haga una optimización previa de las imágenes tal y como se van a insertar, y que los textos se redacten en un editor de textos. Con esto se ahorra tiempo y dudas a la hora de hacer la web. Una vez que el diseño esté finalizado, es cuando se crea el sitio y codifican las páginas, añadiendo el contenido y la interactividad. A continuación, se vincularán las páginas y se comprobará si el sitio funciona y si cumple los objetivos para los que ha sido diseñado. Para terminar el ciclo, publicará el sitio en un servidor.
  • 4. Entorno de trabajo de Dreamweaver. El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que se puedan realizar cambios en los documentos rápidamente. Estas son algunas de las funciones principales de Dreamweaver:  La página de inicio permite abrir un documento reciente o crear un documento nuevo.  La barra de herramientas “Insertar” contiene botones para la inserción de diversos tipos de objetos, como imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML que permite establecer diversos atributos al insertarlo.  La barra de herramientas “Documento” contiene botones que proporcionan opciones para diferentes vistas de la ventana de documento (como la vista “Diseño” y la vista “Código”), diversas opciones de visualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.  La barra de herramientas “Estándar” contiene botones para las operaciones más habituales de los menús “Archivo” y “Edición”: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer.  La ventana de documento muestra el documento actual mientras se está creando y editando.  El inspector de propiedades permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades.  El selector de etiquetas (código HTML), que aparece en la barra de estado en la parte inferior de la ventana de documento, muestra la jerarquía de etiquetas que rodean a la selección actual.
  • 5. Bibliografía  Macromedia Dreamweaver MX, Desarrollo de aplicaciones y bases de datos en la Web. César Pérez  Macromedia Dreamweaver MX 2004, Guía Práctica para usuarios. Óscar Peña de San Antonio  Macromedia Dreamweaver MX 2004, Diseñe y actualice sus sitios Web con eficacia. Khristine Annwn Page