frontpage

Frontpage para principiantes - Manual completo

Página 1 de 16

Frontpage para principiantes Manual por: DesarrolloWeb.com [http://www.desarrolloweb.com/] Versión on-line: "Tu mejor ayuda para aprender a hacer webs" http://www.desarrolloweb.com/manuales/35

Introducción a Frontpage para principiantes Es relativamente común oír por la Red, o entre colegas diseñadores —cuando se tienen amigos tan extraños como uno mismo—, que las peores páginas de Internet no fueron desarrolladas por un mal webmaster, sino escritas con FrontPage. Y tristemente es muy probable que lleven razón. (¿Triste? De momento retiro el adjetivo; no se puede sentir lástima de un producto fabricado por la mayor compañía de software del mundo.) ¿Por qué es así? Además, tengamos en cuenta que es una herramienta muy, muy extendida; ¿pueden equivocarse cientos de miles, quizás millones de personas? La respuesta a esta pregunta es sí, pueden equivocarse, y la otra cuestión requiere una argumentación un poco más extensa.

FrontPage está programado por los empleados de Microsoft [http://www.microsoft.com/spain/defaultns.asp], la madre amantísima de Internet Explorer, y salta a la vista que se esmeraron en que los usuarios de Netscape nos sintiésemos defraudados. A eso se le llama simpatía corporativa. Pero ¿qué más da? Siempre nos quedará el semejante y más neutral y accesible Namo Web Editor [http://www.namo.com/products/webeditor/]. FrontPage [http://www.desarrolloweb.com/articulos/335.php] genera lo que podríamos llamar código extraño, una especie de tiras de texto cifrado, cabalístico, que sólo utiliza el programa y seguramente nadie más en el mundo. A eso lo define como código fuente. El problema es que, además, FrontPage [http://www.desarrolloweb.com/articulos/335.php] crea archivos y etiquetas basura, que aumentan el peso de nuestros websites y el tiempo de transferencia y publicación.

A pesar de todo esto, es una aplicación que inspira en los usuarios la simpatía de lo conocido.

Forma parte de la suite Microsoft Office y su interfaz es muy parecida a la del omnipresente Word y a la del resto de productos de la gama. Por otra parte, sus archivos de ayuda son muy completos. Esto sin duda es una ventaja para el principiante. Sin embargo, el profesional del medio se encontrará con la imposible tarea de construir un palacio con herramientas de plástico, a diferencia de aquél que ejecuta software del prestigio y la calidad contrastada de Macromedia DreamWeaver [http://www.desarrolloweb.com/articulos/332.php] o Adobe GoLive! [http://www.desarrolloweb.com/articulos/343.php], tan bien integrados, por si fuera poco, con otras aplicaciones comunes y muy potentes, de gran calidad visual y multimedia, como Flash [http://www.desarrolloweb.com/articulos/338.php] y PhotoShop [http://www.desarrolloweb.com/articulos/330.php].

Pero siendo un producto muy usado, especialmente por aficionados cuyas finanzas no dependen de su talento creativo, se merece al menos una introducción a algunas de sus funciones. No es un manual para un uso avanzado, sino un repaso elemental de las preguntas más frecuentes que los usuarios plantean en los foros de discusión, así como una manera de hacer compatible su código con otros navegadores. Una vez instalado e iniciado el programa —digamos que cuando ya es demasiado tarde para echarse atrás—, nos encontramos con la pantalla principal de modo WYSIWYG; siglas en inglés de "lo que ves es lo que obtienes". La reconocemos porque en la parte inferior de la pantalla, sobre la barra de estado, vemos seleccionada la pestaña "normal"; observemos que hay dos más: "html" y "vista previa". La vista html nos muestra el código fuente, que es lo que interpreta el navegador, y es especialmente importante en un producto de las características de FrontPage [http://www.desarrolloweb.com/articulos/335.php], dado que su código debe ser revisado y corregido para adaptarlo a navegadores diversos y para incluir código javascript [http://www.desarrolloweb.com/articulos/25.php], por ejemplo. La última pestaña, vista previa, nos muestra el resultado tal y como se verá en Internet Explorer, y además ejecuta una función de depuración de código: si hay errores, nos lo hará saber mediante una ventana emergente.

Frontpage para principiantes - Manual completo

Página 2 de 16

Barras de herramientas de Frontpage Existen varias barras de herramientas, y la mejor idea es probar todas ellas, con todas sus funciones, hasta descubrir cuáles son las que realmente resultan útiles de forma frecuente, y aquellas de uso más inusual. Al final es normal que creemos nuestra propia barra, para eliminar del escritorio elementos innecesarios.

Las barras de herramientas más comunes para el usuario principiante son: estándar, con los botones típicos de guardar, abrir, página nueva, deshacer, rehacer, etc.; formato, para aplicar tipografías y párrafos al texto (FrontPage admite la justificación de párrafos, pero solo desde Formato> párrafo> alineación, sin disponer de un botón específico en la barra de formato); tablas, para construir tablas y modificar sus propiedades; imágenes, para insertar gráficos, cambiarles el tamaño y la resolución, crear mapas de imágenes, modificar luz, contraste, etc.; efectos DHTML [http://www.desarrolloweb.com/directorio/programacion/dhtml/], para aplicar animaciones automáticas o de reacción a las páginas; exploración, para controlar la estructura de un sitio web; e informes, que nos detalla las páginas lentas, anticuadas, etc.

Existen otras barras de herramientas, como por ejemplo de formulario, pero requieren ciertos conocimientos adicionales y, de momento, el usuario novel no las necesita... ni entiende.

Creando un web en local con Frontpage Para empezar, hay que tener claras dos nociones elementales y sencillas. z z

Una página web es un único archivo, una estructura de datos e informaciones que instruyen al navegador sobre cómo debe mostrar dicha página.

Un sitio web es una carpeta o grupo de carpetas que contiene a su vez páginas web individuales y, posiblemente, otros archivos como imágenes, animaciones Flash [http://www.desarrolloweb.com/articulos/338.php], documentos JavaScript [http://www.desarrolloweb.com/articulos/25.php], películas QuickTime [http://www.apple.com/es/quicktime] o Real [http://www.real.com/realone/?src=realplayer], etc.

En FrontPage [http://www.desarrolloweb.com/articulos/335.php] debemos crear primero una carpeta web, que es algo así como la versión local, en nuestro disco duro, del sitio web accesible al público y colocado en un servidor. En realidad nunca deben crearse páginas arbitrariamente, en un folder cualquiera, ya que eso dificulta considerablemente la tarea de publicación. La operación es fácil: clic sobre archivo, clic sobre nuevo, clic sobre web... La aplicación nos da la opción de elegir entre algunas plantillas; mi opción predilecta, más libre, es "web de una sola página", de modo que yo me encargo de todo el trabajo posterior, asumiendo un control absoluto.

Se introduce la ubicación y el nombre de la carpeta web, en el campo al efecto, y se acepta.

Unos segundos después, ya disponemos de nuestra web local, donde FrontPage [http://www.desarrolloweb.com/articulos/335.php]ubicará todas las páginas y el resto de archivos. Así, al publicar, no tendremos pérdida.

Definiendo la resolución con Frontpage Un problema fundamental del diseño web es la proyección de nuestras páginas, es decir, cómo pensamos que serán vistas por el usuario. ¿Qué tamaño tiene su pantalla? ¿Es igual que la nuestra, más grande?

Inevitablemente ocurrirá una de las dos cosas, e incluso ambas. Aunque es cierto que los monitores de 800x600 son muy comunes, también lo son los de 17". Por ello, si pensamos en el primero, dejaremos vacío gran parte del espacio del usuario de 17"; y si pensamos en éste,

Frontpage para principiantes - Manual completo

Página 3 de 16

obligaremos al navegante de 15" a utilizar las barras de desplazamiento horizontal para moverse por una página, y eso es muy incómodo.

Referencias: Tenemos algunos artículos que tratan el tema de las resoluciones de pantalla en páginas web con más detenimiento y de manera general a todos los programas: - Definiciones de pantalla [http://www.desarrolloweb.com/articulos/10.php?manual=13]. Cómo tratarlas.

- Páginas fluidas [http://www.desarrolloweb.com/articulos/473.php?manual=5] (las que se ajustan al tamaño de la ventana del explorador) Cuando son apropiadas.

La solución predilecta del diseñador suele consistir en crear tablas con un ancho y alto de tamaño definido porcentualmente, es decir, adaptable a cada monitor; el 100% es una buena opción. El procedimiento es simple: Tablas > Insertar: a continuación aparece una ventana, donde introducimos a voluntad ciertos datos, como grosor del borde, número de filas (horizontales) y columnas (verticales), color o imagen de fondo (la imagen de fondo en las tablas ya es reconocida en Netscape 7 [http://www.aola.com/netscape/download/]). En esta primera ventana podemos definir el ancho: 100%, esto es, adaptable al monitor. Una vez que aceptemos, ya disponemos de nuestra tabla en la pantalla.

Ahora, haciendo clic con el botón derecho del ratón sobre la misma tabla, seleccionamos Propiedades de tabla en el menú contextual. Ahora sí, definimos también el alto en 100%.

Conviene advertir, en todo caso, que este código es interpretado por Internet Explorer [http://www.microsoft.com/windows/ie_intl/es/], pero no por Netscape [http://www.aola.com/netscape/download/] en ninguna de sus versiones. Para hacerlo accesible a todos, podemos cambiar a la vista html y sustituir la tabla (definida por las etiquetas <table> </table>) por este código: <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" style="textalign: left;"> <tbody> <tr> <td valign="top"> </td> </tr> </tbody> </table> Este codigo ha sido generado por Netscape Composer [http://www.aola.com/netscape/download/] y será asimilado por FrontPage [http://www.desarrolloweb.com/articulos/335.php], con posibilidad de editarse normalmente sin que se pierda su compatibilidad (conviene que, en FrontPage [http://www.desarrolloweb.com/articulos/335.php], sigamos estas instrucciones: abrimos Herramientas> Opciones de página> pestaña Código fuente html y seleccionamos "mantener el código fuente html", de manera que FrontPage [http://www.desarrolloweb.com/articulos/335.php] no rescriba el código generado por otras aplicaciones). Ahora, todo lo que compongamos dentro de la tabla se adaptará a los diversos monitores, siempre quedando dentro de la pantalla.

Si tan sólo queremos definir el ancho de la tabla, nos limitamos a seguir las primeras instrucciones. En todo caso, ningún usuario se verá obligado a mover el scroll horizontal cuando navegue nuestros sitios. (A excepción de aquellas ocasiones en que incluyamos objetos muy grandes sin posibilidad de reestructuración automática, como por ejemplo las imágenes; si bien sería posible definir su tamaño como porcentaje de la ventana, esta opción tan solo es útil en gráficos sin degradados, ya que las fotografías quedarían deformadas y pixelizadas).

Funciones especiales de Frontpage: Las extensiones de servidor Conviene precisar que esta aplicación de Microsoft incluye algunas opciones particulares, muy cómodas e interesantes, como por ejemplo la creación de foros totalmente personalizados o la inclusión de contadores. Sin embargo, cuenta con la desventaja de que estas características

Frontpage para principiantes - Manual completo

Página 4 de 16

dependen del servidor donde alojemos nuestras páginas, y si éste no cuenta con las extensiones apropiadas, la mejor idea es desechar todas estas funciones adicionales... porque sencillamente no funcionarán. Si ya conocemos nuestro proveedor de espacio web, gratuito o de pago, podemos consultar sus servicios y ver si cuentan con estas extensiones; normalmente muestran esta información de manera explícita, ya que es una pregunta muy común. Si no disponen de las extensiones, podemos deshabilitarlas todas de manera automática...

Hacemos clic en el menú Herramientas> Opciones de página> pestaña Compatibilidad.

Deseleccionamos la casilla "habilitado con las extensiones de servidor de Microsoft FrontPage".

Así, sus las funciones asociadas quedan atenuadas e inoperativas en los menús, de manera que no nos ocurrirá algo muy común e irritante: descubrir al final que parte de nuestro trabajo ha resultado en vano.

En esta ventana, además, contamos con otras opciones muy útiles, y con algunas más que podrían sonar a chiste. La mejor idea suele consistir en seguir estas instrucciones: —En la entrada Exploradores, seleccionar "personalizado". Es de muy mal gusto planear un web pensando tan sólo en un grupo cerrado de usuarios.

—En la entrada Versiones de exploradores, seleccionar "personalizado". En FrontPage 2000 [http://www.desarrolloweb.com/articulos/335.php] se tratan tan sólo hasta las versiones 4.0, mientras que en la actualidad Internet Explorer avanza por la 6, y Netscape, por la 7.

En el listado de tecnologías cada usuario puede elegir las opciones que le convenzan. Para el caso de ActiveX [http://www.desarrolloweb.com/articulos/993.php], por ejemplo, hay que considerar el hecho de que éste no es soportado por Netscape, mientras que existen otras opciones compatibles con ambos navegadores, si lo que buscamos es incluir contenido multimedia en nuestras webs.

Multimedia con FrontPage 2000 Como decía, los controles ActiveX [http://www.desarrolloweb.com/articulos/993.php] son particulares de Internet Explorer. Se trata de pequeños códigos visibles en la fuente del documento que indican al navegador ciertas instrucciones para definir el comportamiento de contenido multimedia y dinámico. En general suelen ser entradas complicadas para el usuario novel, y llegan a variar mucho de un control a otro; es decir, quizás tengas los conocimientos suficientes para incluir flash, pero no los apropiados para añadir RealVideo [http://spain.real.com/index.html?lang=es&loc=es]. Si no se conocen, son inútiles. En todo caso, usualmente incluyen la opción de "representación alternativa" para exploradores que no soportan esta tecnología.

Entonces, ¿qué hacer para insertar músicas y contenidos especiales? Como curiosidad valga decir que la ventana propiedades de página (fácilmente accesible haciendo clic con el botón secundario del ratón sobre la pantalla principal) tiene la opción de música de fondo, pero en general es una mala idea. Ocupa ancho de banda, puede resultar pesada y la mejor alternativa por su escaso peso, la música midi, suena soporífera e insustancial.

Bien, la opción entonces es la inclusión de complementos (Insertar> Avanzadas> Complemento), que generará unas etiquetas <embed> </embed> interpretadas tanto por Netscape como por Explorer. Las entradas que debemos cumplimentar en la ventana que aparece son los siguientes: "origen de datos", que determina la fuente o archivo de origen; el tamaño en alto y ancho (aunque puede ocultarse el complemento si se desea, seleccionando la casilla Ocultar, que creará la etiqueta "hidden"); y ciertas variables de diseño que pueden ser editadas más tarde, y más cómodamente, desde los controles de la barra de formato. ¿Qué podemos hacer con los complementos o archivos embebidos? Pues en realidad agregar cualquier archivo que un navegador sea capaz de interpretar mediante plugins; desde

Frontpage para principiantes - Manual completo

Página 5 de 16

de Macromedia [http://www.macromedia.com/es/] hasta o músicas mp3. Sin embargo, cada archivo específico tiene unas características particulares cuyo código debe ser conocido y editado desde la vista de código fuente. Por ejemplo, las animaciones flash incluyen menu="0/—1", que muestra o no, el menú contextual, etc. Quizás pueda verse de una forma más clara el resultado del código, que deberá editarse manualmente, en la siguiente línea:

Flash [http://www.desarrolloweb.com/articulos/338.php] QuickTime [http://www.apple.com/es/quicktime/]

<embed src="archivo.xxx" width=320 height=200 AUTOSTART=true LOOP=true></embed> Desde FrontPage podremos añadir autostart, que indicará si el inicio de la reproducción del archivo es automático o corresponde a un evento, y loop, que define si el fichero se ejecuta indefinidamente o si tan solo se reproduce una vez y luego se detiene. Existen más variables genéricas y otras específicas de formato; en todo caso, la página de desarrollo de Netscape [http://developer.netscape.com/docs/manuals/communicator/plugin/basic.htm#1009627] incluye información complementaria muy interesante.

HTML limpio Como ya se dijo anteriormente, FrontPage [http://www.desarrolloweb.com/articulos/335.php] trabaja también en modo vista de código fuente, que es completamente editable y cuyos resultados se actualizan en tiempo real en la vista WYSIWYG. Sin embargo, el usuario novel, para quien va destinada esta introducción elemental, quizás no conozca dicho lenguaje, y lo que desea hacer es simplemente cortar y pegar códigos que tal vez ha bajado de la Red. ¿Es esto posible?

Desde luego, y de hecho de dos formas distintas. Para una de ellas usaremos el comando Insertar> Avanzadas> Html, que abre una ventana en blanco donde pegar cualquier secuencia.

Antes deberemos especificar con el ratón dónde queremos insertar el nuevo código. No obstante, éste se incluirá según está escrito, sin análisis, y su contenido no se mostrará en la vista normal.

Para eliminar esta característica deberemos borrar los comentarios que el software genera automática. Acudimos a la vista html y borramos completamente y sin temor las líneas: <!-webbot bot="HTMLMarkup" startspan -->, endspan -->, al principio y al final.

La otra forma la usaremos para insertar código en el encabezado del documento, que está delimitado por las etiquetas <head>,</head>, donde la función insertar html no es efectiva.

Para ello pasamos a la vista de código, donde pegamos cualquier código de la forma clásica, abriendo un menú contextual con el ratón y seleccionando pegar. No obstante, puede haber un problema: si el texto copiado tiene formato, FrontPage lo conservará, haciendo anotaciones de formateado, e inutilizará el script. Puesto que corregirlo manualmente sería un engorro, podemos seguir un pequeño truco: primero pegamos el texto en el bloc de notas [http://www.desarrolloweb.com/articulos/327.php], de manera que se pierde el formato, y allí volvemos a copiar, apareciendo limpio de etiquetas basura.

Conclusiones: Bien, éstas son algunas de las preguntas que comúnmente se pueden leer en los foros de usuarios de FrontPage [http://www.desarrolloweb.com/articulos/335.php], y aquí exponemos algunas posibles respuestas. No son todas, ni siquiera tienen que ser infalibles; hay más opciones creativas que el usuario puede descubrir con la práctica, disfrutando así de un trabajo hecho con cierto ingenio.

Creación de un sitio web Clic en la flecha del desplegable de al lado del icono de Nuevo y a continuación elegir Sitio Web.

Frontpage para principiantes - Manual completo

Página 6 de 16

O en el Panel de Tareas de Inicio (a la derecha de la pantalla), clic en la flecha del desplegable y elegir Sitio web de una página. Si el Panel de tareas no se visualiza ingresar al Menú Ver – Panel de Tareas.

Se abre el cuadro de diálogo Plantillas de sitios web, en la ficha General elegir algún asistente (para crear un sitio web de forma automática) o elegir Sitio Web vacío.

Clic en el botón Examinar para elegir el disco y la carpeta donde se almacenará el sitio. Aceptar.

A continuación se crea el sitio y aparece una nueva visualización de la pantalla de FrontPage.

En la parte inferior de la pantalla aparecen en forma horizontal las opciones para cambiar las vistas o seleccione la vista correspondiente desde el menú Ver.

Las vistas de FrontPage proporcionan diferentes maneras de ver la información de su Web, de forma que pueda administrar su sitio con eficiencia. z

Carpetas. Vista de un Web que muestra cómo está organizado el contenido del Web. En la vista Carpetas puede crear, eliminar, copiar y mover archivos y/o carpetas de manera similar a como lo hace en el Explorador de Windows. Si no es visible el panel izquierdo, ingresar al menú Ver – Lista de carpetas. O ingresar al menú Ver – Panel de Exploración para visualizar los enlaces de la página según estén indicados en la vista Exploración.

Frontpage para principiantes - Manual completo

z

z

z

z

z

Página 7 de 16

Sitio Web remoto. Vista en un panel los archivos locales y en otro panel los archivos en el servidor remoto, permitiendo subir o descargar archivos, siempre y cuando se haya realizado la configuración desde el botón Propiedades de sitio web remoto. También puede publicar los archivos del sitio configurado ingresando desde el menú Archivo – Publicar sitio.

Informes. Se puede elaborar una lista de las páginas, gráficos y archivos de su Web y analizarla al ejecutar los informes de lista de páginas lentas, páginas sin vincular, archivos que se han agregado o modificado recientemente, hipervínculos rotos, errores de componente, estado de revisión, asignaciones, categorías, estado de publicación o de desprotección.

Exploración. Vista que se utiliza para crear, mostrar, imprimir y cambiar la estructura de exploración de un Web. La vista Exploración incluye una vista en forma de carpetas, desde la cual puede arrastrar y colocar páginas en la estructura de su sitio. Se puede acercar a nodos específicos y agregar hipervínculos a sitios externos.

Hipervínculos. Vista que muestra el estado de los hipervínculos de su Web. La lista incluye hipervínculos tanto internos como externos e indica gráficamente si se han comprobado o si están rotos.

Tareas. Es posible llevar a cabo un seguimiento de las tareas que se van a realizar y de los editores a quienes se han asignado e, inmediatamente, ver el estado, la descripción y la prioridad de las tareas.

Importar archivos Ingresar al menú Archivo – Importar, seleccionar el o los archivos a incorporar al sitio y aceptar.

Exportar archivo Desde el menú Archivo – Exportar puede crear una copia del archivo en edición o seleccionado en la vista Carpetas, en otra ubicación de la Pc.

Trabajar con una página en Frontpage Una vez creadas las páginas desde la vista Carpetas, para trabajar sobre una página y agregarle contenido, doble clic sobre el icono de la página a editar.

Se abre la página, en la cual se puede visualizar o trabajar desde varias vistas: Diseño, Dividir (2 paneles: diseño y código html), Código (vista del HTML) y Vista previa.

Configuración de la página Entrar en el menú Archivo – Propiedades. Se abre el cuadro de diálogo Propiedades de página: z z z z z z

General: permite agregar el título, sonido de fondo y los metatags de descripción y palabras claves.

Formato: permite cambiar los colores predeterminados de fondo, textos y enlaces; o imagen de fondo.

Avanzadas: permite indicar los márgenes, plataforma, tipo de servidor y cliente.

Personalizadas: permite agregar otros metatags.

Idioma: muestra el idioma de la página y codificación html.

Grupo de trabajo: opciones de trabajo en grupo.

Para previsualizar la página entrar al menú Archivo – Vista previa del explorador y elegir en que navegador visualizar la página, o puede Editar la lista de exploradores para agregar otro navegador instalado.

El formato del texto se puede modificar desde la barra de herramientas de formato o desde el menú Formato – Fuente o menú Formato – Párrafo.

Frontpage para principiantes - Manual completo

Página 8 de 16

También puede aplicar viñetas, numeración y viñetas de imagen a una lista.

Puede agregar la fecha y hora desde el menú Insertar – Fecha y hora indicando además que se actualice cada vez que se almacena la página.

Puede agregar símbolos especiales desde el menú Insertar – Símbolo.

Puede dibujar una línea horizontal, ingresar al menú Insertar – Línea horizontal.

Con la opción del menú Insertar – Archivo puede incorporar o pegar en un solo paso todo el contenido de otra página web (puede ser una página local o la dirección de una página web) en la página actual.

Puede agregar comentarios que no se visualizarán en el navegador, ingresar al menú Insertar Comentario.

Puede agregar o dibujar capas desde el menú Insertar – Capas o desde el panel de Capas. Las capas pueden contener cualquier tipo de información y pueden ubicarse en cualquier lugar de la página. Desde el panel de Capas se puede indicar el índice Z (orden de superposición), la visibilidad, la posición en coordenadas absoluta o relativa (Colocar) y los colores de fondo y borde (bordes y sombreados).

Puede agregar un IFRAME desde el menú Insertar – Marco flotante, que permite visualizar una página dentro de un sector de otra página.

Imágenes Puede insertar imágenes ya almacenadas (menú Insertar – Imagen – Desde archivo) o imágenes de las galerías del Office (menú Insertar – Imagen – Imágenes prediseñadas), en este caso abrirá el Panel de Imágenes prediseñadas desde donde puede buscar una imagen indicando su nombre o clave, o haciendo clic en Organizar clips accede a un nuevo cuadro donde se despliegan las categorías con sus imágenes correspondientes. Debe seleccionar y copiar la imagen a insertar, luego ubica el cursor en la página y ejecuta la opción de pegar.

Con un doble clic sobre una imagen insertada accede a sus propiedades (tamaño, bordes, texto alternativo, alineación, espaciado, hipervínculo, etc). Desde el menú contextual también puede crear una miniatura automática de la imagen, mostrar la barra de herramientas de imágenes (Ver – Barras de herramientas – Imágenes).

Permite agregar texto sobre la imagen (convirtiéndola al formato gif), crear miniatura automática, ubicarla en capa, rotarla, espejarla, cambiar el brillo y contraste, decolorarla, recortarla, hacer un color transparente (convirtiéndola al formato gif), aplicarle un bisel, y crear con ella un mapa de imágenes con distintas zonas interactivas.

Si tiene un escáner o cámara digital de fotografía puede incorporar las imágenes directamente a la página, ingresando al menú Insertar – Imagen – Desde escáner o cámara.

Puede crear una galería de fotografías, ingresando al menú Insertar – Imagen – Galería de fotografías web.

Frontpage para principiantes - Manual completo

Página 9 de 16

Está opción genera una pagina con miniaturas de las fotografías seleccionadas y un enlace en cada una de ellas a la foto original.

En la ficha Imágenes agregar las imágenes, puede indicar un orden, el tamaño de las miniaturas o que mantengan la relación de aspecto con las originales, y puede agregar un título y/o descripción a cada fotografía.

En la ficha Diseño elegir el modelo o diseño de página que contendrá las miniaturas.

Puede agregar objetos de Wordart (textos con efectos de 3d, circulares, etc…), entrar al menú Insertar – Imagen – Wordart. Puede agregar dibujos de llamadas ingresando al menú Insertar – Imagen – Autoformas.

Es posible dibujar cuadros de textos y otras figuras geométricas desde la barra de herramientas de dibujo y luego aplicarle sombras o estilos 3D. Puede agregar también botones de imágenes, entrando al menú Insertar – Botones interactivos, puede definir el estilo los colores y fuente; se almacenará como una imagen jpg por cada uno de los estados del botón (3)

Puede agregar a la página videos avi, asf, ra o ram (real audio) entrando al menú Insertar – Imagen – Video.

Puede insertar películas de flash (.swf) desde el menú Insertar – Imagen – Película en formato Flash.

Frontpage para principiantes - Manual completo

Página 10 de 16

Trabajar con una página en Frontpage 2ª Parte Vínculos – enlaces – link Seleccionar el texto e ingresar al menú Insertar – Hipervínculo o clic en el icono correspondiente.

Abre un cuadro de diálogo y seleccionar el archivo correspondiente a enlazar.

Igual procedimiento para crear un vínculo a partir de una imagen o clic con el botón derecho y en el menú contextual seleccione Propiedades de imagen.

En la caja de Hipervínculo predeterminado seleccione o escriba la URL a vincular.

La imagen vinculada quedará con un marco azul. Para quitar este borde y aún mantener la función de vínculo de la imagen, abrir la solapa Apariencia. Configure en 0 (cero) el valor de Grosor del borde y aceptar.

También puede crear enlaces a direcciones de correo electrónico, a otras páginas del sitio y dentro de la misma página, para lo cual previamente debe crear un marcador (menú Insertar – Marcador) o ancla en la posición donde lo llevará el link interno.

Efectos de html dinámico (Barra de herramientas - Efecto DHTML) Se pueden 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.

También puede crear efectos especiales que se mostrarán cuando un visitante entre en el sitio o lo deje, o cuando explore una o desde una página específica. Al aplicar efectos de transición (menú Formato – Transición de página) puede crear presentaciones de diapositivas con transiciones entre páginas de apariencia profesional.

Temas Un tema de FrontPage consta de elementos de diseño y combinaciones de colores unificados para viñetas, fuentes, imágenes, barras de exploración y otros elementos de página.

Para aplicar un tema a una página ingresar al menú Formato – Tema, en el panel de tema elegir el tema.

Tablas Están compuestas de filas y columnas de celdas que pueden contener cualquier cosa que se pueda colocar en una página, como texto, imágenes, formularios, o componentes de FrontPage.

Puede utilizar tablas para ordenar datos de manera sistemática o para organizar el diseño de una página.

Frontpage para principiantes - Manual completo

Página 11 de 16

Puede crear una tabla rápidamente ingresando al menú Tabla - Dibujar tabla o menú Tabla – Tablas y celdas de diseño, que le permite definir una tabla con sólo dibujar los bordes de la tabla, las columnas y las filas. Después de crear una tabla, puede personalizarla si agrega filas y columnas, cambia el tamaño de las celdas y agrega un título. También puede convertir texto ya existente en una tabla y viceversa.

Cuando en una celda escribe texto o inserta texto, imágenes, formularios y otros elementos, la celda se expande horizontal y verticalmente para dar cabida a los elementos escritos o insertados. Puede modificar, dar formato y especificar propiedades para el texto o el elemento insertado, así como para la celda de la tabla, la fila, la columna o la tabla propiamente dicha.

Puede cambiar fácilmente el tamaño de las celdas, columnas, filas o de toda la tabla si arrastra los bordes. A través del menú contextual puede cambiar las propiedades de la tabla y de la celda.

Puede crear una tabla definiendo sus propiedades a través del menú Tabla – Insertar – Tabla.

Con la opción Autoformato de tablas puede aplicar colores y formato a la tabla y a su contenido.

Plantillas El programa trae incorporado una serie de plantillas con distintos diseños de páginas, páginas de formularios, páginas de marcos y hojas de estilos (que luego puede vincular a las páginas del sitio a través del menú Formato – Vínculos de hojas de datos).

Se accede desde el menú Archivo – Nuevo que abre el panel de Nuevo y allí elegir la opción Más plantillas de páginas. O a través del icono de nueva página en la barra de herramientas Estándar.

Formularios Un formulario consiste en invitar al navegante a completar una serie de campos escribiendo la información solicitada, para remitirle una determinada información o producto.

Puede crear un formulario insertando primeramente el formulario (menú Insertar – Formulario Formulario) y definiendo en sus propiedades como van a ser procesados sus datos (menú contextual – Propiedades de formulario): por medio de una base de datos, el envío a una dirección de e-mail o a un archivo en el servidor.

Y luego creando los distintos tipos de campos: z z z

z

z

z z

Un cuadro de texto de una línea es un campo de formulario de una línea, en el que los usuarios pueden escribir texto.

Un cuadro de texto con desplazamiento es un campo de formulario de varias líneas, en el que los usuarios pueden escribir varias líneas de texto.

Un botón de opción presenta una selección que el usuario puede elegir si hace clic en un botón. Los botones de opción se presentan en una lista y uno de ellos está seleccionado de forma predeterminada. Si elige un nuevo miembro de la lista, la selección del elemento actual se limpia.

Una casilla de verificación presenta una selección que el usuario puede elegir haciendo clic en una casilla. Cuando la casilla de verificación está activada, normalmente se muestra con una marca de verificación o X. Las casillas de verificación pueden representar un conjunto de opciones no exclusivas.

Un menú desplegable presenta una lista de selecciones en un menú de estilo desplegable.

Se pueden configurar una serie de campos de formulario de menú desplegable para permitir la selección de uno o varios elementos a la vez.

Un botón de comando permite al usuario enviar el formulario o reiniciar el formulario a su estado inicial.

Un campo de imagen muestra una imagen en un formulario. Haciendo clic en la imagen, el usuario envía el formulario.

También puede crear un formulario a través del Asistente para páginas de formulario. Consta

Frontpage para principiantes - Manual completo

Página 12 de 16

de 6 pantallas.

1.

2.

3.

4.

Escribir un nombre o título para el formulario, y un nombre de archivo. Clic en Siguiente.

Agregar y/o modificar las preguntas para el formulario. Clic en Siguiente.

Seleccionar el tipo de entrada que se debe obtener para la pregunta. Clic en Siguiente.

Seleccione o desmarque aquellos campos que desee visualizar o no en el formulario. Clic en Siguiente.

5. Seleccione la forma de visualización del formulario. Clic en Siguiente.

6. Seleccione la forma de control de los datos ingresados por los visitantes (por ejemplo en formato texto o TXT)

Todos los campos pueden ser editados o modificados, de ser necesario.

Clic con el botón derecho sobre cada campo del formulario para definir sus propiedades (longitud, requerido, etc.).

Trabajar con una página en Frontpage 3ª Parte Marcos o frames Una página con frames, consiste en el conjunto de documentos HTM o HTML que la integran (con movimientos independientes y que pueden relacionarse entre sí), más otro que actúa de ordenador o administrador de los mismos.

Una estructura de marcos se crea desde las plantillas de la ficha Páginas de marcos del cuadro de diálogo Plantillas de páginas.

Una vez seleccionado el modelo y aceptado, aparecerá la división seleccionada. En la misma aparecerán botones: Establecer página inicial (para elegir una página creada anteriormente) y Nueva página (clic si va a crear la página), en cada división (en la vista Diseño).

Por lo general el marco izquierdo se utiliza para colocar los enlaces y el marco derecho para mostrar los contenidos.

Puede cambiar su tamaño arrastrando la línea de división.

Al almacenar pregunta el nombre de cada marco indicándonos visualmente cual es el que estamos almacenando.

Para crear enlaces desde el marco izquierdo y que se muestren en el marco derecho: z z z

Seleccionar el texto.

Clic en el botón correspondiente a Insertar hipervínculo.

Seleccione el documento a vincular, presione el botón Marco de destino y luego marque el frame derecho como destino.

Desde el menú Marcos puede dividir algún marco, eliminarlos y cambiarles las propiedades.

Comportamientos

Frontpage para principiantes - Manual completo

Página 13 de 16

Los comportamientos son opciones de secuencias de comandos que permiten agregar rápidamente interactividad al texto o a otros elementos de la página Web, o aumentar su funcionalidad.

Un comportamiento es una combinación de un evento y de una acción que se desea que ocurra cuando un visitante del sitio interactúe con una página Web o uno de sus elementos.

Definir comportamientos para los elementos 1. En la vista Página, en la parte inferior de la ventana del documento, haga clic en Diseño 2. En el menú Formato, haga clic en Comportamientos.

3. En la página, seleccione el elemento, por ejemplo, texto o un gráfico, con el que desee trabajar.

4. En el panel de tareas Comportamientos, haga clic en Insertar y, a continuación, en la acción deseada.

5. En el cuadro de diálogo que se abrirá, seleccione las opciones deseadas y, a continuación, haga clic en Aceptar.

6. Para seleccionar el evento, en Eventos, haga clic en el evento predeterminado y, a continuación, haga clic en el evento deseado.

7. Dependiendo de la acción seleccionada, seleccione cualquier opción adicional que defina el evento para dicha acción.

Comportamiento: Abrir ventana del navegador 1. Crear un link a la propia página a partir de un texto.

2. Seleccionar el link y en el Panel de comportamientos elegir Abrir ventana del navegador.

3. En el cuadro de diálogo indicar: dirección url o página a abrir, ancho y alto de la ventana, y los atributos de la ventana (que barras del navegador quiere que sean visibles).

4. Al aceptar comprobar que en la columna Eventos del Panel de comportamiento, este indicado Onclick; para que al pulsar el enlace se abra la nueva ventana del navegador con las características indicadas.

Frontpage para principiantes - Manual completo

Página 14 de 16

Componentes Web 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 desea agregar un componente de creación al sitio, como una galería de fotografías o una barra de vínculos, no necesita 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 z

z

z

z

z

z

Efectos dinámicos Marquesina: Región de una página que muestra un mensaje de texto con desplazamiento horizontal.

Botón interactivo: explicado anteriormente.

Búsqueda en el web Web actual: inserta un formulario de búsqueda para buscar contenido en la web actual, el formulario de búsqueda devuelve una lista de hipervínculos a las páginas de su Web de FrontPage que contienen coincidencias con esas palabras.

Búsqueda de texto completo: inserta un formulario para buscar solamente texto.

Hojas de cálculo y gráficos Hoja de cálculo de Office: Para crear una hoja de cálculo para su Web, agregue un componente Hoja de cálculo de Microsoft Office a una página. Una vez hecho esto, puede modificar y establecer directamente las propiedades de la hoja de cálculo en la vista Página, aunque Microsoft Excel no esté instalado en su equipo.

Gráfico de Office: Para crear un gráfico en su Web, agregue un componente Gráfico de Microsoft Office a una página. Una vez hecho esto, puede modificar y establecer directamente las propiedades del gráfico en la vista Página, aunque Microsoft Excel no esté instalado en el equipo.

Tabla dinámica de Office: Una lista de Tabla dinámica de Microsoft Office es una tabla interactiva que muestra datos resumidos de una base de datos u otro origen. Para crear una lista de Tabla dinámica para su Web, agregue un componente Tabla dinámica de Office a una página. Una vez hecho esto, puede modificar y establecer directamente las propiedades de la Tabla dinámica de Office en la vista Página, aunque Microsoft Excel no esté instalado en el equipo.

Contador de visitas a la página Componente de FrontPage que hace un seguimiento del número de visitantes de un sitio del World Wide Web. Galería de fotografías Explicado anteriormente.

Contenido incluido Sustitución: muestra automáticamente el autor, la descripción, el último cambio o la información de la URL. Página: Componente de FrontPage que se reemplaza por el contenido de otra página del Web. Esto le permite actualizar partes de varias páginas en un único paso.

Página basada en la programación: Componente de FrontPage que se reemplaza con el contenido de un archivo del Web actual durante un período de tiempo especificado.

Cuando ha transcurrido ese período, deja de mostrarse el contenido del archivo. Esto

Frontpage para principiantes - Manual completo

Página 15 de 16

resulta útil para mostrar información de texto que tiene un tiempo de vida limitado.

Imagen basada en la programación: Componente de FrontPage que se reemplaza en la página por un gráfico durante un período de tiempo especificado. Cuando ha transcurrido ese período de tiempo, deja de mostrarse el gráfico.

Esto resulta útil para mostrar información que tiene un tiempo de vida limitado, como el anuncio de un nuevo producto o servicio. Titular de página: inserta un titular de página que pueda utilizar el tema de la página para crear un título gráfico o texto. z

z

z

z

Barras de vínculo Barra con vínculos personalizados: inserta una barra de hipervínculos que apuntan tanto a las páginas del sitio web propio como a vínculos externos. Abrirá un cuadro de diálogo para configurar los enlaces y el diseño. Se mostrará un botón independiente para cada link.

Barra con los vínculos anterior y siguiente: inserta una barra de hipervínculos que apuntan a una secuencia de páginas del sitio web. Abrirá un cuadro de diálogo para configurar los enlaces y el diseño. En la página solo se mostrarán los botones de anterior y siguiente.

Barra basada en la estructura de exploración: inserta una barra de vínculos o una barra de vínculos anterior o siguiente basada en la estructura de exploración del sitio web.

Tabla de contenido Para este sitio web: inserta una tabla de contenido (índice del sitio). Debe elegirse la página inicial, mostrar cada página una sola vez, mostrar páginas sin hipervínculos entrantes, actualizar automáticamente al agregar o al cambiar páginas existentes.

Basada en la categoría de la página: inserta una tabla de contenidos del sitio basado en las categorías elegidas.

Lista de los 10 mejores Páginas visitadas: muestra en un listado las 10 páginas más visitadas del sitio.

Dominios remitentes: muestra un listado con los 10 dominios que más remiten al sitio.

URLs remitentes: muestra un listado con las 10 url que más remiten al sitio.

Cadenas de búsqueda: muestra un listado con las 10 cadenas de búsqueda que los visitantes utilizan con mayor frecuencia en los motores de búsqueda para encontrar el sitio web.

Usuarios visitantes: muestra un listado de los 10 visitantes más frecuentes del sitio web.

Sistemas operativos: muestra un listado de los 10 sistemas operativos más populares utilizados para ver el sitio web.

Explorador: muestra un listado de los navegadores más populares utilizados para ver el sitio web.

Controles avanzados HTML: inserta contenido html, para agregar código a la vista diseño.

Subprograma Java: inserta un subprograma java, archivo de extensión class.

Complemento: inserta un complemento, por ejemplo una película de flash.

Campo de confirmación: en un formulario de confirmación, muestra la información de que ha entrado un visitante en el sitio.

Control Active X: inserta un control Active X. Abre un cuadro de diálogo y elegir el control Active X por ejemplo Control Calendar.

Película en formato Flash: explicado anteriormente.

Autores del manual: Hay que agradecer a diversas personas la dedicación prestada para la creación de este manual.

Frontpage para principiantes - Manual completo

Página 16 de 16

Sus nombres junto con el número de artículos redactados por cada uno son los siguientes: z

Gck http://www.tobcazamian.com/ (7 capítulos)

z

Sergio Tielli Docente de computación

http://usuarios.lycos.es/leonsinho (4 capítulos)

Todos los derechos de reproducción y difusión [http://www.desarrolloweb.com/copyright/] reservados a Guiarte Multimedia S.L. [http://www.guiartemultimedia.com/] Volver [http://www.desarrolloweb.com/manuales/35]