CURSO AVANZADO DE CREACIN DE PGINAS WEB

por Rubn Coln Andreu (c) 2001

CREACIN DE MARCOS (FRAMES)

CONCEPTO
Los frames o marcos permiten simplificar la gestin de todo aquello que puede ser
representado por la suma de un ndice que permanece visible y que apunta a otras
pginas de informacin. Se trata de una manera de mostrar ms de una pgina a la vez
dentro de una nica ventana del navegador dando la impresin de que se hallan
ntimamente ligadas.

USOS
Usos tpicos son los ndices laterales de los captulos de un libro, de una visita guiada,
de una galera de imgenes categorizada o de una pgina que agrupe enlaces de
diversos orgenes externos al web site.

SINTAXIS
La pgina ms bsica se compone de:
1. Marco de definicin: archivo HTML que contiene la definicin de cmo se
dividir la pantalla del navegador y de donde estan las pginas a cargar en
cada divisin. Ser el que deber darse como direccin general de la pgina.
El navegador coge el ttulo de esta pgina.
2. n x pginas HTML: Las pginas accesibles desde el archivo anterior.
Esto implica que una pgina bsica debe contener al menos 2 divisiones de la pantalla
del navegador y por lo tanto estar formada por el conjunto de 3 archivos: archivo de
definicin, archivo que se muestra en la divisin 1 de la pantalla y archivo que se
muestra en la divisin 2 de la pantalla.

<frameset

cols = valor. Con este atributo definimos el numero de marcos que queremos
que aparezcan verticalmente y su tamao. El valor puede vernir definido en
pixels (por defecto), o se puede definir en porcentajes respecto a la anchura de
la ventana.
Se pueden utilizar comodines, como * para indicar que se asigna todo el
espacio restante despus de emplazar las otras divisiones.
Ej:
cols = "30, *, 25"
rows = valor. Con este atributo definimos el numero de marcos que queremos
que aparezcan horizontalmente y su tamao. El valor puede vernir definido en
pixels (por defecto), o se puede definir en porcentajes respecto a la anchura de
la ventana.
Se pueden utilizar comodines, como * para indicar que se asigna todo el
espacio restante despus de emplazar las otras divisiones.
Ej:
rows = "30, *, 25"
>
<frame

name = "nombre_frame". Nombre que le damos al frame,

muy importante para redirigir el destino de links, forms y
programacin en scripts.
src = "fichero_a_cargar". Nombre del fichero que se carga en
el frame al cargar la pagina que contiene dichos frames.
scrolling = no|yes|auto. Atributo que nos permite elegir si el
deseamos que se haga scroll en dicho frame.
noresize. Atributo sin valor (valor asociado al nombre) que
impide al usuario redimensionar un frame.

>
</frameset>

Cmo regular en que segmento se cargan las pginas a las que

apuntan los hiperenlaces?
Veamos este ejemplo:
Tenemos un conjunto de marcos que dividen la pantalla del navegador en dos zonas
verticales:

El cdigo de la pgina que define estas divisiones ser:

Dreamweaver: para crear los marcos solo hay que seleccionar la paleta de marcos y
pulsar sobre la distribucin deseada:

Este cdigo reserva una columna (a la izquierda) de 142 puntos de pantalla (le da el
nombre de fizquierda) y carga en esta zona la pgina izq.htm, el resto de espacio del
navegador se deja para la otra zona (le da el nombre de fderecha) y se carga la pgina
derecha.htm.
Cuando vemos esta pgina de definicin en el navegador, veremos esto:

Lo que nosotros queremos es que si se pulsa en el enlace del marco izquierdo, la

pgina a la que apunta se muestre en el derecho. Esto se consigue haciendo que cada
enlace del marco a la izquierda tenga un atributo TARGET que le indica el nombre
(en este caso fderecha) del espacio donde debe cargar la pgina a la que apunta

En Dreamweaver, este atributo puede verse en la ventana de propiedades del

hiperenlace (aparecen cuando estamos seleccionando un hiperenlace):

El cdigo HTML del marco ndice a la izquierda sera:

EJEMPLOS
1. Sistema de marcos de base.
2. Sistema de base con los atributos TARGET correctos.

ACTIVIDADES OPCIONALES
1. Prueba a generar un grupo de pginas como en el ejemplo.
2. Visualiza el enlace 2 de la pgina. Marca este punto en Mis Favoritos o
Bookmarks. Qu observas? Qu soluciones propones?
3. Haz ms pequea la ventana del navegador. Qu observas? (pista: mira las
barras de navegacin que aparecen en los laterales).
4. Cmo afecta a la velocidad el uso de marcos (frames)?
5. Qu ventajas observas en el uso de marcos?
6. El marco ndice no tiene el ttulo correcto. Cul es la razn? Hace falta
ponerlo?

