Crea página web Dreamweaver principiante

Módulo de Macromedia
Dreamweaver CS4
Cuaderno de Prácticas del Profesor
Módulo de Macromedia Dreamweaver CS4
Introducción.
IMCO Computación e inglés te da la más cordial bienvenida a tu módulo de DISEÑO DE

PAGINAS WEB.
En el presente manual encontraras una serie de prácticas que tienen el objetivo de
conocer las herramientas del programa, Dreamweaver para creación y administración de
páginas web. Estas prácticas solo son una muestra del potencial que el diseñador WEB
debe explorar con su creatividad para crear estilos en diseño web, conocido como
maquetación que de alguna manera les permitan incrementar las visitas a sus sitios web
así como la mayor funcionalidad a los visitantes de los mismos.
Recomendamos tanto al alumno, como al profesor no conformarse con el material aquí

recopilado, sino buscar material de apoyo como libros, tutoriales de internet, y sobre todo
mucha Práctica en el software, para obtener el mayor aprendizaje y aprovechamiento de
este módulo.
Tu curso está diseñado de la manera más práctica posible, balanceando en todo momento
el contenido conceptual que debes tener como base de conocimientos, así como también
el contenido práctico para aplicar los conocimientos en actividades productivas.
En IMCO estamos comprometidos con tu aprovechamiento, muestra de ello es este
cuaderno de prácticas que tienes frente a ti. Es el resultado de una intensa búsqueda entre
las mejores metodologías para generar el aprendizaje. En él estamos utilizando métodos
como Aprendizaje significativo, desarrollo de competencias, aprendizaje basado en la
experiencia entre otras técnicas, que nos permiten generar en ti el desarrollo de las
habilidades y capacidades necesarias para obtener el éxito.
Te agradecemos muy cordialmente tu preferencia y te correspondemos brindándote el
curso preparado de la manera más profesional posible, con el respaldo de una institución
de más de 20 años de experiencia formando personas de éxito.
1
Información para el profesor
Los textos en color verde y atributos en cursivas nos van a indicar el marco conceptual
(teoría) que debemos dominar y explicar al alumno al momento de la clase.
Los textos marcados en azul son actividades consideradas vitales para el

funcionamiento de la metodología, son actividades consideradas, es decir,
ESTANDARES NO NEGOCIABLES NO SE PUEDEN CAMBIAR NI DEJAR DE HACER.
Con los cuales se Los textos marcados en color naranja son actividades considerados
fijadores. Busca establecer en el alumno un vínculo que permita generar en él un
sentido de pertenencia, por lo tanto van a ir cambiando con el transcurso del módulo.
Es importante checar en los guiones sugeridos que fijador estamos utilizando, y si
deciden no ocupar el guion tal cual y utilizar uno propio, el fijador debe ser incluido
TAL CUAL ESTA dentro de su propio guión.
2
ÍNDICE
SEMANA 1
Práctica 1: Creación de mi primera página.
Práctica 2: Creación de hoja de estilos y una página de información.
Práctica 3. Diseño de Tablas.
Práctica 4. Creación de una página de ubicación del plantel
SEMANA 2
Práctica 5: Creación de hipervínculos y una página de menú.
Práctica 6: Crear y configurar marcos
Práctica 7. Creación de unas marquesinas y modificación de marcos.
Práctica 8. Crear una plantilla
SEMANA 3
Práctica 9. Creación de una página a partir de una plantilla y manejo de capas
Práctica 10. Creación de una imagen de sustitución.
SEMANA 4
Práctica 11. Crear un álbum de fotos con DreamWeaver
Práctica 12. Creación de un menú de saltos dentro de un formulario.
Práctica 13: Formulario
Práctica 14: Galería de Juegos Flash
3
Práctica 1: Creación de mi primera página.
1. Configuración de un sitio web.

1. Menú / Sitio Opción Nuevo Sitio. Explicar en Dreamweaver, el término “sitio” se
emplea para referirse a una ubicación de almacenamiento local o remota de los
documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver permite
organizar y administrar todos los documentos Web, cargar el sitio en un servidor
Web, controlar y mantener vínculos y administrar y compartir archivos.
2. Establecer un nombre al sitio web. Explicar que dentro de Dreamweaver podemos
crear un sin número de sitios web y de la gran posibilidad del manejo y
administración de estos.
3. Seleccionar la opción de no utilizar una tecnología de Servidor. Explicar las
diferentes tecnologías de Servidores de aplicaciones utilizan distintas tecnologías.
Dreamweaver admite tres tecnologías de servidor: ColdFusion (Adobe Cold Fusion),
ASP (Microsoft IIS) y PHP (Servidor PHP).
4. Elegir una carpeta para el almacenamiento del sitio web. Explicar que Carpeta raíz
local Almacena los archivos con los que está trabajando. Dreamweaver se refiere a
esta carpeta como el “sitio local”. Esta carpeta suele encontrarse en el equipo local,
pero también se puede encontrar en un servidor de red.
5. Seleccionar en la forma de conectar a un servidor remoto la opción de Ninguno.
Explicar que Dreamweaver admite conexiones con servidores web los tipos de
conexión admitidos figuran FTP, SFTP, WebDav y RDS.
2. Creación de una página HTML.

1. Menú Archivo / Nuevo / Pagina en blanco / HTML / Ninguno. Explicar que existen
diferentes diseños al momento de crear nuestra página web con creación desde
conjunto de columnas hasta la utilización de plantillas prediseñadas.
2. Establecer las propiedades de la página:
Si no aparece la opción de propiedades Hacer clic con el botón derecho del ratón
sobre el documento en blanco, para abrir su menú contextual.
i. Elige la opción Propiedades de la página en el menú contextual

Explicar que las hojas de estilos en cascada (CSS) son un conjunto de
reglas de formato que determinan el aspecto del contenido de una
página Web. La utilización de estilos CSS para aplicar formato a una
página permite separar el contenido de la presentación.
a. Selecciona la categoría Apariencia (CSS).
1. En Color de texto: escribe #585858.
2. En Color de fondo: escribe #FEFEFE.
b. Seleccionar la categoría Vínculos CSS.
1. En Color de vínculos: escribe #DFA01B.
2. En Vínculos visitados: escribe #F9CA69.
3. En Vínculos activos: escribe #FFB900.
c. Seleccionar la categoría Título/codificación.
4
1. Escribir en el Título, escribe menú.

Explicar que la codificación se selecciona Unicode (UTF-8)
como codificación predeterminada para poder representar
determinados caracteres.
d. Seleccionar la categoría Apariencia/HTML.

1. Seleccionar una imagen de fondo para la página web.
2. Seleccionar un color para los vínculos.
3. Insertar una imagen en la página web.

1. Insertar una etiqueta Div
i. Insertar/Objetos de Diseño/Etiqueta Div
ii. Definir un ID para identificar para el selector o capa.
Explicar que las etiquetas Div son contenedores o bloques donde
podemos colocar dentro (imágenes, texto, animaciones, otro
bloque, o todo al mismo tiempo) a los que se le asigna un ancho,
alto y posición, de esta manera se van a ir posicionando
consiguiendo la estructura que queremos.
Explicar que este nombre de selector aplicará la regla a todos los

