Pág.

1
COLEGIO DE LA PRESENTACION “LAS FERIAS”
UNIDAD DE PRODUCCION DE CONOCIMIENTO
AREA DE COMERCIO –INFORMATICA -
GRADO DECIMO –PERIODO 3 y 4 - 2010-

FrontPage: Las Página Web son diseños gráficos, que interactúan mediante enlaces a otras páginas en Microsoft FrontPage.
Internet: es la red mundial de computadores que permite comunicar a las personas entre sí, lo cual lo logra ofreciendo servicios a to dos
sus usuarios, mediante herramientas de Software como Microsoft Explorer o Netscape. Es la Red de Redes o (WEB).

ESTUDIANTE: CODIGO: CURSO:

PROFESOR: JUAN MANUEL OSP INA C. juanmaospina@gmail.com UNIDAD Nº:3.

1. APRENDA PLANTEANDOSE
PREGUNTAS
¿Sabías que las Páginas Web tienen por
objeto dar a conocer una empresa en una
red mundial.?
¿Cómo aprovec hamos los servicios de
Internet en nuestra vida y compartimos
recursos de red a través de un Proveedor Si usted convierte esta información del mundo real a Sitio
de Servicios?
Ejes Temáticos
Esta unidad se realiza en 20 horas prácticas y 20
horas en casa.
Sitios Web en FrontPage
Página Web
Hipervínculos
Página Principal (Index). Bordes compartidos.
Servicios de Internet.
Razones de importancia para crear estos procesos son:
Publicidad en el Ciberespacio El cubrimiento es global me-
diante una dirección asignada y su actualización es más sen-
cillo y en Internet interactuar con el mundo mediante un sitio
Web tienes un cubrimiento de varios puntos en varios países.
Ahorro de Dinero Su actualización será más sencilla porque
usted sólo tiene que agregar, cambiar o borrar en un solo
lugar y luego subirla de nuevo al servidor. En Internet el ma-
nejo de servicios de manera electrónica es muy rápido pues
las comunicaciones así lo permiten y es menos costoso pues
algunos de ellos son gratis.
1. Los Sitios Web están c onformados por varias pági-
nas Web que interactúan entre si mediante enlaces
de hipervínculo dentro y fuera de ellas. Por ejem-
plo, imaginemos que usted tiene una empresa o
tema y desea darla a conocer. Seguramente utili-
zaríamos algún medio publicitario existente para
lograrlo.
Web utilizando una herramienta como FrontPage, usted
haría:
Creación del sitio Web con su Página Principal.
Diseño de cada página con los aspectos a mostrar.
Diseño gráfico y animación para hacerlo atractivo.
Publicación en Internet mediante un Servidor de
páginas
2. Internet es una red mundial que enlaza miles de
redes LAN y WAN en todo el mundo y que permite
que cualquier usuario conectado con cualquier red
se pueda comunicar con otro equipo que este enla-
zado a Internet en cualquier sitio del mundo. En
resumen, es la Red De Redes.
Las empresas que le pueden prestar servicio de Internet
son básicamente de tres tipos: Las universidades o enti-
dades educativas al ser estudiante o persona vinculada
con la institución, una empresa privada al trabajar en ella
y finalmente una empresa proveedora local de servicio de
Internet (ISP) a la cual se le paga una tarifa mensual por
el servicio.

Página 1 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.

