Conceptos bsicos de Dreamweaver CS3 (I) Qu es Dreamweaver CS3 Dreamweaver CS3 es un software fcil de usar que permite crear

pginas web profesionales. Las funciones de edicin visual de Dreamweaver CS3 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la versin de pago de este estupendo programa. Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relacin con Adobe. Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.

Novedades de Dreamweaver CS3 En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior. Mejoras en Spry. El "Framework" o estructura Spry ha recibido un fuerte impulso en esta versin de Dreamweaver. Spry es un conjunto de archivos JavaScript que permiten la inclusin de elementos dinmicos en las pginas HTML. Por ejemplo se pueden incluir acordeones, barras de menus, validacin de formularios, acceso a datos XML, etc. Tambin se han incluido efectos spry que se aplican a elementos ya existentes en la pgina HTML para hacer que se desvanezcan, reduzcan su tamao, se resalten, etc. Mayor integracin con Photoshop y Fireworks. Ahora es posible pegar directamente imgenes desde Photoshop en una pgina HTML de Dreamweaver. Luego con un doble clic podremos ir a editar la imagen en Photoshop. Se pueden importar imgenes con capas. Mejoras en la comprobacin de la compatiblidad con diferentes navegadores. Dreamweaver CS3 puede generar informes con los problemas de visualizacin de

elementos CSS en los navegadores ms utilizados. Adobe CSS Advisor es un sitio web accesible desde Dreamweaver que contiene informacin til para resolver los problemas de compatibilidad entre navegadores. Mejoras en CSS. La administracin de CSS es ms fcil, ahora se pueden trasladar elementos CSS entre diferentes hojas de estilo. Tambin ha aumentado la cantidad de plantillas CSS disponibles para aplicar a nuestras pginas web. Adobe Device Central, incluido en la Adobe Creative Suite, facilita la publicacin en dispositivos mviles, PDAs, etc..
Bsqueda

Unidad 2. El entorno de trabajo (I)

Vamos a ver cules son los elementos bsicos de Dreamweaver CS3 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear pginas web.

La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento, como veremos ms adelante.

Unidad 3. Configuracin de un sitio local (I)

Bsqueda

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los documentos, como puede ser el color de fondo.

Introduccin

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.aulaclic.com en el navegador, ste intentara cargar la pgina http://www.aulaclic.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.... 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. 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.

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. Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local. Ejercicio paso a paso. Unidad 3.Crear un sitio web local

Bsqueda

Objetivo. Practicar las operaciones que hay que realizar para crear un sitio web sin conexin a Internet. En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios estn diseados para ir construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.

1 Si es la primera vez que realizas este ejercicio, copia en la carpeta Mis documentos de tu disco duro, la carpeta ejerciciosdream, que se encuentra dentro de la carpeta ejercicios del curso. Si ests siguiendo el curso gratis desde Internet debes hacerte Usuario Registrado para descargarte los archivos para este curso. 2 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 3 Haz clic sobre el men Sitio. 4 Elige la opcin Administrar sitios. Se abrir una nueva ventana. 5. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana. 5 Selecciona la pestaa Avanzadas de la nueva ventana. 6 Selecciona Datos locales en Categora. 7 En Nombre del sitio escribe Cocina. 8 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. 9 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. 10 Haz clic sobre el botn Aceptar y sobre el botn Listo. A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la que aparece si pulsas aqu.
Bsqueda

Sitios Remotos (I) En el tema 3 vimos cmo crear y trabajar con un sitio local.

Esta unidad est dedicada a los Sitios Remotos, veremos cmo crearlos y cmo utilizarlos. 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 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.

Configurar un Sitio Remoto 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 la especificacin que creamos en su da del sitio con el que estamos trabajando. 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:

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 romoto tienes una que se llama pagina y dentro de esta otra que se llame principal. Podramos indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa ubicacin. 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. http://www.aulaclic.es