ADOBE DREAMWEAVER

Adobe Dreamweaver es una aplicacin en programa de estudio (basada en la

forma de estudio de Adobe Flash) que est destinada a la construccin, diseo
y edicin de sitios, vdeos y aplicaciones Web basados en estndares. Creado
inicialmente por Macromedia (actualmente producido por Adobe Systems) es
uno de los programas ms utilizados en el sector del diseo y la programacin
web por sus funcionalidades, su integracin con otras herramientas como Adobe
Flash y, recientemente, por su soporte de los estndares del World Wide Web
Consortium.

Sus principales competidores son Microsoft Expression Web y BlueGriffon (que

es de cdigo abierto) y tiene soporte tanto para edicin de imgenes como para
animacin a travs de su integracin con otras. Hasta la versin MX, fue
duramente criticado por su escaso soporte de los estndares de la web, ya que
el cdigo que generaba era con frecuencia slo vlido para Internet Explorer y
no validaba como HTML estndar. Esto se ha ido corrigiendo en las versiones
recientes.

Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de

Macromedia por parte de Adobe. Las letras CS significan Creative Suite

La gran ventaja de este editor sobre otros es su gran poder de ampliacin y

personalizacin, puesto que en este programa sus rutinas (como la de insertar
un hipervnculo, una imagen o aadir un comportamiento) estn hechas en
Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace
que los archivos del programa no sean instrucciones de C++ sino rutinas de
Javascript que hace que sea un programa muy fluido y todo ello permite que
programadores y editores web hagan extensiones para su programa y lo pongan
a su gusto.

Las versiones originales de la aplicacin se utilizaban como simples editores

WYSIWYG. Sin embargo, versiones ms recientes soportan otras tecnologas
web como CSS, JavaScript y algunos frameworks del lado servidor.

Dreamweaver ha tenido un gran xito desde finales de los aos 1990 y

actualmente mantiene el 90% del mercado de editores HTML. Esta aplicacin
est disponible tanto para la plataforma MAC como para Windows, aunque
tambin se puede ejecutar en plataformas basadas en UNIX utilizando
programas que implementan las API's de Windows, tipo Wine.

Como editor WYSIWYG que es, Dreamweaver permite ocultar el cdigo HTML
de cara al usuario, haciendo posible que alguien no entendido pueda crear
pginas y sitios web fcilmente sin necesidad de escribir cdigo.

No obstante, Adobe ha aumentado el soporte CSS y otras maneras de disear

pginas sin tablas en versiones posteriores de la aplicacin, haciendo que se
reduzca el exceso de cdigo.
Dreamweaver permite al usuario utilizar la mayora de los navegadores Web
instalados en su ordenador para previsualizar las pginas web. Tambin dispone
de herramientas de administracin de sitios dirigidas a principiantes como, por
ejemplo, la habilidad de encontrar y reemplazar lneas de texto y cdigo por
cualquier tipo de parmetro especificado, hasta el sitio web completo. El panel
de comportamientos tambin permite crear JavaScript bsico sin conocimientos
de cdigo.

Con la llegada de la versin MX, Macromedia incorpor herramientas de creacin

de contenido dinmico en Dreamweaver. En lo fundamental de las herramientas
HTML WYSIWYG, tambin permite la conexin a Bases de Datos como MySQL
y Microsoft Access, para filtrar y mostrar el contenido utilizando tecnologa de
script como, por ejemplo, ASP, ASP.NET, ColdFusion, JSP (JavaServer Pages)
y PHP sin necesidad de tener experiencia previa en programacin.

Tambin podra decirse que, para un diseo ms rpido y a la vez fcil, podra
complementarse con Fireworks en donde se podra disear un men u otras
creaciones de imgenes (gif web, gif websnap, gif adaptable, jpeg calidad
superior, jpeg archivo ms pequeo, gif animado websnap) para un sitio web y
despus exportar la imagen creada y as utilizarla como una sola en donde ya
llevar los vnculos para dicho sitio.

Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del
men Formato, y a travs del inspector de propiedades. Vamos a ver las
posibilidades que se nos ofrecen a travs del inspector de propiedades, que
estn clasificadas en dos categoras HTML y CSS.

Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por
defecto en el navegador. Pero al final, podremos personalizarlas con CSS para
que se vean exactamente como queramos.
 Formato:
