Palabras del

Director General
Respetado estudiante:
Es para mi un gran honor, el tener que dirigirte
estas palabras con la finalidad de darte la más
cálida bienvenida a ésta, tu casa, donde ilustres
personajes, se forjaron un ideal, lograron un
objetivo, vieron la luz de una nueva esperanza,
por ello joven estudiante la vida es un constante
aprendizaje y por más entendido que seas siempre hay algo que aprender.
Si eres estudiante, tu mente recién empieza a florecer, aprovecha esta gran oportunidad para
complementar tus conocimientos, a fin de que tus ideas se hagan realidad.
Si eres trabajador con mayor razón, la fuerza de tu voluntad, tu experiencia y la nobleza de tu corazón
te impulsan a ser un hombre de bien, de progreso y un tenaz contribuyente de la producción, es por
ello mientras más capacitado estés, mayores oportunidades de éxito tendrás y por lo tanto, mayor será
el orgullo de tu familia y de la sociedad.
Si eres profesional, mira y realiza las cosas con excelencia, con responsabilidad, respeto y capacidad,
por ello nunca terminarás de aprender y los acontecimientos que te toca desarrollar debes hacerlo con
profesionalismo, humildad y decisión gerencial.
Pues, señores alumnos, tengan siempre presente que el estudio en todas sus dimensiones, ennoblece el
espíritu, embellece el corazón y siempre serás noble y sencillo en la condición de tus responsabilidades
y de tu propio destino, por eso cada vez que tengas la oportunidad de estudiar, hazlo con la mejor
voluntad, con optimismo y perseverancia, no seas negativo, menos exquisito, no pongas piedra en
tu camino; todo lo contrario da gracias a Dios por esta nueva oportunidad de tu vida, porque Él es el
eterno vigilante de tu destino y EIGER el vehículo que te trasladará hacia un mundo mejor, estudia con
voluntad y amor, el programa que has elegido, puesto que tu camino es todo un reto que afrontar,
cumple con tus responsabilidades, piensa que estás en una institución seria, responsable, organizada
y te damos gracias por la oportunidad que nos brindas para ayudarte a triunfar, ya que tú eres el mejor
personaje de nuestra Escuela; y sólo me queda invocarte el respeto absoluto a sus principios y normas
institucionales.
EIGER es tu aliado, tu apoyo y parte de tu familia, es tu Alma Mater, y cuando en el eterno caminar
de la vida tengas un inconveniente, piensa que no estás sólo, piensa que Dios está contigo y con
cada uno de nosotros, siempre estaremos dispuestos a ayudar en todo lo que sea posible dado que el
éxito tuyo, es el éxito de tu familia, de EIGER y de la sociedad.

Muchas gracias

Guía del Estudiante: Curso de Páginas Web

Obra de la Editorial EIGER Dirección General : Víctor Manuel Cipriani Nevad
ESCUELA INTERNACIONAL DE GERENCIA
Gerencia de Gestión Pedagógica : Dina Vásquez Vda. de Vicuña
Avenida Gral. Santa Cruz 708 - Jesús María
Coordinación Editorial : Frixo Saco-Vértiz Ende
Lima - Perú
Teléfono: 424-9819 Fax:431-9136 Edición : Juan Salazar
Web: http://www.eiger.org.pe Diseño y Diagramacíón : Juan C. Palacios Ganoza
E-mail: contactenos@eiger.org.pe
ISBN:
Todos los derechos reservados. Prohibida la reproducción total Depósito Legal:
o parcial de esta obra por cualquier medio, sin la autorización
expresa de EIGER.

1
 SÍLABO
III Unidad Didáctica:
“Creación y Edición de Páginas Web”
Capacidad terminal
Organiza, estructura y crea una página web
discriminando información y presentación
adecuada.
Criterio de evaluación
• Diferencia y selecciona información
necesaria para la página web.
SESIÓN DE APRENDIZAJE N° 01
Contenidos:
• Organización de la información.
• Conceptos básicos de pagina web
• Estructura de la página web.
• Cómo crear página de inicio
• Encabezado - Cuerpo - Despedida.
• Programa Dreamweaver
• Práctica N° 01
Criterio de evaluación
• Selecciona y aplica comandos y parámetros
para la creación y edición de una página
web.
SESIÓN DE APRENDIZAJE Nº 02
Contenidos:
• Crear un sitio web.
• Ingreso de información.
• Formato de texto y párrafo.
• Marquesinas y fondo de página.
• Práctica N° 02
2
IV Unidad Didáctica:
“Hipervínculos y Publicación de
Páginas”
Capacidad Terminal
Aplica tablas y utiliza los comandos adecuados
para vincular páginas web, agilizando su
presentación.
Criterio de evaluación.
• Discrimina organiza e ingresa la información
en tablas.
SESIÓN DE APRENDIZAJE Nº 03
Contenidos:
• Aplicación de tablas y procedimientos en la
vinculación y enlaces de páginas web.
• Procedimientos y propiedades de tablas.
• Procedimientos y propiedades de imágenes.
• Practica N° 03
Criterio de Evaluación
• Crea y vincula diferentes páginas web con
sonidos y utiliza el servidor adecuado para
publicarla.
SESIÓN DE APRENDIZAJE 04
Contenidos:
• Insertar Objetos Multimedia.
• SONIDOS
• VIDEOS
• BOTONES
• Creación de marcos.
• Creación de formularios.
• Publicación de la página web en internet.
• Practica N° 04
SESIÓN DE APRENDIZAJE 05
Contenidos:
• Proyecto Final
• Diseño del proyecto
• Recopilación de datos
• Vincular las páginas en el proyecto
III
UNIDAD
DIDÁCTICA
PÁGINAS WEB

