GUIAS DE DREAMWEAVER

Sitio Web: Un sitio Web es un conjunto de archivos que comparten un mismo tema o tienen la misma finalidad
y que están almacenados en un servidor Web. Generalmente está compuesto de páginas HTML junto con otros
elementos asociados a ellas como imágenes, videos o sonidos. en Un Sitio Web es un conjunto de páginas Web
relacionadas entre sí.
Página Web: Una Página de Internet o Página Web es un documento que contiene información específica de un
tema, con texto, imágenes, sonidos o videos.
Html: HTML son las siglas para HyperText Markup Language. Es un lenguaje utilizado para hacer lo que todos
conocemos como páginas de Internet. ( Cuando se crea la primera página debe llamarse index.html, ya que los
visualizadores cuando se digita el nombre de un sitio por defector buscan una pagina con dicho nombre.
Link, enlaces o vínculos: crean un vínculo entre el botón o texto que se esta utilizando como link y el
documento o sección del documento a la que se refiere.
Dreamweaver:Dreamweaver es un editor gráfico de HTML que permite al usuario ver y editar páginas de Web
de tipo. Creado por Macromedia quienes actualmente fueron Comprados por Adobe.
Usos y aplicaciones de Dreamweaver
• Dreamweaver nos permite generar HTML de manera “Fácil” y eficiente.
• Crear páginas de Web.
• Editar texto, imágenes, layout en páginas de Internet.
Formatos de Imagen
• Gif – Formato de compresión de imágenes.
• Utiliza 256 colores o menos y puede hacer transparencia.
• Este formato es muy utilizado en diseño de páginas por sus capacidades. (transparencia,
animación sencilla)
• Jpg – Formato de compresión de imágenes
• Utiliza miles de colores
• Tiende a crear deformaciones leves pero es el mejor para fotos en el Web.
Contenido avanzado (sonido, video, flash) Los formatos común mente utilizados son :
Formatos de Sonido
• WAV, MIDI, MPG, MP3…
• Wav se utiliza para sonidos sencillos ya que de ser muy elaborado tiende a ocupar mucho espacio.
• Midi se utilizaba para composiciones musicales que tienen la posibilidad de ser editadas e importada en
equipos de música como pianos electrónicos y otros.
• Estos formatos han sido casi sustituidos por el MPG y MP3 ya que estos permiten mayor calidad de
sonido sin ocupar mucho espacio.
Formatos de Video
– ¡¡FLASH!!
– Flash (SWF= Shock-Wave Flash) es un formato creado por macromedia que se ha vuelto el
estándar de los diseños interactivos en Web.
– Este formato permite hacer animaciones, incluir texto, video, sonido, música, imágenes y demás sin
ocupar el espacio que usualmente estos elementos ocuparían por separado.
– HAY páginas completamente hechas en flash o con muchos elementos de flash.(modalidad utilizada
comúnmente estos días)(No, no tengo acciones con macromedia.)
– Otros formatos como Quicktime(Mov), Windows Video (WMV o AVI) son utilizados también y
recientemente MPG, MPG4, DivX y otros se han unido a la interminable lista de fromatos.
 El área de trabajo de Dreamweaver
contiene elementos como el documento, la barra de herramientas y los páneles entre otros, los cuales permiten
agregar, modificar y eliminar elementos en nuestro sitio web.

1. Principales barras y menús

1.1. La barra de herramientas :La barra de herramientas de Dreamweaver contiene botones que
permiten alternar entre diferentes vistas del documento rápidamente, cambiar el título del documento o
previsualizar la página en el navegador. Los elementos del menú Opciones (botón situado en el extremo
derecho de la barra de herramientas) cambia en función de la vista que seleccione.

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.
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 actual. El informe contiene
los errores de la página, si los hay.
Título del documento 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.
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.
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, la
vista
1.2. 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.
Los botones están organizados en categorías, a las que puede cambiar en la parte izquierda de la barra

Insertar.
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. 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, como b, em, p, h1 y ul.
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.
La categoría 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.
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 de Macromedia 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.
1.3. Barra de estado: La barra de estado, situada en la parte inferior de la ventana de documento,
proporciona información adicional sobre el documento que está creando.

El selector de etiquetas 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 etiqueta y todo su contenido. Haga clic en <body> para
seleccionar todo el cuerpo del documento. Para definir los atributos class o id para una etiqueta en el selector
de etiquetas, haga clic con el botón de derecho del ratón (Windows)
contextual. El selector de etiquetas es el método más adecuado para seleccionar etiquetas, porque le garantiza
que siempre se está seleccionado la etiqueta de manera precisa.
La herramienta Mano permite hacer clic en el documento y arrastrarlo hasta la ventana de documento. Haga
clic en la herramienta Seleccionar para desactivar la herramienta Mano.
La herramienta Zoom y el menú emergente Establecer nivel de aumento permiten establecer el nivel de
ampliación del documento.
1.4.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. Por ejemplo, si selecciona una imagen en la
página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (como la ruta del
archivo de imagen, el ancho y alto de la imagen, el borde que la rodea, etc.).
El inspector de propiedades se encuentra en la parte inferior del espacio de trabajo de forma predeterminada.

Vistas de Dreamweaver
Dreamweaver puede mostrar un documento de tres formas distintas:
Vista de Diseño: es un entorno de diseño para la disposición visual de la página, la edición visual y el
desarrollo rápido de aplicaciones. En ésta vista, Dreamweaver muestra una representación visual del
documento completamente editable, similar a la que aparecería en un navegador.
 Vista de Código: es un entorno de codificación manual que permite escribir y editar código HTML,
JavaScript, de lenguaje de servidor (ASP o PHP) o cualquier otro tipo de código.
Vista Compartida: Es una vista dividida que muestra tanto el diseño como el código.
Para cambiar la vista en la cual desea trabajar haga clic sobre la vista que prefiera en la barra de herramientas
de Dreamweaver.
Práctica No. 1
1. Crear una Primera página
2. Asígnale como título de la Página MI PRIMERA PAGINA WEB
3. Pulsar con el botón derecho sobre cualquier parte de la hoja en blanco y seleccionar la opción
“Propiedades de la página”.
4. En la categoría aspecto selecciona Color de Fondo Naranja y clic en el botón aceptar
5. Insertar el siguiente Texto

Para conseguir los efectos que hay en el texto que acabas de copiar (negritas, letras en colores, cursivas, etc)
se debe recurrir el inspector de propiedades. Para ello seleccionaremos el texto deseado (por ejemplo:
“botón derecho del ratón” debe ir en negrita) y se pone pulsando sobre

6. Guardar en una Carpeta con tu Nombre la página con el nombre de pagina1.htm

7. Presiona F12

Planificar un Sitio
El primer paso para crear un sitio Web es planificarlo. La planificación consiste principalmente en definir la
estructura que va a tener el contenido de nuestro sitio, además se deben definir detalles como el nombre del
sitio, el público al cual está dirigido y los objetivos.
Para definir la estructura se recomienda hacer un bosquejo en papel, para así tener una idea de cómo se van a
distribuir los diferentes elementos del sitio. Algunas de las principales recomendaciones a la hora de crear un
sitio Web son las siguientes:
• La navegación debe ser amigable, es decir que el usuario pueda ubicarse fácilmente en cualquier lugar
del sitio. Si la navegación por el sitio es demasiado complicada, por ejemplo si el usuario no puede
encontrar los botones para desplazarse por el sitio, simplemente los visitantes no vuelven.
• Los textos no deben ser extensos y deben ser de fácil lectura. Además se debe manejar un solo tipo de
letra porque el uso de varios tipos puede desviar la atención del usuario.
A continuación se explican los principales pasos que se deben llevar a cabo durante la planificación del sitio:
1. Determinar los objetivos: Definir cuál es la temática del sitio y qué se espera conseguir con él. Los
objetivos le ayudan a centrarse y a adaptar el sitio Web a sus necesidades particulares.
2. Elegir la audiencia destino: Debe decidir quién desea que visite el sitio, dado que es difícil crear un sitio
Web que pueda utilizar absolutamente todo el mundo (no es lo mismo un sitio para niños que para
adolescentes o para usuarios expertos en Internet). Todos estos factores pueden afectar la forma como
se diseñará el sitio Web.
3. Crear sitios compatibles con diversos navegadores: Conviene tener en cuenta la diversidad de
navegadores Web que pueden emplear los visitantes. En la medida de lo posible, diseñe el sitio para
ofrecer la máxima compatibilidad con navegadores teniendo en cuenta otras limitaciones de diseño, ya
que, cuanto más sofisticado sea el sitio (en términos de diseño, animación, contenido multimedia e
interacción) menos probable será que ofrezca compatibilidad para distintos navegadores. Por ejemplo,
no todos los navegadores pueden ejecutar JavaScript.
4. Organizar la estructura del sitio: La forma habitual de crear un sitio consiste en crear una carpeta en el
disco local con todos los archivos del sitio (lo que se conoce como sitio local) y crear y editar los
documentos dentro de dicha carpeta. Después podrá copiar dichos archivos en un servidor Web cuando
esté preparado para publicar el sitio y permitir al público que lo vea.
 Divida el sitio en categorías. Coloque las páginas relacionadas en una misma carpeta. Utilice
subcarpetas cuando sea necesario. Este tipo de organización facilitará el mantenimiento y la navegación
por el sitio.
Decida dónde desea poner elementos como imágenes y archivos de sonido. Es conveniente poner todas
las imágenes en un emplazamiento, con el fin de facilitar su localización cuando quiera insertarlas en
una página.
Utilice la misma estructura para sitios locales y remotos. El sitio local y el sitio Web remoto deberán
tener exactamente la misma estructura. Si crea un sitio local utilizando Dreamweaver y, a continuación,
carga todo en el sitio remoto, Dreamweaver se asegurará de que la estructura local se duplique con
precisión en el entorno remoto.
5. Crear su propio diseño: Ahorrará mucho tiempo posteriormente en el proceso, si planifica el diseño y la
disposición antes de comenzar a trabajar con Dreamweaver. Lo importante es disponer de un boceto de
la disposición y del diseño que pueda seguir posteriormente a la hora de crear el sitio.
6. Diseñar el esquema de navegación: Diseñe la apariencia que tendrá la navegación. La navegación debe
ser homogénea en todo el sitio. Si sitúa una barra de navegación a lo largo de la parte superior de la
página principal, intente mantenerla en ese lugar en todas las páginas vinculadas.
Cuando diseñe su sitio, piense en cómo podrá desplazarse un visitante de un área a otra del sitio. Tenga
en cuenta que los visitantes deben conocer fácilmente en qué lugar del sitio se encuentran y cómo
pueden regresar a la página de nivel superior, que las búsquedas y los índices facilitan a los visitantes la
localización de la información que están buscando, que los comentarios ofrecen un medio por el que los
visitantes pueden ponerse en contacto con el webmaster (en el caso de que exista) si algo marcha mal
en el sitio, o con los responsables de la compañía o el sitio.
7. Planificar y reunir los activos: Una vez que sepa cómo será el diseño y la disposición, podrá crear y
reunir los activos que va a necesitar. Los activos pueden ser elementos tales como imágenes, texto o
elementos multimedia (Flash, Shockwave, etc.). Después, organice los activos de forma que pueda
obtener acceso a ellos fácilmente durante la creación del sitio en Dreamweaver.
8. Utilice plantillas si muchas de las páginas van a utilizar la misma disposición. Planifique y diseñe una
plantilla para dicha disposición y luego cree nuevas páginas basadas en dicha plantilla. Si decide
cambiar la disposición de todas las páginas, sólo tendrá que cambiar la plantilla.
Configuración y edición de un Sitio
El sitio local es una estructura que se establece en el computador personal para que contenga todas las
carpetas, activos y archivos del sitio Web. La carpeta raíz local del sitio debe ser única para cada sitio.
Creación de un Sitio El procedimiento para crear un sitio nuevo es
el siguiente:

1. Elija en el menú Sitio la opción Nuevo sitio.

2. Seleccione la pestaña Avanzadas.
En la ventana que aparece (Definición de sitio) estará
seleccionada la categoría Datos locales.

3.En el campo "Nombre del sitio", introduzca un nombre para el

sitio. El nombre del sitio aparece en la ventana Sitio y en el
submenú Sitio: Abrir sitio. Utilice el nombre que desee, ya
que este nombre sólo le servirá como referencia.
4. En el campo Carpeta raíz local, especifique la carpeta en la
cual desea almacenar los archivos, las plantillas y los
elementos de biblioteca del sitio. Haga clic en el ícono de
carpeta para examinar y seleccionar la carpeta o introduzca
una ruta y un nombre de carpeta en el campo de texto. Si aún no existe la carpeta raíz local, créela
desde el cuadro de diálogo que permite examinar archivos.
5. En la opción Actualizar lista archivos locales autom., indique si desea
actualizar automáticamente la lista de archivos locales cada vez que
copie archivos en el sitio local. Si desactiva esta opción, mejorará la
velocidad de Dreamweaver a la hora de copiar esos archivos, pero el
panel Local de la ventana Sitio no se actualizará automáticamente.
6. En el campo Dirección HTTP, introduzca el URL que utilizará el sitio Web
finalizado, de modo que Dreamweaver pueda verificar los vínculos del
sitio que utilicen URL absolutos.
7. En la opción Caché, indique si desea crear un caché local para mejorar la
velocidad de las tareas de administración de vínculos y sitios. Es
recomendable seleccionar esta opción porque el panel "Activos" sólo
funciona cuando se ha creado un caché.
 8. Finalmente haga clic en Aceptar. Ahora verá, en los páneles ubicados al lado derecho, una ventana
como la siguiente, en la cual se pueden observar los archivos que ya ha almacenado para su sitio.

Edición de un Sitio

Si desea editar un Sitio que ya ha sido creado:

1. Elija Sitio> Editar sitios.
2. Seleccione el nombre del sitio que desea editar y
haga clic en Editar.
3. En el cuadro de diálogo "Editar sitios" modifique la
información deseada de la misma forma como lo hizo
cuando creó un nuevo sitio.
4. Haga clic en Aceptar. Se abrirá de nuevo la ventana
Editar sitios.
5. Haga clic en el botón Listo.

Eliminación de un Sitio
Si no desea seguir trabajando con un sitio, puede quitarlo de
la lista de sitios. Los archivos no son eliminados, sólo se
quita la información de configuración del sitio.

Si desea quitar un sitio:

1. Elija Sitio > Editar Sitios.
2. Selecccione el nombre del sitio que desea quitar.
3. Haga Clic en Quitar.
Aparecerá un cuadro de diálogo pidiendo confirmación.
4. Haga Clic en el botón Sí para quitar el sitio de la lista.
5. Haga clic en el botón Listo.