2. APRENDA PR OPONIENDOSE
RETOS
EL OBJE TIVO DE ESTA UDPROCO ES
DISE ÑAR, CREACION Y MANEJO DE
SITIO WEB EN FRONTPAGE DE MI-
CROSOFT OFFICE Y MANEJAR LOS
SERVICIOS DE INTE RNET.
INDICA DORES DE LOGRO
COGNITIVOS
Creo una aplicación que muestra un Sitio Web.
Crea páginas Web y las anexo al sitio Web.
Manejo los diferentes servicios de Internet.
PS ICOMOTORES
Elaboro un sitio Web e interactúo con los diferentes ser-
vicios de Internet.
VOLITIVOS
Muestro interés por los temas propuestos, investigando
y respondiendo de manera responsable con la unidad.
ACTITUDINALES
Interpreto y aplico los conocimientos en la solución de
ejercicios prácticos. Entregándolos de acuerdo a lo es-
tablecido.
3. APRENDA DANDO CAMPO
A LA INTERDISCIPLINARIEDAD
Un sitio Web es un grupo de páginas Web
relacionadas que se alberga en un servidor
HTTP en World Wide Web. La mayoría de
los sitios Web incluyen una página principal
como punto de partida. La página principal
está interconectada a ot ras páginas por
medio de hipervínculos y una estructura de
exploración.
Se puede crear un sitio Web que esté basado en disco o
en servidor. Un sitio Web basado en disco está alojado en
un equipo local. Un sitio Web basado en servidor se aloja
en un servidor Web, como Microsoft Internet Information
Server (IIS) o una red de servidor virtual.
Para que le sea más fácil crear un sitio Web rápidamente,
puede utilizar las plantillas y los asistentes de Microsoft
FrontPage. Cuando se utiliza alguna de estas herramien-
tas, FrontPage hace la mayor parte del trabajo estructural,
permitiéndole concent rars e en el contenido del sitio. Las
plantillas y los asistentes le ayudarán a crear desde una
página Web desnuda hasta un sitio Web complejo, interac-
tivo y de varias páginas.
Éstos son algunos de los pasos básicos para crear un sitio
Web en FrontPage:
Obtener una cuenta de alojamient o para el sitio Web o
una URL de un servicio de alojamiento; por ejemplo, de
un proveedor de servicios de Internet (ISP) o de un
proveedor de presencia en el Web (WPP).
Crear la estructura del sitio Web utilizando las plantillas
y los asistentes.
Agregar contenido personalizado.
Publicar el sitio Web en World Wide Web.
Con permisos de administrador, una c uenta de alojamiento
para el sitio Web y conectividad con un servidor que ejecu-
te Microsoft Windows ShareP oint Services, puede crear un
sitio de SharePoint y después personalizarlo con Microsoft
FrontPage.
Página 2 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
Pág. 2
4- APRENDA ALISTANDOSE
VALOR ACION DE SABERES PREVIOS
Consejos para crear páginas WEB
Consejo 1
Para comenzar a publicar en Internet
debe tener acceso a Internet mediante
un servicio comercial en línea o un
proveedor local. Averigüe cuanto le
cobran por almacenar la pagina en el
servidor. También verifique que su
proveedor tenga una conexión rápida para que los visitantes no
tengan que esperar demasiado para ver sus páginas.
Consejo 2
Escoja la herramienta adecuada para crear su página del WEB.
Tenga en cuenta que cada página tiene una base HTML
(Hypertext Markup Language) que son los vínculos que nos
llevan a otro sitio en el WEB.
Consejo 3
Diseñe sus páginas. Antes de hacerlo tiene que tener muy cla-
ro los contenidos que va a publicar. Clasifique los temas y ba-
sado en esto cree las paginas necesarias. No lo olvide, enlace
sus páginas con vínculos; los vínculos son herramientas bási-
cas para el funcionamiento de una publicación WEB.
Consejo 4
Cree la animación de su página mediante gráficas, diseños
inteligentes y partes móviles. Sea cuidadoso en no abusar del
uso de estos elementos porque puede recargar su página. Use
formatos gráficos JPEG y GIF.
Trabajar con FrontPage.
FrontPage ofrece numerosas características y mejoras que
ayudan a crear de forma más eficaz mejores documentos Web.
En esta sección se enuncian las tareas que puede llevar a ca-
bo en FrontPage, junto a descripciones básicas de las carac-
terísticas correspondientes. Siga leyendo para descubrir lo que
FrontPage ofrece.
Creación de un sitio Web
Un sitio Web consiste en una estructura interconectada de
páginas Web con los archivos asociados necesarios para
mostrar y administrar dichas páginas en el World Wide Web.
La estructura Web más sencilla de FrontPage consta de una
sola página y los archivos y carpetas auxiliares corres pon-
dientes. FrontPage incluye otras plantillas Web listas para
usar, cuyo grado de complejidad va desde una página a un
sitio entero de presencia corporativa.
El primer paso importante en la creación de un sitio Web es
planearlo: FrontPage simplifica el trabajo mediante la auto-
matización de muchas de las tareas requeridas para crear un
sitio Web. A continuación, éste se puede almacenar local-
mente o en un servidor Web remot o. Las características de
mantenimiento del Web ayudan a mantener el sitio actualiza-
do y sin errores. Existen dos formas principales de crear un
sitio Web:
Crear un nuevo sitio Web mediante las plantillas Web y las
características asociadas de FrontPage que le ayuden a cre-
ar diferentes tipos de sitio. Algunas plantillas ofrecen una
estructura lista para utilizar, mientras que otras utilizan asis-
tentes que le ayudan a elegir las características y la informa-
ción.
 Pág. 3