CREACIN DE FORMULARIOS
CONCEPTO
Con estos elementos, al igual que los formularios tradicionales, podremos interactuar
con el web. Permiten introducir valores que posteriormente son mandados a un
programa que los trata obteniendo una accin como respuesta.

USO
El resultado de los datos que el cliente introduzca puede ser muy variado, desde
enviar solicitudes, cartas con comentarios sobre el web, realizar bsquedas de
informacin, etc.

SINTAXIS
Determinara la accion a realizar y el metodo de envio de los datos. entre estos tags se
deben introducir todos los controles de entrada de informacin. Los atributos de este
tag son los siguientes:
<form

method = post|get . Indica el mtodo a travs del cual se enviaran los datos al
servidor.
La diferencia entre ambos mtodos reside en la recepcin de los datos en el
servidor.
Cuando utilizamos el mtodo POST los datos se recibirn en nuestro CGI a
travs de la entrada estndar (stdin) por lo que no se muestran en el navegador,
mientras que el mtodo GET los datos se recibiran en una variable de entorno
llamada QUERY-STRING que se codifica con la URL en nuestro navegador y
por lo tanto son visibles y de medida limitada.
action = URL. Indica la accin a ejecutar cuando se ejecuta el botn de enviar
(submit). La accin ms habitual es llamar a un programa CGI, que trate los
datos, si bien, se puede hacer una llamada a la aplicacin de correo, de manera
que los datos se reciben mediante un correo.
enctype = valor. Indica el tipo de encriptacin que se va a realizar con los
datos que se van a enviar

>
Controles del formulario...
</form>
Como definir los controles dentro de <FORM>:

<input> . Este tag nos permite al usuario introducir los datos en funcin de su
tipo, siendo por ello muy importante este atributo. Los atributos asociados a
este tag son:
o type = valor . Este atributo nos indica el tipo de datos que se van a

introducir.
Podemos encontrar los siguientes valores:
text . Significa que los datos introducidos son de tipo texto.
Este ser el tipo adoptado por defecto si no se indica.
password . Significa que los datos introducidos son de tipo
texto, pero al ser una contrasea cuando son tecleados el
resultado visualizado por pantalla es un conjunto de asteriscos.
hidden . Significa que los datos no son introducidos por el
usuario, sino que son datos ocultos, introducidos por el
diseador de la pgina HTML.
radio . Este tipo de entrada, permite realizar una seleccin
dentro de un conjunto de elementos de manera que una
seleccin excluya a otra.
checkbox . Similar al anterior, con la particularidad de poder
habilitar o inhabilitar la eleccin en cualquier momento, no
siendo excluyentes entre varias entradas.
image . En este caso la entrada de datos se realiza al hacer
"clic" con el ratn sobre algn punto de un grfico, obteniendo
como resultado, en el programa que gestiona los datos
introducidos el nombre del elemento (atributo name) y las
coordenadas donde estaba situado el puntero del ratn.
submit . Este tag nos presenta un botn donde se debe pulsar
(con el ratn) para enviar los datos introducidos en el
formulario hacia el lugar definido por el tag ACTION de la
etiqueta FORM.
reset . Este tag nos presenta un botn donde se debe pulsar
(con el ratn) para borrar de la pantalla todos los datos
introducidos en el formulario.
file . (Slo Netscape) Este tipo permite seleccionar un fichero
al usuario para enviarlo al servidor.
o size = valor . Este atributo nos indica la amplitud de la ventana de
entrada de datos.
o maxlength = valor . Este atributo nos indica la longitud de los datos
de entrada.
o name = valor . Este atributo indica el nombre que se le da al objeto,
para su posterior
o value = valor . Este atributo indica el valor por defecto que tendr el
tag asociado. Especial mencin merecen los tipos submit y reset,
puesto que con este atributo se indica el texto que se desea que
aparezca en el botn, as como en el tipo hidden puesto que se le debe
asignar un valor.
o checked . Este atributo indica la seleccin ofrecida al usuario por
defecto en las entradas de tipo radio y checkbox .
o src = camino/fichero . Este atributo indica el camino hasta el grfico
que se utilizar para la entrada de datos.
<select> . Este tag permite presentar en la pagina una caja de seleccin con las
opciones que decide el diseador. Los atributos asociados a este tag son los
siguientes:
o name = valor . Este atributo indica el nombre que se le da al objeto,
para su posterior tratamiento en el CGI al cual se llama, o para su

tratamiento por los scripts.

