Diseo de pgina.

Maquetacin web
Maquetar una pgina web
La maquetacin es la distribucin de los elementos en nuestra pgina. Piensa en
una pgina web cualquiera. Seguro que distingues algunos elementos claramente
diferenciados, como un encabezado, columnas, y un pie de pgina.
Hace unos aos, la maquetacin de las pginas web se realizaba utilizando tablas
(<table>). Una vez entendido este proceso poda resultar sencillo, aunque si no se
dominaban las tablas, poda convertirse en algo tedioso. El problema de las tablas
es que generaban un pgina muy encorsetada, y el cdigo se volva complejo de
entender. Adems, algunos buscadores encontraban problemas al analizar la
estructura de la pgina.
Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza
utilizando capas (<div>), tambin llamadas divisiones o contenedores. La
colocacin de las capas en la pgina se realiza a travs de CSS. Esto permite, por
ejemplo, que podamos pasar de un diseo con un men lateral a otro con el men
en la parte superior, slo cambiando la hoja de estilos.
En esta unidad veremos las tcnicas de maquetacin ms comunes, aunque hay
que decir que existen diversas formas de conseguir una misma maquetacin.
Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para crear
un div alrededor de contenido ya existente desde Dreamweaver, seleccionamos la
parte de la pgina y en el men Insertar, opcin Objeto de diseo, elegimos
Etiqueta Div.

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.

Desbordamiento

Al utilizar un elemento de bloque, como una capa, un prrafo, el body, etc... el

tamao depende del contenido. Pero al definir un tamao fijo nos puede surgir un
problema: qu pasa si el contenido del elemento (texto, imgenes, etc...) no
cabe? Entonces se produce un desbordamiento, que podemos controlar desde el
estilo con la propiedad overflow. Podemos darle estos valores:
visible. Es la opcin por omisin. El contenido sale de elemento, y puede
que se solape con los elementos que haya a continuacin.
hidden. Lo que no quepa en el elemento, queda oculto.
auto. Muestra las barras de desplazamiento en el elemento cuando sea
necesario.
scroll. Siempre muestra las barras de desplazamiento.N
En el editor de propiedades CSS, encontramos el desbordamiento en la
categora Posicin.

Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento HTML
para visualizarlo.
Por defecto, los elementos se posicionan uno a continuacin de otro. Si se
trata de elementos de bloque, como capas, prrafos, listas, etc, se irn
colocando uno debajo del otro. A este posicionamiento se le denomina esttico.
Utilizando CSS, con la propiedad position podemos cambiar el tipo de
posicionamiento de los elementos. Existen cuatro tipos de posicionamiento:
static. Es el normal.
relative. El posicionamiento relativo coloca el elemento en su posicin
normal. A partir de ah, podemos desplazar el elemento, permaneciendo
el hueco de su posicin original.

 absolute. Con el posicionamiento absoluto, especificamos la posicin del

elemento con respecto al elemento que lo contiene.
fixed. Se establece la posicin del elemento de forma parecida al
absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos
barras de desplazamiento.
Al cambiar el desplazamiento de un elemento, es fcil que se solape sobre
otro. Esto produce que un elemento quede oculto. Para controlar esto,
disponemos de la propiedad CSS z-index, a la que podemos asignar un valor
numrico. Un elemento con un z-index mayor se ver por encima de otro con
un z-index menor.
Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre
ellas, se le asigna z-index: 10;, lo que hace que se vean por encima del resto.
El z-index slo afecta a los elementos con un posicionamiento distinto de static.
Los elementos posicionados siempre se vern por encima de otros elementos
no posicionados, y entre ellos se ver encima el de mayor z-index, o en su
defecto, el que se haya generado en ltimo lugar.
Truco: Para que un elemento sin posicionamiento se vea por encima de otro
posicionado, podemos darle posicionamiento relativo, lo que no afectar a su
apariencia si no lo desplazamos, y un z-index mayor que el del elemento
posicionado.
En el editor CSS encontramos las estas propiedades agrupadas bajo posicin.

Como
al crear
de
partir

habrs
observado,
un
nuevo
documento
Dreaweaver
podemos
de
una
maquetacin