5. APRENDA DE LAS FUENTES Acerca de los hipervínculos
ABORDAJE TEORICO
FrontPage utiliza Un hipervínc ulo es un vínculo de un archivo o página Web a otro arc hivo o
hojas de estilos en página Web, incluy endo archivos de imagen o multimedia, o a un programa o
cascada, en lugar de una dirección de correo electrónico. Cuando un visitant e hace clic en el hiper-
HTML, para aplicar los vínculo, el destino se mostrará en un explorador Web, se abrirá o se ejecutará,
temas, por lo que los en función del tipo de destino.
archivos son más pe- Por ejemplo, un hipervínculo a una página muestra la página en el explorador
queños, más transpa- Web y un hipervínculo a un archivo A udio Video Interleave (AVI) abre el archivo
rentes y más fáciles en un reproductor multimedia.
de controlar y modifi-
car. Además, las pági- Trabajar con los hipervínculos
nas que tienen temas HTML aplicados en Para desplazarse a un archivo o a una página Web de una red, intranet o
versiones anteriores mantienen su configu- de Internet.
ración en FrontPage. Para desplazarse a un archivo o una página Web que pretende crear en el
futuro.
Microsoft Office FrontPage tiene un entorno
de creación mejorado, nuevas funciones Para designar una imagen como hipervínculo a un destino
gráficas y eficaces herramientas de codifi- Para enviar un mens aje de correo electrónico.
cación que le ayudarán a aplicar y aumen- Para iniciar una transferencia de archivos, como la descarga o el envío de
tar sus conocimientos de varios lenguajes un archivo por FTP
de codificación, y herramientas que le ayu- Para ir a un marcador
darán a crear secuencias de comandos
interactivas. Además, FrontPage genera Una vez creado un hipervínc ulo, utilíc elo para comprobar que lleva a la página,
código HTML eficaz y limpio, y le proporcio- archivo, dirección de correo electrónico, programa o marc ador de destino pre-
na un mayor cont rol del código. vistos. Cuando un visitante de un sitio sitúa el puntero en un texto o en una
imagen que contiene un hipervínculo, el punt ero repres enta una mano , que
Puede trabajar con sus páginas Web en indica que se puede hacer clic en el elemento. Microsoft FrontPage utiliza los
cualquiera de las vistas de página siguien- hipervínc ulos y los muestra de distintas formas en función del destino:
tes: Si el destino es una página Web FrontPage abrirá la página para modifi-
carla en la vista Página.
Vista Di seño Diseñe y edite las páginas
Si el destino es un marcador FrontPage abrirá la página y se desplaz ará
Web en la vista Dis eño, que proporciona
hasta el marcador.
una experiencia de creación que se aproxi-
ma a WYSIWYG mientras crea las páginas Si el destino es un archivo FrontPage abrirá el archivo en el editor as o-
Web con las herramientas de diseño. ciado. Por ejemplo, FrontPage abre un archivo de texto en el Bloc de not as.
Vista Código Vea, escriba y edite las eti- Si el destino no está en el sitio Web actual FrontPage abrirá una copia
quetas HTML por sí mismo. Con las carac- de la página o el archivo Web de destino. Funcionamiento de las direccio-
terísticas de c ódigo optimizadas de Front- nes URL
Page, puede crear código HTML limpio, y
es más fácil quitar el código que no desee. Cuando crea un hipervínculo, el destino se codifica como Localizador de recur-
Vista Dividir Revise y edite el contenido sos uniforme (URL).
de la página Web en un formato de pantalla Una dirección URL es una dirección que es pecifica un protocolo (como HTTP o
dividida que ofrece acceso a las vistas FTP ) y que contiene un servidor Web o una ubicación de red, una ruta de acce-
Código y Diseño simultáneamente. so y un nombre de archivo, como se muestra en la tabla siguiente:
Vista Vi sta previa Hágase una idea del Ejemplo Descripción
aspecto que tendrá la página en el explora- http:// Protocolo
dor Web sin tener que guardarla. Us e esta www.example.com Servidor Web
vista para comprobar los cambios que reali- office/productinfo/ Ruta de acceso
za mientras crea su página Web. default.htm Nombre de archivo
Crear un sitio Web
Puede crear un hipervínculo como texto o imagen.
Un hipervínculo de texto es una palabra o frase a la que se asigna una direc-
1. En el menú Archivo, haga clic en Nue- ción URL de destino.
vo.
Un hipervínculo de imagen es una imagen a la que se asigna una dirección
2. En el panel de tareas Nuevo, en Nuevo URL de destino de una de las dos formas siguient es:
si tio Web, haga clic en el tipo de sitio Puede establecer que toda la imagen sea un hipervínc ulo predeterminado. En
Web que desea crear. este caso, el visitante puede hacer clic en cualquier part e de la imagen para
3. Haga clic en la plantilla de sitio Web mostrar el destino. P or ejemplo, un botón es un ejemplo de imagen con un hi-
que desee. pervínculo predeterminado.
4. Busque la ubicación donde desea publi- Puede asignar la imagen a una o más zonas activas, que son regiones de hi-
car el sitio, haga clic en ella y, a conti- pervínculo en la imagen. Una imagen que contiene zonas activas se denomina
nuación, en Abrir. mapa de imagen. P or ejemplo, un mapa de imagen puede ser una imagen que
Notas representa distintas partes de un sitio Web (como la página principal, una pági-
Puede publicar el sitio en un directorio o en na de catálogo, etc.). El visitante hace clic en una zona determinada del mapa
una carpet a local del disco duro o de la red, de imagen para mostrar la página correspondiente. Formas de mostrar los hi-
o bien puede publicarlo en Int ernet, donde pervínculos
se encuentre su cuenta. Los exploradores Web por lo general subray an los hipervínc ulos de texto y los
muestran con un color diferent e.

Página 3 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.

