Adobe Dreamweaver CS5

Manual elaborado por: Ana Mara Lpez Balbn

[email protected]
Introduccn al Diseo de Sitios Web
Dreamweaver es una programa de edicin que nos permite la
generacin de cdigo HTML mediante la insercin de elementos en
forma visual.
Es una herramienta comparable a InDesign en el medio impreso, que
nos permite crear rpidamente Sitios Web sin tener que escribir una sola
lnea de cdigo.
Programacin HTML
El cdigo HTML constituye el corazn del Web. HTML signifca
Lenguaje de Marcado de Hipertexto. Es un lenguaje que se basa
en el SMGL Lenguaje Estandar de Marcacin Generalizada, un
sistema de procesamiento de documento ampliamente utilizado por
organizaciones gubernamentales y educativas.
En un documento HTMlL se llaman etiquetas (tags) a las instrucciones
que defnen atributos especfcos.
El cdigo que se genera para cada documento HTML es pequeo
(slo texto), de tal forma que al poder ser transferido por Internet y
desplegado rapidamente, puede leerse en casi cualquier computadora
que cuente con un visuallizador que lea HTML y un modem, sin
importar, marca, sistema operativo, monitor y accesorios de la misma.
El lenguaje HTML es concreto y fcil de aprender. Hace algunos aos
era necesario aprender cada una de las etiquetas y escribirlas a mano en
un editor de texto. Actualmente programas como Dreamweaver o Front
Page generan el cdigo de manera automtica y oculta. Otros programas
como Word e InDesign cuentan con fltros de conversion a HTML.
Las etiquetas de HTML pueden ser divididas en dos grupos:
Etiquetas estructurales: organizan las partes del documento.
Etiquetas de estilo: dan especifcaciones sobre la apariencia del texto.
HTML vs XHTML
Por mucho tiempo, el HTML fue el nico cdigo utilizado para la
creacin de sitios Web, pero a fnales del 2001 el World Wide Web
Consortium, un comit encargado de determinar estndares para la Web,
decidi descontinuar el uso del HTML y reemplazarlo por el XHTML (
Extensible Hypertext Markup Language).
El XHTML es casi idntico al HTML pero la diferencia bsica consiste
en que es un cdigo ms limpio y utiliza reglas muy estrictas en
cuanto a como el cdigo debe ser escrito, lo que lo hace un lenguaje
ms universalmente compatible con diferentes sistemas operativos y
navegadores.
Curso Bsico de Dreamweaver
2
Curso Bsico de Dreamweaver

El World Wide Web Consortium determina estndares para la Web
www. w3.org
Dreamweaver CS4 maneja cdigo basado en XHTML, aunque soporta
perfectamente el uso de HTML.
Una ventaja fundamental de Dreamweaver es que podemos
concentrarnos nica y exclusivamente en el diseo sin necesidad de
escribir una sola lnea de cdigo al crear un sitio Web.
Sistemas Operativos
Toda pgina debe ser diseada para funcionar en los principales
sistemas operativos:Windows, Macintosh, Linux o Unix.
Navegadores
Los navegadores son visualizadores de pginas web que permiten
visualizar documentos de Internet
Cuando se carga un documento HTML en un navegador como Firefox,
Safari, Chrome o Explorer, este lo lee para formatear el texto y las
imgenes sobre la pantalla.
No todos los navegadores soportan todas las etiquetas y aunque trabajen
con las mismas pueden interpretarlas de diferntes formas.
Los navegadores cambian frecuentemente de versin. y es comn que
viejas versiones de navegadores no soporten etiquetas XHTML. Otro
problema es que las compaas como Microsoft, Mozilla o Apple crean
etiquetas propias que slo pueden ser apreciadas con sus respectivos
navegadores.
Nota: Existen pginas que presentan estadsticas muy tiles sobre el
uso de navegadores, sistemas operativos. etc.
http://www.w3schools.com/browsers/browsers_stats.asp
Tipografa
Caractersticas de la tipografa en la Web
La pantalla de computadora reproduce las fuentes a una resolucin muy
baja de 72 dpi.
La principal caracterstica de la de la tipografa en la web es su
variabilidad, ya que cada lnea de texto, cada titular, cada estilo y tipo
de fuente, se reconstruye sobre la base de una interaccin compleja
entre el navegador, el servidor y el sistema operativo con el que se
visualice.
Vista Cdigo y Diseo
3
Curso Bsico de Dreamweaver

