Dreamweaver 8

Dreamweaver 8 Simposium XVI
Dreamweaver 8.
Introducción.
Etapas en la creación de la Web.
Las etapas fundamentales para crear y colocar las páginas en Internet son:
1. Planificar la creación de la Web. La primera etapa es pensar por anticipado y realizar un

diseño preliminar.
2. Creamos un directorio para guardar las páginas. Creamos una nueva carpeta (fólder)
para guardar los ficheros de nuestra página de forma ordenada en el disco duro de nuestro
ordenador.
3. Creamos las páginas. Construimos las páginas incorporando el texto, las imágenes y los
demás accesorios.
4. Guardamos en el disco duro de nuestro ordenador los archivos creados. Es importante

guardarlos ordenados y con nombres adecuados.
5. Comprobamos que las páginas no tienen errores.
A) Utilizamos la función de verificación de Dreamweaver
B) Vemos las páginas con los navegadores para comprobar que se ven como esperamos.
6. Enviamos los ficheros al servidor de Internet. Mediante un programa FTP específico o

Local / red utilizando el propio sistema que incorpora el DreamWeaver enviamos los
ficheros al servidor de Internet al que accederán los visitantes.
Dreamweaver es una herramienta de diseño de sitios o páginas Web profesionales ahora es

el mejor instrumento para crear potentes aplicaciones en Internet. Por primera vez, puede trabajar en
un único entorno para crear, desarrollar y administrar sitios Web y aplicaciones en Internet
rápidamente.
Instructor: Juan José Pérez González Asistente: Juan Armado Pérez Lara Página 1 de 61
Comenzando con dreamweaver 8: El entorno de trabajo.

Para comenzar a trabajar con el programa, hacemos clic en inicio, pulsamos todos los
programas y elegimos Macromedia y ahora elegimos Macromedia dreamweaver 8 como esta en la
figura:
Ahora que ya esta cargado el programa nos aparecerá la ventana de configuración del
espacio de trabajo, esta ventana aparece cuando usted carga por primera dreamweaver 8, en esta
seleccionaremos el espacio de trabajo que deseemos diseño o código.
Después de que haya elegido un espacio de trabajo que iniciará cada vez que usted cargue
dreamweaver 8, usted puede cambiar este espacio de trabajo en el menú Ventana > Diseño del
espacio de trabajo. Como se muestra en la figura, modificando el espacio de trabajo que deseemos
programador (código), diseñador, pantalla doble.
El primer elemento que destaca en el entorno de trabajo de dreamweaver 8 es la ventana de

Bienvenida, que ofrece las opciones de abrir un documento reciente, crea un documento nuevo,
crear un documento a partir de ejemplos, también tiene las opciones de ver un tour de dreamweaver
donde explica las características de este, aprenda sobre recursos donde explicara más sobre cada
recurso que ofrece dreamweaver, y buscar un entrenamiento autorizado.
Esta ventana se puede deshabilitar dando clic en no mostrar esta ventana otra vez,
posteriormente si usted la quiere volver activar tendrá que ir a la ventana de preferencias siguiendo
los siguientes pasos dar clic en el menú Edit > Preferencias como se muestra en la figura,
seleccionar la casilla mostrar página de inicio.
La ventana de Entorno de Trabajo.
Barra de herramientas documento
Barra de menús Grupo de paneles

Barra de titulo Barra insertar
Barra de estado Panel de

Ventana documento archivos
Inspector de propiedades
Selector de
etiquetas
Dreamweaver provee una ventana de todo en uno integrada. En el espacio de trabajo

integrado, todas las ventanas y paneles son integrados dentro de una sola ventana de aplicación.
En la ventana de entorno de trabajo tienes una barra de titulo, la barra de titulo despliega los
títulos de las páginas, y en paréntesis la dirección del nombre del archivo.
La Ventana Documento
La ventana Documento muestra lo que le ocurre a nuestro documento. Puedes seleccionar

cualquiera de las siguientes vistas:
Vista Diseñador es un entorno de desarrollo grafico visual, edición, y entornos de

aplicación rápidos. En esta vista, Dreamweaver se despliega completamente editable, con
representación visual del documento, similar a como se puede mirar en el explorador.
Vista programador (código) es un entorno de código a mano para escribir y editar en

HTML, Java Script, lenguaje de Servidor como PHP o ColdFusion Markup Language
(CFML), y cualquier otra clase de código.
Vista doble es un entorno de desarrollo gráfico y de código, la ventana documento se partirá

a la mitad mostrando la vista código y vista diseño en el orden mencionado.
En la ventana documento tienes el nombre de la pagina actual, después del nombre del
archivo, Dreamweaver despliega un asterisco si tienes cambios que aun no has guardado.
Cuando la ventana Documento es restaurada en todo el entorno de trabajo, esta no tiene un

titulo de barra, en este caso el titulo de la página y los archivos aparecen en el titulo de la barra de la
ventana de entorno de trabajo.
Adicionalmente, cuando la ventana Documento es maximizada, las pestañas de arriba del

área de la ventana documento muestran los nombres de los archivos de todos los documentos que se
encuentran abiertos. Para acceder al documento, dar un clic en la pestaña.
La Barra de Herramientas del Documento.
La barra de herramientas del Documento contiene botones que se muestran entre las
diferentes vistas de tu documento: Código y Diseño, y una vista total que muestra la Vista Código y
la Vista Diseño.
La barra de herramientas también contiene algunos de los comandos más comunes y

opciones relacionadas para ver el documento y transferirlo entre el sitio local y el remoto.
Las siguientes opciones aparecen en la barra de herramientas del Documento:
Vista Código: Despliega solo el código en la ventana Documento.
Vista Código y Diseño: Despliega la vista Código en parte de la ventana Documento y la

vista Diseño en otro parte. Cuando seleccionas esta vista combinada, la opción de Vista
Diseño esta disponible sobre la vista de opciones del menú.
Vista Diseño: Despliega solo el diseño en la ventana Documento.
Titulo del Documento: Puedes añadir un titulo para tu documento, para que se despliegue
en la barra de titulo del explorador. Si tu documento ya tiene un titulo, aparecerá en el
campo.
Sin Explorador/Verificar Errores: Habilita la verificación de tu compatibilidad de

