DISEÑO DE PAGINAS WEB by juan lopez

DISEﾃ前 DE PAGINAS WEB CON FRONTPAGE

1.-INTRODUCCION. CONCEPTOS BASICOS Diseñar paginas Web, pero realmente sabemos que es una “pagina Web”. Podríamos definirla así:

Página Web: Documento en formato HTML, que se halla en un servidor, que se encuentra conectado a la W.W.W.

No obstante esta definición nos lleva a tener que definir otros conceptos que están inmersos en ella: HTML (Hyper Text Markup Languaje): es el lenguaje de programación en el que están creadas todas las paginas Web

No es necesario saber HTML para poder diseñar paginas Web: para eso está FRONTPAGE (y otros similares)

Servidor: es un ordenador de gran potencia conectado a una red informática que ofrece una serie de servicios (alojamiento de paginas Web; correo electrónico, etc.) que pueden ser gratuitos o no.

W.W.W: son las siglas de World Wide Web (gran red mundial). En otras palabras cotidianas, lo que entendemos por Internet

Pero también lo que significa un “sitio Web” , como cuando decimos la Web de Audi, o la Web del instituto Bachiller Sabuco: Sitio Web (Website) : es el conjunto de todas las paginas enlazadas que hay en un mismo sitio. Abreviadamente se le denomina sólo Web.

2.-FRONTPAGE. UTILIDAD Aunque con HTML se pueden crear páginas web, es mejor utilizar una herramienta más potente que esté diseñada específicamente con ese objetivo. Es el caso de los editores web como FrontPage, que permite el diseño y edición de páginas webs sin necesidad de conocer un lenguaje de programación específico como HTML, ASP, PHP, JAVA, etc. FrontPage es un programa desarrollado y registrado por la compañía Microsoft, el cual te permite crear, editar, y manejar páginas para ser luego publicadas en el web. Las páginas web están basadas en los llamados hipertextos. Estos, al contrario de lo que ocurre con el contenido de un documento escrito, que para su total comprensión debe comenzarse a leer por el principio y llegar hasta el final, no necesitan que sigamos este procedimiento natural de lectura (lectura lineal), sino que establecen saltos (hipervínculos) de forma que cada vez que encontramos alguno de ellos podemos ir a otro sitio de la página si perder por ello compresión de lo que se está leyendo. FrontPage provee de las herramientas necesarias para hacer más sencillo y visual la elaboración de hipertextos en soporte web sin necesidad de escribir ni una línea de código. Hasta hace poco las páginas web había que crearlas escribiendo el código necesario en html, asp, php, etc. y comprobar el resultado en un navegador. Pero con el tiempo fueron apareciendo editores web del tipo “ wysiwyg” ( what you see is what you get), que significa que lo que se ve es lo que se obtiene. FrontPage , en cualquiera de sus versiones, provee de esta herramienta en un entorno de trabajo muy parecido a Word con una apariencia que recuerda bastante al servidor de correo Outlook. Es decir, FrontPage permite visualizar y trabajar directamente sobre los resultados finales de la web, manteniendo la posibilidad de trabajar con el código, opción necesaria cuando se trabajan con opciones más avanzadas en la creación de páginas web como, por ejemplo, javasscript o flash. En definitiva, FrontPage es una herramienta completa de desarrollo de proyectos web que nos será muy útil a la hora de elaborar una web temática o corporativa.

¿Qué podemos hacer con este programa? 9 9 9 9 9 9 9 9

Escribir y editar texto Añadir y editar imágenes Crear tablas Crear listados Crear enlaces Crear “Frames” Crear Formularios Publicar páginas en el Web 3

