TUTORIAL

DREAMWEAVER

LECCIÓN 1
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.

LECCIÓN 2
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
 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

Y finalmente en la opción de Macromedia Dreamweaver.

Y ya tendremos lista la aplicación para poder utilizarla.
LECCIÓN 3
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

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

Las cuales iremos descubriendo a lo largo del curso, según los necesitemos, para
no hacer demasiado áridos los primeros temas.

LECCIÓN 4
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.

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.

LECCIÓN 5 ª
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.
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
LECCIÓN 6 ª
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.

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.

LECCIÓN 7 ª
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”.

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.

LECCIÓN 8 ª
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.

LECCIÓN 9ª
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.
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.

LECCIÓN 10ª
El Sitio
Introducción a la configuración de “El Sitio”:
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
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.

Y con esto hemos acabado de proporcionarle a Dreamweaver la información

necesaria para configurar nuestro sitio.
LECCIÓN 12ª
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”
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.
LECCIÓN 13ª
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.
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.

LECCIÓN 14ª
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.
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”

LECCIÓN 15ª
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

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.

LECCIÓN 16ª
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
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.

Por último, podemos aplicarle a todo un párrafo una sangría. Tal como vemos en
la imagen inferior

LECCIÓN 17ª
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.

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

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.

LECCIÓN 18ª
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”

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.

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

LECCIÓN 19 ª
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.
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”
En próximas lecciones continuaremos explorando los efectos que podemos aplicar
a las listas.
LECCIÓN 20ª
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.
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.
LECCIÓN 21ª
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.

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.

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.

LECCIÓN 22ª
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...

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

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

LECCIÓN 23ª
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.

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.

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.

LECCIÓN 24ª
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
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.
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

LECCIÓN 25ª
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
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.
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
LECCIÓN 26ª
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.

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.

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.
LECCIÓN 27ª
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.
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

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

LECCIÓN 28ª
Propiedades de las Tablas
En esta lección continuaremos descubriendo el panel propiedades para las tablas.
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”

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.

LECCIÓN 29ª
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”.

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

LECCIÓN 30ª
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.
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.

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.
LECCIÓN 31ª
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.
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.

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.

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

LECCIÓN 32ª
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.

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.

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.

Nota: El copyright de las fotografías utilizadas como ejemplo en este curso

pertenece a su autora, Silvia R. Vázquez.
LECCIÓN 33ª
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. 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.

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.

LECCIÓN 34ª
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.
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
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.
LECCIÓN 35ª
Combinar Imágenes y Tablas

En lecciones anteriores hemos aprendido a crear tablas, también hemos

aprendido a insertar imágenes y también hemos comentado como las tablas eran
el esqueleto en el que se basan las páginas web.
Vamos a ver un ejemplo practico de todo ello.
En esta lección y las próximas vamos a crear una tabla y vamos a insertar en ella
textos e imágenes.

En la imagen inferior tenemos una tabla, de 3 celdas por 3 celdas, según la

plantilla que ya conocemos. Sólo hemos introducido datos en el encabezado de la
columna de la izquierda.
Ahora pulsaremos con el ratón en el interior de la celda donde queramos introducir
la imagen.
Una vez que tenemos activa la celda, insertaremos la imagen con alguno de los
métodos que ya conocemos, por ejemplo con el icono insertar imagen de la barra
común.

Seleccionaremos en la ventana de diálogo la imagen que deseemos insertar y

pulsaremos aceptar.

En la imagen inferior vemos como queda la tabla con la imagen y un comentario

con la descripción de la imagen en la celda de la derecha de la imagen.
Observa como la apariencia de la página aparece mucho más ordenada que en
los ejemplos de las lecciones anteriores.
Podemos situar, tanto textos como imágenes en cualquiera de las celdas de la
tabla. Por ejemplo, la siguiente imagen la situaremos en la celda derecha de la fila
central

Esta vez la añadiremos arrastrándola desde el panel archivo, simplemente

tenemos que elegir la imagen que deseemos situar en la celda, pincharemos
sobre ella y arrastraremos el puntero del ratón hasta la celda destino.

En la celda central podemos añadir el texto que creamos necesario, por ejemplo
una descripción de la imagen. Debido a que la tabla fue pre-formateada con una
plantilla de tablas, el tipo de letra del comentario de la fila superior y el de esta fila
son diferentes.
Dreamweaver nos permite cambiar el formato en cualquier momento, nosotros
esperaremos a la próxima lección para experimentar con ello.

Vamos a ver la ultima manera de insertar imágenes en la tabla.

Esta vez lo haremos desde la barra menú.
Pulsaremos en el menú insertar.

Y en el menú que se desplegará buscaremos la opción imagen.

Desde la ventana de diálogo elegiremos la imagen que deseamos insertar y

pulsaremos el botón aceptar.
Como en las ocasiones anteriores escribiremos un comentario en la celda
contigua que describa la imagen.

En esta lección hemos atisbado las posibilidades que encierra la inserción de

imágenes y la combinación de imágenes y textos en las tablas.
En lecciones próximas profundizaremos más en el tema

LECCIÓN 36ª
Textos e Imágenes

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

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

LECCIÓN 37ª
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.

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.
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
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.
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
LECCIÓN 38ª
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.
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.

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.

LECCION 39ª
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.
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.

LECCION 40 ª
Enlaces internos
En las lecciones anteriores hemos visto como vincular una página con otra.
En esta vamos a vincular un enlace de la página, no con una página externa, si no
con un punto de la misma página.
Esto es particularmente útil en el caso de páginas extensas, ya que podemos
crear un índice en la cabecera de la página y con un clic ir a la sección que nos
interese.
El primer paso, como siempre es seleccionar un punto de la página. En este caso
estamos seleccionando un punto para situar un anclaje, esto es un punto al que
posteriormente podremos referenciar.

Una vez que lo hayamos seleccionado, deberemos pulsar en el icono anclaje de la

barra común, tal como vemos en la imagen superior.
En la ventana de diálogo siguiente deberos crear un nombre de anclaje, es decir,
un nombre único al que después podamos referenciar de manera sencilla, por
ejemplo, “párrafo.”

Dream300064
Cuando pulsemos aceptar, la vista de diseño nos mostrara este aspecto,
tranquilos, ese ancla tan bonita sólo se ve en la vista de diseño, el usuario verá la
página normalmente, tal como la diseñamos.
El siguiente paso es crear el punto de enlace, es decir, marcar una palabra, frase o
imagen sobre la que pulsaremos para ir al destino que ya hemos elegido.

Una vez que hemos seleccionado el texto, por ejemplo, iremos al panel de
propiedades y pulsaremos sobre la opción vínculo, esta vez no introduciremos
ninguna página web

Simplemente escribiremos el nombre del anclaje precedido por el signo “#”

La opción destino podemos utilizarla tal como estamos acostumbrados.

De esta manera cuando pulsemos sobre el enlace, la página se desplazará hasta

mostrarnos el punto de anclaje que hemos vinculado al enlace.

LECCION 41ª
Enlace externos

Y ya sólo queda un último punto, como crear enlaces a páginas exteriores,

situadas en Internet.
A lo largo de todo este curso ya hemos aprendido lo suficiente como para hacerlo
de una manera sencilla y rápidamente.
El primer paso es, como siempre, seleccionar el texto que va a servir como enlace.
El siguiente paso es, buscar en la barra común el icono de enlace.

Y aquí viene la novedad, en la ventana de hipervínculo, que ya conocemos,

introduciremos en la casilla de vínculo, la dirección url de la página a la que
deseemos enlazar desde nuestra página.
Por ejemplo “http://www.aulafacil.com”

En la opción destino podemos elegir cualquiera de las opciones, para este caso,
hemos elegido la opción “_blank”

Cuando hayamos terminado pulsaremos el botón aceptar

Y cuando volvamos a la vista de diseño, comprobaremos que este será el aspecto

de nuestra página.
ya sólo queda grabarla y lanzarla desde un navegador para comprobar que
cuando pulsamos en el enlace nos abre en otra página la web de aulafácil.com