cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA Tá
Anuncio
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
-1-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
CONTENIDO: PÁGINAS PRINCIPALES SIN MISTERIO.
OBJETIVOS DE APRNEDIZAJE:
1. Que el estudiante defina que es Internet y la World Wide Web.
2. Que los alumnos/as escriban la estructura de una página Web y las características de la World Wide
Web.
¿Qué es Internet?
A continuación se le presentan 3 definiciones de lo que es Internet:
Internet es un conjunto de redes: redes de ordenadores y equipos físicamente unidos mediante cables
que conectan puntos de todo el mundo.
Internet es el mayor conjunto que existe de información, personas, ordenadores y software funcionando
de forma cooperativa, publicando y organizando información, e interactuando a nivel global.
Internet, es una interconexión de redes informáticas que permite a los ordenadores o computadoras
conectadas comunicarse directamente, es decir, cada ordenador de la red puede conectarse a cualquier
otro ordenador de la red.
¿Qué es el World Wide Web?
World Wide Web es: el mecanismo proveedor de información electrónica para usuarios conectados a
Internet. El acceso a cada sitio Web se canaliza a través del URL o identificador único de cada página de
contenidos.
Este sistema permite a los usuarios el acceso a una gran cantidad de información: leer publicaciones
periódicas, buscar referencias en bibliotecas, realizar paseos virtuales, compras electrónicas o
audiciones de conciertos, buscar trabajo y otras muchas funciones. Gracias a la forma en que está
organizada la World Wide Web (WWW), los usuarios pueden saltar de un recurso a otro con facilidad.
Las conexiones entre los servidores que contienen la información se hacen de forma automática y
transparente para el usuario, pues el medio admite las funciones de hipertexto e hipermedia.
Berners-Lee (quien se considerara como el arquitecto de la Web) Describía la WWW de la siguiente manera: La
World Wide Web es una forma de ver toda la información disponible en Internet como un continuo, sin
rupturas. Utilizando saltos hipertextuales y búsquedas, el usuario navega a través de un mundo de
información parcialmente creado a mano, parcialmente generado por computadoras de las bases de
datos existentes y de los sistemas de información.
Estructura básica de una página Web
Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de
información necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y se
pueda modificar más fácilmente. Si una página Web es complicada en su diseño, habrá muy pocos que
sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lógica de una página Web.
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
</HEAD>
<BODY>
Aquí van todas las etiquetas o instrucciones del documento
</BODY>
</HTML>
-2-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué
tan corta o tan larga sea la página y el contenido.
La primera instrucción <HTML> indica al explorador de Internet que ahí comienza una página Web. La
siguiente instrucción <HEAD> indica el encabezado de la página, es decir el área de la barra de título.
<TITLE> indica el título de la página propiamente dicho. <BODY> es una instrucción que indica al
explorador de Internet que ahí empieza el área de contenido de la página (es decir el cuerpo de la
página).
En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al
programa que las propiedades aplicadas con esa instrucción se terminan ahí donde se pone el signo
diagonal. Si el signo de cierre (/) no se aplica convenientemente, el programa seguirá aplicando las
propiedades de la instrucción anterior a todas las líneas inferiores, hasta que se encuentre otra
instrucción que modifique las propiedades actuales.
La estructura es importante
Una página Web es un documento electrónico escrito en un lenguaje de computación llamado HTML,
siglas de Hypertext Markup Language (Lenguaje de Marcación de Hipertexto, en inglés).
La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura
permitirá al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto
de páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no
encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio.
Características de la Web
Según su propio creador, Berners-Lee, la Web es un sistema que presenta las siguientes características:
1) Hipermedial: en la Web podemos manejar información multimedial y navegar a través de ella.
2) Distribuido: a diferencia de las antiguas y enormes bases de datos que concentraban la información
físicamente en un único lugar, la Web es un sistema compuesto por miles de servidores localizados en
cientos de ciudades del mundo que están interconectadas entre sí.
3) Heterogéneo: por ser un servicio relativamente nuevo, la Web tiene la ventaja de poder reunir
servicios y protocolos más antiguos.
4) Colaborativo: ésta es una característica sustancial y la que posiblemente le haya dado el mayor
empuje a su crecimiento, ya que cualquier persona, en cualquier parte del mundo, puede agregar
información a la Web para que luego pueda ser consultada por el resto de los usuarios.
CONTENIDO: PLAN DE TRABAJO WEB.
OBJETIVOS DE APRNEDIZAJE:
1. Que el alumno/a sea capaz de escribir algunas de las ideas principales para diseñar una página
principal.
2. Que el estudiante sea capaz de definir conceptos tales como: que es navegador, servidor, http, Html
etc.
Pagina Principal es:
Es la primera página del sitio que el usuario puede observar, es aquella que se cargará en primera
instancia, y que generalmente tiene un mensaje de bienvenida, y un menú con diferentes opciones, con
sus respectivos links.
A menudo se encontrará con el término página de inicio o página principal mientras explora la World
Wide Web. Piense en una página principal como en el punto de partida de un sitio Web. Igual que la
tabla de contenidos de un libro o revista, la página principal ofrece generalmente una visión de conjunto
de lo que se puede encontrar en un sitio Web. Un sitio puede tener una página, muchas páginas o unas
pocas muy extensas. Si no contiene mucha información, puede que la página principal sea la única.
-3-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Entre algunas ideas principales que debemos tomar en cuenta para crear nuestra página principal
tenemos las siguientes:
9
Lo primero que debemos hacer es fijarnos objetivos claros de lo que queremos alcanzar según la
información que vayamos a presentar.
9
Una vez que tengamos los objetivos, hay que organizar el contenido por temas o secciones, que se
ajusten a nuestros objetivos.
9
La Página Principal debe ofrecer un panorama general del contenido de la presentación.
9
Decidir que contenido va a ir en cada una de las páginas adicionales a la página principal y elaborar
los vínculos para navegar entre ellas.
9
En la parte superior de la página es común incluir un encabezado principal o un titular gráfico, y
más abajo una lista de contenidos, por ejemplo imágenes, a menudo acompañados de una breve
descripción. Los elementos de la lista normalmente están vinculados con otras páginas dentro del
sitio Web. Etc.
DEFINICIONES:
Navegador: Es el programa que nos ofrece acceso a Internet. Permite al usuario recuperar y visualizar
documentos de hipertexto, comúnmente descritos en HTML, desde servidores web de todo el mundo a
través de Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas
las herramientas que manejan la información de Web. Los navegadores más populares son Netscape e
Internet Explorer. Los navegadores actuales permiten mostrar y/o ejecutar: gráficos, secuencias de
vídeo, sonido, animaciones y programas diversos además del texto y los hipervínculos o enlaces.
Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un
protocolo HTTP para atender las solicitudes de archivos por parte de un navegador.
En otras palabras Servidor es cualquier equipo que se ha configurado de manera que otras personas
puedan tener acceso a la información almacenada en el desde sus propios equipos.
HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World
Wide Web utilizan para mandar documentos HTML a través de Internet.
HTML: Es un lenguaje usado para escribir documentos para servidores World Wide Web. Sus siglas en
Inglés significan (HyperText Markup Lenguaje), (Lenguaje de Mercado para Hipertexto) es el lenguaje en el cual
están escritos los documentos hipertextuales para la Web.
CONTENIDO: CREACION DE PÁGINAS WEB CON FRONTPAGE.
OBJETIVOS DE APRNEDIZAJE:
1. Que el alumno/a sea capaz de identificar los elementos de la ventan de Microsoft Frontpage.
2. Que los estudiantes desarrollen la habilidad para trabajar correctamente e en Microsoft Frontpage.
3. Que los alumno/as sean capaces de definir algunos conceptos utilizados en el programa de Microsoft
Frontpage.
4. Que los estudiantes sean capaces de crear Páginas Web poniendo en práctica los conocimientos
adquiridos y toda su creatividad para realizar un trabajo atractivo.
-4-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Microsoft Frontpage es una herramienta que se utiliza para el desarrollo de páginas o sitios Web, al ser
este parte del paquete de Microsoft Office 2003 posee elementos comunes que facilitan a los usuarios su
utilización.
Microsoft FrontPage es un programa con el cual podemos crear páginas Web de una forma visual.
Gracias a esto el usuario Sólo tiene que concentrarse en el diseño de su Web sin necesidad de saber
programar. No obstante, un usuario avanzado puede usar las características avanzadas de
FrontPage2003 para hacer sitios Web más complejos.
FrontPage nos permite diseñar y modificar tanto el sitio como cada página individualmente, y nos
ayuda en su edición y mantenimiento.
Una página Web es un documento que puede ser visualizado con un navegador de Internet. Un sitio
Web es un conjunto de páginas Web relacionadas entre sí.
ELEMENTOS DE LA VENTANA DE FRONTPAGE
Al entrar al programa observará la siguiente pantalla.
BARRA DE TITULO
BARRA DE
HERRAMIENTAS
BARRA DE MENUS
SELECTOR DE
PAGINAS
SELECTOR DE
ETIQUETAS
SELECTOR
DE VISTAS
PANEL DE TAREAS DE
INICIO
AREA DE TRABAJO
El área de trabajo: Es el lugar en que se agrega, elimina y modifica información e imágenes dentro de
una página.
-5-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Al Iniciar FrontPage podemos observar que el área de trabajo contiene una página Web en blanco y tres
elementos (dos en la parte superior y uno en la inferior) que nos facilitan la navegación, estos son:
1. El selector de páginas: Este elemento nos ayuda a navegar entre las distintas páginas que tenemos
abiertas en un momento dado, si tenemos abierto un sitio Web este se muestra como el primer elemento
seleccionable, además nos indica que páginas no han sido guardadas marcándolas con un asterisco (*)
al final del nombre.
Página Web Activa
Página Web sin
guardar
Pestaña del Sitio Web
(Siempre al inicio)
2. El selector de etiquetas: Este elemento se utiliza para tener un mejor control de lo que se sombrea
en la página. Podemos tomar como ejemplo el gráfico siguiente; si seleccionamos <body> se sombrea
toda la página, si seleccionamos <div> se sombrea solo un área de la página, si seleccionamos <table> se
sombreará la tabla que se encuentra dentro del div y así sucesivamente.
Fila de la Tabla
Separador
Cuerpo de la
página
Tabla
Texto de columna
Columna de la fila
3. El Selector de Vistas: Este elemento se utiliza para escoger la forma en que se visualizará la página
web en que se está trabajando.
a) Diseño: Esta es la vista por defecto muestra la página en un estilo similar al Word en donde se
muestran los elementos de una forma gráfica según se agregan.
b) Dividir: Esta vista muestra un área de diseño en la parte inferior y una de código en la parte
superior.
-6-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
c) Código: En esta vista se muestra el código HTML del que se compone la página Web.
d) Vista previa: Esta vista es similar a la de diseño, en ella se muestra como quedará la página Web.
Cuando está abierto un sitio Web el selector de vistas posee opciones diferentes.
a) Carpetas: Muestra el sitio Web como un conjunto de carpetas y archivos en una vista similar a la del
explorador de Windows.
b) Sitio Web Remoto: Permite ver simultáneamente los archivos almacenados local y remotamente en
un servidor Web de una manera similar a la de los programas FTP.
c) Informes: Muestra hasta 31 reportes (y sus resúmenes) del sitio Web.
a) Carpetas: Muestra el sitio Web como un conjunto de carpetas y
archivos en una vista similar a la del explorador de Windows.
b) Sitio Web Remoto: Permite ver simultáneamente los archivos
almacenados local y remotamente en un servidor Web.
c) Informes: Muestra hasta 31 reportes (y sus resúmenes) del sitio
Web.
e) Hipervínculos: Muestra los enlaces que apuntan y salen de la
página seleccionada en la vista de carpetas.
f) Tareas: Muestra una lista de tareas a realizar (si las hay) para el
sitio Web abierto.
-7-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
El panel de tareas de inicio: es una ventana que se encuentra a la
derecha del espacio de trabajo y muestra información y opciones
relativas a la herramienta seleccionada.
Al iniciar FrontPage en la parte inferior del panel de tareas se encuentra la opción <Crear una página
o sitios nuevos> la cual muestra una nueva serie de opciones para crear páginas o sitios en blanco así
como la opción de seleccionar de entre una serie de plantillas y estilos.
Las Barras de herramientas:
Las barras de herramientas que posee FrontPage son los
estándares a todo el Office, cuando se inicia por primera vez las
barras de Herramientas por defecto son las siguientes:
Barra de herramientas estándar
-8-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Barra de herramientas de formato
Gestión de Barras de Herramientas
Las barras de herramientas que se encuentran visibles en FrontPage
se muestran con un cheque a la izquierda. Si se desea agregar o
eliminar una barra en particular solo se debe de seleccionar la barra
deseada y dar clic izquierdo.
La ultima opción <Personalizar> Se utiliza para agregar o eliminar
ítems de las barras de herramientas visibles; para agregar un item
debemos arrastrar del cuadro de diálogo el item que deseamos y
soltarlo en la barra de herramientas; para eliminar un item lo
arrastramos de la barra de herramientas y lo soltamos en el cuadro
de diálogo.
La Barra de Menús
La barra de menús se encuentra organizada en 11 categorías:
Archivo: Opciones relacionadas a la gestión de archivos (Páginas Web) y Directorios (Sitios)
Edición: Opciones de Deshacer / Rehacer, Copiar / Pegar, Seleccionar,
Buscar / Reemplazar Comunes a todos los programas de Microsoft Office.
-9-
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Ver: Visualiza / Oculta Los distintos elementos que componen la interfaz del Programa.
- 10 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Insertar; Inserta los distintos elementos de los que se compone una página Web.
Formato; Herramientas que se utilizan para dar formato al texto de la página Web (Su funcionalidad es
igual a la de la barra de herramientas formato)
Herramientas; Distintas opciones de configuración del programa, optimización y macros.
Tablas; Opciones relacionadas al manejo de tablas.
Datos; Opciones relacionadas a la gestión de datos dentro de una página Web.
Marcos; Opciones relacionadas al manejo de marcos (frames).
Ventanas; Gestión de Ventanas.
PASOS PARA CREAR UN SITIO WEB POR MEDIO DE PLANTILLAS
1. Abrir Frontpage y seleccionar la opción Crear
una página o sitio nuevos la cual esta ubicada
en la parte inferior del Panel de Inicio.
2. Aparecerá una nueva serie de opciones en el
Panel de Tareas Inicio, ahora seleccionaremos la
opción <más plantillas de sitio Web> ubicada al
final del apartado “Nuevo sitio Web”.
3. Se desplegará un cuadro de diálogo llamado
Plantillas de sitio Web en el que elegiremos el
tipo de sitio que deseamos crear, en esta ocasión
seleccionaremos
la
plantilla
<Sitio
Web
Personal>
Si el Panel de Tareas no se
encuentra Visible lo podemos
activar yéndonos al menú Ver y
seleccionar Panel de Tareas
o
por medio de la combinación de
teclas Ctrl + F1
4. Ahora seleccione la ubicación del sitio a crear para esto presione el botón examinar, lo cual
desplegará un cuadro el diálogo de Nueva ubicación del sitio Web.
5. Seleccione la ubicación <Escritorio> y cree una nueva carpeta con el nombre que desee darle al sitio
que va a crear.
- 11 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
3
4
Nota: Para crear un Sitio Web debemos
estar dentro de la carpeta que acabamos de
crear.
6. Una vez elegida la ubicación presione el
botón aceptar del cuadro Plantillas de Sitio
Web.
7. Aparecerá la vista de exploración de
directorios con el contenido de todo el sitio
Web, desde esta vista debe dar doble clic al
archivo index.htm para abrirlo.
Aparecerá una nueva pestaña en el selector
de páginas en la cual podrá desplazarse
entre el archivo index.htm y el Sitio Web.
8. Una vez hayamos explorado los
elementos del área de trabajo seleccione la
pestaña index.htm y modifique un
elemento de la misma, reemplazar el texto
bienvenido a mi sitio Web con el texto
Bienvenido al sitio Web de <su nombre>
y guarde el trabajo en el Menú Archivo y
seleccione la opción Guardar Todo.
5.3
6
9. Regrese a la pestaña de Sitio Web y escoja la vista de Carpetas
10. Seleccione el icono de la página en blanco ubicado en la parte
derecha de la vista de carpetas y crear una página nueva a la cual
debe escribirle un nombre. Y así ud. Creará las páginas que desee.
- 12 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
COMO CREAR UN SITIO WEB
Un Sitio Web
Un sitio Web se compone del conjunto de páginas Web que diseñemos para un objetivo concreto. Sin
embargo, no es lo mismo diseñar un sitio Web para un uso personal que para una empresa. Cada uno
tiene sus necesidades y planificar con anticipación qué es lo que vamos a hacer nos puede evitar
muchos problemas posteriores.
¿Qué clase de Web vamos a crear? Existen muchos tipos, pero vamos a nombrar algunos de los más
utilizados:
Sitio personal: Son los sitios diseñados para conocer la vida y obra de alguien. Es el más sencillo,
podemos usar un alojamiento Web gratuito (normalmente incluyen publicidad) y se compone de unas
pocas páginas.
Sitio de una empresa: Son los sitios diseñados para dar a conocer una empresa. Pueden ser sencillos,
en el caso de empresas pequeñas, o muy complejos, en el caso de grandes empresas. Normalmente
tienen una dirección propia (www.nombre_de_la_empresa.com) y almacenan información corporativa.
Sitio de una tienda online: Son los sitios diseñados para vender por Internet. Cualquier empresa,
grande o pequeña, pueden llegar a cualquier cliente del planeta gracias a Internet. Este puede también
estar incluido en el sitio de una empresa.
Sitio de un portal: Son los sitios especializados en recopilar recursos sobre un tema o temas
determinados. Cada sitio requiere una planificación previa. Etc.
Al momento de hacer nuestra página Web, es
conveniente hacer, por lo menos, una pequeña
división, poniendo los archivos de cada clase en una
carpeta determinada. Es decir, los archivos de fotos
en una carpeta, los archivos de la Web en otra, etc
Naturalmente si el sitio Web es demasiado grande,
nos acabará sucediendo lo mismo. Por ello en los
sitios Web complejos se suele dividir el sitio Web en
partes y cada parte se almacena en un lugar
distinto. Cada uno de estos lugares posee sus
propias carpetas.
Como es natural, el destino de un sitio Web es ser visitado por personas a través de Internet. Pero para
diseñarlo no hace falta que tengamos conexión a Internet. Podemos construir nuestro sitio en una
computadora y luego almacenarlo directamente en un servidor, para que pueda ser visto
inmediatamente por cualquier persona en Internet. Esto es, trabajando directamente en Internet.
Sin embargo, podemos construir nuestro sitio en nuestra computadora y sin tenerlo almacenado en un
servidor visitarlo tal como lo haría una persona por Internet. Para ello haremos que FrontPage aloje
nuestro sitio Web en nuestra computadora, y trabaje con él como si fuera una computadora remota de
Internet.
Crear un Sitio Web
1. Para crear el sitio, lo primero que debemos hacer es dar clic en el Menú Archivo
2. Seleccionar la opción Nuevo, luego en el Panel de Tareas Inicio dar clic en donde dice Sitio Web de
una Página.
3. Aparece un cuadro de diálogo en el cual se debe dar clic en Sitio Web vacío.
- 13 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
4. Indicar la ubicación donde deseamos guardar nuestra Web para esto se debe de dar clic en el botón
examinar.
5. Crear en el escritorio una carpeta con el nombre del sitio Web que creará.
6. Cuando se encuentre dentro de la carpeta que acaba de crear dar clic en el botón Abrir y para
terminar dar clic en Aceptar.
Hemos creado el sitio Web. Como podemos observar, nuestro sitio Web se compone, en este momento,
de 2 carpetas, images y _private, que están vacías. Además, tenemos que crear la página llamada
index.htm.
NOTA:
1. Para crear la página Index, solamente tiene que asegurarse de no tener seleccionada ninguna de las
carpetas. Luego dar clic en el botón nueva página.
2. Y podrá observar que aparece la página del Index.
En la vista Carpetas. A la izquierda tenemos la estructura en forma de árbol de directorios, y a la
derecha los directorios y los archivos contenidos en la carpeta abierta. Es similar a cómo lo veríamos en
el explorador de Windows. Desde aquí podemos borrar archivos, moverlos, crear nuevos, etc.
Pasos para crear una carpeta en el Sitio Web que estamos creando:
Al encontrarnos dentro de nuestro Sitio Web, y asegurarnos de estar dentro de la vista carpetas, realizar
los siguientes pasos:
1. Dar clic en el botón Nueva carpeta
2. Y podrá observar que aparece la nueva carpeta de la siguiente manera, la cual esta lista para darle
un nombre.
- 14 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
También puede hacerlo de la siguiente manera:
1. Dando clic derecho en un área vacía de la vista carpetas y
2. Dar clic derecho, seleccionar en el menú contextual la
opción nueva.
3. Dar clic en la opción Carpeta y luego darle el nombre
deseado.
FORMATO DE TEXTO
Para Insertar texto en las páginas que trabajaremos lo único que debemos hacer es escribir en la
pantalla. Al igual que lo hacemos en Microsoft Word, el texto aparecerá a medida que lo vayamos
tecleando. Para terminar un párrafo, sólo hay que pulsar la tecla Enter. Una vez introducido el texto
podemos cambiar su aspecto utilizando las distintas opciones que nos ofrece la barra de Formato.
Para cambiar el tamaño de letra lo que tenemos que hacer es dar clic en el botón
Tamaño de Fuente. A partir de entonces el texto que se introduzca será con ese tamaño
de letra. Si lo que queremos es cambiar el tamaño de letra de un texto que ya hemos
escrito, debemos seleccionarlo y cambiar entonces el tamaño de letra como hemos hecho
antes.
- 15 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Para seleccionar un estilo de fuente ya sea: negrita, cursiva o subrayado tenemos que dar clic en el
botón correspondiente
o subrayado.
A partir de entonces el texto que se introduzca será negrita, cursiva
Como se puede observar lo que tenemos que hacer para formatear texto es, básicamente, seleccionar el
texto a formatear y dar clic en los botones apropiados para aplicar el efecto que deseemos. Existen
muchos tipos de efectos, que podremos aplicar seleccionando el texto y haciendo clic en el Menú
Formato, opción Fuente.
PASOS PARA COLOCAR SANGRIA A UN PARRAFO.
Seleccionamos el párrafo al que le vamos a aplicar sangría.
Para ello damos clic en el Menú Formato luego en la opción párrafo y podremos aplicar Sangría,
especificando la cantidad de espacio que dejará la sangría en píxeles.
Dar clic en el botón aceptar.
• Antes del texto: Deja un espacio a la izquierda del párrafo.
• Después del texto: Deja un espacio a la derecha del párrafo.
• Primera línea: Deja un espacio a la izquierda de la primera línea.
Para aplicar sangría entre párrafos se realiza desde el cuadro de diálogo Párrafo. Podemos observar las
siguientes opciones este tiene:
Antes de: Deja un espacio antes del párrafo actual. Se especifica en píxeles.
Después de: Deja un espacio después del párrafo actual. Se especifica en píxeles.
Palabra: Deja espacio entre cada palabra del párrafo actual.
Interlineado: Deja espacio entre cada línea del párrafo actual.
Vamos a aplicar los espaciados en el siguiente ejemplo:
Podemos crear espectaculares títulos en sus páginas Web de una forma rápida y sencilla. Para ello
puede utilizar la herramienta de WordArt, que se utiliza de la misma forma que lo hace en Microsoft
Word.
También puede introducir texto de Marquesina para darle una mejor apariencia al texto.
PASOS:
1. Dar clic en el Menú Insertar
2. Seleccionar la opción Componente Web.
- 16 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
3. Aparece el cuadro de diálogo
Insertar Componente Web, en el
cual se observa que la opción
efectos
dinámicos ya aparece
seleccionada al igual que la opción
Marquesina.
4. Luego dar clic en el botón
Finalizar.
5. Aparece el cuadro de diálogo
Propiedades de marquesina y en la casilla
de Texto se escribe el texto que desea
establecer como marquesina.
6. Después de aplicarle el formato al texto
se da clic en aceptar.
En el botón de Estilo puede aplicarle
formato al texto de marquesina.
También puede aplicarle un color de fondo
a la marquesina.
- 17 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Para aplicar texto de marquesina puede también hacerlo desde el botón
Componente Web
El cual se encuentra en la Barra de Herramientas Estándar.
Pasos para insertar botones interactivos.
1. Dar clic en el Menú Insertar.
2. Seleccionar la opción Botón interactivo.
3. Aparece el siguiente cuadro de diálogo
En el cual se debe seleccionar el
botón que mas le guste y luego
en la casilla de texto escribir el
nombre que le dará al botón.
Si usted desea puede de una
sola vez insertar el hipervínculo
desde este cuadro de dialogo.
4.Después
de
haber
necesarias dar clic en el
seleccionado
botón aceptar.
También puede insertar un
Componente Web que se
Herramientas Estándar.
botón hiperactivo desde el botón
encuentra en la barra de
Pasos para insertar una imagen desde archivo
Para insertar imágenes en nuestra página Web. La forma
más sencilla y rápida es la siguiente:
1. Dar clic sobre el lugar donde queremos insertar la imagen.
2. Dar clic en el botón Insertar imagen desde archivo. El cual
se encuentra en la barra de Herramientas Estándar.
- 18 -
las
opciones
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Aparecerá el cuadro de diálogo Imagen:
Ahora sólo tenemos que elegir la imagen de la
unidad donde la tenemos guardada, luego dar clic
en el botón Insertar.
Después de insertada la imagen ud. puede realizarle
cambios a la imagen, desde la barra de imágenes.
Pasos para colocar una imagen de fondo en una página Web.
2
3
1. Dar clic en el Menú Formato y
después en la opción fondo.
2. Aparece un cuadro de diálogo en
el cual se debe asegurar que la
pestaña Formato este seleccionada,
luego dar clic en la opción Fondo de
imagen.
3. Dar clic en el botón Examinar.
4
4. Aparecerá el cuadro de diálogo
“Seleccionar imagen de fondo”, en
el cual deberá de seleccionar la
imagen que desea insertar como
fondo para su página Web.
5. Dar clic en el botón abrir.
6. Dar clic en el botón Aceptar.
Si queremos cambiar la imagen de fondo repetimos los mismos pasos antes mencionados y se selecciona
otra imagen, y si decidimos quitar la imagen de fondo, solamente damos clic en el menú Formato, dar
- 19 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
clic en la opción párrafo y desmarcamos la opción Fondo de imagen, y para finalizar damos clic en el
botón aceptar.
Es importante seguir los siguientes consejos cuando usemos fondos:
9
9
9
No debemos usar imágenes demasiado grandes excepto cuando sea necesario, ya que harán más
lenta la carga de la Web.
Las imágenes deben seguir el estilo de la página, de esta forma conseguiremos que la imagen
acompañe la estética de la Web.
Si usamos una imagen oscura, es conveniente usar texto de color claro y viceversa. Cuando la
imagen contenga zonas claras y oscuras, evite usar texto en estas zonas.
Como insertar hipervínculos en una página Web
¿Qué es un hipervínculo?
Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace
también puede hacerse a una página de otro sitio web, a una carpeta, a una imagen, etc. Para seguir
el hipervínculo, se da clic sobre él. También se conocen como hiperenlaces, enlaces o links.
Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratón esté
sobre el hipervínculo.
Dependiendo de cual sea el destino, hacer clic en un hipervínculo puede hacer que ocurran varias
cosas. Si el destino es otra página web, el navegador la cargará y la mostrará, pero si el destino es un
documento de Word, el navegador nos dará la posibilidad de abrir una sesión de Word para
visualizarlo o de guardar el archivo.
Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de nuestro sitio web por
donde queramos. Además, si queremos que se pongan en contacto con nosotros, nada mejor que
ofrecerles un hipervínculo a nuestro correo electrónico.
Tipos de hipervínculos.
Existen varios tipos de hipervínculos. Vamos a ver los más usados.
Hipervínculo de texto.
Un hipervínculo de texto: es un enlace que se encuentra asociado a un texto, de forma que si hacemos
clic sobre ese texto, navegamos dónde indique el hipervínculo. Por defecto, cuando creamos un
hipervínculo de texto, el texto aparece subrayado y en un color distinto al del texto normal, de forma
que el visitante sepa que existe ese enlace. Si volvemos a la página después de visitar el enlace, este
aparecerá con otro tono también. Aunque es interesante diferenciar el hiperenlace, es posible que no
queramos que aparezca así. Esto se puede modificar.
Hipervínculo de imagen.
Un hipervínculo de imagen es un enlace que se encuentra asociado a una imagen, de forma que si
hacemos clic sobre esa imagen, navegamos dónde indique el hipervínculo. Por defecto. cuando creamos
un hipervínculo de imagen, la imagen aparece rodeada de un borde con un color llamativo para que el
visitante sepa que existe ese enlace. Al igual que con el texto, más adelante veremos cómo podemos
modificar este comportamiento.
Por otra parte, los hipervínculos pueden referirse a páginas del mismo sitio web o de otros sitios web.
- 20 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Hipervínculo a una página del propio sitio web (página local).
Un hipervínculo local es un vínculo a una página que se encuentra en el mismo sitio web. Esto
significa que el archivo de la página web a la que se refiere el vínculo se encuentra en el mismo disco
que la página que contiene el vínculo. Así, para referirnos a ella tan solo basta con seleccionar la página
al encontrarse en el cuadro de diálogo Insertar hipervínculo. Si se encuentra en la misma carpeta,
basta con poner su nombre o escribir en la casilla de dirección del mismo cuadro de diálogo.
Por ejemplo, supongamos que tenemos un vínculo desde esta página a otra llamada curso que está en
la carpeta página Web. El vínculo sería: página Web /curso.htm
Hipervínculo a otro sitio web (página externa).
Un hipervínculo externo: es un vínculo a una página en Internet. Es un vínculo a cualquier otro lugar
fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la
página incluido http://www.... Así, http://www.aulaclic.com/flashMX/f_flash.htm es un vínculo a la
página f_flash.htm del sitio Aulaclic.
Hipervínculo a una dirección de correo electrónico.
Un hipervínculo a una dirección de correo electrónico es un vínculo que contiene una dirección de
correo. Al dar clic en él, automáticamente se abre el programa de correo que tenga el usuario instalado
para poder escribir a esa dirección de correo. Por ejemplo, si mi dirección de correo es
[email protected], escribiremos esta dirección de correo como dirección al insertar el
hipervínculo.
PASOS PARA INSERTAR UN HIPERVINCULO
1. Seleccionar el texto o imagen a la cual
le aplicará el hipervínculo.
2. Dar clic en el menú Insertar y
después en la opción
Hipervínculo
(Alt + Crtl + K)
3. Aparece el cuadro de diálogo “Insertar
Hipervínculo” en el cual se debe
seleccionar la página con la que quiere
realizar el enlace.
4. Dar clic en el botón Aceptar.
Si usted desea puede insertar un hipervínculo desde el botón Insertar Hipervínculo
encuentra en la barra de Herramientas Estándar.
- 21 -
el cual se
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Observe que si para aplicar el hipervínculo utilizó texto, este cambia de color y aparece subrayado esto
indica que es un hipervínculo; además al ubicar el puntero sobre este observará que el puntero cambia
la flecha por una manito.
Como quitar hipervínculos.
1. Seleccionar el texto o gráfico que lo
contiene.
2. Dar clic en el Menú Insertar.
3. Dar clic en la opción Hipervínculo.
4. Aparece el cuadro de diálogo
Modificar Hipervínculo, en el cual se
debe dar clic en el botón Quitar
hipervínculo.
5. Dar clic en el botón Aceptar.
También puede quitar un hipervínculo dando clic derecho sobre el texto o imagen que contiene el
hipervínculo, luego seleccionar la opción “Propiedades de hipervínculo” y en el cuadro de diálogo
modificar hipervínculo dar clic en el botón Quitar hipervínculo por ultimo dar clic en aceptar.
TRABAJAR CON TABLAS
El trabajar con TABLAS en Frontpage nos sirve para presentar datos de forma ordenada y para situar
en pantalla objetos en un lugar concreto. Las tablas sirven para organizar mejor una página Web, por
ejemplo si queremos tener el texto a la izquierda y las imágenes a la derecha utilizaremos una tabla
con dos columnas, en la columna izquierda escribiremos el texto y en la columna derecha
insertaremos las imágenes.
Lo primero que debe hacer es activar la barra de Tablas. Todas las opciones que contiene están
disponibles en el menú Tabla, pero usar la barra es más cómodo y rápido.
Las tablas son representadas en FrontPage de esta manera:
Tabla con borde (3 filas, 2 columnas)
Tabla sin borde (1 filas, 2 columnas)
- 22 -
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Insertar una tabla
1. Lo primero que debemos hacer es ubicar el cursor
donde queremos insertar la tabla.
2. Dar clic en el botón Insertar tabla, que se
encuentra la barra de herramientas estándar. Luego,
arrastrar el ratón de forma que la tabla tenga las filas
y columnas que se desean.
3. Al soltar el ratón, aparecerá la tabla en pantalla.
También puede insertar una tabla de la siguiente manera:
1. Dar clic en el Menú Tabla
2. Dar clic en la opción Insertar y luego en Tabla
3. Aparece el cuadro de diálogo “Insertar Tabla” en el cual se deben seleccionar las filas y columnas
que se desea que tenga su tabla.
4. Después de seleccionar las opciones necesarias del cuadro de diálogo, dar clic en el botón Aceptar.
Observe el siguiente cuadro de diálogo:
- 23 -
9
En este cuadro de diálogo
quitarle el borde a una tabla.
puede
9
Darle un color a los bordes de la
tabla.
9
Darle un color de fondo a la
tabla.
9
Colocar una imagen de fondo a
la tabla.
cÜÉyxáÉÜtM TÇt Xáà{xÜ ZâtÜwtwÉ TÄätÜxÇztA
Tá|zÇtàâÜtM \ÇyÉÜÅöà|vt
Por defecto, al insertar una tabla, esta ocupa todo el ancho posible de la página y tiene un borde de 1
píxel. Estas y otras propiedades pueden cambiarse fácilmente, en el cuadro de diálogo mostrado
anteriormente.
Cuando la tabla ya se tiene insertada y desea realizarle algunas
modificaciones, deberá dar clic derecho sobre la tabla y seleccionar la
opción Propiedades de tabla.
Si lo que quiere es realizarle modificaciones a una celda de una tabla
entonces deberá seleccionar la celda a modificar y dar clic derecho, luego
seleccionar la opción propiedades de celda.
Pasos para insertar una capa en Frontpage
Una Capa es: un contenedor de una página Web que incluye elementos de página tales como el
texto y los gráficos. Las capas se pueden superponer, anidar, mostrar y ocultar en la página.
También se pueden animar por medio de comportamientos, que agregan secuencias de
comandos a cualquier etiqueta de la página.
Una capa nos permite mover todo lo que tengamos dentro de esta, a cualquier parte de la página
en la que estamos trabajando.
Pasos:
1. Dar clic en el botón “Insertar Capa”
Herramientas Estándar.
el cual se encuentra en la barra de
2. Aparecerá la capa, la cual esta lista para introducirle ya sea texto o una imagen.
- 24 -
