Revista Sobre Revista Sobre Revista Sobre Revista Sobre

el el el el

DreamweaverDreamweaverDreamweaverDreamweaver

Priscila CardenasPriscila CardenasPriscila CardenasPriscila Cardenas

1

EditorialEditorialEditorialEditorial::::

Adobe DreamweaverAdobe DreamweaverAdobe DreamweaverAdobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio 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.

Se vende como parte de la suite Adobe Creative Suite 3 y 4.

La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervinculo, 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, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga 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 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma 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.

2

ÍndiceÍndiceÍndiceÍndice

1.Que es el Dreamweaver………………………………………….31.Que es el Dreamweaver………………………………………….31.Que es el Dreamweaver………………………………………….31.Que es el Dreamweaver………………………………………….3

2.Lo Nuevo………………………………………………………..52.Lo Nuevo………………………………………………………..52.Lo Nuevo………………………………………………………..52.Lo Nuevo………………………………………………………..5

3.C3.C3.C3.Como crear y abrir documentos……………………………….6omo crear y abrir documentos……………………………….6omo crear y abrir documentos……………………………….6omo crear y abrir documentos……………………………….6

4.4.4.4. Creación de una pagina en Creación de una pagina en Creación de una pagina en Creación de una pagina en blanco………………………………………7blanco………………………………………7blanco………………………………………7blanco………………………………………7

5.Introduccion de los elementos del espacio de trabajo……………………..95.Introduccion de los elementos del espacio de trabajo……………………..95.Introduccion de los elementos del espacio de trabajo……………………..95.Introduccion de los elementos del espacio de trabajo……………………..9

6. Introduccion a la ventana del documento………………………………….106. Introduccion a la ventana del documento………………………………….106. Introduccion a la ventana del documento………………………………….106. Introduccion a la ventana del documento………………………………….10

I7. I7. I7. I7. IIIIntroduccionntroduccionntroduccionntroduccion a la ventana de herramientas documento………………11a la ventana de herramientas documento………………11a la ventana de herramientas documento………………11a la ventana de herramientas documento………………11

8. Introduccion a la barra de estado……………………………………………128. Introduccion a la barra de estado……………………………………………128. Introduccion a la barra de estado……………………………………………128. Introduccion a la barra de estado……………………………………………12

9.Introducción a la barra de herramientas Representación de estilo9.Introducción a la barra de herramientas Representación de estilo9.Introducción a la barra de herramientas Representación de estilo9.Introducción a la barra de herramientas Representación de estilo….….….….12121212 10.Información general sobre el panel Insertar 10.Información general sobre el panel Insertar 10.Información general sobre el panel Insertar 10.Información general sobre el panel Insertar ……………………….……………………….……………………….……………………….12121212 11.Introducción al 11.Introducción al 11.Introducción al 11.Introducción al panel Estilos CSSpanel Estilos CSSpanel Estilos CSSpanel Estilos CSS………………………………………………………………………………………………14141414 12.Visualización de barras de herramientas 12.Visualización de barras de herramientas 12.Visualización de barras de herramientas 12.Visualización de barras de herramientas …………………….…………………….…………………….…………………….14141414 13.Utilización del inspector de propiedades 13.Utilización del inspector de propiedades 13.Utilización del inspector de propiedades 13.Utilización del inspector de propiedades ………………………….………………………….………………………….…………………………. 14141414 14.Ampliación o contracción del inspector de propiedades14.Ampliación o contracción del inspector de propiedades14.Ampliación o contracción del inspector de propiedades14.Ampliación o contracción del inspector de propiedades………………..15………………..15………………..15………………..15 15.Utilización de menús contextuales15.Utilización de menús contextuales15.Utilización de menús contextuales15.Utilización de menús contextuales……………………….……………………….……………………….………………………. 15151515 16.Acerca del e16.Acerca del e16.Acerca del e16.Acerca del establecimiento de vínculos y stablecimiento de vínculos y stablecimiento de vínculos y stablecimiento de vínculos y navegaciónnavegaciónnavegaciónnavegación…………………15…………………15…………………15…………………15 17.Ubicación y rutas de documentos 17.Ubicación y rutas de documentos 17.Ubicación y rutas de documentos 17.Ubicación y rutas de documentos …………………………………………………………………………………………………………………………………………15151515

Que es el Dreamweaver?Que es el Dreamweaver?Que es el Dreamweaver?Que es el Dreamweaver?

Adobe DreamweaverAdobe DreamweaverAdobe DreamweaverAdobe Dreamweaver es una aplicacióndeAdobe Flash) enfocada a la construcción y edición de sitios y en estándares. Creado inicialmente por 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 inteAdobe Flash y, recientemente, por su soporte de los estándares Consortium. Su principal competidor es 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ápara Internet Explorer, y no validaba como versiones recientes.

Se vende como parte de la suite

La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervinculo, una imagen o añadir un comportamiento) están hechas en una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga 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

Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma 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

Como editor WYSIWYG que es, Dreamweaver permite ocultar el códiusuario, 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 propuelargas 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 webla 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

Que es el Dreamweaver?Que es el Dreamweaver?Que es el Dreamweaver?Que es el Dreamweaver?

aplicación en forma de estudio (basada en la forma de estudio ada a la construcción y edición de sitios y aplicaciones Web

en estándares. Creado inicialmente por Macromedia (actualmente producido por ). 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 y, recientemente, por su soporte de los estándares del World Wide Web . 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á

, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las

Se vende como parte de la suite Adobe Creative Suite 3 y 4.

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 hipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece

lidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino, rutinas

hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.

Las versiones originales de la aplicación se utilizaban como . Sin embargo, versiones más recientes soportan otras , JavaScript y algunos frameworks del lado servidor.

Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma

, aunque también se puede ejecutar en plataformas basadas en utilizando programas que implementan las API's de Windows, tipo

que es, Dreamweaver permite ocultar el código 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

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).

3