explorador.
Marca de Validación: Valida lo que ocurre en el documento o una pestaña seleccionada.
Administrador de Archivos: Despliega el menú para administrar los archivos.
Vista Previa/Compilar en el Explorador: Muestra una vista previa o compilada de tu

documento en el explorador. Selecciona un explorador en el menú.
Actualizar la vista Diseño: Actualiza la vista diseño del documento después de hacer
cambios en la vista Código.
Opciones de Vista: muestra las opciones para la vista Código y Diseño, incluyendo que
vistas deben aparecer sobre la otra.
Ayudas Visuales: Le da diferentes ayudas visuales para diseñar sus páginas.
Vista código Vista diseño No hay errores de Validar formato

comprobación
Vista código Título del documento Opciones de
y diseño vista
Administrador de archivos Actualizar

vista diseño
Vista previa / depurar
en navegador Ayudas visuales
La barra de Estado.
La barra de estado esta bajo de la ventana documento y provee información adicional acerca de la
documentación que estas creando.
Selector de tags (etiquetas): Muestra la jerarquía de las pestañas agrupando la selección

escogida. Al dar clic en cualquier etiqueta se muestra la jerarquía de esta etiqueta y todo su
contenido. Dar clic en <body> para seleccionar el cuerpo entero del documento.
Herramienta Seleccionar: Para deshabilitar la herramienta mano y la herramienta Zoom.
Herramienta de Zoom y el menú desplegable de Zoom: Te permite Agrandar el nivel de

visualización para tu documento.
Menú desplegable de Tamaño de la Ventana: (visible solo en Vista Diseño) te permite

cambiar el tamaño de la ventana Documento para predeterminar nuestras dimensiones. Y
para estimar el tiempo de descarga de la página, incluyendo todos los archivos dependientes
como imágenes y otros archivos multimedia.
Inspector de Propiedades
El Inspector de Propiedades permite examinar y editar las propiedades más comunes de

elementos seleccionados en la página, como son texto, o un objeto insertado tal como una imagen,
tabla, frames, div.
El contenido del inspector de propiedades varía dependiendo sobre que elemento se haya
seleccionado. Por ejemplo, si seleccionas una imagen en la página, el inspector de propiedades
cambia las propiedades que mostrara para la imagen.
El Inspector de Propiedades esta en el espacio de trabajo por default, pero puedes quitarlo si
lo deseas. O puedes hacer que este flotando por el espacio de trabajo.
Panel de Archivos.
Puedes usar el Panel de Archivos para ver y administrar los archivos en tu sitio de
Dreamweaver.
Cuando ves tus sitios, archivos o carpetas en el Panel de Archivos, puedes cambiar el
tamaño de área de vista, o bien expandir o colapsar el Panel de Archivos. Cuando el Panel de
Archivos es expandido despliega los contenidos de un sitio local, el sitio remoto, o examina el
servidor como una lista de archivos. El Panel de Archivos puede también desplegar un mapa visual
del sitio.
Para los sitios de Dreamweaver, puedes usar el Panel de Archivos para los cambios de vista-
de local a remoto- por default aparece el panel colapsado.
Configuración de un sitio y los archivos de un proyecto.
Aprenda sobre los sitios de Dreamweaver
En Dreamweaver, el término "sitio" puede referirse a un website o a una localización de

almacenaje local para los documentos que pertenecen a un website. Esto último es lo que usted
necesita establecer antes de que usted comience a construir su website. Un sitio de Dreamweaver
organiza todos los documentos asociados a su website y le deja seguir y mantener acoplamientos,
manejar archivos, compartir archivos, y transferir sus archivos del sitio a un Web Server
Un sitio de Dreamweaver consiste en tres partes, dependiendo de su ambiente de

computadora y del tipo de website que usted está desarrollando:
La carpeta local es su directorio de funcionamiento. Dreamweaver refiere a esta carpeta

como su sitio local. La carpeta local es generalmente una carpeta en su disco duro.
La carpeta remota es donde usted almacena sus archivos, dependiendo de su ambiente,

para probar, la producción, la colaboración, y la publicación. Dreamweaver refiere a esta
carpeta como su sitio remoto. La carpeta remota es una carpeta en la computadora que está
funcionando su Web Server. La computadora que funciona el Web Server es a menudo
(pero no siempre) la computadora que hace su sitio público disponible en la red.
La carpeta para las páginas dinámicas (carpeta de prueba del servidor) es la carpeta
donde Dreamweaver procesa las páginas dinámicas (ASP, JSP, PHP). Esta carpeta es a
menudo la misma carpeta que la carpeta remota. Usted no necesita preocuparse de esta
carpeta a menos que usted esté desarrollando un uso de la red. En esta configuración se da la
opción de proteger y desproteger archivos estas opciones se utilizan cuando se esta haciendo
un proyecto WEB colectivo o en grupo.
Usted puede instalar un sitio de Dreamweaver usando el ayudante de la definición del sitio,
que le dirige en el proceso de la operación, o usando los ajustes avanzados del sitio, que le dejaran
instalar carpetas local, remota, y la carpeta de prueba individualmente, como fuera necesario.
Esta configuración esta disponible en menú Sitio > Nuevo sitio / administrar sitio o bien en
el panel de archivos seleccionar el combobox examinador de carpetas dando clic en la opción
administrar sitios.
Ahora nos aparece el cuadro de dialogo administrar sitios, donde las opciones de nuevo y
modificar nos proporcionara la ayuda necesaria para crear nuestro sitio o bien editarlo, también nos
da las opciones de quitar sitio, duplicarlo, exportar e importar.
Después de que hayamos seleccionado alguno de estos botones nos aparcera la siguiente
ventana de Definición de Sitio.
Donde nos muestra las características a configurar para nuestra carpeta local, datos de
carpeta remota, servidor de prueba, mapa de diseño de sitio, entre otros.
Si usted ha elegido proteger / desproteger archivos en los datos de carpeta remota, aquí
mismo en el menú sitio podrá dar un informe a sus colegas que verán al intentar obtener un archivo
que esta protegido.
Después de que usted haya configurado las propiedades o categorías de su sitio web, usted
podrá utilizar todas las herramientas que le ofrece dreamweaver 8
El Texto
La barra de insertar texto: Te permite insertar varios formatos de textos como párrafos,
cabeceras, caracteres, negrita, itálica, etc.
Botón negrita Comillas en vérsatela
Editor de etiquetas Botón párrafo

