edición de pág. web con ms frontpage.
Anuncio
EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre EDICIÓN DE PÁG. WEB CON MS FRONTPAGE. Microsoft FrontPage es una editor de páginas Web, es decir, un programa que crea el código HTML (Hipertext Markup Language), el lenguaje de programación del hipertexto, de la página web que nosotros vemos en pantalla, conforme la vamos creando. Entre otras, tiene dos ventajas y dos inconvenientes frente a la creación directa en HTML. FrontPage no nos exige el conocimiento del lenguaje HTML y además nos permite la visualización de la página tal y como quedará conforme se va creando. En su contra, genera mucho “código basura” que ocupa espacio sin aportar demasiado (directamente con HTML se usaría menos código para hacer lo mismo), y permite menos posibilidades para la página que el uso directo del lenguaje. 1.- ACCIONES PREVIAS A LA CREACIÓN DEL SITIO WEB Antes de comenzar la creación de nuestra página web, hay que tener en cuenta los siguientes puntos: 1.- Para que nuestra página sea visualizada por cualquier internauta, todos los ficheros de texto, imagen, vídeo, sonido,… que la componen deben estar ubicados en el disco duro del servidor. Por ello, debemos, en primer lugar, crear una carpeta propia específica en la que colocar todos los ficheros que se vayan generando para nuestra página. De esta forma, al transferir la página al servidor nos aseguraremos que no nos dejamos ningún archivo (si lo hiciéramos, la página no funcionaría), transfiriendo la carpeta completa. 2.- Cuando se “sube” la página web al servidor (se transfieren los archivos que la componen al disco duro del servidor), no se van a reconocer referencias a lugares de nuestro ordenador. Es decir, si en alguna parte de la página web hay un vínculo interno que apunta a un fichero contenido en otra carpeta distinta de nuestra carpeta de trabajo, una vez en el servidor, no se va a localizar. Además, si creamos el vínculo antes de meter a la carpeta de la página el archivo al que apunta, aunque lo hagamos después, el vínculo se ha creado con la referencia a la primera ubicación, por lo que, una vez en el servidor, no va a ser reconocido, y la página no funcionará. Por lo tanto, cada vez que en alguno de los archivos de nuestro sitio web creamos un vínculo, debemos asegurarnos de que la página a la que apunta ya está dentro de nuestra carpeta de trabajo, pues de esta forma creamos una referencia relativa, que será reconocible una vez que todas las carpetas estén en el servidor. Si el fichero al que apunta el vínculo está fuera de esta carpeta, se crea una referencia absoluta que, una vez esté la información en el servidor, no permitirá la visualización de la página, pues buscará el fichero en un directorio de nuestro disco duro, inexistente en el del servidor. O sea, conviene crear primero en blanco todas las páginas que se vayan a usar, y todas dentro de la carpeta de trabajo. Después, ya se irán “rellenando”. Así estaremos seguros de que todas las referencias sean relativas. 3.- Como las páginas Web son ficheros de texto que contienen código HTML, realmente nunca contienen ni imágenes, ni sonidos, ni vídeos. Lo que ocurre IES Salvador Victoria Monreal del Campo – Teruel EDICIÓN DE PÁGINAS WEB www.educa.aragon.es/iesmonre cuando se inserta alguno de estos elementos multimedia es que, en el código HTML, se crea una referencia a un archivo que contiene la imagen ó el sonido ó el vídeo. Por lo tanto, es imprescindible incluir en la carpeta de trabajo los ficheros que contienen todos los elementos multimedia de la página para que también sean transferidos al servidor y, por lo tanto, localizados cuando se requiera su visualización. 2.- LA PANTALLA PRINCIPAL DE FORNTPAGE EXPRESS El aspecto de la pantalla de nuestro editor de páginas web es bastante similar al de un editor de texto. Únicamente comentaremos las tres pestañas que aparecen en la parte inferior izquierda: Ofrece la vista de “editar la página, con la que normalmente trabajaremos Ofrece el código HTML que se va generando Ofrece la vista navegable. Es preferible abrir la página con el navegador a través del botón correspondiente 3.- ASPECTOS MÁS UTILIZADOS DE LA BARRA DE MENÚS Vamos a estudiar brevemente cada algunos de los menús que nos ofrece esta barra. 3.1.- MENÚ ARCHIVO 3.1.1.- NUEVA / PÁGINA Esta selección abre la siguiente ventana: Esta opción crea una web sencilla. Es más cómodo usar el botón de la barra de estándar: La pestaña Páginas de marcos la veremos más adelante 3.1.2.- NUEVO / ABRIR – GUARDAR – GUARDAR COMO… Estas opciones son similares a las del editor de texto Word. EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre 3.1.3.- NUEVO / PROPIEDADES Abre una ventana con varias pestañas. Las más interesantes son tres: EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre 3.2.- MENÚ VER Nos permite controlar las ventanas que vemos. Para un trabajo má cómodo, conviene cerrarlas todas, excepto “página”. 3.3.- MENÚ INSERTAR Entre los elementos que se pueden insertar en una página web, destacaremos los siguientes: 3.3.1.- IMAGEN Se insertan las imágenes como en el procesador de textos, preferiblemente desde archivo, y recordando que éste debe estar guardado en la carpeta de trabajo. Presviamente a la inseción se habrá preparado la imagen con un editor de imágenes, para que ésta tenga las características de tamaño y aspecto que nos interesen. También se puede ejecutar esta acción de insertar imagen mediante el botón 3.3.2.- HIPERVÍNCULO Es el elemento que permite colocar un enlace a otro documento (ya sea otra página interna o externa, u otro tipo de archivo, como textos en formato .doc o pdf, ejecutables, etc…) Por ello, es lo que más caracteriza a las páginas web. Un hipervínculo (o link o enlace o vínculo) es un texto o imagen tal que, al pinchar sobre él nos envía a otra parte de la misma página, a otra página de nuestro sitio web o a otro sitio web externo. En cualquiera de los tres casos nos ofrece la siguiente ventana: EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre La casilla Marco de destino nos permite elegir el marco donde se abrirá. Si la página no tiene marcos, podemos elegir que se abra en una ventana nueva (resulta útil si no queremos que se abandone nuestra página, pero queremos ofrecer enlaces a otras externas a nuestro sitio). Si tiene marcos, decidimos dónde se abrirá la página a la que apunta el vínculo. En la caja de texto, de forma automática, aparece el código html que se incorpora a la página (no hay que hacer nada con él: es automático. 3.3.3.- MARCADOR Nos permite hacer vínculos a otra parte de la misma página (del mismo documento htm). La forma de hacerlo es insertar, en primer lugar, los marcadores que necesitamos en el documento. Se hace con esta opción (Insertar/Marcador) y poniéndole un nombre que nos resulte significativo. El marcador (como los hipervínculos) puede estar sobre cualquier texto o imagen o incluso sobre un trozo de línea en blanco. EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre Cuando insertamos el marcador, FrontPage coloca esta imagen: que después, con Internet Explorer, no se ve. Una vez hecha la lista de marcadores, puedo insertar hipervínculos (con la opción del punto anterior) que apunten a estos marcadores. Basta con indicarlo en la parte de debajo de la ventana, donde nos saldrá la lista de marcadores que hayamos creado: 3.4.- MENÚ FORMATO En general, el formato se puede trabajar desde la barra de herramientas Formato, muy similar a la que tiene en el procesador de textos. Únicamente vamos a comentar cómo reducir la distancia entre líneas al cambiar de párrafo: en la opción párrafo, indicaremos el número que nos interese en la siguiente ventana (0 es el mínimo): 3.5.- MENÚ TABLA FrontPage utiliza tablas de manejo similar a las del procesador de textos. Su utilidad radica en que permiten organizar la información dentro de la página. Se pueden ocultar haciendo que tengan el borde cero, o darles una sensación de relieve poniéndoles un borde grueso y un fuerte contraste entre los colores de los bordes claro y oscuro. Todo esto se maneja desde el cuadro Propiedades de tabla. También se le puede poner un EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre fondo diferente del de la página, e incluso, desde Propiedades de celda, personalizar éste para cada celda separada. Para insertar una tabla usaremos el botón o el menú Tabla / Insertar. 4.- PÁGINAS CON MARCOS Las páginas con marcos son estructuras que nos permiten abrir varios archivos htm en una misma ventana. Son muy útiles para mantener a la vista un menú, porque permiten navegar sin necesidad de volver continuamente a la página que contienen el índice. Hay que tener en cuenta que cada marco alberga un archivo htm, y además, hay otro que los “recoge” y que no “aparece” con el navegador. La ventaja de las páginas con marcos es que los enlaces que contiene la página de un marco se pueden abrir en otro marco de la misma ventana. Por ejemplo, en la ventana de la imagen, hay una estructura con tres archivos: el de los botones, que ocupa el marco estrecho de la izda, el del rótulo, que ocupa el de la derecha, y el que rodea a ambos que no se ve, pero que es el que se solicita al navegador que lo abra. Las páginas a las que apuntan los botones se abren en el marco de la derecha. EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre Para crear una página con marcos, vamos al menú Archivo / Nueva / Página y se nos despliega un cuadro con tres pestañas de las cuales abrimos Páginas de marcos: Al solicitar una página con marcos nos aparece la siguiente pantalla: Elegiremos en todos los marcos la opción Nueva página. A partir de aquí la forma de trabajar ha de ser la siguiente: 1º.- Archivo / Guardar como Al ir a esta opción nos pide que guardemos tres archivos: el que ocupa el marco de la izquierda, el que ocupa el de la derecha y el archivo del marco exterior. Éste último, si va a albergar a todas las páginas del sitio, conviene que se llame index.htm (de este modo el navegador lo encuentra automáticamente). La forma en que se nos piden los nombres de los archivos es la que se ve en la imagen: EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre EDICIÓN DE PÁGINAS WEB IES Salvador Victoria Monreal del Campo – Teruel www.educa.aragon.es/iesmonre Una sugerencia de nombres es llamar al marco estrecho “menú.htm” y al ancho “inicio.htm”, pues es la página que se ve al inicio. 2º.- Creamos las páginas de la izquierda y de la derecha. En la estructura que hemos propuesto, hay que tener en cuenta que la del menú siempre estará a la vista, y que la otra aparecerá sólo al principio, como una “portada”. 3º.- Cerrando la estructura de marco, se pueden ir creando las demás páginas del sitio de forma independiente, teniendo en cuenta siempre que se abrirán en el marco de la derecha (sobre todo por el tamaño)