elementos HTML con el id que introduzcamos.
2. Seleccionar Insertar /Imagen
i. Elegir la imagen que va ocuparse para mostrar en la página web.
ii. La imagen se copiara dentro de la carpeta del sitio web.
3. Alinear la imagen
i. Debemos introducir junto con la etiqueta div lo siguiente
<div align="center">
Explicar que al alinear se insertan etiquetas div para crear bloques
de diseño CSS e insertarlas en el documento. Esto resulta útil si ha
adjuntado al documento una hoja de estilos CSS con estilos de
posición. Dreamweaver le permite insertar rápidamente una
etiqueta div y aplicar a ésta estilos existentes
4. Introducir texto informativo en la página:
1. Insertar una etiqueta Div
i. Insertar/Objetos de Diseño/Etiqueta Div
ii. Definir un ID para identificar para el selector o capa.
2. Introducir el texto siguiente:
 Bienvenidos a Mi Sitio Web
 Información del Web master
 Nombre
 Correo electrónico.
5. Guardar la página con el nombre de index.html y visualizar la página con la
tecla <F12>.
5
Explicar que al darle este nombre de archivo, este archivo se

muestra de forma predeterminada, al hacer mención en la
ubicación de la carpeta o nombre del sitio web.
Realiza tu Checklist de clase: (este es uno de los pasos más importantes de la metodología, es aquí
donde el alumno se da cuenta de TODO lo que APRENDIO en una sola sesión, el siguiente es un
guión sugerido).
Como ven ahora hemos creado una página web de bienvenida en la cual hemos aplicado ciertos
pasos para su realización.
Para hacerla hemos hecho lo siguiente.
1. Creado y configurado un sitio web.

2. Creación y configuración de la página de inicio.
3. Inserción de imágenes dentro de la página web.
4. Inserción de una etiqueta Div para establecer el formato del texto informativo.
Recuerda en IMCO nos preocupa que aprendan a manejar las herramientas para Diseño de
Páginas Web.
6
Práctica 2: Creación de hoja de estilos y una página de información.
1. Abrir Dreamweaver, seleccionar la opción de Sitio/Administrar Sitios, para abrir nuestro

sitio web, local.
Explicar que un sitio de Dreamweaver permite organizar y administrar todos los
documentos Web, cargar el sitio en un servidor Web, controlar y mantener vínculos y
administrar y compartir archivos.
2. Abrir la página de índex de la práctica anterior.
Explicar que es frecuente que comencemos creando los estilos en la propia
página, y después al ver que los necesitaremos en otras páginas del sitio, los
pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos
fácilmente.
3. Estableceremos los estilos de los encabezados (h1, h2, h3, h4, h5, h6)
Seleccionar las propiedades de font-size, font-family, color.
Explicar que los encabezados se utilizan para dividir el contenido en apartados
o llamar la atención en determinadas partes de la página.
Utilizamos el panel Estilos CSS (Mayús + F11). En este caso nos será más útil la
vista Todo. Agrupados en <style> encontramos los estilos creados en la página.
Seleccionamos las reglas que queramos exportar, y en las propiedades del
panel (el icono de la esquina superior derecha) seleccionamos Mover Reglas
CSS....
4. Se creará una hoja nueva para las reglas exportadas. Deberemos de indicar dónde
queremos guardar el archivo, normalmente en la misma carpeta que las páginas.
Explicar que los estilos seleccionados se quitarán de la página actual, y se vinculará

con la hoja de estilos.
Abrir la hoja de estilos guardada en la sección anterior, ahora debemos de incluir el
formato más completo para el contenido de nuestra página web.
5. Creación una página para establecer el uso de los estilos.

1. Seleccionar la opción Archivo/Nuevo/HTML/Diseño <ninguno> y a continuación se
muestra la el contenido a introducir los elementos siguientes:
¿QUIENES SOMOS?:
IMCO es una Institución Educativa con más de dos décadas de trayectoria y

amplios antecedentes en el área de Computación, que está a la vanguardia en cuanto
al uso de las mejores metodologías de Enseñanza-Aprendizaje.
7
VISIÓN
Ser una Institución modelo que cubra perfectamente, las necesidades de
Computación a nivel Nacional.
MISIÓN
IMCO Computación tiene como misión formar técnicos profesionales de

excelencia, capaces de cubrir las necesidades que actualmente requieren las
empresas en su proceso de modernización.
VALORES
Servicio.- Queremos cumplir más allá de la expectativa de nuestro alumnado y
sus padres. Dar mejor servicio y satisfacer sus necesidades.
Responsabilidad.- Cumplir con lo que prometemos. Como profesionales día a
día buscamos responder a las expectativas que nos han sido conferidas, dando
siempre calidad en el trabajo.
Humildad.-La prepotencia no existe en nuestra institución, sabemos que
somos seres humanos imperfectos pero que estamos en el camino de la
superación.
Calidad.- Diariamente damos un poco más, un pequeño extra en nuestras
acciones que nos hacen mejores continuamente.
2. Establecer los como encabezados de sección los elementos sigs.:

 ¿QUIENES SOMOS?
 MISION
 VISION
 VALORES
Explicar que los encabezados son los elementos que por lo regular
se necesitan que resalten del demás contenido del texto.
3. Seleccionar la opción de CSS para definir un nuevo identificador de clase
llamado párrafo con el siguiente formato:
.parrafo{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color: #000;
text-align: justify;
}
Explicar que los elementos de clase son aquellos elementos que
podemos definir para que sean reutilizados en cualquier parte con
código HTML.
4. Definiremos el aspecto para una lista:
.lista{ list-style-type:inside;
list-style-image: url(imagenes/babajo.gif);
list-style-position:inside;
font-size:16px;
font-family:Tahoma, Geneva, sans-serif;
color: #000;
8
text-align: justify;
}
Explicar los siguientes elementos:
list-style-type(Establece el aspecto de viñetas o números.)
list-style-image(Permite especificar una imagen personalizada
para viñetas.)
list-style-Position (Determina si el elemento de texto de la lista se
ajusta a una sangría (outside) o si el texto se ajusta al margen
izquierdo (inside)
Insertar una etiqueta Div (Insertar/Objetos de Diseño/Etiqueta Div) en los
elementos contenido en la lista.
.
5. Guardar los cambios con el nombre quienessomos.htm y visualizar la página

con la tecla <F12>.
9
Realiza el checklist de clase (este es uno de los pasos más importantes de la metodología, es aquí
donde el alumno se da cuenta de todo lo que aprendió en una sola sesión, el siguiente es un guión
sugerido).
Como ven ahora hemos creado una página web utilizando hojas de estilos y propiedades del texto
y hemos aplicado ciertos pasos para su realización.
Para hacerla hemos hecho lo siguiente.
1. Creando y configurado una hoja de estilos.

2. Creación y configuración los párrafos de la página.
3. Creación de una lista con viñetas dentro de la página web.
4. Inserción de una etiqueta Div para establecer el formato del texto en la lista.
Páginas Web.
10
Práctica 3. Diseño de Tablas.
1. Abrir la página de quienesomos.htm de la práctica anterior.

Explicar si no aparece el panel Archivos, se puede abrir a través del menú Ventana, opción
Archivos. Selecciona el sitio en el panel Archivos.
Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
2. Sitúa el punto de inserción al final el primer párrafo, y pulsa Intro para crear un nuevo
párrafo. Escribe Tenemos sedes en:
3. Haz clic sobre el menú Insertar/Tabla, establecer los siguientes elementos:
a) En Filas: escribe 7.
b) En Columnas: escribe 2.
c) En Ancho: seleccionar Píxeles y escribe 500.
d) En Borde: escribe 2.
e) Si en Relleno de celda: aparece algo escrito, bórralo.
f) En Espacio entre celdas: escribe 2.
g) Selecciona el encabezado Izquierda.
h) Selecciona Encabezado de columna izquierda dentro de la sección de encabezado de la
tabla.
i) Haz clic sobre el botón Aceptar.
Rellena la tabla para que quede del siguiente modo:
Explicar los siguientes elementos en el diseño de la tabla:

Filas Determina el número de filas de la tabla.
Columnas Determina el número de columnas de la tabla.
Ancho de tabla Específica el ancho de la tabla en píxeles o como porcentaje del ancho de
la ventana del navegador.
Grosor del borde Específica el ancho en píxeles de los bordes de la tabla.
Espacio entre celdas Determina el número de píxeles entre celdas de tabla contiguas.
Relleno de celda Específica el número de píxeles entre el borde y el contenido de una
celda.
Ninguno No permite encabezados de columna o de fila para la tabla.
Izquierda Convierte la primera columna de la tabla en una columna para encabezados.
Esto le permite introducir un encabezado para cada fila de la tabla.
11
Superior Convierte la primera fila de la tabla en una fila para encabezados, lo que le
permite introducir un encabezado para cada columna de la tabla.
Ambos Le permite introducir encabezados de columna y de fila en la tabla.
4. Seleccionamos la columna de la izquierda en la tabla seleccionamos de la parte de

propiedades la parte para establecer el color de fondo, seleccionamos el
<bgcolor="#0099CC">.
5. Combinar celdas de la tabla.
a. Seleccionamos el primer renglón de la tabla, donde se encuentra:
Ciudad Veracruz, Puerto
b. En la parte de propiedades dentro de la opción de CSS debemos de observar la
fila seleccionada y debemos de darle la opción de combinar.
c. Introduciremos la leyenda: INFORMACION PARA UBICARNOS
d. En la parte de fondo elegir el código de color <#FF6633> para el renglón
combinado.
6. Dividir celdas de la tabla.
a. Seleccionamos la celda que contiene lo siguiente: Belleza y Computación,
que es la celda a la cual la vamos a dividir.
b. Seleccionar el botón del inspector de propiedades, o sobre la opción
Dividir celda de la opción Tabla.
c. Desplazar la celda dividida considerando la posición y colocar el texto de
Belleza y Computación.
d. Establecer el color de fondo en tono <#FFCCFF > para la celda de Belleza.
e. Establecer el color de fondo en tono <#00CCFF> para la celda de
Computación.
7. Insertar una fila a la tabla.
a. Seleccionar la última fila de la tabla.
La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que
la columna se inserta a su izquierda.
También tenemos una opción más completa, la opción Insertar filas o
columnas.... Al seleccionarla aparece una nueva ventana, donde es posible
determinar si lo que se insertarán serán filas o columnas, el número de ellas
que se insertará, y la posición donde se insertarán.
b. Seleccionar la opción de Insertar/Objetos de Tabla/ Insertar fila debajo.
c. Seleccionar las dos celdas de la fila recién insertada.
d. Seleccionar la opción de combinar celdas dentro de las propiedades de la
tabla.
e. Introduciremos la leyenda siguiente: En IMCO nuestra principal
preocupación es que aprendas cosas útiles.
f. Establecer de color de fondo de la fila < #FF6633>.
8. Guardar los cambios realizados, y visualizar la página pulsando la tecla <F12>
12
sugerido)
En esta práctica hemos realizado las acciones siguientes:

 Inserción de una tabla.
 Combinar celdas de la tabla.
 Dividir celdas de la tabla.
 Insertar una fila a la tabla.
 Propiedades de la tablas( fondo, espacio)
Páginas Web.
13
Práctica 4. Creación de una página de ubicación del plantel
a. Menú Archivo / Nuevo / Página en blanco / HTML / Ninguno.

b. Buscar la ubicación del plantel en la página de Google Maps e imprimir la pantalla
Explicar que los mapas de google nos muestran la ubicación de un lugar que
nosotros pretendemos conocer su posición.
Explicar que para imprimir la pantalla con la imagen del mapa es necesario pulsar
la tecla de Imp Pant.
c. Seleccionar la opción de Edición/Pegar
Explicar que dentro de Dreamweaver nos permite editar el tamaño y configuración
de algunas de las imágenes, la recortaremos y seleccionamos la opción de
exportar el área.
d. Seleccionar la propiedad para la imagen de alineación hacia la izquierda
e. Abrir la página de Quienessomos.htm
f. Seleccionar el contenedor con la información de la ubicación del plantel y copiar.
g. Pegar la información de la ubicación en la página de nueva creación.
h. Alinear la posición del contenedor con la posición de izquierda.
i. Seleccionar la opción de Formato/Estilos CSS y crearemos una referencia a la hoja de
estilos antes creada llamada estilos.
j. Introducir como título del documento Ubicación del Plantel
k. Escribir Mapa del Plantel y establecerle un formato de encabezado de los estilos ya
definidos con anterioridad.
l. Modificar los fondos de las celdas de la tabla.
m. Guardar la página con el nombre de mapa.htm y visualizar la página con la opción
de <F12>.
14
sugerido)

 Combinar celdas de la tabla.
 Dividir celdas de la tabla.
 Insertar una fila a la tabla.
Páginas Web.
15
Práctica 5: Creación de hipervínculos y una página de menú.
1. Creación de un hipervínculo hacia la página ¿Quiénes Somos?
a. Abrir la página creada en la práctica 1 llamada (index.html)

b. Escribir la palabra Entrar, en la parte inferior a la imagen, establecerle el aspecto en
la sección de Propiedades/ HTML, como una regla de encabezado o estableciendo las
propiedades como el tipo de fuente, color, tamaño y posición.
Explicar que 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.
Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta
<a></a> que es la que en HTML se encarga de definir los enlaces.
c. En la parte de propiedades seleccionar la sección HTML para definir el vínculo o

enlace hacia la página que vamos a visitar debemos seleccionar como vinculo la página
de quienessomos.html, de la práctica anterior.
d. Guardar la página y probarla en el explorador pulsando la opción <F12>.
2. Creación de una página de menú.
Seleccionar la opción de Adjuntar hoja de estilos y ahí seleccionamos la hora
de estilos almacenada en nuestro sitio.
b. Insertar una etiqueta Div
1. Insertar/Objetos de Diseño/Etiqueta Div
2. Definir un ID para identificar para el selector o capa. <menu>
3. Debemos introducir junto con la etiqueta div lo siguiente
<div align="center">
c. Seleccionar Insertar /Imagen
i. Elegir la imagen que va ocuparse para mostrar en el menú
ii. La imagen se copiara o al menos debe de estar dentro de la carpeta del sitio
web.
Explicar que no es necesario configurar la alineación de la imagen, debido a que
estar contenida a esta se encuentra dentro de un contenedor, este ya se
encuentra con tal propiedad.
d. Insertar una tabla seleccionar Insertar/Tabla, establecer los siguientes elementos:

1. En Filas: escribe 4.
2. En Columnas: escribe 2.
3. En Ancho: seleccionar Píxeles y escribe 150.
4. En Borde: escribe 2.
5. Si en Relleno de celda: aparece algo escrito, bórralo.
6. En Espacio entre celdas: escribe 2.
7. Selecciona el encabezado Izquierda.
16
8. Selecciona Encabezado de columna izquierda dentro de la sección de