en forma de estudio (basada en la forma de estudio aplicaciones Web basados

(actualmente producido por Adobe ). Es el programa de este tipo más utilizado en el sector del diseño y la

gración con otras herramientas como World Wide Web tiene soporte tanto

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

estándar. Esto se ha ido corrigiendo en las

La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización

. Sin embargo, versiones más recientes soportan otras del lado servidor.

Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible tanto para la platafoma

, aunque también se puede ejecutar en plataformas basadas en utilizando programas que implementan las API's de Windows, tipo Wine.

go HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web

sta 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

e 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 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 icontenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también permite la conexión a Bases de Datos como para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, (Active Server Pages), ASP.NETtener experiencia previa en programación.

Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se conoprogramas, 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 comudesarrolladores 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 podría uno diseñar un menú o para otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado weimagen creada y así utilizarla como una sola, en donde ya llevara los vínculos a un dicho sitio en especifico que uno le haya dado.(MRR

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

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

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 MySQLpara filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo,

ASP.NET, ColdFusion, JSP (JavaServer Pages) y PHPtener experiencia previa en programación.

Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. 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 comudesarrolladores 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.

que para un diseño más rápido y a la vez fácil podría complementarse con fireworks en donde podría uno diseñar un menú o para 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 llevara los vínculos a un dicho sitio en especifico que uno le haya dado.(MRR - U.P.C.)

4

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

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

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

ncorporó herramientas de creación de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML

MySQL y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por ejemplo, ASP

PHP sin necesidad de

Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Es decir, cen, 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

que para un diseño más rápido y a la vez fácil podría complementarse con fireworks en donde podría uno diseñar un menú o para otras creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad superior, jpeg

bsnap) para un sitio web y después exportar la imagen creada y así utilizarla como una sola, en donde ya llevara los vínculos a un dicho

Lo Nuevo…Lo Nuevo…Lo Nuevo…Lo Nuevo…

Live View.Live View.Live View.Live View. Esto es grande. El modo visual de exacto, malacostumbrar a los diseñadores y otras cosas, ha mejorado. Mucho. Ahora no sólo es posible ver el CSS tan similar al navegador como es posible, sino también puede interpretar Javascript, comportamientosusando AJAX, si cambias el color o efectos de algun elemento con Javascript, si implementas efectos interactivos con CSS, los podrás ver con Live View.

Navegador de códigoNavegador de códigoNavegador de códigoNavegador de código. En pocas palabras, el Code Navigatoextensión Firebug de Firefox. Puedes, de manera inmediata, ver el código CSS, HTML y JS que afecta o está relacionado con elementos en la vista de diseño o Live View. Además de eso, el navegador es capaz de cargar el DOM. Eso sigJavascript al contenido HTML de un sitio web, podrás ver esos cambios en el Code Navigator. Como Firebug, pero completamente integrado dentro de

Enfoque en CSS estándar y bien hechoEnfoque en CSS estándar y bien hechoEnfoque en CSS estándar y bien hechoEnfoque en CSS estándar y bien hechode escribir código, por medio del inspector de propiedades. Pero ahora es capaz de dividirlo en varias hojas, entender la estructura HTML, los IDs y organizarlo de la mejor y más semántica manera.

Datos con SpryDatos con SpryDatos con SpryDatos con Spry. Spry es el framework de Javascript y AJAX de autorepiten con datos que llegan por XML hacia Spry.

Completado de código Javascript (Intellisense)Completado de código Javascript (Intellisense)Completado de código Javascript (Intellisense)Completado de código Javascript (Intellisense)es capaz de analizar código en Javascript y mostrar en propiedades de objetos que hayamos creado, a medida que codeamos. No sé que tan amigable sea con frameworks complejos como jQuery, pero es un avance sin dudas. Subversion y control de versionesSubversion y control de versionesSubversion y control de versionesSubversion y control de versionesmás usados sistemas de control de versiones y administración de código en equipos de desarrollo. Tiene integrada nativamente la capacidad de sincronizarse con un repositorio SVN. Simple y directo. El comportamiento es bastante intuitivo y sencillo. Objetos inteligentes de Objetos inteligentes de Objetos inteligentes de Objetos inteligentes de Adobe Adobe Adobe Adobe Photoshop y Photoshop y Photoshop y Photoshop y Fireworks.Fireworks.Fireworks.Fireworks. Crea una imagen, sincronizala con Photoshop y todos los cambios que hagas en un PSD se verá en un JPG exportado y optimizado para la web. Agranda la imagen

Esto es grande. El modo visual de Dreamweaver criticado por tantos por no ser exacto, malacostumbrar a los diseñadores y otras cosas, ha mejorado. Mucho. Ahora no sólo es posible ver el CSS tan similar al navegador como es posible, sino también puede interpretar Javascript, comportamientos de AJAX y estados de AJAX. Si cargas datos XML usando AJAX, si cambias el color o efectos de algun elemento con Javascript, si implementas efectos interactivos con CSS, los podrás ver con Live View.

. En pocas palabras, el Code Navigator de Dreamweaver extensión Firebug de Firefox. Puedes, de manera inmediata, ver el código CSS, HTML y JS que afecta o está relacionado con elementos en la vista de diseño o Live View. Además de eso, el navegador es capaz de cargar el DOM. Eso significa que si haces cambios con Javascript al contenido HTML de un sitio web, podrás ver esos cambios en el Code Navigator. Como Firebug, pero completamente integrado dentro de Dreamweaver.

Enfoque en CSS estándar y bien hechoEnfoque en CSS estándar y bien hechoEnfoque en CSS estándar y bien hechoEnfoque en CSS estándar y bien hecho.Dreamweaver aun permite crear CSS sin necesidad de escribir código, por medio del inspector de propiedades. Pero ahora es capaz de dividirlo en varias hojas, entender la estructura HTML, los IDs y organizarlo de la mejor y más

el framework de Javascript y AJAX de ADOBEautorepiten con datos que llegan por XML hacia Spry.

Completado de código Javascript (Intellisense)Completado de código Javascript (Intellisense)Completado de código Javascript (Intellisense)Completado de código Javascript (Intellisense). Esta es. Ahora Dreamweaver CS4es capaz de analizar código en Javascript y mostrar en un menú desplegable las funciones y propiedades de objetos que hayamos creado, a medida que codeamos. No sé que tan amigable sea con frameworks complejos como jQuery, pero es un avance sin dudas.

Subversion y control de versionesSubversion y control de versionesSubversion y control de versionesSubversion y control de versiones. Si eres programador, sabes que Subversion es uno de los

5

Dreamweaver criticado por tantos por no ser exacto, malacostumbrar a los diseñadores y otras cosas, ha mejorado. Mucho. Ahora no sólo es posible ver el CSS tan similar al navegador como es posible, sino también puede

de AJAX y estados de AJAX. Si cargas datos XML usando AJAX, si cambias el color o efectos de algun elemento con Javascript, si

r de Dreamweaver CS4 es la extensión Firebug de Firefox. Puedes, de manera inmediata, ver el código CSS, HTML y JS que afecta o está relacionado con elementos en la vista de diseño o Live View. Además de

nifica que si haces cambios con Javascript al contenido HTML de un sitio web, podrás ver esos cambios en el Code

Dreamweaver.

aun permite crear CSS sin necesidad de escribir código, por medio del inspector de propiedades. Pero ahora es capaz de dividirlo en varias hojas, entender la estructura HTML, los IDs y organizarlo de la mejor y más

ADOBE.. Tablas que se

Dreamweaver CS4 también un menú desplegable las funciones y

propiedades de objetos que hayamos creado, a medida que codeamos. No sé que tan amigable sea con frameworks complejos como jQuery, pero es un avance sin dudas.

es que Subversion es uno de los

dentro de Dreamweaver y automáticamente Photoshop mejorará la calidad y exportará una imagen del tamaño que colocaste. No tengo idea cómo funcionará esto por debajo, porque potencialmente puede causar muchos problemas, pero al mismo tiempo puede ahorrar mucho tiempo.

Exportación a Exportación a Exportación a Exportación a Adobe Adobe Adobe Adobe AIR en un clickAIR en un clickAIR en un clickAIR en un clickweb en HTML+CSS+Javascript a una aplicación de escritorio instalable y eigual que Flash

Cómo crear y abrir documentosCómo crear y abrir documentosCómo crear y abrir documentosCómo crear y abrir documentos Creación de documentos de Creación de documentos de Creación de documentos de Creación de documentos de Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web. Además de documentos HTML,es posible crear y abrir una gran variedad de documentos basados en texto, incluidos archivos ColdFusion Markupy hojas de estilos en cascada (CSS). También admite archivos de código fuente,como Visual Java. proporciona para crear un nuevo. Puede de los tipos de siguientes: • Un nuevo plantilla en • Un documento de los diseños de predefinidos que Dreamweaver, de 30 diseños de en CSS • Un documento basado en una de las plantillas existentesTambién puede definir las preferencias del documento. Por ejemplo, si suele trabajar con un tipo de documento,puede establecerlo como tipo de documento predeterminado para las páginas nuevas que cree. Puede definir fácilmente las propiedades del documento,documento, colores de fondo, así como otras propiedades de la página en la vista Diseño o en la vista Código. Tipos de archivos de DreamweaverTipos de archivos de DreamweaverTipos de archivos de DreamweaverTipos de archivos de DreamweaverDreamweaver le permite trabajar con una gran variedad de tipos de archivos. El tarchivo principal con el que va a trabajar es el archivo HTML. Los archivos HTML archivos en lenguaje de formato de hipertextoque es el responsable de mostrar la página Web a través del navegador. Los arHTML se pueden guardar con la extensión . html o .htm. De forma predeterminada, Dreamweaver guarda los archivos A continuación se incluyen algunos de los tipos de archivos más comunes que se utilizan en Dreamweaver:

y automáticamente Photoshop mejorará la calidad y exportará una imagen del tamaño que colocaste. No tengo idea cómo funcionará esto por debajo, porque potencialmente puede causar muchos problemas, pero al mismo tiempo puede

AIR en un clickAIR en un clickAIR en un clickAIR en un click. Igual que puede convertir en un click una aplicación web en HTML+CSS+Javascript a una aplicación de escritorio instalable y e

Cómo crear y abrir documentosCómo crear y abrir documentosCómo crear y abrir documentosCómo crear y abrir documentos????

Creación de documentos de Creación de documentos de Creación de documentos de Creación de documentos de DreamweaverDreamweaverDreamweaverDreamweaver Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web. Además de documentos HTML,es posible crear y abrir una gran variedad de documentos basados en texto, incluidos archivos ColdFusion Markup Language (CFML), ASP, Javay hojas de estilos en cascada (CSS). También admite archivos de código fuente,

Un documento basado en una de las plantillas existentes También puede definir las preferencias del documento. Por ejemplo, si suele trabajar con un tipo de documento,puede establecerlo como tipo de documento predeterminado para las

Puede definir fácilmente las propiedades del documento, como etiquetas meta, título del fondo, así como otras propiedades de la página en la vista Diseño o

Tipos de archivos de DreamweaverTipos de archivos de DreamweaverTipos de archivos de DreamweaverTipos de archivos de Dreamweaver Dreamweaver le permite trabajar con una gran variedad de tipos de archivos. El t

va a trabajar es el archivo HTML. Los archivos HTML formato de hipertexto— incluyen un lenguaje basado en etiquetas

que es el responsable de mostrar la página Web a través del navegador. Los arHTML se pueden guardar con la extensión . html o .htm. De forma predeterminada, Dreamweaver guarda los archivos con la extensión .html.

A continuación se incluyen algunos de los tipos de archivos más comunes que se utilizan en

6

y automáticamente Photoshop mejorará la calidad y exportará una imagen del tamaño que colocaste. No tengo idea cómo funcionará esto por debajo, porque potencialmente puede causar muchos problemas, pero al mismo tiempo puede

puede convertir en un click una aplicación web en HTML+CSS+Javascript a una aplicación de escritorio instalable y ejecutable. Todo

Dreamweaver ofrece un entorno flexible para trabajar con varios documentos Web. Además de documentos HTML,es posible crear y abrir una gran variedad de documentos

Language (CFML), ASP, JavaScript y hojas de estilos en cascada (CSS). También admite archivos de código fuente,

Basic, .NET, C# y Dreamweaver varias opciones documento crear cualquiera documento

documento o blanco basado en uno página vienen con incluidos más página basados

También puede definir las preferencias del documento. Por ejemplo, si suele trabajar con un tipo de documento,puede establecerlo como tipo de documento predeterminado para las

como etiquetas meta, título del fondo, así como otras propiedades de la página en la vista Diseño o

Dreamweaver le permite trabajar con una gran variedad de tipos de archivos. El tipo de va a trabajar es el archivo HTML. Los archivos HTML —o

un lenguaje basado en etiquetas que es el responsable de mostrar la página Web a través del navegador. Los archivos HTML se pueden guardar con la extensión . html o .htm. De forma predeterminada,

A continuación se incluyen algunos de los tipos de archivos más comunes que se utilizan en

CSS CSS CSS CSS Los archivos de Hojas de estilos en cascada tienen la extensión .css. Se utilizan paaplicar formato al contenido HTML y controlar la posición de los distintos elementos de la página. GIF GIF GIF GIF Archivos de Formato de intercambio de gráficos, que tienen la GIF es un formato gráfico popular en la Web para cómics, logotipos, gráficos con zonas transparentes y animaciones. Los archivos GIF JPEG JPEG JPEG JPEG Archivos de Grupo conjunto de expertos fotográficos (elque creó el formato) quetienen la extensión .jpg y suelen ser fotografías o imágenes de tonalidades intensas. El formato JPEG es el más indicadodigitalizadas, imágenes que utilizan texturas, imágcolor y, en general, cualquier imagen que requiera más de 256 colores.XML XML XML XML Archivos de Lenguaje de formato ampliable, que tienen la extensión .xml. Contienendatos en formato original al que se puede aplicar formato me(Lenguaje de hoja de estilos ampliable, Extensible Stylesheet XSL XSL XSL XSL Archivos de Lenguaje de hoja de estilos ampliable, que tienen la extensión .xsl o .xslt. También se utilizan para aplicar estilo a los datos XML que se van CFML CFML CFML CFML Archivos de Lenguaje de formato ColdFusion, que tienen la extensión .cfm. Separa procesar páginas dinámicas.PHP PHP PHP PHP Los archivos de Preprocesador de hipertexto tienen la extensión .php y s

procesar páginas.

Creación de una página en blancoCreación de una página en blancoCreación de una página en blancoCreación de una página en blanco Puede crear una página que contenga una diseño CSS prediseñado o bien crear una completamente en blanco y realizar 1 1 1 1 Seleccione Archivo > Nuevo. 2 2 2 2 En la categoría Página en blanco del cuadro de tipo de página que desea crear en la columna Tipo de página. Por ejemplo, seleccione HTML para crear una página HTML, ColdFusion para3 3 3 3 Si desea que su nueva página contenga un diseñprediseñado en la columna Diseño;selección, aparece una vista previa y una descripción del derecho del cuadro de diálogo.Los diseños CSS predefinidos ofrecen los siguientes tipos de columnas:Fija Fija Fija Fija El ancho de columna se especifica en píxeles. La columna no cambia de tamaño en función del tamaño del navegador o de la configuración del texto del visitante del sitio. Elástica Elástica Elástica Elástica El ancho de columna se especifica en una unidad de medida (ems) relacionada con el tamaño del texto. El diseño se adapta si el visitante del sitio cambia la configuración del texto, pero no en función del tamaño de la ventana del navegador.

archivos de Hojas de estilos en cascada tienen la extensión .css. Se utilizan paHTML y controlar la posición de los distintos elementos de la

Archivos de Formato de intercambio de gráficos, que tienen la extensión .gigráfico popular en la Web para cómics, logotipos, gráficos con zonas

y animaciones. Los archivos GIF contienen un máximo de 256 colores.Archivos de Grupo conjunto de expertos fotográficos (el nombre de la organización

que creó el formato) quetienen la extensión .jpg y suelen ser fotografías o imágenes de tonalidades intensas. El formato JPEG es el más indicado para las fotografías digitales o digitalizadas, imágenes que utilizan texturas, imágenes con transiciones de gradiente decolor y, en general, cualquier imagen que requiera más de 256 colores.

Archivos de Lenguaje de formato ampliable, que tienen la extensión .xml. Contienenal que se puede aplicar formato mediante el lenguaje XSL mpliable, Extensible Stylesheet Language).

Archivos de Lenguaje de hoja de estilos ampliable, que tienen la extensión .xsl o .xslt.

aplicar estilo a los datos XML que se van a mostrar en una página Web. Archivos de Lenguaje de formato ColdFusion, que tienen la extensión .cfm. Se

dinámicas. Los archivos de Preprocesador de hipertexto tienen la extensión .php y s

Creación de una página en blancoCreación de una página en blancoCreación de una página en blancoCreación de una página en blanco…………

Puede crear una página que contenga una diseño CSS prediseñado o bien crear una pletamente en blanco y realizar su propio diseño.

En la categoría Página en blanco del cuadro de diálogo Nuevo documento, selecci

crear en la columna Tipo de página. Por ejemplo, seleccione na página HTML, ColdFusion paracrear una página ColdFusion, etc.

Si desea que su nueva página contenga un diseño CSS, seleccione un diseño CSS ediseñado en la columna Diseño;de lo contrario, seleccione Ninguno. En función de sus

ta previa y una descripción del diseño seleccionado en el lado derecho del cuadro de diálogo.

redefinidos ofrecen los siguientes tipos de columnas:

El ancho de columna se especifica en píxeles. La columna no cambia de amaño en función del tamaño del navegador o de la configuración del

a se especifica en una unidad de medida

ada con el tamaño del diseño se adapta si el visitante

del sitio cambia la configuración del nción del tamaño

7

archivos de Hojas de estilos en cascada tienen la extensión .css. Se utilizan para HTML y controlar la posición de los distintos elementos de la

extensión .gif. El formato gráfico popular en la Web para cómics, logotipos, gráficos con zonas

contienen un máximo de 256 colores. nombre de la organización

que creó el formato) quetienen la extensión .jpg y suelen ser fotografías o imágenes de para las fotografías digitales o

