Forinsur S.L.

Centro de Formacin | Manual de Usuario

Administracin de un sitio
Sitio de Dreamweaver Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. 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. 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....

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

Tcnico Especialista en Diseo, Animacin y Programacin Web

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.

Definiendo el sitio remoto Definir un sitio remoto significa establecer una configuracin de modo que Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por eso se llama remoto) y as poder trabajar a la vez con tus

Forinsur S.L. Centro de Formacin | Manual de Usuario

archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en Internet. El modo en el que veremos que el programa se comunica con tu servidor ser FTP, ya que es prcticamente el ms utilizado y muy pocos utilizan otras alternativas. Utilizando FTP de Dreamweaver Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que Dreamweaver se pueda conectar con nuestro servidor. Para ello deberemos modificar que creamos anteriormente. As que haz clic en Sitio y selecciona Administrar sitios. Selecciona el sitio con el que quieras establecer comunicacin remota (o crea uno nuevo para el caso) y pulsa Editar. Vers que se abre el cuadro de dilogo de Definicin del Sitio. Ahora podremos escoger entre trabajar en modo bsico o avanzado. Vamos a seleccionar la pestaa Avanzado para poder ver con ms detenimiento las opciones que se nos ofrecen. Una vez ests en el nuevo modo, selecciona la Categora Datos remotos en el listado de la izquierda. Ahora en el desplegable Acceso selecciona el mtodo de acceso que deber utilizar Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos la opcin FTP. Se mostrarn las siguientes opciones:

Tcnico Especialista en Diseo, Animacin y Programacin Web

Aqu debers rellenar los datos que te facilit el servicio de hosting que contrataste. Si no recuerdas los datos o has perdido el correo electrnico que seguramente te enviaron, pdeles de nuevo la informacin. Los datos que necesitrs son los siguientes: Servidor FTP o host es la direccin a la que se dirigir Dreamweaver para conectarse a tu servidor ser del tipo ftp.servidor.com o tambin podrs encontrar algunas que estn formadas en forma de direccin IP (como por ejemplo, 192.186.1.1) En el campo Directorio del Servidor podremos establecer una carpeta contenida en el servidor donde queramos subir las pginas. Imagina que dentro de la estructura de carpetas del servidor remoto tienes una que se llama pgina y dentro de esta otra que se llame principal. Podramos indicar la ruta pgina/principal para que los archivos se subiesen directamente a esa ubicacin.

Forinsur S.L. Centro de Formacin | Manual de Usuario

En Usuario y Contrasea escribe el nombre de usuario y el password para poder conectar con el servidor. Marca la casilla Guardar si quieres que el programa recuerde la contrasea. Una vez introducidos estos datos puedes pulsar el botn Probar para ver si son correctos y Dreamweaver puede crear una conexin con el servidor remoto. Finalmente comentaremos la opcin Permitir desproteger y proteger archivo. Esta casilla es til cuando ms de una persona est utilizando el mismo servidor y las mismas pginas. De esta forma (como veremos ms adelante) podrs bloquear diversos archivos para evitar que se vean modificados por otra persona (que tambin tenga acceso al servidor) mientras t trabajas con ellos. Si seleccionas la opcin Cargar archivos en el servidor

automticamente al guardar forzars a que Deamweaver suba los archivos cada vez que los guardes. Una opcin bastante til para no olvidar subir pequeos retoques que se vayan haciendo en el tiempo. Aunque es una opcin un poco peligrosa porque si modificas la versin en local y te equivocas no podrs recuperar la versin anterior que estaba almacenada en el remoto porque se habr sobreescrito. Esta opcin tampoco es recomendable si no tienes conexin permanente y rpida a Internet. Una vez hayas terminado Acepta todas las pantallas hasta volver a la vista de trabajo y estaremos listos. Sincronizando el sitio remoto y local Esta es una de las opciones ms tiles en cuanto a Sitios Remotos. Esta opcin permite hacer un estudio de los archivos situados en el sitio local y remoto y establecer el modo en el que se debern copiar, borrar y sobreescribir los archivos para conseguir un objetivo: al final de la sincronizacin, los archivos en el sitio remoto y el sitio local deben ser iguales. Para realizar una sincronizacin haz clic derecho sobre cualquier zona en el panel Archivos y selecciona la opcin Sincronizar.... Vers que aparece un cuadro de dilogo como este:

Tcnico Especialista en Diseo, Animacin y Programacin Web

Este es el paso ms importante en la sincronizacin, pues decidiremos de qu modo se va a realizar. En el desplegable Sincronizar: seleccionaremos una de las dos opciones, Archivos locales seleccionados solamente o Todo el sitio. Dependiendo de qu opcin elijas se copiarn slo unos archivos o todos los que forman el sitio. En el desplegable Direccin: estableceremos las pautas que se deben seguir durante la sincronizacin. Si seleccionas Colocar archivos ms nuevos en remoto cuando se comparen ambos sitios, se sobreescribirn aquellos en el sitio remoto que tengan una fecha de modificacin menor a la que exista en el local. De esta forma copiars en direccin Local a Remoto. Si seleccionas la opcin Obtener archivos ms nuevos de remoto se copiarn aquellos archivos que se encuentren en el sitio remoto que tengan una fecha de modificacin mayor que la del local. En este caso estaremos copiando en direccin Remoto a Local. La ltima opcin, Obtener y colocar archivos ms nuevos, se refiere a la sincronizacin como tal. Evala los archivos en el sitio remoto y local y copia los ms nuevos en el que contiene los ms viejos. En este caso la Sincronizacin es Bidireccional. Marca la opcin Eliminar archivos remotos no existentes en la unidad local si quieres que los archivos que se encuentren en el remoto que no estn en el local se borren. Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, slo nos quedar aceptarlo.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Debido a que no todos los servidores tienen acceso FTP y que no tienes porqu tener acceso a un servidor remoto no realizaremos ningn ejercicio sobre este tema. Si quieres establecer una conexin con tu servidor remoto slo tendrs que seguir los pasos explicados en la teora. Comprobando enlaces Es interesante comprobar los enlaces. Pulsamos Archivo en la barra superior. Y seleccionamos Comprobar pgina -> Comprobar vnculos.

Es importante comprobar realmente el resultado al visitar la pgina con un navegador. El resultado final que se visualiza depende del navegador y puede diferir del diseo mostrado por Dreamweaver durante la elaboracin.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Para compraba la vista en el Navegador, pulsamos sobre Archivo en la barra superior, seleccionamos Vista previa en el Navegador y elegimos el navegador (de entre los que tenemos instalados en nuestro ordenador) o clic en la bola del mundo del panel Documento.

Actualizando enlaces Si alguna vez cambiamos de sitio algn documento o imagen, etc. Dreamweaver nos preguntar si queremos actualizarlo. Esto significa que si un documento html muestra una imagen y cambiamos esa imagen de ubicacin, por ejemplo si la guardamos en una nueva carpeta o en una ya existente, el documento html no encontrara esa imagen. Para no tener estos problemas Dreamweaver detecta que documento(s) tiene una referencia a esa imagen (ocurre igual si son vnculos) y te muestra una ventana de dialogo pregutando si queremos actualizar los vnculos. De esta forma Dreamweaver cambia el codigo html para que el docuemnto pueda encontrar esa imagen. En este caso hemos cambiado de ubicacin un documento html nlazado previamente en el index.html.

Forinsur S.L. Centro de Formacin | Manual de Usuario

Buscar y reemplazar Para emplear esta herramienta simplemente nos dirigiremos al men principal del programa y seleccionaremos Edicin, seguidamente elegiremos la opcin Buscar y Reemplazar (Ctrl+F). Rellenamos los campos del cuadro de dialogo tal cual como se indica a continuacin. Buscar en: Sitio local actual Completo Buscar: Etiqueta especifica a Con atributo: name = [cualquier valor] Con atributo: id = [cualquier valor] Accin: Quitar atributo name

Con esta herramienta hemos modificado todos los enlaces que posean el atributo 'name' en menos de 2 minutos, todo el proceso fue automatizado. Chequeando compatibilidad con navegadores

Tcnico Especialista en Diseo, Animacin y Programacin Web

Ahora, si lo que deseas es comprobar cmo se comportar tu pgina en distintos navegadores, puedes abrir el documento en Dreamweaver y pulsar en el botn "Comprobar soporte de navegador" junto a la barra de ttulo para chequear.

Luego, accede al resumen en el mismo botn bajo la opcin "mostrar todos los errores". Vers como el panel inferior nuevamente aparece para mostrar los problemas, identificndolos segn su nivel de gravedad y el navegador al cual afecta.