Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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.
Cualquier
editor
de texto permite crear pginas web. Para ello slo es necesario crear los documentos con
la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML
deseado. Puede utilizarse incluso el Bloc de notas 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.
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.
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:
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.
Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina
anterior como puede hacerse. Abre un documento nuevo y 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 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.
10
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:
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.
11
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.
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.
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:
12
Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber
seguido todos los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has
hecho todo bien.
13
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.
14
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.
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.
15
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.
16
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.
17
18
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
Un comando que puede resultarnos til es la tecla F4. Al pulsarla, todos los paneles se
ocultan. Para mostrarlos, la volvemos a pulsar.
19
Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros
lugares (zonas de colocacin), que aparecern resaltados en azul (imagen anterior). Esto
nos permite intercambiar paneles entre grupos acoplados o dejarlos como flotantes si los
sacamos fuera.
Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra de
herramientas.
20
21
Pero como ves en la imagen anterior, podemos hacer que todos los iconos se muestren
de color. Para ello no tenemos ms que elegir la opcin Iconos de colores del men Ver.
Espacios de trabajo
Si adaptamos a nuestro grupo el entorno y cerramos el programa, al volver a iniciarlo se
mantendr nuestra configuracin. Pero a la larga iremos haciendo cambios, abriendo
paneles que necesitemos puntualmente, cerrando otros por accidente, etc. Por eso es
muy til guardar nuestra configuracin y poder restaurarla cuando queremos.
22
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la
barra de documento:
23
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.
24
25
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.
2.5. La ayuda
26
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.
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.
27
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
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.
28
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 o Nuevo sitio...
29
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.
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.
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
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.
31
32
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.
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.
33
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.
34
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!
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.
35
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:
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.
36
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.
37
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 de sustitucin: es el color del texto del vnculo cuando situamos el ratn
encima del vnculo.
38
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:
39
En esta nueva ventana lo primero que hay que hacer es seleccionar una Categora. En
este caso nos interesa la de Barra de estado.
En ella habr que establecer una Velocidad de conexin.
La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que se
conectaban lo mdems telefnicos. Actualmente, las conexiones de ADSL y cable llegan a
cifras mucho mayores, de varios MB/s. No obstante, ha que establecer el valor al de la
conexin media de la regin de los usuarios a los que va destinada la web.
Una vez establecida una velocidad de conexin, y aceptados los cambios,
Dreamweaver calcular el tamao y el tiempo de descarga de la pginas a partir de esa
velocidad de conexin.
Hay que tener en cuenta que el tamao de descarga de una pgina no solo se calcula a
partir del tamao de esa pgina en disco, sino que hay que considerar tambin el tamao
de las imgenes que aparecen en ella, y del resto de elementos.
40
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
41
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.
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
42
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 de Propiedades ya que de normal no suele utilizarse, debido
a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que
el usuario pensara que se trata de un vnculo. Adems, emplea etiquetas que estn
en desuso.
43
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.
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.
44
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.
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.
45
, mientras que la
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.
46
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.
47
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:
48
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.
49
50
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>.
51
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.
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.
53
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.
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.
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.
55
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.
56
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:
57
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.
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:
58
59
60
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.
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.
61
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
62
Seleccionar estas opciones no cambiar los enlaces existentes, sino que aplicar
esta configuracin a los vnculos que se creen a partir de ese momento.
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.
_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.
64
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 etiqueta a.
Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes
selectores:
a:link para los enlaces normales.
a:visited para los enlaces visitados.
a:active para los enlaces activos.
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.
65
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.
66
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.
67
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
68
69
De estos tres tipos de vnculos, el que ms nos interesa ahora es el de los Vnculos
rotos. En el panel se mostrarn todos los documentos que tienen un vnculo roto, y el
documento al que cada uno de esos vnculos hace referencia.
Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la
lista de archivos del panel. De este modo, dicho documento se abre. Entonces es posible
buscar dentro del documento el vnculo errneo y modificarlo a travs del Inspector de
propiedades.
La otra forma es pulsando sobre el vnculo roto, en lugar de sobre el nombre del
archivo. En este caso es posible modificar directamente el nombre del documento en el
panel, o buscarlo a travs del icono con forma de carpeta que aparecer a su derecha.
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.
70
Existen una serie de formatos de imagen ms recomendables que otros para ser
introducidos en una pgina web. Esta informacin puedes consultarla aqu
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.
71
Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se
encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen.
Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al
documento o a la carpeta raz del sitio.
Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos
sobre el documento.
72
. Y con lo
73
programa externo, como Photoshop o Paint. Puedes ver cmo cambiar el programa de
edicin aqu
74
Lo habitual es utilizar GIF o PNG para pequeos grficos, normalmente elementos del
diseo o imgenes simples, y JPG para fotografas, sean del tamao que sean.
Nos limitaremos al uso de estos formatos. Ya que aunque algunos navegadores
soportan otros, no lo hacen todos. Y hemos de asegurarnos de que cualquier visitante de
nuestra pgina pueda ver las imgenes.
Si introduces una imagen no soportada en Dreamweaver, te aparecer un cuadrado gris
en su lugar.
Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa
de tratamiento de imgenes, como pueden ser Fireworks, Photoshop, Corel Draw, o
incluso desde el propio Dreamweaver, como veremos en el siguiente avanzado.
Dependiendo del programa utilizado existir una mayor o menor cantidad de opciones a
la hora de modificar las imgenes. Para realizar modificaciones sencillas, como la de
recortar las imgenes y cambiar los colores, puedes utilizar incluso el programa Paint de
Windows.
. Y con lo
Los mapas de imagen son partes de una imagen que pueden ser utilizadas para
asignarle algn tipo de comportamiento.
Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la
que se desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.
. Si no te
Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo
sobre la imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre
los lugares donde se desea que comience y finalice el mapa, as como sobre el resto de
lugares (en orden) que se desea que recorra el mapa en el caso de forma libre.
Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un
vnculo y un texto alternativo a ese mapa como puedes ver a continuacin:
76
este modo, es posible mover los puntos del mapa, en el caso de que no hayan sido
creados en los sitios deseados, para ajustarlos mejor a la imagen.
Aqu tienes un ejemplo de mapa de imagen. Sita el puntero sobre la cabeza del perro,
y vers que es la nica parte de la imagen que contiene un enlace.
programa externo, como Photoshop o Paint. Puedes ver cmo cambiar el programa de
edicin aqu
77
Sobre los botones de Aceptar y Cancelar, encontramos herramientas que nos permiten
desplazarnos por la imagen o el zoom. Tambin encontramos las opciones de
visualizacin. Una muy til es la que nos permite ver varias vistas de la imagen, pulsando
el icono
A cada vista podemos asignarle un formato de archivo distinto para comparar las
diferencias. No tenemos ms que hacer clic en la vista, y seleccionar el formato que
78
79
Hay que tener en cuenta que lo que podemos elegir es un color (varios) de la imagen
que ser transparente, haciendo que cada pxel de ese color sea transparente. Por lo que
se color slo debe de aparecer en las zonas que queramos cambiar. Adems el fondo
tiene que estar claramente delimitado.
Los formatos que nos permitirn crear la transparencia sern PNG 8 y GIF. Si la imagen
original era JPG, el resultado no ser bueno aunque lo cambiemos de formato, y que JPG
altera los tonos continuos.
Todo esto lo haremos desde la ventana Presentacin preliminar de la imagen a la
que accedemos pulsando el botn
que
. Para hacer un color transparente, basta con hacer clic sobre el color (en
80
Lo primero que tenemos que hacer, es elegir un programa como predeterminado para
cada formato de imagen. Para ello, accedemos al men Edicin Preferencias.... En la
ventana de Preferencias, seleccionamos la categora Tipos de archivo/editores.
81
Por tanto, vamos seleccionando las extensiones que emplearemos (PNG, JPG y GIF).
Para cada una, aadimos editores pulsando en el icono + sobre la lista de editores. Al
hacerlo, se abrir el dilogo del sistema operativo, en el que tenemos que elegir el
archivo ejecutable (acabado en .exe) de la aplicacin.
Podemos aadir los que queramos. La lista de editores asociados nos aparecer al
hacer clic derecho sobre la imagen, en el submen Editar con.
El editor que se abrir al pulsar en
Tamao original
82
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
83
Hemos creado el siguiente rollover. Sita el cursor sobre l para ver qu es lo que
ocurre.
84
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.
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
Crear el men
1. Desde el men Archivo, haz clic en Abrir y busca el archivo menu.htm que
encontrars en la carpeta ejercicios\menuCSS.
Observa que tenemos varios los distintos elementos del men como prrafos
distintos.
Lo habitual es crear los mens a partir de listas. Por tanto vamos a convertirlo.
2. Selecciona los prrafos, y pulsa el botn
3. Si te fijas en la barra de estado, vers una etiqueta <div>. Haz clic sobre ella.
Ahora le vamos a signar un ID, para distinguirlo del resto de elementos que podra
tener nuestra pgina.
4. En el desplegable ID de div, escribe menu.
Vamos ahora a crear las reglas CSS para los distintos elementos.
5. En el Inspector de propiedades CSS, haz clic en el botn Nueva regla.
86
8. En
Fondo
hemos
repetido
la
imagen
fondo.png
horizontalmente:
87
ID men, lo que evita que se aplique a otras listas que pudisemos tener en nuestra
pgina.
12. En
la
categora
Cuadro,
hemos
establecido
las
siguientes
propiedades:
Nota: Hemos puesto la propiedad Width (ancho) a un valor fijo, porque en nuestro
caso tenemos 5 elementos que crearemos con tamao concreto. Si aadimos o
quitamos elementos, habra que variar este tamao.
13. En Lista, hemos cambiado la propiedad list-style-type a none, para que no se
muestren las vietas junto a los elementos.
14. Hemos acabado con esta regla, pulsamos Aceptar.
15. Creamos una nueva regla para los elementos de la lista, empleando el selector
Compuesto #menu li.
16. Hemos cambiado las siguientes propiedades: En la categora Tipo, Line-height a
30px; en Bloque, Text-align a center; y en Cuadro, les hemos asignado un tamao
fijo (el de la imagen) como puedes ver en el siguiente grfico:
88
18. Creamos una nueva regla para los enlaces del men, empleando el selector
Compuesto #menu a.
19. En la categora Tipo, ajustamos las propiedades Color a #CCC y Text-decoration a
none.
20. En la categora Fondo es donde estableceremos las imgenes de fondo de los
elementos
del
men:
21. Para acabar con esta regla, en Bloque establecemos la propiedad Display a block.
Si lo pruebas, vers que se muestran los elementos en una lnea y con la imagen de
fondo. Ahora crearemos las reglas para que cambien segn el estado del enlace.
22. Creamos una nueva regla para los enlaces del men cuando tienen le cursor
encima, empleando el selector Compuesto #menu a:hover.
23. En Tipo, cambiamos el Color del texto a #FFF, y en Fondo cambiamos la imagen
de fondo (background-image) a blackmenu_hover.png.
24. Hemos acabado con esta regla, pulsamos Aceptar.
25. Creamos una nueva regla para los enlaces del men cuando son pulsados,
empleando el selector Compuesto #menu a:active.
26. En Tipo, cambiamos el Color del texto a #FFF, y en Fondo cambiamos la imagen
de fondo (background-image) a blackmenu_active.png.
27. Hemos
acabado
con
esta
regla,
pulsamos
Aceptar.
89
la
imagen
de
fondo
(background-image)
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
que el archivo est sincronizado, es decir, la imagen est generada a partir del ltimo
archivo de Photoshop.
90
del Inspector de
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.
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
91
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.
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.
92
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.
93
imagen y texto
Texto dentro de una celda
C
O
L
U
M
N
A
CELDA
FILA
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.
94
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.
95
96
97
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.
98
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.
99
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.
Para practicar puedes realizar el Ejercicio paso a paso Ajustar el tamao de la tabla.
100
Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando
varias, desplegar el men contextual de la tabla al pulsar con el botn derecho sobre
ella, o bien abrir el men Modificar. En ambos casos aparece la opcin Tabla.
Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar
mientras que otras no.
Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila
o Insertar columna.
La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la
columna se inserta a su izquierda.
101
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.
102
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.
del
103
del inspector de
Para practicar esto, puedes realizar el Ejercicio paso a paso Combinar celdas.
104
105
106
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.
107
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
108
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.
109
110
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.
111
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
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.
112
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.
113
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.
114
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.
115
Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens
desplegables, y botones.
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.
116
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 pulsar sobre la casilla.
Con etiqueta. Podemos pulsar en el texto.
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.
117
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.
118
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.
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.
119
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.
Entonces se mostrar una ventana como la siguiente, donde aparecen todos los
elementos del formulario.
120
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.
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.
121
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 a travs del men Insertar
Media, opcin SWF, o pulsando Ctrl + Alt + F.
Tambin pueden insertarse empleando el panel Insertar en la categora Comn,
pulsando sobre la opcin
Como en otros elementos, como las imgenes, podemos asignarle el ancho (An.) y alto
(Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.
122
123
124
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....
125
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.
126
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 a 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 Plug-in
precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para
127
Para practicar puedes realizar el Ejercicio paso a paso Insertar un archivo de audio.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin
Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
Se abrir el documento en Dreamweaver.
5. Si no aparece el inspector de propiedades, brelo a travs del men Ventana,
opcin Propiedades.
6. Sita el cursor en la lnea en blanco que queda entre la imagen el men.
7. Haz clic sobre el men Insertar.
8. Elige la opcin Meda.
9. Elige la opcin Plug-in.
10. Selecciona el archivo audio.mid, que se encuentra dentro de la carpeta media del
sitio.
128
13. En Al escribe 0.
14. Haz clic sobre el botn Parmetros que encontrars en el Inspector de
propiedades.
15. En parmetro intrduce loop, y en valor true. Pulsa Aceptar.
16. Haz clic sobre el botn Guardar
de la barra de herramientas.
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 y otras zonas que sern fijas, que no podrn ser modificadas.
No es posible modificar las propiedades de una pgina que est basada en una
plantilla, a excepcin del ttulo. Cuando se desea que existan pginas con, por ejemplo,
diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y
basar las pginas en una u otra plantilla, segn el color de fondo que se desee para cada
una.
129
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.
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.
plantillas.
Los botones inferiores del panel Activos
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).
130
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.
131
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.
132
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
editable FormularioCorreoElectronico podra ser modificado.
133
134
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.
135
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.
136
Para practicar los distintos aspectos explicados en el tema puedes realizar el Ejercicio
paso a paso Crear una plantilla.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Sitio, brelo a travs del men Ventana, opcin Sitio.
3. Selecciona el sitio Cocina en el panel Sitio.
4. Haz doble clic sobre el documento paraplantilla.htm, que aparece en el panel Sitio.
5. Se abrir el documento en Dreamweaver.
6. Haz clic sobre la opcin Guardar como plantilla, del men Archivo. Se abrir una
nueva ventana.
7. En Sitio: selecciona Cocina.
8. En Guardar como: escribe plantillacocina.
9. Haz clic sobre el botn Guardar. El documento abierto en Dreamweaver pasar a
ser la plantilla.
10. Selecciona el texto Ttulo haciendo doble clic sobre l.
11. Haz clic sobre el men Insertar.
12. Elige la opcin Objetos de plantilla.
13. Elige la opcin Regin editable.
14. En Nombre: escribe Ttulo.
15. Haz clic sobre el botn Aceptar.
16. Sita el punto de insercin a la derecha de la regin editable recin creada y pulsa
Intro.
17. Haz clic sobre el men Insertar.
18. Elige la opcin Objetos de plantilla.
19. Elige la opcin Regin editable.
20. En Nombre: escribe Regin Documento .
21. Haz clic sobre el botn Aceptar.
22. Haz clic sobre el botn Guardar
de la barra de herramientas. Ya tenemos
nuestra plantilla creada. Observa que no se ven ni las imgenes ni el estilo, ya que la
plantilla ha cambiado de carpeta. Se ver correctamente siempre que las pginas
138
que
creemos
estn
en
la
carpeta
raz.
de la barra de herramientas.
139
46. Visualiza en tu navegador las pginas Pag1.htm y Pag2.htm. Observa que sin
cambiar nada de las pginas ahora tienen los enlaces que permiten navegar entre
ellas.
Puedes ver el resultado aqu.
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
140
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 />.
141
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
á
á
Á
Á
é
é
É
É
í
í
Í
Í
ó
ó
Ó
Ó
ú
ú
Ú
Ú
ü
ü
Ü
Ü
&ntide;
ñ
Ñ
Ñ
¿
¿
α
α
&iexc;
¡
β
β
–
–
©
©
142
→
→
®
®
←
←
€
€
<
<
<
espacio
 
>
>
>
&
&
&
Si quieres ver una tabla con el listado de todos los caracteres especiales visita el
avanzado de Listado de Entidades HTML
143
Smbolos
Carcter
Entidad numrica
•
•
…
…
′
′
″
″
‾
‾
⁄
⁄
€
€
℘
℘
ℑ
ℑ
ℜ
ℜ
™
™
ℵ
ℵ
←
←
↑
↑
144
→
→
↓
↓
↔
↔
↵
↵
⇐
⇐
⇑
⇑
⇒
⇒
⇓
⇓
⇔
⇔
∀
∀
∂
∂
∃
∃
∅
∅
∇
∇
145
∈
∈
∉
∉
∋
∋
Carcter
Entidad numrica
∏
∏
∑
∑
−
−
∗
∗
√
√
∝
∝
∞
∞
∠
∠
∧
∧
∨
∨
Otros Smbolos
146
∩
∩
∪
∪
∫
∫
∴
∴
∼
∼
≅
≅
≈
≈
≠
≠
≡
≡
≤
≤
≥
≥
⊂
⊂
⊃
⊃
⊄
⊄
⊆
⊆
147
⊇
⊇
⊕
⊕
⊗
⊗
⊥
⊥
⋅
⋅
⌈
⌈
⌉
⌉
⌊
⌊
⌋
⌋
⟨
〈
⟩
〉
◊
◊
♠
♠
♣
♣
♥
♥
148
♦
♦
Carcter
Entidad numrica
espacio
 
¡
¡
¢
¢
£
£
¤
¤
¥
¥
¦
¦
§
§
¨
¨
©
©
ª
ª
«
«
Caracteres Tipogrficos
149
¬
¬
­
­
®
®
¯
¯
°
°
±
±
²
²
³
³
´
´
µ
µ
¶
¶
·
·
¸
¸
¹
¹
º
º
150
»
»
¼
¼
½
½
¾
¾
¿
¿
Smbolos
Caracteres Tipogrficos
Entidad numrica
À
À
Á
Á
Â
Â
Ã
Ã
Ä
Ä
Å
Å
151
Æ
Æ
Ç
Ç
È
È
É
É
Ê
Ê
Ë
Ë
Ì
Ì
Í
Í
Î
Î
Ï
Ï
Ð
Ð
Ñ
Ñ
Ò
Ò
Ó
Ó
Ô
Ô
152
Õ
Õ
Ö
Ö
×
×
Ø
Ø
Ù
Ù
Ú
Ú
Û
Û
Ü
Ü
Ý
Ý
Þ
Þ
ß
ß
Entidad numrica
à
à
á
á
153
â
â
ã
ã
ä
ä
å
å
æ
æ
ç
ç
è
è
é
é
ê
ê
ë
ë
ì
ì
í
í
î
î
ï
ï
ð
ð
154
ñ
ñ
ò
ò
ó
ó
ô
ô
õ
õ
ö
ö
÷
÷
ø
ø
ù
ù
ú
ú
û
û
ü
ü
ý
ý
þ
þ
ÿ
ÿ
155
Alfabeto Griego
Carcter
Entidad numrica
ƒ
ƒ
Α
Α
Β
Β
Γ
Γ
Δ
Δ
Ε
Ε
Ζ
Ζ
Η
Η
Θ
Θ
Ι
Ι
Κ
Κ
Λ
Λ
Μ
Μ
Ν
Ν
156
Ξ
Ξ
Ο
Ο
Π
Π
Ρ
Ρ
Σ
Σ
Τ
Τ
Υ
Υ
Φ
Φ
Χ
Χ
Ψ
Ψ
Ω
Ω
α
α
β
β
γ
γ
δ
δ
157
ε
ε
ζ
ζ
η
η
θ
θ
ι
ι
κ
κ
λ
λ
μ
μ
ν
ν
ξ
ξ
ο
ο
π
π
ρ
ρ
ς
ς
σ
σ
158
τ
τ
υ
υ
φ
φ
χ
χ
ψ
ψ
ω
ω
ϑ
ϑ
ϒ
ϒ
ϖ
ϖ
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.
159
160
161
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.
162
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 >
163
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 +
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
Una pega que encontramos es que esto no se guarda, y la prxima vez que abramos el
documento aparecer todo el cdigo expandido.
164
Si volvemos al cdigo podremos encontrar el error fcilmente. Para que los errores se
resalten, debe de estar pulsado el icono
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:
165
Donde podrs indicar que navegadores y a partir de qu versin quieres que se tengan
en cuenta cuando Dreamweaver realiza la comprobacin de compatibilidad.
166
167
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
Desde dicha ventana podemos reemplazar en los documentos encontrados, uno por uno,
con el botn Reemplazar, o bien reemplazar directamente en todos los documento
encontrados, pulsando sobre el botn Reemp. todos.
En el panel, cuando se haya reemplazado en algn documento, ste volver a aparecer
en la lista junto con un crculo verde, que indica que ya ha sufrido reemplazo.
168
Existen mtodos de bsqueda mucho ms precisos que los que hemos visto, si quieres
conocerlos visita el avanzado de Expresiones Regulares
Utilizaremos las Expresiones Regulares para decidir cules sern el resto de los
caracteres.
Para utilizar estos smbolos especiales tendremos que marcar la casilla Utilizar
expresin regular en el cuadro de dilogo de Buscar y Remplazar:
169
Smbolo Significado
^
Utiliza este smbolo para buscar cadenas al principio de un documento.
Esta expresin regular no es muy til, pues normalmente los documentos HTML empiezan
con la especificacin de las cabeceras lo que, normalmente, no pertenece a nuestro
objetivo de bsqueda.
Utilizando este smbolo podramos encontrar documentos buscando por
^<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
Esto nos dara como resultados los documentos que empiecen por <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML, por lo que los documentos que empiecen por <!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML no apareceran.
En este ejemplo se estn buscando archivos que sigan el formato XHTML, los
documentos despreciados seran aquellos que sigan HTML.
$
Utiliza este smbolo para buscar cadenas al final de un documento.
Igual que la anterior, esta expresin regular no nos ser de mucha ayuda cuando
utilicemos la herramienta Buscar y Reemplazar. Slo podremos buscar documentos que
terminen de determinada manera.
Por ejemplo, podemos buscar archivos que terminen con
</html>$
170
Esta bsqueda nos devolvera todos aquellos documentos que se han cerrado
correctamente, los que terminen, por ejemplo en </body> no se mostraran.
*
Ahora ya entramos con expresiones regulares mucho ms tiles.
El asterisco te ayudar a buscar un carcter que aparezca una vez, varias o ninguna.
Veamos un ejemplo, si hacemos la bsqueda por
a*u
Los resultados que podemos encontrar seran aula, aaula, aaaaula o incluso uno o cuello,
porque el asterisco implica que el carcter no tiene porque aparecer.
+
Casi ocurre lo mismo con esta expresin regular.
El signo + buscar coincidencias de un carcter una vez o varas. En este caso se
despreciarn aquellas en las que no aparezca.
Por ejemplo, si buscamos
a+u
Los resultados podran ser aula, aaula o aaaula, pero no ni uno ni cuello porque este
smbolo obliga a que el carcter se encuentre al menos una vez.
?
Veamos ahora qu ocurre con el signo de interrogacin.
Este smbolo es el contrario del anterior, slo busca coincidencias una sola vez o ninguna,
de modo que buscando
au?la
Podemos encontrar aula, ala, aulaclic o alameda, pero nunca auula ni auuulaclic.
Es decir, este smbolo nos sirve para marcar caracteres opcionales.
171
.
El punto es un smbolo muy til. Podemos utilizarlo para sustituir cualquier carcter, por
ejemplo, en la bsqueda de
de.a
Podramos encontrar resultados como dela, desa, deia, dera, de9a... pero nunca dea
(aunque s deaa). En definitiva, este smbolo sustituye a un carcter ni ms ni menos.
uno|otro
El smbolo | se utiliza para representar la conjuncin lgica OR, es decir, uno u otro.
Podemos buscar
99|ade
Y encontraramos resultados tan variados como adecuado, cadena, 1099, 9900, etc...
Piensa que ahora podemos complicar mucho ms las bsquedas combinando todos los
smbolos vistos, con esta bsqueda:
de.?a|de?a
Encontraramos resultados como dela, desarmado, dea (que cumple ambas condiciones)
o da (que cumple la segunda).
{n}
Los smbolos de llave indican repeticin.
172
{n,m}
Este sera otro caso de smbolo de llave, pero en este caso introduciremos dos nmeros.
Estos nmeros indicarn la repeticin que puede tener el carcter al cual preceden. Por
ejemplo, la bsqueda:
m{2,4}
Encontrara coincidencias con cadenas que contuviesen al menos 2 m o hasta como
mximo 4.
Posibles resultados seran mm, mmm o mmmm. La cadena ummmm s que se
encontrara, mientras que en ummmmm slo encontrara las 4 primeras emes.
En esta expresin regular podemos obviar la segunda parte para conseguir algo como
esto:
m{2,}
El resultado ahora sera cualquier cadena que contenga al menos 2 m y sin mximo de
repeticin.
Las cadenas umm, ummmmmmm o ummmmmmmmmmm se encontraran sin
problemas.
173
Smbolo Significado
()
Los parntesis nos sern de gran ayuda cuando realicemos bsquedas con expresiones
regulares.
Con los parntesis podemos agrupar caracteres y aplicarles una regla de regularidad. Por
ejemplo:
(au)+la
Dara como resultados aula, auaula, auauaula, pero no la.
El uso de estos smbolos nos ayudar muchsimo cuando trabajemos con Expresiones
Regulares.
[abc]
Los corchetes se utilizarn para establecer rangos o conjuntos de caracteres que sern
incluidos en la busqueda.
De este modo
imagen_[abc]
Encontrar resultados como imagen_a, imagen_b o imagen_c.
174
Tambin podemos establecer un rango para evitar tener que introducir todos los
componentes del conjunto:
imagen_[c-f]
Que mostrar los resultados que contengan imagen_c, imagen_d, imagen_e o
imagen_f.
vez
podramos
encontrar
imagen_casa,
imagen_07a,
imagen_ladrn
imagen_f5gh. Pero no imagen_A porque esta vez las maysculas no se han incluido.
[^abc]
Utiliza este smbolo eliminar caracteres de las bsquedas.
Por ejemplo:
imagen_[^0-9]
Slo encontrar cadenas que empiecen por imagen_ y el siguiente carcter no sea
numrico. Como por ejemplo, imagen_casa, imagen_ladrn o imagen_sie7e.
175
\
Este es un smbolo muy especial, pues te permitir buscar caracteres reservados como
pueden ser +, ^, * o $ sin que se confundan como expresiones regulares.
Imagina que queremos buscar en concreto la cadena imagen_123* y la cadena
imagen_456*, cmo lo hacemos? Fcil, escribiendo:
imagen_(123|456)\*
Como puedes ver, buscar cualquier cadena que contenga imagen_123 o imagen_456
seguida de un asterisco.
Si no hubisemos aadido la barra de escape (imagen_(123|456)*) significara que lo que
se encuentra entre parntesis podra repetirse varas veces o incluso ni aparecer.
Ahora veremos smbolos que nos ayudarn a reproducir estados especiales, como
espacios, principios de palabra, tabulaciones, etc...
\b
Este smbolo representa un lmite en una cadena de texto ya bien sea creado por un
espacio o un retorno de carro.
Esto no sayudar a encontrar principios y finales de palabras.
Con la bsqueda:
\bs
Encontraramos salida pero no cosa porque en este caso la s no se encuentra al principio
de la palabra.
176
s\b
Encontrara camas pero no salida.
\B
Este smbolo indica que el carcter se encuentra dentro de una cadena de texto y no
en los lmites.
Podramos decir que esta expresin es contraria a la anterior.
Con la bsqueda:
\Bc
Encontraramos ocaso pero no cama.
\d
Este smbolo sustituye a cualquier carcter numrico, es equivalente a la expresin [09].
La bsqueda:
sie\de
Encontrara sie7e pero no siete.
\D
Al contrario que el anterior, esta expresin equivale a un carcter no numrico, es
equivalente a la expresin [^0-9].
La bsqueda:
sie\De
Encontrara siete pero no sie7e.
\w
177
\W
Al contrario que el anterior, esta expresin equivale a cualquier carcter que no sea
alfanumrico ni el subrayado, es equivalente a la expresin [^a-zA-Z0-9_].
\s
Este smbolo representa un espacio en blanco.
\r
Este smbolo representa un retorno de carro.
\t
Este smbolo representa un salto de tabulador.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin
Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
178
4. Haz doble clic sobre el documento buscar.htm, que aparece en el panel Archivos.
Se abrir el documento en Dreamweaver.
5. Haz clic sobre el men Edicin.
6. Elige la opcin Buscar y reemplazar. Se abrir una nueva ventana.
7. En Buscar en: selecciona Documento actual.
8. En Buscar selecciona Texto y escribe Recetas.
9. En Reemplazar con: escribe aulaClic.
10. Haz clic sobre el botn Reemp. todos. Aparecer un aviso indicando que se han
encontrado y sustituido 10 elementos.
11. Pulsa sobre alguna parte de la pgina para que se aplique el ltimo cambio.
12. Haz clic sobre el botn Guardar
de la barra de herramientas.
Si quieres ver otros mtodos de bsqueda relacionados con las etiquetas del cdigo
visita el avanzado de Bsqueda en Etiquetas
179
Como puedes ver en la imagen, este cuadro de bsqueda es muy similar al que
estamos acostumbrados a utilizar, slo que tiene un espacio entre los campos Buscar y
Reemplazar que nos darn la oportunidad de trabajar con etiquetas.
Selecciona en el segundo desplegable la etiqueta en la que quieres que se encuentre tu
texto (o no, segn hayas seleccionado en el primero).
Ahora estars listo para realizar bsquedas en etiquetas especficas.
opciones:
Puedes incluir ms opciones sobre el tipo de atributos que tenga (e incluso en los
desplegables de la derecha incluir un valor para el atributo) o seguir buscando por otras
opciones.
Vers que en seguida te hars con el mtodo de bsqueda.
Lo que tenemos que destacar es que esta forma te ayudar a modificar el texto que se
encuentre dentro de una etiqueta.
Pero qu pasa si lo que queremos es buscar o modificar una etiqueta especifica con
unas circunstancias igual de especficas?
Muy sencillo, en el desplegable Buscar: seleccionaremos Etiqueta especfica.
180
181
Como puedes ver, puedes escoger entre varias acciones a aplicar, entre reemplazar la
etiqueta con otra o cambiar alguno de sus atributos como aadir algo antes o despus de
sta.
Por ejemplo, si quisisemos quitar todos los enlaces de una pgina podramos
utilizar la opcin Etiqueta especfica para ello, bastar con que indiques las opciones que
puedes ver en la siguiente imagen:
182
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.
183
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.
184
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.
185
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).
186
Visualizar el cdigo fuente resulta til para ver cmo se ha estructurado la pgina, el
uso de los comportamientos (que aparecen programados en cdigo JavaScript), y otra
serie de rutinas JavaScript.
Por ejemplo, pulsa aqu para abrir una pgina en la que aparece un efecto en la barra
de estado del navegador, que muestra una marquesina, cuyo texto es 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
var
var
var
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;">
187
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">
<!--
y
//--> </script> ... </head>
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
188
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
tambin la capa.
Las capas, combinadas con JavaScript pueden dotar a una pgina de verdadero
dinamismo.
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.
189
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
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 opcin Elementos 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.
190
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:
191
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. 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
192
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.
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.
193
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 a travs del men Ventana, opcin
Comportamientos. Tambin pulsando Mays+F4.
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.
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
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.
195
Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se
debe de realizar la accin.
196
. En este
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.
197
onMouseOver (cuando el ratn est sobre), mientras que el otro la ocultar para el
evento onMouseOut (cuando el ratn est fuera).
Entonces aparece una nueva ventana en la que hay que introducir la lnea JavaScript.
Pulsando dos veces sobre la accin vuelve a abrirse la ventana anterior, y es posible
modificar la lnea de cdigo.
198
Segn nuestras necesidades elegiremos un evento u otro. Puedes ver una descripcin
de cada evento en este avanzado:
Evento
Se produce cuando...
onBlur
onClick
onDblClick
onFocus
onKeyDown
onKeyPress
onKeyUp
onLoad
onMouseMove
199
onMouseOut
onMouseOver
onMouseUp
onDragDrop
onError
onChange
onMove
Se mueve el elemento
onReset
onResize
onSelect
onSubmit
Se va a enviar el formulario
onUnload
200
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin
Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
5. Se abrir el documento en Dreamweaver.
6. Si no aparece el inspector de propiedades, brelo a travs del men Ventana,
opcin Propiedades.
7. Si no aparece el panel Comportamientos, brelo a travs del men Ventana,
opcin Comportamientos.
8. Haz clic sobre la imagen de sustitucin de email para seleccionarla.
9. Haz clic sobre el botn
201
13. Haz clic sobre el botn Aceptar. En el panel Comportamientos aparecer el nuevo
comportamiento.
14. Haz clic sobre el comportamiento en el panel.
15. Haz clic sobre el botn
de la barra de herramientas.
Con esto hemos acabado el sitio cocina. Abre en tu navegador la pgina index.htm y
comprala con la que aparece si pulsas aqu.
202
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):
203
204
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
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
Ahora veamos cmo debemos actuar al establecer texto para los enlaces. En este caso
ser necesario que introduzcamos dos comportamientos.
205
206
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).
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.
207
para
desplegar la lista.
Selecciona la opcin Abrir ventana del navegador y vers el siguiente cuadro de
dilogo:
208
209
para
desplegar la lista.
En este caso seleccionamos el comportamiento Cambiar propiedad. Aparecer un
dilogo como el siguiente:
210
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.
Insertarlo es muy sencillo, slo tienes que hacer clic en Insertar, seleccionar la opcin
Formulario y en el desplegable elegir Men de salto.
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.
212
Cuando hayas acabado decide en qu ventana quieres abrir los enlaces en Abrir URL
en: y dale un nombre al men (para reconocerlo mejor ms tarde) en Nombre del men.
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.
213
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.
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
214
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>
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
215
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.
Ejercicio
A partir de ahora, en los ejercicios paso a paso iremos creando el sitio Librera. En la
carpeta ejercicios del curso, encontrars la carpeta librera con los archivos que
necesitars para crear el sitio. Cpiala a la carpeta mis_sitios en la que has ido creando
los sitios de ejemplo, y define el nuevo sitio Librera en Dreamweaver.
Si necesitas ayuda con las operaciones anteriores, consulta los ejercicios propuestos o
paso a paso de la unidad 3.
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Crea un nuevo archivo CSS desde Archivo Nuevo Pgina en blanco CSS.
4. Gurdalo
(CTRL
+
S)
y
llmalo
Ahora vamos a vincularla a la plantilla del sitio.
estilolibreria.css.
216
Este documento es la plantilla que emplearemos en las pginas del sitio Librera.
Vamos a echarle un vistazo para familiarizarnos con su estructura:
Al principio tenemos un div "cabecera". En el tenemos los elementos que mostraremos
en la parte superior de la pgina. Adems, ser donde incluyamos el logo.
A continuacin encontramos el div "menu". En l encontramos una lista con los
elementos que formarn el men de navegacin. Adems vers que hay una sublista, que
convertiremos en un men desplegable.
Lo siguiente que encontramos es el div "contenedor" donde agrupamos la estructura
central de la pgina. Esta estructura se divide en otras dos divisiones: div "anuncios"
donde tenemos la publicidad que mostrar nuestra web, y div "contenido", donde se
mostrar el contenido de las distintas pginas. Es aqu donde encontramos la regin
editable de la plantilla.
Para acabar, cerramos la pgina con el div "pie" en el que mostramos el pie de pgina.
217
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;}
218
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.
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>
219
A partir de ese momento se podra referenciar a ese cuadro de texto como contenedor
utilizando JavaScript.
220
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.
221
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.
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?
222
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
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.
223
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; }
224
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.
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:
fantasy,
serif,
sans-serif,
monospace...
cursive,
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")
226
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.
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; }
227
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;
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; }
228
texto
sus
tiene
una
separacin
de
pxeles
letras.
Este,sinembargo,tieneunaseparacinde-2pxeles.
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,
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
text-top
sub
super
middle
bottom
top
text-bottom
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:
229
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.
230
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.
aunque
est
escrito
en
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; }
#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; }
232
Ejercicio
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2 Abre el sitio libreria.
3 Abre el archivo estilolibreria.css.
4 Aade el siguiente estilo para que toda la pgina muestre una fuente de tipo Verdana
(en caso de que no estuviese instalada se buscaran por este orden las siguientes fuentes:
Arial, Helvetica y finalmente cualquiera que entre dentro de la categora sans-serif).
Tambin haremos que su tamao sea de 12 pxeles:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
5 Para el texto dentro del bloque con id menu aumentaremos el tamao de la fuente a
13 pxeles y haremos que las letras estn un poco ms separadas:
#menu {
font-size: 13px;
letter-spacing: 1px;
}
233
font-size: 9px;
}
8 Crea un estilo para una clase llamada precio que tenga un tamao de fuente de 16
pxeles, en negrita y de color rojo:
.precio {
font-size: 16px;
color: red;
font-weight: bold;
}
9 Finalmente haremos que el bloque con id pie tenga un tamao de fuente que sea el
70% del original.
#pie {
font-size: 70%;
}
234
11 Por ltimo, crearemos una lista para mostrar los detalles del libro. Dentro de ella,
distinguiremos dos elementos distintos: uno en negrita y maysculas para el ttulo, y otro
en cursiva para el autor.
ul.detallelibro .titulo {
font-weight: bold;
text-transform: uppercase;
ul.detallelibro .autor {
font-style: oblique;
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
235
wait
help
nresiz
e
neresize
eresiz
e
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).
disc 1
disc 2
disc 3
1. decimal 1
2. decimal 2
3. decimal 3
a. lower-alpha 1
236
b. lower-alpha 2
c.
lower-alpha 3
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.
237
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);
}
Ten en cuenta siempre el orden type, position e image. Si no quieres utilizar alguna de
ellas, simplemente omtela.
Ejercicio
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2 Abre el sitio libreria.
238
239
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
texto
240
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);
241
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;
}
gray
url(imagenes/quote.gif)
no-repeat
scroll
Ejercicio
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2 Abre el sitio libreria.
3 Abre el archivo estilolibreria.css.
4 Al estilo que le aplicamos al body en ejercicios anteriores le aadiremos una nueva
propiedad donde estableceremos un fondo de imagen que se repita en el eje horizontal
y se posicione en la parte inferior de la pgina:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
242
font-size: 12px;
background: url(imagenes/fondo.gif) repeat-x
bottom;
5 Aadiremos un nuevo estilo para que el bloque con id cabecera muestre una imagen
de fondo, que no se repita y adems estableceremos que el fondo sea de color blanco:
#cabecera {
background-image: url(imagenes/cabecera.jpg);
background-repeat: no-repeat;
background-color: white;
}
6 Finalmente modificaremos el estilo del bloque con id menu para aadirle un fondo de
imagen que se repita a lo largo del eje horizontal:
#menu {
font-size: 13px;
letter-spacing: 1px;
background: url(imagenes/fondo_menu.gif) repeat-x;
}
7 Queremos que el fondo de los elementos del submenu sean de otro color. Adems,
queremos completar el estilo ya definido para que cuando el cursor est encima del
enlace, cambie de color:
#menu li li {
background-color: #E35331;
#menu li ul a:hover {
text-decoration: none;
background-color: #C2FCF3;
.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;
244
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;
}
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:
245
.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.
.bloque_interior
padding-top: 20px;
padding-right: 5px;
padding-bottom: 5px;
Texto
padding-left: 10px;
margin: 5px;
}
246
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
.bloque2 {
padding: 10px
5px;
}
}
20px;
.bloque3 {
padding: 15px;
.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.
247
Una forma muy cmoda de ver qu mrgenes afectan a un elemento es usando la vista
Inspeccionar. Puedes verla en este avanzado
248
texto
texto
none
dotted
dashed
249
solid
double
groove
ridge
inset
outset
.borde {
border-color: blue;
texto
}
black;
250
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;
texto
Ejercicio
1 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
251
bottom;
margin-left: auto;
margin-right: auto;
}
text-align: right;
}
6 Al bloque con id menu le aplicaremos unas cuantas propiedades para que tenga una
separacin exterior en la parte inferior de 20 pxeles.
Tambin estableceremos el padding de todos los lados (la separacin de los bordes
con el contenido).
Y crearemos dos bordes, uno en la parte superior de color gris y de 1 pxel de ancho, el
otro de color rojo y con 5 pxeles de ancho.
252
#menu {
font-size: 13px;
letter-spacing: 1px;
background: url(imagenes/fondo_menu.gif) repeat-x;
text-align: left;
margin-bottom: 20px;
padding: 3px 0px 3px 0px;
border-top: 1px solid gray;
border-bottom: 5px solid #E35331;
}
8 Tambin estableceremos los paddings para los elementos del lista dentro del bloque
con id menu:
#menu li {
padding: 3px 12px 3px 12px;
}
253
padding-right: 5px;
padding-left: 5px;
text-align: center;
}
10 Separaremos los distintos anuncios con un margen inferior de 10 pxeles. Son los
div dentros del bloque #anuncios:
#anuncios div {
margin-bottom: 10px;
}
12 Ms tarde crearemos un bloque con id listado, vamos a configurarlo para que tenga
un margen superior de 30 pxeles y un padding inferior tambin de 30.
#listado {
margin-top: 30px;
padding-bottom: 30px;
}
13 La clase item dentro del bloque con id listado deber tenter un margen izquierdo
de 60 pxeles.
#listado .item {
margin-left: 60px;
}
254
text-align: center;
margin-bottom: 15px;
padding-top: 10px;
padding-bottom: 5px;
border-top: 5px solid #E35331;
}
17 Ahora vamos con los estilos que formarn el submen. A la sublista, le damos un
pequeo borde superior del mismo color de fondo, para que quede alineado con el color
rojo. Lo hacemos con borde para evitar un comportamiento errneo de IE.
#menu li ul {
border-top: #BDFCF2 2px solid;
255
#menu li ul a {
padding: 0 9px;
19. Damos mrgenes los id con la clase detalle que tendremos dentro de contenido:
#contenido .detalle {
margin-left: 60px;
margin-bottom: 30px;
}
20. Y aadimos algo de margen a los elementos de la lista que mostrar el detalle del
libro:
ul.detallelibro li {
margin: 5px;
}
256
Adems le hemos dado un tamao de fuente mayor para que se note mejor el efecto.
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:
257
258
Como ste!
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
259
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
260
No es la nica forma de conseguir este efecto. Podemos hacer las dos columnas
flotantes, emplear Divs PA, etc...
Teniendo esto siempre en mente vers que es ms sencillo trabajar y moldear las
pginas utilizando CSS.
261
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 {
262
display: block;
height: 100%;
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
24
23
22
4
8
10
11
12
21
20
13
25
19
14
18
17
16
4
7
24
23
22
15
8
10
11
12
21
20
13
25
19
14
18
17
16
4
7
24
23
22
15
8
10
11
12
21
20
13
25
19
18
17
14
16
15
263
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;
}
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.
1
24
23
22
4
8
10
11
12
21
20
13
25
19
14
18
17
16
4
7
24
23
22
15
8
10
11
12
21
20
13
25
19
18
17
14
16
15
264
24
23
22
4
8
10
11
12
21
20
13
25
19
18
17
14
16
15
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.
265
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.
266
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;
}
267
El valor relative tambin nos permite mover el elemento. ste, en principio, ocupa su
lugar en el flujo normal de la pgina y 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.
268
Por ejemplo:
#menu {
position: fixed;
top: 0px;
right: 0px;
}
269
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;
}
Finalmente nos encontramos con otra propiedad llamada overflow, que ya habamos
comentado.
270
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.
271
web
cualquiera.
Seguro
que
distingues
algunos elementos
claramente
272
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.
273
Puedes ver un ejemplo de una pgina muy simple maquetada de esta forma aqu.
274
Y recuerda si estamos trabajando con Divs PA, podemos establecer este atributo
directamente sobre el Inspector de propiedades.
275
276
277
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.
278
279
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;
280
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.
281
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;
}
282
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.
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".
283
284
285
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;
}
286
287
288
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.
289
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.
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:
Parte 2:
Parte 3:
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:
291
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.
292
+.
293
294
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.
295
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
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
Colocar pero cuando sube el archivo al servidor lo desprotege para que pueda ser
modificado por otras personas.
296
297
298
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.
299
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.
300
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.
Una base de datos es un conjunto de datos que estn organizados para un uso
determinado y el conjunto de los programas que permiten gestionar estos datos es lo que
se denomina Sistema Gestor de Bases de Datos.
Casi todos los sistemas de gestin de base de datos modernos almacenan y tratan la
informacin utilizando el modelo de gestin de bases de datos relacional.
En un sistema de base de datos relacional, los datos se organizan en Tablas.
Las tablas almacenan informacin sobre un tema como pueden ser los clientes de una
empresa, o los pedidos realizados por cada uno de ellos; las tablas se relacionan de forma
que a partir de los datos de la tabla de clientes podamos obtener informacin sobre los
pedidos de stos.
Tablas de datos.
Una tabla de datos es un objeto que se define y utiliza para almacenar los datos. Una
tabla contiene informacin sobre un tema o asunto particular, como pueden ser como
hemos visto antes, clientes, pedidos etc...
Las tablas contienen campos o columnas que almacenan los diferentes datos como
el cdigo del cliente, nombre del cliente, direccin,...
Y al conjunto de campos para un mismo objeto de la tabla se le denomina registro o
fila, as todos los campos de un cliente forman un registro, todos los datos de otro cliente
forman otro registro...
Si consideramos una posible base de datos con los datos de una empresa, una tabla de
CLIENTES podra ser:
Campos
Cdigo
Nombre
Apellidos
Direccin
C.P.
Registro 1
Luis
Grande Lilos
C/ Germanas, 23
46723
Registro 2
Marta
Fran Dardeno
C/ Mayor, 34
46625
302
Registro 3
Francisco
Juan Lpez
C/ Valle, 56
46625
Registro 4
Mara
Huesca Buevo
C/ Franciscano, 67
46521
Toda tabla debe tener un campo que sirva para identificar cada uno de sus registros,
ese campo es la clave principal. La clave principal proporciona un valor nico para cada
fila de la tabla y nos sirve de identificador de registros de forma que con esta clave
podamos saber sin ningn tipo de equivocacin el registro al cual identifica. No podemos
definir ms de una clave principal, pero podemos tener una clave principal compuesta por
ms de un campo.
Un campo definido como clave principal no podr aceptar valores duplicados (es decir
que no podrn existir dos filas con el mismo valor en ese campo), ni podr contener el
valor nulo.
El valor nulo es un valor especial que indica la ausencia de valor, si en un campo de
una fila tenemos el valor nulo (null en ingls) esto indica que esta fila no contiene ningn
valor en ese campo. Si un campo est definido como no nulo (NOT NULL) el usuario
estar obligado a rellenarlo cuando introduzca una nueva fila.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">
303
<head>
<title>Documento sin título</title>
</head>
<body>
<?php
echo "<p>¡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>¡Hola mundo!</p>";
?>
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:
305
Aqu nos dan la bienvenida as que simplemente haz clic en Next > para continuar.
306
307
308
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.
309
310
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.
311
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:
312
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.
Este icono
313
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.
314
Para volver de nuevo al estado cerrado podrs seleccionar la opcin Apagar (Put
Offline) que aparecer en vez de Encender.
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.
315
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.
+.
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:
316
317
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:
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).
Ejercicio
Para realizar este ejercicio, partimos de que has instalado WampServer y has definido
el alias sitios en el ejercicio anterior para acceder a los sitios de ejemplo.
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
318
319
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.
320
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.
321
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:
322
323
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 y 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:
324
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.
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si el servicio de MySQL no se est ejecutando, lnzalo para poder tener acceso a
las bases de datos.
3. Haz clic izquierdo sobre el icono de WAMP en el rea de notificacin y selecciona la
opcin phpMyAdmin.
4. Se abrir una ventana principal. En la lista del men de la izquierda selecciona la
base de datos bd_libreria.
325
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.
326
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 pestaa Estructura.
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.
327
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
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.
328
329
phpMyAdmin.
Aqu encontraremos un enlace a la seccin de Privilegios
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:
330
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:
331
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 lmite de recursos (conexiones, peticiones, etc...). 0
indica sin lmite.
Cuando ests listo pulsa Continuar.
Ahora 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:
332
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.
333
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.
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
334
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.
335
Para ello nos dirigimos a la pestaa Bases de datos en el panel Aplicacin y hacemos
clic sobre el botn
336
Para practicar la creacin de conexiones realiza el Ejercicio Paso a Paso Crear una
conexin a base de datos.
337
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l.
4. Abre la plantilla, ya que tenemos que tener algn documento abierto.
5. Abre el panel Bases de Datos con la combinacin de teclas Ctrl + Mayus + F10 o
desde el men Ventana Bases de datos.
6. Haz clic en el botn
conexin:
338
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
un
juego
de
registros
puedes
hacer
339
clic
en
el
botn
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.
340
Nota: Puedes crear tantos juegos de registro en una pgina como necesites.
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l.
4. Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo
Nuevo, pestaa Pgina de plantilla).
5. Gurdalo como nuevos.php.
6. Haz clic en el botn
registros.
341
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:
342
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.
343
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.
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
344
en
345
21. Selecciona la celda que contienen el Autor de la pgina. Crea un Nuevo estilo en
lnea poniendo el contenido en cursiva pulsando el botn
Propiedades CSS.
en el Inspector de
22. Abre el panel Comportamientos del servidor (Ctrl + F9) y haz doble clic sobre el
elemento Texto dinmico {listado_libros.Titulo} para modificar sus propiedades.
23. En el cuadro de dilogo que se abrir selecciona el valor May.-min. - Mays. del
desplegable Formato para mostrar todo el texto en maysculas.
Recuerda que este comando puede estar errneo en Dreamweaver. Si es tu caso,
emplea May.-min. - Mins..
24. Cambia a la Vista en vivo y vers como se muestra el primer registro. (Tambin
puedes visualizar los datos desde el localhost pulsando la tecla F12).
25. Cierra el documento guardando los cambios.
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
Insertar Datos.
Se abrir el siguiente cuadro de dilogo:
346
en la en el panel
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:
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:
347
De esta forma Dreamweaver colocar los registros en una tabla con las caractersticas
que hayamos indicado.
348
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.
349
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.
350
Objetivo
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l.
4. Si tienes abierto el archivo nuevos.php por ejercicios anteriores, cirralo para evitar
confusiones.
5. Copia el archivo nuevos.php haciendo clic derecho sobre l en el panel Archivos y
eligiendo Edicin Copiar.
6. Haz clic derecho sobre l en el panel Archivos y elige Edicin Pegar.
7. Repite el paso anterior. Vers las copias nuevos - Copia.php y nuevos Copia[2].php.
8. Selecciona una de las copias. Pulsa F2 para renombrarlo y llmalo usados.php.
9. Renombra la otra copia, llamndola ofertas.php.
10. Abre los tres archivos.
11. Cambia el ttulo de las tres pginas por Libros usados, Libros nuevos y Oferta de
libros segn corresponda.
12. En el archivo ofertas.php elimina el prrafo Listado de libros nuevos:.
13. En el archivo usados.php cambia la palabra nuevos por usados en la lnea
anterior.
14. En el archivo nuevos.php abre el panel Comportamientos del servidor (Ctrl +
F9) y haz doble clic sobre el elemento Juego de registros (listado_libros).
15. Se abrir un cuadro de dilogo, modifica el Nombre listado_libros por
libros_nuevos.
16. En Filtro selecciona el campo Usado.
17. En el desplegable de abajo, selecciona Valor introducido y escribe 0 en el cuadro
de
texto
de
su
derecha.
351
Debera
quedarte
algo
como
Filtro
Usado
Valor
introducido
0.
Hemos creado un filtro para que se muestren aquellos registros con valor 0 en su
campo Usado, sern aquellos que no estn usados.
18. Pulsa el botn Prueba para asegurarte y guarda los cambios haciendo clic en
Aceptar para salir.
19. Dreamweaver lanzar la herramienta Buscar y Reemplazar para asegurarte de que
ha cambiado el nombre del juego de registros en el cdigo de la pgina, puedes
pulsar el botn Buscar todos para asegurarte, pero bastar con que cierres el
cuadro de dilogo.
20. Cierra todos los documentos guardando los cambios.
NOTA: Hemos notado, que tanto en esta versin como en la anterior, al seguir estos
pasos Dreamweaver puede generar errneamente el cdigo. Si es tu caso, Dreamweaver
te avisar de que ha encontrado un error de sintaxis en el cdigo.
Busca en el cdigo fuente de tu pgina el fragmento que mostramos a continuacin de
color rojo, y brralo. Deberas de encontrarlo a partir de la lnea 34.
break;
}
return $theValue;
}
}
$maxRows_listado_nuevos = 7;
$pageNum_listado_nuevos = 0;
if (isset($_GET['pageNum_listado_nuevos'])) {
$pageNum_listado_nuevos = $_GET['pageNum_listado_nuevos'];
}
$startRow_listado_nuevos = $pageNum_listado_nuevos *
$maxRows_listado_nuevos;
mysql_select_db($database_conexion_libreria, $conexion_libreria);
$query_listado_nuevos = "SELECT * FROM libros";
$query_limit_listado_nuevos = sprintf("%s LIMIT %d, %d",
$query_listado_nuevos, $startRow_listado_nuevos,
$maxRows_listado_nuevos);
$listado_nuevos = mysql_query($query_limit_listado_nuevos,
$conexion_libreria) or die(mysql_error());
$row_listado_nuevos = mysql_fetch_assoc($listado_nuevos);
if (isset($_GET['totalRows_listado_nuevos'])) {
$totalRows_listado_nuevos = $_GET['totalRows_listado_nuevos'];
} else {
$all_listado_nuevos = mysql_query($query_listado_nuevos);
$totalRows_listado_nuevos = mysql_num_rows($all_listado_nuevos);
}
$totalPages_listado_nuevos = ceil($totalRows_listado_nuevos/
$maxRows_listado_nuevos = 7;
$pageNum_listado_nuevos = 0;
352
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 elegimos Mover a la siguiente pgina.
353
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.
Una opcin muy til que presenta Dreamweaver son los Recuentos de registros:
354
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).
355
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.
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l.
4. Abre el archivo nuevos.php.
5. En la tabla de abajo selecciona la celda del centro para colocar el punto de insercin
all.
6. Haz clic en la opcin Registro final del listado de opciones de recuento de registros
en el men Insertar Datos.
356
10. Deber
quedarte
algo
{libros_nuevos.TotalRecords}
como:
{libros_nuevos.LastRecord}
de
11. Prueba la pgina pulsando F12 y vers como ahora adems de los enlaces de
avance y retroceso se muestra tambin el nmero del ltimo registro junto al total.
12. Cierra el documento guardando los cambios.
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:
357
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:
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:
358
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.
359
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 valor valor.
Incluso si miras las pginas de la librera, puedes observar que al paginar se envan
como variables la pgina que se ha de mostrar.
360
Para practicar la creacin de enlaces con parmetros realiza el Ejercicio Paso a Paso
de Enlaces con Parmetros.
Ejercicios
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l.
4. Abre el archivo nuevos.php.
5. Selecciona el elemento {libros_nuevos.Titulo} en la primera celda de la primera
tabla.
6. En el panel Propiedades escribe en el campo Vnculo lo siguiente: comprar.php?
id=.
7. Ahora abre el panel Vinculaciones (Ctrl + F10) y ve a la vista de Cdigo.
361
8. Arrastra el elemento Id al lado del texto que hemos escrito despus del =. Deber
quedarte algo como esto:
<a href="comprar.php?id=<?php echo $row_libros_nuevos['Id']; ?>">
<?php echo strtoupper($row_libros_nuevos['Titulo']); ?></a>
362
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.
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
363
11. En la zona donde puedes incluir contenido aade un bloque div (Insertar
Objetos de diseo Etiqueta DIV), dale la clase detalle.
12. Coloca el cursor dentro del bloque y inserta la imagen imagenes/item1.gif, dale la
clase img_item.
13. Modifica el campo Origen de la imagen desde la vista Cdigo cambiando el 1 que
forma parte del nombre por el elemento Usado desde el panel Vinculaciones para
que
pueda
leerse:
imagenes/item<?php echo $row_detalle_libro['Usado']; ?>.gif
14. Crea una lista no ordenada (ul) con cinco elementos, y con la clase detallelibro. Al
primero dale la clase titulo y al segundo la clase autor.
15. Inserta el elemento Titulo arrastrndolo desde el panel Vinculaciones al primer
elemento.
16. Inserta el elemento Autor arrastrndolo desde el panel Vinculaciones al segundo
elemento.
17. Inserta el elemento Editorial arrastrndolo desde el panel Vinculaciones al tercer
elemento.
364
Como puedes ver, hemos incluido un bloque div donde hemos escrito el contenido del
registro del recordset.
Presta especial atencin a la imagen, en el campo Origen hemos colocado lo siguiente:
"imagenes/item<?php echo $row_detalle_libro['Usado']; ?>.gif"
Esto formar la ruta de una imagen que ser un archivo u otro dependiendo del valor en
el campo Usado del registro.
Debido a que este campo puede tomar los valores 0 1 las imgenes que se podran
cargar seran item0.gif o item1.gif.
21. Para comprobar que funciona correctamente debers pulsar la tecla F12 para copiar
el
archivo
al
servidor
de
pruebas.
Vers que el archivo no muestra casi nada porque no ha recibido ningn valor en el
parmetro Id.
22. Ahora visualiza en tu navegador la pgina nuevos.php
23. Haz clic en alguno de los ttulos, recuerda que en el ejercicio anterior enlazamos
cada ttulo con la pgina comprar.php pasando como parmetro el Id del libro.
Ahora se cargar el archivo comprar.php mostrando el detalle del libro que hemos
seleccionado (fjate en el parmetro de la URL). Y fjate tambin en la imagen del
libro, muestra siempre la imagen del libro nuevo.
24. Cierra el documento guardando los cambios.
Continuamos en la pgina siguiente.
365
366
19. Vuelve
a
la
vista
de
Diseo.
Ahora crearemos un juego de registros para esta pgina que se cree filtrndose por
el texto introducido en la caja del formulario.
20. Haz clic en el botn
21. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en
Nombre escribe busqueda.
22. En Conexin selecciona conexion_libreria.
23. En Tabla selecciona libros.
24. Modifica la opcin Filtro para que pueda leerse: Titulo = Parmetro URL buscar.
Hemos creado un filtro que tomar el valor del parmetro buscar en la URL y lo
comparar con el valor del campo Titulo.
Ahora insertaremos el total de registros entre las palabras devuelto y resultados.
25. Posiciona el cursor entre las palabras devuelto y resultados.
26. Haz clic en la opcin Total de registros, en Mostrar recuento de registros del
panel Insertar Datos.
27. La lnea quedar as:
<p>Su búsqueda de <?php $_GET['buscar']; ?> ha devuelto
<?php echo $totalRows_busqueda ?> resultados: </p>
Vamos a crear el listado que se corresponda con el recordset que acabamos de
crear.
28. An dentro del bloque que hemos creado, crea un bloque div con clase item
(Insertar Objetos de diseo Etiqueta DIV).
29. Dentro del bloque con clase item inserta la imagen imagenes/item1.gif.
30. A la imagen asgnale la clase img_item.
31. Desde la vista de cdigo, arrastra el campo Usado desde el panel Vinculaciones
sobre el atributo src de la imagen reemplazando el 1, para que quede:
"imagenes/item<?php echo $row_busqueda['Usado']; ?>.gif"
32. Crea una lista no ordenada (ul) con cinco elementos, y con la clase detallelibro. Al
primero dale la clase titulo y al segundo la clase autor.
33. Inserta el elemento Titulo arrastrndolo desde el panel Vinculaciones al primer
elemento.
34. Inserta el elemento Autor arrastrndolo desde el panel Vinculaciones al segundo
elemento.
35. Inserta el elemento Editorial arrastrndolo desde el panel Vinculaciones al tercer
elemento.
36. Escribe ISBN: e inserta el elemento ISBN arrastrndolo desde el panel
Vinculaciones en el siguiente elemento.
367
368
54. Para terminar en la celda central introduce un elemento Registro final seguido del
texto " de " y un elemento Total de Registros.
Te quedar algo as:
<?php echo min($startRow_busqueda + $maxRows_busqueda,
$totalRows_busqueda) ?> de <?php echo $totalRows_busqueda ?>
Ahora haremos que slo se muestre la informacin si se han encontrado registros
55. Selecciona todo el contenido que hemos aadido hasta ahora, sin incluir el
formulario.
56. Selecciona la opcin Mostrar si el juego de registros no est vaco del panel
Insertar Datos.
Para comprobar que funciona correctamente pulsa la tecla F12 para copiar el archivo al
servidor de pruebas.
Vers que el archivo slo muestra el formulario.
Introduce el ttulo de un libro y pulsa buscar.
De momento esta pgina slo muestra los resultados para las entradas exactas de
nombres de libros, ms adelante cambiaremos eso.
Finalmente vamos a aadir una caja de bsqueda a nuestra plantilla.
1. Abre la plantilla libreria.dwt.php y en la barra de men, edita el ltimo elemento de
la
lista
para
que
quede
as:
<li><a
href="../buscar.php">Buscar:</a>
<form
action="buscar.php"
method="get"><input
type="text"
id="buscar"
name="buscar"
/><input
type="submit"
value="buscar" /></form></li>
2. Hemos aadido un formulario que ejecutar el archivo buscar.php pasndole un
parmetro buscar con el valor que escribamos en la caja de texto.
3. Guarda la plantilla y aplcala sobre todos los archivos anteriores.
4. Guarda todos los cambios en los archivos abiertos.
5. Selecciona todos los archivos PHP en el panel Archivos y haz clic derecho sobre
cualquiera de ellos.
6. Selecciona la opcin Vista previa en el Navegador para que se copien al servidor
de pruebas.
7. Prueba cmo funciona el formulario del men.
8. Recuerda que de momento debers escribir un ttulo de un libro exacto.
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
369
registros filtre los resultados para mostrar slo aquellos que tengan un valor en el campo
Precio mayor al especificado en el parmetro precio_minimo.
ello
utilizamos
la
opcin
Juego
.
Al seleccionarla vers el siguiente cuadro de dilogo:
370
de
pginas
Maestro-Detalle
371
Luego podrs modificar su aspecto para que se ajusten al sitio que ests diseando.
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.
372
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.
373
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
374
375
clave
principal
el
valor
recibido
como
parmetro.
1. Luego
podremos
incluir
el
cdigo
para
borrar
el
registro.
en la barra de Datos, y
376
377
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 lista Elementos 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
378
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.
En el tema siguiente seguiremos practicando todos los conceptos vistos en este tema
completando el sitio de Blog.
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 este tema, introduciremos algunos conceptos
que quiz te resulten interesantes.
Un blog es una pgina web donde se introduce contenido peridicamente sobre un
tema en particular.
379
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 aspecto y funcionalidades finales estn en tus manos, puedes aadir tantas cosas
como quieras.
As que vamos a empezar...
380
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.
381
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:
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.
382
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si el servicio de MySQL no se est ejecutando, lnzalo para poder tener acceso a
las bases de datos.
383
el
Motor
de
almacenamiento
del
tipo
InnoDB.
20. De nuevo, repite los pasos para crear una tabla llamada Comentarios con 6
campos.
384
el
Motor
de
almacenamiento
del
tipo
InnoDB.
28. Por ltimo crearemos una tabla llamada Usuarios con 3 campos.
29. Al primero lo llamaremos Id, de tipo INT, con A_I y PRIMARY.
30. Al segundo lo llamaremos Usuario, de tipo VARCHAR y con longitud 20.
31. Al tercero lo llamaremos Password , de tipo VARCHAR y con longitud 20.
32. Emplearemos el Motor de almacenamiento del tipo InnoDB.
El ejercicio contina en la pgina siguiente...
Grabar.
38. En el marco de la izquierda haz clic sobre la tabla Entradas y una vez en su ventana
haz clic en Vista de Relaciones.
39. En Id_Categoria selecciona en el segundo desplegable bd_blog.categorias.Id.
40. En el siguiente desplegable selecciona CASCADE.
41. Para terminar, en el siguiente vuelve a seleccionar CASCADE.
385
42. Pulsa
Grabar.
43. Ahora vamos a rellenar las tablas, importaremos los datos de unos ficheros de texto.
Vuelve a la tabla Categorias seleccionndola en el men de la izquierda.
44. Haz clic en la opcin Importar que encontrars en el men horizontal en la parte
superior
de
la
ventana:
45. En la siguiente ventana pulsa el botn Examinar y busca el archivo categoriaslatin1.txt que se encuentra en la carpeta de ejercicios, dentro de la carpeta blog.
46. El archivo se encuentra codificado en latin1 as que seleccinalo en la lista de
Juego de caracteres del archivo.
47. Pulsa el botn Continuar.
48. Asegrate de que se han introducido datos en la tabla pulsando la opcin Examinar
de la tabla Categorias.
49. Repite los mismos pasos con el archivo entradas-latin1.txt para introducir datos en
la tabla Entradas.
50. Repite los mismos pasos con el archivo comentarios-latin1.txt para introducir datos
en la tabla Comentarios.
51. Repite los mismos pasos con el archivo usuarios-latin1.txt para introducir datos en
la
tabla
Usuarios.
52. Ahora crearemos un usuario y le asignaremos privilegios para que pueda modificar
los
datos
almacenados.
Haz clic sobre bd_blog en el marco de la izquierda y haz clic sobre
.
53. Haz clic en el vnculo Agregar un nuevo usuario.
54. En la nueva ventana escribe escritor en Nombre de usuario.
55. En Servidor escribe localhost.
56. En Contrasea escribe aulaclic.
57. En Debe volver a escribir escribe aulaclic de nuevo.
58. Pulsa el botn Continuar, al final de la pgina, para crear el usuario.
59. Estamos definiendo los privilegios para la base de datos bd_blog. Observa que
estn todos seleccionados. Deseleccinalos para que slo queden seleccionados
SELECT, INSERT, UPDATE y DELETE. Si te das cuenta estn todos en el marco
de
Datos.
Vamos a darle a este usuario nicamente permiso de escritura y lectura sobre la
base
de
datos.
386
Como puedes ver, incluimos el ttulo, texto y fecha de la entrada. Eso es muy sencillo
porque pertenece todo a una misma tabla.
387
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.
388
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.
Ejercicio
389
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.
390
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:.
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre l.
aulaClic
Nueva
categora
gurdalo
como
3. En la nica regin editable debers escribir un prrafo de clase titulo que diga
Escribe el nombre de la nueva categora:
4. Ahora deberemos introducir un formulario de insercin de registros. Haz clic en el
botn Asistente de formulario de insercin de registros
392
5. En la nica regin editable escribe un prrafo de clase titulo que diga No hay
categoras en la base de datos.
6. Escribe un segundo prrafo que diga Crea una nueva desde aqu, enlazada la
ltima palabra con el archivo nueva_categoria.php.
7. Selecciona estos dos prrafos que acabas de introducir y haz que se muestre si no
existen
registros
de
categoras.
Si no hay categoras no podremos asociar la entrada a ninguna de ellas.
Utiliza la opcin Mostrar si el juego de registros est vaco, seleccionando el
recordset listado_categorias.
8. Seguidamente escribe un prrafo de clase titulo que diga Introduce los datos de la
nueva entrada:
9. Ahora deberemos introducir un formulario de insercin de registros. Haz clic en el
botn Asistente de formulario de insercin de registros
Aceptar
para
cerrar
el
dilogo.
393
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.
394
Nota: Puedes incluir campos de bsqueda como hicimos en el ejercicio de Librera del
tema anterior. Bastar con que apliques los mismos procedimientos.
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio blog, vamos a trabajar sobre l. Vamos a crear
la
pgina
que
muestre
un
listado
de
comentarios.
395
12. Haz
clic
en
el
botn
Aceptar
para
crear
el
juego
de
registros.
13. Debajo del prrafo que hemos aadido debers insertar una tabla con 10 pxeles de
relleno de celda y un ancho del 100%. En esta tabla listaremos las entradas.
La tabla deber tener 2 filas y 2 columnas, siendo la primera fila un encabezado.
14. A las celdas de la primera fila, aplcales el estilo borde_inferior. Alinea las celdas
de la segunda columna a la derecha.
15. Escribe en la primera celda de la primera fila Ttulo.
16. Escribe en la segunda celda de la primera fila Fecha.
17. En la primera celda de la segunda fila arrastra el elemento Titulo desde el panel
Vinculaciones, del juego listado_entradas.
18. Asgnale un enlace a listado_comentarios.php?id=
19. Empleando la vista cdigo, modifica el vnculo arrastrando el elemento Id del juego
listado_entradas desde el panel Vinculaciones para que se muestre de este modo:
<a href="listado_comentarios.php?id=<?php echo
$row_listado_entradas['Id']; ?>">
20. En la segunda celda de la segunda fila inserta el elemento Fecha arrastrndolo
desde el panel Vinculaciones. Ponlo en cursiva empleando un estilo en lnea
aplicado a la celda.
21. Selecciona la segunda fila de la tabla y haz que se repita para que muestre 6
registros.
22. Utiliza la opcin Repetir Regin para el juego listado_entradas.
23. Luego coloca el cursor al final del contenido editable e introduce una barra de
navegacin de registros
centra la tabla en la pgina.
26. En el cuadro de dilogo que se abrir rellena los datos de la siguiente forma: en
Nombre escribe listado_comentarios.
27. En Conexin selecciona blog_aulaclic.
28. En Tabla selecciona Comentarios.
29. En Ordenar selecciona Fecha y en el desplegable de al lado Descendente.
396
30. Modifica los desplegables de Filtro para que pueda leerse: Id_Entrada = Parmetro
URL id.
31. Haz clic en el botn Aceptar para crear el juego de registros.
32. Debajo del prrafo que has aadido inserta una tabla con 10 pxeles de relleno de
celda.
33. La tabla deber tener 2 filas y 5 columnas, con un ancho del 100% y la primera fila
de encabezados.
34. Aplica a las celdas de la primera fila el estilo borde_inferior.
35. En la primera celda de la primera fila escribe Autor en negrita.
36. En la segunda celda de la primera fila escribe Correo en negrita.
37. En la tercera celda de la primera fila escribe Fecha en negrita.
38. Arrastra el elemento Autor del juego listado_comentarios a la primera celda de la
segunda fila.
39. Arrastra el elemento Correo_Autor del juego listado_comentarios a la segunda
celda de la segunda fila y ponlo en cursiva.
40. Arrastra el elemento Fecha del juego listado_comentarios a la tercera celda de la
segunda fila y ponlo en cursiva.
47. Para terminar, selecciona el primer prrafo y la primera tabla y haz que se
muestren si no hay registros en el recordset de listado_comentarios. Utiliza la
opcin Mostrar si el juego de registros est vaco.
Si es la primera vez y al listado_comentarios no le hemos pasado un Id de entrada,
397
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.
398
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.
399
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:
400
401
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.
402
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
el siguiente cuadro de dilogo:
403
vers
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.
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:
404
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.
405
<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.
406
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Haz clic izquierdo sobre el icono de WampServer en el rea de notificacin y
selecciona
la
opcin
PHP
Extensiones
de
PHP.
Se desplegar un men que mostrar todas las extensiones instaladas.
3. Desplzate hacia abajo hasta que encuentres una llamada php_xsl.
4. Haz clic sobre ella y la extensin se instalar.
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.
407
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.
Aqu deberemos indicar la fuente XML de la que queramos sacar los datos.
408
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.
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.
409
Para comenzar a importar datos desde un archivo externo realiza el Ejercicio Paso a
Paso de Importar datos RSS.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Crea un nuevo archivo de XSLT (fragmento) haciendo clic en Archivo Nuevo,
Categora Pgina en blanco, XSLT (fragmento).
4. Se abrir un cuadro de dilogo, selecciona la opcin Adjuntar un archivo remoto
en Internet.
5. En la caja de texto escribe http://www.criticadelibros.org/whats-new.rss.
6. Pulsa Aceptar.
7. Guarda el archivo como critica_rss.xsl.
410
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
Cuando estemos en una pgina o fragmento XSLT, el panel Insertar nos permitir
utilizar las herramientas para trabajar con XSLT:
411
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.
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:
412
Tambin podemos insertar filtros haciendo clic en la flecha que acompaa al texto
Construir filtro:
413
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:
414
En este caso el filtro que hemos aadido hace que slo se muestren los 5 primeros
elementos.
Sencillo, verdad?
Objetivo
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Abre el archivo critica_rss.xsl
4. Bajo los dos elementos que se encuentran en la pgina inserta una linea horizontal
(Insertar HTML Regla horizontal).
Desde la vista de Cdigo debers ver algo as:
<p><a href="{rss/channel/item/link}"><xsl:value-of
select="rss/channel/item/title"/></a></p>
< p><xsl:value-of select="rss/channel/item/description"
disable-output-escaping="yes"/></p>
< hr />
415
, del Panel
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() <= 5]">
<p>Ttulo: <xsl:value-of select="title"/></p>
<p>Descripcin: <xsl:value-of
output-escaping="yes"/></p>
<hr />
</xsl:for-each>
416
select="description"
disable-
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() <= 5]">
<xsl:sort select="title"
/>
select="description"
disable-
<hr />
</xsl:for-each>
data-type="text"
417
select="description"
disable-
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Abre el archivo critica_rss.xsl
4. Ve a la vista de Cdigo.
5. Bajo la lnea de repeticion xsl:for-each escribe lo siguiente para que se ordenen los
elementos por su ttulo:
<xsl:sort select="title" />
Deber quedarte algo as:
<xsl:for-each
4]">
<xsl:sort
select="rss/channel/item[position()
<=
select="title"
/>
<p><a
href="{link}"><xsl:value-of
select="title"/></a></p>
<p><xsl:value-of select="description" disable-outputescaping="yes"/></p>
<hr
/>
</xsl:for-each>
418
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 campo coche 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:
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.
420
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
Para practicar realiza el Ejercicio Paso a Paso de Aadir XML a nuestra pgina.
Ejercicio
1. Si WampServer no se est ejecutando, lnzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se estn ejecutando, lnzalos para poder
tener acceso a las bases de datos y a la ejecucin de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre l.
4. Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo
Nuevo, Pgina de plantilla).
5. Dale el ttulo Crticas y gurdalo como criticas.php.
6. En la regin editable escribe un prrafo que diga Crticas obtenidas de
criticadelibros.org
7. La primera palabra deber verse afectada por la clase primera_palabra.
8. criticadelibros.org deber estar enlazado con http://www.criticadelibros.org/
421
12. Acepta el cuadro de dilogo y vers como se aade el contenido RSS a la pgina.
15.
16.
17. Por ltimo veremos una caracterstica muy til que posee Dreamweaver: el paso de
parmetros.
18.
19. Podemos utilizar variables en el archivo XSLT para configurarlas ms tarde segn
la pgina dinmica que vaya a mostrarla.
20. Por ejemplo, en un filtro de repeticin podramos indicar lo siguiente:
21.
22. En este caso estaremos diciendo que queremos que se muestren tantos elementos
como indique la variable $numero.
23. A partir de este momento, cuando llamemos al archivo XSLT deberemos darle un
valor a este parmetro para que tenga un valor real.
24. Pero, cmo hacerlo?, muy sencillo.
25. Cuando estamos creando la transformacin XSL (ver apartado anterior) deberemos
incluir un parmetro haciendo clic en el botn
26. Se abrir el siguiente cuadro de dilogo:
27.
28. En Nombre deberemos especificar el nombre del parmetro (en el ejemplo numero)
y en Valor estableceremos un valor para dicho parmetro.
29. Aceptamos el cuadro de dilogo y listo.
30.
422
31. 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.
32.
33.
423
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:
424
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.
425
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 orden Ascendente 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 opcin Actualizar 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.
Pulsa Aceptar y estars listo para arrastrar elementos del panel Vinculaciones a tu
pgina:
427
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.
Para ello simplemente haz clic en Insertar Spry Lista de Repeticin de Spry y
vers el siguiente cuadro de dilogo:
En las dos primeras opciones el cuadro de dilogo permanecer tal y como ves en la
imagen.
429
430
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.
431
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.
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
432
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">
433
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.
434
new
Spry.Data.XMLDataSet("archivo.xml",
</script>
435
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.
new
Spry.Data.XMLDataSet("archivo.xml",
</script>
436
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.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Copia el archivo libreria.xml que encontrars en la carpeta ejercicios/libreria del
curso en la carpeta de tu sitio (mis_sitios/libreria). Seguramente ya lo copiaras al
copiar los archivos del sitio.
4. brelo para ver su estructura. Observa que tenemos una etiqueta que engloba todo
llamada biblioteca y otra que correspondera a cada registro llamada libro.
5. Abre un archivo dinmico nuevo basado en la plantilla libreria.dwt.php (Archivo
Nuevo, Pgina de Plantilla).
6. Dale
el
ttulo
Catlogo
gurdalo
como
catalogo.php.
437
438
en el panel
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
439
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
border="0"
spry:region="miDataset">
cellpadding="5">
<tr>
<td>{@id}
</td>
<td>{propiedad}</td>
</tr>
</table>
</div>
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.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
440
441
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
hacer
esto
desde
el
diseo,
con
la
opcin
Objetivo
Practicar la crear repeticiones en los registros.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Abre el archivo catalogo.php.
4. En la zona editable busca la tabla que acabamos de aadir en el ejercicio anterior
desde la vista de Cdigo.
5. Modifcala para aadirle una zona de repeticin a la fila que muestra el valor de los
campos:
443
<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.
444
ordenar
por
varios
campos,
separndolo
por
/.
Por
ejemplo
sortOnLoad:propiead/@atributo.
445
Por defecto las columnas se consideran de tipo texto y por lo tanto se ordenar
alfabticamente.
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>
spry:repeatchildren="miDataSet"
spry:test="'{propiedad}'.search(/^An/) != -1;">
446
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(/^An/) == -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';">
447
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).
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.
448
<li
spry:default="spry:default"
{propiedad}</li>
class="estilo2">{@id},
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Abre el archivo catalogo.php.
4. En la zona editable busca la tabla que acabamos de aadir en el ejercicio anterior
desde la vista de Cdigo.
5. Busca la segunda fila, la tr con spry:repeat, y alrededor de la fila y sus celdas, crea
una etiqueta <tbody></tbody>.
6. Quita el spry:repeat de la fila, y coloca un spry:repeatchildren en el <tbody>.
<tbody
<td
spry:repeatchildren="misLibros">
<tr>
<td>{isbn}</td>
<td>{titulo}</td>
<td>{autor}</td>
align="right">{precio}
</td>
</tr>
</tbody>
449
la
condicin
por
defecto:
spry:region="misLibros">
cellpadding="15" cellspacing="0">
<tr>
<th>ISBN</th>
<th>Ttulo</th>
<th>Autor</th>
<th>Precio</th>
</tr>
<tbody
spry:repeatchildren="misLibros"
spry:choose="spry:choose">
<tr spry:when="{ds_RowID}%2==0;" style="backgroundcolor:#D4FFFF">
<td>{isbn}</td>
<td>{titulo}</td>
<td>{autor}</td>
<td
align="right">{precio}
</td>
</tr>
<tr
spry:default="spry:default">
<td>{isbn}</td>
<td>{titulo}</td>
<td>{autor}</td>
<td
align="right">{precio}
</td>
</tr>
</tbody>
</table>
border="0"
href="#"
onclick="miDataSet.filter(miFuncion);">Filtrar
registros</a>
450
<script type="text/javascript">
var miDataSet = new Spry.Data.XMLDataSet("archivo.xml",
"listado/elemento");
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;
}
}
451
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.
href="#"
onclick="miDataSet.filterData(miFuncion);">Filtrar
Para practicar estos conceptos realiza el Ejercicio Paso a Paso Crear un Filtro.
Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el sitio libreria.
3. Abre el archivo catalogo.php.
452
href="#"
todos</a>
type="text" />
onclick="misLibros.filter(miFiltro)">Buscar</a>
<a href="#" onclick="misLibros.filter()">Mostrar
</form>
Observa cmo hemos referenciado a una funcin que todava no existe llamada
miFiltro. Vamos a crearla.
10. Ve a la parte superior de la pgina y localiza la zona donde hemos declarado el
dataset.
11. Aade la siguiente funcin:
<script type="text/javascript">
<!--
453
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?
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:
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.
455
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>
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).
456
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>
457
</ul>
</div>
<div spry:detailregion="miDataSetDetalle">
<p>{columna2}</p>
<p>{columna3}</p>
<p>{columna4}</p>
<p>{columna5}</p>
</div>
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>
458
spry:select="seleccionado"
spry:selectgroup="miGrupo">{@id}, {propiedad}</li>
459
460
461
462
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.
463
464
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.
465
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:
466
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:
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:
467
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.
Opcin 1
Opcin 3
Opcin 2
Opcin X
468
y
Valor
Valor
Valor
Valor 3
entre
Valor 6
opciones:
4
5
como mximo.
469
el
texto
(mx.
50
caract.):
470
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.
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.
471
Repita:
Lo nico que debemos configurar en este caso es indicar en el desplegable Validar con
el campo con el que se comparar.
472
Podemos crear mens de forma muy sencilla haciendo clic en Insertar Spry
Barra de mens de Spry:
Men 1
473
Submen 1.1
Subs
Subsub
Subsu
Submen 1.2
Submen 1.3
o
o
Men 2
Men 3
o
Submen 3.1
o
o
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:
474
, y podemos
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 texto Vnculo. 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
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
y rellena
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.
475
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:
476
Desde aqu podrs aadir tantas fichas como desees y ordenarlas utilizando los
botones
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:
Recuerda que el panel que se visualizar primero en la pgina es el que elijas como
predeterminado en el panel Propiedades.
477
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
Este control es tan sencillo de configurar que en el panel Propiedades slo encontrars
lo siguiente:
478
. Y luego
Vers que realmente, funciona como un acorden con una sola ficha.
479
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:
Para modificar este panel simplemente edita su contenido como en el resto de controles
que hemos visto, Nada ms fcil.
480
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.
481
482
483
484