Está en la página 1de 81

MACROMEDIA DREAMWEAVER MX

DREAM WEAVER M X
1. - Introduc c ión
2. - Cre ac ión de l s itio
2. 1. - Sitio loc al
2. 2. - Sitio re m oto
3. - Cre ac ión de una pág ina
4. - Pane l de prope rtie s
5. - Config urar pág ina (Propie rtie s , Bac kg round, Links ,te xt.)
6. - Cre ac ión de hipe rvínc ulos
7. - Ins e rc ión de im ág e ne s
8. - Ins e rc ión de Inte rac tivos
8. 1. - Im ag e
8. 2. - navig ation bar
8. 3. - Flas h botton
8. 4. - Flas h te xt
8. 5. - HTML de Fire works MX
9. - Config urac ión de l nave g ador a trabajar
10. - Editar lis tas de nave g adore s
10. 1. - Com m on (Im ag e , Rollove r, Table , Navig ation bar, Horizontal
rule , Date , Flas h, Fire works , Ge ne rator, Bottons , Shoc kwave )
10. 2. - Layout
10. 3. – Te xt, Table , Fram e s , Form s , Te m plate s , Charac te rs , Me dia,
He ads , Sc ript, Applic ations
11. – Te m plate s
12. – Fram e s
12. 1. – Pane l fram e s
13. – Com portam ie ntos , pane l be haviours
13. 1. – s onido (MP3, Wav, Midi)
13.2. – Video
14. – Correo electronico
15. – Base de datos (Application)
16. – Crear base de datos en access
16.1. – Concepto de base de datos
16.2. – Tabla
16.3. – Campos
16.4. – Registros
17. – Configurar sitio
17.1. – Sitio local
17.2. – Sitio remoto
17.3. – Tipos de conexión de BD
18. – Conexión a la base de datos (Recordset)
18.1. – visualizar registros
18.2. – Filtrar registro
18.3. – Recordset navigation bar
18.4. – Recordset insertion form
18.5. – Delete recordset
18.6. – Recordset update form
18.7. – Busqueda de regitro (Query and vanced)
18.8. – Master detail page set

Instituto de Computación Activa de México S. C. 1


MACROMEDIA DREAMWEAVER MX

19. - Recordset navigation status


20. – Repeat region
21. – Login confirm
22. – Restring page
23. – Redirection page.

Instituto de Computación Activa de México S. C. 2


MACROMEDIA DREAMWEAVER MX

www.icam.com.mx

MACROMEDIA DREAMWEAVER
MX
Introducción
Al final del capítulo el alumno será capaz de...
Cre ar un s itio loc al
Cre ar un s itio re m oto
Cre ar una pag ina nue va
Conoc e r las propie dade s de un obje to
Apre nde r a c onfig urar una pag ina
Cre ar Hipe rvínc ulos
Ins e rtar im ág e ne s
Com prue ba tu avanc e y m arc a c on una P los obje tivos alc anzados

Instituto de Computación Activa de México S. C. 3


MACROMEDIA DREAMWEAVER MX

INTRODUCCIÓN
Mac rom e dia Dre am we ave r e s un e ditor de c ódig o HTML profe s ional
para e l dis e ño vis ual y la adm inis trac ión de s itios y pág inas We b. Tan
s i pre fie re c ontrolar m anualm e nte e l c ódig o HTML c om o s i pre fie re
trabajar e n un e ntorno de e dic ión vis ual, Dre am we ave r le pe rm ite
pone rs e m anos a la obra rápidam e nte y le fac ilita he rram ie ntas útile s
para m e jorar s u e xpe rie nc ia e n dis e ño We b.
Las func ione s de e dic ión vis ual de Dre am we ave r tam bié n le pe rm ite n
añadir dis e ño y func ionalidad rápidam e nte s in e s c ribir una s ola líne a
de c ódig o. Pue de ve r todos los e le m e ntos o ac tivos de l s itio y
arras trarlos de s de un pane l fác il de us ar dire c tam e nte has ta un
doc um e nto. Ag ilic e s u flujo de trabajo de de s arrollo m e diante la
c re ac ión y e dic ión de im ág e ne s e n Mac rom e dia Fire works y s u
im portac ión dire c ta a Dre am we ave r, o bie n añadie ndo obje tos Flas h
que pue de c re ar dire c tam e nte e n Dre am we ave r.

Dre am we ave r s e pue de pe rs onalizar totalm e nte . Utilic e Dre am we ave r


para c re ar s us propios obje tos y c om andos , m odific ar m é todos
abre viados de te c lado e inc lus o e s c ribir c ódig o JavaSc ript para
am pliar las pos ibilidade s que ofre c e Dre am we ave r c on nue vos
c om portam ie ntos , ins pe c tore s de propie dade s e inform e s de s itios .
Adm inis trac ión de l Sitio
Un s itio We b e s un c onjunto de doc um e ntos vinc ulados c on atributos
c om partidos , tale s c om o te m as re lac ionados , un dis e ño s im ilar o un
obje tivo c om ún.

Mac rom e dia Dre am we ave r e s una he rram ie nta de c re ac ión y


adm inis trac ión de s itios , por lo que pue de utilizarla para c re ar s itios
We b c om ple tos , ade m ás de doc um e ntos individuale s . Para obte ne r
re s ultados óptim os , dis e ñe y planifique e l s itio We b ante s de c re ar las
pág inas que va a c onte ne r e l s itio.
2 Cre ac ión de l s itio
Una ve z que c re e la e s truc tura de l s itio, de be rá e s table c e r e l nue vo
s itio e n Dre am we ave r. Es table c e r e s te s itio loc al e n Dre am we ave r
s ig nific a que pue de utilizar Dre am we ave r c on FTP para c arg ar e l s itio
e n e l s e rvidor We b, para c ontrolar y m ante ne r autom átic am e nte los
vínc ulos y para c om partir arc hivos c on otras pe rs onas que c olabore n
c on us te d. Lo m ás ade c uado e s c onfig urar e l s itio loc al e n
Dre am we ave r ante s de c om e nzar a c re ar las pág inas .

Instituto de Computación Activa de México S. C. 4


MACROMEDIA DREAMWEAVER MX

2. 1 Sitio loc al
El s itio loc al e s la e s truc tura de l s itio que us te d e s table c e e n e l e quipo
para que c onte ng a todas las c arpe tas , ac tivos y arc hivos de un s itio
c onc re to.
La c arpe ta raíz loc al de l s itio de be rá s e r e s pe c ífic a de e s e s itio. Una
bue na ide a e s c re ar una c arpe ta llam ada Sitios y, pos te riorm e nte ,
c re ar c arpe tas raíz loc ale s de ntro de e s a c arpe ta, una para c ada s itio
c on e l que trabaje .

2. 2 SITIO REM OTO

El pas o s ig uie nte a la hora de c onfig urar un s itio re m oto c ons is te e n


de te rm inar dónde s e va a s ituar e l s itio, e s de c ir, qué s e rvidor lo
albe rg ará. Su c lie nte , s u e m pre s a o s u prove e dor de s e rvic ios Inte rne t
(ISP) dis pone n probable m e nte de un s e rvidor c onfig urado para
albe rg ar pág inas We b (Inte rne t o intrane t). Pre g unte al adm inis trador
de l s is te m a o a s u c lie nte e l nom bre de dic ho s e rvidor y c óm o s e
re alizan las trans fe re nc ias de arc hivos .

En partic ular, ave rig üe s i s e utiliza FTP para c one c tar c on e l s e rvidor
o s i pue de m ontar e l s e rvidor c om o una unidad de dis c o c on ac c e s o de

Instituto de Computación Activa de México S. C. 5


MACROMEDIA DREAMWEAVER MX

re d de s de s u e s c ritorio. Si c one c ta utilizando FTP, ave rig üe e l nom bre


de l s e rvidor FTP y de te rm ine e l dire c torio de l s e rvidor, as í c om o la
inform ac ión de c one xión y de c ontras e ña.

De s pué s de c re ar un s itio loc al, us e e l c om ando De finir s itios para


añadir o c am biar la inform ac ión de l s e rvidor re m oto as oc iado y las
pre fe re nc ias de de s prote c c ión/ prote c c ión.

Para as oc iar un s e rvidor re m oto a un s itio loc al e xis te nte :


1 Elija De finir s itios e n e l m e nú e m e rg e nte de s itios ac tuale s de la
ve ntana Sitio, o bie n e lija Site > Edit s ite s
2 Apare c e rá un c uadro de diálog o c on los s itios de finidos ac tualm e nte .
Se le c c ione un s itio e xis te nte y hag a c lic e n Editar.
Si no dis pone de s itios de finidos ac tualm e nte , c re e un s itio loc al ante s
de c ontinuar.
3 En la lis ta Cate g oría de la izquie rda, hag a c lic e n Datos re m otos .
4 Elija una de las s ig uie nte s opc ione s de Ac c e s o al s e rvidor:
Utilic e Ning uno s i no tie ne pre vis to c arg ar e l s itio e n un s e rvidor. A
c ontinuac ión, hag a c lic e n Ac e ptar y om ita e l re s to de e s te
proc e dim ie nto.

Utilic e Loc al/ re d s i e l s e rvidor We b e s tá m ontado c om o unidad de re d


(Windows ) o c om o s e rvidor Apple Talk o NFS (M ac intos h), o s i lo e s tá
e je c utando e n e l e quipo loc al. Hag a c lic e n e l ic ono de c arpe ta para
loc alizar y s e le c c ionar la c arpe ta de l s e rvidor donde s e alm ac e nan los
arc hivos . Si de s e a que e l pane l Re m oto de la ve ntana Sitio s e ac tualic e
autom átic am e nte a m e dida que s e añadan y borre n arc hivos ,
s e le c c ione la opc ión Ac tualizar lis ta arc hivos re m otos autom . Para
aum e ntar la ve loc idad de trans fe re nc ia de arc hivos al s itio re m oto,
de je e s ta opc ión de s ac tivada. Para ac tualizar m anualm e nte la ve ntana
Sitio e n c ualquie r m om e nto, hag a c lic e n e l botón Ac tualizar de dic ha
ve ntana. Hag a c lic e n Ac e ptar y om ita e l re s to de e s te proc e dim ie nto.

Utilic e FTP s i s e c one c ta c on e l s e rvidor We b a travé s de FTP.

Instituto de Computación Activa de México S. C. 6


MACROMEDIA DREAMWEAVER MX

Para c one c tar c on un s e rvidor We b m e diante FTP:


1 Introduzc a e l nom bre de l s e rvidor FTP e n e l que c arg ará los
arc hivos de l s itio We b. El nom bre de l s e rvidor FTP e s e l nom bre
c om ple to e n Inte rne t de un s is te m a inform átic o, c om o
ftp. m inds pring . c om . Introduzc a e l nom bre c om ple to de l s e rvidor s in
te xto adic ional. Sobre todo, no añada un nom bre de protoc olo de lante
de l nom bre de l s e rvidor. Por e je m plo:
Corre c to: ftp.m inds pring . c om
Inc orre c to: ftp:/ / ftp. m inds pring .c om
Inc orre c to: m inds pring . c om

2 Introduzc a e l nom bre de l dire c torio de l s e rvidor de l s itio re m oto


donde s e alm ac e nan los doc um e ntos vis ible s para e l públic o.

3 Introduzc a e l nom bre de c one xión y la c ontras e ña que utiliza para


c one c tar c on e l s e rvidor FTP.
Dre am we ave r g uarda la c ontras e ña de form a pre de te rm inada.
De s ac tive Guardar s i pre fie re que e l s is te m a le s olic ite la c ontras e ña
c ada ve z que c one c te c on e l s e rvidor re m oto.

4 Se le c c ione las opc ione s de s e adas de c ortafue g os para e l s itio:


Ac tive la opc ión Us ar c ortafue g os s i c one c ta c on e l s e rvidor re m oto
de s de e l otro lado de un c ortafue g os . Para obte ne r m ás inform ac ión
s obre las opc ione s de c ortafue g os .
Si s u c onfig urac ión de c ortafue g os re quie re e l us o de FTP pas ivo (que
pe rm ite que e l s oftware loc al c onfig ure la c one xión FTP e n lug ar de
s olic itárs e lo al s e rvidor re m oto), s e le c c ione Utilizar FTP pas ivo. Si no
e s tá s e g uro, c ons ulte al adm inis trador de l s is te m a.
5Hag a c lic e n done .

3 CREACIÓN DE UNA PÁGINA NUEVA

Mac rom e dia Dre am we ave r ofre c e dive rs as form as de c re ar un


doc um e nto. Pue de c re ar doc um e ntos HTML nue vos y vac íos ; abrir un
doc um e nto HTML e xis te nte , aunque no haya s ido c re ado c on
Dre am we ave r; o bie n c re ar un nue vo doc um e nto bas ado e n una
plantilla.

Tam bié n pue de abrir arc hivos de te xto no HTML, c om o arc hivos
JavaSc ript, arc hivos de c orre o e le c trónic o de te xto norm al o arc hivos
de te xto g uardados c on proc e s adore s de te xto o e ditore s de te xto. No
podrá utilizar todas las he rram ie ntas de e dic ión de doc um e ntos de
Dre am we ave r e n un doc um e nto de te xto norm al, pe ro s í podrá utilizar
func ione s bás ic as de e dic ión de te xto. Entre las pos ible s razone s para
abrir un doc um e nto de te xto fig uran e ditar y de purar c ódig o
JavaSc ript, c ons ultar e l c onte nido de l arc hivo de c onfig urac ión de
Dre am we ave r o abrir un c orre o e le c trónic o que c ontie ne un frag m e nto

Instituto de Computación Activa de México S. C. 7


MACROMEDIA DREAMWEAVER MX

de c ódig o HTML para c opiar e l c ódig o y pe g arlo e n otro doc um e nto.

Para c re ar un doc um e nto HTML vac ío e n una nue va ve ntana de


doc um e nto, re alic e una de e s tas ope rac ione s :

En la barra de de m e nús e lija

File > ne w> c re ate , s e abre un c uadro de dialog o e n e l c ual le pe rm ite


e s c og e r uno de las tantas hojas de trabajo.

Si abre la vis ta de Códig o (e n la ve ntana de doc um e nto) o e l ins pe c tor


de c ódig o, podrá ve r que e l nue vo doc um e nto no e s tá totalm e nte
vac ío, pue s c ontie ne e tique tas htm l, he ad y body para que pue da
c om e nzar a trabajar. Mie ntras e s c riba e n la vis ta de Dis e ño de la
ve ntana de doc um e nto o ins e rte obje tos tale s c om o tablas e im ág e ne s ,
podrá de jar abie rto un e ditor de c ódig o y obs e rvar c óm o s e c re a e l
c ódig o HTML. Para obte ne r m ás inform ac ión s obre los e ditore s de
c ódig o.

Para abrir un arc hivo HTML e xis te nte , lle ve a c abo una de e s tas
ope rac ione s :
Se le c c ione File > Ope n.
Si e l arc hivo s e ha c re ado c on Mic ros oft Word, e lija File > Im port >
Word HTML
Si e lig e Im portar HTML de Word, Dre am we ave r abre e l arc hivo y le
pe rm ite e s pe c ific ar opc ione s para e lim inar c ódig o aje no a HTML
g e ne rado por Word. (Mic ros oft Word 97 y las ve rs ione s pos te riore s
c ue ntan c on e l c om ando Guardar c om o HTML, que añade c ódig o
HTML inne c e s ario al c onve rtir un doc um e nto a e s te form ato. ) Para
obte ne r m ás inform ac ión.
Nota: No s e pue de im portar dire c tam e nte un arc hivo de M ic ros oft
Word (. doc ) a Dre am we ave r. Si de s e a im portar e l c onte nido de un
arc hivo de Word, inic ie Word y g uarde e l arc hivo c om o HTML ante s de
im portar e l arc hivo HTML re s ultante a Dre am we ave r.

Instituto de Computación Activa de México S. C. 8


MACROMEDIA DREAMWEAVER MX

Para g uardar un doc um e nto:


1 Se le c c ione File > s ave as .

2 Proporc ione un nom bre para e l arc hivo y vay a has ta e l lug ar e n e l
que de s e a g uardar e l arc hivo.
Nota: Dre am we ave r añade autom átic am e nte .htm (Windows ) o . htm l
(Mac intos h) al nom bre de l arc hivo c uando apare c e e l c uadro de
diálog o. (Pue de c ontrolar la e xte ns ión de arc hivo que de be añadirs e
utilizando una opc ión de las pre fe re nc ias g e ne rale s . ) Para g uardar un
arc hivo c om o te xto norm al e n Windows , as íg ne le la e xte ns ión de
nom bre de arc hivo . txt. Para g uardar un arc hivo c om o te xto norm al e n
Mac intos h, s e nc illam e nte borre .htm l de l nom bre de l arc hivo
Mac intos h. (Para que Dre am we ave r ve a e l arc hivo c om o HTML de
nue vo, g uárde lo otra ve z c on la e xte ns ión . htm l o . htm . ) De s pué s de
g uardar un arc hivo c om o te xto, Dre am we ave r no inte rpre ta ning ún
c ódig o HTML de l arc hivo.
Cuando g uarde los doc um e ntos , e vite utilizar e s pac ios y c arac te re s
e s pe c iale s e n los nom bre s de arc hivos y c arpe tas s ie m pre que s e a
pos ible . En c onc re to, no utilic e c arac te re s e s pe c iale s (c om o é , ç o ¥ )
ni s ig nos de puntuac ión (c om o dos puntos , barras inc linadas o puntos )
e n los nom bre s de arc hivos que de s e e c oloc ar e n un s e rvidor re m oto;
m uc hos s e rvidore s c am bian e s tos c arac te re s durante la c arg a, lo que
provoc a que s e rom pan los vínc ulos e xis te nte s c on los arc hivos .
As im is m o, no c om ie nc e los nom bre s de los arc hivos c on núm e ros .

3 Hag a c lic e n e l botón Guardar para g uardar e l arc hivo.

4. PANEL DE PROPIEDADES (PROPERTIES)

El pane l de propie dade s o prope rtie s le pe rm ite c orre g ir las


c arac te rís tic as de un e le m e nto s e le c c ionado e n la pág ina, tal c om o
te xto o alg ún obje to ins e rtado.
La m ayoría de los c am bios que us te d re alic e a las c arac te rís tic as s e

Instituto de Computación Activa de México S. C. 9


MACROMEDIA DREAMWEAVER MX

aplic an inm e diatam e nte e n e l doc um e nto s in e m barg o los c am bios no


s e s olic itan as ta que us te d hag a c lic e n obje to ya s e a te xto o im ag e n.
El c onte nido de l pane l de prope rtie s varía e n los tipos de obje tos
s e le c c ionados .
Para m ás inform ac ión de alg una c arac te rís tic a e s pe c ífic a s e le c c iona
e l obje to y e n la e s quina s upe rior de re c ha de l pane l de prope rtie s
hag a c lic e n e l ic ono de s ig no de inte rrog ac ión.

para m os trar y oc ultar e l pane l de prope rtie s

vaya a la barra de m e nú
s e le c c ione Windows >prope rtie s
Tam bié n pue de abrirla c on la c om binac ión de te c las CTRL + F3

5. CONFIGURAR PÁGINA (PROPERTIES,


BACKGROUND, LINKS, TEXT)

Presione ctrl Dre am we ave r le pe rm ite trabajar e n s u doc um e nto de dife re nte s
+ F3 para form as : utilizando la vis ta Dis e ño, utilizando la vis ta Códig o o
abrir o cerrar e m ple ando una vis ta c om binada que m ue s tra e l dis e ño y e l c ódig o de l
la barra de
doc um e nto. Pue de c am biar la vis ta e n la que de s e a trabajar
propiedades s e le c c ionando una vis ta e n la barra de he rram ie ntas de
Dre am we ave r.

Instituto de Computación Activa de México S. C. 10


MACROMEDIA DREAMWEAVER MX

Conform e c re e y trabaje c on los doc um e ntos , Dre am we ave r g e ne rará


