SlideShare una empresa de Scribd logo
1 de 31
Descargar para leer sin conexión
Ppt5 bcd.pptm recuperado
 Adobe Dreamweaver es una aplicación en programa de estudio (basada en la
forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y
edición de sitios, vídeos y aplicaciones Web basados en estándares. Creado
inicialmente por Macromedia (actualmente producido por Adobe Systems) es uno
de los programas más utilizados 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.
 Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es
de código abierto) 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.
 Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de
Macromedia por parte de Adobe. Las letras CS significan Creative Suite
 La gran ventaja de este editor sobre otros es su gran poder de ampliación y
personalización, puesto que en este programa sus rutinas (como la de insertar un
hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-
C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos
del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que
sea un programa muy fluido y todo ello permite que programadores y editores web
hagan extensiones para su programa y lo pongan a su gusto.
 Las versiones originales de la aplicación se utilizaban como simples
editores WYSIWYG. Sin embargo, versiones más recientes soportan otras
tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.
 Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y
actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está
disponible tanto para la plataforma MAC como para Windows, aunque también se
puede ejecutar en plataformas basadas en UNIX utilizando programas que
implementan las API's de Windows, tipo Wine.
 Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de
cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y
sitios web fácilmente sin necesidad de escribir código.
 Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML
más largas de lo que solían ser al incluir mucho código inútil, lo cual va en
detrimento de la ejecución de las páginas en el navegador web. Esto puede ser
especialmente cierto ya que la aplicación facilita en exceso el diseño de las
páginas mediante tablas. Además, algunos desarrolladores web han criticado
Dreamweaver en el pasado porque creaba código que no cumplía con los
estándares del consorcio Web (W3C).
 No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar
páginas sin tablas en versiones posteriores de la aplicación, haciendo que se
reduzca el exceso de código.
 Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web
instalados en su ordenador para previsualizar las páginas web. También dispone de
herramientas de administración de sitios dirigidas a principiantes como, por
ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por
cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de
comportamientos también permite crear JavaScript básico sin conocimientos de
código.
 Con la llegada de la versión MX, Macromedia incorporó herramientas de
creación de contenido dinámico en Dreamweaver. En lo fundamental de las
herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos
como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando
tecnología de script como, por
ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad
de tener experiencia previa en programación.
 Un aspecto de alta consideración de Dreamweaver es su funcionalidad
con extensiones. Es decir, permite el uso de "Extensiones". Las
extensiones, tal y como se conocen, son pequeños programas, que
cualquier desarrollador web puede escribir (normalmente en HTML y
Javascript) y que cualquiera puede descargar e instalar, ofreciendo así
funcionalidades añadidas a la aplicación. Dreamweaver goza del
apoyo de una gran comunidad de desarrolladores de extensiones que
hacen posible la disponibilidad de extensiones gratuitas y de pago para
la mayoría de las tareas de desarrollo web, que van desde simple
efectos rollover hasta completas cartas de compra.
 También podría decirse que, para un diseño más rápido y a la
vez fácil, podría complementarse con Fireworks en donde se
podría diseñar un menú u otras creaciones de imágenes (gif
web, gif websnap, gif adaptable, jpeg calidad superior, jpeg
archivo más pequeño, gif animado websnap) para un sitio web
y después exportar la imagen creada y así utilizarla como una
sola en donde ya llevará los vínculos para dicho sitio.
Ppt5 bcd.pptm recuperado
 El entorno de Dreamweaver
 Vamos a ver cuáles son los elementos básicos de Dreamweaver , 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. Cuando conozcamos todo esto estaremos en disposición de
empezar a crear páginas web.

 Ruta :
 Clic en Inicio
 Clic en todos los programa
 Clic en Macromedia
 Clic en Macromedia Dreamweaver.
 La pantalla inicial
 Al 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 del curso. La pantalla que se muestra
a continuación (y en general todas las de este curso) 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, como veremos
más adelante.
 Las barras
 La barra la aplicación es una novedad en Dreamweaver CS4. 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.
 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 de sitios, que ya
veremos.
 Más hacia la derecha observamos el conmutador del espacio
de trabajo, como un desplegable. Un espacio de trabajo es la
configuración del entorno (paneles visibles y su disposición) que
podemos guardar y cargar. Lo veremos 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 se pueden
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.
 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. Podemos cerrar cada
documento clicando en el aspa, o acceder a otras acciones
haciendo clic con el botón derecho, como Cerrar otros archivos.
 Dreamweaver CS4 añade una novedad. Debajo de las pestañas
encontramos los archivos a que utiliza nuestra página, como la
hoja de estilos, archivos JavaScript, etc... pudiendo acceder a
ellos con un clic. Esto nos ahorrará bastante tiempo.
 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.
 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.
 • La barra de herramientas de documento.
 La 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.

 Configurar un sitio local
 En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las
propiedades de los documentos, como puede ser el color de fondo.
 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 y planificar 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 el disco local. Los documentos HTML
normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las
animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el
objetivo de tener una mejor organización de los archivos 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 el denominado sitio remoto, lo que equivale a
publicar el sitio, de modo que la gente podrá verlo en Internet.
 Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que
trabajaremos, y los cambios los actualizaremos en el sitio remoto.
 La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de
forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
 La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta
acceder a una URL genérica, el servidor devuelve la página con ese nombre.
Ppt5 bcd.pptm recuperado
 Una vez creadas las carpetas que formarán la estructura del sitio
local, o por lo menos la carpeta raíz, ya es posible definir el
nuevo sitio.
 Para ello hay que dirigirse al menú Sitio, a la opción Administrar
sitios... o directamente a Nuevo sitio.
 Recuerda que a través del panel Archivos, se puede cambiar a
cada uno de los sitios definidos.
 También podemos acceder desde el icono de acceso rápido
de la barra de la aplicación a la opción Administrar sitios oNuevo
sitio...
 Tanto si se elige la opción Nuevo..., como si se elige la
opción Editar..., se mostrará la misma ventana en la que definir o
modificar las características del sitio.
 Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
 Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo
clic en ella.
 Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único
que empleemos de momento.
 Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de
sitios.
 La Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. La
carpeta puede contener ya archivos o no.
 Estas dos características son las imprescindibles para definir un sitio local. El resto son opcionales,
y de momento no nos interesan.
 Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local,
y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
 Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas y minúsculas. Ya
comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores
distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo hará.
 Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
 Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la
pestaña Básicas, en vez de la pestaña Avanzadas.
 Abrir un sitio
 Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la
opción Administrar sitios.... seleccionar el sitio de la lista de sitios y
pulsar sobre el botón Listo.
 Ver el sitio
 El panel Archivos (menú Ventana → Archivos o tecla F8) es uno
de los paneles más importantes de Dreamweaver, ya que nos
da acceso a los archivo del sito.
Gracias
Johan Rojas Núñez 4”J”

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Sin título 1
Sin título 1Sin título 1
Sin título 1
 
Dreamweaver generalidades
Dreamweaver generalidadesDreamweaver generalidades
Dreamweaver generalidades
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Presentación dreamweaver 1
Presentación dreamweaver 1Presentación dreamweaver 1
Presentación dreamweaver 1
 
Taller de Dreamweaver 8
Taller de Dreamweaver 8Taller de Dreamweaver 8
Taller de 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
 
Presentacion de Dreamweaver
 Presentacion  de Dreamweaver Presentacion  de Dreamweaver
Presentacion de Dreamweaver
 
Trabajo dreamweaver
Trabajo dreamweaverTrabajo dreamweaver
Trabajo dreamweaver
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
La interfaz de dreamweaver cs5
La interfaz de dreamweaver cs5La interfaz de dreamweaver cs5
La interfaz de dreamweaver cs5
 
Dreamweaver Interfaz
Dreamweaver InterfazDreamweaver Interfaz
Dreamweaver Interfaz
 
DREAMWEAVER
DREAMWEAVERDREAMWEAVER
DREAMWEAVER
 
Barras dreamweaver
Barras dreamweaverBarras dreamweaver
Barras dreamweaver
 
Manual Dreamweaver
Manual DreamweaverManual Dreamweaver
Manual Dreamweaver
 

Destacado

Desarrollo de sitios web
Desarrollo de sitios webDesarrollo de sitios web
Desarrollo de sitios webmax7power
 
Capitulo 2: Espacio_trabajo
Capitulo 2: Espacio_trabajoCapitulo 2: Espacio_trabajo
Capitulo 2: Espacio_trabajocristina081188
 
Adobe dreamweaver cs4
Adobe dreamweaver cs4Adobe dreamweaver cs4
Adobe dreamweaver cs4Elias Vite
 
Presentacion de flash marlene acevedo escobar
Presentacion de flash marlene acevedo escobarPresentacion de flash marlene acevedo escobar
Presentacion de flash marlene acevedo escobarmaryrox
 
Manual dreamweaver 8 spanish
Manual dreamweaver 8 spanishManual dreamweaver 8 spanish
Manual dreamweaver 8 spanishbetosix1
 
Procedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaverProcedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaverRacsosabe
 

Destacado (7)

Curso dreamweaver CS4
Curso dreamweaver CS4Curso dreamweaver CS4
Curso dreamweaver CS4
 
Desarrollo de sitios web
Desarrollo de sitios webDesarrollo de sitios web
Desarrollo de sitios web
 
Capitulo 2: Espacio_trabajo
Capitulo 2: Espacio_trabajoCapitulo 2: Espacio_trabajo
Capitulo 2: Espacio_trabajo
 
Adobe dreamweaver cs4
Adobe dreamweaver cs4Adobe dreamweaver cs4
Adobe dreamweaver cs4
 
Presentacion de flash marlene acevedo escobar
Presentacion de flash marlene acevedo escobarPresentacion de flash marlene acevedo escobar
Presentacion de flash marlene acevedo escobar
 
Manual dreamweaver 8 spanish
Manual dreamweaver 8 spanishManual dreamweaver 8 spanish
Manual dreamweaver 8 spanish
 
Procedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaverProcedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaver
 

Similar a Ppt5 bcd.pptm recuperado

Similar a Ppt5 bcd.pptm recuperado (20)

Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Presentación sin título
Presentación sin títuloPresentación sin título
Presentación sin título
 
dremweaver
dremweaverdremweaver
dremweaver
 
Dreamweaver 2013 karen palacio 11.a
Dreamweaver 2013 karen palacio 11.aDreamweaver 2013 karen palacio 11.a
Dreamweaver 2013 karen palacio 11.a
 
Creacion de paginas_web
Creacion de paginas_webCreacion de paginas_web
Creacion de paginas_web
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 
Presentación1
Presentación1 Presentación1
Presentación1
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Andrea Olivera
Andrea OliveraAndrea Olivera
Andrea Olivera
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Johana
JohanaJohana
Johana
 

Último

Taller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxTaller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxSANTIAGOREYES92
 
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfCuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfRosaAmeliaLlacsahuan
 
La electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwLa electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwDanielaEspaa3
 
Taller grupal de electricidad y electrónica
Taller grupal de electricidad y electrónicaTaller grupal de electricidad y electrónica
Taller grupal de electricidad y electrónicasofiacardonasolanill
 
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Mariano Cabrera Lanfranconi
 
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.SARA BUENDIA RIOJA
 
Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]QuantiKa14
 