(tags) fuente Encabezados
Botón itálica
Listas desordenadas, Botón abreviación
ordenadas, elementos
de lista
Caracteres
Las características del texto seleccionado también pueden ser definidas a través del menú
Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a
través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del
menú Texto.
Formato
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser
encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos dentro
de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido
escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno,
pero al establecer el formato preformateado se respetará que hayan varios espacios en lugar de
solo uno.
Fuente
Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de

una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su
ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no
tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvética,
Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvética.
Tamaño
Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades,
en píxeles, centímetros, etc.
Color
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las
propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni
aquí, el color del texto por defecto será el negro.
Estilo
Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través

del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en
el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen
subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un
vínculo.
Alinear
A través de estos botones es posible establecer la alineación del texto de una de estas
cuatro formas distintas: izquierda, centrada, derecha y justificada.
Lista
Estos botones permiten crear listas con viñetas o listas numeradas.
Sangría
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie
de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría
a la izquierda del texto.
Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con
viñetas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista,
simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a
través del inspector de propiedades, o a través del menú Texto.
La lista con viñetas (desordenada) se selecciona a través del botón , mientras que la
lista numerada (ordenada) se selecciona a través del botón .
Ejemplo de lista numerada (ordenada):
1. Preparar la mochila
1. Sacar los libros de ese día
2. Introducir los libros del día siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador
Ejemplo de lista con viñetas (desordenada):
• Perro
• Gato
• Aves
o Canario
o Loro
• Hamster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es
necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de
la lista anidada.
A través del menú Texto, opción Lista, es posible acceder a las propiedades de la lista
seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar
de la lista para que se active este submenú.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con
viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de
las listas ordenadas, el número por el que comenzará el recuento.
Ejemplo de texto:
Hola esta es una prueba de manipulación de texto
1. Introducción
• Misión de la empresa
• Visión de la empresa
2. Contenido
• Sistema de control administrativo
o Ingreso a inventario
o Registro de entrada
3. Marco teórico
• Lenguajes de programación
• Base de datos
• SQL
Que onda como estas (centrado)
Si aquí estoy todavía (izquierda)
En este curso veremos herramientas básicas de dreamweaver 8 (justificado)
Imágenes
En este tema vamos a ver cómo insertar imágenes en un documento. También veremos
cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que
ayudan a mejorar la apariencia de nuestras páginas.
Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten
mejorar su apariencia, o dotarla de una mayor información visual.
Existen una serie de formatos de imagen más recomendables que otros para ser
introducidos en una página web.
Formatos de imagen
Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos
estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que
no son compatibles con algunos navegadores.
Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor
calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria.
Vamos a ver un poco más sobre estos formatos:
Formato GIF:
Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas
de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que
permiten contener transparencias y animación.
Formato JPG:
Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores,
pero el tamaño de la imagen es mayor y tarda más en descargarse.
Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser
visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.
Si introduces una imagen BMP en Dreamweaver, te aparecerá un cuadrado gris en su

lugar. La imagen solo se mostrará correctamente en el navegador.
Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de

tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc.
Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la
hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las
imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.
Insertar una imagen
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después
de esto, ya es posible seleccionar una imagen a través de la nueva ventana.
En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del
sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicación
diferente, la imagen puede no verse al estar siendo buscada en la ubicación anterior.
Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el

campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha
sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.
Cambiar el tamaño de una imagen:
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de

tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la
visualización de la imagen dentro de la página.
Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo
podría quedar modificándola desde un editor externo, como Fireworks.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de
Dreamweaver y modificamos su tamaño de varias formas diferentes:
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones
puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamaño:
1. Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los
recuadros negros que aparecen alrededor de la imagen.
2. La otra es a través de inspector de propiedades, cambiando los campos An

(anchura) o Al (altura). Estos campos aparecerán en el inspector cuando este seleccionada alguna
imagen.
Hay que tener en cuenta que para cambiar la alineación de la imagen hay que hacerlo a través del
campo Alinear del inspector de propiedades. La alineación de las imágenes ofrece más
posibilidades que la del texto: superior, medio, medio absoluta, línea de base, etc.
Imagen de sustitución. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este
tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de
distintas páginas.
Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción
Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de
sustitución.
Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa,
la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras
debidas a la descarga de la imagen cuando llega el momento de que aparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que
aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en
el navegador.
El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a
través del campo Alt del inspector de propiedades de la imagen seleccionada.
La barra de Insertar Común.
La barra de Insertar contiene botones para crear e insertar objetos como tablas, capaz e
imágenes.
Los botones son organizados dentro de varias categorías, pueden elegirse sobre el lado
izquierdo de la barra de Insertar. Las categorías adicionales aparecen cuando en el código del
documento ocurren cambios, como en los documentos ASP o CFML.
• Cuando Dreamweaver comienza, muestra la ultima categoría con la que trabajaste.

• Algunas categorías tienen botones con menús desplegables.
• Cuando seleccionas una opción de un menú desplegable, comienza con la acción por default
del botón.
La barra de Insertar esta organizada en las siguientes categorías:
Habilita la creación e inserción de los objetos más comúnmente usados, como imágenes y
tablas, hipervínculos, comentarios, medios, etc.
Hipervínculos
Hipervínculos son enlaces a otras páginas del proyecto o Internet, incluso a archivos
contenidos en nuestro sitio web.
Los hiperenlaces en dreamweaver son muy sencillos de aplicar, tan solo tienes que
seleccionar el objeto, o texto, e ir al menú insertar > hipervínculos.
Nos mostrara el siguiente cuadro de dialogo donde usted escogerá la pagina para dar
el enlace, o bien para un archivo para su previa descarga.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Pasos para crear un hipervínculo:
1. Sitúe el punto de inserción en el documento donde desea que aparezca el hipervínculo.

2. Realice una de estas operaciones para mostrar el cuadro de diálogo Insertar hipervínculo
• Elija Insertar> Hipervínculo.

• Seleccione la ficha Común de la barra Insertar y, a continuación, haga clic en el
botón Hipervínculo.
Aparecerá el cuadro de diálogo Hipervínculo.
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de
una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Pasos para crear un hipervínculo:
1. Sitúe el punto de inserción en el documento donde desea que aparezca el hipervínculo.