CAPACIDAD TERMINAL
• Organiza, estructura y crea una página
web discriminando información y
presentación adecuada.

CRITERIOS DE EVALUACIÓN

Sesión 1
• Diferencia y selecciona información
necesaria para la página web.

Sesión 2
• Selecciona y aplica comandos y
parámetros para la creación y edición
de una página web.

3
Nociones Básicas 1
SESIÓN

Organización de la Información.

La organización de la información para crear una página web es de suma importancia debido a que antes de
iniciar la creación se deberá tener los recursos que se utilizarán en el diseño y animación de la página, como
por ejemplo: las imágenes, los sonidos, los videos entre otros recursos etc.

Conceptos de Página Web, Web Site, Hipervínculo

Una página web es un documento electrónico adaptado particularmente para el Web, que contiene
información específica de un tema en particular y que es almacenado en algún sistema de cómputo que se
encuentre conectado a la red mundial de información denominada Internet, de tal forma, que este documento
pueda ser consultado por cualquier persona que se conecte a esta red mundial de comunicaciones y que
cuente con los permisos apropiados para hacerlo. Una página Web, tiene la característica peculiar de que
el texto se combina con imágenes para hacer que el documento sea dinámico y permita que se puedan
ejecutar diferentes acciones.

DREAMWEAVER

Dreamweaver es uno de los programas más utilizados para el diseño, el desarrollo y el mantenimiento de
aplicaciones y sitios web. Resulta fácil crear complejas y sofisticadas páginas web dinámicas. Dreamweaver
es una estupenda aplicación que permite crear y manipular cualquier sitio web con enorme facilidad y
precisión. La alta calidad de los diseños creados con Dreamweaver queda garantizada gracias a que posee
potentes y mejorados controles y herramientas.

Estructura de una Página Web en HTML

Básicamente toda página web se encuentra estructurada de la siguiente manera:

Inicio de Página <HTML>

Inicio de la Cabecera <HEAD>

Inicio del Título de la Página <TITLE>Primera página</TITLE>

Final de la cabecera </HEAD>

Inicio del cuerpo <BODY>

Corporación Educativa Eiger

Final del cuerpo </BODY>

Final de la Página </HTML>

...sin embargo, esta estructura únicamente es la parte básica a la cual se le podrá agregar otros componentes
según el criterio de la persona que diseña y elabora la pagina web.

4
 Nociones Básicas
1
SESIÓN

¿QUÉ ES DREAMWEAVER?

Dreamweaver es un software fácil de usar, que permite crear páginas web profesionales. Las funciones de
edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la
necesidad de programar manualmente el código HTML.

MODO INGRESO AL PROGRAMA

• INICIO
• TODOS LOS PROGRAMAS
• MACROMEDIA
• MACROMEDIA DREAMWEAVER

5
 1
SESIÓN

6
DESCRIPCIÓN DE LA PANTALLA DE DREAMWEAVER

Panel insertar Barra de titulo Barra de menú

Nociones Básicas

Barra de herramientas del documento

Regla horizontal y vertical Ventana del documento

Barra de estado

Panel de propiedades
 Nociones Básicas
1
SESIÓN

LA BARRA DE TÍTULO.
Muestra el nombre de la aplicación (dreamweaver) y el nombre del documento cuando se guarde.

LA BARRA DE MENÚ.
Nos muestra todas las operaciones que podemos utilizar en nuestro documento, como insertar objetos,
aplicar efectos de texto, crear tablas, realizar hipervínculos etc.

EL PANEL INSERTAR.
Contiene los botones para diseñar e insertar diferentes objetos de una manera más rápida y sencilla.

BARRA DE HERRAMIENTAS DEL DOCUMENTO.

