Universidad de Guadalajara Centro Universitario de Ciencias Econmico Administrativas Informtica bsica

MANUAL FRONTPAGE

Diego Muoz Prez1

INDICEIndic.....2 Como crear un sitio web....3 Como crear una pgina dentro de un sitio web.3 Como aumentar de tamao el texto...4 Como mover el texto.4 Como insertar una imagen.5 Como mover una imagen...5 Como hacer ms paquea una imagen6 Como aplicar efectos DHTML a la imagen...7 Como colocar regla y cuadricula.......7 Como Poner fondo a la pagina..8 Donde visualizar el cdigo HTML8 Donde visualizar diseo y vista previa..8 Donde visualizar la pgina web.8 Guardando la pagina web......8 Marcos.....10 Como crear botones en el hipervnculo...12 Como colocar un botn animado como hipervnculo..12 Como crear una tabla...13 Propiedades de la celda....13 Propiedades de la tabla14 Combinar y dividir celdas....14 Insertar una lnea horizontal14 Convertir texto en tablas y tablas en texto...15 Transiciones de pagina....15 Galeras de imgenes...16 Formato tema...17 Formato capa...18 Marco flotante.18 Insertar video...19 Visualizar la pagina web..19 Como repetir el video al pasar el mouse..20 Contador de Visitas.20

2

Como crear un sitio web.Lo primero que aremos ser crear un directorio en el disco duro para guardar nuestro sitio web. Primeramente abra que abrir FrontPage y en la pestaa crear un sitio web elegimos la opcin Sitio Web.

En la ventana que se abri seleccionamos la opcin Sitio Web de una pgina Y en este espacio elegiremos la ubicacin de nuestro sitio, preferentemente lo guardaremos en C:\. Y le pondremos nuestro nombre. Ya solamente damos click en el botn Aceptar De esta forma tendremos ya nuestro sitio web

Como crear una pgina dentro de un sitio web.Para crear una pgina dentro de nuestro sitio en la pestaa Crear pagina normal nueva seleccionamos la opcin pagina. Seleccionamos en la ventana que se abri la opcin pgina normal y damos Aceptar.

3

Ahora tenemos ya nuestra pgina aqu podemos insertar efectos, texto, video tablas etc., comencemos insertando un texto con efecto.

Como modificar las propiedades del texto.El FrontPage posee una barra de herramientas para modificar el texto que coloquemos al igual que en Word. Aqu podemos modificar tipo de letra, texto en negritas, letra cursiva, subrayado, tamao, color etc.

Como desplazar el texto.Para poner efectos sobre el texto que coloquemos ya sea desplazar deslizar o alternar seleccionaremos en texto Y en la opcin de la barra de herramientas insertar Elegiremos la herramienta Componente web.

En la ventana que apareci seleccionamos la opcin: efectos dinmicos. Despus la opcin marquesina. Y por ultimo Finalizar. damos click en

4

Se abrir una ventana para modificar las preferencias del efecto que tendr el texto. La opcin direccin es para la orientacin del movimiento del texto. Podemos modificar tambin la velocidad con la que mueve. Y el efecto en especfico que deseamos ya sea desplazar deslizar o alternar.

Insertar una imagen.Para insertar una imagen y colocarla en nuestra pgina iremos al men insertar de la barra de herramientas y seleccionaremos la opcin imagen y despus desde archivo. En la ventana que apareci buscaremos y seleccionaremos la imagen que queramos colocar.Nota: no solo es posible insertar imgenes estticas tambin se pueden seleccionar imgenes animadas normalmente conocidos como gifs animados, el proceso es exactamente el mismo solo ay que conseguir los gifs animados de internet o algn otro medio.

Moviendo la imagen.FrontPage no permite mover la imagen libremente solamente seleccionndola para poder moverla hay que seleccionarla y despus dar click en la opcin de la barra de herramientas llamada posicin absoluta.

5