2. Realice una de estas operaciones para mostrar el cuadro de diálogo Insertar hipervínculo
• Elija menú Insertar> Hipervínculo o

• Seleccione la ficha Común de la barra Insertar y, a continuación, haga clic en el
botón Hipervínculo.
Aparecerá el cuadro de diálogo Hipervínculo.
3. Seleccione las opciones deseadas en el cuadro de diálogo.
** En el campo Texto, introduzca el texto que deberá aparecer como hipervínculo en el

documento.
** En el cuadro de texto Vínculo, escriba el nombre del archivo de destino del vínculo o
haga clic en el icono de carpeta para localizar y seleccionar un archivo de imagen.
** En el campo Destino del menú emergente Destino, elija la ventana en la que deberá
abrirse el archivo.
• _blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre.
• _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana
del marco que contiene el vínculo. Si el marco que contiene el vínculo no está
anidado, el archivo vinculado se cargará en la ventana completa del navegador.
• _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este
destino es el predeterminado, por lo que normalmente no es preciso especificarlo.
• _top carga el archivo vinculado en la ventana completa del navegador, quitando así
todos los marcos.
** En el campo Índice de fichas, introduzca un número para el orden de fichas.
** En el campo Título, escriba un título de página para el hipervínculo.
** En el campo Clave de acceso, introduzca un equivalente de teclado (una letra) para

seleccionar el hipervínculo en el navegador.
4. Haga clic en Aceptar.
Crear un hipervínculo.
Hipervínculo a la página de Yahoo o Google la que sea de su agrado.
Pasos:
1. Escribir un texto significativo ala pagina.
2. Crear el hipervínculo.
Multimedia
La barra insertar Elementos Flash: Te permite insertar elementos de Macromedia Flash.
Seleccionamos un archivo que se encuentra fuera del sitio y le damos clic a Aceptar.
Y Macromedia Dreamweaver nos va a hacer una pregunta que si lo deseamos a agregar a

nuestra carpeta local de nuestro sitio y le damos clic al botón de Si.
Por cuestiones de organización es recomendable crear una carpeta que se llame “mis flash”
para que se guarden este tipo de archivos. La seleccionamos, le damos clic y clic en el botón de
guardar.
El inspector de propiedades de las películas Flash es prácticamente igual que el de los

botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualización
de la película
La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el
principio.
La otra es la opción Rep. autom. (Reproducción automática), que al estar marcada indica
que nada más cargarse la página comenzará a reproducirse la película Flash.
Si esta opción no estuviera marcada, se mostraría únicamente el primer fotograma de la

película.
Sonidos
El incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más
atractiva. Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o
desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan
desactivarlo.
Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3, el WAV
y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden
utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello
sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar,
Medía, opción Plug-in.
Seleccionamos un archivo que se encuentra fuera del sitio y le damos clic a Aceptar

Crear una carpeta que se llame “mi música” para que se guarden este tipo de archivos. La
seleccionamos, le damos clic y clic en el botón de guardar.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se

mostrarán los controles de audio, mediante Al y An.
En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los

controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la
página, pero que no se muestren los controles de audio, los campos Al y An deben valer cero.
Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen

solamente una vez. Estos valores no pueden cambiarse a través del inspector de propiedades, pero sí
a través del código.
Pero para que no se reprodujera automáticamente se ha añadido autostart="false", y para que

se reprodujera continuamente se ha añadido loop="true".
Modificar código original a:
Si quieres poner música de fondo en una página web, sin que aparezcan los controles de
audio, puedes escribir este código directamente en la vista Código.
Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidir cuantas veces
quieres que se reproduzca, 1, 2, 3... (Con -1 se reproduce de modo continuo).
Videos
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar,
Medía, opción Plug-in.
Seleccionamos un archivo que se encuentra fuera del sitio y le damos clic a Aceptar

Crear una carpeta que se llame “mi videos” para que se guarden este tipo de archivos. La
seleccionamos, le damos clic y clic en el botón de guardar.
El inspector de propiedades para los archivos de audio insertados de esta forma es el mismo
que el de los archivos de video, ya que ambos se insertan como Plug-in.
Los videos también se reproducen automáticamente al cargarse la página, y se reproducen

solamente una vez. Estos valores pueden cambiarse a través del código, del mismo modo que en el
caso de los archivos de audio, añadiendo autostart="false" y loop="true".
Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga
instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del
inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vídeo) que ha
de reproducirse.
En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse
en el campo URL plg una página en la que pueda encontrarlo.
Botones Flash
Existen otra serie de imágenes especiales, similares a los rollovers, que suelen utilizarse
para crear menús, como pueden ser los botones Flash.
Aquí tienes un ejemplo de botón Flash. Sitúa el puntero sobre él para ver qué es lo que
ocurre.
Para insertar un botón Flash hay que dirigirse al menú Insertar, Media, a la opción Botón
Flash, aparecerá el siguiente cuadro de diálogo:
A través de Estilo puede seleccionarse uno de los distintos formatos de botón que se
ofrecen.
En esta misma ventana hay que especificar también el Texto que mostrará el botón (Texto
del botón:), así como el nombre con el que será guardado (Guardar como:) y el vínculo asociado
(Vinculo: y Destino:).
Es preferible guardar los botones Flash en el mismo directorio que los documentos
HTML, en lugar de la carpeta destinada a almacenar imágenes, ya que de no ser así es posible que
al intentar asignar un vínculo dentro del propio sitio, Dreamweaver no permita guardar el botón
con ese vínculo en una ubicación diferente de la de dicho documento.
Recuerda que los botones deben guardarse con la extensión SWF.
A través del inspector de propiedades del botón Flash es posible editar de nuevo sus
atributos:
Puede volver a abrirse el cuadro de diálogo anterior pulsando sobre el botón Editar, y a
través del botón Reproducir es posible probar el funcionamiento del botón Flash desde
Dreamweaver, sin la necesidad de tener que abrir la página con algún navegador.
Después de haber probado el funcionamiento del botón Flash, debe pulsarse de nuevo
sobre el botón Reproducir (que habrá cambiado por el botón Detener)
Texto Flash
El texto Flash es similar a un rollover, pero en lugar de intercambiar imágenes intercambia