Permite seleccionar un formato de prrafo ya definido para HTML, que
puede ser encabezado, prrafo o formato predeterminado. Los
encabezados se utilizan para establecer ttulos dentro de un documento.
El formato predeterminado sirve para que el texto aparezca tal cual ha
sido escrito, por ejemplo, si entre dos palabras se introducen varios
espacios solo se considera uno, pero al establecer el formato
predeterminado se respetar que hayan varios espacios en lugar de solo
uno. El texto normal, debera ir siempre en prrafos, salvo que est en
otros elementos, como tablas o listas.
Es importante emplear correctamente los encabezados, ya que se
organizar mejor el contenido de nuestra web, y es importante de cara a
buscadores y visitantes. No te preocupes por cmo se muestran esos
encabezados, recuerda que siempre podremos personalizarlo.
Estilo:
El botn B encierra el texto en una etiqueta <strong></strong>, que por
defecto se muestra en negrita. El botn I, lo encierra entre <em></em>,
que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado ms habituales, pero existen otras
que encontramos a travs del men Texto. Por ejemplo, subrayar el texto.
Esta opcin no aparece en el panel 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.
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.

Introduccin

Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser

pulsado lleva de una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta
<a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrs
observarlo en la barra de estado:

5.2. Tipos de referencia

Existen diferentes clases de rutas de acceso a la hora de definir los vnculos.

Estas referencias no se limitan a los enlaces, se comportarn igual cuando
indiquemos la ubicacin de una imagen, de un archivo Flash, de la hoja de estilo,
etc.

Referencia absoluta:

Conduce al sitio en el que se encuentra el documento utilizando la ruta completa

del archivo, incluyendo el protocolo http://.

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

http://www.misitio.com/seccion2/pagina1.html.

La referencia absoluta es independiente de la ubicacin de la pgina que

contiene el enlace, y ser vlida siempre que no cambie la ubicacin del archivo
enlazado. Es la opcin obligatoria si pretendemos enlazar a archivos fuera de
nuestro sitio (enlaces externos).

Referencia relativa al documento (por defecto):

La ubicacin del archivo enlazado se toma en relacin con la ubicacin del la

pgina. Es decir, partimos de la carpeta en la que se encuentra el documento.

Si queremos enlazar con una pgina o archivo dentro de la misma carpeta, no

tenemos ms que utilizar su nombre. Por ejemplo, pagina2.htm.

Si est en una subcarpeta de la pgina actual, no tenemos ms que indicar el

nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por
ejemplo imagenes/miimagen.gif.

Si queremos referirnos a carpetas que estn por encima del nivel donde nos
encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente direccin

http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos
mostrar una imagen que se encuentra en la carpeta
http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos
hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.

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

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

nivel y luego nos movemos dentro de la carpeta secciones para mostrar el
archivo seccion1.html.

Esta opcin depende de la ubicacin del archivo, y pueden no funcionar

correctamente si alteramos la estructura de carpetas.

Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual para

enlazar archivos dentro del sitio.

Las imgenes son un aspecto muy importante de la web. Ya sea como

complementos a la informacin o parte del diseo, la hacen mucho ms atractiva
a ojos del visitante. No obstante, no conviene abusar, ya que aumentarn mucho
el tamao final de la web.

Existen una serie de formatos de imagen ms recomendables que otros para ser
introducidos en una pgina web. Esta informacin puedes consultarla aqu .

6.2. Insertar una imagen

Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen.
Despus de esto, ya es posible seleccionar una imagen a travs de la nueva
ventana. Cuando te acostumbres, te ser ms cmodo acceder con la
combinacin de teclas Ctrl + Alt + I.
En Relativa a es posible especificar si la imagen ser relativa al documento o a
la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si
cambiamos la pgina de carpeta, lo habitual es cambiar tambin sus imgenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vnculo.