Básicamente esta ventana nos permite visualizar el documento de 3 formas distintas que son las siguientes:

1. Código.- Muestra el código del documento en el lenguaje HTML, este código se utiliza para la elaboración
de Páginas Web.
2. Dividir.- Muestra el código y el diseño de la página web actual.
3. Diseño.- Únicamente nos muestra el diseño de la Página, donde el usuario podrá trabajar como si se
encontrara en un procesador de textos y podrá aplicar formato sin necesidad de conocer el lenguaje
HTML.

REGLA HORIZONTAL Y VERTICAL.

Se utiliza para medir las dimensiones de nuestra página web, esta medida se encuentra en pixeles.

7
 Nociones Básicas
1
SESIÓN

BARRA DE ESTADO.
Nos muestra información técnica de nuestra página web, como por ejemplo tamaño o medidas de la página,
peso en Kb y velocidad de transferencia.

EL PANEL DE PROPIEDADES.
Muestra las principales propiedades del objeto o texto seleccionado dando opción a ser modificadas de
acuerdo al criterio del usuario.

VENTANA DEL DOCUMENTO.

Es el lugar donde el usuario podrá diseñar su documento utilizando las diferentes herramientas de formato
según su criterio y creatividad.

VISTAS DE UN DOCUMENTO.
Se puede cambiar la vista del documento de dreamweaver según las nesecidades del usuario, el cambio de
visualizacion de un documento es para realizar modificaciones de una manera rapida y sencilla. Existen 3
vistas en una pagina que son:

8
 Nociones Básicas
1
SESIÓN

VISTA DE DISEÑO.
Esta vista nos permite trabajar con el editor visual de dreamweaver este editor tiene las principales funciones
de formato, lo cual lo permite al usuario diseñar su página web de una manera rápida y sencilla.

VISTA DE CÓDIGO
Nos muestra el código fuente de la página, el código fuente es la programación que tendríamos que realizar
en el lenguaje html para diseñar la página, este lenguaje se basa en una serie de etiquetas que sirven para
darle atributos especiales a nuestras páginas. Las etiquetas de una página web diseñada en html mayormente
tienen el siguiente formato:

<ETIQUETA>……………</ETIQUETA>
INICIO FIN

9
 Nociones Básicas
1
SESIÓN

VISTA DIVIDIR
En esta vista se mostrará el código y el diseño de nuestra página en la misma pantalla dividida en dos ventanas,
de esta manera el usuario podrá realizar cambios tanto en el ventana de diseño o en la ventana de código,
teniendo en cuenta que para realizar cambios en el código deberá tener como mínimo una referencia de las
principales etiquetas de HTML para la programación de la página web.

EJEMPLO DE ALGUNAS ETIQUETAS HTML

ATRIBUTO ETIQUETA EJEMPLO

Negrita <B></B> <B>Texto de prueba</B>
Cursiva <I></I> <I>Texto de prueba</I>
Teletype <TT></TT> <TT>Texto de prueba</TT>
Subrayado <U></U> <U>Texto de prueba</U>
Tachado <S></S> <S>Texto de prueba</S>
Parpadeo <BLINK></BLINK> <BLINK>Texto de prueba</BLINK>
Superíndice <SUP></SUP> <SUP>Texto de prueba</SUP>
Subíndice <SUB></SUB> <SUB>Texto de prueba</SUB>
Centrado <CENTER></CENTER> <CENTER>Texto </CENTER>

10
 Nociones Básicas
1
SESIÓN

Creación de una página

1 2

Escribe el
siguiente texto

11
 Nociones Básicas
1
SESIÓN

6 Seleccionar el texto

7
Seleccionar el
color del titulo

Seleccionar el párrafo
8

Seleccionar el color del

9
párrafo

LA PÁGINA SE MOSTRARÁ
10
DE LA SIGUIENTE MANERA

12
 Nociones Básicas
1
SESIÓN

GRABAR LA PÁGINA

1 3 INDICA EL LUGAR
DONDE SE GRABARÁ
LA PÁGINA.

4 ESCRIBE EL 5
NOMBRE DE LA
PÁGINA

6
Para visualizar la página en el navegador puede presionar la tecla F12 después de haber
grabado o puede buscar el archivo en la carpeta o ubicación donde lo guardó y hacer doble
clic sobre él.

F12

7 Nuestra página
se mostrará de la
CERRAR TODAS LAS VENTANAS siguiente manera.

13
 Nociones Básicas
1
SESIÓN

Ahora realiza las siguientes páginas web

Ahora diseñamos nuestra página web utilizando fuente, tamaño color y fondo de página
para asignarle la siguiente apariencia. Grabar con el nombre “visión”

14
 21
Nociones Básicas
Sitios Web SESIÓN
SESIÓN

¿QUÉ ES UN SITIO WEB?

Un sitio web es un gran espacio documental organizado que la mayoría de las veces está típicamente
dedicado a algún tema particular o propósito específico. Cualquier sitio web puede contener hiperenlaces a
cualquier otro sitio web, de manera que la distinción entre sitios individuales, percibido por el usuario, puede
ser a veces borrosa.

No debemos confundir sitio web con página web; esta última es sólo un archivo HTML, una unidad HTML,
que forma parte de algún sitio web. Al ingresar una dirección web, como por ejemplo www.wikimedia.org,
siempre se está haciendo referencia a un sitio web, el que tiene una página HTML inicial, que es generalmente
la primera que se visualiza. La búsqueda en Internet se realiza asociando el DNS ingresado con la dirección IP
del servidor que contiene el sitio web en el cual está la página HTML buscada.

CREAR UN SITIO WEB

3 Insertar el nombre
del sitio web
“proyecto peru”

15
 Sitios Web
2
SESIÓN

10

11

Ahora las páginas se grabarán automáticamente en el sitio “PROYECTO PERÚ”

16
 Sitios Web
2
SESIÓN

FORMATO DE TEXTO

Sirve para designar si un

texto tendrá un formato
de titulo o párrafo.

Se utiliza para seleccionar

el tipo de letra o fuente
del texto seleccionado

Sirve para seleccionar

el tamaño del texto
seleccionado

Aquí se guardarán los estilos

de texto que van utilizando
en la página web.

17
 Sitios Web
2
SESIÓN

Negrita Cursiva

Izquierda Centro

Derecha Justificado

Viñetas Lista ordenada

Anular sangría de texto Sangría de texto

MARQUESINAS
Las marquesinas son efectos que se le aplican a un texto u objeto para que se desplacen en un determinado
sentido dentro de la página web.

PASOS PARA APLICAR MARQUESINAS

SELECCIONAR EL TEXTO
1

4
3
5

18
 Sitios Web
2
SESIÓN

TAMBIÉN PODEMOS INSERTAR MARQUESINAS UTILIZANDO LA VISTA DE CÓDIGO

MARQUESINAS
Etiqueta de comienzo............................. <MARQUEE>
Etiqueta de cierre...................................</MARQUEE>

En cuanto a los atributos con los que cuenta la etiqueta MARQUEE, se encuentran:

Atributo Descripción
WIDTH Indica el ancho de la marquesina. Toma valores en pixeles o porcentajes.

HEIGHT
Delimita el largo de la marquesina. Tiene valores en pixeles o porcentajes.

BEHAVIOR=”scroll”
Valor por defecto que permite que aparezca el texto por la derecha, se va a la izquierda de forma continua.

BEHAVIOR=”slide”
Permite que aparezca el texto por la derecha, se va a la izquierda sólo lo hace una vez.

BEHAVIOR=”alternate”
Permite que el texto se desplace de derecha a izquierda y viceversa en varias ocasiones.

DIRECTION=”left, right”
Servirá para definir hacia donde mando el texto que, por defecto, será enviado hacia la izquierda.

DIRECTION=”up,down”
La dirección del texto también puede estar hacia arriba o hacia abajo.

SCROLLAMOUNT
Velocidad de desplazamiento, marca los saltos según el valor numérico.

SCROLLDELAY
Determina el retraso en el movimiento en milisegundos

LOOP
Define el número de veces que va a moverse el texto, por default indefinido.

HSPACE Y VSPACE
Definirían el espacio horizontal y vertical del texto fuera de la marquesina.

BGCOLOR
Color de fondo del texto.

ALIGN
Al igual que una imagen o tabla las marquesinas se pueden alinear mediante las opciones: top, middle,
bottom, pero no con left y right.

19
 Sitios Web
2
SESIÓN

FONDO DE PÁGINA:
Es el fondo que se mostrará en nuestra página, este fondo podrá ser un color o una imagen elegida por el
usuario. Si deseamos colocar una imagen como fondo de página se debe conocer la ubicación donde se
encuentra grabada, para poder realizar el procedimiento.

PASOS PARA APLICAR FONDO A UNA PÁGINA

Aquí se podrá
elegir el color
de fondo. Aquí se podrá elegir
la imagen que se
colocará de fondo.

20
 Sitios Web
2
SESIÓN

PRÁCTICA CALIFICADA DE PÁGINA WEB

1.-Crearemos un sitio web llamado “DISEÑO WEB”

1
Escribe
“diseño web”
2
3

6
5

Elegir “ninguno” 8

10

11

21
 Sitios Web
2
SESIÓN

2.- Ahora debemos crear las siguientes páginas web, utilizando fondos de página, marquesinas,
alineación y formato de fuente.

Grabar con el nombre “fireworks”

Grabar con el nombre “dreamweaver”

22
 Sitios Web
2
SESIÓN

Crear las siguientes páginas:

• Coloca de fondo una imagen.

• Aplica marquesina a la derecha.
• Aplicar formato de fuente y párrafo.
• Graba la página con el nombre “word.

• Coloca de fondo una imagen

• Aplica marquesina a la izquierda y derecha al titulo.
• Aplicar formato de fuente y párrafo.
• Graba la página con el nombre “power”

23
 Sitios Web
2
SESIÓN

• Coloca de fondo una imagen

• Aplica marquesina hacia arriba al titulo y el párrafo hacia abajo.
• Aplicar formato de fuente y parrafo.
• Graba la página con el nombre “excel”

• Coloca de fondo una imagen

• Aplica marquesina hacia abajo para el titulo y el párrafo hacia arriba.
• Aplicar formato de fuente y párrafo.
• Graba la página con el nombre “internet”

24
 Sitios Web
2

IV
SESIÓN

UNIDAD
DIDÁCTICA
Hipervínculos y Publicación de Páginas

CAPACIDAD TERMINAL
• Aplica tablas y utiliza los comandos
adecuados para vincular páginas
web, y agilizar su presentación.

CRITERIOS DE EVALUACIÓN

Sesión 3
• Discrimina organiza e ingresa la
información en tablas..

Sesión 4
• Crea y vincula diferentes páginas
web con sonidos y utiliza el servidor
adecuado para publicarla.

25
 3
Tablas e Imágenes
3Tablas e Imágenes
SESIÓN

SESIÓN

LAS TABLAS

Adobe dreamweaver nos permite crear y diseñar diversos formatos de tablas las cuales serán usadas en
nuestras páginas para darle un mejor orden y organización a nuestra información.

PARTES DE UNA TABLA

COLUMNAS

GROSOR DEL BORDE

FILAS

RELLENO DE LA CELDA

ANCHO DE LA TABLA

PASOS PARA CREAR TABLAS:

Número de
columnas
Número de filas

Ancho de la tabla

Grosor del borde

Se indicará la
posición donde se
encontrarán las
cabeceras de la
Tabla.

26
 Tablas e Imágenes
3
SESIÓN

Propiedades de la tabla

Este botón se utiliza para dividir una celda en 2 o más.

Celda dividida Celda dividida

en 2 filas en 2 columnas

Orientación Horizontal

Orientación
Vertical

Color de Relleno
Color del Borde

27
 Tablas e Imágenes
3
SESIÓN

COMBINAR CELDAS

Combinar celdas se refiere a la acción de covertir 2 o más celdas consecutivas en una sola.

PASOS PARA COMBINAR CELDAS.

Seleccionar las celdas que desea agrupar

1
2
Realiza un clic con
el botón derecho del
mouse.

5 Como resultado se
obtendrá una sola
celda.

REALIZA LA SIGUIENTE TABLA.

28
 Tablas e Imágenes
3
SESIÓN

INSERTAR COLUMNAS Y FILAS EN UNA TABLA

PASOS:

1 DEBEMOS
UBICARNOS EN UNA
CELDA.

2
3

Inserta una tabla en la posición donde se encuentre ubicado.

Inserta una FILA A LA TABLA, encima de la celda donde nos encontramos ubicados.

29
 Tablas e Imágenes
3
SESIÓN

Inserta una FILA A LA TABLA, debajo de la celda donde nos encontramos ubicados.

Inserta una COLUMNA, a la izquierda de la celda donde nos encontramos ubicados.

Inserta una COLUMNA, a la derecha de la celda donde nos encontramos ubicados.

30
 Tablas e Imágenes
3
SESIÓN

IMÁGENES

Por lo general, las páginas web utilizan una serie de imágenes de acuerdo a la información que existe en
su página, por ejemplo, si se trata de una empresa que vende artículos deportivos lo más adecuado sería
mostrar las imágenes de dichos artículos para que el usuario pueda ver lo que se está ofreciendo.

FORMATOS DE IMAGEN

• Existen diversos formatos de imágenes, pero los más utilizados son:

• Imágenes Gif.
• Imágenes Jpg
• Imágenes Bmp

INSERTAR UNA IMAGEN

3 Seleccionar la imagen que desea insertar.

31
 Tablas e Imágenes
3
SESIÓN

Ajustar el tamaño de la imagen.

PROPIEDADES DE LA IMAGEN

PESO DE LA SEPARACIÓN UBICACIÓN DE BORDE DE LA

IMAGEN DEL TEXTO LA IMAGEN IMAGEN

TAMAÑO DE LA LINK O DESTINO DEL ALINEACIÓN DE LA

IMAGEN HIPERVÍNCULO HIPERVÍNCULO IMAGEN AL TEXTO

MAPAS DE IMAGEN

Los mapas de una imagen se utilizan para darle atributos a las diferentes áreas de una misma imagen,
donde cada parte podrá tener un vínculo o enlace distinto, por ejemplo, si se cuenta con una imagen de una
computadora con todas sus partes, utilizando los mapas podremos darle un nombre y enlace distinto a cada
área.

32
 Tablas e Imágenes
3
SESIÓN

HERRAMIENTAS DE LOS MAPAS

SE UTILIZA PARA SELECCIONAR UN ÁREA RECTANGULAR DE LA IMAGEN

SE UTILIZA PARA SELECCIONAR UN ÁREA CIRCULAR DE LA IMAGEN

SE UTILIZA PARA SELECCIONAR UN ÁREA LIBRE DE LA IMAGEN

LA FLECHA, DEBE PULSARSE AL FINALIZAR LA CREACIÓN DE UN MAPA

33
 Tablas e Imágenes
3
SESIÓN

HIPERVÍNCULOS

Una de las principales características de las páginas web es la posibilidad de mostrar hipervínculos, los cuales
son textos o imágenes que al pinchar sobre ellos se visualizan otros archivos accesibles en otra localización.
Hay varias clases de vínculos:

• Vínculo a un archivo (html, imagen, sonido, animación, pdf, doc, etc.)

• Vínculo a un correo electrónico (abre un programa de correo electrónico)
• Vínculo a otra parte del archivo html (también llamado marcador o ancla)

Para crear un vínculo a otro archivo, debemos haberlo creado antes o existir en la red previamente. Para crear
un vínculo sobre un texto, seleccionamos el texto y le indicamos la ruta que debe seguir para encontrar el
archivo. Si queremos hacer un vínculo sobre una imagen seleccionaremos la imagen y le daremos la ruta del
archivo a abrir en la ventana de Propiedades. Los vínculos a otros archivos se pueden abrir en los siguientes
destinos:

• BLANK abre el documento en una ventana nueva del navegador.

• PARENT abre el documento en la ventana del marco que contiene el vínculo.
• SELF abre la ventana en el mismo marco o ventana que contiene el vínculo. Esta es la opción
predeterminada.
• TOP abre el documento vinculado en la ventana completa del navegador.

Para hacer un vínculo a un correo electrónico debemos poner en la casilla vínculo el siguiente texto
mailto:nombre@servidor.com, o ir al menú Insertar/Vínculo de correo electrónico, y rellenar los datos en la
ventana de diálogo. Para hacer un vínculo a otra parte de la página debemos crear antes el ancla en el menú
Insertar/Anclaje con nombre, que será la marca invisible donde se colocará la visualización del archivo en el
navegador.

34
 Tablas e Imágenes
3
SESIÓN

PRACTICA CALIFICADA DE PAGINA WEB

I.- CREA UN SITIO WEB LLAMADO “MI COMPUTADORA”

II.- CREA LAS SIGUIENTES PÁGINAS EN TU SITIO WEB

35
 Tablas e Imágenes
3
SESIÓN

III.- AHORA DEBEMOS CREAR UNA PÁGINA PRINCIPAL DESDE LA CUAL SE PODRÁ ACCEDER A LAS OTRAS
PÁGINAS CREADAS UTILIZANDO MAPAS E HIPERVÍNCULOS.

MONITOR.HTML

CPU.HTML

MOUSE.HTML

TECLADO.HTML

36
 43
Tablas e Imágenes
Multimedia SESIÓN
SESIÓN

INSERTAR SONIDOS
Actualmente una página web debe contar con un fondo musical o sonidos ya que es una forma de darle
mayor realce a nuestras páginas web, se debe tener en cuenta que los sonidos influencian en la aceptación
de nuestras páginas y deben estar acorde con el tema de la misma, por ejemplo si ponemos una página web
de relajación y yoga, lo ideal será colocar una melodía relajante.

PASOS PARA INSERTAR SONIDO DE FONDO:

1 2 3

4
5

Ampliar
el tamaño
8 para que se
visualice

37
 Multimedia Multimedia
4
SESIÓN

8 Al ejecutar la página
se mostrará.

INSERTAR VIDEOS EN FLASH

Actualmente la presentación de videos en nuestras páginas web se realiza para darle una mejor apariencia.
Los videos son una forma rápida y entretenida de mostrar información. Los videos Flash tienen la extensión
FLV.

PASOS PARA INSERTAR VIDEOS FLASH

1 2 3

11
4
9

10

38
 Multimedia
4
SESIÓN

5 Seleccionar
el archivo

39
 Multimedia
4
SESIÓN

INSERTAR BOTÓN FLASH

1 2 3

Seleccionar
4 modelo del
botón

5 Debemos escribir el texto que se mostrará en el botón

6 7
8 Seleccionar el archivo con el cual

9
deseamos conectarnos.

Debemos seleccionar el lugar donde

10 se cargará el archivo.

LOS MARCOS

Son una característica de las páginas web que nos permiten dividir la ventana del navegador en varias donde
cada una de ellas será independiente de las otras, las páginas podrán estar conectadas a través de hipervínculos.
Existen diversos tipos de Marcos, de los cuales el usuario deberá seleccionar el que estime conveniente.

40
 Multimedia
4
SESIÓN

PASOS PARA CREAR UNA PÁGINA DE MARCOS

1
2

3
5
Seleccionar modelo 6

PROPIEDADES DE LOS MARCOS

Las propiedades de los marcos se podrán observar al momento de tener seleccionado el área de cada parte
de los marcos, con estas propiedades de las páginas de los marcos se podrá establecer el fondo y demás
características de cada área.

41
 Multimedia
4
SESIÓN

CREACIÓN DE FORMULARIOS
Los formularios en las páginas web se utilizan para registrar datos, estos formularios serán diseñados con los
campos que estime conveniente.

PASOS PARA CREAR UN FORMULARIO

Ubicarse en una página en blanco y realizar lo siguiente:

2 3
1

42
 Multimedia
4
SESIÓN

UTILIZAR LAS SIGUIENTES HERRAMIENTAS:

Formulario Grupo de Opciones

Campo de Texto Lista/Menú

Campo Oculto Estilo de Salto

Área de Texto Campo de Imagen

Casilla de Verificación Campo de Archivo

Botón de Opción Botón

Etiqueta Juego de Campos

DISEÑA EL SIGUIENTE FORMULARIO

43
 Multimedia
4
SESIÓN

ANTES DE EMPEZAR ESTA PRACTICA DEBERA TENER UNA SERIE DE OBJETOS COMO POR EJEMPLO:
yy 4 IMÁGENES JPG DE LA COSTA
yy 4 IMÁGENES JPG DE LA SELVA
yy 4 IMÁGENES JPG DE LA SELVA
yy 1 ARCHIVO DE MUSICA(MP3) DE LA COSTA
yy 1 ARCHIVO DE MUSICA(MP3) DE LA SELVA
yy 1 ARCHIVO DE MUSICA(MP3) DE LA SELVA
CREAR UN SITIO WEB LLAMADO “TURISMO PERÚ”
CREA LAS SIGUIENTES PÁGINAS
yy EL TITULO DE LA PÁGINA DEBERÁ TENER MARQUESINA.
yy ESTA PÁGINA DEBERÁ TENER LAS 4 IMÁGENES DE LA COSTA INSERTADAS EN UNA TABLA DE 2 COLUMNAS POR 2 FILAS.
yy INSERTA EL ARCHIVO DE MÚSICA DE LA COSTA.
yy APLICAR EL FORMATO DE TEXTO Y DE PÁRRAFO SEGÚN SU CRITERIO FUENTE, TAMAÑO, COLOR ALINEACIÓN ETC.
yy GRABAR LA PÁGINA CON EL NOMBRE “COSTA”

44
 Multimedia
4
SESIÓN

CREA LAS SIGUIENTES PÁGINAS

• APLICAR FORMATO AL TITULO SEGÚN SU CRITERIO.
• ESTA PÁGINA DEBERÁ TENER LAS 4 IMÁGENES DE LA SIERRA INSERTADAS EN UNA TABLA DE 3 COLUMNAS POR 2 FILAS.
• INSERTA EL ARCHIVO DE MÚSICA DE LA SIERRA.
• APLICAR EL FORMATO DE TEXTO Y DE PÁRRAFO SEGÚN SU CRITERIO FUENTE, TAMAÑO, COLOR ALINEACIÓN ETC.
• GRABAR LA PÁGINA CON EL NOMBRE “SIERRA”.

CREA LAS SIGUIENTES PÁGINAS

yy APLICAR FORMATO AL TITULO SEGÚN SU CRITERIO.
yy ESTA PÁGINA DEBERÁ TENER LAS 4 IMÁGENES DE LA SELVA INSERTADAS EN UNA TABLA DE 3 FILAS POR 2 COLUMNAS.
yy INSERTA EL ARCHIVO DE MÚSICA DE LA SELVA.
yy APLICAR EL FORMATO DE TEXTO Y DE PÁRRAFO SEGÚN SU CRITERIO FUENTE, TAMAÑO, COLOR ALINEACIÓN ETC.
yy GRABAR LA PÁGINA CON EL NOMBRE “SELVA”.

45
 Multimedia
4
SESIÓN

CREA LA SIGUIENTE PÁGINA DE MARCOS

1
2

46
 Multimedia
4
SESIÓN

INGRESA EL SIGUIENTE TEXTO EN LA PARTE SUPERIOR DEL MARCO

EN LA PARTE INFERIOR DEL MARCO INSERTAR UNA TABLA DE UNA FILA CON 3 COLUMNAS.
yy EN CADA CELDA SE DEBE INSERTAR UN BOTÓN FLASH COMO SE MUESTRA EN LA IMAGEN.
yy ESPECIFICAR LOS HIPERVÍNCULOS PARA CADA BOTÓN.
yy INDICAR QUE LAS PÁGINAS SE CARGARÁN EN LA PARTE MAINFRAME.

yy AL FINALIZAR DEBERÁ REALIZAR UN CLIC SOBRE CADA BOTÓN Y DEBERÁ APARECER LA

PÁGINA SELECCIONADA.

47
Diseño del Proyecto 5
SESIÓN

PROYECTO FINAL DE PAGINA WEB

Antes de realizar este proyecto debemos contar con una serie de con una serie de archivos de conceptos,
archivo de imágenes, archivos de música, y archivos de video que deberemos utilizar en el diseño de nuestras
páginas, estos archivos deberán ser descargados de internet.

Archivos que debemos tener antes de comenzar nuestro proyecto

1.- Tener almacenado las siguientes imágenes (jpg)

• 4 Imágenes del león
• 4 Imágenes del tigre
• 4 Imágenes del cocodrilo
• 4 Imágenes del tiburón

2.- Tener almacenado archivos de música (mp3), según su criterio para colocarlo como fondo musical
en cada página, como mínimo debemos tener 8 archivos de música.

3.- Tener almacenado los siguientes archivos de video (flv)

• 1 Archivo del león
• 1 Archivo del tigre
• 1 Archivo del cocodrilo
• 1 Archivo del tiburón

4.- Tener almacenado los siguientes archivos gif (gif)

• 4 Archivo del león
• 4 Archivo del tigre
• 4 Archivo del cocodrilo
• 4 Archivo del tiburón

5.- Debemos tener en cuenta que únicamente estamos creando la descripción de 4 animales salvajes,
pero si deseamos crear más podrá agregarlos sin ningún problema.

6.-Ahora crearemos un sitio web llamado animales salvajes,

48
 Diseño del Proyecto
5
SESIÓN

7.- Debemos crear las siguientes páginas de información.

Nombre del sitio

"SALVAJES"

49
 Diseño del Proyecto
5
SESIÓN

50
 Diseño del Proyecto
5
SESIÓN

AHORA PROCEDEREMOS A CREAR LAS PÁGINAS WEB DEL LEÓN

GRABAR CON EL NOMBRE: DATOS_LEÓN

51
 Diseño del Proyecto
5
SESIÓN

GRABAR CON EL NOMBRE: FOTOS_LEÓN

GRABAR CON EL NOMBRE: VIDEO_LEÓN

52
 Diseño del Proyecto
5
SESIÓN

GRABAR CON EL NOMBRE: DATOS_TIGRE

GRABAR CON EL NOMBRE: FOTOS_TIGRE

53
 Diseño del Proyecto
5
SESIÓN

GRABAR CON EL NOMBRE: VIDEO_TIGRE

GRABAR CON EL NOMBRE: DATOS_COCODRILO

54
 Diseño del Proyecto
5
SESIÓN

GRABAR CON EL NOMBRE: FOTOS_COCODRILO

GRABAR CON EL NOMBRE: VIDEO_COCODRILO

55
 Diseño del Proyecto
5
SESIÓN

GRABAR CON EL NOMBRE: DATOS_TIBURÓN

GRABAR CON EL NOMBRE: FOTOS_TIBURÓN

56
 Diseño del Proyecto
5
SESIÓN

GRABAR CON EL NOMBRE: VIDEO_TIBURÓN

GRABAR CON EL NOMBRE: LISTA01

57
 Diseño del Proyecto
5
SESIÓN

ESTA PÁGINA DEBERÁ SER GRABADA 4 VECES CON DISTINTO NOMBRE, PARA LO CUAL DEBEMOS
REALIZAR EL SIGUIENTE PROCEDIMIENTO.

• LISTA_LEON
• LISTA_TIGRE
• LISTA_COCODRILO
• LISTA_TIBURON

AHORA CREAR UNA PÁGINA DE MARCOS CON EL SIGUIENTE FORMATO.

58
Diseño del Proyecto
5
SESIÓN

59