SlideShare ist ein Scribd-Unternehmen logo
1 von 29
Downloaden Sie, um offline zu lesen
Cómo hacer una página web con M. FrontPage 2000.
En este manual se va a explicar cómo hacer una página web con
FrontPage 2000.
Concretamente veremos los siguientes capítulos:
1. Introducción a los conceptos relacionados con el diseño de una página web.
2. Daremos un pequeño repaso al entorno de FrontPage
- El espacio de trabajo.
- La zona de los menú y opciones.
- La zona de carpetas y archivos.
- La zona de vistas
3. Cómo crear y definir un sitio web.
4. Cómo crear una página web dentro de nuestro sitio web.
5. Cómo insertar texto y darle formato.
6. Cómo insertar tablas y darles formato.
7. Cómo insertar imágenes.
8. Cómo crear Enlaces hipervínculos (internos y externos, email)
9. Cómo insertar otros elementos de un sitio web.
Prólogo.
A continuación les presento un manual realizado expresamente para los visitantes de mi
sitio web www.desenredate.com que a base de peticiones han logrado que arrancase
FrontPage y empezara a redactar estas líneas. Con este manual sólo pretendo dar unos
pasos guiados con FrontPage para conseguir que personas inexpertas en el ámbito del
desarrollo web logren hacerse su propia página web.
El manual consiste en un viaje por FrontPage a través del cual se descubrirán los aspectos
más básicos e imprescindible para hacer una página web sencilla y funcional. Durante el
manual me he basado en un ejemplo que he ido utilizando en todos y cada uno de los
capítulos de forma que, al finalizar el manual, se obtenga una página web completa.
Este manual que está redactado y elaborado por Sebastián García-V.S no tiene copyright ni
ningún tipo de derechos de autor. Su distribución es libre siempre y cuando no se altere su
contenido sin el permiso del autor.
Esta obra está disponible en el sitio web www.desenredate.com
Agradecimientos a:
A todos los visitantes de www.desenredate.com
A todo aquel, que después de leer este manual, me mande una opinión, una
crítica o sugerencia sobre el manual.
Sebas G-V.S
Email: [editor@desenredate.com ]
Sitio web: [http://www.desenredate.com]
Desde alguna IP de Internet, hoy lunes 18 de Agosto de 2004.
Manual de FrontPage 2000. Versión 1.3 Agosto’2004.
www.desenredate.com 1 de 28
Cómo hacer una página web con M. FrontPage 2000.
1. Introducción a los conceptos básicos relacionados con el diseño
de una página web.
A continuación se van a comentar unos pequeños conceptos fundamentales para el
desarrollo de un sitio web.
Página web:
Documento de un sitio Web escrito en el lenguaje HTML
Sitio web:
Página principal y sus otras páginas, gráficos, documentos, multimedia y otros
archivos asociados que se almacenan en un servidor Web o en el disco duro de
un equipo.
HTML:
(Lenguaje de marcado de hipertexto) Lenguaje estándar de marcas empleado
para documentos del World Wide Web.
Editor web:
Programa utilizado para crear páginas web sin la necesidad de tener que
aprender el lenguaje. Ejemplos: M. FrontPage 2000 y Macromedia Dreamweaver.
Servidor:
Máquina conectada a Internet que –entre otros servicios- ofrece albergue para
páginas web haciendo que estén accesibles desde cualquier punto de Internet.
Dirección URL:
(Universal Resource Location / Localizador de recursos universal) Cadena que
proporciona la dirección de Internet de un sitio Web o un recurso del World Wide
Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso.
El tipo más común de dirección URL es http://, que proporciona la dirección de
Internet de una página Web. Otros tipos de dirección URL son gopher://, que
proporciona la dirección de Internet de un directorio Gopher, y ftp://, que
proporciona la ubicación de red de un recurso FTP. Ejemplos:
http://www.desenredate.com , http://www.google.com
Imagen:
Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador
de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros.
servidor Web utilizado para alojar el sitio Web.
Propiedades:
Características de un elemento del Web actual, como el título y la dirección URL de
un Web o el nombre y el valor inicial de un campo de formulario. También puede
especificar propiedades para elementos de página como tablas, gráficos y elementos
activos.
Proveedor de servicios Internet (ISP)
En el ámbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor
de servicios para web. Los diferentes servicios que pueden ofrecer son: conexión a
Internet, registro de dominio, hospedaje de sitios web, servicios de contadores de
servicios, libros de visitas gratuitos, estadísticas para web, entre otros.
www.desenredate.com 2 de 28
Cómo hacer una página web con M. FrontPage 2000.
2. Daremos un pequeño repaso al entorno de FrontPage
Primero ejecutaremos el programa Microsoft FrontPage y nos aparecerá el siguiente
entorno de trabajo.
Dentro del entorno de trabajo podemos distinguir 4 zonas:
- El espacio de trabajo
- La zona de los menú y opciones.
- La zona de carpetas y archivos (de momento no está visible)
- La zona de vistas (vista normal, vista html y vista previa) en forma de pestañas
El espacio de trabajo será donde trabajemos desarrollando nuestra página web.
Insertaremos texto, tablas, imágenes y otros elementos dándole formato. Este espacio de
trabajo tiene ciertas similitudes con cualquier procesador de textos como Word y Abiword.
www.desenredate.com 3 de 28
Cómo hacer una página web con M. FrontPage 2000.
En zona de los menú y opciones tenemos a nuestra disposición de una serie de
comandos para poder realizar el sitio web. Al igual que otros programas, esta zona está
compuesta por menús, sub-menús e iconos con los comandos de uso más frecuente.
En Microsoft FrontPage hay 10 Menus.
Opciones del menú de Microsoft FrontPage 2000:
Archivo: Contiene opciones básicas como Abrir, Guardar, Guardar como, Configurar, Salir...
Edición: Comandos más usados: Deshacer y Rehacer, copiar, cortar, pegar...
Ver: Para abrir las diferentes vistas que tiene FrontPage.
Insertar: Para insertar elementos como: imágenes, formularios, botones y otros
componentes.
Formato: Comandos para darle formato a nuestra web así como a los elementos que la
componen.
Herramientas: Contiene corrector ortográfico y otras opciones más avanzadas.
Tabla: Comandos relacionados con las tablas: creación, modificación...
Marcos: Comandos para cuando deseemos crear páginas web con marcos.
Ventana: Para cambiar de ventana de trabajo. (ya que se pueden tener varios documentos
abiertos)
Ayuda: Al igual que otros programas, en este menú está la ayuda, un glosario e información
de Microsoft FrontPage.
www.desenredate.com 4 de 28
Cómo hacer una página web con M. FrontPage 2000.
La zona de carpetas y archivos
En esta zona (que inicialmente no está visible porque todavía no hemos creado un sitio
web) podremos observar en todo momento un listado de todas las carpetas y archivos que
forman nuestro sitio web. Es importante que cualquier elemento, como por ejemplo las
imágenes, que insertemos en nuestra web estén en esta carpeta y no en otras de nuestro
computador. Por ejemplo, es interesante guardar todas las imágenes que usemos en una
carpeta llamada “imágenes” o “images” (ésta última es creada automáticamente por
FrontPage)
La zona de vistas (vista normal, vista html y vista previa)
www.desenredate.com 5 de 28
Cómo hacer una página web con M. FrontPage 2000.
La vista Normal es para desarrollar páginas web sin la necesidad de aprender el lenguaje
HTML. Conforme vayamos trabajando en esta vista Normal, en la vista HTML se irá
generando el código HTML de forma automática.
En la Vista HTML también podremos crear o modificar páginas web, pero para ello
deberemos conocer el lenguaje HTML. ( no es imprescindible usar esta pestaña)
La vista previa es como una “presentación preliminar” de nuestro trabajo. Conforme
vayamos trabajando en la vista Normal, podemos hacer con cierta frecuencia visitas a la
vista Previa para ver el resultado de nuestro trabajo.
3. Cómo crear y definir un sitio web.
Una vez nos hayamos familiarizado con el entorno de Microsoft FrontPage procedemos a
definir un sitio web sobre el cual crearemos nuestras páginas.
Microsoft FrontPage nos proporciona varios mecanismos para crear un sitio web. Ofrece
entre otras opciones:
- crear una web a través de plantillas
- crear una web a través de un asistente
- crear una web desde cero (Web vacío)
En este tutorial, por decisión del autor, se considera que la mejor opción para entrar en el
campo del desarrollo web es empezar con la opción “Web en Blanco”, y por ello en este
tutorial se ha elegido dicha opción.
Abrimos el programa FrontPage.
Nos dirigimos al menú ARCHIVO, seleccionamos NUEVO y hacemos clic en WEB.
Y en la ventana que nos aparece seleccionamos: Web Vacío
Si nos fijamos a la derecha de la ventana veremos la ruta de nuestra web que genera por
defecto FrontPage: C:miWeb y será en este lugar donde se vaya a guardar nuestra
web.
y hacemos clic en Aceptar.
www.desenredate.com 6 de 28
Cómo hacer una página web con M. FrontPage 2000.
A partir de este momento nuestro sitio web queda definido. Hemos creado un sitio web en
blanco y estará ubicado en C:miWeb
Al haber creado el sitio web ha aparecido la “Vista Carpetas” en la que podemos observar
que se han creado ciertas carpetas donde podremos guardar todos los elementos que
compongan nuestro sitio web: páginas web, imágenes, música etc.
(Si la “Vista Carpetas” no se visualizara, tendríamos que activarla en el menú VER >>
Carpetas)
Si nos fijamos, tenemos una carpeta llamada miWeb y dentro de ésta tenemos dos:
_private e images.
En este tutorial vamos a trabajar de la siguiente forma: Las páginas web que formen
nuestro sitio web irán en la carpeta miWeb y las imágenes que utilicemos serán guardadas
en images. La carpeta _private de momento no la utilizaremos.
Por curiosidad, podemos entrar en MiPc >> C: >> y veremos la carpeta de nuestra web.
Para mejorar nuestra práctica con las tareas de Abrir un sitio web, Guardar y Salir
realizaremos los siguientes pasos:
(teniendo todavía abierto el sitio web que acabamos de crear)
1. Menú Archivo >> Guardar (Para guardar los cambios)
2. Menú Archivo >> Salir (Para salir del programa)
A continuación abriremos de nuevo nuestro sitio web para trabajar en él.
Arrancamos FrontPage.
3. Menú Archivo >> Abrir web y en la ventana de exploración buscaremos la carpeta
miWeb que está guardada en C:miWeb
www.desenredate.com 7 de 28
Cómo hacer una página web con M. FrontPage 2000.
Con los pasos anteriores abrimos el sitio web al completo, con todas sus carpetas y
archivos.
Ya tenemos definido y creado nuestro sitio web, pero... ¡Está vacio!
El siguiente trabajo es crear las páginas web que formarán nuestro sitio web.
Como se ha comentado en el prólogo, en este tutorial se van a seguir los pasos para crear
una página personal con las siguientes páginas:
- Una página principal con información general del autor
- Una página con los enlaces favoritos.
- Una página con las aficiones del autor.
- Una página para fotografías a modo de álbum.
- Una página para un currículum vitae profesional.
Como sistema de navegación (o exploración) de nuestro sitio web utilizaremos un menú que
crearemos en la página principal para permitir desplazarnos por las diferentes páginas.
El paso siguiente es crear nuestra primera página: la página principal.
4. Cómo crear una página web dentro de nuestro sitio web.
Abrimos FrontPage.
Abrimos nuestro sitio web: C:miWeb
Y por defecto se nos abre una página en blanco llamada pagina_nueva_1.htm
Primero y antes de todo, esta página en blanco la vamos a guardar como “index.html”
ya que este es el nombre de archivo con el que se tienen que llamar las páginas
principales de los sitios web.
Esto lo hacemos de la forma siguiente:
Menú Archivo >> Guardar como >> index.html
www.desenredate.com 8 de 28
Cómo hacer una página web con M. FrontPage 2000.
Una vez hemos guardado la página index.html (la principal) le pondremos un título que
será visible en la ventana del navegador cuando visitemos la web.
Menú Formato >> Fondo >> Pestaña General >> en la casilla Título (que por defecto pone
Pagina nueva 1) escribiremos el título de nuestra página, como por ejemplo:
“Página personal de Sebas García”
Hacemos clic en Aceptar y guardamos los cambios: Menú Archivo >> Guardar
Para ver los cambios, vamos a abrir nuestra web con un navegador que tengamos instalado
en nuestro PC (Internet Explorer, Mozilla, Netscape...).
Esta opción está en el menú Archivo >> Vista previa en el navegador
(De la lista de navegadores que aparezcan, haremos doble clic sobre el que queramos)
www.desenredate.com 9 de 28
Cómo hacer una página web con M. FrontPage 2000.
Al hacer doble clic sobre el navegador deseado, se abrirá el navegador mostrando la página
web. Aunque la página web está en blanco (porque todavía no hemos insertado nada)
podemos observar como sí que aparece en la parte superior de la ventana el título que
habíamos escrito en los pasos anteriores:
A continuación insertaremos en la página principal texto, imágenes, tablas e hipervínculos.
5. Cómo insertar texto y darle formato.
La forma de insertar texto es idéntica a la de cualquier procesador de texto.
Consiste en situar el cursor en el lugar donde queramos que aparezca el texto, escribir el
texto con el teclado y a continuación le daremos formato.
En nuestra página vamos a insertar un título superior (a modo de encabezado), un párrafo
intermedio de texto, y un texto final (a modo de pie de página).
Teniendo abierta la página index.html colocaremos el cursor en la parte superior de la
ventana y escribiremos una línea:
“Bienvenidos a mi página web personal”
A continuación le daremos formato: Seleccionamos la línea que hemos escrito y haremos
clic en la opción Fuente del menú Formato.
www.desenredate.com 10 de 28
Cómo hacer una página web con M. FrontPage 2000.
Y en la ventana de Fuente elegiremos:
Fuente: Verdana
Estilo de fuente: Negrita
Tamaño: 5
Color: Azul marino
Guardamos los cambios realizados: menú Archivo >> Guardar
Es importante que cada vez hayamos realizamos varios pasos, guardemos el trabajo.
Para dividir el encabezado del cuerpo central y del pie de página utilizamos las Líneas
horizontales que proporciona FrontPage, que consisten como su nombre indica, en líneas
horizontales útiles para dividir zonas de una web.
Para ello, justo debajo del título que hemos hecho colocaremos el cursor. A continuación en
el menú Insertar haremos clic en Línea Horizontal
www.desenredate.com 11 de 28
Cómo hacer una página web con M. FrontPage 2000.
A continuación dejaremos una línea en blanco para crear un menú de navegación, pero
como el menú lo realizaremos más hacia delante, de momento sólo dejaremos una línea en
blanco. Para dejar este espacio en blanco, haremos clic en la opción “Salto de línea” del
Menú Insertar.
Después de dejar una línea en blanco, insertaremos otra Línea horizontal: en el menú
Insertar haremos clic en Línea Horizontal
Guardamos los cambios realizados: menú Archivo >> Guardar
Ya hemos dejado un espacio separado por líneas horizontales para crear el menú que
haremos más adelante (En la sección Insertar hipervínculos de este manual)
Ahora insertaremos un párrafo de presentación para practicar con la inserción de texto y su
formateo.
Posicionaremos el cursor en la siguiente línea después de la última línea horizontal creada y
escribiremos una presentación:
“Hola, mi nombre es Sebastián García y os doy la bienvenida a mi web. Esta web es un
ejemplo práctico del manual que estoy realizando en estos momentos sobre cómo hacer
una página web con el editor FrontPage. Espero que os guste.”
Seleccionamos el texto escrito, y en el menú Formato >> Fuente seleccionamos lo
siguiente:
Fuente: Arial
Estilo de Fuente: cursiva
Tamaño: 3
Color: negro
Guardamos los cambios realizados: menú Archivo >> Guardar
El siguiente paso será crear el pié de página o despedida. Pero antes deberemos dejar
espacio para insertar posteriormente más contenido en nuestra web, como por ejemplo
alguna foto nuestra.
Para dejar el citado espacio libre, utilizaremos la opción “Salto de Línea” del menú Insertar.
Este paso lo realizaremos 3 veces para dejar suficiente. (Aunque si no dejáramos suficiente,
más tarde este espacio se podría ampliar)
www.desenredate.com 12 de 28
Cómo hacer una página web con M. FrontPage 2000.
Insertaremos 3 Saltos de Línea.
Guardamos los cambios realizados: menú Archivo >> Guardar
Una vez hemos dejado el espacio en blanco para fotos y más texto, insertaremos una
nueva línea Horizontal para dividir el pié de página del cuerpo central de la página: en el
menú Insertar haremos clic en Línea Horizontal
A continuación escribiremos el pié de página, como por ejemplo:
“Página personal de Sebas García. © Fecha de creación 04 de Agosto de 2004.”
Le daremos el siguiente formato:
Fuente: verdana
Estilo de Fuente: normal
Tamaña: 1
Color: negro
Guardamos los cambios realizados: menú Archivo >> Guardar
Después de realizar todos los pasos anteriores, el resultado debería de ser similar a la
imagen que se muestra a continuación: (sin las explicaciones en rojo)
www.desenredate.com 13 de 28
Cómo hacer una página web con M. FrontPage 2000.
6. Cómo insertar tablas y darles formato.
Las tablas son estructuras de una página web con las que se puede distribuir contenido
ordenadamente.
A continuación crearemos una tabla para insertar una foto y un comentario. Para ello
crearemos una tabla de 1 columna x 2 filas.
Colocaremos el cursor en la línea siguiente debajo del párrafo del Cuerpo de la página.
Y haremos clic (dejándolo presionado y sin soltar) en el Icono “Insertar Tabla”: cuando
aparezcan las cuadrículas, (sin dejar de presionar el icono) seleccionaremos la primera
casilla y a continuación (sin dejar de presionar el icono) bajaremos y seleccionaremos la
casilla de abajo como indica la imagen siguiente:
Icono “Insertar Tabla” cuadrículas
www.desenredate.com 14 de 28
Cómo hacer una página web con M. FrontPage 2000.
Cuando tengamos seleccionadas las dos casillas dejaremos de presionar el icono, y nos
aparecerá en el espacio de trabajo (donde habíamos dejado el cursor) una tabla de 1
columna x 2 filas (como la que habíamos seleccionado en el icono)
Ahora le daremos formato a la tabla.
Seleccionamos la tabla, y haciendo clic con el botón secundario del ratón (normalmente el
derecho) nos aparecerá un cuadro de opciones:
www.desenredate.com 15 de 28
Cómo hacer una página web con M. FrontPage 2000.
Hacemos clic en Propiedades de Tabla para que nos aparezca una ventana donde cambiar
las propiedades de la tabla:
En la ventana realizaremos los siguientes cambios:
Alineación: Centro
Especificar Ancho: 50 porcentaje
Margen de celdas: 1
Espaciado entre celdas: 2
Bordes – Tamaño: 0
Y aceptos clic en Aceptar.
Guardamos los cambios realizados: menú Archivo >> Guardar
Al aplicarle los cambios a la tabla: le hemos reducido el tamaño, la hemos centrado y al
ponerle los bordes igual cero hemos obtenido una tabla “invisible”. De esta forma estamos
usando una tabla como contenedor de información pero que no es visible.
Cuando le ponemos a una tabla los bordes igual a cero (para hacerla invisible) en nuestro
espacio de trabajo (en la página de FrontPage) la veremos con los bordes punteados para
facilitar nuestro trabajo, pero una vez visualicemos la web en un navegador web
comprobaremos que la tabla no es visible.
Otra forma de comprobar que nuestra tabla de “bordes punteados” no se verá en la web es
desplazarnos a la pestaña VISTA HTML ya que esta vista actúa como un navegador web:
www.desenredate.com 16 de 28
Cómo hacer una página web con M. FrontPage 2000.
Una vez hemos comprobado que nuestra tabla no se verá en el resultado final, podemos
volver al espacio de trabajo en la pestaña Vista NORMAL:
Una vez tenemos la tabla creada, insertaremos una imagen dentro de ella. Para ver cómo
insertar una imagen leeremos el siguiente apartado.
7. Cómo insertar imágenes.
Para insertar una imagen iremos al menú Insertar >> Imagen >> Desde Archivo
Nos aparecerá una ventana donde tendremos que localizar la imagen que deseemos
insertar. Si anteriormente la habíamos guardado en el directorio de nuestra web (en
“images”) haremos doble clic sobre dicha carpeta para ver qué imágenes dispone. Cuando
encontremos la que deseemos la seleccionamos y hacemos clic en Aceptar.
www.desenredate.com 17 de 28
Cómo hacer una página web con M. FrontPage 2000.
Si por el contrario, la imagen no la habíamos guardado en el directorio de nuestra web,
tendremos que explorar por nuestro computador hasta encontrar la imagen deseada. Ver la
imagen siguiente:
Cuando hayamos insertado una imagen, guardaremos los cambios: Archivo >> Guardar
Como se ha comentado en líneas anteriores, cualquier elemento que insertemos en nuestras
páginas web deberán estar guardados dentro de la carpeta de nuestro sitio web, en nuestro
caso, se llamaba: C:miWeb
Es muy recomendable, que todas las imágenes que utilicemos en nuestras páginas web
estén guardadas en una carpeta específica para ellas.
Cuando en el segundo apartado de este manual definimos nuestro sitio web, FrontPage nos
creó automáticamente una carpeta llamada “images” y será aquí donde deberemos guardar
todas las imágenes que vayamos a utilizar.
Observando desde el explorador de Windows Explorando desde la “vista carpetas” de
FrontPage
www.desenredate.com 18 de 28
Cómo hacer una página web con M. FrontPage 2000.
FrontPage se asegura de que las imágenes que utilicemos están guardadas en la carpeta de
nuestra web de dos formas dependiendo de dónde esté guardada nuestra imagen:
La imagen que vamos a insertar está guardada en el directorio de nuestra web
C:miWeb ó C:miWebimages
En este caso FrontPage actúa con total normalidad al darse cuenta de que la imagen
que se utiliza ya está dentro del directorio de la web, por lo tanto no hay ningún
problema.
La imagen que vamos a insertar NO está guardada en el directorio de nuestra web,
es decir, el archivo está guardado en otro directorio como por ejemplo: el escritorio,
Mis Documentos, un disquete.. etc.
En este caso, cuando insertemos una imagen que, por ejemplo, esté en el escritorio,
una unidad de disquete o en Mis Documentos FrontPage nos alertará de que esa
imagen no está en el directorio de nuestra web, y por lo tanto nos da unas opciones
para que le indiquemos en qué carpeta (de las que hay dentro de nuestro sitio web)
deseamos que la guarde. Quiero remarcar que esta pregunta no nos la hará en el
momento de insertar la imagen, sino que FrontPage la hace cuando guardemos (Menú
Archivo >> Guardar) la página donde insertemos las imágenes
Nos mostrará la siguiente ventana, en la que deberemos indicarle que la guardar en la
carpeta “images”:
8. Cómo crear hipervínculos (enlaces internos, externos y mailto)
Al hipervínculo se le suele llamar “enlace web” o en su versión anglosajona “link”.
Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra
página o una ubicación diferente en la misma página.
El destino es con frecuencia otra página Web, pero también puede ser una imagen, una
dirección de correo electrónico, un archivo (como por ejemplo, un archivo multimedia o un
documento de Microsoft Office) o un programa. Un hipervínculo puede ser texto o una
imagen.
www.desenredate.com 19 de 28
Cómo hacer una página web con M. FrontPage 2000.
4 tipos de hipervínculos:
Enlaces internos: Este tipo de enlaces conducen a una página web dentro del mismo sitio
web donde está el propio enlace.
Enlaces externos: Este tipo de enlaces nos conducen a páginas web de sitios web ajenos al
nuestro.
Enlaces a archivos: Son enlaces que conducen a archivos que no son páginas web. Con
este tipo de enlaces podemos permitir que el visitante de nuestra web se descargue
archivos disponibles en nuestra web como por ejemplo archivos.zip , archivos.mp3 etc.
Enlaces mailto: Al hacer clic sobre este tipo de archivos, al visitante se le abrirá una
ventana con la cual desde su programa de correo podrá enviarnos un correo electrónico a la
cuenta de correo que nosotros le especifiquemos.
A continuación crearemos una página web especial para nuestros enlaces preferidos.
Para ello, iremos al menú Archivo >> Nuevo >> Página; y en la ventana que se nos abre,
en la pestaña General seleccionaremos “Página normal” y haremos clic en Aceptar.
Antes de hacer nada sobre esta nueva página, la vamos a guardar dándole un nombre:
Menú Archivo >> Guardar como : y en la casilla pondremos: enlaces.html
Una vez guardada la página en nuestro directorio, le pondremos un título y un titular de
página.
Para el título haremos lo siguiente:
Menú Formato >> Fondo >> Pestaña General >> en la casilla Título (que por defecto pone
Pagina nueva 2) escribiremos el título de nuestra página, como por ejemplo: “Mis enlaces
preferidos”
A continuación insertaremos un titular de página. Para ello utilizaremos la herramienta
texto:
Teniendo abierta la página enlaces.html abierta, colocaremos el cursor en la parte superior
de la ventana y escribiremos una línea:
www.desenredate.com 20 de 28
Cómo hacer una página web con M. FrontPage 2000.
“Estos son mis enlaces preferidos” y le daremos formato:
Fuente: verdana
Estilo de Fuente: normal
Tamaño: 5
A continuación insertaremos una línea horizontal: en el menú Insertar haremos clic en
Línea Horizontal.
Además insertaremos un “Salto de línea” para separar los contenidos: Menú Insertar >>
Salto de línea >> Salto de línea normal.
A continuación insertaremos una tabla para insertar los enlaces:
Crearemos una tabla de 6 columnas x 3 filas. (Para 18 enlaces)
A continuación le daremos formato:
Seleccionamos la tabla que hemos creado y hacemos clic con el
botón secundario del ratón (normalmente el derecho), en la
ventana que nos aparece hacemos clic en el comando
“Propiedades de Tabla”:
En este caso elegimos:
Especificar ancho: 100 (porcentaje)
Margen de celdas: 0
Espacio entre celdas: 0
Bordes Tamaño: 3
Colores=> Borde claro: gris oscuro, Borde Oscuro: gris claro
Hacemos clic en Aceptar y guardamos los cambios: menú Archivo >> Guardar.
www.desenredate.com 21 de 28
Cómo hacer una página web con M. FrontPage 2000.
o Ahora insertaremos enlaces externos en la tabla:
Ponemos el cursor dentro de la primera celda de la tabla y escribimos el texto que
contendrá el enlace, por ejemplo: “Google” a continuación seleccionamos el texto que
hemos escrito y hacemos clic en la opción Hipervínculo del menú Insertar. Nos aparecerá la
siguiente ventana:
En el cuadro de diálogo “Dirección URL” escribiremos la dirección de la web a la que
queremos enlazar, en este caso sería: http://www.google.es
En la opción “Marco de destino” seleccionaremos “Nueva ventana” y haremos clic en
Aceptar. Esto es para que cuando el navegante haga clic en el enlace de Google se le abra
una nueva ventana de navegador con la web de Google y no se salga de nuestra página
personal.
Repetiremos este paso hasta completar todos los enlaces que deseemos.
Guardamos los cambios: menú Archivo >> Guardar
o Ahora insertaremos un enlace interno:
A continuación insertaremos un enlace interno, es decir, a una página de nuestro propio
sitio web. En este caso, en la página enlaces.html insertaremos un enlace para poder
regresar a la página principal index.html
Para ello, pondremos el cursor debajo de la tabla, dejando una línea en blanco (Insertando
un salto de línea normal).
Escribiremos el siguiente texto “Volver a la página principal”
Con formato: Fuente: verdana Estilo: Negrita y Tamaño: 3
Seleccionamos el texto, y en el menú Insertar hacemos clic en Hipervínculo.
www.desenredate.com 22 de 28
Cómo hacer una página web con M. FrontPage 2000.
Ahora, en lugar de poner la dirección URL, como muestra la siguiente imagen: haremos clic
con el ratón en el icono que representa la página index.html Además, en la opción “Marco
de destino” seleccionaremos: Mismo Marco (Esto es para permitir al visitante de nuestra
web navegar por nuestro sitio web con una sola ventana de navegador web)
A continuación haremos clic en Aceptar y guardamos los cambios realizados (menú Archivo
>> Guardar)
Para comprobar nuestro trabajo, podemos visualizarlo en el navegador: Menú Archivo >>
Vista previa en el explorador ó bien haciendo clic en el icono:
Si se ha realizado los mismos pasos que en este tutorial, el resultado obtenido tendría que
ser similar a esta imagen:
www.desenredate.com 23 de 28
Cómo hacer una página web con M. FrontPage 2000.
Ahora insertaremos un enlace en la página index.html que apunte a la página enlaces.html.
Los pasos son los mismos que los vistos anteriores. El enlace lo insertaremos en el espacio
que dejamos anteriormente para el menú (recuerdo que era entre las dos líneas
horizontales debajo del titular), y el texto será “Mis enlaces preferidos” con hipervínculo al
documento web enlaces.html tal y como se muestra en la siguiente imagen.
www.desenredate.com 24 de 28
Cómo hacer una página web con M. FrontPage 2000.
o Hipervínculos a archivos que NO son páginas web.
Para insertar enlaces a archivos que no son páginas web (documentos html) como por
ejemplo ficheros.zip, archivos.mp3 ..., el proceso es idéntico al de crear un enlace interno,
pero en lugar de seleccionar un documento *.html seleccionaremos el fichero que queremos
enlazar. Antes de crear el vínculo deberemos asegurarnos de que el fichero que queremos
enlazar está dentro del directorio web C:miWeb
Ejemplo visual:
o A continuación insertaremos un hipervínculo “Mailto”
Como se comentó anteriormente, al hacer clic sobre un enlace de tipo “mailto” provoca que
se abra una ventana del cliente de correo configurado por el visitante para poder
mandarnos un correo a la dirección de correo-e que nosotros le indiquemos.
Pasos:
En el documento index.html justo debajo de la tabla donde insertamos una imagen, vamos
a escribir el siguiente texto:
“Mándame un email” con el siguiente formato:
Fuente: verdana
Tamaña: 2
Estilo: negrita
Color: Azul
Seleccionamos el texto, y hacemos clic en el comando Hipervínculo del menú Insertar.
Cuando nos aparezca la ventana “crear vínculo” haremos clic en el icono :
(Para localizar este icono ver la siguiente imagen)
www.desenredate.com 25 de 28
Cómo hacer una página web con M. FrontPage 2000.
Al hacer clic sobre el icono con forma de carta, nos aparecerá una ventana donde
deberemos escribir la dirección de email donde queremos recibir los mensajes que nos
envíen los visitantes de nuestra web.
Una vez la hayamos escrito, haremos clic en Aceptar en esta ventana, y en la otra de “Crear
vínculo”.
Guardamos los cambios: menú Archivo >> Guardar.
En este punto del tutorial, ya sabemos definir un sitio web y crear páginas web dentro de él
con texto, tablas, imágenes e hipervínculos.
El siguiente paso consistirá en crear otras páginas según nuestras necesidades. Al tratarse
de una página personal se podría –por ejemplo- crear una página para hablar de nuestras
aficiones, otra para poner nuestro currículo, otra para poner nuestras fotos personales...
En todas estas páginas se deberá cumplir lo siguiente:
- Todas tendrán un título
- Todas deberán tener un titular en la parte superior de la web
- Todas tendrán un enlace para poder regresar a la página principal
- Se recomienda utilizar Líneas Horizontales para separar secciones
Resultado:
www.desenredate.com 26 de 28
Cómo hacer una página web con M. FrontPage 2000.
9. Cómo insertar otros elementos de un sitio web.
A continuación veremos cómo insertar otro tipo de elementos a nuestra página web.
o Insertar música de fondo.
El formato recomendado para usar como fondo musical es una página web es el Formato
MIDI. Es decir, utilizaremos archivos musicales con la extensión *.midi
El primer paso es guardar el archivo midi en el directorio de nuestra web C:miWeb. A
continuación nos iremos al menú Formato >> Fondo y en la pestaña “General” nos
fijaremos en la sección que pone “Sonido de fondo”. Haremos clic en Examinar y
buscaremos el archivo deseado.
Si queremos que la música se reproduzca siempre (constantemente) dejaremos marcada la
casilla “Siembre”, de lo contrario le indicaremos el número de veces que queremos que se
reproduzca en la casilla “Bucle”.
www.desenredate.com 27 de 28
Cómo hacer una página web con M. FrontPage 2000.
o Insertar una fecha automática
Para insertar una fecha y que ésta se actualice constantemente, utilizaremos un script
programado en Javascript. Un script es un fragmento de código que tendremos que insertar
en nuestra página web. Haremos lo siguientes pasos:
IR al menú Insertar >> Avanzadas >> HMTL
Y en la ventana que nos aparezca deberemos copiar el código del javascript, que en este
caso es el siguiente:
<script languaje="JavaScript">
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new
Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Novi
embre","Diciembre")
document.write("<small><font color='000080' face='Arial'>"+dayarray[day]+" "+daym+" de
"+montharray[month]+" de "+year+"</font></small>")
</script>
A continuación haga clic en Aceptar.
Para ver la fecha funcionando, deberá abrir la web con un navegador web:
FIN del Manual.
Espero que le haya sido de utilidad.
Espero sus comentarios, críticas, sugerencias en: editor@desenredate.com
Sebas GV.S Lunes, 09 de agosto de 2004. http:www.desenredate.com
www.desenredate.com 28 de 28

Weitere ähnliche Inhalte

Was ist angesagt?

Tutorial+google+sites castellano-completo
Tutorial+google+sites castellano-completoTutorial+google+sites castellano-completo
Tutorial+google+sites castellano-completocetei.fj23
 
Editar contenidos en Google Sites
Editar contenidos en Google SitesEditar contenidos en Google Sites
Editar contenidos en Google SitesRamón OVELAR
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas WebJose Casan
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio webtomyycerr
 
Tutorial Para Crear Tu Propia Pagina Web
Tutorial Para Crear Tu Propia Pagina WebTutorial Para Crear Tu Propia Pagina Web
Tutorial Para Crear Tu Propia Pagina WebnismoGSR
 
Mi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notasMi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notasJessi De Jesus Torres
 
Introducción a NVU
Introducción a NVUIntroducción a NVU
Introducción a NVUrestauracio
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverastridcmc
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de htmlalexander polanco
 
Ficha# 1 página y sitio web (1) (terminada)
Ficha# 1 página y sitio web (1) (terminada)Ficha# 1 página y sitio web (1) (terminada)
Ficha# 1 página y sitio web (1) (terminada)valenena8
 
Crear un proyecto de sitio web y una pagina web
Crear un proyecto de sitio web y una pagina webCrear un proyecto de sitio web y una pagina web
Crear un proyecto de sitio web y una pagina webMarvin Portillo
 

Was ist angesagt? (16)

Tutorial+google+sites castellano-completo
Tutorial+google+sites castellano-completoTutorial+google+sites castellano-completo
Tutorial+google+sites castellano-completo
 
Editar contenidos en Google Sites
Editar contenidos en Google SitesEditar contenidos en Google Sites
Editar contenidos en Google Sites
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
 
Tutorial Para Crear Tu Propia Pagina Web
Tutorial Para Crear Tu Propia Pagina WebTutorial Para Crear Tu Propia Pagina Web
Tutorial Para Crear Tu Propia Pagina Web
 
Mi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notasMi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notas
 
Introducción a NVU
Introducción a NVUIntroducción a NVU
Introducción a NVU
 
Front Page ==
Front Page ==Front Page ==
Front Page ==
 
Manual de nvu
Manual de nvuManual de nvu
Manual de nvu
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 
Adobe dreamweaver cs5
Adobe dreamweaver cs5Adobe dreamweaver cs5
Adobe dreamweaver cs5
 
Manual html
Manual htmlManual html
Manual html
 
Ficha# 1 página y sitio web (1) (terminada)
Ficha# 1 página y sitio web (1) (terminada)Ficha# 1 página y sitio web (1) (terminada)
Ficha# 1 página y sitio web (1) (terminada)
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Crear un proyecto de sitio web y una pagina web
Crear un proyecto de sitio web y una pagina webCrear un proyecto de sitio web y una pagina web
Crear un proyecto de sitio web y una pagina web
 

Andere mochten auch

Clase 8 post cosecha de las plantas medicinales
Clase 8 post cosecha de las plantas medicinalesClase 8 post cosecha de las plantas medicinales
Clase 8 post cosecha de las plantas medicinalesIgorVillalta
 
Lengua y su poder trifoliar escala de gris
Lengua y su poder trifoliar escala de grisLengua y su poder trifoliar escala de gris
Lengua y su poder trifoliar escala de grisasociacion
 
Upravljanje z energijo - Energetski management (Solvera Lynx)
Upravljanje z energijo - Energetski management (Solvera Lynx)Upravljanje z energijo - Energetski management (Solvera Lynx)
Upravljanje z energijo - Energetski management (Solvera Lynx)Metka Krznar
 
Mercy guacho ejercicios formulacion completo
Mercy guacho ejercicios formulacion completoMercy guacho ejercicios formulacion completo
Mercy guacho ejercicios formulacion completoMercy Guacho Tixi
 
Leeryescribirenlared0
Leeryescribirenlared0Leeryescribirenlared0
Leeryescribirenlared0kafir14
 
Makerspaces on CUNY Campuses
Makerspaces on CUNY CampusesMakerspaces on CUNY Campuses
Makerspaces on CUNY CampusesKindra Cooper
 
Triptico original 2
Triptico original 2Triptico original 2
Triptico original 2capi161
 
Pan de oro, Plata y Varigatos - Consejos
Pan de oro, Plata y Varigatos - ConsejosPan de oro, Plata y Varigatos - Consejos
Pan de oro, Plata y Varigatos - ConsejosCaridad Yáñez Barrio
 
eMobc - Desarrollo de aplicaciones móviles nativas con XML #OpenExpoDay 2014
eMobc - Desarrollo de aplicaciones móviles nativas con XML #OpenExpoDay 2014eMobc - Desarrollo de aplicaciones móviles nativas con XML #OpenExpoDay 2014
eMobc - Desarrollo de aplicaciones móviles nativas con XML #OpenExpoDay 2014OpenExpoES
 
Leaked google general guidelines for ads quality evaluation june 15 2011
Leaked google general guidelines for ads quality evaluation   june 15 2011Leaked google general guidelines for ads quality evaluation   june 15 2011
Leaked google general guidelines for ads quality evaluation june 15 2011Bitsytask
 

Andere mochten auch (19)

Verkaufstexte und Werbetexte für mehr Umsatz
Verkaufstexte und Werbetexte für mehr UmsatzVerkaufstexte und Werbetexte für mehr Umsatz
Verkaufstexte und Werbetexte für mehr Umsatz
 
Clase 8 post cosecha de las plantas medicinales
Clase 8 post cosecha de las plantas medicinalesClase 8 post cosecha de las plantas medicinales
Clase 8 post cosecha de las plantas medicinales
 
Lengua y su poder trifoliar escala de gris
Lengua y su poder trifoliar escala de grisLengua y su poder trifoliar escala de gris
Lengua y su poder trifoliar escala de gris
 
Upravljanje z energijo - Energetski management (Solvera Lynx)
Upravljanje z energijo - Energetski management (Solvera Lynx)Upravljanje z energijo - Energetski management (Solvera Lynx)
Upravljanje z energijo - Energetski management (Solvera Lynx)
 
Input PICTS Wampfler 2015
Input PICTS Wampfler 2015Input PICTS Wampfler 2015
Input PICTS Wampfler 2015
 
Mercy guacho ejercicios formulacion completo
Mercy guacho ejercicios formulacion completoMercy guacho ejercicios formulacion completo
Mercy guacho ejercicios formulacion completo
 
Leeryescribirenlared0
Leeryescribirenlared0Leeryescribirenlared0
Leeryescribirenlared0
 
Makerspaces on CUNY Campuses
Makerspaces on CUNY CampusesMakerspaces on CUNY Campuses
Makerspaces on CUNY Campuses
 
Diário Oficial
Diário OficialDiário Oficial
Diário Oficial
 
2 da clase artrología
2 da clase artrología2 da clase artrología
2 da clase artrología
 
Triptico original 2
Triptico original 2Triptico original 2
Triptico original 2
 
Pan de oro, Plata y Varigatos - Consejos
Pan de oro, Plata y Varigatos - ConsejosPan de oro, Plata y Varigatos - Consejos
Pan de oro, Plata y Varigatos - Consejos
 
Observaciones
ObservacionesObservaciones
Observaciones
 
eMobc - Desarrollo de aplicaciones móviles nativas con XML #OpenExpoDay 2014
eMobc - Desarrollo de aplicaciones móviles nativas con XML #OpenExpoDay 2014eMobc - Desarrollo de aplicaciones móviles nativas con XML #OpenExpoDay 2014
eMobc - Desarrollo de aplicaciones móviles nativas con XML #OpenExpoDay 2014
 
Lavadora Siemens WM14E47XES
Lavadora Siemens WM14E47XESLavadora Siemens WM14E47XES
Lavadora Siemens WM14E47XES
 
Diseño de locales comerciales por Fernando Mazzetti
Diseño de locales comerciales por Fernando MazzettiDiseño de locales comerciales por Fernando Mazzetti
Diseño de locales comerciales por Fernando Mazzetti
 
Prevención s.agustín
Prevención s.agustínPrevención s.agustín
Prevención s.agustín
 
Leaked google general guidelines for ads quality evaluation june 15 2011
Leaked google general guidelines for ads quality evaluation   june 15 2011Leaked google general guidelines for ads quality evaluation   june 15 2011
Leaked google general guidelines for ads quality evaluation june 15 2011
 
Piel y tatuajes
Piel y tatuajesPiel y tatuajes
Piel y tatuajes
 

Ähnlich wie Manual frontpage 2000

Ähnlich wie Manual frontpage 2000 (20)

Angie marti informatik
Angie marti informatikAngie marti informatik
Angie marti informatik
 
Mi primera pagina_web[1]
Mi primera pagina_web[1]Mi primera pagina_web[1]
Mi primera pagina_web[1]
 
Informatica frontpage
Informatica frontpageInformatica frontpage
Informatica frontpage
 
Microsoft frontpage
Microsoft frontpageMicrosoft frontpage
Microsoft frontpage
 
Informatica frontpage
Informatica frontpageInformatica frontpage
Informatica frontpage
 
MICROSOFT FRONTPAGE
MICROSOFT FRONTPAGEMICROSOFT FRONTPAGE
MICROSOFT FRONTPAGE
 
mS FP1
mS FP1mS FP1
mS FP1
 
Miprimerapagina
MiprimerapaginaMiprimerapagina
Miprimerapagina
 
Miprimerapagina
MiprimerapaginaMiprimerapagina
Miprimerapagina
 
Presentación post
Presentación postPresentación post
Presentación post
 
Adjuntos fichero 143604
Adjuntos fichero 143604Adjuntos fichero 143604
Adjuntos fichero 143604
 
Ejercicios
EjerciciosEjercicios
Ejercicios
 
Free webs go
Free webs go  Free webs go
Free webs go
 
Freewebs
FreewebsFreewebs
Freewebs
 
Microsoft frontpage
Microsoft frontpageMicrosoft frontpage
Microsoft frontpage
 
Guia de autoaprendizaje
Guia de autoaprendizajeGuia de autoaprendizaje
Guia de autoaprendizaje
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Taller de Dreamweaver 8
Taller de Dreamweaver 8Taller de Dreamweaver 8
Taller de Dreamweaver 8
 
Guia de aprendizaje
Guia de aprendizajeGuia de aprendizaje
Guia de aprendizaje
 

Mehr von Pilar del Valle

Mehr von Pilar del Valle (9)

Unidades de medición empleadas en calidad del aire
Unidades de medición empleadas en calidad del aireUnidades de medición empleadas en calidad del aire
Unidades de medición empleadas en calidad del aire
 
Sketchup.
Sketchup.Sketchup.
Sketchup.
 
Manual frontpage 2000
Manual frontpage 2000Manual frontpage 2000
Manual frontpage 2000
 
Trabajar con sketchup
Trabajar con sketchupTrabajar con sketchup
Trabajar con sketchup
 
Electricidad
ElectricidadElectricidad
Electricidad
 
Sketchup.
Sketchup.Sketchup.
Sketchup.
 
Páginas web
Páginas webPáginas web
Páginas web
 
Energías
EnergíasEnergías
Energías
 
Electricidad 3º eso
Electricidad 3º esoElectricidad 3º eso
Electricidad 3º eso
 

Kürzlich hochgeladen

Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...JAVIER SOLIS NOYOLA
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoJosDanielEstradaHern
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxnandoapperscabanilla
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdfenelcielosiempre
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Valoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVValoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVGiustinoAdesso1
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaDecaunlz
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónLourdes Feria
 

Kürzlich hochgeladen (20)

Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
ACERTIJO DE LA BANDERA OLÍMPICA CON ECUACIONES DE LA CIRCUNFERENCIA. Por JAVI...
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° grado
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdf
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
 
Valoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCVValoración Crítica de EEEM Feco2023 FFUCV
Valoración Crítica de EEEM Feco2023 FFUCV
 
Qué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativaQué es la Inteligencia artificial generativa
Qué es la Inteligencia artificial generativa
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
Estrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcciónEstrategia de prompts, primeras ideas para su construcción
Estrategia de prompts, primeras ideas para su construcción
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 

Manual frontpage 2000

  • 1.
  • 2. Cómo hacer una página web con M. FrontPage 2000. En este manual se va a explicar cómo hacer una página web con FrontPage 2000. Concretamente veremos los siguientes capítulos: 1. Introducción a los conceptos relacionados con el diseño de una página web. 2. Daremos un pequeño repaso al entorno de FrontPage - El espacio de trabajo. - La zona de los menú y opciones. - La zona de carpetas y archivos. - La zona de vistas 3. Cómo crear y definir un sitio web. 4. Cómo crear una página web dentro de nuestro sitio web. 5. Cómo insertar texto y darle formato. 6. Cómo insertar tablas y darles formato. 7. Cómo insertar imágenes. 8. Cómo crear Enlaces hipervínculos (internos y externos, email) 9. Cómo insertar otros elementos de un sitio web. Prólogo. A continuación les presento un manual realizado expresamente para los visitantes de mi sitio web www.desenredate.com que a base de peticiones han logrado que arrancase FrontPage y empezara a redactar estas líneas. Con este manual sólo pretendo dar unos pasos guiados con FrontPage para conseguir que personas inexpertas en el ámbito del desarrollo web logren hacerse su propia página web. El manual consiste en un viaje por FrontPage a través del cual se descubrirán los aspectos más básicos e imprescindible para hacer una página web sencilla y funcional. Durante el manual me he basado en un ejemplo que he ido utilizando en todos y cada uno de los capítulos de forma que, al finalizar el manual, se obtenga una página web completa. Este manual que está redactado y elaborado por Sebastián García-V.S no tiene copyright ni ningún tipo de derechos de autor. Su distribución es libre siempre y cuando no se altere su contenido sin el permiso del autor. Esta obra está disponible en el sitio web www.desenredate.com Agradecimientos a: A todos los visitantes de www.desenredate.com A todo aquel, que después de leer este manual, me mande una opinión, una crítica o sugerencia sobre el manual. Sebas G-V.S Email: [editor@desenredate.com ] Sitio web: [http://www.desenredate.com] Desde alguna IP de Internet, hoy lunes 18 de Agosto de 2004. Manual de FrontPage 2000. Versión 1.3 Agosto’2004. www.desenredate.com 1 de 28
  • 3. Cómo hacer una página web con M. FrontPage 2000. 1. Introducción a los conceptos básicos relacionados con el diseño de una página web. A continuación se van a comentar unos pequeños conceptos fundamentales para el desarrollo de un sitio web. Página web: Documento de un sitio Web escrito en el lenguaje HTML Sitio web: Página principal y sus otras páginas, gráficos, documentos, multimedia y otros archivos asociados que se almacenan en un servidor Web o en el disco duro de un equipo. HTML: (Lenguaje de marcado de hipertexto) Lenguaje estándar de marcas empleado para documentos del World Wide Web. Editor web: Programa utilizado para crear páginas web sin la necesidad de tener que aprender el lenguaje. Ejemplos: M. FrontPage 2000 y Macromedia Dreamweaver. Servidor: Máquina conectada a Internet que –entre otros servicios- ofrece albergue para páginas web haciendo que estén accesibles desde cualquier punto de Internet. Dirección URL: (Universal Resource Location / Localizador de recursos universal) Cadena que proporciona la dirección de Internet de un sitio Web o un recurso del World Wide Web, junto con el protocolo mediante el cual se tiene acceso al sitio o al recurso. El tipo más común de dirección URL es http://, que proporciona la dirección de Internet de una página Web. Otros tipos de dirección URL son gopher://, que proporciona la dirección de Internet de un directorio Gopher, y ftp://, que proporciona la ubicación de red de un recurso FTP. Ejemplos: http://www.desenredate.com , http://www.google.com Imagen: Archivo gráfico que se puede insertar en una página Web y mostrar en un explorador de Web. Existen diferentes formatos: GIF, JPEG, BMP, TIFF, WMF y PNG, entre otros. servidor Web utilizado para alojar el sitio Web. Propiedades: Características de un elemento del Web actual, como el título y la dirección URL de un Web o el nombre y el valor inicial de un campo de formulario. También puede especificar propiedades para elementos de página como tablas, gráficos y elementos activos. Proveedor de servicios Internet (ISP) En el ámbito del desarrollo de sitios web, se puede decir que un ISP es un proveedor de servicios para web. Los diferentes servicios que pueden ofrecer son: conexión a Internet, registro de dominio, hospedaje de sitios web, servicios de contadores de servicios, libros de visitas gratuitos, estadísticas para web, entre otros. www.desenredate.com 2 de 28
  • 4. Cómo hacer una página web con M. FrontPage 2000. 2. Daremos un pequeño repaso al entorno de FrontPage Primero ejecutaremos el programa Microsoft FrontPage y nos aparecerá el siguiente entorno de trabajo. Dentro del entorno de trabajo podemos distinguir 4 zonas: - El espacio de trabajo - La zona de los menú y opciones. - La zona de carpetas y archivos (de momento no está visible) - La zona de vistas (vista normal, vista html y vista previa) en forma de pestañas El espacio de trabajo será donde trabajemos desarrollando nuestra página web. Insertaremos texto, tablas, imágenes y otros elementos dándole formato. Este espacio de trabajo tiene ciertas similitudes con cualquier procesador de textos como Word y Abiword. www.desenredate.com 3 de 28
  • 5. Cómo hacer una página web con M. FrontPage 2000. En zona de los menú y opciones tenemos a nuestra disposición de una serie de comandos para poder realizar el sitio web. Al igual que otros programas, esta zona está compuesta por menús, sub-menús e iconos con los comandos de uso más frecuente. En Microsoft FrontPage hay 10 Menus. Opciones del menú de Microsoft FrontPage 2000: Archivo: Contiene opciones básicas como Abrir, Guardar, Guardar como, Configurar, Salir... Edición: Comandos más usados: Deshacer y Rehacer, copiar, cortar, pegar... Ver: Para abrir las diferentes vistas que tiene FrontPage. Insertar: Para insertar elementos como: imágenes, formularios, botones y otros componentes. Formato: Comandos para darle formato a nuestra web así como a los elementos que la componen. Herramientas: Contiene corrector ortográfico y otras opciones más avanzadas. Tabla: Comandos relacionados con las tablas: creación, modificación... Marcos: Comandos para cuando deseemos crear páginas web con marcos. Ventana: Para cambiar de ventana de trabajo. (ya que se pueden tener varios documentos abiertos) Ayuda: Al igual que otros programas, en este menú está la ayuda, un glosario e información de Microsoft FrontPage. www.desenredate.com 4 de 28
  • 6. Cómo hacer una página web con M. FrontPage 2000. La zona de carpetas y archivos En esta zona (que inicialmente no está visible porque todavía no hemos creado un sitio web) podremos observar en todo momento un listado de todas las carpetas y archivos que forman nuestro sitio web. Es importante que cualquier elemento, como por ejemplo las imágenes, que insertemos en nuestra web estén en esta carpeta y no en otras de nuestro computador. Por ejemplo, es interesante guardar todas las imágenes que usemos en una carpeta llamada “imágenes” o “images” (ésta última es creada automáticamente por FrontPage) La zona de vistas (vista normal, vista html y vista previa) www.desenredate.com 5 de 28
  • 7. Cómo hacer una página web con M. FrontPage 2000. La vista Normal es para desarrollar páginas web sin la necesidad de aprender el lenguaje HTML. Conforme vayamos trabajando en esta vista Normal, en la vista HTML se irá generando el código HTML de forma automática. En la Vista HTML también podremos crear o modificar páginas web, pero para ello deberemos conocer el lenguaje HTML. ( no es imprescindible usar esta pestaña) La vista previa es como una “presentación preliminar” de nuestro trabajo. Conforme vayamos trabajando en la vista Normal, podemos hacer con cierta frecuencia visitas a la vista Previa para ver el resultado de nuestro trabajo. 3. Cómo crear y definir un sitio web. Una vez nos hayamos familiarizado con el entorno de Microsoft FrontPage procedemos a definir un sitio web sobre el cual crearemos nuestras páginas. Microsoft FrontPage nos proporciona varios mecanismos para crear un sitio web. Ofrece entre otras opciones: - crear una web a través de plantillas - crear una web a través de un asistente - crear una web desde cero (Web vacío) En este tutorial, por decisión del autor, se considera que la mejor opción para entrar en el campo del desarrollo web es empezar con la opción “Web en Blanco”, y por ello en este tutorial se ha elegido dicha opción. Abrimos el programa FrontPage. Nos dirigimos al menú ARCHIVO, seleccionamos NUEVO y hacemos clic en WEB. Y en la ventana que nos aparece seleccionamos: Web Vacío Si nos fijamos a la derecha de la ventana veremos la ruta de nuestra web que genera por defecto FrontPage: C:miWeb y será en este lugar donde se vaya a guardar nuestra web. y hacemos clic en Aceptar. www.desenredate.com 6 de 28
  • 8. Cómo hacer una página web con M. FrontPage 2000. A partir de este momento nuestro sitio web queda definido. Hemos creado un sitio web en blanco y estará ubicado en C:miWeb Al haber creado el sitio web ha aparecido la “Vista Carpetas” en la que podemos observar que se han creado ciertas carpetas donde podremos guardar todos los elementos que compongan nuestro sitio web: páginas web, imágenes, música etc. (Si la “Vista Carpetas” no se visualizara, tendríamos que activarla en el menú VER >> Carpetas) Si nos fijamos, tenemos una carpeta llamada miWeb y dentro de ésta tenemos dos: _private e images. En este tutorial vamos a trabajar de la siguiente forma: Las páginas web que formen nuestro sitio web irán en la carpeta miWeb y las imágenes que utilicemos serán guardadas en images. La carpeta _private de momento no la utilizaremos. Por curiosidad, podemos entrar en MiPc >> C: >> y veremos la carpeta de nuestra web. Para mejorar nuestra práctica con las tareas de Abrir un sitio web, Guardar y Salir realizaremos los siguientes pasos: (teniendo todavía abierto el sitio web que acabamos de crear) 1. Menú Archivo >> Guardar (Para guardar los cambios) 2. Menú Archivo >> Salir (Para salir del programa) A continuación abriremos de nuevo nuestro sitio web para trabajar en él. Arrancamos FrontPage. 3. Menú Archivo >> Abrir web y en la ventana de exploración buscaremos la carpeta miWeb que está guardada en C:miWeb www.desenredate.com 7 de 28
  • 9. Cómo hacer una página web con M. FrontPage 2000. Con los pasos anteriores abrimos el sitio web al completo, con todas sus carpetas y archivos. Ya tenemos definido y creado nuestro sitio web, pero... ¡Está vacio! El siguiente trabajo es crear las páginas web que formarán nuestro sitio web. Como se ha comentado en el prólogo, en este tutorial se van a seguir los pasos para crear una página personal con las siguientes páginas: - Una página principal con información general del autor - Una página con los enlaces favoritos. - Una página con las aficiones del autor. - Una página para fotografías a modo de álbum. - Una página para un currículum vitae profesional. Como sistema de navegación (o exploración) de nuestro sitio web utilizaremos un menú que crearemos en la página principal para permitir desplazarnos por las diferentes páginas. El paso siguiente es crear nuestra primera página: la página principal. 4. Cómo crear una página web dentro de nuestro sitio web. Abrimos FrontPage. Abrimos nuestro sitio web: C:miWeb Y por defecto se nos abre una página en blanco llamada pagina_nueva_1.htm Primero y antes de todo, esta página en blanco la vamos a guardar como “index.html” ya que este es el nombre de archivo con el que se tienen que llamar las páginas principales de los sitios web. Esto lo hacemos de la forma siguiente: Menú Archivo >> Guardar como >> index.html www.desenredate.com 8 de 28
  • 10. Cómo hacer una página web con M. FrontPage 2000. Una vez hemos guardado la página index.html (la principal) le pondremos un título que será visible en la ventana del navegador cuando visitemos la web. Menú Formato >> Fondo >> Pestaña General >> en la casilla Título (que por defecto pone Pagina nueva 1) escribiremos el título de nuestra página, como por ejemplo: “Página personal de Sebas García” Hacemos clic en Aceptar y guardamos los cambios: Menú Archivo >> Guardar Para ver los cambios, vamos a abrir nuestra web con un navegador que tengamos instalado en nuestro PC (Internet Explorer, Mozilla, Netscape...). Esta opción está en el menú Archivo >> Vista previa en el navegador (De la lista de navegadores que aparezcan, haremos doble clic sobre el que queramos) www.desenredate.com 9 de 28
  • 11. Cómo hacer una página web con M. FrontPage 2000. Al hacer doble clic sobre el navegador deseado, se abrirá el navegador mostrando la página web. Aunque la página web está en blanco (porque todavía no hemos insertado nada) podemos observar como sí que aparece en la parte superior de la ventana el título que habíamos escrito en los pasos anteriores: A continuación insertaremos en la página principal texto, imágenes, tablas e hipervínculos. 5. Cómo insertar texto y darle formato. La forma de insertar texto es idéntica a la de cualquier procesador de texto. Consiste en situar el cursor en el lugar donde queramos que aparezca el texto, escribir el texto con el teclado y a continuación le daremos formato. En nuestra página vamos a insertar un título superior (a modo de encabezado), un párrafo intermedio de texto, y un texto final (a modo de pie de página). Teniendo abierta la página index.html colocaremos el cursor en la parte superior de la ventana y escribiremos una línea: “Bienvenidos a mi página web personal” A continuación le daremos formato: Seleccionamos la línea que hemos escrito y haremos clic en la opción Fuente del menú Formato. www.desenredate.com 10 de 28
  • 12. Cómo hacer una página web con M. FrontPage 2000. Y en la ventana de Fuente elegiremos: Fuente: Verdana Estilo de fuente: Negrita Tamaño: 5 Color: Azul marino Guardamos los cambios realizados: menú Archivo >> Guardar Es importante que cada vez hayamos realizamos varios pasos, guardemos el trabajo. Para dividir el encabezado del cuerpo central y del pie de página utilizamos las Líneas horizontales que proporciona FrontPage, que consisten como su nombre indica, en líneas horizontales útiles para dividir zonas de una web. Para ello, justo debajo del título que hemos hecho colocaremos el cursor. A continuación en el menú Insertar haremos clic en Línea Horizontal www.desenredate.com 11 de 28
  • 13. Cómo hacer una página web con M. FrontPage 2000. A continuación dejaremos una línea en blanco para crear un menú de navegación, pero como el menú lo realizaremos más hacia delante, de momento sólo dejaremos una línea en blanco. Para dejar este espacio en blanco, haremos clic en la opción “Salto de línea” del Menú Insertar. Después de dejar una línea en blanco, insertaremos otra Línea horizontal: en el menú Insertar haremos clic en Línea Horizontal Guardamos los cambios realizados: menú Archivo >> Guardar Ya hemos dejado un espacio separado por líneas horizontales para crear el menú que haremos más adelante (En la sección Insertar hipervínculos de este manual) Ahora insertaremos un párrafo de presentación para practicar con la inserción de texto y su formateo. Posicionaremos el cursor en la siguiente línea después de la última línea horizontal creada y escribiremos una presentación: “Hola, mi nombre es Sebastián García y os doy la bienvenida a mi web. Esta web es un ejemplo práctico del manual que estoy realizando en estos momentos sobre cómo hacer una página web con el editor FrontPage. Espero que os guste.” Seleccionamos el texto escrito, y en el menú Formato >> Fuente seleccionamos lo siguiente: Fuente: Arial Estilo de Fuente: cursiva Tamaño: 3 Color: negro Guardamos los cambios realizados: menú Archivo >> Guardar El siguiente paso será crear el pié de página o despedida. Pero antes deberemos dejar espacio para insertar posteriormente más contenido en nuestra web, como por ejemplo alguna foto nuestra. Para dejar el citado espacio libre, utilizaremos la opción “Salto de Línea” del menú Insertar. Este paso lo realizaremos 3 veces para dejar suficiente. (Aunque si no dejáramos suficiente, más tarde este espacio se podría ampliar) www.desenredate.com 12 de 28
  • 14. Cómo hacer una página web con M. FrontPage 2000. Insertaremos 3 Saltos de Línea. Guardamos los cambios realizados: menú Archivo >> Guardar Una vez hemos dejado el espacio en blanco para fotos y más texto, insertaremos una nueva línea Horizontal para dividir el pié de página del cuerpo central de la página: en el menú Insertar haremos clic en Línea Horizontal A continuación escribiremos el pié de página, como por ejemplo: “Página personal de Sebas García. © Fecha de creación 04 de Agosto de 2004.” Le daremos el siguiente formato: Fuente: verdana Estilo de Fuente: normal Tamaña: 1 Color: negro Guardamos los cambios realizados: menú Archivo >> Guardar Después de realizar todos los pasos anteriores, el resultado debería de ser similar a la imagen que se muestra a continuación: (sin las explicaciones en rojo) www.desenredate.com 13 de 28
  • 15. Cómo hacer una página web con M. FrontPage 2000. 6. Cómo insertar tablas y darles formato. Las tablas son estructuras de una página web con las que se puede distribuir contenido ordenadamente. A continuación crearemos una tabla para insertar una foto y un comentario. Para ello crearemos una tabla de 1 columna x 2 filas. Colocaremos el cursor en la línea siguiente debajo del párrafo del Cuerpo de la página. Y haremos clic (dejándolo presionado y sin soltar) en el Icono “Insertar Tabla”: cuando aparezcan las cuadrículas, (sin dejar de presionar el icono) seleccionaremos la primera casilla y a continuación (sin dejar de presionar el icono) bajaremos y seleccionaremos la casilla de abajo como indica la imagen siguiente: Icono “Insertar Tabla” cuadrículas www.desenredate.com 14 de 28
  • 16. Cómo hacer una página web con M. FrontPage 2000. Cuando tengamos seleccionadas las dos casillas dejaremos de presionar el icono, y nos aparecerá en el espacio de trabajo (donde habíamos dejado el cursor) una tabla de 1 columna x 2 filas (como la que habíamos seleccionado en el icono) Ahora le daremos formato a la tabla. Seleccionamos la tabla, y haciendo clic con el botón secundario del ratón (normalmente el derecho) nos aparecerá un cuadro de opciones: www.desenredate.com 15 de 28
  • 17. Cómo hacer una página web con M. FrontPage 2000. Hacemos clic en Propiedades de Tabla para que nos aparezca una ventana donde cambiar las propiedades de la tabla: En la ventana realizaremos los siguientes cambios: Alineación: Centro Especificar Ancho: 50 porcentaje Margen de celdas: 1 Espaciado entre celdas: 2 Bordes – Tamaño: 0 Y aceptos clic en Aceptar. Guardamos los cambios realizados: menú Archivo >> Guardar Al aplicarle los cambios a la tabla: le hemos reducido el tamaño, la hemos centrado y al ponerle los bordes igual cero hemos obtenido una tabla “invisible”. De esta forma estamos usando una tabla como contenedor de información pero que no es visible. Cuando le ponemos a una tabla los bordes igual a cero (para hacerla invisible) en nuestro espacio de trabajo (en la página de FrontPage) la veremos con los bordes punteados para facilitar nuestro trabajo, pero una vez visualicemos la web en un navegador web comprobaremos que la tabla no es visible. Otra forma de comprobar que nuestra tabla de “bordes punteados” no se verá en la web es desplazarnos a la pestaña VISTA HTML ya que esta vista actúa como un navegador web: www.desenredate.com 16 de 28
  • 18. Cómo hacer una página web con M. FrontPage 2000. Una vez hemos comprobado que nuestra tabla no se verá en el resultado final, podemos volver al espacio de trabajo en la pestaña Vista NORMAL: Una vez tenemos la tabla creada, insertaremos una imagen dentro de ella. Para ver cómo insertar una imagen leeremos el siguiente apartado. 7. Cómo insertar imágenes. Para insertar una imagen iremos al menú Insertar >> Imagen >> Desde Archivo Nos aparecerá una ventana donde tendremos que localizar la imagen que deseemos insertar. Si anteriormente la habíamos guardado en el directorio de nuestra web (en “images”) haremos doble clic sobre dicha carpeta para ver qué imágenes dispone. Cuando encontremos la que deseemos la seleccionamos y hacemos clic en Aceptar. www.desenredate.com 17 de 28
  • 19. Cómo hacer una página web con M. FrontPage 2000. Si por el contrario, la imagen no la habíamos guardado en el directorio de nuestra web, tendremos que explorar por nuestro computador hasta encontrar la imagen deseada. Ver la imagen siguiente: Cuando hayamos insertado una imagen, guardaremos los cambios: Archivo >> Guardar Como se ha comentado en líneas anteriores, cualquier elemento que insertemos en nuestras páginas web deberán estar guardados dentro de la carpeta de nuestro sitio web, en nuestro caso, se llamaba: C:miWeb Es muy recomendable, que todas las imágenes que utilicemos en nuestras páginas web estén guardadas en una carpeta específica para ellas. Cuando en el segundo apartado de este manual definimos nuestro sitio web, FrontPage nos creó automáticamente una carpeta llamada “images” y será aquí donde deberemos guardar todas las imágenes que vayamos a utilizar. Observando desde el explorador de Windows Explorando desde la “vista carpetas” de FrontPage www.desenredate.com 18 de 28
  • 20. Cómo hacer una página web con M. FrontPage 2000. FrontPage se asegura de que las imágenes que utilicemos están guardadas en la carpeta de nuestra web de dos formas dependiendo de dónde esté guardada nuestra imagen: La imagen que vamos a insertar está guardada en el directorio de nuestra web C:miWeb ó C:miWebimages En este caso FrontPage actúa con total normalidad al darse cuenta de que la imagen que se utiliza ya está dentro del directorio de la web, por lo tanto no hay ningún problema. La imagen que vamos a insertar NO está guardada en el directorio de nuestra web, es decir, el archivo está guardado en otro directorio como por ejemplo: el escritorio, Mis Documentos, un disquete.. etc. En este caso, cuando insertemos una imagen que, por ejemplo, esté en el escritorio, una unidad de disquete o en Mis Documentos FrontPage nos alertará de que esa imagen no está en el directorio de nuestra web, y por lo tanto nos da unas opciones para que le indiquemos en qué carpeta (de las que hay dentro de nuestro sitio web) deseamos que la guarde. Quiero remarcar que esta pregunta no nos la hará en el momento de insertar la imagen, sino que FrontPage la hace cuando guardemos (Menú Archivo >> Guardar) la página donde insertemos las imágenes Nos mostrará la siguiente ventana, en la que deberemos indicarle que la guardar en la carpeta “images”: 8. Cómo crear hipervínculos (enlaces internos, externos y mailto) Al hipervínculo se le suele llamar “enlace web” o en su versión anglosajona “link”. Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o una ubicación diferente en la misma página. El destino es con frecuencia otra página Web, pero también puede ser una imagen, una dirección de correo electrónico, un archivo (como por ejemplo, un archivo multimedia o un documento de Microsoft Office) o un programa. Un hipervínculo puede ser texto o una imagen. www.desenredate.com 19 de 28
  • 21. Cómo hacer una página web con M. FrontPage 2000. 4 tipos de hipervínculos: Enlaces internos: Este tipo de enlaces conducen a una página web dentro del mismo sitio web donde está el propio enlace. Enlaces externos: Este tipo de enlaces nos conducen a páginas web de sitios web ajenos al nuestro. Enlaces a archivos: Son enlaces que conducen a archivos que no son páginas web. Con este tipo de enlaces podemos permitir que el visitante de nuestra web se descargue archivos disponibles en nuestra web como por ejemplo archivos.zip , archivos.mp3 etc. Enlaces mailto: Al hacer clic sobre este tipo de archivos, al visitante se le abrirá una ventana con la cual desde su programa de correo podrá enviarnos un correo electrónico a la cuenta de correo que nosotros le especifiquemos. A continuación crearemos una página web especial para nuestros enlaces preferidos. Para ello, iremos al menú Archivo >> Nuevo >> Página; y en la ventana que se nos abre, en la pestaña General seleccionaremos “Página normal” y haremos clic en Aceptar. Antes de hacer nada sobre esta nueva página, la vamos a guardar dándole un nombre: Menú Archivo >> Guardar como : y en la casilla pondremos: enlaces.html Una vez guardada la página en nuestro directorio, le pondremos un título y un titular de página. Para el título haremos lo siguiente: Menú Formato >> Fondo >> Pestaña General >> en la casilla Título (que por defecto pone Pagina nueva 2) escribiremos el título de nuestra página, como por ejemplo: “Mis enlaces preferidos” A continuación insertaremos un titular de página. Para ello utilizaremos la herramienta texto: Teniendo abierta la página enlaces.html abierta, colocaremos el cursor en la parte superior de la ventana y escribiremos una línea: www.desenredate.com 20 de 28
  • 22. Cómo hacer una página web con M. FrontPage 2000. “Estos son mis enlaces preferidos” y le daremos formato: Fuente: verdana Estilo de Fuente: normal Tamaño: 5 A continuación insertaremos una línea horizontal: en el menú Insertar haremos clic en Línea Horizontal. Además insertaremos un “Salto de línea” para separar los contenidos: Menú Insertar >> Salto de línea >> Salto de línea normal. A continuación insertaremos una tabla para insertar los enlaces: Crearemos una tabla de 6 columnas x 3 filas. (Para 18 enlaces) A continuación le daremos formato: Seleccionamos la tabla que hemos creado y hacemos clic con el botón secundario del ratón (normalmente el derecho), en la ventana que nos aparece hacemos clic en el comando “Propiedades de Tabla”: En este caso elegimos: Especificar ancho: 100 (porcentaje) Margen de celdas: 0 Espacio entre celdas: 0 Bordes Tamaño: 3 Colores=> Borde claro: gris oscuro, Borde Oscuro: gris claro Hacemos clic en Aceptar y guardamos los cambios: menú Archivo >> Guardar. www.desenredate.com 21 de 28
  • 23. Cómo hacer una página web con M. FrontPage 2000. o Ahora insertaremos enlaces externos en la tabla: Ponemos el cursor dentro de la primera celda de la tabla y escribimos el texto que contendrá el enlace, por ejemplo: “Google” a continuación seleccionamos el texto que hemos escrito y hacemos clic en la opción Hipervínculo del menú Insertar. Nos aparecerá la siguiente ventana: En el cuadro de diálogo “Dirección URL” escribiremos la dirección de la web a la que queremos enlazar, en este caso sería: http://www.google.es En la opción “Marco de destino” seleccionaremos “Nueva ventana” y haremos clic en Aceptar. Esto es para que cuando el navegante haga clic en el enlace de Google se le abra una nueva ventana de navegador con la web de Google y no se salga de nuestra página personal. Repetiremos este paso hasta completar todos los enlaces que deseemos. Guardamos los cambios: menú Archivo >> Guardar o Ahora insertaremos un enlace interno: A continuación insertaremos un enlace interno, es decir, a una página de nuestro propio sitio web. En este caso, en la página enlaces.html insertaremos un enlace para poder regresar a la página principal index.html Para ello, pondremos el cursor debajo de la tabla, dejando una línea en blanco (Insertando un salto de línea normal). Escribiremos el siguiente texto “Volver a la página principal” Con formato: Fuente: verdana Estilo: Negrita y Tamaño: 3 Seleccionamos el texto, y en el menú Insertar hacemos clic en Hipervínculo. www.desenredate.com 22 de 28
  • 24. Cómo hacer una página web con M. FrontPage 2000. Ahora, en lugar de poner la dirección URL, como muestra la siguiente imagen: haremos clic con el ratón en el icono que representa la página index.html Además, en la opción “Marco de destino” seleccionaremos: Mismo Marco (Esto es para permitir al visitante de nuestra web navegar por nuestro sitio web con una sola ventana de navegador web) A continuación haremos clic en Aceptar y guardamos los cambios realizados (menú Archivo >> Guardar) Para comprobar nuestro trabajo, podemos visualizarlo en el navegador: Menú Archivo >> Vista previa en el explorador ó bien haciendo clic en el icono: Si se ha realizado los mismos pasos que en este tutorial, el resultado obtenido tendría que ser similar a esta imagen: www.desenredate.com 23 de 28
  • 25. Cómo hacer una página web con M. FrontPage 2000. Ahora insertaremos un enlace en la página index.html que apunte a la página enlaces.html. Los pasos son los mismos que los vistos anteriores. El enlace lo insertaremos en el espacio que dejamos anteriormente para el menú (recuerdo que era entre las dos líneas horizontales debajo del titular), y el texto será “Mis enlaces preferidos” con hipervínculo al documento web enlaces.html tal y como se muestra en la siguiente imagen. www.desenredate.com 24 de 28
  • 26. Cómo hacer una página web con M. FrontPage 2000. o Hipervínculos a archivos que NO son páginas web. Para insertar enlaces a archivos que no son páginas web (documentos html) como por ejemplo ficheros.zip, archivos.mp3 ..., el proceso es idéntico al de crear un enlace interno, pero en lugar de seleccionar un documento *.html seleccionaremos el fichero que queremos enlazar. Antes de crear el vínculo deberemos asegurarnos de que el fichero que queremos enlazar está dentro del directorio web C:miWeb Ejemplo visual: o A continuación insertaremos un hipervínculo “Mailto” Como se comentó anteriormente, al hacer clic sobre un enlace de tipo “mailto” provoca que se abra una ventana del cliente de correo configurado por el visitante para poder mandarnos un correo a la dirección de correo-e que nosotros le indiquemos. Pasos: En el documento index.html justo debajo de la tabla donde insertamos una imagen, vamos a escribir el siguiente texto: “Mándame un email” con el siguiente formato: Fuente: verdana Tamaña: 2 Estilo: negrita Color: Azul Seleccionamos el texto, y hacemos clic en el comando Hipervínculo del menú Insertar. Cuando nos aparezca la ventana “crear vínculo” haremos clic en el icono : (Para localizar este icono ver la siguiente imagen) www.desenredate.com 25 de 28
  • 27. Cómo hacer una página web con M. FrontPage 2000. Al hacer clic sobre el icono con forma de carta, nos aparecerá una ventana donde deberemos escribir la dirección de email donde queremos recibir los mensajes que nos envíen los visitantes de nuestra web. Una vez la hayamos escrito, haremos clic en Aceptar en esta ventana, y en la otra de “Crear vínculo”. Guardamos los cambios: menú Archivo >> Guardar. En este punto del tutorial, ya sabemos definir un sitio web y crear páginas web dentro de él con texto, tablas, imágenes e hipervínculos. El siguiente paso consistirá en crear otras páginas según nuestras necesidades. Al tratarse de una página personal se podría –por ejemplo- crear una página para hablar de nuestras aficiones, otra para poner nuestro currículo, otra para poner nuestras fotos personales... En todas estas páginas se deberá cumplir lo siguiente: - Todas tendrán un título - Todas deberán tener un titular en la parte superior de la web - Todas tendrán un enlace para poder regresar a la página principal - Se recomienda utilizar Líneas Horizontales para separar secciones Resultado: www.desenredate.com 26 de 28
  • 28. Cómo hacer una página web con M. FrontPage 2000. 9. Cómo insertar otros elementos de un sitio web. A continuación veremos cómo insertar otro tipo de elementos a nuestra página web. o Insertar música de fondo. El formato recomendado para usar como fondo musical es una página web es el Formato MIDI. Es decir, utilizaremos archivos musicales con la extensión *.midi El primer paso es guardar el archivo midi en el directorio de nuestra web C:miWeb. A continuación nos iremos al menú Formato >> Fondo y en la pestaña “General” nos fijaremos en la sección que pone “Sonido de fondo”. Haremos clic en Examinar y buscaremos el archivo deseado. Si queremos que la música se reproduzca siempre (constantemente) dejaremos marcada la casilla “Siembre”, de lo contrario le indicaremos el número de veces que queremos que se reproduzca en la casilla “Bucle”. www.desenredate.com 27 de 28
  • 29. Cómo hacer una página web con M. FrontPage 2000. o Insertar una fecha automática Para insertar una fecha y que ésta se actualice constantemente, utilizaremos un script programado en Javascript. Un script es un fragmento de código que tendremos que insertar en nuestra página web. Haremos lo siguientes pasos: IR al menú Insertar >> Avanzadas >> HMTL Y en la ventana que nos aparezca deberemos copiar el código del javascript, que en este caso es el siguiente: <script languaje="JavaScript"> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado") var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Novi embre","Diciembre") document.write("<small><font color='000080' face='Arial'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+"</font></small>") </script> A continuación haga clic en Aceptar. Para ver la fecha funcionando, deberá abrir la web con un navegador web: FIN del Manual. Espero que le haya sido de utilidad. Espero sus comentarios, críticas, sugerencias en: editor@desenredate.com Sebas GV.S Lunes, 09 de agosto de 2004. http:www.desenredate.com www.desenredate.com 28 de 28