Diseño de páginas y sitios web - Microsoft FrontPage MICROSOFT FRONTPAGE Ejercicio Nº 1 – Microsoft FrontPage Plantillas Web Las plantillas son Webs o páginas Web estándar que FrontPage puede crear a solicitud. Entre las plantillas integradas se encuentran el Web Personal, el Web de Soporte al Cliente, etc. Todos los Webs y páginas web empiezan a partir de una plantilla, aun cuando deseamos crear un web que no contenga ninguna página integrada (Web Vació), o cuando necesitamos una página completamente vacía (Web de una Página). Para iniciar un Web contamos con las siguientes plantillas: Web Vacío: Un web que no contiene páginas. Web de una Página: Un web con una sola página en blanco. Web Personal: Un web para información personal con solo cuatro páginas. Web de Soporte al Cliente: Un web de 19 páginas que permite a una empresa ofrecer soporte a clientes para uno o más de sus productos. Web de Proyecto: Un web de 23 páginas dedicado a un proyecto en colaboración, con páginas de información sobre los miembros, el estado del proyecto, la agenda, las discusiones de grupo y el archivo. Nosotros comenzaremos creando un Web Personal: 1) Una vez abierto el programa, ir a ARCHIVO-NUEVO-WEB..., elegir la plantilla Web Personal, indicar la ubicación donde se guardara el Web, y Aceptar. Finalizado este punto FrontPage crea todas las páginas y subcarpetas necesarias. Cada una de las plantillas integradas incluye las carpetas _private e images. La carpeta images contiene todos los archivos gráficos que sean parte del Web. La carpeta _private, que inicialmente no contiene ningún archivo, se utiliza para guardar archivos que deban estar ocultos para los lectores del Web. Por ejemplo si creamos un Web para recabar datos, como el nombre y dirección de los lectores, podemos guardar esta información en esta carpeta. También podemos ver que se creo una página llamada index.htm, este es el nombre que se le da a la página principal o de inicio. Comúnmente se designa a la página principal de un Web con este nombre, pero también se la puede llamar index.html, default.htm y default.html. 2) Insertar una nueva página, ARCHIVO-NUEVO-PÁGINA..., y elegir de la ficha General: Página Normal, Aceptar. 3) Agregar esta nueva Página en la vista Exploración. Elegir el lugar donde la iremos a ubicar. Observar en la vista Página que se encuentre en el lugar deseado. 4) Visualizar como ira quedando la página desde la lengüeta de vista previa o también podemos ir a ARCHIVO-VISTA PREVIA EN EL EXPLORADOR.... 5) Modificar la información predeterminada por FrontPage por los datos del grupo de alumnos o de cada integrante. Página 1 de 19 Diseño de páginas y sitios web - Microsoft FrontPage 6) En la página principal nos muestra la fecha de la última actualización de la página (la cual representara la fecha de actualización de todo el sitio), para cambiar el formato en que se presenta esta fecha o para agregarle también la hora, hacer doble clic sobre dicha fecha, otra forma es seleccionando la fecha y luego ir a FORMATO-PROPIEDADES.... Luego para actualizarla solo presionamos la tecla de función F5, llamada también tecla actualizar (Refresh). 7) Otro componente que se puede modificar es el titular de la página, el encabezado que va al principio de la página y que sirve de titulo. Cada página de la plantilla de Web personal tiene un titular. En forma predeterminada, el titular es gráfico; el texto aparece en un sencillo archivo de gráficos. Para cambiar esto, hacer doble clic en el titular y se abrirá el cuadro de diálogo de propiedades. Cambiar el texto de titular de página. Cualquier cambio que se le haga al texto del titular de una página se efectuara también en el icono de esa página dentro de la vista Exploración. El texto de las barras de exploración que están vinculadas con esa página, cambiara por el nuevo titular. 8) La página Favorite.htm (Sitios Favoritos), contiene ya dos hipervínculos predeterminados a sitios externos y uno llamado Mi Sitio Favorito, el cual deberán crear. 9) Crear más hipervínculos a sitios externos en la página de Sitios Favoritos. Los Hipervínculos pueden asociarse con cualquier elemento de una página Web, como texto, gráficos o una combinación de los dos. Para cambiar el hipervínculo hacemos un clic derecho sobre él y seleccionar el comando Propiedades de Hipervínculo... del menú contextual. Podemos vincular el hipervínculo a un sitio externo de nuestro Web o a cualquier elemento o página dentro de nuestro sitio. 10) Si en algún momento se elimino por error o simplemente desea agregar más de estos componentes podemos hacerlo desde: INSERTAR-FECHA Y HORA, INSERTAR-TITULAR DE PÁGINA, INSERTAR-HIPERVINCULO. 11) El color del texto y de los hipervínculos, el color de fondo o la imagen de fondo, los tipos de letras, las imágenes y la barra de exploración, todo esto en su conjunto forman lo que llamaremos un TEMA. Los temas pueden ser aplicados a todo el sitio web o utilizarse uno distinto para cada página del sitio. Ir a FORMATO-TEMA. Se abrirá el cuadro de diálogo de temas donde podrá ver la vista previa de cada tema predeterminado por FrontPage. Luego de elegir uno de los temas se deberá seleccionar si se desea aplicar el tema a: Todas las Páginas o a las Páginas seleccionadas. La opción Colores Intensos determina si el tema usará una variedad de colores brillantes, o un fondo blanco y colores oscuros si no se la selecciona. Si elegimos Gráficos Activos el tema adquiere algunos efectos de animación. Aplicar Imagen de Fondo, si elegimos colocar una imagen de fondo en lugar de un solo color. Página 2 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Aplicar Mediante CSS, hojas de estilo en cascada, las cuales permiten definir los elementos visuales de una página (texto, colores, tipos de letras y formatos) en forma separada de la información que contenga la página. Página 3 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Ejercicio Nº 2 – Microsoft FrontPage Creación de un TEMA: Como vimos en el ejercicio anterior los temas son una forma rápida de determinar el aspecto de un Web. Ya sea que el Web contenga 5 o 50 páginas, para aplicar el tema se requiere la misma cantidad de trabajo. Si ninguno de los temas integrados se adecua al Web que queremos crear, podemos elaborar uno nuevo. 1) Abrir el Sitio del ejercicio anterior. 2) En la ventana Temas hacemos clic en MODIFICAR. Aparecerán tres nuevos botones: COLORES, GRÁFICOS y TEXTO. Cada uno de ellos nos abrirá una ventana. La ventana de Colores, cuenta con 3 solapas: Combinación de colores: Nos ofrece una lista de combinaciones posibles. Ruedas de colores: Al elegir un color forma una serie de 5 colores relacionados. Personalizado: Nos permite elegir un color deseado a cada elemento (Hipervínculos, borde de tabla, etc.). En la ventana Gráficos tendremos una lista de elementos (Imagen de fondo, botones, etc.) a los cuales les podremos cambiar las imágenes predeterminadas y la fuente. En la ventana de Texto también tendremos una lista de elementos (Encabezado, Cuerpo, Etc.) a los cuales les podremos cambiar la Fuente 3) Modificar todos los elementos deseados, guardarlo y aplicarlo al Sitio. 4) Para eliminar temas que ya no se usan, lo podremos hacer desde la vista Informes – Temas no utilizados. Página 4 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Ejercicio Nº 3 – Microsoft FrontPage Asistentes para Web: Además de las plantillas también podemos crear un Web a partir de un asistente. 1) Ir a ARCHIVO-NUEVO-WEB..., elegir el asistente para Presencia Corporativa. 2) Seguir los pasos leyendo y completando con atención cada opción. 3) Modificar la información predeterminada por FrontPage por los datos de una empresa ficticia. Página 5 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Ejercicio Nº 4 – Microsoft FrontPage 1) Crear un Web de discusión utilizando el asistente. 2) Agregar un nuevo formulario (Un formulario es una página Web con campos para recabar información acerca de los visitantes del sitio.) ARCHIVO-NUEVO-PÁGINA-ASISTENTE PARA PÁGINAS DE FORMULARIOS, recabando información de los visitantes y la opinión sobre el sitio. Página 6 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Ejercicio Nº 5 – Microsoft FrontPage Creación de una sitio a partir de un Web de una página: 1) Insertar y guardar 5 páginas nuevas. 2) Crear los vínculos entre las páginas desde al vista exploración. 3) Situados en la página principal agregar bordes compartidos a todas las páginas: FORMATO-BORDES COMPARTIDOS... Aplicar a: Todas las páginas; Superior; Izquierdo, Incluir botones de exploración. 4) En el Borde Superior escribiremos el titular de cada página (INSERTAR-TITULAR DE PÁGINA). 5) El borde izquierdo lo modificamos desde el menú contextual: Propiedades de barra de exploración.... 6) Determinar los colores a utilizar en las páginas: FORMATO-FONDO..., luego elegir los colores de fondo, de texto, y de hipervínculos. 7) Escribir el texto de cada página. Cada vez que hacemos un salto de página aparece una línea en blanco, para que no nos aparezca esta línea en blanco, debemos ir a INSERTARSALTO DE LÍNEA... y elegir Salto de línea normal. 8) Si al contenido de las páginas además de texto también tendrá imágenes es preferible organizar todo en tablas (TABLA-INSERTAR TABLA...). 9) Agregar imágenes a las páginas deseadas. Desde la barra de herramientas de imágenes podemos modificarlas: 12345678910111213141516171819202122232425- Insertar imagen desde archivo Texto Viste en miniatura automática Ubicación absoluta Traer adelante Enviar atrás Girar a la izquierda Girar a la derecha Voltear horizontalmente Voltear verticalmente Mas contraste Menos contraste Mas brillo Menos brillo Recortar Establecer color transparente Blanco y negro Descolorar Dar efecto biselado Nuevo muestreo Seleccionar Zona activar rectangular Zona activar circular Zona activar poligonal Resaltar zonas activas Página 7 de 19 Diseño de páginas y sitios web - Microsoft FrontPage 26- Restaurar Página 8 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Ejercicio Nº 6 – Microsoft FrontPage Animación y Efectos especiales: 1) Abrir el Sitio del ejercicio anterior. 2) Crear un efecto de transición entre páginas: FORMATO-TRANSICIÓN DE PÁGINA.... Las transiciones se pueden asociar a cuatro eventos: Al entrar en la página, Al salir de la página, Al entrar al sitio, Al salir del sitio. Hay muchos efectos de transición que podemos aplicar y la mayoría tienen nombres que se explican por si mismos, como circulo, tablero, revelar. También nos permite establecer la dirección de la transición, como en revelar hacia la derecha, con el que la página nueva va entrando en pantalla de izquierda a derecha. La transición Aleatoria (Random) aplica un efecto al azar cada vez que ocurre el evento. Al seleccionar una transición también debemos determinar su duración, medida en segundos. Esto establecerá cuánto tiempo se desplegará el efecto. 3) Crear una animación de elementos de página con HTML dinámico: En lugar de aplicarle efectos especiales a toda una página podemos hacerlo a elementos especificos de la página, por ejemplo podemos aplicarles efectos al texto, a hipervínculos, a imágenes, etc. Seleccionar el elemento al cual se desea aplicar un efecto e ir a: FORMATO-EFECTOS DE HTML DINÁMICO. Hay muchos efectos de HTML dinámico que pueden aplicarse al texto. Por ejemplo hacer que se coloque en su lugar correcto de la pantalla de alguna de las siguientes maneras: Movimiento elástico: el texto se desplaza desde afuera de la pantalla hasta un poquito más allá de su lugar y después regresa a su lugar correcto. Colocar palabra a palabra: el texto cae en su lugar palabra por palabra. Volar hacia adentro: las palabras vuelan a su lugar desde la dirección que usted elige. Espiral: las palabras se van acomodando una por una, en un elegante movimiento en espiral. Estos efectos, y otros, pueden ocurrir cuando se realice determinado evento. Uno de estos eventos es la carga de la página que contiene el texto. En el caso de hipervínculos e imágenes, también puede provocar un efecto basándose en la acción del mouse. Por ejemplo, pude animar un hipervínculo de texto cuando se le haga clic o doble clic, y hacer que una imagen reacción cuando pase el mouse por encima. 4) Crear una imagen sensible al paso del mouse: (cuando cambia una imagen por otra al pasar el mouse por encima) Para crear este efecto se necesitan dos imágenes: la original y la que aparecerá en respuesta de un evento del mouse, luego seguir los siguientes pasos: 1- Insertar la primera imagen 2- Ir a FORMATO-EFECTOS DE HTML DINÁMICO 3- En la barra de herramientas de Efectos DHTML elegir: En (Evento): Pasar el mouse Aplicar (Efecto): Intercambiar imágenes (Elegir configuración): Elegir imagen... La imagen intercambiada debe ser del mismo tamaño que la original. Si no lo es, FrontPage ajusta la imagen al área de despliegue disponible. Sin embargo, esto no es aconsejable porque si la imagen se tiene que reducir o ampliar mucho para ajustar sufre una distorsión. 5) Crear una Marquesina. Una marquesina muestra un mensaje de texto con desplazamiento. Se puede crear a partir de un texto ya escrito seleccionándolo, y luego ir a INSERTARPágina 9 de 19 Diseño de páginas y sitios web - Microsoft FrontPage COMPONENTE-MARQUESINA... o escribiendo un nuevo texto en la ventana de Propiedades de Marquesina. Texto: Escribir el texto que se desea mostrar (no hay límite de longitud). Dirección: Izquierda o Derecha: Determina la dirección en la que se moverá el texto. Velocidad: Retardo: En milisegundos. Cantidad: En píxeles. Ambos determinan el incremento de velocidad de la marquesina. Comportamiento: Desplazar: La marquesina se desplaza desde una lado hasta desaparecer por el otro lado, y volver a empezar por el lado inicial. Deslizar: Aparece por un lado y se queda parada en el lado contrario. Alternar: Rebota de lado a lado. Alinear con el texto: Superior, Centro o Inferior. Tamaño: active la casilla de verificación Ancho o Alto, escriba el ancho o alto y después seleccione si se expresan En píxeles o En porcentaje. Repetir: Para repetir la marquesina continuamente active la casilla de verificación Continuamente. Para repetir la marquesina una cantidad de veces fija, desactive la casilla de verificación Continuamente y después escriba el número de veces que quiera repetir la marquesina Color de Fondo: Para elegir un color de fondo para la marquesina. También se puede cambiar el Formato de la fuente de la marquesina de dos formas: a) Desde la ventana de Propiedades de Marquesina, Presionamos en ESTILO, y se nos abrirá otra ventana y presionamos en FORMATO, desde aquí no solo podemos modificar la FUENTE..., sino que también podremos modificar PÁRRAFO.., BORDE..., NUMERACIÓN..., UBICACIÓN.... b) Haciendo un clic con el botón derecho del mouse y seleccionar FUENTE... 6) Crear un Botón Activable: Un botón puede vincularnos al igual que un hipervínculo a una página externa, a una página interna, a un objeto, o a cualquier lugar dentro de una página. Ir a INSERTAR-COMPONENTE-BOTÓN ACTIVABLE... o Texto del botón: Escribir un texto preferiblemente muy corto. En FUENTE... podremos cambiar el formato de la fuente. o Vincular a: elegir el vinculo ya sea a un sitio externo, a una página de nuestro sitio, a un elemento de una página, desde EXAMINAR.... o Color del botón: Elegir un color para el botón. o Efecto: Elegir un efecto para el botón: Colorear, Promedio de color, Brillo, Invertir brillo, Brillo suave, Eliminar efecto biselado, Aplicar efecto biselado. o Color de fondo: Elegir un color para el fondo del botón. o Color de efecto: Elegir un color para el efecto del botón. o Alto y ancho: en píxeles. En PERSONALIZADO... Podremos elegir: o Reproducir sonido: Al hacer clic y Al activar. Sólo puede utilizar archivos de sonido con formato .au para los efectos de sonido; no puede usar archivos .midi, ni .wav. Además, los archivos .au deben tener el formato de 8 bits, 8000 Hz, mono y u-law. o Imagen Personalizada: Botón: La imagen que tendrá al estar desactivado. Al activar: Elegir una imagen para cuando se active el botón. Para vincular un botón (o un hipervínculo) a un lugar dentro de la misma página que esta el botón debemos trabajar con Marcadores. Un Marcador es una ubicación o texto seleccionado en una página que se ha marcado. Si una ubicación (en lugar de texto) tiene un marcador, éste aparecerá indicado por . Si el texto tiene un marcador, se mostrará con un subrayado con rayas. Para agregar un marcador ubíquese en el lugar deseado o seleccione el texto a marcar, luego ir a INSERTAR-MARCADOR.... Luego escriba el Nombre de Marcador (coloque un nombre corto preferiblemente de una palabra). Página 10 de 19 Diseño de páginas y sitios web - Microsoft FrontPage En esta ventana también podrá ver y borrar otros marcadores ya creados en el sitio. Para utilizar un marcador en un botón activable en la ventana Seleccionar hipervínculo para botón activable, en Opcional, Marcador: elegir de la lista desplegable el marcador deseado. En Dirección URL: aparecerá el signo # seguido por el nombre (Ej: #nombre) Para utilizar un marcador en un hipervínculo en la ventana Crear hipervínculo, en Opcional, Marcador: elegir de la lista desplegable el marcador deseado. En Dirección URL: aparecerá el signo # seguido por el nombre (Ej: #nombre) Página 11 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Ejercicio Nº 7 – Microsoft FrontPage Creación de Marcos: Los marcos dividen la ventana del explorador en dos o más secciones independientes. Se puede determinar el tamaño de cada marco, y también cada marco puede tener su barra de desplazamiento. Generalmente se crean dos marcos, en uno se colocan todos los hipervínculos y en el otro será donde irán apareciendo las distintas páginas a las cuales llevan los hipervínculos. Para crear marcos lo primero es elegir alguna de las plantillas de marcos. 1) ARCHIVO-NUEVO-PÁGINA..., en la combinaciones de páginas enmarcadas. ficha PÁGINAS DE MARCO, contiene 10 En el cuadro de Vista Previa podremos ver el tamaño y alineación aproximada de los marcos. Las plantillas de marcos que se encuentran son: Contenido: un marco de contenido a la izquierda y un marco principal. Los hipervínculos del marco de contenido modifican el marco principal. División horizontal: marcos superior e inferior, independientes entre si. División vertical: marcos izquierdo y derecho, independientes entre si. Encabezado: un marco de encabezado en la parte superior y el marco principal por debajo. Los hipervínculos del marco de encanbezado modifican al marco principal. Encabezado, pie de página y contenido : una marco de encabezado en la parte superior, un marco de pie de página en la inferior y un marco de contenido. Los hipervínculos de los marcos de encabezado y de pie de página modifican al marco de contenido. Jerarquía anidada: un marco a la izquierda que modifica al marco de la derecha, dejando sin cambio al marco principal. Jerarquía arriba-abajo: un marco en la parte superior, que modifica al intermedio, dejando al marco principal. Notas al pie: un marco inferior con notas al pie y un marco principal. Los hipervínculos del marco principal cambian las notas al pie. Pie de página: un marco inferior y otro superior principal. Los hipervínculos del marco inferior cambian al marco principal. Titular y contenido: un marco para el titular en la parte superior, un marco de contenido a la izquierda y un marco principal. Los hipervínculos del marco de titular modifican el marco de contenido. 2) Elegiremos en este caso Encabezado, pie de página y contenido. En cada marco aparecerán dos botones: NUEVA PÁGINA y ESTABLECER COMO PÁGINA INICIAL. El botón Nueva página crea una página nueva y la coloca en ese marco. El Botón Establecer como página inicial abre un cuadro de dialogo que le permite colocar en el marco alguna página ya hecha. Esta página puede ser parte del mismo Sitio o estar situada en un sitio externo. Cuando guardamos el sitio se crearan una página por cada marco y una página más que contendrá todos los marcos juntos. En este caso serán 4 páginas. La página que contenga todos los marcos será la que llamaremos Index. 3) En el marco superior elegimos el botón Nueva Página y le colocaremos el titulo de nuestro sitio. Página 12 de 19 Diseño de páginas y sitios web - Microsoft FrontPage 4) En el marco inferior elegimos el botón Nueva Página y le o bien la Fecha de ultima actualización, o por ejemplo Copyright © 2006 por ......... 5) En el marco izquierdo elegimos el botón Nueva Página y crearemos los botones o textos que servirán de hipervínculos, los cuales nos llevaran a navegar en el marco derecho, es decir el marco principal, todas las páginas. 6) Seleccionar el primer botón o texto, por lo general el primer hipervínculo nos llevara a la página de inicio, dentro de Propiedades de hipervínculo en Marco de destino elegimos principal (o hacemos un clic en el marco derecho), luego en Dirección URL elegimos una página en blanco (Crea una página y un vinculo a la página nueva). Entonces podremos crear la página. En este caso elegimos vincular el hipervínculo al marco principal es decir al valor predeterminado, pero además de esta opción contamos con otras 4 alternativas más: Valor predeterminado (Principal): El marco en el que se abren todos los hipervínculos cuando no se especifica ningún marco de destino. El mismo marco: El mismo marco que contiene la página con el hipervínculo. Toda la página: Una nueva página que ocupa toda la ventana del explorador. Ventana nueva: Una nueva página en una nueva ventana del explorador que deja abierta la ventana del explorador existente. Marco primario: La página que contiene el marco del hipervínculo y otros creados al mismo tiempo. 7) Crear por lo menos 3 hipervínculos y sus correspondientes páginas más siguiendo los mismos pasos del punto anterior. 8) Al ver en la vista previa del explorador notaremos que el marco derecho (Principal) se encuentra completamente vació, solo veremos algo si tocamos uno de los hipervínculos. Para que al ingresar al sitio podamos ver algo en este marco elegimos el botón Establecer como página inicial y en el cuadro de dialogo elegimos nuestra página de inicio. 9) Para modificar el tamaño de un marco, haciendo clic en un marco seleccionamos Propiedades de marco. También desde el menú Marcos podemos Eliminar o dividir un marco. 10) Crear una Tabla, con información y en una página a elección. 11) Para agregar un contador: INSERTAR – COMPONENTE – CONTADOR DE VISITAS A LA PÁGINA... Los contadores al igual que los libros de visitas, son servicios gratuititos, pero para que estos funcionen debemos colocar un código en HTML en nuestra página, algunos de estos servicios los brinda FastCounter de LinkExchamge de Microsoft, el servicio es gratuitito a cambio de un hipervinculo con el sitio de FastCounter. 12) Crear botones a partir de imágenes. Aplicarle un borde biselado y un hipervínculo a una imagen, o también se pude crear un botón activable y en personalizado agregar una imagen de fondo. 13) Animar el sitio aplicando transición entre páginas, marquesinas, imágenes sensibles al mouse, etc. Página 13 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Ejercicio Nº 8 – Microsoft FrontPage Inserción de componentes de Office en una página Web: Las hojas de cálculo y otros componentes de Office se implementan mediante controles ActiveX, el cual es una norma para crear programas interactivos que se ejecutan en páginas Web. Fue creada por Microsoft y solo tiene soporte en Internet Explorer 3.0 y superiores. 1) Realizar el ejercicio en una hoja en blanco. Para insertar una hoja de calculo ir a INSERTAR – COMPONENTE - OFFICE SPREADSHEET. La hoja de calculo aparecerá en la vista página tal como se vera en la página Web. También funcionara como una hoja de calculo, por lo que se pueden introducir valores, formulas y funciones directamente en ella. Dentro de la vista página, se puede configurar la hoja de cálculo tanto como queramos y su información se mantendrá en la página cuando esta se cargue en el explorador. Los visitantes pueden cambiar los valores de la hoja de cálculo, para ver como afecta a otros cálculos del control, manipulándolos como si estuvieran usando Excel. Estos cambios no son permanentes en la hoja de cálculo ni pueden guardarse con el explorador. 2) Cargar los siguientes datos y calcular la población con el botón de Autosuma. Viviendas 188765 Varones 188605 Mujeres 202919 Población 3) Realizar un grafico a partir de los datos anteriores. Para inserta un grafico iremos a INSERTAR – COMPONENTE – OFFICE CHART. 4) Los cambios que se hagan en la hoja de cálculo se reflejaran de inmediato en el gráfico. Para probar esto cambiar los valores o los títulos. 5) Para cambiar el formato del grafico: Botón secundario, y del menú contextual elegimos CUADRO DE HERRAMIENTAS DE PROPIEDADES. Creación de Hojas de Estilos: Como ya vimos en el ejercicio 1 y 2 FrontPage nos permite elegir todo el aspecto de un Web al mismo tiempo con los TEMAS. Los temas son similares a las hojas de estilos en cascada (CSS), pero mucho mas limitados. Una hoja de estilos o CSS, es un conjunto de reglas y características que, aplicadas a una página web o a un conjunto de ellas, pueden modificar su apariencia. De esta forma, podemos separar en cierta forma el diseño de la página de su contenido. Gracias a las hojas de estilos podemos de alguna manera homogeneizar y automatizar el trabajo que supone el diseño de una Web. Podemos definir un estilo para los títulos y otro para el texto, de forma que no tengamos que modificar cada vez el texto y los títulos para que tengan la apariencia que queramos. Las hojas de estilos se guardan con la extensión .css. Página 14 de 19 Diseño de páginas y sitios web - Microsoft FrontPage 6) Para crear una Hoja de Estilos ir a ARCHIVO – NUEVO – PÁGINA, elegir la ficha HOJAS DE ESTILOS. Elegimos por ejemplo el estilo Arcos. Podremos leer en Descripción como esta formato cada estilo predeterminado. Hacemos clic en Aceptar y FrontPage nos abre una nueva hoja de estilos. 7) Guardamos la hoja de estilos y se guardara como Hojas de estilos de hipertexto lo cual le dará la extensión .css. 8) Abrimos una de las páginas ya creadas por ejemplo la Index, y luego ir a FORMATO – VÍNCULOS DE HOJAS DE ESTILOS..., nos da las opciones: A todas las páginas, o a Páginas seleccionada, nosotros para poder probar varios estilos en este caso elegiremos la opción a páginas seleccionadas, presionamos en AGREGAR, y elegimos el estilo que hayamos guardado anteriormente. 9) Para modificar el estilo que creamos, abrimos el estilo e ir a FORMATO – ESTILO. Dentro de Lista contamos con dos opciones, en este caso como elegimos un estilo predeterminado, nos muestra primero Estilos definidos por el usuario, en el cual podremos ver todos los Estilos utilizados y ver su vista previa, si presionamos en MODIFICAR nos da su descripción y nos permite cambiar el FORMATO de fuente, párrafo, borde, numeración y ubicación. La segunda opción de Lista es Todas las etiquetas HTML en la cual nos muestra todas las etiquetas a las cuales les podremos aplicar formatos y crear mas estilos. 10) Crear una hoja de estilos a partir de una HOJA DE ESTILOS NORMAL el cual creara un archivo vació en el que se pueden añadir los estilos. Aplicarlo a otra página del Sitio. Cuando modifiquemos un estilo ya aplicado en una página, la página se modificara automáticamente con nuestra modificación. Etiquetas: Las hojas de estilos usan etiquetas HTML para identificar los elementos de la página. Algunas etiquetas HTML que debemos conocer son: a: se refiere a los hipervínculos. table: se refiere a las tablas. body: se refiere al cuerpo del documento (texto en general). h1..h6: se refiere a los encabezados (para los títulos). p: normal pre: con formato address: dirección li: para cada elemento de una lista numerada, con viñetas, de directorio o de menú ol: antes y después de una lista numerada ul: antes y después de una lista con viñetas u: efecto subrayado strike: efecto tachado strong: texto en negrita blink: efecto intermitente Página 15 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Ejercicio Nº 9 – Microsoft FrontPage Formularios: Los formularios se utilizan en las webs para recoger información del visitante. Éste puede escribir libremente en los campos que se le presentan o seleccionar una opción de las que se le ofrecen. Los formularios constan de los siguientes elementos: Cuadros de texto de una línea Cuadros de texto con desplazamiento Casillas de verificación Botones de opción Menús desplegable Etiquetas Botones de comando. Creación de Formularios utilizando el Asistente para páginas de formulario: 1) Ir a ARCHIVO – NUEVO – PÁGINA y luego elegir ASISTENTE PARA PÁGINAS DE FORMULARIO. Este asistente nos hará una serie de preguntas para determinar que desea colocar, como por ejemplo: ¿Qué preguntas quiere hacer? ¿Qué tipo de respuestas son aceptables? ¿Qué formato deben tener las preguntas y respuestas en la página Web? ¿Qué pasara después con las preguntas? 2) Primero se deberá elegir el tema de la pregunta dentro del cual nos presenta mas preguntas relacionadas con el tema, o podemos elegir un tipo de dato para una pregunta creada por nosotros. Los temas los cuales cuentan con varias preguntas relacionadas entre si son: Información de contacto (Nombre, Dirección, Número telefónico, etc.). Información de cuenta (Nombre de usuario y contraseña). Información de producto (Nombre, versión, código, etc. del producto). Información de pedido (Productos a ordenar, información de facturación, etc.). Información personal (Nombre, Edad, etc.). Los tipos de datos son: Fecha Hora Número Intervalo (un valor del 1 al 5) Cadena (una sola línea de texto) Párrafo Booleano (una respuesta limitada a sólo una de dos opciones). 3) Después de haber establecido todas las preguntas del formulario, se debe elegir como se presentaran en la página Web. Se puede elegir que se presente como una serie de párrafos o como una lista, que puede ser: Página 16 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Una lista numerada. Una lista con viñetas. Una lista de definiciones. 4) El ultimo paso es decidir como guardara las respuestas del usuario. Hay tres opciones disponibles: Guardar los resultados en una página Web. Guardar los resultados en un archivo de texto. Utilizar secuencia de comandos personalizada CGI. La ultima opción para guardar los resultados es utilizar una secuencia de comandos personalizada de interfaz gateway común (CGI). Esto se refiere a programas especiales, llamados secuencias de comandos, que se ejecutan en combinación con páginas Web. 5) Para poder modificar este formulario y cada uno de sus elementos lo veremos en los puntos siguientes al crear un formulario desde una hoja en blanco. Creación de Formularios a partir de una hoja en blanco: 1) Abrir una hoja en blanco. 2) Ir a INSERTAR – FORMULARIO - CUADRO DE TEXTO DE UNA LÍNEA. Cuando insertamos el primer elemento, cualquiera sea el elegido, se crea un recuadro con líneas entrecortadas dentro del cual se pondrán todos los demás elementos del formulario. Dentro de este recuadro se crean dos elementos adicionales: dos botones que se colocan al final del formulario, uno de enviar y otro de restablecer, es decir, borrar todo lo que se tiene escrito en el formulario. El formulario hay que crearlo dentro del rectángulo con línea entrecortada. Para ello, se van creando los espacios necesarios y poniendo los títulos que queramos a los campos. El primer paso sería pensar los campos que queremos crear y colocarlos en el formulario con un nombre. Pero estos nombres son los que vería el visitante de nuestra página. Una vez creado el formulario tenemos que ir dándoles los nombres que queramos que aparezcan cuando recojamos los resultados. 3) Colocar delante del primer cuadro te texto Apellido, a fin de que sea el nombre que vea el visitante. 4) Con el botón secundario del menú contextual ir a la opción PROPIEDADES DE CAMPO DE FORMULARIO..., y en Nombre: colocar el nombre con el cual recibiremos la información. También aquí podremos colocarle un Valor inicial, el cual aparecerá en le cuadro de texto cuando el formulario sea cargado por primera vez o al tocar el botón Restablecer. Podemos limitar la cantidad de caracteres en Ancho de caracteres. Y si no quisiéramos que se vea el contenido podemos elegir la opción de Contraseña, y solo se verán asteriscos. Página 17 de 19 Diseño de páginas y sitios web - Microsoft FrontPage 5) Con el botón secundario del menú contextual ir a la opción VALIDACIÓN DE CAMPO DE FORMULARIO aquí podremos elegir el Tipo de dato: por ejemplo si es texto, número, etc. Y modificar algunas características que respectan a cada tipo de dato. 6) Seleccionar el texto Apellido y su correspondiente cuadro de texto, e ir a INSERTAR – FORMULARIO – ETIQUETA. Las etiquetas se utilizan para hacer preguntas, permiten a los visitantes completar más fácilmente los formularios, ya que por ejemplo en lugar de hacer clic en un elemento como un cuadro de texto también podrá hacer clic en la etiqueta y le dará la misma posibilidad de completar el cuadro de texto. 7) Inventar una pregunta y escribir más de 3 respuestas posibles, esta pregunta puede tener como respuesta correcta una sola opción, varias o ninguna, para esto utilizar delante de cada respuesta una casilla de verificación: INSERTAR – FORMULARIO – CASILLA DE VERIFICACIÓN. 8) Inventar otra pregunta y escribir más de 3 respuestas posibles, esta pregunta puede tener como respuesta correcta una sola opción, para esto utilizar delante de cada respuesta un botón de opción: INSERTAR – FORMULARIO – BOTÓN DE OPCIÓN. 9) Agregar otra pregunta la cual se contestara utilizando un menú desplegable, los menús desplegables tienen un propósito similar al de los botones de opción, ya que permiten al visitante seleccionar una de varias opciones. Insertamos este elemento: INSERTAR – FORMULARIO – MENÚ DESPLEGABLE. Al insertarlo este menú estará vació, para agregar las opciones debemos ir con el botón secundario del menú contextual a la opción PROPIEDADES DE CAMPO DE FORMULARIO..., y con el botón agregar y escribiendo todas las opciones que queremos darle a este menú. 10) Los botones de comandos (INSERTAR – FORMULARIO – BOTÓN DE COMANDO), se pueden agregar si se ha eliminado el botón de Enviar o Restablecer, pero también se pueden crear botones para utilizarlos de hipervínculos, y que abra otra página o sitio, pero también se utilizan muchas veces para crear un botón de ayuda el cual carga una página en la cual se explica como llenar el formulario. 11) La Opción INSERTAR – FORMULARIO – IMAGEN se utiliza para cambiar el aspecto de un botón al de una imagen. 12) El último paso en la creación del formulario es decidir donde se va a poner toda la información reunida. Contamos con las siguientes opciones: Enviarla como correo electrónico a una dirección especifica. Almacenarla en un archivo del Web. Almacenarla en una base de datos del Web. Enviarla a un programa que maneje formularios en el servidor. Dentro del formulario haciendo un clic con el botón secundario del menú contextual elegimos PROPIEDADES DE FORMULARIO. Para guardar los datos del formulario en un archivo, especifique el nombre y la carpeta donde estará almacenado, Si el archivo no existe cuando alguien envié el formulario se creara automáticamente. Página 18 de 19 Diseño de páginas y sitios web - Microsoft FrontPage Otra forma es, llamar a un programa ubicado en el servidor Web, que pueda leer los datos y hacer algo con ellos, la mayoría de estos programas solo envían los datos a direcciones de correo electrónico especificada. Página 19 de 19