Manual Completo Frontpage

download Manual Completo Frontpage

of 50

Transcript of Manual Completo Frontpage

  • 8/14/2019 Manual Completo Frontpage

    1/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Unidad 1. Introduccin a FRONTPAGE.

    Vamos a ver una pequea introduccin a FrontPage.Vamos a aprender paraqu sirve este programa y cmo nos puede ayudar a hacer desde una sencillapgina Web hasta un sitio completo en Internet.

    Qu es FrontPage y para qu sirve?

    FrontPage es un programa con el cual podemos crear pginas Web de unaforma visual. Gracias a esto el usuario slo tiene que concentrarse en el diseode su Web sin necesidad de saber programar. No obstante, un usuario avanzadopuede usar las caractersticas avanzadas de FrontPage para hacer sitios Webmuy complejos.

    Una pgina Web es un documento que puede ser visualizado con un navegador

    de Internet. Un sitio Web es un conjunto de pginas Web relacionadas entres. FrontPage nos permite disear y modificar tanto el sitio como cada pgina,y nos ayuda en su edicin y mantenimiento.

    Integracin con Office

    FrontPage es parte del paquete de aplicaciones OfficeXP, y comparte muchasde las caractersticas del resto de programas del Office, tanto enprocedimientos como en el interfaz. Gracias a esto, muchas de las tareas quenos son familiares en Word nos servirn para FrontPage y viceversa. Algunasde las caractersticas que comparten son:

    Los mens y los iconos son similares entre cada aplicacin y realizan la mismafuncin.

    El portapapeles de Office es ahora comn a todas las aplicaciones Office, ypermite guardar de forma temporal grficos y textos de distintos documentosde Office y de otros programas, y pegarlos en un documento de Office. Porejemplo, puedes copiar textos de un documento de Word y pegarlos en unapgina Web de FrontPage, y despus abrir una hoja de clculo de Excel, ycopiar una tabla de Excel a Word.

    Otras funciones, como el corrector ortogrfico, funcionan de la misma manera

    o de una forma casi idntica en todas las funciones.

    Por otra parte, los documentos de Word pueden ser convertidos a pginasWeb. Gracias a esto podemos crear pginas Web a partir de documentos queya tengamos escritos en Word de una forma fcil y sencilla. Esto tambin seaplica a otra clase de documentos como hojas de clculo de Excel, ficheros deAccess, etc.Mi primer documento con FrontPage

    Vamos a construir una sencilla pgina Web para demostrar lo sencillo y potenteque puede llegar a ser FrontPage.

    En primer lugar, veamos las dos formas bsicas de arrancar FrontPage.

    1

  • 8/14/2019 Manual Completo Frontpage

    2/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Desde el botn Inicio situado, normalmente, en la esquina inferiorizquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio sedespliega un men; al colocar el cursor sobre Programas, aparece otra listacon los programas que hay instalados en tu ordenador buscar MicrosoftFrontPage, hacer clic sobre l, y se arrancar el programa.

    Desde el icono de FrontPage del escritorio .Crear la pgina Web.

    Al arrancar el programa, nos aparece por defecto una pgina web en blanco enla que podemos trabajar. Si no nos aparece, basta con que pulsemos en el icono

    .

    Ahora hacemos clic en el rea en blanco y escribimos lo siguiente:

    Hola, esta es mi primera pgina Web.

    Este es un enlace al peridico el Pas.

    Ahora seleccionaremos las palabras "el Pas" y pulsaremos en Insertar ydespus, en el men que se nos abre, en Hipervnculo. En Direccin escribiremoslo siguiente: http://www.elpais.com.uy De esta forma crearemos un vnculo a otrapgina Web, a la que podremos viajar si disponemos de conexin a Internet.Ntese que el texto cambia de color y aparece subrayado para indicar que es unhipervnculo. La pantalla nos mostrar algo similar a esto:

    Un hipervnculo, como ms tarde explicaremos, nos permite navegarporInternet, ya que nos permite cambiar de una pgina Web a otra.

    2

    http://www.elpais.com.uy/http://www.elpais.com.uy/
  • 8/14/2019 Manual Completo Frontpage

    3/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Guardar la pgina Web.Vamos a guardar la pgina en el disco duro. Mientras no est en l, la pginase guarda en la memoria del ordenador, pero podra perderse por un corte deluz o por un fallo del programa. As que no olvide guardar a menudo susdocumentos en el disco duro, ya que all se guardan de forma permanente.

    La barra de herramientascontiene iconos para ejecutar de forma inmediata

    algunas de las operaciones ms habituales, como Guardar , Abrir ,

    Imprimir , etc.

    Pulsamos en el icono Guardar . Al ser la primera vez que guardamos, elsistema nos pedir un nombre para el archivo, y nos sugerir uno. Los nombresde pginas web suelen terminar en .htm o .html. Sin embargo, no es necesario

    escribir esta terminacin si no queremos. FrontPage lo aadirautomticamente.

    En la pantalla podemos ver como el sistema nos sugiere index.htmHacemos clic en index.htm, lo borramos y escribimos como nombre 'hola.htm'(sin las comillas). Hacemos clic en Aceptar y el ordenador guardar nuestrotrabajo. Ms adelante, cuando modifiquemos la web, bastar con hacer clic enel icono de Guardar y el ordenador guardar el documento con el nombre quele dimos.

    Podemos ponerle a la pgina web un ttulo. Para ello, antes de guardar la web,hemos de pulsar en el botn Cambiar ttulo, y ponerle un ttulo que apareceren la ventana del navegador.

    Visualizar la Web.Ahora vamos a visualizar la pgina. Para visualizar el archivo, hacemos clic

    3

  • 8/14/2019 Manual Completo Frontpage

    4/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    sobre la etiqueta en la que pone Vista previa, y el sistema cargar eldocumento como si fuera una pgina Web. Ahora, si disponemos de conexin aInternet, al pulsar sobre las palabras "el Pas", navegaremos a esa pgina. Si nodisponemos de conexin, sencillamente aparecer un mensaje de error.

    Finalmente, para cerrar FrontPage, puedes utilizar cualquiera de las

    siguientes operaciones:

    Hacer clic en el botn cerrar .

    Pulsar la combinacin de teclas ALT + F4.

    Hacer clic sobre el men Archivo y elegir la opcin Salir.

    Unidad 2. Elementos bsicos de FRONTPAGE (I)

    Vamos a ver cules son los elementos bsicos de FrontPage, la pantalla, losmens, etc. Aprenderemos a diferenciar entre cada uno de ellos, cmo sellaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda,por si en algn momento no sabemos cmo seguir trabajando.

    Elementos de la pantalla inicial.

    Al arrancar FrontPage aparece una pantalla inicial como sta, vamos a ver suscomponentes fundamentales. As conoceremos los nombres de los diferenteselementos y ser ms fcil entender el resto del curso. La pantalla que semuestra a continuacin (y en general todas las de este curso) pueden nocoincidir exactamente con la que ves en tu ordenador, ya que cada usuariopuede decidir qu elementos quiere que se vean en cada momento, comoveremos ms adelante.

    4

  • 8/14/2019 Manual Completo Frontpage

    5/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Veamos con ms detalle los distintos elementos:

    La barra de ttulo

    La barra de ttulo contiene el nombre del programa (Microsoft FrontPage) y elnombre del fichero con el que estamos trabajando en este momento(pagina_nueva.htm). En el extremo de la derecha estn los botones paraminimizar, maximizar/restaurar y cerrar.

    La barra de mens

    La barra de mens contiene las operaciones de FrontPage, agrupadas enmens desplegables. Al hacer clic en Insertar, por ejemplo, veremos lasoperaciones relacionadas con los diferentes elementos que se pueden insertar

    en FrontPage.

    Todas las operaciones se pueden hacer a partir de estos mens. Pero las cosasms habituales se realizan ms rpidamente desde los iconos de las barras deherramientas que veremos en el siguiente punto.

    Cada opcin tiene una letra subrayada, esto indica que se puede accederdirectamente a la opcin pulsando simultneamente la tecla alt y la letrasubrayada, por ejemplo si pulsamos alt+a se abre la opcin Archivo.

    La barra de mens tiene un comportamiento "inteligente", que consiste,bsicamente, en mostrar slo los comandos ms importantes y los que el

    5

  • 8/14/2019 Manual Completo Frontpage

    6/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    usuario va utilizando. Si deseas ms informacin sobre los mens desplegables.

    Los mens desplegables de la barra de menscontienen tres tipos bsicos de elementos:

    Comandos inmediatos. Se ejecutan de formainmediata al hacer clic sobre ellos. Se reconocenporque a la derecha del nombre del comando, o noaparece nada o bien aparece la combinacin deteclas para ejecutarlo desde el teclado. Porejemplo, en el men Insertar>>>lnea horizontal.

    Opcin con cuadro de dilogo. Al hacer clic en laopcin aparece un cuadro de dilogo donde nos pedir ms informacin y quetendr botones para aceptar o cancelar la accin. Se distinguen porque elnombre acaba con puntos suspensivos. Por ejemplo, en el men Insertar >>>Fecha y hora...

    Opcin con otromen desplegable. Al

    situarse sobre ste, seabre un nuevo men asu lado con msopciones para queelijamos una de ellas.Se reconocen porquetienen un tringulo ala derecha. Porejemplo, Insertar>>>Imagen.

    Las barras de herramientas.

    Las barras de herramientascontienen iconos para ejecutar de forma

    inmediata algunas de las operaciones ms habituales, como Guardar , Abrir

    , Imprimir , etc.

    La barra de Formato.

    La barra de Formato se encuentra en la parte superior de la pantalla y

    6

  • 8/14/2019 Manual Completo Frontpage

    7/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    contiene indicaciones sobre el estado actual de formateo del texto. Comoen otras aplicaciones de Office, podemos definir en cada momento quclase de texto vamos a crear: Estilo, tipo de letras, tamao, negrita,cursiva, subrayado, alineacin, etc.

    La barra de Vistas.La barra de Vistas se encuentra en la parte izquierda de la pantalla ynos ayuda a administrar la Web. Contiene los siguientes iconos:

    Pgina: Al hacer clic aqu, entramos en el modo de edicin y creacinde pginas Web. Es el que usaremos para crear y modificar nuestraspginas Web.

    Carpetas: Al hacer clic aqu, FrontPage nos muestra los archivos denuestro sitio, en forma de carpetas y documentos. Nos permiteadministrar el sitio Web y verlo como lo veramos en el explorador deWindows.

    Informes: Al hacer clic aqu, FrontPage nos informar sobrediferentes aspectos del sitio Web.

    Exploracin: Al hacer clic aqu, veremos la estructura de nuestro sitioWeb en forma de esquema.

    Hipervnculos: Al hacer clic aqu, nos aparece una relacin de todas las pginasenlazadas de la Web.

    Tareas: Al hacer clic aqu, nos aparece una pequea lista de tareas quepodemos usar sobre todo si trabajamos en grupo.

    Los modos de Edicin de pgina.

    Se encuentran en la parte baja de la pgina. Son Normal, HTML y VistaPrevia. Nos ofrecen, respectivamente, la vista habitual de trabajo, la vista delcdigo HTML usado y una vista previa del resultado final de la Web en unnavegador. Nosotros usaremos casi siempre la vista Normal, que es la que nospermite editar la Web de forma visual. Con la segunda, editaremos el cdigoen HTML, opcin slo para expertos y, finalmente, con Vista previa veremosnuestra pgina como desde un navegador. Esta ltima no es un modo deedicin propiamente dicho, pues solo nos permite visualizar un borrador de

    cmo ser la pgina Web.Hay operaciones que no estn disponibles en un determinado momento. Se

    7

  • 8/14/2019 Manual Completo Frontpage

    8/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    reconocen porque tienen el color atenuado. Existen muchas ms barras deherramientas y las iremos viendo a lo largo del curso. Adems nos podemosdefinir nuestras propias barras. Las barras se pueden ocultar. Para ello pulsacon el botn derecho del ratn en una de ellas. Nos aparecer una lista de lasbarras activas. Basta con marcarlas o no para mostrarlas y ocultarlas.

    Puedes personalizar FrontPage para definir el entorno de trabajo a tu gusto.A medida que avances en el curso, aprenders que hay acciones que usas amenudo. Para saber cmo definir tus propias barras o modificar las que tienescomo quitar iconos que no usas, consulta nuestro avanzado.

    8

  • 8/14/2019 Manual Completo Frontpage

    9/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Unidad 3. Configuracin de un sitio Web

    Vamos a ver unas consideraciones bsicas a la hora de construir una Web, lams importante, la planificacin. Gracias a ella nos ahorraremos muchotrabajo posterior y evitaremos errores comunes. Cuando conozcamos todo estoestaremos en disposicin de empezar a crear nuestro propio sitio Web, que

    poco a poco iremos construyendo a lo largo del curso.Qu es un sitio Web? Diseo previo

    Un sitio Web se compone del conjunto de pginas Web que diseemos para unobjetivo concreto. Sin embargo, no es lo mismo disear un sitio Web para unuso personal que para una empresa. Cada uno tiene sus necesidades yplanificar con antelacin qu es lo que vamos a hacer nos puede evitar muchosproblemas posteriores.

    Qu clase de Web vamos a crear? Existen muchos tipos, pero vamos a nombraralgunos de los ms utilizados:

    Sitio personal: Son los sitios diseados para conocer la vida y obra dealguien. Es el ms sencillo, podemos usar un alojamiento Web gratuito(normalmente incluyen publicidad) y se compone de unas pocas pginas.

    Sitio de una empresa: Son los sitios diseados para dar a conocer unaempresa. Pueden ser sencillos, en el caso de empresas pequeas, o muycomplejos, en el caso de grandes empresas. Normalmente tienen una direccinpropia (www.nombre_de_la_empresa.com) y almacenan informacincorporativa.

    Sitio de una tienda online: Son los sitios diseados para vender porInternet. Cualquier empresa, grande o pequea, pueden llegar a cualquiercliente del planeta gracias a Internet. Este puede tambin estar incluido en elsitio de una empresa.

    Sitio de un portal: Son los sitios especializados en recopilar recursos sobreun tema o temas determinados.

    Cada sitio requiere una planificacin previa. Lo ms usual es dibujar unesquema en papel sobre cada parte de nuestra Web, y basarnos en l a la horadel diseo. Naturalmente es conveniente seguir una determinada estticarelacionada con la clase de sitio Web que estemos diseando, as como evitar

    recargar en exceso las pginas. FrontPage nos proporciona diversos temas yadefinidos que nos ayudarn a dotar de una apariencia adecuada a nuestro sitio

    9

  • 8/14/2019 Manual Completo Frontpage

    10/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Web.

    Crear un boceto de la Web. Estructura de ficheros.

    A la hora de disear un sitio Web, es conveniente disear un boceto sobrecmo va a ser la Web. Tenemos que decidir cmo vamos a estructurarla.

    Lo ms sencillo es no estructurarla, poniendo todos los archivos en el mismodirectorio. Esto se suele hacer en sitios personales, ya que el nmero deficheros es pequeo. Sin embargo este es un mal hbito, ya que si la Webcrece, acabaremos perdidos en un mar de ficheros.

    Por ello es conveniente hacer, por lomenos, una pequea divisin, poniendolos archivos de cada clase en undirectorio determinado. Es decir, losficheros de fotos en un directorio, los

    ficheros de la Web en otro, etc.

    Naturalmente si el sitioWeb es de ciertaenvergadura, nosacabar sucediendo lomismo. Por ello en los

    sitios Web complejos sesuele dividir el sitioWeb en partes y cadaparte se almacena enun lugar distinto. Cadauno de estos lugaresposee sus propiascarpetas.

    FrontPage nos proporciona las herramientas adecuadas para poder estructurarnuestro sitio Web. Estas herramientas son los iconos Carpetas y Exploracin en

    la barra de vistas.

    10

  • 8/14/2019 Manual Completo Frontpage

    11/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Unidad 4. Formateo de texto

    Vamos a ver cmo formatear texto en FrontPage. Veremos como darle altexto y a la pgina la apariencia que deseemos. Y al final del tema veremos untema avanzado para corregir las faltas de ortografa.

    Introducir texto. Tipo de letra, tamao, negrita, cursiva,subrayado.

    Para entender toda la teora de este tema, lo mejor que podemos hacer escrear una Web vaca, con lo que tendremos una hoja en blanco en la que

    practicar. FrontPage2002 dispone de una interfaz similar a un procesador detextos como el Word, por lo que si lo hemos utilizado no nos resultar nadadifcil aprender a hacer lo mismo en FrontPage.

    Para Insertar texto lo nico que debemos hacer es escribir en la pantalla.Como en el Word, el texto aparecer a medida que lo vayamos tecleando. Paraterminar un prrafo, slo hay que pulsar la tecla Enter. Una vez introducido eltexto podemos cambiar su aspecto utilizando las distintas opciones que nosofrece la barra de Formato que describiremos a continuacin:

    barra de formato

    Para cambiar el tipo de letra lo que tenemos que hacer es pulsar en el

    cuadro desplegable de Fuente . A partir de entonces el textoque se introduzca ser con ese tipo de letra. Si lo que queremos en cambio escambiar el tipo de letra de un trozo de texto que ya hemos escrito, debemosseleccionarlo y cambiar entonces el tipo de letra como hemos hecho antes.Ntese que slo se producir el cambio en ese trozo de texto, por lo que alescribir en otra zona lo haremos con el tipo de letra que tenamospreviamente.

    11

  • 8/14/2019 Manual Completo Frontpage

    12/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Para cambiar el tamao de letra lo que tenemos que hacer es pulsaren el campo Tamao de Fuente. A partir de entonces el texto que seintroduzca ser con ese tamao de letra. Si lo que queremos en cambioes cambiar el tamao de letra de un trozo de texto que ya hemos escrito,debemos seleccionarlo y cambiar entonces el tamao de letra como

    hemos hecho antes. Ntese que slo se producir el cambio en ese trozode texto, por lo que al escribir en otra zona lo haremos con el tamao deletra que tenamos previamente.

    Para hacer la letra con efecto negrita, cursiva o subrayadotenemos que

    pulsar el botn N, el botn Ko el botn S. respectivamente. A partirde entonces el texto que se introduzca ser negrita, cursiva o subrayado. Si loque queremos en cambio es hacer que un trozo de texto tenga estascaractersticas, debemos seleccionarlo y pulsar en los iconos como hemos

    hecho antes.Como se puede observar lo que tenemos que hacer para formatear texto es,

    bsicamente, seleccionar el texto a formatear y pulsar en los iconosapropiados para aplicar el efecto que deseemos. Existen muchos tipos deefectos, que podremos aplicar seleccionando el texto y haciendo clic enFormato>>>Fuente.Uso de prrafos.

    Para introducir prrafos mientras escribimos un texto, debemos pulsar latecla Enter. FrontPage automticamente comenzar un nuevo prrafo yaplicar algunas caractersticas propias de un procesador de textos, como sonlas sangras y el espaciado entre prrafos. Podemos modificarlas para quesalgan como queramos.

    Vamos a teclear un texto cualquiera en la ventana. Por ejemplo, este texto:

    12

  • 8/14/2019 Manual Completo Frontpage

    13/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Este es un prrafo de prueba para poder trabajar yobservar como FrontPage nos ayuda a usarlos comonosotros queramos. Este es un prrafo de prueba parapoder trabajar y observar como FrontPage nos ayuda ausarlos como nosotros queramos.

    Vamos a modificarlas caractersticas del prrafo. Para ello basta con que situemos el cursor en

    cualquier parte del prrafo a modificar y pulsar el botn derecho. En el mencontextual pincharemos en la opcin Prrafo.

    Podemos hacer lo mismo pinchando en la barra de mens, en Formato ydespus en Prrafo.

    En cualquier caso se abrir el cuadro de dilogo Prrafo que te describiremos acontinuacin y que nos permite configurar caractersticas del prrafo actual.

    13

  • 8/14/2019 Manual Completo Frontpage

    14/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Podemos cambiar la posicin del prrafo cambiando su Alineacin. Podemosposicionar un prrafo a la izquierda de la pgina, a la derecha, en el centro,justificado y predeterminado. Veamos cmo actan:

    Alineado a la izquierda: es el activo por defecto.

    Este es un prrafo de prueba para poder trabajar y observar como FrontPagenos ayuda a usarlos como nosotros queramos. Este es un prrafo de pruebapara poder trabajar y observar como FrontPage nos ayuda a usarlos comonosotros queramos.

    Alineado a la derecha.

    Este es un prrafo de prueba para poder trabajar y observar como FrontPagenos ayuda a usarlos como nosotros queramos. Este es un prrafo de prueba

    para poder trabajar y observar como FrontPage nos ayuda a usarlos comonosotros queramos.

    14

  • 8/14/2019 Manual Completo Frontpage

    15/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Alineado al centro.

    Este es un prrafo de prueba para poder trabajar y observar como FrontPage

    nos ayuda a usarlos como nosotros queramos. Este es un prrafo de pruebapara poder trabajar y observar como FrontPage nos ayuda a usarlos comonosotros queramos.

    Alineado justificado: 'estira' el texto para que ocupe todo el rea de texto.

    Prrafo alineado conjustificado. Podemosobservar como eltexto se ajusta a loslmites de la tabla.Esto suceder tambinpara un textocualquiera.

    Prrafo alineado sinjustificado. Prrafoalineado sinjustificado. Prrafoalineado sinjustificado. Prrafoalineado sinjustificado.

    Prrafo alineado predeterminado. Puede ser cualquier tipo de alineado. Seaplica el establecido por defecto.

    Vamos a aplicar sangras al prrafo. Para ello abrimos el men contextual deprrafo y podemos aplicar Sangra, especificando la cantidad de espacio quedejar la sangra en pxeles:

    Antes del texto: Deja un espacio a la izquierda del prrafo. Despus del texto: Deja un espacio a la derecha del prrafo.

    Primera lnea: Deja un espacio a la izquierda de la primera lnea.

    15

  • 8/14/2019 Manual Completo Frontpage

    16/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Este prrafo tieneuna sangra deantes del texto.Como podemos

    observar, queda unespacio a laizquierda deltexto. En este casoes de 20 pxeles.

    Este prrafo tieneuna sangra dedespus del texto.Como podemos

    observar, queda unespacio a laderecha del texto.En este caso es de20 pxeles.

    Este prrafo tieneuna sangra deprimera lnea deltexto. Como podemosobservar, la primera

    lnea comienza unpoco despus que lasotras. Hemos puesto20 pxeles.

    Ahoravamos a trabajar el Espaciado en el propio prrafo y entre prrafos. Si

    abrimos el men contextual podemos observar las siguientes opciones:

    Antes de: Deja un espacio antes del prrafo actual. Se especifica en pxeles.

    Despus de: Deja un espacio despus del prrafo actual. Se especifica enpxeles.

    Palabra: Deja espacio entre cada palabra del prrafo actual.

    Interlineado:Deja espacio entre cada lnea del prrafo actual.

    Vamos a aplicar los espaciados en el siguiente ejemplo:

    16

  • 8/14/2019 Manual Completo Frontpage

    17/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Espaciado antes de:(15 pxeles)

    Espaciado despusde: (15 pxeles)

    Espaciado deinterlineado: (1,5lneas)

    Este es el primerprrafo.

    Este es el segundoprrafo.

    Este es el primerprrafo.

    Este es el segundoprrafo.

    Esto es un texto. Esto

    es otro texto delmismo prrafo.

    Si lo que queremos es introducir un salto de lnea, sin introducir un nuevoprrafo, hemos de pulsar las teclas MAYSCULAS + ENTER.

    17

  • 8/14/2019 Manual Completo Frontpage

    18/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Unidad 5. Imgenes

    Vamos a ver cmo se usan las imgenes en una pgina Web, cules son losformatos ms usados en Internet y cmo combinar imgenes y texto para teneruna Web atractiva.

    Formatos de imgenes usadas en Internet: GIF y JPG.

    Para mostrar fotos o dibujos, se suelen usar principalmente dos formatos de

    imagen: GIF y JPG. El primero, GIF, se suele usar para dibujos y pequeas fotosde pocos colores. JPG es usado para presentar fotos a todo color. Pero, quson exactamente GIF y JPG?

    GIF es una abreviatura de Graphic Interchange Format. Este formato utilizacomo mximo 256 colores, por lo que al representar una foto puede perdersecolorido. Por ello es usado para mostrar dibujos, esquemas, fondos y pequeasfotos. Tiene varias caractersticas interesantes, como son el entrelazado y latransparencia. Al contrario que JPG, que veremos a continuacin, no sepierde calidad con este formato.

    El entrelazado permite que la imagen se cargue en el ordenador que visualizala pgina Web poco a poco, mientras va mostrando versiones de la imagencada vez ms aproximadas a la versin normal. Esta caracterstica esinteresante para ordenadores con una conexin lenta a Internet, porque elusuario puede decidir que la imagen que se est cargando no le interesa,dejando entonces esa pgina para cargar otra. Sin embargo esta caractersticano se usa mucho actualmente, excepto para pginas Web con muchasimgenes. Un ejemplo del entrelazado sera el siguiente:

    18

  • 8/14/2019 Manual Completo Frontpage

    19/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Imagenoriginal/finalImagen cargando

    19

  • 8/14/2019 Manual Completo Frontpage

    20/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    JPG o JPEG es una abreviatura de Joint Photographic Experts Group. Esteformato utiliza 16 millones de colores, por lo que es el adecuado para mostrarfotos. Adems, JPG puede comprimir la imagen para que ocupe menosespacio, por lo que grandes imgenes pueden ser cargadas con una velocidadaceptable.

    La compresin tiene un precio, y es la prdida de calidad respecto a laimagen original. JPG nos permite comprimir ms o menos las fotos, perdiendoms o menos calidad.

    Tambin podemos elegir la cantidad de barridos antes de mostrar la imagenfinal. Es una caracterstica similar al entrelazado del GIF.

    Veamos un ejemplo de una foto guardada en formato GIF, en JPG y en JPG conmucha compresin, as como su tamao para hacernos una idea de cuantotardara en cargarse desde Internet (suponiendo una conexin con mdem, quees la ms lenta pero la ms extendida).

    20

  • 8/14/2019 Manual Completo Frontpage

    21/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Foto originalFOTO GIFFOTO JPGpoca

    compresinFOTO JPGmuchacompresin

    188 kb - 22segundos

    37 kb - 5segundos

    17 kb -2segundos

    8 kb - 1segundo

    21

  • 8/14/2019 Manual Completo Frontpage

    22/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Insertar una imagen.

    Vamos a insertar imgenes en nuestra pgina Web. La forma ms sencilla yrpida es la siguiente:

    Pulsamos con el ratn sobre el

    lugar donde queremos poner laimagen.

    Pulsamos el icono Insertar imagen desde archivo .

    Nos aparecer el cuadro de dilogo Imagen:

    Ahora tan slo tenemos que elegir la imagen de nuestro disco duro quequeremos incluir en nuestra pgina, pulsando en Insertar para cargarla. Comopodemos observar podemos cargar distintos tipos de imagen. FrontPage lasguardar automticamente como GIF si la imagen tiene 256 o menos colores, ocomo JPG si tiene ms.

    Cambiar el tamao de unaimagen.

    Tras cargar la imagen, es el momento para que ajustemos su tamao al quems nos interese. Para ello hacemos clic en ella con el botn izquierdo delratn sobre la imagen y aparecern 4 cuadraditos en la imagen. Pinchando enellos con el botn izquierdo del ratn y sin soltar, arrastrando el ratn,podemos cambiar el tamao de la imagen (el ratn cambia de forma cuando lo

    situamos encima de uno de estos cuadraditos a o ).

    22

  • 8/14/2019 Manual Completo Frontpage

    23/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Para ajustarla en horizontal, pinchamosen los cuadraditos que salen a la derecha o a la izquierda. Para ajustarla en

    vertical pinchamos en los cuadraditos de arriba o abajo. Para ambos ajustespinchamos en los cuadraditos de las esquinas (arrastramos en diagonal).

    Cambiar el tamao de una imagen hace que pueda parecer distorsionada. Estopuede notarse ms o menos segn el tamao original de la imagen. Mientrasms cambie una imagen, ms se distorsiona. Si queremos cambiar el tamaode una imagen conservando todo lo que se pueda la imagen original, debemosusar un programa de tratamiento de imgenes, aunque para pequeos cambiospodemos usar FrontPage perfectamente.

    El archivo que contiene la imagen no cambia aunque cambiemos su tamao en

    FrontPage. Siempre podemos volver al tamao original, como explicamos en elpunto de Propiedades de la imagen.

    Usar una imagen como fondo de una pgina.

    Podemos usar una imagen como fondo de una pgina Web.

    Para poner una imagen de fondo hacemos clic en Formato y despus enFondo.

    En la ventana que se nos abrir debemos hacer clic en la pestaa Fondo yasegurarnos de marcar la opcin Fondo de imagen.

    Despus tenemos que buscar qu imagen queremos poner como fondo,haciendo clic en Examinar.

    La imagen saldr como fondo de pgina y, si no ocupa toda la pantalla, elexplorador automticamente la llenar con copias de la imagen.

    Si queremos cambiar la imagen de fondo repetimos el proceso eligiendo otraimagen, y si queremos quitar la imagen de fondo, repetimos el procesodesmarcando la opcin Fondo de imagen.

    Podemos activar la opcin de marca de agua. En ese caso el fondo no sedesplaza cuando nos movemos por la pgina al subir o bajar la barra de

    23

  • 8/14/2019 Manual Completo Frontpage

    24/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    desplazamiento. No todos los exploradores admiten este efecto, por lo que nose recomienda usarlo.

    Es importante seguir los siguientes consejos cuando usemos fondos:

    No usemos imgenes demasiado grandes excepto cuando sea necesario,ya que harn ms lenta la carga de la Web.

    Las imgenes deben seguir el estilo de la pgina, de esta formaconseguiremos que la imagen acompae la esttica de la Web.

    Si usamos una imagen oscura, es conveniente usar texto de color claro yviceversa. Cuando la imagen contenga zonas claras y oscuras, evite usartexto en estas zonas.

    Unidad 6. Hipervnculos

    Vamos a ver qu son los hipervnculos y como usarlos para hacer navegablesnuestro sitio Web, de forma que los usuarios puedan navegar de una pginaWeb a otra. Aprenderemos qu tipos de hipervnculos existen y para qusirven.

    Qu es un hipervnculo?

    Un hipervnculo es un enlace, normalmente entre dos pginas web de unmismo sitio, pero un enlace tambin puede apuntar a una pgina de otro sitioweb, a un fichero, a una imagen, etc. Para navegar al destino al que apunta elenlace, debemos hacer clic sobre l. Tambin se conocen como hiperenlaces,enlaces o links.

    Normalmente el destino se puede saber mirando la barra de estado del

    navegador cuando el ratn est sobre el hipervnculo.Dependiendo de cual sea el destino, hacer clic en un hipervnculo puede hacerque ocurran varias cosas. Si el destino es otra pgina web, el navegador lacargar y la mostrar, pero si el destino es un documento de Word, elnavegador nos dar la posibilidad de abrir una sesin de Word para visualizarloo de guardar el archivo.

    Por lo tanto, podemos usar los hipervnculos para conducir a los visitantes denuestro sitio web por donde queramos. Adems, si queremos que se pongan encontacto con nosotros, nada mejor que ofrecerles un hipervnculo a nuestrocorreo electrnico. Vamos a ver cmo hacer todo esto.

    Tipos de hipervnculos.

    24

  • 8/14/2019 Manual Completo Frontpage

    25/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Existen varios tipos de hipervnculos. Vamos a ver los ms usados.

    Hipervnculo de texto.

    Un hipervnculo de texto es un enlace que se encuentra asociado a un texto,

    de forma que si hacemos clic sobre ese texto, navegamos dnde indique elhipervnculo. Por defecto, cuando creamos un hipervnculo de texto, el textoaparece subrayado y en un color distinto al del texto normal, de forma que elvisitante sepa que existe ese enlace. Si volvemos a la pgina despus de visitarel enlace, este aparecer con otro tono tambin. Aunque es interesantediferenciar el hiperenlace, es posible que no queramos que aparezca as. Msadelante veremos cmo hacer esto.

    Hipervnculo de imagen.

    Un hipervnculo de imagenes un enlace que se encuentra asociado a unaimagen, de forma que si hacemos clic sobre esa imagen, navegamos dndeindique el hipervnculo. Por defecto. Cuando creamos un hipervnculo deimagen, la imagen aparece rodeada de un borde con un color llamativo paraque el visitante sepa que existe ese enlace. Al igual que con el texto, msadelante veremos cmo podemos modificar este comportamiento.

    Por otra parte, los hipervnculos pueden referirse a pginas del mismo sitioweb o de otros sitios web.

    Hipervnculo a una pgina del propio sitio web (pgina local).

    Un hipervnculo local es un vnculo a una pgina que se encuentra en elmismo sitio web. Esto significa que el archivo de la pgina web a la que serefiere el vnculo se encuentra en el mismo disco que la pgina que contieneel vnculo. As, para referirnos a ella tan solo basta con poner la ruta odireccin en el disco duro. Si se encuentra en la misma carpeta, basta conponer su nombre. Si se encuentra en una carpeta que cuelga de la actual, hayque poner el nombre de la carpeta y el del archivo.

    Por ejemplo, supongamos que tenemos un vnculo desde esta pgina a otrallamada curso que est en la carpeta access. El vnculo sera:

    access/curso.htm

    Hipervnculo a otro sitio web (pgina externa).

    Un hipervnculo externoes un vnculo a una pgina en Internet. Es un vnculoa cualquier otro lugar fuera del sitio actual. Cuando ponemos un vnculoexterno, escribimos la direccin completa de la pgina incluidohttp://www.... As, http://www.google.com.uy es un vnculo a la pgina degoogle.

    Hipervnculo a una direccin de correo electrnico.

    Un hipervnculo a una direccin de correo electrnico es un vnculo que

    25

    http://www.google.com.uy/http://www.google.com.uy/
  • 8/14/2019 Manual Completo Frontpage

    26/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    contiene una direccin de correo. Al pulsar en l, automticamente se abre elprograma de correo que tenga el usuario instalado para poder escribir a esadireccin de correo. Por ejemplo, si nuestra direccin de correo [email protected], escribiremos esta direccin de correo como

    direccin al insertar el hipervnculo.

    Unidad 7. Tablas

    Vamos a ver qu son las tablas y cmo trabajar con ellas, para poder presentardatos de forma ordenada y para situar en pantalla objetos en un lugarconcreto.

    Las tablas en FrontPage Lo primero que vamos a hacer es activar la barra de herramientas de tablas.Todas las opciones que contiene estn disponibles en el men Tabla, pero usarla barra de herramientas de tablas es ms cmodo y rpido.

    Para activar la barra de herramientas, lo podemos hacer de dos formas:

    26

  • 8/14/2019 Manual Completo Frontpage

    27/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Desde el menVer, hacemos clicen Barras deherramientas y

    despus en Tablas.

    Poniendo elratn sobre una barra de herramientas hacemos clic con el botn derecho delratn y despus pulsamos en Tablas.Las tablas son representadas en FrontPage de esta manera:

    Tabla con borde (3 filas, 2 columnas)

    27

  • 8/14/2019 Manual Completo Frontpage

    28/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Tabla sin borde (1

    filas, 2 columnas)

    Insertar una tabla

    Lo primero que debemos hacer es situar el cursor donde queramos que est latabla. Despus, para insertar una tabla debemos pulsar en el botn Insertartabla, que est situado en la barra de herramientas estndar. Sin soltar,arrastramos el ratn de forma que la tabla tenga tantas filas y columnas comoqueramos.

    Al soltar el ratn,aparecer la tabla en pantalla.

    28

  • 8/14/2019 Manual Completo Frontpage

    29/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Por defecto, latabla ocupatodo el anchoposible de la

    pgina y tieneun borde de 1pxel. Estas yotraspropiedadespuedencambiarsefcilmente,como veremosdespus.

    Tamaos relativos y tamaos fijos.

    Es importante saber que, por defecto, el tamao de las tablas se especifica demanera relativa a la ventana. Es decir, si la tabla ocupa la mitad de supantalla, en un monitor ms grande la tabla se redimensionar para ocupar lamitad de esa pantalla. Se dice que su tamao est especificado enporcentaje. Pero podemos cambiar esto para que el tamao de la tabla seespecifique en pxeles, de forma que su tamao permanezca constante,independiente del tamao de la pantalla en la que se muestre.Rellenar las celdas

    Para rellenar las celdas debemos hacer clic en la celda que queramos rellenary teclear el texto que queramos. Tambin podemos insertar imgenes u otrastablas.

    Para desplazarnos por las celdas podemos usar los cursores. Otra posibilidades pulsar la tecla tabulador y tabulador + Maysculas si queremos avanzar yretroceder celda por celda. Si pulsamos tabulador cuando estemos en laltima celda de una tabla, automticamente aadiremos una nueva fila a la

    tabla.

    La tabla se redimensionar automticamente segn el texto o los objetos queinsertemos en ella.

    29

  • 8/14/2019 Manual Completo Frontpage

    30/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Unidad 8. Marcos

    Los marcos en FrontPage.

    Un marco es una divisin de la ventana del explorador en dos o ms regiones.En cada una de ellas podemos colocar una pgina Web. Por ejemplo, podemosdividir la pantalla en dos y cargar el ndice de una Web en un marco y el

    contenido de la Web en el otro. Veamos un ejemplo:

    30

  • 8/14/2019 Manual Completo Frontpage

    31/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    En FrontPage podemos 'ver' los marcos como barras grises, horizontales overticales. Los marcos en realidad no contienen nada ms que referencias a laspginas Web que se van cargando en ellos. Desde FrontPage podemos variar

    fcilmente su tamao, su nmero, elegir qu pginas cargarn, etc.Ventajas e inconvenientes de los marcos: Actualmente el empleo de los

    marcos se ha reducido. En el pasado cargar un men lateral era costoso debidoa la baja velocidad a la que se acceda a Internet, pero en la actualidad lacarga de este men no supone algo apreciable por el usuario. Adems, el tenervarios marcos puede llevarnos a tener un pequeo lo, ya que siempre hemosde recordar qu cosas van en cada marco. Como ventaja, los marcos ofrecenla posibilidad de separar mens de contenido y as no tener que repetir elmen en todas las pginas del sitio.

    Unidad 9. Formularios

    Vamos a aprender a usar formularios. Para ello veremos cmo hacerlos yconfigurarlos. Aprenderemos a poner elementos como botones, reas de texto,mens desplegables, etc. Un punto importante es asegurarse de que paraalgunas opciones, el servidor donde se aloje la pgina Web del formulario debesoportar las extensiones de FrontPage, que son pequeos programas queautomatizan ciertas tareas como enviar un correo o comprobar informacin.

    31

  • 8/14/2019 Manual Completo Frontpage

    32/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Sin ellas los formularios no funcionarn. Otra posibilidad es que la informacinque almacena un formulario sea enviada en un correo electrnico.

    Qu es un formulario? Un formulario es un conjunto de elementos que se utilizan para recopilarinformacin. Un formulario electrnico es similar a un formulario en papel.Veamos un ejemplo:

    Este es un ejemplo deformulario

    Como podemos observar, el formulario tiene un cuadro de texto para que elusuario introduzca informacin, su nombre, y dos botones, Enviar yRestablecer, que enva los datos y pone el valor inicial en el campo de textorespectivamente. Para qu podemos usar un formulario? Algunos ejemplosson:

    Libro de visitas: Los visitantes pueden enviarte un comentario sobre tupgina mediante un formulario.

    Recopilar informacin: Para recoger datos como un currculum, un pedido,datos de contacto, etc. podemos usar un formulario.

    Formularios de bsquedas: Para que los visitantes introduzcan los datos abuscar.

    Elementos bsicos de unformulario.

    Veamos qu elementos puede contener un formulario. Todos estos elementospodemos encontrarlos en Insertar >> Formulario. Veamos los ms usados:

    32

  • 8/14/2019 Manual Completo Frontpage

    33/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Formulario: Crea unrea en la que podemosintroducir los elementosdel formulario. Se

    reconoce por una lneadiscontinua, que no esvisible para el usuario.Este elemento esimprescindible. Pordefecto se crean dosbotones de uso habitual,Enviar y Restablecer,que podemos cambiar oborrar si queremos.

    Cuadro de texto: Creaun cuadro en el que elusuario puede introducirtexto. Podemosconfigurar su tamao yla clase de texto quepuede introducir elusuario. Se suele usarpara introducirinformacin corta, como

    nombres.

    rea de texto: Es similar al cuadro de texto, pero con la diferencia que esms extenso, de ms de una lnea. Sirve para introducir informacin extensa,como opiniones.

    Casillas de verificacin: Nos permiten mostrar varias opciones al usuario ydejarle seleccionar una o ms haciendo clic en ellas.

    Botn de opcin: Es similar a las casillas de verificacin, con la diferenciade que los botones son excluyentes entre s. Es decir, nos permiten elegir una

    opcin entre varias pero slo una.

    Cuadro desplegable:Muestra un cuadro desplegable con varias opciones. Pordefecto slo podemos elegir una. Podemos configurarlo para hacer seleccionesmltiples.

    Botn de comando: Nos permite crear botones y asignarles acciones.

    Imagen: Nos permite poner imgenes en un formulario. Podemos usarimgenes como botones.

    33

  • 8/14/2019 Manual Completo Frontpage

    34/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Unidad 10. Elementos interactivos y multimedia

    Vamos a insertar elementos interactivos y multimedia en nuestras pginasWeb. Aprenderemos a utilizar sonidos y animaciones, poner vdeos y otrosefectos especiales.

    34

  • 8/14/2019 Manual Completo Frontpage

    35/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Introduccin

    Una pgina Web puede tener distintos tipos de elementos interactivos ymultimedia. Un elemento interactivo es un elemento que puede cambiardependiendo de cmo acte el usuario. Un elemento multimedia puede ser unsonido, una cancin, un vdeo...

    Ambos tipos de elementos pueden darle vida a una Web, pero utilizar enexceso esta clase de elementos har que la carga de nuestra Web sea lenta yengorrosa, por lo que los visitantes podran perder el inters. Por lo tanto,hemos de usarlos con mesura.

    Existen objetos que son una mezcla de ambos, como son las animacionesFlash. Estas animaciones pueden incluir sonidos e imgenes, y adems serinteractivas.

    Un problema comn, adems de la lentitud de carga, es la compatibilidad. Notodos los efectos son soportados por todos los navegadores, en especial por losnavegadores ms antiguos. FrontPage nos ofrece algunas ayudas para resolvereste problema. En general, si un navegador no soportara un efecto enparticular, sencillamente lo ignora, por lo que en general nuestra Web podrseguir siendo visitada, aunque sin ese efecto.

    Botones para desplazarse

    Vamos a ver cmo crear manualmente algunos botones bsicos que son muyusados en la mayora de las pginas web, as como crear botones que en vez

    de texto contengan imgenes.Los primeros botones que vamos a crear son:

    Botn Atrs: vuelve a la pgina anterior, si la hubo.

    Botn Siguiente: vuelve a la pgina de la que volvemos, si la hubiese.

    Botn Subir/Bajar: En una pgina web extensa, nos permite desplazarnosarriba y abajo instantneamente.

    Para crear un botn Atrs, hacemos clic en el lugar dnde queremos que

    est el botn.

    Entonces hacemos clic en la vista HTML para ver el cdigo y, en el lugar dndese encuentre el cursor, aadimos esto:

    Si lo que queremos es un botn Siguiente, hacemos lo mismo con:

    35

  • 8/14/2019 Manual Completo Frontpage

    36/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Ahora vamos a hacer algo ms sofisticado: vamos a crear un botn paradesplazarnos por la pgina. Se trata del tpico botn Subir/Bajar.

    Para crear el botn, hacemos clic en Insertar ydespus en Componente Web.

    En el cuadro de dilogo Insertar componente Webque aparecer elegimos Efectos dinmicos y Botnactivable.

    En sus propiedades, ponemos lo que queramos quesalga en el botn en Texto del botn:.

    Para crear un vnculo al ancla, podemos su nombre predecido del smbolo#.Supongamos que el ancla que hemos creado se llama ancla (en un alarde deoriginalidad). Como vemos en el dibujo, hemos escrito #ancla.

    El resto de opciones las configuramos como queramos.

    Podemos poner tantas anclas como queramos, siempre que no mezclemos sus

    nombres.

    36

  • 8/14/2019 Manual Completo Frontpage

    37/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Como ejemplo, al pulsar este botn iremos hacia arriba, al principio delapartado.

    Unidad 11. Hojas de estilos

    Vamos a ver qu son las hojas de estilos y cmo usarlas para dotar a losdocumentos que creemos de una apariencia personalizada. Es importante quesepamos que para poder sacarles todo el partido posible a las hojas de estilos,tenemos que tener ciertos conocimientos del lenguaje HTML.

    Qu es una hoja deestilos?

    Una hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas ycaractersticas que, aplicadas a una pgina web o a un conjunto de ellas,pueden modificar su apariencia. De esta forma, podemos separar en ciertaforma el diseo de la pgina de su contenido.

    Gracias a las hojas de estilos podemos de alguna manera homogeneizar y

    37

  • 8/14/2019 Manual Completo Frontpage

    38/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    automatizar el trabajo que supone el diseo de una Web. Podemos definir unestilo para los ttulos y otro para el texto, de forma que no tengamos quemodificar cada vezel texto y los ttulos para que tengan la apariencia quequeramos.

    Una hoja de estilos puede estar contenida en la misma pgina donde se utilizao puede estar definida en un archivo aparte. De la segunda forma, podemosdefinir estilos para todo el sitio Web, mientras que de la primera tendremosque escribir el mismo cdigo en cada pgina cada vez que lo necesitemos. Poreso la primera se utiliza cuando se quiere aplicar algn efecto en particular yla segunda cuando ese efecto es el mismo para todas las pginas. Existe unatercera posibilidad, y es especificar el estilo en la propia etiqueta HTML dndequeramos usarlo, con lo que el efecto slo se producir en ese lugar.

    Esto implica conocer cdigo HTML y las propiedades que queramos cambiar.Esto tendramos que repetirlo para cada elemento del texto cuyo estilodeseamos cambiar. Por ello, al ser poco eficiente, se usa la primera forma o lasegunda, antes mencionadas.

    Estas formas tambin requieren conocer HTML. Por ello FrontPage nos facilitael uso de estilos por medio de las plantillas, que nos permite usar hojas deestilo con pocos conocimientos de HTML.

    Crear una hoja deestilos.

    Para crear una hoja de estilos, hacemos clic en Archivo >>> Nuevo >>>Pgina o Web.

    38

  • 8/14/2019 Manual Completo Frontpage

    39/50

  • 8/14/2019 Manual Completo Frontpage

    40/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    caractersticas. Esta es slo una plantilla, que modificaremos para adaptarla anuestro gusto.

    Podemos hacerlo a mano, directamente en la pgina, o bien con la ayuda de

    FrontPage.

    Para ello hacemos clic en el botn Estilo que aparece en mitad de la pantalla.Aparece la siguiente ventana, que nos muestra los estilos que estnmodificados, que en este momento sern los modificados por defecto de laplantilla de FrontPage.

    Vemosla:

    Aparece el cuadro de dilogo Estilo, que nos muestra los estilos que estnmodificados, que en este momento sern los modificados por defecto en laplantilla de FrontPage.

    Vemosla:

    40

  • 8/14/2019 Manual Completo Frontpage

    41/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Aqu podemos cambiar las caractersticas de las etiquetas HTML y tener unavista previa de estos.

    Para crear un estilo nuevo, pulsaremos en Nuevo. Para eliminarlo, loseleccionamos haciendo clic en l y pulsaremos en Eliminar. Para modificar unestilo, lo seleccionamos haciendo clic en l y pulsaremos en Modificar.

    Algunas etiquetas HTML que debemos conocer son:

    a: se refiere a los hipervnculos.

    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 ttulos).

    Unidad12. Plantillas

    41

  • 8/14/2019 Manual Completo Frontpage

    42/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Vamos a ver unelemento de FrontPage que nos puede ayudar a la hora decrear pginas web: las plantillas. Aprenderemos qu son y cmo usarlas.

    Qu es una plantilla?

    Una plantilla es un documento creado previamente que podemos usar paracrear otros. Una plantilla puede contener toda clase de elementos: texto,grficos, vnculos, etc. Normalmente una plantilla contiene ciertas partesvacas, que tendremos que rellenar segn el caso. Por ejemplo, si estamoshaciendo la web de una empresa, podemos colocar el logo y el nombre de laempresa en la plantilla, y crear las distintas pginas a partir de esta plantilla:todas las pginas contendrn el logo y el nombre de la empresa.

    Crear una plantilla es muy sencillo. Creamos una pgina nueva y la llenamosdel contenido que necesitemos. Para guardarla, la guardaremos como Plantillaen vez de como pgina web, como hacamos hasta ahora.

    Las plantillas son archivos que acaban en .tem.

    Al guardar unaplantilla tenemos quedarle un nombre para

    poder identificarla. Esrecomendable poneruna pequeadescripcin.

    Si queremos que laplantilla slo puedausarse en la webactual, hemos demarcar la casillacorrespondiente. Esto

    es til cuando tenemos varias webs, cada una con sus propias plantillas. Por

    42

  • 8/14/2019 Manual Completo Frontpage

    43/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    defecto, la plantilla puede usarse en cualquier web.

    Pulsando en el botn Examinar... podemos ver las plantillas que ya hemoscreado.

    Usar una plantilla.

    Como ya hemos visto, usar unaplantilla es bien fcil. Pulsamosen Archivo>>> Nuevo Pginao Web y en el Panel de tareas(men de la derecha) hacemosclic en Plantillas de pgina.Tras esto, elegimos la plantilla

    a partir de la cual queremoscrear la pgina y pulsamos enAceptar.

    Aparecer una pgina nuevacon los contenidos de laplantilla. Es importante darnoscuenta de que, al pulsarGuardar, guardaremos unapgina web. La plantilla setoma como referencia pero no

    se modifica. La prxima pginaque creemos a partir de la plantilla, contendr los contenidos originales de laplantilla.

    Para modificar una plantilla tan slo hemos de abrir un nuevo documentobasado en la plantilla que queramos modificar, modificarla y guardarla con elmismo nombre. Para ello seleccionaremos la plantilla haciendo clic enExaminar, y despus haremos clic en Aceptar.

    Unidad 13. Mantenimiento y optimizacin

    43

  • 8/14/2019 Manual Completo Frontpage

    44/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    de un sitio web

    Vamos a aprender cmo comprobar el buen funcionamiento de nuestro sitio

    web. Veremos qu elementos de FrontPage nos pueden ayudar en esta tarea.Informes del sitio web. Mantenimiento. FrontPage nos proporciona una serie de herramientas para comprobar elfuncionamiento del sitio web y llevar su mantenimiento. Estas herramientasfuncionarn para un sitio web, pero no para una pgina individual. Algunas deestas herramientas son:

    Vista de Informes: Nos permite ver una serie de parmetros que nosinforman sobre el estado de la web.

    Vista Tareas: Nos permite llevar una lista de tareas pendientes.

    Vista de Exploracin y vista de hipervnculos: Nos ayudan almantenimiento de la web.

    Vista de Informes.

    Para mostrar la vista de informes, tan slo hemos de hacer clic en el iconoInformes de la barra de Vistas.

    FrontPage nos muestra un resumen de los informes del sitio web. Hay unapequea descripcin de para qu sirve cada informe y otros datos, como uncontador que muestra la cantidad de pginas o enlaces, y una columna que nosmuestra el tamao de un conjunto de pginas determinado. Estos son losdiferentes informes:

    Todos los archivos: Muestra la cantidad de archivos de la web y el tamaototal.

    44

  • 8/14/2019 Manual Completo Frontpage

    45/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Imgenes: Muestra la cantidad de imgenes de la web y el tamao total.

    Archivos no vinculados y vinculados: Nos muestra la cantidad de archivos alos que podemos llegar desde la pgina web ndice (vinculados) y a los que no

    (no vinculados).

    Pginas lentas: Muestra la cantidad de archivos de la web cuyo tamao harla carga lenta y tediosa. Por defecto se considera lento a un archivo que tardaen cargar ms de 30 segundos con un mdem de 28 kb. Podemos cambiar estosparmetros.

    Archivos antiguos y agregados recientemente: Muestra la cantidad dearchivos antiguos y nuevos. Por defecto se considera antiguo a un archivo queno haya cambiado en 72 das, y nuevo es un archivo con menos de 30 das.Podemos cambiar estos parmetros.

    Hipervnculos: Muestra datos acerca de los hipervnculos del sitio web.Podemos ver cuntos tenemos, cules estn rotos y cules no, cuntos son denuestra web y cuntos sealan pginas web externas, etc.

    Errores de componente: Errores en componentes (componentes insertadoscon Insertar Componente Web).

    Tareas no completadas: Nos dice la cantidad de tareas de la vista de Tareasque estn sin terminar.

    Temas no utilizados: Si decidimos utilizar un tema para una pgina del sitioy despus borramos la pgina, en nuestro sitio web quedarn los archivos deltema. Este informe nos muestra qu tema es, para que lo eliminemos yahorremos espacio.

    Unidad 14. Publicar en Internet.

    45

  • 8/14/2019 Manual Completo Frontpage

    46/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Vamos a ver cmo tener nuestra propia pgina web en Internet. Veremoscmo subir la pgina a un servidor de forma que cualquier persona con accesoa Internet pueda verla. Es importante que al elegir un servidor, ya sea gratuitoo de pago, nos aseguremos de que soporta las extensiones de FrontPage. Sino lo hace, podr seguir utilizando el servidor para alojar la web, pero algunas

    caractersticas avanzadas de FrontPage no funcionarn.

    Publicar en Internet.

    Una vez tenemos acabada nuestra pgina Web podemos publicarla en Internety podr ser vista desde cualquier parte del mundo. Slo tienes que seguir lospasos que te vamos a indicar, sin gastarte un duro. As de sencillo.

    Para que tu pgina se vea desde Internet simplemente tiene que estaralmacenada en un servidor de Internet.

    Cualquiera puede tener un servidor de Internet, slo hace falta un ordenador,una direccin IP fija, una conexin telefnica y un software adecuado, como elservidor Apache que adems es gratuito. Esto explica el gran crecimientoinicial de Internet. Han surgido miles de servidores que comparten suinformacin por el simple gusto de aprender y ensear. Y muchos ms queesperan hacer negocio en la red.

    De todas formas, crear un servidor es bastante ms complicado de lo quevemos en este curso. Sin embargo hay una forma mucho ms fcil de publicaren Internet: basta utilizar los servicios gratuitos que ofrecen algunos

    servidores comerciales, a cambio de un poco de publicidad. A continuacin tevamos a indicar cmo puedes hacerlo.

    Obtener espacio gratuito. Hay dos alternativas.

    1. Inscribirse en un sitio especializado en ofrecer espacio gratuito como Lycos-Tripod, Geocities-yahoo, iespaa, Pobladores, etc,

    2. Utilizar el espacio gratuito que suelen ofrecer los proveedores de Internetcomo Tiscali, Ya.com, Terra, Ono, etc.

    Obtener espacio de pago. A cambio de una cantidad mensual o anualpodemos tener un espacio en un servidor de pago. Las ventajas sobre unservidor gratuito son: no hay publicidad, la calidad (velocidad y espacio delque disponemos) suele ser ms alta. Adems, se suele contratar un dominio(direccin en Internet) para que la gente acceda fcilmente a nuestra pgina.Esto es particularmente importante para una empresa.

    Los servidores de pago son muchos y variados. Los mismos servidores gratuitosnos ofrecen servicios extra por una pequea cantidad de dinero, amen de

    46

    http://www.tripod.lycos.es/http://www.tripod.lycos.es/http://es.geocities.yahoo.com/http://www.iespana.es/http://www.pobladores.com/http://www.tiscali.es/http://www.ya.com/http://www.terra.es/http://www.ono.es/http://www.tripod.lycos.es/http://www.tripod.lycos.es/http://es.geocities.yahoo.com/http://www.iespana.es/http://www.pobladores.com/http://www.tiscali.es/http://www.ya.com/http://www.terra.es/http://www.ono.es/
  • 8/14/2019 Manual Completo Frontpage

    47/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    eliminar la publicidad.

    Usar un programa FTP para subir la pgina.

    Colocar tus pginas en internet.

    A partir del momento en que transfieras tus ficheros ya podrs ver tus pginasen Internet tecleando la direccin (URL) que te asignen. Por ejemplo.http://members.es.tripod.de/tunombre/tupagina.htm

    Pero para ello, has de poner tus archivos en el ordenador que hace de servidor,ya sea de pago o gratuito. Se suele decir que se 'suben' las pginas a Internet.Para ello podemos usar un programa especializado o subir los archivos desdelas pginas web del servidor. La segunda forma es ms sencilla, peronormalmente tenemos que subir los archivos de uno en uno. Si tenemos

    muchos archivos, es conveniente usar un programa especializado en mandararchivos llamado FTP.

    47

  • 8/14/2019 Manual Completo Frontpage

    48/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Unidad 15. Programacin Javascript.

    Vamos a ver cmo se pueden incluir programas en nuestras pginasweb. Aunque el objetivo de este curso no es este, vamos a explicar un poco

    qu posibilidades tiene el usuario para programar sus propias pginas web y deincluir alguno de los programas disponibles gratuitamente en la red.

    Javascript. Qu es? Para qu sirve?

    Javascript es un lenguaje de programacin creado en sus orgenes porNetscape para ampliar las posibilidades del HTML. Gracias a l, podemosincluir pequeos programas que se ejecutan en el ordenador del usuario,permitiendo cierta interactividad entre el usuario y la pgina web. Porejemplo, si tenemos un formulario que el cliente ha de rellenar, podemosdesarrollar un Javascript que se encargue de verificar que todos los datos soncorrectos y de avisar al cliente si falla alguno, antes de enviar el formulario.

    As ahorramos trfico innecesario de pginas web. Javascript debe sersoportado por el navegador. Debido a que existen diversas versiones, es posibleque nuestro navegador o el del usuario no soporte la versin de Javascript queusemos. En ese caso, el cdigo de Javascript es ignorado.

    Javascript. Mini-manual.

    Los scripts de Javascript son insertados en la pgina web de la misma formaque escribimos cdigo HTML, por tanto es posible programar con cualquiereditor de textos o desde la vista HTML de FrontPage. Debemos indicarle alnavegador dnde se encuentra el script con las etiquetas y. Veamos un ejemplo:

    Pero lo que da sentido a un script es la posibilidad de asociarlo a un evento.Un evento se da cuando se abre una ventana, cuando se cierra, cuando elusuario pulsa un botn, etc. Es un mensaje que el sistema operativo le pasa alnavegador, dicindole el usuario ha hecho algo.

    Vamos a ver un ejemplo sencillo: al pulsar en un botn, se abre una ventana.Para ello nos aprovecharemos de algunas funciones y objetos que nosproporciona Javascript: el objeto window, que representa la ventana delnavegador, y la funcin onclick(), que nos permite abrir ventanas.

    Esto es el titulo

    48

  • 8/14/2019 Manual Completo Frontpage

    49/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    Este script muestra un botn. Al hacer clic en l, muestra otra pgina en otra ventana

    aparte. El script ya viene implementado en el navegador, y se asocia al botn con

    onClick(). window.open abre una nueva ventana, y pasa como parmetros al navegador

    varios valores que configurarn la ventana (resizable: que pueda cambiar de tamao,

    width y height: el tamao (ancho, alto), etc).

    Javascript. Adaptar el Javascript a la pgina.

    Existen multitud de scripts en Javascript gratuitos disponibles en la red. Pero,cmo usarlos en nuestras pginas? Generalmente un cdigo en Javascript sedivide en dos partes: la que va entre las etiquetas y las que va entrelas etiquetas .

    Las primeras son puro cdigo, mientras que las segundas especifican a qu seaplica el cdigo de las primeras. Por tanto, no importa mucho dondecoloquemos el cdigo que va entre las siempre que all. En cambio, el

    cdigo que va entre las se aplicar a un objeto (o crear uno nuevo) yhemos de colocar el cdigo justo donde lo necesitemos. Todo esto suele irexplicado en la pgina web dnde obtenemos el cdigo.

    Tomemos por ejemplo el siguiente cdigo de una pgina web personal (a laizquierda). Vamos a insertar un cdigo Javascript (a la derecha) que saluda anuestros visitantes, variando el texto segn la hora del da. En la web se nospide que insertemos el cdigo en las entre etiquetas .

    Esto es el titulo

    var dt = new Date();var hr = dt.getHours();var msg = ((hr11)&&(hr

  • 8/14/2019 Manual Completo Frontpage

    50/50

    Escuela de Informtica - Programacin y Diseo web FRONTPAGE

    La forma correcta de insertar el cdigo (siempre desde la vista HTML) es la

    siguiente:

    Esto es el titulo

    var dt = new Date();var hr = dt.getHours();var msg = ((hr11)&&(hr