enes con transiciones de gradiente de

Archivos de Lenguaje de formato ampliable, que tienen la extensión .xml. Contienen diante el lenguaje XSL Language).

Archivos de Lenguaje de hoja de estilos ampliable, que tienen la extensión .xsl o .xslt.

Archivos de Lenguaje de formato ColdFusion, que tienen la extensión .cfm. Se utilizan

Los archivos de Preprocesador de hipertexto tienen la extensión .php y se utilizan para

Puede crear una página que contenga una diseño CSS prediseñado o bien crear una

diálogo Nuevo documento, seleccione el crear en la columna Tipo de página. Por ejemplo, seleccione

crear una página ColdFusion, etc. CSS, seleccione un diseño CSS

de lo contrario, seleccione Ninguno. En función de sus diseño seleccionado en el lado

Flotante Flotante Flotante Flotante El ancho de columna se evisitante. El diseño se adapta si el visitante del sitio amplia o reduce el navegador, pero no en función de la configuración del texto.Híbrida Híbrida Híbrida Híbrida Las columnas son una combinación de las tres opciones anel diseño de dos columnas híbridas, la barra lateral derecha tiene una columna principal flotante que se ajusta al tamaño del navegador y una ajusta al tamaño de la configuración del texto del 4 4 4 4 Seleccione un tipo de documento del menú emergente DocType. En la mayoría casos, puede utilizar la selección predeterminada XHTML 1.0 de transición.Si selecciona una de las definiciones de tipo de documento XHTML en el menú D(DTD), las páginas nuevas serán compatibles con XHTML. Por ejemplo, puede hacer que un documento HTML sea compatible con XHTML XHTML 1.0 estricto del menú. El lenguaje XHTML (Lenguaje de formatode hipertexto ampliable, Extensible Hypertext Markup Language) es un replantlenguaje HTML como aplicación XML. En general, la utilización de XHTML permite aprovechar las ventajas del lenguaje XML, anterior y futura de los documentos Web.5 5 5 5 Si ha seleccionado un diseño CSS en la columna Diseño, seleccione una ubicación pcódigo CSS del diseño en el menú emergente Diseño CSS en.Añadir a Head Añadir a Head Añadir a Head Añadir a Head Añade código CSS para el diseño al encabezado de la pácrear. Crear nuevo archivo Crear nuevo archivo Crear nuevo archivo Crear nuevo archivo Añade código CSS para el diseño a un nuevo archivo CSS externo nueva hoja de estilos a la página que se va a crear.Vincular a archivo existente Vincular a archivo existente Vincular a archivo existente Vincular a archivo existente Permite especificar un archivo CSS existente que ya contreglas CSS necesarias para el diseño. Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar archivo CSS y opción es especialmente útil cuando desea utilizar el mismo diseñoreglas CSS se encuentran en un único archivo) en varios documentos.6 6 6 6 (Opcional) También puede adjuntar hojas de estilos CSS a la nueva página (independientes del diseño CSS) al estilos situado encima del panel Adjuntar archivo CSS 7 7 7 7 Haga clic en Preferencias si desea establecer las preferencias predeterminadasdocumento, como el tipo de documento, la codificación y la extensión del archivo.8 8 8 8 Haga clic en Obtener más contenido si desea abrir Dreamweaver Exchange y demás contenido de diseño de páginas.9 9 9 9 Haga clic en el botón Crear. 10 10 10 10 Guarde el nuevo documento (Archivo > Guardar). 11 11 11 11 En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la que desea guardar el archivo.

