Macromedia Dreamweaver

INSTITUTO PERUANO EJECUTIVO
HENRY FAYOL
MACROMEDIA DREAMWEAVER CS5

MANUAL INSTRUCTIVO DEL ESTUDIANTE
JULIACA PER
2013
CETPRO HENRY FAYOL
Adobe Dreamweaver
TABLA DE CONTENIDO
CAPITULO 1. Recomendaciones para la Redaccin y Diseo de las Pginas Web
RECOMENDACIONES GENERALES
El hipertexto y la posibilidad de "navegar" por la informacin
La lentitud de las redes de comunicaciones
La existencia de diferentes programas y versiones de los programas navegadores
El monitor del ordenador
La actualizacin de la informacin
Propiedad intelectual
Difusin y publicidad de las pginas
Los contenidos y el tipo de usuarios a quienes estn dirigidos
RECOMENDACIONES SOBRE DISTINTOS ELEMENTOS DE LAS PGINAS WEB
Longitud de las pginas
Los nombres de los ficheros
Pginas con frames o marcos
Tipografa
Redaccin de enlaces
Ficheros en formatos distintos a html
Imgenes
Colores y fondos
La URL de las pginas: asignacin de "alias"
Proteccin de pginas bajo clave
CAPITULO 2. Conceptos bsicos de Dreamweaver CS5
Qu es Dreamweaver CS5
HTML bsico
Editar pginas web
Cmo tener una pgina en Internet
Iniciar y Cerrar Dreamweaver CS5
Abrir y guardar documentos
CAPITULO 3. El entorno de trabajo
La pantalla inicial
Las barras
Los paneles e inspectores
Personalizar el rea de trabajo
Vistas de un documento
La ayuda
CAPITULO 4. Configuracin de un sitio local
Introduccin
Crear o editar un sitio web sin conexin a Internet
Asistente para agregar un sitio de red
Propiedades del documento
Los colores
COMPUTACION E INFORMATICA
CETPRO HENRY FAYOL
CAPITULO 5. El texto
Caractersticas del texto

Listas
Estilos CCS (I)
Estilos CSS (II)
CAPITULO 6. Hiperenlaces
Introduccin
Tipos de enlaces
Crear enlaces
Destino del enlace
Formato del enlace
Enlace a correo electrnico
Vnculos rotos
CAPITULO 7. 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
CAPITULO 8. Tablas
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
CAPITULO 9. Marcos
Introduccin
Crear marcos
Seleccionar marcos
Guardar
Configurar marcos
Contenido del marco
CAPITULO 10. Formularios
Introduccin
Elementos de formulario
Crear formularios
Validar formularios
Adobe Dreamweaver
CETPRO HENRY FAYOL
CAPITULO 11. Multimedia
Pelculas Flash
Sonido
Vdeos
CAPITULO 12. Las plantillas
Introduccin
Crear plantillas
Establecer regiones editables en una plantilla
Basar pginas en una plantilla
CAPITULO 13. Capas
Introduccin
Insertar una capa
Formato de una capa
CAPITULO 14. Comportamientos
Introduccin
Insertar un comportamiento
Mostrar-Ocultar capas
Llamar JavaScript
CAPITULO 15. Otros elementos
Marquesinas
Fecha
Regla horizontal
Cdigo de otras pginas
Adaptar webs a distintas resoluciones
CAPITULO 16. HTML desde Dreamweaver
Etiquetas
El inspector de cdigo
Completar las etiquetas
Errores en el cdigo
Buscar y reemplazar
Adobe Dreamweaver
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 1. Recomendaciones para la Redaccin y Diseo de las

Pginas Web
RECOMENDACIONES GENERALES
La forma de redactar, organizar y disear una informacin para ser publicada en un servidor
web conectado a la red Internet, es muy diferente de cmo nos plantearamos este trabajo si
fuera a publicarse en el soporte tradicional en papel. Deberemos tener en cuenta toda una
serie de cuestiones que son propias y especficas de esta tecnologa:
1. El hipertexto y la posibilidad de "navegar" por la informacin
En un documento en papel solemos movernos por la informacin de una forma lineal: una
hoja tras otra. Sin embargo, en una pgina web el hipertexto nos permite desplazarnos de
un documento a otro con el simple acto de pulsar sobre un enlace. Esta peculiar forma de
navegar por un conjunto de informacin entrelazada puede provocar cierta desorientacin
por parte del lector, ya que con un solo paso puede haberse desplazado tanto a una seccin
diferente de la misma web, como a una web totalmente distinta. Adems, raramente
podremos incluir toda nuestra informacin en un solo documento; tendremos que
fragmentarla en diversos ficheros.
Estas dos circunstancias nos obligan a intentar estructurar lo mejor posible la informacin,
de forma que nuestro lector est siempre bien orientado sobre en qu seccin se encuentra
y entienda la relacin entre la pgina que est viendo con las dems de nuestra web. Esto
se puede lograr con diversas ayudas:
Realizando pginas de ndice lo ms claras posible.

Usando los botones de navegacin que permitan al usuario volver a las pginas de
ndice, a la pgina principal o desplazarse a las pginas relacionadas.
Incluyendo grficos o colores diferentes segn la seccin de nuestra web en que se
encuentre.
2. La lentitud de las redes de comunicaciones

Siempre debemos ser conscientes de que la pgina web que estemos diseando se va a
transmitir por una red de comunicaciones que no es tan rpida como uno deseara, que
muchos de nuestros lectores tengan que pagar por hacer esa transmisin y que
desconozcamos la potencia del equipo informtico que poseen. As, tenemos que cuidar
que nuestras pginas no tengan un tamao demasiado grande, para facilitar su carga rpida
por la red. Suele considerarse como el mximo tolerable un tamao de unos 40 o 50 Kb
(fichero + imgenes).
En un documento web lo que ocupa ms espacio son los grficos, por lo que se debe valorar
cuidadosamente la necesidad, cantidad y calidad de los grficos que se ponga.
Tambin se debe tener en cuenta la lentitud de la red a la hora de estructurar nuestra
informacin: Se debe intentar que el lector llegue a la informacin deseada con el menor
nmero de pasos intermedios que sea posible, para evitar que tenga que cargar fichero tras
fichero. Por ello, si bien las pginas con ndices son imprescindibles, no debemos abusar de
ellas poniendo ndices que remitan a ms ndices, como a veces podemos encontrar en
Internet.
CETPRO HENRY FAYOL
Adobe Dreamweaver
3. La existencia de diferentes programas y versiones de los programas navegadores