En algunos casos no se mostrara la barra de herramientas donde se encuentra esta opcin para ver esta barra de herramientas tendremos que hacer o siguiente. En el men ver Seleccionamos barras de herramientas (Aqu se encuentra la opcin para ver todas las barras de herramientas que tien e FrontPage). Y despus imagen. Y Arrastramos la barra que aparece a la barra de herramientas para tener la disponible. Una vez seleccionada la opcin posicin absoluta y seleccionar nuevamente la imagen aparecer un contorno azul alrededor de la imagen. Pasamos el puntero sobre el contorno y cuando aparezca una cruz damos click y arrastramos la imagen a donde la queramos mover

Como hacer cambiar el tamao de la imagen.Hacer esto es bastante fcil podemos pasar el puntero sobre los puntos del contorno y al aparecer una flecha de dos direcciones damos click y arrastramos a como queramos mover el tamao de nuestra imagen. Esto se puede hacer tambin antes de seleccionar la opcin posicin absoluta solo seleccionamos la imagen y pasamos el mouse sobre alguno de los puntos y hacemos lo mismo.

6

Aplicar efectos DHTML en la imagenPara poder agregarle algn efecto a nuestra imagen lo que aremos ser primero traer la barra de herramientas Efectos DHTML. En el men insertar elegimos barras de herramientas y seleccionamos Efectos DHTML. Y al igual que como lo hicimos con la barra imagen la arrastramos a la barra de herramientas.

1. Elegimos en la barra que acabamos de traer, en opcin Elegir evento pasar el mouse.

2. En la opcin que se abri a lado derecho seleccionamos en elegir efecto Intercambiar imgenes.

3. Y ya por ultimo en la siguiente opcin elegir imagen.

Y ya solamente elegimos la imagen que queremos intercambiar al pasar el mouse.

Regla y cuadricula.Para poder tener la imagen bien orientada en la pagina tenemos la opcin Regla y la opcin cuadricula La podemos colocar en nuestra pgina en el men ver, Regla y cuadricula y palomeamos la opcin7

mostrar regla cuadricula.

y

mostrar

Fondo.Para colocar el fondo de la pgina web iremos al men formato y despus a la opcin fondo En la ventana que se abre podemos elegir entre poner un color seleccionado la casilla colores el que queramos. O una imagen para esto seleccionamos la casilla imagen de fono y despus examinar para buscar la imagen que queramos colocar.

Visualizaciones de la pgina.FrontPage nos puede mostrar la pagina de distintas maneras ya se el diseo, oprimiendo el botn diseo de la barra de herramientas inferior que es donde normalmente trabajamos nuestra pgina. El cdigo HTML oprimiendo el botn cdigo de la misma pgina. Html es el lenguaje en el que se programa la pgina web. Y la vista Previa en botn vista previa. La vista previa en el aspecto que tendr nuestra pgina web cuando sea abierta por un browser o explorador de internet.

Guardado una pgina web en FrontPage

Para guardar la pagina web que creamos no dirigiremos al men archivo una vez hay seleccionaremos la opcin guardar.8

En la ventana que aparece escribimos el nombre que va a llevar nuestra pgina y damos click en guardar Aparecer despus una segunda ventana que nos pregunta si deseamos guardar los archivo incrustados en la pagina (imgenes, fondo etc.) le damos aceptar y ya tenemos guardada nuestra pgina.

Marcos.Ahora lo que aremos ser crear una pgina de marcos. En el men nueva pgina seleccionamos la opcin pgina Despus en la ventana que apareci elegimos la opcin pginas de marcos y despus dependiendo del diseo que queramos elegimos la pgina de marcos

9

Por ejemplo en el caso de elegir jerarqua anidada de abrir un pgina como esta. La mayora de las pginas de marcos mostrara una forma similar variando nicamente la colocacin de los marcos. En estas pagina tenemos dos opciones para editarlas la primera es el boto nueva pgina. Aqu al igual podemos hacer exactamente lo mismo que hicimos con la pgina del sitio. La otra opcin es establecer pagina inicial en la cual podernos colocar una pgina previamente elaborada.

Por ejemplo en el marco superior podemos colocar un banner que hayamos hecho o bajado de internet. En el marco central podemos colocar una pgina que ya hayamos hecho. Y en el marco de la derecha podemos colocar un men de navegacin o cualquier otra cosa que se nos ocurra.

