Mantenimiento de páginas Web con FrontPageformacion.desarrollando.net/cursosfiles/formacion/... · Mantenimiento de páginas Web con FrontPage 4 Zona de trabajo Es la parte de la

Mantenimiento de páginas Web con FrontPage 1

Mantenimiento de páginas Web con FrontPage


Lección 1 La ventana de FrontPage

Para abrir "Microsoft FrontPage", pulsa el botón "Inicio", desplázate al grupo "Programas", sitúate sobre "Microsoft Office" y selecciona "Microsoft FrontPage".

Una vez has pulsado sobre dicha opción, aparecerá la siguiente ventana...


Barra de título

En ella se muestra el nombre del programa y el del sitio o página web que estamos creando.

Barra de menú

Como en todas las aplicaciones contiene las opciones que nos permiten manejar el programa.

Barra de herramientas “Estándar”

Incluye una serie de botones que nos permiten realizar las operaciones habituales de abrir, guardar, imprimir, copiar y pegar…

Si estás acostumbrado a utilizarla y no se muestra en pantalla, puedes seleccionar la opción del menú “Ver, Barras de herramientas” y activar la opción “Estándar”.

Barra de herramientas “Formato”

Si has manejado otros programas de “Microsoft” sabrás que, en ella, se encuentran muchas de las funciones que nos permiten modificar el aspecto del texto incluido en el documento (en este caso Web).

Al igual que te he comentado con la barra “Estándar”, si no la ves en pantalla puedes seleccionar la opción del menú “Ver, Barras de herramientas” y activar la opción “Formato”.

Panel de tareas

Otro de los componentes que aparece habitualmente en los programas de Microsoft. En él se mostrarán una serie de opciones que irán variando dependiendo de la tarea que estemos realizando.

Puedes visualizarlo u ocultarlo desde la opción del menú “Ver, Barras de herramientas, Panel de tareas”.

Vistas

Nos permite visualizar el contenido de la página o su código HTML.

Barra de estado

En ella se nos da información acerca de la página.


Zona de trabajo

Es la parte de la ventana en la incluiremos todos los contenidos de la página Web (texto, imágenes…)

Dependiendo de la vista elegida, se mostrarán los contenidos o el código HTML generado.


Lección 2 Creación de un s i t io Web

Un “Sitio Web” es un conjunto de páginas enlazadas entre sí.

Aunque, al abrir FrontPage, se muestra una página en blanco desde la que ya puedes trabajar, te recomiendo que, cuando quieras realizar un proyecto Web, comiences por la creación y definición del “sitio”.

Para ello, pulsa sobre el botón “Nuevo” y selecciona “Sitio Web”…

El aspecto de la ventana de FrontPage cambia…

De momento se muestra el mismo contenido en la parte izquierda “Lista de carpetas” y en la parte derecha “Contenido del sitio”. Si te das cuenta, FrontPage ha creado una página nueva denominada “index.htm”. Este es el nombre que daremos a la página principal de cada uno de nuestros sitios Web. Además ha creado, entre otras, una carpeta denominada “images” en la que nos acostumbraremos a guardar todas las imágenes que utilicemos en las diferentes páginas que conformes nuestro “Sitio Web”.


Está claro que, antes de abrir FrontPage y ponernos a trabajar con él, debemos tener claro el tema sobre el que tratará nuestro sitio Web, las páginas que lo compondrán y el contenido de cada una de ellas.

Te recomiendo que, sobre papel, hagas una especie de croquis de la estructura y contenido del sitio. Nosotros, para el ejemplo, vamos a crear un sitio Web en el que hablaremos de ese preciado hongo que es el “Boletus Edulis” (no se me ocurría otra cosa).

El sitio constará de cinco páginas, una inicial, en la que pondremos un título, una breve descripción, una imagen y enlaces al resto de las páginas del sitio que serán “Dónde y cuándo se puede encontrar”, “Sus dimensiones”, “Características comestibles” y una “Guía para su determinación”.

Pues nada, vamos a empezar…


Lección 3 Creación de una página Web

Comenzamos creando la página inicial del sitio. Para ello haz doble clic sobre la página “index.htm”. Verás que se crea una nueva “solapa” en la parte derecha de la ventana.

Antes de incluir el contenido de la página vamos a establecer alguna de sus propiedades (título, colores,…). Selecciona la opción del menú “Formato, Propiedades”.

En la ficha “General” nos limitaremos a ponerle título a la página. El título se mostrará en la “Barra de título” del navegador a la hora de visualizar la página en él.

Si pulsas sobre la pestaña “Formato”…


Nos encontramos con la posibilidad de establecer colores para el fondo, el texto y los enlaces de nuestra página. Estos colores serán los predeterminados, después podremos modificarlos a nuestro antojo. No tengo que decirte que selecciones colores que no se confundan entre ellos.

Para los enlaces o hipervínculos se nos muestran sus tres estados (normal, visitado y activo). Yo he seleccionado los colores clásicos pero, puedes elegir los que vayan más a juego con el contenido de la página.

Una cosa, te recomiendo que no dejes nada en “Automático” ya que, si eliges esta opción, los colores se adaptarán a los que el usuario que visite tu Web tenga predeterminados en su equipo.

De momento nos olvidamos de la “Imagen de fondo”. Ya hablaremos de ello.

Bueno, vamos con el contenido. Introduce el siguiente texto…


Si te fijas en la “solapa” aparece un asterisco a la derecha de “index.htm”. Esto quiere decir que ha habido cambios en la página desde la última vez que fue guardada. Con esto te quiero decir que, cada cierto tiempo, guardes la página. Para ello no tienes más que pulsa el botón “Guardar” o seleccionar la opción “Archivo, Guardar”.

Guardar

Aunque, de momento, poco hemos hecho, puedes visualizar la página en el navegador pulsando la tecla “F12” o el botón…

Vista previa

Para modificar el aspecto del texto (tipo de letra, tamaño, color,…) puedes utilizar las funciones de la barra de herramientas “Formato”…

En cuanto al aspecto de la letra, tienes más opciones si acudes a “Formato, Fuente” en el menú de opciones…

Un consejo, no elijas tipos de letra raros ya que el visitante de tu página puede que no los tenga instalados en su ordenador y no visualizará la página tal y como tú quieres.


En cuanto al aspecto de los párrafos (alineaciones, interlineado,…) puedes seleccionar la opción del menú “Formato, Párrafo”…

La “Sangría” es el espacio que habrá desde los márgenes al texto.

Modifica el aspecto del contenido de la página para que quede, más o menos, así.

No te fíes de cómo queda en la ventana de FrontPage. Pulsa “F12” y la visualizas en el navegador. Allí verás cómo realmente te va a quedar.

Guarda la página que continuamos…


Te voy a ayudar a crear la segunda página de nuestro sitio y, el resto, te dejaré que las crees tú.

Pulsa el botón “Nuevo” de la barra de herramientas “Estándar”

Crear una página normal nueva

Aparece una nueva solapa…

Lo primero guardaremos la página y la llamaremos “donde.htm” (acostúmbrate a hacer esto siempre, guardar la página nada más crearla). Pulsa el botón “Guardar”…

No sé si te habrás dado cuenta pero, a la hora de crear un “Sitio web”, FrontPage crea una carpeta dentro de “Mis documentos” con el nombre “misitiox”. Así, cuando guardes algo o quieras utilizarlo, ya sabes dónde tienes que buscar.

¡Ah! Se me olvidaba, utiliza nombres de archivos cortos, sin espacios en blanco ni caracteres raros.

Modifica las “Propiedades de la página” tal y como hemos hecho con la anterior y, seguidamente, introduce este texto y lo dejas, más o menos, como…


Guarda la página y realiza la práctica que se propone a continuación.


Lección 4 Hipervínculos

Un hipervínculo es un enlace a una dirección o un recurso. En una página web podemos establecer vínculos a:

• Una dirección de Internet. • Una página perteneciente a nuestro sitio web. • Una posición dentro de la página. • Una dirección de correo electrónico. • Un archivo.

Para establecer un vínculo en un elemento de nuestra página, seleccionamos dicho elemento y pulsamos el botón “Insertar hipervínculo” de la barra de herramientas “Estándar”.

Insertar hipervínculo

En la casilla “Dirección” del cuadro de diálogo que aparece escribiremos la URL (dirección del enlace) correspondiente.

Ejemplos:

• Una dirección de Internet (http://www.google.es) • Una página perteneciente a nuestro sitio web (caracteristicas.htm) • Una posición dentro de la página (#guia) • Una dirección de correo electrónico (mailto:[email protected]) • Un archivo (caracteristicas.pdf)


Para practicar, crea una página en la que se muestren una serie de enlaces a sitios que tengan relación con el tema tratado (los puedes buscar en Internet). Añade en ella un enlace a una dirección de correo electrónico. Por ejemplo…

Pulsa la tecla “F12” para cargar la página en el navegador y probar los enlaces que has creado.

Una cosa, si quieres que la página a la que va direccionado el enlace se abra en una ventana nueva, deberás pulsar el botón “Marco de destino” del cuadro de diálogo “Insertar hipervínculo” y seleccionar la opción “Nueva ventana”…

A la página creada le puedes poner como nombre “enlaces.htm”.

En el sitio web que tenemos de ejemplo, los enlaces harán referencia a páginas pertenecientes al propio sitio. Vamos a probar.


Abre la página “index.htm”, selecciona el texto “Dónde y cuándo” y pulsa el botón “Insertar hipervínculo”…

Para establecer el enlace no tienes más que seleccionar la página a la que lo quieres direccionar (en este caso “donde.htm”).

Una vez establecido observarás que se muestra subrayado y con el color que establecimos en las “Propiedades de la página”. Pulsa “F12” para comprobar que funciona correctamente.

Si es así, comprobarás que necesitamos regresar a la página inicial, por lo tanto, habrá que asignar un enlace a “index.htm” al texto “Volver”…

Pues nada, establece todos los enlaces que faltan y comprueba que funcionan correctamente. ¡Ah! En la página inicial habrá que crear otro enlace a la página “enlaces.htm” y un “Volver” en dicha página.

¡Suerte!


Lección 5

Inserc ión de imágenes

Está claro que, en cualquier página web, hay alguna imagen. Por ejemplo...

Pues bien, para insertar una imagen en nuestra página podemos hacer lo siguiente...

1. Situarnos en la posición en la que queremos que se muestre la imagen y seleccionar la opción del menú "Insertar, Imagen, Desde archivo" o pulsar el botón “Insertar imagen desde archivo” de la barra de herramientas “Estándar”.

Insertar imagen desde archivo


Seleccionamos la imagen que nos interesa y pulsamos el botón "Insertar".

Las imágenes que vayamos a utilizar en nuestras páginas deberán estar almacenadas en la carpeta “images” correspondiente al sitio Web en el que

estamos trabajando.

2. Otra posibilidad es "arrastrar" la imagen desde la “Lista de carpetas” hasta el documento.

Guarda esta imagen en la carpeta “images” del sitio y la insertas en la página “index.htm” para que quede como en el ejemplo.


Propiedades de imagen

Si haces doble clic en la imagen insertada se mostrará el siguiente cuadro de diálogo.

Desde él podrás variar el tamaño de la imagen modificando su “Ancho” y “Alto”. Te recomiendo que mantengas activada la casilla “Conservar relación de aspecto” ya que, así, se mantendrán sus proporciones.

También te recomiendo que no aumentes su tamaño ya que perderá calidad.

Para probar el resto de opciones, abre la página “donde.htm” e inserta esta imagen…


De momento te quedará así.

Puedes hacer que el texto que la acompaña se distribuya por su izquierda o por su derecha (Estilo de ajuste) y determinar el espacio que habrá entre dicho texto y la imagen (Espacio horizontal y espacio vertical).


Así que, modifica las propiedades para que quede, más o menos, así.

Si, en el cuadro de diálogo “Propiedades de imagen”, pulsas sobre la pestaña “General”, te encontrarás con la posibilidad de introducir el llamado “Texto alternativo”. Este texto se mostrará en caso de que, por cualquier cosa, la imagen no se vea en la página. En caso de verse correctamente la imagen, el texto alternativo se mostrará en una etiqueta amarilla al pasar con el ratón sobre ella.


Además podrás asignar un enlace a la imagen seleccionada en la casilla “Ubicación”.

Una vez que conoces la forma de insertar imágenes y de modificar sus propiedades ya puedes realizar la siguiente práctica propuesta.


Lección 6 Creación de tablas

Para "maquetar" correctamente el contenido de nuestras páginas, es imprescindible la utilización de tablas mediante las que combinaremos y organizaremos los diferentes elementos que las componen.

Es muy conveniente haber dibujado en papel una especie de boceto inicial de la página que vayamos a crear. De esta manera, en el momento de abrir FrontPage y ponernos a crear la página, tenemos ya una idea y una estructura clara de la misma.

Pues bien, en dichos bocetos no pueden faltar tablas. Vamos a crear la siguiente tabla...

Abre la página “index.htm”, borra los enlaces que hay en su parte inferior y selecciona la opción del menú “Tabla, Insertar, Tabla”.

Desde esta ventana indicaremos el nº de filas y columnas que va a tener la tabla, su anchura (en píxeles o en porcentaje con respecto a la ventana en la que esté contenida). Si eliges como medida píxeles, su anchura será fija y, si eliges porcentaje, la anchura variará dependiendo del tamaño de la ventana. También


puedes establecer la alineación de la tabla con respecto a los márgenes de la página, el espacio entre los bordes y el contenido de las celdas (Margen de celdas), la distancia entre una celda y otra (Espaciado entre celdas), el grosor de los bordes y su color así como el color de fondo.

Para el ejemplo he establecido las propiedades que puedes ver en la imagen anterior.

Una vez creada la tabla puedes hacer modificaciones en ella seleccionando la opción del menú “Tabla, Propiedades de tabla, Tabla”.

Si lo que quieres modificar, en lugar de afectar a la tabla, quieres que afecte a sus celdas, selecciona las celdas que te interese modificar y acude a la opción del menú “Tabla, Propiedades de tabla, Celda”…

Pues bien, retoca la tabla para que quede así. Me temo que vas a tener que establecer los enlaces a los textos de la tabla. Bueno, así practicas.


Esa línea punteada que ves significa que el grosor de los bordes es 0. Por supuesto que, si la cargas en el navegador, ese punteado no se verá.

Para insertar o eliminar celdas, filas o columnas, unir o dividir celdas y otras posibilidades de modificación de la estructura de la tabla, puedes seleccionar la opción del menú “Tabla”.

Ejemplo:

Partiendo de una tabla de 3 filas y 3 columnas y, uniendo y dividiendo celdas, he llegado hasta aquí…

Date cuenta de las posibilidades de organizar el contenido de nuestras páginas que se nos ofrecen mediante la creación de tablas.


Lección 7 Publ icac ión del s i t io

El fin de la creación de un sitio Web es su publicación en Internet para que pueda ser visitado por cualquier persona con conexión a la Red.

Lo primero que debemos hacer es conseguir un espacio de publicación en algún proveedor de servicios de Internet. Este tipo de espacios pueden ser gratuitos o de pago.

En nuestro caso, conseguiremos un espacio de publicación gratuito.

¡No te aseguro que, cuando estés realizando el curso, el servidor al que vamos a acceder esté disponible! De todas formas, los pasos a seguir suelen ser parecidos

en otras páginas que ofrecen servicios de este tipo.

La dirección en la que he encontrado la posibilidad de conseguir un espacio gratuito para publicar nuestro sitio web es:

http://web.iespana.es

Una vez accedes a la página, en la parte superior hay un apartado dedicado a Servicios. Pulsa sobre el enlace a Web. Te llevará a otra página en la que encontrarás lo siguiente…


Si quieres leer lo que pone… bien, si no, pulsa el botón “Inscribirse”…

Deberás rellenar el formulario que aparece. Los datos importantes son “Nombre de usuario” y “Contraseña”.

¡Los datos que he utilizado son para el ejemplo. Por supuesto, tú deberás introducir datos diferentes!

Rellena la información que se te solicita y pulsa el botón “Accede inmediatamente a tus servicios”. En la página que se muestra, pulsa el botón “Acceder al sitio Web”.

Dentro de la página, se muestra un botón para activar el sitio…

Púlsalo y ten un poco de paciencia hasta que se muestre el siguiente mensaje.


Pues ya hemos conseguido el espacio en el que alojaremos nuestro sitio Web. Ahora, desde FrontPage, nos conectaremos y colocaremos nuestras páginas en él.

Una vez en FrontPage, abre el sitio que hemos creado en el curso…

Y pulsa el botón “Publicar sitio”.

Se muestra el siguiente cuadro de diálogo…

El envío de nuestras páginas al servidor de publicación lo vamos a realizar utilizando el protocolo de transferencia de archivos (FTP). Este protocolo permite el envío y recepción de archivos entre ordenadores remotos.

Activa la opción “FTP” e introduce el dato de ubicación que se te proporcionó al darte de alta en el proveedor de servicios Web iespana.

Tal y como te indicaba dicho proveedor, activa la casilla “Usar FTP pasivo” y pulsa el botón “Aceptar”.


A continuación se solicita el usuario y la contraseña. Son datos que introdujiste a la hora de darte de alta. De todas formas, en el último paso de la consecución del espacio de publicación, te los dieron. En el caso del ejemplo…

Pulsa el botón “Aceptar” y, si los datos que has introducido son correctos, la ventana de FrontPage se muestra de la siguiente forma…

Ahora se trata de enviar los archivos al servidor. Selecciónalos en la parte izquierda (Sitio Web local), incluyendo la carpeta “images” y pulsa el botón con la flecha azul…


Si han sido enviados correctamente los podrás ver en la zona derecha de la ventana (Sitio Web remoto).

Pues ¡ya está! Sólo queda comprobar que puedo acceder a mi sitio a través de Internet. Abre el navegador y teclea la dirección que se te proporcionó al darte de alta. En mi caso:

http://frontpagepractica.iespana.es/

Verás que han incluido publicidad en nuestras páginas pero… recuerda que el sitio que hemos conseguido era GRATUITO.

A partir de este momento, si haces modificaciones en las páginas del sitio deberás volver a enviarlas al espacio de publicación siguiendo los pasos anteriores.

Bueno, imagino que si no habías creado una Web, te habrá entrado el gusanillo. Debido a la corta duración del curso, digamos que te he introducido en la creación de páginas. De todas formas, si estás acostumbrado a utilizar programas como, por ejemplo Word, no te costará mucho crear páginas mucho más bonitas con FrontPage.

Un saludo.

Documents

Mantenimiento de páginas Web con FrontPageformacion.desarrollando.net/cursosfiles/formacion/... · Mantenimiento de páginas Web con FrontPage 4 Zona de trabajo Es la parte de la