CSS
Determinan la forma en que se visualiza la informacin.
Javascript
Es un lenguaje que agrega interactividad y funcionalidad a un sitio web.
Permite crear interactividad, por ejemplo, a travs de rollovers, la
aertura de nuevas ventanas, etc. A travs, de funciones especiales de
Dreamweaver conocidas como Behaviors o Comportamientos, puede
generarse Javascript de forma automatica.
Directrices para nombrar archivos
Un sitio Web est constituido por una serie de pginas conectadas entre
s.
La forma en que cada una de estas pginas es nombrada es de vital
importancia para que los vnculos entre ellas sean adecuados.
Las directrices para el nombramiento de archivos son:
1) Procurar utilizar nombres cortos, ejemplo: contacto.html
2) No utilizar espacios en los nombres de los archivos, y de hacerlo
utilizar guin bajo, ejemplo: nuevos productos.html - incorrecto
nuevos_productos.html - corretco
3) No utilizar caracteres especiales y utilizar siempre minsculas.
? ! # $ % / & * ( ) @ . , : ;
5) Consistencia al utilizar las extensiones .htm o .html a lo largo del
sitio, ejemplo: historia.htm o historia.html
El tipo de extensin a utilizarse puede elegirse en las preferencias
de Dreamweaver.
Estructura del Stio
Un sitio Web est constituido por una serie de archivos (pginas)
vinculadas entre s.
Para crear correctamente un sitio en Dreamweaver, es necesario crear
la carpeta que alojar el sitio, llamada Root Folder o Carpeta Raz.
En la Carpeta Raz se crea la estructura del sitio a travs de diversas
carpetas y pginas con la extensin html o htm.
Las carpetas pueden contener pginas adicionales u otras carpetas
conteniendo ms pginas.
Cuando se defne un sitio en Dreamweaver se hace apuntando hacia la
Carpeta Raz.
Siempre que nos conectamos a Internet lo hacemos mediante una
direccin Web que nos conecta a una computadora (servidor) que
hospeda nuestro sitio web en algn lugar.
Cuando se escribe una direccin en el navegador se le indica al mismo
buscar la pgina por default en la Carpeta Raz o sea el index. html.
A menos que se indique en la direccin que se ingresa en el navegador
otra pgina, el navegador siempre nos dirigir al index.html.
El index se refere a la pgina principal en cada directorio.
Ejemplo:
1) www.anahuac.mx/diseno
Me dirige automaticamente al sitio diseo, a la pgina
denominada index.html dentro de la carpeta del sitio.
2) www.anahuac.mx/diseno/programas.html
Me dirige a la pgina denominada programas.html
4
Curso Bsico de Dreamweaver

5
3) La carpeta raz est constituida por pginas y otras carpetas,
dentro de las cuales pueden existir pginas denominadas
index. html.
Esto se refeja en la direccin que ingresamos al navegador a
travs de un /.
Curso Bsico de Dreamweaver

Grfcos Web
Caractersticas de los grfcos en la Web
La visualizacin de grfcos en la web se basa en el modelo de color
RGB.
Los valores de transmisin de datos en la web varan segn el modem
que tenga el usuario, la velocidad del servidor web, la conexin a
internet y otros factores.
La mayor parte de los usuarios que acceden a la web lo hacen
generalmente a travs de modems de 56 kilobytes por segundo. A esta
velocidad el tiempo aproximado de descarga de la pgina es de 7 Kb
por segundo.
Cuanto ms grfcos contenga una pgina, el usuario tendr que esperar
ms tiempo para que esta descargue. Es muy importante considerar que
imgenes son verdaderamente necesarias y el tamao de las mismas.
A la velocidad de los modems actuales, una pgina web diseada para
usuarios con conexin modem debe contener mximo entre 50 y 75
kilobytes de elementos grfcos.
Colores Web Safe o Seguros
Los navegadores administran el color en base a una paleta de 216
colores que son los colores comunes entre las paletas de los sistemas
operativos (Windows y Macintosh) y en distintos monitores.
La utilizacin de colores Web safe garantiza la visualizacin del color
de la misma forma por todos los usuarios.
Resolucin de las imgenes
Debido a la baja resolucin de los monitores, las imgenes destinadas
a la Web deben ser optimizadas a 72 dpi en programas de edicin de
imgenes como Photoshop, ImageReady o Fireworks.
Optimizacin de imgenes
Los diferentes tipos de imagen utilizan modelos de compresin
diferentes que han sido diseados para funcionar dependiendo del tipo
de imagen.
Formato GIF
Este formato funciona muy bien para imgenes con grandes zonas de
color homogno. El formato GiF permite reducir el nmero de colores
al mnimo necesario, y eliminar los colores que no sean indispensables
para mostrar la imagen. Un archivo GIF no puede tener ms de 256
colores, pero s un nmero inferior.
Ventajas:
Es el formato ms utilizado en la Web
En imgenes grfcas funciona mejor que el JPEG
Permite transparencias y la produccin de grfcos animados
Formato PNG
png son las siglas de Portable Network Graphics, un formato de
compresin de imgenes aprobado por el World Wide Web Consortium
(W3C) como sustituto del formato .gif. Los archivo tipo .gif utilizan un
algoritmo de compresin de datos que est patentado, mientras que el
formato .png no est patentado y no necesita licencia para su utilizacin.
Al igual que el formato .gif, el .png son mejor para imgenes grfcas
Ventajas:
No est patentado
En imgenes grfcas funciona mejor que el JPEG
Permite transparencias y la produccin de grfcos animados
6
Curso Bsico de Dreamweaver


