Universidad del Valle de México

PRACTICAS DE
DREAWEAVER
Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

Práctica 1 ENTORNO DE TRABAJO DE DREAMWEAVER

OBJETIVO: El alumno conocerá todos los elementos del entorno de trabajo de
Dreamweaver
INSTRUCCIONES: Señale y escriba el nombre de cada uno de los elementos que
conforman el área de trabajo en el esquema y posteriormente escriba en un listado
para que sirve cada uno de ellos

2
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

Práctica 1ª DEFINICIÓN DE UN SITIO

OBJETIVO: El alumno creará un Sitio Local en su Computadora.
INSTRUCCIONES: Complete el Diagrama de Flujo de una Página WEB, de un tema a
su elección.
Defina el Sitio o Site, con el nombre de su primer apellido y cree un fólder de almacenamiento
llamado Prácticas V (APELLIDO).

1. Completar el Diagrama de Flujo.

Utilizando los cuadros siguientes y en caso necesario dibujando otros, elabore el diagrama de flujo de una
página de un tema específico. Coloque el nombre de cada una de las paginas y el contenido que tendrá,
escriba en una lista los colores y elementos que utilizará esta pagina.

2. Cree un sitio local siguiendo los pasos que ya conoce en Dreamweaver

• Elije el menú Site (Sitio) > New site (Nuevo sitio).
• Aparecerá el siguiente cuadro de dialogo, en el cual tienes dos pestañas que te
permiten seleccionar si quieres utilizar el asistente o no
• Escribimos el nombre del sitio Práctica1
• Damos clic en Next>
• En la siguiente pantalla nos pregunta si deseamos trabajar con alguna tecnología
de ASP, ColdFUsion, etc, seleccionamos no y damos clic en Next>
• En el cuadro de diálogo siguiente tenemos tres opciones, la primera nos permite
editar los archivos en nuestra maquina y subirlos después a la red, la segunda nos
dice que si edita los archivos directamente en el servidor, y la tercera que los
modifica en el servidor utilizando FTP, nosotros utilizaremos la primera. Y en
donde nos pregunta el nombre de la carpeta en donde guardaremos nuestros
archivos, tecleamos la ruta. Damos clic en Next>

3
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

• La siguiente pantalla nos pregunta la forma de conectarnos a nuestro sitio WEB.

Las opciones son las siguientes, de ellas seleccionaremos NONE

• En la segunda parte teclearemos la ruta donde se guardaran los archivos de

llegada.

• La última pantalla nos pregunta si deseamos checar los archivos de salida, para
evitar que varias personas utilicen el mismo archivo al mismo tiempo, nosotros
seleccionaremos la segunda.

• Entonces el cuadro de dialogo nos proporciona un sumario de las opciones

seleccionadas, si estamos de acuerdo damos clic en Done(Crear) si no
regresamos con Back<

4
Docente. Sergio Roberto Santiago Cruz
 SEP 115
3 de mayo de 2011 [PRACTICAS DE DREAWEAVER] CICLO 01-09

DEPARTAMENTO DE BACHILLERATO
ACADEMIA DE INFORMÁTICA
TECNOLOGIAS DE LA INFORMACION III
Práctica 2ª CREACIÓN DE HIPERENLACES

OBJETIVO: El alumno creará las páginas WEB correspondientes a sus datos

personales
INSTRUCCIONES:
• Cree cuatro páginas con los datos correspondientes.
• Primera Página contiene sus datos personales ( Nombre, Edad, etc.) y tres
vínculos.
• Cree las páginas referentes a los vínculos (Pasatiempos, Currículo Vitae y
Mascotas).

5
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

Práctica 2b CREACIÓN DE TABLAS

Objetivo de la práctica: Al finalizar la práctica el alumno conocerá las ventajas del uso
de Tablas y Marcos en una página Web. Así como los procesos y métodos para la
configuración de estos elementos.
Introducción
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.
Al igual que las tablas, los marcos o frames sirven para distribuir mejor los datos de las
páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la
barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la
funcionalidad, pueden mejorar también la apariencia.
Configuración de tablas en la página Web
Para insertar una tabla, utilizamos la barra Insert en la categoría de Common, o bien en
la misma barra podemos elegir Layout

