CURSO DE DREAMWEAVER: APRENDE A DISEAR TU WEB PASO A PASO

LECCION 1: PRESENTACION

Todo el que se decida a introducirse en el mundo web y colgar en la red una propia (bien sea en un hospedaje gratuito o de pago), deber decidirse tarde o temprano por enfrentarse a la tarea de ir construyendo esa web paso a paso, y finalmente subirla a su servidor del hospedaje para que sea publicada en Internet y por tanto sea vista por los dems. Y para ir creando una por una las pginas que compondrn su web, deber tener en cuenta que lo puede hacer de dos maneras: una, aprendiendo a programar en HTML por ejemplo y la otra usar un editor que le dar la tarea de programar ya hecha mediante el modo diseo. Aunque existen varios programas de este tipo, este tutorial como veis est dedicado a Dreamweaver de Macromedia, y en concreto a la versin MX-2004 (aunque vale perfectamente para la versin 8); advierto que no ser un manual a un nivel superior, sino orientado a todo aquel que nunca ha tenido contacto con el mismo, en una palabra: un tutorial bsico para que aprendas desde cero su manejo, y con la nica pretensin de conseguir que cualquiera sea capaz de crear una web propia.-Otra cosa ya es el diseo de la misma, ms o menos refinado y que forma parte de la habilidad de cada uno para expresar su gusto personal, es como el pintar un cuadro, se podrn dar unas directrices para obtencin de los colores, la composicin, etctera, pero al final ser el artista el que plasme en un lienzo lo que l siente.
El programa se puede conseguir descargar funcionando perfectamente en una versin de prueba por 30 das en la propia web oficial de Macromedia ( http://www.macromedia.com/es/downloads/),

y luego si te parece interesante podrs hacerte con la versin de pago.-Una vez tengas el programa en tu disco duro, debers proceder a su instalacin y aceptar todas las rutas que te ofrezca por defecto, nica manera de no tener posteriormente problemas. Damos por supuesto que ya lo has instalado, y por tanto la forma de abrirlo ser como siempre a travs del icono que te haya creado en el Escritorio, y si no fuera as pues a travs de Inicio-Programas-Macromedia :

as que picando en su apartado, proceder a abrirse el programa y aparecer:

1

debiendo elegir la opcin Diseo para que nos lleve a la siguiente pantalla:

donde veis que hay una serie de zonas diferenciadas; una arriba con los mens tpicos de cualquier programa (Archivo, Edicin, Ver, Insertar..etc):

que tiene a la derecha del todo los clsicos botones para minimizar, maximizar y cerrar:

Viene a continuacin hacia abajo una zona importantsima como veremos a lo largo del tutorial, la cual presenta varios iconos segn el tipo de estado que elijamos a la izquierda; vemos que normalmente aparecer:

y si picamos en la flechita negra saldr un men as:

de tal modo que segn tengamos picado cada uno de los 8 apartados, aparecern distintos iconos como dije, si picamos en Comn tendremos:

si por el contrario picsemos en Diseo nos cambiara la barra a:

y si es nuestro deseo tener los iconos de Formularios tendramos a la vista:

mientras que si elegimos Texto varamos lo siguiente:

para el apartado HTML aparecera lo siguiente:

si estamos en el modo Aplicacin lo que veramos sera esto:

casi acabamos, si tenemos Elementos Flash lo que aparecer ser:

y si finalmente optamos por Favoritos nos invita a pulsar el botn.

Como veis, ocho opciones distintas con muchos iconos que iremos viendo a travs de los ejemplos que desarrollemos en el tutorial, aunque hay muchos de ellos que ni los tocaremos porque para el propsito de este curso no sern necesarios.

LECCION 2: EL ESPACIO DE TRABAJO

Seguimos viendo el espacio donde vamos a trabajar y conociendo las distintas barras y mens que se nos muestran, as que siguiendo hacia abajo, la siguiente zona que se nos muestra es:

donde veis que a la izquierda tiene 3 zonas llamadas Cdigo , Dividir y Diseo que son para poder ver slo el cdigo y por tanto si saber programar en HTML puedes realizar la pgina enteramente en cdigo, que aparecera as:

si elegimos la opcin Dividir nos aparecera la pantalla con una mitad para el cdigo y la otra para la vista diseo, as:

y finalmente si elegimos la vista diseo, lgicamente solo muestra esto:

A la derecha, hay una zona que presenta este aspecto:

y que tiene en la barra vertical de la izquierda una flecha con este aspecto:

la cual sirve para esconder este panel, o para abrirlo si lo necesitamos; tambin vemos en este conjunto, que tiene unas pestaas con una leyenda para diversos subconjuntos, como son: Diseo, Cdigo, Aplicacin, Inspector de etiquetas, Archivos y por ltimo Marcos, cada una de ellas con una flechita negra a su izquierda que como imaginais sirve para abrir ese subconjunto picando en dicha flecha; en la imagen anterior veis como est abierto el subconjunto Archivos y nos muestra parte de las carpetas del sitio. Finalmente, en la parte inferior de la pantalla se nos presenta:

que tiene como caracterstica principal el Inspector de Propiedades desde donde podemos realizar cambios rpidos en la pgina como ya veremos, y que como todos los conjuntos anteriores tiene una flechita negra para abrirlo o cerrarlo.
LECCION 3 :CREAR SITIO EN DREAM WEAVER

Antes de decidirnos a crear un sitio web, tendremos que crear en nuestro disco duro lo que denominamos un sitio local, que no es ms que la creacin de una carpeta que en un futuro contendr todo aquello que compone nuestra web (archivos, imgenes).-El webmaster define esta carpeta como carpeta raz local y ser una rplica exacta del sitio remoto el cual ser el sitio real donde accedern los visitantes de la web. Ser en este sitio local donde podremos probar todas nuestras pginas y hacerles los cambios oportunos antes de subirlas al servidor y proceder a su publicacin. Pasamos entonces a ver como se crea un sitio local, y para ello deberemos picar en:

tras lo cual deber aparecernos la siguiente ventana:

y ahora deberemos picar en NuevoSitio para que nos salga:

donde como veis, Dreamweaver asigna al sitio el nombre Sitio sin nombre 1 , pero como nosotros queremos asignarle uno, tendremos que picar arriba en la pestaa con la leyenda Avanzadas para que nos lleve a:-

que ser donde realicemos los cambios, y para ello tendremos que estar situados en Datos locales activados, y luego damos un nombre en la casilla Nombre del sitio: donde le vamos a poner por ejemplo Mi sitio pruebas;

y luego como veis con la flecha negra que pinto, debemos picar en la carpeta a la derecha de Carpeta raz local para que nos lleve a la siguiente pantalla:

10

donde deberemos elegir la particin del disco duro donde instalaremos el sitio (yo voy a crearlo sobre C:, pero puedes hacerlo sobre otra si lo deseas; bien, ahora se trata de crear una Carpeta nueva, para lo cual puedes picar sobre el icono arriba, para que te muestre:

y vamos a ponerle como nombre por ejemplo sitioPrueba (aqu es importante sealar que conviene poner nombres sin acentos ni signos complicados, ni ee enfin, lo ms sencillo posible para que no haya problema alguno con el servidor en el futuro); una vez hemos dado nombre a la carpeta picamos sobre Abrir para que muestre:

y despus picamos en Seleccionar para que vuelva a la pantalla:

11

donde veis que ya ha tomado los cambios que queramos, con el nombre del sitio web y la Carpeta raz local tambin con su nombre as que una vez aceptamos, deber salir:

como observais ya est el sitio Mi sitio pruebas creado y listo para trabajar en l, as que picamos sobre botn Listo y tras salir un mensaje sobre activacin de cach, nos volver a la pantalla principal de Dreamweaver, y veremos que ya aparece nuestra carpeta raz perfectamente creada, en la parte derecha:

12

LECCIN 4: PRIMERA PGINA CON DREAMWEAVER: Una vez que hemos definido nuestro sitio y creado la carpeta raz, llega el momento de comenzar a crear contenido para ese sitio, pero antes de nada hay que decir que conviene perder un tiempo (incluso unos das) en hacer sobre papel y con bolgrafo un esquema bastante concreto en el que se defina la estructura del mismo ya de antemano, con una descripcin sobre las carpetas y archivos a crear. Ser buen comienzo el hacerse algunas preguntas previas acerca de temas como a qu audiencia ir dirigido el sitio?, para poder definir un perfil de usuario y en consecuencia preparar la web con este fin; qu contenido necesitar el sitio?, para poder recopilar todos los contenidos que vaya a ofrecer texto, imgenes, etc.--, adems deber preguntarse qu debera poder comunicar el sitio?, pues si el diseador no sabe de antemano responder a esta pregunta, posiblemente tampoco los usuarios lo sepan con claridad. Se v por tanto que es importante estructurar previamente el sitio mediante un diseo en papel, un boceto con un organigrama lo ms detellado posible de su contenido; se evitar con ello el tener que hacer cambios continuamente una vez lo hayamos subido al servidor, lo que es muy engorroso una vez que la web haya crecido y conste de un gran nmero de pginas, enlaces y dems. ( Palabras de inters: hosting - programacin html - alojamiento web ). Bien, una vez que tenemos claro como ser la estructura de nuestra primera web ha llegado el momento de comenzar a darle forma, para ello lo primero que
13

deberemos hacer es crear la primera pgina de la misma; esta primera pgina como norma general debera llamarse index y llevar como extensin .htm . Para la creacin de esta primera pgina, estando en Dreamweaver deberemos picar en:

para que nos salga la siguiente pantalla:

en la que como veis tenemos varias opciones para elegir, y con dos fichas arriba llamadas General y Plantillas; nosotros vamos a elegir Pgina bsica , (en Categora), y HTML (en Pgina bsica), que normalmente ser lo que viene ya ofrecido por defecto, as que sin ms picamos sobre el botn Crear para que se nos abra nuestra primera pgina web:-

14

que como veis con las dos flechas negras que he dibujado, lo primero que nos destaca es que esa pgina no tiene ttulo alguno y por tanto Dreamweaver le ha asignado uno provisional Documento sin ttulo , as que nuestra primera tarea consistir en asignar un ttulo a esta pgina (que como vimos debera ser: index.htm ), as que para ello (y siempre que abrais una nueva pgina debera ser as, es decir, darle un ttulo) deberemos picar en:

para que nos lleve al siguiente men:

15

en el que deberemos trasladarnos a la particin del disco duro de nuestro ordenador donde habiamos creado nuestra carpeta raz (recordais que la habamos llamado sitioPrueba ?), y nos situamos dentro de ella, para dar ttulo a continuacin a la pgina, as:

16

teniendo que picar entonces sobre botn Guardar para irnos a:

en que podemos observar que arriba del todo aparece [Documento sin ttulo(sitioPrueba/index.htm)] (lo que quiere decir que la pgina ya est guardada),pero abajo, en la ventanita Ttulo seguimos viendo que pone Documento sin ttulo que nos indica que la pgina est sin l.-Hay que decir que es muy importante darle ttulo a la pgina siempre, y adems conviene hacerlo al principio; es adems importante seleccionar bien ese ttulo porque ese ser el que aparezca luego en los buscadores (Google por ejemplo) una vez hayamos publicado nuestra web, y el buscador nos la haya indexado (lo que puede tardar semanas o incluso meses, dependiendo de muchas circunstancias); para elegir ese ttulo habra que entrar en el tema de las estrategias para elegir palabras bien promocionadas en el buscador, pero eso es tema que se sale de este tutorial y podremos tratarlo en otro apartado.

17

As que sin apartarnos de la leccin vamos a darle ttulo a la pgina, y para ello no hay ms que irse a la ventanita mencionada y tras seleccionar con el ratn lo escrito:

procedemos a escribir el que queramos, yo voy a darle por ejemplo Primera pgina de este proyecto y pulso <Enter>(que es un poco tonto pero se trata de explicarlo y no lo complico), y por tanto quedar as:

y podreis observar como ya est completo, tanto en la parte superior azul donde vemos [Primera pgina de este proyecto (sitioPrueba/index.htm*)], como en la ventanita de Ttulo en que ya aparece Primera pgina de este proyecto. Tambin si sois observadores habreis comprobado que arriba, donde aparece la ruta completa, al final aparece el smbolo ( * ), que siempre nos indicar que los cambios que hayamos realizado estn sin guardar y por tanto es recomendable proceder a guardarlos; hay que acostumbrarse cuando trabajamos en una pgina a guardar los cambios a menudo, y para llevarlo a efecto tenemos que pulsar Ctrl+S viendo como automticamente se realiza, yo lo hago y veis el cambio:

es decir, el smbolo * ha desaparecido y nos indica que est todo guardado correcto. Y por hoy lo dejamos aqu, y como veis ya hemos creado nuestra primera pgina y le hemos dado ttulo, siendo en la prxima leccin donde vamos a comenzar a darle contenido a dicha pgina. Ahora como est todo guardado, podemos salir de Dreamweaver normalmente.

18