Formato JPEG
El formato JPEG es el adecuado para imgenes a todo color como
fotografas.
Este formato permite guardar las imgenes con diferntes niveles de
calidad. Si el nivel de calidad es bajo la imagen crea distorsin, lo que
se conoce como ruido en la imagen.
Ventajas:
Permite un alto ndice de compresin que resulta en tiempo
de descarga ms cortos.
Produce excelentes resultados con fotografas e imgenes
complejas.
Funciona bien con imgenes a todo color.
Nota: Es muy importante que al momento de optimizar las imgenes
estas sean producidas al tamao que ocuparn en la pgina.
Una vez que una imagen ha sido comprimida en cualquiera de
los formatos anteriores, los datos originales de la imagen se han
perdido. Es muy importante guardar siempre el archivo original de
las imgenes o grfcos.
7
Imagen ideal para ser optimizada en
formato JPEG.
Ventana para la optimizacin de
imgenes en Photoshop.
File/Save for Web
Imagen ideal para ser optimizada en
formato GIF o PNG
Curso Bsico de Dreamweaver

Dreamweaver
La interfaz de Dreamweaver
Ventana de Bienvenida
Al abrir Dreamweaver, aparece una ventana de Bienvenida cuya
funcin es permitirnos acceder rapidamente a las diferentes opciones y
funciones del programa.
Barra de Herramientas de la aplicacin
La barra de herramientas de la aplicacin nos permite un acceso
rpido a las funciones del programa como espacios de trabajo, vistas
del documento, administracin del sitio y ayuda para el manejo del
programa.
La Barra de herramientas puede mostrarse u ocultarse a travs del men
Ventana > Barra de la aplicacin
Barra de Herramientas del Documento
La barra de herramientas del documento se encuentra en la parte
superior de la ventana del documento y contiene botones y mens para
ejecutar diversas tareas.
Los tres primeros botones son modos de visualizacin de la pgina:
Code, Split y Design.
1) Design: permite trabajar en lo que es conocido como modo
WYSIWYG (What you see is what you get).
2) Code: permite trabajar concentrndose en el cdigo. Otra buena
opcin para trabajar con el cdigo mientras se mantiene el modo
Design, es abrir el Inspector de Cdigo por medio del Men
Windows o F10.
3) Split: este modo permite la visualizacin del diseo y el cdigo en
8
la misma ventana. Podemos ver refejado en el cdigo cualquier
cambio que realicemos en el diseo.
Los botones del lado derecho se utilizan para distintas funciones:
Botn Live Code
Sirve para validar la sintaxis del cdigo del documento, el sitio, etc.,
en busca de errores.
Botn de checado de compatibilidad con el navegador
Sirve para validar el cdigo en diferentes navegadores
Botn Live View
Botn de Inspeccin
Botn de previsualizacin en el navegador
Permite la previsualizacin de un documento en diferentes navegadores.
Botn de elementos de asistencia visual
Permite mostrar u ocultar elementos como bordes de tablas, reglas,
guas,etc.
Botn de actualiazacin del documento
Si se han realizado cambios en el cdigo de un documento se utiliza
el botn Refresh para que los cambios sean visibles en el Modo de
visualizacin Design.
Campo de Ttulo, es en donde se ingresa el ttulo de la pgina, mismo
que aparecer en la parte superior de la ventana cuando la pgina sea
visualizada en un navegador y servir para permitir marcar pginas
favoritas desde el mismo.
File Management Button (Botn de administracin de archivos)
Permite subir y bajar archivos desde la computadora al servidor y
viceversa.
Curso Bsico de Dreamweaver

Ventana del Documento
Panel propiedades
Selector de Etiquetas
Barra de herramientas de la aplicacin
Barra de herramientas del Documento

Paneles
Barra de Mens Panel Insertar
Interfaz de Dreamweaver CS5
Espacios de trabajo
Previsualizacin en navegadores
9
Curso Bsico de Dreamweaver