1.- Abre una página nueva y guarda en el sitio que ya existe de las prácticas anteriores
llama a esta Tabla.
2.- Inserta una tabla con las opciones
predeterminadas.
3.- Selecciona la tabla y describe las
opciones en el Inspector de
propiedades. Reporta tus
observaciones.
4.- Selecciona una celda y describe las
opciones en el inspector de
propiedades. Reporta tus
observaciones.
Trabajando con el inspector de
propiedades de la tabla o la celda entrega una tabla como la mostrada en la página Web
siguiente.
5.- Respalda el documento.
Manejo de Marcos en la página Web
Crear marcos

6
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

1.- Para crear un marco, primero hay que abrir un nuevo documento.
2.- Elige la categoría de Layout en la barra de herramientas Insert

3.- A través de esta opción puede elegirse el tipo de marco que va a crearse.
4.- Elegimos la opción de Left Frame (marco a la izquierda)
5.- Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El
documento de partida era uno nuevo. En este caso tendremos tres documentos: el de la
izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el
documento que teníamos inicialmente, que está en el marco conocido como marco padre
(mainFrame). Muestra el panel de Marcos para ubicar cual de ellos es el Padre.
6.- En el marco de la izquierda escribe el texto “Menú”, y en renglones inferiores inserta
un hipervínculo con la barra Insert hacia las páginas Uno, dos y tres del sitio creado
anteriormente. Y en el cuadro de dialogo del hipervínculo elige en Target la opción
MainFrame.
7.- Guarda los marcos. Primero debes guardar el conjunto. Al ver la vista previa pedirá
que se guarden los marcos de que consta el conjunto, es necesario saber cual es cada
uno de ellos para dar un nombre apropiado.
8.- Respalda el documento.

7
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]
SEP 115
CICLO 01-09
Práctica 2c CREACIÓN DE FORMULARIOS
OBJETIVO: El alumno creara un formato de formulario, incluyendo objetos del
formulario.
INSTRUCCIONES:

Objetivo de la práctica: Al finalizar la práctica el alumno conocerá las ventajas de los

Formularios en una página Web, así como los procesos y métodos para la configuración
de estos elementos.
Introducción
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para
realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los
usuarios, recibir preguntas, etc.
Una vez que el usuario rellena los datos y pulsa el botón para enviar el formulario se
arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.
Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y
validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan
nociones de programación, ya sea en VBScript, en JavaScript o en otro lenguaje de
programación, y esto no entra en los objetivos del curso.
Elementos del Formulario
Los elementos de formulario pueden insertarse en una página a través de la barra Insert,
opción Forms.

A través de esta opción se puede acceder a la lista de todos los objetos de formulario que
pueden ser insertados en la página.
Vamos a ver algunos de los elementos más usados de esta categoría que pueden formar
parte de un formulario, así como algunas de sus propiedades.
EJERCICIO PRÁCTICO
Diseña una página Web con formularios utilizando al menos cuatro elementos que se
describieron en la práctica.
El tema es libre.

8
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

Práctica 3 INSERCIÓN DE IMÁGENES, VIDEOS, SONIDOS Y

ROLLOVERS
OBJETIVO: El alumno creará una página en donde insertara las imágenes que
funcionaran como mapas de imágenes y rollovers, según corresponda
INSTRUCCIONES:
Insertar objetos comunes en la página Web
Para insertar un objeto, ya sea una imagen, una tabla, una capa, un hipervínculo, etc.
Utilizamos la barra Insert y en esta primera parte de la práctica solo utilizaremos la
categoría de Common.

