Este documento presenta una introducción al programa Dreamweaver de Macromedia, uno de los programas más utilizados para crear páginas web. Explica que Dreamweaver puede ser utilizado tanto por profesionales como por principiantes y ofrece una gran variedad de funcionalidades de forma intuitiva. El objetivo del curso es mostrar las principales características de Dreamweaver para que los estudiantes aprendan a utilizar el programa y crear páginas web.

1. Capítulo: Introducción
El programa Dreamweaver de Macromedia es uno de los programas más utilizados en
todo el mundo para la creación de paginas WEB . Es empleado tanto por profesionales
como por personas que se inician en la creación de su primera pagina web.
De hecho muchos lo consideran ampliamente superior a otros programas similares, tales
como FrontPage de Microsoft . Aquí no vamos a entrar en quien tiene o deja de tener
razón. Lo que si vamos a hacer es tener una primera aproximación a la última versión de
Dreamweaver : la versión 7 de Macromedia Dreamweaver MX 2004.
Mostraremos de una forma fácil y didáctica como sacar provecho de él con unos pocos
clicks y nos pondremos en la senda para poder penetrar mejor en sus secretos. El
objetivo de este curso es mostrar las principales funcionalidades de Dreamweaver , de
manera que cuando acabemos el curso cualquiera sea capaz de comprender el programa
y este capacitado para afrontar la creación de una página Web.
Muchos creen que como Dreamweaver es un programa usado por profesionales, tiene
que ser muy complicado para los usuarios ocasionales. Realmente Dreamweaver es un
programa muy sencillo e intuitivo , que puede ser utilizado a muchos niveles. Desde el
más básico suficiente para crear una pagina personal de un usuario novel, hasta
gestionar todo un "Site" empresarial con un contenido de cientos de paginas
En las próximas lecciones iremos presentando de forma fácil y didáctica, las distintas
funcionalidades del programa. El alumno podrá seguir las lecciones tanto con el texto
como con las lecciones multimedias que se muestran al final de cada lección. El objeto
de estas demostraciones multimedias es reforzar el contenido didáctico de cada lección
mostrando como se hace realmente en el programa.
Capítulo: Iniciar Dreamweaver
El primer paso para utilizar un programa es iniciarlo.
El programa Dreamweaver de Macromedia , al igual que casi todos los programas que
se pueden ejecutar en un entorno Windows puede iniciarse por varios caminos distintos.
Dependiendo tanto de la configuración que hayamos elegido durante su instalación,
como de nuestras preferencias personales.
En esta lección aprenderemos varias de ellas, luego dependerá de sus gustos personales
elegir una u otra de ellas para iniciar la aplicación Dreamweaver.
La forma más sencilla es pulsar con un doble click del ratón sobre el icono de
Dreamweaver situado en el escritorio

2. Otros lugares desde donde podemos iniciar el programa Dreamweaver es desde el
botón de inicio, situado en el esquina inferior izquierda del escritorio.
Cuando pulsemos sobre el se desplegara el menú inicio. Y pulsaremos sobre el icono de
Macromedia Dreamweaver MX 2004
Por último hay un lugar más desde donde podemos iniciar el programa:
Sólo tenemos que pulsar en Todos los programas. Y después en la carpeta
Macromedia

3. Y finalmente en la opción de Macromedia Dreamweaver.
Capítulo: Entorno de Trabajo
El programa Dreamweaver es una aplicación muy completa con un gran numero de
funcionalidades muy potentes, pero a la vez esta diseñada para hacer mas comodo el
trabajo al usuario.
Naturalmente tener una aplicación con un gran numero de funciones implica un gran
numero de botones, menús, opciones y pulsar cientos de clicks, que a primera vista
puede resultar muy complicados ¿Entonces cómo puede Dreamweaver combinar a la
vez potencia y comodidad?
Esto lo hace permitiendo que el usuario personalice a su gusto el entorno de trabajo. En
esta lección vamos a familiarizarnos con las principales áreas de trabajo de
Dreamweaver.
En la imagen inferior vemos señalada la barra de titulo , en ella además de ver el
nombre de la aplicación, el titulo de la pagina que tengamos activa, también veremos
los iconos de gestión de ventanas típicos de Windows
Debajo de la barra de titulo tenemos la barra de Menús , en ella tenemos acceso a
todos los menús, desde los cuales podemos manejar con eficiencia las numerosas
opciones de Dreamweaver

4. Debajo de la barra de Menús, nos encontramos la barra de los grupos de paneles, la cual
es contextual, esto significa que va cambiando dinámicamente según la tarea en la que
estemos trabajando. Mas en adelante la veremos funcionando en detalle.
En el centro de la pantalla nos encontramos con la pantalla de inicio. Este contenido
aparece cuando no tenemos ningun documento activo y podemos distinguir tres zonas
distintas
En la zona de la izquierda: vemos la lista de los documentos usados mas recientemente
y nos da la opción de abrir cualquiera de ellos rápidamente pulsando sobre ellos.
En la zona central: podemos crear un nuevo documento en blanco en cualquiera de los
formatos mostrados.
En la zona de la derecha: Dreamweaver nos permite utilizar unas plantillas de ejemplos
para crear nuestros documentos de una manera rápida y sencilla.
En la izquierda y en la zona inferior de la ventana de dreamweaver tenemos otros
paneles con funciones avanzadas

5. Las cuales iremos descubriendo a lo largo del curso, según los necesitemos, para no
hacer demasiado áridos los primeros temas.
Capítulo: Ventana del Documento
En esta lección y la siguiente vamos a seguir descubriendo las distintas zonas de trabajo
de la aplicación Dreamweaver de Macromedia.
En esta lección nos centramos en los iconos que están relacionados con la ventana del
documento. En la ventana del documento es donde visualizaremos y editaremos la
página web en la que trabajemos.
Aquí tenemos abierto un documento llamado "Untitled-1"
En la imagen superior vemos que la barra del titulo del documento tiene los típicos
controles de minimización, maximización y cerrar ventana. Esto es útil en el caso de
que tengamos abiertos simultáneamente varios documentos.
En la parte inferior de la ventana de Dreamweaver tenemos la barra de estado
En la parte inferior derecha de la barra de estado podemos ver varios indicadores muy
útiles. Con el de la derecha Dreamweaver nos indica el tamaño del documento en
KiloBytes y el tiempo que un navegador estándar tardaría en visualizar completamente
la página con una conexión telefónica a Internet.
A su izquierda Dreamweaver nos indica las dimensiones en pixels de la página que
estamos creando.

6. Podemos elegir entre una lista de tamaños predeterminados. El tamaño optimo depende
de las dimensiones del monitor o pantalla en que se visualice la página. Dado que por
ahora la mayoría de los usuarios de Internet tienen monitores de 800x600 píxeles . Si
diseñamos una página con un tamaño superior provocamos que las personas que nos
visiten visualicen incorrectamente nuestras páginas. Debemos tener muy presente que el
objetivo de nuestra página es que sea vista por el mayor numero posible de personas,
por lo que no debemos poner trabas innecesarias a nuestros visitantes.
Capítulo: Vistas de Edición
En la barra de documentos en la esquina superior derecha vemos tres botones que
modifican la vista de trabajo del documento:
"Codigo", "Dividir" y "Diseño":
Son las tres formas que Dreamweaver nos permite visualizar el documento para su
edición.
En la vista " Código " Dreamweaver nos muestra el código HTML de la página y nos
permite editar directamente las instrucciones con las que el navegador del usuario
mostrará la página.
Mas adelante veremos que significa esto exactamente.
En la vista " Diseño " Dreamweaver nos muestra la página tal como se visualizará en el
navegador del usuario, podemos editarla sin necesidad de conocer el lenguaje HTML.
Por último, la vista " Dividir ", nos muestra simultáneamente el código y la vista de
diseño, de esta manera podemos escribir instrucciones en lenguaje HTML en la página e
instantáneamente comprobaremos como se visualizaría en un navegador.

7. De toda maneras si queremos ver en pantalla completa como se visualizaría la página
podemos pulsar en el icono de previsualización
Y Dreamweaver abrirá una ventana del navegador que tengamos asociado por defecto
y nos mostrara la pagina completa. En la ventana de previsualización podemos detectar
tanto los errores de diseño como los de código, y directamente corregirlos en la
aplicación de Dreamweaver sin tener que grabar y abrir el documento con cada prueba
Capítulo: Abrir un Documento Nuevo
Ya hemos visto las principales zonas de trabajo de Dreamweaver. Ahora, en las
próximas lecciones vamos a aprender las operaciones básicas de manejo de documentos
tales como crear un nuevo documento, grabarlo para poder recuperarlo en el futuro,
abrir documentos almacenados...
El primer paso es abrir un documento nuevo. En la Lección 3 de este curso de
dreamwaever aprendimos una forma de crear documentos nuevos.
Ahora vamos a ver otra forma de crear nuevos documentos .
Para ello debemos ir a la barra de menús . Y pulsar en el menú Archivo
En el menú que se desplegara, buscaremos la opción Nuevo y pincharemos en ella con
el botón izquierdo del ratón
Se nos abrirá una ventana como la que vemos en la imagen inferior. En ella podremos
elegir entre diversos tipos de documentos, el que deseemos crear.
Nosotros pulsaremos en la pestaña General y en el panel de la izquierda llamado
categoría elegiremos "Página básica". El panel de adyacente cambiara de manera
contextual dependiendo que opción hayamos elegido en el panel de categorías. Como
por ahora hemos elegido página básica. Este será el titulo del panel y entre las distintas
opciones pulsaremos sobre HTML.

8. Vemos que hay una gran variedad de documentos que podemos crear desde aquí. Más
adelante veremos algunos de ellos, a medida que los necesitemos.
Capítulo: Guardar un Documento
Una vez que hemos aprendido a crear documentos nuevos, cuando hayamos terminado
de trabajar con ellos, necesitaremos aprender a guardarlos para poder recuperarlos en el
futuro.
Para ello desplegaremos de nuevo el menú archivo y buscaremos esta vez la opción
guardar.
Al pulsar sobre la opción guardar se nos abrirá una ventana titulada "Guardar como". En
ella vemos varias zonas importantes.
En la zona superior podemos elegir la carpeta donde queramos guardarlo, es donde pone
"Guardar en".

9. Y en la zona inferior introduciremos el nombre con el que deseamos conservar el
documento.
Para finalizar sólo tenemos que pulsar el botón guardar en la ventana activa.
En esta lección hemos aprendido otra manera de crear documentos nuevos con
dreamweaver y también hemos aprendido a guardarlos.
Capítulo: Recuperar un Documento
En la lección anterior aprendimos a guardar documentos creados con dreamweaver. En
esta lección aprenderemos a recuperarlos para poder trabajar con ellos.
El primer paso es ir al menú archivo, pulsaremos sobre el con el botón izquierdo del
ratón. Y en el menú que se desplegará buscaremos la opción abrir.
Una vez que hayamos pulsado sobre la opción abrir del menú archivo. Aparecerá una
ventana de dialogo como la que vemos en la ventana inferior. Es un cuadro de dialogo
muy semejante al que ya conocimos cuando guardamos el documento
En la zona superior podemos navegar por las distintas carpetas hasta encontrar el lugar
donde tenemos almacenado el documento.
Cuando hayamos encontrado la carpeta solo tendremos que elegir de entre la lista
mostrada el titulo del documento que deseemos abrir y pulsaremos sobre el con el botón
izquierdo del ratón.

10. Capítulo: Cerrar un Documento
Una vez que hemos aprendido a crear un documento, a guardarlo y a recuperarlo.
Vamos a aprender ahora a cerrar el documento. Esto lo haremos cuando hayamos
acabado de trabajar con el documento en cuestión, bien porque ya no lo necesitemos
mas, o por que tengamos muchos documentos abiertos y necesitemos despejar un poco
el área de trabajo.
Para ello iremos otra vez al menú archivo, tal como ya sabemos. Y allí pulsaremos en la
opción cerrar. Tal como vemos en la imagen inferior
Y ahora, en el caso de que hayamos modificado el documento, vemos que nos aparece
un cuadro de dialogo como el que vemos en la siguiente imagen.
En este cuadro nos pregunta, en el caso de que hayamos modificado algo desde la
ultima vez que grabamos el documento, si queremos guardar los cambios en el
documento en el que hemos estado trabajando.
Si pulsamos no, todos los cambios realizados desde la ultima grabación serán
descartados. Esto es util en el caso de que no nos guste nuestra pagina y prefiramos una
versión anterior de ella, esto es algo que suele pasar mas a menudo de lo que nos gusta
reconocer.
O bien, si pulsamos sí. Se guardaran los cambios realizados sobre el documento.
Pero, atención, es posible que hayamos cometido un error y hayamos pulsado el botón
si, de manera mecánica.

11. Dreamweaver nos da una ultima oportunidad para meditarlo y nos muestra otra ventana
de dialogo como la inferior.
Por ultimo, una vez que hayamos guardado, o no, los cambios sobre la pagina solo nos
queda salir del programa. Y para ello volveremos al menú archivo.
Buscaremos en el final del menú y pulsaremos sobre la opción "Salir"
Una vez que pulsemos aquí, el programa de dreamweaver se cerrara y nos mostrara el
escritorio.
Para recordar como abrir de nuevo el programa ver la lección 2.
Capítulo: El Sitio
Introducción a la configuración de "El Sitio":

12. Ya hemos tenido nuestro primer contacto con el entorno Dreamweaver .
Hemos aprendido cuales son las diferentes partes de la ventana de trabajo de
Dreamweaver y a movernos entre ellas. También hemos aprendido las funciones más
básicas, tales como crear una página nueva, guardarla, cerrarla y como recuperarla.
Pero no debemos olvidar una cosa, hasta ahora sólo hemos creado una página web en
blanco. Pero las "páginas de verdad" tienen contenido y este contenido puede formarse
con diversos documentos que puede ser desde otras páginas html, imágenes, scripts,
animaciones, hasta cualquier tipo de objeto que podamos vincular en una página html.
El conjunto de todos estos documentos que forman parte de la página se llama en el
lenguaje de las páginas web un "Sitio", "site" en ingles.
En esta lección, y las siguientes, vamos a aprender a diseñar un Sitio para albergar
nuestras páginas y sus elementos, de una forma sencilla y didáctica.
Ahora que sabemos lo que es un Sitio vamos a configurarlo paso a paso.
Todas las opciones de configuración están en el menú Sitio de la barra de menús.
Pulsando sobre el menú Sitio, se despliega el menú. Para configurarlo por primera vez
pulsaremos en la opción Administrar sitios
Dreamweaver abrirá una ventana de dialogo con todas las opciones para administrar el
sitio. Como aun no tenemos creado ninguno, pulsaremos en el botón Nuevo.
Y Dreamweaver nos preguntará que es lo que queremos crear exactamente ¿un Sitio o
un Servidor FTP y RDS?. Por ahora sólo vamos a crear un Sitio
En la próxima lección continuaremos con la creación del sitio

13. Capítulo: Configurar un Sitio Nuevo
LECCIÓN 11ª
Configurar un Sitio Nuevo
En la lección anterior comenzamos a configurar un Sitio nuevo, ahora vamos a
continuar
Acabamos la lección anterior confirmando en la ventana de dialogo que queríamos crear
un nuevo Sitio. Pulsaremos sobre la opción sitio
Veremos que se abre otra ventana de dialogo, ahora iremos contestando a las preguntas
que nos va haciendo Dreamweaver y pulsaremos el botón siguiente después de rellenar
cada ventana con las respuestas que nos pide.
La primera cuestión que Dreamweaver nos plantea es el nombre del sitio. Es muy util
que el nombre tenga una fuerte relación con el contenido de la página para poder
recordarlo fácilmente
La respuesta a la siguiente pregunta dependerá de la tecnología con la que deseemos
trabajar. Ya dijimos antes que una página web puede enlazar documentos de muy
diferentes tipos, algunos de ellos son utilizados para intercambiar información con el
servidor. En esta opción elegimos el tipo documento dependiendo de las características
del servidor con el que trabajaremos.
Para este curso no vamos a utilizar las tecnologías de servidor, asi que elegiremos la
opción "No"
La cuestión de abajo se interesa en la forma en como subiremos las páginas que
creemos al sitio de Internet. Por ahora no vamos a preocuparnos de esto y por lo tanto
elegiremos la opción Ninguno.

14. Y con esto hemos acabado de proporcionarle a Dreamweaver la información necesaria
para configurar nuestro sitio.
Capítulo: Editar un Sitio
En las lecciones anteriores ayudamos a Dreamweaver a configurar nuestro sitio. En esta
lección vamos a personalizar un poco más nuestro sitio para adecuarlo a nuestras
necesidades de trabajo.
Para ello volvemos a la ventana de dialogo "Administrar sitios"
Y esa vez, como ya tenemos creado el sitio "CursoDreamweaver " pulsaremos el botón
Editar.
Y en la ventana de dialogo. Pulsaremos en la pestaña "Avanzadas". Y en el menú
"categoría" pulsaremos la opción "Datos locales"

15. En la sección "Datos locales" podemos cambiar y ajustar los valores del sitio, tales
como "Nombre del sitio", que ya conocemos. Y la "Carpeta raíz local", esto significa
que podemos designar manualmente la carpeta donde deseemos situar las páginas que
creemos y los documentos vinculados a ella.
Con la opción "Actualizar lisa archivos" nos aseguramos que cuando modifiquemos un
archivo se actualice automáticamente las carpetas locales durante las copias.
Por último con la opción "carpeta predeterminada de imágenes" le diremos a
Dreamweaver donde situaremos agrupadas todas las imágenes con las que trabajemos,
esto es muy útil para no tener múltiples rutas lo que nos evitan posteriormente muchos
errores de vinculación.
Por último, en las opciones de la imagen inferior, configuramos la dirección http de
nuestro sitio, con lo que Dreamweaver detecta y distingue automáticamente las
direcciones www de páginas internas a nuestro sitio, con lo que se ahorran tiempo al
navegar.
Con la opción caché, Dreamweaver , actualiza y gestiona todos los cambios de las
páginas y sus enlaces interiores automáticamente, por ejemplo si cambiamos una
imagen no tenemos que ir modificando una a una todas las páginas.

16. Capítulo: Opciones Adminisitrar Sitios
Ya hemos aprendido a configurar el sitio, ahora veremos rápidamente el resto de las
opciones de la ventana de dialogo "Administrar sitios". Que nos ayudaran a gestionar
más fácilmente nuestro sitio.
Las opciones nuevo y editar, ya las conocemos, por lo que no nos reiteramos más en el
tema.
Las siguientes opciones son Duplicar, Quitar y Exportar.
Con duplicar conseguimos crear un duplicado del sitio que tenemos activo, con ello
logramos duplicar totalmente la estructura del sitio. Es muy útil para crear duplicados
perfectos del sitio en otros servidores, sobre todo si tenemos utilizarlo como plantilla de
la estructura.
Cuando tengamos un numero importante de sitios, algunos de ellos estarán obsoletos o
simplemente no los necesitaremos más, podemos eliminarlos pulsando el botón Quitar.

17. La opción Exportar nos permite guardar las características del sitio en un archivo XML,
de forma que con un sólo archivo podemos guardar, recuperar, e incluso compartir con
otras personas las características del sitio fácilmente
Las últimas opciones son Importar, Ayuda y Listo.
Importar es la opción complementaria de Exportar, con ella podemos crear un nuevo
sitio a partir de las características de otros sitio exportado.
La opción ayuda, se explica en si misma.
Cuando hayamos terminado de administrar el sito, simplemente pulsaremos el botón
"Listo" y todos nuestros cambios serán actualizados.
Capítulo: El Texto
En esta lección y las próximas crearemos, de verdad, nuestra primera página web. Al
principio será sólo una página con texto e iremos descubriendo las distintas
funcionalidades de Dreamweaver , respecto al formato de los textos.
Para comenzar, necesitamos crear una página nueva y darle un buen titulo. Como ya
hemos visto esto en lecciones anteriores iremos directo al grano. Pero en la animación
de abajo podemos ver todos los pasos desde cero.

18. Una vez que hayamos creado la página y le hayamos dado el titulo, escribiremos en la
vista de diseño el texto normalmente, ya nos preocuparemos después por los formatos.
Una vez que hemos escrito el texto de nuestra primera página , pulsaremos en el grupo
de paneles insertar
Y de entre las opciones podemos elegir el tipo de panel insertar que vamos a tener
activo. Este dependerá de la acción que vayamos a realizar.
En común tenemos las opciones más habituales, sin embargo las demás están
especializadas en algún tipo determinado de acción.
Por ejemplo nosotros vamos a trabajar con el texto, por lo que pulsaremos en la opción
texto.
En el caso de que queramos tener acceso a todos los paneles de forma rápida
pulsaremos la opción "Mostrar como fichas"

19. Capítulo: Formateando Textos
En la lección anterior aprendimos que escribir en nuestra página web era tan fácil como
simplemente teclear en la vista de diseño.
En esta lección y las siguientes veremos que en Dreamweaver además de añadir texto
fácilmente, podemos darle formato y aplicarle un gran numero de efectos que ayudaran
a realzar nuestra página web.
Acabamos la lección anterior activando la opcion Texto en la barra de los grupos de
paneles insertar. En la imagen inferior vemos como aparece la ventana de trabajo.
Darle formato a un texto es tan sencillo como seleccionar la zona que deseamos y
buscar en los iconos de la pestaña texto, el efecto que deseemos aplicarle.
En este caso, al primer párrafo de nuestro documento vamos a darle una apariencia de
Encabezado1, para ello pulsamos h1.
Al segundo párrafo le daremos un formato de Encabezado2, pulsando h2

20. Y al tercer párrafo le daremos formato de Encabezado 3.
En la barra texto, vemos otros iconos con distintos formatos. Por ejemplo, pulsando el
icono B, resaltamos el texto seleccionado, con I, le damos al texto seleccionado énfasis
un formato inclinado como el de la letra italica de los procesadores de textos.
Sin embargo, En el lenguaje HTML, existen sus propias formas de resaltar y dar énfasis,
de hecho se hace pulsando en los iconos "S", que viene de la palabra "Strong" en ingles
y el icono "em" que viene de la palabra Emphasis. Estos dos efectos son virtualmente
iguales a "B" e "I", aunque puede que cada navegador le de una pequeña variación al
aspecto de uno u otro.
Capítulo: El Panel de Propiedades
Ya hemos tenido un primer acercamiento a la barra texto del grupo de paneles insertar.
Ahora vamos a ver como puede el panel "propiedades" ayudarnos a mejorar el aspecto
de nuestro textos

21. En la imagen inferior tenemos una vista general del panel.
Desde el panel propiedades podemos, tras seleccionar una línea o párrafo, aplicarle por
ejemplo un formato "centrado", simplemente pulsando en el icono de la imagen
Podemos combinar en una misma página varios tipos de alineamiento, por ejemplo
podemos darle al segundo párrafo un alineamiento ajustado y mantener al mismo
tiempo el centrado del primer párrafo.
Vamos a probar, ahora, el alineamiento derecho en el tercer párrafo.

22. Por último, podemos aplicarle a todo un párrafo una sangría. Tal como vemos en la
imagen inferior
Capítulo: Formatos en el Panel de Propiedades
En la zona izquierda del panel de propiedades, tenemos unas opciones que aun no
conocemos y que vamos a ver en esta lección.
Estas son las propiedades, "Formato", "Fuente", "Estilo", "Tamaño", "Color"
Vamos a verla poco a poco. La primera opción "Formato" nos permite cambiar el
formato del párrafo, por defecto los párrafos no tienen formato, pero podemos elegir
uno de la lista.

23. Según el que elijamos nuestro párrafo tendrá una apariencia u otra. En la lección
anterior vimos los formatos de encabezado 1 a 3, aquí tenemos más opciones para
aplicar.
En la opción fuente podemos predeterminar que juego de fuente será visible por el
usuario, esta opción es muy útil, en el caso de que el usuario no tenga instalada la fuente
elegida por nosotros para nuestra página , podemos establecer con esta instrucción un
juego de fuentes suplentes.
La opción estilo hace referencia a una funcionalidad avanzadas de un formato de
páginas llamado CSS, por ahora no lo vamos a ver. Basta saber que existe y que
controla la forma en que escribimos las instrucciones para el navegador
En la opción tamaño, elegimos el tamaño de la fuente, si estamos acostumbrados a usar
procesadores de textos. podemos sorprendernos que a parte del tamaño por punto, al que
podemos estar acostumbrados, vemos también tamaño "pequeño" o "mayor", por
ejemplo.
Esto se explica porque los navegadores permiten al usuario elegir el tamaño de
visualización de la letra, y si el usuario cambia el tamaño, puede perderse el efecto
deseado. Con los tamaños "relativos", podemos conservar el efecto visual del texto
aunque el usuario cambie estos valores en su navegador

24. Por último podemos utilizar colores para dar más vistosidad a nuestros textos, sólo
tenemos que marcar el texto que queramos colorear y elegir un color de la tabla
Más adelante veremos como podemos sacarle más partido al color en nuestras páginas
web.
Capítulo: Las Listas
Cuando estamos creamos una página web nos encontraremos, muchas veces, con que
deseamos dar a nuestros un textos un aspecto más ordenado. En un editor de textos
utilizaríamos las listas.
Dreamweaver también nos permite crear listas para hacer más atractivos nuestras
páginas.
Una de las formas de crear listas con Dreamweaver es activar la barra Texto, para ello
pulsaremos, tal como vemos en la imagen inferior, en el botón "Común"

25. Dream00051
Y en el panel que se despliega seleccionáremos la opción Texto.
Ya hemos visto anteriormente algunas de las funcionalidades del panel texto, ahora
vamos a continuar explorándolo con las funciones de listas.
Pulsaremos el botón "ul". Con este botón activamos la opción "Listas simples o no
ordenadas"
¿Qué es una lista simple? La mejor de forma de verlo es a través un ejemplo.

26. Si seleccionamos la lista simple, la línea donde tengamos activo el cursor de texto será
el comienzo de una lista. Cuando pulsemos la tecla enter, Dreamweaver convertirá el
texto introducido en esa línea en una entrada de la lista y prepara la siguiente línea como
otro elemento de la lista.
Para terminar de introducir elementos en la lista sólo tenemos que pulsar la tecla enter
dos veces seguidas y ya podremos continuar escribiendo normalmente
Capítulo: Dar Formato a las Listas
En esta lección y la próxima vamos a ver como aplicar formato también a las listas.
Podemos acceder a las opciones de formato desde el panel propiedades, en la parte
inferior de la ventana de Dreamweaver .
Para dar formato el primer paso, es siempre marcar el texto al que deseemos aplicarle el
formato. Una vez que lo hayamos marcado deberos buscar en el panel propiedades el
icono del formato que deseemos aplicarle.
Atención, en lecciones anteriores vimos que podíamos aplicarle formato a todo un
párrafo simplemente situando el cursor en cualquier punto del párrafo. Pero si queremos
aplicar formato a las listas deberemos marcar toda la lista, y no sólo un elemento.

27. Esto es debido a que Dreamweaver nos permite aplicar formatos diferenciados a cada
elemento de la lista, en el ejemplo de la imagen inferior vemos como hemos resaltado
sólo uno de los cuatro elementos de la lista, pulsando el icono "B"
Dreamweaver nos permite combinar de forma sencilla distintos formatos sobre el
mismo elemento.
Por ejemplo en la imagen inferior hemos combinado el resaltado con el efecto "Itálica"

28. En próximas lecciones continuaremos explorando los efectos que podemos aplicar a las
listas.
Capítulo: Las Listas Ordenadas
Vamos a dejar por un momento los formatos de las listas y en esta lección
aprenderemos otro tipo de listas.
Las listas ordenadas, en contra de lo que pudiera parecer a primera vista, no se llaman
así porque ordenen nuestras listas alfabéticamente o por cualquier otro criterio.
Una lista ordenada se diferencia de las demás, porque a cada elemento antecede un
número en orden creciente.

29. En Dreamweaver podemos crear una lista ordenada, tanto pulsando en el icono de "lista
ordenada" del panel propiedades, o en el icono "ol" de la barra texto, en el grupo de
paneles insertar
El funcionamiento para añadir elementos de las listas o cerrar la lista es idéntico al que
hemos visto en la lección de las listas desordenadas.
También podemos añadir elementos a una lista pulsando en el icono "li" , tal como
vemos en la imagen inferior
Finalmente este es el aspecto de nuestra lista ordenada.
En esta lección hemos visto que son y como crear listas ordenadas. En la lección
próxima continuaremos aplicando formatos a las listas.

30. Capítulo: El Formato para Listas Ordenadas
En esta lección vamos a continuar descubriendo los formatos que podemos aplicar a las
listas.
Seguimos investigando las opciones disponibles en el panel de propiedades, esta vez en
la zona de la derecha.
Empezaremos con la opción formato, si pulsamos sobre la pestaña, vemos que se
despliega un menú con gran número de opciones, algunas de ellas ya las conocemos de
la barra texto del panel insertar. Por ejemplo encabezado 1, 2 y 3.
Pero en la imagen de abajo vemos que en el menú formato, tenemos muchas más
opciones. Pulsando en cada una de ellas aplicamos al párrafo un formato de tamaño y
estilo distinto.
Hablando de Estilo, a la derecha de la opción formato, nos encontramos con la opción
estilo. Esta opción es algo engañosa, ya que con estilo no se refiere al texto, sino al
estilo de la página web.
Esta opción es muy útil en el caso de que estemos utilizando tecnologías CSS, pero esto
pertenece a un nivel muy superior a los objetivos de este curso. Baste saber por ahora
que al igual que el mundo real, hay distintos tipos de leguajes en el que se pueden crear
las páginas webs. Algunos de ellos son el lenguaje Html, el lenguaje Xml, o el CSS,
entre otros muchos.
El objetivo de este curso es aprender el uso de la aplicación Dreamweaver de
Macromedia, por lo que de los distintos tipos de lenguajes sólo tenemos que saber lo
necesario para convencernos de que Dreamweaver nos permite hacer casi de todo sin
tener que programar una sola línea en ningún lenguaje web.

31. Siguiendo con los formatos, tenemos la opción "Fuente". Esta opción también puede
confundirnos. No se refiere a la fuente que vamos a aplicar directamente al texto, si no a
las fuentes predeterminadas y en el orden que el navegador del usuario intentará
aplicarlas a nuestra lista en el caso de que no encuentre en su memoria las fuentes con
que nosotros hemos creado la lista.
Como novedad podemos comprobar que además de los tamaños numéricos, al que
debemos estar acostumbrados, también nos encontramos con otros tamaños "pre-
establecidos" Small o médium o large (pequeño, mediano, grande).
Estos tamaños tienen su razón de ser en los navegadores permiten a los usuarios
cambiar, con sólo un clic, el tamaño de visualización de los textos. Con estas opciones
podemos tener un control mayor sobre la forma en que nuestros textos se mostraran con
independencia del tamaño que haya elegido el usuario para visualizarlos
Por último, podemos también realzar nuestras listas modificando el color del texto, ya
sea de un único elemento de la lista, o de toda ella.
En el panel de color, podemos elegir una gran variedad de modos de asignar color,
podemos pulsar uno predefinido de la tabla mostrada, o podemos situar la pipeta sobre
cualquier color de la pantalla y "capturarlo" para nuestra lista.

32. También podemos elegir las opciones de colores avanzadas, aunque es posible que
dependiendo del navegador del usuario y las características de su tarjeta grafica los
colores no se muestren exactamente como nosotros deseamos.
Capítulo: Los Elementos de las Listas
Ya hemos visto como crear listas ordenadas y listas desordenadas.
En esta lección vamos a profundizar en el motivo de su existencia, los elementos de las
listas.
Para ello pulsaremos en el botón "elemento de la lista", que está en el panel de
propiedades.
Dreamweaver, nos mostrará una ventana de diálogo llamada "propiedades de lista".
En la primera opción, tenemos "Tipos de lista", con esta opción podemos elegir como
mostraremos la lista. Podemos, entre otros modelos, crear listas numéricas, o listas en
las que cada elemento sea mostrado precedido por un punto...

33. También podemos, pulsando en la opción estilo, elegir el estilo numérico para nuestra
lista. Por ejemplo, podemos querer mostrar una lista numérica normal, o quizás
queramos que nuestros elementos sean mostrados con una lista de número romanos, o
puede que queramos una lista alfabética...
Dreamweaver nos permite también elegir el número con que comenzará nuestra lista.
Podemos no querer comenzar por el uno, o quizás deseemos continuar la numeración de
una lista anterior

34. Por último podemos cambiar el estilo de algún elemento concreto de la lista,
simplemente pulsando en la opción "elemento de la lista", y configurarlo según nuestras
necesidades
Capítulo: Las Listas de Definición
Ya hemos visto las listar ordenadas y las listas desordenadas. Aun nos queda un último
tipo de listas, las listas de definición.
¿Qué son las listas de definición?. Fácil. Una lista donde sus elementos son
definiciones. ¿No ha quedado suficientemente claro?
Vamos a verlo con un ejemplo.
En la imagen inferior vemos una lista de definición, debajo de cada elemento
(Dreamweaver y Explorer) tenemos otro elemento en una línea con sangría que define
el elemento anterior.
Estoes una lista de definición.
Activar una lista de definición es muy sencillo, simplemente tenemos que situar el
cursor en el punto donde queramos insertarla y pulsar en el botón "dl" de la barra texto,
del panel insertar.

35. Para crear un elemento nuevo, podemos hacerlo como ya hemos visto en las listas
anteriores, o bien pulsando en el icono "dd"
Vamos a explicar un poco más detalladamente cual es la función de cada icono.
"Dl" significa declaración de la lista, es el icono que pulsamos para crear una lista de
definición nueva.
El icono "dt", significa "término de definición", es la palabra que pretendemos definir.
En el ejemplo, es "Dreamweaver" y "Explorer".
El botón "dd" es la definición del término, es la definición de cada uno de los términos.

36. Con esta lección hemos acabado de tratar el tema de las listas en Dreamweaver, no lo he
dicho explícitamente, pero todo lo mostrado en lecciones anteriores respecto a los
formatos de listas es también aplicable a las listas de definición.
Capítulo: Las Tablas
En esta lección y las siguientes vamos a ver el uso que Dreamweaver le da a las tablas.
Este no es un tema sin insignificante. Las tablas tienen muchísima importancia en lo que
se refiere al diseño de páginas web. Es el esqueleto sobre el que las páginas se
construyen. Pero eso lo veremos en el transcurso de las próximas lecciones.
En esta lección vamos a ir paso a paso y crearemos una tabla normal como las que
podemos crear en cualquier procesador de textos.
Podemos crear una tabla fácilmente, pulsando en el icono Tabla, de la barra común, del
panel insertar, tal como vemos en la imagen inferior.
Dream00055
Cuando pulsamos sobre el icono, Dreamweaver abre una ventana de diálogo como la
que vemos abajo.
En ella nos pide que definamos la forma y características de la tabla que estamos
creando
Simplemente tenemos que introducir un valor en la celda filas y otro en la celda
columnas para definir el tamaño de la tabla, por ejemplo si introducimos 4 y 3

37. respectivamente, nuestra tabla tendrá 12 celdas, distribuidas en un rectángulo de 4
celdas de alto y 3 celdas de ancho.
Si cambiamos el valor columna 3 por un 5, la tabla tendrá ahora 20 celdas, distribuidas
en un rectángulo de 4 celdas de alto por 5 de ancho.
Desde aquí podemos cambiar también el ancho de la tabla, nuestra tabla tiene ahora 300
píxeles. ¿Qué significa esto? Pues los píxeles son una unidad de medida de las pantallas
de televisión y monitores, un píxel es el punto más minúsculo que luz que una pantalla
puede manejar.
Esto está en relación directa con la configuración de pantalla de nuestro monitor, por
ejemplo si tenemos una resolución 800x600, este es el limite máximo de tamaño que
puede mostrar.
En las primeras lecciones vimos que Dreamweaver nos aconsejaba que configuráramos
los parámetros de nuestra página según las necesidades de nuestros potenciales
usuarios. Estos parámetros van a marcar el limite de la cantidad máximas de píxeles que
nuestra página podrá mostrar de una forma cómoda.
En la imagen superior vemos que Dreamweaver nos permite crear con un sólo clic
diferentes tipos de encabezados. Esto es una forma muy sencilla de dar una apariencia
más estética a nuestras tablas.
En la parte final del cuadro de diálogo, podemos mejorar la accesibilidad de nuestra
tabla, esto significa que podemos escribir un texto que se visualizara en el caso de que
la tabla no haya podido ser mostrada en el navegador del usuario, ya sea por problema
de la red o por carencias del navegado.

38. Ya que este texto se mostrara como sustituto de la tabla, es importante que cuidemos el
aspecto estético de la página cuando esto ocurra. En alinear texto, podemos elegir la
posición en que se mostrara el texto
Capítulo: Crear Tablas
En esta lección continuaremos aprendiendo a crear nuestra tabla.
En la lección anterior habíamos creado una tabla de 5 columnas, por 4 filas y de un
tamaño de 300 píxeles, y con un texto descriptivo llamado "Ejemplo tabla".
En la imagen inferior vemos como Dreamweaver nos muestra todos estos elementos en
la vista de diseño para que podamos trabajar con ellos. Esto es tal como lo vemos
nosotros mientras trabajos con ello, cuando el usuario visualice la página sólo verá la
tabla y su contenido, no todas estas ayudas.
Dream00060

39. Una de las potencias de crear páginas web con Dreamweaver en la vista de diseño es
que no hace falta saber nada acerca de programación para manejar toda su potencia.
Por ejemplo, si queremos redimensionar la tabla, tradicionalmente, tendríamos que
haber ido al código de la página y haber tenido que teclear las nuevas dimensiones con
cuidado de no descuadrar toda la página.
Sin embargo con Dreamweaver, sólo tenemos que pinchar con el ratón sobre un lateral
de la tabla y arrastrarla hasta la nueva posición.
Dream00061
Todas las celdas y las medidas de la tabla quedan automáticamente redimensionadas de
forma uniforme para adecuarse correctamente al nuevo tamaño de la tabla
Dream00062
Una vez que tenemos las medidas que deseamos para nuestra tabla sólo tenemos que
introducir el texto dentro de cada celda.
En nuestro ejemplo vamos a crear una especie de planning.

40. Dream00063
Para introducir el texto en cada celda sólo tenemos que pulsar con el ratón en el interior
de cada celda y escribir el texto. Para validarlo podemos, o pulsar en otra celda, o pulsar
la tecla enter.
Dream00064
Así hemos creado nuestra primera tabla. En la próxima lección aprenderemos más cosas
sobre ella, en especial las posibilidades de formato que Dreamweaver nos proporciona
Capítulo: Filas y Columnas
En la lección anterior, creamos nuestra primera tabla, ahora vamos a ver como
Dreamweaver nos facilita el trabajar con ellas.
Empezaremos pulsando con el botón derecho del ratón sobre cualquier celda activa de
la tabla.
Vemos como nos aparece el siguiente menú, y pulsaremos la opción Tabla.

41. Al lado del menú, se despliega otro menú. Con numerosas opciones, tales como
seleccionar tabla, que nos sirve para aplicar un efecto a toda la tabla, o combinar celdas,
para unir varias celdas en una....
Pero ahora vamos a detenernos un instante en el apartado insertar. Vemos varias
opciones, como por ejemplo insertar fila, que nos añade una fila a la tabla, así podemos
convertir fácilmente una tabla de 5 días en una de seis, con sólo un clic
En la imagen inferior vemos como a nuestra tabla le ha "crecido" una fila justo entre
Lunes y Miércoles. Podemos añadir tantas filas y/o columnas como deseemos.

42. Pero. ¿Que pasa si por error hemos añadido demasiadas?. No es problema,
Dreamweaver hace fácil, tanto insertar como eliminar, simplemente tenemos que pulsar
sobre la fila o columna a eliminar con el botón derecho y buscar en el menú la opción
eliminar.. Una pista, está justo debajo de las opciones insertar.
Y aquí tenemos nuestra tabla, después de haber añadido y eliminado filas
despreocupadamente.
Capítulo: Panel de Propiedades de las Tablas
En esta lección vamos a ver como podemos obtener un acabado más profesional cuando
trabajamos con tablas. Y esto lo haremos con la ayuda del panel propiedades.

43. El primer paso es seleccionar la tabla tal como vemos en la imagen inferior,
simplemente tendremos que situar el cursor en la esquina de la tabla hasta que aparezca
un puntero como el de la imagen y pulsaremos para marcar la selección.
Seguidamente desplegaremos el panel propiedades, tal como ya sabemos, pero esta vez
podemos llevarnos una sorpresa, el panel no es tal como lo recordábamos, ha cambiado.
Ahora las opciones hacen referencia a las propiedades de la tabla. Esta es una de las
ventajas de Dreamweaver, para ahorrarnos clics, el programa cambia sus paneles y
menús de forma contextual según la tarea que tengamos activa en cada momento
En la imagen superior vemos las características de una tabla por defecto, vemos que
tiene 3 filas, 3 columnas, y que sus dimensiones son 533 píxeles de ancho por 118
píxeles de alto, que el borde de la tabla tiene grosor 1, y que el alineamiento es el activo
por defecto.
Sin embargo, abajo vemos las características de nuestra tabla. Vemos que algunos
valores han cambiado, por ejemplo tenemos 4 filas y 5 columnas, y además nuestra
tabla ya tiene puesto el nombre que nos servirá para identificarla

44. Vamos a ver el resto de las opciones, en la imagen inferior hemos cambiado las
dimensiones de nuestra tabla, simplemente introduciendo nuevos valores en las casillas
alto, 100, y ancho, 400 píxeles. Hemos cambiado la alineación de la tabla a la derecha y
hemos engordado un punto los bordes de la tabla.
En la lección siguiente seguiremos viendo las sorpresas que tiene guardas el panel de
propiedades
Capítulo: Propiedades de las Tablas
En esta lección continuaremos descubriendo el panel propiedades para las tablas.

45. En la zona inferior del panel podemos cambiar fácilmente los colores tanto del fondo de
la tabla como el color del borde de la tabla.
Por ejemplo, en la imagen inferior vemos el resultado de aplicarle a nuestra tabla los
colores verde para el fondo y azul para el borde de la tabla. Como conclusión de este
ejercicio podemos asegurar que la combinación de estos dos colores perjudican
seriamente la salud de la vista.
Dreamweaver nos permite también definir el espacio entre las celdas y la separación del
texto con respecto las paredes de la celda que los contiene, esto los conseguimos
dándoles valores a las casillas "CellPad" y "CellSpace"

46. En las lecciones anteriores vimos como se podía asignar a la tabla un valor de longitud
y altura con una medida concreta en píxeles. Esto es fantástico para controlar las
dimensiones de visualización de la tabla, pero en ciertas ocasiones, es mejor tener que
nuestra tabla se adapte a las dimensiones de la pantalla en que se visualiza, por ejemplo
si queremos que la tabla ocupe la mitad derecha de la pantalla, el resultado es muy
desigual si la página se muestra en un monitor de una resolución de 800 o en uno de
1024.
Para solucionarlo, Dreamweaver nos permite con un sólo clic cambiar la medida de
nuestra tabla de píxeles a porcentajes. Es decir podemos decir que nuestra tabla ocupe el
50% de la pantalla, sin importar las dimensiones del monitor donde se visualice.
Capítulo: Las Plantillas
En las lecciones anteriores hemos aprendido a crear tablas y los rudimentos su formato.
Sin embargo, podemos ir más allá, para darle a nuestras tablas un aspecto más
sofisticado de forma fácil y sencilla.
Dreamweaver tiene una poderosa herramienta llamada "plantillas" que nos ayudara en
esta tarea. Para utilizarla simplemente tenemos que ir a la barra de menús de
Dreamweaver y pulsar sobre, el menú "Comandos", tal como se ve en la imagen
inferior.
En el menú desplegable que se abrirá pulsaremos sobre "Formatear tablas".

47. Y Dreamweaver nos abrirá una ventana de diálogo llamado "Formatear Tabla". En esta
ventana de diálogo tenemos una gran cantidad de opciones, que para no abrumarnos
vamos a ir viendo poco a poco.
En la parte superior, tenemos 3 zonas, la izquierda es una menú deslizante en el que
pulsando sobre cada una de las entradas, podemos ver en la parte central del cuadro de
diálogo un ejemplo de la plantilla elegida..
Para elegir una plantilla sólo tenemos que pulsar sobre la opción deseada, veremos un
ejemplo del formato en la parte central
Y cuando estemos conforme con la elección pulsaremos en los botones aplicar y aceptar
de la zona de la derecha de la venta,

48. En la imagen inferior vemos como queda el formato de plantilla elegido sobre la tabla
que habíamos diseñado en la lección anterior. Observa que lo "único" que ha cambiado
es el formato de la tabla, ni el contenido, ni sus dimensiones.
Nuestra tabla tiene ahora los colores y la estética de la tabla de la plantilla, pero
Dreamweaver respeta la forma en que nosotros hemos incrustado la tabla en nuestra
página.
Capítulo: Formatear tablas
En esta lección vamos a continuar explorando las plantillas para formatear tablas.
Siempre es una buena idea, perderle el miedo al ordenador, y decidirse a investigar las
opciones que los menús nos ofrecen.

49. Curioseando, por ejemplo, podemos descubrir lo bonito que combinan los colores
magenta y azul en una tabla Dreamweaver...
Aunque puede que no nos convenza las combinaciones de colores prediseñadas y
decidamos crear nuestra propia combinación de colores simplemente pulsando en las
casillas de colores de filas y eligiendo un color primario y un color secundario
Los alumnos más observadores ya se habrán dado cuenta de que cada vez que elegimos
un color tiene un número hexadecimal asociado, Este es un número universal de
identificación para cada color. Con este número podemos estar seguros de que hemos
elegido el mismo color exactamente
Sin embargo, si no conocemos el número hexadecimal, siempre podemos pulsar en el
botón color, para desplegar la tabla de colores y elegir en ella el que deseemos
Por ejemplo, en la imagen inferior vemos como queda la combinación de colores verde
y azul. Podemos ver en la imagen que el código para el color verde es "#00CC00" y que
para el color azul es "#333399". Sabiendo estos códigos, podemos utilizar exactamente
estos mismo colores en todas las páginas que queramos.

50. Hay un último elemento que vamos a ver en esta lección y es la distribución de colores
en las tablas.
Dreamweaver nos permite con un sólo clic distribuir los colores de la forma que
deseemos. Por ejemplo pulsando en la pestaña "Alternar" podemos alternar los colores
cada fila, cada dos, tres o cuatro filas.....
En la imagen inferior podemos ver el resultado de distribuir los colores cada tres
columnas en la plantilla de muestra.
Capítulo: Formato de Plantillas
En esta lección vamos a terminar de descubrir las opciones de formato de las plantillas
de tablas.
En la parte inferior de la ventana de diálogo, encontramos las opciones de formato de
los encabezados de la plantilla.

51. Vimos como crear encabezados para tablas en lecciones anteriores, pero puede ser que
nosotros deseemos darle a nuestros encabezados un aspecto más personalizado.
Lo haremos desde este panel.
La primera opción se refiere a la fila superior de la tabla, podemos definir el
alineamiento del texto del encabezado, podemos elegir alinearlo a la izquierda, a la
derecha o centrarlo. O simplemente dejarlo si definir
Con estilo de texto, podemos darle más presencia a nuestros encabezaos, resaltándolo
con un estilo de letra negrita, o itálica o ¿por qué no? Combinar a la vez resaltada e
itálica.
Todo lo que hemos visto para los colores es también válido para aplicarlo al color del
texto de los encabezados, Simplemente tenemos que tener en cuenta que el color que
elijamos debe tener el bastante contraste respecto al fondo para ser visible.

52. Ya hemos visto las propiedades para el encabezado de la fila superior, ahora vamos a
dar formato al encabezado de la columna de la izquierda.
Dreamweaver nos permite tener distintos formatos para el encabezado superior y para el
encabezado lateral.
Podemos definir la alineación para toda la columna y también el estilo de visualización
de las fuentes, podemos elegir los mismos formatos que en el encabezado superior o
podemos cambiar los formatos.
Por ejemplo podemos tener en el encabezado superior un tipo de letra resaltada y en el
encabezado lateral un formato en itálica
Por último podemos con un sólo clic, desde aquí, cambiar el borde la tabla. Podemos
ponerle borde, desde 1 hasta el valor que deseemos, teniendo presente que el grosor del
borde crece a costa de disminuir el tamaño de las celdas.
Un punto importante a la hora de diseñar páginas web y que le da tanto valor a las tablas
cuando se trata de crear estructuras de páginas, es el hecho de que podemos dar al borde
un grosor de cero.

53. ¿Por qué es esto tan importante? ¿Cómo es una tabla de borde cero?. Una tabla de borde
cero significa que el borde no es visualizado por el usuario, lo que permite tener una
gran potencia a la hora de situar los distintos elementos de la web en la página.
Pero eso lo veremos más adelante. En la imagen inferior tenemos el resultado de aplicar
a la plantilla todos los formatos que hemos ido eligiendo a lo largo de la lección.
Capítulo: Las Imágenes
Por fin hemos llegado al tema de las imágenes.
Hacer una página web es muy sencillo, más si se utilizan un programa como
Dreamweaver, pero cuando construimos nuestra página no queremos sólo sencillez,
también queremos sea atractiva.
Y hoy en día, es indiscutible que para que una página sea atractiva debe tener una
estética visual importante. Dreamweaver lo sabe y por ello ha puesto a nuestro servicio
una importante cantidad de recursos para que podamos añadir, reasaltar y modificar
imágenes para hacer más atractivas nuestras páginas web
La manera más sencilla de añadir una imagen a nuestra página es desplegando al menú
insertar, de la barra menú, y buscar en él la opción imagen.

54. En la ventana de diálogo que Dreamweaver nos abrirá, podremos buscar la imagen que
queramos insertar en nuestra página, simplemente tenemos que seleccionarla y pulsar el
botón aceptar de la ventana diálogo.
En la imagen inferior vemos el resultado de incluir una imagen en la página web,
observa que imagen se ha insertado en la posición que ocupaba el cursor en el momento
de añadir la imagen, también podemos escribir texto en la misma línea que insertamos
la imagen
Eso significa que podemos combinar en la misma línea texto e imágenes, sin importar el
orden. Podemos escribir una línea de texto y en cualquier punto de ella insertar la
imagen, o podemos insertar primero la imagen y después escribir un comentario a su
lado.

55. Dreamweaver nos permite insertar imágenes de varias maneras, ya hemos visto como
hacerlo desde la barra de menú. Ahora vamos a aprender a insertar imágenes desde el
panel insertar, con la barra común activada.
Podemos pulsar en la barra común en el icono imagen, tal como vemos en la imagen
inferior
Dreamweaver nos muestra la misma ventana de diálogo de antes, podemos seleccionar
el archivo como ya sabemos o podemos escribir el nombre directamente en la casilla
nombre, y después pulsamos aceptar.
Antes de terminar esta lección vamos a ver una ultima forma de insertar imágenes en la
página. Desde el grupo de paneles de la derecha de la ventana Dreamweaver,
desplegamos en la barra Archivos. Esto nos mostrara el sitio que hemos configurado en
lecciones anteriores.
El sitio como ya vimos, es una estructura de directorios que alberga nuestras páginas, si
hemos configurado adecuadamente el sitio, incluido el directorio de las imágenes,
simplemente tendremos que arrastrar la imagen correspondiente desde el panel hasta el
lugar de la página donde queramos situarla.

56. Nota: El copyright de las fotografías utilizadas como ejemplo en este curso pertenece a
su autora, Silvia R. Vázquez.
Capítulo: Panel Propiedades de Imagen
En la lección anterior aprendimos a insertar imágenes. En esta lección tendremos un
primer contacto con las posibilidades que ofrece el panel propiedades de Dreamweaver.
Para activar el panel de propiedades simplemente tenemos que desplegarlo como ya
sabemos. Si el panel de propiedades no aparece con las mismas opciones que en la
imagen inferior, es debido a que tenemos activa alguna otra parte de la ventana de
diseño.
Para acceder a las propiedades de las imágenes, sólo tenemos que pulsar sobre la
imagen de la cual queramos activar sus propiedades. Tal como vemos en la imagen de
abajo.
Vamos a ver las propiedades paso a paso. Lo primero es darle a la imagen un nombre.
Con esto le decimos a Dreamweaver que vamos a considerar la imagen como un objeto.

57. Si le ponemos un nombre representativo es mucho más cómodo trabajar con los
ficheros.
Sobre el nombre, Dreamweaver nos muestra el "peso" o "tamaño" en Kb de la imagen,
esto es muy importante para controlar el "peso" final de la página.
Hay que tener en cuenta de que cuanto más "peso" tenga nuestra página más lenta será
de visualizar por los usuarios, en especial por aquellos que no tienen una conexión de
Internet de alta velocidad.
Es importante diferencia el tamaño de peso de la imagen con el tamaño de dimensiones
de la imagen, una imagen independientemente de su peso puede tener las dimensiones
que necesitemos. Esto se consigue introduciendo los valores deseados en las casillas
Ancho y Alto. Como se ve en la imagen inferior.
En el caso de que prefiramos las medidas originales, no es necesario que recordemos las
cifras, simplemente pulsamos en el icono restaurar, tal como vemos indicado en la
imagen superior,
En la parte central tenemos las casillas "origen" y "vínculo".
La casilla origen hace referencia al nombre del archivo de la imagen, pulsando sobre la
carpeta de su derecha podemos navegar por la estructura del ordenador hasta encontrar
la imagen que deseemos insertar en ese punto.

58. En la casilla vínculo, podemos introducir el nombre de la página web enlazada a la
imagen ¿Qué significa esto?. Bueno. Los vínculos los veremos en detalles en próximas
lecciones, baste saber por ahora que podemos enlazar distintas páginas de manera que
pulsando sobre un vínculo en una de ellas el navegador nos muestre otra distinta.
Este es el funcionamiento normal de las páginas web, Dreamweaver nos permite con un
sólo clic crear un vínculo desde una imagen de manera que pulsando sobre ella, el
navegador nos lleve hasta otra.
En la casilla vinculo, podemos el nombre de la página destino a la que deseamos
vincular desde la imagen.
En la imagen superior tenemos la casilla "Alt" esto significa "alternativa". Muchas
personas no le dan importancia a esta casilla pero en determinadas circunstancias su
contenido es vital.
Por ejemplo en el caso de que el usuario, por cualquier razón, no pueda visualizar en su
ordenador las imágenes de nuestra web. El texto de la casilla "Alt" se muestra en el
lugar de la imagen, hasta que esta pueda ser mostrada.
Por eso es tan importante que el texto sea lo suficientemente descriptivo para que el
usuario capte el significado del enlace sin ver la imagen.
Por último en la imagen superior vemos las opciones con las que Dreamweaver nos
permite editar las imágenes, estas funcionalidades se aleja del objetivo de este curso por
lo que no entraremos en ellas.
Nota: El copyright de las fotografías utilizadas como ejemplo en este curso pertenece a
su autora, Silvia R. Vázquez.

59. Capítulo: Propiedades de Imagen
En esta lección vamos a seguir descubriendo el panel de propiedades de imagen. Ya
hemos visto, en la lección anterior, la zona superior, ahora veremos las funciones de la
zona inferior
Empezaremos con las opciones de alineación de las imágenes. Pulsando en los iconos
de alineación podemos cambiar la posición de la imagen en la página.
En realidad lo que alineamos, con estos iconos, es toda la línea. Desde estos iconos no
podemos cambiar la alineación de la imagen sin cambiar el del texto con el que
comparte línea.
En la imagen inferior vemos un ejemplo de alineación a la derecha.
Ahora bien. Dreamweaver nos permite desde la opción alinear, no hay que confundir
con los iconos de alineamiento, tener más control de cómo la imagen se relaciona con la
línea en la que está situada.
Por ejemplo con la opción "Línea de base", el texto comparte la misma línea que el pie
de la imagen. Es decir tal como se ve normalmente.

60. Sin embargo cuando cambiamos a alineación medio, el texto aparece a la altura de la
mitad de la imagen, sin importar la alineación del resto de la página.
En el menú desplegable hay una gran variedad de alineaciones posibles para el texto de
la imagen.
Otra de las opciones es el borde. Con esta opción podemos añadirle a la imagen un
borde, una especie de marco, con el grosor que decidamos, simplemente introduciendo
un número en la casilla correspondiente
Por ejemplo en la imagen inferior vemos el resultado de aplicar un borde de tamaño 10

61. Dreamweaver tiene otras opciones para controlar el aspecto de las imágenes, por
ejemplo podemos especificar el espacio que habrá entre la imagen y el texto que le
rodea.
En la imagen inferior vemos las casillas de espacio vertical y espacio horizontal,
introduciendo valores en estas casillas podemos dejar un espacio del tamaño que
nosotros deseemos entre la imagen y el texto.
Por ejemplo con un valor de 25 para el espacio vertical y otros 25 para el espacio
horizontal obtenemos un aspecto tal como vemos en la imagen inferior.
Capítulo: Textos e Imágenes

62. En la lección anterior vimos como combinar en una tabla imágenes y textos.
En esta lección veremos como podemos realzar la presencia de nuestra página
utilizando las herramientas del panel de propiedades.
En lecciones anteriores vimos que el panel de propiedades cambiaba según la zona
activa de la página. El mismo panel era radicalmente distinto si tratábamos con textos,
con imágenes o con tablas.
En esta lección deberemos tener esto muy presente puesto que dependiendo de donde
tengamos situado el cursor podemos pasar con sólo un clic de trabajar con uno u otro
panel.
Para no cometer errores, lo mejor es marcar la zona a la que deseemos aplicar el
formato. Y después pulsar el botón adecuado del panel de propiedades.
Por ejemplo para camibar el color de la fuente de una celda. ...
Primero debemos marcar el texto a cambiar y después pulsaremos en el icono color, y
cuando se despliegue la paleta de colores pulsar sobre el color deseado.
De esta manera no cambiaremos inadvertidamente, por ejemplo, el color de toda la
tabla.

63. Lo mismo sirve para cambiar la alineación del texto de una celda...
Primero marcamos el texto y después pulsamos el icono de alineación que deseemos
aplicarle.
Podemos aplicarles otros formatos, como un resaltado del texto,
O cambiar el tamaño de la fuente del texto seleccionado.

64. Esta lección ha sido un somero repaso de las funciones del panel propiedades, las
funciones son las mismas que ya hemos visto en lecciones anteriores
Capítulo: Los Comportamientos
En esta lección vamos a ver una funcionalidad avanzada de Dreamweaver, que facilita
mucho la creación de páginas web más dinámicas.
Estos son los comportamientos.
Los comportamientos son, valga la redundancia, comportamientos que asignamos a
determinados sucesos para que la página reaccione de una manera determinada.
Todo esto lo veremos mejor un ejemplo.
Podemos acceder a los comportamientos en el grupo de paneles de la derecha de la
ventana de Dreamweaver.
El primer paso es seleccionar el objeto sobre el que deseamos aplicar el
comportamiento, por ejemplo una de las imágenes de la tabla.

65. A continuación desplegaremos el menú "etiqueta" y pulsaremos sobre la pestaña
comportamientos.
Debajo de la leyenda "comportamientos" encontramos un signo "+".
Pulsaremos sobre él para desplegar el menú de comportamientos disponible para el
objeto seleccionado. Esto último es importante tenerlo en cuenta, pues los
comportamientos cambian según sea el objeto seleccionado. Un texto, o un link, no
soporta los mismos comportamientos que, por ejemplo, una imagen.
Como tenemos seleccionada una imagen, vamos a seleccionar de la tabla un
comportamiento que sólo podemos aplicar a imágenes.
"Intercambiar imagen". Este comportamiento logra un efecto muy bonito, se trata de
que en una página web, cuando el usuario pase el puntero del ratón sobre la imagen,
esta imagen cambie y sea sustituida por otra distinta.
Se pueden conseguir páginas muy efectivas con este comportamiento y un poco de
imaginación y buen gusto.

66. Tras pulsar en la opción intercambiar imagen. Dreamweaver nos mostrara un cuadro de
diálogo en el que nos pedirá que definamos el origen, esto simplemente quiere
preguntarnos ¿por cual imagen quiera que sea sustituida la imagen seleccionada?
Ya conocemos como examinar las carpetas para encontrar la imagen deseada, en este
caso haremos lo mismo, vamos a seleccionar la imagen "árbol" y pulsaremos el botón
aceptar

67. Cuando hayamos seleccionado la imagen volveremos a la ventana de diálogo
"intercambiar imagen" y pulsaremos aceptar.
Hay un punto que no he comentado, y que es apropiado hacerlo antes de salir de esta
ventana.
En la zona inferior de la ventana hay dos opciones marcadas
Una es "carga previa de imágenes" y la otra es "restaurar imágenes onmouseout". Por
defecto ambas opciones están marcadas.
Es conveniente conocer la función de ambas opciones, la primera función se encarga de
que cuando el usuario visualiza la página por primera vez, su ordenador descargue todas
las imágenes relacionadas, incluida la de intercambio ¿con qué objetivo? Pues para que
cuando el usuario pase el puntero del ratón sobre la imagen, el intercambio sea
instantáneo pues ya ha cargado previamente la imagen.
La segunda función "restaurar imágenes onmouseout" se encarga de restaurar la imagen
original cuando el puntero del ratón deje de estar sobre la imagen, esta es una opción
que depende más del gusto estético que de características técnicas. Así que este punto es
totalmente opcional.

68. En la imagen superior vemos como queda el panel etiqueta después de añadir nuestros
comportamientos.
Cuando visualicemos la página se verá como la imagen superior de manera normal,
pero si superponemos el puntero del ratón la página se verá como la imagen inferior
Capítulo: Los Enlaces
En esta lección y las siguientes veremos los enlaces. Ya hemos hablados de ellos con
anterioridad pero en estas lecciones vamos a crear nuestros propios enlaces paso a paso.
Haciendo un repaso rápido podemos decir que un enlace es un objeto que cuando
pulsamos sobre él, el navegador nos lleva a otra página. Esta es la gran potencia de
Internet, el descubrimiento de que una página lleva a otra y esta, a otra y así hasta que
nos cansemos de navegar.

69. El primer paso es seleccionar, por ejemplo, un texto. Este texto será el enlace con la
página destino.
En la barra común pulsaremos el icono enlace, tal como vemos en la imagen inferior
Dreamweaver abrirá un cuadro de diálogo en el que completaremos los campos
necesarios.
El primero es el texto del enlace, que en este caso coincide con el texto que hemos
seleccionado.
El segundo campo es seleccionar la página con la que queremos vincular el enlace,
podemos tanto escribir el nombre directamente como buscarla por las carpetas y
seleccionarla como ya sabemos.

70. La siguiente opción nos dice como accederemos al destino. Podemos utilizar la misma
ventana del navegador en la que estemos, por ejemplo si estamos navegando por el
mismo sitio, o bien abrir otra ventana independiente en la que se mostrara la página de
destino.
Esto es particularmente útil, cuando queremos que el usuario permanezca en nuestra
página después de ver el contenido de la página enlazada.
La opción título, se refiere al título de la página que vamos a abrir, de esta manera
tenemos cierto control sobre las páginas.
Las siguientes opciones no son importantes para los objetivos de este curso.
Cuando aceptamos los cambios realizados, y volvemos a la vista de diseño vemos como
ha cambiado el texto, ahora aparece azul y subrayado.
Este es el formato por defecto que adoptan todos los enlaces. Podemos encontrarnos con
páginas en que los enlaces tienen otro aspecto, eso no tiene otra importancia más allá de
su apariencia estética.

71. Capítulo: Vínculos desde Imágenes
En la lección anterior vimos como crear un enlace desde un texto.
Dreamweaver también nos permite crear fácilmente enlaces desde imágenes. ¿Cómo
puede ser esto?. Un enlace texto se activaba cuando se pulsaba sobre él, un enlace
imagen, también. Así de sencillo
Para crear un enlace imagen, simplemente tenemos que seleccionar la imagen e ir al
panel propiedades
Sobre el panel propiedades, en el campo vinculo, debemos teclear el nombre de la
página destino, o bien explorar y seleccionar el archivo destino de la forma que ya
sabemos.

72. En este caso hemos vinculado la imagen cartaya.jpg a la página "Mi-primera-
página.htm"
Al igual que en el enlace de texto aquí podemos pulsar la opción "Destino" para
controlar de que forma se va a abrir la nueva página en el navegador del usuario.