encabezado de la tabla.
9. Haz clic sobre el botón Aceptar.
e. Introducir los siguientes elementos dentro de la tabla, en cada renglón de la misma.
1. Inicio
2. Mapa
3. Página Imco
4. Email
f. Inserción de vínculos a los elementos de la tabla.
1. Seleccionar la celda que contiene la palabra Inicio.
a. En la sección de propiedades HTML, estableceremos el vínculo, hacia
la página index.html, que es aquella que identificaremos como página
principal.
2. Seleccionar la celda que contiene la palabra Mapa.
a. En la sección de propiedades HTML, estableceremos el vínculo, hacia
la página ubicacion.htm, que es aquella que contiene el mapa de la
ubicación del plantel.
b. En la sección de Destino dentro de las propiedades de HTML,
establecemos la propiedad _blank .
Explicar que los destinos prácticamente es la forma de cómo podemos
visualizar las páginas en este caso con la opción _blank, abre el
documento vinculado en una ventana nueva del navegador.
3. Seleccionar la celda que contiene la palabra Página de Inicio.
a. E En la sección de propiedades HTML, estableceremos el vínculo,
hacia la página http://www.imco.edu.mx que es aquella página
principal de la escuela.
4. Seleccionar la celda donde se encuentra la palabra Email.
a. E En la sección de propiedades HTML, estableceremos el vínculo,
hacia la página debemos escribir un correo: micorreo@example.com.
5. Guardar la página y probarla en el explorador pulsando la opción <F12>.
17
sugerido)

 Modificación de una imagen copiada.
 Creación de vínculos a otras páginas.
Páginas Web.
18
Práctica 6: Crear y configurar marcos

Explicar que un marco es una zona de una ventana de navegador que puede
mostrar un documento HTML independiente de lo que se muestra en el resto de la
ventana. Los marcos permiten dividir la ventana de un navegador en varias
regiones, cada una las cuales puede mostrar un documento HTML diferente.
1. Abrir el archivo de la práctica anterior (el que contiene la información de ¿Quiénes
somos?
Si no aparece el inspector de propiedades, ábrelo a través del menú
Ventana, opción Propiedades.
Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el
botón para desplegar sus propiedades más avanzadas.
a. Haz clic sobre el menú Insertar.
b. Elige la opción HTML y luego Marcos.
c. Elige la opción Izquierda.
1. Deben de tener los nombres leftFrame y mainFrame que vienen por

defecto.
Si no aparece el panel Marcos, ábrelo a través del menú Ventana,
opción Marcos.
Selecciona el documento de marcos. Puedes hacerlo pulsando
sobre el borde exterior de los marcos, en el panel Marcos.
d. En Título, que aparece en la barra de documento, escribe Imco

Computacion.
e. En Bordes, del inspector de propiedades, selecciona No.
f. En Ancho escribe 0.
g. En Selección Fila Col. pulsa sobre la columna de la izquierda.
h. En Columna selecciona Píxeles y escribe 270.
i. En Selección Fila Col. pulsa sobre la columna de la derecha.
j. En Columna selecciona Relativo y escribe 1
Explicar que al seleccionar Relativo esto nos permite definir las unidades
de tamaño de fila / columna.
k. Seleccionar la opción de Ventana/Marcos
Selecciona el documento de marcos. Puedes hacerlo pulsando sobre el
borde exterior de los marcos, en el panel Marcos.
l. Pulsa sobre el marco izquierdo en el panel Marcos.
m. En Origen escribe menu.htm.
n. En Desplazamiento selecciona No.
ñ. En Bordes selecciona No.
o. Activa la casilla Mismo tamaño.
p. Pulsa sobre el marco derecho en el panel Marcos.
q. En Desplazamiento selecciona No.
r. En Bordes selecciona No.
s. Desactiva la casilla Mismo tamaño.
2. Modificar los vínculos de la práctica anterior el archivo que creamos de menú.
a. Seleccionar la celda que contiene la palabra Inicio.
19
1. En la sección de propiedades HTML/Destino, estableceremos el

destino como _parent.
Explica que _parent abre el documento vinculado en la ventana
del marco que contiene el vínculo o en el conjunto de marcos
padre. Tomando en cuenta que el marco padre es el marco en
el que se encuentra el documento inicial, sobre el que se han
insertado el resto de marcos
b. Seleccionar la celda que contiene la palabra Mapa.

1. En la sección de propiedades HTML/Destino, estableceremos el
destino como _mainframe.
Explicar el destino _mainframe se considera la como el marco donde se
presentó la información de la página de quienes somos es la sección junto
al marco de la izquierda, se podría decir que es el marco donde se
presentara el contenidos de las páginas.
Explicar las otras opciones de los destinos de los destinos

_self: Es la opción predeterminada. Abre el documento vinculado en el mismo
marco o ventana que el vínculo.
_top: Abre el documento vinculado en la ventana completa del navegador, lo
cual quiere decir que los marcos de la ventana desaparecerán al abrir el
vínculo en ella.
Además de estos destinos para los enlaces, también aparecerán los nombres
de los distintos marcos de la página.
3. Seleccionar la opción de guardar todo y el último marco nombrarlo como inicio.htm.

4. Modificar el vínculo de la página Index.htm
a. Abrir la página index.html, situarse en la parte donde se encuentra texto de
Entrar.
b. Cambiar el vínculo por la página de inicio.htm.
c. Guardar la página y probarla en el explorador pulsando la opción <F12>.
sugerido)

 Inserción de marcos.
 Propiedades de los marcos.
 Modificación de vínculos a otras páginas.
 Diferentes destinos de vínculos
20
Páginas Web.
21
Práctica 7. Creación de unas marquesinas y modificación de marcos.

Explicar que las marquesinas son texto, imágenes, o una mezcla entre texto e
imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de
línea.
1. Creación de una página para las marquesinas.
Seleccionar la opción de Adjuntar hoja de estilos y ahí seleccionamos la hora
de estilos almacenada en nuestro sitio.
b. Seleccionar la opción de Insertar/ Imagen.
Elegir una imagen para mostrarse en la marquesina.
c. Escribir el texto IMCO Computación.
Elegir un formato de los estilos definidos.
Definimos como la alineación align="center".
d. Lo anterior debe de ser incluido dentro de las siguientes etiquetas:
<marquee behavior="alternate">
..
.
</marquee>
Explicar que la propiedades behavior=”alternate” , la marquesina se desplazará de
lado a lado de la ventana, como si rebotara en los extremos.
2. Modificación de un marco.
a. Abrir el archivo de la práctica anterior llamado inicio.htm
b. Seleccionar la opción Modificar/Conjunto de marcos/Dividir marco hacia
abajo.
i. Explicar que con esta opción lo que haremos será introducir un nuevo
marco donde incluiremos algunos elementos que dará mayor
presentación de nuestra página web.
c. Modificar propiedades de la página
a. Cambiar el tamaño del nuevo marco.
1. Colocamos el cursor de mouse sobre la línea puenteada que divide a
ambos marcos y arrastrarlo al tamaño deseado.
b. Establecer como nombre del marco marquesina.
Explicar que para seleccionar este marco es necesario seleccionar la opción de
Ventana/Marcos y posteriormente seleccionar el marco superior.
c.En la propiedad Origen escribir marquesina.html
Esto es para que la página que realizamos en los puntos anteriores se muestre
en esta parte.
3. Inserción de una imagen debajo del menú.
a. Situarnos en la parte inferior de la tabla del menú, seleccionar
Insertar/Imagen, seleccionar la imagen para mostrar.
4. Guardar la página y probarla en el explorador pulsando la opción <F12>.
22
sugerido)

 Creación de una página para una marquesina.
 Dividir un marco para colocar otros recursos.
 Propiedades de los marcos.