La ruta en la que se encuentra la imagen aparecer representada de una u otra

forma en el campo URL de la ventana y en el campo Origen del inspector de
propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raz
del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio)
se encuentran la carpeta imagenes y el documento en el que deseamos insertar
la imagen. Dicha imagen, 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.

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

su nombre, en Dreamweaver aparecer as indicando que el enlace al

archivo est roto.

En ese caso, la imagen que aparecer en el navegador ser similar a sta:

Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o
el contenido del campo Alt del inspector de propiedades, que explicaremos a
continuacin.

Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla.
En la nueva ventana habr que especificar el nmero de Filas y Columnas que
tendr la tabla, as como el Ancho de la tabla.

El Ancho puede ser definido como Pxeles o como Porcentaje. La diferencia de

uno y otro es que el ancho en Pxeles es siempre el mismo, independientemente
del tamao de la ventana del navegador en la que se visualice la pgina, en
cambio, el ancho en Porcentaje indica el porcentaje de la pgina o del elemento
contenedor) y se ajustar al tamao de la ventana del navegador, esto permite
que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de
pantalla.

Grosor del Borde indica el grosor del borde de la tabla en pxeles, por defecto se
le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrar borde.

Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas

y los bordes de stas.

Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.
Tambin se puede establecer si se quiere un encabezado para la tabla, por
ejemplo para indicar el contenido de filas o columnas. Aunque podramos lograr
el mismo diseo con celdas normales y estilos CSS, es recomendable utilizar
encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los
lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de
los mismos a mantener un seguimiento de la informacin de la tabla.

Si queremos incluir un ttulo, lo indicamos en Texto, el ttulo aparecer fuera de

la tabla.

Los formularios se utilizan para recoger datos de los usuarios. Nos pueden servir
para realizar un pedido en una tienda virtual, crear una encuesta, conocer las
opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se
arrancar un programa que recibir los datos y har el tratamiento
correspondiente.

Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el

formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para
ello se necesitan nociones de programacin, ya sea en PHP, en JavaScript o en
otro lenguaje de programacin, y esto no entra en los objetivos del curso.

A la derecha tienes un ejemplo de formulario simple.

Un formulario est formado, entre otras cosas, por etiquetas, campos de texto,
mens desplegables, y botones.

9.2. Elementos de formulario

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

A travs de esta opcin se puede acceder a la lista de todos los objetos de

formulario que pueden ser insertados en la pgina.

Vamos a ver uno por uno algunos de los distintos elementos que pueden formar
parte de un formulario, as como algunas de sus propiedades. Antes de insertar
estos elementos debemos crear el propio formulario tal y como veremos en el
siguiente punto.

Campo de texto y rea de texto

Permiten introducir texto. El Campo de texto solo permite al usuario escribir una
lnea, mientras que el rea de texto permite escribir varias.

Se puede pasar de Campo de texto a rea de texto a travs del inspector de

propiedades, marcando la opcin Una lnea o Multi lnea respectivamente.

Tambin es posible definirlo como Contrasea es como el campo de texto pero

las letras que va tecleando el usuario se sustituyen por un carcter como podrs
ver en la imagen siguiente.

A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir
en ellos para ver su funcionamiento.

A travs del inspector de propiedades es posible asignar tambin el Ancho del

cuadro de texto, el nmero mximo de lneas o caracteres, y el valor inicial del
cuadro.

Botn

Es el botn tradicional de Windows. El botn puede tener asignadas tres

opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del
formulario), o Ninguna (para poder asignarle un comportamiento diferente de los
dos anteriores).

Tambin es posible cambiar el texto del botn, a travs de la propiedad Valor del
inspector de propiedades.

Como mnimo tiene que haber un botn del tipo Enviar formulario, imprescindible
para enviar los datos. Adems le suele acompaar un botn Restablecer
formulario para hacer reset en el caso de que el usuario quiera comenzar de
nuevo a rellenarlo.

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.

Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las

