Site hosted by Angelfire.com: Build your free website today!
Página Nueva

Cambiar
    propiedades
    del Texto


Poner una
imágen de fondo
 
                              
Poner un
sonido
de fondo       

                     
Insertar
    imágenes


Crear links


Insertar
    Tablas


Volver a
   herramientas

                      

Tutorial básico de Frontpage Express

El Frontpage Express es un editor de html que viene con Windows 98 o con el Internet Explorer 4 para Windows 95. Este tutorial te ayudará a crear páginas sencillas, sin tener conocimientos previos.

  1. El primer paso es crear un directorio (carpeta) nuevo en tu disco duro donde guardarás la página. De ahora en adelante, vamos a suponer que todos los archivos necesarios para la página estan en el mismo directorio, ya que es la manera mas sencilla de hacerlo. A ese directorio debes copiar todas las imágenes que usarás en la página.
  2. Abre el Frontpage Express. Lo encontrarás dentro de la carpeta Internet Explorer en el menú Inicio -> Programas.
  3. Pulsa sobre Nueva pagina para crear una página en blanco nueva.
  4. En la barra de tareas, ve a Archivo -> Propiedades de página y en Título escribe el titulo que hayas escogido para tu página web y le das a Aceptar. (Este título no se ver en pantalla, pero debe ser breve y descriptivo, ya que es el que aparecerá en la barra de títulos del explorador y cuando alguien agregue tu página a sus favoritos.
  5. Pulsa sobre guardar para guardarla. En la ventana de dialogo "Guardar como" le das a "Como archivo" y la guardas como index.html en el directorio que has creado antes.
  6. Vuelve a la barra de tareas y ve a Formato -> Fondo. Si vas a utlizar una imagen de fondo, marca la casilla "Imágen de fondo" y en el recuadro inferior escribe el nombre de la imagen que vas a usar, y le das a Aceptar. En esta misma pantalla si lo deseas puedes cambiar el color del fondo (en caso de que no utilices ninguna imágen) el color del texto y de los links.
    Si marcas la opción marca de agua el fondo quedará fijo y el texto e imagenes se desplazaran con un efecto de "flotar" sobre el fondo.

    Nueva pagina
  7. Encabezado 1Ahora el cursor estara situado sobre la pagina en si. Escribe el nombre de la pagina. Pulsa sobre centrar si quieres centrar el texto. Selecciona todo el texto y ve al primer menu despegable de la barra de tareas. Pulsa sobre la flecha y escoge "Encabezado 1" de las opciones que aparecen. Si quieres cambiar el color del texto, le das a color (manteniendo el texto seleccionado) y escoges el color que quieras, teniendo en cuenta que combine con el fondo.
    Si lo que quieres es que todo el texto de la página sea de un determinado color, puedes escogerlo en la pantalla Formato -> Fondo y en "Texto" escoger el color que quieras del menu desplegable.
  8. Si quieres insertar un sonido de fondo (previamente habrás copiado el midi o wav en la carpeta que estamos utilizando) Ve de nuevo a Archiv/Propiedades de la Pagina, donde pusiste el nombre de la página. Allí verás una casilla para escribir el nombre del Sonido de fondo. Si marcas la casilla Siempre, este se ejecutará infinitas veces, de lo contrario, en bucle puedes poner el numero de veces que se ejecutará. (Por ser Front Page un producto Microsof esto hará que el sonido se ejecute unicamente para el Explorer, si quieres que los que usan Netscape escuchen la música deberás agregar un código html puro en la sección body -el cuerpo- del documento (en el último punto explico como). El código a agregar es:

    <embed src="nombredeltema.mid" weight="200" height="55" loop="true"
    autostart="true"  hidden="true">

    Esto hará que el tema también se ejecute en el Netscape Navigator (tomá  pa´ vos Bill) en  loop puedes cambiar true por el numero de veces y logicamente en "nombredeltema" va el nombre de tu archivo mid.
  9. Ahora puedes escribir lo que quieras en el cuerpo de la página. Esto ya depende del tipo de página que quieras crear. Para separar parrafos, usa la tecla "intro". Para crear solo "puntos y aparte" usa "mayusculas + intro".
  10. Para insertar una imagen, le das a insertar una imagen. Aparecerá marcado por defecto "Desde archivo". Lo dejas asi y en el recuadro inferior escribe el nombre de la imágen que quieras insertar. Le das a Aceptar.

    insertar una imagen

    Para centrarla, clickea sobre ella  y le das a centrar de nuevo.
    Luego clickea de nuevo sobre ella, pulsa el boton derecho del mouse y escoge "Propiedades de imagen". Si quieres que al pasar el mouse sobre la imagen salga un texto, escribelo en "Texto" bajo "Representaciones alternativas".
    Ahora le das a la pestaña "Apariencia". Alli asegurate que esta marcada la casilla "Grosor del borde" con un valor de 0 y tambien la casilla "Especificar tamaño". Las cifras que aparezcan alli son el tamaño de la imágen y no conviene modificarlas a menos que sea muy necesario. Le das a Aceptar.
  11. Para crear un link o enlace, selecciona el texto que deseas y le das a crear un link o enlace. En "Direccion url" pon la url de la página a la que quieras que la gente vaya al pulsar ese enlace. Si se trata de una página de tu misma web, elige como tipo de hipervinculo otros y escribe el nombre de la página. Si es una página externa, elige tipo de hipervinculo http: y esribe la direccion completa (www.etc.etc.) Si quieres poner un email, selecciona "mailto" del menu desplegable y escribe el email. Le das a Aceptar y ya tienes el link creado.  El mismo procedimiento se utiliza para crear links desde imágenes que hayas insertado previamente, solo que en vez de marcar el texto, marcas la imágen.
    Para crear un enlace dentro de la misma página primero ve al punto de destino (por ejemplo un título) marcalo y ve al menu Edicion en la barra de tareas alli escoge "marcador". Si vas a hacer varios de estos enlaces en la misma página es conveniente que le pongas un nombre facilmente identificable para evitar confusiones. Luego vas a crear el link normalmente pero en vez de escribir la pagina de destino seleccionas la pestaña Páginas Abiertas y ahí donde dice Marcador selecciona el nombre que pusiste. Dale aceptar.



  12. Para cambiar el formato de texto, selecciona primero el texto que quieras. Una vez hecho esto puedes pulsar sobre estos botones: negrita Pone el texto en negrita  cursiva Pone el texto en cursiva Subraya Subraya . Puedes combinar mas de uno, o los tres. Con los tres obtendras por ejemplo el texto en cursiva, negrita y subrayado.
  13.  Otros formatos de texto los encuentras en el menu desplegable superior que ya hemos visto anteriormente. Hay que tener en cuenta que estos estilos se aplican a todo el parrafo y no solo a un trozo.
    Formatos de textoEjemplos:
  14. Texto con formato

    Encabezado 1

    Encabezado 2

    Encabezado 3

    Encabezado 4

    Encabezado 5
    Encabezado 6

    Nota: No utilices nunca un encabezado para obtener un tamaño de texto o letra negrita, utiliza los botones determinados para eso. Los encabezados son para los títulos. De lo contrario se puede ver muy bien en tu navegador pero en tamaños grotescos en otros navegadores.

    Termino definido

    Definicion
  • Lista con viñetas
  • Lista con viñetas
  1. Lista numerada
  2. Lista numerada
  1.  aumentar o disminuir el tamaño del texto Estos dos botones sirven para aumentar o disminuir el tamaño del texto. Solo selecciona el texto en cuestión y le das al boton correspondiente. No tienen ningún efecto sobre el tamaño de los formatos de Encabezado (aunque lo pueda parecer en el programa, en el navegador no es asi), ya que estos vienen predefinidos en el propio lenguaje html.
  2. FuentesPara cambiar la fuente del texto, selecciona el texto que quieras y le das al segundo menu desplegabla de la barra de tareas y alli escoge la fuente que desees. 
    Pero hay que tener en cuenta que no todo el mundo tiene las mismas instaladas en su equipo. Por ejemplo, puede que con la fuente "Staccatto" el texto que quieres quede fabuloso para ti, pero si quien esté viendo la página no la tiene instalada, su navegador la visualizará con la fuente por defecto (que suele ser Times New Roman en equipos windows) obteniendo un resultado no deseado y generalmente poco agraciado. Para evitarlo usa fuentes comunes o ampliamente extendidas como por ejemplo Arial, Times new roman, Comic Sans Serif, Courier, Tahoma o Verdana.
  3.  El uso de las Tablas nos puede ayudar muchisimo para organizar la presentacion de la página. Se utilizan en las web mucho mas de lo que parece, ya que la mayoría de las tablas no se ve, pero son muy útiles para organizar la información en bloques, pintar areas de un color diferente al de fondo, etc. Por ejemplo, todas las páginas de esta web utilizan tablas (con borde 0, por eso no se ven). Para insertar una tabla ve a Tablas en el menu de la barra de herramientas. Alli elige insertar tabla. En el cuadro de dialogo puedes definir las propiedades de la tabla: cantidad de filas y de columnas, color de fondo, grosor del borde, porcentaje, etc.
    Estas propiedades pueden cambiarse sobre la marcha, para ello basta con pulsar el boton derecho del mouse sobre la tabla y elegir Propiedades de la tabla -o de la celda-. Una vez creada la tabla podemos insertar dentro de las celdas texto, imagenes, links,etc.
  4. Guarda la pagina Guardar. Ahora solo queda visualizarla en el navegador.  Para ello abre el navegador y carga la página (en Netscape: File/Open Page y en Microsoft Explorer: Archivo/Abrir/Abrir Archivo).
  5. Como introducir un código html puro. Si quieres añadir un contador, un libro de visitas, o cualquier otro recurso de cgi externo, el código que te darán es html puro por lo cual si lo pegas normalmente en la página no serviría de nada porque el navegador lo vería como texto. Para introducir algo en código html, tienes que ir a Ver -> Html. Asi aparecerá el codigo html de la página. Ahora copia (Control + C) el código del contador, del libro de visitas o de lo que sea, (que te habrán facilitado en una pagina web o por email), pon el cursor donde quieras insertar el contador y lo pegas (Control + V) y le das a Aceptar. Si esto te resulta complicado, otra forma es marcar con el cursor donde quieres insertar lo que sea que vas a poner, luego ir a --> insertar en el menu que ves arriba y alli eliges "codigo HTML", en la pantalla que se abre pega el código.

    barra