Al realizar esta unidad serás
competente para:
Crear Sitios Web, FrontPage.
Crear Páginas Web
Navegar mediante Hipervínculos.
Manejar los Servicio de Internet
RECURSOS
Sala de Informática, para la realiza-
ción de las prácticas.
Acceso a Internet en el horario de
6:15 a 6:45 a.m. para buscar infor-
mación y despejar dudas sobre los
temas propuestos.
BIBLIOGRAFIA
Microsoft Encarta 2006
Internet, Google “Sitios Web y
Páginas Web”
Guías Teóric o-P racticas 10°,
Juan Manuel Os pina, 2006
Ayudante de Microsoft Office
FrontPage 2003.
MIS NOTAS
_________________________________________
_________________________________________ Nota Si marca una ubicación (en lugar de texto), el marcador se indica en Front-
_________________________________________
_________________________________________ Ir a un marc ador en una página Web
_________________________________________
_________________________________________
_________________________________________
_________________________________________
_________________________________________
_________________________________________
_________________________________________ Cuando se diseña un sitio Web, una de las consideraciones más importantes es
_________________________________________ sitio encontrar el cont enido que des ean de manera rápida y sencilla. De este
_________________________________________
_________________________________________ Microsoft FrontPage incluye los métodos siguientes para ayudarle a agregar una
_________________________________________
_________________________________________
_________________________________________
_________________________________________
_________________________________________
_________________________________________
_________________________________________
_________________________________________
_________________________________________
Página 4 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
Pág. 4
Formas de mostrar los hipervínculos
Los exploradores Web por lo general subrayan los hipervínculos de texto y los
muestran con un color diferente. Por ejemplo, así es como debe verse un hiper-
vínculo.
Los hipervínculos de una imagen no siempre estarán visibles. Sin embargo, un
visitante del sitio puede ver si una imagen tiene un hipervínculo colocando el
puntero del mouse (ratón) sobre la misma. Cambiará la apariencia del puntero
del mous e, normalmente a una mano que señala.
Utilizar marc adores
Un marcador es una ubicación o texto seleccionado de una página que se ha
marcado.
Puede utilizar marc adores como destino de un hipervínculo. Por ejemplo, para
mostrar una determinada sección de una página al visitante, agregue un hiper-
vínculo con el marcador como destino. Cuando un visitante haga clic en el hiper-
vínculo, se mostrará la parte correspondiente de la página, en lugar de la parte
superior de la página.
También puede utilizar uno o más marcadores para buscar ubicaciones en una
página. Por ejemplo, agregue un marcador a cada uno de los encabezados prin-
cipales de una página. Cuando modifique la página, encontrará cada sección
con rapidez si va al marcador correspondient e.
Si marca una ubicación (en lugar de texto), el marcador se indica en FrontPage
mediante . Si marca texto, se mostrará con un subrayado discontinuo.
Crear un marcador en una página Web
1. En la vista Página, en la parte inferior de la ventana del documento, haga clic
en Di seño.
2. Seleccione el texto al que desea asignar un marcador (marc ador: ubicación o
selección de texto de un archivo al que se da un nombre para usarlo como
referencia. Los marcadores identifican una ubicación de un archivo al que se
se puede hac er referencia o crear un vínculo más adelant e.).
3. En el menú Insertar, haga clic en Marcador.
4. En Nombre de marcador, escriba o seleccione el nombre del marcador (se
pueden usar espacios).
Page mediante. Si marca texto, se mostrará con un subrayado discontinuo.
1. En la vista Página, en la parte inferior de la ventana del doc umento, haga
clic en Diseño.
2. En el menú Insertar, haga clic en Marcador.
3. En el cuadro Otros marcadore s de esta página , haga clic en el marcador
que desea encont rar.
4. Haga clic en Ir a.
Crear una estructura de exploración
proporcionar una estructura de exploración local que permita a los visitant es del
modo, se asegurará de que los visitantes sepan siempre dónde se encuentran y
que les ofrece el contexto correcto para el contenido que estén leyendo.
estructura de exploración a su sitio Web:
Barras de vínculos
Una barra de vínculos es un conjunto de hipervínc ulos que permite a los visitan-
tes desplazarse por las páginas de un sitio Web. Las barras de vínculos se colo-
can en un lugar prominente y coherente en cada página y actúan como un mapa
para las páginas designadas. Se pueden crear barras de vínculos con hiper-
vínculos gráficos o de texto.
Cuando se crea un sitio Web, se pueden crear barras de vínculos y especificar
los hipervínculos que van a contener o se puede agregar una barra de vínculos
basada en la estructura de exploración del sitio. FrontPage mantiene las barras
de vínculos que crea. Si mueve o agrega una página, FrontPage actualiza la
barra de vínculos para reflejar los cambios.
 Pág. 5
