Principales

conceptos de
Dreamweaver
Historia de Dreamweaver 14
Orden y nombre de los archivos 14
Mens y barras de herramientas 15
Men principal 15
Barra de herramientas horizontal 16
rea de trabajo 17
Barra de propiedades 18
Barra de ventanas 19
Propiedades de pgina
y atributos meta 20
Propiedades de pgina 20
Atributos meta 21
Tablas y celdas 21
Tablas 21
Celdas 22
Marcos 23
Plantillas 25
Hojas de estilo/CSS 27
Insercin de imgenes y vnculos 28
Insercin de imgenes 28
Vnculos 30
Resumen 31
Actividades 32
Captulo 1
Antes de comenzar a crear nuestro
proyecto web, es muy importante
repasar ciertos conocimientos
fundamentales de Dreamweaver.
De esta manera, tendremos
un punto de partida comn
para poder elaborar el sitio y sus
componentes. Adems, nunca viene
mal un poco de prctica, sobre todo
con este tipo de programas.
Dreamweaver y fireworks
SERVICIO DE ATENCIN AL LECTOR: usershop@redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 13
HISTORIA DE DREAMWEAVER
Veamos un poco la historia del programa para saber con qu tipo de herramienta tra-
bajaremos. Dreamweaver es un producto de la empresa desarrolladora de software
Macromedia, que naci en 1992 tras la fusin de Authorware Inc. (creadora de
Authorware) y Macro-Mind Paracomp (responsable de Director). El primer pro-
ducto de esta nueva compaa fue Shockwave, un plugin para los navegadores que
permita ver animaciones hechas en Director. A causa del xito que tuvo, la empre-
sa decidi que deba expandirse ms en el sector web y multimedia.
Con esta expansin como objetivo primario, en 1996, Macromedia realiz dos
grandes adquisiciones. La primera fue la empresa FutureWave Software, crea-
dora del FutureSplash, al que Macromedia rebautiz como Flash. La segunda
fue iBand Software, creadora de Backstage, un programa de edicin de HTML
al que Macromedia rebautiz, con algunos cambios, como Dreamweaver, del que
lanz su primera versin en 1997. A partir de 1998, Macromedia comenz a de-
sarrollar una versin del programa por ao, aproximadamente. En cada una de
ellas, agreg componentes clave para un mejor desarrollo de archivos HTML y de
otras extensiones (ASP, PHP, JPS, etctera). En el ao 2006, la empresa fue com-
prada por Adobe, quien absorbi completamente el nombre Macromedia. Por ello
es que la versin CS3 ya no es ms Macromedia, sino Adobe.
ORDEN Y NOMBRE DE LOS ARCHIVOS
Algo que tenemos que tener muy presente al trabajar con Dreamweaver es que de-
bemos ser ordenados. Si bien vamos a volver sobre el tema del orden y de la jerar-
quizacin en el Captulo 3, es importante recordarlo todo el tiempo, y ms que nada
al comienzo de nuestro proyecto. Toda la materia prima -textos, imgenes, infor-
macin- que usaremos para la creacin de nuestro sitio debe estar separada y guar-
dada correctamente en carpetas y subcarpetas. Siempre es preferible que nos exce-
damos en la cantidad de divisiones, a que nos falten.
Figura 1. Un modelo de cmo debe verse el interior de nuestra carpeta principal del sitio.
La cantidad de subcarpetas depender de la complejidad del proyecto.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
14 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 14
Tambin es muy importante el nombre de cada uno de los archivos que integren
nuestro proyecto. Es fundamental recordar que slo deben llevar minscula, no de-
ben tener tildes ni cualquier otro carcter tpico del idioma espaol, y no deben su-
perar la extensin de 25 caracteres. Esto se debe a que muchos servidores diferen-
cian entre maysculas y minsculas, adems de que desconocen caracteres como la
tilde y otros signos ajenos al ingls. Si colocamos en el servidor archivos mal nom-
brados, stos no se abrirn y aparecer un mensaje de error. Un dato fundamental:
el archivo de apertura de un sitio web se llama siempre index.html.
MENS Y BARRAS DE HERRAMIENTAS
Para un fin prctico dividiremos la interfaz de trabajo de Dreamweaver en cinco
reas. Esto nos ayudar a repasar mejor cada una de las partes y nos facilitar la pos-
terior referencia a lo largo del libro.
Men principal
Este es el men tpico de cualquier programa. Bsicamente, controla todo lo que se
ve y lo que no se ve. Desde aqu, podemos crear y guardar archivos, ocultar o mos-
trar barras de herramientas, manejar las propiedades de la pgina, colocar las pro-
piedades de las tablas e insertar objetos -imgenes, archivos, videos, etctera-, entre
varias otras cosas. En la siguiente Gua Visual, describiremos las opciones princi-
pales del men principal del Dreamweaver.
El men principal de Dreamweaver GUA VISUAL
Archivo: podremos encontrar opciones para crear, abrir y guardar archivos, adems,
tenemos las de importar, exportar y la de vista previa en el navegador.
Edicin: aqu veremos las diferentes posibilidades para cortar, pegar y copiar, junto
con las opciones de seleccin y de preferencias.
Ver: en este men, seleccionaremos las preferencias para achicar o maximizar la
visualizacin del documento, junto con las posibilidades para ver el cdigo HTML.
Mens y barras de herramientas
15 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 15
Insertar: desde aqu, podremos insertar: imgenes, tablas, archivos de Flash,
hipervnculos y etiquetas para formularios.
Modificar: con este men, podremos controlar propiedades de imgenes, tablas
y marcos, entre otros elementos de la pgina.
Texto: encontraremos las opciones para cambiar la alineacin, la fuente y el estilo
de los textos. Adems, podremos controlar y editar las hojas de estilo (CSS).
Comandos: desde este men, se pueden obtener extensiones para el Dreamweaver,
que son agregados extra para el programa.
Sitio: podremos crear y editar nuevos sitios con sus respectivos archivos.
Ventana: es un men muy importante, desde el que podremos visualizar y ocultar las
diferentes ventanas del programa con sus respectivas opciones.
Ayuda: encontraremos el men de ayuda del programa y su registro, entre otros.
Barra de herramientas horizontal
Es un men grfico que se encuentra justo debajo del men principal. Si bien todas
sus opciones tambin estn en ste ltimo, a la hora de trabajar resulta muy dinmi-
co y nos deja acceder rpidamente a herramientas de uso frecuente. Est compuesto
por lengetas que hacen referencia a diversas categoras y permiten, de forma rpida,
crear tablas, insertar imgenes, crear vnculos, crear formularios y varias otras cosas.
La barra de herramientas horizontal de Dreamweaver GUA VISUAL
Herramienta de hipervnculo: con ella podremos insertar un texto con hipervnculo.
Herramienta de vnculo de correo electrnico: nos posibilita insertar un texto con
vnculo de correo electrnico.
Herramienta de anclaje: nos sirve para insertar un vnculo ancla, para vincular
elementos dentro de un mismo archivo HTML.
Herramienta de tabla: con ella, podremos insertar una tabla con sus respectivas
filas y columnas.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
16 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 16
Herramienta de imgenes: nos posibilita insertar imgenes de diversos tipos y para
hacer mapa de estas ltimas.
Herramienta de media: la usaremos para insertar elementos de Flash y de otros
programas externos.
Herramienta de fecha: agrega la fecha del da en cualquier lugar de la pgina, tiene
diversas opciones de formato.
Herramienta de componentes de encabezado: permite colocar atributos meta al
archivo HTML. Son fundamentales para la indexacin en buscadores.
rea de trabajo
Es el espacio de trabajo, es decir, nuestra pgina web. Conviene pensar en l
como si fuera un documento de Word. Todo lo que coloquemos all ser visto
en un explorador de Internet. Tambin cuenta con algunas herramientas que,
entre otras cosas, permiten previsualizar la pgina en un navegador, insertar y
editar contenido del encabezado del documento y alternar entre las diferentes
vistas (Cdigo, Dividir y Diseo).
El rea de trabajo de Dreamweaver GUA VISUAL
Opcin vista cdigo: nos permite visualizar el cdigo HTML en el rea de trabajo.
Opcin vista dividir: posibilita ver el cdigo HTML en la parte superior del rea de
trabajo y la vista de diseo en la parte inferior.
Opcin vista diseo: habilita la visualizacin de la vista de diseo en el rea de
trabajo (opcin predeterminada).
Opcin ttulo de documento: coloca el ttulo de encabezado al documento.
Opcin para administrar archivos: nos permite subir o bajar archivos del servidor
remoto y tambin modificar sus propiedades de escritura y de proteccin.
Opcin de vista previa: permite previsualizar el archivo HTML en un navegador.
Opcin para actualizar vista de diseo: nos sirve para actualizar los cambios en la
vista de diseo que se realizan en la vista de cdigo HTML.
Mens y barras de herramientas
17 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 17
Opciones varias de visualizacin: nos permite visualizar diferentes herramientas de
diseo, como reglas, guas, cuadrculas y otras.
Opcin de ayudas visuales: nos sirve para activar o desactivar ayudas visuales
varias, como anchos de tabla, bordes de tabla, mapa de imgenes y dems.
Opcin para comprobar compatibilidad con navegadores: nos sirve para
comprobar si el archivo HTML puede ser visto por diferentes versiones y tipos de
navegadores sin problemas.
Barra de propiedades
Se encuentra en la parte inferior de Dreamweaver y nos mostrar las propiedades
del objeto que tengamos seleccionado en un determinado momento. Desde aqu,
podremos manipular las caractersticas de todos los componentes de nuestro sitio.
Nos permitir, entre otras cosas, cambiar el tipo, tamao y color de letra del texto,
agregar celdas a una tabla y escribir un vnculo.
La barra de propiedades de Dreamweaver GUA VISUAL
Opcin de formato: le otorga un formato predeterminado al texto.
Opcin de estilo: nos sirve para darle un estilo (hojas de estilo CSS) a un texto.
Opcin de fuente: selecciona el tipo de fuente que se desea usar. Tambin se
pueden agregar fuentes a la lista predeterminada.
Opcin de tamao: brinda el tamao deseado al texto.
Selector de color: selecciona el color del texto.
Opcin de negrita: aplica negrita al texto (bold).
Opcin de itlica: convierte en itlica el texto (Italic).
Opcin de alinear hacia la izquierda: sirve para alinear el texto hacia la izquierda.
Opcin de alinear hacia el centro: alinea el texto hacia el centro.
Opcin de alinear hacia la derecha: permite alinear el texto hacia la derecha.
Opcin de alinear justificado: justifica el texto.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
18 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 18
Opcin de lista sin ordenar: nos sirve para hacer una lista con puntos (crculos,
cuadrados, entre otros).
Opcin de lista ordenada: realiza una lista numerada.
Herramienta de insercin de vnculo: agrega un vnculo a un texto, imagen u otro
elemento que se pueda seleccionar del rea de trabajo.
Herramienta de destino de vnculo: especifica el destino de un vnculo (por
ejemplo, que se abra en una nueva ventana).
Opcin de propiedades de pgina: coloca las diferentes propiedades a la pgina (color
de fondo, color de vnculos, ttulo de encabezado, etctera).
Barra de ventanas
Se encuentra en el lado derecho del programa. Bsicamente, es un conjunto de varias
ventanas que podemos abrir, minimizar y ocultar para ayudarnos a controlar aspectos
estructurales del programa. Desde aqu tendremos la posibilidad, entre otras cosas, de
definir el sitio sobre el que estamos trabajando, ver el historial de cambios del docu-
mento, crear, modificar y eliminar las hojas de estilo, e insertar comportamientos.
La barra de ventanas de Dreamweaver GUA VISUAL
CSS: permite crear y editar las hojas de estilo que usemos en nuestro sitio.
Etiquetas: con esta ventana podemos ver en profundidad las propiedades de cada
elemento que compone nuestro sitio con tan slo seleccionarlo.
Archivos: nos posibilita manejar los diferentes sitios y archivos con los que
trabajamos, y tambin conectarnos a un servidor para subir nuestro sitio a la Web.
Mens y barras de herramientas
19 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 19
PROPIEDADES DE PGINA Y ATRIBUTOS META
Las propiedades de pgina y los atributos meta nos ayudan a controlar la base de
cada una de las pginas que conforman nuestro sitio. Es muy importante prestarles
la debida atencin ya que, de lo contrario, ciertos elementos pueden mostrarse de
manera inadecuada o no funcionar.
Propiedades de pgina
Permiten programar ciertos parmetros bsicos que tienen que ver con la apa-
riencia de las pginas web. Es importante recordar que estas propiedades deben
ser colocadas en cada pgina HTML, si bien luego se pueden copiar y pegar.
Fundamentalmente, permiten controlar el color de texto, el color de fondo, el
color de los vnculos (visitados, no visitados y activos), colocar una imagen de
fondo, configurar los distintos mrgenes y agregar un ttulo al documento (que
aparecer en la barra superior del navegador).
Figura 2. El men de propiedades de pgina abierto en la categora Aspecto.
Podemos observar las propiedades del texto predeterminado.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
20 www.redusers.com