1.- Abre una página nueva y guarda en el sitio que ya existe de las prácticas anteriores
llama a esta Objetos.
2.- Para cada uno de los botones de los que consta esta barra, antes de insertar, sin dar
clic en él acércate hasta que aparezca el mensaje del nombre del botón y escribe el
nombre, inserta el elemento en la pagina Objetos y describe los elementos del cuadro de
dialogo que se muestra en cada caso. Por ejemplo al insertar un hipervínculo (primer
botón de la barra aparece el cuadro de dialogo siguiente:

3.- Debes describir cual es la función de cada caja de texto Text, Link, Target, Tab Index,
Title, Acces Key y los botones. Se recomienda dar clic en el botón de ayuda, en cada
cuadro de dialogo.
Selecciona cada elemento que insertes en la página y observa el inspector de
propiedades.
Se deberá entregar un reporte de cada uno de los botones.
Insertar objetos Multimedia en la página Web
1.- Realiza las mismas tareas del punto anterior, con la categoría de Media
Los Comportamientos
Los comportamientos son acciones que suceden cuando los usuarios realizan algún
evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre
un texto, hacer doble clic sobre un mapa de imagen, etc.
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.
Insertando Comportamientos

9
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

Abre el panel Behaviors (Comportamientos) a través del menú Window. También

pulsando mayús.+F4.
En este panel hay que desplegar el botón pulsando sobre él, y en Show events for
para elegir una versión de la lista de navegadores.
Algunos comportamientos no funcionan para algunos navegadores, por lo que
dependiendo del navegador elegido aparecerán unos u otros comportamientos posibles.
Existen comportamientos que funcionan en Internet Explorer pero no en Netscape. Debido
a que la mayoría de usuarios utiliza Internet Explorer, vamos a seleccionar este
navegador. Puedes seleccionar IE 6.0 que es el instalado en los equipos de cómputo. Una
vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se
desee insertar algún comportamiento.
Cuando ya hay establecido algún navegador, ya se pueden insertar comportamientos.
Selecciona el objeto sobre el que se ha de aplicar el comportamiento, como puede ser
una imagen, un fragmento de texto, etc. Utiliza una pagina nueva en el sitio y llama
comportamiento
Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir
unas acciones, mientras que otras no. Aplica tres comportamientos a una imagen y tres
comportamientos a un texto, reporta cada uno de los casos.

• Baja de Internet 4 imágenes de cualquier formato, solo una debe ser gif animado
• Inserta dos imágenes en una colocaras un mapa de imagen y en la otra ( gif
animado) otro mapa de imagen.
• Con las dos imágenes restantes crea un rollover.
• Busca un Video y un Sonido y guárdalos.
• Posteriormente insértalos en la página que creaste.

10
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

Práctica 4 UTILIZACION DE CODIGO HTML

OBJETIVO: El alumno creara una página en donde insertará elementos multimedia.
INSTRUCCIONES:
1.- Transcribe el siguiente texto en un nuevo documento de Dreamweaver entre las
etiquetas de <head> y </head> en la vista de código.
<STYLE TYPE=”text/css”>
.cabecera
{
font-size=19px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-align:center;
}
.texto
{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-style:italic;
color:#FFFFFF;
background-color:#000000;
}
</STYLE>

2.- Pasa a la vista de diseño y despliega el panel de Design y observa que en la categoría
de CSS Styles existen dos estilos llamados cabecera y texto.

11
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

3.- Escribe un texto cualquiera en la página en blanco en la vista de diseño y da clic sobre
alguno de los estilos. En seguida da nueva mente clic sobre el otro estilo y anota tu
observación
La definición de estilos se puede encerrar entre comentarios (<!-- ... -->), de esta forma los
navegadores que no reconozcan la etiqueta <style> la ignorarán.
Es importante no incluir dobles comillas en la especificación de valores de atributos en
sintaxis CSS.
CSS exige un estricto cumplimiento de sus normas de sintaxis. Asegúrate de no omitir
ningún punto y coma entre los pares nombre/valor. Si lo haces, se ignorara por completo
la definición de estilo. De igual forma, si accidentalmente se añade un símbolo extraño la
definición será ignorada.
4.- En el panel CSS Styles, haz clic en el botón New CSS Rule.
5.- En el cuadro de dialogo que se muestra en la opción Selector Type elige Class, y en
el cuadro de dialogo siguiente elige las opciones de tu preferencia anotando las opciones
que se deben llenar.

6.- Observa que se ha creado un nuevo estilo con el nombre que elegiste y se puede
aplicar al texto de la página con un simple clic.

7. Inserta Marquesina ala página

12
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

Práctica 5 Y 6 CREACIÓN DE CAPAS

OBJETIVO: El alumno creara una página en donde incluirá el manejo de capas.

INSTRUCCIONES:
• En la página que acaba de crear el alumno, se insertaran capas y se modificarán
sus propiedades ( múltiples capas consecutivas, tamaño, moverlas, alinearlas,
ajustarlas a la cuadrícula, cambiar el orden de apilamiento, etc.)

• El primer paso que tenemos que dar es desarrollar mentalmente un esquema del menú
que queremos realizar.
• Haremos un menú principal compuesto por 5 partes en posición horizontal.
• Crearemos una tabla con 5 celdas y les daremos a cada una de ellas un determinado el
tamaño de píxel, en nuestro caso 100px - 20px.
• Demos clic en el icono de capa y dibujaremos una en cualquier lado, seguidamente
arrastraremos el símbolo de capa (que determina el lugar donde el programa
introducirá la línea de código HTML, que por defecto creará dentro de la etiqueta
“Body”) dentro una de las celdas de la tabla que hemos generado
• Modificaremos en la ventana propiedades, los campos “Iz” (izquierda) y “Sup” (superior)
dejándolos en blanco, al hacer esto el programa engancha la capa en la esquina
superior izquierda del recipiente en el que se encuentra, en este caso, la celda en la
que hemos introducido la capa.
• Después daremos un valor a los campos de “An” (ancho) y “Al” (alto) En el ejemplo que
estamos creando serán 100px y 20px respectivamente, este paso lo tenemos que
repetir para cada una de las 5 celdas (en nuestro caso), de las que se compone
nuestro menú principal
• Una vez terminado con este paso procederemos a crear otras capas dentro de
las que ya hemos establecido, a estas capas tendremos que darles unos
valores de tamaño dependiendo de las distintas partes que queramos
introducir dependientes de cada menú (nosotros daremos 100px - 80px en el
primer desplegable, 100px - 140px en el segundo, 100px - 100px en el
tercero, 100px - 80px en el cuarto y 100px - 140px en el quinto).
• Para colocar una capa dentro de otra podemos hacerlo: 1º, arrastrando como
hemos hecho anteriormente esta nueva capa dentro de la anterior, o 2º,
presionando la tecla F2 nos aparecerá la ventana “capas” donde podremos ver
un esquema de las capas que tenemos en nuestra web, escogiendo una de las
capas que aparecen y arrastrándola encima de otra mientras que presionamos
la tecla “ctrl”, introduciremos la capa arrastrada dentro de la que hayamos
seleccionado.
• Estas subcapas que hemos creado, que dependen de las principales, por
defecto tienen la propiedad “default” que deja la capa visible en todo momento
y nos viene bien para trabajar, pero antes de darles un comportamiento a
estas, cuando tengamos terminado por completo la estructura de nuestro
menú, deberemos cambiar este tributo “default” de las capas secundarias (las
que se encuentran dentro de las 5 capas principales) por “hidden”, que las

13
Docente. Sergio Roberto Santiago Cruz
 3 de mayo de 2011 [PRACTICAS DE DREAWEAVER]

hace invisibles, dándonos la posibilidad de trabajar con los comportamientos

haciéndolas aparecer y desaparecer a nuestro gusto.
• Dentro de estas capas secundarias introduciremos tablas con el número de
celdas que hayamos calculado con el tamaño de cada capa.
• Una vez hecho esto en todas las capas deberíamos colocar las imágenes o las
palabras de nuestro menú para poder configurar los comportamientos, ya que
si no colocamos nada dentro de las capas, estas no se verán cuando aparecen
o desaparecen por ser transparentes.
• Otra solución es darles un color de fondo.

• El último paso para terminar nuestro menú será dar a cada capa un
comportamiento. Para eso necesitamos la ventana comportamiento que, si no
la tenemos ya a la vista, presionando la tecla F3 aparecerá.
• Para poder jugar con los comportamientos de “mostrar u ocultar capa”
debemos trabajar con un vinculo (estos vínculos serán las imágenes que
hemos colocado dentro de las celdas y en su defecto las palabras, para hacer
este vinculo introduciremos en el espacio reservado para los vínculos de la
ventana propiedades el símbolo “#” creando así un vínculo en blanco, a
continuación presionaremos el vinculo creado (en la parte inferior de la página
principal aparecerá el símbolo de vínculo “<a>” en negrita) después iremos a
la ventana comportamiento y presionaremos el símbolo “+” y pincharemos en
“Mostrar - Ocultar capas” y nos aparecerá una ventana con un listado de todas
las capas que tenemos creadas, lo que tenemos que hacer es presionar la capa
que se tendría que desplegar cuando pasásemos el ratón por encima del
vinculo que estamos modificando y apretar el botón “Mostrar” y las demás
capas pincharlas y ocultarlas de la misma forma que hemos hecho antes pero
en este caso apretando el botón de “Ocultar”.
• Este paso lo repetiremos para cada una de los cinco vínculos principales de los
que se nos desplegarán los correspondientes submenús.

14
Docente. Sergio Roberto Santiago Cruz