3.-PLANIFICACION DE UN SITIO WEB A continuación te indicamos unos consejos a la hora de empezar a diseñar un sitio web: • Primero establece el tema y los objetivos de tu website • Esto te permite dibujar la imagen que mejor representa las ideas que resultan del tema y los objetivos. • Mantén un escrito que ordene y estructure tu página. Esto facilitará el trabajo. • Recopila toda la información a utilizar • Recuerda respetar los derechos de autor, tanto en los escritos citados, trabajo intelectual de un compañero y en las ilustraciones presentadas. Es una buena opción. • Divide el contenido en asuntos o secciones • Cada uno de estos asuntos se convertirán en una página dentro de tu web. Elaboración: Algunos trucos: • • • • •

Elabora un diagrama de tu website en papel para que te sirva de guía (Site Map). Mantén en papel detalles de tu website como las cantidades de las páginas, su contenido, tipo de letra utilizada, colores, etc. Coloca una breve descripción de tu website. Destaca la información más relevante. No olvides desarrollar una barra de navegación. Esta debe ser manejable para toda persona que visite tu website.

¿Qué debes considerar en el momento de diseñar tu Website? • Proveer información relevante • Crear una Barra de Navegación en todas las páginas • Respetar y especificar las disposiciones de derecho de autor (copyright) tanto en el contenido escrito como en la utilización de láminas. Para las imágenes, unas veces es necesario pedir permiso al autor sobre su uso y seguir las instrucciones del mismo para permitir la publicación. • Incluir información de contacto • Facilitar la transferencia de la información: mantener el tamaño (file size) de las imágenes y las páginas lo más bajo posible (<30kb) • Actualizar la información constantemente • Proveer un listado de “FAQ” (Frequently Asked Questions) [Según el objetivo de tu página] 4

• Ten en cuenta cuál será el objetivo para crear la página y trabaja hacia ellos • Sobre Diseño:

Utiliza estilos de letra claros y sencillos (Arial, Courier, NewTimes Roman, Verdana) Si vas a utilizar una imagen de fondo (background) ésta no debe intervenir con el texto Cuida los colores de tu página, si usas colores claros para el fondo usa colores oscuros para las letras No debes hacer páginas demasiado largas, organiza la información distribuyéndola en varias páginas enlazadas No uses imágenes demasiado grandes que ocupen todo el espacio del monitor y/o que opaquen de alguna forma la información Se constante en términos de diseño en todas las páginas Esmérate en hacer la página principal (index). De esta depende que las personas se queden o no leyendo el resto de tus páginas.

3.1.-EL ROMPECABEZAS DE UNA WEB Imaginemos que tienes un rompecabezas que armar, pero que no se parece a ningún otro tipo de rompecabezas que hayas hecho antes. Tú decides el tamaño de las piezas, cómo encajan entre sí e incluso qué aspecto tiene la imagen final. Una página Web es igual que un rompecabezas así. Aunque hay varias maneras de afrontar el reto del diseño de una página Web, algunas disposiciones de elementos dan mejores resultados que otras. La herramienta de creación y administración de sitios Web de Microsoft FrontPage puede ayudarte a diseñar el sitio de tu propia pagina web así como de tu centro educativo, las páginas de su intranet o cualquier otra herramienta basada en Web.

3.2.-LAS PIEZAS DEL ROMPECABEZAS La mayoría de las páginas de su sitio caben en una sola plantilla de diseño. El rompecabezas del diseño suele incluir cinco piezas principales. Estos componentes son tan comunes que FrontPage posee características para trabajar con las piezas (bordes compartidos, páginas incluidas y barras de vínculos), así como las herramientas para ensamblar las piezas entre sí (tablas y marcos). A continuación se incluye un ejemplo de diseño común que funciona bien para muchos sitios. Puede verse tentado a ser más creativo y exclusivo, pero recuerde que su sitio normalmente sólo es parte de la sesión de un visitante. A menos que tenga un motivo más importante para crear un diseño muy inusual, sus visitantes le agradecerán la simplicidad. (Sugerencia: haga que sean los gráficos los que tengan el carácter más creativo y exclusivo, en lugar del diseño en sí.)

