Proyecto con documentos Word y PDF

El primer objetivo es aprovechar documentos Word y PDF para crear una sencilla página Web basada en ellos.

A - Crear el sitio y la carpeta del proyecto

  1. Cree un sitio. Para ello haga clic en

    Sitio > Nuevo sitio

    En la ventana de diálogo Definición del sitio utilice la pestaña Avanzadas.
    1. Nombre del sitio: Primer proyecto (ya sabe que el nombre es arbitrario).Si trabaja en un ordenador compartido, anteponga sus siglas para no confundir su proyecto con el de otra persona.
    2. Carpeta: (También es arbitraria)

      D:\Sitios Web\Documentos\
  2. Cada proyecto se debe guardar en una carpeta de su ordenador. A esa carpeta se le conoce como la carpeta raíz del proyecto. Haga clic en el botón Buscar Carpeta raíz local . Seleccione su disco de datos. Es costumbre tener una carpeta que contenga todos los proyectos. Seleccione la carpeta con sus sitios Web. Si no tiene ninguna, cree una carpeta (utilice el botón Crear carpeta ) y llámela, por ejemplo Sitios Web. Abra esa carpeta y cree una para el proyecto (utilice el botón Crear carpeta ) y llámela Documentos.
  1. Con el nombre del proyecto y la carpeta asignada, tiene definido localmente el proyecto. Haga clic en Aceptar y verá la carpeta del proyecto en color verdeen el panel Archivos. Por lo tanto no olvide que las carpetas de Windows que Dreamweaver reconoce como proyectos, son de color verde.
  2. Todo lo que contenga el proyecto se colocará finalmente en un servidor remoto para ponerlo a disposición pública. Los servidores suelen rechazar determinados símbolos utilizados en los nombres de archivos y carpetas. Para evitar problemas con los nombres de las carpetas y archivos procure utilizar letras minúsculas, evite los símbolos que no sean internacionales o que sean especiales, como acentos, eñes, guiones, comas, etc. Es preferible no utilizar espacios. Comprenda que el nombre de un archivo o una carpeta es algo simbólico y no está sometido a las reglas de la ortografía. En cambio, el contenido de los documentos, que es lo que verá el usuario en pantalla, sí que está sometido a las reglas ortográficas.