Siempre conviene pensar palabras para no ms de tres categoras de bsqueda, de lo con-
trario, nuestro sitio puede quedar dentro de secciones que no pertenecen realmente a nues-
tro rubro. Mientras ms especficos seamos, lograremos un mejor posicionamiento y los
usuarios nos encontrarn ms fcilmente.
PENSAR LAS PALABRAS PARA LOS BUSCADORES
01.qxp 01/02/2010 12:38 p.m. Pgina 20
Atributos meta
Son atributos y variables de una pgina web que, en su mayora, son invisibles para los
usuarios o navegantes, pero muy importantes para los motores de bsqueda y para otros
programadores. Lo cierto es que mucha gente no les presta demasiada atencin y, en
realidad, son muy importantes. Si estn bien programados, ayudarn a que nuestro
sitio figure en una buena posicin dentro de la categora elegida en un buscador. Bsi-
camente, permiten insertar palabras y frases dentro de cada pgina, para que sean
ledas por los robots de los motores de bsqueda y luego aparezcan en los resultados.
TABLAS Y CELDAS
Dreamweaver tiene una regla de oro: todo el contenido de una pgina (textos, fo-
tos, etctera) va dentro de tablas, nada va suelto, salvo alguna pequea excepcin
que ser aclarada. Si uno aprende a manejarlas bien, maneja el 50% del programa.
Tablas
Toda tabla est compuesta por celdas, lo que posibilita que una tabla pueda te-
ner la cantidad de celdas que deseemos. Esto nos permite distribuir y ordenar los
elementos de nuestra pgina como queramos. Recordemos que hay tres maneras
de insertar una tabla: con un clic en el cuarto icono de la barra de herramientas
horizontal, con Insertar / Tabla o con Ctrl+Alt+T. Al usar cualquiera de estas op-
cines, aparecer el men de insercin de tabla.
Figura 3. El men de insercin de tabla. Podemos observar las propiedades
y las caractersticas bsicas de la tabla que vamos a crear.
Tablas y celdas
21 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 21
Repasaremos sus componentes:
Filas: es la cantidad de filas o divisiones horizontales que tendr la tabla.
Columnas: es la cantidad de columnas o divisiones verticales que tendr la tabla.
Ancho de tabla: aqu, colocamos la longitud que tendr la tabla, expresada en pxe-
les o porcentaje. Ms adelante veremos cundo utilizar una u otra medida.
Grosor del borde: aqu especificamos el tamao de borde (ancho) que tendr nues-
tra tabla. Se mide en pxeles.
Relleno de celda: desde aqu, configuramos el espacio que hay entre el contenido de
la tabla o de la celda y su borde. Tambin se mide en pxeles.
Espacio entre celdas: aqu, definimos la separacin que hay entre las distintas celdas
de una misma tabla. Igual que los dos anteriores, se mide en pxeles.
Una vez insertada la tabla, podremos modificar todas las propiedades anteriores y
tambin algunas nuevas, como agregarle un color de fondo y/o de borde, alinearla
horizontalmente e insertarle una imagen de fondo.
Celdas
Las celdas componen las filas (horizontales) y las columnas (verticales) de una ta-
bla. Una tabla puede tener infinitas celdas, pero debemos tener en cuenta que
mientras ms tenga, cada una de stas tendr menos espacio para colocar conte-
nido. Esto tambin depender del Relleno de celda y del Espacio entre celdas que
le coloquemos a la tabla.
La celda tiene propiedades independientes de las de la tabla. Para acceder a stas
debemos posicionarnos con el cursor y hacer clic adentro de la tabla, sobre la cel-
da que deseemos seleccionar.
Figura 4. Se pueden observar las propiedades de la celda
seleccionada en la parte inferior de la barra de Propiedades.
Es importante advertir que las tablas siempre tienen celdas, aunque sea una sola
-ste ser el caso de una tabla que tenga una fila y una columna. En toda oca-
sin, se debe tener presente esto, sobre todo por las propiedades de cada una. Re-
pasaremos las diferentes propiedades que poseen las celdas. Algunas sirven para
alinear elementos, elegir sus medidas, combinarlas, dividirlas, colocarles fondo
o elegir las caractersticas de sus bordes.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
22 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 22
Horiz: permite alinear los elementos que se encuentran dentro de la celda a la iz-
quierda, al centro o a la derecha.
Vert: permite alinear los elementos que se encuentran dentro de la celda de mane-
ra superior, medio o inferior.
An y Al: nos permite especificar el ancho y el alto de una celda. Generalmente, es-
tas propiedades no se usan, ya que el mismo contenido se encarga de esto.
Fnd: permite insertar una imagen de fondo para la celda.
Fnd (con casilla de color): permite colocarle un color de fondo a la celda. ste pue-
de ser diferente con respecto al color de fondo de la tabla (Figura 5).
Borde: habilita la colocacin de un color de borde a la celda. ste puede ser dife-
rente con respecto al color de borde de la tabla.
Combinar celdas: junta las celdas seleccionadas y las convierte en una nica celda.
Funciona para unir filas, columnas o ambas.
Dividir celdas: permite dividir la celda seleccionada en la cantidad elegida de co-
lumnas o filas, para generar ms campos en la tabla.
Figura 5. Se puede observar desplegado el men de seleccin de Color de fondo de la celda.
MARCOS
Los marcos o frames son una prctica forma de diseo web que podemos usar
para sitios con mucho contenido. Tambin son muy prcticos a la hora de man-
tener estticas ciertas porciones de un documento HTML. Esencialmente, son
distintos archivos HTML unidos en uno solo. Es decir, cualquier pgina web he-
cha en marcos tiene, por lo menos, tres archivos HTML. En el ejemplo que se
muestra en la Figura 6, podemos ver una pgina de marcos.
Marcos
23 www.redusers.com

