Kitabı oku: «Manual de Dreamweaver CS5», sayfa 5

3 El nombre del sitio aparece en el panel Archivos y en el cuadro de diálogo Administrar sitios, no en el navegador web. La carpeta del sitio local suele ubicarse en el equipo local, aunque también se puede encontrar en un servidor de red. Debe saber que, en general, la carpeta remota suele colocarse en el equipo donde se ejecuta el servidor Web. La carpeta remota incluye los archivos a los que los usuarios acceden en Internet. Las carpetas locales y remotas permiten transferir archivos entre el disco duro local y el servidor Web, lo cual facilita la administración de los archivos en los sitios de Dreamweaver. Se trabaja en archivos en la carpeta local y se publican en la carpeta remota cuando se desea que otras personas los puedan ver. Por defecto, el programa propone la carpeta de documentos del equipo. Para variar esta ubicación predeterminada del sitio local, pulse en el icono de la carpeta situada a la derecha del campo Carpeta del sitio local. (3)

La configuración de un sitio de Dreamweaver permite organizar los documentos asociados.

4 La acción nos conduce al cuadro de diálogo Elegir carpeta raíz. En este cuadro, haga clic en el botón Escritorio del panel de accesos directos. (4)

5 Todos estos cuadros de diálogo presentan un grupo de botones a la derecha del desplegable de la parte superior. La pulsación del tercero de ellos posibilita la creación directa de una carpeta. Pulse el botón Nueva carpeta, el tercero del grupo de botones de la parte superior del cuadro de diálogo.

6 Esta carpeta será la raíz, el nivel jerárquico superior, de nuestro sitio local, en la que iremos almacenando todos los archivos necesarios para el correcto funcionamiento del sitio. Asignaremos por tanto el nombre elemental a la carpeta creada. Escriba dicha palabra y pulse dos veces la tecla Retorno, la primera para confirmar el nombre y la segunda para abrir la nueva carpeta.

7 Por último procederemos a seleccionar la nueva carpeta, elemental, como carpeta local raíz de nuestro sitio. Pulse el botón Seleccionar.

8 La ruta de la nueva carpeta local ya se refleja en el campo Carpeta del sitio local. Haga clic en Guardar para generar el nuevo sitio. (5)

9 De esta forma tan sencilla hemos creado nuestro primer sitio web. El programa muestra el contenido del panel Archivos, en el cual se refleja nuestro sitio. (6) La categoría Control de versión permite obtener y desproteger archivos mediante Subversion. Subversion (SVN) es un sistema de control de versiones que permite a los usuarios editar y administrar archivos en colaboración en servidores Web remotos. Aunque Dreamweaver no es un cliente SVN completo, sí permite a los usuarios obtener las versiones más recientes de los archivos, realizar cambios y aceptarlos en los archivos. En la siguiente lección veremos cómo administrar un sitio web local. Para terminar este sencillísimo ejercicio, oculte el panel pulsando sobre la doble flecha de su cabecera.

Lección 10. Administración de un sitio local

Para facilitar su gestión posterior, Dreamweaver permite estructurar un sitio antes de empezar a editar los diferentes documentos contenidos en él. El programa dispone de un panel, Archivos, que permite visualizar archivos y carpetas, diferenciando los asociados a un determinado sitio. Un sitio puede contener distintos tipos de archivos, de formatos diferenciados. Las páginas Web tradicionales, por ejemplo, vienen identificadas por la extensión html. El panel Archivos permite su generación, así como el del resto de documentos que el programa permite editar. Dicho panel posibilita, asimismo, la creación de subcarpetas dentro de la carpeta raíz del sitio. Dependiendo de la complejidad del sitio se deberá crear una estructura de carpetas que permita diferenciar fácilmente los documentos contenidos. En todo caso siempre es aconsejable crear una carpeta que contenga en exclusiva las imágenes utilizadas en el sitio.

RECUERDE

Entre los datos configurables en la categoría Configuración avanzada del cuadro de diálogo Configuración del sitio para… existe la posibilidad de predeterminar una carpeta como continente de este tipo de archivos.

1 Finalizamos la pasada lección creando el sitio Web elemental y continuamos en ésta administrando el contenido de este sitio. Para empezar, expanda el panel Archivos pulsando sobre su nombre en la parte derecha del área de trabajo.

2 Este panel permite visualizar archivos y carpetas, saber si están asociados a un sitio de Dreamweaver y realizar operaciones de mantenimiento. En la parte superior del panel se encuentra el campo Mostrar, que contiene el nombre del sitio web elemental, creado en la lección anterior. Este campo posibilita el acceso directo a todos los sitios configurados y al Escritorio, así como a las unidades de almacenamiento del equipo. Despliegue este campo y seleccione en este caso la opción Escritorio. (1)

3 En la parte central del panel se muestra, siguiendo la estructura en árbol tradicional del sistema operativo Windows, el contenido del directorio seleccionado, en este caso el Escritorio. Haga clic en el signo + que precede a la carpeta Elementos de escritorio, en la parte central del panel Archivos. (2)

Recuerde que puede mostrar y ocultar los paneles del programa desde el menú Ventana.

Los iconos de las carpetas y los archivos pertenecientes a un sitio web son de color verde.

4 En el Escritorio se encuentra la carpeta raíz, elemental, de nuestro sitio Web local. Dreamweaver diferencia visualmente, mediante el tono verde de los iconos, las carpetas y archivos pertenecientes a un sitio. Tras realizar esta comprobación visual de la ubicación de nuestro sitio web en el panel Archivos, iniciaremos la administración del mismo. Para ello, pulse el vínculo Administrar sitios, situado a la derecha del campo Mostrar.

5 Se abre así el cuadro de diálogo Administrar sitios, desde el cual es posible iniciar el proceso de edición de nuestro sitio web. Al seleccionar el nombre de un sitio web existente, se activan todos los botones del cuadro de diálogo. El botón Duplicar crea una copia del sitio seleccionado, sobre la cual puede realizar cambios para obtener así nuevos sitios basados en uno ya existente. El botón Quitar permite eliminar el sitio seleccionado. Es importante tener en cuenta que la eliminación de sitios es irreversible, es decir, no se puede deshacer. El botón Exportar permite exportar la configuración de un sitio como archivo XML (con extensión .ste), y el botón Importar permite seleccionar un archivo de configuración de un sitio existente (también con la extensión de archivo .ste). Seleccione el sitio elemental pulsando sobre su nombre y haga clic en el botón Editar. (3)

Al situar el puntero del ratón sobre el vínculo Administrar sitios, en el panel Archivos, éste cambia de color y pasa a mostrarse de color magenta.

El cuadro Administrar sitios también permite la creación de nuevos sitios web. Para ello es preciso pulsar el botón Nuevo en dicho cuadro.

6 La acción nos conduce al cuadro de diálogo Configuración del sitio para elemental, desde el cual realizaremos los ajustes de configuración que necesitamos. Nuestra intención es crear nuevas carpetas y archivos que formarán parte de nuestro sitio web. Haga clic sobre la categoría Configuración avanzada. (4)

7 El programa permite fijar la estructura del sitio antes de empezar a editar los diferentes archivos contenidos en él. Resulta habitual reservar una carpeta del sitio para contener los archivos de imagen utilizados en las páginas y permite incluso predeterminarla para que el programa la utilice cuando añada imágenes a los documentos. Para ello, en el apartado Información local, seleccionado por defecto en esta categoría, pulse el icono situado a la derecha del campo Carpeta predeterminada de imágenes. (5)

8 Vamos a crear una carpeta para las imágenes dentro de la carpeta local. En el cuadro de diálogo Elegir la carpeta de imágenes, que muestra por defecto el contenido (en este caso todavía nulo) de la carpeta raíz elemental, pulse el botón Crear nueva carpeta. (6)

Puede utilizar el menú contextual para crear nuevas carpetas y nuevos archivos.

9 Resulta aconsejable la asignación de nombres que faciliten la rápida identificación del contenido de carpetas y archivos. Escriba la expresión inglesa images y pulse dos veces la tecla Retorno, la primera para confirmar el nombre (7) y la segunda para abrir la nueva carpeta.

10 Una vez creada la carpeta que contendrá las imágenes del sitio elemental, pulse el botón Seleccionar.

El botón Ayuda del cuadro de diálogo Administrar sitios permite acceder a la ayuda del programa relativa a la administración y la edición de sitios web.

11 El campo Vínculos relativos a permite especificar el tipo de vínculos que crea Dreamweaver al crear enlaces con otros activos o páginas del sitio. El programa puede crear dos tipos de vínculos: relativos al documento y relativos a la raíz del sitio. Nos ocuparemos de la creación y la gestión de enlaces más adelante en este libro. De vuelta al cuadro de diálogo de configuración del sitio, pulse el botón Guardar y, en el cuadro de diálogo Administrar sitios, haga clic en el botón Listo. (8)

12 Automáticamente el panel Archivos se actualiza y muestra el contenido del sitio elemental una vez modificado. Así en el cuadro central del panel se puede observar como la carpeta raíz contiene la carpeta preestablecida para albergar las imágenes, images. (9) Dreamweaver permite gestionar la estructura del sitio web directamente desde el panel Archivos. Vamos a comprobarlo para agregar un nuevo archivo a nuestro sitio. Despliegue el menú de opciones del panel pulsando en el icono situado en el extremo derecho de su cabecera, pulse sobre el comando Archivo y seleccione la opción Nuevo archivo. (10)

Si pulsa la combinación de teclas Ctrl + Mayús + N también iniciará el proceso para crear un nuevo archivo.

13 Pendiente de la carpeta raíz del sitio web en el panel Archivos aparece un nuevo documento, denominado por defecto untitled.htm. Si bien cada usuario puede asignar libremente el nombre a sus archivos y carpetas, el nombre de la página principal de un sitio viene determinada. Habitualmente se utiliza el nombre index para identificar la página principal de un sitio, pero en todo caso este nombre dependerá de la configuración del servidor que hospedará el sitio para su visualización en Internet. Utilizaremos esta nueva página como la inicial del sitio, la que se cargará en el navegador en primera instancia. Escriba la expresión index y pulse la tecla Retorno. (11)

14 Otra forma de modificar o ampliar la estructura del sitio web desde el panel Archivos es mediante los comandos de su menú contextual. Para comprobarlo, crearemos una carpeta que contendrá los documentos dependientes de la página principal. Pulse con el botón derecho del ratón sobre el icono de la carpeta raíz del sitio elemental y, en el menú contextual que se despliega, seleccione el comando Nueva carpeta. (12)

El resultado es el mismo que si utilizara los comandos del menú de opciones del panel Archivos; en ese caso, recuerde siempre seleccionar la ubicación de la estructura en la que desea situar los nuevos elementos, ya sean archivos o carpetas.

15 Escriba la palabra documentos para renombrar la nueva carpeta y pulse la tecla Retorno. (13)

16 Vamos a incluir una página en blanco dentro de esta nueva carpeta. Haga clic con el botón derecho del ratón en el icono de la carpeta documentos y, en el menú contextual, seleccione la opción Nuevo archivo. (14)

En el panel Archivos, puede consultar el tipo de elemento, así como la fecha de creación de los mismos.

Resulta altamente recomendable estructurar el sitio de manera ordenada.

17 Este documento nos servirá para realizar algunas prácticas del próximo apartado del curso, relacionadas con la edición de texto. Escriba la palabra texto como nombre del nuevo documento y pulse la tecla Retorno.

18 Desde el panel Archivos es posible efectuar múltiples funciones, como abrir los documentos para su edición. Para comprobarlo, haga doble clic en el icono del documento texto.html. (15)

19 La página en blanco se abre en el área de trabajo del programa, lista para ser editada. (16) Iremos conociendo ésta y otras funciones del panel Archivos en el transcurso de las siguientes lecciones. Para finalizar este ejemplo práctico, pulse el botón de aspa del documento abierto para cerrarlo sin realizar en él ningún cambio.

Lección 11. Aplicar un color de fondo a una página

Entre los muchos aspectos configurables mediante etiquetas HTML se encuentran el color de fondo, el título y la codificación de las páginas. Estas propiedades son incluidas en la cabecera de la página automáticamente por Dreamweaver durante la generación de los documentos. Posteriormente pueden ser modificados en el cuadro de diálogo Propiedades de la página, que presenta sus opciones diferenciadas en categorías. El campo Fondo de la categoría Apariencia (HTML) da acceso a una paleta emergente, en la que es posible seleccionar una de las muestras para aplicar la tonalidad seleccionada al fondo de la página. La categoría Título/Codificación, por su parte, permite cambiar el título preestablecido durante la generación del programa, sustituyéndolo en el cuadro de texto propuesto a tal efecto. El título de una página HTML ayuda a los visitantes del sitio a realizar un seguimiento mientras navegan, al tiempo que identifica la página en listas de historial y de marcadores. Por último, las opciones del desplegable Codificación permiten la correcta visualización de páginas cuyos textos estén escritos en idiomas que presenten caracteres especiales.

RECUERDE

Tanto desde el cuadro de diálogo Propiedades de la página como desde el panel Propiedades es posible crear nuevas reglas CSS obteniendo, como asistencia, sencillas explicaciones acerca del lugar que corresponde a las propiedades en la cascada de estilos y sin necesidad de escribir código.

1 En esta lección aprenderemos a definir las propiedades de una página Web; en concreto, aplicaremos un color de fondo y asignaremos un título a nuestra página principal. Para empezar, muestre el panel Archivos y, en él, haga doble clic sobre la página index.htm para abrirla en el área de trabajo del programa. (1)

2 Una vez hemos abierto la página que deseamos modificar, vamos a acceder al cuadro de diálogo Propiedades de la página desde el cual es posible especificar las propiedades de diseño y formato. Para ello, despliegue el menú Modificar y seleccione el comando Propiedades de la página. (2)

Además de utilizar el doble clic para abrir un archivo, también puede pulsar sobre el comando Abrir del menú contextual del elemento en cuestión.

También puede acceder al cuadro de diálogo Propiedades de la página mediante el botón del mismo nombre del panel Propiedades o bien utilizando la combinación de teclas Ctrl + J.

3 El cuadro de diálogo Propiedades de la página se muestra ordenado por categorías, siendo la llamada Apariencia (CSS) la activa por defecto. De forma predeterminada, Dreamweaver utiliza estilos CSS en lugar de etiquetas HTML para definir las propiedades de las páginas. Esto hace que el cuadro de diálogo Propiedades de la página presente opciones complementarias, ya que el uso de estilos ofrece mayores posibilidades de control de propiedades que la simple introducción de código HTML. Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la categoría Apariencia (HTML) del panel de la izquierda.

4 Desde la categoría Apariencia (HTML) es posible asignar una imagen de fondo, así como un color tanto para el fondo como para el texto y los enlaces de la página. Además, también es posible especificar los márgenes izquierdo y superior de la página y la anchura y la altura del margen. En este caso, pulse sobre la punta de flecha de la muestra de color del campo Fondo y seleccione con un clic la última muestra de la octava columna de la paleta emergente. (3)

5 Si utiliza para su página web una apariencia basada en estilos CSS, puede definir la fuente predeterminada, el tamaño de la fuente y los colores de los vínculos, los vínculos visitados y los vínculos activos basados en estos estilos. Para ello, pulse sobre la categoría Vínculos (CSS) para consultar su contenido. (4)

Al seleccionar un color de la paleta emergente, se refleja en el campo Fondo, junto a la muestra, el código correspondiente.

6 Desde el cuadro de propiedades también puede definir el formato que deben presentar los encabezados de la página. En este caso, acceda a la categoría Encabezados (CSS) pulsando sobre su nombre.

7 Pero en este ejemplo práctico, nos interesa modificar únicamente aspectos definibles mediante etiquetas HTML. Haga clic en la categoría Título/Codificación para acceder al contenido de esta categoría. (5)

8 En esta categoría puede consultar en todo momento la ubicación de la carpeta en la que se encuentra el documento que se está modificando (carpeta de documentos) y la ubicación de la carpeta del sitio. El título de una página queda definido mediante una etiqueta HTML de la cabecera. Pero, como sabemos, no es necesario cambiar directamente la etiqueta desde la vista Código para variar el título que el programa preestablece para la página, Documento sin título; en una lección anterior conocimos el modo de introducir el título de una página en el campo correspondiente del panel de propiedades y también en la barra de herramientas Documento. Indicaremos en este caso que la página index.html es la principal del sitio. En el campo Título escriba la palabra principal y pulse el botón Aceptar. (6)

9 Los cambios se reflejan en la página index.htm, en concreto en el color de fondo y en el título de la página. (7) Muestre de nuevo el panel Archivos y haga doble clic ahora sobre la página texto.html para abrirla. (8)

La categoría Imagen de rastreo permite insertar un archivo de imagen para utilizarlo como guía al diseñar la página. En una lección posterior nos ocuparemos con detalle de la inserción de imágenes de rastreo en una página web.

10 Como las propiedades asignadas sólo se aplican a la página activa, el fondo del documento texto.html sigue presentando el color blanco predeterminado. Para armonizar el fondo de esta página con el de la página principal, accederemos de nuevo al cuadro de propiedades. Para ello, haga clic en el botón Propiedades de la página del panel Propiedades.

11 En el cuadro de diálogo Propiedades de la página, haga clic en la categoría Apariencia (HTML), despliegue el campo Fondo y seleccione el mismo tono azul que en la ocasión anterior.

12 Haga clic en la categoría Título/Codificación para acceder a su contenido.

13 En el campo Título, escriba la palabra secundaria y pulse el botón Aceptar para confirmar los cambios realizados. (9)

14 El título y el color de fondo se aplican correctamente. En la próxima lección veremos el modo de utilizar una imagen como fondo de la página. Para finalizar la presente, guardaremos simultáneamente los cambios realizados en los documentos index.htm y texto.htm. En la barra de herramientas Estándar, pulse sobre el comando Guardar todo, que muestra, como ya sabe, la imagen de dos disquetes. (10)

Recuerde que si no dispone de esta barra visible en el área de trabajo, puede utilizar el comando Guardar todo del menú Archivo.