Páginas Web.
23
Práctica 8. Crear una plantilla

Explicar que las plantillas son una especie de copia de la página en la que van a estar
basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer
unas zonas editables y otras zonas que serán fijas, que no podrán ser modificadas.
Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas
basadas en ella. Esto nos puede ahorrar mucho trabajo.
Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro
de una carpeta llamada Templates.
1. Creación de una página HTML.
a. Menú Archivo / Nuevo / Pagina en blanco / HTML / Ninguno.
Explicar que existen diferentes diseños al momento de crear nuestra página

web con creación desde conjunto de columnas hasta la utilización de plantillas
prediseñadas.
b. Establecer las propiedades de la página:
a. Selecciona la categoría Apariencia (CSS).

1. Fuente de la página tipo Arial, Helvetica, sans-serif
2. Tamaño de la fuente: 14 px.
3. En Color de texto: escribe #2A3F00.
4. En Color de fondo: escribe #FFA.
b. Seleccionar la categoría Vínculos CSS.

1. En Color de vínculos: escribe #FF5F00.
2. En Vínculos visitados: escribe #007F00.
3. En Vínculos activos: escribe #FFFF00.
c. Seleccionar la categoría de Encabezados CSS

 En la parte de fuente elegir (Iguale que fuente de la página)
 Encabezado 1: 12 px color #2A0000
 Encabezado 2:14 px color #2A0000
 Encabezado 3: 16 px color #00BF00
 Encabezado 4: 18 px color #FF3F00
 Encabezado 5:24 px color #2A0000
 Encabezado 6: 36 px color #FF3F00
d. Seleccionar la categoría de Titulo y Codificación escribir Documento para

plantilla
2. Definir el diseño del contenido de la página.

a. Insertaremos un contenedor DIv
i. Seleccionar del menú Insertar/Objetos de diseño/ Etiquetas Div
ii. Establecer como nombre de la clase título.
iii. Escribir en la dentro la palabra Titulo de la pagina
iv. Seleccionar dentro de las propiedades de la página en la sección HTML
definir como Encabezado 4.
24
b. Insertaremos una regla, seleccionar la opción de

Insertar/HTML/Regla Horizontal
c. Inserción de elementos Div PA para definir el contenido de las
páginas.
Explicar que un elemento PA (elemento con posición absoluta) es un
elemento de página HTML (en concreto, una etiqueta div o cualquier
otra etiqueta) que tiene una posición absoluta asignada. Los elementos
PA pueden contener texto, imágenes u otros contenidos que se pueden
situar en el cuerpo de un documento HTML. Con Dreamweaver, se
puede emplear elementos PA para diseñar la página. Puede colocar
elementos PA delante o detrás de otros elementos PA, ocultar algunos
elementos PA mientras muestra otros y mover elementos PA por la
pantalla.
i. Seleccionar del menú Insertar/Objetos de diseño/
Etiquetas Div PA
ii. Definir el la secciona de propiedades lo siguiente en
 Color de fondo #FFFBF0
 Ancho 800 px
 Alto 400 px
iii. Establecer una leyenda “Contenido de la página”,
dentro de este elementó para ilustrar que en esta
sección se colocara el Contenido.
iv. Seleccionar dentro de la sección HTML de las
propiedades de la página Encabezado 3.
Explicar que dentro de este elemento se colocaría

el contenido de las páginas.
d. Inserción de elementos Div PA para definir los elementos de la
parte inferior de las páginas. (Pies de páginas)
i. Seleccionar del menú Insertar/Objetos de diseño/
Etiquetas Div PA.
ii. Colocar la Nueva etiqueta insertada en la posición
debajo del contenido de la página, solamente
arrastrándola situando el puntero del mouse en la
esquina superior derecha de la misma.
v. Definir el la secciona de propiedades lo siguiente en
 Color de fondo #FF5F00
 Ancho 800 px
 Alto 80 px
vi. Establecer una leyenda “Pie de página”, dentro de
este elementó para ilustrar dichos elementos.
vii. Seleccionar dentro de la sección HTML de las
propiedades de la página Encabezado 5.
2. Seleccionar Guardar dentro del menú de Archivo, para guardar la página anterior
como página HTML.
3. Seleccionar Archivo/Guardar como Plantilla, para guardarla ahora como una

plantilla, Establecer el nombre de Plantilla y en descripción escribir página de base.
25
4. Establecer que deseamos actualizar los vínculos a los elementos establecidos

durante el diseño.
5. Establecer regiones editables en una plantilla
Explicar que todos los elementos de una plantilla están bloqueados por
defecto. Es necesario establecer las zonas que sí podrán ser editadas en las páginas
que se basen en dicha plantilla. Para editar una plantilla hay que abrirla en
Dreamweaver. Una forma de abrirla es a través del panel Activos, pulsando dos veces
sobre ella, o estando seleccionada pulsando sobre el botón que tiene un lápiz.
a. Seleccionar la etiqueta de Titulo, e insertaremos una región editable.
i. Para insertar una región editable hay que situar el puntero en el

lugar en el que se desea insertar, y después dirigirse al menú
Insertar, Objetos de plantilla, opción Región editable, o pulsar la
combinación de teclas Ctrl + Alt + V.
ii. Establecer un Nombre para la región editable como RegionTitulo.
Explicar que las zonas editables aparecen representadas en Dreamweaver como un

recuadro con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la
zona editable.
Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en
aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de la
zona editable, podrán ser modificados en las páginas. La región editable se ajustará al
tamaño del contenido. Por lo que aunque parezca pequeña cuando aún no tiene nada no
limitará lo que queramos introducir.
b. Seleccionar la etiqueta de Contenido, e insertaremos una región editable.

i. Seleccionar la opción de Insertar/Objetos de Plantilla/ Región
Editable
ii. Establecer el nombre Región Contenido.
c. Seleccionar la etiqueta de Pie de página, e insertaremos una región editable.
i. Seleccionar la opción de Insertar/Objetos de Plantilla/ Región
Editable
ii. Establecer el nombre RegionPiePagina.
6. Guardar los cambios.
26
sugerido)

 Creación de una página como plantilla.
 Inserción de Etiquetas Div PA.
 Guardar la página como una plantilla.
 Creación de regiones editables para una plantilla.
Páginas Web.
27
Práctica 9. Creación de una página a partir de una plantilla y manejo de capas

Explicar que Una capa es un elemento de página HTML que se puede colocar en cualquier
lugar del documento. Las capas pueden contener texto, imágenes u otros contenidos que
se pueden situar en el cuerpo de un documento HTML..
1. Creación de una página HTML a partir de una plantilla.
a) Seleccione Archivo > Nuevo.

b) En el cuadro de diálogo Nuevo documento, seleccione la categoría Página de
plantilla.
c) Creación y administración de archivos
d) En la columna Sitio, seleccione el sitio de Dreamweaver que contiene la
plantilla que desea utilizar; a continuación, seleccione una plantilla de la lista
de la derecha.
e) Desactive Actualizar página cuando cambie la plantilla si no desea actualizar
esta página cuando realice cambios en la plantilla en la que se basa.
f) Haga clic en Preferencias si desea establecer las preferencias predeterminadas
del documento, como el tipo de documento, la codificación y la extensión del
archivo.
2. Inserción del título y Pie de página.