El color de borde de la tabla solo ser visto si sta tiene borde. Un error o confusin comn
ocurre cuando se le asigna un determinado color a la tabla cuando, en realidad, no tiene bor-
de (borde 0). Lo nico que debemos hacer es colocar por lo menos un pxel a la propiedad del
borde para que el color se visualice.
COLOR DE BORDE
01.qxp 01/02/2010 12:38 p.m. Pgina 23
Figura 6. Observamos un documento HTML dividido en marcos.
El marco ms pequeo de la izquierda acta como barra de navegacin
esttica, y el de la derecha como espacio para el contenido.
Cada marco es una pgina web diferente, es decir, un archivo nico. En el caso de la
Figura 6, el marco izquierdo podra llamarse barra.html, el derecho, principal.html y el
contenedor (que agrupa a los otros dos), index.html.
Una de las caractersticas positivas de disear o programar una pgina con mar-
cos es la barra de navegacin esttica. Muchas veces, si la pgina tiene una canti-
dad importante de contenido, aparecer la barra de desplazamiento vertical a la
derecha de la ventana del navegador, para que podamos navegar todo el docu-
mento. Pero al ir bajando, la barra de navegacin -ya sea vertical u horizontal- se
perder y el usuario no la tendr ms a mano.
Las opciones para crear una pgina web con marcos se encuentran en el men
principal, en Modificar / Conjunto de marcos. Si diseamos un archivo HTML de
esta manera, la barra de navegacin -tanto si es horizontal como si es vertical- ser
una pgina aparte y no se mover cuando el usuario use la barra de desplazamiento
vertical. Esto posibilitar que los navegantes puedan acceder de forma rpida y
sencilla a los vnculos.
Crear una pgina o un sitio con marcos suele ser un poco ms complicado que hacer un
diseo a pgina completa (llamado diseo Body). En este caso, tendremos que tener
cuidado con las medidas y con los vnculos. En nuestro proyecto, trabajaremos una p-
gina en marcos y all veremos con ms detenimiento sus propiedades y caractersticas.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
24 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 24
Antes de pasar al siguiente tema, conviene mencionar que el diseo en marcos no
es mejor que el diseo en Body. Existen webmasters que consideran ste ltimo co-
mo algo primitivo y tpico de principiante. Nada ms lejos de la verdad. Debemos
utilizar el tipo de diseo que mejor se adapte al contenido del sitio. Esto es algo que,
como veremos, se decide al comienzo, antes de abrir siquiera el Dreamweaver.
PLANTILLAS
Las plantillas o templates son un tipo especial de archivo que sirve para crear un
diseo de pgina fijo. De esta manera, podemos crear un documento HTML cuyo
diseo est basado en la plantilla. Al disear una plantilla, elegimos cules de sus
sectores o regiones pueden ser modificadas. Esto nos permite controlar qu ele-
mentos de la pgina quedarn siempre estticos y cules no, lo que es ideal para si-
tios que tienen muchas pginas cuyos diseos son prcticamente iguales. Tambin
es ideal para cuando trabajamos con otras personas responsables de la edicin de
contenido de una web, ya que solo podrn editar aquello que nosotros deseemos.
Figura 7. Observamos una plantilla con 3 regiones modificables.
Todo lo que est fuera de esas regiones no podr ser cambiado,
excepto que la persona tenga acceso al documento de plantilla.
Otra utilidad muy importante de las plantillas es que nos permiten actualizar
varias pginas a la vez, ya que cuando realizamos un cambio en la parte no mo-
dificable de la plantilla, todas las pginas que la usan vern reflejado el mismo
cambio de forma inmediata.
Plantillas
25 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 25
Las opciones para crear un archivo con plantillas se encuentra en el men
principal, en Modificar / Plantillas o en Archivo / Nuevo (all debemos seleccio-
nar Plantilla HTML). Un documento que se crea a partir de una plantilla perma-
nece conectado a ella, salvo que lo separemos luego. Al guardar una plantilla,
Dreamweaver crea automticamente una carpeta en el directorio del sitio donde
la archiva. Es muy importante no cambiar su nombre o su ubicacin, de lo con-
trario, nuestras pginas basadas en plantillas no funcionarn.
La extensin de archivo con la que Dreamweaver guarda las plantillas es .DWT
(Dreamweaver Template). Nunca debemos confundirla con un archivo HTML,
lo que puede ser una equivocacin sencilla ya que a simple vista son muy pare-
cidos. Para asegurarnos de esto es importante que veamos la extensin del
archivo que se est editando.
Figura 8. Podemos apreciar que a simple vista,
un archivo HTML y un DWT son casi idnticos, pero si prestamos
atencin observaremos las diferencias y las marcas.
A continuacin, repasaremos las diferentes regiones que puede tener una plantilla:
Regin editable: es una regin no bloqueada de una plantilla, lo que le da al usua-
rio la posibilidad de editarla. Su diseador o programador puede especificar cual-
quier rea como modificable. Toda plantilla tiene que contener, por lo menos, una
regin editable, de lo contrario, no es funcional.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
26 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 26
Regin repetida: es una regin de la plantilla que permite que el editor o usuario
pueda agregar copias de sta o eliminarlas, sin tocar la original. Por ejemplo, se pue-
de definir que una columna de una tabla se repita. Las secciones repetidas son edi-
tables, pero el molde original no se puede modificar. Los tipos de regiones pueden
ser regin repetida y tabla repetida.
Regin opcional: una seccin de la plantilla con cierto contenido que el usuario
puede controlar si quiere que aparezca o no.
Atributo de etiqueta editable: permite desbloquear un atributo de etiqueta de una
plantilla para que el usuario lo pueda editar. Por ejemplo, si bien una imagen pue-
de permanecer bloqueada, su alineacin puede modificarse.
En nuestro proyecto trabajaremos una pgina con plantillas y all veremos con ms
detenimiento sus propiedades, caractersticas y usos especficos.
HOJAS DE ESTILO/CSS
Las hojas de estilo o CSS (Cascading Style Sheets) son un grupo de reglas de formato
que condicionan el aspecto del contenido de una pgina o sitio web. La utilizacin de
este tipo de archivo permite separar, por un lado, el contenido de la pgina (ubicado
en el HTML) y, por otro, su formato o presentacin (ubicado en el CSS).
Esto posibilita que sea mucho ms sencillo mantener el aspecto del sitio desde una
ubicacin central porque, con tan splo actualizar el documento CSS, se actualizan
todas las pginas sin necesidad de tener que ir una por una para modificar sus ca-
ractersticas. La separacin de contenido y formato tambin simplifica el cdigo
HTML, lo que disminuye el tiempo de carga en los navegadores.
Con las hojas de estilo podemos controlar las propiedades de todos los elementos
que componen una pgina (tablas, textos, imgenes, etctera). De hecho, podemos
manipular muchsimas ms caractersticas de stos mediante un archivo CSS que si
se utiliza slo el cdigo HTML. Las opciones para crear un archivo de hojas de es-
tilo se encuentra en el men principal, en Texto / Estilos CSS.
Hojas de estilo/CSS
27 www.redusers.com

