CAPTULO 3

En este captulo desarrollaremos el sitio de una consultora de sistemas, aplicando los conocimientos adquiridos hasta el momento y agregando mayor complejidad.

Creacin y desarrollo de un sitio web

Creacin y desarrollo de un sitio web

MANUAL DE FRONTPAGE 2000

Uso del Asistente Formateo del texto Tipos de letra Renombrar los archivos Salir de FrontPage

Servicio de Atencin al Lector (011) 4954-1884 lectores@mponline.com.ar

PC/users

Uso del Asistente

Uso del Asistente

3 Creacin y desarrollo de un sitio web La forma ms simple de crear un sitio web es utilizando el Asistente de construccin de FrontPage 2000. Una vez iniciado FrontPage, efecte los siguientes pasos, con los que realizaremos el site de una empresa ficticia con la ayuda del Asistente de creacin de pginas.

Ejecutar el Asistente
Seleccione el men Archivo.

PASO A PASO

Desde all haga clic en Nuevo, y del submen que se desprende, elija Web...

Figura 1. Nuevo Web Asist.

En este punto FrontPage mostrar la ventana Nuevo. Aqu seleccionamos el cono Asistente para presencia corporativa e indicamos el directorio en el que ubicaremos los archivos que compondrn el sitio web.

PC/users

49

MANUAL DE FRONTPAGE 2000

Figura 2. Asistente para presencia corporativa.

A continuacin se ejecutar el Asistente. Haga clic en el botn Siguiente.

Figura 3. Inicio del Asistente.

En los pasos siguientes veremos cmo completar los datos que solicita el Asistente. stos brindan la informacin bsica e indispensable que el Asistente necesita para crear la estructura del futuro sitio web.

50

PC/users

Uso del Asistente

PASO A PASO
Elija los componentes que quiere que integren su pgina web. Quite la seleccin a los casilleros de Tabla de contenido y Formulario de bsqueda. 3
Figura 4. Seleccin de componentes.

A continuacin seleccione los datos que desea que figuren en la pgina inicial, que servir de presentacin de su empresa. Aqu es conveniente destacar el perfil de la organizacin y sus objetivos como empresa.

Figura 5. Presentacin de la empresa.

PC/users

51

Creacin y desarrollo de un sitio web

v

MANUAL DE FRONTPAGE 2000

En el siguiente paso se le preguntar si le interesa incorporar una pgina con noticias y novedades relativas a la empresa.

Figura 6. Pgina Novedades.

Seleccione la cantidad de pginas que desea tener para describir los productos y servicios que ofrece la organizacin. Ingrese 0 en Productos y 1 en Servicios.

Figura 7. Productos y Servicios.

52

PC/users

Uso del Asistente

Seleccione el detalle que quiere que figure para los productos y servicios. Aparecer grisada (inhabilitada) la zona correspondiente a productos, ya que en el paso anterior no se indic cantidad de pginas. 3
Figura 8. Detalle de Productos y Servicios.

Este paso es muy til, ya que permite introducir informacin que ser comn a todas las pginas del site. Especifique los datos que desea que aparezcan en las pginas, como encabezados y pies de pgina.

Figura 9. Descripcin de encabezamiento y pie de pgina.

PC/users

53

Creacin y desarrollo de un sitio web

v

MANUAL DE FRONTPAGE 2000

Marque si desea que aparezca un cono que le anuncie al visitante que la pgina est en construccin y an no ha sido terminada.

Figura 10. Pgina sin terminar.

Escriba el nombre y la direccin de la organizacin.

Figura 11. Introduccin de nombre y direccin.

54

PC/users

Uso del Asistente

Ingrese el e-mail y el telfono de la empresa.

Figura 12. Ingreso de e-mail y telfono.

En este paso haga clic en el botn Elegir tema de Web para seleccionar el diseo del sitio.

Figura 13. Eleccin de diseo de pgina.

