Edición y diseño web Contenido dfgk fgklfd kglfkgl fkgl fkgl kflg kflgk INTRODUCCIÓN AL DISEÑO WEB ................................................................... 1 Conceptos generales ....................................................................................... 2 Planificación y diseño preliminar ....................................................................... 3 PRESENTACIÓN Y OPERACIONES DE GESTIÓN............................................... 8 Acerca de FrontPage 2003 ............................................................................... 9 Descripción de la Ventana principal ................................................................... 9 Crear un nuevo sitio ...................................................................................... 11 Crear una página Web ................................................................................... 14 Abrir un sitio Web ya creado .......................................................................... 16 Abrir una página ........................................................................................... 17 Manejo de varias páginas abiertas .................................................................. 18 Guardar una página ...................................................................................... 19 Panel de Alternancia ...................................................................................... 21 Propiedades de la página ............................................................................... 25 Cerrar páginas, sitios y finalizar la sesión ......................................................... 29 EDITAR Y AGREAR INFORMACIÓN A UNA PÁGINA ....................................... 31 Editar en FrontPage 2003............................................................................... 32 Agregar texto a una página ............................................................................ 33 Manejo de textos .......................................................................................... 33 Mover y copiar información ............................................................................ 36 Insertar archivos .......................................................................................... 40 Insertar elementos especiales ........................................................................ 41 Buscar, reemplazar y corregir ortografía .......................................................... 45 ESTABLECER FORMATOS A LAS PÁGINAS ..................................................... 51 Introducción ................................................................................................. 52 Dar formato al texto ...................................................................................... 52 Establecer formatos a párrafos ....................................................................... 54 Creación de Listas ......................................................................................... 58 Bordes y sombreados .................................................................................... 62 Aplicar y crear estilos .................................................................................... 64 Efectos de Html dinámico ............................................................................... 66 Temas ......................................................................................................... 68 Efectos de transición de páginas ..................................................................... 75 TABLAS Y CAPAS .......................................................................................... 76 Introducción ................................................................................................. 77 Tablas HTML normales ................................................................................... 77 Tablas de Diseño .......................................................................................... 88 Capas .......................................................................................................... 95 Agregar una capa ......................................................................................... 96 Operaciones con capas .................................................................................. 98 Comportamientos ......................................................................................... 99
INSERCIÓN Y TRATAMIENTO DE ELEMENTOS GRÁFICOS (1 era parte) ...... 101 Introducción ............................................................................................... 102 Objetos de dibujo ....................................................................................... 102 Imágenes de la Galería Multimedia de Microsoft .............................................. 113 Imágenes desde archivo .............................................................................. 119 Agregar archivos Multimedia ........................................................................ 121 Modificar propiedades de imágenes y archivos Multimedia................................ 121 INSERCIÓN Y TRATAMIENTO DE ELEMENTOS GRÁFICOS (2 da parte) ....... 126 Cuadro de ubicación .................................................................................... 127 Usar herramientas de imagen de FrontPage ................................................... 128 Galería de fotografías .................................................................................. 135 Formato de archivos gráficos ........................................................................ 139 HIPERVÍNCULOS ........................................................................................ 141 Hipervínculos ............................................................................................. 142 Administrar hipervínculos ............................................................................. 144 Marcadores ................................................................................................ 146 Crear un hipervínculo a un Marcador ............................................................. 148 Mapa de imagen ......................................................................................... 149 MARCOS Y BORDES COMPARTIDOS ............................................................ 152 Concepto de Página de Marcos ..................................................................... 153 Crear una página de marcos ......................................................................... 153 Guardar la Página de marcos ........................................................................ 155 Operaciones con marcos .............................................................................. 156 Propiedades de los marcos ........................................................................... 157 Marcos flotantes ......................................................................................... 159 Bordes compartidos .................................................................................... 161 Estructura de exploración ............................................................................ 162 Barra de exploración ................................................................................... 165 Titular de página......................................................................................... 173 COMPONENTES WEB .................................................................................. 175 Introducción ............................................................................................... 176 Insertar Componentes Web .......................................................................... 176 Efectos dinámicos ....................................................................................... 177 Hojas de cálculo y gráficos ........................................................................... 179 Contador de visitas ..................................................................................... 182 Galerías de fotografías ................................................................................. 182 Contenido incluido ...................................................................................... 183 Barra de vínculos ........................................................................................ 185 Tablas de contenido .................................................................................... 185 Controles avanzados ................................................................................... 189
INTRODUCCIÓN AL DISEÑO WEB Conceptos generales Planificación y diseño preliminar
Página 1 de 196
Conceptos generales Página Web Una página Web es un documento que contiene información específica y que puede ser accedido a través de Internet. Es la unidad básica del World Wide Web. Esta puede contener texto, imágenes y otros elementos. Podremos a través de ella y según el tipo de página ejecutar diferentes acciones, como acceder a otras secciones de la misma página, acceder a otras páginas u otros sitios, ingresar datos, realizar búsquedas etc… Sitio Web Un sitio Web es una colección de páginas Web. Tiene una única dirección, que identifica su ubicación. La mayoría de los sitios tienen, decenas, cientos o incluso miles de páginas. Generalmente, los sitios poseen una estructura similar, lo cual nos puede servir en ocasiones para encontrar fácilmente algo que buscamos, o para entender cómo funcionan los enlaces en las páginas, entre otras cosas. Dirección URL Es la abreviatura de Uniform Resource Locator. Indica la dirección de Internet de la página que estamos viendo actualmente. Una URL completa (http://www.microsoft.com/ie/default.asp) incluye, el tipo de protocolo de Internet que estamos usando (http://), la dirección del sitio Web (dominio) al que estamos accediendo (www.microsoft.com) y la ubicación exacta y nombre del recurso (/ie/default.asp). Dominio Es el nombre que se le asigna a la dirección de una computadora. Todas las computadoras conectadas a Internet - también la tuya - tienen asignadas una dirección única llamada IP. Estas direcciones son una serie de números separados por puntos, por ejemplo: 200.40.198.134. Un sitio tiene una dirección IP, la cual podemos utilizar para conectarnos con un navegador. Pero, imagínese si tuviésemos que recordar direcciones como esa... ¡sería demasiado complicado! Para poder encontrar y memorizar sitios fácilmente, se crearon los DNS (Domains Names Servers / Servidores de Nombres de Dominios) que se encargan de "traducir" los nombres de los sitios en direcciones IP para poder ser encontrados. Por ejemplo si introduces en tu navegador www.redqualitas.com.uy, un DNS buscará en su base de datos la dirección IP correspondiente a ese nombre y te conectará con el sitio.
Página 2 de 196
Entonces, ¿dónde está el sitio? El sitio (los archivos que lo componen) puede estar en cualquier computadora que tenga un servidor conectado a Internet. Existen empresas que brindan lo que se llama servicio de hosting, que es el espacio destinado a un sitio. Entonces, un sitio se encuentra realmente en una computadora, la cual reserva un lugar para ese sitio dentro de su directorio.
Planificación y diseño preliminar Cualquiera sea el tamaño o propósito de nuestro sitio, requiere una planificación y organización de su contenido para obtener una mejor apariencia, rápida construcción y fácil mantenimiento. Una buena planificación del sitio, atraerá más visitantes y abaratará los costos de su ejecución. Cada sitio debe tener un consistente conjunto de página para determinado propósito. Estas páginas deben ser unificadas por un tema, un mismo formato y una misma organización. Las palabras, imágenes, colores y trazados deben dar un mensaje al visitante que justifique la existencia del sitio. Antes de comenzar a crear el sitio deberemos definir la arquitectura del mismo, a través de la cual será posible conseguir las metas de organización, usabilidad y calidad. A continuación se muestra una lista de parámetros que se deberán definir e investigar en forma previa:
Objetivos Audiencia a la cual va dirigido Contenidos Estructura Diseño Visual o formato
1.- Objetivos A través de esta etapa se busca definir cuáles serán los objetivos centrales que deberá tener el Sitio Web y establecer la forma de cumplirlos. Estos objetivos dependerán de cada sitio. Supongamos que deseamos realizar un sitio Web para dar a conocer los productos y servicio de una empresa, entonces para generar objetivos que sean válidos y comprensibles, es aconsejable realizar una lista utilizando frases que expresen las acciones a realizar. Por ejemplo: Presentar información actualizada de las ofertas que se realizan, Recibir preguntas de los
Página 3 de 196
usuarios acerca de los servicios que se prestan, Crear una base de datos de clientes para poder enviarles ofertas en forma posterior, etc. Una forma de llegar más concretamente a los objetivos, es revisar la visión y la misión de la organización a quien pertenecerá el sitio Web, desde la cual podremos obtener las claves que nos permitan definirlos. Una de las primeras metas que se debe cumplir consiste en tener presencia en Internet, se debe entender como tal la entrega de información actualizada, más la proposición de alguna actividad interactiva, mediante el aprovechamiento del estado actual de la tecnología.
2. Audiencia a la cual va dirigido Una vez que se ha terminado adecuadamente la etapa anterior con la generación de los objetivos del sitio, se debe dar un siguiente paso, que es el de determinar las principales audiencias (públicos) hacia las cuales se orientará el sitio. Otra de las metodologías más efectivas, al momento de trabajar en el tema de las audiencias, tiene que ver con la forma en que el equipo de desarrollo responda a dos preguntas: ¿Cuáles son las audiencias previstas? ¿Por qué la gente vendrá a nuestro sitio? Al responder la primera pregunta, será posible determinar hacia quiénes deberemos enfocar el sitio y, por lo mismo, comenzar a tomar decisiones respecto de la forma de navegación, servicios interactivos previstos y otros elementos de despliegue que tendrá el sitio. Al responder la segunda pregunta lo que se busca es que basados en las audiencias posibles, podamos imaginar los tipos de contenidos que ellos vendrán a buscar al sitio.
3. Contenidos Una vez que hemos identificado los objetivos del sitio y la audiencia, debemos proceder a hacer definiciones más concretas que nos permitan decidir qué contenidos son los que va a tener el Sitio Web que desarrollaremos. Para identificar contenidos, debemos utilizar como insumo los materiales que se hayan obtenido en la etapa de identificación de Objetivos y de Audiencias, ya que en ambos la búsqueda giró en torno a las necesidades que tenían los usuarios del sitio.
Página 4 de 196
Para cumplir con una norma general respecto de qué debería contener un sitio, podemos anotar las siguientes, como las más importantes: Acerca de la Institución: entregar información completa referida a Autoridades, Organigrama, Ubicación, Teléfonos, etc. Productos / Servicios: destacar las actividades principales que el usuario puede hacer en el sitio; puede incluir una guía de trámites que facilite las acciones de las personas que acudirán a la institución y que considere servicios interactivos para hacerlos desde el Sitio Web. Novedades de la Empresa: últimas actividades, noticias, etc. Debemos tener en cuenta que esta lista mínima crecerá en la medida de las necesidades de comunicación de cada organización. Con las definiciones hechas hasta ahora, llega el momento de poner en práctica las metodologías que permiten ordenar los contenidos, agrupándolos en conjuntos coherentes y dándoles nombres que los identifiquen, por ejemplo, Quienes somos, Servicios, Productos, Noticias, etc. Junto con la búsqueda de las áreas de contenido que deberá tener el sitio, se debe trabajar también en la definición de lo que se busca que el sitio haga, es decir, los tipos de interacción que se busca incluir. Por ejemplo Formularios de contacto, sistema de envío de una página a un amigo, buscador interno del sitio, descarga de información, etc. El último elemento que debemos desarrollar en esta etapa es la búsqueda de otros sitios en Internet que sean similares o que se dedique al mismo rubro que el de nuestro sitio, con el fin de revisar de qué manera han resuelto los mismos problemas que deberemos atender. Esta actividad comparativa permitirá llegar a las buenas prácticas que es posible adaptar a las necesidades de nuestro sitio, con el fin de asegurarnos métodos de funcionamiento y despliegue de contenidos, que sean coherentes con los objetivos que se han planteado inicialmente. Es importante que se haga una pauta previa de comparación, con el fin de saber de antemano cuáles son los parámetros que se medirán y gracias a eso, optimizar la revisión que se haga. 4. Estructura del Sitio Una vez que hemos hecho el trabajo de identificación de contenidos como se ha indicado en las etapas, debemos avanzar hacia las definiciones relacionadas con la
Página 5 de 196
forma que tendrá el sitio que estamos desarrollando. Ello implicará trabajar en tres áreas concretas, a través de las cuales se definirá la estructura del sitio, el árbol de contenidos y los sistemas de navegación que se ofrecerá a los usuarios para que avancen a través de sus contenidos. Etapa 1 - Creación de la Estructura Se refiere al proceso de identificar la forma que tendrá el Sitio Web que se está desarrollando. En este sentido es importante hacer una diferencia entre estructura y diseño. Etapa 2 - Mapas Permanentes del Sitio Se refiere al proceso de crear un árbol de contenido en el que se muestre de manera práctica cuántas secciones tendrá el sitio en desarrollo y cuántos niveles habrá dentro de cada uno. Cuando se usa la idea de crear un árbol, se refiere exactamente a generar un diagrama que cuente con un tronco, ramas y hojas, para mostrar las zonas principales, secundarias y contenidos finales que se irán incorporando Ejemplo de diseño de árbol:
Dado lo anterior, las recomendaciones para la generación de este árbol son las siguientes: Secciones: debemos intentar que sean las menos posibles, con el fin de concentrar las acciones del usuario en pocas áreas; hay que considerar que cada una de las áreas a integrar en el árbol requerirá de mantenimiento posterior en contenidos, gráfica y funcionalidad, lo que encarecerá el costo final de operación del sitio. Niveles: debemos intentar que el usuario esté siempre a menos de tres clicks del contenido que anda buscando. Por ello no se debería crear más de tres niveles de acceso; esto significa una Portada, una Portada de Sección y los Contenidos propiamente dichos.
Página 6 de 196
Contenidos relacionados: debemos considerar que habrá funcionalidades que estén presentes en todo el sitio. Entre ellas se incluyen elementos como Buscador, Preguntas Frecuentes y Formularios de Contacto. Se recomienda que este tipo de elementos quede fuera del árbol y floten sobre éste, con el fin de indicar que desde todas las páginas habrá enlaces a ellos.
Etapa 3: Sistemas de Navegación Una vez que se cuenta con los árboles de contenido desarrollados en el paso anterior, la tarea siguiente consiste en generar los sistemas de acceso a dichos contenidos en el Sitio Web. A través de estos, los usuarios podrán avanzar por sus diferentes áreas, sin perderse. Al generar el sistema de navegación, se deben tener en cuenta las siguientes características: Consistencia: el sistema debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las páginas. Uniformidad: el sistema debe utilizar similares términos con el fin de que el usuario que lo vea en las páginas confíe en que sus opciones llevan siempre hacia los mismos lugares dentro del sitio. Visibilidad: el sistema debe distinguirse claramente dentro del sitio, con el fin de que el usuario cuente con él, como si se tratara de una guía permanente en el área en que se encuentre del sitio. 5. Diseño Visual Una vez que se ha terminado el trabajo en la estructura, ya se cuenta con los insumos suficientes como para avanzar hacia la generación del diseño visual de las pantallas del sitio, momento en que se utilizarán todos los insumos que se han ido generando en las etapas anteriores. En este primer tema hemos realizado una breve síntesis de las principales variables que deberemos tener en cuenta a la hora de comenzar la creación de un sitio, en el transcurso de los diferentes temas iremos aprendiendo las herramientas que nos permitirán plasmar ese diseño.
Página 7 de 196
PRESENTACIÓN Y OPERACIONES DE GESTIÓN Acerca de FrontPage 2003 Descripción de la Ventana principal Crear un nuevo sitio Crear una página Web Abrir un sitio Web ya creado Abrir una página Manejo de varias páginas abiertas Guardar página Panel de Alternancia Propiedades de la página Cerrar páginas, sitios y finalizar sesión
Página 8 de 196
Acerca de FrontPage 2003 El hecho de que haya sitios Web cada vez más sofisticados, crea la necesidad de disponer de un programa avanzado que esté a la altura de tales destrezas para el desarrollo Web. FrontPage 2003 ofrece tanto la eficacia como las funciones necesarias para la creación de sitios Web profesionales, dinámicos e interactivos, ofreciendo mayor capacidad en tres áreas clave: diseño, codificación y extensión. La versión 2003 mejora en muchos aspectos a sus predecesoras, pues incluye opciones de plantillas y diseño predefinidas, o funciones de secuencias de comandos para implementar fácil y rápidamente un sitio con características interactivas y profesionales.
Descripción de la Ventana principal Al iniciar la aplicación veremos la ventana principal dispuesta de la siguiente forma:
Barra de título Visualiza el nombre de la aplicación y la ubicación del sitio Web que estamos diseñando.
Página 9 de 196
Barra de menú Se encuentra en la parte superior de la ventana del FrontPage. Desde esta barra podemos seleccionar las órdenes para manipular los elementos introducidos en nuestra página. Cuando se inicia la aplicación por primera vez, estos menús muestran algunos comandos. A medida que trabajamos, los comandos que utilicemos con más frecuencia se guardan como configuración personalizada mostrándose cada vez que usemos dichos menús. Buscar comandos de menú Para buscar un comando de menú que no aparece, hacemos clic en las flechas en la parte inferior del menú, o doble clic al momento de abrirlo. Barras de herramientas Una barra de herramientas puede contener botones con imágenes, menús o una combinación de ambos. FrontPage incluye numerosas barras de herramientas integradas que podemos mostrar u ocultar según sea necesario. De manera predeterminada, las barras de herramientas Estándar y Formato, que están acopladas debajo de la barra de menús. Nos proporcionan un rápido acceso a las órdenes más utilizadas, ya que simplemente haciendo un clic en un botón, realiza una acción. Para visualizar u ocultar estas barras podemos acceder al submenú que las contiene en el comando Ver – Barras de herramientas, o también a través del menú contextual proporcionado al realizar un clic con el botón secundario sobre las herramientas existentes. Tenemos la posibilidad de ubicar estas barras junto a la barra de menú o en otros lugares de la ventana. Contenido del sitio Al iniciar la aplicación, esta muestra activo el último sitio que hemos editado. En el área contenidos se visualiza todos los archivos que conforman dicho sitio. Panel de tareas: El panel de tareas es una ventana que proporciona comandos utilizados frecuentemente. Su ubicación y pequeño tamaño nos permiten utilizar estos comandos mientras trabajamos en las páginas. Para mostrar este panel podemos: Ejecutar la orden Ver – Panel de Tareas ó ejecutar cualquier orden que tenga opciones en dicho panel. Si por alguna razón desea ocultar o cerrar este panel simplemente vuelva a ejecutar la orden Ver – Panel de tareas o presione el botón que se encuentra en la esquina superior derecha del mismo.
Página 10 de 196
Barra de estado La barra de estado que aparece en la parte inferior del espacio de trabajo muestra información y mensajes. Por ejemplo, si seleccionamos un archivo en la vista Carpetas, la barra de estado muestra la ruta de acceso completa hasta ese archivo. Si abrimos una página en la vista Página, la barra de estado muestra mensajes que indican qué página se está cargando y cuánto tiempo tardará en cargarse la página cuando un visitante la examine. FrontPage muestra la barra de estado en forma predeterminada. Para ocultar la barra de estado, ejecutamos la orden Herramientas – Opciones, seleccionamos la ficha General y desactivamos la casilla de verificación Mostrar barra de estado.
Crear un nuevo sitio Para comenzar a trabajar solicitaremos la creación en un nuevo sitio Web. Para esto podemos utilizar cualquiera de los siguientes procedimientos: 1) Ejecutar la orden Archivo – Nuevo. 2) Seleccionar la opción Sitio Web del menú del botón Nuevo de la Barra de herramientas.
Cualquiera sea el procedimiento utilizado se mostrará el Panel de tareas Nuevo.
Página 11 de 196
Seleccionamos en el panel la opción Sitio Web de una página para acceder al cuadro de diálogo Plantillas de Sitio Web. Si lo que deseamos es comenzar de cero, utilizaremos la plantilla Sitio Web de una página como se indica a continuación.
Luego de indicar la plantilla a utilizar deberemos asignar una ubicación y nombre a nuestro sitio, en el cuadro de texto Especifique la ubicación del nuevo sitio Web. En este podremos utilizar el botón Examinar para indicar la ubicación y luego escribir el nombre del Web. La casilla de verificación Agregar al sitio Web actual, agrega las páginas creadas por la plantilla o asistente del Web seleccionado, al Web actual. Si la plantilla o asistente genera un archivo que ya existe en el Web actual, se nos preguntará si deseamos reemplazar el archivo existente.
Página 12 de 196
El sitio creado se mostrará de la siguiente forma:
Cuando crea un sitio Web de una sola página, esta adopta por omisión el nombre Index.htm
Si creáramos el sitio utilizando otra plantilla, por ejemplo Sitio Web Personal, este como se muestra a continuación constará de más página:
Página 13 de 196
Crear una página Web Podemos crear una página nueva en un sitio Web o una página HTML independiente. Para solicitar una nueva página ejecutamos la orden Archivo – Nuevo. Esta acción mostrará el Panel de tareas Nuevo (descrito en el ítem anterior). En este podemos seleccionar la opción Página en Blanco.
Si deseamos crear una página Web basada en una plantilla1 debemos seleccionar la opción Página del menú del botón Nuevo de la Barra de herramientas.
También podemos hacerlo seleccionando la opción Más plantillas de páginas del Panel de tareas Nuevo. Cualquiera sea el método utilizado para acceder a solicitar la creación de una página basada en una plantilla, se mostrará el siguiente cuadro de diálogo para que seleccionemos la que vamos a utilizar:
1
Una plantilla es un conjunto de formatos prediseñados para texto y gráficos en los que se pueden basar nuevas páginas y sitios Web. Una vez creada una página o un sitio Web con una plantilla, se puede personalizar.
Página 14 de 196
La página nueva se visualizará de la siguiente forma:
Página creada basada en la Plantilla seleccionada (plantilla Bibliografía)
La nueva página creada se mostrará abierta y recibirá el nombre de Pagina_nueva_n.htm (siendo n un número natural correspondiente a la cantidad de páginas nuevas que se agregan) hasta que sea guardada con un nombre diferente por el usuario.
Página 15 de 196
Abrir un sitio Web ya creado Para abrir un sitio podemos recurrir al sitio ejecutando la orden Archivo – Abrir sitio ó a la opción Abrir sitio de la Barra de herramientas:
Cualquiera sea la opción elegida se mostrará el siguiente cuadro de diálogo:
Una vez localizado el sitio que deseamos abrir lo seleccionamos y presionamos el botón Abrir. Debemos tener en cuenta que si bien un sitio Web se presentará como una carpeta que contiene todos los archivos del mismo, esta mostrará el icono
.
El sitio recuperado será abierto en una nueva ventana de Microsoft Office FrontPage 2003.
Si el sitio a recuperar es un sitio que utilizamos a menudo o que hemos editado hace poco tiempo, es muy probable que se encuentre en la lista de los utilizados recientemente. De este modo para abrir un sitio Web reciente podemos ejecutar la orden Archivo – Sitios recientes y seleccionar uno de los que son proporcionados en la lista (la cantidad de sitios que se muestran es 4). Esta lista también se encuentra en el Panel de Tareas Inicio.
Página 16 de 196
Abrir una página Podemos abrir una página para verla o modificarla. Si la página se encuentra en el sitio Web actual, bastará con hacer doble clic en su icono o en su nombre para abrirla. Si la página se encuentra en un sitio Web diferente o en nuestro sistema de archivos local, para abrirla podemos comenzar utilizando uno de los siguientes métodos:
Ejecutar la orden Archivo – Abrir. Seleccionar la opción Abrir de la barra de herramientas Estándar.
Utilizar el método abreviado Ctrl + A Cualquiera sea el método utilizado anteriormente se mostrará el cuadro de diálogo Abrir archivo:
Una vez localizada la página que deseamos abrir, podemos realizar un doble clic sobre su nombre ó seleccionarla y presionar el botón Abrir. Si observamos el botón Abrir, este presenta una punta de flecha a su derecha, si hacemos clic en ella veremos un opción adicional, la opción Abrir en nueva ventana, esta abre la página seleccionada en una nueva ventana pero solo se habilita cuando trabajamos en una página de marcos. En lugar de mostrarla en el marco activo, la
Página 17 de 196
muestra en su propia ventana (la prestación Página de Marcos será tratada en profundidad en el tema 9). Si abre una página que pertenece a un sitio diferente del que tiene activo, automáticamente se abrirá el sitio al que pertenece dicha página en una nueva ventana de FrontPage. Del mismo modo que se indicó en el Ítem Abrir un sitio Web, podemos abrir rápidamente la páginas editadas más recientemente ejecutando la orden Archivo – Archivos recientes y seleccionar uno de los que son proporcionados en la lista (esta lista muestra las últimas 8 páginas abiertas). También podemos utilizar la lista de los últimos utilizados del Panel de Tarea Inicio.
Manejo de varias páginas abiertas Si tenemos varias páginas abiertas en una misma ventana estas se mostrarán de la siguiente forma:
La página activa muestra su etiqueta de color blanco y el texto de la misma en Negrita. Para activar otra basta con hacer un clic en la etiqueta de la misma.
Página 18 de 196
Guardar una página Cuando guardamos una página debemos tener en cuenta que no solamente guardamos los elementos que hemos introducido sino también incluimos la configuración de la ventana y las características de la presentación, formatos, etc. Si la página contiene gráficos, controles ActiveX, archivos de sonido u otros objetos estos serán a su vez guardados como elementos independientes y deberemos indicar la ubicación al momento de guardar la página. Para guardar la página que estamos editando podemos comenzar utilizando uno de los siguientes procedimientos:
Presionar el botón Guardar de la barra de herramientas Estándar. Ejecutar la orden Archivo – Guardar. Ejecutar la orden Archivo – Guardar como... Utilizar el método abreviado Ctrl. + G.
Si todavía no habíamos guardado la página, cualquiera sea el método utilizado se mostrará el cuadro de diálogo Guardar como:
En este cuadro de diálogo debemos indicar: 1) La ubicación y nombre de la página. La ubicación se refiere a la unidad y carpeta donde será guardada, esta será indicada a través de la lista desplegable Guardar en... El nombre de la página será ingresado en el cuadro Nombre del archivo. A la hora de asignar un nombre a la página debemos tener en cuenta lo siguiente:
No podemos utilizar la ñ.
Página 19 de 196
Tampoco podemos utilizar los tildes. No es conveniente utilizar espacios entre palabras. Si necesitamos separar, emplearemos el guión bajo (ej. descripcion_curso.htm). Es mejor emplear minúsculas y nombres cortos.
Estas reglas también son válidas para nombre de carpetas, imágenes u otro complemento que utilicemos en las páginas.
2)
Debemos ahora agregar o cambiar el Título de la página (nombre descriptivo que aparecerá en la barra de título en la ventana del navegador) para esto presionamos el botón Cambiar Título. Este mostrará el cuadro de diálogo Establecer título de página en el cual ingresaremos el mismo.
Si no ingresa o modifica el título asume como tal, parte del primer párrafo de la página. El título de la página si puede incluir ñ, tildes, caracteres especiales y espacios en blanco.
Una vez indicados los parámetros anteriormente descritos (ubicación, nombre y título) presionamos el botón Guardar. Tras presionar este botón si la página contiene elementos como imágenes, complementos, videos, etc, que aún no han sido guardados en el sitio o ubicación de la página, se mostrará el siguiente cuadro de diálogo:
Página 20 de 196
En este se visualiza el nombre del archivo que se va a guardar, la ubicación donde será guardado y también una vista previa del mismo. Desde aquí podemos modificar el nombre del archivo o indicar otra carpeta diferente a la preestablecida para guardarlo. Volver a guardar una página Cuando modificamos el archivo y lo guardamos utilizando la orden Archivo – Guardar, el botón Guardar o la combinación Ctrl. + G, no se visualizará el cuadro de diálogo Guardar como, ya que la aplicación asume que se guardará el archivo con el mismo nombre y en el mismo lugar. Si deseamos visualizar dicho cuadro de diálogo debemos ejecutar la orden Archivo – Guardar como.... Si agregamos nuevos elementos de imagen, u otros complementos el que si aparecerá es el cuadro de diálogo Guardar archivos incrustados.
Panel de Alternancia Panel de alternancia es el nombre que recibe el Panel que nos permite alternar entre la Lista de carpetas y el Panel de Exploración. La Lista de carpetas nos mostrará la estructura y contenido del sitio actual. Para mostrar la Lista de carpetas podemos:
Ejecutar la orden Ver – Lista de carpetas. Presionar el botón Panel de alternancia
de la barra de herramientas
Estándar.
Página 21 de 196
En la Lista de carpetas las páginas que actualmente están abiertas muestran el icono y las que no lo están el icono
. La página principal (por omisión llamada Index,
aunque podemos modificar su nombre) siempre muestra el icono abierta y el icono
cuando está
cuando está cerrada.
Para alternar entra la Lista de Carpetas y el Panel de Exploración podemos: 1) Presionar la etiqueta Exploración que se encuentra en la parte inferior del Panel de alternancia.
2) seleccionar la opción Panel de exploración del menú del botón Panel de alternancia de la Barra de herramientas.
El Panel de exploración se mostrará de la siguiente forma:
Página 22 de 196
En este Panel las páginas no mostrarán su nombre de archivo sino su Título. Si la estructura del sitio no ha sido definida solo se visualizará la página Index (la creación de la estructura será tratada en el Tema 9). Operaciones con página a través de la Lista de carpetas. La lista de Carpetas será muy útil cuando necesitemos realizar operaciones tales como eliminar o modificar el nombre de una página u otro archivo del sitio. Eliminar elementos Si por alguna razón necesitamos eliminar una página, u otro elemento (carpeta, archivo de imagen, etc), bastará con seleccionarlo en la Lista de Carpetas y seguir uno de los siguientes procedimientos:
Presionar la tecla Supr. Ejecutar la orden Edición – Eliminar. Ejecutar la orden Eliminar del menú emergente sobre la página seleccionada. Antes de la eliminación definitiva FrontPage nos solicitará la confirmación de la operación mediante el siguiente cuadro de diálogo:
Página 23 de 196
Es importante tener en cuenta que si eliminamos una página que contiene archivos incrustados, estos no serán eliminados del sitio o ubicación en que se guardaron cuando se guardó la página. Cambiar el nombre Si lo que deseamos o necesitamos es modificar el nombre de una página, carpeta o archivo, debemos: 1) Seleccionar el archivo. 2) Seguir una de las siguientes acciones: Ejecutar la orden Edición – Cambiar nombre. Ejecutar la orden Cambiar nombre del menú emergente sobre el archivo seleccionado. Hacer un clic sobre el nombre seleccionado. 3) Una vez ejecutada la orden cambiar nombre el nombre aparecerá listo para ser modificado. 4) Modificamos el nombre y presionamos la tecla Intro o realizamos un clic fuera del mismo. Cuando cambie el nombre de un archivo es muy importante tener en cuenta lo siguiente: 4 Al cambiar de nombre un archivo, no debe modificar ni omitir su extensión, esto podría hacer que el archivo no funcione más. 4 Cuando deba cambiar el nombre de un archivo o carpeta de un sitio Web se recomienda hacerlo siempre desde Microsoft FrontPage, ya que la aplicación reparará automáticamente todos los hipervínculos, tanto los que estén destinados al archivo (o a archivos de la carpeta) como los que procedan de él (o de archivos de la carpeta). Si cambia el nombre de un archivo o carpeta mediante el Explorador de Windows, los hipervínculos no quedarán reparados.
Página 24 de 196
Propiedades de la página Para ver y/o modificar las distintas propiedades de la página actual, o la página seleccionada, ejecutamos la orden Archivo – Propiedades. Este cuadro de diálogo cuenta con una serie de Fichas a través de las cuales realizaremos la configuración de los distintos parámetros. General
Ubicación: Muestra la dirección URL de la página (su ubicación en un sitio Web o sistema de archivos). Título: Muestra el título o el nombre descriptivo de la página, podemos editar este título. Ubicación de base: Muestra la dirección URL base opcional de la página. Una dirección URL base es aquella que se puede asignar a una página para convertir las direcciones URL relativas en absolutas. Marco de destino predeterminado: Escribimos el nombre del marco de destino predeterminado en el que deseamos mostrar hipervínculos de esta página o presionamos el botón Cambiar marco de destino. Este botón se usa para que todas las páginas de destino de hipervínculos de la página activa aparezcan en un marco diferente en una página de marcos (este concepto será tratado en profundidad en los temas 8 y 9)
Página 25 de 196
En el área Sonido de fondo: En el cuadro Ubicación escribimos el nombre de un archivo de sonido de fondo que se reproducirá cuando aparece la página ó utilizamos el botón Examinar para buscarlo. En el cuadro Bucle establecemos las veces que se reproducirá dicho sonido o activamos la casilla de verificación Siempre para que se reproduzca continuamente mientras se muestra la página.
No todos los exploradores de Web admiten esta función.
El área Secuencias de comando para controles de tiempo de diseño nos permitirá modificar ciertas propiedades con respecto al tratamiento de datos de las páginas Web. Formato
La función de los distintos elementos de esta ficha será descrita en el Tema 4.
Página 26 de 196
Avanzadas:
Configuramos los márgenes de la página actual, ingresando su valor en píxeles. El botón Estilo de cuerpo nos permitirá cambiar el formato predeterminado del texto de la página Web. El botón Estilo de conversión nos permite especificar cómo deseamos que aparezca el texto de los hipervínculos en la página Web cuando un visitante del sitio sitúe el puntero encima de ellos. Esta opción sólo estará disponible si activamos la casilla de verificación Efectos de conversión de hipervínculos (ver Tema 8). Secuencias de comandos para controles de tiempo de diseño (ver Tema 10). Personalizadas
Página 27 de 196
Esta ficha nos permite agregar, modificar o quitar información al encabezado HTTP de una página, agregando una variable META de sistema. Los visitantes del sitio no podrán verla. Esta etiqueta META puede proporcionar instrucciones especiales a un explorador de Web, como una fecha de caducidad o un valor de actualización de pantalla. Idioma
En el área Idioma de página: La configuración del idioma de una página determina el idioma de la comprobación ortográfica de fondo usada en FrontPage. Esta configuración también identifica el idioma de la página con motores de búsqueda avanzados, ya que las consultas de búsqueda pueden tener como destino el contenido en un idioma específico. Si no especificamos el idioma, FrontPage determina el idioma de la página desde el teclado (si escribe para modificar la página) o desde la configuración local de usuario del equipo. En el área Codificación HTML: Especificamos la codificación que utilizará al guardar la página, la codificación de la página HTML que seleccionemos está incluida en el código HTML de la misma e indica a los exploradores de Web cómo leer el texto.
Página 28 de 196
Grupo de Trabajo
En esta ficha podemos asignar una o más categorías a la página actual, asignársela a una persona, indicar el nivel de revisión y especificar si la página será publicada con el resto del sitio o no. Marcos: Si solicitamos las propiedades, siendo la página actual, una página de marcos, se agregará esta ficha en la que podemos establecer el espaciado entre marcos, y si deseamos visualizar los bordes entre uno y otro o no. (Ver Tema 9)
Cerrar páginas, sitios y finalizar la sesión Cerrar página Para cerrar la página activa debemos simplemente hacer un clic en el Icono de cierre de la misma o ejecutar la orden Archivo – Cerrar.
Página 29 de 196
Si la página no ha sido guardada o no se han guardados cambios de edición se mostrará un cuadro de diálogo que nos pregunta si deseamos o no guardar las modificaciones antes de cerrarla. Cerrar sitio Para cerrar el sitio actual debemos ejecutar la orden Archivo – Cerrar sitio. Si alguna de las páginas del sitio no ha sido guardada o no se han guardados cambios de edición se mostrará un cuadro de diálogo que nos pregunta si deseamos o no guardar las modificaciones en las páginas antes de cerrar el sitio. Finalizar la sesión de Microsoft Office FrontPage 2003 Para finalizar la sesión simplemente debemos realizar un clic en el icono de cierre de la aplicación o ejecutar la orden Archivo – Salir. También podemos utilizar el método abreviado Alt+F4 o la orden Cerrar del Menú de control de la ventana. Al igual que en los casos anteriores si alguna página tiene modificaciones no guardadas se mostrará el cuadro de Advertencia para que indiquemos si deseamos o no guardar dichas modificaciones.
Página 30 de 196
EDITAR Y AGREAR INFORMACIÓN A UNA PÁGINA Editar en FrontPage 2003 Agregar texto a una página Manejo de textos Mover y copiar información Insertar archivos Insertar elementos especiales Buscar, reemplazar y corregir ortografía
Página 31 de 196
Editar en FrontPage 2003 Para crear o editar una página en Microsoft FrontPage 2003 no es necesario tener conocimientos de programación en HTML, ya que este agregará las etiquetas HTML en segundo plano mientras trabajamos en la información de las páginas. Trabajaremos del mismo modo que lo haríamos en un procesador de textos en el que podemos escribir, aplicar formato y agregar gráficos, tablas y otros elementos. Para esto simplemente debemos editar las páginas en la vista Diseño.
Sin embargo, si deseamos familiarizarnos con el código HTML o tenemos conocimientos sobre él y queremos editarlo directamente, podemos utilizar la vista Código, que muestra el código HTML de una página Web, o la vista Dividir, que muestra ambas vistas, Código y Diseño, simultáneamente.
Página 32 de 196
Agregar texto a una página Para ingresar texto debemos estar en la vista Diseño. Si comenzamos a agregar texto en una página en blanco esta ya está lista para comenzar a escribir. Simplemente deberemos teclear el texto deseado sin preocuparnos por su extensión, ya que FrontPage detecta cuanto puede escribir en una línea (o renglón), realizando un salto a la línea siguiente cuando es necesario. En cualquier parte del documento que deseemos saltar a la línea siguiente, debemos presionar la tecla Intro.
Manejo de textos Corrección de errores Una de las grandes ventajas de un procesador de textos sobre otros métodos (como máquinas de escribir) es su habilidad para borrar y corregir errores sin que nuestra versión final quede desprolija y poco presentable. Las formas más comunes de borrar texto son: Pulsando la tecla Retroceso para borrar el carácter que está a la izquierda del punto de inserción. Pulsando la tecla Suprimir para borrar cualquier carácter a la derecha del punto de inserción.
Página 33 de 196
Desplazamientos en la página. En la mayoría de los casos, cuando nos movemos en la página, desplazamos el punto de inserción hasta determinado lugar. FrontPage sólo permitirá colocar nuestro punto de inserción en una posición por la que hayamos pasado antes (no nos permite movernos a lugares de la hoja que no han sido utilizados). Podemos desplazarnos de diferentes maneras: Con el Mouse: Hacemos clic en la posición de la hoja a la cual deseamos desplazarnos. Hacemos uso de la barra de desplazamiento. Con el teclado: Teclas
Desplazan
Flechas direccionales
Una fila arriba/abajo, o un carácter izquierda/derecha.
Re Pág.
Una pantalla arriba.
Av Pág.
Una pantalla abajo.
Fin
Al final de la línea.
Inicio
Al principio de la línea.
Ctrl + Fin
Al final del documento.
Ctrl + Inicio
Al principio del documento.
Seleccionar Texto. Debemos conocer que FrontPage determina estructuras al ingresar el texto en nuestra página. Algunas de estas estructuras son: Palabra: Secuencia de caracteres comprendidos entre espacios en blanco, comas, puntos o símbolos especiales. Párrafo: Secuencia de palabras y sus delimitadores, finalizada con Intro. Seleccionar significa poner el texto en video inverso desde la posición del cursor hasta donde deseemos seleccionar. Seleccionaremos texto cuando necesitemos realizar alguna acción sobre él (modificarlo, darle formatos, copiarlo, etc.). Podemos seleccionar de diferentes maneras.
Página 34 de 196
Utilizando el Mouse: FrontPage nos permite seleccionar trozos concretos de texto de forma rápida y fácil, dependiendo de cuántas veces presionemos el botón izquierdo del Mouse. Acción del ratón
Uso
Clic
Sitúa la posición del cursor o selecciona objeto o imagen.
Arrastrar
Selecciona un bloque de texto.
Doble Clic en el texto
Selecciona una palabra.
Triple Clic en el texto
Selecciona todo el párrafo.
Alt + Clic en el texto
Selecciona un párrafo.
Manteniendo la tecla Mayús presionada podemos seleccionar un bloque de texto de la siguiente forma: 1) Hacemos clic al principio del bloque a seleccionar. 2) Mantenemos presionada la tecla Mayús. 3) Hacemos clic al final del bloque. Utilizando la barra de selección: La Barra de selección es una columna invisible en el margen izquierdo de la página. Al posicionarnos en esta barra, el puntero del Mouse cambia a una flecha. Acción del Mouse
Uso
Clic
Selecciona la línea frente al puntero.
Doble Clic
Selecciona el párrafo.
Si arrastramos el puntero por la barra de selección mientras mantenemos presionado el botón izquierdo del Mouse, seleccionaremos varias líneas o párrafos a la vez. Utilizando el teclado: Nos posicionamos en el principio del bloque a seleccionar, presionamos la tecla Mayús y nos desplazamos con las teclas flechas de dirección hasta el final del bloque.
Página 35 de 196
Mover y copiar información Existe una función que ofrece Windows en general, y está incorporada también en esta aplicación. Esta función es llamada Portapapeles. Se define como un espacio de memoria transitorio, donde se almacenan los datos para ser reutilizados en forma posterior. Las órdenes del portapapeles son: Cortar, Copiar y Pegar. Mover Es la acción de quitar el texto u objeto seleccionado del lugar en donde está, para colocarlo en una nueva posición. Existen dos forma de realizar esta operación: La primera forma es mediante el uso del Mouse 1) Seleccionamos el texto u objeto a mover. 2) Señalamos con el puntero sobre la selección realizada. (En este caso indicaremos distintas acciones según la selección sea movida: dentro de la misma página, entre páginas abiertas de un mismo sitio, entre páginas de distintos sitios o documentos de otra aplicación abierta) Dentro de la misma página: Simplemente la arrastramos hasta la nueva posición en la página. De una página a otra dentro del mismo sitio: Arrastramos la selección, hasta la etiqueta de la página a la cual se moverá.
Aquí sin soltar el botón del Mouse esperamos un instante, veremos que se activa la página sobre cuya etiqueta nos posicionamos. Una vez activa esta página colocamos el objeto en la posición deseada. (Para realizar esta operación ambas página deben estar abiertas). De una página a otra de distintos sitios o aplicaciones. Es similar a la forma descrita para páginas diferentes del mismo sitio, con la diferencia de que la selección será en este caso arrastrada hacia el botón que identifica al otro documento pero en la Barra de tareas. (Para realizar esta operación las páginas o documentos origen y destino deben estar abiertos)
Página 36 de 196
La segunda forma es mediante el uso del Portapapeles: 1) Seleccionamos el texto u objeto a mover. 2) Ejecutamos la orden Cortar, utilizando cualquiera de los siguientes métodos: a) Edición – Cortar. b) Menú contextual – Cortar. c) Botón Cortar
de la Barra de herramientas Estándar.
3) Nos posicionamos en el lugar a donde deseamos colocar el texto u objeto. 4) Ejecutando la orden Pegar a través de uno de los siguientes procedimientos: a) Edición – Pegar. b) Menú contextual – Pegar. c) Botón Pegar
de la barra de herramientas Estándar.
Esta operación puede ser realizada dentro de la página activa, entre páginas diferentes e incluso entre aplicaciones diferentes. Podemos por ejemplo cortar un texto de un libro de Microsoft Excel y pegarlo en la página, y como este se podría enumerar un sin fin de ejemplos. Copiar Es la acción de generar en otro lugar de la página, un duplicado de un texto u objeto. Existen dos formas de realizar esta operación. La primer forma es mediante el uso del Mouse: 1) Seleccionamos el texto u objeto a copiar. 2) Al igual que para la tarea de mover indicaremos distintas acciones según la selección sea copiada: dentro de la misma página, entre páginas distintas de un mismo sitio, entre páginas de distintos sitios o aplicaciones. Dentro de la misma página: Simplemente la arrastramos hasta la nueva posición en la página mientras mantenemos presionada la tecla Ctrl. De una página a otra dentro del mismo sitio: Manteniendo la tecla Ctrl presionada, arrastramos la selección, hasta la etiqueta de la página en la cual se copiará.
Página 37 de 196
Aquí sin soltar el botón del Mouse esperamos un instante, veremos que se activa la página sobre cuya etiqueta nos posicionamos. Una vez activa esta página colocamos el objeto en la posición deseada. (Para realizar esta operación ambas página deben estar abiertas). De una página a otra de distinto sitio o aplicación. Es similar a la forma descrita para páginas diferentes del mismo sitio, con la diferencia de que la selección será en este caso arrastrada mientras se presiona la tecla Ctrl. hacia el botón que identifica al otro documento pero en la Barra de tareas. (Para realizar esta operación las páginas o documentos origen y destino deben estar abiertos). Otra forma de hacerlo es organizar las ventanas (origen y destino) de forma que se vean ambas y arrastrar la selección a la aplicación destino.
La segunda forma es mediante el uso del Portapapeles: 1) Seleccionamos el texto u objeto a copiar. 2) Ejecutamos la orden Copiar, utilizando cualquiera de los siguientes métodos: a) Edición – Copiar. b) Menú contextual – Copiar. c)
Botón Copiar
de la Barra de herramientas Estándar.
3) Nos posicionamos en el lugar a donde deseamos colocar el texto u objeto.
Página 38 de 196
4) Ejecutando la orden Pegar a través de uno de los siguientes procedimientos: a) Edición – Pegar. b) Menú contextual – Pegar. c)
Botón Pegar
de la barra de herramientas Estándar.
Al igual que fue indicado para la orden Cortar, esta operación puede ser realizada dentro de la página activa, entre páginas diferentes e incluso entre aplicaciones diferentes. Etiquetas Inteligentes Una "etiqueta inteligente" es un tipo de botón que proporciona opciones para mejorar el contenido y el diseño en Microsoft FrontPage 2003. Los botones de etiqueta inteligente aparecen cuando ejecutamos determinadas tareas, como pegar texto o gráficos, y, al hacer clic en ellos, muestran una lista de opciones. Microsoft FrontPage utiliza una etiqueta inteligente denominada botón Opciones de pegado . El botón Opciones de pegado aparece después de pegar un texto o un gráfico y proporciona opciones fáciles y rápidas para dar formato al texto que hemos pegado.
Mantener formato de origen: Pega el contenido del portapapeles con el formato que fue cortado o copiado, es decir que mantendrá todas las características del mismo, como color, tamaño y fuente. Mantener solo texto: Coincide el formato de destino, si no existiera el formato de destino tomará el formato por defecto de la plantilla usada.
La opción por omisión es Mantener formato origen. Es decir que si no seleccionamos ninguna opción tomará la opción por omisión.
Visor del Portapapeles Una nueva mejora en la prestación de Office 2003, está en Panel de Tareas, Portapapeles, donde podemos ir almacenando las últimas 24 copias realizadas al mismo.
Página 39 de 196
Cada vez que ejecutemos la orden Cortar o Copiar, se irá almacenando esta información en cada uno de los 24 espacios destinados para estos elementos. Para pegar elementos específicos desde el Portapapeles de Office, posicionamos el puntero en el lugar donde deseamos pegar los elementos, y hacemos clic en el icono correspondiente al elemento que necesitamos pegar. Para mostrar el Panel de Tareas, Portapapeles, debemos ejecutar la orden Ver, Panel de Tareas, luego seleccionamos Portapapeles. El Panel de Tareas se mostrará como el siguiente:
Insertar archivos En el punto anterior vimos la forma de copiar información desde un archivo diferente y colocarla en una página. Si lo que deseamos es colocar en una página todo el contenido de un archivo, podemos hacerlo de otra forma… Insertando directamente el archivo. Para insertar un archivo entero en una página Web, debemos abrir la página en FrontPage y utilizar uno de los siguientes métodos.
Página 40 de 196
Arrastrar y soltar: 1) Ubicamos el archivo en el explorador de Windows. 2) Arrastramos el icono hasta la ubicación deseada en FrontPage. 3) Soltamos el botón del Mouse. Para realizar esta operación podemos (como se indicó en la orden Copiar) disponer las ventanas en forma de mosaico y arrastrar el archivo de una a otra o arrastrar el icono hasta la barra de tareas (sobre el botón que identifica a FrontPage) y cuando se active la página soltarlo en la posición donde se desea colocar. Usando comandos: Colocamos el punto de inserción en donde deseamos que aparezca el archivo 1) Ejecutamos la orden Insertar – Archivo. 2) Localizamos el archivo a insertar. 3) Realizamos doble clic sobre el archivo, u oprimimos el botón Abrir.
Insertar elementos especiales El menú Insertar en FrontPage nos permite agregar elementos especiales en el texto como Saltos de líneas, líneas horizontales, símbolos y comentarios. Salto de línea La orden Insertar – Salto de línea, inserta un salto de línea en el punto de inserción de la página actual. Muchos exploradores de Web no muestran párrafos vacíos, pero mostrarán saltos de línea como espacios en blanco. Al ejecutar la orden se mostrará el siguiente cuadro de diálogo:
Salto de línea normal inserta un salto de línea en el punto de inserción de la página activa.
Página 41 de 196
Si las imágenes aparecen al lado del párrafo, puede agregar saltos de línea especiales en los que la nueva línea comienza debajo de la línea de base de las imágenes en lugar de debajo del párrafo: Para situar un salto de línea debajo de una imagen alineada a la izquierda, seleccionamos la opción Hasta el margen izquierdo. Para situar un salto de línea debajo de una imagen alineada a la derecha, seleccionamos la opción Hasta el margen derecho. Para situar un salto de línea debajo de las imágenes ubicadas a la izquierda y a la derecha, seleccionamos la opción Hasta ambos márgenes.
Línea horizontal Podemos agregar una línea horizontal a una página, por ejemplo para separar texto o agregar un acento. Una vez que hemos agregado una línea horizontal, es posible modificar sus propiedades para cambiar su ancho, alto, alineación y color. Para insertarla realizamos los siguientes pasos: 1) En la vista Página, situamos el punto de inserción en el lugar donde deseamos insertar la línea. 2) Ejecutamos la orden Insertar – Línea horizontal.
Para modificar la apariencia de la línea horizontal, hacemos doble clic en ella y modificamos las opciones deseadas, en el cuadro de diálogo Propiedades de línea horizontal.
Página 42 de 196
En Ancho, especificamos el ancho de la línea como un porcentaje del ancho de la ventana o como un número de píxeles. En Alto, escribimos el número de píxeles de alto que debe alcanzar la línea. En Alineación, especificamos la alineación de la línea en la página. En el cuadro Color, seleccionamos un color para la línea si no deseamos utilizar una línea sombreada. Utilizamos la casilla de verificación Línea sólida para que la línea aparezca sólida o sombreada. Si seleccionamos un color, la línea será sólida y no podremos aplicar el sombreado.
Símbolos Podemos fácilmente insertar caracteres especiales usando el cuadro de diálogo Símbolo. Para insertar un carácter especial: 1) Colocamos el punto de inserción en el lugar donde insertaremos el símbolo. 2) Ejecutamos la orden Insertar – Símbolo.
3) Realizamos doble clic sobre el carácter a insertar o lo seleccionamos y oprimimos el botón Insertar. 4) Cerramos el cuadro de diálogo.
Comentarios Es posible agregar un comentario a una página, por ejemplo para proporcionar información para otro autor de la misma. Los comentarios tienen los mismos atributos que el estilo de párrafo actual, pero se muestran con un color diferente. Aunque se
Página 43 de 196
pueden ver los comentarios mientras se modifica una página, no aparecerán en el explorador de Web de un visitante que visite la página. Por ejemplo cuando creamos un sitio o página basado en una plantilla, las páginas mostrarán comentarios a modo de guía de lo que es conveniente incluir en cada sección.
Para agregar un comentario: 1) En la vista Diseño, situamos el punto de inserción en el lugar donde deseamos agregar un comentario. 2) Ejecutamos la orden Insertar – Comentario.
3) Escribimos el comentario y presionamos el botón Aceptar. Editar un comentario Al insertar un comentario queda en la página como un único objeto, por lo que, para editarlo debemos: Seleccionarlo y ejecutar la orden Formato – Propiedades. Ejecutar la orden Propiedades del comentario del menú emergente sobre el mismo. Realizar doble clic sobre el mismo.
Página 44 de 196
Eliminar un comentario Para eliminar un comentario debemos seleccionarlo y ejecutar una de estas órdenes: Edición – Eliminar. Tecla Supr.
Buscar, reemplazar y corregir ortografía Buscar texto Para buscar un texto específico en la página ejecutamos la orden Edición – Buscar. Aparece un cuadro de diálogo donde configuraremos las opciones de búsqueda.
Buscar en: Podemos indicar si la búsqueda se realizará en todas las páginas del sitio, o sólo en la página actual. Dirección: Seleccionamos Hacia atrás, para buscar desde el punto de inserción hacia el comienzo de la página, Hacia adelante para buscar desde el punto de inserción hacia el final de la página o Todo para buscar en todo el documento. Opciones: La casilla de verificación Coincidir mayúsculas y minúsculas busca texto sólo si coincide el uso de mayúsculas del texto escrito en el cuadro Buscar. La casilla de verificación Sólo palabras completas busca apariciones que sean palabras completas y que no formen parte de una palabra más larga. La casilla de verificación Buscar en HTML busca el texto en el código HTML de las páginas.
Página 45 de 196
Reemplazar texto Para reemplazar un texto específico en la página ejecutamos la orden Edición – Reemplazar. Esta orden al ser ejecutada nos proporciona un cuadro de diálogo con opciones iguales a las del cuadro de diálogo Buscar, excepto que una vez localizada la primera ocurrencia en la búsqueda, podemos presionar los botones: Reemplazar: si deseamos reemplazar sólo la ocurrencia localizada (y repetir esta operación hasta el final, decidiendo cuáles ocurrencias serán reemplazadas y cuáles no) Reemplazar todo: si deseamos reemplazar todas las ocurrencias encontradas, sin excepción.
Corrección ortográfica FrontPage 2003 soporta dos tipos de corrección ortográfica. Puede corregir deletreando las palabras como nosotros las introducimos y además puede buscar en el sitio entero en busca de errores. Para que realice la corrección de las palabras mientras las tecleamos debemos corroborar que ejecutando la orden Herramientas – Opciones de página – Ficha General, esté activada la casilla de verificación Comprobar ortografía al escribir. La palabra escrita erróneamente será subrayada de color rojo.
Página 46 de 196
Seleccionamos la opción Ocultar errores de ortografía en todos los documentos para que FrontPage no subraye las palabras incorrectas con una línea en color. Cuando estemos en condiciones de corregir la ortografía, volvemos a desactivarla para que sean mostrados los errores de ortografía de nuevo.
La forma de corregir estos errores ortográficos consiste sencillamente, en solicitar el menú emergente sobre el error, y escoger una de las sugerencias propuestas. En caso de que la palabra sea correcta y la haya subrayado como errónea, ejecutamos la orden Agregar, del menú emergente sobre la misma, para que la incorpore en su diccionario.
Página 47 de 196
Para corregir la ortografía de todo el texto de la página podemos:
Presionar el botón Ortografía de la barra de herramientas Estándar. Ejecutar la orden Herramientas – Ortografía. Oprimir F7.
Botón Omitir: Deja sin cambiar el error resaltado y encuentra el siguiente error ortográfico.
Botón Omitir todas: Deja sin cambiar todos los ejemplos del error resaltado en la página y continúa con la revisión.
Botón Cambiar: Usamos el botón para reemplazar la palabra seleccionada en la página por una correctamente escrita. Cuando el error seleccionado es una palabra repetida, el botón cambia a Eliminar, para que podamos quitar fácilmente la palabra que aparece en segundo lugar.
Botón Cambiar todo: acepta la selección actual del cuadro Sugerencias o las modificaciones realizadas en el texto del cuadro Cambiar por para todos los ejemplos del error resaltado en la página.
Botón Agregar: deja la palabra sin cambios y la agrega al diccionario personalizado.
Botón Sugerir: Proporciona correcciones alternativas a la lista de sugerencias. Seleccionamos una palabra de la lista de sugerencias y, después, presionamos Sugerir para mostrar más opciones ortográficas.
Para corregir la ortografía de un sitio entero, o de las páginas seleccionadas, en la lista de Carpetas debemos seguir el siguiente procedimiento: 1) Posicionarnos en el sitio de nivel superior (en la lista de carpetas)
Página 48 de 196
2) Ejecutamos la orden Ortografía de la forma indicada anteriormente. 3) En el cuadro de diálogo siguiente indicamos si la corrección se hará en todo el sitio o en las páginas seleccionadas.
4) Presionamos luego el botón Iniciar. Se mostrará luego la lista de los errores encontrados y en que páginas se localizan.
5) Realizamos doble clic sobre la primera página de la lista para iniciar la corrección.
Página 49 de 196
6)
Al finalizar la corrección de esta página, continuará con la corrección de las restantes páginas.
Usar los sinónimos Cuando es necesaria una buena redacción, encontrar la palabra correcta es frecuentemente un problema, o quizás necesitamos una palabra opuesta a otra palabra. Para resolver ambos dilemas FrontPage 2003 tiene incorporada la herramienta Sinónimos, que es un diccionario de palabras con significados iguales y opuestos. La orden Herramientas – Sinónimos, reemplaza una palabra o frase de la página por un sinónimo, antónimo o palabra relacionada. Al ejecutar esta orden, aparece el siguiente cuadro de diálogo:
Área Buscado: Muestra la palabra actual para la que estamos buscando palabras alternativas. Área Significados: Muestra una lista de posibles significados de la palabra seleccionada. Seleccionamos un significado de la lista para que nos muestre los sinónimos propuestos para dicha palabra. Área Reemplazar con el sinónimo: Contiene el sinónimo con el cual será reemplazado el texto seleccionado en la página, en caso de presionar el botón Reemplazar. Si necesitamos buscar más sinónimos de los ya propuestos en la lista Significados, entonces lo seleccionamos y presionamos el botón Buscar. El botón Anterior, muestra la búsqueda de sinónimos anteriormente realizada.
Página 50 de 196
ESTABLECER FORMATOS A LAS PÁGINAS Introducción Dar formato al texto Establecer formato a párrafos Creación de Listas Bordes y sombreados Aplicar y crear estilos Efectos de Html dinámico Temas Efectos de transición de páginas
Página 51 de 196
Introducción Asignar o establecer formatos a una página, es modificar el aspecto de sus diferentes elementos para que adquiera una presentación agradable y acorde con la finalidad de la misma. En Microsoft FrontPage 2003 se puede dar formato a texto como si se utilizara un procesador de textos, para agregar organización visual, énfasis y estructura. Se puede cambiar el tipo de fuente, el tamaño, el estilo, el color, el espaciado y la ubicación vertical del texto y agregar efectos. También es posible controlar el espaciado y la sangría, agregar viñetas y números y establecer la alineación.
Dar formato al texto Podemos modificar el aspecto de un texto seleccionado, eligiendo el tipo de fuente, estilo, tamaño y color. También aplicar diferentes efectos, como tachado y versales. Para cambiar el formato de fuente de un texto dado: 1) En la vista Diseño, seleccionamos el texto al que deseamos dar formato. 2) Para desplegar el cuadro de diálogo podemos: Ejecutar la orden Formato – Fuente. Ejecutar la orden Fuente del menú emergente sobre la selección. Presionar las teclas Alt + Intro. El cuadro de diálogo Fuente presenta dos fichas o separadores que nos permitirán configurar distintos aspectos del texto.
Página 52 de 196
Ficha Fuente
Página 53 de 196
Ficha Espaciado entre caracteres
Establecer formatos a párrafos Un párrafo es un bloque de texto que se separa de otro mediante una marca de párrafo introducida a través de la tecla INTRO. Por ejemplo en el texto que se muestra a continuación se pueden determinar 3 párrafos.
Página 54 de 196
Las propiedades que se pueden aplicar a párrafos completos son:
Espaciado entre las líneas de un párrafo. Bordes alrededor del texto. Sangría de líneas y párrafos. Listas numeradas, con viñetas o multinivel. Sombreado de una línea o un párrafo completos.
El arreglo y diseño de párrafos (o de algún bloque de texto) es una clave elemental para el diseño de la página y la comunicación visual. FrontPage provee herramientas para controlar la apariencia de los párrafos.
Cambiar propiedades a los párrafos Si deseamos modificar las propiedades de un párrafo, bastará con posicionarnos en cualquier lugar del mismo, ahora bien si la modificación se va a realizar a varios párrafos a la vez deberemos seleccionarlos. Estas modificaciones serán realizadas a través del cuadro de diálogo Párrafo. Para solicitar este cuadro de diálogo podemos ejecutar la orden Formato – Párrafo o la orden Párrafo del menú emergente sobre el/los párrafo/s a modificar.
Área Alineación: permite alinear el texto a la izquierda, derecha, al centro de la página o justificar entre márgenes el párrafo afectado. Seleccionamos de la lista desplegable el tipo de alineación requerido.
Página 55 de 196
Área Sangría: se utiliza para especificar la forma en que deseamos aplicar sangría a un párrafo. Por ejemplo, aplicar sangría al lado derecho o izquierdo de un párrafo, o simplemente a la primera línea. Cuando aplicamos sangrías estamos especificando distancias determinadas desde algunas partes del párrafo hasta los márgenes de la hoja. Cada párrafo puede tener los siguientes tipos de sangría:
Área Espaciado: se utiliza para establecer el espaciado entre un párrafo y otro, entre una palabra y otra, y/o entre una línea y otra, especificando valores en los cuadros Antes de, Después de, Palabra e Interlineado. Debemos tener en cuenta que algunos exploradores de Web no admiten esta característica. Anterior y Posterior Coloca una separación entre un párrafo y otro agrandando el alto de la primera o última línea según sea espaciado anterior o posterior respectivamente.
Página 56 de 196
Interlineado. El interlineado determina la cantidad de espacio entre las líneas de texto. De forma predeterminada, se utiliza un interlineado sencillo. El interlineado que seleccionemos afectará a todas las líneas de texto del párrafo seleccionado o del que contenga el punto de inserción.
Las formas abreviadas de especificar estos formatos de párrafo son las siguientes: Alineación: Izquierda: Botón
de la barra de herramientas Estándar
Derecha: Botón
de la barra de herramientas Estándar
Centrada: Botón
de la barra de herramientas Estándar
Justificar: Botón
de la barra de herramientas Estándar
Página 57 de 196
Sangrías: Aumentar sangría: Aplica sangría al párrafo actual. Si el párrafo es un elemento de lista numerado o con viñetas, se aumenta la anidación del elemento en la lista. Botón de la barra de herramientas Formato. Disminuir sangría: Disminuye la sangría de un párrafo. Botón herramientas Formato.
de la barra de
Creación de Listas Es posible agregar rápidamente viñetas o números a líneas de texto existentes, o se pueden crear automáticamente listas numeradas o con viñetas mientras se escribe. Al crear listas con viñetas para páginas Web, se puede utilizar como viñeta cualquier imagen gráfica o foto. Lista con viñetas: para presentar una lista de elementos no ordenados. Las listas con viñetas pueden utilizar las viñetas estándar (redondas, cuadradas o circulares), viñetas personalizadas creadas por el usuario o viñetas de un tema determinado (si la página utiliza alguno).
Lista con viñetas personalizada: también podemos crear gráficos y utilizarlos como viñetas, en lugar de utilizar las viñetas estándar predeterminadas.
Página 58 de 196
Lista numerada: para presentar una lista de elementos en secuencia. Podemos elegir entre números, números romanos (mayúsculas o minúsculas) o letras (mayúsculas o minúsculas).
Lista de definiciones: para presentar una lista de términos y definiciones. Los términos se suelen presentar alineados a la izquierda y las definiciones con sangría.
Lista de esquema o multinivel: Podemos crear listas con varios párrafos y niveles anidados, y especificar diferentes estilos de lista en cada nivel. Por ejemplo, un esquema:
Página 59 de 196
Listas contraíbles: en una lista de este tipo podemos hacer clic en un nivel superior para desplegar o contraer los niveles inferiores. El formato exacto de una lista depende del explorador de Web del visitante del sitio. Si la página utiliza un tema, la lista tendrá la fuente y el formato de párrafo del tema. Para crear listas: 1) Seleccionamos los párrafos que componen la lista. 2) Accedemos al cuadro de diálogo Formato - Viñetas y numeración, que nos proporciona las siguientes fichas:
Página 60 de 196
Activamos la casilla de verificación Habilitar esquemas contraíbles, para habilitar este tipo de esquemas para exploradores de Web que admiten HTML dinámico. Un esquema contraíble permite al visitante mostrar u ocultar subniveles en una lista al hacer clic en el nivel superior. Para agregar o quitar subniveles a una lista: 1) Seleccionamos los elementos de la lista que pasarán a otro nivel. 2) Presionamos dos veces el botón Aumentar sangría o Disminuir sangría de la barra de herramientas Formato, según deseemos aumentar o disminuir de nivel. Otra forma de añadir viñetas a una lista de elementos es presionando el botón de la barra de herramientas Formato en lugar de ejecutar la orden desde el menú, pero este botón insertará la viñeta por omisión, o sea, la última que hayamos utilizado. Otra forma de añadir números a una lista de elementos es presionando el botón Numeración de la barra de herramientas Formato en lugar de ejecutar la orden desde el menú. Insertará la numeración que esté configurada por omisión. Podemos también establecer otros estilos de listas, utilizando la lista desplegable Estilo de la barra de herramientas Formato. Para quitar las viñetas seleccionamos la lista que las contienen y presionamos el botón Viñetas numeración.
. Procedemos del mismo modo con el botón
para quitar la
Página 61 de 196
Bordes y sombreados Podemos agregar bordes alrededor del texto y, a continuación, establecer las propiedades, como estilo, color, margen y ancho del borde. Al agregar un borde, se aplica a un párrafo completo. Si seleccionamos dos párrafos y después aplicamos un borde, cada párrafo tendrá un borde alrededor. Si el texto se separa con saltos de línea en lugar de marcas de párrafo, se considera que el texto tiene un párrafo solo y tendrá un borde.
Para aplicar un borde: 1) En la vista Diseño, seleccionamos los párrafos alrededor de los cuales deseamos el borde. 2) Ejecutamos la orden Formato – Bordes y sombreado.
3) Bajo Configuración seleccionamos el tipo de borde a trazar. Establecemos las propiedades para el borde en las opciones de Estilo, Color y Ancho. 4) Para especificar el margen (la distancia entre el texto y su borde), en Margen interior, escribimos un valor en los cuadros Superior, Inferior, Izquierdo y Derecho en puntos.
Podemos activar o desactivar uno o varios bordes utilizando los botones del área Vista previa.
Página 62 de 196
Podemos agregar sombreado al texto. Al igual que el fondo de una página, el sombreado puede ser un color o una imagen. Cuando agregamos sombreado, se aplica a todo un párrafo. Por ejemplo, si aplica sombreado a una palabra seleccionada, se sombrea todo el párrafo. El texto separado por saltos de línea en lugar de marcas de párrafo se considera un párrafo. Para aplicar un sombreado: 1) En la vista Página, seleccionamos los párrafos alrededor de los cuales deseamos el sombreado. 2) Ejecutamos la orden Formato – Bordes y sombreado.
En el área Relleno: Para establecer un color de fondo para el texto seleccionado, seleccionamos un color en el cuadro Color de fondo. Para establecer el color del texto seleccionado, seleccionamos un color en el cuadro Color de primer plano. En el área Tramas: Para establecer una imagen de fondo para el texto seleccionado, escribimos el nombre y la ubicación de la imagen en el cuadro Imagen de fondo o presionamos el botón Examinar para buscar y seleccionar dicha imagen. Para especificar la ubicación vertical y horizontal de la imagen dentro del párrafo seleccionado, especificamos las opciones en los cuadros Posición vertical y Posición horizontal.
Página 63 de 196
En el cuadro Repetir, seleccionamos opción para especificar cómo deseamos organizar la imagen en mosaico bajo el texto seleccionado. Por ejemplo, para organizar la imagen en mosaico horizontalmente, elegimos la opción Repetir x. En el cuadro Datos adjuntos, haga clic en una opción para especificar si la imagen de fondo se debe corregir con respecto a la ventana del explorador o si se debe desplazar con el documento.
Aplicar y crear estilos Los estilos son una combinación de configuración de fuentes y párrafos que definen el aspecto de los diversos elementos del texto de la página, como los encabezados, los títulos y el texto principal. Cuando aplicamos un estilo a un párrafo, podemos aplicar un grupo completo de formatos de carácter o de párrafo, o bien ambos en una sola operación. Los estilos facilitan la asignación de formato a la página. Aplicar un estilo Para aplicar un estilo existente: 1) 2) 3)
Seleccionamos el texto al cual le aplicaremos el estilo. Desplegamos la lista desplegable Estilo de la barra de herramientas Formato. Indicamos el estilo el deseado.
FrontPage tiene incorporados 15 estilos de párrafo HTML básico como se muestra a continuación:
Página 64 de 196
Crear un estilo Para crear nuevos estilos, realizamos los siguientes pasos: 1) Ejecutamos la orden Formato – Estilo. 2) En el cuadro de diálogo proporcionado presionamos el botón Nuevo.
En el cuadro Nombre, escribimos un nombre para el estilo y seleccionamos las opciones de formato deseadas oprimiendo el botón Formato.
Cuando crea un nuevo estilo este aparecerá en la lista desplegable de la barra de herramientas Formato listo para utilizar.
Página 65 de 196
Modificar un estilo Para cambiar las propiedades de un estilo, debemos acceder al cuadro de diálogo Estilo, seleccionar el estilo que deseamos editar y luego de presionar el botón Modificar para realizar los cambios de formatos deseados.
Si modifica las propiedades de un estilo todos los textos que lo estén utilizando se actualizarán en forma automática.
Eliminar un estilo En el cuadro de diálogo Estilo, seleccionamos el estilo a borrar y, a continuación, presionamos el botón Eliminar.
No se permitirá eliminar un estilo predeterminado, sino sólo aquellos que hayan sido creados por el usuario.
Efectos de Html dinámico Podemos aplicar efectos de animación en HTML dinámico (DHTML) a cualquier elemento de una página (texto, párrafos, imágenes, botones, marquesinas, etcétera) y unir el efecto a un evento desencadenador, como, por ejemplo, hacer clic con el Mouse, señalar con el Mouse, cargar una página, etcétera. En este tema nos dedicaremos básicamente a los efectos dinámicos que se pueden aplicar al texto. Para aplicar un efecto de este tipo debemos primero habilitar la barra de herramientas Efectos DHTML
Esta barra de herramienta mostrará sus opciones deshabilitadas hasta que no se elija un evento desencadenante.
Página 66 de 196
Luego de haber seleccionado el texto y elegido el efecto desencadenante, la barra mostrará habilitada sus opciones.
Depende del evento que desencadene la acción los efectos que podremos aplicar.
Para quitar un efecto: 1) 2)
Seleccionamos el párrafo que lo contiene. Ejecutamos una de las siguientes órdenes: Botón Quitar efecto de la barra de herramientas. Teclas Ctrl + Barra Espaciadora.
Elementos de fondo y colores de texto Podemos establecer o modificar el color de fondo y texto de la página que estamos editando utilizando la orden Formato – Fondo. La ejecución de la orden mostrará el siguiente cuadro de diálogo:
Página 67 de 196
En el área Fondo: Podemos escoger una imagen para mostrarla de fondo, estableciendo además si deseamos que se presente con Marca de agua. Esta opción hará que el contenido de la página se desplace cuando utilizamos la barra de desplazamiento pero el fondo permanece inmóvil.
En el área Colores:
Podemos especificar el color predeterminado para Fondo, Texto e Hipervínculos.
Temas Un tema es un conjunto de elementos de diseño unificados, y combinaciones de colores para imágenes de fondo, viñetas, fuentes, líneas horizontales y otros elementos de la página, que nos facilita la creación de sitios Web, bien diseñados. No proporciona elementos de Autotexto, barras de herramientas personalizadas, macros, valores de menús o teclas de método abreviado. Cuando se aplica un tema al sitio o a las páginas seleccionadas, FrontPage personaliza los gráficos o color de fondo, estilos de contenido y títulos, viñetas, líneas horizontales, colores de hipervínculos, color de bordes de tabla, botones, etc. Disponemos de temas preestablecidos que podemos utilizar inmediatamente; ya sea que los apliquemos tal y como están o modificados. Determinadas características de FrontPage sólo están disponibles cuando estamos utilizando un tema. Por ejemplo, los titulares de página y los botones de la barra de exploración aparecen como gráficos cuando hemos aplicado un tema; de lo contrario, se muestran como texto. Los temas nos permiten administrar la apariencia de las páginas en un único lugar. Cuando escogemos un tema predeterminado para el sitio Web, dicho tema se aplica a todas las páginas existentes y a las páginas nuevas que se agreguen más tarde. Es posible cambiar o quitar el tema predeterminado y los cambios se aplican automáticamente a todo el sitio Web. También existe la opción de aplicar temas a páginas individuales.
Página 68 de 196
Aplicar un tema Para aplicar un tema nuevo, quitar o modificar uno existente, utilizamos las opciones del Panel de tareas Tema. Si este no está visible podemos mostrarlo ejecutando la orden Formato -
Tema.
En la lista Seleccionar un tema hacemos clic sobre el tema que nos agrade. La página actual mostrará el aspecto del mismo y de este modo aplicaremos el tema solo esta página. Si hemos seleccionado más de una página, para aplicarlo a todas debemos hacer clic en la punta de flecha que se encuentra a la derecha de la muestra del tema y seleccionar la opción Aplicar a la página o páginas seleccionadas. Si deseamos (además de aplicarlo a la página actual) establecer el tema seleccionado como predeterminado (tema por omisión para las nuevas páginas que se agreguen al sitio) debemos seleccionar la opción Aplicar como tema predeterminado. En este panel podemos activar una de las siguientes casillas de verificación para establecer la apariencia del tema: Para utilizar una combinación de colores llamativos, activamos la casilla de verificación Colores intensos y la desactivamos si deseamos utilizar el conjunto de colores normal. Para usar un conjunto de titulares, botones, viñetas y otros elementos gráficos animados, activamos la casilla de verificación Gráficos activos. Si deseamos mostrar una imagen de fondo, activamos la casilla de verificación Imagen de fondo.
Página 69 de 196
Personalizar un tema Podemos cambiar los colores utilizados en un tema determinado. Por ejemplo, los hipervínculos activos del tema Arquitectura romana son verdes; podemos variar este color a rojo. También nos es posible cambiar los colores de otros elementos de texto y página, como el color del texto principal y del encabezado, el texto del titular, las etiquetas de la barra de exploración, los bordes de tabla y el fondo. Además, cada tema tiene dos conjuntos de colores (normal e intenso) y podemos especificar los colores de ambos conjuntos. Cuando modifiquemos un tema preestablecido, debemos guardar los cambios en un tema nuevo; no es posible sobrescribir en un tema preestablecido. Por ejemplo, si modificamos el tema Eje, podríamos guardar los cambios en un tema nuevo llamado Mi tema. Para modificar o personalizar un tema debemos seleccionar la opción Personalizar del menú. La ejecución de la orden mostrará el siguiente cuadro de diálogo:
Para cambiar los colores utilizados en el tema, presionamos el botón Colores. Este botón nos proporciona el siguiente cuadro de diálogo: Ficha Esquema de colores:
Página 70 de 196
Nos permite modificar la combinación de colores que deseamos aplicar al tema actual. Ficha Rueda de colores:
Dependiendo de la posición del indicador en la rueda de colores, obtenemos otra combinación aleatoria, mostrada en Colores de este esquema. En la barra indicadora Brillo, aumentamos o disminuimos el brillo de la combinación creada. Ficha Personalizar:
Página 71 de 196
En el cuadro Elemento, elegimos el elemento cuyo color deseamos modificar y, a continuación, en el cuadro Color, especificamos cuál es ese color. En la casilla de verificación Conjunto de colores, podemos especificar si deseamos cambiar los colores del conjunto de colores normal o intenso. Estas opciones están disponibles en cualquiera de las tres fichas antes mencionadas. Una vez realizadas las modificaciones deseadas en los colores del tema, debemos presionar el botón Aceptar. Podemos cambiar los gráficos utilizados en el tema, por ejemplo: cambiar la imagen de fondo por una que nosotros hayamos creado, o cambiar otros elementos gráficos como titulares de página, viñetas, botones de exploración y líneas horizontales, así como especificar la fuente que debe utilizar en los elementos gráficos mostrados con el texto. Además, cada tema tiene dos conjuntos de gráficos, normales y activos; en ambos conjuntos podemos especificar los gráficos que se utilizarán. Al aplicar el tema, debemos asegurarnos de seleccionar el conjunto de gráficos que hemos personalizado. Entonces para cambiar los gráficos presionamos el botón Gráficos. Este botón nos proporciona el siguiente cuadro de diálogo:
Página 72 de 196
1) En Conjunto de gráficos, especificamos si deseamos cambiar los gráficos del conjunto normales o activos (si está seleccionado el elemento Imagen de fondo, no podremos especificar cambios en el conjunto de gráficos). 2) En el cuadro Elemento, seleccionamos el elemento gráfico que deseamos cambiar. 3) Especificamos la imagen o imágenes a utilizar. Dependiendo del elemento seleccionado, aparecerán una o más opciones. Por ejemplo, en Lista de viñetas podemos especificar tres viñetas diferentes. Para buscar el gráfico en el sitio Web o en el sistema de archivos actual, presionamos el botón Examinar. 4) Si el elemento gráfico seleccionado muestra texto, las opciones de la ficha Fuente estarán disponibles y podremos modificarla. Una vez establecidos los cambios presionamos el botón Aceptar. Si deseamos cambiar el estilo del texto en un tema, simplemente accedemos al botón Texto, seleccionamos el elemento a modificar (Cuerpo, Encabezado1, etc) y modificamos la fuente. En caso de desear modificar con más detalle, presionamos el botón Más estilos de texto...
Página 73 de 196
Una vez establecidos los cambios presionamos el botón Aceptar. Luego de haber realizados todas las modificaciones al Tema deberemos guardarlo para que estas se vean reflejadas. Para esto presionamos el botón Guardar o Guardar como...para dar un nombre a la nueva configuración del tema, con los cambios que hemos realizado recientemente.
Presionamos el botón Aceptar para guardar el tema. Una vez guardado un nuevo tema, se agrega a la lista de los temas proporcionados por FrontPage, donde lo tendremos disponibles para aplicarlo en otras ocasiones. Eliminar un tema Para quitar el tema aplicado a la página actual, simplemente debemos seleccionar la opción Sin tema de la Lista de temas. Si deseamos quitar el tema aplicado a varias páginas a la vez debemos: 1. 2. 3.
Seleccionarlas de la Lista de carpeta. Hacer clic en la opción Sin tema de la Lista de temas. Seleccionar la opción Aplicar a la página o páginas seleccionadas del menú.
Página 74 de 196
Si lo que pretendemos es eliminar una configuración de tema, de la lista de temas en el cuadro de diálogo, simplemente debemos seleccionar la orden Eliminar del menú del tema. Debemos tener en cuenta que podremos eliminar sólo aquellos temas que el usuario ha creado, NO los que vienen incluidos en FrontPage.
Efectos de transición de páginas Podemos animar las páginas de manera que una página Web sea reemplazada con otra. Crear un efecto de transición en una página o Web Podemos crear efectos especiales que se muestran cuando el visitante entra o sale de un sitio o explora una página específica. Si aplicamos efectos de transición sistemáticamente y siguiendo un criterio en todo nuestro Web, podemos crear presentaciones con transiciones de apariencia profesional entre páginas. Para esto: 1) En la vista Diseño, abrimos la página en la que deseamos mostrar el efecto de transición. 2) Ejecutamos la orden Formato – Transición de página. La ejecución de la orden mostrará el cuadro de diálogo Transiciones de página que se muestra a continuación.
3)
En este cuadro determinamos cómo se realizará este efecto: En el cuadro Evento, escogemos el evento que desencadenará el efecto de transición. Por ejemplo, elegimos Entrar en página para mostrar el efecto de transición cuando el visitante explora la página por primera vez. En el cuadro Efecto de transición, elegimos el tipo de efecto que se utilizará al producirse el evento. En el cuadro Duración, ingresamos la cantidad de tiempo que deseamos que dure este efecto.
Página 75 de 196
TABLAS Y CAPAS Introducción Tablas HTML normales Tablas de diseño Capas Agregar una capa Operaciones con capas Comportamientos
Página 76 de 196
Introducción Las tablas permiten organizar la información y crear atractivos diseños de página con columnas paralelas de texto y gráficos. Las tablas HTML también pueden contener imágenes, botones, listas e incluso otras tablas. Teniendo en cuenta esto, las tablas pueden ser una herramienta excelente para crear un diseño de página. Se trata de una técnica muy utilizada por los diseñadores de sitios Web. La estructura similar a cuadrículas nos permite alinear y colocar fácilmente objetos. FrontPage 2003 introduce un nuevo concepto de tablas además de las tablas tradicionales que hemos utilizado hasta ahora, las que se denominan Tablas de diseño. De este modo podemos elegir o combinar ambas modalidades de tablas. Para una mejor comprensión de ambos tipos de tabla lo trataremos en forma independiente, por lo que las llamaremos:
Tablas HTML normales. Tablas de Diseño.
Tablas HTML normales Inserción de una tabla Una forma rápida de insertar una tabla es hacerlo desde la barra de herramientas. Para esto presionamos el botón Insertar tabla y arrastrando el Mouse seleccionamos la cantidad de filas y columnas deseadas.
La tabla generada a través de esta opción se mostrará con las propiedades predeterminadas.
Página 77 de 196
También podemos hacerlo desde el menú, ejecutando la orden Tabla - Insertar – Tabla. La ejecución de la orden mostrará el siguiente cuadro de diálogo:
En este cuadro de diálogo podremos establecer la configuración y propiedades de la tabla. Área Tamaño Establecemos la cantidad de filas y columna que deseamos tenga la tabla (2 es el valor predeterminado de filas y columnas) Área Diseño Alineación: Seleccionamos la posición donde deseamos que se coloque la tabla en la página. Tamaño del borde: escribimos el tamaño del borde de la tabla en píxeles. Un ancho de borde 0 significa que no aparecerá ningún borde de tabla en un explorador de Web. Cuando utilizamos una tabla para diseñar una página, establecemos el tamaño del borde a 0 para que la tabla sea invisible.
Página 78 de 196
Margen de la celda: Especifica el margen entre el contenido y el borde interior de una celda. Escribimos un número en píxeles. No podemos establecer el margen de celdas para una celda en particular. El margen de celdas predeterminado es uno. Espaciado entre celdas: Especifica la distancia entre los bordes interiores de una celda y otra. Escribimos un número en píxeles. El espaciado entre celdas predeterminado es dos. Especificar ancho: Si no especificamos un ancho, los exploradores de Web cambian el tamaño de la tabla para ajustar el contenido en las celdas de la tabla. Indicamos estas medidas en píxeles o porcentaje de la página.
A través del cuadro de diálogo insertar tabla también podremos asignar formatos a la tabla que tienen que ver con el grosor y color de los bordes así como el color de fondo de la misma. Área Bordes Tamaño: Nos permite especificar el ancho (en píxeles) para el borde de la tabla. Color: Establece el color del borde de la tabla y de los bordes de las celdas de la tabla. Si aplicamos un borde claro o un borde oscuro, ese color no aparece. Contraer borde de tabla: Representa los bordes de las celdas de la tabla como una sola línea en lugar de líneas separadas por un espacio. Borde claro: Cambia el color de los bordes izquierdo y superior de la tabla y los bordes derecho e inferior de las celdas de la tabla. Al aplicar colores claros y oscuros a estos bordes, se puede crear un efecto tridimensional para la tabla.
Página 79 de 196
Borde oscuro: Cambia el color de los bordes derecho e inferior de la tabla y los bordes izquierdo y superior de las celdas de la tabla. Al aplicar colores claros y oscuros a estos bordes, se puede crear un efecto tridimensional para la tabla.
Área Fondo Color: Permite establecer o modificar el color de fondo de la tabla. Utilizar imagen de fondo: A través de esta opción podremos agregar una imagen al fondo de la tabla. En el cuadro, escribimos la ruta de acceso y el nombre de archivo del archivo gráfico, presionamos el botón en Examinar para buscar el archivo. Propiedades: A través de este botón podemos modificar el formato o configuración de la imagen de fondo de la tabla. Debemos tener en cuenta que esta opción sólo está disponible una vez que se haya agregado la imagen de fondo a la tabla.
Si activamos la casilla de verificación Establecer como predeterminada para tablas nuevas FrontPage modificará la configuración de tablas predeterminada por la configuración actual.
Manejo de celdas, columnas y filas Desplazamiento dentro de la tabla
Selección Para escribir dentro de la tabla sólo debemos posicionarnos en la celda correspondiente y teclear el texto. Lo insertado se comporta como texto normal, pudiendo (dentro de una celda) darle formato al párrafo y al carácter igual que en cualquier parte del texto insertado en un documento.
Página 80 de 196
Para aplicarle estos formatos al texto, u otros formatos a la tabla, es necesario seleccionar lo que pretendemos modificar. Existen diversas formas de seleccionar toda o parte de la tabla.
Desde el Menú Para seleccionar desde el menú, ejecutamos la orden Tabla – Seleccionar y elegimos una de las siguientes opciones: Tabla Columna Fila Celda En caso que seleccionemos una columna, fila o celda, será la que contenga el punto de inserción. Utilizando las etiquetas de diseño. Podemos también hacer clic en las etiquetas de diseño para seleccionar toda o parte de la tabla en forma rápida. Para esto debemos estar posicionados dentro de la tabla.
Página 81 de 196
Añadir filas y columnas a una tabla Cuando insertamos una fila o columna, FrontPage insertará las celdas encima o a la izquierda de la ubicación del punto de inserción. Para insertar una fila: 1) Nos posicionamos en la fila que quedará adyacente a la nueva fila. 2) Realizamos una de las siguientes operaciones: Presionamos el botón Insertar filas de la barra de herramientas Tablas y bordes. Ejecutamos la orden Tabla – Insertar – Filas o columnas que nos proporcionará el cuadro de diálogo como se muestra a continuación:
Podemos añadir una fila en la parte inferior de una tabla, posicionándonos en la última celda de la misma y presionando la tecla Tab. Para insertar una columna: 1) 2)
Nos posicionamos en la columna que quedará adyacente a la nueva columna. Realizamos una de las siguientes operaciones: Presionamos el botón Insertar columnas de la barra de herramientas Tablas y bordes. Ejecutamos la orden Tabla – Insertar – Filas o columnas que nos proporcionará el cuadro de diálogo como se muestra a continuación:
Página 82 de 196
Para añadir celdas: 1) 2)
Seleccionamos la/s celda/s que deseamos insertar. Utilizamos la orden Tabla – Insertar – Celda.
Eliminar elementos de una tabla Podemos eliminar una tabla o sus elementos, de la siguiente manera:
Otra forma de eliminar toda la tabla es seleccionarla y presionar la tecla Supr. Debe tener en cuenta que si tiene solo parte de la tabla seleccionada esta tecla eliminará solo el contenido. Modificar formato a una tabla Si bien las propiedades de formato de la tabla pueden ser configuradas desde el cuadro de diálogo Propiedades de la tabla como se indicó anteriormente, existen otras formas de hacerlo. Aplicar bordes y sombreado Para trazar bordes a una tabla o área de esta: 1)
Seleccionamos las celdas de la tabla a las que se le aplicarán.
Página 83 de 196
2) 3)
Ejecutamos la orden Formato – Bordes y sombreado. Accedemos a la ficha Bordes para especificar los siguientes:
1)
Luego de realizada la configuración de borde deseada presionamos el botón Aceptar.
Para dar un sombreado: 1) 2) 3)
Seleccionamos las celdas de la tabla a las que se le aplicará el color de relleno. Ejecutamos la orden Formato – Bordes y sombreado. Accedemos a la ficha Sombreado para especificar lo siguiente:
El Color de primer plano se reflejará sólo si el color de la fuente es Automático.
Página 84 de 196
Debemos tener cuenta que como fondo admitirá un color o una imagen, no ambos. Si especificamos los dos, prevalece la imagen sobre el color. Para quitar un borde o sombreado debemos:
1) 2) 3)
Seleccionar las celdas a las que deseamos eliminar el borde y/o sombreado. Acceder al cuadro de diálogo Bordes y sombreado. Seleccionar la ficha correspondiente al formato que deseamos quitar. Ficha Bordes: Configurar opción Ninguno. Ficha Sombreado: Elegir Automático para quitar color de fondo o primer plano ó eliminar el nombre de la imagen para quitar la imagen de fondo.
Modificar Alineación Podemos alinear el contenido de las celdas de la tabla horizontal y/o verticalmente. Para alinear horizontalmente: 1) 2)
Seleccionamos las celdas cuya alineación deseamos modificar. Utilizamos: Los botones Alinear a la izquierda, Centrar y Alinear a la derecha de la barra de herramientas Formato. La orden Formato – Párrafo y seleccionamos la alineación correspondiente. La orden Tabla – Propiedades – Celda y seleccionamos la alineación correspondiente.
Para alinear verticalmente: 1) 2)
Seleccionamos las celdas cuya alineación deseamos modificar. Utilizamos: Los botones
Alinear con el borde superior,
Centrar verticalmente y
Alinear con el borde inferior de la barra de herramientas Tablas. La orden Tabla – Propiedades – Celda y seleccionamos la alineación correspondiente.
Distribuir filas y columnas Cuando hemos realizado modificaciones en el ancho de las columnas o en el alto de las filas, en forma manual, probablemente no logremos una distribución uniforme de las mismas, por lo que, para que las filas o columnas tengan el mismo alto o ancho, debemos hacer lo siguiente: Filas de igual alto
Página 85 de 196
1) Seleccionamos las filas que tendrán el mismo alto. 2) Ejecutamos la orden Tabla – Distribuir filas uniformemente o el botón barra de herramientas Tablas.
de la
Columnas de igual ancho 1)
Seleccionamos las columnas que tendrán el mismo ancho.
2) Ejecutamos la orden Tabla – Distribuir columnas uniformemente o el botón la barra de herramientas Tablas.
de
Autoajuste La orden Tabla – Autoajustar ó el botón Autoajustar de la barra de herramientas Tablas, ajusta automáticamente el ancho de las columnas de la tabla al dato más largo de cada columna.
Unión y división de celdas Combinar Celdas FrontPage nos permite combinar celdas, uniéndose el contenido de estas en la celda combinada. 1) Seleccionamos el grupo de celdas a combinar. 2) Ejecutamos cualquiera de las siguientes órdenes: Tabla –
Combinar celdas.
Botón Combinar celdas de la barra de herramientas Tablas. Orden Combinar celdas del menú emergente sobre las celdas seleccionadas. Dividir Celdas En una tabla podemos necesitar una columna o fila adicional en una parte de ésta pero no en toda la tabla. Podemos entonces, dividir algunas celdas realizando los siguientes pasos: 1) Seleccionamos las celdas que deseamos dividir. 2) Ejecutamos cualquiera de las siguientes órdenes: Tabla –
Dividir celdas.
Botón Dividir celdas de la barra de herramientas Tablas. Orden Dividir celdas del menú emergente sobre las celdas seleccionadas.
Página 86 de 196
Tablas anidadas Las tablas anidadas son aquellas que se realizan dentro de otra tabla. Para crear una tabla anidada simplemente nos posicionamos en la celda donde deseamos insertar la tabla nueva y seguimos el procedimiento para la creación de una tabla.
Propiedades de las celdas La orden Tabla – Propiedades – Celda nos muestra el cuadro de diálogo Propiedades de celda, donde podemos establecer o ver las propiedades de la selección, como, por ejemplo, el diseño, el tamaño o el color de fondo. Tengamos en cuenta que las propiedades que configuremos en este cuadro de diálogo se aplicarán al rango seleccionado, no a toda la tabla. La ejecución de la orden nos proporciona el siguiente cuadro de diálogo:
Página 87 de 196
La mayoría de las órdenes de este cuadro de diálogo, se especifican de la misma manera que en el cuadro de diálogo Propiedades de la tabla. Las que difieren son las siguientes en área Diseño: Alineación Vertical: especifica la alineación vertical del contenido de la celda. Número de filas: especifica el número de filas que abarca la celda. Número de columnas: especifica el número de columnas que abarca la celda. Casilla de verificación Celda de encabezado: designa las celdas seleccionadas como encabezado de tabla, lo que significa que se resaltarán. De forma predeterminada, el texto tiene formato en negrita. Casilla de verificación No ajustar: Impide que los exploradores Web ajusten el texto dentro de la celda. Si esta opción no está seleccionada, el texto de la celda se puede ajustar cuando aparece.
Tablas de Diseño Información acerca de las tablas y celdas de diseño Con Microsoft Office FrontPage 2003, se pueden crear diseños de páginas Web de aspecto profesional mediante tablas y celdas de diseño. Una tabla de diseño es el marco de trabajo que se crea para el diseño de la página. Las celdas de diseño son las zonas de ese marco de trabajo donde se encuentra el contenido de la página, incluidos textos, imágenes, elementos Web y otros elementos. En conjunto, las tablas y celdas de diseño representan las zonas horizontales y verticales que los usuarios pueden agregar a las páginas Web y que proporcionan una estructura visual más compleja a nuestros contenidos.
Página 88 de 196
Podemos utilizar las tablas de diseño predefinidas que están disponibles en el panel de tareas Tablas y celdas de diseño. También podemos crear nuestra propia tabla de diseño personalizada dibujando tablas y celdas. Además, de editar una página Web que contenga tablas y celdas de diseño agregadas a través de FrontPage u otra herramienta de creación de páginas Web, como Macromedia Dreamweaver. Por ejemplo podemos trazar una tabla de diseño que contenga una celda a lo largo del borde superior de la página para incluir un gráfico de encabezado, una celda en el borde izquierdo de la página para incluir una barra de vínculos y otra celda que vaya a incluir el contenido principal de una página Web y que se fije al borde derecho de la página.
Tablas y celdas de diseño Una tabla de diseño es la base principal o el "lienzo" del diseño. Cuando está seleccionada en la vista Diseño, viene identificada por un borde de color verde. Una tabla de diseño contiene celdas de diseño, que son las áreas dentro de la tabla de diseño que tienen contenido (texto, imágenes, etc.). Cuando están seleccionadas, vienen identificadas por un borde de color azul. Una tabla de diseño también contiene celdas espaciadoras, que no tienen contenido. Existen simplemente para que la suma de los anchos de las columnas dentro de la tabla sea igual al ancho global de la tabla. Las celdas espaciadoras vienen identificadas por el color beige. Este color, sin embargo, no aparece en el explorador, sólo aparece en la vista Diseño.
Página 89 de 196
Agregar una tabla de diseño Para agregar una tabla de diseño mostramos el panel de tareas Tablas y celdas de diseño ejecutando la orden Tabla – Tablas y celdas de diseño. En este panel podemos: Agregar una tabla de diseño de la lista de plantillas Diseño de tabla. Dibujar una tabla de diseño.
Agregar una tabla de diseño de la lista de plantillas Diseño de tabla
Para esto seleccionamos un diseño de la lista Diseño de tabla. Este ya se mostrará en la página actual.
Página 90 de 196
Insertar una tabla de diseño Para diseñar nuestra propia tabla de diseño comenzaremos insertando una en la página. Para esto hacemos clic en la opción Insertar Tabla de diseño del Panel de tareas. Esto mostrará en nuestra página lo siguiente.
La tabla será insertada con la configuración predeterminada. Para modificar las dimensiones de la misma podemos ingresar los valores deseados en los cuadros Ancho y Alto del área Propiedades de la tabla del Panel de tareas ó arrastrar con el Mouse desde los tiradores de tamaño de la tabla (cuadrados pequeños de color azul). Para modificar la alineación de la misma utilizamos las opciones de Alineación del Panel de tareas. Para que la tabla se muestre desde el borde de la hoja debemos acceder a la opción Establecer márgenes de la página y establecerles valor 0.
Dibujar tabla de diseño Podemos también dibujar una tabla de diseño, en un lugar especial de la página o dentro de una existente presionando el botón Dibujar tabla del Panel de tareas. Luego de presionar el botón arrastramos desde una esquina hacia su vértice opuesto como quien realiza el trazado de un rectángulo. Agregar celdas de diseño a la tabla Para agregar celda de diseño también tenemos dos opciones: Utilizar la opción Insertar celda de diseño del Panel de tareas. Utilizar la opción Dibujar celda de diseño del mismo Panel.
Página 91 de 196
Si utilizamos la opción Insertar celda de diseño deberemos posicionarnos en el lugar donde deseamos insertar la celda y luego ejecutar la orden. Esto mostrará un cuadro de diálogo como el siguiente:
En este podremos indicar de qué forma se agregará la celda con respecto al lugar donde estamos posicionados dentro de la tabla, así como opciones de Ancho, Alto y Ubicación. Si utilizamos la opción Dibujar celda de diseño debemos presionar el botón Dibujar celda del Panel de tareas, (esta es la opción más utilizada) arrastramos con el Mouse para dibujar la celda en el lugar de la tabla que lo necesitemos. FrontPage agregará automáticamente las celdas de relleno en el lugar que las necesite.
Propiedades de las tablas y celdas de diseño Unas de las grandes ventajas que poseen este tipo de tablas y celdas es el hecho de que muestran etiquetas que visualizan el tamaño de alto y ancho de las mismas y los tiradores de tamaño que nos permiten una fácil modificación de sus dimensiones. Las propiedades de las tablas y celdas de diseño pueden ser configuradas de la misma forma que la descrita para las tablas normales, pero en especial las celdas cuentan con paneles especiales que nos permiten establecer una amplia gama de parámetros.
Página 92 de 196
Para acceder a estos paneles debemos seleccionar la celda (para seleccionar una celda bastará con realizar clic sobre alguno de sus bordes) a la cual deseamos modificar su formato y hacer clic en la opción Formato de la celda del Panel de tareas. Esta acción mostrará el Panel Formato de celda, este a su vez tendrá diferentes opciones según la propiedad que deseamos modificar. Propiedades de celdas y bordes, estas opciones aparecen por omisión al presionar la opción Formato de celdas.
A través de este Panel podremos establecer:
Las dimensiones de la celda. Margen de celdas. Color de relleno. Color, estilo y tamaño del borde.
Presionamos la opción Encabezado y pie de página para agregar encabezados y pie a la celda seleccionada y configurar para ellos sus propiedades.
Página 93 de 196
Utilizamos las opciones Esquinas y sombras para dar distintos efectos a la celda seleccionada.
Página 94 de 196
La utilización de estas propiedades permitirá construir diseños realmente profesionales. El ejemplo de la figura anterior esta realizado utilizando la imagen predeterminada. Si tenemos una esquina ya diseñada en otra aplicación podemos utilizarla seleccionando la opción Usar imagen personalizada. Cuando agregamos una esquina se crea automáticamente el Encabezado y/o pie de celda según el lugar donde sea agregada.
Capas Una capa es un elemento de página HTML que se puede colocar en cualquier lugar del documento. Las capas pueden contener texto, imágenes u otros contenidos que se pueden situar en el cuerpo de un documento HTML. FrontPage 2003 permite insertar y asignar comportamientos a estas sin necesidad de utilizar código JavaScript o HTML. Podemos colocar unas capas delante o detrás de otras, ocultar algunas capas mientras muestra otras y mover capas por la pantalla. Podremos colocar una imagen de fondo en una capa y, a continuación, insertar una segunda capa, con texto y un fondo transparente, delante de la primera. Las capas proporcionan una gran flexibilidad a la hora de colocar contenido. Estas funcionan con Microsoft Internet Explorer 5 o superior. Tomaremos un ejemplo muy sencillo: Supongamos que tenemos una página como la siguiente:
Utilizaremos una capa delante de ella a la cual solo colocaremos un gif animado, un caracol que parece correr.
Página 95 de 196
Cuando la veamos en el Explorador Web solo se verá el Caracol que pasa delante del texto y desaparece.
Agregar una capa FrontPage permite crear capas en la página fácilmente y colocarlas con precisión. Para crear una capa, debemos habilitar el Panel de tareas Capas. Luego de mostrado este podemos utilizar la opción Insertar capa
para agregar una Capa en la posición
del punto de inserción o utilizar la opción Dibujar capa manual.
para trazarla en forma
Página 96 de 196
Se pueden crear múltiples parcialmente.
capas, estas pueden estar superpuestas total o
A través del mismo Panel podemos modificar sus propiedades: Hacemos clic en la opción Bordes y sombreado para establecer las propiedades de la capa seleccionada. Para seleccionar una capa bastará con realizar un clic en su borde (si está seleccionada su borde es azul) ó en su nombre en el panel de Tareas. Al presionar esta opción se mostrará el cuadro de diálogo bordes y sombreado.
Las propiedades de este cuadro de diálogo son las mismas que las indicadas en Propiedades de las tablas.
Página 97 de 196
Hacemos clic en Colocar, para establecer la Ubicación con respecto a los demás elementos de la página y el tamaño de la misma.
Operaciones con capas Eliminar una Capa Para eliminar una capa simplemente deberemos seleccionarla y presionar la tecla Supr. Mover una capa Para mover o desplazar una capa de un lugar a otro de la página simplemente deberemos seleccionarla y arrastrarla hasta la nueva posición.
Página 98 de 196
Comportamientos Podremos establecer distintos comportamientos, acciones o animaciones a las capas que agregamos a nuestras páginas. Para esto debemos tener seleccionar la opción Comportamientos del Panel de tareas Capas.
Una vez en el Panel, para asignar un comportamiento a una capa debemos: 1) Seleccionarla. 2) Presionar el botón Insertar del panel Comportamientos muestra elegir la opción deseada.
y del menú que se
Página 99 de 196
Cada uno de los comportamientos se configura de forma diferente. Se puede configurar más de un comportamiento para cada capa, estos se irán mostrando en el Panel de tareas.
Cada comportamiento tendrá básicamente dos parámetros: la acción que realiza y el evento que la produce. El evento podrá ser por ejemplo: al hacer clic (on clic), al presionar una tecla (onkeypress), etc.
Página 100 de 196
INSERCIÓN Y TRATAMIENTO DE ELEMENTOS GRÁFICOS (1 era parte) Introducción Objetos de dibujo Imágenes de la Galería Multimedia de Microsoft Imágenes desde archivo Agregar archivos Multimedia Modificar propiedades de imágenes y archivos Multimedia
Página 101 de 196
Introducción La característica que revolucionó la World Wide Web fue la incorporación de un entorno gráfico. Actualmente, el excesivo uso de imágenes en las páginas demora la bajada de archivos aumentando el tiempo que consume esta tarea. Estrictamente hablando, HTML es incapaz de contener imágenes. Lo que contiene son nombres de archivos de imagen y algún código de formato acompañándolos. Al recibir un archivo HTML, el explorador del visitante nota los nombres y la ubicación de los archivos de imagen requeridos, los recupera desde el servidor y los despliega. Sin embargo, páginas e imágenes contenidas deben trabajar juntas y, por lo tanto, ser diseñadas juntas. Microsoft FrontPage no solamente soporta todas las capacidades de HTML para agregar imágenes gráficas a las páginas Web, sino que también permite desplegar y editar gráficos integrados.
Objetos de dibujo Líneas, flechas, rectángulos y elipses Desde la barra de herramientas de Dibujo podemos realizar una serie de objetos. Solo basta con seleccionar el botón correspondiente en la misma y arrastrar con el Mouse hasta lograr la forma y tamaño deseado.
Para trazar un rectángulo seleccionamos la herramienta Para trazar una elipse o círculo la herramienta Para trazar líneas rectas la herramienta Para trazar una flecha Si deseamos trazar un cuadrado o un círculo de forma fácil, mientras realizamos el trazado con la herramienta correspondiente mantenemos presionada la tecla Mayús. Para trazar líneas, y flechas, rectas u oblicuas en incrementos de 15º también debemos mantener presionada la tecla Mayús. mientras realizamos el trazado.
Página 102 de 196
Seleccionar objetos Para seleccionar solo un objeto bastará con hacer un clic sobre él. Si deseamos seleccionar más de un objeto a la vez podemos: Hacer clic sobre cada uno mientras mantenemos presionada la tecla Mayús.
Hacer clic en la herramienta Seleccionar objetos encierre totalmente los objetos a seleccionar.
y abrir un rectángulo que
Modificar tamaño de los objetos Para modificar el tamaño de los objetos debemos: 1) Seleccionar el objeto haciendo un clic sobre él. Al seleccionar el objeto este mostrará pequeños círculos denominados tiradores. 2) Arrastrar desde los tiradores hasta lograr el tamaño deseado.
Modificar formato Podemos aplicar distintos formatos a los objetos como, estilos y color de línea, rellenos, sombra y efectos 3D. Para esto utilizaremos las prestaciones de la barra de herramientas Dibujo. Para modificar el tipo de línea: 1) Seleccionamos el objeto. 2) Elegimos el tipo de línea presionando el botón Estilo de guión
.
3) En la lista desplegable suministrada por el botón Estilo de línea indicamos su grosor. 4) Si deseamos modificar el color de la misma elegimos uno de la paleta de la herramienta Color de línea
Página 103 de 196
Establecer color de relleno Podemos agregar distintos tipos de relleno a los objetos de la siguiente forma: 1) Seleccionamos el objeto al que aplicaremos el relleno. 2) Hacemos clic en la punta de flecha del botón Color de relleno mostrará el siguiente menú:
. Esto nos
Podemos elegir un color de esta paleta, o seleccionar la opción Más colores de relleno para visualizar mayor cantidad de colores. La opción Efectos de relleno muestra un cuadro de diálogo donde podremos aplicar distintos efectos de rellenos como degradados, texturas, tramas e incluso imágenes.
Este cuadro de diálogo como se indicó anteriormente a través de sus distintas fichas nos permite seleccionar: Degradados, Texturas, Tramas e Imágenes. La opción Transparencia hace que se vea/n o no (según el grado de la misma establecido) el /los objetos que se encuentran debajo.
Página 104 de 196
Efecto de degrado sin transparencia aplicada y con transparencia respectivamente
Las transparencias también pueden aplicarse a las tramas, texturas e imágenes.
Mover y copiar objetos Para mover y/o copiar objetos se utilizan los procedimientos descritos en el Tema 3 Agregar y editar la información de una página
Eliminar objetos Para eliminar el/los objetos seleccionado/s presionamos la tecla Supr.
Rotar Si el objeto que deseamos rotar es un rectángulo, elipse, círculo ó cuadrado al seleccionarlo aparecerá un tirador de color verde el cual nos permitirá realizar la rotación arrastrando de él.
Página 105 de 196
Otra forma de realizar la rotación es utilizar la orden Girar libremente del submenú de la orden Girar o voltear del botón Dibujo. Al ejecutar la orden el objeto se mostrará de la siguiente forma:
Las orden Girar a la izquierda y Girar a la derecha del submenú Girar o voltear rotarán el objeto seleccionado en incrementos de 90º hacia la izquierda y derecha respectivamente.
Reflejar Podemos reflejar horizontal o verticalmente un objeto mediante las órdenes Voltear horizontalmente y Voltear verticalmente del submenú Girar o voltear.
Aplicar sombra Podemos aplicar distintos tipos de sombra a los objetos mediante el siguiente procedimiento: 1)
Seleccionamos el/los objeto/s.
2)
Desplegamos la lista de la herramienta Estilo de sombra
.
Página 106 de 196
Para modificar las propiedades de la sombra debemos seleccionar la opción Configuración de sombra, la cual nos proporcionará la barra de herramientas Configuración de sombra donde podremos modificar su posición y color.
Efecto 3D Efecto 3D es otro de los efectos que podemos aplicar a nuestros objetos. Para aplicarlo: 1)
Seleccionamos el/los objeto/s.
2)
Desplegamos la lista de la herramienta Estilo 3D
.
Página 107 de 196
Para modificar las propiedades del efecto debemos seleccionar la opción Configuración 3D, la cual nos proporcionará la barra de herramientas Configuración 3D donde podremos modificar su posición, profundidad, dirección, iluminación, tipo de superficie y color.
Ordenar El orden en que se apilan los objetos es el orden en que los hemos ido trazando. Para modificar su orden de apilamiento utilizaremos las opciones del submenú Ordenar del menú Dibujo.
Ejemplo Tenemos los siguientes objetos:
Página 108 de 196
Si deseamos que el ovalo verde se coloque por delante de los demás, lo seleccionamos y ejecutamos la orden Traer al frente. Si deseamos que el ovalo verde se coloque entre el rectángulo azul y el triángulo rojo, lo seleccionamos y ejecutamos la orden Traer adelante. Esta última avanza el objeto una posición hacia delante. También podemos realizar las acciones inversas en las cuáles la orden Enviar al fondo colocará el objeto seleccionado debajo de todos los demás y la orden Enviar atrás avanza hacia atrás de a una posición.
Grupos de objetos Si deseamos que determinados objetos se transformen en una unidad, deberemos agruparlos. Para esto: 1) Seleccionamos los objetos a agrupar. 2) Ejecutamos la orden Agrupar del menú Dibujo de la barra de herramientas del mismo nombre. Al convertirse en grupo los objetos ya no podrán ser editados en forma individual.
Si deseamos que el grupo vuelva a separarse para poder editar sus objetos en forma individual debemos seleccionar el grupo y ejecutar la orden Desagrupar del menú Dibujo.
Autoformas Las Autoformas son un grupo de formas ya elaboradas que incluye formas básicas, como rectángulos y círculos, más una gran variedad de líneas y conectores, flechas de bloque, símbolos de diagrama de flujo, cintas y estrellas, y llamadas. Para agregar una autoforma: 1) 2) 3) 4)
Presionamos el botón Autoformas de la barra de herramientas Dibujo. Elegimos una categoría. Seleccionamos una forma. Hacemos clic en el documento y arrastramos hasta obtener el tamaño deseado.
Algunas autoformas como las Llamadas posicionan en forma automática el punto de inserción para que agreguemos un texto, no obstante podemos agregar texto a cualquier objeto ejecutando la orden Agregar texto del menú emergente sobre la misma.
Página 109 de 196
La forma de dar formato, y manipular las autoformas es igual que a la descrita para el punto anterior.
Cuadro de Texto Un cuadro de texto es un contenedor móvil de tamaño variable para texto o gráficos. Estos son muy útiles para colocar bloques de texto en una página o para dar a un texto una orientación distinta de otro texto en el documento. Cuando se inserta un cuadro de texto, también aparece el lienzo de dibujo, pero podemos arrastrarlo fuera de éste si lo deseamos. Para insertar un cuadro de texto: 1) Presionamos el botón Cuadro de texto de la barra de herramientas Dibujo o ejecutamos la orden Insertar – Cuadro de texto. 2) Arrastramos en la página hasta lograr el tamaño deseado. 3) Ingresamos el texto. 4) Hacemos clic fuera del mismo.
Podemos utilizar las opciones de la barra de herramientas Dibujo descritas anteriormente para mejorar un cuadro de texto (por ejemplo, para cambiar el color de relleno) del mismo modo que las utiliza con cualquier otro objeto de dibujo. Los cuadros de textos tienen márgenes internos predeterminados, para modificarlos, accedemos al cuadro de diálogo Formato del cuadro de texto realizando un doble clic sobre su borde, y en la ficha Cuadro de texto establecemos los nuevos márgenes.
Página 110 de 196
WordArt Podemos crear texto sombreado, asimétrico, girado y estirado, así como texto que haya sido adaptado a formas previamente definidas. Debido a que los efectos especiales de texto son objetos de dibujo, también pueden utilizarse los botones de la barra de herramientas Dibujo para cambiar el efecto; por ejemplo, para rellenar un efecto de texto con una imagen. Es importante tener en cuenta que los efectos especiales de texto son objetos de dibujo y que, por lo tanto, no se tratan como texto. No podremos corregir la ortografía como haríamos con un texto normal. Para insertar un texto de este tipo: 1) Presionamos el botón Insertar WordArt de la barra de herramientas Dibujo lo cual nos mostrará el siguiente cuadro de diálogo:
2) 3)
Elegimos un estilo del panel y presionamos el botón Aceptar. Aparecerá un cuadro de diálogo para que ingresemos el texto.
Página 111 de 196
4)
En este cuadro de diálogo también podemos especificar el tipo de fuente, tamaño y estilo del texto.
Presionamos el botón Aceptar.
El texto se mostrará de la siguiente forma:
Cuando seleccionamos el WordArt aparece la barra de herramientas WordArt para que podamos manipular el mismo.
Nuevo dibujo Si ejecutamos la orden Insertar – Imagen – Nuevo dibujo, aparece un lienzo de dibujo alrededor. Este nos ayuda a mantener unidas las distintas partes del dibujo, lo que es particularmente útil si se compone de varias formas. Asimismo, el lienzo proporciona un límite a modo de marco entre el dibujo y el resto del documento. De manera predeterminada, éste no tiene bordes ni fondo, pero se le puede aplicar formato como a cualquier objeto de dibujo. El lienzo de dibujo se puede contraer de manera que se ajuste completamente alrededor de los objetos de dibujo. También se puede expandir el objeto de dibujo y el lienzo al mismo tiempo, o sólo el dibujo y no el lienzo. Si no deseamos utilizar el lienzo de dibujo, podemos arrastrar el objeto fuera del mismo, seleccionarlo y eliminarlo.
Página 112 de 196
Ejemplo de dibujos realizados en el lienzo.
Al trabajar con el Lienzo aparecerá la siguiente barra de herramientas:
Ajustar: Esta opción ajusta el lienzo al tamaño de su contenido. Expandir: Agrega espacio alrededor de los dibujos aumentando el tamaño del lienzo que los rodea. Ajustar el tamaño del dibujo: Redimensiona a escala el dibujo, el lienzo circundante y el texto del interior de las formas.
Imágenes de la Galería Multimedia de Microsoft Imágenes Prediseñadas Para insertar una imagen a través de la galería de Office debemos ejecutar la orden Insertar – Imagen – Imágenes prediseñadas ó presionar el botón Insertar imagen prediseñada
de la barra de herramientas de Dibujo.
Página 113 de 196
Al ejecutar esta orden Microsoft FrontPage abrirá el panel de tareas Imágenes prediseñadas. En este accedemos a Organizar clips... La Galería multimedia de Microsoft contiene dibujos, fotografías, sonidos, vídeos y otros archivos multimedia, denominados clips, que podemos insertar.
Esta ventana está dividida en dos zonas, la izquierda la ocupa por omisión la Lista de colecciones y la zona derecha que muestra el contenido de la colección seleccionada. En el área de contenido este puede ser visualizado de tres formas diferentes, estas reciben el nombre de Vistas, las cuales son Detalles, Lista y Miniatura siendo esta última la vista por omisión. Para cambiarnos de una vista a otra en forma rápida debemos hacer clic en el botón correspondiente a cada una, en la barra de herramientas Estándar. Miniatura Lista Detalles En el panel Lista de colecciones se muestran todas las carpetas que contienen imágenes en nuestro equipo. Para utilizar la Galería de Office debemos seleccionar la carpeta Colecciones de Office y recorrer las distintas carpetas (colecciones de clips). Al posicionar el Mouse sobre un clip éste se mostrará de la siguiente forma:
Página 114 de 196
Al pasar el puntero del Mouse por encima del clip se muestra la palabra clave del mismo, sus medidas en píxeles, el tamaño del archivo y su extensión. Insertar un clip Para insertar un clip podemos realizar cualquiera de los siguientes procedimientos: Arrastrar y soltar Simplemente arrastramos el clip hasta la posición del documento en el que lo deseamos colocar. Mediante el Portapapeles 1) Seleccionamos el clip que deseamos insertar. 2) Seleccionamos la orden Copiar del menú de opciones o presionamos el botón Copiar de la barra de herramientas de la ventana. 3) Posicionamos el punto de inserción en el lugar del documento donde deseamos colocar el clip y ejecutamos la orden Pegar.
Crear una nueva colección: Podemos crear nuevas colecciones dentro de Mis colecciones pero no dentro de las Colecciones de Office Para crear una nueva colección: 1) Ejecutamos la orden Archivo – Nueva colección en la ventana Galería Multimedia de Microsoft. 2) La ejecución de esta orden nos mostrará el siguiente cuadro de diálogo, donde ingresaremos el nombre y ubicación de la nueva colección.
Página 115 de 196
3) Presionamos el botón Aceptar. 4) La colección se mostrará agregada en la ventana.
Copiar y mover colecciones Podemos mover o copiar colecciones de un lugar a otro mediante las órdenes del portapapeles o las ordenes Copiar colección o Mover colección.
Eliminar una colección Para eliminar una colección debemos seleccionarla y realizar cualquiera de los siguientes procedimientos:
Ejecutar la orden Eliminar del menú emergente sobre la misma.
Presionar el botón Eliminar Presionamos la tecla Supr.
de la barra de herramientas Estándar.
Solo podrán ser eliminadas las colecciones creadas por el usuario.
Página 116 de 196
Copiar y mover clips Podemos mover o copiar el o los clips seleccionados utilizando las órdenes del portapapeles o utilizando las órdenes Edición – Copiar a la colección ó Edición – Mover a la colección. Estas órdenes también pueden ejecutarse desde el menú emergente sobre el clip seleccionado. Eliminar un clip: Al momento de eliminar un clip podemos optar por eliminarlo de la colección o eliminarlo de la Galería. Para esto ejecutamos la orden Eliminar de “Nombre colección” o Eliminar de la Galería Multimedia del menú de opciones del clip. Vista previa y propiedades En la galería las secuencias o gif animados por ejemplo se visualizan estáticos, si deseamos visualizar su movimiento debemos ejecutar la orden Vista previa o propiedades del menú de opciones del clip.
Las animaciones se identifican con una pequeña estrella en la esquina inferior derecha.
La ejecución de la orden nos proporcionará el siguiente cuadro de dialogo:
Los botones Anterior y Siguiente nos llevan al clip anterior o siguiente dentro de la colección activa. Si presionamos el botón Editar palabras clave nos abre un cuadro de diálogo donde podemos agregar y/o quitar palabras claves al clip. Estas palabras claves son útiles a la hora de buscar determinados tipos clip.
Página 117 de 196
Buscar clips Para buscar clips debemos utilizar el panel de tareas Buscar el cual sustituirá en posición al panel de tareas Lista de colecciones. Este se mostrará de la siguiente forma:
Es en la búsqueda donde vemos la importancia de las palabras claves, ya que es por ésta y no por el nombre del archivo, que se realizará la búsqueda. Para realizar una búsqueda debemos: 1) Escribir en el cuadro Buscar texto una palabra que consideremos relacionada con la imagen a buscar, por ejemplo Arquitectura. 2) En la lista desplegable Buscar en indicar en que colecciones deseamos que se realice la búsqueda. 3) En la lista desplegable Los resultados deben ser indica que tipos de elementos multimedia se desea buscar.
Página 118 de 196
4) Una vez indicados los criterios de búsqueda presionamos el botón Buscar. Los resultados de la búsqueda se mostrarán en el área de contenidos. Resultados de la búsqueda con los criterios antes expuestos.
Imágenes desde archivo Con FrontPage, agregar gráficos a una página es tan fácil como arrastrar y soltar. Podemos entonces:
Arrastrar imágenes desde el Explorador de Windows a la página Web. Arrastrar imágenes desde Internet Explorer a la página Web. Arrastrar imágenes desde una página abierta a otra. Arrastrar imágenes de una localización a otra dentro de la misma página. Copiar imágenes de otros programas utilizando el portapapeles. Arrastrar imágenes desde la lista de carpetas.
Página 119 de 196
También podemos insertar una imagen a través de la orden Insertar – Imagen – Desde Archivo.
Una vez localizado el mismo presionamos el botón Insertar o simplemente realizamos un doble clic sobre el nombre del mismo. Este será insertado en la posición del punto de inserción.
Página 120 de 196
Agregar archivos Multimedia Para insertar un clip de Video en una página Web: 1) Colocamos el puntero en la posición donde deseamos aparezca el video. 2) Ejecutamos la orden Insertar – Imagen – Video. 3) Aparecerá un cuadro de diálogo llamado Video similar al de Imagen desde archivo.
Modificar propiedades de imágenes y archivos Multimedia Para modificar las propiedades de las imágenes insertadas en nuestra página: 1) Seleccionamos la imagen que deseamos modificar. 2) Ejecutamos la orden Formato – Propiedades ó la misma orden del menú emergente sobre la imagen. 3) Aparecerá el siguiente cuadro de diálogo:
Página 121 de 196
Propiedades de tamaño y alineación Utilizamos la ficha Apariencia del cuadro de diálogo Propiedades de la imagen.
Área Diseño: Alineación: Especificamos cómo deseamos alinear la imagen con el texto circundante. Grosor del borde: Especificamos el grosor del borde alrededor de la imagen, en píxeles. Espaciado horizontal: Especifica el espaciado horizontal entre la imagen y el texto o imagen más cercanos en la línea actual, en píxeles. Espaciado vertical: Especifica el espaciado vertical entre la imagen y el texto o imagen más cercanos en la línea que está por encima o por debajo de la línea actual, en píxeles. Área Tamaño: Esta área nos permite especificar el ancho y alto del gráfico, en píxeles o porcentaje de la página. Para conservar las proporciones originales del gráfico, activamos la casilla de verificación Conservar relación de aspecto.
Propiedades Generales Utilizamos la ficha General del cuadro de diálogo Propiedades de la imagen.
Página 122 de 196
Área Origen de la imagen: Muestra la ubicación de la imagen, una dirección URL relativa si la imagen está en un Web, una dirección URL absoluta si la imagen está en el World Wide Web, o una ubicación de archivo si la imagen está en el sistema de archivos. Botón Examinar: permite seleccionar una imagen del Web, de la red local, del World Wide Web o de la Galería de imágenes de Microsoft. Botón Modificar: abre la imagen seleccionada en el editor asociado. Área Tipo: Convierte el formato de la imagen seleccionada, al tipo especificado en esta área (GIF, JPEG).
Área Representaciones alternativas: Baja resolución: Especificamos la imagen de baja resolución que deseamos mostrar en lugar de la original. Algunos exploradores de Web muestran esta imagen mientras se descarga la imagen principal del servidor Web. Por ejemplo, creamos una copia de una imagen, la guardamos con baja resolución y, después, especificamos esa versión aquí. Botón Examinar: Permite buscar una imagen de baja resolución para mostrar en lugar de la imagen original. Texto: Escribimos el texto que deseamos mostrar en lugar de la imagen cuando mostrar imágenes está deshabilitado o no disponible en el explorador de Web. Algunos exploradores de Web también muestran este texto alternativo (ALT) mientras
Página 123 de 196
se descarga la imagen o cuando un visitante coloca el puntero del Mouse (ratón) sobre la imagen. Área Hipervínculo predeterminado: Ubicación: Escribimos la dirección URL relativa de la página que recuperará el visitante al hacer clic en la imagen. Botón Examinar: Podemos usar este botón para localizar la dirección de esta página. Marco de destino: Escribimos el nombre del marco de destino predeterminado que deseamos mostrar al ejecutar el hipervínculo. Botón Cambiar marco de destino: Permite especificar el marco en el que deseamos mostrar la página a la que apunta el hipervínculo.
Propiedades de Video Utilizamos la ficha Video del cuadro de diálogo Propiedades de la imagen.
Área Origen de video: Muestra la ubicación del archivo de video: una dirección URL relativa si el archivo está en un Web o una ubicación de archivo si el archivo está en el sistema de archivos local. La casilla de verificación Mostrar controles en el explorador: Especifica los botones que se van a mostrar en el explorador de Web para iniciar, detener y reproducir el video. Esta función no es compatible con todos los exploradores de Web.
Página 124 de 196
Área Repetir: Bucle: Escribimos el número de veces que deseamos que se reproduzca el sonido de fondo. La casilla de verificación Siempre: indica que se reproduzca continuamente el sonido de fondo mientras se muestra la página. Retardo de Bucle: Si el video está configurado para hacer un bucle una cantidad de veces o siempre, especificamos el retardo entre cada reproducción de video en milisegundos. Área Iniciar: La casilla de verificación Al abrir el archivo: Especifica que el video se va a empezar a reproducir cuando la página aparezca por primera vez en un explorador de Web. La casilla de verificación Al pasar el Mouse: Especifica que el video se va a empezar a reproducir cuando un visitante mueva el puntero del Mouse (ratón) encima del video.
Página 125 de 196
INSERCIÓN Y TRATAMIENTO DE ELEMENTOS GRÁFICOS (2 da parte) Cuadro de ubicación Usar herramientas de imagen de FrontPage Galería de fotografías Formato de archivos gráficos
Página 126 de 196
Cuadro de ubicación Un cuadro de ubicación es una zona en la que los elementos incluidos se consideran como una unidad. Podemos incluir tanto texto como otros objetos. El resultado es un cuadro de ubicación colocado de forma relativa con respecto a otros elementos de página, aunque el diseño de los elementos del cuadro se mantiene, independientemente de los cambios realizados en la página fuera del cuadro. Para crear un cuadro de ubicación: 1) En la vista Página, posicionamos el punto de inserción en el lugar en el que deseamos colocar el cuadro de ubicación. 2) Presionamos Intro dos veces para insertar una línea en blanco nueva (una marca de párrafo). 3) Seleccionamos la línea en blanco. 4) Ejecutamos la orden Formato – Ubicación. 5) En Estilo de ubicación, seleccionamos Relativo. 6) Oprimimos el botón Aceptar. Se insertará un cuadro de ubicación en la línea nueva. Para ingresar información dentro del cuadro creado: 1) 2)
Hacemos clic dentro del cuadro de ubicación. Insertamos el elemento de página o escribimos el texto que deseamos colocar.
Si deseamos modificar su tamaño bastará con arrastrar con el Mouse desde sus puntos delimitadores. Para eliminar un cuadro de ubicación: 1) 2) 3)
Seleccionamos el cuadro por el borde. Ejecutamos la orden Formato – Ubicación. Seleccionamos la opción Ninguno del área Estilo de ubicación.
Página 127 de 196
Usar herramientas de imagen de FrontPage FrontPage provee de un variado conjunto de funciones de edición de imágenes. Estas funciones certeramente no reemplazan un editar de imagen pero proveen convenientemente la herramienta justa, en el lugar justo y en el menor tiempo posible. Agregar texto a las imágenes Los autores Web necesitan por lo general agregar texto a ciertas imágenes. Para esto: 1) Seleccionamos la imagen en la que deseamos insertar el texto. 2) Presionamos el botón Texto de la barra de herramientas Imagen. La imagen debe estar en formato GIF de lo contrario FrontPage nos mostrará un cuadro de diálogo dándonos la posibilidad de convertirla a este formato, advirtiéndonos de las propiedades de la imagen que se modificarán en la conversión.
3) Aparecerá un cuadro contenido en la imagen donde podremos ingresar nuestro texto. 4) Variamos las propiedades del texto ingresado, seleccionándolo y ejecutando la orden Formato – Fuente, o usando los botones de la barra de herramientas Formato. Cada cuadro admitirá un único formato. 5) Para finalizar clic fuera del gráfico.
Para que en el explorador una imagen a la cual le deseamos agregar texto se vea transparente, debemos primero crear la imagen transparente en el editor de imágenes, luego insertarla en la página para finalmente agregarle texto.
Página 128 de 196
Crear una vista en miniatura de una imagen Podemos utilizar FrontPage para crear una vista en miniatura, que es una pequeña versión de la imagen en la que el visitante hace clic para seguir un hipervínculo (ver tema Hipervínculos) a la imagen de tamaño completo. Una vista en miniatura resulta útil cuando la imagen es grande y lleva mucho tiempo descargarla, en función del sistema del visitante. En lugar de forzarlo a descargar una imagen grande, podemos proporcionarle una vista en miniatura, que permite al visitante elegir si desea ver la versión de tamaño completo. Para esto: 1) En la vista Página, seleccionamos la imagen. 2) En la barra de herramientas Imágenes, presionamos el botón Vista en miniatura automática. 3) FrontPage crea la imagen de la vista en miniatura y un hipervínculo a la imagen original de tamaño completo. La opción Vista en miniatura automática no estará disponible tanto si la imagen seleccionada ya es más pequeña que una vista en miniatura, como si la imagen tiene establecidos un hipervínculo, zonas activas o si es una animación. Imagen en el Explorador Web de vistas en miniatura.
Si realizamos un clic sobre la imagen esta se mostrará en su tamaño real.
Página 129 de 196
La vista en miniatura muestra por omisión un tamaño determinado, y un borde de color azul. Podemos modificar las propiedades generales de estas vistas ejecutando la orden Herramientas – Opciones de páginas. En el cuadro de diálogo proporcionado debemos seleccionar la ficha Vistas en miniatura automática.
La configuración de tamaño y tipo de borde será la predeterminada para todas las imágenes en miniatura. Si deseamos modificar el tamaño de alguna miniatura en particular deberemos hacerlo en forma individual de la forma descrita para las imágenes. Establecer las propiedades de ubicación de un elemento de página
Página 130 de 196
Después de haber insertado un elemento de página, es posible establecer las propiedades de ubicación siguientes: 1) Cambiar el estilo de ubicación del elemento de página: Absoluta: situar el elemento en una ubicación exacta. Relativa: situar el elemento en una ubicación relativa con respecto a otros elementos de página en el flujo de texto. Ninguna: el elemento se sitúa como un elemento de página normal, por ejemplo, queda delimitado entre dos párrafos.
2) Especificar la manera en que el texto y otros elementos de página fluyen alrededor del elemento de página, como un elemento de página flotante. Podemos evitar el flujo cerca del elemento colocado o hacer que el elemento flote a la derecha o a la izquierda de la página. 3) Especificar el orden z, que consiste en ubicar el elemento en las capas de la página. 4) Especificar las coordenadas del elemento de página con respecto a la esquina superior izquierda del contenedor (por ejemplo, un elemento situado dentro de una página o cuadro de ubicación), y especificar las dimensiones de un cuadro de ubicación. Para establecer la ubicación de un elemento de la página: 1) Ejecutamos la orden Formato – Ubicación.
2) En el área Estilo de ubicación, especificamos cómo deseamos que se coloque el elemento de página. 3) En el área Estilo de ajuste, especificamos cómo deseamos ajustar el texto y otros elementos de página alrededor del elemento.
Página 131 de 196
4) Para especificar las coordenadas del elemento colocado, en Ubicación y tamaño, indicamos las coordenadas en la esquina superior izquierda del cuadro de ubicación, o del elemento en los cuadros Arriba e Izquierda. 5) Para especificar el orden z, que es la ubicación del elemento en las capas de las páginas, especificamos un valor en el cuadro Orden Z. Un valor positivo significa que el elemento se encuentra delante de la capa principal de flujo de texto (capa 0), y un valor negativo significa que el elemento está situado por detrás de la capa.
También es posible especificar varias propiedades mediante la barra de herramientas Ubicación. Para mostrar esta barra, ejecutamos la orden Ver – Barra de herramientas – Ubicación o la orden Ubicación del menú emergente sobre las barras de herramientas.
Girar y voltear una imagen FrontPage provee cuatro botones en la barra de herramientas Imagen para realizar estas operaciones, dos para voltear y dos para girarla. Estas operaciones pueden realizarse sobre la misma imagen tantas veces como lo deseemos. Para esto: 1) Seleccionamos la imagen.
2) Utilizamos cualquiera de los siguientes botones de la barra de herramientas Imágenes según lo necesitemos:
Página 132 de 196
Brillo y contraste Podemos aumentar o disminuir el brillo y contraste de una imagen, de la siguiente manera: 1) En la vista Página, seleccionamos la imagen. Para cambiar el brillo o contraste de la imagen de fondo, no es necesario efectuar ninguna selección. 2) Utilizamos cualquiera de los siguientes botones de la barra de herramientas Imágenes según lo necesitemos: Más contraste Menos contraste Más brillo Menos brillo
Recortar una imagen Al recortar una imagen, podemos quitar zonas que no deseamos utilizar. El recortar también permite cambiar las proporciones de la imagen, por ejemplo, podemos recortar una imagen para que sea más estrecha. Para esto: 1) En la vista Página, seleccionamos la imagen. 2) Presionamos el botón Recortar en la barra de herramientas Imágenes. 3) Aparece en la imagen de la siguiente forma:
Página 133 de 196
4) Utilizamos los tiradores para modificar el tamaño del rectángulo, dejando dentro de este solo el área que deseamos conservar. 5) Luego presionamos nuevamente el botón Recortar o la tecla Intro. De este modo el área que está fuera del rectángulo será quitada.
Otras herramientas El botón Establecer color transparente , nos permite seleccionar un color de la imagen para hacerlo transparente y entonces, siempre que aparezca dicho color, se transparentará el fondo. Las imágenes sólo pueden tener un color transparente. Si seleccionamos uno para una imagen que tenga otro especificado, el color transparente original ya no será transparente. El botón Color despliega un menú que nos permite seleccionar opciones como: escala de grises, Blanco y negro o Decolorar. La opción Automático regresa la imagen a su configuración original. El botón Dar efecto biselado de botón.
crea un bisel a la imagen dándole a esta un efecto
Página 134 de 196
El botón Nuevo muestreo cambia el tamaño de los píxeles para que se ajusten al tamaño de la pantalla actual. Por ejemplo, si cambiamos el tamaño de una imagen al 50% de su tamaño original, la imagen aparece más pequeña en la página, pero el tamaño del archivo no se modifica. Cambiar el tamaño de una imagen sólo modifica las etiquetas HTML que indican al explorador de Web cómo mostrar la imagen. Pero al volver a muestrear la imagen, el tamaño del archivo se reduce para ajustarse a un tamaño menor. El botón Restaurar imagen
vuelve a la imagen a sus propiedades originales.
Galería de fotografías Una galería de fotografías es una página Web que contiene una colección de gráficos dispuestos según un diseño específico. Microsoft FrontPage ofrece cuatro diseños diferentes para disponer los gráficos y, si estamos creando un álbum, cada página puede tener un diseño distinto. Para crear una galería debemos: Ejecutar la orden Insertar – Imagen – Nueva galería de fotografías. La ejecución de la orden mostrará el siguiente cuadro de diálogo.
Página 135 de 196
Agregar fotografías: Para agregar fotografías utilizamos el menú del botón Agregar el cual nos proporciona las órdenes:
Si seleccionamos la primer orden FrontPage mostrará el cuadro de diálogo Abrir archivo para que seleccionemos la foto que deseamos agregar. Cada foto que agregamos se muestra en la lista del cuadro de diálogo Propiedades de la galería de fotografías de la siguiente forma:
Página 136 de 196
Eliminar fotografías Para eliminar una foto de la galería bastará con seleccionarla y presionar el botón Quitar. Modificar una imagen Para modificar una imagen debemos presionar el botón Modificar. Al presionar este botón la imagen se presentará en otro cuadro de diálogo para que podamos redefinir distintos parámetro de la misma.
Página 137 de 196
Modificar el orden Para modificar el orden de las fotos debemos seleccionar la foto en la galería y utilizar los botones Subir y Bajar para modificar la posición de la misma dentro del listado. Miniaturas Al crear una galería de fotografías con un diseño, se crea automáticamente una vista en miniatura de cada gráfico. En el área Miniatura podemos definir o cambiar el tamaño de la vista en miniatura. Títulos y descripciones Debajo de cada gráfico de una galería, hay un espacio para un título y una descripción. Podemos seleccionar el estilo de la fuente, el color y el tamaño del título. Podemos cambiar el título y la descripción en el momento de creación de la galería. Diseño de la galería Para elegir el diseño de nuestra galería debemos seleccionar la ficha Diseño, la cual presentará una serie de estilos dentro de los cuales podremos escoger.
La página con una galería se mostrará de la siguiente forma (dependerá del estilo seleccionado)
Página 138 de 196
Para modificar una galería debe hacer un doble clic sobre la misma en la vista Diseño.
Formato de archivos gráficos La mayoría de los actuales exploradores pueden solamente desplegar dos formatos de archivos de imagen: GIF (Graphic Interchange Format) JPEG (Joint Photographic Expert Group) Algunos pocos exploradores soportan PNG (Portable Network Graphics) Podemos agregar imágenes con los siguientes formatos de archivo: GIF (estándar y animado), JPEG (estándar y progresivo), BMP (Windows y OS/2), TIFF, TGA, RAS, EPS, PCX, PNG, PCD (Photo CD de Kodak) y WMF. Los formatos que normalmente se utilizan para las páginas Web son GIF, JPEG y PNG. Las imágenes en formato GIF pueden contener hasta 256 colores. Un aspecto útil de las imágenes GIF es que se puede seleccionar un color que sea transparente. El formato JPEG se utiliza por lo general para imágenes de calidad fotográfica con miles o millones de colores. Estas resultan útiles porque se puede controlar la compresión del archivo cambiando la calidad de la imagen. Cuanto más baja sea la
Página 139 de 196
calidad, más alta será la compresión del archivo y, como resultado, disminuirá el tamaño del mismo. El formato PNG es una alternativa al formato GIF que admite transparencia para imágenes con miles o millones de colores. Sin embargo, algunos exploradores de Web no pueden mostrar imágenes PNG sin un complemento especial. Cuando agrega una imagen que no sea GIF, JPEG o PNG a una página y cuando la guarda, FrontPage convierte la imagen a un formato GIF si tiene 8 bits de color o menos, o a un formato JPEG si tiene más de 8 bits de color.
Página 140 de 196
HIPERVÍNCULOS Hipervínculos Administrar hipervínculos Marcadores Crear un hipervínculo a un Marcador Mapa de imagen
Página 141 de 196
Hipervínculos Los hipervínculos son la esencia del Web. Todo el tiempo hacemos clic en una línea de texto, imagen u otro objeto y saltamos a otra página, estamos usando hipervínculos. Un hipervínculo es una conexión de una página a otro destino como, por ejemplo, otra página o una ubicación diferente en la misma página. El destino es con frecuencia otra página Web, pero también puede ser una imagen, una dirección de correo electrónico, un archivo, etc. El identificativo de un hipervínculo puede ser texto o una imagen.
Cuando un visitante hace clic éste, el destino se muestra en un explorador de Web, se abre o se ejecuta, en función del tipo de destino. Existen distintos mecanismos para crearlos: Hipervínculos, Marcadores y Hotspots. Forma en que se muestran Los hipervínculos se pueden indicar de varias formas. Los exploradores de Web por lo general subrayan los hipervínculos de texto y los muestran con un color diferente. También podemos establecer efectos para que los hipervínculos cambien de apariencia cuando el visitante coloca el puntero del Mouse (ratón) encima, como por ejemplo cambiar la fuente del hipervínculo. Los hipervínculos de una imagen no siempre son visibles, pero el visitante puede saber que una imagen tiene un hipervínculo colocando el puntero del Mouse encima – éste cambia de apariencia, por lo general, a una mano que señala. Crear un hipervínculo 1) En la vista Diseño, seleccionamos el texto u objeto que vamos a utilizar como hipervínculo. Por ejemplo, seleccionamos "Nuestra escuela" para vincular a una página que contiene los datos de la escuela a la que pertenece el club.
Página 142 de 196
2) Ejecutamos
la
orden
Insertar
–
Hipervínculo
o
presionamos
el
botón
Hipervínculo de la barra de herramientas. La ejecución de la orden mostrará el siguiente cuadro de diálogo:
Si hemos seleccionado un texto como identificativo del hipervínculo este se mostrará en el cuadro Texto. Si no hemos seleccionado nada podemos escribir aquí el identificativo. Si la selección es un objeto este aparecerá deshabilitado. El botón Info. De pantalla muestra un cuadro de diálogo donde podemos ingresar un texto informativo que se mostrará al posicionar el puntero sobre el identificativo.
3) Elegimos el destino del hipervínculo. Según el destino que necesitemos para nuestro hipervínculo usamos:
El navegador para buscar páginas en algún sitio de Internet. Al oprimir el botón
nos abrirá el explorador Web. El explorador de Windows para buscar archivos en el equipo local. Al oprimir el
botón se abre esta aplicación. El botón de correo sirve para crear un hipervínculo a una dirección de correo, de tal manera que al ejecutar el hipervínculo nos abrirá el programa de correo por omisión, con la ventana Nuevo mensaje abierta y la dirección de destino en el campo Para: Al presionar el botón nos aparecerá el siguiente cuadro de diálogo para que ingresemos la dirección.
Página 143 de 196
El botón nueva página nos permitirá crear un hipervínculo a una página que aún no existe. Al presionar el botón nos proporcionará el cuadro de diálogo que habitualmente nos muestra la orden Archivo – Nuevo – Página.
Una vez creado el hipervínculo, estando en la vista Página, para probarlo podemos: Acceder a la ficha Vista previa y ejecutarlo como normalmente lo haríamos en el explorador Web. En la ficha Normal, presionar la tecla Ctrl + Clic sobre el indicador del hipervínculo.
Administrar hipervínculos Cambiar de nombre y mover archivos de nuestro sitio Web Siempre que cambiamos el nombre de un archivo de nuestro Web, FrontPage comprueba si hay hipervínculos al archivo. Si es así, actualiza los hipervínculos con el nuevo nombre de archivo. Siempre que movemos un archivo (por ejemplo, a una subcarpeta), FrontPage actualiza los hipervínculos a ese archivo con su nueva ubicación. Cuando realizamos una de las acciones antes mencionadas se mostrará un cuadro de mensaje similar al siguiente:
Página 144 de 196
Probar y reparar los hipervínculos rotos Antes de publicar un sitio Web, siempre debemos comprobar si hay hipervínculos rotos y probar los hipervínculos a destinos externos. Un hipervínculo roto es aquel que tiene una dirección URL de destino no válida; al hacer clic en el hipervínculo, el explorador de Web muestra un error al visitante. La causa puede ser tan simple como una dirección URL con errores de mecanografía o una que señala una página eliminada en el Web. Si el destino es otra página del World Wide Web, puede que la página haya sido movida o eliminada. Para administrar los hipervínculos de un Web, podemos hacer que FrontPage pruebe los hipervínculos y notifique su estado. Después, podemos reparar o actualizar con rapidez los hipervínculos rotos. Antes de comprobar los hipervínculos, debemos guardar todas las páginas abiertas. En la vista Informes, presionamos el botón Comprobar hipervínculos en la barra de herramientas Informes. Esta orden nos mostrará el siguiente cuadro de diálogo:
1. Indicamos la opción Comprobar todos los hipervínculos y oprimimos el botón Iniciar. 2. Se mostrará el estado de todos los hipervínculos del Web actual.
Para reparar hipervínculos rotos: 1. En la vista Informes visualizamos los hipervínculos rotos. Se mostrarán todos los hipervínculos rotos del Web. Si el destino de un hipervínculo no es el Web actual, el estado del hipervínculo es Desconocido. 2. Hacemos doble clic en un hipervínculo con estado Roto.
Página 145 de 196
3. Para mostrar la página para modificarlo, presionamos el botón Modificar página. Si conocemos la dirección URL de destino correcta, la modificamos en el cuadro Reemplazar hipervínculo con. O bien, presionamos el botón Examinar para explorar la página o archivo en un Web, sistema de archivos o World Wide Web. Para reparar otras repeticiones de este hipervínculo en todas las páginas del Web actual, seleccionamos la opción Cambiar en todas las páginas, o Cambiar en las páginas seleccionadas y después seleccionamos las páginas en el cuadro que aparece debajo. 4. Presionamos el botón Reemplazar.
Marcadores Un marcador es una ubicación o conjunto de caracteres que se ha marcado en una página. Podemos utilizar un marcador como destino de un hipervínculo. Por ejemplo, podemos proporcionar a los visitantes un vínculo a un párrafo de otra página. Si creamos simplemente un hipervínculo a la página en cuestión, se mostrará el comienzo de la página en el explorador de Web y luego el visitante deberá buscar el párrafo correspondiente. En su lugar, agregamos un marcador al comienzo del párrafo y proporcionamos un hipervínculo al marcador. La página se mostrará con el párrafo correspondiente en la parte superior de la ventana del explorador de Web. También podemos utilizar un marcador para encontrar con rapidez una ubicación en una página mientras la modificamos. Por ejemplo, hemos agregado un marcador a cada encabezado de sección en una página larga; cuando modifiquemos la página, podremos encontrar con rapidez una sección específica utilizando el marcador.
Página 146 de 196
Crear un marcador 1. En la vista Página, colocamos el punto de inserción donde deseamos crear un marcador o seleccionamos el texto al que deseamos asignar el mismo. 2. Ejecutamos la orden Insertar – Marcador.
3. En el cuadro Nombre de marcador, escribimos el nombre (podemos usar espacios en blanco).
Para desplazarnos a uno de los marcadores dentro de la página, accedemos al cuadro de diálogo Marcador, seleccionamos el marcador deseado, y oprimimos el botón Ir a... Para eliminar uno de los marcadores dentro de la página, accedemos al cuadro de diálogo Marcador, nos desplazamos al marcador deseado, y oprimimos el botón Borrar.
Página 147 de 196
Crear un hipervínculo a un Marcador Para crearlo realizamos lo siguiente: 1. En la vista Página, escribimos el texto que deseamos utilizar como hipervínculo y lo seleccionamos. O bien, para utilizar el nombre de un marcador como texto del hipervínculo, colocamos el punto de inserción donde deseamos insertar el hipervínculo. 2. Accedemos al cuadro de diálogo Crear hipervínculo. 3. Seleccionamos la página que contiene el marcador. 4. En la lista desplegable Marcador, elegimos el marcador que deseamos utilizar como destino.
Un hipervínculo a un marcador, también llamado delimitador, se indica mediante el signo (#), que precede al marcador en la dirección URL de destino. Por ejemplo: laescuela.htm#ubicación (donde laescuela.htm es la dirección URL y ubicación es el nombre del marcador)
Página 148 de 196
Mapa de imagen Podemos crear un mapa de imagen, que es un gráfico con una o más zonas activas (regiones de hipervínculos). Para que todo el gráfico sea una zona activa, establecemos un hipervínculo predeterminado. Agregar una zona activa a un gráfico Podemos agregar zonas activas a gráficos como imágenes y GIF animados. Una zona activa es una región invisible en un gráfico a la que se le ha asignado un hipervínculo. Cuando el visitante hace clic en la región, el destino del hipervínculo aparece en el explorador de Web. En Microsoft FrontPage, a las zonas activas se les puede dar forma rectangular, circular o poligonal. Un gráfico con una o más zonas activas se denomina mapa de imágenes. El mapa de imágenes proporciona por lo general, claves acerca de dónde se debe hacer clic. Por ejemplo, el sitio Web de un fabricante de coches puede utilizar un mapa de imágenes de sus nuevos coches: cuando el visitante hace clic en un coche, aparece una página con una descripción detallada del mismo. Para crear una zona activa: 1) En la vista Página, seleccionamos la imagen. 2) En la barra de herramientas Imágenes, presionamos el botón Zona activa correspondiente a la forma que deseamos:
Zona activa rectangular
Zona activa circular
Zona activa poligonal
3) En el gráfico, dibujamos un rectángulo, círculo o polígono, en función de la forma seleccionada. Para dibujar un polígono, hacemos clic donde deseamos que esté cada esquina del mismo y doble clic para terminarlo. 4) Al soltar el botón del Mouse (ratón), se abre el cuadro de diálogo Crear hipervínculo. 5) Seguimos los pasos para la creación del hipervínculo.
Ejemplo: Para que se comprenda mejor la idea de zona activa y mapa de imágenes tomemos un ejemplo. Suponga que está realizando una página sobre América del Sur. En la página incluye el mapa con la división política en la parte superior, y en la misma página debajo una breve descripción de cada país. Será muy apropiado para el
Página 149 de 196
visitante que al hacer clic en una zona del mapa lo lleve directamente a la información correspondiente. De este modo cada país sería una zona activa y la totalidad de la imagen un mapa de imagen. Tomaremos el mapa siguiente como ejemplo.
Si creáramos una zona activa para cada país al hacer clic sobre los distintos países accederíamos a diferentes destinos.
Página 150 de 196
Agregar una zona activa de texto a un gráfico Podemos agregar zonas activas de texto a gráficos como imágenes, GIF animados y videos. Una zona activa de texto es una cadena de texto que se ha colocado en un gráfico y a la que se le ha asignado un hipervínculo. Cuando el visitante hace clic en el texto, el destino del hipervínculo aparece en el explorador de Web. Para crear una zona activa: 1) En la vista Página, seleccionamos la imagen. 2) Agregamos texto a la imagen. 3) Para establecer el hipervínculo del texto, hacemos doble clic en un borde del cuadro de texto. Aparecerá el cuadro de diálogo Crear hipervínculo. 4) Seguimos los pasos para la creación de dicho hipervínculo. Siguiendo con el ejemplo de los países, en lugar de haber trazado zonas activas dibujando el contorno de cada país, podríamos haber creado una zona activa de texto con el nombre del mismo, de modo que al hacer clic en el nombre del país nos llevara a la información correspondiente. Resaltar las zonas activas de un gráfico Podemos resaltar las zonas activas de un gráfico, por ejemplo, si nos resulta difícil ver los contornos de las zonas activas que se superponen en el mismo. Para esto: 1) En la vista Página, seleccionamos el gráfico. 2) En la barra de herramientas Imágenes, presionamos el botón Resaltar zonas activas. Cuando las zonas activas están resaltadas solo se ven esta y no la imagen sobre las que fueron trazadas. 3) Oprimimos este botón nuevamente para mostrar el gráfico sin resaltar las zonas. En el ejemplo anterior:
Página 151 de 196
MARCOS Y BORDES COMPARTIDOS Concepto de Página de Marcos Crear una página de marcos Guardar la Página de marcos Operaciones con marcos Propiedades de los marcos Marcos flotantes Bordes compartidos Estructura de exploración Barra de exploración Titular de página
Página 152 de 196
Concepto de Página de Marcos Una página de marcos es un tipo especial de página HTML que divide la ventana del explorador en varias zonas denominadas marcos; cada marco puede mostrar una página diferente. No incluyen ningún contenido visible, son sólo contenedores que especifican qué páginas adicionales se mostrarán y cómo lo harán. Cuando se hace clic en el hipervínculo de una página que se muestra en un marco, la página a la que señala dicho hipervínculo suele mostrarse en otro marco, llamado marco de destino.
Crear una página de marcos Podemos crear una página de marcos mediante una de las plantillas de Página de marcos de FrontPage. En cada una de estas plantillas, la exploración entre marcos ya está configurada. En la plantilla de página de marcos Titular y contenidos, por ejemplo, al hacer clic en un hipervínculo del marco Contenidos, a la izquierda, aparece una página en el marco principal, a la derecha. Para crearla, solicitamos el cuadro de diálogo Nuevo, elegimos la ficha Página de marcos, y seleccionamos la plantilla deseada, como se muestra a continuación:
Una vez que hemos creado la página de marcos a partir de una plantilla, lo único que debemos hacer es definir la página inicial que deseamos mostrar en cada marco. Es posible seleccionar una página existente o crear una nueva página. A continuación, la página se puede modificar directamente en su marco. Un borde resaltado indica que marco hemos seleccionado o si hemos seleccionado la página de marcos.
Página 153 de 196
Ejemplo: Vamos a realizar una página de marco utilizando la plantilla que se muestra en la imagen superior. Es conveniente que previamente diseñemos las páginas que se mostrarán en cada marco. En este caso utilizaremos 4 páginas:
Una para parte superior a la que hemos llamado encabezado.htm Una para la parte izquierda que hemos llamado lateral.htm. Una para la parte central que hemos llamado presentacion.htm Una para la parte inferior que hemos llamado pie.htm
Ahora solo debemos presionar el botón Establecer página inicial de cada marco y seleccionar la página correspondiente. Luego de realizar estas acciones la página se visualiza de forma similar a la siguiente:
Página 154 de 196
Guardar la Página de marcos Debemos tener en cuenta que si creamos una página de marcos con cuatro marcos como en el ejemplo anterior estamos involucrando en realidad 5 páginas, una por cada marco y la página de marcos en si misma. Cuando se guarda esta página de marcos, se guardarán uno a uno los marcos (en el caso de que las páginas que muestran hubieran sido diseñadas en el propio marco y no tomando páginas ya creadas como lo hicimos en el ejemplo anterior). El cuadro de diálogo Guardar como, muestra una miniatura de la distribución de la página de marcos. Un cuadro azul oscuro indica la página actual que se guardará en el marco resaltado.
Luego de haber guardado todos los marcos se guarda la página de marcos propiamente dicha:
Página 155 de 196
Operaciones con marcos Dividir marco Para dividir un marco: 1. Activamos el marco a dividir. 2. Ejecutamos la orden Marcos – Dividir marco.
La opción Dividir en columnas, divide el marco seleccionado en columnas. La vista previa muestra un ejemplo de cómo se dividirá. Cuando dividimos un marco que contiene una página, ésta queda en una columna y la otra queda vacía.
La opción Dividir en filas, divide el marco seleccionado en filas. La vista previa muestra un ejemplo de cómo se dividirá. Cuando dividimos un marco que contiene una página, ésta queda en una fila y la otra queda vacía.
Otra forma de dividir un marco es arrastrar uno de los bordes de los marcos existentes, presionando la tecla Ctrl.
Eliminar marco La orden Marcos – Eliminar marco, quita el marco seleccionado. No se elimina la página mostrada en el marco, simplemente se cierra, preguntando si deseamos guardar los cambios realizados (si corresponde). FrontPage ajusta los marcos restantes para ocupar el espacio dejado por el marco eliminado.
Página 156 de 196
Propiedades de los marcos La orden Marcos – Propiedades de marco muestra el cuadro de diálogo Propiedades de marco para el marco seleccionado en la página de marcos actual. Este cuadro de diálogo nos permite especificar propiedades para el mismo, como: el nombre, el tamaño, los márgenes y la página inicial que se muestra.
Nombre: ingresamos el nombre con el que identificaremos al marco. Página inicial: especificamos la dirección URL de la página inicial que deseamos mostrar en el marco cuando la página de marcos se muestra por primera vez en un explorador de Web. Si no hemos establecido ninguna página inicial o deseamos especificar una diferente, escribimos la dirección URL de esa página o utilizamos el botón Examinar para buscarla.
Área Tamaño del marco Ancho: especificamos el ancho del marco. Si cambiamos el ancho de columna del marco actual, cambiará también el ancho de todos los marcos de la columna. Alto de fila: especificamos el alto del marco. Si cambiamos el alto de fila del marco actual, cambiará también el alto de todos los marcos de la fila. Las medidas de Ancho y Alto de fila, podrán ser especificadas en relación con el tamaño de los otros marcos de la misma columna, como porcentaje del tamaño de la ventana cuando la página de marcos se muestra en un explorador de Web o como un número fijo de píxeles.
También se puede modificar el tamaño del marco arrastrando lo bordes del mismo.
Página 157 de 196
Área Márgenes Ancho: especificamos el ancho, en píxeles, de la sangría que debe aplicarse al contenido del marco desde los bordes de marco izquierdo y derecho. Alto: especificamos el alto, en píxeles, de la sangría que debe aplicarse al contenido del marco desde los bordes de marco superior e inferior. Área Opciones Activamos la casilla de verificación De tamaño ajustable en el explorador para que los visitantes cambien el tamaño del marco actual cuando exploran la página de marcos. Si la desactivamos, el marco sólo se mostrará en el tamaño especificado en Tamaño del marco; los visitantes no podrán cambiar el tamaño del marco en un explorador de Web. Mostrar barras de desplazamiento: Si una página es demasiado grande para mostrarse en el marco actual cuando un visitante la ve en un explorador de Web, podemos especificar si deseamos que se muestren las barras de desplazamiento para que permitan al visitante desplazarse por la página mostrada en el marco. En este punto encontraremos tres opciones: Nunca: Las barra de desplazamiento no se mostrarán aún cuando el contenido del marco no quepa en la ventana. Si es necesario: Se mostrará solo si el contenido del marco no cabe en la ventana. Siempre: Se mostrarán siempre independientemente de la extensión del contenido.
Marcos invisibles Podemos diseñar la página con marcos de tal manera que parezca que la página no tiene marcos. Para esto solicitamos el cuadro de diálogo Propiedades del Marco y en este presionamos el botón Propiedades de página. En el cuadro de diálogo mostrado establecemos valor 0 en Espaciado del marco y deshabilitamos la casilla de verificación Mostrar bordes.
Página 158 de 196
Luego de esto la página se mostrará de la siguiente forma:
Marcos flotantes Los marcos flotantes son similares a las páginas de marcos, con la diferencia de que se incrustan con su contenido en una página Web existente. Podemos agregar a un marco flotante todo lo que incluya en una página normal. Podemos personalizar los marcos flotantes de la misma manera que los marcos normales, así como activar barras de desplazamiento. Una de las ventajas de utilizar estos marcos es que no tenemos que crear una página de marcos independiente para incrustar contenido. Esta opción puede ser muy útil por ejemplo: Para insertar un contrato que deben rellenar los visitantes del sitio. Para proporcionar ejemplos del aspecto de otras páginas Web. Como contenedor de un formulario. Como un cuadro de desplazamiento con productos y precios.
Agregar un Marco flotante a la página que estamos editando 1) Posicionamos el cursor en el lugar donde deseamos agregar el marco. 2) Ejecutamos la orden Insertar – Marco flotante. Este se mostrará en la página como en la siguiente imagen.
Página 159 de 196
3) Luego de insertado se indica la página de inicio o se diseña ahí mismo su contenido.
Propiedades del marco flotante 1) Seleccionamos el marco haciendo clic sobre él. 2) Ejecutamos la orden Formato – Propiedades o la orden Propiedades del Marco flotante del menú emergente sobre él. 3) En el cuadro de diálogo Propiedades de marco flotante, establecemos uno o más de los valores siguientes (si los valores predeterminados no son los adecuados):
Nombre: Asignamos el nombre al marco flotante. Página inicial: Nos permite establecer o cambiar página inicial del marco flotante. Título: Indicamos el título del marco flotante.
Página 160 de 196
Tamaño del marco: Podemos modificar aquí el ancho o la longitud del marco en píxeles o en porcentajes, esta operación puede también realizarse en forma manual arrastrando los bordes del marco. Márgenes: Indicamos los márgenes del marco en píxeles. Alineación: Establecemos la posición del marco flotante en la página. Barras de desplazamiento: Indicamos las preferencias para mostrar las barras de desplazamiento. Texto alternativo: Podemos modificar el texto que deseamos que muestren los exploradores que no admiten marcos. Mostrar borde: Activamos esta casilla de verificación si deseamos dibujar un borde en torno al marco flotante.
Bordes compartidos Un borde compartido es una zona común a una o más páginas de un Web. Dentro de un borde compartido, podemos incluir los elementos que deseamos que aparezcan en todas las páginas o en aquellas para los cuales los hayamos definido. Por ejemplo podemos utilizar un borde compartido para incluir el encabezado de todas las páginas, una barra de exploración, etc. Los bordes compartidos que se utilizarán en un Web pueden configurarse de forma predeterminada. Por ejemplo, si hemos configurado el borde superior de forma predeterminada para un Web pero no deseamos incluir este borde en una página concreta, podemos desactivar el borde superior compartido sólo para esa página. O bien, establecer que se utilice un borde compartido en ciertas páginas de un Web, incluso aunque el Web no tenga ningún borde compartido predeterminado. Para crear un borde compartido, en la vista Página, ejecutamos la orden Formato – Bordes compartidos.
Página 161 de 196
Si la opción Bordes compartidos aparece deshabilitada, ejecute la orden Herramientas – Opciones de página y en la ficha Creación habilite la casilla de verificación Bordes compartidos. En el cuadro de diálogo suministrado por la orden, especificamos los bordes que deseamos. Seleccionamos si se aplicarán sólo a la Página actual o a Todas las páginas del sitio Web. Los bordes nuevos muestran marcadores de posición como, por ejemplo, un comentario, un titular de página o una barra de exploración, como se muestra a continuación:
Estructura de exploración La estructura de exploración muestra como se relacionan entre sí las páginas del sitio Web y proporciona a FrontPage el modo de configurar las barras de exploración. Podemos crear una estructura de exploración para el Web actual organizando las páginas en la vista Exploración. Por ejemplo, la estructura de exploración le dice a FrontPage qué páginas son páginas de nivel superior; FrontPage usa esta información para determinar los hipervínculos que coloca en una barra de exploración, y el título de la página determina las etiquetas de los hipervínculos.
Página 162 de 196
El ejemplo siguiente muestra la estructura de un Web:
Relaciones entre las páginas La página principal es la primera página que se agrega a la estructura de exploración, que normalmente se denomina Default.htm o Index.htm, y se indica mediante . Las páginas de nivel superior están al mismo nivel que la página principal, pero sin incluirla. En este ejemplo, la página de nivel superior es Acerca de. Las páginas de nivel primario. En este ejemplo, las páginas de nivel primario para Nuestra escuela son Index (la página primaria) y Acerca de. De igual modo, las páginas de nivel primario para Historia son Nuestra escuela, Proyecto, Investigaciones, Enlaces y Agradecimientos. Las páginas de nivel secundario son páginas directamente por debajo de otra página. En este ejemplo, Nuestra escuela tiene tres páginas de nivel secundario (Historia, Ubicación y Galería de fotos). Las páginas del mismo nivel son páginas que se encuentran al mismo nivel en la estructura y tienen la misma página principal. En este ejemplo, Nuestra escuela, Proyecto, Investigaciones, Enlaces y Agradecimientos son páginas del mismo nivel.
Agregar una página a la estructura de exploración
Página 163 de 196
Para agregar una página a la estructura de exploración simplemente seleccionamos la página en la lista de carpetas y la arrastramos hasta el nivel en que deseamos colocarla en la estructura.
Quitar una página de la estructura Para eliminar una página de la estructura de exploración, la seleccionamos de esta, y ejecutamos cualquiera de las siguientes órdenes: Edición – Eliminar. Eliminar del menú emergente sobre la página seleccionada. Tecla Supr. La ejecución de cualquiera de las órdenes antes mencionadas nos proporciona el siguiente cuadro de diálogo:
Las páginas en la Estructura de exploración muestran su Título y no su nombre de archivo. Para cambiar la etiqueta (Título) de la página en esta vista, ejecutamos la orden Cambiar nombre del menú emergente sobre la misma. Si deseamos mover una página de la estructura de exploración, la seleccionamos y arrastramos a otra posición.
Página 164 de 196
Para agregar una nueva página bajo una página existente: 1) 2)
Seleccionamos la página de la cual dependerá la nueva. Ejecutamos cualquiera de las siguientes órdenes: Archivo –Nuevo -
Página
Botón Nueva página de la barra de herramientas Estándar. Nueva página del menú emergente sobre la página seleccionada. Para agregar una página externa (una página que no se encuentra en el Web actual), ejecutamos la orden Agregar página existente del menú emergente sobre la página bajo la cual quedará ubicada y, a continuación, especificamos el destino en el cuadro Dirección URL.
Barra de exploración Una barra de exploración es un conjunto de hipervínculos utilizados para explorar un sitio Web. Por ejemplo, una barra de exploración típica tendrá hipervínculos a la página principal del Web y a sus páginas más importantes. Podemos mostrar una barra de exploración en todas las páginas de nuestro Web para que los visitantes del sitio puedan siempre llegar rápida y fácilmente a las páginas más importantes. Estas barras pueden utilizar botones o hipervínculos. Tengamos en cuenta, que si creamos botones, debemos crear hipervínculos de texto también, contemplando aquellos visitantes que configuran sus exploradores Web, para navegar sin mostrar las imágenes, con la finalidad de agilizar la navegación. Estos visitantes no verán los botones, sino sólo texto. Podemos establecer la estructura de exploración del Web y dejar que FrontPage cree las barras de exploración automáticamente. FrontPage mantiene las barras de exploración que crea; si movemos o agregamos una página, FrontPage actualiza (vuelve a calcular los hipervínculos de...) la barra de exploración para reflejar los cambios. No es posible generar barras de exploración automáticamente cuando trabajamos con páginas independientes, las genera sólo al trabajar con un sitio Web.
Página 165 de 196
Agregar barra de exploración Para agregar una barra a partir de la estructura de exploración: 1) Abrimos la página en la cual deseamos agregarla y posicionamos el cursor en el lugar donde deseamos insertar la barra. 2) Ejecutamos la orden Insertar –Exploración. La ejecución de la orden inicia el Asistente Insertar Componente Web, con la categoría Barra de vínculos seleccionada.
En este asistente comenzaremos eligiendo que tipo de barra deseamos generar. A continuación se describe las características de cada opción. Barra con vínculos personalizados Luego de seleccionar esta opción debemos presionar el botón Siguiente. El primer cuadro de diálogo que nos proporciona FrontPage al seleccionar el control es en el cual deberemos elegir el tema del cual tomaremos los botones para la barra.
Página 166 de 196
Al presionar el botón Siguiente pasaremos al próximo paso del asistente que nos permite seleccionar la orientación de la misma:
Luego de presionar el botón Finalizar deberemos suministrar un nombre para nuestra barra.
Una vez que colocamos el nombre estaremos en condiciones de especificar el contenido de la misma:
Página 167 de 196
En este cuadro de diálogo: El botón Agregar vínculo abre un cuadro de diálogo donde especificamos la página a la cual se generará el vínculo. En el cuadro Texto ingresamos el texto que identificará al botón. Deberemos repetir la operación tantas veces como vínculos deseamos agregar a la barra. El botón Quitar vínculo elimina el vínculo seleccionado en la lista. El botón Modificar vínculo permite modificar el vínculo seleccionado en la lista. Utilizamos los botones Subir y Bajar para modificar el orden de los botones de la barra. La barra se mostrará de la siguiente forma (vista Normal):
Para agregar un nuevo botón hacemos clic en agregar vínculo.
Página 168 de 196
Si deseamos modificar las propiedades de la barra realizamos un doble clic en cualquier lugar de la misma, esta acción abrirá el cuadro de diálogo Propiedades de la barra de vínculos el cual es el mismo que utilizamos para crearla. Este cuadro de diálogo nos permitirá modificar cualquier barra personalizada que tengamos en nuestro sitio así como crear desde él otra nueva barra de vínculos. Barra con vínculos Anterior y Siguiente: Al agregar una página a una barra con vínculos anterior y siguiente, Microsoft FrontPage determina el orden en que se vincularán las páginas (con los botones anterior y siguiente) a partir del orden de las páginas en la estructura de carpetas. Para la realización de esta barra deberemos proceder de la misma forma que para crear o modificar una barra. La barra solamente mostrará los botones Anterior y Siguiente que nos permitirá desplazarnos por las páginas vinculadas en la barra.
Barra de vínculos basada en la estructura de exploración Cuando agregamos una barra de exploración de este tipo a una página, FrontPage genera los hipervínculos de exploración a partir de la estructura de exploración que hemos configurado en la vista Exploración. Los pasos a seguir luego de elegir la esta opción son muy similares a las anteriores, (elegir un tema para la barra y luego la orientación). Luego de esto se mostrará un cuadro de diálogo donde debemos:
Elegir los hipervínculos que se van a mostrar en la barra de exploración: Hipervínculos de las páginas por encima de la página actual (nivel primario). Hipervínculos de las páginas del mismo nivel que la página actual. Hipervínculos Atrás y Adelante para explorar una secuencia de páginas del mismo nivel. Hipervínculos de las páginas del nivel superior de su Web. Hipervínculos de las páginas por debajo de la página actual (nivel secundario). Hipervínculos de las páginas secundarias de la página principal.
Página 169 de 196
Adicionalmente podemos agregar un hipervínculo a la Página principal del Web o de la página principal de una página:
Otro tipo de barra de exploración Podemos crear manualmente nuestra propia barra de exploración utilizando otro tipo de recursos como por ejemplo: Hipervínculos de texto. Para esto será conveniente crear una tabla con los nombre de los links y establecer luego los hipervínculos correspondientes para generar la barra de exploración. Ejemplo Barra de exploración creada con hipervínculos de texto en la vista Diseño.
La misma barra vista en el Explorador Web.
Página 170 de 196
Botones interactivos. Podemos utilizar este tipo de botones que son muy atractivos para crear una barra de exploración. Desde el punto de vista visual parecen haber sido creados con una avanzada herramienta de edición gráfica y se tiene un buen control sobre su aspecto. Después de agregar un botón, lo podremos vincular a otra página del sitio Web actual, a otro sitio de Internet o a una dirección de correo electrónico. Cuando se agrega un botón interactivo, FrontPage crea los archivos de imagen que lo componen. Cuando se guardan las páginas Web, FrontPage solicita si se deben guardar también los archivos de imagen del botón. Para insertar un botón interactivo: 1) Posicionamos el cursor en el lugar donde será insertado. (es recomendable crear una estructura de tabla para tal fin). 2) Ejecutamos la orden Insertar – Botón interactivo. El cuadro de diálogo que se muestra nos permitirá configurar el aspecto y propiedades del mismo. Para ello cuenta con 3 fichas.
Ficha Botón Seleccionamos el diseño del botón. En el cuadro Texto escribimos el texto que mostrará. En el cuadro Vínculo ingresamos el destino del hipervínculo. Si no conocemos exactamente el nombre y ubicación del mismo utilizamos el botón Examinar para localizarlo.
Página 171 de 196
Ficha Fuente Seleccionamos el tipo de tamaño y color de la Fuente. Podemos configurar distintos colores de fuente para los diferentes estados del botón. Podremos también modificar la alineación del texto con respecto a la imagen del botón. La vista previa nos modificaciones realizadas.
irá
mostrando
las
Ficha imagen Indicamos el alto y ancho del botón en píxeles. Si deseamos que el fondo coincida con el de la página que tiene un fondo sólido, hacemos clic en Convertir el botón en imagen JPEG y usar este color de fondo, e indicamos el color a utilizar. Para hacer coincidir el fondo del botón con una página Web cuyo fondo sea variado, seleccionamos la opción en Convertir el botón en imagen GIF y usar fondo transparente.
Ejemplo de una Barra de exploración realizada con Botones interactivos.
Agregar una barra de exploración dentro de un borde compartido Podemos utilizar barras de exploración dentro de los bordes compartidos, esta barra de exploración dependerá de cada página. Una barra de exploración dentro de un borde compartido tiene la misma configuración para todas las páginas que utilizan el mismo.
Página 172 de 196
Para agregar una barra de exploración en un borde compartido podemos utilizar cualquiera de las siguientes opciones: Posicionarnos en el borde compartido en el que deseamos incluir la barra y ejecutar la orden Insertar –Exploración. Si deseamos incluir la barra en el borde superior o izquierdo podemos hacerlo desde el cuadro de diálogo Bordes compartidos activando la casilla de verificación Incluir botones de exploración. Al crear una barra de exploración dentro de un borde compartido debemos tener en cuenta que tiene la misma configuración para todas las páginas que utilizan el borde compartido, por lo que debemos ser cuidadosos al configurar la exploración. Es posible que una barra de exploración pueda parecer útil al verla desde una página, pero puede que no nos guste la selección de hipervínculos cuando veamos la barra de exploración desde una página diferente.
Titular de página Los titulares de página permiten agregar rápidamente títulos a las páginas. Utilizan los estilos y gráficos de un tema, si es que hay alguno configurado en la página actual; de lo contrario, el titular de página sólo muestra texto, al que podemos dar formato. Para agregar rápidamente títulos a varias páginas de un sitio Web, podemos colocarlo dentro de un borde compartido. Para poder utilizar titulares de página, es necesario establecer la estructura de exploración del sitio Web en la vista Exploración. (El titular de página no será visible en la página a menos que ésta esté incluida en la estructura de exploración). Los titulares de página utilizan los títulos de página de la vista Exploración; si cambiamos el título de una página, el nombre del titular también cambiará.
Para colocar un titular de página: 1) En la vista Diseño, situamos el punto de inserción en el lugar donde deseamos agregar el titular de página; por ejemplo, en un borde superior compartido. 2) Ejecutamos la orden Insertar – Titular de página.
Página 173 de 196
3) Especificamos si deseamos mostrar el titular de página como una imagen (tomará el estilo del titular del tema, si hay uno configurado) o como texto (dándole formato desde el cuadro de diálogo Fuente). 4) En el cuadro Texto de titular de página, escribimos el texto que deseamos mostrar. De manera predeterminada, un titular de página muestra el título de página tal como aparece en la vista Exploración. Si cambiamos el texto del titular, estamos variando también el título de la página en la vista Exploración. Ejemplo de un titular de página de Imagen.
Página 174 de 196
COMPONENTES WEB Introducción Insertar Componentes Web Efectos dinámicos Hojas de cálculo y gráficos Contador de visitas Galería de fotografías Contenido incluido Barra de vínculos Tablas de contenido Controles avanzados
Página 175 de 196
Introducción Un componente Web, denominado en ocasiones WebBot, es un objeto dinámico de una página Web que se evalúa y ejecuta cuando se guarda o, a veces, cuando se abre una página en un explorador Web. El componente Fecha y hora y el componente Tabla de contenido Para este sitio Web son ejemplos de componentes Web de FrontPage. Gracias a los componentes Web de Microsoft FrontPage, se puede agregar un amplio abanico de funciones a los sitios Web, desde contadores que registran el número de visitantes a una página hasta galerías de fotografías que muestran colecciones de gráficos. Se puede elegir entre dos tipos de componentes Web: los de creación y los de exploración. Los componentes Web de creación son herramientas disponibles en FrontPage que facilitan la creación y el diseño de páginas Web. Si deseamos agregar un componente de creación al sitio, como una galería de fotografías o una barra de vínculos, no necesitamos instalar software específico ni una tecnología de servidor determinada en el servidor Web que alberga el sitio. Los componentes Web de exploración están disponibles en los sitios Web ubicados en servidores Web que ejecuten las Extensiones de servidor de Microsoft FrontPage, Microsoft SharePoint Team Services o Microsoft Windows SharePoint Services.
Insertar Componentes Web Los componentes son insertados a través del cuadro de diálogo Insertar componente Web suministrado por la orden Insertar – Componente Web.
Página 176 de 196
En el panel izquierdo del cuadro de diálogo se muestra el tipo de componente y en la parte derecha los controles que nos proporciona el componente seleccionado. En la parte inferior se muestra una breve descripción de la funcionalidad del control seleccionado. Para insertar un control debemos seleccionarlo y seguir los pasos del asistente, el cual será diferente para cada uno.
Si deseamos instalar más componentes podemos acceder al sitio al cual nos lleva el hipervínculo Buscar componentes en el Web.
A continuación trataremos la inserción de los controles que consideramos más útiles y relevantes para el diseño y funcionalidad de nuestro sitio.
Efectos dinámicos Marquesina Podemos crear una marquesina en una página para mostrar un mensaje de texto con desplazamiento horizontal. En el cuadro Texto, escribimos la línea de texto que deseamos que muestre la marquesina. Si al solicitar la inserción del control tenemos un texto seleccionado, el cuadro Texto contendrá dicho texto.
Página 177 de 196
Propiedades de marquesina Para especificar la dirección en la que se mueve el texto en una marquesina, seleccionamos la opción Izquierda o Derecha en el área Dirección. Para especificar la velocidad a la que se mueve dicho texto en una marquesina, en el cuadro Retardo, seleccionamos o escribimos el retardo, en milisegundos, antes de que el texto de la marquesina comience a moverse. En el cuadro Cantidad, seleccionamos o escribimos el incremento en píxeles, que el texto de la marquesina debe mover. Para especificar el tipo de movimiento utilizado para animar el texto de una marquesina, seleccionamos Desplazar para que el texto se desplace por la pantalla desapareciendo y volviendo a aparecer, elegimos Deslizar para que el texto de la marquesina se deslice hasta el extremo izquierdo del cuadro que los contiene o Alternar para que este se desplace de un extremo a otro del cuadro que la contiene. Para especificar el tamaño de una marquesina, activamos la casilla de verificación Ancho y/o Alto, escribimos el ancho y/o alto y luego seleccionamos si el valor ingresado expresará en píxeles o como porcentaje en la ventana del explorador. Para especificar cuántas veces se repite el efecto del texto en una marquesina, activamos la casilla de verificación Continuamente para repetir la marquesina continuamente. Para repetir la marquesina una cantidad de veces fija, desactivamos la casilla de verificación Continuamente y luego escribimos el número de veces que debe repetirse. Podemos establecer el color de fondo de una marquesina, en el cuadro Color de fondo. Una vez insertada la marquesina, si deseamos regresar al cuadro de diálogo Propiedades de marquesina, podemos: Seleccionarla y ejecutar la orden Formato – Propiedades. Ejecutar la orden Propiedades de marquesina del menú emergente sobre la misma. Hacer un doble clic sobre la misma.
Página 178 de 196
Para modificar la fuente de la marquesina: 1) La seleccionamos. 2) Accedemos al cuadro de diálogo Fuente. 3) Realizamos las modificaciones correspondientes.
Botón interactivo Este componente es el mismo que se describió en la sección Barra de exploración del Tema 9. Lo único que cambia es la orden a través de la cual se inserta.
Hojas de cálculo y gráficos Este componente nos permitirá insertar distintos elementos de hoja de cálculo y gráficos de Microsoft Office. Hoja de cálculo Nos permite insertar una hoja de cálculo en la página mostrándose de la siguiente forma:
Página 179 de 196
Para finalizar la edición de la misma debemos hacer un clic fuera de la misma.
Esta hoja de cálculo podrá ser manipulada y editada desde un explorador Web.
Gráfico de Office Inserta un gráfico en la página el cual configuraremos a través del cuadro de diálogo Comandos y opciones.
En la ficha Origen de datos debemos seleccionar o crear el origen de datos que tomará el gráfico. La ficha Hoja de datos dependerá del tipo de origen que hayamos elegido en la ficha Origen de datos.
Página 180 de 196
En la ficha Tipo podemos seleccionar el tipo de gráfico que hemos de utilizar.
Para modificar las propiedades de las diferentes áreas del gráfico debemos ejecutar la orden Comando y opciones del menú emergente sobre el área a modificar. La ejecución de esta orden nos mostrará el cuadro de diálogo Comandos y opciones que contendrá los parámetros propios del área a modificar.
Tabla dinámica de Office Este control nos permite insertar en la página una tabla dinámica. Para realizar esta operación utilizamos un procedimiento similar al descrito para el gráfico.
Página 181 de 196
Contador de visitas El contador de visitas permite contar y mostrar el número de visitas realizadas a la página.
En este cuadro de diálogo establecemos: El estilo del contador. El número en el que se iniciará el conteo. La cantidad de dígitos fijos del mismo.
Para que el contador funcione debe tener un servidor con las Extensiones de FrontPage habilitadas.
Galerías de fotografías Este control funciona de la misma forma que la orden Insertar – Imagen – Nueva galería de fotografías tratado en el tema 6.
Página 182 de 196
Contenido incluido Sustitución Este componente inserta una variable que nos permite mostrar el autor, la descripción, la fecha de última modificación o la dirección URL de la página.
En el cuadro Sustituir con, seleccionamos una de las variables de la lista.
Página Es posible mostrar una página HTML en otra página del sitio Web, lo que nos permitirá mantener páginas separadas. Por ejemplo, para mostrar un aviso en varias páginas del sitio Web, creamos una página que lo contenga e incluimos dicha página en otras páginas del sitio Web. Cuando actualicemos el aviso, bastará con que actualicemos dicha página; todas las demás que la incluyan se actualizarán automáticamente. Al solicitar la inserción de este control FrontPage mostrará el siguiente cuadro de diálogo donde deberemos indicar la página que se incluirá en la página activa.
Esta característica sólo funciona en las páginas de un sitio Web.
Página basada en la programación e Imagen basada en la programación Es posible programar la aparición de una página en otra página durante un período de tiempo especificado. Esta característica es útil en el caso de contenidos sujetos a limitación temporal. Podemos, por ejemplo, mostrar un anuncio especial durante un fin de semana.
Página 183 de 196
También podemos especificar que una página se muestre fuera del período de tiempo; por ejemplo, hacer que un anuncio normal aparezca antes y después del fin de semana.
En el cuadro Durante el tiempo programado, escribimos la dirección URL relativa de la página que vamos a incluir, o accedemos al botón Examinar para encontrarla. En Comienzo, especificamos el año, el mes, el día y la hora a la que deseamos que se comience a mostrar la imagen. En Finalización, especificamos el año, el mes, el día y la hora a la que se dejará de mostrar la imagen. Para hacer que una imagen se muestre fuera del período de tiempo especificado, en el cuadro Antes y después del tiempo programado, escribimos la dirección URL relativa de la imagen que deseamos incluir, o usamos el botón Examinar para encontrarla.
Se utiliza el reloj del servidor Web para determinar el período de tiempo.
Para la inclusión programada de una imagen se procede de la misma manera que para insertar una imagen programada, excepto que seleccionamos el control Imagen basada en la programación.
Titular de página Este componente ya fue descrito en el Tema 9. Solo cambia la orden a través de la cual es insertado.
Página 184 de 196
Barra de vínculos Este tipo de componentes fue tratado en el Tema 9, sección Barra de exploración.
Tablas de contenido Podemos crear una tabla de contenido generada automáticamente en función de la estructura de exploración de nuestro sitio Web y de las páginas e hipervínculos no incluidos en la estructura de exploración. Los usuarios que visiten el Web pueden hacer clic en cualquier entrada de la tabla para pasar directamente a esa página o archivo. Es lo que usualmente consideramos el Mapa del sitio. Para este sitio Web Para crear una tabla de contenido del sitio Web que estamos trabajando: 1) En la vista Página, colocamos el punto de inserción en el lugar en el que deseamos crear una tabla de contenido. Podemos crear la tabla de contenido en una página que contenga otro contenido, o en una página individual. Si deseamos crearla para un Web voluminoso, probablemente debamos crear una página de contenido especial que la contenga. 2) Ejecutamos la orden Insertar – Componente – Tabla de contenido
3) En el cuadro de texto Dirección URL de la página para el punto de inicio de la tabla, escribimos la dirección URL relativa de la página para utilizarla como el punto de inicio de la tabla de contenido, o la buscamos a través del botón Examinar. El punto de inicio determina las páginas situadas más a la izquierda en la tabla de contenido. Las páginas con hipervínculos en la página de inicio se colocarán en un nivel más inferior en la tabla de contenido.
Página 185 de 196
4) En el cuadro combinado Tamaño de fuente de encabezado, seleccionamos el estilo del párrafo del encabezado (la entrada del nivel superior o página de inicio) de la tabla de contenido. Si deseamos excluir la página de inicio, elegimos Ninguno. Si nuestro Web incluye páginas con múltiples hipervínculos y deseamos que en la tabla de contenido aparezca sólo una vez cada página, activamos la casilla de verificación Mostrar cada página sólo una vez. Para incluir páginas sin hipervínculos en el Web, activamos la casilla de verificación Mostrar páginas sin hipervínculos entrantes. Para actualizar automáticamente la tabla de contenido siempre que modifiquemos una página Web, activamos la casilla de verificación Actualizar la tabla de contenido cuando se modifique cualquier otra página. La actualización de una tabla de contenido para un Web voluminoso puede resultar un proceso largo. Si activamos esta casilla, veremos que lleva más tiempo guardar páginas; si no la activamos, podemos regenerar manualmente la tabla de contenido abriendo y guardando la página que contiene la tabla. Podemos también insertarla dentro de un borde compartido, para tener acceso a ella de cualquier página, que contenga el borde, en nuestro sitio.
Basada en la categoría de la página Este control inserta una tabla de contenido similar a la descrita anteriormente pero basándose en las categorías seleccionadas.
Categorías Muchos sitios Web utilizan mapas de sitios para facilitar a los visitantes la labor de encontrar las páginas que necesitan. Para un Web personal o pequeño, un mapa de
Página 186 de 196
sitio puede ser tan simple como una lista de hipervínculos de todas las páginas Web. Podemos crear este tipo de mapa de sitio mediante el componente Tabla de contenido, como hemos tratado anteriormente. Para un Web corporativo o un Web de gran tamaño, un mapa de sitio, en general, contiene listas de hipervínculos de páginas a categorías u otras agrupaciones lógicas, organizadas por encabezados lógicos. Por ejemplo, si vendemos electrodomésticos, nuestro mapa de sitio podría tener columnas de hipervínculos para electrodomésticos pequeños, electrodomésticos grandes y servicio al cliente. Podemos crearlo mediante el uso de categorías. Antes de usar este procedimiento, debemos decidir los nombres de las categorías que deseamos utilizar para organizar el Web. Crear las categorías que deseamos en el mapa de sitio. Podemos omitir este paso si las categorías que deseamos utilizar en el mapa de sitio ya se han agregado a la lista de categorías disponibles. Si necesitamos agregar nuevas categorías, o quitar las existentes: 1) En cualquier vista, excepto en la vista Tareas, ejecutamos la orden Propiedades en el menú emergente sobre un archivo, seleccionamos la ficha Grupo de trabajo, y presionamos el botón Categorías.
2) En el cuadro de texto Nueva categoría, escribimos el nombre de la categoría que deseamos que se muestre en el mapa y presionamos el botón Agregar. Repetimos este paso para cada categoría que necesitemos incluir en el mapa de sitio. Para eliminar una de estas categorías, la seleccionamos de la lista y presionamos el botón Eliminar. Para volver la lista al estado en que estaba al abrirla, presionamos el botón Restablecer.
Página 187 de 196
Asignar categorías a los archivos que necesitamos mostrar en el mapa 1) En cualquier vista, excepto en la vista Tareas, ejecutamos la orden Propiedades en el menú emergente sobre uno o varios archivos a los que asignaremos las mismas categorías. 2) En la ficha Grupo de trabajo, activamos las casillas de verificación en la lista Categorías disponibles, de aquellas categorías que deseamos asignar a los archivos seleccionados. Podemos seleccionar varias categorías, de forma que un único archivo puede aparecer en varias categorías en el mapa. Una vez asignadas, podemos comprobar las categorías que hemos asignado a cada archivo, ejecutando la orden Ver – Informes – Categorías.
Agregar las listas de categorías al mapa de sitio 1) Debemos crear una página nueva, o abrir una existente para colocar el mapa de sitio. 2) Estando en la vista Página, colocamos el punto de inserción donde deseamos agregar la primera lista de categorías. 3) Escriba el nombre de la categoría (por ejemplo, "Negocios") como encabezado de la lista de archivos de esta categoría. 4) Ejecutamos la orden Insertar – Componente – Basada en la Categoría de la página.
5) En la lista Categorías para mostrar las páginas, activamos la casilla de verificación de la categoría en cuestión. 6) En la lista desplegable Ordenar páginas por, seleccionamos el Título del documento para ordenar la lista alfabéticamente por título, o en Fecha de última modificación para ordenar la lista según la fecha de los archivos.
Página 188 de 196
Repetimos estos pasos para cada lista de categorías que deseemos incluir en el mapa de sitio.
El mapa de sitio se actualizará automáticamente cada vez que agreguemos archivos a una categoría o los quitemos de ésta.
Controles avanzados HTML Este control nos permite insertar texto HTML en nuestra página. Este contenido no será modificado por FrontPage. En el siguiente cuadro de diálogo ingresamos el texto HTML que deseamos insertar en la posición del punto de inserción:
Para editar un texto HTML insertado simplemente realizamos un doble clic sobre el mismo.
Página 189 de 196
Subprograma Java En el cuadro de diálogo debemos configurar las siguientes opciones:
En el cuadro Origen del subprograma, escribimos el nombre del archivo de origen del subprograma Java. Los archivos de origen del subprograma Java normalmente tienen una extensión de archivo CLASS. En el cuadro Dirección URL base del subprograma, escribimos la dirección URL de la carpeta que contiene el archivo de origen del subprograma Java (si no está en el mismo directorio que la página Web). En el cuadro Mensaje para exploradores no compatibles con Java, escribimos texto con formato HTML o texto sin formato para mostrar en lugar del subprograma Java en exploradores Web que no sean compatibles con Java. En Parámetros de subprograma, para cada parámetro que deseemos pasar al subprograma Java, presionamos el botón Agregar y, a continuación, escribimos el nombre del parámetro y, si fuera necesario, el valor. Como Java no proporciona un mecanismo para mostrar las propiedades y los valores válidos para un subprograma Java determinado, es conveniente consultar la documentación que acompaña al subprograma Java y después especificar los nombres correctos de los parámetros y los valores válidos para cada uno. En Tamaño y Diseño, especificamos la alineación, el espaciado horizontal y vertical, y el ancho y alto (en píxeles) para el subprograma.
Página 190 de 196
Complemento Este control nos permitirá insertar en la página un complemento. Los complementos son pequeños programas que adicionan funcionalidad a la misma. En el cuadro de diálogo Propiedades del Complemento configuramos las siguientes opciones:
En el cuadro Origen de datos, ingresamos la dirección URL del archivo para el complemento que se va a cargar o presionamos el botón Examinar para buscar el archivo. Mensaje para exploradores que no admiten complementos: especificamos el mensaje que deseamos mostrar para exploradores que no admiten complementos. Este debe ser un mensaje en código HTML o en texto sin formato en el cuadro. En Tamaño deberemos especificar el ancho y el alto (en píxeles) del complemento. Activamos la casilla de verificación Ocultar complemento complemento cuando se vea la página en un explorador Web.
para
ocultar
el
Para establecer los atributos de diseño, en el área Diseño configuramos la alineación, el grosor y el espaciado horizontal y vertical.
ActiveX Los controles ActiveX son módulos de software que, colocados en la página Web, aumentan las posibilidades de HTML. Estos controles se ejecutan igual que cualquier otro objeto OLE de nuestra computadora.
Página 191 de 196
La lista Elija un control muestra el subconjunto de los controles ActiveX instalados actualmente en nuestra PC. Seleccionamos el control que deseamos insertar y presionamos el botón Aceptar. Podemos agregar o quitar controles de la lista anteriormente vista, presionando el botón Personalizar, y activando en el cuadro de diálogo proporcionado, aquellos controles que deseamos estén disponibles, como se muestra a continuación:
Cambiar las propiedades del control insertado Una vez insertado un Control ActiveX en la página, podemos cambiar sus propiedades realizando cualquiera de las siguientes acciones:
Orden Formato – Propiedades. Orden Propiedades de control ActiveX del menú emergente sobre el mismo. Doble clic sobre el mismo.
Página 192 de 196
Las propiedades enumeradas son específicas para cada control ActiveX.
La información de la ficha anteriormente mostrada, es utilizada por el explorador Web, no por el control mismo.
Controles de Tiempo de Diseño Un control de tiempo de diseño es un control ActiveX que se utiliza mientras diseñamos y modificamos una página. La idea de estos controles es que podemos agregarlos en una ventana en edición y controlarán todo lo que es usado en el diseño del sitio. Al guardar la página, la aplicación editada notifica al control, y el control emite HTML con el diseño especificado. La mayoría de estos controles de tiempo de diseño están creados para usar con Microsoft Visual InterDev, un desarrollador de aplicaciones Web. Sin embargo, FrontPage provee algo de soporte para ellos.
Página 193 de 196
Elegimos el control deseado y presionamos Aceptar. Si no hay controladores instalados, la orden en el menú aparecerá deshabilitada. Si nuestro equipo no lista algunos controladores, para instalarlos presionamos el botón Personalizar, y activamos los que deseemos instalar, mediante el siguiente cuadro de diálogo.
Película en formato Flash Este complemento permite insertar una película de Flash en formato .swf. Para esto se mostrará un cuadro de diálogo que insertará el archivo seleccionado en la posición del cursor.
Página 194 de 196