prediseada.
Podemos dividir estos diseos en dos grandes grupos, diseos de
maquetacin fija o de maquetacin lquida (las que pone como flotantes).
En la previsualizacin de la derecha, los diseos fijos, de tamao en pxeles se
representan con un candado. En cambio, los diseos lquidos aparecen con un
muelle.
Bsicamente, para cada grupo de diseo, podemos elegir si queremos una
nica columna principal central, columnas a los lados, pie o encabezado.
Hay que tener en cuenta que esto generar gran cantidad de estilos CSS. Por
defecto se aadir al head de la pgina, pero en el desplegable Diseo CSS en
podemos elegir si colocarlo en una hoja nueva, o en una existente.
Al elegir un diseo u otro, llegaremos se mostrar de forma parecida a este, en
tonos verdes-marrones si el diseo es fijo, o azulado si es elstico.

Configuracin de un sitio local

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, las hojas de estilo, etc., se
deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor
organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como
sitio local.
Despus se podrn copiar los archivos en un servidor web, en el denominado sitio
remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en
Internet.
La organizacin de los archivos en un sitio permite administrar y compartir
archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el
sitio local en el servidor, etc.
Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o
index.html, ya que los navegadores buscan una pgina con ese nombre cuando se
intenta acceder a una URL genrica.
Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com 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.
Crear o editar un sitio web sin conexin a Internet
Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el
sitio en Dreamweaver.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios....
Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a
cada uno de los sitios creados y a la opcin Administrar sitio.

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

ventana que contiene la lista de sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se
mostrar la misma ventana en la que definir las caractersticas del sitio.

Las caractersticas 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.
Vamos a ver los datos
que hay que editar para
la categora Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se
encuentra el sitio dentro del disco duro local.
Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede
definirse la pgina principal del sitio, de la que colgarn el resto de documentos
HTML dentro del sitio, si en la carpeta raz del sitio existe una pgina con el
nombre index.htm, Dreamweaver la coger por defecto.
Estas tres caractersticas son las imprescindibles para definir un sitio local.
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.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que
seleccionar la pestaa Bsicas, en vez de la pestaa Avanzadas.
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la
opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y
pulsar sobre el botn Listo.
Tambin podemos utilizar el panel Archivos, buscar y seleccionar
el sitio a abrir en el men desplegable de la pestaa Archivos.

Vistas del sitio

Es posible visualizar un sitio en el panel Archivos o en una ventana.

El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos.
Tambin pulsando F8.
Para cambiar de una vista a otra hay que pulsar sobre el botn que aparece
en la parte superior del panel y de la ventana.
Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor
remoto de prueba o el mapa del sitio.
En esta imagen se visualizan el mapa del sitio y el sitio local.
En este caso los documentos prueba1.htm y prueba2.htm cuelgan del
documento indice.htm, ya que ste ha sido definido como pgina principal del
sitio y contiene vnculos hacia los otros dos.

Si
los
archivos se mueven de una carpeta a otra, o se cambian de nombre, desde
fuera de Dreamweaver, las pginas no se mostrarn correctamente: no
aparecern imgenes, no funcionarn enlaces, etc.
En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a
travs del sitio, es posible actualizar automticamente las pginas para que si
hacen referencia a un objeto que ha cambiado, despus no se produzcan
problemas al visualizarlas.
Al modificar algn objeto que es referenciado por algn otro documento, se
muestra una ventana similar a esta, que indica los documentos que hacen

referencia a dicho objeto, y que pueden ser actualizados para que no se

produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botn Actualizar.

Subir Archivos al servidor

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer
pruebas) debers subir los archivos al sitio que hayas contratado o conseguido
gratuitamente.
Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que
debers ir subiendo uno a uno cada archivo y creando las carpetas t mismo.
Este proceso puede hacerse muy largo y debes tener mucho cuidado en
mantener la estructura tal y como se encuentra en tu carpeta del disco duro.
Sino los enlaces no funcionarn correctamente y es posible que algunas
imgenes no se muestren.
Para subir los archivos via web debers seguir las instrucciones que te
proporcionar tu servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en
algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.
Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que
en el Explorador de Windows) y, obviamente, nos es mucho ms til para subir
los archivos.
Uno de los programas gratuitos (si no es con fines comerciales) ms utilizados
es SmartFTP, desde su pgina web podrs descargarte el programa y su
traduccin al espaol.
Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo
Navegador Remoto para crear una nueva cuenta FTP.

Aqu debers introducir los datos que te facilit el servidor donde vas a alojar
tus pginas: Host, Usuario y Contrasea.
Rellena los campos y haz clic en OK. Se conectar automticamente y podrs
ver una carpeta donde podrs copiar los archivos que hayas creado.
Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un
navegador de los archivos de tu disco duro. Busca la carpeta que definiste
como Sitio local y copia todos los archivos que quieras subir seleccionndolos
a la vez y arrastrndolos a la carpeta (remota) del servidor.

Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio
sigan un mismo formato, es decir, que tengan el mismo color de fondo, de
fuente, etc.
Puede definirse el formato de cada una de las pginas a travs del cuadro de
dilogo Propiedades de la pgina.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinacin de teclas Ctrl+J.
Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de la pgina.
Aparecer al final del men contextual la opcin Propiedades de la pgina. Se
abrir el cuadro de dilogo siguiente:

Las

propiedades estn organizadas en categoras.

En la categora Aspecto, como ves en la imagen anterior, encontramos las
propiedades:
Imagen de fondo: permite especificar una imagen de fondo para el documento.
Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de
fondo tener en cuenta que segn los colores de la imagen ser necesario
establecer unos u otros colores para el texto, as como que no es conveniente
tener un gif animado como fondo.
Color de 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.
Tamao: permite definir el tamao de la letra.
Color del texto: es el color de la fuente.
Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes
izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que
el ancho y el alto de mrgen solo funcionan para Netscape Navigator. Ninguno
de estos mrgenes aparece en la ventana de documento de Dreamweaver,
solo se mostrarn en los navegadores.
En la categora Ttulo/Codificacin encontramos la propiedad:
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del
navegador y de la ventana de documento de Dreamweaver.
En la categora Vnculos encontramos las propiedades:

Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir

entre el texto normal y los vnculos que sirven de enlace a otras pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir
al usuario si unos vnculos ya han sido visitados o no.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo
asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo
de estilo por ejemplo para que no aparezca subrayado.
En la categora Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento,
pero que slo se mostrar en la ventana de documento de Dreamweaver, y
nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la
que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.
Hay que tener cuidado de no crear pginas que tarden mucho tiempo en
cargarse en el navegador. Para ver cmo comprobar el tamao de los
documentos, pulsa aqu .
Los colores
Para asignar colores es posible desplegar una paleta de colores como sta. Al
seleccionar un color de estas paletas, se muestra el valor hexadecimal del
color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores
seguros para web. stos son los colores que se muestran de la misma forma
en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows
como en Macintosh.
Tambin es posible personalizar los colores a travs del botn de la parte
superior de la paleta.

Los colores pueden asignarse a travs de los botones: .

Estos botones suelen aparecer en el inspector de propiedades de muchos
objetos, y tambin en algunas ventanas que permiten especificar propiedades
(sobre todo propiedades de texto, fondo, o tablas), como es el caso de la
ventana de Propiedades de la pgina, que tienes ms arriba.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el
recuadro gris , lo que hace que se despliegue la paleta de colores. El otro
modo es introduciendo directamente el nmero hexadecimal del color en el
recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara
el color azul con valor #3399FF, el botn quedara del siguiente modo: .

Configurar un Sitio Remoto

Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las
opciones y que Dreamweaver se pueda conectar con nuestro servidor.
Para ello deberemos modificar la especificacin que creamos en su da del sitio
con el que estamos trabajando.
As que haz clic en el men Sitio y selecciona Administrar sitios.

Ahora en el desplegable Conectar usando selecciona el mtodo de acceso que

deber utilizar Dreamweaver para conectarse con el servidor. Como ya hemos
dicho nosotros explicaremos la opcin FTP.
Se mostrarn las siguientes opciones:

El Nombre de servidor es el nombre que le podemos asignar para

identificarlo.
Aqu debers rellenar los datos que te facilit el servicio de hosting que
contrataste. Si no recuerdas los datos o has perdido el correo electrnico que
seguramente te enviaron, pdeles de nuevo la informacin.
Los datos que necesitas son los siguientes:

 Direccin FTP o host es la direccin a la que se dirigir Dreamweaver para

conectarse a tu servidor ser del tipo ftp.servidor.com o tambin podrs
encontrar algunas que estn formadas en forma de direccin IP (como por
ejemplo, 192.186.1.1)
En Nombre de usuario y Contrasea escribe el nombre de usuario y el
password para poder conectar con el servidor. Marca la casilla Guardar si
quieres que el programa recuerde la contrasea.
Una vez introducidos estos datos puedes pulsar el botn Prueba para ver si
son correctos y Dreamweaver puede crear una conexin con el servidor
remoto.
En el campo Directorio raz podremos establecer una carpeta contenida en el
servidor donde queramos subir las pginas. Por ejemplo, es comn que por
FTP podamos acceder a muchas carpetas del servidor, pero hay una en
concreto en la que hemos de ubicar las pginas. Imagina que dentro de la
estructura de carpetas del servidor remoto tienes una que se llama pagina y
dentro de esta otra que se llame principal. Podramos indicar la ruta
pagina/principal para que los archivos se subiesen directamente a esa
ubicacin.
En el campo URL Web podemos introducir la direccin web de la raz del sitio,
y as probar nuestras pginas dinmicas.