Tambin a diferencia con los documentos en papel, los lectores de nuestras pginas web
tienen que usar una herramienta para visualizarlas: los navegadores o browsers. Por el
momento, no existe un programa standard, sino que, por el contrario, los distintos
fabricantes se hacen la competencia incluyendo nuevos avances tcnicos en sucesivas
versiones de sus productos que normalmente no funcionan bien en el de la competencia.
Esto hace que una pgina que nosotros hemos diseado vindola con el programa
Netscape, nos d alguna sorpresa desagradable al intentar visualizarla con Internet
Explorer. Y viceversa. Lo mismo puede ocurrirnos si vemos esa pgina con el mismo
programa empleado, pero en una versin inferior. Esta es la razn por la que debemos
valorar cuidadosamente la necesidad de emplear la "ltima" tecnologa de diseo de
paginas www que est de moda en ese momento y ser conscientes de que cuanto ms
simple sea nuestra pgina ms posibilidades hay de que sea correctamente visualizada por
un mayor nmero de lectores.
4. El monitor del ordenador
Los documentos web estn pensados para ser visualizados en la pantalla de un ordenador.
El problema es que desconocemos el tipo de monitor desde el que se van a leer las pginas:
pequeo o grande, de cristal lquido, en color o blanco y negro, con resolucin buena o
mala, etc. As, un documento que hemos diseado cuidadosamente en nuestro monitor de
15 pulgadas con una resolucin 600 X 800, puede verse "encogido" en una pantalla grande,
o bien parte del contenido "salirse" de la pantalla en un monitor de baja resolucin. Por
esta razn no est de ms comprobar el aspecto que toma nuestra pgina en distintos tipos
de pantallas.
El hecho de visualizar el documento en una pantalla tambin va a influir en la longitud que
deberemos dar a nuestras pginas, ya que no es conveniente obligar a los lectores a
desplegar pginas excesivamente largas.
5. La actualizacin de la informacin
En una publicacin en papel, tenemos que esperar a la aparicin de una nueva edicin de la
misma para poder actualizar sus contenidos. Una de las principales ventajas del soporte
web es la posibilidad de mantener actualizada la informacin en un instante. As, la tarea de
realizar unas pginas web no finaliza con su publicacin en un servidor: es necesario
mantenerla actualizada, trabajo que en realidad no "termina" nunca. Es necesario
considerar previamente la posible caducidad de la informacin que vamos a poner en la
red. Si pensamos que no vamos a ser capaces de mantener actualizada determinada pgina,
tal vez debamos replantearnos la oportunidad de su publicacin. Lo mismo ocurre con los
tan comunes listados de enlaces recomendados: quedan obsoletos con gran rapidez.
Adems, es importante indicar en la propia pgina la fecha de la ltima modificacin, de
forma que el lector est informado de la puesta al da de la misma.
CETPRO HENRY FAYOL
Adobe Dreamweaver
6. Propiedad intelectual
Slo deberemos publicar en Internet material que sea propio o de libre uso. En caso
contrario, deberemos disponer del permiso del autor. Todo el material publicado en
Internet est protegido por la legislacin sobre Propiedad Intelectual. Sin embargo,
debemos tener en cuenta que es muy sencillo copiar cualquier informacin que pongamos
en la red, por lo que debemos valorar cuidadosamente la oportunidad o no de publicar
algn tipo de informacin sensible o confidencial.
7. Difusin y publicidad de las pginas
Poner la informacin en un servidor web no es garanta suficiente de alcanzar a todos los
usuarios potenciales deseados. Necesitamos dar difusin a la existencia de nuestras pginas
si deseamos que cumplan su funcin. Lo ms normal es que nuestros usuarios alcancen
nuestro web tras una bsqueda en alguno de los numerosos motores de bsqueda
existentes. Para que aparezcan nuestras pginas reflejadas en estos buscadores, debemos
tener en cuenta los elementos que estos usan para localizar informacin:
Poner claramente el ttulo del documento

Introducir algunas palabras clave en la etiqueta <meta> del lenguaje html
Incluir el mximo de informacin significativa posible en las primeras 25 lneas de la
pgina, ya que algunos motores de bsqueda las usan para indizar su base de datos.
Darnos expresamente de alta en los motores de bsqueda. Casi todos los buscadores
incluyen un formulario para darse de alta. Existen adems servicios que nos dan de alta
simultneamente en muchos buscadores, aunque la mayora de ellos son de pago.
8. Los contenidos y el tipo de usuarios a quienes estn dirigidos

Lo ms importante en una pgina web son los contenidos. La bsqueda de cualquier
informacin en Internet suele ser una larga navegacin de pgina en pgina, necesitando
emplear mucho tiempo para encontrar informacin til. La manera de disear y organizar
nuestra informacin estar claramente condicionada por el tipo de contenidos y, sobre
todo, por el usuario al que van dirigidos.
Pginas redactadas para personal o estudiantes de una universidad y que se pensaba

que se iban a consultar principalmente en los ordenadores de su propia red: se
puede permitir ficheros ms grandes, ya que las comunicaciones son rpidas y el
tiempo de espera ser mnimo.
En el caso de materiales que se piense que van a ser consultados desde ordenadores
ajenos a la propia universidad: se tendr que ser muy cuidadoso con el tamao de
los ficheros
Materiales orientados a extranjeros, especialmente latinoamericanos que suelen
usar ordenadores muy lentos: se debe hacer las pginas lo ms rpidas que sea
posible.
Informacin que sospecha los lectores van a preferir leer en forma impresa: intentar
que toda la informacin vaya en un solo documento y utilizar una tipografa
apropiada, aprovechando los mrgenes de la pagina
CETPRO HENRY FAYOL
Adobe Dreamweaver
Pginas orientadas a usuarios con mayores conocimientos de Internet: se puede

presuponer que dispondrn de mejores equipos y que no se sorprendern con la
inclusin de tecnologas ms avanzadas que las simples pginas de informacin
estticas.
RECOMENDACIONES SOBRE DISTINTOS ELEMENTOS DE LAS PGINAS WEB

1. Longitud de las pginas
Las pginas debern hacerse lo ms cortas y concisas posible. Est demostrado que a la
gente no le gusta leer en la pantalla de un ordenador: la vista se cansa y la gente se
"aburre". Adems, el hecho de tener que desplegar mucha cantidad de texto (y/o
imgenes) en la pantalla, puede producir desorientacin en el lector, ya que pierde las
referencias de la cabecera y las ayudas a la navegacin. Cuanto ms importante sea una
pgina y ms atencin requiera por parte de los lectores, ms corta debe ser. Si el
contenido es especialmente interesante, esto se debe demostrar dentro de lo que se ve en
el primer pantallazo.
Suele recomendarse un mximo de 4 pantallazos como longitud aceptable para una pgina.
Si necesitamos incluir ms informacin deberemos considerar la posibilidad de dividir el
contenido en varias pginas o bien hacer un ndice de contenidos al principio del
documento con enlaces a las diversas partes.
La longitud de la pgina es adems una de las muchas razones que desaconsejan el uso de
tipos de letra muy grandes.
2. Los nombres de los ficheros
Una de las principales dificultades a la hora de realizar un documento www es que nosotros
estamos trabajando en un PC con el entorno Windows, pero nuestras pginas van a residir
en una mquina con el sistema operativo UNIX. En UNIX son especialmente importantes las
maysculas/minsculas, lo que debemos tener en cuenta a la hora de poner el nombre a un
fichero y hacer un enlace al mismo: si pusimos el nombre en minsculas, deberemos hacer
igual los enlaces. Si no lo hacemos as, puede que los enlaces e imgenes se vean bien en
nuestro PC, pero no ser as en el servidor. Lo mismo sucede con las extensiones de los
ficheros: podemos emplear ".html" o ".htm", ".jpg" o ".jpeg" pero deberemos respetar esto
a la hora de hacer los enlaces.
Otros elementos que debemos evitar al poner nombres a los ficheros son:
Caracteres especiales como , , ", etc.

Espacios en blanco
Letras con acentos
Lo mejor es que desde el principio se establezca un criterio y lo siga para todas las pginas
relacionadas: Por ejemplo, optar por poner todo en minsculas y con las extensiones html y
jpg.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Siempre se debe evitar cambiar el nombre a los ficheros, aunque hayamos actualizado la
informacin; no hay que olvidar que la pgina puede estar referenciada en diversos sitios. Si
no, no quedara ms remedio que cambiarle el nombre, se puede mantener la pgina
antigua, con una nota en la que se que avise de que "esta pgina ha cambiado de sitio",
dando a continuacin la nueva URL.
3. Pginas con frames o marcos
Las pginas con frames o marcos permiten dividir la pantalla en diferentes ventanas, con un
documento html diferente en cada una de ellas. Se suelen utilizar bastante ya que nos
permiten ejercer un gran control sobre la disposicin general y la apariencia de la pgina.
Sin embargo, deben utilizarse con cautela, ya que tienen algunos inconvenientes:
No se podrn hacer bookmarks o marcadores a las partes.

Habr dificultades para imprimir las pginas individuales.
No se pueden "copiar" las URLs.
El botn de anterior o back de los navegadores puede no funcionar correctamente.
Reducen el espacio til donde visualizar la informacin.
No todos los navegadores soportan marcos.
Podemos tener dificultades si alguien quiere hacer un enlace a una de nuestras
pginas: al aislar una parte del resto de los marcos, esta puede perder el sentido.
Algunas recomendaciones para pginas con frames:
Eludir la fragmentacin excesiva. Si se van a utilizar ms de dos frames, hay que

