Semana 03 - Maquetación Web y Divs

Objetivos
Maquetando pginas web.

- Uso de divisiones o capas.
- Aplicando formato a las divisiones.
- Divisiones flotantes.
- Uso de Clear.
Insercin de elementos multimedia: audio y video.
Otros elementos: Marquesinas, Widgets y elementos Spry.
ADOBE DREAMWEAVER CS 5.5 47

Maquetado de Pginas Web
En pocas palabras, maquetar una pgina web es pasar el diseo a cdigo HTML, poniendo
cada cosa en su lugar (una cabecera, un men, etc.).
Hasta hace unos aos la nica manera de maquetar una pgina web era mediante tablas HTML
(<table>), pero esto tiene muchas desventajas y limitaciones, por eso la tcnica de maquetacin
fue evolucionando con los aos hasta llegar al punto donde no se usan tablas, si no capas (los
famosos DIVs) a las que se le dan formato mediante CSS.
Uso de Divisiones, Capas o Layouts
Las capas, layouts o divs son la misma cosa con distinto nombre, para tener un concepto mental
ms fuerte de lo que son, podemos imaginarlos como contenedores o bloques donde podemos
insertar lo que queramos dentro (imgenes, texto, animaciones, otro bloque, o todo al mismo
tiempo) a los que se le asigna un ancho, alto y posicin, de esta manera se van a ir
posicionando consiguiendo la estructura que queremos.
Veamos un ejemplo grfico:
Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:
Capa 1: es la capa principal y contenedora

Capa 2: capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;)
Capa 3: igual que la capa 2, solo que tiene un margen con respecto a esta ltima
(float:left; margin: 10px; ya veremos esto ms en detalle).

Aplicando formato a las Divisiones
Esto se hace con estilos CSS. Para darle formato a un DIV tenemos que identificarlo de alguna
forma, para esto existe el atributo ID, en el pondremos el nombre del DIV para luego llamarlo
desde la hoja de estilos, la forma de escribirlo es as:
Ir al Men Insertar > Objetos de Diseo > Etiqueta DIV.
Luego, activar Nueva regla CSS, para crear los estilos CSS, en un Nuevo archivo de hoja de
estilos.

Luego de solicitar el nombre y guardarlo en la misma ubicacin en donde se halla el documento
html, se procede a definir los estilos:
- El color de fondo Verde.
- El ancho de 210 y el alto de 300.

Proceda a guardar los cambios, y puede abrir la hoja de estilos creada y observar:
#capa1{
width:210px;
height:300px;
background-color:green;
}
Con esto ya tendremos una especie de rectngulo verde donde podremos agregar texto como
queremos.
Uso de divisiones flotantes
La maquetacin por divs CSS se basa en "flotar" unas capas dentro de otras para conseguir la
estructura que queremos, para esto se utiliza la propiedad float.
Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los siguientes valores:
none: no flota la capa.

left: flota la capa hacia la izquierda.
right: flota la capa hacia la derecha.
Siguiendo con el ejemplo anterior, vamos a crear otra capa #capa2, le vamos a aplicar otro color
de fondo con el mismo alto y ancho pero vamos a flotar ambas capas. Comenzamos agregando
la siguiente divisin luego de la capa1.

Agregar en el estilo de la capa1, float en left.
Esto se debera ver ms o menos as:

Y el estilo debera de verse as:
#capa1{
width:210px;
height:300px;
background-color:green;
float:left;
}
#capa2{
width:210px;
height:300px;
background-color:gray;
float:left;
}
y el cdigo HTML sera este:
<html>
<head>
<title>Curso de maquetacion CSS</title>
<link href="estilos.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="capa1">Esta es mi primer capa</div>
<div id="capa2">Esta es mi segunda capa</div>
</body>
</html>
- En la capa 2, incluiremos un margen izquierdo

de 10 px.
El cdigo CSS debe quedar as:

#capa2{
width:210px;
height:300px;
background-color:gray;
float:left;
margin-left:10px;
}
y se vera as:
Uso de Clear
Seguramente cuando ests maquetando tu sitio web necesitars tener una capa o bloque que
no tenga capas a sus lados, para eso se usa la propiedad CSS Clear.
Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa se posicione a
cualquiera de los lados, los valores que admite son estos:
left: no deja que una capa flote a la izquierda

right: evita que una capa flote a la derecha
both: evita que haya capas flotantes en cualquiera de sus lados
Nosotros lo usaremos para crear, por ejemplo, el pie de pgina.
Siguiendo con el ejemplo que hicimos en la leccin anterior vamos a crear una tercer capa
#capa3 y le aplicaremos esta propiedad, aadiremos un ancho de 430 pixeles y un alto de 30
pixeles, tambin le aplicaremos un color de fondo naranja.

Establecemos color de fondo naranja.
Ancho de 430 y Alto de 30, en Float seleccionamos Left, y Clear, both. Margen superior de 10.

Esto quedara as:
#capa3{
width:430px;
height:30px;
background-color:orange;
float:left;
clear:both;
margin-top:10px;
}
Iniciando la estructura
En el tema anterior vimos los conceptos bsicos para crear y poder flotar capas entre otras
cosas, ahora vamos a tratar de poner en prctica lo que aprendimos para maquetar una pgina
con la siguiente estructura:
Cabecera: ac puede ir un logo o el nombre de tu pgina web

Barra lateral: podemos poner un men vertical con listas HTML
Contenido: donde ir el contenido de la web
Pie de pgina: podemos poner lo que necesitemos, desde el copyright hasta los
enlaces recomendados
La estructura deber quedar as:

Lo recomendable sera que hubiera una divisin contenedora que encierre a las otras divisiones,
sobre todo, si lo que se desea es centrar el contenido en la pgina.
Ejercicio 1: Construyendo divisiones en Dreamweaver CS5.5
- En la ventana de Administracin de Sitios, importar el sitio que se encuentra en

SEM3_ejer01 (si ya existe, elimnelo), luego en la pgina index.html, crear las
siguientes divisiones:
LOGO (ancho: 1000, alto: 130)

(clear: both, float: left)
MENU (ancho: 1000, alto: 27)

LOGO1 (ancho: 250, alto: 137)

(float: left)
FLASH (ancho: 750, alto: 410)

(float: left) LOGO2 (ancho: 250, alto: 137)
(float: left)
LOGO3 (ancho: 250, alto: 137)

(float: left)
PIE (ancho: 1000, alto: 33)

- Primero, se debe crear un estilo para el cuerpo del documento (BODY), que
solamente afecte al documento actual:
- A continuacin, agregar una divisin de nombre contenedor, con las siguientes

especificaciones:

Luego, agregar las otras divisiones, tal y como se trabajaron anteriormente.
Multimedia
Los elementos multimedia que pueden ser insertados en documentos web pueden ser
animaciones Flash (aplicacin que forma parte de Adobe Master Collection), videos flash (FLV),
entre otros.
Pelculas de Flash
Cualquier animacin creada en Flash tiene extensin SWF, el cual puede ser insertado
en un documento HTML.
Para incluir una animacin de Flash, ir al Men Insertar > Media > SWF.
Como en otros elementos, como las imgenes, podemos asignarle el ancho (An.) y alto
(Alt.).
En Archivo, indicamos la ruta hasta el archivo SWF.

Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el
archivo original (.fla), nos resultar muy til indicar su ubicacin en Origen. As, para
editarlo, bastar con pulsar Editar.
La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el
principio.
La otra es la opcin Rep. autom. (Reproduccin automtica), que al estar marcada