RESULTADOS En el CD provisto por este libro podemos ver el resultado de lo generado en estos pasos. APLIQUE LOS CONOCIMIENTOS ADQUIRIDOS Cambie la cosmtica de las pginas creadas anteriormente segn lo aprendido en los captulos pasados.

PC/users

55

Creacin y desarrollo de un sitio web

3
v

MANUAL DE FRONTPAGE 2000

Desde la Galera de Estilos que ofrece FrontPage seleccione el de su agrado.

Figura 14. Cuadro de dilogo Elegir tema.

Por ltimo, indique si le interesa que FrontPage realice una lista de tareas para organizar el trabajo y determinar la fraccin realizada de lo que queda pendiente.

Figura 15. Mostrar tareas.

En esta vista usted ver cada pgina de su sitio web y podr asignar el estado de prioridad. Si quiere trabajar con una pgina en particular, eljala en esta vista, haciendo un clic derecho sobre la lnea y seleccionando Comenzar Tarea o Editar Tarea. Tambin puede marcar las tareas como completadas o borrarlas. Para retornar a esta vista simplemente deber hacer clic en Tareas desde la Barra de Vistas.

56

PC/users

Uso del Asistente

Reorganizar el sitio
Con el Asistente de FrontPage se hace mucho ms sencilla la creacin de un sitio web, pero desafortunadamente ste no siempre se organiza como quisiramos. Antes de seguir trabajando, veamos la estructura actual del sitio. Haga clic en el cono Exploracin de la Barra de Vistas para visualizar su sitio web actual.

Figura 16. Pantalla de la vista Exploracin del web empresarial.

En esta vista FrontPage muestra el formato y la organizacin actual de las pginas que componen el sitio web. Cada una de las cajas que se ven representa una pgina del web. La pgina principal est identificada por este pequeo smbolo:

El smbolo ms (+) indica que se trata de una pgina padre y que tiene ocultas una o ms pginas hijas. Para visualizarlas haga clic sobre este cono. Cuando se muestran las pginas hijas, el cono ms (+) se reemplaza por el cono menos (-). Para ampliar la zona grfica, puede ocultar la Lista de Carpetas, haciendo clic en el cono Lista de Carpetas.

PC/users

57

Creacin y desarrollo de un sitio web

v

MANUAL DE FRONTPAGE 2000

Borrado de pginas
Ya familiarizados con la vista Exploracin, podemos encontrarnos con la necesidad de borrar alguna pgina. Para hacerlo, realice los siguientes pasos.

PASO A PASO
Haga clic con el botn derecho del mouse sobre la caja de la pgina que desea borrar y seleccione Eliminar del men contextual que aparece. FrontPage mostrar el siguiente cuadro de dilogo.

Figura 17. FrontPage muestra este cuadro de dilogo para confirmar la eliminacin de una pgina.

Seleccione Eliminar esta pgina del Web. Haga clic en el botn Aceptar.

Agregado de pginas
Quiz usted desee agregar alguna pgina a las ya generadas por el Asistente. Para hacerlo, realice los siguientes pasos.

PASO A PASO
Seleccione la caja de la pgina Servicios y haga clic en el botn Nueva pgina de la Barra de Herramientas.

58

PC/users

Uso del Asistente

Figura 18. Seleccin de la pgina Servicios.

FrontPage agregar una pgina llamada Pgina nueva 1 y la situar como una nueva hija de la pgina Servicios, tal como muestra la siguiente figura.

Figura 19. Agregado de pgina.

Seleccione la nueva caja que agreg FrontPage y renmbrela como Profesionales.

PC/users

59

Creacin y desarrollo de un sitio web

3
v

MANUAL DE FRONTPAGE 2000

Ahora realice los siguientes cambios: 1. Elimine pginas sobrantes. 2. Renombre las siguientes pginas: Principal como Digital Bureau. Servicio 1 como Empresas. En este momento el sitio deber tener la siguiente estructura:

Figura 20. Vista Exploracin final del Web.

Trabajar con las solapas de pginas

Ya tiene la estructura bsica del sitio. Lleg el momento de introducir informacin en las pginas. FrontPage provee de una especie de procesador de textos que le permitir incorporar textos y realizar todas las tareas relativas a la edicin. Podr, de forma sencilla, agregar, editar y dar formato al texto, e insertar grficos, tablas y otros elementos que veremos ms adelante.

PASO A PASO
Haga doble clic sobre la caja Digital Bureau. Presione en el cono Lista de Carpetas. Ver la siguiente pantalla.

60

PC/users

Uso del Asistente

Figura 21. Pantalla principal de Digital Bureau.

Ahora veremos los pasos a seguir para cambiar el formato del texto ingresado.

PASO A PASO
Elija la solapa Normal. En la parte superior de la pgina encontrar un texto descriptivo de la misma bajo el nombre de Comentario. Aqu se guarda informacin que se desea recordar o que puede ser til para describir la pgina. FrontPage no toma en cuenta estas lneas. Haga clic aqu y modifquelo con el siguiente texto: El sitio web de Digital Bureau tiene por objeto dar a conocer la empresa a travs de Internet. Seleccione el prrafo siguiente, Objetivos de la Organizacin, tipee un comentario si lo desea, y luego, el siguiente texto: Digital Bureau presta servicios en la bsqueda, seleccin y provisin de personal especializado en Informtica. Los profesionales seleccionados estn altamente capacitados para ocupar cargos en posiciones de Gerencia, Control, Anlisis y Programacin de Sistemas. Con dominio y experiencia en lenguajes, equipos y herramientas informticas en general, los seleccionados son destinados a la realizacin de proyectos temporarios o efectivos en el rea de Sistemas de todo tipo de empresas.

PC/users

61

Creacin y desarrollo de un sitio web

3
v

MANUAL DE FRONTPAGE 2000

En Perfil de la Organizacin, tipee: El contar con una amplia base de datos nos permite efectuar bsquedas rpidas y efectivas en el menor tiempo. Esta base de datos est publicada en la pgina de Profesionales de este site de Internet, y su crecimiento es continuo gracias a la recepcin permanente de CV de profesionales. Los interesados podrn enviar sus antecedentes para ser incorporados en la pgina de Profesionales de este site.

Finalmente, verifique que la informacin relativa a la empresa, que automticamente introdujo FrontPage, est correcta. En caso contrario, retipee los datos. La figura siguiente muestra el estado actual de la pantalla.

Figura 22. Muestra la pgina principal.

Hasta ahora usted ha trabajado con la pgina vista con la solapa Normal, pero seguramente habr observado que existen otras dos. Veamos sus funcionalidades:

PASO A PASO
Haga clic en la solapa Vista Previa, con lo que FrontPage simular el estado de la pgina como si se estuviera mirando con un browser.

62

PC/users

Uso del Asistente

Figura 23. Vista Previa de la pgina principal del sitio web.

Hasta el momento, las vistas Normal y Previa no tienen grandes diferencias, ya que an no se le ha agregado complejidad a la pgina.

Ahora haga clic en la solapa HTML. Se ver el cdigo perteneciente a la misma.

Figura 24. Cdigo HTML de la pgina principal.

DISEO WYSIWYG Una de las caractersticas principales de FrontPage es la facilidad de poder disear visualmente las pginas de un sitio y automticamente generar el cdigo que se ve a travs de la solapa HTML.
PC/users

63

Creacin y desarrollo de un sitio web

3
v

MANUAL DE FRONTPAGE 2000

Formateo del texto

Ahora que ya introdujo la informacin para la pgina principal del sitio web, podr cambiar su apariencia. Para ello comencemos por conocer la Barra de Herramientas Formato.

Descripcin de la Barra de Herramientas Formato

