009Administrar sitios locales

IMPORTANTE

Tras la creación de un sitio local, el panel Archivos muestra en su parte central el contenido de la carpeta definida como raíz del sitio.

PARA FACILITAR SU GESTIÓN POSTERIOR, Dreamweaver permite estructurar un sitio antes de empezar a editar sus documentos. El panel Archivos 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 htm. El panel Archivos permite su generación, así como el del resto de documentos que el programa permite editar. Además, posibilita la creación de subcarpetas dentro de la carpeta raíz del sitio.

1.Para empezar, pulse el botón de flecha de la palabra elemental, incluida en el desplegable Mostrar del panel Archivos.

El panel Archivos permite organizar y administrar los documentos y carpetas, tanto si forman parte de un sitio de Dreamweaver como si se encuentran en una unidad local.

2.El desplegable Mostrar posibilita el acceso a todos los sitios configurados, al Escritorio, y a las unidades de almacenamiento del equipo. Seleccione la opción Escritorio y pulse en el signo + que precede a la carpeta Elementos de escritorio.

3.En el Escritorio colocamos la carpeta raíz, elemental, de nuestro sitio web local. Pulse el vínculo Administrar sitios y, en el cuadro del mismo nombre, seleccione el sitio elemental y haga clic en el botón Editar.

Los iconos de las carpetas y archivos pertenecientes a un sitio son verdes.

En el cuadro Administrar sitios se listan todos los sitios creados hasta el momento.

4.En el cuadro de diálogo Definición del sitio para elemental despliegue el panel configuración avanzada y seleccione Información local.

5.Los datos locales configurados en el asistente se muestran completados. Pulse el icono situado a la derecha del campo Carpeta predeterminada de imágenes.

6.Haga clic en el botón Escritorio del panel de accesos directos, abra la carpeta elemental con un doble clic sobre su icono y pulse el botón Nueva carpeta.

Es habitual reservar una carpeta del sitio para contener los archivos de imagen utilizados en las páginas y situarla un nivel por debajo de la carpeta raíz.

7.Escriba la palabra imágenes y pulse dos veces la tecla Retorno.

8.Una vez creada la carpeta que contendrá las imágenes del sitio elemental, pulse el botón Seleccionar. Después, pulse el botón Guardar y en el cuadro Administrar sitios, el botón Listo.

9.El panel Archivos se actualiza, pasando a mostrar el contenido del sitio elemental, una vez modificado. Haga clic en el icono de opciones del panel Archivos, abra el submenú Archivo y elija la opción Nuevo archivo.

Desde el panel Archivos puede crear nuevos archivos y nuevas carpetas.

10.Aparece un nuevo documento que usaremos como página inicial del sitio, la primera que se cargará en el navegador. Escriba la expresión index.htm y pulse Retorno.

Generalmente se usa el nombre index para identificar la página inicial del sitio.

11.Pulse con el botón derecho del ratón sobre el icono de la carpeta raíz del sitio elemental y elija la opción Nueva carpeta.

12.Cree una carpeta para los documentos dependientes de la página principal: escriba la palabra documentos y pulse Retorno.

13.De momento, incluiremos una página en blanco en esta nueva carpeta. Haga clic con el botón derecho del ratón en el icono de la carpeta documentos y seleccione la opción Nuevo archivo.

14.Escriba la expresión texto.htm como nombre del nuevo documento y pulse la tecla Retorno.

15.Ábralo con un doble clic y, para finalizar el ejercicio, abra el menú Archivo y seleccione el comando Cerrar todos.

010Aplicar un color y una imagen de fondo

IMPORTANTE

En Dreamweaver CS5 el panel Propiedades permite 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.

ENTRE LOS ASPECTOS CONFIGURABLES mediante etiquetas se encuentran el color de fondo, el título y la codificación de las páginas. También es posible aplicar una imagen de fondo a una página. Al insertar una imagen en un documento, el programa genera automáticamente una referencia al archivo en el código HTML.

1.En el panel Archivos, haga doble clic en el icono de la página index.htm.

2.Haga clic en el botón Propiedades de la página del Inspector de propiedades.

3.Como aún no hemos trabajado con los estilos CSS, modificaremos la apariencia de la página HTML. Haga clic en la opción Apariencia HTML del panel de la izquierda.

Recuerde que puede acceder al cuadro Propiedades de la página usando el botón del mismo nombre del Inspector de propiedades, esa opción del menú Modificar o la combinación de teclas Ctrl.+J.

4.El color de fondo de la página es una de las propiedades definidas mediante etiquetas HTML. Pulse en la punta de flecha del cuadro de color de la opción Fondo y elija la penúltima muestra de la última columna de la paleta, por ejemplo.

Pulse la rueda de color de a paleta para acceder al cuadro Color y poder agregar así muestras a los colores personalizados.

5.Haga clic en la opción Título/Codificación para acceder al contenido de esta categoría. En el campo Título escriba la palabra principal y pulse Aceptar.

6.Repita la misma operación con la página texto, aplíquele el mismo color de fondo y nómbrela secundaria.

7.Ahora aplicaremos una imagen de fondo a la página. En primer lugar haremos una copia de la página texto. En el panel Archivo haga clic con el botón derecho sobre la página texto, seleccione el comando Edición y pulse la opción Duplicar.

8.Renombre la nueva copia con el texto foto.htm y ábrala.

9.Haga clic en el botón Propiedades de la página del Inspector de propiedades y pulse en la categoría Apariencia HTML.

10.Pulse el botón Examinar, situado a la derecha del campo Imagen de fondo.

11.En el cuadro Seleccionar origen de imagen pulse el botón Subir un nivel, que muestra una carpeta y una flecha verde y cree una nueva carpeta en el escritorio.

12.Descargue desde nuestra web los archivos necesarios y guárdelos en esta carpeta, que puede denominar Dreamweaver CS5

13.Desde el cuadro Seleccionar origen de imagen abra dicha carpeta, seleccione el archivo casa.jpg y pulse Aceptar.

14.Pulse el botón Aceptar del cuadro Propiedades de la página.

15.La imagen se ha aplicado como fondo de pantalla. Por último abra el menú Archivo, seleccione el comando Restituir y, en el cuadro de confirmación que advierte que se perderán los cambios realizados, pulse el botón Sí para recuperar el aspecto inicial del documento.

IMPORTANTE

Deben evitarse los documentos de imagen de gran tamaño, ya que aumentan el tiempo de descarga de la página y es recomendable seleccionar fondos de imagen de tamaño reducido que permitan visualizar correctamente los contenidos de la página.