size = valor . Este atributo indica el tamao de las opciones visibles
por defecto en la pgina.
o multiple . Este atributo indica si se desea que se pueda realizar un
seleccin mltiple por parte del usuario, de manera que pueda tener
varias opciones seleccionadas
o selected . Este atributo indica la seleccin ofrecida al usuario por
defecto.
o

Es necesario cerrar el tag <select> con el tag </select> .

Asociado a este tag encontraremos el tag <option> a continuacin del cual
podemos introducir el texto que se visualiza dentro de cada opcin del select.
Asociado a este tag tenemos el atributo selected, que es similar al atributo
checked de los input, de manera que por defecto la opcin deseada es la
marcada con este atributo.

<textarea> . Este tag permite al usuario introducir textos (en formato ASCII)
de longitud indefinida.
Los atributos asociados a este tag son los siguientes:
o rows . Determina el nmero de filas que se desea tenga la ventana de
entrada de datos.
o cols . Determina el nmero de columnas que se desea tenga la ventana
de entrada de datos.
o name = valor . Este atributo indica el nombre que se le da al objeto,
para su posterior tratamiento en el CGI al cual se llama, o para su
tratamiento por los scripts.

EJEMPLOS
En el siguiente formulario, pueden verse las definiciones de todos los controles que
hemos comentado:
<html>
<head>
<title>Formulari 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post"
action="http://www2.ub.es/curs/cgi/panmail3.pl" enctype="multipart/form-data">
<table width="100%" border="0" cellspacing="5">
<tr>
<td width="16%">
<div align="right"><b>Nombre:</b></div>
</td>
<td width="84%">
<input type="text" name="nombre" maxlength="50" size="35">

</td>
</tr>
<tr>
<td width="16%">
<div align="right"><b>Apellidos:</b></div>
</td>
<td width="84%">
<input type="text" name="apellidos" size="35" maxlength="90">
</td>
</tr>
<tr>
<td width="16%">
<div align="right"><b>DNI (secreto):</b></div>
</td>
<td width="84%">
<input type="password" name="dni" size="15" maxlength="15">
</td>
</tr>
<tr>
<td width="16%">
<div align="right"><b>Estado civil:</b></div>
</td>
<td width="84%">
<input type="radio" name="estado" value="soltero" checked>
Soltero<br>
<input type="radio" name="estado" value="Casado">
Casado<br>
<input type="radio" name="estado" value="divorciado">
Divorciado </td>
</tr>
<tr>
<td width="16%">
<div align="right"><b>Extracto bancario en formato word:</b></div>
</td>
<td width="84%">
<input type="file" name="file">
</td>
</tr>
<tr>
<td width="16%">
<div align="right"><b>Aficiones:</b></div>
</td>
<td width="84%">
<p>
<input type="checkbox" name="aficiones" value="caza">
Caza<br>
<input type="checkbox" name="aficiones2" value="cine">
Cine<br>
<input type="checkbox" name="aficiones3" value="inform&aacute;tica">
Inform&aacute;tica<br>

<input type="checkbox" name="aficiones4" value="esqu&iacute;">

Esqu&iacute;<br>
<input type="checkbox" name="aficiones5" value="Otros deportes">
Otros deportes</p>
</td>
</tr>
<tr>
<td width="16%">
<div align="right"><b>Documento que solicita:</b></div>
</td>
<td width="84%">
<select name="documento">
<option value="dni">DNI</option>
<option>Pasaporte</option>
<option value="visado">Visado</option>
</select>
</td>
</tr>
<tr>
<td width="16%">
<div align="right"><b>Periodo de tiempo:</b></div>
</td>
<td width="84%">
<select name="periodo" size="1">
<option value="3">Hasta 3 meses</option>
<option value="6">Seis meses</option>
<option value="1a">Un a&ntilde;o</option>
<option value="2a">Dos a&ntilde;os</option>
<option value="indefinido">Indefinido</option>
</select>
</td>
</tr>
<tr>
<td width="16%">
<div align="right"><b>
<input type="hidden" name="user_goto"
value="http://www2.ub.es/curs/user_goto.htm">
<input type="hidden" name="bustia_email" value="rcolon@ub.edu">
</b></div>
</td>
<td width="84%">
<input type="submit" name="Submit" value="Enviar">
<input type="reset" name="reset" value="Borrar">
</td>
</tr>
</table>
</form>
</body>
</html>

En verde podis ver destacadas las partes del cdigo que generan los controles del
formulario.
El resultado de este cdigo es el siguiente:

PASOS PARA GENERAR UN FORMULARIO