Las opciones de la Barra de Herramientas Formato permiten cambiar los tipos de letra, su tamao, la alineacin de los prrafos y todas aquellas acciones que afectan a la cosmtica de una pgina. En la siguiente figura se muestra en detalle cada una de sus opciones.

GUA VISUAL N 10 Barra Formato

Estilo de la fuente. Tipo de fuente. Tamao de la fuente. Estilo Negrita. Estilo Cursiva. Estilo Subrayado. Alinea el texto junto al margen izquierdo de la pgina. Centra horizontalmente el texto seleccionado entre los mrgenes izquierdo y derecho. Alinea el texto junto al margen derecho de la pgina. Vietas numeradas. Vietas simples. Disminuir sangra. Aumentar sangra. Color de resalte de fondo. Color de la fuente.

64

PC/users

Tipos de letra

Tipos de letra
FrontPage ofrece una gran variedad de tipos de letra o fonts. Para cambiar los fonts realice los siguientes pasos: 3 Desde el men Formato, haga clic en Fuente. Se mostrar la siguiente pantalla:
Figura 25. Fuente.

All seleccione el tipo de letra que desee, valindose de la vista previa que se ofrece para facilitar la eleccin. Puede cambiar el estilo, el tamao, el color y los efectos, tales como el Superndice (para lograr, por ejemplo, M2) o el Subndice (A1).

PC/users

65

Creacin y desarrollo de un sitio web

PASO A PASO

MANUAL DE FRONTPAGE 2000

Personalizar el color del texto

FrontPage ofrece, adems de los colores predefinidos que figuran en la lista desplegable, la posibilidad de generar otros. Para ello haga lo siguiente:

PASO A PASO
Desde la lista desplegable Color de la ventana anterior, seleccione la opcin Ms colores.

Figura 26. Ms colores.

Tambin puede acceder desde la Barra de Herramientas, haciendo clic en el cono que muestra la figura.

Figura 27. Colores desde la Barra de Herramientas.

66

PC/users

Tipos de letra

Seleccione el de su agrado entre esta variedad, haciendo clic en l. Seleccione el botn Personalizado... para poder elegir entre las distintas gamas de colores. 3
Figura 28. Color.

Sangras
Darle sangra a un prrafo consiste en llevar su margen hacia el interior de la pgina en una medida determinada.

PASO A PASO
Pulse el cono Disminuir Sangra para correr el texto seleccionado una medida a la izquierda. Pulse el cono Aumentar Sangra para correr el texto seleccionado una medida a la derecha.

SANGRADO DE PRRAFOS Algunos browsers no soportan el sangrado de prrafos, por lo que en ciertos casos no se visualizar este efecto.

PC/users

67

Creacin y desarrollo de un sitio web

v

MANUAL DE FRONTPAGE 2000

Vietas
Otra funcin til que brinda FrontPage es la posibilidad de numerar prrafos de forma automtica e insertar vietas.

PASO A PASO
Seleccione el conjunto de prrafos a los que les quiere insertar el efecto de vietas numricas o no numricas. Seleccione los conos respectivos: Vietas numeradas para insertar vietas numeradas o Vietas no numeradas para insertar vietas simples. Puede cambiar el estilo de las vietas mediante los siguientes pasos:

PASO A PASO
Seleccione el men Formato. Seleccione la opcin Vietas y numeracin, con lo que se presentar el siguiente cuadro:

Figura 29. Vietas y numeracin.

La etiqueta Vietas de imagen permite seleccionar un dibujo pequeo que servir de smbolo para la vieta. Para ello, realice lo siguiente:

68

PC/users

Tipos de letra

PASO A PASO
Haga clic en la opcin Especificar imagen. 3
69

Seleccione el archivo de imagen presionando en el botn Examinar.... Una vez seleccionada la imagen, a la izquierda se presenta un esquema aplicando esa nueva vieta. La opcin Habilitar esquemas contrables permite que la lista pueda expandir o contraer sus distintos niveles, en caso de tenerlos.

Insertar lneas
Para separar secciones de la pgina se pueden insertar lneas rectas, mostrando un aspecto similar al de la siguiente figura:

Figura 30. Insertar lneas.

PASO A PASO
Seleccione el men Insertar. Elija lnea horizontal. Para cambiar el aspecto de la misma, haga clic con el botn derecho sobre la lnea insertada. Se desplegar el siguiente men contextual:

LISTAS CONTRABLES Algunos browsers no soportan las listas contrables. Internet Explorer, a partir de su versin 4.0, soporta esta opcin.

PC/users

Creacin y desarrollo de un sitio web

MANUAL DE FRONTPAGE 2000

Figura 31. Men contextual Lnea horizontal.

Seleccione Propiedades de lnea horizontal....

Figura 32. Propiedades de lnea horizontal.

En Ancho podr indicar la longitud de la lnea. En Alto indique su grosor. En Alineacin seleccione dnde quiere situarla con respecto a los mrgenes. En Color siga los pasos ya vistos para su seteo.

70

PC/users

Renombrar los archivos

Renombrar los archivos

Se pueden renombrar fcilmente los archivos fsicos que se estn generando para el web. Realice los siguientes pasos:

PASO A PASO
Haga clic en el cono Carpetas desde la Barra de Vistas ubicada a la izquierda. Haga clic con el botn derecho del mouse y seleccione Renombrar del men contextual que se visualiza. Renombre las pginas tal como figura en la siguiente lista: feedbach.htm como news.htm como pagina_nueva_1.htm como services.htm como serv01.htm como comentarios.htm novedades.htm profesionales.htm servicios.htm empresas.htm

Se mostrar un dilogo confirmacin para efectivizar el renombrado de la pgina, tal como muestra la siguiente figura:

Figura 33. Cuadro de dilogo Cambiar nombre.

Tambin puede adaptar el comentario de la pgina mediante el mismo proceso realizado para el cambio del nombre del archivo. Renombrar de esta manera, a modo de ejemplo: Servicio 1 de... como Pgina comentarios... como Pgina novedades... como Pgina servicios... como Servicio para empresas Pgina de comentarios de Digital Bureau Pgina de novedades de Digital Bureau Pgina servicios de Digital Bureau

PC/users

71

Creacin y desarrollo de un sitio web

MANUAL DE FRONTPAGE 2000

Finalmente, los nombres de los archivos con sus comentarios se vern de la siguiente manera:

Figura 34. Luego de renombrar los archivos y sus comentarios, su lista debera verse como se muestra en este diseo.

Salir de FrontPage
En este momento usted ya tiene creado un site sencillo que le sirvi para dar los primeros pasos en el manejo de esta til herramienta. Para finalizar la sesin de FrontPage, realice lo siguiente:

PASO A PASO
Seleccione Salir desde el men Archivo. Posiblemente FrontPage presente un cuadro de dilogo similar al que se muestra en la Figura 35, con el objeto de confirmar la grabacin de la pgina, si usted hizo algn cambio desde el momento en que abri dicha pgina.

Figura 35. Cuadro de dilogo de confirmacin de grabacin de pgina.

72

PC/users

Salir de FrontPage

Tambin puede salir de FrontPage de las siguientes maneras: Haciendo clic en el botn Cerrar (X) en el extremo derecho de la Barra de Ttulos. Presionando conjuntamente Alt + A (letra subrayada en el men Archivo) + S (letra subrayada en la opcin Salir). Haciendo doble clic en el cono del Men de Control, a la extrema izquierda de la Barra de Ttulos.

Resumen: actualmente tenemos un sitio web estticamente aceptable. Conocimos los pasos fundamentales para el diseo de un sitio. En el siguiente captulo aprenderemos a usar imgenes y sonidos en nuestras pginas.

PC/users

73

Creacin y desarrollo de un sitio web