http://www.deseoaprender.com/CursoDreamweaver/PagMenuDreamweaver.

htm

BREVE PRESENTACIN DEL CURSO Todo el que se decida a introducirse en el mundo web y colgar en la red una propia (bien sea en un hospedaje gratuto 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. 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. Espero lo disfrutes y te resulte interesante. 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/):

Una vez lo hayas probado, 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 InicioProgramas-Macromedia :

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

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

Aqu vemos 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: saldr un men as: y si picamos en la flechita negra

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. -

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 una vez hemos creado una pgina, es la que te muestro en esta imagen que aparece aqu abajo:

Puedes ver que a la izquierda tiene 3 zonas llamadas Cdigo , Dividir y Diseo que son para poder ver slo el cdigo y por tanto si sabes programar en HTML puedes realizar la pgina enteramente en cdigo --tecleando directamente en este espacio--, que aparece como te muestro aqu abajo:

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:

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:

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. Hasta aqu lo que ha dado de s esta leccin, te espero pronto en la siguiente para continuar viendo el manejo de Dreamweaver. CREAR NUESTRO SITIO EN DREAMWEAVER 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:

Ahora deberemos picar en NuevoSitio para que nos salga:

Como ves, 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":

Ahora, 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:

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:

Vamos a ponerle como nombre por ejemplo sitioPrueba (aqu es importante sealar que conviene poner nombres sin acentos ni signos complicados, ni eeenfin, 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:

Despus picamos en Seleccionar para que vuelva a la pantalla:

Vers 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 puedes observar, 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:

Despus de esto, ya tenemos todo preparado para comenzar a dar forma a nuestra primera pgina de las muchas que compondrn la web, lo que haremos en una prxima leccin. Saludos PRIMERA PGINA EN 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 ve 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 tenemos claro como ser la estructura de nuestra primera web ha llegado el momento de comenzar a darle forma, para ello lo primero que 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:

Esto har que nos salga la siguiente pantalla:

En ella 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:

Fjate en 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:

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:

Picamos sobre el botn "Guardar" tras haberle dado un nombre, y volveremos a Dreamweaver, donde ya podremos ver:

Donde 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. 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 aqu 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:

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 simbolo * 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.Saludos y hasta la prxima

INSERTAMOS CONTENIDO EN LA PGINA En la leccin anterior de Dreamweaver habamos creado una pgina a la que llamamos como es preceptivo index.htm y lo nico que habamos hecho es darle un ttulo y guardarla; en esta nueva leccin vamos a aprender a darle contenido a esa pgina, eso s, sin teclear una sola lnea de cdigo, pues ya dije al principio que con Dreamweaver se pueden crear pginas sin necesidad de programar. En cualquier pgina (y sobre todo en la inicial de la web) es lo normal que arriba del todo vaya una cabecera con un logotipo de la empresa o un ttulo de tu web que d nombre al sitio, cabecera que puede ser ms o menos sofisticada (hay programas especficos para estos menesteres, como puede ser el Xara Webstyle) pero aqu vamos a ver como se prepara una cabecera de una forma sencilla y ya luego podeis vosotros refinarla cuanto querais. Decir antes de seguir que en el diseo de pginas mediante Dreamweaver son importantsimas las Tablas pues no hay web que no haga uso bastante amplio de esta herramienta; una Tabla ser fundamental para distribuir a lo largo de una pgina tanto texto como imgenes, mens, etctera, lo que sera imposible prcticamente sin ellas. Te permiten alinear, colocar texto en sitios determinadosque de otra forma quedara bastante catico (se puede usar tambin CSS que veremos ms adelante). Para preparar esa cabecera de la que habl, vamos primeramente a colocar una tabla que nos sirva de gua, para ello una vez que hemos abierto la pgina de la leccin anterior mediante:

Y buscndola en el disco duro del Pc en la carpeta donde la habamos guardado, al final tendremos a la vista el rea de trabajo:

Ahora hacemos un clic con el mouse para que el cursor se coloque en la parte superior izquierda y luego, teniendo activo el panel de Comn deberemos picar en el icono de Tabla como veis en la figura siguiente:

Esto har que se abra la siguiente ventana que te muestro aqu abajo:

Aqu ser donde configuremos la tabla a insertar con Dreamweaver, de arriba abajo vemos: Filas: el nmero de ellas que deseamos tenga la tabla, Columnas: igual pero para las columnas, Ancho de tabla: la longitud total a lo ancho, de la tabla que puede ir en porcentaje o en pxeles (yo uso siempre el porcentaje y suelo emplear un ancho del 90% para que la tabla no est al lmite de la ventana), Grosor del borde: si queremos que la tabla tenga un borde a todo su alrededor, o que sea invisible (en este caso tendr 0), si le ponemos una cifra (1, 2)el borde ser cada vez ms ancho, Relleno de celda: el espacio que habr entre el borde de una celda y su espacio de trabajo, Espacio entre celdas: distancia que quedar entre una celda y otra (si no deseamos ninguna, ir a 0), Encabezado: por si deseamos que la tabla lleve uno, Accesibilidad: datos que no son influyentes en la tabla. As que yo le voy a indicar que me cree una con 1 fila y 2 columnas, un 90% de ancho, y con 0 en grosor, relleno y espacio:

Pico ahora abajo en Aceptar , con lo que la tabla aparece as:

Si picamos ahora en cualquier espacio libre, aparecer:

Como ves slo aparece delimitada por unos puntos y en el navegador an no se vera nada. Seguidamente, vamos a preparar una cabecera, as que nos colocamos en la primera celda de la tabla (picando dentro de ella) y tecleamos por ejemplo: deseoaprender.com que ser digamos, el logotipo, y ahora pulsamos <Enter> y en la linea inferior tecleamos la frase: aprende informtica, dibujo, pintura , debiendo quedar algo as:

An aparece un poco pobre, as que vamos a cambiarle un poco el aspecto, y primero seleccionamos la frase de arriba y deberemos pasarnos a la parte inferior Propiedades:

Donde ahora vamos a proceder a cambiar el Tamao, el cual cambiamos: para que la frase aparezca as:

A continuacin le cambiamos la Fuente segn puedes ver aqu abajo:

Como ves voy a elegir Forte y si no la tienes la puedes buscar picando en Editar lista de fuentes , y aparecera as:

Ahora le voy a dar un color al texto, por ejemplo un azul:

Para que nos quede de esta forma que te muestro aqu abajo:

Finalmente seleccionaremos la segunda frase y le ponemos tamao 14 , Fuente Verdana y color violeta, quedando as:

Vers que posiblemente se haya desplazado la vertical que divide ambas celdas hacia la derecha:

Lo que tenemos que hacer en este caso, es colocar el puntero del ratn sobre dicha lnea hasta que cambie a un smbolo parecido al signo igual en vertical y dos flechitas, picamos botn izquierdo y sin soltar arrastramos hacia la izquierda hasta el lugar adecuado:

Por ltimo podemos darle un color de fondo a la celda as que picamos dentro de ella y:

Eligiendo en este caso un color clarito, por ejemplo:

Nos queda la otra celda de la derecha, que si nos parece correcto, le podemos dar el mismo fondo, picando dentro de ella, los mismos pasos (cuando salga el cuentagotas, en vez de recordar el color que habais cogido, lo que podeis hacer es trasladar dicho cuentagotas hasta la primera celda y picar sobre el color que ya dimos):

Bueno, como veis no ha quedado tan mal y podra valer perfectamente como logotipo de nuestra web. Salvad ahora el trabajo mediante Archivo-Guardar (o simplemente con Ctrl+S) y luego cerrais con Archivo-Cerrar pues seguiremos en la prxima leccin donde iremos aadiendo cosas a nuestra pgina. Saludos

INSERTAMOS CONTENIDO EN LA PGINA (2) Habamos dejado nuestro proyecto de pgina web con una cabecera que habamos creado en unos pocos pasos muy sencillos pero no por ello menos vistosos. A partir de aqu podremos ir aadiendo cosas a la pgina (que no olvideis, deberamos tener ya diseada de antemano en papel, puesto que no se debe dejar al azar el ir creando partes de la misma; todo deber obedecer a un plan establecido con anterioridad), por ejemplo un men y las partes en que la dividamos. Lo primero que haremos ser poner una divisin entre la cabecera que hemos creado y el cuerpo de la pgina, divisin que a mi entender debe combinar perfectamente con el color de dicha cabecera (por ejemplo un azul, que combina perfectamente con el naranja), as que para ello no tendremos ms que picar a la derecha de la cabecera y pulsar <Return> para que el cursor se coloque debajo de la misma, ahora hay que crear una nueva tabla y para ello picamos en la barra de herramientas superior (en la flechita negra) para que cambie a la opcin Diseo y luego en el icono de Tabla : -

Para que nos aparezca el men:

Ahora como ves, solo hay que decirle que la tabla conste de 1 fila y 1 columna y que tenga un porcentaje del 90% del ancho de la pantalla (yo le digo siempre el 90% para evitar si le doy el 100% que en algunos monitores antiguos, la pgina se salga de la pantalla por la derecha) y los otros campos los dejo a cero.Picamos ahora en Aceptar y nos crear la mencionada tabla:

Segn est seleccionada, nos vamos a la parte inferior, Propiedades y picamos en la flechita de Color de fondo para que salga la carta de colores, y elegimos el que sea (en mi caso como dije, ser un azul clarito) con el cuentagotas:

En ese momento veremos que la tabla coge dicho color:

Por cierto hay que decir que en la tabla de colores, puede que a ti no te muestre la misma que aparece en la ilustracin, para cambiar debes picar en:

Para que aparezca lo siguiente:

Puedes observar que tengo elegido Tono continuo pero puedes elegir otras paletas picando en cada uno de los apartados, incluso hay una con solo grises como ves. Seguimos, y ahora voy a poner un saludo para los visitantes, el cual voy a incluir dentro de la tabla que acabo de crear, as que pico dentro de ella y doy tres o cuatro avances para dejar un margen a la izquierda ( Ctrl+May+Espacio), y tecleo el mensaje que quiera, en mi caso:

Ahora le doy un formato de letra ms bonito, por ejemplo tipo Verdana de 12 pixeles y color azul ms fuerte:

El resultado de todo ello, es este que ves aqu abajo:

Hago un inciso para decir que puede ocurrir que no tengas el tipo de letra Verdana cuando piques en Fuente pero no tienes ms que picar en:

Editar lista de fuentes para que te lleve a esta pantalla:

Como ves, buscas en Fuentes de letra disponibles: y cuando encuentres la que deseas picas en ella; acto seguido picas sobre el botn << para que te la pase a Fuentes elegidas: y finalmente picas sobre Aceptar con lo cual ya te aparecer en las fuentes disponibles en Dreamweaver para otras ocasiones. As que tras realizar todos los pasos explicados, nuestra pgina deber tener el siguiente aspecto:

Y dejamos por hoy el ejercicio, hasta la prxima leccin en que vamos a ir progresando en la mejora del aspecto de nuestra pgina; no olvideis salvar el trabajo realizado mediante Ctrl + S para que no perdais nada. Hasta entonces saludos.

VAMOS A MEJORAR EL ASPECTO DE LA PGINA Vamos a seguir con nuestro proyecto de pgina web y como veis en el ttulo de esta leccin, trataremos de ir mejorando el aspecto de la misma con una serie de pequeos detalles que aunque parezcan una tontera, en realidad influye de cara al visitante, pues como en todo la vista es la que trabaja e inconscientemente alguien que entre en nuestra web tendr una buena o mala impresin no solo por el contenido que le ofrezcas, sino tambin por cmo le ofreces esa informacin. Una web que no est montada como negocio, es decir, que se dedique como la ma a ofrecer unos recursos (tutoriales, cursos, etc..) de forma desinteresada y gratuta, no por ello debe

renunciar a obtener unos beneficios que al menos ayuden a costear el pago del hospedaje; estos beneficios sern mayores si tienes un gran nmero de visitantes y eso se consigue sin duda ofreciendo algo de calidad y que a la larga te lo reconocern. Y una forma de obtener beneficios es incorporar en tu pgina algn banner publicitario que har que cuando un visitante haga un clic en el mismo te reporte una nfima ganancia (sobre 0,03 a 0,08 ) pero que sumando sumando, desde luego no te vs a hacer rico pero como digo ser una pequea ayuda que no viene mal. La forma de incorporar uno de estos banner (se supone que ya ests registado en algn programa de afiliados.Por cierto, elige bien porque los hay muy buenos, y muy malos; uno de los MUY BUENOS y que pagan bien y rpido es el que te ofrezco en esta misma pgina, as que si quieres aceptar la voz de la experiencia pica en l y regstrate.Luego, si aceptan tu pgina podrs obtener y configurar los cdigos para que los coloques en tu web como vamos a ver), ser la siguiente: Creamos una tabla por ejemplo debajo del trabajo de la leccin anterior:

Nos saldr entonces el men, donde procedemos a elegir:

As que tras picar en Aceptar tendremos la Tabla de esta manera:

Ahora tenedrs que picar dentro de ella para colocar all el cursor.-Acto seguido tendremos que Copiar el cdigo del anuncio a insertar (que habremos obtenido del programa de afiliacin y tendremos por ejemplo en el Bloc de notas), y ahora tendremos que picar en Cdigo como veis:

Lo que va a hacer que nos aparezca:

Vers que el cursor queda situado en el sitio donde ir insertado el cdigo (que ser ni ms ni menos que dentro de la tabla que acabamos de crear); as que slo tendremos que picar en el men de arriba en Edicin-Pegar para que dicho cdigo se inserte en html.-Solo tenemos que volver a picar sobre el botn Diseo para volver a nuestra pgina:

Puedes observar que tiene incrustado en la tabla un smbolo, y que no vemos nada puesto que estamos en local, as que si queremos ver como quedar el banner tendremos que picar sobre la tecla F12 para verlo en el Navegador que tengamos por defecto (luego explico la forma de configurarlo si no te funciona con F12), pero lo normal es que funcione, as que tras pulsar, debera salir:

(si te pregunta antes si deseas guardar los cambios, dices que s). Podeis observar lo sencillo que resulta agregar un banner publicitario que aparte de no desentonar, nos reportar algn beneficio, seguro.-Para volver a local, solo tendremos que cerrar con el botn de siempre: Antes de que se me olvide, explico como configurar el navegador para ir probando nuestra pgina de vez en cuando; tendremos que picar en:

Lo que har que se nos muestre:

Observa que tengo configurado el I.Explorer como navegador principal, pero si quisiera aadir otro (cosa recomendable para probar nuestra pgina en distintos y ver si hay algn fallo), tendra que picar arriba en Navegadores + para que saliese:

Ahora fjate cmo nos permitira Examinar nuestro disco duro para encontrar el otro (siempre que lo tengamos instalado en nuestro PC, por supuesto), que deberamos poner como Navegador secundario picando en la casilla correspondiente y Aceptar. Ah v un ejemplo en el que configuro Mozilla como navegador secundario:

Comprendido?, creo que no tiene dificultad alguna.-Recordad que una vez configurado al menos el navegador principal, mientras estamos trabajando slo tendremos que pulsar la tecla F12 para que funcione (y recordad que debereis tener conectado Internet!!, pues aunque parece obvio, a veces te puede volver loco el fallo tan tonto). Bueno, pues como veis seguimos avanzando en nuestro diseo que es muy personal y acorde com mis gustos, pero una vez domines el tema, ya entrar en juego tu habilidad para el diseo, para armonizar colores y todo lo que interviene en esta fascinante aventura que continuaremos en el prximo captulo.

TRABAJAR CON TABLAS EN DREAMWEAVER En el diseo de una pgina web es importantsimo el manejo de las Tablas, pues son estas fundamentales para poder distribuir el contenido; lo lgico es que una pgina no conste nicamente de texto (en este caso sera sencillsimo, nos colocabamos en el cuerpo de la misma y a teclear!), sino que deseemos colocar partes con texto, otras con algn tipo de publicidad, otra para ofrecer intercambio de enlaces, etc Ser entonces cuando entren en juego las Tablas que no son ms que unos espacios que distribuiremos a nuestro gusto dentro del entorno de dicha pgina.Sabiendo combinar dichas tablas seremos capaces de disear una pgina a nuestro gusto. Las tablas se componen de filas y de columnas y adems podremos insertar nuevas tablas dentro de cualquiera de dichas filas y columnas ( celdas se llaman cada uno de los espacios de una tabla). Pero vayamos a los ejemplos, porque una imagen vale ms que mil palabras; tenamos hasta ahora la pgina de ejemplo que estamos haciendo as:

Vamos a ver como podemos incrustar una nueva tabla entre otras (pues podemos darnos cuenta que se nos ha olvidado algo; por ejemplo yo quiero colocar un sitio donde aparezca la

fecha actual, la cual se deber actualizar automticamente cada da, y dicha fecha quiero que aparezca entre Bienvenido a esta web. y el banner de publicidad que hay debajo.-Para ello tendr que crear una nueva tabla de 1 fila y 1 columna en dicho lugar, lo que har picando a la derecha de la tabla donde est el Bienvenido para que el cursor se ponga ah:

Ser entonces cuando pulse <Enter> para que abra el espacio:

Para que inserte la nueva tabla, lo que puedo hacer mediante el men superior InsertarTabla:

O bien mediante el icono que te indico abajo con la flecha (estando en la ficha Comn):

En ambos casos nos deber aparecer la ventana de Tabla en la que le diremos que debe constar de 1 fila, 1 columna, el 90% de ancho y los dems datos a 0 , as:

As que una vez hayamos hecho clic en Aceptar nos tiene que aparecer:

En este caso vemos que ha abierto adems otro espacio entre la tabla creada y el banner, por lo que picamos a la derecha de la tabla creada para colocar all el cursor y damos un <Supr> para quitar dicho espacio, debiendo quedar:

Ahora, decidimos que la fecha deber aparecer centrada en dicha Tabla, para lo cual deberemos picar dentro de ella para colocar ah el cursor, y entonces picamos con botn derecho dentro de la tabla y elegimos Alinear al Centro :

Volvemos a picar dentro de la tabla y veremos que el cursor se colocar justo en el centro de la misma:

Ahora debemos seguir este proceso: 1).-debemos colocar un cdigo entre <HEAD> y </HEAD> en cualquier lugar pero siempre dentro del cuerpo delimitado por estas etiquetas (que estn al principio del cdigo de la pgina).Para ver este cdigo ya sabeis que no hay ms que cambiar a dicha vista, picando en:

Con lo que aparecer la misma (con la barra desplazadora subs al principio):

Veis claramente las dos etiquetas que menciono <head> y </head> que estn al principio y al final del cdigo que encierran; pues ser en cualquier lugar entre ellas, donde deber colocar este cdigo: <SCRIPT> var mydate=new Date(); var year=mydate.getYear(); if (year < 1000) year+=1900; var day=mydate.getDay(); var month=mydate.getMonth(); var daym=mydate.getDate(); if (daym<10) daym="0"+daym; var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sbado"); var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","N oviembre","Diciembre"); </SCRIPT> as que pico a la derecha de </style> y doy un <Enter> para abrir un espacio y entonces introduzco el cdigo (bien teclendolo, o mediante Copiar-Pegar como hago yo, puesto que lo tengo escrito en otro sitio), as:

Ahora vuelvo a la vista de Diseo (picar arriba en el botn) viendo como en la tabla no aparecer nada an, puesto que falta otra parte del cdigo que nos muestre la fecha, 2).-deberemos introducir otro pequeo cdigo entre <body> y </body> (es decir en el cuerpo de la pgina) y concretamente en el sitio exacto donde queremos que aparezca, recordad que habamos decidido fuese en el centro de la Tabla , as que nos aseguramos de que el cursor est en dicho centro (picando dentro de ella) y volvemos a la vista de Cdigo (ya sabemos

como), y el cursor aparecer justo en el sitio donde debamos introducir dicho cdigo:

<script> document.write("<small><font color='0066CC' face='Arial'><b>"+ dayarray[day] + " " + daym + " de " + montharray[month] + " de " + year + "</b></font></small>"); </script> Al igual que antes yo hago mediante Copiar-Pegar, y vuelvo a Diseo donde aparentemente no ha pasado nada porque nada se muestra, pero si ahora pulso F12 para comprobar la pgina en el navegador definido, saldr:

Voil!, ya tenemos la fecha en nuestra pgina, fecha que de forma automtica se deber actualizar cada da. Seguiremos en el prximo tema trabajando con tablas.

MS SOBRE LAS TABLAS EN DREAMWEAVER Y digo ms tablas, porque en el diseo de pginas web son la esencia de las mismas, si no fuera por las tablas sera complicadsimo incrustar contenido en las webs. Vamos a seguir por tanto trabajando con tablas siempre sobre el ejemplo que hemos ido siguiendo desde el comienzo, al cual le quito la parte de abajo en la que recordais haba puesto un banner publicitario, y la quito entre otras cosas para tener ms espacio de trabajo y seguir con ejemplos; aparecer entonces as:

Vamos a ver como se pone un separador entre bloques que queda bastante agradable a la vista y cumple su funcin, para ello no tendremos ms que insertar una tabla con estos datos:

Hacemos clic sobre Aceptar y la tendremos lista:

Ahora nos colocamos dentro de ella simplemente picando dentro de la misma y veremos como el cursor parpadea en el interior; pues bien, para insertar la barra tendremos que ir arriba en Insertar: como veis se trata de insertar Regla horizontal que es un objeto HTML, as que cuando piquemos, quedar as una vez demos a F12 para vista previa en el navegador:

Como ves es agradable a la vista y hace una separacin perfecta entre el bloque de arriba y lo siguiente que veremos. Y lo que veremos son dos formas de presentar una tabla con un borde alrededor de un color que destaque del resto y adems como se presentan celdas perfectamente separadas unas de otras. La primera forma de poner un borde es simplemente creando una tabla y activando esa opcin a la que podemos o no darle un color.-Vamos a crear una Tabla con una fila y 1 columna y 1 pixel de borde, todo de carrerilla (lo primero que hacemos es picar en cualquier lugar fuera de la tabla anterior, para que la barra que habamos incrustado quede perfectamente, pues si dierais en cualquier tecla, desaparecer porque veis que est activa en negro-), ah v la Tabla nueva:

Tras picar en Aceptar y luego F12 para verla en el navegador, ser as:

Ves que por defecto, el pixel que le dimos de borde, lo rellena con un gris que no es feo, pero queremos darle un color, yo le voy a dar un azul oscuro, para ello debemos tener activa la tabla:

Si no lo estuviese, solo teneis que acercar el puntero del ratn hasta el borde y cuando se ponga rojo haceis clic, vereis que se activa.-Bien, estando como digo activa, nos vamos abajo en Propiedades, a:

Es decir, picamos sobre Col. Borde y aparecer la paleta de colores, donde elegs el color deseado, como veis elijo el azul oscuro, y nada ms picar aparecer as en el navegador (F12):

La otra forma de crear una tabla con borde sera crearla esta vez con borde 0 pero con Espacio entre celdas =2, (damos dos saltos de lnea para que la tabla no se nos junte con la anterior) y luego actuamos as:

Una vez creada -momento en que estar an activa-, le damos de color de fondo el azul de antes:

De modo que se presentar as:

Acto seguido tenemos que darle otro color de fondo pero esta vez a la celda de que consta, pero para ello tenemos que colocarnos dentro (picamos dentro de la tabla), y luego, de nuevo color de fondo, pero esta vez el blanco del fondo de la pgina:

Una vez que se ha hecho clic (veis arriba de la figura el cdigo #FFFFFF que es el cdigo hexadecimal del blanco, pero no tenemos que teclearlo, sino simplemente picar a la izquierda como veis en dicho color) nos presentar la tabla as en el navegador:

Vers que es idntica a la anterior, pero creada de otra forma entendido?. Lo dejamos aqu para que la leccin no se haga excesivamente larga y voy a continuar en el

siguiente captulo, donde veremos primeramente como crear una tabla con bordes igualmente, pero con varias celdas perfectamente separadas y visibles (a las que luego incrustaremos contenido).

DREAMWEAVER: MS SOBRE LAS TABLAS Puede que pienses que son muchos temas ya tratando sobre Tablas, pero de verdad que son tan importantes que es fundamental el dominar su manejo y para ello nada mejor que insistir una y otra vez sobre las mismas. Vamos hoy a ver segn habamos quedado--, como crear tablas con varias celdas y como podemos trabajar sobre ellas para darle el aspecto que queramos; por ejemplo vamos a crear una con una fila y tres columnas, para ello ya sabeis que podemos hacerlo picando en:

O bien podemos picar directamente sobre el icono:

Teniendo como veis activada la barra que corresponde a Comn ; en ambos casos nos sale el men Tabla, donde vamos a elegir como he dicho, que nos cree una con 1 Fila, 3 Columnas, un ancho del 90% y el resto a cero:

Una vez que hayamos hecho clic en Aceptar nos deber aparecer as:

(Si picases sobre F12 para ver la pgina con el navegador, no verais nada, porque al no tener borde, la tabla solo la vemos en diseo). Bien, ahora vamos a redimensionar las 3 celdas a nuestro gusto (pues no olvideis que dentro de ellas deberemos poner contenido, el cual deberemos predecir donde ir) y por ejemplo voy a dejar la de la izquierda ms pequea para poner un men, la del centro ms amplia para colocar texto (un captulo de una leccin por ejemplo) y la de la derecha tambin pequea para lo que tengamos planeado (por ejemplo yo le voy a colocar un pequeito banner publicitario).-Para redimensionar las celdas, nos colocamos con el cursor sobre la lnea que separa una y otra hasta que aparezca un smbolo similar al signo igual invertido y dos flechitas (izquierda y derecha), en ese momento pulsamos el botn izquierdo del ratn y sin soltar desplazamos dicha lnea a derecha o a izquierda hasta el lugar elegido; tras estas tareas, aparecera as la tabla:

Es decir, como veis he dejado del 100% de la tabla, el 25% para la celda izquierda, el 51% para la central y el restante 24% para la celda derecha. Bueno, ahora podramos empezar a trabajar dentro de ellas y colocar cosas, pero tened en cuenta UN CONSEJO IMPORTANTE : si lo haceis as unas celdas harn que las otras se abran sin control, de tal manera que colocas texto a la izquierda y cuando coloques algo en el centro, mayor que el tamao de la izquierda, te lo mover hacia abajo para ocupar todo el espacio; en definitiva, como suele decirse no haras carrera de la tabla.-Pero he aqu la solucin: alinear cada celda arriba de tal manera que sea independiente de las dems.-Para ello, te colocas en la primera celda de la izquierda (picando dentro) y te vas a la vista Cdigo donde te aparecer esto:

Como puedes observar estas no son ni ms ni menos que las tres celdas que acabo de crear, a ahora para darles alineacin superior, deberemos usar el cdigo: valign=top , lo que haremos colocando el cursor delante del signo > y dando una vez al espaciador, y o bien tecleamos el cdigo, o ms fcil an, estando en esa posicin deber salir:

Entonces pulsamos la tecla v (porque buscamos la sentencia valign ) y saldr:

Debiendo hacer ahora un doble clic sobre ella, para que se coloque automticamente en su sitio y nos ofrezca a su vez las posibilidades de valign, as:

Como es lgico, picamos sobre top (doble clic), para que se coloque as:

Teniendo ya la celda de la izquierda correctamente; pues ahora debemos realizar la misma operacin con las otras dos, para que al final aparezca as:

Ahora debemos volver a la vista Diseo y en apariencia no notaremos nada cambiado, pero internamente las 3 celdas si que tienen cambios (y muy importantes para el futuro del contenido de la tabla). Ahora ser cuando debamos Insertar una tabla dentro de una celda , y para ello picamos dentro de la primera celda de la izquierda, y nos vamos al icono Tabla, donde creamos una con

estos datos (por ejemplo):

Es importante sobre todo que tenga el 100% de ancho para que nos ocupe el total de la celda, y el darle un relleno y espaciado de celdas, as el texto y dems tendrn un margen y quedarn ms bonitos sobre todo si tienen un color de fondo. Realizamos la misma operacin en la segunda y tercera celdas, y al final aparecer:

Ya no debes preocuparte, porque cada celda actuar independientemente y no causar problemas a las otras.-Si vamos a F12 seguiremos sin ver nada, pero una vez le demos un borde, o un color de fondo a las celdas ya lo veramos, por ejemplo le doy a las 3 celdas un color de fondo gris clarito (ya sabeis que para ello, picamos con botn izquierdo dentro de la primera de ellas y vamos abajo a Color de fondo y seleccionamos el que deseemos; para las otras dos la misma operacin, pero para que el color sea el mismo, cuando demos a color de fondo y salga el cuentagotas, picamos sobre el color que dimos a la primera, y as con la tercera), si ahora damos F12 para ver el resultado en el navegador:

Fjate en que ahora ya tienen un aspecto agradable. Seguiremos en el prximo captulo aadiendo contenido a esta tabla recin creada, hasta entonces, saludos.

APRENDER DREAMWEAVER: LAS TABLAs (4) Si, seguimos dando forma a esta tabla recin creada en el captulo anterior, ya he comentado que mediante las tablas puedes controlar el aspecto de aquello que vayas a introducir en tu web, y sobre todo ubicar cada cosa en un sitio determinado de tal manera que aparezcan perfectas alineaciones en cada elemento, adems de colores de fondo y todo lo que se te ocurra. En la repetida Tabla, voy por ejemplo a poner un men de navegacin para que el visitante sepa en todo momento donde est y donde puede desplazarse dentro de un sitio web, as que lo primero que har ser poner un encabezamiento, de esta manera:

Y para ello, veis que me he colocado dentro de la celda de la izquierda y lo primero que introduje fue una estrella como adorno (dicha estrella no es ms que una imagen .gif que ya tengo en una carpeta, y que la puedes obtener de Internet en los muchos portales que existen con imgenes gif gratutas. En mi caso, me fui a:

Insertar-Imagen y te saldr la ventana de dilogo donde debers seleccionar el lugar donde tengas dicha imagen (en mi caso la tengo en una carpeta denominada Imgenes dentro de las muchas carpetas que contienen los archivos del sitio web), as:

As que ha sido ah donde he elegido el fichero estrella.gif y tras darle a Aceptar me lo habr colocado en su sitio:

Y a continuacin doy un espacio ( debes hacerlo con Ctrl+May+<Espacio> ) y tecleo lo que quiera, en mi caso MEN NAVEGACIN el cual tendr una fuente, tamao, etc.. determinados, pero yo le doy (tras seleccionar el texto):

Como vs: Fuente: Verdana , Tamao: 12 pixel , Color: Rojo (CC0000) , y al final le pico en Negrita: , con lo cual quedar como vimos arriba. Bien, ahora tengo que introducir nuevas filas para disponer los nuevos apartados de que constar dicho men, y podemos hacerlo de dos maneras: la primera de ellas (si ya sabemos las filas exactas de que constar) consiste en crear las filas necesarias, vamos a suponer que sean 5 y para ello picamos con botn derecho dentro de la fila donde est el MENU NAVEGACIN para que salga:

Es decir, Tabla-Insertar filas o columnas y al picar saldr:

Puedes ver que selecciono Filas , le doy 5 en nmero de filas, Bajo la seleccin (aunque si nos interesa podemos decirle que por encima) y pico Aceptar para que efectivamente aparezcan las 5 nuevas filas:

Ya ves que fcil no?.-La otra forma sera colocarnos dentro de la celda MEN NAVEGACIN y simplemente pulsar la tecla de salto de campo con lo cual nos crea una nueva fila, en ella tecleamos lo que sea y nuevamente salto de campo, as sucesivamente las veces necesarias. Vamos ahora a introducir texto en las cinco nuevas filas que habamos creado, para ello, estando en cada una, escribimos lo que sea, yo pongo esto:

Y procedo ahora a seleccionar las cinco filas para dar formato al texto de todas (ya sabeis que pico en la primera y sin soltar arrastro hasta seleccionar las cinco), y procedo a dar como fuente Verdana de 12 pixel y le voy a dar tambin Negrita, as:

Tenemos as un men bastante curioso (cada uno puede luego poner la imaginacin y hacerlo como ms le guste); si ahora lo vemos en el Navegador (F12), quedara:

Finalmente, si como yo, considerais que quedara mejor sin color de fondo en las celdas, pues picas sobre las 5 filas y abajo en Propiedades-Color de Fondo seleccionais el blanco o el que sea, yo le voy a dar un gris pero menos fuerte:

Me parece queda un poquito ms agradable.-Y con esto ya tendramos hecho un sencillo men para nuestra pgina. Y fijaros en lo que os comentaba, las otras dos celdas de la Tabla originaria, siguen alineadas perfectamente, sin sufrir alteracin alguna (lo que no habra ocurrido de no darle los atributos valign=top ):

Como ltima explicacin por hoy, vamos a ver como se le d contenido a ese Men y lgicamente ser estableciendo un hipervnculo que cuando piquemos en alguno de los 5 apartados de que consta, nos lleve al lugar elegido; por ejemplo, he creado una pgina muy sencilla a la cual me desplazar cuando se pique en Enlace uno , y para ello voy a crear un hipervnculo sobre dicha lnea, para ello selecciono el texto de la misma:

Pico con botn derecho para que salga men y elijo Crear vnculo con lo que me saldr una ventana con las carpetas y archivos de nuestra web (en este caso, como es muy sencilla), solo aparecern:

Estos dos, y como me interesa Enlace_uno pico en l y doy Aceptar, con lo cual el enlace ya aparecer as:

De tal manera que si me voy al Navegador (pues en diseo no funciona) con F12 y pico sobre el enlace, me deber enviar a la otra pgina:

Tan solo tiene esta pgina el texto que veis, es decir, funciona perfectamente.-Regresamos y ya en la pgina principal guardamos el trabajo, puesto que en el prximo tema seguimos viendo la forma de ir aadiendo cosas a la Tabla que habamos creado.-Saludos amigos.

MANUALES DE DREAMWEAVER Lo prometido es deuda, as que vamos a realizar diversas tareas ahora en la celda central de

la Tabla que habamos creado, que recordareis est de momento vaca:

Y para ello lo que hago por ejemplo es introducir algo de texto elegido al azar, por ejemplo as:

A continuacin le voy a dar como fondo el amarillo con cdigo FFFFCC (pues no me gusta mucho el gris que tiene), y para ello pico dentro de la celda y luego pico abajo en Propiedades, en el apartado Fnd (color de fondo) y selecciono el amarillo mencionado, quedando as:

Vamos a ver ahora como se puede insertar una imagen por ejemplo, dentro de la misma celda en que estamos trabajando; podramos hacerlo de varias maneras, por ejemplo damos una vez a la tecla <Return> y acto seguido insertamos la imagen que sea, pero la controlaras mal si la quieres colocar por ejemplo centrada, as que una forma mejor sera insertar una nueva fila y dentro de ella realizar la insercin, para ello picamos dentro de la celda como siempre, y vamos a:

Con lo cual nos crear una nueva fila, de esta forma:

Tiene el inconveniente de que nos v a mostrar la lnea blanca que separa una fila de otra (si

tuvisemos el fondo de la fila de blanco, no se vera si vamos con F12 al navegador); te muestro su apariencia en este momento:

Comprendeis?, as que una solucin si no queremos que se vea una lnea de separacin sera esta.-Y la otra solucin sera insertar una tabla dentro de otra , y para verlo (primero anulo lo hecho anteriormente, mediante Edicin-Deshacer tres veces para quitar texto, color de fondo y fila creadas), nos colocamos dentro de la celda donde tengo el texto, y damos May+Return para bajar una sola lnea; ahora vamos a Tabla (ya sabes: seleccionamos: )y

Picaremos ahora sobre " Aceptar", para que quede as:

Ahora lo que har ser decirle que lo que inserte, debe ir alineado al centro, para ello pico dentro de esta tabla recin creada y luego botn derecho y:

Con lo cual el cursor se colocar en el centro.-Ahora voy a insertar una imagen cualquiera de ejemplo (voy a poner un pequeo banner que yo tengo en formato .jpg) y para ello, voy a:

Seguidamente, selecciono la que quiero, la cual tendrs en una carpeta determinada (si no est dentro de una carpeta del sitio por ejemplo Imgeneste obligar a traerla de donde est hasta una carpeta de tu web, as que aceptas y Dreamweaver la cargar all; lgico si ms adelante tendrs que subirla a tu servidor), y al final cuando aceptes ya la tendrs, en mi caso as:

Si vamos ahora a la vista en el navegador con F12, aparecer as:

Si ahora quieres que todo quede ms presentable, ves por ejemplo que esta celda central con fondo amarillo queda algo ms arriba que la del men de la izquierda, y lo suyo sera que ambas queden igualadas, pues nada ms sencillo, picas sobre el borde de la misma, para que aparezca:

Slo tienes que picar sobre el tirador de abajo: poco hacia abajo hasta igualar, lo veo con F12:

y sin soltar, arrastras suavemente un

Y as, juntando las tcnicas que hemos ido viendo hasta ahora, podrs hacer volar tu imaginacin y realizar todas las combinaciones que se te ocurran para ir dando forma a tu web.Tengo que decir que mi web reconozco que es un poco clsica (ser que yo lo soy, por eso siempre digo que una web es el reflejo de su autor), pero de lo que se trata es de saber manejar las herramientas que Dreamweaver MX pone a nuestra disposicin y luego cada uno ser el que tenga que dar sentido a su pgina; pues si una vez conocido el manejo de Dreamweaver, haces uso de las otras buenas herramientas que existen como Flash, o Photoshop para crear unos botones, mens y otros muchos bonitos adornos, pueden quedar webs espectaculares. Nada ms amigos que me segus, lo dejamos aqu y en el prximo captulo veremos ms contenidos, esta vez para la tercera celda que nos queda a la derecha.