indica que nada ms cargarse la pgina comenzar a reproducirse la pelcula Flash. Si
esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la
pelcula hasta que el usuario la activase. Por tanto interesa desmarcar esta opcin
cuando se desea que la reproduccin sea activada por algn comportamiento.
La Calidad, cuanto ms baja, antes se cargar el archivo pero peor se ver. Conviene
dejarla en Alta para verlo tal cul se cre.
La Escala permite elegir cuanto se ver del archivo. Las pelculas Flash no siempre son
del tamao exacto del contenido, pueden tener un escenario de fondo alrededor del
objeto, aunque no se muestre. Si dejamos Predeterminada, se ver todo la pelcula. En
cambio, si elegimos Ajuste exacto, se vern slo los objetos, omitiendo el escenario de
fondo.
Alinear funciona como con las imgenes, y nos permite alinear la pelcula en relacin
con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar el
contenido del elemento que contiene el Flash (normalmente un prrafo) empleando
CSS.
Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el

Flash. En cambio, si es Transparente, el fondo se ver transparente (a no ser que se
haya especificado un color de fondo en el Flash).
El botn Reproducir nos permite ver la pelcula.
Al insertarse la pelcula, veremos la ubicacin en la vista de diseo con el siguiente

aspecto:
Al insertarse animaciones Flash, es frecuente que Dreamweaver aada algunos archivos

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

Sonido
No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen
estar escuchando su propia msica cuando navegan en Internet, por lo que el escuchar
tambin sonido en cada pgina que se visita puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina,

puede hacerla ms atractiva. Las pginas que contienen sonido suelen ofrecer la
posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen
escuchar el sonido de la pgina puedan desactivarlo. Siempre es mejor que el usuario
abandone la pgina.
Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el

WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que
tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe
mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirse al Men Insertar
> Meda > Plug-in.
A continuacin, para que se muestren los controles de audio se puede reproducir

pulsando sobre los controles, aunque podra mostrarse algunos de los siguientes:
Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se

mostrar un control similar a este:
En cambio, si el plugin necesario no est instalado, el navegador ofrecer la posibilidad

de hacerlo, como en esta imagen de Firefox.

Un plugin es un aadido al navegador, que nos permite realizar funciones
extra, como en este caso, reproducir un archivo de msica. Al insertar un
elemento como plug-in lo que indicamos es que el navegador debe de
intentar abrir el archivo empleando los pluigns que tenga para tal fin. Por eso,
si no lo tiene, nos invitar a instalarlo.
En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son
insertados como plugin aparecen representados dentro de Dreamweaver por una
imagen como la de la izquierda.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se

mostrarn los controles de audio, mediante Al y An.
En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los

controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el
sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y
An deben valer cero.
Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen

solamente una vez. Estos valores no pueden definirse como propiedades a travs del
inspector de propiedades, pero si los conocemos podemos empelar el botn
Parmetros....
Por ejemplo, para que el archivo se reproduzca continuamente se hemos aadido

loop="true". Si no queremos que se reproduzca automticamente, podemos aadir
tambin autostart="false"
La lnea de cdigo del archivo de audio nos quedara del siguiente modo:
<embed src="media/audio.mid" autostart="false" loop="true"></embed>
Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles
de audio, puedes escribir este cdigo directamente en la vista Cdigo.
<bgsound src="cancion1.wav" loop="-1">
Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuntas
veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
No obstante, insistimos en que no es recomendable poner msica sin controles de

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

se necesiten plugins, slo poder reproducir Flash. Adems, nos permite crear los
controles personalizados.

Video
En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener
en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan
de mucho tiempo para descargarse.
Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
Para insertar un archivo de vdeo en un documento, se debe ir al Men Insertar >

Meda > Plug-in.
El inspector de propiedades para los archivos de vdeo insertados de esta forma es el

mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.
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
reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo
vinculado (el archivo de audio o de vdeo) que ha de reproducirse.
En el caso de que el usuario no tenga instalado ningn plug-in adecuado, puede

establecerse en el campo URL plg una pgina en la que pueda encontrarlo. No ser
necesario en los archivos ms comunes de audio y vdeo, pero s si intentamos cargar
un archivo ms raro.
Ejercicio 1: Insertando elementos multimedia