a. Escribir en la parte del título de la página: Utilización de capas
b. En la sección de pie de página escribiremos lo siguiente:
El cuadro mágico:
Consiste en colocar determinados números en un cuadrado con un número

igual de filas y de columnas de tal manera que las filas sumen lo mismo que las
columnas y las diagonales del cuadrado.
3. Creación del cuadro mágico.

Nuestro cuadrado mágico va a ser de 3 filas x 3 columnas, nueve casillas en
total a ocupar por las cifras del 1 al 9. La suma de todas las filas y de todas las
columnas y diagonales debe ser 15.
Lo que primero hay que hacer es diseñar, con un programa gráfico, las 9 cifras:
28
Es importante realizar cada imagen con un tamaño "redondo". En el ejemplo

miden 100 x 100 píxeles.
Seleccionar menú Insertar / Objetos de Diseño DivPA
A continuación iremos insertando capas e introduciendo una imagen dentro de
cada una de las capas (observa que el cursor esté dentro de la capa antes de
insertar la imagen).
Es conveniente cambiar el tamaño de la capa para adaptarla al contenido.

Observa en el panel de Propiedades que la capa tiene el mismo tamaño que la
imagen (100 x 100).
Vamos incorporando nuevas capas y, en cada una de ellas, colocamos un

número. Dreamweaver llamará a la primera capa apDiv3 (y estará la imagen
del 1) a la segunda capa apDiv4 (y estará la imagen del 2)... Es conveniente ser
consciente del nombre que Dreamweaver le va dando a cada capa (Inspector
de Propiedades).
Desplazamos esta segunda capa con el número 2 cerca de la anterior para
separarla del icono que la representa.
29
Cuando hayamos acabado tendremos en la parte superior izquierda de la

página los nueve iconos que representan las nueve capas que hemos
introducido.
Hay que tener abierto el Panel de Propiedades y comprueba, una vez más, el
nombre de la capa.
A continuación vamos a colocar los números tal y como como van a estar en la
solución final. Empezamos por la casilla superior izquierda que, en esta
solución, va a ser el 4. Lo llevamos más o menos al centro de la pantalla y le
damos a Ventana > Comportamientos
Se abrirá la siguiente ventana:
Ahora daremos clic en el icono y se desplegará el siguiente catálogo de

comportamientos:
30
De todos los comportamientos elegimos Arrastrar capa (si no tenemos activo

este comportamiento debemos seleccionar en la etiqueta del body, seleccionar
nuevamente en la opción y seleccionar Arrastrar elementos PA.
Aparecerá la siguiente ventana:
Tenemos que:
En Capa: Seleccionar la capa "apDiv3" (Estamos colocando el numero 1). Muy
importante.
Movimiento: Dejamos Sin restricciones.
Seleccionamos en Obtener posición actual para que se rellenen los números
del Destino de forma automática.
Ajustamos a 20 píxeles del destino. Esto quiere decir que, cuando el visitante
suelte el objeto a menos de 20 puntos de la solución, el objeto se colocará solo
de manera exacta en el sitio que acaba de ser obtenido al pinchar en Obtener
posición actual. Lo que proporcionará belleza en la solución final y sensación
de seguridad al saber que es esa la posición a la que había que llevar el objeto
(en este caso el número).
Le damos a Aceptar y comprobamos nuestra capa en el panel de propiedades

antes de pasar al siguiente número:
Vamos colocando cada uno de los números procurando que estén

perfectamente alineados con sus vecinos. Podemos ajustar y modificar la
posición escribiendo directamente en el panel de Propiedades la posición Iza y
Sup:
31
Si el primer número ha quedado a 250 puntos de la izquierda y a 100 puntos

de arriba, y cada capa (e imagen) ocupa 100 x 100, el segundo número deberá
quedar a 350 puntos de la izquierda y a 100 puntos de arriba, el tercer número
a 450 puntos y a 100 puntos respectivamente. El siguiente número será el
primero de la segunda fila, por eso deberá estar a 250 puntos de la izquierda y
a 200 puntos de arriba, el siguiente a 350 - 200, el siguiente a 450 - 200. Por
último la tercera fila: 250 - 300 ; 350 - 300 y 450 - 300.
Repetimos el proceso indicado para el número 4 de añadir comportamiento
"arrastrar capa" para cada uno de los números según se vayan quedando
colocados en su posición "de solución".
Al número que vamos a colocar en el centro (el 5) no le adjuntamos el

comportamiento de "arrastrar capa". Su posición será inamovible: El
visitante de la página no lo podrá mover de su posición central.
3. Guardar los cambios <cuadro_magico.htm>.

4. Visualizar la pagina con < F12>
sugerido)

 Creación de una página atreves de una plantilla.
 Inserción de capas.
 Configuración de las propiedades de las capas
 Agregar comportamientos de las capas.
 Utilización de comportamiento arrastrar.
Páginas Web.
32
Práctica 10. Creación de una imagen de sustitución.
Explicar que una imagen de sustitución es una imagen que, al visualizarse en un

navegador, cambia cuando el puntero pasa sobre ella. Son conocidas también por
imágenes Rollover.
La imagen de Sustitución describe un comportamiento interactivo que se activa
simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir,
cuando usted desliza por encima el cursor del mouse sobre la imagen ésta cambiará por
otra imagen.
1. Abrir la página de la práctica anterior.

a. Seleccionar el menú Archivo/ Abrir.
b. Elegir la página de nombre cuadro mágico.
2. Insertar una capa que contendrá la imagen de sustitución.
a. Seleccionar la opción de Insertar/Objetos de Diseño/Div PA
b. Colocar la copa en la parte derecha del cuadro mágico, estableciendo como
tamaño aproximado las mismas dimensiones
Establecer de tamaño 350 x 330 explicar que en esta capa contendrá la
imagen que mostrara la solución del cuadro mágico.
3. Inserción de una imagen de sustitución.
a. Seleccionar la opción de Insertar/Objetos de Imagen/ Imagen de sustitución
Explicar que tendremos que insertar una imagen que tenga de
dimensiones 315 x 330 px que tendrá como leyenda un texto con la
palabra Solución, y tendremos que preparar la imagen para mostrar dicha
solución a nuestro cuadro mágico de iguales dimensiones.
b. Establecer las opciones del cuadro de diálogo Insertar imagen de sustitución.
i. Nombre de la imagen: (Servirá para tener una referencia de la

imagen que presenta un comportamiento interactivo.)
ii. Imagen original: (Esta imagen será la que actuará en estado
OFF)
iii. Imagen de sustitución: (Esta imagen será la que actuará en
estado ON)
iv. Carga previa de imagen de sustitución: (Es importante marcar
esta casilla de verificación, ya que permite que se incluya
33
automáticamente en la carga de la página la(s) imagen (es) de

sustitución (las del tipo ON), esto evita posibles demoras
debido a la descarga de la imagen (del tipo ON) cuando sea
oportuno (al pasar el cursor del mouse encima de la imagen de
sustitución).
v. Texto Alternativo: (Este campo se refiere al efecto que se le
inserta a las imágenes que permite mostrar un texto después
de permanecer el cursor del mouse por pocos segundos
encima de la imagen en cuestión. Este campo es opcional. )
vi. Al hacer clic, ir a URL: (Este campo se refiere a la inserción de
un hipervínculo a la imagen. Este campo es opcional.)
4. Guardar los cambios <cuadro_magico.htm>.

5. Visualizar la pagina con < F12>
sugerido)

 Inserción de capas.
 inserción de una imagen de sustitución
 Agregar comportamientos de las capas.
 Utilización de la imagen de sustitución.
