Configuracin de un sitio local

Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta , con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en Internet. La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html , ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Por ejemplo, si escribiramos la direccin genrica http://www.miweb.com en el navegador, ste intentara cargar la pgina http://www.miweb.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm.

Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn un sitio local ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios.

A travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio.

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir las caractersticas del sitio.

Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categora Datos locales. Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina principal del sitio, de la que colgarn el resto de documentos HTML dentro del sitio, si en la carpeta raz del sitio existe una pgina con el nombre index.htm, Dreamweaver la coger por defecto. Estas tres caractersticas son las imprescindibles para definir un sitio local. Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estar el sitio remoto. Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa Bsicas, en vez de la pestaa Avanzadas y seguir las indicaciones.

Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios, seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo. Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable de la pestaa Archivos.

Prctica1 Vistas del sitio

Es posible visualizar un sitio en el panel Archivos o en una ventana. El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando la tecla F8. Para cambiar de una vista a otra hay que pulsar sobre el botn superior del panel y de la ventana. que aparece en la parte

Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio. En esta imagen se visualizan el mapa del sitio y el sitio local. En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que ste ha sido definido como pgina principal del sitio y contiene vnculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc. En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a travs del sitio, es posible actualizar automticamente las pginas para que si hacen referencia a un objeto que ha cambiado, despus no se produzcan problemas al visualizarlas. Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Simplemente hay que pulsar sobre el botn: Actualizar

Subir Archivos al servidor

Cuando queramos visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberemos subir los archivos al sitio que hayamos contratado o conseguido gratuitamente. Algunos sitios gratuitos slo permiten subir archivos va web, por lo que habr que irlos subiendo uno a uno cada archivo y creando las carpetas a la vez. Este proceso puede hacerse muy largo y hay que tener mucho cuidado en mantener la estructura tal y como se encuentra en la carpeta del disco duro. Si no los enlaces no funcionarn correctamente y es posible que algunas imgenes no se muestren. Para subir los archivos va web habr que seguir las instrucciones que proporcionar el servidor. La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior. Va FTP se puede ver el contenido de un sitio como una carpeta ms (igual que en el Explorador de Windows) y, obviamente, es mucho ms til para subir los archivos. Entre los programas gratuitos (si no es con fines comerciales) ms utilizados estn: FILEZILLA: http://filezilla-project.org/ SMARTFTP: http://www.smartftp.com/
5

Filezzilla
Una vez instalado, antes de empezar a subir archivos debemos introducir una serie de datos para dejar la cuenta preconfigurada. Arrancamos el programa y hacemos click en Archivo, Gestor de sitios:

Aparecer esta ventana:

En ella seleccionamos el botn que pone Nuevo Sitio y le ponemos el nombre que queramos para identificar nuestra cuenta:

Seguidamente indicamos el nombre del servidor o host, por ejemplo: www.uhu.es y el nmero puerto, si lo conocemos.

En Tipo de servidor dejamos la opcin predefinida que es FTP -File Transfer Protocol- y en Modo de acceso seleccionamos la pestaa Preguntar la contrasea; (tambin podemos seleccionar la pestaa Normal). Le indicamos nuestro usuario (es muy importante que se introduzca correctamente, respetando maysculas si las hubiere):

Una vez que escribimos el nombre de usuario correctamente pulsamos en Aceptar para guardar los cambios:

Ya tenemos nuestro sitio Web configurado.

Ahora vamos a conectar nuestro equipo con el sitio Web. Para ello volvemos a pulsar Archivo, Gestor de sitios. En la pantalla que aparece seleccionamos la cuenta que hemos creado y pulsamos el botn conectar.

Si aparece una ventana que pide la contrasea; la escribimos sin olvidar respetar las maysculas si las hubiera:

Si hemos introducido los datos correctamente aparece algo similar a esto:

Y podremos ver el contenido de nuestro ordenador (a la izquierda) as como la carpeta del servidor web en la que se encuentra ubicado nuestro sitio (a la derecha):

Una vez que hemos logrado establecer la conexin slo nos queda subir los archivos desde nuestro ordenador al servidor Web: Seleccionamos la carpeta local donde se encuentra nuestro sitio

Seleccionamos los archivos y carpetas que queremos enviar al servidor, hacemos click con el botn derecho y elegimos subir. Otra posibilidad es, una vez seleccionados, arrastrarlos con el ratn a la parte derecha de la pantalla sitio remoto

Finalmente comprobaremos que en el servidor estn los archivos que hemos subido con lo que habremos completado la operacin:

10

Smartftp

Una vez instalado, abrimos el programa y hacemos clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP.

Aqu debemos introducir los datos que nos facilit el servidor donde vamos a alojar las pginas: Host, Usuario y Contrasea.

Rellenamos los campos y haz clic en OK. Se conectar automticamente y podremos ver una carpeta donde podremos copiar los archivos que hemos creado. Para ello, hacemos clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos del disco duro. Buscamos la carpeta que definimos como Sitio local y copiamos todos los archivos que queramos subir seleccionndolos a la vez y arrastrndolos a la carpeta (remota) del servidor.

El programa empieza a copiar la informacin de nuestro disco al servidor.. Cuando haya finalizado, slo tendremos que introducir la direccin de Internet en la barra de direcciones del navegador (Firefox, Internet Explorer...) y se ver el sitio en Internet!

11

Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina. Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinacin de teclas Ctrl+J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras. En la categora Aspecto, encontramos las propiedades: Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo. Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido ninguna imagen de fondo. Tamao: permite definir el tamao de la letra.
12

Color del texto: es el color de la fuente. Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de mrgen solo funcionan para Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarn en los navegadores.

En la categora Ttulo/Codificacin encontramos la propiedad: Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver.

En la categora Vnculos encontramos las propiedades:

Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas. Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no. Vnculos activos: es el color de los vnculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. En la categora Imagen de rastreo encontramos las propiedades: Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo. Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador.

13

Los colores
Los colores pueden asignarse a travs de los botones:

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la pgina, que tienes ms arriba. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco. Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #3399FF, el botn quedara del siguiente modo: .

Prctica2

14

Prctica1
Practica las operaciones que hay que realizar para crear un sitio web sin conexin a Internet. 1. Haz clic sobre el men Sitio. 2. Elige la opcin Administrar sitios. Se abrir una nueva ventana. 3. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana. 4. Selecciona la pestaa Avanzadas de la nueva ventana. 5. Selecciona Datos locales en Categora. 6. En Nombre del sitio escribe Cocina. 7. En Carpeta raz local busca la carpeta cocina, que se encuentra dentro de la carpeta ejerciciosdream, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 8. En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro de la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 9. Haz clic sobre el botn Aceptar y sobre el botn Listo.

VOLVER

Prctica2
Practica las operaciones que hay que realizar para crear un nuevo documento html y configurar las propiedades de la pgina. 1. Abre el men Archivo y elige la opcin Nuevo, o bien haz clic sobre el botn barra de herramientas. 2. Selecciona la pestaa General de la nueva ventana. 3. Selecciona Pgina bsica en Categora. 4. Selecciona HTML en Pgina bsica: 5. Haz clic sobre el botn Crear. 6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseo. Haz clic sobre el botn Mostrar vista de diseo . de la

15

7. Haz clic con el botn derecho del ratn sobre el documento en blanco, para abrir su men contextual. 8. Elige la opcin Propiedades de la pgina en el men contextual. 9. En Ttulo escribe Cocina. 10. En Fondo: escribe #CCCC99. 11. En Vnculos: escribe #CC6600. 12. En Vnculos visitados: escribe #CC9933. 13. En Vnculos activos: escribe #CC9966. 14. Haz clic sobre el botn Aceptar. 15. Haz clic sobre el botn Guardar de la barra de herramientas. Guarda el documento con el nombre menu.htm, dentro de la carpeta cocina del ejercicio anterior.

16