Figura 1: elementos de un diseño común de sitio Web 1. Identificador del sitio Todas las páginas deben informar a los visitantes de que se encuentran en su sitio. La página principal es particularmente importante en este sentido, así que puede que decida incluir el logotipo o el nombre de su centro educativo, o destacar cualquier otro gráfico. Con frecuencia, el identificador del sitio suele caber bien en un titular situado en la parte superior. Presta atención a la altura de esta área; si es demasiado alta, el contenido comenzará demasiado abajo en la pantalla.

2. Barra de exploración La barra de exploración ayuda a los visitantes a encontrar el contenido que buscan. Por tanto, la estructura de exploración debe determinarse básicamente mediante la jerarquía de información del sitio. Es de esperar que haya organizado lógicamente la información antes de intentar plasmarla visualmente. Una vez que conozca cuál es la estructura de exploración, podrá localizar el mejor lugar donde colocarla. Las posibilidades son básicamente las barras de exploración superior y laterales, o posiblemente ambas. Ventajas de una barra de exploración situada en la parte superior: Se ve con facilidad Deja libre todo el ancho de la pantalla para incluir el contenido Puede ir acompañada del identificador del sitio Ventajas de una barra de exploración en un lateral: Puede contener tantos elementos de exploración como sean necesarios Permite una mayor longitud para las descripciones de los elementos

Puede integrar varias capas de exploración a medida que los visitantes se introducen con más profundidad en el sitio Para los sitios de mayor tamaño puede ser necesario usar barras de exploración en la parte superior y en un lateral. Por ejemplo, el sitio de su distrito escolar puede poseer vínculos a los sitios de cada uno de los centros en la barra de exploración superior e información relativa al distrito en la barra lateral. 3. Contenido principal El área de contenido principal (el título de la página, los encabezados, el texto y las imágenes) es lo que los visitantes irán a ver. Asegúrese de reflexionar sobre esta área cuanto sea necesario, en lugar de ensamblar las demás áreas y dejar al contenido el espacio sobrante. Los dos aspectos fundamentales del contenido son la legibilidad y la flexibilidad. La legibilidad es óptima cuando el ancho de cualquier columna de contenido es de entre 100 y 600 píxeles. Básicamente, los visitantes no se sienten cómodos leyendo líneas demasiado anchas o demasiado estrechas. Por tanto, un área de contenido principal de entre 350 y 600 píxeles en total permite usar opciones de plantillas flexibles como una, dos o incluso tres columnas. 4. Contenido secundario En los sitios comerciales, el área de contenido secundario se suele utilizar para la publicidad. Por su parte los sitios de centros educativos utilizan con frecuencia estas áreas para anuncios, noticias o vínculos relacionados. Si su sitio va a contener mucha información, parece lógico reservar parte del espacio del diseño para ofrecer una mayor cantidad de contenido. No obstante, si su sitio no lo necesita, utilice ese espacio para el contenido principal. 5. Contenido sobre el contenido La información sobre el contenido de la página incluye la declaración de copyright, la fecha de última actualización, vínculos a declaraciones de seguridad/privacidad e información sobre la persona responsable del contenido. Esta información, aunque es necesaria, no será relevante para la mayoría de los visitantes. Un pequeño pie de página suele ser el mejor lugar donde incluirla. Para diferenciarla del resto del contenido, utilice un tamaño de fuente más reducido.

4.-CONFIGURACION DE PANTALLA Cuando se visita una pagina web, lo primero que nos suele llamar la atención es el entorno visual que nos muestra. Al igual que sucede al pintar un cuadro, debemos dominar la técnica y las herramientas que disponemos (que veremos más adelante) y tener una idea de lo que deseamos exponer y, en ello, las dimensiones del lienzo son fundamentales.

