El documento proporciona una introducción a Dreamweaver, incluyendo una descripción de sus funciones de edición visual y de código, nuevas características en Dreamweaver MX 2004 como la interfaz mejorada y compatibilidad con Unicode, y elementos clave del espacio de trabajo como las vistas de diseño y código. También ofrece consejos sobre cómo empezar a utilizar Dreamweaver y sacarle el máximo provecho.
La Sostenibilidad Corporativa. Administración Ambiental
Dreamweaver j-l
1. Aquino Ríos María luisa
Colunga Licea Jaritza Lizeth
CENTROS DE ESTUDIOS TECNOLOGICOS INDUSTRIAL Y DE
SERVICIOS NO. 109
Martes 02 de abril de 2019
No . Maquina:
8 Computo 1
2. INTRODUCCIÓN BIENVENIDO A
DREAMWEAVER
Macromedia Dreamweaver MX 2004 es un editor HTML profesional para diseñar,
codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar
manualmente el código HTML como si prefiere trabajar en un entorno de edición
visual, Dreamweaver le proporciona útiles herramientas que mejorarán su
experiencia de creación Web.
3. Las funciones de edición visual de Dreamweaver permiten crear
páginas de forma rápida, sin escribir una sola línea de código. Puede
ver todos los elementos o activos del sitio y arrastrarlos desde un
panel fácil de usar directamente hasta un documento. Puede agilizar el
flujo de trabajo de desarrollo mediante la creación y edición de
imágenes en Macromedia Fireworks o en otra aplicación de gráficos y
su posterior importación directa a Dreamweaver, o bien añadir objetos
Macromedia Flash.
4. Dreamweaver le permite crear aplicaciones Web dinámicas basadas en
bases de datos empleando tecnologías de servidor como CFML,ASP.NET,
ASP, JSP y PHP. Dreamweaver se puede personalizar totalmente. Puede
crear sus propios objetos y comandos, modificar métodos abreviados de
teclado e incluso escribir código JavaScript para ampliar las posibilidades
que ofrece Dreamweaver con nuevos comportamientos, inspectores de
propiedades e informes de sitios
5. Novedades de Dreamweaver MX 2004 Dreamweaver MX 2004 contiene
una nueva interfaz mejorada, junto con un mejor rendimiento del
producto. También hay una gran variedad de funciones nuevas que
mejoran el uso y ayudan a crear páginas, tanto si trabaja en el entorno
de diseño como si lo hace en el entorno de codificación.
6. Interfaz de desarrollo y diseño optimizada La interfaz de Dreamweaver es más
accesible para ayudarle a mejorar la productividad y la calidad del trabajo.
• Las mejoras de la barra Insertar confieren a la barra Insertar un nuevo aspecto
optimizado que ocupa menos en el espacio de trabajo. Además, se incluye la
nueva categoría Favoritos, que se puede emplear para personalizar una barra
Insertar con los objetos más frecuentemente utilizados.
• Los comandos Copiar y Pegar de Microsoft Word y Microsoft Excel le permiten
copiar y pegar un documento de Microsoft Word o Excel directamente en
Dreamweaver. Cuando se pega un documento de Word o Excel, Dreamweaver
conserva el formato y genera HTML de calidad.
• La respuesta visual de la edición de tablas permite ver los efectos que las
operaciones de cambio de tamaño de las columnas tendrán en las tablas. La
respuesta visual también simplifica la selección de elementos de tabla.
7. *La renovación de la interfaz de usuario maximiza el espacio de trabajo utilizable,
mostrando más claramente el contexto y el foco, a la vez que la hace más lógica y
accesible.
*La página de inicio permite acceder a los archivos utilizados recientemente, crear archivos
nuevos y acceder a los recursos de Dreamweaver. La página de inicio aparece cuando se
inicia Dreamweaver o cuando no se tiene abierto ningún documento.
*La opción del escritorio guardado ofrece la posibilidad de que Dreamweaver vuelva a abrir
los documentos con los que estaba trabajando al reiniciar Dreamweaver.
*Gracias a la compatibilidad total con Unicode, Dreamweaver en Windows admite todas las
codificaciones de texto con las que es compatible Internet Explorer. Puede utilizar casi
cualquier fuente de idioma instalada en el sistema en Dreamweaver, y Dreamweaver la
procesará y guardará adecuadamente.
*El FTP seguro permite cifrar completamente todas las transferencias y evitar los accesos no
autorizados a sus datos, archivos, nombres de usuario y contraseñas.
8. Diseño de página y entorno de diseño modernizados
Dreamweaver incluye las siguientes funciones mejoradas de CSS que ofrecen un modo más
sofisticado para dar estilo y añadir interactividad a los diseños, además de información para
mejorar la edición visual.
• La validación dinámica entre navegadores comprueba automáticamente la
compatibilidad entre navegadores del documento actual al guardarlo. El usuario
especifica los navegadores que desee y Dreamweaver comprueba que las páginas no
utilicen etiquetas o construcciones CSS que dichos navegadores no admitan.
• La ficha CSS relevante muestra las reglas CSS que se aplican a la selección actual en vista
de código o vista de diseño. Haga clic en cualquier regla para ver qué atributos especifica
(estilo de bordes, margen, relleno, tamaño del texto, etc). Una marca especial le indica si
se ha omitido un atributo concreto y la edición en contexto permite editar rápidamente
reglas que se aplican al momento en la vista de diseño.
9. • La visualización de diseño CSS simplifica enormemente el diseño de páginas en CSS. Puede
seleccionar con facilidad div y otros bloques de contenido en la vista Diseño para modificar sus
propiedades en la ficha Propiedades de CSS.
• La presentación de CSS mejorada implica que Dreamweaver puede presentar disposiciones y
diseños basados en CSS más complicados y de forma más precisa. La presentación de CSS
mejorada permite realizar diseños más sofisticados y utilizar las herramientas de diseño de
Dreamweaver para diversas manipulaciones visuales.
• El panel mejorado Estilos CSS proporciona más opciones para la edición de estilos en el
documento actual. Ahora también puede aplicar estilos directamente desde el inspector de
propiedades de texto.
• El inspector de propiedades de texto basado en CSS lista todos los estilos disponibles para su uso
en texto, e incluye una vista previa que muestra el aspecto que tendrá el texto una vez se aplique
el estilo.
10. • Las propiedades de página basadas en CSS ofrecen un mayor control de las propiedades de la
página, como el aspecto de los encabezados y los vínculos, mediante modernas construcciones de
codificación de CSS.
• La barra de herramientas de edición de imágenes integrada permite llevar a cabo manipulaciones
básicas en la imagen y editarla desde Dreamweaver mediante la tecnología de Macromedia
Fireworks. Podrá recortar, cambiar el tamaño y volver a muestrear, entre otras funciones, sin salir de
Dreamweaver.
11. Dreamweaver proporciona las siguientes nuevas funciones para codificadores:
• El inspector de etiquetas mejorado muestra una lista de las propiedades disponibles para la
selección actual, y permite llevar a cabo ediciones rápidas y de gran amplitud.
• La edición de archivo sin sitio permite trabajar directamente en un servidor FTP o RDS sin crear
un sitio de Dreamweaver.
• Los comportamientos del servidor PHP permiten crear un juego de páginas maestra/detalle y
páginas de autenticación de usuarios.
• La admisión mejorada para controles de formulario ASP.NET ofrece nuevas y mejoradas maneras,
entre las que se incluyen nuevos inspectores de propiedades, de crear y manipular formularios
Web ASP.NET en la vista Diseño.
• El menú contextual de la vista de código permite aplicar rápidamente cambios de formato al
código seleccionado.
12. Por dónde empezar
La documentación de Dreamweaver contiene información para
usuarios de distintos niveles. Para sacarle el máximo provecho a la
documentación, comience leyendo las partes que sean más
relevantes para su nivel.
13. Planificar y organizar cuidadosamente el sitio desde el primer momento puede ayudar a
tiempo más adelante. La organización del sitio no sólo implica la determinación de los
que van a incluirse, sino que también requiere un examen de las necesidades del sitio, el
de la audiencia y sus objetivos. Además, deben tenerse en cuenta requisitos técnicos tales
el acceso de los usuarios, o limitaciones del navegador, los plug-ins o la descarga de archivos.
Una vez que haya organizado la información y determinado una estructura, podrá comenzar
crear el sitio.
• Utilice el panel Archivos de Dreamweaver para establecer la estructura organizativa del
En el panel Archivos puede añadir, borrar y cambiar el nombre de los archivos y carpetas
fácilmente con el fin de modificar la organización según resulte necesario.
14. • Puede empezar por crear páginas simples que más adelante convertirá en
diseños más complejos.
• Configurar un sistema de forma que los miembros del equipo no puedan
sobrescribir los archivos.
• Utilizar Design Notes para comunicarse con los miembros del equipo Web.
Los paneles Archivos y Activos de Dreamweaver facilitan la administración de los
archivos del sitio.
• En el panel Archivos de Dreamweaver encontrará numerosas herramientas que le
ayudarán a administrar el sitio, transferir archivos desde y hacia un servidor
remoto, configurar un proceso de desprotección/protección que evite que se
sobrescriban archivos y sincronizar los archivos de los sitios local y remoto.
15. Dreamweaver le ofrece flexibilidad para crear páginas de muestra y
trabajar en el diseño definitivo de sus páginas. Elija el diseño más
apropiado, o combine las opciones de diseño de Dreamweaver
definir el aspecto de su sitio.
16. Para sacar el máximo provecho de Macromedia Dreamweaver MX
2004, deberá conocer cuáles son los conceptos que subyacen al área
de trabajo de Dreamweaver y cómo seleccionar opciones, utilizar
inspectores y paneles y establecer las preferencias que mejor se
adapten a su forma de trabajar.
17.
18. En Windows, Dreamweaver proporciona un diseño integrado en una única ventana. En
espacio de trabajo integrado, todas las ventanas y paneles están integrados en una
ventana de la aplicación de mayor tamaño.
19. En Macintosh, Dreamweaver proporciona un diseño flotante del espacio de trabajo, en el que
cada documento aparece en una ventana distinta. Los grupos de paneles aparecen apilados en
principio, pero pueden separarse en sus propias ventanas. Las ventanas se ajustan
automáticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o
cambiar su tamaño.
20. Elementos del espacio de trabajo de Dreamweaver En esta sección se describen brevemente
algunos elementos del espacio de trabajo de Dreamweaver.
• La página de inicio permite abrir un documento reciente o crear un documento nuevo. Desde
la página de inicio también puede profundizar sus conocimientos sobre Dreamweaver
mediante una visita guiada o un tutorial del producto. La barra Insertar contiene botones para
la inserción de diversos tipos de “objetos”, como imágenes, tablas y capas, en un documento.
Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al
insertarlo. Por ejemplo, puede insertar una tabla haciendo clic en el botón Tabla de la barra
Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la barra
Insertar.
• La barra de herramientas de documento contiene botones que proporcionan opciones para
diferentes vistas de la ventana de documento (como la vista Diseño y la vista Código),
diversas opciones de visualización y algunas operaciones comunes como la obtención de una
vista previa en un navegador.
• La barra de herramientas Estándar (que no aparece en el diseño de espacio de trabajo
predeterminado) contiene botones para las operaciones más habituales de los menús Archivo
y Edición: Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer.
Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de herramientas >
Estándar. La ventana de documento muestra el documento actual mientras lo está creando y
editando.
21. • El inspector de propiedades le permite ver y cambiar diversas propiedades del objeto o texto seleccionado.
Cada tipo de objeto tiene diferentes propiedades. El inspector de propiedades no está ampliado de forma
predeterminada en el diseño del espacio de trabajo del codificador.
• El selector de etiquetas, que aparece en la barra de estado en la parte inferior de la ventana de documento,
muestra la jerarquía de etiquetas que rodean a la selección actual. Haga clic en cualquier etiqueta de la
jerarquía para seleccionar la etiqueta y todo su contenido.
• Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un encabezado común. Para
ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a la izquierda del nombre del
grupo; para desacoplar un grupo de paneles, arrastre el punto de sujeción situado en el borde izquierdo de
la barra de título del grupo.
• El panel de archivos permite gestionar los archivos y las carpetas, tanto si forman parte de un sitio de
Dreamweaver como si se encuentran en un servidor remoto. El panel de archivos también proporciona una
vista de todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows) o en el
Finder (Macintosh).
22. • La vista Diseño es un entorno de diseño 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 que aparecería en un navegador.
• La vista Código es un entorno de codificación manual para escribir y editar código HTML,
JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup
Language (CFML) y otros tipos de código.
23. La barra de herramientas Documento contiene botones que permiten
alternar entre diferentes vistas del documento rápidamente: vista
Código, vista Diseño y una vista dividida que muestra las vistas
Código y Diseño. La barra de herramientas contiene también algunos
comandos y opciones relativos a la visualización del documento y a
su transferencia entre los sitios local y remoto.
24. 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 muestra la vista Código en una parte de
la ventana de documento y la vista Diseño en la otra parte. Cuando
seleccione esta vista combinada, se encontrará disponible la opción Vista
de diseño encima del menú Ver. Utilice esta opción para especificar qué
vista debe aparecer en la parte superior de la ventana de documento.
25. • Mostrar vista de diseño sólo muestra la vista Diseño en la ventana de documento.
• Depuración del servidor muestra un informe que le ayudará a depurar la página
de ColdFusion actual. El informe contiene los errores de la página, si los hay. Título
permite introducir un título para el documento, que aparecerá en la barra de título
del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo.
No hay errores de comprobación de navegador permite comprobar la
compatibilidad con distintos navegadores.
• Administración de archivos muestra el menú emergente Administración de
archivos.
• Vista previa/Depurar en explorador permite ver una vista previa del documento o
depurarlo en un navegador. Seleccione un navegador en el menú emergente.
26. Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios en la
vista Código. Los 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,
como guardar el archivo o hacer clic en este botón. Ver opciones permite
definir las opciones de las vistas Código y Diseño, y establecer qué vista va a
aparecer en la parte superior de la ventana. Las opciones del menú
corresponden a la vista actual: la vista Diseño.
27. La barra de herramientas Estándar contiene botones para las operaciones más
habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar
Cortar, Copiar, Pegar, Deshacer y Rehacer. Estos botones se utilizan del mismo
modo que los comandos de menú equivalentes.
28. La barra de estado, situada en la parte inferior de la ventana de
documento, proporciona información adicional sobre el documento
que está creando.
29. El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la
selección actual.
La barra Insertar contiene botones para la creación e inserción de
diversos tipos de objetos, como tablas, capas e imágenes. Al pasar el
puntero sobre un botón, aparece una descripción de la herramienta con el
nombre del botón.
30. La barra Insertar está organizada en las categorías siguientes:
• La categoría Común permite crear e insertar los objetos que se utilizan con
más frecuencia, como las imágenes y las tablas.
• La categoría Diseño permite insertar tablas, etiquetas div, capas y marcos.
También puede elegir entre las tres vistas de las tablas: Estándar (valor
predeterminado), Tablas expandidas y Diseño. Si se selecciona el modo de
diseño, se pueden utilizar las herramientas de diseño de Dreamweaver: Dibujar
celda de diseño y Dibujar tabla de diseño. La categoría Formularios contiene
botones que permiten crear formularios e insertar elementos de formulario. La
categoría Texto permite insertar diversas etiquetas de formato de texto y
listas.
31. La categoría HTML permite insertar etiquetas HTML para las reglas horizontales, el
contenido de la sección head, las tablas, los marcos y los scripts. Las categorías de
código de servidor sólo están disponibles para las páginas que emplean un lenguaje
de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML
Advanced, JSP y PHP. Cada una de estas categorías contiene objetos de código de
servidor que pueden insertarse en la vista Código. La categoría Aplicación permite
insertar elementos dinámicos como juegos de registros, regiones repetidas y grabar
formularios de inserción y actualización. La categoría Elementos Flash permite insertar
elementos Flash. La categoría Favoritos le permite agrupar y organizar los botones de
la barra Insertar que utiliza con más frecuencia en un lugar común.
32. *Validación permite comprobar si existen errores de código o de sintaxis.
*Revisión del navegador de destino permite probar el código HTML en los
documentos para comprobar si hay alguna etiqueta o atributo que sean
incompatibles con los navegadores de destino.
*Verificador de vínculos permite encontrar y arreglar vínculos rotos, externos y
huérfanos.
*Informes de sitios permite mejorar el flujo de trabajo y probar los atributos HTML del
sitio. Los informes de flujo de trabajo incluyen información sobre protección, sobre
documentos modificados recientemente sobre Design Notes; los informes HTML
incluyen etiquetas de fuentes anidadas combinables.
33. Registro FTP permite ver toda la actividad de transferencia de archivos mediante
FTP.
Depuración del servidor permite ver información para depurar una aplicación
ColdFusion.
Dreamweaver impide que la configuración personalizada de un usuario afecte a la configuración
personalizada de otro usuario. Para lograr este objetivo, la primera vez que ejecute Dreamweaver en uno
de los sistemas operativos multiusuario que reconoce, la aplicación creará para usted copias de diversos
archivos de configuración. Estos archivos de configuración se almacenan en una carpeta de su propiedad.
34. Cambio de vista en la ventana de documento Puede ver un documento en la
ventana de documento con la vista Código, con la vista Diseño o con ambas.
Para pasar de una vista a otra en la ventana de documento, siga uno de estos
procedimientos:
• Utilice el menú Ver:
■ Seleccione Ver > Código.
■ Seleccione Ver > Diseño.
■ Seleccione Ver > Código y diseño. • Utilice la barra de herramientas Documento:
■ Haga clic en el botón Mostrar vista de código
■ Haga clic en el botón Mostrar vistas de código y diseño.
Haga clic en el botón Mostrar vista de diseño.
35. Para establecer un tamaño predeterminado para la ventana de
documento:
• Elija uno de los tamaños del menú emergente Tamaño de ventana
situado en la parte inferior de la ventana de documento.
36. Utilización de barras de herramientas, inspectores y menús contextuales
Dreamweaver contiene varias herramientas que permiten realizar cambios
rápidamente mientras se crea o edita un documento.
Las barras de herramientas Documento y Estándar sirven para editar y trabajar
con el documento actual. La barra Insertar contiene botones para crear e insertar
objetos como por ejemplo tablas, capas e imágenes, mientras que el inspector de
propiedades permite editar las propiedades de dichos objetos.
37. Para mostrar los botones de una categoría determinada:
• Haga clic en la flecha del menú desplegable situada junto al nombre de la
categoría, en el extremo izquierdo de la barra Insertar y, a continuación,
seleccione otra categoría en el menú emergente.
Para mostrar el menú emergente de un
botón:
• Haga clic en la flecha abajo, situada
junto al icono del botón.
38. Para mostrar las categorías de la barra Insertar en forma de menú:
• Haga clic con el botón derecho del ratón (Windows) o haga clic mientras
presiona la tecla Control (Macintosh) en la barra Insertar y, a continuación,
seleccione Mostrar como menús. La barra Insertar muestra las categorías en un
menú en lugar de mostrarlas en forma de fichas.
La barra Insertar constituye un método práctico para crear e insertar objetos.
Para insertar un objeto:
1 Seleccione la categoría adecuada en el lado izquierdo de la barra Insertar.
2 Siga uno de estos procedimientos:
■ Haga clic en un botón de objeto o arrastre el icono correspondiente hasta la
ventana de documento.
■ Haga clic en la flecha de un botón y seleccione una opción del menú.
39. El inspector de propiedades permite examinar y editar las propiedades más comunes del
elemento de página seleccionado actualmente, como texto o un objeto insertado. El contenido
del inspector de propiedades es distinto en función del elemento seleccionado.
40. Para utilizar un menú
contextual:
1 Haga clic con el botón
derecho del ratón (Windows) o
haga clic mientras presiona la
tecla Control (Macintosh) en el
objeto o ventana. Aparecerá el
menú contextual para el objeto
o la ventana seleccionados.
2 Seleccione un comando en el
menú contextual.
41. Acoplamiento y desacoplamiento de paneles y grupos de
paneles
Para desacoplar un grupo de paneles:
• Arrástrelo por los puntos de sujeción (situados en el borde izquierdo de la barra
de título del grupo de paneles) hasta que el contorno indique que ya no está
acoplado.
Para arrastrar un grupo de paneles flotante (desacoplado) sin acoplarlo: •
Arrastre el grupo de paneles por la barra situada encima de su barra de título.
El grupo de paneles no se acopla mientras no se arrastre por sus puntos de
sujeción.
42. Selección del diseño del espacio de trabajo (sólo en Windows) En Windows, puede escoger el
diseño del espacio de trabajo del codificador o el del diseñador.
La primera vez que se inicia Dreamweaver aparece un cuadro de diálogo que permite elegir un
diseño para el espacio de trabajo. Puede pasar de un espacio de trabajo a otro en cualquier
momento.
Para elegir un diseño del espacio de trabajo la primera vez que se inicia Dreamweaver:
1 Seleccione uno de los diseños siguientes: Diseñador es un espacio de trabajo integrado que
utiliza MDI (Interfaz para Múltiples Documentos, Multiple Document Interface) en el que todas
las ventanas de documentos y todos los paneles están integrados en una ventana de aplicación
más grande con los grupos de paneles apilados a la derecha. Codificador es el mismo espacio
de trabajo integrado, pero con los grupos de paneles apilados a la izquierda; es un diseño
similar al que utiliza Macromedia HomeSite y Macromedia ColdFusion Studio, en el que las
ventanas de documentos muestran de forma predeterminada la vista de código.
43. 2- Haga clic en Aceptar.
Para cambiar a un espacio de trabajo distinto del que ha elegido:
1 Seleccione Edición > Preferencias (Windows) o Dreamweaver > Preferencias
(Macintosh). Aparece el cuadro de diálogo Preferencias.
2 Seleccione la categoría General en la lista Categoría, si no está ya seleccionada.
3 Haga clic en el botón Cambiar espacio de trabajo.
4 Seleccione un diseño del espacio de trabajo y, a continuación, haga clic en
Aceptar. Aparece un mensaje de alerta para indicarle que tras reiniciar
Dreamweaver, aparecerá el nuevo diseño.
5 Haga clic en Aceptar en el mensaje de aviso.
6 Haga clic en Aceptar de nuevo para cerrar el cuadro de diálogo Preferencias.
7 Salga de Dreamweaver y reinícielo.
44. Para personalizar los métodos abreviados de teclado: 1 Seleccione Edición >
Métodos abreviados de teclado (Windows) o Dreamweaver > Métodos abreviados
de teclado (Macintosh). Aparece el cuadro de diálogo Métodos abreviados de
teclado.
45. 2 Añada, elimine o edite los métodos abreviados de teclado. Para más información, haga clic
en Ayuda. 3 Haga clic en Aceptar.
Las extensiones son funciones nuevas que se pueden añadir fácilmente a Dreamweaver. Se
pueden utilizar muchos tipos de extensiones; por ejemplo, hay extensiones que permiten
cambiar el formato de las tablas, conectar con bases de datos back-end o que ayudan a
escribir scripts para navegadores.
46. Un sitio Web es un conjunto de documentos y activos vinculados con atributos
compartidos, como temas relacionados, un diseño similar o un objetivo común.
Macromedia Dreamweaver MX 2004 es una herramienta de creación y
administración de sitios, por lo que puede utilizarla para crear sitios Web
completos, además de documentos por separado.
*El primer paso al crear un sitio Web consiste en planificarlo. Para obtener
resultados óptimos, diseñe y planifique la estructura del sitio Web antes de crear
las páginas que va a contener.
*El siguiente paso consiste en configurar Dreamweaver para poder trabajar con
la estructura básica del sitio. Si ya dispone de un sitio en un servidor Web,
puede utilizar Dreamweaver para modificarlo.
47. Un sitio de Dreamweaver permite organizar todos los documentos
asociados con un sitio Web.
Un sitio de Dreamweaver consta de un máximo de tres partes o
carpetas, según el entorno de desarrollo y el tipo de sitio Web que
se desarrolle: La carpeta local es el directorio de trabajo. En
Dreamweaver esta carpeta se conoce como “sitio local”.
48. En la carpeta remota se almacenan los archivos, según el entorno de desarrollo,
para fines de prueba, producción, colaboración, etcétera.
En Dreamweaver esta carpeta se conoce como “sitio remoto” en el panel Archivos.
En general, la carpeta remota suele colocarse en el equipo donde se ejecuta el
servidor Web.
Las carpetas de datos locales y remotos permiten transferir archivos entre el disco
local y el servidor Web, lo cual facilita la administración de los archivos en los
sitios de Dreamweaver.
En la carpeta del servidor de prueba, Dreamweaver procesa páginas dinámicas.
49. El directorio raíz remoto deberá
haberse creado antes de que
Dreamweaver intente conectar con
él. Si no dispone de un directorio
raíz para la carpeta remota, cree
uno o pida al administrador del
servidor que le cree uno.
50. Por ejemplo, si la carpeta raíz del sitio remoto, denominada public_html, contiene dos
carpetas, Project1 y Project2, y desea trabajar únicamente con los archivos HTML de
Project1, no será necesario que descargue los archivos de Project2, pero deberá
asignar su carpeta raíz local a public_html, no a Project1.
51. Después de planificar la estructura del sitio, o si ya posee un sitio, debe definir un sitio en
antes de iniciar el desarrollo. Configurar un sitio de Dreamweaver permite organizar todos los
documentos asociados con un sitio Web.
Puede utilizar las opciones Avanzadas del cuadro de diálogo Definición del sitio para configurar un
de Dreamweaver. Las opciones Avanzadas permiten configurar las carpetas locales, remotas y de
(para procesar páginas dinámicas) por separado según convenga. Se recomienda este método para
usuarios con experiencia en el uso de Dreamweaver.
52. Para configurar una carpeta local:
1 Seleccione Sitio > Administrar sitios. Aparece el
cuadro de diálogo Administrar sitios.
2 Haga clic en Nuevo. Aparecerá el cuadro de
diálogo Definición del sitio.
3 Haga clic en el botón Avanzadas, si las opciones
Avanzadas no están visibles. La ficha Avanzadas
del cuadro de diálogo Definición del sitio muestra
las opciones de la categoría Datos locales.
53. 4 Introduzca las opciones de Datos locales. Para más información, haga clic en el botón
Ayuda del cuadro de diálogo.
5 Opcional: si ya está listo para configurar el servidor remoto, omita el paso restante;
seleccione la categoría Datos remotos de la izquierda y complete el cuadro de diálogo. Para
más información, haga clic en el botón Ayuda del cuadro de diálogo. 6 Haga clic en Aceptar.
Dreamweaver crea la caché inicial del sitio y el nuevo sitio de Dreamweaver aparece en el
panel Archivos. Después de configurar una carpeta local, también puede añadir carpetas de
datos remotos y de prueba
54. Dreamweaver proporciona varias opciones para crear un
documento nuevo.
Puede crear cualquiera de los tipos de documento siguientes:
• Un nuevo documento o plantilla en blanco
• Un documento basado en uno de los diseños de página
prediseñados que se incluyen con Dreamweaver
• Un documento basado en una de las plantillas existentes
55. Cómo guardar un nuevo documento
Para guardar un documento nuevo:
1 Seleccione Archivo > Guardar.
2 En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la
que desea guardar el archivo.
3 En el cuadro de texto Nombre de archivo, introduzca un nombre para el archivo.
Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas.
Asimismo, no comience los nombres de los archivos con números. En concreto, no
utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos
puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en
un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo
que provoca que se rompan los vínculos existentes con los archivos.
4 Haga clic en Guardar.
56. Administración de archivos
Dreamweaver incluye una serie de funciones para administrar un sitio y
transferir archivos a un servidor remoto y desde éste.
Dreamweaver también dispone de funciones que facilitan el trabajo en
colaboración en un sitio Web, como Desproteger/proteger y Design Notes.
Sistema de desprotección/protección Si trabaja en un entorno de
colaboración, puede desproteger y proteger archivos en los servidores local
y remoto.
57. Las Design Notes son notas que el usuario crea para un
Se asocian al archivo que describen, pero se guardan en un
archivo aparte. Puede averiguar qué archivos tienen Design
Notes adjuntas en el panel Archivos ampliado: aparece un
de Design Notes en la columna Notas. Puede utilizar Design
Notes para mantener información adicional asociada a los
documentos, como los nombres de los archivos de imagen y
comentarios sobre el estado del archivo.
58. Acceso a sitios, a un servidor y a unidades locales.
Puede acceder, modificar y guardar archivos y carpetas en los sitios de
Dreamweaver, así como archivos y carpetas que no forman parte de un sitio
de Dreamweaver.
Para abrir un sitio Dreamweaver
existente:
• En el panel Archivos (Ventana
> Archivos), seleccione un sitio
en el menú emergente (donde
aparece el sitio, el servidor o la
unidad actual).
59. Para configurar Dreamweaver de modo que funcione con un servidor
mediante el panel Archivos:
1 En el panel Archivos (Ventana > Archivos), elija Escritorio en el menú
emergente (donde aparece el sitio, el servidor o la unidad actual).
2 Haga clic con el botón
derecho del ratón (Windows) o
mantenga presionada la tecla
Control y haga clic (Macintosh)
en el nodo Servidores FTP y
RDS del panel Archivos y, a
continuación, seleccione
Añadir servidor FTP o Añadir
servidor RDS.
60. En Conclusión:
Sirve para el diseño y programación Web de la empresa de Adobe
básicamente para hacer o modificar páginas de Internet. Se usa el
lenguaje HTML o PHP estos son códigos o lenguajes que se utilizan
para desarrollar sitios web.
Aquino Ríos María Luisa
Dreamweaver es una aplicación informática destinada a la construcción,
diseño y edición de sitios y aplicaciones Web basados en estándares.
Colunga Licea Jaritza Lizeth