10
Ventana del Documento y Paneles
Ventana del documento
Es la ventana de trabajo, despliega el documento de la forma en que
ste ser visualizado en el navegador. La barra de ttulo incluye en un
parntesis el nombre del archivo y un asterisco si contiene cambios que
an no han sido salvados.
En la parte inferior del documento se encuentra la barra de estado:
Selector de etiquetas: Se encuentra en la barra de estado del lado
izquierdo. Srve para seleccionar etiquetas HTML y es de gran utilidad
cuando es necesario seleccionar algn elemento de difcil seleccin
como el borde de una tabla, una imagen , etc.
Previsualizador del documento - Del lado derecho, en primer lugar,
se encuentra el previsualizador del documento que nos permite ver el
documento a diferentes resoluciones.
Indicador de tiempo - Del lado dercho del previsualizador del
documento est un rea que nos da un estimado del tiempo que tardar
esta pgina en bajar; incluyendo todas sus imgenes, animaciones y
ligas.
Paneles
Dreamweaver cuenta con una gran variedad de paneles que nos
permiten realizar tareas especfcas. Los paneles pueden ser
accesados desde el men Ventana y algunos como el de Insertar y el
de Propiedades se usan frecuentemente, mientras que otros son ms
especializados y se utilizan ocasionalmente.
Los paneles se presentan organizados dependiendo del espacio de
trabajo que se elija.
Aunque Dreamweaver cuenta con espacios de trabajo predeterminados,
tambin es posible determinar espacios de trabajo propios.
Los paneles pueden ser agrupados y desagrupados y podemos tener
acceso a ellos a travs del men Ventana.
Para ocutar los paneles provisionalmente:
Windows - F4
Panel Insert
Ventana > Insertar
Control + F2 en Windows
Comando + F2 en Mac
Panel Insertar
Contiene un men con diferentes categoras que muestran una serie de
conos con elementos que pueden ser insertados en la pgina.
La disposicin del Panel Insertar puede modifcarse si en el men de las
categorias del panel elegimos Mostrar Categoras .
Se puede crear una categora en el panel Insertar para mostrar los
elementos ms comunmente utilizados.
En el men de categoras del panel se encuentra la categora Favoritos.
Para aadir un objeto a esta categora se debe dar click sobre algn o
Curso Bsico de Dreamweaver

Planeacin y definicin del sitio
El principal objetivo de crear un sitio en Dreamweaver es tener la
posibilidad de crear y editar pginas de forma local en nuestro disco,
para despus subir esas pginas a un servidor y que sean accesibles
publicamente.
Se le llama sitio o website al conjunto de pginas en un servidor que
pueden ser accesadas a travs de un navegador.
La creacin de un sitio en Dreamweaver inicia con su planeacin
previa: nmero de pginas que debern ser creadas, contenido de cada
una de las pginas y la conexin entre dichas pginas.
Pasos para el desarrollo de un sitio web
Como en cualquier proyecto editorial, la planeacin es una parte
importante del diseo de un sitio Web.
Procedimento a seguir cuando se crea un sito para la Web:
1) Determinar los requerimientos del servidor
Antes de disear una pgina web debemos conocer ciertos
datos que debern ser facilitados por el Web master o
administrador del servidor (lugar donde se hospedar nuestra
pgina para ser accesada por cualquier usuario)
Nombre del dominio del sitio en la Web
Qu sistema operativo y software se utilizar para la creacin
del sitio.
Cunto espacio existe disponible para el sitio.
Cmo se enviarn los archivos para su montaje en el servidor
(va FTP, conexin directa, etc.)
Recursos a utilizar (Flash, QuickTime, etc.)
Si se utilizaran mapas de imgenes del lado del servidor
2) Bocetar las pginas y determinar la estructura del sitio.
Para organizar la estructura del sitio
Organizar desde un principio carpetas y subcarpetas que
contendrn los archivos de cada pgina, para as evitar
problemas posteriores como ruptura de ligas en el momento de
mostrar el sitio en un servidor.
Estructurar la relacin que existe entre las pginas mostrando
la pgina de inicio y la relacin de sta con el resto de las
pginas y con otros documentos fuera del sitio.
Realizar un esquema de nombres que muestre la forma en que
sern ordenados los archivos que conforman el sitio.
Para cada pgina se deber:
Realizar la diagramacin
Considerar la utilizacin de marcos, tablas, imgenes,
animaciones, sonidos, etc.
Determinar las ligas y elementos en la pgina que se utilizarn
como instrumentos de navegacin del sitio.
3) Desarrollo de las pginas
Deber tenerse cuidado sobre las convenciones de nombres
dependiendo del servidor donde se mostrar el sitio (que no
exceda de ocho caractres, que las extensions no sobrepasen
tres caracteres, etc.).
Antes de armar deber contarse con el texto, imgenes
optimizadas, animaciones, etc.
Crear las pginas en Dreamweaver incorporando los elementos
previamente desarrollados en programas como Fireworks.
4) Crear y probar las ligas
11
Curso Bsico de Dreamweaver