Se puede aplicar format o a las barras de vínculos
de las maneras siguientes: 6. APRENDA HACIENDO
Puede colocar las barras de vínc ulos horizon- PROCESO DE INVEST IGACION PER SONAL
tal o verticalmente en la página.
También puede agregar más de una barra de Entre a FrontPage y elija la opción Nuevo/
vínculos a cada página, por ejemplo, para
explorar distintos niveles de la página.
Puede cambiar el estilo de una barra de
vínculos que use botones en lugar de texto.
Los tipos de barras de vínculos que puede agre-
gar a su sitio Web incluyen:
Barras de vínculos basadas en una estructura de
exploración
Una vez diseñado el sitio Web y después de
haber determinado el flujo jerárquico y lógico del
contenido, puede agregar una barra de vínculos
basándose en esa estructura de exploración. La
estructura determina los hipervínculos que asig-
nará a la barra de vínculos, y las etiquetas de
nodos det erminan las etiquetas de esos hiper-
vínculos.
En el ejemplo siguiente s e muestra la estructura
de un sitio Web en la vista Exploración y se ex-
plican las relaciones entre las páginas del sitio:

Página principal La primera página que se

agrega a la estructura de exploración normal- Elija de la ventana del lado derec ho Sitio
mente se denomina Default.htm o Index.htm, y se Web de una página…
indica mediant e el icono de página principal . En
el ejemplo anterior, Inicio es la página principal.
Páginas de nivel global Están al mismo nivel
que la página principal, pero no la incluyen. En el
ejemplo anterior, la página de nivel global es
Contactos.
Páginas de nivel primario Estas páginas están
situadas justo encima de una o varias páginas,
incluidas las que están directament e conectadas
con la página de nivel primario del mismo nivel (a
excepción de la página principal). En el ejemplo
anterior, la página de nivel primario de Lo nuevo
es Inicio.
Páginas de nivel secundario Una o varias pági-
nas que están situadas directamente por debajo
de una página de nivel primario. En el ejemplo
anterior, Inicio tiene tres páginas de nivel secun- Escriba el nombre de la ubicación del sitio:
dario (Lo nuevo, Productos y Servicios), Con- C:\Documents and Set -
tactos tiene una página de nivel secundario ting\Décimo\ Documentos\Mis Webs\1001 9-
(Empleo) y Productos tiene dos páginas de ni- 20 y luego Aceptar. Bueno, su curso y códigos claro.
vel secundario (Buscar y Pedidos).
Páginas del mismo nivel Páginas que se en-
cuentran al mismo nivel en la estructura jerárqui-
ca y comparten la misma página de nivel prima-
rio. En el ejemplo anterior, Lo nuevo, Productos
y Servi cios son páginas del mismo nivel; Buscar
y Pedidos también son páginas del mismo nivel.
Páginas anterior y siguiente En el ejemplo ante-
rior, si agrega una barra de vínculos que incluya
vínculos ant erior y siguiente a la página Produc-
tos, el vínculo siguiente dirige al visitante del sitio
a Servicios y el vínc ulo ant erior a Lo nuevo.

Cuando se agrega una barra de vínculos que

incluye los vínculos anterior y siguiente, FrontPa-
ge se basa en la estructura de exploración del
sitio Web para configurar esos vínculos automáti-
camente. Se pueden agregar hipervínculos a la
página principal y a la página de nivel primario de
la página activa a través del cuadro de diálogo de
propiedades de la barra de vínculos.

Página 5 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
 Pág. 6
Aparece el nombre del sitio con el
nombre del curso y los códigos.
Aparece una página denominada
Index y que más adelante admi-
nistrará todas las páginas que
dependan del sitio.
En la parte inferior izquierda apa-
rece la pestaña denominada Car-
petas seleccionada.
Seleccione el botón de agregar
una página para realizar algunas
prácticas.
A hora guarde el arc hivo y
nómbrelo como Prueba.
Seleccione la página Prueba y
observe que aparecen nuevos
botones en la parte inferior de la
página. Nos enc ontraremos siem-
pre en Diseño trabajando la pági-
na Web.
Seleccione la pestaña Sitio Web y
volveremos a observar la ventana
inicial. De nuevo vuelva a la pági-
na Prueba, haciendo clic en ella.
De las etiquetas o pestañas infe-
riores seleccione la denominada
Código y observe las instruccio-
nes en lenguaje HTML que va
generando FrontPage. A medida
que vayamos programando nues-
tra página esta se irá llenando de
código que debemos ir interpre-
tando. Siempre se inicia con
<html> y se finaliza con </html>
como última instrucción. Luego
siguen las instrucciones de Cabe-
cera <head> que abren y también
existirá </head> que cierra. El
slash / indica instrucción de cierre.
Las instrucciones que más nos
llevan la atención ocurrirán entre
el Cuerpo <body> que abre y </
body> que cierra. Estas dos ins-
trucciones se van separando cada
que programemos algo en la pági-
na.
Volvamos a la opción de Diseño
para ejercitar algo. Seleccione en
el menú Formato/ Tema. Colocare-
mos un fondo agradable. Elija Be-
bida de Limón en el listado.
Sobre este fondo insertaremos
una tabla para organizar la infor-
mación en columnas que es lo
más adecuado y de uso general.
Elija del menú Tabla/ Insertar/ Coloque el cursor dentro del primer renglón de la tabla y
Tabla y acepte la propuesta de 2 seleccione del menú Ins ertar/Componente Web/
filas por 2 columnas. Saldrán de Marquesina y luego seleccione Finalizar.
color naranja debido al tema ele-
gido anteriormente.
Borraremos del primer renglón la Importante!!!. Si tiene que
irse y cerrar, debe primero
línea que divide esa fila c on el
guardar y dirigirse siempre al
ánimo de colocar un mensaje que
menú Archivo/Cerrar sitio..
se moverá a lo largo de la tabla,
De no hacerlo así el sitio que-
denominado marquesina. Selec-
da abierto para cualquier per-
cione del menú Tabla/ Dibujar ta-
sona y le pueden hacer altera-
bla y de la plantilla que aparece
ciones o perders e parte de su
seleccione el botón del borrador.
trabajo. Importante!
Con clic sostenido borre la línea.

Página 6 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
 Pág. 7
Escriba el mensaje Donde reina el
Amor, van sobrando las leyes.
Luego seleccione el botón Estilo y
de la ventana siguiente seleccione
el botón Formato y en seguida la
opción Fuente. De fuente selec-
cione Tamaño 18 puntos y de
Fuent e elija alguna letra. Luego
Acepte, para salir.
Para ver como la marquesina se
desliza sobre la pantalla debemos
hacer que nuestra página nave-
gue, para lo c ual seleccionamos
el botón Vista previa de la parte
inferior de la pantalla; en forma de
lupa.
Volvamos a la etiqueta de Diseño
para insertar una imagen o un
denominado gif animado para dar-
le más creatividad. Ubique el cur-
sor en la primera fila y columna 2
de la t abla. I ns ert ar/I magen/
Desde archivo…

Busque la carpeta Doc ument os

compartidos/Imágenes comparti-
das/ ColegioWeb/Ratón. Luego
Vista previa.
Guarde y observe que pide confir-
mar guardar la imagen de
ratón. gif, por favor Aceptar y ob-
serve al lado izquierdo de la pan-
talla en la lista de carpetas el re-
gistro de la imagen guardada. De-
jaremos esta página por el mo-
mento, pero antes seleccione la
etiqueta de Código para observar
como ForntPage elabora el código
HTML entre los parámet ro del
cuerpo <body> que abre y </
body> que cierra. Instrucciones
de Tema, Tabla, Marquesina y la
imagen que se insert ó. Seleccione
de nuevo la etiqueta de Diseño,
pues siempre estaremos en ella
trabajando.
Ahora crearemos una página una Ahora guarde la página
página elaborada en buena parte
con el nombre Tabaquismo
para ahorrar un poco de tiempo y o Alcoholismo o Autoesti-
sobre ella aprender opciones avan- ma o Prostitución o etc.,
zada de programación.
pues es el t ema de tipo
Seleccione del menú Archivo/ problema en los adolescen-
Nuevo/Más plantillas de página… tes que vamos a desarro-
en la ventana izquierda de la pan- llar. Esta será una página
talla. De la ventana elija Pregun- de preguntas y respuestas.
tas más frecuentes. Observe una Observe las preguntas a
pequeña muestra al lado derecho. desarrollar en la siguiente
Luego Aceptar. pantalla.

Página 7 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
 Pág. 8
Colóc ale un tema adec uado co-
mo fondo en el diseño y completa
los renglones de la Tabla de con-
tenido de acuerdo a su tema pro-
blema elegido con su compañera.

Más adelante aprenderemos como

se programan los botones de nave-
gación a las demás página como se
aprecia en la figura.
Guarde el archivo periódicamente
para evitar pérdida de trabajo.
Investigue la información perti-
nente para resolver las siete pre-
guntas propuestas en la Tabla de
contenido. Puede traerlas digita-
das en Word o enviadas a tu co-
rreo para evitar tener que digitar
todo y prestarle más tiempo al
diseño de sitio Web.
Para elaborar el renglón 7. Colo-
que el cursor al final del renglón 6
y oprima <Ent er>. Escriba el
mensaje ¿Cómo puedo ayudar si
es un amigo?; este aparece de
color negro; no se preocupe pues
luego cuando programemos el
hipervínc ulo para enviar el control
a esa opción, cambiará de color y
además quedará s ubrayado co-
mo los demás.
Para programar el hipervínculo,
resalte colocando el puntero al
inicio del renglón y cuando el
puntero tome forma de flecha;
haga clic. (Se iluminará el
renglón).
E n el men ú de I ns e rt a r/
Hipervínculo, haga clic.
En la ventana que aparece escri-
ba en la línea de dirección
#ayuda. Los hipervínculos se
nombran en el lenguaje html con
# y a continuación el nombre que
deseemos, en este caso lo llama-
mos ayuda por su relación con el
numeral 7. Si el control se debi-
era hac er a una página o direc-
ción deberá llevar http://….
Observe que ya quedó programa-
do el hipervínculo, con el mismo
color y subrayado que los demás.
Haga clic en algún lugar para
desactivar el resaltado y ahora
debemos programar el sitio a
donde llegará el control; donde
responderemos la pregunta. Se
denomina el marcador de destino
que seguramente será al final de
las demás opciones.
Ahora ubíquese al final de la
página. Oprima <Enter> debajo
de la línea para abrir espacio. Programaremos el marcador, ayuda y un hipervínculo denominado #arriba;
Escriba los mensajes de los ren- pues veremos que ya está programado de las 6 opciones anteriores y que está
glones como se observa dejando ubicado el título Tabla de contenido.
un renglón en medio para respon- Resalte el renglón ¿ Cómo puedo ayudar si es un amigo?; y elija en Insertar/
der luego el tema. Observe que Marcador la opción. Escriba en el nombre de marcador la palabra ayuda; pues
aparecen de color negro. fue el nombre asignado en el hipervínculo. Resalte el mensaje Volver al princi-
pio y en Insertar/Hipervínculo escriba #arriba.