Tambien al diseñar paginas web es básico elegir un lienzo del tamaño adecuado, si bien esto traducido a nuestro lenguaje informatico diríamos que se corresponde con la resolución de la pantalla. Por tanto, en función de la configuración que seleccionemos, colocaremos las imágenes, botones, ect en una posición u otra de su pagina. Por tanto, debemos preguntarnos ¿qué resolución de pantalla es más aconsejable?. La respuesta es sencilla: dependerá de la resolución de pantalla que tengan las personas que visitan vuestra pagina en su ordenador. En la actualidad, la mayoría de la gente que accede a Internet tiene configurado su monitor a 800x600 pixeles (puntos en terminología informática) y a color verdadero (24 o 32 bits), si bien la resolución de 1024x768 cada vez se está popularizando más. No obstante, otra cosa que deberíamos indicar en nuestra pagina es la resolución optima de monitor en la primera pagina de entrada al sitio Web.

5.-CREACION DE UN SITIO WEB Una vez activado FrontPage, se abre la ventana de trabajo de la Figura 1 (versión 2003).

Est a mu estr a dife ren tes ele me nto sy her ra mie nta s para crear o importar páginas y sitios webs. De entre todos los elementos el Panel de tareas, que se encuentra a la derecha, nos permitirán abrir una nueva página, un sitio web de un página o elegir entre una serie de plantillas el diseño de nuestro sitio web.

Para seleccionar un sitio web de una página se procederá de la siguiente forma: a) En el apartado Nuevo sitio Web del Panel de tareas, seleccionar la poción Sitio web de una página … b) En la ventana que se abre (Figura 2) seleccionar, si no lo está, la pestaña General. c) Si se encuentra seleccionado el tipo Sitio Web de una página, pulsar sobre el botón Aceptar. d) Se muestra una pestaña denominada Sitio Web, dos carpetas denominadas _private e _images y la página Web inicial denominada index.htm (el nombre de esta página es necesario mantenerlo para que los navegadores de Internet la reconozcan como la página inicial de nuestro sitio web).

e) En el apartado Descripci贸n se muestra un comentario explicativo del tipo de sitio que se va a crear.

Proceso

Antes de comenzar a trabajar es imprescindible crear un sitio local mediante el cual indicaremos a FrontPage el lugar en el que se encuentran almacenados todos los archivos de un sitio concreto. Para trabajar de manera eficaz con FrontPage conviene definir siempre un sitio local para cada sitio Web que cree. Con el fin de que nuestro sitio web sea transportable a cualquier otra parte del disco duro o incluso a un servidor de internet, es preciso que todos los archivos y carpetas que forman parte 10

del mismo, se encuentren situados a partir de una carpeta a la que consideraremos como raíz de nuestro sitio local. El primer paso, por tanto, será crear esta carpeta raíz y situar a partir de la misma todos los archivos y carpetas que serán necesarios a la hora de crear nuestra página web. 1º.- Crea la carpeta Web Edison en la ubicación que estimes más oportuna, por ejemplo, en D:\. 2º.- Dentro de la carpeta anterior crea dos nuevas con los nombre Imágenes y Sonidos. 3º.- Pega en la carpeta Imágenes los siguientes archivos: Edison.gif, Fonografo.gif y Lampara.gif. 4º.- Pega en la carpeta Sonidos el archivo: La mañana.wav. 5º.- Inicia FrontPage.

aplicación

6º.- Abre el menú Archivo y en la línea Nuevo selecciona la opción Página o Web... 7º.- Surge en el lado derecho de la ventana la sección Nueva Página o Web. En el apartado Nuevo haz clic en la opción Sitio Web vacío. 8º.- Aparece la ventana Plantillas de sitio Web, en el que se nos ofrecen una serie de asistentes que nos permiten crear páginas web mediante plantillas. 9º.- Marca la opción Web vacío. 10º.- A continuación indicaremos la carpeta en la que se alojará nuestro sitio local. Haz clic en el botón Examinar... y busca la carpeta Web Edison. 11º.- Por último haz clic en el botón Aceptar para completar el proceso. Acabamos de indicar a FrontPage la carpeta a partir de la cual podrá encontrar todos los archivos que formen parte de nuestra página web. 12º.- Puedes comprobar como FrontPage ha creado por su cuenta algunas carpetas auxiliares en el nuevo sitio. Como observarás ha añadido varias carpetas, que a modo de curiosidad te indicamos que función desempeñan.