evitar la impresin de parcelacin en mltiples ventanitas. Por lo menos una de ellas
debe ser mayor que las dems y actuar como pgina principal.
Evitar la rigidez de las frames (uso de las etiquetas html noresize o scrolling="no").
No debemos impedir que los usuarios puedan "mover" las frames, ya que lo pueden
necesitar por tener una resolucin de pantalla diferente de la nuestra.
Enlaces exteriores a nuestro web. No es conveniente que queden prisioneros dentro
de nuestra estructura de frames, ya que suele ser muy molesto debido a que la
nueva pgina quedar en un espacio reducido. Adems, seguramente tendr un
estilo diferente a la nuestra. Todava puede ser peor si la pagina a la que enlacemos
tiene a su vez frames. Para evitar esto podemos utilizar la etiqueta
html target="_top" con lo que la nueva pgina se cargar en una pantalla
completa.
4. Tipografa
Al escoger la tipografa que vamos a emplear en nuestra pgina, debemos tener en cuenta
que estamos diseando un documento para que pueda ser ledo en la pantalla de un
ordenador. Por lo tanto, debemos escoger tipos de letras no muy grandes, para no hacer
demasiado larga la pgina, pero tampoco excesivamente pequeos, que puedan causar
dificultades de lectura a las personas que no tengan una buena visin.
En general es muy importante una buena estructuracin del texto a lo largo de la pgina,
empleando prrafos cortos que faciliten la lectura y poniendo ttulos destacados en las
CETPRO HENRY FAYOL
Adobe Dreamweaver
distintas secciones del texto. Adems, es mejor no apurar mucho los bordes de la pantalla
del ordenador: las lneas cortas se leen con mayor facilidad que las largas. Podemos forzar
esto situando el texto en una tabla de una sola columna y sin bordes, definiendo que ocupe
solo el 85-90 % de la pantalla.
Usar tipos de letras que sean casi universales, como Arial o Times, ya que el usuario solo
podr ver los tipos de letras que tiene instalados en su ordenador. De nada sirve que se
utilicen letras raras que solo veremos nosotros. Adems, los navegadores tienen muchas
opciones que pueden ser configuradas por el propio usuario: una de ellas es la eleccin
personalizada de un tipo de letra, con lo que el navegador no har caso del tipo usado por
el que dise la pgina. Si deseamos usar alguna tipografa especial para un titular o
logotipo, deberemos convertirlo en una imagen, con lo que garantizaremos su correcta
visualizacin.
El excesivo uso de maysculas dificulta la lectura. No se deben usar para titulares largos y
an menos para bloques de texto. Lo mismo puede decirse del uso de las negritas, cursivas
o del empleo del color: son recursos que usaremos slo para resaltar palabras o partes del
texto. Si deseamos destacar todo un prrafo es mejor hacerlo con un sangrado o
introducindolo centrado dentro de una tabla sin bordes de menor tamao que el prrafo
precedente. Podemos destacarlo an ms si lo deseamos, poniendo un color de fondo
distinto a esa tabla.
No se debe usar el subrayado para destacar un texto: en las pginas web estamos
acostumbrados a que las partes subrayadas sean enlaces y la gente suele pulsar sobre ellos
esperando acceder a otra pgina. Tambin debemos evitar el uso del "blink" o texto
parpadeante. Es muy molesto y perturba la lectura del texto. Podemos combinar el texto
con algunas imgenes para evitar la monotona, pero debern ser imgenes pequeas (que
se carguen rpido) y encontrar un buen equilibrio visual entre las figuras y el texto.
5. Redaccin de enlaces
La frase en la que vamos a situar el enlace debe tener significado. Incluso, si es posible,
debe contener la misma frase que el ttulo del documento al que se va a acceder desde
el enlace. Por ejemplo:
Mejor: Para ms informacin, consulte nuestro Manual de Estilo.
En lugar de: Para ver el Manual de Estilo haga clic aqu.
Una sola palabra es difcil de pinchar y puede no tener sentido.

Usar toda una frase para poner el enlace puede ser difcil de entender, especialmente si
cambia de lnea
Los listados de enlaces externos deben ser revisados peridicamente, ya que suelen
quedarse obsoletos con gran rapidez.
No se deben cambiar los colores standard de los enlaces (azul para los enlaces, violeta
para los enlaces visitados), puede confundir a los lectores. De la misma manera, no se
deben utilizar estos dos colores a lo largo del texto, ya que la gente tiene tendencia a
pinchar sobre ellos.
CETPRO HENRY FAYOL
Adobe Dreamweaver
6. Ficheros en formatos distintos a html

Existe la posibilidad de poner en un servidor web ficheros que no sean en formato html: en
Word, Excel, PowerPoint, pdf, etc. Los enlaces se hacen igual que si estuviramos enlazando
cualquier pgina. En la mayora de los navegadores, al pinchar sobre estos enlaces, se abrir
automticamente el programa que gestiona esos ficheros. En caso contrario, nos dar la
posibilidad de guardar en nuestro ordenador el documento. Esto quiere decir que para
poder usar estos ficheros es necesario tener instalado ese programa en el PC, por lo que
solo debemos ponerlos si tenemos la seguridad de que nuestros lectores van a contar con el
software necesario. Si no estamos seguros, es mejor que convirtamos la informacin al
formato html.
En todo caso, siempre deberemos advertir al lector en el propio texto del enlace de que se
trata de un texto en Word, Excel, etc.
7. Imgenes
Como ya mencionamos al hablar sobre la lentitud de las redes de comunicaciones, la
inclusin de imgenes en nuestras pginas, debe valorarse con detalle a fin de que la carga
de la pgina se lo ms rpida posible. Suelen considerarse pginas rpidas, aquellas de un
tamao no superior a unos 40 o 50 Kb (fichero + imgenes).
Dado que cuanta mayor calidad tiene una imagen, ms ocupa, deberemos encontrar un
compromiso entre la calidad de la misma y la informacin que se quiere mostrar. Son muy
raras las ocasiones en que es necesario poner una imagen de alta calidad en nuestras
pginas. Existen programas de tratamiento de grficos que permiten "bajar" la calidad de
una imagen de forma razonable.
Tambin podemos jugar con el tamao de las imgenes a la hora de quitar peso a nuestra
pgina, tratando de que estas sean lo ms pequeas posible. Si necesitamos incluir alguna
imagen grande, es mejor poner en la pgina una pequea muestra de la misma, indicando
que se puede pinchar sobre ella para verla en tamao grande. As, solo tendrn que
soportar una espera larga aquellos lectores que realmente tengan inters en verla. No se
debe reducir el tamao de la imagen con el programa con el que estamos editando la
pgina (Netscape Composer, etc.): nos da la falsa impresin de que la imagen es ms
pequea, pero lo nico que hace es reducir la forma en que vemos la imagen, que en
realidad es la misma. Para reducir de verdad el tamao de la imagen deberemos usar un
programa de tratamiento de grficos.
Se puede referenciar la misma imagen todas las veces que se quiera. No debemos
sobrecargar el servidor poniendo una y otra vez la misma imagen en diferentes directorios:
basta con ponerla una vez y referenciar la misma. Esto tiene adems la ventaja de que si un
usuario ya ha cargado ese icono en alguna ocasin, lo conservar en la "cach" de su
ordenador y no necesitar cargarla de nuevo, con lo que se acelera la transmisin. Por esta
razn, para iconos sencillos como son las "bolitas" para listados, lneas de separacin, etc.,
puedes utilizar los que estn ya cargados en nuestro web en nuestro archivo grfico.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Los formatos de imgenes ms extendidos son: GIF y JPG (o JPEG):
El formato GIF utiliza hasta un mximo de 256 colores o 64 tonos de grises (se
pueden usar menos, con lo que ocupa menos la imagen) y permite la posibilidad de
definir fondos transparentes y animacin de grficos. Este formato usa un sistema
de compresin (para reducir el tiempo de transmisin por la red) con el que no se
pierde calidad. Por ello, este formato es apropiado para imgenes pequeas y con
buena resolucin y para dibujos con bordes bien definidos.
El formato JPG permite calidades de ms de 256 colores, de hecho permite hasta 16

millones. El problema es que muchos usuarios tienen una resolucin de pantalla de
solo 256 colores, con lo que puede que se vean las imgenes de forma defectuosa.
Este formato tiene un sistema de compresin que hace que su transmisin por la red
sea ms rpida, por lo que es el formato ms apropiado para imgenes grandes. Sin
embrago, este sistema de compresin puede bajar la calidad de la imagen.
Las imgenes animadas deben utilizarse con mucho cuidado:
Ocupan bastante ms espacio que las imgenes normales.