Si estamos pensando en programar un sitio con muchas pginas, es conveniente que lo hagamos
con plantillas. Cuando tengamos que modificarlo ahorraremos mucho tiempo y problemas, ya que
no tendremos que estar abriendo archivo por archivo para realizar el mismo cambio en todos.
SITIOS CON PLANTILLAS
01.qxp 01/02/2010 12:38 p.m. Pgina 27
Bsicamente, hay 2 tipos de hojas de estilo: las externas y las internas. Las pri-
meras son archivos separados con extensin .CSS y se pueden guardar en una sub-
carpeta dentro del sitio o junto con las pginas. Las segundas se insertan como
cdigo CSS dentro del encabezado del documento HTML, es decir, estn in-
cluidas dentro de la pgina web.
Las hojas de estilo externas suelen ser ms prcticas que las internas debido a que
pueden vincularse a la cantidad que se desee de archivos HTML. De esta mane-
ra, podemos tener todos los estilos de nuestro sitio definidos en un solo archivo
CSS, por ms que tengamos cincuenta, cien o mil pginas web.
En nuestro proyecto, trabajaremos con archivos de hojas de estilo y all veremos con
ms detenimiento sus propiedades, usos y caractersticas especficas.
Insercin de imgenes
Antes de repasar los pasos y las formas para insertar imgenes en un archivo HTML,
conviene recordar que stas siempre deben ser formato .GIF o .JPG. EL primero se
usa para imgenes pequeas y de baja calidad, como un fondo, y el segundo se usa
para imgenes grandes y de alta calidad, como fotos.
Antes de proceder a insertar una imagen en una de nuestras pginas web, debemos
tomar la medida de la celda donde la colocaremos (con la regla del Dreamweaver).
De esta manera, sabremos qu tamao tiene que tener el archivo grfico.
Hay tres maneras de insertar una imagen: con un clic en el sexto icono de la barra
de herramientas horizontal (asegurndonos de seleccionar Imagen en el submen),
con Ctrl+Alt+I o, en el men principal, con Insertar / Imagen. Antes de colocarla de-
bemos estar posicionados en la celda o tabla en donde deseamos que aparezca.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
28 www.redusers.com

