:: Cmo Construir Pginas Web utilizando el programa FrontPage ::

[Aplica a versiones 2003, XP, Nivel Bsico] Esta gua pretende ser un instrumento de ayuda en la elaboracin de tus pginas web. Encontrars instrucciones elementales enfocadas en el aspecto tcnico del programa. Trabajaremos sobre una estructura sencilla intentando en todo momento que tengas control del diseo y programacin de tus pginas. Tabla de Contenido: Introduccin Qu puedes hacer con FrontPage? Cmo planificar un WebSite? Qu debes considerar al momento de disear tu website? Inicio Accesando FrontPage Crear una carpeta para tu website Escoger un tema Crear un borde Hacer tablas Crear la pgina inicial Desarollo Cmo editar texto? Cmo aadir imgenes? Cmo editar imgenes? Creando la barra de navegacin Cmo crear enlaces? Crear una tabla Editar la tabla Guardando la pgina web 3 3 6 7 8 9 9 10 10 13 16 16 17 1 1 2 Pgina

Introduccin
FrontPage es un programa desarrollado y registrado por la compaa Microsoft, el cual te permite crear, editar, y manejar pginas para ser luego publicadas en el web.

Qu puedes hacer con FrontPage?

Escribir y editar texto Aadir y editar imgenes Crear tablas Crear listados Crear enlaces Crear Frames Crear Formularios Publicar pginas en el Web

Cmo planificar un Website?

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. Manten un escrito que ordene y estructure tu pgina. Esto facilitar el trabajo.

Recopila toda la informacin a utilizar

Recuerda respetar los derechos de autor, tanto en los escritos citados, trabajo intelectual de un compaero y en las ilustraciones presentadas. Es una buena opcin.

Divide el contenido en asuntos o secciones

Cada uno de estos asuntos se convertirn en una pgina dentro de tu web.

Elaboracin: Algunos trucos: Elabora un diagrama de tu website en papel para que te sirva de gua (Site Map). Manten en papel detalles de tu website como las cantidades de las pginas, su contenido, tipo de letra utilizada, colores, etc. Coloca una breve descripcin de tu website. Destaca la informacin ms relevante. No olvides desarrollar una barra de navegacin. Esta debe ser manejable para toda persona que visite tu website.

Qu debes considerar en el momento de disear tu Website?

Proveer informacin relevante Crear una Barra de Navegacin en todas las pginas Respetar y especificar las disposiciones de derecho de autor (copyright) tanto en el contenido escrito como en la utilizacin de lminas. Para las lminsa, unas veces es necesario pedir permiso al autor sobre su uso y seguir las instrucciones del mismo para permitir la publicacin. Incluir informacin de contacto Facilitar la transferencia de la informacin: mantener el tamao (file size) de las imgenes y las pginas lo ms bajo posible (<30kb) Actualizar la informacin constantemente Proveer un listado de FAQ (Frequently Asked Questions) [Segn el objetivo de tu pgina] Ten en cuenta cul ser el objetivo para crear la pgina y trabaja hacia ellos Sobre Diseo: Utiliza estilos de letra claros y sencillos (Arial, Courier, NewTimes Roman) Si vas a utilizar una imagen de fondo (background) sta no debe intervenir con el texto Cuida los colores de tu pgina, si usas colores claros para el fondo usa colores oscuros para las letras No debes hacer pginas demasiado largas, organiza la informacin distribuyndola en varias pginas enlazadas No uses imgenes demasiado grandes que ocupen todo el espacio del monitor y/o que opaquen de alguna forma la informacin Se constante en trminos de diseo en todas las pginas Esmrate en hacer la pgina principal (index). De esta depende que las personas se queden o no leyendo el resto de tus pginas.

Inicio
Accesando FrontPage
Presiona el icono que representa el programa en la pantalla de tu computadora o bscalo en la opcin de Start/Programs/Microsorft Front Page Una vez entras al programa aparece una pgina vaca donde puedes comenzar a crear tu website. Pero antes te recomendamos lo siguiente:

Crear una carpeta para tu website

Presiona en el men File/New. Escoge la opcin Page or Web...

En esta versin del programa, la mayora de los casos le aparecer una pantalla a la extrema derecha de la pantalla que se titula New Page or Web. En esta seleccionars la opcin Empty Web. TIP: En algunas versiones aparece una opcin de One PageWeb Site. Cuando le des clic a la opcin podrs escoger Empty Web. En esa misma seccin seleccionars la localidad donde grabars el mismo.

Empty Web

Automticamente el programa direcciona tu web en el directorio My Document y le asigna un nombre Web1: C:\My Document\My Web\Web1 Si quieres cambiar de directorio y asignarle otro nombre a tu Website puedes hacerlo bajo la opcin Specify the location of the new web: Ejemplo, A:\nombre o C:\My Document\My Web\nombre TIP: No uses acentos, letras maysculas, ni espacios entre palabras o letras para ponerle nombre a tus archivos pues algunos sistemas de computadora tienen dificultades para leer este tipos de nombres. [Evita tambin la letra ]

