DPWFP 98

Diseo de pginas web
con FRONTPAGE 98
Por Jos Vicente Manga Noviembre 2004
Diseo de pginas web con FrontPage 98
DISEO DE PGINAS WEB 1.- Estructura bsica de una pgina web. Una pgina web, en su versin ms elemental, es un archivo de texto que contiene el cdigo necesario para que un navegador de Internet sea capaz de mostrar la informacin de adecuadamente. Ese cdigo es HTML (Hiper Text Markup Language) o lenguaje de marcas hipertextuales y se basa en la utilizacin de etiquetas o tags, que indican al navegador de Internet lo que debe hacer con la informacin a la que se refieran. Las etiquetas HTML pueden ser de dos tipos: con etiqueta de finalizacin o sin ella. Es decir, podemos encontrarnos con etiquetas como <img> que podr contener varios atributos, pero que toda la informacin relativa a ella est contenida en la propia etiqueta, y podemos encontrarnos con etiquetas como Este texto se mostrar en negrilla. En este ltimo caso la etiqueta indica que el texto que sigue debe aparecer en negrilla y se mostrar as todo el texto hasta que el navegador encuentre la etiqueta de cierre . La estructura de una etiqueta con principio y fin es siempre la misma: se inicia con el nombre de la etiqueta entre los smbolos < y > y finaliza con la misma cadena de caracteres, excepto por la barra que se antepone al nombre de la etiqueta. El cdigo contenido en el archivo de una pgina web debe mantener una estructura bsica, que divide el cdigo en dos partes: cabecera (head) y cuerpo (body). A continuacin se muestra un ejemplo: <html> <head> Esta es la cabecera </head> <body> Este es el cuerpo </body> </html> El contenido de la cabecera no se muestra en el navegador. Las etiquetas de la cabecera contienen informacin que indica al navegador cmo tiene que tratar al documento, datos para la indexacin de la pgina en buscadores, el ttulo de la pgina que se mostrar en la barra de ttulo del navegador al visualizar la pgina, etc. El cdigo colocado en el cuerpo se interpreta por el navegador para visualizar correctamente la informacin, es decir, lo que se escribe en el cuerpo es lo que muestra el navegador, eso s, debe escribirse codificado en HTML. Todo documento web debe comenzar con la etiqueta <html> y finalizar con la etiqueta </html>, que indican al navegador, respectivamente, el comienzo y el final del cdigo HTML. Escribir el cdigo de una pgina web en un editor de texto puede resultar laborioso, aunque no resulta demasiado complicado, pero, generalmente, se utilizan programas editores de pginas web, que permiten manejar la informacin de la pgina que estamos creando de
Por Jos Vicente Manga
forma parecida a como lo haramos al crear un documento en un procesador de textos, pudiendo combinar texto, imgenes, tablas, etc. Aqu aprenderemos a crear pginas web utilizando Microsoft FrontPage, el editor de pginas web de Microsoft. 2.- Organizacin previa de la informacin. Los archivos que contienen el cdigo HTML de una pgina web solo contienen el cdigo, y sin embargo, cuando visualizamos una pgina web, vemos imgenes fijas o en movimiento, a veces escuchamos msica o determinados sonidos, etc. Esto es as porque el cdigo de la pgina web indica al navegador de Internet que debe abrir determinados archivos grficos o multimedia y presentarlos en determinado lugar y de determinada forma. Todos esos archivos (fotos, dibujos, vdeos, msica, ...) deben acompaar al archivo que contiene el cdigo HTML. Por otro lado, si colocamos en una misma carpeta todos los archivos que formen parte de nuestra pgina web, corremos el riesgo de liarnos si el contenido de nuestra pgina crece suficientemente. Por lo tanto siempre debemos organizar los archivos de nuestra pgina web de forma que en la carpeta principal slo se encuentren los archivos que contienen el cdigo HTML y en subcarpetas el resto de los archivos. 3.- El editor de pginas web Microsoft FrontPage. Microsoft FrontPage es un completo entorno de creacin y publicacin de pginas web que, por si mismo, es capaz de crear la estructura completa de carpetas para alojar separadamente los distintos archivos y, sobre ella, nos permite crear las pginas web a nuestra medida y publicarlas posteriormente en Internet, haciendo que, sobre todo, el mantenimiento y la actualizacin de un sitio web sea una tarea sencilla. Sin embargo, en nuestro caso y dada la extensin y complejidad del programa, nos limitaremos a utilizar el Editor de FrontPage, que es la parte que nos ayuda a crear nuestros archivos de cdigo HTML de la manera ms fcil: como si se tratara de un procesador de texto, por tanto crearemos la estructura de carpetas desde el Explorador de Windows. En Programas del men Inicio encontramos el icono para abrir el Explorador de FrontPage , que una vez abierto se mostrar aproximadamente as:
Ahora podemos lanzar el Editor de FrontPage pinchando el icono y, una vez abierto el Editor ya podemos cerrar en Explorador, pues no le utilizaremos. Tambin podemos crear un icono de acceso directo al Editor de FrontPage. Para ello, en la carpeta C:\Archivos de programa\Microsoft FrontPage\bin localizaremos el archivo y pulsando el botn derecho del ratn sobre l, elegiremos Enviar a y Escritorio (Crear acceso directo). De esta forma no necesitaremos abrir el Explorador de FrontPage para abrir el Editor. El aspecto del Editor de FrontPage es el siguiente:
Enseguida nos damos cuenta del parecido con Word o con otros procesadores de texto. No obstante hay algunas diferencias. De entrada, en la parte inferior, tenemos tres solapas Normal, HTML y Vista previa que nos permiten editar la pgina web como si de un procesador de texto se tratara, ver el cdigo HTML generado en funcin del contenido de la pgina y, por ltimo, ver la pgina como se mostrara en un navegador de Internet. Aunque, aparentemente, la pgina web est en blanco, el editor ya ha generado las lneas de cdigo HTML que definen la estructura general de la pgina. Podemos ver este cdigo pulsando la solapa HTML de la parte inferior.
Vemos que en la cabecera hay una lnea de ttulo <title>Pgina nueva 1</title> y dos lneas ms con etiquetas <meta> y que, en este caso, definen el contenido del documento, el juego de caracteres que deber utilizar el navegador para representar correctamente la informacin de la pgina y el editor de pginas web utilizado para crear la pgina.
4.- Creando nuestra pgina web con el editor. Estando situados en la solapa Normal, podemos escribir el texto que deseemos directamente, haciendo que se ajuste a la izquierda, al centro o a la derecha, utilizando los botones disponibles en la barra de formato. Tambin podemos elegir un estilo determinado para ese texto, el tipo de letra, el tamao, el color..., mediante los dems botones de esa barra. Sin embargo, es preferible siempre, hacer una maquetacin de la pgina mediante tablas, ocultando las lneas que delimitan las celdas y, mediante ellas, dividiendo el espacio de la pgina en zonas que dedicaremos a contener distintos elementos. A continuacin se muestra una posible maquetacin mediante una tabla con las lneas ocultas.
Y el resultado que producira en un navegador se ve ms abajo.
En ocasiones es preferible hacer la maquetacin de la pgina utilizando marcos (frames) que permiten dividir la ventana, en la que se visualiza nuestra pgina web, en varias zonas, de manera que puede visualizarse un documento web diferente en cada una de ellas. 4.a.- Definiendo las propiedades de la pgina. A travs del men Archivo o pulsando el botn derecho del ratn sobre el espacio de trabajo y eligiendo Propiedades de pgina accedemos al cuadro de dilogo donde podemos definir fcilmente el ttulo de la pgina, el sonido que se escuchar al visualizarse la pgina, los colores por defecto de los elementos principales de la pgina, etc.
Ficha General Sustituyendo el ttulo por defecto por un nuevo texto, cambiaremos el ttulo de la pgina. Recordemos que este texto se mostrar en la barra de ttulo del navegador de Internet. En cuanto al sonido de visualizarse la pgina, podemos deseado, indicando tambin su archivo con el cdigo HTML, especfico. fondo que se reproducir en el navegador (de Microsoft) al indicar aqu el nombre del archivo de sonido (mid mp3) ubicacin con relacin a la carpeta donde se guardar el y si se reproducir indefinidamente o un nmero de veces
En el ejemplo de la derecha, el archivo de sonido xfiles.mid estara almacenado en la carpeta sonidos dentro de la carpeta en la que se guardar el archivo HTML. A esta forma de indicar la localizacin de un archivo se le denomina direccionamiento relativo, y es la mejor forma de referirse a los archivos en una pgina web. Veamos como ha quedado el cdigo HTML tras modificar el ttulo y el sonido de fondo:
Vemos una nueva etiqueta: <bgsound> que permite definir el archivo de sonido que se reproducir al visualizar la pgina. El atributo loop determina el nmero de veces que se escuchar el archivo; el valor -1 en este atributo provoca la reproduccin infinita. Ficha Fondo Desde esta ficha podemos definir si queremos que una imagen se muestre como fondo de la pgina, o en su lugar, definimos un color de fondo. Si elegimos una imagen, sta aparecer a partir de la esquina superior izquierda del rea de visualizacin del navegador y se repetir hacia la derecha y hacia abajo hasta llenar toda el rea.
Tambin podemos definir el color por defecto del texto y de los enlaces de hipertexto, aunque posteriormente, desde la pantalla de edicin, podemos asignar un nuevo color a cualquier texto o enlace. Por ltimo, cuando disponemos de una pgina web ya creada y deseamos crear una nueva pgina en la que el fondo y los textos se muestren con las mismas caractersticas de la primera, podemos especificar el archivo HTML de esa pgina para que el editor le use como plantilla y tome de ella los valores de los parmetros del fondo y de los textos. En este caso no podremos definir de forma manual los colores de los textos y el fondo por defecto. Ficha Mrgenes Aqu podremos introducir el nmero de puntos que deseamos que se muestren, entre los lmites izquierdo y superior del rea de visualizacin, y el contenido de la pgina. Si no deseamos mrgenes debemos introducir el valor cero. Ficha Personalizado Desde ella podemos introducir etiquetas <meta> y otras variables de forma ms intuitiva que escribindolas directamente en cdigo HTML. No obstante, para utilizar las etiquetas <meta> adecuadamente, es necesario consultar documentacin exhaustiva sobre ellas que podemos localizar en Internet. De cualquier modo, estas etiquetas no son imprescindibles ni suponen una merma en la funcionalidad de la pgina, excepto las que coloca por defecto el editor. Ficha Idioma En ella podemos elegir el juego de caracteres que utilizar el navegador para mostrar nuestra pgina. Estos valores se establecen por defecto en los adecuados a nuestro idioma. 4.b.- Maquetando la pgina con tablas. En el men Tabla o desde el botn , podemos crear la tabla. En un primer momento podemos crear una tabla que se aproxime a nuestras necesidades y, posteriormente, combinar celdas o dividirlas para obtener las divisiones de la tabla que necesitamos. Para combinar celdas, seleccionamos las celdas que deseamos combinar y, en el men Tabla o pulsando el botn derecho del ratn sobre ellas, elegimos Combinar celdas. Para obtener una tabla como la que veamos al comenzar el punto 4, podemos dibujarla desde el botn eligiendo dos filas y dos columnas arrastrando el puntero sobre la ventana de celdas que se despliega bajo el icono anterior. Posteriormente, seleccionamos las dos celdas superiores y, pulsando sobre ellas el botn derecho del ratn, elegimos Combinar celdas.
Arrastrando los bordes de las celdas podemos modificar rpidamente la anchura de las columnas. La altura de las filas se modifica automticamente con el contenido de cada celda, aunque podemos definir una altura mnima superior a la necesaria para mostrar el contenido. Para dividir una celda en varias filas o columnas hacemos clic sobre la celda a dividir y en el men Tabla, o desde el men contextual que aparece al hacer clic con el botn derecho del ratn, elegimos Dividir celda, y seleccionamos el tipo de divisin y el nmero de filas o columnas. La creacin de esta tabla ha dado como resultado el cdigo HTML que aparece a la derecha: Vemos la nueva etiqueta <table> en la que se define el borde y la anchura de la tabla, la etiqueta <tr> que define una nueva fila, y la etiqueta <td> que define una columna, dentro de la fila creada previamente, es decir una celda. El texto corresponde a un espacio en blanco codificado segn el lenguaje HTML, que es el contenido actual de las celdas de la tabla. En la celda definida en la primera lnea de la tabla, adems de la anchura, aparece el atributo colspan que hace que esa celda ocupe el espacio de horizontal, en este caso, de dos columnas. Lo siguiente que debemos hacer es modificar las propiedades de la tabla y establecer el tamao, la posicin horizontal, y las lneas de la tabla (bordes). Para ello, pulsamos el botn derecho del ratn sobre la tabla y elegimos Propiedades de tabla. Una combinacin normal sera la que se muestra a continuacin:
Como podemos observar en el cuadro de dilogo anterior, podemos definir la anchura y la altura de la tabla en pxeles o en porcentaje. El porcentaje se refiere al rea de visualizacin en la ventana del navegador, mientras que los pxeles (puntos) se refieren a puntos de la pantalla, cuyo nmero y tamao depender de la resolucin de pantalla del ordenador donde se visualice la pgina. La resolucin ms habitual es de 800x600 puntos, por lo que, si deseamos que la informacin se muestre correctamente en la mayora de los ordenadores, o bien introducimos un porcentaje o bien un nmero de puntos menor de 760 (se ha descontado lo que ocuparan los bordes de la ventana y la barra de desplazamiento vertical). La altura de la tabla no es necesario definirla, pues se alarga automticamente en funcin del contenido, an cuando hayamos definido ese parmetro, siendo el valor introducido, el mnimo valor de altura. Tambin podemos elegir colores para los bordes de la tabla, si fueran visibles, y una imagen de fondo que se comportar igual que la usada como fondo de pgina, pero dentro de la tabla. Estos ltimos atributos no son reconocidos por todos los navegadores, por lo que no es recomendable usarlos. Ahora nos toca editar las propiedades de cada celda de la tabla, para establecer las medidas, la alineacin del texto por defecto, y otros atributos. Para ello nos situamos sobre la celda que deseamos modificar y, pulsando el botn derecho del ratn elegimos Propiedades de celda. Si queremos modificar las propiedades de un conjunto de celdas, primero seleccionamos las celdas que nos interese modificar y, con el puntero sobre ellas, procedemos como se ha descrito antes. En nuestro caso, modificaremos las propiedades de cada celda por separado para dar una anchura del 100% a la celda de encabezado, del 25% a la de men y del 75% a la del contenido. El resultado de estos ajustes en el cdigo HTML se muestra a continuacin:
Vemos ahora el borde (border), el espaciado entre celdas (cellspacing) y el relleno de celdas (cellpadding) puestos a cero, y las nuevas anchuras en las celdas. Las etiquetas y delimitan los prrafos de texto, que en este caso solo contienen un espacio en blanco, y han sido introducidos para que algunas celdas de la tabla aumenten su altura y podamos ver mejor el resultado de nuestras acciones, como en la imagen siguiente.
Por supuesto, podemos modificar los colores del fondo de cada celda para dar un aspecto ms atractivo, sin embargo no conviene abusar de ellos, pues pueden entorpecer la lectura de los textos. En caso de usarlos, se recomiendan colores muy claros o blanco para el rea de contenido, pudiendo ser ms oscuros o fuertes los utilizados en las reas de encabezado y mens. A la derecha tenemos un ejemplo de nuestra pgina con distintos colores en las celdas de la tabla. Ahora solo resta introducir el contenido de cada celda de la tabla para terminar de crear nuestra primera pgina web. Finalmente, tambin podemos escribir o modificar el cdigo HTML que se muestra en la solapa HTML del editor, como si de un editor de texto se tratara. A veces resulta ms prctico y rpido modificar algunos valores en el cdigo HTML de este modo. 4.c.- Introduciendo y manipulando textos. A la hora de introducir textos y manipularlos en el editor, procederemos como en cualquier procesador de textos, siendo posible elegir el tipo de letra, su color, su estilo y su tamao. nicamente cabra sealar que en las pginas web el texto puede separarse mediante saltos de lnea o mediante prrafos, y la separacin en ambos casos es automtica y siempre la misma. A partir de aqu vamos a ir viendo cmo hacer las cosas sobre el ejemplo de una pgina web, donde se muestre el programa del curso que estamos desarrollando, pero de forma interactiva. Crearemos el documento principal de nuestra pgina web de modo que sea como el ndice de toda la pgina. En nuestro ejemplo, empezaremos por introducir el ttulo del curso en la celda de encabezado. Cmo habamos elegido un color azul marino para la celda, elegiremos el color blanco para el texto y le asignaremos el estilo de Encabezado 3 (H3). Primero escribimos el texto en la celda de encabezado y, a continuacin, seleccionamos ese texto y elegimos el color blanco para l, a travs del botn de la barra de herramientas. Se recomienda utilizar los colores que se muestran en la primera ventana, pues son los que, con seguridad, se mostrarn de igual forma en todos los navegadores. Por supuesto, podemos elegir cualquier otro color pulsando el botn Definir colores personalizados que aparece en la ventana de seleccin de colores. Ahora, manteniendo el texto seleccionado, elegimos el estilo Encabezado 3" en la casilla de seleccin de estilos de la barra de herramientas.
10
Tambin podemos elegir un tipo de letra distinto; el tipo Verdana es ms fcilmente visible en la pantalla. Si hubiramos decidido que todos los textos, o su mayora, se mostraran con ese tipo de letra, deberamos haberlo definido en las propiedades de la pgina y ya no sera necesario definirlo en adelante. Para elegir el tipo de letra utilizamos la casilla que est al lado de la casilla de estilos en la barra de herramientas .
El resultado de lo que acabamos de hacer, sobre el cdigo HTML se muestra a continuacin:
Escribamos ahora los textos que nos servirn como enlaces de hipertexto, dentro de la celda de men. En nuestro ejemplo, sern las cabeceras de los apartados del programa del curso. Si escribimos el texto de cada apartado en un prrafo distinto puede quedar ms claro que si lo escribimos introduciendo un salto de lnea entre el texto de un apartado y el siguiente. Lo haremos en prrafos separados. Si queremos el texto en lneas contiguas, en vez de separado en prrafos, al final de cada texto elegimos en el men Insertar, Salto de lnea y en el cuadro de dilogo que resulta, pulsamos Aceptar. Tambin podemos dividir esa celda en tantas filas como elementos de men v ayamos a crear, de manera que cada elemento estara colocado dentro de una fila diferente. Esto nos permitir controlar mejor la situacin y separacin de los elementos del men. Situemos el cursor sobre la celda de men y comencemos a escribir el texto que identifica cada apartado, pulsando [Intro] al final de cada uno. No nos preocupemos de si ocupan ms de una lnea, de momento. Seleccionamos todo el texto que har de men interactivo y elegimos para l, un tipo de letra Arial de igual forma que hicimos con el encabezado de la pgina y, adems, negrilla pulsando el botn correspondiente en la barra de herramientas. De esta forma el texto resaltar ms. Abajo vemos el cdigo HTML resultante de la introduccin de estos ltimos textos.
Por ahora nuestra pgina web debe tener el aspecto que vemos en la imagen siguiente:
11
4.d.- Insertando imgenes y otros elementos multimedia. Desde el men Insertar podemos incluir en nuestra pgina web, adems de imgenes, otros muchos elementos, muchos de ellos activos, pero que, desgraciadamente, no todos los navegadores de Internet reconocen. Son especialmente interesantes el vdeo, las marquesinas, las lneas horizontales y los elementos de formulario. Insertar una imagen Son vlidos para su incorporacin a las pginas web, los formatos de imagen gif, jpg y png, aunque slo el formato gif permite hacer transparente un color que, si coincide con el de fondo de la imagen, en vez de mostrarse ese fondo, se mostrar en su lugar el fondo de la pgina. El formato GIF es recomendable para imgenes de dibujos o grficos creados con programas como hojas de clculo, etc. y el JPG es preferible en el caso de las fotografas, debido a que soporta ms colores y al tipo de compresin que utiliza. Conviene tener almacenados los archivos de imagen en una subcarpeta dedicada a ellas, antes de insertar las imgenes en la pgina web. De este modo, el editor introducir la direccin relativa, por defecto, al archivo de imagen cuando se inserte en la pgina. Situamos el cursor en el lugar donde queramos insertar la imagen. En el men Insertar seleccionamos Imagen y buscamos el archivo que vamos a insertar mediante el cuadro de dilogo que aparece.
12
Editar las propiedades de la imagen Una vez insertada la imagen en la pgina, es recomendable editar sus propiedades y realizar algunos ajustes. Ms abajo se muestra el cuadro que nos encontramos. En la ficha General vemos el origen de la imagen que mostrar una direccin relativa a la misma. El tipo de imagen indica si es gif o jpg, y si no lo es, como en este caso, podemos seleccionar uno de los dos tipos y FrontPage convierte el archivo a ese formato. En la parte de Representaciones alternativas podemos elegir un archivo de la misma imagen pero de baja resolucin, que se mostrar al cargar la pgina en el navegador, mientras se carga el archivo con la mxima resolucin, que por ser de mayor tamao, tardar ms. El Texto que escribamos se mostrar en lugar de la imagen de baja resolucin, mientras se carga el archivo y, posteriormente, al dejar quieto el puntero del ratn sobre la imagen . El apartado de Hipervnculo permite crear un enlace entre la imagen y otro documento web. Esto lo veremos ms adelante, cuando tratemos los hiperenlaces. En la ficha Apariencia podemos ajustar las dimensiones de la imagen, el espacio de separacin alrededor de la imagen, la alineacin y, si queremos que se muestre un borde alrededor, podremos ajustar su grosor (Cero = sin borde). Una vez insertada la imagen, podemos arrastrarla con el ratn para cambiarla de posicin, o modificar su tamao arrastrando las marcas que aparecen alrededor de la imagen cuando est seleccionada. Insertemos las imgenes que sirven de portada al programa del curso en la celda de contenido y editamos sus propiedades para que no se muestre ningn texto alternativo. Ya fuera de las propiedades de imagen, pero con el cursor en la celda en la que estn las imgenes, pulsamos el botn de centrar en la barra de herramientas, para que se siten ambas imgenes en el centro de la celda. Aqu tenemos el cdigo HTML resultante de insertar las imgenes como hemos descrito y, a la derecha, el aspecto actual de nuestra pgina web.
13
4.e.- Creando enlaces de hipertexto. La verdadera potencia de la web est en los enlaces. A travs de ellos podemos navegar entre multitud de documentos web, estn stos alojados en el mismo ordenador o no, con slo hacer clic en el enlace correspondiente. La etiqueta <a> permite definir los enlaces, pero no vamos a preocuparnos de ella, pues el editor que utilizamos nos permite crear los enlaces en dos pasos: Seleccionamos el texto o la imagen que servir de enlace. Pulsamos el botn en la barra de herramientas e introducimos la direccin, absoluta o relativa, segn el caso, que conduce al documento con el que deseamos enlazar y pulsamos Aceptar
Es recomendable que hayamos creado los archivos que contendrn el cdigo HTML de la pgina web y que stos estn abiertos, para poder definir los enlaces ms fcilmente, pues podremos sealarles con el puntero en vez de escribir su nombre. Creando un enlace a otro documento En el cuadro de dilogo que se muestra para crear el enlace, podemos definir, adems, si el nuevo documento se visualizar en la misma ventana que el documento actual o e otra n diferente. Veamos las posibilidades ms interesantes. En el recuadro blanco encabezado con Nombre y Ttulo se muestran los documentos abiertos en FrontPage, de manera que, con solo seleccionar el que nos interese, se estable el enlace a l, pero podemos escribir directamente en el recuadro Direccin URL la direccin, absoluta o relativa, al documento. No es imprescindible dejar delante de la direccin la cabecera del protocolo de hipertexto http://, sino que es preferible borrarla y escribir la direccin, sea del tipo que sea, sin ella. En todo caso, si la direccin que introducimos es relativa, debe escribirse sin esa cabecera. El cdigo HTML resultante de la creacin de un hipervnculo tendr esta estructura: Las etiquetas y slo hacen que el texto que sirve de enlace (Responsable) aparezca en negrilla y con letra tipo Arial. El archivo del documento al que lleva el enlace es resp.htm y su ubicacin debe ser la misma que la del documento de partida, pues est direccionado relativamente.
14
El recuadro Marco de destino permite elegir si el nuevo documento se visualizar en la misma ventana del documento de partida, o bien en otra ventana o marco. Esta funcin corresponde al atributo target de la etiqueta <a>. Para introducir un valor en este recuadro pulsamos sobre el botn que tiene a su lado. Esto despliega un cuadro de dilogo donde podemos escoger el destino para la visualizacin del nuevo documento. Creando un enlace a un lugar del mismo documento. El recuadro Marcador permite crear un enlace a una parte del mismo documento que estamos visualizando. Pensemos en una pgina web en la que se muestra la programacin de matemticas para 3 de la E.S.O. Sera una pgina muy larga que precisara del uso de la barra de desplazamiento vertical para poder ir recorrindola. No obstante, podemos colocar un ndice al principio de la pgina y crear enlaces hipertextuales entre cada elemento del ndice y el lugar de la pgina donde aparece ese elemento o apartado de la programacin. Para poder realizar eso, es necesario definir un marcador al principio de cada apartado y, posteriormente, crear los enlaces entre cada elemento del ndice y los respectivos marcadores que hemos creado. El procedimiento para crear un marcador es sencillo: seleccionamos el texto que se comportar como marcador y en el men Edicin elegimos Marcador; damos un nombre identificativo al marcador que estamos creando o bien dejamos como nombre el texto que habamos seleccionado y pulsamos Aceptar. El siguiente cdigo define el texto Apartado 1" como marcador, con el nombre identificativo Marcador1: Ahora ya podemos crear un enlace desde otro texto a ese marcador. Para ello, seleccionamos el texto que vamos a enlazar, pulsamos el botn y, desplegando el recuadro Marcador en cuadro de dilogo de creacin de hipervnculos, elegimos el marcador con el que deseamos crear el enlace. Al final pulsamos Aceptar. Cuando el enlace se hace a un marcador, el aspecto del cdigo cambia un poco:
Creando un enlace a una direccin de correo electrnico Tambin es posible crear un enlace que, al activarse, abre el programa de correo que tengamos instalado en nuestro ordenador, preparado para enviar un mensaje a la direccin de correo que hayamos definido. En este caso, tras seleccionar el texto que har de enlace y pulsar el botn ,
pulsamos el botn e introducimos la direccin de correo electrnico en el recuadro que aparece seguidamente. Pulsamos Aceptar y ya est. El cdigo resultante tendr un aspecto similar al siguiente:
Jos Vicente Manga
15
Creemos los enlaces de nuestra web de ejemplo, de forma que cada prrafo de texto de la celda de men conduzca a un nuevo documento, que contendr la informacin correspondiente al apartado al que deseamos acceder. Para ello, guardaremos el archivo principal con el nombre index.html y, con la opcin Guardar como guardaremos de nuevo el archivo con distinto nombre, tantas veces como enlaces hayamos creado en el men, y dando como nombre de archivo, en cada caso, el nombre que indicamos en cada enlace (objetivo.htm, metodo.htm, conten.htm, lugar.htm, destina.htm, plazas.htm, plazo.htm, acredita.htm, horario.htm y resp.htm). Es recomendable que los nombres de estos archivos no contengan ms de 8 caracteres adems de .htm para evitar conflictos con algunos navegadores y servidores de pginas web. De esta forma, slo tendremos que abrir cada nuevo documento, borrar las imgenes de la celda de contenido e introducir all la informacin para cada apartado. Esto nos simplifica el trabajo y ayuda a dar consistencia a la pgina, pues siempre se mostrar la informacin manteniendo la estructura general. Pero antes, introduzcamos dos nuevos enlaces: uno a nuestra direccin de correo y otro a un documento web que contendr un formulario desde el que podremos inscribirnos en el curso. Quiz nos queda un detalle, y es que, en todos los documentos de nuestra web excepto en el primero, deberamos colocar un enlace al documento principal. En nuestro caso podemos hacerlo sobre el texto del encabezado de la pgina. Ahora ya vemos el texto de los enlaces subrayado y ste sera el aspecto de la pgina de entrada. Si nos parece que el color de los enlaces contrasta poco con el fondo, podemos modificarlo en las propiedades de la pgina bien, seleccionar todos los enlaces y elegir un color para el texto, que tendr preferencia sobre el color definido por defecto en las propiedades de la pgina.
4.f.- Creando listas. En las pginas web podemos presentar textos en dos tipos de listas: numeradas y no numeradas. Las etiquetas HTML que se ocupan de esto son <ol> para las listas numeradas y <ul> para las no numeradas. La forma ms cmoda de proceder a crear estas listas de texto consiste en escribir el texto en prrafos separados, despus seleccionar todo el testo escrito y, por ltimo, pulsar el botn correspondiente en la barra de herramientas. Tambin podemos hacerlo pulsando el botn correspondiente, en la barra de herramientas, antes de comenzar a escribir, e ir escribiendo normalmente, pulsando [Intro] al final de cada elemento de la lista.
Jos Vicente Manga
16
Los dos botones de la derecha, de los mostrados arriba, permiten desplazar el texto seleccionado a un nivel inferior, o superior, al nivel en que se encuentre, dentro de la jerarqua de los elementos de la lista. Ahora vemos dos ejemplos de estas listas sobre nuestra pgina de ejemplo, con los Objetivos numerados, y las Plazas y criterios de seleccin sin numerar y con dos niveles en la lista. Ms adelante aparece el cdigo HTML correspondiente a ambos casos.
4.g.- Diseando formularios. Los formularios son una de las herramientas de que disponen las pginas web para hacerlas interactivas, ya que permiten recopilar informacin de los visitantes de nuestra pgina y envirnosla a la direccin de correo que indiquemos, o bien procesar la informacin y dar una respuesta automtica. Aqu veremos cmo crear un formulario sencillo, para recabar los datos de un posible asistente al curso Taller de Matemticas, con el fin de inscribirle en l. Los datos recogidos en este formulario se enviarn por correo electrnico y, para que funcione, el ordenador en que se visualice debe tener instalado un programa de correo y configurada una cuenta en l. A travs de FrontPage es sencillo. Comenzaremos por situar el cursor en el lugar de la pgina en que deseemos crear el formulario , e Insertar un Campo de formulario del tipo Cuadro de texto de un lnea. Esto har que aparezca un recuadro con lnea de trazo (que Jos Vicente Manga 17
delimita el espacio del formulario) y en su interior un cuadro de texto y dos botones: Enviar y Restablecer. Estos botones afectan a todo el formulario, mientras que el cuadro de texto es un campo del formulario. El botn Enviar recoge la informacin contenida en todos los campos del formulario y la enva a la direccin que hayamos programado. El botn Restablecer vaca el contenido de todos los campos del formulario, es decir, pone el formulario a cero. Ms adelante veremos cmo ajustar cada elemento. De momento, vamos a ir componiendo el formulario, insertando todos los campos en los lugares que nos interese, siempre dentro del recuadro con lnea de trazo, y acompandoles de un texto descriptivo. Cada elemento de formulario es tratado por el editor como una carcter ms, por lo que el cursor de edicin puede moverse entre los elementos y podemos separarlos introduciendo saltos de lnea o de prrafo entre ellos. Llevemos el cursor entre el cuadro de texto y el botn Enviar e insertemos un salto de prrafo (pulsando [Intro]). Obtendremos algo parecido a esto: Ahora llevemos el cursor a la izquierda del cuadro de texto y escribamos Nombre: , y obtendremos algo como esto: Lo siguiente ser llevar el cursor a la derecha del cuadro de texto, introducir un nuevo salto de prrafo y escribir, ahora, Apellidos. Seguidamente insertamos un nuevo cuadro de texto. Repetiremos los pasos anteriores para ir introduciendo todos los campos necesarios con sus textos descriptivos. Al final podra quedar algo as: Ajustemos las propiedades de cada uno de los campos. Para ello, con el puntero del ratn sobre uno de los campos, pulsamos el botn derecho y elegimos Propiedades de campo de formulario. En el campo Nombre podemos poner cualquier texto que nos sirva de referencia para identificar la informacin que contendr. Slo deben utilizarse letras y nmeros. En el campo Valor inicial no hace falta escribir nada, excepto que nos interese que un campo tenga un contenido por defecto, que nuestros visitantes podrn cambiar a voluntad. Ancho de caracteres nos permite definir la longitud del campo, indicando el nmero de caracteres que podrn visualizarse en l.
Jos Vicente Manga
18
Orden de tabulacin establece el orden que seguir el cursor a travs de los campos del formulario cuando, al introducir los datos, avancemos de un campo a otro pulsando [Intro] o el tabulador. Si definimos el campo como de contrasea, cuando introduzcamos el texto en l, los caracteres sern sustituidos por asteriscos. Hasta aqu el formulario es normal y ser reconocido por la mayora de los navegadores. Pero, adems, FrontPage nos permite afinar ms cada campo a travs del botn Validar, aunque en este caso, puede que en algunos casos, nuestro formulario no funcione correctamente en algunos navegadores. Para terminar, ajustemos las propiedades del formulario. Puntero del ratn sobre el formulario, botn derecho, y Propiedades del formulario. Dejamos los recuadros como se ven en la imagen siguiente: slo contienen informacin el de la direccin de correo a la que se enviarn los datos del formulario y el nombre de ste. Sin embargo, cuando recibamos la informacin quiz no sepamos a que curso se refiere la ficha de inscripcin, pues no hemos creado ningn campo que contenga esa informacin. Pues bien, como todas las fichas de inscripcin provenientes de este formulario sern para el curso Taller de Matemticas, crearemos un campo oculto que contenga el ttulo del curso. Los campos ocultos pueden contener informacin como cualquier otro campo y se envan con los dems, pero no se muestran en la pgina. Para insertar un campo oculto, en el cuadro de dilogo anterior, pulsamos el botn Avanzadas y en el nuevo cuadro, pulsamos Agregar.
Ahora introducimos el nombre del campo oculto y su contenido. Al finalizar, pulsamos Aceptar hasta salir de los cuadros de propiedades. Cuando hayamos ajustado las propiedades de todos los campos y del formulario, ste aparecera ms o menos, as:
Jos Vicente Manga
19
Y el aspecto del cdigo HTML generado con ese formulario sera como sigue:
Hemos de tener en cuenta que en HTML, no importa que el cdigo est escrito en una o varias lneas, ya que los espacios en blanco no son tenidos en cuenta, salvo que sea un texto entre dos etiquetas HTML y, en ese caso, aunque haya varios espacios consecutivos, slo se visualizar uno. Adems, FrontPage no genera el cdigo exactamente as, sino que utiliza otro procedimiento para enviar los datos, propio de FrontPage, que deberemos modificar para que mantenga la estructura del que aparece listado aqu. 4.h.- Maquetando la pgina con marcos (frames) Una pgina con marcos es aquella que tiene definidas dos o ms divisiones de la ventana de visualizacin del navegador, con el fin de mostrar un documento web diferente en cada una de ellas. Un marco (frame) es cada una de esas divisiones de la ventana.
Jos Vicente Manga
20
Al crear los marcos se define una estructura jerrquica en la que unos marcos quedan anidados a otros (siempre que se definan ms de dos marcos), pues solo es posible definir marcos directamente en fila o en columna, es decir que si definimos dos marcos, uno a la izquierda del otro, despus podramos definir nuevos marcos, uno encima de otro, dentro de cada uno de los marcos definidos previamente. Esto es as porque cada marco es tratado como si fuera una ventana independiente. No todos los navegadores son compatibles con el uso de marcos y algunos visitantes pueden experimentar dificultades para navegar por pginas con marcos. Por eso, si los utilizamos, debemos incluir siempre una seccin noframes en el conjunto de marcos p los ara visitantes que no pueden verlos. Una buena alternativa consiste en incluir tambin un vnculo a una versin sin marcos del sitio, para los visitantes con navegadores que no admitan marcos o que no deseen utilizarlos. Entre las ventajas de utilizar marcos se incluyen: - El navegador de un visitante no tendr que volver a cargar los grficos de navegacin para cada pgina. - Cada marco dispone de su propia barra de desplazamiento (si el contenido es demasiado grande para una ventana), permitiendo al visitante desplazarse por los marcos de forma independiente. (Por ejemplo, si la barra de navegacin se encuentra en otro marco, cuando el visitante se ha desplazado al final de una pgina de contenido muy grande en un marco, no ser necesario volver al principio de la pgina para acceder a la barra de navegacin.) Entre los inconvenientes de utilizar marcos se incluyen: - Lograr un alineamiento grfico preciso de los elementos en distintos marcos puede resultar difcil. - Comprobar las opciones de navegacin, al crear la pgina, puede llevar mucho tiempo. Los URL de las pginas con marcos no se muestran en el navegador, por lo que puede resultar complicado para un visitante marcar una pgina concreta (salvo que incluya cdigo de servidor que le permita cargar la versin con marcos de una determinada pgina). Definir una pgina con marcos La etiqueta HTML que permite definir marcos es <frameset>. FrontPage permite crear pginas con marcos eligiendo la solapa Marcos a travs del men Archivo > Nuevo y haciendo clic sobre la divisin de marcos deseada. En la vista Normal aparecen las divisiones correspondientes y tres botones en cada una de ellas: Establecer pgina inicial, Nueva pgina y Ayuda. Desde ellos seleccionamos el archivo que se mostrar en cada marco, si anteriormente ha sido creado, o crearemos uno nuevo. 21
Jos Vicente Manga
Podemos ver tambin, en la parte inferior de la ventana, que ahora aparecen dos nuevas solapas: marcos y Sin HTML de pgina de marcos. Desde la primera podemos introducir el contenido que se visualizar en un navegador que no pueda visualizar marcos, y desde la segunda ver y modificar el cdigo HTML de la pgina de definicin de marcos. En la pgina que contenga la definicin de los marcos no debe haber otros contenidos que no sean los relativos a la seccin noframes. Modificando las propiedades de una pgina con marcos Haciendo clic con el botn derecho del ratn sobre un marco, en la vista Normal, podemos elegir entre modificar las Propiedades del marco o las Propiedades de pgina, stas ltimas relativas a la pgina que se visualiza en ese marco. Las propiedades del marco nos permiten ajustar el nombre identificativo del marco, su tamao y si ser modificable desde el navegador (arrastrando su borde), si tendr barras de desplazamiento, Los mrgenes dentro del marco (que no tienen que ver con los del documento web que se muestre en l), y la ruta al archivo que ser mostrado. Tambin aparece un botn que permite acceder a una cuadro de dilogo para ajustar las propiedades de la pgina de definicin de marcos Pgina de marcos. Las propiedades de la pgina de marcos nos permiten ajustar los mismos parmetros que para una pgina normal y, adems, si se mostrar el borde de los marcos y cuantos pxeles habr entre el borde de una marco y el contiguo (Espaciado del marco). Utilizando marcos para maquetar En vez de utilizar tablas para dar una estructura uniforme a un sitio web, podemos utilizar marcos. En el caso que venimos desarrollando, podramos definir una pgina de marcos con tres marcos, uno de encabezado y otros dos bajo l, uno para el men de enlaces de navegacin y el otro para mostrar el contenido solicitado en cada caso. El marco que contuviera los enlaces de navegacin (men) podra tener definido un target base dirigido hacia el marco de contenido, de modo que todos los enlaces de ese marco haran que las pginas enlazadas se mostraran en el marco de contenido. Las pginas que se mostraran en cada marco al cargar la pgina principal deberan contener: En el marco de encabezado: el texto de encabezado. En el marco de men: una tabla de una columna y tantas filas como enlaces deseemos incluir. En el marco de contenido: alguna imagen de portada o bienvenida al sitio web. 22
Jos Vicente Manga
En las restantes pginas de contenido slo debemos incluir el texto, las imgenes, etc. relativas a la informacin que deseemos mostrar en cada caso, sin zonas de enlaces para navegacin, al contrario que cuando se maqueta con tablas. Es interesante incluir un enlace a la pgina principal del sitio, desde cada una de las pginas de contenido, pues si un internauta localiza una pgina de nuestro sitio web a travs de un buscador, es posible que solo visualice esa pgina en la ventana de su navegador, sin la estructura de marcos que hayamos definido, con lo que no tendra disponible el sistema de navegacin. Tambin puede resultar til incluir una sucesin de enlaces al final de cada pgina de contenido, en la zona del pie de pgina, que permitan al usuario acceder directamente a cualquier informacin dentro de nuestro sitio. Debajo se muestra el aspecto de la misma pgina web, diseada anteriormente con tablas, organizada mediante tres marcos. Como puede observarse no se aprecia diferencia entre ellas.
Jos Vicente Manga
23
NDICE 1.- Estructura bsica de una pgina web............................................................................2 2.- Organizacin previa de la informacin ........................................................................3 3.- El editor de pginas web Microsoft FrontPage 98 .......................................................3 4.- Creando nuestra pgina web con el editor....................................................................5 4.a.- Definiendo las propiedades de la pgina .......................................................5 Ficha general..............................................................................................6 Ficha fondo ................................................................................................6 Ficha mrgenes ..........................................................................................7 Ficha personalizado....................................................................................7 Ficha idioma...............................................................................................7 4.b.- Maquetando la pgina con tablas...................................................................7 4.c.- Introduciendo y manipulando textos............................................................10 4.d.- Insertando imgenes y otros elementos multimedia ....................................12 Insertando una imagen.............................................................................12 Editando las propiedades de la imagen....................................................13 4.e.- Creando enlaces de hipertexto .....................................................................14 Creando un enlace a otro documento .......................................................14 Creando un enlace a un lugar del mismo documento ..............................15 Creando un enlace a una direccin de correo electrnico........................15 4.f.- Creando listas ...............................................................................................16 4.g.- Diseando formularios.................................................................................17 4.h.- Maquetando la pgina con marcos ..............................................................20 Definir una pgina con marcos ................................................................21 Modificando las propiedades de una pgina con marcos.........................22 Utilizando marcos para maquetar ............................................................22
Jos Vicente Manga
24

DPWFP 98

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

DPWFP 98

Încărcat de

Drepturi de autor:

Formate disponibile

Diseo de pginas web

Por Jos Vicente Manga Noviembre 2004

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Por Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Y el resultado que producira en un navegador se ve ms abajo.

Por Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Por Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Por Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Por Jos Vicente Manga

Diseo de pginas web con FrontPage 98

El resultado de lo que acabamos de hacer, sobre el cdigo HTML se muestra a continuacin:

Por Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Por Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Por Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Diseo de pginas web con FrontPage 98

Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Jos Vicente Manga

Diseo de pginas web con FrontPage 98

Jos Vicente Manga

S-ar putea să vă placă și