Páginas Web.
34
Práctica 11. Crear un álbum de fotos con DreamWeaver
Explicar que en esta práctica aprenderá a Crear un Álbum de Fotos Web, para se
necesitará tener una carpeta que contenga las imágenes que serán añadidas al
Álbum.
1. Crear una Carpeta que contendrá las imágenes que incluiremos en la creación del
álbum web.
2. Iniciar el Asistente que le guiará en la creación de su Álbum de Fotos Web

Seleccionar opción Comandos/ Crear álbum de fotos web del menú emergente.
Establecer las opciones del cuadro de dialogo Crear álbum de fotos web:
a) Carpeta de imágenes de origen: (Este campo se refiere a la ubicación de las

imágenes que se desean colocar en el Álbum, esta carpeta puede estar fuera
del Sitio.)
b) Carpeta de destino: (Este campo se refiere a la ubicación de la carpeta donde
se colocarán las imágenes seleccionadas anteriormente (imágenes de origen),
esta carpeta debe ser creada dentro del Sitio)
c) Tamaño miniatura: (Este apartado se refiere al tamaño de las imágenes
miniatura o thumbnails, éstas servirán de vista previa a los visitantes, las
opciones que presenta este apartado son: 36 x 36 píxeles, 72 x 72 píxeles, 100 x
100 píxeles, 144 x 144 píxeles, 200 x 200 píxeles
d) Formato de miniatura: (Este apartado se refiere a la extensión que utilizarán
las imágenes miniaturas o thumbnails, ésta extensión implica una calidad en
las imágenes y el número de colores en las mismas.)
e) Formato de Foto: (Implica las mismas consideraciones que el apartado
anterior, pero esta vez está aplicada a las imágenes tamaño real.)
Explicar que al finalizar el rellenado de los campos, deberá dar clic en la opción
Aceptar. Esta acción hará un llamado a Macromedia Fireworks y comenzará el
35
Progreso de la operación por lotes, es decir, Macromedia Fireworks comenzará

a procesar todas las imágenes que se encuentran en la Carpeta de imágenes de
origen.
Explicar que al realizar el proceso de la creación del álbum de igual manera se

creó dentro de la Carpeta de Destino (Álbum en el ejemplo) tres carpetas más y un
fichero de extensión .htm:
images (Carpeta que contendrá todas las imágenes de origen en su
tamaño original).
pages (está carpeta se creará si usted activó la casilla de
verificación Crear página de navegación para cada foto, esta opción
es recomendable marcarla, le dará más presencia a su Album de
Fotos Web).
thumbnails (Carpeta que contendrá todas las imágenes en
miniatura).
index.htm (Archivo que contendrá la portada de su Album de Fotos
Web).
3. Cambiar el la apariencia de la página creada.

a. Color o imagen de fondo.
b. Estilo de los títulos color, tamaño tipo de fuente.
4. Guardar los cambios y visualizar la página con <F12>.
36
sugerido)

 Creación de álbum de fotografías.
 Establecimiento de propiedades del álbum.
 Configuración de las propiedades las imágenes.
 Configuración del aspecto de la página creada en el álbum.
Páginas Web.
37
Práctica 12. Creación de un menú de saltos dentro de un formulario.
Explicar que los formularios permiten obtener información de los visitantes del
sitio Web. Los visitantes introducen información utilizando objetos de formulario
como campos de texto, cuadros de lista, casillas de verificación y botones de
opción y, a continuación, hacen clic en un botón para enviarla.
Explicar que vamos a realizar un menú dentro de un formulario que tenga la
particularidad de que sus opciones sean enlaces a otros documentos.
1. Crear una página para manejar marcos.

a. Seleccionar la opción Archivo/ Nuevo.
b. Elegir la opción Pagina de Muestra/ Conjunto de Marcos/ Izquierdo fijo.
I. Introducir en la opción de mainframe el nombre de “marcoprincipal”
II. Introducir en la opción de leftframe el nombre de “marcoizquierdo”
c. Establecer el ancho del marcoizquierdo de 200 px.
2. Inserción de un formulario.
a. Teniendo seleccionando el marcoizquierdo insertamos el formulario.
b. Seleccionar del menú Insertar/ Formulario/ Formulario.
c. Insertamos, dentro del formulario, una tabla con una fila, una columna y el
100% de ancho que centraremos.
d. Establecer un color de fondo al marco izquierdo bgcolor="#0099FF”.
e. Guardar este marco con el nombre marcoizquierdo.html
3. Modificación del marco principal

Estableceremos el contenido de este marco con el realizado en la práctica 1
paso número 2.
Guardar este marco con el nombre marcoprincipal.html

4. Inserción de un Menú de Salto.
a. Con el cursor dentro de la tabla, insertamos el menú: Insertar / Objetos de
formulario /Menú de salto.
b. Aparecerá el siguiente cuadro de diálogo en el que hay que ir rellenando las
diferentes opciones.
38
Empezamos con la primera opción que no va a ser enlace:

Elige una opción:
c. Pulsamos el botón y escribimos la siguiente opción esta vez ya con la
dirección del enlace:
i. ¿Quiénes somos? con la dirección de la página quienessomos.html
ii. Ubicación con la dirección de la página ubicación.html
iii. Página Principal con dirección hacia http://imco.edu.mx
5. Guardar la página con el nombre de menudesalto.html y visualizar en el
explorador <F12>
Nota: El enlace de la primera opción (Elige una opción, el enlace hacia

esta opción) se maneja hacia la página que se mostrara cuando se abra la
página, es decir cuando esta sea abra. En nuestro caso sería la llamada
marcoprincipal.
sugerido)
 Creación de un conjunto de marcos <Izquierdo fijo>.
 Inserción de un formulario.
 Configuración de un menú de salto.
 Creación de enlaces a diferentes páginas con el menú de saltos.
Páginas Web.
39
Práctica 13: Formulario
1. Ejecutar Dreamweaver
1. Seleccionar HTML. Explicar que es la opción de una página web.
2. Insertar Formulario. Explicar que es un formulario y cómo insertarlo, Menú Insertar/
Formulario/Formulario.
3. Insertar Tabla. Explicar que la tabla es para organizar mejor el formulario. Menú
Insertar/ Tabla, Configurar la tabla de 4 Filas y 2 columnas. Ajustar el tamaño de la
tabla manualmente. Explicar que en la primera columna se pondrá Etiquetas y en la
segunda Controles.
4. Creando el Formulario. Nos colocamos en la primera celda e insertamos un campo de
texto, Menú Insertar / formulario / campo de texto, configurando el ID como mail, la
Etiqueta como correo electrónico y en Estilo: adjuntar etiqueta de título utilizando el
atributo for, al darle aceptar se insertara la etiqueta y el control, el cual arrastraremos
a la columna de alado. Seleccionaremos Vista en vivo, daremos clic en la etiqueta se
activa el cuadro de texto para que podamos escribir, seleccionamos código en Vivo
dejamos la opción Tipo: Una línea, en ancho carácter y máximo caracteres 30 y en
valor inicial pondremos correo electrónico. Regresamos a la vista Dividir e Insertamos
en la primera columna segunda fila otro campo de texto el cual se configura el ID como
password, la Etiqueta como contraseña y en Estilo: adjuntar etiqueta de título
utilizando el atributo for, la opción Tipo: Contraseña, máximo caracteres: 10, al
hacerte esto lo que se escriba aparecerá en asteriscos en el cuadro de texto. Se
insertara 2 filas más una de País y otra de estado.
5. Vista Previa. Seleccionar la opción Vista previa en Iexplore y nos pedirá guardar antes,
lo cual haremos asignando el nombre de formulario.
Realiza tu Checklist de clase: (este es uno de los pasos más importantes de la metodología, es
aquí donde el alumno se da cuenta de TODO lo que APRENDIO en una sola sesión, el siguiente
es un guión sugerido)
Como habrán visto logramos realizar un formulario con contraseña.

