Curso de Macromedia Dreamweaver 8. 138 PAG PDF

Curso de Macromedia Dreamweaver 8. Tutorial Gratis.
Indice
Curso de
Dreamweaver 8
Cursos de
aulaClic
Seleccin de
cursos
Comprar
cursos
Ms opciones
AulaClic. Curso de Dreamweaver 8. ndice

Cmo utilizar este curso.
1. Conceptos bsicos de Dreamweaver 8
2. El entorno de trabajo
3. Configuracin de un sitio local
4. El texto
5. Hiperenlaces
6. Imgenes
7. Tablas
8. Marcos
9. Formularios
10. Multimedia
11. Las plantillas

12. Capas
13. Comportamientos
14. Otros elementos
15. HTML desde Dreamweaver
Quieres aprender ms, quieres ms temas, ms ejercicios y evaluaciones? Te gustara tener un profesor que te resolviese las dudas?
Infrmate aqu.
Bsqueda
www.aulaclic.
Web
ndice detallado
http://www.aulaclic.es/dreamweaver8/index.htm (1 de 5)08/07/2006 20:52:44
es
Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Indice
Unidad 1. Conceptos bsicos de Dreamweaver 8

Qu es Dreamweaver 8
HTML bsico
Novedades de Dreamweaver 8
Editar pginas web
Cmo tener una pgina en Internet
Arrancar y cerrar Dreamweaver 8
Compaginar dos sesiones
Abrir y guardar documentos
Mi primera pgina
Unidad 2. El entorno de trabajo

La pantalla inicial
Las barras
Los paneles e inspectores
Personalizar el rea de trabajo
Vistas de un documento
La ayuda
Unidad 8. Marcos
Introduccin
Crear marcos
Seleccionar marcos
Guardar
Configurar marcos
Contenido del marco
Unidad 9. Formularios
Introduccin
Elementos de formulario
Crear formularios
Validar formularios
Unidad 10. Multimedia

Pelculas Flash
Sonido
Vdeos
Unidad 3. Configuracin de un sitio local

Introduccin
Crear o editar un sitio web sin conexin a Internet
Asistente para agregar un sitio de red
Vistas del sitio
Comprobar tamao para optimizar la carga
Propiedades del documento
Los colores
Unidad 4. El texto
Unidad 11. Las plantillas

Introduccin
Crear plantillas
Establecer regiones editables en una plantilla
Basar pginas en una plantilla
Unidad 12. Capas
Caractersticas del texto

Listas
Estilos CCS
El Panel CSS
Asociar una pgina de estilos
Crear un nuevo estilo
Gestionar estilos CSS
Unidad 5. Hiperenlaces
Introduccin
Tipos de enlaces
Crear enlaces
Destino del enlace
Formato del enlace
Enlace a correo electrnico
Vnculos rotos
Introduccin
Insertar una capa
Formato de una capa
Unidad 13. Comportamientos

Introduccin
Insertar un comportamiento
Mostrar-Ocultar capas
Llamar JavaScript
Unidad 14. Otros elementos

Marquesinas
Fecha
Regla horizontal
Cdigo de otras pginas
Adaptar webs a distitntas resoluciones
Unidad 6. Imgenes
Introduccin
Tipos de imgenes para una web
Insertar una imagen
Cambiar el tamao de una imagen
Mapas de imagen
Imagen de sustitucin. Rollover
Botones Flash
Texto Flash
Barra de navegacin
Unidad 7. Tablas
Unidad 15. HTML desde Dreamweaver

Etiquetas
El inspector de cdigo
Completar las etiquetas
Errores en el cdigo
Buscar y reemplazar
Introduccin
Insertar una tabla
Rellenar las celdas
Seleccionar elementos de una tabla
Formato de tabla
Cambiar tamao de tabla y celdas
Aadir y eliminar filas y columnas
Anidar, dividir y combinar celdas
Modos de tabla
Ejercicios paso a paso

3. Crear un sitio web local
3. Crear nuevo documento y modificar sus propiedades
4. Insertar texto y modificar sus propiedades
4. Convertir texto en una lista
4. Crear estilos CSS
Secuencias animadas (vdeo tutoriales) Ejercicios propuestos

1. Conceptos bsicos
2. Las vistas
2. La ayuda
3. Crear un sitio local
3. Las propiedades de la pgina
4. Las caractersticas del texto
4. Crear estilo CSS
Pruebas evaluativas
3. Crear sitio local y modificar las

1. Conceptos bsicos de Dreamweaver 8
propiedades de la pgina
4. Modificar las propiedades del texto 3. Configuracin de un sitio local
4. El texto
Aviso legal: Este curso es gratuito siempre que se visualice desde la pgina web de aulaClic. No est permitido descargar el curso.
aulaClic S.L. Todos los derechos reservados. Prohibida la reproduccin por cualquier medio.
Enero 2006.
Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 1
Unidad 1. Conceptos bsicos de Dreamweaver 8 (I)
Bsqueda
Qu es Dreamweaver 8
Dreamweaver 8 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar
manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Adems 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.
Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe-Macromedia, la versin caduca al cabo de 30
das, pero seguro que te animas a comprar la versin de pago de este estupendo programa.
Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.
Novedades de Dreamweaver 8
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior, Dreamweaver MX 2004.
Integracin de RSS: con Dreamweaver 8 podrs integrar entradas RSS provinientes de otras pginas con slo introducir la fuente y arrastrar y colocar
los campos. De esta forma podrs introducir datos en forato XML fcil y cmodamente.
Mejoras CSS: esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el
panel de estilos CSS, donde ahora podrs acceder a la configuracin de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrcula
editable desde donde podrs modificar sus propiedades. Adems, Dreamweaver 8, aade una nueva barra de herramientas que proporciona la
reproducin inmediata de los estilos para diferentes medios (pantalla, impresora, webTV, PDAs...).
Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C.
http://www.aulaclic.es/dreamweaver8/t_1_1.htm (1 de 3)04/12/2006 23:12:51
Transferencia de archivos: Ahora con Dreamweaver 8 podrs seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e
incluye los archivos creados o modificados recientemente. Su sincronizacin ha mejorado notablemente siendo posible una mejor gestin de cambios,
adems de pemitir en uso de bolqueo/desbloqueo de archivos para que estos no se sobreescriban.
Interfaz mejorada: Los usuarios con problemas visuales podrn acceder auna opcin de Aumento de la pantaa en vista de diseo para analizar o
trabajar con difcles anidamientos de tablas. Adems de la inclusin de informacin visual gracias a las guas que permitirn la medicin pxel a pxel de
todos los elementos.
Nueva barra de herramientas: Se ha aadido una barra de herramientas a Dreamweaver 8, podrs encontrarla en la parte lateral izquierda del modo
de Cdigo, esta barra hace mucho ms accesible el cdigo al permitirnos la navegacin por etiquetas y su contraccin. Una de las nuevas novedades es
la posibilidad de aadir comentarios con un slo clic.
Compatibilidad: Comentaremos, adems, la compatibilidad aadida en esta versin con PHP5, Coldfusion MX 7 y Video Flash.
Editar pginas web

Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los
documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo
HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho
ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones
que incluye, es Macromeda Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive,
NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.
Cmo tener una pgina en Internet

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde
Internet las 24 horas del da. 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 pgina
precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a
vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de
hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. 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 ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la
empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que pueden
habilitarse y si disponemos de una base de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para
usuarios avanzados.
Pg. 1.1
Enero 2006.
Unidad 1. Conceptos bsicos de Dreamweaver 8 (II)
Bsqueda
Arrancar y cerrar Dreamweaver 8
Veamos las dos formas bsicas de arrancar Dreamweaver 8.

Desde el botn Inicio
situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el
botn 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 Macromedia, seguidamente Macromedia Dreamweaver 8, hacer clic sobre l, y se arrancar el programa.
Desde el icono de Dreamweaver 8 del escritorio
Puedes arrancar Dreamweaver 8 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios tambin puedes compaginar dos
sesiones de la forma que te explicamos aqu.
Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedir confirmacin para guardar o no cada uno de
ellos.
Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botn abrir
de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl+O.

Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn abrir
Pulsar la combinacin de teclas Ctrl+N.

Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Hacer doble clic sobre el archivo en la ventana del sitio.
Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina bsica, HTML.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botn guardar
Pulsar la combinacin de teclas Ctrl+S.

Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente 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.
Hacer clic en el botn guardar todo
Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la
opcin 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 opcin, al menos hasta que te hayas habituado a manejar el programa.
Pg. 1.2
Enero 2006.
Unidad 1. Conceptos bsicos de Dreamweaver 8 (III)
Bsqueda
Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web sencilla, con varios estilos de texto, una imagen
y un enlace a otra pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn
hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para descubrir lo fcil que es.
Mi primera pgina
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede hacerse. Abres un documento nuevo y
seleccionas la Categora Pgina bsica, HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.
Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento.
Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Entonces se abrir una ventana como la que aparece ms abajo.
Cambia el Ttulo por Mi primera pgina.

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul.
Seguidamente pulsa sobre el botn Aceptar.
Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un
cd-rom o en un disquete, pero preferiblemente en el disco duro.
Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn derecho del ratn sobre la imagen que
queremos traer de Internet, se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que
permite grabar dicha imagen en un fichero de nuestro disco duro.
en una esquina de la imagen, si haces
En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen estos iconos
clic en el icono del disquete aparecer el mismo men Guardar imagen como... a que hacamos referencia anteriormente.
Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que estamos creando. Puedes guardarla, por ejemplo, en la
carpeta Mis Documentos.
Ahora tienes que insertar la imagen debajo de la segunda lnea de texto. En primer lugar debes situar el cursor
al final de la segunda lnea y pulsar un intro (enter) para ir a una nueva lnea. Despus debes dirigirte al men
Insertar, a la opcin Imagen.
En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas guardado, y
despus seleccionarla.
Pg. 1.3
Enero 2006.
Unidad 1. Conceptos bsicos de Dreamweaver 8 (IV)
Bsqueda
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 travs del men Ventana, con la opcin Propiedades.
Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contraido. Para que te
aparezca desplegado debes pulsar sobre el botn , que aparece junto al nombre.
Selecciona la primera lnea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.
Despus de esto, la apariencia de la primera lnea habr cambiado. Selecciona la imagen y las dos timas lneas de texto. Pulsa sobre el botn
para centrarlos.
Una vez hayas centrado la imagen y las otras dos lneas siguientes, selecciona la segunda lnea de texto, que an no ha sido modificada. Cambia el Formato por
y pulsa tres veces sobre el botn
.
Encabezado 3, pulsa una vez sobre el botn
Selecciona de nuevo la ltima lnea, y en Vnculo introduce http://www.elpais.es, para crear un enlace a esa otra pgina:
Despus de todos estos pasos, puedes ver cmo ha quedado el documento pulsando la tecla F12.
Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo, desde la opcin
Guardar.
Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensin ha de ser htm o html.
Por ejemplo, puedes llamarlo prueba1.htm.
Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos los pasos anteriores. Compara esta pgina con la tuya, para ver
si lo has hecho todo bien.
Prueba evaluativa del Tema 1.
Pg. 1.4
Enero 2006.
Unidad 2. El entorno de trabajo (I)
Bsqueda
Vamos a ver cules son los elementos bsicos de Dreamweaver 8 , la pantalla, las barras, los paneles, etc, para saber diferenciar
entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si
en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear
pginas web.
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 elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y
en general todas las de este curso) 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, como veremos ms adelante.
Las barras
La barra de ttulo
La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que
aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn
los botones para minimizar, maximizar/restaurar y cerrar.
La barra de mens
La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por
ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde
los paneles.
La barra de herramientas estndar
La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales,
como Abrir
, Guardar
, etc.
La barra de herramientas de documento
La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales
que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.
La barra de estado
La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos en un
documento en blanco estamos directamente sobre la etiqueta <body>).
Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. En cualquier momento
puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene
al 100%).
Los paneles e inspectores
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.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver
los ms importantes.
El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms
frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o
cursiva, etc.
Pulsando sobre el botn
se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-derecha.
Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar.

La barra de herramientas Insertar o panel de objetos
La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al
men Insertar. Los elementos estn clasificados segn su categora: tablas, texto, objetos de formulario, etc.
Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior),
para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.
Si lo deseas puedes personalizar el rea de trabajo, te explicamos cmo hacerlo aqu
Pg. 2.1
Enero 2006.
Unidad 2. El entorno de trabajo (II)
Bsqueda
Vistas de un documento
Puedes cambiar la vista del documento a travs de la barra de herramientas de documento.
La vista Diseo
La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar
habitualmente.
La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener
directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo.
La vista Cdigo y Diseo
La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo 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 ayuda
A travs del men Ayuda puedes:

Acceder al cuadro de dilogo de ayuda muy similar al de
Windows donde puedes buscar por temas, por ndice o por
contenido, si seleccionas la opcin Utilizacin de Dreamweaver
o simplemente pulsando F1.
Acceder a tutoriales (opcin Primeros pasos con
Dreamweaver).
Abrir el panel Referencia en el que encontrars la sintaxis y
descripcin de las etiquetas HTML.

Acceder al Centro de servicio tcnico de Dreamweaver en la web de Macromedia.
Acceder al Foros en lnea de Macromedia.
Pg. 2.2
Enero 2006.
Unidad 3. Configuracin de un sitio local (I)
Bsqueda
En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los documentos,
como puede ser el color de fondo.
Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario
disear y planificar el sitio web antes de crear las pginas 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 imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas
carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce
como sitio local.
Despus se podrn 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.
La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar
FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una pgina con
ese nombre cuando se intenta acceder a una URL genrica.
Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com en el navegador, ste intentara cargar la pgina http://
www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.
htm.
Crear o editar un sitio web sin conexin a Internet
Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el
sitio en Dreamweaver.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios....
Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder
a cada uno de los sitios creados y a la opcin Administrar sitio.
En el caso de haber seleccionado la opcin 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 opcin Nuevo..., como si se elige la opcin Editar..., se
mostrar la misma ventana en la que definir las caractersticas del sitio.
Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categora Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local.
Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina principal del sitio, de la que colgarn
el resto de documentos HTML dentro del sitio, si en la carpeta raz del sitio existe una pgina con el nombre index.htm, Dreamweaver
la coger por defecto.

Estas tres caractersticas son las imprescindibles para definir un sitio local.
Las dems 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.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa Bsicas, en vez de la pestaa
Avanzadas.
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y
pulsar sobre el botn Listo.
Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable de
la pestaa Archivos.
Si lo deseas, puedes ver un ejemplo de cmo configurar el sitio remoto, consltalo aqu
Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local.
Pg. 3.1
Enero 2006.
Bsqueda
Unidad 3. Configuracin de un sitio local (II)

Vistas del sitio
Es posible visualizar un sitio en el panel Archivos o en una ventana.

El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando F8.
Para cambiar de una vista a otra hay que pulsar sobre el botn
que aparece en la parte superior del panel y de la ventana.
Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio.
En esta imagen se visualizan el mapa del sitio y el sitio local.
En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm, ya que ste ha sido definido como
pgina principal del sitio y contiene vnculos hacia los otros dos.
Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las pginas no se mostrarn
correctamente: no aparecern imgenes, no funcionarn enlaces, etc.
En cambio, si estas modificaciones se hacen desde dentro
de Dreamweaver, a travs del sitio, es posible actualizar
automticamente las pginas para que si hacen referencia
a un objeto que ha cambiado, despus no se produzcan
problemas al visualizarlas.
Al modificar algn objeto que es referenciado por algn
otro documento, se muestra una ventana similar a esta,
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 botn Actualizar.
Propiedades del documento
Es conveniente definir sitios homogneos, que todas las pginas 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 pginas a travs del cuadro de dilogo Propiedades de la pgina.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades
de la pgina. Se abrir el cuadro de dilogo siguiente:
Las propiedades estn organizadas en categoras.

En la categora Aspecto, como ves en la imagen anterior, encontramos las propiedades:
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 segn 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.
Color de 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.
Tamao: permite definir el tamao de la letra.
Color del texto: es el color de la fuente.
Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo funcionan en Microsoft Internet
Explorer, mientras que el ancho y el alto de mrgen solo funcionan para Netscape Navigator. Ninguno de estos mrgenes aparece en la
ventana de documento de Dreamweaver, solo se mostrarn en los navegadores.
En la categora Ttulo/Codificacin encontramos la propiedad:

Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver.
En la categora Vnculos encontramos las propiedades:
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace
a otras pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin
podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.
En la categora Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de documento
de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.
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 Microsoft Internet Explorer y en Netscape
Navigator, tanto en Windows como en Macintosh.
Tambin es posible personalizar los colores a travs del botn
Los colores pueden asignarse a travs de los botones:
de la parte superior de la paleta.
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin 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
pgina, que tienes ms arriba.
, lo que hace que se despliegue la paleta
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris
de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #3399FF, el botn quedara del
.
siguiente modo:
Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus propiedades.
Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador. Para ver cmo comprobar el
.
tamao de los documentos, pulsa aqu
Ejercicios del Tema 3.
Pg. 3.2
Enero 2006.
Unidad 4. El texto (I)
Bsqueda
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
estilos creados por nosotros mismos, no predefinidos.
Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector de propiedades.
Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque sean menos que las que se nos
ofrecen a travs del men Texto.
Formato:
Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o preformateado. Los
encabezados se utilizan para establecer ttulos dentro de un documento. El formato preformateado 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 preformateado se respetar que hayan varios espacios en lugar de solo uno.
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.
Tamao:
Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, centmetros, etc...
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha
establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro.
Estilo:
Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto tambin se puede, entre
otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que
los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo.
Alinear:
A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada,
derecha y justificada.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas.
Sangria:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen que se establece a ambos
lados del texto. En este caso caso los botones se refieren a sangra a la izquierda del texto.
Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.
Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas.
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 opcin de lista correspondiente, ya sea a travs del inspector de propiedades, o a travs del men Texto.
La lista con vietas (desordenada) se selecciona a travs del botn
.
travs del botn
Ejemplo de lista numerada (ordenada):
1. Preparar la mochila
1. Sacar los libros de ese da
2. Introducir los libros del da siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador
, mientras que la lista numerada (ordenada) se selecciona a
Ejemplo de lista con vietas (desordenada):
Perro
Gato
Aves
Canario
Loro
Hamster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en los elementos de
la lista que se desee que pasen a formar parte de la lista anidada.
A travs del men Texto, opcin 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 algn lugar de la lista para que se active este submen.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que
se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.
Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.
Pg. 4.1
Enero 2006.
Unidad 4. El texto (II)
Bsqueda
Estilos CSS (I)
En el men Texto, opcin Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado.
Es posible definir otra serie de estilos, aplicables a prrafos o a palabras seleccionados. Estos nuevos estilos, llamados Estilos
CSS, se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamao, de modo que no sea
necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignacin de esos mismos valores a otras partes
del texto. Tambin algunas de sus opciones pueden utilizarse para definir atributos de imgenes y otras caractersticas que no
permiten definir los estilos HTML, como el color de fondo para el texto, etc
Los estilos CSS estn en hojas de estilo de actualizacin automtica (tambin denominadas Hojas de Estilo en Cascada) se
utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamao, de modo que no sea necesario
asignar estos atributos uno a uno cada vez que se desee repetir la asignacin de esos mismos valores a otras partes del texto.
Tambin algunas de sus opciones pueden utilizarse para definir atributos de imgenes y otras caractersticas que no permiten
definir los estilos HTML, como el color de fondo para el texto, etc.
Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la etiqueta A HREF, que
corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la pgina adquiriran la apariencia definida en ese estilo.
Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del contenido de una pgina Web. Los
estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una pgina, desde la posicin precisa de
elementos hasta el diseo de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualizacin; cuando
actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automticamente.
El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran, aunque estos
navegadores suelen ser versiones antiguas, por lo que ocurrir en pocos casos.
Con Dreamweaver 8, la novedad es que las caractersticas que aplicamos a un texto crean automticamente estilos CSS que se
incrustan en el encabezado del documento actual.
Vemoslo:
Para crear un Estilo CSS personalizado:

1. En el documento, se selecciona el texto al que se desea aplicar caractersticas concretas.
2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la
fuente y del prrafo que queramos.
Automticamente Dreamweaver crear un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... segn los nombres de los
estilos ya creados.
Aparecer el nombre Estilo1 en el cuadro Estilo del panel Propiedades.
Tambin 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 desplegamos la lista de estilos y seleccionamos la
opcin Cambiar nombre... Aparecer un cuadro de dilogo para que
introduzcamos el nuevo nombre como la imagen inferior.
Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo.
Al aceptar, aparecer un panel con el nombre Resultados. Cerrar esta ventana.
De esta manera se puede crear un estilo para aadirlo a un documento.

Cada nuevo estilo que se crea, se aade a la lista de estilos, y los podemos acceder tambin de una manera rpida a travs del
men Texto, opcin Estilos CSS.
En el Panel CSS se puede verificar que se ha aadido automticamente el nuevo estilo.
Si lo deseas, puedes aprender ms sobre el panel CSS aqu
A continuacin tienes un prrafo al que se le ha aplicado el estilo CSS anterior:
Texto con estilo de clase

En el cdigo HTML de la pgina, el texto aparece de la siguiente forma:
<head>
<style type="text/css">
<!-.miestilo {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FF0000;
}
-->
</style>
</head>
<body>
<p class="miestilo">Texto con estilo de clase </p>
Para aplicar un Estilo CSS personalizado:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sita el punto de insercin del mouse en un prrafo
para aplicar el estilo a todo el prrafo. Si seleccionas un rango de texto dentro de un prrafo, el Estilo CSS slo afectar al rango
seleccionado.
En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo.
Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase.
Ejercicios del Tema 4.
Pg. 4.2
Enero 2006.
Unidad 5. Hiperenlaces (I)
Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.
Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o
archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.

Referencia absoluta:
Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en Internet, por ejemplo, "http://www.
aulaclic.com".
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra
el documento actual.
Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnvulo debe ser
"nombre_de_documento#nombre_de_punto". El punto se define dentro de un documento a travs del men Insertar, opcin
Anclaje con nombre.
Crear enlaces
La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el
objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector.
Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario
escribir en Vnculo nicamente una almohadilla #.
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.
Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continuacin y el enlace se
colocar en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla empezando siempre por
HTTP://
Destino: la pgina donde se abrir la pgina, este campo se explica en el siguiente apartado.
Ttulo: se trata de la ayuda contextual del vnculo, es equivalente al atributo ALT de las imgenes.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la pulsacin de la tecla Alt
ms la tecla de acceso indicada.
ndice de tabulador : Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla Tabulador. En este
campo podrs establecer un ndice indicando la prioridad del enlace y as configurar el modo en el que actuar el Tabulador es sus
diferentes saltos.
Destino del enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de los marcos de que
disponga el documento actual.
Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del men Insertar,
opcin Hipervnculo.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el
tema de Marcos.
Pg. 5.1
Enero 2006.
Unidad 5. Hiperenlaces (II)
Bsqueda
Formato del enlace
En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que
pueden especificarse a travs de las propiedades de la pgina. Estos tres colores diferentes son los que se asignan como color de vnculo, de
vnculo activo, y de vnculo visitado.
Aqui tienes un vnculo de ejemplo:
www.aulaclic.com
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est
definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.
Aqui tienes dos vnculos similares de ejemplo:
Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que que el campo Borde del
inspector de propiedades de la imagen vale uno (1), mientras que para la primera imagen vale cero (0).
El campo Borde sirve para ponerle un borde a la imagen, independientemente de si sta va a contener un vnculo o no.
Si se pone a cero (0), no aparece ningn borde, ya que esto indica que el tamao de las lneas que forman el recuadro es cero (0). Puede
hacerse un recuadro ms gordo incrementando el valor del campo Borde.
Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo. Suele adquirir la
apariencia de una mano sealando.
Enlace a correo electrnico
Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea que los visitantes de la web puedan
contactar con nosotros.
La sintaxis del vnculo en este caso es mailto:direccindecorreo.
Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados.
Tambin es posible a travs del men Insertar, opcin Vnculo de
correo electrnico.
En este caso no es posible asignar el vnculo a una imagen, solo
permite introducir el texto que contendr el vnculo de correo.
En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos rotos. Si no sabes lo qu son o cmo solucionarlos,
consltalo aqu
.
Pg. 5.2
Enero 2006.
Unidad 6. Imgenes (I)
Bsqueda
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales, como es el
caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas.
Introduccin
Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor
informacin visual.
Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. Esta informacin puedes
.
consultarla aqu
Insertar una imagen
Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen a travs
de la nueva ventana.
Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione Todos los archivos.
En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que sea relativa al
Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no verse al estar siendo buscada en la ubicacin anterior.
Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.
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 raz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que
deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del sitio.
Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque s en el navegador. En Dreamweaver aparecer
de la siguiente forma:
Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba sido insertada. Esto puede ocurrir si se ha
modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecer en el
navegador ser similar a esta:
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, que
explicaremos a continuacin.
Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Desde aqu podrs acceder a distintas propiedades:

Desde el campo Alt podrs asignarle una ayuda contextual a la imagen, esta se mostrar cuando coloques el ratn sobre ella, y es muy til de cara
a hacer pginas accesibles ya que el texto que se escribe ser ledo por los programas lectores para invidentes. Tambin es muy til, como ya
hemos visto, si la imagen por alguna razn no puede mostrarse.
En Clase podrs asignarle un estilo que hayas creado anteriormente, as podrs darle alineacin, bordes e incluso tamao con slo un clic.
Si le damos un valor al campo Vnculo convertiremos al imagen en un link a otra pgina. Para enlaces externos recuerda que debe empezar
siempre por HTTP:// y si deseas crear un vnculo a un enlace electrnico deber empezar por mailto:
En caso de que le hayas asignado un vnculo podrs decidir en qu ventana quieres que se abra selecionando un valor en el campo Destino.
Puedes asignarle un tamao de borde desde el campo Borde.
Y puedes seleccionar su alineacin con respecto al texto desde el campo Alinear.

Por ltimo las opciones Espacio V y Espacio H te sern 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.
Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se aplica directamente sobre el archivo de
imagen, sino que lo que vara es la visualizacin de la imagen dentro de la pgina.
Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo,
como Fireworks.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamao de varias
formas diferentes:
Imagen original
Imagen con tamao modificado
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar til modificar el tamao de algunas
imgenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamao.
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 travs de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecern en el inspector
cuando est seleccionada alguna imagen.
Si estos campos no contienen el tamao original de la imagen, el valor aparecer resaltado en negrita y aparecer a la derecha una flecha circular
que permite volver al tamao original haciendo clic sobre ella.
Pueden crearse vnculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella. A esto se le conoce como
.
mapa de imagen. Esta informacin puedes consultarla aqu
Pg. 6.1
Enero 2006.
Unidad 6. Imgenes (II)
Bsqueda
Imagen de sustitucin. Rollover
Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele utilizarse en los mens o en
los botones para desplazarnos a travs de distintas pginas.
Aqu tienes un ejemplo de rollover. Sita el puntero sobre l para ver qu es lo que ocurre.
Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la opcin Imagen de sustitucin. En la nueva ventana
hay que especificar la imagen original y la de sustitucin.
Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se activa, la imagen de sustitucin se carga cuando se
carga la pgina, 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 algn motivo sta no pueda ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs del campo Alt del inspector de
propiedades de la imagen seleccionada.
Botones Flash
Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse para crear mens, como pueden ser los botones
Flash.
Aqu tienes un ejemplo de botn Flash. Sita el puntero sobre l para ver qu es lo que ocurre.
Para insertar un botn Flash hay que dirigirse al men Insertar, Media, a la opcin Botn Flash, aparecer el siguiente cuadro de dilogo:
A travs de Estilo: puede seleccionarse uno de los distintos formatos de botn que se ofrecen.
En esta misma ventana hay que especificar tambin el Texto que mostrar el botn (Texto del botn:), as como el nombre con el que ser
guardado (Guardar como:) y el vnculo asociado (Vinculo: y Destino:).
Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lugar de la carpeta destinada a almacenar
imgenes, ya que de no ser as es posible que al intentar asignar un vnculo dentro del propio sitio, Dreamweaver no permita guardar el botn
con ese vnculo en una ubicacin diferente de la de dicho documento.
Recuerda que los botones deben guardarse con la extensin SWF.
A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus atributos:
Puede volver a abrirse el cuadro de dilogo anterior pulsando sobre el botn Editar, y a travs del botn Reproducir es posible probar el
funcionamiento del botn Flash desde Dreamweaver, sin la necesidad de tener que abrir la pgina con algn navegador.
Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo sobre el botn Reproducir (que habr cambiado por
.
el botn Detener)
Pg. 6.2
Enero 2006.
Unidad 6. Imgenes (III)
Bsqueda
Texto Flash
El texto Flash es similar a un rollover, pero en lugar de intercambiar imgenes intercambia el color del texto.
Para insertar texto Flash hay que dirigirse al men Insertar, Media, a la opcin Texto Flash.
En la nueva ventana, adems del texto, el vnculo y el nombre con el que ser guardado el texto, hay que especificar el color
original y el de sustitucin.
Aqu tienes un ejemplo de texto Flash. Sita el puntero sobre l para ver qu es lo que ocurre.
El inspector de propiedades del texto Flash es igual que el de un botn Flash.
Barra de navegacin
Una barra de navegacin es un conjunto de imgenes que se utilizan como opciones de men para navegar dentro de una web.
Un pgina web solo puede contener una nica barra de navegacin.
Para insertar una barra de navegacin hay que dirigirse al men Insertar, Objetos de imagen , a la opcin Barra de navegacin.
En la nueva ventana pueden especificarse cuatro imgenes diferentes para cada uno de los botones, el vnculo para cada uno de
ellos, etc.
A travs de los botones superiores de la ventana es posible crear y eliminar botones de la barra de navegacin, as como
reordenarlos. Con
se crea un botn nuevo, con
se elimina el botn seleccionado, y con
se puede modificar la
posicin del botn seleccionado.
En Imagen Arriba pones la imagen que quieres mostrar inicialmente (cuando todava no se ha hecho clic).
En Sobre imagen, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre el botn y ste estaba
mostrando la
imagen asignada en Imagen Arriba.
En Imagen abajo, pones la imagen que quieres mostrar despus de que el usuario haya hecho clic en la imagen.
En Sobre mientras imagen abajo, pones la imagen que quieres mostrar cuando el usuario mueva el puntero sobre sobre el
botn y ste estaba
mostrando la imagen asignada en Imagen Abajo.
De esta forma, si asignas imgenes distintas puedes saber cul es el ltimo botn que ha sido pulsado (el que tiene Imagen
Abajo).
Aqu tienes un ejemplo de barra de navegacin. Para su creacin se han utilizado las mismas imgenes para todos los botones,
pero como puedes ver, en el botn del medio aparece inicialmente una imagen diferente de la de los otros dos. Esto se debe a
que la opcin Mostrar "Imagen abajo" inicialmente estaba activa para este botn. Sita el puntero sobre los distintos botones, y
pulsa sobre alguno, para ver qu es lo que ocurre.
El que existan cuatro imgenes diferentes sirve para identificar cual de los vnculos est activo, cosa que con un simple rollover no
puede hacerse.
A travs de la opcin Insertar es posible especificar si los botones de la barra de navegacin van a aparecer de forma horizontal o
vertical dentro de la pgina.
Pg. 6.3
Enero 2006.
Unidad 7. Tablas (I)
Bsqueda
En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o
columnas y cambiar el tamao del borde.
Introduccin
Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto
en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar.
Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las
opciones de diseo.
Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuacin tienes un ejemplo de tabla.
Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.
En la nueva ventana habr que especificar el nmero
de Filas y Columnas que tendr la tabla, as como el
Ancho de la tabla .
El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Pxeles es
siempre el mismo, independientemente del tamao de la ventana del navegador en la que se visualice la pgina, en cambio, el
ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la pgina y se ajustar al tamao de la ventana del
navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.
Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se le asigna uno (1).
Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de stas.
Espacio entre celdas indica la distancia entre las celdas de la tabla.
Tambin se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que
los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los
mismos a mantener un seguimiento de la informacin de la tabla.
Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla.
En alinear texto indicamos dnde queremos alinear el ttulo con respecto a la tabla.
En Resumen: indicamos una descripcin de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no
aparece en el navegador del usuario.
Rellenar las celdas
Las celdas son cada uno de los recuadros que forman una tabla, resultan de la interseccin entre una fila y una columna.
imagen y texto
COLUMNA
Texto dentro de
una celda
CELDA
FILA
Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el cursor previamente
dentro de la celda deseada.
Pg. 7.1
Enero 2006.
Unidad 7. Tablas (II)
Bsqueda
Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una de ellas es a travs del men Modificar estando el cursor en la tabla, o
desplegando el men contextual de la tabla al pulsar con el botn derecho sobre ella. En ambos casos aparece la opcin Tabla,
a travs de la cual se puede elegir la opcin Seleccionar tabla.
Tambin es posible seleccionar una tabla pulsando con el ratn sobre el borde que la rodea, o pulsando sobre la etiqueta <table>
que aparece en la barra de estado de la ventana de documento.
Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver muestra en una
zona verde el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos mens desplegables (men de
encabezado de la tabla y men de encabezado de la columna). Estos mens permiten acceder rpidamente a determinados
comandos relacionados con la tabla.
Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su visualizacin seleccionando la opcin Anchos de
tablas del men Tabla o tambin desplegando de la barra de mens, el men Ver, Ayudas visuales, Anchos de tabla. De la
misma forma se desactiva su visualizacin.
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado, si aparecen dos
nmeros, el primer nmero corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo nmero es
el ancho el ancho visual que aparece en la vista de diseo, por ejemplo en la tabla anterior la primera columna tiene 139 (142), en
las propiedades de la celda tenemos el ancho 139 pxeles pero al contener una imagen que necesita ms espacio, la columna
ocupar realmente 142 pxeles (ancho visual de la columna tal como aparece en la pantalla).
Cuando ocurren estas diferencias podemos hacer que en el cdigo (propiedades) se
cambie el ancho por el real, para ello slo tenemos que seleccionar la opcin Igualar todos
los anchos del men desplegable de encabezado de tabla.
En este men vemos que tambin tenemos la opcin Seleccionar tabla.
No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas.
Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la que ms te
gusta. Estas son las formas de seleccin:
Puedes utilizar la opcin Seleccionar columna del men de encabezado de columna (zona verde de anchos) esto slo es
vlido para seleccionar una columna.
Manteniendo pulsado y arrastrando el ratn hasta seleccionar la columna/s o fila/s completamente.
Tambin puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente, de modo
que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha.
En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la
barra de estado o sobre la etiqueta <td> para seleccionar la columna.
Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratn mientras se arrastra sobre las celdas deseadas.
Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace
clic sobre las celdas.
Formato de tabla
Las propiedades de la tabla se especifican a travs de su inspector de propiedades.
A travs del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo,
pueden indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha), el
color de fondo (en Col. Fondo) o de borde de la tabla (en Col. borde ), o la imagen de fondo (en Im.).
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros
valores.
La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que se insertar
dentro de la celda (o celdas) seleccionada.
La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo diferentes de los
especificados para la tabla global (en Fnd), el color del Borde de la celda, etc.
Dos opciones que posiblemente necesites utilizar con frecuencia sern Horiz y Vert, que definen la alineacin del contenido de la
celda de forma horizontal y vertical respectivamente.
Cambiar tamao de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. El tamao de la tabla a travs del
inspector de propiedades estar especificado por los valores de An (anchura) y Al (altura). Normalmente slo se especifica la
anchura, no la altura.
Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ninguno de estos dos valores para las
celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao, y no que se ajusten al contenido o al tamao de la
ventana.
No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de propiedades. Tambin es posible
hacerlo manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndolo hacia la posicin deseada.
Pg. 7.2
Enero 2006.
Unidad 7. Tablas (III)
Bsqueda
Aadir y eliminar filas y columnas

Existen varias formas de aadir y eliminar filas y columnas a una tabla.
Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el men contextual de la
tabla al pulsar con el botn derecho sobre ella, o bien abrir el men Modificar. En ambos casos aparece la opcin Tabla.
Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.
La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.
Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana,
donde es posible determinar si lo que se insertarn sern filas o columnas, el nmero de ellas que se insertar, y la posicin
donde se insertarn.
Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opcin Eliminar fila
o Eliminar columna del men Tabla.
Tambin se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)
Anidar, dividir y combinar celdas
Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.
A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla.
Para anidar tablas slo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya
hemos visto.
Combinar celdas consiste en convertir 2 o ms celdas en una sola por lo que dejar de haber borde de separacin entre
una celda y otra ya que sern una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el ttulo de la
tabla. En este caso habra que combinar todas las celdas de la primera fila en una sola
Mientras que dividir celdas consiste en partir en dos una celda.
Una de las formas de dividir y combinar celdas es a travs del inspector de propiedades.
Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn

del inspector de propiedades (lo encontrars en
la parte inferior izquierda del panel Propiedades, o pulsando sobre la opcin Combinar celdas de la opcin Tabla, que como ya
has visto puedes dirigirte a ella a travs del men contextual de la tabla y a travs del men Modificar.
Tienes que tener en cuenta que slo es posible combinar celdas contiguas, cuya combinacin pueda dar como resultado otra
celda, es decir, que su combinacin d como resultado un recuadro. Por ejemplo, en la siguiente tabla no podran combinarse las
celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda.
Para dividir una celda hay que pulsar sobre el botn

del inspector de
propiedades, o sobre la opcin Dividir celda de la opcin Tabla.
En ambos casos, aparece una ventana como sta, en la que hay que
especificar si la celda se va a dividir en filas o columnas, y el nmero de stas.
Modos de tabla
A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualizacin. Nosotros hemos trabajado en
todo el tema con el modo estndar, y vamos a seguir trabajando con l, pero se puede pasar a los otros modos a travs del men
Ver opcin Modo de tabla. Dentro de esta opcin podemos elegir entre Modo estndar, Modo de tablas expandidas, o modo
de diseo.
El Modo de diseo se utiliza para dibujar pginas con un diseo determinado, basndose en tablas. Utilizando esta vista, las
tablas no han de insertarse obligatoriamente en lneas de texto, como hemos hecho hasta el momento, sino que es posible
insertarlas en cualquier punto de la pgina, y Dreamweaver se encargar de rellenar el espacio vaco, para que sea posible que la
tabla aparezca en esa posicin.
El Modo de tablas expandidas aade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los
bordes de las tablas para facilitar la edicin. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el
punto de insercin de forma precisa pero en este modo no vemos la pgina como quedar exactamente.
En este curso nos limitaremos al modo estndar.
Pg. 7.3
Enero 2006.
Unidad 8. Marcos (I)
Bsqueda
Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un marco sencillo en una pgina, y cmo
trabajar con l.
Introduccin
Los marcos o frames sirven para distribuir mejor los datos
de las pginas, ya que permiten mantener fijas algunas
partes, como pueden ser el logotipo y la barra de
navegacin, mientras que otras s pueden cambiar. Adems
de mejorar la funcionalidad, pueden mejorar tambin la
apariencia.
Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes
ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm.
Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la
pgina que contiene los marcos agrupados.
Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el grupo de marcos. Esto facilita el
trabajo, ya que es ms fcil hacerse una idea de cmo quedar la pgina al final, cosa que no es posible si se editan
individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho
en el tema, y veremos solamente algunos conceptos bsicos y ejemplos sencillos.
Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente
una de ellas.
Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya existente.
Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento actual.
Como puedes ver en la imagen, aparece una lnea que divide el documento en
dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la
derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la lnea que separa los marcos. Esto solo
es posible mientras dicho documento no se haya guardado.
Si en lugar de insertar un marco a la izquierda lo

insertamos a la Derecha, el marco vaco aparecer a la
derecha del documento original.
En esta imagen puedes ver un ejemplo de marco a la
derecha.
Sobre un documento ya existente, menu.htm, se ha
insertado un marco a la derecha.
Al igual que en el caso anterior, tenemos tres
documentos: el de la izquierda, el de la derecha, y el que
contiene el grupo de marcos. En este caso, el
documento que tenamos inicialmente es el de la
izquierda, mientras que antes era el de la derecha. Por
ello, en este caso el marco padre ser el de la izquierda.
El marco padre siempre es el marco en el que se

encuentra el documento inicial, sobre el que se han
insertado el resto de marcos.
Pg. 8.1
Enero 2006.
Unidad 8. Marcos (II)
Bsqueda
Seleccionar marcos
Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que puede
abrirse a travs del men Ventana. Si la opcin Marcos no te aparece directamente en este men,
posiblemente est dentro de la opcin Otros. Tambin puedes abrir el panel Marcos pulsando la
combinacin de teclas Mays+F2.
En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar
de uno a otro pulsando sobre ellos en el panel. Tambin puede seleccionarse la pgina de marcos
pulsando sobre el borde que rodea a los marcos (el que aparece ms grueso y en relieve en la
imagen).
No es necesario seleccionar los marcos para editar los documentos que stos contengan.
S es necesario seleccionar los marcos para especificar las propiedades especficas de cada uno
de ellos.
Guardar
Todos los documentos que contienen marcos tienen que tener una pgina en cada uno de ellos. Es por esto que al crear algn marco,
se cargan pginas nuevas por defecto en cada uno de ellos, a excepcin del marco que contiene la pgina original.
Estas pginas nuevas pueden ser posteriormente sustituidas por otras ya existentes, como ya veremos ms adelante.
Es necesario guardar la pgina que contiene el grupo de marcos, as como cada una de las pginas que estn incluidas en sus marcos.
No es conveniente guardar la primera vez los marcos con la opcin guardar todo
nombres a los nuevos documentos.
, ya que podemos equivocarnos al dar los
Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna pgina ya existente, ya que en
ese caso el nico documento al que habr que dar nombre ser al que contiene el grupo de marcos.
Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar sobre guardar
Configurar marcos
Una vez seleccionado un marco a travs del panel Marcos, pueden establecerse sus propiedades a travs del inspector de
propiedades.
Cada marco tiene asignado un nombre, que puede cambiarse a travs de Nombre de marco. El nombre no puede contener espacios
en blanco.
En Origen aparece el nombre del documento HTML que est contenido en el marco.
En Bordes puede elegirse si aparecer o no una lnea separando el marco del resto de marcos. En el caso de que se muestre el borde,
se puede especificar un color para ste a travs de Color borde.
Desplaz. indica si aparecern o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse
completamente.
Si la opcin Mismo tamao est activa, indica que los usuarios no podrn variar las medidas del marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separacin que habr entre el contenido del marco y sus bordes izquierdoderecho y superior-inferior.
Si lo seleccionado es todo el conjunto de marcos (la pgina de marcos), el inspector de propiedades es algo diferente.
En Bordes puede elegirse si aparecer o no una lnea separando los marcos entre s y puede especificarse un color para este a travs
de Color del borde. Tambin es posible establecer un grosor para el borde a travs de Ancho.
El campo Columna (o Fila dependiendo del marco elegido en Seleccin Fila Col.) sirve para especificar el tamao del marco, que
puede ser en Pxeles, Porcentaje (de la ventana) o Relativo (proporcional al resto de marcos).
Normalmente utilizars dos marcos, uno de ellos con tamao en Pxeles, que ser el que contenga la barra de navegacin, y el otro
marco con tamao Relativo, para que se ajuste a la ventana del navegante.
Contenido del marco

Como ya has visto, el contenido de un marco puede establecerse a travs del campo Origen del inspector de propiedades.
Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los
marcos ha de ser fijo, mientras que el de otros ha de poder variar.
A travs del campo Origen del inspector de propiedades, slo es posible especificar el documento que se cargar inicialmente en el
marco, pero hemos de poder cambiar este documento por otro a travs de vnculos.
Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos podan ser _blank, _parent,
_self, y _top. Vamos a recordar para que serva cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te sern ms
fciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. Como ya sabes, el
marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecern
al abrir el vnculo en ella.
Adems de estos destinos para los enlaces, tambin aparecern
los nombres de los distintos marcos de la pgina.
Podemos aadir todos estos destinos a cualquier elemento de la pgina que contenga algn enlace, ya sea texto, una imagen, un
mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces funcionen a nuestro antojo, cargando unas u
otras pginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.
Pg. 8.2
Enero 2006.
Unidad 9. Formularios (I)
Bsqueda
Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu elementos puede contener y cmo pueden
validarse los datos introducidos en l.
Introduccin
Los formularios se utilizan para recoger datos de los usuarios, nos pueden
servir para realizar un pedido en una tienda virtual, crear una encuesta,
conocer las opiniones de los usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y
har el tratamiento correspondiente.
Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de
tratamiento de los datos, ya que para ello se necesitan nociones de programacin, ya sea en VBScript, en JavaScript o en otro
lenguaje de programacin, y esto no entra en los objetivos del curso.
A la derecha tienes un ejemplo de formulario.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.
Elementos de formulario
Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Formulario.
A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como algunas de sus
propiedades.
Campo de texto y rea de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea, mientras que el rea de texto permite
escribir varias.
Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades, marcando la opcin Una lnea o
Multi lnea respectivamente.
Tambin es posible definirlo como Contrasea es como el campo de texto pero las letras que va tecleando el usuario se
sustituyen por un carcter como podrs ver en la imagen siguiente.
A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
Campo de texto
rea de texto
A travs del inspector de propiedades es posible asignar tambin el Ancho del cuadro de texto, el nmero mximo de lneas o
caracteres, y el valor inicial del cuadro.
Botn
Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario
(borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).
Enviar
Tambin es posible cambiar el texto del botn, a travs de la propiedad Etiqueta del inspector de propiedades.
Casilla de verificacin
Es un cuadrito que se puede activar o desactivar.
Deseo recibir informacin
Puede asignrsele el Estado inicial como Activado o como Desactivado.
Botn de opcin
Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, slo puede haber uno
activado. Cuando se activa uno, automticamente se desactivan los dems.
Superman
Spiderman
Lista/Men
Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.
--- Elige opcin lista ---
--- Elige opcin men--Perro

Gato
Los elementos se aaden a travs del botn Valores de lista... del inspector de propiedades.
Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a travs de Selecciones
del inspector de propiedades puede permitirse que se seleccionen varios simultneamente.
Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qu datos ha de introducir
en cada uno de ellos.
Pg. 9.1
Enero 2006.
Unidad 9. Formularios (II)
Bsqueda
Crear formularios
Puedes crear formularios a travs del men Insertar, opcin Formulario.
Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un
recuadro formado por lneas rojas discontinuas, similar al de la imagen de la derecha.
Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya
sabes puedes insertar a travs del men Insertar, opcin Formulario.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor
distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia.
Validar formularios
La validacin de formularios sirve para hacer que Javascript valide el formulario antes de
que se enve el formulario, para que en el caso de que hayan campos del formulario que
sean obligatorios, tengan que rellenarse antes de poder enviarse.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se
puede abrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays+F3.
pulsando sobre l, y en Mostrar eventos
En este panel hay que desplegar el botn
para elegir una versin de las actuales de entre la lista de navegadores. Por ejemplo,
puedes elegir el navegador IE 6.0.
, y pulsar sobre la opcin Validar
Despus de esto, hay que volver a desplegar el botn
formulario, debers haber seleccionado el formulario previamente.
Entonces se mostrar una ventana como la siguiente, donde aparecen todos los elementos del formulario.
Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numrico (Nmero),
una Direccin de correo electrnico, etc.
Pg. 9.2
Enero 2006.
Bsqueda
Unidad 10. Multimedia (I)
Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un
vdeo.
Pelculas Flash
Las pelculas Flash son animaciones, que al igual que los botones y el texto Flash, tienen
la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de
presentacin hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de
animacin.
Estas pelculas pueden crearse mediante el programa Flash de Macromeda, y necesitan
que el usuario tenga instalado el plug-in para poder ser visualizadas.
Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar, Media, opcin Flash, o pulsando Ctrl+Alt+F.
Tambin pueden insertarse pulsando sobre la opcin
Media.
Flash que aparece en la pestaa Comn del panel Insertar, botn
El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el texto Flash, pero existen
dos opciones nuevas que hacen referencia a la visualizacin de la pelcula.
La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio.
La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms cargarse la pgina
comenzar a reproducirse la pelcula Flash.
Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula.
Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento.
Sonido
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia msica cuando
navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Muchas de las
pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen
escuchar el sonido de la pgina puedan desactivarlo.
Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI,
aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe
mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in.
A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas,
puedes reproducirlo pulsando sobre los controles ( recuerda encender los altavoces, si los tienes).
En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plug-in
aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de audio,
mediante Al y An.
En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre en el ejemplo de
arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los controles de audio, los campos
Al y An deben valer cero.
Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores no pueden
definirse a travs del inspector de propiedades, pero s a travs del cdigo. Una vez definidos los podremos cambiar desde el
inspector de propiedades con el botn Parmetros...
Por ejemplo, el archivo anterior apareca en el cdigo como <embed src="varios/audio.mid"></embed>. Pero para que no se
reproduzca automticamente se ha aadido autostart="false", y para que se reproduzca continuamente se ha aadido
loop="true".
La lnea de cdigo del archivo de audio ha quedado del siguiente modo:
<embed src="varios/audio.mid" autostart="false" loop="true"></embed>
En el Inspector de propiedades del sonido, el botn Parmetros... abre un cuadro de dilogo donde podemos cambiar esos
valores una vez introducidos.
Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario insertar una
serie de comportamientos que se encarguen de esa tarea.

Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este cdigo
directamente en la vista Cdigo.
<bgsound src="cancion1.wav" loop="-1">
Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas veces quieres que se reproduzca, 1, 2, 3 ...
(con -1 se reproduce de modo continuo).
Pg. 10.1
Enero 2006.
Unidad 10. Multimedia (II)
Bsqueda
Vdeos
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar
mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vdeo en un documento tienes que dirigirte al men Insertar, Meda, opcin
Plug-in.
A la derecha tienes un ejemplo de un archivo de vdeo, para el que se muestran los controles de vdeo.
Puedes reproducirlo pulsando sobre los controles.
El inspector de propiedades para los archivos de vdeo insertados de esta forma es el mismo que el de los archivos de audio, ya
que ambos se insertan como Plug-in.
Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores
pueden cambiarse a travs del cdigo, del mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y
loop="true".
Todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in
apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de
audio o de vdeo) que ha de reproducirse.
En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede establecerse en el campo URL plg una pgina en
la que pueda encontrarlo.
Pg. 10.2
Enero 2006.
Unidad 11. Las plantillas (I)
Bsqueda
En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en ellas.
Introduccin
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un formato uniforme.
La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando
simplemente su contenido. Esta es la forma ms sencilla de tener pginas con una estructura basada en la estructura de otras ya
creadas previamente.
Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas del sitio web, pero que
incluyen la posibilidad de establecer unas zonas editables y otras zonas que sern fijas, que no podrn ser modificadas.
No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del ttulo. Cuando se desea
que existan pginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y
basar las pginas en una u otra plantilla, segn el color de fondo que se desee para cada una.
Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas en ella.
Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates.
Crear plantillas
Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.
Una forma de crear una plantilla desde cero es a travs del panel Archivos, pestaa Activos.
La pestaa Activos se puede abrir a travs del men Ventana, opcin Activos. Tambin pulsando F11.
Una vez abierto el panel hay que seleccionar el botn
con las plantillas.
, para poder trabajar
Los botones inferiores del panel Activos Plantillas
son similares a los del panel Estilos CSS .
El nico botn diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla,
editar una plantilla seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla hay que pulsar sobre el botn
ratn y elige Nueva Plantilla).
(Si este botn no est activado, pulsa con el botn derecho del
Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando
previamente sobre l.
Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn
Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botn
.
.
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente.
Para crear una plantilla a partir de un archivo existente es necesario

abrir dicho archivo, y despus guardarlo como plantilla a travs del
men Archivo, opcin Guardar como plantilla.
Cuando se pulsa dicha opcin, aparece una ventana como la de la
derecha.
En ella es necesario especificar el nombre con el que va a ser
guardada la plantilla, a travs del campo Guardar como, y elegir, de
entre la lista de sitios, el Sitio: en el que se va a guardar.
Pg. 11.1
Enero 2006.
Unidad 11. Las plantillas (II)
Bsqueda
Establecer regiones editables en una plantilla

Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden modificar.
Es necesario establecer las zonas que s podrn ser editadas en las pginas que se basen en dicha plantilla.
Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a travs del panel Activos, pulsando dos veces
como ya hemos visto.
sobre ella , o estando seleccionada pulsando sobre el botn
Una vez abierta la plantilla es posible establecer sus propiedades a travs de la ventana Propiedades de la pgina.
Como recordars, para abrir esta ventana puedes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el men contextual que aparece seleccionar la
opcin Propiedades de la pgina.
Para insertar una regin editable hay que situar el puntero en el

lugar en el que se desea insertar, y despus dirigirse al men
Insertar, Objetos de plantilla, opcin Regin editable, o pulsar la
combinacin de teclas Ctrl+Alt+V.
En la nueva ventana hay que establecer un Nombre para la regin
editable.
Dentro de la plantilla no pueden existir dos regiones editables con
el mismo nombre.
Posteriormente puede modificarse el nombre a travs del inspector
de propiedades de la regin editable.
La zonas editables aparecen representadas en Dreamweaver como un
recuadro con una etiqueta de color turquesa. En la etiqueta aparece el nombre
de la zona editable.
Dentro del recuadro es posible insertar objetos, que aparecern por defecto en
aquellos documentos que se basen en la plantilla. Estos objetos, al estar
dentro de la zona editable, podrn ser modificados en las pginas.
Todos los objetos que se encuentren fuera de estas zonas editables
aparecern tambin en las pginas, pero no podrn ser modificados.
En este caso, la imagen con el logotipo de aulaclic aparecera en todas las
pginas que se basaran en esta plantilla, mientras que todo lo que
insertramos dentro de la zona editable FormularioCorreoElectronico podra
ser modificado.
Pg. 11.2
Enero 2006.
Unidad 11. Las plantillas (III)
Bsqueda
Basar pginas en una plantilla

El uso de las plantillas puede resultar un poco complicado al principio. Vamos a ver cmo basar una pgina vaca en una plantilla,
ya que por el hecho de estar vaca resulta ms sencillo.
Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas, opcin Aplicar plantilla a pgina.
Es preferible que antes de hacer esto nos aseguremos de que el
sitio que se encuentra abierto en Dreamweaver es el mismo en el
que vamos a guardar el documento, y el mismo en el que se
encuentra la plantilla en la que queremos basarlo.
Despus de pulsar sobre la opcin Aplicar plantilla a pgina
aparece una ventana como la de la derecha, en la que hay que
seleccionar una de las plantillas de la lista Plantillas: del sitio.
Es recomendable activar la casilla Actualizar pgina cuando
cambie la plantilla, para que la pgina se actualice
automticamente en el caso de modificar la plantilla en la que se
basa.
A pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la plantilla aparezcan nombres de regiones no
coincidentes entre el documento en blanco y la plantilla. En ese caso se muestra una ventana como la siguiente.
En ella hay que establecer una correspondencia entre el nombre de la regin del documento vaco con el nombre de alguna regin
de la plantilla.
En este ejemplo, la regin del documento vaco que no coincida con el nombre de ninguna regin de la plantilla era la regin
Document head.
A travs de Mover contenido a la nueva regin: se ha seleccionado la regin head de la plantilla, para establecer as la
correspondencia que se necesitaba.
Despus de establecer las correspondencias necesarias, se carga la plantilla en el documento vaco.
En este caso no es posible cambiar el color de fondo, que est definido en la plantilla, pero s es posible cambiar todos los
elementos de la tabla y el formulario, ya que se encuentran dentro de una zona definida en la plantilla como editable.
En este caso se podra cambiar el estilo del texto, el color de las celdas, combinarlas, etc.
Para que una pgina deje de estar basada en una plantilla hay que dirigirse al men Modificar, Plantillas, opcin Separar de
plantilla.
Cuando se separa una pgina de una plantilla, el contenido de la pgina sigue siendo el mismo que el que tena cuando an
estaba basada en la plantilla, pero sin las restricciones establecidas por la plantilla.
Pg. 11.3
Enero 2006.
Unidad 12. Capas (I)
Bsqueda
Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar con ellas y aplicarles algn
comportamiento.
Introduccin
Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina, en los que podemos insertar
contenido HTML. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades de diseo.
Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro
blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin.
Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y
arrastrndolos hasta conseguir el tamao deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y todos los elementos que puede
contener un documento HTML.
Este icono
sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin la capa.
Insertar una capa
Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de diseo, Capa.
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero.
correspondiente, pero esto no
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono
resulta til cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a
esta, y no es fcil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs
de la pestaa Capas del panel Diseo, que puede abrirse a travs del men Ventana
opcin Capas. Si la opcin Capas no te aparece directamente en este men, posiblemente
est dentro de la opcin Otros. Tambin puedes abrir el panel pulsando F2.
En dicho panel aparecen los nombres de todas las capas que existen en el documento
actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el
panel.
Formato de una capa

Las propiedades de la capa se especifican a travs de su inspector de propiedades.
ID de capa es el nombre de la capa. Tambin puede ser cambiado a travs del panel Capas, haciendo doble clic sobre l.
Iz y Sup indican la distancia en pxeles que hay entre los lmites izquierdo y superior del documento y la capa.
An y Al indican la anchura y la altura de la capa.
ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs del panel Capas. Una
capa ser solapada por aquellas capas cuyo ndice Z sea mayor que el suyo.
Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
Default (visibilidad segn el navegador),

Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando),
Visible (muestra la capa, aunque la pgina no se est viendo) y
Hidden (la capa est oculta).
La visibilidad tambin puede cambiarse a travs del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y
el ojo cerrado indica Hidden.
A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador cuando el contenido excede el tamao especificado
de la capa.
Visible indica que el contenido adicional aparece en la capa. La capa se ampla para darle cabida.
Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador.
Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto si se
necesitan como si no.
Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias
(es decir, cuando el contenido de la capa supere sus lmites).
Pg. 12.1
Enero 2006.
Unidad 13. Comportamientos (I)
Bsqueda
En este tema vamos a ver las caractersticas bsicas de los comportamientos, as como un par de ejemplos de entre sus
posibles aplicaciones.
Introduccin
Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento sobre un objeto, como puede
ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc.
Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver permite insertarlos a travs del
panel Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo JavaScript para programarlos.
La imagen que aparece a continuacin tiene asociado un comportamiento. Sita el puntero sobre ella para ver qu es lo que
ocurre.
La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo veremos ms
adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de sustitucin y las barras de navegacin, que
ya estn predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a travs del panel
Comportamientos.
Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a recordar las que necesitamos
para poder insertar comportamientos ms tarde.
El panel Comportamientos se puede abrir a travs del men Ventana, opcin Comportamientos. Tambin pulsando Mays+F3.
pulsando sobre l, y en Mostrar eventos
En este panel hay que desplegar el botn
para elegir una versin de la lista de navegadores.
Algunos comportamientos no funcionan para algunos navegadores, por lo que
dependiendo del navegador elegido aparecern unos u otros comportamientos posibles.
Existen comportamientos que funcionan en Internet Explorer pero no en Netscape.
Debido a que la mayora de usuarios utiliza Internet Explorer, vamos a seleccionar este
navegador. Puedes seleccionar alguna de sus ltimas versiones: IE 5.5 o IE 6.0.
Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces
que se desee insertar algn comportamiento.
Insertar un comportamiento
Cuando ya hay establecido algn navegador, ya se pueden insertar comportamientos.
Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el
comportamiento, como puede ser una imagen, un fragmento de texto, etc.
del panel Comportamientos aparece la opcin Mostrar
Al desplegar el botn
eventos para, a travs de la cual se haba elegido el navegador. Tambin aparece la lista
de todas las acciones posibles para el navegador elegido previamente, de entre las que
se puede seleccionar una.
Segn el elemento sobre el que se desee aplicar el comportamiento, se podrn elegir
unas acciones, mientras que otras no.
En este caso la accin Validar formulario no puede seleccionarse porque no existe

ningn formulario en la pgina.
Despus de elegir alguna accin, el comportamiento correspondiente aparece en el panel
Comportamientos. En este caso se han insertado dos comportamientos.
Como puedes ver, cada comportamiento tiene asociados un evento y una accin.
Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se
debe de realizar la accin.
Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botn
. Tambin es
posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionndolos y ordenndolos mediante los botones
.
Pg. 13.1
Enero 2006.
Unidad 13. Comportamientos (II)
Bsqueda
Mostrar-Ocultar capas
Uno de los comportamientos ms habitual e interesante es el de Mostrar-Ocultar capas. Resulta obvio que para poder aplicar
este comportamiento han de existir capas en el documento.
En la pgina anterior tenas un ejemplo de este tipo. Vamos a ver qu eventos y acciones hay
que establecer para que se produzca dicho comportamiento.
Despus de seleccionar la imagen hay que seleccionar una accin de la lista, pulsando sobre el botn
tiene que ser la de Mostrar-Ocultar capas.
. En este caso la accin
Tras elegir la accin, hay que especificar qu capas han de mostrarse u ocultarse para el evento. Para ello hay que pulsar dos
veces sobre la accin, en el panel Comportamientos.
Entonces aparece una nueva ventana, con la lista de todas las capas que hay en la pgina, en la que puede indicarse la variacin
que se va a producir sobre la visibilidad de cada una de las capas.
Puede indicarse si se van a Mostrar, si se van a

Ocultar, o si van a adquirir la visibilidad inicial
(Predeterminada).
Para determinar la visibilidad de cada una de las capas es necesario seleccionarlas una por una, indicando su visibilidad a travs
de los botones inferiores de la ventana.
No es necesario aplicar una visibilidad diferente a todas las capas de la pgina, solamente a las que se desea que cambien al
producirse el evento. Por ejemplo, en este caso a la capa "gatomes" no se le ha aplicado ninguna visibilidad diferente, ya que no
se desea que vare al producirse el evento.
Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente hay que volver a pulsar sobre el botn
correspondiente a la visibilidad que ya tiene aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la capa "gatosemana"
habra que volver a pulsar sobre el botn Mostrar.
Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero sobre la imagen, se muestre la capa, y que
cuando el puntero deje de estar sobre la imagen, la capa se vuelva a ocultar. Para ello es necesario insertar dos comportamientos
con la accin Mostrar-Ocultar capas. Uno de ellos mostrar la capa para el evento onMouseOver (cuando el ratn est sobre),
mientras que el otro la ocultar para el evento onMouseOut (cuando el ratn est fuera).
Llamar JavaScript
Otro de los comportamientos que puede aplicarse sobre algn objeto es el de Llamar Javascript. Este comportamiento permite
insertar cdigo JavaScript dentro del cdigo del documento.
Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre un objeto. Para ello hay que insertar la lnea
JavaScript "window.close();".
Al igual que para el ejemplo de las capas, lo primero que hay que hacer es seleccionar el objeto sobre el que se desea aplicar el
.
comportamiento. Seguidamente hay que seleccionar la accin Llamar Javascript a travs del botn
Entonces aparece una nueva ventana en la que hay que introducir la lnea JavaScript.
Una vez insertado el comportamiento, en el panel Comportamientos hay que

establecer el evento onclick (al hacer clic) para que la llamada a JavaScript se
produzca al pulsar una vez sobre el objeto.
Pulsando dos veces sobre la accin vuelve a abrirse la ventana anterior, y es
posible modificar la lnea de cdigo.
Pg. 13.2
Enero 2006.
Unidad 14. Otros elementos (I)
Bsqueda
Vamos a ver una serie de elementos que suelen aparecer en las pginas web, como pueden ser las marquesinas, las reglas
horizontales y la fecha.
Marquesinas
Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de un lado a otro de la
ventana en forma de lnea. A continuacin tienes un ejemplo de marquesina.
Bienvenid@s a PerrosGatos
Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es necesario hacerlo a travs del cdigo.
Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de
introducirse los elementos que se desea que aparezcan en la marquesina.
Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por defecto, se desplaza de derecha a
izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. Por ejemplo, si pones <marquee
behavior="slide">, la marquesina har el desplazamiento una sola vez y se detendr.
Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se

desplazar de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo cdigo
puedes ver a continuacin:
<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif">
</marquee>
Pg. 14.1
Enero 2006.
Unidad 14. Otros elementos (II)
Bsqueda
Fecha
Dreamweaver permite insertar fcilmente la fecha de ltima modificacin de las pginas.
Cuando se modifica una pgina en la que se ha insertado este tipo de fecha, se actualizar automticamente con la fecha del
sistema.
Conviene insertar la fecha de modificacin cuando la pgina ha de contener informacin actualizada cada poco tiempo, para que
los usuarios puedan saber cuando fue la ltima vez que se actualizaron los datos. Pero en el caso de que la pgina no se
actualice hasta que pase cierto tiempo, es preferible no incluir la fecha de modificacin.
Para insertar la fecha hay que dirigirse al men Insertar, a la opcin Fecha.
En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automticamente al
modificar y guardar la pgina de nuevo.
Regla horizontal
El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Una regla horizontal
no es ms que una lnea horizontal.
Para insertar una regla hay que dirigirse al men Insertar, opcin HTML, luego la opcin Regla horizontal.
El inspector de propiedades para las reglas es el siguiente.
A travs de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuacin tienes cuatro ejemplos
de reglas horizontales.
Estas reglas slo se diferencian en las opciones Al (altura) y Sombreado. Las dos primeras, por ejemplo, no tienen activada la
opcin Sombreado, mientras que las otras dos s.
Pg. 14.2
Enero 2006.
Unidad 14. Otros elementos (III)
Bsqueda
Cdigo de otras pginas

En ocasiones nos gustara incluir en nuestras pginas cosas que hemos visto en otras pginas que estn publicadas en Internet.
Puedes visualizar el cdigo fuente de dichas pginas a travs del men Ver del navegador Internet Explorer, opcin Cdigo
fuente, o bien mostrar el men contextual de la pgina pulsando con el botn derecho sobre ella, y pulsando despus sobre la
opcin Ver cdigo fuente. De este modo puedes consultar el cdigo que se ha utilizado para realizar la pgina, y utilizar dicho
cdigo en las tuyas.
Visualizar el cdigo fuente resulta til para ver cmo se ha estructurado la pgina, el uso de los comportamientos (que aparecen
programados en cdigo JavaScript), y otra serie de rutinas JavaScript.
Por ejemplo, pulsa aqu para abrir una pgina en la que aparece un efecto en la barra de estado del navegador, que muestra una
marquesina, cuyo texto es CODIGO JAVASCRIPT - CURSO Dreamweaver MX 2004 - AULACLIC.
Si miras el cdigo fuente de esa pgina podrs ver el cdigo javascript que utiliza para conseguir ese efecto en la barra de estado.
El cdigo es el siguiente:
<SCRIPT language=JavaScript>
<!-strcnt=0;
mensaje=" CODIGO JAVASCRIPT - CURSO Dreamweaver MX 2004 - AULACLIC ";
function scroller()
{
window.status=mensaje.substring(strcnt++,mensaje.length+1);
if(strcnt>mensaje.length)
strcnt=0;
setTimeout("scroller()",200);
}
//-->
</SCRIPT>
Dicho cdigo tiene que ir entre las etiquetas <HEAD> y </HEAD>, y aadir onload="scroller()" dentro de la etiqueta <BODY>, de
modo que sta queda del siguiente modo:
<BODY onload="scroller()">
Este cdigo no es demasiado complicado, y podras casi sin problemas aadirlo a tus pginas, para que mostrasen los mensajes
que quisieras.
Pero en muchas ocasiones puede costar entender el cdigo, sobretodo si no se tienen nociones de ningn lenguaje de
programacin. Si no entiendes el cdigo, puedes cometer el error de copiar cdigo JavaScript errneo, copiarlo de forma
incompleta, insertarlo en una zona incorrecta del cdigo html, etc.
Lo importante que tienes que saber en este momento sobre las funciones JavaScript es que aparecen entre las lneas
<HEAD> ... <SCRIPT language=JavaScript> <!-y
//--> </SCRIPT> ... </HEAD>
Pg. 14.3
Enero 2006.
Unidad 14. Otros elementos (IV)
Bsqueda
Adaptar webs a distintas resoluciones

Siempre que se crea una pgina web hay que tener en cuenta que va a ser visitada por usuarios con monitores de distintos
tamaos y con distintas resoluciones.
Es imposible hacer que una pgina se vea exactamente igual en todos los monitores de los usuarios que la visitan, pero hay que
intentar que su visualizacin sea lo ms parecida posible.
La resolucin usada de forma ms frecuente es la de 800x600, por lo que inicialmente habra que disear la pgina para dicha
resolucin. Es decir, habra que crear la pgina en un monitor con dicha resolucin, para poder visualizar claramente cmo queda
en el navegador, y distribuir el contenido de la pgina de la forma ms adecuada.
Normalmente se utilizan tablas, ya que resultan muy tiles para distribuir el contenido de la pgina.
Como recordars, el tamao de las tablas puede ser definido en pxeles o en porcentaje. Cuando el tamao de la tabla sea
definido en pxeles, la tabla se ver del mismo modo independientemente del tamao de la ventana del navegador. En cambio,
cuando el tamao de la tabla sea definido en porcentaje, la tabla se ajustar al tamao de la ventana del navegador, lo cual
implica que el contenido de la tabla se descuadrar.
Pulsa aqu para ver una pgina con tablas de tamao fijo, en pxeles. Imagina que la pgina ha sido diseada para visualizarse
correctamente en un monitor pequeo de baja resolucin, cuyo tamao equivale al de la ventana del navegador que se ha abierto.
Si modificas el tamao de la ventana, vers que las tablas son siempre del mismo tamao. Esto tiene un gran inconveniente, ya
que si maximizas la ventana del navegador (lo que equivaldra a visualizar la pgina en un monitor grande con alta resolucin), a
la derecha de las tablas aparecer un gran hueco vaco.
Pulsa aqu para ver una pgina con tablas de tamao variable, en porcentaje.
Si modificas el tamao de la ventana, vers que las tablas se ajustan a ella. Usar tablas con tamao variable tiene tambin un
gran inconveniente, ya que si maximizas la ventana del navegador apreciars claramente cmo el contenido de las tablas se
descuadra.
En un principio puede parecer ms conveniente utilizar tablas con tamao fijo, aunque esto implique que aparezca el hueco vaco
a la derecha, en el caso de los monitores con alta resolucin. Pero con un poco de prctica a la hora de manejar las tablas,
puedes salvar el inconveniente del descuadre de la pgina y as definir pginas con tamao en porcentaje que aprovechen el
ancho cuando el monitor de ms grande.

No solo puede establecerse el tamao de la tabla, tambin es posible establecer el tamao de las celdas.
El tamao de la celda a travs del inspector de propiedades estar especificado por los valores de An (anchura) y Al (altura).
Normalmente solo se especifica la anchura, no la altura.
Los valores An y Al de una celda siempre estn en Pxeles. En la imagen anterior, la celda tiene una anchura de 208 pxeles.
Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An habra que escribir 25%.
Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qu contiene cada una de ellas (imgenes, texto alineado
a la derecha, texto alineado a la izquierda, texto de gran tamao, etc.), puede conseguirse que al visualizar la pgina en monitores
de distintos tamaos y con distintas resoluciones, la apariencia sea bastante similar, o al menos que la distribucin del contenido
de la pgina no se vea muy afectado por el cambio de tamao de la ventana del navegador.
Pg. 14.4
Enero 2006.
Unidad 15. HTML desde Dreamweaver (I)
Bsqueda
En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio cdigo HTML, y no
nicamente sobre el editor grfico de la vista diseo.
En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos reajustes directamente en el cdigo
estando dentro de Dreamweaver.
Etiquetas
Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo HTML de una pgina para darle un ttulo.
Consista simplemente en escribir el ttulo deseado entre las etiquetas <TITLE> y </TITLE>.
Las etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que
incluye el smbolo "/", indica final y se suele denominar etiqueta de cierre.
Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan, incluyendo cierto cdigo
dentro de la etiqueta.
Por ejemplo, un prrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus caractersticas predeterminadas, como
puede ser alinearlo a la derecha. Para ello, en lugar de introducir el texto del prrafo entre las etiquetas anteriores, ha de insertarse
entre las etiquetas <P align="right"> y </P>.
Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO dentro del cdigo HTML equivale a la
etiqueta <BR>.
Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el
editor grfico, pero tambin ofrece otras posibilidades para trabajar directamente sobre el cdigo.
El inspector de cdigo
Recordars que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseo, vista Cdigo y vista Dividir (Cdigo y
Diseo).
Todas estas vistas se aplican directamente sobre la ventana del documento.
Pero existe un panel que permite visualizar el cdigo independientemente de la vista aplicada en el documento. Este panel es el
llamado Inspector de cdigo y puede abrirse a travs del men Ventana. Si la opcin Inspector de cdigo no te aparece
directamente en este men, posiblemente est dentro de la opcin Otros. Tambin puedes abrir el Inspector de cdigo pulsando F10.
El Inspector de cdigo muestra el cdigo HTML de la misma forma que lo hacen la vista Cdigo y la vista Dividir (Cdigo y
Diseo), pero puede resultar ms cmodo trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita
slo al espacio del documento.
Pg. 15.1
Enero 2006.
Bsqueda
Unidad 15. HTML desde Dreamweaver (II)

Completar las etiquetas
Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente sobre el cdigo HTML es la de completar las
etiquetas mientras se van introduciendo. Esto se produce tanto en el Inspector de cdigo como en las vistas de cdigo.
Imaginemos que deseamos introducir en nuestra pgina un enlace a la pgina de aulaclic, que ha de abrirse en una ventana nueva. En
este caso deberamos introducir la etiqueta <a href="http://www.aulaclic.com">pulsa aqu para visitar aulaclic</a>, con lo que
obtendramos el siguiente enlace:
pulsa aqu para visitar aulaclic
Vamos a ver cmo funciona el mecanismo de completar etiquetas a travs de este ejemplo.
Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero que debemos insertar es el
smbolo < .
Despus de escribir nosotros este smbolo, Dreamweaver mostrar una lista con todos los comandos que pueden
aparecer despus l. Para elegir uno de ellos hay que pulsar dos veces sobre l con el puntero del ratn, o bien,
estando seleccionado, pulsar INTRO.
En este caso tenemos que elegir a, despus de lo cual desaparecer la lista. En el cdigo tendremos
Despus de <a hay que introducir un espacio en blanco. Nada ms teclear el espacio en blanco aparecer otra
lista de elementos, que son los que pueden escribirse despus de la a, los atributos de la etiqueta.
Tenemos que elegir href.
Una vez seleccionado, el cdigo quedar como
Entonces el cursor aparecer entre las comillas dobles, y se mostrar una nueva lista en la que es posible elegir el
tipo de vnculo a insertar.
En este caso el vnculo ha de ser de tipo HTTP, aunque tambin sera posible insertar un vnculo a un archivo
(FILE), un vnculo de correo electrnico (MAILTO), o un vnculo de cualquiera de los tipos que aparecen en la lista.
Nosotros tenemos que seleccionar http://.
En lugar de cerrar ya la etiqueta con el smbolo >, queremos primero indicar que el vnculo ha de abrirse en una
ventana nueva. Para ello tenemos que introducir un nuevo espacio, para que se nos muestre otra lista.
En ella hay que elegir target. El cdigo quedar como
Entonces el cursor aparecer entre las nuevas comillas dobles, y se mostrar una lista en la que es posible elegir
el destino del enlace.
Como queremos que el enlace se abra en una ventana nueva, hay que seleccionar _blank.
Despus de introducir el smbolo > para cerrar la etiqueta, se insertar automticamente la de final del enlace, es decir, se insertar </
a>, y tendremos
.
Ahora podemos completar la etiqueta con la direccin del enlace y el texto que servir como enlace, para que quede del siguiente modo:
<a href="http://www.aulaclic.com">pulsa aqu para visitar aulaclic</a>
Contraer y expandir cdigo

Una de las mejoras de la versin 8 de
Dreamweaver es la posibilidad de
seleccionar fragmentos de cdigo y
contraerlos para facilitar la legibilidad
del cdigo.
Por ejemplo, podemos seleccionar el
trozo de cdigo correspondiente a una
tabla, tal y como se ve en la figura de
la derecha.
Para ello basta con colocar el cursor
en la zona que queremos contraer, por
ejemplo en la lnea 318, y pulsar el
de la barra de herramientas
icono
de programacin, veremos como

automticamente se selecciona el
cdigo entre las etiquetas mas
prximas, en este caso <font> y </
font> , si seguimos haciendo clic se ir
seleccionando cdigo entre las
siguientes etiquetas, <div> <td> <tr> y
<table>. De forma que con cinco clics
en el icono
tendremos
seleccionado el cdigo de la etiqueta
<table> tal y como vemos en la figura.
Ahora, para contraer el cdigo

seleccionado basta hacer clic en el
icono
y obtendremos el resultado
que vemos a la derecha.
De esta forma podramos ocultar el
cdigo que no nos interesa y dejar el
resto del cdigo ms legible.
Para volver a la situacin inicial basta
hacer clic en el icono expandir
, o en
el signo + que aparece al lado del
cdigo contraido.
Errores en el cdigo
A travs del editor grfico es posible ver si hay algunos errores en

el cdigo HTML, como puede ser una etiqueta incompleta.
En el caso de haber un error de este tipo, el fragmento de cdigo
que contiene el error se mostrar resaltado en amarillo en la
ventana de diseo de la pgina.
Esto nos permite darnos cuenta de la lnea concreta en la que se
encuentra el error.
Si en el ejemplo de completar las etiquetas hubiramos dejado sin
terminar la lnea de cdigo, habiendo escrito nicamente <a
href="", aparecera reflejado en el editor grfico tal y como muestra
la imagen de la derecha.
Otra forma de detectar errores en nuestra pgina es a travs del men Comprobar navegadores de destino en la barra de
herramientas Documento.
Si nuestra pgina no contiene errores, el icono de este men tiene esta apariencia
apariencia
, mientras que si tenemos errores adoptar esta
Para ver los errores que tiene nuestra pgina, desplegamos el men y elegimos la opcin
Mostrar todos los errores.
A continuacin se abrir el panel Resultados con las lista de los errores encontrados.
A continuacin se abrir el panel Resultados con las lista de los errores encontrados.
En esta lista aparece el grado de importancia del error representado mediante un icono, el globo de palabras indica un mensaje
informativo (seala cdigo que no es compatible con un navegador pero que no tiene ningn efecto visible), el icono de signo de
exclamacin con fondo rojo indica error (indica cdigo que puede causar un problema visible grave en un navegador concreto, como
hacer desaparecer partes de una pgina) y el icono de signo de exclamacin con fondo amarillo indica advertencia (seala una parte
de cdigo que no se visualizar correctamente en un navegador concreto, pero eso no causar ningn problema grave de
visualizacin).
A continuacin tenemos la pgina y nmero de lnea donde est el error y una descripcin del mismo.
A veces la descripcin es un texto largo que no se puede visualizar completamente para ello puedes utilizar el botn Ms info
Como ya sabrs los distintos navegadores y sus distintas versiones hacen que un error lo sea o no, debemos realizar la comprobacin
eligiendo las versiones de los navegadores que consideremos sean las ms utilizadas entre nuestros navegantes.
Para seleccionar los navegadores para que Dreamweaver los compruebe debemos desplegar el men Comprobar navegadores de
destino y seleccionar la opcin Configuracin... Aparecer el cuadro de dilogo Comprobar navegadores de destino donde
seleccionamos los navegadores que queramos comprobar y la versin mnima de la lista desplegable a la derecha del nombre del
navegador.
Pg. 15.2
Enero 2006.
Unidad 15. HTML desde Dreamweaver (III)
Bsqueda
Buscar y reemplazar
En ocasiones es posible querer buscar dentro de un sitio web todas aquellas pginas que contengan un texto en concreto, una etiqueta
en concreto, o parte de estos elementos. Tal vez los queramos buscar porque deseemos trabajar sobre esas pginas y no
recordbamos cual de ellas era, o tal vez porque queramos cambiar ese texto o etiqueta por otros.
Imaginemos que una persona ha creado un sitio web, en el que la mayora de las pginas tiene al comienzo un texto que hace
referencia al nombre del sitio, por ejemplo, todas esas pginas comienzan con PerrosGatos, y tiene la seguridad de que no existe ese
texto en ninguna parte de las pginas que no sea al comienzo. Ahora imaginemos que esta persona ha creado una imagen de un perro
y un gato, y que quiere cambiar en todas las pginas que contienen el texto PerrosGatos dicho texto por la imagen.
En este caso no es necesario que abra una por una todas las pginas que contienen dicho texto, ni tampoco que modifique una por una
dichas pginas para cambiar el texto por la imagen. Para realizar esta tarea resulta ms sencillo utilizar la herramienta de Buscar y
reemplazar.
Puedes abrirla a travs del men Edicin, opcin Buscar y reemplazar, o pulsando Ctrl+F.
Mediante Buscar en puede especificarse si se va a buscar en el documento actual, en todo el sitio, o en los archivos seleccionados del
sitio (habiendo seleccionado dichos archivos previamente).
A travs de Buscar se especifica si hay que buscarlo en el texto (en la ventana diseo), o en el cdigo HTML (cdigo fuente).
Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el que hay que indicar el texto o el cdigo que se desea buscar.
En Reemplazar con hay que especificar el texto o el cdigo por el que se desea cambiar el texto o cdigo buscado.
El reemplazo puede hacerse de varias formas, siempre a travs de los botones de la derecha de la ventana. Una de ellas es buscar
uno por uno cada uno de los documentos que contengan el cdigo o texto a buscar, y reemplazar cuando se desee. Para ello se
utilizan los botones Buscar sig. y Reemplazar.
Si se desean buscar todos los documentos que contengan dicho texto o cdigo, y reemplazar en todos ellos, se utilizan los botones
Buscar todos y Reemp. todos.
Cuando se utiliza la opcin Buscar sig., se abre la pgina en la que se encuentra el texto coincidente, resaltando en el cdigo fuente la
lnea en la que este se encuentra. De este modo podemos decidir uno por uno los cambios a realizar. Cuando estemos seguros de
querer reemplazar pulsaremos sobre Reemplazar, y cuando no deseemos reemplazar volveremos a pulsar sobre Buscar sig..
Cuando se utiliza la opcin Buscar todos se cierra la ventana de Buscar y

reemplazar y se abre un nuevo panel como el de la derecha, en el que
aparecen todos los documentos en el que coincide el texto o el cdigo buscado.
vuelve a abrirse la ventana de Buscar y
Pulsando sobre el botn
reemplazar. Desde dicha ventana podemos reemplazar en los documentos
encontrados, uno por uno, con el botn Reemplazar, o bien reemplazar
directamente en todos los documento encontrados, pulsando sobre el botn
Reemp. todos.
En el panel, cuando se haya reemplazado en algn documento, ste volver a
aparecer en la lista junto con un crculo verde, que indica que ya ha sufrido
reemplazo.
En ocasiones podemos equivocarnos, al buscar y reemplazar texto o cdigo errneos. Hay que tener mucho cuidado al utilizar esta
herramienta, ya que no es posible deshacer los cambios en los documentos que estn cerrados durante la bsqueda y el reemplazo.
En el ejemplo anterior, la persona quera buscar el texto PerrosGatos, y reemplazarlo por una imagen. En este caso concreto, lo que
se desea sustituir es texto por una imagen, por lo que en Buscar no podramos elegir la opcin Texto, habra que elegir la opcin
Cdigo fuente.
En Reemplazar con, habra que especificar la etiqueta HTML completa para insertar la imagen. En este caso la etiqueta sera <img
scr="imagenes/logo_animales.gif">, teniendo en cuenta que la imagen se llama logo_animales.gif y que se encuentra dentro del
sitio en la carpeta imagenes.
Pg. 15.3
Enero 2006.

Curso de Macromedia Dreamweaver 8. 138 PAG PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Curso de Macromedia Dreamweaver 8. 138 PAG PDF

Transféré par

Droits d'auteur :

Formats disponibles

Curso de Macromedia Dreamweaver 8. Tutorial Gratis.

AulaClic. Curso de Dreamweaver 8. ndice

11. Las plantillas

http://www.aulaclic.es/dreamweaver8/index.htm (1 de 5)08/07/2006 20:52:44

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Indice

Unidad 1. Conceptos bsicos de Dreamweaver 8

Unidad 2. El entorno de trabajo

Unidad 10. Multimedia

Unidad 3. Configuracin de un sitio local

http://www.aulaclic.es/dreamweaver8/index.htm (2 de 5)08/07/2006 20:52:44

Unidad 11. Las plantillas

Unidad 12. Capas

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Indice

Caractersticas del texto

Unidad 13. Comportamientos

Unidad 14. Otros elementos

http://www.aulaclic.es/dreamweaver8/index.htm (3 de 5)08/07/2006 20:52:44

Unidad 15. HTML desde Dreamweaver

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Indice

Ejercicios paso a paso

Secuencias animadas (vdeo tutoriales) Ejercicios propuestos

http://www.aulaclic.es/dreamweaver8/index.htm (4 de 5)08/07/2006 20:52:44

3. Crear sitio local y modificar las

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Indice

http://www.aulaclic.es/dreamweaver8/index.htm (5 de 5)08/07/2006 20:52:44

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 1

Unidad 1. Conceptos bsicos de Dreamweaver 8 (I)

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 1

Editar pginas web

Cmo tener una pgina en Internet

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 1

http://www.aulaclic.es/dreamweaver8/t_1_1.htm (3 de 3)04/12/2006 23:12:51

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 01

Unidad 1. Conceptos bsicos de Dreamweaver 8 (II)

Arrancar y cerrar Dreamweaver 8

Veamos las dos formas bsicas de arrancar Dreamweaver 8.

Abrir y guardar documentos

http://www.aulaclic.es/dreamweaver8/t_1_2.htm (1 de 3)04/12/2006 23:13:02

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 01

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O.

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+S.

http://www.aulaclic.es/dreamweaver8/t_1_2.htm (2 de 3)04/12/2006 23:13:02

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 01

de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

http://www.aulaclic.es/dreamweaver8/t_1_2.htm (3 de 3)04/12/2006 23:13:02

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 01

Unidad 1. Conceptos bsicos de Dreamweaver 8 (III)

http://www.aulaclic.es/dreamweaver8/t_1_3.htm (1 de 3)04/12/2006 23:14:43

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 01

http://www.aulaclic.es/dreamweaver8/t_1_3.htm (2 de 3)04/12/2006 23:14:43

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 01

Cambia el Ttulo por Mi primera pgina.

http://www.aulaclic.es/dreamweaver8/t_1_3.htm (3 de 3)04/12/2006 23:14:43

Curso de Macromedia Dreamweaver 8. Tutorial Gratis. Tema 01

Unidad 1. Conceptos bsicos de Dreamweaver 8 (IV)

http://www.aulaclic.es/dreamweaver8/t_1_4.htm (1 de 3)04/12/2006 23:22:48