Tutorial de DreamWeaver (1)

Introduccin:
En el trabajo sobre este tutorial hemos utilizado las versiones de Dreamweaver 3 y 4 para que
este tutorial sea compatible con ambas versiones. Ambas versiones que tenemos estn en
ingls. Algunos de los nombres de los men!s y objetos en espa"ol los hemos obtenido del libro
de #scar $e"a% para la versi&n 4 de Dreamweaver supongo que los nombres no hab'an
cambiado% pero para evitar con(usiones% cuando indiquemos algo propio para Dreamweaver 4
que no est en Dreamweaver 3 pondremos los nombres originales en ingls junto con nuestra
traducci&n al castellano. En todo caso% como este tutorial tendr bastantes imgenes para
apoyar el te)to no tendrs problemas en ubicar los men!s y objetos en tu versi&n de
Dreamweaver en espa"ol.
*o se puede ense"ar en un tutorial de pocas pginas todo lo que aprenders de un libro de
3++ o ms pginas pero despus de seguir este tutorial de Dreamweaver sers capaz de
orientarte en su entorno% de dise"ar pginas sencillas y administrar tu sitio ,eb. -ampoco es la
intenci&n de ense"ar aqu' temas avanzados como hojas de estilo% D.-/0% 1ava2cript% etc.
2obre este tema consulta tutoriales o libros correspondientes. -ampoco hemos tocado el tema
de las capas porque lo hemos tratado ya en el tutorial espec'(ico3 -rabajo con capas en
Dreamweaver
*o se requiere ninguna e)periencia previa de Dreamweaver para seguir este tutorial pero
suponemos que sepas utilizar ,indows y aplicaciones para ,indows 4,ord o ,ord $e(ect por
ejemplo5% entiendas los trminos como por ejemplo 6barra de tareas6% 6men! conte)tual6% 6teclas
de acceso directo6% 6barra de men!s6% 6barra de herramientas6% y sepas como copiar% pegar%
insertar objetos y guardar tu trabajo.
Entorno de trabajo en Dreamweaver y creacin de una pgina Web:
Dreamweaver es un editor del tipo ,728,79% es decir% un editor visual que permite dise"ar las
pginas sin saber nada de .-/0. $ero nunca est de ms tener el conocimiento de este
lenguaje% los editores ,728,79 no son per(ectos y pueden cometer errores o generar tambin
bastante c&digo basura. $ara esto Dreamweaver dispone tambin del editor .-/0 o permite
con(igurar un editor .-/0 e)terno si as' lo deseamos. $ara ver el c&digo .-/0 pulsamos : ;+
y se abrir la ventana del editor% en la misma ventana tenemos el bot&n del editor e)terno para
utilizar otro programa de edici&n .-/0.
En el Dreamweaver 4 adems podemos tener ambas vistas3 c&digo y dise"o a la vez% tienes
esta opci&n en el men! 6<er6 o puedes usar los botones correspondientes de la barra de
herramientas que estn resaltados en rojo en esta imagen3
$ara crear una nueva pgina utiliza el men! 6Archivo6 = 6*uevo6. -ienes las opciones para
crear una nueva pgina o crear una pgina desde una plantilla previa.
$ara insertar objetos 4 por ejemplo% imgenes% tablas o animaciones :lash en tu pgina puedes
usar el men! 8nsertar o la ventana de objetos3
2i no la ves utiliza el men! 6<entana6 = 6#bjetos6 o >tr?:3.
$ara utilizar la ventana de los objetos de Dreamweaver% arrastra el icono del objeto que
necesites% por ejemplo el icono de la imagen hacia la pgina% y te aparecer la ventana del
dialogo para indicar la ubicaci&n de la imagen que quieres insertar.
2iempre puedes recurrir a la ventana propiedades de Dreamweaver para editar las propiedades
de un objeto3
0a ventana que ves en esta imagen corresponde a las propiedades del te)to% las opciones de la
ventana cambiarn seg!n el objeto que insertemos. $ara verla% pulsa el objeto con el bot&n
secundario en el objeto que quieras editar o utilizar el men! 6<entana6 @ 6$ropiedades6% o las
teclas >trl?:3.
o! objeto! de Dreamweaver acce!ible! de!de la ventana de "bjeto!:
2i pulsamos el peque"o triangulo que aparece en la parte superior derecha de la ventana de
objetos podemos acceder a di(erentes ventanas de objetos. A continuaci&n viene la descripci&n
de di(erentes ventanas y objetos de Dreamweaver3
#om$n:
Es la ventana que aparece por de(ecto y contiene los objetos ms comunes de Dreamweaver
In!ertar imagen @ para insertar objetos gr(icos3 (icheros .gi(% .jpg o .png.
In!ertar imagen de !u!titucin @ permite crear los e(ectos 6rollover6 @ botones o imgenes que
cambian su apariencia al pasar el cursor sobre ellas.
In!ertar tabla @ como su nombre lo indica sirve para insertar tablas. 0as tablas son un
elemento todav'a muy popular para colocar los contenidos de las pginas.
In!ertar dato! tabulare! @ $ermite insertar datos de una hoja de clculo.
In!ertar barra %ori&ontal @ el elemento .-/0 de(inido por la etiqueta A.BC muy popular para
separar los contenidos en una pgina ,eb.
In!ertar barra de e'ploracin @ son unas barras de navegaci&n creadas con tablas y
1ava2cript.
Dibujar capa @ este tema lo tratamos en nuestro tutorial de capas.
In!ertar !alto de l(nea @ agrega espacio adicional entre los objetos o l'neas de te)to 4la
etiqueta ADBC en .-/05.
In!ertar v(nculo de correo electrnico @ para insertar v'nculos de tipo 6mailto6 para abrir un
nuevo mensaje de correo con la direcci&n incluida en el campo 6$ara6. 2i quieres saber ms
sobre este tema lee este art'culo3 #utlooE E)press3 algunos accesos directos de utilidad
In!ertar )ec%a @ permite introducir la (echa y la hora de modi(icaci&n de la pgina.
In!ertar *la!% @ para insertar objetos creados con /acromedia :lash en tu pgina.
In!ertar +%oc,wave @ para insertar aplicaciones creadas con /acromedia Director.
In!ertar -enerator @ contenidos dinmicos de este programa de /acromedia basados en las
plantillas colocadas en el servidor.
In!ertar .T/ de *irewor,! @ inserta y convierte el c&digo nativo de /acromedia :ireworEs.
A$In!ertar !ubprograma @ para agregar applets 1ava a la pgina.
In!ertar 0ctive1 @ inserta objetos desarrollados con la tecnolog'a ActiveF de /icroso(t.
In!ertar 2lug3in @ para insertar los plugins para *etscape 4por ejemplo v'deo o sonido5.
In!ertar +erver3+ide Include @ las instrucciones agregadas por el servidor 42285% solo
podremos utilizar esta opci&n si nuestro servidor lo permite% los servidores gratuitos no lo
permiten.
#aractere!
$ermite insertar caracteres especiales en el documento% por ejemplo G H G% etc.
*ormulario!
$ara insertar (ormularios en una pgina ,eb% no hablaremos del tema en este tutorial porque
ser tratado en nuestro pr&)imo tutorial de Dreamweaver.
/arco!
$ermite crear pginas con marcos 46(rames65. *o trataremos este tema en este tutorial porque
estamos absolutamente en contra de su uso 4no son amigables para los navegantes ni para los
buscadores5. $re(erimos utilizar barras de navegaci&n. Es solo nuestra opini&n personal% si te
gustar'a utilizar marcos en tu ,eb encontrars la in(ormaci&n que necesites en cualquier
manual o libro de .-/0.
.ead
Esta ventana es muy importante3 nos permite insertar c&digo en la cabecera del documento.
In!ertar /eta @ son las etiquetas opcionales para los servidores ,eb% por ejemplo las etiquetas
de palabras clave o de descripci&n.
In!ertar palabra! clave @ la meta etiqueta de las palabras clave46Eeywords6 en .-/05 de
nuestra pgina. $uede ser !til en algunos buscadores aunque la mayor'a no le hace demasiado
caso.
In!ertar de!cripcin @ Es una meta etiqueta muy importante 46description6 en .-/05% trata de
colocarla siempre% muchos buscadores la toman en cuenta a la hora de inde)ar la pgina. Debe
ser una (rase completa que describa lo mejor posible el contenido y el prop&sito de nuestro
sitio.
In!ertar la actuali&acin @ /eta 6Be(resh6 en .-/0% obliga al navegador a re(rescar la pgina
pasado un intervalo de tiempo o cargar una pgina di(erente. /uy !til en los casos cuando
nuestra pgina hab'a cambiado de direcci&n y queremos que los navegantes que vengan a la
IB0 antigua sean redirigidos automticamente a la nueva direcci&n.
In!ertar ba!e @ esta opci&n nos sirve si tenemos todos los documentos en un servidor distinto
del de la pgina ra'z% en este caso si utilizamos esta meta etiqueta todos los v'nculos relativos
sern interpretados automticamente como absolutos% por ejemplo 68ntroduccion.htm6 se
interpretar'a como 6http3==www.svetlian.com=8ntroduccion.htm6 si hemos especi(icado
http3==www.svetlian.com como base.
In!ertar v(nculo @ permite establecer relaciones entre los documentos% esta opci&n es muy !til
para % por ejemplo% vincular rpidamente las hojas de estilo.
"bjeto! invi!ible!
0os objetos invisibles pueden ser puntos de (ijaci&n con nombre% comentarios% secuencias de
comandos o espacio indivisible 4ste !ltimo ya no e)iste en Dreamweaver 45.
2unto de )ijacin con nombre @ nos sirve para poder navegar dentro de un documento. >on
este objeto podemos (ijar un destino para el v'nculo.
#omentario 3 permite insertar te)to de comentarios que permiten ayudar a interpretar el c&digo
pro ser'an invisibles desde el navegador% en .-/0 corresponder'a a la etiquetas AJ@@ @@C.
+ecuencia! de comando! @ con esta opci&n podemos insertar 1ava2cript y <D2cript en
nuestro documentos.
E!pacio indivi!ible @ inserta un espacio en blanco 4KnbspL en .-/05% ya no e)iste en
Dreamweaver 4.
7 ahora% despus de leer todo esto prueba crear algo en tu pgina% escribir algo de te)to%
insertar una imagen por ejemplo.
$uedes visualizar tu pgina en el navegador desde el men! 6Archivo6 = 6<ista previa en el
navegador6 46$review en browser65. $or de(ecto Dreamweaver mostrar nuestro navegador
predeterminado que tengamos instalado pero siempre podemos agregar un navegador
secundario desde el mismo men!.
#reacin y ge!tin de un !itio Web
Espero que ya pudiste crear una pgina sencilla con Dreamweaver pero ahora todav'a nos
hace (alta aprender a manejar nuestro sitio ,eb como un conjunto.
$ara hacerlo utilizaremos el men! 62itio=*uevo sitio6% no aparecer una ventana como sta3
Desde esta ventana podemos determinar la ubicaci&n local y remota de los (icheros de nuestro
sitio.
2i especi(icamos el tipo del servidor remoto como 6:-$6 podremos sincronizar nuestra carpeta
local con el servidor remoto.
Ina vez creado el sitio siempre podremos abrir y administrarlo desde el men! 62itio6.
#tra opci&n muy !til de Dreamweaver es el mapa del sitio% para verlo% despus de crear tu sitio
utiliza este bot&n3
Dueno% aqu' terminamos con esta peque"a introducci&n a Dreamweaver. Estamos muy
conscientes que no es su(iciente para dominar este complejo programa pero si lo seguiste con
atenci&n y (uiste capaz de investigar por tu cuenta ya tienes una buena base por donde
comenzar.
Trabajo con capa! en DreamWeaver (1):
0a ,,, hab'a su(rido un pro(undo cambio con la aparici&n% en ;MMN del .-/0 dinmico que
debe su potencia al uso de las capas. 2u desarrollo e implementaci&n (ue tormentoso a causa
de la e)istencia de m!ltiples navegadores y la ausencia de un estndar aceptado por todos los
navegadores. A!n en estos d'as% cuando muchos de estos problemas de compatibilidad a!n
persisten y si piensas aplicar las capas en tu ,eb debes tener en cuenta que ser inaccesible
para los usuarios de algunos de los navegadores% por ejemplo de las versiones 3.+ que todav'a
e)isten. 0a decisi&n es tuya si te interesa estar a la !ltima o que tu ,eb sea accesible para la
mayor'a. 2e puede tambin buscar un compromiso% por ejemplo% tener un script que detecte la
versi&n del navegador y muestre la versi&n de tu pgina optimizada para este navegador en
concreto.
OPu es una capaQ Es una especie del contenedor de .-/0 con el c&digo que vamos a
manipular. /acromedia Dreamweaver desde Dreamweaver 3 hace el trabajo con capas
bastante sencillo.
0as capas por lo general se de(inen con las etiquetas AdivC y AspanC y pueden contener
cualquier objeto% por ejemplo un (ormulario% un (ragmento de te)to o un pluguin. 0as capas
proporcionan un control muy potente sobre la posici&n de estos objetos 4control a nivel de
pi)eles5 que permite controlar qu objetos estarn adelante y que objetos estarn detrs.
E)isten dos tipos de capas3 las capas >22 controladas por medio de las etiquetas AdivC y
AspanC y las capas de *etscape 4etiquetas AlayerC e AilayerC.
Trabajo con capa! en DreamWeaver(4)
#rear una capa:
E)isten varias maneras de crear una capa. Ina es el dibujado de capa que consiste en el uso
del icono de la capa en la ventana de objetos3
y dibujar la capa con el tama"o que deseemos% o arrastrar el icono con lo que se crear'a una
capa del tama"o por de(ecto. -ambin podemos utilizar el men! 68nsertar6 y seleccionar 6>apa6
para conseguir el mismo resultado.
$rueba generar algunas capas desde el men! insertar. $ara evitar que las capas se solapen
entre s' utiliza el men! 6<er6 @ 6Evitar solapamiento de capas6 4Dreamweaver 35. $ara los
usuarios del Dreamweaver 43 esta opci&n esta ahora en el men! 6/odi(icar6 @ 6Arreglar6
46Arrange6 @ no disponemos de Dreamweaver 4 en castellano% por eso siempre que indiquemos
algo espec'(ico de la versi&n 4 vamos a poner su nombre original en ingls junto con nuestra
traducci&n al espa"ol que puede utilizar una traducci&n distinta de la nuestra5.
>on la creaci&n de una nueva capa Dreamweaver genera unos puntos de fijacin3
2i deseamos los podemos ocultar desde el men! 6Edici&n6 @ 6$re(erencias6 y seleccionando
6Elementos invisibles6 y deseleccionar despus 6$untos de (ijaci&n para capas6.
Trabajo con capa! en DreamWeaver (5):
Ahora veremos c&mo se trabaja con la Paleta de capas. 0a paleta de capas es un cuadro que
permite visualizar todas las capas de un documento. $uedes acceder a ella desde 6<entana6 @
6>apas6. # puedes usar la tecla de acceso rpido% la asignaci&n de esta tecla puede variar
seg!n el idioma o la versi&n del programa% en mi caso es :R% en la versi&n Dreamweaver 3 en
espa"ol me parece que era :;;% t! lo puedes averiguar simplemente accediendo al men!
6<entana6 @ 6>apas6 y ah' est la tecla que debes usar. Al abrir la paleta de capas vers la lista
de las capas% su nombre y su n!mero asignado3
0a paleta de capas nos ayuda a controlar las capas. 2i queremos evitar el solapamiento de las
capas debemos marcar la casilla 6Evitar solapamientos6 46$revent overlaps65. $odemos ocultar
las capas pulsando en el ojo. >uando un capa est oculta el ojo aparecer cerrado. -ambin
podemos cambiar el nombre de las capas 4para eso hacemos el doble clicE en el nombre de la
capa que queremos cambiar5. >on el mismo procedimiento podemos cambiar el identi(icador
de la capa 4el n!mero5.
#apa! anidada!
8gual que con las tablas% podemos usar la tcnica de objetos anidados% anidar las capas 4es
decir% colocar una capa dentro de la otra5. $ara crear una capa anidada podemos dibujar
primero la capa padre y despus arrastrar hacia su interior el icono 6>apa6 desde la ventana de
objetos. #% podemos hacerlo desde la paleta de capas arrastrando una capa dentro de la otra
con la tecla >trl presionada. 2i tuviste problemas para hacer lo anterior y no lograste anidar las
capas% abre el men! 6Edici&n6 @ 6$re(erencias6 y marca la casilla 6Anidar al crear en una capa6.
Trabajo con capa! en DreamWeaver6
2ropiedade! de una capa:
Trabajar con la! propiedade! de una capa
<amos a ver ahora las propiedades de las capas que podemos controlar y modi(icar desde la
ventana de propiedades de esta capa3
0a imagen corresponde a Dreamweaver 4 en ingls% abajo te ponemos estos valores tal como
te deben aparecer en la versi&n en espa"ol3
;. ID @ permite especi(icar el nombre que identi(ique la capa en la paleta de capas.
R. I& y +up 40 y - en ingls5 especi(ican la ubicaci&n de la capa en relaci&n con el ngulo
superior izquierdo.
3. 0n y 0l 4, y .5 @ anchura y altura de la capa.
4. 7ndice 8 4S@8nde)5 @ el orden que le corresponde a la capa en la paleta de capas.
T. 9i! @ el estado inicial de visualizaci&n de la capa.
U. Im6 )ondo 4Dg 8mage5@ la imagen de (ondo de la capa.
V. #ol6 *ondo(:g #olor) @ el color de (ondo de la capa.
N. De!b6 46#ver(low65 @ Esta opci&n solo e)ista para las capas >22 4es decir las capas
de(inidas por las etiquetas AdivC y AspanC y permite determinar la acci&n cuando una capa
supera su tama"o por de(ecto. 0as acciones disponibles son3 9i!ible @ aumenta el tama"o de la
capa hasta hacer visible su contenido% .idden @ recorta el tama"o de la capa y oculta los
contenidos que no quepan% +croll @ pone barras de desplazamiento a la capa% 0uto @ lo mismo
que anterior pero la barra de desplazamiento solo se pone en el caso si el contenido de una
capa e)cede sus l'mites.
M. Eti;ueta 4-ag5 @ determian el tipo de las etiquetas 4AdivC% AspanC% AlayerC o AilayerC5.
Trabajo con capa! en DreamWeaver6
#onver!ione! entre capa! y tabla!6
#onvertir una capa en una tabla y vicever!a:
#onvertir capa! en tabla!:
Dreamweaver 33 En el men! 6/odi(icar6 seleccionar 6/odo de dise"o6 @ 6>onvertir capas en
tablas6. En la versi&n 4 4ingls53 es 6/odi(y6 @ 6>onvert6 @ 6-ables to 0ayers6. <eremos una
ventana con las siguientes opciones3
;. /! preci!o @ crear una una celda para cada celda y ms celdas adicionales donde hagan
(alta.
R. /(nimo @ no es la mejor opci&n3 contraer las celdas vac'as.
3. <!ar -I*! tran!parente! @ es una opci&n muy !til% convierte las celdas vac'as en gi(s
transparentes.
4. #entrar en pgina @ por de(ecto% si no marca esta opci&n la tabla estar alineada a la
izquierda.
#onvertir tabla! en capa!:
Dreamweaver 33 >on el cursor situado en el documento vamos al men! 6/odi(icar6 seleccionar
6/odo de dise"o6 @ 6>onvertir tablas en capas6. En la versi&n 4 4ingls53 es 6/odi(y6 @ 6>onvert6
@ 60ayers to -ables 6. <eremos una ventana con las siguientes opciones3
;. /o!trar cuadr(cula y aju!tar a la cuadr'cula @ (acilita la colocaci&n de capas por medio de
una cuadr'cula.
R. Evitar !olapamiento de capa! @ evita que se solapen las capas 4merece la pena tenerlo
activado5.
3. /o!trar paleta de capa! @ mostrar la paleta de capas una vez (inalizada la conversi&n.
Trabajo con capa! en Dreamweaver (=)
Trabajar con la l(nea de tiempo
0a l'nea de tiempo es un recurso e)clusivo de D.-/0 y se utiliza para controlar las
propiedades de las capas dentro de una serie de (rames 4marcos5 que correspondan a una
l'nea temporal. 2i estabas utilizando :lash de /acromedia este concepto no ser nuevo para ti%
de hecho% la l'nea de tiempo en Dreamweaver tiempo es ms que similar a la del :lash3
$ermite crear animaciones modi(icando las propiedades de las capas y de las imgenes. $ara
acceder a las l'neas de tiempo debemos utilizar el men! 6/odi(icar6 @ 60'neas de tiempo
>ada celda corresponde a un marco. $odemos agregar capas e imgenes a la l'nea de tiempo
simplemente con arrastrarlas hacia el interior de la ventana de la l'nea de tiempo y asignar los
comportamientos despus.
$ara asignar comportamiento 4por ejemplo% ejecutar un sonido% hacer que se muestre un
mensaje% etc primero seleccionamos el marco en la l'nea donde aparece la letra 6D6 y despus
utilizamos el men! 6?6 en la ventana de comportamientos para seleccionar el comportamiento
para este marco3
Fin