el color del texto.
Para insertar texto Flash hay que dirigirse al menú Insertar, Media, a la opción Texto
Flash.
En la nueva ventana, además del texto, el vínculo y el nombre con el que será guardado el
texto, hay que especificar el color original y el de sustitución.
Aquí tienes un ejemplo de texto Flash. Sitúa el puntero sobre él para ver qué es lo que
ocurre.
El inspector de propiedades del texto Flash es igual que el de un botón Flash.
Barra de navegación
Una barra de navegación es un conjunto de imágenes que se utilizan como opciones de

menú para navegar dentro de una web. La barra de navegación te permite definir unos botones
para ir a diferentes páginas pero de forma que cambie el aspecto del botón según muevas el ratón
sobre él y según sea el último botón pulsado.
Una página web solo puede contener una única barra de navegación.
Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos de
imagen, a la opción Barra de navegación.
En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de los
botones, el vínculo para cada uno de ellos, etc.
A través de los botones superiores de la ventana es posible crear y eliminar botones de la

barra de navegación, así como reordenarlos. Con se crea un botón nuevo, con se elimina el
botón seleccionado, y con se puede modificar la posición del botón seleccionado.
En Imagen Arriba pones la imagen que quieres mostrar inicialmente

(cuando todavía no se ha hecho clic).
En Sobre imagen, pones la imagen que quieres mostrar cuando el

usuario mueva el puntero sobre el botón y éste estaba mostrando la
imagen asignada en Imagen Arriba.
En Imagen abajo, pones la imagen que quieres mostrar después de que

el usuario haya hecho clic en la imagen.
En Sobre mientras imagen abajo, pones la imagen que quieres mostrar

cuando el usuario mueva el puntero sobre el botón y éste estaba
mostrando la imagen asignada en Imagen Abajo.
De esta forma, si asignas imágenes distintas puedes saber cuál es el

último botón que ha sido pulsado (el que tiene Imagen Abajo).
Aquí tienes un ejemplo de barra de navegación. Para su creación se han utilizado las
mismas imágenes para todos los botones, pero como puedes ver, en el botón del medio aparece
inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opción Mostrar
"Imagen abajo" inicialmente estaba activa para este botón. Sitúa el puntero sobre los distintos
botones, y pulsa sobre alguno, para ver qué es lo que ocurre.
El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos está
activo, cosa que con un simple rollover no puede hacerse.
A través de la opción Insertar es posible especificar si los botones de la barra de

navegación van a aparecer de forma horizontal o vertical dentro de la página.
Tablas
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las
tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y
otra serie de cosas que sin las tablas serían imposibles de realizar.
Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al
mejorar notablemente las opciones de diseño.
Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A
continuación se muestra un ejemplo de una tabla:
Insertar una tabla:
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
• En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la
tabla, así como el Ancho.
• El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y
otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de
la ventana del navegador en la que se visualice la página, en cambio, el ancho en
Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará
al tamaño de la ventana del navegador, esto permite que los usuarios que tengan
pantallas grandes, aprovechen todo el ancho de pantalla.
• Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le
asigna uno (1).
• Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de
éstas.
• Espacio entre celdas indica la distancia entre las celdas de la tabla.
• Encabezado pone un encabezado a la tabla.
EJERCICIO. Crear una tabla.
Agregar una tabla con el siguiente formato
• 2 columnas
• 5 filas
• 400 píxeles de ancho de tabla
• Borde 1
• Espacio entre celdas 1
Modificar Tablas
A continuación, se modificará la disposición de la tabla. Se añadirá filas y columnas a la

tabla y se aprenderá a combinar y dividir celdas para crear la disposición de página deseada.
1. Haga clic en la celda superior izquierda y arrastre el puntero del ratón hasta la última fila
para seleccionar la columna izquierda.
2. Seleccione Modificar > Tabla > Insertar columna
3. Haga clic en la celda inferior izquierda y seleccione Modificar > Tabla > Insertar filas o
columnas.
Aparece el cuadro de diálogo Insertar filas o columnas.
Sugerencia: Seleccione la opción Insertar filas o columnas si desea añadir un número

concreto de filas o columnas o para elegir el lugar en el que debe insertarse una fila o una columna
dentro de la tabla.
Combinar o Dividir Celdas
Al igual como en Excel también se pueden combinar o dividir celdas, este se puede
hacer desde el inspector de propiedades o del menú modificar > tablas> combinar o
dividir celdas dependiendo de la selección de tabla que haya seleccionado.
O bien esto también se puede hacer desde el inspector de propiedades, teniendo una
selección ya se de celdas de una tabla.
Ejemplo:
• 4 columnas
• 4 filas
• 400 de píxeles de ancho de tabla
• Borde1
• Espacio entre celdas 1
Ahora modificaremos esta tabla con las siguientes especificaciones:
• Seleccionar las primeras 4 columnas de la primera fila

• Dar clic en menú modificar > tablas > combinar celdas.
• En el inspector de propiedades dar clic en negrita, y escribir
ejemplo de modificación de tablas.
• Insertar las siguientes palabras en las siguientes columnas
o columna 2 fila 2 Es,
o columna 2 fila 3 mos_,
o columna 2 fila 4 ficando,
o columna 3 fila 2 ta,
o columna 3 fila 3 modi,
o columna 3 fila 4 _celdas.
• Seleccionar las celdas modificadas, y dar clic en menú modificar
tablas> combinar celdas.
Tendremos el siguiente resultado:
Otro sencillo ejemplo:
• Insertar una tabla de 3 columnas por 6 filas.

• Seleccionar la primara fila completa, dar clic en menú modificar > combinar celdas, e
insertar el siguiente texto DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE.
• Seleccionar las celdas de las filas 2 y 3.
• De estas celdas que acabas de dividir seleccionar la primera celda y dar clic en menú
modificar > tablas > combinar celdas, escribir PERRO.
• Las celdas que están por debajo de la celda que acabamos de modificar escribir
PEQUEÑO Y GRANDE respectivamente en cada celda.
• Ahora seleccionar las 2 primeras celdas de las filas 2 y 3 y combinarlas, insertar
DIFERENCIAS, hacer lo mismo con las del lado derecho y escribir HOMBRE.
• En las celdas 3, 4 y 5 escribir Duración crecimiento, Tiempo de gestación, Duración de
vida del pelo / cabello, cada una en la celda correspondiente.
• Dividir la celda 4 de la fila 3 y dividirla, e ingresar 10 meses, 18 a 24 meses
respectivamente en cada celda.
• En las celdas debajo de la que acabamos de modificar escribir lo siguiente 58 a 63 días,
1 ano respectivamente.
• Combinar las celdas de la columna 3 y filas 2 y3, y escribir HOMBRE.
• En las celdas debajo de la que acabamos de modificar escribir lo siguiente 16 años, 9
meses, 2 a 7 años.
• Ver los resultados esperados.
Capas (layers)
• Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la
página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y
solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
• Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el
recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.
• También pueden ser redimensionadas pulsando sobre los recuadros negros, y