autom átic am e nte e l c ódig o HTML s ubyac e nte . Para e xam inar o e ditar
e s te c ódig o, utilic e uno de los e ditore s de c ódig o de Dre am we ave r: la
vis ta de Códig o de la ve ntana de doc um e nto o e l ins pe c tor de c ódig o.
La vis ta de Dis e ño de Dre am we ave r m ue s tra una re pre s e ntac ión
vis ual de l doc um e nto, e n lug ar de l c ódig o s ubyac e nte . Cuando trabaje
e n la vis ta de Dis e ño, podrá optar e ntre dos vis tas para re alizar e l
dis e ño: vis ta de Dis pos ic ión o vis ta Es tándar. Pue de s e le c c ionar e s tas
vis tas e n e l pane l Obje tos , bajo Ve r.
En la vis ta de Dis pos ic ión, pue de dis e ñar una dis pos ic ión de pág ina e
ins e rtar g ráfic os , te xto y otros e le m e ntos m ultim e dia.

esione ctrl. + Utilic e e l c uadro de diálog o Propie dade s de la pág ina para e s pe c ific ar
ara abrir las dive rs as opc ione s de la pág ina. Para abrir e l c uadro de diálog o
opiedades de Propie dade s de la pág ina, e lija M odify > pag e prope rtie s o pre s ione la
pagina s ig uie nte c om binac ión CTRL + J.

Title e s pe c ific a e l título de la pág ina que apare c e e n la barra de título


de la ve ntana de doc um e nto y la ve ntana de la m ayoría de los
nave g adore s .

Bac kg round im ag e y Bac kg round e s pe c ific an una im ag e n y un c olor


de fondo para la pág ina.

Te xt y Links de fine n los c olore s pre de te rm inados de te xto, vínc ulos ,


vínc ulos vis itados y vínc ulos ac tivos . Tam bié n pue de c ontrolar e s tos
c olore s utilizando hojas de e s tilos CSS.

Le ft m arg in y Top Marg in e s pe c ific an los tam años de los m árg e ne s de


la pág ina e n la e tique ta body para Mic ros oft Inte rne t Explore r
s olam e nte . Ne ts c ape Navig ator pre s c inde e s tos valore s y utiliza los de
m arg in width y m arg in he ig ht. Para obte ne r un re s ultado óptim o e n
los dos nave g adore s , proporc ione valore s de m árg e ne s para am bos
nave g adore s e n lug ar de para uno s olo; c om ple te los c uatro valore s de
m árg e ne s e n lug ar de s ólo dos . Para as e g urars e de que no apare c e n
m árg e ne s e n ning ún nave g ador, c onfig ure los c uatro valore s c on e l
valor 0. Dre am we ave r no m ue s tra m árg e ne s de pág ina e n la ve ntana
de doc um e nto. Utilic e Vis ta pre via e n e l nave g ador para ve r los
m árg e ne s .

Doc um e nt Enc oding . Es pe c ific a la c odific ac ión e m ple ada para los
c arac te re s de l doc um e nto. Para ing lé s y otros idiom as de Europa
Oc c ide ntal, e lija Oc c ide ntal. Otras opc ione s pos ible s s on:
c e ntroe urope o, c irílic o, g rie g o, is landé s , japoné s , c hino tradic ional,

Instituto de Computación Activa de México S. C. 11


MACROMEDIA DREAMWEAVER MX

c hino s im plific ado y c ore ano. Si no apare c e ning una opc ión para la
c odific ac ión que de s e a utilizar, e lija Otro para c re ar un doc um e nto
c on la c odific ac ión que us e s u s is te m a ope rativo. Todos los idiom as
as iátic os utilizan c odific ac ión de doble byte .

Para c am biar las fue nte s que e m ple a Dre am we ave r para m os trar
c ada c odific ac ión, e lija Edit > Edit with e xte rnal e ditor y s e le c c ione
Fue nte s / c odific ac ión. Las fue nte s que s e le c c ione e n e s te pane l de
pre fe re nc ias Fue nte s / c odific ac ión no afe c tarán al m odo e n que los
vis itante s ve n las pág inas , y a que é s tos e s pe c ific an s us propias
fue nte s (para una de te rm inada c odific ac ión) e n los nave g adore s We b.
Para obte ne r m ás inform ac ión.

Trac ing iam g e e s pe c ific a una im ag e n que s e va a e m ple ar c om o g uía


para c opiar un dis e ño. Es ta im ag e n s ólo s irve c om o re fe re nc ia, ya que
no apare c e c uando e l doc um e nto s e m ue s tra e n un nave g ador.

Im ag e trans pare nc y de te rm ina la opac idad de la im ag e n de ras tre o,


de s de c om ple tam e nte trans pare nte has ta c om ple tam e nte opac a.

Doc um e nt folde rs . Mue s tra la c arpe ta e n la que s e g uarda e l


doc um e nto ac tual, s i ha s ido g uardado.

Site foldrs m ue s tra la ruta de la c arpe ta raíz loc al de l s itio e n la que s e


ha g uardado e l doc um e nto ac tual, e n e l c as o de que s e haya g uardado.

6 CREACIÓN DE HIPERVINCULOS

Utilic e e l pane l de prope rtie s y e l ic ono de s e ñalizac ión de arc hivo


para c re ar vínc ulos de s de una im ag e n, un obje to o te xto has ta otro
doc um e nto o arc hivo.

Para c re ar vínc ulos e ntre doc um e ntos utilizando e l ic ono de c arpe ta o


el c uadro de te xto Vínc ulo:
1 Se le c c ione te xto o una im ag e n e n la vis ta de Dis e ño de la ve ntana de
doc um e nto.

Instituto de Computación Activa de México S. C. 12


MACROMEDIA DREAMWEAVER MX

2 Abra e l pane l de prope rtie s (Windows > prope rtie s ) y lle ve a c abo
una de e s tas ope rac ione s :

Hag a c lic e n e l ic ono de c arpe ta s ituado a la de re c ha de l c am po Link


para loc alizar y s e le c c ionar un arc hivo.

La ruta de l doc um e nto vinc ulado apare c e rá e n e l c am po URL. Utilic e


e l m e nú e m e rg e nte Re lativo a de l c uadro de diálog o Se le c c ionar
arc hivo HTML para indic ar s i la ruta e s re lativa al doc um e nto o a la
raíz. A c ontinuac ión, hag a c lic e n Se le c c ionar.

Nota: Al c am biar e l tipo de ruta e n e l c am po Re lativo a, Dre am we ave r


utilizará e s ta s e le c c ión c om o e l tipo de ruta pre de te rm inado para
futuros vínc ulos has ta que la c am bie .

En e l c am po Vínc ulo, introduzc a la ruta y e l nom bre de arc hivo de l


doc um e nto. Para e s table c e r un vínc ulo c on un doc um e nto de l s itio,
introduzc a una ruta re lativa al doc um e nto o re lativa a la raíz. Para
e s table c e r un vínc ulo c on un doc um e nto e xte rno al s itio, introduzc a
una ruta abs oluta que inc luya e l protoc olo (por e je m plo, http:/ / ).
Pue de utilizar e s te s is te m a para introduc ir un vínc ulo para un arc hivo
que aún no se ha c re ado.
3 Se le c c ione una ubic ac ión para abrir el doc um e nto.
Para que e l doc um e nto vinc ulado apare zc a e n un lug ar dis tinto de la
ve ntana o e l m arc o ac tual, s e le c c ione una opc ión e n e l m e nú
e m e rg e nte De s tino de l ins pe c tor de propie dade s :
_blank c arg a e l doc um e nto vinc ulado e n una nue va ve ntana s in
nom bre de l nave g ador.

_pare nt c arg a e l doc um e nto vinc ulado e n e l m arc o o la ve ntana padre


de l m arc o que c ontie ne e l vínc ulo. Si e l m arc o que c ontie ne e l vínc ulo
no e s tá anidado, e l doc um e nto vinc ulado s e c arg ará e n la ve ntana
c om ple ta de l nave g ador.
_s e lf c arg a e l doc um e nto vinc ulado e n e l m is m o m arc o o la m is m a
ve ntana que e l vínc ulo. Es te de s tino e s e l pre de te rm inado, por lo que
norm alm e nte no e s pre c is o e s pe c ific arlo.

_top c arg a e l doc um e nto vinc ulado e n la ve ntana c om ple ta de l


nave g ador, e lim inando de e s ta form a todos los m arc os .

Sug e re nc ia: Si todos los vínc ulos de la pág ina s e e s table c e rán c on e l
m is m o de s tino, pue de e s pe c ific ar e s te de s tino una ve z e lig ie ndo
Ins e rt > He ad tang s > Bas e y s e le c c ionando la inform ac ión de
de s tino.

Para obte ne r inform ac ión s obre e l e s table c im ie nto de vínc ulos c on


m arc os . Para c re ar un vínc ulo c on un doc um e nto utilizando e l ic ono
de s e ñalizac ión de arc hivo:

1 Se le c c ione e l te xto o una im ag e n e n la vis ta de Dis e ño de la ve ntana


de doc um e nto.

Instituto de Computación Activa de México S. C. 13


MACROMEDIA DREAMWEAVER MX

2 Arras tre e l ic ono de s e ñalizac ión de arc hivo s ituado a la de re c ha de l


c am po Vínc ulo e n e l pane l de prope rtie s y s e ñale otro doc um e nto
abie rto, un punto de fijac ión vis ible e n un doc um e nto abie rto o un
doc um e nto de la ve ntana Sitio. El c am po Vínc ulo s e ac tualizará para
m os trar el vínc ulo.
Nota: El doc um e nto abie rto o e l arc hivo de la ve ntana Sitio al que
s e ñale pas ará a un s e g undo plano e n la pantalla m ie ntras re aliza la
s e le c c ión.

3 Libe re e l botón de l ratón.

Para c re ar un vínc ulo de s de una s e le c c ión e n un doc um e nto abie rto:


1 Se le c c ione te xto e n la vis ta de Dis e ño de la ve ntana de doc um e nto.
2 Pre s ione m ayús . y, al m is m o tie m po, arras tre la s e le c c ión.
Mie ntras arras tra la s e le c c ión, apare c e rá e l ic ono de s e ñalizac ión de
arc hivo.
3 Se ñale otro doc um e nto abie rto, un punto de fijac ión vis ible e n un
doc um e nto abie rto o un doc um e nto de la ve ntana Sitio.
4 Libe re e l botón de l ratón.

Para c re ar un vínc ulo utilizando e l m apa de l s itio y e l ic ono de


s e ñalizac ión de arc hivo:
1 En la ve ntana Sitio, ac tive las vis tas Arc hivos de l s itio y Mapa de l
s itio pre s ionando e l ic ono Mapa de l s itio m ie ntras e lig e Mapa y
arc hivos .

2 Se le c c ione un arc hivo HTML de l m apa de l s itio.


Apare c e rá e l ic ono de s e ñalizac ión de arc hivo junto al arc hivo.

3 Arras tre e l ic ono de s e ñalizac ión de arc hivo y s e ñale otro arc hivo de l
m apa de l s itio o un arc hivo loc al de la vis ta Arc hivos de l s itio.

4 Libe re e l botón de l ratón.


Se c oloc ará un vínc ulo de hipe rte xto c on e l nom bre de l arc hivo
vinc ulado e n la parte infe rior de l arc hivo HTML s e le c c ionado. Es te
m é todo ofre c e bue nos re s ultados para c re ar vínc ulos rápidam e nte e n
un s itio que s e e s tá c re ando.

7 INSERCION DE IM ÁGENES

Instituto de Computación Activa de México S. C. 14


MACROMEDIA DREAMWEAVER MX

Al ins e rtar una im ag e n e n un doc um e nto de Dre am we ave r, e l


prog ram a g e ne ra autom átic am e nte una re fe re nc ia al arc hivo e n e l
c ódig o HTML. Para as e g urars e de que e s ta re fe re nc ia e s c orre c ta, e l
arc hivo de im ag e n de be rá e s tar e n e l s itio ac tual. Si no lo e s tá,
Dre am we ave r le pre g untará s i de s e a c opiar e l arc hivo e n la c arpe ta
raíz.

Para ins e rtar una im ag e n:

1 Lle ve a c abo una de e s tas ope rac ione s :


Sitúe e l punto de ins e rc ión e n e l lug ar de la ve ntana de doc um e nto
donde de s e a que apare zc a la im ag e n y , a c ontinuac ión, e lija Ins e rt >
Im ag e o hag a c lic e n e l botón Ins e rtar im ag e n de la c ate g oría
Com m on de l pane l Obje tos .
Sitúe e l punto de ins e rc ión e n e l lug ar de la ve ntana de doc um e nto
donde de s e a que apare zc a la im ag e n y , a c ontinuac ión, pre s ione
Control+Alt+I (Windows ).
Arras tre e l botón Ins e rtar im ag e n de s de e l pane l Obje tos has ta la
pos ic ión de s e ada de la ve ntana de doc um e nto.
Arras tre una im ag e n de s de e l pane l Ac tivos has ta la pos ic ión de s e ada
de la ve ntana de doc um e nto. A c ontinuac ión, s ig a c on e l pas o 3.
Arras tre una im ag e n de s de la ve ntana Sitio has ta la pos ic ión de s e ada
de la ve ntana de doc um e nto. A c ontinuac ión, s ig a c on e l pas o 3.
Arras tre una im ag e n de s de e l e s c ritorio has ta la pos ic ión de s e ada de
la ve ntana de doc um e nto. A c ontinuac ión, s ig a c on e l pas o 3.
2 En e l c uadro de diálog o que apare c e , hag a c lic e n Exam inar para
e le g ir un arc hivo o e s c riba la ruta de l arc hivo de im ag e n.
Si e s tá trabajando e n un doc um e nto que no e s tá g uardado,
Dre am we ave r g e ne rará una re fe re nc ia de arc hivo:/ / al arc hivo de
im ag e n. Al g uardar e l doc um e nto e n e l s itio, Dre am we ave r c onvie rte
la re fe re nc ia e n una ruta re lativa al doc um e nto.

Instituto de Computación Activa de México S. C. 15


MACROMEDIA DREAMWEAVER MX

3 De fina las propie dade s de la im ag e n e n e l pane l de PROPERTIES.

Instituto de Computación Activa de México S. C. 16


MACROMEDIA DREAMWEAVER MX

Cue s tionario 1

1. - De finic ión de una pag ina We b

2. - De finic ión de un Sitio

3. - De finic ión de un portal

4. - De finic ión de un Sito Loc al y Re m oto

5. - Paque te que ins tala C:\ ine tpub\ wwwroot

6. - Que e s e l IIS y para que s is te m a ope rativo

7. - Que e s e l PWS Y para que s is te m a ope rativo

8. - De finic ión de Hipe rvínc ulo

Instituto de Computación Activa de México S. C. 17


MACROMEDIA DREAMWEAVER MX

www.icam.com.mx

MACROMEDIA DREAMWEAVER
MX
CAPITULO 2
Al final del capítulo el alumno será capaz de...
Ins e rtar inte rac tivos
Ins e rtar im ág e ne s de s us tituc ión
Cre ar barras de nave g ac ión
Ins e rtar botone s de flas h
Ins e rtar te xto flas h
Ins e rtar obje tos HTML Fire works
&RPSUXHEDWXDYDQFH\PDUFDFRQXQDPORVREMHWLYRVDOFDQ]DGRV

,16(5&,21'(,17(5$&7,926

Instituto de Computación Activa de México S. C. 18


MACROMEDIA DREAMWEAVER MX

Una im ag e n de s us tituc ión e s una im ag e n que c am bia c uando e l


punte ro pas a s obre e lla. Una im ag e n de s us tituc ión c ons ta e n re alidad
de dos im ág e ne s : la im ag e n princ ipal (la que apare c e al c arg ars e
inic ialm e nte la pág ina) y la im ag e n de s us tituc ión (la que apare c e al
pas ar e l punte ro s obre la im ag e n princ ipal). Am bas im ág e ne s de be n
te ne r e l m is m o tam año. Si tie ne n tam años dis tintos , Dre am we ave r
c am bia autom átic am e nte e l tam año de la s e g unda im ag e n para que s e
ajus te a las propie dade s de la prim e ra.
Las im ág e ne s de s us tituc ión e s tán c onfig uradas de m ane ra
pre de te rm inada para re s ponde r al e ve nto Mous e Ove r. Para obte ne r
inform ac ión s obre la c onfig urac ión de una im ag e n para que re s ponda
a otro e ve nto (por e je m plo, un c lic de l ratón) o s obre la e dic ión de una
im ag e n de s us tituc ión para que m ue s tre otra im ag e n.
Una form a m ás c om ple ja de im ag e n de s us tituc ión e s la barra de
nave g ac ión. Para c re ar una barra de nave g ac ión, utilic e Ins e rt >
Inte rac tive Im ag e > Navig ation bar.

Para c re ar una im ag e n de s us tituc ión:

1 En la ve ntana de doc um e nto, s itúe e l punto de ins e rc ión e n e l lug ar


donde de s e a que apare zc a la im ag e n de s us tituc ión.

2 Introduzc a la im ag e n de s us tituc ión m e diante uno de e s tos m é todos :


En la c ate g oría Com m on de l pane l Obje tos , hag a c lic e n e l ic ono
Ins e rtar im ag e n de s us tituc ión.
En la c ate g oría Com m on de l pane l Obje tos , arras tre e l ic ono Ins e rtar
im ag e n de s us tituc ión has ta la pos ic ión de s e ada de la ve ntana de
doc um e nto.
Elija Ins e rt >Inte rac tive Im ag e s > Rollove rs Im ag e .
Apare c e rá e l c uadro de diálog o Ins e rtar im ag e n de s us tituc ión.

3 En e l c am po Im ag e Nam e , introduzc a un nom bre para la im ag e n de


s us tituc ión.
4En e l c am po Im ag e n orig inal, hag a c lic e n Exam inar y s e le c c ione o
e s c riba la ruta de la im ag e n que de s e a m os trar c uando s e c arg ue la
pág ina.

5 En e l c am po Rollove r Im ag e , hag a c lic e n Exam inar y s e le c c ione o


e s c riba la ruta de la im ag e n que de s e a m os trar c uando e l punte ro pas e
s obre la im ag e n orig inal.

6 Si de s e a pre c arg ar las im ág e ne s e n la c ac hé de l nave g ador de m odo


que s e c arg ue n m ás rápidam e nte , s e le c c ione la opc ión Carg a pre via
de im ág e ne s .

7 En e l c am po whe n c lic ke d, g o to URL, hag a c lic e n brows e y

Instituto de Computación Activa de México S. C. 19


MACROMEDIA DREAMWEAVER MX

s e le c c ione o e s c riba la ruta de l arc hivo que de s e a abrir c uando un


us uario hag a c lic e n la im ag e n de s us tituc ión.

Nota: Si no e s table c e un vínc ulo para la im ag e n, Dre am we ave r


ins e rtará un vínc ulo nulo (# ) e n e l c ódig o HTML re lativo al
c om portam ie nto de s us tituc ión. Si e lim ina e l vínc ulo nulo, la im ag e n
de s us tituc ión de jará de func ionar.
8Hag a c lic e n Ac e ptar para c e rrar e l c uadro de diálog o Ins e rtar
im ag e n de s us tituc ión.

52//29(5,0$*(

Un rollove r iam g e e s una im ag e n de s us tituc ión que e n e l m om e nto de


pas ar e l m ous e c am bia
Para un rollove r im ag e s ig a las s ig uie nte s ins truc c ione s :

1 En la ve ntana de doc um e nto, s itúe e l punto de ins e rc ión e n e l lug ar


donde de s e a que apare zc a la im ag e n de s us tituc ión.

2 Introduzc a la im ag e n de s us tituc ión m e diante uno de e s tos m é todos :


En la c ate g oría Com m on de l pane l Obje tos , hag a c lic e n e l ic ono
Ins e rtar im ag e n de s us tituc ión.
En la c ate g oría Com m on de l pane l Obje tos , arras tre e l ic ono Ins e rtar
im ag e n de s us tituc ión has ta la pos ic ión de s e ada de la ve ntana de
doc um e nto.
Elija Ins e rt >Inte rac tive Im ag e s > Rollove rs Im ag e .
Apare c e rá e l c uadro de diálog o Ins e rtar im ag e n de s us tituc ión.

3 En e l c am po Im ag e Nam e , introduzc a un nom bre para la im ag e n de


s us tituc ión.
4En e l c am po Im ag e n orig inal, hag a c lic e n Exam inar y s e le c c ione o
e s c riba la ruta de la im ag e n que de s e a m os trar c uando s e c arg ue la

Instituto de Computación Activa de México S. C. 20


MACROMEDIA DREAMWEAVER MX

pág ina.

5 En e l c am po Rollove r Im ag e , hag a c lic e n Exam inar y s e le c c ione o


e s c riba la ruta de la im ag e n que de s e a m os trar c uando e l punte ro pas e
s obre la im ag e n orig inal.

6 Si de s e a pre c arg ar las im ág e ne s e n la c ac hé de l nave g ador de m odo


que s e c arg ue n m ás rápidam e nte , s e le c c ione la opc ión Carg a pre via
de im ág e ne s .

7 En e l c am po whe n c lic ke d, g o to URL, hag a c lic e n brows e y


s e le c c ione o e s c riba la ruta de l arc hivo que de s e a abrir c uando un
us uario hag a c lic e n la im ag e n de s us tituc ión.

Nota: Si no e s table c e un vínc ulo para la im ag e n, Dre am we ave r


ins e rtará un vínc ulo nulo (# ) e n e l c ódig o HTML re lativo al
c om portam ie nto de s us tituc ión. Si e lim ina e l vínc ulo nulo, la im ag e n
de s us tituc ión de jará de func ionar.
8Hag a c lic e n Ac e ptar para c e rrar e l c uadro de diálog o Ins e rtar
im ag e n de s us tituc ión.

1$9,*$7,21%$5

Un navig ation bar s e c om pone de una im ag e n o un c onjunto de


im ág e ne s c uya vis ualizac ión c am bia s e g ún las ac c ione s que re aliza e l
us uario. Los navig ation bar pe rm ite n de s plazars e fác ilm e nte e ntre las
pág inas y los arc hivos de un s itio.
Ante s de ins e rtar un navig ation bar, c re e un c onjunto de im ág e ne s
para los e s tados que s e m os trarán c on c ada e le m e nto de nave g ac ión.
Un e le m e nto de navig ation bar s e pue de c ons ide rar c om o un botón, ya
que la hac e r c lic e n é l, lle va al us uario a otra pág ina.
Un e le m e nto de navig ation bar pue de te ne r c uatro e s tados :
Up im ag e : la im ag e n que apare c e c uando e l us uario aún no ha he c ho
c lic e n e l e le m e nto o inte rac tuado c on é l. Por e je m plo, pare c e c om o s i
no s e hubie ra he c ho c lic e n e l e le m e nto que s e e nc ue ntra e n e s te
e s tado.

Ove r im ag e : la im ag e n que apare c e c uando e l punte ro s e m ue ve

Instituto de Computación Activa de México S. C. 21


MACROMEDIA DREAMWEAVER MX

s obre la im ag e n. Cam bia la aparie nc ia de l e le m e nto (por e je m plo,


pue de apare c e r m ás c laro) para indic ar a los us uarios que pue de n
inte rac tuar c on é l.

Down im ag e : la im ag e n que apare c e de s pué s de hac e r c lic e n e l


e le m e nto. Por e je m plo, c uando un us uario hac e c lic e n un e le m e nto,
s e c arg a una nue va pág ina y la barra de nave g ac ión s ig ue
m os trándos e , pe ro e l e le m e nto e n e l que s e ha he c ho c lic apare c e
os c ure c ido para indic ar que s e ha s e le c c ionado.
Ove r while down im ag e : la im ag e n que apare c e c uando e l punte ro
pas a s obre la im ag e n Abajo de s pué s de habe r he c ho c lic e n e l
e le m e nto. Por e je m plo, e l e le m e nto pue de apare c e r ate nuado o g ris .
Pue de utilizar e s te e s tado para indic ar vis ualm e nte a los us uarios que
no pue de n volve r a hac e r c lic e n e l e le m e nto m ie ntras s e e nc ue ntre n
e n e s ta parte de l s itio.
No e s ne c e s ario inc luir im ág e ne s de barra de nave g ac ión para los
c uatro e s tados . Por e je m plo, e s pos ible que s ólo ne c e s ite los e s tados
Arriba y Abajo.
Pue de c re ar una barra de nave g ac ión, c opiarla e n otras pág inas de l
s itio, utilizarla c on m arc os y e ditar los c om portam ie ntos de la pág ina
para m os trar dis tintos e s tados a m e dida que ac c e de a las pág inas

)/$6+%27721

Instituto de Computación Activa de México S. C. 22


MACROMEDIA DREAMWEAVER MX

El obje to de flas h botton pe rm ite pe rs onalizar e ins e rtar un c onjunto


de botone s Flas h pre dis e ñados .
Nota: De be rá g uardar e l doc um e nto ante s de ins e rtar un obje to de
botón o de te xto Flas h.

Para ins e rtar un obje to de Flas h Botton:

1 Mie ntras s e e nc ue ntra e n la vis ta de Dis e ño de la ve ntana de


doc um e nto, s e le c c ione m e dia e n pane l de obje tos y pre s ione e l botón
Ins e rtar Flas h botton e n e l pane l Obje tos o e lija Ins e rt > Inte rac tive
im ag e s > Flas h botton. Tam bié n pue de arras trar e l ic ono de Flas h
botton s obre la ve ntana de doc um e nto.
Apare c e rá e l c uadro de diálog o Ins e rtar botón Flas h.

2 Se le c c ione e l e s tilo de botón que de s e e e n la lis ta Style .


Ve rá un e je m plo de l botón e n e l c am po Mue s tra. Pue de c oloc ar e l
ratón e nc im a de la m ue s tra para ve r c óm o func iona e n e l nave g ador.
Sin e m barg o, e l c am po Mue s tra no s e ac tualiza autom átic am e nte para
m os trar los c am bios re alizados e n e l te xto o la fue nte . Es tos c am bios
apare c e rán e n la vis ta de Dis e ño.

3 En e l c am po botton te xt (opc ional), e s c riba e l te xto que de s e a


m os trar.
Por e je m plo, e s c riba Pre s ione aquí Es te c am po s ólo ac e pta c am bios s i
e l botón s e le c c ionado tie ne un parám e tro {Button Te xt} de finido. Es to
s e pue de obs e rvar e n e l c am po Mue s tra. El te xto que e s c riba
re e m plazará {Button Te xt} c uando pre vis ualic e e l arc hivo.

4 En e l c am po Font, e s pe c ifique un tam año de fue nte y s e le c c ione la


fue nte que de s e a utilizar e l m e nú e m e rg e nte .
Sólo e s ne c e s ario re alizar s e le c c ione s de fue nte y tam año s i e l botón
tie ne parám e tros de te xto de finidos . Si la fue nte pre de te rm inada de un
botón no e s tá dis ponible e n e l s is te m a, s e le c c ione otra fue nte e n e l
m e nú e m e rg e nte . Te ng a e n c ue nta que no ve rá la fue nte s e le c c ionada
e n e l c am po Mue s tra, aunque pue de hac e r c lic e n Aplic ar para
ins e rtar e l botón e n la pág ina y ve r qué aparie nc ia te ndrá e l te xto.

5 En e l c am po Link (opc ional), introduzc a un vínc ulo abs oluto o


re lativo al doc um e nto para e l botón.
No s e adm ite n vínc ulos re lativos al s itio porque los nave g adore s no los
re c onoc e n e n las pe líc ulas Flas h. Si utiliza un vínc ulo re lativo al
doc um e nto, g uarde e l arc hivo SWF e n e l m is m o dire c torio que e l
arc hivo HTML. Los nave g adore s inte rpre tan los vínc ulos re lativos al
doc um e nto de dis tintas form as y , por tanto, al g uardar los vínc ulos e n
e l m is m o dire c torio s e g arantiza s u c orre c to func ionam ie nto.

6 En e l c am po targ e t (opc ional), e s pe c ifique un m arc o o una ve ntana

Instituto de Computación Activa de México S. C. 23


MACROMEDIA DREAMWEAVER MX

de de s tino para c arg ar e l vínc ulo de l botón Flas h.

7 En e l c am po Bg c olor (opc ional), e s table zc a e l c olor de l fondo de la


pe líc ula Flas h. Utilic e e l s e le c tor de c olore s o e s c riba un valor
he xade c im al para la We b (c om o # FFFFFF).

8 En e l c am po s ave as , introduzc a un nom bre de arc hivo para g uardar


e l nue vo arc hivo SWF.
Pue de utilizar e l nom bre de arc hivo pre de te rm inado (por e je m plo,
button1.s wf) o e s c ribir uno nue vo. Si e l arc hivo c ontie ne un vínc ulo
re lativo al doc um e nto, de be rá g uardarlo e n e l m is m o dire c torio que e l
doc um e nto HTML ac tual para m ante ne r los vínc ulos re lativos al
doc um e nto.

9 Hag a c lic e n Ge t m ore s tyle s para pas ar al s itio Mac rom e dia
Exc hang e y de s c arg ar m ás e s tilos de botón.
Para obte ne r m ás inform ac ión.

10 Hag a c lic e n Apply o pre s ione OK para ins e rtar e l botón Flas h e n la
ve ntana de doc um e nto.
Sug e re nc ia: Se le c c ione Aplic ar para ve r los c am bios re alizados e n la
vis ta de Dis e ño. Mie ntras m antie ne e l c uadro de diálog o abie rto
pue de c ontinuar re alizando c am bios e n e l botón.

Para m odific ar un obje to de Flas h botton:


1 En la vis ta de Dis e ño, s e le c c ione e l obje to de Flas h botton.

2 En e l pane l de prope rtie s m os trará las propie dade s de l Flas h botton.


Pue de re alizar c am bios e n e l pane l de prope rtie s . Es tos c am bios
m odific an los atributos HTML c om o anc ho, alto y c olor de fondo.

3 Para re alizar c am bios e n e l c onte nido, m ue s tre e l c uadro de diálog o


Ins e rtar Flas h botton utilizando uno de e s tos m é todos :
Hag a doble c lic e n e l obje to de Flas h botton.
Hag a c lic e n Edit e n e l pane l de prope rtie s .
Hag a c lic c on e l botón de re c ho (Windows ) o m ie ntras pre s iona la
te c la Control (M ac intos h) y e lija Edit e n e l m e nú c onte xtual.

4 En e l c uadro de diálog o Ins e rt Flas h botton, e dite los c am pos


de s c ritos e n e l proc e dim ie nto ante rior.
En la vis ta de Dis e ño, pue de c am biar e l tam año de l obje to fác ilm e nte
utilizando los m ane jadore s de c am bio de tam año. Pue de re s table c e r
e l tam año orig inal de l obje to s e le c c ionando Re s table c e r tam año e n e l
ins pe c tor de propie dade s .
Para ve r c óm o s e re produc e e l obje to de Flas h botton e n la ve ntana de
doc um e nto:
1 En la vis ta de Dis e ño, s e le c c ione e l obje to de Flas h botton.
2 En e l pane l de prope rtie s , hag a c lic e n e l botón ve rde Re produc ir.

Instituto de Computación Activa de México S. C. 24


MACROMEDIA DREAMWEAVER MX

3 Hag a c lic e n e l botón rojo De te ne r para te rm inar la pre vis ualizac ión.
Nota: No s e pue de e ditar e l obje to de Flas h botton m ie ntras s e e s tá
re produc ie ndo.

Convie ne pre vis ualizar s ie m pre e l doc um e nto e n e l nave g ador para
c om probar e xac tam e nte la aparie nc ia que te ndrá e l botón Flas h.

)/$6+7(;7

El obje to de Flas h te xt pe rm ite c re ar e ins e rtar una pe líc ula Flas h que
s ólo c ontie ne te xto. Es to pe rm ite c re ar una pe que ña pe líc ula de
g ráfic os ve c toriale s c on fue nte s de dis e ño y e l te xto que e lija.

Para ins e rtar un obje to de te xto Flas h:

1 Mie ntras s e e nc ue ntra e n la vis ta de Dis e ño de la ve ntana de


doc um e nto, s e le c c ione m e dia e n pane l de obje tos y pre s ione e l botón
Flas h te xt e n e l pane l Obje tos o e lija Ins e rt > inte rac tive im ag e s >
Flas h Te xt.
Apare c e rá e l c uadro de diálog o Ins e rtar te xto Flas h.

2 Se le c c ione una fue nte e n e l m e nú e m e rg e nte Font.


Es te m e nú m ue s tra todas las fue nte s True Type c arg adas ac tualm e nte

Instituto de Computación Activa de México S. C. 25


MACROMEDIA DREAMWEAVER MX

e n e l s is te m a.

3 Introduzc a un tam año de fue nte (de puntos ) e n e l c am po Size .

4 Es pe c ifique los atributos de e s tilo, c om o ne g rita o c urs iva, y la


aline ac ión de l te xto hac ie ndo c lic e n los botone s de l e s tilo
c orre s pondie nte .

5 En e l c am po Color, e s table zc a e l c olor de l te xto utilizando e l s e le c tor


de c olore s o introduc ie ndo un valor he xade c im al para la We b (c om o
# FFFFFF).
6 En e l c am po Rollove r c olor, e s table zc a e l c olor que apare c e c uando
e l punte ro pas a s obre e l obje to de te xto Flas h. Utilic e e l s e le c tor de
c olore s o e s c riba un valor he xade c im al para la We b (c om o # FFFFFF).
7 Introduzc a e l te xto de s e ado e n e l c am po Te xto.
Para ve r e l e s tilo de fue nte que s e m ue s tra e n e l c am po Te xto, ac tive
la c as illa que dic e s how font.

8 Si de s e a as oc iar un vínc ulo c on e l obje to de Flas h te xt, introduzc a un


vínc ulo abs oluto o re lativo al doc um e nto e n e l c am po link.
No s e adm ite n vínc ulos re lativos al s itio porque los nave g adore s no los
re c onoc e n e n las pe líc ulas Flas h. Si utiliza un vínc ulo re lativo al
doc um e nto, g uarde e l arc hivo SWF e n e l m is m o dire c torio que e l
arc hivo HTML. Los nave g adore s inte rpre tan los vínc ulos re lativos al
doc um e nto de dis tintas form as y , por tanto, al g uardar los vínc ulos e n
e l m is m o dire c torio s e g arantiza s u c orre c to func ionam ie nto.

9 Si ha introduc ido un vínc ulo, pue de e s pe c ific ar un m arc o o una


ve ntana de de s tino para c arg ar e s e vínc ulo e n e l c am po Targ e t.

10 En e l c am po Bg c olor, e lija un c olor de fondo para e l te xto. Utilic e e l


s e le c tor de c olore s o e s c riba un valor he xade c im al para la We b (c om o
# FFFFFF).

11 En e l c am po s ave as , introduzc a un nom bre para e l arc hivo.


Pue de utilizar e l nom bre de arc hivo pre de te rm inado (por e je m plo,
te x1. s wf) o e s c ribir uno nue vo. Si e l arc hivo c ontie ne un vínc ulo
re lativo al doc um e nto, de be rá g uardarlo e n e l m is m o dire c torio que e l
doc um e nto HTML ac tual para m ante ne r los vínc ulos re lativos al
doc um e nto.

12 Hag a c lic e n Apply o pre s ione e l botón OK para ins e rtar e l Flas h
te xt e n la ve ntana de doc um e nto.
Si hac e c lic e n Apply, e l c uadro de diálog o pe rm ane c e rá abie rto y
podrá pre vis ualizar e l te xto e n e l doc um e nto.

Instituto de Computación Activa de México S. C. 26


MACROMEDIA DREAMWEAVER MX

+70/),5(:25.6

Dre am we ave r pe rm ite ins e rtar c ódig o HTML g e ne rado por Fire works ,
c om ple to c on im ág e ne s as oc iadas , divis ione s y JavaSc ript, e n un
doc um e nto. Es ta c arac te rís tic a de ins e rc ión fac ilita la tare a de
ag re g ar tablas o m apas de im ág e ne s c re ados e n Fire works e n un
doc um e nto de Dre am we ave r.

Para ins e rtar c ódig o HTML de Fire works e n un doc um e nto de


Dre am we ave r:
1 En Dre am we ave r, g uarde e l doc um e nto e n un s itio de finido.

2 Coloque e l punto de ins e rc ión e n e l doc um e nto donde de s e e que


c om ie nc e e l c ódig o HTML ins e rtado.

3 Sig a uno de e s tos proc e dim ie ntos :


Se le c c ione Ins e rt > Inte rac tive Im ag e s > Fire works HTML.
Hag a c lic e n e l botón Ins e rtar Fire works HTML de la c ate g oría
Com m on de l pane l Obje tos .

4 En e l c uadro de diálog o que apare c e a c ontinuac ión, hag a c lic e n


Brows e para s e le c c ionar e l arc hivo HTML de Fire works que de s e e .

5 s e le c c ione s la c as illa de opc ión de le te file afte r ins e rtion para


de s plazar e l arc hivo HTML a la Pape le ra de re c ic laje (Windows ).
Utilic e e s ta opc ión e n c as o de no ne c e s itar e l arc hivo HTML de
Fire works de s pué s de ins e rtarlo. Es ta opc ión no afe c ta al arc hivo PNG
orig e n as oc iado c on e l arc hivo HTML.

Instituto de Computación Activa de México S. C. 27


MACROMEDIA DREAMWEAVER MX

Nota: Si e l arc hivo HTML s e e nc ue ntra e n una unidad de re d, s e


e lim ina de form a pe rm ane nte , no s e de s plaza a la Pape le ra de
re c ic laje o Pape le ra.
6 Hag a c lic e n OK para ins e rtar e l c ódig o HTML, junto c on s us
im ág e ne s , divis ione s y JavaSc ript as oc iados , e n e l doc um e nto de
Dre am we ave r.

Instituto de Computación Activa de México S. C. 28


MACROMEDIA DREAMWEAVER MX

Cue s tionario 2

1. - De finic ión de barra de nave g ac ión

2. - Opc ión que pe rm ite inte rac tuar c on fire wors k

3. - Un Hipe rvínc ulo c re ado e n fire wors k pue de s e r


m odific ado e n dre am we ave r

Fals o ( ) ve rdade ro ( )

Instituto de Computación Activa de México S. C. 29


MACROMEDIA DREAMWEAVER MX

www.icam.com.mx

MACROMEDIA DREAMWEAVER
MX
CAPITULO 3
Al final del capítulo el alumno será capaz de...
Config urar e l nave g ador
Editar una lis ta de nave g adore s
Conoc e r la barra de ins e rt
Utilizar la fic ha c om m on
&RPSUXHEDWXDYDQFH\PDUFDFRQXQDPORVREMHWLYRVDOFDQ]DGRV

Instituto de Computación Activa de México S. C. 30


MACROMEDIA DREAMWEAVER MX

&21),*85$&,21'(/1$9(*$'25$75$%$-$5

Vis ta pre via us ando e l s e rvidor loc al Pe rm ite e le g ir un s e rvidor loc al


para re alizar la vis ta pre via de una pág ina e n un nave g ador (s ólo
Windows ). Para que e s ta opc ión func ione e s ne c e s ario e je c utar
s oftware de s e rvidor e n e l orde nador loc al. Cuando e s ta opc ión e s tá
ac tivada, Dre am we ave r s um inis tra la pág ina ac tual para re alizar la
vis ta pre via e n un s e rvidor loc al c om o un URL que c om ie nza por
http:/ / loc alhos t/ . Cuando e s ta opc ión e s tá de s ac tivada, Dre am we ave r
abre e l doc um e nto e n un nave g ador c on una ruta de arc hivo que
c om ie nza por arc hivo:/ / . En alg unos c as os , los vínc ulos e s pe c ific ados
c om o rutas re lativas a la raíz no func ionan c orre c tam e nte c uando s e
abre n e n un nave g ador c on una ruta arc hivo:/ / . Lo m is m o s uc e de
c uando s e lle va a c abo la c om probac ión de un nave g ador de de s tino.
resione F12
ara ver la El botón de s ig no m ás (+ ) añade un nave g ador a la lis ta.
sta previa de
El botón de s ig no m e nos (-) e lim ina e l nave g ador s e le c c ionado e n la
pagina Web
lis ta.

Editar c am bia la c onfig urac ión de l nave g ador s e le c c ionado.

Nave g ador princ ipal y Nave g ador s e c undario e s pe c ific an s i e l


nave g ador s e le c c ionado e s e l princ ipal o e l s e c undario. Pre s ione F12
para abrir e l nave g ador princ ipal o F12 (Windows ).

Instituto de Computación Activa de México S. C. 31


MACROMEDIA DREAMWEAVER MX

(',7$5/,67$'(1$9(*$'25(6

Dre am we ave r pe rm ite c re ar pág inas We b c on e le m e ntos que adm ite n


todos los nave g adore s (por e je m plo, im ág e ne s y te xto de párrafo), as í
c om o c on e le m e ntos que s ólo adm ite n los nave g adore s m ás re c ie nte s
(por e je m plo, e s tilos y c apas ).

La func ión Com probar nave g adore s de de s tino analiza e l HTML de los
doc um e ntos para ve r s i hay e tique tas o atributos que no adm ite n los
nave g adore s de de s tino. La c om probac ión no alte ra e l doc um e nto.

Para e je c utar una c om probac ión de l nave g ador de de s tino:


1 Dis pone de las opc ione s s ig uie nte s :
Para e je c utar la c om probac ión e n e l doc um e nto ac tual, g uarde e l
arc hivo. La c om probac ión s e re alizará c on la últim a ve rs ión g uardada
de l arc hivo y no inc luirá los c am bios que no haya g uardado.
Para e je c utar la c om probac ión c on un dire c torio o un s itio, e lija
Windows > Site y abra la ve ntana FTP de l s itio. A c ontinuac ión,
s e le c c ione una c arpe ta e n e l dire c torio loc al. La c om probac ión de l
nave g ador de de s tino s e re alizará e n todos los arc hivos HTML de e s a
c arpe ta y las s ubc arpe tas que c onte ng a. La c om probac ión de l
nave g ador de de s tino s ólo s e pue de lle var a c abo c on arc hivos loc ale s .

2 Elija File > Pre vie w in Brows e r.


Si aún no ha s e le c c ionado un Explorador princ ipal, e l prog ram a le
pe dirá que lo hag a.

3 En la lis ta de nave g adore s , s e le c c ione e l nave g ador de de s tino que


de s e a utilizar para la c om probac ión de l s itio.
4 Para g uardar e l inform e , e lija File > s ave e n e l nave g ador.
Las pre fe re nc ias de Vis ta pre via e n e l nave g ador m ue s tran los
nave g adore s princ ipal y s e c undario de finidos ac tualm e nte . Para abrir
las pre fe re nc ias de Vis ta pre via e n e l nave g ador, e lija File > pre vie w
in brows e r > Ie xplore , o bie n oprim a F12

Instituto de Computación Activa de México S. C. 32


MACROMEDIA DREAMWEAVER MX

),&+$6,16(57

El pane l de ins e rt c ontie ne botone s llam ados fic has ins e rt que s irve n
para la c re ac ión e ins e rc ión de dive rs os tipos de obje tos , c om o tablas ,
c apas e im ág e ne s .

&20021 ,0$*(5(//29(57$%/(1$9,*$7,21%$5
+25,=217$/%$5'$7(2%-(67)/$6+),5(:25.6*(1(5$725

%2772166+2&.:$9(

El pane l de ins e rt c ontie ne botone s para la c re ac ión e ins e rc ión de


dive rs os tipos de obje tos , c om o tablas , c apas e im ág e ne s . Para
m os trar u oc ultar e l pane l Obje tos , e lija Windows > ins e rt. O pre s ione
CTRL + F2

Para ins e rtar un obje to:

Hag a c lic e n e l c orre s pondie nte botón de l pane l ins e rt o arras tre e l
ic ono de l botón has ta la ve ntana de doc um e nto. De pe ndie ndo de l
obje to, apare c e rá e l c orre s pondie nte c uadro de diálog o de ins e rc ión
de obje to e n e l que s e le pe dirá que s e le c c ione o ins e rte e l arc hivo u
obje to de s e ado.

Para om itir e s te c uadro de diálog o e ins e rtar un obje to m arc ador de


pos ic ión vac ío:

Mante ng a pre s ionada la te c la Control (Windows ) u Opc ión


(Mac intos h) m ie ntras ins e rta e l obje to. (Por e je m plo, para ins e rtar un
m arc ador de pos ic ión para una im ag e n s in e s pe c ific ar un arc hivo de
im ag e n, m ante ng a pre s ionada la te c la Control u Opc ión y hag a c lic e n
e l botón Im ag e n. )

Nota: Es to no pe rm ite om itir todos los c uadros de diálog o. Alg unos


obje tos , c om o las barras de nave g ac ión, las c apas , los botone s Flas h,
los m arc os , e tc . , no ins e rtan m arc adore s de e s pac io.
El pane l Ins e rt c ontie ne doc e c ate g orías de form a pre de te rm inada:
Charac te rs , Com m on, Form s , Fram e , He ad, lay out y Es pe c ial.
Tam bié n c ontie ne botone s que c am bian de vis ta: Es tándar y

Instituto de Computación Activa de México S. C. 33


MACROMEDIA DREAMWEAVER MX

Dis pos ic ión.

La c ate g oría Com m on c ontie ne botone s para la c re ac ión e ins e rc ión


de los obje tos m ás utilizados , c om o Im ag e s , Table s y dra. laye r.

La s e c c ión layout pe rm ite e le g ir e ntre vis ta Es tándar


(pre de te rm inada) o de Dis pos ic ión. Si e s tá s e le c c ionada la vis ta de
Dis pos ic ión, tam bié n podrá s e le c c ionar las he rram ie ntas de
Dis pos ic ión: Dibujar c e lda de dis pos ic ión y Dibujar tabla de
dis pos ic ión. Para obte ne r m ás inform ac ión. Para c am biar de
c ate g oría, utilic e e l m e nú e m e rg e nte s ituado e n la parte s upe rior de l
pane l. Pue de m odific ar c ualquie r obje to de l pane l o c re ar s us propios
obje tos .

Alg unas de las pre fe re nc ias g e ne rale s afe c tan al pane l Obje tos . Para
c am biar e s tas pre fe re nc ias , e lija Edit > Pre fe re nc e y s e le c c ione
Ge ne ral.
Cuando ins e rte obje tos tale s c om o im ág e ne s , tablas , s e c ue nc ias de
c om andos y e le m e ntos he ad, apare c e rá un c uadro de diálog o e n e l que
s e le s olic itará inform ac ión adic ional. Pue de s uprim ir e s tos c uadros
de diálog o de s ac tivando la opc ión Mos trar diálog o al ins e rtar obje tos
o m ante nie ndo pre s ionada la te c la Control m ie ntras c re a e l obje to.
Cuando s e ins e rta un obje to c on e s ta opc ión de s ac tivada, e l obje to
re c ibe valore s de atributo pre de te rm inados . De s pué s de ins e rtar e l
obje to, utilic e e l ins pe c tor de propie dade s para c am biar s us
propie dade s .
Las pre fe re nc ias de l pane l Obje tos pe rm ite n vis ualizar e l c onte nido
de l pane l Obje tos c om o te xto s olam e nte , ic onos s olam e nte o te xto e
ic onos .

Instituto de Computación Activa de México S. C. 34


MACROMEDIA DREAMWEAVER MX

www.icam.com.mx

MACROMEDIA DREAMWEAVER
MX
CAPITULO 4
Al final del capítulo el alumno será capaz de...
Utilizar la fic ha layout
Utilizar la fic ha te xt
Utilizar la fic ha table
Utilizar la fic ha fram e
Utilizar la fic ha form
&RPSUXHEDWXDYDQFH\PDUFDFRQXQDPORVREMHWLYRVDOFDQ]DGRV

Instituto de Computación Activa de México S. C. 35


MACROMEDIA DREAMWEAVER MX

/$<287

La c ate g oría loyout c ontie ne botone s que pe rm ite n c re ar obje tos no


vis ible s e n la ve ntana de l nave g ador, c om o los puntos de fijac ión c on
nom bre . Elija Vie w > vis ual aids > Invis ible e le m e nts para ve r los
ic onos que m arc an la pos ic ión de e s tos obje tos . Hag a c lic e n los
ic onos de e le m e ntos invis ible s de la ve ntana de doc um e nto para
s e le c c ionar los obje tos y c am biar s us propie dade s .

7(;77$%/()5$0(6)25067(03/$7(6

&+$5$&7(560(',$+($'66&5,37$33/,&$7,21

œ El pane l Charac te rs c ontie ne c arac te re s e s pe c iale s , c om o los


s ím bolos de c opyrig ht, de c om illas c urvas y de m arc a re g is trada.
Te ng a e n c ue nta que e s tos s ím bolos no s e m ue s tran c orre c tam e nte
e n las ve rs ione s ante riore s a la 3. 0 de los nave g adore s (Ne ts c ape e
IE).

La c ate g oría Form s c ontie ne botone s que pe rm ite n c re ar form ularios


e ins e rtar e le m e ntos de form ulario.

œ La c ate g oría m e dia c ontie ne botone s que pe rm ite n ins e rtar


e le m e ntos e s pe c iale s , c om o apple ts Java, plug -ins y obje tos
Ac tive X. Para obte ne r m ás inform ac ión.

œ La c ate g oría He ad c ontie ne botone s que pe rm ite n añadir dive rs os


e le m e ntos de la s e c c ión he ad, c om o e tique tas m e ta, ke y words y
bas e .

œ La categoría FRame contiene estructuras comunes de conjuntos de marcos.

œ En la categoría de common podemos encontrar la opcion de table, te ble pe rm ite


c re ar una tabla para e l m ane jo de datos de form a org anizada. Para
dibujar una tabla s olo puls e e nc im a de l ic ono y s e abrirá un c uadro
de dialog o e n e l c ual us te d de be rá e s pe c ific ar los tam años de la
c olum na, anc hos de la fila re lle nos , e tc .

œ la s e c c ión he ad y la s e c c ión body. La s e c c ión body e s la parte


princ ipal de l doc um e nto, la parte vis ible que c ontie ne te xto,
im ág e ne s , e tc . La s e c c ión he ad e s invis ible , s alvo e l título de l
doc um e nto, que apare c e e n las barras de título de las ve ntanas e n
los nave g adore s y e n Dre am we ave r.

Instituto de Computación Activa de México S. C. 36


MACROMEDIA DREAMWEAVER MX

La s e c c ión he ad tam bié n c ontie ne otra inform ac ión im portante ,


inc luido e l tipo de doc um e nto, la c odific ac ión de idiom a, las func ione s
y variable s JavaSc ript y VBSc ript, las palabras c lave y los indic adore s
de c onte nido para m otore s de bús que da y las de finic ione s de e s tilo.
No e s ne c e s ario s um inis trar todos e s tos e le m e ntos para c ada pág ina.
Por e je m plo, pue de de finir palabras c lave e indic adore s de c onte nido
para la pág ina princ ipal únic am e nte . Pue de ve r los e le m e ntos e n la
s e c c ión he ad utilizando e l m e nú Ve r, la vis ta de Códig o de la ve ntana
de doc um e nto o e l ins pe c tor de c ódig o.

La pe s taña de te xt e n e l pane l de ins e rt pe rm ite ins e rtar e tique tas de


te xto y pe rm ite dar form ato al te xto.

Nota la pe s taña de te xto e n e l pane l de ins e rt pare c e n s im ilare s a


alg unos botone s , e n e l pane l de prope rtie s , las func ione s s on dive rs as
para c ada tipo de botón.

Font Tag Editor: m ue s tra un c uadro de dialog o donde pe rm ite dar


form ato al te xto s e le c c ionado.

Bold, Italic : e s tas dos opc ione s s on c lás ic os s on s im ple m e nte de


ne g rita y c urs iva.

Applic ation: Es ta opc ión pe rm ite la c one xión a una bas e de datos .

Re c ords e t: pe rm ite de finir la ruta de una bas e de datos , y e n donde s e


alm ac e nara la inform ac ión.

Dinam ic table : pe rm ite c re ar una tabla dinam ic a e n una pag ina, y


pe rm ite as oc iar a un re c ords e t. Us te d pue de m odific ar e l as pe c to de
las tablas y la re g ion re pe tida us ando e l pane l de prope rtie s y e l
be haviors de l s e rvidor de la re g ion re s pe c tivam e nte .

Dinam ic te xt: ins e rte un obje to dinám ic o de un te xto e n una pág ina. El
obje to de tipo te xto que us te d ins e rte e s un artíc ulo de un re c ords e t
pre de finido, e n la c ual us te d pue de aplic ar c ualquie ra de los form atos
de datos de Dre am we ave r MX

Instituto de Computación Activa de México S. C. 37


MACROMEDIA DREAMWEAVER MX

www.icam.com.mx

MACROMEDIA DREAMWEAVER
MX
CAPITULO 5
Al final del capítulo el alumno será capaz de...
Utilizar la fic ha plantillas
Utilizar e l pane l de m arc os
Conoc e r las propie dade s de los m arc os
&RPSUXHEDWXDYDQFH\PDUFDFRQXQDPORVREMHWLYRVDOFDQ]DGRV

Instituto de Computación Activa de México S. C. 38


MACROMEDIA DREAMWEAVER MX

7(03/$7(6

Un te m plate (plantillas ) e s un doc um e nto que s irve para c re ar


m últiple s pág inas c on e l m is m o dis e ño. Al c re ar una plantilla, podrá
indic ar qué e le m e ntos de la pág ina de be rán pe rm ane c e r c ons tante s
(no e ditable s o bloque ados ) e n los doc um e ntos bas ados e n e s a
plantilla, y qué e le m e ntos podrán m odific ars e .
Por e je m plo, s i us te d public a una re vis ta e le c trónic a, e s m uy probable
que e l dis e ño de la c abe c e ra y e l dis e ño g e ne ral no c am bie n de un
núm e ro al s ig uie nte , ni inc lus o de un artíc ulo de la re vis ta al que
oc upará e l m is m o lug ar e n e l s ig uie nte núm e ro, pe ro e l título y los
c onte nidos de c ada artíc ulo s e rán dife re nte s . El dis e ñador pue de c re ar
e l dis e ño de la pág ina de un artíc ulo de la re vis ta c on te xto m arc ador
de pos ic ión e n los lug are s e n donde irán e l título y e l c onte nido (y c on
e s as re g ione s m arc adas c om o e ditable s ); e ntonc e s , e l dis e ñador
pue de g uardar e s e dis e ño c om o plantilla. La pe rs ona que c om pong a e l
nue vo núm e ro de la re vis ta c re ará una nue va pág ina bas ada e n la
plantilla, y s us tituirá e l te xto m arc ador de pos ic ión c on e l título y e l
te xto re ale s de l nue vo artíc ulo.
Pue de c re ar una plantilla a partir de un doc um e nto HTML e xis te nte y
de s pué s m odific arla para que s e ajus te a s us ne c e s idade s , o bie n
pue de c re ar una plantilla c om e nzando de c e ro a partir de un
doc um e nto HTML e n blanc o.

Dre am we ave r g uarda las plantillas c on la e xte ns ión de arc hivo . dwt
e n una c arpe ta llam ada Te m plate s e n la c arpe ta raíz loc al de s u s itio.
Si no e xis te todavía la c arpe ta Te m plate s , Dre am we ave r la c re ará al
g uardar una plantilla nue va.

Nota: No s aque las plantillas de la c arpe ta Te m plate s , ni g uarde e n


e lla arc hivos que no s e an plantillas . Tam poc o de be s ac ar la c arpe ta
Te m plate s de s u c arpe ta raíz loc al. Hac e rlo oc as iona e rrore s e n las
rutas de las plantillas .

La m ayoría de las ope rac ione s c on plantillas s olam e nte e s tán


dis ponible s c uando la vis ta de Dis e ño e s tá ac tiva. Si un c om ando
re lac ionado c on plantillas e s tá ate nuado c uando la vis ta de Códig o

Instituto de Computación Activa de México S. C. 39


MACROMEDIA DREAMWEAVER MX

e s tá ac tiva, hag a c lic e n la vis ta de Dis e ño.

Para g uardar un doc um e nto e xis te nte c om o plantilla:


1 Elija File > Ope n y s e le c c ione un doc um e nto.
2 Cuando s e abra e l doc um e nto, e lija File > Save as Te m plate .

Nota: Si e l doc um e nto e s tá bas ado e n una plantilla, prim e ro de be


s e pararlo de la plantilla para pode r g uardar e l propio doc um e nto
c om o plantilla.

3 En e l c uadro de diálog o que apare c e a c ontinuac ión, s e le c c ione un


s itio e n e l m e nú e m e rg e nte e introduzc a un nom bre para la plantilla
e n e l c uadro Save as .

4 Hag a c lic e n OK.


El arc hivo de plantilla s e g uarda e n la c arpe ta Te m plate s c on la
e xte ns ión . dwt.
Para c re ar una plantilla nue va e n blanc o:
1 Elija File > Ne w, apre c e un c uadro de dialog o e n e l c ual de be rá
s e le c c ionar la opc ión de Te m plate , y s e le c c ione uno. O bie n tam bié n
lo pue de hac e r de s de la ve ntana de pre fe re nc ia
Edit>Pre fe re nc e . Y e n e l c uadro de dialog o s e le c c ione la opc ión que
dic e Ne w doc um e nt, por de fault apare c e HTML, e n e l c uadro de
DEFAULT DOCUMENT TYPE de s plié g ue la y s e le c c ione HTL
Te m plate .

Instituto de Computación Activa de México S. C. 40


MACROMEDIA DREAMWEAVER MX

862'()5$0(6

El us o m ás c om ún de Fram e s (m arc os ) e s la nave g ac ión. Una pág ina


We b pue de utilizar un m arc o para albe rg ar e l m e nú de nave g ac ión y
otro m arc o para e l c onte nido de la pág ina. Dado que e l m e nú de
nave g ac ión s e e nc ue ntra e n un m arc o, los vis itante s pue de n hac e r c lic
e n un e le m e nto de l m e nú y e l c onte nido apare c e rá e n e l m arc o de
c onte nido s in que c am bie e l m e nú de nave g ac ión. De e s te m odo, e l
vis itante podrá orie ntars e pe rfe c tam e nte en el s itio.
Hay dos form as de c re ar un c onjunto de m arc os e n Dre am we ave r:
pue de dis e ñarlo us te d m is m o o s e le c c ionarlo de una s e rie de
c onjuntos de m arc os pre de finidos . Si e lig e un c onjunto de m arc os
pre de finido s e c onfig urarán autom átic am e nte todos los c onjuntos de
m arc os y m arc os ne c e s arios para c re ar la dis pos ic ión. És ta e s la
form a m ás s e nc illa de ins e rtar rápidam e nte un dis e ño de m arc os e n la
pág ina. Sólo s e pue de n c re ar m arc os e n la vis ta Dis e ño de la ve ntana
de doc um e nto.
Los c onjuntos de m arc os pre de finidos fac ilitan la s e le c c ión de l tipo de

Instituto de Computación Activa de México S. C. 41


MACROMEDIA DREAMWEAVER MX

c onjunto de m arc os que de s e a c re ar.


Los ic onos de c onjuntos de m arc os pre de finidos de la c ate g oría
Marc os de l pane l Obje tos proporc ionan una re pre s e ntac ión vis ual de
c ada c onjunto de m arc os al aplic ars e a un doc um e nto s e le c c ionado.

El c onjunto de m arc os s e le c c ionado rode a al doc um e nto ac tual (e l


doc um e nto e n e l que s e e nc ue ntra e l punto de ins e rc ión). El áre a azul
de un ic ono de c onjunto de m arc os pre de finido re pre s e nta la pág ina o
e l m arc o s e le c c ionado ac tualm e nte e n un doc um e nto, m ie ntras que e l
áre a blanc a re pre s e nta e l nue vo o los nue vos m arc os .

Para ins e rtar un c onjunto de m arc os pre de finido:


1 Sitúe e l punto de ins e rc ión e n e l doc um e nto.
2 A c ontinuac ión, lle ve a c abo una de e s tas ope rac ione s :
En la c ate g oría FRAMES de l pane l ins e rt, s e le c c ione un c onjunto de
m arc os pre de finido. Para ins e rtar e l c onjunto de m arc os , pue de hac e r
c lic e n un ic ono o arras trar un ic ono dire c tam e nte al doc um e nto.
Para s e le c c ionar un c onjunto de FRam e s pre de finido, e lija Ins e rtar >
Marc os > Izquie rda, De re c ha, Arriba,
Abajo, Izquie rda y arriba, Supe rior izquie rda, Izquie rda s upe rior o
Dividir.
Ante s de c re ar un c onjunto de Fram e s o trabajar c on Fram e s , hag a
vis ible s los borde s de los m arc os e n la ve ntana de doc um e nto.

Para ve r los borde s de los Fram e s de un doc um e nto, e lija Vie w >
Vis ual Aids > Fram e s Borde rs .

Cuando s e m ue s tran los borde s de los m arc os , s e añade e s pac io


alre de dor de l borde de l doc um e nto, lo que s irve de indic ador vis ual de
las áre as de m arc os de l doc um e nto.
Para c re ar un c onjunto de m arc os , lle ve a c abo una de e s tas
ope rac ione s :
Elija M odify > Fram e s e t > Slit fram e le ft, Slit Fram e rig ht, Slit Fram e
up Slit Fram e down.
Arras tre uno de los borde s de l m arc o a la ve ntana de doc um e nto para
dividir e l doc um e nto ve rtic al u horizontalm e nte . Arras tre un borde de l
m arc o por una de las e s quinas para dividir e l doc um e nto e n c uatro
m arc os nue vos .
Pre s ione la te c la Alt (Windows ).
Para e lim inar un Fram e
Arras tre e l borde de l m arc o fue ra de la pág ina o has ta e l borde de l
m arc o padre .
El pane l Marc os proporc iona una re pre s e ntac ión vis ual de los m arc os
de l doc um e nto. Pue de hac e r c lic e n un m arc o o c onjunto de m arc os e n
e l pane l Marc os para s e le c c ionarlo e n e l doc um e nto y, s e g uidam e nte ,
ve r o e ditar las propie dade s de l e le m e nto s e le c c ionado e n e l ins pe c tor
de propie dade s .
El pane l Marc os tam bié n m ue s tra la je rarquía de la e s truc tura de l

Instituto de Computación Activa de México S. C. 42


MACROMEDIA DREAMWEAVER MX

c onjunto de m arc os de una m ane ra que pue de no pe rc ibirs e e n la


ve ntana de doc um e nto. En e l pane l M arc os , e l c onjunto de m arc os
e s tá rode ado por un borde g rue s o tridim e ns ional; los m arc os e s tán
rode ados por una líne a de lg ada g ris ; m ie ntras que los dis tintos
m arc os s e ide ntific an a travé s de s us nom bre s .
Para g uardar un doc um e nto que e s tá de ntro de un m arc o:

Hag a c lic e n e l m arc o para s e le c c ionarlo y, a c ontinuac ión, e lija File >
s ave Fram e o File > Save Fram e as .

Para g uardar todos los arc hivos de un c onjunto de m arc os :

Elija File > Save all.

De e s te m odo s e g uardarán todos los doc um e ntos abie rtos , inc luidos
los doc um e ntos individuale s , los doc um e ntos de m arc os y los
doc um e ntos de c onjunto de m arc os .
1RWD Ut ilice las líneas de selección de m arcos de la vent ana de
docum ent o para ident ificar los docum ent os de conj unt o de m arcos o los
docum ent os de m arcos al guardar los archivos.

3$1(/'()5$0(6

Para m os trar e l pane l de Fram e s , lle ve a c abo una de e s tas


ope rac ione s :
Elija Windows > othe r> Fram e s .
Para s e le c c ionar un m arc o e n e l pane l Marc os :

Hag a c lic e n e l m arc o e n e l pane l Marc os .

Instituto de Computación Activa de México S. C. 43


MACROMEDIA DREAMWEAVER MX

Para s e le c c ionar un c onjunto de m arc os e n e l pane l Marc os :

Hag a c lic e n e l borde que rode a a los m arc os e n e l pane l Marc os .


Utilic e e l ins pe c tor de propie dade s para as ig nar un nom bre a un
m arc o y de finir s us borde s y s us m árg e ne s . Para ve r todas las
propie dade s de l m arc o, hag a c lic e n la fle c ha de am pliac ión que s e
e nc ue ntra e n e l áng ulo infe rior de re c ho de l ins pe c tor de propie dade s .
Es ne c e s ario as ig nar un nom bre a c ada uno de los m arc os para que los
vínc ulos de la pág ina func ione n c orre c tam e nte .

3DUDHVSHFLILFDUSURSLHGDGHVGHPDUFR

1 Se le c c ione un m arc o lle vando a c abo una de e s tas ope rac ione s :
Hag a c lic e n un m arc o e n e l pane l Marc os .
Hag a c lic e n un m arc o e n la ve ntana de doc um e nto m ie ntras pre s iona
la te c la Alt (Windows ) o las te c las Opc ión-Mayús (Mac intos h).
2 Elija windows > prope rtie s para abrir dic ha barra. Hag a c lic e n la
fle c ha de am pliac ión, s ituada e n la e s quina infe rior de re c ha, para ve r
todas las propie dade s .

3 Para as ig nar un nom bre al m arc o, e s c ríbalo e n e l c am po fram e


nam e .
Nota: Marc o de te rm ina e l nom bre de l m arc o ac tual que s e utilizará
c om o de s tino de hipe rvínc ulos y re fe re nc ias de s e c ue nc ias de
c om andos . El nom bre de un m arc o tie ne que e s tar form ado por una
s ola palabra. Se adm ite s ubrayado (_), pe ro no g uione s (-), puntos (. ) ni
e s pac ios . Los nom bre s de m arc os de be n c om e nzar c on una le tra (no
c on un núm e ro). No utilic e palabras re s e rvadas de JavaSc ript (c om o

Instituto de Computación Activa de México S. C. 44


MACROMEDIA DREAMWEAVER MX

top o navig ator) para los nom bre s de los m arc os .


4 Elija una de las s ig uie nte s opc ione s de m arc o:
Src de te rm ina e l doc um e nto de orig e n de l m arc o. Introduzc a un
nom bre de arc hivo o hag a c lic e n e l ic ono de la c arpe ta para e xam inar
y s e le c c ionar e l arc hivo. Tam bié n pue de abrir un arc hivo e n un m arc o
c oloc ando e l punte ro e n e l m arc o y e lig ie ndo File > Ope n fram e .
Sc roll. De te rm ina s i apare c e rán barras de de s plazam ie nto c uando no
haya s ufic ie nte e s pac io para m os trar todo e l c onte nido de l m arc o
ac tual. La c onfig urac ión pre de te rm inada de la m ayoría de los
nave g adore s e s Autom átic o.
Mis m o tam año re s tring e e l tam año de l m arc o ac tual e im pide que los
us uarios pue dan arras trar los borde s de l m arc o. Sie m pre podrá
c am biar e l tam año de los m arc os e n la ve ntana de doc um e nto; s in
e m barg o, s i e s ta s e le c c ionada e s ta opc ión, los us uarios no podrán
c am biar e l tam año de los m arc os e n s us nave g adore s .
Borde s c ontrola e l borde de l m arc o ac tual. Las opc ione s pos ible s s on
ye s , No y de fault. Si e lig e la opc ión Borde s , s e anulará la
c onfig urac ión de borde s de finida para e l c onjunto de m arc os . La
c onfig urac ión pre de te rm inada de la m ayoría de los nave g adore s e s Sí.
Un borde s ólo pue de de s ac tivars e c uando todos los m arc os c ontig uos
e s tán de finidos c om o No o, c uando e s tán de finidos c om o
Pre de te rm inado c on e l c onjunto de m arc os padre de finido c om o No.
Borde r c olor:- e s table c e un c olor de borde para todos los borde s
c ontig uos al m arc o ac tual. Es ta opc ión de c onfig urac ión anula e l c olor
de borde de l c onjunto de m arc os .
5 Config ure las s ig uie nte s opc ione s de m árg e ne s (s i las opc ione s de
m árg e ne s no e s tán vis ible s , hag a c lic e n la fle c ha de am pliac ión
s ituada e n la e s quina infe rior de re c ha).
Marg in width Es table c e e n píxe le s e l anc ho de los m árg e ne s izquie rdo
y de re c ho (e s de c ir, de l e s pac io que hay e ntre e l borde de l m arc o y s u
c onte nido).
Marg in He ig ht Es table c e e n píxe le s e l alto de los m árg e ne s s upe rior e
infe rior (e s de c ir, de l e s pac io que hay e ntre e l borde de l m arc o y s u
c onte nido).

Controlar e l c onte nido de l m arc o c on vínc ulos

Para utilizar vínc ulos e n m arc os , de be rá e s table c e r un de s tino para e l


vínc ulo. El de s tino e s e l m arc o e n e l que s e abrirá e l c onte nido
vinc ulado. Por e je m plo, s i e l m e nú de nave g ac ión s e e nc ue ntra e n e l
m arc o izquie rdo y de s e a que e l m ate rial vinc ulado apare zc a e l m arc o
de c onte nido princ ipal, de be rá utilizar de s tinos para todos los
vínc ulos de l m e nú de nave g ac ión. El de s tino te ndrá e l nom bre de l
m arc o de c onte nido princ ipal, por e je m plo, m arc o_princ ipal. Cuando
e l us uario hag a c lic e n un vínc ulo de nave g ac ión, e l c onte nido s e
abrirá e n e l m arc o princ ipal.

Si de s e a s e le c c ionar un m arc o para abrir un arc hivo e n é l, de be rá

Instituto de Computación Activa de México S. C. 45


MACROMEDIA DREAMWEAVER MX

utilizar e l m e nú e m e rg e nte De s tino e n e l ins pe c tor de propie dade s .


Pue de e s table c e r la ape rtura de un arc hivo e n un nue vo m arc o,
s us tituir inform ac ión e n e l m arc o de l vínc ulo o s us tituir inform ac ión
e n otro m arc o. Tam bié n pue de hac e r que e l c onte nido vinc ulado
s obre s c riba e l m arc o ac tual (para e llo, no s e le c c ione un de s tino) o que
apare zc a e n una ve ntana de nave g ador totalm e nte nue va.

Instituto de Computación Activa de México S. C. 46


MACROMEDIA DREAMWEAVER MX

Cue s tionario 5

1. - De finic ión de plantilla

2. - Proc e dim ie nto para un pane l de plantillas

3. - de finic ión de m arc o (fram e )

4. - Proc e dim ie nto para ve r e l pane l de m arc os (fram e s )

Instituto de Computación Activa de México S. C. 47


MACROMEDIA DREAMWEAVER MX

www.icam.com.mx

MACROMEDIA DREAMWEAVER
MX
CAPITULO 6
Al final del capítulo el alumno será capaz de...
Utilizar e l pane l de c om portam ie nto
Ins e rtar s onido
Ins e rtar vide o
Ins e rtar un m ail link
&RPSUXHEDWXDYDQFH\PDUFDFRQXQDPORVREMHWLYRVDOFDQ]DGRV

Instituto de Computación Activa de México S. C. 48


MACROMEDIA DREAMWEAVER MX

&203257$0,(1723$1(/%(+$9,256

Los c om portam ie ntos pe rm ite n a los vis itante s inte rac tuar c on la
pág ina We b para m odific arla de dive rs as m ane ras o provoc ar la
re alizac ión de de te rm inadas tare as . Un c om portam ie nto e s una
c om binac ión de un e ve nto c on una ac c ión que de s e nc ade na e s e
e ve nto. En e l pane l Com portam ie ntos , un c om portam ie nto s e añade a
una pág ina e s pe c ific ando una ac c ión y e s pe c ific ando lue g o e l e ve nto
que de s e nc ade na e s a ac c ión.

Los e ve ntos s on m e ns aje s g e ne rados por los nave g adore s que indic an
que un vis itante de la pág ina ha he c ho alg o. Por e je m plo, c uando un
vis itante m ue ve e l punte ro s obre un vínc ulo, e l nave g ador g e ne ra un
e ve nto onMous e Ove r para e s e vínc ulo; y lue g o c om prue ba s i hay
c ódig o JavaSc ript al que de ba llam ar c uando s e g e ne ra e s e e ve nto
para e s e vínc ulo. Los dife re nte s e le m e ntos de la pág ina tie ne n
de finidos dife re nte s e ve ntos ; por e je m plo, e n la m ayoría de los
nave g adore s onMous e Ove r y onClic k s on e ve ntos as oc iados c on
vínc ulos , e n donde onLoad e s un e ve nto as oc iado c on im ág e ne s y c on
la s e c c ión body de l doc um e nto.
Las ac c ione s c ons tan de c ódig o JavaSc ript ya de finido que re aliza una
tare a e s pe c ífic a, c om o abrir la ve ntana de un nave g ador, m os trar u
oc ultar una c apa, re produc ir un s onido o de te ne r una pe líc ula
Shoc kwave . Las ac c ione s inc orporadas e n Dre am we ave r han s ido
c uidados am e nte de s arrolladas por los ing e nie ros de Dre am we ave r
para proporc ionar la m áxim a c om patibilidad c on los dis tintos
nave g adore s

621,'2 03:$90,',

Hay varios tipos de arc hivos y form atos de s onido, y varias form as de
añadir s onido a una pág ina We b. Los fac tore s que hay que te ne r e n
c ue nta ante s de optar por un form ato y un m é todo para añadir s onido
s on: s u finalidad, e l tipo de us uarios a los que e s tá de s tinado, e l
tam año de arc hivo, la c alidad de s onido y las dife re nc ias e n los
nave g adore s .
Form atos de arc hivo de audio

La lis ta s ig uie nte de s c ribe los form atos de arc hivo de audio m ás
c om ún, junto c on alg unas de s us ve ntajas y de s ve ntajas e n re lac ión
c on e l dis e ño We b.

El form ato . m idi o . m id (Inte rfaz Dig ital para Ins trum e ntos Mus ic ale s )
e s un form ato de m ús ic a ins trum e ntal. Muc hos nave g adore s

Instituto de Computación Activa de México S. C. 49


MACROMEDIA DREAMWEAVER MX

re c onoc e n los arc hivos MIDI y, por tanto, no re quie re n un plug -in. Si
bie n s u c alidad de s onido e s m uy alta, pue de variar s e g ún la tarje ta de
s onido de l us uario. Un pe que ño arc hivo MIDI pue de proporc ionar un
c lip de s onido de larg a durac ión. Los arc hivos MIDI no s e pue de n
g rabar y de be n s inte tizars e e n un orde nador c on hardware y s oftware
e s pe c iale s .

Los arc hivos de form ato .wav (Exte ns ión de Form as de Onda) ofre c e n
una bue na c alidad de s onido, s on c om patible s c on m uc hos
nave g adore s y no re quie re n un plug -in. Pue de g rabar s us propios
arc hivos WAV de s de un CD, una c inta, e l m ic rófono, e tc . Sin e m barg o,
e l g ran tam año de arc hivo lim ita c ons ide rable m e nte la durac ión de
los c lips de s onido que s e pue de n utilizar e n las pág inas We b.

El form ato .aif (Form ato de Arc hivo de Inte rc am bio de Audio o AIFF),
al ig ual que e l form ato WAV, ofre c e bue na c alidad de s onido, s e pue de
re produc ir e n la m ayoría de los nave g adore s y no re quie re un plug -in.
Tam bié n s e pue de n g rabar arc hivos AIFF de s de un CD, una c inta, e l
m ic rófono, e tc . Sin e m barg o, e l g ran tam año de arc hivo lim ita
c ons ide rable m e nte la durac ión de los c lips de s onido que s e pue de n
utilizar e n las pág inas We b.

El form ato .m p3 (Audio de l Grupo de Expe rtos e n Im ág e ne s e n


Movim ie nto o MPEG-Audio Nive l-3) e s un form ato c om prim ido que
re duc e c ons ide rable m e nte e l tam año de los arc hivos de s onido. La
c alidad de s onido e s e xc e le nte : s i s e g raba y c om prim e c orre c tam e nte
un arc hivo MP3, s u c alidad e s e quiparable a la de un CD. La nue va
te c nolog ía pe rm ite re produc ir e l arc hivo e n flujo (s tre am ing ) de m odo
que e l vis itante no te ng a que e s pe rar a que s e de s c arg ue todo e l
arc hivo para e s c uc harlo. Sin e m barg o, e l tam año de arc hivo e s m ayor
que e l de Re al Audio, por lo que una c anc ión e nte ra pue de tardar
bas tante e n de s c arg ars e a travé s de una c one xión te le fónic a norm al.
Para re produc ir arc hivos MP3, los vis itante s de be rán de s c arg ar e
ins talar una aplic ac ión auxiliar o un plug -in c om o Quic kTim e ,
Windows Me dia Play e r o Re alPlaye r.

El form ato . ra, . ram , .rpm o Re al Audio tie ne un alto g rado de


c om pre s ión c on tam años de arc hivo m ás pe que ños que MP3. Pe rm ite
de s c arg ar arc hivos de c anc ione s c om ple tas e n un pe ríodo de tie m po
razonable . Dado que los arc hivos s e pue de n re produc ir e n flujo de s de
un s e rvidor We b norm al, los vis itante s pue de n c om e nzar a e s c uc har e l
s onido ante s de que e l arc hivo s e haya de s c arg ado por c om ple to. La
c alidad de s onido e s m ás pobre que la de los arc hivos MP3, aunque los
nue vos re produc tore s y c odific adore s la m e joran c ons ide rable m e nte .
Los vis itante s de be rán de s c arg ar e ins talar la aplic ac ión auxiliar o
plug -in Re alPlaye r para re produc ir e s tos arc hivos .
El e s table c im ie nto de vínc ulos c on arc hivos de audio e s una form a
s e nc illa y e fe c tiva de añadir s onido a una pág ina We b. Es te m é todo de
inc orporar arc hivos de s onido pe rm ite a los vis itante s optar por
e s c uc har e l arc hivo, y hac e que e l arc hivo e s té dis ponible para un

Instituto de Computación Activa de México S. C. 50


MACROMEDIA DREAMWEAVER MX

m ayor núm e ro de us uarios . Alg unos nave g adore s no adm ite n los
arc hivos de s onido inc rus tados .
Para e s table c e r un vínc ulo c on un arc hivo de audio:
1 Se le c c ione e l te xto o la im ag e n que de s e a us ar c om o vínc ulo c on e l
arc hivo de audio.
2 En e l pane l de prope rtie s , hag a c lic e n e l ic ono de c arpe ta para
ac c e de r al arc hivo de audio o e s c riba la ruta y e l nom bre de l arc hivo
en el c am po Vínc ulo.
Al inc rus tar audio s e inc orpora e l re produc tor de s onido dire c tam e nte
e n la pág ina, pe ro e l s onido s ólo s e re produc e s i los vis itante s de l s itio
dis pone n de l plug -in ade c uado para e l arc hivo de s onido e le g ido.
Inc rus te arc hivos s i de s e a utilizar e l s onido c om o m ús ic a de fondo o s i
de s e a obte ne r un m ayor c ontrol s obre la pre s e ntac ión de s onido. Por
e je m plo, pue de e s table c e r e l volum e n, la aparie nc ia de l re produc tor
e n la pág ina y los puntos inic ial y final de l arc hivo de s onido.

Para inc rus tar un arc hivo de audio:


1 En la vis ta de Dis e ño, s itúe e l punto de ins e rc ión e n e l lug ar donde
de s e a inc rus tar e l arc hivo.

2 Hag a c lic e n e l botón Plug -in de l pane l Obje tos o e lija Ins e rt > Me dia
> Plug in.
Para obte ne r m ás inform ac ión s obre e l obje to Plug -in.
3 En e l ins pe c tor de propie dade s , hag a c lic e n e l ic ono de c arpe ta para
ac c e de r al arc hivo de audio o e s c riba la ruta y e l nom bre de l arc hivo
e n e l c am po Vínc ulo.
4 Es pe c ifique e l anc ho y e l alto introduc ie ndo los valore s e n los
c am pos c orre s pondie nte s o c am biando e l tam año de l m arc ador de
pos ic ión de l plug -in e n la ve ntana de doc um e nto.
Est os valores det erm inan con qué t am año se m uest ran los cont roles de
audio en el navegador. Por ej em plo, pruebe con un ancho de 144 píxeles y
un alt o de 60 para ver cóm o aparece el reproduct or de audio en Navigat or
y en I nt ernet Explorer.

9,'(2

Vide os Shoc kwave , e l e s tándar de Mac rom e dia para m ultim e dia
inte rac tivo e n la We b, e s un form ato c om prim ido que pe rm ite la
de s c arg a rápida de los arc hivos de m e dios c re ados e n Mac rom e dia
Dire c tor y s u re produc c ión e n los nave g adore s de us o m ás fre c ue nte .

El s oftware que re produc e las pe líc ulas Shoc kwave e s tá dis ponible
c om o plug -in para Ne ts c ape Navig ator y e n form ato de c ontrol
Ac tive X. Cuando s e ins e rta una pe líc ula Shoc kwave , Dre am we ave r
us a tanto la e tique ta obje c t (para e l c ontrol Ac tive X) c om o la e tique ta
e m be d (para e l plug -in) para c ons e g uir los m e jore s re s ultados e n

Instituto de Computación Activa de México S. C. 51


MACROMEDIA DREAMWEAVER MX

todos los nave g adore s . Al re alizar c am bios re lativos a la pe líc ula e n e l


ins pe c tor de propie dade s , Dre am we ave r adapta los datos introduc idos
a los parám e tros c orre s pondie nte s para las e tique tas obje c t y e m be d.
Para ins e rtar una pe líc ula Shoc kwave :

1 En la vis ta de Dis e ño de la ve ntana de doc um e nto, s itúe e l punto de


ins e rc ión e n e l lug ar donde de s e a ins e rtar una pe líc ula Shoc kwave .
2 Hag a c lic e n e l botón Shoc kwave de l pane l prope rtie s o e lija Ins e rt >
Me dia > Shoc kwave o arras tre e l botón Shoc kwave s obre e l
doc um e nto.

3 En e l c uadro de diálog o que apare c e , s e le c c ione un arc hivo de


pe líc ula.

4 En e l pane l de prope rtie s , introduzc a e l anc ho y e l alto de la pe líc ula


e n los c uadros W y H . El pane l de prope rtie s m ue s tra inic ialm e nte las
propie dade s utilizadas c on m ayor fre c ue nc ia. Hag a c lic e n la fle c ha
de am pliac ión, s ituada e n la e s quina infe rior de re c ha, para ve r todas
las propie dade s .
Nom bre e s pe c ific a un nom bre para ide ntific ar una pe líc ula e n las
s e c ue nc ias de c om andos . Introduzc a un nom bre e n e l c am po s in título
que apare c e a la izquie rda de l ins pe c tor de propie dade s .

W y H e s pe c ific an e l anc ho y e l alto de la pe líc ula e n píxe le s . Tam bié n


s e pue de n e m ple ar las s ig uie nte s unidade s : pc (pic as ), pt (puntos ), in
(pulg adas ), m m (m ilím e tros ), c m (c e ntím e tros ) o % (porc e ntaje de l
anc ho o e l alto de l obje to padre ). Las abre viaturas de be n s e g uir al
valor s in e s pac io de s e parac ión: por e je m plo, 3m m .

File e s pe c ific a la ruta de l arc hivo de la pe líc ula Shoc kwave . Hag a c lic
e n e l ic ono de c arpe ta para loc alizar un arc hivo o e s c riba la ruta
c orre s pondie nte .
Alig n de te rm ina c óm o s e aline ará la pe líc ula e n la pág ina. Para
obte ne r una de s c ripc ión de c ada opc ión.

bg e s pe c ific a un c olor de fondo para la zona de la pe líc ula. Es te c olor


tam bié n apare c e rá c uando la pe líc ula no s e e s té re produc ie ndo
(m ie ntras s e c arg a y de s pué s de habe rs e re produc ido).

Re produc ir pe rm ite pre vis ualizar la pe líc ula e n la vis ta de Dis e ño de


la ve ntana de doc um e nto. Hag a c lic e n e l botón De te ne r para
inte rrum pir la pe líc ula y volve r al m arc ador de pos ic ión de
Shoc kwave .

Parám e tros abre un c uadro de diálog o para introduc ir parám e tros


adic ionale s que s e trans fe rirán a la pe líc ula Shoc kwave . La pe líc ula
Shoc kwave de be rá e s tar dis e ñada para re c ibir e s tos parám e tros .

ID de fine e l parám e tro opc ional ID Ac tive X. El us o m ás fre c ue nte de

Instituto de Computación Activa de México S. C. 52


MACROMEDIA DREAMWEAVER MX

e s te parám e tro e s la trans m is ión de inform ac ión e ntre c ontrole s


Ac tive X.

W s pac e y H s pac e e s pe c ific an e l núm e ro de píxe le s de e s pac io e n


blanc o que habrá por e nc im a, por de bajo y a am bos lados de la
pe líc ula.

&255(2(/(&7521,&2

Corre o e le c trónic o Cuando e l us uario hac e c lic e n un vínc ulo de


c orre o e le c trónic o s e abre una ve ntana de m e ns aje e n blanc o
(utilizando e l prog ram a de c orre o as oc iado al nave g ador de l us uario).
En la ve ntana de m e ns aje de c orre o e le c trónic o, e l c am po Para s e
re lle na autom átic am e nte c on la dire c c ión e s pe c ific ada e n e l vínc ulo.
Para c re ar un vínc ulo de c orre o e le c trónic o utilizando e l c om ando
Ins e rtar vínc ulo de c orre o e le c trónic o:

1 En la vis ta de Dis e ño de la ve ntana de doc um e nto, s itúe e l punto de


ins e rc ión donde de s e a que apare zc a e l vínc ulo de c orre o e le c trónic o o
s e le c c ione e l te xto que de s e a m os trar c om o vínc ulo de c orre o
e le c trónic o. A c ontinuac ión, lle ve a c abo una de e s tas ope rac ione s :

Elija Ins e rt >e m ail link

.
En la c ate g oría Com m on de l pane l ins e rt, e l boton de e m ail link.

2 En e l c am po Te xt de l c uadro de diálog o Ins e rtar vínc ulo de c orre o


e le c trónic o, e s c riba o e dite e l te xto que de s e a m os trar e n e l
doc um e nto c om o vínc ulo de c orre o e le c trónic o.

3 En e l c am po e m ail, e s c riba la dire c c ión a la que s e de be rá e nviar e l


c orre o e le c trónic o.

4 Hag a c lic e n OK.

Instituto de Computación Activa de México S. C. 53


MACROMEDIA DREAMWEAVER MX

Cue s tionario 6

1. - De finic ión de c om portam ie nto

2. - Le ng uaje e n que s e g e ne ran los c om portam ie ntos

3. - Form atos de s onidos que s oporta Dre am we ave r

4. - Form atos de vide o que s oporta Dre am we ave r

5. - Ins truc c ión que g e ne ra un Hipe rvínc ulo de c orre o


e le c tronic o

Instituto de Computación Activa de México S. C. 54


MACROMEDIA DREAMWEAVER MX

www.icam.com.mx

MACROMEDIA DREAMWEAVER
MX
CAPITULO 7
Al final del capítulo el alumno será capaz de...
Conoc e r que e s una bas e de datos
Cre ar una bas e de datos
Conoc e r que e s una tabla
Conoc e r que e s un c am po
Conoc e r tipo de c one xión
Cone c tar una bas e de datos
Vis ualizar re g is tros
Filtrar re g is tros
Utilizar los re c ords e t ins e rtion
Utilizar re c ords e t update form
Cre ar una pag ina de de talle m ae s tro
Cre ar un re pe at re g ion
Cre ar pag inas de log in c onfirm
Cre ar pag inas de re s tring pag e
Cre ar re dire c tion pag e
&RPSUXHEDWXDYDQFH\PDUFDFRQXQDPORVREMHWLYRVDOFDQ]DGRV

Instituto de Computación Activa de México S. C. 55


MACROMEDIA DREAMWEAVER MX

%$6('('$726 $3/,&$7,21

Una base de dat os es un conj unt o de inform ación relacionada con un


asunt o o con una finalidad. En Access, una base de dat os es un archivo
que puede cont ener t ablas donde se encuent ra t oda la inform ación sobre
un t em a específico, consult as, form ular ios, inform es ent re ot ros. Tal com o
una colección de m úsica, el cont rol de alum nos en un colegio o un
direct or io t elefónico.

&5($581$%$6('('$726(1$&&(66

Mic ros oft Ac c e s s proporc iona dos m é todos para c re ar una bas e de
datos de Ac c e s s , Utilizando e l As is te nte para Bas e de datos , o bie n,
pue de c re ar una bas e de datos e n blanc o y, pos te riorm e nte , ag re g ar
las tablas , form ularios , inform e s y de m ás obje tos que de s e e ; é s te e s e l
m é todo m ás fle xible , pe ro re quie re de finir por s e parado c ada
e le m e nto de la bas e de datos . Cualquie ra que s e a e l m é todo e le g ido,
%RWyQ
pue de m odific ar y am pliar la bas e de datos e n c ualquie r m om e nto
pos te rior a s u c re ac ión.
Nuevo
Para c re ar una bas e de datos e n blanc o e xis te n los s ig uie nte s
m é todos :

1. Me nú Arc hivo / Nue vo…

2. Hac e r c lic s obre la opc ión Bas e de datos e n blanc o de l pane l de


tare as que apare c e a la de re c ha de la pantalla.

Instituto de Computación Activa de México S. C. 56


MACROMEDIA DREAMWEAVER MX

&21&(372'(81$%$6('('$726

El c om pone nte bás ic o de la bas e de datos e s e l re g is tro. Un re g is tro e s


un c onjunto de datos re lac ionados que s e tratan c om o una s ola
e ntidad. Por e je m plo, un tarje ta de fútbol podría c ons ide rars e un
re g is tro: c ontie ne e l nom bre , la fotog rafía, e l e quipo y las e s tadís tic as
de un jug ador. Em ple ando la te rm inolog ía propia de las bas e s de
datos , c ada uno de e s os e le m e ntos de inform ac ión re c ibiría e l nom bre
de c am po: c ada "re g is tro" de tarje ta de fútbol tie ne un c am po nom bre ,
un c am po fotog rafía, un c am po e quipo y varios c am pos de
e s tadís tic as .

Al jue g o de re g is tros que c om parte n los m is m os c am pos s e le llam a


tabla, porque e s te tipo de inform ac ión pue de pre s e ntars e fác ilm e nte
e n form ato de tabla: c ada c olum na re pre s e nta un c am po y c ada fila
re pre s e nta un re g is tro. De he c ho, la palabra c olum na e s s inónim o de
la palabra c am po, y la palabra fila e s s inónim o de la palabra re g is tro.

Una bas e de datos pue de c onte ne r m ás de una tabla, c ada una de las
c uale s tie ne un nom bre e xc lus ivo. Es tas tablas pue de n e s tar
re lac ionadas o s e r inde pe ndie nte s e ntre s í.

Un s ubc onjunto de datos e xtraídos de una o m ás tablas re c ibe e l


nom bre de jue g o de re g is tros . Un jue g o de re g is tros tam bié n e s una
tabla porque e s una c ole c c ión de re g is tros que c om parte las m is m as
c olum nas . Por e je m plo, una aline ac ión de un e quipo de fútbol e n la
que s e re lac ionan los nom bre s y las pos ic ione s de los jug adore s e n e l
c am po s e ría un jue g o de re g is tros : c ons ta de un s ubc onjunto de toda la
inform ac ión pos ible s obre los jug adore s , inc luidos los g ole s las
as is te nc ias , las faltas , e tc .

Instituto de Computación Activa de México S. C. 57


MACROMEDIA DREAMWEAVER MX

7$%/$

Para c re ar un jue g o de re g is tros , s e re aliza una c ons ulta de bas e de


datos . Una c ons ulta c ons ta de c rite rios de bús que da. Por e je m plo, la
c ons ulta pue de e s pe c ific ar que s ólo s e inc luy an alg unas de las
c olum nas e n e l jue g o de re g is tros , o que s ólo s e inc luyan
de te rm inados re g is tros .
Las tablas s e c om pone n de filas y c olum nas de c e ldas que s e pue de n
re lle nar c on te xto y g ráfic os . Las tablas s e utilizan a m e nudo para
org anizar y pre s e ntar inform ac ión. Re s ulta útil s abe r c óm o s e
de nom inan las dive rs as parte s de una tabla. Colum na, Fila, Ce lda.

Instituto de Computación Activa de México S. C. 58


MACROMEDIA DREAMWEAVER MX

&$0326

Los c am pos o c olum nas de una Tabla ide ntific an e l tipo de dato que s e
alm ac e nara e n dic ha pos ic ión, as i c om o e l nom bre de e s te .

REGISTRO

Conform a toda la inform ac ión c orre s pondie nte a las filas de e s a tabla.

&21),*85$&,21'(6,7,2

A c ontinuac ión s e de s c ribe la c onfig urac ión de s is te m a m ás s e nc illa


para us uarios de Windows .
Para c onfig urar e l s is te m a:

1 Si e s us te d us uario de Windows 95, 98 o NT Works tation, ins tale


Mic ros oft Pe rs onal We b Se rve r (PWS).
2 Si e s us te d us uario de Windows NT Se rve r o Windows 2000,
as e g úre s e de que Inte rne t Inform ation Se rve r (IIS) e s tá ins talado y e n
e je c uc ión e n s u s is te m a.
IIS e s la ve rs ión c om ple ta de PWS. Ya de be e s tar ins talado e n s u
s is te m a. Si no lo e s tá, ins tále lo o s olic ite al adm inis trador de l s is te m a
que s e lo ins tale .
3 Si de s e a re alizar e l c urs o prác tic o para ColdFus ion, ins tale
ColdFus ion Se rve r e n e l s is te m a.
Para obte ne r ins truc c ione s .
4 Si de s e a re alizar e l c urs o prác tic o para JSP, ins tale los s ig uie nte s
c om pone nte s e n e l s is te m a.
Java 2 SDK, Standard Edition, para Windows
El c ontrolador JDBC-ODBC Bridg e de Sun s e ins tala autom átic am e nte
al ins talar SDK.
Un s e rvidor de aplic ac ione s que te ng a im ple m e ntada la
e s pe c ific ac ión JavaSe rve r Pag e s 1. 0 de Sun.
5 Cre e una s ubc arpe ta e n la c arpe ta c :\ Ine tpub\ wwwroot y llám e la
MyTutorialSite .
Es ta e s la e s truc tura de c arpe tas c orre c ta:
c :\ Ine tpub\ wwwroot\ MyTutorialSite

Instituto de Computación Activa de México S. C. 59


MACROMEDIA DREAMWEAVER MX

6,7,2/2&$/

Para c onfig urar s itio loc al Dre am we ave r MX:

1.- e lija la opc ion de s ite > ne w s ite

2.- e n e l c uadro de dialog o e s pe c ifique e l nom bre de l s itio

nam e : nom bre de l s itio

loc al root fólde r: ruta de ac c e s o a los arc hivo, donde s e g uardaran


todos los arc hivo

3. - oprim a e l ic ono c on form a de fólde r para e s pe c ific ar la ruta una ve z


s e le c c ionada la c arpe ta pre s ione g uardar.

Nos re g re s ara al s itio donde e m pe zam os s olo hay que pre s ionar OK.

6,7,25(0272

Para c onfig urar s itio re m oto Dre am we ave r MX:

1 Inic ie Dre am we ave r y e lija Site > Ne w Site . Apare c e rá e l c uadro de


diálog o De finir s itios .

2 Se le c c ione e l s itio de l c urs o prác tic o ASP, ColdFus ion o JSP


pre de finido y hag a c lic e n Editar.MX de finió los s itios de l c urs o
prác tic o durante la ins talac ión.

3 Hag a c lic e n Datos re m otos y c om ple te e l c uadro de diálog o de la


s ig uie nte form a: Ac c e s o: Loc al/ Ne twork Carpe ta re m ota:
c :\ Ine tpub\ wwwroot\ MyTutorialSite

4 Si de s e a re alizar e l c urs o prác tic o de ASP, hag a c lic e n Se rvidor de


aplic ac ione s y c om ple te e l c uadro de diálog o de la s ig uie nte form a:
Mode lo de s e rvidor: ASP 2. 0. Le ng uaje de s e c ue nc ia de c om andos :
VBSc ript o JavaSc ript Exte ns ión de pág ina: .as p Ac c e s o:
Loc al/ Ne twork Carpe ta re m ota: c :\ Ine tpub\ wwwroot\ MyTutorialSite
Pre fijo de URL: http:/ / loc alhos t/ MyTutorialSite . La bas e de datos de l
c urs o prác tic o e s un arc hivo de Mic ros oft Ac c e s s 97. No e s ne c e s ario
Mic ros oft Ac c e s s para re alizar e l c urs o prác tic o, aunque s í ne c e s ita un
c ontrolador c apaz de le e r arc hivos de M ic ros oft Ac c e s s 97. El
c ontrolador pe rm ite a la aplic ac ión We b le e r e l c onte nido de l arc hivo

Instituto de Computación Activa de México S. C. 60


MACROMEDIA DREAMWEAVER MX

de bas e de datos . (Para am pliar c onoc im ie ntos s obre c ontroladore s de


bas e s de datos .

Si e s us te d ing e nie ro de de s arrollo de ASP o ColdFus ion, de be rá te ne r


ins talado un c ontrolador ODBC c apaz de le e r arc hivos de Ac c e s s 97 e n
e l s e rvidor ASP o ColdFus ion. Si s u s e rvidor We b s e e je c uta e n un
s is te m a Windows re m oto o loc al, e s probable que e l c ontrolador
ne c e s ario ya e s té ins talado. Para ave rig uar s i lo e s tá, e lija Inic io >
Config urac ión > Pane l de c ontrol e n Windows y bus que e l ic ono de
ODBC Data Sourc e s . (En func ión de l s is te m a, e l ic ono tam bié n pue de
de nom inars e ODBC o 32bit ODBC. ) Si no e nc ue ntra e l ic ono,
de s c arg ue e ins tale M ic ros oft Data Ac c e s s Com pone nts (MDAC) 2. 5,
que ins talará e l c ontrolador de Ac c e s s . Si e l ic ono ODBC Data Sourc e s
e s tá pre s e nte e n e l Pane l de c ontrol, hag a doble c lic e n é l. Apare c e rá
e l c uadro de diálog o ODBC Data Sourc e s Adm inis trator. Hag a c lic e n
la fic ha Drive rs para obte ne r una lis ta de c ontroladore s ins talados e n
e l s is te m a. Bus que e l c ontrolador M ic ros oft Ac c e s s Drive r, ve rs ión 3. 5
o pos te rior. Si e l c ontrolador M ic ros oft Ac c e s s Drive r (*.m db) no
apare c e e n la lis ta, de s c arg ue e ins tale MDAC, que ins talará e l
c orre s pondie nte c ontrolador de Ac c e s s . Ante s de c om e nzar a c re ar e l
dire c torio de e m ple ados de Com pas s , de be rá c re ar una c one xión c on
e l arc hivo de bas e de datos de l c urs o prác tic o, c om pas s trave l. m db.

Si ha ins talado Dre am we ave r e n un s is te m a Windows , durante la


ins talac ión s e e s table c ió e n e l s is te m a un DSN para la bas e de datos
de l c urs o prác tic o. De be rá utilizar dic ho DSN s i e je c uta tam bié n e l
s e rvidor We b e n e l m is m o s is te m a (e s de c ir, s i utiliza Pe rs onal We b
Se rve r e n Windows o s i ins taló Dre am we ave r e n Windows NT Se rve r o
Windows 2000).

Si e l s e rvidor We b s e e je c uta e n un s is te m a Windows re m oto, pue de


de finir un nom bre de fue nte de datos (DSN) e n e l s e rvidor re m oto y
lue g o utilizar dic ho DSN e n Dre am we ave r para c re ar una c one xión de
bas e de datos s e nc illa. Un DSN e s una e s pe c ie de ac c e s o dire c to a una
bas e de datos . Para obte ne r ins truc c ione s s obre c óm o de finir uno.

Instituto de Computación Activa de México S. C. 61


MACROMEDIA DREAMWEAVER MX

7,326'(&21(;,Ï1'(%'

Si no s e ha de finido ning ún DSN e n e l s is te m a que e je c uta e l s e rvidor


We b, de be rá utilizar una c ade na de c one xión para c re ar la c one xión.

Para c re ar una c one xión de bas e de datos e n e l c as o de que s e haya


de finido un DSN e n e l s e rvidor We b:
1 e n e l pane l de ins e rt hag a c lic e n la pe s taña de applic ation y de un
c lic e n e l boton que dic e re c ords e t apare c e rá e l c uadro de diálog o de
Cone xione s .
2 Hag a c lic e n de fine … Nom bre de fue nte de datos (DSN) de l m e nú
e m e rg e nte .
Apare c e rá e l c uadro de diálog o Nom bre de fue nte de datos (DSN). En
c as o de no pare c e r la ve ntana e m e rg e nte hag a c lic e n ne w.

3 En e l c uadro Nom bre de c one xión, introduzc a c onnCom pas s .


Una prác tic a habitual c ons is te e n añadir e l pre fijo c onn a los nom bre s
de c one xione s para dis ting uirlos de los nom bre s de obje tos e n e l
c ódig o.

Instituto de Computación Activa de México S. C. 62


MACROMEDIA DREAMWEAVER MX

4 Si e l s e rvidor de aplic ac ione s s e e je c uta e n e l e quipo loc al,


s e le c c ione Com pas s Trave l de la lis ta de DSN, y hag a c lic e n ok.
5 Si e l s e rvidor de aplic ac ione s s e e je c uta e n un e quipo re m oto,
introduzc a Com pas s Trave l e n e l c uadro Nom bre de fue nte de datos
(DSN).
6 Hag a c lic e n Done para finalizar la de finic ión de la c one xión.
La nue va c one xión, c on Com pas s , apare c e rá e n e l c uadro de diálog o
Cone xione s .
7 Hag a c lic e n ok para c e rrar e l c uadro de diálog o Cone xione s .
&21(;,Ï1$/$%$6('('$726

Para c re ar una c one xión de bas e de datos para e l c urs o prác tic o ASP:
1 En Dre am we ave r, e lija Cone xione s de l pane l ins e rt e n la pe s taña
applic ation.
Apare c e rá e l c uadro de diálog o Cone xione s .

2 Hag a c lic e n e l botón De fine … y s e le c c ione Nom bre de fue nte de


datos (DSN) de l m e nú e m e rg e nte .
Apare c e rá e l c uadro de diálog o Nom bre de fue nte de datos (DSN). En
c as o de no apare c e r e l c uadro de las opc ione s de c lic e n botón que
Ne w, y de l m e nú que apare c e de c lic e n DARA SOURCE NAME (DSN)
3 Introduzc a e l s ig uie nte nom bre para la nue va c one xión:
c onnCom pas s .
Una prác tic a habitual c ons is te e n añadir e l pre fijo c onn a los nom bre s
de c one xione s para dis ting uirlos de los nom bre s de obje tos e n e l
c ódig o.
4 Se le c c ione Com pas s Trave l de la lis ta de DSN. Si apare c e e s c ríbala
tal c ual.
Dre am we ave r c re ó e l DSN Com pas s Trave l durante la ins talac ión.
5 Hag a c lic e n Te s t.
Dre am we ave r inte ntará c one c tar c on la bas e de datos . Si falla la
c one xión, c om prue be de nue vo e l DSN. Si la c one xión c ontinúa
fallando, c om prue be e l pre fijo de URL de l s e rvidor de aplic ac ione s .
Pre s ione OK

6 Hag a c lic e n Done .


La nue va c one xión de be apare c e r e n e l c uadro de diálog o Cone xione s .
7 Hag a c lic e n OK para c e rrar e l c uadro de diálog o Cone xione s . Un
s itio loc al indic a a Dre am we ave r e l lug ar e n e l que e s tán alm ac e nados
todos los doc um e ntos y arc hivos de un s itio We b c onc re to e n e l dis c o
loc al. De be de finir un s itio loc al para de s arrollar una aplic ac ión We b
utilizando Dre am we ave r.
Pue de utilizar Dre am we ave r para de s ple g ar la aplic ac ión e n un
s e rvidor We b m e diante la de finic ión de un s itio re m oto. Un s itio
re m oto indic a a Dre am we ave r e l lug ar e n e l que e s tán alm ac e nados

Instituto de Computación Activa de México S. C. 63


MACROMEDIA DREAMWEAVER MX

todos los doc um e ntos y arc hivos de l s itio We b e n e l s e rvidor We b.

Para definir un sit io rem ot o, realice las siguient es t areas:

Defina una carpet a publicada en el servidor Web.

Defina la carpet a del sit io rem ot o en Dream weaver.

9,68$/,=$55(*,67526

Un jue g o de re g is tros e s un s ubc onjunto de datos e xtraídos de una o


varias tablas de una bas e de datos . Ac túa a m odo de fue nte de datos
para las pág inas dinám ic as . De be rá de finir un jue g o de re g is tros que
c onte ng a s ólo los re g is tros de vue ltos por la bús que da. En e l c as o de un
c onjunto s im ple de pág inas de bús que da/ re s ultados , pue de c re ar e s te
tipo de jue g o de re g is tros de finie ndo un filtro.

De be rá c om e nzar de finie ndo e l c ontorno g e ne ral de l jue g o de


re g is tros .
1 En e l m e nú Site > Site file , hag a doble c lic e n e l arc hivo c onne c tion
s ituado bajo Carpe ta loc al.

Se abrirá e n Dre am we ave r la pág ina de re s ultados s im ple para e l


dire c torio de e m ple ados de Com pas s .

2 En e l pane l Vinc ulac ione s de datos , hag a c lic e n e l botón de s ig no


m ás (+ ) y s e le c c ione Re c ords e t (Que ry (c ons ulta) de l m e nú
e m e rg e nte . Apare c e rá e l c uadro de diálog o Jue g o de re g is tros s im ple .

3 En e l c uadro Nom bre , introduzc a Re s ults . Es te e s e l nom bre de l


jue g o de re g is tros . No lo c onfunda c on e l nom bre de arc hivo de la
pág ina. En e s te c as o, s e trata de l m is m o nom bre .

4 Se le c c ione la c one xión c onnCom pas s de l m e nú e m e rg e nte


Cone xión.
Si no apare c e e n e l m e nú, hag a c lic e n e l botón De fine … para c re arla.

5 En e l m e nú e m e rg e nte Tabla, s e le c c ione EMPLOYEES.

6 En e l áre a Colum nas , hag a c lic e n la opc ión Se le c c ionado para e le g ir


las c olum nas s e le c c ionadas de la table EMPLOYEES.

Instituto de Computación Activa de México S. C. 64


MACROMEDIA DREAMWEAVER MX

7 Pre s ione Control (Windows ) e n las s ig uie nte s c olum nas de la lis ta
para inc luirlas e n e l jue g o de re g is tros : EMPLOYEEID, FIRSTNAME,
LASTNAME, DEPARTMENT y EXTENSION. La pág ina de re s ultados
m ue s tra inform ac ión de c uatro de e s tas c olum nas . De be inc luir la
c olum na EMPLOYEEID porque c ontie ne inform ac ión que ide ntific a a
c ada re g is tro individual (inform ac ión que s e rá útil m ás ade lante
c uando c re e una pág ina de de talle ).

8 Hag a c lic e n Prue ba para c om probar e l jue g o de re g is tros .


Apare c e rá un jue g o de re g is tros c on datos e xtraídos de la tabla de la
bas e de datos . Hag a c lic e n Ac e ptar para c e rrarlo.

De form a pre de te rm inada, e l jue g o de re g is tros c ontie ne todos los


re g is tros de la tabla de la bas e de datos . De je abie rto por ahora e l
c uadro de diálog o Jue g o de re g is tros . Lo utilizará a c ontinuac ión para
c re ar un filtro que e lim ine todos los re g is tros que no c um plan los
c rite rios de bús que da
Haga clic en Ok.
Dream weaver añade el j uego de regist ros a la list a de fuent es de dat os
disponibles en el panel Vinculaciones de dat os. Para ver los cam pos
definidos para el j uego de regist ros, am plíe la ram a del j uego de regist ros.

 Arrast re cada uno de los cam pos hacia el area de la pagina

 Guarde el trabajo ()LOH!6DYH).

),/75$55(*,67526

para filtrar re g is tros s olo arras tre los c am pos a la hoja y lis to

5(&25'6(71$9,*$7,21%$5

La pág ina de re s ultados de be pe rm itir a los us uarios de s plazars e


hac ia de lante y hac ia atrás por la lis ta de re s ultados s i la bús que da
de vue lve m ás de c inc o re g is tros . La pág ina de l c urs o prác tic o inc luye
las im ág e ne s "Pre vious " (ante rior) y "Ne xt" (s ig uie nte ) para e s te fin.
Su trabajo c ons is te e n ac tivar e s tas im ág e ne s de form a que , c uando e l
us uario hag a c lic e n e llas , la pág ina m ue s tre m ás re s ultados (e n e l
c as o de que e xis tan).

1 Se le c c ione la im ag e n "Pre vious " e n la pág ina.

2 En e l pane l s e rve r be haviors , hag a c lic e n e l botón de s ig no m ás (+ ) y

Instituto de Computación Activa de México S. C. 65


MACROMEDIA DREAMWEAVER MX

s e le c c ione Re c ords e t pag ing > m ove to pre vious re c ords e t.


Apare c e rá e l c uadro de diálog o Move to pre vious re c ords e t.

3 En e l m e nú e m e rg e nte Jue g o de re g is tros , as e g úre s e de que e s tá


s e le c c ionado e l jue g o de re g is tros de re s ultados y hag a c lic e n OK.
4 Re pita e l proc e dim ie nto para la im ag e n "Ne xt", c on la dife re nc ia de
que , e n e s ta oc as ión, de be rá s e le c c ionar Move to ne xt re c ords e t
5 Guarde e l trabajo (File > Save ).
Si c om e te alg ún e rror, abra e l pane l Com portam ie ntos de l s e rvidor y
hag a c lic e n e l botón de s ig no m e nos (-) para borrarlo.

Si e s probable que las bús que das g e ne re n g ran c antidad de


re s ultados , pue de añadir un c ontador de re g is tros a la pág ina para
ayudar a los us uarios a c onoc e r e l lug ar e n e l que s e e nc ue ntran
de ntro de l jue g o de re g is tros .

5(&25'6(7,16(57,21)2506

La c ate g oría de Form s de l pane l Ins e rt c ontie ne botone s que pe rm ite n


c re ar form ularios e ins e rtar e le m e ntos de form ulario.

Los form ularios s on s im ple m e nte c onte ne dore s de e le m e ntos de


form ulario; los lím ite s de l form ulario no s on vis ible s e n la ve ntana de
doc um e nto a m e nos que s e s e le c c ione Vie w > vis ual aids > invis ible
e le m e nts .

Coloque e l punto de ins e rc ión de ntro de los lím ite s de l form ulario
ante s de ins e rtar e l e le m e nto de form ulario; los e le m e ntos de
form ulario s ituados fue ra de las e tique tas form no apare c e n e n todos
los nave g adore s . Si inte nta ins e rtar un e le m e nto fue ra de l form ulario,
un c uadro de diálog o le pre g untará s i de s e a añadir una e tique ta de
form ulario alre de dor de dic ho e le m e nto. Hag a c lic e n Sí para c re ar un
form ulario que c onte ng a e l e le m e nto o e n No para ins e rtar e l e le m e nto
s in form ulario.

Form c oloc a un form ulario e n e l punto de ins e rc ión.


Te x Fie ld c oloc a un c am po de te xto e n e l punto de ins e rc ión.
Es table zc a e l nom bre , e l tam año y e l valor inic ial e n e l ins pe c tor de
propie dade s .

Buttón c oloc a e n e l punto de ins e rc ión un botón c on Subm it c om o valor


pre de te rm inado de las e tique tas nam e y vaule . Coloque e l punto de
ins e rc ión de ntro de los lím ite s de l form ulario ante s de ins e rtar e l
botón; los botone s s ituados fue ra de l form ulario no apare c e n e n todos
los nave g adore s . Utilic e e l ins pe c tor de propie dade s para e s table c e r e l

Instituto de Computación Activa de México S. C. 66


MACROMEDIA DREAMWEAVER MX

nom bre , la e tique ta y la ac c ión.

Che c k box c oloc a una c as illa de ve rific ac ión e n e l punto de ins e rc ión.
Es table zc a e l nom bre , e l valor de ac tivac ión y e l e s tado inic ial e n e l
ins pe c tor de propie dade s .

Radio button c oloc a un botón de opc ión e n e l punto de ins e rc ión.


Es table zc a e l nom bre , e l valor de ac tivac ión y e l e s tado inic ial e n e l
ins pe c tor de propie dade s .

Lis t m e nu c oloc a una lis ta o m e nú e m e rg e nte e n e l punto de ins e rc ión.


Es table zc a e l nom bre , e l tipo y los valore s inic iale s e n e l ins pe c tor de
propie dade s .

File fie ld c oloc a un c am po de arc hivo e n e l punto de ins e rc ión.


Es table zc a e l nom bre , e l tam año y e l valor inic ial e n e l ins pe c tor de
propie dade s . Cons ulte Pe rm itir a los vis itante s que c arg ue n un
arc hivo en su s e rvidor.

Im ag e fie ld c oloc a un c am po de im ag e n e n e l punto de ins e rc ión.


Es table zc a e l nom bre , e l tam año, e l te xto alte rnativo y e l arc hivo de
orig e n en el ins pe c tor de propie dade s .

Hidde n fie ld c oloc a un c am po oc ulto e n e l punto de ins e rc ión.


Es table zc a e l nom bre y e l valor e n e l ins pe c tor de propie dade s .

Jum p m e nu c oloc a un m e nú e m e rg e nte de URL e n e l punto de


ins e rc ión. Al e le g ir un valor de e s te m e nú, e l us uario s e tras lada al
URL. Es table zc a los valore s de la lis ta e n e l c uadro de diálog o que
apare c e .

'(/(7(5(&25'6(7

El s ig uie nte pas o c ons is te e n añadir e l c om portam ie nto de s e rvidor


Borrar re g is tro para ac tualizar la tabla de la bas e de datos c uando e l
us uario hag a c lic e n e l botón Subm it.
Para añadir un c om portam ie nto de s e rvidor para borrar la tabla de la
bas e de datos .

Instituto de Computación Activa de México S. C. 67


MACROMEDIA DREAMWEAVER MX

1 En e l pane l applc ation,hag a c lic e n la pe s taña de s e rve r be haviors ,


hag a c lic e n e l botón de s ig no m ás (+ ) y s e le c c ione Ac tualizar re g is tro
e n e l m e nú e m e rg e nte . Se le c c ione de le te re c ord. Apare c e rá e l c uadro
de diálog o Borrar re g is tro.

2 Utilic e los m e nús c onte xtuale s c onne c tion y de le te from table para
e s pe c ific ar la tabla de la bas e de datos que c ontie ne los re g is tros que
s e van a borrar.

3 En e l m e nú e m e rg e nte s e le c t re c ord from , e s pe c ifique e l jue g o de


re g is tros que c ontie ne e l re g is tro que s e va a borrar.

4 En e l m e nú e m e rg e nte unique ke y c olum n, s e le c c ione una c olum na


de c lave (g e ne ralm e nte , la c olum na ID de l re g is tro) para ide ntific ar e l
re g is tro de la tabla de la bas e de datos .
Si e l valor e s un núm e ro, s e le c c ione la opc ión Num é ric o.
Ge ne ralm e nte , las c olum nas de c lave s ólo adm ite n valore s
num é ric os , pe ro tam bié n pue de n ac e ptar valore s de te xto.

5 En e l c uadro afte r de le ting g o to, introduzc a la pág ina que s e de be


abrir de s pué s de borrar e l re g is tro de la tabla.

6 En e l m e nú e m e rg e nte de le ting by s ubm itting , e s pe c ifique e l


form ulario HTML que c ontie ne e l botón Subm it que e nvía e l c om ando
de borrado al s e rvidor.
Dre am we ave r e le g irá autom átic am e nte e l prim e r form ulario de la
pág ina.
Haga clic en Ok.

5(&25'6(783'$7()250

Instituto de Computación Activa de México S. C. 68


MACROMEDIA DREAMWEAVER MX

Para añadir un c om portam ie nto de s e rvidor para ac tualizar la tabla de


la bas e de datos .

1 En e l pane l Se rve r be haviors , hag a c lic e n e l botón de s ig no m ás (+ )


y s e le c c ione update re c ord e n e l m e nú e m e rg e nte .
Apare c e rá e l c uadro de diálog o Ac tualizar re g is tro.

2 Utilic e los m e nús c onte xtuale s Conne c tón y Table to update para
e s pe c ific ar la tabla de la bas e de datos que c ontie ne los re g is tros que
s e van a ac tualizar.

3 En e l m e nú e m e rg e nte s e le c c re c ord from , e s pe c ifique e l jue g o de


re g is tros que c ontie ne e l re g is tro que apare c e e n e l form ulario HTML.

4 En e l m e nú e m e rg e nte unique ke y c olum n, s e le c c ione una c olum na


de c lave (g e ne ralm e nte , la c olum na ID de l re g is tro) para ide ntific ar e l
re g is tro de la tabla de la bas e de datos .
Se le c c ione la opc ión Num é ric o s i e l valor e s un núm e ro.
Ge ne ralm e nte , las c olum nas de c lave s ólo adm ite n valore s
num é ric os , pe ro tam bié n pue de n ac e ptar valore s de te xto.

5 En e l c uadro afte r updating to g o, introduzc a la pág ina que s e de be


abrir de s pué s de ac tualizar e l re g is tro de la tabla.

6 En e l m e nú e m e rg e nte g e t value from , e lija e l form ulario HTML


utilizado para e ditar los datos de l re g is tro.
UltraDe v e le g irá autom átic am e nte e l prim e r form ulario de la pág ina.

7 Es pe c ifique e l c am po de la tabla de la bas e de datos que ac tualizará


c ada obje to de l form ulario. Para e llo, s e le c c ione un obje to de
form ulario e n la lis ta Ele m e ntos de form ulario y e lija una c olum na de
la tabla e n e l m e nú e m e rg e nte Colum na y e l tipo de datos
c orre s pondie nte e n e l m e nú e m e rg e nte s ubm it as .
El tipo de datos indic a la c las e de datos que e s pe ra re c ibir la c olum na
de la tabla de la bas e de datos (te xto, num é ric o, valore s boole anos de
c as illa de ve rific ac ión). Por e je m plo, s i la c olum na de la tabla s ólo
ac e pta valore s num é ric os , e lija Num é ric o e n e l m e nú e m e rg e nte
s ubm it as .
Dic ho m e nú inc luye dos tipos de datos de Fe c ha. Se le c c ione e l tipo de
datos Fe c ha MS Ac c e s s para las bas e s de datos Mic ros oft Ac c e s s y e l
tipo Fe c ha para c ualquie r otra bas e de datos .
Re pita e l m is m o proc e dim ie nto para c ada obje to de form ulario de la
lis ta Ele m e ntos de form ulario.
8 Hag a c lic e n OK.

Instituto de Computación Activa de México S. C. 69


MACROMEDIA DREAMWEAVER MX

%8648('$'(5(*,6752 48(5<$'$9$1&('

Bús que da de re g is tros


Cre ar la pág ina de bús que da

Una pág ina de bús que da e n la We b norm alm e nte c ontie ne c am pos de
form ulario e n los que los us uarios introduc e n parám e tros de
bús que da. Cuando e l us uario hac e c lic e n e l botón Bus c ar de l
form ulario, s e e nvían los parám e tros de bús que da a la pág ina de
re s ultados re s ide nte e n e l s e rvidor. La pág ina de re s ultados re s ide nte
e n e l s e rvidor, no la pág ina de bús que da de l nave g ador, e s la
re s pons able de re c upe rar los re g is tros de la bas e de datos .
Para c om e nzar c on e s ta parte de la aplic ac ión We b, c re e dos pág inas :
una pág ina de bús que da que pe rm ita a los us uarios introduc ir
parám e tros de bús que da y una pág ina de re s ultados para m os trar los
re g is tros e nc ontrados . Pue de inc lus o c om binar las dos pág inas e n una
s ola. Com o m ínim o, la pág ina de bús que da de be inc luir un form ulario
HTML c on un botón Enviar.
Para añadir un form ulario HTML a una pág ina de bús que da:

1 Abra la pág ina de bús que da y s e le c c ione Form s de l pane l ins e rt de


c lic e n e n e l obje to form .
Se c re ará un form ulario vac ío e n la pág ina. Es pos ible que te ng a que
ac tivar los Ele m e ntos invis ible s (Vie w > vis ual aids > invis ible
e le m e nts ) para ve r los lím ite s de l form ulario, que s e re pre s e ntan
m e diante líne as de lg adas de c olor rojo.

2 Añada obje tos de form ulario para que los us uarios introduzc an s us
parám e tros de bús que da e lig ie ndo Obje tos de form ulario de l m e nú
Ins e rtar.
Entre los obje tos de form ulario fig uran los c am pos de te xto, los m e nús
de lis tas , las c as illas de ve rific ac ión y los botone s de opc ión. Pue de
añadir tantos obje tos de form ulario c om o de s e e para ayudar a los
us uarios a de finir bús que das pre c is as . No obs tante , re c ue rde que
c uanto m ayor s e a e l núm e ro de parám e tros de bús que da de la pág ina
de bús que da, m ás c om ple ja s e rá la de c larac ión SQL.
Para obte ne r m ás inform ac ión s obre e l ins pe c tor, c ons ulte "Cre ar
form ularios ", de Utilizac ión de Dre am we ave r o la Ayuda de
Dre am we ave r (he lp >us ing Dre am we ave r).

3 Añada al form ulario un botón Enviar (Ins e rt > form s > Button).

4 Si lo de s e a, pue de c am biar la e tique ta de l botón Enviar

Instituto de Computación Activa de México S. C. 70


MACROMEDIA DREAMWEAVER MX

s e le c c ionando e l botón, abrie ndo e l pane l de prope rtie s (Windows >


Prope rtie s ) e introduc ie ndo un nue vo valor e n e l c uadro Etique ta.
Por e je m plo, e s te e s e l ins pe c tor de propie dade s de un botón c on la
e tique ta "bus c ar":

A c ontinuac ión, de be rá indic ar al form ulario e l lug ar al que de be


e nviar los parám e tros de bús que da c uando e l us uario hag a c lic e n e l
botón Subm it.

5 Se le c c ione e l form ulario e lig ie ndo la e tique ta < form > e n e l s e le c tor
de e tique tas que s e e nc ue ntra e n la parte infe rior de la ve ntana de
doc um e nto, c om o se m ue s tra en la im ag e n.

6 En e l c uadro Ac c ión de l pane l de prope rtie s de l form ulario,


introduzc a e l nom bre de l arc hivo de la pág ina de re s ultados que
lle vará a c abo la bús que da e n la bas e de datos .

7 En e l m e nú e m e rg e nte m é thod, e lija uno de los s ig uie nte s m é todos


para de te rm inar c óm o de be e nviar los datos e l form ulario al s e rvidor.

GET e nvía los datos de l form ulario añadié ndolos al URL c om o una
c ade na de c ons ulta. Dado que los URL e s tán lim itados a 8. 192
c arac te re s , no utilic e e l m é todo GET c on form ularios larg os .

POST e nvía los datos de l form ulario e n e l c ue rpo de un m e ns aje .


De fault us a e l m é todo pre de te rm inado de l nave g ador (g e ne ralm e nte ,
GET).

Ya ha te rm inado la pág ina de bús que da. A c ontinuac ión de be rá c re ar


la pág ina de re s ultados .
Una ve z que e l us uario introduzc a los parám e tros de bús que da, la
aplic ac ión de be rá re c upe rar los re g is tros de la bas e de datos . Es ta
tare a la re aliza la pág ina de re s ultados .
Es tas s on las tare as que re aliza una pág ina de re s ultados :
Obtie ne los parám e tros de bús que da de la pág ina de bús que da.
Cone c ta c on la bas e de datos y bus c a re g is tros .
Cre a un jue g o de re g is tros a partir de los re g is tros e nc ontrados .
Mue s tra e l c onte nido de l jue g o de re g is tros .

Si la pág ina de re s ultados s ólo tie ne un parám e tro de bús que da (un
s olo c am po de te xto, por e je m plo), podrá c re ar la pág ina de re s ultados
s in c ons ultas ni variable s SQL. Lo únic o que te ndrá que hac e r e s c re ar
un jue g o de re g is tros y de s pué s añadir un filtro para e xc luir re g is tros

Instituto de Computación Activa de México S. C. 71


MACROMEDIA DREAMWEAVER MX

que no c um plan las c ondic ione s e s table c idas por los parám e tros de
bús que da e nviados por la pág ina de bús que da.

Si la pág ina de bús que da e nvía m ás de un parám e tro de bús que da al


s e rvidor, de be rá e s c ribir una c ons ulta SQL para la pág ina de
re s ultados y utilizar los parám e tros de bús que da e n las variable s SQL.

De s pué s de que Dre am we ave r ins e rte la c ons ulta SQL e n la pág ina y
que s e e je c ute la pág ina e n e l s e rvidor, s e c om prue ba c ada re g is tro de
la tabla de la bas e de datos . Si e l c am po e s pe c ific ado e n un re g is tro
c um ple las c ondic ione s de la c ons ulta SQL, e l re g is tro s e inc luirá e n
un jue g o de re g is tros . La c ons ulta SQL c re a un jue g o de re g is tros que
c ontie ne s olam e nte los re s ultados de la bús que da.

Por e je m plo, e l pe rs onal de ve ntas pue de e s tar e n c ondic ione s de


inform ar s obre qué c lie nte s de un áre a de te rm inada tie ne n ing re s os
s upe riore s a un nive l c onc re to. En un form ulario de una pág ina de
bús que da, e l as oc iado c om e rc ial introduc e un áre a g e og ráfic a y un
nive l de ing re s os m ínim o y lue g o hac e c lic e n e l botón Enviar para
e nviar los dos valore s a un s e rvidor. En e l s e rvidor, los valore s s e
pas an a la de c larac ión SQL de la pág ina de re s ultados , que c re a un
jue g o de re g is tros s ólo c on los c lie nte s de l áre a e s pe c ific ada c on
ing re s os s upe riore s al nive l e s pe c ific ado.

0$67(5'(7$,/3$*(6(7

Instituto de Computación Activa de México S. C. 72


MACROMEDIA DREAMWEAVER MX

Una pág ina m ae s tra e s una pág ina e n la que s e lis tan los re g is tros y
los c orre s pondie nte s vínc ulos de c ada re g is tro. Cuando e l us uario
hac e c lic e n un vínc ulo, s e abre una pág ina de talle que m ue s tra
inform ac ión adic ional s obre e l re g is tro. Por e je m plo, a c ontinuac ión
s e m ue s tra una pág ina m ae s tra de un s itio de Intrane t de una e m pre s a
fic tic ia:

Cuando un us uario hac e c lic e n uno de los ic onos de vis ualizac ión
vinc ulados , s e abre una pág ina de talle :

Una pág ina de re s ultados e s un e je m plo típic o de pág ina m ae s tra. Sin
e m barg o, a dife re nc ia de la pág ina m ae s tra de s c rita e n e s te te m a, la
lis ta de re g is tros de una pág ina de re s ultados la de te rm ina, no us te d
c om o dis e ñador, s ino e l us uario. (El us uario de te rm ina la lis ta
m e diante la re alizac ión de una bús que da e n la bas e de datos . ) Para
obte ne r m ás inform ac ión s obre e s te tipo de pág ina m ae s tra.

Pue de utilizars e una pág ina de talle para ac tualizar o borrar e l re g is tro
m os trado. Para obte ne r m ás inform ac ión s obre la ac tualizac ión y
e lim inac ión de pág inas .
Una pág ina m ae s tra c ons ta de los s ig uie nte s e le m e ntos :
Un jue g o de re g is tros .
Una diag ram ac ión de pág ina para m os trar m últiple s re g is tros .
Un c om portam ie nto de s e rvidor Ir a pág ina De talle para abrir la
pág ina de talle y pas ar e l ID de l re g is tro e n e l que ha he c ho c lic e l
us uario.
Una pág ina de talle c ons ta de los s ig uie nte s e le m e ntos :
Una diag ram ac ión de pág ina para m os trar un únic o re g is tro.
Un jue g o de re g is tros que c onte ng an los datos de l re g is tro.
Un filtro de jue g o de re g is tros para re c upe rar un re g is tro c onc re to de
la tabla de la bas e de datos o un c om portam ie nto de s e rvidor Move r a
un re g is tro c onc re to para de s plazars e a un re g is tro c onc re to de l jue g o
de re g is tros
Tras añadir un jue g o de re g is tros a una pág ina m ae s tra vac ía, pue de
c om ple tar e l jue g o de pág inas Mae s tro/ De talle e n una s ola ope rac ión
utilizando e l obje to Live Jue g o de pág inas Mae s tro/ De talle . El obje to
Live añade los s ig uie nte s e le m e ntos a la pág ina m ae s tra:
Una tabla bás ic a c on una re g ión re pe tida para m os trar m últiple s
re g is tros .
Una barra de nave g ac ión por e l jue g o de re g is tros .
Un c ontador de re g is tros .
Un c om portam ie nto de s e rvidor Ir a pág ina De talle para abrir la
pág ina de talle y pas ar e l ID de l re g is tro e n e l que ha he c ho c lic e l
us uario.
El obje to Live tam bié n c re a una pág ina de talle s i no la ha c re ado
ante riorm e nte y añade a e lla los s ig uie nte s e le m e ntos :
Una tabla bás ic a para m os trar un únic o re g is tro.
Un jue g o de re g is tros filtrado para loc alizar y m os trar e l re g is tro e n
e l que e l us uario ha he c ho c lic e n la pág ina m ae s tra.

Instituto de Computación Activa de México S. C. 73


MACROMEDIA DREAMWEAVER MX

De s pué s de que e l obje to Live c oloque los e le m e ntos m e nc ionados e n


las pág inas , podrá utilizar las he rram ie ntas de dis e ño de pág inas de
UltraDe v para pe rs onalizar e l dis e ño de las pág inas o e l pane l
Com portam ie ntos de l s e rvidor para e ditar los c om portam ie ntos de l
s e rvidor.

Para c om ple tar e l jue g o de pág inas Mae s tro/ De talle c on un


obje to Live :

Instituto de Computación Activa de México S. C. 74


MACROMEDIA DREAMWEAVER MX

1 Cre e una pág ina m ae s tra vac ía y añada a e lla un jue g o de re g is tros .
As e g úre s e de que e l jue g o de re g is tros c ontie ne , no s ólo todas las
c olum nas ne c e s arias para la pág ina m ae s tra, s ino tam bié n todas las
c olum nas ne c e s arias para la pág ina de talle .

2 Abra la pág ina m ae s tra e n la vis ta de Dis e ño e n e l pane l de ins e rt


e lija m as te r de tail pag e s e t.
Aparecerá el cuadro de diálogo I nsert ar j uego de páginas Maest ro/ Det alle.

En el m enú em ergent e recordset , asegúrese de que est á elegido el j uego


de regist ros que cont iene los regist ros que desea visualizar en la página
m aest ra.

4 En e l áre a Mas te r pag e fie ld, s e le c c ione las c olum nas de l jue g o de
re g is tros que de be n vis ualizars e e n la pág ina m ae s tra.
De form a pre de te rm inada, Dre am we ve r s e le c c iona todas las
c olum nas de l jue g o de re g is tros . Si e l jue g o de re g is tros c ontie ne una
c olum na de c lave e xc lus iva, c om o, por e je m plo, re c ordID,
s e le c c ióne la y hag a c lic e n e l botón de s ig no m e nos (-) para que no
apare zc a e n la pág ina.

5 Si de s e a c am biar e l orde n e n e l que apare c e n las c olum nas e n la


pág ina m ae s tra, s e le c c ione una c olum na de la lis ta y hag a c lic e n la
fle c ha arriba o abajo.
En la pág ina m ae s tra, las c olum nas de l jue g o de re g is tros e s tán
dis pue s tas horizontalm e nte e n una tabla. Al hac e r c lic e n la fle c ha

Instituto de Computación Activa de México S. C. 75


MACROMEDIA DREAMWEAVER MX

arriba, s e de s plaza la c olum na hac ia la izquie rda; al hac e r c lic e n la


fle c ha abajo, s e de s plaza la c olum na hac ia la de re c ha.

6 En e l m e nú e m e rg e nte link to de atil from de s de , e lija la c olum na de l


jue g o de re g is tros que m os trará un valor que tam bié n s e rvirá c om o
vínc ulo c on la pág ina de talle .
Por e je m plo, s i de s e a que c ada nom bre de produc to de la pág ina
m ae s tra te ng a un vínc ulo c on la pág ina de talle , e lija la c olum na de l
jue g o de re g is tros que c ontie ne los nom bre s de los produc tos .

7 En e l m e nú e m e rg e nte pas s unique ke y, e lija la c olum na de l jue g o


de re g is tros que c ontie ne valore s que ide ntific an a los re g is tros .
Norm alm e nte , la c olum na e le g ida e s la que c ontie ne e l núm e ro de ID.
Es te valor s e pas a a la pág ina de talle para que pue da ide ntific ar e l
re g is tro e le g ido por e l us uario.

8 Es pe c ifique e l núm e ro de re g is tros que de be n m os trars e e n la opc ión


de s how.

9 En e l c uadro De tail pag e Nam e , hag a c lic e n Brows e … y loc alic e e l


arc hivo de pág ina de talle que ha c re ado o introduzc a un nom bre para
que e l obje to Live la c re e autom átic am e nte .

10 En e l áre a Cam pos de pág ina De talle , s e le c c ione las c olum nas que
de be n vis ualizars e e n la pág ina de talle .
De form a pre de te rm inada, Dre am we ave r s e le c c iona todas las
c olum nas de l jue g o de re g is tros de la pág ina m ae s tra. Si e l jue g o de
re g is tros c ontie ne una c olum na de c lave e xc lus iva, c om o, por
e je m plo, re c ordID, s e le c c ióne la y hag a c lic e n e l botón de s ig no
m e nos (-) para que no apare zc a e n la pág ina de talle .

11 Si de s e a c am biar e l orde n e n e l que apare c e n las c olum nas e n la


pág ina de talle , s e le c c ione una c olum na de la lis ta y hag a c lic e n la
fle c ha arriba o abajo.
En la pág ina de talle , las c olum nas de l jue g o de re g is tros e s tán
dis pue s tas ve rtic alm e nte e n una tabla. Al hac e r c lic e n la fle c ha
arriba, s e de s plaza la c olum na hac ia arriba; al hac e r c lic e n la fle c ha
abajo, s e de s plaza la c olum na hac ia abajo.

12 Hag a c lic e n OK.


El obje to Live c re a una pág ina de talle (s i no la ha c re ado us te d ante s ) y
añade c onte nido dinám ic o y c om portam ie ntos de s e rvidor tanto a la
pág ina m ae s tra c om o a la pág ina de talle .

13 Pe rs onalic e las pág inas m ae s tra y de talle para adaptarlas a s us


ne c e s idade s .
Pue de pe rs onalizar totalm e nte e l dis e ño de am bas pág inas utilizando
las he rram ie ntas de dis e ño de pág inas de Dre am we ave r. Tam bié n
pue de e ditar los c om portam ie ntos de s e rvidor hac ie ndo doble c lic e n

Instituto de Computación Activa de México S. C. 76


MACROMEDIA DREAMWEAVER MX

e llos e n e l pane l Com portam ie ntos de l s e rvidor.

5(&25'6(71$9,*$7,2167$786

El botón de re c ords e t navig ation s tatus pe rm ite ve r la pos ic ión ac tual


de la pág ina que tie ne la bas e de datos .
Por e je m plo
1 de 1 de 10, nos dic e que e s tam os e n e l prim e r re g is tro de 10 que
te ne m os .

5(3($75(*,21

La opc ión de re pe at re g ion pe rm ite e s pe c ific ar c uantas ve c e s s e


re pe tirá la re g ión s e le c c ionada de una c one xión de bas e de datos .

 /2*,1&21),50

Instituto de Computación Activa de México S. C. 77


MACROMEDIA DREAMWEAVER MX

Para e s table c e r un log in c onfirm de be rá te ne r tre s hojas e n m odo de


vis ta dis e ño.
Para c re ar un log in c onfirm s ig a las s ig uie nte s intruc c ione s

1.- re alic e s u c one xión a una bas e de datos (ve as e tipos de c one xión)
2. - c re e un form ulario c on las s ig uie nte s nom bre s
introdus c a un form
de ntro de l form e s c riba us uario, ins e rte un te xtfie ld
de nue vo de ntro de l form e s c riba c ontras e ña e introdus c a un s e g undo
te xtfie ld
ins e rte un button
3.- s e le c c ione e l te xtfie ld de la e tique ta de c ontras e ña y e n e l pane l de
prope rtie s s e le c c ione pas word.
4.- vaya al pane l de s e rve r be haviors pre s ione le s ig no (+ ) y de la lis ta
de s ple g able s e le c c ione us e r authe ntific ation > log in us e r apare c e rá
un c uadro de dialog o.
5. - ve rifique que los te xtfie ld apre s an e n form a ode nada
6. - En e l c uadro de Validate us ing c onne c tion pre s ione la ve ntana
de s ple g able para s e le c c ionar la bas e de datos .
En e l c am po if log in s uc c e e ds , g o to e s pe c ific a pag ina que s e abrirá e n

Instituto de Computación Activa de México S. C. 78


MACROMEDIA DREAMWEAVER MX

c as o de que s e a c orre c ta la c ontras e ña.


En c am po de if log in fails , g o to:- e s pe c ific a la pag ina que s e abrirá e n
c as o de que la c ontras e ña s e a e rróne a.

 5(675,1*3$*(

Una ve z te rm inado de c re ar pag ina de l us uario, abra e l doc um e nto de


us uario o la pag ina que va ac c e de r e l us uario e n c as o de que s u
c ontras e ña s e a c orre c ta , e n e s te doc um e nto lo vam os a re s tring ir:
Para re s tring ir e l ac c e s o a una pág ina hag a lo s ig uie nte .

1. - abra e l doc um e nto


2. - hag a la c one xión a la bas e de datos
3. - una ve z he c ha la c one xión vaya al pane l de applic ation y pre s ione
la pe s taña que dic e s e rve r be haviors
4. - pre s ione e l s ig no (+ ) de l m e nú de s ple g able s e le c c ione
authe ntific ation> Re s tric t ac c e s to pag e ,
e n e l c uadro de dialog o ac tive la opc ión que dic e Re s tric t bas e d on.
5. - e n e l c am po de if ac c e s s de nie d, g o ot.
Es pe c ifique la pag ina que s e abrirá.

 5(',5(&7,213$*(

Instituto de Computación Activa de México S. C. 79


MACROMEDIA DREAMWEAVER MX

pue de s re dire c c ionar una pag ina pas ado un tie m po c on las e tique tas
META.
e je m plo

< he ad>
< m e ta http-e quiv=”re fre s h”c onte nt= ”15;URL= www. ibm .c om >
< title >pag ina re dire c c ionada a IBM a los 15 s e g undos < title >
< / he ad>

Instituto de Computación Activa de México S. C. 80


MACROMEDIA DREAMWEAVER MX

Cue s tionario 7

1. - Conc e pto de :
Bas e de datos
Tabla
Cam po
Re g is tro

2. - De finic ión de re c ords e t

3. - Que e s ODBC

4. - Utile ría de Windows para c onfig urar DNS de s is te m a

5. - De finic ión e ntre DNS de s is te m a y DNS de us uario

6. - Que s ig nific a SQL

7. - Que e s un form ulario

8. - De finic ión e ntre m é todo POST y GET

Instituto de Computación Activa de México S. C. 81

También podría gustarte