Submodulo1completo PDF

MÓDULO IV / PÁGINAS WEB Y PROYECTOS DE EDUCACIÓN EN LÍNEA



MODULO IV
PÁGINAS WEB Y PROYECTOS
DE EDUCACIÓN EN LÍNEA
SUBMÓDULO I
Elaboración de
páginas WEB
SUBMODULO 1
ELABORACIÓN DE PÁGINAS WEB

















                    
CAPACITACIÓN DE INFORMÁTICA

 SUBMÓDULO I. ELABORACIÓN DE PÁGINAS WEB

El comercio electrónico, también conocido como e-commerce (electronic commerce en inglés), consiste en la
compra y venta de productos o de servicios a través de medios electrónicos, tales como Internet y otras redes in-
formáticas. Originalmente el término se aplicaba a la realización de transacciones mediante medios electrónicos
tales como el Intercambio electrónico de datos, sin embargo con el advenimiento de la Internet y la World Wide
Web a mediados de los años 90 comenzó a referirse principalmente a la venta de bienes y servicios a través de
Internet, usando como forma de pago medios electrónicos, tales como las tarjetas de crédito y débito.
El fenómeno de la globalización ha creado una Nueva Economía mundial, qué cada vez se encuentra más
inter-relacionada, los mercados se amplían y flexibilizan, la producción se deslocaliza y las grandes empresas
enfrentan la creciente competencia mediante alianzas y fusiones. Hay un incremento de la productividad y la
innovación dentro del proceso productivo, estos se ven favorecidos por otras características como el proceso de
desregulación económica y el desarrollo de nuevos mercados. Permite a las empresas personalizar la relación
con el cliente disminuyendo al tiempo precios y costos, utilizando las TIC’S y requiriendo de páginas web que
SUBMÓDULO I le permitan la comunicación con sus clientes y proveedores, así como con el gobierno y otros agentes.
El alojamiento web en la “nube” (Cloud hosting) está basado en las tecnologías más innovadoras que
Elaboración de
páginas WEB
permiten a un gran número de máquinas actuar como un sistema conectadas a un grupo de medios de alma-
cenamiento, tiene ventajas considerables sobre las soluciones de web hosting tradicionales tal como el uso de
recursos. La seguridad de un sitio web alojado en la “nube” (Cloud) está garantizada por numerosos servidores
en lugar de sólo uno. La tecnología de computación en la nube también elimina cualquier limitación física para
el crecimiento en tiempo real y hace que la solución sea extremadamente flexible.
El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web.
No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad,
interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto,
imagen, enlaces y video.La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta
la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el
contacto directo entre el productor y el consumidor de contenidos.El diseño web ha visto amplia aplicación en
los sectores comerciales de Internet especialmente en la World Wide Web.
La educación en línea es aquella en la que los docentes y estudiantes participan en un entorno digital a través
de las nuevas tecnologías y de las redes de computadoras, haciendo uso intensivo de las facilidades que pro-
 porciona Internet y las tecnologías digitales.La educación en línea suele implementarse a través de entornos o
 plataformas digitales Sistemas de Gestión de Aprendizaje o LMS (Learning Management System). Un LMS es
un software basado en un servidor web que ofrece módulos para los procesos administrativos y de seguimiento
 que se requieren para un sistema de enseñanza, cuentan con módulos administrativos que permiten, entre otras
 cosas, configurar cursos, matricular alumnos, registrar profesores, y asignar calificaciones. Las plataformas
ofrecen correo electrónico, chat, foros, wikis y bases de datos, sobre las cuales pueden desplegarse diferentes
 tipos de actividades, tanto grupales como individuales.












                    

COMPONENTE I. DISEÑA Y ELABORA PAGÍNAS WEB

El diseño de páginas web se trata básicamente de realizar un documento con información hiperenlazado 
con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla
de computadora, en papel, en un teléfono móvil, etc).Estos documentos o páginas web pueden ser creadas:
con archivos de texto en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby, utilizando un programa visual
WYSIWYG o WYSIWYM de creación de páginas o utilizando lenguajes de programación del lado servidor,
para generar la página web.
Algunos portales de internet ofrecen servicios gratuitos, sin costo alguno para el suscriptor. En este tipo de
servicios generalmente son alojadas páginas con bajos recursos de mantenimiento o aquellas cuyos dueños no
poseen suficiente dinero para mantenerla. Como medio de financiamiento el servidor puede incrustar mensajes
publicitarios en diferentes lugares de la web, así como pop-ups.
Las limitaciones de estas páginas gratuitas, suelen ser: contar con espacio muy limitado impidiendo usar el
servicio como almacén de datos, no permitir alojar páginas subversivas o de contenido adulto, limitar el acceso
a configuraciones del servicio, entre otras. De todas maneras existe una amplia oferta de alojamientos gratuitos
con características muy diferentes, que pueden satisfacer desde las necesidades de programadores que desean
un lugar donde hacer pruebas hasta las de webmasters que mantienen un sitio con un bajo volumen de visitas.
Adobe Fireworks (anteriormente llamado Macromedia Fireworks) es un editor de gráficos vectoriales y SUBMÓDULO I
mapas de bits.Fireworks está pensado para que los desarrolladores web puedan crear rápidamente interfaces
Elaboración de
web y prototipos de websites. El programa tiene la capacidad de integrarse con otros productos de Adobe tales páginas WEB
como el Dreamweaver o Flash. Está disponible de forma individual o integrada en la Adobe Creative Suite.
Adobe Fireworks es la solución perfecta para diseñar y producir elementos gráficos para la web. Se trata del
primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de
gráficos web, permite crear elementos e imágenes con una gran variedad de colores, formas y animaciones,
que se pueden integrar a las páginas web.
Dreamweaver Implementa elementos de diseño, como texto, imágenes, imágenes de sustitución, mapas
de imágenes, colores, películas, sonido, vínculos HTML. Permite utilizar funciones de creación de páginas
incrustadas para dichos elementos, como títulos y fondos, escribir directamente en la página o importar con-
tenido desde otros documentos. También proporciona comportamientos para llevar a cabo tareas como la
validación de un formulario cuando el visitante hace clic en el botón Enviar o abrir una segunda ventana del
navegador cuando la página principal ha terminado de cargarse. La codificación manual de páginas Web
es otro método de crear páginas.
Dreamweaver ofrece sencillas herramientas de edición visual, pero también incluye un entorno de codifi-

cación más sofisticado. Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de
las tablas o marcos HTML tradicionales, para organizar el contenido de un sitio Web. 















                    

 ACTIVIDAD DE APRENDIZAJE

Contesta correctamente las siguientes preguntas:
1. ¿Qué es una página web?

____________________________________________________________________________________
____________________________________________________________________________________
2. ¿Cuáles son los portales que ofrecen páginas web gratuitas?

____________________________________________________________________________________
____________________________________________________________________________________
SUBMÓDULO I 3. ¿Qué es el hospedaje de páginas web o web host?

Elaboración de
páginas WEB ____________________________________________________________________________________
4. ¿Qué es una dirección de internet propia?

____________________________________________________________________________________
____________________________________________________________________________________
5. ¿Qué es el Google Site?

____________________________________________________________________________________
6. ¿Qué ofrece Google +?

____________________________________________________________________________________

7. ¿Qué tipos de alojamiento web existen?

____________________________________________________________________________________

____________________________________________________________________________________

 8. ¿Cómo se puede crear y publicar una página web gratuita en Wix.com?
 ____________________________________________________________________________________
 ____________________________________________________________________________________
 10. ¿Para qué sirve el programa Adobe Fireworks?

 ____________________________________________________________________________________
 ____________________________________________________________________________________

11. ¿Cómo se puede crear un banner en Fireworks?

____________________________________________________________________________________

____________________________________________________________________________________

12. ¿Qué es un rollover?

____________________________________________________________________________________


                    

1.1 CONCEPTO, ELEMENTOS Y CARACTERÍSTICAS DE UNA
PÁGINA WEB 

SUBMÓDULO I
Elaboración de
páginas WEB
COMPETENCIAS A DESARROLLAR
GÉNERICAS:
DISCIPLINARES:








CREACIÓN Y ALOJAMIENTO DE PÁGINAS WEB 

Para crear páginas Web podemos emplear diferentes métodos y programas. En cualquier caso para tener
una página en Internet necesita: 

A. Crear los archivos o archivos que componen la Web. Una Web normalmente se compone de un cierto 
número de páginas. 
B. Una dirección de Internet. Por ejemplo la dirección www.nissan.com.mx Por ejemplo www.elfinanciero.
com.mx 
C. Tener un alojamiento o servidor en Internet donde colocar la Web. Lo normal es construir la web y
tenerla en el disco duro de nuestra computadora y luego enviarla a un servidor de Internet. Un servidor

de Internet en realidad es otra computadora que está permanentemente encendido y conectado a la Red. 
D. Enviar los ficheros normalmente desde el disco duro de su computadora al sitio donde se alojará la página.


                    

Algunos Portales permiten la creación y alojamiento de páginas personales directamente en Internet de
 forma sencilla.
 A) LA CREACION DE LOS ARCHIVOS.
La construcción de las páginas de una Web se suele realizar utilizando diferentes programas editores.
Los programas editores permiten la creación de páginas de una forma sencilla sin tener que programar
cada instrucción del lenguaje Html. Si dispone de Microsoft Office seguramente tiene instalado en su
computadora el programa Front Page. Este programa le permite crear de una forma sencilla los archivos
que componen las páginas Web.Los programadores avanzados suelen emplear varios programas para
la creación de las páginas. Uno de los favoritos es el Dreamweaver. Si dispone del navegador Netscape
una opción sencilla para crear rápidamente páginas Web es emplear el programa Netscape Composer.
Otra opción es programar directamente en HTML. Esta es una opción para los que desean profundizar
y comprender el lenguaje que se encuentra detrás de las páginas de Internet.
B) LA DIRECCION DE INTERNET
Existen dos opciones:
 Tener una DIRECCIÓN PROPIA del tipo www.aulafacil.com.
SUBMÓDULO I Esto es lo que se denomina una dirección de primer nivel.
Elaboración de  Utilizar una DIRECCIÓN GRATUITA que nos proporciona al-
páginas WEB gún Portal de Internet del tipo: www.geocities/yosemite/Aqui/
lapaginadenacho
Si desea crear una página personal y no necesita que la Web dispon-
ga de una dirección de primer nivel puede crear y alojar su página
en alguno de los Portales que ofrecen esta posibilidad. Algunos Portales que proporcionan alojamiento
y facilidades para crear páginas personales son: WIX,Iespana y Pobladores. Puede ver la explicación en
Páginas gratuitas. Para realizar las páginas necesitará seguramente imágenes o Gif y diferentes comple-
mentos para darle vistosidad a las páginas.
C) EL ALOJAMIENTO
El alojamiento puede ser:
 GRATUITO. Normalmente es una opción para páginas personales. Varios Por-
tales en Internet proporcionan alojamiento gratuito con ciertas restricciones.
Páginas gratuitas

 PAGADO. Para las empresas lo normal es pagar un alojamiento para sus
 páginas. Una explicación más detallada la puede encontrar en Alojamien-
 to
D) ENVIO DE LAS PÁGINAS A INTERNET
 Para subir los ficheros que ha creado desde el disco duro de su computadora al servi-
dor de Internet disponemos de varias opciones. Nuestra opción favorita es utilizar un
 programa especializado FTP.

LA DIRECCIÓN DE LA PÁGINA Y LOS DOMINIOS EN INTERNET

Con relación a la dirección de la página tenemos dos primeras opciones: Si queremos tener nuestra propia
 dirección. Como por ejemplo Aulafacil.com. Tenemos que pagar el registro.Otra opción es utilizar un alo-
 jamiento gratuito. El alojamiento gratuito tiene ciertas limitaciones por lo que se suele utilizar para páginas
personales. Una dirección del tipo:https://sites.google.com/site/mtrojgfc

 REGISTRO DE UN DOMINIO PROPIO
 Si queremos tener nuestra propia dirección tenemos que buscar un nombre
 que no esté registrado y pagar el registro. Podemos registrar diferentes
terminaciones:

 La terminación .com es para las empresas y procede de company (compañía-empresa)
  La terminación .net esta pensada para las redes. (empresas que manejan el internet)
  La terminación .org se refiere a organization. Organizaciones no lucrativas.

                    

 La terminación .gob es para las instituciones gubernamentales.
 La terminación .edu se utiliza para instituciones educativas. 
Las marcas de empresas reconocidas, se encuentran protegidas por


la ley. Las empresas que ya tienen direcciones funcionando en Internet
están protegidas por las legislaciones. Por ejemplo, sí deseamos que
nuestra página se denomine computadorasperez.com abrimos la página
webTuwebhost Tecleamos el nombre que deseamos registrar.
Por ejemplo computadorasperez.com y pulsamos el botón Buscar,
una vez que conseguimos localizar un dominio que este libre y por tanto
no registrado, pulsamos Registrar.
A continuación, seguimos las distintas páginas para dar la conformidad al contrato y dar los datos nece-
sarios.Completamos el formulario de Pago.
Otras empresas donde podemos realizar el registro con las instrucciones
en castellano son: hostingweb, okhosting, internetworks.com.mx, tuwebhost.
com, algunos son bilingües, en inglés y español como godaddy.com, etc. El
registro de dominios con terminación .es podemos realizarlo directamente en
Nic. SUBMÓDULO I
Podemos realizar el registro en numerosas páginas. Todas tienen la mis-
ma validez y son parecidas. Un registro muy barato y sencillo pero con Elaboración de
páginas WEB
las instrucciones en ingles Dotster. Otro registro es el de Netsol. Podemos
igualmente realizar el registro con las terminaciones para los diferentes paí-
ses. Por ejemplo en la página de VeriSing. Los aspectos legales relacionados con los dominios podemos
consultarlos en Dominiuris
PAGINAS GRATUITAS
Si deseamos tener una página gratuita no necesitamos realizar el registro del domi-
nio. El Portal donde alojemos de forma gratuita la página será la que nos propor-
cione la dirección. Por ejemplo si utilizamos Iespana la dirección puede ser:
http://www.iespana.es/cursocrear/
En cualquier caso si tenemos una empresa es interesante registrar el dominio con la terminación .com y
tenerla reservada.


CREACIÓN DE UNA PÁGINA PERSONAL GRATUITA

En numerosos Portales podemos crear una página personal. Por ejemplo en sim-
plesite, en Wix, hostingery en google site.Desde la portada. Pulsamos sobre Mi 
sitio, Pulsamos sobre Crear. Aparecen las condiciones del contrato. Pulsamos al 
final de la página Si acepto las condiciones.
En la página siguiente ponemos el nombre y los datos del sitio. Por ejemplo 
aaprender y un título por ejemplo “los mejores cursos”.

Nos hacemos miembros de I-club dando nuestros datos personales y una direc-
ción de E-mail auténtica. Ahora tenemos que activar nuestro sitio utilizando la clave 
de activación que recibimos en la dirección de E-mail que hemos dado. Entrando de
nuevo a Mi sitio. En la parte superior izquierda de la página se encuentran las he- 
rramientas de diseño, Diseña tu sitio.Una forma sencilla de realizar una página es utilizar el Editor HTML. 
Otros sitios que ofrecen espacio gratuito para páginas personales.

GOOGLE SITES 
Es una aplicación online gratuita ofrecida por la empresa estadounidense Google. 
Esta aplicación permite crear un sitio web o una intranet de una forma tan sencilla

como editar un documento. Con Google Sites los usuarios pueden reunir en un
único lugar y de una forma rápida información variada, incluidos vídeos, calenda- 
rios, presentaciones, archivos adjuntos y texto. Además, permite compartir información con facilidad para ver-
la y compartirla con un grupo reducido de colaboradores o con toda su organización, o con todo el mundo. 

                    

A continuación las características principales de Google Sites:
  Fácil creación de plantillas.
 No requiere programación como el HTML o CSS.
  Plantillas de diseño disponibles.
 Fácil manejo de archivos.
 Fácil manejo de archivos adjuntos.
 Personalización de la interfaz del sitio.
 Fácil creación de contenido multimedia (vídeos, documentos, hojas
de cálculo y presentaciones de Google Docs, fotos de Picasa y he-
rramientas de iGoogle).
 Designación de lectores y colaboradores.
 Búsqueda con la tecnología Google en el contenido de Google Sites.
 Creación de intranets, páginas de empleados, proyectos, etc
GOOGLE +
Google+ (pronunciado y escrito también Google Plus, abreviado
SUBMÓDULO I como G+ y en algunos países de lengua hispana pronunciado Google
Elaboración de
Más) es un servicio de red social operado por Google Inc. El servi-
páginas WEB cio, puesto en funcionamiento el 28 de junio de 2011, está basado en
HTML5. Los usuarios tienen que ser mayores de 13 años de edad,
para crear sus propias cuentas. Google+ ya es la segunda red social
más popular del mundo con aproximadamente 343 millones de usua-
rios activos.
Google+ integra distintos servicios: Círculos, Hangouts, Inte-
reses y Comunidades. Google+ también estará disponible como una aplicación de escritorio y como una
aplicación móvil, pero sólo en los sistemas operativos Android e iOS. Fuentes tales como The New York
Times lo han declarado el mayor intento de Google para competir con la red social Facebook, la cual tenía
más de 750 millones de usuarios en 2011. El 20 de septiembre de 2011, Google permitió la creación de
cuentas a usuarios con más de 18 años, con mejoras en sus extensiones de videoconferencias. El 41.99% de
los usuarios de Google+ buscan amigos, y el 43.88% son solteros.
 ALOJAMIENTO DE PÁGINAS
 Tenemos una primera opción que hemos comentado anteriormente y es el
 alojamiento gratuito. Numerosas páginas personales se alojan en Portales
que ofrecen espacio gratuito. Este sistema suele tener muchas limitacio-
 nes y restricciones. Podemos alojar nuestra página gratis en GratisWeb
 por ejemplo o en Iespana, en México se puede utilizar el google site.
Para las Webs de empresas
 o profesionales lo normal es un
alojamiento de pago con una di-
 rección propia. Existen numerosas empresas que proporcionan aloja-
 miento. Por ejemplo, en castellano son importantes Arsys.es y Acens.
Para buscar y comparar alojamiento podemos ir a la página Busca-
 Host. Existen proveedores de los Estados Unidos que proporcionan
 alojamientos a bajo costo de gran capacidad. Aunque las instrucciones
suelen estar en idioma inglés. Por ejemplo Yahoo y Linuxwebhost.
 Para buscar y comparar alojamientos en empresas Norteamericanas
podemos hacerlo en Hostindex.
 Podemos tener distintos tipos de alojamientos, dependiendo del sistema operativo o si compartimos la
 computadora con otros clientes. Dependiendo del sistema operativo que utilizan podemos distinguir servi-
dores:Los servidores Windows que suelen ser más caros y los servidores que emplean el sistema operativo
 Unix o Linux. Ciertas bases de datos o programas funcionarán en unos servidores pero no en otros. Las
 empresas de alojamiento suelen especificar en las características técnicas de sus servidores que programas y
bases de datos soportan. El tipo de alojamiento puede ser:


                    

 ALOJAMIENTO COMPARTIDO. Es el más frecuente. A menos que se trate de una página con mu-
chas, muchas, visitas esta es la opción típica. En este tipo de alojamiento varias páginas comparten un 
servidor. Cada cliente tiene asignada una parte del disco duro que gestiona con independencia. Un alo-
jamiento compartido es como un apartamento en un edificio.

 SERVIDOR DEDICADO. Todo el servidor es para una página o empresa. Es un sistema más costoso.
Apropiado para empresas con páginas que reciben muchas miles de visitas cada día. Es como tener una
vivienda independiente.
Si tiene dudas contrate un alojamiento de bajo costo. En caso de

necesitar más recursos, normalmente puede aumentarlos rápidamente
comunicándoselo a la empresa de alojamiento. Algunas empresas in-
cluso disponen de sistemas automatizados para solicitar el incremento
de los recursos.
Internet está formada por un conjunto de servidores conectados.
Un servidor es una computadora conectado a la red de acceso a Inter-
net que dispone de un programa que es capaz de recibir una URL y
devolver una página web al que hizo la petición. Podríamos decir que
Internet está formado por una gran cantidad de servidores que pueden SUBMÓDULO I
intercambiar información entre ellos. Es una gran red mundial de orde-
nadores.Los ordenadores se pueden comunicar porque están unidos a través de conexiones y gracias a que Elaboración de
páginas WEB
utilizan un lenguaje o protocolo común, el TCP/IP.
Según el esquema que podemos ver en la imagen, un usuario se conecta a la red (a través de un módem
o un router, ya sea vía línea telefónica, cable, satélite, etc...).
A partir de este momento el protocolo TCP/IP entra en juego, gracias a él puedes comunicarte con tu
Proveedor de servicios de Internet (ISP) dándole a conocer tu dirección física.
Utilizando TCP/IP, el ISP asigna una dirección IP a tu PC y en ese momento se te da acceso a la red.
Cuando queremos acceder a una página proporcionamos un dominio que es traducido en los Servidores
DNS y localizado. Cuando sabemos en qué Servidor Web se encuentra la página que queremos visitar se
procede a su descarga y visualización en el navegador del PC.
ACTIVIDAD PRACTICA


Contesta las siguientes preguntas:

1. ¿Qué se necesita para crear páginas web? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
2. ¿Qué programas editores se pueden utilizar para crear los archivos de la página web? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
____________________________________________________________________________________ 

3. ¿Qué opciones hay para la dirección de internet?

____________________________________________________________________________________

____________________________________________________________________________________

____________________________________________________________________________________


                    

4. ¿Qué tipos de alojamiento se pueden obtener?

____________________________________________________________________________________

____________________________________________________________________________________
____________________________________________________________________________________
5. ¿Cómo se envían los archivos para una página web?

____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
6. ¿Qué tipos de dominio hay?

____________________________________________________________________________________
SUBMÓDULO I ____________________________________________________________________________________
Elaboración de ____________________________________________________________________________________
páginas WEB
7. ¿Qué sitios que ofrecen páginas de internet gratuitas?

____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
8. ¿Cómo se puede crear una página web gratis?

____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________

 9. ¿Qué es un google site?
 ____________________________________________________________________________________
 ____________________________________________________________________________________
 ____________________________________________________________________________________

10. ¿Qué es el google +?

____________________________________________________________________________________

____________________________________________________________________________________

____________________________________________________________________________________

____________________________________________________________________________________






 10
                    

ACTIVIDAD DE APRENDIZAJE 

Elabora un cuadro sinóptico sobre el tema 1.1
SUBMÓDULO I
Elaboración de
páginas WEB
















11 
                    

 EVALUACIÓN FORMATIVA

Desarrolla las actividades siguientes.
1. Crear una cuenta de correo de google (puede ser cualquier cuenta de

google, Gmail)
2. Crear un sitio google para subir archivos (Google site)
3. Agregar por lo menos tres páginas secundarias
4. Subir un archivo de tamaño pequeño a cada una de las páginas.
5. Activar la opción para permitir que los visitantes escriban comentarios.
6. Probar el sitio descargando y abriendo un archivo en línea.
7. Crear una página web de Google +
8. Agrega texto y una imagen a tu página.
9. Establecer un vínculo con el sitio google.
10. Agregar un video de tamaño pequeño y compartirlo con tu instructor.
SUBMÓDULO I 11. Agregar un evento y compartirlo
Elaboración de 12. Agregar una encuesta y compartirla.
páginas WEB 13. Mostrar tu página y tomar evidencia fotográfica o con captura de pantalla.
14. Crea una página web en simplesite.com con el nombre de tu equipo de trabajo.
15. Copia las direcciones en un documento y compártelo con tu instructor, por medio del correo electrónico.
Guía de observación 1.1
INSTRUCCIONES: Marca con una X si cumple los elementos señalados en la tabla del indicador corres-
pondiente en la columna Si, y en caso contrario registra en la columna de No, si tienes observaciones que
consideres importantes anótalas al final en el espacio indicado.
Registro de
No. Indicadores de desempeño cumplimiento Observaciones
SÍ NO
 Creó un sitio google para subir archivos
1.
 (Google site)
Agregó por lo menos tres páginas secunda-
 2.
rias
 Subió un archivo de tamaño pequeño a cada
3.
una de las páginas.

Activó la opción para permitir que los visi-
 4.
tantes escriban comentarios.
 Probó el sitio con una descarga y abriendo
5.
un archivo.

6. Creó una página web de Google +

 7. Agregó texto y una imagen a tu página.
 8. Estableció un vínculo con el sitio google.

 Agregó un video de tamaño pequeño y lo
9.
compartió.

10. Agregó un evento y compartió

11. Agregó una encuesta y la compartió.

 12. Creó una página web en el portal indicado
 12
                    

1.2 CREACIÓN DE UN SITIO WEB GRATUITO


SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







WIX, HERRAMIENTA DE CONSTRUCCIÓN DE SITIOS WEB

Es una herramienta on line para sitios web con mucha facilidad y gran atrac- 
tivo, ya que están basados en tecnología flash, lo que le entrega a estos sitios,
grandes posibilidades de animación y personalización a partir de una serie de 
diseños predeterminados de planillas a elección. 
Con la herramienta que funciona totalmente en línea, se pueden crear
sitios web con widgets como por ejemplo el contacto o comentarios, tarjetas 
de presentación, recursos pedagógicos, e incluso animaciones en flash para
después usar en otro sitio web o en un blog.

La herramienta funciona con drag&drop, lo que quiere decir que con tan sólo arrastrar, cortar y pegar 
podemos armar el sitio web en minutos, aunque de igual forma permite incorporar formato HTML por si se
quiere agregar algún elemento externo. 

13 
                    

El registro es sumamente sencillo al igual que el uso de la herramienta, aunque sus
 comandos están en inglés, pero son muy intuitivos para utilizar, además de que se puede
basar un diseño en alguna plantilla de las que ofrece la aplicación con lo que el diseño es
 mucho más sencillo todavía, o en su efecto, borrar la plantilla y comenzar un sitio desde
cero. También se encuentra la versión en español.
Para acceder a Wix, escriba la dirección: http://es.wix.com, puede revisar desde
un primer momento las páginas y sitios que van creando los usuarios o las planillas
que ofrece el programa y que nos permiten hacernos una idea de sus potencialidades.
Finalmente hay un videotutorial que explica en español como utilizar el programa.Aquí está la página de
preguntas frecuentas sobre Wix:
http://support.wix.com/index.php/P%C3%A1gina_principal
El portal Wix también ofrece planes de hosting para diferentes usos,
como el comercio electrónico, emprendedores y desarrolladores de sitios
web, para uso particular de personas o instituciones educativas, cultura-
les, deportivas o de cualquier índole.
Wix ofrece soporte técnico para que pueda desarrollar el sitio en caso
de tener alguna dificultad.
SUBMÓDULO I
Elaboración de
CREACIÓN DE LA PÁGINA WEB CON WIX
páginas WEB
Para iniciar con la creación de una página web en Wix, es necesario disponer de
una cuenta de correo electrónico, de preferencia de Google o de Facebook.
Se escribe la cuenta de correo electrónico y la contraseña, se marca la casilla
“Soy un usuario nuevo” y se pulsa el botón REGISTRATE.
Aparece una ventana en la que da la bienvenida a Wix y ofrece una pequeña
introducción al sitio y sus funciones.
En la siguiente ventana se elige la categoría sobre
la que deseas hacer la página web, al elegir la catego-
ría se despliega un listado de plantillas, se pulsa sobre
el botón YA y aparece un conjunto de plantillas.
Se pueden visualizar las plantillas, con-
siderando las necesidades de la persona, em-
presa o institución que desea la página web, y elegir la plantilla que

se adapte mejor, en la parte final de la página se puede mostrar más
 plantillas.
  1 2 3 4 5 
 Para elegir la plantilla se pulsa sobre el botón
EDITAR.
 Aparece el editor.

FUNCIONAMIENTO DEL EDITOR DE WIX

 En Wix se dispone de un menú formado por cinco botones, cada uno
de ellos muestra una lista con las opciones relacionadas a la función.
 El botón PÁGINAS permite navegar a través de las páginas.
 El botón DISEÑO muestra las herramientas de diseño para hacer
que el sitio se vea exactamente como se desea, se tiene una opción de Fondo,
 Colores, y Fuentes.
El botón AGREGAR muestra un listado de los elementos que se pueden agre-
 gar al sitio, como texto, imágenes, galería, multimedia, formas y líneas, botones
 y menús, blog, tienda online, social, Apps y creador de listas.
El botón Wix App Market, permite aumentar la presencia online con una
 gran variedad de aplicaciones geniales y populares, solo es necesario
 elegirla.
El botón OPCIONES cambia las configuraciones del sitio como

 14
                    

dirección del sitio, SEO, configuraciones de redes sociales, estadísticas y favicon.
En el botón AGREGAR se elige la opción TEXTO, aparece un cuadro 
de dialogo, se pulsa sobre el botón Editar Texto y aparece un marco en la
página, y la barra de herramientas de texto, se escribe el texto 
y se selecciona para modificar las características con la barra
de herramientas, posteriormente se puede modificar haciendo
clic en el texto y en el menú contextual se elige la opción Editar
Texto.
CAMBIAR EL ESTILO DEL ENCABEZADO
Para cambiar el estilo del encabezado, se pulsa sobre el icono Páginas y se busca el botón
Cambiar Estilo, se puede personalizar el encabezado o con algún estilo predeterminado.
RENOMBRAR PÁGINAS
Las plantillas que ofrece Wix, muestran un conjunto de cuadros de texto y títulos que pue-
den ser cambiados con facilidad por el texto que desee poner el usuario,
se pueden mover a otro lugar, eliminarlos en caso de que no sean necesarios o agregar
otros nuevos si faltan. Wix permite cambiar el nombre de dichos cuadros de títulos, para
ello se utiliza el menú PÁGINAS y la opción Renombrar Páginas, o bien mediante el menú
contextual que aparece al hacer clic en la página. SUBMÓDULO I
CAMBIAR EL NOMBRE
Después de utilizar la opción Renombrar Páginas, aparece el cuadro de dialogo Elaboración de
páginas WEB
Opciones y SEO, en el que muestra el nombre de la página, en el recuadro se
escribe el nuevo nombre que se desea que aparezca en la página, considerando
que ese nombre también aparecerá en los botones de menú y se utilizará para
desplazarse por todas las páginas en la navegación por el sitio web.
Se tienen varias opciones como establecer la página de inicio, ocultar del
menú, proteger la página, quitar el encabezado y pie de página, configurar el
SEO (SearchEngineOptimizer), cambiar el estilo y cambiar el fondo de página.
CONFIGURACIÓN SEO DE LA PÁGINA
Para que una página web sea encontrada por los motores de búsqueda, debe
tener un título, y palabras clave sobre el contenido de la página, por eso Wix,
solicita que se escriba el título de la página, que se haga una descripción del
contenido y que se escriban palabras clave, se debe marcar la casilla de ocul-
tar de motores de búsqueda, si no desea que la página sea localizada por los
usuarios de internet. 
CAMBIAR EL FONDO 
En la actualidad, las tonalidades monocromáticas han dejado de ser atractivas, ahora
los usuarios prefieren diseños variados y llenos de color, con múltiples adornos, Wix 
le ofrece una gran variedad de plantillas con diferentes diseños y combinaciones de 
colores, con la opción Personalizar fondo, se dispone de una colección de diseños
que harán más atractiva e interesante la página web, después de ver las opciones dis- 
ponibles, se elige la que sea del agrado del usuario y se tiene la opción de aplicarla

a las demás páginas.
BARRA DE HERRAMIENTAS DEL EDITOR DE WIX 









15 
                    

GUARDAR EL TRABAJO
 Al trabajar en una computadora se tienen muchos de riesgos de perder la
información, por lo que es recomendable guardar cada 5 o 10 minutos, en
 internet el riesgo es mayor, porque repentinamente se pierden las conexiones,
por lo que es necesario guardar frecuentemente el trabajo. Al pulsar sobre el
icono Guardar aparece un cuadro de dialogo para escribir el nombre que se
le pondrá a la página, y muestra cómo quedará el nombre completo, no debe
ser mayor a veinte caracteres, porque lo recortará.
Muestra un aviso que, más adelante se puede cambiar el
nombre del sitio y que el sitio sigue siendo privado, que solo se
mostrará cuando se decida publicarlo. Se pulsa el botón Guar-
dar y muestra otro aviso, indicando que el trabajo se ha guar-
dado, pero que los cambios no están en línea, para actualizarlos
se debe utilizar el botón Publicar. Se pulsa el botón OK.
SUBMÓDULO I
ACTIVIDAD PRACTICA
Elaboración de
páginas WEB
Contesta correctamente las preguntas siguientes.
1. ¿Qué es Wix?
____________________________________________________________________________________
____________________________________________________________________________________
2. ¿Cómo funciona Wix?

____________________________________________________________________________________
____________________________________________________________________________________
3. ¿Qué significa drag&drop?


 ____________________________________________________________________________________
 ____________________________________________________________________________________
 4. ¿De qué formas se puede crear una página web en Wix?
 ____________________________________________________________________________________
 ____________________________________________________________________________________

5. ¿Qué costos tienen las páginas web en Wix?

____________________________________________________________________________________

____________________________________________________________________________________

6. ¿Cómo se inicia la creación de una página web en Wix?

____________________________________________________________________________________

____________________________________________________________________________________

 7. ¿Cómo funciona el editor de páginas web de Wix?
 ____________________________________________________________________________________
 ____________________________________________________________________________________
 16
                    

8. ¿Qué elementos se pueden agregar a la página web?

____________________________________________________________________________________

____________________________________________________________________________________
9. ¿Para qué se utiliza el botón Wix App Market?

____________________________________________________________________________________
____________________________________________________________________________________
10. ¿Cómo se puede cambiar el nombre de las páginas en Wix?

____________________________________________________________________________________
____________________________________________________________________________________
11. ¿Para qué sirve configurar el SEO de la página web?

____________________________________________________________________________________ SUBMÓDULO I
____________________________________________________________________________________ Elaboración de
páginas WEB
12. ¿Cómo se puede cambiar el fondo de la página web?

____________________________________________________________________________________
____________________________________________________________________________________
13. ¿Cómo se guarda la página web en Wix?

____________________________________________________________________________________
____________________________________________________________________________________

ACTIVIDAD DE APRENDIZAJE


Elabora un mapa conceptual del tema 1.2













17 
                    


Desarrolla las actividades siguientes:
1. Crear una cuenta de correo electrónico (es recomendable crear una cuenta de correo en Gmail con
el nombre de la empresa del proyecto, porque ese nombre será el que asigne Wix al publicar la pá-
gina en internet, y al momento de guardarla se pone cómo título el nombre del equipo. Por ejemplo
“pancakesdelaltiplano.wix.com/loscrazys” los nombres no deben pasar de 20 caracteres)
2. Crear una cuenta en Wix.com, con la cuenta de correo creada.
3. Ver el tutorial para diseñar la página web.
4. Abrir el soporte técnico y los planes de hosting de Wix.
5. Elegir una categoría y una plantilla para crear una página web para el proyecto de empresa.
6. Diseñar la cabecera de la página con texto e imágenes.
7. Cambiar el estilo del encabezado.
8. Agregar una franja o línea al encabezado.
SUBMÓDULO I 9. Cambiar el nombre a las páginas internas de la página web.
Elaboración de 10. Configurar el SEO de la página web.
páginas WEB 11. Cambiar el fondo de la página web.
12. Guardar la página web
13. Mediante la vista previa mostrar en el explorador la página web.
Registro de
SÍ NO
 Creó una cuenta de correo electrónico con el
1.
 nombre de la empresa del proyecto.
Creó una cuenta en Wix.com, con la cuenta
 2.
de correo creada.
 3. Ver el tutorial para diseñar la página web.
 Abrir el soporte técnico y los planes de hos-
4.
ting de Wix.

Elegir una categoría y una plantilla para crear
5.
 una página web para el proyecto de empresa.
Diseñar la cabecera de la página con texto e
 6.
imágenes.
 7. Cambiar el estilo del encabezado.
 8. Agregar una franja o línea al encabezado.
 Cambiar el nombre a las páginas internas de
9.
 la página web.
10. Configurar el SEO de la página web.

11. Cambiar el fondo de la página web.

12. Guardar la página web

Mediante la vista previa mostrar en el explo-
13.
 rador la página web.
 18
                    

1.3 DESARROLLO Y PUBLICACIÓN DE UN SITIO WEB GRATUITO.


SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







AGREGAR UNA IMAGEN

Wix permite agregar cualquier tipo de imagen de hasta 15 Mb en formato .jpg, .png y .gif, así 
como agregar imágenes de las redes sociales como Facebook. Para agregar la imagen se pulsa
sobre el botón AGREGAR y aparecen las opciones: imagen, 
imagen sin marco, clip art. Se abre el cuadro agregar imágenes

y se tienen tres fichas para agregar imágenes del equipo, imáge-
nes gratuitas de Wix e imágenes de Bigstock. Se pulsa sobre el 
botón Cargar imágenes, se eligen las imágenes y se espera hasta
que aparezcan las imágenes ya cargadas en la ventana, luego se selecciona 
la imagen que se desea agregar y se pulsa el botón Agregar Imágenes. Si 
se desea agregar otra imagen, se busca la imagen, se selecciona y se pulsa
AGREGAR IMÁGENES. 

19 
                    

CAMBIAR EL TAMAÑO
 Para cambiar el tamaño de la imagen, se selecciona la imagen haciendo clic
dentro de ella, aparecen ocho puntos en el contorno de la imagen y dos pequeños
 iconos con una flecha hacia arriba y el hacia abajo, con el apuntador sobre uno
de los puntos se mueve en la dirección deseada hasta llegar al nuevo tamaño que
se le dará a la imagen, con las flechas se puede cambiar el tamaño vertical hacia
arriba o hacia abajo.
EDITAR LA IMAGEN
Para modificar las imágenes, Wix dispone de un editor de imágenes que tiene
como herramientas: Recortar, Orientación, Realzar, Efector, Marcos, Brillo,
Contraste, Saturación de color, Calor, etc. Después de hacer las modificacio-
nes a la imagen, se pulsa sobre el botón Guardar.
RECORTE DE IMÁGENES
Para cambiar el tamaño de una imagen, qui-
tando una parte que no se desea que aparezca, se pulsa sobre el icono RE-
SUBMÓDULO I CORTE y aparecen sobre la imagen cuatro círculos grandes en cada una
Elaboración de
de las esquinas de la imagen, se coloca el apuntador en una de las esquinas
páginas WEB donde se desea recortar y se arrastra el ratón hasta donde se desea detener
el recorte.
Para visualizar la página se utiliza la vista previa, en esta vista se pueden
apreciar las imágenes y el texto en el navegador, si tienen algunos efectos se
visualizará el efecto, para regresar al editor se pulsa sobre el botón Volver al
editor.
Para darle una mejor apariencia a la página web se
pueden diferentes formas, líneas y franjas que se pueden colocar en cualquier lugar.
Para agregar una franja, en el botón AGREGAR se elige la opción Formas y Líneas,
luego la opción Franja. Aparece en la página una franja, con los puntos de control
para ajustar el tamaño-
Para personalizar la apariencia del elemento específico se dis-
pone del botón Personaliza este elemento, y se tienen varios botones con diferentes esti-
los, después de observar los estilos disponibles se elige el estilo que tendrá la página y se

pulsa el botón OK.
 Para cambiar el fondo de la franja con una imagen
 se pueden utilizar una gran variedad de imágenes que
ofrece Wix, o se puede utilizar alguna imagen que se tenga guardada en la
 computadora de hasta 15 Mb, el editor acepta imágenes en formato .jpg,
.png y .gif, también se pueden agregar imágenes de redes sociales como
 Facebook. Después de cargar las imágenes se elige la imagen deseada y se
 pulsa el botón Cambiar Fondo.
PUBLICAR
 Después de guardar los cambios hechos a la página web, es necesario publicarla, para
observar cómo funciona en internet y cómo la verán los clientes o los visitantes en

internet.
 Para iniciar con el proceso de publicación, se pulsa sobre el icono Publicar de la
barra de herramientas del editor, aparece un cuadro de dialogo preguntando si desea
 permitir a los motores de búsqueda encontrar el sitio, y si desea activar una vista móvil optimizada para
 dispositivos portátiles. Después de elegir las opciones se pulsa el botón Publicar.
SITIO PUBLICADO
 Aparece un cuadro de dialogo con una felicitación, diciendo que el sitio ha
 sido publicado y que estará en línea en unos segundos, también muestra la di-
rección electrónica que le fue asignada a la página, además muestra un botón
 que permite obtener un dominio gratis adquiriendo alguno de los planes de
hosting que ofrece Wix.


 20
                    
COMPARTIR 
Wix ofrece la posibilidad de compartir la página web con los amigos o co- 
nocidos a través de las redes sociales como Facebook y Twitter, en caso de
no desear compartir se pulsa sobre el vínculo Ahora No. Para compartirlo se 
pulsa sobre el botón en el que se desea compartir.
Para compartir la página web en Facebook se pulsa so-
bre el botón Facebook y aparece la ventana para escribir el
correo electrónico y la contraseña, si desea que se guarde la
contraseña, marque la casilla y pulse el botón Entrar.
AGREGAR UN BOTÓN
Para hacer la página más funcional, se pueden agregar botones de acción, por medio
del botón Botones y Menús, el botón se puede personalizar y vincular con alguna pá-
gina interna o externa.
Para poner un enlace a una página externa con Wix, se
escribe la dirección web y se marca la casilla para que abra
la página en la misma ventana o en otra nueva, luego se pulsa
el botón OK. En la vista previa, se puede probar el vínculo
para abrir la página. SUBMÓDULO I
CONTACTO VÍA MAIL
Otra de las ventajas de las páginas web de Wix es que permiten establecer Elaboración de
contacto entre los usuarios de la página web y la empresa o el dueño de la páginas WEB
página, en la página de contacto se escriben los teléfonos, la dirección física
y la dirección de correo electrónico, así como un espacio para que escriban
los mensajes.
ENVÍO DEL MENSAJE A LA CUENTA DE CORREO.
Wix, se encarga de enviar los mensajes de correo electrónico que envíen
los clientes o visitantes de la página web, al administrador o dueño del
sitio, aparece un mensaje en la bandeja de entrada de la cuenta de correo
electrónico identificando que se trata de un mensaje del sitio web, muestra
los datos de la persona que lo envía.
AGREGAR DOCUMENTO
Otra de las ventajas de Wix, es la posibilidad de agregar Documentos, audio y video, a la
página web. Para agregar un documento a la página web, se utiliza el botón AGREGAR
se elige la opción Media y luego la opción Documento, aparece un cuadro de dialogo para 
cargar los archivos. 
CARGAR ARCHIVOS
Se eligen los archivos que se desea subir a la página web, es recomendable 
que antes de cargar los archivos se guarden en for-

mato PDF porque de esta manera ocupan un menor
espacio y se protege la estructura para que no sufra 
cambios al abrirlo en otras computadoras. El Micro-
soft Office 2013 ofrece en el menú Exportar la opción 
de convertir los archivos a PDF para facilitar su envío a otras personas a 
través de internet. Después de elegir los archivos, se pulsa el botón Agregar
Documentos. 
En la página web, aparecen los iconos de los documentos que se subieron a
la página web, por lo que es necesario acomodarlos en algún espacio vacío, y

que no se empalme con el contenido de la página, para moverlos simplemente 
se arrastran con el ratón y se dejan en el lugar deseado.
En la página web de Wix se pueden agregar imágenes diseñadas en Flash 
o Fireworks que contengan animaciones o fijas, por medio del menú se puede agregar animación para que al 
momento de que el visitante vea la página, se ejecuten las animaciones.
AGREGAR SUBPÁGINAS 
Cuando sea necesario agregar más
páginas dentro de una página, ya sea

porque no cabe la información en una sola o para ordenarla por páginas, se puede agre- 
gar una subpágina, se abre un submenú mostrando varios diseños, se marca la casilla
para que la agregue como subpágina y se pulsa el botón OK, se agrega automáticamente un submenú. 
21 
                    

 ACTIVIDAD PRACTICA

Contesta correctamente las preguntas siguientes:
1. ¿Qué tipos de imágenes se pueden agregar a una página web de Wix?

____________________________________________________________________________________
____________________________________________________________________________________
2. ¿Cómo se puede agregar una imagen a la página web?

____________________________________________________________________________________
____________________________________________________________________________________
SUBMÓDULO I
3. ¿Cómo cambia el tamaño de una imagen en una página web Wix?
Elaboración de
páginas WEB ____________________________________________________________________________________
____________________________________________________________________________________
4. ¿Qué iconos tiene el editor de imágenes de Wix?

____________________________________________________________________________________
____________________________________________________________________________________
5. ¿Para qué sirve la vista previa de la barra de herramientas de Wix?

____________________________________________________________________________________
____________________________________________________________________________________

6. ¿Cómo se puede agregar una franja en una página web Wix?

____________________________________________________________________________________

____________________________________________________________________________________

 7. ¿En qué consiste la publicación de una página web Wix?
 ____________________________________________________________________________________
 ____________________________________________________________________________________
 8. ¿Cómo se publica una página web Wix?

 ____________________________________________________________________________________
 ____________________________________________________________________________________

9. ¿Cómo saber si la página web se publicó con éxito?
 ____________________________________________________________________________________

10. ¿Cómo compartir una página web Wix?

____________________________________________________________________________________

 ____________________________________________________________________________________
 22
                    

11. ¿Para qué sirve agregar un botón a una página web Wix?

____________________________________________________________________________________

____________________________________________________________________________________
12. ¿Cómo funciona el contacto vía mail en la página web Wix?

____________________________________________________________________________________
____________________________________________________________________________________
13. ¿Cómo se agrega un documento a una página web Wix?

____________________________________________________________________________________
____________________________________________________________________________________
SUBMÓDULO I
Elaboración de
páginas WEB
Elabora un cuadro sinóptico del tema 1.3
















23 
                    


Desarrolla las siguientes actividades:
1. Agregar imágenes a la página web.

2. Cambiar el tamaño de las imágenes de la página.
3. Utiliza el editor de imágenes para agregar más brillo, contraste, saturación, calor.
4. Recorta al menos una de las imágenes.
5. Agrega una franja y modifica su tamaño.
6. Cambia el fondo de la franja con una imagen.
7. Publica la página y anota la dirección web asignada.
8. Comparte tu página con los demás equipos y con tu instructor.
9. Agrega un botón para vincular el sitio google que creaste anteriormente.
10. Escribe tus datos de contacto para recibir mensajes de los visitantes y muestra alguno de los mensa-
jes de correo electrónico recibido.
SUBMÓDULO I 11. Agrega un documento en PDF a tu página.
Elaboración de
12. Agrega alguna subpágina a tu página web.
páginas WEB
Registro de
SÍ NO
1. Agregó imágenes a la página web.
Agregó por lo menos tres páginas secunda-

 2.
rias
 Utilizó el editor de imágenes para agregar
3.
 más brillo, contraste, saturación, calor.
 4. Recortó al menos una de las imágenes.
 5. Agregó una franja y modificó su tamaño.


6. Cambió el fondo de la franja con una imagen.

Publicó la página y anotó la dirección web
 7.
asignada.
 Compartió tu página con los demás equipos y
8.
con el instructor.

Agregó un botón para vincular el sitio google
 9.
creada anteriormente.
 Escribiósus datos de contacto para recibir
mensajes de los visitantes y muestra alguno
 10.
de los mensajes de correo electrónico reci-
bido.

11. Agregó un documento en PDF a la página.

 12. Agregó una subpágina a la página web.
 24
                    

1.4 CONCEPTOS FUNDAMENTALES PARA DISEÑO DE
IMÁGENES CON FIREWORKS 

SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







INTRODUCCIÓN A FIREWORKS 
Fireworks puede utilizarse para crear, editar y animar gráficos web, 

añadir interactividad avanzada y optimizar imágenes en entornos pro- 
fesionales. En Fireworks es posible crear y modificar imágenes vec-
toriales y de mapa de bits en una sola aplicación. Todo es modificable 
en todo momento. Y el flujo de trabajo puede automatizarse para 
satisfacer las necesidades de cambio y actualización que de otra forma
exigirían una enorme dedicación. Fireworks se integra con otros pro- 
ductos de Adobe, como Dreamweaver, Flash, FreeHand y Director,
y con otros editores HTML y aplicaciones gráficas de uso frecuente 
para ofrecer una solución web global. Los elementos gráficos de Fi- 
reworks pueden exportarse fácilmente con código HTML y JavaScript adaptado al editor de HTML que se
utilice. 
25 
                    

INICIO DE FIREWORKS

Para abrir Adobe Fireworks tenemos diferentes alternativas a escoger.La pri-

mera es abriéndolo por medio del icono que se crea en el escritorio haciendo
doble clic izquierdo sobre el e inmediatamente se abrirá el programa. La segun-
da forma de abrir Adobe Fireworks es por medio del menú inicio > todos los
programas > Adobe > Adobe Fireworks.
ENTORNO DE TRABAJO DE FIREWORKS

Al abrir un documento en Adobe Fireworks por primera vez, el espacio
de trabajo incluye el panel Herramientas, las propiedades, los menús y
otros paneles. El panel Herramientas, situado a la izquierda de la pantalla,
contiene varias secciones de herramientas de distintos grupos, como mapa
de bits, vector y Web. De forma predeterminada, el Panel de propieda-
des aparece en la parte inferior del documento y al principio muestra las
propiedades.
SUBMÓDULO I
Elaboración de ELEMENTOS DEL LA VENTANA DE FIREWORKS

páginas WEB




PANELES DE FIREWORKS
 Los paneles son controles flotantes que ayudan a modificar aspectos de elementos u objetos seleccionados
 en el documento. Con los paneles se puede trabajar en estados, capas, símbolos, muestras de color y otros.
Los paneles pueden arrastrarse por separado, por lo que es posible agrupar los paneles en función de las
 necesidades propias.
EL PANEL DE PROPIEDADES

Este es uno de los paneles más importantes de Fireworks ya que en el podemos modificar las diferentes
 propiedades de todos los objetos que podemos crear en Fireworks como también el mismo lienzo y la ima-
gen. En Fireworks contamos con diferentes paneles como: el de Capas, Optimizar, Activos, Fotogramas,
 Historial, etc.
 PANEL DE VISTAS PREVIAS
Este panel nos permite visualizar y comparar la
 calidad de los diferentes formatos a los que se piensa exportar la imagen que hemos creado en Fireworks.
 PANEL OPTIMIZAR
Permite gestionar los ajustes que controlan el tamaño y el tipo de los archivos así como
 trabajar con la paleta de colores del archivo o la división.
PANEL CAPAS
 Organiza la estructura de un documento y contiene opciones para crear, eliminar y
 manipular capas.
 26
                    

PANEL BIBLIOTECA COMÚN
Muestra el contenido de la carpeta de biblioteca común Common Library, que contiene 
símbolos. Es fácil arrastrar instancias de estos símbolos desde el panel Biblioteca de
documentos hasta el documento. 
PANEL PÁGINAS
Muestra las páginas del archivo actual y contiene opciones para la manipulación de páginas.
PANEL ESTADOS
Muestra los estados del archivo actual y contiene opciones para la creación de ani-
maciones.
PANEL HISTORIAL
Incluye una lista de los comandos de uso reciente que puede deshacer y rehacer de
forma rápida. Además, es posible seleccionar varias acciones y después guardarlas y volver a usarlas como
comandos.
PANEL FORMAS AUTOMÁTICAS
Contiene formas automáticas que no aparecen en el panel Herramientas.
PANEL ESTILOS
Permite almacenar y volver a utilizar combinaciones de características de objetos o ele-
gir un estilo entre los almacenados. SUBMÓDULO I
PANEL BIBLIOTECA DE DOCUMENTOS
Contiene símbolos gráficos, símbolos de botón y símbolos de animación que ya están en el documento actual Elaboración de
páginas WEB
de Fireworks. Es fácil arrastrar instancias de estos símbolos desde el panel Biblioteca de documentos hasta
el documento. También es posible realizar cambios globales en ellas modificando solamente el símbolo.
PANEL URL
Permite crear bibliotecas que contienen direcciones URL que se utilizan con fre-
cuencia.
PANEL MEZCLADOR DE COLORES
Permite crear colores para añadirlos a la paleta de colores del documento actual o
aplicarlos a los objetos seleccionados.
PANEL MUESTRAS
Gestiona la paleta de colores del documento actual.
PANEL INFORMACIÓN
Proporciona datos sobre las dimensiones de los objetos seleccionados y las coor-
denadas del cursor conforme se mueve por el lienzo.
PANEL COMPORTAMIENTOS 
Permite controlar los comportamientos, que determinan la reacción que se pro- 
duce en las zonas interactivas o las divisiones al mover el ratón.
PANEL BUSCAR 
Permite buscar y reemplazar elementos como texto, URL, fuentes y colores en uno o varios documentos. 
PANEL ALINEAR
Contiene controles para alinear y distribuir objetos en el lienzo. 
Panel Propiedades de forma automática Permite cambiar las propiedades de una forma

automática tras insertarla en un documento.
PANEL PALETA DE COLORES (VENTANA > OTROS) 
Permite crear e intercambiar paletas de colores, exportar muestras de color ACT, ex-
plorar distintos esquemas de color y acceder a los controles más utilizados para elegir los colores. 
EDICIÓN DE IMAGEN (VENTANA > OTROS) 
Organiza en un panel las herramientas y opciones utilizadas con frecuencia para la edición de mapas de
bits. 
PANEL TRAZADO (VENTANA > OTROS)

Ofrece acceso rápido a muchos comandos relacionados con trazados.
Caracteres especiales (Ventana > Otros) Muestra los caracteres especiales que se pueden 
utilizar en bloques de texto.
CREAR UN NUEVO DOCUMENTO 
Al abrir Fireworks los paneles y herramientas aparecen desactiva- 
dos, no se puede seleccionar ninguno y esto se debe a que no se ha
creado aun el documento para trabajar. Lo primero para empezar a 
crear un nuevo documento es en la barra de menú y seleccionar en

la sección de “archivo” la opción de “nuevo”
27 
                    

Aparece un cuadro de dialogo para configurar el tamaño del lienzo, pide la medida del ancho y la altura,
 la resolución, se debe determinar si la medida es en pixeles, pulgadas o centímetros, además del color del
lienzo, que puede ser en blanco, transparente o personalizado.
 GUARDAR UN DOCUMENTO DE FIREWORKS
Para guardar nuestros documentos de Fireworks debemos dirigirnos a la opción de archivo
de la barra de menú y ahí podemos seleccionar entre 3 distintos tipos de
almacenamiento. La primera y principal opción para guardar es la de
“guardar” con esta opción la primera vez que la elijamos Fireworks nos
pedirá nombrar a nuestro documento para poder guardarlo.
ABRIR UN DOCUMENTO DESDE FIREWORKS
Una vez que ya aprendimos a guardar nuestros archivos de Fireworks ahora veremos cómo
abrirlos desde el mismo programa. Primero debemos dirigirnos a la “ba-
rra de menú” y en el menú archivo seleccionamos la opción de “Abrir”se
abre una pequeña ventana, buscamos y seleccionamos el archivo que
queramos abrir y presionamos el botón “abrir”. También Fireworks guarda un histo-
rial de los archivos recientemente guardados en la opción del menú archivo de la barra
de menú en “abrir reciente” encontraremos dichos archivos para abrirlos.
SUBMÓDULO I MODIFICAR LAS PROPIEDADES DEL LIENZO
En Fireworks cuando creamos un nuevo documento él nos permite seleccio-
Elaboración de
páginas WEB nar las propiedades para nuestro lienzo pero a veces puede que queramos
cambiar de opinión o modificar estas propiedades introducimos las nuevas
proporciones del lienzo escribiendo la longitud en píxeles o en la unidad de
medida que deseemos.
PLANTILLAS
Guarde un archivo de Fireworks como plantilla y cree nuevos archivos utilizando
dicha plantilla. La plantilla se guarda en formato PNG de Fireworks. Fireworks
proporciona una lista de plantillas personalizadas y predefinidas para móviles,
prototipos, sitios web y estructuras web que se pueden personalizar.
ABRIR IMÁGENES CREADAS EN OTRAS APLICACIONES
Es posible abrir archivos creados en aplicaciones o formatos de archivo diferentes como Photoshop, Adobe
Illustrator, WBMP, EPS, JPEG, GIF y GIF animado.Cuando se abre un archivo de formato distinto de PNG
con Archivo > Abrir, se crea un nuevo documento PNG de Fireworks basado en el archivo abierto. Puede
utilizar todas las características de Fireworks para editar la imagen. Se puede guardar como para almacenar
 su trabajo como un nuevo archivo PNG. En ciertas ocasiones, puede guardar el archivo en su formato origi-
 nal. Si lo hace, la imagen se alisa en una única capa y el usuario no podrá editar las funciones específicas de
Fireworks que agregó a la imagen.Los siguientes formatos de archivo pueden guardarse directamente desde
 Fireworks: PNG de Fireworks, GIF, GIF animado, JPEG, BMP, WBMP, TIFF, SWF, AI, PSD
 GIF ANIMADOS
Importe los GIF animados como símbolos de una animación y, a
 continuación, edite y mueva todos los elementos de la animación
como una sola entidad. En el panel Biblioteca de documentos,

puede crear más instancias del símbolo.
 ARCHIVOS EPS
Fireworks abre la mayoría de los archivos EPS como imágenes planas de mapa de bits, en
 las que todos los objetos se combinan en una sola capa. Algunos archivos EPS exportados de
 Adobe Illustrator conservan la información vectorial.
ARCHIVOS PSD
 Fireworks puede abrir archivos PSD creados en Photoshop y conservar la mayoría de
 las características PSD, como las capas jerárquicas, los efectos de capas y los modos de
mezcla más utilizados.
 ARCHIVOS WBMP
Fireworks permite abrir archivos WBMP. Dichos archivos son de 1 bit (monocromo) optimizados para dis-
 positivos informáticos móviles. Este formato se utiliza en páginas WAP.
 ARRASTRAR UNA IMAGEN O UN TEXTO A FIREWORKS
Es posible arrastrar objetos vectoriales, imágenes de mapa de bits o texto de otras aplicaciones que admitan
 la utilización de este procedimiento.Arrastre el objeto o el texto desde la otra aplicación a Fireworks.

 28
                    

PEGAR EN FIREWORKS
Al pegar en Fireworks un objeto copiado de otra aplicación, éste queda centrado en el documento activo. 
El texto o los objetos que tengan cualquiera de estos formatos pueden pegarse desde el Portapapeles:Ado-
be FreeHand 7 o posterior, Adobe Illustrator, PNG, PICT (Mac OS), DIB (Windows), BMP (Windows), 
Texto ASCII, EPS, WBMP, TXT, RTF, en la otra aplicación, copie el objeto o el texto que desee pegar en
Fireworks, pegue el objeto o el texto en el documento.
ACTIVIDAD PRÁCTICA
Contesta las preguntas siguientes:
1. ¿Qué función tiene el programa Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________ SUBMÓDULO I
2. ¿Cómo se puede crear un documento en Fireworks? Elaboración de

páginas WEB
____________________________________________________________________________________
____________________________________________________________________________________
3. ¿Cuáles son los elementos de la ventana de Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________
4. ¿Qué paneles tiene el programa Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________ 

5. ¿Cómo se puede guardar un documento en el programa Fireworks?

____________________________________________________________________________________

____________________________________________________________________________________

6. ¿Cómo se puede modificar las propiedades del lienzo?

____________________________________________________________________________________

____________________________________________________________________________________

7. ¿Cómo se puede guardar un documento como plantilla? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
8. ¿Qué tipo de imágenes se pueden abrir en Fireworks? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 


29 
                    

9. ¿Qué es un Gif animado?

____________________________________________________________________________________

____________________________________________________________________________________
10. ¿Cómo se puede arrastrar una imagen a Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________
11. ¿Cómo se pegan objetos en Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________
____________________________________________________________________________________
SUBMÓDULO I
PRÁCTICA GUIADA
Elaboración de
páginas WEB
1. Abrir el programa Adobe Fireworks y crear un archivo nuevo de Fireworks.
2. Configurar el tamaño del lienzo con una anchura de 900 px y altura de 600 px.
3. Cambiar la barra de herramientas al lado derecho, cerrar todos los paneles.
4. Desactivar y activar la barra de propiedades y de herramientas, en el menú Venta-
na
5. Desplegar el panel de edición de imágenes y el panel de colores.
6. Mostrar y ocultar las reglas y la cuadricula. Cambiar el zoom a 100% luego a 150% y dejarlo en 66%.
7. Pulsar sobre el icono Rectángulo y elige la opción Redondeado, en el panel de propiedades color Azul
marino, solido, borde duro azul claro de 5 px, textura de madera 50%.
8. Pulsar sobre el icono Texto, en las propiedades buscar la fuente Baskerville, tamaño 32, color amarillo,
alineación centrada, espaciado de 10. Escribir el texto “COBACH SLP”
9. Pulsar sobre la herramienta de Selección y hacer clic sobre el cuadro de texto para
centrarlo manualmente.
 10. Guardar el documento dentro de mis documentos, crear una carpeta que se llame
imágenes de Fireworks, poner el nombre de práctica1_cobach. Cerrar el documen-

to y cerrar el programa.
 11. Abrir nuevamente el programa y abrir el archivo practica1_cobach.
12. Selecciona todo el rectángulo para agruparlo con el texto. Guardar el archivo con el nombre practi-
 ca1a_cobach, con el recuadro seleccionado, en el menú Modificar, elegir la opción Animación y luego
 Animar selección.
13. Se abre un cuadro de dialogo para especificar los parámetros de la animación,
 en el primer cuadro incrementar a 10 fotogramas, dejar todo los demás igual y
pulsar el botón Aceptar.

14. Aparece una línea con puntos sobre el rectángulo, estirarla del último punto a hacia la derecha hasta
 la orilla del lienzo, pulsar sobre el botón reproducir para observar el efecto.
Detener la reproducción.
 15. En el menú Modificar, elegir la opción Animación y luego Configuración,
 cambiar el número de fotogramas a 15, en el cuadro
Dirección cambiar a 20, en la casilla Girar subir a 30,
 pulsar el botón Aceptar y reproducir para observar el cambio. Detener la repro-
ducción y pulsar sobre el icono Vista previa, reproducir nuevamente para ver el

movimiento real, detener la animación y pulsar sobre el icono Original. Guardar los
 cambios y cerrar el documento.
16. Abrir nuevamente el archivo practica1_cobach y guardarla como practica1b_cobach.En el menú Modifi-
 car elegir la opción Transformar y luego Transformación libre, aparece un conjunto
 de puntos y el cursor se transforma a un circulo, en la esquina superior derecha
aparece un pequeño triangulo amarillo, con el cursor girar un poco el rectángulo
 hacia abajo. Reproducir la animación, guardar los cambios y cerrar el archivo.
 30
                    

17. Abrir el archivo practica1_cobach y guardarlo como practica1c_cobach, se-
leccionar el texto y en la sección Filtros, pulsar sobre el icono ( + ) elegir la 
opción Sombreado e iluminado, y luego sombra interior, aparece un cuadro
en el que se modifica la distancia a 33, el color se cambia por amarillo, la 
opacidad se pone en 50%, la suavidad se deja en 6 y se pulsa sobre el lienzo, se selecciona el rectángulo
y se agrupa con el texto, aplicar animación con 15 fotogramas, reproducir el documento en la vista previa
y guardar los cambios.
18. Debajo del rectángulo agregar una elipse de color verde claro, con borde de
5 color rojo, insertar un cuadro de texto con fuente
AR Julián, tamaño 32, color fucsia, con la palabra
INFORMÁTICA. Agrupar el rectángulo con el texto y aplicar animación en
sentido contrario, para eso en dirección escribir el número 180, pulsar el botón
Aceptar.
19. Reproducir la animación y hacer las correcciones para sincronizar las dos animacio-
nes, ajustar el tamaño del lienzo para que cubra toda la pantalla, ajustar las guías, y
reproducir nuevamente en la vista previa.
20. Guardar los cambios y cerrar el archivo y el programa.
21. Abre la practica1_cobach y guárdala como practica1d_cobach y agrega un logotipo de Cobach al lado SUBMÓDULO I
derecho del rectángulo.
22. Selecciona el logotipo y aplícale animación. Reproduce la animación en la Elaboración de
páginas WEB
vista previa, detener la reproducción y regresar a la vista original.
23. Agrega una figura de estrella en color amarillo debajo del rectángulo azul,
enseguida agrega una flecha hacia la derecha en color verde y luego dibuja
un polígono de seis lados color fucsia, si es necesario cambia el tamaño el tamaño por medio del menú
Modificar, opción Transformar y transformación libre.
24. A la estrella aplícale animación con 8 fotogramas con una dirección de 320, a la estrella aplícale anima-
ción de 8 fotogramas con una dirección de cero, al hexágono aplícale animación de 8 fotogramas con una
dirección de 220. Reproduce la animación en la vista previa y guarda los cambios.

Elabora un cuadro sinóptico del tema 1.4 














31 
                    


Elabora un tutorial que incluya las siguientes actividades con Fireworks, agrega captura de pantalla en
cada paso:
1. Abrir el programa Fireworks y elegir crear un archivo nuevo, con las medidas 800 X
500
2. Agregar un rectángulo de 150 X 150 sobre el lienzo y duplicarlo dos veces, acomo-
darlo en forma de L, es decir dos en vertical y uno al lado derecho. Para que mida
exactamente se puede dibujar primero un rectángulo o cuadrado de cualquier medida, luego en los
cuadros de ancho y alto se escribe 150 y se ajusta la medida.
3. Importar tres imágenes al lienzo.
4. Acomodar una imagen en un cuadro, enviarla al fondo con el menú Orga-
nizar, luego pulsar las teclas Ctrl + X, y pegarla con la opción Pegar dentro,
para que quede con un pequeño marco.
SUBMÓDULO I 5. Repetir el proceso para las otras dos imágenes, que queden dentro de los cuadros
Elaboración de 6. Hacer clic en la herramienta de selección y activar el cuadrado inferior derecho, en
páginas WEB el menú Modificar, pulsar sobre el menú Transformar y con la opción Distorsionar,
aparecen los puntos de control para modificar la figura. Mover los puntos para que el
cuadro quede hacia atrás como si fuera la cara de un dado.
7. Seleccionar el cuadro de arriba y en el menú Modificar, pulsar sobre el menú Trans-
formar y con la opción Distorsionar, aparecen los puntos de control para modificar la
figura. Mover los puntos para que el cuadro quede hacia atrás como si fuera la cara
superior de un dado.
8. Hacer clic fuera de los cuadrados y pulsar sobre el botón Ajustar lienzo, puedes obser-
var que se recorta automáticamente y queda a la medida.
9. Agregar un filtro de Bisel exterior, color amarillo
10. Guardar el archivo con diferentes formatos: GIF animado, JPEG, BMP, TIFF, SWF, AI,
PSD.

 INSTRUCCIONES: Marca con una X si cumple los elementos señalados en la tabla del indicador corres-
 consideres importantes anótalas al final en el espacio indicado.
 Registro de
 No. Indicadores de desempeño cumplimiento Observaciones
 SÍ NO
Abrió el programa Fireworks y creó un ar-
 1.
chivo nuevo
 Agregó los rectángulos indicados con la me-
2.
dida dada.

3. Importó las 3 imágenes al lienzo.

Colocó las imágenes dentro de los cuadrados
 4. y las envió al fondo, luego cortó la imagen y
la pegó dentro.

5. Realizó la distorsión de los cuadros indicados.

 6. Ajustó el lienzo y agregó el filtro de bisel
Guardó el archivo con diferentes formatos:

7. GIF, GIF animado, JPEG, BMP, WBMP,
 TIFF, SWF, AI, PSD.
 32
                    

1.5 HERRAMIENTAS DE TRABAJO DE ADOBE FIREWORKS


SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







EL PANEL HERRAMIENTAS 

El panel Herramientas está organizado en seis categorías: Se-
leccionar, Mapa de bits, Vector, Web, Colores y Ver. Cuando 
se elige una herramienta, el Panel de propiedades muestra sus

opciones.
Al seleccionar alguna de las herramientas del panel de 
herramientas podrás observar como el panel de propieda-
des va cambiando dependiendo de cada herramienta que 
hayas seleccionado. 


33 
                    

HERRAMIENTA DE PUNTERO
 Esta herramienta nos permite seleccionar los objetos en los que hagamos clic con ella. Para utilizarla ha-
cemos clic sobre el botón de herramienta de puntero que se encuentra en
 el panel de herramientas. Ya seleccionada hacemos clic sobre el objeto del
lienzo que queramos seleccionar. Si hacemos clic izquierdo y lo dejamos
presionado podemos cambiar la posición del objeto y si hacemos clic dere-
cho se nos desplegara un menú con opciones.
HERRAMIENTA DE RECTÁNGULO Y HERRAMIENTA DE
RECTÁNGULO REDONDEADO
La herramienta de rectángulo como su nombre lo indica nos per-
mite dibujar rectángulos en el lienzo. Después podemos modificar
las propiedades del rectángulo en el panel de propiedades una vez
hallamos seleccionado la herramienta.
LA HERRAMIENTA DE ELIPSE.
Como su nombre lo indica, con esta herramienta podemos crear lo que son Elipses o
círculos en el lienzo de Fireworks. Para acceder a esta herramienta tenemos que hacer
clic izquierdo sobre el botón que muestra la imagen y mantenerlo presionado hasta
SUBMÓDULO I que aparezca el submenú con las demás herramientas y elegimos la Herramienta de
Elipse.
Elaboración de
páginas WEB LA HERRAMIENTA DE POLÍGONO.
Con esta herramienta podemos crear figuras poligonales como los pentágonos,
hexágonos, decágonos, etc. Para acceder a esta herramienta tenemos que hacer
clic izquierdo sobre el botón que muestra la imagen y mantenerlo presionado
hasta que aparezca el submenú con las demás herramientas y elegimos la He-
rramienta de Polígono.La herramienta de polígono a diferencia de las otras
herramientas de dibujo de figuras cuenta con unas cuantas propiedades extras. Estas propiedades solo apare-
cen antes de dibujar la figura y una vez se ha dibujado dicha figura ellas automáticamente desaparecen y no
pueden modificarse dichos valores.
HERRAMIENTA DE ESCALA, INCLINAR Y DISTORSIONAR
Fireworks cuenta con herramientas que nos permite cambiar el tamaño de la figura,
inclinar la figura y distorsionar la forma.
HERRAMIENTA DE ESCALA
Esta herramienta no solo nos permite modificar las proporciones de figura sino que también
 nos permite rotarla. Lo primero que tenemos que hacer es con la herramienta de puntero
 seleccionar la figura que deseamos modificar y después seleccionamos la “herramienta de
escala” que se encuentra en el panel de herramientas en donde muestra la siguiente imagen.
 HERRAMIENTA INCLINAR
 Con esta herramienta podemos inclinar cualquiera de los lados de la figura. Para
seleccionar esta herramienta hacemos clic izquierdo sobre el botón del panel
 de herramientas hasta que aparecen el submenú con las demás herramientas de
transformación y seleccionamos la herramienta inclinar (recuerda que tienes que

tener seleccionada la figura que vas a modificar antes de hacer esto).
 HERRAMIENTA DISTORSIONAR
Esta herramienta nos permite distorsionar las proporciones de una figura y a veces da efecto
 de perspectiva cuando se usa en ciertas imágenes Una vez seleccionada la herramienta toma-
 mos alguno de los puntos de la figura haciendo clic izquierdo y lo mantenemos presionado
mientras movemos el puntero.
 IMPORTAR IMÁGENES
 Adobe Fireworks es un programa de diseño gráfico y lógicamente podemos importar
distintos tipos de archivos de imágenes al lienzo de Fireworks para trabajar con ellos.
 Lo primero que haremos será dirigirnos al menú archivo y hacemos clic sobre la opción
IMPORTAR, se abre una ventana de exploración donde podemos buscar cualquier
 archivo que tengamos almacenado en el disco duro o en alguna otra unidad de almace-
 namiento. Después de encontrar el archivo que queremos importar lo seleccionamos y
hacemos clic sobre el botón ABRIR.


 34
                    

HERRAMIENTA RECORTAR
Esta herramienta nos permite recortar el área del lienzo de manera 
rápida ayudándonos a ajustar el lienzo a los objetos que tengamos
en él. Para utilizar esta herramienta hacemos 
clic sobre el botón que se encuentra en el panel
de herramientas. Para recortar el lienzo alrededor de la imagen que se encuentra en el
lienzo, hacer clic izquierdo sobre el lienzo y mantenerlo presionado mientras se mueve el
puntero del ratón, una vez trazado, puedes modificar sus dimensiones y su posición. Cuando estés satisfecho
con la posición y las dimensiones se pulsa la tecla Enter y con esto el lienzo será recortado alrededor de la
imagen.
HERRAMIENTA DE EXPORTAR ÁREA
Esta herramienta se utiliza de forma parecida a la de recortar pero a diferencia de
la otra herramienta esta nos permite seleccionar un área específica del lienzo que
queramos exportar como algún tipo de archivo de imagen. Lo primero que haremos
será seleccionar la herramienta de Exportar área, marcamos
el área que queremos exportar tal como si estuviéramos ocu-
pando la herramienta de recorte, al finalizar presionar la tecla
Enter y se abrirá una ventana, elegir el tipo de archivo al cual SUBMÓDULO I
queremos importar la imagen (gif, jpg, png, etc.) se pulsa Exportar.
LAS CAPAS, MAPAS DE BITS Y EL USO DEL PANEL DE CAPAS Elaboración de
páginas WEB
Las capas son una forma de organizar y no mezclar cada uno de los objetos que
agreguemos al lienzo. En Adobe Fireworks cada vez que agregamos un texto, una
figura, una imagen, etc. Automáticamente nos agrega un mapa de bits en la capa
con el nuevo objeto en él y podemos localizar cada uno de los mapas bits en el panel
de capas. Si nosotros queremos modificar o manipular algún objeto en específico es
muy útil dirigirse al panel de capas y hacer clic sobre él y así es seleccionado en el
escenario.
Como renombrar un mapa de bits. En el panel de capas podemos agregarle un
nombre a un mapa de bits para distinguirlo de las otros por ejemplo a continuación
tenemos el mapa de bits de un texto que está en el lienzo cuyo nombre es “Texto”.
Los iconos inferiores permiten:
1. Nueva capa. Con esto podemos agregar una nueva capa y así separar los objetos pasándolos a otro nivel
y tener mapas de bits en diferentes capas 
2. Crear mascara. con este botón podemos agregarle una máscara a algún objeto del lienzo 
3. Crear un nuevo mapa bits. Con esto agregamos una nuevo mapa de bits en la capa
4. Suprimir la selección. Con este botón eliminamos mapas de bits o capas que tengamos seleccionado. 

HERRAMIENTA DE LAZO
¿Alguna vez has cortado el contorno de una figura de un periódico o de una revista? 
Si la respuesta es sí, entonces una forma de catalogar a esta herramienta seria de

una tijera. Ya que nos permite dibujar el área que queremos seleccionar ya sea para
cortar copiar o rellenar. En otras palabras la herramienta de lazo nos permite trazar el área 
que queremos seleccionar de una imagen marcando el contorno de una forma en particular.
Supongamos que queremos seleccionar solamente la figura del automóvil de la siguiente 
fotografía ya sea para cortarla o copiarla. Si hacemos clic izquierdo y lo mantenemos pre- 
sionado veremos que hay 2 tipos de herramienta de lazo: Lazo y Lazo poligonal.
El lazo poligonal nos permite ir creando el trazado punto por punto y aparte que con ella 
hacemos líneas rectas con facilidad. Ahora hacemos clic sobre el punto donde empe-

zaremos a delinear la figura del automóvil y empezamos a hacer clic mientras vamos
dibujando la forma del automóvil hasta que delineemos la figura completamente. Vemos 
como la línea que trazamos se transforma en una línea punteada. Ahora hacemos clic
derecho sobre la figura y podemos seleccionar entre opciones como copiar, cortar, copiar a nuevo mapa de 
bits, etc. Si nosotros por ejemplo seleccionamos la opción cortar a nuevo mapa de bits vemos que ahora la 
figura del automóvil pasa a otro mapa bits de la capa. Y ahora si borramos el mapa de bits de donde cortamos
la imagen vemos que ahora tenemos solo la figura del automóvil. Este proceso es muy útil a la hora de crear 
montajes de fotografías y como vimos aquí lo más importante es trazar bien el contorno de la figura.

35 
                    

LA VARITA MÁGICA
 La herramienta varita mágica es una herramienta seleccionar un área de píxeles
de color similar en la imagen. Por ejemplo digamos que que-
 remos seleccionar el fondo azul de la siguiente imagen. Lo
primero que haremos será seleccionar herramienta de varita mágica que se encuentra en
el panel de herramientas, luego vemos que aparecen en la parte inferior las propiedades
de esta herramienta y a continuación explicaremos cada una de sus funciones: Tolerancia.
Es el margen de similitud del color que se seleccionara cuando hagamos clic sobre un área
de un color específico. Veamos las siguientes imágenes para entender mejor esta propie-
dad. El borde puede ser Duro, Suavizado y Fundido.
HERRAMIENTA DE PINCEL
La herramienta Pincel puede emplearse para tra-
zar pinceladas con el color del cuadro de color de
trazo, para utilizarla primero hacemos clic sobre
el botón del panel de herramientas. Ahora veamos las propiedades de esta
herramienta:
SUBMÓDULO I  Color de relleno. Aquí seleccionamos el color de relleno del pincel

 Grosor. Aquí seleccionamos el grosor de la pincelada
Elaboración de
páginas WEB  Estilo. Aquí elige el estilo de la pincelada y podemos elegir entre una gran
variedad de estilos
 Borde. Aquí elegimos el tamaño del borde de la línea de pincel y entre mayor sea el número mayor será
el grado de suavizado de la pincelada.
 Textura. Aquí podemos elegir darle algún tipo de textura a la pincelada y tenemos una gran variedad
a elegir pero si deseamos importar una nueva textura elegimos la opción “otras…” e importamos una
nueva textura.
 Cantidad de textura. Elige el grado de visibilidad de la textura entre mayor sea mayor fuerza tendrá la
imagen.
Ahora simplemente hacemos clic izquierdo sobre el lienzo y lo mantenemos presionado mientras move-
mos el puntero y dibujamos sobre el lienzo.
HERRAMIENTA DE LÁPIZ
 La herramienta Lápiz puede utilizarse para dibujar líneas rectas de un píxel, de
 estilo libre o fijo, del mismo modo que se utilizaría un pincel real para dibujar
líneas. Esta herramienta es parecida a la de pincel pero no tan completa. Para
 empezar hacemos clic sobre el botón de herramienta de lápiz que se encuentra
 en el panel de herramientas.
  Color. Aquí seleccionamos el color de la línea del lápiz.

 Borrado automático. Aplica el color de relleno cuando se hace

clic con Lápiz en el color del trazo.
  Suavizado. Suaviza los bordes de las líneas que se dibujen.
 Preservar transparencia. Limita el uso de la herramienta Lápiz a dibujar únicamente en los píxeles exis-
 tentes y lo impide en las áreas transparentes de la imagen.

Ahora simplemente hacemos clic izquierdo sobre el lienzo y lo mantenemos presionado mientras move-
 mos el puntero y dibujamos sobre el lienzo.

LA HERRAMIENTA DE BORRADOR
 Esta herramienta nos permite borrar píxeles de cualquier imagen de mapa de bits y
líneas dibujadas con la herramienta de pincel o de lápiz del lienzo pero no funciona
 con elementos editables como los cuadrados u óvalos, etc. Para utilizarlo
 hacemos clic sobre el botón de la herramienta de borrador en el panel de
herramientas,arrastramos el borrador por los píxeles que desea suprimir.


 36
                    

HERRAMIENTA DE SELLO
La herramienta Sello permite copiar o clonar un área de una imagen en otra. Esta 
herramienta es muy útil cuando deseamos eliminar elementos de una imagen copiando
áreas de la misma para cubrirlo. Por ejemplo. Aquí tenemos una fotografía de unos 
niños y deseamos borrar a la niña que esta al fondo Ahora vamos a borrar a la niña de
la imagen clonando sobre ella parte del fondo y para ello hacemos clic sobre el fondo
de la imagen, vemos que aparece una cruz en el área donde hicimos clic. Esa cruz
simboliza que esa área es la que se clonara donde hagamos dibujemos con el puntero de la herramienta.
HERRAMIENTA DE CUBO DE PINTURA
Esta herramienta nos permite rellenar de color nos permite rellenar fi-
guras, trazados con el pincel y hasta imágenes. Para utilizarla hacemos
clic sobre el botón del panel de herramientas. Ahora para aplicar el relleno simplemente hacemos
clic izquierdo sobre el área que queremos rellenar de color y vemos como el área de esta se torna
del color que elegimos.
HERRAMIENTA DE DEGRADADO
Esta herramienta nos permite agregar un efecto degradado a
los colores de relleno de los objetos. Lo primero que tenemos
que hacer para utilizar esta herramienta es seleccionarla des- SUBMÓDULO I
de el panel de herramientas haciendo clic izquierdo y lo mantenemos presionado
hasta que aparezca la herramienta de degradado. Vemos que ahora Elaboración de
páginas WEB
nuestro puntero cambia a esta forma pero solo cuando estamos ubi-
cado sobre algún objeto en el lienzo. Ahora nos situamos sobre el
objeto donde queremos aplicar el color degradado y hacemos clic izquierdo y lo mantenemos
presionado mientras movemos el puntero para definir la longitud del color degradado.
HERRAMIENTA DE SUBSELECCIÓN
La herramienta de subselección nos permite manipular los nodos
de una figura vectorial independientemente del resto, primero que
haremos será seleccionar la herramienta de subselección del panel
de herramientas. Luego hacemos un clic izquierdo sobre la imagen. Vemos que los con-
tornos de la imagen cambian a un color celeste y que cada esquina del cuadrado aparecen
unos cuadros. A estos cuadros los llamaremos nodos, hacer un clic sobre uno de los
nodos de la figura.
HERRAMIENTA DE PLUMA
Esta herramienta nos sirve para dibujar trazados de forma que 
los podemos ir curvando y transformando mientras los vamos 
dibujando. Para utilizarla damos un clic izquierdo sobre el botón de la panel de herra-
mientas de pluma Damos un clic en el escenario y vemos como aparece un pequeño punto 
donde dimos clic, damos clic y mantenemos presionado el 
botón izquierdo del ratón en el lugar donde queremos que llegue el trazado, aun
manteniendo presionado el botón izquierdo del ratón. Empezamos a moverlo de 
forma de que vemos como la línea del trazado empieza a curvarse, si seguimos

repitiendo esta operación con la herramienta de pluma aun seleccionada podría-
mos dibujar un trazado más grande. 
HERRAMIENTA LÍNEA
Esta herramienta es muy sencilla y nos permite trazar 
líneas rectas en nuestro lienzo. Para comenzar debemos 
de hacer clic sobre el botón de la herramienta línea que se encuentra en el panel
de herramientas, Ahora para dibujar nuestra línea presionamos el botón izquierdo del 
ratón sobre el lienzo y lo mantenemos presionado mientras arrastramos el puntero.

Un pequeño truco para que nuestra línea sea perfectamente recta es presionar la tecla Mayúscula o “Shift”
mientras dibujamos la línea. 
HERRAMIENTA DE ESTILO LIBRE
Esta herramienta nos permite cambiar la forma las figuras vectoriales como trazados y figuras 
del lienzo. Primero nos situamos en mapa bits donde está la figura vectorial que modificaremos. 
Después si apretamos el botón izquierdo del ratón vemos que el puntero cambia a una forma
circular de color rojo. Ahora con el botón izquierdo presionado empezamos a modificar el con- 
torno de la figura remodelándola con el puntero que se ha transformado en un círculo.

37 
                    

HERRAMIENTA DE TEXTO
 Con esta herramienta podemos insertar texto so-
bre el lienzo de Fireworks. Para utilizarla prime-
 ro hacemos clic sobre el botón de la herramienta
de texto que se encuentra en el panel de herramientas, con el cursor
hacemos clic izquierdo sobre el lienzo de nuestro documento para crear un línea de texto o presionamos el
botón izquierdo y lo mantenemos presionado mientras arrastramos el puntero del ratón de manera que dibu-
jemos un rectángulo para crear una caja de texto.
Si escribimos cualquier texto y después volvemos a seleccionar el texto con la herra-
mienta de puntero podemos apreciar que aparece una nueva propiedad en el panel de pro-
piedades. En ella podemos seleccionar un color de contorno para el texto que actualmente
tenemos seleccionado.
ACTIVIDAD PRACTICA
SUBMÓDULO I
Contesta correctamente las preguntas siguientes.
Elaboración de
páginas WEB
1. ¿Cómo se puede crear un nuevo documento de Fireworks?
____________________________________________________________________________________
____________________________________________________________________________________
2. ¿Cómo se pueden modificar las propiedades del lienzo?

____________________________________________________________________________________
____________________________________________________________________________________
3. ¿Para qué sirve la herramienta de rectángulo?

____________________________________________________________________________________

____________________________________________________________________________________

 4. ¿Cómo se puede cambiar de figura geométrica?
 ____________________________________________________________________________________
 ____________________________________________________________________________________
 5. ¿Para qué sirve la herramienta escalar, inclinar y distorsionar?

 ____________________________________________________________________________________
 ____________________________________________________________________________________
 ____________________________________________________________________________________

6. ¿Para qué sirve importar imágenes?

____________________________________________________________________________________

____________________________________________________________________________________

7. ¿Cuál es la utilidad de la herramienta Exportar Área?

____________________________________________________________________________________

____________________________________________________________________________________

 38
                    

8. ¿Para qué son las capas?

____________________________________________________________________________________

____________________________________________________________________________________
9. ¿Cuál es la utilidad de la herramienta Lazo?

____________________________________________________________________________________
____________________________________________________________________________________
10. ¿Para qué sirve la herramienta Varita Mágica?

____________________________________________________________________________________
____________________________________________________________________________________
11. ¿Cuál es la utilidad de la herramienta Sello?

____________________________________________________________________________________ SUBMÓDULO I
____________________________________________________________________________________ Elaboración de
páginas WEB
12. ¿Para qué sirve la herramienta de subselección?

____________________________________________________________________________________
____________________________________________________________________________________
13. ¿En qué casos se utiliza la herramienta estilo libre?

____________________________________________________________________________________
____________________________________________________________________________________
14. ¿Cómo se puede agregar texto en Fireworks?

____________________________________________________________________________________ 

____________________________________________________________________________________

PRÁCTICA GUIADA 
1. Crear un documento nuevo con las siguientes medidas: 500 de alto, 150 de ancho y 72 
de resolución, con fondo blanco.

2. Con la herramienta Texto, escribir tu nombre (s) sin apellidos.
3. Con la herramienta de Selección, activar el cuadro de texto con tu nombre. 
4. Cambiar el tipo de letra, por la fuente IMPACT, mover el cuadro con el nombre
al centro del lienzo, pulsar las teclas Ctrl + T para cambiar el tamaño del nombre, 
llenar todo el lienzo. 
5. Arrastrar los puntos de control de las esquinas para hacer más grande el cuadro de
nombre y que cubra todo el lienzo, el marco negro queda fuera del lienzo. 
6. Importar una imagen que servirá como fondo del nombre, trazarla sobre todo el escena- 
rio.
7. Colocar el apuntador sobre la imagen y con el botón derecho, en el submenú 
Organizar, elegir Enviar hacia atrás. Aparece el nombre encima de la ima-
gen. 
8. Dar clic sobre la imagen y pulsar las teclas Ctrl + X
9. Seleccionar el nombre y en el menú Edición, elegir la opción Pegar dentro. 
10. En el icono Filtros, se elige iluminación y sombreado, luego se elige Sombras, se manipulan los niveles 
de opacidad a 75, la suavidad a 10 y el ángulo a 180. Observa los cambios en la imagen. Guarda el do-
cumento con el nombre texto e imagen. 
39 
                    

11. Crear un documento nuevo de 900 X 600, resolución 72, fondo blanco.
 12. Pulsar las teclas Ctrl + R para importar una imagen de un
paisaje, un animal, una iglesia o una persona, para eliminar
 el fondo.http://i39.tinypic.com/28i89xx.jpg
13. Trazar la imagen sobre todo el lienzo, hacer clic sobre el icono Varita Mágica
y hacer clic en la parte del cielo, aparece una figura punteada,
pulsar la tecla suprimir y se debe eliminar la sección.
14. Se puede utilizar la varita mágica para eliminar todas las
partes del fondo que se deseen, principalmente áreas gran-
des del mismo color.
15. En este ejemplo se van a utilizar dos herramientas para completar la imagen,
primero se utiliza el sello para clonar los colores de la montaña nevada y
rellenar el espacio que se borró del cerro, después se utiliza el borrador
para eliminar partes pequeñas de la parte nevada que se encuentran más
alejadas, el objetivo es formar el cono del volcán.
16. Con la herramienta sello se va pulsando sobre el
color original y luego sobre el área en blanco que
SUBMÓDULO I se quiere pintar del mismo color y textura. La cruz indica el color que se copiara
Elaboración de y el círculo pinta el área con los colores copiados.
páginas WEB 17. con la herramienta Borrador se eliminan las partes que quedan fuera del cono y
también las que están más alejadas. Agregar un cuadro de texto y escribir tu nom-
bre, cambiar el color de la fuente por amarillo, tamaño 26 y colocarlo en la parte
central, a la izquierda. Guardar el archivo como volcán.
Elaborar un cuadro sinóptico sobre el tema 1.5
















 40
                    

EVALUACIÓN FORMATIVA 

1. Abrir el programa de Fireworks y elegir Plantilla

web banners.
2. Escribir lo que se muestra en la imagen en cada cua-
dro.
3. Hacer los cambios de la fuente, color y del tamaño
de fuente.
4. Guardar el documento como páginaweb.
5. Agregar un nuevo documento de 400 X 200, fondo blanco y reso-
lución de 72.
6. Agregar un rectángulo que cubra todo
el lienzo con relleno de patrón, elegir la SUBMÓDULO I
opción madera, aparecen dos tiradores para ajustar el patrón del relleno.
7. Dibujar una elipse de 380 X 180 con Elaboración de
páginas WEB
relleno solido color negro.
8. Importar una fotografía que cubra
todo el escenario, en el menú Modi-
ficar, pulsar sobre el submenú Orga-
nizar y elegir la opción Enviar Atrás,
puedes observar que la foto queda debajo.
9. Pulsar las teclas Ctrl + X para cor-
tar la imagen y luego en el menú Edición
elegir la opción Pegar dentro.
10. Agregar varios filtros, inicia con el de Ajus-
tar color, elige Brillo y contraste, modifica
a 15, luego agrega un Bisel interior, al 90%
de opacidad con una dureza de 5, ensegui- 
da agrega otro filtro de perfilar, luego otro de sombra interior y finalmente un

desenfoque de zoom. La foto debe quedar como se muestra.
11. Desactivar cada uno de los filtros, haciendo clic en la palomita que apare- 
ce al principio de cada filtro, en la lista debajo del icono Filtros. Empieza

por el último filtro el del desenfoque, para que veas los cambios.
12. Hacer clic sobre el efecto de sombra interior y puedes observar que se 
activa el icono del signo menos, que se encuentra a un lado del signo más,
significa que puedes eliminar el efecto, pulsa sobre el icono menos y eli- 
mina también el filtro del desenfoque de zoom. 
13. Guarda el documento con el nombre marco de madera. 
Crear un fondo de pantalla (tema: paisajes de México) 

1. En la pantalla de bienvenida, pulsar sobre el icono Abrir y
elegir la imagen que se utilizará de fondo de pantalla. 
2. En el menú Filtro, con el submenú Ajustar color, elegir Matiz

y saturación, Mover los niveles de matiz, saturación y lumino-
sidad. 
3. Agregar una imagen de agaves en la esquina superior derecha,
dibujarla con una medida de 250 X 120, luego en el menú Co- 
mando, elegir el submenú Creativo, elegir la opción Máscara 
de vector automática, elegir la primera opción de Formas y pulsar el botón Aplicar, luego mover los
tiradores para ajustarla. 
41 
                    

4. Importar una imagen de los Cabos y con el comando Creativo, elegir
 Convertir a tonos sepia. Agregar una tercera imagen de una cascada,
luego otra de una pirámide, una ciudad colonial y una playa, a cada

una agrégale un efecto creativo o máscara.
5. Agrega un cuadro de texto “PAISAJES DE MÉXICO” y en otro cuadro
escribe tu nombre, cambia el color, tamaño y fuente y colócala en la
parte central,
6. Guarda el archivo como fondo de escritorio.
Registro de
GUÍA DE OBSERVACIÓN cumplimiento
SUBMÓDULO I No. Observaciones
Indicadores de desempeño
Elaboración de SÍ NO
páginas WEB
Abrió Fireworks y creó un nuevo documento
1.
utilizando plantillas.
Cambió la fuente, el color y tamaño, guardó
2.
el documento.
Agregó un nuevo documento, con un rectán-
3. gulo con relleno de patrón y dibujó una elipse
con relleno sólido.
Importó una fotografía y cubrió todo el esce-
4. nario, envió la imagen hacia atrás, corto la
imagen y la pego dentro.
Agregó los filtros indicados, los desactivó y
5.
eliminó los indicados.
 Guardó el documento con el nombre señala-
6.
 do.
Abrió una imagen para utilizarla de fondo y
 7.
modificó los colores.
 Agregó las seis imágenes solicitadas en los
8.
lugares indicados.

Agregó varios efectos creativos a las imáge-
9.
 nes.
 Colocó el texto señalado en la posición indi-
10.
cada.
 Guardo el documento con el nombre solicita-
11.
do.









 42
                    

1.6 OPCIONES AVANZADAS DE FIREWORKS


SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







FORMAS AUTOMÁTICAS 

Las formas automáticas, a diferencia de otros grupos de objetos, tienen puntos de control en forma de rom-
bo, además de los tiradores del grupo de objetos. Al arrastrar un punto de control sólo se altera la propiedad 
visual asociada. La mayoría de los puntos de control tienen textos informativos que describen la forma en la
que afectan a la forma automática.Las herramientas de formas automáticas crean formas con orientaciones 
predefinidas. Por ejemplo, la herramienta Flecha dibuja flechas horizontales. Del mismo modo, para la for- 
ma automática de estrella, haga clic y arrastre el punto de control izquierdo arriba y abajo verticalmente para
cambiar el número de puntos. Se pueden utilizar los demás puntos de control para modificar la “nitidez” y 
la “profundidad” de los rayos.

Las herramientas de Formas automáticas

 Flecha Flechas sencillas de todas las proporciones y líneas rectas o curvas.
 Línea flecha Líneas de flecha rectas y estrechas que proporcionan un acceso rápido a las puntas de flecha 
43 
                    

comunes (haga clic en cualquier extremo de la línea).
  Rectángulo biselado Rectángulos con esquinas biseladas.
 Rectángulo con chaflán Rectángulos con chaflanes (esquinas que están redondeadas en la parte interior
 del rectángulo).
 Línea de conexión Líneas de conexión de tres segmentos, como las que se utilizan para conectar los
elementos de un diagrama de flujo o un organigrama.
 Donut Anillos rellenos.
 Forma de L Formas con la esquina en ángulo a la derecha.
 Herramienta Medición Líneas de flecha, simples que indican las dimensiones de elementos de diseño
claves en píxeles o pulgadas.
 Sección Gráficos de sectores.
 Rectángulo redondeado Rectángulos con esquinas redondeadas.
 Polígono inteligente Polígonos equiláteros, de 3 a 25 lados.
 Espiral Espirales abiertas.
 De estrella Estrellas con cualquier número de puntas, de 3 a 25.
DIBUJAR UNA FORMA AUTOMÁTICA

SUBMÓDULO I
Elaboración de
 En la sección Vector del panel Herramientas, seleccione una herramienta de
páginas WEB forma automática el menú emergente.
 Siga uno de estos procedimientos:
 Arrastre el ratón por el lienzo para dibujar la forma.
 Haga clic en el lienzo para colocar la forma con su tamaño predeterminado.
CREACIÓN DE FORMAS COMPUESTAS

Cree una forma compuesta con trazados vectoriales sencillos como rectángulos, elipses y otros trazados
vectoriales. Los objetos individuales de una forma compuesta se pueden desplazar y editar utilizando una he-
rramienta de subselección incluso después de combinarse. En el modo de forma compuesta, todos los objetos
vectoriales nuevos se añaden al mismo objeto en el panel de capa. Para añadir objetos a diferentes objetos,
salga del modo utilizando el botón Normal.
Las formas compuestas se pueden crear realizando una de las siguientes operaciones:
 Cree un vector, seleccione la operación de forma compuesta como, por ejemplo, Añadir y Restar y di-
 buje otros vectores.
  Cree varios vectores y utilice la operación de forma compuesta.
 DIVISIONES, ROLLOVERS Y ZONAS INTERACTIVAS
 Creación y edición de divisiones
Las divisiones son elementos básicos para la creación de interactividad en Adobe Fireworks. Las divisiones
 son objetos Web que existen en última instancia como código HTML. Es posible ver, seleccionar y asignar
otro nombre mediante la capa de Web del panel Capas.La división “corta” un documento de Fireworks en

porciones más pequeñas que se exportan como archivos independientes. Durante la exportación, Fireworks
 crea un archivo HTML que contiene el código de la tabla que recompone el gráfico en un navegador Web.
Dividir una imagen aporta tres ventajas fundamentales:Se optimizan las imágenes y la descarga es más
 rápida, aporta interactividad Las imágenes pueden responder a eventos de ratón, facilita las actualizaciones
 Para las partes de las páginas Web que cambian con frecuencia (por ejemplo: fotos y nombres en una página
sobre el empleado del mes).

 Crear divisiones rectangulares
Puede crear divisiones rectangulares realizando dibujos con la herramienta División o insertando una divi-
 sión basada en un objeto seleccionado. Utilice guías de división (las líneas que se extienden desde el objeto
de división) para determinar los límites de los archivos de imagen independientes en los que se divide el
 documento al exportarse.
 Para dibujar un objeto de división rectangular
  Seleccione la herramienta División.

 Arrastre para dibujar el objeto de división.

 44
                    

Para crear una división rectangular basada en un objeto seleccionado

 Seleccione Edición > Insertar > División rectangular. La división es un rectángulo cuya área incluye
los bordes más externos del objeto seleccionado. 
 Si se selecciona más de un objeto, seleccione Una para crear un objeto de división único que cubra todos
los objetos seleccionados o seleccione Varias para crear un objeto de división para cada objeto seleccio-
nado.
Para crear divisiones que no sean rectangulares

Utilice la herramienta División poligonal para crear divisiones que no sean rectangulares. Las divisiones no
rectangulares son útiles cuando se intenta añadir interactividad a una imagen no rectangular.
Dibujar objetos de división poligonal
 Seleccione la herramienta División poligonal.

 Haga clic para colocar los puntos de vector del polígono. Esto es necesario ya que la herramienta
División poligonal dibuja segmentos de línea recta.
Crear divisiones de texto HTML SUBMÓDULO I

Una división HTML designa el área donde se presenta texto HTML estándar en el navegador. A continua-
ción, exporta el texto HTML que aparece en la celda de la tabla definida por la división. Elaboración de
páginas WEB
Las divisiones HTML son útiles para actualizar rápidamente el texto de una página web sin la necesidad de
crear nuevos gráficos.
LOS ROLLOVERS
Todos los rollovers funcionan de la misma manera: cuando el puntero del ratón se sitúa sobre un gráfico,
dicha acción desencadena la visualización de otro gráfico. La activación es siempre un objeto Web (una
división, una zona interactiva o un botón). El efecto de rollover más sencillo intercambia una imagen en
estado 1 por una imagen (justo debajo) en estado 2. No obstante, se pueden crear efectos de rollover más
complicados. Los efectos de rollover de intercambio de imagen sirven para intercambiar imágenes sea cual
sea su estado. Los efectos de rollover desunido intercambian una imagen de una división que no sea una
división de activación.
Al seleccionar un objeto Web de activación que se haya creado mediante un tirador de comportamiento
o el panel Comportamientos, aparecen todas sus relaciones de comportamiento.
De manera predeterminada, una línea azul de comportamiento representa una interacción de rollover. 
Crear y añadir un rollover simple 
Un rollover simple intercambia el estado que se encuentra justo debajo del estado superior y requiere
sólo una división. 

 Asegúrese de que el objeto de activación no se encuentra en una capa compartida.
 Seleccione Edición > Insertar > Insertar división rectangular o Insertar división poligonal para crear 
una división sobre el objeto de activación.

 Cree un nuevo estado en el panel Estados haciendo clic en el botón Estado nuevo/duplicado.
 Cree, pegue o importe una imagen para utilizarla como imagen de intercambio en el nuevo estado. 
 Coloque la imagen bajo la división creada en el paso 2. Aunque actualmente se encuentra en el estado 2,
la división es visible. 
 Seleccione el estado 1 en el panel Estados para volver al estado que contiene la imagen original. 
 Seleccione la división y coloque el puntero sobre el tirador de comportamiento.
 Haga clic en el tirador de comportamiento y elija Añadir un comportamiento de Rollover simple en el 
menú. 
 Haga clic en la ficha Vista previa y pruebe el rollover simple o presione F12 para verlo en un navega-
dor. 
Opciones de comportamiento 
Rollover simple Añade un comportamiento de rollover a la división seleccionada utilizando el estado 1 como
estado Arriba y el estado 2 como estado Sobre. Después de seleccionar este comportamiento, debe crear 
una imagen en un segundo estado, en la misma división, para crear el estado Sobre. En realidad, la opción 
Rollover simple es un grupo de comportamientos que contiene los comportamientos Intercambiar imagen y
Restaurar imagen de intercambio. 
45 
                    

Definir Imagen de barra de navegación Define una división como parte de una barra de navegación de
 Fireworks. Todas las divisiones que forman parte de la barra de navegación deben tener este comportamien-
to. En realidad, la opción Establecer imagen de barra de navegación es un grupo de comportamientos que
 contiene los comportamientos Bar Nav Sobre, Bar Nav Abajo y Restaurar Bar Nav. Este comportamiento se
define automáticamente de forma predeterminada cuando utiliza el Editor de botones para crear un botón que
incluya los estados Incluir estado Sobre y Abajo o Mostrar imagen Abajo después de cargar.
Al crear un botón de dos estados, se asigna un comportamiento rollover simple a la división. Al crear un
botón de tres o cuatro estados, se asigna un comportamiento Establecer imagen de barra de navegación a la
división. Los comportamientos son:
A. Intercambiar imagen Reemplaza la imagen de la división especificada por el contenido de otro estado o
el de un archivo externo.
B. Restaurar imagen intercambiada Devuelve el objeto de destino a su aspecto predeterminado en el estado 1.
C. Bar Nav Sobre Especifica el estado Sobre para la división seleccionada cuando forma parte de una barra
de navegación y también puede especificar los estados Carga previa de imágenes e Incluir estado Sobre
y Abajo.
D. Bar Nav Abajo Especifica el estado Abajo para la división seleccionada cuando forma parte de una barra
SUBMÓDULO I de navegación y también puede especificar el estado Carga previa de imágenes.
E. Restaurar Bar Nav Restaura todas las otras divisiones de la barra de navegación a su estado Arriba.
Elaboración de
páginas WEB F. Establecer menú emergente Asocia un menú emergente a una división o zona interactiva. Al aplicar un
comportamiento de menú emergente, se puede utilizar el Editor de menús emergentes.
G. Definir texto de barra de estado Permite definir texto para mostrarlo en la barra de estado en la parte
inferior de la mayoría de las ventanas del navegador.
Asignar comportamientos a una división seleccionada

Haga clic en el botón Añadir comportamiento del panel Comportamientos.
Crear zonas interactivas
 Las zonas interactivas resultan convenientes cuando desea vincular áreas de una imagen con otras páginas
Web, pero no necesita resaltar estas áreas ni producir efectos de rollover en respuesta a los movimientos
o acciones del ratón.
 Las zonas interactivas y los mapas de imagen también son ideales cuando el gráfico en el que ha insertado
las zonas interactivas se exporta mejor como un único archivo de imagen, es decir, utilizando un mismo
 formato de archivo y la misma configuración de optimización.
  Las zonas interactivas pueden ser rectángulos, círculos o polígonos. Los polígonos son útiles cuando se
trabaja con imágenes intrincadas.
  Es posible seleccionar un objeto e insertar en él la zona interactiva.

Crear una zona interactiva rectangular o circular

 Seleccione la herramienta Zona interactiva rectangular o Zona interactiva circular en la sección Web del

panel Herramientas.
  Arrastre la herramienta Zona interactiva para dibujar una zona interactiva sobre un área del gráfico.
Mantenga presionada la tecla Alt (Windows) u Opción (Mac OS) para dibujar a partir de un punto cen-
 tral.

Crear una zona interactiva con forma irregular

 Elija la herramienta Zona interactiva poligonal.
  Haga clic en la herramienta para trazar los puntos de vector, igual que si estuviese dibujando segmentos
de línea recta con la herramienta Pluma. El relleno permite definir el área de la zona interactiva, sin

importar si el trazado está abierto o cerrado.

Crear mapas de imágenes
 Una vez insertadas las zonas interactivas adecuadas encima de un gráfico, exporte éste como un mapa de
 imagen para que se vea en navegadores Web. Cuando se exporta un mapa de imagen, se generan el archivo
gráfico y el archivo HTML que contiene la información de mapa para las zonas interactivas y los vínculos
 URL correspondientes. Fireworks sólo crea mapas de imagen de cliente durante la exportación.
 46
                    

Crear rollovers con zonas interactivas
Utilice el método de rollover de arrastrar y colocar para aplicar un efecto de rollover desunido a una zona 
interactiva. La zona de destino debe definirse mediante una división. Los efectos rollover se aplican en zonas
interactivas como si fueran divisiones. Después de crear un rollover desunido con una zona interactiva, la 
línea azul de conexión permanece visible al seleccionar la zona interactiva.
Utilización de zonas interactivas sobre divisiones
Si desea que únicamente una pequeña parte de un archivo gráfico de gran tamaño sea el activador de una
acción, coloque una zona interactiva sobre una división para activar una acción o comportamiento.
También puede colocar una división sobre el gráfico y después colocar una zona interactiva sobre el tex-
to. Al situar el cursor sobre el texto se activa el efecto de rollover, aunque todo el gráfico que se encuentra
debajo de la división desaparece al producirse el efecto de rollover.
Creación de una barra de navegación básica
Una barra de navegación es un grupo de botones que ofrece vínculos a otras áreas de un sitio web. Suele
tener la misma apariencia en todo el sitio para ofrecer un método de navegación coherente. Sin embargo,
los vínculos de la barra de navegación pueden ser diferentes para satisfacer las necesidades de determinadas
páginas.
SUBMÓDULO I
Creación de símbolos de botón
Los botones (un tipo especial de símbolo) se utilizan como elementos de navegación para una página web. Elaboración de
páginas WEB
Mediante el Panel de propiedades, resulta muy fácil editar los botones. Ya que es posible arrastrar instancias
de un botón desde la biblioteca de símbolos al documento, se puede cambiar el aspecto gráfico de un único
botón y actualizar automáticamente el aspecto de todas las instancias de botón de una barra de navegación.
Menús emergentes
Los menús emergentes aparecen en el navegador cuando el usuario mueve el puntero sobre un objeto
Web o bien hace clic en él, por ejemplo, en una división o zona interactiva.
 Cada elemento del menú emergente aparece como una celda de HTML o de imagen. La celda tiene un
estado Arriba, un estado Sobre y texto en ambos estados.
 Es posible incorporar vínculos de URL a elementos del menú emergente para la navegación y puede
crear tantos niveles de submenú como desee en los menús emergentes.
 Se puede utilizar alguna o todas las fichas y editar configuraciones de ficha en cualquier momento.
 Debe añadir al menos un elemento de menú en la ficha Contenido para crear una opción de menú que se
pueda previsualizar en un navegador. 
 Para obtener la presentación preliminar de un menú emergente, presione F12. Los menús emergentes no
se muestran en el espacio de trabajo de Fireworks.



ACTIVIDAD PRÁCTICA


Contesta las preguntas siguientes:

1. ¿Qué son las formas automáticas en Fireworks?

____________________________________________________________________________________

____________________________________________________________________________________

2. ¿Para qué sirven las formas compuestas en Fireworks? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
3. ¿Qué son las divisiones en Fireworks? 

____________________________________________________________________________________ 
____________________________________________________________________________________ 
47 
                    

4. ¿Qué tipos de divisiones hay en Fireworks?

____________________________________________________________________________________

____________________________________________________________________________________
5. ¿Qué son los rollovers en Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________
6. ¿Cómo se puede crear un rollover en Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________
7. ¿Cuáles son las opciones de comportamiento en Fireworks?

SUBMÓDULO I ____________________________________________________________________________________
Elaboración de
páginas WEB ____________________________________________________________________________________
8. ¿Qué son las zonas interactivasen Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________
9. ¿Cómo se puede crear un mapa de imágenes en Fireworks?

____________________________________________________________________________________
____________________________________________________________________________________
10. ¿Cómo se puede crear una barra de navegación básica en Fireworks?

 ____________________________________________________________________________________

____________________________________________________________________________________

11. ¿Qué son los símbolos de botónen Fireworks?

____________________________________________________________________________________

____________________________________________________________________________________

 12. ¿Qué son los menús emergentes en Fireworks?
 ____________________________________________________________________________________
 ____________________________________________________________________________________

 PRÁCTICA GUIADA
 Formas automáticas

1. Crear un nuevo documento de 500 X 300, Resolución 72, fondo blanco.
 2. Dibujar una figura de estrella, con medidas de 190 X 180, eliminar el fondo, agregar un
borde color naranja tamaño 10.

3. Con la herramienta de selección, hacer clic sobre la estrella y aparecen cinco rombos amarillos, que son
 los puntos de control para modificar el aspecto de la estrella.
 48
                    

4. El radio 1, que se encuentra en la parte superior, sirve para cambiar el tamaño de la estre-
lla, se puede hacer más grande o más pequeña. 
5. El radio 2, segundo rombo, sirve para hacer los picos más anchos o más delgados.

6. El tercer rombo, Redondez 1, se utiliza para redondear las puntas de los pi-
cos, y alargarlos o reducirlos..
7. El cuarto rombo, Redondez, tiene como función redondear las esquinas inter-
nas de la figura.
8. El quinto rombo, se encuentra fuera de la estrella en la esquina inferior izquierda, se utiliza
para cambiar el número de picos de la figura.
9. Manipulando los rombos, se pueden obtener formas muy diferentes a la figura
original.
10. La figura también se puede transformar por medio de menú Modificar y el
submenú Transformar, con las opciones: Escala, Sesgar, Distorsionar, rotar y
voltear.
11. Finalmente agrega un relleno azul claro, agrega un filtro de iluminado interior y
otro de sombra, guarda el documento como estrella.
SUBMÓDULO I
CREACIÓN DE UN MENÚ EMERGENTE
Elaboración de
12. Crear un nuevo documento de 1200 X 800, resolución 72, fondo blanco. páginas WEB
13. Dibujar un rectángulo del tamaño del lienzo, que lo cubra todo, puedes cam-
biar el color de relleno, por el color
que prefieras.
14. Buscar en la barra de herramien-
tas, la sección Web y pulsar sobre
el icono Zona interactiva, elegir la
zona rectangular y dibujar un rec-
tángulo sobre lienzo de 200 X 150.
15. En el menú Modificar, buscar menú
Emergente y elegir la opción Añadir
menú emergente, se abre el cuadro
Editor de menú emergente.
16. En la columna Texto hacer clic en el cua- 
dro blanco y escribir la palabra “AZUL”, 
pulsar sobre el icono ( + ) para agregar
más celdas y escribir los colores: “ROJO, 
CAFÉ, VERDE, ROSA, MORADO,

AMARILLO, VIOLETA”, al terminar la
lista pulsar sobre el botón SIGUIENTE. 
17. En la ficha ASPECTO marcar la casilla
HTML y en el menú VERTICAL, en la 
fuente, elige Verdana-Arial, en Tama- 
ño elige 14, Negritas, Centrado.
18. En la sección Estado arriba, cambiar el 
color del texto y de la celda, es el color que
tendrá normalmente el menú, en estado pasi- 
vo. 
19. En la sección Estado sobre, cambiar el
color del texto y de la celda, es el color que 
tendrá cuando se haga clic sobre el texto o
celda, se pulsa el botón SIGUIENTE. 
20. En la ficha AVANZADO se define el relleno de celda en 3, el espacio entre celdas a 1, el ancho de borde 
a 3 y el color de borde, se pulsa el botón SIGUIENTE.
21. En la ficha POSICIÓN, se puede elegir, el lugar donde se desea que aparezca el menú con respecto a la 
zona interactiva. Se da clic en la casilla deseado y se pulsa sobre el botón LISTO. Guardar el documento

como menú.
22. Pulsar la tecla F12 y ver el resultado. Se abre el explorador mostrando una vista previa del menú emer- 
49 
                    

gente, al principio se ve solamente el fondo, al
 desplazar el apuntador sobre el rectángulo inte-
ractivo, se activa el menú emergente, al pulsar
 sobre alguna de las opciones cambia de color,
no hace nada, porque aún no está vinculado con
nada, eso se hace posteriormente en Dreamwea-
ver.
23. Si se desean hacer cambios al menú ya sea al texto o a los colores,
se puede editar el menú, haciendo clic sobre el rectángulo interac-
tivo, aparecen los puntos de control y un círculo central, al colocar
el apuntador sobre el círculo, el apuntador cambia a forma de mano
y al hacer clic aparece un menú, se elige la
opción Editar menú emergente y vuelve a apa-
recer el editor, con las fichas disponibles para
hacer las modificaciones.
24. Crear un nuevo documento de 1200 X 800, resolución de
72, fondo blanco.
SUBMÓDULO I 25. Dibujar tres botones con la herra-
Elaboración de mienta Rectángulo, escribir dentro
páginas WEB de cada rectángulo con la herramienta texto: “COMIDA,
PAÍSES, MONEDAS”.
26. Seleccionar cada rectángulo para agruparlo con el texto, por
medio del menú Modificar y la opción Agrupar,
o bien con la combinación de teclas Ctrl + G, o
con el botón derecho elegir Agrupar.
27. Seleccionar el primer botón para aplicar zona
interactiva circular, crear un menú emergente y
agregar cinco tipos de
comida, especificar
las demás opciones, y
en posición colocarlos
debajo. Hacer lo mis-
mo para los otros botones.
 28. Al finalizar el primer botón, se muestra una línea que une el círculo
 con una tablas, eso indica que esta unido el menú emergente.
29. Al pulsar la tecla F12, y pasar el apuntador sobre la zona interactiva
 circular, aparece el menú emergente.
 30. Guardar el documento con el nombre menú emergente circular.
 VINCULOS DE BOTONES Y MENÚS EMERGENTES
 1. Los botones de Fireworks se pueden vincular tanto a directorios o

 páginas web, para realizar esta práctica es necesario que elabores
tres documentos, uno con fotos o imágenes de comidas o bien con
 recetas de cocina, otro con imágenes o fotos de monedas o un listado
de monedas del mundo, y otro con imágenes o fotos de países o un

listado de países, luego los agregas en una carpeta que se llame VINCULOSWEB dentro de la carpeta
 DOCUMENTOS.
2. Se seleccionar el botón COMIDA, en la sección de vínculos se co-
 pia la dirección de la carpeta que contiene los documentos, en este
caso la carpeta VINCULOSWEB, se copia la dirección de la car-

peta y se pega en el cuadro Vínculo, en el cuadro Alt, se escribe el
 texto alternativo que aparecerá cuando se pase el apuntador sobre el
botón, y en el cuadro destino se tienen cuatro opciones: blank, self,
 parent, top, las más usuales son blank, para abrir el vínculo en una
 página nueva, y self, para abrirlo en la misma página.
3. Para vincular los botones del menú emergente, es necesario abrir el editor de menú emergente y en la
 ficha CONTENIDO, agregar los vínculos para cada uno de los botones, así como el destino, se puede
 50
                    

copiar las direcciones directamente del explorador de internet o se pueden escribir manualmente, para
mayor seguridad, es mejor copiarlos, cuando se disponga de acceso a internet. En el destino es más re- 
comendable elegir la opción _Blank.
4. Prueba los vínculos pulsando la tecla F12 y con el apuntador. 
5. Abre todos los vínculos para verificar que estén correctos y funcionen adecuadamente.
6. Guarda el documento con el nombre vínculosweb.
SUBMÓDULO I
Elaboración de
páginas WEB
















51 
                    


Elabora un tutorial que incluya las siguientes actividades con Fireworks, agrega captura de pantalla en
cada paso:
1. Abrir Fireworks y crear un archivo nuevo de 800 X 500, Resolución 72, fondo blan-
co.
2. Agregar una forma de polígono, configura en el panel de propiedades el número de
lados en 6, Relleno Fucsia, con borde color verde oscuro, tamaño del borde de 4.
3. Cambiar el tipo de relleno por degradado con tres colores, elige el estilo radial y
recorre el marcador del extremo derecho hacia el centro y da doble clic donde se encontraba el mar-
cador para agregar el tercer color, elige color amarillo. El color del marcador izquierdo
debe ser verde.
4. Agrega una textura de Cuadricula 1 al 50%. Agregar un filtro de sombra sólida,
con una distancia de 40 y ángulo de 45.
SUBMÓDULO I 5. Aplicar algunos cambios con la opción Sesgar del menú Modificar>Transformar.
Elaboración de 6. Crear un archivo nuevo de 800 X 500, Resolución 72, fondo blanco.
páginas WEB
7. Importar un mapa de la república mexicana por regiones y que cubra todo el
lienzo.
8. En la sección Web de la barra de herramientas, pulsar
sobre el icono zona interactiva y elegir la poligonal.
9. El apuntador se convierte en forma de cruz, empieza a dar clic en la esquina superior derecha un
poco afuera del mapa para que cubra toda la zona noroeste y ve siguiendo el contorno, puedes
incrementar el zoom antes de empezar para tener más detalle, al completar la zona junta el punto
final con el inicial.
10. Cambia el nombre de la zona interacti-
va por NOROESTE
11. Abre el editor de menú emergente y
escribe los nombres de los estados que
forman la región Noroeste: Baja Califor-
 nia Norte, Baja California Sur, Sonora,
 Chihuahua, Durango y Sinaloa.
12. Busca las direcciones web del gobierno
 de cada estado y escríbelas en Vínculo,
 en la columna Destino, elige la opción
_Blank.
 13. Pulsar la tecla F12 para ver el menú emer-
gente en el explorador web.
 14. Verificar que los vínculos funciones co-
 rrectamente.
15. Repetir el proceso para marcar la región
 Noreste con los estados de Coahuila, Nuevo León y Tamaulipas. La zona Centro-Norte con los esta-
 dos de Zacatecas, San Luis potosí, Guanajuato, Querétaro y Aguascalientes.
16. Guardar el archivo con el nombre mapa interactivo.


 INSTRUCCIONES: Marca con una X si cumple los elementos señalados en la tabla del indicador corres-
 pondiente en la columna Si, y en caso contrario registra en la columna de No, si tienes observaciones que

Registro de
 GUÍA DE OBSERVACIÓN cumplimiento
No. Observaciones
 SÍ NO
 52
                    

Abrió Fireworks y creó un archivo nuevo indi-
1. 
cado,
2. Agregó el polígono con las propiedades solicitadas. 
Cambió a relleno degradado 3 colores, estilo ra-
3.
dial.
4. Agregó la textura señalada y transformación.
Abrió los paneles de propiedades, de herramien-
5.
tas, de muestras, historial, de capas, de formas.
Creó otro documento nuevo e importó el mapa
6.
pedido
Marcó las zonas interactivas poligonales, las
7.
nombró.
Agregó un menú emergente a cada zona poligonal
8. y escribió los vínculos web y definió el destino
en blank SUBMÓDULO I
9. Observó el mapa con las zonas y menús con F12 Elaboración de

páginas WEB
10. Verificó los vínculos web del menú emergente.
11. Guardó el archivo como mapa interactivo.

DEMOSTRACIÓN GRUPAL
PRÁCTICA INTEGRADORA 1
En equipos de 3 a 4 miembros, desarrollar las actividades siguientes.

1. La página web tiene un encabezado con texto e imágenes 
2. En la página web hay una parte central con información
3. Al final de la página hay una pie de página 
4. La página web tiene páginas interiores vinculadas 
5. En la página web hay una sección de contacto por teléfono o correo electrónico.
6. La página web tiene enlaces externos a otras páginas web 
7. En la página web hay una galería de imágenes
8. Las imágenes en la página web tienen animaciones. 
9. El texto de la página web tiene animación. 
10. La página web esta publicada en internet
11. Hay un mapa con zonas interactivas y menú emergente con vínculos web 
12. Crear un sitio google para subir archivos (Google site) y agregar 3 páginas interna

13. Agregar una página web de Google + y agregar texto y una imagen a tu página.
14. Crear una página web en simplesite.com con el nombre de tu equipo de trabajo. 
15. Desarrollar una cuenta en Wix.com, con la cuenta de correo creada.
16. Diseñar la cabecera de la página con texto e imágenes. Cambiar el estilo del encabezado. Cambiar el fondo 
17. Agregar imágenes a la página web. 
18. Publica la página, comparte tu página.
19. Agrega un botón para vincular el sitio google, escribe tus datos de contacto 
20. Elabora un banner en Fireworks, al menos con dos figuras y texto que se muevan en sentido contrario.

21. Crea una figura utilizando formas con imágenes insertadas y distorsionadas.
22. Elabora el nombre de tu empresa con un fondo de paisaje o imagen. 
23. Crea un menú emergente con botones rectangulares y vínculos a documentos.
24. Agrega un menú emergente con zona interactiva circular y vínculos web 
53 
                    

INSTRUMENTOS DE EVALUACIÓN

 Datos generales
MÓDULO IV: PÁGINAS WEB Y PROYECTOS DE EDUCACIÓN EN LÍNEA
SUBMÓDULO 1: ELABORACIÓN DE PÁGINAS WEB
COMPONENTE 1: CONCEPTOS Y ELEMENTOS DE LAS PÁGINAS WEB
Nombre del candidato
Nombre del evaluador
Nombre del centro
valuador
Clave del centro
Clave delinstrumento
evaluador
Fecha de aplicación No. de aciertos Calificación

INSTRUCCIONES: Marque con una “X” el cumplimiento en los siguientes reactivos. Es conveniente reali-
SUBMÓDULO I
zar las observaciones pertinentes. Los reactivos se refieren al desempeño en la Práctica integradora.
Elaboración de
páginas WEB
LISTA DE COTEJO CUMPLE LISTA DE COTEJO CUMPLE
REACTIVOS SÍ NO REACTIVOS SÍ NO
La página web tiene un encabezado Creó un sitio google para subir archivos
con texto e imágenes (Google site) y agregar 3 páginas internas
En la página web hay una parte central Hay una página web de Google + y Agre-
con información gó texto y una imagen a tu página.
Al final de la página hay una pie de Desarrolló una página web en simplesite.
página com
La página web tiene páginas interiores Hizo una cuenta en Wix.com, con la cuen-
vinculadas ta de correo creada.
En la página web hay una sección de Diseñó la cabecera de la página con texto e
contacto por teléfono o correo electró- imágenes.Cambiar el estilo del encabeza-

nico. do.Cambiar el fondo
 La página web tiene enlaces externos a
Agregó imágenes a la página web.
 otras páginas web
Agregó un botón para vincular el sitio go-
 Publica la página, comparte tu página.
ogle, escribe tus datos de contacto
 Elaboró un banner en Fireworks, al menos
En la página web hay una galería de
con dos figuras y texto que se muevan en
 imágenes
sentido contrario.
 Las imágenes en la página web tienen Creó una figura utilizando formas con
animaciones. imágenes insertadas y distorsionadas.

El texto de la página web tiene anima- Elaboró el nombre de tu empresa con un
 ción. fondo de paisaje o imagen.
 La página web esta publicada en inter- Creó un menú emergente con botones rec-
net tangulares y vínculos a documentos.
 Hay un mapa con zonas interactivas y Agregó un menú emergente con zona inte-
 menú emergente con vínculos web ractiva circular y vínculos web
 Firman de común acuerdo

Participante Evaluador



 54
                    

COLEGIO DE BACHILLERES, S.L.P.

PLANTEL ____________________________________________________

INSTRUMENTOS DE EVALUACIÓN DE LA CAPACITACION DE INFORMÁTICA,
MODULO IV,PÁGINAS WEB Y PROYECTOS DE EDUCACIÓN EN LÍNEA
ALUMNO(A): ___________________________________________________________________________
SEMESTRE:______________________ GRUPO:________________ FECHA:______________________

Instrucciones: Verificar que el trabajo contenga los aspectos señalados, si cumple con el aspecto anotar la
cantidad correspondiente en la columna Si, o anotar (una palomita) en caso de que no cumpla,.
LISTA DE COTEJO LISTA DE COTEJO

CUMPLE CUMPLE CUMPLE
SUBMÓDULO I
ACTIVIDADES DE ACTIVIDADES EVALUACIONES
No. SI NO SI NO SI NO
APRENDIZAJE COMPLEMENTARIAS FORMATIVAS Elaboración de
1. páginas WEB
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
SUMA 


GUIA DE OBSERVACIÓN:
ACTA DE EVALUACIÓN PARCIAL 
COEVALUACIÓN
P U N T A J E PUNTUACION 
No ASPECTO VALOR ASPECTO PORCENTAJE
OBTENIDO DEFINITIVA
Asiste regularmente a 
1 CUESTIONARIO
clases (1.0) 
Participa activamente GUIA DE
2 
en clase (1.0) OBSERVACION
Cumple con su parte LISTA DE 
3
de trabajo (1.0) COTEJO LC

ACTIVIDADES
Hace aportaciones
4 DE 
valiosas (1.0)
APRENDIZAJE

Respeta a sus compa- EVALUACIONES
5
ñeros (1.0) FORMATIVAS 
GUIA DE OBSERVA-
Mantiene la disciplina 
6 CION (COEVALUA-
en clases (5.0) CION)

CALIFICACION FINAL DEL COMPONENTE 


55 
                    

REVISÓ ENTERADO: PADRE O TUTOR INSTRUCTOR

NOMBRE Y FIRMA NOMBRE Y FIRMA NOMBRE Y FIRMA

REFERENCIAS
 http://www.aulaclic.es/dreamweaver-cs6/t_5_1.htm
 http://serbal.pntic.mec.es/apan/marque.htm
SUBMÓDULO I
 Manual de Ayuda de Adobe Dreamweaver versiones CS5 y CS6
Elaboración de
páginas WEB
















 56
                    

COMPONENTE II. DISEÑO DE PÁGINAS WEB CON
DREAMWEAVER 

La construcción de las páginas de una Web se realiza utilizando diferentes programas editores que permiten
la creación de páginas de una forma sencilla sin tener que programar cada instrucción del lenguaje Html.
Los programadores avanzados suelen emplear varios programas para la creación de las páginas. Uno de
los favoritos es el Dreamweaver. Si dispone del navegador Netscape una opción sencilla para crear rápida-
mente páginas Web es emplear el programa Netscape Composer. Otra opción es programar directamente
en HTML. Esta es una opción para los que desean profundizar y comprender el lenguaje que se encuentra
detrás de las páginas de Internet.
Existen dos opciones para publicar una página web:
tener una DIRECCIÓN PROPIA del tipo www.aulafacil.
com. Esto es lo que se denomina una dirección de primer
nivel o bien, utilizar una DIRECCIÓN GRATUITA que
proporciona sin costo, algún Portal de Internet del tipo:
https:.sites.google.com/site/jlupisfel
SUBMÓDULO I
Puede crear una página personal y no necesita que la
Web disponga de una dirección de primer nivel, puede Elaboración de
crear y alojar su página en alguno de los portales que ofre- páginas WEB
cen esta posibilidad. Algunos Portales que proporcionan
alojamiento y facilidades para crear páginas personales
son: WIX, Iespana y Pobladores. Para realizar las páginas
necesita imágenes o Gif y diferentes complementos para
darle vistosidad a las páginas. Para subir los archivos que ha creado desde el disco duro de su computadora
al servidor de Internet, dispone de varias opciones entre ellas el programa FTP.
Adobe ha integrado varios programas que facilitan en gran medida el trabajo de los programadores y di-
señadores web, entre ellos el Flash, el Fireworks, Photoshop que permiten realizar animaciones e imágenes
para integrarse en una página web que se elabora con Dreamweaver.
Con Dreamweaver se puede elegir el diseño más apropiado, o combinar las opciones de diseño de Drea-
mweaver para definir el aspecto del sitio. En la creación de su diseño puede utilizar elementos PA, estilos de
posición CSS (CSS, son hojas de estilo en cascada, en inglés, Cascading Style Sheets), CSS es un lenguaje
usado para definir la presentación de un documento estructurado escrito en HTML o XML) o diseños CSS 
predefinidos de Dreamweaver.
Algo que no se puede dejar de mencionar en la elaboración y diseño de las páginas web, es la creati- 
vidad de diseñador y programador de los sitios web, para esto Dreamweaver ofrece una gran variedad de 
efectos que se pueden aplicar tanto a imágenes, palabras, bloques de texto y páginas, por otro lado, están
las marquesinas, que pueden dar vida y movimiento a las páginas y que cuentan con atributos que se pueden 
modificar, como la dirección en la que se mueve, el tamaño de la marquesina con relación a la ventana, el 
color del fondo, el color del texto, las fuentes, incluso se pueden utilizar imágenes que se están moviendo
a determinada velocidad, imprescindibles son los vínculos que permiten conectar la página web, tanto con 
páginas internas como páginas externas, y dentro de las misma página.










57 
                    

2.1 FUNDAMENTOS PARA EL DISEÑO DE PÁGINAS WEB CON
 DREAMWEAVER

SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







 EDITOR DE PÁGINAS WEB DREAMWEAVER

El espacio de trabajo de Adobe Dreamweaver contiene barras de herramientas, inspectores y paneles que
 le permiten crear páginas Web. Se puede personalizar el aspecto general y el comportamiento del espacio
de trabajo, flujo de trabajo de Dreamweaver, también se pueden utilizar varios métodos para crear un sitio
 Web; éste es uno de ellos:

1) Planificación y configuración del sitio. Determina la ubicación de los ar-

chivos y examina las necesidades del sitio, el perfil de la audiencia y sus
 objetivos. Además, debes tener en cuenta los requisitos técnicos como
el acceso de los usuarios, las limitaciones del navegador, los plugins o
 la descarga de archivos. Una vez que hayas organizado la información
 y determinado una estructura, podrás comenzar a crear el sitio.
 58
                    

2) Organización y administración de los archivos
del sitio. En el panel Archivos puede añadir, 
borrar y cambiar el nombre de los archivos y
carpetas fácilmente con el fin de modificar la 
organización según resulte necesario, hay nu-
merosas herramientas que te ayudarán a admi-
nistrar el sitio, transferir archivos desde y ha-
cia un servidor remoto, configurar un proceso
de Protección/desprotección que evite que se
sobrescriban archivos y sincronizar los archi-
vos de los sitios local y remoto.
El panel Archivos permite organizar fácilmen-
te los archivos de un sitio, que se pueden arras-
trar directamente desde el panel hasta un documento de Dreamweaver.
3) Diseño de las páginas Web. Elegir
el diseño más apropiado, o combinar
las opciones de diseño de Dreamwea-
ver para definir el aspecto del sitio. En SUBMÓDULO I
la creación de su diseño puede utilizar
elementos PA, estilos de posición CSS Elaboración de
páginas WEB
(CSS, son hojas de estilo en cascada, en
inglés, Cascading Style Sheets), CSS es
un lenguaje usado para definir la pre-
sentación de un documento estructurado escrito en HTML o XML) o diseños CSS
predefinidos de Dreamweaver.
Las herramientas de tabla te permiten diseñar páginas rápidamente y, posteriormente,
reorganizar la estructura de las mismas. Para mostrar varios documentos de forma si-
multánea en un navegador, pueden utilizarse marcos para diseñar los documentos. Por último, se puede
crear páginas nuevas basadas en una plantilla de Dreamweaver y actualizar su diseño de forma automá-
tica cuando cambie la plantilla.
4) Adición de contenido a las páginas. Agrega elementos de diseño, como texto, imágenes, imágenes de
sustitución, mapas de imágenes, colores, películas, sonido, vínculos HTML, menús de salto,puede
utilizar funciones de creación de páginas incrustadas para dichos elementos, como títulos y fondos,
escribir directamente en la página o importar contenido desde otros documentos, también proporciona 
comportamientos para llevar a cabo tareas en respuesta a eventos específicos, como la validación 
de un formulario cuando el visitante hace clic en el botón Enviar o abrir una segunda ventana del na-
vegador, cuando la página principal ha terminado de cargarse. Dreamweaver incluye herramientas para 
maximizar el rendimiento del sitio Web y para la comprobación de las páginas, con objeto de garantizar 
su compatibilidad con navegadores Web distintos.
5) Creación de páginas mediante 
la introducción manual de códi-

go. La codificación manual de
páginas Web es otro método de 
crear páginas. Dreamweaver
ofrece sencillas herramientas 
de edición visual, pero también 
incluye un entorno de codifi-
cación más sofisticado. Puede 
utilizar el método que prefiera, 
o una combinación de ambos,
para crear y editar sus pági- 
nas.
6) Configuración de una aplicación Web para contenido dinámico. Muchos 
sitios Web contienen páginas dinámicas que permiten a los visitantes ver

información almacenada en bases de datos y que suelen permitirles añadir
y editar información. Para crear esas páginas, debes configurar primero un 
servidor y una aplicación Web, crear o modificar un sitio de Dreamwea-
ver y conectarse a una base de datos. 
59 
                    

7) Creación de páginas dinámicas. En Dreamweaver se pueden de-
 finir diversas fuentes de contenido dinámico, incluidos juegos de
registros extraídos de bases de datos, parámetros de formularios y
 componentes JavaBeans. Para añadir el contenido dinámico a una
página, basta con arrastrarlo a ella.Puede establecer que los regis-
tros de la página aparezcan de uno en uno o en grupos, mostrar
varias páginas de registros, añadir vínculos especiales para pasar
de una página de registros a la siguiente y crear contadores para
que los usuarios puedan llevar un control de los registros.
8) Comprobación y
publicación. La
comprobación
de las páginas
es un proceso
continuo que
se lleva a cabo
durante todo el
SUBMÓDULO I ciclo de desarrollo. Al final del ciclo, publicará el sitio
Elaboración de
en un servidor. Muchos desarrolladores también pro-
páginas WEB graman operaciones de mantenimiento periódico para
asegurarse de que el sitio se mantiene actualizado y
operativo.

OPERACIONES BÁSICAS DE TRABAJO
Arrancar y cerrar Dreamweaver. Las dos formas bá-
sicas de arrancar Dreamweaver:
 Desde el botón Inicio

 Desde el icono de Dreamweaver del Escritorio.
Para cerrar Dreamweaver, podemos utilizar
cualquiera de las siguientes operaciones:

 Hacer clic en el botón cerrar en la esquina superior derecha,

 Pulsar la combinación de teclas Alt + F4.
  Pulsar la combinación de teclas Ctrl + Q.
 Hacer clic sobre el menú Archivo y elegir la opción Salir.

 Abrir y Guardar documentos
Para abrir un documento, puedes utilizar cual-
 quiera de las siguientes operaciones:
  Hacer clic en el icono abrir de la barra de herramientas estándar (si está
 visible).
 Pulsar la combinación de teclas Ctrl + O.
  Hacer clic sobre el menú Archivo y elegir la opción Abrir.
 Hacer doble clic sobre el Archivo en la ventana del sitio.

 Hacer clic derecho sobre el Archivo en el explorador de Windows, y elegir
 la opción Abrir con ? Adobe Dreamweaver.
 Para abrir un documento Nuevo, puedes utilizar cualquiera de las siguientes ope-
 raciones:
 Hacer clic en el botón Nuevo de la barra de herramientas estándar (si está visible).
  Pulsar la combinación de teclas Ctrl + N.
 Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
  Después de esto aparecerá una nueva ventana, en la que deberás elegir la Catego-
 ría Página en Blanco.
 60
                    

 En la segunda co-
lumna selecciona- 
mos HTML, ob-
servamos que hay

muchos diseños ya
creados que pode-
mos elegir, para
nuestro primer
ejemplo elegimos
en Diseño ningu-
no. A continuación
pulsamos el botón
Crear.
Para Guardar un documento, puedes utilizar cualquiera de las siguientes

operaciones.
 Hacer clic en el botón Guardar de la barra de herramientas estándar SUBMÓDULO I

 Pulsar la combinación de teclas Ctrl + S.
 Hacer clic sobre el menú Archivo y elegir la opción Guardar. Elaboración de
páginas WEB
En el caso de estar trabajando simultáneamente con varios documentos, Dreamweaver incluye la

posibilidad de poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo
puedes realizar cualquiera de las siguientes operaciones.
 Hacer clic en el botón Guardar Todo de la barra de herramientas es-

tándar.
 Hacer clic sobre el menú Archivo y elegir la opción Guardar Todo.
Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno
de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no
desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no
utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa
que cuando hay cambios sin guardar aparece un * tras el nombre del documento. 

ENTORNO DE TRABAJO. 
En Windows, Dreamweaver 
proporciona un diseño integra-

do en una única ventana. En el
espacio de trabajo integrado, to- 
das las ventanas y paneles están
integrados en una única ventana 
de la aplicación de mayor tama- 
ño.
El espacio de trabajo incluye 
los siguientes elementos.

 La ventana de bienvenida. 
Permite abrir un documen-
to reciente o crear un docu- 
mento nuevo. Desde la pan- 
talla de bienvenida, también
puede profundizar sus cono- 
cimientos sobre Dreamwea-
ver mediante una visita guiada o un tutorial del producto.


61 
                    

 Barra de la aplicación. A lo largo de su parte superior, la ventana de la aplicación contiene un conmu-
 tador de espacios de trabajo, menús (sólo Windows) y otros controles de aplicación.
 Barra de herramientas Documento. Contiene botones que proporcionan opciones para diferentes vistas
 de la ventana de documento (como la vista Diseño y la vista Código), diversas opciones de vi-
sualización y algunas operaciones comunes como la obtención de una vista previa en un navegador.
 Barra de herramientas Estándar. Contiene botones para las operaciones más habituales de los menús
Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar,
Deshacer y Rehacer. Para mostrar la barra de herramientas Estándar, seleccione Ver > Barras de he-
rramientas > Estándar.
 Barra de herramientas Codificación. (Sólo se muestra en la vista Código.) Contiene botones que le per-
miten realizar numerosas operaciones de codificación estándar.
 Barra de herramientas Representación de estilos. (Oculta de manera predeterminada.) Contiene botones
que le permiten ver cómo aparecería el diseño en distintos tipos de medios si utilizase hojas de estilos.
dependientes de los medios. También contiene un botón que le permite activar o desactivar estilos de
hojas de estilos en cascada (CSS).
 Ventana de documento. Muestra el documento actual mientras lo está creando y editando.
 Inspector de propiedades. Permite ver y cambiar diversas propiedades del objeto o texto seleccionado.
SUBMÓDULO I Cada objeto tiene propiedades distintas. El inspector de propiedades no está ampliado de forma predeter-
minada en el diseño del espacio de trabajo del codificador.
Elaboración de
páginas WEB  Selector de etiquetas. Situado en la barra de estado de la parte inferior de la ventana de documento.
Muestra la jerarquía de etiquetas que rodea a la selección actual. Da clic en cualquier etiqueta de la je-
rarquía para seleccionar la etiqueta y todo su contenido.
 Paneles. Ayudan a supervisar y modificar el trabajo realizado. Ejemplos de paneles son el panel Insertar,
el panel Estilos CSS y el panel Archivos. Para ampliar un panel, da doble clic en su ficha.
 Panel Insertar. Contiene botones para la inserción de diversos tipos de objeto, como imágenes, tablas
y elementos multimedia, en un documento. Cada objeto es un fragmento de código HTML que te per-
mite establecer diversos atributos al insertarlo. Por ejemplo, puedes insertar una tabla haciendo clic en
el botón Tabla del panel Insertar. puede insertar objetos utilizando el menú Insertar en lugar del panel
Insertar.
 Panel Archivos. Permite administrar los archivos y las carpetas, tanto si forman parte de un sitio de
Dreamweaver como si se encuentran en un servidor remoto. El panel Archivos también proporciona
acceso a todos los archivos del disco local, como ocurre en el Explorador de Windows (Windows)

VENTANA DE DOCUMENTO.

 La ventana de documento muestra el documento actual. Pue-
de elegir entre una de las vistas siguientes:

  Vista Diseño. Un entorno para el diseño visual de
la página, la edición visual y el desarrollo rápido
 de aplicaciones. En esta vista, Dreamweaver muestra
una representación visual del documento completamente

editable, similar a la que aparecería en un navegador.
  Vista Código. Un entorno de codificación manual para escribir
y editar código HTML, Java Script, código de lenguaje de ser-
 vidor, como por ejemplo PHP o ColdFusionMarkupLangua-
 ge (CFML), y otros tipos de código.
 Vista de código dividida. Versión dividida de la vista Código
 que le permite desplazarse por el trabajo realizado en diferentes
 secciones del documento a la vez.
 Vistas Código y Diseño. Le permite ver las dos vistas, Código
 y Diseño, para el mismo documento en una sola ventana.
 Vista en vivo. La Vista en vivo, que es similar a la vista Diseño, muestra una representación más realista
 de la apariencia que tendrá el documento en un navegador y le permite interactuar con el documento de la
 misma forma que lo haría en un navegador. La Vista en vivo no es editable. No obstante, puede realizar
modificaciones en la vista Código y actualizar la Vista en vivo para ver los cambios.

 62
                    

 Vista Código en vivo. Sólo está disponible al visualizar un do-
cumento en la Vista en vivo. La vista Código en vivo muestra 
el código que un navegador utiliza para ejecutar la página y
cambia dinámicamente conforme se interactúa con la página en

la Vista en vivo. La vista Código en vivo no es editable.
HERRAMIENTAS DE DOCUMENTO.
La barra de herramientas Documento contiene botones que le permiten cambiar rápidamente entre diferentes
vistas del documento. La barra de herramientas contiene también algunos comandos y opciones relativos a
la visualización del documento y a su transferencia entre los sitios local y remoto. La siguiente ilustración
muestra la barra de herramientas de documento ampliada.
A. Mostrar vista de
código B. Mostrar
vista de código y di-
seño dividida C. Mostrar vista de diseño D. Título del documento E. Comprobar compatibilidad con
navegadores F. Validar formato G. Administración de archivos H. Vista previa/Depurar en explorador I.
Actualizar vista de diseño J. Ver opciones K. Ayudas visuales. SUBMÓDULO I
Elaboración de
BARRA DE HERRAMIENTAS ESTÁNDAR. páginas WEB
La barra de herramientas Estándar contiene botones para las operaciones más habituales de los menús Archi-
vo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer y
Rehacer. Estos botones se utilizan del mismo modo que los comandos de menú equivalentes.
BARRA DE ESTADO.
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicio-
nal sobre el documento que está creando. A. Selector de etiquetas B. Herramienta Seleccionar C. Herramien-
ta Mano D. Herramienta Zoom E. Establecer nivel de aumento F. Menú emergente Tamaño de ventana G.
Tamaño del documento y tiempo de descarga
estimado H. Indicador de codificación.
DESCRIPCIÓN GENERAL DEL INSPECTOR DE PROPIEDADES.

El inspector de propiedades permite exa-

minar y editar las propiedades más comu-
nes del elemento de página seleccionado 
actualmente, como texto o un objeto inser- 
tado.
Este panel puede 
mostrar dos tipos de

propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la pági-
na Web que estemos diseñando. 
El contenido del inspector de propiedades es distinto en función del elemento se-
leccionado. Por ejemplo, si selecciona una imagen de la página, el inspector de 
propiedades cambiará para mostrar las propiedades de la imagen El inspector de 
propiedades se encuentra, de manera predeterminada, en el borde inferior del espacio
de trabajo, aunque puede desacoplarlo y convertirlo en un panel flotante en el espacio 
de trabajo.

PANEL INSERTAR.

El panel Insertar contiene botones para
crear e insertar objetos como tablas, imágenes y vínculos. Los botones están ordenados en diferentes cate- 
gorías, entre las que puede cambiar seleccionando la categoría deseada del menú desplegable Categoría. Si
el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también 
otras categorías. 
Algunas categorías tienen botones con menús emergentes. Al seleccionar
una opción de un menú emergente, dicha opción se convierte en la acción 
predeterminada del botón. Por ejemplo, si selecciona Marcador de posi-
ción de imagen en el menú emergente del botón Imagen, la siguiente vez 
63 
                    

que haga clic en el botón Imagen, Dreamweaver insertará un marcador de posición de imagen.
 Siempre que seleccione una nueva opción del menú emer-
gente cambiará la acción predeterminada del botón. A di-
 ferencia de otros paneles de Dreamweaver, el panel Inser-
tar se puede arrastrar fuera de su posición de acoplamiento
predeterminada y colocarse en una posición horizontal en
la parte superior de la ventana de documento.
PANEL ARCHIVOS.
Utiliza el panel Archivos para ver y administrar los archivos del sitio de Drea-
mweaver. Al visualizar sitios, archivos o carpetas en el panel Archivos, puede
cambiar el tamaño del área de visualización y expandir o contraer el panel
Archivos. Cuando el panel Archivos se contrae, muestra el contenido del sitio
local, el sitio remoto, el servidor de prueba o el depósito SVN como una lista
de archivos. Cuando está ampliado, además del sitio local, muestra el sitio
remoto o el servidor de prueba o el depósito SVN. Para sitios de Dreamweaver, también puede personalizar
el panel Archivos cambiando la vista (sitio local o sitio remoto) que aparece de forma predeterminada en el
SUBMÓDULO I panel contraído.
Elaboración de
páginas WEB SITIOS DE DREAMWEAVER
En Dreamweaver, el término “sitio” se emplea para referirse a una ubicación
de almacenamiento local o remoto 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 mante-
ner vínculos y administrar y compartir archivos. Para aprovechar al máximo
las funciones de Dreamweaver, debe definir un sitio con lo siguiente:
 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.
 Carpeta remota. Almacena los archivos para pruebas, producción, colaboración, etc.
Dreamweaver se refiere a esta carpeta como el “si-

tio remoto” en el panel Archivos. En general, la
 carpeta remota suele colocarse en el equipo donde
 se ejecuta el servidor Web. La carpeta remota in-
cluye los archivos a los que los usuarios acceden en
 Internet. Las carpetas locales y remotas permiten
transferir archivos entre el disco duro local y el ser-
 vidor Web, lo cual facilita la administración de los
 archivos en los sitios de Dreamweaver. Se trabaja en archivos en la carpeta local y se publican en
la carpeta remota cuando se desea que otras personas los vean.
  Carpeta de servidor de prueba. Es la carpeta en la que Dreamweaver procesa páginas dinámicas.


ACTIVIDAD PRACTICA


Contesta correctamente las siguientes preguntas.

 1. ¿Para qué sirve la Planificación y configuración del sitio?
____________________________________________________________________________________

 ____________________________________________________________________________________

 64
                    

2. ¿Cómo se puede Organizar y administrar de los archivos del sitio?

____________________________________________________________________________________

____________________________________________________________________________________
3. ¿En qué consiste la Configuración de una aplicación Web para contenido dinámico?
____________________________________________________________________________________
____________________________________________________________________________________
4. ¿Cómo se integra el entorno de trabajo de Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________
5. ¿Para qué se utiliza el inspector de propiedades?

____________________________________________________________________________________ SUBMÓDULO I
____________________________________________________________________________________ Elaboración de
páginas WEB
6. ¿Qué objetos se pueden agregar mediante la barra INSERTAR?

____________________________________________________________________________________
____________________________________________________________________________________
7. ¿Cuál es la función del PANEL ARCHIVOS?

____________________________________________________________________________________
____________________________________________________________________________________
8. ¿Qué es un SITIO DREAMWEAVER?

____________________________________________________________________________________ 

____________________________________________________________________________________

9. ¿Qué es una CARPETA RAIZ?

____________________________________________________________________________________

____________________________________________________________________________________

10. ¿Qué es una CARPETA REMOTA? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
11. ¿Para qué sirve la carpeta SERVIDOR DE PRUEBAS? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 

12. ¿Qué vistas son las más utilizadas en Dreamweaver?

____________________________________________________________________________________

____________________________________________________________________________________

65 
                    

PRÁCTICA GUIADA

1. Abrir el programa Adobe Dreamweaver y crear un archivo nuevo html

2. Pulsar sobre el icono Texto, en las propie-
dades buscar la fuente Georgia, tamaño muy
grande, color azul marino, estilo 5, alinea-
ción centrada, espaciado de 10. Escribir el
texto “COLEGIO DE BACHILLERES DE
SAN LUIS POTOSÍ”. En el segundo renglón escribir el texto “PLANTEL
03, CEDRAL, S.L.P. (En algunas versiones no hay icono texto, se escribe directamente)
3. Insertar la imagen elaborada en Fireworks con el logo de Cobach y las figuras geométricas.
4. Con el icono Vista previa elegir la opción de iExplorer 11.0 para ver la página web.Te aparece un men-
saje diciendo que no has guardado la página. Guardar el documento dentro de mis documentos, crear
una carpeta que se llame Página web, poner el nombre de paginaweb1_cobach. Cierra el explorador y en
el menú Archivo elige Guardar como… para que guardes una copia de la página ahora ponle el nombre
paginaweb2_cobach.
5. Cómo pudisteobservar la página tiene un aspecto muy simple.
SUBMÓDULO I Pulsa el botón Propiedades de página y realiza los siguientes
Elaboración de cambios:
páginas WEB 6. Cambiar la fuente de página por
Verdana-Geneva-Sansserif, Negri-
tas y Cursiva, tamaño 14, color de
texto azul marino, cambiar el color
del fondo por Azul claro.
7. En la sección de márgenes, escribir 50 en cada margen, pul-
sar el botón Aplicar y luego el botón Aceptar.
8. Seleccionar el texto del título de la primera línea y pulsar
sobre el icono Blockquote (sangría) tres veces para que se
recorra el título hacia el centro de la página.
9. Cambiar el tamaño de
la fuente, elige en la
lista Formato, la opción Encabezado1, y pulsa sobre el icono Ne-
 gritas.
 10. Pulsar la tecla F12 para actualizar la vista previa en el navegador,
te pregunta si deseas Guardar el documento, si pulsa sobre el botón
 Sí. Puedes observar los cambios en la fuente y en los márgenes, el color del texto y del fondo.
 11. Escribir el siguiente texto uno por renglón: CA-
PACITACIONES, BLOQUES, DEPORTES,
 CULTURALES, EVENTOS, MUESTRAS,
 DESFILES, CONCURSOS ACADÉMICOS,
MUESTRAS DEPORTIVAS, MUESTRAS DE
 COMPETENCIAS EDUCATIVAS, MUES-
TRAS DE CAPACITACIONES PARA EL TRABAJO. Cambia el tamaño

de la fuente a Encabezado3.
 12. Debajo de la lista agrega la fecha con el menú Insertar opción Fecha, se
abre el cuadro que se muestra, elige el formato y marca la casilla Actualizar
 automáticamente.
 13. En el menú Insertar, elige la opción Vínculo al correo electróni-
co, aparece un cuadro para que escribas el texto “CONTACTO
 CON EL WEB MASTER” y el correo electrónico, pulsa el botón
ACEPTAR.

14. Escribir “DISEÑO Y ACTUALIZACIÓN y tu nom-
 bre, cambiar a tamaño Encabezado4
15. Agregar un ancla en la primera línea que se llame ini-

cio.

 66
                    

16. Al final de la página escribir el texto: “IR ARRIBA”Seleccionar el texto
IR ARRIBA y poner un hipervínculo que lleve al ancla Inicio, guardar los 
cambios y ver la vista previa.
17. Cerrar el documento y cerrar el programa. 
Completa las siguientes tablas:
1. Sobre la creación de páginas web
ASPECTO DESCRIPCIÓN
Planificación y configuración del sitio.

SUBMÓDULO I
Organización y administración de los
archivos del sitio. Elaboración de
páginas WEB
Diseño de las páginas Web.
Adición de contenido a las páginas.
Creación de páginas mediante la intro-

ducción manual de código.
Configuración de una aplicación Web
para contenido dinámico.
Creación de páginas dinámicas.
Comprobación y publicación.

2. Vistas de Dreamweaver. 

VISTAS DESCRIPCIÓN

Vista Diseño.

Vista Código.

Vistas Código y Diseño.

3. Escribe la función de cada icono. 








67 
                    


1. Abrir el programa Adobe Dreamweaver y creó un archivo nuevo HTML
2. Desactivar y activar la barra de propiedades y de herramientas, en el menú Ventana
3. Desplegar el panel de Aplicación, Etiqueta y el panel de archivo.
4. Mostrar y ocultar las reglas y la cuadricula. Cambió el zoom a 100% luego a 150% y lo dejó en 66%.
5. Agregar texto para que elabores una página web (tema libre).
6. Cambiar las propiedades de página, con fuente Georgia, Times, tamaño 16, color de texto Café,
color de fondo Crema.
7. Cambiar el tamaño del título a Encabezado1 con negritas y Agregar 2 tabuladores con el icono bloc-
kquotes 3 veces, el subtítulo a encabezado2 con cursiva, con 5 blockquotes.
8. Insertar más texto del tema elegido, cambiar a tamaño encabezado3.
9. Agregar la fecha en formato corto
10. Incluir un vínculo a tu cuenta de correo electrónico.
SUBMÓDULO I 11. Escribir la palabra WEBMASTER con tu nombre o pseudónimo.
Elaboración de
12. Agregar un ancla al inicio de la página web.
páginas WEB 13. Agregar un hipervínculo para llegar al ancla inicio.
Registro de
No. Observaciones
SÍ NO
Abrió el programa Adobe Dreamweaver y creó un
1.
archivo nuevo html
 Desactivó y activó la barra de propiedades y de he-
2.
 rramientas, en el menú Ventana
Desplegó el panel de Aplicación, Etiqueta y el panel
 3.
de archivo.
 Mostró y ocultó las reglas y la cuadricula. Cambió el
4.
zoom a 100% luego a 150% y lo dejó en 66%.

Agregó el texto señalado con las propiedades indica-
5.
 das.
Cambió las propiedades de página, de acuerdo a lo
 6.
indicado.
 Modificó el tamaño del título y subtítulo con lo se-
7.
ñalado.

8. Agregó otra parte de texto y la cambió a encabezado3.

 9. Insertó la imagen elaborada en Fireworks
 Agregó la fecha en formato corto

10.
Incluyó un vínculo a tu cuenta de correo electrónico.

11. Escribió WEBMASTER con su nombre o pseudónimo.

12. Agregó un ancla al inicio de la página web

 13. Agregó un hipervínculo para llegar al ancla inicio.
 68
                    

2.2 PLANEACIÓN DE UNA PÁGINA WEB EN DREAMWEAVER


SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







CREACIÓN DE DOCUMENTOS DE DREAMWEAVER 

Dreamweaver ofrece un entorno flexible para trabajar con varios documentos web. Además de documentos
HTML, es posible crear y abrir una gran variedad de documentos basados en texto, incluidos archivos Col- 
dFusionMarkupLanguage (CFML), ASP, JavaScript y hojas de estilos en cascada (CSS). También admite
archivos de código fuente, como Visual Basic, .NET, C# y Java. Dreamweaver proporciona varias opciones 
para crear un documento nuevo. Puede crear cualquiera de los tipos de documento siguientes: 
 Un nuevo documento o plantilla en blanco 
 Un documento basado en uno de los diseños de página predefinidos que vienen con Dreamweaver, in-

cluidos más de 30 diseños de página basados en CSS
 Un documento basado en una de las plantillas existentes 

69 
                    

También puede definir las preferencias del documento. Por ejemplo, si suele trabajar con un tipo de
 documento, puede establecerlo como tipo de documento predeterminado para las páginas nuevas que cree.
Puede definir fácilmente las propiedades del documento, como etiquetas meta, título del documento, colores
 de fondo, así como otras propiedades de la página en la vista Diseño o en la vista Código.
TIPOS DE ARCHIVOS DE DREAMWEAVER

Dreamweaver le permite trabajar con una gran variedad de tipos de archivos. El tipo de archivo principal con
el que va a trabajar es el archivo HTML. Los archivos HTML —o archivos en lenguaje de formato de hiper-
texto— incluyen un lenguaje basado en etiquetas que es el responsable de mostrar la página web a través del
navegador. Los archivos HTML se pueden guardar con la extensión html o .htm. De forma predeterminada,
Dreamweaver guarda los archivos con la extensión .html.
Dreamweaver le permite crear y modificar páginas web basadas en HTML5. También hay diseños de
inicio para crear páginas HTML5 partiendo de cero.A continuación se incluyen algunos de los tipos de ar-
chivos más comunes que se utilizan en Dreamweaver:
CSS. Los archivos de Hojas de estilos en cascada tienen la extensión .css. Se utilizan para aplicar forma-
to al contenido HTML y controlar la posición de los distintos elementos de la página.
GIF. Archivos de Formato de intercambio de gráficos, que tienen la extensión .gif. El formato GIF es un
SUBMÓDULO I formato gráfico popular en la Web para cómics, logotipos, gráficos con zonas transparentes y animaciones.
Los archivos GIF contienen un máximo de 256 colores.
Elaboración de
páginas WEB JPEG. Archivos de Grupo conjunto de expertos fotográficos (el nombre de la organización que creó el
formato) que tienen la extensión .jpg y suelen ser fotografías o imágenes de tonalidades intensas. El for-
mato JPEG es el más indicado para las fotografías digitales o digitalizadas, imágenes que utilizan texturas,
imágenes con transiciones de gradiente de color y, en general, cualquier imagen que requiera más de 256
colores.
XML. Archivos de Lenguaje de formato ampliable, que tienen la extensión .xml. Contienen datos en
formato original al que se puede aplicar formato mediante el lenguaje XSL (Lenguaje de hoja de estilos am-
pliable, Extensible StylesheetLanguage).
XSL. Archivos de Lenguaje de hoja de estilos ampliable, que tienen la extensión .xsl o .xslt. También se
utilizan para aplicar estilo a los datos XML que se van a mostrar en una página web.
PLANEACIÓN DE LA PÁGINA WEB

Para crear una página web, similar a la que se muestra, es necesario
hacer primeramente un boceto de la estructura de la página, con los
 elementos que se agregarán, ya sea texto, imágenes, archivos de audio,
 vínculos, cabecera, pie de página, etc.
Posteriormente se debe crear una
 carpeta local, dentro de la carpeta Do-
 cumentos, para tener todas las imágenes
y archivos de audio, ya descargados de
 internet y listos para usarse.
En este caso se desea utilizar una

tabla 10 filas por 3 columnas, las dos
 primeras filas se combinarán, se de-
jará una fila en blanco para separar el
 encabezado, la columna izquierda se
 colocarán las imágenes de los grupos, en la columna central se pondrá el
control del audio y el nombre del grupo, en la columna derecha, para los
 cinco grupos, se dejara otra fila en blanco para separar el pie de página y
 en la última fila se pondrá el nombre del creador de la página, la fecha y
el correo de contacto.
 Pero antes de crear la tabla, se deben
configurar las propiedades de la página,
 aunque no hay ningún problema, si se
 configuran después, para este mismo ejemplo, como se trata de una página
con grupos rockeros se desea una página con fondo negro y color de texto
 blanco en tamaño 24, fuente Courier new.

 70
                    

1. Crea una carpeta local que servirá como raíz de todos los archivos
que se utilizarán en la página web. Dentro de la carpeta documen- 
tos, crear una carpeta con nombre PRUEBASPAGWEB.
2. Dentro de ésta carpeta, crear otra que se llamen LISTADO MU- 
SICAL, y dentro de ella, otras dos carpetas: una que se llame
CANCIONES y otra que se llame FOTOS.
3. Dentro de la carpeta CANCIONES agregar los archivos en MP3
de “AUTOS, MODA Y ROCKANROLL” de Moderato, “DON-
DE ESTÁN PERROS” del Cartel de Santa, “POSADA DE LOS
MUERTOS” de Mago de Oz, “LA CUMBIA TRIBALERA” con
el Pelón del Microphone y D.J. Morphius, la Trakalosa y grupo
Violento y la canción “EXTASIS” de Millonario y W. Corona.
4. En la carpeta FOTOS, agregar una imagen de una cabina de radio y una foto
de cada grupo de las canciones agregadas.
5. Seleccione Archivo > Nuevo.
6. En el cuadro de diálogo Nuevo documento, seleccione la categoría HTML en
blanco.
7. Escribir en la primera línea CBSLP RADIO BROADCASTING SUBMÓDULO I
NETWORK
Elaboración de
8. Agregar una tabla con 10 filas, páginas WEB
3 columnas, ancho de tabla 750,
grueso de borde 3, relleno de celda
0, espacio entre celdas 3.
9. Seleccionar las tres celdas de la primera fila y combinarlas, por
medio de menú Modificar > Tabla > Combinar celdas.
10. Escribir “LA SUPER COBACHERA”, pulsar la tecla Enter y escribir
“96.9 F.M. STEREO”, pulsar nuevamente la tecla Enter y escribir “DOL-
BY SURROUND SYSTEM”, seleccionar las dos primeras líneas y cam-
biar el tamaño de la fuente a Encabezado1, poner tres puntos y agregar
una imagen de una cabina de radio cambiar el tamaño de Ancho 140 y Alto
120, aparece un cuadro de dialogo, en el cuadro Alt, escribir CABINA RADIO y pulsar ACEPTAR.
11. Seleccionar las tres celdas de la segunda fila y combinarlas por medio del menú Modificar > Tabla >
Combinar celdas. Escribir “CONCURSO DE LA SEMANA”, dar Enter y escribir “VOTA POR TU

FAVORITO”, cambiar el tamaño de la fuente a encabezado 2.
12. Seleccionar las tres celdas de la tercera fila y combinarlas para dejarlas vacías. 
13. En la fila 4, celda izquierda, agregar la imagen de Mo- 
derato por medio del menú Insertar Imagen y buscar la
imagen en la carpeta Fotos. 
14. Cambiar el tamaño de la imagen en el panel de propie-

dades, en el cuadro Ancho, escribir 260 y en el cuadro
Alto, escribir 200, en el cuadro Alt escribir MODERA- 
TO.

15. En la segunda celda agregar la pista de au-
dio por medio del menú Insertar > Media 
> Plug-in, aparece el cuadro Seleccionar
archivo, se busca la carpeta CANCIO-

NES, se elige la canción de Moderato, 
Autos, Moda y Rockandroll, se pulsa el
botón Aceptar. 
16. Aparece un pequeño icono que representa el control del repro- 
ductor, se le cambia el tamaño a 300 de Ancho por 50 de Alto.
17. Coloca el apuntado al final del control del reproductor y pulsa 
la tecla Enter para cambiarte a la línea siguiente dentro de la

misma celda y escribe “MODERATO”, selecciona la palabra y
cambia el tamaño a Encabezado 1. 
18. En la tercera celda escribe el título de la canción “AUTOS, MODA Y ROCK AND ROLL”, selecciona

71 
                    

el texto y cambia el tamaño a Encabezado 2. Pulsa la tecla F12 para que observes la página en el explo-
 rador. Cierra el explorador y regresa a Dreamweaver.
19. En la fila 5, celda izquierda, agrega la imagen de Cartel de Santa de la carpeta FOTOS, cambia el tamaño
 a 260 de ancho por 200 de alto, en el texto alternativo escribe CARTEL DE SANTA.
20. En la celda central, agrega la canción “DONDE ESTÁN PERROS”, cambia el tamaño del reproductor
a 300 por 200. Escribe “CARTEL DE SANTA” y cambia el tamaño a Encabezado1.
21. En la celda derecha escribe “DONDE ESTÁN PERROS”, cambia el tamaño del texto a Encabezado 2 y
pulsa la tecla F12 para que observes la página en el explorador. Cierra el explorador y regresa a Drea-
mweaver.
22. Repite el proceso para agregar las fotos, las canciones, los nombres del grupo y de la canción, en cada
fila ve guardando el trabajo.
23. Al agregar la última canción, selecciona las tres celdas de la siguiente fila (9) y combínalas para dejarla
en blanco, como separador, del pie de página.
24. En la última fila, en la celda izquierda escribe “WEB DESIGN” y escribe tu nombre, pseudónimo
o iniciales. En la celda central escribe
“LAST ACTUALIZATION” e inserta
la fecha en formato corto, en la celda
SUBMÓDULO I derecha escribe “e-mail to WEB MAS-
TER”, selecciónalo y agrega un vínculo a tu correo electrónico.
Elaboración de
páginas WEB 25. Pulsa la tecla F12 para que observes la página en el explorador. Prueba el vínculo del mail to
WEB MASTER, debe aparecer la ventana para escribir un correo, si no aparece, significa que no está con-
figurada para enviar correos. Cierra el explorador y regresa a Dreamweaver.
26. Como te habrás dado cuenta al ejecutar la página web, todas las canciones
se escuchan simultáneamente y se convierte en un caos, porque no se en-
tiende ninguna, para resolver este problema Dreamweaver cuenta con dos
parámetros que permiten controlar las pistas de audio.
27. Pulsa sobre el botón del reproductor y en el panel de propiedades busca el
botón PARAMETROS. Se abre un cuadro de dialogo vacío, se pulsa sobre
el signo (+) y aparece un recuadro, se escribe “LOOP”, en la columna Va-
lor se pulsa y aparece otro cuadro, se escribe “FALSE”, esto significa que
no se desea que la canción se repita al finalizar.
28. Se pulsa nuevamente el signo (+) y aparece otro cuadro debajo de LOOP,
se pulsa y aparece un recuadro, se escribe “AUTOSTART”, se pulsa en la columna Valor, y en el recua-
 dro se escribe “FALSE”, esto le indica a Dreamweaver que no se desea que se inicie automáticamente
 la pista de audio al ejecutar la página, y queda en modo manual, para que el usuario lo active.
 29. En caso de que te aparezca el control del reproductor de Windows, es nece-
sario cambiar el tamaño a 500 de ancho por 90 de alto, para que se visualice
 completo y así puedas manipular el volumen y la velocidad.
30. Ejecuta nuevamente la práctica y prueba nuevamente las canciones, manipulando los botones del contro-

lador. Cierra el explorador, en el menú Archivo, elige la opción Guardar Todo y cierra el archivo.



ACTIVIDAD PRACTICA



1. ¿De qué formas se puede crear un nuevo documento en Dreamweaver?

____________________________________________________________________________________

____________________________________________________________________________________

 2. ¿Qué tipos de archivos maneja Dreamweaver?
 ____________________________________________________________________________________
 ____________________________________________________________________________________
 72
                    

3. ¿Cómo se puede planear una página web de Dreamweaver?

____________________________________________________________________________________

____________________________________________________________________________________
4. ¿Qué es los primero que se debe hacer para iniciar una página web?
____________________________________________________________________________________
____________________________________________________________________________________
5. ¿Cómo se puede configurar la página web?

____________________________________________________________________________________
____________________________________________________________________________________
6. ¿Cómo se puede agregar una tabla en Dreamweaver?

____________________________________________________________________________________ SUBMÓDULO I
____________________________________________________________________________________ Elaboración de
páginas WEB
7. ¿Cómo se puede agregar una imagen a la página web y cómo se cambia el tamaño?
____________________________________________________________________________________
____________________________________________________________________________________
8. ¿Cómo se puede agregar un archivo de audio y como se cambia el tamaño del reproductor?
____________________________________________________________________________________
____________________________________________________________________________________
9. ¿Cómo se puede guardar el archivo y visualizarlo en el explorador?

____________________________________________________________________________________ 

____________________________________________________________________________________

10. ¿Cómo se agregan los vínculos en el pie de página?

____________________________________________________________________________________

____________________________________________________________________________________

11. ¿Cómo se puede configurar el audio para que no se inicie automáticamente, ni se repita? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
12. ¿Qué es un ancla y como se agrega? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 




73 
                    


SUBMÓDULO I
Elaboración de
páginas WEB
















 74
                    


1. Crear un archivo nuevo con plantilla HTML, de una columna fija,, cen-
trada, encabezado y pie de página.
2. Escribir tu autobiografía.
3. Agregar una imagen con menú Insertar >imagen>Plugin> Buscar
imagen tuya.
4. Agregar un sonido con
menú Insertar > Media
>Plugin> Buscar una can-
ción, cambiar el tamaño del
reproductor.
5. Acomodar el título de auto-
biografía en la parte supe- SUBMÓDULO I
rior, a un lado de la imagen
y agregar otra imagen o logotipo al lado derecho, poner Elaboración de
páginas WEB
guion bajo a cada lado del texto para separar.
6. Dejar el nombre debajo de la franja de título y escribir la autobiografía.
7. En el pie de página, agregar la fecha, el vínculo para contacto por correo electrónico.
8. En la cabecera poner un ancla
con el nombre INICIO y en el
pie de página poner el texto IR
ARRIBA, agregar un vínculo para que lleve al inicio.
9. Guardar los cambios pon el nombre de PAGWEB_AUTOBIOGRAFIA y observar en el navegador,
por medio de la tecla F12. Cierra el explorador.
10. En el menú Archivo pulsar sobre la opción NUEVO, para agregar otra página a la autobiografía, en
la cabecera inserta tu foto, al centro escribe “AUTOBIOGRAFIA” y a la derecha inserta el mismo
logotipo de la página de la autobiografía.
11. Debajo de la cabecera escribe título “FORMACIÓN EDUCATATIVA” y
debajo agrega las escuelas en las que haz estudiado, en el pie de página 
agrega una tabla de 1 fila por 3 columnas, ancho de tabla de 750, grosor 
del borde 3, relleno de celdas 0, espacio entre celdas 3.

12. En la celda izquierda escribe “REGRESAR A LA
PAGINA ANTERIOR”, en la celda central escri- 
be “PAGINA PRINCIPAL” y en la celda derecha
escribe “PASAR A LA SIGUIENTE PAGINA”. 
13. Crear otra página nueva con el menú Archivo, llenar la cabecera igual que la anterior, con la foto, 
el texto y el logo, debajo de la cabecera escribir TRAYECTORIA PROFESIONAL, escribe los trabajos
que haz desempeñado, o los que te gustaría realizar y copia la tabla del pie de página de la página 
de FORMACIÓN EDUCATIVA.

14. Regresa a la primer página donde escribiste la autobiografía y en el pie de página inserta una tabla
de una fila por dos columnas, en la columna izquierda escribe “FORMACION EDUCATIVA” y en la 
celda derecha escribe “TRAYECTORIA PROFESIONAL”
15. Selecciona las palabras FOR- 
MACIÓN PROFESIONAL y 
abrir el menú INSERTAR, ele-
gir la opción HIPERVÍNCU- 
LO.
16. Aparece el cuadro de dialogo para escribir el texto que

aparece al colocar el apuntador sobre las palabras vin- 
culadas, el destino, el título y para agregar el vínculo se
pulsa sobre la carpeta y aparece el cuadro de dialogo 
para buscar la página con la que se está vinculando. 
75 
                    

17. Se elige la página FORMACIÓN EDUCATIVA y se pulsa el botón
 Aceptar. Enseguida cámbiate a la página de FORMACIÓN EDUCATI-
VA y selecciona el texto PAGINA ANTERIOR y agrega el hipervínculo
 a la página Autobiografía. Pulsa la tecla F12, prueba los hipervínculos
y cierra el explorador.
18. En la página de la AUTOBIOGRAFIA, seleccionar el texto del pie
de página, TRAYECTORIA PROFESIONAL y agrégale el hipervínculo
con la página TRAYECTORIA PROFESIONAL, llena los cuadros y pul-
sa el botón Aceptar.
19. Realiza la misma operación en la página de la FORMACIÓN ACADÉMICA, agrega el vínculo para
que te lleve a la página siguiente que es la de TRAYECTORIA PROFESIONAL y con la página prin-
cipal, que es la AUTOBIOGRAFIA.
20. En la página de TRAYECTORIA PROFESIONAL agrega los hi-
pervínculos para que te lleva a la página anterior, que sería
la de FORMACIÓN ACADEMICA y a la página principal, que
sería de PÁGINA PRINCIPAL.
21. Pulsa la tecla F12 para guardar la página y visualizarla en el
SUBMÓDULO I explorador, prueba todos los hipervínculos para asegurarte de
que funcionan correctamente.
Elaboración de 22. En el menú Archivo, elige Guardar todo y cierra el programa.
páginas WEB
Registro de
No. Observaciones
SÍ NO
Realizó la planeación de la página de RADIO-
1.
NET.
 Creó la carpeta raíz y guardó todos los archivos
2.
de música e imágenes.

Abrió el programa Adobe Dreamweaver y creó
3.
 un archivo nuevo html
Cambio las propiedades de la página de RADIO-
 4.
NET
 Agregó la tabla de 10 X 3 con las propiedades
5.
indicadas

Incluyó las imágenes y los archivos de música
 6.
solicitados
 Agregó el texto señalado con las propiedades in-
7.
dicadas.
 Modificó el tamaño de las imágenes y del repro-
8.
 ductor.
Creó la página AUTOBIOGRAFIA utilizando la
 9.
plantilla señalada y agregó las otras dos páginas.
 Mostró la página web con el Explorer, Chrome
10.
o Firefox

Agregó un ancla al inicio de la página AUTO-
 11. BIOGRAFIA y la vinculó con la palabra IR
ARRIBA.

12. Agregó un hipervínculo para conectar páginas

 76
                    

2.3 DISEÑO DE UNA PÁGINA WEB CON DREAMWEAVER


SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







FORMULARIOS 

Los formularios se utilizan para reco-
ger datos de los usuarios, pueden ser- 
vir para realizar un pedido en una tien-
da 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. 

77 
                    

Aquí se muestra 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
PHP, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos del curso.
 Enseguida tienes un ejemplo de formulario simple.Un formulario está formado, entre otras cosas, por
etiquetas, campos de texto, menús desplegables, y botones.
Elementos de formulario
Los elementos de formulario pueden insertarse en una pá-
gina a través del menú Insertar, opción Formularioo lo que
es más cómodo si se van a insertar varios elementos, desde
el panel Insertar en la sección Formularios.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 uno por uno algunos de los distintos elementos que pueden formar parte
de un formulario, así como algunas de sus propiedades. Antes de insertar estos elementos debemos crear el
propio formulario tal y como veremos en el siguiente punto.
SUBMÓDULO I
Elaboración de
CAMPO DE TEXTO Y ÁREA DE TEXTO
páginas WEB Permiten introducir texto. El Campo
de texto solo permite al usuario escri-
bir una línea, mientras que el Área de
texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la
opción Una línea o Multi-línea respectivamente.
También es posible definirlo como Contraseña es como el campo de
texto pero las letras que va tecleando el usuario se sustituyen por un carácter
como podrás ver en la imagen siguiente.A continuación tienes un ejemplo de
cada uno de estos tres tipos. Puedes escribir en ellos para ver
su funcionamiento.
A través del inspector de propiedades es posible asignar
también el Ancho del cuadro de texto, el número máximo de
líneas o caracteres, y el valor inicial del cuadro.

 BOTÓN
 Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Res-
tablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un compor-
 tamiento diferente de los dos anteriores).
También es posible cambiar el texto del botón, a través de la
 propiedad Valor del inspector de propiedades.
 Como mínimo tiene que haber un botón del tipo Enviar for-
mulario, imprescindible para enviar los datos. Además le suele
 acompañar un botón Restablecer formulario para hacer reset en el caso de que el usuario quiera comenzar
de nuevo a rellenarlo.

 CASILLA DE VERIFICACIÓN
Es un cuadrito que se puede activar o desactivar, para
 indicar si el usuario ha elegido una opción o no.

BOTÓN DE OPCIÓN
 Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario con el
 mismo nombre, sólo puede haber uno activado. Cuando se activa uno,
automáticamente se desactivan los demás. Esto obliga al usuario a sólo
 poder elegir una opción.
  Superman
 Spiderman

 78
                    

SELECCIONAR (LISTA/MENÚ)
Una lista o menú es un elemento de formulario que lleva aso- 
ciada una lista de opciones.Los elementos se añaden a través
del botón Valores de lista... del Inspector de propiedades. 
Cuando se trata de un menú, solo es posible elegir uno de
los elementos, pero si se trata de una lista, a través de Selec-
ciones del inspector de propiedades puede permitirse que se
seleccionen varios simultáneamente.
ETIQUETA
Se utiliza para ponerle nombres al resto de elementos de formulario, para
que el usuario pueda saber qué datos ha de introducir en cada uno de
ellos. Además, al estar asociadas al control nos permite activarlo al pulsar
sobre el texto. Esto es muy práctico en casillas de verificación y botones
de opción.
Una propiedad muy importante de los formu-
larios es su nombre. Ya que al recibir los datos, a
través del nombre sabremos qué control los envía. SUBMÓDULO I
CREAR FORMULARIOS Elaboración de

páginas WEB
Antes de insertar los elementos o controles del formu-
lario, hemos de crear un formulario. Los elementos los
introduciremos dentro de él, ya que cuando lo demos a
enviar, sólo se enviarán los datos de los elementos de dentro del formulario.Puedes crear formularios a tra-
vés del menú Insertar> Formulario> Formulario, o desde el panel Insertar.Una vez creado un formulario,
este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas naranjas discontinuas,
similar al de la imagen siguiente.
Estas líneas son ayudas visuales al trabajar en diseño,
pero no se verán en el formulario final.Entre las propiedades
del formulario, encontramos el campo Acción. En el indica-
mos a dónde se envían los datos. Normalmente, una página PHP que se encarga de tratarlos.
Dentro de dicho formulario se podrán insertar los elementos de formu-
lario, que como ya sabes puedes insertar a través del menú Insertar, opción
Formulario o desde el panel Insertar. 
Es muy recomendable utilizar tablas para organizar los elementos de los 
formularios. Utilizando tablas se consigue una mejor distribución de los ele-
mentos del formulario, lo que facilita su comprensión y mejora su apariencia. 
Podemos cambiar la apariencia de los formularios con CSS. En este caso, 
podemos emplear el selector form.

VALIDAR FORMULARIOS

La validación de formularios sirve para hacer que JavaScript valide el for-
mulario antes de que se envíe, avisando al usuario para que corrija los erro- 
res, como campos obligatorios sin rellenar. Esto es mucho más eficiente y
rápido que enviar la página y validarla sólo en el servidor. 
Para validar un formulario hay que abrir el panel de Comportamientos. 
Este panel se puede abrir a través del menú Ventana, opción Comportamientos,
o pulsandoMayús + F4. Comportamientos forma parte del panel Inspector de 
etiquetas.

En este panel hay que desplegar el botón y pulsar
sobre la opción Validar formulario, deberás haber se- 
leccionado el formulario previamente.
Entonces se mostrará una ventana como la siguiente, 
donde aparecen todos los elementos del formulario. 
Puede seleccionarse uno por uno cada elemento del formulario, pudiendo espe-
cificar los requisitos que ha de cumplir. 

79 
                    

Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser
 numérico (Número) y si ha de estar en un rango, unaDirección de correo electrónico, etc.
 PELÍCULAS FLASH (SWF)
Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash,
un sonido y un vídeo, que son los más empleados. Utilizaremos dos métodos, usando las nuevas etiquetas de
HTML 5 y mediante los plug-in.
Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF.
Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presen-
tación hacia los usuarios, como banners publicitarios, como botones... Flash
todavía es uno de los elementos multimedia más empleados en las páginas web,
aunque su uso está decreciendo con la llegada de HTML 5 y el vídeo en mp4.
Estas películas pueden crearse mediante el progra-
ma Flash también de Adobe. Para poder ser visualiza-
do en el navegador, y necesitan que el usuario tenga
instalado el plug-in de Flash Player. Su instalación es
muy sencilla y normalmente ya viene con
SUBMÓDULO I el navegador. Sin embargo en los teléfonos móviles y tabletas no ocurre
lo mismo ya que Android y Apple no lo incluyen.
Elaboración de
páginas WEB Las películas Flash pueden insertarse en una página a través del
menú Insertar → Media, opción SWF, o pulsando Ctrl + Alt + F.
También pueden insertarse empleando el panel Insertar en la cate-
goría Común, pulsando sobre la opción SWF que aparece al desplegar
el menú Media.
Veamos las opciones más importantes que nos ofrece el inspector
de propiedades cuando tenemos seleccionado el archivo Flash:
Como en otros elementos, como las imágenes, podemos
asignarle el ancho (An.) y alto (Alt.). En Archivo, indicamos
la ruta hasta el archivo SWF.
 Si disponemos del programa Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo
original (.fla), podremos editarlo con pulsar en Editar.
 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 hasta que el usuario la activase. Por tanto intere-
 sa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.
 La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá. Conviene dejarla en Alta para
 verlo tal cuál se creó.
  La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempre son del tamaño
exacto del contenido, pueden tener un escenario de fondo alrededor del objeto, aunque no se muestre. Si
 dejamos Predeterminada, se verá todo la película. En cambio, si elegimos Ajuste exacto, se verán sólo
los objetos, omitiendo el escenario de fondo.

 Alinear funciona como con las imágenes, y nos permite alinear la película en relación con el texto. Si
 queremos centrarla horizontalmente, podemos optar por centrar el contenido del elemento que contiene
el Flash (normalmente un párrafo) empleando CSS.
  Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el Flash. En cambio,
 si es Transparente, el fondo se verá transparente (a no ser que se haya especificado un color de fondo en
el Flash).
  El botón Reproducir nos permite ver la película.

Al insertarse la película, veremos la ubicación en la
 vista de diseño con el siguiente aspecto:
Al insertarse animaciones Flash, es frecuente que Drea-
 mweaver añada algunos archivos que nos permitirán reproducir los elementos,
 normalmente creando la carpetaScripts. Es importante incluir esta carpeta cuan-
do publiquemos nuestro sitio, si no los archivos no se verán. De todas formas,
 Dreamweaver nos avisará cuando incluya archivos.
 80
                    

CREACIÓN DE UNA PÁGINA WEB COMPLETA CON FORMULARIOS

1. Crear un sitio con el nombre FORMULARIOS, luego guardar la página
con el nombre WEBCOBACH. Cambiar las propiedades de la página, 
con fuente Times New Roman, Tamaño 14, color de texto Azul marino
y color del fondo crema.
2. La página debe quedar como la que se muestra.
3. La cabecera debe llevar el nombre de la Institu-
ción y el logotipo, en una tabla de una fila con dos
columnas. Enseguida lleva otra tabla de 1 fila por
4 columnas para poner enlaces externos a páginas
web relacionadas con la educación.
4. En el cuerpo de la página agregar una tabla de 7
filas por 3 columnas, en la primera fila, escribir en
la primera celda “CAPACITACIONES”, en la se-
gunda celda “QUIENES SOMOS” y en la tercera
celda “SERVICIOS”.
5. En la segunda fila agregar una imagen de compu- SUBMÓDULO I
tadoras, cambiar el tamaño a 200 X 120 y escribir
“INFORMÁTICA”, llenar hacia abajo las demás Elaboración de
páginas WEB
celdas con las otras capacitaciones. En la columna
central escribir la descripción del subsistema Cole-
gio de Bachilleres, un párrafo en cada fila.
6. En la columna derecha agregar los servicios dispo-
nibles en el plantel, los deportes y las actividades
culturales y cívicas, además de los bloques de es-
tudio.
7. En la fila 7, dividir la primera celda en tres filas, en
la primera celda escribir “PASATIEMPOS” y agre-
gar varios botones de opción para BAILAR, PATI-
NAR, BICICLETA, GIMNASIO, AEROBICS. En
la segunda celda, escribir: “COMENTARIOS” y
agregar un AREA DE TEXTO, y en la tercera cel-
da, agregar un Grupo de Casillas de Verificación, 
escribir en cada una: ENFERMEDAD CRÓNICA, 
ACCIDENTES, CIRUGIAS”.





8. En la columna central agregar un formulario,
para agregar varias opciones de formulario: 
Agregar una tabla con 11 filas y 3 columnas, 
combinar la primer fila, para escribir: RE-
GISTRO DE ALUMNOS, llena los campos 
para registrarte, *campos obligatorios”.
9. En la segunda fila cuadros de texto para nombres y apelli- 
dos, correo electrónico, listas desplegables para la fecha de 
nacimientos, cuadro de texto para teléfono fijo y celular,
10. Agregar botones de opción para responder SI o NO a las 
preguntas ¿Haces deporte? Y ¿Practicas alguna actividad

cultural? Y un cuadro de texto para escribir que deporte y
que actividad cultural. Otros dos botones de opción para 
la pregunta ¿DESEAS RECIBIR AVISOS? SI o NO. Un

81 
                    

mensaje que diga “LA INFORMACIÓN
 DEBE SER VERIDICA” tres botones para
ACEPTAR, CANCELAR Y SALIR.

11. Combinar la fila 8 y escribir GALERIA DE IMÁGE-

NES, combinar las celdas de la fila 9 para dejar 7
columnas y agregar 7 imágenes, una en cada celda.
12. En la última fila, combinar las dos primeras celdas
para escribir la información de contacto, “INFORMES, DIRECCIÓN, CIUDAD, TELEFONO, CO-
RREO ELECTRÓNICO”. En la última celda insertar una animación de Flash y cambiar su tamaño a 200
X 150. Guardar la página y visualizarla en el explorador.
SUBMÓDULO I ACTIVIDAD PRACTICA

Elaboración de
páginas WEB
1. ¿Qué es un formulario en Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________
2. ¿Cómo se integra el formulario en Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________
 3. ¿Cómo se puede agregar un formulario en Dreamweaver?

 ____________________________________________________________________________________
 ____________________________________________________________________________________
 4. ¿Cuál es la diferencia entre un cuadro de texto y un área de texto?
 ____________________________________________________________________________________
 ____________________________________________________________________________________

5. ¿Cómo se puede configurar un cuadro de texto para contraseña en Dreamweaver?

____________________________________________________________________________________

____________________________________________________________________________________

 6. ¿Qué es un botón de opciónen Dreamweaver?
 ____________________________________________________________________________________
 ____________________________________________________________________________________
 7. ¿Para qué se utiliza en el formulario la lista/menú?

 ____________________________________________________________________________________
 ____________________________________________________________________________________
 82
                    

8. ¿Cómo se puede validar un formulario en Dreamweaver?

____________________________________________________________________________________

____________________________________________________________________________________
9. ¿Qué son las películas SWF?

____________________________________________________________________________________
____________________________________________________________________________________
10. ¿Cómo se agregauna película SWF?

____________________________________________________________________________________
____________________________________________________________________________________
11. Combinar la fila 8 y escribir GALERIA DE IMÁGENES, combinar las celdas de la fila 9 para dejar 7
columnas y agregar 7 imágenes, una en cada celda. SUBMÓDULO I
____________________________________________________________________________________
Elaboración de
____________________________________________________________________________________ páginas WEB
12. ¿Qué agrega Dreamweaver para reproducir la película SWF en la página web?
____________________________________________________________________________________
____________________________________________________________________________________
















83 
                    


Elabora organizador gráfico del tema 2.3
SUBMÓDULO I
Elaboración de
páginas WEB










 EVALUACIÓN FORMATIVA

 Desarrolla las actividades siguientes:
 1. Completar la página web de tu escuela, elaborar una nueva página para la capa-
citación de INFORMÁTICA, mostrar la información básica y agregar una barra
 de navegación en la parte inferior, para vincularla con las demás páginas.
 2. Con este mismo formato de página elaborar las páginas para las demás capacitaciones.
 84
                    

3. Agrega imágenes alusivas a cada módulo.
4. Capacitaciones de contabilidad y administra- 
ción

5. Capacitaciones de laboratorista químico y nutrición
SUBMÓDULO I
Elaboración de
páginas WEB
GUÍA DE OBSERVACIÓN 2.3
Registro de
No. Observaciones
SÍ NO
1. Realizó el diseño de la página de WEBCOBACH.

Creó la carpeta raíz y guardó todos los archivos de 
2.
música, animaciones e imágenes.

3. Agregó los vínculos externos a otras páginas web.

Cambio las propiedades de la página de WEBCO-
4. 
BACH
5. Agregó las tablas con las propiedades indicadas. 
Incluyó las imágenes y los archivos de música so- 
6.
licitados

Agregó el texto señalado con las propiedades indi-
7.
cadas. 
Elaboró el formulario con los elementos solicitados. 
8. Añadió la galería de imágenes y la animación
Flash. 
Creó las páginasweb de las capacitaciones vincu- 
9.
ladas.
Mostró la página web con el Explorer, Chrome o 
10.
Firefox

11. Agregó vínculos internos y externos a las páginas.


85 
                    

2.4 CREACIÓN DE SITIOS WEB CON PLANTILLAS CSS EN
 DREAMWEAVER

SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







 ESTILOS CSS. INTRODUCCIÓN

Los estilos CSS se utilizan para combinar una serie de atributos del
 texto, como pueden ser el color o el tamaño, de modo que no sea ne-
cesario asignar estos atributos uno a uno cada vez que se desee repetir
 la asignación de esos mismos valores a otras partes del texto.También
 permiten, definir prácticamente cualquier propiedad
de los elementos que contendrán nuestra web y los
 estilos para determinadas etiquetas, como encabeza-
dos (<h1>, <h2>...), párrafos (<p>), enlaces

(<a>), etc... Con lo que se formatearán todas las
 apariciones de esta etiqueta en el ámbito del estilo.
Puedes crear clases que es algo así como definir un estilo y darle un alias. El estilo afec-
 tará a todos los elementos a los que apliquemos esa clase.Por otro lado, al crear el estilo,
 86
                    

podemos definirlo como un estilo en línea (afectará sólo al elemento seleccionado) o crear una regla, que
puede afectar a toda la página, o a todo el sitio si la guardamos en un archivo CSS. 
Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de
una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una 
página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos.Una de las gran-
des ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando ac-
tualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.
CREAR UN ESTILO PERSONALIZADO

Con Dreamweaver CS, las características que apliquemos a un texto
a través del Inspector de propiedades CSS crearán automáticamente
estilos CSS. Aunque tenemos que decidir a qué elementos afecta.
CREAR UN ESTILO EN LÍNEA.

Por ejemplo, se desea que un determinado estilo afecte a un único
elemento y en un caso puntual, podemos crearlo como un estilo
en línea. Esto incrustará el estilo en la propia etiqueta HTML,
por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento.En el Inspector de propiedades SUBMÓDULO I
CSS, en Regla de destino, seleccionamos <Nuevo estilo en línea>.A continuación, se definen las propie-
dades del estilo. Elaboración de
páginas WEB
PANEL ESTILOS CSS.

El panel Estilos CSS le permite supervisar las reglas y propie-
dades CSS que afectan a un elemento de página actualmente
seleccionado (modo Actual) o las reglas y propiedades que
afectan a todo un documento (modo Todo). Un botón situado en
la parte superior del panel Estilos CSS te permite cambiar entre
estos dos modos. El panel Estilos CSS también te permite modi-
ficar propiedades CSS tanto en modo Todo como en modo Actual.
En modo Actual, el panel Estilos CSS muestra tres secciones:
 Panel Selección, que muestra las propiedades de CSS de la selección actual del documento.
 Panel Reglas, que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas
para la etiqueta. seleccionada, en función de la selección). 
 Panel Propiedades, que le permite editar las propiedades CSS al definir reglas para la selección. 
GUÍAS VISUALES. 
Dreamweaver proporciona varios tipos de guías visuales para ayudarte a diseñar documentos y predecir de 
forma aproximada cuál será su apariencia en los navegadores. Puede seguir uno de estos procedimientos:

 Ajustar instantáneamente el tamaño deseado para una ventana de documento y

comprobar si caben los elementos en la página.
 Utilizar una imagen de rastreo como fondo de la página para ayudarle a copiar 
un diseño creado en una aplicación de edición de ilustraciones o imágenes como
Adobe® Photoshop® o Adobe® Fireworks®. 
 Utilizar las reglas y guías para proporcionar una pista visual que permita colocar 
y cambiar el tamaño de los elementos de página con precisión.
 Utilizar la cuadrícula para lograr una mayor precisión en la colocación y 
ajuste del tamaño de elementos con posición absoluta (elementos PA). 
Las marcas de cuadrícula de la página le ayudan a alinear los elementos PA y, cuando está activada la 
función de ajuste, permiten ajustar automáticamente los elementos PA con el punto más próximo de la cua-
drícula al moverlas o ajustar su tamaño. (Los demás objetos, como las imágenes y los párrafos, no se ajustan 
a la cuadrícula.) El ajuste funciona independientemente de que la cuadrícula esté visible. 


87 
                    

CAMBIO DE VISTA EN LA VENTANA DE DOCU-
 MENTO.
La ventana de documento permite visualizar documentos
 en la vista Código, la vista Diseño, las vistas Código y
Diseño (vista Dividida) o en la Vista en vivo. También
puede optar por visualizar la vista de código dividida
o las vistas Código y Diseño horizontal o verticalmen-
te. (La visualización predeterminada es la horizontal.)
 Vista Diseño. Permite trabajar con el editor visual.

 Vista de Código. Se utiliza para poder trabajar en un entorno totalmente de programación.
 Vista Dividir. Permite dividir la ventana en dos zonas: Código y Diseño.
CAMBIO DEL TAMAÑO DE LA VENTANA DE DOCUMENTO

La barra de estado muestra las dimensiones actuales de la ventana de documento (en píxe-
les). Para diseñar una página cuyo mejor aspecto se logra con un tamaño específico, puede
ajustar la ventana de documento con cualquiera de los tamaños predeterminados, editar
SUBMÓDULO I dichos tamaños o crear otros nuevos.
En Windows, los documentos contenidos en la ventana de documento se maximizan de ma-
Elaboración de
páginas WEB nera predeterminada y no es posible cambiar el tamaño de un documento maximizado.
ELABORACIÓN DE PÁGINAS CON CSS.

Dreamweaver incluye numerosas funciones diseñadas para facilitar la creación de estilos y diseños para pá-
ginas Web mediante hojas de estilos en cascada (CSS, Cascading Style Sheets). Los estilos CSS ofrecen un
mayor control sobre el diseño de la página Web y reducen el tamaño del archivo.
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. El
contenido de la página (el código HTML) reside en el archivo
HTML, mientras que las reglas CSS que definen la presentación
del código residen en otro archivo (una hoja de estilos externa) o
en otra parte del documento HTML (normalmente, en la sección
 head).
 La separación del contenido y la presentación hace que resulte
mucho más fácil mantener el aspecto del sitio desde una ubicación central, ya que no es necesario actualizar
 las propiedades de las distintas páginas cuando se desea realizar algún cambio. La separación del contenido
 y la presentación también depura y simplifica el código HTML, lo que disminuye el tiempo de carga en los
navegadores y agiliza la navegación para personas con problemas de accesibilidad (por ejemplo, para los
 usuarios que utilicen lectores de pantalla).

DISEÑO DE PÁGINAS CON CSS, PRÁCTICA GUIADA.
 Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o marcos
HTML tradicionales, para organizar el contenido de un sitio Web. El elemento básico del diseño CSS es
 la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto,
 imágenes y otros elementos de página. Cuando crea un diseño CSS, coloca etiquetas div en la página, añade
contenido a las mismas y las sitúa en distintos lugares. A diferencia de las celdas de tabla, que sólo pueden
 situarse en algún lugar dentro de las filas y columnas de la tabla, las etiquetas div aparecen en cualquier lugar
de una página Web. Puede situar etiquetas div de forma absoluta (especificando las coordenadas (x, y) o de

forma relativa (especificando su distancia con respecto a otros elementos de la página).
 La creación de diseños CSS desde cero puede ser una
tarea difícil debido a la gran cantidad de formas de hacer-
 lo que existen. Puede crear un diseño CSS sencillo de dos
 columnas estableciendo elementos flotantes, márgenes,
rellenos y otras propiedades CSS mediante un número
 casi infinito de combinaciones. Además, el problema de
la reproducción en distintos navegadores hace que deter-

 88
                    

minados diseños CSS se muestren correctamente en algunos
navegadores y no en otros. Dreamweaver facilita la creación 
de páginas con diseños CSS con más de 30 diseños predefinidos
que funcionan en distintos navegadores. 
Para crear una página web con estilos CSS debe tener planeada la pá-
gina, y tener listas las imágenes y el texto que utilizarás en la página, es
decir el banner que mostrará la página, el pie de página, las imágenes, las
secciones, los vínculos a páginas internas y externas, etc. Ahora se muestra
el proceso para crear una página web, utilizando estilos CSS, por lo que se
iniciará por crear el banner en Adobe
Photoshop o Fireworks.
Como se trata de una página web
para una empresa de motocicletas, el banner puede quedar como se muestra. En Photoshop, puedes utilizar
el panel carácter para modificar el tamaño del texto, el color, el espaciado, etc. Todas las imágenes, ya las
debes tener preparadas.
SUBMÓDULO I
Elaboración de
páginas WEB
1. Crear una carpeta en Documentos que se llame SITIO MOTOS,
para utilizarla como carpeta local, raíz de la página web.
2. Dentro de la carpeta SITIO MOTOS crear una carpeta que se
llame IMÁGENESMOTOS, para guardar todas las imágenes
que utilizará la página web.
3. Abrir Dreamweaver y crear el nuevo sitio MOTOSDELALTI-
PLANO.
4. Buscar la carpeta del sitio local, en este caso en Documentos
buscar la carpeta SITIO MOTOCICLETAS.
5. En el panel izquierdo, hacer clic sobre Configuración avanzada
y en el primer recuadro localizar la carpeta para guardar las
imágenes de la página web, para ello se creó la carpeta IMAGE-
NESMOTOS. 
6. Seleccione Archivo > Nuevo, en el cuadro de diálogo Nuevo docu- 
mento, seleccione la categoría Página en blanco.
7. En Tipo de página, seleccione el tipo de página que desea crear, 
HTML

8. 4. En Diseño, seleccione el diseño 3 Colum-
nas fijas, encabezado y pie de página, pulsar 
sobre el botón Crear.
9. Aparece un cuadro de dialogo para que 
guarde la página, escribe el nombre IN- 
DEX, asegúrate de que este en la carpeta SITIO MOTO-
CICLETAS. 
10. Aparece el espacio de trabajo de Dreamweaver con una 
plantilla para ir sustituyendo la información y agregando
las imágenes. 
11. En la parte superior aparece un recuadro para insertar el logotipo, se-

leccionar el cuadro y eliminarlo. Luego en el menú Insertar, elegir Ima-
gen, debe aparecer la carpeta SITIO MOTOS, con la carpeta IMAGE- 
NESMOTOS, buscar el banner de la cabecera, elaborado previamente,
pulsar el botón Guardar, aparece un cuadro de dialogo informando que 
primero se debe guardar, se pulsa el botón Aceptar y aparece otro cuadro para escribir texto alternativo 
y la dirección IP, en texto alternativo se escribe el nombre de la imagen, MOTOS DEL ALTIPLANO y
se pulsa ACEPTAR. 

89 
                    

12. En la parte inferior de la página, hay otro cuadro que con-
 tiene texto, seleccionar el texto y eliminarlo, en el menú
Insertar, elegir la opción Imagen, se abrirá la carpeta SITIO
 MOTOS, con la carpeta IMAGENESMOTOS, buscar el
banner del pie de página, elaborado previamente, pulsar el
botón Guardar, aparece un cuadro de dialogo informando
que primero se debe guardar, se pulsa el botón Aceptar y
aparece otro cuadro para escribir texto alternativo y la direc-
ción IP, en texto alternativo se escribe el nombre de la ima-
gen, DIRECCIÓN MOTOS DEL ALTIPLANO y se pulsa
ACEPTAR.
13. Pulsar la tecla F12 para
guardar el documento y
visualizarlo en el explo-
rador, puedes utilizar el Google Chrome, el Mozilla Firefox, o el
Internet Explorer, también puedes activar otros navegadores como
el Safari o el Opera y otros.
SUBMÓDULO I 14. Cierra el explorador y continua con la elaboración
Elaboración de de la página, en el panel izquierdo busca el cuadro
páginas WEB que dice Vínculo uno, selecciona el texto y bórra-
lo para escribir QUIENES SOMOS, en el Vínculo
2 escribe MODELOS, en el vínculo tres escribe
PROMOCIONES, en el vínculo 4 escribe ACCE-
SORIOS.
15. Es necesario agregar otro botón más, por lo que es
necesario pulsar sobre el botón VISTA DIVIDIR, aparece la ventana dividida en dos
partes, mitad Código y mitad Diseño, selecciona la línea del último botón, la de Accesorios y pulsa las
teclas Ctrl + C para copiarla, luego pon el cursor al final de esa misma línea y presiona la tecla Enter
para dejar un renglón vacío, en ese mismo renglón, pulsa las teclas Ctrl + V, ó EDICIÓN > PEGAR,
para pegar la línea copiada.
16. Cambia la palabra ACCESORIOS
por SERVICIO y pega otra vez la
 línea copiada para cambiarla por
 CONTACTO.
17. Pulsa nuevamente la tecla F12 para
 guardar los cambios y visualizar en
 el navegador la página web, cierra el explora-
dor y sigue con la página web.
 18. En el panel izquierdo, debajo de los botones de vínculo, selecciona el texto y elimí-
 nalo. Inserta la imagen de todas las motos, que elaboraste previamente.
19. Las imágenes se pueden configurar y editar, por medio de los iconos que se encuen-
 tran en el panel Inspector de propiedades, para darle más brillo y contraste, se hace clic sobre el círculo
 mitad blanco y mitad negro, se el cuadro de control para desplazar el control y
aumentar o disminuir el nivel de brillo y el nivel de contraste, para guardar los
 cambios, se pulsa el botón ACEPTAR.
20. Para configurar la imagen, se pulsa sobre el icono con forma de engranes, se abre

un cuadro de dialogo en el que se pueden especificar la escala, el suavizado, la
 calidad y el formato de la imagen.





 90
                    

ACTIVIDAD PRACTICA 

1. ¿Qué son los estilos CSS?

____________________________________________________________________________________
____________________________________________________________________________________
2. ¿Cómo se puede crear un estilo personalizado en CSS?

____________________________________________________________________________________
____________________________________________________________________________________
3. ¿Cómo se puede abrir el panel de estilos CSS? SUBMÓDULO I
Elaboración de
páginas WEB
____________________________________________________________________________________
____________________________________________________________________________________
4. ¿Cuáles son las tres secciones del panel de estilos CSS?

____________________________________________________________________________________
____________________________________________________________________________________
5. ¿Qué son las guías visuales de Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________

6. ¿Cómo se puede hacer el cambio de vista en la ventana documentos de Dreamweaver? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
7. ¿Cómo se puede crear un nuevo estilo en línea? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 

8. ¿Cómo se puede crear otro botón cuando hacen falta para que sirva cómo vínculo CSS?

____________________________________________________________________________________

____________________________________________________________________________________

9. ¿Cómo se puede configurar una imagen en CSS? 
____________________________________________________________________________________ 
____________________________________________________________________________________ 
10. ¿De qué iconos se dispone para editar imágenes? 
____________________________________________________________________________________ 
91 
                    

11. ¿Cómo se puede crear una nueva regla para cambiar la fuente?

____________________________________________________________________________________

____________________________________________________________________________________
12. ¿Cómo se puede aplicar la nueva regla creada a otros textos?

____________________________________________________________________________________
____________________________________________________________________________________
Elabora un mapa conceptual del tema 2.4
SUBMÓDULO I
Elaboración de
páginas WEB
















 92
                    


1. En el panel derecho, seleccionar el texto y borrarlo, para escribir lo siguiente: EVEN-

TOS DE MOTOCICLISMO. Prueba de manejo City Club Zaragoza, Querétaro.
Curso en pista de Amozoc. Ruta Fantas-
ma a Real de Catorce. Entrega de premios
SIMM 2014. Aprendiendo a volar, curso
en pista.
2. Selecciona el texto y agrega una lista nu-
merada, prueba si queda mejor con viñetas,
elige la que se más de tu agrado, prueba
también a agregar sangría y disminuirla,
elige la que te agrade más.
SUBMÓDULO I
3. Con el texto de los eventos seleccionado, Abre el panel de Es-
tilos CSS, crear una nueva regla, para cambiar la fuente. Elaboración de
4. Aparece un cuadro de dialogo para configurar el estilo, en el primer re- páginas WEB
cuadro, se elige la opción CLASE, en el segundo recuadro, se escribe
el nombre del selector, debe iniciar con un punto, en este caso se lla-
mará: .CURSIVA, en la última lista desplegable, se puede elegir si se
aplicará solo a este documento o a todos
los documentos que se elaboren. Se
elige el documento INDEX.css
5. En la segunda ventana que aparece,
se elige la familia de fuentes que integran el estilo CSS, en este caso,
elige la fuente Comic Sans
MS, cursiva, tamaño 14.
6. En la opción Fondo del panel izquierdo, elegir un color de
fondo, y probarlo, con el botón Aplicar, si no es de tu agrado
lo puedes cambiar, en el segundo cuadro se puede agregar una 
imagen como fondo, y 
en el tercer cuadro 
se elige no repeat.
7. En la opción Borde, 
del panel izquierdo, se desmarca la casilla Style para agregar
un borde ridge en la casilla Right, en la sección Width, se eli- 
ge la opción Thin en la segunda casilla y en la sección Color, 
se elige un color crema. Se pulsa el botón Aplicar y después
Aceptar. 
8. Pulsa la tecla F12 para Guardar el docu-
mento y visualizarlo en el explorador, debe 
quedar algo parecido a lo que se muestra.

9. La ventaja de utilizar los estilos CSS es que
se pueden aplicar fácilmente a cualquier 
otro texto dentro de la página web, por
ejemplo selecciona el título de la parte cen- 
tral de página y en el inspector de propieda- 
des despliega la lista del cuadro CLASE y
se elige el estilo CURSIVA, inmediatamente el texto seleccionado cambia al 
estilo creado. 
10. Agrega una imagen a cada evento y dale más brillo y contraste.


93 
                    

11. Los estilos CSS se pueden editar, para cambiar cualquiera
 de los aspectos elegidos o agregar más elementos, el cambio se
puede hacer de dos formas, la primera, es por medio del panel
 CSS que se encuentra al lado derecho de la ventana, en la pesta-
ña Actual, se muestra un resumen de la selección, al hacer clic
sobre la opción que se desea modificar, aparece la ventana para
hacer los cambios.
12. La segunda forma
es por medio del Ins-
pector de propiedades
CSS, se despliega la
lista de Regla de des-
tino y le elige CURSIVA, luego se pulsa el botón EDITAR
REGLA, y aparece nuevamente la ventana de edición.
13. Finalmente seleccionar el texto de la parte central de la página
y reemplazarlo por el texto de la empresa de motos, agrega
1 o dos imágenes entre el texto. Hasta el momento, la página
SUBMÓDULO I debe verse más o menos como la que se muestra. Guarda los
cambios y visualízala.
Elaboración de
páginas WEB 14. Crear las páginas secundarias y vincularlas, probar la navega-
ción entre ellas.
Registro de
No. Observaciones
SÍ NO
Creó la carpeta raíz y guardó todos los archivos
1.
de música, animaciones e imágenes.
 Preparó las imágenes, el banner, pie de página, y
 2.
barra lateral en Fireworks o Photoshop.
 Creó la página en blanco HTML con el diseño
3.
indicado
 Agregó el encabezado o banner con el texto
4.
 dado.
Incluyó el pie de página con la información se-
 5.
ñalada
 6. Colocó la barra lateral en el panel izquierdo.
 7. Insertó texto e imágenes en el panel derecho

8. Editó las imágenes con más brillo y contraste.

 9. Creó el estilo de texto en CSS en una nueva regla
 10. Modificó el estilo de texto creado en CSS
 11. Aplicó el estilo creado en CSS a otros textos.

 Reemplazó el texto de la parte central de la pági-
12.
na CSS

Creó las páginas secundarias y las conectó entre
 13.
ellas.
 94
                    

2.5 ADMINISTRACIÓN DE SITIOS WEB, EFECTOS Y
MARQUESINAS. 

SUBMÓDULO I
Elaboración de
páginas WEB
GÉNERICAS:
DISCIPLINARES:







ADMINISTRACIÓN DE SITIOS 

Un sitio se refiere a una ubicación de almacenamiento local o remoto de los
documentos que pertenecen a un sitio Web. Un sitio de Dreamweaver per- 
mite organizar y administrar todos los documentos Web, cargar el sitio en
un servidor Web, controlar y mantener vínculos y administrar y compartir 
archivos. Antes de iniciar la creación de una página web, es necesario Drea- 
mweaver define un sitio con diferentes tipos de carpetas:

 Carpeta raíz local. Almacena los archivos con los que está tra-
bajando. Dreamweaver se refiere a esta carpeta como el “sitio 
local”. Esta carpeta está en el equipo local, pero también se puede 
estar en un servidor de red.
 Carpeta remota. Almacena los archivos para pruebas, producción, 
95 
                    

colaboración, etc. Dreamweaver se refiere a esta carpeta como
 el “sitio remoto” en el panel Archivos. En general, la carpeta
remota suele colocarse en el equipo donde se ejecuta el servidor
 Web. La carpeta remota incluye los archivos a los que los usua-
rios acceden en Internet.
Las carpetas locales y remotas permiten transferir archivos
entre el disco duro local y el servidor Web, lo cual facilita la
administración de los archivos en los sitios de Dreamweaver. Se
trabaja en archivos en la carpeta local y se publican en la
carpeta remota cuando se desea que otras personas los vean.
 Carpeta de servidor de prueba. Es la carpeta en la que Dreamweaver procesa páginas dinámicas.
CUADRO DE DIALOGO ADMINISTRAR SITIOS.
1. Seleccione Sitio > Administrar sitios y seleccione un sitio de la lista de la izquier-

da.
2. Haga clic en un botón para seleccionar una de las opciones, realice los cambios que
SUBMÓDULO I desee y haga clic en Listo.
Elaboración de
páginas WEB OPCIONES DEL CUADRO DE DIÁLOGO ADMINISTRAR SITIOS
 NUEVO. Permite crear un sitio nuevo. Al hacer clic en el botón Nuevo, se abre el cuadro de diálogo
Configuración del sitio, lo que le permite dar nombre y especificar la ubicación para el nuevo sitio.
 EDITAR. Le permite editar datos como el nombre de usuario, la contraseña y la información del servi-
dor para un sitio de Dreamweaver existente. Seleccione el sitio existente en la lista del sitio de la izquier-
da y haga clic en el botón Editar para modificar el sitio existente.
 DUPLICAR. Crea una copia de un sitio existente. Para duplicar un sitio, seleccione el sitio en la lista de
sitios de la izquierda y haga clic en el botón Duplicar. El sitio duplicado aparece en la lista de sitios con
la palabra “copia” añadida al nombre del sitio. Para cambiar el nombre del sitio duplicado, mantenga
seleccionado el sitio y haga clic en el botón Editar.
 QUITAR. Elimina el sitio seleccionado y toda su información de configuración de la lista de sitios de Drea-
mweaver; no elimina los archivos del sitio propiamente dichos. (Si desea eliminar los archivos del sitio del
equipo, tendrá que hacerlo manualmente). Para eliminar un sitio de Dreamweaver, seleccione el sitio en la
 lista de sitios y, a continuación, haga clic en el botón Quitar. Esta acción no puede deshacerse.
  EXPORTAR/IMPORTAR. Permite exportar la configuración del sitio seleccionado como un archivo
XML (*.ste) o importar la configuración de un sitio.

 USO DEL PANEL ARCHIVOS
El panel Archivos permite visualizar archivos y carpetas, saber si están asociados a un
 sitio de Dreamweaver y realizar operaciones estándar de mantenimiento de archivos,
como abrir y mover archivos.

Puede desplazar el panel archivos como desee y definir sus preferencias. Utilice este
 panel para realizar las siguientes operaciones:
  Acceso a sitios, a un servidor y a unidades locales
  Visualización de archivos y carpetas
 Administrar archivos y carpetas en el panel Archivos

 Nota: En versiones anteriores de Dreamweaver, el panel Archivos se denominaba panel Sitio.
 BARRA DE HERRAMIENTAS DEL PANEL ARCHIVOS





 96
                    

A. Menú emergente Sitio B. Conectar/desconectar C. Actualizar
D. Ver registro FTP del sitio E. Archivos del sitio F. Servidor de prueba 
G. Vista de base de datos H. Obtener archivo(s) I. Colocar archivo(s)
J. Proteger archivo(s) K. Desproteger L. Sincronizar 
INFORMES EN DREAMWEAVER.
Dreamweaver permite ejecutar informes para buscar conteni-
do, solucionar problemas o probar el contenido. Puede gene-
rar los siguientes tipos de informes:
 Buscar. Permite buscar etiquetas, atributos y texto especí-

fico en las etiquetas.
 Referencia. Le permite buscar información de referencia
que puede resultar útil.
 Validación. Permite comprobar si existen errores de códi-
go o de sintaxis.
 Compatibilidad con navegadores. Permite probar el código HTML en los documentos para comprobar si SUBMÓDULO I
hay etiquetas o atributos que sean incompatibles con los navegadores de destino.
Elaboración de
 Verificador de vínculos. Permite encontrar y arreglar vínculos rotos, externos y huérfanos. páginas WEB
 Informes de sitios. Permite mejorar el flujo de trabajo y probar los atributos HTML del sitio.
 Registro FTP. Permite ver toda la actividad de transferencia de archivos mediante FTP.
 Depuración del servidor. Le permite ver información para depurar una aplicación de Adobe® ColdFu-
sion®.
UTILIZACIÓN DE ETIQUETAS DIV

Puede crear diseños de página insertando manualmente etiquetas div y aplicando a éstas estilos de posición
CSS. Una etiqueta div es una etiqueta que define las divisiones lógicas existentes en el contenido de
una página Web. Puede utilizar etiquetas div para centrar bloques de contenido, crear efectos de columna
y crear diferentes áreas de color, entre otras posibilidades.
EFECTOS PARA LAS PÁGINAS WEB EN DREAMWEAVER

Seleccionar el texto al que se desea aplicar el

efecto, en el cuadro vínculo del Inspector de
propiedades poner un símbolo de número # para 
indicar que se desea un vínculo vacío, abrir la 
ventana del Inspector de etiquetas, hacer clic en la ficha Comportamientos, luego
pulsar sobre el icono ( + ) elegir la opción Efectos, pulsar sobre la opción Agitar, 
aparece un cuadro de dialogo para indicar donde se aplicará el efecto, elegir Selec-
ción actual, pulsar el botón Aceptar. 
Debe aparecer en la lista el efecto Agitar, cerrar el panel y probar el efecto, 
pulsar la tecla F12 para actualizar los cambios. Aparece
otro cuadro informando que se tendrán que agregar archi- 
vos auxiliares, pulsar en Aceptar. En el explorador hacer

clic sobre el texto al que se le agregó el efecto y observar el
efecto. Cerrar el explorador y volver a la página, para agregar más efectos. 
Seleccionar la segunda línea de texto y repetir el procedimiento para apli-
car el efecto de Aparecer/Desvanecer, en este efecto se debe indicar la dura- 
ción en milisegundos, es importante tener en cuenta que mil milisegundos es 
un segundo. Se elige Desvanecer o Aparecer, se indican los porcentajes desde
el 100% hasta el porcentaje que se desea desvanecer, el cero indica que no se 
verá nada, se marca la casilla Alternar efecto. 
Debe aparecer en la lista el efecto Agitar, cerrar el panel y probar
el efecto, pulsar la tecla F12 para actualizar los cambios. Aparece otro 
cuadro informando que se tendrán que agregar archivos auxiliares, pul-
sar en Aceptar. En el explorador hacer clic sobre el texto al que se le 
agregó el efecto y observar el efecto. Cerrar el explorador y volver a la página, para agregar más efectos. 
97 
                    

Seleccionar la imagen para aplicar el efecto de Aumentar/Reducir, en
 este efecto se debe indicar la duración en milisegundos, se elige un el por-
centaje desde el que se desea reducir hasta el mínimo, se marca la casilla
 Alternar efecto y se pulsa el botón Aceptar.
Debe aparecer en la lista el efecto Agitar,
cerrar el panel y probar el efecto, pulsar la tecla F12 para actualizar los cambios.
Aparece otro cuadro informando que se tendrán que agregar archivos auxiliares,
pulsar en Aceptar. En el explorador hacer clic sobre el texto al que se le agregó
el efecto y observar los efectos. Cerrar el explorador
y volver a la página, para agregar más efectos.
Seleccionar la primera línea de texto para aplicar
el efecto de Resaltado, en este efecto se debe indicar
la duración en milisegundos, se elige un color inicial,
color final y un color para después del efecto, que
puede ser el mismo inicial, se marca la casilla Alternar efecto y se pulsa el botón
Aceptar. Actualizar cambios y ver en el explorador para probar los efectos.
SUBMÓDULO I EFECTOS DE MARQUESINAS

Las marquesinas son texto en movimiento, funciona con la mayoría de los navegadores. La etiqueta es
Elaboración de
páginas WEB <MARQUEE>, un texto a desplazar y su cierre </MARQUEE>. Sin atributos quedará:
<BODY>
<MARQUEE> Aquí pongo el texto </MARQUEE>
</BODY>
Para agregar una marquesina, es necesario estar en vis-

ta Dividida, colocar el apuntador en la línea donde se desea
insertar la marquesina, pulsar sobre el icono DIVIDIR, para
tener a la vista tanto el CÓDIGO como la vista DISEÑO, co-
locar el apuntador antes de la etiqueta <p> y escribir <mar-
quee> seguirá el texto que ya tienes escrito en la vista Diseño
<p>COLEGIO DE BACHILLERES DE SAN LUIS POTO-
SI</p> y se escribe la etiqueta para cerrar la marquesina
 </marquee> la diagonal indica el cierre de cualquier etiqueta.
 Pulsa la tecla F12 para actualizar los cambios y observa la marque-
sina, se desplaza de derecha a izquierda, para hacer que se mueva de
 izquierda a derecha es necesario cambiar la dirección.Así está confi-
 gurada por defecto para que ocupe
todo el ancho del cuadro, tiene la
 altura de la línea de texto y
va de derecha a izquierda.

Puedes poner varias
 frases en diferentes ren-
glones, solo es necesario
 agregar<P> o <BR> dentro.
 Cambiar atributos de las marquesinas.
Empezamos con las medidas que son las viejas conocidas WIDTH y HEIGHT que toman valores en
 píxeles o en porcentajes de pantalla.

<BODY>
 <MARQUEE WIDTH=70% HEIGHT=40> Aquí pongo el texto ancho y
alto </MARQUEE>
 </BODY>

Que se verá con 70% de ancho (del cuadro azul que para los efectos es
 como si fuera la pantalla completa) y 40 px de alto.
El color de fondo quedará curioso. Echamos mano del atributo BGCOLOR.

 98
                    

<BODY>
<MARQUEE BGCOLOR=#7070ff>“Aquí pongo el texto de color” 
</MARQUEE>
</BODY> 
El atributo BEHAVIOR es el que da más

juego, su valor por defecto es scroll que significa
que aparece por la derecha, se va a la izquierda y
de forma continuada. La etiqueta <CENTER>
permite central la marquesina en la ventana, Si
le damos el valor slide y alternate al elemento
Behavior, se puede ver como la marquesina se
desliza con slide y cambia la dirección de dere-
cha e izquierda y viceversa en forma alternada.
Con el parámetro WIDTH=”60%”, cambia el ancho de la ventana
para la marquesina, con BGCOLOR=”#ffff00” cambia el color del
fondo. La etiqueta FONT FACE=arial COLOR=red SIZE=5>
cambia la fuente, el color de la fuente, el tamaño, se cierra con </ SUBMÓDULO I
FONT>
Al actualizar la pági- Elaboración de
páginas WEB
na y verla en el explorador, se ve algo parecido a la imagen que
se muestra. Para verlo funcionar actualiza la página ya que al
pararse y funcionar sólo una vez, no lo vemos.
El parámetro DIRECTION servirá
para definir hacia donde mando el texto
que, por defecto, va hacia la izquierda,se
puede mandar a la derecha, de arriba ha-
cia abajo,
La velocidad
de desplazamiento varía con SCROLLAMOUNT, que marca
los saltos según el valor numérico; y SCROOLDELAY que
determina el retraso en el movimiento en milisegundos.
La marquesina se puede poner en una tabla o hacer que toda
la tabla también sea parte de la marquesina. Primero inserta una 
tabla de 700 con una celda y una fila, borde 3, relleno cero y 
espacio entre celdas 3. Escribe el texto y aplica la marquesina y
sus parámetros de ancho, color de fondo y dirección. 

GUARDA LOS CAMBIOS Y OBSERVA LAS MARQUESINAS EN EL
EXPLORADOR. 
Para agregar una imagen como marquesina se utiliza el parámetro IMG con el

atributo SRC y aparece el vínculo para buscar la imagen, se hace clic en EXA-
MINAR y se busca la imagen 
que se desea poner como mar-
quesina 
Si la marquesina se pone fuera 
de la tabla, la tabla también se moverá. Se puede
poner doble marquesina, una para la tabla y otra 
para el texto dentro de la tabla. 
Abrir el sitio PAGINAWEB y la paginaweb1_
cobach que elaboraste en el primer tema.Guarda 
una nueva versión del sitio con la opción
DUPLICAR del menú SITIOS>ADMINISTRAR SITIOS, aplica las 
marquesinas con sus parámetros a la práctica1 y guarda los cambios. 


99 
                    

AGREGAR UNA REGLA HORIZONTAL
 Coloca el apuntador al inicio de la segunda línea de texto, con el menú
INSERTAR > HTML > REGLA HORIZONTAL, aparece una línea ne-
 gra que divide toda la pantalla. En la vista DIVIDIR se escribe la etiqueta
<hr/> y para cambiar de renglón </p>
CAMBIAR EL TAMAÑO
DEL ENCABEZADO
Esta operación es más fácil en
la vista DIVIDIR, se coloca el apuntador al inicio del texto que
se desea cambiar, se agrega la etiqueta <H1>TEXTO DEL
ENCABEZADO </H1>
SUBMÓDULO I
Elaboración de
ACTIVIDAD PRACTICA
páginas WEB
1. ¿Qué es un sitio en Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________
2. ¿Qué tipos carpeta utiliza Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________

 3. ¿Cómo se puede administrar los sitiosen Dreamweaver?
 ____________________________________________________________________________________
 ____________________________________________________________________________________
 4. ¿Cuáles son las opciones del cuadro de dialogo Administrar sitios?

 ____________________________________________________________________________________
 ____________________________________________________________________________________
 5. ¿Para qué sirve el panel Archivos en Dreamweaver?

____________________________________________________________________________________

____________________________________________________________________________________

6. ¿Qué son los informesen Dreamweaver?

____________________________________________________________________________________

____________________________________________________________________________________



 100
                    

7. ¿Qué son las etiquetas DIV?

____________________________________________________________________________________

____________________________________________________________________________________
8. ¿Cómo se puede agregar efectos en las páginas web con Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________
9. ¿Qué efector hay en Dreamweaver?
____________________________________________________________________________________
____________________________________________________________________________________
10. ¿Cómo se agrega una marquesina a la página web en Dreamweaver? SUBMÓDULO I
____________________________________________________________________________________
Elaboración de
páginas WEB
____________________________________________________________________________________
11. ¿Qué atributos se pueden modificar en las marquesinas con Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________
12. ¿Cómo se agregauna regla horizontal en Dreamweaver?

____________________________________________________________________________________
____________________________________________________________________________________
















101 
                    


Elabora organizador gráfico del tema 2.5
SUBMÓDULO I
Elaboración de
páginas WEB
















 102
                    


1. Abre el sitio PRUEBASPAGWEB, abre la carpeta LISTADO MUSI-

CAL y abre la página web RADIONET.
2. Agrega una marquesina a la primera línea, cambiar el color de la
fuente por azul claro.
3. Aplicar el efecto de AGITAR a las palabras LA SU-
PER, y a la palabra COBACHERA el efecto APARE-
CER/DESVANECER.
4. A la imagen cambiarle el tamaño a 150 por 150,
agregarle una marquesina con dirección de arriba
hacia abajo con un alto de 200, agregar una regla.
5. A la línea de DOLBY SURROUND SYSTEM agre-
garle una marquesina con color de fondo amarillo, SUBMÓDULO I
dirección de izquierda a derecha, con fuente color
Elaboración de
rojo. páginas WEB
Registro de
No. Observaciones
SÍ NO
Abrió el sitio y las carpetas que contienen RA-
1.
DIONET

2. Agregó a las palabras, los efectos indicados.

3. Incluyó las marquesinas señaladas 
4. Cambió el color de fondo de la marquesina 
5. Modificó el color del texto de la marquesina. 
6. Aumentó el tamaño del texto de la marquesina. 


7. Sustituyó la fuente del texto de la marquesina.

8. Agregó una regla horizontal

9. Cambió la dirección de la marquesina. 
10. Modificó el comportamiento de la marquesina 
11. Cambió la velocidad de la marquesina 


12. Utilizó las opciones de administrar sitios.



103 
                    


DEMOSTRACIÓN GRUPAL

PRÁCTICA INTEGRADORA 1
En equipos de 3 a 4 miembros, elaborar una sitio web completo con varias páginas,sobre educación,
política, medio ambiente, orientación educativa o vocacional, economía, social, etc. Hacer otro sitio
utilizando plantillas y estilos CSS, con varias páginas.
1. Hacer la planeación y diseño del sitio web.

2. Crear la carpeta raíz y las carpetas para imágenes y audio.
3. Preparar las imágenes, los banner, pies de página y pistas musicales que utilizarán.
4. Configurar las propiedades de la página: fuente, tamaño, color de fondo, color del texto, imagen de
fondo, repetir, márgenes.
5. Utilizar tablas para organizar la información.
SUBMÓDULO I 6. Agregar la fecha, anclajes, vínculos internos, vínculos al correo e hipervínculos con otras páginas.
Elaboración de 7. Agregar imágenes a la página, configurarlas y editarlas.
páginas WEB 8. Insertar archivo de música y configurar el control de reproducción y los parámetros.
9. Crear las páginas secundarias y vincularlas por medio de una barra de navegación.
10. Agregar un formulario con diferentes tipos de campos.
11. Incluir una película SWF de Adobe Flash.
12. Crear una galería de imágenes con el efecto de aumentar/ reducir.
13. Hacer al menos dos estilos CSS y aplicarlos a la página.
14. Utilizar las opciones de Administrar sitios.
15. Manipular el panel de archivos.
16. Emplear el selector de etiquetas.
17. Usar el inspector de propiedades.
18. Obtener un informe.
19. Agregar varios efectos a títulos o subtítulos.
20. Agregar marquesinas con diferentes atributos a los encabezados de las páginas.
21. Insertar una marquesina con imagen y movimiento alternado.

22. Configurar una marquesina con movimiento de arriba hacia abajo
 23. Agregar una regla horizontal para separar los títulos de cada página
 24. Utilizar la etiqueta centrar y la etiqueta Font.













 104
                    

INSTRUMENTOS DE EVALUACIÓN

Datos generales 
MÓDULO IV: PÁGINAS WEB Y PROYECTOS DE EDUCACIÓN EN LÍNEA
COMPONENTE 2: DISEÑO DE PÁGINAS WEB CON DREAMWEAVER
Nombre del candidato
Nombre del evaluador
Nombre del centro
valuador
Clave del centro
Clave delinstrumento
evaluador
Fecha de aplicación No. de aciertos Calificación

SUBMÓDULO I
INSTRUCCIONES: Marque con una “X” el cumplimiento en los siguientes reactivos. Es conveniente reali-
zar las observaciones pertinentes. Los reactivos se refieren al desempeño en la Práctica integradora. Elaboración de
páginas WEB
LISTA DE COTEJO CUMPLE LISTA DE COTEJO CUMPLE

REACTIVOS SÍ NO REACTIVOS SÍ NO
La página web tiene un encabezado Realizó la planeación y diseño del sitio
con texto e imágenes web.
En la página web hay una parte central Creó las carpetas necesarias para la crea-
con información ción del sitio web
Al final de la página hay una pie de Preparó las imágenes, los banner, pies de
página página y pistas musicales
La página web tiene páginas interiores Ajustó el tamaño de las imágenes, las con-
vinculadas figuró y editó.
En la página web hay una sección de Agregó la fecha, anclajes, vínculos inter- 
contacto por teléfono o correo electró- nos, vínculos al correo e hipervínculos a
nico y la fecha. otras páginas 
La página web tiene enlaces externos a Organizó la información en tablas dentro 
otras páginas web de la página

En la página web hay una galería de
Vinculó las páginas interiores con la pági-
imágenes con efecto de aumentar/re-
na principal con una barra de navegación

ducir

Los títulos de la página web tienen Elaboró al menos dos estilos CSS y los
efectos de animación. aplicó a la página. 
Hay una película SWF en la página Utilizó las opciones del administrador de

web tiene animación. sitios y obtuvo un informe.
Hay un archivo de música con control Manipuló el panel de archivos y el inspec- 
de reproducción en la página web. tor de etiquetas

Cada página tiene diferentes marque- Empleó el inspector de propiedades HTML
sinas. y el editor CSS 
Debajo del título hay una regla hori- Utilizó la etiqueta para centrar y la etique- 
zontal ta Font.

Firman de común acuerdo

Participante Evaluador


105 
                    

COLEGIO DE BACHILLERES, S.L.P.

PLANTEL ____________________________________________________

INSTRUMENTOS DE EVALUACIÓN DE LA CAPACITACION DE INFORMÁTICA
MODULO 4, PAGINAS WEB Y PROYECTOS DE EDUCACIÓN EN LÍNEA
COMPONENTE 2: DISEÑO DE PÁGINAS WEB CON DREAMWEAVER
ALUMNO(A): ___________________________________________________________________________
SEMESTRE:______________________ GRUPO:________________ FECHA:______________________
Instrucciones: Verificar que el trabajo contenga los aspectos señalados, si cumple con el aspecto anotar la
cantidad correspondiente en la columna Si, o anotar (una palomita) en caso de que no cumpla,.
LISTA DE COTEJO LISTA DE COTEJO

SUBMÓDULO I CUMPLE CUMPLE CUMPLE
Elaboración de ACTIVIDADES DE ACTIVIDADES EVALUACIONES
páginas WEB
No. SI NO SI NO SI NO
APRENDIZAJE COMPLEMENTARIAS FORMATIVAS
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

SUMA

 GUIA DE OBSERVACIÓN:
ACTA DE EVALUACIÓN PARCIAL
COEVALUACIÓN

P U N T A J E PUNTUACION
No ASPECTO VALOR ASPECTO PORCENTAJE
 OBTENIDO DEFINITIVA
Asiste regularmente a
 1 CUESTIONARIO
clases (1.0)
 Participa activamente GUIA DE
2
en clase (1.0) OBSERVACION

Cumple con su parte LISTA DE
 3
de trabajo (1.0) COTEJO LC
 ACTIVIDADES
Hace aportaciones
4 DE
 valiosas (1.0)
APRENDIZAJE
 Respeta a sus compa- EVALUACIONES
5
ñeros (1.0) FORMATIVAS
 GUIA DE OBSERVA-
Mantiene la disciplina
6 CION (COEVALUA-
 en clases (5.0) CION)

CALIFICACION FINAL DEL COMPONENTE

 106
                    

REVISÓ ENTERADO: PADRE O TUTOR INSTRUCTOR

NOMBRE Y FIRMA NOMBRE Y FIRMA NOMBRE Y FIRMA

REFERENCIAS
 http://www.aulaclic.es/dreamweaver-cs6/t_5_1.htm SUBMÓDULO I
 http://serbal.pntic.mec.es/apan/marque.htm Elaboración de
páginas WEB
 Manual de Ayuda de Adobe Dreamweaver versiones CS5 y CS6
















107 
                    



SUBMÓDULO I
Elaboración de
páginas WEB
















 108
                    

Submodulo1completo PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Submodulo1completo PDF

Încărcat de

Drepturi de autor:

Formate disponibile

MÓDULO IV / PÁGINAS WEB Y PROYECTOS DE EDUCACIÓN EN LÍNEA

ELABORACIÓN DE PÁGINAS WEB

Contesta correctamente las siguientes preguntas:

1. ¿Qué es una página web?

2. ¿Cuáles son los portales que ofrecen páginas web gratuitas?

SUBMÓDULO I 3. ¿Qué es el hospedaje de páginas web o web host?

4. ¿Qué es una dirección de internet propia?

5. ¿Qué es el Google Site?

6. ¿Qué ofrece Google +?

 10. ¿Para qué sirve el programa Adobe Fireworks?

Las marcas de empresas reconocidas, se encuentran protegidas por

Si tiene dudas contrate un alojamiento de bajo costo. En caso de

5. ¿Cómo se envían los archivos para una página web?

6. ¿Qué tipos de dominio hay?

7. ¿Qué sitios que ofrecen páginas de internet gratuitas?

8. ¿Cómo se puede crear una página web gratis?

1. Crear una cuenta de correo de google (puede ser cualquier cuenta de

Guía de observación 1.1

 8. Estableció un vínculo con el sitio google.

2. ¿Cómo funciona Wix?

3. ¿Qué significa drag&drop?

9. ¿Para qué se utiliza el botón Wix App Market?

10. ¿Cómo se puede cambiar el nombre de las páginas en Wix?

11. ¿Para qué sirve configurar el SEO de la página web?

12. ¿Cómo se puede cambiar el fondo de la página web?

13. ¿Cómo se guarda la página web en Wix?

Guía de observación 1.2

Contesta correctamente las preguntas siguientes:

1. ¿Qué tipos de imágenes se pueden agregar a una página web de Wix?

2. ¿Cómo se puede agregar una imagen a la página web?

4. ¿Qué iconos tiene el editor de imágenes de Wix?

5. ¿Para qué sirve la vista previa de la barra de herramientas de Wix?

 8. ¿Cómo se publica una página web Wix?

12. ¿Cómo funciona el contacto vía mail en la página web Wix?

13. ¿Cómo se agrega un documento a una página web Wix?

Elabora un cuadro sinóptico del tema 1.3

1. Agregar imágenes a la página web.

Agregó por lo menos tres páginas secunda-

 4. Recortó al menos una de las imágenes.

 5. Agregó una franja y modificó su tamaño.

Fireworks puede utilizarse para crear, editar y animar gráficos web, 

ENTORNO DE TRABAJO DE FIREWORKS

Elaboración de ELEMENTOS DEL LA VENTANA DE FIREWORKS

Contesta las preguntas siguientes:

1. ¿Qué función tiene el programa Fireworks?

2. ¿Cómo se puede crear un documento en Fireworks? Elaboración de

3. ¿Cuáles son los elementos de la ventana de Fireworks?

4. ¿Qué paneles tiene el programa Fireworks?

10. ¿Cómo se puede arrastrar una imagen a Fireworks?

11. ¿Cómo se pegan objetos en Fireworks?

SUBMÓDULO I  Color de relleno. Aquí seleccionamos el color de relleno del pincel

  Color. Aquí seleccionamos el color de la línea del lápiz.

2. ¿Cómo se pueden modificar las propiedades del lienzo?

3. ¿Para qué sirve la herramienta de rectángulo?

 5. ¿Para qué sirve la herramienta escalar, inclinar y distorsionar?

9. ¿Cuál es la utilidad de la herramienta Lazo?

10. ¿Para qué sirve la herramienta Varita Mágica?

11. ¿Cuál es la utilidad de la herramienta Sello?

12. ¿Para qué sirve la herramienta de subselección?

13. ¿En qué casos se utiliza la herramienta estilo libre?

14. ¿Cómo se puede agregar texto en Fireworks?

Elaborar un cuadro sinóptico sobre el tema 1.5

1. Abrir el programa de Fireworks y elegir Plantilla

SEMESTRE: GRUPO: FECHA: