Actividad

3
W We eb be ed du uc ca at tiiv va a. .
La presente actividad tiene como propsito el desarrollo de un proyecto de Web educativa formativa (Web de asignatura), de acuerdo al proyecto elaborado, sta deber proporcionar un conjunto de recursos de aprendizajes (apuntes, manuales, etc.), actividades de aprendizajes y canales de comunicacin para apoyar y lograr los objetivos de aprendizaje de una asignatura.

Gua N 2.

Interfaz de las Pginas de SitioWeb

1. Generacin de la plantilla.

Para trabajar la interfaz de las pginas, es necesario tomar en cuenta la estructura del general del sitio y de las pginas del proyecto. Para el presente se va trabajar con cinco tablas, comprendiendo la siguiente estructura:
1.Rtulo (700x127pix) 2.Men (700 x - pix) 3.Estado (700 x - pix) 4.Cuerpo (700x500 pix.)

5.Pie (700x30 pix.)

Para iniciar la edicin vamos a seguir los siguientes pasos: 1. Abrir el archivo plantilla.html desde la ventana Archivos, seleccione haciendo doble clic sobre el archivo.

Construccin de la Web de asignatura

-1-

2. La edicin se realiza en la ventana del documento, siguiente:

1. En la ventana del inspector de propiedades, seleccione el botn Propiedades de la pgina y en la caja de dilogo configure el color de fondo, seleccione el color gris o ingrese el cdigo de color #CCCCCC.

Construccin de la Web de asignatura

-2-

Ahora, seleccione la categora Ttulo/Codificacin, ingrese el Ttulo de la pgina. Web del Curso xxxxxxx

Finalice haciendo clic el botn Aceptar. Iniciamos trabajando la tabla del rotulo, para ello seguimos los siguientes pasos: 1. Seleccione el men Insertar > Tabla, establezca los siguientes parmetros: Filas 1, Columnas 1, Grosos del borde 0, Relleno de celda 0, Espacio entre celdas 0, y pulse el botn Aceptar.

Construccin de la Web de asignatura

-3-

2. En la ventana del inspector de propiedades de la tabla, inserte los siguientes parmetros: Al (altura) 127 pix, Alinear Centro, Im. (imagen de fondo) inserte el archivo rotulo.png que se encuentra en la carpeta imagenes del proyecto bsquelo pulsando en

3. Para insertar el rtulo de la Web, haga clic dentro de la tabla, en el inspector de propiedades considere los siguientes parmetros: Formato: Encabezado 1, Color del texto: blanco #FFFFFF, Alinear texto al centro. Luego escriba el nombre de la Web del Curso de .

Construccin de la Web de asignatura

-4-

Insertamos la tabla de opciones o men: 1. Haga clic fuera de la tabla insertada siguiendo el paso 1 con los mismos parmetros. En la ventana de propiedades slo considere el parmetro Alinear: Centro. Tabla de estado de navegacin del sitio: 1. Haga clic fuera de la tabla insertada siguiendo el paso 1 con los mismos parmetros. En la ventana de propiedades slo considere el parmetro Alinear: Centro, color de fondo: azul o #005089

2. Ahora insertamos texto con los siguientes parmetros: Fuente Arial, Helvetica., Tamao 12, color blanco o #FFFFFF, luego escriba Inicio
Construccin de la Web de asignatura
-5-

Tabla del cuerpo o contenidos del sitio: 1. Haga clic fuera de la tabla insertada siguiendo el paso 1 con los mismos criterios, En la ventana del inspector de propiedades de la tabla, inserte los siguientes parmetros: Al (altura) 500 pix, Alinear Centro, color fondo blanco o #FFFFFF.

Tabla del pie de pgina del sitio: 1. Haga clic fuera de la tabla insertada siguiendo el paso 1 con los mismos criterios, En la ventana de propiedades de la tabla determines los siguientes parmetros:: Al (altura) 30 pix., Alinear Centro, Im. (imagen de fondo) inserte el archivo pie.png que se encuentra en la carpeta imagenes del proyecto pulsando en

Construccin de la Web de asignatura

-6-

2. Ahora ingresamos un texto con informacin del diseador, por ejemplo Diseado por velaldo.com 2010, (ponga el suyo) para ello haga clic dentro de la tabla y configure los siguientes parmetros en el inspector de propiedades de texto Fuente:Arial, Helvetica, Tamao 10 pixeles, Color: blanco #FFFFFF.

2. Generar los enlaces o estructura de navegacin

pasos: 1. Haga clic en la tabla de men y seleccione la opcin de la barra de men Insertar > Objetos de imagen > Barra de navegacin, establezca los siguientes parmetros: Insertar: Horizontalmente.

Iniciamos generando la barra de navegacin, para ello seguimos los siguientes

Inserte los elementos de la barra de navegacin pulsando en , para ello previamente ingrese el nombre del elemento (ejm. Inicio), establezca la Imagen
Construccin de la Web de asignatura
-7-

arriba (ejm. button_1.gif) y la Sobre imagen (ejm. Button_1ro.gif). Considere los siguientes elementos con sus respectivas imgenes: Inicio: Programa: Recursos: Actividades: Foro: Chat: Contactos: button_1.gif / button_1ro.gif button_2.gif / button_2ro.gif button_3.gif / button_3ro.gif button_4.gif / button_4ro.gif button_6.gif / button_6ro.gif button_7.gif / button_7ro.gif button_8.gif / button_8ro.gif

Concluido el proceso pulse el botn Aceptar. Se inserta la barra de la siguiente forma:

Finalmente establecemos los vnculos de las opciones de la barra de navegacin con las pginas respectivas, para ello seguimos los siguientes pasos: 1. Seleccione el elemento Inicio de la barra de navegacin creada. Luego en el inspector de propiedades selecciones Vnculo y haga clic sin soltar en el icono sealar archivo y arrastre hasta el archivo index.html de la raz del sitio de la ventana de Archivos.

2. Aplique el mismo proceso anterior para establecer los siguientes vnculos: Inicio ------ index.html Programacin ------ programa.html Recursos ------ recursos/index.html
-8-

Construccin de la Web de asignatura

Actividades ------ actividades/index.html Foro ------ foro.html Chat ------ chat.html Contactos ------ contacto.html

4. Guardar la plantilla

Ctrl+S.

Seleccione la opcin de la barra de men Archivo > Guardar o pulse las teclas

5. Visualizar la plantilla

Para visualizar una pgina en el navegador de internet (Internet Explorer) pulse la tecla de funciones F12 o pulse el icono Vista previa.

Este es el resultado:

Construccin de la Web de asignatura

-9-