arrastrándolos hasta conseguir el tamaño deseado.
• Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones
flash, y todos los elementos que puede contener un documento HTML.
• La capa no solo aparece representada por el recuadro anterior, sino que también aparece
la imagen en el documento, cuando está abierto en Dreamweaver.
• Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina
también la capa.
Insertar una Capa
• Las capas pueden insertarse en una página a través del menú Insertar, Capa.
• Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que
seleccionarla primero.
• Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono
correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo
documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fácil
seleccionar la deseada a la primera.
• Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a

través de la pestaña Capas del panel Diseño, que puede abrirse a través del menú
Ventana opción Capas. Si la opción Capas no te aparece directamente en este menú,
posiblemente esté dentro de la opción Otros. También puedes abrir el panel pulsando F2.
• En dicho panel aparecen los nombres de todas las capas que existen en el documento
actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el
panel.
Formato de una capa.
Las propiedades de la capa se especifican a través de su inspector de propiedades.
• ID de capa es el nombre de la capa. También puede ser cambiado a través del panel
Capas, haciendo doble clic sobre él.
• Iz y Sup indican la distancia en píxeles que hay entre los límites izquierdo y superior del
documento y la capa.
• An y Al indican la anchura y la altura de la capa.
• Índice Z es el número de orden de colocación de las capas. Este valor también puede
cambiarse a través del panel Capas. Una capa será solapada por aquellas capas cuyo
índice Z sea mayor que el suyo.
• Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
o Default (visibilidad según el navegador).
o Inherit (se muestra la capa mientras la página a la que pertenece también se esté
mostrando),
o Visible (muestra la capa, aunque la página no se esté viendo) y
o Hidden (la capa está oculta).
• La visibilidad también puede cambiarse a través del panel Capas, pulsando sobre la
imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.
• A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la
capa.
• Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador cuando el

contenido excede el tamaño especificado de la capa.
• Visible indica que el contenido adicional aparece en la capa. La capa se amplía para
darle cabida.
• Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.
• Scroll (desplazamiento) especifica que el navegador deberá añadir barras de

desplazamiento a la capa tanto si se necesitan como si no.
• Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa
cuando sean necesarias (es decir, cuando el contenido de la capa supere sus límites).
Disposición (layout)
En la parte inferior de este panel flotante se encuentran los botones para cambiar entre el
Diseño Layout y el Estándar.
Barra de insertar Diseño: Te permite que insertes tablas, capaz y tramas. Puedes elegir los
tipos de vistas de las tablas.
Modo tablas
Botón dibujar capa expandidas Frames (marcos)
Modo estándar
Modo diseño
Botón insertar div
Botón tabla
Tabla diseño (solo disponible

en modo diseño) Insertar fila
arriba/debajo Datos de
Dibujar celda de diseño (solo tabla
disponible en modo diseño) Insertar celda
izquierda/derecha
Podemos trazar celdas dentro de la tabla. Incluso podemos trazar celdas fuera de una tabla y
el programa genera la tabla que contiene la celda.
Podemos fácilmente modificar las dimensiones de las celdas pulsando sobre la línea y
manteniendo pulsado el botón del ratón nos movemos.
En nuestro ejemplo hemos modificado las celdas para que todas tengan un ancho de 100, tal
como se muestra.
Una forma rápida para crear varias celdas es manteniendo pulsada la tecla Control "Ctrl".
Muchas páginas se organizan mediante tablas dentro de tablas. Podemos insertar una tabla
dentro de otra para organizar el contenido y facilitar el diseño de la página.
Comportamientos
En este tema vamos a ver las características básicas de los comportamientos, así
como un par de ejemplos de entre sus posibles aplicaciones.
• Los comportamientos son acciones que suceden cuando los usuarios realizan
algún evento sobre un objeto.
• Los comportamientos no existen como código HTML, se programan en
JavaScript. Dreamweaver permite insertarlos a través del panel
Comportamientos, por lo que no es necesario escribir ninguna línea de
código JavaScript para programarlos.
• El panel Comportamientos se puede abrir a través del menú Ventana, opción
Comportamientos. También pulsando Mayús+F3.
• En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar
eventos para elegir una versión de la lista de navegadores.

Es posible definir ciertos comportamientos por ejemplo que al acceder a una página se
active una ventana flotante.
• Pulsamos sobre Window en la barra superior.
En el menú que aparece pulsamos sobre Behaviors o comportamientos
• Nos aparece el cuadro que nos permite definir las acciones.
• Activar una ventana flotante con un mensaje. En nuestro ejemplo escribimos la

palabra Pulsar y la marcamos
• En el Cuadro de Comportamientos pulsamos sobre el botón + para activar las

opciones.
• Entre las opciones que aparecen seleccionamos una ventana de Mensaje.
• Aparece el Cuadro en el que escribimos el mensaje que aparece en la ventana

flotante.
• Pulse sobre "Pulsar" para comprobar el resultado de nuestro ejemplo.
• Tenemos otras posibilidades entre las acciones. A continuación vemos otro

ejemplo.
• Y seleccionamos el enlace a una página por ejemplo AulaFacil.com. Escribimos

la dirección en el Cuadro que aparece.
• Y definimos que tiene que hacer el visitante para que se active la nueva ventana.
Pulsamos sobre el botón tal como muestra la siguiente imagen.
• Entre las opciones seleccionamos "onclick" de forma que la nueva ventana se activa al
pulsar.
• Pulsando sobre la siguiente frase se muestra el resultado.
Al pulsar se abre un nuevo navegador
HTML
La barra insertar HTML. Te permite insertar tags (etiquetas) en HTML para reglas
horizontales, cabeceras de contenido, frame y scripts.
La barra de herramientas de Codificación.
La barra de codificación contiene botones que te permiten estandarizar varios condiciones

