Unidad 1.

Conceptos bsicos de Dreamweaver CS5 (I)

1.1. Qu es Dreamweaver CS5
Dreamweaver CS5 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 y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas
trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin
salir del programa.
Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde
la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te dar tiempo
a entenderlo y decidir si quieres adquirir la versin completa de este fantstico programa.
Nota: Esta versin estar disponible hasta que Adobe lance la nueva versin del
programa.
Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas
registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relacin con Adobe.
Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de
HTML puedes verlas aqu.

1.2. Novedades de Dreamweaver CS5

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la
anterior.

Compatibilidad con CMS integrada. Un sistema de gestin de contenidos (en

ingls Content Management System, abreviado CMS) es in interfaz o programa que nos
permite gestionar el contenido de un sitio web. Cada vez son ms usados, y ahora
Dreamweaver integra con los principales, permitindos crear nuestras pginas con la
estructura adecuada.

Inspeccionar CSS. Ahora, con la opcin Inspeccionar, podemos ver claramente los
mrgenes aplicados al elemento seleccionado, y qu propiedades le afectan, tanto si son
propias, como heredadas de los elementos padre.

Integracin Adobe Browserlab. Adobe Browser Lab es un servicio en lnea de

Adobe, que nos permite comparar cmo se ve una misma pgina web en las distintas
versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o
Mac OS.

Este servicio es fcilmente accesible desde Dreamweaver, pero realmente cualquiera

puede usarlo desde su pgina web.

Configuracin sencilla de sitios. Ahora resulta ms sencillo configurar nuestro sitio

local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido ms las
opciones avanzadas y poco importantes.

Sugerencias de cdigo. Ahora las sugerencias de cdigo incluyen nuestras clases

personalizadas, y los comandos y funciones propios de los distintos CMS soportados.

Unidad 1. Conceptos bsicos de Dreamweaver CS5 (II)

1.3. Editar pginas web

Cualquier editor
de texto permite crear pginas web. Para ello slo es necesario crear los
documentos con la extensinHTML o HTM, e incluir como contenido del

documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de

notas incluido en Windows para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo
utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms
insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms
complicado crear una apariencia profesional para la pgina, sobre todo si no
estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que
escribir el cdigo nos da ms control sobre l, y sobre todo al principio, nos
ayudar a aprenderlo rpidamente.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms
utilizados, y que destaca por su sencillez y por las numerosas funciones que
incluye, es Adobe Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web,
como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o
Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

1.4. Cmo tener una pgina en Internet

Para poder poner una pgina web en Internet, es necesario contratar a alguna
empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24
horas del da. El precio por disponer de espacio propio en el servidor depender de
la empresa, del espacio en disco, volumen de transferencia y otras opciones que
podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas
limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina precedido
por el de la suya. Hay que tener tambin en cuenta que estas empresas deben
generar ingresos de alguna forma, por lo que se dedican a vender espacios
publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a
incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de
una empresa, aunque s es aceptable para una pgina personal, sobre todo al
comienzo.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin
un dominio, tarea de la que se suele encargar la propia empresa de hospedaje.
Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este

nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con
los nombres de las empresas. Es posible registrar un mismo nombre con distintas
terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio,
ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa
contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta
el nmero de cuentas de correo electrnico propias que pueden habilitarse y si
disponemos de una base de datos para poder acceder a ella a travs de
programacin va Web, aunque esto ltimo ser til slo para usuarios avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.
En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es
muy sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web
que luego querrs que se encuentre a disposicin de todo el mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que
subirla a tu servidor manteniendo la estructura del local. Es decir, debers subir
todos los archivos tal y como aparecen en tu disco duro, respetando el nombre
de los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu
sitio experimentar fallos y enlaces que no funcionarn.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o
ees, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma
te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los
nombres de los archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta
escribir, tambin, los nombres en minscula. Algunos servidores (los que
utilizan linux) distinguen entre maysculas y minsculas, por lo que si en tu pgina
quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre y no
como Foto1.jpg. Evitars horas perdidas buscando fallos.
Pg. 1.2

1.5. Arrancar y cerrar Dreamweaver CS5

Veamos las dos formas bsicas de arrancar Dreamweaver CS5.

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. Puedes comenzar a escribir el nombre del programa, y
aparecer directamente. O puedes pulsar en Todos los programas y buscarlo en la
lista
con
los
programas
que
hay
instalados
en
tu
ordenador.
Buscar Adobe Dreamweaver CS5 y haz clic sobre l para arrancar el programa.

Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes

Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos.
Cuando realices los ejercicios tambin puedes compaginar dos sesiones de la forma que
puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aqu.
Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes
operaciones:

Hacer clic en el botn cerrar

cualquier ventana de Windows.

Pulsar la combinacin de teclas Alt + F4.

Hacer clic sobre el men Archivo y elegir la opcin Salir.

, en la esquina superior derecha, como en

Si existe algn documento modificado que no ha sido guardado antes de cerrar

Dreamweaver, se te pedir confirmacin para guardar o no cada uno de ellos.

1.6. Abrir y guardar documentos

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

Hacer clic en el botn abrir

visible).

Pulsar la combinacin de teclas Ctrl + O.

Hacer clic sobre el men Archivo y elegir la opcin Abrir....

de la barra de herramientas estndar (si est

Hacer doble clic sobre el archivo en la ventana del sitio.

Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la

opcin Abrir con Adobe Dreamweaver CS5.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes

operaciones.:

Hacer clic en el botn nuevo

visible).

Pulsar la combinacin de teclas Ctrl + N.

Hacer clic sobre el men Archivo y elegir la opcin Nuevo.

de la barra de herramientas estndar (si est

Despus de esto aparecer una nueva ventana, en la que debers elegir

la Categora Pgina en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya
creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseo ninguno. A
continuacin pulsamos el botn Crear.

Para guardar un

documento,

puedes

utilizar

cualquiera

de

las

siguientes

operaciones.

Hacer clic en el botn Guardar

Pulsar la combinacin de teclas Ctrl + S.

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

de la barra de herramientas estndar.

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. Paraguardar todo puedes realizar cualquiera de las siguientes operaciones.

Hacer clic en el botn Guardar todo

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

de la Barra de herramientas estndar.

Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones

hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar
todo, ya que en ocasiones es posible no desear guardar los cambios en todos los
documentos modificados. Por ello es conveniente que al principio no utilices esta opcin,
al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa
que

cuando

hay

cambios

sin

guardar

aparece

un

documento

tras

el

nombre

del

1.7. Mi primera pgina

Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear
una pgina web sencilla, con varios estilos de texto, una imagen y un enlace a otra
pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con
los elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca
has hecho una pgina web, este es el momento para descubrir lo fcil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina
anterior

como

puede

hacerse.

Abre

un

documento

nuevo

selecciona

la Categora Pgina bsica, HTML, en la columna Diseo dejamos la opcin por

defecto: <ninguno>.
Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:

Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del
documento.
Para ello podemos hacer clic sobre el men Modificar y elegir la opcin Propiedades
de la pgina.
Entonces se abrir una ventana como la que aparece a continuacin:

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a
ser de color azul.
Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera
pgina.
Para aplicar los cambios, pulsa sobre el botn Aceptar.
Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la
carpeta donde estamos creando nuestras pginas, habitualmente en una subcarpeta
dedicada a las imgenes.
Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al
hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet,
se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del
navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco
duro. Ten en cuenta que si piensas publicar la pgina en Internet, hay que respetar los
derechos de autor de la imagen.
Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina
web que estamos creando. Gurdala en la carpeta donde vas a guardar la pgina que
acabas de crear.

Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar,
situamos el cursor al final de la segunda lnea y creamos un salto de lnea (tecla Enter).
Despus nos dirigimos al men Insertar, opcin Imagen.

En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la

habas guardado, seleccionarla y pulsar Aceptar.
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el
inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana,
y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a travs del men Ventana, opcin Propiedades.

Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est
contrado. Para que te aparezca desplegado debes hacer doble clic en Propiedades.

Selecciona la primera lnea de texto. En el inspector de propiedades pulsa HTML y

aplica

el

formato Encabezado

1 (h1)

seleccionando

el

valor Encabezado1 del

cuadro Formato.

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el
icono CSS a la izquierda.
Mediante el inspector de propiedades en Dreamweaver CS5 accedemos tanto a las
propiedades de CSS como a las propiedades de HTML.

Podemos decir que en una pgina web, HTML se encarga de estructurar el contenido,
la informacin, mientras que CSS se encarga de mostrar ese contenido con el formato
adecuado.
Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto
mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre
el diseo de la pgina Web y reducen el tamao del archivo.
Selecciona la primera lnea. En Regla de destino selecciona <Nuevo estilo en lnea>,
para aplicar el formato solo al texto seleccionado. Tambin aplica el estilo
de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como
muestra la imagen siguiente:

Observa que hemos centrado el texto pulsando en el botn

Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo estilo en

lnea>, marca los botones

para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es
el contenido del prrafo que la contiene. Para hacerlo, en la barra de estado, encima de
las

propiedades

nos

aparece

la

jerarqua

de

etiquetas.

Haz

clic

sobre p.
Ahora, en Regla de destino selecciona <Nuevo estilo en lnea> y centra el prrafo
como hemos visto hasta ahora, pulsando en

Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el
panel de Propiedades a las propiedades de HTML.
En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:

Por ltimo guarda el documento.

Ya sabes que puedes hacerlo a travs del men Archivo, desde la opcin Guardar.
Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html.
Por ejemplo, lo hemos llamadomiprimerapagina.htm, y la hemos guardado en la misma
carpeta que la imagen descargada.
Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.

Unidad 2. El entorno de Dreamweaver CS5 (I)

Vamos a ver cules son los elementos bsicos de Dreamweaver CS5, la pantalla, las
barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos

cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda,
por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo
esto estaremos en disposicin de empezar a crear pginas web.

2.1. La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus
componentes fundamentales. As conoceremos los nombres de los diferentes elementos y
ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en
general todas las de este curso) puede no coincidir exactamente con la que ves en tu
ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada
momento y dnde, como veremos ms adelante.

.2. Las barras

La barra de la aplicacin.

La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. Si tenemos

la ventana maximizada veremos todos los elementos de la barra ocupando una sola lnea,
si no, ocuparn dos lneas, como en la imagen superior.
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.

Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de
derecha a izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones
que se pueden aadir, o al administrador de sitios, que ya veremos.

Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un

desplegable. Un espacio de trabajo es la configuracin del entorno (paneles visibles y su
disposicin) que podemos guardar y cargar. Lo veremos ms adelante.
Los mens, estn agrupados en categoras.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los
diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de
Dreamweaver son accesibles a travs de los mens, aunque en ocasiones nos enven a
los paneles.
Las pestaas de documento.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos
permitir cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que
ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el
aspa de la derecha, o acceder a otras acciones haciendo clic con el botn derecho,
como Cerrar otros archivos.

Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la
hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos
ahorrar bastante tiempo.
La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da informacin

sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar
etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de
Seleccin, Mano (para desplazarse) y Zoom. Y otros datos como el tamao de la ventana,
el tamao de la pgina o su codificacin.

Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que
podemos ver u ocultar desde el men Ver Barras de herramientas.

La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms

habituales del men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir,
explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar,
Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy til, pero en realidad casi
todo el mundo usa esos comandos directamente con el teclado ( Ctrl + G para
guardar, Ctrl + C para copiar, etc.)
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.
La barra de representacin de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos
dispositivos, si estamos utilizando hojas distintas que dependan del eso. En esta nueva
versin se han aadido ms opciones, como las de ver los estilos que dependen de
pseudo clases activas, como cuando el cursor est sobre un elemento.
La barra de navegacin con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las
pginas de nuestro sitio, aunque slo tiene sentido con la Vista en vivo, como ya
veremos.

Como tambin veremos al personalizar el entorno, algunos paneles, como Insertar nos
permiten colocarlo como otra barra de herramientas.

2.3. Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se

conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en
general, la apariencia y opciones de un inspector cambian dependiendo del objeto
seleccionado, mientras que el panel nos da acceso a opciones generales.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada
uno de los paneles o inspectores. Vamos a ver los ms importantes.
El inspector de Propiedades

El inspector de Propiedades muestra 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...
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.
El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el

men Insertar, clasificados en categoras. Podemos emplearlo para insertar imgenes,
enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imgenes, es posible configurar este panel para verlo como men,
como panel flotante o como una barra de herramientas integrada en la ventana de trabajo.
Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te
recomendamos este avanzado

2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar travs de
la barra de documento:

La vista Diseo
La vista Diseo permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de
programacin, de cdigo fuente. No permite tener directamente una referencia visual de
cmo va quedando el documento segn se va modificando el cdigo.

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista

Diseo.
La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona
izquierda muestra el cdigo fuente, y la derecha el editor visual. Cuando se realiza un
cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

La Vista en vivo
La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del
resultado final no editable. A diferencia de la vista Diseo, que nos permite editar los
elementos, esta vista nos permite interactuar con ellos, tal como lo haramos con el
navegador.
La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que
pequeos cambios se previsualizan correctamente en el navegador.
No obstante, siempre hay que comprobar la pgina con los principales navegadores del
mercado, que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso
vers cmo algunos elementos se ven de forma muy distinta si los vemos en la vista de
diseo, en la vista en vivo o en el navegador.

La vista Cdigo en vivo

Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la
vista Dividir, pero sin que podamos editar el cdigo. Lo que hace es que al seleccionar
partes de la web en la Vista en vivo, se seleccione su correspondiente cdigo fuente.

2.5. La ayuda

A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes

buscar por temas, por ndice o por contenido, si seleccionas la opcin Ayuda de
Dreamweaver o simplemente pulsando F1.

Acceder a una Introduccin a InContext Editing de la pgina de Adobe, que muestra

un resumen de esta herramienta.

Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las

etiquetas HTML.

Acceder a Dreamweaver Support Center en la web.

Acceder al Foros en lnea de Adobe.

Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los

trminos de la bsqueda y buscar, iremos a la ayuda online de Adobe.

Unidad 3. Configurar un sitio local (I)

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo
modificar las propiedades de los documentos, como puede ser el color de fondo.

3.1. Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un
diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de
crear las pginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para
contener las imgenes, las animaciones, archivos de tipos especfico, 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.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es
la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio
remoto.
La 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.
La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya
que cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con
ese nombre.
Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.es en el
navegador, ste intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo
que se producira un error en el caso de que no existiera ninguna pgina con el
nombre index.htm, y no se podra navegar por el sitio a no ser que se escribiese
exactamente http://www.aulaclic.es/nombrepagina.htm

3.2. Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos
la carpeta raz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o
directamente a Nuevo sitio.
Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios
definidos.
Tambin podemos acceder desde el icono de acceso rpido de la barra de la
aplicacin a la opcin Administrar sitios oNuevo sitio...

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana

que contiene la lista de sitios locales definidos
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Unidad 3. Configurar un sitio local (II)

Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la
misma ventana en la que definir o modificar las caractersticas del sitio.

Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte
izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la
lista haciendo clic en ella.
Las dos nicas opciones imprescindibles son las que encontramos en la
categora Sitio, y de 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 de 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.

3.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar
sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo.

Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el

men desplegable Archivos.
Para practicar realiza el Ejercicio paso a paso Crear un sitio web local. En este
ejercicio, configuraremos un sitio que iremos completando ms adelante.

3.4. Ver el sitio

El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms
importantes de Dreamweaver, ya que nos da acceso a los archivos del sitio.

En

este

caso

vemos

todos

los

documentos

creados

en

nuestro

sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y

las

carpetas imagenes y varios.

Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de
una vista a otra hay que pulsar sobre el botn

que aparece en la parte superior del

panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el
del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. Tambin el
servidor de pruebas o las bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la
derecha) con nuestros archivos.

Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se

relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde
Dreamweaver,automticamente

actualizar

todas

las

referencias

ese

archivo (enlaces desde otras pginas, origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no
se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc, ya
que Dreamweaver simplemente no encontrar la pgina.
Al modificar algn objeto que es referenciado por algn otro documento, se muestra
una ventana similar a sta, que indica los documentos que hacen referencia a dicho
objeto, y que pueden ser actualizados para que no se produzcan los problemas antes
mencionados.

Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si
tenemos configurada la opcin Mensaje al actualizar vnculos si movemos archivos. Lo

cual

podemos

establecer

desde

el men Edicin,

opcin Preferencias,

categora General.

3.5. Subir archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas)
debers subir los archivos al sitio que hayas contratado o conseguido gratuitamente.

Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que
debers ir subiendo uno a uno cada archivo y creando las carpetas t mismo. Este
proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la
estructura tal y como se encuentra en tu carpeta del disco duro. Si no los enlaces no
funcionarn correctamente, y es posible que algunas imgenes no se muestren.
Para subir los archivos va web debers seguir las instrucciones que te proporcionar tu
servidor.

La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en

algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.
Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en
el Explorador de Windows) y, obviamente, nos es mucho ms til para subir los archivos.
Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web
podrs descargarte el programa y su traduccin tu idioma.
Una vez instalado, abre el programa y haz clic en Archivo Gestor de sitios y luego
en Nuevo sitio para configurar un nuevo sitio FTP.

Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus
pginas: Servidor, Usuario y Contrasea.
Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs
ver una carpeta donde podrs copiar los archivos que hayas creado.
La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la
marcada como Sitio local, nos permite explorar la estructura de archivos y carpetas de
nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el
servidor FTP.

Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos,
o del remoto al local, para descargarlos al equipo.
Vers como el programa empieza a copiar la informacin de tu disco a Internet.
Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra
de direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar

con el servidor. Busca la carpeta public_html y sube tus archivos all.

3.6. Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un
mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.

Puede definirse el formato de cada una de las pginas a travs del cuadro de
dilogo Propiedades de la pgina.
Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinacin de teclas Ctrl + J.

Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.

Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al
final del men contextual la opcin Propiedades de la pgina.

Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras.

En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos 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:

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.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia
es que CSS aplica nuestra configuracin utilizando reglas de estilo, mientras que HTML lo
hace con atributos HTML. Estos ltimos estn cayendo en desuso, ya que se tiende a
limitar el HTML al contenido, y no al diseo. Por eso, te desaconsejamos su uso.

Unidad 3. Configurar un sitio local (VI)

En la categora Vnculos (CSS) encontramos las propiedades:

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.

Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el
navegador. Para ver cmo comprobar el tamao de los documentos, pulsa aqu

Unidad 3. Configurar un sitio local (VII)

3.7. Los colores

Para asignar colores es posible desplegar una paleta de colores como sta. Al
seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la
parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para
web. stos son los colores que se muestran de la misma forma en cualquier navegador
bajo cualquier sistema operativo.
Esto no quiere decir que slo podamos utilizar estos colores. Podemos personalizarlos
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 vimos en este tema.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro
gris

, lo que hace que se despliegue la paleta de colores. El otro modo es

introduciendo directamente el 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 #39F, el botn quedara del siguiente modo:

En la web, los colores se representan por la cantidad que contienen de los colores
primarios aditivos (Rojo, Verde y Azul).
Para indicar la cantidad de cada uno, se utilizan nmeros hexadecimales, que van del 0
a la F (A=10, B=11, ..., F=16).

El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su
intensidad total.
Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del cdigo.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al
rojo, el segundo al azul y el ltimo al verde.
En Dreamweaver observars muchas veces que se emplean slo tres valores. En este
caso, se interpreta que los valores de los pares estn repetidos. Es decir, los colores
#FF22AA y #F2A son el mismo.

Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y
modificar sus propiedades.

Unidad 4. El texto: propiedades y formato (I)

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a
crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros
mismos, no predefinidos.

4.1. 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.
Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en
el navegador. Pero al final, podremos personalizarlas con CSS para que se vean
exactamente como queramos.

Formato:

Permite seleccionar un formato de 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
podremos personalizarlo.

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

Lista:

Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu
son las listas en el siguiente apartado.

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
lo
aplicamos
sobre
texto
normal,
lo
encerrar
en
una
etiqueta <blockquote></blockquote>, que por defecto se muestra indentada
hacia la derecha. En cambio, al aplicarlo sobre una lista, crear una sublista dentro
de sta.
Accediendo a las propiedades CSS.

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear
nuestra pgina y darle el diseo que queramos. Podemos 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. Profundizaremos en esto ms adelante, por ser una parte fundamental en la creacin
de pginas web.
Tenemos ms posibilidades a la hora de aplicar formatos. Dreamweaver CS5 nos
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. Veremos esto
antes de acabar el tema.

Editar regla:

Mediante este botn accedemos 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 tuviramos abierto.

Fuente: Permite seleccionar un

conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es

posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El

seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no
tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial,
Helvetica, sans-serif, el texto se ver con la fuente Arial, pero si esta no existe se
ver en Helvetica.

Estilo:

Estos botones ponen el texto en negrita y cursiva respectivamente. 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 queremos alinear,
por ejemplo sobre un prrafo.

Tamao:

Permite cambiar el tamao del texto. El tamao lo podemos 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.
Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus

propiedades.

4.2. 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 delinspector de propiedades, o a travs del men Formato.
La lista con vietas (sin ordenar) se selecciona a travs del botn
lista numerada (ordenada) se selecciona a travs del botn
Ejemplo de lista numerada (ordenada):

, mientras que la

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

Gato

Aves

Canario

Loro

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

Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.

Unidad 4. El texto: propiedades y formato (IV)

4.3. Caracteres especiales
A veces necesitars 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 quieres poner dos
espacios en blanco y los introduces por teclado, Dreamweaver no los crear, debers
introducirlo dos veces utilizando la opcin que vamos a ver a continuacin. Lo mismo
ocurrir con los caracteres que no tenemos en el teclado.
Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la
imagen inferior.

Slo coloca el cursor del ratn sobre Caracteres especiales y vers una lista rpida de
los caracteres ms utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y
aparecer en la vista de Diseo.
Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una
ventana desde donde podrs seleccionar caracteres entre una lista bastante ms amplia:

4.4. 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, como veremos ms adelante, 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.
Tambin podemos crear clases. Algo as como definir un estilo y darle un alias. El estilo
afectar a todos los elementos a los que apliquemos esa clase.
Por otro lado, al crear el estilo, podemos definirlo como un estilo en lnea (afectar slo
al elemento seleccionado) o crear una regla, que puede afectar a toda la pgina, o a todo
el sitio si la guardamos en un archivo CSS.

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.

4.5. Crear un estilo personalizado

Con Dreamweaver CS5, las caractersticas que apliquemos a un texto a travs
del Inspector de propiedades CSS crearn automticamente estilos CSS. Aunque
tenemos que decidir a qu elementos afecta.
Vemoslo:
Crear un estilo en lnea.
Por ejemplo, si queremos que un determinado estilo afecte a un nico elemento y en un
caso puntual, podemos crearlo como un estilo en lnea. Esto incrustar el estilo en la
propia etiqueta HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al
elemento.
En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo
estilo en lnea>.

A continuacin, definimos las propiedades del estilo.

Insistimos que esta opcin es la menos flexible y debe empelarse slo en casos
concretos, cuando el estilo no se repita, y no tenga sentido mantenerlo si borramos esa
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,

seleccionamos <Nueva regla CSS>.

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier

caso nos aparecer la siguiente ventana:

Tipo de selector: el tipo de selector es fundamental, ya que determina a qu

elementos afectar el estilo.
Podemos elegir entre cuatro tipos de selector:

Clase. Es el alias que tomar el estilo, y para que afecte a un elemento, debemos de
aplicarle
esa
clase.
El nombre de la clase va precedido por un punto, y si no lo ponemos lo har
Dreamweaver.

ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo

identifica de forma nica y concreta. Por tanto, el estilo 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.

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

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.

Aqu encontramos todas las propiedades CSS agrupadas por Categoras. Las veremos
ms adelante.
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.

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.

Si quieres aprender ms sobre el panel Estilos CSS, puedes hacerlo aqu

Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber
explicado previamente cada una. Ms adelante detallaremos qu hacen las propiedades
existentes. No obstante, sabiendo un poco de ingls resultan muy intuitivas.
Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir
el estilo de una etiqueta.

4.7. Aplicar un estilo

En el caso de haber creado una regla para una etiqueta, no ser necesario aplicarla, ya
que directamente afecta a todas las etiquetas de ese tipo.
Por tanto lo que tendremos que aplicar sern los estilos que definamos como clases.
Veamos cmo hacerlo:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos
el punto de insercin, pero sin seleccionar, el estilo se aplicar a la primera etiqueta que
contenga el texto (por ejemplo el prrafo).
En el inspector de Propiedades seleccionamos la opcin CSS y seleccionamos el
estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de
Destino.

Desde

las

propiedades HTML tambin

podemos

hacerlo,

utilizando

el

desplegable Clase.

Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en
la barra de estado, y seleccionar la clase deseada del men Establecer clase.

Todas las reglas disponibles aparecen al desplegar el submen Formato Estilos

CSS.
Observa que existe una clase llamada ninguna. Lo que hace esta opcin es quitar la
clase al elemento.
La barra de estado nos ayudar a saber qu clase tiene aplicada un elemento. La clase
aparecer junto al nombre de la etiqueta, separada por un punto.

Para practicar puedes realizar el Ejercicio paso a paso Crear y aplicar una clase y el
ejercicio paso a paso Modificar el estilo de una lista.

4.8. Hojas de estilos

Exportar estilos
Es frecuente que comencemos creando los estilos en la propia pgina, y despus al ver
que los necesitaremos en otras pginas del sitio, los pasemos a una hoja de estilo.
Dreamweaver nos permite exportar estos estilos fcilmente.
Utilizamos el panel Estilos CSS (Mays + F11). En este caso nos ser ms til la vista
Todo. Agrupados en <style> encontramos los estilos creados en la pgina.

Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el
icono de la esquina superior derecha) seleccionamos Mover Reglas CSS....
Nos aparecer la siguiente ventana:

Encontramos dos opciones para ubicar los estilos:

Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se
aadirn a ella.

Una nueva hoja de estilos... crear una hoja nueva para las reglas exportadas.
Deberemos de indicar dnde queremos guardar el archivo, normalmente en la
misma carpeta que las pginas.

Los estilos seleccionados se quitarn de la pgina actual, y se vincular con la hoja de

estilos.

Vincular una hoja de estilos.

Si queremos utilizar una hoja de estilos ya existente en nuestra pgina, debemos
vincularla.

Podemos hacerlo desde el men Formato Estilos CSS Adjuntar hoja de

estilos... o desde el panel Estilos CSS. Lo nico que tendremos que hacer es seleccionar
el archivo a vincular. Las hojas de estilo tienen la extensin .css.
Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo
del equipo, todos los archivos que utilicemos deben de estar dentro del sitio.

Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso
Exportar y vincular hojas de estilo.

Ejercicio propuesto de la Unidad 4

Prueba evaluativa de la Unidad 4

Pg. 4.9

Unidad 5. Hiperenlaces (I)

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un
elemento esencial para cualquier pgina web.

5.1. Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado
lleva de una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
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:

5.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas
referencias no se limitan a los enlaces, se comportarn igual cuando indiquemos la
ubicacin de una imagen, de un archivo Flash, de la hoja de estilo, etc.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del
archivo, incluyendo el protocolo http://.
Por

ejemplo, http://www.aulaclic.com,

o http://www.misitio.com/seccion2/pagina1.html.
La referencia absoluta es independiente de la ubicacin de la pgina que contiene el
enlace, y ser vlida siempre que no cambie la ubicacin del archivo enlazado. Es la
opcin obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces
externos).

Referencia relativa al documento (por defecto):

La ubicacin del archivo enlazado se toma en relacin con la ubicacin del la pgina.
Es decir, partimos de la carpeta en la que se encuentra el documento.
Si queremos enlazar con una pgina o archivo dentro de la misma carpeta, no tenemos
ms que utilizar su nombre. Por ejemplo, pagina2.htm.
Si est en una subcarpeta de la pgina actual, no tenemos ms que indicar el nombre
de

la

carpeta

antes

del

archivo,

separarlos

por

una

barra

(/).

Por

ejemplo imagenes/miimagen.gif.
Si queremos referirnos a carpetas que estn por encima del nivel donde nos
encontramos deberemos utilizar ../
Por

ejemplo,

imagina

que

estamos

en

direccin http://www.misitio.com/pagina/informacion/index.html.
queremos

mostrar

una

imagen

que

se

Fcil.

Deberemos

llamarla

haciendo

En

siguiente
esta

encuentra

carpeta http://www.misitio.com/pagina/secciones/seccion1.html,
hacerlo?

la

referencia

cmo
al

nivel

(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

pgina
en

la

podemos
superior

El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.

De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel
y

luego

nos

movemos

dentro

de

la

carpeta secciones para

mostrar

el

archivo seccion1.html.
Esta opcin depende de la ubicacin del archivo, y pueden no funcionar correctamente
si alteramos la estructura de carpetas.
Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual para enlazar
archivos dentro del sitio.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
Tomando como origen la carpeta raz del sitio.
Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.
En

el

ejemplo

anterior

si

carpeta http://www.misitio.com/,

un

tuvisemos
enlace

en

definido

como

cualquier

pgina

a http://www.misitio.com/pagina/secciones/seccion1.htmlse

sitio
del

la
sitio

creara

como /pagina/secciones/seccion1.html.
Por tanto, podramos poner ese vnculo en cualquier pgina del sitio y funcionara
independientemente de su ubicacin.
Estos enlaces no funcionarn en el sitio local, a no ser que configuremos un servidor
de pruebas como veremos ms adelante, ya que Windows interpretar como raz la raz
del disco duro.

Marcadores o Puntos de fijacin:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro
diferente. Para ello, indicamos el nombre del punto de fijacin a continuacin de la ruta del
archivo (relativa o absoluta) separados por una almohadilla (#).
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

Podemos definir el punto dentro de un documento a travs del men Insertar,

opcin Anclaje con nombre. O podemos utilizar el atributo ID de cualquier elemento (se
puede establecer desde elInspector de Propiedades HTML). En cualquier caso, los
nombres no deben de estar repetidos en la pgina.

Debers tener siempre en cuenta que los nombres de las rutas se correspondan
perfectamente a los nombres de los archivos y carpetas en el servidor (local o
remoto).
Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en
los enlaces.
Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as
no tendrs problemas a la hora de referenciar tus objetos.

5.3. Crear enlaces

La forma ms sencilla de crear un enlace es a travs del inspector de propiedades.

Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y
seguidamente establecer el Vnculo en el inspector HTML.

www.aulaclic.es, que al ser un

archivo externo es de referencia absoluta, por eso contiene http://
Por ejemplo, en la siguiente imagen hay un enlace a

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan
comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una
almohadilla #. Veremos su utilidad ms adelante.

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. Si tenamos un texto seleccionado,

aparecer ah.

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
Dreamweaver te crear un enlace relativo al documento. Si quieres que los enlaces
sean relativos al sitio visita este avanzado

Destino: la ventana donde se abrir la pgina, este campo se explica en el siguiente

apartado.

Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un

instante el cursor sobre el enlace.

Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el

acceso al enlace mediante la pulsacin de la tecla Alt ms la tecla de acceso
indicada.

ndice de tabulador: Como habrs podido observar puedes saltar a travs de los
enlaces pulsando la tecla Tabulador. En este campo podrs establecer un ndice
indicando la prioridad del enlace y as configurar el modo en el que actuar
el Tabulador es sus diferentes saltos. Por defecto, se tabularn por orden de
aparicin.

5.4. Destino del enlace

El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada,
puede variar dependiendo de si el documento est basado en marcos.
Puede especificarse en el inspector de propiedades HTML a travs de Destino, o en
la ventana que aparece a travs del men Insertar, opcin Hipervnculo.

_blank:
Abre el documento vinculado en una nueva ventana o pestaa del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el
conjunto de marcos padre. Tiene sentido si se emplean marcos.
_self:
Es la opcin predeterminada, y la que se produce si no indicamos otra cosa. Abre el
documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si
se emplean marcos.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas
opciones de destino, ya que se volvern a ver en el tema de Marcos.
Si la pgina no usa marcos (lo habitual hoy en da) simplemente no especificaremos
nada para abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas
nuevas.
Lo habitual es abrir las los enlaces a pginas del sitio en la misma ventana, y los
enlaces externos en ventanas nuevas. Otra tendencia dice que una pgina nunca debera
de abrir nuevas ventanas, y que debe de ser el usuario el que decida qu enlaces quiere
abrir en ventanas nuevas. En la mayora de navegadores, para abrir un enlace un una
ventana nueva, basta con hacer clic con la ruedecilla del ratn.

5.5. Formato del enlace

En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo
tiempo, puede adquirir cuatro colores diferentes que pueden especificarse a travs de las
propiedades de la pgina. Estos cuatro colores diferentes corresponden a los tres estados
del vnculo: vnculo normal, vnculo activo (el ltimo pulsado), vnculo visitado o vnculo de
sustitucin (cuando el cursor est sobre el vnculo).
Aqu tienes dos vnculos de ejemplo:
www.aulaclic.es www.elpais.com

Si has visitado alguno, vers que sale en un tono morado, si no sale en azul.
Recuerda que como todo en nuestra pgina, los vnculos tienen un formato por defecto,
pero es totalmente personalizable por CSS. Para ello, basta con crear una Regla de
estilo para la etiquetaa.
Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes
selectores:

a:link para los enlaces normales.

a:visited para los enlaces visitados.

a:active para los enlaces activos.

a:hover para los enlaces con el cursor encima.

Aunque

recuerda

que

en

las propiedades

del

documento tenamos

la

categora Vnculos CSS que nos permite establecer estos valores.

Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de
puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una
imagen (un mapa), aparece el contorno de esa zona.
Aqu tenemos dos vnculos en una imagen:

Como puedes ver, la primera imagen que hace de vnculo contiene un recuadro
alrededor. Este es el formato por defecto, pero no suele quedar bien, sobre todo en
imgenes con el fondo transparente.
Veamos como quitarlo utilizando CSS.
En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de
destino, y pulsamos Editar regla.

En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a

img, es decir, imgenes que estn dentro de una etiqueta a (de enlace).
Se abrir la ventana Definicin de regla para a img:

En

ella,

seleccionamos

la

categora Borde,

en Style seleccionamos none.

Pulsamos Aceptar.
Esta regla har que las imgenes con enlace se muestren sin borde.

Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma
al situarse encima del vnculo. Suele adquirir la apariencia de una mano sealando.

Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.

5.6. 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.
Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerir
una pgina dinmica como veremos a lo largo del curso. Otra opcin sera mostrar
nuestra direccin de correo, para que el usuario pueda enviarnos el correo como quiera.
Si publicamos nuestra direccin en la web es mejor hacerlo como una imagen, o
escribindola

de

forma

que

la

pueda

entender

un

humano

(por

ejemplo micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la
emplearn para el envo de correo no deseado.
Para practicar puedes realizar el Ejercicio paso a paso Crear vnculo de correo
electrnico.

En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos
rotos. Si no sabes lo qu son o cmo solucionarlos, consltalo aqu

Ejercicio propuesto de la Unidad 5

Prueba evaluativa de la Unidad 5

Unidad 6. Imgenes (I)

En este tema vamos a ver cmo insertar imgenes en un documento. Tambin
veremos cmo crear algunas imgenes especiales, como es el caso de los Rollovers y
los botones flash, que ayudan a mejorar la apariencia de nuestras pginas.

6.1. Introduccin
Las imgenes son un aspecto muy importante de la web. Ya sea como complementos a
la informacin o parte del diseo, la hacen mucho ms atractiva a ojos del visitante. No
obstante, no conviene abusar, ya que aumentarn mucho el tamao final de la web.
Existen una serie de formatos de imagen ms recomendables que otros para ser
introducidos en una pgina web. Esta informacin puedes consultarla aqu

6.2. 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.
Cuando te acostumbres, te ser ms cmodo acceder con la combinacin de
teclas Ctrl + Alt + I.

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, llamadaaulaclic.jpg, se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:

/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al
documento o a la carpeta raz del sitio.

Otra

forma

de

insertar

una

imagen,

es

arrastrarla

directamente

desde

el

panel Archivos sobre el documento.

Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su

nombre, en Dreamweaver aparecer as

indicando que el enlace al archivo est

roto.
En ese caso, la imagen que aparecer en el navegador ser similar a sta:
.
Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el
contenido

del

campo Alt del inspector

de

propiedades, que

explicaremos

continuacin.
Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.

6.3. Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra esta
apariencia:

Desde aqu podremos establecer distintos atributos a la imagen:

Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondr

directamente.

Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo

la direccin en el campo Vnculo, y decidir en qu ventana se abre con el
campo Destino. Podemos hacer que cada zona de la imagen tenga un vnculo
distinto, creando un Mapa de imagen. Puedes ver su uso en este avanzado
con lo aprendido, realizar el
Ejercicio paso a paso Crear mapas de imagen.

.Y

En el campo Alt escribimos el texto que remplazar a la imagen si sta no puede

mostrarse. Es un atributo muy importante que deberamos incluir siempre para hacer
pginas accesibles. Por ejemplo, el texto que se escribe ser ledo por los
programas lectores para invidentes. Si lo que queremos es mostrar un ayuda
contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar
el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el
cdigo fuente con el formato title="Texto a mostrar". Internet Explorer
muestraAlt como ayuda contextual cuando la imagen no lleva title, pero el resto de
navegadores no lo harn, respetando el estndar.

En Clase podrs asignarle un estilo que hayas 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 entiendas su funcin:

Puedes asignarle un grosor de borde desde el campo Borde. En CSS, existe el

atributo border.

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

Adems, encontramos algunos controles de Edicin: El botn

nos permite

optimizar la imagen desde Dreamweaver, cambiando el formato o creando transparencias

como puedes ver aqu

. Por otro lado, el icono

nos permite editar la imagen con

un programa externo, como Photoshop o Paint. Puedes ver cmo cambiar el programa de
edicin aqu

6.4. Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes.

Por un lado, podemos cambiar el tamao con el que se ve una imagen, pero dicho
cambio de tamao no se aplica directamente sobre el archivo de imagen, que conservar
el tamao original.
Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de
cmo podra quedar modificndola desde un editor externo, como Fireworks, Photoshop,
etc..
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el
icono de Dreamweaver y modificamos su tamao de varias formas diferentes:

Tamao original

Con tamao modificado

El resultado puede ser ms o menos satisfactorio, dependiendo del navegador que es
el que aplica realmente el reescalado, pero en ocasiones puede resultar til modificar el
tamao de algunas imgenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamao.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de
los recuadros negros que aparecen alrededor de la imagen.

La

otra

es

travs

de inspector

de

propiedades,

cambiando

los

campos Ancho o Alto. Estos campos aparecern en el inspector cuando est

seleccionada alguna imagen.

Si estos campos no contienen el tamao original de la imagen, el valor aparecer

resaltado en negrita y aparecer a la derecha una flecha circular que permite volver al

tamao original haciendo clic sobre ella.

Como hemos comentado, este cambio de tamao se produce alterando los atributos de
anchura y altura, pero no cambiando el tamao real del archivo, por lo que el usuario
deber descargarse el archivo completo con su tamao original.
Por ejemplo, si tenemos una fotografa de nuestra cmara de fotos, de un tamao
grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de
200x150px) esta sera una mala solucin, porque el usuario se estara descargando el
archivo completo, y no una miniatura real que ocupara mucho menos tamao.

Dreamweaver tambin nos permite cambiar el tamao real del archivo de imagen.
Para hacerlo, seleccionamos la imagen, y pulsamos en el icono

del Inspector de

propiedades. Se abrir la ventana Presentacin preliminar de la imagen. Nos fijamos

en la pestaaArchivo.

En la seccin escala, podemos establecer un porcentaje del tamao original.

El nuevo tamao se mostrar en An (ancho) y Al (alto). Tambin podemos introducir

directamente el nuevo tamao.
Incluso podemos recortar un rea de la imagen, seleccionando Exportar rea, y
seleccionando el rea de la imagen en la previsualizacin de la derecha (no se ve en la
imagen anterior).
Cuando lo tengamos, pulsamos Aceptar.
En este caso, si hemos alterado fsicamente el archivo.
El resultado es bastante bueno, aunque siempre ser mejor con herramientas
especializadas, como Photoshop o GIMP.

6.5. 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.
Veamos un ejemplo de rollover. Partiendo de las siguientes imgenes

Hemos creado el siguiente rollover. Sita el cursor sobre l para ver qu es lo que
ocurre.

Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la
opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imagen
original y la de sustitucin.

Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se

activa, la imagen de sustitucin se carga cuando se carga la pgina, de este modo se
evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que
aparezca.
El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el
que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda
ser mostrada en el navegador.
El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers.
Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen
seleccionada.
Para practicar puedes realizar el Ejercicio paso a paso Crear Rollover.

Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son ms
utilizados. Bsicamente consiste en cambiar la imagen de fondo de un elemento. Puedes
ver un ejemplo de barra de navegacin utilizando CSS en este avanzado

6.6. Objetos inteligentes

Los objetos inteligentes son imgenes que obtenemos directamente desde un archivo
de Photoshop (.psd).

Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de

Photoshop.

Pero una archivo .psd no es un archivo que podamos mostrar en una pgina web. Por
eso, lo que har Dreamweaver es convertirlo a un formato estndar. Por eso, tras abrirlo,
Dreamweaver nos pedir que elijamos uno de los formatos gif, png o jpg y lo guardemos,
con las mismas opciones que encontrbamos al pulsar el botn

del Inspector de

propiedades.
Qu ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del
objeto inteligente encontrars un icono como ste

. Las dos flechas verdes indican

que el archivo est sincronizado, es decir, la imagen est generada a partir del ltimo
archivo de Photoshop.
Pero puede que en cualquier momento queramos modificar la imagen. Podemos
hacerlo abriendo el archivo .psd, o pulsando el icono

del Inspector

de propiedades, que abrir el archivo fuente de Photoshop.

Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha
cambiado, mostrando ahora una flecha roja:

. Esto indica que la imagen que estamos

viendo en Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha
modificado. Podemos volverla a generar pulsando el icono

Actualizar

desde origen.

Por lo tanto, los objetos inteligentes son tiles para imgenes que tengamos que editar
frecuentemente.

Ejercicio propuesto de la Unidad 6

Prueba evaluativa de la Unidad 6

Unidad 7. Tablas (I)

En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas,
insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamao del borde.

7.1. 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. A
continuacin tienes un ejemplo de tabla.

7.2. 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.
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 podramos 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. Los lectores de pantalla leen los
encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento
de la informacin de la tabla.
Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de la
tabla.
En Resumen: podemos 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.

7.3. Rellenar las celdas

Las celdas son cada uno de los recuadros que forman una tabla, resultan de la
interseccin entre una fila y una columna.

imagen y texto

Texto dentro de una celda

CELDA

FILA

C
O
L
U
M
N
A

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 lo insertaremos como hemos visto hasta ahora.
Si queremos insertar elementos ya existentes en la celdas, tenemos que crear primero
la tabla vaca, y despus seleccionar y arrastrar los elementos a insertar sobre la celda.
No podemos seleccionar el texto, y crear la tabla "alrededor", como hacamos, por
ejemplo, con las listas.
Para practicar puedes realizar el Ejercicio paso a paso Crear y rellenar una tabla.

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

Si tienes el punto de insercin en la tabla y no te aparece esa zona verde puedes

activar su visualizacin seleccionando la opcin Anchos de tablas del men Tabla o
tambin desplegando de la barra de mens, el men Ver Ayudas visuales Anchos
de tabla. De la misma forma se desactiva su visualizacin.
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un
ancho especificado. Si aparecen dos nmeros, el primer nmero corresponde al ancho
especificado en las propiedades de la tabla o columna y el segundo nmero es el ancho el
ancho visual que aparece en la vista de diseo; por ejemplo en la tabla anterior la primera
columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 pxeles
pero al contener una imagen que necesita ms espacio, la columna ocupar realmente
142 pxeles (ancho visual de la columna tal como aparece en la pantalla).

Cuando ocurren estas diferencias

podemos hacer que en el cdigo (propiedades) se cambie el ancho por el real, para ello
slo tenemos que seleccionar la opcin Igualar todos los anchos del men desplegable
de encabezado de tabla.
En este men vemos que tambin tenemos las opciones para Borrar o Igualar los
anchos.
Si en una tabla no indicamos los anchos, estos se ajustarn al contenido.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar

filas, columnas o celdas.
Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes
las distintas formas y elijas la que ms te gusta. Estas son las formas de seleccin:

Puedes utilizar la opcin Seleccionar columna del men de encabezado de

columna (zona verde de anchos) esto slo es vlido para seleccionar una columna.

Manteniendo pulsado y arrastrando el ratn hasta seleccionar la columna/s o fila/s

completamente.

Tambin puede hacerse situando el cursor junto al borde superior o izquierdo de la

columna o fila respectivamente, de modo que el cursor cambia a la forma de una
flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha
flecha.

En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier

sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la
etiqueta <td> para seleccionar la celda.

Para seleccionar celdas:

Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratn
mientras se arrastra sobre las celdas deseadas.

Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener
pulsada la tecla Control mientras se hace clic sobre las celdas.

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

Para practicar puedes realizar el Ejercicio paso a paso Modificar las propiedades de la
tabla.

7.6. Formato CSS

Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo
propiedades CSS.
Los selectores.
Podemos definir una clase y aplicrsela a la tabla desde el panel Propiedades, o si es
una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.
Pero y si queremos editar las propiedades de las etiquetas que forman la tabla?
Fijmonos en el aspecto de la barra de estado cuando tenemos el punto de insercin en
una celda:

Vemos que con el selector table nos referimos a la tabla completa. Con el
selector tr hacemos referencia a las filas y con el selector td hacemos referencia a
las celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el
selector th. Observa que no hay un selector para referenciar a las columnas enteras,
aunque s existe un mtodo empleando etiquetas <col />, es ms avanzado y no lo
veremos en este curso.
Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerda que
podemos emplear selectores compuestos. As para referirnos a las filas de una tabla con
la clase miclase, lo haremos con el selector .miclase tr, y emplearemos .miclase td para
referirnos sus celdas.

Nota: Si al crear una pgina definimos las propiedades del texto empleando
las Propiedades de la pgina, Dreamweaver crea una regla con el selector body,td,th.
Es decir, aplica el mismo estilo a la pgina, a las celdas y a los encabezados. Esto har
que por ejemplo, si cambiamos la fuente de la tabla, el cambio no se aplique ya que
prevalece la generada por Dreamweaver, por ser ms concreta. Esto puede entrar
muchas veces en conflicto. Para evitarlo, lo mejor es editar el selector dejndolo slo
como body. Recuerda que para editar un selector, hacemos clic derecho sobre la regla en
el panel Estilos CSS, y elegimos Editar selector en el men contextual.

Propiedades.
Podemos aplicar la mayora de propiedades que ya hemos empleado a las tablas, filas
y columnas: fuente, tamao, color, imagen de fondo.
Existen algunas propiedades CSS especficas de las tablas, como el borde colapsado.
Dreamweaver no nos permite asignar estos estilos con los asistentes, as que los veremos
ms adelante.
Un estilo muy til es el que nos permite centrar la tabla en la pgina. Para ello,
debemos editar los mrgenes izquierdo y derecho (categora Cuadro), estableciendo el
valor auto para ambos.
Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para hacerlo, no
tenemos ms que crear una clase que, por ejemplo, cambie el color de fondo, y aplicarla a
filas alternas.

Para practicar puedes realizar el Ejercicio paso a paso Modificar el estilo de la tabla.

7.7. Cambiar tamao de tabla y celdas

Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o
como Porcentaje. El tamao de la tabla a travs del inspector de propiedades estar
especificado por los valores deAn (anchura) y Al (altura). Normalmente slo se especifica
la anchura, no la altura.

Los valores An y Al de una celda siempre estn en Pxeles. No es necesario

especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se
mantenga obligatoriamente ese tamao, y no que se ajusten al contenido o al tamao de
la ventana.

No solo puede establecerse el tamao de las tablas y de las celdas a travs del
inspector de propiedades. Tambin es posible hacerlo manteniendo pulsado el ratn sobre
alguno de los bordes, arrastrndolo hacia la posicin deseada.

Para practicar puedes realizar el Ejercicio paso a paso Ajustar el tamao de la tabla.

7.8. 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 menModificar. En ambos casos aparece la opcin Tabla.
Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar
mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar
fila o Insertar columna.
La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la
columna se inserta a su izquierda.

Tambin tenemos una opcin ms completa, la opcin Insertar filas o columnas.... Al

seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se

insertarn sern filas o columnas, el nmero de ellas que se insertar, y la posicin donde
se insertarn.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o
columna a eliminar y elegir la opcin Eliminar fila o Eliminar columna del men Tabla.

.9. Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le
llama anidar tablas.
A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera
celda de una tabla se ha insertado otra tabla.

Para anidar tablas slo tienes que posicionar el cursor en la celda donde quieres
insertar la nueva tabla e insertarla como ya hemos visto.
Combinar celdas consiste en convertir 2 o ms celdas en una sola por lo que
dejar de haber borde de separacin entre una celda y otra ya que sern una sola. Esto
nos puede servir por ejemplo para utilizar la primera fila para escribir el ttulo de la tabla,
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

inspector

de

propiedades

(lo

encontrars

en

la

parte

inferior

izquierda

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

Podemos combinar celdas en vertical y horizontal:

Para dividir una celda hay que pulsar sobre el botn

del inspector de

propiedades, o sobre la opcin Dividir celda de la opcin Tabla.

En ambos casos, aparece una ventana como sta, en la que hay que especificar si la
celda se va a dividir en filas o columnas, y el nmero de stas.

Para practicar esto, puedes realizar el Ejercicio paso a paso Combinar celdas.

7.10. Modos de tabla

A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de
visualizacin. Nosotros hemos trabajado en todo el tema con el modo estndar, y vamos
a seguir trabajando con l, pero se puede pasar a los otros modos a travs del
men Ver opcin Modo de tabla. Dentro de esta opcin podemos elegir entre Modo
estndar o el Modo de tablas expandidas.

El Modo de tablas expandidas aade temporalmente relleno y espaciado de celda a

las tablas de un documento y aumenta los bordes de las tablas para facilitar la edicin.
Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto
de insercin de forma precisa e introducir contenido pero en este modo no vemos la
pgina como quedar exactamente.
En este curso nos limitaremos al modo estndar, aunque puedes emplear el Modo de
tablas expandidas cuando lo creas til.

7.11. Adaptar webs a distintas resoluciones

Siempre que se crea una pgina web hay que tener en cuenta que va a ser visitada por
usuarios con monitores de distintos tamaos y con distintas resoluciones. Desde las
pequeas pantallas de los porttiles de bajo coste, hasta monitores panormicos en alta
resolucin.
Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en
nuestra pgina: el diseo fijo y el diseo elstico.

El diseo fijo especifica las medidas en pxeles. Por lo que el contenido siempre
se mostrar del mismo tamao, lo que facilita mucho el diseo. Por contra, se
desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll"
horizontal en monitores muy pequeos. Un ejemplo de este diseo sera la home
de aulaClic.

El diseo elstico especifica las medidas en porcentajes. Esto hace que el

contenido se adapte al tamao de la ventana en la que se visualiza, lo que nos
permite aprovecharla completamente. Por contra, en diseos elaborados, es ms
complicado hacer que la pgina no se descuadre, sobre todo cuando es demasiado
ancha o estrecha. Un ejemplo de este diseo es la pgina de este curso.

Como recordars, el tamao de las tablas puede ser definido en pxeles o

en porcentaje. Cuando el tamao de la tabla sea definido en pxeles, la tabla se ver del
mismo modo independientemente del tamao de la ventana del navegador. En cambio,
cuando el tamao de la tabla sea definido en porcentaje, la tabla se ajustar al tamao
del elemento que la contiene, lo cual implica que el contenido de la tabla se puede
descuadrar.
Pulsa aqu para ver una pgina con tablas de tamao fijo, en pxeles. Imagina que la
pgina ha sido diseada para visualizarse correctamente en un monitor pequeo de baja
resolucin.
Si modificas el tamao de la ventana, vers que la tabla es siempre del mismo tamao.
Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que
equivaldra a visualizar la pgina en un monitor grande con alta resolucin), a los lados de
la tabla aparecer un gran espacio vaco.
Pulsa aqu para ver una pgina con tablas de tamao variable, en porcentaje.
Si modificas el tamao de la ventana, vers que las tablas se ajustan a ella. Usar tablas
con tamao variable tiene tambin un gran inconveniente, ya que si maximizas la ventana
del navegador apreciars claramente cmo el contenido de las tablas se descuadra,
quedando demasiado estirado, lo que dificulta su lectura.

En un principio puede parecer ms conveniente utilizar tablas con tamao fijo, aunque
esto implique que aparezca el hueco vaco a la derecha, en el caso de los monitores con
alta resolucin. Pero con un poco de prctica a la hora de manejar las tablas, puedes
salvar el inconveniente del descuadre de la pgina y as definir pginas con tamao en
porcentaje que aprovechen el ancho cuando el monitor de ms grande.
No solo puede establecerse el tamao de la tabla, tambin es posible establecer el
tamao de las celdas.

El tamao de la celda a travs del inspector de propiedades estar especificado por

los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la
altura.
Los valores An y Al de una celda siempre estn en Pxeles. En la imagen anterior, la
celda no tiene una anchura concreta, se ajusta al contenido. Si la queremos exactamente
de de 200 pxeles, basta con introducir 200px en An.. Para que, por ejemplo, la anchura
fuera del 25 por ciento de la tabla, en An. habra que escribir 25%.
Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta qu contiene
cada una de ellas (imgenes, texto alineado a la derecha, texto alineado a la izquierda,
texto de gran tamao, etc.), puede conseguirse que al visualizar la pgina en monitores de
distintos tamaos y con distintas resoluciones, la apariencia sea bastante similar, o al
menos que la distribucin del contenido de la tabla no se vea muy afectado por el cambio
de tamao de la ventana del navegador.

Ejercicio propuesto de la Unidad 7

Prueba evaluativa de la Unidad 7

Unidad 8. Marcos (I)

Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo
insertar un marco sencillo en una pgina, y cmo trabajar con l.

8.1. Introduccin

Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que
permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de
navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad,
pueden mejorar tambin la apariencia.
Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por
ejemplo, en la siguiente imagen puedes ver una pgina con dos marcos. El marco
izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm.
Para poder visualizar la pgina de este modo, hemos tenido que abrir el
documento index.htm, que es la pgina que contiene los marcos agrupados.

Es posible editar los documentos contenidos en los marcos desde la pgina que
contiene el grupo de marcos. Esto facilita el trabajo, ya que es ms fcil hacerse una idea
de cmo quedar la pgina al final, cosa que no es posible si se editan individualmente
cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al
principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente
algunos conceptos bsicos y ejemplos sencillos.

Actualmente los marcos estn cayendo en desuso. Aunque son realmente prcticos,
crean problemas a la hora de ser indexados por los buscadores. Y estar correctamente
indexado y posicionado es crucial para una web.
Por ejemplo, si vemos el cdigo fuente de una pgina con marcos, vemos que
realmente no hay ms que las llamadas a las pginas correspondientes, por lo que no hay
nada que indexar. Por otro lado, si se indexa una pgina, puede que el visitante llegue a
ella directamente, no a travs del marco. Esto hace, por ejemplo, que el usuario no pueda
acceder a los elementos de navegacin del sitio.
La pega ms comn al no usar marcos es tener que repetir los elementos comunes,
como el men y logo en cada pgina, con la complicacin correspondiente a la hora de
hacer un cambio. No obstante, esto es fcilmente solucionable si empleamos PHP o
JavaScript en nuestra pgina.

Por lo tanto, si piensas colgar tu pgina en internet para uso pblico, no te

recomendamos su uso. Pero si la pgina es de uso privado, tal vez te facilite el trabajo
emplear marcos.

8.2. Crear marcos

Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.

Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o
uno ya existente.
Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede
elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento
actual.

Como puedes ver en la imagen, aparece una lnea que

divide el documento en dos. El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que

contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente,
que est en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre
la lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya
guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco

vaco aparecer a la derecha del documento original.
En esta imagen puedes ver un ejemplo de marco a la derecha.

Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha.

Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la
derecha, y el que contiene el grupo de marcos. En este caso, el documento que tenamos
inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en
este caso el marco padre ser el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre

el que se han insertado el resto de marcos.

8.3. Seleccionar marcos

Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos, que
puede

abrirse

travs

del

men Ventana.

Tambin

puedes

abrir

el

panel Marcos pulsando la combinacin de teclas Maysculas + F2.

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se

puede pasar de uno a otro pulsando sobre ellos en el panel. Tambin puede seleccionarse
la pgina de marcos pulsando sobre el borde que rodea a los marcos (el que aparece ms
grueso y en relieve en la imagen).
No es necesario seleccionar los marcos para editar los documentos que stos
contengan.
S es necesario seleccionar los marcos para especificar las propiedades especficas de
cada uno de ellos.

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

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

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

8.6. Contenido del marco

Como ya has visto, el contenido de un marco puede establecerse a travs del
campo Origen del inspector de propiedades.

Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en

cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de
otros ha de poder variar.
A travs del campo Origen del inspector de propiedades, slo es posible especificar el
documento que se cargar inicialmente en el marco, pero hemos de poder cambiar este
documento por otro a travs de vnculos.
Como recordars, en el tema de hipervnculos vimos los posibles destinos de los
enlaces. Estos destinos podan ser _blank, _parent, _self, y _top. Vamos a recordar para
que serva cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te sern
ms fciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:

Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el

conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que
se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o
ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere
decir que los marcos de la ventana desaparecern al abrir el vnculo en ella.
Adems de estos destinos para los enlaces, tambin aparecern los nombres de los
distintos marcos de la pgina.
Podemos aadir todos estos destinos a cualquier elemento de la pgina que contenga
algn enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces
funcionen a nuestro antojo, cargando unas u otras pginas en alguno de los marcos, en
una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos
resultados finales.

Para practicar puedes realizar el Ejercicio paso a paso Crear y configurar marcos.

Prueba evaluativa de la Unidad 8

Unidad 9. Formularios (I)

Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu
elementos puede contener y cmo pueden validarse los datos introducidos en l.

9.1. Introduccin

Los formularios se
utilizan para recoger datos de los usuarios. Nos pueden servir para realizar un pedido en
una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir
preguntas, etc.
Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se
arrancar un programa que recibir los datos y har el tratamiento correspondiente.
Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario
y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan
nociones de programacin, ya sea en PHP, en JavaScript o en otro lenguaje de
programacin, y esto no entra en los objetivos del curso.
A la derecha tienes un ejemplo de formulario simple.
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens
desplegables, y botones.

9.2. Elementos de formulario

Los elementos de formulario pueden insertarse en una pgina a travs del
men Insertar, opcin Formulario, o lo que es ms cmodo si vamos a insertar varios
elementos, desde el panelInsertar en la seccin Formularios.

A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario
que pueden ser insertados en la pgina.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte
de un formulario, as como algunas de sus propiedades.
Campo de texto y rea de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea,
mientras que el rea de texto permite escribir varias.
Se puede pasar de Campo de texto a rea de texto a travs del inspector de
propiedades, marcando la opcin Una lnea o Multi lnea respectivamente.
Tambin es posible definirlo como Contrasea es como el campo de texto pero las
letras que va tecleando el usuario se sustituyen por un carcter como podrs ver en la
imagen siguiente.
A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en
ellos para ver su funcionamiento.

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).
Tambin es posible cambiar el texto del botn, a travs de la propiedad Valor del
inspector de propiedades.

Como mnimo tiene que haber un botn del tipo Enviar formulario, imprescindible para
enviar los datos. Adems le suele acompaar un botn Restablecer formulario para
hacer reset en el caso de que el usuario quiera comenzar de nuevo a rellenarlo.
Casilla de verificacin
Es un cuadrito que se puede activar o desactivar, para indicar si el usuario ha elegido
una opcin o no.
Deseo recibir informacin

Puede asignrsele el Estado inicial como Activado o como Desactivado.

Botn de opcin
Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del
mismo formulario con el mismo nombre, slo puede haber uno activado. Cuando se activa
uno, automticamente se desactivan los dems. Esto obliga al usuario a slo poder elegir
una opcin.
Superman

Spiderman

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.

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

etiqueta.

Hay

que

Con etiqueta. Podemos pulsar en el texto.

pulsar

sobre

la

casilla.

Una propiedad muy importante de los formularios es su nombre. Ya que al recibir los
datos, a travs del nombre sabremos qu control los enva.

9.3. Crear formularios

Antes de insertar los elementos o controles del formulario, hemos de crear un

formulario. Los elementos los introduciremos dentro de l, ya que cuando lo demos a
enviar, slo se enviarn los datos de los elementos de dentro del formulario.
Puedes

crear

formularios

travs

del

men Insertar Formulario,

opcin Formulario, o desde el panel Insertar.

Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un
recuadro formado por lneas naranjas discontinuas, similar al de la imagen siguiente.

Estas lneas son ayudas visuales al trabajar en diseo, pero no se vern en el

formulario final.
Entre las propiedades del formulario, encontramos el campo Accin. En el indicamos a
dnde se envan los datos. Normalmente, una pgina PHP que se encara de tratarlos.

Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya
sabes puedes insertar a travs del men Insertar, opcin Formulario o desde el
panel Insertar.

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.
Podemos cambiar la apariencia de los formularios con CSS. En este caso, podemos
emplear el selector form.

9.4. Validar formularios

La validacin de formularios sirve para hacer que JavaScript valide el formulario antes
de que se enve, avisando al usuario para que corrija los errores, como campos
obligatorios sin rellenar. Esto es mucho ms eficiente y rpido que enviar la pgina y
validarla slo en el servidor.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se
puede abrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays +
F4.Comportamientos forma parte del panel Inspector de etiquetas.

En este panel hay que desplegar el botn

y pulsar sobre la opcin Validar

formulario, debers haber seleccionado el formulario previamente.

Entonces se mostrar una ventana como la siguiente, donde aparecen todos los
elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar
los requisitos que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si
su contenido ha de ser numrico (Nmero) y si ha de estar en un rango, una Direccin
de correo electrnico, etc.

Para practicar puedes realizar el Ejercicio paso a paso Insertar elementos de

formulario.

Ejercicio propuesto de la Unidad 9

Prueba evaluativa de la Unidad 9

Pg. 9.3

nidad 10. Multimedia (I)

Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo
insertar una animacin Flash, un sonido y un vdeo, que son los ms empleados.

10.1. Pelculas Flash (SWF)

Las pelculas Flash son animaciones, cuyo archivo tiene la extensin SWF. Es
frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin hacia
los usuarios, como banners publicitarios, como botones... Flash es el elemento multimedia
ms empleado en las pginas web.
Estas pelculas pueden crearse mediante el programa Flash tambin de Adobe. Para
poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plugin de Flash Player. Su instalacin es muy sencilla y normalmente ya viene con el
navegador.

Las pelculas

Flash pueden

insertarse

en

una

pgina

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

Veamos

las

opciones

SWF que aparece al desplegar el men Media.

ms

importantes

que

nos

propiedades cuando tenemos seleccionado el archivo Flash:

ofrece

el inspector

de

Como en otros elementos, como las imgenes, podemos asignarle el ancho (An.) y alto
(Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.

Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre

el archivo original (.fla), nos resultar muy til indicar su ubicacin en Origen. As,
para editarlo, bastar con pulsar Editar.

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

Al insertarse animaciones Flash, es frecuente que Dreamweaver aada algunos

archivos que nos permitirn reproducir los elementos, normalmente creando la
carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no
los archivos no se vern. De todas formas, Dreamweaver nos avisar cuando incluya
archivos.

10.2. 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. 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. Siempre es mejor que que el usuario
abandone la pgina.

Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3,

el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que
tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho
espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al
men Insertar, Meda, opcin Plug-in.
A continuacin, para el que se muestran los controles de audio. Si lo deseas, puedes
reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes).
Pueden ocurrir dos cosas:
Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se
mostrar un control similar a este (imagen de IE8):

En cambio, si el plugin necesario no est instalado, el navegador ofrecer la posibilidad

de hacerlo, como en esta imagen de Firefox.

Un plugin es un aadido al navegador, que nos permite realizar funciones extra, como
en este caso, reproducir un archivo de msica. Al insertar un elemento como plug-in lo que
indicamos es que el navegador debe de intentar abrir el archivo empleando los pluigns
que tenga para tal fin. Por eso, si no lo tiene, nos invitar a instalarlo.

En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son
insertados como plugin aparecen representados dentro de Dreamweaver por una imagen
como la de la izquierda.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se
mostrarn los controles de audio, mediante Al y An.

En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los

controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el
sonido en la pgina, pero que no se muestren los controles de audio, los
campos Al y An deben valer cero.
Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen
solamente una vez. Estos valores no pueden definirse como propiedades a travs del
inspector

de

propiedades,

pero

si

los

conocemos

podemos

empelar

el

botn Parmetros....

Por ejemplo, para que el archivo se reproduzca continuamente se hemos

aadido loop="true".
Si

no

queremos

que

se

reproduzca

automticamente,

podemos

aadir

tambin autostart="false"
La lnea de cdigo del archivo de audio nos quedara del siguiente modo:
<embed src="media/audio.mid" autostart="false" loop="true"></embed>

Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles
de audio, puedes escribir este cdigo directamente en la vista Cdigo.
<bgsound src="cancion1.wav" loop="-1">
Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas
veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
No obstante, insistimos en que no es recomendable poner msica sin controles de
reproduccin.

Lo ms habitual en la web es insertar el sonido empleando Flash. Esto hace que no

se necesiten plugins, slo poder reproducir Flash. Adems, nos permite crear los controles
personalizados.
Otras pginas de Internet, como goear nos permiten insertar en nuestra web un
reproductor con msica del sitio, que nuestros visitantes podrn escuchar.

10.2. 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. 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. Siempre es mejor que que el usuario
abandone la pgina.
Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3,
el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que
tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho
espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al
men Insertar, Meda, opcin Plug-in.
A continuacin, para el que se muestran los controles de audio. Si lo deseas, puedes
reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes).
Pueden ocurrir dos cosas:
Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se
mostrar un control similar a este (imagen de IE8):

En cambio, si el plugin necesario no est instalado, el navegador ofrecer la posibilidad

de hacerlo, como en esta imagen de Firefox.

Un plugin es un aadido al navegador, que nos permite realizar funciones extra, como
en este caso, reproducir un archivo de msica. Al insertar un elemento como plug-in lo que
indicamos es que el navegador debe de intentar abrir el archivo empleando los pluigns
que tenga para tal fin. Por eso, si no lo tiene, nos invitar a instalarlo.

En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son
insertados como plugin aparecen representados dentro de Dreamweaver por una imagen
como la de la izquierda.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se
mostrarn los controles de audio, mediante Al y An.
En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los
controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el
sonido en la pgina, pero que no se muestren los controles de audio, los
campos Al y An deben valer cero.
Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen
solamente una vez. Estos valores no pueden definirse como propiedades a travs del
inspector

de

propiedades,

botn Parmetros....

pero

si

los

conocemos

podemos

empelar

el

Por ejemplo, para que el archivo se reproduzca continuamente se hemos

aadido loop="true".
Si

no

queremos

que

se

reproduzca

automticamente,

podemos

aadir

tambin autostart="false"
La lnea de cdigo del archivo de audio nos quedara del siguiente modo:
<embed src="media/audio.mid" autostart="false" loop="true"></embed>

Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles
de audio, puedes escribir este cdigo directamente en la vista Cdigo.
<bgsound src="cancion1.wav" loop="-1">
Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas
veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
No obstante, insistimos en que no es recomendable poner msica sin controles de
reproduccin.

Lo ms habitual en la web es insertar el sonido empleando Flash. Esto hace que no

se necesiten plugins, slo poder reproducir Flash. Adems, nos permite crear los controles
personalizados.
Otras pginas de Internet, como goear nos permiten insertar en nuestra web un
reproductor con msica del sitio, que nuestros visitantes podrn escuchar.

10.3. 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.
En este apartado nos referimos a insertar vdeo de un archivo alojado en nuestro sitio.
No a mostrar vdeos de sitios especializados, como youTube.
Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vdeo en un documento tienes que dirigirte al
men Insertar, Meda, opcin Plug-in.
Puedes ver el vdeo (si tienes el plugin adecuado) a continuacin:
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.

Hay que prestar especial atencin al ancho y alto. Por defecto, si Dreamweaver no
puede obtener el tamao del archivo lo fijar a 32 x 32, insuficiente para ver un vdeo. Es
mejor borrarlos, y as el vdeo se mostrar con su tamao original. Si conocemos el
tamao del vdeo, podemos pensar en insertarlo directamente, pero hay que tener en
cuenta el tamao de los controles de reproduccin, que depende de cada navegador.
Los vdeos tambin se reproducen automticamente al cargarse la pgina, y se
reproducen

solamente

una

vez.

Estos

valores

pueden

cambiarse

travs

botn Parmetros, del mismo modo que en el caso de los archivos de audio,
aadiendo autostart="false" y loop="true".

Como ya hemos dicho, todos los objetos insertados a travs de la opcin Plugin precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para

reproducirlos. En el campoOrigen 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. No ser
necesario en los archivos ms comunes de audio y vdeo, pero s si intentamos cargar un
archivo ms raro.

Para practicar puedes realizar el Ejercicio paso a paso Insertar un archivo de audio.

Ejercicio propuesto de la Unidad 10

Prueba evaluativa de la Unidad 10

En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar
documentos en ellas.

11.1. Introduccin
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las
pginas deben seguir un formato uniforme.
Adems del formato, es frecuente tener elementos que se repiten en cada pgina,
como el logo o el men.
La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar
sobre estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla
de tener pginas con una estructura basada en la estructura de otras ya creadas
previamente.
Las plantillas son una especie de copia de la pgina en la que van a estar basadas el
resto de pginas del sitio web, pero que incluyen la posibilidad de establecer unas
zonas editables yotras zonas que sern fijas, que no podrn ser modificadas.
No es posible modificar las propiedades de una pgina que est basada en una
plantilla, a excepcin del ttulo. Cuando se desea que existan pginas con, por ejemplo,
diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y
basar las pginas en una u otra plantilla, segn el color de fondo que se desee para cada
una.

Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas
basadas en ella. Esto nos puede ahorrar mucho trabajo.
Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro
de una carpeta llamada Templates.
Por supuesto, las plantillas las podremos usar siempre que sigamos trabajando con
Dreamweaver.

11.2. Crear plantillas

Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.
Una forma de crear una plantilla desde cero es a travs del panel Archivos, que se
puede abrir a travs del men Ventana, opcin Activos.

Una vez abierto el panel hay que seleccionar el botn

, para poder trabajar con las

plantillas.
Los botones inferiores del panel Activos

son similares a los del

panel Estilos CSS.

El nico botn diferente es el primero, que en este caso sirve para actualizar la lista, el
resto permiten crear una nueva plantilla,editar una plantilla seleccionada en la lista,
o eliminarla.

Para crear una nueva plantilla hay que pulsar sobre el botn

. Si el botn est

desactivado, pulsa con el botn derecho del ratn sobre el rea de plantilla y elige Nueva
Plantilla).
Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que
es posible cambiarle el Nombre pulsando previamente sobre l.
Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn
Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn

.
.

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se
crea automticamente.
Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo,
y despus guardarlo como plantilla a travs del men Archivo, opcin Guardar como
plantilla.

Cuando se pulsa dicha opcin, aparece una ventana como la de la imagen.

En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a
travs del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se
va a guardar.
Al guardar la plantilla la pgina cambia de carpeta, a Templates, como ya hemos dicho.
Si contena enlaces o imgenes se nos ofrecer la opcin de Actualizar vnculos. Si lo
hacemos, la plantilla se ver con normalidad y podremos emplearla para crear pginas en
cualquier carpeta. Si no lo hacemos, la plantilla se mostrar sin las imgenes u hojas de

estilo, ya que la ruta no ser la correcta, y slo nos servir para crear pginas en la misma
carpeta que el archivo desde el que creamos la plantilla.
Ahora solo nos quedara cambiar los elementos variables por regiones editables.

11.3. Establecer regiones editables en una plantilla

Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden
modificar.
Es necesario establecer las zonas para que puedan ser editadas en las pginas que se
basen en dicha plantilla.
Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a
travs del panel Activos, pulsando dos veces sobre ella, o estando seleccionada
pulsando sobre el botn

como ya hemos visto.

Una vez abierta la plantilla es posible establecer sus propiedades a travs de la

ventana Propiedades de la pgina.
Como recordars, para abrir esta ventana puedes:
Pulsar la combinacin de teclas Ctrl + J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Pulsar con el botn derecho sobre el documento abierto en Dreamweaver, y en el
men contextual que aparece seleccionar la opcin Propiedades de la pgina.
Para insertar una regin editable hay que situar el puntero en el lugar en el que se
desea insertar, y despus dirigirse al men Insertar, Objetos de plantilla, opcin Regin
editable, o pulsar la combinacin de teclas Ctrl + Alt + V.
En la nueva ventana hay que establecer un Nombre para la regin editable.
Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.
Posteriormente puede modificarse el nombre a travs del inspector de propiedades de
la regin editable.

Las zonas editables aparecen representadas en Dreamweaver como un recuadro con

una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable.

Dentro del recuadro es posible insertar objetos, que aparecern por defecto en aquellos
documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona
editable, podrn ser modificados en las pginas.
La regin editable se ajustar al tamao del contenido. Por lo que aunque parezca
pequea cuando an no tiene nada no limitar lo que queramos introducir.
Todos los objetos que se encuentren fuera de estas zonas editables aparecern
tambin en las pginas, pero no podrn ser modificados.
En este caso, la imagen con el logotipo de aulaClic aparecera en todas las pginas que
se basaran en esta plantilla, mientras que todo lo que insertramos dentro de la zona
editableFormularioCorreoElectronico podra ser modificado.

11.4. Basar pginas en una plantilla

La opcin ms simple, consiste en elegir una Pgina de plantilla al crear un Nuevo
documento.

Como vemos en la imagen anterior, al seleccionar la categora Pgina de plantilla,

aparece un listado con los sitios. Seleccionando el que queramos, aparecer otro listado
con las plantillas del sitio, y una vista previa de la seleccionada a la derecha.
Bastara con seleccionar la que queramos utilizar y pulsar en Crear. El nuevo
documento estar basado en la plantilla, y solo tendremos que modificar las regiones
editables.

El uso de las plantillas puede resultar un poco ms complicado si queremos aplicar la

plantilla sobre un documento existente. Vamos a ver cmo basar una pgina vaca en una
plantilla, ya que por el hecho de estar vaca resulta ms sencillo.
Una vez abierto el documento, hay que dirigirse al men Modificar, Plantillas,
opcin Aplicar plantilla a pgina.

Es preferible que antes de hacer esto nos aseguremos de que el sitio que se encuentra
abierto en Dreamweaver es el mismo en el que vamos a guardar el documento, y el
mismo en el que se encuentra la plantilla en la que queremos basarlo.

Despus de pulsar sobre la opcin Aplicar plantilla a pgina aparece una ventana
como la siguiente, en la que hay que seleccionar una de las plantillas de la
lista Plantillas: del sitio.

Es recomendable activar la casilla Actualizar pgina cuando cambie la plantilla, para

que la pgina se actualice automticamente en el caso de modificar la plantilla en la que
se basa.
A pesar de estar trabajando sobre un documento vaco, es posible que al aplicar la
plantilla aparezcan nombres de regiones no coincidentes entre el documento en blanco y
la plantilla. En ese caso se muestra una ventana como la siguiente.

En ella hay que establecer una correspondencia entre el nombre de la regin del
documento vaco con el nombre de alguna regin de la plantilla.
En este ejemplo, la regin del documento vaco que no coincida con el nombre de
ninguna regin de la plantilla era la regin Document body.

A travs de Mover contenido a la nueva regin: se puede seleccionar una regin de

la plantilla, para establecer as la correspondencia que se necesitaba.
Despus de establecer las correspondencias necesarias, se carga la plantilla en el
documento vaco.

Observa que la pgina aparece enmarcada en amarillo, y en la esquina superior

derecha nos informa de que se emplea la plantilla ejemplo.
En este caso no es posible cambiar el color de fondo, que est definido en la plantilla,
pero s es posible cambiar todos los elementos de texto y el formulario, ya que se
encuentran dentro de una zona definida en la plantilla como editable.
S se podra cambiar el estilo del texto, insertar ms elementos de formulario, tablas,
etc.
Para que una pgina deje de estar basada en una plantilla hay que dirigirse al
men Modificar, Plantillas, opcin Separar de plantilla.
Cuando se separa una pgina de una plantilla, el contenido de la pgina sigue siendo el
mismo que el que tena cuando an estaba basada en la plantilla, pero sin las
restricciones establecidas por la plantilla, ni las ventajas al editar la plantilla original.

Para practicar los distintos aspectos explicados en el tema puedes realizar

el Ejercicio paso a paso Crear una plantilla.

Ejercicio propuesto de la Unidad 11

Prueba evaluativa de la Unidad 11

Unidad 12. HTML desde Dreamweaver (I)

En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver
para trabajar sobre el propio cdigo HTML, y no nicamente sobre el editor grfico de la
vista diseo.
En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar
algunos reajustes directamente en el cdigo estando dentro de Dreamweaver.
En muchas ocasiones veremos que para hacer pequeas correcciones, nos resultar
ms cmodo y rpido si lo hacemos directamente desde el cdigo que recurriendo a
asistentes.

12.1. Etiquetas
Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y fin de
cada elemento de la pgina Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo
HTML de una pgina para darle un ttulo. Consista simplemente en escribir el ttulo
deseado entre las etiquetas <title> y </title>.
Las etiquetas consisten en poner un mismo comando entre los smbolos < y >. La
primera etiqueta indica inicio, y la segunda, que incluye el smbolo /, indica final y se suele
denominar etiqueta de cierre.
Las etiquetas disponen de atributos que permiten definir caractersticas del elemento
sobre el que actan, incluyendo cierto cdigo dentro de la etiqueta.
Por ejemplo, un prrafo se inserta entre las etiquetas <p> y </p>, pero es posible
cambiar sus caractersticas predeterminadas, como puede ser asignarle una clase de
estilo CSS. Para ello, a la etiqueta de apertura anterior habra que aadir el atributo y su
valor, quedando <p class="miclase"> y </p>.

Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo,
un May + INTRO dentro del cdigo HTML equivale a la etiqueta <br>. Realmente estas
etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el
estndar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de
lnea anterior se escribira <br />. Otras etiquetas que se cierran sobre s mismas son las
imgenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.

Dreamweaver inserta automticamente las etiquetas necesarias para construir la

pgina con la apariencia y contenido definidos en el editor grfico, pero tambin ofrece
otras posibilidades para trabajar directamente sobre el cdigo.

12.2. Entidades HTML

HTML tambin dispone de cdigos especiales para representar caracteres
especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino
internacional, signos de puntuacin o tipogrficos y smbolos especiales que presenten un
problema en HTML como < >, que podran malinterpretarse por el inicio de una etiqueta.

Estos cdigos pueden mostrarse como un cdigo numrico o con un nombre de

entidad. Ambos mtodos son igualmente aceptables, pero ambos debern ir encerrados
entre los smbolos & y ;.
De este modo, < se escribir como &lt; o &#60;
Usar este mtodo es muy aconsejable, de esta forma los navegadores que estn
configurados para visualizar juegos de caracteres que no contengan letras como la o
la podrn ver el sitio correctamente. En caso contrario estos caracteres se mostraran de
forma extraa si no elegimos la codificacin adecuada.

En el tema 4 vimos que podamos escribir estos caracteres utilizando el men Insertar.
Ahora te mostraremos otra forma para escribir caracteres que no se incluan en el listado
de Dreamweaver y que podrs insertar escribiendo sus entidades en la vista de Cdigo.
Aqu tienes una tabla de los caracteres ms utilizados con sus Entidades HTML
numrica y de nombre de entidad:

Carcter

Entidad con
nombre

Entidad
numrica

Carcter

Entidad con
nombre

Entidad
numrica

&aacute;

&#225;

&Aacute;

&#193;

&eacute;

&#233;

&Eacute;

&#201;

&iacute;

&#237;

&Iacute;

&#205;

&oacute;

&#243;

&Oacute;

&#211;

&uacute;

&#250;

&Uacute;

&#218;

&uuml;

&#252;

&Uuml;

&#220;

&ntide;

&#241;

&Ntilde;

&#209;

&iquest;

&#191;

&alpha;

&#945;

&iexc;

&#161;

&beta;

&#946;

&ndash;

&#8211;

&copy;

&#169;

&rarr;

&#8594;

&reg;

&#174;

&larr;

&#8592;

&euro;

&#8364;

<

&lt;

&#60;

>

&gt;

&#62;

&

&amp;

&#38;

espacio

&nbsp;

&#160;

Si escribes ms de un espacio en el cdigo de Dreamweaver, cuando lo visualices

en un Navegador slo veras uno. Esto es debido a que en HTML las palabras separadas
por ms de un espacio se visualizan separadas de uno.
Para saltarte esta norma puedes escribir tantas veces como quieras &nbsp; y se
visualizarn tantos espacios como elementos de entidad hayas introducido.
Antes de abusar de este tipo de espacios, piensa si no convendra ms aadirle margin
o padding CSS.

Si quieres ver una tabla con el listado de todos los caracteres especiales visita el
avanzado de Listado de Entidades HTML

12.3. El inspector de cdigo

Recordars que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista
Diseo, vista Cdigo y vista Dividir (Cdigo y Diseo).
Todas estas vistas se aplican directamente sobre la ventana del documento.

Pero existe un panel que permite visualizar el cdigo independientemente de la vista

aplicada en el documento. Este panel es el llamado Inspector de cdigo y puede abrirse
a travs del menVentana, opcin Inspector de cdigo. Tambin podemos abrir
el Inspector de cdigo pulsando F10.

El Inspector de cdigo muestra el cdigo HTML de la misma forma que lo hacen

la vista Cdigo y la vista Dividir (Cdigo y Diseo), pero puede resultar ms cmodo
trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se
limita slo al espacio del documento. Por ejemplo, si disponemos de una pantalla
panormica, podemos tener a un lado el diseo y a otro el cdigo.
Pg. 12.3

12.4. Completar las etiquetas

Una de las posibilidades que ofrece Dreamweaver a la hora de trabajar directamente
sobre el cdigo HTML es la de completar las etiquetas mientras se van introduciendo. Esto
se produce tanto en el Inspector de cdigo como en las vistas de cdigo.
Imaginemos que deseamos introducir en nuestra pgina un enlace a la pgina de
aulaClic, que ha de abrirse en una ventana nueva. En este caso deberamos introducir la
etiqueta <a href="http://www.aulaclic.es" target="_blank">Visitar aulaClic</a>, con lo
que obtendramos el siguiente enlace:
Visitar aulaClic

Vamos a ver cmo funciona el mecanismo de completar etiquetas a travs de este

ejemplo.
Las etiquetas se completan siempre de izquierda a derecha, por lo que lo primero
que debemos insertar es el smbolo < .
Despus de escribir nosotros este smbolo, Dreamweaver mostrar una lista con todos
los comandos que pueden aparecer despus l. Para elegir uno de ellos hay que pulsar
dos veces sobre l con el puntero del ratn, o bien, estando seleccionado, pulsar INTRO.
En este caso tenemos que elegir a, despus de lo cual desaparecer la lista. En el
cdigo tendremos

Podemos continuar escribiendo el nombre de la etiqueta, o seleccionarla de la lista

cuando sea visible. Si se trata de la seleccionada en azul, basta con pulsar la tecla Intro.
En este caso, como la etiqueta de enlace slo tiene una letra, no necesitamos de esta
opcin.

Despus de <a hay que introducir un espacio en blanco. Nada ms teclear el espacio
en blanco aparecer otra lista de elementos, que son los que pueden escribirse despus
de la a, los atributos de la etiqueta.

Tenemos que elegir href. Para hacerlo, podemos optar por seleccionarlo de la lista con
doble clic, pulsar h (para que se seleccione) + Intro (para introducirlo) o escribirlo.
Una vez seleccionado, el cdigo quedar como:

En el caso de atributos en los que hay que indicar la ubicacin de un archivo, nos
aparecer la opcin Examinar... que abre el cuadro de dilogo para elegir el archivo.
Tambin podemos continuar escribiendo la direccin.

En lugar de cerrar ya la etiqueta con el smbolo

>, queremos primero indicar que el

vnculo ha de abrirse en una ventana nueva. Para ello tenemos que introducir un nuevo
espacio, para que se nos muestre otra lista.

En ella hay que elegir target. Entonces el cursor aparecer entre las nuevas comillas
dobles, y se mostrar una lista en la que es posible elegir el destino del enlace. Cuando
un atributo puede tomar unos valores concretos, estos nos aparecern como opciones.

Como queremos que el enlace se abra en una pgina nueva, seleccionamos _blank.
Cuando hayamos completado los atributos, cerramos la etiqueta de apertura con el
smbolo >

Ahora podemos introducir el contenido de la etiqueta. Pero es recomendable cerrarla ya

y luego introducir el contenido, para que no se nos olvide. Para cerrar la etiqueta basta
con escribir </ y automticamente se completar la etiqueta de cierre (</a>).

Tambin podemos configurar Dreamweaver para que introduzca la etiqueta de cierre al

cerrar

la

de

apertura.

Esto

lo

hacemos

desde

men Edicin Preferencias Sugerencias para el cdigo Cerrar etiquetas.

Ahora podemos completar la etiqueta con el texto que servir de enlace.

el

12.5. Contraer y expandir cdigo

Una de las ventajas de Dreamweaver es la posibilidad de seleccionar fragmentos de
cdigo y contraerlos para facilitar su legibilidad.
Por ejemplo, podemos seleccionar el trozo de cdigo correspondiente a una tabla,
como se ve en la siguiente imagen, aunque podemos seleccionar cualquier cdigo:

Con el texto seleccionado, pulsamos en uno de los iconos

lnea o el icono Contraer seleccin

junto a los nmeros de

. El ejemplo anterior se contraera quedando:

De esta forma podramos ocultar el cdigo que no nos interesa y dejar el resto del
cdigo ms legible.
Para volver a la situacin inicial basta hacer clic en el icono expandir

, o en el

signo + que aparece al lado del cdigo contrado.

Otro botn que nos ayudar ser el icono Seleccionar etiqueta padre

. Este botn

selecciona toda la etiqueta que contiene al punto de insercin. A medida que los sigamos
pulsando, ir seleccionado las etiquetas en orden jerrquico, aumentando la seleccin.

El icono contraer etiqueta completa

contrae la etiqueta que contiene al punto de

insercin, sin necesidad de seleccionarla primero.

Una pega que encontramos es que esto no se guarda, y la prxima vez que abramos el
documento aparecer todo el cdigo expandido.

12.6. Errores en el cdigo

Al volver al modo grfico es posible ver si hay algunos errores en el cdigo HTML,
como puede ser una etiqueta incompleta. El cdigo errneo aparecer en amarillo:

Si volvemos al cdigo podremos encontrar el error fcilmente. Para que los errores se
resalten, debe de estar pulsado el icono

En el ejemplo anterior nos hemos comido el cierre de la etiqueta de apertura.

Otra forma de detectar errores en el cdigo es fijndonos en los colores. Por ejemplo, si
no hemos cerrado una etiqueta o las comillas de un atributo, veremos que los colores del
cdigo no son como deberan.
Pero ten en cuenta que no todos los errores son visibles a simple vista, por ejemplo
escribir mal el nombre de un atributo.
Para comprobar la compatibilidad de la pgina web que hayas creado puedes utilizar el
desplegable Comprobar pgina
compatibilidad con navegadores:

. Despligalo y haz clic sobre la opcin Comprobar

Se

abrir

la

ventana

de

resultados

con

todos

los

posibles problemas

incompatibilidades que se presenten para cada uno de los navegadores y sus respectivas
versiones.
Si haces clic en la opcin Configuracin se abrir un cuadro de dilogo como ste:

Donde podrs indicar que navegadores y a partir de qu versin quieres que se tengan
en cuenta cuando Dreamweaver realiza la comprobacin de compatibilidad.

12.7. Buscar y reemplazar

En ocasiones es posible querer buscar dentro de un sitio web todas aquellas pginas
que contengan un texto en concreto, una etiqueta en concreto, o parte de estos
elementos. Tal vez los queramos buscar porque deseemos trabajar sobre esas pginas y
no recordbamos cul de ellas era, o tal vez porque queramos cambiar ese texto o
etiqueta por otros.

Imaginemos que una persona ha creado un sitio web, en el que la mayora de las
pginas tiene al comienzo un texto que hace referencia al nombre del sitio, por ejemplo,
todas esas pginas comienzan con PerrosGatos, y tiene la seguridad de que no existe
ese texto en ninguna parte de las pginas que no sea al comienzo. Ahora imaginemos que
esta persona ha creado una imagen de un perro y un gato, y que quiere cambiar en todas
las pginas que contienen el texto PerrosGatos dicho texto por la imagen.
En este caso no es necesario que abra una por una todas las pginas que contienen
dicho texto, ni tampoco que modifique una por una dichas pginas para cambiar el texto
por la imagen. Para realizar esta tarea resulta ms sencillo utilizar la herramienta
de Buscar y reemplazar.
Puedes abrirla a travs del men Edicin, opcin Buscar y reemplazar, o
pulsando Ctrl + F.

Mediante Buscar en puede especificarse en qu documentos buscar. Podemos buscar

slo en el documento actual, en todo el sitio (sitio actual completo), o en los archivos
seleccionadosdel sitio (habiendo seleccionado dichos archivos previamente), en los
abiertos o en una carpeta en concreto..
A travs de Buscar se especifica si hay que buscarlo en el texto (en la ventana
diseo), o en el cdigo HTML (cdigo fuente). Tambin podemos emplear el texto
avanzado, por ejemplo si queremos buscar slo texto en determinadas etiquetas,
o etiqueta especfica, que nos permite, por ejemplo, buscar etiquetas de determinado
tipo y que tengan determinado atributo.
Junto a la lista de opciones de Buscar, aparece un cuadro de texto en el que hay que
indicar el texto o el cdigo que se desea buscar.

En Reemplazar hay que especificar el texto o el cdigo por el que se desea cambiar el
texto o cdigo buscado. Si queremos borrar basta con dejarlo vaco. Si no vamos a
reemplazar no es necesario.
En Opciones encontramos las opciones de bsqueda: si el texto debe coincidir
en maysculas y minsculas, si se omitirn los espacios en blanco, si la palabra a
buscar debe ser unapalabra completa o puede formar parte de otra, o si el texto
introducido es un patrn de expresin regular.
El reemplazo puede hacerse de varias formas, siempre a travs de los botones de la
derecha de la ventana. Una de ellas es buscar uno por uno cada uno de los documentos
que contengan el cdigo o texto a buscar, y reemplazar cuando se desee. Para ello se
utilizan los botones Buscar sig. y Reemplazar.
Si se desean buscar todos los documentos que contengan dicho texto o cdigo, y
reemplazar en todos ellos, se utilizan los botones Buscar todos y Reemp. todos. O
podemos reemplazarlos todos directamente.
Cuando se utiliza la opcin Buscar sig., se abre la pgina en la que se encuentra el
texto coincidente, resaltando en el cdigo fuente la lnea en la que ste se encuentra. De
este modo podemos decidir uno por uno los cambios a realizar. Cuando estemos seguros
de querer reemplazar pulsaremos sobre Reemplazar, y cuando no deseemos reemplazar
volveremos a pulsar sobre Buscar sig..
Cuando se utiliza la opcin Buscar todos se cierra la ventana de Buscar y
reemplazar y se abre un nuevo panel en el que aparecen todos los documentos en el que
coincide el texto o el cdigo buscado.
Pulsando sobre el botn

vuelve a abrirse la ventana de Buscar y reemplazar.

Desde dicha ventana podemos reemplazar en los documentos encontrados, uno por uno,
con el botnReemplazar, o bien reemplazar directamente en todos los documento
encontrados, pulsando sobre el botn Reemp. todos.
En el panel, cuando se haya reemplazado en algn documento, ste volver a aparecer
en la lista junto con un crculo verde, que indica que ya ha sufrido reemplazo.

En ocasiones podemos equivocarnos, al buscar y reemplazar texto o cdigo errneos.

Hay que tener mucho cuidado al utilizar esta herramienta, ya que no es posible deshacer
los cambios en los documentos que estn cerrados durante la bsqueda y el reemplazo.
En el ejemplo anterior, la persona quera buscar el texto PerrosGatos, y reemplazarlo
por una imagen. En este caso concreto, lo que se desea sustituir es texto por el cdigo de
una imagen, por lo que en Buscar no podramos elegir la opcin Texto, habra que elegir
la opcin Cdigo fuente.
En Reemplazar con, habra que especificar la etiqueta HTML completa para insertar la
imagen. En este caso la etiqueta sera <img scr="imagenes/logo_animales.gif"
alt="PerrosGatos" />, teniendo en cuenta que la imagen se llama logo_animales.gif y
que se encuentra dentro del sitio en la carpeta imagenes.
Como el texto a reemplazar siempre est escrito igual, hemos marcado la
opcin Coincidir Maysculas y Minsculas para asegurarnos de que si en otra parte
aparece el texto perrosgatos, no sea reemplazado.

Existen mtodos de bsqueda mucho ms precisos que los que hemos visto, si quieres
conocerlos visita el avanzado de Expresiones Regulares

Para practicar los distintos aspectos explicados en el tema puedes realizar

el Ejercicio paso a paso Buscar y reemplazar.

Si quieres ver otros mtodos de bsqueda relacionados con las etiquetas del cdigo
visita el avanzado de Bsqueda en Etiquetas

Ejercicio propuesto de la Unidad 12

Prueba evaluativa de la Unidad 12

Unidad 13. Otros elementos (I)

Vamos a ver una serie de elementos que suelen aparecer en las pginas web, como
pueden ser las marquesinas, las reglas horizontales y la fecha.

13.1. Marquesinas

Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que
pueden desplazarse de un lado a otro de la ventana en forma de lnea. A continuacin
tienes un ejemplo de marquesina.

Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es

necesario hacerlo a travs del cdigo.
Para crear una marquesina hay que insertar las etiquetas <marquee> y </marquee>.
Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en
la marquesina.
Tambin es posible especificar algunas caractersticas de la marquesina. La
marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo
deseas puedes hacer que estas propiedades varen. Por ejemplo, si pones <marquee
behavior="slide">, la marquesina har el desplazamiento una sola vez y se detendr.
Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de
derecha a izquierda, la marquesina se desplazar de lado a lado de la ventana, como si

rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo cdigo puedes ver
a continuacin:

<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif" alt="PerrosGatos" />
</marquee>

No conviene abusar de estos elementos, que ya que distraen la atencin del visitante.
Cada vez se emplea menos este elemento, ya que si se quiere animar texto, se suele
utilizar Flash que nos ofrece mucha ms personalizacin.

13.2. 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 cundo 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, ya que puede dar
sensacin de abandono. No obstante hay contenidos en los que es imprescindible
informar al usuario de cuando fue redactado, sobre todo aquellos que se refieren a temas
(como informtica) que pueden haber quedado obsoletos.
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.

Para practicar puedes realizar el Ejercicio paso a paso Insertar fecha .

13.3. Regla horizontal

El elemento que suele utilizarse para separar secciones dentro de una misma pgina es
la regla horizontal. Una regla horizontal no es ms que una lnea que cruza
horizontalmente al elemento que la contiene.

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.

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

13.4. Cdigo de otras pginas

En ocasiones nos gustara incluir en nuestras pginas cosas que hemos visto en otras
pginas que estn publicadas en Internet.
Por una parte, tenemos pginas que nos ofrecen ese cdigo para que lo incluyamos en
nuestra web, como banners o contenido multimedia, como pueden ser los vdeos del
portal youTube.
En la mayora de estos casos, lo nico que tendremos que hacer ser copiar ese cdigo
y pegarlo en nuestro cdigo fuente, en el lugar que queramos mostrar el elemento.

En otras ocasiones puede que no se trate de un elemento pensado para que lo

copiemos. Simplemente es una parte de una pgina que nos gustara tener o que
sentimos curiosidad por cmo estar hecho.
En estos casos, lo mejor es ver el cdigo fuente. Puedes visualizar el cdigo fuente de
dichas

pginas con

cualquier

navegador,

normalmente

travs

del

men Ver opcin Cdigo fuente, o bien mostrar el men contextual de la pgina pulsando
con el botn derecho sobre ella, y pulsando despus sobre la opcin Ver cdigo fuente.
De este modo podemos ver su cdigo y emplearlo en nuestras pginas.
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 rutinasJavaScript.

Por ejemplo, pulsa aqu para abrir una pgina en la que aparece un efecto en la barra
de estado del navegador, que muestra una marquesina, cuyo texto es CDIGO
JAVASCRIPT - Curso Dreamweaver CS5 - aulaClic .

Si miras el cdigo fuente de esa pgina podrs ver el cdigo javascript que utiliza para
conseguir ese efecto en la barra de estado. El cdigo es el siguiente:

<script language="JavaScript">
<!--

var mensaje="
aulaClic ";

CDIGO

JAVASCRIPT

Curso

Dreamweaver

CS5

var longitud=mensaje.length;
var ancho=150;
var pos=1-ancho;

function scrollBarraEstado() {
pos++;
var scroller="";
if (pos==longitud) {
pos=1-ancho;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+mensaje.substring(0,ancho-i+1);

} else {
scroller=scroller+mensaje.substring(pos,ancho+pos);
}
window.status = scroller;

setTimeout("scrollBarraEstado() ",200);
}
//-->
</script>

Dicho cdigo tiene que ir entre las etiquetas <head> y </head>, y aadir onload ="
scrollBarraEstado() ;return true;" dentro de la etiqueta <body>, de modo que sta
queda del siguiente modo:

<body onload ="scrollBarraEstado(); return true;">

Este cdigo no es demasiado complicado, y podras casi sin problemas aadirlo a tus
pginas, para que mostrasen los mensajes que quisieras.
Pero en muchas ocasiones puede costar entender el cdigo, sobre todo si no se tienen
nociones de ningn lenguaje de programacin. Si no entiendes el cdigo, puedes cometer
el error de copiar cdigo JavaScript errneo, copiarlo de forma incompleta, insertarlo en
una zona incorrecta del cdigo html, etc.
Lo importante que tienes que saber en este momento sobre las funciones JavaScript es
que aparecen entre las lneas

<head> ... <script language="JavaScript">

<!--

//--> </script> ... </head>

Ejercicio propuesto de la Unidad 13

Prueba evaluativa de la Unidad 13

Pg. 13.3

Unidad 14. Capas (I)

Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder
trabajar con ellas y aplicarles algn comportamiento.

14.1. 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.
sta es una capa con borde verde
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
estrechas o agrandas la ventana del navegador, vers 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

sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina

tambin la capa.

Las capas, combinadas con JavaScript pueden dotar a una pgina de verdadero
dinamismo.

14.2. Insertar una capa

Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto
de diseo, donde encontramos Etiqueta Div (divisin simple) y Div PA (Capa con
Posicin Absoluta). Para lo que vamos a comentar, nos quedamos con la segunda opcin.

Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que
seleccionarla primero.
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 sta, 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 opcinElementos PA. Tambin puedes abrir el panel pulsando F2.

En dicho panel aparecen los nombres de todas las capas que existen en el documento
actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el
panel.

4.3. Formato de una capa

Las propiedades de la capa se especifican a travs de su inspector de propiedades.

Elemento CSS-P es el nombre o ID de la capa. Desde aqu podemos asignarle otro ID,
pero si lo hacemos perder las propiedades que hayamos indicado para este elemento. Si
lo que queremos es cambiar el ID por otro ms descriptivo, podemos 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.
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 queremos que la posicin se tome con respecto al elemento padre, pero este no
tiene posicionamiento absoluto, podemos 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 cambiamos las propiedades left, top, right o bottom.
Truco: Si queremos centrar una capa con respecto al elemento que la contiene
podemos hacerlo empleando CSS. Para ello, en Izq. ponemos 50%. Para que el lado
izquierdo cuente a partir del centro, le damos un margen izquierdo negativo que sea la
mitad del ancho de la capa. En la imagen anterior, como el ancho es 200px, aadiramos
por CSS margin-left: -100px;.
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:
o

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

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

visible. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. ste s cabe.
scroll. ste s cabe.

Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa.
Todo lo que hemos definido de la capa, aparece como propiedades CSS en la cabecera
de la pgina, utilizando como selector el ID o nombre de la capa. Por eso, si queremos
emplear una capa en la misma posicin en distintas pginas, podemos exportar ese estilo
a una hoja de estilos, y en cada pgina crear una capa y darle el mismo ID. Recuerda que
el ID ha de ser nico en la pgina, pero puede repetirse en pginas distintas.
Podemos editar estas propiedades con el editor CSS en la categora Posicin. Ah
vers, por ejemplo, que podemos indicar la distancia con el lado derecho (right) en vez
del izquierdo como hacamos hasta ahora. O la distancia con el lado inferior (bottom).
Aunque podemos hacerlo de varias formas, lo recomendable es indicar la distancia con
uno de los lados y el ancho, y la distancia con el lado superior o inferior y el alto.

Ejercicio propuesto de la Unidad 14

Prueba evaluativa de la Unidad 14

Unidad 15. Comportamientos (I)

En este tema vamos a ver las caractersticas bsicas de los comportamientos, as
como un par de ejemplos de entre sus posibles aplicaciones.

15.1. Introduccin
Los comportamientos son acciones que suceden cuando los usuarios realizan
algn evento sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar
sobre un texto, hacer doble clic sobre un mapa de imagen, etc.

Los comportamientos no existen como cdigo HTML, se programan en JavaScript.

Dreamweaver permite insertarlos a travs del panel Comportamientos, por lo que no es
necesario escribir ninguna lnea de cdigo JavaScript para programarlos.
La imagen que aparece a continuacin tiene asociado un comportamiento. Sita el
puntero sobre ella para ver qu es lo que ocurre.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este
tipo de comportamiento lo veremos ms adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de
sustitucin y las barras de navegacin, que ya estn predefinidos, por lo que no es
necesario

introducir

este

conjunto

de

comportamientos

travs

del

panel Comportamientos.
Para validar formularios ya viste algunas caractersticas del panel Comportamientos.
Vamos a recordar las que necesitamos para poder insertar comportamientos ms tarde.
El

panel Comportamientos se

puede

abrir

travs

del

men Ventana,

opcin Comportamientos. Tambin pulsando Mays+F4.

En este panel hay que 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.

15.2. Insertar un comportamiento

Lo primero que hay que hacer es asignar un ID al que afectar el comportamiento. Esto
lo podemos hacer desde el inspector de propiedades.
Despus seleccionamos 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.

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.

En este caso la accin Validar formulario no puede seleccionarse porque no existe

ningn formulario en la pgina.
Despus de elegir alguna accin, el comportamiento correspondiente aparece en el
panel Comportamientos. En este caso se han insertado dos comportamientos.
Como puedes ver, cada comportamiento tiene asociados un evento y una accin.
Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se
debe de realizar la accin.

Para

eliminar

un

comportamiento,

panel Comportamientos y pulsar sobre el botn

hay

que

seleccionarlo

en

el

. Tambin es posible cambiar el orden

de los comportamientos aplicados a un objeto, seleccionndolos y ordenndolos mediante

los botones

5.3. 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,
ero podemos hacerlo con cualquier elemento que tenga un ID asignado. Lo que hace este
comportamiento es alternar entre las propiedades de visibilidad visible y hidden.

Al principio del tema tenamos un ejemplo de

este tipo. Vamos a ver qu eventos y acciones hay que establecer para que se produzca
dicho comportamiento.
Despus de seleccionar el elemento que producir el evento (en se ejemplo, la imagen
del gatito) 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.

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 gatomesno se le ha aplicado ninguna visibilidad diferente, ya que no se
desea que vare al producirse el evento.
Si se desea eliminar una visibilidad establecida para alguna de las capas, simplemente
hay que volver a pulsar sobre el botn correspondiente a la visibilidad que ya tiene
aplicada. Por ejemplo, para eliminar la visibilidad aplicada a la capa gatosemana habra
que volver a pulsar sobre el botn Mostrar.
Hay que tener en cuenta en este caso que lo que se desea es que al situar el puntero
sobre la imagen, se muestre la capa, y que cuando el puntero deje de estar sobre la
imagen, la capa se vuelva a ocultar. Para ello es necesario insertar dos comportamientos
con la accin Mostrar-Ocultar 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).

15.4. Llamar JavaScript

Otro de los comportamientos que puede aplicarse sobre algn objeto es el de Llamar
Javascript. Este comportamiento permite insertar cdigo JavaScript dentro del cdigo del
documento.
Por ejemplo, es posible hacer que se cierre la ventana del navegador al pulsar sobre un
objeto. Para ello hay que insertar la lnea JavaScript "window.close();".
Al igual que para el ejemplo de las capas, lo primero que hay que hacer es seleccionar
el objeto sobre el que se desea aplicar el comportamiento. Seguidamente hay que
seleccionar la accinLlamar Javascript a travs del botn

Entonces aparece una nueva ventana en la que hay que introducir la lnea JavaScript.

Una vez insertado el comportamiento, en el panel Comportamientos hay que

establecer el evento onclick (al hacer clic) para que la llamada a JavaScript se produzca
al pulsar una vez sobre el objeto.

Pulsando dos veces sobre la accin vuelve a abrirse la ventana anterior, y es posible
modificar la lnea de cdigo.

Segn nuestras necesidades elegiremos un evento u otro. Puedes ver una descripcin
de cada evento en este avanzado:

Para practicar puedes realizar el Ejercicio paso a paso Crear comportamiento.

Ejercicio propuesto de la Unidad 15

Prueba evaluativa de la Unidad 15

P

Unidad 16. Comportamientos avanzados (I)

En el tema anterior vimos algunos de los comportamientos bsicos, en este tema
veremos otros comportamientos y veremos cmo utilizarlos y aprovecharnos de esta
caracterstica de Dreamweaver para crear diversas funcionalidades automticamente.

16.1. Mensajes emergentes

Este comportamiento te permitir crear avisos emergentes como en el siguiente
ejemplo.
Haz clic aqu.

Este comportamiento es til para poder enviar mensajes al usuario. Ten en cuenta que
no debers abusar de ellos, pues a la larga pueden resultar un poco incmodos, utilzalos
con un objetivo concreto y no porque quieras atraer la atencin del usuario. Mientras se
muestre el mensaje, la ventana del navegador quedar bloqueada.

Para crear un mensaje emergente debers seleccionar el elemento al cual ir asociado

el mensaje, en el ejemplo es un enlace de texto.
Una vez seleccionado ves al panel Comportamientos (Mayus + F4) pulsa el botn
y selecciona la opcin Mensaje emergente.
Se abrir el siguiente cuadro de dilogo:

Aqu debers introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando
hayas acabado y estar listo.
El mensaje se mostrar con un aspecto similar al siguiente (dependiendo del navegador
utilizado):

Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario

hace clic). Es ms intuitivo para el usuario que si, por ejemplo, asocias el mensaje a un
eventoonMouseOver (cuando se pase el ratn por encima) el usuario no sabr muy bien
porque se ha generado el mensaje de aviso. Y resultara muy molesto tener que ir
"esquivando" los enlaces por si aparecen mensajes emergentes.
En realidad no habr hecho ningn movimiento voluntario para recibir ese tipo de
respuesta.

Debido

esto

(el

estimulo-respuesta

que

espera

el

usuario),

el

evento onClick es el ms indicado para este caso.

6.2. Texto de la Barra de estado

El Texto de la Barra de Estado es un elemento muy utilizado a la hora de personalizar
una pgina web. Aunque no funciona en algunos navegadores.
Si observas esta barra cuando navegas vers que va cambiando su texto segn te
encuentres sobre un enlace o no. Normalmente, las pginas que no tratan la Barra de
Estado (por ejemplo, esta) no muestran ninguna informacin. nicamente cuando
posicionas el puntero sobre un enlace, el texto de la Barra cambia para mostrar la
direccin a la que ste se dirige.
Observa este ejemplo, si haces clic sobre l te llevar a la pgina principal de aulaClic.
Cambiar el Texto de la Barra de Estado significara modificar el texto que aparece en
ese momento cuando realizamos un evento sobre un elemento en particular. Por ejemplo:
aulaClic.es
Este comportamiento es a veces til para personalizar ms la pgina y mostrar
informacin que de otra forma no sera posible. Pero si ocultamos la direccin real a la
que apuntan los enlaces puede resultar molesto para muchos usuarios. De hecho, como
esto nos permite "engaar" al usuario, ya que podemos indicar una URL falsa cuando en
realidad le enviamos a otra, muchos navegadores impiden como medida de seguridad
cambiar el texto de la barra de estado, a no ser que el usuario lo habilite expresamente.

Para crear este comportamiento selecciona el elemento al cual quieres asociar este
comportamiento. Abre el panel Comportamientos (Mayus + F4) y pulsa el botn

Luego selecciona la opcin Establecer texto y haz clic en Establecer texto de la

barra de estado.

Aqu debers escribir el texto que quieres que aparezca en el cuadro Mensaje, luego
pulsa Aceptar y listos.

Dnde y cmo asociar el texto en una pgina? es sencillo. Una de las opciones que te
da este comportamiento es poder asociar un texto en concreto a la pgina en s.
Es

decir,

que

cuando

abras

una

pgina

se

muestre

inmediatamente

(y

permanentemente) un texto en la barra de estado. Eso es posible creando el mensaje

asociado al body de la pgina (para ello tendrs que insertar el comportamiento sin
seleccionar ningn elemento para que se asocie con toda la pgina) y lanzndolo en el
evento onLoad (en la carga del documento). De esta forma cuando se abra la pgina se
mostrar el mensaje en la barra de estado y permanecer all hasta que se produzca un
cambio (por ejemplo, que se posicione el cursor sobre un enlace).

Ahora veamos cmo debemos actuar al establecer texto para los enlaces. En este caso
ser necesario que introduzcamos dos comportamientos.
El primero, asociado al evento onMouseOver (cuando el ratn se encuentra encima)
que mostrar el mensaje que queramos.
El segundo deber ir asociado al evento onMouseOut (cuando el ratn deja de estar
encima) que deber limpiar la barra de estado para que recupere su estado anterior.
En el caso de que hubisemos establecido un mensaje para el body de la pgina, al
salir de un enlace (en el onMouseOut) deberemos volver a escribir ese mensaje para que
siga mostrndose.

En el caso de que la pgina no tuviese un mensaje personalizado, deja el

cuadro Mensaje en blanco para que la barra de estado recupere su estado natural.

Observa que si no estableces el segundo comportamiento, cuando posiciones el

ratn sobre el enlace (o imagen, prrafo..., da igual) el texto de la barra de
estado cambiar. Pero cuando el ratn deje de estar sobre el elemento no habr ninguna
orden para que el texto vuelva a cambiar y se mantendr fijo con el mensaje del anterior
comportamiento.

16.3. Carga previa de imgenes

Este comportamiento te ser muy til para mejorar la visualizacin de tus pginas web
en determinados casos.
Al cargar previamente las imgenes contenidas en la pgina obligamos al navegador a
descargar las imgenes con prioridad sobre el resto del documento.
As cuando la pgina finalmente se visualiza (porque ha terminado la carga) el usuario
ver la estructura completa de la pgina con las imgenes incluidas ya cargadas y
mostrndose.

Este mtodo se diferencia del tradicional en que si no establecemos este

comportamiento, la pgina se carga (slo texto) y se visualiza antes de que las imgenes
estn cargadas por completo, aunque respetando su hueco. Ten en cuenta que sta es la
opcin ms aconsejada en la mayora de los casos.
Una vez terminada esta carga, el navegador empieza la descarga de las imgenes. Por
lo que hay unos momentos en los que la pgina no se muestra tal y como fue concebida,
e incluso su estructura puede verse afectada si no se introdujeron los valores de altura y
anchura de las imgenes contenidas (el texto se dispondra sin tenerlas en cuenta hasta
que se descargasen).

Para evitar esto utilizaremos la Carga Previa de Imgenes.

Para ello deberemos abrir el panel Comportamientos (Mayus + F4) y hacer clic sobre
el botn

, selecciona, entonces, la opcin Carga previa de imgenes.

Se abrir el siguiente cuadro de dilogo:

Aqu debers incluir las imgenes que quieras que se carguen utilizando los
botones

, podrs indicar su ubicacin pulsando el botn Examinar.

Qu imgenes debemos de cargar? Aquellas que son imprescindibles en el diseo de

la pgina o pueden producir efectos no deseados. Por ejemplo, imaginemos que tenemos
un enlace como una imagen de fondo. Y mediante estilo CSS hemos hecho que cuando el
cursor est encima esa imagen cambie. Hemos de entender que las imgenes se cargan
cuando se necesitan. Por tanto, la imagen de fondo no se cargar hasta que no pasemos
el cursor sobre el enlace la primera vez. Esto puede provocar que durante un instante, al
poner el cursor la imagen desaparezca pero la de sustitucin an no se haya cargado. En
este caso, es conveniente precargar esa imagen.
La imagen de sustitucin que ya explicamos incluye la carga previa de imgenes.
Por su puesto, resulta contraproducente cargar imgenes que no vayamos a emplear.
Si cargas previamente imgenes muy pesadas, o demasiadas como para que el
navegador se detenga durante unos segundos mientras realiza la carga, es posible que el
usuario al ver que tu pgina tarda demasiado en cargarse la abandone.

16.4. Abrir nueva ventana del navegador

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te
ayudar a crear enlaces mucho ms personalizados.

Asociaremos este comportamiento normalmente a un enlace, o como mucho a una

imagen o un botn. Pero siempre lo haremos asociado al evento onClick de estos
elementos.
Otra opcin es asociarlo al evento onLoad del body para que cuando se cargue el
documento abra al mismo tiempo una nueva ventana que dirigiremos a la URL que
queramos.
En esencia este comportamiento es un creador de pop-ups o ventanas
emergentes, as que si el usuario dispone de un bloqueador es posible que no se pueda
llevar a cabo la apertura de la nueva ventana. De todas formas, no es nada recomendable
llenar nuestro sitio de estos elementos, salvo si realmente aportan informacin importante.
Pero veamos qu debemos hacer para poder abrir una ventana de este modo.
Primero seleccionaremos elemento asociado al comportamiento, si lo que queremos es
que se asocie al body de la pgina haremos clic en una rea vaca del documento.
Luego abre el panel Comportamientos (Mayus + F4) y pulsa el botn

para

desplegar la lista.
Selecciona la opcin Abrir ventana del navegador y vers el siguiente cuadro de
dilogo:

Veamos las opciones que podemos seleccionar aqu.

En Mostrar URL: escribiremos la URL de la pgina que queremos abrir.

En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos

especificar su tamao en pxeles.
El cuadro Nombre de la ventana: te permitir darle un nombre a la nueva ventana.
As, ms tarde, utilizando JavaScript, podramos referenciarnos a ella utilizando este
nombre.
En Atributos: marca las casillas para que los elementos como la barra de estado o
la barra de mens aparezcan en la nueva ventana.
Si dejas todos desmarcados, la ventana se abrir sin ningn elemento y aparecer
nicamente rodeada de un marco de pgina.

16.4. Abrir nueva ventana del navegador

Este comportamiento, aunque a primera vista creas que no sirva para mucho, te
ayudar a crear enlaces mucho ms personalizados.
Asociaremos este comportamiento normalmente a un enlace, o como mucho a una
imagen o un botn. Pero siempre lo haremos asociado al evento onClick de estos
elementos.
Otra opcin es asociarlo al evento onLoad del body para que cuando se cargue el
documento abra al mismo tiempo una nueva ventana que dirigiremos a la URL que
queramos.
En esencia este comportamiento es un creador de pop-ups o ventanas
emergentes, as que si el usuario dispone de un bloqueador es posible que no se pueda
llevar a cabo la apertura de la nueva ventana. De todas formas, no es nada recomendable
llenar nuestro sitio de estos elementos, salvo si realmente aportan informacin importante.
Pero veamos qu debemos hacer para poder abrir una ventana de este modo.
Primero seleccionaremos elemento asociado al comportamiento, si lo que queremos es
que se asocie al body de la pgina haremos clic en una rea vaca del documento.
Luego abre el panel Comportamientos (Mayus + F4) y pulsa el botn

para

desplegar la lista.
Selecciona la opcin Abrir ventana del navegador y vers el siguiente cuadro de
dilogo:

Veamos las opciones que podemos seleccionar aqu.

En Mostrar URL: escribiremos la URL de la pgina que queremos abrir.
En los cuadros de texto de Ancho de la ventana: y Alto de la ventana: podremos
especificar su tamao en pxeles.
El cuadro Nombre de la ventana: te permitir darle un nombre a la nueva ventana.
As, ms tarde, utilizando JavaScript, podramos referenciarnos a ella utilizando este
nombre.
En Atributos: marca las casillas para que los elementos como la barra de estado o
la barra de mens aparezcan en la nueva ventana.
Si dejas todos desmarcados, la ventana se abrir sin ningn elemento y aparecer
nicamente rodeada de un marco de pgina.

6.5. Cambiar propiedades CSS

Este comportamiento nos resultar muy til, ya que nos permite cambiar las
propiedades CSS de un elemento al producirse un evento.
Las siguientes capas cambiarn su color si hacemos clic sobre ellas:
Para poder identificar al elemento al que cambiaremos sus propiedades, hemos de
asignarle un ID.

Luego seleccionamos el elemento asociado, sobre el que se producir el evento.

Abrimos el panel Comportamientos (Mayus + F4) y pulsamos el botn

para

desplegar la lista.
En este caso seleccionamos el comportamiento Cambiar propiedad. Aparecer un
dilogo como el siguiente:

Lo primero es identificar al elemento. Seleccionamos un Tipo de elemento del

desplegable. En ID de elemento se cargaran todos los IDs del tipo seleccionado.
Seleccionamos el que nos interese.
A continuacin, seleccionamos una propiedad del desplegable Seleccionar o la
escribimos en el campo Introducir. E indicamos el valor que tomar en el campo Nuevo
valor:.
La pega de este sistema es que nos permite cambiar slo una propiedad.

Recuerda que comentamos la existencia de pseudoclases CSS. Empleando el

selector selector:hover, podemos definir un estilo completo que se mostrar cuando el
elemento tenga el cursor encima. Veremos esto en la siguiente unidad.

16.6. Comprobar Plug-ins

Un comportamiento que tiene que ver con la comprobacin de las caractersticas del
navegador del usuario es la opcin Comprobar Plug-ins.
Si haces clic sobre ella vers el siguiente cuadro de dilogo:

Este comportamiento nos dar la posibilidad de comprobar si el navegador tiene

instalados los plug-ins (o aadidos) necesarios para que pueda ver archivos de
tipo Flash, Quicktime,Shockwave, RealPlayer, etc...
Para ello deberemos seleccionar el tipo de plug-in que requerimos para que nuestra
pgina se visualice correctamente, en el caso de que no se encuentre en el
desplegable Seleccionar:deberemos

escribir

su

nombre

en

el

cuadro

de

texto Introducir: (aunque esto ocurrir en contadas ocasiones).

Rellena los campos de URL siguientes. El primero indicar la ruta de la pgina que
quieres que se muestre si el plug-in existe en el navegador del usuario. Djalo en blanco
si quieres que se quede en la pgina en la que est.
Y en el campo De lo contrario, ir a URL: escribe la ruta a la que debe redirigirse el
navegador en caso de que no tuviese el plug-in instalado. Aqu tienes dos opciones, o bien
redirigir al usuario a la pgina donde descargarse el plug-in para poder visualizar la tuya
correctamente, o redirigirlo a una pgina que hayas creado para aquellos que no cumplan
los requisitos mnimos del sitio.

Este comportamiento tambin deber ir asociado al evento onLoad del body para que
pueda ejecutarse en la carga de la pgina.

se comportamiento est cayendo en desuso, ya que los navegadores actuales

detectan automticamente los plugins faltantes y nos ofrecen la posibilidad de instalarlos.

16.7. Mens de salto

Aunque

este

comportamiento

se

encuentra

en

el

listado

del

panel Comportamientos vamos a aprender a insertarlo desde otro lugar ya que te ser
ms fcil.

Un men de salto no es ms que un men desplegable desde el que puedes saltar de

una pgina a otra con slo seleccionar la opcin correspondiente en el men. Encima de
este apartado tienes un ejemplo (no es funcional pero puedes desplegarlo para hacerte
una idea) que ilustra el aspecto que tendra este tipo de mens.

Insertar, seleccionar la
opcin Formulario y en el desplegable elegir Men de salto.
Insertarlo es muy sencillo, slo tienes que hacer clic en

Se abrir este cuadro de dilogo:

Para crear el men debers introducir los elementos (opciones) que lo forman. Para ello
escribe en Texto el ttulo de la pgina y en

Al seleccionarse, ir a URL la ruta de la

pgina que se tiene que abrir si el usuario selecciona esta opcin del men.
Una vez rellenados estos campos, haz clic en el botn

Luego repite el proceso tantas veces como elementos en el men quieras insertar.

Abrir
URL en: y dale un nombre al men (para reconocerlo mejor ms tarde) en Nombre
del men.
Cuando hayas acabado decide en qu ventana quieres abrir los enlaces en

Luego puedes marcar la opcin Seleccionar

primer elemento tras el cambio

de URL para que cuando se abra la ventana el elemento del men que se muestre sea
el primero.
Djalo desmarcado si quieres que se muestre el de la pgina que se est visualizando.
Luego marca la opcin

Insertar botn Ir tras el men para que se aada un

botn al formulario.

Si escoges esta opcin vers que se crea un men como el que tienes justo sobre este
prrafo.
El funcionamiento de este men de salto es muy parecido al anterior, slo que una vez
seleccionada la pgina que mostrar hay que pulsar el botn para que se efecte el salto.

Ejercicio propuesto de la Unidad 16

Prueba evaluativa de la Unidad 16

Unidad 17. Estilos CSS Avanzados (I)

En temas anteriores vimos cmo funcionaba el panel Estilos CSS y cmo crear hojas
de estilos para poder utilizarlas en tus pginas web.

Hasta ahora hemos ido empleando las propiedades CSS ms comunes, aunque no las
hemos explicado detalladamente. En esta unidad intentaremos explicar mejor qu es
CSS.
A lo largo del curso, hemos orientado nuestras pginas para que sigan los fundamentos
y reglas marcadas por el W3C (Word Wide Web Consortium). Esta metodologa exige que
el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de
marcacin HTML, mientras que la parte de formato recaera sobre los estilos CSS nica y
exclusivamente.

Ya que

aunque

no

las

hemos

empleados,

existen

etiquetas

(como <font> o <b>) y atributos (como bgcolor) que nos permiten definir el aspecto del
elemento, pero sin emplear CSS.
Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar,
modificar o adornar la pgina de un modo eficiente.
En este tema aprenderemos controles que nos ayudarn a presentar el texto e
imgenes de nuestras pginas de una forma mucho ms limpia y cmoda.

17.1. Aplicar estilos CSS

Hasta ahora, si has entrado un poco en el cdigo de las pginas, habrs visto etiquetas
que introducan estilos CSS en ellas.
Por defecto, cuando crebamos una < Nueva regla de estilo > desde el inspector de
propiedades, se defina la regla nicamente para la pgina actual. Esto generaba un
cdigo similar al siguiente en el <head> de la pgina (por supuesto, cambiando las
propiedades segn el caso).

<style type="text/css">
<!-body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;

//->
</style>

Este mtodo se emplea para incrustar el cdigo directamente en la pgina. Los

estilos son declarados en la cabecera (<head>...</head>), entre las etiquetas <style
type="text/css"> y</style>.

La base del CSS es lograr un estilo homogneo y fcil de modificar para todo nuestro
sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada pgina. En nuestros
sitios de ejemplo, hemos optado por exportar los estilo a una hojas de estilos (un
archivo de extensin .css). Esta opcin nos resultaba mucho mejor, ya que nos permite
centralizar el estilo en un slo archivo que aplicaremos a todas las pginas.
Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente.
En este caso deberemos crear un archivo CSS (Archivo Nuevo y seleccionando CSS).
En l escribiremos las reglas de estilo del con la misma sintaxis que hemos visto ms
arriba pero eliminado el componente HTML. Este sera el contenido de nuestra hoja
definiendo el mismo estilo que arriba:

@charset "iso-8859-1";
/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}

Las dos primeras lneas generadas por Dreamweaver no son imprescindibles.

Este

cdigo

est

guardado

en

un

archivo

con

extensin .css (por

ejemplo, miestilo.css). Luego deberamos vincularlo en la pgina HTML utilizando la

etiqueta <link /> dentro del <head> de la pgina:

<link
href="ruta/miestilo.css"
type="text/css" />

rel="stylesheet"

Otra opcin que nos permita el Inspector de propiedades CSS era crear un Estilo en
lnea. Este estilo slo afectaba al elemento en cuestin, ya que lo que realmente estamos
haciendo es definir las propiedades CSS empleando el atributo style del elemento:

<p style="color: red; font-size: 30px;">Este texto est en rojo y

con un tamao de 30 pxeles</p>

El estilo en lnea es el ms desaconsejado porque es ms difcil de modificar al tener

que buscarlo por el texto y modificndolo uno a uno.

Una pgina puede contener todos estos tipos de estilos CSS, o incluso tener varias
hojas de estilo asociadas. Entonces cundo empleamos cada uno?

Emplearemos hojas de estilos para todos los estilos comunes a las pginas del sitio.

Emplearemos estilos incrustados en la pgina para los estilos que se emplean en

nicamente en esa pgina, y que ya no seran tiles si borrsemos la pgina. Por
ejemplo, para definir el la apariencia de una tabla en concreto.

Emplearemos estilos en lnea cuando el estilo solo tenga sentido por estar en esa
posicin en concreto, y no se suela repetir en el sitio. Por ejemplo, si queremos dar
ms margen a un prrafo por tener una imagen en concreto, pero que no tendra
sentido si cambisemos la imagen.

La organizacin de los estilos debes decidirla t. Pero recuerda que cuanto menos
cdigo repitas en tus pginas, ms fcil ser luego de modificar o exportar.

Para practicar realiza el Ejercicio Paso a Paso de Creacin de una Hoja de Estilo.

17.2. Sintaxis CSS

Un archivo CSS tiene una estructura muy bien definida, por lo que bastar con que nos
aprendamos unas cuantas reglas para poder empezar a familiarizarnos con su creacin.
Su estructura siempre es la siguiente:
El

formato

seguir

para

definir

una

propiedad

es: selector

{ propiedad: valor;} o selector {propiedad: valor1 valor2 valor3;} si

puede tener varios valores. Aunque como lo habitual es escribir varias propiedades para
un selector, se suele emplear la sintaxis:
selector {
propiedad1: valor;
propiedad2: valor1 valor2;
propiedad3: valor;
propiedad4: valor;
}

Esto es lo que podramos llamar una regla CSS. Podemos escribir tantas reglas CSS
como queramos, siempre una despus de otra.
Entre llaves se encierra la definicin del estilo, que viene dada por una lista de
propiedades y sus valores separados por puntos y comas.

Los selectores son aquellos sobre los que se aplica la definicin del estilo CSS.
Recordars que al crear una nueva regla, Dreamweaver nos permita elegir entre cuatro
tipos de selectores:

Etiqueta HTML

Clase

Identidad

Compuesto

Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier
elemento de una pgina puede ser modificado genricamente para que tome un mismo
aspecto, por ejemplo:

p {font: 13px bold Arial;}

Hace que todos los prrafos (la etiqueta p) tendrn la fuente de un tamao de 13
pxeles, estar en negrita y ser del tipo Arial.
Hay que tener en cuenta que las etiquetas tiene un estilo por defecto, dependiendo del
navegador. Por eso vemos los prrafos con margen, los enlaces subrayados o los
encabezados de mayor tamao. Haciendo esto reescribimos las propiedades de esa
etiqueta.

Una clase es un selector que afectar slo a aquellas etiquetas que nosotros
decidamos, por ejemplo:
.rojo {color: red;}

Hemos creado una clase, que hace que los elementos a los que se la asignemos
muestren el texto de color rojo. Como puedes ver, la clase se define porque tiene un punto
delante.
Ahora podramos aplicar este estilo sobre cualquier etiqueta que queramos. No hay
ms que emplear el atributo class para indicar la clase asignada.
<p class="rojo">ste es un texto en rojo.</p>
<div class="rojo">
<p>Este texto tambin es rojo.</p>
<p>Y tambin ste.</p>
</div>

En este ejemplo estaramos creando un prrafo y todo su texto sera rojo. En el caso
del bloque, todo el texto que contenga ser rojo, a no ser que los prrafos tengan definido
otro color en la hoja de estilo.
Los selectores de clase deben estar siempre escritos con caracteres alfanumricos y
sin utilizar espacios (utiliza el subrayado _ para separar palabras). Para evitar errores,
recomendamos tambin escribirlos siempre en minsculas.

Por ltimo encontraramos los selectores de identidad. Estos selectores identifican al

elemento por su ID. Por lo tanto, slo afectarn a un elemento en concreto de la pgina,
por lo que son muy empleados para definir el estilo de las capas PA.
#contenedor {width: 600px;}

Observa que este tipo de selector va precedido por una almohadilla (#).
Ms tarde en el cdigo podremos encontrar:
<div id="contenedor">Este es un bloque que contiene texto</div>

En el cdigo deber establecerse la regla CSS asocindosela al atributo ID.

Este atributo (id) recoge el nombre del elemento que se ha creado con la etiqueta
HTML.
A partir

de

ese

momento

se

podra

referenciar

ese

cuadro

de

texto

como contenedor utilizando JavaScript.

Los selectores compuestos los veremos en el siguiente avanzado:

17.3. Selectores compuestos

Aunque slo hay tres tipos de selectores diferentes hay diversas formas de combinarlos
para producir hojas de estilo ms complejas. A esta combinacin de selectores se les
llama selectores compuestos.
Ahora veremos estos tipos de combinacin:
Agrupacin: Los selectores se pueden agrupar separados por comas para
asignarles las mismas propiedades, por lo que:

p { background-color: #003; }
.resaltado { background-color: #003; }
#cabecera { background-color: #003; }

Puede escribirse como:

p, .resaltado, #cabecera { background-color: #003; }

Descendencia: Podemos obligar que un estilo slo se aplique sobre un elemento

que est dentro de otro. Por ejemplo:

#contenido {
color: #0000FF;
background-color: #FFC;
}
.resaltado { background-color: #FFC; }

Esto

har

que

tanto

el

elemento #contenido como

los

elementos

con

la

clase .resaltado tengan el mismo color de fondo. Pero qu ocurre si queremos resaltar
algo dentro de #contenido? Como no se ver tenemos que crear otra clase? No es
necesario, podemos indicar propiedades distintas que afecten a la clase .resaltado slo
cuando se encuentre dentro del elemento#contenido. Lo hacemos escribiendo lo
selectores en orden jerrquico y separados por espacios:

#contenido .resaltado { background-color: #06F; }

Ahora los textos marcados con la clase .resaltado en los dentro de #contenido se
vern con otro color de fondo.
Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro
del anterior.
Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo:

#contenedor p .derecha { float: right; }

En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un
prrafo dentro del elemento definido como contenedor flotarn a la derecha.

17.4. Selectores de atributo

Hasta ahora hemos visto que los selectores se pueden combinar de bastantes formas.
Veamos que el poder de CSS no slo se queda ah si no que avanza un poco ms para
ayudarnos a establecer estilos segn el tipo de atributos que tenga una etiqueta.

Un atributo es una parte de la descripcin de un selector HTML. Por ejemplo, en:

<a href="http://www.aulaclic.es" target="_blank">Enlace</a>

a es el selector de la etiqueta, mientras que href y target son atributos.

CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos. Veamos
cmo hacerlo:
Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados
atributos definidos, por ejemplo:

a[href] { font-family: Arial, Helvetica; }

En esta lnea estamos estableciendo que cualquier etiqueta a que tenga el

atributo href cambie su tipo de letra a Arial o Helvtica.

Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado

valor en un atributo, por ejemplo:

a[target="_blank"] { font-weight: bold; }

Esta lnea har que se convierta en negrita cualquier enlace que abra una nueva
ventana al hacer clic, distinguindolos de los enlaces que navegan por el sitio.
Interesante, verdad?

17.5. Pseudo-clases y Pseudo-elementos CSS

Por ltimo, y para terminar con los selectores veremos las pseudo-clases, elementos
que aadiremos a los selectores para evidenciar algn estado.
Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos muy
sencillos.

Primero veremos 4 tipos diferentes de pseudo-clases, que habamos ido

comentando alguna vez. Son: :link, :visited, :hover y :active.
Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el modo
en el que se visualizarn lo elementos, aunque donde ms usadas son es en los enlaces.
Veamos el siguiente ejemplo:

a:link { color: red; }

a:visited { color: blue; }
a:hover { color: green; }
a:active { color: yellow; }

Esto har que los enlaces se muestren de color rojo (red) en nuestra pgina. Es el
estado link. Por lo tanto, esta propiedad slo tiene sentido en enlaces.
Cuando ya hayan sido visitados por el usuario se quedarn de color azul (blue). Es el
estado visited. Este estado se renovar dependiendo del navegador utilizado y se
mostrar durante un tiempo determinado (una sesin, etc...). Esta propiedad slo tiene
sentido en enlaces.
En el momento en que coloques el ratn sobre l se mostrar de color verde (green).
Es el estado hover. Podemos aplicarlo a la mayora de elementos.
Y finalmente en el momento que se haga clic sobre l, y mientras tenga el foco se ver
de color amarillo (yellow). Es el estado active. Puede resultarnos tiles en campos de
formulario, para destacar el campo que se est editando.

Prueba este enlace

Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores.

#menu a:hover { text-decoration: none; }

a.volver:hover { background-image: url(flecha_atras.png); }
#menu:hover a { text-decoration: underline; }

La primera regla afectar a los enlaces que estn dentro del elemento #menu cuando
tengan el cursor encima. La segunda regla, afectar a los enlaces con la
clase volver cuando tengan el cursor encima. El orden es muy importante. En el tercer
ejemplo, a cambiar el orden, la regla afecta a todos los enlaces a la vez cuando el
elemento #menu tenga el cursor encima.

Luego tenemos dos pseudo-elementos que actuarn sobre el texto del documento,
son: :first-letter y :first-line (primera letra y primera lnea respectivamente).

p:first-letter { font-size: 26px; }

p:first-line { font-variant: small-caps; }

Puedes ver un ejemplo de cmo actuaran estos pseudo-elementos en la siguiente

lnea. Agranda y estrecha la ventana para ver qu ocurre:

Esto es una Prueba, la primera lnea est en versales y la primera letra tiene un tamao
de 26px.

Para practicar los pseudo-elementos y clases realiza el

Ejercicio Paso a Paso

de Pseudo-elementos y clases.

17.6. Orden de aplicacin de los estilos CSS

Entonces, si definimos en varios sitios el estilo para un elemento cul se aplica?
Bueno, realmente los estilos se van sumando. Por lo que si no repetimos ninguna
propiedad, el estilo final de un elemento ser la suma de todos los estilos que afecten al
elemento.

Pero qu ocurre si repetimos una propiedad? Como norma general, prevalecer el

estilo ms concreto sobre el ms genrico. Por ejemplo, si en la hoja de
estilo establecemos el texto de los prrafos en rojo, y en la cabecera de la pgina
definimos el color de los prrafos en azul, prevalecer ste ltimo, ya que es ms
concreto, se refiere slo a los prrafos de esa pgina. Y si en un prrafo de la pgina, en
el atributo style indicamos el color de texto verde, prevalecer ste por ser el ms
concreto de todos.
Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es ms concreto que p, ya
que se refiere slo a los prrafos con esa clase. Y p#titulo sera an ms concreto, ya
que se refiere directamente a un determinado prrafo. Lo mismo ocurre al anidar los
selectores, p.inicio span es ms concreto que poner slo span.
En caso de empate, por ejemplo si definimos varias veces la misma propiedad en una
hoja de estilo, se tomar en cuenta la ltima, que machacar a las anteriores. Por
ejemplo,

poner p{margin: 20px; margin-bottom: 5px;} sera

como

poner p {margin: 20px 20px 5px;}.

En cualquier momento podemos saltarnos el orden de prioridad de los estilos,
aadiendo !important al final de una propiedad. Esto hace que tenga preferencia sobre
el resto. Por ejemplo, en este ejemplo:

color:

blue

color:

!important;
red;

El prrafo debera de ser de color rojo, porque el valor rojo "machaca" al azul. Sin
embargo, al poner !important, hace que el texto sea rojo.
Adems, los elementos hijos heredan las propiedades. As, si definimos el color rojo
para el texto de una capa, todos los elementos de la capa mostrarn el texto en color rojo,
a no ser que tengan otro estilo definido.
Por todo esto, a veces podemos no saber dnde hemos definido la propiedad que hace
que un elemento se vea de tal o cual forma. En cualquier momento podemos ver qu
propiedades afectan al estilo y dnde estn definidas desde el panel Estilos CSS.

Pg. 17.6

17.7. Controles de fuente

Ya hemos visto cmo manejarnos con los selectores, ahora veremos cmo deberemos
crear las definiciones de los estilos.
Empezaremos viendo los controles de modificacin de fuentes:

font-family: indica la familia de fuente en la que se mostrar el texto, puede tomar

los valores serif, sans-serif, cursive, fantasy y monospace:

serif, sans-serif, fantasy, cursive, monospace.

..
Aunque esta propiedad tambin soporta que nombres un listado de diferentes fuentes.
El navegador las buscar de izquierda a derecha en el equipo del usuario, y mostrar la

primera que encuentre. Al final, es recomendable indicar una de las fuentes del ejemplo
de arriba, que son las fuentes genricas (familias).

p { font-family: Arial, Helvetica, sans-serif; }

Si el nombre de la fuente contiene espacios, lo pondremos entre comillas dobles (p.

ej. "Times New Roman")

font-style: indica el estilo de la fuente (bsicamente, nos permite ponerla

en cursiva), puede tomar los valores italic, oblique y normal.

italic, oblique, normal

Algunas fuentes estn hechas especialmente para tener una variante en italic (cursiva),
para aquellas que no lo tengan implementado utiliza el atributo oblique que hace que el
navegador incline automticamente la fuente para mostrarla en cursiva. La mayora de
navegadores no distinguen entre estos valores, y aplican siempre oblique, por lo que ste
es el valor ms recomendado. Para mostrar el texto normal, le damos el valor normal.

font-variant: establece la variante de la fuente. Puede tomar el valor smallcaps (versales). Esto muestra las minsculas como maysculas de menor tamao. El
valor normal har que se muestre el estado por defecto de la fuente.

SMALL-CAPS, Normal
Observa que Dreamweaver no muestra correctamente este estilo.

font-weight: indica el peso de la fuente, es decir, nos sirve para ponerla en negrita.
Los valores ms utilizados son: bolder, bold y lighter. Tambin puedes utilizar valores
del 100 al 900, siendo el primero la fuente ms ligera y el ltimo el ms pesado.

bolder, bold, lighter

Aunque en teora podemos indicar distintos grosores, en la prctica la mayora de

navegadores solo aplican normal y bold.

font-size:

establece

el tamao de

la

fuente.

Puedes

utilizar

los

valores

predefinidos smaller, larger, xx-small, x-small, small, medium, large, x-large y xxlarge. Los dos primeros valores establecen el tamao de la fuente en comparacin a la
definida en el elemento padre donde se encuentra, as se mostrar ms pequea
(smaller) o ms grande (larger).

xx-small, x-small,

small, medium,

large, x-large,

xx-

large
Tambin es posible establecer el tamao del texto utilizando porcentajes (%) o em.
Que tambin mostrar el texto en relacin a su elemento padre (100% = 1em).
ste es el tipo ms recomendado. Ya que con slo cambiar el tamao de la fuente
base, todos los elementos se ajustarn a sta manteniendo la proporcin.
Existen otras unidades relativas puntos (pt), pxeles (px)... El sistema de puntos (pt)
vara un poco segn los sistemas operativos, mientras que el valor en pxeles (px)
depende de la resolucin de pantalla.
Incluso podemos emplear valores concretos, como centmetros (cm).

a { font-size: 12em; }
p { font-size:

14px; }

.nota { font-size:

0.90%; }

Es posible definir todos estos estilos que hemos visto en una sola definicin. Para
ello utilizaremos slo la propiedad font:.
As, una retahla de reglas como sta:

p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: large;
font-family: monospace;
}

Puede escribirse como:

p { font: italic small-caps bold large monospace; }

Recuerda

que

el

orden

debe

ser

siempre

el

mismo: style, variant, weight, size y family.

Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo:

p { font: bold sans-serif; }

17.8. Espaciado y alineacin

Continuando con los controles de texto tenemos la propiedad word-spacing que
establece la separacin entre las palabras de un texto.
Este texto tiene una separacin de 18 pxeles entre sus palabras.
Este, sin embargo, tiene una separacin de -5 pxeles.

Tambin podemos utilizar la propiedad letter-spacing para establecer la separacin

entre los caracteres del texto:
Este
entre

texto
sus

tiene

una

letras.

Este,sinembargo,tieneunaseparacinde-2pxeles.

separacin

de

pxeles

vertical-align establece

la alineacin

vertical del

texto.

Puede

tomar

los

valores baseline, sub, super, top, text-top, middle, bottom, text-bottom.

baseline, sub, super, top,

text-top, middle, bottom, text-bottom

Observa como los valores sub, super, text-bottom y text-top toman como referencia
el tamao del texto, mientras que top, middle y bottom toman como referencia el alto del
prrafo completo.
Estas propiedades se suelen aplicar a las imgenes para alinearlas con respecto al
texto:

baseline
-top

sub
middle

super
bottom

top

text

text-

bottom
Esta propiedad no nos sirve para centrar verticalmente el contenido de un elemento.

line-height indica el alto de lnea del texto, igual que el resto de propiedades
puedes establecer esta altura en pxeles, ems, puntos u otras unidades.

Este texto tiene un alto de lnea de 30 pxeles. Puedes ver que la separacin entres estas
lneas es mayor que la definida por defecto.
Este texto tiene un alto de lnea de 10 pxeles. Puedes ver que la separacin entres estas
lneas es menor que la definida por defecto.
Si estableces simplemente valores numricos podrs indicar el alto respecto a su
tamao normal. Por ejemplo:

p { line-height: 2; }

Esta lnea muestra el texto con un interlineado doble. Si hubisemos escrito 1.5 el
interlineado sera un 50% ms alto de lo normal.

Esta propiedad siempre la tenemos que asignar al elemento de bloque que contiene el
texto.
Truco: Si tienes un elemento de alto especfico, puedes centrar el texto verticalmente
dndole al elemento un line-height igual que el alto. Esto slo tiene sentido si tenemos
una nica lnea de texto.

text-align establece la alineacin horizontal del texto. Sus valores ya te deben ser
familiares: left, right, center y justify.
Este texto est alineado a la izquierda con left.
Este texto est alineado a la derecha con right.
Este texto est alineado al centro con center.
Este texto est justificado (justify), ambos mrgenes del texto tocarn los bordes. Si es
necesario estirar las lneas se har.
Esta propiedad la aplicaremos al elemento de bloque que contendr el texto.
text-indent indica el tamao de sangrado (o sangra) del texto, es decir la
separacin de la primera lnea con el borde lado izquierdo. Tomar valores en puntos,
pxeles o ems, como prefieras.
Prrafo

identado

24px.

Primera

lnea

Segunda lnea.
Prrafo

identado

48px.

Primera

lnea

Segunda lnea.
Prrafo

identado

72px.

Primera

Segunda lnea.
Esta propiedad la aplicaremos al elemento de bloque que contendr el texto.

lnea

white-space, esta propiedad es muy til para evitar que el ancho del navegador
modifique el ancho de las lneas del texto.
Puede tomar el valor nowrap para que el texto se muestre en una sola lnea sin insertar
saltos no deseados:
Este texto no tiene saltos de lnea, as que se mostrar en toda su anchura
aunque la ventana sea ms estrecha.

Tambin puedes establecer esta propiedad al valor pre. En este caso todos los
espacios insertados en el texto se mostrarn y no se convertirn en uno slo como ocurre
normalmente. Adems, si en el cdigo hay saltos de lnea, tambin se mostrarn:
En este
igual si

texto podemos

son ms de uno, se

introducir

tantos espacios

como queramos. Da

mostrarn igualmente.

Este ltimo valor no funciona correctamente en Internet Explorer as que es

recomendable utilizar la entidad HTML (&nsbp;) para mostrar ms de un espacio.

17.9. Apariencia del texto

text-decoration establece si el texto llevar decoracin o no. Principalmente la
emplearemos para el subrayado. Esta propiedad es muy til para modificar el estilo de
los

enlaces.

Los

valores

que

puede

tomar

esta

propiedad

son none, underline, overline, line-through, blink.

none, underline, overline, line-through, blink

El valor blink hace que el texto parpadee. Este valor slo funciona en determinados
navegadores (no en Internet Explorer).

Con la propiedad text-transform puedes indicar la transformacin del texto

(cambiar maysculas / minsculas) de la siguiente forma. Capitalize cambia la primera
letra de cada palabra a maysculas. Uppercase y lowercase cambian el texto a
maysculas o minsculas respectivamente.

Este Texto Tiene El Valor Capitalize, Las Primeras Letras Sern En

Maysculas, El Resto Se Mostrar En Minsculas Automticamente
ESTE TEXTO TIENE EL VALOR UPPERCASE, AUNQUE EST
ESCRITO EN MINSCULAS SE CAMBIAR A MAYSCULAS
este texto tiene el valor lowercase, aunque est escrito en maysculas
se cambiar a minsculas

Por ltimo veremos la propiedad color que establece el color del texto.
Esta propiedad puede tomar un valor hexadecimal (como vimos en el apartado de
colores del tema 3).
De modo que simplemente hara falta especificar el color de este modo:

p { color: #060; }

Unos ejemplos seran los siguientes (aunque disponemos de ms de 16 millones):

#060

#0F0

#039

#3C9

#6CF

#0CC

#900

#990

#F93

#969

#CF3

#CF9

Tambin existe la posibilidad de utilizar unas palabras reservadas para nombrar unos
cuantos colores bsicos.
El modo en el que se definira el estilo sera el mismo:

p { color: red; }

Aunque en este caso en vez de introducir su equivalente hexadecimal, referenciaramos

directamente su nombre.

Puedes encontrar el listado de los nombres de color que puedes utilizar en el sitio de la
W3C.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Fuente.

Pg. 17.9

17.10. Controles de ratn

Hemos decidido dedicar este apartado a la propiedad cursor que modifica la apariencia
del ratn cuando se sita sobre una etiqueta afectada por esta propiedad CSS.
Puedes aplicarla sobre prrafos, enlaces o incluso sobre el body mismo (as el cursor
tendr una forma personalizada en toda la pgina).

El modo en el que se utiliza es igual que el resto, pero empleando la propiedad cursor:

p { cursor: pointer; }

Y puede tomar los valores auto, crosshair, pointer, move, n-resize, ne-resize, eresize, se-resize, sw-resize, w-resize, nw-resize, text, wait y help.

Aqu tienes un ejemplo de cada uno de los cursores. Sita el ratn sobre ellos para ver
el efecto:

auto

crossh
air

point
er

mov
e

text

wait

help

nresiz
e

eresiz
e

neresize

seresiz
e

swresiz
e

wresiz
e

nwresiz
e

Tambin podemos emplear una imagen como cursor, siguiendo la siguiente sintaxis:

p { cursor: url(graficos/micursor.cur), auto; }

Para que funcione en IE, debemos emplear imgenes de cursor (extensin .cur).

17.11. Controles de lista

Hemos visto muchas propiedades que afectan al modo en el que se muestran los textos
de nuestras pginas.
Ahora haremos un alto para ver unas cuantas propiedades que utilizaremos para dar
estilo a nuestras listas.
list-style-type permite establecer el tipo de vieta utilizada en las listas, puede
tomar

los

valores disc, circle, square, decimal, lower-roman, upper-roman, lower-

alpha, upper-alpha ynone.

disc 1

disc 2

disc 3

1. decimal 1
2. decimal 2
3. decimal 3

a. lower-alpha 1

b. lower-alpha 2
c.

lower-alpha 3

Este estilo debe ir asociado a la etiqueta li, ul o ol.

list-style-image permite mostrar una imagen en lugar de una vieta.

La forma en la que lo haremos ser la siguiente:

ul { list-style-image: url(graficos/lista.gif); }

As declararemos el estilo. Luego bastar con escribir una lista desordenada, pues
hemos utilizado el selector ul para marcar el estilo.

elemento 1

elemento 2

elemento 3

elemento 4

Observa que hemos utilizado una URL. Esta ruta debe ser o bien absoluta, o relativa a
la hoja de estilos. No al documento donde se aplica.

list-style-position sirve para establecer sangrados colgantes. Puede tomar dos

valores outside (fuera, opcin por defecto) e inside (dentro).
Veamos un ejemplo mostrando bordes en los elementos que lo ilustrar perfectamente:

elemento 1

elemento 2 con valor outside

elemento 3

elemento 4 con valor inside

elemento 5

Como puedes ver el valor inside alinea la vieta con el principio del texto del elemento
anterior. Outside alinea la vieta del elemento en la posicin predefinida. Utiliza este
ltimo valor para destacar listas definidas como inside.

Por ltimo, como en los controles de fuente, existe un modo en el que podemos
escribir todas estas reglas sin tener que escribirlas una a una. Para ello utilizaremos la
propiedad list-style.
De este modo el siguiente bloque:

ol {
list-style-type: upper-alpha;
list-style-position: outside;
list-style-image: url(imagenes/bullet.gif);
}

Puede escribirse como:

ol { list-style: upper-alpha outside url(imagenes/bullet.gif); }

Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna de
ellas, simplemente omtela.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Lista.

17.12. Controles de fondo

En este apartado veremos las propiedades que pueden aplicarse sobre el fondo.
Estas propiedades se pueden aplicar sobre muchos de los elementos, tanto celdas,
prrafos, capas,el body de la pgina, etc.

background-color permite establecer el color de fondo. Utiliza los mismos cdigos

hexadecimales o los nombres de color que vimos en la propiedad color del texto.
La sintaxis es igual a la que hemos visto hasta ahora:
td.rojo {
background-color: red;
}

background-image establece una imagen de fondo para el elemento.

body {
background-image: url(imagenes/fondo.jpg);
}

Por defecto, las imgenes se posicionarn en la esquina superior izquierda y en

mosaico. Si la imagen tiene zonas transparentes, se ver el color de fondo detrs de ella.

background-repeat indica el modo de repeticin de la imagen establecida para el

fondo.
Puede tomar los siguientes valores:

repeat: la imagen se repite a modo de mosaico hasta ocupar la pgina completa.

repeat-x: la imagen se repite a lo largo del eje horizontal.

repeat-y: la imagen se repite a lo largo del eje vertical.

no-repeat: la imagen no se repite.

Por omisin, el valor que se toma es repeat, por lo que se genera un mosaico con la
imagen del fondo.
Debers declarar la URL de la imagen para poder utilizar esta propiedad:
#menu {

background-image: url(imagenes/menu.gif);
background-repeat: repeat-x;
}

texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto

background-attachment se utiliza para indicar si la imagen de pantalla es fija o se

desplaza con el movimiento de las barras de desplazamiento.
Esta opcin se usa sobre todo para las imgenes del body.
Puede tomar los valores fixed y scroll. El primer valor dejar la imagen fija, el segundo
har que la imagen se desplace junto con las barras (como el fondo de esta pgina).
Pg. 17.12

 aulaClic S.L. Todos los derechos reservados. Prohibida la reproduccin por cualquier medio.
Noviembre-

background-position permite el posicionamiento de la imagen de fondo.

Selecciona entre los valores top, center, bottom y left, center, right.
En este caso podremos combinar dos de los valores, por ejemplo:

.cita {
background-image: url(imagenes/quote.gif);
background-repeat: no-repeat;
background-position: right top;
}

Aunque puedes omitirlos, pero recuerda que si lo haces por omisin los valores
sern top y left.

Igual que en algunos de los apartados anteriores (observa que siempre son las
propiedades con guiones) puedes utilizar la propiedad background para resumir las
reglas CSS.
As el siguiente bloque:

.cita {
background-color: gray;
background-image: url(imagenes/quote.gif);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
}

Puede ser escrito de la siguiente forma:

.cita {
background:
right top;

gray

url(imagenes/quote.gif)

no-repeat

scroll

Recuerda mantener el orden color, image, repeat, attachment y position.

Y ya sabes, si no quieres alguno, sltatelo.

Para practicar realiza el Ejercicio

Paso a Paso de Controles de Fondo .

17.13. Controles de margen interior y exterior

Ahora veremos unas cuantas reglas que afectarn a los bordes y mrgenes de los
elementos.
Para ello utilizaremos el mismo ejemplo: dos cajas, una dentro de la otra. En el
ejemplo, la zona en verde, es el margen de la caja interior, que se toma con respecto a
la caja que lo contiene. Iremos cambiando los valores de ese margen para ver el efecto.

margin-top, margin-right, margin-bottom y margin-left establecen el margen a

cada lado del elemento.
El margen establece la distancia que queda entre el borde exterior del elemento y el
interior del elemento que lo contiene, o entre l y el siguiente elemento.
El margen no forma parte del elemento, por lo que no mostrar sus propiedades, por
ejemplo el color de fondo.
Puedes utilizar pxeles o porcentajes para indicar estas distancias.
Por ejemplo, en la siguiente caja se le ha dado al bloque interior la siguiente clase:

.bloque_interior

margin-top: 20px;

margin-right: 0px;
margin-bottom: 5px;
margin-left: -10px;
}

Los mrgenes superiores e inferiores se pueden ver en las franjas verdes (arroba la
mayor, de 20px y abajo de 5px).
Observa cmo el margen 0 del lado derecho hace que los bordes queden pegados,
mientras que un valor negativo hace que el bloque salga de la caja.

La propiedad margin te permite unificar varias propiedades en una sola. As, la regla
anterior podra quedar como:

.bloque_interior
margin: 20px

{
0px 5px

-10px;

Recuerda que debers seguir el orden top, right, bottom y left.

En el caso de que los valores arriba y abajo (top y bottom) e izquierda y derecha
(left y right) sean iguales entre s se puede escribir en dos valores, como:

.bloque_interior
margin: 20px

{
5px;

En este formato, el primer valor (20px) indica los mrgenes superior e inferior y el
segundo (5px) corresponde a los mrgenes izquierdo y derecho.

En le aso de haber tres valores, corresponderan a arriba, izquierda-derecha y abajo

respectivamente.

En caso de que quieras que todos los mrgenes tengan la misma distancia basta
escribirlo slo una vez:

.bloque_interior {
margin: 20px;
}

Ahora todos los mrgenes sern de 20 pxeles.

Tambin se pueden establecer estas propiedades a auto. Esta propiedad resulta muy
til para centrar horizontalmente bloques en los que hemos definido el ancho. En los
ejemplos anteriores, el bloque exterior tena asignada esta propiedad. De lo contrario,
aparecera a la izquierda de la pgina.

.bloque_exterior {
width: 150px;
margin: auto;
}

Cuando los elementos son contiguos, si ambos tienen margen, estos mrgenes se
solapan, quedando como margen la distancia mayor. Veamos el siguiente ejemplo:

.bloque_interior {
margin: 20px;
}

En el ejemplo anterior, tenemos dos bloques interiores ambos con margen de 20px. Si
los mrgenes se sumasen, la distancia entre ellos sera de 40px. En cambio al solaparse
queda la misma distancia que arriba o abajo, 20px.
padding-top, padding-left, padding-bottom y padding-right establecern

la

distancia del borde de un elemento con su contenido.

En los siguientes ejemplos, mostramos el padding con un color naranja:
Lo entenders mucho mejor con el siguiente ejemplo:

.bloque_interior

padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;

Texto

padding-left: 10px;
margin: 5px;
}

En el ejemplo anterior vemos el contenido de la caja en azul. Vemos que en vez de

comenzar en el mismo borde como antes, queda alejado, lo que vemos coloreado en
naranja. Esto es el padding. Como puedes ver la distancia del contenido a los bordes
derecho e inferior es de 5px. En cambio, la distancia con el lado superior es mayor,
de 20px y con el lado izquierdo de 10.
Y lo mismo pasa con los mrgenes superior (20px) e izquierdo (10px).
Observa que adems existe un margen exterior (en verde).

Igual que con los mrgenes podemos abreviar las reglas CSS utilizando la
propiedad padding. Podemos los padding distintos en una misma regla (arriba, derecha,
abajo, izquierda), definir los pares de padding (arriba-abajo, izquierda-derecha) o
asignarles el mismo valor a todo.
.bloque1

padding: 20px

15px 15px

20px;

}
.bloque2

padding: 10px

5px;

}
.bloque3

padding: 15px;
}

Si un elemento tiene margen, y el elemento que lo contiene tiene padding, se suman.

Veamos un ejemplo:

.bloque_exterior

padding: 10px;
}
.bloque_interior

Texto

margin: 10px 0;
padding: 5px;
}

Como vemos el bloque exterior deja un padding de 10px. Como el interior tiene un
margen superior e inferior de otros 10px, se suman y queda una separacin entre los
lados de 20px.

Por defecto, muchos elementos suelen tener margen. La mayora no tienen padding.
Muchas veces, los valores del margen son distintos en distintos navegadores, lo que hace
que los elementos no se vean igual. Por eso es recomendable establecer siempre
nuestros mrgenes, y no dejar el que muestra por defecto el navegador.

Una forma muy cmoda de ver qu mrgenes afectan a un elemento es usando la

vista Inspeccionar. Puedes verla en este avanzado

Pg. 17.15

17.14. Bordes
Tambin tenemos las propiedades de borde. El borde forma un marco que rodea al
elemento. Fuera de l queda el margin, mientras que el padding queda dentro.
La primera es border-width que indica el ancho o grosor de un borde.
Puede tomar los valores medium, thin y thick. Aunque tambin se aceptan valores en
pxeles (los ms empleados) y porcentajes que son ms fciles de manejar a la hora de
crear bordes con una anchura exacta.

texto

texto

En este caso hemos utilizado:

.borde1 {
border-width: 1px;
}
.borde2 {
border-width: 5px;
}

border-style muestra el borde del elemento de una forma determinada, existen

varios tipos:

none

double

dotted

groove

dashed

ridge

solid

inset

outse

border-color establece en forma hexadecimal o con nombre el color del borde de un

elemento.

.borde {
border-color: blue;

texto
}

Como en el resto de propiedades, utilizaremos la propiedad border para resumir

estas tres ltimas.
De modo que el siguiente bloque:

.borde {
border-width: 10px;
border-style: groove;
border-color: black;
}

Podra escribirse ms fcilmente:

.borde {
border: 10px groove

black;

En este caso podemos cambiar el orden de las propiedades, aunque te recomendamos

que sigas siempre el mismo.

Tambin podemos definir independientemente las propiedades de cada lado:

.borde {
border-top-width: 10px;
border-top-style: groove;
border-top-color: black;
border-bottom: 5px blue solid;
}

Y podemos emplear el mismo sistema que con mrgenes y padding para referirnos a
los cuatro lados:

.borde {
border-width: 5px;
border-color: blue green;
border-style: solid dotted double groove;
}

texto

Para practicar, realiza el Ejercicio

Paso a Paso de Controles de Mrgenes

y Bordes.

17.15. Elementos flotantes

Tenemos la propiedad float, que permite que cualquier elemento flote en un lado
determinado de la pantalla mientras el resto sigue el flujo natural.
Observa estos ejemplos:

Este texto tiene un elemento flotante a la izquierda.

Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.

Este texto tiene un elemento flotante a la derecha.

Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.
Hemos utilizado los valores left y right respectivamente. En estos casos a los prrafos
que contienen el smbolo de copyright se les han aplicado la propiedad CSS float:

<p style="float:left; font-size: 25px; border: 1px solid black;

margin:3px;">&copy;</p>
<p style="float:right; font-size: 25px; border: 1px solid black;
margin:3px;">&copy;</p>

Pero si vemos detenidamente esta propiedad veremos que encontramos un problema:

Este texto tiene un elemento flotante a la derecha.

Pero quiero que este prrafo no se vea afectado por el bloque flotante y se muestre sin
tener que ajustarse a l.
Como este prrafo que ocupa toda la anchura del bloque div padre.
Cmo evitamos que el elemento flotante quede a la derecha del segundo prrafo?

Para ello deberemos utilizar la propiedad clear. Esta propiedad permite romper el
ajuste que se est realizando por una etiqueta anterior marcada con float.
Clear puede tomar 3 valores: left, right o both, para romper el float de izquierda,
derecha o ambos respectivamente.
Por lo que si le aplicamos un clear: right; al segundo prrafo este se mostrar sin
verse afectado por el float:

Este texto tiene un elemento flotante a la derecha.

Pero quiero que este prrafo no se vea afectado por el bloque flotante y se muestre sin
tener que ajustarse a l.
Como este prrafo que ocupa toda la anchura del bloque div padre.
El cdigo que hemos utilizado es el siguiente: <p style="clear: right;">
Observa que al hacer esto, el segundo prrafo no comienza hasta que no acaba el
elemento flotante.
Del mismo modo esta propiedad nos ayudar en este caso, donde tenemos dos
elementos flotantes a la izquierda:

Este texto tiene dos elementos flotantes a la izquierda.

Observa tambin que el elemento flotante sobresale del bloque, ya que no se tienen en
cuenta para calcular el alto.
Queremos que los dos bloques estn flotando a la izquierda pero uno debajo del otro.
Para ello deberemos aplicarle al segundo elemento un clear: left; para que elimine el
comportamiento

del

primer

elemento

que

ya

estaba

flotando,

aparezca

continuacin style="float:left; clear: left;".

Y obtendramos lo siguiente:

Este texto tiene dos elementos flotantes a la izquierda.

Ahora uno se encuentra debajo del otro, y el texto fluye tenindolos en cuenta a ambos.
Aunque puede llegar un prrafo que deje de verse afectado.
Como ste!

Unidad 17. Estilos CSS Avanzados (XVIII)

Ahora combinando los mrgenes y los elementos flotantes podemos crear
columnas de una forma muy sencilla:
cabecera
menu
menu
menu
menu
menu

contenido
contenido
contenido
contenido
contenido
pie

La forma es la siguiente:
1. Creamos una cabecera. No hace falta que se le aplique ningn estilo en especial a
no ser que queramos darle un alto fijo, pero hemos preferido aadir
unos bordes y paddings para que se vea mejor el ejemplo (igual que en resto de
los elementos).
cabecera
2. Luego creamos otro bloque utilizando divs.
cabecera
menu
menu
menu
menu
menu
3. A este ltimo bloque le asignamos la propiedad float: left; para que se encuentre
flotando a la izquierda y le damos una anchura (en nuestro caso un 30%).
cabecera
menu
menu
4. Luego creamos un tercer elemento que contendr la segunda columna.
cabecera
menu
menu
contenido
contenido
contenido
contenido
contenido
5. A este elemento deberemos darle un margin-left del mismo tamao que la anchura
de la primera columna. As nos aseguramos de que se encuentren en el mismo
nivel (porque el elemento de la izquierda est flotando) pero no vuelva a tomar el
flujo normal cuando el bloque de la izquierda haya acabado.
cabecera

menu
menu
contenido
contenido
contenido
contenido
contenido
6. Finalmente aadimos un nuevo bloque que utilizaremos como pie de pgina.
cabecera
menu
menu
menu
menu
menu
contenido
contenido
pie
7. A este bloque deberemos asignarle la propiedad clear: both; para que el elemento
flotante no le afecte en caso de que el contenido fuese demasiado corto.
cabecera
menu
menu
menu
menu
menu
contenido
contenido
pie
No es la nica forma de conseguir este efecto. Podemos hacer las dos columnas
flotantes, emplear Divs PA, etc...

17.16. Controles de elementos de bloque y en lnea

Ahora veremos cmo posicionar los elementos y darles el tamao que nos convenga
para representarlos.
Antes de empezar deberamos hacer una distincin entre las etiquetas HTML.
Podemos clasificar las etiquetas en dos grupos: de bloque o en lnea.

Las etiquetas de bloque son aquellas que causan un salto de lnea antes y despus de
ellos, y ocupan todo el ancho del elemento que las contienen. Por ejemplo las etiquetas p,
div, table, hr, body, etc... Se emplean para organizar el contenido.
La etiqueta de bloque ms genrica es div, que puede contener cualquier etiqueta. Por
ejemplo, un prrafo no debe contener a otro prrafo.
Sin embargo luego encontramos otro tipo de etiquetas (en lnea) que no producen
saltos en el flujo de la pgina, como pueden ser las etiquetas a, strong, em, span, etc... Se
emplean para seleccionar un fragmento del contenido y resaltarlo, crear enlaces, etc...
Las etiquetas de bloque pueden contener a otras etiquetas de bloque y a etiquetas en
lnea. Las etiquetas en lnea, pueden contener a otras etiquetas en lnea, pero nunca a un
elemento de bloque.

Teniendo esto siempre en mente vers que es ms sencillo trabajar y moldear las
pginas utilizando CSS.

Primero veremos las propiedades de tamao height (altura) y width (anchura).

Puedes especificarlas en cualquier elemento de bloque (no en elementos en lnea) y
establecern su alto y su ancho en pxeles o porcentaje.
300x50
#contenedor {
width: 300px;
height: 50px;
}

Finalmente tenemos la propiedad display, que establece cmo se muestra el tipo de

elemento con el que estamos tratando.

Esta propiedad es muy til por ejemplo para transformar las etiquetas de bloque a
en lnea y viceversa.
Puede tomar los valores inline, block, list-item, run-in, inline-block, table, inlinetable, table-row-group, table-header-group, table-footer-group, table-row, tablecolumn-group, table-column, table-cell, table-caption, none o inherit.
Los dos primeros valores hablan por s mismos. Puedes asociarle el estilo display:
block; a una etiqueta a para que cree un salto de lnea antes y despus de ella o poder
darle un alto y ancho. Esto se emplea mucho en los mens, normalmente formados con
listas. Observa estos dos "botones" formados por un div y un enlace:

Pulsa aqu

Pulsa aqu

Notars que el primero slo funciona si pulsamos justo sobre el texto. En cambio en el
segundo podemos pulsar en cualquier parte del div.
Esto lo hemos logrado convirtiendo el enlace en un bloque y haciendo que ocupe todo
el alto (al ser un bloque, ya ocupa todo el ancho):

.boton a {
display: block;
height: 100%;
}

Unidad 17. Estilos CSS Avanzados (XX)

Del mismo modo, podrs hacer que una etiqueta de bloque (como p o div) se convierta
en un elemento en lnea utilizando display: inline; y puedan ser mostradas una al lado de
otra:

1
6
24

3
5

4
7
9

8
10

11

23

12

22

21 20 13
19

18

17 16 15

4
7

24

23

12

22

21 20 13
19

18

8
10

11

25

14

17 16 15

4
7

24

23

12

22

21 20 13
19

18

25

14

14

8
10

11

25

17 16 15

En este ejemplo podemos ver tres tablas que se muestran una al lado de la otra.
Simplemente les hemos dado el estilo:

.tabla {
display: inline;
}

Aunque si disminuyes el ancho de la ventana vers que al tratarse de elementos en

lnea se adaptan a su tamao, y al final cuando no quepan, saltan de lnea.

Para saltarnos este inconveniente (si lo fuera), podemos utilizar la propiedad que vimos
en el apartado de Controles de texto: white-space.
Introduciendo estas tres tablas en un elemento de bloque como un div y asignndole la
propiedad white-space: nowrap; conseguiramos que las tres tablas permaneciesen en
lnea sin saltos de pantalla a pesar de la anchura de la ventana.

4
7

24

23

12

22

21 20 13
19

18

25

4
7

23

12

22

21 20 13
19

11

17 16 15

24

10

14

18

8
10

11

25

14

17 16 15

3
5

4
7

24

23

12

8
10

11

25

22

21 20 13
19

18

14

17 16 15

Comentaremos que esta propiedad tambin puede tomar el valor list-item.

De este modo, los elementos que se vean afectados por el estilo display: list-item; se
mostrar como si formasen parte de una lista.
Observa el siguiente ejemplo:

p.lista {
display: list-item;
list-style-type: square;
}

Si aplicamos este estilo sobre unos prrafos veremos esto:

Esto es un prrafo que se muestra en forma de elemento de lista.
Esto es un prrafo que se muestra en forma de elemento de lista.
Esto es un prrafo que se muestra en forma de elemento de lista.
Esto es un prrafo que se muestra en forma de elemento de lista.

Otro valor muy interesante de display es none. Esto hace desaparecer el elemento del
flujo de la pgina, no como al usar visibilty: hidden; que lo oculta pero mantiene su
espacio. Esta propiedad es muy empleada en comportamientos JavaScript.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Bloque.

Unidad 17. Estilos CSS Avanzados (XXI)

17.17. Controles de posicin

En este apartado veremos cmo posicionar el contenido de la pgina web utilizando
nicamente estilos CSS.

Existen unas propiedades CSS que combinadas con las siguientes nos ayudarn a
mover el contenido de la pgina.
Estas son top, left, bottom y right.
Con estas propiedades podremos establecer la distancia a los bordes de la ventana del
navegador, o del elemento que lo contenga.
Recordemos que top equivale a la parte superior.
Left al lado izquierdo.
Bottom al borde inferior.
Y finalmente right al derecho.
Normalmente daremos valores a estas propiedades utilizando pxeles o porcentajes.

Veamos ahora cmo las utilizaremos. Para ello deberemos declarar tambin la
propiedad position (posicionamiento).
Esta es sin duda la ms compleja de este apartado as que la veremos con
detenimiento.
Esta propiedad puede aceptar 4 valores: static, absolute, relative y fixed.
Vayamos uno a uno.

El valor static es el valor por defecto de un elemento, ocupa su lugar en el flujo de la

pgina y no puede ser modificado utilizando las propiedades top/bottom y left/right.

p {
position: static;
}

Con el valor absolute puedes colocar un elemento en cualquier parte de la ventana con
slo darle las coordenadas (las CapasPA emplean este posicionamiento).
As

deberamos

declarar

la

posicin

utilizando

un

par

de

propiedades top/bottom y left/right. Lo habitual es indicar tambin el alto y ancho,

aunque si no lo hacemos estos valores se ajustarn al contenido.
Un ejemplo podra ser este:

#capa_flotante {
position: absolute;
top: 100px;
left: 300px;
width: 30px;
height: 125px;
}

Esta declaracin de estilos es muy habitual en las capas. Se posiciona absolutamente

el objeto y luego se le da un ancho y un alto.
top:
left: 0;

0;

bottom:
left: 0;

0;

top:
left: 50%;

50%;

bottom:
right: 50%;

50%;

top:
right: 0;

50%;

top:
left: 100px;

70px;

top:
right: 25%;

25%;
Pg. 17.21

El valor relative tambin nos permite mover el elemento. ste, en principio, ocupa su
lugar

en

el

flujo

normal

de

la

pgina

utilizaremos

las

propiedades top/bottom y left/right para desplazarlo tomando como referencia ese lugar
y no los bordes de la pgina. El hueco reservado para el elemento quedar en el flujo
normal.
Por ejemplo:
p.especial {
position: relative;
top: 20px;
left: 20px;
}

Esta regla har que los prrafos marcados con la clase especial se desplacen 20
pxeles hacia abajo y hacia la derecha de su posicin normal en el flujo de la pgina.

Piensa que lo que estamos diciendo en la definicin de la regla es que va a haber una
desfase de 20 pxeles desde la parte superior de donde se encontraba en un
principio, y lo mismo con la parte izquierda, por lo que el elemento se ver desplazado en
diagonal.

Finalmente

encontramos

el

valor fixed.

Asignndole

este

valor

la

propiedad position podemos hacer que un elemento se quede fijo en la ventana aunque
se muevan las barras de desplazamiento. Un comportamiento muy til para los mens o
algunos grficos que queramos que permanezcan siempre a la vista. Hemos de tener en
cuenta que al desplazar la pgina puede que tapen otros elementos.
Tambin acepta los pares top/bottom y left/right para definir la posicin en la que se
mostrar fijo.
Por ejemplo:
#menu {
position: fixed;
top: 0px;
right: 0px;
}

Esta regla de estilo posicionara un elemento con identidad menu en la esquina

superior derecha de la ventana y aunque utilicemos el scroll (las barras de
desplazamiento) permanecer all fijo.
Este valor no funciona en IE 6, aunque s en las siguientes versiones.

17.18. Controles de visibilidad

Por ltimo en este apartado veremos unas cuantas propiedades que tienen que ver con
la forma en la que se visualizan los elementos en pantalla.

La primera propiedad que veremos ser z-index.

Esta propiedad decide el orden de profundidad de los elementos que se encuentran
solapados.
En el apartado anterior vimos cmo mover los elementos en la pantalla. Imagina, ahora,
que al mover dos capas una nos queda por encima de la otra.
Cmo podemos decidir cul quedar por detrs? Y al frente?
Utilizaremos esta propiedad para ello.
Z-index acepta nmeros positivos o negativos, y establece que el elemento con un
valor mayor se mostrar por delante del resto.
Esto tiene sentido en elementos posicionados, que pueden solapar otros elementos.
Veamos un ejemplo:
z-index: 0
z-index: 2
z-index: 1
z-index: 2

z-index: 0
z-index: 1
Para utilizar esta propiedad basta con declararla:

.rojo {

position: relative;
top: 100px;
left: 20px;
z-index: 0;
}

Otra propiedad muy valiosa a la hora de jugar con la visibilidad es visibility.

Puede tomar los valores visible y hidden (visible y escondida respectivamente).
Recuerda que esta propiedad la emplebamos con las capas.
Asigna el valor hidden a todos aquellos elementos que quieras que no aparezcan en
la pantalla.
Muy til para ocultar estadsticas o para crear animaciones complejas combinando esta
propiedad con JavaScript.

#estadisticas {
visible: hidden;
}

Finalmente nos encontramos con otra propiedad llamada overflow, que ya

habamos comentado.
Esta propiedad establece como ha de tratarse el contenido dentro de un elemento.
El overflow en realidad se hace cargo del desbordamiento de contenido. Por lo que
slo acta en aquellos casos en los que el continente se queda demasiado pequeo para
mostrarlo todo.
Puede tomar los valores visible, hidden, scroll y auto.
El valor visible hace que se ignore el tamao del continente para mostrar todo el
contenido. Es el valor por omisin en la mayora de los navegadores.

Utilizando hidden se oculta el contenido que no cabe y no muestra barras de

desplazamiento. El tamao del continente no se ver afectado.
Si le das el valor scroll se introducirn las barras de desplazamiento necesarias para
que el contenido pueda visualizarse correctamente. El tamao del continente no se ver
afectado. Las barras siempre sern visibles.
Finalmente, con el valor auto aparecern las barras de desplazamiento cuando sean
necesarias.

Veamos unos ejemplos:

visible. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. ste s cabe.
scroll. ste s cabe.

En este ejemplo hemos introducido 5 etiquetas div que contienen un texto que a veces
no cabe.
El bloque marcado con overflow:

visible; muestra el texto saliendo de l (el texto

excedente est fuera del flujo de la pgina). Al contrario que el que est definido
como hidden que esconde el resto del texto.
El valor scroll muestra las 2 barras de desplazamiento aunque la vertical no sea
necesaria, y auto hace que el navegador introduzca nicamente la horizontal pues es la
que es necesaria en este caso.

Para practicar realiza el Ejercicio Paso a Paso de Controles de Posicin y visibilidad.

Ejercicio propuesto de la Unidad 17

Prueba evaluativa de la Unidad 17

Unidad 18. Diseo de pgina. Maquetacin web (I)

18.1. Maquetar una pgina web

La maquetacin es la distribucin de los elementos en nuestra pgina. Piensa en una

pgina

web

cualquiera.

Seguro

que

distingues

algunos elementos

claramente

diferenciados, como un encabezado, columnas, y un pie de pgina.

Hace unos aos, la maquetacin de las pginas web se realizaba utilizando tablas
(<table>). Una vez entendido este proceso poda resultar sencillo, aunque si no se
dominaban las tablas, poda convertirse en algo tedioso. El problema de las tablas es que
generaban un pgina muy encorsetada, y el cdigo se volva complejo de entender.
Adems, algunos buscadores encontraban problemas al analizar la estructura de la
pgina.
Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza
utilizando capas (<div>), tambin llamadas divisiones o contenedores. La colocacin de
las capas en la pgina se realiza a travs de CSS. Esto permite, por ejemplo, que
podamos pasar de un diseo con un men lateral a otro con el men en la parte superior,
slo cambiando la hoja de estilos.
En esta unidad veremos las tcnicas de maquetacin ms comunes, aunque hay que
decir que existen diversas formas de conseguir una misma maquetacin.
Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para crear un
div alrededor de contenido ya existente desde Dreamweaver, seleccionamos la parte de la
pgina y en el men Insertar, opcin Objeto de diseo, elegimos Etiqueta Div.

Tambin veremos que Dreamweaver nos ofrece una serie de plantillas de maquetacin,
de las que podremos partir, adaptndolas a nuestras necesidades.

18.2. Tamao
Por lo general, la maquetacin se realiza sobre elementos en bloque. Normalmente
divisiones, pero tambin lo podemos hacer con prrafos, listas, o con el propio body. Por
defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su
alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su tamao:
ancho (width) y alto (height).
Los valores para estas medidas, pueden ser expresados en las medidas habituales:

Tamaos absolutos, utilizando px, cm, etc...

Tamaos relativos al elemento que lo contiene, utilizando porcentajes (%).

Tamaos relativos a la fuente, utilizando em.

El valor auto es el valor por defecto. Por ejemplo, un prrafo, por defecto, tienen un
ancho del 100% y un alto ajustado al contenido.

En algunos elementos, como los Divs PA, nos permiten cambiar su tamao desde
el Inspector de propiedades. Pero en la mayora, tendremos que hacerlo desde el
cdigo o desde las propiedades CSS de Cuadro y Posicionamiento.

Por ejemplo, hemos definido el tamao para el siguiente prrafo:

<p style="width:200px; height:100px; border: red 2px solid">
Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la izquierda,
como en el ejemplo anterior. Una forma sencilla de centrarlo es dndole al margen

(margin) derecho e izquierdo el valor auto. Recuerda que las propiedades de margen se
encuentran tambin con las propiedades de Cuadro.
<p style="width:200px; height:100px; border: red 2px solid; margin:
auto;">
Nota: En la vista de Diseo de Dreamweaver, esta propiedad no se muestra
correctamente.
Con slo esto, podramos maquetar una pgina web que contenga una columna
central, con un ancho fijo o relativo, centrada en la ventana del navegador.
Para hacerlo, encerramos todo el contenido del body en una capa, a la que le
asignamos, como mnimo, estas reglas CSS:

#container {
width: 960px;
margin: 0 auto;
}

Puedes ver un ejemplo de una pgina muy simple maquetada de esta forma aqu.

18.3. Desbordamiento
Al utilizar un elemento de bloque, como una capa, un prrafo, el body, etc... el tamao
depende del contenido. Pero al definir un tamao fijo nos puede surgir un problema: qu
pasa si el contenido del elemento (texto, imgenes, etc...) no cabe? Entonces se produce
un desbordamiento, que podemos controlar desde el estilo con la propiedad overflow.
Podemos darle estos valores:

visible. Es la opcin por omisin. El contenido sale de elemento, y puede que se

solape con los elementos que haya a continuacin.

hidden. Lo que no quepa en el elemento, queda oculto.

auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.

scroll. Siempre muestra las barras de desplazamiento.

visible. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamao fijo, por lo que desborda.

auto. ste s cabe.

scroll. ste s cabe.
Si el desbordamiento es visible, puede tapar a los elementos que haya despus.
En

el editor

de

propiedades

CSS,

encontramos

el

desbordamiento

en

la

categora Posicin.

Y recuerda si estamos trabajando con Divs PA, podemos establecer este atributo
directamente sobre el Inspector de propiedades.

8.4. Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento HTML para
visualizarlo.
Por defecto, los elementos se posicionan uno a continuacin de otro. Si se trata de
elementos de bloque, como capas, prrafos, listas, etc, se irn colocando uno debajo del
otro. A este posicionamiento se le denomina esttico.
Utilizando

CSS,

con

la

propiedad position podemos

cambiar

el

tipo

de

posicionamiento de los elementos. Existen cuatro tipos de posicionamiento:

static. Es el normal.

relative. El posicionamiento relativo coloca el elemento en su posicin normal. A

partir de ah, podemos desplazar el elemento, permaneciendo el hueco de su
posicin original.

absolute. Con el posicionamiento absoluto, especificamos la posicin del elemento

con respecto al elemento que lo contiene.

fixed. Se establece la posicin del elemento de forma parecida al absoluto, pero el

elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.

Al cambiar el desplazamiento de un elemento, es fcil que se solape sobre otro. Esto

produce que un elemento quede oculto. Para controlar esto, disponemos de la propiedad
CSS z-index, a la que podemos asignar un valor numrico. Un elemento con un zindex mayor se ver por encima de otro con un z-index menor.
Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se
le asigna z-index: 10;, lo que hace que se vean por encima del resto.
El z-index slo afecta a los elementos con un posicionamiento distinto de static. Los
elementos posicionados siempre se vern por encima de otros elementos no
posicionados, y entre ellos se ver encima el de mayor z-index, o en su defecto, el que se
haya generado en ltimo lugar.
Truco: Para que un elemento sin posicionamiento se vea por encima de otro
posicionado, podemos darle posicionamiento relativo, lo que no afectar a su apariencia
si no lo desplazamos, y unz-index mayor que el del elemento posicionado.
En el editor CSS encontramos las estas propiedades agrupadas bajo posicin.

18.5. Posicionamiento relativo

El posicionamiento relativo coloca el elemento en su posicin normal, y a partir de ah lo
desplaza la distancia que le indiquemos. Al desplazarlo deja un "hueco" donde estara su
posicin normal.

Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;.

Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la
izquierda y right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto
opuesto. Por ejemplo, para desplazar un elemento 40px a la derecha, podramos
poner right: 40px; o left: -40px;.
Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo
hacia arriba o bottom para hacerlo hacia abajo.
Si no establecemos valores de desplazamiento el elemento no cambia su posicin, por
eso es muy comn asignar el posicionamiento relativo a elementos para poder utilizar una
propiedad que requiere posicionamiento, como puede ser z-index.
Pg. 18.3

18.6. Posicionamiento absoluto

Al utilizar el posicionamiento absoluto indicamos de forma precisa la posicin del
elemento en la pgina.
Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado
un posicionamiento absoluto no deja un hueco en la pgina. Podemos decir que el resto
de elementos lo ignoran, y se colocan como si no existiese.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.
La posicin y tamao del elemento se indica siempre en relacin a otro elemento que lo
contiene. El elemento contenedor ser el ms cercano que haya con posicionamiento
no esttico. Si no hay ninguno, se utilizar el body.
Para definir la posicin utilizamos top para referirnos a la distancia entre el borde
superior del elemento posicionado y el borde superior del elemento contenedor. Por lo
tanto left ser la distancia entre los lados izquierdos, right entre los lados derechos
y bottom entre los lados inferiores.
Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un
punto en vertical (top o bottom) y un punto en horizontal (right o lef). En el siguiente

elemento,

todas

las

cajas

tienen position: absolute; witdth: 60px; height: 60px y un borde. Para

cada una hemos cambiado la posicin. Adems, a la caja que contiene a todas, le hemos
dado position: relative; para que las cajas de dentro tomen su posicin a partir de ella.
top:
left: 0;

0;

bottom:
left: 0;

0;

top:
left: 50%;

50%;

bottom:
right: 50%;

50%;

top:
right: 0;

50%;

top:
left: 100px;

70px;

top:
right: 25%;

25%;

Como vimos en el tema relacionado con capas, Dreamweaver nos permite tratar los
divs con posicionamiento absoluto de forma especial, a travs de los Divs PA.
Podemos insertar una capa con posicionamiento absoluto directamente a travs del
men Insertar, opcin Objeto de diseo, Div PA.

Cuando un elemento (no solo divs) tiene posicionamiento absoluto, en Dreamweaver se

muestra as si estn seleccionados:

Esto nos permite establecer su tamao y posicin simplemente arrastrndolos o

estirando de sus bordes, directamente sobre la vista de diseo. Adems, todas estas
propiedades aparecern en el inspector de propiedades.

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar

nuestra pgina. Por ejemplo, podemos dividir la pgina en dos (o ms)
columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus
anchos sea el total de la pgina. Por ejemplo:
div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50%;
}
div#columna_derecha {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;

Esto originara dos columnas, cada una con un ancho de la mitad del de la pgina
(o del elemento que las contenga).
Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que
sobre, lo haremos de otra forma. Por ejemplo, si la columna de la izquierda la
queremos con un ancho fijo, por ejemplo de 200px, lo que haremos ser asignar a
la columna de la derecha una distancia con el lado izquierdo de esos 200px, y con
el lado derecho de 0, en vez de indicar el ancho.
div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 200px;
}
div#columna_derecha {
position: absolute;
right: 0;
left: 200px;
top: 0;
height: 100%;
}

Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no
interpreta correctamente el ancho del elemento si definimos la posicin de los dos
lados, en vez de un lado y el ancho.
No obstante, como veremos, para obtener una columna fija, y la otra lquida, es
mejor hacerlas flotantes.
Podemos conseguir un efecto muy interesante controlando el desbordamiento de
las columnas. Podemos dejar una columna fija, por ejemplo con un men, y otra

que muestre el contenido, a la que damos la propiedad overflow: auto;. Esto

har que nos podamos desplazar por el contenido de la pgina manteniendo el
men siempre visible. Como por defecto, Internet Explorer siempre muestra la
barra de desplazamiento en la etiqueta html, queda mejor si lo
quitamos html {overflow:hidden;}.
Recuerda que podemos anidar las capas. Por ejemplo, podramos subdividir una
de las capas en otras dos dentro de ella, utilizando el mismo sistema.
Puedes ver un ejemplo de pgina maquetada con posicionamiento absoluto aqu.

Otro elemento muy utilizado en la maquetacin, es el encabezado y el pie.

Observa que en los ejemplos que hemos visto, colocbamos las capas en la parte
superior del todo (top: 0;). Si queremos utilizar un encabezado, en vez de
comenzar arriba del todo, debemos de dejar una separacin igual al alto del
encabezado. Si el alto del encabezado lo indicamos en porcentajes, el alto de las
columnas deber de ser del 100% - el alto del encabezado. En vez de eso, resulta
ms claro si en vez del alto de las columnas, indicamos la parte superior (top) y la
inferior (bottom). En este caso, nos dar igual la medida que utilicemos. Como
mejor lo veremos ser con un ejemplo:
div#encabezado {
position: absolute;
top:0; left: 0;
height:10%;
width:100%;
background-color:RoyalBlue;
}
div#columna_izquierda {
position: absolute;
top:10%; left: 0;
height: 90%;
width:20%;
background-color:SandyBrown;
}
div#columna_derecha {
position: absolute;
top:10%; right: 0;
bottom: 0;
width: 80%;
background-color:LightGreen;
}

Los principales inconvenientes del posicionamiento absoluto es que hemos de

definir el tamao del elemento, no se ajusta al contenido, y no se crean huecos en la
pgina, por eso no podemos utilizarlo para cualquier cosa.
Pg. 18.5

18.7. Posicionamiento flotante

El posicionamiento es un poco distinto al resto. Para empezar, no se define con la
propiedad position, si no con la propiedad float. Puede tomar estos valores:

left : flotante a la izquierda (float: left;).

right : flotante a la derecha (float: right;).

none : sin flotante.

En Dreamweaver, encontramos esta propiedad junto a las propiedades de Cuadro:

Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la
direccin indicada, hasta encontrar el lmite del elemento contenedor, u otro elemento
tambin flotante. Adems hace que todos los elementos fluyan alrededor de l.
Es muy comn utilizarlo en imgenes, para que el texto fluya alrededor de ellas. En el
siguiente ejemplo, todas las cajas contienen un prrafo con una imagen al principio
(<p><img /> Texto</p>). Slo cambia el float de la imagen.

Normal. La imagen queda en la posicin inicial, aumentando el alto de la

lnea, y no aparecen varias lneas de texto junto a la imagen.

Derecha. La imagen est en la misma posicin, pero con un float: right;. Esto
permite que aparezcan varias lneas de texto junto a la imagen, y cuando llegue al final,
que contine por debajo, rebasando la imagen. As, la imagen se integra mejor en el
documento.

Izquierda. La imagen est en la misma posicin, pero con un float: left;. Esto
permite que aparezcan varias lneas de texto junto a la imagen, y cuando llegue al final,
que contine por debajo, rebasando la imagen. As, la imagen se integra mejor en el
documento.
Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo,
no hay ms que aplicar un pequeo margin a la imagen, hacia el lado que est el texto.
Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que
contiene a otro flotante, no lo tiene en cuenta para su tamao a lo alto. Por ejemplo, el
siguiente prrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".

Normal. El prrafo se ajusta a la imagen y el texto.

Derecha. El prrafo slo ajusta su alto al texto.

Adems, si por ejemplo hay varios prrafos con elementos flotantes al mismo lado,
hace que se "amontonen":

Normal. Primer prrafo.

Normal. Segundo prrafo.

Derecha. Primer prrafo

Derecha. Segundo prrafo.

Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento.

Puede tomar tres valores:

left: impide el flotamiento a la izquierda.

right: impide el flotamiento a la derecha.

both: impide el flotamiento por ambos lados.

En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al segundo

prrafo le hemos dado la propiedad de estilo clear: right;.

Derecha. Primer prrafo

Derecha. Segundo prrafo.

Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado
del otro. En el siguiente ejemplo, hemos utilizado capas, todas con float:left; y un

pequeo margen para que no se peguen. Observa cmo se comportan cuando cambias el
tamao de la ventana:
De forma muy parecida, podemos utilizar el posicionamiento flotante para crear
columnas en un documento. Basta con que la suma del ancho de las capas que harn
de columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento
flotante. En Internet Explorer, si la suma de los anchos es del 100%, para algunos
tamaos de ventana no cabe, por lo que mostrar una columna debajo de la otra, aunque
esto slo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un
ancho total un poco menor, por ejemplo del 99% o 99.5%.
De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de
la siguiente manera:
div#columna_izquierda {
float: left;
width: 30%;
height: 100%;
background-color:SandyBrown;
}
div#columna_derecha {
float: left;
width: 69.5%;
height: 100%;
background-color:LightGreen;
}

Para aadir una cabecera al principio, no hay ms que poner una capa antes de las
columnas, con todo el ancho. Y para poner un pie, haramos lo mismo, pero colocndolo
despus de las columnas, y rompiendo el flotamiento con clear:both;.
div#cabecera {
width: 99.5%;
height: 10%;
background-color:RoyalBlue;
}
div#columna_izquierda {
float: left;
width: 30%;
height: 80%;
background-color:SandyBrown;
}
div#columna_derecha {

float: left;
width: 69.5%;
height: 80%;
background-color:LightGreen;
}
div#pie {
clear: both;
width: 99.5%;
height: 10%;
background-color:Violet;
}

La principal diferencia con el posicionamiento absoluto es que al flotante s le afectan

los mrgenes, propios y del elemento contenedor, y que no estamos obligados a definir el
alto. En el ejemplo anterior, hemos establecido el alto porque no hay contenido, pero si no
lo especificamos, el alto se ajustara al contenido del elemento.
La maquetacin ms comn es la que se realiza con elementos flotantes.

18.8. Posicionamiento fijo

El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento
absoluto, con las propiedades top, bottom, left y right. Pero su comportamiento es
distinto: el posicionamiento fijo se refiere siempre a la ventana del navegador,
independientemente de que el elemento posicionado est dentro de otro elemento con
posicionamiento, como pasaba con el absoluto. Adems, el elemento siempre se
muestra en la misma posicin, aunque la pgina sea larga y nos desplacemos hacia
abajo o hacia un lado.
Por ejemplo, usando el posicionamiento, podemos tener el men de la pgina siempre
visible a un lado, til en pginas con texto muy largas.
En el este ejemplo, puedes ver una pgina maquetada con posicionamiento fijo. En ella.
vers un encabezado y dos columnas que siempre aparecen visibles.
Una de las propiedades de este posicionamiento es que si imprimimos la pgina web y
ocupa varias pginas en papel, los elementos fijos se imprimen en todas las pginas, por
lo que puede resultar til para pies y encabezados.
Nota: Internet Explorer 6 no soportaba este posicionamiento.

18.9. Ancho de la pgina, lquido o elstico

Al crear el diseo de una web, bsicamente existen dos tendencias: que la pgina
ocupe todo el ancho de la ventana del navegador (diseo lquido), o que ocupe slo una
columna con un ancho fijo (diseo fijo).
No es que uno sea claramente mejor que otro, tienen sus pros y sus contras:
Diseo fijo.
En el diseo fijo, la pgina tiene un tamao exacto, normalmente expresado en pxel.
Esto facilita el diseo, sobre todo si est compuesto por imgenes divididas en trozos que
deben casar perfectamente, ya que podemos posicionar todo de forma exacta. Tambin
nos permite controlar el ancho de los elementos de texto, no creando columnas ni
demasiado largas ni demasiado pequeas.
Por contra, no aprovecha bien el espacio. Pensemos en una pgina de ancho fijo, de
900px. Si un usuario la ve desde la pantalla de su telfono mvil, que tiene un ancho de
320px, la mayor parte de la pgina no quedar visible. En cambio, si se ve desde un
monitor panormico de 24'', con 1920px de ancho, la mayor parte del espacio estar
desaprovechado.
Como ejemplo de diseo fijo, tenemos la pgina de inicio de aulaClic.
Diseo lquido.
En el diseo lquido, en vez de unidades absolutas se utilizan relativas al tamao de la
ventana. Esto hace que la pgina sea ms flexible a los distintos dispositivos de
visualizacin.
Por contra, es ms difcil controlar el diseo, sobre todo si se basa en muchas
imgenes, porque hay que pensar en qu ocurre si la ventana es muy pequea o muy
grande, y que no se descoloque todo al cambiar de tamao. Tambin puede producir
lneas de texto muy largas, lo que incomoda la lectura. Aunque el usuario siempre tiene la
opcin de hacer ms pequea su ventana.
Para intentar controlar un poco el tamao de los elementos, existen las propiedades de
estilo max-width (ancho

mximo), min-width (ancho

mnimo), max-height (alto

mximo) y min-height(alto mnimo).

Un ejemplo de diseo lquido puede ser la pgina de este curso.
Diseo elstico.

ltimamente, se ha acuado el trmino "diseo elstico" para el diseo en el que el

tamao de los objetos, no es ni fijo ni en relacin al tamao de la ventana, si no al tamao
del texto (basado enem), dando al usuario la posibilidad de cambiar su tamao, y en
proporcin, el de todos los elementos. Aunque permite que el texto se controle, sigue sin
adaptarse a las distintas ventanas, y resulta difcil controlar las imgenes.

Actualmente, la mayora de las pginas ofrecen un diseo fijo, sobre todo si tienen un
diseo ms elaborado. Las que ofrecen un diseo ms elstico, suelen mostrar una
columna central elstica, que se adapta a la pantalla, y columnas con un ancho fijo, para
mens o para la publicidad.
Pg. 18.7

18.10. Maquetacin prediseada en Dreamweaver

Como habrs observado, al crear un nuevo documento de Dreaweaver podemos partir
de una maquetacin prediseada.

Podemos dividir estos diseos en dos grandes grupos, diseos de maquetacin fija o
de maquetacin lquida (las que pone como flotantes).
En la previsualizacin de la derecha, los diseos fijos, de tamao en pxeles se
representan con un candado. En cambio, los diseos lquidos aparecen con un muelle.
Bsicamente, para cada grupo de diseo, podemos elegir si queremos una nica
columna principal central, columnas a los lados, pie o encabezado.
Hay que tener en cuenta que esto generar gran cantidad de estilos CSS. Por defecto
se aadir al head de la pgina, pero en el desplegable Diseo CSS en podemos elegir
si colocarlo en una hoja nueva, o en una existente.
Al elegir un diseo u otro, llegaremos se mostrar de forma parecida a este, en tonos
verdes-marrones si el diseo es fijo, o azulado si es elstico.

Partiendo de esta pgina, podemos modificarla como nuestros contenidos y estilo.

Si accedes su cdigo fuente, vers que tiene incluidos una gran cantidad de
comentarios. En ellos se explica por qu se ha puesto tal propiedad, o cosas que
podemos cambiar. Una vez acabada nuestra pgina, deberamos borrar estos
comentarios.
En los videotutoriales que encontrars en el siguiente apartado, podrs ver cmo
empleamos una de estas plantillas para maquetar nuestro sitio web.

18.11. Videotutoriales. Creando un sitio web completo

Con lo que hemos visto hasta ahora en el curso, ya podemos crear un sitio web
completo.
Puedes ver un cmo creamos este sitio web en los siguientes videotutoriales:

Parte 1:

Definiremos un nuevo sitio web, y comenzaremos creando la

maquetacin general del sitio, personalizando una de las plantillas prediseadas de

Dreamweaver.

Parte 2:

Modificaremos cada elemento hasta conseguir la maqutacin que nos

interesa para el sitio.

Parte 3:

Una vez completada la maquetacin, la convertiremos en una plantilla

en la que basaremos todas nuestras futuras pginas. En una de las pginas, usaremos
comportamientos de javascript para alterar algunos elementos, como las imgenes.

Parte 4:

Para acabar, crearemos las ltimas pginas, mostrando tablas con

informacin, un formulario de contacto, y una presentacin de imgenes embebida.

Ejercicio propuesto la Unidad 18

Prueba evaluativa de la Unidad 18

Pg. 18.8

Unidad 19. Sitios remotos (I)

En el tema 3 vimos cmo crear y trabajar con un sitio local.
Esta unidad est dedicada a los Sitios Remotos, veremos cmo crearlos y cmo
utilizarlos.
Definir un sitio remoto significa establecer una configuracin de modo que
Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por
eso se llama remoto) y as poder trabajar a la vez con tus archivos en el sitio local, es
decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en
Internet.
El modo en el que veremos que el programa se comunica con tu servidor ser FTP,
ya que es prcticamente el ms utilizado y muy pocos utilizan otras alternativas.
Lgicamente, antes de realizar estos pasos, deberemos de haber contratado un sitio, o
habernos registrado en uno gratuito.

19.1. Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las
opciones y que Dreamweaver se pueda conectar con nuestro servidor.
Para ello deberemos modificar la especificacin que creamos en su da del sitio con el
que estamos trabajando.
As que haz clic en el men Sitio y selecciona Administrar sitios.

Selecciona el sitio con el que quieras establecer comunicacin remota (o crea uno
nuevo para el caso) y pulsa Editar.
Vers que se abre el cuadro de dilogo de Definicin del Sitio.

La categora que buscamos es Servidores, en el listado de la izquierda.

Para configurar un nuevo servidor, pulsa el icono

+.

Ahora en el desplegable Conectar usando selecciona el mtodo de acceso que deber

utilizar Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros
explicaremos la opcin FTP.
Se mostrarn las siguientes opciones:

El Nombre de servidor es el nombre que le podemos asignar para identificarlo.

Aqu debers rellenar los datos que te facilit el servicio de hosting que contrataste. Si
no recuerdas los datos o has perdido el correo electrnico que seguramente te enviaron,
pdeles de nuevo la informacin.
Los datos que necesitas son los siguientes:
Direccin FTP o host es la direccin a la que se dirigir Dreamweaver para
conectarse a tu servidor ser del tipo ftp.servidor.com o tambin podrs encontrar
algunas que estn formadas en forma de direccin IP (como por ejemplo, 192.186.1.1)

En Nombre de usuario y Contrasea escribe el nombre de usuario y el password

para poder conectar con el servidor. Marca la casilla Guardar si quieres que el programa
recuerde la contrasea.
Una vez introducidos estos datos puedes pulsar el botn Prueba para ver si son
correctos y Dreamweaver puede crear una conexin con el servidor remoto.
En el campo Directorio raz podremos establecer una carpeta contenida en el
servidor donde queramos subir las pginas. Por ejemplo, es comn que por FTP podamos
acceder a muchas carpetas del servidor, pero hay una en concreto en la que hemos de
ubicar las pginas. Imagina que dentro de la estructura de carpetas del servidor remoto
tienes una que se llama pagina y dentro de esta otra que se llame principal. Podramos
indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa
ubicacin.
En el campo URL Web podemos introducir la direccin web de la raz del sitio, y as
probar nuestras pginas dinmicas.

Una vez hayas terminado Guarda todas las pantallas hasta volver a la vista de trabajo y
estaremos listos.

Unidad 19. Sitios remotos (I)

En el tema 3 vimos cmo crear y trabajar con un sitio local.
Esta unidad est dedicada a los Sitios Remotos, veremos cmo crearlos y cmo
utilizarlos.
Definir un sitio remoto significa establecer una configuracin de modo que
Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por
eso se llama remoto) y as poder trabajar a la vez con tus archivos en el sitio local, es
decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en
Internet.
El modo en el que veremos que el programa se comunica con tu servidor ser FTP,
ya que es prcticamente el ms utilizado y muy pocos utilizan otras alternativas.

Lgicamente, antes de realizar estos pasos, deberemos de haber contratado un sitio, o

habernos registrado en uno gratuito.

19.1. Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las
opciones y que Dreamweaver se pueda conectar con nuestro servidor.
Para ello deberemos modificar la especificacin que creamos en su da del sitio con el
que estamos trabajando.
As que haz clic en el men Sitio y selecciona Administrar sitios.

Selecciona el sitio con el que quieras establecer comunicacin remota (o crea uno
nuevo para el caso) y pulsa Editar.
Vers que se abre el cuadro de dilogo de Definicin del Sitio.

La categora que buscamos es Servidores, en el listado de la izquierda.

Para configurar un nuevo servidor, pulsa el icono

+.

Ahora en el desplegable Conectar usando selecciona el mtodo de acceso que deber

utilizar Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros
explicaremos la opcin FTP.
Se mostrarn las siguientes opciones:

El Nombre de servidor es el nombre que le podemos asignar para identificarlo.

Aqu debers rellenar los datos que te facilit el servicio de hosting que contrataste. Si
no recuerdas los datos o has perdido el correo electrnico que seguramente te enviaron,
pdeles de nuevo la informacin.
Los datos que necesitas son los siguientes:
Direccin FTP o host es la direccin a la que se dirigir Dreamweaver para
conectarse a tu servidor ser del tipo ftp.servidor.com o tambin podrs encontrar
algunas que estn formadas en forma de direccin IP (como por ejemplo, 192.186.1.1)
En Nombre de usuario y Contrasea escribe el nombre de usuario y el password
para poder conectar con el servidor. Marca la casilla Guardar si quieres que el programa
recuerde la contrasea.
Una vez introducidos estos datos puedes pulsar el botn Prueba para ver si son
correctos y Dreamweaver puede crear una conexin con el servidor remoto.
En el campo Directorio raz podremos establecer una carpeta contenida en el
servidor donde queramos subir las pginas. Por ejemplo, es comn que por FTP podamos
acceder a muchas carpetas del servidor, pero hay una en concreto en la que hemos de
ubicar las pginas. Imagina que dentro de la estructura de carpetas del servidor remoto

tienes una que se llama pagina y dentro de esta otra que se llame principal. Podramos
indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa
ubicacin.
En el campo URL Web podemos introducir la direccin web de la raz del sitio, y as
probar nuestras pginas dinmicas.

Una vez hayas terminado Guarda todas las pantallas hasta volver a la vista de trabajo y
estaremos listos.

19.2. El panel Archivos

Desde el panel Archivos seremos capaces de controlar nuestro sitio local y remoto de
forma fcil y rpida.
En este apartado veremos qu pasos debemos seguir para completar unas cuantas
acciones que nos sern bastante tiles.

A primera vista el panel Archivos muestra este aspecto:

Su uso es bastante sencillo. Observa los dos desplegables de la parte superior.

El primero te permite seleccionar el sitio con el que estamos trabajando. El segundo te

permite cambiar la vista de ese sitio.

Esta ltima opcin es muy til para ver el contenido que se encuentra subido en
Internet. Una vez hayas configurado las opciones del Servidor Remoto podrs desplegar
esta opcin y seleccionar Vista remota, se mostrarn todos los archivos que en ese
momento se encuentran en el servidor.

Ahora veremos para qu sirven los botones:

El botn Conectar

te permitir establecer una conexin con el servidor. De

forma predeterminada Dreamweaver se desconecta del servidor cada 30 minutos.

El botn Actualizar

actualiza las listas de las vistas local y remota. As podrs

ver el contenido exacto en cada momento de cada uno de los sitios, se utiliza sobre todo
cuando varias personas tienen acceso al sitio remoto para cambiar las pginas.
Utiliza el botn Obtener

para descargar al servidor local archivos que hayas

seleccionado en el panel Archivos en la vista remota. Estos archivos se copiarn en tu

sitio local, y en caso de ya existir se sobreescribirn.
El botn Colocar

acta de forma contraria. Sube los archivos seleccionados en

la vista local al servidor, se copiarn y si existen se sobreescribirn.

Luego los dos siguientes botones podrn ser utilizados si has activado la Proteccin
del sitio en el cuadro de dilogo de opciones Avanzadas al configurar el sitio remoto.
Utiliza el botn Proteger

para realizar la accin anterior de Obtener pero

protegiendo el archivo que se encuentra en el servidor convirtindolo en slo lectura. De

esta forma si alguien con acceso al servidor intenta modificar el archivo le ser imposible
hasta que lo desprotejas.

Del mismo modo, el botn Desproteger

acta del mismo modo que el

botn Colocar pero cuando sube el archivo al servidor lo desprotege para que pueda ser
modificado por otras personas.
Pg. 19.2

9.3. Sincronizar Sitios

sta es una de las opciones ms tiles en cuanto a Sitios Remotos.

Esta opcin permite hacer un estudio de los archivos situados en el sitio local y remoto
y establecer el modo en el que se debern copiar, borrar y sobreescribir los archivos para

conseguir un objetivo: al final de la sincronizacin, los archivos en el sitio remoto y el sitio

local deben ser iguales.
Para realizar una sincronizacin haz clic derecho sobre cualquier zona en el
panel Archivos y selecciona la opcinSincronizar....

Vers que aparece un cuadro de dilogo como ste:

ste es el paso ms importante en la sincronizacin, pues decidiremos de qu modo se

va a realizar.

En el desplegable Sincronizar: seleccionaremos una de las dos opciones, Archivos

locales seleccionados solamente o Todo el sitio. Dependiendo de qu opcin elijas se
copiarn slo unos archivos o todos los que forman el sitio.

En el desplegable Direccin: estableceremos las pautas que se deben seguir

durante la sincronizacin.
Si seleccionas Colocar archivos ms nuevos en remoto cuando se comparen ambos
sitios, se sobreescribirn aquellos en el sitio remoto que tengan una fecha de modificacin
menor a la que exista en el local. De esta forma copiars en direccin Local a Remoto.
Si seleccionas la opcin Obtener archivos ms nuevos de remoto se copiarn
aquellos archivos que se encuentren en el sitio remoto que tengan una fecha de
modificacin mayor que la del local. En este caso estaremos copiando en
direccin Remoto a Local.

La ltima opcin, Obtener y colocar archivos ms nuevos, se refiere a la

sincronizacin como tal. Evala los archivos en el sitio remoto y local y copia los ms
nuevos en el que contiene los ms viejos. En este caso la Sincronizacin es
Bidireccional.

Marca la opcin Eliminar archivos remotos no existentes en la unidad local si

quieres que los archivos que se encuentren en el remoto que no estn en el local se
borren.
Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar, slo
nos quedar aceptarlo.

Debido a que no todos los servidores tienen acceso FTP y que no tienes porqu tener
acceso a un servidor remoto no realizaremos ningn ejercicio sobre este tema. Si quieres
establecer una conexin con tu servidor remoto slo tendrs que seguir los pasos
explicados en la teora.

Prueba evaluativa de la Unidad 19

Pg. 19.3

nidad 20. Servidor de Pruebas (I)

20.1. Introduccin a PHP
Hasta ahora hemos aprendido cmo mostrar contenido esttico en nuestras pginas
web.
Dejando de lado todos los efectos o animaciones que podamos hacer, en determinadas
ocasiones nos es necesario darle un poco ms de dinamismo al contenido del sitio.
Digamos que necesitamos mostrar listados de cualquier tipo que puedan generarse
automticamente, o incluso que se repartan en varias pginas.
Es posible que tambin necesites que el contenido se actualice peridicamente y
tengas demasiadas pginas como para ir modificndolas una a una.
O incluso te gustara crear una pgina individual para cada elemento que aparezca un
listado y resulta muy laborioso crear una pgina individual para cada uno de ellos.

Muy bien. Sin dejar de lado HTML, comenzaremos a crear pginas ms verstiles
utilizando PHP.
PHP es un lenguaje de programacin. Pero no te preocupes, Dreamweaver contiene
las suficientes herramientas como para manejarte sencillamente sin que tengas que saber
ni una lnea de cdigo.
Desde luego, si el tema te apasiona no lo dudes. Aprende PHP y utilzalo para crear
prcticamente lo que te venga a la cabeza. Aunque eso se encuentra fuera de este curso.
Nosotros veremos lo que es posible hacer utilizando las herramientas de que
dispone Dreamweaver.

Como decamos PHP es un lenguaje de programacin, as que deberemos aprender

antes cmo funciona.
Hasta ahora nosotros crebamos pginas con extensin HTML, este tipo de archivos,
cuando son requeridos por un navegador se descargan automticamente del servidor y
se visualizan tal y como son en el cliente (el ordenador del usuario que est viendo la
pgina).

PHP acta de forma diferente.

Un archivo con extensin PHP, cuando es requerido por el cliente se ejecuta en el
servidor y genera una pgina web con cdigo HTML, y es este cdigo HTML el que se
enva y se visualiza en el navegador del usuario.
De esta forma, el contenido del archivo PHP es completamente transparente al usuario
(adems de serle imposible ver el contenido del archivo) y slo podr ver el resultado de
la peticin que ha creado (es decir, lo que genera el archivo PHP segn convenga en cada
momento).
Vers que esto es ms fcil de entender cuando vayamos avanzando en la unidad.

Una de las utilidades de las pginas PHP es que PHP es capaz de buscar en una
base de datos mientras se est ejecutando en el servidor y mostrar los datos obtenidos
en cdigo HTML para que el navegador del cliente los pueda visualizar:

Como puedes ver PHP puede ser muy til a la hora de recuperar datos almacenados lo
que te ser muy til si decides guardar en forma de tablas informacin relativa a tus
productos, elementos sobre los que ests trabajando, entradas de blog, etc...
Si no sabes muy bien qu es una base de datos visita este tema bsico sobre Bases de
datos.

0.2. Estructura PHP

Si abres un archivo PHP vers que tiene cierto parecido a un archivo HTML.
Esto es debido a que el cdigo PHP se incrusta dentro del cdigo HTML. nicamente
ser necesario introducir un par de marcas para establecer el principio del cdigo y el
final.
Veamos un ejemplo:

<?xml
version="1.0"
encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
<?php

echo "<p>&iexcl;Hola mundo!</p>";

?>
</body>
</html>

Este cdigo podra pegarse en un archivo PHP, guardarse en un servidor que soporte
PHP y ejecutarse.
El resultado que nos mostrara sera una pgina web con un prrafo en el que se podra
leer Hola mundo! (la instruccin echo escribe texto en pantalla).
Sin embargo, aunque se trate de un archivo PHP puedes ver que se parece muchsimo
a un HTML. Slo que en el momento de agregar cdigo de programacin hemos aadido
dos etiquetas (una de apertura y otra de cierre ) para indicar que lo que se encuentra entre
ellas es cdigo PHP y debe ser ejecutado.
Estas etiquetas son <?php y ?>, aunque tambin es posible encontrar su forma
abreviada <? y otra de cierre ?> por lo que el cdigo anterior se podra sustituir por:

<?
echo "<p>&iexcl;Hola mundo!</p>";
?>

Lo recomendable es escribirla de forma completa, para evitar posibles problemas con la

configuracin del servidor. No vamos a entrar en ms detalle, pues Dreamweaver se
encargar de generar todo esto automticamente.
Pero te ser bastante til cuando empecemos a programar pginas para poder localizar
con un vistazo el cdigo que se haya creado.
Pg. 20.2

20.3. Instalar un servidor local con WampServer

No podemos ejecutar una pgina PHP en nuestro equipo y verla como lo hacamos
como un pgina HTML, ya que nuestro navegador no puede ejecutar su cdigo, as que
mostrar todo. Requerimos verla a travs de un servidor que sea capaz de ejecutar este

cdigo, y de consultar una base de datos si es necesario.

Para poder continuar con el curso, necesitamos instalar un servidor local o servidor
de pruebas en nuestro equipo que sea capaz de realizar todo lo anterior. Vamos a
emplear WampServer (antes conocido como WAMP). Es un servidor gratuito, sencillo de
instalar y de usar.

Para ello necesitars descargar WampServer 2.0 (aprox. 15 MB), un paquete autoinstalable que te ofrece la posibilidad de utilizar Apache (para correr PHP) y
utilizar MySQL (bases de datos).
Trabajaremos con la versin 2.0i, la ltima en el momento de creacin del curso (2010).
Puede que descargues una versin posterior, pero no debera haber demasiadas
diferencias.
Nota: WampServer puede ejecutar PHP. Existen otros lenguajes para pginas
dinmicas, como ASP o Java, que requieren de otro tipo de servidores, y que no veremos
en este curso.
En este curso seguiremos los pasos que hacen falta para instalar este paquete, pero
existen muchsimos de ellos.
Vamos a ver paso por paso lo que debers hacer.
Una vez tengas el archivo ejecutable en tu ordenador (en nuestro caso se
llama WampServer2.0i.exe, haz doble clic sobre l para empezar la instalacin.
Se mostrar la siguiente pantalla:

Aqu nos dan la bienvenida as que simplemente haz clic en Next > para continuar.

Esta es la pantalla de acuerdo de licencia. Debers aceptarlo haciendo clic en la

opcin I accept the agreement y pulsar el botn Next >.

Pg. 20.3

Continuamos con la instalacin.

En esta ventana nos preguntan dnde queremos que se guarde el programa.

La opcin por defecto es en la raz del sistema (c:). Si empleas Windows XP, puedes
instalarlo con el resto de programas, en C:\Archivos de programa, y as lo tendrs todo
ms

ordenado.

En

cambio,

si

empleas Windows

Vista o Windows

7,

no

te

recomendamos esta opcin, porque se pueden producir problemas con los permisos de
seguridad que Vista aplica a esa carpeta. Si tienes otra particin de disco, para datos u
otros programas, puedes instalarlo ah.
En cualquier caso puedes navegar por las carpetas pulsando en Browse....
Si no sabes muy bien qu hacer, deja la opcin por defecto.
Una vez elegida la ubicacin, pulsamos Next >.

En la siguiente pantalla marcamos si queremos crear un acceso directo en el Escritorio

(Create a Desktop icon) o en el men de inicio rpido (Create a q Quick Launch icon)
junto la botn de inicio. Si no marcas ninguna opcin, tendrs que ejecutar el programa
desde el men de Inicio Todos los programas.
Una vez elegidas nuestras opciones, pulsamos Next >.
Pg. 20.4

Ya casi hemos terminado. En la siguiente pantalla podemos revisar los datos elegidos

Hacemos clic en Install para comenzar con la instalacin, que tardar unos segundos.
Una vez instalado, tendremos que configurar algunas opciones. La primera es
el navegador predeterminado.

Detectar el que tenemos como predeterminado y slo tendremos que pulsar en S. Si

queremos cambiarlo, pulsamos en No y elegimos otro.
En la siguiente ventana, deberamos de introducir la configuracin para poder enviar
emails con PHP.

Como no la conocemos, no tenemos instalado un servidor de correo, dejamos las

opciones de ejemplo y pulsamos Next >.
Hemos terminado de instalar el programa, se mostrar la siguiente ventana:

Marca la casilla si quieres que se ejecute (Launch) cuando cerremos el instalador.

Haz clic en Finish para finalizar.
Pg. 20.5

20.4. Configuracin inicial

Vamos a arrancar la aplicacin. Para ejecutar el programa slo tenemos que ir
a Inicio Todos los programas WampServer y finalmente en start WampServer, o
utilizar su acceso directo, si lo creaste durante la instalacin.
El programa no abre ventanas. La nica referencia que tenemos de l es su icono
en el rea de notificacin (junto al reloj).

Cambiar el idioma.
WampServer est disponible en una gran cantidad de idiomas. Para seleccionar uno,
basta con hacer clic derecho sobre el icono, y seleccionarlo desde la opcin Language,
del men contextual.

Las capturas que mostraremos a partir de ahora, sern en espaol. Ten en cuenta que
si usas otra versin, algunos nombres de comandos pueden variar segn la versin de la
traduccin.

Localhost
Qu es el localhost? Para qu sirve?

Hemos estado hablando de crear un servidor. Un servidor remoto (el que se encuentra
en Internet y requiere de una conexin FTP para subir archivos) tiene una direccin
asociada.
Puede ser una direccin formada por un nombre de dominio, como www.aulaclic.es, o
por una direccin IP (conjunto de 4 nmeros del 0 al 255 separados por puntos,
como 213.188.129.143). Realmente, el nombre en texto siempre est asociado a una IP,
pero se utiliza para ser ms fcil de recordar.
Este es el modo en el que accedemos a un servidor remoto, dando su nombre ya sea
por dominio o por IP.

Pues bien, localhost se corresponde con el nombre de dominio del servidor local.
Vers que una vez instalado WAMP podremos acceder a nuestro servidor local
escribiendo en la barra de direcciones del navegador http://localhost/. Se mostrar una
pantalla parecida a sta, con informacin sobre la versin:

Tambin podramos hacerlo escribiendo http://127.0.0.1/ que es la direccin IP de

nuestro propio ordenador.
Lo que estamos haciendo es acceder a la carpeta que tiene WampServer por defecto
establecida como localhost. Esta carpeta se encuentra dentro de la carpeta de instalacin,

en una subcarpeta llamada www. Los documentos que tengamos ah sern accesibles
por el servidor.
Para poder acceder a los documentos que hemos ido creando, tenemos varias
opciones:

Podramos copiar nuestros archivos all. Por ejemplo, si copiamos dentro de www la
carpeta
del
sitio animales,
podramos
acceder
al
sitio
escribiendo http://localhost/animales en la barra de direcciones del navegador.
Esta
no
es
la
mejor
solucin,
sobre
todo
si
hemos
instalado WampServer en Archivos de programa.

Podemos cambiar la ubicacin de localhost a la carpeta que queramos. Para ello

deberamos
de
editar
el
archivo httpd.conf (clic
sobre
el
icono Apache httpd.conf). Se abrir un archivo de texto. En l buscamos las dos
apariciones del DocumentRoot (basta con buscar www), que mostrar la ruta actual
(por ejemplo "c:/wamp/www" o "c:/program files/wamp/www") y cambiarla por la
que queramos. Adems, debemos de copiar el contenido de www a la nueva
carpeta. Para que funcione, tenemos que reiniciar el servidor.

Otra
opcin
es
crear
un alias. De
forma
que
al
escribir http://localhost/miswebs accedamos a los documentos de una carpeta que
no est realmente dentro de www. Vamos a realizar esto ltimo por ser lo ms
cmodo,
creando
un
alias
llamado sitios.
Para crear una alias, sique el ejercicio paso a paso Crear un alias en
WampServer.

Independientemente de la opcin que elijamos, tenemos que tener claro que slo
podremos acceder a los archivos que estn dentro de la carpeta definida como Carpeta
del servidor o a la identificada con un alias.
Pg. 20.6

20.5. Trabajar con un servidor local WampServer

Para

ejecutar

el

programa

slo

tenemos

que

ir

a Inicio Todos

los

programas WampServer y finalmente en start WampServer, o utilizar su acceso

directo, si lo creaste durante la instalacin.
En el rea de notificacin aparecer un nuevo icono:

. (Puede que el diseo de

estos iconos varen un poco segn la versin que hayas instalado).

Como

ya

hemos

dicho,

WAMP

se

encarga

de

ejecutar

principalmente

dos servicios: Apache (para correr PHP) y MySQL (para trabajar con bases de datos).
El icono de la barra de tareas tiene varios estados que dependen de cmo se
encuentren estos servicios:

Este icono

Si se muestra este otro icono

significa que nicamente uno de los servicios se
encuentra ejecutndose en este momento, el otro se encuentra suspendido o no
est instalado.

Si ves este icono

significar que ninguno de los servicios se encuentra
ejecutndose en estos momentos.

indica que ambos servicios estn ejecutndose correctamente.

Si haces clic izquierdo sobre cualquiera de estos iconos se mostrar el men de

WampServer (a la derecha).
Nos centraremos, ahora, en la parte inferior que se encuentra bajo el ttulo de Quick
Admin.
Aqu podrs encontrar 3 comandos que tienen que ver con el estado de los servicios:

Iniciar los Servicios (Start All Services) intentar lanzar los dos servicios
(Apache y MySQL).

Detener los servicios (Stop All Services) parar los servicios que se estn
ejecutando, por lo que el estado del icono en la barra de tareas cambiar a

Reiniciar los servicios (Restart All Services) parar los servicios e intentar
ejecutarlos de nuevo. Utiliza esta opcin cuando se te presente algn problema en
su funcionamiento, o hayas cambiado algo en los archivos de configuracin.

Por defecto, el servidor de WampServer est apagado (off-line). Esto quiere decir qu
slo desde se equipo se puede ver el contenido del localhost.
Si pulsamos en Encender (Put Online) hacemos pblico este contenido y otras
personas pueden verlo. Esto no quiere decir que alguien buscando en Google pueda
llegar a visitarnos. Slo estar disponible para quienes conozcan nuestra IP pblica. Si
quieres conocer la tuya, puedes encontrar muchas pginas que te la muestran, como Cul
es mi IP.
Nota: Si te conectas a Internet a travs de un router o cortafuegos, debers de
configurarlo para que permita el acceso a localhost. Normalmente basta con abrir el
puerto 80.
Cuando el servidor est apagado (off-line) los iconos muestran un pequeo
candado:

Para volver de nuevo al estado cerrado podrs seleccionar la opcin Apagar (Put
Offline) que aparecer en vez de Encender.

Podemos

trabajar

con

cada

servicio

independientemente,

desde Apache Service o MySQL Service.

No vamos a detallar cada opcin. Explicaremos las comunes.
Las opciones Iniciar/Continuar Servicio, Detener Servicio y Reiniciar Servicio son
los equivalentes a los que vimos en el men principal pero tratados individualmente para
cada uno de los servicios.
Observa las dos ltimas opciones Install Service y Remove Service, te servirn para
instalar y desinstalar el servicio. Al instalar el servicio este se iniciar con Windows, por lo
que no tendremos que ejecutar WampServer cuando queramos usarlo.

Finalmente veremos las opciones que vamos a utilizar de momento que se encuentran
en la parte superior..

Localhost abre una nueva ventana del navegador mostrando el contenido raz
del localhost. Por defecto vers una pgina creada por WAMP desde donde podrs
navegar
por
el
contenido
de
las
carpetas.
De
todas
formas
tambin
puedes
abrir
una
nueva
ventana
y
escribir http://localhost/carpeta/ para ver el contenido de una carpeta que se
encuentre en el directorio que asignaste al localhost o acceder a un alias.

WWW Directory abre en una ventana del Explorador de Windows la carpeta que
asignaste
al localhost.
Desde aqu podrs trabajar con los ficheros como hacamos hasta ahora.
Copindolos, movindolos o borrndolos cuando sea necesario.

Por ltimo la opcin phpMyAdmin nos llevar a una pgina web desde donde
podremos controlar, gestionar y crear nuestras bases de datos.

Recuerda, que a no ser que instales los servicios, cada vez que arranques el equipo
debers de arrancar tambin WampServer para comenzar a trabajar con l.
Pg. 20.7

20.6. Configurar un servidor de pruebas

Una vez instalado WampServer tendremos listo un servidor local capaz de correr PHP
sin ningn tipo de problemas.
Ahora podemos combinar esta aplicacin con Dreamweaver para probar las pginas
dinmicas que vayamos creando en nuestro sitio.
No tendremos ms que declarar un Servidor de prueba en Dreamweaver.
Para ello debers editar la configuracin del sitio, haz clic en Sitio y luego
en Administrar sitios....
Selecciona el sitio que quieras modificar y pulsa Editar.
Se abrir el cuadro de dilogo de Configuracin del sitio.

Selecciona la categora de Servidores.

Para configurar un nuevo servidor, pulsa el icono

+.

En las opciones, en Conectar usando tenemos que elegir Local/red, ya que el servidor
est en nuestro propio equipo (equipo local).
Las opciones cambiarn y se mostrarn as:

Ahora debers rellenar los datos del servidor de pruebas.

En Carpeta

de

servidor deberemos

seleccionar

una

carpeta

dentro

del localhost donde guardaremos los archivos que queramos probar. Pueden ocurrir dos
cosas:

Si nuestros archivos estn ya en localhost (o accesibles con un alias), podemos

indicar la misma carpeta en la que est definido el sitio en Dreamweaver.

Si no estn en localhost, debemos de crear una carpeta all para el sitio. Al vincular
esa carpeta con el sitio, Dreamweaver ir copiando all los archivos necesarios.

En nuestro caso nuestro localhost lo hemos definido un alias (sitios) para la carpeta
que contiene los sitios con los que estamos trabajando. Por lo tanto en Carpeta de
servidor, dejamos la misma carpeta del sitio en Dreamweaver. Insistimos en que si tienes
la carpeta de servidor en otra ubicacin, debes indicarla aqu.

finalmente

escribe

el URL del

sitio

de

pruebas.

Siempre

comenzaremos

por http://localhost/. Si slo tenemos un sitio, lo normal es definirlo directamente ah. Si

tenemos varios, debemos de indicar la subcarpeta correspondiente o su alias. En nuestro
caso

tenemos

hemos

definido

el

alias sitios.

Por

lo

tanto,

aqu

indicaremos http://localhost/sitios/carpeta_del_sitio/
Pulsa Guardar y se aplicarn los cambios.
Ahora en el listado de servidores, seleccionamos el recin creado como un Servidor de
pruebas.

A partir de este momento, cada vez que, trabajando sobre un archivo PHP, pulses la
tecla F12 para visualizarlo en el navegador se mostrar gracias a nuestro localhost.
Pero antes nos mostrar el siguiente mensaje:

Si la carpeta local y la carpeta del servidor de pruebas no es la misma, debemos de

decir que S, para que Dreamweaver copie los archivos necesarios al servidor. En nuestro
caso, como es la misma carpeta, podemos decir que No.

Nota: recuerda que para poder visualizar los archivos en localhost debers tener
WAMP ejecutando al menos el servicio de Apache (que es el que se ocupa de correr
PHP).

Para practicar la creacin de servidores de prueba realiza el Ejercicio Paso a Paso

de Servidores de Prueba.
Pg. 20.8

20.7. Introduccin a phpMyAdmin

En este curso no vamos a explicar en profundidad el uso de phpMyAdmin debido a su

extensin. Pero s daremos unas cuantas directrices para que puedas empezar a
manejarte con l y a dar tus primeros pasos en el uso de las bases de datos.
Para

abrir phpMyAdmin,

haz

clic

en

la

opcin phpMyAdmin del

men

de WampServer que se obtienen al hacer clic sobre su icono. O accede a la

direccin http://localhost/phpmyadmin/.
Se abrir una ventana del navegador y mostrar la ventana principal de la aplicacin:

Desde aqu podremos crear nuevas bases de datos, tablas y usuarios con sus
respectivos privilegios.
Pero, vayamos paso a paso.

Nota: Algunos iconos y mens pueden variar ligeramente si empleas una versin
posterior a la del curso, aunque la funcionalidad debera ser la misma.

20.8. Crear una base de datos en phpMyAdmin

Para crear una nueva base de datos en phpMyAdmin basta con escribir el nombre de la
nueva base de datos en el cuadro de texto que aparece bajo Crear nueva base de
datos en la pgina principal y pulsar el botn Crear.
La nueva base de datos se crear automticamente.

Puedes seleccionar un juego de caracteres en el desplegable Cotejamiento, si lo dejas

en blanco se tomar el valor por defecto que variar segn la configuracin de cada
servidor.
Es

recomendable

que

escojas

la

opcin utf-8_spanish_ci para

maximizar

la

compatibilidad con todos los caracteres especiales del alfabeto en castellano y para que la
salida en cualquier navegador sea correcta.

Una vez creada la base de datos podrs acceder a ella desde el men de la izquierda.
Despliega el listado Base de datos y selecciona la base de datos que quieras modificar:

Para practicar la creacin bases de datos realiza el Ejercicio Paso a Paso de

creacin de Bases de Datos.
Pg. 20.9

20.9. Crear una tabla en phpMyAdmin

Cuando selecciones una Base de Datos en phpMyAdmin vers una nueva pantalla
desde donde podrs ver todas las opciones para poder trabajar en ella:

En este caso en la pantalla principal encontraremos muy poca cosa porque no contiene
ninguna tabla por ahora.
Para crear una tabla lo nico que debes hacer es escribir su Nombre y especificar
su Nmero de campos (luego puedes seguir aadiendo campos).

Cuando hayas terminado pulsa el botn Continuar y vers una pantalla como sta:

Aqu debers establecer la configuracin de cada uno de los campos de la tabla.

Rpidamente definiremos las propiedades ms frecuentemente utilizadas:

Campo: El nombre del campo.

Tipo: El tipo del valor del campo: texto (varchar o text), nmero entero (int), decimal
(decimal), etc...

Longitud/Valores Tamao mximo del campo. Un texto de tamao 15 slo podr

tener 15 caracteres.

Predeterminado: Un valor predeterminado para el campo, si al crear el registro no

se le asigna otro valor.

Cotejamiento: Juego de caracteres que utilizar el campo.

Atributos: Dependientes del tipo de dato. Por ejemplo, que un numrico solo sea
positivo.

Nulo: Si el campo permite valores nulos, o debe rellenarse obligatoriamente.

ndice: Indica si el campo est indexado. Puede ser clave principal, valores nicos,
etc...

A_I: Si el campo es un auto-incremento, que se establecer automticamente al

crear nuevos registros.

Comentarios: Nos permite agregar comentarios descriptivos del campo o su

contenido.

Pulsa el botn Grabar cuando hayas acabado y la tabla se crear.

Cada vez que realicemos una modificacin se mostrar un mensaje similar a ste si
todo ha ido bien:

O parecido a esto si no se ha podido realizar la accin:

Ahora el aspecto de la ventana de la base de datos ser diferente pues mostrar el

listado de tablas contenidas con sus propiedades.

Haciendo clic en el botn

al lado del nombre de la tabla o haciendo clic sobre ella

en el men de la izquierda podrs acceder a la vista en detalle de sus campos y

propiedades. Para ello, asegrate de que ests en la pestaa Estructura.
En esta ltima vista puedes hacer clic en la pestaa Examinar para ver el listado de
todos los registros. Utiliza la pestaa Buscar para filtrar el listado por los valores de algn
campo.

Para practicar la creacin tablas realiza el Ejercicio Paso a Paso de creacin de

Tablas.

20.10. Insertar datos en una tabla

Rellenar tablas desde phpMyAdmin es muy sencillo.
Si no tienes ninguna base de datos seleccionada, selecciona previamente la que
contiene la tabla a utilizar desde el desplegable que encontrars en la parte superior
izquierda de la pantalla.
Luego selecciona la tabla con la que quieres trabajar y haz clic en la pestaa Insertar.

En seguida se abrir una ventana desde donde podrs aadir una fila (o registro) a la
tabla indicando el valor de cada campo:

En

la

columna Valor escribe

el

valor

del Tipo de Cada campo

pulsa Continuar cuando hayas acabado.

Otro modo de rellenar una tabla es importando datos que tengamos en un archivo
proveniente de otra base de datos o hecho por nosotros mismos.
Para ello, tendrs que hacer clic en la pestaa Importar en el mismo men donde
encontraste la opcin anterior:

Se abrir una ventana desde donde debers especificar qu archivo quieres importar:

Observa que debers indicar la localizacin del archivo que contiene los datos que
queremos importar.

Y sobre todo, lo ms importante, el Juego de caracteres que utiliza el archivo para

que los datos que se introduzcan en la tabla se puedan adaptar de forma correcta y
mantener la coherencia del texto.
Una vez introducidos estos datos bastar con que pulses el botn Continuar y los
registros (si no hubo ningn fallo en el archivo) se aadirn automticamente.

Para practicar realiza el Ejercicio Importar Datos a una Tabla.

Pg. 20.11

20.11. Modificar la estructura de la tabla

Una vez tengas creada una tabla en la base de datos es posible editarla para modificar
la configuracin de algn campo o incluso aadir uno nuevo.
Para ello deberemos ir a la vista de la tabla haciendo clic en ella en el men que
encontramos en la izquierda de la pgina una vez seleccionada la base de datos.

Esto har que se nos muestre la tabla en la ventana. Si la tabla est vaca, veremos
directamente su estructura. Si ya contiene datos, los veremos. En este caso, pulsa sobre
la pestaaEstructura.
El modo en que podremos modificarla ser muy fcil.

Observa la ventana:

Para aadir nuevos campos a la tabla slo tienes que escribir el nmero de campos que
vas a crear en el campo Aadir ..... campo(s).
Luego selecciona la posicin donde se aadirn, Al final de la tabla, Al comienzo de
la tabla o Despus de.. y pulsa el botn Continuar.
Se abrir la ventana de definicin de campos que vimos en el apartado anterior y slo
debers rellenarla como ya hemos visto.

Modificar campos ya existentes tampoco es muy complicado, slo tendrs que utilizar
los botones que se encuentran en la columna accin del campo correspondiente.

El botn Modificar
te permitir modificar la configuracin del campo. Podrs
cambiar todas las opciones que viste cuando lo creaste.

El botn Eliminar
borrar el campo y todos los valores almacenados en cada
registro que le correspondan.

El botn Clave Principal

principal de la tabla.

El botn ndice

Finalmente el botn nico

establece el campo seleccionado como campo con
valor nico, es decir, no puede contener valores repetidos.

establece que el campo se marque como clave

crea un nuevo ndice en la tabla con el campo seleccionado.

Si queremos realizar la misma accin sobre varios campos a la vez, podemos

marcarlos con las casillas de verificacin que se encuentran en el extremo izquierdo y
luego pulsar el icono correspondiente a la accin a realizar en la fila donde dice Para los
elementos que estn marcados:

Pg. 20.12

20.12. Modificar datos de una tabla

Tambin una vez insertados datos en una tabla de una base de datos, podremos
modificarlos.
Esto es posible accediendo al contenido de la tabla desde la pestaa Examinar que
encontrars en la parte superior de la ventana, aunque por es la vista que se muestra por
defecto al abrir la tabla:

Hacer clic en ese elemento har que puedas visualizar el contenido de la tabla.
Y al mismo tiempo te dar la posibilidad de editar o eliminar el contenido de cada
registro, adems del registro completo.

Desde esta vista podremos ver la informacin almacenada en la tabla.

Podemos utilizar los botones de la primera columna para modificar los datos.

El botn Modificar
te permitir modificar el contenido del registro. Plsalo e irs
a la ventana que vimos en el apartado de Insertar datos.

El botn Eliminar
borrar el registro completo. Esta accin no es reversible as
que ten cuidado cuando la utilices.

Si quieres borrar varios registros de golpe, marca las casillas de esos registros y pulsa
el botn Eliminar de la lnea Para los elementos que estn marcados.

Pg. 20.13

20.13. Establecer privilegios en phpMyAdmin

Entendamos primero qu son los usuarios. Cuando una pgina en PHP se conecta a
una base de datos, lo hace a travs de una conexin, indicando un usuario y una clave.
Por lo tanto, slo se puede conectar a aquellas bases de datos de las que conozca estos
datos.
Al conectarse lo hace a travs de un usuario. Y ese usuario puede realizar
determinadas acciones sobre la base de datos. Es decir, tiene determinados permisos.
Podemos hacer que las conexiones creadas cuando un visitante llegue a nuestra
pgina emplee un usuario distinto del que empleamos nosotros cuando nos conectamos
para administrar nuestra base de datos. Desde el punto de vista de la seguridad, esos
usuarios no deberan de poder realizar las mismas acciones, es decir, deben de
tener privilegios distintos. Por ejemplo, que slo puedan ver determinadas tablas o no
puedan borrar registros.

En cualquier momento puedes utilizar el botn

para volver a la pantalla principal de

phpMyAdmin.
Aqu encontraremos un enlace a la seccin de Privilegios
que nos ocupa en este apartado.
Haz clic sobre l y vers una ventana similar a la siguiente:

que es la

Desde aqu podemos crear los distintos usuarios que se conectarn a la base de datos,
y darle distintos privilegios a cada uno.

Para crear un nuevo usuario slo tienes que hacer clic en Agregar un nuevo usuario.
En la siguiente ventana tendrs que introducir los valores que definirn la cuenta:

En Servidor selecciona Local porque es el nico modo con el que vamos a trabajar en
estos momentos. Esto quiere decir que se conecta desde el mismo servidor en el que est
la base de datos.
El resto puedes configurarlo a tu gusto.
Ms abajo encontrars estas opciones:

Aqu podrs seleccionar los privilegios del usuario en forma global, las opciones que
marques aqu se aplicarn sobre todas las bases de datos del sistema.
Puedes

especificar

tambin

un

etc...). 0 indica sin lmite.

Cuando ests listo pulsa Continuar.

lmite

de

recursos

(conexiones,

peticiones,

hora vers la pantalla con las opciones del nuevo usuario que acabas de crear. Vers
que algunas ya las conoces, como los privilegios globales.
Lo que nos interesa en este momento son unas opciones que encontrars ms abajo,
los privilegios especficos. Es decir, privilegios enfocados a una nica base de datos:

Selecciona una base de datos en el desplegable o escribe su nombre en el cuadro de

texto. Luego pulsa Continuar.

Selecciona los privilegios que quieras aplicar y pulsa Continuar para finalizar.
Vers que en la misma pgina ms abajo tienes una opcin muy parecida a la que
acabamos de ver pero actuando nicamente sobre una tabla de la base de datos.
Estableciendo los privilegios de este modo recortaramos muchsimo ms la actuacin
del usuario sobre la base de datos.

Los privilegios ms comunes son los siguientes:

SELECT: permite al usuario realizar una consulta de seleccin para poder leer los
datos de una tabla.

INSERT: permite al usuario realizar una consulta de creacin de registro

para introducir nuevos datos en una tabla.

UPDATE: permite al usuario actualizar los valores de una tabla.

DELETE: permite al usuario eliminar registros de una tabla.

CREATE: permite al usuario crear tablas en la base de datos.

DROP: permite al usuario eliminar una tabla o la base de datos completa.

Si conoces un poco SQL estos privilegios ya te sern familiares.

Para practicar la creacin de privilegios realiza el Ejercicio Paso a Paso de

Asignacin de Privilegios.

En este tema no realizaremos ejercicios sobre la creacin de la base de datos del sitio Blog, en
temas posteriores veremos qu tablas especficas deberemos crear y las crearemos entonces.

Unidad 21. Pginas dinmicas (I)

21.1. Introduccin

En esta unidad vamos a ver cmo utilizar Dreamweaver para crear pginas PHP y
acceder a datos almacenados en una base de datos.
Como vimos en el tema anterior, las pginas dinmicas se almacenan en el servidor y
cuando son requeridas se ejecutan y devuelven una salida de cdigo HTML al cliente
que lo visualizar en su navegador.

Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexin a una
base de datos y extraer o guardar informacin en ella.
Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el cdigo que
introduzcamos en nuestras pginas y permita la creacin de bases de datos para
almacenar informacin pasaremos a crear nuestras propias pginas dinmicas de acceso
a datos.
Una vez instalado WampServer empezaremos a crear nuestras primeras pginas para
mostrar informacin especfica y personalizada.
Para ello nos apoyaremos siempre en la seccin Datos del panel Insertar:

Recuerda que Dreamweaver es muy personalizable, y puede que este panel lo ests
viendo como una barra de herramientas:

Y en el grupo de paneles de Base de datos, que puedes abrir desde el men Ventana
Bases de datos.

21.2. Crear una conexin a la base de datos

Como puedes ver en el panel Base de datos los requisitos necesarios para empezar a
trabajar con bases de datos ya los hemos cubierto en los temas anteriores del curso:

1. Hemos creado un sitio.

2. Estamos
trabajando
con
un tipo
de
(Archivo Nuevo... Tipo de pgina: PHP).

documento

dinmico PHP

3. Hemos instalado un servidor local y configurado el servidor de prueba.

El ltimo paso que nos quedara para poder empezar a crear pginas ser definir una
conexin para que Dreamweaver establezca los parmetros en los que se realizar la
comunicacin entre los archivos PHP y los datos de nuestras tablas.
En otras palabras deberemos decirle a Dreamweaver dnde est la base de datos, su
nombre y un usuario (con su contrasea) con suficientes privilegios como para poder, al
menos, visualizar los datos almacenados.

Para ello nos dirigimos a la pestaa Bases de datos en el panel Aplicacin y hacemos
clic sobre el botn

Selecciona la opcin Conexin MySQL para crear la conexin que necesitamos.

Se abrir el siguiente cuadro de dilogo:

Aqu debers colocar los datos correspondientes a tu base de datos.

En Nombre de conexin escribiremos un nombre significativo para poder reconocer la
conexin ms adelante.
En Servidor MySQL deberemos escribir localhost en nuestro caso ya que la base de
datos est alojada en nuestro propio equipo. En otro caso habra que introducir la
direccin del servidor donde se encuentre almacenada la informacin.
Escribe un Nombre de usuario y Contrasea con privilegios suficientes para acceder
a la base de datos (al menos parcialmente).
Y finalmente selecciona (pulsando el botn Seleccionar) o escribe el nombre de la
base de datos a la cual nos vamos a conectar.

Puedes hacer una prueba de conexin pulsando el botn Prueba, as te asegurars de

que se puede establecer comunicacin entre Dreamweaver y el servidor correctamente
con los datos facilitados.
Una vez hayas acabado pulsa Aceptar y la conexin estar lista para utilizarse.
Observa que ahora, en el sitio, tienes la carpeta Connections. En ella guardar
Dreamweaver las conexiones del sitio. No la renombres, y no olvides copiarla con el resto
de archivos si copias o mueves el sitio.

Para practicar la creacin de conexiones realiza el Ejercicio Paso a Paso Crear una
conexin a base de datos.

Ejercicio propuesto de la Unidad 20

Prueba evaluativa de la Unidad 20

21.3. Juegos de registros o RecordSets

Una vez creada nuestra conexin empezaremos a crear pginas dinmicas.
Ahora podemos insertar en cualquier pgina informacin almacenada en la base de
datos, slo tenemos que decidir qu datos vamos a mostrar.
Crearemos un juego de registros (tambin llamado RecordSet) donde almacenaremos
durante el tiempo en el que se est ejecutando el archivo PHP los datos que queremos
mostrar.
De esta forma podremos seleccionar determinada informacin y mostrarla en la
pgina.

Antes que nada recuerda que los datos dinmicos slo pueden mostrarse en una
pgina dinmica. Por lo que si intentas crear un juego de registros en una pgina
codificada como HTML el programa no te dejar.
As que abre una nueva pgina PHP y empieza a practicar.

Para

crear

botn

un

juego

de

registros

puedes

hacer

clic

en

el

en el panel Insertar, seccin de Datos:

Se abrir el siguiente cuadro de dilogo:

Aqu deberemos especificar qu informacin queremos obtener, es decir qu registros

de qu tabla.
Utilizar este cuadro de dilogo es muy sencillo, aunque puede complicarse bastante si
sacamos el mximo provecho de todas sus opciones.
Iremos viendo poco a poco la forma en la que podremos trabajar con los juegos de
registros.

El primer paso ser comenzar dando un Nombre significativo al juego, por ejemplo
podramos llamarlo articulos_en_stock si lo que va a contener el juego de registros son
los datos de una tabla de artculos que tienen existencias.
Luego especificaremos la Conexin que deber utilizarse para que sea posible acceder
a la informacin. Aqu debers de seleccionar una que hayas creado anteriormente o

puedes hacer clic en el botn Definir... para crear una nueva tal y como vimos en el
apartado anterior. Lo normal es que te aparezca seleccionada directamente al crear el
juego.
Una vez seleccionada la conexin deberemos seleccionar la Tabla de la que queremos
sacar los registros.
Finalmente decidiremos qu Columnas queremos mostrar. Al seleccionar una tabla,
sus columnas aparecern en el cuadro de columnas. Selecciona la opcin Todas para
que todos los campos de la tabla estn disponibles o marca la opcin Seleccionado: para
elegir una o ms de las existentes (utiliza la tecla Ctrl para realizar selecciones
mltiples).

Pulsando el botn Prueba en cualquier momento vers un ejemplo de qu datos

contendr el juego de registros, es incluso aconsejable que lo veas antes de Aceptar el
cuadro de dilogo para asegurarte de que ests sacando la informacin que necesitas.

Para practicar la creacin de juegos de registros realiza el

Ejercicio Paso a Paso

creacin de un Recordset.

Nota: Puedes crear tantos juegos de registro en una pgina como necesites.

21.4. Mostrar datos dinmicos

Una vez se cree un Juego de Registros podremos empezar a mostrar los datos en
nuestra pgina.
Como podrs ver en el panel Vinculaciones ahora podemos ver las columnas
contenidas en el Recordset:

Aadir, por ejemplo, el Titulo del libro a la pgina es tan fcil como arrastrar el
elemento desde el panel a su lugar en la pgina.
Aunque tambin podemos utilizar la opcin Texto dinmico, agrupada en Datos
dinmicos:

Al utilizar esta opcin se abrir un cuadro de dilogo:

Como puedes ver en la imagen, debers seleccionar el Campo que quieres mostrar en
la pgina, adems Dreamweaver te ofrece la posibilidad de aplicarle un formato
determinado, para ello slo debers seleccionarlo de la lista.
Por ejemplo, la opcin May./min. - Primera letra en maysculas transformar el texto
del registro y lo pondr en minsculas excepto la primera letra que se ver transformada a
maysculas.
Nota: En la versin empleada para realizar este curso, los formatos May.-min. Mays. y May.-min. - Mins. estn intercambiados, y funcionan al revs. Tenlo en cuenta,
ya que la versin que empleas puede tener este error o estar ya corregido.

En el cuadro de texto Cdigo vers como se modifica el cdigo PHP que se incluir
automticamente en la pgina.
Pulsa Aceptar cuando hayas acabado y el campo del registro se incluir en el punto
donde tengas situado el cursor.
Se representar en la vista de Diseo de la siguiente forma:

Esto nos indica que el elemento que se mostrar ser el de la columna Ttulo del
recordset listado_libros.
En cualquier momento podrs volver al cuadro de dilogo anterior para modificar alguna
de las opciones (por ejemplo, el formato) desde el panel Comportamientos del
servidor (Ctrl + F9).
En este panel se mostrarn todos los elementos dinmicos que se estn utilizando en la
pgina, haz doble clic sobre cualquiera de ellos para modificarlos.

Un modo de vista muy til es la Vista en vivo En este modo, se mostrarn los datos
reales en vez del nombre de registro, para que nos hagamos una idea ms real del
aspecto de la pgina.

Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Texto dinmico.

21.5. Repeticiones
Hemos aprendido a insertar datos en una pgina, pero de momento slo logramos que
se muestre el primer registro del juego.
Cmo hacemos para mostrar ms de uno?
Muy fcil, utilizaremos las Repeticiones.

Repetir un registro nos permitir visualizar en una misma pgina ms de un registro

contenido en el recordset a la vez.
Ten en cuenta que podemos repetir cualquier parte que queramos, de hecho la
repeticin no afecta a la pgina entera sino a la zona seleccionada.

Para crear una repeticin debers seleccionar la zona a repetir (una fila de tabla, un
elemento de lista, un prrafo...) y pulsar el botn Repetir regin

en la en el

panel Insertar Datos.

Se abrir el siguiente cuadro de dilogo:

Aqu debers indicar el nmero de registros que quieras que aparezcan (ms tarde
veremos cmo avanzar en una lista de registros) o simplemente escoger Todos los
registros para que se repita la informacin seleccionada de todos y cada uno de los
registros.
Como decamos antes, en una pgina pueden existir ms de un juego de registros o
recordset, por lo que ser necesario especificar de cul de ellos queremos que se realice
la repeticin en el desplegable Juego de registros.
Una vez hayamos terminado pulsa el botn Aceptar, y en la vista de Diseo, la seccin
seleccionada tomar este aspecto:

Esto provocar el listado de todos los ttulos del recordset listado_libros.

Si colocsemos otro campo al lado de este pero sobre l no se aplicase ninguna
repeticin se mostrara el listado junto a la informacin de un campo del primer registro.

Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Repeticin de

Texto dinmico.

Dreamweaver

tambin

te

da

la

posibilidad

de

crear

una

tabla

dinmica

automticamente que mostrar todas las columnas del nmero de registros que
quieras.
Para ello debers hacer clic en la opcin Tabla dinmica que aparece en la
barra Datos:

Automticamente se generar una tabla con la configuracin que especifiques en este

cuadro de dilogo:

De esta forma Dreamweaver colocar los registros en una tabla con las caractersticas
que hayamos indicado.

1.6. Orden de juegos de registros

Hasta ahora somos capaces de crear un listado personalizado de elementos
almacenados en un juego de registros.

Pero podramos querer ordenarlos de algn modo, cmo lo hacemos?

Vamos a utilizar la opcin Ordenar: que se encuentra en el cuadro de dilogo Juego
de Registros:

Puedes llegar a este cuadro de dilogo creando un nuevo Recordset o modificando el

ya existente, para ello debers hacer doble clic sobre l en el panel Vinculaciones (Ctrl
+ F10).

La forma en que se podrn ordenar los registros del recordset ser la siguiente,
selecciona el campo por el que quieres ordenar los registros y el modo en que quieres que
lo haga.
Si el campo es de tipo numrico, se ordenar de menor a mayor (Ascendente) o de
mayor a menor (Descendente).
Si el campo es de tipo alfanumrico se ordenar alfabticamente.

Para practicar este concepto realiza el Ejercicio Paso a Paso de Ordenacin de un

Recordset.

21.7. Filtrado de juegos de registros

Tambin podemos filtrar los registros que vayan a formar parte del juego de registros
eliminando aquellos que no cumplan ciertas condiciones.
Este mtodo tambin lo aplicaremos sobre el cuadro de dilogo Juego de
Registros del recordset:

En este caso deberemos en Filtro: seleccionar el campo sobre el cual realizaremos el

filtro. Seleccionar en el cuadro de lista que contiene un = si queremos que el campo
sea igual, distinto,mayor, menor o que

empiece

acabe con

alguna

cadena

determinada.

En

el

desplegable

que

encontrars

ms

abajo

debers

seleccionar Valor

introducido para poder especificar en el cuadro de la derecha (en la imagen 0) el valor

con el que comparar.
En apartados posteriores veremos el significado de escoger en el desplegable otra
opcin que no sea Valor introducido.

Una vez hayas terminado, pulsa el botn Aceptar y el recordset contendr nicamente
los registros que cumplan la condicin indicada en el cuadro de dilogo.
Nota: recuerda que puedes utilizar el botn Prueba para previsualizar el efecto del filtro
sobre la tabla seleccionada.

Para practicar el filtrado de registros realiza el Ejercicio Paso a Paso de Filtrado de

Registros.

21.8. Paginacin de Registros

Ya sabemos cmo hacer para mostrar un listado ordenado y filtrado de tantos registros
como queramos.
Cuando el listado de los registros es muy largo, nos sera muy til poder organizar esos
registros en pginas y avanzar en ese listado pgina por pgina.
Para ello utilizaremos la Paginacin.
En primer lugar tendrs que definir una repeticin de registros con un nmero limitado
de registros (los que quieres que aparezcan en cada pgina), si defines la repeticin sobre
todos los registros, la paginacin no funcionar porque todos los registros se estarn
mostrando en una sola pgina.
A continuacin crearemos enlaces que funcionen de modo automtico desplazndose
por las diferentes pginas del juego de registros.
Slo tendrs que situar el punto de insercin donde lo quieres insertar utilizando el
botn que se te ofrece en el panel Insertar Datos. Entre las opciones que encontramos,
en este caso elegimosMover a la siguiente pgina.

Al seleccionar el enlace correspondiente se abrir un cuadro de dilogo muy parecido a

ste:

Aqu slo tendrs que seleccionar el Juego de registros sobre el cual quieres que se
establezca la paginacin y pulsar Aceptar.
En la vista de Diseo vers que aparece algo como esto:

Si utilizas el servidor de prueba (pulsando F12) podrs ver que pulsando el enlace
creado avanzas por el juego de registros.
La pgina permanecer exactamente igual a cmo la diseaste, pero el contenido ser
dinmico y variar segn la pgina que ests mostrando.

Nota: Recuerda que puedes aplicar estilos sobre estos enlaces igual que podamos
hacerlos sobre los items que mostramos para los datos de la tabla.

Para practicar el uso de la paginacin realiza el Ejercicio Paso a Paso de Paginacin

de Registros.

Una opcin muy til que presenta Dreamweaver son los Recuentos de registros:

Si seleccionas alguna de las tres ltimas opciones se mostrar el siguiente cuadro de

dilogo:

Selecciona aqu el Juego de registros sobre el que quieras realizar el recuento y

pulsa Aceptar.
Dependiendo de la opcin que escojas se aadir un texto u otro a la pgina.

Registro inicial: Visualiza el nmero dentro del listado total de registros, del primer
elemento de la lista que se est mostrando en la pgina actual.

Registro final : Visualiza el nmero dentro del listado total de registros del ltimo
elemento de la lista que se est mostrando en la pgina actual.

Total de registros: Visualiza el nmero total de registros del juego (la suma de
todos los registros de todas las pginas).

Seleccionando la primera opcin Estado de navegacin de juego de registros

podremos insertar un literal que mostrar el recuento exacto de los registros que se estn
visualizando, se aadir una lnea como sta:

Que en la Vista en vivo tomara este aspecto:

Como puedes ver, esta opcin es una combinacin de las tres anteriores que ilustra
perfectamente el funcionamiento del recuento de registros.

Para practicar el uso del recuento realiza el Ejercicio Paso a Paso de Recuento de
Registros.
Pg. 21.7

21.9. Mostrar/Ocultar regiones

Como hemos visto la paginacin es muy til para navegar por nuestros registros.
Pero existen determinados casos en los que nos gustara que estos items funcionen de
forma diferente.
Por ejemplo, por qu debe aparecer el elemento de navegacin Anterior en la primera
pgina si en realidad no existe una pgina anterior a la que podamos ir?
Vamos a utilizar las opciones de Mostrar regin para realizar algunos cambios sobre
los elementos de la pgina. En nuestro caso vamos a seleccionar Mostrar si no es la
primera pgina:

Estas opciones en realidad actan sobre cualquier parte de la pgina, as que incluso
podrs hacer desaparecer una tabla o un prrafo si no se cumplen los criterios de la
opcin.
Cuando hagas clic en alguna de ellas vers un cuadro de dilogo como ste:

Aqu debers especificar el Juego de registros sobre el que quieres que se efecte la
accin y luego Aceptar.
En la vista de Diseo se mostrar la opcin de una forma parecida a sta:

Para practicar ocultar y mostrar regiones realiza el Ejercicio Paso a Paso de

Ocultar/Mostrar Regiones.

Combinando la tcnica de ocultacin y muestra de registros con las de recuento

encontramos la opcin Barra de navegacin de juego de registros:

Pulsando esta opcin se incluir en la pgina una barra de navegacin para

desplazarse por las pginas del juego de registros. Se abrir el siguiente cuadro de
dilogo:

Desde aqu podrs seleccionar el Juego de registros sobre el que quieres que acte la
barra de navegacin y seleccionar uno de los dos modos: Texto o Imgenes.
Aqu tienes un ejemplo de cmo quedara cada una de las opciones, en la primera lnea
tenemos una barra de navegacin con la opcin Texto y en la segunda lnea una barra de
navegacin con la opcin Imgenes:

Por supuesto, podemos cambiar esas imgenes o aplicar estilos CSS.

Pg. 21.8

21.10. Uso de variables

Hasta ahora hemos aprendido a crear pginas dinmicas que muestren contenido
disponible desde una base de datos.

Aunque podramos hacer mucho ms dinmica la pgina haciendo que sea el usuario
quien elija qu registro quiere visualizar.
Imagina que quieres el listado de las ventas de un artculo en determinado mes.
Es posible acotar los resultados de una pgina dinmica de un modo muy sencillo,
utilizando variables.

Una variable le da informacin a una pgina PHP, y el archivo puede actuar de acorde
con el valor de esa variable.
En el ejemplo anterior deberamos abrir la pgina PHP indicndole que queremos que
muestre el articulo X del mes Y.

Muy bien veamos la forma de hacerlo.

Primero deberemos aprender cmo pasar las variables a una pgina PHP.
En una direccin de Internet (o URL) podemos encontrar cadenas como sta:

http://www.misitio.com/carpeta/archivo.php?nombre=valor

A que lo has visto alguna vez?

Muy bien, pues en este ejemplo le estamos diciendo al archivo archivo.php que se
ejecute, pero adems le estamos indicando que queremos que tome en cuenta la
variable nombre con el valorvalor.
Incluso si miras las pginas de la librera, puedes observar que al paginar se envan
como variables la pgina que se ha de mostrar.

En un ejemplo sencillo podramos indicar mediante un enlace que queremos que se

muestre el detalle de un artculo con determinado nmero de identificacin de la siguiente
forma:

detalle.php?id=99
De esta forma estaremos abriendo la pgina detalle.php pasando en la variable id el
valor 99 para que la pgina muestre el detalle del artculo 99.
Cmo podemos desde Dreamweaver crear enlaces con paso de variables?
Si el valor del parmetro es fijo, se puede escribir directamente en la referencia del
vnculo, por ejemplo en el enlace a la pgina detalle.php pondramos en el
cuadro Vnculo del panelPropiedades detalle.php?id=99.
Pero tambin podemos utilizar textos dinmicos para indicar el valor del parmetro a
pasar. En este caso en vez de escribir 99 deberamos indicar que el valor lo tiene que
sacar del texto dinmico de la siguiente manera:
Nos

posicionamos

sobre

el

vista Cdigo arrastramos

enlace

el

campo

la

pgina detalle.php y
dinmico

desde

desde

la
el

panel Vinculaciones (Ctrl + F10) hasta el vnculo para formar la URL del enlace:

detalle.php?id=<?php echo $row_libros_usados['Id']; ?>

El cdigo quedara de la siguiente forma:

Cuando pases los parmetros ayudndote de un formulario, no olvides fijarte en

el mtodo de envo del formulario:

Al utilizar parmetros recibidos de un formulario, lo usaremos de la siguiente manera:

Si el mtodo del formularioes GET, los recibiremos como Parmetro URL.

Si el mtodo del formularioes POST, los recibiremos como Variable de formulario.
Como norma general, en el curso emplearemos GET como mtodo de envo, para
tratarlo igual que los enlaces con parmetros.

Para practicar la creacin de enlaces con parmetros realiza el Ejercicio Paso a

Paso de Enlaces con Parmetros.
Cmo podemos desde Dreamweaver utilizar las variables recibidas?
Cuando se abre una pgina pasndole una serie de parmetros, esta pgina puede
utilizar los valores de los parmetros para lo que le haga falta.
En el ejemplo anterior (en la teora) abrimos la pgina detalle.php pasndole un valor
en la variable Id. Pues esta pgina puede ahora utilizar este valor para visualizar
nicamente los registros con ese Id en vez de visualizar todos los registros.
Para ello deberemos modificar el Juego de registros de la pgina. Hacemos doble clic
sobre l en el panel Comportamientos del servidor (Ctrl + F9).
Se abrir el cuadro de dilogo Juego de registros:

Aqu indicaremos que el recordset filtre los registros cuyo Id sea igual al valor recibido
en el parmetro Id.
Para ello deberemos seleccionar en el desplegable de filtro la opcin Parmetro
URL para que el archivo PHP tome el valor de la variable de la URL que abre la pgina.
En la caja de texto de al lado debers especificar el nombre que tiene la variable en la
ruta URL.

Para practicar el filtro con parmetros realiza el Ejercicio Paso a Paso de Filtro con
Parmetros.

Hay muchos usos para los parmetros. Imagina que quieres mostrar mediante un
enlace los libros que cuesten ms de 10 , slo tendras que pasarle una
variable precio_minimo a la pgina que genera el listado de libros y establecer que el
juego de registros filtre los resultados para mostrar slo aquellos que tengan un valor en el
campo Precio mayor al especificado en el parmetroprecio_minimo.
Pg. 21.10

21.11. Pginas Maestro-Detalle

A menudo debemos sacar datos de dos tablas que estn relacionadas entre s por un
campo comn a las dos, por ejemplo para mostrar los datos de un cliente y todas sus
facturas (en la factura tendr el cdigo del cliente), o los datos de un libro y todas las
compras que tenemos de ese libro (en la tabla compras tendr el cdigo del libro
comprado)...
Pues Dreamweaver te facilita la creacin de pginas de este tipo y las denomina
Maestro-Detalle porque sacan datos de un archivo Maestro (clientes y libros en los
ejemplos anteriores) y enlazan cada registro con una pgina donde se visualizan los
registros correspondientes del archivo Detalle (las facturas y las compras en los ejemplos
anteriores).
Para
Detalle

ello

utilizamos

la

opcin Juego
.

Al seleccionarla vers el siguiente cuadro de dilogo:

de

pginas

Maestro-

En Juego de registros: seleccionamos el juego de registros que se visualizarn de

la tabla Maestro.

En Campos de pgina Maestro: indicamos los campos del maestro que queremos
que se muestren en la pgina.

En Vincular con Detalle desde: indicaremos el campo del Maestro que contendr el
enlace a la pgina de detalle.

En Pasar clave exclusiva: indicaremos el campo que se utiliza para relacionar los
registros.

Luego en Mostrar: tendremos que establecer el nmero de registros que queremos

que
se
muestren
en
la
pgina
del
Maestro.
En la seccin inferior deberemos introducir la informacin para crear el Detalle.

Establece un Nombre de pgina Detalle (si no existe la crear) y en Campos de

pgina Detalle: escogeremos los campos a mostrar.

Pulsamos el botn Aceptar y Dreamweaver crear automticamente las pginas

requeridas.

Luego podrs modificar su aspecto para que se ajusten al sitio que ests diseando.

1.12. Asistente de insercin de registros

Dreamweaver posee otros procesos automatizados como vers en este apartado y en

los siguientes para crear ms pginas de acceso a datos.
Es capaz de generar formularios de forma sencilla para insertar, modificar o eliminar
registros de una base de datos.
Para crear un formulario de insercin de registros tendrs que hacer clic en el
botn Asistente de formulario de insercin de registros

del panel Insertar Datos.

Se abrir el siguiente cuadro de dilogo:

Su uso es bastante sencillo, solo tienes que indicar la Conexin y los datos se
rellenarn automticamente.

Selecciona la Tabla donde quieras insertar el nuevo registro.

Tambin puedes indicar dnde quieres que se redirija la pgina una vez se haya
insertado el registro.
Luego seleccionaremos los campos que debern aparecer en el formulario. Recuerda
que todos aquellos que necesiten adoptar un valor debern aparecer en l, si no el
formulario fallar por no introducir valores en campos que no aceptan valores nulos.
A continuacin seleccionaremos cada campo y para cada uno indicaremos cmo ser
presentado en el formulario.
En Etiqueta escribiremos la etiqueta que queremos para el campo.
En Mostrar como: indicaremos en qu tipo de elemento de formulario estar
representado el campo, una caja de texto, un botn de opcin, un desplegable...
Tambin indica cmo Enviar la informacin para que se guarde en la tabla,
normalmente ser del mismo tipo que definiste cuando creaste la tabla.
Puedes establecer un Valor predeterminado para el campo seleccionndolo en el
generador automtico.
Podrs asignarle un valor existente en la pgina.
Esta opcin te ser muy til si establecemos alguno de los campos como Campo
oculto en Mostrar como.
Pulsa Aceptar y el formulario se crear automticamente.

Para practicar la insercin de registros realiza el Ejercicio Paso a Paso de Insercin

de Registros.

Realmente no bastara con este formulario. Deberamos de comprobar que las variables
son como las esperamos. Por ejemplo, en el caso de la librera, el nmero de tarjeta slo
es vlido si no est vaco, si slo lo forman nmeros y tiene 16 caracteres. Todas estas
comprobaciones, se haran por PHP antes de insertar el registro. Esto no lo veremos en
este curso, ya que su objetivo no es programar directamente.

Pg. 21.12

21.13. Asistente de actualizacin de registros

Igual que en el apartado anterior existe un asistente que te permitir crear un
formulario que primero muestra los datos existentes en un registro de la tabla y te
permitir modificarlos y guardarlos.
Para ello, debers hacer clic en el botn Asistente de formulario de
actualizacin de registros

Se abrir el siguiente cuadro de dilogo:

El modo en el que rellenaremos los datos es el siguiente:

Seleccionaremos, primero, la Conexin con la que trabajaremos.

Luego elegiremos la Tabla a actualizar que ser de donde saquemos los datos
que luego modificaremos.
Como deberemos elegir registro de entre toda la tabla para modificar, deberemos
indicar cul. Para ello deberemos seleccionar un campo (en Columna de clave
exclusiva) y un juego de registros (en Seleccionar registro de) para establecer el
registro que va a mostrar la pgina. De esta forma vincularemos el campo del
recordset de la pgina y se mostrar la informacin que coincida con l.

El resto funcionara igual que en el cuadro de dilogo anterior. Seleccionando

los campos que se van a mostrar, su tipo de elemento de formulario y la forma en
la que se va a enviar.
En la caja de texto Valor predeterminado encontrars la cadena que mostrar el
contenido del campo en el registro en cuestin.
No lo modifiques si quieres que muestre la informacin almacenada. Slo
cmbialo si quieres que aparezca un valor fijo en vez del valor contenido en el
registro, por ejemplo, ninguno, sin precio, etc... e incluso nada.
Finalmente pulsa Aceptar y el formulario se crear.
Pg. 21.13

21.14. Asistente de eliminacin de registros

Siguiendo con los asistentes encontramos al final el de Eliminar Registro

Para utilizar el asistente de Dreamweaver para crear pginas de eliminacin de

registros debers crear una pgina especial que se dedique nica y exclusivamente a
eliminar el registro.
Para ello tendremos una primera pgina donde el usuario seleccionar el registro a
borrar y dar la orden de borrado; esta pgina enlazar con la pgina de borrado
pasndole el identificativo del registro a borrar, y la pgina de borrado mostrar los datos
del registro a borrar y pedir confirmacin al usuario.
Con lo cual deberemos seguir este guin:

La primera pgina deber tener un enlace a la pgina de borrado de la forma:

borrar.php?id=99

Donde borrar.php ser

la
pgina
de
borrado,
id el nombre del parmetro que contiene el valor de clave del registro a borrar,
y 99 es el valor de la clave del registro a borrar (en este caso queremos borrar el
registro cuya clave sea 99).

En la pgina borrar.php debers:

1. Crear un recordset que muestre la informacin del elemento cuya clave
se ha pasado como parmetro para que pueda ser verificado.
Para ello debers utilizar un juego de registros filtrado por el campo
clave
principal
y
el
valor
recibido
como
parmetro.

2. En la misma pgina aadiremos un formulario con un campo oculto y

un botn de tipo Submit que permita al usuario confirmar el borrado y
reenve
a
la
misma
pgina
de
borrado.
Al campo oculto le deberemos asociar el campo clave principal del
registro que se muestra, puedes hacerlo pulsando el botn que aparece al
lado de su propiedad Valor:

Debers recordar el nombre que le das a este control de formulario porque es

el que utilizaremos para borrar el registro.

1. Luego

podremos incluir

el

cdigo

Haz clic en el botn Eliminar Registro

rellena el siguiente cuadro de dilogo:

para

borrar el

registro.

en la barra de Datos, y

La primera opcin debers dejarla en Valor de clave principal. Puedes

utilizar el resto de opciones para crear otros tipos de eliminaciones ms
complejas,
aunque
este
mtodo
sea
el
ms
utilizado.
Luego selecciona la Conexin, la Tabla donde se encuentra el registro a
borrar
y
su Columna
de
clave
principal.
Por ltimo le deberemos indicar cmo debe acceder al valor que le dar el
valor de la clave principal del registro que tiene que eliminar, indica que lo
hacemos por Parmetro URL y escribe el nombre del campo oculto del
formulario que acabas de crear (es el que le pasa el valor).
Finalmente puedes elegir a qu pgina redireccionar cuando se realice el
borrado.
Pulsa Aceptar y habrs acabado.

21.15. Juegos de registros avanzados

Por ltimo en este apartado vamos a ver un modo avanzado de crear juegos de
registros.
Si en el cuadro de dilogo Juegos de registros que hemos visto hasta ahora haces clic
en el botn Avanzado... vers estas otras opciones:

En este cuadro de dilogo puedes crear juegos de registros mucho ms complejos.

El principio del cuadro es igual que la versin simple, debers introducir
un Nombre para el juego de registros y asignarle una Conexin.
Luego deberemos introducir una sentencia SQL que indicar qu registros se van a
mostrar.
Mediante las opciones y botones que veremos ahora podremos crear sentencias
bastante completas, pero si quieres aprender ms sobre este lenguaje puedes visitar
el curso de SQL que se encuentra en nuestra pgina web.
De momento explicaremos las opciones para que puedas manejarte mejor con el
programa.
Detrs de la palabra SELECT se escriben las columnas que queremos que aparezcan
en el resultado, por eso para aadir ms campos a la lista slo tienes que seleccionar el
campo de la listaElementos de base de datos, y pulsar el botn SELECT, el campo se
aadir a la sentencia y por lo tanto aparecer en el recordset.

En la clusula FROM se especifica el nombre de la tabla o tablas desde donde se saca

la informacin. En realidad SQL nos permite cruzar distintas tablas, relacionarlas, etc...
La clusula WHERE sirve para incluir condiciones, para filtrar los registros. El
botn WHERE te ayudar a establecer esas condiciones, una vez hayas aadido el
campo con este botn en el cuadro de texto SQL debers completar la condicin
utilizando los operadores de comparacin adecuados como <, >, !=.
Utiliza la zona de Variables: para insertar parmetros que podrs recibir mediante el
URL, para ello haz clic en el botn

Se abrir el siguiente cuadro de dilogo:

Aqu debers establecer el Nombre de la variable, su Valor predeterminado y el Valor

de tiempo de ejecucin.
Ten en cuenta que para asociar estas variables a parmetros pasados por URL debers
escribirlas en el campo Valor de tiempo de ejecucin de la siguiente forma:
$_GET['nombre_parametro']
Donde nombre_parametro es el nombre del parmetro incluido en el URL.

Finalmente puedes utilizar el botn ORDER BY para crear ordenaciones por los
campos seleccionados en el listado de la izquierda.
En la imagen ms arriba puedes encontrar un ejemplo de una sentencia SQL que te
podr aclarar estos conceptos. Esta sentencia obtiene el autor, ttulo y editorial de la
tabla Libros filtrando los registros cuyo id sea igual al que se haya recibido como

parmetro de URL, y si hubiesen varios registros los ordenara alfabticamente por autor y
dentro de cada autor por ttulo.

Para practicar la creacin de juegos de registros avanzados realiza el Ejercicio Paso

a Paso de Utilizar sentencia SQL.

En el tema siguiente seguiremos practicando todos los conceptos vistos en este tema
completando el sitio de Blog.

Ejercicio propuesto de la Unidad 21

Prueba evaluativa de la Unidad 21

Pg. 21.15

Unidad 22. Cmo crear un Blog (I)

22.1. Introduccin

Hasta ahora hemos visto cmo empezar a manejarnos con pginas dinmicas de
acceso a datos utilizando PHP y un servidor MySQL.
La complejidad de las pginas que creemos depender de la profundidad de nuestros
conocimientos de ambas tecnologas, por lo que muchas veces (sobre todo al principio)
nos ser difcil alcanzar algunos objetivos que nos propongamos.
Vamos a dedicar este tema a la elaboracin de un proyecto algo ms complejo en el
que deberemos emplear estas tcnicas de un modo ms completo.
Para ello crearemos un blog o bitcora y utilizaremos herramientas y procedimientos
que

hemos

visto

hasta

ahora.

No

te

pierdas

algunos conceptos que quiz te resulten interesantes.

este

tema,

introduciremos

Un blog es una pgina web donde se introduce contenido peridicamente sobre un

tema en particular.
Su contenido suele organizarse en entradas que se van aadiendo con una asiduidad
relativa.
Normalmente, estas entradas pueden comentarse. Es decir, cualquier usuario (o a
veces solamente los registrados) pueden dejar su opinin sobre la entrada o sobre el blog
en general.
Para facilitar la navegacin por la pgina estas entradas suelen estar organizadas
por temas o categoras, de modo que si te interesa poder leer todas las entradas
relacionadas con un tema en concreto te sea mucho ms sencillo.

Todo blog deber tener, del mismo modo, una parte privada desde donde el usuario
dueo de la bitcora pueda administrar y gestionar los contenidos del blog.
Desde el panel de administracin, que debe estar protegido para que slo tengan
acceso

aquellas

personas

con

privilegios

suficientes,

podremos aadir, modificar o eliminar entradas, comentarios y categoras.

De hecho, la funcin de esta parte privada es que puedas actualizar el contenido sin
necesidad de tener que recurrir a la interfaz de phpMyAdmin para insertar nuevos
registros como vimos en el tema anterior.

El objetivo de este tema no es entrar en profundidad en cada uno de los detalles,

porque podramos no terminar nunca. Explicaremos el modo en el que deberemos actuar
para alcanzar una estructura cerrada que cumpla los requisitos mnimos que un blog
necesita.

El aspecto y funcionalidades finales estn en tus manos, puedes aadir tantas cosas
como quieras.
As que vamos a empezar...

22.2. Estructura de datos

Nuestro primer paso para la creacin de un blog ser crear la estructura de datos que
contendr la informacin de las entradas y otros elementos del sitio.
En

un

sitio

simple

deberemos

crear

como

mnimo

tablas: categorias, entradas, comentarios y usuarios.

En la tabla categoras deberemos listar el nombre de las categoras en las que se

dividen las entradas.

En la tabla entradas deberemos almacenar el texto de la entrada con

su ttulo y fecha.
Obviamente
aqu
deberemos
hacer
referencia
a
qu categora pertenece la entrada. En un blog ms complejo podramos incluso
almacenar qu integrante de la tabla de usuarios cre la entrada...

En la tabla comentarios deberemos almacenar el texto del comentario junto con la

informacin del autor, como su nombre y correo electrnico, por ejemplo. Con
conocimientos ms profundos de PHP podramos guardar hasta su direccin IP.

Finalmente en la tabla usuarios guardaremos el nombre y contrasea de los

usuarios que tendrn acceso a la edicin del blog. Ms adelante vers que incluso
se podran establecer niveles de privilegios entre ellos.

El punto en cuestin en este caso es el hecho de que en la forma ms simplificada las

tres primeras tablas se encuentran relacionadas del siguiente modo:

Como puedes ver en la imagen en la tabla entradas existe un campo que apunta
al ID de categoras, y del mismo modo en la tabla comentarios tenemos que tener un
campo que apunte a la entrada a la que pertenece dicho comentario.

El problema nos surge, por ejemplo, cuando insertemos una pgina que nos ayude a
eliminar entradas. Qu hacemos con los comentarios asociados a ella? Deberemos
crear una pgina ms para que cuando se borre una entrada tambin lo hagan sus
comentarios relacionados? Y repetirlo para las categoras y sus entradas?
No va a hacer falta.
Podremos utilizar una caracterstica de la definicin de la base de datos que existe en
MySQL y en otros sistemas gestores de bases de datos, el borrado y actualizacin en
cascada.

Para poder utilizar esta caracterstica, debemos de utilizar InnoDB como Motor de
almacenamiento. Esta opcin la encontramos al definir los campos de la tabla, y por
defecto est seleccionado MyISAM.
Desde el entorno de phpMyAdmin podremos definir esta caracterstica en la vista de
relaciones.
Podrs encontrar el enlace a esta vista desde la vista de detalle de cualquier tabla que
emplee InnoDB como motor de almacenamiento:

Haz clic sobre l y vers una nueva ventana como sta:

Desde aqu podremos especificar las relaciones que tiene la tabla con las dems tablas
de la base de datos y qu hacer cuando un elemento relacionado se borra o modifica.
Fjate que en el ejemplo solamente los campos Id e Id_Categora son susceptibles de
esta opcin. Eso es debido a que hemos definido ambos como ndices, el primero por
ser clave primaria y el segundo porque as lo indicamos en el momento de su creacin
utilizando el botn ndice

o seleccionado la opcin Index del desplegable ndice.

El modo en el que deberemos definir nuestro objetivo es el siguiente. A un campo

indexado podemos asignarle una relacin con otro campo indexado de otra tabla (en el
ejemplo Id_Categoriaest relacionado con el campo Id de la tabla categorias).
Deberemos decirle a phpMyAdmin qu hacer cuando se borre un elemento en la tabla
relacionada categorias (ON DELETE) o cuando se modifique el valor de clave de un
elemento (ON UPDATE).
La opcin que nos interesa en este caso es CASCADE que acta aplicando los
cambios en cascada. Esto es, si borramos un elemento en la tabla categorias, se
borrarn todos los registros en la tabla entradas que tengan el mismo ID en el
campo Id_Categoria.
En el caso de que modificsemos el ID en la tabla categorias tambin se actualizara
en todos los registros de entradas con el mismo Id_Categoria si tenemos indicado ON
UPDATE CASCADE.
Piensa que esa tabla podra estar relacionada con otra. Por tanto, al actualizar o borrar
esta en cascada, pasara lo mismo con la tabla relacionada, y as sucesivamente.

Para practicar la creacin de ndices y relaciones realiza el Ejercicio Paso a Paso

Estructura de Datos de un Blog.
Pg. 22.2

22.3. Interfaz pblica

Una vez creada la estructura podemos empezar a crear las pginas que mostrarn la
informacin almacenada en ella.
En este caso, los pasos a seguir sern muy parecidos a los que vimos en el tema
anterior.

En principio, la pgina ms importante ser el ndice. All deberemos mostrar un

listado de un nmero determinado de entradas.
Esto, como ya hemos visto, es muy fcil de conseguir, aunque ahora es posible que
necesitemos mostrar mucha ms informacin.
Veamos un ejemplo de entrada:

Como puedes ver, incluimos el ttulo, texto y fecha de la entrada. Eso es muy sencillo
porque pertenece todo a una misma tabla.
Pero deberemos incluir tambin un recuento de los comentarios asociados a esa
entrada y el nombre de la categora a la que pertenece.
Cmo lograremos esto? Tendremos que utilizar sentencias de SQL avanzadas.
En los ejercicios paso a paso encontrars la sentencia que te servir para este ejemplo
en particular. Podrs variarla un poco en funcin de tus necesidades, pero te volvemos a
repetir que si quieres crear juegos de registros ms complejos debers aprender SQL,
llegados a este punto no te ser muy complicado.

Tambin ser necesaria una pgina que muestre las entradas filtradas por
categora. Ten en cuenta que nuestro visitante querr seguramente ver aquellas entradas
pertenecientes a un tema en particular. De hecho para eso hemos creado el men de salto
desplegable y los enlaces en cada una de las entradas.
Esta pgina deber ser prcticamente igual que el ndice, por lo que la sentencia SQL
ser prcticamente la misma.

Finalmente deberemos incluir una pgina que muestre los comentarios de cada
entrada en particular y que a su vez permita aadir nuevos.
Esta tarea no es muy complicada porque simplemente deberemos pasarle un
parmetro que indique el ID de la entrada y mostrar los comentarios asociados a ella.
Puedes utilizar el asistente Insertar registros para crear el formulario de entrada de
comentarios.

Para practicar la creacin de la interfaz pblica realiza el Ejercicio Paso a Paso de

Interfaz pblica.
Pg. 22.3

22.4. Interfaz privada

Ahora es cuando viene la parte ms laboriosa, pero que tampoco es muy complicada.
Deberemos crear la parte de administracin del sitio.
Cuando tenemos un blog es mucho ms cmodo poder acceder a la informacin y
poder modificarla y eliminarla a travs de una interfaz web.
Resultara ms engorroso tener que entrar cada vez a la base de datos del servidor
para insertar una nueva entrada o modificar las existentes.
Adems, crear nosotros mismos las pginas de administracin nos da la libertad de
crear las opciones que queramos y de la forma en que nos sea ms cmoda.
As que nuestro primer paso ser crear un ndice de administracin que nos muestre
las opciones a las que podemos acceder:

En nuestro caso hemos decidido crear el men ms sencillo posible, incluye dos
grupos: la creacin de nuevos elementos y la modificacin (o borrado) de los ya
existentes.

Para practicar realiza el Ejercicio Paso a Paso de Creacin de un Men de

Administracin.
Pg. 22.4

22.5. Insertar nuevos elementos

Lo ms sencillo de realizar ser crear las dos pginas que nos ayudarn a crear
registros.

Crear un formulario de nueva categora slo nos obligara a insertar un nuevo nombre
de categora para crear un nuevo registro.
El campo Id de la tabla, al ser autonumrico, no deber aparecer en el formulario
porque se rellenar automticamente.

Un poco ms complicado ser el formulario de creacin de entradas.

Veamos un ejemplo:

En principio los campos de entrada sern tal cual los que nos ofrece el
asistente Insertar registro.
Deberemos tener cuidado en que el campo Fecha: se enve como de tipo fecha.
La dificultad la encontraremos en el desplegable Categora:.

Deberemos cargar un recordset a parte donde sacaremos el listado de categoras con

sus Id correspondientes.
Deberemos editar el campo desplegable de forma que el valor que se guarde sea el
valor del Id, mientras muestra el nombre de la categora.

Para practicar realiza el Ejercicio Paso a Paso de Insercin de elementos.

Pg. 22.5

2.6. Listado de elementos

Luego deberemos crear las pginas que se ocuparn de modificar los elementos del
blog, ya sean categoras, entradas o comentarios.

Esta parte deberemos planificarla adecuadamente para evitar crear pginas

redundantes.
Lo ms sencillo es crear una pgina que muestre un listado de los elementos que se
encuentran en la base de datos con enlaces creados para eliminar o modificar el registro
que prefieras:

De esta forma el trabajo se reducir a crear un listado completo de los registros de las
tablas y crear enlaces pasando como parmetro el ID del registro.
Este enlace ir dirigido a la pgina con la funcin de borrar o modificar (segn cul
elijas) donde se recoger el parmetro de ID que utilizaremos para filtrar el recordset.

Quizs la pgina ms complicada, debido a su extensin, sea la que deba mostrar el

listado de comentarios.

Para ella, la forma ms prctica sera poder localizar la entrada donde se encuentra el
comentario y luego mostrar el listado completo de los comentarios de esa entrada en
concreto.
Puedes crear dos pginas para ello, aunque si lo resumimos en una nica, la estructura
del sitio se beneficiar al quedar ms claro qu hace cada pgina.

Nota: Puedes incluir campos de bsqueda como hicimos en el ejercicio de Librera del
tema anterior. Bastar con que apliques los mismos procedimientos.

Para practicar realiza el Ejercicio Paso a Paso de Listado de elementos.

Pg. 22.6

22.7. Modificacin de elementos

Las pginas de modificacin de elementos debern recoger el parmetro que enve el
listado.
De este modo, filtraremos el recordset y podremos mostrar la informacin de
la entrada, categora o comentario que queramos modificar.

Es aconsejable que muestres el contenido del elemento para que antes de modificarlo
tengas una vista total de l y veas mejor qu quieres hacer en l.

El resto es sencillo, utiliza el asistente Actualizar registro y seguro que no encontrars

muchas ms complicaciones.

De nuevo en el caso de la pgina de modificacin de entrada deberemos tener especial

cuidado en enviar la fecha como tal y de mostrar los nombres de categora en un
desplegable:

Sigue con el Ejercicio Paso a Paso de Modificacin de elementos.

22.8. Eliminacin de elementos

Para terminar con las pginas de administracin deberemos crear las pginas
que recogern el parmetro del listado y eliminarn el elemento.

En este caso es casi indispensable que muestres el contenido del registro junto con un
botn de Eliminar.
De esta forma le estaremos pidiendo confirmacin al usuario y nos aseguraremos de
que el registro que estamos a punto de borrar es el que hay que borrar.
Ningn programa debera de tener un botn que borre registros sin pedir confirmacin
al usuario.

Nota: Sigue los pasos que explicamos en el tema anterior y no tendrs ningn
problema.

Practica realizando el Ejercicio Paso a Paso de Eliminacin de elementos.

22.9. Restringir acceso

Como has visto hemos creado dos zonas completamente independientes en nuestro
sitio: la interfaz pblica donde mostramos el contenido del blog, y la interfaz
privadadesde donde podemos acceder a las opciones de administracin de la base de
datos.

Naturalmente, queremos que la parte privada no sea accesible por cualquiera.

nicamente nosotros y aquellas personas autorizadas debern poder ver las pginas de
administracin que hemos creado.
Es por eso que en el apartado de Estructura de datos creamos la tabla usuarios.

En el panel Insertar Datos encontramos la opcin Autenticacin de usuarios que an

no hemos utilizado:

Podemos utilizar estas pginas para crear niveles de seguridad dentro de nuestro sitio.
Restringiendo la visualizacin de ciertas pginas a usuarios que almacenaremos en
nuestra base de datos y que necesitarn introducir una contrasea para verificar su
identidad.

El primer paso ser crear una pgina de acceso en la que requeriremos que el usuario
introduzca su nombre y contrasea para que podamos validarla.
Para ello deberemos crear un formulario en el que colocaremos dos campos, uno
para el nombre y otro para la contrasea.
Crea un botn que active el formulario y selecciona la opcin Conectar a usuario en el
desplegable de la imagen.
Se abrir este cuadro de dilogo:

Aqu deberemos establecer la configuracin de conexin a la zona privada.

Deberemos indicar en la opcin Obtener entrada de formulario el nombre que

tiene el formulario que hemos creado.

En el Campo Nombre de usuario deberemos indicar cul de las dos cajas de texto
del formulario contendr el Nombre de usuario.

En el Campo Contrasea seleccionaremos la caja de texto que contendr

la Contrasea.

Luego estableceremos las opciones para la comunicacin con la base de datos.

Deberemos indicar la Conexin y Tabla que vamos a utilizar para validar la entrada
del usuario.

En Columna Nombre de usuario indica cul es el nombre del campo de la tabla

que guarda los nombres de usuario.

En Columna Contrasea selecciona el campo que guarda en la tabla las

contraseas.

En la siguiente seccin debers establecer a qu pgina redirigirs si el usuario y

contrasea son correctos rellenando el campo Si la conexin es correcta, ir a:.
En Si falla la conexin, ir a escribirs la URL de la pgina a la que se deber
redirigir si la entrada fue incorrecta. Sera por ejemplo una pgina de error.
Marca la casilla Ir a URL anterior (si existe) si en ambos casos la redireccin es a la
misma pgina.

Finalmente podrs escoger entre utilizar diferentes niveles de acceso o no.

Para ello debers seleccionar una de las dos opciones en el cuadro Restringir acceso
por:.
Ten en cuenta que si decides crear varios niveles debers aadir un campo a la tabla
para que almacene el nivel de cada usuario. Este campo ser el que indicaremos en el
desplegable Obtener nivel de:.

Una vez hayas rellenado todos los datos, pulsa Aceptar y se aadir el cdigo
necesario a la pgina.

Nota: El mtodo que utiliza Dreamweaver para recordar la entrada del usuario hasta su
desconexin utiliza cookies. As que si tu navegador o el navegador del usuario las tiene
deshabilitadas est cdigo no podr realizar su funcin. Lo normal en el tratamiento de
usuarios es emplear variables de sesin del servidor.

Pg. 22.8

El siguiente paso ser proteger cada una de las pginas que quieras que
permanezcan bajo acceso privado.

Para ello slo tendrs que abrir la pgina que quieras restringir y seleccionar la
opcin Restringir acceso a pgina

Vers el siguiente cuadro de dilogo:

Aqu debers indicar si ests creando la restriccin respecto a un mismo nivel o por el
contrario ests usando diferentes niveles de acceso.
Selecciona la opcin que escogiste en el cuadro de dilogo de Conectar usuario, en el
caso de que hubiesen niveles, especifica el nivel que le quieres asignar a la pgina.

Debers escribir una URL en Si se deniega el acceso, ir a: para que los usuarios que
intenten acceder a esta pgina sin haber hecho login sean redirigidos a otra ventana.
Normalmente ser a la ventana de inicio de sesin.

Tambin

debers

incorporar

algn

enlace

para

que el

usuario

pueda

desconectarse y salga del rea privada (cerrar sesin).

Para ello tienes dos opciones, al seleccionar la opcin Desconectar Usuario
vers el siguiente cuadro de dilogo:

Puedes crear un enlace para que el usuario pulse sobre l para desconectarse. Para
ello debers seleccionar la opcin Vnculo en el que se ha hecho clic y seleccionar un
vnculo existente en la pgina o seleccionar la opcin Crear nuevo vnculo:
"Desconectar" para que se aada automticamente el vnculo.

O tambin puedes hacer que la pgina sobre la que ests aplicando la opcin sea
una pgina de desconexin. De esta manera cuando la visites te desconectar
automticamente.
Utiliza la opcin Cargarse la pgina si ests en una pgina de desconexin.
Necesitars crear un enlace a esta pgina y que un usuario lo siga para desconectarse.

Finalmente en el campo Al terminar, ir a: debers introducir una URL a la cual se

redirigir al usuario una vez se haya desconectado. Normalmente una URL no
restringida, como el index.

Practica estos conceptos realizando el Ejercicio Paso a Paso de Accesos

Restringidos.

Puedes crear una pgina para dar de alta nuevos usuarios para hacer crecer el
nmero de escritores en tu blog.

Para ello necesitars introducir un formulario de insercin de registros que cree un

nuevo registro en la tabla usuarios.
Puedes utilizar la opcin Comprobar nuevo nombre de usuario para que se chequee
antes de guardar si el usuario ya existe con ese nombre.
Lo debers indicar en este cuadro de dilogo:

Selecciona el campo del formulario que corresponde con el nombre de usuario.

Y elige una URL a la que redirigir si el nombre ya est ocupado.

Ten en cuenta que si creas diferentes niveles de acceso puedes tener varios escritores
que slo puedan crear nuevas entradas, mientras que el acceso al resto de pginas de
administracin puede estar permitido para una nica persona.

Ejercicio propuesto de la Unidad 22

Prueba evaluativa de la Unidad 22

Pg. 22.9

Unidad 23. XML y RSS (I)

23.1. Introduccin

RSS son archivos que contienen informacin de una pgina web con las ltimas
actualizaciones que se han hecho en ella. Este tipo de archivos es muy til para
cualquier sitio de noticias,foros, weblogs o pgina que emita contenido de forma
continuada.
Para crear archivos RSS utilizamos el lenguaje XML, que es un lenguaje de etiquetas
mucho ms flexible que HTML.
Este sistema tiene un objetivo muy sencillo, el de organizar informacin para su
almacenamiento y distribucin. De hecho, la ltima versin de HTML es XHTML, que no
es ms que HTML pero siguiendo fielmente la estructura XML (etiquetas bien anidadas,
cerradas, en minsculas, atributos siempre entre comillas dobles...).
Un ejemplo muy claro y bsico de lo que sera un archivo XML es el siguiente:

<biblioteca>
<libro>
<titulo>Las 64 casillas</titulo>
<autor>Pablo Alvarez Castano</autor>
<editorial>Paidotribo Editorial</editorial>
<isbn>848019815X</isbn>
</libro>
<libro>
<titulo>Periodismo iconogrfico</titulo>
<autor>Gonzalo Peltze</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432128082</isbn>
</libro>
<libro>
<titulo>Educacin personalizada</titulo>
<autor>Vctor Garca Hoz</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432122882</isbn>
</libro>

<libro>
<titulo>Nuestro universo</titulo>
<autor>John R Gribbin</autor>
<editorial>Ediciones B</editorial>
<isbn>8466605657</isbn>
</libro>
</biblioteca>

En este ejemplo hemos creado un archivo en la que est almacenada la informacin de

nuestra biblioteca. Observa cmo las etiquetas que conforman el archivo no son ms que
identificadores que hemos creado para este fin.

La finalidad de XML y RSS consiste en poder compartir informacin con el resto del
mundo de una forma rpida, sencilla y adaptable.
La organizacin de este tipo de informacin suele ser muy parecida de un sitio a otro.
Utilizaremos Dreamweaver para incluir fcilmente contenido de un sitio externo en
nuestras pginas.

Es necesario que el servidor de pruebas soporte el manejo de este tipo de

archivos para poder incluir este tipo de informacin en nuestras pginas. Para eso
debemos de activar una de sus extensiones (php_xls)

Para aprender a configurar el servidor de pruebas realiza el

Paso de Preparando el Servidor de Pruebas.

23.2. Importar datos de un archivo externo

Ejercicio Paso a

Para poder mostrar los datos almacenados en un archivo XML o RSS externo
deberemos crear un archivo XSLT.
Los archivos XSLT transforman y formatean la informacin para que pueda ser
visualizada correctamente en un navegador.

El primer paso para importar la informacin de un archivo ser abrir un nuevo

documento (Archivo Nuevo).

Puedes elegir entre crear un fragmento de archivo (que incluiremos ms tarde en otro),
o directamente crear una pgina completa que contenga informacin sobre un archivo
externo.
Normalmente nos ser ms til crear fragmentos, pues luego son ms fciles de
adaptar al resto de las pginas.

Se abrir el siguiente cuadro de dilogo Buscar origen XML:

Aqu deberemos indicar la fuente XML de la que queramos sacar los datos.
Como ves en la imagen, tienes dos posibilidades. Una de ellas es tomar el archivo XML
o RSS directamente del mismo sitio donde se encuentra la pgina.
La segunda opcin toma el archivo de una URL en Internet. En este caso debers
asegurarte de cuando en cuando que sigue vigente y no ha sido cambiado de lugar.

Cuando

aceptemos

el

cuadro

de

dilogo

vers

que

en

el

panel Vinculaciones (Ctrl + F10) aparece la estructura del archivo:

Habitualmente los archivos liberados por los diferentes sitios en Internet suelen tener
una estructura muy similar, por lo que siempre tienen al principio del canal (as es como
llaman al archivo liberado, channel en ingls) una breve descripcin de su sitio.

En este caso puedes ver como pende del elemento channel un ttulo (title), un enlace
(link), una descripcin y el lenguaje y a continuacin el contenido propiamente dicho bajo
el elemento item.
Nuestra forma de actuar una vez hayamos declarado la fuente XML y seamos capaces
de ver su contenido en el panel Vinculaciones ser muy parecida a como lo hacamos
cuando crebamos un juego de registros de una base de datos.
Simplemente tendremos que arrastrar el elemento que queremos que se muestre a la
pgina y se visualizar.
Recuerda que para acceder a una visualizacin de la pgina puedes pulsar la
tecla F12 o usar la Vista en vivo.

Para comenzar a importar datos desde un archivo externo realiza el Ejercicio Paso a
Paso de Importar datos RSS.

23.3. Trabajar con elementos XML

Una vez hayamos insertado los elementos del archivo XML podremos tratarlos de forma
similar a como lo hacamos en el tema anterior.

Para crear enlaces, lo haremos como con los juegos de registros. Podemos pulsar el
icono

que

aparece

junto

al

campo Vnculo en

el

panel Propiedades y

seleccionar Fuentes de datos en el cuadro de dilogo Seleccionar archivo:

O podemos arrastrar los valores directamente sobre el cdigo fuente de la pgina,

desde el panel Vinculaciones.
Para practicar realiza el Ejercicio Paso a Paso de Enlaces con elementos.

Cuando estemos en una pgina o fragmento XSLT, el panel Insertar nos permitir
utilizar las herramientas para trabajar con XSLT:

El primer botn nos permitir aadir Texto dinmico, esta opcin acta del mismo
modo que si arrastramos el elemento desde el panel Vinculaciones a la pgina.
Luego encontraremos elementos de bucle o repeticin y condicionales.
Pg. 23.3

23.4. Crear repeticiones

Para crear una repeticin que recorra todos los registros existentes en un archivo RSS
deberemos

utilizar

el

botn Repetir

Regin

que

encontraremos

en

el

panel Insertar grupo XSLT. Este grupo solo aparece visible cuando trabajamos con
pginas o regiones XSLT.
Simplemente selecciona los elementos a repetir y pulsa el botn.
Se abrir el siguiente cuadro de dilogo:

Aqu debers seleccionar el elemento sobre el cual quieres que se produzca la

repeticin.
En el caso del ejemplo que estamos siguiendo en estas imgenes deberemos
seleccionar item,

pues

querremos

que

se

repitan

todos

los

elementos title y description que se encuentren enitem.

Tambin podemos insertar filtros haciendo clic en la flecha que acompaa al

texto Construir filtro:

Utiliza los botones

que se encuentran en el cuadro de dilogo para aadir

condiciones a la repeticin.
En la imagen podemos ver que el filtro se realiza conforme al item, donde el ttulo debe
ser distinto (!=) a "Wikipedia, la enciclopedia libre".

Qu significa esto? Estamos repitiendo una regin y obviando aquel item que posea
un ttulo determinado.
Piensa que podemos querer evitar los items de una categora, un rango de precios, el
idioma, etc...
Tambin sera posible filtrar para que slo se muestren un nmero determinado de
items. Para ello utilizaremos position() que recupera la posicin del elemento dentro del
listado:

En este caso el filtro que hemos aadido hace que slo se muestren los 5
primeros elementos.
Sencillo, verdad?

Para practicar estos conceptos realiza el Ejercicio Paso a Paso de Repeticin de

elementos.
Pg. 23.4

23.5. Ordenar elementos

Ordenar elementos en Dreamweaver no es muy sencillo.

Pero como es una tarea que realizaremos a menudo explicaremos rpidamente cmo
conseguirlo.

Slo es posible ordenar elementos que se encuentren dentro de una regin repetida.
Por lo que deberemos buscar en la vista de Cdigo la zona que se encarga de la
repeticin:

<xsl:for-each select="rss/channel/item[position() &lt;= 5]">

<p>Ttulo: <xsl:value-of select="title"/></p>
<p>Descripcin: <xsl:value-of
output-escaping="yes"/></p>

select="description"

disable-

<hr />
</xsl:for-each>

Ahora sencillamente deberemos aadir una nueva lnea debajo de la que se encarga de
la repeticin ( xsl:for-each).
De esta forma indicaremos que este bloque se debe ordenar:

<xsl:for-each select="rss/channel/item[position() &lt;= 5]">

<xsl:sort select="title"

/>

<p>Ttulo: <xsl:value-of select="title"/></p>

<p>Descripcin: <xsl:value-of
output-escaping="yes"/></p>

select="description"

disable-

<hr />
</xsl:for-each>

En el atributo select deberemos indicar el nombre del campo sobre el cual se

realizar la ordenacin.
Luego podemos aadir otros atributos como:

order: que puede tomar los valores ascending o descending. Por omisin se
toma el valor ascending.

data-type: que indica si el valor a ordenar

un nmero (number). Por omisin se toma el valor text.

case-order: que indica si se deben tomar primero las maysculas (upper-first) o

las minsculas (lower-first).

es

un texto (text)

As el bloque anterior se podra haber escrito como:

<xsl:for-each select="rss/channel/item[position() &lt;= 5]">

<xsl:sort
select="title"
order="descending"
case-order="lower-first"
/>

data-type="text"

<p>Ttulo: <xsl:value-of select="title"/></p>

<p>Descripcin: <xsl:value-of
output-escaping="yes"/></p>

select="description"

disable-

<hr />
</xsl:for-each>

Para practicar realiza el Ejercicio Paso a Paso de Ordenacin de elementos.

23.6. Sentencias condicionales

Finalmente Dreamweaver nos ofrece la posibilidad de crear bloques condicionales para
que se muestren determinados elementos si se cumple una condicin.
Podremos encontrar dos tipos diferentes:

El condicional simple
: que evala una condicin, si sta se cumple se muestra
el contenido, en caso contrario no se mostrar.

El condicional mltiple
: que evala una condicin, si se cumple mostrar un
contenido, en caso contrario mostrar otro.

En ambos casos el cuadro de dilogo que se mostrar ser el mismo:

En el cuadro de texto Prueba se deber escribir la condicin que se probar contra los
elementos del archivo XML para decidir si se muestran o no.
Las principales formas de condicin que utilizars son las siguientes:

Condicin de nodo: donde se prueba un nodo (o campo) del elemento. Por

ejemplo, precio > 200.

Condicin de atributo: donde se prueba un atributo del elemento o de un nodo del

elemento. Ejemplos: @id = 8, para que el id del elemento sea 8,
o coche/@color=rojo, para que el campocoche del elemento tenga un atributo
de color rojo.

Condicin de bsqueda: puedes buscar en un nodo o atributo utilizando la

funcin contains(). As podras escribir contains(nombre, 'la') y mostrara slo
aquellos elementos que tuviesen la cadena la en su nombre.

Una vez introducida la condicin simplemente pulsa Aceptar y la regin condicional se

crear.
En el caso de que utilicemos la condicional mltiple vers que se crea la siguiente
estructura:

Debers introducir un bloque en xsl:when que se mostrar si se cumple la condicin, y

otro en xsl:otherwise para que se muestre cuando no se cumpla.
Pg. 23.6

23.7. Insertar un fragmento XSLT

Una vez tenemos el archivo XSLT terminado y mostrando los datos que queremos
mostrar podemos pasar a insertarlo en cualquier pgina dinmica.
Hacerlo es muy sencillo, slo tendrs que abrir un archivo PHP (en nuestro caso),
colocar el punto de insercin en el lugar que quieras que aparezca la informacin y hacer
clic en el botnTransformacin XSL que encontramos en el panel Insertar, en la
seccin Datos:

Se abrir el siguiente cuadro de dilogo:

En Archivo XSLT debers indicar el archivo que deber mostrarse (el archivo de
tratamiento de XML que hemos creado).
Automticamente se mostrar en URI de XML la direccin del archivo que hemos
utilizado para crear el archivo XSLT.

Al aceptar el cuadro de dilogo se mostrar directamente el contenido del archivo XSLT

en la pgina PHP.

Slo tendrs que pulsar F12 o el botn Vista en vivo y tendrs una previsualizacin de
cmo quedar el archivo.

Observa

que

Dreamweaver

ha

aadido

nuestro

sitio

la

carpeta includes/MM_XSLTransform/. En ella estn los archivos necesarios para realizar

la transformacin XSLT.

Para practicar realiza el Ejercicio Paso a Paso de Aadir XML a nuestra pgina.
Pg. 23.7

23.8. Paso de parmetros

Por ltimo veremos una caracterstica muy til que posee Dreamweaver: el paso de
parmetros.

Podemos utilizar variables en el archivo XSLT para configurarlas ms tarde segn la

pgina dinmica que vaya a mostrarla.
Por ejemplo, en un filtro de repeticin podramos indicar lo siguiente:

En este caso estaremos diciendo que queremos que se muestren tantos elementos
como indique la variable $numero.
A partir de este momento, cuando llamemos al archivo XSLT deberemos darle un valor
a este parmetro para que tenga un valor real.

Pero, cmo hacerlo?, muy sencillo.

Cuando estamos creando la transformacin XSL (ver apartado anterior) deberemos
incluir un parmetro haciendo clic en el botn
Se abrir el siguiente cuadro de dilogo:

En Nombre deberemos especificar el nombre del parmetro (en el ejemplo numero) y

en Valor estableceremos un valor para dicho parmetro.
Aceptamos el cuadro de dilogo y listo.

Ahora podremos modificar el contenido del archivo XSLT segn desde qu archivo PHP
lo carguemos, pues en cada archivo PHP podremos darle un valor diferente.

Para terminar realiza el Ejercicio Paso a Paso de Paso de parmetros.

Ejercicio propuesto de la Unidad 23

Prueba evaluativa de la Unidad 23

Pg. 23.8

Unidad 24. Acceso a datos con Spry (I)

24.1. Introduccin

Dreamweaver nos permite acceder y tratar datos XML empleando su tecnologa Spry.
Spry se compone de un conjunto de archivos codificados en JavaScript que se aadirn
a tu proyecto desde el momento en que empieces a utilizarlos. Como veremos ms
adelante, Dreamweaver te avisar de la creacin de una nueva carpeta en tu sitio que
contendr los archivos necesarios para la ejecucin de las funciones que vamos a ver a
continuacin.
Todos los comandos que vamos a utilizar son accesibles desde el men Insertar
Spry o desde el panel Insertar seleccionado Spry:

Al utilizar spry, Dreamweaver crear la carpeta SpryAssets en la raz del sitio.

24.2. Conjunto de datos XML

Incluir un archivo XML en tu pgina web es muy sencillo, ni siquiera es necesario que
sta sea una pgina dinmica de tipo PHP como llevamos viendo hasta ahora, una pgina
bsica en HTML te servir.
Por eso, si nuestra pgina necesita slo de unos pocos datos, podemos guardarlos en
un archivo XML en vez de recurrir a una base de datos.
Cuando hayas decidido dnde colocar la regin que contendr los datos importados del
archivo XML debers hacer clic en Insertar Spry Conjunto de datos XML de
Spry y se abrir el siguiente cuadro de dilogo:

Debers rellenar este cuadro de dilogo para definir el modo en que accederemos y
cargaremos el archivo XML deseado.

El procedimiento es muy sencillo, primero indicaremos un nombre en Conjunto de

datos para poder distinguirlo y diferenciarlo de otros posibles conjuntos de datos que
queramos cargar.
En Origen XML indicaremos la ruta del archivo XML, puede encontrarse en nuestro
propio sitio o en una direccin concreta de internet, en este ltimo caso deberemos indicar
la ruta completa (incluyendo http://...).
Una vez indicado el archivo XML podemos hacer clic en el botn Obtener
esquema para ver el esquema XML del archivo.

Selecciona el Elemento de fila, es decir la etiqueta XML que contiene el conjunto de

datos que queremos cargar, este paso se realizar tal cual como vimos en la unidad
anterior. Una vez seleccionado haz clic en el botn Vista previa para ver un listado con
los primeros 20 elementos (de muestra) para asegurarte del contenido del archivo.
Para finalizar podemos definir el tipo de datos que contiene cada dato del elemento.
Podemos hacerlo haciendo clic sobre l en el listado de Columnas del conjunto de
datos y seleccionando su tipo en el desplegable Tipo de datos. Podrs elegir
entre: Cadena (de texto), Nmero, Fecha o Vnculo de imagen.

Este cuadro de dilogo tambin te permitir ordenar los elementos del conjunto
respecto a una de sus columnas en el momento de la carga. Para ello
selecciona Ordenar y elige el ordenAscendente o Descendente en Direccin.
Para eliminar las filas duplicadas marca la opcin Distinguir al cargar.
Por ltimo marca la opcin Desactivar cach de datos XML si quieres que el
contenido que se muestre en tu pgina se refresque cada cierto tiempo, indica este
intervalo en la opcinActualizar datos automticamente. En caso de que esta opcin no
se active los datos se cargarn una vez y slo se actualizarn si se refresca la pgina.

Cuando hayas terminado de configurar el cuadro de dilogo haz clic en Aceptar y los
elementos listos para utilizar se mostrarn en el panel Vinculaciones.

24.3. Crear una regin de Spry

Para poder mostrar datos provenientes de un conjunto Spry ser necesario crear
una regin Spry. Para ello simplemente haz clic en Insertar Spry Regin de Spry.
Vers el siguiente cuadro de dilogo:

Selecciona el conjunto de datos creado anteriormente en Conjunto de datos Spry.

Luego decide si quieres que se cree un Contenedor de tipo DIV o SPAN, ten en cuenta
que un DIV es un elemento de tipo bloque, por tanto contiene un salto de lnea antes y
despus de l. Si lo que te interesa es insertar el contenido XML en lnea (por ejemplo
dentro de un prrafo) selecciona el elemento de tipo SPAN.

En caso de que tuvieses algn elemento de la pgina seleccionado las

opciones Ajustar seleccin y Reemplazar seleccin se activarn para que puedas elegir
si situar la regin envolviendo el elemento seleccionado o sustituirlo por el contenedor
elegido.

En principio veremos nicamente la opcin de Tipo Regin, en prximos apartados

veremos para qu nos servir el tipo Regin de detalle.

Pulsa Aceptar y estars listo para arrastrar elementos del panel Vinculaciones a tu
pgina:

24.4. Repeticin de elementos

En el apartado anterior vimos como insertar elementos del archivo XML, pero de ese
modo slo seremos capaces de visualizar la primera fila de elementos.
Dreamweaver pone a nuestra disposicin la opcin de Repeticin de Spry para poder
crear repeticiones de nuestro diseo para cada una de las filas que compongan el
conjunto de datos. Para ello haz clic en Insertar Spry Repeticin de Spry y vers
el siguiente cuadro de dilogo:

Del mismo modo que antes indicaremos el tipo de Contenedor, el Conjunto de datos
Spry y si queremos que se inserte ajustando o reemplazando el elemento HTML
seleccionado.
Puedes seleccionar Repetir o Repetir hijo dependiendo del tipo de repeticin que
quieras conseguir. Seleccionando Repetir hijo hars que lo que se encuentre dentro de la
regin se repita para cada una de las filas del archivo, (opcin muy til para las tablas y la
repeticin de elementos tr (fila de la tabla)).

Pulsa Aceptar y ahora los elementos que aadas se repetirn para cada una de las
filas existentes en el archivo XML.

24.5. Listas de repeticin

Cuando queremos crear un listado de elementos XML sin tener en cuenta el resto de
informacin del archivo podemos utilizar la opcin Insertar lista de repeticin para
generar listados de este tipo:

Brooklyn Follies

Crepsculo

El Evangelio De Judas

El Mtodo: Al Descubierto La Sociedad Secreta De Los Maestros De La Seduccin

El Pintor De Batallas

El Poder Del Ahora

El Profesor

El Viaje A La Felicidad: Las Nuevas Claves Cientficas

La Catedral Del Mar

La Sombra Del Viento

La Verdadera Historia Del Club Bilderberg

Ligero De Equipaje: La Vida De Antonio Machado

Matanzas En El Madrid Republicano: Paseos, Checas, Paracuellos...

Miguel Duran: Del Cielo Al Abismo

Milagro En Los Andes

Milenio 3: El Libro

Seda

Travesuras De La Nia Mala

Un Lugar Llamado Nada

Yo, Maya Plisetskaya

Para ello simplemente haz clic en Insertar Spry Lista de Repeticin de Spry y
vers el siguiente cuadro de dilogo:

Selecciona el tipo de listado que quieres generar en Etiqueta de contenedor. Puedes

elegir

entre UL

(lista

sin

ordenar), OL

(lista

ordenada), DL

(lista

de

definicin) o SELECT (lista desplegable).

En las dos primeras opciones el cuadro de dilogo permanecer tal y como ves en la
imagen.
Si seleccionas DL (lista de definicin) o SELECT (lista desplegable) su aspecto
variar un poco debido a las diferentes opciones que admiten estas etiquetas:
DL (lista de definicin): Consta de dos campos, Columna DT que contiene el
nombre el nombre a definir, y Columna DD que contiene la definicin del campo anterior.

SELECT (lista desplegable): Consta de dos campos, Columna de etiquetas que

contiene el nombre que se muestra en el desplegable, y Columna Valor que contiene el
valor que se pasa cuando se enva el formulario al que pertenece el desplegable.
<option value="8433970925">Brooklyn Follies</option>

Pg. 24.4

24.6. Mostrar Maestro - Detalle

En el cuadro de dilogo que acabamos de ver podemos marcar una ltima
opcin: Actualizar regiones de detalle al hacer clic en la fila.
De esta forma podremos activar una opcin que dejamos atrs en apartados anteriores.
Recuerda que cuando vimos la opcin de Insertar regin de Spry podamos incluir una
regin de Tipo Regin de detalle:

Combinando esta regin con una tabla de datos Spry con la opcin Actualizar
regiones de detalle al hacer clic en la fila activada podremos provocar lo siguiente: Al
hacer clic sobre una de las filas todos los campos situados en la regin Spry (Regin de
detalle) se actualizarn para mostrar la informacin relativa a la fila seleccionada.
Esta opcin es muy sencilla y vistosa, pues permite una interaccin total con el usuario
a la hora de mostrar informacin en pantalla.

Ejercicio propuesto de la Unidad 24

Prueba evaluativa de la Unidad 24

Pg. 24.5

Unidad 25. AJAX y Spry Framework (I)

25.1. Introduccin
Hasta ahora hemos visto dos tipos de lenguaje de programacin en nuestra web:

Por un lado JavaScript (comportamientos). Se ejecuta en el lado del cliente, es

decir, en el propio navegador de quien visita la web, sin tener que recargar la pgina.
Esto dota de dinamismo a la pgina, ya que empleando conocimientos ms
avanzados, podemos crear HTML, cambiar CSS... pero requiere que todo esto haya
sido enviado al cliente al cargar la pgina.

Por otro lado, hemos visto PHP. Se enva una peticin al servidor, el cual genera la
pgina, muchas veces conectndose a la base de datos. Cuando la pgina est
creada en el servidor, se devuelve al usuario, quien la ve en el navegador. Si el
usuario quiere cambiar el contenido, por ejemplo al paginar en un listado, ha de
volver a enviar la pgina, que se tiene que volver a generar y ser devuelta al usuario.

Combinando los scripts ejecutados en el cliente y en el servidor obtenemos AJAX. Lo

que conseguimos con esto es una comunicacin asncrona, pidiendo al servidor slo los
datos que el usuario necesita, sin recargar la pgina, y usando JavaScript para actualizar
solo las regiones afectadas.
Por ejemplo, imaginemos el tpico carrito de compra. Cuando el usuario aade un
artculo, debemos "apuntarlo" en su lista de artculos del servidor. Sin AJAX habra que
enviar toda la pgina, volver a crearla y traerla de vuelta. En cambio, con AJAX, slo
enviamos el ID del artculo. El servidor lo procesa, y enva el resultado a AJAX, que al
recibirlo actualiza nicamente la vista del carrito del usuario, sin recargar toda la pgina.
Esto hace que el usuario perciba la pgina como una aplicacin interactiva ms que como
una web.

Para incluir comportamientos y caractersticas de AJAX en nuestras pginas deberemos

tener conocimientos de JavaScript, XML y DOM (Document Object Model). Con Spry,
utilizar AJAX se hace mucho ms simple y asequible.
Como hemos visto en la unidad anterior es posible incorporar informacin
almacenada en archivos con formato XML y manejarla dinmicamente sin la necesidad
de refrescar la pgina a cada peticin.

Ahora veremos un modo avanzado de utilizar estas funcionalidades desde una

perspectiva menos cmoda pero mucho ms potente, pues seremos capaces de manejar
el contenido dinmico de una forma total y siempre utilizando la librera Spry que nos
proporciona Adobe.

Spry es una tecnologa desarrollada y propietaria de Adobe, y es la que emplea

Dreamweaver. Existen otras opciones, como jQuery, muy empleada en la web.

Pg. 25.1

aulaClic S.L. Todos los derechos reservados. Prohibida la reproduccin por cualquier medio.
Noviembre-2010

25.2. Incluir Spry

En el tema anterior hemos visto como utilizar Spry desde los mens de Dreamweaver
CS5. Ahora vamos a ver tambin cmo utilizar Spry manualmente, desde el cdigo. Es
bastante sencillo, y adems nos dar mayor libertad.
Para utilizar Spry, necesitamos unas bibliotecas de Adobe, que se debern de incluir en
la pgina. Al crear un Conjunto de datos de Spry desde el panel Insertar, estos archivos
se incluyen directamente. Aunque tambin podemos descargarlos desde la web de Adobe
Labs. Adems, incluye algunas demostraciones y la documentacin necesaria para utilizar
Spry.

Slo

te

interesarn

dos

archivos

que

se

encuentran

en

la

carpeta

includes: SpryData.js y xpath.js. Al crearlos con Dreamweaver, ste los guarda en la

carpeta SpryAssets.
Al utilizarlos, Dreamweaver los llamar dentro del <head>:

<script
type="text/javascript"></script>
<script
type="text/javascript"></script>

src="SpryAssets/xpath.js"
src="SpryAssets/SpryData.js"

Si optas por emplear Spry directamente desde el cdigo fuente, no olvides incluir estas
lneas en la cabecera de la pgina.
Con esto referenciamos a los scripts y los incluimos en nuestra pgina. A partir de ese
momento estaremos listos para utilizar Spry.
Ten en cuenta que Spry nicamente utiliza JavaScript para su funcionamiento, por lo
que las pginas donde decidas incluir este tipo de comportamientos no tendrn por qu
ser pginas dinmicas (aunque se comporten como si lo fueran).

Como ms adelante vers, Spry utiliza sus propias etiquetas para trabajar con la
informacin almacenada en el archivo XML.
Debido a esto es aconsejable indicar el espacio de nombre (una direccin de Internet
que contiene la especificacin de las nuevas etiquetas que se van a utilizar) para que el
archivo HTML, PHP, ASP... que estemos utilizando sea correcto y se pueda valorar
positivamente.
Para indicar el nombre de espacio o namespace deberemos aadir el siguiente atributo
a la etiqueta html del documento:

<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:spry="http://ns.adobe.com/spry">

Aqu encontramos un pequeo inconveniente. Si trabajamos con una pgina normal,

Dreamweaver aadir esto automticamente a la descripcin de la etiqueta. Pero si
nuestro documento est basado en plantillas, no lo har. As que habremos de hacerlo,

aadiendo el cdigo interior a la etiqueta html de la plantilla. Aunque esto supone que se
muestre en todas las pginas, aunque slo tengamos una con Spry.
La mayora de los navegadores reproducen Spry sin problemas aunque no incluyamos
el espacio de nombre, debemos de incluirla para asegurarnos de que funcione en todos.

25.3. Importar datos

Como comentbamos antes, Spry es capaz de acceder a datos almacenados en
archivos XML ubicados en el servidor.
Para ello, Spry guarda los datos en un dataset (algo muy parecido a un juego de
registros) que es lo que nos permitir trabajar con la informacin guardada de forma
dinmica.
Tomemos como ejemplo un archivo XML con la siguiente estructura:

<?xml version="1.0" encoding="UTF-8"?>

<listado atributo="aaa" >
<elemento id="1">
<propiedad>valor_1</propiedad>
</elemento>
<elemento id="2">
<propiedad>valor_2</propiedad>
</elemento>
<elemento id="3">
<propiedad>valor_3</propiedad>
</elemento>
</listado>

Podemos crear un dataset desde el men (o panel) Insertar Spry Conjunto de

datos de Spry.

En Seleccionar tipo de datos, indicamos que los queremos obtener de XML. Le

asignamos un Nombre, y seleccionamos la ubicacin del archivo pulsando en Examinar.
Seleccionamos el nodo o estructura que queremos tomar (en la imagen elemento).
Aunque este dilogo tiene ms opciones si pulsamos en Siguiente, las explicaremos
ms adelante. Pulsamos Listo.
Ahora, encontraremos los datos accesibles a travs del panel Vinculaciones.
Desde el punto de vista del cdigo, lo que hemos hecho es bastante simple, basta con
indicar la ruta del archivo y su estructura:

<script type="text/javascript">
var miDataSet
"listado/elemento");

new

Spry.Data.XMLDataSet("archivo.xml",

</script>

Como puedes ver ya hemos generado cdigo JavaScript en la pgina.

Este bloque deber colocarse despus de haber incluido los dos archivos JS
necesarios para que Spry funcione correctamente. Esto lo habr hecho Dreamweaver
automticamente si empleamos el asistente.
Lo que hacemos es declarar un objeto (escribiendo var al principio) con el nombre que
queramos.

La estructura de la creacin del objeto es siempre la misma, simplemente deberemos

indicar donde se encuentra el archivo XML (bien podra tratarse de una direccin absoluta
del tipohttp://www.unsitio.com/carpeta/archivo.xml, si no estuviese en nuestro
servidor), y el tipo de estructura que tiene.

La declaracin que puedes ver la hemos basado en el ejemplo XML anterior.

En este caso la estructura del archivo responde a listado/elemento pues estamos
listando las etiquetas que forman el archivo separadas por barras (/).
Nuestro dataset almacenara los siguientes registros:
@id

propiedad

valor_1

valor_2

valor_3

Estos tres registros se corresponden con los tres items elemento que tenemos en el
archivo XML.
Observa como hemos escrito la columna que se refiere al id del elemento con un
smbolo de @, esta es la forma en la que referenciaremos a los atributos existentes en las
etiquetas.

Sin embargo, los registros almacenados en el dataset dependern de la estructura que

especifiquemos al crearlo.
Imagina que para el mismo ejemplo hubisemos creado el dataset eligiendo el
elemento superior:

<script type="text/javascript">
var miDataSet
"listado");

new

Spry.Data.XMLDataSet("archivo.xml",

</script>

Ahora los registros que se guardaran seran los siguientes:

@atributo
aaa

Esto es debido a que el elemento que tomara para crear las filas que ms tarde
almacenar slo aparece una vez y tiene un slo valor que podamos sacar: su atributo.
As que recuerda que debers especificar correctamente la estructura del archivo XML
para lograr almacenar en el dataset la informacin que te interesa.

Para practicar la creacin de datasets realiza el Ejercicio Paso a Paso Crear un

Dataset.
Pg. 25.4

5.4. Definiendo regiones Spry

Una vez definido el dataset continuaremos creando la pgina como hemos visto hasta
ahora.
Slo deberemos crear una zona especial donde queramos mostrar datos almacenados
en el dataset.
Para ello definiremos una regin Spry. Esta regin indicar que dentro de esta etiqueta
se encontrarn etiquetas especiales (propias de Spry) que nos permitirn incluir
informacin y comportamientos dinmicos.
Para definir una regin, no tenemos ms que pulsar
panel Insertar Spry.

en el

En el dilogo que ya conocemos, indicamos el tipo de contenedor (div para bloque

o span para elementos en lnea) y el dataset.
Realmente, el cdigo generado es muy simple: basta con indicar a la etiqueta que
formar la regin el dataset que utilizar con el atributo especial spry:region.

<div spry:region="miDataSet">
El contenido de la regin de Spry va aqu
</div>

Las regiones tienen solamente una excepcin, no se pueden declarar en una etiqueta
que pertenezca al siguiente listado:
COL

TABLE

COLGROUP

TBODY

FRAMESET

TFOOT

HTML

THEAD

IFRAME

TITLE

STYLE

TR

Lo cual no significa que estas etiquetas no puedan aparecer dentro de la regin.

Simplemente no podrs utilizarlas para declararla.

Lo ms sencillo es utilizar la etiqueta DIV si queremos crear una regin pequea o

directamente sobre la etiqueta BODY de la pgina si quieres incluir datos y
comportamientos indiscriminadamente y te es difcil establecer una regin especfica
dentro de la pgina.
Pg. 25.5

25.5. Mostrar informacin

Una vez definida la regin donde utilizaremos el dataset, ya estamos preparados para
poder incluir la informacin guardada en l.
Para ello, slo tenemos que arrastrar los elementos que queramos empelar desde le
panel Vinculaciones. Podemos emplear la estructura que queramos, prrafos, tablas, etc...

Desde el cdigo fuente, resulta muy sencillo introducir estos elementos. Basta con
seguir la estructura {nombreDataSet::nombrePropiedad} para las propiedades
o{nombreDataSet::@nombreAtributo} para los atributos.

En este ejemplo podrs ver cmo definimos la regin Spry. Dentro de ella creamos una
tabla que mostrar el valor del atributo id del elemento y el valor de su hijo propiedad.

<div

<table

</div>

border="0"

spry:region="miDataset">
cellpadding="5">
<tr>
<td>{@id}
</td>
<td>{propiedad}</td>
</tr>
</table>

Para mostrarlo escribimos entre llaves el nombre del dataset seguido de ::, luego
indicaremos el nombre de la columna.

Recuerda que si queremos referirnos al valor de un atributo deberemos utilizar el

smbolo @.
En este caso no es necesario indicar el nombre del DataSet antes de los elementos,
porque esta regin contiene un nico DataSet. Ms delante veremos la posibilidad de
incluir varios DataSet en una regin.

Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear una Regin
con Informacin.
Pg. 25.6

25.6. Crear repeticiones

Igual que hacamos en las pginas dinmicas, Spry nos permite la repeticin de
elementos para mostrar el contenido completo del dataset y as poder visualizar todos los
registros.

Para ello utilizaremos el atributo spry:repeat.

Este atributo repite la etiqueta en la que est colocado tantas veces como registros
pueda encontrar en el dataset.
De esta forma el siguiente bloque de cdigo reproducira un listado desordenado con
tantos items como registros existan en el archivo XML:
Su uso es igual que spry:region. Incluiremos la repeticin dentro de la regin. Podemos
hacerlo desde el panel Insertar Spry pulsando

o directamente

desde el cdigo, lo que nos permite asignarlo a ms etiquetas, como vemos en este
ejemplo:

<div spry:region="miDataSet">

<ul>
<li spry:repeat="miDataSet">{@id}, {propiedad}</li>
</ul>
</div>

Sencillo, verdad?
Tambin tenemos la posibilidad de utilizar spry:repeatchildren, que al contrario que el
anterior no repite la etiqueta en la que se encuentra, sino aquellas etiquetas que estn
contenidas en ella.
Por ejemplo, podramos conseguir el mismo resultado que en el cdigo anterior
escribiendo:

<div spry:region="miDataSet">
<ul spry:repeatchildren="miDataSet">
<li>{@id}, {propiedad}</li>
</ul>
</div>

Esto har que los hijos de la etiqueta ul se repitan para cada registro. Por lo que
tambin se crear un listado con tantos items como elementos haya en el dataset.
Recuerda,

que

podamos

opcin

hacer

esto

desde

el

diseo,

Para practicar realiza el Ejercicio Paso a Paso Crear repeticiones.

Pg. 25.7

25.7. Ordenar registros

con

la

Cuando creamos repeticiones es probable que queremos que nuestros registros

aparezcan ordenados.
Para ello tendremos dos opciones, ordenarlos desde un principio o aadir un
comportamiento para que cuando se produzca determinado evento los registros que se
estn mostrando en pantalla se ordenen automticamente. Por ejemplo, al pulsar un
encabezado.

Crear comportamientos es muy sencillo. Spry es una librera JavaScript, as que

podemos emplear sus eventos. El evento ms utilizado es el onclick al ser el que ms
interaccin tiene con el usuario (como vimos en el tema de Comportamientos avanzados).
Ordenar un listado utilizando un comportamiento es muy sencillo.
Bastar con utilizar el mtodo sort:

<div spry:region="miDataSet">
<table>
<tr>
<td onclick="miDataSet.sort('@id');">ID</td>
<td onclick="miDataSet.sort('propiedad');">PROPIEDAD</td>
</tr>
<tr spry:repeat="miDataSet">
<td>{@id}</td>
<td>{propiedad}</td>
</tr>
</table>
</div>

Como puedes ver en el ejemplo, este cdigo crear una tabla con un encabezado con
las palabras ID y PROPIEDAD.
El resto de filas sern repeticiones que mostrarn los diferentes registros del dataset.

Si hacemos clic en alguno de los encabezados, los registros se reordenarn para

mostrarse ordenados por el campo que se encuentra en el encabezado pulsado. A la
celda

le

hemos

aadido

un

comportamiento onclick que

ejecute

sobre

el

dataset miDataSet el mtodo sort ordenando por el campo entre parntesis.

Es posible especificar en qu direccin se realizar la ordenacin, para ello debers

indicarlo aadiendo un nuevo parmetro:

miDataSet.sort('propiedad', 'ascendig')
miDataSet.sort('propiedad', 'descending')
miDataSet.sort('propiedad', 'toggle')

Al asociar este mtodo a un comportamiento podemos provocar que los registros se

ordenen ascendentemente, descendentemente o utilizar la propiedad toggle para que
cada vez que se provoque el comportamiento cambie la ordenacin de ascendente a
descendente y viceversa.

Como hemos dicho tambin es posible provocar la ordenacin al cargar el dataset, de

esta forma al visualizar los datos por primera vez aparecern ordenados de la forma en
que queramos y no har falta esperar a que se realice un comportamiento para
ordenarlos.
Ordenar un dataset en la carga requiere que se especifique en el momento en que lo
definimos.
Veamos un ejemplo:

<script type="text/javascript"> var miDataSet = new

Spry.Data.XMLDataSet("archivo.xml","listado/elemento",
{sortOnLoad:"propiedad", sortOrderOnLoad:"descending"});
</script>

Aqu, en el momento de la declaracin del dataset indicamos por qu campo se debe

de ordenar y en qu sentido.

Podemos

ordenar

por

varios

campos,

separndolo

por

/.

Por

ejemplo sortOnLoad:propiead/@atributo.

La ordenacin en algunos momentos puede crearnos problemas si estamos

visualizando campos que contienen nmeros o fechas. Por ejemplo como nmero, 9 es
menor que 10. En cambio, como texto al ordenar alfabticamente, '10' va antes que '9'.
Para ello utilizaremos la declaracin de los tipos de columnas:

<script type="text/javascript"> var miDataSet = new

Spry.Data.XMLDataSet("archivo.xml",
"listado/elemento", {sortOnLoad:"propiedad",
sortOrderOnLoad:"descending"}); miDataSet.setColumnType("propieda
d", "number"); </script>

De esta forma estamos indicando que la columna propiedad es de tipo numrico,

tambin podramos haber escrito date si fuese de tipo fecha.
Por defecto las columnas se consideran de tipo texto y por lo tanto se ordenar
alfabticamente.
Pg. 25.8

25.8. Condicionales
Es posible crear condiciones dentro de las reas de repeticin para decidir si los
elementos se debern mostrar o no.
Para ello nos podremos valer de diferentes mtodos.

El primero que veremos ser el atributo spry:test, que debe colocarse junto a
un spry:repeat (o spry:repeatchildren)

Este atributo nos permite crear una condicin junto a la repeticin que evaluar cada fila
y la mostrar si cumple la condicin.
Por ejemplo:

<div spry:region="miDataSet">
<ul spry:repeatchildren="miDataSet" spry:test="{ds_RowID} <= 5;">
<li>{@id}, {propiedad}</li>
</ul>
</div>

Esta condicin har que la repeticin se produzca mostrando los 6 primeros

elementos (recuerda que el conteo empieza en 0, por lo que el sexto elemento tendr
una RowID de 5). RowID, es un identificador que asigna automticamente Spry a cada fila
o registro, comenzando por 0. No tiene nada que ver con el valor del atributo @id.

Otra forma de crear condiciones es utilizando las expresiones regulares que

comentamos en la unidad 12.
De esta forma podemos crear condiciones que evalen el contenido de algn campo:
<ul
spry:repeatchildren="miDataSet" spry:test="'{propiedad}'.search(/^A
n/) != -1;">
De esta forma mostraremos slo aquellos registros cuyo campo propiedad empiece
por An. != es el operador lgico que indica distinto.
La funcin de JavaScript search evala la expresin regular indicada (que debe de ir
delimitada por los barras /). Si encuentra alguna coincidencia devuelve su posicin (la
posicin 0 sera el primer carcter). Si no la encuentra, devuelve -1.
Por tanto, si quisisemos aquellos que no empiezan por An deberamos escribir:
<ul
spry:repeatchildren="miDataSet" spry:test="'{propiedad}'.search(/^A
n/) == -1;">

== es el operador lgico que indica igual.

E incluso podramos igualar un campo para mostrar slo aqul que tenga determinado
valor. En este caso hacemos la comparacin directamente:
<ul

spry:repeatchildren="miDataSet" spry:test="'{propiedad}'

==

'valor';">

Luego podemos encontrar otros elementos de condicin ms complejos y flexibles.

Estos no necesitan estar al lado de un spry:repeat, pero s dentro de una etiqueta
afectada por l.

Pg. 25.9

odemos utilizar spry:if para decidir mostrar algo o no.

Podramos mostrar, por ejemplo, slo los registros que tengan un determinado atributo
a 1:

<div spry:region="miDataSet">
<ul spry:repeatchildren="miDataSet">
<li spry:if="{@atributo} == 1;">{@id}, {propiedad}</li>
</ul>
</div>

De esta forma podemos decidir ya no slo si mostrar registros o no, sino tambin
ocultar algunas etiquetas, dependiendo del valor concreto de cada uno.

Bastar con que pongas el atributo dentro de una etiqueta concreta y se evaluar para
cada registro si mostrarla o no (y con ella todo su contenido).

Otro

elemento

condicional

que

podremos

utilizar,

an

ms

completo

es spry:choose.
Este condicional te permite evaluar diferentes casos y para cada uno tomar diferentes
decisiones.
Por ejemplo:

<div spry:region="miDataSet">
<ul spry:repeatchildren="miDataSet" spry:choose="spry:choose">
<li spry:when="{ds_RowID}%2==0;" class="estilo1">{@id},
{propiedad}</li>
<li spry:when="{ds_RowID}%2!=0;" class="estilo2">{@id},
{propiedad}</li>
</ul>
</div>

Aqu indicamos que una regin o una repeticin ser spry:choose. Esto indica que
dentro encontraremos elementos con spry:when, que slo se mostrarn si ese cumple la
condicin.
En el ejemplo anterior calculamos el resto (%) de dividir entre 2 el id de la fila. Tenemos
dos spry:when, uno para cuando ese resto sea 0 y otro para cuando no. En cada caso,
damos una clase distinta al elemento de lista. Con eso logramos ir alternando la clase de
las filas, creando un listado "cebra".
En el ejemplo anterior no puede suceder, pero qu pasara si ninguna condicin se
cumple? No se mostrara ese elemento.
Podemos establecer la condicin por defecto, es decir, cuando no se cumplan las
anteriores, con spry:default. En el ejemplo, podramos cambiar la segunda condicin
para que sea cierta si no lo es la primera.

<li
spry:default="spry:default"
{propiedad}</li>

class="estilo2">{@id},

Puedes practicar con el ejercicio paso a paso Crear condiciones.

Pg. 25.10

25.9. Filtros
Otra posibilidad a la hora de decidir qu registros mostrar o no son los filtros.
Un filtro se aplica sobre un dataset y descarta las filas que no lo cumpla.
Podrs aplicar un filtro dinmicamente y hacer que se aplique cuando se produzca
determinado evento.

Al aplicar el filtro en un comportamiento deberemos establecer una funcin que

contendr las directrices que se debern seguir para decidir si una fila se muestra o no.
El modo en el que declararemos la aplicacin de un filtro en un comportamiento
dinmico es el siguiente:
<a

href="#" onclick="miDataSet.filter(miFuncion);">Filtrar

registros</a>
Esta funcin deber ser declarada cuando se crea el dataset.
Por ejemplo:

<script type="text/javascript">
var
miDataSet
=
"listado/elemento");

new

Spry.Data.XMLDataSet("archivo.xml",

miDataSet.setColumnType('@id', 'number');

var miFuncion = function(dataSet, row, rowNumber) {

if (row["propiedad"] == "valor") {
return row;
} else {
return null;
}
}

</script>

En este ejemplo podemos ver como se declara un dataset, y una de sus columnas se
declara tambin de tipo numrico.
Luego introducimos la funcin que llamaremos en el evento onclick.
onclick="miDataSet.filter(miFuncion);"
La estructura de esta funcin ser siempre la misma. Simplemente debers cambiar la
condicin que har que la fila se desprecie o no.
Lo nico que debers recordar es que para referenciar a una columna debers utilizar
la sintaxis row["propiedad"].
El resto continuar completamente igual, e incluso podrs utilizar el mtodo de
bsqueda con expresiones regulares que vimos en el apartado anterior:

var miFuncion = function(dataSet, row, rowNumber) {

if (row["propiedad"].search(^/An/) == -1) {
return row;
} else {
return null;
}
}

Cuando se produzca el evento se filtrarn los resultados.

Podrs volver a mostrar los datos originales llamando al mtodo filter pero sin pasarle
ninguna funcin:
<a href="#" onclick="miDataSet.filter();">Mostrar todos</a>
Esto regenerar el dataset y volver a mostrar los registros sin filtrar.

Existe otra posibilidad que filtra el dataset destructivamente.

Es decir, el filtro que se aplica no puede ser revertido, y las filas despreciadas se borran
del dataset.
Para ello debers utilizar el mtodo filterData de la siguiente forma:
<a

href="#" onclick="miDataSet.filterData(miFuncion);">Filtrar

sin vuelta atrs</a>

El funcionamiento de este filtro es exactamente igual al anterior.
Tambin requiere de la misma funcin y acta del mismo modo.
La nica diferencia se encuentra en que no podrs recuperar las filas que haya quitado
el filtro.
Esto puede ser til, para agilizar el dataset, si es muy grande pero hay muchos datos
que no se van a utilizar.

Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear un Filtro.
Pg. 25.11

25.10. Eliminar filas repetidas

Existe un ltimo mtodo para despreciar registros que se basa en la eliminacin del
dataset de los registros repetidos.
Para ello utilizaremos el mtodo distinct.
De nuevo, nos encontramos con que este mtodo es destructivo, por lo que si lo
ejecutas y eliminas las filas repetidas no podrs volver a recuperarlas a no ser que
cargues de nuevo el archivo XML.

Puedes utilizarlo de dos formas, dinmicamente (ligado a un comportamiento) o al crear

el dataset.

Para utilizar este mtodo con un comportamiento simplemente debers escribir lo

siguiente:
<a

href="#" onclick="miDataSet.distinct();">Eliminar

filas

repetidas</a>
Al producirse el evento los registros repetidos se eliminan del dataset y no vuelven a
aparecer.

Para cargar un dataset sin filas repetidas debers indicarlo en la declaracin del objeto
dataset de este modo:

<script type="text/javascript">
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml",
"listado/elemento", {distinctOnLoad: true});
</script>

Sencillo, verdad?

25.11. Actualizar la carga de un archivo XML

Hemos visto que una vez descargado el archivo XML, nuestras pginas trabajarn con
el dataset cargado en modo cliente sin tener que volver al servidor para cargar los datos
cada vez.
Es posible que en determinados momentos nos sea necesario mostrar el contenido de
un archivo XML que contiene informacin que se actualiza en periodos muy breves.
A veces es interesante mostrar la informacin completamente actualizada al segundo.
Para ello deberemos utilizar el mtodo loadInterval. Este mtodo obliga a Spry a
recargar el archivo XML en el intervalo de tiempo que indiquemos.
La forma en la que deberemos declararlo ser la siguiente:

<script type="text/javascript">
var miDataSet
"listado/elemento",

new

Spry.Data.XMLDataSet("archivo.xml",
{useCache:

false, loadInterval: 30000});

</script>

Como puedes ver en el ejemplo, establecemos que el intervalo de recarga sea

de 30000 milisegundos (es decir, 30 segundos).
Tambin hemos aadido la propiedad useCache:false para evitar que el archivo XML
se almacene en la cach de la mquina y as obligarle a tener que volver a hacer una
peticin para volver a leer los datos del archivo en su situacin actual.

Este mtodo tambin se puede utilizar ligado a un comportamiento, deberemos utilizar

el mtodo startLoadInterval del siguiente modo:
<a
href="#" onclick="miDataSet.startLoadInterval(30000);">Recargar
XML</a>
Aunque de este modo tambin es recomendable mantener el uso de la
propiedad useCache para evitar que se tome la versin almacenada en cach.

El mtodo stopLoadInterval detiene la recarga del archivo XML y deja el ltimo que se
carg como archivo de trabajo.
La forma de utilizarlo es igual al anterior:
<a

href="#" onclick="miDataSet.stopLoadInterval();">Dejar

de

recargar XML</a>
Pg. 25.12

25.12. Modo Maestro/Detalle

Una de las posibilidades que nos ofrece Spry es trabajar en modo maestro/detalle.
De esta forma podemos mostrar unas cuantas columnas por registro y mostrar el
detalle completo si son seleccionadas.
El uso de este mtodo es muy aconsejable cuando la informacin almacenada para
cada registro es muy grande.
Para ello, adems de definir una regin spry:region deberemos reservar tambin una
regin para el detalle utilizando spry:detailregion.

La forma de trabajo para este modo es muy similar a la que llevamos viendo,
simplemente habr que aadir un nuevo elemento que har las veces de regin de
detalle:

<div spry:region="miDataSet">
<ul spry:repeatchildren="miDataSet">
<li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id},
{propiedad}</li>
</ul>

</div>

<div spry:detailregion="miDataSet">
<p>{columna2}</p>
<p>{columna3}</p>
<p>{columna4}</p>
<p>{columna5}</p>
</div>

Como puedes ver hemos aadido una nueva regin donde cargaremos la informacin
completa del registro actual, para ello hemos de generar un evento que ejecute el mtodo
que establece (set) cul es el nuevo registro (row) actual (current).
Lo hemos aadido en un evento onclick.
Para

establecer

un

nuevo

registro

como

el

actual

hemos

utilizado

el

mtodo setCurrentRow, que necesita de un valor numrico el cual pasar como registro
actual.
La regin identificada como regin de detalle (spry:detailregion) se actualizar
automticamente mostrando el resto de campos que en la regin maestro no se
mostraban.
Recuerda que al insertar una nueva regin Spry, podamos que fuese una regin de
detalle.

25.13. Modo Maestro/Detalle con diferentes fuentes XML

Es posible que el detalle de un elemento no se encuentre en el mismo archivo XML, lo
que nos obligara a cargar el XML del maestro junto con todos los archivos que
contuviesen la informacin del detalle de cada uno de los registros.
Esta operacin se puede resolver fcilmente en Spry de la siguiente forma:

<script type="text/javascript">
var miDataSet
"listado/elemento");

new

Spry.Data.XMLDataSet("archivo.xml",

var
miDataSetDetalle
Spry.Data.XMLDataSet("{miDataSet::URL}",
"listado/detalle_elemento");

new

</script>

De esta forma deberemos incluir una nueva columna en el archivo XML del maestro
indicando la URL del archivo del detalle para cada uno de los registros.
As cada vez que cambiemos de registro actual el dataset se recargar con el archivo
que establece ese campo y mostrar el detalle del registro que nos interesa.
Luego el cdigo permanece prcticamente igual que el anterior, slo que deberemos
cambiar la seccin spry:detailregion para que apunte al dataset correspondiente:

<div spry:region="miDataSet">
<ul spry:repeatchildren="miDataSet">
<li onclick="miDataSet.setCurrentRow('{ds_RowID}')">{@id},
{propiedad}</li>
</ul>
</div>

<div spry:detailregion="miDataSetDetalle">
<p>{columna2}</p>
<p>{columna3}</p>
<p>{columna4}</p>
<p>{columna5}</p>
</div>
Pg. 25.13

25.14. Spry y estilos CSS

Adems de todo lo que hemos visto, Spry tiene un par de atributos que nos servirn de
muchsima ayuda a la hora de darle formato y resaltar zonas de la pantalla.

spry:hover permite aplicar a un elemento una clase CSS existente cuando el cursor
est encima.
Simplemente debers indicar el nombre de la clase que anteriormente habrs definido y
Spry har el resto por ti:

<style>
.resaltado { background-color: yellow; }
</style>
...
<div spry:region="miDataSet">
<ul spry:repeatchildren="miDataSet">
<li spry:hover="resaltado">{@id}, {propiedad}</li>
</ul>
</div>

Del mismo modo, spry:select acta aplicando un estilo determinado cuando

hacemos clic en la etiqueta afectada por este atributo, la sintaxis es exactamente la
misma.
Combinando ambos mtodo podremos lograr una interfaz mucho ms interactiva.

<style>
.resaltado { background-color: yellow; }
.seleccionado { color: red; }
</style>
...
<div spry:region="miDataSet">
<ul spry:repeatchildren="miDataSet">

<li spry:hover="resaltado" spry:select="seleccionado">{@id},

{propiedad}</li>
</ul>
</div>

Finalmente, Spry permite el uso de una propiedad ms, spry:selectgroup.

El objetivo de este atributo es que cualquier elemento que use el mismo valor asignado
a l deje de tomar la clase aplicada cuando se haga clic sobre otro elemento con el mismo
nombre de grupo.
El resto de elementos con valores diferentes en spry:selectgroup seguirn con la regla
CSS aplicada hasta que se haga clic en un elemento con el mismo nombre de grupo.
<lispry:hover="resaltado" spry:select="seleccionado" spry:selectg
roup="miGrupo">{@id}, {propiedad}</li>
Pg. 25.14

25.15. Importar datos (II)

Volvamos ahora al asistente de Dreamweaver para importar datos.
Podemos crear un dataset desde el men (o panel) Insertar Spry Conjunto de
datos de Spry.

En Seleccionar tipo de datos, indicamos que los queremos obtener de XML. Le

asignamos un Nombre, y seleccionamos la ubicacin del archivo pulsando en Examinar.
Seleccionamos el nodo o estructura que queremos tomar (en la imagen elemento).
Esto ya lo conocemos. Pero encontramos ms opciones que ya nos sonarn si
pulsamos Siguiente:

Lo primero que podemos elegir aqu es el tipo de dato de cada columna.

Debajo, podemos ordenar el dataset por una columna, de forma ascendente o

descendente.

Encontramos tambin la opcin de Filtrar filas duplicadas.

Y por ltimo las

automticamente.

opciones

de refresco: Desactivar

cach y Actualizar

Vemos que desde aqu podemos configurar las opciones que hemos visto con un par de
clics.
Adems podemos generar el diseo de los datos, si pulsamos en Siguiente:

Elegir uno de estos diseos u opciones de visualizacin nos agilizar el trabajo.

Podemos insertar tablas con columnas reordenables y colores distintos para filas alternas,
regin maestro/detalle, etc.

Ejercicio propuesto de la Unidad 25

Pg. 25.15

Prueba evaluativa de la Unidad 25

Unidad 26. Spry y Formularios (I)

26.1. Introduccin
En las anteriores unidades vimos cmo poder acceder a datos utilizando Spry. Aunque
la funcionalidad de esta librera no se limita nicamente a eso. Como hemos podido ver
tambin ramos capaces de realizar operaciones dinmicamente sin necesidad de realizar
refrescos en la pgina.
En esta unidad y las posteriores veremos las posibilidades de Spry para crear
comportamientos AJAX en nuestro sitio.
Ahora veremos qu puede hacer Dreamweaver por nuestros formularios. Encontrars
las opciones que utilizaremos bajo el men Insertar Spry o en la barra Insertar,
pestaa Spry.

Como es habitual con Spry, Dreamweaver ir incluyendo archivos JavaScript a nuestro

sitio, en la carpeta SpryAssets, uno para cada tipo de control. Adems, incluir una hoja
de estilo, para los estilos de los distintos estados que veremos.

Pg. 26.1

26.2. Validacin de campos de texto

La primera opcin que veremos es la insercin de campos de textos dinmicos en

nuestros formularios. Utilizando la opcin Insertar Spry Campo de texto de
validacin de Sprypodremos insertar un campo de texto que valide los valores que se
introducen en l:
Nmero de telfono:

Cuando insertamos este tipo de controles en nuestros formularios podremos ver lo

siguiente en la vista de Diseo:

El objeto de campo de texto es exactamente igual al que vimos en la unidad de

formularios. Haciendo clic en la etiqueta azul Campo de texto de Spry podrs ver las
opciones de validacin en el panel Propiedades:

Veamos las posibilidades que nos ofrece.

En el desplegable Tipo podemos seleccionar el tipo de valor que se va a introducir. En
principio, Spry tiene predefinidos bastantes tipos como telfono, nmero de seguridad
social, tarjetas de crdito, fechas, correos electrnicos, etc... Solamente ser
necesario seleccionarlos y elegir el formato en el desplegable Formato.

De este modo la validacin ya viene programada automticamente y no es necesario

aadir mucho ms.
En el caso de que queramos aadir una validacin que no existe en el
desplegable Tipo deberemos seleccionar Personalizado. Para validar la introduccin
deberemos, entonces, introducir unpatrn contra el que se comparar y se evaluar si es
correcto o no. Para ello escribiremos en el campo Patrn una secuencia de caracteres
que imite el texto que buscamos, y marcamos la opcin Aplicar patrn.
Por

ejemplo,

si

queremos

que

se

introduzca

un

nmero

con

dgitos

escribiremos 00000. Fcil, verdad?

En cualquier caso podemos escribir en Sugerencia una ayuda para que el
usuario sepa exactamente qu debe escribir. Ten en cuenta que al validar un campo
estamos obligando a que se escriba determinado tipo de datos. Por lo tanto ser
necesario hacrselo saber de alguna forma.
El resto de opciones son muy sencillas. Valor min y Valor mx establecen un rango de
valores al cual debe pertenecer el valor introducido. Con Car min y Car mx podemos
indicar cuantos caracteres mnimos y mximos admite la caja de texto.
Activa la opcin obligatorio si quieres que el campo no pueda dejarse en blanco.

Luego encontraremos las opciones de validacin, es decir, cuando queremos que Spry
compare lo que se ha escrito y lo considere correcto o errneo. El valor onSubmit estar
siempre marcado por defecto, esto es, cada vez que se enve el formulario se comprobar
que los datos introducidos son correctos.
Aunque tambin es posible aadir dos momentos ms donde se evaluar el
contenido. onBlur ejecuta la evaluacin cuando se abandona el cuadro de texto,
y onChange se ejecuta cada vez que se escribe cualquier carcter en la caja.
Puedes marcar cualquiera de estas opciones, pero ten en cuenta que por
ejemplo onChange puede resultar un poco engorroso pues mostrar un error cada vez
que escribamos hasta que se alcance el patrn correcto. De todas formas te
recomendamos que pruebes cada una de las opciones y te quedes con la que ms se
ajuste a tus necesidades.
Pg. 26.2

26.3. Estados de validacin

Una vez definido nuestro campo de validacin deberemos configurar los mensajes de
error que se mostrarn. Dependiendo del tipo de control que utilicemos (como veremos
ms adelante) el tipo de error puede ser diferente, pero su tratamiento es exactamente el
mismo.
Veremos cmo tratarlos tomando como ejemplo la validacin de campos de texto que
acabamos de ver.
En el panel Propiedades podrs encontrar el desplegable Estados de vista previa:

Desde esta opcin puedes pasar a la visualizacin de cada uno de los estados de error
existentes, de cuando es vlido o del estado inicial:

En

la

imagen

anterior,

los

estados

corresponden

previas Inicial, Obligatorio, Formato no valido y Vlido respectivamente.

las

vistas

En cualquiera los casos errneos podremos editar el mensaje de error, cambiar su

apariencia mediante estilos desde los paneles Propiedades y CSS e incluso colocarlos
donde mejor nos convenga.
Recuerda que cada uno de los estados es independiente del resto, por lo que ser
necesario que edites cada uno de ellos si quieres que se muestren de un modo
personalizado.

26.4. Validacin de campos desplegables

Otra de las opciones que nos proporciona Spry es la validacin de controles
desplegables, para ello deberemos hacer clic en Insertar Spry Seleccin de
validacin de Spry. De este modo aadiremos un control de lista desplegable tal y como
vimos en la unidad de formularios.
La utilidad de esta herramienta es la posibilidad de controlar los valores que se
seleccionan:
Selecciona un elemento:

Seleccione

un elemento vlido.Ese elemento no puede ser seleccionado.

En este caso las opciones que se presentan al seleccionar el elemento Spry son las
siguientes:

En este caso las opciones comunes son los Estados de vista previa y los
de validacin que son iguales a los del campo de texto. Aunque en el caso de las listas
desplegables es aconsejable usar el valor onChangue para que se evale cada vez que
se selecciona un valor, haciendo que se muestre el error nada ms elegir un elemento
incorrecto.

Las opciones de validacin tienen mucho que ver en este caso con el contenido de la
lista de valores del desplegable en s:

Observa que si marcamos la opcin de No permitir valores en blanco al seleccionar

el valor2 (en la imagen) se ejecutara el mensaje de error Obligatorio.
En el caso de No permitir Valor no vlido (-1, aunque puedes modificar el valor para
que tome el que t quieras) al seleccionar -- elige una opcin -- saltara el error No
vlido, por tener asignado ese valor.
Pg. 26.3

26.5. Grupo de opciones

Cuando tenemos que elegir una opcin, en vez de una lista de seleccin podemos optar
por un grupo de botones de opcin (o botones de radio). Al seleccionar no de ellos, se
deselecciona el resto. para ello deberemos hacer clic en Insertar Spry Grupo de
opciones de validacin de Spry.
Bsicamente con esta opcin podemos controlar que se haya elegido alguno, o valores
no vlidos, como en las listas desplegables.

Opcin 1

Opcin 3

Opcin 2

Opcin X

Selecciona alguna opcin Seleccione un valor vlido.

La opcin ms interesante es Obligatorio. Tambin podemos establecer un valor

como Vaco o No vlido, que no pasar la validacin.

26.6. Casillas de verificacin

Desde Insertar Spry Campo de verificacin de validacin de Spry podemos
crear y controlar las casillas de verificacin de nuestros formularios. Observa el ejemplo a
continuacin:
Selecciona entre 1 y 3 opciones:
Valor 1
Valor 4

Valor 2

Valor 5

Valor 3

Valor 6

Selecciona por lo menos una casilla.Selecciona 3 casillas

como mximo.

Al crear el campo de verificacin se crea nicamente una casilla. Esto es debido a

que en el panel Propiedades existe la opcin de poder establecer que dicha casilla sea
de seleccin obligatoria (Obligatorio (casilla nica)), como en el caso de formularios en
los que se ha de aceptar las condiciones de determinado contrato, etc.

Un uso ms avanzado de este control es cuando combinamos ms de una casilla en la

misma regin de Spry.
Este caso es un poco ms complicado. Deberemos crear la regin Spry tal y como
acabamos de ver, luego sin salirnos de la zona delimitada con el recuadro
azuldeberemos insertar ms casillas de verificacin mediante el men Insertar
Formulario Casilla de verificacin hasta alcanzar el nmero de casillas que
necesitemos:

En el panel Propiedades deberemos indicar que estamos trabajando con ms de una

casilla marcando la opcin Aplicar rango (varias casillas). De esta forma podremos
indicar el mximo y mnimo de casillas de verificacin que se podrn cambiar. Para ello
utiliza los campos disponibles en N mnimo de opciones seleccionadas y N mximo
de opciones seleccionadas.
Pg. 26.4

26.7. reas de texto

La ltima opcin que veremos ser la creacin de reas de texto con validacin.
Puedes hacerlo desde Insertar Spry rea de texto de validacin de Spry.
Aqu tienes un ejemplo de cmo funciona:

Introduce el texto (mx. 50 caract.):

Llevas escritos 0 caracteresEscribe algn texto.Se ha superado el nmero mximo de

caracteres.

Al crear el campo de validacin podrs encontrar las siguientes opciones en el

panel Propiedades:

A continuacin pasaremos a explicarlas.

En cualquier caso siempre podremos obligar al usuario a que rellene el campo
marcando

la

opcin Obligatorio.

incluir

un

texto

de

ejemplo

escribindolo

en Sugerencia.
Escribe en Car min y Car mx el nmero de caracteres mnimos y mximos que
aceptar el control. Puedes hacer que los caracteres que se escriban de ms no se
puedan escribir marcando la opcin Bloquear caracteres extra.
Finalmente puedes incluir un contador de caracteres marcando la opcin Recuento de
caracteres o Caracteres restante para que se muestren los caracteres que se han
escrito o los que faltan para alcanzar el mximo respectivamente.
Este control es muy sencillo de utilizar y permite el control del texto introducido de una
forma cmoda y rpida.

26.8. Contraseas
Muchas veces habrs observado que al registrarte en un sitio te obligan a introducir una
contrasea con in mnimo de complejidad, por ejemplo combinando letras y nmeros, para

intentar que sea una contrasea ms segura. Spry nos permite hacer esto con Insertar
Spry Contrasea de validacin de Spry:
Contrasea:
(Mn. 6 caracteres. Debe combinar letras y nmeros) Se necesita un valor.La contrasea no es

segura.Mnimo 6 caracteres.

Para ello en las propiedades del control

La mayora de opciones ya las hemos visto. Lo nica novedad es que nos permite
indicar valores

mximos y mnimos para

el nmero

de letras, dgitos,

letras

en mayscula y caracteres especiales que podr contener la contrasea.

26.9. Campo de confirmacin

Cuando introducimos una contrasea en la que no vemos los caracteres, con finalidad
de guardarla para un nuevo usuario, se hace imprescindible el uso de un campo de
validacin, en el que el usuario pueda volver a escribir la contrasea, para compararlas y
comprobar que realmente ha escrito lo que quera. Tambin se emplea mucho para
confirmar que no se ha equivocado al escribir una direccin de correo.
Contrasea:

Repita:

Se necesita un valor. Los valores no coinciden. Se necesita un

valor. La contrasea no es segura. Mnimo 6 caracteres.

Lo nico que debemos configurar en este caso es indicar en el desplegable Validar

con el campo con el que se comparar.

Ejercicio propuesto de la Unidad 26

Prueba evaluativa de la Unidad 26

Pg. 26.5

Unidad 27. Controles Spry Avanzados (I)

27.1. Introduccin
En esta unidad veremos algunos controles basados en JavaScript que Dreamweaver
pone a nuestra disposicin utilizando su librera Spry.
Estos controles harn que tus pginas se muestren de una forma ms profesional,
vistosa y ordenada.
Podrs encontrarlos bajo el men Insertar Spry, al final del desplegable o desde el
panel Insertar, seleccionando Spry:

Estos controles son completamente configurables y adems tambin aceptan

modificaciones en su estilo utilizando CSS. De hecho el estilo inicial que muestran es muy
bsico, por lo que no deberas tener problemas para modificarlo.
Y como siempre, Dreamweaver ir aadiendo las libreras que necesite para crear
estos comportamientos a la carpeta SpryAssets.

Pg. 27.1

Podemos crear mens de forma muy sencilla haciendo clic en Insertar Spry
Barra de mens de Spry:

Men 1

o
o

Men 2
Men 3

o
o

Submen 1.1
Subsub 1.1.1
Subsub 1.1.2
Submen 1.2
Submen 1.3
Subsub 1.3.1
Subsub 1.3.2

Submen 3.1
Subsub 3.1.1
Subsub 3.1.2
Submen 3.2
Submen 3.3

Men 4
El primer cuadro de dilogo que encontraremos ser el siguiente:

Aqu

podremos

seleccionar

el

diseo

para

nuestro

men,

haz

clic

en Horizontal o Vertical y pulsa el botn Aceptar.

Se crear automticamente el men, que podrs visualizar desde la vista de Diseo de
esta forma:

Haciendo clic en la cabecera azul Barra de mens de Spry podremos ver en el

panel Propiedades las opciones necesarias para configurar nuestro men:

La creacin de elementos es bastante sencilla. Este men admite hasta 3 niveles

diferentes, as que en principio la primera tarea ser definir el primer nivel. Esto lo
haremos desde el primer cuadro de listado.
Aadir y quitar elementos es tan fcil como utilizar los botones
reorganizarlos luego utilizando las flechas

, y podemos

. Cada uno de estos elementos puede ser

modificado para que muestren el texto que queramos, lo haremos desde las cajas de texto
que encontramos a la derecha.
En Texto escribiremos el literal que queremos que se lea en el men. Si ese elemento
debe contener un enlace (a una pgina o a un correo electrnico) lo haremos escribiendo
en la caja de textoVnculo. Si trabajamos en una pgina con marcos podremos utilizar el
campo Destino para establecer en cul de ellos se abrir el enlace.
Por ltimo, Ttulo contendr una ayuda contextual que se mostrar en forma de
etiqueta al colocar el ratn sobre el elemento del men.

Una vez definido el primer nivel, asaremos a crear los hijos de cada elemento.
Selecciona uno de los items y crea las opciones que se desplegarn al colocar el ratn
sobre ellos. De nuevo utiliza los botones

para gestionar los elementos en el

segundo listado.
Selecciona cada uno de los elementos de primer nivel y ves creando sus
subelementos uno a uno.

Una vez creado un elemento de segundo nivel tambin seremos capaces de colgar
sobre ste otro elemento de tercer nivel para ello utiliza los botones

rellena el tercer listado de elementos.

Al final, dependiendo de lo complejo de nuestro men, puede resultarnos muy difcil ver
su estructura o recorrer sus elementos. Adems, puede que hayamos aadido algn estilo
CSS que Dreamweaver no interpreta como toca. En estos casos, resulta muy til la
opcin Desactivar estilos, que nos mostrar el HTML real del men: una lista con
enlaces.

Pg. 27.2

27.3. Navegacin por Fichas

Puedes crear un control como el que mostramos a continuacin haciendo clic
en Insertar Spry Paneles en fichas de Spry:

Ficha 1

Ficha 2

Contenido de la primera ficha.

Puede contener los elementos que quieras.

Estas fichas son contenedores que admiten todo tipo de elementos HTML. Facilitan la
navegacin y son muy tiles para organizar la informacin y no congestionar la pgina ni
al usuario.
Al insertarla vers que se inserta algo parecido a esto:

Seleccionando el control haciendo clic en la cabecera azul vers lo siguiente en el

panel Propiedades:

Desde aqu podrs aadir tantas fichas como desees y ordenarlas utilizando los
botones

Luego selecciona el Panel predeterminado que es el que se mostrar por delante

cuando se visualice la pgina en el explorador, antes de que el usuario haya pulsado
alguna de las fichas.

Para modificar los ttulos de ficha simplemente cambia el nombre desde la vista
de Diseo.
Puedes modificar su contenido normalmente incluyendo todo tipo de tablas,
imgenes o elementos que hayamos visto hasta ahora. Para pasar del contenido de una
ficha a otra slo coloca el ratn sobre ella y haz clic sobre el icono con forma de ojo que
aparecer:

Luego modifica el contenido del panel abierto.

Recuerda que el panel que se visualizar primero en la pgina es el que elijas

como predeterminado en el panel Propiedades.
Pg. 27.3

27.4. Control Acorden

Otro control avanzado que utiliza las ventajas de AJAX y que Spry nos permite utilizar
es el Acorden:
Seccin 1
Coloca el contenido que prefieras en estos contenedores.
Puedes pasar de un contenedor a otro haciendo clic sobre su nombre.
Seccin 2
Seccin 3
Seccin 4

Para utilizarlo haz clic en Insertar Spry Acorden de Spry. Se crear

automticamente un elemento en tu pgina parecido a esto:

Este control es tan sencillo de configurar que en el panel Propiedades slo encontrars
lo siguiente:

Aade y organiza las secciones utilizando los botones

. Y luego

simplemente edita el contenido de cada una de ellas y su nombre en la cabecera.

Del mismo modo que con las pestaas para ver el contenido de una seccin coloca el
ratn sobre su cabecera y haz clic sobre el icono con forma de ojo que aparecer:

Pg. 27.4

27.5. Panel con Contraccin

Para terminar con los controles avanzados veremos el panel que puede contraerse de
Spry. Puedes ver un ejemplo aqu:
Mi panel (haz clic)

Este es un panel que se puede contraer.

De esta forma podrs esconder el contenido con un slo clic.
Prubalo pulsando sobre la cabecera.

Vers que realmente, funciona como un acorden con una sola ficha.
Para insertar un panel de este tipo slo tienes que hacer clic en Insertar Spry
Panel que puede contraerse de Spry.
En el panel Propiedades podrs ver sus opciones de configuracin:

Desactivando la opcin Activar animacin eliminars la animacin que se produce al

contraer el panel. Esta opcin slo afecta al comportamiento de apertura o cierre y no
tiene mucha ms trascendencia, as que simplemente depender de tu gusto y lo que se
adapte mejor al diseo de tu pgina web.
Puedes decidir si el panel se muestra inicialmente abierto o cerrado en la pgina
seleccionando el estado en el desplegable Estado predeterminado. Del mismo modo, si
mientras trabajas en vista de Diseo te molesta que est abierto puedes cerrarlo
haciendo clic en el desplegable Mostrar y seleccionando Cerrado.
Esto ltimo tambin puedes hacerlo pulsando sobre el icono del ojo que aparecer en la
cabecera del panel si sitas el ratn sobre ella:

Para modificar este panel simplemente edita su contenido como en el resto de controles
que hemos visto, Nada ms fcil.

27.6. Cambiar Estilos CSS

Al principio de la unidad dijimos que era posible modificar el aspecto de los controles
Spry.
Esto es muy sencillo de conseguir. Cada vez que insertamos un control de este tipo se
crean dos nuevos archivos en la carpeta llamada SpryAssets en nuestro sitio. Uno de
ellos es un archivo JavaScript que contiene el cdigo necesario para el buen

funcionamiento del control, nunca modifiques este cdigo, salvo que realmente
entiendas qu ests haciendo.
El otro, un archivo CSS, es el que contiene las reglas de estilo que se aplican sobre
el control. Encontrars una hoja de estilo por cada control.

Para modificar el estilo de alguno de tus controles slo tendrs que modificar dicho
archivo CSS para adaptarlo a tus necesidades. Para ello puedes emplear el panel Estilos
CSS, el Inspector de propiedades CSS, etc...
Si ves el cdigo fuente del Spry, o la barra de estado, vers que normalmente estn
formados por etiquetas div, que tienen asociada una clase ya existiese. No tendrs ms
que personalizar esa clase.

Recuerda que si necesitas ayuda con los estilos en cascada puedes visitar de nuevo el
tema de Estilos CSS Avanzados.

Ejercicio propuesto de la Unidad 27

Prueba evaluativa de la Unidad 27

Pg. 27.5