Carpeta _vti_cnf : almacena información relativa a cada archivo. 11

Carpeta _vti_pvt: almacena la configuración del sitio Web Carpeta _private: almacena los resultados de los formularios Carpeta images: almacena o puede almacenar imágenes y videos.

Por seguridad las dos primeras carpetas están ocultas.

6.-DISEÑO DE LA PAGINA PRINCIPAL Una vez que hemos creado nuestro sitio local, el siguiente paso es diseñar cada una de las páginas que formarán parte de nuestro sitio web. En este caso crearemos una serie de documentos web que muestren datos interesantes de la vida y los inventos de Thomas Alva Edison. Comenzaremos diseñando la página principal. 1º.- El primer es abrir el sitio que acabamos de crear. Para ello abre el menú Archivo y en la línea Webs recientes... elige la línea D:\Web Edison. Se recomienda llevar a cabo este paso cada vez que se inicie FrontPage. 2º.- A continuación abre el menú Archivo y en la línea Nuevo selecciona la opción Página o Web... 3º.- Surge en el lado derecho de la ventana la sección Nueva Página o Web. En el apartado Nuevo haz clic en la opción Página en blanco. 4º.- Aparece en pantalla una página blanco con el nombre pagina_nueva_1.htm, en la que comenzaremos a trabajar. 5º.- El siguiente paso es guardar esta página en la carpeta raíz con el nombre adecuado. Abre el menú Archivo y elige la opción Guardar como... 6º.- En el apartado Nombre de archivo: aparece el valor: index.htm. En este caso lo cambiaremos por el siguiente nombre: principal.htm. 7º.- Asegúrate que se encuentre seleccionada la carpeta Web Edison en el apartado Guardar en: y haz clic en el botón Guardar.

3.1.- Propiedades de la página Antes de comenzar a insertar elementos en nuestra página podemos configurar algunas propiedades que afectan a toda ella, tales como el título, el color de fondo, el margen, etc. 1º.- Abre el menú Archivo y elige la opción Propiedades...

2º.- Estando visible la solapa General, establecemos en primer lugar el nombre de la página que aparecerá en el navegador. En el apartado Título escribe el texto: Thomas Alva Edison. 3º.A continuación indicaremos el archivo de sonido que debe reproducir el navegador cuando se abra nuestra página. 4º.- Haz clic en el botón Examinar... del apartado Sonido de fondo. 5º.- Selecciona el archivo La mañana.wav que podrás encontrar en la carpeta Sonidos. 6º.- Ahora muestra la solapa Fondo y mediante la opción Más colores establece como color de fondo el nivel más claro de amarillo que encuentres. 7º.- Observa como en esta misma solapa nos ofrece la posibilidad de establecer una imagen de fondo para nuestra página. 8º.- El último paso será establecer un margen izquierdo de 110 pixeles, para ello haz clic en la solapa Márgenes. 9º.- Activa la opción Especificar margen izquierdo y establece un valor de 110 píxeles. 10º.- Confirma todos los cambios efectuados haciendo clic en el botón Aceptar.