pginas basadas en ella. Esto nos puede ahorrar mucho trabajo.

Las plantillas son archivos con la extensin DWT que se guardan en el sitio web,
dentro de una carpeta llamada Templates.

Por supuesto, las plantillas las podremos usar siempre que sigamos trabajando
con Dreamweaver.

11.2. Crear plantillas

Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente.

Una forma de crear una plantilla desde cero es a travs del panel Archivos, que
se puede abrir a travs del men Ventana, opcin Activos.
Una vez abierto el panel hay que seleccionar el botn , para poder trabajar
con las plantillas.

Los botones inferiores del panel Activos son similares a los del panel
Estilos CSS.

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

Para crear una nueva plantilla hay que pulsar sobre el botn . Si el botn est
desactivado, pulsa con el botn derecho del ratn sobre el rea de plantilla y
elige Nueva Plantilla).

Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas,

al que es posible cambiarle el Nombre pulsando previamente sobre l.

Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn .

Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates,

que se crea automticamente.

Para crear una plantilla a partir de un archivo existente es necesario abrir dicho
archivo, y despus guardarlo como plantilla a travs del men Archivo, opcin
Guardar como plantilla.

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

En ella es necesario especificar el nombre con el que va a ser guardada la

plantilla, a travs del campo Guardar como, y elegir, de entre la lista de sitios, el
Sitio: en el que se va a guardar.
Al guardar la plantilla la pgina cambia de carpeta, a Templates, como ya hemos
dicho. Si contena enlaces o imgenes se nos ofrecer la opcin de Actualizar
vnculos. Si lo hacemos, la plantilla se ver con normalidad y podremos
emplearla para crear pginas en cualquier carpeta. Si no lo hacemos, la plantilla
se mostrar sin las imgenes u hojas de estilo, ya que la ruta no ser la correcta,
y slo nos servir para crear pginas en la misma carpeta que el archivo desde
el que creamos la plantilla.

Ahora solo nos quedara cambiar los elementos variables por regiones editables

Etiquetas

Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y
fin de cada elemento de la pgina Web.

En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el
cdigo HTML de una pgina para darle un ttulo. Consista simplemente en
escribir el ttulo deseado entre las etiquetas <title> y </title>.

Las etiquetas consisten en poner un mismo comando entre los smbolos < y >.
La primera etiqueta indica inicio, y la segunda, que incluye el smbolo /, indica
final y se suele denominar etiqueta de cierre.

Las etiquetas disponen de atributos que permiten definir caractersticas del

elemento sobre el que actan, incluyendo cierto cdigo dentro de la etiqueta.

Por ejemplo, un prrafo se inserta entre las etiquetas <p> y </p>, pero es posible
cambiar sus caractersticas predeterminadas, como puede ser asignarle una
clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habra que aadir
el atributo y su valor, quedando <p class="miclase"> y </p>.

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

Dreamweaver inserta automticamente las etiquetas necesarias para construir

la pgina con la apariencia y contenido definidos en el editor grfico, pero
tambin ofrece otras posibilidades para trabajar directamente sobre el cdigo.
Las capas no son ms que unos recuadros, elementos de bloque, destinados a
contener y agrupar otros elementos, igual que los prrafos son elementos de
bloque destinados a contener texto.

sta es una capa con borde verde

Las capas, tambin llamadas layers o divisiones, se crean con la etiqueta

<div></div>.

Al ser elementos contenedores, son muy tiles para organizar nuestros

elementos. Si esto lo combinamos con el posicionamiento absoluto, una
propiedad CSS que nos permite colocar los elementos donde queramos en
nuestra pgina, obtenemos los elementos ideales para maquetar nuestra pgina,
es decir, distribuir el contenido en bloques.

En la imagen de arriba vemos varias capas azules distribuidas sobre una capa
gris. Si estrechas o agrandas la ventana del navegador, vers que pueden llegar
a solaparse.

Cuando convertimos una capa en un elemento con posicin absoluta (elemento

PA), se muestra as en Dreamweaver:

Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre
el recuadro blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin.

Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y

arrastrndolos hasta conseguir el tamao deseado.

Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes,

animaciones flash, y todos los elementos que puede contener un documento
HTML.

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

elimina tambin la capa.

Las capas, combinadas con JavaScript pueden dotar a una pgina de verdadero
dinamismo.
En temas anteriores vimos cmo funcionaba el panel Estilos CSS y cmo crear
hojas de estilos para poder utilizarlas en tus pginas web.

Hasta ahora hemos ido empleando las propiedades CSS ms comunes, aunque
no las hemos explicado detalladamente. En esta unidad intentaremos explicar
mejor qu es CSS.

A lo largo del curso, hemos orientado nuestras pginas para que sigan los
fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium). Esta
metodologa exige que el archivo HTML solamente muestre datos organizados y
estructurados con etiquetas de marcacin HTML, mientras que la parte de
formato recaera sobre los estilos CSS nica y exclusivamente. Ya que aunque
no las hemos empleados, existen etiquetas (como <font> o <b>) y atributos
(como bgcolor) que nos permiten definir el aspecto del elemento, pero sin
emplear CSS.

Para poder lograr esto deberemos dominar en profundidad CSS para poder
posicionar, modificar o adornar la pgina de un modo eficiente.

En este tema aprenderemos controles que nos ayudarn a presentar el texto e

imgenes de nuestras pginas de una forma mucho ms limpia y cmoda.

17.1. Aplicar estilos CSS

Hasta ahora, si has entrado un poco en el cdigo de las pginas, habrs visto
etiquetas que introducan estilos CSS en ellas.

Por defecto, cuando crebamos una < Nueva regla de estilo > desde el inspector
de propiedades, se defina la regla nicamente para la pgina actual. Esto
generaba un cdigo similar al siguiente en el <head> de la pgina (por supuesto,
cambiando las propiedades segn el caso).

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

//->
</style>

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

estilos son declarados en la cabecera (<head>...</head>), entre las etiquetas
<style type="text/css"> y </style>.
La base del CSS es lograr un estilo homogneo y fcil de modificar para todo
nuestro sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada
pgina. En nuestros sitios de ejemplo, hemos optado por exportar los estilo a
una hojas de estilos (un archivo de extensin .css). Esta opcin nos resultaba
mucho mejor, ya que nos permite centralizar el estilo en un slo archivo que
aplicaremos a todas las pginas.

Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja

directamente. En este caso deberemos crear un archivo CSS (Archivo Nuevo
y seleccionando CSS). En l escribiremos las reglas de estilo del con la misma
sintaxis que hemos visto ms arriba pero eliminado el componente HTML. Este
sera el contenido de nuestra hoja definiendo el mismo estilo que arriba:

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

Las dos primeras lneas generadas por Dreamweaver no son imprescindibles.

Este cdigo est guardado en un archivo con extensin .css (por ejemplo,
miestilo.css). Luego deberamos vincularlo en la pgina HTML utilizando la
etiqueta <link /> dentro del <head> de la pgina:

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

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

<p style="color: red; font-size: 30px;">Este texto est en rojo y con un tamao de
30 pxeles</p>

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

tener que buscarlo por el texto y modificndolo uno a uno.

Una pgina puede contener todos estos tipos de estilos CSS, o incluso tener
varias hojas de estilo asociadas. Entonces cundo empleamos cada uno?
 Emplearemos hojas de estilos para todos los estilos comunes a las
pginas del sitio.
Emplearemos estilos incrustados en la pgina para los estilos que se
emplean en nicamente en esa pgina, y que ya no seran tiles si
borrsemos la pgina. Por ejemplo, para definir el la apariencia de una
tabla en concreto.
Emplearemos estilos en lnea cuando el estilo solo tenga sentido por estar
en esa posicin en concreto, y no se suela repetir en el sitio. Por ejemplo,
si queremos dar ms margen a un prrafo por tener una imagen en
concreto, pero que no tendra sentido si cambisemos la imagen.

La organizacin de los estilos debes decidirla t. Pero recuerda que cuanto

menos cdigo repitas en tus pginas, ms fcil ser luego de modificar o
exportar.

Maquetar una pgina web

La maquetacin es la distribucin de los elementos en nuestra pgina. Piensa

en una pgina web cualquiera. Seguro que distingues algunos elementos
claramente diferenciados, como un encabezado, columnas, y un pie de pgina.

Hace unos aos, la maquetacin de las pginas web se realizaba utilizando

tablas (<table>). Una vez entendido este proceso poda resultar sencillo, aunque
si no se dominaban las tablas, poda convertirse en algo tedioso. El problema de
las tablas es que generaban un pgina muy encorsetada, y el cdigo se volva
complejo de entender. Adems, algunos buscadores encontraban problemas al
analizar la estructura de la pgina.

Actualmente, la maquetacin con tablas ha cado en desuso, y se realiza

utilizando capas (<div>), tambin llamadas divisiones o contenedores. La
colocacin de las capas en la pgina se realiza a travs de CSS. Esto permite,
por ejemplo, que podamos pasar de un diseo con un men lateral a otro con el
men en la parte superior, slo cambiando la hoja de estilos.

En esta unidad veremos las tcnicas de maquetacin ms comunes, aunque hay

que decir que existen diversas formas de conseguir una misma maquetacin.

Como hemos dicho, emplearemos sobre todo etiquetas del tipo (<div>). Para
crear un div alrededor de contenido ya existente desde Dreamweaver,
seleccionamos la parte de la pgina y en el men Insertar, opcin Objeto de
diseo, elegimos Etiqueta Div.
Tambin veremos que Dreamweaver nos ofrece una serie de plantillas de
maquetacin, de las que podremos partir, adaptndolas a nuestras necesidades.

18.2. Tamao

Por lo general, la maquetacin se realiza sobre elementos en bloque.

Normalmente divisiones, pero tambin lo podemos hacer con prrafos, listas, o
con el propio body. Por defecto los elementos de bloque ocupan todo el ancho
del elemento que lo contiene, y su alto se ajusta al contenido.

Cualquier elemento HTML de bloque, tiene dos atributos que pueden definir su
tamao: ancho (width) y alto (height).

Los valores para estas medidas, pueden ser expresados en las medidas
habituales:

Tamaos absolutos, utilizando px, cm, etc...

Tamaos relativos al elemento que lo contiene, utilizando porcentajes (%).
Tamaos relativos a la fuente, utilizando em.
El valor auto es el valor por defecto. Por ejemplo, un prrafo, por defecto,
tienen un ancho del 100% y un alto ajustado al contenido.

En algunos elementos, como los Divs PA, nos permiten cambiar su tamao
desde el Inspector de propiedades. Pero en la mayora, tendremos que hacerlo
desde el cdigo o desde las propiedades CSS de Cuadro y Posicionamiento.
Por ejemplo, hemos definido el tamao para el siguiente prrafo:

<p style="width:200px; height:100px; border: red 2px solid">

Por defecto, al no ocupar todo el ancho, el elemento queda alineado a la

izquierda, como en el ejemplo anterior. Una forma sencilla de centrarlo es
dndole al margen (margin) derecho e izquierdo el valor auto. Recuerda que las
propiedades de margen se encuentran tambin con las propiedades de Cuadro.

<p style="width:200px; height:100px; border: red 2px solid; margin: auto;">

Nota: En la vista de Diseo de Dreamweaver, esta propiedad no se muestra

correctamente.

Con slo esto, podramos maquetar una pgina web que contenga una columna
central, con un ancho fijo o relativo, centrada en la ventana del navegador.

Para hacerlo, encerramos todo el contenido del body en una capa, a la que le
asignamos, como mnimo, estas reglas CSS:

#container {
width: 960px;
margin: 0 auto;
}

Puedes ver un ejemplo de una pgina muy simple maquetada de esta forma
aqu.