Último (7)

Taller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docxTaller Evaluativo Tecnologías Web 2.0.docx
Taller Evaluativo Tecnologías Web 2.0.docx
 
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdfCuadernillo de Comunicación 1. Primer grado de Primaria.pdf
Cuadernillo de Comunicación 1. Primer grado de Primaria.pdf
 
La electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluwLa electricidad y la electrónica.pdf.iluw
La electricidad y la electrónica.pdf.iluw
 
Taller grupal de electricidad y electrónica
Taller grupal de electricidad y electrónicaTaller grupal de electricidad y electrónica
Taller grupal de electricidad y electrónica
 
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
Charla eCommerce Day Bolivia 2024 - Comercio Electrónico en Bolivia 2024
 
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.PRESENTACION DE "CASO NOKIA" // PDF.EDU.
PRESENTACION DE "CASO NOKIA" // PDF.EDU.
 
Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]Violencia sexual a través de Internet [ICAS 2024]
Violencia sexual a través de Internet [ICAS 2024]
 

Ppt5 bcd.pptm recuperado

  • 2.  Adobe Dreamweaver es una aplicación en programa de estudio (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es uno de los programas más utilizados 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.
  • 3.  Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es de código abierto) 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.
  • 4.  Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de Macromedia por parte de Adobe. Las letras CS significan Creative Suite
  • 5.  La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización, puesto que en este programa sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript- C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que sea un programa muy fluido y todo ello permite que programadores y editores web hagan extensiones para su programa y lo pongan a su gusto.
  • 6.  Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y algunos frameworks del lado servidor.
  • 7.  Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas en UNIX utilizando programas que implementan las API's de Windows, tipo Wine.
  • 8.  Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.  Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del consorcio Web (W3C).  No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.
  • 9.  Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su ordenador para previsualizar las páginas web. También dispone de herramientas de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de comportamientos también permite crear JavaScript básico sin conocimientos de código.
  • 10.  Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHP sin necesidad de tener experiencia previa en programación.
  • 11.  Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.
  • 12.  También podría decirse que, para un diseño más rápido y a la vez fácil, podría complementarse con Fireworks en donde se podría diseñar un menú u otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola en donde ya llevará los vínculos para dicho sitio.
  • 14.  El entorno de Dreamweaver  Vamos a ver cuáles son los elementos básicos de Dreamweaver , 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. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.   Ruta :  Clic en Inicio  Clic en todos los programa  Clic en Macromedia  Clic en Macromedia Dreamweaver.
  • 15.  La pantalla inicial  Al 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 del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) 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, como veremos más adelante.
  • 16.  Las barras  La barra la aplicación es una novedad en Dreamweaver CS4. 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.
  • 17.  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 de sitios, que ya veremos.
  • 18.  Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante.  Los menús, están agrupados en categorías.
  • 19.  Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden 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.
  • 20.  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. Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.  Dreamweaver CS4 añade una novedad. Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.
  • 21.  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.
  • 22.  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.  • La barra de herramientas de documento.
  • 23.  La 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. 
  • 24.  Configurar un sitio local  En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.  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 y planificar 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 el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos 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 el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.  Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.  La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.  La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.
  • 26.  Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio.  Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.  Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.  También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios oNuevo sitio...
  • 27.  Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir o modificar las características del sitio.
  • 28.  Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.  Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.  Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único que empleemos de momento.  Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de sitios.  La Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.  Estas dos características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.  Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.  Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas y minúsculas. Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo hará.  Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.  Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.
  • 29.  Abrir un sitio  Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.
  • 30.  Ver el sitio  El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más importantes de Dreamweaver, ya que nos da acceso a los archivo del sito.