B - Crear carpetas para los archivos

  1. Lo siguiente que haremos es crear, dentro de la carpeta del proyecto, otras carpetas para organizar un poco el trabajo. Para crear una carpeta haga clic con botón derecho del ratón sobre la carpeta del proyecto, en el panel de archivos. Seleccione Nueva carpeta. La estructura que va crear la puede ver en la figura de la derecha. Consta de las siguientes carpetas:
    1. Carpeta de imágenes: Tener carpetas independientes para las imágenes es muy conveniente para poder localizarlas con facilidad. Llámela img.
    2. Carpeta para los .doc: Puesto que en este proyecto utilizaremos documentos Word, crearemos una carpeta para este tipo de documentos. Llame doc, a la nueva carpeta.
    3. Carpeta para los documentos pdf: Llame, pdf, a la nueva carpeta.
    4. Carpeta para los documentos Word convertidos a html: Llame dochtml, a la nueva carpeta.
  1. Recuerde que un proyecto tiene gran cantidad de archivos. Si no se organiza y no crea las carpetas necesarias, perderá mucho tiempo cuando tenga que localizar un archivo para modificarlo o sustituirlo. La estructura de carpetas que hemos sugerido puede ampliarse con otras carpetas dentro de ellas. Eso queda al criterio del autor del proyecto. Recuerde que se trata de algo sencillo pero fundamental. Si no lo hace de esa manera, verá lo mal que trabaja cuando aumente el número de archivos. Un sitio Web acaba teniendo gran cantidad de elementos diferentes. Hágame caso y pierda algo de tiempo organizando bien sus documentos mediante el uso de carpetas contenedoras.

    C - Copiar los archivos

  2. El siguiente paso es colocar en las carpetas los diferentes archivos. En este proyecto se utilizan cuatro tipos de archivos:
    1. Imágenes: Voy a proporcionarle algunas. Haga clic en los vínculos (libro, bola roja, nuevo, pdf , fondo1, fondo2) y guarde las imágenes en la carpeta img (para guardar las imágenes haga clic sobre ellas con botón derecho del ratón y seleccione Guardar imagen como). Las imágenes las podrá utilizar después para adornar sus páginas Web un poco.
    2. DOC: Le proporciono mediante un vínculo (archivo doc), un archivo para que lo utilice en la práctica. Cuando haga clic en el vínculo tendrá la opción de abrirlo o guardarlo. No lo abra. Guárdelo en su carpeta doc.
    3. PDF: Haga clic en el vínculo (archivo pdf) y guarde el archivo en su carpeta pdf.
    4. Documento Word para convertir a HTML: Haga clic en el vínculo (archivo doc) y guarde el archivo en su carpeta dochtml. Este archivo de Word no lo utilizaremos directamente sino que lo convertiremos previamente, mediante Word, en un documento html.
  1. Observe en la figura la organización del proyecto con sus carpetas y la ubicación de los archivos. Si el panel de Archivos no muestra los que ha copiado desde Windows es porque no ha actualizado la pantalla. Para actualizar o refrescar la pantalla haga clic en el botón Actualizar del panel de Archivos o haga clic en un punto libre del panel y pulse F5 (Actualizar).
  2. En los dos puntos siguientes voy a comentarle como operan estos archivos cuando se intentan abrir a través de un navegador Web.
    1. Cuando hace clic en un vínculo a un archivo Word, aparece una ventana de diálogo que le da dos opciones: Guardar el archivo o abrirlo. Si opta por abrirlo, puede que el navegador ejecute el programa Word en una ventana independiente y muestra el documento en pantalla o puede que abra el documento directamente en el navegador. Esto depende de las versión de navegador que tenga instalada. Por lo tanto, en algunos casos, el usuario debe tener instalado Word para poder leer el archivo.
    2. Cuando hace clic en un vínculo a un archivo PDF, el navegador ejecuta el programa Acrobat Reader y lo incrusta dentro de la ventana del navegador. Esto no ocurre con un documento Word que se abre en una ventana independiente a través del programa Word. La acción de incrustar una aplicación dentro del navegador se produce gracias un pequeño programa, conocido como plug-in, que ejecuta el navegador. El plug-in es diferente para cada programa. El plug-in del programa Acrobat Reader suele estar instalado en los navegadores, por lo que el usuario no necesita instalarlo.

    D - Convertir un documento Word en página Web

  3. Otra interesante posibilidad es convertir un archivo Word en páginas Web para poder verlo directamente en la ventana del navegador. Es lo que haremos ahora con el documento fracfaraones.doc, convertirlo en página Web. Para ello haga lo siguiente:
    1. Minimice la ventana de DreamWeaver. Ejecute Word y abra el documento fracfaraones.doc. A continuación haga clic en Archivo > Guardar como página Web.
    2. Vea la figura. Seleccione como tipo de archivo: Página Web, filtrada (*htm; *html).
    3. Observe que el nombre se coloca automáticamente como fracfaraones.htm.
    4. Haga clic en Guardar. Tendrá un mensaje de aviso que indica que al filtrar se pierden algunas de las características de Word. Es lo que queremos porque no volveremos a manejar esta página Web desde Word. Cierre Word.
    5. Vuelva a DreamWeaver y observe lo que ha pasado en la carpeta dochtml. Verá el archivo fracfaraones.htm que es una página Web. Las imágenes asociadas a este archivo se han almacenado en una carpeta independiente fracfaraones_archivos. Si alguna vez quiere extraer las imágenes de un documento Word, este es un buen método para conseguirlo.
    6. El documento fracfaraones.doc ya no lo necesita por lo que lo puede borrar. Para ello selecciónelo en el panel de archivos y pulse la tecla Supr. También puede seleccionarlo y desplegar el menú contextual con botón derecho del ratón. Haga clic en Edición > Eliminar.
    7. Si en el panel de archivos, despliega la carpeta fracfaraones_archivos mediante un clic en el control de expansión que aparece junto a la carpeta, verá el contenido de esa carpeta. En este caso hay tres imágenes: image001.jpg, image002.gif e image003.gif.
  1. Digamos que en estos momentos tenemos todo el material casi listo para completar nuestro sitio Web. Lo que hemos hecho es muy simple. Sólo crear carpetas, colocar archivos y transformar un documento Word en un archivo html filtrado.

    E - Página index.html

  2. Una sencilla página Web, index.html, para vincular los documentos completará el proyecto. Haga clic con botón derecho sobre la carpeta del proyecto en el panel de archivos. Seleccione Nuevo archivo. Verá un archivo untitled.html iluminado en azul en el panel de archivos. Llame al archivo index.html.
  3. Haga doble clic sobre el archivo index.html y se abrirá en la ventana de DreamWeaver. Lo primero es ponerle título a la página. En la parte superior del documento verá la barra de herramientas con una casilla destinada a escribir el título del documento. Escriba: Apuntes de Informática y Matemáticas.
  4. Haga clic en el documento en blanco. Pulse F4 para ocultar los paneles y poder trabajar más cómodamente. Escriba el siguiente texto o guión de los apuntes:

Informática y Matemáticas

Formatos gráficos.

Vocabulario de electrónica e informática.