Revisar que las ligas funcionen en File/Preview in Browser de
Dreamweaver.
5) Montar el sitio en el servidor
Cuando se ha concluido la produccin del sitio en Dreamweaver
se puede montar en el servidor. La forma de hacerlo vara
dependiendo de la plataforma del servidor y la conexin.
Lo ideal es consultar al Web Master.
6) Probar el Sitio
Una vez que el sitio ha sido montado en el servidor,
deberemos probarlo en distintas mquinas y con distintos
navegadores como si fueramos un usuario cualquiera con el fn
de poder detectar cualquier tipo de problema y poder
solucionarlo antes de que el sitio sea accessible en la Web.
7) Mantenimiento
Practicamente todos sitios requieren de un mantenimiento
peridico que permitir actualizar los datos, aadir pginas al
sitio, cambiar las imgenes, etc.
Es muy importante cuidar los cambios que se hacen porque se
puede provocar la ruptura de ligas. El web master deber ser
quien nos oriente con respecto a la realizacin de estas
actualizaciones.
Defnicin del sitio en Dreamweaver
Antes de empezar a trabajar con Dreamweaver es necesario dar de alta
un sitio local que defnir la estructura del sitio.
Un sitio local requiere de un nombre y un Folder Raz (Root Folder),
que ser el lugar en donde se almacenarn todos los archivos del sitio.
Cada vez que se inicie un nuevo proyecto deber defnirse este folder.
Una buena idea es crear una carpeta en nuestra computadora a la que
denominaremos sitios. Esa carpeta alojar los distintos sitios que iremos
creando en Dreamwever.
1) Seleccionar en el men Sitio > Nuevo Sitio o si acabamos de
abrir el programa en la Ventana de Bienvenida elegir Sitio de
Dreamweaver.
2) En el primer campo escribir el nombre para el nuevo sitio por
ejemplo: mi_sitio. No importa si utilizamos espacios, maysculas
o caracteres especiales.
3) En el siguiente campo debemos seleccionar la carpeta y la
localizacin de esa carpeta que es donde se guardarn todos los
archivos, o sea la Carpete Raz o Root Folder.
4) Salvar.
5) En el Panel Archivos (Ventana > Archivos), en la parte superior
aparece un men que es donde se muestran los sitios que tenemos
guardados. Si seleccionamos el sitio que acabamos de crear
el panel nos mostrar todos los archivos que hasta el momento
conforman el sitio.
12
Curso Bsico de Dreamweaver

Si damos doble click sobre el men que muestra los sitios,
podremos acceder a la ventana de confguracin del sitio.
6) En la ventana de confguaracin del Sitio, si damos click a
Confguracin avanzada en el men del lado izquierdo,
podemos elegir la opcin Informacin Local y en el primer
campo denominado Carpeta de Imagenes por default, elegir en
que carpeta de la Carpeta Raz se guardarn las imgenes que
iremos aadiendo a nuestro sitio.
Si por ejemplo, aadimos una imagen a un archivo del sitio,
automaticamente Dreamweaver realiza una copia de esa
imagen a la Carpeta de imgenes. Si no hemos creado una
carpeta denominada imgenes dentro de la carpeta raz hay
que hacerlo.
7) En vnculos relativos a: seleccionar Documento.
8) En el campo Direccin HTTP debe ingresarse la direccin en
la que eventualmente residir mi sitio en la Web. Si no se tiene
an la direccin, no hay que ingresar ninguna informacin.
10) Seleccionar la casilla Case sensitive links. Esto permitir a
Dreamweaver checar que no existan vnculos con maysculas
11) Seleccionar la casilla Permitir Cach. El site Cach es la
forma en que Dreamweaver almacena cierta informacin con
el fn de que algunas operaciones del programa sean ms
rpidas.
Dar click en OK.
A partir de este momento el Panel Sitio muestra la Carpeta raz para
nuestro nuevo sitio y un cono donde podremos ver nuestros archivos a
manera de rbol.
Panel Sitio
Este panel nos muestra todos los archivos y carpetas contenidos en
nuestro sitio y nos permite trabajar con ellos ya sea para abrirlos,
copiarlos, pegarlos, moverlos o borrarlos. Todos los cambios que se
realicen al sitio deben realizrse desde este panel.
En la parte superior del Panel Sitio, si doy un click con el botn
derecho, aparece un men que me permitir por ejemplo aadir
una nueva carpeta al sitio. En la Mac esta operacin se realiza con
presionando la tecla Comando y dando click sobre esa carpeta.
13
Curso Bsico de Dreamweaver

