Monografias.com > Computación > Internet
Descargar Imprimir Comentar Ver trabajos relacionados

Diseño de página Web en Frontpage 98




Enviado por adrian_reihs



    1. Introducción a Frontpage
      98
    2. Trabajar en el
      editor
    3. Mapa de
      imágenes
    4. Estructurar la página
      con tabla
    5. Estructurar la Web Cob
      Frames
    6. Incorporar elementos
      activos
    7. Utilizar
      formularios
    8. Componentes de
      Frontpage
    9. Herramientas de
      productividad

    Tema1: INTRODUCCIÓN A FrontPage
    98

    1.1 ¿Qué es
    Frontpage98?

    Micrososoft FrontPage 98 es una aplicación
    especializada en la creación de Diseño
    de Página Web.

    En él se puede escribir texto,
    incorporar imágenes,
    modificar el código
    HTML generado
    por Frontpage98 para adaptarlo a lo que se quiera conseguir,
    Mapas de Imágenes,
    Formularios,Elementos Multimedia(Sonido,
    Animación,Video)Fuentes de
    texto,Hojas de
    estilo.

    1.2 Instalación De FrontPage
    98

    Debemos instalar El Servidor Web de
    FrontPage
    , para ello elegimos la instalación
    Personalizada y activaremos la casilla Web personal de
    FrontPage
    y la casilla de Imágenes
    adicionales
    .

    Una vez finalizada la instalación, FrontPage realizara
    una prueba TCP/IP, en la que
    se determina el nombre del equipo y su dirección IP. Esto es
    necesario para que nuestro equipo actue como servidor web.
    (Lugar donde se guardan las Páginas
    Web para que los usuarios puedan a acceder a ellas. Si la
    prueba se realiza con éxito,
    se crea un Web personal en la
    dirección http:
    \nombre_ordenador, donde nombre _ ordenador es el nombre de
    nuestro ordenador.

    El web que se crea se llama Web raíz y esta protegido
    con un nombre de usuario y contraseña de administrador.

    1.3 Explorador De FrontPage
    98

    La ventana del Explorador de FrontPage se divide en dos
    partes:

    A la izquierda se encuentra la lista de visitas,
    mientras que a la derecha se mostrara el contenido de nuestro
    proyecto
    web.

    Las vistas no son más que formas distintas
    de ver el proyecto que
    hemos abierto. En la vista Carpetas, podemos ver la
    estructura en
    carpetas de nuestro proyecto web.

    En la figura anterior se podrá ver como existe
    una carpeta principal en la que se sitúan páginas
    Web. Aparecen dos subcarpetas: images, carpeta donde
    se guardan las imágenes utilizadas y _private que
    es una carpeta especial creada por FrontPage y donde
    podemos poner aquellos ficheros o páginas que sólo
    podemos ver nosotros.

    En la vista Todos los archivos, se muestran todos
    los archivos que
    constituyen el proyecto web. Puede modificar el nombre de los
    ficheros y esos cambios se actualizaran inmediatamente en el
    proyecto.

    La vista Exploración es similar a la de
    Carpetas. Desde aquí se puede visualizar e imprimir
    la estructura del
    proyecto web.

    En la vista Hipervínculos puede ver los
    hipervínculos que salen y llegan a las páginas
    web.

    En la parte izquierda se sitúa la estructura del
    proyecto y en la derecha, los hipervínculos que llegan y
    salen de la página que tenga seleccionada.

    En la vista Estado de hipervínculos, se
    comprueba si los hipervínculos que se han definido en
    nuestras páginas web son correctos.

    La vista Temas: Los temas son un conjunto de
    elementos de diseño,
    combinación de colores, fuentes,
    imágenes, etc.

    En la vista Tarea, podrá apuntarse las
    tareas que debemos realizar en el trabajo
    diario: modificación de alguna página, mejora de
    las imágenes.

    1.4 Editor De
    FrontPage

    Puede acceder al Editor de FrontPage utilizando
    el botón situado en la barra de herramientas
    del explorador o bien haciendo donde click en cualquiera de las
    páginas web.

    En la zona central de la ventana se sitúa el
    área de edición, donde se trabaja para conseguir el
    aspecto deseado.

    El área de edición se puede ver de tres
    formas diferentes, según en el área que se
    encuentre:

    Normal, HTML y vista
    previa.

    En la ficha Normal se inserta el texto y el resto
    de elementos de la página.

    Podemos acceder a la ficha HTML, donde aparece el
    código
    HTML generado por FrontPage.

    En ella podemos modificar el código.

    La ficha vista previa presenta la página
    tal como se visualizaría en Internet
    Explorer.

    1.5 Editor De
    Imágenes

    Existe otra aplicación que puede ayudarnos en la
    creación de páginas web. Esta aplicación se
    llama Microsoft Image Composer.

    Con Image Composer , podemos crear y editar
    imágenes que deseamos incluir en nuestras páginas
    web.

    Para acceder a esta aplicación se puede hacer de
    diferentes formas:

    • En el Explorador de FrontPage elegir
      Herramientas y seleccionar Mostrar Editor de
      imágenes.
    • Desde el Editor de FrontPage elegir
      Herramientas y seleccionar Mostrar Editor de
      imágenes.

    El editor de imágenes es una completa
    aplicación de dibujo que
    permite trabajar con distintos tipos de
    imágenes.

    También podemos utilizar la aplicación
    Gif Animator, con ella podemos crear gif
    Animados
    .

    Podemos acceder a ella desde el menú de inicio
    de Windows
    o desde el menú TOOLS de Image
    Composer.

    1.6 Utilizar La
    Ayuda

    FrontPage presenta un sistema de ayuda
    compuesto por tres fichas:
    Contenido, Indice, Buscar.

    Elegimos Ayuda de Microsoft
    FrontPage
    en el menú Ayuda y aparecerá la
    siguiente ventana.

    La ficha Contenido es ideal para tener una
    visión general de la aplicación.

    En esta ficha la ayuda se presenta dividida por temas,
    representados a través de iconos de libros.

    Una vez abierto un tema del contenido (haciendo doble
    clic sobre él) , podemos encontrar subtemas u hojas de
    ayuda.

    Otra forma de obtener ayuda es a través de la
    ficha Índice. Se accede a una lista de temas
    ordenadas alfabéticamente.

    Podemos elegir directamente un tema de la lista o
    teclear algunas palabras que se relacione con la ayuda que
    necesitemos.

    La ficha Buscar permite introducir varias
    palabras o incluso frases completas de texto sobre un determinado
    tema.

    TEMA 2: TRABAJAR EN EL EDITOR

    2.1 CREANDO UN NUEVO
    WEB

    Para crear un nuevo Web, hacemos los pasos
    siguientes:

    1. Iniciamos el Explorador de FrontPage, elegimos Crear
      nuevo Web de FrontPage
      y aceptamos.

      Para realizar nuestras propias páginas
      elegiremos: web de una página.

    2. Indicamos el tipo de Web que deseamos crear (
      Web de una página, Importar un web asistente, Desde
      asistente o plantilla).
    3. Indica él titulo y la ubicación del
      nuevo Web
      . El titulo es descriptivo sobre el web y es el
      que se utiliza para en la lista que aparece al iniciar
      FrontPage.

    Fromtpage creara una carpeta donde guardara el web.
    Puede ser una carpeta del disco duro o
    de su ubicación local.

    Por Ejemplo:

    Queremos crear un web de forma que nuestras
    páginas estén incluidas en una carpeta de un
    disquete.

    1º) Seleccionamos la opción: Web de una
    página

    2º) En el apartado Elija un titulo para su Web
    de FrontPage:

    Escribiremos a: Fromtpage(Nombre de la carpeta donde
    tendremos nuestras páginas en el disquete)

    3º) Hacemos clic en Cambiar y ponemos: a:
    FrontPage y aceptamos.

    2.2 AÑADIR
    CONTENIDO

    Una vez creado el web, trabajaremos en el Editor, donde
    se crea y se modifica la página
    Web.

    Para facilitar el manejo de texto FrontPage incorpora la
    barra de herramientas
    Formato, en la que se sitúan la mayoría de botones
    que vamos a necesitar.

    Si el texto que vamos a escribir es un párrafo
    independiente, elegimos la opción
    Normal.

    El proceso a la
    hora de modificar cualquier característica del texto siempre es el
    mismo:

    1º) Seleccionamos el texto y después
    realizamos el comando adecuado, ya sea desde la barra de
    herramientas Formato o desde el comando Fuente del menú
    Formato.

    Desde este cuadro de diálogo
    podemos indicar el tipo de fuente a

    utilizar(cursiva, negrita, subrayado). Además
    podemos cambiar el tamaño, el
    color.

    Además de utilizar las características de un determinado tipo
    de letra, el cuadro de diálogo
    Fuente
    nos permite acceder a otros comandos
    especiales de formato situados en la ficha Estilos
    especiales
    .

    A excepción del texto, que se escribe
    directamente en la página, el resto de elementos:
    imágenes, lineas, objetos, etc., se añaden
    al contenido de la página a traves del menu
    insertar.

    Una vez insertado el elemento, podemos utilizar el
    menú contextual (realizando clic con el botón
    derecho en dicho elemento)
    , para cambiar cualquiera de sus
    propiedades.

    2.3 INSERTAR LISTAS EN LA
    PÁGINA WEB

    Una forma sencilla de organizar el texto de la
    página es ir insertando listas.

    Las listas sin numerar se conocen en FrontPage
    como listas con viñetas.

    Cada elemento de la lista es un párrafo
    distinto de texto.

    Para crear listas con viñetas, se
    utiliza el botón de la barra de herramientas y para las listas
    numeradas, el botón

    En el cuadro de diálogo que aparece,
    podemos establecer el estilo de viñeta o de
    numeración,
    además de crear otros tipos de
    listas.

    El cuadro de diálogo se divide en cuatro fichas:

    Viñetas con imagen,
    Viñetas, Numeración y Otros
    .

    En las fichas Viñetas y
    Numeración se indica el estilo a
    realizar.

    En la ficha Otros se permite crear otros tipos
    de listas:
    de definición,
    menú.

    En la lista Viñetas con imagen, se indica
    una imagen como viñeta.

    A la hora de insertar una imagen en la página
    deberemos indicar su ubicación
    incluso podemos
    utilizar la Galería de imágenes de
    Microsoft
    .

    Si no disponemos de la imagen, indicamos su
    ubicación
    , ya sea desde una carpeta de nuestro
    equipo o en una
    ubicación en Internet

    2.4 MEJORANDO EL
    ASPECTO

    Una de las caracteristicas que mejor resultado ofrece
    para mejorar el aspecto general de la página es utilizar
    un fondo atractivo.

    Para indicar el aspecto del fondo de la
    página,
    acceda al comando Fondo del menú
    Formato
    .

    Aparecerá el siguiente cuadro de
    diálogo.

    En la sección Especificar fondo y colores,
    podemos establecer, bien una imagen o bien un color
    como fondo de la página
    . Además podemos
    especificar el color del texto y
    de los hipervínculos.

    También podemos utilizar el fondo conseguido en
    otra página web. Para ello, indicamos, en la
    sección Obtener fondo y colores de la
    página
    , donde se encuentra dicha
    página.

    Si lo que deseamos es utilizar un determinado
    color, desplegamos la lista adecuada y lo elegimos
    directamente. Si no aparece en la lista de colores,
    utilizamos la opción Personalizado.

    En el caso de utilizar una imagen, activamos la
    casilla Imagen de fondo e indicamos la
    ubicación.

    2.5 INSERTAR
    HIPERVINCULOS

    1º) Crear un marcador en la página: Se
    selecciona el objeto que actuara como marcador y después
    se define utilizando el comando Marcador del menú de
    Edición

    Aparecerá el siguiente cuadro de
    diálogo.

    Debemos indicar el nombre del marcador (Con el
    que será conocido a la hora de la definición de
    hipervínculos).

    2º) Definir el hipervínculo:
    Seleccionamos el objeto que actuara como hipervínculo
    y
    elegimos Hipervínculo en el
    menú Edición o utilizamos el botón de la barra de
    herramientas.

    Aparecerá el cuadro de diálogo de la figura,
    donde lo único que tenemos que hacer es indicar a donde
    apunta el hipervínculo.

    Para definir un hipervínculo que apunte a un
    determinado marcador, elegirlo de la lista Marcador.

    Para definir un hipervínculo que apunte a otra
    página del mismo web, elegirlo en la lista o escribiendo
    su Dirección URL.

    Para definir un hipervínculo a cualquier otro
    fichero que este disponible en su ordenador, lo buscamos
    utilizando el botón

    Para definir un hipervínculo que apunte a una
    página situada en Internet, escribimos la
    dirección completa de la página al estilo de


    Podemos buscar dicha página en Internet
    utilizando el botón

    También podemos definir un hipervínculo
    a una dirección de correo
    electrónico: Para ello, pulsamos en el boton e indicamos la
    dirección del correo electronico.

    Podemos definir un hipervínculo a una nueva
    página, pulsando el botón

    ¿QUÉ OCURRE CUANDO DEFINIMOS UN
    HIPERVINCULO A UN DETERMINADO FICHERO?

    Cuando se define un hipervínculo a un fichero html,
    se carga automáticamente la página web en el
    navegador. Sin embargo, el fichero es de otro tipo, entonces esta
    permitido que se descargue dicho fichero desde el web. Si es un
    fichero ejecutable, tendrá la opción de ejecutarlo
    desde su ubicación original o traérnoslo a nuestro
    ordenador.

    2.6 GUARDAR PÁGINA Y
    COMPROBAR EL RESULTADO

    Debemos guardar nuestro trabajo y observar el resultado en un
    navegador de Internet.

    Para ello utilizaremos el comando Guardar Como del
    menú Archivo
    .

    FrontPage nos pedirá que indiquemos el nombre y
    titulo de la página, si la página tiene
    objetos insertados, nos pedirá lo mismo para los objetos.
    En el caso de las imágenes es adecuado guardarlas
    en una carpeta aparte, como imagen.

    Una vez guardada la página por primera vez, podemos
    seguir haciendo modificaciones en la misma.

    Cuando deseemos volver a guardarla, no utilizaremos Guardar
    Como
    sino Guardar.

    Alternativamente al comando Guardar del menú
    Archivo, puede
    utilizar el botón de la barra de herramientas.

    Para ver el resultado de la página, acuda a la ficha
    Vista Previa. Tal como se ve en esta ficha deberá
    verse en Internet Explorer.

    Si deseamos ver el resultado en un navegador,
    utilizaremos el botón Vista previa en el
    programa explorador o elegimos el comando equivalente en el
    menú Archivo.

    Si lo elegimos a través del menú podremos
    indicar en que navegador deseamos ver la
    página Web (entre los que tengamos
    instalados en el ordenador).

    TEMA 3: MAPA DE IMÁGENES

    3.1 ¿QUÉ ES UN
    MAPA DE IMAGEN?

    Un mapa de imagen no es mas que una imagen en la que se han
    definido Zonas activas o Hipervínculos.

    3.2 PREPARANDO LA IMAGEN CON
    MICROSOFT
    IMAGE COMPOSER

    El primer paso a la hora de crear un mapa de imagen es
    justamente disponer de la imagen en la que se definirán
    los hipervínculos.

    Para ello, utilizamos la Imagen Composer.

    Si ya disponemos de la imagen, lo único que necesitamos
    es definir las zonas activas de la misma, por lo que no
    será necesario utilizar esta aplicación.

    Si estamos trabando en el Editor de frontpage, lo mejor
    es utilizar el comando Mostrar Editor de Imágenes en el
    menú Herramientas
    .

    Imagen Componer permite componer una imagen a partir de otras
    o añadiendo objetos propios, como botones, textos,
    artísticos.

    La imagen resultante será todo aquello que aparezca en
    los limites de la composición, que es el rectángulo
    blanco que puede verse en la figura adjunta. Lo que esta fuera de
    la composición no formara parte de la imagen final.

    Lo primero es establecer los limites de la composición,
    es decir, el tamaño del rectángulo
    blanco.

    Para establecer las dimensiones de la
    composición
    , acceda al comando Composition
    Setup
    (Preparación de la composición) en
    el menú File (Archivo).
    Aparecerá el siguiente cuadro de diálogo, donde
    indicara las dimensiones en píxeles.

    Una vez establecidas las dimensiones de la composición,
    el paso siguiente es ir añadiendo las imágenes u
    objetos que la continuaran. Este proceso se
    realiza utilizando el menú

    insert ( Insertar).

    Si disponemos la imagen en un archivo, elegimos From
    File
    (Desde Archivo) e indicamos donde se encuentra: La
    imagen aparecerá inmediatamente en Image Composer pudiendo
    tener que desplazarla para que se muestre en el
    rectángulo de la composición.

    La imagen queda insertada como objeto más de la
    composición y, como tal, puede ser modificada. , Por
    ejemplo, para cambiar su tamaño, podría utilizar
    las flechas que aparecen en sus limites.

    3.3 PREPARANDO LAS ZONAS
    ACTIVAS

    Las zonas activas de un mapa de imagen son aquellas que
    insertaremos hipervínculos.

    Estas zonas activas pueden tener cualquier forma
    cerrada.

    En Image Composer podemos introducir texto en la
    composición, además de aplicarle efectos
    especiales
    , que permitirán conseguir un resultado
    espectacular.

    La barra de herramientas situada en la parte izquierda de
    la ventana permite realizar la mayoría de acciones de
    Image Composer.

    Entre ellas, la incorporación de texto se
    consigue con el botón Text . Una vez seleccionada una herramienta,
    aparecera una ventana flotante donde se podrán establecer
    alguna de las características de dichas
    herramientas.

    Cuando tengamos todas las características
    deseadas para el texto, entonces es el momento de incorporar los
    objetos de texto a la composición. Para ello lo
    único que tenemos que hacer es dibujar un
    rectángulo en la zona de trabajo
    , de forma que el
    texto quepa en dicho espacio.

    El texto forma parte de la
    composición como un objeto independiente, por lo
    que se puede cambiar cualquiera de sus características si
    previamente lo
    seleccionamos.

    Si después de insertar distintos objetos de texto
    desea alinearlos, podrá hacerlo de forma

    sencilla utilizando las herramientas Arrange (
    Disposición) .

    1º) Elegimos la herramienta de selección.

    2º) Hacemos clic con el raton en aquellos
    objetos que deseamos alinear. Mantenemos pulsada la tecla [May]
    al mismo tiempo para
    realizar una selección
    múltiple.

    3º) Elija la herramienta Arrange con la que
    aparecerá una ventana flotante en la que debe elegir como
    alinear los objetos.

    Tenemos distintas posibilidades a la hora de alinear los
    objetos. Todas ellas a través de los botones de la
    sección Aling de la ventana flotante. Sin
    embargo, debemos tener en cuenta que no se puede deshacer
    automáticamente el desplazamiento de un objeto, sino que
    lo tendrá que hacer de forma manual.

    Si deseamos probar distintas formas de alinear los
    objetos, lo mejor es primero recordar la posición
    original, de forma que podamos volver a ella rápidamente.
    Esto se consigue con el botón Set Home position
    (establecer posición inicial)

    Una vez guardada la posición inicial , siempre
    podrá volver a esta con el botón Restaura to
    Home Position
    (volver a posición inicial).

    3.4 APLICANDO
    EFECTOS

    Image Composer permite aplicar efectos con la
    herramienta Effects (Efectos)

    Al pulsar sobre este boton, aparece su
    correspondiente ventana flotante, en la que los efectos aparecen
    divididos en
    categorías.

    Una vez elegida la categoría deseada, debe
    seleccionar el efecto a aplicar.

    El efecto que quiere conseguir es que los objetos de
    texto sobresalgan del resto de la imagen. Para ello, viene bien
    la categoría outtlines ( Contornos).

    Preparando la imagen para el fondo de la pagina
    web

    Las imágenes que aparecen en el fondo de las
    páginas web suelen ser pequeñas y con colores y
    formas suaves, para que no molesten y pueda verse comodamente el
    resto de los elementos de la página.

    Image Composer permite conseguir este efecto en
    cualquier imagen, como si la imagen se viera a través de
    una lente transparente, se hace de la siguiente forma:

    1º) Insertamos la imagen en el editor de
    imágenes.

    2º) Seleccionémosla y pulsamos en el
    botón Effects (Efectos).

    3º) Elegimos la categoría Color Enhacement
    (Mejora el color).

    4º) Dentro de esta categoría, elegimos el
    efecto Transparent (Transparencia) y
    aplícalo.

    5º) Si deseamos establecer el nivel de
    transparencia / opacidad con el que se aplica el efecto, acceda a
    la ficha Details (Detalles) de la ventana flotante de
    efectos.

     3.5 GUARDANDO LA
    IMAGEN

    Lo primero es guardar la composición como tal, de
    forma que podamos volver a ella y modificarla.

    Guardando la composición con el formato de
    Microsoft Image Composer , mantenemos los colores originales ya
    que se guarda en True Color (Color verdadero).

    Una vez hemos guardado la composición como tal,
    podemos obtener la imagen que utilizaremos en nuestra Web: como
    GIF o como JPEG. Para ello, elija Save for the
    web
    (Guardar para la web) en el menú File
    (Archivo).

    EL segundo paso es decidir en que formato y con
    que calidad deseamos guardar la imagen.

    Si decidimos guardar la imagen como GIF,
    deberemos decidir con que paleta de colores.

    ( Las imágenes GIF permiten un máximo
    de 256 colores diferentes para representar la imagen). En el caso
    de las imágenes
    JPEG, no hay problema, ya que la
    imagen se guarda con color verdadero.

     3.6 DEFINIENDO LAS ZONAS
    ACTIVAS

    Lo primero es insertar la imagen en la página.
    Seleccionamos la opción
    Imagen del menú
    Insertar e indicamos donde se encuentra dicha
    imagen.

    Segundo debemos seleccionar la imagen con lo que
    aparecerá automáticamente una nueva barra de
    herramientas, con botones que nos facilitan el trabajo con
    imágenes.

    Una vez dibujada la forma en la imagen, aparecerá
    el cuadro de diálogo donde se define el
    hipervínculo.

    Si la imagen tiene un determinado color,
    podríamos indicarle que es el de transparencia de
    forma que la imagen parezca que flote en la página en
    lugar de aparecer como si estuviera pegada.

    Una vez seleccionada la imagen GIF, podemos
    indicar el color de transparencia utilizando la herramienta
    Hacer transparente de la barra de herramientas Imagen. Para ello, puse
    en la parte de la imagen donde aparezca el color de transparencia
    e inmediatamente conseguiremos el efecto.

    TEMA 4: ESTRUCTURAR LA PÁGINA CON
    TABLA

    4.1 DIBUJANDO LA
    TABLA

    Disponemos de dos opciones: Insertar la tabla o
    dibujarla
    . Ambas opciones Aparecen en el menú
    Tabla.

    Insertar Tabla: Es adecuada para tablas en las
    que tiene muy clara su estructura y que todas las celdas
    presentan las mismas dimensiones.

    Dibujarla: Crea tablas más complejas, en
    las que alguna celda pueda ocupar mas de una columna o más
    de una fila, o simplemente, que tengan distintas
    dimensiones.

    Una vez elegida esta opción del menú
    Tabla, aparece la siguiente barra de
    herramientas:

    Insertar filas Insertar columnas Combinar
    celdas

    Distribuir filas equit

    Color
    de fondo

    Alineación vertical

    dibujar tabla Borrador Eliminar celdas Distribuir
    columnas equit

     Entre todas las herramientas disponibles, la
    más útil es Dibujar tabla.

    1º) Debemos dibujar un rectángulo que englobe
    la tabla en su totalidad. Después continuaremos dibujando
    las divisiones en filas y columnas.

    Cuando hayamos conseguido la tabla deseada, volveremos a
    pulsar en el botón Dibujar tabla de la barra de
    herramientas. A partir de ese momento podremos empezar a
    incorporar elementos a la tabla

    4.2 INSERTANDO ELEMENTOS

    Nos colocamos en la columna adecuada e insertamos el
    elemento. Si es texto lo escribiremos, si es una imagen u
    otro objeto, elegimos la opción del menú
    Insertar.

    4.3 MODIFICANDO LA TABLA

    Para unir dos o mas celdas, lo primero es seleccionarlas y
    después pulsar en el botón Combinar celdas.

    Para dividir una celda en distintas filas o columnas, se
    consigue con el botón Dividir celdas

    Con la herramienta Dibujar tabla podemos dibujar la
    tabla tal como la deseemos.

    Con la herramienta Borrador, podemos eliminar
    divisiones de la tabla.

    Con la herramienta Insertar filas, podemos
    añadir nuevas filas a la tabla.

    Con la herramienta Insertar columnas, podemos
    añadir columnas.

    Eliminar celdas, elimina las celdas que tengamos
    seleccionadas en ese momento.

    Combinar celdas permite conseguir que una celda se
    extienda a mas de una fila.

    Dividir celdas permite conseguir mas de una fila o
    columna en la celda en la que se encuentre.

    Alineación vertical en la celda: Al borde
    superior, al centro o alinear con el borde inferior.

    Distribuir filas equit, Distribuir columnas equit:
    Permiten establecer las mismas dimensiones para las filas y las
    columnas.

    Color de fondo : Permite modificar el color de la
    celda.

    Cuando hacemos clic con el botón derecho del
    ratón en alguna parte de la tabla, aparece un menú
    contextual con varias opciones.

    TEMA 5 ESTRUCTURAR LA WEB COB FRAMES

    5.1 Utilizando una
    plantilla

    Para utilizar una plantilla de frames, accedemos al
    Editor de Frontpage y elegimos Nuevo… del
    menú archivo. Aparecerá un cuadro de dialogo dividido
    en dos fichas:

    Página y Marcos. En la ficha marcos se
    sitúan las plantillas que hacen uso a los frames.
    La distribución en frases mas frecuente
    que se puede encontrar en la World Wide Web se consigue con la
    plantilla Contenido. (Frame pequeño en la parte
    izquierda de la ventana del navegador y uno mas grande en la
    parte derecha). Pasos a realizar para que aparezca en la
    página distribuida en frames izquierda y frames
    derecha
    :

    1º) Mostrar Editor de FrontPage

    2º) Nuevo del menú archivo

    3º) Texto a dos columnas (de la ventana de
    plantilla).

    4º) Marcos (de la ventana de Contenido).

    5.2 ESTABLECIENDO EL
    CONTENIDO

    Al utilizar una determinada plantilla de frame, Frontpage crea
    el fichero índice , es decir, aquel en el que se indica la
    estructura o división de la página en frames.

    Establecer Página inicial: Podremos indicar cual
    es la página que debe mostrarse inicialmente en el
    frame.

    Nueva página: Podremos crear una página
    nueva que se muestre inicialmente en el frame.

    Ayuda: Accederemos a los temas de ayuda de FrontPage
    relacionados con este tema.

    5.3 MODIFICANDO LA
    ESTRUCTURA

    Una vez creada la estructura de frames a partir de determinada
    plantilla, podemos modificarla tal como deseemos.

    A través del menú Marco del Editor de
    FrontPage, podremos realizar :

    Crear mas frames , eliminarlos , establecer sus
    propiedades
    .

    Por ejemplo, para eliminar un frame, no hay mas que
    seleccionarlo y elegir Eliminar Marco del
    menú Marco.

    De forma similar podemos crear nuevos frames. Para ello
    utilizaremos el comando Dividir Marco del menú
    Marco
    .

    5.4 CUARDAR LA
    ESTRUCTURA

    Para guardar la estructura de la página haremos lo
    siguiente:

    Menú Archivo : Guardar como (Guarda la estructura
    del frames)

    Guardar (Guarda la página del Frame de la
    Izquierda)
    .

    5.4 ESTABLECECIENDO
    PROPIEDADES

    Seleccionamos el frame adecuado y estableceremos sus
    características. Por ejemplo, si deseamos establecer el
    fondo de un determinado color, elegimos fondo en el menú
    formato.

    Para establecer propiedades de cada frame en particular
    deberemos seleccionar el frame y elegimos Propiedades
    de marco… en el menú Marco.

    Aparece el siguiente cuadro de dialogo:

    Podremos indicar que el marco debe tener siempre el mismo
    tamaño, que se muestre o no las barras de desplazamiento,
    los márgenes.

    Si lo que deseamos es modificar las características de
    la estructura de frames, deberemos acceder a la opción
    Propiedades de páginas de marco en el menú
    Marco.

    TEMA 6 INCORPORAR ELEMENTOS ACTIVOS

    6.1 INSERTAR SONIDOS

    Para guardar elementos multimedia,
    debemos crear carpetas en nuestro sitio web.

    Para crear carpetas en el Explorador de FrontPage nos situamos
    en la vista Carpetas y elegimos Archivo-Nuevo-Carpeta.

    Pasos para Insertar Sonido a través del Editor
    de FrontPage:

    1. Elegimos Propiedades de página en el menú
      Archivo.
    2. En la ficha General del cuadro de dialogo que aparece,
      indicamos la ubicación del sonido de
      fondo. ( Es un archivo con formato WAV ).
    3. En el mismo cuadro de dialogo podemos indicar que el
      sonido se repita indefinidamente o solo un numero determinado
      de veces.

    6. 2 INSERTAR
    VÍDEO

    FrontPage permite la inserción de ficheros AVI (Formato
    de vídeo).

    Elegimos el Comando Vídeo del menú
    Insertar
    Elementos activos y aparecerá
    el siguiente cuadro de dialogo.

    Solamente necesitamos indicar donde esta el fichero de
    vídeo que deseamos insertar.

    Para establecer propiedades elegiremos propiedades de
    imagen
    .

    En la ficha Vídeo del cuadro de dialogo que
    aparece, podemos determinar algunas características que
    afectaran a la forma de reproducir y parar el
    vídeo. Para ello activamos la casilla Mostrar
    controles
    en el explorador.

    En la sección Repetir indicamos el numero de
    veces que deseamos repetir el vídeo.

    En la sección Iniciar se indica cuando se debe
    reproducir el vídeo: al abrir el archivo
    o al pasar el ratón por encima de él.

    En vez de insertar el vídeo en la página,
    podemos insertar un hipervínculo que permita
    acceder al mismo.

    El hipervínculo puede ser bien de texto o bien
    del primer fotograma del video.

    Cuando el usuario haga clic en el
    hipervínculo, el navegador le indicara si
    desea ejecutarlo desde la ubicación original o desea
    traerlo a su ordenador.

    6.3 ANIMACION DE OBJETOS

    Desde el menú Formato- Animación elegimos
    uno de los efectos disponibles.

    Para ver la animación de objetos en la vista previa y
    en Internet
    Explorer.

    6.4 MARQUESINAS

    Marquesina es un texto que se mueve por la pantalla.

    Para crear una marquesina, podemos ya tener escrito el texto y
    aplicarle el efecto o escribir el texto al mismo tiempo que se
    crea la marquesina.

    Para introducir la marquesina elegimos el comando
    Marquesina del menú Insertar- Elementos activos. En
    este cuadro se indica todas las características de este
    elemento. En la parte superior se introducirá el texto que
    aparecerá en la marquesina. En la sección
    Tamaño podemos indicar las dimensiones de la
    marquesina.

    En la sección Dirección se indica la
    dirección del texto.

    Podemos cambiar la velocidad con que se muestra en
    pantalla, color de fondo.

    En la sección Comportamiento tiene tres
    posibilidades:

    • Desplazar : El texto de la marquesina se desplazara
      continuamente en pantalla.
    • Deslizar : El texto ha llegar al borde final,
      según la dirección elegida permanecerá
      en dicho lugar.
    • Alternar : El texto de la marquesina se desplaza por
      la pantalla hacia delante y hacia atrás desde la
      dirección de inicio hasta el borde opuesto de la
      pantalla.

    6.5 BOTONES ACTIVABLES

    Para utilizar este elemento, elegimos Botón
    activable del menú Insertar- Elementos Activos.

    Debemos indicar el texto a mostrar en el botón , a
    que página apunta y las dimensiones del
    botón en Ancho y Alto. En la lista
    Efecto se determina que efecto debe producir cuando se
    pase el puntero del ratón por encima del botón.
    Pulsando en el botón Personalizado, accederemos a
    un cuadro en el que se indican características del
    botón. Podemos hacer que se produzca un sonido, bien al
    hacer clic sobre él o bien al pasar el ratón por
    encima del botón.

    También podemos utilizar una imagen en vez de un
    color para el fondo del botón.

    6.7 UTILIZAR BANNERS

    Para utilizar este elemento, elegimos Administrador de
    titulares en el menú Insertar-Elementos activos
    .
    Aparecerá el siguiente cuadro:

    Lo único que debemos indicar son las
    dimensiones, las imágenes que se mostraran
    alternativamente ,el efecto que deseamos
    producir entre una y otra imagen y el intervalo de
    tiempo entre imagen e imagen.

    Todas las imágenes que se muestran en el banner
    tiene que tener el mismo tamaño.

    Podemos definir un hipervínculo utilizando el
    campo vincular a.

    Para indicar el conjunto de imágenes ,
    utilizamos la sección Imágenes que se van
    a mostrar.

    Si deseamos modificar el orden de las
    imágenes utilizaremos los botones subir y
    bajar.

    Con el botón Quitar podemos eliminar
    imágenes de la lista.

    TEMA 7 UTILIZAR FORMULARIOS

    7.1CREAR EL FORMULARIO

    Un formulario es un conjunto de campos de entrada donde
    el usuario introduce la información que precisamos y pulsa en un
    botón para que se envié al
    servidor.

    Para crear un formulario la forma más sencilla es
    realizarlo utilizando alguna

    de las plantillas disponibles, también podemos
    crearlos insertando los distintos campos que nos hacen falta.

    Para insertar campos de formularios desde el
    menú Insertar del Editor de FrontPage o desde la
    barra de herramientas Formularios.

    En esta barra de herramientas se sitúan los
    distintos tipos de campos que podemos

    utilizar.

    Al insertar el primer campo, FrontPage añade
    automáticamente dos botones de comando Enviar y
    Restablecer.

    Tipo de campos que podemos utilizar:

    • Cuadros de texto de una línea: Para
      introducir poco texto
    • Cuadros de texto con desplazamiento: Para
      introducir grandes cantidades de texto.
    • Botones de opción: Para delimitar una
      única opción entre varias
      excluyentes.
    • Menú desplegadles: Para mostrar una lista
      con opciones.
    • Botones de comando: Para realizar alguna
      acción.

    7. 2 PROPIEDADES DE LOS
    CAMPOS

    Para acceder a las propiedades de los campos, hacemos
    clic con el botón derecho del ratón y
    elegimos Propiedades de campo de
    formulario.

    PROPIEDADES DE LOS CUADROS DE
    TEXTO

    En cuadro de texto, podemos indicar el nombre
    del campo
    , el valor que deseamos que aparezca
    inmediatamente, el número de caracteres que como
    máximo, podrá insertar el usuario y si deseamos que
    sea un cuadro de texto de contraseña.

    PROPIEDADES DE LOS BOTONES DE
    OPCION

    Podemos especificar las siguientes
    propiedades:

    • Indicar el nombre del grupo al
      que pertenece dicho botón.
    • Valor : Especifica el texto que aparecerá
      en la hoja de resultados del formulario cuando el usuario
      elige este botón de opción.

    PROPIEDADES DE LAS CASILLAS DE
    VERIFICACIÓN

    Podemos especificar la siguiente propiedad:

    • Valor : Texto que aparecerá como
      resultado del formulario si el usuario ha seleccionado esta
      casilla.

    PROPIEDADES DE LOS MENUS
    DESPLEGABLES

    Tendremos que indicar las distintas opciones que deben
    mostrarse en la lista.

    Utilizando Agregar indicamos el texto del
    elemento, su valor y si deseamos que aparezca o no
    seleccionando en la lista.

    Podemos indicar:

    • Un valor
      distinto para el elemento o utilizar el mismo
      nombre.
    • Indicar el alto del menú desplegadle
      (Cuantas líneas de dicho menú se verán
      en la página)
      .
    • Permitir selecciones múltiples: Indicamos
      si se puede seleccionar una única opción o
      más de una al mismo tiempo.

    PROPIEDADES DE LOS BOTONES DE COMANDOS

    Existen tres tipos de botones en un formulario de
    FrontPage:

    • Normal: Botón al que le deberá
      añadir funcionalidad.
    • Enviar y Restablecer: FrontPage sabe lo que
      quiere hacer al pulsar en ellos.

    7.3 VALIDAR LOS
    CAMPOS

    Podemos validar cualquier tipo de campo, para ello
    elegimos Validación de campo de
    formulario
    .

    Utilizando la lista Tipo de datos podemos indicar
    si el cuadro de texto va a recibir texto,
    valores numéricos.

    Por ejemplo, al seleccionar la opción Texto,
    podemos indicar que valores son
    correctos:

    Letras, dígitos, espacios en blanco u otros
    caracteres especiales, adecuados al contenido del cuadro de
    texto. Así, en una dirección de correo
    electrónico seguro que
    aparecen los símbolos @ .

    Si el campo admite valores
    numéricos, podríamos indicar alguna
    restricción en cuanto a su valor, en la
    sección Valor de los datos.

    El aspecto del mensaje de error que puede aparecer al
    validar un campo, dependerá de un ajuste realizado en el
    cuadro de diálogo Configuración del Web de
    FrontPage,
    a partir del Explorador de FrontPage
    (menú Herramientas). En la Secuencia de comando, se
    puede indicar el lenguaje en
    el que se crearan las reglas de validación VBScript o
    JavaScript
    , dependiendo el lenguaje,
    puede variar el mensaje de error.

    7.4 OBTENER INFORMACIÓN DEL USUARIO

    Una vez el usuario ha introducido la información
    y pulsamos en el botón Enviar, se realiza la
    validación de los datos, la
    información es enviada al servidor del
    web.

    Podemos hacer que la información se envié
    como un mensaje de correo electrónico a una determinada
    dirección o bien que se almacene en un fichero del
    servidor
    (HTML o texto).

    Para establecer todos estos detalles, utilizaremos la
    opción Propiedades de formulario del menú
    que aparece en cualquier parte de un formulario.

    La información enviada por el usuario se guardara
    en el fichero form_results.txt de la carpeta
    –private. En esta carpeta podremos guardar aquellos
    ficheros o páginas web que no deseamos mostrar a los
    usuarios.

    Pulsando en el botón Opciones de este
    cuadro, se accede a otro donde se pueden establecer algunas
    características.

    Por ejemplo, podemos indicar como se separan los valores
    que envía cada usuario.

    También podemos elegir el formato con el que se
    guardara la información, para ello utilizamos la lista
    Formato de archivo.

    En la ficha Resultados por correo
    electrónico,
    podemos indicar las
    características adecuadas para el caso en el que deseemos
    que los resultados sean enviados como un mensaje de correo
    electrónico. Podemos incluso especificar el asunto que
    debe aparecer en la cabecera de los mensajes.

    TEMA 8 :
    COMPONENTES DE
    FRONTPAGE

    Los componentes de FrontPage son programas que se
    incorporan a las páginas web para obtener una determinada
    funcionalidad.

    El objetivo de
    los componenetes de FronPage es ahorrar tiempo en el desarrollo del
    sitio web.

    Al incorporar componentes para muchas de las tareas que
    se llevan a cabo en un sitio web, no tendremos que
    programarlas.

    8.1 INSERTAR FECHA Y
    HORA

    Para insertar fecha y hora , nos situaremos en la parte
    de la página donde deseemos que aparezcan , elegiremos
    Marca de hora del menu insertar.

    En la lista Formato de fecha podemos elegir
    cualquiera de los formatos de fecha y hora disponibles. Si no
    deseamos que aparezca la fecha o la hora , elegiremos
    Ninguno.

    8.2 CONTADOR DE
    VISITAS

    Para insertar este componente utilizamos el comando
    Insertar – Componente de FronPage,

    aparecera el siguiente cuadro:

    Elijiremos el estilo de contador que mas
    nos guste, establecer su valor inicial y el numero
    de digitos que deben aparecer.

    8.3 FORMULARIO DE
    BÚSQUEDA

    Para insertar este componente elejimos Elementos activos
    – Formulario de búsqueda en el menu Insetar. Aparece
    el cuadro Propiedades de formulario de busqueda en el que se
    configurara el formulario para que funcione tal y como
    deseemos.

    En la ficha Propiedades de formulario de busqueda se
    indican las caracteristicas que afectan

    al aspecto del formulario. Podremos indicar el
    texto que debe aparecer, el número de
    caracteres que permitira introducir para la busqueda.

    Podemos cambiar el texto de los botones del formulario,
    Iniciar búsqueda y Restablecer.

    En la ficha Resultados de la busqueda se configura
    cómo se realiza la búsqueda y que resultados
    obtendrá el usuario. En el campo Buscar en la lista de
    palabras, introducimos Todo, si deseamos que la búsqueda
    afecte a todo el sitio Web, o un nombre de carpeta. Podemos
    evitar que se busque en determinadas páginas web. Para
    ello, utilizaremos la carpeta _private.

    Podemos indicar qué información
    aparecerá junto a la lista resultado de la
    búsqueda: puede

    Aparecer el nivel de coincidencia (casilla
    puntuación), la fecha del archivo y su
    tamaño.

    8.4 PUBLICAR LAS
    PÁGINAS WEB

    Al instalar FrontPage, se realiza una prueba en la que
    se determina el nombre del ordenador y su
    dirección IP.

    Esto es necesario para que el equipo pueda funcionar
    como un servidor de Web.

    Una vez realizada esta prueba se instala un servidor de
    web personal en la dirección http://nombre donde
    nombre es el nombre del equipo.

    Podemos crear un Web en cualquier carpeta del disco duro y,
    finalmente, trasladarlo a este servidor personal o a cualquier
    otro, incluyendo un lugar de Internet.

    El proceso por el cual las páginas que ha creado
    en un ordenador se copian en el ordenador que actúa como
    servidor Web se llama publicación de las
    páginas.

    Lo único que tenemos que hacer es indicar que
    páginas deseamos publicar y en que lugar debe hacerse.
    Elegimos el comando Publicar Web de FrontPage en el menú
    Archivo. Aparece un cuadro donde se debe indicar la
    ubicación donde debe publicarse.

    Las páginas Web las podemos publicar en cualquier
    carpeta del disco duro, si deseamos obtener la funcionalidad de
    los componentes de FrontPage o de los formularios,
    deberemos hacerlo en un lugar donde se haya instalado un servidor
    de Web y que tenga las Extensiones de servidor de
    FrontPage.

    Una vez indicado el lugar e introducido el nombre de
    usuario y contraseña , FrontPage copia las
    páginas y toda la estructura de carpetas en el lugar
    indicado, por lo que ahora podremos ver el resultado abriendo
    dicho Web desde nuestro navegador.

    TEMA 9 HERRAMIENTAS DE PRODUCTIVIDAD

    9.1 USAR
    PLANTILLAS

    Las plantillas son páginas Web de ejemplo,
    e incluso Webs completos, que podemos utilizar en nuestro
    proyecto.

    FrontPage presenta cuatro plantillas de sitios web que
    podremos utilizar al crear un nuevo Web.

    • Plantilla Web de proyecto: Crea un Web en el
      que el principal objetivo es
      el intercambio de información de los miembros de un
      equipo.
    • Plantilla Web de soporte al cliente: Crea un
      sitio donde los clientes de
      una empresa
      pueden pedir información.
    • Plantilla Web personal: Es adecuada para un
      sitio donde se expone sus aficiones, su familia, un
      álbum de foto.
    • Plantilla Web vacío: Se utiliza cuando
      se quiere utilizar un sitio desde el principio.

    Una vez elegida una plantilla, FrontPage crea la
    estructura de carpetas adecuadas para el Web, así como
    varias páginas donde se incluyen texto y otros elementos
    relacionados con el tema de la misma.

    Podemos personalizar el web. Eliminar páginas que
    no nos interese, crear nuevas, modificar el contenido.

    El aspecto de las páginas creadas a partir de una
    plantilla siempre es el mismo, se utiliza el mismo fondo, el
    mismo tipo de letra, los mismos colores.

    Al igual que existen plantillas que crean sitios Web
    completos, existen plantillas para crear páginas Web
    individuales. Accederá a las plantillas de pagina Web a
    través del comando Nuevo del menú Archivo del
    Editor de FrontPage
    .

    9.2 USAR UN
    ASISTENTE

    Un asistente genera un conjunto de páginas,
    carpetas y otros elementos adecuados al tema del Web.

    Al utilizar un asistente se realizan una serie de
    preguntas y según lo que contestemos se generara un
    contenido u otro. Podemos utilizar un asistente para el contenido
    del Web en sí o para una página Web individual. En
    el primer caso, se creara un nuevo Web desde el Explorador
    y en el segundo, se hará desde el
    Editor.

    FUNCIONAMIENTO DE UN ASISTENTE

    Botón siguiente: Accede al próximo
    paso.

    Atrás: Modificar algún aspecto
    indicado en un paso anterior.

    Terminar: El asistente posee todos los datos que
    necesita.

    9.3 EXPLORACIÓN DEL
    WEB

    Los titulares de página como las barras de
    exploración son componentes de FrontPage,podremos
    utilizarlos siempre que nuestro servidor de web tenga instaladas
    las Extensiones de servidor.

    En las barras de navegación, se indica qué
    botones deseamos mostrar en la barra, FrontPage se encarga de
    mostrar los botones adecuados según la posición de
    la página en la Vista Exploración del Explorador
    de FrontPage
    .

    9.4 TEMAS Y HOJAS DE
    ESTILOS

    Las hojas de estilo son ficheros de texto donde se
    definen características a aplicar a los elementos de las
    páginas Web. En ellas, se indican qué realcen se
    aplican al texto, qué alineación tendrán las
    imágenes. FrontPage permite incorporar hojas de estilo
    utilizando el concepto
    Tema.

    Un tema es un conjunto de diseños que se
    aplican a los distintos elementos de las páginas Web:
    texto, tablas, listas, imágenes, al fondo de la
    página.

    Para aplicar un tema a todo el Web si trabajamos en el
    Explorador de FrontPage, acudimos a la vista Temas
    y elegimos el que más nos guste.

    Si trabajamos en el Editor de FrontPage elegimos
    Tema del menú Formato.

    9.5 HERRAMIENTAS DE
    ESCRITURA

    Tenemos que asegurarnos de que el texto que hemos
    escrito no presente faltas de ortografía.

    FrontPage incorpora algunas herramientas de escritura a
    utilizar: corrección ortográfica, y
    sinónimos. Ambas accesibles a través del
    menú Herramientas.

    FrontPage comprobara la ortografía de la página y le
    indicara cada vez que no encuentra en su diccionario
    alguna de las palabras que ha escrito.

    • Botón Omitir: Pasa a la siguiente
      palabra, sin modificarla.
    • Botón Omitir todas: Indica que la
      palabra no encontrada es correcta.
    • Botón Cambiar: Cambia la palabra no
      encontrada por la elegida en el campo Cambiar
      a
      :
    • Cambiar todo: Cambiamos todas las ocurrencias
      de dicha palabra en la página.
    • Botón Agregar: Inserta la
      palabra no encontrada en el diccionario.

    Si deseamos realizar la revisión
    ortográfica de todo el web, se hará desde el
    Explorador de FrontPage.

    Los sinónimos son otras de las
    herramientas de escritura que
    podemos utilizar.

     

    DEPARTAMENTO DE CAPACITACIÓN:

    Curso Básico en Diseño y
    Publicación de Páginas Web.

    Apunte y Guía de Trabajos Prácticos
    diagramados y compaginados por los docentes

     

    Prof. José Müller y

    Prof. Adrián Von Reihs. (A cargo de la
    capacitación).

    Curso de 40hs con evaluación, aprobado con resolución
    por Ministerios de Educación de la
    Provincia de Santa Fe.

    Material Bibliográfico basado de apuntes y
    cursos
    diagramados por Internet, cursos a distancia, libros y
    apuntes propios.

    Impreso con fines didácticos

    Ciudad de Santa Fe, Provincia de Santa Fe –
    República Argentina.

    o en la Escuela Superior
    de Comercio "Dgo.
    G. Silva" con Prof. Estela Mafucci responsable del
    deartamento.

    Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.

    Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.

    Categorias
    Newsletter