Manual Dreamweaver

Unidad 1. CONCEPTOS BÁSICOS DE DREAMWEAVER CS4
1.1. Qué es Dreamweaver CS4
Dreamweaver CS4 es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos Java Script,
etc.., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con
mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
1.2. Novedades de Dreamweaver CS4
En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.
Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz que permite
cambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y cómoda. Esta
nueva interfaz es muy parecida a los demás programas de Adobe, como Photoshop, Illustrator,
etc. Existen distintos espacios de trabajo adecuados para cada ocasión (clásico, programador,
diseñador, etc.) pero también tenemos la posibilidad de crear el nuestro propio de forma muy
sencilla.
Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veríamos la
página en un navegador. Si hemos incluido elementos interactivos en nuestra página, como
menús desplegables, menús tipo acordeón, widgets, etc, podremos interactuar con ellos en la
vista en vivo, de la misma forma que lo haríamos en un navegador.

Navegador de código. La función de Navegador de código muestra las fuentes de código que
afectan a la selección que tengamos activa, pueden ser CSS (hojas de estilos en cascada),
funciones JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.
La nueva barra de Archivos relacionados. Muestra todos los archivos que de una forma u otra
contribuyen al diseño final de nuestra página, como hojas de estilo css, archivos javascript, etc.
Mediante esta nueva utilidad podemos pasar de un archivo a otro cómodamente y tener una
visión mucho más clara de todos los archivos con los que estamos trabajando en nuestro sitio
web.
Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido en
propiedades HTML (el que conocíamos de otras versiones) y CSS. Éste último nos permite crear
y editar nuestros estilos de forma cómoda y sencilla.

1.3. Editar páginas web
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los
documentos con la extensión HTML o HTM, e incluir como contenido del documento el código
HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un
editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los
elementos de la página, al mismo tiempo que es más complicado crear una apariencia
profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML.
Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al
principio, nos ayudará a aprenderlo rápidamente.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y
que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe
Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden
ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los
cuales tienen la ventaja de ser gratuitos.
1.4. Cómo tener una página en Internet
Para poder poner una página web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio
por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco,
volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco
espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que
tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo
que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no
podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa,
aunque sí es aceptable para una página personal, sobre todo al inicio.
Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio,
tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio
consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en
Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible
registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra
página no será más que un archivo dentro de la de la empresa contratada.
En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás
que se encuentre a disposición de todo el mundo en Internet.
Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu
servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y
como aparecen en tu disco duro, respetando el nombre de los archivos y la organización
de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no
funcionarán.
Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni
espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que
el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes
en él.
Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también,
los nombres en minúscula. Algunos servidores (los que utilizan Linux) distinguen entre
mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg
deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando
fallos.

1.5. Arrancar y cerrar Dreamweaver CS4
Veamos las dos formas básicas de arrancar Dreamweaver CS4.
Desde el botón Inicio (Windows Vista) situado, normalmente, en la esquina inferior
izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un
menú. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que
hay instalados en tu ordenador, buscar Adobe Dreamweaver CS4 y haz clic sobre él para
arrancar el programa.
Desde el icono de Dreamweaver CS4 del Escritorio .
Para cerrar Dreamweaver CS4, podemos utilizar cualquiera de las siguientes operaciones:
1. Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier
ventana de Windows.
2. Pulsar la combinación de teclas Alt + F4.
3. Hacer clic sobre el menú Archivo y elegir la opción Salir.
Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver,
se te pedirá confirmación para guardar o no cada uno de ellos.
1.6. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
1. Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).
2. Pulsar la combinación de teclas Ctrl + O.
3. Hacer clic sobre el menú Archivo y elegir la opción Abrir.
4. Hacer doble clic sobre el archivo en la ventana del sitio.
5. Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción
Abrir con → Adobe Dreamweaver CS4.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones:
1. Hacer clic en el botón nuevo de la barra de herramientas estándar (si está
visible).
2. Pulsar la combinación de teclas Ctrl + N.
3. Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página
en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados
que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación
pulsamos el botón Crear.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
1. Hacer clic en el botón Guardar de la barra de herramientas estándar.
2. Pulsar la combinación de teclas Ctrl + S.
3. Hacer clic sobre el menú Archivo y elegir la opción Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con
varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para
guardar todo puedes realizar cualquiera de las siguientes operaciones.
1. Hacer clic en el botón Guardar todo de la barra de herramientas estándar.
2. Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en
cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en

ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por
ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas
habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin
guardar aparece un * tras el nombre del documento.
1.7. Mi primera página
Vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a
otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con
los elementos básicos con los que están hechas la mayoría de las páginas web.
Lo primero que hay que hacer es abrir Dreamweaver. Ya hemos visto como puede hacerse.
Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna
Diseño dejamos la opción por defecto: <ninguno>.
Seguidamente, hacer clic sobre la zona blanca del documento y escribir lo siguiente:
Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.
www.espoch.edu.ec

Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la
página.
Entonces se abrirá una ventana como la que aparece a continuación:
En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de
color azul.
Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página.
Para aplicar los cambios, pulsa sobre el botón Aceptar.
Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta
donde estamos creando nuestras páginas, habitualmente en una subcarpeta dedicada a las
imágenes.
Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con
el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana
con una opción similar a Guardar imagen como... (dependiendo del navegador que utilicemos)
permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas
publicar la página en Internet, hay que respetar los derechos de autor de la imagen.

Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que
estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas de crear.
Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar, situamos
el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter). Después nos
dirigimos al menú Insertar, opción Imagen.
En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías
guardado, seleccionarla y pulsar Aceptar.
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de
propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el
siguiente aspecto:

Si no te aparece, puedes mostrarlo a través del menú Ventana, opción Propiedades.
Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído.
Para que te aparezca desplegado debes hacer doble clic en Propiedades.
Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el
formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.
Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono
CSS a la izquierda.
Mediante el inspector de propiedades en Dreamweaver CS4 accedemos tanto a las propiedades
de CSS como a las propiedades de HTML.
Podemos decir que en una página web, HTML se encarga de estructurar el contenido, la
información, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.
Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante
hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la
página Web y reducen el tamaño del archivo.
Selecciona la primera línea. En Regla de destino selecciona Estilo en línea, para aplicar el
formato solo al texto seleccionado. También aplica el estilo de Fuente Arial, Helvetica, sans-
serif, color azul #009 y centra el texto, tal y como muestra la imagen siguiente:

Observa que hemos centrado el texto pulsando en el botón .
Selecciona la segunda línea de texto, y seleccionando como antes < estilo en línea >, marca los
botones para ponerlo en negrita y cursiva respectivamente.
Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el
contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las
propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.
Ahora, centra el párrafo como hemos visto hasta ahora, pulsando en .
Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de
Propiedades a las propiedades de HTML.
En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:
Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo,
desde la opción Guardar.

Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html. Por
ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta
que la imagen descargada.
Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.

Unidad 2. EL ENTORNO DE DREAMWEAVER CS4
Vamos a ver cuáles son los elementos básicos de Dreamweaver CS4, la pantalla, las barras, los
paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman,
dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento
no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición
de empezar a crear páginas web.
2.1. La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes
fundamentales. Así conoceremos los nombres de los diferentes. La pantalla que se muestra a
continuación (y en general todas las que veremos) puede no coincidir exactamente con la que
ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en
cada momento y dónde, como veremos más adelante.

2.2. Las barras
La barra de la aplicación.
La barra la aplicación es una novedad en Dreamweaver CS4. Si tenemos la ventana
maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán
dos líneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior),
varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de
búsquedas para obtener ayuda on line.
Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a
izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden
añadir, o al administrador de sitios, que ya veremos.
Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable.
Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que
podemos guardar y cargar. Lo veremos más adelante.
Los menús, están agrupados en categorías.
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes
elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son
accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.

Las pestañas de documento.
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá
cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene
cambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otras
acciones haciendo clic con el botón derecho, como Cerrar otros archivos.
Dreamweaver CS4 añade una novedad. Debajo de las pestañas encontramos los archivos a que
utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a
ellos con un clic. Esto nos ahorrará bastante tiempo.
La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el
mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas
completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para
desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su
codificación.
Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos
ver u ocultar desde el menú Ver → Barras de herramientas.

La barra de herramientas estándar.
La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del
menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe
Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y
Rehacer.
La barra de herramientas de documento.
La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las
distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar
las distintas opciones de validación que nos ofrece el programa.
La barra de representación de estilos.
Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos
dispositivos, si estamos utilizando hojas distintas que dependan del eso.
Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo
como otra barra de herramientas.
2.3. Inspectores y paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen
como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la
apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras
que el panel nos da acceso a opciones generales.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los
paneles o inspectores. Vamos a ver los más importantes.

El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado,
permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en
Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su
ubicación, dimensiones, peso, clase, etc...
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los
diferentes elementos de la página Web que estemos diseñando.
El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú
Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces,
multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como
panel flotante o como una barra de herramientas integrada en la ventana de trabajo.
Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, hagámoslo:
Personalizar el área de trabajo (Ejercicio)
Abrir y cerrar paneles
Todos los paneles son accesibles a través del menú Ventanas.
Para cerrar un panel, basta con hacer clic derecho sobre su pestaña y elegir Cerrar del menú.
Un comando que puede resultarnos útil es la tecla F4. Al pulsarla, todos los paneles se ocultan.
Para mostrarlos, la volvemos a pulsar.
Acoplar y desacoplar paneles
A la derecha (por defecto) encontramos la pila de paneles, algunos paneles aparecen
acoplados. Eso quiere decir que se muestran como pestañas, pudiendo ver el que queramos
haciendo clic, pero sin poder ver dos a la vez.
Para desacoplarlos, basta con hacer clic sobre la pestaña y arrastrar.

Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros lugares
(zonas de colocación), que aparecerán resaltados en azul (imagen anterior). Esto nos permite
intercambiar paneles entre grupos acoplados o dejarlos como flotantes si los sacamos fuera.
Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra de
herramientas.
Cambiar el aspecto del panel insertar
Es posible cambiar el aspecto del panel. Como ya hemos dicho, podemos arrastrarlo hasta la
barra de menús para que tome un aspecto de fichas, como se aprecia en la siguiente imagen:
Pero también puede tener este otro aspecto, en menú:
Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el menú y
seleccionamos la opción Mostrar como Fichas o Mostrar como menú, según el caso.

Cambiar los métodos abreviados de teclado
Los métodos abreviados de teclado son las combinaciones de teclas que permiten acceder a
algunas opciones sin la necesidad de moverse a través de los menús. Para modificar las
combinaciones de teclas hay que dirigirse al menú Edición, a la opción Métodos abreviados
de teclado.
En esta nueva ventana es necesario seleccionar un comando y una de las combinaciones de la
lista de Métodos abreviados, situar el cursor en el campo Pulse tecla, seguidamente pulsar la
combinación de teclas deseada, y por último hacer clic sobre el botón Cambiar.
Es posible que no se permita modificar las combinaciones de teclas del conjunto seleccionado,
por ser combinaciones que provienen de fábrica, por lo que se pedirá confirmación para crear
una copia modificable del conjunto.
Hay que tener también en cuenta que no se permite asignar a un comando una combinación de
teclas que ya está asignada a otro diferente.

Color de los iconos
Por defecto, los iconos de Dreamweaver se muestran de color gris, y al pasar el cursor por
encima, se muestran de color.
Pero como ves en la imagen anterior, podemos hacer que todos los iconos se muestren de
color. Para ello no tenemos más que elegir la opción Iconos de colores del menú Ver.
Espacios de trabajo
Si adaptamos a nuestro grupo el entorno y cerramos el programa, al volver a iniciarlo se
mantendrá nuestra configuración. Pero a la larga iremos haciendo cambios, abriendo paneles
que necesitemos puntualmente, cerrando otros por accidente, etc. Por eso es muy útil guardar
nuestra configuración y poder restaurarla cuando queremos.
A esta configuración del entorno, se le denomina Espacio de trabajo. Y podemos guardar
nuestra configuración actual desde el menú Ventana → Diseño del espacio de trabajo →
Nuevo espacio de trabajo.... y darle un nombre.

Como vemos en el la imagen, DiseñosWebFIE es un espacio personalizado. Además vemos
que Dreamweaver trae una serie de espacios ya creados que podemos utilizar. Para cargarlo,
basta con seleccionarlo en el menú.
Otra opción muy interesante que encontramos en este menú es la de Restablecer 'espacio'.
Esto lo volverá a cargar, muy útil cuando lo hemos desorganizado.
2.4. Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de
documento:
La vista Diseño
La vista Diseño permite trabajar con el editor visual.
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
La vista Código
La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de
código fuente. No permite tener directamente una referencia visual de cómo va quedando el
documento según se va modificando el código.

El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.
La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona superior
muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de
las zonas, este cambio se aplica directamente sobre la otra.

La vista en Vivo
La vista en Vivo es otra de las novedades que trae Dreamweaver CS4. Nos ofrece una vista
del resultado final no editable. A diferencia de la vista Diseño, que nos permite editar los
elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador.
La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños
cambios se pre visualizan correctamente en el navegador.
No obstante, siempre hay que comprobar la página con los principales navegadores del
mercado, que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso verás
cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en la
vista en vivo o en el navegador.
La vista Código en vivo
Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir,
pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la
Vista en vivo, se seleccione su correspondiente código fuente.
2.5. La ayuda
A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por
temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o
simplemente pulsando F1.
Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un resumen
de esta herramienta.
Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML.
Acceder a Dreamweaver Support Center en la web.
Acceder al Foros en línea de Adobe.
Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos
de la búsqueda y buscar, iremos a la ayuda online de Adobe.

Unidad 3. CONFIGURAR UN SITIO LOCAL
En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar
las propiedades de los documentos, como puede ser el color de fondo.
3.1. Introducción
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño
similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las
páginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener
las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas
carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la
hora de trabajar. Esto es lo que se conoce como sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo
que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia
del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.
La organización de los archivos en un sitio permite administrar y compartir archivos, mantener
los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que
cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.
Por ejemplo, si escribiéramos la dirección genérica http://www.producciones.es en el
navegador, éste intentaría cargar la página http://www.producciones.es/index.htm, por lo que
se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm, y
no se podría navegar por el sitio a no ser que se escribiese exactamente
http://www.producciones.es/nombrepagina.htm

3.2. Crear o editar un sitio web sin conexión a Internet
Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la
carpeta raíz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a
Nuevo sitio. Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los
sitios definidos. También podemos acceder desde el icono de acceso rápido de la barra de la
aplicación a la opción Administrar sitios o Nuevo sitio...
En el caso de haber seleccionado la opción
Administrar sitios, aparece una ventana
que contiene la lista de sitios locales
definidos con anterioridad.
Por supuesto, pueden existir varios sitios
locales en un mismo ordenador.

Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma
ventana en la que definir o modificar las características del sitio.
Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la lista
haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único
que empleemos de momento.
Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de
sitios. La Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local.
La carpeta puede contener ya archivos o no.
Estas dos características son las imprescindibles para definir un sitio local. El resto son
opcionales, y de momento no nos interesan.
Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio
local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.

Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas y
minúsculas. Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows,
muchos servidores distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo
hará.
Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio. Si preferimos utilizar
un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez
de la pestaña Avanzadas.
3.3. Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios....
seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.
También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú
desplegable Archivos.
Ejercicio paso a paso: Crear un sitio web local
Objetivo
Practicar las operaciones que hay que realizar para crear un sitio sin conexión a Internet.
Ejercicio
1. Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar los
archivos de los distintos que vayamos creando. Llámala mis_sitios.
2. Copia a ella la carpeta Musicad3.
3. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
4. Haz clic sobre el menú Sitio.
5. Elige la opción Administrar sitios. Se abrirá una nueva ventana.
6. Selecciona el botón Nuevo..., y selecciona la opción Sitio. Se abrirá una nueva ventana.
7. Selecciona la pestaña Avanzadas de la nueva ventana.
8. Selecciona Datos locales en Categoría.

9. En Nombre del sitio escribe Musicad3.
10. En Carpeta raíz local busca la carpeta Musicad3 que acabas de copiar, y que se
encuentra dentro de la carpeta mis_sitios. Selecciónala. Puedes hacerlo a través del
botón con forma de carpeta.
11. En Carpeta predeterminada de imágenes busca la carpeta imagenes, que se
encuentra dentro de la carpeta Musicad3, y selecciónala. Puedes hacerlo a través del
botón con forma de carpeta.
12. Haz clic sobre el botón Aceptar y sobre el botón Listo.
3.4. Ver el sitio
El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más
importantes de Dreamweaver, ya que nos da acceso a los archivo del sito.
En este caso vemos todos los documentos creados
en nuestro sitio artistas.html, contactos.html,
index.html, letras.htm, novedades.html y
videos.html ademas las carpetas imagenes y
videos.
Es posible visualizar un sitio en el panel Archivos o
en una ventana. Para cambiar de una vista a otra
hay que pulsar sobre el botón que aparece en la
parte superior del panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de
nuestro equipo) y el sitio remoto (el del servidor), y
poder, por ejemplo, sincronizar los archivos, o
compararlos. También el servidor de pruebas o las
bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la
derecha) con nuestros archivos.

Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionan
entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver,
automáticamente actualizará todas las referencias a ese archivo (enlaces desde otras
páginas, origen de la imagen, etc).
En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se
mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya que
Dreamweaver simplemente no encontrará la página.
Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana
similar a ésta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser
actualizados para que no se produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si tenemos
configurada la opción Mensaje al actualizar vínculos si movemos archivos. Lo cual podemos
establecer desde el menú Edición, opción Preferencias, categoría General.
3.5. Subir archivos al servidor
Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberás
subir los archivos al sitio que hayas contratado o conseguido gratuitamente.
Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir
subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede
hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se
encuentra en tu carpeta del disco duro. Si no los enlaces no funcionarán correctamente, y es
posible que algunas imágenes no se muestren.
Para subir los archivos vía web deberás seguir las instrucciones que te proporcionará tu
servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos
gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.
Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador
de Windows) y, obviamente, nos es mucho más útil para subir los archivos.
Uno de los programas gratuitos más utilizados es FileZilla, desde su página web podrás
descargarte el programa y su traducción tu idioma.
Una vez instalado, abre el programa y haz clic en Archivo → Gestor de sitios y luego en
Nuevo sitio para configurar un nuevo sitio FTP.

Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas:
Servidor, Usuario y Contraseña.
Rellena los campos y haz clic en Conectar. Se conectará automáticamente y podrás ver una
carpeta donde podrás copiar los archivos que hayas creado.
La parte central de la pantalla estará dividida en dos columnas. A la izquierda, la marcada como
Sitio local, nos permite explorar la estructura de archivos y carpetas de nuestro sitio. A la
derecha encontramos Sitio remoto, con los archivos ubicados en el servidor FTP.

Ahora no tenemos más que arrastrar los archivos del sitio local al remoto para subirlos, o del
remoto al local, para descargarlos al equipo.
Verás como el programa empieza a copiar la información de tu disco a Internet. Cuando haya
finalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu
navegador (Firefox, Internet Explorer...) ¡y verás el sitio en Internet!
Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el
servidor. Busca la carpeta public_html y sube tus archivos allí.
3.6. Propiedades del documento
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo
formato, es decir, que tengan el mismo color de fondo, de fuente, etc.

Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo
Propiedades de la página.
Este cuadro se puede abrir de tres modos diferentes:
1. Pulsar la combinación de teclas Ctrl + J.
2. Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
3. Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final
del menú contextual la opción Propiedades de la página.
Se abrirá el cuadro de diálogo siguiente:
Las propiedades están organizadas en categorías.
En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las
propiedades:
1. Fuente de página: es el tipo de letra que le aplicaremos al texto.
2. Tamaño: es el tamaño de la fuente que aplicaremos al texto.
3. Color del texto: es el color de la fuente.
4. Color del fondo: permite especificar un color de fondo para el documento, pero dicho
color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.

5. Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha
imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en
cuenta que según los colores de la imagen será necesario establecer unos u otros
colores para el texto, así como que no es conveniente tener un gif animado como fondo.
6. Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no
queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita
o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se
repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita
en vertical, entonces seleccionamos repeat-y.
7. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre
donde empieza el contenido de la página y la ventana del navegador.
En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos las
propiedades:
1. Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha
imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en
cuenta que según los colores de la imagen será necesario establecer unos u otros
colores para el texto, así como que no es conveniente tener un gif animado como fondo.
2. Fondo: permite especificar un color de fondo para el documento, pero dicho color solo
se mostrará en el caso de no haber establecido ninguna imagen de fondo.
3. Texto: es el color de la fuente.
4. Vínculos: es el color que mostrará el texto de los vínculos.
5. Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.

6. Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace
clic sobre el mismo.
7. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre
donde empieza el contenido de la página y la ventana del navegador.
Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que
CSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo hace con
atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML al
contenido, y no al diseño. Por eso, te desaconsejamos su uso.
En la categoría Vínculos (CSS) encontramos las propiedades:
1. Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.
2. Tamaño: es el tamaño del texto de los vínculos.
3. Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el
texto normal y los vínculos que sirven de enlace a otras páginas.
4. Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al
usuario si unos vínculos ya han sido visitados o no.
5. Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratón
encima del vínculo.
6. Vínculos activos: es el color de los vínculos activos.
7. Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el
texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo
para que no aparezca subrayado.
8.

En la categoría Encabezados (CSS) encontramos la propiedad:
1. Fuente de encabezado: permite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y color que
queremos aplicar a cada tipo de encabezado.
En la categoría Título/Codificación encontramos la propiedad:
1. Título: es el título del documento, que aparecerá en la barra de título del navegador y de
la ventana de documento de Dreamweaver

En la categoría Imagen de rastreo encontramos las propiedades:
1. Imagen de rastreo: permite establecer una imagen como fondo del documento, pero
que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un
navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el
documento.
2. Transparencia: permite establecer la opacidad de la imagen de rastreo.
Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el
navegador. Para ver cómo comprobar el tamaño de los documentos.
Comprobar tamaño para optimizar la carga
Si las páginas tienen muchos elementos (imágenes, tablas, etc.) y son muy grandes,
posiblemente tarden mucho tiempo en mostrarse totalmente en el navegador. Esto no es nada
recomendable, ya que los usuarios pueden perder la paciencia, y no visitar más nuestra página.
Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado.
Dreamweaver permite calcular automáticamente el tiempo de descarga de las páginas. Para ello
hay que dirigirse al menú Edición, a la opción Preferencias.
En esta nueva ventana lo primero que hay que hacer es seleccionar una Categoría. En este caso
nos interesa la de Barra de estado.
En ella habrá que establecer una Velocidad de conexión.

La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que se
conectaban lo módems telefónicos. Actualmente, las conexiones de ADSL y cable llegan a cifras
mucho mayores, de varios MB/s. No obstante, ha que establecer el valor al de la conexión media
de la región de los usuarios a los que va destinada la web.
Una vez establecida una velocidad de conexión, y aceptados los cambios, Dreamweaver
calculará el tamaño y el tiempo de descarga de la páginas a partir de esa velocidad de conexión.
Hay que tener en cuenta que el tamaño de descarga de una página no solo se calcula a partir
del tamaño de esa página en disco, sino que hay que considerar también el tamaño de las
imágenes que aparecen en ella, y del resto de elementos.
Cuando en la ventana de documento de Dreamweaver esté abierta alguna página, se mostrarán
su tamaño y su tiempo de descarga en la barra de estado.
Por ejemplo, esta página de ejemplo tiene un tamaño de descarga de 3255K, y se presupone un
tiempo de descarga de 465 segundos (para una conexión 56kb), ya que en la barra de estado de
la ventana de documento aparecen estos datos entre el tamaño de la ventana de documento y el
panel de propiedades.
3.7. Los colores
Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color
de estas paletas, se muestra el valor hexadecimal del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de
216 colores seguros para web. Éstos son los colores que se
muestran de la misma forma en cualquier navegador bajo
cualquier sistema operativo.
Esto no quiere decir que sólo podamos utilizar estos colores.
Podemos personalizarlos a través del botón de la parte
superior de la paleta.
Los colores pueden asignarse a través de los botones:

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también
en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto,
fondo, o tablas), como es el caso de la ventana de Propiedades de la página, que vimos en
este tema.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo
que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el
número hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul
con valor #39F, el botón quedaría del siguiente modo: .
En la web, los colores se representan por la cantidad que contienen de los colores primarios
aditivos (Rojo, Verde y Azul).
Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0 a la F
(A=10, B=11, ..., F=16).
El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total.
Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el
segundo al azul y el último al verde.
En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este caso, se
interpreta que los valores de los pares están repetidos. Es decir, los colores #FF22AA y #F2A
son el mismo.
Ejercicio paso a paso: Crear nuevo documento y modificar sus
propiedades
Objetivo.
Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar
las propiedades de la página.

Ejercicio
2. Abre el menú Archivo y elige la opción Nuevo, o bien haz clic sobre el botón de la
barra de herramientas.
3. Selecciona Página en blanco en Categoría.
4. Selecciona HTML en Tipo de página.
5. Haz clic sobre el botón Crear.
6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseño. Haz
clic sobre el botón Mostrar vista de diseño .
7. Haz clic con el botón derecho del ratón sobre el documento en blanco, para abrir su
menú contextual.
8. Elige la opción Propiedades de la página en el menú contextual y selecciona la
categoría Apariencia (CSS).
9. En Color de texto: escribe #585858.
10. En Color de fondo: escribe #FEFEFE.
11. Haz clic en la categoría Vínculos CSS.
12. En Color de vínculos: escribe #DFA01B.
13. En Vínculos visitados: escribe #F9CA69.
14. En Vínculos activos: escribe #FFB900.
15. Haz clic en la categoría Título/codificación.
16. En Título, escribe Deportes.
17. Haz clic sobre el botón Aceptar.
18. Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documento
con el nombre menu.htm.

Unidad 4. EL TEXTO
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos
CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no
predefinidos.
4.1. Características del texto
Las características del texto seleccionado pueden ser definidas a través del menú Formato, y
a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a
través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.
Comenzamos viendo las propiedades HTML
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el
navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente
como queramos.
Formato:
Permite seleccionar un formato de párrafo ya definido para HTML, que
puede ser encabezado, párrafo o formato predeterminado. Los
encabezados se utilizan para establecer títulos dentro de un
documento. El formato predeterminado sirve para que el texto aparezca
tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen
varios espacios solo se considera uno, pero al establecer el formato
predeterminado se respetará que hayan varios espacios en lugar de
solo uno. El texto normal, debería ir siempre en párrafos, salvo que
esté en otros elementos, como tablas o listas.

Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido
de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se
muestran esos encabezados, recuerda que siempre podremos personalizarlo.
Estilo:
El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra
en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a
través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de
Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen
subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un
vínculo. Además, emplea etiquetas que están en desuso.
Lista:
Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas
en el siguiente apartado.
Sangría:
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de
margen que se establece a ambos lados del texto. En este caso los botones se refieren a
sangría a la izquierda del texto.
Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>,
que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista,
creará una sublista dentro de ésta.
Accediendo a las propiedades CSS.
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra
página y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como el
color de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en una
posición determinada o que un elemento cambie al pasar el cursor sobre él. Profundizaremos en
esto más adelante, por ser una parte fundamental en la creación de páginas web.
Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CS4 nos proporciona
numerosas funciones para la creación de estilos mediante hojas de estilos en cascada.

Regla de destino:
Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo hacemos.
Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar
el tema.
Editar regla:
Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS,
de la regla seleccionada.
Panel CSS:
Este botón abre el panel CSS si no lo tuviéramos abierto.
Fuente: Permite seleccionar un conjunto de
fuentes. Aparecen conjuntos de fuentes en
lugar de una sola, ya que es posible que al
establecer una única fuente el usuario no la
tenga en su ordenador. El seleccionar un
conjunto de fuentes posibilita que en el caso
de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si
seleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial, pero si esta no
existe se verá en Helvetica.
Estilo:
Estos botones ponen el texto en negrita y cursiva respectivamente.
Alineación:
A través de estos botones es posible establecer la alineación del texto de una de estas cuatro
formas distintas: izquierda, centrada, derecha y justificada.

Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo
sobre un párrafo.
Tamaño:
Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en
píxeles, porcentajes del tamaño base, etc...
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las
propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página
ni aquí, el color del texto por defecto será el negro.
Ejercicio paso a paso: Insertar texto y modificar sus propiedades
Objetivo
Practicar las operaciones de insertar texto y modificar sus propiedades.
2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.
3. Selecciona el sitio Musicad3 en el panel Archivos. Recuerda que creamos este sitio en
el tema anterior.
4. Haz doble clic sobre el documento contactos.html, que aparece en los archivos
desplegados en el panel de Archivos. Se abrirá el documento en Dreamweaver.
5. Sitúa el punto de inserción antes de la primera letra de la primera línea.
6. Escribe el texto Quiénes somos y pulsa la tecla Intro para saltar de línea.
7. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción
Propiedades.
8. Haz clic en el texto Quiénes somos.
9. En Formato, del inspector de propiedades, elige Encabezado 1. Observa como ahora el
texto es de mayor tamaño.
10. En la barra de herramientas de documento, haz clic sobre la caja de texto Título, y
escribe Quiénes somos.
11. Haz clic sobre el botón Guardar de la barra de herramientas.

4.2. Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista,
simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a
través del inspector de propiedades, o a través del menú Formato.
La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras que la lista
numerada (ordenada) se selecciona a través del botón .
Ejemplo de lista numerada (ordenada):
1. Preparar la mochila
1. Sacar los libros de ese día
2. Introducir los libros del día siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador
Ejemplo de lista con viñetas (sin ordenar):
1. Perro
2. Gato
3. Aves
1. Canario
2. Loro
4. Hámster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario
añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista
anidada.
A través del menú Formato, opción Lista, es posible acceder a las propiedades de la lista
seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún
lugar de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con
viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de
las listas ordenadas, el número por el que comenzará el recuento.
4.3. Caracteres especiales
A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de
Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir
caracteres como á, ê, ì, ö, ç.. de forma rápida. Pero si quieres poner dos espacios en blanco y
los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando
la opción que vamos a ver a continuación. Lo mismo ocurrirá con los caracteres que no tenemos
en el teclado.
Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen
inferior.
Sólo coloca el cursor del ratón sobre Caracteres especiales y verás una lista rápida de los
caracteres más utilizados que no pueden ser introducidos mediante teclado.
Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá
en la vista de Diseño.
Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde
donde podrás seleccionar caracteres entre una lista bastante más amplia.

4.4. Estilos CSS. Introducción
Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el
color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez
que se desee repetir la asignación de esos mismos valores a otras partes del texto.
También permiten, como veremos más adelante, definir prácticamente cualquier propiedad de
los elementos que contendrán nuestra web.
Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>,
<h2>...), párrafos (<p>), enlaces (<a>), etc... lo que formateará todas las apariciones de esta
etiqueta en el ámbito del estilo.
También podemos crear clases. Algo así como definir un estilo y darle un alias. El estilo afectará
a todos los elementos a los que apliquemos esa clase.
Por otro lado, al crear el estilo, podemos definirlo como un estilo en línea (afectará sólo al
elemento seleccionado) o crear una regla, que puede afectar a toda la página, o a todo el sitio si
la guardamos en un archivo CSS.
Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del
contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto
exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de
fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad
simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos
que usan ese estilo se actualiza automáticamente.
4.5. Crear un estilo personalizado
Con Dreamweaver CS4, las características que apliquemos a un texto a través del Inspector de
propiedades CSS crearán automáticamente estilos CSS. Aunque tenemos que decidir a qué
elementos afecta.
Veámoslo:

Crear un estilo en línea.
Por ejemplo, si queremos que un determinado estilo afecte a un único elemento y en un caso
puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la propia etiqueta
HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento.
En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo en
línea>.
A continuación, definimos las propiedades del estilo.
Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos concretos.
Crear una regla de estilo.
Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén
contenidas en determinados elementos o una clase.
Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos < Nueva
regla CSS >.
Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos
aparecerá la siguiente ventana:

Tipo de selector: el tipo de selector es fundamental, ya que determina a qué elementos
afectará el estilo.
Podemos elegir entre cuatro tipos de selector:
Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle
esa clase.
El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver.
ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma
única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que
tenga ese ID. En el selector, se escribe precedido por #.
Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.
Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta únicamente a
los párrafos con la clase resaltado, pero no a los encabezados con esa clase.

También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén
dentro de un elemento de una lista con el id menu.
Nombre del selector: esta opción permite asignar un nombre al selector.
Depende íntimamente del tipo de selector, pues aquí introduciremos el nombre de la clase, id,
etiqueta, etc... Por defecto, indicará el elemento seleccionado, pero podemos escribir el que
queramos.
Definición de regla: esta opción nos permite guardar el estilo en el documento actual o en un
nuevo archivo .css.
Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera de la
página, por lo que sólo estará disponible dentro de ésta.
Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Podremos emplear estos estilos
en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde
guardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las
páginas.
Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos se
añadirán a ella.
4.6. Definir o editar un estilo
Una vez creado, tenemos que definir las propiedades que formarán el estilo.
Para ello, encontramos las opciones básicas en el Inspector de propiedades CSS.

Observa que la regla que estamos editando es la que aparece en Regla de destino. Si
queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez
creadas se van añadiendo a la lista.
Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar regla. Se
abrirá la ventana Definición de regla.
Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las veremos más
adelante.
Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos que cambiar
varias propiedades.
Para pequeños cambios que no podamos hacer desde el Inspector de propiedades y otras
funciones extras, disponemos del panel Estilos CSS. Podemos acceder a él desde el menú
Ventanas o pulsando en el botón Panel CSS.

En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas
aplicadas, y en la parte inferior las propiedades del estilo actual.
También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que
indique a qué tipo de texto se va a aplicar. Para ello accedemos al panel Estilos, hacemos clic
con el botón derecho sobre el estilo y seleccionamos la opción Cambiar nombre... Aparecerá
un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior.

4.7. Aplicar un estilo
En el caso de haber creado una regla para una etiqueta, nos será necesario aplicarla, ya que
directamente se aplicarán directamente.
Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases. Veamos
cómo hacerlo:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto
de inserción, pero sin seleccionar, el estilo se aplicará a la primera etiqueta que contenga el
texto (por ejemplo el párrafo).
En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado
por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las
propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.
Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra
de estado, y seleccionar la clase deseada del menú Establecer clase.

Todas las reglas disponibles aparecen al desplegar el submenú Formato → Estilos CSS.
Observa que existe una clase llamada ninguna. Lo que hace esta opción es quitar la clase al
elemento.
La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La clase
aparecerá junto al nombre de la etiqueta, separada por un punto.
4.8. Hojas de estilos
Exportar estilos
Es frecuente que comencemos creando los estilos en la propia página, y después al ver que los
necesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos
permite exportar estos estilos fácilmente.
Utilizamos el panel Estilos CSS (Mayús + F11). En este caso nos será más útil la vista Todo.
Agrupados en <style> encontramos los estilos creados en la página.

Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono de la
esquina superior derecha) seleccionamos Mover Reglas CSS....
Nos aparecerá la siguiente ventana:
Encontramos dos opciones para ubicar los estilos:
Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se añadirán a ella.
Una nueva hoja de estilos... creará una hoja nueva para las reglas exportadas. Deberemos de
indicar dónde queremos guardar el archivo, normalmente en la misma carpeta que las páginas.
Los estilos seleccionados se quitarán de la página actual, y se vinculará con la hoja de estilos.
Vincular una hoja de estilos.
Si queremos utilizar una hoja de estilos ya existente en nuestra página, debemos vincularla.
Podemos hacerlo desde el menú Formato → Estilos CSS → Adjuntar hoja de estilos... o
desde el panel Estilos CSS. Lo único que tendremos que hacer es seleccionar el archivo a
vincular. Las hojas de estilo tienen la extensión .css.

Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo del
equipo, todos los archivos que utilicemos deben de estar dentro del sitio.
Unidad 5. HIPERENLACES
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un
elemento esencial para cualquier página web.
5.1. Introducción
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de
una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es
la que en HTML se encarga de definir los enlaces. Esto podrás observarlo en la barra de estado:
5.2. Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias
no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una
imagen, de un archivo Flash, de la hoja de estilo, etc.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo,
incluyendo el protocolo http://.
Por ejemplo, http://www.misitio.com, o http://www.misitio.com/pagina/pagina1.html.
La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y
será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si
pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

Referencia relativa al documento (por defecto):
La ubicación del archivo enlazado se toma en relación con la ubicación del la página. Es decir,
partimos de la carpeta en la que se encuentra el documento.
Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que
utilizar su nombre. Por ejemplo, pagina2.htm.
Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la
carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif.
Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos
deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente dirección
http://www.misitio.com/pagina/informacion/index.html.
En esta página queremos mostrar una imagen que se encuentra en la carpeta
http://www.misitio.com/pagina/secciones/seccion1.html,
¿Cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta información, subimos un nivel y luego
nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
Esta opción depende de la ubicación del archivo, y pueden no funcionar correctamente si
alteramos la estructura de carpetas.
Esta es la opción por defecto de Dreamweaver, y es la forma más habitual.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando
como origen la carpeta raíz del sitio.

Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.
En el ejemplo anterior si tuviésemos definido como sitio la carpeta http://www.misitio.com/, un
enlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se
crearía como /pagina/secciones/seccion1.html.
Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría
independientemente de su ubicación.
Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor de
pruebas, ya que Windows interpretará como raíz la raíz del disco duro.
Marcadores o Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para
ello, indicamos el nombre del punto de fijación a continuación de la ruta del archivo (relativa o
absoluta) separados por una almohadilla (#).
El formato sería nombre_de_documento.extension#nombre_de_punto.
Si el punto de fijación está en la propia página, basta con indicar únicamente el punto en el
enlace, por ejemplo #apartado2
Podemos definir el punto dentro de un documento a través del menú Insertar, opción Anclaje con
nombre. O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde el
Inspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos
en la página.
Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente
a los nombres de los archivos y carpetas en el servidor (local o remoto).
Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.
También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás
problemas a la hora de referenciar tus objetos.

5.3. Crear enlaces
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer
el Vínculo en el inspector HTML.
Por ejemplo, aquí hay un enlace a www.aulaclic.es, que al ser un archivo externo es de
referencia absoluta, por eso contiene http://
Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que
explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el
cursor.
Texto: es el texto que mostrará el enlace. Si teníamos un texto seleccionado, aparecerá ahí.
Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás
escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta para buscar los
archivos que existan dentro del sitio.
Destino: la ventana donde se abrirá la página, este campo se explica en el siguiente apartado.

Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el
cursor sobre el enlace.
Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace
mediante la pulsación de la tecla Alt más la tecla de acceso indicada.
Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces
pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad
del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. Por
defecto, se tabularán por orden de aparición.
5.4. Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede
variar dependiendo de si el documento está basado en marcos.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que
aparece a través del menú Insertar, opción Hipervínculo.
_blank: Abre el documento vinculado en una nueva ventana o pestaña del navegador.
_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el
conjunto de marcos padre. Tiene sentido si se emplean marcos.
_self: Es la opción predeterminada, abre el documento vinculado en el mismo marco o ventana.
_top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se
emplean marcos.
Si la página no usa marcos (lo habitual hoy en día) simplemente no especificaremos nada para
abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas.
Lo habitual es abrir las los enlaces a páginas del sitio en la misma ventana, y los enlaces
externos en ventanas nuevas. Otra tendencia dice que una página nunca debería de abrir
nuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere abrir en
ventanas nuevas.

5.5. Formato del enlace
En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo,
puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades de
la página. Estos tres colores diferentes corresponden a los tres estados del vínculo: vínculo
normal, vínculo activo (el último pulsado) o vínculo visitado.
Aquí tienes dos vínculos de ejemplo:
http://www.misitio.es/ http://www.misitio.org/
Si has visitado alguno, verás que sale en un tono morado, si no sale en azul.
Recuerda que como todo en nuestra página, los vínculos tienen un formato por defecto, pero es
totalmente personalizable por CSS. Para ello, basta con crear una Regla de estilo para la
etiqueta a.
Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores:
a:link para los enlaces normales.
a:visited para los enlaces visitados.
a:active para los enlaces activos.
Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al
pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa),
aparece el contorno de esa zona.
Aquí tenemos dos vínculos en una imagen:
Como puedes ver, la primera imagen que hace de vínculo contiene un recuadro alrededor. Este
es el formato por defecto, pero no suele quedar bien, sobre todo en imágenes con el fondo
transparente.

Veamos como quitarlo utilizando CSS.
En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y
pulsamos Editar regla.
En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a img, es decir,
imágenes que estén dentro de una etiqueta a (de enlace).
Se abrirá la ventana Definición de regla para a img:
En ella, seleccionamos la categoría Borde, y en Style seleccionamos none. Pulsamos Aceptar.
Esta regla hará que las imágenes con enlace se muestren sin borde.
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al
situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.

5.6. Enlace a correo electrónico
Es posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se
desea que los visitantes de la web puedan contactar con nosotros.
La sintaxis del vínculo en este caso es mailto:direccióndecorreo.
Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando
previamente el texto o la imagen deseados.
También es posible a través del menú Insertar, opción Vínculo de correo electrónico.
En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que
contendrá el vínculo de correo.
Lo que hace esta opción es abrir el cliente de correo predeterminado del usuario (Outlook,
Firebird...). Por lo que puede no ser práctica si el usuario no lo tiene, se conecta en un
ordenador público, o emplea el correo web directamente.
Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerirá una
página dinámica. Otra opción sería mostrar nuestra dirección de correo, para que el usuario
pueda enviarnos el correo como quiera. Si publicamos nuestra dirección en la web es mejor
hacerlo como una imagen, o escribiéndola de forma que la pueda entender un humano (por
ejemplo (micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la emplearán
para el envío de correo no deseado.

UNIDAD 6. IMÁGENES
En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo
crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que
ayudan a mejorar la apariencia de nuestras páginas.
6.1. Introducción
Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la
información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante,
no conviene abusar, ya que aumentarán mucho el tamaño final de la web.
6.2. Insertar una imagen
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de
esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te
acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz
del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta,
lo habitual es cambiar también sus imágenes.
Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el
campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de
si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la
carpeta imágenes y el documento en el que deseamos insertar la imagen. Dicha imagen,
llamada foto.jpg, se encuentra dentro de la carpeta imágenes.
En el caso de insertar la imagen como relativa al Documento la ruta sería:
imágenes/foto.jpg
Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:
/imágenes/foto.jpg
Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el
documento.
Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en
Dreamweaver aparecerá así indicando que el enlace al archivo está roto.
En ese caso, la imagen que aparecerá en el navegador será similar a ésta:
Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del
campo Alt del inspector de propiedades.

6.3. Propiedades de una imagen
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Desde aquí podremos establecer distintos atributos a la imagen:
Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente.
Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección
en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer
que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen.
En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es
un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Si lo
que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la
imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos
que hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorer
muestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores
no lo harán, respetando el estándar.
En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle
alineación, bordes e incluso tamaño con sólo un clic.
Puedes asignarle un grosor de borde desde el campo Borde.
Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.
Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen del
texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y
horizontal respectivamente entre la imagen y el texto.

Además, encontramos algunos controles de Edición: El botón nos permite optimizar la
imagen desde Dreamweaver, cambiando el formato o creando transparencias. Por otro lado, el
icono nos permite editar la imagen con un programa externo, como Photoshop o Paint.
MAPA DE IMAGEN
Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algún
tipo de comportamiento.
Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se
desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.
Estando seleccionada la imagen, ya es posible crear un mapa a través de los botones del
inspector de propiedades que tienen el siguiente aspecto: . Si no te aparecen
despliega el panel Propiedades para verlo completo.
Los tres últimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden
tener forma rectangular, circular, o libre, dependiendo del botón pulsado.
Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la
imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los lugares
donde se desea que comience y finalice el mapa, así como sobre el resto de lugares (en orden)
que se desea que recorra el mapa en el caso de forma libre.
Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vínculo y
un texto alternativo a ese mapa como puedes ver a continuación:

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creación de un mapa, para
que el puntero recupere su forma original al situarse sobre una imagen. De este modo, es
posible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitios
deseados, para ajustarlos mejor a la imagen.
OPTIMIZADOR DE IMAGEN
Cambiar el formato del archivo
Al pulsar el botón del Inspector de propiedades de la imagen, accedemos a la ventana
Presentación preliminar de la imagen, similar a la que vemos a continuación:

Sobre los botones de Aceptar y Cancelar, encontramos herramientas que nos permiten
desplazarnos por la imagen o el zoom. También encontramos las opciones de visualización. Una
muy útil es la que nos permite ver varias vistas de la imagen, pulsando el icono . En la
imagen anterior, vemos cuatro vistas del mismo archivo.
A cada vista podemos asignarle un formato de archivo distinto para comparar las diferencias. No
tenemos más que hacer clic en la vista, y seleccionar el formato que queramos del desplegable
Formato. En la pestaña Opciones podremos cambiar las opciones de cada formato.
Es muy importante la información que aparece junto a cada vista, que nos indica el formato
elegido y el tamaño que ocuparía el archivo en ese formato.
Vamos a examinar el ejemplo que tenemos en la imagen. Ten en cuenta que el resultado que
obtenemos depende íntimamente de la imagen seleccionada, y si utilizamos otra imagen podría
dar un resultado totalmente opuesto:
• La primera vista, arriba a la Izquierda, es un formato PNG 32.
Podemos ver que es el resultado de mayor calidad. La transparencia se muestra perfectamente,
por ejemplo en la sombra, y que podemos ver el fondo a través de la esfera, dando la sensación
de que sea de cristal. Por contra, vemos que es el archivo de mayor tamaño (14,59 K), mucho
mayor que el resto.
Nos quedaremos con este formato, si es necesario mantener las transparencias intactas.
• La segunda vista, arriba a la derecha, utiliza el formato GIF.
El archivo ya es algo menor (5,89 K). Lo primero que llama la atención es que sólo es
transparente el fondo. Esto se debes que GIF sólo admite un color uniforme como transparencia,
no admite distintos niveles de transparencia como PNG. Podemos ver que aunque la imagen no
tiene tonos de color continuos, ya que todos son degradados, no perdemos colores. Esto se
debe a que todos están dentro de la misma gama (como podemos ver en la paleta de la
izquierda) y no sobrepasan los 255.
Nos quedaríamos con este formato si no estuviese la sombra, siendo todo el fondo transparente
uniforme, y pudiésemos prescindir de la transparencia de la esfera.

• En la vista de abajo a la izquierda, empleamos un JPG de alta calidad.
Podemos ver que la calidad del resultado es casi idéntica al GIF. Salvo que sin transparencia, ya
que este formato no las soporta. No obstante, sí podemos ver que como la imagen no tiene
tonos continuos de color, el JPG logra una imagen de menor tamaño (2,95 K) que PNG y GIF.
Esta sería la mejor opción si podemos prescindir de las transparencias, por ejemplo porque el
color de fondo del documento también es blanco.
• En la vista inferior derecha tenemos un formato JPG de baja calidad.
Podemos comprobar que aunque es el archivo de menor tamaño, también es el de peor calidad.
En este caso, la pérdida de calidad no compensa el ahorro de tamaño.
Se trata, por tanto, de lograr un buen equilibrio o entre tamaño y calidad, ajustándolo a las
necesidades concretas de la imagen.
También hay que tener en cuenta que para poder elegir el formato adecuadamente debemos de
partir del formato con mayor calidad. En el ejemplo, la imagen original era un PNG 36. Si
hubiésemos partido del JPG de peor calidad, no la podríamos haber mejorado.
Y una vez más, recalcamos que estos resultados son para esa imagen en concreto.
Transparencias
En ocasiones puede resultar útil poder hacer invisibles algunos colores que forman parte de una
imagen. Normalmente lo que se desea hacer transparente es el fondo.
Por ejemplo, en la imagen siguiente el fondo puede desentonar con el fondo de la página, o
hacer que su apariencia sea más pobre.
Hay que tener en cuenta que lo que podemos elegir es un color (varios) de la imagen que será
transparente, haciendo que cada píxel de ese color sea transparente. Por lo que ése color sólo
debe de aparecer en las zonas que queramos cambiar. Además el fondo tiene que estar
claramente delimitado.

Los formatos que nos permitirán crear la transparencia serán PNG 8 y GIF. Si la imagen original
era JPG, el resultado no será bueno aunque lo cambiemos de formato, y que JPG altera los
tonos continuos.
Todo esto lo haremos desde la ventana Presentación preliminar de la imagen a la que
accedemos pulsando el botón del Inspector de propiedades de la imagen.
En el panel de la izquierda (recuerda que debe de ser el formato PNG 8 o GIF). Encontramos la
paleta de colores que forma la imagen.
Una forma de aplicar transparencia es a través de los botones que podíamos ver
en la imagen del apartado anterior.
Al seleccionar uno de los dos primeros botones, el cursor toma la forma de un cuentagotas .
Para hacer un color transparente, basta con hacer clic sobre el color (en la paleta de colores o
directamente sobre la imagen) con esta herramienta. Distinguiremos los colores transparentes
porque dejan ver la cuadrícula de cuadros blancos y grises:
La diferencia entre el primer y el segundo de los botones de cuentagotas, es que el primero solo
permite asignar transparencia a un color, mientras que el otro permite añadírsela a varios. El
último botón se utiliza para quitar la transparencia de algún color.
Al hacer transparente el fondo azul, el resultado final es el siguiente:
La existencia de transparencia permite mejorar notablemente la estética de nuestras páginas,
integrando mejor las imágenes con el diseño.

6.4. Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.
Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de
tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño
original.
Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo
podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc..
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de
Dreamweaver y modificamos su tamaño de varias formas diferentes:
Tamaño original Con tamaño modificado
El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el que
aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño de
algunas imágenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamaño.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los
recuadros negros que aparecen alrededor de la imagen.
La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos
campos aparecerán en el inspector cuando esté seleccionada alguna imagen.
Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en
negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original
haciendo clic sobre ella.

Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura
y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse
el archivo completo con su tamaño original.
Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por
ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta
sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una
miniatura real que ocuparía mucho menos tamaño.
Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen.
Para hacerlo, seleccionamos la imagen, y pulsamos en el icono del Inspector de
propiedades. Se abrirá la ventana Presentación preliminar de la imagen. Nos fijamos en la
pestaña Archivo.
En la sección escala, podemos establecer un porcentaje del tamaño original.
El nuevo tamaño se mostrará en An (ancho) y Al (alto). También podemos introducir
directamente el nuevo tamaño.
Incluso podemos recortar un área de la imagen, seleccionando Exportar área, y seleccionando el
área de la imagen en la previsualización de la derecha (no se ve en la imagen anterior).
Cuando lo tengamos, pulsamos Aceptar.

En este caso, si hemos alterado físicamente el archivo.
El resultado es bastante bueno, aunque siempre será mejor con herramientas especializadas,
como Photoshop o GIMP.
6.5. Imagen de sustitución. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo
de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de
distintas páginas.
Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes
Hemos creado el siguiente rollover. Sitúa el cursor sobre él para ver qué es lo que ocurre.
Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción
Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de
sustitución.
Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la
imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras
debidas a la descarga de la imagen cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que
aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada
en el navegador.
El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede
hacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.
6.6. Barra de navegación
Una barra de navegación es un conjunto de imágenes que se utilizan como opciones de menú
para navegar dentro de una web. Una página web solo puede contener una única barra de
navegación.
Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos de imagen, a
la opción Barra de navegación.
En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de los
botones, el vínculo para cada uno de ellos, etc.
A través de los botones superiores de la ventana es posible crear y eliminar botones de la barra
de navegación, así como reordenarlos. Con se crea un botón nuevo, con se elimina el
botón seleccionado, y con se puede modificar la posición del botón seleccionado.

En Imagen Arriba indicamos la imagen que quieres mostrar inicialmente (cuando todavía no se
ha hecho clic).
En Sobre imagen, pones la imagen que se mostrará cuando el usuario coloque el cursor sobre el
botón y éste estaba mostrando la imagen asignada en Imagen Arriba.
En Imagen abajo, indicamos la imagen a mostrar después de que el usuario haya hecho clic en
la imagen.
En Sobre mientras imagen abajo, indicamos la imagen a mostrar cuando el usuario mueva el
puntero sobre el botón y éste estaba mostrando la imagen asignada en Imagen Abajo.
De esta forma, si asignas imágenes distintas puedes saber cuál es el último botón que ha sido
pulsado (el que tiene Imagen Abajo).
Aquí tienes un ejemplo de barra de navegación. Para su creación se han utilizado las mismas
imágenes para todos los botones, pero como puedes ver, en el botón del medio aparece
inicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opción Mostrar
"Imagen abajo" inicialmente estaba activa para este botón. Sitúa el puntero sobre los distintos
botones, y pulsa sobre alguno, para ver qué es lo que ocurre.
Observa el campo Texto alternativo (es lo mismo que el campo Alt). Cobra especial importancia
en los elementos de navegación. Si no lo ponemos, el usuario no podrá navegar si la carga de la
imagen falla.
El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos está activo,
cosa que con un simple rollover no puede hacerse.
A través de la opción Insertar es posible especificar si los botones de la barra de navegación van
a aparecer de forma horizontal o vertical dentro de la página.

Sólo podemos tener uno de estos menús por página, así que si intentamos insertar uno nuevo,
editaremos el existente.
Tanto la imagen de sustitución como la barra de navegación se apoyan en JavaScript, una
tecnología que permite cambiar el contenido de la página dinámicamente.
6.7. Objetos inteligentes
Los objetos inteligentes son imágenes que obtenemos directamente desde un archivo de
Photoshop (.psd).
Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.
Pero una archivo .psd no es un archivo que podamos mostrar en una página web. Por eso, lo
que hará Dreamweaver es convertirlo a un formato estándar. Por eso, tras abrirlo, Dreamweaver
nos pedirá que elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismas
opciones que encontrábamos al pulsar el botón del Inspector de propiedades.
¿Qué ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del objeto
inteligente encontrarás un icono como éste . Las dos flechas verdes indican que el archivo
está sincronizado, es decir, la imagen está generada a partir del último archivo de Photoshop.
Pero puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo
abriendo el archivo .psd, o pulsando el icono del Inspector de propiedades,
que abrirá el archivo fuente de Photoshop.

Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha cambiado,
mostrando ahora una flecha roja: . Esto indica que la imagen que estamos viendo en
Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha modificado.
Podemos volverla a generar pulsando el icono Actualizar desde origen.
Por lo tanto, los objetos inteligentes son útiles para imágenes que tengamos que editar
frecuentemente.
Unidad 7. TABLAS
En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas,
insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del
borde.
7.1. Introducción
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero
gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al
lado de un bloque de texto, y otra serie de cosas que sin las tablas serían
imposibles de realizar.
La finalidad de las tablas es presentar una serie de datos de forma clara y
organizada, dividiéndolos en filas y columnas.
Hasta hace poco, y todavía hoy es fácil encontrar diseños web basados en tablas.
Esto es debido a la facilidad que nos ofrecen estos elementos para organizar
contenidos y repartir el espacio. No obstante, esta no es una práctica
recomendable, ya que las tablas no fueron pensadas para ello, y si no están bien
anidadas pueden ocasionar problemas al analizar nuestra web con herramientas
automáticas, como los bots que indexan el contenido para los buscadores. Para
maquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.
Las tablas están formadas por un conjunto de celdas, distribuidas en filas y
columnas. A continuación tienes un ejemplo de tabla.

Manual Dreamweaver

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie Manual Dreamweaver

Ähnlich wie Manual Dreamweaver (20)

Mehr von paoloarevaloortiz

Mehr von paoloarevaloortiz (20)

Manual Dreamweaver