Manual frontpage 2000

Cómo hacer una página web con M. Front000.

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: [[email protected] ]

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.



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.



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.



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)



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.



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



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



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)



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.



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



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)



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)



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



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:



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:



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.



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


Cómo hacer una página web con M. Front00.

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:\miWeb\images 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.



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:



“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.



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.



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:



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.



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)



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:



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”.



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","Noviembre","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: [email protected] Sebas GV.S Lunes, 09 de agosto de 2004. http:www.desenredate.com


Manual frontpage 2000

Education

Transcript of Manual frontpage 2000