DREAMWEAVER 8

Dreamweaver 8 es un software permite crear pginas web profesionales sin la necesidad de programar manualmente el cdigo HTML con el que se construyen dichas pginas. 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 (protocolo de transferencia de ficheros) completo, permitiendo entre trabajar con el sitio web como si se tratara de una unidad de disco, actualizndolo en el servidor sin salir del programa.

Editar pginas web

Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina. Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromeda Dreamweaver Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos. Aunque en este curso vamos a trabajar con la versin Dreamweaver 8, que es muy sencilla para comenzar con los editores, existen dos versiones ms avanzadas de este programa, Dreamweaver CS3 y ms recientemente Dreamweraver CS4.

Publicar una Web

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a
1

vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada. En cualquier caso, una vez disponemos del espacio en Internet, darle contenido es muy sencillo. Dreamweaver permite crear una copia local (en el ordenador) del sitio web que luego pondremos a disposicin de todo el mundo en Internet. Una vez diseado en modo local el sitio web slo habr que subir al servidor manteniendo la estructura del local. Es decir, subir todos los archivos tal y como aparecen en el disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si se haces as, el sitio experimentar fallos y enlaces que no funcionarn. Es mejor no utilizar caracteres especiales como acentos o ees, ni espacios en blanco. De esta forma nos aseguramos de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojamos en l. Para evitar errores de enlaces rotos o imgenes que no se muestran es mejor escribir, tambin, los nombres en minscula. Algunos servidores distinguen entre maysculas y minsculas, por lo que si en la pgina queremos mostrar la imagen foto1.jpg habr que guardarla con ese nombre y no como Foto1.jpg. Evitaremos as horas perdidas buscando fallos.

Arrancar Dreamweaver8
Hay dos formas de arrancar Dreamweaver 8. Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en el ordenador, buscar Macromedia (o Adobe), seguidamente Dreamweaver 8, hacer clic sobre l, y se arrancar el programa. Desde el icono de Dreamweaver 8 del escritorio

Para cerrar Dreamweaver, podemos utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn cerrar Pulsar la combinacin de teclas ALT+F4. Hacer clic sobre el men Archivo y elegir la opcin Salir. Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se pedir confirmacin para guardar o no cada uno de ellos.

Introduccin al espacio de trabajo

Abrir y guardar documentos

Para abrir un documento nuevo, podemos utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo. Hacer doble clic sobre el archivo en la ventana del sitio. Despus de esto aparecer una nueva ventana, en la que elegiremos la categora Pgina bsica, HTML.

Para abrir un documento existente, podemos utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O. Hacer clic sobre el men Archivo y elegir la opcin Abrir. Hacer doble clic sobre el archivo en la ventana del sitio.

Para guardar un documento, usamos cualquiera de las siguientes operaciones. Hacer clic en el botn guardar de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+S. Hacer clic sobre el men Archivo y elegir la opcin Guardar Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios documentos, podamos guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo tenemos dos opciones: Hacer clic en el botn guardar todo de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo. Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en cada uno de ellos. Hay que tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es
4

conveniente que al principio no utilicemos esta opcin, al menos hasta que nos hayamos habituado a manejar el programa.

Nuestra primera pgina web

Para hacernos una idea de cmo funciona Dreamweaver, vamos a crear una pgina web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo nos llevar unos pocos minutos, y aprenderemos a trabajar con los elementos bsicos con los que estn hechas la mayora de las pginas web. Seguimos los siguientes pasos: 1.- Abrir Dreamweaver. Pgina bsica, HTML. Creamos un documento nuevo y seleccionamos la Categora

2.- Seguidamente introducimos, en el documento en blanco, el texto que aparece en la imagen siguiente .

3.- Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del documento. Para ello hacemos clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Tambin podemos hacerlo a travs del Inspector de propiedades en Propiedades de pgina

Entonces se abrir una ventana como la que aparece ms abajo

Ahora cambiamos el Ttulo por Mi primera pgina. En Color de Fondo escribimos #CCCCFF, de este modo el fondo del documento pasar a ser de color azul. O hacemos click en el cuadro situado junto a la paleta de colores para elegir otro color. Finalmente pulsamos sobre el botn Aceptar. 4.- Ahora vamos a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro. Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que utilicemos) que permite grabar dicha imagen en un fichero de nuestro disco duro. Una vez que elegimos la imagen vamos a insertarla debajo de la segunda lnea de texto. En primer lugar debemos situar el cursor al final de la segunda lnea y pulsar (Enter) para crear una nueva lnea. Despus vamos a Men Insertar y a la opcin Imagen En la nueva ventana que aparece, deberemos buscar la imagen en la carpeta en la que est guardada, y despus seleccionarla.

Una vez insertada ajustamos el tamao de la imagen. Quedar algo similar a esto:

5.- Ahora vamos a cambiar el formato del texto. Para ello necesitamos visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto. Si no aparece, podemos mostrarlo a travs del men Ventana, con la opcin Propiedades.

Si lo que lo que ocurre es que nicamente aparece el ttulo del panel, es porque est contrado. Para que aparezca desplegado se debe pulsar sobre el botn , que aparece junto al nombre. Seleccionamos la primera lnea de texto y cambiamos el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.

Despus de esto, la apariencia de la primera lnea habr cambiado. Seleccionamos la imagen y las dos ltimas lneas de texto. Pulsamos sobre el botn para centrarlos

Una vez hayamos centrado la imagen y las otras dos lneas siguientes, seleccionamos la segunda lnea de texto, que an no ha sido modificada.

Cambiamos el Formato por Encabezado 3, pulsamos una vez sobre el botn pulsa tres veces sobre el botn sangra de texto

cursiva y

6.- Seleccionamos de nuevo la ltima lnea, y en Vnculo introducimos http://www.elpais.es, para crear un enlace a esa otra pgina:

Despus de todos estos pasos, podemos ver cmo ha quedado el documento pulsando la tecla F12. Algo similar a esto:

7.- Por ltimo guardamos el documento a travs del men Archivo, desde la opcin Guardar. (recordemos: sin tildes, , espacios ni smbolos extraos) Podemos llamar al documento como lo deseemos, pero siempre teniendo en cuenta que la extensin ha de ser htm o html. Por ejemplo, podemos llamarlo prueba1.htm.

El entorno de trabajo
Vamos a ver, con ms profundidad, cules son los elementos bsicos de Dreamweaver 8, 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 puede no coincidir exactamente con la que se ve en el ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento.

Las barras
La barra de ttulo

La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar
9

La barra de mens

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles

La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir , Guardar , etc

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.

La barra de estado

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). Tambin es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. En cualquier momento podemos seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).

Los paneles e inspectores

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes

10

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-derecha. Es una de las herramientas de Dreamweaver que ms se utiliza.

La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al men Insertar. Los elementos estn clasificados segn su categora: tablas, texto, objetos de formulario, etc

Vistas de un documento

Se puede cambiar la vista del documento a travs de la barra de herramientas de documento

11

La vista Diseo
La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente

La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin (lo que se denomina cdigo fuente). No permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo

12

La vista Cdigo y Diseo

La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra

La ayuda

A travs del men Ayuda se puede: Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde es posible buscar por temas, por ndice o por contenido, si se selecciona la opcin Utilizacin de Dreamweaver o simplemente pulsando F1. Acceder a tutoriales (opcin Primeros pasos con Dreamweaver). Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML. Acceder al Centro de servicio tcnico de Dreamweaver en la web. Acceder al Foros en lnea de Dreamweaver. .
13