Ahora, presiona en el men View y escoge la opcin Views Bar, aparecer la barra de View al extremo izquierdo de la ventana del programa. [En la mayora de los casos esta opcin est dada] Presiona en la opcin Folders y vers a la derecha el listado de folders (carpetas) que te cre FrontPage: _private, images.

En la carpeta llamada _private tendrs las extensiones necesarios para que funcione el programa (no puedes editarlas) y en la carpeta llamada Image podrs guardar imgenes.

Escoger un Tema
Este manual en particular le facilitar el trabajo llevndole a travs de las utilidades ms prcticas del programa. Esto no significa que no existan diversas maneras de empezar.

El tema o Theme se refiere a motivos ya establecidos por Front Page. El programa te permite hacer cambios a estos temas y grabar los mismos de forma personalizada. Presiona en Format/ Theme. En Theme procura escoger la opcin de All Pages para serciorarte de que se repita en cada pgina.

Para hacer cambios en el tema escogido da un click en la opcin Modify y tu escoges qu cambiar: el color, las grficas o el texto.Si haces algn cambio procura presionar en Save as y as personalizars los cambios.

Crear un borde
La opcin de Shared Borders te facilita el trabajo en grandes cantidades. Al escoger un borde evitas tener que repetir el mismo patrn por cada pgina de tu website. Dentro de estos bordes trabajars con tablas que te permitan manejar mejor el espacio. Da click en Format/ Shared Borders. En Shared Borders escogers las opciones que mejor representen la organizacin que deseas para tu website. Una sugerencia sera seleccionar: All Pages/Top/Left; Include navigation buttons/Botton TIP: Si no aparece activa la opcin, dirgete a Tools/ Page Options/ Authoring y procura que la opcin de Share Borders est seleccionada.

Selecionado tu borde ya tienes una idea de la imagen que empieza a organizar tu website.

Hacer tablas
Lo primero que se te recomienda es trabajar sobre una estructura para que puedas tener mayor control sobre la pgina. Para hacerlo, selecciona en la barra de herramientas la opcin Table/Insert/Table o ve directamente al icono de tables

Puedes escoger la cantidad de lneas y columnas, escoger el porcentage, el aliniamiento, la definicin de los tamaos de los bordes, espacios de los espacios. El Set as default for new table te permite mantener el mismo orden para las dems tablas.

Nota: V a la seccin Editar Tablas ms adelante, para detalles sobre como cambiar los colores de las celdas y la tabla si as lo prefieres. Con estas instrucciones ya has creado tu plantilla [template] para tu website. El grabar esta pgina como tu index sera tu prximo paso.

Crear la pgina inicial (Home Page)

A sta primera pgina le llamars index.html . El archivo llamado index.html ser siempre la pgina principal que se despliega cuando las personas accesen a tu website. Tambin se le conoce como home page. Ve a File/ Save as. En el rea de file name escribe index.html. El HTML slo lo utilizars con el index y automticamente el programa grabar las dems pginas como htm. En la opcin Change se te ofrece el poder cambiar el nombre de la pgina. Si seleccionaras un Banner para tu pgina, ser este nombre el que se reflejar. En esta opcin puedes escribir con todo tipo de regla gramatical. Para crear la siguiente pgina repite los pasos uno y dos de sta seccin.

Desarrollo
Cmo editar texto?
Procurando iniciar un texto dentro de los mrgenes de una tabla, escribirs como lo haces normalmente en un programa de edicin de texto. Puedes usar la barra de herramientas para disear el formato del texto: estilo, tamao, color, ennegrecer, itlicas, subrayado y dems.

Cmo aadir imgenes?

ClipArt - Insert/Picture/ClipArt o puedes localizar el icono en tu barra de herramientas. Importar imgenes ya creadas - Insert/Picture/From File

Aadir imgenes de Internet que tengan permiso de "copyright". 1. Buscas la imagen en Internet 2. Sobre la imagen, presionas con el botn derecho del mouse 3. Escoges la opcin copy y la grabas en un disco externo o interno en computadora. 4. Regresas a FrontPage 5. Ubicas el cursor donde quieras colocar la imagen 6. Presionas en Paste

tu

Cmo editar Imgenes?

Presiona sobre la imagen y aparecer una barra de herramientas como la siguiente:

Aadir texto dentro de la imagen Herramienta Thumbnail: minimiza la imagen pero la misma puede luego ser vista en su tamao original en la Internet con slo presionar sobre ella Posicin absoluta: te permite mover la imagen a donde la quieras mover Rotacin de la imagen Brillantes y contraste Cortar (crop) Eliminar un color (transparencia) Blanco y negro Efecto de Bevel Hostpot (aadir enlaces dentro de imgenes)

Nota: Recuerda salvar lo editado dndo un clic en el cono correspondiente.

Creando la Barra de Navegacin

La barra de navegacin establece una estructura para navegar por todas las pginas que componen tu "website" . El programa ofrece varias formas para disear esta estructura. Entre stas se encuentran la opcin Navigation Bar Paso #1 Asigana orden presionando sobre la opcin View y seleccionando Navigation. Cuando ests en esta vista, arrastrars las pgina deseada desde el Folder list y sultala hasta el rea de trabajo para enlazarla con la pgina principal (index) [index se identifica con el dibujo de una casa en la parte inferior izquierda, as que no debes arrastrarla]

10

Cuando usamos el Navigation Bar, FrontPage usa la etiqueta (label) que aparece en la vista de navegacin (Navigation View) como texto para los enlaces. Para cambiarlo presiona con el botn derecho del mouse sobre la pgina que deseas cambiar y escoges la opcin Rename.

Paso #2 Asignar posicin a la Barra de Navegacin en la pgina dentro de las celdas de los bordes [Share Borders] para que la misma se repita automticamente en cada pgina creada. Aparecer una pantalla como la que sigue:

En esta pantalla verificars si la opcin Link Bars est seleccionada en la extrema

11

izquierda del recuadro. En la extrema derecha debe estar seleccionada la opcin Bar based on navigation etructure. Al finalizar presiona sobre el botn de Next.

En esta pantalla selccionars la opcin de Use Page's Theme. Esto significa que permanecers con las imgenes ofrecidas por el tema de tu pgina. Al finalizar preciona en Next.

En esta pantalla seleccionars la posicin de la barra de navegacin. Escoge la que mejor corresponda a tus necesidades. Al terminar seleccionars la opcin Finish.

12

Para las propiedades de la Barra de navegacin sera pertinente escoger las opciones de Child pages under home, Home page y Parent page. Estas opciones amplian los enlaces de tu navegador.

Cmo crear enlaces?

13

Enlaces Internos: Enlaces hacia pginas que perteneces a tu website 1. 2. 3. 4. Selecciona la palabra o imagen que quieras utilizar de entrada al enlace Presiona con el botn derecho del mouse Escoges la opcinHyperlink Luego presionas sobre el archivo hacia donde se dirigirs el enlace

Enlaces Externos: Enlaces hacia otras pginas web fuera de tu website. 1. 2. Sigues los primeros tres pasos Escribes la direccin de la pgina que quieres enlazar en la seccin URL

Enlaces hacia un email: escribes la direccin de email, una vez presionas enter automticamente se crear el vnculo hacia el email. Enlaces hacia un email desde una imagen: Seleccionas la imagen que deseas enlazar Presionas sobre el botn hyperlink Presionas sobre el icono mail to Escribes el email y presionas en ok.

14

Enlaces dentro de una misma pgina: 1. Primero tienes que insertar un bookmark donde deseas enlazar

Colocas el cursor donde deseas que llegue el vnculo Escoges en el men Insert la opcin bookmark Asigna un nombre al bookmark en el espacio provisto Presionas en ok y listo Aparecer una banderita indicando que all colocaste un bookmark.

2. Ahora crea el vnculo siguiendo los primeros tres pasos de los enlaces internos

Utilizars la seccin Optional/Bookmark seleccionas el nombre que le pusiste al bookmark y listo.

15

Crear una tabla

Para insertar una tabla, busca la opcin de Table en la barra de navegacin, Table/Insert/Table

En la pantalla de Insert Table seleccionars las opciones que mejor dibujen la tabla que necesitas. Puede escoger la cantidad de columnas y lneas, el ancho de los bordes, el abarque de la tabla (Specify width).

Editar la tabla
Aadir filas o columnas 1. Presiona con el botn derecho del mouse 2. Escoges la opcin de Split Cell 3. Defines en la misma la cantidad de celdas que deseas organizar Nota:Si quieres controlar donde exactamente se colocar la fila o columna activa la funcin por medio del men de tablas: Table/Insert/Row or Columns 16

Guardando la pgina web

Desde un inicio ests guardando tu pgina. Si deseas grabarla en un disco transportable, busca el archivo en la computadora y copialo o arrastralo hacia tu disco. Nota: si deseas cambiar el ttulo a la pgina: das clic en Change te aparecerunaventana como la que sigue donde colocars el ttulo deseado, luego dasclic en OK. El ttulo de la pgina es importante porque entre otras cosas, es lo que aparecer en tu barra de navegacin y banner, si es que colocas alguno. Nota: Esimportante que te asegures que guardas las imgenes en la misma carpetadonde esta tu Website, preferiblemente en la carpeta image.

Si tienes alguna duda sobre estas instrucciones puedes comunicarte con nosotras: Johana Martnez: jmrosario13@universia.pr Heidi J. Figueroa: hfiguero@coqui.net Carmen Morales: hematoma_cm@hotmail.com Como asunto [Subject] FP, para as poder reconocer el asunto.

jmr/revisionpara2002en adelante/agosto2005