- En la ventana de Administracin de Sitios, importar el sitio que se encuentra en
SEM3_ejer01 (si ya existe, elimnelo), luego en la pgina index.html, puede encontrar
una tabla en donde se halla numeradas las celdas en donde deber colocar los
elementos multimedia requeridos.

1
2 3
- En la celda 1, insertar la pelcula de flash desde Men Insertar > Media > SWF.
Archivo: media/flash/principal.swf.
- En la celda 2, insertar el video de flash desde Men Insertar > Media > FLV.
Archivo: media/flash/video.flv.
- En la celda 3, insertar un video desde Men Insertar > Media > PLUGIN.
Archivo: media/video/ Enamorado de un angel.mpg.
- Esta debera ser la apariencia final del documento desde el navegador.

- Insertar el archivo de audio: media/audio/fondo.mid, como msica del documento.
Otros elementos
Marquesinas
Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que
pueden desplazarse de un lado a otro de la ventana en forma de lnea.
Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es

necesario hacerlo a travs del cdigo mediante las etiquetas <marquee> y </marquee>.
Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan
en la marquesina.
Tambin es posible especificar algunas caractersticas de la marquesina. La

marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo
deseas puedes hacer que estas propiedades varen. Por ejemplo, <marquee
behavior="slide">, la marquesina har el desplazamiento una sola vez y se detendr.
En cambio <marquee behavior="alternate">, en lugar de desplazarse continuamente

de derecha a izquierda, la marquesina se desplazar de lado a lado de la ventana, como
si rebotara en los extremos.
<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif" alt="PerrosGatos" />
</marquee>
No conviene abusar de estos elementos, que ya que distraen la atencin del visitante.
Cada vez se emplea menos este elemento, ya que si se quiere animar texto, se suele
utilizar Flash que nos ofrece mucha ms posibilidades.
Widgets
Es un componente de pgina Web formado por cdigo HTML, CSS y JavaScript.
Ejemplos de widgets Web son los acordeones, los paneles en fichas y los calendarios.
Puede establecer su propia seleccin personal de widgets Web disponibles en

Dreamweaver usando el Navegador de widgets de Adobe (una aplicacin de AIR que le
permite examinar, configurar y obtener una vista previa de widgets empleando una
interfaz visual).
Para insertar un widget en un documento, se debe ir al Men Insertar > Widget. En el

cuadro de dilogo, seleccione un widget y un valor preestablecido (si resulta aplicable) y
haga clic en Aceptar.

Si no tiene instalado algn widget previamente, se le pedir que acepte una Licencia de
uso.
Seleccione alguno de los widgets mostrados..

Uso de la Barra de Men Spry: Paneles de Ficha, Acorden.
En esta unidad veremos algunos controles basados en JavaScript que Dreamweaver
pone a nuestra disposicin utilizando su librera Spry.
Estos controles harn que tus pginas se muestren de una forma ms profesional,
vistosa y ordenada.
Podrs encontrarlos bajo el Men Insertar > Spry, al final del desplegable o desde el
panel Insertar, seleccionando Spry:

Barra de Mens
La creacin de elementos es bastante sencilla. Este men admite hasta 3 niveles
diferentes, as que en principio la primera tarea ser definir el primer nivel. Esto lo
haremos desde el primer cuadro de listado.
Aadir y quitar elementos es tan fcil como utilizar los botones , y podemos
reorganizarlos luego utilizando las flechas . Cada uno de estos elementos puede
ser modificado para que muestren el texto que queramos, lo haremos desde las cajas de
texto que encontramos a la derecha.
- Ir al Men Insertar > Spry > Barra de mens de Spry
- Seleccionar el diseo.
- Modificar los elementos y subelementos del Men. Establecer una URL para el
vnculo de cada elemento.
Paneles de Ficha
Puedes crear un control como el que mostramos a continuacin haciendo clic en EL
Men Insertar > Spry > Paneles en fichas de Spry.
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.
Seleccionando el control haciendo clic en la cabecera azul vers lo siguiente en el panel