Las fracciones de los faraones.

  1. Pulse de nuevo F4 para recuperar los paneles. Sitúe el cursor en la segunda línea. En el panel inferior Inspector de propiedades, haga clic en el botón Lista ordenada .
  2. Repita la operación anterior para la tercera y cuarta línea. De esa forma tendrá una lista numerada.

    F - Formatos

  3. Haga clic en la primera línea. En el Inspector de propiedades despliegue la lista de formatos y seleccione Encabezado 2.
  4. Con triple clic muy seguido sobre la primera línea la selecciona. Si no lo consigue hágalo pinchando y arrastrando el ratón. Otra forma muy eficaz es utilizar el teclado cuando se trata de seleccionar. Para ello sitúe el cursor al principio de la línea, mantenga pulsada la tecla mayúsculas y sin soltar pulse la tecla fin o mantenga pulsada la tecla flecha a la derecha hasta llegar al final de línea o dé un toque a la tecla flecha abajo para seleccionar toda la línea.
  5. Con el texto seleccionado haga clic en el botón Color del texto en el inspector de propiedades. Seleccione el color Azul oscuro.
  6. Haga clic en el botón Negrita . De esa forma tiene un encabezado para el documento. ya ha visto lo fácil que es, se selecciona el texto y se acude al inspector de propiedades del elemento seleccionado.

    G - Establecer los vínculos

  7. Ha llegado el momento de establecer los vínculos con los documentos que almacenó en las carpetas. Lo mejor es que vea primero la siguiente simulación en la que le indico la forma más fácil de establecer los vínculos.
  8. Seleccione, en la segunda línea de texto, Formatos gráficos. Pinche y arrastre el botón Señalar archivo y suelte el ratón sobre el archivo FormatosGraficos.doc en la carpeta doc del panel de archivos.
  9. Seleccione, en la tercera línea de texto, electrónica e informática. Pinche y arrastre el botón Señalar archivo y suelte el ratón sobre el archivo vocabulario.pdf en la carpeta pdf del panel de archivos.
  10. Seleccione, en la cuarta línea de texto, Las fracciones de los faraones . Pinche y arrastre el botón Señalar archivo y suelte el ratón sobre el archivo fracfaraones.doc en la carpeta dochtml del panel de archivos.
  11. Recuerde que otra forma de establecer los vínculos es seleccionar el texto y utilizar el botón Buscar archivo del inspector de propiedades.

    H - Color o imagen de fondo

  12. Para poner un fondo al documento haga clic, con botón derecho del ratón, en un punto libre de la página para desplegar el menú contextual. Seleccione Propiedades de la página. Para poner un fondo liso haga clic en el botón Color fondo . En nuestro ejercicio utilizaremos una imagen. Puede elegir como imagen de fondo blue6b.gif o papiro.jpg de su carpeta img. Para ello utilice el botón examinar que aparece junto a la casilla imagen de fondo.
  13. Los navegadores repiten las imágenes de fondo hasta que se llena la pantalla. Por esa razón se utilizan estrechas franjas o cuadrados pequeños como archivos de imagen de fondo. Así se transmite por la red un archivo de imagen muy pequeño y llega en poco tiempo al navegador. Puede encontrar, a través de internet, numerosos archivos para fondos de pantalla. A veces se conocen con el nombre de texturas.

    I - Insertar imágenes

  14. Lo último que haremos es insertar algún icono o imagen que adorne un poco el texto de la página index.html. En el panel de archivos, pinche y arrastre la imagen nuevo.gif de la carpeta img y suéltela al final de la segunda línea de texto.
  15. En el panel de archivos, pinche y arrastre la imagen libro.gif   y suéltela delante de la palabra, electrónica, en la tercera línea de texto.
  16. En el panel de archivos, pinche y arrastre la imagen zbolaroja.gif   y suéltela delante de la palabra, matemáticas, en la cuarta línea de texto.

  17. Pruebe el proyecto viéndolo en el navegador. Para ello haga clic en el botón Vista previa o pulse F12.

Datos remotos

Cuando crea que el proyecto debe ser publicado en Internet, tiene que transmitir los documentos y carpetas para colocarlo todo en el servidor de su proveedor. Para conectar con el servidor remoto necesita suministrar algunos datos a DreamWeaver:

  1. Protocolo de comunicaciones que se va a utilizar en la transmisión. Generalmente se utiliza el protocolo FTP (File Transfer Protocol).

    Su proveedor de Internet le tiene que proporcionar cuatro datos:

  2. Nombre del servidor FTP.
  3. Directorio o Carpeta del servidor asignada a sus proyectos.
  4. Nombre de usuario.
  5. Contraseña.

Con esta información en su poder,  haga doble clic sobre la casilla con el nombre del proyecto . La verá en la parte superior del panel de archivos, por encima de los botones del panel, situada a la izquierda de la que pone Vista local. De esta forma obtiene en pantalla la ventana de diálogo Definición del sitio y puede introducir modificaciones.