Si bien veremos que Dreamweaver tiene un men completo para la creacin y la modificacin
de las hojas de estilo de nuestro sitio, tambin podemos modificarlas manualmente. Para es-
to debemos conocer el cdigo CSS y su sintaxis. sta es muy parecida al HTML, por lo que
con un poco de observacin y prctica es posible.
CREACIN DE HOJAS DE ESTILO
INSERCIN DE IMGENES Y VNCULOS
01.qxp 01/02/2010 12:38 p.m. Pgina 28
Figura 9. Vemos el men de insercin de imagen, donde
podemos buscar el archivo deseado en las subcarpetas del sitio.
Una vez que la insertemos en Dreamweaver, veremos que la imagen tiene las si-
guientes propiedades, entre otras:
Borde: el tamao del borde de la imagen, medido en pxeles. Si no queremos que
tenga borde, el valor debe ser 0.
Alt: texto alternativo de imagen que aparecer si, en el navegador, nos colocamos
encima con la flecha del mouse. Es el texto que aparece sobre fondo amarillo claro.
Vnculo: la opcin para colocarle un vnculo a la imagen. En el caso de que tenga
borde, ste adoptar el mismo color de un vnculo.
Clase: la posibilidad de colocarle a una imagen una propiedad de hoja de estilo.
Mapa: con esta herramienta podemos crear sectores de la imagen que acten como vn-
culos y hacer posible, as, que una imagen pueda vincular con ms de un archivo a la vez.
Durante el proyecto trataremos este tema varias veces. En la Figura 10, podemos
observar ms de cerca las propiedades de la imagen.
Insercin de imgenes y vnculos
29 www.redusers.com

En HTML se usa la paleta de colores RGB (rojo, verde y azul). Se visualiza con dos caracteres
alfanumricos para el rojo, dos para el verde y dos para el azul, y da como resultado, as, un
cdigo de color de seis dgitos. Se llama cdigo hexadecimal y lleva adelante el smbolo #.
Un ejemplo puede ser #0000FF (color azul pleno).
CDIGO HEXADECIMAL
01.qxp 01/02/2010 12:38 p.m. Pgina 29
Figura 10. En la barra de Propiedades del Dreamweaver
podemos observar las opciones vistas ms arriba.
Vnculos
En HTML podemos vincular cualquier elemento de una pgina con otro archi-
vo, ya sea dentro del mismo sitio o fuera de ste. sta es una de las caractersti-
cas principales del protocolo HTTP. Para colocarle un vnculo (link) a un texto
y/o imagen, debemos marcarlo/a o seleccionarlo/a. Una vez que lo hayamos he-
cho, veremos la opcin en la barra de Propiedades, donde tenemos que escribir
el nombre del archivo con el cual queremos que el elemento vincule. Repasare-
mos los tipos de vnculos:
Figura 11. Podemos ver el ancla colocada al lado del ttulo
y el men con la opcin para colocar su nombre.
1. PRINCIPALES CONCEPTOS DE DREAMWEAVER
30 www.redusers.com
01.qxp 01/02/2010 12:38 p.m. Pgina 30
Vnculo externo: nos permite dirigir al usuario a un sitio externo. Siempre de-
be ir encabezado por el protocolo HTTP.
Vnculo interno: nos permite dirigir al usuario a una pgina interna de nuestro
sitio. Solo se debe escribir el nombre del archivo con su extensin, por ejemplo,
index.html. En el caso que se encuentre en una subcarpeta, deberemos colocar su
nombre primero seguido de una barra invertida (archivos/index.html).
Vnculo de e-mail: abre una ventana del programa de e-mail que tenga la PC
del usuario (Outlook, Eudora, etctera) y le permite comenzar a redactar un co-
rreo con la direccin ya colocada en el campo Para. Un ejemplo puede ser mail-
to:nombre@dominio.com. Siempre debe escribirse el comando mailto: antes de
la direccin para que el enlace funcione correctamente.
Vnculo de ancla: permite dirigir al usuario a una locacin especfica dentro de
la misma pgina web. Para programarlo necesitamos colocar un ancla en el lu-
gar a donde queremos enviarlo. Esto se hace con el tercer icono de la barra de
herramientas horizontal. Le colocamos un nombre (una sola palabra en mins-
cula), luego marcamos o seleccionamos la imagen o palabra que actuar como
vnculo y, siempre encabezando con el smbolo #, escribimos el nombre del an-
cla, por ejemplo, #arriba (Figura 11).
Vnculo de descarga: le permite al usuario descargar un archivo (de texto, de
msica, de video, etctera). Deberemos escribir la locacin del archivo deseado,
por ejemplo, si est en nuestro sitio dentro de una subcarpeta podra ser algo as:
archivos/descargas/info.pdf.
Insercin de imgenes y vnculos
31 www.redusers.com
...
RESUMEN
En este captulo, repasamos las herramientas y opciones bsicas de Dreamweaver. Si bien vol-
veremos sobre algunos temas tratados aqu y veremos muchos ms, siempre es bueno comen-
zar con algunos conocimientos por sentado. A lo largo de todo el proyecto, desarrollaremos va-
rias prcticas que nos darn mayor manejo de todo.
01.qxp 01/02/2010 12:38 p.m. Pgina 31
32 www.redusers.com

PREGUNTAS TERICAS
1 Qu es la materia prima de un sitio?
2 En cuntas reas est dividida la interfaz
de trabajo de Dreamweaver?
3 Qu tipo de medida se usa cuando se traba-
ja en un proyecto web?
4 Para qu sirven los atributos meta?
5 Cul es la regla de oro de Dreamweaver?
ACTIVIDADES
6 Cul es la diferencia entre relleno de cel-
da y espacio entre celdas?
7 Qu es un marco?
8 Qu es una plantilla?
9 Qu es una hoja de estilo?
10 Cul es el nombre del archivo de apertu-
ra de un sitio web?
01.qxp 01/02/2010 12:38 p.m. Pgina 32