El panel Archivos
Desde el panel Archivos seremos capaces de
controlar nuestro sitio local y remoto de forma fcil
y rpida.
En este apartado veremos qu pasos debemos
seguir para completar unas cuantas acciones que
nos sern bastante tiles.
A primera vista el panel Archivos muestra este
aspecto:
Su uso es bastante sencillo.
Observa los dos desplegables de la
parte superior.
El primero te permite seleccionar el sitio con el que estamos trabajando. El
segundo te permite cambiar la vista de ese sitio.

Esta ltima opcin es muy til para ver el contenido que se encuentra
subido en Internet. Una vez hayas configurado las opciones del Servidor
Remotopodrs desplegar esta opcin y seleccionar Vista remota, se
mostrarn todos los archivos que en ese momento se encuentran en el
servidor.
Ahora veremos para qu sirven los botones:
El botn Conectar
te permitir establecer una conexin con el
servidor. De forma predeterminada Dreamweaver se desconecta del servidor
cada 30 minutos.
El botn Actualizar
actualiza las listas de las vistas local y remota.
As podrs ver el contenido exacto en cada momento de cada uno de los
sitios, se utiliza sobre todo cuando varias personas tienen acceso al sitio
remoto para cambiar las pginas.
Utiliza el botn Obtener
para descargar al servidor local archivos que
hayas seleccionado en el panel Archivos en la vista remota. Estos archivos
se copiarn en tu sitio local, y en caso de ya existir se sobreescribirn.
El botn Colocar
acta de forma contraria. Sube los archivos
seleccionados en la vista local al servidor, se copiarn y si existen se
sobreescribirn.

Luego los dos siguientes botones podrn ser utilizados si has activado
la Proteccin del sitio en el cuadro de dilogo de opciones Avanzadas al
configurar el sitio remoto.
Utiliza el botn Proteger
para realizar la accin anterior
de Obtener pero protegiendo el archivo que se encuentra en el servidor
convirtindolo en slo lectura. De esta forma si alguien con acceso al servidor
intenta modificar el archivo le ser imposible hasta que lo desprotejas.

Del mismo modo, el botn Desproteger

acta del mismo modo que
el botn Colocar pero cuando sube el archivo al servidor lo desprotege para
que pueda ser modificado por otras personas.
Sincronizar Sitios
sincronizar
sta es una de las opciones ms tiles en cuanto a Sitios Remotos.
Esta opcin permite hacer un estudio de los archivos situados en el sitio local y
remoto y establecer el modo en el que se debern copiar, borrar y sobreescribir los
archivos para conseguir un objetivo: al final de la sincronizacin, los archivos en el
sitio remoto y el sitio local deben ser iguales.
Para realizar una sincronizacin haz clic derecho sobre cualquier zona en el panel
Archivos y selecciona la opcin Sincronizar....

ste es el paso ms importante en

la sincronizacin, pues decidiremos
de qu modo se va a realizar.

 En el desplegable Sincronizar: seleccionaremos una de las dos opciones,

Archivos locales seleccionados solamente o Todo el sitio. Dependiendo de
qu opcin elijas se copiarn slo unos archivos o todos los que forman el
sitio.
En el desplegable Direccin: estableceremos las pautas que se deben
seguir durante la sincronizacin.
Si seleccionas Colocar archivos ms nuevos en remoto cuando se
comparen ambos sitios, se sobrescribirn aquellos en el sitio remoto que
tengan una fecha de modificacin menor a la que exista en el local. De esta
forma copiars en direccin Local a Remoto.
Si seleccionas la opcin Obtener archivos ms nuevos de remoto se
copiarn aquellos archivos que se encuentren en el sitio remoto que tengan
una fecha de modificacin mayor que la del local. En este caso estaremos
copiando en direccin Remoto a Local.
La ltima opcin, Obtener y colocar archivos ms nuevos, se refiere a la
sincronizacin como tal. Evala los archivos en el sitio remoto y local y
copia los ms nuevos en el que contiene los ms viejos. En este caso la
Sincronizacin es Bidireccional.
Marca la opcin Eliminar archivos remotos no existentes en la unidad local si
quieres que los archivos que se encuentren en el remoto que no estn en el local
se borren.
Al pulsar Vista previa... aparece un listado con los cambios que se van a realizar,
slo nos quedar aceptarlo.