Creacin de una pgina
Una vez dado de alta un sitio se pueden comenzar a crear una a una
las pginas que conformarn el sitio. Las pginas pueden ser creadas
basadas en diseos predefnidos o diseos totalmente originales.
Podemos crear pginas nuevas desde:
La ventana de Bienvenida
El Panel de Archivos
El Men Archivo > Nuevo
Dimensiones de la pgina
El principal soporte de la informacin en la Web es la pantalla.
Uno de los errores ms frecuentes en el diseo de pginas web es
prolongar el ancho de los elementos grfcos ms all del rea visible
en monitores de diecisiete a diecinueve pulgadas, a una resolucin de
1024 x 768 pixeles, que es el estndar utilizado por la mayora de los
usuarios.
La zona segura es determinada tanto por el tamao mnimo de las
pantallas de uso corriente y el ancho del papel que se usa al imprimir
una pgina web y est determinada por el tipo de navegador en el que
ser visualizado el sitio.
Ejemplo:
Dimensiones de la zona segura para diseos maximizados para pantallas
de 800 x 600:
Ancho mximo: 760 pixeles
Altura maxima: 410 pixeles (visible sin utilizar la barra de
desplazamiento)
Longitud de la pgina
Las pginas web largas obligan al usuario a memorizar demasiada
informacin que desaparece o se sale de la pantalla. Debido a ello,
el usuario tiende a perder el sentido de la orientacin cuando los
principales enlaces y botones de navegacin no estn a la vista.
Una ventaja de las pginas largas es que el usuario no tiene que saltar de
pgina en pgina buscando la informacin y puede imprimir la pgina
para no tener que leer todo el contenido en pantalla.
Se recomienda utilizar anclas en intervalos cortos de la pgina con el fn
que el usuario pueda regresar al inicio.
Cualquier pgina que supere las dos pantallas verticals en su longitud,
deber tener un botn de salto al inicio en el pie de pgina.
ancla
14
Curso Bsico de Dreamweaver

Creacin de una pgina nueva
Archivo > Nuevo
Creacin de una pgina a partir de diseos predefnidos
1) Archivo / Nuevo
2) Aparecer la ventana Nuevo Documento (elegir la pestaa
Plantilla HTML).
3) Elegir alguno de los Diseos preseterminados.
4) Dar click en Crear.
5) Comenzar a personalizar el documento y en Archivo > Salvar
como, darle un nombre al archivo para guardar dentro de la
Carpeta Raz.
La nueva pgina aparecer y ver en el panel Archivos dentro de
nuestro sitio.
La nueva pgina muestra la estructura bsica de cualquier
pgina web, tablas a manera de contenedores de texto e
imgenes.
Determinar las propiedades de una pgina
Despus de crear una nueva pgina, sus propiedades bsicas deben
determinanarse mediante el men Modifcar > Propiedaes de Pgina.
Ttulo: este es el nombre que aparecer en la barra superior de la pgina
cuando esta sea desplegada en el navegador; tambin es el texto que
aparecer registrado en los bookmarks.
Pgina generada a partir de un diseo predefnido
Ventana para determinar las propiedades de la pgina.
Modifcar > Propiedades de la Pgina
15
Curso Bsico de Dreamweaver

Imagen de Fondo: Selecciona el archivo que se desplegar como
patrn en el fondo de la pgina.
Fondo, Texto, Vnculos, Vnculos visitados, Vnculos activos: aqu
puede determinarse la apariencia que presentarn estos elementos en
nuestra pgina.
Herramientas para modifcar el contenido de una pgina
Los diseos preestablecido pueden contener elementos que no
necesitamos para nuestra pgina. Dreamweaver permite por medio
del men Modifcar y paneles del men Ventana como Insertar y
Propiedades, hacer modifcaciones al diseo preestablecido.
La barra Insertar contiene botones para insertar varios tipos de objetos como imgenes,
tablas y capas en un documento. cada objeto es una pieza de cdigo HTML que permite
establecer varios atributos segn estos son insertados.
Cambiar la vista del documento por medio del panel Insert
Ventana > Insertar
Seleccionar la pestaa Layout
Seleccionar el botn Layout View
Esta vista nos mostrar una pestaa en verde sobre cada tabla de la
pgina. Cada una de estas pestaas, al ser seleccionadas, muestra las
medidas de cada celda y una pequea fecha que nos mostrar un men
donde podremos cambiar el ancho de la columna a fjo o autostretch
segn convenga.
Propiedades de una Pgina
Las propiedades de una pgina son todo aquello que determina las
caractersticas de la misma, como su ttulo, color del fondo, color del
texto , etc.
Modifcar > Propiedades de la Pgina
Puede asignarse el ttulo a una pgina a travs de las propiedades de la
misma o en la barra del documento.
Otra forma de asignar el ttulo a la pgina es por medio de la barra del
documento que se localiza en la parte superior del mismo.
Ver > Herramientas > Documento
Dar un nombre al documento y salvar.
Nota: Es muy importante dar el nombre a las pginas ya que es
la nica forma en que la pgina puede ser encontrada por un
buscador.
Edicin del texto
Se puede insertar texto en la ventana del documento o copiarlo
y pegarlo de otra fuente como un documento de Word y despus
16
Curso Bsico de Dreamweaver