Propiedades:

Desde aqu podrs aadir tantas fichas como desees y ordenarlas utilizando los botones
y .
Luego selecciona el Panel predeterminado que es el que se mostrar por delante
cuando se visualice la pgina en el explorador, antes de que el usuario haya pulsado
alguna de las fichas.
Acorden
Otro control avanzado que utiliza las ventajas de AJAX y que Spry nos permite utilizar es
el Acorden:

Semana 03 - Maquetación Web y Divs

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Semana 03 - Maquetación Web y Divs

Încărcat de

Drepturi de autor:

Formate disponibile

Objetivos

Maquetando pginas web.

ADOBE DREAMWEAVER CS 5.5 47

Uso de Divisiones, Capas o Layouts

Veamos un ejemplo grfico:

Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera:

Capa 1: es la capa principal y contenedora

ADOBE DREAMWEAVER CS 5.5 48

Ir al Men Insertar > Objetos de Diseo > Etiqueta DIV.

ADOBE DREAMWEAVER CS 5.5 49

- El color de fondo Verde.

- El ancho de 210 y el alto de 300.

ADOBE DREAMWEAVER CS 5.5 50

Uso de divisiones flotantes

none: no flota la capa.

ADOBE DREAMWEAVER CS 5.5 51

Esto se debera ver ms o menos as:

ADOBE DREAMWEAVER CS 5.5 52

y el cdigo HTML sera este:

- En la capa 2, incluiremos un margen izquierdo

El cdigo CSS debe quedar as:

ADOBE DREAMWEAVER CS 5.5 53

left: no deja que una capa flote a la izquierda

Nosotros lo usaremos para crear, por ejemplo, el pie de pgina.

ADOBE DREAMWEAVER CS 5.5 54

ADOBE DREAMWEAVER CS 5.5 55

Cabecera: ac puede ir un logo o el nombre de tu pgina web

La estructura deber quedar as:

ADOBE DREAMWEAVER CS 5.5 56

Ejercicio 1: Construyendo divisiones en Dreamweaver CS5.5

- En la ventana de Administracin de Sitios, importar el sitio que se encuentra en

LOGO (ancho: 1000, alto: 130)

MENU (ancho: 1000, alto: 27)

LOGO1 (ancho: 250, alto: 137)

FLASH (ancho: 750, alto: 410)

LOGO3 (ancho: 250, alto: 137)

PIE (ancho: 1000, alto: 33)

- A continuacin, agregar una divisin de nombre contenedor, con las siguientes

ADOBE DREAMWEAVER CS 5.5 57

En Archivo, indicamos la ruta hasta el archivo SWF.

ADOBE DREAMWEAVER CS 5.5 58

La otra es la opcin Rep. autom. (Reproduccin automtica), que al estar marcada

Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecer sobre el

El botn Reproducir nos permite ver la pelcula.

Al insertarse la pelcula, veremos la ubicacin en la vista de diseo con el siguiente

Al insertarse animaciones Flash, es frecuente que Dreamweaver aada algunos archivos

ADOBE DREAMWEAVER CS 5.5 59

A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina,

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

A continuacin, para que se muestren los controles de audio se puede reproducir

Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, se

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

ADOBE DREAMWEAVER CS 5.5 60

En el inspector de propiedades pueden establecerse la altura y la anchura con la que se

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

Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen

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

<embed src="media/audio.mid" autostart="false" loop="true"></embed>

<bgsound src="cancion1.wav" loop="-1">

No obstante, insistimos en que no es recomendable poner msica sin controles de

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

ADOBE DREAMWEAVER CS 5.5 61

Para insertar un archivo de vdeo en un documento, se debe ir al Men Insertar >

El inspector de propiedades para los archivos de vdeo insertados de esta forma es el