Distraen la atencin del lector de la informacin til y acaban cansando.
Dificultan el saber cundo ha terminado de cargarse una pgina.
Si se tiene abierta la pgina web y se cambia a una ventana distinta con otra
aplicacin, el PC sigue procesando la repeticin de la imagen, con lo que ralentiza la
velocidad de trabajo del ordenador.
Dificultan una impresin "limpia" de la pgina.
8. Colores y fondos
En nuestras pginas web deberemos tener cuidado en emplear una armona de colores que
no perturbe la lectura de las pginas, procurando no emplear colores estridentes o
combinaciones extraas. No se deben cambiar los colores standard de los enlaces (azul para
los enlaces, violeta para los enlaces visitados), puede confundir a los lectores. De la misma
manera, no se deben utilizar estos dos colores a lo largo del texto, ya que la gente tiene
tendencia a pinchar sobre ellos.
Lo mejor es utilizar fondos de colores claros y texto de color oscuro, ya que son tonos que
se suelen leer con ms comodidad, por lo que siempre se debera hacer as en pginas en
las que predomina el texto. En el caso de usar un color de fondo muy oscuro tendremos que
emplear una tipografa en blanco u otro color muy claro, con lo que se impide la impresin
correcta de la pgina (pocas personas tienen configurado su navegador para que imprima
los fondos).
En el caso de que se emplee una imagen como fondo, deben seguirse los mismos consejos
que acabamos de dar y usar texturas simples y tenues, procurando no usar texturas muy
rugosas que se ven mal en pantallas de baja resolucin.
CETPRO HENRY FAYOL
Adobe Dreamweaver
9. La URL de las pginas: asignacin de "alias"

El servidor web de la Universidad tiene gran cantidad de informacin, dividida en muchos
directorios. Esto a veces puede provocar que la URL de una pgina sea muy larga. Existe la
posibilidad de asignar una direccin "corta" que facilite a nuestros usuarios recordar la
direccin de una pgina. Adems, estas URL quedan mejor si vamos a publicar la pgina en
algn medio impreso: un anuncio de prensa, un trptico que pondremos en un mostrador,
etc.
Las direcciones cortas suelen tener este aspecto:
http://www.uc3m.es/nombre
10. Proteccin de pginas bajo clave
Se pueden introducir en el servidor informaciones que estn orientadas nicamente a
usuarios de la propia Universidad. En el caso de que la informacin que contenga tenga
carcter confidencial, se puede solicitar que el acceso a estos ficheros est protegido.
Deberemos poner esa informacin en un directorio separado, ya que la proteccin afecta a
todo un directorio y definir a que tipo de personal se autorizara a leer la documentacin. Se
puede proteger de dos maneras:
Que sea consultada solo desde ordenadores de la Universidad

Que para acceder haya que teclear la clave de correo electrnico de la Universidad.
En este caso, podremos tambin restringir el uso a un sector de usuarios
delimitndolo a algn subdominio de correo, como por ejemplo @di, para el
personal del servicio de informtica, @der-pr par el personal del departamento de
Derecho privado, etc.
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 2. Conceptos bsicos de Dreamweaver

Qu es Dreamweaver
Dreamweaver es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS5 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, incluye un software de cliente FTP completo, permitiendo trabajar con mapas
visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
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, sin mencionar lo complicado que es crear pgina web con apariencia profesional.
Actualmente 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, como puede ser Microsoft
Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la
ventaja de ser gratuitos.
Cmo tener una pgina en Internet

Para poder publicar 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 el
espacio propio que se requiera en el servidor depender de la empresa, del espacio en disco, volumen
de transferencia y otras opciones que podamos contratar.
Existen empresas que ofrecen este tipo de servicio gratuitamente, pero con ciertas limitaciones como:
poco espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya.
Aunque no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Iniciar y Cerrar Dreamweaver

A continuacin las dos formas bsicas de iniciar Dreamweaver:
METODO I. 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. Puede pulsar en Todos los programas y buscar en la lista
con los programas que hay instalados en el ordenador. Buscar Adobe Dreamweaver CS5 y haga clic
sobre l para arrancar el programa
METODO II. Desde el icono de Dreamweaver
Doble clic sobre el cono
que se encuentra en el escritorio de Windows
Para cerrar Dreamweaver CS5:

Use una de las siguientes opciones:
Clic en el botn cerrar

Pulse la combinacin de teclas ALT+F4.
Clic sobre el men Archivo / opcin Salir. (CTRL + Q)
Abrir y guardar documentos

Para abrir un documento, utilice cualquiera de las siguientes opciones:
Clic en el botn abrir

de la barra de herramientas estndar.
Pulse la combinacin de teclas Ctrl+O.
Clic sobre el men Archivo / opcin Abrir.
Doble clic sobre el archivo en la ventana del sitio.
Para abrir un documento nuevo, puede utilizar cualquiera de las siguientes operaciones.
Clic en el botn abrir

Pulse la combinacin de teclas Ctrl+N.
Clic sobre el men Archivo / opcin Nuevo.
Doble clic sobre el archivo en la ventana del sitio.
Despus de esto aparecer una nueva ventana, en la que deber elegir la Categora Pgina bsica,
HTML.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Clic en el botn guardar
CETPRO HENRY FAYOL
Adobe Dreamweaver
Pulse la combinacin de teclas Ctrl+S.

Clic sobre el men Archivo / 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 puede optar por cualquiera de las siguientes opciones.
Clic en el botn guardar todo

Clic sobre el men Archivo / opcin Guardar todo.
Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en cada uno
de ellos. Debe 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 utilice esta opcin, al menos hasta que te haya aprendido a manejar el software.
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 3. Entorno de trabajo

Los elementos bsicos de Dreamweaver SON: La pantalla, las barras, los paneles / Inspectores, etc., es
importante saber diferenciar entre cada uno de ellos. Ud. deber de Aprender a distinguir cada uno de
ellos, cmo se activa, dnde se ubican y para qu sirven. Tambin ver cmo obtener ayuda, por si en
algn momento olvida todo lo aprendido y cmo seguir trabajando. Cuando aprenda todo ello estar en
capacitado a para crear pginas web.
La pantalla inicial
Al iniciar Dreamweaver aparecer una pantalla como la que se muestra, viendo sus componentes
fundamentales, solo as podr conocer los nombres de los diferentes elementos y ser ms fcil
entender el funcionamiento del software. La pantalla que se muestra a continuacin puede no coincidir
exactamente con la que tenga en su ordenador, ya que cada usuario puede decidir qu elementos
quiere que se muestre en cada momento, como se ver ms adelante.
Las barras
1. La barra de aplicacin
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios
botones propios de la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas para
obtener ayuda on line.
2. Las pestaas del documento
Cada archivo que tenga abierto, mostrar una pestaa con su nombre, lo que le permitir cambiar
de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin
CETPRO HENRY FAYOL
Adobe Dreamweaver
guardar. Puede cerrar cada documento haciendo clic en el aspa de la derecha, o acceder a otras
acciones haciendo clic con el botn derecho, como Cerrar otros archivos.
3. La barra de estado
La barra de estado indica en cada momento en qu etiqueta HTML se encuentra (en la imagen al
encontrarse en un documento en blanco est directamente sobre la etiqueta <body>).
Tambin es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom.
En cualquier momento puede seleccionar el zoom preferido desde el desplegable zoom y ajustar la
vista al porcentaje preferido (por defecto siempre viene al 100%).
4. 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
, copiar
, cortar
, etc.
5. La barra de herramientas de documento
La contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo,
acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin que nos
ofrece el programa.
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.
1. El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado,
permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en
Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrar su
ubicacin, dimensiones, peso, clase, etc...
CETPRO HENRY FAYOL
Adobe Dreamweaver
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los
diferentes elementos de la pgina Web que estemos diseando.
2. Panel Insertar
En el panel Insertar, encontrar todos los

elementos que puede encontrar en el men
Insertar, clasificados en categoras. Puede
emplearlo para insertar imgenes, enlaces,
multimedia, tablas, formularios... cualquier
elemento que la web necesite.
Vistas de un documento
Se puede cambiar la vista del documento a travs de la barra de herramientas del documento.
1. Vista Diseo
La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y
la que se suele utilizar habitualmente.
CETPRO HENRY FAYOL
Adobe Dreamweaver
2. 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.
3. 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
La ayuda
A travs del men Ayuda puede:
Acceder al cuadro de dilogo de ayuda muy
similar al de Windows donde puede buscar
por temas, por ndice o por contenido, si
selecciona 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.
Etc.
CAPITULO IV. Configuracin de un sitio local

A continuacin veamos qu es un sitio Web, cmo crear y gestionarlos, cmo modificar las propiedades
de los documentos.
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 una de las unidades de 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.henryfayol.net en el navegador, ste
intentara cargar la pgina http://www.henryfayol.net/index.htm, por lo que se producira un error en
el caso de que no existiera ninguna pgina con el nombre index.htm.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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 siga los siguientes pasos:
1. Men Sitio
2. Opcin Administrar sitios....
Recuerde 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 caso de haber seleccionado la opcin

Administrar sitios, aparece una ventana que
contiene la lista de sitios locales definidos con
anterioridad.
Desde luego, pueden existir varios sitios locales
en un mismo ordenador.
Tanto si se elige la opcin Nuevo..., como la
opcin Editar..., se mostrar la misma ventana en
la que podr definir las caractersticas del sitio.
Las caractersticas del sitio se agrupan en

diferentes categoras que aparecen en la parte izquierda.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en
ella.
Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y por el
momento son las nicas que cambiaremos:
Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que
empleemos por el momento:
Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de
sitios.
La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La
carpeta puede contener ya archivos o no.
Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y de
momento no nos interesan.
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.
Abrir un sitio
Para abrir un sitio ya definido siga los siguientes pasos:
1. Men Sitio
2. Opcin Administrar sitios....
3. Seleccione el sitio de la lista de sitios
4. Pulsar sobre el botn Listo.
Tambin puede utilizar el panel Archivos, buscar y seleccionar el sitio a
abrir en el men desplegable de la pestaa Archivos.
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:
CETPRO HENRY FAYOL
Adobe Dreamweaver
Las propiedades estn organizadas en categoras.
En la categora Apariencia (CSS), como ve en la imagen anterior, encontrar las propiedades:
Fuente de pgina: es el tipo de letra que le aplicaremos al texto.

Tamao: es el tamao de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo
se mostrar en el caso de no haber establecido ninguna imagen de fondo.
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.
Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos
que se repita, seleccionamos la opcin no-repeat. Si queremos que se repita o dejamos la
opcin en blanco o seleccionamos la opcin repeat. Si queremos que se repita solo en horizontal
seleccionamos la opcin repeat-x y si queremos que se repita en vertical, entonces
seleccionamos repeat-y.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde
empieza el contenido de la pgina y la ventana del navegador.
En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las

propiedades:
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
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.
Texto: es el color de la fuente.
Vnculos: es el color que mostrar el texto de los vnculos.
Vnculos visitados: es el color que mostrar el texto de los vnculos visitados.
Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el
mismo.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde
empieza el contenido de la pgina y la ventana del navegador.
En la categora Vnculos
(CSS) encontramos las
propiedades:
CETPRO HENRY FAYOL
Adobe Dreamweaver
Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo.

Tamao: es el tamao del texto de los vnculos.
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 de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del
vnculo.
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 Encabezados (CSS) encontramos la propiedad:
Fuente de encabezado: permite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que
queremos aplicar a cada tipo de encabezado.
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 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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
de la parte superior de la paleta.
Los colores pueden asignarse a travs de los botones:
.
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.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris
, lo que hace
que se despliegue la paleta de colores. El otro modo es introduciendo directamente el 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:
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 5. Texto: Propiedades y formato

En el presente capitulo aprender a cambiar las propiedades del texto y a crear estilos CSS, que
permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.
Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a travs del
inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de
propiedades, que estn clasificadas en dos categoras HTML y CSS.
1. Propiedades HTML
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador.
Pero al final, podr personalizarlas con CSS para que se vean exactamente como desea.
Formato:
Permite seleccionar un formato de prrafo ya definido para HTML,
que puede ser encabezado, prrafo o formato predeterminado. Los
encabezados se utilizan para establecer ttulos dentro de un
documento. El formato predeterminado sirve para que el texto
aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras
se introducen varios espacios solo se considera uno, pero al
establecer el formato predeterminado se respetar que hayan
varios espacios en lugar de solo uno. El texto normal, debera ir
siempre en prrafos, salvo que est en otros elementos, como
tablas o listas.
Es importante emplear correctamente los encabezados, ya que se organizar mejor el contenido
de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cmo se
muestran esos encabezados, recuerda que siempre podrs personalizarlos.
Estilo:
El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en
negrita. El botn I, lo encierra entre <em></em>, que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a
travs del men Texto. Por ejemplo, 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. Adems, emplea etiquetas que estn en desuso.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Lista:
Estos botones permiten crear listas con vietas o listas numeradas.
Sangra:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de
margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangra
a la izquierda del texto.
Si aplicamos sobre texto normal, lo encerrar en una etiqueta <blockquote></blockquote>, que
por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista,
crear una sublista dentro de sta.
2. Propiedades CSS.
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) permiten formatear la pgina y darle el
diseo que desee. Puede cambiar desde propiedades simples, como el color de fondo, hasta cosas
ms vistosas, como hacer que un bloque se muestre en una posicin determinada o que un
elemento cambie al pasar el cursor sobre l.
Tiene ms posibilidades a la hora de aplicar formatos. Dreamweaver CS5 proporciona numerosas
funciones para la creacin de estilos mediante hojas de estilos en cascada.
Regla de destino:
Las reglas CSS sirven para definir a qu elemento aplicamos el estilo,
y cmo lo hacemos.
Podemos definir una Nueva Regla, eliminarla o aplicar una clase.
Editar regla:
Mediante este botn puede acceder a las opciones para la creacin o modificacin de estilos
CSS, de la regla seleccionada.
Panel CSS:
Este botn abre el panel CSS si no lo tuviera abierto.
Fuente: Permite seleccionar un conjunto de fuentes.

Aparecen conjuntos de fuentes en lugar de una sola,
ya que es posible que al establecer una nica fuente
el usuario no la tenga en su ordenador. El seleccionar
un conjunto de fuentes posibilita que en el caso de
que el usuario no tenga una fuente se aplique otra
del conjunto. Por ejemplo, si selecciona Arial,
Helvetica, sans-serif, el texto se ver con la fuente
Arial, pero si esta no existe se ver en Helvetica.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Estilo:
Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan
un estilo css en lnea.
Alineacin:
A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro
formas distintas: izquierda, centrada, derecha y justificada.
Hemos de aplicarlo sobre el elemento que contiene el texto que desea alinear, por ejemplo
sobre un prrafo.
Tamao:
Permite cambiar el tamao del texto. El tamao lo puede indicar en diversas unidades, en
pxeles, porcentajes del tamao base, 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.
3. 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 Formato.
La lista con vietas (sin ordenar) se selecciona a travs del botn
numerada (ordenada) se selecciona a travs del botn
, mientras que la lista
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
Ejemplo de lista con vietas (sin ordenar):

o Perro
o Gato
o Aves
Canario
Loro
o Hmster
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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
A travs del men Formato, 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.
4. Caracteres especiales
A veces necesitar introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo
de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como
, , , , .. de forma rpida. Pero si desea poner dos espacios en blanco y los introduce por teclado,
Dreamweaver no los crear, deber introducirlo dos veces utilizando la opcin que veremos a
continuacin. Lo mismo ocurrir con los caracteres que no tiene en el teclado.
Haga clic en el men Insertar y seleccione la opcin HTML ver el desplegable de la imagen inferior
CETPRO HENRY FAYOL
Adobe Dreamweaver
Coloque el cursor del ratn sobre Caracteres especiales y ver una lista rpida de los caracteres ms
utilizados que no pueden ser introducidos mediante teclado.
Para introducir alguno de estos caracteres en sus textos slo seleccione en la lista y aparecer en la
vista de Diseo.
Si el carcter que busca no se encontrase all, haga clic en Otro... y se abrir una ventana desde
donde podr seleccionar caracteres entre una lista bastante ms amplia:
5. Estilos CSS. Introduccin

Los 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 permiten, definir prcticamente cualquier propiedad de los elementos que contendrn
nuestra web.
Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...),
prrafos (<p>), enlaces (<a>), etc... lo que formatear todas las apariciones de esta etiqueta en el
mbito del 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.
6. Crear un estilo personalizado
Con Dreamweaver CS5, las caractersticas que aplique a un texto a travs del Inspector de
propiedades CSS crearn automticamente estilos CSS. Aunque tendr que decidir a qu elementos
afecta.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Crear un estilo en lnea.

Por ejemplo, si desea que un determinado estilo afecte a un nico elemento y en un caso
puntual, puede crearlo como un estilo en lnea. Esto incrustar el estilo en la propia etiqueta
HTML, por lo que si alguna vez desea modificarlo, deber de ir al elemento.
En el Inspector de propiedades CSS, en Regla de destino, seleccione <Nuevo estilo en lnea>.
A continuacin, defina las propiedades del estilo.
Crear una regla de estilo

Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, slo a las que estn
contenidas en determinados elementos o una clase.
Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccione <Nueva regla
CSS>.
Ahora intente modificar sus propiedades o pulse en Editar regla. En cualquier caso aparecer la
siguiente ventana:
CETPRO HENRY FAYOL
Adobe Dreamweaver
Tipo de selector: el tipo de selector es fundamental, ya que determina a qu elementos afectar

el estilo.
Puede elegir entre cuatro tipos de selector:
Clase. Es el alias que tomar el estilo, y para

que afecte a un elemento, debemos de
aplicarle esa clase.
El nombre de la clase va precedido por un
punto, y si no lo ponemos lo har
Dreamweaver.
ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de
forma nica y concreta. Por tanto, el estilo slo puede afectar a un elemento en cada
pgina, al que tenga ese ID. En el selector, se escribe precedido por #.
Etiqueta. El estilo afectar a todas las apariciones de la etiqueta HTML indicada.
Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta nicamente
a los prrafos con la clase resaltado, pero no a los encabezados con esa clase. Tambin se
pueden anidar. Por ejemplo ul#menu li p afecta slo a los prrafos que estn dentro de un
elemento de una lista con el id menu.
Nombre del selector: esta opcin permite asignar un nombre al selector.
Depende ntimamente del tipo de selector, pues aqu introduciremos el nombre de la clase, id,
etiqueta, etc... Por defecto, indicar el elemento seleccionado, pero podemos escribir el que
queramos.
Definicin de regla: esta opcin nos permite guardar el estilo en el documento actual o en un
nuevo archivo .css.
Si elegimos (Slo este documento) la definicin del estilo se guardar en la cabecera de la

pgina, por lo que slo estar disponible dentro de sta.
Si elegimos (Nueva hoja de estilo) se crear un archivo CSS. Podremos emplear estos estilos en
cualquier pgina del sitio slo con vincular la hoja de estilos. Deberemos de indicar dnde
guardar el archivo css que contendr los estilos. Normalmente en la misma carpeta que las
pginas.
Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aqu y los estilos se aadirn
ella.
7. Definir o editar un estilo
Una vez creado, tenemos que definir las propiedades que formarn el estilo.
Para ello, encontramos las opciones bsicas en el Inspector de propiedades CSS.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos
editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van
aadiendo a la lista.
Si queremos acceder a todas las propiedades, podemos pulsar en el botn Editar regla. Se abrir la
ventana Definicin de regla.
Esta ventana es la opcin ms cmoda nada ms crear el estilo, cuando tenemos que cambiar varias
propiedades.
Para pequeos cambios que no podamos hacer desde el Inspector de propiedades y otras funciones
extras, disponemos del panel Estilos CSS. Podemos acceder a l desde el men Ventanas o pulsando
en el botn Panel CSS.
CETPRO HENRY FAYOL
Adobe Dreamweaver
En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas aplicadas, y
en la parte inferior las propiedades del estilo actual.
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 accedemos al panel Estilos, hacemos clic con el botn
derecho sobre el estilo y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de
dilogo para que introduzcamos el nuevo nombre como la imagen inferior.
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 6. Hiperenlaces
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.
Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta <a></a> que es
la que en HTML se encarga de definir los enlaces. Esto podrs observarlo en la barra de
estado:
Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.
1. Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del
archivo.
La ubicacin es en Internet, por ejemplo, http://www.tutoriales.com, o
http://www.misitio.com/pagina/pagina1.html.
2. Referencia relativa al documento: (por defecto)
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.
Si desea referirse a carpetas que estn por encima del nivel donde se encuentra deber
utilizar ../
3. Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio.
En el ejemplo anterior si tuviese definido como sitio la carpeta http://www.misitio.com/,
un
enlace
en
cualquier
pgina
del
sitio
a
http://www.misitio.com/pagina/secciones/seccion1.html
se
creara
como
/pagina/secciones/seccion1.html.
Como puede ver ahora el vnculo a un archivo en todas las pginas es igual porque se
define dependiendo del sitio raz y no de la ubicacin donde se encuentra.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente.
Para ello, indique el nombre del punto de fijacin a continuacin de la ruta del archivo (relativa
o absoluta) separados por una (#).
El formato sera nombre_de_documento.extension#nombre_de_punto.
Si el punto de fijacin est en la propia pgina, basta con indicar nicamente el punto en el
enlace, por ejemplo #apartado2
Puede definir el punto dentro de un documento a travs del men Insertar, opcin Anclaje con
nombre. O puede utilizar el atributo ID de cualquier elemento (se puede establecer desde el
Inspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos
en la pgina.
Creacin de 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, he aqu un enlace a www.inei.gob.pe, que es de referencia absoluta, por eso
contiene HTTP://
Tambin es posible crear

vnculos vacos, que pueden
ser tiles cuando se utilizan
comportamientos, etc. Para
ello es necesario escribir en
Vnculo nicamente un #.
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
CETPRO HENRY FAYOL
Adobe Dreamweaver
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo

debers escribirla empezando siempre por HTTP://. Haz clic sobre el icono de carpeta
para buscar los archivos que existan dentro del sitio. Por defecto dramweaver te
crear un enlace relativo al documento.
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 fichas : Como habr podido observar puede 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.
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.
Lo que hace esta opcin es abrir el cliente de correo predeterminado del usuario (Outlook,
Firebird...). Por lo que puede no ser prctica si el usuario no lo tiene, se conecta en un
ordenador pblico, o emplea el correo web directamente.
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITUL 7. Imgenes
En el presente captulo veremos cmo insertar imgenes en un documento. Tambin veremos
cmo crear algunas imgenes especiales, como es el caso de los Rollovers, que ayudan a
mejorar la apariencia de nuestras pginas.
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.
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 cambiamos la pgina de carpeta,
lo habitual es cambiar tambin sus imgenes.
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 papillon.jpg, se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imagenes/papillon.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:
/imagenes/papillon.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a
la carpeta raz del sitio.
Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el
documento.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Desde aqu podr establecer distintos atributos a la imagen:

Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondr directamente.
Como pasaba con el texto, podr crear un hiperenlace en la imagen escribiendo la
direccin en el campo Vnculo, y decidir en qu ventana se abre con el campo Destino.
En el campo Alt escriba el texto que remplazar a la imagen si sta no puede mostrarse.
Es un atributo muy importante que debera incluir siempre para hacer pginas
accesibles.
En Clase podr asignarle un estilo que haya creado anteriormente, as podrs darle
alineacin, bordes e incluso tamao con slo un clic.
Existen otros atributos que afectan al diseo de la imagen. Como ya hemos explicado, la
tendencia actual es utilizar CSS para todo lo relativo a diseo, por lo que estos atributos estn
cayendo en desuso y no deberan de ser empleados. No obstante, los explicaremos para que
entienda su funcin:
Puede asignarle un grosor de borde desde el campo Borde. En CSS, existe el atributo
border.
Puede seleccionar su alineacin con respecto al texto desde el campo Alinear. En CSS,
existe el atributo vertical-align.
Por ltimo las opciones Espacio V y Espacio H te sern 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. En CSS, podemos hacerlo con el
margin.
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.
Para insertar un rollover
dirjase 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Unidad 8. Tablas
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.
La finalidad de las tablas es presentar una serie de datos de forma clara y organizada,
dividindolos en filas y columnas.
Hasta hace poco, y todava hoy es fcil encontrar diseos web basados en tablas. Esto es debido
a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio.
No obstante, esta no es una prctica recomendable, ya que las tablas no fueron pensadas para
ello, y si no estn bien anidadas pueden ocasionar problemas al analizar nuestra web con
herramientas automticas, como los bots que indexan el contenido para los buscadores. Para
maquetar nuestras pginas, lo recomendado es emplear capas (div) y CSS.
Las tablas estn formadas por un conjunto de celdas, distribuidas en filas y columnas. Ejemplo:
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 de la pgina o del
elemento contenedor) 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Grosor del Borde indica el grosor del borde de la tabla en pxeles, por
defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no
mostrar borde.
Relleno de celda (cellpadding) indica la distancia entre el contenido de las
celdas y los bordes de stas.
Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la
tabla.
Tambin se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar
el contenido de filas o columnas. Aunque podra lograr el mismo diseo con celdas normales y
estilos CSS, es recomendable utilizar encabezados en el caso de que los usuarios utilicen
lectores de pantalla.
Si desea incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la tabla.
En Resumen: Puede indicar 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.
Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay
que situar el punto de insercin dentro de la celda deseada haciendo clic. El elemento se
insertara como en las anteriores veces.
Si desea insertar elementos ya existentes en las celdas, tiene que crear primero la tabla vaca, y
despus seleccionar y arrastrar los elementos a insertar sobre la celda. No puede seleccionar el
texto, y crear la tabla "alrededor", como se haca, por ejemplo, con las listas.
Realice la siguiente tabla:
CETPRO HENRY FAYOL
Adobe Dreamweaver
Seleccionar elementos de una tabla

Existen varias formas de
seleccionar una tabla. Una de
ellas es a travs del men
Modificar estando el punto de
insercin 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 pulsando

con el ratn sobre el borde exterior que la
rodea, o pulsando <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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Formato de tabla
Las propiedades de la tabla se especifican a travs de su inspector de propiedades. En este
caso, se crearn atributos para la tabla. Pero algunos de estos valores, como el ancho, los
podemos especificar mediante CSS.
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 de la pantalla), el borde de
la (en Col. borde) o los valores de relleno y espaciado de la celda.
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 nos permite alternar entre las propiedades
HTML, que en este caso sirven para especificar las propiedades del texto que se insertar
dentro de la celda (o celdas) seleccionada, y las propiedades CSS para definir los estilos.
La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o
imagen de fondo (que es preferible definir con CSS), la alineacin del contenido en horizontal
(Horz.) y vertical (Vert.), especificar su tamao (An. y Al.) (en Fnd). Si no queremos que el
tamao se ajuste al contenido, marcamos la opcin No aj. y si queremos convertirla en un
encabezado, basta con marcar la opcin Enc..
Cambiar tamao de tabla y celdas

Como ya sabemos, 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
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 se tiene 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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, normalmente ms ancho.
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 rectngulo. No podemos combinarlas para formar una "L". 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.
Podemos combinar celdas en vertical y horizontal:
Para dividir una celda hay que pulsar sobre el botn

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.
del inspector de propiedades, o sobre la
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 9. Marcos
Introduccin
Los marcos o frames sirven para
distribuir mejor los datos de las
pginas, ya que permiten mantener
fijas algunas partes, tales como el
logotipo y la barra de navegacin.
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 se puede 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, ha 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.
Crear marcos
Existen varias formas de crear un marco. Veremos
a continuacin una de ellas:
Para crear un marco siga los siguientes pasos:
1. Abra algn documento. Nuevo o uno ya
existente.
2. Men Insertar / HTML / Marcos.
A travs de esta opcin puede elegirse el tipo de
marco que desee crear.
Veamos el marco a la Izquierda.
Si pulsa sobre Izquierda se crear un nuevo marco
a la izquierda del documento actual.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Como puede ver en la imagen, aparece una lnea que

divide el documento en dos. El documento de partida era
uno nuevo.
En este caso tendr 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 se tena 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.
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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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
, ya que podemos
equivocarnos al dar los nombres a los nuevos documentos.
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 izquierdo-derecho y superior-inferior.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
_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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 10. Formularios

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.
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 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).
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
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.
Seleccionar ( Lista/Men )
Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.
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.
Los elementos se aaden a travs del botn Valores de lista... del Inspector de propiedades.
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. Adems, al estar asociadas al control nos
permite activarlo al pulsar sobre el texto. Esto es muy prctico en casillas de verificacin y botones
de opcin.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Crear formularios
Puede 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 sabe puede
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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 11. Multimedia

Veamos cmo insertar elementos multimedia. En concreto 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
SWF, o pulsando Ctrl+Alt+F.
Tambin pueden insertarse empleando el panel Insertar
en la categora Comn, pulsando sobre la opcin
SWF que aparece al desplegar el men Media.
Veamos las opciones ms importantes que nos ofrece el inspector de propiedades cuando
tenemos seleccionado el archivo Flash:
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 hasta
CETPRO HENRY FAYOL
Adobe Dreamweaver
que el usuario la activase. Por tanto interesa desmarcar esta opcin cuando se desea que la
reproduccin sea activada por algn comportamiento.
La Calidad, cuanto ms baja, antes se cargar el archivo pero peor se ver. Conviene dejarla
en Alta para verlo tal cul se cre.
La Escala permite elegir cuanto se ver del archivo. Las pelculas Flash no siempre son del
tamao exacto del contenido, pueden tener un escenario de fondo alrededor del objeto,
aunque no se muestre. Si dejamos Predeterminada, se ver todo la pelcula. En cambio, si
elegimos Ajuste exacto, se vern slo los objetos, omitiendo el escenario de fondo.
Alinear funciona como con las imgenes, y nos permite alinear la pelcula en relacin con el
texto. Si queremos centrarla horizontalmente, podemos optar por centrar el contenido del
elemento que contiene el Flash (normalmente un prrafo) empleando CSS.
Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el
Flash. En cambio, si es Transparente, el
fondo se ver transparente (a no ser que
se haya especificado un color de fondo en
el Flash).
El botn Reproducir nos permite ver la
pelcula.
Al insertarse la pelcula, veremos la ubicacin
en la vista de diseo con el siguiente aspecto:
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. 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 tiene que dirigirte al men Insertar, Meda,
opcin Plug-in.
A la derecha tiene un ejemplo de un archivo de
sonido, para el que se muestran los controles de
audio. Si lo desea, puede 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
Si quiere 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).
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 tiene que dirigirte al men
Insertar, Meda, opcin Plug-in.
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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
CAPITULO 12. Otros elementos

A continuacin vamos a ver una serie de elementos que suelen aparecer en las pginas web,
tales como: 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.
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 HenryFayol
<img src="imagenes/logo_hf.gif">
</marquee>
CETPRO HENRY FAYOL
Adobe Dreamweaver
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
Para insertar una regla hay que dirigirse al men Insertar, opcin HTML, luego la opcin Regla
horizontal.
Si queremos insertarla desde el cdigo, podemos hacerlo con la etiqueta <hr />.
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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
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.
Podemos cambiar su color mediante CSS, con la propiedad color (como el color del texto).
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 luego 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.
CETPRO HENRY FAYOL
Adobe Dreamweaver
CAPITULO 13. Capas

A continuacin veamos algunas de las caractersticas bsicas sobre capas, para luego poder
trabajar con ellas y aplicarles algn comportamiento.
Introduccin
Las capas no son ms que unos recuadros, elementos de bloque, destinados a contener y
agrupar otros elementos, igual que los prrafos son elementos de bloque destinados a
contener texto.
Las capas, tambin llamadas layers o divisiones, se crean con la etiqueta <div></div>.
Al ser elementos contenedores, son muy tiles para organizar nuestros elementos. Si esto lo
combinamos con el posicionamiento absoluto, una propiedad CSS que nos permite colocar los
elementos donde queramos en nuestra pgina, obtenemos los elementos ideales para
maquetar nuestra pgina, es decir, distribuir el contenido en bloques.
En la imagen de arriba vemos varias capas azules distribuidas

sobre una capa gris. Si agranda la ventana del navegador,
ver que pueden llegar a solaparse.
Cuando convertimos una capa en un elemento con posicin
absoluta (elemento PA), se muestra as en Dreamweaver:
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
la capa.
sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin
CETPRO HENRY FAYOL
Adobe Dreamweaver
Insertar una capa

Las capas pueden insertarse en una
pgina a travs del men Insertar,
opcin Objeto de diseo, donde
encontrar Etiqueta Div (divisin
simple) y Div PA (Capa con Posicin
Absoluta).
Una vez se ha insertado la capa,
pueden editarse sus atributos, pero
para ello primero debe seleccionarla.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono
correspondiente, pero esto no 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 Elementos PA del panel CSS, que puede
abrirse a travs del men Ventana opcin Elementos
PA. Tambin puede 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 del inspector de propiedades.
Elemento CSS-P. Es el nombre o ID de la capa. Desde aqu puede asignarle otro ID, pero si lo
hace perder las propiedades que haya indicado para este elemento. Si lo que desea es cambiar
el ID por otro ms descriptivo, puede hacer clic derecho sobre el borde de la capa y elegir ID...
en el men contextual. Tambin puede ser cambiado a travs del panel Elementos PA,
haciendo doble clic sobre l.
CETPRO HENRY FAYOL
Adobe Dreamweaver
El resto de campos se refieren a las propiedades CSS que definen la posicin y tamao de la
capa.
Izq y Sup indican la distancia en pxeles (tambin podemos introducir un valor en porcentaje)
que hay entre los lmites izquierdo y superior del documento y los lados superior e izquierdo de
la capa respectivamente.
Por defecto se toman los lados del documento, a no ser que creemos una Capa PA dentro de
otra capa posicionada. En este caso, la distancia se referir a los lados de la capa padre,
independientemente de su posicin en el documento.
Si desea que la posicin se tome con respecto al elemento padre, pero este no tiene
posicionamiento absoluto, podr darle un posicionamiento relativo empleando CSS (En las
propiedades de Posicin del editor CSS, estableciendo position como relative). Esto no afectar
a la posicin del elemento padre si no cambia las propiedades left, top, right o bottom.
An y Al indican la anchura y la altura.
ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse
a travs del panel Elementos PA. 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 Elementos PA, 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). Hasta ahora, los elementos que veamos se ajustaban a su contenido.
En el caso de las Capas PA podemos indicar un ancho y alto, por lo que puede que el contenido
no quepa dentro de la capa. Con esta propiedad controlamos cmo aparecen las capas en un
navegador cuando el contenido excede el tamao especificado de la capa.
Visible indica que el contenido adicional se muestra, excediendo los lmites de la capa.
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).
CETPRO HENRY FAYOL
Adobe Dreamweaver

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.
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.
El panel Comportamientos se puede abrir a
travs
del
men
Ventana,
opcin
Comportamientos.
Tambin
pulsando
SHIFT+F4.
En este panel se debe desplegar el botn
pulsando sobre l, y en Mostrar eventos elegir
HTML 4.1. Es la opcin por defecto. Esta opcin se debe a que en el pasado, los
comportamientos solan ser diferentes dependiendo del navegador.
En la actualidad, los navegadores tienden a seguir el estndar, lo que hace que ya no tengamos
problemas de compatibilidad. Slo habremos de cambiarlo si hacemos pginas especficas para
navegadores ms viejos, ya en desuso.
Insertar un comportamiento
Lo primero que hay que hacer es asignar un ID al que afectar el comportamiento. Esto lo
puede hacer desde el inspector de propiedades.
Despus seleccione el objeto que activa el comportamiento, como puede ser una imagen, un
fragmento de texto, etc.
El elemento al que afecta y el que activa el comportamiento puede ser el mismo o no.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Al desplegar el botn
del panel Comportamientos
aparece la lista de todas las acciones posibles.
Segn el elemento sobre el que se desee aplicar el
comportamiento, se podrn elegir unas acciones,
mientras que otras no.
Despus de elegir alguna accin, el comportamiento

correspondiente
aparece
en
el
panel
Comportamientos. En este caso se han insertado dos
comportamientos.
Como puede 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
.
Mostrar-Ocultar elementos
Uno de los comportamientos ms habitual e interesante es el de Mostrar-Ocultar elementos. Lo
ms comn es emplearlo con capas, que han de haber sido creadas antes, pero puede hacerlo
con cualquier elemento que tenga un ID asignado. Lo que hace este comportamiento es
alternar entre las propiedades de visibilidad visible y hidden.
Despus de seleccionar el elemento que
producir el evento, hay que seleccionar una
accin de la lista, pulsando sobre el botn
.
En este caso la accin tiene que ser la de
Mostrar-Ocultar elementos.
CETPRO HENRY FAYOL
Adobe Dreamweaver
Tras elegir la accin, se

mostrar un cuadro de
dilogo en el que
aparecen listados todos
los elementos de la
pgina que podemos
ocultar o mostrar:
Hay que especificar qu elementos 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
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.
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 MostrarOcultar elementos. 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).
CETPRO HENRY FAYOL
Adobe Dreamweaver

Mens Emergentes
Esta es una de las herramientas ms tiles en cuanto al uso de JavaScript en Dreamweaver.

Como puede ver en la parte superior izquierda de este apartado hemos creado tres mens
emergentes de una forma sencilla y con una apariencia fenomenal, cada uno de los mens lo
hemos asociado a una imagen.
Lo nico que debers tener en cuenta es que estos mens slo se pueden asociar a enlaces o a
imgenes.
Si no quiere utilizar imgenes, simplemente coje el texto (colcalo en la parte superior de la
pgina) y dale como vnculo #, se convertir en un enlace vaco. El enlace no har nada pero
estar listo para que le asignes el men.
Para crear uno de estos mens selecciona la imagen o el enlace que hayas creado para tal
efecto y selecciona Mostrar men emergente en el panel Comportamientos haciendo clic en el
botn .
Se abrir el siguiente cuadro de dilogo:
CETPRO HENRY FAYOL
Adobe Dreamweaver
Rellenar este men es igual de fcil que el anterior. Solo introduce el Texto del enlace, la ruta
del Vnculo y su Destino, es decir, dnde se abrir.
Cuando lo tengas haz clic en el botn .
Hazlo tantas veces como sea necesario y luego reordnalos utilizando las flechas
moverlos de arriba a abajo y viceversa.
para
Con los botones

podr crear los diferentes niveles dentro del men, con el primer
colocas el elemento seleccionado al mismo nivel que el anterior, con el segundo botn
colocars el elemento seleccionado dentro del anterior.
Luego puedes visitar el resto de las pestaas para mejorar su aspecto del men.

Macromedia Dreamweaver

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Macromedia Dreamweaver

Cargado por

Copyright:

Formatos disponibles

INSTITUTO PERUANO EJECUTIVO

MACROMEDIA DREAMWEAVER CS5

CETPRO HENRY FAYOL

CAPITULO 2. Conceptos bsicos de Dreamweaver CS5

CAPITULO 4. Configuracin de un sitio local

CETPRO HENRY FAYOL

Caractersticas del texto

CETPRO HENRY FAYOL

CAPITULO 11. Multimedia

CETPRO HENRY FAYOL

CAPITULO 1. Recomendaciones para la Redaccin y Diseo de las

Realizando pginas de ndice lo ms claras posible.

2. La lentitud de las redes de comunicaciones

CETPRO HENRY FAYOL

3. La existencia de diferentes programas y versiones de los programas navegadores

CETPRO HENRY FAYOL

Poner claramente el ttulo del documento

8. Los contenidos y el tipo de usuarios a quienes estn dirigidos

Pginas redactadas para personal o estudiantes de una universidad y que se pensaba

CETPRO HENRY FAYOL

Pginas orientadas a usuarios con mayores conocimientos de Internet: se puede

RECOMENDACIONES SOBRE DISTINTOS ELEMENTOS DE LAS PGINAS WEB

Caracteres especiales como , , ", etc.

CETPRO HENRY FAYOL

No se podrn hacer bookmarks o marcadores a las partes.

Algunas recomendaciones para pginas con frames:

Eludir la fragmentacin excesiva. Si se van a utilizar ms de dos frames, hay que

CETPRO HENRY FAYOL

Una sola palabra es difcil de pinchar y puede no tener sentido.

CETPRO HENRY FAYOL

6. Ficheros en formatos distintos a html

CETPRO HENRY FAYOL

Los formatos de imgenes ms extendidos son: GIF y JPG (o JPEG):

El formato JPG permite calidades de ms de 256 colores, de hecho permite hasta 16

Las imgenes animadas deben utilizarse con mucho cuidado:

Ocupan bastante ms espacio que las imgenes normales.

CETPRO HENRY FAYOL

9. La URL de las pginas: asignacin de "alias"

Que sea consultada solo desde ordenadores de la Universidad

CETPRO HENRY FAYOL

CAPITULO 2. Conceptos bsicos de Dreamweaver

Editar pginas web

Cmo tener una pgina en Internet

CETPRO HENRY FAYOL

Iniciar y Cerrar Dreamweaver

METODO I. Desde el botn inicio

Doble clic sobre el cono

que se encuentra en el escritorio de Windows

Para cerrar Dreamweaver CS5:

Clic en el botn cerrar

Abrir y guardar documentos

Clic en el botn abrir

Clic en el botn abrir

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

Clic en el botn guardar

de la barra de herramientas estndar.

CETPRO HENRY FAYOL

Pulse la combinacin de teclas Ctrl+S.

Clic en el botn guardar todo

CETPRO HENRY FAYOL

CAPITULO 3. Entorno de trabajo

CETPRO HENRY FAYOL

4. La barra de herramientas estndar

5. La barra de herramientas de documento