10

Guardando la Pgina de Marcos.Cuando queramos guardar la pgina de marcos nos va pedir que guardemos por separado cada marco y las imgenes para hacerlo primeramente le pones el nombre que queramos que lleva cada marco y damos aceptar en la pagina que siguiente nos preguntara que si queremos guardar las imgenes o cualquier elemento que hayamos colocado le damos acepar y as sucesivamente.

Es conveniente estar guardando la paginas cada vez que gamos un cambo para sabe cuando ay que guardar podemos guiarnos en el asterisco que aparece en la pestaa de la ventana eso indica que la pagina no est guardada.

11

Hipervnculos.Para crear un hipervnculo lo que aremos seleccionar un objeto (una imagen, botn animado que hayamos bajado de internet o algn texto) y presionamos el botn derecho del mouse, en el men que se abre seleccionamos hipervnculo, despus en la ventana que apareci seleccionaremos la direccin del hipervnculo y hacemos clik en marco destino y finalmente elegimos el marco a donde queramos que se coloque la pagina a la que llamamos.

Botn interactivo. Para agregar un botn interactivo en el men Insertar seleccionamos la opcin Botn interactivo. En la ventana que aparece podemos elegir el tipo de botn (1) el texto que tendr el botn (2) y el destino del hipervnculo (3). 1 2 3

En la pestaa Fuente podemos cambiar el tipo tamao y color de la letra. Y en el menu imagen es para cambiar el tama

Para elegir el destino lo hacemos de la misma manera12

que con el texto o la imagen elegimos examinar seleccionamos la pagina que queramos llamar y el marco donde se va a colocar. Para el botn de regreso seleccionaremos el objeto que queramos usar como botn y le damos click derecho en y despus hipervnculo en el caso del botn interactivo a la opcin examinar elegimos en este caso como va a ser de regreso la pagina de marcos que creamos, y en la ventana marco destino seleccionamos la opcin Toda la pgina.

Tablas.Pare crear una tabla seleccionaremos en la herramienta insertar tabla las dimensiones (celdas y filas) que queramos que tenga la tabla.

A la tabla que apareci podemos cambiarle el tamao y moverla como a cualquier otro objeto. Y las propiedades la podemos cambiar al seleccionar todo la tabla o alguna de las celdas solamente.

Propiedades de la celda.Damos click derecho sobre la celda y elegimos propiedades de la celda se abre una ventana como esta. Aqu podemos modifica la alineacin, el numero de filas, el tamao, el color de los bordes o utilizar una imagen o un color de fondo para la celda. Tambin podemos agregar texto o insertar algn objeto en la imagen solamente damos click izquierdo13

sobre la celda y el procedimiento es como en una pgina en blanco.

Propiedades de la tabla.En cambio seleccionamos la tabla completa y damos click en propiedades de la tabla aparecer una ventana como esta. Aqu podemos hacer lo mismo pero los cambios hechos aqu afectaran a toda la tabla. Adems de que podemos colocar mrgenes modificar espaciados. Y Colorear bordes y mrgenes.

Combinar y dividir celdas.Al seleccionar la celda y dar click derecho sobre ellas aparecer una opcin lada dividir celdas y, o combinar celdas.

La opcin dividir celdas sirve para agregar divisiones dentro de la misma. Podemos ya sea dividir la celda en columnas (1) o en filas (2) y el nmero de Filas o columnas que queramos. 1 2 La opcin combinar celdas es precisamente para lo contrario, cuando hayamos dividido la celda la opcin combinar celdas la volver a devolver a como estaba, es decir combinara las celdas o columnas que hayamos creado en una.

Insertar una lnea horizontal.Va haber ocasiones en las que nuestra pgina quedara muy saturada o tendr varios temas, en estos casos se puede utilizar la opcin Lnea horizontal que como su nombre lo dice es solamente una lnea horizontal que se coloca en la pgina y a la que podemos colocar donde queramos.14

Para colocarla basta con ir al men insertar y elegir lnea horizontal.

Convertir texto en tabla y tabla en texto.Para esto podemos copiamos un texto de internet en una pgina y elegimos la opcin mantener solo texto. Seleccionamos el texto, vamos al men Tabla, convertir y despus convertir texto en tabla

Y en el recuadro que aparece elegimos la forma en la que se quiera que divida el texto para pasarlo a una tabla.

Para convertir el texto en tabal el proceso es bsicamente el mismo seleccionamos la tabla vamos a la opcin tabla, convertir pero en esta ocasin elegimos la opcin convertir tabla en texto.

Transicin de pgina.Esta opcin sirve para colocar un efecto cuando cambiamos de pgina presionando un hipervnculo, para establecerlo vamos al men formato y despus transicin de pagina Y en la ventana que aperece podemo elegir el efecto de transicin (1), el evento (2) y la duracin del efecto (3)

2

3

1

15

Galeras de imgenes.Para agregar una galera de imgenes en nuestra pgina web abrimos una nueva pgina (normal o de marcos depende de cmo queramos que se vea nuestra pgina), en el men insertar componente web que ya vimos anteriormente elegimos la opcin galera Fotogrfica. Tenemos cuatro modos de presentacin de imgenes, Horizontal, Vertical, Colaje, o diapositivas, se elegir el que se prefiera y se abrir una ventana como esta

Ene le botn agregar podemos buscar las imgenes que queramos en nuestra presentacin Tambin podemos colocar un titulo para la imagen. Y una descripcin a la misma.

En el botn Modificar podemos cambiar el tamao y la orientacin de la imagen.

El botn quitar es para quitar as imgenes que no queramos colocar o que hayamos agregado por error.16

Esta ventana tiene otro botn llamado diseo que es para cambiar el modo de presentacin entre horizontal, vertical, colaje o diapositivas. La opcin Horizontal las imgenes se muestra en filas. En la opcin vertical la imgenes se organizan en columnas. En la opcin colaje las imgenes se muestran dispersas. Y en la opcin de diapositivas se muestra una tira con miniaturas y la imagen seleccionada en tamao normal en el centro de la pgina.

Formato tema.EL formato Tema nos sirve para darle una apariencia generalizada y preelaborada a nuestra pgina web, para agregar un tema a una pgina vamos al men formato y despus a Tema se habra un men a la derecha de nuestra pgina con los diversos temas disponibles.

17

Formato CapaEl formato capa sirve para agregar un capa sobre el fondo o la pagina dentro de la cual podemos colocar texto o una imagen y podemos modificar ms fcilmente. Para usarla iremos a la barra de herramienta a la opcin agregar capa o a men Formato en la misma opcin.

Marco Flotante.La opcin de marco flotante sirve para poner un marco dentro de la pagina no importa que ya sea una pgina de marcos y el cual puede ser modificado de la mima manera que un marco normal. Le podemos asignar una pgina o crear una nueva y podemos moverlo o hacerlo mas gran como si se tratara de una imagen o cualquier otro objeto. Para agregar un marco vamos al men inserta y seleccionamos la opcin marco flotante.

18

Insertar un Video.Para insertar un video ya sea una magina normal o de marcos iremos al men insertar, imagen y video. Aparecer una imagen en miniatuara la cual podemos agrandar o mover con el boto posicin absoluta

Visualizacin de la pgina.Ahora bien para poder ver la pagina con el video o para que la pagina responda una a un hipervnculo no basta con la opcin vista previa del FrontPage para poder ver la pagina como se vera en un explorador hay que guardar primeramente los cambio que hayamos hecho y presionar el botn F12 de nuestro teclado.

Normalmente aparecer una advertencia bloqueando el contenido de la pgina, damos click sobre el aviso y seleccionamos permitir contenido bloqueado.

19

Repetir el video al pasar el mouse.Para hacer que se inicie o se repita un video al pasar el mouse lo que aremos es seleccionar el video, dar click derecho y seleccin propiedades de la imagen. En la ventana de propiedades y a la pestaa video y elegir en iniciar la opcin pasar el mouse

Contador de visitas.Para agregar un contador de visitas a la pgina web iremos al men insertar, componente web, y en la ventana que aparece elegimos las preferencias del contador.

20