El ancho de columna se especifica como porcentaje del tamaño del navegaadapta si el visitante del sitio amplia o reduce el navegador, pero no

en función de la configuración del texto. Las columnas son una combinación de las tres opciones anteriores. Por ejempl

híbridas, la barra lateral derecha tiene una columna principal a al tamaño del navegador y una columna elástica a la derecha que se

ajusta al tamaño de la configuración del texto del visitante del sitio. Seleccione un tipo de documento del menú emergente DocType. En la mayoría

selección predeterminada XHTML 1.0 de transición.Si selecciona una de las definiciones de tipo de documento XHTML en el menú D

serán compatibles con XHTML. Por ejemplo, puede hacer que un compatible con XHTML seleccionando XHTML 1.0 de transición o

XHTML 1.0 estricto del menú. El lenguaje XHTML (Lenguaje de formatohipertexto ampliable, Extensible Hypertext Markup Language) es un replant

aplicación XML. En general, la utilización de XHTML permite las ventajas del lenguaje XML, garantizando al mismo tiempo la compatibilidad

nterior y futura de los documentos Web. Si ha seleccionado un diseño CSS en la columna Diseño, seleccione una ubicación p

el menú emergente Diseño CSS en. Añade código CSS para el diseño al encabezado de la pá

Añade código CSS para el diseño a un nuevo archivo CSS externo página que se va a crear. Permite especificar un archivo CSS existente que ya contel diseño. Para ello, haga clic en el icono Adjuntar hoja de estilos

el panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS. Esta opción es especialmente útil cuando desea utilizar el mismo diseño CSS (cuyasreglas CSS se encuentran en un único archivo) en varios documentos. (Opcional) También puede adjuntar hojas de estilos CSS a la nueva página dependientes del diseño CSS) al crearla. Para ello, haga clic en el icono Adjuntar hoja de

del panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS.Haga clic en Preferencias si desea establecer las preferencias predeterminadas

documento, la codificación y la extensión del archivo.Haga clic en Obtener más contenido si desea abrir Dreamweaver Exchange y de

de páginas.

Guarde el nuevo documento (Archivo >

En el cuadro de diálogo que aparece a aya hasta la carpeta en la que

8

specifica como porcentaje del tamaño del navegador del adapta si el visitante del sitio amplia o reduce el navegador, pero no

teriores. Por ejemplo, en híbridas, la barra lateral derecha tiene una columna principal

columna elástica a la derecha que se

Seleccione un tipo de documento del menú emergente DocType. En la mayoría de los selección predeterminada XHTML 1.0 de transición.

Si selecciona una de las definiciones de tipo de documento XHTML en el menú DocType serán compatibles con XHTML. Por ejemplo, puede hacer que un

seleccionando XHTML 1.0 de transición o XHTML 1.0 estricto del menú. El lenguaje XHTML (Lenguaje de formato hipertexto ampliable, Extensible Hypertext Markup Language) es un replanteamiento del

aplicación XML. En general, la utilización de XHTML permite garantizando al mismo tiempo la compatibilidad

Si ha seleccionado un diseño CSS en la columna Diseño, seleccione una ubicación para el

Añade código CSS para el diseño al encabezado de la página que se va a

Añade código CSS para el diseño a un nuevo archivo CSS externo y la

Permite especificar un archivo CSS existente que ya contiene el diseño. Para ello, haga clic en el icono Adjuntar hoja de estilos

seleccione una hoja de estilos CSS. Esta CSS (cuyas

(Opcional) También puede adjuntar hojas de estilos CSS a la nueva página crearla. Para ello, haga clic en el icono Adjuntar hoja de

y seleccione una hoja de estilos CSS. Haga clic en Preferencias si desea establecer las preferencias predeterminadas del

documento, la codificación y la extensión del archivo. Haga clic en Obtener más contenido si desea abrir Dreamweaver Exchange y descargar

Es recomendable guardar el archivo en un sitio de Dreamweaver.12 12 12 12 En el cuadro Nombre de archivo, introduzca un nombre para el archivo.Evite utilizar espacios y caracteres especiales en los nombresAsimismo, no comience los nombres de los archivos con números. En concreto, no utilice caracteres é, ç o ¥) ni puntuación puntos, barras puntos) en los archivos que un servidor servidores caracteres lo que provoca vínculos archivos.

Introducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajo. Ventana de bienvenida Ventana de bienvenida Ventana de bienvenida Ventana de bienvenida Le permite nuevo. Desde la pantalla de bienvenida, también puede profundizar sus conocimientos sobre Dreamweaver mediante una visita guiada o un Barra de la aplicación Barra de la aplicación Barra de la aplicación Barra de la aplicación A lo largo de su parte supeun conmutador de espacios de trabajo, menús (sólo Windows) y otros controles de aplicación. Barra de herramientas Documento Barra de herramientas Documento Barra de herramientas Documento Barra de herramientas Documento diferentes vistas de la ventana diversas opciones de visualización y algunas operaciones una vista previa en un navegador.Barra de herramientas Estándar Barra de herramientas Estándar Barra de herramientas Estándar Barra de herramientas Estándar predeterminado.) Contiene botones pArchivo y Edición: Nuevo, Abrir, Examinar en Brigde, Guardar,Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra de herramientas EstándarBarra de herramientas Codificación Barra de herramientas Codificación Barra de herramientas Codificación Barra de herramientas Codificación que le permiten realizar numerosas operaciones de codificación estándar.Barra de herramientas Representación deBarra de herramientas Representación deBarra de herramientas Representación deBarra de herramientas Representación deContiene botones que lepermiten ver cómo aparecería medios si utilizase hojas de estilos dependientes de los que le permite activar o desactivar eVentana de documento Ventana de documento Ventana de documento Ventana de documento Muestra el documento actual mientras lo está creando y editando.Inspector de propiedades Inspector de propiedades Inspector de propiedades Inspector de propiedades Le permite ver y cambiar diversas propiedades del objeto o seleccionado. Cada objeto tiene proampliado de forma predeterminada en el diseño del

Es recomendable guardar el archivo en un sitio de Dreamweaver. En el cuadro Nombre de archivo, introduzca un nombre para el archivo.

Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpnombres de los archivos con números. En concreto, no utilice

Introducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajo

Le permite abrir un documento reciente o crear un documebienvenida, también puede profundizar sus conocimientos

mediante una visita guiada o un tutorial del producto.A lo largo de su parte superior, la ventana de la aplicación contiene

de trabajo, menús (sólo Windows) y otros controles de

Barra de herramientas Documento Barra de herramientas Documento Barra de herramientas Documento 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),

alización y algunas operaciones comunes como la obtención de una vista previa en un navegador. Barra de herramientas Estándar Barra de herramientas Estándar Barra de herramientas Estándar Barra de herramientas Estándar (No se muestra en el diseño de espacio de trabajo

inado.) Contiene botones para las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Examinar en Brigde, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la

Estándar, seleccione Ver > Barras de herramientas > Estándar.Barra de herramientas Codificación Barra de herramientas Codificación Barra de herramientas Codificación Barra de herramientas Codificación (Sólo se muestra en la vista Código.) Contiene b

numerosas operaciones de codificación estándar.Barra de herramientas Representación deBarra de herramientas Representación deBarra de herramientas Representación deBarra de herramientas Representación de estilos estilos estilos estilos (Oculta de manera predeterm

permiten ver cómo aparecería el diseño en distintos tipos de de estilos dependientes de los medios. También contiene un botón

que le permite activar o desactivar estilos de hojas de estilos en cascada (CSS).Muestra el documento actual mientras lo está creando y editando.Le permite ver y cambiar diversas propiedades del objeto o tiene propiedades distintas. El inspector de propiedades no está

predeterminada en el diseño del espacio de trabajo del codificador.

9

En el cuadro Nombre de archivo, introduzca un nombre para el archivo. de archivos y carpetas.

nombres de los archivos con números. En concreto, no utilice especiales (como signos de (como dos inclinadas o nombres de desee colocar en

remoto; muchos cambian estos durante la carga, que se rompan los existentes con los

Introducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajoIntroducción a los elementos del espacio de trabajo

abrir un documento reciente o crear un documento bienvenida, también puede profundizar sus conocimientos

tutorial del producto. rior, la ventana de la aplicación contiene

de trabajo, menús (sólo Windows) y otros controles de

Contiene botones que proporcionan opciones para nto (como la vista Diseño y la vista Código),

comunes como la obtención de

(No se muestra en el diseño de espacio de trabajo ara las operaciones más habituales de los menús

Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la , seleccione Ver > Barras de herramientas > Estándar.

(Sólo se muestra en la vista Código.) Contiene botones numerosas operaciones de codificación estándar.

(Oculta de manera predeterminada.) el diseño en distintos tipos de medios. También contiene un botón

stilos de hojas de estilos en cascada (CSS). Muestra el documento actual mientras lo está creando y editando. Le permite ver y cambiar diversas propiedades del objeto o texto

piedades distintas. El inspector de propiedades no está espacio de trabajo del codificador.

Selector de etiquetas Selector de etiquetas Selector de etiquetas Selector de etiquetas Situado en la barra de estado de la parte inferior de la vdocumento. Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la Paneles Paneles Paneles Paneles Le ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles panel Insertar, el panel Estilos CSS y el panel Archivos. Para ampliar un panel, haga doble clic en su ficha. Panel Insertar Panel Insertar Panel Insertar Panel Insertar Contiene botones para la inserción de diversos tipos de objeto, como imágenes, tablas y elementos multimedia, en un documento. Cada objeto espermite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botón Tabla delutilizando el menú Insertar en lugar dPanel Archivos Panel Archivos Panel Archivos Panel Archivos Le permite administrar los archivos y las carpetas, tanto si forman pun sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos también proporciona acceso a todos los archivos del Explorador de Windows (Windows) o en el Finder (Macintosh).

Introducción a la ventana de documentoIntroducción a la ventana de documentoIntroducción a la ventana de documentoIntroducción a la ventana de documento La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes: Vista Diseño Vista Diseño Vista Diseño Vista Diseño Un entorno para el diseño visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la queVista Código Vista Código Vista Código Vista Código Un entorno de codificación manual para escribir y editar código HTML, JavaScript, código de lenguaje Language (CFML), y otros tipos de código.Vista de código dividida Vista de código dividida Vista de código dividida Vista de código dividida Versión dividida de la vista Código queel trabajo realizado en diferentes secciones del documento a la vez.Vistas Código y Diseño Vistas Código y Diseño Vistas Código y Diseño Vistas Código y Diseño Le permite ver las dos vistas, Código y Diseño, para el mismo documento en una sola ventana.Vista en vivo Vista en vivo Vista en vivo Vista en vivo La Vista en vivo, que es simimás realista de la apariencia que tendrá el documento en un navegador y le permite interactuar con el documento de la misma forma que lo haríaen un navegador. La Vista en vivo no es editabmodificaciones en la vista Código yla Vista en vivo para ver los cambios.Vista Código en vivo Vista Código en vivo Vista Código en vivo Vista Código en vivo Sólo está disponible al visualizar un documento en la Vista en vivo. La vista Código en vivo muestra el código que un navegador utiliza para ejecutar la página y cambia dinámicamente conforme se interactúa con la página en la Vista en vivo. La vista Código en vivo no es editable.una ventana de documento está maximizada (configuración predeterminada), aparecen fichas en la parte superior de la misma con los nombres de archivo de todos los documentos abiertos. Dreamweaver muestra un

Situado en la barra de estado de la parte inferior de la vjerarquía de etiquetas que rodea a la selección actual. Haga clic en a jerarquía para seleccionar la etiqueta y todo su contenido.

Le ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles Estilos CSS y el panel Archivos. Para ampliar un panel, haga doble

Contiene botones para la inserción de diversos tipos de objeto, como

multimedia, en un documento. Cada objeto es un fragmento de código HTML queatributos al insertarlo. Por ejemplo, puede insertar una tabla

haciendo clic en el botón Tabla del panel Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar del panel Insertar.

Le permite administrar los archivos y las carpetas, tanto si forman pcomo si se encuentran en un servidor remoto. El panel Archivos

acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows) o en el Finder (Macintosh).

Introducción a la ventana de documentoIntroducción a la ventana de documentoIntroducción a la ventana de documentoIntroducción a la ventana de documento

La ventana de documento muestra el documento actual. Puede elegir entre una de las

para el diseño visual de la página, la edición visual y el desarrollo esta vista, Dreamweaver muestra una representación visual del

documento completamente editable, similar a la que aparecería en un navegador.torno de codificación manual para escribir y editar código HTML,

de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código.

Versión dividida de la vista Código que le permite desplazarse por diferentes secciones del documento a la vez. Le permite ver las dos vistas, Código y Diseño, para el mismo

documento en una sola ventana. La Vista en vivo, que es similar a la vista Diseño, muestra una representación

que tendrá el documento en un navegador y le permite interactuar con el documento de la misma forma que lo haría en un navegador. La Vista en vivo no es editable. No obstante, puede realizar modificaciones en la vista Código y actualizar la Vista en vivo para ver los cambios.

Sólo está disponible al visualizar un documento en la Vista en vivo.

muestra el código que utiliza para ejecutar la página y

cambia dinámicamente conforme se con la página en la Vista en vivo. La

vista Código en vivo no es editable. Cuando una ventana de documento está maximizada (configuración predeterminada), aparecen

superior de la misma con los nombres de archivo de todos los documentos abiertos. Dreamweaver muestra un

10

Situado en la barra de estado de la parte inferior de la ventana de jerarquía de etiquetas que rodea a la selección actual. Haga clic en

etiqueta y todo su contenido. Le ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son el

Estilos CSS y el panel Archivos. Para ampliar un panel, haga doble

Contiene botones para la inserción de diversos tipos de objeto, como

un fragmento de código HTML que le atributos al insertarlo. Por ejemplo, puede insertar una tabla

prefiere, puede insertar objetos

Le permite administrar los archivos y las carpetas, tanto si forman parte de como si se encuentran en un servidor remoto. El panel Archivos

local, como ocurre en el

La ventana de documento muestra el documento actual. Puede elegir entre una de las

para el diseño visual de la página, la edición visual y el desarrollo esta vista, Dreamweaver muestra una representación visual del

aparecería en un navegador. torno de codificación manual para escribir y editar código HTML,

de servidor, como por ejemplo PHP o ColdFusion Markup

le permite desplazarse por

Le permite ver las dos vistas, Código y Diseño, para el mismo

lar a la vista Diseño, muestra una representación que tendrá el documento en un navegador y le permite

puede realizar

asterisco después del nombre del archivo si ha realizado cambios que no ha guardado todavía.

Introducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas Documento La barra de herramientas Documento contiene rápidamente entre diferentes vistastambién algunos comandos y opciones relativos a la visualizacióntransferencia entre los sitios local y remotoaparecen las siguientes opciones:Mostrar vista de código Mostrar vista de código Mostrar vista de código Mostrar vista de código Sólo muestra la vista Código en la ventana de documento.Mostrar vistas de código y diseño Mostrar vistas de código y diseño Mostrar vistas de código y diseño Mostrar vistas de código y diseño Diseño. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver.Mostrar vista de diseño Mostrar vista de diseño Mostrar vista de diseño Mostrar vista de diseño Sólo muestra la vista Diseño en la ventana de documento.Nota: Nota: Nota: Nota: Si trabaja con XML, JavaScript, CSS u otros tipos de archivos basados en código, no podrá ver los archivos en la vista Diseño y los Dividir aparecerán Vista en vivo Vista en vivo Vista en vivo Vista en vivo Muestra documento no basada en navegador. Vista Vista Vista Vista Código en vivo Código en vivo Código en vivo Código en vivo utilizado por el ejecutar la página. Título del documento Título del documento Título del documento Título del documento título para el aparecerá en la barra Si el documento ya aparecerá en dicho Administración de archivos Administración de archivos Administración de archivos Administración de archivos Muestra el menVista previa/Depurar en explorador Vista previa/Depurar en explorador Vista previa/Depurar en explorador Vista previa/Depurar en explorador documento en un navegador. Actualizar vista de diseño Actualizar vista de diseño Actualizar vista de diseño Actualizar vista de diseño Actualiza la vista Diseño tras realiLos cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones,en este botón. Nota: Nota: Nota: Nota: La actualización también actualiza funciones de código que dependen del DOM (modelo de objeto de documento),como la capacidad para seleccionar las etiquetas inicial y final de un bloque de código.Ver opciones Ver opciones Ver opciones Ver opciones Permite definir las opciones de las vistas Código y Diseño y establecer qué vista desea que aparezca en la corresponden a la vista actual: la vista Diseño, la vista Código oAyudas visAyudas visAyudas visAyudas visuales uales uales uales Permite utilizar distintas ayudas visuales para el diseño de las páginas.Validar formato Validar formato Validar formato Validar formato Permite validar el documento actual o una etiqueta seleccionada.Comprobar compatibilidad con navegadores Comprobar compatibilidad con navegadores Comprobar compatibilidad con navegadores Comprobar compatibilidad con navegadores con diferentes navegadores.

asterisco después del nombre del archivo si ha realizado cambios que no ha guardado

Introducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas Documento

a barra de herramientas Documento contiene botones que le permiten cambiar rápidamente entre diferentes vistas del documento. La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su

cia entre los sitios local y remoto En la barra de herramientas Documento, aparecen las siguientes opciones:

Sólo muestra la vista Código en la ventana de documento.Mostrar vistas de código y diseño Mostrar vistas de código y diseño Mostrar vistas de código y diseño Mostrar vistas de código y diseño Divide la ventana de documento entre las vistas Código y

seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver.

Sólo muestra la vista Diseño en la ventana de documento.aScript, CSS u otros tipos de archivos basados en código, no

botones Diseño y atenuados.una vista del editable, interactiva y

Muestra el código en sí navegador para

Permite introducir un documento, que de título deltiene título, éste campo.

Muestra el menú emergente Administración de archivos.Vista previa/Depurar en explorador Vista previa/Depurar en explorador Vista previa/Depurar en explorador Vista previa/Depurar en explorador Le permite obtener una vista previa o depurar el

Seleccione un navegador en el menú emergente.Actualiza la vista Diseño tras realizar cambios en la vista Código. la vista Código no aparecerán de forma automática en la vista

Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic

La actualización también actualiza funciones de código que dependen del DOM (modelo de objeto de documento), como la capacidad para seleccionar las etiquetas inicial y final de un bloque de código.

Permite definir las opciones de las vistas Código y Diseño y establecer qué parte superior de la ventana. Las opciones del menú

corresponden a la vista actual: la vista Diseño, la vista Código o ambas. Permite utilizar distintas ayudas visuales para el diseño de las páginas.Permite validar el documento actual o una etiqueta seleccionada.

Comprobar compatibilidad con navegadores Comprobar compatibilidad con navegadores Comprobar compatibilidad con navegadores Comprobar compatibilidad con navegadores Le permite comprobar si el CSS es compatible

11

asterisco después del nombre del archivo si ha realizado cambios que no ha guardado

Introducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas DocumentoIntroducción a la barra de herramientas Documento

botones que le permiten cambiar del documento. La barra de herramientas contiene

del documento y a su En la barra de herramientas Documento,

Sólo muestra la vista Código en la ventana de documento. entre las vistas Código y

seleccione esta vista combinada, se encontrará disponible la opción Vista

Sólo muestra la vista Diseño en la ventana de documento. aScript, CSS u otros tipos de archivos basados en código, no

botones Diseño y atenuados. una vista del editable, interactiva y

Muestra el código en sí navegador para

Permite introducir un documento, que de título del navegador. tiene título, éste campo.

ú emergente Administración de archivos. Le permite obtener una vista previa o depurar el

emergente. zar cambios en la vista Código.

la vista Código no aparecerán de forma automática en la vista ar el archivo o hacer clic

La actualización también actualiza funciones de código que dependen del DOM

como la capacidad para seleccionar las etiquetas inicial y final de un bloque de código. Permite definir las opciones de las vistas Código y Diseño y establecer qué

parte superior de la ventana. Las opciones del menú

Permite utilizar distintas ayudas visuales para el diseño de las páginas. Permite validar el documento actual o una etiqueta seleccionada.

Le permite comprobar si el CSS es compatible

Introducción a la barra de estadoIntroducción a la barra de estadoIntroducción a la barra de estadoIntroducción a la barra de estado La barra de estado, situada en la parte inferior de la veinformación adicional sobre el documento que está creando.Espacio de trabajoEspacio de trabajoEspacio de trabajoEspacio de trabajo A. A. A. A. Selector de etiquetas B. B. B. B. Herramienta Seleccionar Zoom E. E. E. E. Establecer nivel de aumento emergente Tamaño de ventana H. H. H. H. Indicador de codificación Selector de etiquetas Selector de etiquetas Selector de etiquetas Selector de etiquetas Muestra la jerarquíaclic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga clic en <body> para seleccionar todo el cuerpoatributos class o ID para una etiqueta en el selector de etiquetas, haga clic con el botónde derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y elijaHerramienta Seleccionar Herramienta Seleccionar Herramienta Seleccionar Herramienta Seleccionar Activa y dHerramienta Mano Herramienta Mano Herramienta Mano Herramienta Mano Permite hacer clic en el documento y arrastrarlo por la ventana de documento. Herramienta Zoom y menú emergente Establecer nivel de aumento Herramienta Zoom y menú emergente Establecer nivel de aumento Herramienta Zoom y menú emergente Establecer nivel de aumento Herramienta Zoom y menú emergente Establecer nivel de aumento nivel de aumento para el documento.Menú emergMenú emergMenú emergMenú emergente Tamaño de ventana ente Tamaño de ventana ente Tamaño de ventana ente Tamaño de ventana el tamaño de la ventana de documento a dimensiones predeterminadas o personalizadas.Tamaño del documento y tiempo de descarga Tamaño del documento y tiempo de descarga Tamaño del documento y tiempo de descarga Tamaño del documento y tiempo de descarga documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia.Indicador de codificación Indicador de codificación Indicador de codificación Indicador de codificación Muestra la codificación del texto del documento actual.Introducción a la barra de herramientas CodificaciónIntroducción a la barra de herramientas CodificaciónIntroducción a la barra de herramientas CodificaciónIntroducción a la barra de herramientas CodificaciónLa barra de herramientas Codificación contiene botones que le permiten realizar numerosas operaciones de codificación estándar, como ampliar y contraer las selecciones de código, resaltar código no válido, insertar o eliminarfragmentos de código utilizados recientemente. La barra deherramientas Codificación aparece verticalmente en la parte izquierda de la ventana de documento y sólo está visible cuando se muestra la vista Código.

Introducción a la barra de Introducción a la barra de Introducción a la barra de Introducción a la barra de de estilosde estilosde estilosde estilos La barra de herramientas Representación de estilos (oculta de manera predeterminada) contiene botones que le permiten ver cómo aparecería el diseño en distintos tipos de medios si utilizase hojas de estilos dependientmedios. También contiene un botón con el que es posible activar o desactivar los estilos CSS. Para mostrar la barra de herramientas, seleccione Ver > Barras de herramientas > Representación de estilos.

Información general sobre el Información general sobre el Información general sobre el Información general sobre el

panel Insertarpanel Insertarpanel Insertarpanel Insertar El panel Insertar contiene botones para crear e insertar objetos como tablas, imágenes y vínculos. Los botones están ordenados en

Introducción a la barra de estadoIntroducción a la barra de estadoIntroducción a la barra de estadoIntroducción a la barra de estado

La barra de estado, situada en la parte inferior de la ventana de documento, proporciona el documento que está creando.

Herramienta Seleccionar C. C. C. C. Herramienta Mano Establecer nivel de aumento F. F. F. F. Menú

emergente Tamaño de ventana G. G. G. G. Tamaño del documento y tiempo de descarga estimado

Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga de la jerarquía para seleccionar la etiqueta y todo su contenido.

para seleccionar todo el cuerpo del documento. Para definir los una etiqueta en el selector de etiquetas, haga clic con el botón

de derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase o una ID del menú contextual.

Activa y desactiva la herramienta Mano. Permite hacer clic en el documento y arrastrarlo por la ventana de

Herramienta Zoom y menú emergente Establecer nivel de aumento Herramienta Zoom y menú emergente Establecer nivel de aumento Herramienta Zoom y menú emergente Establecer nivel de aumento Herramienta Zoom y menú emergente Establecer nivel de aumento Permiten establecer un documento.

ente Tamaño de ventana ente Tamaño de ventana ente Tamaño de ventana ente Tamaño de ventana (No disponible en la vista Código.) Permite cambiar documento a dimensiones predeterminadas o personalizadas.

Tamaño del documento y tiempo de descarga Tamaño del documento y tiempo de descarga Tamaño del documento y tiempo de descarga Tamaño del documento y tiempo de descarga Muestra la estimación del tamaño del descarga de la página, incluidos todos los archivos

dependientes, como imágenes y otros archivos multimedia. Muestra la codificación del texto del documento actual.

Introducción a la barra de herramientas CodificaciónIntroducción a la barra de herramientas CodificaciónIntroducción a la barra de herramientas CodificaciónIntroducción a la barra de herramientas Codificación barra de herramientas Codificación contiene botones que le permiten realizar numerosas

codificación estándar, como ampliar y contraer las selecciones de código, resaltar código no válido, insertar o eliminar comentarios, aplicar sangría al fragmentos de código utilizados recientemente. La barra de herramientas Codificación aparece verticalmente en la parte izquierda de la ventana de

cuando se muestra la vista Código.

Introducción a la barra de Introducción a la barra de Introducción a la barra de Introducción a la barra de herramientas Representación herramientas Representación herramientas Representación herramientas Representación

La barra de herramientas Representación de estilos (oculta de manera predeterminada) permiten ver cómo aparecería el diseño en distintos tipos de

medios si utilizase hojas de estilos dependientes de los medios. También contiene un botón con el que es posible activar o desactivar los estilos

herramientas, seleccione Ver > Barras de herramientas >

Información general sobre el Información general sobre el Información general sobre el Información general sobre el

El panel Insertar contiene botones para crear e insertar objetos como tablas, imágenes y

ordenados en

12

ntana de documento, proporciona

Herramienta Mano D. D. D. D. Herramienta

Tamaño del documento y tiempo de descarga estimado

de etiquetas que rodea a la selección actual. Haga de la jerarquía para seleccionar la etiqueta y todo su contenido.

del documento. Para definir los una etiqueta en el selector de etiquetas, haga clic con el botón

de derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic una clase o una ID del menú contextual.

Permite hacer clic en el documento y arrastrarlo por la ventana de

Permiten establecer un

(No disponible en la vista Código.) Permite cambiar documento a dimensiones predeterminadas o personalizadas.

Muestra la estimación del tamaño del descarga de la página, incluidos todos los archivos

Muestra la codificación del texto del documento actual.

barra de herramientas Codificación contiene botones que le permiten realizar numerosas codificación estándar, como ampliar y contraer las selecciones de código,

comentarios, aplicar sangría al código e insertar

herramientas Codificación aparece verticalmente en la parte izquierda de la ventana de

herramientas Representación herramientas Representación herramientas Representación herramientas Representación

La barra de herramientas Representación de estilos (oculta de manera predeterminada) permiten ver cómo aparecería el diseño en distintos tipos de

medios. También contiene un botón con el que es posible activar o desactivar los estilos herramientas, seleccione Ver > Barras de herramientas >

diferentes categorías, entre las que puede cambiar seleccionando la categoría deseada del menú desplegable Categoría. Si el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también otras categorías.Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de imagenen el menú emergente del botón Imagen, la siguiente vez que haga clic en el botón imarcador de posición de imagen. Siempre que seleccione una nueva opción del menú emergente cambiará la acción El panel Insertar está organizado en las categorías siguientes:Categoría Común Categoría Común Categoría Común Categoría Común Permite crear e insertar los objetos que se utilizan con más freccomo las imágenes y las tablas.Categoría Diseño Categoría Diseño Categoría Diseño Categoría Diseño Permite insertar tablas, elementos de tabla, etiquetas widgets de Spry. También puedepredeterminado) y Tablas expandidas.Categoría FormCategoría FormCategoría FormCategoría Formularios ularios ularios ularios Contiene botones que permiten crear formularios e insertar elementos de widgets de Categoría Datos Categoría Datos Categoría Datos Categoría Datos de datos de Spry dinámicos, como

repetidas y inserción y Categoría Spry Categoría Spry Categoría Spry Categoría Spry crear páginas de de datos y Categoría Categoría Categoría Categoría Contiene de páginas de incluidos editables, administración Categoría Texto Categoría Texto Categoría Texto Categoría Texto etiquetas de formato de texto y listas, como Categoría Favoritos Categoría Favoritos Categoría Favoritos Categoría Favoritos Permite agrupar y organizar con más frecuencia en un lugar común.Categorías de código de servidor Categorías de código de servidor Categorías de código de servidor Categorías de código de servidor lenguaje de servidordeterminado, como ASP, CFML Basic, CFML Flow, CFML Advanced, y PHP. Cada una de estas categorías contieneinsertarse en la vista Código. A diferencia de otros paneles de Dreamweaver, el panel Insertar se puede arrastrar fuera de su posición deacoplamiento predeterminada y colocarsde la ventana de documento.Al hacerlo, cambia de panel a barra de herramientas (aunque no puede ocultarla y mostrarla como el resto de barras

diferentes categorías, entre las que puede cambiar seleccionando la categoría deseada del

ocumento actual contiene código de servidor, como los aparecen también otras categorías.

Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de opción se convierte en la acción predeterminada del botón. Por

ejemplo, si selecciona Marcador de posición de imagenen el menú emergente del botón vez que haga clic en el botón imagen, Dreamweaver insertará un

magen. Siempre que seleccione una nueva opción del menú predeterminada del botón.

El panel Insertar está organizado en las categorías siguientes: Permite crear e insertar los objetos que se utilizan con más frec

tablas. Permite insertar tablas, elementos de tabla, etiquetas div

widgets de Spry. También puede elegir dos vistas para tablas: Estándar (valor predeterminado) y Tablas expandidas.

Contiene botones que permiten crear formularios e insertar formulario,incluidos validación de Spry.Permite insertar objetos y otros elementos juegos de registros,regiones grabar formularios de actualización.Contiene botones para Spry, incluidos objetos widgets de Spry.InContext Editing InContext Editing InContext Editing InContext Editing botones para la creación InContext EditinbotonesRegiones repetidas y la de clases CSS.Permite insertar diversas

etiquetas de formato de texto y listas, como b, em, p, h1 y ul. Permite agrupar y organizar los botones del panel Insertar que utiliza

lugar común. Categorías de código de servidor Categorías de código de servidor Categorías de código de servidor Categorías de código de servidor Sólo están disponibles para las páginas que emplean un lenguaje de servidordeterminado, como ASP, CFML Basic, CFML Flow, CFML Advanced, y

Cada una de estas categorías contiene objetos de código de servidor que pueden A diferencia de otros paneles de Dreamweaver, el panel

Insertar se puede arrastrar fuera de su posición de acoplamiento predeterminada y colocarse en una posición horizontal en la parte superior de la ventana de documento.Al hacerlo, cambia de panel a barra de herramientas (aunque no puede ocultarla y mostrarla como el resto de barras de herramientas).

13

diferentes categorías, entre las que puede cambiar seleccionando la categoría deseada del

ocumento actual contiene código de servidor, como los

Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de opción se convierte en la acción predeterminada del botón. Por

ejemplo, si selecciona Marcador de posición de imagenen el menú emergente del botón magen, Dreamweaver insertará un

magen. Siempre que seleccione una nueva opción del menú

Permite crear e insertar los objetos que se utilizan con más frecuencia,

div, marcos y elegir dos vistas para tablas: Estándar (valor

Contiene botones que permiten crear formularios e insertar formulario,incluidos validación de Spry. Permite insertar objetos y otros elementos juegos de registros,regiones grabar formularios de actualización. Contiene botones para Spry, incluidos objetos widgets de Spry. InContext Editing InContext Editing InContext Editing InContext Editing botones para la creación InContext Editing, botones para Regiones Regiones repetidas y la de clases CSS. Permite insertar diversas

los botones del panel Insertar que utiliza

Sólo están disponibles para las páginas que emplean un lenguaje de servidordeterminado, como ASP, CFML Basic, CFML Flow, CFML Advanced, y

objetos de código de servidor que pueden A diferencia de otros paneles de Dreamweaver, el panel

e en una posición horizontal en la parte superior de la ventana de documento.Al hacerlo, cambia de panel a barra de herramientas (aunque

de herramientas).

Introducción al panel Estilos CSSIntroducción al panel Estilos CSSIntroducción al panel Estilos CSSIntroducción al panel Estilos CSSEl panel Estilos CSS le permite supervisar las reglas y pelemento de página actualmente seleccionado (modo Actual) o las reglas y propiedades que afectan a todo un documento (modo Todo).Un botón situado en la parte superior del panedos modos. El panel Estilos CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo Actual. Puede cambiar el tamaño de cualquiera de los paneles arrastrando los bordes que los separan. En modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del panel Selección que muestra las propiedades de CSS de la selección actual del documento, un panel Reglas que muestra la ubicación de las propiedadesetiqueta seleccionada, en función de la selección) y un panel Propiedadeseditar las propiedades CSS al definir reglas para la selección.En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arry un panel Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, así como las reglasdocumento actual. El panel Propiedades le permite editar propiedades regla seleccionada en el panel Todas las reglas.Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, puedemedida que lo vaya llevando a cabo.

Visualización de barrVisualización de barrVisualización de barrVisualización de barrUtilice las barras de herramientas Documento y Estándar para realizar operaciones relacionadas con documentos y depara insertar código rápidamente y la barra de herramientasmostrar la página tal y como aparecería en diferentes tipos de soportes. Si lo desea,puede seleccionar la opción de mostrar u ocultar las barras de herramientas.• Seleccione Ver > Barras de herramientas y, después, seleccioque desee. • Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en cualquiera de las barras de herramientas en el menú contextual.

Utilización del inspector de propiUtilización del inspector de propiUtilización del inspector de propiUtilización del inspector de propiEl inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en función del elemento o elementos seleccionados.Espacio de trabajoEspacio de trabajoEspacio de trabajoEspacio de trabajo Para acceder a la ayuda correspondiente a un inspector de propiedades determinado, haga clic en el botón ayuda de la esquina superior derecha del inspector de propiedades o seleccione Ayuda del menú Opciones de un inspector de propiedades.

Introducción al panel Estilos CSSIntroducción al panel Estilos CSSIntroducción al panel Estilos CSSIntroducción al panel Estilos CSS Estilos CSS le permite supervisar las reglas y propiedades CSS que afectan a un

actualmente seleccionado (modo Actual) o las reglas y propiedades que afectan a todo un documento (modo Todo). Un botón situado en la parte superior del panel Estilos CSS le permite cambiar entre estos

CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo

Puede cambiar el tamaño de cualquiera de los paneles arrastrando los bordes que los

n modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del panel Selección propiedades de CSS de la selección actual del documento, un panel Reglas

que muestra la ubicación de las propiedades seleccionadas (o una cascada de etiqueta seleccionada, en función de la selección) y un panel Propiedadeseditar las propiedades CSS al definir reglas para la selección. En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arr

abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, así como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel Propiedades le permite editar propiedades CSSregla seleccionada en el panel Todas las reglas.Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, puede previsualizar el trabajo a medida que lo vaya llevando a cabo.

Visualización de barrVisualización de barrVisualización de barrVisualización de barras de herramientasas de herramientasas de herramientasas de herramientas Utilice las barras de herramientas Documento y Estándar para realizar operaciones relacionadas con documentos y de edición estándar, la barra de herramientas Codificación para insertar código rápidamente y la barra de herramientas Representación de estilos para mostrar la página tal y como aparecería en diferentes tipos de soportes. Si lo desea,puede seleccionar la opción de mostrar u ocultar las barras de herramientas.Seleccione Ver > Barras de herramientas y, después, seleccione la barra de herramientas

Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla

(Macintosh) en cualquiera de las barras de herramientas en el menú contextual.

Utilización del inspector de propiUtilización del inspector de propiUtilización del inspector de propiUtilización del inspector de propiedadesedadesedadesedades El inspector de propiedades permite examinar y editar las propiedades más comunes del

seleccionado, como texto o un objeto insertado. El contenido del inspector de propiedades

ionados.

Para acceder a la ayuda correspondiente a un inspector de propiedades determinado, haga

esquina superior derecha del inspector de propiedades o seleccione Ayuda del menú Opciones de un

14

ropiedades CSS que afectan a un actualmente seleccionado (modo Actual) o las reglas y propiedades

l Estilos CSS le permite cambiar entre estos

CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo

Puede cambiar el tamaño de cualquiera de los paneles arrastrando los bordes que los

n modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del panel Selección propiedades de CSS de la selección actual del documento, un panel Reglas

seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en función de la selección) y un panel Propiedades que le permite

En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arriba abajo. El panel Todas las reglas muestra una lista de reglas definidas

definidas en las hojas de estilo adjuntas al CSS para cualquier

regla seleccionada en el panel Todas las reglas.Todos los cambios que realice en el panel previsualizar el trabajo a

Utilice las barras de herramientas Documento y Estándar para realizar operaciones edición estándar, la barra de herramientas Codificación

Representación de estilos para mostrar la página tal y como aparecería en diferentes tipos de soportes. Si lo desea, puede seleccionar la opción de mostrar u ocultar las barras de herramientas.

ne la barra de herramientas

Haga clic con el botón derecho del ratón (Windows) o mantenga presionada la tecla

(Macintosh) en cualquiera de las barras de herramientas en el menú contextual.

El inspector de propiedades permite examinar y editar las propiedades más comunes del

seleccionado, como texto o un objeto insertado. El contenido del inspector de propiedades

15

Nota: Nota: Nota: Nota: Utilice el inspector de etiquetas para ver y editar todos los atributos asociados con una propiedad de etiqueta determinada.

Ampliación o contracción del inspector de propiedadesAmpliación o contracción del inspector de propiedadesAmpliación o contracción del inspector de propiedadesAmpliación o contracción del inspector de propiedades � Haga clic en la flecha de ampliación, situada en la esquina inferior derecha del inspector de propiedades. Visualización y cambio de las propiedades de un elemento de páginaVisualización y cambio de las propiedades de un elemento de páginaVisualización y cambio de las propiedades de un elemento de páginaVisualización y cambio de las propiedades de un elemento de página 1 1 1 1 Seleccione el elemento de página en la ventana de documento. Es posible que tenga que ampliar el inspector de propiedades para ver todas las propiedades del elemento seleccionado. 2 2 2 2 Cambie las propiedades que desee en el inspector de propiedades. Nota: Nota: Nota: Nota: Para información sobre propiedades específicas, seleccione un elemento en la ventana de documento y, a continuación, haga clic en el icono de ayuda, situado en la esquina superior derecha del inspector de propiedades. 3 3 3 3 Si los cambios realizados no se aplican inmediatamente en la ventana de documento, aplíquelos mediante uno de estos procedimientos: • Haga clic fuera de los campos de texto de edición de propiedades. • Presione Intro (Windows) o Retorno (Macintosh). • Presione el tabulador para cambiar a otra propiedad.

Utilización de menús contextualesUtilización de menús contextualesUtilización de menús contextualesUtilización de menús contextuales Los menús contextuales proporcionan acceso rápido a los comandos y las propiedades más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los menús contextuales sólo aparecen los comandos pertinentes para la selección actual.

Acerca del establecimiento de vínculos y la navegaciónAcerca del establecimiento de vínculos y la navegaciónAcerca del establecimiento de vínculos y la navegaciónAcerca del establecimiento de vínculos y la navegación Una vez que haya creado páginas HTML y haya configurado un sitio de Dreamweaver para almacenar los documentos, deberá establecer conexiones entre sus documentos y otros documentos.Dreamweaver ofrece varios métodos para crear vínculos con documentos, imágenes, archivos multimedia o software transferible. Puede establecer vínculos con cualquier texto o imagen de cualquier lugar del documento, incluidos el texto y las imágenes situados en un encabezado, lista, tabla, elemento con posición absoluta (elemento PA) o marco. Los vínculos se pueden crear y administrar de varias formas distintas. Algunos diseñadores de sitios Web prefieren crear vínculos con páginas o archivos que todavía no existen cuando están trabajando, mientras que otros prefieren crear primero todos los archivos y las páginas y añadir los vínculos más tarde. Otra forma de administrar vínculos consiste en crear páginas marcadoras de posición en las que añadir y comprobar los vínculos antes de completar todas las páginas del sitio.

UbicacUbicacUbicacUbicación y rutas de documentosión y rutas de documentosión y rutas de documentosión y rutas de documentos A la hora de crear vínculos resulta fundamental conocer la ruta de archivo entre el documento desde el que establece el vínculo y el documento con el que lo establece. Cada página Web tiene una dirección exclusiva, denominada URL (Localizador Uniforme de Recursos, Uniform Resource Locator). Sin embargo, cuando se crea un vínculo local (un vínculo de un documento con otro documento

16

del mismo sitio), no suele ser necesario especificar el URL completo del documento de destino. En este caso se especifica una ruta relativa desde el documento actual o desde la carpeta raíz del sitio. Existen tres tipos de rutas de vínculos: • Rutas absolutas (como http://www.adobe.com/support/dreamweaver/contents.html). • Rutas relativas al documento (como dreamweaver/contents.html). • Rutas relativas a la raíz del sitio (como /support/dreamweaver/contents.html). Con Dreamweaver puede seleccionar fácilmente el tipo de ruta de documento que desee crear para los vínculos.

17

Chistes InformaticosChistes InformaticosChistes InformaticosChistes Informaticos

¿Qué le pasa al coche?

Este es un Físico, un Mecánico y un Informático que van en un coche y de pronto se para echando humo. El físico dice: - Eso es el coeficiente de fricción de las ruedas que no sobrepasa el efecto aerodinámico de diseño del vehículo. El mécanico dice: - Esto ha sido la junta de la culata que se ha quemado. Y tras mucho pensar dice el informático: - ¿Por qué no salimos y volvemos a entrar?

El genio de la programación

Se murió un experto en programación y automatización de sistemas. Llevaba una vida ejemplar, pero no creía en Dios, por tanto lo mandaron al infierno. Era muy bueno programando y en poco tiempo arregló todos los desperfectos en el infierno, dejando todo que funcionara en forma automática, sin tener que resetear (apagar y prender) los equipos. Instaló acondicionadores en las oficinas, cafeteras automáticas, sistema multicanal de TV en todos los departamentos y puso a funcionar muchos otros servicios. Dios al enterarse de todo esto lo quiso transferir al paraíso, pero el Diablo se opuso. Dios se molestó y le dijo: - ¡Te voy a demandar! - Sí, como no, dijo el Diablo con sarcasmo. - ¿Y dónde encontrarás un buen abogado, si en el paraíso no hay ninguno?