Para hacerla hemos utilizado las siguientes herramientas:
1. Formulario
2. Tabla
3. Campo de Texto
4. Vista Previa
Páginas Web.
40
41
Práctica 14: Galería de Juegos Flash
1) Ejecutar Dreamweaver
a. Seleccionar HTML. Explicar que es la opción de una página web.
2) Insertar Tabla. Menú Insertar/ Tabla, Configurar la tabla de 3 Filas y 2 columnas.
Ajustar el tamaño de la tabla manualmente.
3) Obtener SWF. Abrimos de internet una página de juegos Flash y seleccionamos un
juego el cual esperaremos que cargue el loader por completo, en el Internet Explorer,
seleccionamos el Menú Herramientas / Opciones de Internet, de la Pestaña General de
la opción Historial de Exploración seleccionamos Configuración/ Ver archivos, el cual
nos abrirá una ventana de archivos temporales del cual buscaremos un swf que sea el
juego Flash. Ejemplo jewel_quest, el cual copiaremos a una carpeta.
4) Insertando SWF. Para Insertar Un archivo swf de flash nos colocamos en la celda
donde ser va alojar y seleccionamos la opción Insertar/Media/Swf y seleccionamos el
archivo swf en este caso jewel_quest, antes nos pedirá que debemos guardar antes el
archivo, lo cual haremos con el nombre de Flash, se abrirá una ventana de atributos del
swf al cual pondremos el título del juego Jewel Quest. Estos pasos se repetirán para un
juego más.
5) Vista Previa. Seleccionar la opción Vista previa en Iexplore
Realiza tu Checklist de clase: (este es uno de los pasos más importantes de la metodología, es
aquí donde el alumno se da cuenta de TODO lo que APRENDIO en una sola sesión, el siguiente
es un guión sugerido)
Como habrán visto logramos realizar una Galería de Juegos Flash.

Para hacerla hemos utilizado las siguientes herramientas:
1. Tablas
2. Insertar Media
3. Swf
4. Vista Previa
Páginas Web.
42
43
CRÉDITOS
ESTE CUADERNO DE PRÁCTICAS SE REALIZÓ CON LA COLABORACIÓN DE:
ISC FERNANDO FERNANDEZ APARICIO

SUBDIRECTOR, CATEDRATICO (IMCO VERACRUZ)
imco.veracruz@hotmail.com
ISC JESÚS ENRIQUE SOLÍS SÁNCHEZ

SUPERVISOR ÁREA DE DISEÑO GRÁFICO (MÉRIDA, YUCATÁN)
imcocad_merida@hotmail.com
44
Porque la principal preocupación de IMCO es

que tú aprendas cosas útiles para tu vida
diaria. El presente cuaderno de prácticas de
Dreamweaver es el resultado de tus
sugerencias y necesidades.
45

Crea página web Dreamweaver principiante

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Crea página web Dreamweaver principiante

Hochgeladen von

Copyright:

Módulo de Macromedia

IMCO Computación e inglés te da la más cordial bienvenida a tu módulo de DISEÑO DE

Recomendamos tanto al alumno, como al profesor no conformarse con el material aquí

Información para el profesor

Los textos marcados en azul son actividades consideradas vitales para el

Práctica 1: Creación de mi primera página.

Práctica 2: Creación de hoja de estilos y una página de información.

Práctica 3. Diseño de Tablas.

Práctica 4. Creación de una página de ubicación del plantel

Práctica 5: Creación de hipervínculos y una página de menú.

Práctica 6: Crear y configurar marcos

Práctica 7. Creación de unas marquesinas y modificación de marcos.

Práctica 8. Crear una plantilla

Práctica 9. Creación de una página a partir de una plantilla y manejo de capas

Práctica 10. Creación de una imagen de sustitución.

Práctica 11. Crear un álbum de fotos con DreamWeaver

Práctica 12. Creación de un menú de saltos dentro de un formulario.

Práctica 13: Formulario

Práctica 14: Galería de Juegos Flash

Práctica 1: Creación de mi primera página.

1. Configuración de un sitio web.

2. Creación de una página HTML.

i. Elige la opción Propiedades de la página en el menú contextual

1. Escribir en el Título, escribe menú.

d. Seleccionar la categoría Apariencia/HTML.

3. Insertar una imagen en la página web.

Explicar que este nombre de selector aplicará la regla a todos los

Explicar que al darle este nombre de archivo, este archivo se

1. Creado y configurado un sitio web.

Práctica 2: Creación de hoja de estilos y una página de información.

1. Abrir Dreamweaver, seleccionar la opción de Sitio/Administrar Sitios, para abrir nuestro

Explicar que los estilos seleccionados se quitarán de la página actual, y se vinculará

5. Creación una página para establecer el uso de los estilos.

IMCO es una Institución Educativa con más de dos décadas de trayectoria y

IMCO Computación tiene como misión formar técnicos profesionales de

2. Establecer los como encabezados de sección los elementos sigs.:

5. Guardar los cambios con el nombre quienessomos.htm y visualizar la página

1. Creando y configurado una hoja de estilos.

Práctica 3. Diseño de Tablas.

1. Abrir la página de quienesomos.htm de la práctica anterior.

Rellena la tabla para que quede del siguiente modo:

Explicar los siguientes elementos en el diseño de la tabla:

4. Seleccionamos la columna de la izquierda en la tabla seleccionamos de la parte de

En esta práctica hemos realizado las acciones siguientes:

Práctica 4. Creación de una página de ubicación del plantel

a. Menú Archivo / Nuevo / Página en blanco / HTML / Ninguno.

En esta práctica hemos realizado las acciones siguientes:

Práctica 5: Creación de hipervínculos y una página de menú.

1. Creación de un hipervínculo hacia la página ¿Quiénes Somos?

a. Abrir la página creada en la práctica 1 llamada (index.html)

c. En la parte de propiedades seleccionar la sección HTML para definir el vínculo o

d. Insertar una tabla seleccionar Insertar/Tabla, establecer los siguientes elementos:

8. Selecciona Encabezado de columna izquierda dentro de la sección de

5. Guardar la página y probarla en el explorador pulsando la opción <F12>.

En esta práctica hemos realizado las acciones siguientes:

Práctica 6: Crear y configurar marcos

1. Deben de tener los nombres leftFrame y mainFrame que vienen por

d. En Título, que aparece en la barra de documento, escribe Imco

1. En la sección de propiedades HTML/Destino, estableceremos el

b. Seleccionar la celda que contiene la palabra Mapa.

Explicar las otras opciones de los destinos de los destinos

3. Seleccionar la opción de guardar todo y el último marco nombrarlo como inicio.htm.

En esta práctica hemos realizado las acciones siguientes:

Práctica 7. Creación de unas marquesinas y modificación de marcos.

En esta práctica hemos realizado las acciones siguientes: