34444-E2 - DesarrolloWeb - CG - ED1 - PR1

Desarrollo Web por
Guía del Módulo
Ê>BLÆ4E2Ä#*NË
3034444E20310
Edición 1 34444-E2
PRIMERA EDICIÓN
Primera impresión, octubre 2003
Copyright octubre, 2003 Lab-Volt Systems, Inc.
Todos los derechos reservados. Ninguna parte de esta publicación puede ser reproducida,
guardada en un sistema de recuperación, o transmitida de ninguna forma o medio electrónico,
mecánico, fotocopiado, grabado o cualquier otro, sin el permiso previo por escrito de Lab-Volt
Systems, Inc.
La información en este documento está sujeta a cambio sin notificación y no representa un

compromiso de parte de Lab-Volt Systems, Inc. El software Tecnología de la Información de
Lab-Volt y otros materiales descritos en este documento están elaborados bajo un acuerdo de
licencia o un acuerdo de no revelación. El software puede ser utilizado o copiado únicamente de
conformidad con los términos del acuerdo.
ISBN 0-86657-308-9
Los logotipos de Lab-Volt e Information Technology™ son marcas registradas de Lab-Volt

Systems, Inc.
Windows™ es una marca de Microsoft Corp.
PowerPoint™ es una marca de Microsoft Corp.
Todas las marcas son propiedad de sus respectivos dueños. Otras marcas o nombres comerciales
se pueden utilizar en este documento para hacer referencia ya sea a la entidad que reclama la
marca y nombres o a sus productos. Lab-Volt Systems, Inc., niega cualquier interés de propiedad
en las marcas comerciales y nombres comerciales distintas de las propias.
6. Registro. Lab-Volt puede de vez en cuando actualizar el
Licencia de acuerdo de Lab-Volt CD-ROM. Las actualizaciones estarán disponibles para usted
Al usar el software en este paquete, usted está de acuerdo en
únicamente si la tarjeta de registro de propiedad firmada está
quedar ligado a los términos de esta licencia de acuerdo, a la
archivada en Lab-Volt o donde un beneficiario autorizado de
garantía limitada y al descargo de responsabilidad.
tarjeta de registro.
Este compromiso de licencia constituye el completo 7. Varios. Este acuerdo está regido por las leyes del estado de
acuerdo entre usted y Lab-Volt. Si usted no está de New Jersey.
acuerdo con los términos de este compromiso, no utilice
este software. Devuelva a tiempo el CD-ROM y todos los Garantía limitada y descargo de
demás materiales que hacen parte del producto
Tecnología de la Información, a Lab-Volt dentro de diez responsabilidad
días para un obtener un reembolso total o un crédito por Este software CD-ROM ha sido diseñado para asegurar la
parte de Lab-Volt. correcta operación cuando se utilice en la manera y dentro de
1. Concesión de la licencia. En consideración al pago del los límites descritos en esta Guía del Estudiante/Carpeta.
costo de la licencia, la cual hace parte del precio que usted Como producto altamente avanzado, es bastante complejo,
pagó por este producto de Lab-Volt, Lab-Volt, como por tanto, es posible que si es utilizado en configuraciones de
Licenciador, le concede a usted, el Licenciado, una licencia hardware con características distintas a aquellas especificadas
no exclusiva e intransferible para utilizar esta copia en CD- en esta guía ó en ambientes con otras aplicaciones no
ROM del software con el módulo correspondiente de la especificadas, inusuales o comunes, el usuario puede
Tecnología de la Información. Lab-Volt se reserva todos los encontrar problemas. En tales casos, Lab-Volt hará esfuerzos
derechos no expresamente concedidos para la licencia. razonables en asistir al usuario para que el CD-ROM opere
debidamente sin garantizar su funcionamiento correcto en
2. Propiedad. Como licenciado, usted posee el medio físico otros ambientes de hardware o software distintos que el
sobre el cual el CD-ROM está grabado o fijado descrito en esta Guía del estudiante / Carpeta.
originalmente, pero Lab-Volt retiene el título de la propiedad
de los programas grabados en el disco compacto original y Este CD-ROM software está garantizado conforme a las
cualquier copia o copias subsecuentes del CD-ROM, sin tener descripciones y sus funciones como lo especifica la Guía del
en cuenta la forma o el medio en o por el cual el original y las Profesor. Después de una notificación apropiada y dentro de
otras copias puedan existir. Esta licencia no es una venta del un período de tiempo de un año desde la fecha de instalación
programa original del CD-ROM de Lab-Volt o cualquier y/o aceptación del cliente, Lab-Volt, a su única y exclusiva
parte o copia de éste. opción, reparará cualquier inconformidad o reemplazará
cualquier disco compacto defectuoso sin ningún costo.
3. Restricciones de copia. El software CD-ROM y los Cualquier revisión substancial de este producto, hecha para
materiales acompañantes están protegidos por derechos propósitos de corrección de las diferencias del software
reservados de autor y contienen información y secretos de dentro del período de garantía, estará disponible para los
comercio propiedad de Lab-Volt. La copia no autorizada del propietarios registrados y sin costo, teniendo como base la
CD-ROM bien sea modificado, combinado o incluido con licencia. El soporte de garantía para este producto es
otro software o con materiales escritos está terminantemente limitado, en todos los casos, a errores de software. Los
prohibida. Usted puede acarrear responsabilidad legal por errores producidos por mal funcionamiento del hardware o la
cualquier infracción a los derechos de propiedad intelectual utilización de hardware no especificado u otro software no
de Lab-Volt que sea causada o fomentada al no acatar los están cubiertos.
términos de este acuerdo. Usted puede hacer copias del CD-
ROM sólo para propósitos de respaldo dando aviso de los EL LICENCIADOR NO CONCEDE OTROS TIPOS DE
GARANTÍAS CONCERNIENTES A ESTE PRODUCTO,
derechos reservados de copia que es reproducido en su
INCLUYENDO GARANTÍAS O COMERCIABILIDAD O DE
totalidad en la copia de respaldo. CONVENIENCIA PARA UN PROPÓSITO EN PARTICULAR. EL
4. Usos permitidos. Este CD-ROM, la guía del profesor y LICENCIADOR NIEGA TODAS LAS OBLIGACIONES Y
toda la documentación acompañante tienen la licencia para RESPONSABILIDADES DE PARTE DEL LICENCIADOR POR
usted, el licenciado, y no puede ser transferida a una tercera LOS DAÑOS, INCLUYENDO PERO NO LIMITADO A LOS
parte por ningún período de tiempo sin el previo DAÑOS ESPECIALES O CONSECUENTES QUE SURJAN
FUERA O EN CONEXIÓN CON EL USUARIO DE ESTE
consentimiento escrito de Lab-Volt. Usted no puede
PRODUCTO DE SOFTWARE LICENCIADO BAJO ESTE
modificar, adaptar, traducir, revertir la ingeniería, ACUERDO.
descompilar, desarmar o crear trabajos derivados basados en
el producto de Lab-Volt sin el previo permiso escrito de Lab- Las preguntas relacionadas con este acuerdo y garantía, y
Volt. Los materiales escritos provistos para usted no pueden todas las solicitudes para reparación del producto deben ser
ser modificados, adaptados, traducidos o utilizados para crear dirigidas al representante de Lab-Volt en su área.
trabajos derivados sin el previo permiso escrito de Lab-Volt. LAB-VOLT SYSTEMS, INC.
5. Terminación. Este acuerdo es efectivo hasta que se P.O. Box 686
termine. Este se terminará automáticamente sin la Farmingdale, NJ 07727
notificación de Lab-Volt si usted no acata las provisiones Atención:Program Development
contenidas aquí. Después de la terminación usted deberá Teléfono: (732) 938-2000 ó (800) LAB-VOLT
destruir los materiales escritos, el CD-ROM del software de Fax: (732) 774-8573
Lab-Volt y todas las copias de estos, en parte o en su Soporte técnico: (800) 522-4436
totalidad, incluyendo las copias modificadas, si existe alguna. E-mail de soporte técnico: [email protected]
THIS PAGE IS SUPPOSE TO BE BLANK
Tabla de contenido
Sección 1 – Inicio ......................................................................................................... 1

Escritorio.................................................................................................................... 1
Botones de la pantalla........................................................................................... 2
Tema 1 – Fundamentos de Internet............................................................................ 5
Actividad 2 – Conectándose a Internet..................................................................... 7
Actividad 3 – Navegando en la Web ....................................................................... 11
Actividad 4 – Evaluación de la calidad de un sitio Web ........................................ 11
Tema 2 – Diseño de un sitio Web .............................................................................. 21
Actividad 1 – Historia del diseño Web.................................................................... 23
Actividad 2 – Evaluación del estilo de un sitio Web .............................................. 27
Actividad 3 – Costos del desarrollo Web ................................................................ 30
Tema 3 – Creación del sitio WEB.............................................................................. 35
Actividad 1 – Definición de Objetivos ..................................................................... 36
Actividad 2 – Creando un Anteproyecto y una Lista de Componentes ................. 40
Actividad 3 – Agregar Estilo al Diseño................................................................... 51
Actividad 4 – Creación de una Cuadrícula de Página ........................................... 69
Tema 4 – Fundamentos de FrontPage ...................................................................... 85
Actividad 1 − Fundamentos de FrontPage ............................................................. 86
Actividad 2 − Planificación de un sitio Web ......................................................... 107
Actividad 3 − Creación de un Sitio Web ............................................................... 112
Actividad 4 − Agregar Estructura y Consistencia................................................ 128
Tema 5 – Otros elementos en su diseño de FrontPage ........................................... 135
Actividad 1 − Trabajar con tablas......................................................................... 136
Actividad 2 − Formateado básico .......................................................................... 152
Actividad 3 − Trabajar con imágenes ................................................................... 171
Actividad 4 – Perfeccionar su sitio Web ............................................................... 203
Tema 6 – Publicación con FrontPage y mantenimiento Web ................................. 217
Actividad 1 – Publicar su sitio Web ...................................................................... 218
Instrucciones – Organizando sus archivos del sitio Web................................. 219
Actividad 2 – Manteniendo su sitio Web .............................................................. 223
Instrucciones – Completando tareas A (pantalla 14 a la 26) .......................... 224
Tema 7 – Fundamentos de programación HTML ................................................... 243
Actividad 1 – Estructura de HTML: técnicas básicas y conceptos ...................... 245
Actividad 2 – Apariencia y formato del texto ....................................................... 251
i
Actividad 3 – Gráficos y color................................................................................ 268
Actividad 4 – Tablas e hipervínculos.................................................................... 293
Tema 8 – Macromedia Flash ................................................................................... 309
Actividad 1 – Fundamentos de Flash ................................................................... 310
Actividad 2 – Símbolos e Instancias ..................................................................... 312
Instrucciones-Práctica de Instancias e Interpolación...................................... 315
Actividad 3 – Capas y Botones.............................................................................. 319
Actividad 4 – Agregar Sonido y Publicar su Animación ...................................... 328
Tema 9 – Introducción a JavaScript ....................................................................... 343
Actividad 1 – Fundamentos de JavaScript........................................................... 344
Actividad 2 – Funciones incorporadas y condicionales ........................................ 349
Actividad 3 – Ejecución de eventos y cambios de imagen.................................... 358
Actividad 4 – Funciones, arreglos y ciclos ............................................................ 366
Apéndice A – Seguridad............................................................................................A-1
Apéndice B – Barras de Herramientas FrontPage ..................................................B-1
Apéndice C – Anteproyecto de sitio Web..................................................................C-1
Apéndice D – Barra de herramientas/Tabla de atributos FrontPage ..................... D-1
Apéndice E – Valores de Color y Equivalentes Hexadecimales...............................E-1
ii
Introducción
Esta Guía del Módulo se debe utilizar con la Guía del Estudiante/Carpeta . La guía
del módulo permanence en la estación de trabajo. Esta brinda las instrucciones para
iniciar la presentación multimedia, una visión general del módulo, información del
tema e instrucciones de los procedimientos de la actividad. Los apéndices que
contienen información acerca de seguridad y recursos de información adicional tales
como la localización y reparación de fallas.
La información en la Guía del Módulo está agrupada por tema y luego por actividad.
Los objetivos de tema, la visión general, los nuevos términos y palabras y una lista
del equipo requerido se incluye en esta Guía del Módulo junto con los
procedimientos para las actividades que usted estará realizando.
Utilice esta Guía del Módulo para:

• Revisar los objetivos del tema, la actividad, los nuevos términos y palabras
presentados en cada tema del módulo de Fundamentos de la tecnología de la
Información.
• Hacer referencia a las instrucciones cuando esté realizando las actividades
asignadas.
Por favor asegúrese de completar la TARJETA DE REGISTRO DE PROPIEDAD

que está incluída con su CD-ROM. Queremos saber quienes son nuestros usuarios
para que de tal modo podamos brindarles el máximo soporte.
iii
THIS PAGE IS SUPPOSE TO BE BLANK
iv
Desarrollo Web Secciόn 1 – Inicio
SECCIÓN 1 – INICIO
Escritorio
Después que el sistema Tech-Lab es instalado, el ícono TechLab aparece en el
escritorio.
1. Haga clic en el ícono TechLab; aparece una ventana de entrada del estudiante.
2. El estudiante selecciona su nombre y hace clic en Entrar al sistema.
3. El estudiante introduce su palabra clave y hace clic en SI. (Si ellos están creando
una palabra clave, deben introducir cuatro caracteres alfa-numéricos. El sistema
le pedirá que introduzcan nuevamente su palabra clave para verificación.
Mantenga un registro de las palabras claves de los estudiantes.)
4. Los dos pasos anteriores se repiten hasta que todos los miembros del grupo de
estudiantes hayan entrado. Haga clic en Completar.
5. Cuando aparece el menú del modulo, los estudiantes resaltan el nombre del
módulo En la plataforma de versión 5 los estudiantes resaltan el módulo
apropiado y hacen clic en la flecha derecha o hacen doble clic en el nombre del
módulo.
6. Aparece una ventana Tech-World con el nombre del módulo y una lista de temas
para ese módulo. Los estudiantes resaltan el tema que desean comenzar y hacen
clic en el nombre del tema. En la plataforma de versión 5 los estudiantes
resaltan el tema que desean comenzar y hacen clic en la flecha derecha, o hacen
doble clic en el nombre del tema. La página del título del tema aparece y los
estudiantes están listos para comenzar.
Seleccionar otros temas y salir del módulo

1. Haciendo clic en Salir devuelve al estudiante al menú del módulo.
2. Si los estudiantes desean seleccionar otro tema, ellos resaltan el nombre del
tema y luego hacen clic sobre este. En plataforma de versión 5, para seleccionar
otro tema los estudiantes lo resaltan y hacen clic en la flecha derecha, o hacen
doble clic en el nombre del tema.
3. Si los estudiantes desean salir del Módulo, ellos hacen clic en el menú del curso o
en la flecha izquierda del menú del tema. Aparece la pantalla del menú del
módulo.
1
4. Si los estudiantes desean salir de Tech-World, ellos hacen clic en el botón SALIR
DEL SISTEMA. En la plataforma de versión 5 el ícono Salir del sistema es una
puerta abierta.
Botones de la pantalla
Si usted hace clic en el logo TI en la parte superior derecha de la página del título
del tema, aparece la pantalla de Acerca de. Esto da a conocer el portador(es) del
copyright del video y/o el material de captura de la pantalla utilizado en el tema.
El botón Menú llama estos menús:

Cuando está en una pantalla del menú de una actividad, este llama el menú del
tema.
Cuando está en una pantalla de la actividad, este llama el menú de la actividad.
Cuando está en una pantalla de un tema, este llama el menú del tema.
NOTA: Obtenga el menú de referencia haciendo clic en el

botón Recursos.
El botón Marcador marca la pantalla actual. El estudiante puede hacer clic en el

botón en cualquier momento de la lección. La segunda vez que el estudiante haga
clic en el botón devolverá la pantalla a la página mostrada cuando se le hizo clic la
primera vez. Si ha sido utilizado un marcador cuando los estudiantes salen de la
lección, este se guarda hasta la próxima vez que ellos entren al sistema.
El botón Ejecutar una aplicación abre el software de un tercero.
Haga clic en el botón Recursos para ver un menú de opciones. Este menú incluye el
acceso a una calculadora, a un diario, a las referencias, a nuevos términos y
palabras, a una opción para Imprimir pantalla actual y al sitio web de Internet de
Lab-Volt.
El botón Ayuda asiste a los estudiantes con la información del sistema.
El botón Internet abre el navegador de Internet. Los estudiantes tendrán libre

acceso a todas los buscadores y sitios web a menos que el administrador de la
escuela haya limitado su uso.
Utilice el botón Salir para salir del módulo.
La flecha derecha ⇒ botón que mueve hacia la pantalla siguiente.

La flecha izquierda ⇐ botón que mueve hacia la pantalla anterior.
2
3
4
Desarrollo Web Tema 1 – Fundamentos de Internet
TEMA 1 – FUNDAMENTOS DE INTERNET
Objetivo
Cuando usted haya completado este tema, podrá demostrar una comprensión de la
evolución de Internet. Explorará los diferentes componentes requeridos para las
conexiones en línea, utilizará las herramientas y técnicas requeridas para
investigar y evaluar la información de las fuentes de recursos en línea.
Revisión
Internet es un sistema de comunicaciones complicado. Esta comunidad global en
línea, ha influido en nuestras vidas de muchas maneras. Las nuevas oportunidades
de empleo están evolucionando para mejorar el funcionamiento de Internet y la
forma en que puede afectarnos.
En este tema, usted desarrollará una comprensión de las complejidades que

involucran la interconexión de computadoras a través de las telecomunicaciones.
Empezará con la historia de Internet y explorará las distintas normas y reglas a
medida que vayan apareciendo.
Además, tendrá que analizar tendencias actuales en el uso de Internet. Examinará

el hardware requerido, software, y los tipos de conexión. Serán tratados las
transferencias de correo electrónico (e-mail) y los direccionamientos en la Web.
Usted también utilizará técnicas de búsquedas simples y complejas para explorar la

información encontrada en internet. Cuando haya completado estas
investigaciones, podrá cuestionar la calidad de varias de las páginas Web visitadas.
5
Nuevos Términos y Palabras

Red (network) - una conexión de por lo menos dos computadoras para que puedan
comunicarse entre sí.
Ruteadores (routers)- dispositivos para conectar redes entre sí. Estos dispositivos, o
cajas, controlan el envío de paquetes de información de su fuente a su destino. Un
ruteador puede proporcionar caminos alternativos cuando es necesario, pero
normalmente, transfiere los paquetes a otros ruteadores a lo largo del camino
hasta alcanzar el destino.
Mainframes - Grandes computadoras generalmente vendidas con todas sus partes
y componentes combinados como una unidad. En general, no son compatibles con
los productos de otros vendedores.
Host (anfitrión) Una computadora de la red, también conocida como “servidor” que
le permite a otras computadoras conectarse a ella..
Protocolo - un juego completo de reglas de comunicación. Las reglas deben ser
idénticas en dos o más computadoras para que se puedan comunicar.
TCP/IP - Significa Protocolo de Control y Transmisión/Protocolo de Internet (en
inglés Transmission Control Protocol/Internet Protocol). Es el conjunto de reglas
mas usadas que establecen cómo un paquete de información se enviará de una
computadora a otra. Garantiza la integridad de la información recibida.
Gopher -El primer menú de “apuntar y hacer clic” (en inglés “point-and-click
menu”) que les permitió a los usuarios buscar en grandes archivos de información.
HTML –Significa lenguaje de hipertexto etiquetado. Este lenguaje se propuso como
un sistema de agregar hipervínculos en el texto. Este sistema de texto codificado
permite la combinación de texto figuras y vínculos multimedia.
Mosaic – Fue el primer navegador gráfico. Utilizó HTML y fue un descubrimiento
que abrió el camino para el internet que es usado hoy en día.
Java - un lenguaje de programación que controla cómo se usa la información y las
aplicaciones en la Web.
URL – La sigla URL (Uniform Resource Locator) significa Localizador Uniforme de
Recurso. Éste indica la dirección global de un documento en Internet. Cada parte
del URL especifica cómo o donde un documento puede encontrarse.
Marcador (bookmark) - una página en el navegador que lista URLs o direcciones
Web. Los marcadores sirven como vínculos para facilitar el acceso a las direcciones
Web. El equivalente en el Explorador de Internet se llama Favoritos.
Meta-etiqueta - una forma de código de HTML que puede ser incluido dentro de la
sección de oculta en el encabezamiento de la página. Las etiquetas más comunes
dan descripciones y palabras claves, pero también pueden incluir información
referida al autor, estado de los derechos de propiedad literaria, y fechas de la
publicación.
6
Actividad 2 – Conectándose a Internet
Objetivo
Cuando haya completado esta actividad, usted tendrá la habilidad y los
conocimientos suficientes para conectar una computadora personal a Internet.
Será capaz de:
1. describir los tipos de conexiones físicas utilizadas para conectarse a Internet.

2. definir el sistema de direccionamiento de Internet.
3. explicar el papel de un Proveedor de Servicios de Internet y los servicios que
ofrece.
4. especificar la función de un navegador.
Indicaciones: Práctica de URL

La ventana del navegador debe estar abierta. Si no lo está, haga clic en el botón de
Internet. Siga las indicaciones debajo para completar la actividad.
Abra a su Guía del estudiante/Carpeta en la hoja de datos titulada "Práctica de

URL". Anote sus respuestas en la hoja de datos a medida que va completando este
procedimiento.
1. En la línea de dirección, digite el URL siguiente: http://www.weather.com. Luego

presione la tecla Intro (Enter).
2. Localice la caja de búsqueda para el tiempo. Haga clic en la caja y digite en su
ciudad o código de área. Luego haga clic en el botón Ir a, al lado de la caja
búsqueda.
3. La pantalla cambia, y usted debe ver el tiempo actual así como los 10-días de
previsión para la ciudad que usted escogió. Anote la dirección de URL que se
muestra y el tiempo local en su hoja de datos.
4. Localice la caja de búsqueda para el tiempo. Haga clic en la caja y digite en
cualquier ciudad internacional o código de área. Luego haga clic en el botón Ir a,
al lado de la caja de búsqueda.
5. la pantalla cambia, y usted debe ver el tiempo actual así como los 10-días de
previsión para la ciudad internacional que usted escogió. Anote la dirección de
URL para esta página y las condiciones actuales del tiempo de la ciudad en su
hoja de datos.
6. Haga clic en el menú de Archivo y seleccione Cerrar.
Una vez que haya salido de la aplicación, haga clic en el botón de flecha Siguiente
para reanudar la actividad.
7
Indicaciones: Costo de velocidad de Internet

La ventana del navegador debe estar abierta. Si no lo está, pulse en el botón de
Recursos y seleccione el vínculo a Internet del menú. En el sitio Web de Lab-Volt en
TI, seleccione el módulo de Desarrollo Web. De la lista de recursos, seleccione "el
costo de la velocidad de Internet".1 Abra su Guía del Estudiante /Carpeta en la hoja
de datos titulada "el Costo de Velocidad de Internet". Siga las indicaciones debajo
completar la actividad.
1. En la caja de búsqueda de acceso a Internet, escriba "212" es la primera caja.

Éste es un código de área para la Ciudad de New York. Usted usará este código
de área para su comparación de precio de velocidad de conexión a Internet en el
área metropolitana de New York.
Búsqueda de acceso a Internet
Para encontrar un proveedor de servicios de Internet en su área, seleccione el tipo
de acceso que busca in la siguiente caja.
Ingrese código de área Seleccinar Conección
2. Haga clic en la flecha hacia abajo en la segunda caja para ver el menú
descolgable. Escoja un tipo de conexión del menú (seleccione una de cable,
discada, DSL Residencial, o ISDN) y suelte el botón del mouse. El tipo de
conexión debe aparecer en la caja.
3. La pantalla cambia, y una lista de proveedores aparece.
4. De dicha lista, escoja uno de los proveedores en la columna de Compañía y haga
clic en el vínculo más, a la derecha del nombre de la compañía. Habrá una lista
de Hechos Rápidos en la pantalla. Usted puede necesitar deslizarse hacia abajo
para verlo.
5. Mire la información por compañía, tarifa de conexión, cuota mensual, y la cuota
anual. Anote esta información en la hoja de datos titulada "Costo de la velocidad
de Internet" en su Guía del Estudiante /Carpeta.
6. Repita los pasos 1 a 5 para por lo menos para otro proveedor de servicio
(seleccione el mismo tipo de conexión que usted escogió en el paso 2). Usted
puede necesitar usar el botón Atrás, para volver a la lista de proveedores.
7. Después de que haya anotado la información del primer tipo de conexión, use el
botón Atrás para retornar a página Búsqueda de acceso a Internet. Repita los
pasos para encontrar información para los cuatro tipos de conexión: cable,
discada, DSL Residencial, e ISDN. Recuerde usar 212, como código de área para
cada uno de las búsquedas. Anote la información sobre su hoja de datos.
8. Cuando usted haya grabado toda la información, vaya al menú y haga clic en
Archivo y luego seleccione Cerrar.
1
[ Cuando los estudiantes hacen clic sobre el vínculo: Costo de la velocidad de Internet, el siguiente
sitio se abrirá: http://Webservices.cnet.com/html/aisles/Internet_Access.asp ]
8
Una vez que haya salido de la aplicación, haga clic en el botón Siguiente para
reanudar la actividad.
Indicaciones: Encontrando un ISP

La ventana del navegador debe estar abierta. Si no lo está, pulse en el botón de
TI, seleccione el módulo de Desarrollo Web. De la lista de recursos, seleccione
"Encontrando un ISP".2 Abra su Guía del Estudiante /Carpeta en la hoja de datos
titulada "Encontrando un ISP". Siga las indicaciones debajo para completar la
actividad
1. Desfile abajo en la página Web y encuentre la sección marcada " Encuentre un

ISP":. hay una lista de vínculos para escoger de:
Encuentre un ISP:
por código del área
por código de país
en Estados Unidos
en Canadá
2. Haga clic en el vínculo que quiera usar para encontrar un ISP en su área. Si
usted escoge el código de área o el vínculo del código de país, vaya hasta el paso
3. Si usted escoge el vínculo de EE.UU. o Canadá, vaya hasta el paso 4.
3. Si usted eligiera el vínculo del código de área, vería una lista alfabética de los
estados de EE.UU. Si usted escogiera el vínculo del código de país, verá una lista
alfabética de países.
a. Cada estado o país tiene una lista de códigos a su lado. Cada código es un
vínculo de la lista de proveedores de servicio para ese código. Desplácese a
través de la lista de estados o países hasta que encuentre el área en la que
usted vive. Haga clic en el vínculo (o código) para su área.
b. Una lista de ISPs aparece. Desplácese a través de la lista para encontrar un
proveedor (compañía) que le interese.
c. El nombre del proveedor es un vínculo de información adicional sobre sus
servicios. Haga clic en el vínculo.
d. Desplácese hacia la información referida a los servicios del proveedor. Anote el
nombre del proveedor, servicios discados ofrecidos, servicios de acceso
dedicados, tarifas del proveedor, y cualquier información adicional en la hoja
de datos titulada "Encontrando un ISP" en su Guía del estudiante/carpeta.
e. Vaya al paso 5.
2
[Cuando los estudiantes hacen clic en el vínculo: Encontrando un ISP, el siguiente sitio se abrirá:
http://thelist.internet.com /]
9
4. Si usted escogiera EE.UU. o Canadá, verá una lista de ISPs que está disponibles
para ambos países.
a. Una lista de ISPs aparece. Desplácese a través de la lista para encontrar un
proveedor que le interese.
b. El nombre del proveedor es un vínculo con información adicional sobre sus
servicios. Haga clic en el vínculo.
c. Desplácese hacia la información referida a los servicios del proveedor. Anote
el nombre del proveedor, servicios discados ofrecidos, servicios de acceso
dedicados, tarifas del proveedor, y cualquier información adicional en su hoja
de datos.
d. Vaya al paso 5.
5. Use el botón de Atrás para volver a la página que tiene la lista de proveedores.
Encuentre un proveedor más en su área y anote la información necesaria sobre
su hoja de datos.
Cuando usted haya anotado toda la información, haga clic en el menú en Archivo y
seleccione Cerrar.
Una vez usted haya salido de la aplicación, , haga clic en el botón de flecha siguiente
para continuar la actividad.
10
Actividad 3 – Navegando en la Web
Objetivo
Cuando usted haya completado esta actividad, tendrá las habilidades y el
conocimiento para realizar una búsqueda efectiva en la Web.
Usted será capaz de:
• realizar una búsqueda simple.

• aplicar herramientas diferentes y sus métodos al investigar en la Web.
• describir los tipos de operadores lógicos.
• crear marcadores o anotación en sitios favoritos (en inglés, bookmarks) para
volver a visitarlos.
• usar un navegador de Internet.
11
Indicaciones: Práctica de búsqueda simple

Internet. Abra su Guía del Estudiante /Carpeta en la hoja de datos titulada
"Práctica de búsqueda simple". Siga las indicaciones debajo para completar la
actividad.
En estas sesiones de práctica, a usted se le darán tres organizaciones o compañías

para investigar. Para cada ejemplo, haga dos intentos para encontrar la dirección de
página principal, o URL.
Cuando entre en el nombre del dominio, esté seguro de incluir el sufijo correcto.
http://www.dominio.com
Sesión de práctica 1
La primera dirección que el Departamento de edición necesita es para las Naciones
Unidas. Use una búsqueda simple para conseguir la página principal de la O.N.U.
1. Anote sus dos intentos en la hoja de datos. Después de escribir el URL, vuelva a
la computadora y entre el primer URL en la línea de dirección del navegador.
Oprima la tecla Intro (Enter) y luego haga clic en Ir a.
2. Si usted encuentra el sitio Web de las Naciones Unidas, conteste la pregunta en
la hoja de datos, luego siga en la Sección de práctica 2.
3. Si usted no encontrara el sitio Web de las Naciones Unidas, haga clic en la línea
de dirección para resaltar el texto. Digite su segundo intento en la línea de
dirección del navegador y presione la tecla Intro (Enter) o haga clic en Ir a.
4. Responda a todas las preguntas de la Sección de práctica 1 en la hoja de datos,
haya encontrado o no el sitio de Naciones Unidas. Luego continue en la Sesión 2.
La segunda dirección que se necesita es la de Universidad de Harvard. Use una
búsqueda simple para conseguir a la página principal de Harvard.
Siga las indicaciones de la Sesión de práctica 1. Esta vez, intente el URL de la

Universidad de Harvard. Cuando usted haya completado todos los pasos, responda a
todas las preguntas de la Sesión de práctica 2 en la hoja de datos en su Guía del
Estudiante /Carpeta, luego continúe en la Sesión 3.
12
La tercera dirección es la de Microsoft. Use una búsqueda simple para conseguir la
página principal.
Siga las indicaciones de la Sesión práctica 1. Esta vez, intente el URL de la página
principal de Microsoft. Cuando haya completado todos los pasos, responda a todas
las preguntas de la Sesión práctica 3 en la hoja de datos en su Guía del Estudiante
/Carpeta. En la ventana del navegador, vaya al menú y haga clic en Archivo y
seleccione Cerrar.
Una vez que haya salido de la aplicación, haga clic en el botón de flecha Siguiente
Indicaciones: Práctica de Búsqueda de directorio

Internet. Abra su Guía del Estudiante /Carpeta en la hoja de datos titulado
"Práctica de búsqueda de directorio". Siga las indicaciones debajo para completar la
actividad.
Para la búsqueda de directorio, usted usará dos herramientas de directorio

diferentes. En parte 1, use Yahoo!, y en parte 2, use LookSmart. Escoja uno de los
siguientes artistas para investigar cada parte de esta actividad:
1. Mireya Perez Power

2. Bernardo Nieves
3. Kellmis Fernández
4. Germán Vergara
13
Parte 1: usando Yahoo!

Después de que usted haya escogido uno de los artistas que le gustaría investigar,
siga las indicaciones debajo para encontrar alguno de sus trabajos.
1. Haga clic en la línea de dirección para resaltar el texto. Digite la siguiente

dirección: espanol.yahoo.com
a. Presione la tecla Intro (Enter) o haga clic en el botón Ir a.
2. Para encontrar un sitio Web sobre el artista, digite el nombre del artista en la
caja de búsqueda.
3. Presione la tecla Intro (Enter) o haga clic en el botón de Buscar.
4. Mire en la página de Yahoo! La lista de aciertos, dentro de Categoría y en Sitios
Web. Con seguridad, usted encuentrará un sitio que contenga información del
artista. Haga clic en los vínculos.
5. Una vez que haya encontrado un sitio Web que ofrece el trabajo del artista, use
los vínculos allí presentes para encontrar el nombre de uno de sus trabajos.
NOTA: Si no llega a encontrar ningún sitio Web con

información que usted necesita, haga clic en el botón de
Atrás para retornar a la lista de vínculos en Categorías
Yahoo!, y seleccione otro vínculo.
6. En la hoja de datos, anote el nombre del artista y el nombre de la obra de

arte, el URL que usted encontró, y cualquier categoría y subcategorías que
usted usó para encontrar la información.
Parte 2: Usando Hispanolink

Después de que usted haya escogido el segundo artista que le gustaría investigar,
siga las indicaciones deabajo para encontrar uno de sus trabajos.
1. Haga clic en la línea de dirección para resaltar el texto. Digite en la dirección

siguiente: www.hispanolink.com/Venezuela
a. Presione la tecla Intro (Enter) o haga clic en Ir a.
2. Para encontrar un sitio Web del artista, digite el nombre del artista en la caja de
búsqueda. Presione la tecla Intro (Enter) o haga clic en Buscar. Luego, vaya al
paso 4.
3. Use los vínculos para encontrar al artista. Haga clic en los siguientes vínculos:
Arte y Cultura> Artistas. Continúe a través de los vínculos de la categoría
alfabéticos hasta encontrar al artista.
4. Recorra la lista de vínculos desplegada en la página y deténgase en sitio Web
que muestra el nombre del artista. Para obtener información acerca del trabajo
del artista, haga clic en dicho vínculo.
14
5. Una vez que usted ha encontrado un sitio Web que tienen el trabajo del artista,
use los vínculos que usted ve para encontrar allí el nombre de uno de sus
trabajos.
NOTA: Si no llega a encontrar ningún sitio Web con la información que

usted necesita, haga clic en el botón de Atrás para retornar a la lista de
sitios Web de Hispanolink, y seleccione otro vínculo.
6. En la hoja de datos, anote el nombre del artista y el nombre de la obra de

arte, el URL que usted encontró, y cualquier categoría y subcategorías que
usted usó para obtener la información.
7. Vaya al menú y haga clic en Archivo y seleccione Cerrar.
Una vez que haya salido de la aplicación, haga clic en el botón Siguiente para
continuar con la actividad.
15
Indicaciones: Práctica de motor de búsqueda

Internet. Abra su Guía del Estudiante /Carpeta en la hoja de datos titulado
"Práctica de motor de búsqueda". Para este ejercicio, usted usará dos herramientas
de motor de búsqueda diferentes. En la parte la 1, use Google, y en parte 2, use
AltaVista. Siga las indicaciones debajo para completar la actividad.
Parte 1: Usando Google

En esta actividad escoja uno de los siguientes festivales para investigar:
1. la Fiesta de Gelede
2. Semana de Crusell
3. la Fiesta de Tuen Ng
Luego, siga las indicaciones debajo para encontrar la información.

dirección: http://www.google.com/intl/es/
2. Para encontrar un sitio Web del festival, digite el nombre del festival en la caja
de la búsqueda. Cuide su ortografía.
3. Oprima la tecla Intro (Enter) o haga clic en el botón Búsqueda en Google.
4. Google toma una lista de vínculos para el festival que usted pidió. En la hoja de
datos en su Guía del estudiante/carpeta, anote el número de aciertos
encontrados.
5. Debajo del número de aciertos encontrados, está la lista de vínculos que
apuntan a las páginas Web encontradas. Desplácese hacia abajo y haga clic en
un vínculo.
NOTA: Si no llega a encontrar ningún sitio Web con la información que

usted necesita, haga clic en el botón de Atrás para retornar a la lista de
vínculos de Google, y seleccione otro vínculo.
6. Si usted no encuentra un vínculo que contiene la información sobre el festival,

desplácese hasta el final de la página, y busque la palabra Google. La letra "o"
puede repetirse muchas veces. El número de veces que aparece la letra "o",
indica el número de páginas de vínculos que Google despliega como resultado.
Haga clic en cada una de las "o" para ver las listas de vínculos adicionales que se
han encontrado. Use el botón de Atrás si usted quiere volver a una página
anterior o al sitio Web de Google.
7. Una vez que haya encontrado un sitio Web sobre dicho festival, use los vínculos
desplegados para encontrar el lugar y las razones del festival.
16
Parte 2: Usando AltaVista

Escoja una de las siguiente opciones para investigar en esta actividad:
1. galleta de chocolate en barra

2. los cuadrados del albaricoque
3. los cuadrados de limón
Después de que usted haya escogido el tipo de galleta que le gustaría investigar,
siga las direcciones debajo para encontrar una receta.

dirección: http://es-es.altavista.com/
2. Para encontrar un sitio Web que contienen la receta de galleta en barra, digite el
nombre completo de la galleta que usted ha seleccionado en la caja de búsqueda.
3. Presione la tecla Intro (Enter) o haga clic en el botón Encontrar.
4. AltaVista despliega una lista de vínculos (listado en orden numérico) de la
galleta que usted pidió. Mire el lado izquierdo de la página y usted verá el
número de páginas encontrado para su solicitud. Anote este número de aciertos
en la hoja de datos en su Guía del estudiante/carpeta.
5. Desplácese hacia abajo hasta encontrar un sitio que tiene una receta para la
galleta de chocolate en barra, luego haga clic en el vínculo.
6. Si no encuentra un vínculo que contenga la receta, desplácese hacia el final de la
página. Busque:
Páginas de resultados 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 [Next >>]
La sección de páginas de resultados representa el número de páginas de vínculos

que AltaVista ha encontrado para su solicitud. Haga clic en los números para
encontrar listas de vínculos adicionales. Use el botón de Atrás si desea volver a
una página anterior o al sitio Web de AltaVista.
1. Una vez que haya encontrado un sitio Web con la receta, busque los ingredientes
necesarios y el tiempo de cocción. Anote esta información sobre la hoja de datos
en su Guía del estudiante/carpeta.
Una vez que haya salido de la aplicación, , haga clic en Siguiente para continuar con
la actividad.
1
Indicaciones: Búsqueda de directorio con una práctica de motor de búsqueda

Internet. Abra su Guía del Estudiante /Carpeta en la hoja de datos titulada
"Búsqueda de Directorio con una práctica de motor de Búsqueda". Para este
ejercicio, usted usará el portal de Terra. Siga las direcciones debajo para completar
la actividad.
1. Haga clic en la línea de dirección para resaltar el texto. Digite en la dirección

siguiente: http://www.terra.com.ve
2. Presione la tecla Intro (Enter) o haga clic en Ir a.
3. para encontrar un sitio Web sobre volcanes, en la caja de la búsqueda, digite
volcanes.
4. Presione la tecla Intro (Enter) o haga clic en Buscar
5. Terra desplegará un lista de vínculos sobre volcanes en sitios Web de Venezuela.
Para ampliar el rango, vaya a la caja de búsqueda, y digite: los volcanes, y en la
caja de la derecha, haga clic en la flecha hacia abajo, y seleccione Toda la Web,
para expandir la búsqueda.
Una mayor cantidad de vínculos serán desplegados. Busque el que coincida con su
palabra clave: los volcanes. Dicha página está en un sitio alojado en un host de
Geocities.com. Si no lo ve en la página actual, continue buscando en las siguientes
páginas. Si no lo encuentra, digite la siguiente URL en línea de dirección del
navegador: http://www.geocities.com/CapeCanaveral/Lab/6093/Volcanes.htm
Dentro de esa página, encuentre un título llamado Links de Vulcanología, y en esa

sección, haga clic en el vínculo llamado Volcano World (Mundo de volcanes).
6. En el sitio Web de la Universidad de North Dakota, vaya al cuadro Volcano

listing (Lista de volcanes)
Lista de volcanes
Los siguientes vínculos lo conectarán a una
lista de todos los volcanes en VW (Volcano
World).
Ordenado por:
• World Region
• Country/Area
• Volcano Name
• Volcano Descriptions
2
1. Haga clic en el vínculo de Volcano Descriptions (Descripciones de volcán). Hay

un mapa global dividido en secciones.
2. Imágenes de Volcanes (por Región.) es el título en la cabecera de la página.
Encuentre la sección del mundo más cercana a donde usted vive y haga clic en la
caja roja para esa sección.
3. Este vínculo lo lleva a ver una lista de volcanes localizados en esa región.
Desplácese a través de la lista y encuentre un volcán cerca de su área. Haga clic
en el vínculo.
4. Anote el nombre y la localización del volcán en la hoja de datos en su Guía del
Estudiante /Carpeta.
Esto completa la búsqueda de directorio de esta solicitud. Usted puede usar este
método para ubicar la región para Alaska, pero tomaría más tiempo para encontrar
los cuatro volcanes específicos. Ahora que usted ha localizado el sitio Web de Mundo
de volcanes, es más fácil de encontrar los volcanes de Alaska que usar una
búsqueda por palabra clave.
1. Haga clic en Atrás para volver al sitio Web de Mundo de volcanes. Usted podría
necesitar pulsar el botón varias veces.
2. Cuando vuelva a la sección que tiene listado los volcanes (de la Universidad de
North Dakota), ubique la caja de búsqueda, debajo de dicha lista. Usted digitará
allí la palabra clave, y Google buscará la información usando esa palabra clave.
3. En la caja de búsqueda, digite como palabra clave, uno de los nombres de los
siguientes volcanes:
• Griggs
• Frosty
• Sanford
• Kaguyak
4. Presione la tecla Intro (Enter) o haga clic en el botón de Búsqueda (seach

VolcanoWorld).
5. Verá un listado de vínculos con información acerca del volcán que usted buscaba.
Haga clic en uno de los vínculos y anote la ubicación del volcán en la hoja de
datos.
6. Haga clic en Atrás para volver al sitio Web de Mundo de Volcanes (Volcano
World).
7. Repita la búsqueda por palabra clave para los tres volcanes restantes, y anote la
ubicación de cada uno de ellos en la hoja de datos.
Una vez que haya salido de la aplicación, haga clic en la flecha siguiente para
3
Indicaciones: Práctica de motor multi-búsqueda

Internet. Abra a su Guía del Estudiante /Carpeta en la hoja de datos titulada
"Práctica de motor multi-búsqueda ". Para este ejercicio, usted usará Dogpile, un
motor de multi-búsqueda, para comparar resultados de cuartetos de jazz. Siga las
indicaciones debajo para completar la actividad.

dirección: http://www.dogpile.com
2. Presione la tecla Intro (Enter) o haga clic en el botón Ir a.
3. Digite "cuartetos del jazz" en la caja de búsqueda (sin los "").
4. Presione la tecla Intro (Enter) o haga clic en en el botón Fetch.
5. Dogpile encuentra una lista de aciertos. Estas lista de vínculos está separada en
varias secciones según los diversos motores de búsqueda que se usan. Muévase
hacia abajo para ver la lista de resultados. El nombre de cada motor de búsqueda
se lista y el número de resultados se registra.
6. Desplácese hacia abajo en la página para encontrar cada uno de los motores de
búsqueda. En la hoja de datos en su Guía del Estudiante /Carpeta, anote el
número de aciertos y los motores de búsqueda utilizados para todos los
resultados.
7. Vaya al final de la página para ver si hay motores de búsqueda adicionales en su
solicitud. Investigue cualquier motor adicional, y grabe los resultados que usted
encuentra en la hoja de datos.
Una vez que haya salido de la aplicación, haga clic en la flecha siguiente para
4
Indicaciones: Práctica de Operador y Marcador

Las indicaciones para esta actividad se refieren al Explorador de Internet.
NOTA: Si usted está usando un navegador diferente, por favor consulte con su
profesor o use la opción de ayuda en su navegador sobre cómo guardar URLs. Use
las indicaciones de su navegador para crear dos carpetas en el panel de su marcador
para esta actividad. Nombre la primera carpeta "Herramientas de Búsqueda XX"
(donde XX representan a las iniciales de su nombre). En esta carpeta, coloque los
vínculos para cada una de las herramientas de búsqueda en Parte 1, Paso 8.
Marque la segunda carpeta en la parte 1, paso 9, y luego proceda a la Parte 2.
La ventana de Internet Explorer debe estar abierta. Si no lo está, haga clic en el

botón de Internet. Abra su Guía del Estudiante /Carpeta en la hoja de datos
titulada " Práctica de Marcador y Operador ". En la Parte 1 de este ejercicio, usted
pondrá marcadores para las varias herramientas de búsqueda en su carpeta de
Favoritos. En la Parte 2, usted se va a referir a las distintas tablas para aplicar los
operadores apropiados para encontrar URLs para las preguntas/temas listados.
Para cada pregunta/tema, guarde un marcador en una carpeta que usted haya
creado. Siga las indicaciones debajo para completar la actividad.
5
Parte 1: Marcadores de libros

1. haga clic en Favoritos en la barra de herramientas del navegador.
Esto abre el panel de Favoritos que contiene accesos directos a todos sus ítems
favoritos.
2. Haga clic en Agregar.

3. El Explorador de Internet abre la caja de diálogo de Agregar favoritos. Los
vínculos favoritos son organizados en carpetas. Usted hará una nueva carpeta
para sus vínculos de herramienta de búsqueda. Haga clic en el botón Nueva
carpeta (si usted no ve la opción de Nueva carpeta, haga clic en Crear en,
entonces haga clic en botón Nueva carpeta). Digite "Herramientas de Búsqueda
XX" (donde XX representan a las iniciales de su nombre, no escriba "") en la caja
de nombre de la carpeta. Haga clic en Aceptar.
Botón
NUEVA
CARPETA
6
4. La nueva carpeta se agrega a la lista de Favoritos. Haga clic en Aceptar para

cerrar la caja de diálogo de Agregar favoritos.
dirección: www.altavista.com
6. Presione la tecla Intro (Enter) o haga clic en el botón Ir a.
7. Cuando se abre el sitio Web para la herramienta de búsqueda, haga clic Agegar
Favoritos . Haga clic en la carpeta Herramienta de búsqueda que usted acaba de
crear. Note que el nombre del sito Web (herramienta de búsqueda) está en la
caja de Nombre. Haga clic en Aceptar.
NOMBRE DEL BOTÓN

MOTOR DE ACEPTAR
BUSQUEDA
ABRA
CARPETA DE
HERRAMIENTA
DE BUSQUEDA
8. Repita los pasos 5 a 7 hasta que usted tenga un marcador para cada una de las
herramientas de la búsqueda siguientes:
www.dogpile.com
www.ebig.com
www.google.com
www.looksmart.com
www.yahoo.com
9. Cree otra carpeta para todos los vínculos de investigación que usted encuentre
en la Parte 2 "Práctica de operador" (donde XX representan a las iniciales de su
nombre, no escriba "").
10. Para cerrar el panel de Favoritos, haga clic en el botón de Favoritos, en la barra
de herramientas estándar del navegador.
7
Parte 2: Operadores
En esta sección, usted debe dirigir una búsqueda para obtener la información
solicitada en la reunión del personal. La lista de preguntas/temas de la reunión
aparece debajo. Hay también tablas para los operadores y para las herramientas de
búsqueda en las páginas siguientes.
Use las preguntas/temas y las tablas para crear una estrategia para cada búsqueda.
Anote el operador y la clave de búsqueda que utilizó, el motor de búsqueda usado, y
los URLs encontrados para cada una de las preguntas/temas en la hoja de datos en
su Guía del Estudiante /Carpeta. Ponga sus marcadores en la carpeta de Práctica de
Operadores que usted recién creó.
Preguntas/temas
Lo siguiente es de la reunión de personal de la revista.
1. ¿Cuántas islas están rodeando la costa de Hong Kong? (Asegúrese que su

información contenga sitios que tenga islas de Hong Kong solamente.)
2. Encontrar la dirección del equipo de fútbol Dallas Cowboys (pero no los cowboys,
vaqueros) en Texas.
3. Encontrar una copia de la Guía Braille para discapacitados visuales.
4. Búsqueda de mascotas domésticas, pero no incluir información sobre los perros.
5. Encontrar la información sobre las manzanas de McIntosh (pero no las

computadoras).
6. Busque sitios que contienen "Holocausto" en el título.
7. La información sobre los tratamientos para las picaduras de abejas y avispas.
8. ¿Dónde se hacen las barras de lápiz Crayola?
9. Encontrar toda la información que pueda de la palabra "cantar."
10.Localice varios sitios Web sobre Bill Gates. (Asegúrese que su información
incluya sitios que tienen "Gates, Bill" en el título y no incluye sitios sobre
Golden Gate.)
8
Organizando la Búsqueda
1. Organice su estrategia de búsqueda con el uso de operadores. Use las siguientes
tablas para decidir qué operador es mejor para la búsqueda.
Booleano Booleano Implícito Incluido en los resultados

gato y ratón +gato +ratón Todos los resultados van a contener
ambas palabras.
libro o revista libro revista El resultado debería contener cualquiera
de estas palabras.
pizza sin pepperoni Pizza –pepperoni Los resultados van a contener la primera
palabra pero no la segunda.
F. Scott proximo a N/A Los resultados incluirán F. Scott
Fitzgerald Fitzgerald escrito como Fitzgerald, F.
Scott y como F. Scott Fitzgerald.
Operador Ejemplo Incluido en los resultados

"entre comillas " "manuales de diseño Los resultados obtendrán las palabras o
Web " frases exactamente como se especifica
dentro de las comillas.
*uso de asterisco surf* Los asteriscos remplazarán a cualquier
letra, por lo cual los resultados
aparecerán con cualquier variación de la
palabra.
Mayúsculas Bill bill Los resultados harán énfasis en las
mayúsculas en la palabra. Si éstas son
usadas, los resultados encontrarán solo
mayúsculas.
Campos title: Cristóbal Colón Los resultados serán páginas donde el
título coincide exactamente con las
palabras usadas.
2. Determine qué palabra/s clave quiere usar para cada pregunta/tema. Para
limitar la búsqueda, aplique el operador que usted desee a la palabra clave.
3. Anote esta consulta en la hoja de datos.
4. Repita pasos 2 y 3 para cada pregunta/tema en la lista.
9
Usando las Herramientas de la Búsqueda

1. Use la siguiente tabla para seleccionar una herramienta de búsqueda.
2. Anote el motor de búsqueda en la hoja de datos en su Guía del Estudiante
/Carpeta.
3. Abra la ventana del navegador, haga clic en el botón de Favoritos. Utilice los
marcadores en la carpeta de Herramientas de búsqueda para usar la
herramienta de búsqueda en la primera consulta.
4. Use uno de los motores de búsqueda adicionales que se encuentran al final de la
tabla. En la línea de dirección en la ventana del navegador, digite en la dirección
tal como está en la tabla.
5. Anote el número de aciertos para cada preguntas/tema en la hoja de datos.
Dependiendo de la herramienta de búsqueda que usted elija, puede usar el botón
para una búsqueda avanzada o compleja. Use la ayuda del sitio Web de la
herramienta de búsqueda si fuera necesario.
6. Cuando usted consigue un sitio que contesta su consulta, haga clic en Agregar en
Favoritos para incluir ese vínculo en su carpeta de Práctica de Operadores.
7. Registre sus hallazgos para cada pregunta/tema en la hoja de datos.
8. Vaya al menú, y haga clic en Archivo, y seleccione Cerrar.
Una vez que usted haya salido de la aplicación, haga clic en el botón de flecha
siguiente para continuar con la actividad.
Herramienta de Operadores
búsqueda
Booleana Más/ Comillas Stemming Mayúscula/
Menos Minúscula
AltaVista Acepta Acepta Acepta Asterisco Acepta
Dogpile Acepta Acepta Excluye
Encyclopedia Britannica Acepta Acepta Acepta
Google Excluye Acepta Acepta Excluye Excluye
LookSmart
Yahoo! Acepta Acepta Acepta Asterisco Acepta
Las siguientes son Herramientas de búsqueda adicionales y sus direcciones.
Considere usarlas, para expandir su búsqueda
Excite Acepta Acepta Acepta Excluye Excluye
www.excite.com
Fast Acepta Acepta Acepta Acepta Excluye
www.fast.com
HotBot Acepta Acepta Acepta Acepta Acepta
hotbot.lycos.com
NorthernLight Acepta Acepta Acepta Excluye

www.northernlight.com
Search Excluye Acepta Acepta Excluye
www.search.com
10
Actividad 4 – Evaluación de la calidad de un sitio Web
Objetivo
Cuando usted haya completado esta actividad, tendrá el conocimiento y las
habilidades para examinar la calidad de información encontrada en un sitio Web.
• Determinan el propósito y el perfil del visitante a un sitio Web.

• Cuestionar al autor y al host de un sitio Web basado en la evidencia de
autenticidad.
• Examinan el contenido de un sitio Web según exactitud, profundidad, tiempo de
demora.
• Evaluar la funcionalidad y el estilo de una página Web.
Indicaciones: Evaluación del recurso

Recursos y seleccione el vínculo a Internet. En el sitio Web de Lab-Volt TI,
seleccione el módulo de Desarrollo Web.
En esta actividad, usted visitará cuatro sitios Web y evaluará su calidad. Cada
parte de la actividad examina un tipo diferente de sitio Web. Use las indicaciones
como sugerencias para ayudarle a navegar a través de dicho sitio, pero también
debe explorarlo por sí mísmo, leyendo los artículos que encuentra y examinando la
multimedia incorporada en el sitio. Deténgase 10 a 15 minutos por lo menos en cada
sitio, haciendo referencia a su Guía del Estudiante /Carpeta a medida que va
completando las hojas de datos correspondientes.
Primero, haga un marcador para el módulo de Desarrollo Web en el sitio Web de

Lab Volt TI, e incluya este marcador en su carpeta "Herramientas de búsqueda XX"
(donde XX representan a las iniciales de su nombre) que usted creó en la Actividad
3. Use este marcador para volver al sitio Web de Lab Volt TI, si usted se pierde y
necesita volver a empezar, o cuando esté listo para continuar en la próxima sección.
11
Parte 1: Sitio Web de apoyo a la comunidad

De la lista de recursos, seleccione "Sitio Web de apoyo a la comunidad".3 Abra su
Guía del Estudiante /Carpeta en la hoja de datos titulada "Evaluación del recurso:
Sitio Web de apoyo a la comunidad". Siga las indicaciones debajo para completar la
actividad. (Las indicaciones en este procedimiento sugieren vínculos para explorar,
pero usted también debe explorar el sitio por sí mísmo para hacer su propia
evaluación.)
1. La página principal de “El día mundial de la alimentación” debe estar abierta en

su ventana del navegador. Si no está, haga clic en el Sitio Web de apoyo a la
comunidad para abrir el vínculo.
2. Lea las preguntas en la hoja de datos en su Guía del Estudiante /Carpeta antes
de empezar.
3. Anote el URL del sitio en la hoja de datos.
4. Desplácese al final de la página y busque información sobre el sitio. Escriba
cualquier información que sea pertinente a las preguntas de la hoja de datos.
5. Los vínculos de navegación son su clave para moverse a través del sitio Web. A
la derecha de la página, usted verá un menú con vínculos. Use éstos para
navegar dentro del sitio. Haciendo clic sobre el ícono con la flecha hacia arriba
(que se encuentra al final de la página) puede ir al principio de la página;
también puede utilizar los botones de Adelante o Atrás en el navegador.
6. Haga clic en vínculo “El Hambre y la Malnutrición en el Mundo” y lea el artículo.
Cuando usted termine, haga clic en el botón de Atrás de su navegador, para
volver a la página principal.
7. Haga clic en el vínculo de “Enlaces” en el menú de la derecha. Revise los vínculos
a sitios externos que existen en dicha página.
8. Asegúrese de buscar una opción de búsqueda. Si el sitio Web tiene uno, usted
puede buscar información adicional para contestar las preguntas en la hoja de
datos.
9. Para buscar meta etiquetas en el código HTML, vaya a la página principal, en el
menú, haga clic en Ver, y elija Código Fuente. Se abrirá un archivo de texto en el
Bloc de Notas conteniendo el código HTML de esa página. Busque la etiqueta:
<meta name=”_____”>. Anote cualquier información que sea útil sobre el
contenido de la mísma, en la hoja de datos. Para cerrar el archivo de código
HTML, vaya al menú y haga clic en Archivo,y seleccione Salir o haga clic sobre el
botón X en la esquina superior derecha de la ventana del Bloc de Notas
3
[Cuando los estudiantes hacen clic en el vínculo del sitio Web de apoyo a la comunidad, el sitio
siguiente se abrirá: http://www.feedingminds.org/info/wfd_es.htm]
12
10. Cuando haya contestado todas las preguntas en la hoja de datos, deberá volver a
Recursos. Para ello, vaya a Favoritos y en su carpeta de Herramientas de
búsqueda, haga clic en el marcador del sitio Web de Lab Volt TI.
Parte 2: Sitio Web comercial

De la lista de recursos, seleccione "Sitio Web Comercial".4 Abra su Guía del
Estudiante /Carpeta en la hoja de datos titulada "Evaluación del Recurso: Sitio Web
Comercial. Siga los pasos debajo para completar la actividad. (Las indicaciones en
este procedimiento sugieren vínculos para explorar, pero usted también debe hacer
una evaluación por su cuenta.)
1. La página principal de Coca-Cola© debe estar abierta en la ventana de su

navegador. Si no lo está, haga clic en el vínculo del sitio Web comercial. (Si usted
recibe algún mensaje de error mientras la página se está cargando, anote esta
información en la Sección Estilo y Funcionalidad de la hoja de datos.)
2. Antes de que empezar, lea las preguntas en la hoja de datos en su Guía del
3. Registre el URL del sitio en la hoja de datos.
4. Los vínculos de navegación son su clave para moverse a través del sitio Web.
Hay dos listas de enlaces en esta página. En la parte superior de la página,
usted verá un menú dispuesto horizontalmente con vínculos en forma oval. Haga
clic en el logotipo de Coca-cola en la esquina superior izquierda de estas páginas
para volver a la página principal.
5. En la izquierda usted verá la segunda lista de vínculos que es una barra de
navegación. Use este menú para moverse a los artículos adicionales sobre la
compañía.
6. Seleccione varias páginas diferentes para leer. Al ingresar en alguna de las
opciones, es posible que se abran ventanas adicionales. Cuando usted termine,
haga clic en el gráfico (logotipo de Coca-cola) que representa al vínculo para
volver a la página principal, o cierre la ventana, haciendo clic en la X en la
esquina superior derecha de la mísma.
7. Aegúrese de encontrar una opción de búsqueda. Si el sitio Web tiene una, usted
datos.
4[Cuando los estudiantes pulsan el botón en el vínculo, sitio Web Comercial, el sitio siguiente se
abrirá: http://www.cocacola.cl/Portada/DirSeccion/Home.asp]
13
8. Para buscar meta-etiquetas en el código HTML, vaya a la página principal, haga

clic en el menú de Ver, y seleccione Código fuente. Un archivo del Bloc de Notas
se abre conteniendo el código HTML. Busque la etiqueta: <meta name=”_____”>.
Anote cualquier información que sea útil sobre el contenido de la mísma, en la
hoja de datos. Para cerrar el archivo de código HTML, vaya al menú y haga clic
en Archivo,y seleccione Salir o haga clic sobre el botón X en la esquina superior
derecha de la ventana del Bloc de Notas.
Parte 3: Sitio Web informativo

De la lista de recursos, seleccione " Sitio Web informativo". 5 Abra su Guía del
Estudiante /Carpeta en la hoja de datos titulada "Evaluación del Recurso: Sitio Web
informativo". Siga los pasos debajo para completar la actividad. (Las indicaciones en
este procedimiento sugieren vínculos para explorar, pero usted también debe hacer
una evaluación por su cuenta.)
1. La página principal de la NASA© debe estar abierta en la ventana de su

navegador. Si no lo está, haga clic en el vínculo del sitio Web comercial. (Si usted
recibe algún mensaje de error mientras la página se está cargando, anote esta
información en la Sección Estilo y Funcionalidad de la hoja de datos.)
4. Una vez en el sitio, haga clic en el botón rojo de Pulse para entrar.
5. Anote cualquier información que sea pertinente a las preguntas de hoja de
datos.
Cuando se encuentre ubicado en cualquiera de las páginas internas del sitio,
utilice siempre el botón Indice en la esquina inferior derecha de la pantalla, para
volver a la página principal de NASA, o las flechas Atrás o Adelante para
avanzar o volver dentro del sitio.
7. Haga clic en el vínculo de Bienvenidos al espacio y lea el artículo. Cuando usted
termine, haga clic en Inicio para volver a la página principal.
5
[Cuando los estudiantes pulsan el botón en el vínculo, sitio Web Informativo, el sitio siguiente se
abrirá: http://www.lanasa.net/]
14
8. Haga clic en los vínculos adicionales encontrados en la página principal, como

Vida en el espacio, Directorio, y Ciencia espacial y Satélites y misiones. Lea los
artículos allí contenidos.
9. Explore dentro de cada vínculo en las sub-categorías. Use el botón de Indice para
volver a la página principal.
10. Aegúrese de encontrar una opción de búsqueda. Si el sitio Web tiene una, usted
datos.
15
Parte 4: Noticias del sitio Web

De la lista de recursos, seleccione " Sitio Web de noticias". 6 Abra su Guía del Estudiante
/Carpeta en la hoja de datos titulada "Evaluación del Recurso: Sitio Web informativo". Siga
los pasos debajo para completar la actividad. (Las indicaciones en este procedimiento
sugieren vínculos para explorar, pero usted también debe hacer una evaluación por su
cuenta.)
1. La página de inicio de CNN en Español© debe estar abierta en la ventana de su

navegador. Si no lo está, haga clic en el vínculo del sitio Web de noticias. (Si
usted recibe algún mensaje de error mientras la página se está cargando, anote
esta información en la Sección Estilo y Funcionalidad de la hoja de datos.)
4. Anote cualquier información que sea pertinente a las preguntas de hoja de datos.
Cuando se encuentre ubicado en cualquiera de las páginas internas del sitio,
utilice siempre el gráfico CNNenEspañol.com en la esquina superior izquierda de
la pantalla, para volver a la página principal, o las flechas Atrás o Delante de su
navegador para avanzar o volver dentro del sitio.
6. Vaya a la sección TV/Radio y Sitios CNN/Turner a la derecha de la pantalla, y
recorra algunas de las diferentes opciones. Cuando usted termine, vuelva a la
página principal.
7. Haga clic en los vínculos de la portada en la página principal y lea los artículos
allí contenidos.
8. Diríjase a la seccion de Referencias a la derecha de la pantalla, y haga clic en el
vínculo de Indice, e ingrese en algunas de las secciones. Cuando usted termine,
vuelva a la página principal.
9. Asegúrese de encontrar una opción de búsqueda. Si el sitio Web tiene una, usted
datos.
6
[Cuando los estudiantes pulsan el botón en el vínculo de , sitio Web Informativo, el sitio siguiente
se abrirá: http://www.cnnenespanol.com/]
16
Indicaciones: Evaluación del experto

La ventana del navegador debe estar abierta. Si no está, haga clic en el botón de
Internet. Abra a su Guía del Estudiante /Carpeta en la hoja de datos titulada "
Evaluación de sitios web: Web usability testing de Interfaz.com". Siga las
indicaciones debajo para completar la actividad.
Hay dos partes en esta actividad. En la Parte 1, usted empezará en el sito de

Interfaz.com y lo examinará para obtener información básica sobre sus servicios. En
la Parte 2, usted usará Web personales de SUSI. Siga las indicaciones como
sugerencias para ayudarle a navegar a través de dicho sitio, pero también debe
explorarlo y evaluarlo por sí mísmo. Deténgase 10 a 15 minutos por lo menos en
cada sitio, haciendo referencia a su Guía del Estudiante /Carpeta a medida que va
completando las hojas de datos correspondientes.
Parte 1: Evaluación de sitios Web

1. En la línea de dirección de la ventana del navegador, digite el URL siguiente:
http://www.interfaz.com.co/productos/evaluacionsitiosweb.html y luego presione
la tecla Intro (Enter).
2. Busque el vínculo referente a Preguntas. Haga clic en Lea las respuestas a
preguntas de otras personas, y lea los diferentes artículos.
3. Vaya a la columna de la derecha de la página y haga clic sobre el vínculo de
Diseño del sitio Web. Explore cada uno de los vínculos allí desplegados.
4. Anote brevemente las respuestas a las preguntas, y las recomendaciones sobre la
evaluación de sitios Web en la hoja de datos en su Guía del Estudiante /Carpeta,
grabe. Cuando usted termine, continue con la Parte 2: Sitio Web personal.
17
Parte 2: Evaluación de sitios Web personales

Las indicaciones en este procedimiento sugieren vínculos para explorar, pero usted
también debe hacer una evaluación por su cuenta.
Internet. En la línea de dirección de su navegador, digite el URL del sitio: Sitios
Web personales de SUSI (Safe Use of Services on the Internet),
http://www.besafeonline.org/spanish/paginas_personal.htm
Siga las indicaciones debajo para completar la actividad.
1. Abra su Guía del Estudiante /Carpeta en la hoja de datos titulada Evaluación de

sitios web: " Sitios Web personales".
2. Lea las preguntas en la hoja de datos antes de empezar.
4. Vaya al final de la página y anote cualquier información pertinente en la hoja de
datos.
5. Lea el artículo sobre Problemas más comunes y Consejos.
6. En la línea de dirección de su navegador, digite el URL del sitio:
http://www.webestilo.com/
7. Haga clic en Usabilidad, ya sea en el gráfico on en el vínculo. Debajo del título
Manual, explore los diferentes vínculos que allí aparecen.
8. Vuelva a la página principal haciendo clic en el vínculo de Inicio. Debajo del
título Actualizaciones, haga clic en el vínculo Tipos de evaluación. Anote los seis
puntos que considera el autor para evaluar sitios web.
9. Luego de leer el artículo, haga clic sobre el vínculo Test de usuarios. Anote
algunas de las variables a considerar. Haga clic en Inicio para volver a la página
principal.
10. Asegúrese de encontrar una opción de búsqueda. Si el sitio Web tiene una, usted
datos.
18
19
20
Desarrollo Web Tema 2 – Diseño de un sitio Web
TEMA 2 – DISEÑO DE UN SITIO WEB
Objetivo
Cuando usted haya completado este tema, podrá demostrar una comprensión del
diseño Web y cómo es utilizada como una poderosa herramienta de comunicación.
También podrá especificar los diferentes componentes requeridos en una presencia

Web, y las similitudes entre una autoedición (Desktop publishing) y el diseño de
página Web.
Revisión general
La Web ha cambiado radicalmente desde sus comienzos a principios de los años
noventa. Las páginas basadas en texto que fueron conectadas por hipervínculos han
evolucionado a páginas Web temáticas e interactivas. Estos sitios atractivos y
fascinantes requieren planificación, habilidad, y creatividad para que sean
funcionales y amigables para los internautas.
En este Tema, usted desarrollará un conocimiento de las complejidades

involucradas en el diseño un sitio Web. Comenzará con la historia de las páginas
Web y explorará como se han ido desarrollando los cambios.
Además, tendrá que analizar las tendencias actuales sobre la interactividad y

funcionalidad de los sitios Web. Usted explorará los principios del diseño y los
elementos básicos de publicación y de las artes gráficas.
Usando las habilidades que aprendió en el Tema 1, usted buscará información en la

Web acerca de servicios y opciones proporcionadas por una compañía de desarrollo
de páginas Web. Usted comparará las opciones disponibles para el alojamiento (en
inglés, hosting), registro de nombre de dominio, así como el diseño de páginas Web.
21

Interfaz gráfica del usuario - un programa que emplea el uso de gráficos en lugar
de sólo palabras para representar la entrada y salida de un programa. El
programa despliega ciertos íconos, botones, y cajas del diálogo en las ventanas en
la pantalla. El usuario controla el programa principalmente moviendo un puntero
en la pantalla, que normalmente es controlado por un ratón o mouse.
Interfaz de línea de comandos – una forma de comunicación entre un programa y
su usuario a través del texto. Los comandos son ingresados con la ayuda de un
teclado y son interpretados y ejecutados por el programa. Los resultados son
desplegados como texto o gráficos en la pantalla del monitor.
Bipmaps – Visualización de mapas de bits - cada píxel o punto desplegados en el
monitor corresponden directamente a uno o más bits en la memoria de video de la
computadora.
Boceto en miniatura (thumbnail) una visualización esquemática de un diseño de
página. Esta técnica se usa para visualizar una publicación final.
CGI – (Common Gateway Interface) significa Interfaz de la Entrada Común. Es
un juego de reglas que describen cómo un servidor Web se comunica con otro
parte del software en la misma máquina, y cómo esa otra parte de software ("el
programa CGI ") habla con el servidor Web. Cualquier parte de software puede
ser un programa CGI si maneja entrada y salida según la norma CGI.
22
Actividad 1 – Historia del diseño Web
Objetivo
Cuando usted haya completado esta actividad, tendrá los conocimientos y
habilidades suficientes para describir el desarrollo de la World Wide Web como una
herramienta de comunicación.
Será capaz de:
• resumir el efecto de la autoedición en el diseño de páginas Web.

• especificar las diferentes categorías de diseño de páginas Web.
• definir el uso de sistemas de interfaces.
• explicar el impacto de las tecnologías emergentes en el desarrollo del diseño de
páginas Web.
Indicaciones: Primera página Web

La ventana del navegador debe estar abierta. Si no lo está, pulse en el botón de los
"Primera página Web"7, o vaya al siguiente sitio Web:
http://html.conclase.net/articulos/historia Abra su Guía del estudiante /carpeta en la
hoja de datos titulada "Primera página Web". Siga las indicaciones debajo para
1. Lea el artículo titulado "El navegador de WorldWideWeb" por Tim Berners-Lee.
NOTA: Una copia del artículo completo puede encontrarse en la Guía

del profesor. Si usted tiene algún problema para encontrar el artículo
en la Web, pídale una copia a su instructor.
2. Use los vínculos en el texto para ver las páginas Web iniciales que él describe en
el artículo.
3. Conteste a todas las preguntas en la hoja de datos. Cuando las haya respondido,
cierre la ventana del navegador seleccionando Cerrar el menú de Archivo o
pulsando el botón X en la esquina superior derecha.
Una vez que usted haya salido de la aplicación, haga clic el botón en la flecha
Siguiente para reanudar la actividad.
7[Cuando los estudiantes hacen click el botóndel vínculo, Primera Página Web, el sitio siguiente se
abrirá: http://www.w3.org/People/Berners-Lee/WorldWideWeb.html]
23
Indicaciones: Páginas basadas en texto

Recursos y seleccione el vínculo a Internet del menú. En el sitio Web de Lab-Volt de
"Páginas basadas en texto"8
En esta actividad, usted debe evaluar los elementos del diseño para el sitio Web.
Necesitará mirar las páginas detenidamente para ver los cambios del texto, líneas
subrayadas y viñetas. Abra su Guía de estudiante /carpeta en la hoja de datos
titulada "Página basada en texto ". Siga las indicaciones debajo para completar la
actividad.
1. Cuando la página principal de RMA (Risk Management Associates, Inc.) se abre,

desplácese hacia abajo para mirar la página entera. Luego vaya hasta la parte
superior de la página.
2. Localice los vínculos de navegación y los vínculos adicionales de la página.
3. Use los vínculos para ver las páginas adicionales del sitio.
4. Use el botón de Atrás o el vínculo a Inicio para volver a la página principal.
5. Conteste todas las preguntas en la hoja de datos. Cuando las haya respondido,
cierre la ventana del navegador seleccionando Cerrar del menú de Archivo o
haciendo clic en el botón X en la esquina superior derecha.
Una vez usted haya salido de la aplicación, haga clic en el botón de flecha siguiente
8
[Cuando los estudiantes hacen clic en el vínculo Páginas basadas en texto, el
siguiente sitio se abrirá: http://www.ceniainternet.cu/guia/capitulo3.html]
24
Indicaciones: Página a colores

Recursos y seleccione el vínculo a Internet del menú. En el sitio Web de Lab-Volt de
"Página a colores". 9
Usted necesita mirar las páginas detenidamente para ver las imágenes, banners
gráficos y texto en el fondo. Abra su Guía del estudiante /carpeta en la hoja de datos
titulada "Páginas a colores". Siga las indicaciones debajo para completar la
actividad.
1. Cuando abra el sitio Web de Adaro, localice los vínculos de navegación y los de
las páginas adicionales.
3. Use el botón de Atrás para volver a la página principal.
4. Conteste todas las preguntas en la hoja de datos. Cuando las haya respondido,
haciendo clic en el botón X en la esquina superior derecha.
Una vez que haya salido de la aplicación, haga clic en el botón de la flecha siguiente
9
[Cuando los estudiantes hagan clic en el vínculo Página a colores, el sitio siguiente se
abrirá: www.envirocoal.com]
25
Indicaciones: Página interactiva

“Página interactiva”.10
Necesitará mirar las páginas detenidamente para ver el color, texto y medios usados
como temas visuales y evaluar su habilidad para interactuar dentro del sitio. Abra
su Guía del estudiante /carpeta en la hoja de datos titulada " Página interactiva".
1. Cuando el sitio Web de FG SQUARED se abra, localice los vínculos de

navegación y los de las páginas adicionales.
3. Vaya a la sección galería del sitio. En muchas de estas páginas usted necesitará
Windows Media Player o QuickTime para ver los videos. Si usted no tiene
ninguno de éstos, consulte a su profesor, pues de lo contrario sólo verá las
imágenes inmóviles.
haciendo clic sobre el botón X en la esquina superior derecha.
Una vez que haya salido de la aplicación, haga clic sobre el botón de flecha siguiente
10
[Cuando los estudiantes pulsan el botón en el vínculo, Página Interactiva, ell sitio
siguiente se abrirá: www.fg2.com]
26
Actividad 2 – Evaluación del estilo de un sitio Web
Objetivo
habilidades para reconocer los principios del diseño de sitios Web y cómo se aplican
para desarrollarlos efectivamente.
• describir una apreciación global del trabajo de un diseñador grafico.

• nombrar elementos y herramientas gráficas de publicaciones en la Web e
impresas.
• dibujar pequeños esquemas de páginas Web.
• nombrar los principios del diseño aplicados a las páginas Web.
27
Indicaciones: Bocetos en miniatura (thumbnails)

En este procedimiento, usted dibujará bocetos en miniatura para rediseñar varias
páginas Web. Al dibujar los bocetos, recuerde que esta actividad es una combinación
de creatividad y funcionalidad. Tenga presente que una página bien diseñada debe
tener utilidad como su principal propósito.
Use el papel cuadriculado como práctica para rediseñar las páginas y sitios, y siga
las sugerencias debajo para ayudarle a completar la actividad.
1. Use el método de escaneo visual: primeramente analice las formas básicas y los
colores en las páginas. Luego, mire detenidamente la ubicación de los gráficos y
texto. Finalmente, lea los títulos, encabezados, y texto.
2. Decida cuáles elementos y herramientas gráficas quiere usted cambiar.
3. En el papel cuadriculado, dibuje la forma básica de cada elemento. Use formas
simples, cuadrados, rectángulos, y círculos como contornos para los elementos.
Siga las líneas del papel cuadriculado para mantener sus dibujos alineados.
4. Haga una lista de los colores que van a ser usados dentro de las formas que
usted ha dibujado.
5. Para cualquiera de las formas que serán usadas para un gráfico o figura, dibuje
una "X" grande dentro de la forma. O, escriba la palabra "figura" en la forma (ver
el gráfico).
figura
6. Luego, dibuje los titulares, subtítulos, y áreas del texto. Use letras grandes o
reduzca su tamaño donde sea necesario. Para las letras pequeñas, use una serie
de líneas rectas como marcadores para las palabras. Usted puede necesitar
marcar éstas con el texto exacto o una descripción del contenido (vea el gráfico).
28
Boletín Titular
Subtítulo Desarrol
lo del
7. Note cualquier elemento adicional que aparece en la página. Escriba notas

dentro de las formas que usted ha dibujado para indicar e principio de diseño
que aplicará. Puede dibujar líneas delgadas, ligeras para marcar la alineación.
Asegúrese de cuidar el uso del espacio en blanco de la página para indicar
proximidad.
8. Marque el punto focal de la página usando un bosquejo oscuro para el contraste.
Etiquete los gráficos como fotografías, logotipos, o clip arts. Mire
cuidadosamente el uso de color en el sitio Web de manera de tenerlos en cuenta
para crear repetición. Marque los cambios de color a lo largo de la página.
9. Refiérase en las hojas de datos que contienen todos los términos que usted ha
aprendido en esta actividad. Marque estos elementos en el papel cuadriculado.
10. Para el ejemplo donde se necesita rediseñar más de una página, haga sus dibujos
más pequeños para que entren en su hoja de datos.
11. Cuando esté satisfecho con su boceto en miniatura, cópielos a las cuatro hojas de
datos de Boceto en miniatura, en su Guía de estudiante /carpeta.
para reanudar la actividad
29
Actividad 3 – Costos del desarrollo Web
Objetivo
Cuando haya completado esta Actividad, usted tendrá los conocimientos y las
habilidades para estimar el costo de desarrollo de sitios Web.
• Comparar costos de alojamiento (en inglés, hosting) de sitios Web.

• Analizar las agencias involucradas en el mantenimiento del sistema de nombre
de dominios.
• Explicar la función de registradores de nombre de dominio.
• Examinan los costos involucrados en el desarrollo Web.
30
Indicaciones: Registro de nombre de dominio

“InterNic”. 11 Abra su Guía del estudiante /carpeta en las tres hojas de datos de
InterNIC. Siga las indicaciones debajo para completar la actividad.
1. En la página principal de InterNIC, use el vínculo InterNIC FAQ para ir a una

página de información sobre el sistema de nombres de dominio y su proceso de
registro. Conteste todas las preguntas en la primera hoja de datos de InterNIC.
2. Use el vínculo de Inicio o el botón Atrás para retornar a la página principal de
InterNIC.
3. Haga clic en el vínculo Directorio del Registrador Acreditado. Entonces haga clic
en el botón de Página de información de registradores acreditados ICANN.
4. Registrador Acreditado ICANN: La página de la revisión general contiene
vínculos a la historia de ICANN, el proceso del registro, y las consideraciones
financieras de los nuevos solicitantes. Use estos vínculos para contestar las
preguntas en la segunda hoja de datos de InterNIC. Use el botón Atrás para
volver a la página de Revisión general si lo necesitara.
5. Cuando usted haya contestado todas las preguntas en la hoja de datos, vuelva al
Acreditación del registrador ICANN: Página de revisión general.
6. La tercera hoja de datos de InterNIC solicita que proporcione información sobre
las tarifas que cobran los registradores por los nombres del dominio. Usted debe
visitar algunos de sus sitios Web y debe hacer una lista de comparación de
precios. En la página de revisión general de ICANN, localice la sección llamada
"el Contacte a registradores acreditados de ICANN ". Haga clic en el vínculo a la
Lista de todos los registradores acreditados de ICANN. Aparecerá una página
conteniendo una larga lista de vínculos a los registradores.
7. Haga clic en uno de los vínculos para ir al sitio Web de ese registrador. Al entrar
en el sitio, busque precios sobre tarifas de registro. Indique el URL del sitio Web
y la información del precio que usted encuentra en la tercera hoja de datos de
InterNIC.
11
[Cuando los estudiantes pulsan el botón en el vínculo, InterNIC, el sitio siguiente se
abrirá: http://www.internic.net /]
31
8. Use el botón de Atrás para volver a la lista de ICANN para seleccionar

registradores adicionales. Debe visitar por lo menos, 5 sitios de registradores.
haga clic sobre el botón X en la esquina superior derecha.
Indicaciones: Comparar los Servicios de alojamiento Web

Recursos y seleccione el vínculo a Internet del menú. Abra su Guía del estudiante
/carpeta en las hojas de datos tituladas "Comparar los servicios de alojamiento Web"
y "Comparar los servicios de alojamiento Web gratis". Siga las indicaciones debajo
para completar la actividad.
En esta actividad, usted realizará una búsqueda para encontrar información sobre
servicios de alojamiento Web. Podrá efectuar varias búsquedas para comparar los
resultados de los distintos motores de búsqueda.
1. Localice la carpeta llamada Herramientas de búsqueda XX (donde XX son sus

iniciales) que usted creó en el Tema 1, Actividad 3 de este módulo. Abra la
carpeta para ver los marcadores de las herramientas de la búsqueda.
2. Haga clic en marcadores. Cuando se abra el sitio Web de la herramienta de la
búsqueda, realice una búsqueda acerca del costo de alojamiento de los sitios
Web. Si no hay suficientes vínculos en su búsqueda, pruebe usar otra frase de
búsqueda diferente o utilice una herramienta de búsqueda distinta a la de los
marcadores en su carpeta.
3. Use los vínculos resultantes de su búsqueda, y visite por lo menos seis sitios que
ofrecen alojamiento Web. En cada sitio, busque información acerca del costo y
términos que se ofrecen. También puede investigar los sitios para evaluar costos,
paquetes de precios, o tarifas de alojamiento. Asegúrese de anotar el URL y la
información que usted encuentra en cada sitio en la hoja de datos "Comparar los
servicios de alojamiento Web".
4. Si el sitio Web no tiene lista de precios, use el botón de Atrás para volver a los
resultados de su búsqueda, y pruebe con otro vínculo.
32
5. Cuando haya encontrado toda la información que necesita en un sitio, haga clic
el botón de Atrás para volver a los resultados de su búsqueda. Seleccione otro
vínculo de alojamiento Web para encontrar tarifas adicionales.
6. La hoja de datos "Comparar los servicios de alojamiento Web gratis" requiere
que usted encuentre información sobre alojamientos Web gratis. Vaya a una de
sus herramientas de búsqueda y realice una búsqueda de por lo menos seis
alojamientos Web gratuitos. A veces se pueden encontrar vínculos para estos
sitios, buscándolos como diseño Web gratis.
7. Use los vínculos en sus resultados para visitar sitios que ofrecen alojamiento
Web gratuito. En cada sitio, busque información sobre las limitaciones que
aplican al alojamiento de sitios Web. Puede investigar en los vínculos referidos a
preguntas mas frecuentes, servicios, o costos ocultos.
8. Busque información en sitios sobre costos de publicidad a través de banners, o
tarifas para quitarlos de un sitio. Asegúrese de anotar en su hoja de datos, el
URL y la información que usted encuentra en cada sitio.
9. Cuando haya encontrado toda la información que usted necesita de un sitio,
haga clic en el botón de Atrás para volver a la página de los resultados de su
búsqueda. Seleccione otro vínculo sobre alojamiento Web gratuito para encontrar
información adicional.
10. Cuando haya contestado todas las preguntas en las hojas de datos, cierre la
ventana del navegador seleccionando Cerrar del menú de Archivo o haga clic en
el botón X en la esquina superior derecha.
33
Indicaciones: Comparar Servicios de desarrollo Web

Recursos y seleccione el vínculo a Internet del menú. Abra su Guía del estudiante
/carpeta en las hojas de datos tituladas "Comparar los servicios de desarrollo Web".
En esta actividad, usted realizará una búsqueda para encontrar información sobre
servicios de desarrollo Web. Podrá efectuar varias búsquedas para comparar los
resultados de los distintos motores de búsqueda.
1. Localice la carpeta llamada Herramientas de búsqueda XX (donde XX son sus

iniciales) que usted creó en el Tema 1, Actividad 3 de este módulo. Abra la
carpeta para ver los marcadores de las herramientas de la búsqueda.
2. Haga clic en marcadores. Cuando se abra el sitio Web de la herramienta de la
búsqueda, realice una búsqueda acerca del costo del desarrollo Web. En esta
búsqueda, usted está buscando precios específicamente relacionados al costo del
diseño Web. Si no hay suficientes vínculos en su búsqueda, pruebe usar otra
frase de búsqueda diferente o utilice una herramienta de búsqueda distinta a la
de los marcadores en su carpeta.
3. Use los vínculos resultantes de su búsqueda, y visite por lo menos seis sitios que
ofrecen alojamiento Web. En cada sitio, busque información acerca del costo y
términos que se ofrecen. También puede investigar los sitios para evaluar costos,
paquetes de precios, o tarifas de diseño/desarrollo. Asegúrese de anotar el URL y
la información que usted encuentra en cada sitio en la hoja de datos.
4. Si el sitio Web no tiene lista de precios, use el botón de Atrás para volver a los
resultados de su búsqueda, y pruebe con otro vínculo.
5. Cuando haya encontrado toda la información que necesita en un sitio, haga clic
el botón de Atrás para volver a los resultados de su búsqueda. Seleccione otro
vínculo de desarrollo Web para encontrar tarifas adicionales.
haga clic sobre el botón X en la esquina superior derecha.
34
Desarrollo Web Tema 3 – Creacion del sitio web
TEMA 3 – CREACIÓN DEL SITIO WEB
Objetivo
Cuando haya completado este tema, Usted podrá definir los metas necesarias para
completar un sitio web por su propia cuenta. Usted investigará la competencia y
definirá el tipo de audiencia.
Usted podrá organizar los archivos necesarios para su sitio web y crear un
anteproyecto y una cuadrícula de página para completar su organización.
Revisión General
Para agregar estilo de diseño a su sitio web, Usted aplicará los principios de diseño
del tema 2, combinando con un nuevo color y conceptos de formateo. Usted
examinará los temas básicos de tipografía, fotografía digital y software de gráficos.
Usted creará, editará y optimizará sus imágenes.
En este tema, Usted ensamblará los documentos de texto y los archivos de gráficos
los cuales usará en su proyecto y al mismo tiempo aprenderá el desarrollo de un
sitio web y el código de HTML en las próximas lecciones.

Código Hexadecimal – El código hexadecimal es un código de seis dígitos que
traduce los valores RVA de un color en particular a un lenguaje que puedan
entender los navegadores. Cuando un navegador encuentre un código hexadecimal,
este le cambia el código al color que aparece en la pantalla.
35
Actividad 1 – Definición de Objetivos
Objetivo
Cuando haya completado esta actividad, tendrá el conocimiento y las habilidades
para documentar la planificación requerida para el desarrollo de un sitio web.
Usted podrá:
• organizar una hoja de planificación necesaria para la construcción del sitio web.
• identificar temas de accesibilidad con respecto al diseño del sitio web.
• describir las características que le ayudarán a crear un sitio web accesible.
• usar los métodos de búsqueda para evaluar los sitios web de la competencia.
36
Instrucciones: Directrices para la Accesibilidad al Sitio Web

La ventana del navegador debe de estar abierta. Si no está, hágale clic al botón de
Recursos y seleccione Vínculo de Internet del menú. En el sitio web de Lab-Volt IT,
seleccione el MÓDULO Desarrollo del Sitio Web. De la lista de recursos, seleccione
“Directrices W3C”1. El vínculo lo lleva a la página que contiene el articulo W3C
llamado, “Como usan el sitio web las personas que tienen minusvalías.” Abra su
Guía del Estudiante/Carpeta en la hoja de datos llamada “Directrices de
Accesibilidad,” Siga las instrucciones siguientes para completar la actividad.
1. Use los vínculos o desplácese hacia abajo para moverse a través de todo el
articulo. Para contestar las preguntas en su hoja de datos, debe de leer las dos
primeras secciones ( Introducción y situaciones de personas con minusvalías
cuando usan el sitio web)
2. La sección de situaciones contiene ejemplos de personas con minusvalías cuando
usan el sitio web. Cada ejemplo esta vinculado a referencias adicionales
relacionadas a términos, aparatos para discapacitados y los controles de
accesibilidad y ejemplos. Use el botón Regresar para volver a los ejemplos en los
cuales está trabajando.
1[Cuando el estudiante hace clic sobre el vínculo, Directrices W3C, aparecerá el
siguiente sitio web: http:www.w3.org/WAI/EO/Drafts/PWD-Use-
Web/Overview.html]
3. Conteste todas la preguntas en la hoja de datos. Cuando haya contestado todas
las preguntas, cierre la ventana del navegador seleccionando Cerrar
en el menú del Archivo o haciéndole clic a la X en la parte superior en la esquina
derecha.
Una vez que haya salido del software, hágale clic a la flecha Siguiente para
37
Instrucciones: Evaluando la Competencia

La ventana del navegador debe de estar abierta. Si no está, haga clic sobre el botón
Internet. Abra su Guía del Estudiante/Carpeta en las hojas de datos llamada
“Evaluando la Competencia-1 Compañía Teatral,” “ 2 Zoológico Infantil”, “ 3
Agencia de Viaje,” y “4 Organización de Accesibilidad.” Siga las siguientes
instrucciones para completar la actividad.
En esta actividad hará una investigación para encontrar sitios web que sean
similares en objetividad a las organizaciones que está planificando para
utilidad.net. Usted querrá hacer algunas investigaciones para comparar los
resultados de diferentes motores de búsqueda.
1. Localice el archivo llamado Herramientas de Búsqueda XX ( las XX representan

sus iniciales) que ha creado en el Tema 1, Actividad 3 de éste módulo. Abra el
archivo para visualizar los marcadores de las herramientas de búsqueda.
2. Haga clic sobre uno de los marcadores. Cuando se abra el sitio web en la
herramienta de búsqueda, haga una investigación sobre uno de los temas
sugeridos en utilidad.net. Si no hay suficientes vínculos como resultado de su
investigación, trate con otra frase o use otra herramienta de búsqueda diferente
desde su carpeta de marcas.
3. Use los vínculos en sus resultados para visitar cinco sitios web. Use el método
de escaneo visual para buscar en los sitios web elementos de diseño específicos
de acuerdo a su gusto. Escoja un sitio web para ser usado en su evaluación final.
La información en este sitio web será usada para la crítica que anotará en la
hoja apropiada de datos.
4. Use el botón Regresar para volver al sitio web de su preferencia para cada tópico.
Evalúe los principios del sitio web y dé su opinión como usuario. Tome nota de
algunas herramientas de elementos y gráficos. Asegúrese de anotar en la hoja
de datos el URL y la información que encuentre en cada sitio web.
5. Evalúe el propósito, contenido, audiencia y mantenimiento del sitio web.

Combine el propósito del sitio web con los objetivos planeados.
6. Verifique en todos los sitios web las características sencillas de accesibilidad.

Mire las etiquetas ALT que aparezcan inesperadamente cuando coloca el ratón
sobre las imágenes, o redimensione el texto en el menú de Ver en su navegador.
38
7. Si su sitio web no satisface sus necesidades, use el botón Regresar para volver a
la página de resultados y trate con otro vínculo.
8. Cuando haya encontrado toda la información que necesita del sitio web, haga clic
al botón Regresar para volver a la página de resultados de búsqueda. Seleccione
otro vínculo para encontrar sitios web adicionales como punto de comparación.
9. Repita los pasos para cada uno de los cuatro tipos de sitio web que planea usar
para utilidad.net.
10. Complete todas las hojas de datos para ésta sección. Cuando haya contestado
todas las preguntas, cierre la ventana del navegador seleccionando Cerrar en
menú Archivo o haciéndole clic a la X en la parte superior en la esquina derecha.
Cuando haya salido del software, hágale clic a la flecha Siguiente para continuar
con la actividad.
39
Actividad 2 – Creando un Anteproyecto y una Lista de Componentes
Objetivo
Cuando haya completado esta actividad, Usted tendrá el conocimiento y las
habilidades para crear un organigrama y una carpeta con contenidos organizados
para su sitio web.
Usted podrá:
• dibujar un diagrama de las páginas del sitio web.

• escribir el contenido del texto para el uso sobre las páginas del sitio web.
• seleccionar y recopilar información especifica para los gráficos en el sitio web.
• discutir los temas básicos de las imágenes digitales.
• usar una cámara digital.
40
Instrucciones: Dibuje su Sitio Web

En este procedimiento, Usted pintará un dibujo de páginas web para crear un
anteproyecto de su sitio web. Escoja una de las cuatro organizaciones de las cuales
investigó en el tema 3, Actividad 1 y continúe con ese proyecto.
Cuando pinte los dibujos, recuerde que esta actividad es una combinación de
creatividad y función. Mantenga en mente que un sitio web bien diseñado incluirá
un arreglo lógico que muestre como se relacionan las páginas una con la otra y como
están vinculadas.
Use un pedazo de papel como practica para diseñar las páginas del sitio web y siga
las siguientes sugerencias como ayuda para completar esta actividad.
1. Use el propósito y la información del contenido en las hojas de planificación

completadas en el Tema 3, Actividad 1 para su organización. Esto lo hará para
separar los objetivos en categorías y tópicos del sitio web. Lo anterior es similar
a hacer un resumen de la información.
2. Escriba una categoría y un tópico en cada pedazo de papel borrador.
3. Escoja los tópicos por nivel de importancia tal como: El más importante, el
próximo en importancia y el de menos importante. Márquelos numéricamente.
4. Mueva el papel borrador cambiándolo de sitio hasta que haya organizado las
categorías por el orden de importancia asignado a los tópicos.
5. Tome nota de cualquier articulo e imagen que desee tener sobre las páginas.
6. Marque los vínculos que desee tener sobre cada página.
Abra su Guía del Estudiante/Carpeta en la hoja de datos llamada “Dibuje su Sitio

Web.” Siga las siguientes instrucciones para completar esta actividad.
1. Una vez que haya decidido el arreglo final de las páginas, copie el orden de las
mismas en su hoja de datos. Este será su anteproyecto.
2. Dibuje un rectángulo para cada página web. Coloque la categoría de más
importancia arriba y extienda los tópicos secundarios afuera del mismo. Indique
los vínculos sobre la página dibujando flechas hacia otras páginas.
3. Asegurase de incluir cualquiera de las notas relacionadas con artículos, dibujos y
vínculos sobre el anteproyecto.
Una vez que Usted haya completado el dibujo del anteproyecto, haga clic sobre la
flecha Siguiente para continuar con la actividad.
41
El bloc de notas aparecerá en su pantalla. Si no está, haga clic sobre el botón

Ejecutar una aplicación y escoja Bloc de Notas del menú. Siga las siguientes
1. Use los recursos sugeridos en su hoja de planificación del Tema 3, Actividad 1

para recopilar la información para los artículos que planeo sobre su
anteproyecto.
2. Tenga en mente que el escribir para un sitio web requiere su propio estilo,
divida la información por páginas en pequeñas secciones de titulares y cuerpo.
3. Debe de haber un documento abierto sobre la pantalla. Escriba el contenido
para su articulo en el documento. Separe los titulares y el texto apretando la
clave Regresar.
4. Use el método de pirámide invertida colocando el encabezamiento al principio de
cada artículo.
5. Escriba voces activas que sean cortas y que tengan el actor al frente de la acción.
6. Siempre que sea posible, cree listas para que les pueda añadir más tarde líneas
con puntos. Coloque cada ítem en la lista sobre una línea apretando la clave
Regresar.
7. El bloc de notas no le permite hacerle ningún cambio al formato. Usted debe de
marcar los lugares donde quiere hacer cambios de formato con un asterisco los
cuales debe de remover más tarde.
8. Cuando haya terminado los artículos para cada página, vaya al Archivo y
seleccione Guardar Como.
9. Con el cuadro de diálogo Guardar Como abierta, cree una carpeta nueva para
guardar todo su trabajo. Haga clic sobre el botón Crear Una Carpeta Nueva.
Escriba “Proyecto Web XX” (las XX representan sus iniciales.) Apriete Intro.
10. Haga doble clic sobre la carpeta para abrirla. Entonces, en la parte baja del
cuadro de diálogo Guardar Como, haga clic en el cuadro nombre del Archivo.
Escriba un nuevo nombre para su trabajo. Es recomendable darle un nombre al
archivo por tópico o número de página. Asegúrese de usar un nombre que pueda
recordar más tarde. Haga clic sobre Guardar.
11. Para cada página de su sitio web, cree un archivo de contenido de texto así como
lo mencionamos arriba. Cuando necesite un nuevo documento, haga clic en
Archivo y seleccione Nuevo. Asegúrese de nombrar todos sus archivos con
nombres que sean únicos.
12. Guarde todos los artículos adicionales en el archivo “Proyecto Web XX”
haciéndole doble clic para abrirlo en el cuadro de diálogo Guardar Como.
13. Cuando haya escrito todo el contenido del texto, haga clic en el menú Archivo y
seleccione Salir.
Cuando haya salido del software, haga clic sobre la flecha Siguiente para continuar
con la actividad.
42
Instrucciones: Juntar las Imágenes

En esta actividad, Usted seleccionará gráficos para usarlos en su sitio web. Usted
necesitará navegar a través de imágenes de gráficos en miniatura que se
encuentran en el disco de Art Explosion Clip Art. Estos discos vienen con una
tarjeta de referencia la cual describe los tipos de archivo y categorías de imágenes
que se encuentra en el disco. Use esta tarjeta de referencia para decidir con cual
disco quiere comenzar.
Abra la Guía del Estudiante/Carpeta en la hoja de datos llamada “Organice los

Gráficos.” Paint Shop Pro aparecerá sobre la pantalla. Si no está, haga clic sobre el
botón Ejecutar una aplicación y escoja Paint Shop Pro del menú. Siga las siguientes
1. Cargue el disco que desee usar en su computadora o verifique las instrucciones

con su profesor.
2. La interfase de Paint Shop Pro deberá estar abierta en su pantalla y si hay un
cuadro de diálogo abierta llamada El Consejo del Día, haga clic sobre el botón
Cerrar para removerlo.
3. Para abrir la ventana del Navegador, vaya a Archivo y seleccione Navegar o
mantenga apretado Ctrl y B. La ventana del Navegador tiene dos tableros. La de
la izquierda muestra los archivos en su computadora y la de la derecha muestra
los archivos de imágenes en miniatura que están en archivos especiales. La
ventana del Navegador tiene un botón por omisión el cual abre un archivo que
contiene las imágenes suministradas por Jasc.
Imágenes en una Ventana del Navegador
43
4. En el tablero de la izquierda navegue a través de los archivos en su computadora

hasta que vea el dispositivo CD-ROM. Los nombres de los discos de Art
Explosion aparecerán como Ae_# ( el signo # corresponde al disco seleccionado.)
Haga doble clic sobre el icono para ver los archivos que están en el disco.
Encuentre el archivo que escogió para visualizar la tarjeta de referencia. Usted
necesitará desplazarse a través de la ventana para encontrarlo. Haga clic para
abrirlo.
NOTA: Los discos contienen archivos de Catálogo para usar

con otro navegador de gráficos. Para encontrar las imágenes
en Paint Shop Pro use los archivos de imagen. No use los
archivos de Catálogo.
5. Las imagines pueden tomar unos segundos antes de que aparezcan en el tablero
de visualización. Después de que hayan sido cargados por completo, Usted
puede desplazarse a través de los gráficos en miniatura para seleccionar los que
desee usar. Haga doble clic sobre el dibujo en miniatura para abrirlo y
visualizarlo completamente. No se preocupe si la imagen aparece de tamaño
incorrecto, Usted aprenderá a cambiarle el tamaño más tarde. Si no desea usar
la imagen en su sitio web, cierre la misma haciéndole clic a la X en la parte de
arriba en la esquina derecha.
NOTA: Las imágenes vector son formateadas como archivos

.wmf. Cuando Usted abra uno de estos archivos aparecerá
una cuadro de diálogo llamado Meta Picture Import. Este
cuadro confirma el tamaño de la imagen a importar. No es
necesario cambiar el tamaño de la imagen ahora. Haga clic
en aceptar para abrir la imagen.
6. Si Usted decide que la imagen es la que desea usar en su sitio web, necesita
recopilar alguna información y guardarla para ser optimizada más tarde.
Primero, vaya a Imagen en la barra del menú y seleccione Información de la
Imagen o apriete Shift y I. Apunte sobre la hoja de datos la información
relacionada con la Dimensión de la Imagen, Píxeles por Pulgada, profundidad y
colores del Píxel para cada imagen que seleccione para su sitio web.
44
7. Guarde la imagen en el formato nativo de Paint Shop Pro. Esto le asegurará que
tendrá una copia de la imagen original en caso de que algunos de los cambios le
causen una distorsión de la imagen más tarde. Vaya a Archivo y seleccione
Guardar una Copia Como o apriete Ctrl. y F12. En la caja de diálogo Guardar
una Copia Como, haga doble clic sobre la carpeta “Proyecto Web XX” para
abrirlo. El nombre del archivo deberá ser el mismo como el archivo en el disco.
(Tome nota de que el tipo de archivo aparece como un nativo de Paint Shop Pro
*.psp, el cual cambiará más tarde cuando optimice el sitio web.) Haga clic sobre
el botón Guardar. Cierre la imagen haciéndole clic a la X en la parte de arriba
de esquina derecha.
8. Continúe mirando a través de las miniaturas en busca de gráficos

adicionales que desee usar en su sitio web. Use el tablero de la izquierda
de la ventana del navegador para seleccionar más archivos. Haga clic para
abrirlos. Repita los pasos de 5 a 7.
9. Use la tarjeta de referencia para mirar otros discos en la colección que se

relaciona a su tema. Cargue los otros discos en su computadora o verifique con
su profesor para más instrucciones. Repita los pasos de 4 a 7.
10. Cuando haya terminado de escoger los gráficos, haga clic en el menú del Archivo
y seleccione Salir. Retire el disco o verifique las instrucciones con su profesor.
Una vez haya salido del software, haga clic sobre la flecha Siguiente para regresar
a la actividad.
45
Instrucciones: Tome Algunas Fotografías

En esta actividad, Usted tomará algunas fotografías usando la cámara digital y
transfiriendo las mismas del disquete de la cámara a su carpeta “Proyecto del Sitio
Web XX”. Usted guardará los archivos de nuevo en el formato nativo de Paint Shop
Pro para protegerlos y anotar información relacionada con los archivos en su Guía
del Estudiante/Carpeta.
Para tomar una fotografía
1. Pídale a su profesor por la cámara y el disquete.
Para insertar el disquete en la cámara, ubique la ventana del disquete en el lado

de la cámara. Tenga el disquete de lado colocando la parte de arriba enfrente a
la parte de atrás de la cámara como en la figura 1. Inserte el disco dentro de la
cámara y empújelo hasta que escuche que el mismo ha encajado en su lugar.
Figura 1 – Inserte un Disquete
2. Remueva la tapa del lente apretando suavemente los botones de soltar y saque la
tapa.
3. Para grabar fotografías, ubique el botón de Operar/Cámara en la parte de atrás
de la misma y posicione el botón en la parte Cámara.
4. Para prender la cámara, ubique el botón Prender/Apagar en la parte de atrás de
la misma. Apriete el botón pequeño llamado soltar mientras que jala hacia abajo
el botón Prender/Apagar. La cámara hará una seña/ruido y el panel se prenderá.
5. Usando el panel LCD como un visor, centralice su objeto dentro del panel.
Apriete el botón obturador completamente hacia abajo. La cámara hará una
seña indicándole que está grabando una imagen y el panel LDC le mostrará la
palabra “Grabando.” No es necesario sostener la cámara sin moverse mientras
está grabando, sólo cuando Usted le hace clic.
6. Usted puede grabar en su disquete aproximadamente de 25 a 40 imágenes. El
número de imágenes que se encuentran en el disquete aparecen en el lado
derecho del panel LCD.
46
Para ver la grabación de Imágenes en el panel LCD

1. Apague la cámara presionando el botón pequeño Soltar y al mismo tiempo jale
hacia abajo el botón Prender/Apagar.
2. Coloque el botón de Operar/Cámara en Operar. Prenda la cámara. El panel

LCD mostrará las últimas fotografías grabadas. Las imágenes grabadas se
mantienen en el disco en orden numérico en el índice de la cámara. Para
maniobrar a través del índice, Usted debe aprender a usar el botón Control.
3. Ubique el botón Control en la parte de atrás de la cámara. Vea figura 2. El

botón Control le permitirá visualizar diferentes imágenes en el Índice
presionando la parte superior, baja, izquierda o derecha del botón Control.
Usted también puede entrar diferentes selecciones sobre el Menú del panel LCD
presionando el centro del botón control.
Figura 2 – Botón Control
4. A medida que usa los botones de Control para seleccionar los diferentes botones
de búsqueda de Imagen y los botones del Menú y de Índice, los mismos
cambiaran de azul a amarillo. El ítem seleccionado o marcado es el ítem
amarillo. Ver figura 3.
47
Panel LCD
BOTONES DE
BÚSQUEDA DE
BOTONES DEL
IMAGEN (IZQDR)
MENÚ ÍNDICE
Menú Índice
Figura 3 – Menú, Índice y los Botones de Búsqueda de Imagen
5. Usted puede usar el botón Control para visualizar imágenes una por una o las 6
imágenes miniatura a la vez. Esto requiere que haga diferentes selecciones en
el panel LCD.
6. Ubique primero los botones de búsqueda de Imagen y las selecciones del Menú e
Índice en la parte baja al lado izquierdo del panel LCD. Ver figura 3.
7. Para verlos uno por uno, use los siguientes pasos para visualizar las imágenes
que ha tomado. Marque el botón de búsqueda de Imagen en la izquierda.
Apriete el centro del botón/Control para ver una imagen de nuevo. Con los
botones de búsqueda de Imagen en la izquierda todavía marcados, continúe
presionando el centro del botón/Control para visualizar todas las imágenes
adicionales.
8. Si Usted desea observar las vistas en miniatura de las imágenes grabadas,

marque el botón de Índice y apriete el centro del botón/Control. Usted verá 6
imágenes al mismo tiempo. Las imágenes son enumeradas en el orden en que
fueron tomadas. Hay un pequeño triángulo al lado de la imagen marcada.
Mueva el marcador triangular presionando el lado izquierdo, derecho, superior o
los botones de abajo sobre el botón/Control. Si Usted desea saltar para ver las
seis imágenes antes o después de las imágenes que está mirando al momento,
presione el botón de abajo hasta que haya marcado la flecha izquierda o derecha
que aparece sobre el panel LCD arriba del botón del Menú. Ver figura 4.
Para mostrar las 6 imágenes

anteriores
Para mostrar las imágenes

siguientes
Figura 4 – Flechas de Salto en la Pantalla de Vistas en Miniatura
9. Para regresar a una sola pantalla para repetir, seleccione una imagen y apriete
el centro del botón/Control.
48
Para borrar una imagen de la cámara

1. Las imágenes que desea borrar deberán aparecer en el panel LCD y use los
botones de Control para marcar el botón Menú. Oprima el centro del botón
Control para ver las opciones del menú. pulse la flecha de subir en el botón
Control. Aparecerá un menú deplegable. Oprima la flecha de subir en el botón
Control para marcar el menú Borrar. Pulse el centro del botón Control. Un
menú aparecerá a la derecha, seleccione Aceptar. Apriete el centro del botón
Control.
Para eyectar el disquete
1. Para apagar le cámara use el botón de Prender/Apagar. Remplace la tapa del

lente para protegerlo.
2. Ubique los botones Apretar y eyectar Disquete en la parte baja hacia la

izquierda de la cámara. Apriete y agarre el botón Apretar y al mismo tiempo
deslice el botón eyectar Disquete hacia la izquierda. El disquete saldrá fuera de
la cámara.
Para ver las fotografías en la ventana del Navegador de Paint Shop Pro
Abra su Guía del Estudiante/Carpeta en la hoja de datos llamada “Tome Algunas

Fotografías.” Deberá de aparecer en la pantalla Paint Shop Pro.
Si no aparece, haga clic sobre el botón Ejecutar una aplicación y escoja Paint Shop
Pro en el menú.
1. Cargue el disquete dentro de su computadora o verifique con su profesor para

más instrucciones.
2. La interfase de Paint Shop Pro deberá estar abierta en su pantalla, y si aparece

abierto un cuadro de diálogo llamado El Consejo del Día, haga clic en el botón
Cerrar para removerlo.
3. Para abrir la ventana del Navegador, vaya a Archivo y seleccione Navegador, o

apriete Ctrl y B.
4. En el tablero a la izquierda, navegue a través de las carpetas en su computadora

hasta que vea el disquete. Haga doble clic sobre el icono para visualizar las
imágenes que están en el disco.
49
5. Las imagines deberán aparecer en el tablero de la derecha. Desplácese a través

de las imágenes para ver las fotografías que ha tomado. Abra las que planea
usar. No se preocupe si las imágenes son muy grandes, si tienen ojos rojos (esto
se llama “ojo-rojo”) o si sólo se puede usar una parte de la imagen. Más tarde
aprenderá como arreglar estas imperfecciones.
6. Guarde la imagen en el formato nativo de Paint Shop Pro. Esto le asegura que
tendrá una copia de la imagen original en caso de que algunos de los cambios le
distorsionen la imagen más tarde. Vaya a Archivo y seleccione Guardar una
Copia Como o apriete simultáneamente las claves Ctrl. y F12. En el cuadro del
diálogo Guardar una Copia Como, haga doble clic y escriba un nuevo nombre
para la fotografía (algo descriptivo, por ejemplo). Haga clic sobre el botón
Guardar. Cierre la fotografía haciéndole doble clic a la X en la parte de arriba de
la esquina derecha.
7. En su Guía del Estudiante, anote los nombres que le ha dado a las fotografías las
cuales ha colocado en su carpeta “Proyecto Web XX”. También debe de anotar
cualquier cambio que le quiera hacer a las fotografías más tarde. Tome nota de
que fotografías tienen “ojo-rojo” para quitárselo o que necesitan ser recortadas en
tamaños más pequeños.
8. Cuando haya guardado todas las fotografías, haga clic en el menú Archivo y
seleccione Salir. Eyecte el disquete o verifique con su profesor para más
instrucciones.
Cuando haya salido del software, haga clic sobre la flecha Siguiente para regresar a
la actividad.
50
Actividad 3 – Agregar Estilo al Diseño
Objetivo
habilidades para agregar estilo al diseño usando el color y texto apropiado para el
sitio web.
Usted podrá:
• explicar la diferencia entre sistemas de color.

• identificar los problemas en el uso de color y texto en el sitio web.
• seleccionar de la paleta browser-safe
• dibujar un logotipo y cabecera usando las herramientas vector.
• organizar proyectos para ser usados más tarde como parte de un sitio web.
51
Instrucciones: Escoja los Colores

En este procedimiento, Usted seleccionará tres colores web-safe para ser usados en
su sitio web. Primero, Usted fijará las preferencias en Paint Shop Pro para mostrar
el código hexadecimal para la paleta de colores. Después, cargará la paleta web-safe
la cual está disponible en el programa.
Cuando seleccione los colores, recuerde que esta actividad es una combinación de
creatividad y función. Tenga que presente que un sitio web bien diseñado incluirá
colores que sean complementarios y de alto contraste. Usted puede escoger varias
opciones para asegurarse de que quede satisfecho con su última selección. Se le
facilitará el proceso si usa un pedazo de papel para anotar los colores y códigos
antes de tomar la decisión. Los colores finales que escoja deberán ser anotados en
su Guía del Estudiante/Carpeta.
Deberá aparecer Paint Shop Pro en su pantalla. Si no, haga clic sobre el botón
Ejecutar una aplicación y escoja Paint Shop Pro en el menú. Sigua las siguientes
3. La interfase de Paint Shop Pro deberá estar abierta en su pantalla, si aparece

abierto el cuadro de diálogo El Consejo del Día, haga clic al botón Cerrar para
removerlo.
4. Para abrir la ventana de Preferencias, vaya al Archivo y seleccione Preferencias,

aparecerá un menú desplegable a la derecha. Marque Preferencias Generales
del Programa en el menú y haga clic sobre el mismo.
5. Cuando aparezca el cuadro del diálogo Preferencias Paint Shop Pro, seleccione la
ficha marcada Diálogos y Paletas.
6. En la sección de la paleta Color en la parta baja del cuadro del diálogo, escoja
Mostrar en modo RVA, Mostrar Hexadecimal y Mostrar la paleta del documento
haga clic en Aceptar.
52
Preferencias Generales del Programa
5. Para abrir un archivo nuevo, haga clic sobre Archivo. Cuando se abra el
cuadro de diálogo Nueva Imagen, fije las dimensiones de Imagen a 700
píxeles para ambos la altura y el ancho. La resolución deberá ser 72.000
píxeles por pulgada. Escoja blanco como color de fondo y 256 colores (8 bits)
para las características de la Imagen. Haga clic en Aceptar.
Cuadro de Diálogo de una Nueva Imagen
53
6. Para cargar la paleta web-safe, haga clic sobre Colores y seleccione Cargar
Paleta. Cuando aparezca el cuadro de diálogo Cargar Paleta, haga doble clic
sobre la carpeta Paletas y seleccione Seburidad.pal y haga clic en Abrir. La
paleta de color deberá lucir así:
Paleta Web-Safe
NOTA: Los siguientes pasos le ayudarán en la selección

de tres colores para usar en el sitio web. Usted puede
dibujar objetos sobre la página para ver los colores que
desea escoger con anticipación. Los colores finales
deberán ser claros, medianos y oscuros, pero no seleccione
negro o blanco como uno de sus colores.
7. Para dibujar un objeto, seleccione la herramienta Creando Formas
Predefinidas en la paleta Barra de Herramientas.
8. Busque la ventana Herramienta de Opciones en su área de trabajo (o ábralo

desde la Ventana de Paleta de Configuración en la barra de herramientas.)
Haga clic en la figura Seleccionar herramienta a la derecha y se abrirá un
menú descolgable. Seleccione Formas y Rectangular en la lista. Asegúrese
que la opción Guardar estilo no haya sido marcada. Su ventana de
Herramienta de Opciones deberá lucir así:
54
Paleta de Paleta de Capas

Configuración
Recuadros de Estilos Activos
Estilo de
primer plano o
contorno Estilo de plano
fondo o color
de relleno
Recuadros de Estilos Activos
9. Asegúrese que el estilo de primer plano o contorno sea fijado en el negro. Para
fijar el estilo de primer plano o contorno, mueva su ratón sobre el selector Estilo
de Primer Plano o contorno en el Recuadro de Estilos Activos. Cuando el cursor
cambie a un gotero, haga clic en el ratón. El cuadro de diálogo aparecerá
Seleccionar Color de la Paleta. Seleccione cualquiera de los cuadros negros en la
parte baja de la paleta. Haga clic en Aceptar.
55
10. Seleccione el color de relleno. Posesione el ratón sobre el selector Color de

Relleno en el Recuadro de Estilos Activos. Cuando cambie el cursor a un gotero,
haga clic en el ratón. El cuadro de diálogo aparecerá Seleccione el Color de la
Paleta. En el cuadro descolgable llamado Orden de clasificación, seleccione Por
Luminancia. Con esto, seleccionará los colores en un orden que le ayudará a
seleccionar tonos claro, mediano y oscuro. Seleccione cualquiera de los colores en
la paleta menos blanco o negro.
Código
hexadecimal
11. sta vez, asegúrese de anotar en un pedazo de papel el número hexadecimal del
color llamado el número HTML. Después de que haya anotado el color y el
código, haga clic en Aceptar.
12. Para dibujar un rectángulo usando los colores seleccionados, posesione su cursor
sobre la página donde desea que comience la imagen. Haga clic y arrastre el
cursor para crear la forma. Si hace un error, use el botón Deshacer o apriete la
clave Borrar en su teclado.
13. Repita los pasos 10 a 12 para dibujar rectángulos adicionales asegurándose de

anotar los colores que seleccionó. Es conveniente superponer los rectángulos a
medida que los dibuja, esto le facilitará ver como se relaciona cada color como
parte de su diseño.
56
14. Si no le gusta alguno de los colores que haya escogido y desea borrar un
rectángulo, seleccione la herramienta Objeto Vectorial de la paleta Barra de
Herramientas.
Haga clic sobre el objeto que Usted quiere borrar y apriete la clave Borrar sobre
el teclado o vaya a Seleccionar Quitar selección.
15. Cuando esté satisfecho con los colores escogidos, guarde la imagen en el formato
de Paint Shop Pro. Vaya al Archivo y seleccione Guardar Como o apriete F12 en
el cuadro de diálogo Guardar Como, haga doble clic sobre la carpeta Proyecto
Web XX para abrirla. Nombre el archivo coloresXX.psp ( (las XX representan
sus iniciales). Haga clic en el botón Guardar.
16. Abra su Guía de Estudiante/Carpeta en la hoja de datos llamada “Colores y

Códigos.” Anote los colores finales y los códigos hexadecimales en la hoja de
datos.
17. Cuando haya terminado la anotación de los colores, haga clic en el menú Archivo
y seleccione Salir.
Una vez que haya salido del software, haga clic sobre la flecha Siguiente para
regresar a la actividad.
57
Instrucciones: Hacer un Logotipo

Debe de tener Paint Shop Pro en su pantalla. Si no está, haga clic sobre el botón
Ejecutar una aplicación y escoja Paint Shop Pro en el menú. Siga las siguientes
1. La interfase de Paint Shop Pro deberá estar abierta en su pantalla, si aparece el

Consejo del Día en el cuadro de diálogo, haga clic en el botón Cerrar para
removerlo.
2. Para abrir un nuevo archivo, haga clic sobre Archivo. Cuando se abra el cuadro
del diálogo Nueva Imagen, fije las dimensiones de la Imagen a 700 píxeles para
ambos la altura y el ancho. La resolución deberá ser 72.000 píxeles por pulgada.
Escoja el blanco como color de fondo. Esta vez necesitará la característica
antiarrugas la cual es disponible para imágenes de 24-bits. Usted debe de haber
seleccionado los colores de una paleta limitada para poder fijar la profundidad
del dígito binario a 16.7 millones de colores (24 bit). Haga clic sobre Aceptar.
3. Para dibujar un objeto, seleccione la herramienta Creando Formas Predefinidas

en la paleta Barra de Herramientas.
4. Busque la paleta Opciones de la Herramienta en su área de trabajo (o ábrala

desde la Ventana de Paleta de Configuración en la barra de herramientas).
Haga clic en la figura Seleccionar herramienta y aparecerá menú descolgable.
Haga clic en Formas y seleccione Triángulo de la lista. Asegúrese que la opción
Guardar estilo no ha sido marcada pero si marque ambos opciones el
Antiarrugas y el Crear como vector. Su paleta Opciones de la Herramienta
deberá lucir así:
Ventana Paleta de Configuración
58
5. Asegúrese que el estilo en primer plano o contorno sea fijado en negro. Para
fijar el estilo en primer plano o contorno, mueva el ratón sobre el selector
Estilo en Primer Plano o Contorno en el Recuadro de Estilos Activos. Cuando
el cursor cambie a un gotero, haga clic en el ratón. Aparecerá el cuadro de
diálogo Seleccionar Color de la Paleta. Seleccione el cuadro negro que
aparece en la parte de arriba de la paleta en la esquina derecha. Haga clic
en Aceptar.
6. Para fijar el color de relleno, mueva su ratón sobre el selector Color de

Relleno en el Recuadro de Estilos Activos. Haga clic en el ratón cuando el
cursor cambie a un gotero. Aparecerá el cuadro de diálogo Color. Busque el
cuadro del código HTML en la parte baja del cuadro de diálogo y escriba el
número hexadecimal de su color mediano. Haga clic en Aceptar.
Cuadro de
código HTML
59
7. Dibuje un triangulo usando los colores seleccionados. Haga clic y arrastre el

cursor para crear una forma. Si hace un error, use el botón Deshacer o apriete la
clave Borrar en su teclado.
NOTA: Si comete un error y desea mover un objeto o desea borrarlo

después de haberle hecho clic al ratón sobre cualquier parte en la
página de trabajo, seleccione la herramienta Objeto Vectorial en la
paleta de herramienta.
Haga clic sobre el objeto que desea mover. Puede mover el

objeto arrastrándolo con el ratón. O si desea borrar el objeto,
haga clic en el objeto en la herramienta Selección Objeto
Vector y apriete la clave Borrar en su teclado o vaya a Editar
y seleccione Quitar selección.
8. Seleccione la herramienta Creando Formas Predefinidas, haga clic sobre el menú

descolgable en la Herramienta de Opciones y seleccione Rectángulo de la lista.
Dibuje un rectángulo usando el color oscuro para el relleno y negro para el estilo
de primer plano o contorno. Superponga el rectángulo encima de la parte baja
del triangulo. Su imagen deberá lucir así:
Dos Formas Dibujadas
60
9. Seleccione la herramienta Creando Formas Predefinidas. Haga clic en el menú

descolgable en la paleta Herramienta de Opciones y seleccione “Sol3” de la lista.
Dibuje un sol usando su color claro para el relleno y negro para el estilo de
primer plano o contorno. Superponga el sol encima del triángulo. Su imagen
deberá lucir así:
Tres Formas Dibujadas
10. Ahora, agregue el nombre “Utilidad.net” a su logotipo. Primero, haga clic sobre
la Flecha de Permutar (también es llamada Intercambio Estilo) para reversar el
relleno y el estilo de primer plano o contorno. Esto fijará su texto con un color de
relleno en negro y el color claro será el estilo de primer plano o contorno.
Flecha de
Permutar
61
11. Busque el cuadro de Bloqueo de colores en el panel de Recuadro de Estilos

Activos, haga clic dentro del cuadro para prevenir que los colores cambien
mientras está trabajando con la herramienta de Texto.
Cuadro
bloqueo
de color
12. Seleccione la herramienta Texto en la paleta Barra de Herramienta. Asegúrese

de que el cursor luzca así:
Haga clic con el ratón en cualquier lugar sobre el fondo blanco de la página.
13. Cuando abra el cuadro de diálogo Colocar Texto, fije el nombre de la fuente en
Arial y el tamaño en 48 y seleccione Vector y Antiarrugas en la sección Crear
Como.
Panel
para
colocar
el texto
Cuadro de Diálogo Colocar Texto
62
14. En el panel Para Colocar Texto, escriba “utilidad.net”. Haga clic en Aceptar.
15. Posesione su texto sobre el rectángulo. Para mover el texto, seleccione la

herramienta Objeto Vectorial en la paleta Barra de Herramienta. Haga clic
sobre el objeto texto. Usted puede mover el objeto encima del rectángulo
arrastrándolo con su ratón. Su imagen lucirá así:
Logotipo con el Texto Agregado
16. Guarde el archivo en el formato nativo de Paint Shop Pro. Vaya al Archivo y
seleccione Guardar Como o apriete F12. En el cuadro de diálogo Guardar Como,
asegúrese que la carpeta del Proyecto Web XX esté abierta o haga doble clic
sobre la carpeta Proyecto Web XX para abrirla. Nombre este archivo logoXX.psp
(las XX representan sus iniciales). Haga clic en el botón Guardar.
17. Ahora, puede exportar la imagen como una Forma Predefinida la cual puede
usar en cualquiera de sus páginas web. Primero, agrupe los objetos en su
logotipo. Seleccione la herramienta Objeto Vectorial para ver el contenido del
menú. Escoja Seleccionar Todo, haga clic y en el botón derecho y escoja Grupo.
63
18. Para asignarle un nombre al grupo, busque la Paleta de Capas en su área de

trabajo.
Paleta de
capas
Paleta
vector
19. Haga doble clic sobre la capa vector llamada Capa 1. El cuadro de diálogo Las
Propiedades de Capas se abrirá. En el cuadro Nombre, escriba “logotipoXX” (las
XX representan sus iniciales). Haga clic en Aceptar.
Cuadro para el
nombre
Propiedades de la Capa
64
20. Para exportar la forma, vaya a Archivo y seleccione Exportar, aparecerá a la

derecha un menú desplegable, seleccione Forma. Usted verá una señal de que
sólo exportará los objetos seleccionados, haga clic en Aceptar. Cuando se abra el
cuadro de diálogo Biblioteca de Exportación de Formas, escriba “logotipoXX” (las
XX representan sus iniciales) en el cuadro del Archivo Entre el Nombre. Haga
clic en Aceptar.
Para usar su logotipo como una Forma Predefinida, abra un nuevo archivo. Esto es
sólo una prueba, y no hay necesidad de cambiar la configuración del documento.
Seleccione la herramienta Formas Predefinida y haga clic, el menú descolgable en la
paleta Opciones de Herramientas y seleccione de la lista “LogotipoXX”. Haga clic en
el cuadro Retener Estilo. Dibuje su logotipo en al área de trabajo.
21. Cuando haya dibujado exitosamente su logotipo, vaya a Archivo y seleccione

Salir. No hay necesidad de guardar este nuevo documento. Haga clic en No
cuando se abra la venta Guardar Cambios.
65
Instrucciones: Encabezamiento
Deberá tener a Paint Shop Pro en su pantalla. Si no, haga clic en el botón Ejecutar
una aplicación y escoja Paint Shop Pro en el menú. Siga las instrucciones a
continuación para completar esta actividad.
1. La interfase de Paint Shop Pro deberá estar abierta en su pantalla, si no, el

cuadro de diálogo Consejo del Día se abrirá, haga clic en el botón Cerrar para
removerlo.
2. Para abrir un nuevo archivo, haga clic en Archivo y seleccione Nuevo. Cuando
aparezca el cuadro de diálogo Nueva Imagen, fije las Dimensiones de la Imagen
a 600 píxeles para el ancho y 300 píxeles para la altura. La resolución deberá
ser 72 píxeles por pulgada. Escoja el transparente como el color de fondo. Esta
opción hará que el fondo del área de trabajo sea de color gris con un patrón de
tablero blanco la cual le permitirá que la imagen se mezcle con el fondo de su
sitio web más adelante. La profundidad del dígito binario puede fijarse en 16.7
millones de colores (24 bits). Haga clic en Aceptar.
3. Seleccione la herramienta Texto de la paleta Barra de Herramienta. Haga clic

en cualquier parte de la página. Cuando se abra el cuadro de diálogo Colocar
Texto, ponga la fuente en Arial y el tamaño en 72 y seleccione Vector y
Antiarrugas en la sección Crear Como. Coloque las dos áreas de Fondo y Relleno
en los colores de su gusto. Haga clic en Entrar el Texto Aquí y escriba el nombre
de su organización. Haga clic en Aceptar.
4. Si Usted desear mover o redimensionar el texto, use la herramienta Objeto

Vectorial para seleccionar el objeto. Entonces, Usted puede mover o
redimensionar el objeto.
5. Para convertir el texto en objetos individuales vector, vaya a Objetos, seleccione

Convertir Texto a Curvas y escoja Como Formas de Carácter en el menú
desplegable.
6. Haga clic fuera del cuadro del texto para desactivar el objeto o vaya a Selecciones
y escoja Seleccionar Ninguno.
7. Seleccione la herramienta Objeto Vectorial y haga clic sobre cualquiera de las

letras. Cuando el texto sea fijado como formas de carácter, cada letra individual
puede ser manipulada por separado. Ahora puede mover o redimensionar
cualquiera de las letras sobre la página. Tenga en mente que este es su
encabezamiento y debe ser legible.
66
Objeto Vector Usado sobre un Carácter
8. Para hacer más ediciones propiedades vectoriales en el texto, use la herramienta

Objeto Vectorial para marcar cualquiera de las letras. Busque la paleta
Opciones de Herramientas y haga clic sobre Editar Nodo.
Editar Nodo
Ventana de las Opciones de las Herramientas
9. La letra que haya seleccionado le mostrará los puntos individuales junto con el
camino afuera del objeto. Usted puede mover y expandir cualquiera de los
puntos para crear una nueva letra. Experimente con estos puntos pero recuerde
de mantener el texto legible.
NOTA: Para salir del modo Editar Nodo, haga clic fuera
del objeto para ver los cambios o apriete Ctrl Q. Usted
también puede apretar Esc para salir sin hacer ningún
cambio.
67
10. Guarde este archivo en el formato nativo en Paint Shop Pro. Vaya a Archivo y
seleccione Guardar Como o apriete F12. En el cuadro del diálogo Guardar Como,
asegúrese de que la carpeta Proyecto Web XX esté abierta o haga doble clic sobre
la carpeta Proyecto Web XX para abrirla. Nombre este archivo “headerXX.psp”
(las XX representan sus iniciales). Haga clic en el botón Guardar.
11. Vaya a Archivo y seleccione Salir.
68
Actividad 4 – Creación de una Cuadrícula de Página
Objetivo
habilidades para completar el dibujo de su sitio web y optimizar gráficos para su
sitio web.
Usted podrá:
• dibujar una cuadrícula de página aplicando los principios del diseño.

• reducir la resolución de los gráficos web.
• ensayar y aplicar el formato apropiado para las imágenes.
• cambiar de tamaño, cortar y alterar gráficos.
• aplicar la transparencia a la imagen GIF
69
Instrucciones: Dibujos en una Cuadrícula de Página

Durante este proceso, Usted pintará un dibujo miniatura como una cuadrícula de
página para su sitio web. Cuando esté diseñando los dibujos, recuerde que esta
actividad es una combinación de creatividad y función. Mantenga presente que el
propósito de una página bien diseñada es de que sea útil.
1. Empiece creando una área visible para el web en el papel de gráfico. La misma
deberá ser de 640 x 460 píxeles o aproximadamente 8 ¾ pulgadas x 6 ¼
pulgadas. (22.5 cm x 16 cm). Recuerde que esta es el área de la página que
verán primero sus usuarios, los elementos más importantes de la página deberán
de estar incluidos aquí. Sus visitantes se desplazarán para poder verlo todo
fuera de esta página.
2. Refiérase a la hoja de datos llamada “Elementos” y Herramientas de Gráfico” en

el Tema 2, Actividad 2 de su Guía del Estudiante/Carpeta. Entonces, usando el
anteproyecto y la lista de componentes que creó en la Actividad 2, decida cual de
los elementos y herramientas de gráfico desea usar.
3. Marque los elementos sobre el papel de gráfico. Dibuje la forma básica de cada
elemento. Use figuras sencillas, tales como, cuadros, rectángulos y círculos como
perfiles para su diseño. Siga las líneas del papel de gráfico para que mantenga
los dibujos alineados.
4. Tome nota de los colores que usará dentro de las figuras que ha pintado. Use el
código hex para los colores que ha seleccionado en la última actividad tal como
sea necesario.
5. Haga un perfil de las áreas que va a usar para un gráfico o ilustración. Dibuje
éstas figuras cuidadosamente ya que necesitará llegar a una aproximación de las
dimensiones físicas de las imágenes. Use la hoja de datos en el Tema 3,
Actividad 2 de su Guía del Estudiante/Carpeta llamada “Tome Algunas
Fotografías” y “Organice los Gráficos” para asignarle los sitios a las imágenes
que seleccionó para su lista de componentes. Ponga una letra “X” grande dentro
de la figura. Marque los gráficos como fotografías, logotipos o como un recorte de
arte. Incluya espacio para el nombre del archivo para ser añadido más tarde. .
6. El siguiente paso es dibujar los titulares, subcabezas y el área del texto. Use
letras de imprenta grande donde sea necesario, reduciendo el tamaño si fuera
necesario. Para la letra de imprenta pequeña, use una serie de líneas rectas
como marcadores de las palabras. Usted necesitará marcarlas con el texto
exacto o una descripción del contenido (ver el gráfico).
70
ÁREA VISIBLE DEL WEB
TITULAR
Boletín
Subcabeza
ARTÍCULO
PRINCIPAL
7. Tome nota de algunos elementos adicionales que aparecerán en la página.

Escriba notas dentro de las figuras dibujadas para indicar los principios de
diseño a aplicar. Usted deseará dibujar líneas delgadas y claras para marcar las
alineaciones y proximidad. Asegúrese de observar con cuidado el uso del espacio
blanco de la página.
8. Marque el punto focal de la página usando un perfil oscuro para el contraste.
9. Cuando haya terminado la primera página, use su anteproyecto para crear una
cuadrícula de página para las páginas adicionales de su sitio web.
10. Observe de cerca el uso de color en el sitio web como una manera de crear
repetición. Marque el cambio de color a través de la página.
11. Use el método de escaneo visual en su propio sitio web. Analice las formas
básicas y los colores de las páginas. Después, mire de cerca como colocar los
gráficos y el texto. Finalmente, lea los titulares, subcabezas y el texto.
12. Cuando quede satisfecho con los dibujos miniatura, debe de copiarlos encima de
la hoja de datos de la “Cuadrícula de la Página” en su Guía del
Estudiante/Carpeta.
Cuando haya completado estos dibujos, haga clic sobre la flecha Siguiente para
71
Instrucciones: Optimizando los Gráficos

En este procedimiento, Usted preparará las imágenes y fotografías que ha
seleccionado para su sitio web. Dado a que Usted ha escogido imágenes de la
colección de clip art y ha tomado sus propias fotografías, deberá decidir cual de las
instrucciones va a usar para cada imagen.
Usted encontrará las instrucciones para redimensionar las imágenes o cortar y

remover los ojos rojos de cualquier fotografía que haya tomado.
Usted anotará todas las veces que haya descargado las imágenes formateadas y
los nombres de los archivos de las mismas. Abra su Guía del Estudiante/Carpeta
en la hoja de datos llamada “Archivos Comprimidos y Nombres”
Finalmente, Usted podrá ver con anticipación las imágenes en un navegador web
después de haberlas formateado. Su deseo deberá ser que las imágenes
seleccionadas se vean bien cuando sean descargadas en el tamaño más pequeño
posible. Mantenga una copia del archivo original en su carpeta “Proyecto Web
XX” y no haga ningún cambio a la imagen en caso de que desee comenzar de
nuevo. Lea las instrucciones y decida cual de las características va a escoger
para cada una de las imágenes del sitio web.
72
Abra el Programa y Navegue a Través de Sus Imágenes

1. Paint Shop Pro deberá aparecer en su pantalla. Si no, haga clic sobre el botón
Ejecutar una aplicación y escoja Paint Shop Pro en el menú. Si aparece un
cuadro de diálogo con el Consejo del Día, haga clic en el botón Cerrar para
removerlo.
2. Para ver las imágenes seleccionadas para su sitio web, vaya a Archivo y
seleccione Examinar. En el tablero a la busque la carpeta “Proyecto Web XX”,
haga doble clic para abrirla y las imágenes miniatura que guardó anteriormente
deberán aparecer visibles en el tablero de la derecha. Haga doble clic sobre una
de las imágenes para abrirla.
3. A medida que va trabajando con sus imágenes en esta actividad, mantenga la

ventana del Navegador abierta en el fondo o la puede minimizar cuando
necesite.
4. Trabajando con un gráfico a la vez, decida cual de las siguientes instrucciones

necesitará para cada imagen.
NOTA: Si está trabajando con clip art, probablemente

empezará con las instrucciones llamadas
“Redimensionando una Imagen”. Entonces, pase a los
pasos de formateo. Si Usted está trabajando con
fotografías, deberá de cortar o remover los ojos rojos si es
necesario, y después redimensione las dimensiones de la
imagen antes de formatearla. Se le sugiere que use la
característica de Vista Previa en el Navegador para
verificar la compresión final y el formato web para todas
las imágenes.
5. Dependiendo de lo que ha escogido para cada imagen, siga las siguientes

73
Recortar una Imagen

(Los cambios requeridos para sus fotografías son parte de la hoja de datos que
coleccionó en la Actividad 2, verifique su Guía del Estudiante/Carpeta por la hoja de
datos llamada “Tome Algunas Fotografías”)
1. Con la imagen abierta y active sobre su área de trabajo, seleccione la

herramienta Recortar en la paleta Barra de herramienta.
2. Arrastre un rectángulo alrededor de la parte de la imagen que desea mantener.

Toda al área fuera del rectángulo será removida. Redimensione o mueva el
rectángulo hasta que rodee sólo el área que desea mantener.
3. Vaya a Imagen y seleccione Recortar.
Vaya a la próxima sección necesaria para optimizar esta imagen en particular.
Para Suprimir el Ojo rojo de una Fotografía

(Los cambios requeridos para su fotografía son parte de la hoja de datos que
coleccionó en la Actividad 2, verifique su Guía del Estudiante/Carpeta por la hoja de
datos llamada “Tome Algunas Fotografías”)
Con la imagen abierta y activa en su área de trabajo, vaya a Efectos y seleccione

Tratamiento de Fotografías, y después escoja Suprimir Ojos rojos.
Cuando se abra el cuadro de diálogo Suprimir Ojos rojos, aparecerá un cuadro de

vista previa en la parte de arriba. A la izquierda es un ejemplo de cómo se ve
actualmente y a la derecha muestra como se verá la imagen después de las
correcciones.
74
Cuadro vista
previa
Método
4. Debajo de los cuadros de vista previa, encontrará el área para seleccionar los
métodos a utilizar. Para hacer la corrección fácil, escoja cualquiera de los dos,
Ojo Humano Automático o Ojo Animal Automático dependiendo del sujeto que
tenga en la fotografía.
5. El cursor cambiará y se verá como una mirilla cuando es posicionado en el

cuadro de vista previa a la izquierda. Ponga el cursor sobre el área roja del
primer ojo y haga clic en el botón izquierdo del ratón. El ojo rojo es seleccionado
y aparecerá un ejemplar corregido en el cuadro de vista previa a la derecha.
6. Seleccione el rojo sobre el segundo ojo y haga clic en Aceptar.
Vaya a la próxima sección para optimizar esta imagen en particular.
75
Para Redimensionar una Imagen

La resolución de cada imagen deberá ser 72 píxeles por pulgada. (Ésta resolución o
píxeles por pulgada del clip art forma parte de la información que Usted recopiló in
la Actividad 2. Cuando necesite esta información, verifique su Guía del
Estudiante/Carpeta por las hojas de datos llamadas “Organice los Gráficos”) Si
algunas de sus imágenes han sido fijadas más de 72, siga las instrucciones del paso
1 hasta el 7. Si la resolución de su imagen ya es de 72 píxeles por pulgada, sáltese
el paso 3 (Todas las fotografías tienen una resolución de 72 píxeles por pulgada,
para estas imágenes sáltese el paso 3).
1. Con la imagen que desea redimensionar abierta y activa en su área de trabajo,

vaya a Imagen y seleccione Redimensionar.
2. En la parte baja del cuadro de diálogo Redimensionar, asegúrese de que el

cuadro Mantener ratio de aspecto:: sea chequeado. (No le haga cambios a los
números que aparecen al lado de este cuadro porque su imagen puede
distorsionarse.)
3. Haga clic sobre el botón Tamaño real/ de impresión y fije la resolución a 72

píxeles por pulgada.
4. Usando la cuadrícula de página en su Guía del Estudiante/Carpeta, coloque

cualquiera de los dos, el ancho o altura para que la imagen quepa en su sitio
web. (Tal vez necesite hacer una aproximación del tamaño, ya que la imagen se
reducirá proporcionalmente de acuerdo al aspecto del ratio de clip art.).
Experimente con el tamaño hasta que consiga algo que funcione bien en su
página web.
5. Haga clic en Aceptar.
6. Si la imagen queda muy pequeña para que sea fácil de leer en su monitor, use la
característica acercar para ampliarla. Haga clic en la herramienta Acercar en la
paleta de la Barra de Herramienta.
7. Coloque su cursor sobre la imagen y haga clic a la izquierda de la imagen para

ampliarla o haga clic a la derecha para reducirla.
Si es necesario vaya a la próxima sección para optimizar esta imagen en particular.
76
Para Formatear Imágenes GIF

Antes de comenzar con los pasos finales para formatear una imagen como un GIF,
Usted debe de saber la profundidad de color de la imagen. (La profundidad del
píxel/colores que puede mostrar la imagen es parte de la información que recopiló en
la Actividad 2. Cuando necesite esta información, verifique su Guía del
Estudiante/Carpeta por la hoja de datos llamada “Organice los Gráficos”). Esto
tiene que ser 256 o menos para una imagen formateada como GIF. Si la imagen usa
más que la paleta indexada, necesitará reducir la paleta a 256 para controlar el
motivo del tramado o puede escoger para formatear la imagen como JPEG.
Recuerde que el formato GIF trabaja mejor para las áreas de color uniforme.
1. Con la imagen para ser formateada, abierta y activa en su área de trabajo, vaya
a Colores y seleccione Contar los Colores. (Este le dará el número exacto de
colores usados en la imagen. Usando el número pequeño cuando formatea la
imagen reducirá el tamaño de su archivo aún más). Anote el número y los
colores en la imagen sobre un pedazo de papel.
2. Mire de cerca la imagen y decida si la misma necesitará que se le aplique una

transparencia. (Algunas de las imágenes vectoriales en la colección de CD ya
tienen aplicada una transparencia Si ve un área marcada en gris o blanco
alrededor de una imagen, esta tiene un fondo transparente. Si la imagen tiene
un fondo blanco o sólido, debe decidir en este momento si desea aplicarle la
transparencia)
3. Vaya a Archivo y seleccione Exportar, entonces, escoja Optimizar GIF.
NOTA: Cuando se abra la ventana de diálogo

Optimizador GIF, verá cinco fichas en el medio del
cuadro. El cuadro de diálogo Optimizador GIF aparecerá
con la ficha Transparencia seleccionada.
En la parte de arriba del cuadro de diálogo Optimizador
GIF, hay dos ventanas de vista previa. La ventana de la
izquierda es un ejemplo de cómo se ve la imagen en ese
momento y la ventana de la derecha es como lucirá la
imagen después de los cambios. Use estos tableros para
la vista previa de la imagen a medida que trabaja con ella
durante este proceso.
4. Seleccione la transparencia que desea escoger primero. Si su imagen tiene

aplicada una transparencia, escoja Imágenes existentes o capas de
transparencia. Entonces, pase al paso 6.
77
5. Si necesita que su imagen tenga aplicada una transparencia, seleccione Áreas

que coinciden con este color. Haga clic sobre el cuadro de color al lado de la
selección. En el cuadro de color que aparece, seleccione el color en la imagen que
desea tenga transparencia. Haga clic en Aceptar.
6. Como una opción, Usted puede ajustar la escala de tolerancia de color sobre la
transparencia de la pantalla. Este factor indica como deben de acercarse la
coincidencia de los colore en el cuadro. Entre más alto sea el número, más
amplia es la gama de colores.
Opciones de Transparencia
7. Haga clic en la ficha Colores en el cuadro al lado de, ¿Cuantos colores desea?
Seleccione el número de colores para la imagen. Este número tendrá que ser 256
o menos. Usted puede reducir el tamaño del archivo aún más escribiendo el
número de colores de sus notas. (El tamaño del archivo se encuentra en el
tablero de vista previa a la izquierda)
8. Como una opción, Usted puede ajustar la cantidad de tramado que ocurra
cuando se le quitan los colores. Haga clic en las flechas al lado de ¿Cuanto
tramado necesita? Para cambiar el factor tramado. Entre más amplio sea el
factor (entre 1 a 99), más es el tramado. Pero entre más alto sea el porcentaje de
tramado, el tamaño del archivo será más grande. Use el cuadro vista previa
para determinar la posición de su imagen.
78
Opciones Reducción de Color y Tramado
9. Haga clic en la ficha Transmitir, y anote las cuatro velocidades del modem en su
Guía del Estudiante.
10. Cuando esté satisfecho con la posición de la imagen, haga clic en Aceptar.
11. Si esta es la primera imagen que está formateando, cree una carpeta nueva para
guardar todo su trabajo o pase al paso 6. Con el cuadro de diálogo
Guardar
como abierto, haga clic en el botón Crear Una Nueva Carpeta. Escriba
“Proyecto Final XX” (la XX representan sus iniciales) Apriete Intro.
12. Haga doble clic sobre la carpeta Proyecto Final XX para abrirla. En la parte baja
del cuadro de diálogo Guardar Como, haga clic en el cuadro: nombre del Archivo.
Escriba un nuevo nombre para su imagen. Asegúrese de colocarle un nombre
corto al archivo y de usar sólo letras y números. Termine el archivo con “.gif”.
Haga clic en Guardar.
79
13. Cierre la imagen original *.psp marcando la X en la parte de arriba de la esquina

derecha. Si aparece un cuadro de diálogo preguntándole si desea guardar los
cambios, seleccione No. Y no guarde ninguno de los cambios hechos a la imagen
original.
14. Si es necesario, maximice la ventana del Navegador, y seleccione la próxima

imagen de su carpeta “Proyecto Web XX”. Siga las recomendaciones para ésta
imagen dependiendo de sus expectativas sobre los resultados o si ésta fue la
última imagen para su proyecto, vaya a las instrucciones llamadas “ Vista Previa
en un Navegador Web”
Para formatear Imágenes JPEG

Recuerde que el formato JPEG funciona mejor para imágenes que son fotográficas o
contienen cambios sutiles en el color.
1. Con el nombre que desea formatear, abierto y activo en su área de trabajo vaya a
Archivo y seleccione Exportar, después escoja Optimizador JPEG.
NOTA: Cuando se abra el cuadro de diálogo Optimizador

JPEG, verá tres fichas en el medio. El cuadro de diálogo
Optimizador JPEG aparecerá seleccionada la ficha Calidad .
En la parte superior del cuadro de diálogo Optimizador
JPEG, hay dos ventanas de vista previa. La ventana de la
izquierda es un ejemplo de cómo se ve la imagen al momento
y la ventana de la derecha muestra como se verá la imagen
después de que se le hagan los cambios. Use los tableros
para la vista previa de la imagen a medida que trabaja con la
misma durante este proceso.
2. Debajo de la ficha Calidad en el cuadro de diálogo Optimizador JPEG, haga clic

sobre la flecha al lado de Fijar valor de compresión para cambiar el factor de
compresión. Entre más grande sea el factor (entre 1 y 99), más será la
compresión. Pero entre más comprimida esté la imagen más baja será su
calidad. Use el tablero vista previa a la derecha para determinar la mejor
posición para su imagen.
3. Haga clic en la ficha Transmitir, y anote las cuatro velocidades del modem en su
Guía del Estudiante.
80
Cuando este satisfecho con la posición de la imagen, haga clic en Aceptar.
4. Si esta es la primera imagen que está formateando, cree una carpeta nueva para
guardar todo su trabajo o vaya al paso 6. Con el cuadro de diálogo Guardar
Como abierto, haga clic en el botón Crear Nueva Carpeta. Escriba “Proyecto
Final XX” (las XX representan sus iniciales) Apriete Intro.
5. Haga doble clic sobre la carpeta Proyecto Final XX para abrirla. En la parte baja
del cuadro de diálogo Guardar Como, haga clic en el cuadro: Nombre del Archivo.
Escriba un nuevo nombre para su imagen. Asegúrese de escribir un nombre
corto y de usar letras y números. Termine el nombre del archivo con “.jpg”.
Haga clic en Guardar.
6. Cierre la imagen original *.psp y haga clic en la X en la parte de arriba en la

esquina derecha. Si aparece un cuadro de diálogo preguntándole si desea
guardar los cambios, seleccione No. Y no guarde ninguno de los cambios hechos
a la imagen original.
7. Si es necesario, maximice la ventana del Navegador, y seleccione la próxima

imagen de su carpeta “Proyecto Web XX”. Siga las recomendaciones para esta
imagen dependiendo en sus expectativas sobre los resultados o si ésta fue la
última imagen para su proyecto, vaya a las instrucciones llamadas “Vista Previa
en un Navegador Web”.
81
Vista Previa en un Navegador Web

1. Abra la imagen que desea ver. Si es necesario, maximice la ventana del
Navegador, y haga doble clic en la carpeta Proyecto Final XX para abrirla.
Escoja la imagen que desea ver en esta carpeta. Asegúrese de que está abriendo
la imagen optimizada y no el archivo original *.psp.
2. Vaya a Ver y seleccione Vista Previa en un Navegador Web. Cuando se

abra el cuadro de diálogo Vista Previa en un Navegador Web, seleccione el tipo
de archivo de la imagen en la sección Formatos:
TIPO DE
FORMATO
DEL
ARCHIVO
COLOR DE FONDO
Cuadro de Diálogo Vista Previa en un Navegador Web
Haga clic en el cuadro de color que está al lado de la sección Color de Fondo: En
el cuadro color, entre uno de los números del código hexadecimal de los colores
seleccionados en su Guía del Estudiante/Cartera en la hoja de datos llamada
“Colores y Códigos”. Haga clic en Aceptar.
82
CÓDIGO
HEXADECIMAL
Selección de Color de Fondo
3. Haga clic en un navegador para seleccionar la vista previa de su imagen. Haga

clic en Vista Previa en el cuadro de diálogo Vista Previa en un Navegador Web.
NAVEGADOR
WER
BOTÓN
VISTA
PREVIA
83
4. Los cuadros de diálogo Optimizador GIF o JPEG aparecerán. Como la imagen

ya ha sido formateada para el sitio web, seleccione Aceptar.
5. Se abrirá el navegador y la imagen aparecerá formateada, incluyendo

información acerca de tamaño del archivo, tiempo de transmisión y colores
usados. Después de que haya hecho una vista previa de la imagen, tome nota de
cualquier cambio que necesite hacer y cierre el navegador haciéndole clic a la X
en la parte de arriba de la esquina derecha. Si no está satisfecho como luce la
imagen en la vista previa, abra el archivo original *.psp del “Proyecto Web XX” y
empiece el proceso de optimización nuevamente.
6. Cierre el cuadro de diálogo Vista Previa en un Navegador Web haciéndole clic al

botón Cerrar.
7. Cierre la imagen haciéndole clic a la X en la parte de arriba de la esquina

derecha.
8. Repita los pasos anteriores para hacer una vista previa de todas la imagines que
desee ver.
9. Cuando haya terminado con la vista previa de sus imágenes, haga clic en el
menú y seleccione Salir.
84
Desarrollo Web Tema 4 – Fundamentos de FrontPage
TEMA 4 – FUNDAMENTOS DE FRONTPAGE
Objetivo
Cuando usted haya completado este tema, habrá usado FrontPage para crear las
bases para el sitio Web “guitarras usadas”, como ejercicio práctico, sobre esta base
se continuará desarrollando en actividades posteriores y se culminará con el diseño
de su propio sitio Web de apariencia profesional.
Revisión General
Cuando usted haya completado este tema, será capaz de usar las herramientas y
características básicas de FrontPage, para crear los cimientos de un sitio Web de
apariencia profesional, agradable a la vista. Usted estará capacitado para planear y
desarrollar las bases para un sitio Web de comercio electrónico de práctica. En el
proceso agregará consistencia y estructura al sitio Web de práctica en la forma de
bordes compartidos, barras de exploración, y texto. Este Tema lo preparará para su
proyecto final de FrontPage: la creación de su propio sitio Web de apariencia
profesional.

WYSIWYG – es la abreviatura del inglés What-You-See-Is-What-You-Get, lo cual
significa que en la forma en que la página o el sitio Web aparecen sobre la pantalla
es la forma en que se verá el producto una vez terminado. Esto es diferente a como
se trabaja con el rígido editor HTML.
Página principal – la página de entrada para un sitio Web que aparece por defecto
cuando un usuario visita el sitio. Cada sitio Web tiene una página principal.
Imagen de mapa – un gráfico que contiene uno o más objetos destacados, llamados
hipervínculos. Generalmente, estas imágenes dan pistas visuales sobre la
naturaleza del vínculo, tal como con un mapa de los Estados Unidos.
Marcos – varias áreas separadas (ventanas) que aparecen dentro de la ventana del
explorador . Un marco puede tener barras de desplazamiento, un borde, o ser
alargado o acortado.
85
Actividad 1 − Fundamentos de FrontPage
Objetivo
Cuando usted haya completado esta actividad, habrá adquirido los conocimientos
y habilidades necesarias para explicar el propósito, funcionalidad y ventajas del
uso de Microsoft FrontPage para desarrollar un sitio Web.
• Describir las características más importantes de FrontPage.

• Usar las funciones menú, barra de herramientas, y Ayuda.
• Iniciar el programa.
• Abrir y cerrar un sitio Web existente.
• Aplicar diferentes Vistas en el programa.
86
Instrucciones – Características de FrontPage

FrontPage debe estar en su pantalla. En caso contrario, haga clic en el botón
Ejecutar una Aplicación y escoja FrontPage en el menú. A continuación siga las
Si no aparece el panel Página Nueva o Tarea Web, seleccione Nuevo en el menú

Archivo y luego Página o Web.
Visualización de Página Nueva o Panel Web
Existen varias opciones para la creación de una nueva página Web en este panel.
Por ahora, usted revisará sólo algunas de ellas.
87
Plantillas
Las plantillas de construcción ayudan en el proceso de desarrollo del sitio Web. El
panel de tareas presenta una lista de varias opciones. Aquí, usted aprenderá como
usar una plantilla Web personal.
1. En el Panel de Tareas, debajo de Nuevo a partir de una plantilla, seleccione

Plantillas de sitio Web.
Aparecerá un cuadro de diálogo Plantillas de sitio Web, indicando varias

opciones de plantillas y de asistentes.
Ventana Nuevo Plantillas de Sitios Web
Antes de escoger una plantilla, deberá especificar una ubicación para su sitio
Web. A la derecha de las plantillas se ubica la sección Opciones, de la caja de
diálogo.
2. En el cajón Especifique la ubicación del nuevo Web:, haga clic después de C:\Mis
Documentos \Mis Webs\ ruta del directorio, y escriba “prueba”. (No escriba las
marcas de comillas).
NOTA: Si apareciera una ruta adicional después de C:\Mis

Documentos \Mis Webs\ ruta del directorio, lo puede borrar
y escribir "prueba".
Con esto su nuevo sitio Web quedará colocado en el directorio Prueba.
88
3. Ahora usted estará listo para escoger una plantilla. Haga doble clic en el icono
Web personal.
4. Haga clic en el icono Exploración del panel Vistas en el lado izquierdo de la

pantalla.
Automáticamente aparecerá la estructura de navegación para un sitio Web

personal, en la Vista Exploración.
Las plantillas de construcción contienen estructuras de Exploración establecidas,

adecuadas a las necesidades de cada página Web. Estas estructuras de exploración
(navegación) pueden modificarse según sus necesidades específicas.
Estructura de Exploración (Navegación)
NOTA: Usted aprenderá más acerca de las diferentes Vistas

FrontPage en la segunda mitad de esta actividad.
5. Haga clic en el menú Archivo y seleccione Cerrar Web.
89
Asistentes
Al igual que las plantillas, los asistentes ayudan en el proceso de desarrollo del sitio
Web. Aquí usted aprenderá como usar un Asistente para Presencia Corporativa que
lo ayudará a crear un sitio Web corporativo.
1. En el Panel de Tareas, debajo de Nuevo a partir de una Plantilla, seleccione

Plantillas de sitios Web.
Aparecerá un cuadro de diálogo Plantillas de sitio Web, indicando varias

opciones de plantillas y de asistentes
2. En el cajón especifique la ubicación del nuevo Web:, haga clic después de C:\Mis
Documentos\Mis Webs\ ruta del directorio, y escriba "Corporativo". (No escriba
las marcas de comillas)
3. Haga doble clic en el icono Asistente para Presencia Corporativa.
Aparecerá una ventana Asistente para Web de presencia corporativa.
Ventana Asistente para Web de presencia corporativa
Las ventanas Asistente para Web le harán una serie de preguntas acerca de que
elementos desea usted en su sitio Web corporativo. Las ventanas incluyen
elementos tales como la página principal, tabla de contenidos, y un formato de
retroalimentación.
90
4. Lea la introducción y continúe con todas las ventanas del asistente Web. En cada
ventana lea la información, examine las selecciones, y acepte los
predeterminados (por defecto). (No se preocupe si usted no entiende todas las
selecciones). Haga clic en Siguiente para continuar con la siguiente ventana.
Para retornar a la ventana anterior, haga clic en Atrás.
5. Haga clic en escoja un tema Web, para ver algunas muestras de temas.
6. Cuando usted haya llegado a la última ventana mostrada aquí, haga clic en
Finalizar.
Al hacer clic en Finalizar, le plantea una serie de tareas que listan la condición
de cada página que usted escogió para ser incluida.
Última ventana del asistente
7. Cuando se abre la página Web, haga clic en el icono Exploración del panel Vistas
al lado izquierdo de la pantalla.
Aparecerá una estructura de navegación del sitio Web corporativo con todas las
páginas que usted indicó anteriormente. Se verá más o menos como la pantalla
mostrada aquí.
91
Estructura de Exploración del Sitio Web
8. Haga doble clic en cada barra de exploración para ver que información se puede
incluir en una página Web. Tome nota como cada vez que usted hace doble clic
sobre una barra o una caja de navegación (exploración), se agrega una etiqueta a
su sitio Web, lo que representa otra página.
9. Haga clic en el menú Archivo y seleccione Cerrar la Web.
Vaya a la página siguiente para continuar la actividad.
92
Abriendo un Sitio Web

Ahora usted abrirá un sitio Web que ya se ha iniciado, pero que está incompleto.
1. Seleccione Abrir del menú Archivo y haga doble clic en la carpeta En Progreso de
la lista en el cuadro de diálogo Abrir Archivo. (En Progreso debería estar bajo
C:\Mis Documentos\Mis Webs\ ). Luego, haga doble clic en el archivo nombrado
como index.htm.
Menú Archivo
NOTA: Si el sitio Web ha sido recientemente guardado,

usted también lo puede abrir seleccionando Webs
Recientes desde el menú Archivo.
La página principal para el sitio Web En Progreso se abre en la vista Página,

como se muestra aquí.
93
Página principal
Este es un ejemplo de sitio Web de un distribuidor ficticio de carros usados, que

probablemente puede recibir algunas mejoras. Por ejemplo, si usted desea
ocultar los bordes de alrededor de los cajones donde aparecen los gráficos . En
esta página usted puede editar texto o imágenes usando opciones de menú y de
barra de herramientas.
2. Seleccione la palabra "Esta" en la oración que aparece abajo de los gráficos. Haga
clic en el botón Cursiva de la caja de diálogo Fuente, sobre la barra de
herramientas Formato. La palabra aparecerá en cursiva.
3. Nuevamente haga clic en el botón cursiva para cambiar la palabra de fondo a

texto normal.
94
Explorando las Barras de Herramientas y los Menús
Mientras la Página principal está abierta, es una buena oportunidad para aprender
acerca de algunas de las barras de herramientas y menús.
1. Seleccione Barras de Herramientas del menú Ver. Del menú descolgable,

seleccione cualquier barra de herramientas que desee ver, y haga clic en el ratón.
2. Mueva su cursor sobre los botones en las barras de herramientas para ver sus
descripciones desplegables. Cierre cada barra de herramientas cuando ya las
haya visto, haciendo clic sobre la X en la esquina superior derecha de cada barra.
3. Cuando haya finalizado de revisar las barras de herramientas; haga clic en cada
uno de los menús en la parte superior de la pantalla y examine alguno de los
ítems de la selección.
4. Vea las selecciones de ítems del menú y de barras de herramientas, y determine

como hacer lo siguiente:
• Hacer Negrita a una palabra o a una frase.

• Insertar una tabla con columnas y filas.
• Copiar y pegar texto.
5. Cierre cada barra de herramientas cuando usted las haya visto, haciendo clic
sobre la X en la esquina superior derecha de cada barra.
6. Vaya a su Guía del Estudiante/Carpeta y complete la hoja de datos titulada

"Características de FrontPage " en el Tema 4, Actividad 1.
95
Consiguiendo Ayuda
Ahora usted explorará algunas formas de conseguir ayuda mientras está trabajando
en FrontPage. Primero, usará el menú Ayuda en sus tres diferentes maneras de
encontrar información. Luego usará la característica contextual – sensitiva.
Menú de Ayuda: Contenidos

1. Seleccionar Ayuda de Microsoft FrontPage del menú Ayuda.
2. Aparecerá la ventana Ayuda FrontPage. (Usted puede maximizar esta ventana
si lo desea ) Si la etiqueta Contenidos no está seleccionada, haga clic sobre esa
etiqueta. En esta vista, haga clic sobre el signo más que aparece antes de un
ítem para abrir una categoría, y sobre un signo menos para cerrarlo. Cuando
aparece un signo de interrogación después de un ítem, haga clic sobre él para
acceder a la información de este ítem.
Ventana Ayuda FrontPage
NOTA: Si esta ventana no apareciera, pero usted puede

ver el Asistente Microsoft Office, haga un clic derecho
sobre el Asistente Office. Seleccione Opciones. Aparecerá
el cuadro de diálogo del Asistente Office. Sobre la etiqueta
Opción, libere “usar el Asistente Office”. Haga clic en
Aceptar. Ahora retorne al paso #1.
3. En el panel izquierdo, haga clic sobre el signo más junto al icono Ayuda
Microsoft FrontPage. Haga clic sobre el signo más, junto a la frase Diseñar
Páginas Web, y a Aplicar Formato a Texto y Párrafos.
4. Haga clic sobre el signo de interrogación, Dar formato a texto y párrafos. Sobre
la pantalla que aparecerá, seleccione el item: Aplicar formato a carácteres o
palabras individuales.
96
Aparecerá la ventana Ayuda, para este item.
Ventana de ayuda para Dar formato a texto y párrafo
5. Haga clic en cualquiera de los ítems bajo Aplicar formato a texto y párrafo, para
acceder a la información acerca del ítem.
Menú Ayuda: Asistente para ayuda

Ahora usted conseguirá ayuda con el manejo de gráficos. Con el Asistente para
ayuda, puede hacer preguntas específicas a FrontPage.
1. Haga clic sobre la etiqueta Asistente para Ayuda y escriba "agregar gráfico " en
el cuadro Qué desearía hacer? . Luego haga clic en Buscar.
2. Bajo Seleccione Tema a visualizar:, haga clic en Agregar un gráfico a una
página Web.
Aparecerá una ventana con varias opciones, en el lado derecho.
97
Pantalla de preguntas de ayuda
3. Haga clic sobre Agregar un imagen desde un archivo.
Aparecerá una ventana con la información requerida.
98
Menú de Ayuda: Índice

La característica Índice, es como usar el índice en un libro. Ahora, usted va a
utilizar esta característica para hallar como poner negrita a un texto
1. Haga clic sobre la etiqueta Índice, escriba "negrita" en la caja Escriba palabras
clave, y haga clic en Buscar.
2. En la caja Elija un tema, haga clic en Dar formato al texto.
Aparecerá una ventana con la información requerida.
Pantalla ayuda Dar formato al texto
Ayuda: Contexual-Sensitiva
1. Haga clic en la X de la esquina superior derecha de la ventana Ayuda, para
cerrarla.
2. Seleccione Qué es esto? Del menú Ayuda.
3. Cuando el cursor cambia a un signo de interrogación, haga clic sobre el botón

Negrita sobre la barra de herramientas Formato.
99
Aparecerá una caja de descripción explicando la función Negrita.
Caja de Descripción para el Botón Negrita
4. Haga clic en cualquier sitio de la pantalla para cerrar la caja de descripción.
5. Vaya a su Guía del Estudiante/ Carpeta y complete la hoja de datos titulada

"Ayuda FrontPage " en el Tema 4, Actividad 1.
6. Seleccione Salir del menú Archivo o haga clic en la X de la esquina superior

derecha para cerrar FrontPage.
NOTA: Si aparece un mensaje preguntando si desea

guardar los cambios, haga clic en NO.
Una vez que usted haya salido del software, haga clic en la flecha Siguiente para
continuar la actividad.
100
Instrucciones – Características Vistas

FrontPage deberá estar en su pantalla. Si no es así, haga clic en el botón Ejecutar
una Aplicación y seleccione FrontPage del menú. Siga las instrucciones que siguen,
Ahora usted va a ver como se visualizan las diferentes vistas en FrontPage,

trabajando con el sitio Web En Progreso.
1. Haga en el menú Archivo y seleccione Abrir. Haga doble clic en la carpeta

titulada En Progreso en la ventana Abrir Archivo. (En progreso debería estar
bajo C:\Mis Documentos\Mis Webs\). Luego haga clic sobre el botón Abrir.
NOTA: Si el sitio Web ha sido recién guardado, usted

también puede abrirlo seleccionando Webs Recientes del
menú Archivo. Si aparece una nueva página en la Vista
Página, seleccione Cerrar en el menú Archivo
2. En el panel Vistas, haga clic en el icono Carpetas y luego doble clic en el archivo
nombrado páginaprincipal.htm que aparece en la barra derecha, mostrada en
este gráfico. (Esto abre la Página principal en la vista Página.)
Archivo seleccionado páginaprincipal.htm
101
3. Cuando abre la Página principal, intercambiar entre los tres paneles de la vista
Página haciendo clic en las etiquetas Normal, HTML, y Vista Previa en la base
de la pantalla.
NOTA: Debido que el panel Vista Previa le muestra como

lucirá el sitio Web una vez publicado, esta vista puede o
no puede lucir igual como en el panel Normal. Ello
depende de como su explorador muestra sus páginas Web.
El panel HTML es donde se localiza el código para su sitio Web. Es posible editar
el código directamente aquí (pero usted no lo hará en esta actividad)
4. Haga clic en la etiqueta Normal, luego haga clic en el icono Carpetas en el panel
Vistas.
Aparecerá la vista Carpetas, como se muestra en este gráfico.
Vista Carpetas
Aquí usted verá información de archivos, tales como nombres, títulos, y tamaños.
También aparecen la fecha y hora de cualquier modificación de archivos.
102
5. Haga clic en el icono Informes en el panel Vistas.
Aparecerá la vista Informes, como se muestra en este gráfico.
Vista Informes
Esta vista proporciona información resumida acerca de cada archivo en un sitio

Web. Los cabezales de columna indican el tipo de información disponible: Nombre,
Cantidad, Tamaño y Descripción. Algunos informes importantes pueden estar bajo
Todos los Archivos, el cual lista todos los documentos en el sitio Web; Imágenes, la
cual lista todas las imágenes; y Archivos Vinculados, la cual lista todos los
documentos en los cuales existen vínculos.
103
6. Haga clic en el icono Exploración del panel Vistas
Aparecerá la vista Exploración, como se muestra en este gráfico
Vista Exploración
La vista Exploración muestra un gráfico de la estructura jerárquica, o el orden,

del sitio Web.
(Aparece una barra de herramientas de Exploración en la fila inmediata inferior
de la barra de
herramientas Formato). Desde esta vista, usted puede agregar y borrar páginas
y archivos, o
cambiar la estructura de exploración.
7. Ubique el cursor dentro del icono Página principal y haga clic derecho. Fíjese en
las selecciones del menú que aparecerá. (Haga clic en cualquier lugar fuera del
icono para cerrar el menú)
8. Haga clic en el icono Hipervínculos en el panel Vistas. (Si la vista Hipervínculos

no aparece, haga clic en el archivo páginaprincipal.htm de la Lista Carpetas
sobre la izquierda.)
Aparecerá la vista Hipervínculos, como se muestra en este gráfico.
104
Vista Hipervínculos
En la vista Hipervínculos, usted puede determinar los vínculos hacia y desde

cualquiera de sus páginas Web.
9. En la Lista Carpetas, seleccione las otras dos páginas Web haciendo clic en los
archivos que tienen una extensión .htm. Luego regrese a la vista Hipervínculos
al archivo páginaprincipal.htm.
10. Haga clic en el icono Tareas en el panel Vistas.
Aparecerá la vista Tareas, como se muestra en el gráfico.
Vista Tareas
En esta vista, usted puede asignar tareas de administración del sitio Web,
necesarias para que este funcione, tales como ortografía o creación de un archivo de
gráficos.
Ahora usted verá como crear una tarea.
105
11. Haga clic derecho en cualquier lugar sobre la pantalla vista Tareas y seleccione
Agregar Tarea desde el menú desplegable.
Aparecerá la caja de diálogo Nueva Tarea. Ahí es donde usted creará una tarea y
suministrará información tal como un nombre y una prioridad predeterminada.
12. Haga clic en Cancelar o clic en la X en la esquina superior derecha de la caja de

diálogo Nueva tarea.

"Vistas FrontPage " en el Tema 4, Actividad 1.
14. Cuando haya completado la hoja de datos, seleccione Salir del menú Archivo,
para cerrar FrontPage.
Cuando haya salido del software, haga clic en Siguiente para continuar la
actividad.
106
Actividad 2 − Planificación de un sitio Web
Objetivo
Cuando usted haya completado esta actividad, habrá adquirido los conocimientos y
habilidades necesarias para planificar y diseñar un sitio Web comercial simple.
• Explicar como bosquejar un sitio Web

• Describir los elementos de un sitio Web de apariencia profesional.
• Analizar los elementos de un bosquejo de sitio Web.
• Describir maneras alternativas de producir un sitio Web.
107
Instrucciones: Analizar un Anteproyecto (Blueprint)

FrontPage deberá estar en su pantalla. Si no es así, haga clic en el botón Ejecutar
una Aplicación y escoja FrontPage en el menú. Siga las siguientes instrucciones
Pronto estará respondiendo a preguntas acerca del anteproyecto para el sitio Web
“guitarras usadas”. Pero primero, usted usará la vista Exploración para ayudar a
planear una estructura de navegación para el sitio.
Cuando abre FrontPage, aparece una pantalla negra, usualmente en la vista

Página.
NOTA: FrontPage mostrará automáticamente la vista

que fue seleccionada la última vez que usted cerró el
programa. Si aparece una página nueva en la Vista
Página, seleccione Cerrar del menú Archivo.
Muestra del panel Nueva página o Web
108
Usando la Vista Exploración

1. Si no aparecen los paneles Nueva página o Web, seleccione Nuevo y Página o
Web del menú Archivo.
Archivo, Nueva selección
2. En el panel Nueva página o Web, bajo Nuevo a partir de una plantilla, haga clic
en Plantillas de sitio Web.
Aparecerá una caja de diálogo Plantillas de sitio Web, indicando varias plantillas
y asistentes para escoger.
3. Seleccione el icono Web de una página si aún no está seleccionado.
Pantalla de Plantillas de Sitio Web
109
4. Haga clic en la flecha-abajo sobre la caja Especifique la ubicación del nuevo sitio
Web:, escriba "Web de una página" después de MisWebs\ y haga clic en Aceptar.
(Esto crea una carpeta temporal porque usted no guardará este sitio Web).
NOTA: Si apareciera una ruta adicional después de C:\Mis

Documentos\Mis Webs\ ruta del directorio, usted puede
borrarla y escribir "\Web de una página". O puede
seleccionar C:\Mis Documentos\Mis Webs desde el menú
descolgable que aparece cuando hace clic en la flecha-abajo,
cerca a la caja Especifique la ubicación del nuevo sitio Web.
5. Si usted no está en la vista Exploración, haga clic en el icono Exploración en el

panel Vistas sobre el lado izquierdo de la pantalla.
La estructura de exploración para un sitio Web de una página con un icono nueva
página etiquetado index.htm aparecerá automáticamente en la vista Exploración.
Vista Exploración
6. Trate de crear una estructura de navegación que refleje la estructura de

navegación para el sitio Web Guitarras Usadas de Ultima Ocasión. Remítase al
Bosquejo de Exploración en el Apéndice Anteproyecto de sitio Web en el
Apéndice C de la Guía del Manual.
NOTA: Para agregar páginas y editar texto, usted puede

usar el menú desplegable que aparece cuando hace clic
derecho sobre una página en la vista Exploración. También
puede usar la selección Nuevo, Página en blanco, del
panel Nueva página o Web, o Copiar y Pegar del menú
Edición para crear páginas nuevas. Para moverse
110
rápidamente de un icono al siguiente, puede presionar la

tecla Tab.
7. Agregue las páginas a la página principal en los niveles apropiados, como indica
el bosquejo.
NOTA: Otra forma rápida de agregar páginas en la vista

Exploración es mediante la selección de una página,
manteniendo presionada la tecla Ctrl, y presionando la
tecla N.
8. Cambie el texto en las cajas por los nombres de las páginas en el bosquejo.
Cuando su estructura de exploración se vea semejante al bosquejo, a su

satisfacción, continúe con el siguiente paso.

"Bosquejo de Exploración FrontPage " y todas las cuatro hojas de datos de
"Analizando un Anteproyecto " en el Tema 4, Actividad 2. Cuando usted haya
completado las hojas de datos, vaya al paso 9.
10. Seleccione Salir del menú Archivo o haga clic en la X en la esquina superior
derecha para cerrar FrontPage.
NOTA: Seleccione No si aparece un mensaje acerca de

guardar los cambios.
Cuando haya salido del software, haga clic en Siguiente para continuar la actividad.
111
Actividad 3 − Creación de un Sitio Web
Objetivo
habilidades necesarias para crear un nuevo sitio Web y agregar una estructura de
exploración (navegación).
• Crear una página principal para el sitio Web

• Crear una estructura de navegación para el sitio
• Agregar páginas adicionales al sitio
• Usar la vista Carpetas para crear una carpeta texto.
• Agregar texto preliminar desde un documento Bloc de Notas
• Guardar un sitio Web
112
Desarrollo Web Tema 4 – Introducción a FrontPage
Instrucciones – Creación de una estructura de exploración

FrontPage deberá estar en su pantalla.. Si no está, haga clic en el botón Ejecutar
una Aplicación y escoja FrontPage en el menú. A continuación siga las
Creación de un Nuevo Sitio Web

Cuando usted abre FrontPage, aparece una página en blanco en la vista Página.
NOTA: Si la vista Página no aparece, haga clic sobre el icono

Página en el panel Vistas.
Página en Blanco
Usted está creando un sitio Web desde cero, por lo tanto, si aparece una página
nueva puede empezar escribiendo en esta página. Pero, como primero creará la
estructura de exploración para este procedimiento, usted necesitará cerrar esta
página sin guardarla.
1. Si aparece una página en blanco, seleccione Cerrar del menú Archivo.
2. Si no aparece el panel Nueva página o Web, seleccione Nuevo y Página o Web

en el menú Archivo.
3. En el panel Nueva página o Web, seleccione Plantillas de sitio Web, o Web de

Una Página, bajo Nuevo a partir de una plantilla.
4. Aparecerá una caja de diálogo Plantillas de sitio Web, indicando varias plantillas
y asistentes para escoger.
113
5. Haga clic en la flecha-abajo junto a la caja Especificar la ubicación del nuevo

sitio Web:, y del menú desplegable, seleccione C:\Mis Documentos\Mis Webs.
Escriba "\UltimaOportunidadXX" (donde XX es la abreviatura de sus iniciales)
al final de esta ruta. Luego la ubicación sería "C:\Mis Documentos\Mis
Webs\Ultima OportunidadXX".
Pantalla Plantillas de sitio Web
De esta forma su nuevo sitio Web estará en el directorio UltimaOportunidad.
6. Haga doble clic en el icono Web de una página.
7. Cuando aparece la pantalla en blanco de la vista Página, haga clic en el icono

Exploración en el panel Vistas.
114
Estableciendo una Estructura de Exploración (Navegación)

La pantalla Exploración aparece con el icono Index.htm (Página principal).
Sobre esta página usted puede crear su estructura básica de exploración y
agregar páginas. (Para agregar páginas y editar texto, puede usar el menú
desglosable que aparece cuando hace clic derecho sobre un icono de página.
También puede usar las selecciones de los menús Archivo y Edición.)
NOTA: En este procedimiento, usted volverá al mapa de sitio

que creó en la última actividad (como parte de la planeación
de un sitio Web) dentro de la estructura de exploración del
sitio Web de las guitarras usadas. Para ello volverá a crear el
mapa de sitio como parte del sitio Web.
1. Haga clic derecho sobre el icono Index.htm para acceder al menú descolgable.
Menú descolgable de Exploración
2. Seleccione Nueva y haga clic izquierdo en Página del menú descolgable.
3. Aparecerá un icono Página Nueva debajo del icono Index.htm, con una línea de
conexión.
115
4. Repita este proceso hasta tener cuatro iconos de Página Nueva conectados al
icono Index.htm.
Cuatro iconos Página nueva
Ahora usted cambiará el nombre de los iconos de las páginas, para que
correspondan a los nombres de las páginas en su anteproyecto de sitio Web. ( El
nombre del icono Index.htm cambia a Página principal.)
5. Haga clic derecho en el icono Index.htm, luego seleccione Cambiar Nombre del
menú desplegable. Cuando aparece una caja azul alrededor del texto
"index.htm", escriba "Página principal " en su lugar y presione Enter, o haga clic
en cualquier lugar fuera del icono de página.
NOTA: Cuando el texto esté apropiadamente seleccionado, se

volverá resaltado. Si la vista Página aparece cuando usted ha
seleccionado el texto, haga nuevamente clic sobre el icono
Exploración y continúe con el proceso.
6. Muévase al icono de la primera página en el segundo nivel y cambie el nombre a

"Eléctrica".
116
Trabajando de izquierda a derecha, cambiar el nombre a los iconos de las otras tres
páginas,utilizando los siguientes nombres.
Acústica
Vínculos
Contactos
Iconos de Página con Nuevos Nombres
Con esto se crearán páginas Web con los nuevos nombres que serán sus nuevos
títulos. Usted puede hacer doble clic en cada uno de los iconos de página para ver
como aparecen ellos en la vista Página.. Los cambios de título que usted ha hecho en
la vista exploración sólo afectan el mapa de sitio.. Para cambiar los verdaderos
nombres de archivo que aparecen en la barra de títulos de cada página, necesitará
usar la vista Carpetas . Usted aprenderá acerca de esto en el segundo procedimiento
de esta actividad.

"Creación de un sitio Web " en el Tema 4, Actividad 3. Cuando haya completado
la hoja de datos, continúe con las instrucciones siguientes.
8. Ingrese a la vista Página y salve su trabajo.
NOTA: Usted también puede salvar los cambios haciendo

clic sobre el icono Guardar en la barra de herramientas
Estándar. Es una buena práctica guardar periódicamente
su trabajo en esta forma para evitar la pérdida de datos
debido a fallas o cortes de energía.
9. Seleccione Salir en el menú Archivo para cerrar FrontPage.
Cuando haya salido del software, haga clic en Siguiente para continuar la actividad.
117
Instrucciones – Trabajando en la Vista Carpetas

FrontPage deberá estar en su pantalla. Si no está, haga clic en el botón Ejecutar
una Aplicación y escoja FrontPage del menú. Continúe con las instrucciones
siguientes para completar la actividad.
Cuando usted abre FrontPage, aparecerá una pantalla en blanco en la vista Página.
NOTA: Si la vista Página no aparece, haga clic en el icono

Página en el panel Vistas. Si aparece una página en blanco,
seleccione Cerrar del menú Archivo
Ahora usted va a abrir el sitio Web ÚltimaOportunidad que lo empezó en el último

ejercicio.
1. Seleccione Abrir del menú Archivo y haga doble clic en la carpeta nombrada
ÚltimaOportunidadXX (donde XX es la abreviatura de sus iniciales), de la lista
en la ventana Abrir Archivo. (Última OportunidadXX debería estar bajo C:\Mis
Documentos\Mis Webs\). Seleccione un archivo y haga clic en el botón Abrir.
Archivo, Abrir Selección
NOTA: Si el sitio Web fue guardado recientemente,

también lo puede abrir seleccionando Webs Recientes o
Abrir Web del menú Archivo.
118
Cambiar Nombre de Archivos

El sitio Web ÚltimaOportunidadXX abre con la página que usted seleccionó.
1. En el panel Vistas, haga clic sobre el icono Carpetas.
2. Seleccione el archivo página_nueva_1 con el nombre Eléctrica y haga clic

derecho.
3. Seleccione Cambiar Nombre del menú desplegable, y aparecerá una caja encima
del nombre de archivo. Asegúrese de seleccionar "página_nueva_1" y escriba
"Eléctrica" en este lugar, dejando la extensión .htm. (Note el punto antes de la
extensión.) Luego presione Enter.
Vista Carpetas: Menú Desplegable
4. Repita el proceso para cambiar nombre a los archivos restantes de página nueva,
de modo que coincidan con los títulos que aparecen en la columna Títulos
(recuerde que usted está dejando la página principal como Index.htm.)
Note que una vez que se cambie de nombre a la caja de exploración, tanto las vistas
Páginas y Carpetas se cambian de nombre automáticamente.
Cuando haya concluido, su pantalla FrontPage lucirá como el ejemplo mostrado

aquí.
119
Archivos Cambiados de Nombre
Trabajando con Carpetas Texto

Ahora usted va a crear una carpeta Texto en el directorio ÚltimaOportunidadXX y a
copiar en ella algunos archivos de texto del Bloc de Notas.(Los archivos Bloc de
Notas ya fueron creados para esta actividad.)
1. En el panel izquierdo de la vista Carpetas (Bajo la cabecera Lista de Carpetas),

haga clic derecho en la ruta C:\Mis Documentos\Mis
Webs\ÚltimaOportunidadXX y seleccione Nueva y Carpeta del menú
desplegable.
Nueva, Carpeta Seleccionada
120
Aparecerá un icono Nueva Carpeta en el panel derecho con una caja coloreada
alrededor de las palabras "Nueva_ Carpeta".
2. Escriba "Texto" en lugar de "Nueva_Carpeta". Luego presione Enter.
Ahora usted copiará algunos archivos de la carpeta Texto en el directorio Mis

Webs\ dentro de la carpeta Texto que acaba de crear.
3. Seleccione Abrir del menú Archivo, y aparecerá la ventana Abrir Archivo. Suba
un nivel en la estructura del directorio haciendo clic en el icono Carpeta junto a
la caja Buscar en:.
El directorio Mis Webs aparecerá con "Mis Webs" en la caja Buscar en:.
4. Haga clic en la flecha abajo junto a la caja Archivos de escribir: y seleccione

Todos los archivos del menú desplegable. Luego seleccione la carpeta Texto y
haga doble clic.
Selección de Todos los archivos
Aparecerán los contenidos de la carpeta Texto. Usted deberá ver tres archivos de
texto: Acostext.txt, Electext.txt, and HPtext.txt.
5. Haga clic derecho en el archivo Acostext.txt y seleccione Copiar del menú

desplegable.
121
6. Cierre la ventana Abrir Archivo haciendo clic sobre la X en la esquina superior

derecha.
Aparecerá la vista Carpetas del sitio Web ÚltimaOportunidad ( Si esta no
aparece, abrir el sitio Web, luego haga clic en el icono Carpetas en el panel
Vistas.)
7. En el panel izquierdo de la vista Carpetas, seleccione la carpeta Texto. Luego

haga clic derecho y seleccione Pegar del menú desplegable.
Ahora, el archivo que usted copió, aparecerá en la carpeta Texto de su directorio
Ultima OportunidadXX.
8. Repita el proceso para los otros dos archivos (Electext.txt y HPtext.txt) de forma
que los tres archivos de texto queden ubicados en la carpeta Texto de su
directorio ÚltimaOportunidadXX.
Menú Desplegable Lista de Carpetas
122
Contenidos de la Carpeta Texto
9. Una vez que usted haya copiado todos los archivos, haga doble clic en cada
archivo para ver sus contenidos. Para cerrar un archivo, haga clic en sobre la X
en la esquina superior derecha.
Continúe en la siguiente página para más instrucciones.
123
Instrucciones – Creación de Texto

Ahora usted practicará dos formas de agregar texto a su sitio Web: copiándolo desde
un archivo y escribiéndolo directamente en la página Web.
1. En la vista Carpetas, haga clic en el directorio C:\Mis Documentos\Mis

Webs\UltimaOportunidadXX en la parte superior del panel izquierdo
2. En el panel derecho haga doble clic sobre Index.htm.
Vista Carpetas con Index.htm Seleccionado
Aparecerá la Página principal en la vista Página con el cursor en la esquina

superior izquierda.
3. Escriba "PÁGINA PRINCIPAL " en letras mayúsculas en la esquina superior

izquierda de la pantalla.
Ahora usted agregará algún texto desde uno de los archivos Bloc de Notas.
4. Haga clic en el icono Carpetas en el panel Vistas, seleccione la carpeta Texto en

el panel izquierdo de la vista Carpetas, y luego haga doble clic sobre HPtext.txt
en el panel derecho.
Aparecerán los contenidos del archivo HPtext.txt. Usted va a insertar algunos de
los textos en su sitio Web. El resto de los textos los usará en actividades
posteriores. (También formateará y alineará el texto en subsecuentes
actividades.)
124
NOTA: Usted puede mover la ventana Bloc de Notas a

cualquier lugar en la pantalla haciendo clic en la barra de
títulos coloreada y moviendo la ventana a la ubicación
deseada. Para cerrar, maximizar, o minimizar la ventana use
uno de los botones en la esquina superior de la ventana. Si
usted está inseguro de la función de un botón, ubique su
cursor sobre el botón para ver su nombre.
2. Haga clic en el botón Minimizar en la esquina superior derecha de la ventana del
Bloc de Notas.
La ventana HPtext.txt desaparecerá de su pantalla, pero aparecerá el icono

HPtext.txt en la parte baja de la pantalla.
3. Seleccione el icono Página en el panel Vistas.
La Página principal aparecerá en la vista Página.
4. Haga clic en el icono HPtext.txt en la parte baja de la pantalla.
El archivo HPtext.txt se abrirá sobre la pantalla página principal.
5. Seleccione el primer párrafo y seleccione Copiar del menú Editar. Luego cierre el
archivo Bloc de Notas.
Primer párrafo seleccionado
125
6. Ubique el cursor después de "PÁGINA PRINCIPAL " sobre la página principal,

agregue un retornador de párrafo (presione Enter), y haga clic derecho. Del
menú desplegable, seleccione Pegar.
El texto que usted copió aparecerá en la página principal. Su pantalla se verá como
el gráfico mostrado aquí.
Texto Página principal
7. Vaya a su Guía del Estudiante/Carpeta y complete las hojas de datos tituladas

"Trabajando en la Vista Carpetas " y "Creando Texto" en el Tema 4, Actividad
3. Cuando haya completado las hojas de datos, continúe con las instrucciones de
abajo.
Ahora que usted ha hecho cambios al texto, es tiempo de guardar estos cambios
en el sitio Web ÚltimaOportunidadXX.
8. Del menú Archivo, seleccione Guardar.
126
Trabajando en el Proyecto Final

9. Cierre su sitio Web de la guitarra usada y empiece a trabajar para su proyecto
final, Proyecto Web XX (donde XX son sus iniciales). Recuerde usted empezó este
proyecto en el Tema 3, Actividad 2, donde esbozó un anteproyecto para este sitio
Web.
10. Empiece construyendo este sitio Web en FrontPage usando las herramientas que
usted ha aprendido en este Tema. Luego continuará agregando características a
este sitio Web, a medida que las va aprendiendo.
11. Seleccione Salir del menú Archivo para cerrar FrontPage.
Cuando haya salido del software, haga clic en la tecla Siguiente para continuar.
127
Actividad 4 − Agregar Estructura y Consistencia
Objetivo
habilidades para agregar estructura y consistencia a un sitio Web.
• Distinguir entre diferentes formas de agregar estructura y consistencia.

• Crear y aplicar bordes compartidos a todo el sitio Web.
• Crear hipervínculos en una barra de exploración.
• Crear un estilo consistente para una barra de exploración.
• Fijar las propiedades de la barra de exploración.
• Moverse entre las páginas Web.
• Determinar cuando usar diferentes características FrontPage.
128
Instrucciones– Bordes Compartidos e Hipervínculos

FrontPage debería estar en su pantalla.. Si no está, haga clic en el botón Ejecutar
una Aplicación y escoja FrontPage del menú. Siga las instrucciones de abajo para
Abriendo un Sitio Web

1. Cuando usted abre FrontPage, aparecerá una pantalla o página en blanco, en la
vista Página.
NOTA: Si la vista Página no aparece, haga clic en el icono

Página del panel Vistas.
2. Si aparece una página en blanco, seleccione Cerrar del menú Archivo.
Usted ahora va a abrir el sitio Web ÚltimaOportunidadXX que ya ha empezado..
3. Seleccione Abrir del menú Archivo y haga doble clic en la carpeta llamada
ÚltimaOportunidadXX (donde XX son sus iniciales) de la lista en la ventana
Abrir Archivo. (ÚltimaOportunidadXX debería estar bajo C:\Mis
Documentos\Mis Webs\). Seleccione un archivo y haga clic en el botón Abrir.
NOTA: Como el sitio Web ha sido recientemente

guardado, usted también puede abrirlo seleccionando
Webs Recientes o Abrir Webs del menú Archivo.
El sitio Web ÚltimaOportunidadXX abre con la página que usted seleccionó.
Agregando Bordes Compartidos

4. En el panel Vistas, haga clic en el icono Carpetas.
5. En el panel derecho de la vista Carpetas, haga doble clic en el archivo llamado

Index.htm.
En la vista Normal aparecerá la Página principal para el sitio Web

ÚltimaOportunidad.
6. Usted va a agregar un borde compartido a esta página (el cual aparecerá en

todas las páginas Web).
129
7. Seleccione Bordes Compartidos del menú Formato.
Bordes Compartidos Seleccionados
8. En la caja de diálogo Bordes Compartidos, seleccione Todas las Páginas, bajo

Aplicar a:, luego seleccione Superior e Izquierdo..
9. Bajo Izquierdo, asegúrese de seleccionar Incluir botones de exploración, luego

haga clic en Aceptar
Ventana de Bordes Compartidos
130
10. Si aparece el mensaje de advertencia mostrado aquí, haga clic en Aceptar..
Ahora usted tiene bordes compartidos, indicados por líneas punteadas, sobre el lado
superior izquierdo de su Página principal. Note que se incluye una barra de
exploración a la izquierda. Usted ahora fijará las propiedades de la barra de
exploración de modo que los hipervínculos Nivel primario (Página principal) y Nivel
secundario aparecen en cada página Web.
Configurando propiedades de la barra de exploración
NOTA: FrontPage se refiere a la barra de exploración

como una barra de Vínculo. En estas actividades, la
referencia general a esta barra será "barra de exploración
o de navegación."
Seleccionar, luego hacer clic derecho sobre la barra de navegación en el borde

izquierdo de la Página principal.
Del menú desglosable, seleccione Propiedades de barra de vínculos.
Menú desglosable Barra de Navegación
Aparecerá la ventana Propiedades de barra de vínculos.
131
Asegúrese que estén seleccionados el Nivel secundario y la Página principal, haga

clic en Aceptar.
Nivel secundario, Página principal

Seleccionados.
Aparece un hipervínculo página principal en la barra de navegación en el borde

izquierdo de la página principal. Usted ahora seguirá los vínculos hacia una de las
páginas nivel secundario para fijar las propiedades de la barra de exploración en
esas páginas.
En la barra de exploración, ubique el cursor sobre un hipervínculo hacia una página

nivel secundario, presione la tecla Ctrl , y haga clic. (Las páginas Eléctrica,
Acústica, Vínculos, y Contactos son las páginas nivel secundario).
Aparecerá la página designada en el hipervínculo. (El nombre de la página nivel

secundario que usted vinculó para que aparezca en la barra de títulos en la parte
superior de la página.)
NOTA: Para moverse entre páginas Web, usted también

puede hacer clic en las etiquetas de nombre de página en
la parte superior de la pantalla.
Haga clic derecho sobre el hipervínculo Principal en la página nivel secundario, y

desde el menú desplegable, seleccione Propiedades de barra de vínculos.
132
6. En la ventana Propiedades de barra de vínculos, seleccione Páginas secundarias

debajo de la principal, asegúrese que Página principal esté seleccionada y haga
clic en Aceptar.
7. Ahora están configuradas las propiedades de la barra de navegación para las

páginas Nivel primario y Nivel secundario. Presione Ctrl y haga clic en cada
hipervínculo para seguir los vínculos en el sitio Web.
Barra de Exploración en la Página Eléctrica
Guardando el Sitio Web

Ahora que usted ha hecho cambios, es tiempo de guardarlos en el sitio Web.
8. Del menú Archivo, seleccione Guardar.
NOTA: Usted también puede guardar los cambios haciendo

clic en el icono Guardar de la barra de herramientas
Estándar. Es una buena práctica guardar periódicamente su
trabajo en esta forma para evitar la pérdida de datos debido
a caídas o cortes de energía.
9. Vaya a su Guía del Estudiante/Carpeta y complete todas las hojas de datos en el

Tema 4, Actividad 4. Cuando haya completado las hojas de datos, continúe con
las instrucciones de abajo.
133
Trabajando en el proyecto final

10. Cierre su sitio Web guitarras usadas y abra el sitio Web para su proyecto final,
Proyecto Web XX (donde XX son sus iniciales)
11. Continúe trabajando en su proyecto final de sitio Web, usando cualquiera de las
herramientas que ha aprendido en este Tema.
Una vez que haya salido del software, haga clic en Siguiente para continuar.
134
Desarrollo Web Tema 5 – Otros elementos en su diseno de FrontPage
TEMA 5 – OTROS ELEMENTOS EN SU DISEÑO DE FRONTPAGE
Objetivo
Cuando usted haya completado este tema, estará capacitado para dar los toques de
finales a su sitio Web de práctica usando el software de FrontPage Este le
continuará preparando para su proyecto final: la creación de su propio sitio Web,
atractivo a la vista y construido con lógica.
Revisión General
Cuando usted haya completado este tema, estará capacitado para usar
herramientas y características adicionales de FrontPage para mejorar el sitio Web.
Además de hacerlo más atractivo a la vista, lo hará más emocionante y sofisticado.
Usted estará capacitado para insertar y formatear tablas, texto y gráficos. En el
proceso aprenderá como mejorar la disposición y el alineamiento de texto e
imágenes en las páginas Web. También perfeccionará el sitio Web mediante la
adición de las alternativas de objetos destacados, efectos de texto, y multimedia.
Estos elementos incluyen un mapa de imagen, marcadores, texto en movimiento, y
música. Este tema lo preparará para su proyecto final: su propio sitio Web de
apariencia profesional.
Nuevos términos y palabras

Formato de archivo – la estructura y arreglo de datos almacenados en un archivo
que generalmente se le designa con una extensión de archivo, tal como .doc, .bmp,
or .jpg.
Compresión – un proceso que se aplica cuando se guardan imágenes para reducir
el tamaño de archivo.
Interactividad – la capacidad de los visitantes al sitio Web para controlar el
orden en el cual ellos pueden ver páginas individuales o secciones de un sitio
Web. También se refiere a cualquier tipo de respuesta que un visitante del sitio
Web puede recibir desde todo el texto o moviendo un cursor.
Marcador – hipervínculo a un punto específico dentro de una página Web. A los
marcadores también se les conoce como vínculos internos o nombres de ancla.
135
Actividad 1 − Trabajar con tablas
Objetivo
habilidades para empezar a perfeccionar el diseño de su sitio Web mediante el uso
de tablas FrontPage.
• Crear una tabla FrontPage para mejorar la composición del sitio Web basándose
en la información de su anteproyecto.
• Crear y formatear propiedades de tabla, tales como columnas y celdas.
• Editar y modificar propiedades de tabla.
• Abrir un archivo de texto y copiar texto dentro de una tabla.
• Hacer vista previa de las correcciones en la ventana del buscador y guardar el
sitio Web.
136
Instrucciones – Crear tablas de composición

FrontPage debería estar sobre su pantalla. Si no lo está, hacer clic en el botón
Ejecutar una aplicación y escoger FrontPage en el menú. Siga las instrucciones de
abajo para completar la actividad.
Abrir el sitio Web

1. Abrir el sitio Web ÚltimaOportunidadXX (donde XX son sus iniciales) y acceda a
la Página principal en la vista Página.
2. Si la Lista de carpetas está en la pantalla, haga clic en el menú Vistas y

seleccione Lista de carpetas, esto ocultará de la vista la lista (usted necesitará
espacio extra para ver sus páginas Web).
3. Coloque el cursor después de las palabras PÁGINA PRINCIPAL, luego presione

Intro (Enter).
Crear una tabla de seis celdas

En esta parte de la actividad, creará una tabla de seis celdas, alineará la tabla
completa, alineará el texto dentro de las celdas, cambiará el color de los bordes, y
copiará y pegará texto. Usted también moverá los bordes de tabla, combinará
algunas celdas, insertará y alineará texto adicional y copiará una tabla.
Dependiendo de la instalación de su sistema, tal como el tamaño de su monitor y la

resolución de pantalla, sus bordes y texto pueden no aparecer exactamente como se
muestra en las pantallas que figuran en esta guía. Para reducir las discrepancias,
es recomendable que usted maximice la pantalla de FrontPage mientras está
trabajando en esta actividad y en todas las actividades futuras.
NOTA: Si la barra de herramientas Tablas no aparece

sobre su pantalla, vaya al menú Ver y seleccione Barras
de herramientas y luego Tablas. Para mover la barra de
herramientas haga clic sobre ella y desplácela a una
nueva ubicación.
137
1. Sobre la barra de herramientas Estándar, haga clic en el icono Insertar tabla..

Seleccione dos filas y tres columnas.
Menú descolgable Insertar tabla
2. Haga clic derecho sobre la tabla y seleccione Propiedades de tabla desde el menú
descolgable (o desde el menú Tabla, seleccione Propiedades de tabla y Tabla.)
En el siguiente paso, ajustará las propiedades para la tabla completa (por

ejemplo, al seleccionar Alineación izquierda se alinea toda la tabla a la izquierda
de la página Web, y si escribe 100 en Especificar ancho: y señala el botón En
porcentaje, hace que toda la tabla se expanda al ancho de la página Web).
3. En la caja de diálogo Propiedades de tabla, seleccione Izquierda junto a

Alineación y el número 10 en los cajones junto a Margen de celdas: y Espaciado
entre celdas:. Bajo Bordes, seleccione Negro junto a Color. Asegúrese que
Mostrar bordes de celdas y de tablas esté marcado y que Especificar ancho: esté
marcado y se lea 100 por ciento. Sin embargo, Especificar alto: no debe estar
marcado. Haga clic en Aceptar.
138
Caja de diálogo Propiedades de tabla
En los pasos siguientes, usted ajustará el alineamiento del texto dentro de cada
celda de la tabla de forma que se alinea hacia arriba.
4. Use el cursor para seleccionar la tabla completa, haga clic derecho, y seleccione
Propiedades de celda del menú descolgable (o use el cursor para seleccionar la
tabla completa y luego seleccionar Propiedades y Celda desde el menú Tabla).
5. En la caja de diálogo Propiedades de celda, seleccionar Superior junto a

Alineación vertical: y haga clic en Aceptar.
6. Seleccionar el texto que aparece debajo de la tabla, haga clic derecho, y desde el
menú descolgable seleccione Cortar.
7. Mover el cursor a la primera celda en la primera columna, hacer clic derecho, y

seleccionar Pegar desde el menú descolgable.
8. Hacer clic en el botón Mostrar todo en la barra de herramientas estandar.
139
Texto Pegado
2. Localice los dos retornadores de párrafo en el texto que usted ha pegado (el cual
aparece al final de la linea de texto). Ubique el cursor antes de cada retornador
de párrafo y presione la tecla Eliminar. Así mismo elimine cualquier retornador
de párrafo extra después del párrafo.
Ahora moverá las columnas con el cursor de tal forma que la columna de la mano
izquierda quede un poco más grande que las otras.
3. Ubique el cursor sobre el borde derecho de la primera columna hasta que el

cursor se vea como la flecha bi-direccional mostrada aquí:
Flecha bi-direccional
4. Haga clic y arrastre hacia la derecha el borde derecho de la primera columna

hasta que se vea similar a la pantalla mostrada aquí:
140
Borde derecho de la primera columna movido a la derecha
5. Ubique el cursor sobre el borde derecho de la segunda columna hasta que el

cursor se vea como la flecha bi-direccional.
6. Haga clic y arrastre el borde derecho de la segunda columna a la derecha hasta

que se vea similar a la pantalla mostrada aquí.
Borde derecho de la Segunda columna movido a la derecha
7. Ubique el cursor antes de la palabra PÁGINA PRINCIPAL y presione la barra

de espacio unas cuantas veces para alinear a la izquierda las palabras con el
texto en la tabla de abajo.
NOTA: El propósito del paso anterior es mostrarle donde

se debería posicionar el texto. Usted aprenderá una
manera más precisa de alineación de texto en las páginas
Web en la próxima actividad.
8. Use el cursor para seleccionar las dos celdas de la primera columna y haga clic
en el botón Combinar celdas de la barra de herramientas Tablas.
141
9. Mover el cursor a la primera línea del texto en la tabla y ubíquelo a la derecha

antes de la palabra “Bienvenido”.
10. Escriba el siguiente texto, agregándole un retornador de párrafo después de cada

línea.
Guitarras usadas última oportunidad

Avenida Principal 333
Pueblo Nuevo, CA 12345
(555) 555-5555
11. Seleccionar este Nuevo texto y hacer clic derecho; del menú descolgable
seleccione Párrafo.
12. En la caja de diálogo Párrafo, bajo Espaciado, seleccione 0 (o escriba "0") en los
cajones junto a Antes de: y Después de:, y haga clic en Aceptar.
142
Caja de diálogo Párrafo
NOTA: Usted también puede insertar seccionadores de

línea, después de cada línea sosteniendo presionada la
tecla Shift y presionando Intro ( Enter). Esto le daría el
mismo efecto que cambiar el espaciado de párrafo a 0.
Cuando lo haya hecho, su pantalla se verá similar a la pantalla mostrada aquí.
Tabla con tres columnas
13. Guarde su trabajo
NOTA: Es una buena idea guardar su trabajo después

que haya hecho correcciones a una página Web individual
y antes de pasar a otra nueva.
143
Ahora va a copiar esta tabla a tres de las otras páginas Web.
14. Con su cursor ubicado dentro de la tabla, escoja Seleccionar desde el menú
Tabla, luego Tabla. Con la tabla seleccionada, haga clic derecho y desde el menú
descolgable seleccione Copiar.
15. Usar la barra Vínculos para acceder a la página Eléctrica (como lo hizo en el
tema anterior).
16. Sobre la página Eléctrica, inserte un retornador de párrafo en la parte superior

de la página.
NOTA: Este retornador dejará una línea en blanco para el

nombre de la página, que se escribirá más adelante.
17. Hacer clic derecho y seleccionar Pegar del menú descolgable.
18. Eliminar el texto de la primera columna de la tabla. Su pantalla se verá similar

a la pantalla que se muestra aquí.
Tabla copiada
19. Copiar la tabla desde la página Eléctrica a las páginas Acústica y Vínculos.
(Asegúrese de poner un retornador en la parte de arriba de cada página antes de
copiar la tabla a la nueva página).
Cuando haya hecho, tanto la página Acústica como la Vínculos se verán como la
página Eléctrica en la última figura.
20. Guarde su trabajo.
144
Crear una tabla para la pancarta

En esta parte de la actividad, usted creará una tabla simple para acomodar el mapa
de imagen y el nombre de la compañía. Pero ahora insertará una tabla de seis
columnas y luego mezclará las últimas cinco columnas. De esta manera, la columna
de la izquierda será exactamente de un sexto del ancho completo de la tabla.
1. Ingresar a la Página principal en la vista Página.
2. Ubicar el cursor en el borde superior, resaltar completamente el Comentario e

inserte una tabla de seis columnas. (La tabla reemplazará el Comentario.)
3. Alinear la tabla a la izquierda y prefijar un borde negro usando la caja de diálogo

Propiedades de tabla. Nuevamente, asegúrese que Especificar ancho: se
encuentre marcado y que se lea 100 por ciento, y que Especificar alto: no esté
marcado.
Tabla de seis columnas en el borde superior
4. Resaltar todas las columnas excepto la primera y luego combínelas.
5. Presionar Intro (Enter), insertar unos dos espacios, y escriba “guitarras usadas
última oportunidad”. Presione Intro (Enter) dos veces más.
Después de terminarla, su página Web se verá similar a esta pantalla:
145
Tabla de dos columnas para pancarta
NOTA: Debido a que esta tabla aparece en un borde

compartido, aparecerá automáticamente sobre cada una
de las páginas Web “guitarra usada”. Por lo tanto, no es
necesario copiarla.
146
Copiar texto
Ahora usted va a copiar texto desde la carpeta Texto que usted creó en el Tema 4,
Actividad 3, y lo pegará dentro del sitio Web. (Este procedimiento es similar al que
usted ejecutó en aquella actividad.)
1. Desde la Página principal, acceda a la vista Carpetas y abra la carpeta Texto en

la Lista de Carpetas.
Carpeta texto abierta
2. Abrir el archivo HPtext.txt, y luego abra la Página principal en la vista Página

(Aparecerá un botón minimizado HPtext.txt en la parte inferior de la pantalla.)
3. Hacer clic sobre el botón HPtext.txt en la parte inferior de la pantalla para abrir
el archivo sobre la Página principal.
4. Seleccionar la segunda oración en el Segundo párrafo y copiarlo.
Aspecto del archivo HPtext sobre la Página principal
5. Hacer clic en cualquier lugar sobre la Página principal. En la tabla inferior,

pegar el párrafo en la primera fila de la Segunda columna. Luego elimine los
retornadores de párrafo
147
NOTA: Si se encuentra que no entra todo el texto en la

columna, abra la caja de diálogo Propiedades de celda y
asegúrese que en el cajón junto a Alineación vertical: se
encuentre seleccionado Superior.
Cuando lo haya hecho, su página Web se verá similar a la pantalla mostrada aquí.
Texto insertado en tabla
Crear una tabla para la Página de contacto

En esta parte del procedimiento, usará las herramientas y características que usted
ha aprendido para crear una tabla para la página Contactos en el sitio Web
“guitarra usada”.
Para la consistencia del diseño, hará que la columna derecha en la página Contactos
se alinie con la columna derecha de las otras páginas Web.
148
Anteproyecto de página de contacto Anteproyecto de página guitarras eléctricas
Una de las maneras más eficientes para conseguir esto es copiando primero la tabla
inferior desde una de las otras páginas Web hacia la parte inferior de la página
Contactos. Después de esto combinar las dos primeras columnas. Y, como ultimo
paso, combinar las dos filas que aparecen en la última columna.
1. Inténtelo y practíquelo usando todas las herramientas y características de

FrontPage que ha aprendido hasta ahora. Utilice los anteproyectos anteriores
como guías.
Cuando lo haya hecho, la página Contactos debería verse similar a la pantalla

mostrada aquí:
Tabla de dos columnas
NOTA: Para cambiar los retornadores de párrafo a su

espaciado normal, vaya a la caja de diálogo Párrafo y
retire los números bajo Espaciado.
149
Vista previa del sitio Web

Antes que continúe con la siguiente actividad, es importante ver como lucirá su sitio
Web.
1. Si todavía está abierto el archivo HPtext.txt, ciérrelo. Luego acceda a la Página

principal.
NOTA: Siempre asegúrese de guardar sus cambios antes

de la vista previa de sus páginas Web.
150
2. Hacer clic en la solapa Vista previa en la parte inferior de su pantalla.
Página Guitarra eléctrica en Vista previa
En la Vista previa, los botones de navegación trabajan como si estuvieran en la

Web.
3. Hacer clic en cada uno de los botones de navegación en la barra Vínculos para
ver como lucirán las páginas Web más adelante.
4. Hacer clic en la solapa Normal en la parte inferior de la pantalla y guarde el sitio

Web ÚltimaOportunidadXX.

Tema 5, Actividad 1. Cuando haya completado las hojas de datos continúe con
las instrucciones que siguen abajo.
Trabajar en el Proyecto Final

6. Cerrar su sitio Web “guitarra usada” y abra el sitio Web para su proyecto final,
Proyecto Web XX (donde XX serán sus iniciales).

Una vez que haya salido del software, haga clic en la flecha Siguiente para
151
Actividad 2 − Formateado básico
Objetivo
habilidades para crear y modificar propiedades de página FrontPage y elementos de
formateado de texto en todo el sitio Web.
• Modificar opciones de formateado de texto para texto seleccionado, tomando

como base, en parte, la información del anteproyecto.
• Crear y aplicar formateado de propiedades de página en la página Web.
• Crear y modificar formateado de texto en una página Web.
• Crear y modificar texto formateado en la pancarta (borde compartido)
152
Instrucciones – Formateado de texto de página Web

FrontPage debería estar en su pantalla. Si no estuviera, hacer clic en el botón
Ejecutar una aplicación y escoger FrontPage del menú. Siga las instrucciones de
Abrir el sitio Web

1. Abrir el sitio Web ÚltimaOportunidadXX (donde XX son sus iniciales) y acceda a
la Página principal en la vista Página.
2. Si la Lista de carpetas está en su pantalla, hacer clic en el menú Vista y

desactive la selección Lista de carpetas; esto ocultará la lista (necesitará el
espacio extra para ver sus páginas Web).
En la siguiente parte de este procedimiento, usted agregará más texto al sitio

Web. En la parte del procedimiento que continúa, agregará los elementos de
formateado.
NOTA: Puede ser más fácil agregar y arreglar texto si

conecta la característica Mostrar todo.
Agregar texto a las páginas Web
Página principal
1. En la Página principal, asegúrese que hay dos retornadores de párrafo después
del ultimo párrafo en la columna izquierda.
2. Abrir el archivo HPtext.txt y copiar la oración “Si usted está buscando una gran
oferta, revise nuestros precios y guitarras de características especiales.” y
péguela sobre la misma línea del Segundo retornador de párrafo en la parte
inferior de la columna izquierda de la Página principal.
3. En la parte superior de la Segunda columna, escriba “Eléctrica” e inserte un

retornador de párrafo.
4. Inserte un retornador de párrafo después del párrafo en esta columna.
5. Escriba "Para encontrar más acerca de nuestras guitarras eléctricas, haga clic
sobre el botón Eléctrica”.
153
Su pantalla deberá verse como la pantalla que se muestra aquí.
Texto insertado en dos columnas
6. Desde el archivo HPtext.txt, copiar el encabezamiento "Acústica" y el párrafo

debajo de él, y péguelos dentro de la celda inferior de la Segunda columna.
7. Eliminar cualquier retornador de párrafo extra de Bloc de notas, y agregar un

retornador de FrontPage en el final del párrafo.
Retornador de párrafo Retornador de párrafo

FrontPage Bloc de notas
NOTA: Si apareciera algún retornador Bloc de notas

después del encabezamiento “Eléctrica” o en cualquier
otro lugar donde aparecerá un retornador FrontPage,
bórrelos e inserte un retornador FrontPage.
8. Copiar la oración “ Para conocer más acerca de nuestras guitarras eléctricas,

haga clic en el botón Eléctrica.” Desde la celda de encima y péguela dentro de la
sección Acústica, justo debajo del primer párrafo.
9. Cambiar la palabra “eléctrica” en esta oración, en los dos casos en que aparece,
de manera que se lea como sigue:
“ Para conocer más acerca de nuestras guitarras acústicas, haga clic en el botón
Acústica"
154
Su pantalla se verá similar a la que se muestra aquí.
Texto Acústica insertado en la Página principal
10. Cerrar el archivo HPtext.txt.
11. Guardar su trabajo.
Página guitarras eléctricas

1. Acceder a la página Eléctrica y escribir "GUITARRAS ELÉCTRICAS " en la
parte superior izquierda de la página, debajo de la pancarta.
2. Abrir el archivo Electxt.txt y copiar el texto desde este archivo a la primera

celda de la primera columna en la página Eléctrica (no copie el encabezamiento
“Eléctrica”)
3. Eliminar cualquier retornador de párrafo extra o cualquier espacio extra. Luego

ubique el cursor a la derecha antes de la palabra “Nosotros” en la segunda
oración y agregue un retornador de párrafo.
Esto le agrega un espacio de línea entre las dos primeras oraciones.
NOTA: Si no aparecen espacios de línea después de insertar

los retornadores de párrafo, seleccionar los párrafos, acceder
a la caja de diálogo Párrafo, y desactive cualquier dígito
(incluido 0) junto a Antesde: y a Despuésde:.
155
4. Agregar otro retornador de párrafo al final del segundo párrafo y escriba el texto
siguiente:
“Si usted no ve lo que desea ver, por favor llámenos o contáctenos haciendo clic
sobre el botón Contactos.”
Su pantalla lucirá similar a la que se muestra aquí.
Texto insertado en primera columna
Ahora usted ingresará texto para la segunda columna completa.
156
5. Escriba el texto de abajo en las dos filas de la Segunda columna (agregar

retornadores de párrafo para que luzca como el ejemplo mostrado más abajo)
NOTA: Si el texto no se alinea a la parte superior de la

celda, hacer clic derecho en la celda, seleccionar
Propiedades de celda, luego seleccione Superior junto a
Alineación vertical.
Gibson Les Paul
Esta es una guitarra eléctrica

Gibson Les Paul Estandar, color
negro, de 1990 en excelente
condición.
Tiene el cuerpo negro, plectros

originales, y un diapasón de
palisandro.
Rickenbacker 360 Deluxe
Esta es una guitarra eléctrica

Rickenbacker 360 Deluxe, de
1991, con la figura del cuerpo, en
perfectas condiciones.
Tiene el cuerpo blanco, seguros de

puntero y plectros negros, y el
cuello de arce.
Texto para dos filas en Segunda columna
157
Su pantalla lucirá similar a la mostrada aquí.
Texto insertado sobre la página Eléctrica
6. Cerrar el archivo Electext.txt.
7. Guardar su trabajo
Página guitarras acústicas

1. Acceder la página Acústica y escribir “GUITARRAS ACÚSTICAS” en la parte
superior izquierda de la página, debajo de la pancarta.
2. Abrir el archivo Acostext.txt y copiar el texto de este archivo en la primera celda

de la primera columna sobre la página Acústica. Cerrar el archivo Acostext.txt.
3. Eliminar cualquier retornador de párrafo extra. Luego agregar un retornador de

párrafo después de la primera oración y otro al final del segundo párrafo. Ajustar
el espaciador de párrafo tanto como sea necesario.
4. Acceder a la página Eléctrica . Copiar el tercer párrafo en la primera columna de

esta página en la misma ubicación de la página Acústica.
Su pantalla debería verse como la que se muestra aquí.
Texto insertado en primera columna
158
Usted ahora ingresará el texto para la segunda columna completa.
5. Escriba el texto de la
derecha en las dos Guild DCE3
filas de la Segunda
columna (agregar Esta es una guitarra acústica Guild
retornadores de DCE3 de 1996 hecha en América,
párrafo para hacerla en muy buenas condiciones.
que se vea como en el
ejemplo). Tiene el cuello de caoba, el mástil
de picea y el puente de ébano.
Ovation Standard Balladeer
Esta es una guitarra Ovation

Standard Balladeer 1998 acústica-
eléctrica, en buenas condiciones.
Tiene el mástil de picea, diapasón

de palisandro y el cuello reforzado
Texto para dos filas en columna
Texto Insertado en la página Acústica
159
Vínculos y páginas de contacto

1. Acceder a la página Vínculos y escriba “NUESTROS VÍNCULOS FAVORITOS”
en la parte superior de la página en la misma ubicación en que usted escribió
“GUITARRAS ELÉCTRICAS” en la página anterior.
2. En las dos primeras columnas de la primera fila, escriba los siguientes párrafos.
Con todas las diferentes marcas y modelos, Vínculos

algunas veces resulta difícil determinar
cuál es el mejor tipo de guitarra para usted.
Por lo que nos gustaría ayudarlo a ser un Abajo le sugerimos algunos sitios Web
consumidor mejor ilustrado. para visitar y conseguir información sobre
guitarras de calidad.
Antes que se aliste a venir a los vendedores
locales de guitarras, averigüe que puede Sitios Web de guitarras
encontrar mientras navega en la red. Para
que usted pueda empezar, le hemos
preparado una relación de algunos sitios
Web informativos.
Texto para la página Vínculos
Su pantalla debería verse similar a la que se muestra aquí.
Texto insertado en página Vínculos
3. Acceder la página Contactos y escriba “CONTÁCTENOS” en la parte superior de

la página en la misma ubicación en que usted escribió “NUESTROS VÍNCULOS
FAVORITOS” en la página anterior.
160
Texto Insertado en página Contactos
Usted agregará más texto a la página Contactos en otra actividad.
Agregar formateado a las páginas Web

En esta parte del procedimiento, agregará cambios de formateado a las propiedades
y al texto de sus páginas Web. Primero cambiará las propiedades de página para
los colores de texto y de fondo. Luego de ello, hará el texto en negrita, agregará
espaciado extra, e insertará líneas horizontales.
NOTA: En el proceso, también cambiará el color de los

bordes de tabla de negro a blanco para que haga contraste
con el nuevo fondo negro.
Páginas Principal, Eléctrica y Acústica

1. Acceder a la Página principal y hacer clic derecho en cualquier lugar en la parte
inferior de la página Web.
2. Desde el menú descolgable, seleccione Propiedades de página.
3. En la caja de diálogo Propiedades de página, seleccione la solapa Fondo.
161
Aparecerá la ventana Fondo.
4. Abajo de Colores seleccione Negro junto a Fondo: , y Blanco junto a Texto:, luego
haga clic en Aceptar.
Ventana Fondo
5. Cambiar los colores del borde de tabla de Negro a blanco, mediante el uso de la
caja de diálogo Propiedades de Tabla (Usted aprendió como hacer esto en la
última actividad).
NOTA: Asegúrese de marcar Mostrar bordes de celdas y

de tabla.
6. Repetir el mismo procedimiento para el borde de tabla en el encabezamiento de

la pancarta.
162
Colores cambiados a Página principal
163
7. Seleccione las palabras PÁGINA PRINCIPAL y use el botón negrita en la barra

de herramientas Formato para hacer negrita al texto.
Ahora usted eliminará los espacios antes de PÁGINA PRINCIPAL y le

realineará con el texto en la tabla de abajo usando espacios sin interrupción.
8. Ubicar el cursor antes de PÁGINA PRINCIPAL y usar la barra de espacio hacia

atrás para eliminar cualquier espacio.
9. Desde el menú Insertar , seleccionar Símbolo.
Caja de diálogo Símbolo
10. En la caja de diálogo Símbolo, asegúrese que el símbolo en la parte superior

izquierdo se encuentre seleccionado (aparece como una pequeña caja blanca).
11. Mientras el diálogo Símbolo permanece abierto, haga clic en el botón Insertar
hasta que PÁGINA PRINCIPAL quede alineado a la izquierda con el texto de la
tabla de abajo. Luego hacer clic en el botón Cerrar.
12. Seleccionar "Guitarras usadas última oportunidad” en la primera columna y

hacerla en negrita. Luego haga en negrita los sub-encabezamientos “Eléctrica” y
“Acústica” , en la segunda columna.
13. Ubique el cursor después del sub encabezamiento “Eléctrica”.
14. Desde el menú Insertar, seleccionar Línea horizontal. Luego, después que
aparece la línea, seleccionar la línea y hacer clic derecho. Del menú descolgable,
seleccione Propiedades de línea horizontal.
164
15. En la caja de diálogo Propiedades de línea horizontal, seleccione 3 junto a Alto y

hacer clic en Aceptar.
Caja de Propiedades de linea horizontal
16. Insertar el mismo tipo de regla debajo de “Acústica” en la Segunda fila de esta
columna.
Formateado de Página principal
17. Guarde su trabajo..
165
18. Hacer similares correcciones de formateado para las páginas Eléctrica y

Acústica, guardando su trabajo después de completar cada página.
Cuando haya hecho esto, el formateado de las páginas Eléctrica y Acústica debería
lucir similar a la pantalla mostrada arriba.
166
Páginas Vínculos y Contactos

1. Acceder la página Vínculos y hacerle similares correcciones de formateado.
(Usted solo necesita subrayar un sub encabezamiento en la Segunda columna de
esta página).
2. Hacer en negrita “Sitios Web de guitarras”.
3. Ubicar el cursor después de “Sitios Web de guitarras” y agregar cuatro

retornadores de párrafo.
4. Seleccionar los primeros tres retornadores de párrafo después de “Sitios Web de

guitarras” y hacer clic en el botón Viñetas en la barra de herramientas de
Formateado.
Página Vínculos
6. Acceder a la página de Contacto y haga similares cambios de formateado a los

colores de texto y de fondo. También haga similares cambios de formateado al
encabezamiento CONTÁCTENOS.
NOTA: Como no existe texto en el cuerpo de la tabla,

usted puede alinear “CONTÁCTENOS” con los
retornadores de párrafo en la tabla de abajo.
167
Página Contactos
7.Guardar su trabajo.
Usted agregará más texto a ambas páginas, la de Vínculos y Contactos en

actividades posteriores.
Agregar formateado a la pancarta

Ahora usted va a cambiar los tamaños de fuente y el tipo de la pancarta.
1. Acceder a la Página principal, borrar cualquier espacio antes del título de la

pancarta, y agregar dos espacios sin interrupción.
2. Seleccionar el texto de la pancarta, y sobre la barra de herramientas Formateado

acceder al menú descolgable Fuente. Seleccionar Arial.
Menú descolgable Fuente
168
3. Seleccione el texto nuevamente y sobre la barra de herramientas de Formateado

acceda al menú descolgable Tamaño de fuente. Seleccione 6 (24 pt).
Menú descolgable Tamaño de fuente
4. Haga en negrita el texto de la pancarta.
Encabezamiento de pancarta Formateado
Debido a que este encabezamiento de pancarta es un borde compartido, no hay

necesidad de repetir estos cambios en las otras páginas Web.
6. Verificar su trabajo en la vista Vista previa.
169
7. Vaya a su Guía del Estudiante/Carpeta y complete todas las hojas de datos del
las instrucciones de abajo.
Trabajar en el Proyecto Final

1. Cierre su sitio Web “guitarra usada” y abra el sitio Web para su proyecto final,
Proyecto Web XX (donde XX corresponde a sus iniciales)

herramientas que usted ha aprendido en este Tema.
Una vez que haya salido del software, haga clic en la flecha Siguiente para
170
Actividad 3 − Trabajar con imágenes
Objetivo
habilidades para modificar propiedades de imagen Web usando tanto FrontPage
como Paint Shop Pro.
• Importar imágenes hacia la carpeta images en su directorio del sitio Web.

• Convertir imágenes hacia el formato Web apropiado usando un programa
gráfico.
• Insertar imágenes hacia tablas de páginas Web.
• Copiar y mover imágenes dentro del sitio Web.
• Modificar propiedades de imagen, tales como tamaño, transparencia, alineación
y ubicación.
• Crear atributos de texto alternativo para imágenes.
• Verificar todos los cambios, incluyendo atributos de texto, en la ventana del
navegador.
171
Instrucciones – Trabajar con imágenes

FrontPage debería estar en su pantalla. Si no lo estuviera, hacer clic en el botón
Ejecutar una Aplicación y escoger FrontPage en el menú. Siga las instrucciones
Abrir el sitio Web

1. Abrir el sitio Web ÚltimaOportunidadXX(donde XX son sus iniciales) en la vista
Carpetas.
Agregar Imágenes a la carpeta Imágenes

Tal como aprendió anteriormente, FrontPage crea automáticamente una carpeta
images para todos sus gráficos y fotografías. En esta sección, usted copiará algunas
imágenes desde la carpeta FPGraphics bajo el directorio Mis Documentos\Mis
Web\ directory hacia esta carpeta images.
2. En el panel izquierdo de la vista Carpetas, seleccione la carpeta images.
NOTA: Asegúrese que ningún gráfico aparezca en la

carpeta Imágenes. Para eliminar un gráfico, hacer clic
derecho sobre el icono y seleccione Eliminar desde el
menú.
3. Seleccione Importar desde el menú Archivo, y luego seleccione el botón Agregar

archivo en la caja de diálogo Importar.
Usted ahora va a buscar la carpeta FPGraphics en el directorio Mis

Documentos\Mis Webs\ .
4. En la caja de diálogo Agregar archivo a la lista de importación, seleccione la

carpeta Mis Webs (asegúrese que el cajón Buscar en: diga Mis Documentos) y
haga clic en Abrir.
172
5. Cuando aparece el contenido del directorio Mis Webs en la caja de diálogo

Agregar archivo a la lista de importación, seleccione la carpeta FPGraphics y
luego seleccione Abrir.
Carpeta FPGraphics seleccionada
6. Seleccione todos los archivos en la carpeta FPGraphics sosteniendo presionada la

tecla Ctrl y haciendo clic en cada item. Cuando todos estén resaltados haga clic
en Abrir.
Archivos Graphic seleccionados
Luego la caja de diálogo Importar aparecerá con todos los archivos seleccionados.
7. En la caja de diálogo Importar haga clic en Aceptar.
173
Ahora los archivos seleccionados aparecerán en la carpeta images en su sitio Web

ÚltimaOportunidadXX.
Archivos en la carpeta Images
Crear una Carpeta

Más adelante en esta actividad, usted guardará una copia original de una imagen
en formato Paint Shop Pro antes de guardarla como un JPEG en la carpeta images
de su sitio Web. Ahora usted creará una carpeta en la cual guardará esta imagen
original.
1. Seleccionar Abrir Web en el menú Archivo y en la caja de diálogo Abrir Web,

seleccionar el icono Crear nueva carpeta (junto al cajón Buscar en:, es el segundo
icono desde la derecha).
NOTA: En la caja de diálogo Abrir Web, asegúrese de

estar en el directorio Mis Documentos\Mis Webs\.
Seleccionar el icono Crear nueva carpeta
174
2. En la caja de diálogo Nueva carpeta, escriba el nombre de su carpeta:

"BackupImagesXX" (donde XX son sus iniciales) y haga clic en Aceptar. Luego
cierre la caja de diálogo Abrir Web.
Caja de diálogo Nueva carpeta
3. Minimizar su pantalla FrontPage y vuelva a la presentación. Luego hacer clic en

la flecha Siguiente para reanudar la actividad.
175
Instrucciones – Usar Paint Shop Pro

Paint Shop Pro debería estar en su pantalla. Si no estuviera, hacer clic en el botón
Ejecutar una aplicación y escoja Paint Shop Pro en el menú. Siga las instrucciones
En esta sección usted usará la característica Optimización en Paint Shop Pro para
cambiar algunos formatos de archivo a JPEG o GIF y guardarlos para la Web.
También usará este programa para agregar una transparencia a uno de los gráficos.
NOTA: Cuando usted abre Paint Shop Pro, aparecen tres

objetos de pantalla: Paleta de herramientas, Paleta capas,
y Ventana Vista global. En esta actividad no usará estos
objetos. Puede cerrarlos o moverlos fuera de la zona de
trabajo arrastrándolos con el cursor.
1. Seleccionar Abrir del menú Archivo y aparecerá una ventana Abrir archivo.
Ahora usted va a ubicar los archivos gráficos en la carpeta images del sitio Web
2. Hacer clic sobre el icono carpeta Subir un nivel junto al cajón Buscar en: para
ingresar en el directorio del sistema hasta acceder al directorio C:.
3. En el panel principal de la ventana Abrir, hacer doble clic en Mis Documentos,

Mis Webs, y luego ÚltimaOportunidadXX.
ÚltimaOportunidadXX en la caja de diálogo Abrir
176
4. En la carpeta ÚltimaOportunidadXX, hacer doble clic en la carpeta images.
Este muestra todos los archivos de gráficos que usted copió al archivo images del
sitio Web “guitarra usada”.
Contenidos de la carpeta images
Transparencias GIF
Ahora usted usará la característica Optimización de Paint Shop Pro para guardar
una imagen como un GIF y agregará una transparencia al gráfico.
1. Abrir el archivo GuitarAmp.psp en la carpeta images del sitio Web

Es recomendable que siempre guarde una versión de su imagen en formato Paint

Shop Pro antes de usar la característica Optimización para preparar la imagen
para la Web.
Este archivo ya está guardado en el formato Paint Shop Pro (.psp) en la carpeta
FPGraphics. Por consiguiente, no necesita guardarlo primero en un formato
Paint Shop Pro.
2. Seleccionar Exportar del menú Archivo, y luego seleccionar Archivo GIF

optimizado.
Aparecerá la caja de diálogo Módulo de optimización GIF con la solapa

Transparencia seleccionada. Hay cinco solapas en la parte superior de esta caja
de diálogo. Al presionar cada solapa, cambia la información en la ventana de la
parte inferior de la caja de diálogo.
La primera solapa se refiere a como desea usted manipular las transparencias.
177
3. Asegúrese que esté seleccionada Zonas que coincidan con este color y luego haga
clic sobre el cajón coloreado junto a la selección.
Optimizador GIF
NOTA: Como una opción usted puede ajustar la escala de

tolerancia de color sobre su pantalla. Este factor le indica
que tan cerca deberán coincidir los colores de la imagen
con los colores del cajón. Mientras más alto el número,
más ancho será el rango de colores.
En el siguiente paso, seleccionará el color que usted desea hacer transparente en su

imagen, en el color que aparece en la caja.
4. En la caja de diálogo Seleccionar un color en la paleta, seleccione el color blanco

en la parte inferior derecha y haga clic en Aceptar.
Selección de Transparencia blanca
178
5. Seleccionar la solapa Colores y asegúrese que Estandar/Web se encuentre

seleccionado.
Solapa Colores
6. Hacer clic en la solapa Formato y asegúrese que esté seleccionado No

entrelazado. Haga clic en Aceptar.
No entrelazado significa que la imagen descarga una línea a la vez, y entrelazado

significa que la imagen aparece en varios pases. La segunda opción se usa
frecuentemente para imágenes muy grandes.
Solapa formato
179
7. Guardar el archivo GuitarAmp.psp como un archivo GIF en la carpeta images

del sitio Web ÚltimaOportunidadXX. Hacer clic en Guardar.
Guardar GuitarAmp.gif
8. Seleccionar Cerrar en el menú Archivo..
Formato JPEG
Ahora usted usará Paint Shop Pro para guardar una imagen diferente como una
JPEG. Estas imágenes, que generalmente son fotografías, no pueden tener
transparencias, pero se tiene la opción de comprimir los tamaños de archivo.
1. Abrir el archivo Ovation.psd en la carpeta images del sitio Web

Selección de Ovation.psd
180
En el siguiente paso, abrirá un archivo en un formato(PSD) desde un programa

gráfico diferente. Pero, primero guardará la copia original en formato PSP (Paint
Shop Pro).
2. Guardar el archivo Ovation.psd (Guardar copia como. . .) como un archivo Paint

Shop Pro file (formato PSP) en la carpeta que usted creó anteriormente (Mis
Webs\BackupImages), y haga clic en Cerrar..
Gráfico Ovation guardado como .psp
3. Abrir el archivo Ovation.psd en la carpeta images del sitio

WebÚltimaOportunidadXX, nuevamente.
4. Seleccionar Exportar y Archivo JPEG Optimizado desde el menú Archivo.
Abrir Archivo JPEG optimizado
181
Ahora va a comprimir el archivo para hacerlo que baje más rápido.
Aparecerá el Módulo de optimización JPEG con tres solapas: Calidad, Formato, y

Transmitir.
5. Bajo la solapa Calidad en el Módulo de optimización JPEG, hacer clic en la

flecha junto a Utilizar una tasa de compresión de: arriba/abajo, para cambiar el
factor de compresión a 30.
Mientras más grande es el factor (entre 1 y 99), mayor será la compresión. Pero
mientras más alta es la compresión será más baja la calidad. Al cambiar el factor de
compresión, usted puede ver vistas de antes y después en la parte superior del
Módulo de optimización JPEG.
Un factor de compresión de 30
6. Hacer clic en la solapa Formato y seleccione Estándar para que la imagen baje
una línea cada vez.
7. Hacer clic en la solapa Transmitir y vea que tanto tiempo le tomará bajar esta
imagen en varios sistemas, luego haga clic en Aceptar.
Diferentes tiempos de bajada (Transmisión)
182
8. Guarde el archivo Ovation como uno JPEG en la carpeta images del sitio Web
ÚltimaOportunidad y seleccione Cerrar en el menú Archivo.
9. Seleccione Salir en el menú Archivo para cerrar Paint Shop Pro.
Cuando haya salido del software, hacer clic en el botón Siguiente para reanudar la
actividad.
183
Instrucciones – Insertar imágenes hacia FrontPage

Ahora va a usar FrontPage para insertar las imágenes que están en su carpeta
images ÚltimaOportunidadXX hacia el sitio Web. Después de esto usted hará
algunas ediciones a esas imágenes.
Insertar Imágenes de la Página principal

1. Maximizar FrontPage.
2. Acceder a la página principal de ÚltimaOportunidadXX, ubicar su cursor en la

primera celda de la tercera columna, y del menú Insertar seleccionar Imagen y
Desde archivo. Luego acceda la carpeta images en el sitio Web
Insertar Imagen desde archivo seleccionado
3. Si en la carpeta aparece Guitar Amp.gif (notar la extensión GIF), hacer doble clic
sobre el archivo gráfico y proceda con el paso 6.
Insertar GuitarAmp.gif
Si en la carpeta no apareciera Guitar Amp.gif, siga los siguientes pasos.
184
4. En la caja de diálogo Imagen, acceder a la carpeta Images en el sitio Web

ÚltimaOportunidadXX y seleccione el icono Carpeta que aparece junto al cajón
URL. (Cuando arrastra su cursor encima de este icono aparecerá “Seleccione un
archivo en su computadora”)
5. En la caja de diálogo Seleccionar archivo, seleccionar GuitarAmp.gif en la

carpeta Images y hacer clic en Aceptar.
La imagen transparente es insertada hacia la página Web.
GuitarAmp.gif Insertada
6. Ubicar el cursor en la celda de abajo. Del menú Insertar, seleccione Imagen

desde el archivo e insertar la imagen CowboyGuitar.gif desde la carpeta Images.
CowboyGuitar.gif Insertado
185
Si usted mira a la Página principal en esta vista, parece que se pudiera usar otro
gráfico sobre la izquierda. Entonces agregará una celda a la primera columna e
insertará una imagen.
Dos imágenes insertadas
7. Seleccionar la primera columna de la tabla y usar el botón Combinar celdas en la

barra de herramientas Tablas para agregar otra fila a la primera columna.
Primera columna seleccionada
186
8. Insertar la imagen Gibson.jpg desde la carpeta images hacia la celda inferior de

esta columna
Foto insertada en la primera columna
Editar imágenes de la página principal

Usted deseará tener todas las imágenes de sus páginas Web del mismo tamaño. En
este caso con un ancho de 200 píxeles y una altura de tamaño proporcional.
1. Seleccionar la imagen GuitarAmp.gif y hacer clic derecho. Desde el menú

descolgable, seleccionar Propiedades de Imagen.
Aparecerá la caja de diálogo Propiedades de imagen.
Caja de diálogo Propiedades de imagen
187
2. Seleccionar la solapa Apariencia y debajo de Tamaño asegúrese que se

encuentren marcados Especificar tamaño y Conservar relación de aspecto.
También asegúrese se encuentre seleccionado en píxeles debajo de Ancho y Alto.
3. Hacer clic en las flechas junto a Ancho: para cambiar el número a 200 y hacer
clic en Aceptar.
NOTA: Como Conservar relación de aspecto se encuentra

marcado, el largo de la imagen cambia automáticamente
para mantener las proporciones de la imagen.
4. Usar el mismo método para verificar las tres imágenes en la página. Asegúrese
que todas ellas tengan un ancho de 200 píxeles.
Su pantalla debería verse similar a la que se muestra aquí:
Tres imágenes insertadas
Ahora utilizará FrontPage para hacer transparente la imagen del vaquero.
5. Seleccionar la imagen del vaquero y hacer clic sobre el botón Definir color
transparente sobre la barra de herramientas Imágenes.
6. Luego hacer clic sobre la porción blanca de la imagen del vaquero.
188
La imagen transparente del vaquero
Guardar archivos incrustados
Cuando agrega imágenes a su página Web, aparece la caja de diálogo Guardar

archivos incrustados. Después que cambiamos esta imagen, FrontPage guarda la
nueva imagen a la carpeta images.
8. Hacer clic en Aceptar.
189
9. Usar la tecla Suprimir para eliminar cualquier espacio extra alrededor de las
imágenes de esta página.
Página Web con retornadores
Ahora se asegurará que las imágenes estén centradas en la mitad de la celda y

alineadas hacia arriba.
10. Seleccionar cada una de las imágenes de la Página principal y use una
combinación de los botones Alineación de texto de la tabla de herramientas
Estándar y de los botones Alineación de Tabla de la barra de herramientas
Tablas para centrar y alinear imágenes según se le instruyó.
Botones de alineación de texto
Alinear a la Alinea el texto e imágenes con el margen o borde izquierdo.

Izquierda
Centrar Centra el texto o imágenes horizontalmente sobre la página

o dentro de la celda.
Botones de alineación de Tabla

Usar los botones que se muestran abajo para alinear texto o imagines dentro de
una celda hacia la parte superior, en el centro o en la parte inferior.
NOTA: Algunas veces en FrontPage se necesita desactivar

un botón de Alineación antes de poder seleccionar otro.
190
Cuando haya concluido, su página debería verse similar a la mostrada aquí.
Imágenes centradas y alineadas
Imágenes de página Eléctrica

Usted ya ha guardado todas las imágenes en los formatos apropiados en su carpeta
images. También ha aprendido todo lo que necesita conocer para insertar las
imágenes en esta página y alinearlas apropiadamente.
1. Acceder a la página Eléctrica
Agregar otra celda a la primera columna tal como lo hizo en la página anterior.
Página Eléctrica con celda agregada
191
2. Copiar dos de las imágenes (gibson.jpg y GuitarAmp.gif) desde la Página

principal y pegarlas sobre la página eléctrica (ver la pantalla de abajo para la
ubicación). Luego insertar la ricken.jpg hacia la última celda de la tabla.
Finalmente, centrar las imágenes que necesitan ser centradas y alinearlas hacia
la parte superior en la misma manera como lo hizo en la Página principal.
También verificar que todas las imágenes estén en el tamaño correcto.
En FrontPage, se puede copiar una imagen en la misma forma como se copia un

texto.
Cuando lo haya terminado, su pantalla lucirá como la mostrada aquí.
Página Eléctrica con imágenes
Imágenes de página Acústica

1. Acceder a la página Acústica, agregar una celda a la primera columna de la
tabla, y copiar el archivo CowboyGuitar.gif a la nueva celda.
2. Insertar dos fotografías en las dos celdas de la última columna. En la primera

celda, insertar GuildAcoustic.jpg y en la segunda celda insertar Ovation.jpg.
NOTA: Recuerde, si no apareciera Ovation.jpg, necesitará

acceder a la caja de diálogo Seleccionar Archivo. Remitirse
a la sección “Insertar imágenes de Página principal” bajo
las instrucciones tituladas “Insertar imágenes en
FrontPage.”.
192
Cuando lo haya terminado, su pantalla lucirá como la que se muestra aquí.
Imágenes insertadas en la página Acústica
Ahora usted va a recortar y a rotar la imagen de la guitarra Guild.
4. Seleccionar la imagen de la guitarra Guild y luego seleccionar uno de los botones

de Rotación y volteado de imagen de la barra de herramientas Imágenes.
VOLTEAR
HORIZONTALMENTE Y
VERTICALMENTE
GIRAR A LA
IZQUIERDA Y A LA
DERECHA
193
5. Usar una combinación de estos botones hasta que la pantalla se vea como la
mostrada aquí:
Imagen modificada de la guitarra Guild
6. Seleccionar la imagen de la guitarra Guild nuevamente y luego seleccionar el

botón Recortar de la barra de herramientas Imágenes.
En la imagen aparecerá un marco punteado.
7. Hacer clic y arrastrar los puntos de ancla de las esquinas de la imagen,

aproximadamente a unos dos centímetros, hacia arriba de los bordes exteriores
de la imagen. (Usted no necesitará alejarse mucho porque la imagen se
distorsionaría demasiado). Luego presione nuevamente el botón Recortar.
194
Imagen seleccionada Imagen después de recortar
Aparecerá la imagen recortada sobre la página.
8. Continuar editando y alineando las imágenes como lo hizo en las páginas Web
anteriores, asegurándose que todas ellas tengan un ancho de 200 píxeles y se
encuentren alineadas apropiadamente.
Cuando usted haya terminado, su pantalla lucirá como la mostrada aquí.
Imágenes en la página Acústica
195
Imágenes de la página Vínculos

1. Acceder a la página Vínculos y agregar otra celda a la primera columna como a
las otras páginas. Copiar las imágenes GuitarAmp.gif, CowboyGuitar.gif, y
gibson.jpg hacia las tres celdas de la tabla (ver la pantalla de abajo para la
ubicación).
2. Editar y alinear las imágenes para que se vean como la pantalla mostrada aquí.
Imágenes en la página Vínculos
196
Página Contactos
1. Acceder a la página Contacto y copiar una imagen de manera que se vea como la
imagen mostrada abajo:
Imagen en la página Contactos
197
Mapa de imagen
Ahora insertará el mapa de imagen de manera que este aparezca en la pancarta de
cada página Web.
1. Acceder a la Página principal y ubicar su cursor en la celda izquierda del

encabezamiento de pancarta. Insertar el archivo imagemap.jpg file desde su
carpeta Images.
Su pantalla debería verse como la que se muestra aquí.
Imagen de pancarta insertada
198
Crear representaciones alternativas

Ahora insertará algunas representaciones de texto alternativas para las imágenes
en su sitio Web. Hará esto desde la caja de diálogo Propiedades de imagen.
1. Sobre la Página principal, seleccionar GuitarAmp.gif, hacer clic derecho, escoger

Propiedades de Imagen y aparecerá la caja de diálogo Propiedades de imagen.
2. Seleccionar la solapa General y en el cajón Texto debajo de Representaciones

alternativas, escriba el siguiente texto:
Gráfico de guitarra eléctrica y amplificador
3. Seleccionar Aceptar.
Caja de diálogo Propiedades de imagen
199
5. Usar la siguiente tabla como una guía y agregue el texto alternativo apropiado a
todas las imágenes en el sitio Web. Asegúrese de guardar todos sus cambios
después de cada imagen.
NOTA: Para probar como aparecerá su texto alternativo

en un buscador, puede acceder a la vista Vista previa, o a
Vista previa en la ventana de su buscador. En cada caso,
mueva el cursor sobre la imagen y aparecerá el texto.
Archivo Image Texto alternativo

GuitarAmp.gif Gráfico de guitarra eléctrica y
amplificador.
CowboyGuitar.gif Gráfico de vaquero y guitarra
acústica
Gibson.jpg Fotografía de la guitarra eléctrica
Gibson
Ricken.jpg Fotografía de la guitarra eléctrica
Rickenbacker
GuildAcoustic.jpg Fotografía de la guitarra acústica
Guild
Ovation.jpg Fotografía de la guitarra acústica
Ovation
Imagemap.jpg Mapa de imagen de una joven con
una guitarra
NOTA: Usted necesita repetir el proceso para cada

imagen que haya sido copiada anteriormente.
6. Guardar su trabajo y acceder a la Página principal.
Ahora verá como luce el sitio Web en la ventana de su buscador y también verificará
el texto alternativo.
200
7. Seleccionar Vista previa en el explorador desde el menú Archivo luego

seleccionar el botón Vista previa de la caja de diálogo Vista previa en el
explorador.
Caja de diálogo Vista previa en el explorador
8. Maximizar la pantalla en la ventana del explorador y mover el cursor sobre la

imagen a la derecha de la Página principal.
Viste previa del sitio Web en la ventana del explorador
9. Acceder a cada página Web para ver como lucirá y luego seleccione el icono
Cerrar (X) en la esquina superior izquierda de la pantalla.
201
las instrucciones siguientes.
Trabajar en su proyecto final

1. Cerrar su sitio Web “guitarra usada” y abrir el sitio Web para su proyecto final.
2. Continuar trabajando en su proyecto final de sitio Web, usando cualquiera de las

Cuando haya salido del software, hacer clic sobre la flecha Siguiente para reanudar
la actividad.
202
Actividad 4 – Perfeccionar su sitio Web
Objetivo
Cuando haya completado esta actividad, tendrá los conocimientos y habilidades
necesarias para mejorar el diseño de su sitio Web mediante el perfeccionamiento de
la interactividad y efectos en FrontPage.
• Crear objetos destacados en el mapa de imagen para vincular a otras páginas

Web.
• Crear marcadores que vinculen a lugares específicos dentro del sitio Web.
• Insertar hipervínculos para otros sitios Web en la Internet.
• Usar efectos especiales DHTML para animar texto.
• Agregar un archivo WAV de sonidos de guitarra que toca cuando los visitantes
ingresan al sitio Web.
203
Instrucciones – Perfeccionar su sitio Web

FrontPage debería estar en su pantalla. Si no fuera así, hacer clic en el botón
Ejecutar una Aplicación y escoja FrontPage desde el menú. Siga las instrucciones de
Abrir el sitio Web

Abrir el sitio Web ÚltimaOportunidadXX (donde XX son sus iniciales).
NOTA: Puede ser más fácil agregar y organizar texto e

imágenes si activa la característica Mostrar todo.
Hacer clic en la vista Carpetas.
Crear mapa de imágenes

La primera cosa que hará es convertir su mapa de imagen en una imagen que
contenga objetos destacados que estén vinculados a cada página Web.
1. Seleccionar el mapa de imagen en la pancarta del sitio Web y aparecerá la barra

de herramientas Imágenes.
NOTA: Si la barra de herramientas Imágenes no

apareciera, seleccione Barra de herramientas e Imágenes
del menú Vistas. Puede usar el cursor para arrastrar la
barra de herramientas a cualquier lugar sobre la pantalla.
204
Ahora usará uno, o más de una combinación , de los botones de la barra de

herramientas Imágenes que se muestran abajo, para crear objetos resaltados en el
mapa de imagen.
ZONA ACTIVA
EN FORMA DE
POLIGONO
RESALTAR
ZONAS
SELEC- ACTIVAS
CIONAR
ZONA ACTIVA ZONA

RECTANGULAR ACTIVA
El icono Zona activa en forma de polígono le permite hacer diferentes tipos de

formas alrededor de un área. Por tal razón esta es, probablemente, la mejor opción
para este mapa de imagen.
NOTA: Cuando se usa el icono Zona activa en forma de

polígono para trazar una imagen, hacer clic, arrastrar, y
liberar para crear y conectar la línea.
2. Seleccionar el icono Zona activa en forma de polígono y trazar “Vínculos” sobre el

mapa de imagen.
3. Cuando el último segmento de línea esté conectado a su punto de inicio, hacer

clic y aparecerá la caja de diálogo Insertar hipervínculo.
205
Caja de diálogo insertar hipervínculo
4. En la ventana principal de la caja de diálogo Insertar Hipervínculo, hacer doble

clic sobre el objetivo del objeto resaltado, (que es la página Web a la cual los
usuarios accederán al hacer clic sobre el objeto destacado. En este caso
Vínculos.htm).
5. Guardar su trabajo y probar el vínculo usando la solapa Vista previa.
6. Repetir este proceso para todas las palabras que aparecen sobre el mapa de
imagen. (Las páginas a ajustar como objetivos corresponden a las palabras sobre
el mapa de imagen). Guardar su trabajo después de haber creado cada palabra
destacada y de haberlas probado con la solapa Vista previa. (Los hipervínculos
no trabajarán hasta que los haya guardado).
Agregar marcadores
Ahora agregará texto marcado específico sobre las páginas Acústica y Eléctrica.
Pero primero necesitará crear algún texto en la Página principal para usarlo como
objeto destacado para que vincule a los usuarios con los marcadores.
1. En la Página principal, (asegúrese de cambiar del modo Vista previa al modo

Normal), ubicar su cursor en el segundo párrafo a la derecha de “…..nuestros
precios y guitarras ……”.
206
2. Escriba "eléctricas y acústicas" para que se lea "….nuestros precios y guitarras

eléctricas y acústicas de características especiales..…” .
Antes de agregar texto Con el texto agregado
3. Acceder a la página Eléctrica y resaltar el encabezamiento "Rickenbacker 360

Deluxe". (Este no es un texto objetivo de marcador).
4. Seleccionar Marcador desde el menú Insertar.
Deberá aparecer Rickenbacker 360 Deluxe en la caja de diálogo Marcador (este

nombre es generado automáticamente desde el texto resaltado).
5. Hacer clic en Aceptar para que Rickenbacker 360 Deluxe quede aceptado como
un nombre de marcador. Guardar sus cambios.
Caja de diálogo Marcador
207
Una línea punteada aparecerá alrededor del texto indicando que este es un
marcador.
6. Acceder a la Página principal y seleccionar la palabra “eléctricas” en el párrafo

que usted acaba de cambiar.
7. Hacer clic derecho sobre “eléctricas” y seleccionar Hipervínculo desde el menú

descolgable.
8. En la caja de diálogo Insertar hipervínculo, hacer clic en Electric.htm y en la

solapa Marcador.
En el siguiente paso seleccionará el marcador que usted acaba de crear (en la

página Eléctrica) para que sea el objetivo.
9. En la caja de diálogo Seleccionar lugar del documento, hacer clic sobre el nombre
del marcador y seleccione Aceptar y nuevamente Aceptar.
Seleccione el lugar en el documento
El texto “eléctricas” se encuentra ahora subrayado y resaltado indicando que es un

objeto resaltado.
10. Guardar ambas páginas y probar el marcador.
Ahora cuando los usuarios hagan clic sobre el marcador, irán a un punto sobre la
página eléctrica donde ellos pueden ver una guitarra característica sin utilizar la
barra de desplazamiento.
208
11. Crear un marcador sobre la página Acústica usando los mismos procedimientos
que los utilizados para la página Eléctrica (asegúrese de escoger el Ovation
Standard Balladeer para el subencabezamiento en la página Acústica).
NOTA: Los Marcadores asumen los colores del

hipervínculo que han sido fijados para el sitio Web. Usted
puede cambiar los colores de todos los hipervínculos desde
el menú Propiedades de página.
Agregar hipervínculos
Ahora agregará algunos vínculos para otras páginas Web en la página Vínculos.
Este proceso es similar al de creación de marcadores.
1. En la página Vínculos, ubique su cursor junto a la primera viñeta de la lista

viñetada y escriba "Gibson".
2. Seleccionar este texto, hacer clic derecho, y seleccionar Hipervínculo desde el

menú descolgable.
3. En la caja de diálogo Crear hipervínculo, escribir "http://www.gibson.com" en el

cajón de Dirección y hacer clic en Aceptar.
www.gibson.com in URL: Box
Ahora el texto "Gibson" está resaltado y subrayado indicando que es un hipervínculo

al sitio Web guitarra Gibson.
209
Guardar su trabajo y probar el vínculo en la vista Vista previa. Hacer clic en la

solapa Normal cuando haya terminado.
NOTA: Los Marcadores asumen los colores del

hipervínculo que hayan sido fijados para el sitio Web.
Usted puede cambiar los colores de todos los hipervínculos
desde el menú Propiedades de página.
4. Repetir el mismo procedimiento y agregar los dos sitios Web de abajo a la lista
viñetada. Guardar y probar su trabajo mientras avanza.
Guild (www.guildguitars.com) Rickenbacker (www.rickenbacker.com)
NOTA: Usted también puede verificar el menú de

Direcciones descolgable para ver si FrontPage tiene
listado su sitio Web objetivo. Si lo está, entonces
selecciónelo desde la lista.
Listado del sitio Web Rickenbacker
Cuando haya terminado con todas las tres direcciones Web, su pantalla se verá
como la mostrada aquí.
Vaya a su Guía del Estudiante/Carpeta y complete la hoja de datos titulada

“Interactividad” en el Tema 5, Actividad 4.
Luego continúe con la siguiente actividad.
210
Vínculos agregados a la lista viñetada
Agregar texto animado

Ahora usted usará la barra de herramientas Efectos DHTML para crear texto que
se mueve a través de una pantalla.
1. Desde el menú Ver en la Página principal, seleccione Barra de herramientas y

luego Efectos DHTML.
2. Seleccionar el texto”PÁGINA PRINCIPAL”.
3. Sobre la barra de herramientas Efectos DHTML, hacer clic en la flecha – abajo

junto al cajón en y seleccionar Carga de página desde el menú descolgable que
aparecerá.
Carga de página seleccionada
Al seleccionar algún ítem en esta barra de herramientas, el ítem aparecerá en el

cajón de la parte superior.
211
4. Hacer clic en la flecha-abajo junto al cajón Aplicar y seleccionar Volar hacia

dentro desde el menú descolgable que aparecerá.
Después de seleccionar Volar hacia dentro, aparecerá un menú descolgable a

la derecha del cajón Aplicar con el título <Elegir configuración>.
5. Hacer clic en la flecha-abajo junto al cajón que dice <Elegir configuración> y

seleccionar Desde la izquierda en el menú descolgable que aparecerá.
6. Guardar su trabajo, probar el efecto con la solapa Vista previa, y hacer clic sobre
la solapa Normal cuando lo haya terminado.
7. Repetir este proceso para las páginas web Eléctrica, Acústica, Vínculos y
Contactos.
Agregar sonido
Ahora agregará un sonido de guitarra que los usuarios escucharán en el momento
que ingresen al sitio Web. El archivo Guitar.wav lo tiene guardado usted en su
carpeta Mis Documentos\Mis Webs\Sonidos.
NOTA: Este archivo de sonido podría no trabajar para

usuarios que no están usando el Internet Explorer. Pero es
una característica agregada muy bonita para aquellos que
pueden escucharla.
1. Hacer clic derecho en cualquier lugar sobre la Página principal y seleccionar

Propiedades de página desde el menú descolgable que aparecerá.
Aparecerá la caja de diálogo Propiedades de página.
212
Caja de diálogo Propiedades de página
2. Asegúrese que esté seleccionada la solapa General y hacer clic sobre el botón
Examinar.
3. En la caja de diálogo Sonido de fondo, localizar el archivo Guitar.wav en la

carpeta MisDocumentos\MisWebs\Sonidos, y hacer doble clic.
Archivo Guitar.wav en la carpeta Sonidos
4. En la caja de diálogo Propiedades de página, asegúrese que Siempre no esté

seleccionado en la sección Sonido de fondo, Bucle:.
5. Escriba "2" en el cajón junto a Bucle:, y hacer clic en Aceptar.
213
Archivo Sonido con bucle doble
Esto fijará el archivo de la guitarra para que toque dos veces en el momento en
que los usuarios ingresen a su sitio Web.
6. Guardar sus cambios y cuando aparece la caja de diálogo Guardar archivos

incrustados , seleccionar Aceptar.
7. Probar sus cambios usando el método Vista previa en explorador.
Editar página Contactos

Ahora agregará algún texto a la página Contactos para indicar que esta página
todavía no está completa.
1. Acceder a la página Contactos, escribir el siguiente texto a la derecha y debajo

del subtítulo, y guarde sus cambios.
Esta página está actualmente bajo construcción.
214
Su pantalla deberá verse como la mostrada aquí.
Texto agregado a la página Contactos

“Efectos” en el Tema 5, Actividad 4. Cuando usted haya completado las hojas de
datos, continúe con las instrucciones de abajo.
Trabajar en el proyecto final

1. Cerrar su sitio Web “guitarra-usada” y abra el sitio Web para su proyecto final,
ProyectoWebXX (donde XX son sus iniciales).

Cuando usted haya salido del software, haga clic en la flecha Siguiente para
215
216
Desarrollo Web Tema 6 – Publicación con FrontPage y mantenimiento Web
TEMA 6 – PUBLICACIÓN CON FRONTPAGE Y MANTENIMIENTO WEB
Objetivo
Cuando haya completado éste tema, podrá establecer un sitio Web listo para ser
publicado. Usted aprenderá acerca de los procedimientos y recursos necesarios
antes de la publicación lo cual le asegurará éxito en diferentes situaciones.
Usted podrá demostrar las actividades básicas del mantenimiento de un archivo de

FrontPage, y al mismo tiempo distinguir las diferencias del ambiente publicitario de
Internet e Intranet.
Resumen
Cuando haya completado éste tema, aprenderá como usar las vistas de Reportes y
Carpetas para verificar el tamaño de los archivos y organizar las carpetas Web en
preparación para la publicación. Usted también aprenderá como obtener los datos
de publicación apropiados, tales como nombres del dominio y direcciones del
servidor. Durante éste proceso, aprenderá los diferentes requisitos y
procedimientos para el establecimiento de publicidad a través de Internet e
Intranet. Además, aprenderá como usar el sistema de manejo de Tareas de
FrontPage para organizar e implementar electrónicamente las actividades
continuas del mantenimiento de la Web. Durante el proceso de crear, empezar y
concluir las tres tareas de mantenimiento, usted aprenderá a observar
automáticamente las mismas y también crear y editar formularios de comentarios.
Éste tema lo preparará aun más para el proyecto final: Creando su propio sitio
Web.
217
Actividad 1 – Publicar su sitio Web
Objetivo
Cuando haya completado esta actividad, usted tendrá el conocimiento y las
habilidades para usar FrontPage para preparar su sitio Web para su publicación en
diferentes situaciones.
Usted podrá:
• verificar el tamaño del sitio Web usando la vista Reportes.
• disminuir el tamaño del archivo.
• preparar archivos y carpetas para la publicación.
• distinguir entre publicidad de Internet e Intranet.
• establecer direcciones Web apropiadas, incluyendo los nombres del dominio.
• determinar como publicar un sitio Web a través de Internet.
• determinar como publicar un sitio Web a través de Intranet.
218
Instrucciones – Organizando sus archivos del sitio Web

Deberá tener el software de FrontPage en su pantalla. Sí no está, haga clic sobre el
botón Ejecutar una aplicación y escoja FrontPage del menú. Siga las siguientes
Abriendo el sitio Web

Habra el sitio Web ÚltimaOportunidadXX (las XX representan sus iniciales).
NOTA: Podrá ser más fácil añadir y arreglar el texto y las

imágenes si prende la característica Mostrar todo.
Haga clic sobre la vista Carpetas.
Consolidando archivos:
Según aprendió anteriormente, consolidar archivos en carpetas le facilita mantener
su sitio Web FrontPage. En ésta sección usted creará una carpeta Mejorar y
moverá archivos dentro de la misma.
1. En el panel izquierdo de la vista Carpetas, acceda el directorio

\ÚltimaOportunidadXX
2. En el menú Archivo, seleccione Nuevo y Carpeta.
3. Cuando aparece el cuadro Nueva Carpeta, escriba Mejorar y haga clic fuera del
cuadro.
219
4. Seleccione el archivo guitar.wav y arrástrelo dentro de la carpeta Mejorar en el

panel izquierdo.
Carpeta perfeccionar, creada
5. Repita éste procedimiento para el archivo animate.js.
NOTA: Después de que mueva éstos dos archivos, notará

que el archivo animate.js aparecerá en el directorio
ÚltimaOportunidadXX. FrontPage a veces mueve los
archivos cuando necesita accesarlos. Como este archivo es
solamente de 14KB, es relativamente pequeño, y no es
necesario borrarlo del directorio ÚltimaOportunidadXX
cuando aparece de nuevo en el mismo.
Su pantalla deberá lucir similar a la que le mostramos aquí:
Archivos movidos a la carpeta Perfeccionar
220
Removiendo los Archivos

Es también importante remover del sitio Web cualquier archivo innecesario antes
de la publicación. En el próximo procedimiento, usted borrará dos archivos y usará
la vista Reportes para ver la diferencia de tamaños en el sitio Web.
1. Use el panel Ver para acceder la vista Reportes.
2. Tome nota del número en la columna Todos los archivos (éste el tamaño total del
archivo del sitio Web)
Todos los archivos en la Vista Informes
3. Vaya a la hoja de datos Organizando archivos en la Guía del Estudiante/Carpeta

para el tema 6, Actividad 1. Llene éste número donde se indica en la hoja de
datos y regrese a ésta actividad.
4. En la vista Carpetas, accede a la carpeta Imágenes.
6. Borre los archivos ovation.psd y GuitarAmp.psp
NOTA: Asegúrese de que no borre ovation.jpg o

GuitarAmp.gif por error.
Cuando haya terminado, su pantalla deberá lucir similar a la que mostramos aquí.
221
Archivos gráficos eliminados
6. Acceda la vista Reportes y determine el tamaño del archivo modificado del sitio
Web.
7. Vaya a la hoja de datos Organizando los archivos en la Guía del

Estudiante/Carpeta para el Tema 6, Actividad 1. Llene éste número donde se
indica en la hoja de datos y regrese a ésta actividad.
Trabajando en el Proyecto final

1. Cierre su sitio Web “guitarras usadas” y abra el sitio Web para su proyecto final,
Proyecto WebXX (las XX representan sus iniciales).
2. Continúe trabajando en su proyecto final del sitio Web, usando cualquiera de las
herramientas que ha aprendido en éste tema.
NOTA: Es la decisión de su profesor determinar si le

permite publicar el sitio Web. Vea a su profesor para más
información e instrucciones.
Una vez haya salido del software, haga clic sobre la flecha Siguiente para reanudar
la actividad.
222
Actividad 2 – Manteniendo su sitio Web
Objetivo
habilidades para organizar e implementar las tareas de mantenimiento de un sitio
Web con la vista Tareas de FrontPage.
• organizar y establecer las prioridades electrónicamente de todo el trabajo.

• asignar las tareas electrónicamente a los miembros del equipo.
• observar y anotar el progreso electrónicamente.
• implementar y completar las tareas del mantenimiento continuo
electrónicamente.
• crear formularios interactivos.
• distinguir entre los diferentes tipos de elementos del formulario.
• editar y modificar los elementos del formulario y los campos de datos.
• integrar el Verificador de Ortografía y las funciones de vista Tareas.
223
Instrucciones – Completando tareas A (pantalla 14 a la 26)

Deberá tener el software de FrontPage en su pantalla. Si no está, haga clic sobre el

Abra el sito Web ÚltimaOportunidadXX (las XX representan sus iniciales) en la
vista Carpetas.
NOTA: Podrá ser más fácil añadir y arreglar el texto y las imágenes si
prende la característica Mostrar todo.
Creando una tarea desvinculada

Según aprendió anteriormente, las tareas desvinculadas no están asociadas con
ninguna página Web en particular.
1. Acceder vista Tareas.
2. En el menú Archivo, seleccione Nuevo y Tarea.
3. En el cuadro de diálogo Nueva Tarea, entre la información en la próxima página

en los lugares apropiados.
224
Nombre de la Tarea: Escriba “marque los Botones de navegación”

Asignado a: Intro. (Enter) XXX (las X representan el nombre de su compañero u
otro estudiante)
Prioridad: marque Medio

Descripción: Escriba “Verifique dos veces cada barra de navegación de cada
página Web para asegurarse de que todos quedarán vinculados al lugar
apropiado”
Información de tarea no vinculada
4. Cuando la información esté correcta, haga clic en Aceptar.
La tarea desvinculada aparece en la vista Tareas.
Vista Tareas en Tareas no vinculadas
NOTA: Usted necesita desplazarse hacia la derecha para

leer todo el contenido de la columna de Descripción. Si
todavía le falta texto, lo puede leer en el cuadro de diálogo
Nueva Tarea. Sólo tiene que hacer doble clic en la tarea
para accederla.
225
Creando tareas vinculadas

Ahora va usted a crear dos tareas vinculadas: la primera será vinculada a la página
de inicio y la próxima a la página de contacto.
1. Acceda la vista Carpetas y seleccione página de inicio (index.htm).
2. Desde el menú Archivo, seleccione Nuevo y Tarea.
3. En el cuadro de diálogo Nueva Tarea, entre la siguiente información en los

lugares apropiados.
Nombre de la Tarea: Escriba “Verificar ortografía”

Asignado a: Intro (Enter)XXX (las X representan su nombre)
Prioridad: Marque Alto
Descripción: Escriba “Verificar la ortografía en la página de inicio. Asegurese de
incluir la ciudad y la dirección completa.”
4. Cuando la información esté correcta, haga clic en Aceptar y acceda la vista

Tarea.
La tarea vinculada aparece en la vista Tareas.
Información de Tarea vinculada
La Segunda tarea vinculada la creará usted sólo.
1. Siga las instrucciones de arriba para crear una tarea vinculada para la página
de contacto.
2. En el cuadro de diálogo Nueva Tarea entre la información en la página siguiente

en el lugar apropiado.
226
Nombre de la Tarea: Escriba “Crear formulario de comentarios”

Asignado a: Intro (Enter) XXX (las X representan su nombre)
Prioridad: Marque Medio
Descripción: Escriba “Crear un formulario de comentarios en la página de
contacto que consistirá de tres cuadros de texto de una línea y un cuadro
descolgable. Los cuadros de texto incluirán un cuadro de Nombre, un cuadro de
Correo electrónico y un cuadro con la Dirección postal. El cuadro descolgable
consistirá de cuatro ítems: Boletín de la Guitarra Especial, Catálogo de
Guitarras, Lista de Compradores y otros Formularios para Ordenar”.
Después de que usted haya creado ésta tarea, la segunda tarea vinculada aparece
en la vista Tareas.
Segunda Tarea vinculada agregada
3. Acceda ver Página y guarde los cambios.
4. Vaya a su Guía del Estudiante/Carpeta y complete las hojas de datos llamadas

“Trabajando con tareas” en el tema 6, Actividad 2. Cuando haya completado las
hojas de datos, continúe con las siguientes instrucciones.
227
Instrucciones – Completando Tareas B (Pantalla 26 de la 26)

Deberá tener el software de FrontPage en su pantalla. Si no está, haga clic sobre el

Abra el sitio Web ÚltimaOportunidadXX (las XX representan sus iniciales) en la
vista Carpetas.
NOTA: Puede ser más fácil agregar y organizar el texto y las imágenes si
pasa a la característica Mostrar todos
Completando las tareas vinculadas

Usted usará ahora la característica Tarea de FrontPage para completar dos tareas
vinculadas y marcarlas como terminadas. La primera tarea es crear un formulario
de comentarios.
1. Acceda a la vista Tareas y de la lista de tareas que usted creó, marque la tarea
Crear formulario de comentario.
2. En el menú Edición, seleccione Tareas y Iniciar Tarea.
228
Insertando formulario de elementos
Tareas, Iniciar tarea seleccionada
1. En la página de contacto, remplace la primera línea del texto de abajo con la

segunda línea del texto de abajo.
Remplace: “Ésta página está en proceso de construcción.”
Con: “Por favor use éste formulario para colocar su nombre en nuestra lista de
clientes o para pedir más información.”
2. Alinear hacia la izquierda la nueva frase con el título del “Contacto” encima del
mismo.
3. Coloque el cursor encima de la tabla en sección de la parte baja de la página y

desde el menú Insertar, seleccione Formulario y Formulario nuevamente.
El marco del formulario de comentarios aparece en la tabla con los botones Enviar y
Restablecer.
4. Coloque el cursor antes del botón Presentar, apriete Cambiar y Entrar para
agregar varias líneas antes de los botones, y entonces apriete el icono Centro en
la barra de herramientas Formateo.
NOTA: Apretando Cambiar e Intro (Enter) le agrega

líneas con un espacio.
229
5. Coloque el cursor en la parte superior del formulario (en la Segunda línea del
formulario), escriba “Su nombre” (Requerido)”, y agregue un espacio de una sola
línea.
Formulario de comentarios insertado
6. Del menú Insertar, seleccione Formulario y Cuadro de texto.
230
Cuadro de texto de una línea
7. Repita éste proceso para agregar dos cuadros de texto adicionales con dos líneas
de espacio entre ambas.
El nombre de los cuadros de texto son:
“Su correo electrónico” y

“Su dirección postal (Requerido)”
NOTA: A medida que agrega líneas de espacio, el

formulario se agrandará. Sólo tiene que usar la clave
Borrar para eliminar los espacios en exceso.
231
Cajones para tres textos
8. Agregue dos líneas de espacio, escriba “Clic en los ítems que quiere recibir” e
inserte otra línea de espacio.
9. Usando el mismo método de arriba, inserte un cuadro descolgable.
Cuando haya terminado, su pantalla deberá lucir similar a la que mostramos aquí:
Menú desplegable
232
Editando cuadros de texto

1 Haga doble clic sobre el cuadro de texto Su Nombre.
2. En el diálogo de propiedades del cuadro de texto, escriba “Nombre_usuario"”(éste

es el nombre del campo del formulario) después de Nombre: “20” después de
Ancho en caracteres: y seleccione No después del campo Clave.
NOTA: Usted deberá usar un subrayador cuando quiera

indicar un espacio en el campo Nombre:
Caja de diálogo Propiedades de cuadro de texto
4. Repita éste proceso para editar los otros dos cuadros de texto.
Toda la información de las propiedades del cuadro de texto son las mismas
excepto el campo del Nombre. Entre la siguiente información en los campos de
nombre para los cuadros apropiados.
“Dirección del correo electrónico”

“Dirección postal”
233
Editando el cuadro descolgable

El proceso de editar el cuadro descolgable incluye agregar las opciones del menú.
1. Haga doble clic en el cuadro descolgable, escriba “Ítems ordenadas” al lado del
Nombre: escriba “3” al lado de Alto: seleccione Sí al lado de Permitir selecciones
múltiples: haga clic en Agregar.
2. En el cuadro de diálogo Agregar opción, escriba “Boletín de Guitarras

Especiales” debajo de Opción: asegúrese Valor específico no esté marcado y que
Estado inicial: no esté seleccionado.
Caja Agregar opción
Los ítems que acaba de entrar aparecen en el cuadro de diálogo Propiedades del
cuadro descolgable.
4. Repita el proceso para cada una de las otras ítems que aparecen en el menú
descolgable (en la lista de abajo)
Catálogo de Guitarra
Lista de Clientes
Formulario para Ordenes
234
Items del Cuadro desplegable
5. Cuando haya terminado, haga clic en Aceptar en el cuadro de diálogo

propiedades del cuadro descolgable.
6. Borre cualquier espacio en exceso entre el cuadro descolgable y la parte inferior

del formulario (deje sólo dos espacios)
235
Su pantalla deberá lucir similar a la que mostramos aquí:
Pantalla con menú descolgable
NOTA: Usted querrá centrar la CowboyGuitar.gif

verticalmente para retener el balance estético de la
página. Para conseguirlo, coloque el cursor al lado de
imagen y apriete el botón Centrar verticalmente en la
barra de herramienta Imágenes. Usted también puede
mover hacia abajo la imagen línea por línea insertando los
retornos antes de los gráficos.
236
Validando los cuadros de texto

Ahora usted va a crear reglas de validación para los campos del formulario en cada
uno de los cuadros en el formulario de comentarios.
1. Haga doble clic sobre el cuadro de texto Su nombre y seleccione Validar en el

cuadro de diálogo Propiedades del cuadro de texto.
2. Seleccione Texto en el menú descolgable Tipo de datos (esto le permite limitar la

entrada del texto en los campos de formato de Texto)
3. En el formato de Texto seleccione Letras, Espacios en blanco y Otros. Al lado de

otros escriba un guión (-). (Esto limitará la entrada de texto colocada a éstas
características)
4. Seleccione Requerido en Longitud de datos (esto hace que la entrada sea

necesaria)
5. Escriba “Su nombre” al lado de Mostrar nombre: (Este es el nombre que verán
los usuarios cuando aparece un mensaje erróneo. Éste cuadro sólo es activado
después de que escoja Requerido)
6. Haga clic en Aceptar para cerrar el cuadro de diálogo Cuadro Validar Texto y de
nuevo haga clic en Aceptar para cerrar el cuadro de diálogo Propiedades del
Cuadro de Texto.
Caja de diálogo Validar cuadro de texto
237
7. Repita éste proceso para cada uno de los cuadros de una línea de texto restantes.
Recuerde de hacer que las Lista de direcciones postales quede como requerido
pero deje los cuadros de Correo electrónico como no requerido.
Validando el menú descolgable

Usted tiene la opción de hacer que el menú sea requerido o no requerido. Cuando lo
hace como no requerido, si los usuarios no completan éste cuadro, usted les enviará
sólo correo general. Sí usted desea hacer que éste menú sea requerido en éste
momento del proceso. Usted deberá notificar al usuario de dicha decisión.
1. Colocar el cursor entre la palabra “recibir” y antes del punto agregue un espacio
y escriba “(Requerido)”
2. Haga doble clic en el menú descolgable y seleccione Validar sobre el cuadro de

diálogo Propiedades del cuadro descolgable.
3. En el cuadro de diálogo descolgable Validar, seleccione Datos Requeridos, escriba

“1” después del ítem Mínimo: y escriba “Seleccionar por lo menos un ítem” en el
cuadro Mostrar nombre.
Caja Validar menú desplegable
4. Haga doble clic en Aceptar.
238
Su pantalla deberá aparecer similar a la que mostramos aquí:
Página del Formulario terminado
Marcando una tarea vinculada como completa

Ahora usted va a usar la característica Tareas de FrontPage para marcar como
completa la tarea de crear un comentario.
1. Después de completar todos los cambios, haga clic en el icono Guardar.
2. Haga clic en Sí cuando aparezca el mensaje preguntando si quiere marcar los

cambios como completos.
Tarea vinculada marcada como completada
239
Completando una tarea vinculada por sí sola.

Ahora usted va a usar la característica tarea para empezar y completar la otra tarea
vinculada: Verificar ortografía.
1. Antes de empezar la tarea, acceda a la página de inicio y cambie una de las

palabras para que aparezca con un error de ortografía. Por ejemplo, en la
primera frase cambie “usado” por “usad”
NOTA: Sí desea, también puede cambiarle la ortografía a

la palabra “Bailarín ” en la dirección. Como éste es un
nombre ficticio de una calle, podría ser escrita como
“Bailar“ y estaría correcta.
2. Empiece la tarea de ortografía de la misma manera que hizo cuando creó el

formulario de comentarios.
Completando una tarea desvinculada

Ahora usted va a usar la característica Tarea para completar una tarea
desvinculada. Necesita marcar manualmente éstas tareas como terminadas.
3. Acceda cada página Web y ensaye los hipervínculos de la barra de navegación.

(Éste proceso será más rápido en el modo Vista previa)
NOTA. En éste momento, sus hipervínculos deberán de

funcionar correctamente.
4. Cuando funcione correctamente cada vínculo, acceda a la vista Tareas y

seleccione la tarea desvinculada.
5. Del menú Editar, seleccione Tarea y Marcar como completa.
240
Tareas, Marcar como completada
Cuando acceda a la vista Tarea, su pantalla deberá lucir similar a la que mostramos
aquí:
Tarea marcada como completada
6. Vaya a la Guía del Estudiante/Carpeta y complete las hojas de datos llamadas

“Trabajando con formularios”. Cuando haya completado las hojas de datos,
continúe con las instrucciones de abajo.
Trabajando en el proyecto final

1. Cierre su sitio Web “guitarras usadas” y abra el sitio Web para su proyecto final.
2. Continúe trabajando en su proyecto final del sitio Web, usando cualquiera de las
herramientas que aprendió en éste tema.
241
242
Desarrollo Web Tema 7 – Fundamentos de programación HTML
TEMA 7 – FUNDAMENTOS DE PROGRAMACIÓN HTML
Objetivo
Cuando haya completado éste tema, tendrá la habilidad para establecer una página
Web usando el lenguaje de programación HTML. Podrá identificar e implementar el
código HTML necesario para organizar y formatear texto en su página Web.
También desarrollará la habilidad para modificar gráficos para su página Web
usando Paint Shop Pro. Entonces podrá añadir éstos gráficos a su pagina Web.
Finalmente, podrá crear tablas para su página Web con el propósito de mostrar
información y / o usar como una herramienta de organización para su página, podrá
demostrar habilidad en la creación de hipervínculos internos y externos.
Revisión general
La gran mayoría de las empresas prósperas tienen sus páginas Web, las que
permiten a sus clientes el comprar productos y servicios en línea, verificar el valor
de sus acciones, descargar software, acceder información sobre la empresa, o
descubrir oportunidades de Carrera en esa compañía.
Éstas empresas contratan a desarrolladores para crear sus sitios Web. Aunque es
cierto que hay muchos paquetes de software para desarrollar páginas Web,
incluyendo FrontPage de Microsoft, es crucial para el desarrollador Web
comprender la programación con HTML.
La programación HTML es el “lenguaje” detrás de todo lo que ve usted en una

página Web. El comprender el código HTML le permitirá el crear su página Web
empezando de cero y controlar la apariencia de todo elemento en su página.
Usted creará en este tema una página Web para una librería ficticia. Definirá la
presentación y formato del texto, añadirá gráficos y color, creará una tabla para
mostrar información específica. Añadirá también hipervínculos internos y externos
a su página. Mantendrá también una lista activa de los códigos de HTML que vaya
aprendiendo para tenerlos a mano como referencia rápida.
243
Equipo necesario
WordPad
Paint Shop Pro
Guía del Módulo
Guía del Estudiante / Carpeta

UNIX - un sistema popular de multiusuario, multitarea desarrollado por los
Laboratorios Bell a comienzos de los 1970s. Diseñado como un sistema pequeño y
flexible para uso exclusivo de programadores, no es tan fácil para el usuario como
son OS/2 o Windows NT.
Etiqueta HTML - la información contenida entre corchetes (<>) que indica las
características o elementos de una página.
244
Actividad 1 – Estructura de HTML: técnicas básicas y conceptos
Objetivo
Cuando complete esta actividad, tendrá el conocimiento y la habilidad para
comenzar a crear una página Web usando HTML.
Usted podrá:
• definir etiquetas básicas en HTML.
• crear un título para su página Web.
• crear cabeceras.
• insertar párrafos y saltos de línea.
Práctica de HTML 7-1-A

Debe tener WordPad en su pantalla. Si no lo está, haga clic en el botón Ejecutar una
aplicación y seleccione WordPad del menú. Sigua las instrucciones detalladas a
seguir hasta completar la actividad.
1. Escriba <HTML> al comienzo de la página de WordPad. Presione Enter cuatro

veces y escriba </HTML>. Durante el curso de ésta actividad, y de las que vienen
que dependerán de ésta, asegúrese que su etiqueta HTML de final esté siempre
al final de la página.
2. Haga clic en la primera línea en blanco bajo la etiqueta <HTML>. Escriba

<HEAD> y presione Enter.
3. Escriba <TITLE>Hojas de Otoño: libros usados y de baja circulación</TITLE>.

Presione Enter.
4. Escriba </HEAD>
245
Su pantalla debe ser igual a la Figura 7-1-A.
Figura 7-1-A
Para guardar el archivo en formato HTML, haga clic en Archivo, y luego en Guardar
como. Haga clic en la flecha de abajo al lado de Guarde en: en la parte superior del
cuadro de diálogo de Guardar como. Si es necesario, seleccione la unidad C: y luego
haga clic doble en la carpeta llamada Archivos HTML. En la parte inferior del
cuadro de diálogo de Guardar como, haga clic en la flecha de abajo al lado de Tipo: y
seleccione Documento de texto. Luego escriba en el cuadro de Nombre de archivo:
“LibreríaXX.html” (donde XX representa sus iniciales). Haga clic en Guardar.
246
Figura 7-1-B
Haga clic en el menú Archivo y seleccione Salir.
Una vez que haya salido del software, haga clic en la flecha de Siguiente para
resumir la actividad.
Práctica de HTML 7-1-B

WordPad debe estar en su pantalla. Si no lo está, haga clic en Ejecutar una
aplicación y seleccione WordPad del menú. Siga las instrucciones a continuación
hasta completar la actividad.
Haga clic en Archivo en la barra de menú, y seleccione Abrir. Si es necesario,

seleccione la unidad C: del menú descolgable de Buscar en:
Haga clic doble en la carpeta Archivos HTML. En la parte inferior del cuadro de
diálogo de Abrir, haga clic en la flecha de abajo al lado de Tipo de archivos: y
seleccione Todos los documentos. Seleccione el archivo LibreríaXX.html (donde XX
representa sus iniciales) y luego haga clic en Abrir.
La primera etiqueta a añadir a su página será <BODY></BODY>. Haga clic con el

mouse en la línea en blanco debajo la etiqueta de final </HEAD>. Escriba <BODY>.
247
Luego haga clic con el mouse delante la etiqueta de final </HTML> y escriba
</BODY>. Su pantalla debe ser similar a la Figura 7 –1-C.
Figura 7-1-C
Para crear la cabecera de su página, haga clic en la línea en blanco debajo de la

etiqueta de comienzo <BODY> y escriba:
<H1>Hojas de Otoño: libros usados y de baja circulación</H1>
Luego presione Enter.
248
Usando la Figura 7-1-D como guía, añada el texto que le queda, con sus etiquetas
HTML.
Figura 7-1- D
Cuando haya añadido todo el texto y las etiquetas HTML, haga clic en el botón
Guardar en la barra de herramientas. Luego minimice WordPad.
Haga clic en el botón Internet para abrir su navegador Web. Haga clic en Archivo y
luego en Abrir.
Haga clic en el botón Examinar en el cuadro de diálogo de Abrir. Seleccione la

unidad C: del menú descolgable de Buscar en:, y haga clic doble en la carpeta
Archivos HTML.
Haga clic doble en el archivo LibreríaXX.html (donde XX representa sus iniciales), o

seleccione el archivo y haga clic en el botón Abrir.
249
Haga clic en Aceptar del cuadro de diálogo de Abrir. Su página Web debe ser como
la Figura 7-1-E.
Figura 7-1-E
Si descubre cualquier error, regrese a su archivo HTML de texto (usando el botón

WordPad de su barra de tareas.) Haga las correcciones necesarias y haga clic en
Guardar en la barra de herramientas. Regrese al navegador de Internet y haga clic
en el botón Actualizar. Esto actualizará su página mostrando las correcciones.
Cierre el navegador haciendo clic en el botón X en la esquina superior derecha.
Cierre WordPad hacienda clic en el botón X en la esquina superior derecha.
250
Actividad 2 – Apariencia y formato del texto
Objetivo
Cuando complete esta actividad, usted tendrá el conocimiento y la habilidad para
organizar y formatear texto en un documento de HTML.
Usted podrá:
• Alinear el texto en la página Web.
• Cambiar los atributos de fuente.
• Crear diferentes tipos de listas.
• Añadir anotaciones y líneas horizontales.

Haga clic en el menú Archivo y seleccione Abrir. Si es necesario, seleccione la

unidad C: del menú descolgable de Buscar en: Haga clic doble en la carpeta
Archivos HTML.
En la parte inferior del cuadro de diálogo de Abrir, haga clic en la flecha de abajo al
lado de Tipo de archivos: y seleccione Todos los documentos. Haga clic doble en el
archivo LibreríaXX.html (donde XX representa sus iniciales).
Hay dos lugares donde aparece el nombre de su librería. Recuerde, el nombre dentro
las etiquetas <TITLE> se verá en la barra de título del navegador y no será parte
del texto de la página. Ahora centrará el nombre de la librería que está dentro las
etiquetas <H1>.
Haga clic con el mouse antes de la L de Libros, cosa que el cursor esté entre la
etiqueta <H1> y la letra L.
Añada la siguiente etiqueta: <P ALIGN="CENTER">. Asegúrese de incluir comillas

alrededor de la palabra CENTER.
Como el texto debajo de éste título no empieza con la etiqueta de párrafo, el

navegador lo considerará como parte del texto anterior (que en este caso es el
nombre de la librería). Por lo tanto, es necesario el insertar una etiqueta de párrafo
al comienzo de la primera línea de texto. De otra manera, todo el párrafo quedará
centrado como el título.
251
Haga clic con el mouse al comienzo del párrafo, antes de la palabra Si, y escriba
<P>.
Haga clic en el botón Guardar de la barra de herramientas.
Su pantalla debe ser como la Figura 7-2-A.
Figura 7-2-A
Ahora haga clic con el mouse al final del primer párrafo y presione Enter.
Escriba la siguiente etiqueta y texto:
<P ALIGN="RIGHT">Llámenos al 1-800 555-1234
Ésta etiqueta alineará a la derecha el texto que escribió.
252
Su documento debe ser como la Figura 7-2-B.
Figura 7-2-B
Haga clic en el botón Guardar de la barra de herramientas, luego minimice

WordPad.
Haga clic en el botón Internet para abrir su navegador Web. Haga clic en Archivo
del menú y seleccione Abrir.
Haga clic en el botón Examinar del cuadro de diálogo de Abrir. Seleccione la unidad
C: del menú descolgable de Buscar en: Haga clic doble en la carpeta Archivos
HTML.

253
Haga clic en Aceptar del cuadro de diálogo de Abrir. Su página Web se debe ver
como lo muestra la Figura 7-2-C. Si no es similar, repita las instrucciones
anteriores, verificando todos los detalles: comillas y corchetes de etiqueta.
NOTA: Es aceptable que su texto tenga aspecto algo

diferente al de las figuras de éste manual. Diferentes
navegadores pueden mostrar texto en forma diferente
dependiendo de sus parámetros por omisión: el tipo o
tamaño de fuente, etc.
Figura 7-2-C
Haga clic en el botón X en la esquina superior derecha para cerrar el navegador de

Internet.
Maximice WordPad y luego haga clic en el botón X en la esquina superior derecha

para cerrarlo.
254


Archivos HTML.
El primer tipo de lista que creará es el de lista numerada.
Haga clic con el mouse en la línea después de Juan Rulfo, y presione Enter.
Añada el siguiente texto:
<P>Usted puede comprar en línea. Nuestra tienda en línea está dividida en

secciones numeradas para hacerle más fácil la búsqueda de algún libro en
particular. Las secciones son:
<OL TYPE="1">
<LI>Ficción
<LI>No ficción
<LI>Ciencia ficción y misterio
<LI>Literatura extranjera
<LI>Literatura de niños
<LI>Viajes
</OL>
255
Su pantalla debe ser como lo muestra la Figura 7-2-D.
Figura 7-2-D
Haga clic en el botón Guardar de la barra de herramientas, luego minimice

WordPad.
Haga clic en el botón Internet para abrir su navegador Web. Haga clic en Archivo
del menú y seleccione Abrir.
C: del menú descolgable de Buscar en: Haga clic doble en la carpeta Archivos
HTML.

256
Haga clic en Aceptar del cuadro de diálogo de Abrir. La ventana de su navegador

debe verse como lo muestra la Figura 7-2-E. Si no es similar, repita las
instrucciones anteriores, verificando todos los detalles: comillas y corchetes de
etiqueta.
Figura 7-2-E
Ahora presentará la lista de autores como una lista de viñetas usando las etiquetas
de lista sin orden.
Minimice la ventana del navegador y maximice la de WordPad. Haga clic con el

mouse entre la etiqueta <P> y la J de Jorge Luis Borges. Escriba:
<UL TYPE="DISC"><LI>.
Luego haga clic después de la etiqueta <BR> delante el nombre de cada autor, y
escriba <LI>.
Haga clic en la línea en blanco debajo del último autor y escriba </UL>.
257
1. Haga clic en Guardar en la barra de herramientas. Su pantalla debe ser como lo

muestra la Figura 7-2-F.
Figura 7-2-F
Ahora haga clic en el botón del navegador en la barra de tareas para maximizar su
ventana. Haga clic en el botón Actualizar en la barra de herramientas del
navegador. La pantalla de su navegador debe ser como la Figura 7-2-G. Si no es
similar, repita las instrucciones anteriores, verificando todos los detalles: comillas y
corchetes de etiqueta (< >).
258
Figura 7-2-G
A continuación añadirá a su página Web las indicaciones para llegar a su librería.

Usará una lista de definición para lograrlo.
Haga clic en el botón WordPad (que ya tendrá su archivo) en la barra de tareas.

Haga clic con el mouse después de la etiqueta </OL>, y presione Enter dos veces.
Escriba las siguientes etiquetas y texto:
<DL>
<DT>Indicaciones a la librería:<DD> Tome la ruta 1 a la calle Reyes. Siga por
la Reyes hasta llegar a la ruta 18 sur. La tienda Hojas de Otoño queda a la
derecha apenas pase el segundo semáforo.</DL>
Su pantalla debe ser similar a la Figura 7-2-H
259
Figura 7-2-H
Haga clic en el botón Guardar en la barra de herramientas y regrese al navegador

usando su botón en la barra de tareas.
260
Haga clic en el botón Actualizar en la barra de herramientas del navegador. La

pantalla de su navegador debe ser como la Figura 7-2-I. Si no es similar, repita las
instrucciones anteriores, verificando todos los detalles: comillas y corchetes de
etiqueta (< >).
Figura 7-2-I
A continuación usará etiquetas de letras negrita y cursiva para hacer que las
indicaciones sean más visibles.
Regrese a WordPad usando su botón en la barra de tareas. Haga clic con el mouse
entre la etiqueta <DT> y la letra I de Indicaciones.
Escriba <B>. Luego haga clic entre los dos puntos después de librería y la etiqueta
<DD>. Escriba </B>.
Luego, haga clic con el mouse después de la etiqueta <DD> y antes de la

palabra”Tome”. Escriba <I>.
261
Haga clic con el mouse entre el punto final de la oración y la etiqueta </DL>.
Escriba </I>. Haga clic en el botón Guardar de la barra de herramientas. Su
pantalla debe ser como la Figura 7-2-J.
Figura 7-2-J
Ahora regrese a su navegador usando el botón de la barra de tareas, y haga clic en

el botón Actualizar en su barra de herramientas. La pantalla de su navegador debe
ser como la Figura 7-2-K. Si no es similar, repita las instrucciones anteriores,
verificando las etiquetas y sus corchetes (<>).
262
Figura 7-2-K
Las siguientes etiquetas que practicará en ésta actividad son las de tamaño, tipo y
color de fuente. Pondrá éstas etiquetas en forma jerarquizada, y las usará para dar
énfasis al número de llamada gratuita de su librería.
Regrese a WordPad usando su botón en la barra de tareas.
Haga clic con el mouse entre la etiqueta <P ALIGN=”RIGHT”> y la L de Llámenos.

Escriba lo siguiente:
<FONT SIZE="+2" COLOR="GREEN" FACE="ARIAL, HELVETICA">
Haga clic con el mouse al final del número de teléfono y escriba </FONT>
263
Su pantalla debe ser similar a la Figura 7-2-L. Pero, es posible que sus etiquetas y
texto estén en una misma línea y no como lo muestra el gráfico. El texto ha sido
modificado en el gráfico para que pueda ver las etiquetas y el texto con más
claridad.
Figura 7-2-L
264

el botón Actualizar en la barra de herramientas. La pantalla de su navegador debe
ser como la Figura 7-2-M. Si no es similar, repita las instrucciones anteriores,
verificando las etiquetas, comillas y corchetes de etiqueta (< >).
Figura 7-2-M
Las dos últimas etiquetas que practicará en ésta actividad son las de anotación y de
líneas horizontales. La etiqueta de anotación la usaremos para resaltar una cita de
periódico, y la etiqueta de línea horizontal para separar del resto de la página las
instrucciones para llegar a la librería.
Regrese a WordPad usando su botón en la barra de tareas. Haga clic con el mouse
después de la etiqueta </OL> y presione Enter. Escriba las siguientes etiquetas y
texto:
Esto es lo que <I>El Independiente</I>dijo acerca de nuestra librería:

<BLOCKQUOTE>Hojas de Otoño tiene la mejor colección de libros usados del
estado. La colección es completa, sus vendedores son amigables y conocedores,
y los precios son razonables. ¡Éste periódico le da 5 estrellas a Hojas de
Otoño!</BLOCKQUOTE><HR>
265
Haga clic en el botón Guardar de la barra de herramientas. Su pantalla debe ser

similar a la Figura 7-2-N.
Figura 7-2-N
266

el botón Actualizar en la barra de herramientas. La pantalla de su navegador debe
ser como la Figura 7-2-O. Si no es similar, repita las instrucciones anteriores,
verificando las etiquetas y sus corchetes (< >).
Figura 7-2-O
Haga clic en el botón X en la esquina superior derecha para cerrar el navegador.

Luego haga clic en el botón X de WordPad para cerrar éste programa.
267
Actividad 3 – Gráficos y color
Objetivo
Cuando complete esta actividad, usted tendrá el conocimiento y habilidad para usar
color y gráficos en su página Web.
Usted podrá:
• seleccionar el formato de gráficos correcto para su página Web.
• alinear imágenes en su página Web.
• envolver texto alrededor de imágenes en varias y diferentes formas.
• insertar espacio alrededor de sus gráficos.
• añadir color e imágenes de fondo a su página Web.
Organizar su Página Web

hasta completar ésta actividad.

Archivos HTML.
Antes de añadir nuevas etiquetas, usted practicará un poco con las que ya aprendió
añadiendo cabeceras de sección para organizar su página de tal manera que sea
más fácil de leer.
En la primera línea de texto debajo el número de teléfono, haga clic con el mouse
entre la etiqueta <P> y la palabra Hojas.
Escriba lo siguiente :
<B><FONT SIZE="+2">Autores, etc.</FONT></B><BR>
268
Esto añade la cabecera de sección “Autores, etc.”, en texto negrita y dos tamaños
más grandes que el de por omisión. Además inserta un salto de línea. Para ver los
cambios, haga clic en el botón Internet para abrir el navegador Web. Haga clic en
Archivo en la barra de menú, y seleccione Abrir.
C: del menú descolgable de Buscar en: y haga clic doble en la carpeta Archivos
HTML.

Haga clic en Aceptar del cuadro de diálogo de Abrir. Su navegador debe ser como lo
muestra la Figura 7-3-A. Si no es así, verifique sus etiquetas y comillas.
Figura 7-3-A
Ahora añadirá dos cabeceras de sección más.
En WordPad, haga clic con el mouse entre la etiqueta <P> y la palabra “Usted” en la
primera línea después de la lista de autores.
<B><FONT SIZE="+2">Compras en línea</FONT></B><BR>
Haga clic con el mouse antes de la palabra “Esto” al comienzo de la línea debajo de
la etiqueta de final </OL>.
<B><FONT SIZE="+2">Críticas</FONT></B><BR>
269
Haga clic en Guardar de la barra de herramientas. Su pantalla debe ser similar a la

Figura 7-3-B.
Figura 7-3-B
Regrese a la ventana del navegador usando su botón en la barra de tareas. Haga clic
en el botón Actualizar de la barra de herramientas del navegador.
270
Su ventada del navegador debe ser similar a la Figura 7-3-C.
Figura 7-3-C
Ahora que la página esta más organizada, puede añadir gráficos y fondos.
Cuando haya completado estas instrucciones, pase a la actividad “Editar una

imagen con Paint Shop Pro.”
271
Editar una imagen con Paint Shop Pro

Antes de añadir una imagen a su página Web, debe abrirla desde un programa para
editar imágenes para ver cuan grande es, y modificar su tamaño si es necesario.
Usará Paint Shop Pro con este objetivo.
Minimice WordPad y su navegador de Internet, y haga clic en el botón Ejecutar una

aplicación.
Escoja Paint Shop Pro del menú.

Archivos HTML.
Haga clic doble en la carpeta titulada “Imágenes”. Asegúrese que el cuadro de

verificación Mostrar vista previa en la base del cuadro de diálogo de Abrir está
seleccionado. Si no lo está, haga clic en ese cuadro.
Haga una revisión previa de diferentes imágenes haciendo clic una vez en sus
archivos. Cuando encuentre una imagen que desee añadir a su página Web, haga
clic doble.
Añadirá ésta imagen al lado del título de la página Web modelo, así que no debe ser
muy grande. Para cambiar el tamaño de la imagen, seleccione Imagen en la barra
de menú y escoja Redimensionar del menú descolgable.
272
Tiene algunas opciones en el cuadro de diálogo de Redimensionar, como lo muestra

la Figura 7-3-D.
Figura 7-3-D
Los números en los campos Ancho y Alto variarán dependiendo de cual imagen ha
escogido.
Haga clic en la opción Porcentaje del original. Si desea que su imagen sea la mitad
de la original, escriba “50” en el campo Ancho. El campo Alto cambiará
automáticamente. Luego haga clic en Aceptar.
Si aún necesita cambiar el tamaño, regrese y seleccione Imagen, luego

Redimensionar, y cambie los números otra vez.
NOTA: Tenga en mente que el número que escriba en el

campo Ancho es relativo al tamaño actual de la imagen, y
no al tamaño que tenía cuando la abrió por primera vez.
Por ejemplo, si al reducir la imagen a la mitad la hizo
muy pequeña, tendrá que escribir un número mayor a 100
en el campo Porcentaje del original para agrandar la
imagen. Recuerde, 100% es siempre el tamaño actual de
la imagen.
273
Cuando la imagen tenga el tamaño adecuado, haga clic en Archivo y luego en

Guardar como. Si es necesario, seleccione la unidad C: del menú descolgable de
Buscar en:, y haga clic doble en la carpeta Archivos HTML. Luego haga clic doble en
la carpeta Imágenes.
En el campo Nombre de archivo, haga clic en el nombre de la imagen que desea y

añada sus iniciales, tal que el archivo tenga el nombre “gráficoXX.gif”, donde
“gráfico” es el nombre original de la imagen que escogió y XX representa sus
iniciales. Haga clic en Guardar.
Haga clic en el botón X de la esquina superior derecha de la ventana para cerrar

Paint Shop Pro. Luego maximice su archivo en WordPad usando el botón en la
barra de tareas.
Cuando haya completado estas instrucciones, pase a la actividad “Añadir gráficos a

su página Web.”
274
Añadir gráficos a su página Web

Si es necesario, desplácese al comienzo de su documento en WordPad. Haga clic con
el mouse entre las etiquetas <H1> y <P ALIGN="CENTER"> en la primera línea
debajo la etiqueta <BODY>.
Escriba lo siguiente (donde gráficoXX representa el nombre de su archivo de

imagen):
<IMG SRC="imágenes/gráficoXX.gif">
Haga clic en el botón Guardar de la barra de herramientas. Luego cambie a su

navegador usando el botón de la barra de tareas.
Haga clic en el botón Actualizar de la barra de herramientas del navegador. Su

navegador debe verse similar a la Figura 7-3-E al mostrar la imagen que usted
escogió.
Figura 7-3-E
Ahora alineará la imagen en tal forma que quede en la misma línea del título de su
página Web. Haga clic con el mouse después de IMG en la etiqueta de imagen y
presione la barra de espaciar en el teclado, si es necesario.
275
Escriba ALIGN="LEFT" tal que la etiqueta de imagen esté como sigue (donde
gráficoXX representa el nombre del archivo de su imagen):
<IMG ALIGN="LEFT" SRC="imágenes/gráficoXX.gif">
Su pantalla se verá similar a la Figura 7-3-F
Figura 7-3-F
276
Cambie al navegador usando el botón de la barra de tareas. Haga clic en el botón

Actualizar. Su página Web debe ser similar a la Figura 7-3-G.
Figura 7-3-G
Si no esta satisfecho con el aspecto de su página Web, repita los pasos de edición de
la imagen en la porción anterior de éste ejercicio hasta que la imagen tenga el
tamaño correcto. Guarde sus cambios y cierre Paint Shop Pro. Luego regrese al
navegador y haga clic en el botón Actualizar.
Ahora añadirá pequeñas imágenes al lado de las cabeceras de sección en su página

Web. Necesitará usar Paint Shop Pro para editar una imagen nueva.
Minimice WordPad y su navegador de Internet, y haga clic en el botón Ejecutar una

aplicación.

unidad C: del menú descolgable de Buscar en: Luego haga clic doble en la carpeta
Archivos HTML.
277
Haga clic doble en la carpeta titulada “Imágenes.” Asegúrese que el cuadro de

archivos. Cuando encuentre una imagen que desee añadir a su página Web, haga
clic doble.
Añadirá ésta imagen al lado de las cabeceras de sección de la página Web modelo,
así que no debe ser muy grande. Para cambiar el tamaño de la imagen, seleccione
Imagen en la barra de menú y escoja Redimensionar del menú descolgable.
Tiene algunas opciones en el cuadro de diálogo de Redimensionar, como lo muestra

la Figura 7-3-H.
Figura 7-3-H
escogido.
278
Haga clic en la opción Porcentaje del original. Esta vez desea que la imagen sea bien
pequeña. Escriba “15” en el campo Ancho. El campo Alto cambiará
automáticamente. Luego haga clic en Aceptar.
La imagen puede ser a este punto o muy grande o posiblemente muy pequeña. Si
aún necesita cambiar el tamaño, regrese y seleccione Imagen, luego Redimensionar,
y cambie los números otra vez.
Cuando la imagen tenga el tamaño deseado, haga clic en Archivo y luego en

Guardar como: y haga clic doble en la carpeta titulada “Archivos HTML”. Luego
haga clic doble en la carpeta titulada “Imágenes.”
En el campo Nombre de archivo, haga clic en el nombre de la imagen y añada sus

iniciales, tal que el archivo tenga el nombre “gráficoXX.gif”, donde “gráfico” es el
nombre original de la imagen que escogió y XX representa sus iniciales. Haga clic en
Guardar.
Haga clic en el botón X de la esquina superior derecha de la ventana para cerrar

barra de tareas.
Haga clic con el mouse entre las etiquetas <P> y <B> al comienzo de la cabecera de
sección “Autores, etc.” Escriba lo siguiente (donde “gráficoXX” representa el nombre
de su archivo de imagen)
<IMG ALIGN="MIDDLE" SRC="imágenes/gráficoXX.gif">
Ésta instrucción asegura que la cabecera de sección quede alineada con la parte
media de la imagen.
Haga clic en Guardar. Luego cambie al navegador usando el botón en la barra de

tareas
Haga clic en Actualizar de la barra de herramientas del navegador. Su página Web

debe ser similar a la Figura 7-3-I
279
Figura 7-3-I
Repita los pasos 20-22 para añadir el mismo gráfico a cada cabecera de sección.
Cuando haya terminado, su página Web debe ser similar a la Figura 7-3-J.
NOTA: Para la cabecera de la sección “Críticas”, inserte la

etiqueta de alineación del gráfico entre las etiquetas <B>
y <FONT SIZE=”+2”>.
280
Figura 7-3-J
Cuando haya completado estas instrucciones, continúe con la actividad “Añadir

etiquetas de espaciar y ALT.”
281
Añadir etiquetas de espaciar y ALT

Ahora añadirá espacio alrededor de la primera imagen que añadió a su página Web,
y también añadirá la etiqueta ALT para describir la imagen. La descripción debe
contener solo pocas palabras. En éste ejercicio usaremos la descripción “Imagen de
una Pila de Libros” para la primera imagen.
Si es necesario, cambie a WordPad usando el botón de la barra de tareas.
Haga clic con el mouse en el archivo de imagen de la primare imagen que añadió.
Asegúrese de posicionar el cursor dentro del corchete de cerrar la etiqueta de
imagen.
Escriba el siguiente texto, donde “su descripción” representa la descripción de la

imagen.
HSPACE="10" VSPACE="10" ALT="su descripción"
La etiqueta completa debe quedar asi:
<IMG ALIGN="left" SRC="imágenes/libros.gif" HSPACE="10" VSPACE="10"

ALT="su descripción">
Su pantalla debe ser similar a la Figura 7-3-K (esta bien si el texto cambia
automáticamente a la siguiente línea).
282
Figura 7-3-K
Haga clic en Guardar de la barra de herramientas. Luego cambie al navegador

usando el botón de la barra de tareas.
Haga clic en el botón Actualizar de la barra de herramientas del navegador. Coloque

el mouse sobre la imagen para ver el atributo ALT; la descripción que añadió debe
aparecer. Su página Web debe ser similar a la Figura 7-3-L.
283
Figura 7-3-L
Si su descripción no aparece cuando coloca el mouse sobre la imagen, regrese y

verifique sus etiquetas y comillas. Después de hacer las correcciones del caso,
vuelva al navegador y haga clic en el botón Actualizar.
Cierre el navegador hacienda clic en el botón X de la esquina superior derecha.
Cierre WordPad haciendo clic en X en la esquina superior derecha.
Si es necesario, cierre Paint Shop Pro haciendo clic en X en la esquina superior

derecha.
284
Añadir color de fondo a su página Web

WordPad debe estar en su pantalla. Si no lo está, haga clic en el botón Ejecutar una
aplicación y escoja WordPad del menú. Siga las instrucciones a continuación hasta
completar ésta actividad.
Ahora añadirá color de fondo a la página modelo que ha creado. Recuerda que para
que el color se aplique a la página entera, el atributo de fondo de color debe ir
dentro la etiqueta de comienzo <BODY>.
Consulte con la sección Apéndice de éste manual, titulada “Valores de color y sus
equivalentes hexadecimales,” para encontrar el código hexadecimal correcto para el
color que usted elija.

Archivos HTML.
Haga clic con el mouse después de la palabra BODY y antes del corchete de final de
la etiqueta de comienzo <BODY>, luego presione la barra de espaciar una vez.
Escriba el siguiente atributo, donde #HEXCDE representa el código del color que
usted haya escogido.
BGCOLOR="#HEXCDE"
La etiqueta entera se verá como sigue:
<BODY BGCOLOR="#HEXCDE">
285
Su pantalla debe ser similar a la Figura 7-3-M (Aunque su código hexadecimal

puede diferir).
Figura 7-3-M
Haga clic en Guardar, luego cambie a su navegador Web usando el botón de la barra
de tareas.
Haga clic en el botón Actualizar en la ventana de su navegador. Su página Web

debe ser similar a la Figura 7-3-N. (Como comentamos anteriormente, su color de
fondo puede diferir).
286
Figura 7-3-N
Cuando haya completado estas instrucciones, continúe con la actividad “Añadir un

patrón de imagen al fondo de su página Web.”
287
Añadir un patrón de imagen al fondo de su página Web

Ahora añadirá una imagen que será un mosaico de fondo para su página Web.
Necesitará usar Paint Shop Pro para elegir y redimensionar la imagen.
Minimice WordPad y su navegador, y haga clic en el botón Ejecutar una aplicación.

unidad C: del menú descolgable de Buscar en: Luego haga clic doble en la carpeta
Archivos HTML.
Haga clic doble en la carpeta titulada “Imágenes.” Asegúrese que el cuadro de

archivos. Cuando encuentre una imagen que desee añadir al fondo de su página
Web, haga clic doble.
Como añadirá ésta imagen al fondo de su página Web modelo, no debe ser muy
pequeña. De otra manera se repetirá demasiado al establecerse el mosaico. Para
redimensionar la imagen, seleccione Imagen en la barra de menú y escoja
Redimensionar del menú descolgable.
288
Tiene varias opciones para redimensionar en el cuadro de diálogo de

Redimensionar, como se ve en la Figura 7-3-O. Si está satisfecho con el tamaño de la
imagen, no necesita redimensionarla. Avance al paso 12.
Figura 7-3-O
escogido.
Haga clic en la opción Porcentaje del original. Si desea que su imagen sea el doble
de la original, escriba “200” en el campo Ancho. El campo Alto cambiará
automáticamente. Si la imagen está muy grande, achíquela escribiendo un número
menor a 100 en el campo Ancho. Luego haga clic en Aceptar.
Si aún necesita cambiar el tamaño, regrese y seleccione Imagen, luego

Redimensionar, y cambie los números otra vez.
Cuando la imagen tenga el tamaño deseado, haga clic en Archivo y luego en

Buscar en:, y haga clic doble en la carpeta Archivos HTML. Luego haga clic doble en
la carpeta Imágenes.
289
En el campo Nombre de archivo, haga clic en el nombre de la imagen y añada sus

iniciales, tal que el archivo tenga el nombre “gráficofondoXX.gif”, donde
“gráficofondo” es el nombre original de la imagen que escogió y XX representa sus
iniciales. Haga clic en Guardar.
Ahora necesita desvanecer la imagen para que no le quite mérito al texto de su

página Web. Haga clic en el menú Colores y seleccione Ajustar del menú
descolgable.
En el sub-menú Ajustar, seleccione Luminosidad/contraste. Aparece el cuadro de

diálogo de Luminosidad/contraste, el que tiene dos pequeñas ventanas de vista
previa. La ventana a la izquierda muestra la imagen en sus colores actuales y la de
la derecha muestra la imagen como aparecerá con los cambios que haga, como lo
muestra la Figura 7-3-P
Figura 7-3-P
Para desvanecer el color, debe incrementar la luminosidad y disminuir el contraste,

usando las barras de desplazamiento de los campos %Luminosidad y %Contraste en
la parte inferior del cuadro de diálogo. También puede escribir un número en los
campos correspondientes. A medida que hace cambios, la ventana de la derecha le
da una vista previa de cómo se verá la imagen. Cambiando ambos números a 0
regresará la imagen a sus colores originales.
Modifique los números en los campos de %Luminosidad y %Contraste hasta que

este satisfecho con la vista previa. Lugo haga clic en Aceptar.
Si no esta satisfecho con los resultados, regrese y seleccione Colores, Ajustar y

Luminosidad / contraste de la barra de menú y cambie los números otra vez.
290
Una vez que este satisfecho con los resultados, haga clic en Guardar en la barra de
herramientas.
Haga clic en el botón X en la esquina superior derecha de la ventana para cerrar

barra de tareas.
Ahora añadirá ésta imagen al fondo de su página Web. Como el atributo de color de
fondo, el atributo de imagen de fondo debe ser insertado dentro la etiqueta de
comienzo <BODY>. También puede mantener el atributo de color de fondo
BGCOLOR dentro la misma etiqueta. El usuario verá ése color de fondo hasta que
la imagen de fondo sea descargada en su lugar.
Haga clic con el mouse después de código hexadecimal en la etiqueta de comienzo

<BODY>. Asegúrese que hay espacio entre las comillas y el cursor. Escriba lo
siguiente, donde gráficofondoXX representa el nombre del archivo de imagen de
fondo.
BACKGROUND="imágenes/gráficofondoXX.gif"
La etiqueta entera se verá como sigue, donde #HEXCDE es el código del color de
fondo y gráficofondoXX representa el nombre del archivo de imagen de fondo.
<BODY BGCOLOR="#HEXCDE"
BACKGROUND="imágenes/gráficofondoXX.gif">
Su pantalla debe ser similar a la Figura 7-3-Q
Figura 7-3-Q
291
Cambie a la ventana del navegador usando el botón en la barra de tareas. Haga clic
en el botón Actualizar en la barra de herramientas del navegador. Su página Web
debe ser similar a la Figura 7-3-R
Figura 7-3-R
Si su imagen de fondo hace distraer la atención (mucho color o diseño), regrese a

Paint Shop Pro para modificar la imagen repitiendo los pasos 12 al 15. Guarde y
cierre la imagen, luego regrese al navegador y haga clic en el botón Actualizar.
Cuando haya terminado, cierre la ventana del navegador haciendo clic en el botón X
en la esquina superior derecha.
Cierre WordPad hacienda clic en X en la esquina superior derecha.
Si es necesario, cierre Paint Shop Pro haciendo clic en X en la esquina superior

derecha.
292
Actividad 4 – Tablas e hipervínculos
Objetivo
Cuando termine esta actividad, tendrá el conocimiento y la habilidad para crear
tablas e hipervínculos en su página Web.
Usted podrá: .
• Crear una tabla simple.
• Alinear texto en una tabla.
• Centrar la tabla en la página Web.
• Añadir color de fondo a la tabla.
• Insertar hipervínculos en la página.
• Insertar una dirección de correo electrónico en la página.
Crear una tabla

Escriba en la parte superior de la página
<TABLE BORDER="2">
Presione Enter. Luego escriba el subtítulo como sigue:
<CAPTION>Tabla Modelo</CAPTION>
293
Presione Enter. Escriba las siguientes etiquetas e información:

<TR>
<TH>Cabecera de Tabla</TH>
<TH>Cabecera de Tabla</TH>
</TR>
<TR>
<TD>Celda A</TD>
<TD>Celda B</TD>
</TR>
<TR>
<TD>Celda C</TD>
<TD>Celda D</TD>
</TR>
</TABLE>
Su pantalla debe ser similar a la Figura 7-4-A
Figura 7-4-A
Para guardar éste archivo en formato HTML, haga clic en Archivo y luego en
Guardar como. Haga clic en la flecha de abajo al lado de Guardar en: en la parte
superior del campo de diálogo de Guardar como. Si es necesario, seleccione la
unidad C: y haga clic doble en la carpeta Archivos HTML. En la parte inferior del
cuadro de diálogo de Guardar como, haga clic en la flecha de abajo al lado de Tipo: y
elija Documento de texto. Escriba “TablaDePrácticaXX.html” (donde XX representa
sus iniciales) en el campo Nombre de archivo. Haga clic en Guardar.
Haga clic en el botón Internet para abrir la ventana de su navegador. (Tal vez
necesite minimizar WordPad para poder acceder el botón Internet).
294
Haga clic en el menú Archivo y seleccione Abrir. Aparecerá el cuadro de diálogo de

Abrir.
Haga clic en el botón Examinar y seleccione la unidad C: de la lista descolgable de

Buscar en:. Luego haga clic doble en la carpeta titulada Archivos HTML.
Haga clic doble en el archive titulado “TablaDePrácticaXX.html” (donde XX

representa sus iniciales).
Haga clic en el botón Aceptar.
La ventana de su navegador debe ser como la Figura 7-4-B.
Figura 7-4-B
Si su tabla no es como el gráfico, regrese a su código HTML y verifique sus etiquetas

de comienzo y final, barras oblicuas, etc. Haga los cambios necesarios y haga clic en
Guardar. Luego regrese a la ventana del navegador y haga clic en el botón
Actualizar.
Ahora, para familiarizarse más con la creación de tablas, experimente con

diferentes tamaños de bordes, y añada filas y columnas. Recuerde que necesita
guardar sus cambios antes de regresar al navegador y hacer clic en el botón
Actualizar.
Cuando ha concluido, cierre WordPad y el navegador haciendo clic en X en la

esquina superior derecha de cada ventana.
295
Modificar su tabla

Archivos HTML.
lado de Tipo de archivos: y seleccione Todos los documentos. Luego haga clic doble
en el archivo “TablaDePrácticaXX.html” (donde XX representa sus iniciales).

Abrir.

Haga clic doble en el archive titulado “TableDePrácticaXX.html” (donde XX

Haga clic en Aceptar.
Regrese a WordPad usando el botón de la barra de tareas.
Usando la Figura 7-4-C como modelo, modifique su tabla en las siguientes tres
formas:
a. Crear una nueva celda que cubra dos columnas.
b. Cambiar las cabeceras de tabla cosa que aparezcan en la primera columna en
vez de la primera fila.
c. Crear una nueva celda que cubra todas las filas.
Recuerde guardar sus cambios antes de cambiar al navegador y haga clic en el

botón Actualizar.
296
Figura 7-4-C
Hay varias formas diferentes de modificar tablas, por lo tanto, no se limite al código
que se ve en la Figura 7-4-C. Practique otras maneras propias de modificar la tabla.
La Figura 7-4-D muestra la tabla creada usando el código HTML de la Figura 7-4-C.
Figura 7-4-D
Cuando haya terminado, cierre WordPad y el navegador haciendo clic en X en la

parte superior derecha de cada ventana.
297
Práctica de HTML 7-4-C
Alinear su tabla y añadir color de fondo


Archivos HTML.
en el archivo “TablaDePrácticaXX.html” (donde XX representa sus iniciales).
Primeramente, practicará en alinear la tabla. Pero, recuerde que dependiendo de

cómo ha modificado su tabla en la actividad anterior, es posible que su tabla no sea
similar a la tabla modelo de este manual.
Haga clic con el mouse después de la palabra TABLE en la etiqueta de comienzo

<TABLE> y presione la barra de espaciar. Escriba: ALIGN="CENTER".
Seleccione una celda que desee alinear, y haga clic con el mouse después de la letra
D en la etiqueta de comienzo <TD>. Presione la barra de espaciar, si es necesario. Si
tiene una celda que abarque las columnas, sería la más apropiada a elegir.
298
Escriba ALIGN="CENTER". Luego haga clic en Guardar en la barra de

herramientas. Su pantalla debe ser similar a la Figura 7-4-E
Figura 7-4-E
299
Ahora añadirá color de fondo a las cabeceras de la tabla. Dependiendo de cómo

modificó su tabla, sus cabeceras pueden estar a lo largo de la primera fila, o en la
primera columna. Asegúrese de añadir los atributos necesarios a las etiquetas
correctas. Si sus cabeceras están en la primera fila, añada el atributo de color a la
etiqueta de fila. Si sus cabeceras están en la primera columna, necesitará añadir el
atributo de color a la primera celda de cada fila.
Haga clic con el mouse después de la letra R en la etiqueta de comienzo <TR> (o

después de la H en la primera etiqueta <TH> si sus cabeceras están en la primera
columna) y, si es necesario, presione la barra de espaciar. Escriba lo siguiente,
donde HEXCDE representa el código hexadecimal del color de fondo que haya
seleccionado de la lista en el Apéndice de su guía del módulo.
BGCOLOR="#HEXCDE"
Haga clic en Guardar. Si sus cabeceras están en la primera columna, repita el paso
6 en cada etiqueta <TH> y haga clic en Guardar.
Su pantalla debe ser similar a la Figura 7-4-F.
Figura 7-4-F

Abrir.

300
Haga clic doble en el archive titulado “TablaDePrácticaXX.html” (donde XX

La ventana de su navegador debe ser como la Figura 7-4-G. Si no esta satisfecho con
el aspecto de su tabla, regrese a su archivo de HTML y modifique el código. Haga
clic en Guardar, luego regrese al navegador y haga clic en el botón Actualizar.
Figura 7-4-G

301
Práctica de HTML 7-4-D
Añadir una tabla a su página Web


Archivos HTML.
en el archivo “LibreríaXX.html” (donde XX representa sus iniciales).
necesite minimizar WordPad para poder acceder al botón Internet).
Haga clic en el menú Archivo y seleccione Abrir. Aparecerá el cuadro de diálogo

Abrir.

Haga clic doble en el archive titulado “LibreríaXX.html” (donde XX representa sus

iniciales).
Minimice su navegador.
Usando el dibujo de la tabla de “Horario de Atención” que usted creó, y su lista de

códigos HTML en el Apéndice, determine donde desea colocar ésta tabla en su
página Web, y haga clic con el mouse en el lugar apropiado de su archivo de HTML.
Escriba el código HTML para su tabla, usando códigos que ha aprendido en las
actividades previas de éste tema para formatear su tabla.
302
Necesitará intercambiar entre WordPad y el navegador para ver como se ve la tabla.

Recuerde guardar sus cambios en WordPad antes de hacer clic en Actualizar de la
ventana del navegador.
La Figura 7-4-H muestra una tabla modelo de horario como podría verse en su
página Web.
Figura 7-4-H

303
Práctica de HTML 7-4-E
Añadir hipervínculos a su página Web

Lo primero que necesita hacer es escribir un archivo HTML corto al que luego
creará un hipervínculo en la página Web de la librería. Usted creará un vínculo que
contiene una lista de los libros de Jorge Luis Borges. También creará un vínculo en
la página de Jorge Luis Borges que envíe al usuario de regreso a la página de la
librería.
Escriba el siguiente código y texto:

<HTML>
<HEAD>
<TITLE>Libros de Jorge Luis Borges</TITLE>
</HEAD>
<BODY BACKGROUND="imágenes/gráficofondoXX.gif">
(donde “gráficofondoXX.gif” representa el archivo de la imagen de fondo que uso
para su página de la librería.)
<H3><P ALIGN="LEFT">Libros de Jorge Luis Borges</P></H3>

<UL>
<LI>Fervor de Buenos Aires
<LI>Cuaderno de San Martín
<LI>Ficciones
<LI>El Hacedor
<LI>Los Conjurados
<LI>Inquisiciones
</UL>
<P><A HREF="LibreríaXX.html">Regrese a la página principal</A>
(donde XX representa sus iniciales.)
Para guardar éste archivo en formato HTML, haga clic en Archivo y luego en
Guardar como. Haga clic en la flecha de abajo al lado de Guarde en: en la parte
superior del cuadro de diálogo de Guardar como. Si es necesario, seleccione la
unidad C: y luego haga clic doble en la carpeta llamada Archivos HTML. En la parte
inferior del cuadro de diálogo de Guardar como, haga clic en la flecha de abajo al
lado de Tipo: y seleccione Documento de texto. Luego escriba en el cuadro de
Nombre de archivo: “BorgesXX.html” (donde XX representa sus iniciales). Haga clic
en Guardar.
304
Haga clic en Archivo y luego en Abrir. Si es necesario, seleccione la unidad C: del

menú descolgable de Buscar en: Haga clic doble en la carpeta titulada Archivos
HTML.
lado de Tipo de archivos: y seleccione Todos los documentos. Seleccione el archivo
LibreríaXX.html (donde XX representa sus iniciales).
Haga clic con el mouse entre la etiqueta <LI> y Jorge Luis Borges en la lista de
autores. Escriba lo siguiente:
<A HREF="BorgesXX.html"> (donde XX representa sus iniciales.)
Luego escriba la etiqueta de final </A> después de Jorge Luis Borges. Asegúrese
tener comillas al comienzo y final del archivo; de otra forma el vínculo no
funcionará.
Haga clic en el botón Guardar en la barra de herramientas.
necesite minimizar WordPad para poder acceder al botón Internet).
Haga clic en el menú Archivo y seleccione Abrir. Aparecerá el cuadro de diálogo

Abrir.

Haga clic doble en el archive titulado “LibreríaXX.html” (donde XX representa sus

iniciales).
305
La ventana de su navegador debe ser similar a la Figura 7-4-I
Figura 7-4-I
Si su hipervínculo no se parece al de la Figura 7-4-I, regrese a su documento en

WordPad y verifique sus etiquetas. Guarde sus cambios, luego regrese al navegador
y haga clic en el botón Actualizar.
Cuando haga clic en el hipervínculo de Jorge Luis Borges, su archivo

BorgesXX.html debe aparecer. En la parte inferior de ésa página debe tener un
vínculo que le permite regresar a la página principal de la librería, como lo muestra
la Figura 7-4-J.
Figura 7-4-J
306
Ahora creará otro hipervínculo para el autor Mario Vargas Llosa en la lista de
autores, pero esta vez el vínculo será a un sitio Web. La dirección del sitio Web es
http://www.vargasllosa.org. Si es necesario, regrese a su documento en WordPad.
Usando como guía el código HTML para el hipervínculo que usted creó, defina un
vínculo al sitio Web de Mario Vargas Llosa.
Si desea mas práctica con hipervínculos, explore la Web en búsqueda de sitios

relacionados a los otros autores. Cuando encuentre uno que le guste, copie la
dirección URL de ésa página haciendo clic a la derecha en el campo de Dirección del
navegador y seleccione Copiar de su menú descolgable. Luego pegue la dirección en
el lugar apropiado de su documento en WordPad.
Guarde sus cambios, y verifique como se ven en el navegador.
A continuación creará un hipervínculo de Mailto: donde los usuarios pueden hacer

clic para mandar a la librería un mensaje electrónico.
Desplácese a la parte inferior de su archivo HTML. Haga clic con el mouse después
de la etiqueta de final </TABLE> y presione Enter. Escriba lo siguiente:
<P> Puede conectarnos por e-mail a
<A HREF=mailto: “servicio@hojasotoño.com”>servicio@hojasotoño.com</A>
Haga clic en Guardar, luego cambia al navegador y haga clic en el botón Actualizar.
Desplácese a la parte inferior de su página Web para ver si el vínculo Mailto: está
ahí. No haga clic en éste vínculo, puesto que no es una dirección real. Su navegador
debe ser similar a la Figura 7-4-K.
Figura 7-4-K
Cuando ha concluido, cierre WordPad y el navegador Internet haciendo clic en X en

la esquina superior derecha de cada ventana.
307
308
Desarrollo Web Tema 8 – Macromedia Flash
TEMA 8 – MACROMEDIA FLASH
Objetivo
Cuando usted haya completado este Tema, habrá aprendido porque razón las
compañías usan animaciones en sus sitios Web y, como usar Flash para crear una
animación que haga su sitio Web más atractivo.
Luego usted creará una animación con sonido e interactividad, que va a construir
sobre la muestra del sitio Web creado por usted en una actividad previa, mediante
la adición de un vínculo a su película terminada de Flash.
Revisión general
Las animaciones Flash son parte de muchos sitios Web inolvidables, por lo tanto el
saber como crear una animación es una habilidad valiosa.
En el Tema 8, usted aprenderá como crear animaciones Flash, lo cual incluye

aprender a usar las herramientas apropiadas para crear y modificar objetos en el
escenario de Flash. Usted también aprenderá como crear símbolos, usar la
biblioteca, y agregar interpolación de movimiento para producir una animación.
Luego, usted aprenderá como crear botones y como hacerlos interactivos, y agregará
sonidos de fondo y efectos de sonido a su animación.

Ancho de banda – en el mundo de las computadoras, la capacidad de un canal de
comunicación para llevar señales digitales. A veces se le conoce como rendimiento
global y es usualmente medido en bits por segundo (bps).
Plug-in-un programa accesorio que resalta una aplicación principal. Hay muchos plug-
ins para los navegadores de Internet, como Flash, Shockwave, y Crescendo, que le
dan capacidades especiales al navegador, especialmente para sitios Web de
multimedia.
Dominio público-que pertenece al público, no es protegida por leyes de derecho de

autor.
309
Actividad 1 – Fundamentos de Flash
Objetivo
habilidades para empezar a trabajar en Flash.

• Reconocer la diferencia entre imágenes de trama y vectoriales.
• Identificar las diferentes partes de la interfase Flash.
• Definir las herramientas de dibujo usadas en Flash.
• Crear y modificar formas básicas.
310
Instrucciones- Práctica con las Herramientas de Dibujo de Flash

Siga las instrucciones de abajo para completar esta actividad.
1. Cuando Flash se abre por primera vez, aparece una pantalla de bienvenida. Si
esto sucede, seleccione General, luego cierre la ventana al hacer clic en la ¨X¨ en
la esquina superior derecha.
2. Practique usando todos los recursos de la caja de herramientas de dibujo. Cree

formas diferentes en el escenario y trabaje con las herramientas de color.
3. Haga clic en Archivo y seleccione Guardar Como en el menú descolgable. Si es

necesario, haga clic con la flecha de abajo en la caja Guardar en: y seleccione el
disco C. Luego, haga clic doble en la carpeta titulada Archivos de programa y
después haga doble clic en Macromedia Flash.
4. Nombre el archivo PrácticaFlashXX , donde XX representa sus iniciales. Luego,

haga clic en Guardar. (Guarde su archivo frecuentemente mientras usted vaya
trabajando).
5. 5.Cuando usted haya practicado suficiente como para sentirse cómodo usando las
herramientas de diseño, cree lo siguiente:
a. Dibuje un círculo amarillo con un trazo de color azul.

b. Dibuje un triángulo casi perfecto sombreado de verde con un trazo de color
negro.
c. Escriba su nombre usando la Herramienta Lápiz y el modificador de Tinta.
d. Pinte un fondo lavanda detrás de los objetos del escenario.
e. Inserte el texto ¨Mi Práctica¨ al pie del escenario.
6. Cuando usted haya terminado de practicar con las herramientas de dibujo,

muéstrele el archivo a su instructor para que lo califique como corresponde.
7. Haga clic en la X ubicada en la esquina superior derecha de la ventana para salir

del programa Flash.
Una vez que usted haya salido de la aplicación, haga clic en la flecha Siguiente
(flecha hacia la derecha) para reanudar la actividad.
311
Actividad 2 – Símbolos e Instancias
Objetivo
Cuando usted haya completado ésta actividad, tendrá el conocimiento y las
habilidades para crear una película simple en el programa Flash.
• Insertar fotogramas clave para activar una animación.

• Crear símbolos y agregarlos a la biblioteca.
• Aplicar interpolación de movimiento para crear una animación más suave.
• Crear y modificar instancias.
Instrucciones – Creación de una Película simple

Flash debería estar en su pantalla. Si no está, haga clic en el botón Ejecutar una
Aplicación y elija Flash en el menú. Siga las instrucciones de abajo para completar
ésta actividad.
1. El color por defecto del área del escenario es blanco. Pero, usted puede
seleccionar su propio color de fondo. Haga clic derecho en cualquier lugar del
área del escenario y seleccione Propiedades del Documento del acceso directo del
menú. Aparecerá la caja de diálogo de las Propiedades del Documento.
2. Haga clic en la caja de color descolgable junto al Color de Fondo: y seleccione un

color.
3. Hay otras opciones en esta caja de diálogo, como cambiar el tamaño del área del
escenario. Pero, usted aceptará los valores predeterminados para ésta actividad.
Haga clic en Aceptar.
4. En el lado superior derecho de la pantalla hay un menú de control de

aumento.Un porcentaje aparece en la caja. Haga clic en la flecha de abajo y
seleccione Mostrar Fotograma en el menú descolgable. Esto le permitirá ver toda
el área del escenario. (Un porcentaje remplazará Mostrar Fotograma. Esto puede
ser distinto en pantallas diferentes).
5. Haga clic en Archivo y luego en el icono Guardar como en la barra de

herramientas. La caja de diálogo Guardar como aparece. Nombre el archivo
PelotaRebotandoXX, donde XX representan sus iniciales. Luego haga clic en la
flecha hacia abajo junto a Guardar en: y seleccione el disco C:. Haga doble clic en
la carpeta titulada Archivos de Flash. Haga clic en el botón Guardar.
312
6. Haga clic en la herramienta Óvalo en la caja de herramientas de Flash. Luego,

seleccione un color de relleno y un color de trazo en el área de Colores de la caja
de herramientas.
7. Presione la tecla Shift, luego haga clic y desplace el mouse en el área superior
izquierda del escenario para crear un círculo. (Presionar la tecla Shift le permite
crear un círculo en lugar de un óvalo.) Su pantalla debe de verse semejante a la
Figura 8-2-A.
Figura 8-2-A
8. Ahora usted convertirá este gráfico en un símbolo. Haga clic en la herramienta

Flecha y haga doble clic en el círculo. Haga clic en Insertar en la barra del
menú y seleccione Convertir en Símbolo en el menú descolgable.
9. La caja de diálogo Convertir en símbolo aparece. En la caja de Nombre: digite la

palabra ¨Pelota¨. Haga clic en el botón Botón junto a Gráfico, y luego haga clic en
Aceptar.
10. Hay un marco azul alrededor del gráfico de la pelota. Esto indica que la imagen
es un símbolo. El símbolo es automáticamente guardado en la Biblioteca. Haga
clic en el menú Ventana y seleccione Biblioteca en el menú descolgable. El
nombre ¨Pelota¨ aparece en el área de Nombre junto al icono usado para un
símbolo gráfico. Si usted hace clic en este ítem, aparecerá una vista previa en la
porción superior de la Biblioteca.
313
11. Su pantalla debe verse semejante a la Figura 8-2-B.
Figura 8-2-B
Para crear un símbolo desde cero, usted primero tendría que hacer clic en
Insertar en la barra del menú y seleccionar Símbolo Nuevo en el menú
descolgable. Una vez que usted le haya asignado un nombre al símbolo y haya
seleccionado un tipo de símbolo, usted tendría que hacer clic en Aceptar y luego
seguir los pasos que siguió para dibujar un círculo.
Si usted observa el área de Fotogramas, notará que hay un punto negro en la

caja para fotograma 1. Este es el indicador de un fotograma clave. Una vez que
convirtió el gráfico en un símbolo, el símbolo real fue colocado en la Biblioteca.
Por lo tanto, su dibujo original se ha convertido en instancia del símbolo.
Recuerde que las instancias solamente pueden ser colocadas en fotogramas
clave, entonces Flash convirtió automáticamente al fotograma 1 en fotograma
clave.
12. Haga clic derecho en la caja del fotograma 10 y seleccione Insertar Fotograma
Clave en el menú de acceso directo. Aparece un punto negro en la caja y los
fotogramas entre 1 y 10 son sombreados.
13. Un fotograma indica un cambio de movimiento mayor. Esta simple película será
una pelota rebotando. Entonces, para este fotograma, usted necesita mover la
pelota al pie del centro del escenario haciendo clic y desplazándolo.
14. Ahora, haga clic derecho en la caja del fotograma 20 y seleccione Insertar
Fotograma Clave. Luego mueva la pelota al área superior derecha del
escenario.
314
15. La pelota necesita terminar en su sitio original. Haga fotogramas clave los
fotogramas 30 y fotograma 40, y mueva la pelota para que rebote en el piso
nuevamente, y luego que termine regresando al área superior izquierda del
escenario. Haga clic en Guardar en la barra de herramientas.
16. Ahora usted verá su película. Haga clic en el número 1 en el área de fotogramas.
Esto hace al fotograma 1 el fotograma activo. Haga clic en Control en la barra
del menú y seleccione Reproducir en el menú descolgable. Su película se
reproducirá y verá al indicador del fotograma activo moverse a través de la línea
de tiempo.
Su película tal vez parezca un poco recortada. Usted hará modificaciones en la

siguiente actividad para ajustar el flujo de acción.
17. Para salir de Flash, haga clic en la X en la esquina superior derecha de la

pantalla.
Instrucciones-Práctica de Instancias e Interpolación

Flash debe de estar en su pantalla. Si no está, haga clic en el botón Ejecutar una
esta actividad.
1. Si es necesario, haga clic en Abrir en la caja de herramientas y seleccione el disco

C: de la lista descolgable Buscar en. Haga clic doble en la carpeta de los Archivos
Flash y luego haga clic doble en el archivo titulado PelotaRebotandoXX, donde
XX representan a sus iniciales.
2. Si es necesario, haga clic en la flecha de abajo de la caja de control de zoom y

seleccione Mostrar Fotograma en el menú descolgable.
3. Si la Biblioteca no está en su pantalla, haga clic en el menú Ventana y seleccione

Biblioteca en el menú descolgable. Para crear otra instancia del símbolo
Pelota, haga clic y desplace el icono de ese símbolo de la Biblioteca al escenario.

(Usted borrará esto más adelante).
NOTA: Cuando usted seleccione cualquiera de los paneles

en Flash, primero asegúrese de hacer clic en la instancia
para seleccionarla. De otro modo, usted no podrá ver toda
la información.
315
4. Ahora usted modificará la nueva instancia del símbolo Pelota. Si las propiedades
de la instancia no están en la pantalla, haga clic derecho en la instancia y
seleccione Propiedades desde el menú de acceso directo.
5. Dentro del panel Propiedades, para cambiar el color de la pelota, haga clic en el
menú descolgable de la caja de Color y seleccione Tinta desde el menú
descolgable. Haga clic en la caja de color junto a Color Tinta:, y se desplegará un
panel de colores, del cual elegirá un color nuevo para esta instancia del símbolo
Pelota.
6. Usted puede cambiar la forma de una instancia en el panel de Propiedades.

Usted encontrará cajas que indican el ancho y alto de la instancia. Resalte la
información en la caja W (ancho) y digite un número diferente. Presione la tecla
Tab. Haga lo mismo para la caja H (altura) y presione Enter.
7. Ahora haga clic derecho en la instancia y, en el menú desplegable, seleccione

Paneles y luego Transformar. Esto es donde usted cambia la rotación o sesgado
de una instancia. Haga clic en el botón junto a Sesgar y digite un número nuevo
en cualquier caja. Presione Enter.
Cuando usted sesga una instancia, en realidad usted está sesgando la caja
alrededor de la instancia. La imagen dentro de la caja se ajusta para alcanzar la
nueva forma de la caja.
Usted también puede modificar la instancia al graduar, rotar y sesgarla

manualmente. Haga clic derecho en la instancia y seleccione Escalar en el menú
de acceso directo.
316
8. Aparecen los mangos de reajuste de tamaño alrededor de la instancia. Haga clic

encima de cualquiera de los mangos y arrástrelo para cambiar el tamaño.
9. Haga clic derecho en la instancia nuevamente y seleccione Rotar y Sesgar en el

menú de acceso directo. Aparecerán los mangos de rotación alrededor de la
instancia. Cuando usted coloca su cursor encima de alguno de los mangos de las
esquinas, aparece el símbolo de rotación; haga clic y desplace el símbolo para
hacer rotar a la instancia. Cuando usted coloca su cursor en alguno de los
mangos laterales, aparece una flecha doble. Esto le permitirá sesgar la forma al
hacer clic y desplazar. Tome unos cuantos minutos para practicar con estas
herramientas.
10. Cuando haya terminado, seleccione la instancia y presione la tecla Suprimir.

Sólo su instancia original y sin modificación debe estar en el escenario. Hagla
clic en Guardar. Cierre cualquier panel abierto y la Biblioteca haciendo clic en la
X en la(s) esquina(s) superior(es) de la derecha.
Tome un momento para ver su película de nuevo. (Haga clic en el menú Control y
seleccione Reproducir.)
11. Ahora usted va a agregar interpolación de movimiento para hacer que el flujo de
la acción de su película sea más suave. Haga clic derecho en el punto del
fotograma clave del fotograma 1 en la línea de tiempo. Seleccione Crear
Interpolación de Movimiento del menú de acceso directo. (Usted también puede
seleccionar Crear Interpolación de Movimiento en el menú Insertar).
12. Una flecha es insertada automáticamente del primer al siguiente fotograma

como se ve en la figura 8-2-C. Esto indica interpolación. Repita el proceso de
arriba para cada fotograma clave.
Figura 8-2-C
13. Ahora haga clic en cualquier área, que no sea de fotogramas clave del
encabezador de la línea de tiempo, (cualquier lugar entre las flechas). Usted verá
que Flash ha insertado las animaciones entre cada uno de sus fotogramas clave.
317
14. Para ver la pantalla completa de su película, haga clic en el menú Control y
seleccione Probar Película. Note como la animación aparece mucho más suave
con la interpolación. Para cerrar la película, haga clic en la X inferior de la
esquina superior derecha de la pantalla.
15. Guarde sus cambios.
16. Para salir de Flash, haga clic en la X en la esquina superior derecha de la

pantalla.
318
Actividad 3 – Capas y Botones
Objetivo
habilidades para crear capas y botones en Flash.

• cambiar de nombre a las capas.
• usar capas para crear una película Flash más compleja.
• crear botones.
• agregar un botón a su película Flash.
319
Instrucciones- Trabajar con Capas

Flash debe estar en su pantalla. Si no está, haga clic en el botón Ejecutar una
Aplicación, y elija Flash en el menú. Siga las instrucciones de abajo para completar
esta actividad.
Antes de empezar esta actividad, vaya al menú, haga clic en Archivo, seleccione la
opción Abrir en la barra de herramientas de Flash. Aparecerá la caja de diálogo
Abrir. Luego haga clic en la flecha de abajo junto a Buscar en: y seleccione el disco
C:. Haga clic doble en la carpeta titulada Archivos de Flash. Seleccione el archivo
titulado HojasdeOtoño.fla y haga clic en el botón Abrir. Este es el archivo de
muestra usado para esta actividad. Usted puede crear una película semejante o
puede crear una película original.
1. Asegúrese que el primer fotograma en la línea de tiempo esté seleccionado.

Luego haga clic en el menú Control y seleccione Reproducir en el menú
descolgable. Esta es una película simple creada usando las herramientas que
usted aprendió hasta ahora y usando más de una capa.
2. Cierre el archivo al hacer clic en la X de abajo en la esquina superior derecha de

la pantalla. Si es necesario, haga clic en Archivo en la barra del menú y
seleccione Nuevo en el menú descolgable.
3. Ahora usted creará su propia película para el sitio Web de práctica. Sea creativo
(a), y recuerde, la película debe ser relevante para una tienda de libros del sitio
Web. Las habilidades que usted mejore en esta película de práctica lo ayudarán
más adelante cuando usted cree una película en su propio sitio Web. Si le
gustaría usar HojasdeOtoño como una guía, deje abierto el archivo para que
pueda usarlo como referencia. De otro modo, haga clic en la X en la esquina
superior derecha para cerrar el archivo.
4. La película que usted está creando puede tener tantas capas como usted elija. La
película de muestra para esta actividad tiene tres capas. Ahora tome tiempo
para trabajar con su compañero para decidir si usted usará la película de
muestra como una guía o creará su propia película. Luego tome tiempo para
trazar los objetos que usted creará en cada capa.
5. Ahora, empiece a crear su primera capa usando las habilidades que usted ha
desarrollado hasta ahora. Si está usando la película muestra como guía, usted
creará el libro en la primera capa.
320
6. Vaya al menú de la barra de herramientas, haga clic en Archivo, luego seleccione

Guardar como. Aparecerá la caja de diálogo Guardar como. Nombre el archivo
PelículadeHojasdeOtoñoXX, donde XX representa sus iniciales. Luego, haga clic
en la flecha - abajo junto a Guardar en: y seleccione el disco C:. Haga clic doble
en la carpeta titulada Archivos de Flash. Haga clic en el botón Guardar.
Ahora usted le cambiará de nombre a la primera capa. Haga doble clic en la Capa 1
en el área de capas. El texto se resalta, como se muestra en la figura 8-3-A. Digite
¨Libro¨(u otra palabra que describa los contenidos de la capa) y presione Enter.
Tome un momento para practicar el uso de las funciones Mostrar/Ocultar todas las
capas, Bloquear/Desbloquear todas las capas, Mostrar/Ocultar todas las capas como
contornos, al hacer clic en las columnas apropiadas (ojo, candado, marco) de la capa
elegida.
Figura 8-3-A
7. Si es necesario, seleccione la capa titulada Libro. Luego haga clic en el botón Insertar Capa
en parte inferior izquierda del área de capas. Usted también puede hacer clic derecho en la
capa Libro y seleccionar Insertar Capa en el menú de acceso directo.
8. Cambie de nombre a la nueva capa con el nombre de Árbol, u otra palabra que describa los
contenidos de esa capa. Bloquee la primera capa. Seleccione una capa nueva y cree los
objetos para esta capa usando las habilidades que usted haya desarrollado hasta ahora. Haga
clic en el icono Guardar en la caja de herramientas.
Como habrá notado en la película de muestra, no necesariamente usted crea todos los objetos en
el primer fotograma sobre la línea de tiempo. En HojasdeOtoño, el árbol es creado en el
fotograma 5 como un objeto pequeño, como se muestra en la figura 8-3-B. Fotogramas, reajuste
de tamaño e interpolación se usan para animar el árbol, entonces el árbol parece crecer. Usted y
su compañero necesitan decidir en que fotograma van a colocar sus objetos.
321
Figura 8-3-B
Inserte y cambie de nombre a una capa nueva. Bloquee las otras capas. Usando las
habilidades que usted ha desarrollado, cree los objetos para la tercera capa. En la
capa de muestra, la tercera capa es titulada Texto y empieza en el fotograma 10,
como se muestra en la figura 8-3-C. Pintar nuevamente, ajustar el tamaño e
interpolación que fueron usados para hacer que el texto parezca aumentar de
tamaño y cambiar de color. Guarde su trabajo.
322
Figura 8-3-C
9. Cuando usted haya terminado, haga clic en el fotograma 1 de la línea de tiempo.

Luego haga clic en Control en la barra del menú y seleccione Reproducir en el
menú descolgable para probar su película. Si es necesario, revise su película
para que su reproducción sea de la manera que usted la diseñó para que se
reproduzca.
10. Cuando usted esté satisfecho con la película guárdela una vez más. Luego, haga
clic en la X de la esquina superior derecha para cerrar el programa Flash.
323
Instrucciones – Creación de un Botón

Flash debe de estar en su pantalla. Si no lo está, haga clic en el botón Ejecutar una
esta actividad.
1. Haga clic en el icono Abrir en la barra de herramientas de Flash. La caja diálogo

de Abrir aparece. Haga clic en la flecha - abajo junto a Buscar en: y seleccione el
disco C:. Haga doble clic en la carpeta titulada Archivos de Flash. Seleccione el
archivo titulado PelículaHojasdeOtoñoXX, donde XX representa sus iniciales, y
haga clic en el botón Abrir.
2. Seleccione la capa de encima en el área de capas e inserte una capa nueva.

Bloquee las otras capas. A la capa llámela ¨Botón¨.
3. Seleccione Insertar en la barra del menú y seleccione Nuevo Símbolo en el menú

descolgable. Aparecerá la caja de diálogo Crear un nuevo símbolo. Al símbolo
nómbrelo como usted elija y, en el área de Comportamiento seleccione Botón
4. Ahora usted debe de estar en el modo Edición de Símbolos el cual conocerá al

observar la línea de tiempo, el cual debe lucir semejante a la figura 8-3-D. El
área normal del escenario se decolora para indicar que no está en uso.
Figura 8-3-D
5. La línea de tiempo muestra cuatro fotogramas – Reposo, Sobre, Presionado y

Zona Activa. El fotograma Reposo es seleccionado y es un fotograma clave.
Dibuje su botón en el área de edición y guarde su trabajo. Vea la figura 8-3-E
para un ejemplo.
324
Figura 8-3-E
6. Haga clic derecho en el fotograma Sobre y seleccione Insertar Fotograma Clave

desde el menú de acceso directo. Su objeto llegará a ser seleccionado. Modifique
el objeto del modo que usted quiere que aparezca cuando el usuario pase el
mouse por encima de él. El botón de muestra se ha ampliado y se ha agregado el
texto, como se ve en la figura 8-3-F.
Figure 8-3-F
325
7. Repita el paso 6 para el estado Presionado. Esto es, como aparecerá el botón
cuando el usuario haga clic en él. La Figura 8-3-G muestra un botón más
pequeño y un texto nuevo.
Figure 8-3-G
8. Más adelante usted creará el fotograma Zona Activa. Este define el área del
botón donde se puede hacer clic y no aparece en el escenario. Debe encerrar el
objeto entero y cualquiera de los otros elementos que usted agregó, como el texto.
Asegúrese de que la herramienta Flecha sea seleccionada y haga clic y
desplácela alrededor de su objeto para seleccionarlo. Guarde su trabajo.
9. Cuando haya terminado, haga clic en Escena 1 arriba del área de capas. Abra su
biblioteca al hacer clic en el menú Ventana y al seleccionar Biblioteca en el menú
descolgable. Desplace una instancia de su botón al escenario. Si es necesario,
haga clic en el menú Ver y seleccione Ocultar Paneles para ocultar el panel de la
Biblioteca y cualquier otro que pueda estar abierto.
10. Ahora que el botón está en el área de su escenario usted debe activarlo. Los
botones son desactivados por defecto. Haga clic en Control en la barra del menú
y seleccione Habilitar Botones Simples en el menú descolgable.
326
11. Pruebe su botón para ver si funciona como era su intención. Si no es así,
deshabilite el botón al hacer clic en el menú Control y anule la selección de la
opción Habilitar Botones Simples. Luego haga clic doble en el botón para
introducir el modo de Edición y modificar su botón.
12 .Haga clic en el icono Guardar en la barra de herramientas. Salga de Flash al

hacer clic en la X en la esquina superior derecha de la ventana.Una vez que
usted haya salido de la aplicación, haga clic en la flecha Siguiente (flecha hacia
la derecha) para reanudar la actividad.
327
Actividad 4 – Agregar Sonido y Publicar su Animación
Objetivo
habilidades para agregar sonidos a su película, y agregarla a su sitio Web.
• Explicar la diferencia entre flujos de sonido y sonidos de evento.

• Agregar sonido a un botón.
• Agregar sonido de fondo a su película.
• Publicar su película.
• Agregar un vínculo a su película en el sitio Web de muestra.
• Crear una nueva película para agregarla su producto final del sitio Web.
328
Instrucciones – Descargando Sonidos

El navegador de Internet debe de estar en su pantalla. Si no está haga clic en el
botón Recursos y elija Vínculo de Internet en el menú. En el sitio Web de Lab-Volt
IT, seleccione el Módulo Fundamentos de Tecnología de la Información. Seleccione
¨Diseño de Sonido DeusX¨ en la lista de recursos.
1. El primer sonido que usted buscará será un efecto de sonido para el botón en su
película. En el lado izquierdo de la página DeusX.com/studio.html, usted verá
una lista de sonidos gratis como la que se muestra a continuación:
Figura 8-4-A
En la figura 8-4-A haga clic en un sonido para darle una vista previa.
329
En el lado derecho de la misma página, al costado de la lista de sonidos gratis, se

lee un texto, en Inglés, cuya traducción es la siguiente:
“La primera, y aún la mejor, colección diseñada específicamente para

aplicaciones de multimedia como Shockwave Flash, Director y Live Motion
(movimiento en vivo). La colección deusX contiene 700 o más efectos de sonido y
más de 600 bucles. Todos los archivos están grabados en formato de archivo .wav
con calidad de CD (disco compacto) (44.1 y 16 bit) y están listos para llevar sin
ninguna edición de su parte. Por supuesto, si usted quiere puede editarlos más a
fondo y usarlos como base para sus propias creaciones FX. Todos los archivos son
originales y libres de derechos de licencia de explotación y una vez que se
compren pueden ser usados en tantos sitos Web como usted desee. La única
restricción es que usted no puede revender ninguno de estos individualmente ni
como parte de una colección ni tampoco puede mostrarlos en otro sitio Web para
que sean descargados por terceros”.
“ Más de 600 bucles organizados en 14 carpetas diferentes, variando desde

bucles de música suave y más apropiados para sitios de negocios a guitarras más
bulliciosas y distorsionadas. Entre estos dos extremos usted encontrará una gran
variedad de música como acústica, retro funk de los años 70, tecno moderna,
electrónica, música para configurar la disposición del ambiente y pop”
2. Haga vista previa a unos cuantos sonidos hasta que usted encuentre uno que le
guste. Para fines de ésta actividad fue seleccionado Timbre de Puerta (doorbell
145k).
3. Para descargar un sonido, haga clic derecho en el vínculo y seleccione Guardar

Objetivo Como desde el menú de acceso directo.
Aparecerá la caja de diálogo Guardar como:. Seleccione el disco C: en la lista

descolgable de Guardar en:. Luego haga clic doble en el directorio llamado
Archivos Flash.
4. Haga clic doble en la carpeta de Sonidos. El nombre del archivo de sonido

debería aparecer en la caja Nombre del Archivo:. Si no aparece, o si usted quiere
cambiar nombre al archivo, remplace el texto que aparece con un nombre de su
elección.
5. Descargue tantos sonidos como usted necesite.
6. Ahora usted descargará algunos sonidos para usar como flujo de sonido para el
fondo de su película. Haga clic en el vínculo Página Bucle (Loops Page) en la
esquina inferior izquierda de la pantalla DeusX.
330
7. Siga los pasos 3 al 7 para descargar los sonidos que usted elija.
8. Después que usted termine con el sitio Web DeusX, use algunos de los otros
sitios de la lista de recursos del Módulo Fundamentos de Tecnología de la
Información. Tenga cuidado con las diferencias en los métodos para descargar.
Algunos sitios tienen vínculos de Descarga en los que se hace clic izquierdo en
lugar de clic derecho. Pero siempre guarde sus sonidos en la carpeta Sonidos en
su disco C:
9. Cuando usted haya terminado de descargar sonidos, cierre el hipervínculo de

Internet al hacer clic en la X en la esquina superior derecha de la pantalla.
Continúe en la siguiente página de Instrucciones, titulada ¨Agregando Sonido a
una Animación.¨ Haga clic en el botón Ejecutar una Aplicación y seleccione Flash
en el menú.
331
Instrucciones-Agregando Sonido a una Animación

Flash debe de estar en su pantalla. Si no lo está, haga clic en el botón Ejecutar una
esta actividad.
Antes de que usted empiece esta actividad, haga clic en el icono Abrir en la barra de
herramientas de Flash. La caja de diálogo de Abrir aparece. Luego haga clic en la
flecha de abajo junto a Buscar en: y seleccione el disco C:. Haga clic doble en la
carpeta titulada Archivos de Flash. Seleccione el archivo titulado
PelículaHojasdeOtoñoXX y haga clic en el botón Abrir.
1. Ahora usted ha descargado archivos de sonido a su computadora, usted debe

importarlos a Flash para que ellos sean disponibles para su película. Haga clic
en Archivo en la barra del menú y seleccione Importar en el menú descolgable.
La caja de diálogo de Importación aparecerá.
2. Seleccione el disco C: en la lista descolgable de Buscar en: y haga clic doble en el

directorio titulado Archivos de Flash. Luego haga clic doble en la carpeta de
Sonidos.
3. Deberá aparecer la lista de los archivos de sonido descargados. Haga clic en el

primer archivo de sonido de la lista y haga clic en el botón Abrir. (Usted también
puede hacer clic doble en el archivo de sonido solamente).
4. Repita los pasos 1 al 3 para cada unos de los archivos de sonido que usted
descargó en las Instrucciones tituladas ¨Descargando Sonidos.¨
5. Antes de agregar sonidos a su película, debería convertirlos a archivos MP3

porque los archivos MP3 son más pequeños que los archivos .WAV. Para hacer
esto, abra la Biblioteca haciendo clic en el menú Ventana y luego seleccione
Biblioteca en el menú descolgable.
Usted debería ver sus archivos de sonido listados alfabéticamente junto con sus
símbolos y botones, como se muestra en la figura 8-4-B. Los archivos de sonido están
indicados con un icono de parlante. Haga clic doble en el icono junto al primer
sonido de la lista.
332
Figura 8-4-B
6. La caja de diálogo de Propiedades de Sonido aparecerá, como se muestra en la

figura 8-4-C.
Figura 8-4- C
7. Haga clic en la flecha de abajo junto a Compresión al pie de la caja de diálogo.

Seleccione MP3 en la lista descolgable.
333
8. Haga clic en Aceptar o en Actualizar. Repita los pasos 5 al 9 para cada archivo
de sonido. Algunos de los archivos de sonido tal vez ya estén en formato MP3, en
ese caso MP3 aparecerá automáticamente en la caja de Compresión.
9. Ahora puede agregar los sonidos a su película. El primer sonido que usted
agregará es el sonido de evento para su botón. Haga clic en Control en la barra
del menú y asegúrese de que no haya una marca de verificación junto a Habilitar
Botones Simples en el menú descolgable. Si hay una, seleccione Habilitar
Botones Simples para suprimir la marca de verificación.
10. Haga doble clic en el botón del escenario de Flash para ir al modo de Edición.
Usted también puede hacer clic en Editar en la barra del menú y escoger Editar
Seleccionado en el menú descolgable. (Asegúrese que el botón esté seleccionado
antes de que usted haga esto).
11. El botón de la línea de tiempo ahora debe aparecer en la parte superior de la

pantalla. Para agregar un efecto de sonido que se reproduzca cuando el usuario
haga clic en el botón, inserte un fotograma clave en el fotograma Presionado.
12. Si los paneles de Flash no son visibles, haga clic en Ver en la barra del menú y
suprima la marca de verificación de Ocultar Paneles en el menú descolgable al
hacer clic en esa opción.
334
13. Asegúrese de que el fotograma de Presionado siga seleccionado. El panel de

Sonido debe aparecer en la parte inferior del escenario como se muestra en la
figura 8-4-D. Si no es visible, haga clic en Ventana en la barra del menú. Luego
seleccione Propiedades en el menú descolgable y elija Sonido en el menú
auxiliar.
Figure 8-4-D
14. Seleccionando el fotograma Presionado, escoja un sonido en la lista descolgable

de Sonidos. Si necesita escuchar la variedad de sonidos antes de hacer una
selección, abra la Biblioteca al seleccionar Biblioteca en la Ventana del menú
descolgable.
335
En el panel de Sonido, seleccione Evento en el menú descolgable de Sinc. Su

fotograma Presionado debe aparecer semejante al de la figura 8-4-E.
Figura 8-4- E
15. Pruebe su sonido regresando a su película Flash (haga clic en Escena 1 arriba de
la línea de tiempo). Active el botón al seleccionar Habilitar Botones Simples en el
menú de Control. Luego haga clic en el botón para asegurarse de que el sonido
sea reproducido. Si no le gusta el sonido, seleccione un sonido diferente en la
lista descolgable.
16. Ahora usted agregará un flujo de sonido. Haga clic en la capa de encima e inserte
una nueva capa. Renombre la capa para que usted sepa que es la capa del sonido
de fondo.
17. Con la capa nueva seleccionada, haga clic en el fotograma 5 en la línea de tiempo
e inserte un fotograma clave. Recuerde, usted está empezando el sonido en el
fotograma 5 para que no empiece a reproducirse en la computadora de usuario
hasta que la animación empiece a descargar.
18. Si es necesario, seleccione el fotograma 5. En el panel de Sonido, escoja un sonido

diferente. Seleccione Flujo en la lista descolgable de Sinc. Este sonido debería
reproducirse durante la longitud de su película.
19. Su línea de tiempo debe aparecer semejante a la de la figura 8-4-F.
Figura 8-4- F
336
20. Guarde su archivo. Para probar su película con el sonido, haga clic en el menú
Control y elija Reproducir en el menú descolgable. Si no le gusta la manera en
que el sonido es reproducido con su película, elija un sonido diferente repitiendo
los pasos del 19 al 21.
21. Cuando usted esté satisfecho con la película, guárdela una vez más. Luego, haga
clic en la X en la esquina superior derecha para cerrar Flash.
Instrucciones – Publicación de una película

Flash debe estar en su pantalla. Si no está, haga clic en el botón Ejecutar una
Aplicación y elija Flash en el menú. Siga las instrucciones abajo para completar esta
actividad.
Antes que usted empiece esta actividad, haga clic en el icono Abrir en la barra de
herramientas de Flash. La caja de diálogo Abrir aparece. Luego haga clic en la
flecha de abajo junto a Buscar en: y seleccione el disco C:. Haga clic doble en la
carpeta titulada Archivos de Flash. Seleccione el archivo titulado
PelículaHojasdeOtoñoXX y haga clic en el botón Abrir.
1. Antes de agregar una película a su sitio Web, usted debe configurar preferencias
de publicación. Haga clic en el menú Archivo y seleccione Configuración de
Publicación en el menú descolgable.
2. La caja de diálogo de Configuración de Publicación aparece, como se muestra en

la figura 8-4-G.
Figura 8-4-G
337
3. Si es necesario, haga clic en la solapa Formatos para llevarlo a primera plana.

En la columna Tipo deberán estar marcados los cajones de verificación Flash
(.swf) y HTML (.html). Si no lo están, haga clic junto a cada uno de los cajones de
verificación. Estos son los dos únicos que usted seleccionará.
4. Si quiere renombrar los archivos, desactive Usar nombres predeterminados al

pie de la caja de diálogo. Esto hará activas a todas las cajas de nombres de
archivos permitiéndole renombrar y hacer clic en cada una.
Figura 8-4-H
6. En la lista descolgable de Orden de Carga, seleccione uno de los dos, De abajo

arriba o De arriba abajo, dependiendo de su preferencia. Este es el orden en el
cual se descargarán las capas de su película en la computadora de un usuario.
7. En el centro de la caja de diálogo está la opción Calidad JPEG. Configure esto a

80 u 85 al reemplazar el número que aparece en la caja a la derecha de esa
opción. Usted también puede configurar este número al hacer clic y arrastrando
la barra de desplazamiento.
8. Asegúrese de que Flash 5 aparezca en el cajón de Versión al pie de la caja de

diálogo. Si no aparece, seleccione Flash Player 6 en la lista descolgable junto a
esa opción.
338
Ahora haga clic en la solapa HTML. La caja de diálogo debe aparecer como muestra
la figura 8-4- I.
Figure 8-4- I
9. Seleccione Solo Flash en la lista descolgable junto al cajón de la opción Plantilla.
10. Luego, escoja una opción Dimensiones. Esto configura el tamaño de su película
en la pantalla del usuario. Si usted selecciona Coincidir con película, la película
aparecerá del tamaño en el cual fue creada. Escogiendo un porcentaje mostrará
la película en ese porcentaje específico de la pantalla del usuario. Los píxeles
medirán el tamaño por número de píxeles. Porcentaje es la mejor opción para los
fines de ésta actividad. Sólo asegúrese que aparezca 100 en las dos cajas de
Altura y Ancho.
11. En las opciones Reproducción, asegúrese que el cajón de Reproducir

indefinidamente esté marcado. Si usted marca Pausa al comienzo, su animación
sólo se reproducirá cuando el usuario la reproduzca manualmente al seleccionar
Reproducir, en el menú de acceso directo. Pero, el menú de acceso directo
correcto sólo aparece si usted selecciona la opción Visualizar menú. Si usted se
olvida de seleccionar el cajón Visualizar menú, los usuarios no tendrán manera
de reproducir su película. Para fines de esta actividad deje todo sin verificar (sin
marcar) con excepción de la opción Reproducción indefinida.
12. Deje las opciones que quedan en las configuraciones predeterminadas. Haga clic
en Publicar y luego en Aceptar.
339
13. Para vista previa de su película, haga clic en Archivo en la barra del menú y
seleccione Previsualización de Publicación en el menú descolgable, y luego elija
Predeterminado en el menú auxiliar. El presionar la tecla F12 también le
permitirá hacer vista previa de su película.
14. Usted va a agregar un vínculo a su película en su página Web de muestra. Pero

primero, usted necesita guardar su película en la misma carpeta que en sus otros
archivos HTML. Haga clic en el menú Archivo y seleccione Guardar Como en el
menú descolgable.
La caja de diálogo de Guardar como aparece. Seleccione el disco C: en la lista

descolgable de Guardar en:. Haga clic doble en el directorio titulado Archivos HTML
y haga clic en Guardar.
15. Cuando usted publique una película Flash, se crearán varios archivos en adición
al archivo .SWF, dependiendo de las opciones que seleccionó en Configuración de
Publicación. Estos archivos fueron creados en su directorio de Archivos de Flash.
Ahora usted necesita crearlos en el directorio de sus archivos de HTML. Haga
clic en el menú Archivo y seleccione Publicar en el menú descolgable.
16. Guarde su archivo y cierre el programa Flash al hacer clic en la X en la esquina

superior derecha de la pantalla.
17. Abra su archivo HTML al hacer clic en el botón Ejecutar Una Aplicación y
seleccione WordPad en el menú. Haga clic en el icono Abrir en la barra del menú
y seleccione el disco C: en la lista descolgable Buscar en: en la caja de diálogo. Si
es necesario, seleccione Todos los Documentos de la lista de los Archivos de
Tipo/Clase al pie de la caja de diálogo Abrir.
18. Haga clic doble en la carpeta titulada Archivos HTML y seleccione

HojasdeOtoñoXX.html. Desplace al pie del documento. Inserte dos etiquetas de
párrafos debajo del código HREF para la dirección del correo electrónico.
19. El texto que aparecerá en su página Web es ¨Haga clic aquí para ver una
animación Flash¨. La palabra ¨aquí¨ será un hipervínculo para su archivo Flash.
Por lo tanto, usted debe crear un código HREF similar a esos que creó en la parte
superior de la página para los vínculos Jorge Luis Borges y Mario Vargas Llosa.
Si es necesario, use los códigos HREF previos como guía, o use el Tema 7 en su
Guía del Módulo como referencia. Usted también puede formatear el texto por
color o tamaño, etc., si usted lo desea.
20. Guarde su documento Word Pad. Luego abra su navegador al hacer clic en el
botón Recursos y al seleccionar Vínculos de Internet en el menú.
340
21. Haga clic en el menú Archivo y seleccione Abrir en el menú descolgable. Haga
clic en el botón Navegar. Seleccione el disco C: en la lista descolgable de Buscar
en:. Luego haga clic doble en la carpeta titulada Archivos de HTML. Haga clic
doble en el archivo titulado HojasdeOtoñoXX.html, y luego haga clic en Aceptar.
22. Desplácese al pie de la página Web. Su página debe aparecer similar al de la

figura 8-4-L. Si no es así, regrese al documento HTML en WordPad y haga doble
clic en su código.
Haga clic aquí para ver una animación Flash
Figura 8-4-J
23. Haga clic en el vínculo para asegurarse de que la película Flash se reproduzca.
Si no es así, busque errores en su código HTML y asegúrese de que su archivo de
película esté en su carpeta de Archivos HTML.
24. Una vez que se encuentre satisfecho con su página Web, cierre el navegador
haciendo clic en la X en la esquina superior derecha de la pantalla.Una vez que
usted haya salido de la aplicación, haga clic en la flecha Siguiente (flecha hacia
la derecha) para reanudar la actividad.
341
342
Desarrollo Web Tema 9 – Introducció to JavaScript
TEMA 9 – INTRODUCCIÓN A JAVASCRIPT
Objetivo
Cuando haya completado éste tema, usted podrá realzar su página Web usando
JavaScript.
Revisión general
Java Script es un lenguaje completo de programación que le permite añadir a su
página Web muchas funciones interactivas interesantes. Al añadir JavaScript a su
código HTML, puede crear rollovers (del inglés rollover = volcar, crear cambios de
objetos en su página producidos por movimientos del mouse) para proveer
información a los que visitan su página a mediada que la navegan.
JavaScript también le permite crear páginas que se adaptan de acuerdo a la acción

que el usuario tome con la información que se le presente. Con JavaScript usted
puede mostrar cuadros de alerta y diálogo que contengan mensajes especiales o
advertencias. Los realces de JavaScript pueden hacer que su página sea más fácil de
usar, dando a sus visitantes una experiencia más personal y memorable.
Equipo requerido
WordPad
Guía del Módulo
Guía del Estudiante / Carpeta

interactividad - el permitir al usuario proveer o extraer información de su página.
scripts - los programas que usted crea usando JavaScript.
concatenar - unir valores de cadenas.
343
Actividad 1 – Fundamentos de JavaScript
Objetivo
Cuando complete ésta actividad, tendrá el conocimiento y habilidad para empezar a
mejorar su página Web usando JavaScript.
Usted podrá:
• añadir JavaScript a su código HTML.

• crear variables y hacer asignaciones variables.
• asignar valores en cadena a variables.
• crear scripts sencillos usando funciones incorporadas.
344
Práctica JavaScript 9-1-A

Un navegador Web debe estar en su pantalla. Si no lo esta, haga clic en el botón
Internet. Siga las instrucciones abajo para ver una demostración de JavaScript.
1. En el cuadro de Dirección del navegador, escriba la siguiente dirección de Web:

http://hotwired.lycos.com/Webmonkey/demo/96/35/index4a.html, y presione
Enter.
2. Ésta dirección de Web lo conectará con el sitio Web "Webmonkey", a la página

titulada "Image Swapping Demo", que quiere decir, “Demostración de cambios de
imagen.” Vaya a la base de la página y haga clic en el vínculo Get the demo.
3. El ejemplo es una cuadrícula de cuadraditos de destellantes colores. Una función

de JavaScript cambia el color de los cuadraditos en forma aleatoria mas o menos
cada segundo. Haga la prueba y mueva el puntero sobre uno de los cinco iconos
en la parte inferior de la cuadrícula (número, signo de suma, cuadrado, letra, y
línea vertical). Hay una función de JavaScript que le da una instrucción a la
página a que use el tipo de imagen que usted ha seleccionado para cualquier
nueva imagen que aparezca en la cuadrícula. Mueva el puntero sobre los otros
iconos.
4. Cuando haya terminado de explorar éste demo, cierre el navegador haciendo clic
en el botón X en la esquina superior derecha.
5. Una vez que haya salido del navegador, haga clic en la flecha de Siguiente para
345
Práctica JavaScript 9-1-B

WordPad debe estar en su pantalla. Si no lo esta, haga clic en el botón Ejecutar una
aplicación y escoja WordPad del menú. Siga las instrucciones detalladas a seguir
hasta completar la tarea.
1. Haga clic en Archivo de la barra de Menú, y escoja Abrir. Si es necesario,

2. Haga clic doble en la carpeta llamada Archivos HTML. En la parte inferior del
cuadro de diálogo de Abrir, haga clic en la flecha de abajo al lado de Tipo de
archivos: y seleccione Todos los documentos. Seleccione el archivo
LibreríaXX.html (donde XX representa sus iniciales) y luego haga clic en Abrir.
3. Ahora añadirá código JavaScript para ejecutar una función de alerta a la sección
<HEAD> del código HTML. Las primeras etiquetas a añadir son las de comienzo
y final <SCRIPT>. Haga clic con el mouse al final de la línea <TITLE>Hojas de
Otoño: libros usados y de baja circulación</TITLE>. Presione Enter dos veces
para añadir espacio. Escriba: <SCRIPT LANGUAGE = "JavaScript">. Presione
Enter dos veces y escriba </SCRIPT>. Presione Enter para añadir otro espacio
en blanco. Ahora, el navegador interpretará cualquier código entre las etiquetas
de comienzo y final <SCRIPT> como código JavaScript.
4. Ahora añada el código necesario para ocultar JavaScript en los navegadores

antiguos. Es buena idea establecer el hábito de añadir siempre éste código
cuando escriba las etiquetas <SCRIPT> para así no olvidarlo mas tarde. Haga
clic con el mouse en el espacio en blanco entre las etiquetas de comienzo y final
<SCRIPT>.
Digite 
en la línea encima de la etiqueta de final </SCRIPT>.
5. Para crear la función de alerta, haga clic en el espacio en blanco entre las
etiquetas de comienzo y final <SCRIPT>. Escriba lo siguiente:
alert("¡Bienvenido!. La librería Hojas de Otoño es dirigida por su nombre ");
346
Puede escribir su verdadero nombre donde dice su nombre. La parte <HEAD> de su

página HTML debe verse así:
Debido a que añadió la instrucción alert en la cabecera de su página, el cuadro de

alerta aparecerá antes que la página termine de ser descargada. Cuando el usuario
haga clic en Aceptar la página terminará de descargar.
6. Haga clic en el botón Guardar en la barra de herramientas. Luego minimice

WordPad.
7. Haga clic en el botón Internet para abrir su navegador Web. Haga clic en
Archivo y luego en Abrir.
8. Haga clic en el botón Examinar en el cuadro de diálogo de Abrir. Seleccione la

Archivos HTML.
9. Haga clic doble en el archivo LibreríaXX.html (donde XX representa sus

iniciales) , o seleccione el archivo y haga clic en el botón Abrir.
347
10. Haga clic en Aceptar del cuadro de diálogo de Abrir. Un cuadro de alerta como
el que se ve a continuación debe aparecer antes que su página descargue.
11. Si descubre cualquier error, regrese a su archivo HTML de texto (usando el

botón WordPad de su barra de tareas.) Haga las correcciones necesarias y haga
clic en Guardar en la barra de herramientas. Regrese al navegador de Internet y
haga clic en el botón Actualizar.
12. Cierre el navegador haciendo clic en el botón X en la esquina superior derecha.
13. Cierre WordPad haciendo clic en el botón X en la esquina superior derecha.
14. Vaya a su Guía del Estudiante / Carpeta y complete todas las hojas de datos del
Tema 9, Actividad 1. Cuando haya completado las hojas de datos, continúe con la
instrucción siguiente.
Haga clic en la flecha de Siguiente para resumir la actividad.
348
Actividad 2 – Funciones incorporadas y condicionales
Objetivos
Cuando haya completado ésta actividad, usted tendrá el conocimiento y la habilidad
de usar muchas de las funciones incorporadas de JavaScript para realzar su página
Web, además de tomar decisiones basadas en el resultado de una proposición
condicional.
Usted podrá:
• interrogar a su visitante usando un cuadro de diálogo.

• identificar la fecha actual y mostrarla en su página Web.
• recopilar información acerca de su visitante y tomar decisiones basadas en la
información obtenida.
349
Práctica JavaScript e 9-2-A: Cuadros de diálogo

1. Escriba en WordPad, al comienzo de una página en blanco, el código que se

muestra en el siguiente gráfico. Ponga atención a la sintaxis.
2. Para guardar el archivo en formato HTML, haga clic en Archivo, y luego en

Guardar como. Haga clic en la flecha de abajo al lado de Guarde en: en la parte
superior del cuadro de diálogo de Guardar como. Si es necesario, seleccione la
unidad C: y luego haga clic doble en la carpeta llamada Archivos HTML. En la
parte inferior del cuadro de diálogo de Guardar como, haga clic en la flecha de
abajo al lado de Tipo: y seleccione Documento de texto. Luego escriba en el
cuadro de Nombre de archivo: “diálogoXX.html” (donde XX representa sus
iniciales). Haga clic en Guardar.
3. Minimice WordPad.

Archivos HTML.
350
Haga clic doble en el archivo diálogoXX.html (donde XX representa sus iniciales), o

6. Haga clic en Aceptar del cuadro de diálogo de Abrir. Un cuadro de diálogo, como
el que muestra el gráfico a seguir, debe aparecer en su página Web.
7. Ahora, regrese a su archivo de texto HTML (usando el botón de WordPad en la

barra de tareas). Haga clic en la letra “D” de la frase “Digite su nombre aquí.”
Borre la frase, dejando solo las comillas ("").
8. Haga clic en Guardar en la barra de herramientas. Regrese al navegador de

Internet y haga clic en el botón Actualizar. Esto actualizará su cuadro de
diálogo, el que será similar al gráfico a seguir. Note que el cuadro de dialogar
esta vacío. Puede escribir cualquier frase que desee, o dejarlo en blanco.
351
Práctica JavaScript 9-2-B: Métodos de fecha


3. Ahora añadirá el JavaScript necesario para escribir la fecha actual en su página

Web. Añadirá éste bloque de código a la sección <BODY> de su HTML, así que
haga clic con el mouse al final de la línea <BODY BGCOLOR=“#HEXCODE”
BACKGROUND=“imágenes/hojasfondo.jpg”>. Presione Enter dos veces y escriba
el bloque de código que se ve en el gráfico a seguir, comenzando con la etiqueta
<SCRIPT LANGUAGE = "JavaScript"> y terminando con </SCRIPT>.
Tome su tiempo para entender éste bloque de código línea por línea.
La línea, var hoy = new Date(), crea un objeto de fecha y lo asigna a hoy.
La línea, var el_mes = hoy.getMonth(), aplica el método getMonth() a la variable

hoy y asigna el resultado a la variable el_mes. La línea, var el_día = hoy.getDate(),
aplica el método getDate() a la variable hoy y asigna el resultado a la variable
el_día.
352
La línea, el_mes = el_mes + 1, suma 1 al valor de el_mes y lo re-asigna a el_mes.

Debido a que el método getMonth() asigna el valor 0 a Enero y el número 1
representa Enero cuando escribimos la fecha, debemos siempre ajustar el valor que
da getMonth() añadiéndole 1.
La línea, var la_fecha = el_día + “/” + el_mes, crea la variable la_fecha y le asigna
una cadena. La cadena empieza con el número almacenado en la variable el_día,
luego el símbolo “/”, seguido por el número almacenado en la variable el_mes. Si la
fecha fuera 10 de Junio, la variable la_fecha tendría el valor 10/6.
La última línea, document.write( “La fecha de hoy es ” + la_fecha), escribe una

línea de texto en su página Web. La cadena de texto empieza con las palabras “La
fecha de hoy es ” y son seguidas por el valor almacenado en la_fecha. Si la fecha
fuera 10 de Junio, el texto “La fecha de hoy es 10/6” aparecería en su página Web.
4. Haga clic en el botón Guardar de la barra de herramientas. Luego minimice

WordPad.

Archivos HTML.

iniciales) , o seleccione el archivo y haga clic en el botón Abrir.
353
8. Haga clic en Aceptar del cuadro de diálogo de Abrir. La fecha actual debe
aparecer en su página Web como lo muestra el gráfico a seguir.

354
Práctica JavaScript 9-2-C: Instrucciones condicionales y booleanas


3. Ahora añadirá una instrucción condicional a la sección <HEAD> de su página.
Haga clic con el mouse al final de la línea “alert("¡Bienvenido!. La librería Hojas

de Otoño es dirigida por Juan Pueblo.");” y presione Enter dos veces. Escriba el
código que se ve en el gráfico a seguir, encima de las etiquetas //--> y </SCRIPT>.
Ponga atención a la sintaxis de éstas expresiones puesto que JavaScript no
perdona errores.

WordPad.
355
Haga clic en el botón Internet para abrir su navegador Web. Haga clic en

Archivos HTML.

iniciales), o seleccione el archivo y haga clic en el botón Abrir.
7. Haga clic en Aceptar del cuadro de diálogo de Abrir. JavaScript de aceptar el

cuadro de alerta que añadió en la Práctica JavaScript 9-1-A, debe ver un cuadro
de diálogo como el que se muestra a continuación.
Como un ejemplo, supongamos que el visitante escribió “NY”. Un segundo cuadro

de diálogo aparecerá como el que se muestra en el gráfico a continuación. Note
que, si el visitante hubiera escrito cualquier estado que no fuera “NY”, o sea,
“NH”, “VT”, “ME”, “MA”, o “RI”, entonces el segundo cuadro de diálogo no
hubiera aparecido, ni el cuadro de alerta subsiguiente.
Supongamos que el visitante vive en la parte norte de l estado de Nueva York y

digita la respuesta “si”.
356
El cuadro de alerta, informando al visitante acerca de la sucursal en New

Hampshire, aparecería, como lo muestra el gráfico a seguir. Note que si el
visitante hubiera digitado “no”, entonces éste cuadro de alerta no aparecería y la
página Web seguiría su descarga.

357
Actividad 3 – Ejecución de eventos y cambios de imagen
Objetivo
Cuando haya completado ésta actividad, tendrá el conocimiento y la habilidad para
crear eventos que activan mensajes, imágenes y vínculos en su página Web.
Usted podrá:
• producir rollovers que permiten la interacción de su página Web con los

visitantes.
• crear un vínculo en su página Web que activa los eventos onClick, onMouseOver
y onMouseOut.
• cambiar imágenes en su página Web para incrementar la interactividad.
358
Instrucciones – Eventos vinculares


3. Ahora añadirá un vínculo a la sección <BODY> de su página.
Haga clic con el mouse al final de la oración: ‘Si busca libros difíciles de
encontrar, o está cansado de pagar precios altos por sus libros, Hojas de Otoño es
la tienda para usted. ¡Tenemos la colección más grande de libros usados y de
baja circulación en el estado!’ y presione Enter dos veces. Escriba el código que se
muestra en el gráfico a seguir, encima de la línea <P ALIGN = “RIGHT”>.
Asegúrese de añadir la etiqueta de final </A> después de la etiqueta </FONT>.
Preste atención a la sintaxis de éstas expresiones puesto que JavaScript no
perdona errores.
<P>Si busca libros difíciles de encontrar, o está cansado de

pagar precios altos por sus libros, Hojas de Otoño es la tienda
para usted. ¡Tenemos la colección más grande de libros usados y
de baja circulación en el estado!
<A HREF="#"
onClick="alert('Si prefiere, puede pedir por fax al 1-123-555-
5678');"
onMouseOver="window.status='¡Llame ahora! ¡Nuestro personal
estará feliz de ayudarlo!';return true;"
onMouseOut="window.status=' ';">
<P ALIGN="RIGHT">
<FONT SIZE="+2" COLOR="GREEN" FACE="ARIAL,HELVETICA">
Llámenos al 1-800-555-1234</FONT></A>

WordPad.
359

Archivos HTML.

8. Haga clic en Aceptar del cuadro de diálogo de Abrir. El número de teléfono en la

página debe ser ahora un vínculo. Cuando haga clic en éste vínculo, un cuadro de
alerta debe aparecer con el número de fax de la librería. Cuando mueva el mouse
sobre el vínculo, un mensaje acerca de los empleados amables debe aparecer en
la barra de estado. Cuando quite el mouse del vínculo, el mensaje debe ser
borrado de la barra de estado.

Instrucciones - Intercambio de imágenes

En la primera parte de éste ejercicio, usted obtendrá algunas imágenes que necesita
usando la Web, y las almacenará en un archivo en la carpeta Archivos HTML.
Usted encontrará y guardará cuatro imágenes: una fotografía de Isabel Allende, una
imagen de su novela La Casa de los Espíritus, una fotografía de Gabriel García
Márquez, y la imagen de uno de sus libros. Siga las instrucciones a seguir hasta
concluir la tarea.
1. Haga clic en el botón Internet.
2. Digite www.altavista.com en la ventana de dirección del navegado.
3. Haga clic en el botón Imagen, que es donde hará la búsqueda.
360
4. Digite “Isabel Allende” en el cuadro de Encontrar.
5. Haga clic en Encontrar.
6. Busque una fotografía de la autora. Si es posible, ubique una fotografía con la

extensión .jpg , por ejemplo IsabelAllende.jpg.
7. Seleccione la fotografía que desea usar en su página Web.
8. Haga clic de derecha en la fotografía.
9. Seleccione Guardar imagen como.
10. Dele “imagenAllende1.jpg” como nombre al archivo.
11. Guarde el archivo en la carpeta imágenes2 en la carpeta Archivos HTML.
12. Ahora buscará una imagen de la novela de Isabel Allende. Digite “Casa de los
Espíritus” en el cuadro de Encontrar.
14. Busque una imagen del libro. Si es posible, ubique una imagen con la extensión
.jpg, por ejemplo CasaEspíritus.jpg.
15. Seleccione la imagen que desea usar en su página Web.
16. Haga clic de derecha en la imagen.
18. Dele “imagenAllende2.jpg” como nombre de archivo.
20. Ahora buscará una fotografía de Gabriel García Márquez. Digite “Gabriel
García Márquez” en el cuadro de Encontrar. Asegúrese de tener buena
ortografía.
22. Busque una fotografía del autor. Si es posible, ubique una fotografía con la
extensión .jpg, por ejemplo GarcíaMárquez.jpg.
23. Seleccione la fotografía que desea usar en su página Web.
361
24. Haga clic de derecha en la fotografía.
26. Dele “imagenMárquez1.jpg” como nombre al archivo.
28. Ahora buscará una imagen de uno de los libros de García Márquez. Digite el
título de uno de sus libros en el cuadro de Encontrar. Cuide su ortografía. Los
libros de García Márquez incluyen: Cien años de soledad, Vivir para contarla,
El amor en los tiempos del cólera, Crónica de una muerte anunciada, Los
funerales de la Mama Grande, y Del amor y otros demonios.
30. Busque una imagen del libro que desea. Si es posible, ubique una imagen con
la extensión .jpg, por ejemplo CienAños.jpg.
31. Seleccione la imagen que desea usar en su página Web.
32. Haga clic de derecha en la imagen.
34. Dele “imagenMárquez2.jpg” como nombre de archivo.
35. Guarde el archive en la carpeta imágenes2 en la carpeta Archivos HTML.
Continúe con la siguiente actividad, titulada “Añadir vínculos.”
362
Instrucciones – Añadir vínculos


seleccione la unidad C: del menú descolgable de Buscar en:.
3. Ahora añadirá un vínculo a la sección <BODY> de su página.
Haga clic con el mouse al final de la etiqueta <LI> que precede la cadena de texto
“Isabel Allende.” Escriba el código que se muestra en el gráfico que sigue, tanto
antes como después de la cadena de texto “Isabel Allende.”
<BR><LI><A HREF="#"
onClick="window.document.imagen_Allende.src='imágenes2/
imagenAllende2.jpg';
return false;">Isabel Allende</A>
<P><IMG SRC="imágenes2/imagenAllende1.jpg"name="imagenAllende">
Luego, haga clic con el mouse al final de la etiqueta <LI> que precede la cadena de
texto “Gabriel García Márquez.” Escriba el código que se muestra en el gráfico que
sigue, tanto antes como después de la cadena de texto “Gabriel García Márquez.”
<BR><LI><A HREF="#"
onClick="window.document.imagen_Allende.src='imágenes2/
imagenAllende2.jpg';return false;">Isabel Allende</A>
<P><IMG SRC="imágenes2/imagenAllende1.jpg"name="imagen_Allende">
<BR><LI><A HREF="#"
onMouseOver="window.document.imagen_Márquez.src='imágenes2/
imagenMárquez2.jpg';"
onMouseOut="window.document.imagen_Márquez.src='imágenes2/
imagenMárquez1.jpg';"
onClick="return false;">Gabriel García Márquez</A>
<P><IMG SRC="imágenes2/imagenMárquez1.jpg"name="imagen_Márquez">
<BR><LI>Juan Rulfo
</UL>
363

WordPad.

Archivos HTML.

8. Haga clic en Aceptar del cuadro de diálogo de Abrir. Su página debe incluir los
dos nuevos vínculos en “Isabel Allende” y “Gabriel García Márquez”, como
también una imagen de cada autor, debajo de su vínculo respectivo.
364
Cuando haga clic en el vínculo, “Isabel Allende”, una imagen de su novela debe
remplazar su fotografía. No hemos añadido código para cambiar la imagen de
regreso a la original, así que la imagen del libro se quedará en ése lugar hasta
que la página sea descargada de nuevo. Cuando haga clic en el vínculo “Gabriel
García Márquez” no pasa nada. Pero, cuando mueva el mouse sobre el vínculo, la
imagen debe cambiar a la de su libro. Cuando mueva la imagen fuera del
vínculo, la imagen original de García Márquez debe volver a aparecer.

365
Actividad 4 – Funciones, arreglos y ciclos
Objetivo
Cuando haya completado ésta actividad, tendrá el conocimiento y habilidad para
mejorar su página Web con presentaciones y banners o avisos titulares.
Usted podrá:
• crear funciones definidas por el usuario.

• crear un arreglo.
• definir estructuras repetitivas, o bucles, de por (for) y mientras (while).
• desarrollar una presentación de imágenes para su página Web.
• combinar tareas para crear un banner (aviso) cíclico.
366
Práctica JavaScript 9-4-A: Crear una presentación


3. Haga clic en el botón Internet. Use un motor de búsqueda para encontrar

imágenes de libros del autor Juan Rulfo. Debe buscar específicamente los libros
titulados Pedro Páramo, Aire en las Colinas, y El llano en llamas.
4. Cuando haya encontrado las imágenes que desea, guarde la imagen de Pedro
Páramo como rulfoimagen1.jpg en la carpeta imágenes2. Guarde la imagen de
“Aire en las colinas” como rulfoimagen2.jpg y la de El llano en llamas como
rulfoimagen3.jpg en la carpeta imágenes2.
Ahora añadirá declaraciones de variables y funciones para la presentación en la

sección <HEAD> de su página.
5. Haga clic con el mouse al final de las líneas de etiquetas de comienzo y <!--, y
presione Enter dos veces. Escriba el código mostrado a seguir, antes de la línea
alert("¡Bienvenido!. La librería Hojas de Otoño es dirigida por Juan Pueblo ").
Asegúrese de escribir el código exactamente como lo ve en el gráfico. Aún el más
pequeño error en la sintaxis creará un error de ejecución.
367
var presentación = new

Array("imágenes2/rulfoimagen1.jpg","imágenes2/rulfoimagen2.jpg","imágenes2/rulfoimagen3.jpg");
var actual = 0;
var ctimag = presentacion.length – 1;
function procesoAnterior() {
if(actual > 0){
actual - -;
window.document.rulfoshow.src = presentacion[actual];
}
}
function procesoSiguiente(){
if(actual < ctimag){
actual++;
window.document.rulfoshow.src = presentacion[actual];
}
}
La function proceso añadida
Añada ahora el código necesario a la sección <BODY> de su página para que la

presentación pueda ser ejecutada desde una imagen que aparecerá debajo la línea
de texto Juan Rulfo.
368
6. Haga clic con el mouse al final de la línea <BR><LI>Juan Rulfo y presione Enter
una vez. Escriba el código que se muestra a continuación.
<P><IMG = “imágenes2/rulfoimagen1.jpg” name= “rulfoshow”>

<P><A HREF = “#” onClick = “procesoAnterior(); return false;”> <<
Anterior</A>
<A REF. = “#” onClick = “procesoSiguiente(); return false;”>Siguiente >></A>
7. C Haga clic en el botón Guardar en la barra de herramientas. Luego minimice

WordPad.

Archivos HTML.

11. Haga clic en Aceptar del cuadro de diálogo de Abrir. Una imagen del libro Pedro
Páramo debe aparecer bajo el nombre de su autor, Juan Rulfo. También, debajo
la imagen deben haber dos vínculos Anterior y Siguiente. Cuando haga clic en
Siguiente, la imagen debe ser remplazada por la imagen del libro Nos han dado
la tierra. Haga clic en Siguiente otra vez y la imagen del libro El llano en llamas
debe remplazar la imagen anterior. Haciendo clic en Anterior mueve las
imágenes en sentido reverso.

13. Cierre el navegador haciendo clic en el botón X en la esquina superior derechar.
369
Práctica JavaScript 9-4-B: Crear un banner cíclico


Ahora añadirá las declaraciones y funciones para el banner cíclico en la sección

<HEAD> de su página.
3. Haga clic con el mouse al final del corchete llave de final, "}",de la función
procesoSiguiente. Presione Enter dos veces y escriba el código, como se muestra
a seguir.
370
var imgbanner = new

Array(“imágenes2/banner1.jpg”,“imágenes2/banner2.jpg”,“imágenes2
/banner3.jpg”);
var actualbanner = 0
var ctbanner = imgbanner.length;
function ciclo(){
actualbanner++;
if(actualbanner= = ctbanner){
actualbanner = 0;
}
window.document.bannerciclico.src =
imgbanner[actualbanner];
setTimeout( “ciclo()”,3000);
}
Ahora debe añadir código a la sección <BODY> de su página, que descargará su

aviso cíclico y lo centrará en la parte superior de su página Web.
4. Haga clic con el mouse después de “imágenes/hojasfondo.jpg” dentro la etiqueta

<BODY>. Presione la barra de espaciar une vez y escriba el comando resaltado
onLoad en el cuadro que sigue. Luego haga clic con el mouse después del
corchete “>” de la etiqueta <BODY> y presione Enter una vez. Escriba el código
resaltado que queda en el cuadro a seguir.
<BODY BGCOLOR="#HEXCDE" BACKGROUND="imágenes/hojasfondoXX.gif"

onLoad=“ciclo()”>
<CENTER>
<IMG SRC=“imágenes2/banner1.jpg” name=“bannerciclico”>
</CENTER>

WordPad.

Archivos HTML.

371
9. Haga clic en Aceptar del cuadro de diálogo de Abrir. Su página debe incluir un
nuevo aviso cíclico en el centro de la parte superior de su página Web. La página
debe rotar automáticamente las tres imágenes, aproximadamente cada tres
segundos. Las tres imágenes se muestran a continuación.

372
Desarrollo Web Apéndice A – Seguridad
APÉNDICE A – SEGURIDAD
La seguridad es responsabilidad de cada uno. Todos debemos cooperar en la
creación de un ambiente de trabajo lo más seguro posible. Siga las reglas de sentido
común presentadas en el desarrollo del curso y por su instructor.
Aquí hay algunas reglas básicas que usted debe asimilar como parte de su rutina
diaria con la Tecnología de la Información.
• Asegúrese que su comportamiento es apropiado para el lugar de trabajo.

• Reporte a su instructor de cualquier lesión.
• Mantenga las áreas limpias y ordenadas.
• Familiaricese con los procedimientos y la adecuada operación de los equipos.
• Obedezca todas las reglas de seguridad determinadas por su escuela, su
instructor y los fabricantes de los equipos.
A-1
Desarrollo Web Apéndice A – Seguridad
A-2
Desarrollo Web Apéndice B – Barras de Herramientas FrontPage
APÉNDICE B – BARRAS DE HERRAMIENTAS FRONTPAGE
Hay varias barras de herramientas en FrontPage. Sin embargo, para la mayoría de las funciones,
usará las seis barras de herramientas básicas que se listan abajo, y usará las barras de herramientas
Estándar y Formato con más frecuencia que las otras.
• Estándar • Ubicación
• Formato • Informes
• Efectos DHTML • Estilo
• Dibujos • Tablas
• Lienzo de dibujo • Panel de Tareas
• Exploración • WordArt
• Imágenes
Este apéndice describe la función de cada botón o icono de las barras de herramientas Estándar y
Formato. También proporciona breves descripciones de las barras de herramientas Efectos DHTML ,
Exploración, Imágenes y Tablas.
Estándar
Esta barra de herramienta es similar a las otras barras de herramientas de Microsoft. Esta contiene
botones para muchas tareas de rutina.
B-1
La tabla de abajo contiene las descripciones de cada botón de la barra de herramientas Estándar.
BARRA DE HERRAMIENTAS ESTÁNDAR
Botón Función
Página Nueva Crea una nueva página en blanco para editar
Abrir Abre una página existente para editar
Guardar Guarda la página actual en su disco duro o en la red
Buscar Encuentra los archivos y páginas Web en base al criterio dado.
Publicar Web Guarda y transfiere la página actual a su servidor Web
Panel de
alternancia Muestra su lista de carpetas
Imprimir Imprime la página actual
Vista Previa en
el explorador Muestra el documento actual en su buscador predeterminado
Ortografía Chequea la ortografía del documento actual
Cortar Borra la información del documento actual y la almacena en el

Clipboard
B-2
Botón Función
Copiar Deja la información en el documento actual y almacena una

copia de este en el Clipboard
Pegar Inserta la información almacenada en el Clipboard dentro del

documento actual en el lugar que se le indique
Copiar Formato Copia el formato al texto seleccionado en la página actual
Deshacer Cancela el último comando en la página actual
Rehacer Cancela el último comando Deshacer en la página actual
Componente Inserta componentes específicos FrontPage-s en la página Web

Web actual (requiere extensiones FrontPage en el servidor Web)
Insertar Tabla Inserta una tabla en la ubicación especificada
Insertar Imagen Inserta una imagen desde su computador local (o desde otras
desde Archivo ubicaciones tales como la World Wide Web o la Galería Microsoft
Clip) dentro de una ubicación especificada.
Muestra la barra de herramientas Dibujo.
Dibujo
B-3
Botón Función
Insertar Inserta un hipervínculo en la ubicación especificada

Hipervínculo
Actualizar Actualiza la página actual o vista sobre la pantalla
Detener Detiene la carga de la página en la ventana Vista previa
Mostrar Todo Muestra todos los símbolos de formato ocultos en la página

actual
Ayuda Muestra el menú de Ayuda FrontPage
Formato
Esta barra de herramientas es similar a otras barras de herramientas de Microsoft. Esta contiene
botones para muchas tareas rutinarias de edición de texto.
B-4
La tabla de abajo contiene las descripciones de cada botón/caja de la barra de herramientas

Formato.
BARRA DE HERRAMIENTAS FORMATO
Botón/caja Función
Las selecciones en el menú descolgable le permiten cambiar los

Estilo estilos de texto en la página Web actual.
Las selecciones en el menú descolgable le permiten cambiar la

Fuente fuente en la página Web actual.
Las selecciones en el menú descolgable le permiten cambiar el

Tamaño de fuente tamaño de fuente en la página Web actual.
Hace negrita el texto

Negrita
Hace cursiva el texto

Cursiva
Subraya el texto
Subrayado
Alinear a la Alinea el texto con el margen izquierdo

izquierda
Centrar Centra el texto horizontalmente en la página
Alinear a la derecha Alinea el texto con el margen derecho
Alinea el parágrafo seleccionado con ambos márgenes, tanto el

derecho como el izquierdo.
Justificar
B-5
BARRA DE HERRAMIENTAS FORMATO
Botón/caja Función
Aumenta el tamaño de fuente del texto seleccionado
Aumentar tamaño de
fuente
Disminuye el tamaño de fuente del texto seleccionado
Disminuir tamaño
de fuente
Numeración Formatea el texto como una lista numerada, tales como 1, 2, y 3,

ó a, b, y c.
Viñetas Formatea el texto como lista con viñetas
Reducir sangría Modifica el margen de página más a la izquierda
Aumentar sangría Modifica el margen de página más a la derecha
Muestra la barra de herramientas Bordes
Bordes externos
Resaltar
Cambia el color de fondo del texto seleccionado de forma que se
destaque.
Color de fuente Cambia el color del texto
B-6
Efectos DHTML
Esta barra de herramientas es similar a otros menús descolgables Microsoft. Se usan las selecciones
de este menú para agregar efectos especiales.
Exploración
Esta barra de herramientas se usa cuando una página está en la vista Exploración. Ella le permite
ver y editar hipervínculos.
B-7
Imágenes
Esta barra de herramientas le ayuda a controlar como aparecerán las imágenes en sus páginas Web.
Usando una combinación de botones, usted puede realizar ciertas tareas de edición de imágenes tales
como agregar bordes, redimensionar y recortar.
Tablas
Esta barra de herramientas le ayuda a crear y editar tablas. Usando una combinación de botones,
usted puede realizar ciertas tareas de edición de tablas tales como insertar filas y columnas, o
combinar y dividir celdas.
B-8
Desarrollo Web Apéndice C – Anteproyecto de sitio Web
APÉNDICE C – ANTEPROYECTO DE SITIO WEB

Este Apéndice contiene la información para bosquejar las cinco páginas para el anteproyecto del
sitio Web Guitarras usadas última oportunidad:
Exploración
Inicio (Principal)
Guitarras eléctricas
Vínculos
Contactos
Usted usará FrontPage para crear este sitio Web en los Temas 4 al 6. Refiérase a estos
bosquejos durante el Tema 4, Actividad 2, y en cualquier momento durante el proceso de
desarrollo Web.
NOTA: La página de bosquejo de la Guitarra acústica no se

incluye en este apéndice porque la mayoría de los elementos de
diseño son idénticos a la página Guitarras eléctricas.
C-1
Bosquejo de exploración
C-2
Bosquejo de Página principal
C-3
Bosquejo de página guitarras eléctricas
C-4
Bosquejo de página vínculos
C-5
Bosquejo de página contactos
C-6
Desarrollo Web Apéndice D – Barra de herramientas/Tabla de atributos FrontPage
APÉNDICE D – BARRA DE HERRAMIENTAS/TABLA DE ATRIBUTOS

FRONTPAGE
Este Apéndice describe los atributos de las tablas y celdas de FrontPage que se pueden cambiar
en las cajas de diálogo Propiedades de Tablas y Celdas. También describe la barra de
herramientas Tablas y el menú Tabla.
Usted usará FrontPage para crear tablas en el Tema 5, Actividad 1. Refiérase a este apéndice
durante esta actividad y en cualquier momento durante el proceso de desarrollo Web.
Tabla de atributos
Caja de Diálogo Propiedades de Tabla
D-1
Tabla de Atributos
Atributo Descripción
Relacionado a la posición de la tabla en la página.

Alineación
Las opciones son predeterminado, izquierda, derecha y centrar
Relacionado a como se envuelve el texto alrededor de una tabla
Flotante Las selecciones izquierda o derecha alinean la tabla a los márgenes

izquierdo o derecho, y el texto se envuelve sobre los lados.
Si Flotante no está seleccionado (predeterminado), el texto no se

envolverá alrededor de una tabla, y en su lugar aparecerá encima y abajo
de ella.
Relacionado al espacio entre el contenido de la celda y el borde.

Margen de celdas
Se fija en píxeles.
Ajusta el espacio entre celdas

Espaciado entre
celdas Se fija en píxeles.
Ajusta el ancho de una tabla. Si no está especificado, la tabla se ajustará

Especificar ancho automáticamente por sí misma.
Se fija en píxeles o porcentaje del ancho de la ventana del explorador.
Ajusta el alto de la celda en una tabla. Si no está especificado, las celdas

Especificar alto se ajustarán automáticamente por sí mismas.
Se fija en píxeles o porcentaje del alto de la ventana del explorador.
Ajusta el tamaño, color, y efecto de los bordes de las tablas.

Bordes
El tamaño se fija en píxeles. Los efectos se refieren a un efecto de luz y
sombra oscura.
Mostrar bordes de Ajusta para que aparezcan ambos la celda y los bordes de tabla.
celdas y de tabla
Ajusta el color de fondo de una tabla.

Fondo
Si no se especifica color alguno, el color se predeterminará al color de
fondo de la página Web.
D-2
Atributos de celda
Caja de diálogo Propiedades de celda
D-3
Atributo Descripción
Ajusta horizontalmente los contenidos de una celda.

Alineación horizontal
Las opciones son predeterminado, izquierda, derecha, centrar y justificar.
Ajusta verticalmente los contenidos de una celda.

Alineación vertical
Las opciones son predeterminado, superior, medio, línea de base e
inferior.
Ajusta la altura de la celda en relación a otras celdas en la fila.

Número de filas
Generalmente usada para crear celdas que cubren muchas filas.
Ajusta el ancho de la celda con relación a las otras celdas dentro de la

Número de
columna.
columnas
Generalmente usada para crear celdas que cubren muchas columnas.
Ajusta el ancho de una celda

Especificar ancho
Se fija en píxeles o porcentaje del ancho de tabla.
Ajusta el alto de una celda.
Especificar alto Se fija en píxeles o porcentaje de la altura de la tabla.
Si no se especifica la altura, la celda se ajustará automáticamente a la

forma de los contenidos.
Celda de Identifica a una celda particular como cabecera de celda.

encabezado
Utilizada con hojas de estilo cascada.
No ajustar Obliga a todos los contenidos de una celda a mantenerse sobre una sola
línea a menos que esté abierta en un lugar en particular.
Ajusta el tamaño, color y efecto de los bordes de tabla.

Bordes
El tamaño se fija en píxeles. Los efectos se refieren a efectos de luz y
sombras oscuras.
Ajusta el color de fondo de una tabla.

Fondo
Si no se especifica color, el color queda predeterminado por el color de
fondo de la página Web.
D-4
Barra de Herramientas Tablas
La Barra de Herramientas Tablas
Botón Nombre Descripción
Dibuja una tabla o modifica la presentación de una

Dibujar Tabla
tabla existente.
Borra elementos de la tabla, tales como filas y

Borrador
columnas.
Insertar Filas Inserta filas en la tabla seleccionada.
Insertar
Inserta columnas en la tabla seleccionada.
Columnas
Eliminar Celdas Elimina las celdas en la tabla seleccionada.
D-5
Combinar Combina múltiples celdas de una tabla en una sola

Celdas celda.
Divide una celda simple de una tabla en múltiples

Dividir Celdas
celdas.
Alinear en la Alinea el texto en una celda seleccionada hacia arriba

parte superior de la celda.
Centrar
Alinea el texto en el centro de la celda seleccionada.
Verticalmente
D-6
Alinear en la
Alinea el texto en la base de la celda seleccionada.
parte inferior
Distribuir Filas Hace igualar la altura y el ancho de filas

Uniformemente seleccionadas.
Distribuir
Hace igualar la altura y el ancho de columnas
Columnas
seleccionadas.
Uniformemente
Crea un color de fondo para las filas, columnas,

Color de Relleno
celdas, o para la toda la tabla.
D-7
Autoajustar el Obliga a las celdas o filas a ajustarse

contenido automáticamente unas con otras.
Automáticamente aplica formatos a la tabla, tales

Autoformato de
como bordes y sombreado. También redimensiona
Tablas
una tabla para ajustarla al contenido de las celdas.
Copia el formato y los contenidos de un rango de

Rellenar hacia celdas en las celdas de abajo.
abajo
Rellenar hacia la Copia el formato y los contenidos de un rango de

derecha celdas en las celdas de la derecha
D-8
Menú Tabla
Menú Tabla
Usted puede usar el menú Tabla para todas las tareas de administración de tablas descritas bajo
la barra de herramientas Tablas. Adicional a estas tareas, el menú Tabla también le permite
convertir texto en una tabla o una tabla en texto. También puede acceder a la caja de diálogo
Propiedades de Tabla y Celdas desde este menú.
D-9
Desarrollo Web Apéndice E – Valores de Color y Equivalentes Hexadecimales
APÉNDICE E – VALORES DE COLOR Y EQUIVALENTES

HEXADECIMALES
Los nombres de color no tienen espacios porque si usted escribe el nombre en lugar del código
puede no haber espacio para etiquetar el trabajo..
Nombre del Color Código HEX

ALICEBLUE #F0F8FF
ANTIQUEWHITE #FAEBD7
AQUA #00FFFF
AQUAMARINE #7FFFD4
AZURE #F0FFFF
BEIGE #F5F5DC
BISQUE #FFE4C4
BLACK #000000
BLANCHEDALMOND #FFEBCD
BLUE #0000FF
BLUEVIOLET #8A2BE2
BROWN #A52A2A
BURLYWOOD #DEB887
CADETBLUE #5F9EA0
CHARTREUSE #7FFF00
CHOCOLATE #D2691E
CORAL #FF7F50
CORNFLOWERBLUE #6495ED
CORNSILK #FFF8DC
CRIMSON #DC143C
CYAN #00FFFF
DARKBLUE #00008B
DARKCYAN #008B8B
DARKGOLDENROD #B8860B
DARKGRAY #A9A9A9
DARKGREEN #006400
DARKMAGENTA #BDB76B
DARKOLIVEGREEN #556B2F
DARKORANGE #FF8C00
DARKORCHID #9932CC
DARKRED #8B0000
DARKSALMON #E9967A
DARKSEAGREEN #8FBC8F
DARKSLATEBLUE #483D8B
DARKTURQUOISE #00CED1
DARKVIOLET #9400D3
DEEPPINK #FF1493
DEEPSKYBLUE #00BFFF
DIMGRAY #696969
DODGERBLUE #1E90FF
FIREBRICK #B22222
FLORALWHITE #FFFAF0
FORESTGREEN #228B22
FUCHSIA #FF00FF
E-1

GAINSBORO #DCDCDC
GHOSTWHITE #F8F8FF
GOLD #FFD700
GOLDENROD #DAA520
GRAY #808080
GREEN #008000
GREENYELLOW #ADFF2F
HONEYDEW #F0FFF0
HOTPINK #FF69B4
INDIANRED #CD5C5C
INDIGO #4B0082
IVORY #FFFFF0
KHAKI #F0E68C
LAVENDER #E6E6FA
LAVENDERBLUSH #FFF0F5
LEMONCHIFFON #FFFACD
LIGHTBLUE #ADD8E6
LIGHTCORAL #F08080
LIGHTCYAN #E0FFFF
LIGHTGOLDENRODYELLOW #FAFAD2
LIGHTGREEN #90EE90
LIGHTGGREY #D3D3D3
LIGHTPINK #FFB6C1
LIGHTSALMON #FFA07A
LIGHTSEAGREEN #20B2AA
LIGHTSKYBLUE #87CEFA
LIGHTSLATEGRAY #778899
LIGHTSTEELBLUE #B0C4DE
LIGHTYELLOW #FFFFE0
LIME #00FF00
LIMEGREEN #32CD32
LINEN #FAF0E6
MAGENTA #FF00FF
MAROON #800000
MEDIUMAQUAMARINE #66CDAA
MEDIUMBLUE #0000CD
MEDIUMORCHID #BA55D3
MEDIUMPURPLE #9370DB
MEDIUMSEAGREEN #3CB371
MEDIUMSLATEBLUE #7B68EE
MEDIUMSPRINGGREEN #00FA9A
MEDIUMTURQUOISE #48D1CC
MEDIUMVIOLETRED #C71585
MIDNIGHTBLUE #191970
MINTCREAM #F5FFFA
MISTYROSE #FFE4E1
NAVAJOWHITE #FFDEAD
NAVY #000080
OLDLACE #FDF5E6
OLIVE #808000
OLIVEDRAB #6B8E23
E-2

ORANGE #FFA500
ORANGERED #FF4500
ORCHID #DA70D6
PALEGOLDENROD #EEE8AA
PALEGREEN #98FB98
PALETURQUOISE #AFEEEE
PALEVIOLETRED #DB7093
PAPAYAWHIP #FFEFD5
PEACHPUFF #FFDAB9
PERU #CD853F
PINK #FFC0CB
PLUM #DDA0DD
POWDERBLUE #B0E0E6
PURPLE #800080
RED #FF0000
ROSYBROWN #BC8F8F
ROYALBLUE #4169E1
SADDLEBROWN #8B4513
SALMON #FA8072
SANDYBROWN #F4A460
SEAGREEN #2E8B57
SEASHELL #FFF5EE
SIENNA #A0522D
SILVER #C0C0C0
SKYBLUE #87CEEB
SLATEBLUE #6A5ACD
SLATEGRAY #708090
SNOW #FFFAFA
SPRINGGREEN #00FF7F
STEELBLUE #4682B4
TAN #D2B48C
TEAL #008080
THISTLE #D8BFD8
TOMATO #FF6347
TURQUOISE #40E0D0
VIOLET #EE82EE
WHEAT #F5DEB3
WHITE #FFFFFF
WHITESMOKE #F5F5F5
YELLOW #FFFF00
YELLOWGREEN #9ACD32
E-3
THIS
THIS

34444-E2 - DesarrolloWeb - CG - ED1 - PR1

Cargado por

Copyright:

Formatos disponibles

34444-E2 - DesarrolloWeb - CG - ED1 - PR1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

34444-E2 - DesarrolloWeb - CG - ED1 - PR1

Cargado por

Copyright:

Formatos disponibles

Desarrollo Web por

Guía del Módulo

Primera impresión, octubre 2003

Copyright octubre, 2003 Lab-Volt Systems, Inc.

La información en este documento está sujeta a cambio sin notificación y no representa un

Los logotipos de Lab-Volt e Information Technology™ son marcas registradas de Lab-Volt

Windows™ es una marca de Microsoft Corp.

PowerPoint™ es una marca de Microsoft Corp.

Sección 1 – Inicio ......................................................................................................... 1

Utilice esta Guía del Módulo para:

Por favor asegúrese de completar la TARJETA DE REGISTRO DE PROPIEDAD

2. El estudiante selecciona su nombre y hace clic en Entrar al sistema.

Seleccionar otros temas y salir del módulo

El botón Menú llama estos menús:

NOTA: Obtenga el menú de referencia haciendo clic en el

El botón Marcador marca la pantalla actual. El estudiante puede hacer clic en el

El botón Ejecutar una aplicación abre el software de un tercero.

El botón Ayuda asiste a los estudiantes con la información del sistema.

El botón Internet abre el navegador de Internet. Los estudiantes tendrán libre

Utilice el botón Salir para salir del módulo.

La flecha derecha ⇒ botón que mueve hacia la pantalla siguiente.

TEMA 1 – FUNDAMENTOS DE INTERNET

En este tema, usted desarrollará una comprensión de las complejidades que

Además, tendrá que analizar tendencias actuales en el uso de Internet. Examinará

Usted también utilizará técnicas de búsquedas simples y complejas para explorar la

Nuevos Términos y Palabras

Actividad 2 – Conectándose a Internet

Será capaz de:

1. describir los tipos de conexiones físicas utilizadas para conectarse a Internet.

Indicaciones: Práctica de URL

Abra a su Guía del estudiante/Carpeta en la hoja de datos titulada "Práctica de

1. En la línea de dirección, digite el URL siguiente: http://www.weather.com. Luego

Indicaciones: Costo de velocidad de Internet

1. En la caja de búsqueda de acceso a Internet, escriba "212" es la primera caja.

Ingrese código de área Seleccinar Conección

Indicaciones: Encontrando un ISP

1. Desfile abajo en la página Web y encuentre la sección marcada " Encuentre un

Actividad 3 – Navegando en la Web

Usted será capaz de:

• realizar una búsqueda simple.

Indicaciones: Práctica de búsqueda simple

En estas sesiones de práctica, a usted se le darán tres organizaciones o compañías

Siga las indicaciones de la Sesión de práctica 1. Esta vez, intente el URL de la

Indicaciones: Práctica de Búsqueda de directorio

Para la búsqueda de directorio, usted usará dos herramientas de directorio

1. Mireya Perez Power

Parte 1: usando Yahoo!

1. Haga clic en la línea de dirección para resaltar el texto. Digite la siguiente

NOTA: Si no llega a encontrar ningún sitio Web con

6. En la hoja de datos, anote el nombre del artista y el nombre de la obra de

Parte 2: Usando Hispanolink

1. Haga clic en la línea de dirección para resaltar el texto. Digite en la dirección

NOTA: Si no llega a encontrar ningún sitio Web con la información que

6. En la hoja de datos, anote el nombre del artista y el nombre de la obra de

Indicaciones: Práctica de motor de búsqueda

Parte 1: Usando Google

Luego, siga las indicaciones debajo para encontrar la información.

1. Haga clic en la línea de dirección para resaltar el texto. Digite la siguiente

NOTA: Si no llega a encontrar ningún sitio Web con la información que