a. Definir el tag <FORM> y apuntar el atributo ACTION dentro de este, al programa
concreto que recibir los datos del formulario. El programa dentro de ACTION lo
debe suministrar el administrador del web o en su caso, poner en su lugar la url del
mail donde van a recibirse los datos (malito:buzon@ub.es) :
<form name="form1" method="post"
action="http://www2.ub.es/curs/cgi/panmail3.pl" enctype="multipart/form-data">

o si se manda al buzn hipottico bustia@ub.es:

<form name="form1" method="post" action="mailto:bustia@ub.es"
enctype="multipart/form-data">

Este caso solamente funcionar si el navegador/sistema operativo desde el que se est

viendo la pgina tiene correctamente configurado el programa de correo por defecto.
b. Aadir los controles segn las necesidades de los datos que deseemos recoger. En
el caso siguiente:

1. Entrada de texto:

<input type="text" name="nombre" maxlength="50" size="35">

<input type="text" name="apellidos" size="35" maxlength="90">
<input type="password" name="dni" size="15" maxlength="15">
2. Entradas mutuamente excluyentes, ntese que para que se excluyan entre si,
todo el grupo de controles tiene el mismo nombre (name):

<input type="radio" name="estado" value="soltero" checked>

Soltero<br>
<input type="radio" name="estado" value="Casado">
Casado<br>
<input type="radio" name="estado" value="divorciado">
Divorciado </td>
3. Fichero (poco utilizado al poder colapsar el servidor por la cantidad de datos):
<input type="file" name="file">
4. Casillas no excluyentes mutuamente. Mandan un valor cuando se las
selecciona, el nombre del control debe ser diferente en cada una de ellas:

<input type="checkbox" name="aficiones" value="caza">

Caza<br>
<input type="checkbox" name="aficiones2" value="cine">
Cine<br>
<input type="checkbox" name="aficiones3"
value="inform&aacute;tica">
Inform&aacute;tica<br>
<input type="checkbox" name="aficiones4" value="esqu&iacute;">
Esqu&iacute;<br>
<input type="checkbox" name="aficiones5" value="Otros deportes">
Otros deportes</p>
5. Listas y mens:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<select name="documento">
<option value="dni">DNI</option>
<option>Pasaporte</option>
<option value="visado">Visado</option>
</select>
<select name="periodo" size="1">
<option value="3">Hasta 3 meses</option>
<option value="6">Seis meses</option>
<option value="1a">Un a&ntilde;o</option>
<option value="2a">Dos a&ntilde;os</option>
<option value="indefinido">Indefinido</option>
</select>

6. Botones para enviar (imprescindible!) y borrar los datos de la pantalla:

<input type="submit" name="Submit" value="Enviar">
<input type="reset" name="reset" value="Borrar">

FUNCIONAMIENTO DE UN FORMULARIO
Tal como hemos comentado, el formulario permite al usuario que est viendo la
pgina, interactuar con nuestro web. El usuario, introducir los datos que le
pidamos en el formulario hasta que, una vez haya terminado, pulsar el botn
Enviar. Esta accin, activar el atributo ACTION de nuestro formulario (cuyo
principio y final marcan los tags <FORM>...</FORM>). Por tanto, los datos de
nuestro formulario, viajarn en parejas con la sintaxis nombre del control (name)
= valor introducido por el usuario hasta que el programa al que apunta el atributo
ACTION, los recibe y realiza el trabajo que tenga asignado.
Si en el atributo ACTION, figura una URL de correo (mailto:...), los datos se
mandarn del mismo modo a esa direccin de correo electrnico.

ACTIVIDADES OPCIONALES
Podis poner ms de un formulario en una misma pgina?
Jugad con los controles para descubrir sus caractersticas.
Podis poner ms de un grupo de controles tipo radio que se autoexcluyan.

IMGENES Y FONDOS PARA WEB: PREPARACIN Y

OPTIMIZACIN EN PAINT SHOP PRO

CONCEPTO
El grafismo desempea un papel fundamental en todo sitio web, es frecuente que la
sensacin de la profesionalidad de la informacin, pase por tener un diseo cuidado
antes que por la veracidad y utilidad de la informacin en si. Es el objeto de este curso
el obtener las nociones bsicas que os permitan profundizar con una base slida en el
extenso mundo del diseo.
Es fundamental elegir una buena herramienta, en este curso, se ha elegido el Paint
Shop Pro por su disponibilidad en versin de pruebas y por su excelente relacin
calidad / precio.

OPTIMIZACIN DE LAS IMGENES

En todo sitio web, es fundamental que el tiempo de espera del usuario que accede a
nuestro web sea el mnimo. A tal efecto, el peso, los kilobytes que tiene una imagen
deben mantenerse siempre al mnimo.

Optimizacin en la fase de diseo

Hay varias estrategias que podemos utilizar a la hora de disear las imgenes:
1. Cuantos menos colores utilicemos, menor ser el peso de la imagen.
2. Los degradados con prudencia, usan una gran cantidad de colores que
aumentan el peso de la imagen.
3. Usemos la medida justa, si usamos una imagen reducida, el peso es mucho
menor que si usamos los atributos de medida del tag image para reducirla.
4. Podemos dividir inteligentemente una imagen para aislar zonas de
caractersticas comunes que nos permitan optimizar el peso de cada zona.
5. Cuando una imagen se carga en el navegador, si esta misma imagen se usa
posteriormente, no se penaliza la velocidad, es rpido al estar almacenada el el
cach del navegador.

Optimizacin de imgenes existentes

1. Eleccin del formato:
a. JPEG para imgenes realistas, con degradados o mucho colorido:

Save as...

b. Para esquemas, botones e imgenes con pocos colores o colores

muy similares Compuserve Graphics Interchange (GIF):

2. Recorte de las reas superfluas:

Imagen de partida con un espacio blanco que no se utiliza:

Seleccionamos (herramienta en forma de rectngulo punteado) la zona que nos

interesa conservar:

Hacemos efectivo el recorte:

Y... la imagen recortada (ms ligera):

3. Reduccin de colores GIF:

Contaremos los colores utilizados...

Probaremos a reducirlos...

Y el resultado...ms ligero:

4. Optimizacin de colores / calidad en JPEG:

Elegiremos en Options...compression factor la calidad a la que guardaremos

la imagen (a ms calidad mayor ser el peso):

DEFINICIN DEL COLOR TRANSPARENTE

En las imgenes en formato GIF, podemos definir que al ponerlas sobre un fondo, uno
de los colores no se muestre, es decir, sea considerado como transparente.
Para elegir este color solo hay que seguir unos sencillos pasos:
1. Seleccionamos en el men la opcin de transparencia:

2. Elegimos que un color sea transparente y para elegirlo pulsaremos dentro

de la imagen que deseemos hacer transparente, en el color que deseemos
seleccionar:

3. Para ver que todo est correcto, pdemos hacer una prueba Proof..., el
rea trasparente aparece como un dibujo de tablero de ajedrez:

4. Si es satisfactorio, guardamos la imagen que ya ser transparente.

ANIMACIN DE GIFS
Otra propiedad interesante de los GIFs, es su capacidad de contener varios fotogramas
en un archivo y por lo tanto, generar animaciones. Las animaciones requieren de un
profesional para generarlas por lo que es aconsejable usar las librerias de gifs
animados que pueden encontrarse en el web, ahorra mucho tiempo!
El Paint Shop Pro dispone de un complemento, el Animation Shop que permite
generar animaciones de manera asistida (que no necesariamente fcil).
Ejemplo de cmo generar una animacin bsica:
1. Seleccionemos la aplicacin de animacin:

2. Crearemos una nueva animacin:

3. Seleccionaremos como ser el fondo y las medidas del GIF resultante:

4. Crearemos una animacin de un texto que se mueve:

5. Haremos que el texto que aparece Sample text o cualquiera que

introduzcamos se mueva Bouncing en la pantalla:

6. Obtenemos rpidamente la animacin:

7. La guardamos como archivo gif:

HTML AVANZADO: CONCEPTOS SOBRE HOJAS DE

ESTILO CSS, CAPAS Y JAVASCRIPTS

HOJAS DE ESTILO
Las hojas de estilo son una potente herramienta para dar formato y uniformidad a un
web, permiten definir y modificar atributos del lenguaje HTML. El nico
inconveniente es que a pesar de haber un estndar, se visualizan de modo diferente
segn el navegador, su versin y el sistema operativo.
Su definicin puede realizarse como CSS o bien utilizando el lenguaje Javascript, de
ah que dispongamos de dos maneras de hacer lo mismo.

USO
Pensemos por ejemplo que estamos diseando un web con 10.000 pginas, cada una
con su ttulo, mens y texto y quisisemos que con una sola modificacin pudisemos
cambiar la apariencia de todos los ttulos, sin tener que ir pgina a pgina, ah estaran
las hojas de estilo para simplificar el proceso. Lo mismo sucede si quisisemos hacer
que los enlaces no estuviesen subrayados (modificacin de un elemento del legnguaje
HTML) y muchas otras aplicaciones ms.

SINTAXIS
DEFINICIN CSS:
<style type="text/css">
<!-p {font-weight: bold; color: white;}
h1 {align: center;}
-->
</style>

DEFINICIN JAVASCRIPT:
<style type="text/javascript">
tags.p.weight = "bold";
tags.p.color = "white";
tags.h1.align = "center";
</style>

Almacenadas en ficheros externos

CSS (fichero.css):
/* hoja de estilo externa estilo.html */
all.BOLDBLUE {color: blue; font-weight: bold;}
h1 {line-height: 18pt;}
p {color: yellow;}
/* fin de fichero */

JAVASCRIPT (fichero.js) :
/* hoja de estilo externa estilo.html */
tags.BOLDBLUE.all.color = "blue";
tags.BOLDBLUE.all.fontWeight = "bold";
tags.h1.lineHeight = "18pt";
tags.p.color = "yellow";
/* fin de fichero */

Cdigo para incluirlas en el documento HTML que deseemos :

CSS:
<head>
<title>Los CSS</title>
<link rel = stylesheet type = "text/css" href = "fichero.css">
</head>

JAVASCRIPT:
<head>
<title>Los CSS con JS</title>
<link rel = stylesheet type = "text/javascript" href = "fichero.js">
</head>

EJEMPLO 1
Usaremos un fichero externo para definir un tipo de texto para los ttulos y otro para
el texto del cuerpo del documento.

Aparecer el siguiente cuadro de dilogo:

Haciendo doble clic en el rea blanca, podremos definir los estilos en una nueva
pgina externa (New style sheet file):

Definiremos las caractersticas que deseamos para el ttulo de nuestras pginas:

Aadiremos tambin la definicin para el texto general del documento (.cos) :

Si todo ha ido correctamente, tendremos ambos estilos en nuestra ventana:

Para hacer entonces que un texto de la pgina HTML tenga uno de los estilos basta
con seleccionarlo y pulsar el estilo que deseamos aplicar en la pantalla anterior:

Guardaremos normalmente nuestra pgina.

El cdigo HTML de la pgina:

<html>
<head>
<title>Ejemplo de CSS externo para definir atributos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="extern.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p class="titol">T&iacute;tulo</p>
<span class="cos">Texto del cuerpo</span>
</body>
</html>
El cdigo CSS del archivo esterno (extern.css):
.titol { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold;
color: #666666; text-decoration: none}
.cos { font-family: "Times New Roman", Times, serif; font-size: 12px; color:
#0033FF}

EJEMPLO 2
Utilizaremos las CSS para hacer que los hiperenlaces en una pgina no salgan
subrayados y que al pasar sobre ellos, se cambie el color (visible solo en algunas
versiones de navegador). El procedimiento es anlogo al anterior, solo varia el primer
paso en el que le diremos que las definiciones se almacenen en la misma pgina y no
en un fichero externo (This document only):

Crearemos un estilo para el ttulo igual que hemos hecho anteriormente.

Procederemos a alterar el comportamiento de los hiperenlaces ya que deseamos que
no aparezcan subrayados:

y usaremos la propiedad que se activa cuando pasamos por encima de un enlace

(a:hover) para hacer que cambien de color:

Todos los estilos deben aparecer en el cuadro de definicin:

pero no en el de seleccin:

Guardaremos la pgina normalmente.

Cdigo de la pgina HTML:
<html>
<head>
<title>CSS dentro de la p&aacute;gina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!-.titulo { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold;
color: #666666; text-decoration: none}
a { font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-decoration: none}
a:hover { color: #FF9933}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p class="titulo">T&iacute;tulo</p>
<p><a href="http://www.ub.es">Enlace a la UB</a></p>
<p><a href="http://www.ubmedia.ub.edu">Enlace a la Fundaci&oacute;n UB
M&egrave;dia</a></p>
</body>
</html>

CAPAS
Permiten diversos efectos y el posicionamiento absoluto de elementos en la pgina.
As como los marcos dividan el espacio visible de una ventana de navegador, las
capas marcan zonas que contienen cdigo HTML, y por tanto cualquier elemento
(tablas, imgenes, hiperenlaces, etc.) y que permiten que las tratemos como elementos
flotantes y separados del contenido de la pgina. Elementos que podemos desplazar y
hacer visibles o invisibles.
Podemos tener el nmero de capas que consideremos necesario, el z-index nos
permitir establecer las que estn sobre o debajo de otras.

Aadir una capa a un documento HTML

Partimos de una pgina HTML y deseamos aadir una capa que contendr texto.
Pulsaremos el control de capas:

Dibujaremos la capa con las medidas que deseemos:

Las propiedades de la capa nos indican su posicin y si es visible o no:

Para hacerla visible:

Para hacerla invisible:

En su interior, podemos poner cualquier elemento de contenido que una pgina

HTML pueda contener:

Cuando esta pgina se visualice, aparecer con la capa perfectamente integrada en la

posicin que le hayamos dado:

Incluso si est sobre contenido de la pgina:

JAVASCRIPTS
Con frecuencia, los elementos estticos no son suficientes para realizar una funcin en
nuestra pgina. Deben realizarse un buen nmero de acciones dinmicas que no
dependen del momento en el que fueron diseadas las pginas como puede ser aadir
la fecha del momento de visualizacin de la pgina o realizar algunas tareas como
respuesta a acciones del cliente que usa el navegador. Para dar respuesta a esto, se
crearon diversos lenguajes de programacin cuyo cdigo se ejecuta en el navegador
del cliente para realizar un diverso nmero de tareas. Estos lenguajes pueden
presentar variacin en su comportamiento segn el navegador y el sistema operativo.
Examinaremos aqu uno de ellos, el Javascript que se ejecuta en el navegador
centrndonos en el uso de ciertas partes de cdigo ya programadas.

SINTAXIS
<SCRIPT LANGUAGE=Javascript>
...cdigo javascript
</SCRIPT>
Algunos Javascripts se ponen dentro de la cabecera de la pgina para ocultarlos en
caso de que el navegador no los soporte o haya algn tipo de error.

Personalizacin y modificacin de scripts en Javascript

En verde, podis ver el cdigo que es posible modificar para ajustarlo a vuestras
necesidades y en naranja el script.
Hay que notar que deben transcribirse exactamente como estn en el texto ya que una
mayscula o un espacio pueden evitar que funcionen correctamente.

Mensajes y alertas
Podemos mostrar mensajes de cualquier tipo en ventanas emergentes:

<html>
<head>
<title>Alerta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--

function Alertas(msg) { //v1.0

alert(msg);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<input type="text" name="nom">
<input type="submit" name="Submit" value="Enviar" onClick="Alertas('Voy a
mandar este mensaje')">
</form>
</body>
</html>

Mensajes en la barra de estado

Es posible modificar el comportamiento de la barra de estado para que muestre
cualquier mensaje:

<html>
<head>
<title>Uso del Javasctipt de la barra de estado</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!-function Barra(msgStr) { //v1.0
status=msgStr;
document.Barra_ret = true;
}
//-->

</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="Barra('Hemos modificado la
barra de estado...');return document.Barra_ret">
Mirad la parte inferior, vereis el texto &quot;Hemos modificado la barra de
estado...&quot;
</body>
</html>

Nuevas ventanas
Pueden abrirse nuevas ventanas que carguen cualquier tipo de contenido (aunque hay
una opcin en HTML para hacer cosas similares):
<html>
<head>
<title>Abre una ventana</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!-function AbreVentana(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>Abre una ventana nueva con la barra de menus y de 200x100 que carga la
p&aacute;gina
http://www.ub.es </p>
<p>Pulsa <a href="#"
onClick="AbreVentana('http://www.ub.es','ventana2','menubar=yes,scrollbars=yes,widt
h=300,height=100')">aqu&iacute;</a>
para abrir una ventana nueva </p>
</body>
</html>

Botones
Los botones pueden realizar funciones diversas como la de reproducir un sonido:
<html>
<head>
<title>Bot&oacute;n con sonido</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--

function MM_controlSound(x, _sndObj, sndFile) { //v3.0

var i, method = "", sndObj = eval(_sndObj);
if (sndObj != null) {
if (navigator.appName == 'Netscape') method = "play";
else {
if (window.MM_WMP == null) {
window.MM_WMP = false;
for(i in sndObj) if (i == "ActiveMovie") {
window.MM_WMP = true; break;
}}
if (window.MM_WMP) method = "play";
else if (sndObj.FileName) method = "run";
}}
if (method) eval(_sndObj+"."+method+"()");
else window.location = sndFile;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<input type="button" name="Button" value="Suena m&uacute;sica"
onClick="MM_controlSound('play','document.CS1003065346494','st.mid')">
<EMBED NAME='CS1003065346494' SRC='st.mid' LOOP=false
AUTOSTART=false MASTERSOUND HIDDEN=true WIDTH=0 HEIGHT=0>
</EMBED>
</body>
</html>

Menu
Un men lateral que se muestra al pasar por encima con el ratn:
<html>
<head>
<style>
<!-#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:170px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>

<title>Menu lateral</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript1.2">
if (document.all)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()"
onMouseout="draw()">')
</script>
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()
// textos a mostrar
sitems[0]="Esphera"
sitems[1]="Universitat de Barcelona"
sitems[2]="Fundaci UB Mdia"
sitems[3]="Ub en lnia"

//Links de los textos anteriores

sitemlinks[0]="http://www.esphera.org"
sitemlinks[1]="http://www.ub.es"
sitemlinks[2]="http://www.ubmedia.ub.edu"
sitemlinks[3]="http://www.ubenlinia.com"

for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')
</script>
</layer>
<script language="JavaScript1.2">
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style

rightboundary=0
leftboundary=-150
}
else{
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}
function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if(document.layers&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (document.all&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if(document.layers&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>
<p>Ves con el rat&oacute;n sobre la banda amarilla a la izquierda</p>
<p>&nbsp;</p>
</body>
</html>

Redireccin segn el navegador

Segn el navegador, iremos a la pgina 'navegador4.htm' para navegadores 4.x de
Netscape o Microsoft y a 'navegador_no4.htm'en caso contrario.
<html>
<head>
<title>Detecci&oacute;n de navegador</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

<!-function
MM_checkBrowser(NSvers,NSpass,NSnoPass,IEvers,IEpass,IEnoPass,OBpass,URL,altURL)
{ //v4.0
var newURL='', verStr=navigator.appVersion, app=navigator.appName, version =
parseFloat(verStr);
if (app.indexOf('Netscape') != -1) {
if (version >= NSvers) {if (NSpass>0) newURL=(NSpass==1)?URL:altURL;}
else {if (NSnoPass>0) newURL=(NSnoPass==1)?URL:altURL;}
} else if (app.indexOf('Microsoft') != -1) {
if (version >= IEvers || verStr.indexOf(IEvers) != -1)
{if (IEpass>0) newURL=(IEpass==1)?URL:altURL;}
else {if (IEnoPass>0) newURL=(IEnoPass==1)?URL:altURL;}
} else if (OBpass>0) newURL=(OBpass==1)?URL:altURL;
if (newURL) { window.location=unescape(newURL); document.MM_returnValue=false; }
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000"
onLoad="MM_checkBrowser(4.0,1,2,4.0,1,2,2,'navegador4.htm','navegador_no4.htm');return
document.MM_returnValue">
</body>
</html>

Redireccin segn la resolucin de la pantalla

Ir a la pgina:
screen1024x768.htm para 1024x768
screen800x600.htm para 800x600
screen640x480.htm para 640x480
<html>
<head>
<title>Redirecci&oacute;n segun la resoluci&oacute;n de la pantalla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript">
var s1024x768page = "screen1024x768.htm";
var s800x600page="screen800x600.htm";
var s640x480page="screen640x480.htm";
var pagetype;
if ((screen.height == 768) && (screen.width ==
1024)) {

pagetype = 1;
}
else if ((screen.height == 600) && (screen.width
==800))
{
pagetype = 2; }
else if ((screen.height == 480) && (screen.width
==640))
{
pagetype = 3; }
else {
pagetype = 1; }
if (pagetype ==1) {window.location.href
=s1024x768page }
else if (pagetype ==2) {
window.location.href = s800x600page
}
else if (pagetype ==3) {
window.location.href = s640x480page
}
//->
</script>
<p>&nbsp;</p>
</body>
</html>

Validacin de formularios
El dreamweaver dispone de herramientas muy potentes para permitirnos validar el
formulario antes de mandarlo y ver como en este caso, que el campo que se manda
tiene algn contenido.

Partimos de un formulario, el campo que validaremos se llama nombre y

corresponde al cuadro de texto:

Para ver la ventana de Behaviors (comportamientos) pulsaremos el men

correspondiente:

En la ventana de Behaviors (comportamientos) pulsaremos el botn + (ntese que

debemos encontrarnos con el cursos dentro de l formulario) y elegimos Validate
form (validar el formulario):

Podemos elegir el campo o campos a validar y las reglas, en este caso marcamos el de
texto nombre y seleccionamos Required (obligatorio):

El comportamiento asociado aparecer en la ventana:

Ya podemos guardar el formulario.

PLANTILLAS (TEMPLATES)
Una vez se ha diseado como queremos que sean nuestras pginas, es prctico
guardarlo en forma de plantilla que nos evitar tener que generar los elementos
comunes, barras superiores y pies de pgina cada vez que aadamos una nueva pgina
web.

Creacin de una nueva plantilla

Partimos de la pgina con el diseo que nos interesa mantener:

La guardamos en DW como plantilla:

Ahora debemos definir la parte donde podr escribirse alguna cosa, las dems zonas
quedarn como no editables, marcaremos la zona entre la cabecera y el pi de pgina:

Pasaremos a realizar la accin de definir esta zona como editable:

Ya tenemos nuestra plantilla definida, una franja azul claro marca la zona donde
pueden aadirse contenidos:

Guardaremos los cambios.

Para utilizar una plantilla

Simplemente, usaremos la opcin New from template para abrir una nueva pgina
basada en una plantilla predefinida:

Esta accin abrir una pgina nueva basada en nuestra plantilla: