Diseño de páginas web con FrontPage
FrontPage es uno de los programas más tradicionales para la creación de páginas web atractivas. En los tiempos en los que estamos, en los que todas las empresas se hacen un hueco en Internet, es necesario conocer las técnicas básicas para crear nuestro site.
Capítulo 1:Cómo planificar el sitio web (I)Antes de lanzarnos a editar una página web debemos dedicar un tiempo a planificar nuestro trabajo para asegurarnos de qué vamos a incluir en la web, de dónde lo vamos a obtener y qué aspecto externo le vamos a dar. Un minucioso trabajo de planificación reducirá los errores que se producen cuando nos ponemos a editar una página. Si queremos evitar borrar y repetir las cosas una y otra vez, convendrá que sigamos los siguientes pasos:
1.Definir la audiencia destino: al crear una web desearemos que comunique adecuadamente el mensaje y contenidos que quiere transmitir: publicar los resultados de una investigación, describir una situación o la inclusión de contenidos diversos. En función de la audiencia destino el diseño de la web será diferente. Por ejemplo, si queremos publicar un artículo los visitantes visitarán la página para leerlo, por lo que todo elemento que adorne excesivamente la página y ralentice su carga será negativo para nosotros.
En una web docente la audiencia destino serán alumnos y profesores de una asignatura, curso o tipo de estudios. El material incluido en la web debe ir dirigido a dicha audiencia para un mejor aprovechamiento.
2.Establecer objetivos: debemos pensar cuáles son los objetivos de nuestro sitio web: ¿divulgar información?, ¿promocionar una asociación? ¿comercio electrónico?, ¿educar?, ¿entretenimiento?. Debemos definir los principales objetivos que queremos alcanzar, que junto con la audiencia destino nos permitirán definir los contenidos que debemos incluir en el sitio web.
Los objetivos en una web docente pueden ser muy diversos y dependen de si lo que queremos es una web para educación a distancia o una web que sirva de apoyo y complemente a la educación presencial. En el caso de la educación a distancia (teleformación) los objetivos serán que el alumno supere el curso o asignatura a través de los contenidos y procedimientos que se establecen en la web. En estos casos será fundamental el apoyo de una guía de estudio y la elaboración de materiales didácticos de calidad.
En el caso de que la web docente nos sirva de apoyo para la clase habitual, incluiremos contenidos que complementen y amplíen lo visto en clase, con ejercicios, pruebas de auto-evaluación, tutoría on-line y con referencias a webs de donde extraer la información para realizar cualquier actividad relacionada con la asignatura.
3.Organización: una vez definidos los objetivos debemos recopilar todo el material gráfico y escrito que incluiremos en la web. Seguramente más adelante nos encontraremos que es necesario crear nuevos contenidos, pero si estamos organizados bastará simplemente con incluirlos donde corresponda. Una vez definidos claramente los objetivos y disponer del material necesario es hora de organizarlo. Cuánto más grande sea el sitio web, más organización necesitaremos.
En una web docente incluiremos materiales escritos (apuntes, exámenes, documentación,...) que debemos recopilar para organizarlos. Es conveniente que el material adopte un formato lo más parecido para que se identifique con la web. Igualmente, debemos decidir si el material será visible on-line o habrá que descargarlo previamente (se usan normalmente los formatos zip y pdf)
Capítulo 2:Cómo planificar el sitio web (II)Continuamos con todos los aspectos que debe tener en cuenta para crear una página web.
4.Crear la estructura de directorios: una vez que hemos organizado nuestras ideas y recopilado el material necesario para la web, es el momento de organizar los contenidos en un sistema de archivos y directorios de forma ordenada. A este proceso se le llama mapeado del sitio web. Este trabajo es una parte esencial en la planificación del sitio web, ya que nos ayudará a especificar las trayectorias correctas de los enlaces, imágenes y documentos que vayamos a incluir en la web.
Para ayudarnos a visualizar la estructura de directorios es recomendable dibujar una especie de organigrama en el que vayamos colocando los directorios en función de su importancia desde un nivel superior a otros inferiores.
En una web docente se suelen emplear directorios como programación de la asignatura, ejercicios, exámenes, material de consulta, etc.
5.Crear un guión: es el momento de hacer un boceto de la página principal y de cada página que esté enlazada a ésta, incluyendo todos los elementos que creamos necesarios (texto, imágenes, botones, hipervínculos,...) sin preocuparnos demasiado por los ajustes, es simplemente un boceto. Es importante recordar que los visitantes de una web no lo van a leer completamente sino que lo que desean es encontrar rápidamente lo que les interesa, por lo que habrá que establecer una estructura adecuada de enlaces entre las páginas. El movimiento de un lado a otro del web debe ser lo más intuitivo posible para facilitar el trabajo del visitante. Un sitio web en el que sea difícil encontrar aquello que buscamos será abandonado rápidamente.
6.Desarrollo del aspecto externo: el siguiente paso será la representación visual del sitio web. Es esencial la combinación de color, gráficos, tipos y texto que nos ayuden a expresar lo que queremos comunicar con estilo e impacto. Los editores de páginas web incluyen recursos que ayudarán a los no especialistas en diseño a conseguir una estética adecuada.
Cuestiones a tener en cuenta.- Estos son algunos aspectos que debe seguir para conseguir un buen desarrollo de su web.
-Espacio y equilibrio: cantidad de espacio que los elementos de la página ocupan, así como la cantidad de espacio vacío y cómo equilibrar todo esto. Normalmente a los diseñadores les gusta ver abundante espacio en blanco entre los elementos, lo cual facilita la legibilidad y no agobia la vista.
-Color: dependiendo del tipo de web incluiremos colores brillantes o suaves. En el caso de una web docente es preferible colores suaves que faciliten la navegación y lectura de la documentación.
-Tipo de letra: esta característica añade personalidad al sitio web pero es preferible no incluir muchos tipos de letra en una página web.
-Formas: en casi todas las páginas webs se emplean rectángulos para colocar las cabeceras de página o titulares. Pero podemos emplear cualquier otra forma geométrica que nos ayudará a crear un sitio con personalidad.
-Textura o gráficos de fondo: hay que asegurarse de que el texto sea claro y fácil de leer.
-Consistencia: emplear por todas las partes un mismo esquema de colores que facilite la navegación.
Capítulo 3:Qué hacer y no hacer en el diseño webHay que tener en cuenta que hay que captar la atención del lector en un breve espacio de tiempo, por lo que habrá que tener cuidado con el aspecto de la web, la velocidad de carga y todos los factores que hagan la visita más agradable a la web.
Sugerencias.-Veamos algunas ideas.
-Colocar un título corto, descriptivo y preciso.
-Proporcionar pistas sobre el contenido en la parte superior de la página. No suponga que nadie va a desplazarse hasta la parte inferior.
-Si la página ocupa más de tres "pantallas", dividirla en más de una página;
equilibrar el espacio en blanco, las imágenes grandes y pequeñas y los bloques de texto para dotar a la página de interés y variedad.
-Usar un color para el texto y enlaces que complemente al del fondo, en lugar de que se confundan con él.
-No crear dos enlaces con el mismo nombre que lleven a sitios diferentes o dos enlaces con diferentes nombres que lleven al mismo sitio.
-Ofrecer siempre una forma de retornar a través de un enlace a la página principal.
-Evitar generalidades como "¡Haga clic aquí!".
-Emplear imágenes comprimidas en los formatos adecuados.
-Emplear vistas en miniatura como enlaces a imágenes mayores.
-Recordar que el acceso a Internet se realiza por diferentes navegadores.
-Mantener nombres de archivos cortos.
-Informar a la gente del tamaño de los ficheros descargables.
-Obtener el permiso necesario para emplear texto o imágenes creados por otros.
-Crear un enlace con la dirección de correo del webmaster.
En Internet existen numerosas páginas que nos dan consejos sobre como diseñar páginas web, ofrecen modelos de páginas e incluso se critican páginas para detectar los fallos más comunes.
Capítulo 4:Creación de páginas web básicasExisten multitud de programas de diseño web, que nos van a permitir, sin conocer el lenguaje HTML, llegar a diseñar todo tipo de páginas. Los más usados son Microsoft FrontPage, Macromedia Dreamweaver y Adobe Golive. Además, existe software gratuito con el cual también podemos hacer diseños similares.
En este curso aprenderemos a manejar el FrontPage, programa de Microsoft que va incluido dentro de la suite Microsoft Office. En concreto vamos a analizar la versión FrontPage 2000.
Cómo empezar.- Para empezar debemos tener claros los conceptos de Web y Página para FrontPage2000. Si creamos un sitio web nos va a generar una carpeta en la cual se va a generar automáticamente una página principal (llamada index.htm) y dos carpetas llamadas images y private, donde guardaremos archivos. Podemos elegir el tipo de web que deseamos a partir del asistente y especificamos la ubicación en el disco duro.
Si creamos una página web, nos creará una página independiente y no generará las carpetas que aparecen en el sitio web. ¿Cómo lo hacemos?
Hacemos clic en Archivo, Nuevo y seleccionamos Web o Página en función de lo que queramos crear. Si creamos un sitio web podemos disfrutar de las utilidades que nos proporciona FrontPage a través de la barra de vistas.
Es muy importante que tengamos muy claros los nombres con los que vamos a guardar nuestros archivos y tener cuidado al utilizar mayúsculas y minúsculas en los nombres ya que serán reconocidos como diferentes. En la gran mayoría de los casos la página principal de nuestro sitio web se denominará index.htm y será la que aparezca cuando el internauta escriba la dirección de nuestra web.
Capítulo 5:Las vistas en FrontPageCuando abrimos FrontPage lo primero que nos encontramos es que tiene una apariencia similar a los programas de la familia Office, con barra de título, de menús, herramientas muy similares. La particularidad es que en la parte izquierda de la pantalla aparece lo que se llama la barra de vistas, que analizamos a continuación. Para activar dicha barra de vistas si no lo está entraremos en la opción Ver y luego haremos un click sobre la opción Barra de vistas para que se active. Si ésta ya tiene una v delante significa que ya está activada.
Cada vista muestra diferentes tipos de información sobre el web y permite trabajar con el sitio web de diferentes formas:
1.Vista página: muestra las páginas individuales con la que se está trabajando, permitiendo hacer cambios o ajustes.
2.Vista carpetas: contiene dos partes, con la lista detallada de páginas y ficheros de la carpeta seleccionada del sitio web. Se utiliza esta vista para la gestión de ficheros (cambiar nombres, crear carpetas).
3.Vista Informes: se emplea como ayuda para la gestión de las páginas dentro de la web. FrontPage trabaja con un sitio web constituido por partes más pequeñas (archivos).
4.Vista Exploración: También conocida como mapa del sitio. Nos muestra la estructura de navegación del sitio web.
5.Vista Hipervínculos: Ofrece todos los hipervínculos de la web.
6.Vista Tareas: Para mantener una lista de tareas en curso a medida que construye el sitio web. Es especialmente útil si en el sitio trabaja más de un desarrollador.
Si trabajamos en la edición de una página para añadir y modificar elementos (texto, imágenes, gráficos,...) utilizaremos la vista página, que a su vez tiene otras tres vistas:
1.Vista Normal: en esta opción vemos la página web en formato WYSIWYG ("What you see is what you get" , "Lo que ves es lo que obtienes"). Para diseñar la página web colocamos el texto, imágenes y demás elementos de la misma forma que lo veremos en Internet.
2.Vista HTML: podemos visualizar el código HTML si queremos retocarlo para hacer algo que no podamos con FrontPage o para insertar código HTML que hemos descargado de Internet. En esta vista es necesario conocer los fundamentos y la estructura del lenguaje HTML para poder intervenir en él sin errores.
3.Vista previa: Aquí podremos comprobar como se visualizará nuestra página en el navegador. Es importante advertir que al utilizar FrontPage, al activar Vista previa se verá la web en el Internet Explorer de Microsoft y éste presenta algunas diferencias de presentación de páginas con los demás navegadores como el de Netscape.
Después de crear un sitio web en FrontPage es casi seguro que desearemos añadir nuevas páginas al sitio. La mayoría de la construcción de las páginas se hará empleando la vista página, a través del menú Archivo - Nueva página, que funciona de forma idéntica a todos los programas.
Es importante crearnos una estructura de carpetas y subcarpetas para guardar todas las páginas que vayamos creando y todos los ficheros (GIF, JPG, ZIP, PDF,. ...) que incluyamos en nuestro sitio web.
Para comenzar a trabajar en la vista Página, crearemos un nuevo web de FrontPage o abriremos uno ya existente. Al echar un vistazo a la interfaz reconoceremos los elementos propios de Office, ya que FrontPage trabaja de forma muy similar al procesador de textos. Hay disponibles una serie de barras de herramientas:
-Barra de herramientas estándar: contiene los botones para creación, apertura, guardado e impresión de páginas además de tareas específicas web como crear hipervínculos e insertar imágenes.
-Barra de herramientas formato: contiene los botones y listas desplegables para dar formato al texto.
-Barra de herramientas DHTML (HTML dinámico): permite añadir efectos especiales a la página, como intercambio entre dos imágenes.
-Barra de herramientas imágenes: controlar el formato de las imágenes y convertir las imágenes en mapas de imagen.
-Barra de herramientas Tablas: para simplificar el uso de las tablas en FrontPage.
Una vez vista la interfaz de FrontPage ya podemos crear una página nueva en la cual incluiremos los elementos que necesitemos (texto, imágenes, hipervínculos, tablas, archivos).
Es muy conveniente poner título a cada página que editemos ya que es el nombre que aparecerá en la barra de título del navegador y ayuda a identificar el contenido de la página. Para poner el título a una página pulsamos botón derecho del ratón en la página y Propiedades de página hasta que aparece una ventana en la cual podemos poner el título:
Capítulo 6:Formatos de texto e imágenesPara añadir texto a una página, simplemente hay que abrirla y comenzar a teclear en la vista página, o bien copiar y pegar un texto de archivo de texto. El funcionamiento es exactamente igual que el de un procesador de textos.
Los párrafos en HTML tienen una diferencia con los párrafos en documentos de texto y es que no son la unidad estándar de formato sino que se trata de una unidad visual de elementos separados en una página, donde estos elementos son texto, imágenes o cualquier cosa.
En la vista página la inserción de un salto de párrafo se consigue pulsando Intro. En cambio, si lo que queremos es un salto de línea lo haremos a través del menú Insertar, Salto de línea o con la combinación de teclas Mayús + Intro. Cuando queremos hacer un salto de línea nos aparece la siguiente ventana para configurarlo.
Salto de línea normal: inserte un salto de línea entre la imagen y el texto.
Hasta el margen izquierdo: mueva la siguiente línea de texto hacia abajo hasta que quede el margen derecho libre para la imagen.
Hasta el margen derecho: mueva la siguiente línea hacia abajo y hacia la derecha.
Hasta ambos márgenes: mueva la siguiente línea de texto hacia abajo hasta que queden libres ambos márgenes para la imagen.
Alineación de párrafos: por defecto se alinean con el borde izquierdo de la ventana, pero se puede cambiar su alineación a través de los botones de la barra de herramientas:
Para aplicar la alineación justificada debemos seleccionar un párrafo, y luego seleccionar el menú Formato, Párrafo, en el siguiente cuadro. En esta ventana podemos configurar la alineación del párrafo, las sangrías del texto, el espaciado entre párrafos y el interlineado dentro de un párrafo.
Es frecuente la utilización de algunos símbolos, conocidos como caracteres especiales. A menudo emplearemos los símbolos ® (registered), © (copyright) y otros más que podemos encontrar en el menú Insertar, Símbolos.
La corrección ortográfica.- Al igual que con cualquier procesador de textos, una vez hayamos editado nuestra página es imprescindible que pasemos el corrector ortográfico para detectar posibles errores y evitar la mala imagen que causa una web con faltas gramaticales y de ortografía. Para ello seleccionamos el menú Herramientas, Ortografía.
Formato de texto.- Modificar el formato de texto se hace de forma similar a un procesador de textos. A partir de la barra de herramientas Formato podemos modificar el tipo y tamaño de la fuente, ponerla en negrita, cursiva o subrayado, cambiar el color o el relleno de la fuente.
Numeración y viñetas.- Para hacer esquemas numerados tenemos la misma herramienta que en los procesadores de textos. Podemos hacer esquemas con viñetas y con números y lo haremos a través de los iconos correspondientes en la barra Formato o a través del Menú Formato, Viñetas y numeración.
Capítulo 7:Trabajar con imágenesUna web está compuesta por mucho más que simple texto. Un sitio web se diseña para ser gráfico, en el cual vamos a añadir imágenes, tanto estáticas como dinámicas. Podemos añadir imágenes prediseñadas de FrontPage, imágenes que tengamos guardadas en el disco duro o imágenes de Internet.
Es fundamental conocer que las imágenes deben estar en formato GIF o JPEG para poder ser visualizadas por la mayoría de los navegadores. Las características de ambos formatos son las siguientes:
GIF: apropiado para logotipos y está comprimida de forma que no pierde definición. El máximo número de colores que soporta es de 256. Admite la propiedad de transparencia, que permite que las imágenes compartan el mismo color de fondo de la página. Igualmente se pueden crear los GIF animados como sucesión de diferentes imágenes.
JPEG: apropiado para imágenes complejas y para fotografía. JPEG comprime y destruye parte de la información de la imagen. Soporta hasta 24 bits de colores y no admite transparencias.
Para insertar una imagen podemos hacerlo a través del botón de la barra de herramientas Estándar.
Haciendo clic en este botón insertaremos una imagen desde una carpeta de nuestro disco duro. Es muy importante guardar todas las imágenes en una carpeta independiente de donde guardamos los archivos html.
Una vez que la imagen está en la página podemos cambiar algo en ella, como la alineación, el tamaño, el borde e incluso añadir un texto que aparecerá cuando situemos el ratón encima de la imagen. Para ello haremos clic en el botón derecho de la imagen para que nos aparezca la siguiente pantalla.
Utilización de divisores.- Los divisores son líneas horizontales que emplearemos para situarlos debajo e las cabeceras, entre las partes de un artículo o en cualquier lugar que deseemos. Existen dos tipos de divisores: reglas horizontales (<hr> en lenguaje HTML; Insertar, Línea horizontal en FrontPage) y gráficos que parecen líneas.
Para insertar un divisor pulsamos en el menú Insertar, Línea horizontal. Posteriormente podemos cambiar las propiedades de dicha línea (anchura, altura, color, sombreado) pulsando con el botón derecho del ratón al divisor de forma que nos aparezca esta pantalla.
Utilización de fondos.- El color de fondo en una web es fundamental desde el punto de vista del diseño, hay que elegir fondos con colores simples y armoniosos, que "no hagan daño a la vista". Seguramente pocos aguantaríamos visualizar una web con un fondo naranja chillón y un texto verde brillante.
Para establecer el color de fondo de una página, nos situamos en la vista normal y allí seleccionamos Formato, Fondo o con el botón derecho del ratón en la página que estamos creando, activar Propiedades de página hasta llegar a la siguiente ventana.
En esta ventana podemos modificar diferentes aspectos de la página, como son los colores de fondo, texto y de los hipervínculos
Si queremos colocar una imagen como fondo de la web y si queremos añadirle una marca de agua, para que aparezca en el fondo de forma estática.
Capítulo 8:Cómo introducir imágenes en una webEn una página podemos insertar imágenes en cualquier lugar, pudiendo incluir en ellas hipervínculos a otra página o a una dirección web o cuenta de correo electrónico. En FrontPage para incluir una imagen lo podemos hacer de dos formas:
1.En el menú Insertar, Imagen podemos seleccionar una imagen prediseñada de FrontPage o una imagen que contenga nuestro disco duro. Nos aparecen las siguientes ventanas:
Imágenes prediseñadas
Imágenes del disco duro
El funcionamiento de las imágenes prediseñadas es idéntico que con Word o Excel. Seleccionamos en la carpeta donde guardamos las imágenes aquella que queremos incluir en la página.
Otra forma de insertar una imagen es a través del botón Insertar imagen que está en la barra de herramientas estándar. El resultado obtenido es el mismo que haciéndolo de la otra forma.
Una vez que hemos insertado una imagen podemos cambiar sus propiedades haciendo clic con el botón derecho en la imagen y seleccionando la opción Propiedades de Página aparece el siguiente cuadro de diálogo:
Podemos modificar el origen de la imagen, eligiendo el archivo GIF o JPG que se corresponde con el que queremos insertar en la web. Podemos darle a la imagen GIF la propiedad de transparente, añadir un texto que se mostrará cuando situemos el ratón encima de la imagen (en forma de etiqueta amarilla) y especificar un hipervínculo.
Es habitual incluir en una web imágenes que hagan más agradable la visita a la página, además de que son imprescindibles en el entorno gráfico web. En Internet podemos encontrar todo tipo de imágenes: fotografías, dibujos, imágenes animadas, etc, que podemos encontrar a través de los buscadores como Google, que incorpora un buscador de imágenes donde utilizando las mismas técnicas de búsqueda podemos encontrar todo tipo de fotografías.
Es imprescindible tener en cuenta el tamaño de las imágenes que vayamos a incluir en una página web ya que cuanto mayor sea supondrá un tiempo de carga superior de la página y esto puede llevar al visitante a abandonar la web dependiendo de la conexión que tenga. Los formatos utilizados para las imágenes son GIF y JPEG por su adecuado grado de compresión y ser visibles por todos los navegadores. FrontPage no es programa de retoque de imágenes, pero dentro de la familia de Microsoft Office existe PhotoDraw. Otros programas de tratamiento de imágenes son los siguientes:
-Adobe Photoshop: Uno de los programas más utilizados.
-Corel Draw: Otro programa muy completo.
-UltimateFX: Gratuito y muy sencillo de manejar. En Ciberconta podemos descargarlo y consultar un tutorial.
Una vez que hemos añadido a una página texto, imágenes y modificado el fondo a nuestro gusto ya podemos decir que tenemos una página web vistosa, pero nos queda por añadir la pieza fundamental en una Web: LOS VÍNCULOS.
Capítulo 9:Inserción de componentesCon FrontPage podemos añadir componentes para que sea más atractivo, más interactivo o proporcione más información. Estos componentes son los siguientes:
-Comentarios
-Contadores de visitas
-Fecha y hora
-Marquesina
-Botones activables
Los comentarios: los comentarios se introducen para que sean visibles en la Vista Normal solamente. Proporciona información sobre asuntos referentes a la edición de la página web.
Los contadores: los contadores de visitas sirven para saber cuánta gente visita nuestra web. FrontPage nos proporciona un contador con diferentes formatos, pero hay que tener en cuenta que el servidor donde tenemos alojada la página deberá tener instaladas las extensiones de FrontPage para que se vea en Internet. Cuando lo insertamos nos aparece la siguiente ventana, en la que podemos elegir el formato del contador.
La fecha y la hora: la fecha y la hora normalmente se introducen en una web la fecha de la última actualización para informar al visitante de la web. En el momento en que actualicemos la página la fecha cambiará. Es un componente muy útil y casi necesario en una web.
Marquesina: la marquesina consiste en un texto que fluye a lo ancho de la página, aunque con otros formatos como los GIF animados o Flash se pueden conseguir efectos mucho más logrados y atractivos.
Botones activables: (Insertar, Componente, Botón Activable) consiste en crear un botón al que haciendo clic va a realizar una determinada acción. Se pueden crear efectos cuando pasamos el ratón por encima, cambiando la imagen, por ejemplo. El problema es que genera un applet de Java que tarda bastante en cargarse y puede llegar a no ser visible en función del navegador del internauta, con lo que perdería toda su utilidad. Nos aparece la siguiente ventana para configurar el botón.
Podemos modificar el texto del botón, añadirle un vínculo, modificar colores, medidas y efectos.
Capítulo 10:Los hipervínculosLos hipervínculos, enlaces o links son los elementos que diferencian la web de otros medios. Un hipervínculo supone enlazar la página web que estamos visualizando con otra página web; otra sección de la misma página; con un archivo; un servidor FTP; un archivo o una aplicación para descargar; una secuencia de sonido; vídeo o multimedia; una dirección de correo o un grupo de noticias.
Es posible acceder a través de la web a cualquier sitio empleando hipervínculos. A través de FrontPage es muy sencillo crear un hipervínculo a través del botón Hipervínculo de la barra de herramientas estándar o a través del menú Insertar, Hipervínculo.
Podemos crear los hipervínculos a partir de texto e imágenes, de forma que pulsando en ellos nos lleve a otra parte de la misma página, a otro archivo o página de nuestro sitio web o a una dirección URL. Para ello seleccionamos el texto o la imagen y pulsamos Insertar, Hipervínculo. Nos aparecerá la ventana siguiente:
En esta ventana podemos crear todos los tipos de hipervínculos que contienen las páginas web. Veamos a continuación las instrucciones que debemos seguir para cada uno de ellos:
1.Enlazar a una página desde nuestra web: se trata de un enlace interno y consiste en enlazar un punto a otro documento dentro del mismo web. Supongamos que tenemos dos páginas web creadas, uno.htm y dos.htm. Para crear un link en uno hacia dos, simplemente abrimos la ventana anterior y buscamos en el directorio en que guardamos los archivos de la web la página dos.htm, lo seleccionamos y pulsamos aceptar.
2.Enlazar a una página en la World Wide Web: se especifica el camino completo hacia el archivo, poniendo la dirección URL. Por ejemplo, si queremos colocar un enlace con la página principal de la Universidad de Zaragoza haremos lo siguiente:
3.Enlazar con una cuenta de correo: es habitual crear un enlace a una cuenta e-mail en una página web, ya sea para enviar correos al webmaster o hacer sugerencias. El punto de partida siempre es el mismo, seleccionamos el texto o imagen donde queremos hacer el enlace y pulsamos Insertar, Hipervínculo. En la ventana que nos aparece seleccionaremos el botón de enlace a correo y nos aparecerá una ventana en la que debemos escribir el nombre de la cuenta. Observaremos que al crearse el enlace nuestra dirección de correo vendrá precedida por "mailto:"
4.Enlazar con una página nueva: en ocasiones puede ocurrir que hemos enlazado a una página que todavía no hemos creado. Podemos hacer las dos cosas a la vez, el enlace y crear la página. Para ello, en la ventana de Insertar, Hipervínculo elegiremos el botón para enlazar con nueva página. Posteriormente, elegiremos el tipo de página que queramos crear y ya podremos entrar a editarla.
5.Enlazar con otra parte dentro del mismo documento: los enlaces dentro del mismo documento permiten a los visitantes de su página hacer clic y saltar rápidamente a otra parte de ese documento. Por ejemplo, esto es habitual cuando se crea un índice al principio del documento para que los usuarios puedan ir saltando por los apartados del índice. Igualmente es conveniente crear otro enlace para volver a la parte superior. A las partes del documento con la que queremos enlazar se le denomina marcador. El procedimiento para crearlo es el siguiente:
a)En la barra de menús, seleccionar Insertar, Marcador en aquel lugar en el que queramos situarnos después de enlazar. Nos aparecerá la siguiente ventana:
En esta ventana elegiremos el nombre del marcador y pulsamos Aceptar. A medida que vayamos añadiendo marcadores en el documento se irán añadiendo en la lista "Otros marcadores" para que luego al crear el hipervínculo elijamos el que nos interese.
b) Una vez creado el marcador, es el momento de crear el enlace. Para ello, en la barra de menús seleccionamos Insertar, Hipervínculo hasta que nos salga la ventana inicial y elegimos de la lista desplegable el marcador con el que queramos enlazar de la siguiente forma:
Estas son las 5 formas de crear hipervínculos en una página web, de esta forma podemos enlazar con cualquier archivo, página, email o parte del documento que queramos y le daremos una mayor amplitud de contenidos al sitio web. A una página web podemos llegar conociendo su dirección (que en ocasiones es difícil debido a los nombres largos de las direcciones URL) o a través de enlaces en otras páginas.
Además, podemos configurar como queremos que se abra la nueva página después de hacer clic en el hipervínculo. Se puede abrir en la misma ventana o crear una nueva ventana para no perder la página anterior. Esta última opción es muy útil, ya que es habitual navegar en Internet a través de los enlaces y es posible perder u olvidar la página de referencia inicial.
Para ello, en la ventana del menú Insertar, Hipervínculo podemos seleccionar como queremos que nos aparezca la página con la que hemos enlazado.
Entre los destinos comunes de un hipervínculo podemos elegir Toda la página (se abrirá en la misma ventana que estamos) o en Nueva ventana (la nueva página se abrirá aparte). El resto de destinos comunes se refiere a los marcos que veremos más adelante.
Capítulo 11:Las tablasLas tablas en HTML son como las tablas que podemos ver en libros, hojas de cálculo y otros documentos. Constituyen una forma de organizar y presentar información a través de filas y columnas que agrupan elementos relacionados. En el diseño web son fundamentales y constituyen actualmente la piedra angular en el diseño de páginas web, ya que la mayoría de las páginas no serían posibles sin el uso de tablas.
Ejemplos de páginas creadas con tablas son las siguientes: You are not allowed to view links.
Register or
Login, You are not allowed to view links.
Register or
Login, You are not allowed to view links.
Register or
Login, You are not allowed to view links.
Register or
Login, You are not allowed to view links.
Register or
Login, You are not allowed to view links.
Register or
Login, You are not allowed to view links.
Register or
Login y You are not allowed to view links.
Register or
Login.
Observando estas páginas podemos ver que en HTML las tablas se emplean para crear columnas de texto, para integrar textos e imágenes, para crear márgenes amplios o cuadros laterales y para cualquier otro uso que le sepamos dar.
Insertar una tabla con FrontPage es muy fácil y basta con usar el botón Insertar tabla de la barra de herramientas estándar de FrontPage. Pulsando este botón nos aparece un pequeño menú con el que seleccionaremos el número de filas y columnas. Igualmente podemos insertar la tabla a través del menú Tabla, Insertar tabla.
Podemos seleccionar el número de filas y columnas y todo lo relativo en cuanto al diseño de la tabla (alineación, tamaño del borde, margen y espaciado entre las celdas y ancho de la tabla). Es habitual que aunque el diseño de la página se haga con tablas, al visualizarla en el navegador no aparecen los bordes de dicha tabla. El uso que le damos a la tabla es para organizar todos los elementos de la web.
Una vez creada la tabla es interesante que abramos la barra de herramientas Tablas, ya que incluye todas las herramientas para manipular una tabla. Para mostrar esta barra, en la barra de menús Ver, Barras de Herramientas, Tablas.
El significado de cada uno de los botones, de izquierda a derecha, es el siguiente:
-Dibujar una tabla o un límite de celda
-Borrar los bordes entre celdas
-Añadir una fila por encima de la fila seleccionada
-Añadir una columna a la izquierda de la columna seleccionada
-Eliminar las celdas seleccionadas
-Fusionar las celdas seleccionadas en una sola
-Dividir por la mitad la celda que está seleccionada
-Alinear el texto con el borde superior de la celda seleccionada
-Centrar el texto verticalmente en la celda seleccionada
-Alinear el texto verticalmente en la celda seleccionada
-Igualar el espacio disponible entre filas
-Igualar el espacio disponible entre columnas
-Configurar el color de fondo para la tabla
-Ajusta automáticamente las columnas y las filas, una vez que ha terminado de dibujar la tabla.
El uso de las tablas es similar al del resto de programas de Microsoft Office, con lo que el usuario habituado a manejar esta suite no tendrá ningún problema en trabajar con las tablas de FrontPage. Es habitual que las tablas se visualicen en Internet sin los bordes, ya que la utilidad mayor es la organización de los contenidos (textos e imágenes) en cuadrículas y es más estético que los bordes no aparezcan en la web.
En una tabla podemos colocar casi cualquier elemento HTML y ello incluye también otras tablas, lo que se conoce como anidamiento. Es una de las herramientas fundamentales en el diseño web, la posibilidad de generar tablas dentro de otras tablas para poder cambiar fondos, tipos de letra, bordes, etc. de una forma más eficiente.
En todas las celdas de una tabla podemos alinear texto, cambiar la anchura y altura, personalizar el fondo y los colores. La forma de realizar estas tareas es seleccionando las celdas y a través del menú tabla, propiedades de celda y cambiar las opciones deseadas. Finalmente nos aparece esta ventana.