de código, como colapsar y expandir selecciones de código, resaltando código invalido, aplicando y
removiendo comentarios, código independiente, e insertando código usado recientemente. La barra
de herramientas esta visible solo en Vista Código y aparece verticalmente sobre la parte izquierda
de la Ventana Documento.
Marcos (frames)
Cuándo utilizar marcos

El uso más común de los marcos es la navegación. Una página Web puede utilizar un marco
para albergar el menú de navegación y otro marco para el contenido de la página. Dado que el menú
de navegación se encuentra en un marco, los visitantes pueden hacer clic en un elemento del menú y
el contenido aparecerá en el marco de contenido sin que cambie el menú de navegación. De este
modo, el visitante podrá orientarse perfectamente en el sitio.
Mediante la utilización de Marcos o Frames podemos dividir una página en varias áreas. De esta
forma podemos gestionar de forma independiente las distintas zonas. Permitiendo que una parte
cambien en función de los enlaces que pulsamos mientras que otras permanecen fijas. Por ejemplo
queremos que a la izquierda se muestre un índice de enlaces que permanezca mientras que el resto
de la página cambia.
1. Activamos el panel de marcos. Puede que se encuentre ya activada, si no así de clic en menú
ventana > marcos
2. Cambiamos la barra de insertar a barra diseño. Y seleccionamos el menú de Marcos o

Frames. Aparece un menú que nos permite seleccionar el Marco deseado. En nuestro
ejemplo elegimos la primera opción para tener un marco vertical a la izquierda Y aparece la
página dividida en dos partes tal como se muestra a continuación.
La imagen anterior nos muestra la página dividida entre el marco de la izquierda y el resto
de la página. Podemos modificar el ancho del marco de forma sencilla pulsando sobre la línea de
división y manteniendo el botón pulsado nos movemos.
Al crear el marco anterior se generan tres ficheros o documentos, el que contiene el marco,
el resto de la página y un documento que contiene la estructura de la página. Si creamos dos marcos
se generan cuatro ficheros, el que contiene la estructura, dos ficheros de marcos y otro que contiene
el resto de la página. En la siguiente imagen se muestra el botón que genera dos marcos uno
superior y otro a la izquierda.
Podemos modificar las características del marco en el inspector de propiedades. En el

siguiente ejemplo hacemos visible la división, definimos el tamaño de la línea de separación y
seleccionamos el color rojo para la separación. En Borders cambiamos a si, en Ancho de borde
ponemos 1 y en color de borde seleccionamos negro.
Y en la vista de diseño se verá como se muestra en la siguiente imagen.
Al definir un marco se genera un fichero que contiene la estructura del marco y otro fichero
por cada parte en la que se divide la página. En nuestro primer ejemplo seleccionamos un marco a
la izquierda por lo que se generan tres ficheros uno que contiene la estructura, otro el marco
izquierdo y otro la zona principal de la página.
Una vez hemos añadido los elementos deseados al marco y al resto de la página es preciso
guardar los ficheros.
Podemos guardar los ficheros "uno a uno"
• Pulsamos Archivo o "File" en la Barra superior

• Pulsamos sobre Guardar Marco o "Save Frames"
• Podemos guardar todos los ficheros generados a la vez.

• Pulsamos Archivo o "File" en la Barra superior.
• Y seleccionamos Guardar Todos los Marcos.
Nos aparece el Cuadro Guardar. Seleccionamos el directorio donde guardar los ficheros.
Lo normal es guardar los ficheros en el directorio que hemos definido anteriormente como el Sitio
para la Web. Es importante recordar que si guardamos los ficheros en un directorio del disco duro y
luego los movemos, copiándolos en otro, puede afectar a los enlaces.
Nos aparece por defecto un nombre de archivo en la parte inferior del Cuadro. Lo normal es
borrarlo y sustituirlo por el nombre que deseemos para ese marco.
En nuestro ejemplo el nombre que ponemos al fichero que contiene la estructura es Marco1,
tal como se muestra a continuación.
Panel de Estilos CSS.
Que es CSS
Hojas de estilo en cascada (CSS) son una colección de reglas de formato que controlan la
apariencia de contenido en una página Web. Cuando usted use CSS para dar formato a una pagina,
usted separa el contenido de presentación. El contenido de su pagina, el código HTML, reside en el
archivo mismo de html, mientras las reglas CSS que definen la presentación del código reside en
otro archivo (en una hoja de estilo externa) o en otra parte de código en el documento HTML
(usualmente en la sección <head>). Con CSS usted tiene flexibilidad y control sobre la apariencia
exacta de su página, de la colocación exacta de la disposición a las fuentes específicas y a los
estilos.
El CSS le deja controlar muchas propiedades que no se puedan controlar con el HTML solo.
Por ejemplo, usted puede especificar diferentes tamaños de fuente y unidades (píxeles, puntos, y
otros) para el texto seleccionado. Usando el CSS para ajustar tamaños de fuente en píxeles, usted
puede también asegurar un tratamiento más constante de su disposición de página y aspecto en
navegadores múltiples.
Una regla de formato CSS consiste en dos partes, el selector y la declaración. El selector es
un termino (por ejemplo P, H1, una clase de nombre, o una id) que identifican el elemento a darle
formato, y la declaración define que estilo de elemento es. En el siguiente ejemplo, H1 es el
selector, y todo lo que este entre llaves ({ }) es la declaración:
H1 {font-size: 16 píxeles;
Font-family: Helvética;
Font-weight: bold;}
La declaración consiste en dos partes, la propiedad (por ejemplo font-family), y el valor (por
ejemplo Hevéltica). El ejemplo anterior crea un estilo para la etiqueta (tag) H1: el texto para todos
las etiquetas H1 es de tamaño 16 n píxeles, y usa la fuente Hevéltica y negrita.
La conexión en cascada del término se refiere a su capacidad de aplicar estilos múltiples al

mismo elemento o pagina Web. Por ejemplo, usted puede crear una regla de CSS para aplicar color
y otra regla para aplicar márgenes, y los aplica ambos al mismo texto en una página. Los estilos
definidos " cascada" se conectan a los elementos en su página Web, creando en última instancia el
diseño que usted desea.
Una mayor ventaja de CSS es que puede actualizarlo fácilmente; cuando usted actualiza una
regla CSS en un lugar, el formato de todo el documento que usa la definición de estilo se actualizara
automáticamente al nuevo estilo.
Usted puede definir los siguientes tipos de reglas en Dreamweaver:
• Ajuste reglas CSS, también llamadas clase de estilos, aplique los atributos del estilo a
cualquier rango o bloque del texto. Todos los estilos empiezan con un periodo (.). Por
ejemplo, usted podría crear un estilo de la clase llamado red, ajustar el atributo color de
la regla a rojo, y aplicar el estilo a una porción del texto del párrafo.
• Las reglas de la etiqueta del HTML redefinen el formato para una etiqueta particular, tal
como p o h1. Cuando usted crea o cambia una regla del CSS para la etiqueta h1, todo el
texto ajustado a formato con la etiqueta h1 es inmediatamente actualizado.
• El selector de reglas del CSS (estilos avanzados) redefinen el formato para una
combinación particular de elementos, o para el otro selector forman según lo permitido
por CSS (por ejemplo, el td h2 del selector se aplica siempre que una cabecera h2
aparezca dentro de una célula de la tabla.) Los estilos avanzados pueden también
redefinir el formato para las etiquetas que contienen un atributo especifico id (por
ejemplo, los estilos definidos por # myStyle se aplican a todas las etiquetas que
contengan el id="myStyle del par atribuir-valor").
El panel de Hojas en Cascada permite probar las reglas y propiedades de las CSS en los
elementos seleccionados, o afectar las reglas y propiedades de un documento entero.
Puedes cambiar el tamaño de cualquier panel arrastrando los bordes entre las ventanas.
En todos los modos, el panel de Hojas en estilo de cascada despliega dos ventanas: una con
todas las reglas y una con todas las propiedades. En la ventana de todas las reglas despliega en una
lista de reglas definidas en el documento, o bien como todas las reglas definidas en la hoja de estilo
del documento. En la ventana de propiedades puedes editar la CSS seleccionando cualquier regla de
la ventana.
Los cambios que hagas en la ventana de propiedades son aplicados inmediatamente para la
vista previa con la que estas trabajando.

Dreamweaver 8

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver 8

Uploaded by

Copyright:

Available Formats

Dreamweaver 8 Simposium XVI

Etapas en la creación de la Web.

1. Planificar la creación de la Web. La primera etapa es pensar por anticipado y realizar un

4. Guardamos en el disco duro de nuestro ordenador los archivos creados. Es importante

5. Comprobamos que las páginas no tienen errores.

A) Utilizamos la función de verificación de Dreamweaver

6. Enviamos los ficheros al servidor de Internet. Mediante un programa FTP específico o

Dreamweaver es una herramienta de diseño de sitios o páginas Web profesionales ahora es

Comenzando con dreamweaver 8: El entorno de trabajo.

El primer elemento que destaca en el entorno de trabajo de dreamweaver 8 es la ventana de

La ventana de Entorno de Trabajo.

Barra de herramientas documento

Barra de menús Grupo de paneles

Barra de estado Panel de

Dreamweaver provee una ventana de todo en uno integrada. En el espacio de trabajo

La ventana Documento muestra lo que le ocurre a nuestro documento. Puedes seleccionar

Vista Diseñador es un entorno de desarrollo grafico visual, edición, y entornos de

Vista programador (código) es un entorno de código a mano para escribir y editar en

Vista doble es un entorno de desarrollo gráfico y de código, la ventana documento se partirá

Cuando la ventana Documento es restaurada en todo el entorno de trabajo, esta no tiene un

Adicionalmente, cuando la ventana Documento es maximizada, las pestañas de arriba del

La Barra de Herramientas del Documento.

La barra de herramientas también contiene algunos de los comandos más comunes y

Las siguientes opciones aparecen en la barra de herramientas del Documento:

Vista Código: Despliega solo el código en la ventana Documento.

Vista Código y Diseño: Despliega la vista Código en parte de la ventana Documento y la

Vista Diseño: Despliega solo el diseño en la ventana Documento.

Sin Explorador/Verificar Errores: Habilita la verificación de tu compatibilidad de

Marca de Validación: Valida lo que ocurre en el documento o una pestaña seleccionada.

Administrador de Archivos: Despliega el menú para administrar los archivos.

Vista Previa/Compilar en el Explorador: Muestra una vista previa o compilada de tu

Ayudas Visuales: Le da diferentes ayudas visuales para diseñar sus páginas.

Vista código Vista diseño No hay errores de Validar formato

Administrador de archivos Actualizar

Selector de tags (etiquetas): Muestra la jerarquía de las pestañas agrupando la selección

Herramienta Seleccionar: Para deshabilitar la herramienta mano y la herramienta Zoom.

Herramienta de Zoom y el menú desplegable de Zoom: Te permite Agrandar el nivel de

Menú desplegable de Tamaño de la Ventana: (visible solo en Vista Diseño) te permite

El Inspector de Propiedades permite examinar y editar las propiedades más comunes de

Configuración de un sitio y los archivos de un proyecto.

Aprenda sobre los sitios de Dreamweaver

En Dreamweaver, el término "sitio" puede referirse a un website o a una localización de

Un sitio de Dreamweaver consiste en tres partes, dependiendo de su ambiente de

La carpeta local es su directorio de funcionamiento. Dreamweaver refiere a esta carpeta

La carpeta remota es donde usted almacena sus archivos, dependiendo de su ambiente,

Botón negrita Comillas en vérsatela

Editor de etiquetas Botón párrafo

Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de

Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través

Estos botones permiten crear listas con viñetas o listas numeradas.

Ejemplo de lista numerada (ordenada):

Ejemplo de lista con viñetas (desordenada):

Hola esta es una prueba de manipulación de texto

• Sistema de control administrativo

Que onda como estas (centrado)

Si aquí estoy todavía (izquierda)

En este curso veremos herramientas básicas de dreamweaver 8 (justificado)

Si introduces una imagen BMP en Dreamweaver, te aparecerá un cuadrado gris en su

Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de

Insertar una imagen

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el

Cambiar el tamaño de una imagen:

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de