3.3.- Creación de un texto en marquesina Se trata de un texto especial que se desplaza dentro de un rectángulo, creando un efecto que nos puede ayudar a resaltar textos o frases que consideramos importantes. En nuestro caso convertiremos el texto que da título a la página en una marquesina. 1º.- Selecciona en la zona de trabajo el nombre de nuestro inventor: Thomas Alva Edison. 2º.- Abre el menú Insertar y elige la opción Componente Web... 3º.- Aparece la ventana Insertar componente Web. 4º.- Estando seleccionada la sección Efectos dinámicos activa la opción Marquesina. 5º.- Haz clic en el botón Finalizar. 6º.- Ahora surge una ventana titulada Propiedades de marquesina. 7º.- Establece los siguientes parámetros: • Dirección: Izquierda • Velocidad: Retardo 90 y Cantidad 6 • Comportamiento: Deslizar 8º.- En este caso indicaremos que el texto debe tener un único desplazamiento dentro de la marquesina. Para ello desactiva la opción Continuamente del apartado Repetir, e indica que el efecto se repita 1 veces. 9º.- Por último haz clic en el botón Aceptar para confirmar todos los cambios.

3.4.- Lanzar nuestra página al navegador Hasta ahora hemos venido trabajando en la fase de diseño de nuestra página. Ya es hora de comprobar el resultado de nuestro trabajo lanzando la página a un navegador. 1º.- Abre el menú Archivo y haz clic en la línea Vista previa en el explorador... 2º.- Haz clic en el botón Vista previa de la ventana de confirmación. 3º.- Si no hemos guardado los cambios antes de lanzar la página, FrontPage nos pregunta si queremos guardar nuestro trabajo, en este caso contestaremos Sí. También es posible comprobar el resultado de nuestro diseño dentro de la misma aplicación FrontPage, mediante la opción Vista previa que aparece en la parte inferior izquierda de la zona de trabajo.

4.- Creación de tablas Las tablas constituyen una potente herramienta para ordenar los elementos y la información que son incluidos en las páginas web. Empleando tablas, a continuación crearemos una página secundaria dentro de nuestro sitio, en la que ofreceremos unos datos básicos acerca de uno de los inventos de Thomas Alva Edison, el fonógrafo. 1º.- El primer paso es abrir una página en blanco para comenzar a crear un nuevo documento web. Abre el menú Archivo y en la línea Nuevo elige la opción Pagina o Web... 2º.- Surge en la parte derecha de la pantalla la sección Nueva página o Web. En el apartado Nuevo haz clic sobre la opción Página en blanco. 3º.- Aparece en pantalla una página blanco con el nombre pagina_nueva_1.htm, en la que comenzaremos a trabajar. 4º.- A continuación guarda la página con el nombre fonografo.htm en la carpeta raíz de nuestro sitio: D:\Web Edison. 5º.- Sigue los pasos del apartado 3.1.- para establecer las propiedades de la página con los siguientes valores: Color de fondo: amarillo claro Título de la página: Fonógrafo de Edison 6º.- El siguiente paso es insertar una tabla en el documento. Abre el menú Tabla y en la línea Insertar elige la opción Tabla. 7º.- Aparece la ventana Insertar tabla en la que estableceremos los siguientes valores: 16

Filas: 2 Columnas: 2 Alineación: Centrar Especificar ancho debe estar activada con un valor de 500 píxeles. 8º.- Una vez establecidos los valores anteriores confirma los cambios haciendo clic en el botón Aceptar. Acabamos de incluir una tabla en la zona de trabajo. 9º.- A continuación estableceremos algunas características de las celdas. Selecciona las cuatro celdas de la tabla usando el ratón. 10º.- Abre el menú Tabla y en la línea Propiedades de tabla elige la opción Celda. 11º.- Activa el apartado Especificar ancho: 12º.- Marca la opción En porcentaje y establece el valor 50, para indicar que deseamos que la celda tenga un ancho que se ajuste al 50% del ancho total de la tabla. 13º.- Por último haz clic en el botón Aceptar para validar los parámetros establecidos. 14º.- A continuación combinaremos las dos celdas de la fila 1 para poder incluir en la misma un título. 15º.- Utiliza el ratón para seleccionar dicho par de celdas. Abre el menú Tabla y haz clic sobre la opción Combinar Celdas. Podrás observar como ahora la fila nº 1 está compuesta por una única celda que ocupa el espacio de las dos anteriores. 16º.- Ahora debemos dotar de contenido a cada una de las celdas de la tabla, debido a las muchas similitudes entre Word y FrontPage, los pasos a seguir son prácticamente los mismos. 17º.Recuerda tus conocimientos de Word y completa la tabla hasta obtener un resultado parecido al mostrado en la siguientes imagen.

18º.- Busca en internet información acerca del resto de inventos de Edison y construye un conjunto de páginas simulares a la creada para el fonógrafo.

5.- Creación de marcos Las páginas Web que usan marcos pueden ser extremadamente versátiles, ya que permiten mantener fijas partes del sitio web, como un logotipo o las barras de navegación, mientras permiten que en otras partes si cambien el contenido. Una página basada en marcos está dividida en varias ventanas que posee a su vez ventanas en su interior. Aunque una página basada en marcos actúa como una sola página web, cada marco contiene un solo documento HTML, que puede incluir contenidos completamente independientes y barras de desplazamientos independientes. Lo que mantiene unidos estos documentos se llama documento de definición de conjunto de marcos o página de conjunto de marcos. En nuestro caso crearemos una página principal que contendrá tres marcos en cada uno de los cuales alojaremos un documento web, de manera que contaremos con tres zonas bien diferenciadas. En la parte superior aparecerá un encabezado con el nombre de nuestro inventor. En la parte izquierda incluiremos un marco en el que aparecerá de modo permanente un índice con todos los enlaces de nuestra web. El tercer marco estará reservado a mostrar cada una de las páginas web que componen nuestro sitio. De manera que la distribución de marcos y documentos web será la siguiente:

5.1.- Creación de las páginas auxiliares Antes de comenzar a construir la página principal de nuestro sitio basada en marcos, debemos diseñar las páginas auxiliares que deben ir alojadas en cada uno de esos marcos. En nuestro caso necesitaremos inicialmente tres documentos: encabezado.htm, indice.htm y principal.htm. Veamos los pasos que hay que dar para llegar a conseguirlos.

1º.- En primer lugar vamos a modificar el archivo creado en los pasos anteriores, al que hemos dado el nombre de principal.htm. 2º.- Abre dicho archivo en la aplicación FrontPage. 3º.- Eliminaremos la marquesina creada en pasos anteriores. Haz clic con el ratón en el texto Thomas Alva Edison para seleccionarla. 4º.- Abre el menú Edición y elige la opción Cortar, para hacer desaparecer la marquesina del documento principal. 5º.- Cierra este documento guardando los cambios. 6º.- Sitúa a continuación una página en blanco en la zona de trabajo. Abre el menú Archivo, elige la opción Nuevo y haz clic sobre la línea Página o Web... 7º.- Surge en la parte derecha de la pantalla la sección Nueva página o Web. En el apartado Nuevo haz clic sobre la opción Página en blanco. 8º.- Aparece en pantalla una página blanco con el nombre pagina_nueva_1.htm, en la que comenzaremos a trabajar. 9º.- Ahora pegaremos la marquesina cortada del documento principal. Abre el menú Edición y haz clic sobre la opción Pegar.

10º.- Sigue los pasos del apartado 3.1.- para establecer las propiedades de la página con los siguientes valores: Color de fondo: amarillo claro Título de la página: Encabezado 11º.- Guarda este archivo en la carpeta Web Edison con el nombre encabezado.htm. 12º.- Por último crea un nuevo documento con el nombre indice.htm con los siguientes elementos y apariencia:

5.2.- Diseño de la página principal con marcos Una vez que ya contamos con las páginas auxiliares, llega el turno de diseñar la página principal que alojará en cada uno de sus marcos, los documentos creados anteriormente. 1º.- Abre el menú Archivo y en la línea Nuevo elige la opción Página o Web... 2º.- Surge en el lado derecho de la pantalla, la sección Nueva Página o Web. En el apartado Nuevo a partir de plantilla, haz clic sobre la opción Plantillas de página... 3º.- Aparece la ventana Plantillas de página. Muestra en la misma la solapa Páginas de marcos. 4º.- FrontPage ofrece varios tipos de estructuras basadas en marcos. En nuestro caso nos interesa la opción Titular y contenido, ya que permite crear un marco titular en la parte suprior, con una tabla de contenido y un marco principal. 5º.- Selecciona la estructura que hemos indicado y haz clic en el botón Aceptar. 6º.- FrotnPage nos ofrece una página nueva en blanco en la que podemos observar tres marcos diferentes. Únicamente falta, asignar el documento web a cada uno de dichos marcos. 7º.- Haz clic en el botón Establecer página principal... situado en el marco superior. 8º.- Aparece una ventana que nos permite buscar el documento web que será alojado en dicho marco. Busca el archivo encabezado.htm haz clic en el botón Aceptar. 9º.- Acabamos de situar el encabezamiento o titular de nuestra página en el marco superior. Usa el ratón para mover el borde del marco y ajustar el tamaño del mismo las dimensiones del texto. 10º.- Repite los pasos anteriores para situar en el marco izquierdo el archivo indice.htm y en el marco principal el documento principal.htm 20

11º.- Adapta el tamaño de los marcos para acomodarlos a las dimensiones de cada documento. 12º.- Guardo el archivo de marcos en la carpeta Web Edison con el nombre index.htm. El marco izquierdo junto con el documento indice.htm actúan de tabla de contenidos, es decir, siempre estará presente y sus elementos contarán con hipervínculos a cada una de las páginas que serán presentadas en el marco principal. Veamos como se realizan dichos hipervínculos. 1º.- Selecciona con el ratón la palabra Fonógrafo que se encuentra en el marco izquierdo.

2º.- Abre el menú Insertar y elige la opción Hipervínculo... 3º.- En la ventana, busca y seleccionar el archivo fonografo.htm. 4º.- A continuación haz clic en el botón Marco de destino... para seleccionar el marco donde debe ser mostrada la página fonografo.htm 5º.- En el apartado Página de marcos actual haz clic sobre el marco principal. 6º.- Por último haz clic en el botón Aceptar. 7º.- Volvemos a la ventana Insertar hipervínculo. Confirma los cambios realizados mediante el botón Aceptar. 8º.- Repite los pasos anteriores para enlazar la palabra Principal del marzo izquierdo con el archivo principal.htm. Recuerda seleccionar el marco principal como destino.

9º.- Guarda el archivo de marcos con el nombre index.htm en la carpeta Web Edison. Comprueba el funcionamiento de nuestra pagina con marcos, lanzando el documento recién creado en un navegador.

6.- Asignar un tema Con FrontPage es posible cambiar el aspecto general de nuestra página web con un único paso. Para ello únicamente deberemos asignar uno de los Temas que ya vienen predefinidos en la aplicación. 1º.- Abre el archivo index.htm que hemos creado en el apartado anterior. 2º.- Cambiaremos el aspecto de todas las páginas que componen nuestro sitio web. Abre el menú Formato y selecciona la opción Tema…

3º.- Aparece la ventana Temas que nos permitirá indicar la plantilla que vamos a utilizar. 4º.- En el apartado Aplicar el tema: selecciona la opción Todas la páginas. 5º.- FrontPage nos ofrece varios temas predefinidas para aplicar a nuestra página web. Selecciona el Tema Arenisca y por último haz clic en el botón Aceptar.

6º.- A continuación FrontPage nos avisa que al aplicar un tema a todo el sitio Web se reemplazarán los formatos que hasta ahora y de una manera “manual”, hemos asignado en todos los documentos que forman parte de nuestro sitio. 7º.- Haz clic en el botón Sí y comprueba como la nueva plantilla ha sido asignada a todos los documentos de nuestra página Web. 8º.- Si no te gusta el tema seleccionado puedes repetir los pasos anteriores para asignar otra plantilla que sea más de tu agrado.