Página 8 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
 Pág. 9
Para que tomen el mismo tamaño
de fuent e y color como los men-
saje de las otras opciones, se
puede copiar el formato o progra-
mar en la ventana Estilo, encabe-
zado 3 y encabezado 5 respecti-
v a me n t e r es al t an d o c a da
renglón. (Header: h3 y h5 en

html).
Ahora en Vista previa pruebe que
se está navegando a este sitio.
Fácil verdad?. También se puede
programar hipervínculos y marca-
dores a imágenes.
Haga clic en la etiqueta Código y
observe cuant o código en html se
ha generado des de que la página
colocó las 6 opciones ya progra-
madas; más los reglones que
us t ed ha pr og ra mad o. < a
href="#ayuda"> cuando es hiper-
vínculo y <a name="ayuda">;
cuando se trata de un marcador.
También se pueden generar es-
cribiendo manualment e est as
instrucciones o copiando y pe-
gando con las modificaciones
pertinentes en el nombre del hi-
pervínculo o marcador. Vuelva a
la etiquet a Diseño.
Vaya llenando los distintos temas de
acuerdo a su investigación; pues
todos hay que entregarlos; rec uerde
que puede digitarlo en Word en su En la parte superior iz-
casa y traerlos o enviarlos por co- quierda observamos que
rreo. Use Internet en el colegio para se selecciona automática-
documentars e también. Agregue a mente la etiqueta Sitio
su carpeta lo investigado como evi- Web y en las etiquetas de
dencia de su trabajo. la parte inferior de la pan-
Ahora crearemos en sitio Web talla se selecciona la eti-
colgando a la página principal queta Exploración. Cada
Index; las demás página como se vez que se desee agregar
aprecia en la figura. Elija del una página al sitio se pro-
menú Ver/Exploración. Tome con cede de igual manera.
clic sostenido de la ventana iz- Importante!!!. Si tiene
quierda (Lista de carpetas), la que irse y cerrar, debe
página Prueba; pásela por enci- primero guardar y dirigirse
ma de Index del lado derecho, siempre al menú Archivo/
bájela y cuando aparezca una Cerrar sitio.. De no
línea que las una; suelte. Haga lo hacerlo as í el sitio queda
mismo con la página de su tema abierto para cualquier per-
ej. Tabaquismo. Cambie los nom- sona y le pueden hacer
alteraciones o perderse part e de su trabajo. Importante!

Página 9 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
 Pág. 10
Seleccione la página Index del
lado izquierdo con doble clic; ob- Habilitar y deshabilitar la
serve que no se le ha programa- compatibilidad con los
do nada de contenido. Programe bordes compartidos
algún Tema. Ahora del menú For-
mato/Bordes compartidos… para En el menú Herramien-
hacer que se programen automá- tas, haga clic en Opcio-
ticamente botones que permiten nes de página y, a conti-
hacer hipervínculo a todas la pa- nuación, haga clic en la
ginas que se encuent ren colga- ficha Creación.
das al sitio Web. Marque las op-
ciones que se muestran en la Para habilitar o deshabili-
figura y oprima Acept ar. Observe tar la compatibilidad con
estar en la etiqueta de Diseño y los bordes comparti-
en alguna página de trabajo. Si dos (bordes compartidos:
se observa que la opción Bordes zonas de la página reser-
compartidos aparece deshabilita- vadas para contenido
da se debe proceder como se que desea que aparezca
indica al lado derecho de la uni- coherente en todas las
dad. Guarde siempre antes. páginas Web. Los bor-
Puede probar en Vista previa y se des compartidos suelen
está navegando a cada página contener barras de
que aparece en los botones. vínculos que contienen
Vuelva a la etiqueta de Diseño. hipervínc ulos a otras
Haciendo doble clic sobre alguno páginas y ubicaciones.),
de los botones se puede estable- active o desactive la ca-
cer la jerarquía o niveles de las silla de verificación Bor-
páginas. Por ejemplo en la pági- des compartidos.
na Index haga doble clic sobre el
botón Principal y programe el ni-
vel como se ve en la figura si-
guiente.

Revise las demás páginas para

que aparezcan como se aprecia
en las siguientes figuras del lado
derecho.
Recuerde tener la carpeta con los
temas investigados para se reco-
gida y sellada como evidencia del
seguimiento de las competencias
alcanzadas dentro del proceso de
formación integral de calidad.
Veamos que sucede si seleccio-
namos arriba en el botón o eti-
queta Sitio Web y luego en abajo
en la etiqueta hipervínculos los
sitios a los cuales se está hacien-
do enlaces desde alguna página
y a cuales.
Regrese a la etiqueta de Diseño y
no olvide estar guardando.
El trabajo que sigue es hacer re-
troaliment ación y socialización
para repasar y despejar posibles
dudas en el trabajo elaborado.
También aliste el mapa concep-
tual sobre Internet pues deberá
se estudiado en detalle.

Página 10 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
 Pág. 11
7. APRENDA DE LA RETROALIMENTACION
TUTORIA Y SOCIALIZACION
Realice el siguient e ejercicio correspondiente a la c reación de una nueva página de las
programadas en la opción /Arcivo/Nuevo/Mas plantillas de páginas...Galería de fot ograf-
ías...Guárdela con el nombre Galería. Llénela a su gusto.

A la pregunt a guardar imágenes que ya vienen insertadas responda

Aceptar. Luego serán reemplaz adas por las suyas.
Agregue la página al Sitio Web y programe sus bordes compartidos
para que aparezcan los botones de navegación en todas las paginas,
como se aprecia en la figura.
Programe un tema al gusto.
Las imágenes que aparecen en la ventana de Lista de carpet as…
se pueden arrastrar y meter dentro de la carpeta de Imágenes para
que no se vea desordenada con tantos nombres de archivos. Sólo
deben aparecer los nombres de las páginas.

La navegación c omplet a se hace desde Vista Previa en Microsoft

Internet Explorer de la barra de bot ones Estándar. Cuando desee
salir y volver a FrontPage, cierre el Explorador. Si algo no aparec e
por lo general sucede por no haber guardado antes, para así ser
reconocido por estar actualizada la página.

La página principal (Index) debe quedar parecida a

la figura que se muestra al lado izquierdo. Programe
una marquesina, una imagen o gif animado y un
mensaje que las identifique. Gracias.

Página 11 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.
 Pág. 12
8. APRENDA PROYECTANDOSE

Retomando el mapa conceptual realizado en primer periodo, agregue una pagina para explicar to-
dos los servicios de Internet. De manera especial Correo Electrónico, WWW y Motores de Búsqueda.
Hacer enlaces o hipervínculos a estas páginas. Ej. http://www.hotmail.com en la línea de dirección de la
ventana de Insert ar/Hipervínculo.
Otra forma de acceder a esta Nota, sería realizando un trabajo en Word con las siguientes especifi-
caciones: ICONTE C
Portada, Introducción, Tabla de Contenido (Automática).
Capítulo I. HITORIA DE INTERNE T –REDES - (1.1. HIS TORIA - 1. 2. REDES (1.2.1. Lan - 1. 2.2.
Wan).
Capítulo II. REQUERIMIENTOS DE CONE XIÓN (2. 1. HARDWARE - 2.2. SOFTWARE )

CRONOGRAMA
1 -APRENDA PLANTE ANDOSE PREGUNTAS
Prime ra Se mana
______________________________
2-APRENDA PROPONIENDOSE RETOS
Prime ra Se mana
Este trabajo s e debe realizar con las márgenes adecuadas de: Marg sup. 3cm o
4cm si es comienzo de sección (Título centrado). Marg. Izq. 3cm, Marg. Inf. 3cm y
Marg. Der. 2cm. Tamaño de hoja Carta (21 x 27). Letra A rial 12 y a 1, 5 espacio
interlineal. La paginación se hace en la parte inferior y centrado desde la Tabla de
Cont enido. (Pág. 1). Favor enviar trabajo a juanmaospina@gmail.com dentro de la
fecha acordada con el profesor. Gracias.

______________________________ 9. APRENDA EVALUANDOSE

3-APRENDA DE LA INTERDISCIPLINARIEDAD
Prime ra Se mana

______________________________
Entrega a tiempos según fec ha indicada de cada
4-APRENDA DE LAS FUENTES tarea propuesta en la unidad.
Segunda Se mana Los ejercicios elaborados en la sala de Informática.
______________________________
5-APRENDA ALISTANDOSE
E valuación práctica que permitan sustentar el apren-
Segunda Se mana dizaje y el desarrollo de competencias.
Auto evaluación y Heteroevaluación.
______________________________
APRENDA H ACIENDO
Se manas 3-4-5– y 6

______________________________ Aprobación
APRENDA PROYE CTAND OSE Aprobación Coordinación Académica
Sexta Se mana Planeación y Metodología
______________________________
APRENDA DE L A RETROALIMENTACI ON
Sépti ma Se mana

______________________________
APRENDA EV ALU ANDOSE
Octava Se mana

______________________________

Página 12 de 12. La Unidad de Producción de Conocimiento: Una Mediación Pedagógica en una Educación Personalizante y Liberadora.