darle formato a travs del panel Propiedades u hojas de estilo CSS
(Cascading Style Sheets).
Conforme escribimos texto y lo editamos en la vista de Diseo,
Dreamweaver genera el cdigo html. Si queremos ingresar cdigo
directamente debemos hacerlo desde la vista Cdigo.
Uso de Tablas
En cualquier pgina web, las tablas son indispensables para organizar
los elementos de nuestra pgina y controlar la ubicacin de texto e im
genes mediante el uso de celdas.
Las tablas se insertan en la pgina a travs del panel Insertar > Tabla del
menu Ventana.
1) Colocar el cursor en el lugar donde quiera insertarse la tabla
y dar un click sobre el botn de insercin de tablas: men
Ventana > Insertar > Tablas
2) En el cuadro de dilogo que aparece ingresar la siguiente
informacin:
Filas/Columnas: especifcar el nmero de flas y columnas
Cell padding: determina la cantidad de espacio entre el
contenido de la celda y el borde de la misma.
Cell Spacing: especifca la cantidad de espacio entre cada celda
sin incluir el borde exterior de la tabla.
Nota: Cuando no se asignan valores especfcos, la mayor parte
de los navegadores despliegan el cell padding como si tuviera
17
Curso Bsico de Dreamweaver

valor de 1 y el cell spacing a un valor de 2. Para asegurarse que
todos los navegadores muestren la tabla sin cell padding y cell
spacing, determinar como valores 0.
Ancho: indica el ancho de la tabla en pixeles o un porcentaje
determinado de la ventana del navegador.
Generalmente no es necesario establecer el alto de la tabla.
Borde: determina el ancho de los bordes de la tabla.
Nota: Cuando no se especifca el valor del borde, la mayor parte
de los navegadores muestran la tabla como si el borde hubiera
sido establecido con un valor de 1. Para asegurarse que todos los
navegadores muestren la tabla sin bordes el valor que se asigne al
borde debe ser 0.
Para ver los bordes de las celdas y la tabla cuando estos se les ha
asignado un valor de 0 , ir al menu Ver >Auxiliares visuales > Borde
de tablas.
Una vez creada una tabla y teniendola seleccionada se pueden modifcar
todos estos valores desde el panel de Propiedades.
Propiedades de las Tablas
Adems de las caracteraticas antes mencionadas, en el men
Propiedades de la tabla se pueden determinar otras caractersticas como:
Alineacin: determina donde aparecer la tabla, en relacin a otros
elementos en el mismo prrafo como texto o imgenes.
Las alineaciones ms com munes son derecha, izquierda, centrado y
default. Default, indica que el navegador debe utilizar su alineacin
por default.
Botones Borrar ancho de columna y Borrar alto de la fla: estos
botones eliminan los valores especifcados para el ancho y la altura
de las columnas e hileras de la tabla.
Botones Convertir ancho de la tabla a pixeles y Convertir alto de
la Tabla a pixeles: estos botones convierten todos los valores de la
tabla a pixels.
Botones Convertir Ancho de Tabla a porcentaje y Convertir
Alto de Tabla a porcentaje: estos botones convierten todos los
valores de la tabla a un porcentaje de del ancho de la ventana del
documento.
Color de fondo: es el color de fondo de la tabla.
Color del borde: es el color de los bordes de la tabla.
Propiedades de columnas, flas y celdas
Propiedades de tabla
18
Curso Bsico de Dreamweaver

Imagen de fondo: es la imagen de fondo de la tabla.
2. Cuando introduces un valor en una caja de texto, presionar Tab o
Enter (Windows) o Return (Mac) para aplicar el valor.
Propiedades de columnas, flas y celdas
Horiz: alnea el contenido de una celda en sentido horizontal
(izquierda por default pra celdas normales y centrado para celdas de
encabezado), derecha, izquierda o centro.
Vert: alnea el contenido de una celda en sentido vertical (a la mitad
por default), arriba, abajo, a la mitad, o en la lnea base.
Bg(top): selecciona la imagen de fondo.
Bg (botom): aplica color a la celda.
Borde: pone un borde a la celda.
Unir/Separar: Une o divide celdas.

No ajustar: previene que el texto colocado dentro de una celda
cambie de rengln automaticamente.
Encabezado: formatea una celda como encabezado (body y
centrado).
Cambiar el ancho o alto de una celda
Arrastrar manualmente las divisions de las celdas.
Agregar columnas o hileras
Seleccionar del menu Modifcar > Tabla > Insertar Columna-Fila.
Eliminar columnas o hileras
Seleccionar del men Modify/Table/Delete Colum-Row o seleccionar
las celdas que se desean eliminar y oprimir Suprimir.
Copiar celdas
Seleccionar las celdas y copiarlas com Command+C, ubicarse en el
lugar de destino y pegarlas con Command+V.
Insertar imgenes y texto a una tabla
Puede escribirse directamente dentro de las celdas de una tabla o pegar
texto proveniente de otras aplicaciones.
En el caso de las imgenes stas se insertan con el panel Insertar.
Creacin de ligas
Las ligas conectan los diferentes documentos del sitio, comunmente se
les conoce como hipertexto y botones.
Ligas absolutas y ligas relativas
Existen 3 formas de llamar a un documento ligado a travs del campo
Vnculo del panel Propiedades.
Ligas absolutas: Mantienen su exactitud sin importar la
localizacin del documento fuente, pero no ligan si el destino del
documento es movido.
Este tipo de liga debe utilizarse cuando ligamos a documentos
externos a nuestro sitio.
19
Curso Bsico de Dreamweaver

Ligas relativas a la raz: siempre empiezan en la raz del sitio
actual. Los caminos relativos a la raz comienzan con una diagonal
y le indican al servidor que inicie en la raz.
Un camino relativo a la raz es la mejor forma de ligar archivos
donde el contenido debe ser movido constantemente. Los caminos
relativos a la raz no son apropiados para sitios diseados par ser
vistos a nivel local como presentaciones, para esto se debern usar
ligas relativas al documento.
Nota: el contenido ligado con caminos relativos a la raz no
aparecen cundo los previsualizas localmente en un navegador, esto
se debe a que estos no reconocen caminos relativos a la raz (los
servidores si lo hacen) Para previsualizar este tipo de contenido es
necesrio colocar el sitio en un servidor remoto y conectarse a l.
Ligas relativas al documento: son relativas al folder que contiene
el archivo.
Creacin de ligas
Existen varias maneras de crear ligas:
Utilizar el cono apuntar a archivo del panel Propiedades
arrastrndolo hacia algn documento del Panel Archivos.
Escribir o buscar en el panel Inspector la ruta que debe seguir
la liga.
Utilizar anclas para acceder a posiciones especfcas dentro de un
documento
Hacer una liga a un e-mail, una nueva ventana o un script para
abrir programas de gestin de e-mail o accesar a Java Script.
Crear un ancla
Las anclas nos permiten realizar ligas a diferentes partes de un
documento
1) Colocar el cursor donde necesitamos que aparezca el ancla (el
lugar a donde nos llevar la liga)
2) En Ventana > Insertar > Comunes seleccionar dar click sobre el
cono de ancla.
3) En el cuadro de dilogo dar un nombre al ancla (minsculas y si
vamos a utilizar espacios usar el guin bajo)
4) Para ligar un texto u objeto en la misma pgina al ancla,
seleccionarlo y escribir en Propiedades, en el campo Link, el
signo # y el nombrre del ancla. Ejemplo: #exposicin
5) Si el ancla se encuentra en otra pgina, ligar a la pgina e
inmediatamente escribir el signo # y el nombre del ancla.
Ejemplo: archivo.html#exposicin
6) Tambin puede utilizarse el cono apuntar a archivo mientras
seleccionas el objeto que funcionar como liga y lo arrastras hacia
el ancla del documento abierto.
Otro tipo de ligas
1) Liga hacia un e-mail: Seleccionar un texto o imagen en la
pgina y en Window/Insert/Common seleccionar el icono de un
sobre y aparece un cuadro de dilogo donde escribiremos
el e mail al que queremos ligar.
2) Para lograr que un documento ligado aparezca en un lugar
determinado seleccionar en el panel properties
(Ventana > Propiedades) en el campo Target.
3) Cualquiera de las siguientes opciones:
blank: carga el documento ligado en una nueva ventana del
navegador.
20
Curso Bsico de Dreamweaver

parent: carga el documento ligado en el fraameset o la ventana
madre que contiene la liga. Si el frame que contiene la liga no esta
anidado, el documento ligado ocupar la ventana completa.
self: carga el documento ligado en el mismo frame o ventana. Este
destino aparece como el default, as que usualmente no tendrs que
especifcarlo.
Top: carga el documento ligado en la ventana completa moviendo
todos los frames existentes.
Referencias
Lynch, P. y Horton, S. (2001). Manual de Estilo Web. Principios de
Diseo bsico para la creacin de sitios web. Barcelona: Gustavo Gili.
www.webstyleguide.com
Pginas Web
www.adobe.com
www.lynda.com
www.w3.com
21