EN DREAMWEAVER

Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, o ci!n Plug"in# En Dream$eaver no se mostrar%n los controles de audio# &odos los archivos que son insertados como lug"in a arecen re resentadas dentro de Dream$eaver or una imagen como la in'erior#

En el ins ector de ro iedades ueden esta(lecerse la altura ) la anchura con la que se mostrar%n los controles de audio, mediante Al ) An# En el caso de no es eci'icar ningn tama*o, se mostrar% el tama*o or de'ecto de los controles# +i lo que se desea es que se escuche el sonido en la %gina, ero que no se muestren los controles de audio, los cam os Al ) An de(en valer cero# ,os sonidos se re roducen autom%ticamente al cargarse la %gina, ) se re roducen solamente una ve-# Estos valores no ueden cam(iarse a trav.s del ins ector de ro iedades, ero s a trav.s del c!digo# /0a) que tener en cuenta el tama*o del 'ichero de sonido )a que la carga de la %gina uede ser mu) lenta ) erder el sentido que se le retenda dar# Recordemos que las %ginas de(en cargar r% ido si no queremos que qui.n nos visite se a(urra ) no vuelva nunca m%s1# Por e2em lo, el archivo anterior a areca en el c!digo como3 4em(ed src56varios7audio#MID6847em(ed8 Pero ara que no se re rodu2era autom%ticamente se ha a*adido autostart56'alse6, ) re rodu2era continuamente se ha a*adido loo 56true6# ,a lnea de c!digo del archivo de audio a quedado del siguiente modo3 4em(ed src56varios7audio#MID6 autostart56'alse6 loo 56true6847em(ed8 Para oder hacer que el audio ueda activarse ) desactivarse cuando no se muestran los controles, es necesario insertar una serie de com ortamientos que se encarguen de esa tarea# +i quieres oner msica de 'ondo en una %gina $e(, sin que a are-can los controles de audio, uedes escri(ir este c!digo directamente en la vista 9!digo3 4(gsound src56cancion:#$av6 loo 56":68 Ins.rtalo des u.s de la etiqueta 47title8# 9on el ar%metro loo uedes decidir cuantas veces quieres que se re rodu-ca, :, ;, < ### /con ": se re roduce de modo continuo1# ara que se

:#" Estilos 9++ /I1#

,os Estilos en cascada, ara todos los documentos que 'orman un sitio $e(# Esto es as cuando los estilos css los de'inimos en una ho2a e=terna, or otro lado, la 'orma m%s renta(le de tra(a2ar esta herramienta# Por e2em lo el Tutorial Dreamweaver MX de iniciaci!n al editor, esta(a controlado or una ho2a de estilos que de'ina una serie de valores de color, 'orma, tama*o, ara unas cuantas de las ala(ras ) te=tos em leados en el sitio# De'inir as los estilos de un sitio le da una coherencia ) sensaci!n de unidad que, de otro modo, es di'cil de conseguir# Por otro lado, si un estilo no nos gusta una ve- )a reali-ado todo el sitio, (astar% modi'icar el estilo concreto en esa ho2a, ara que se modi'ique en todos los documentos que 'ormen el sitio ) que est.n vinculados con esa ho2a de estilos#

estilos css,

nos

ermiten controlar los

ar%metros de estilo

ho2a de estilos css, teniendo a(ierto cualquier documento del sitio, le damos a Ventana 8 Estilos 9++
Para crear una

En la columna de la derecha se a(rir%3

Ahora incharemos en el icono

de

) a arecer% la siguiente ventana3

En esta ventana

odemos darle un nom(re al estilo que vamos a crear / or de'ecto el

rograma le da el nom(re

#unnamed:1# >sar

Podemos elegir si lo que queremos es de'inir un estilo ersonal, o (ien, rede'inir una de las etiquetas del lengua2e 0&M,# /M%s adelante e= licaremos la tercera o ci!n3

selector 9++1#

Por ltimo odemos de'inir el estilo en una ho2a e=terna o (ien, que se a lique nicamente al documento en el que estamos tra(a2ando# Vamos a em e-ar tra(a2ando los valores que est%n elegidos or de'ecto3

,e damos un nom(re a nuestro estilo, or e2em lo, +er% un estilo ersonal# En una ho2a e=terna#

ala(rasclave

9am(iamos el

#unnamed:

or

# ala(rasclave

/si no

onemos el

unto al comien-o, A arecer% la

Dream$eaver lo har% siguiente ventana3

or nosotros1 ), sin m%s, le damos a

Ace tar#

En esta ventana nos a arece la car eta ra- del sitio, en este caso, la car eta ara este

$e(DreamM?curso # ,e daremos Nom(re de archivo / or e2em lo ho2a:1 ) ulsaremos @uardar3

sitio de e2em lo que he llamado

un nom(re en

+e a(rir% la siguiente ventana ara que de'inamos el estilo3

Por e2em lo3

A le damos a

Ace tar

Podemos o(servar la inclusi!n del estilo que aca(amos de de'inir3

A, or otro lado, vemos la ho2a de estilos dentro de los archivos del sitio3

+i hacemos do(le clic so(re el icono ho2a3

veremos los estilos de'inidos en nuestra

Volvemos a nuestro documento ara a licar nuestro estilo3 +eleccionaremos la ala(ra a la que se lo queramos a licar, a(riremos de nuevo /o vamos directamente a Estilos 9++ desde 1 los

ala(rasclave#

Ventana

Estilos 9++

) haremos clic en el estilo

El te=to seleccionado asar% a estar escrito con los ar%metros de'inidos# +i una ve- de'inido el estilo, no nos gusta, odemos modi'icarlo haciendo do(le clic en el estilo corres ondiente # Para de'inir otro estilo, dentro de la ventana le damos al icono ) se a(rir%

la ventana Nuevo estilo# ,e onemos un nom(re, or e2em lo,

#te=to: ) lo de'inimos

Esta es la de'inici!n que he hecho3

Este estilo lo quiero a licar a todos los %rra'os que escri(a en los documentos# Para hacerlo (astar% colocar el cursor en el inicio del %rra'o ) hacer clic so(re el estilo # B(serva que, si dentro del %rra'o, ha) una ala(ra )a de'inida como

ala(raclave el estilo de .sta no se va a modi'icar# >n estilo

revalece so(re el otro#

Para aca(ar este a artado, de'ino otro estilo ara los ttulos de los a artados ) lo a lico# Nuestra ho2a tiene, ahora, estos tres estilos de'inidos3

;#" Estilos 9++ /II1#

En rimer lugar, vinculamos nuestro documento con la ho2a de estilos creada3 Ventana 8 Estilos CSS , inchamos en 3

hoja1 que tenemos

,e damos a

Examinar3

+eleccionamos la

hoja1 ) le damos a Aceptar

Volvemos a

Aceptar
ara crear nuevo estilo# +e a(rir%3

Ahora inchamos en el icono

Pero ahora seleccionamos

Redefinir etiqueta HTML#

Ahora si inchamos en la 'lechita de

Etiqueta se des

legar%3

10

Pro(a(lemente, muchas de las ersonas que lean este tutorial, desconocer%n algunas o muchas de las etiquetas que a arecen en este listado# No es o(ligatorio conocerlas ), adem%s, Dream$eaver las escri(e or nosotros# Nosotros, s!lo a modo de e2em lo, vamos a rede'inir la etiqueta <a> que es la etiqueta de los enlaces# CienD la seleccionamos3

) le damos a

Aceptar# A

arecer% la ventana de

efinir el estilo3

11

De'inimos el estilo ) elegimos

ecoraci!n3 nin"una3

,e damos a

Aceptar#

12

EFu. hemos hechoG 0emos indicado al rograma que, a arte del ti o de 'uente, del tama*o ) del grosor, cuando ha)a un enlace, el vnculo no est. su(ra)ado# 9omo esto lo hemos de'inido dentro de la ho2a de estilos hoja1, lo que aca(amos de hacer tiene in'luencia en todos los documentos vinculados con la ho2a, tam(i.n en los creados anteriormente# Ahora vamos a a*adir un e'ecto a este estilo3 Fueremos que cuando ase el untero del rat!n or el vnculo, .ste se su(ra)e# Para ello volvemos a inchar en el icono ) ahora marcamos

#sar selector CSS

En

Selector$ elegimos a$ho%er

Aceptar ) a arecer% la ventana de su&ra'ado ) le damos a Aceptar#3

,e damos a

efincici!n de estilo# Marcamos

13

B(serva que lo que aca(amos de hacer no se guarda como un estilo a a licar3

De hecho, siem re que esta(le-camos un enlace se van a im lementer las caractersticas de estilo de'inidas# +in em(argo, si inchamos en Editar estilos, s a arece la redi'inici!n de la etiqueta <a> 3

0aciendo do(le clic so(re este estilo, o so(re cualquier otro, caractersitcas del mismo#

odremos modi'icar las

14

9omo se ha odido intuir, las ho2as de estilo tienen una gran otencialidad ) sus osi(ilidades son muchas# Nosotros s!lo nos hemos asomado a unas ocas de las utilidades que tiene esta herramienta# +e de2a ara el lector la e= erimentaci!n ) ro'undi-aci!n a artir de las istas dadas#

H#" ,os colores#

A estas alturas )a hemos em leado unas cuantas veces las Dream$eaver# aletas de color del

+i ninguno de estos colores nos gusta, colores3

ulsando en

odemos crear nuestros

ro ios

H#:#" 9!digos de color#

+u ongamos que quiero cam(iar el color de esta ala(ra# ,a selecciono ) la ongo de color m%s o menos a-ul#

15

Ahora vo) a ver qu. ha asado en el c!digo 'uente3

El c!digo del color est% 'ormado or I sm(olos al'a"num.ricos recedidos del sm(olo J# ,os sm(olos al'a"num.ricos son las die- ci'ras num.ricas ) las seis rimeras letras del al'a(eto ordenadas de la siguiente 'orma3

<

'

+iendo K el valor mnimo ) ' el valor m%=imo# A su ve- los seis sm(olos se dividen en tres gru os de dos sm(olos3

El rimero de dos sm(olos indica la cantidad de ro2o /KK es el mnimo ) '' el m%=imo1 El segundo de dos sm(olos indica la cantidad de verde /KK es el mnimo ) '' el m%=imo1 El tercero de dos sm(olos indica la cantidad de a-ul /KK es el mnimo ) '' el m%=imo1

,as me-clas ) com(inaciones de cantidad van dando origen a los di'erentes colores#

'''''' KKKKKK ''KKKK KK''KK KKKK'' ''''KK cccccc ''KK''

Es el denominado

c!digo he=adecimal# red

Este c!digo tam(i.n se uede sustituir or la ala(ra inglesa que de'ine el color# As ser% lo mismo que

J''KKKK o green ser% lo mismo que JKK''KK# El ro(lema viene cuando no es un color rimario ni secundario# Por e2em lo, el color (lanchedalmond se corres onde con el c!digo he=adecimal J''e(cd ) es el siguiente color

B(serva que he rellenado la celda con el color escri(iendo en el ins ector de ro iedades el c!digo nom(re del color3

16

L#" Imagen de sustituci!n /roll"over1#

Es una imagen, vnculo a otro documento, que cam(ia de as ecto al asar el untero del rat!n or encima de ella# Primeramente de(eremos tener, l!gicamente, re aradas las dos im%genes ) guardadas en cualquier arte del ordenador# ,e damos a

(nsertar 8 (m)"enes interacti%as 8 (ma"en de sustituci!n

A arecer% la siguiente ventana3

En el Nombre

de la imagen

odemos de2ar la que a arece or de'ecto#

17

En la Imagen original e Imagen de sustitucin le damos a (uscar las im%genes que tenemos guardadas en el ordenador#

E aminar

ara

El rograma nos avisar% que las im%genes no est%n guardadas dentro de la car eta ra- del sitio ) que de(emos guardarlas dentro de esa car eta3

,e decimos que !" # guardamos las im$genes dentro de nuestro sitio en la carpeta %ue ha#amos creado para dejar las im$genes &o sueltas dentro de la carpeta ra"' del sitio() Des u.s escri(imos la >R, com leta de la %gina a la cual queremos enla-ar la imagen en el caso de que el enlace sea a un documento e=terno# B (ien le damos al (ot!n E=aminar en el caso de que nuestro enlace va)a a un documento de nuestro sitio# A )a est%3

En el e2em lo, hemos uesto una imagen con un enlace a un documento e=terno3 El curso de &urismo Rural del *ro'ecto Mentor de Ense*an-a &elem%tica del MEC # Para ver el e'ecto ulsamos la tecla +1, ) lo ro(amos con el navegador#

18

I#" Pl(um de 'otos#

>na o ci!n mu) interesante es la creaci!n de un %l(um de 'otos# Para hacerlo es necesario tener instalado en el ordenador una versi!n de *irewor+s la herramienta gr%'ica de Macromedia# Desde este sitio3 http,--www)macromedia)com-so.tware-trial/download- uedes descargarte una demo# Para crear el %l(um, lo rimero que ha) que hacer es tener en una car eta, en cualquier arte del ordenador, las 'otogra'as guardadas# En el caso que vamos a oner de e2em lo,

las 'otos est%n guardadas en una car eta en D con el nom(re .otos/a#erbe# +on 'otogra'as del entorno de A)er(e /0uesca1 el sitio donde nac hace )a unos cu%ntos a*os### Em e-amos3 Aunque el %l(um no se va a colocar en el documento donde estemos tra(a2ando, es necesario tener cualquier documento a(ierto ara acceder a Comandos 8 Crear )l&um de fotos -e&...

En el caso de que no se tenga el Qire$orRs en el ordenador a arecer% la siguiente ventana de advertencia3

19

A se odr% ir a la %gina de Macromedia ara descargar una demo del rograma# A arecer% la siguiente ventana3

Ponemos un

T"tulo a nuestro %l(um ) una in'ormaci!n de su(enca(e-ado, si se desea# $ fotos/a'er&e13

E=aminamos la car eta origen de las im%genes /en este caso en

20

,e damos a

A&rir ) a

arecer% la car eta3

Aunque a are-ca vaca, la car eta contiene las im%genes reviamente guardadas# ,e damos a !eleccionar#

21

A continuaci!n inchamos en Examinar... de la Carpeta de destino# +e a(rir% la car eta ra- del sitio ) all de(eremos crear una nueva car eta con el nom(re que queramos, or e2em lo, al&um1

Para crear la car eta, car eta

inchamos en el icono

# Inmediatamente a arecer% la nueva

a la que cam(iaremos el nom(re tal como hemos quedado or

album1#
El tama*o de la miniatura uede estar (ien /lo odemos modi'icar si queremos1# Desactivamos la casilla de mostrar nom(re de archivos# Elegimos el nmero de columnas que deseemos tenga la %gina inicial# Ssta ha sido mi ventana com letada3

22

,e damos a Aceptar ) saltar% el imagen# Al 'inal a arecer% el mensa2e3

+ire-or0s

rocesando la in'ormaci!n de cada

A se resentar% en antalla la rimera %gina del %l(um con todas las miniaturas /thum(nails1# Podemos modi'icar los te=tos introducidos, colocar una imagen o color de 'ondo, centrar el te=to,### ara me2orar el as ecto de la %gina#

N#" &e=to Qlash#

Btra 'orma mu) sencilla de crear (otones con animaci!n denominado, ,e damos a ara los vnculos es, con el

te to .lash#

(nsertar 8 (m)"enes interacti%as 8 Texto +lash

23

Nos a arecer% la siguiente ventana3

Aqu odemos elegir el ti o de 'uente, el tama*o, negrita, cursiva, el ti o de 2usti'icaci!n dentro del (ot!n, el te=to que va a tener### Elegimos el archivo con el que se vincula, el destino3 si es en ventana nueva o en toda la antalla, el color de 'ondo ) el nom(re con el que lo vamos a guardar###

24

Esto ha sido lo que he escrito en la ventana3

0aciendo do(le clic so(re el (ot!n se vuelve a la ventana anterior# &am(i.n haciendo un solo clic se a(re esta ventana3

25

En ella se ueden com ortamiento im%genes ara enlaces#

hacer algunos cam(ios, ver el ), en todo caso, v:L#" Ma as de

9on Dream$eaver es mu) '%cil 6ma ear6 una imagen ara hacer que cada una de las -onas elegidas de la imagen sea un vnculo con un documento di'erente# >na ve- insertada en el documento la imagen3

A, con ella seleccionada, elegimos una de estas tres herramientas Ins ector de ro iedades3

del anel del

26

,a rimera herramienta ,a segunda herramienta ,a tercera herramienta

se usa ara hacer -onas rectangulares# se usa ara hacer -onas circulares# se usa ara hacer -onas oligonales#

Vamos a em lear esta ltima ara seleccionar la -ona de la Entrada ) Pasillo en 'orma de 6ele6# Vamos inchando de manera ordenada en cada uno de los seis v.rtices de este olgono3

B(serva que la -ona seleccionada se queda som(reada de color a-ul# En el anel que a arece seleccionamos el V1nculo ) el estino ) escri(imos el te=to Alt que a arecer% al situarse el untero del rat!n so(re el enlace3

volver a la antalla de

(nsertar texto +lash d%ndole a

:L#" Ma as de im%genes ara enlaces#

27

9on Dream$eaver es mu) '%cil 6ma ear6 una imagen ara hacer que cada una de las -onas elegidas de la imagen sea un vnculo con un documento di'erente# >na ve- insertada en el documento la imagen3

A, con ella seleccionada, elegimos una de estas tres herramientas Ins ector de ro iedades3

del anel del

,a rimera herramienta ,a segunda herramienta ,a tercera herramienta

se usa ara hacer -onas rectangulares# se usa ara hacer -onas circulares# se usa ara hacer -onas oligonales#

Vamos a em lear esta ltima ara seleccionar la -ona de la Entrada ) Pasillo en 'orma de 6ele6# Vamos inchando de manera ordenada en cada uno de los seis v.rtices de este olgono3

28

B(serva que la -ona seleccionada se queda som(reada de color a-ul# En el anel que a arece seleccionamos el V1nculo ) el estino ) escri(imos el te=to 2,RAlt que a arecer% al situarse el untero del rat!n so(re el enlace3

:I#" 9a as#
Es di'cil de'inir qu. es una ca a# >na de las 'ormas consistira en imaginar que es una %gina $e( dentro de otra %gina $e(# En realidad varias %ginas $e( dentro de una %gina orque ca as uede ha(er todas las que queramos# Dentro de cada una de las ca as se uede insertar te=to, im%genes,### /en realidad hemos quedado que la imaginamos como una %gina $e( dentro de otra1# ,a caracterstica m%s im ortante de la ca a es que la uedo mover ara colocarla e=actamente donde quiera# As uedo colocar una imagen dentro de una ca a ), una ve- dentro, mover la ca a ara que la imagen se coloque e=actamente en el sitio deseado# Esto es di'cil de conseguir or otros medios###

29

A las ca as tam(i.n se les uede ad2untar 6com ortamientos6 que son 'ragmentos de 2avascri t que ermiten al visitante interactividad con la %gina# Para insertar una ca a3

Insertar 8 9a a

A arecer% la ca a3

El icono

nos va a indicar cada una de las ca as que incor oremos a la %gina#

Pinchando en .l se selecciona la ca a# &am(i.n odemos seleccionar la ca a inchando en el cuadrado # 9uando la ca a est% seleccionada tiene este as ecto3

El cuadrado

sirve, adem%s de ara seleccionar la ca a, ara arrastrarla hasta el unto odemos estirar o encoger la ca a

e=acto que deseemos# 9on los cuadrados rellenos3 ada tando su tama*o a las necesidades#

30

9uando la ca a est% seleccionada ) teniendo a(ierto el anel de ro iedades, a arece la in'ormaci!n so(re las ro iedades de esa ca a3

,a ha llamado 9a a : / ,a)er :1, viene la anchura ) la altura ) nada m%s, orque no hemos uesto nada en la ca a# /En realidad, de momento, no he uesto en la %gina ninguna ca a, esto era una rue(a ara ca turar las im%genes ) los aneles1#

:M#" &ra(a2ar con ca as#

Vamos a hacer un tra(a2o concreto con ca as ara a render so(re su 'uncionamiento e intuir osi(les utilidades# El tra(a2o que quiero hacer es un asatiem o denominado 6cuadrado m%gico6# 9onsiste en colocar determinados nmeros en un cuadrado con un nmero igual de 'ilas ) de columnas de tal manera que las 'ilas sumen lo mismo que las columnas ) las diagonales del cuadrado# Nuestro cuadrado m%gico va a ser de < 'ilas = < columnas, nueve casillas en total a ocu ar or las ci'ras del : al O# ,a suma de todas las 'ilas ) de todas las columnas ) diagonales de(e ser :L#

,o que rimero ha) que hacer es dise*ar, con un rograma gr%'ico, las O ci'ras3

31

Es im ortante reali-ar cada imagen con un tama*o 6redondo6# En el e2em lo miden :KK = :KK =eles# A continuaci!n iremos insertando ca as e introduciendo una imagen dentro de cada una de las ca as /o(serva que el cursor est. dentro de la ca a antes de insertar la imagen1#

Es conveniente cam(iar el tama*o de la ca a ara ada tarla al contenido# B(serva en el anel de Pro iedades que la ca a tiene el mismo tama*o que la imagen /:KK = :KK1#

32

Des la-amos la rimera ca a a otro lugar de la antalla ara que se quede el icono des la-ado res ecto de la ca a que re resenta ) de su contenido#

arri(a,

Vamos incor orando nuevas ca as ), en cada una de ellas, colocamos un nmero# Dream$eaver

llamar% a la rimera ca a ,a)er: /) estar% la imagen del :1 a la segunda ca a ,a)er; /) estar% la imagen del ;1### Es conveniente ser consciente del nom(re que Dream$eaver le va dando a cada ca a /Ins

ector de Pro iedades1#

Des la-amos esta segunda ca a con el nmero ; cerca de la anterior ara se ararla del icono que la re resenta# 9uando ha)amos aca(ado tendremos en la arte su erior i-quierda de la %gina los nueve iconos que re resentan las nueve ca as que hemos introducido#

33

B(serva c!mo, en el momento ca turado or la imagen su erior, est% seleccionada la ca a O en la imagen ) en el icono3 # Puedes ir inchando en todos los iconos de ca a3 ara com ro(ar que se seleccionan todos ) cada uno de los nmeros# &en a(ierto el Panel de

Pro iedades ) com

rue(a, una ve- m%s, el nom(re de la ca a#

A continuaci!n vamos a colocar los nmeros tal ) como como van a estar en la soluci!n 'inal# Em e-amos or la casilla su erior i-quierda que, en esta soluci!n, va a ser el H# ,o llevamos m%s o menos al centro de la antalla ) le damos a

Ventana 8 9om ortamientos

+e a(rir% la siguiente ventana3

34

Ahora incharenos en el icono

) se des legar% el siguiente cat%logo de com ortamientos3

De todos los com ortamientos elegimos Arrastrar ca a /si no tuvieses activo este com ortamiento al inchar en la cru-, incha dentro de la ca a ara seleccionar la imagen ) vu.lvelo a hacer1# A arecer% la siguiente ventana3

&enemos que3

En 9a a3 +eleccionar la ca a 6,a)erH6 /Estamos colocando el H1# Movimiento3 De2amos

Pinchamos en ara que se rellenen los nmeros del Destino de 'orma autom%tica# A2ustamos a ;K =eles del destino# Esto quiere decir que, cuando el visitante suelte el o(2eto a menos de ;K untos de la soluci!n, el o(2eto se colocar% solo de manera e=acta en el sitio que aca(a de ser o(tenido al inchar en B(tener osici!n actual# ,o que ro orcionar% (elle-a en la soluci!n 'inal ) sensaci!n de seguridad al sa(er que es esa la osici!n a la que ha(a que llevar el o(2eto /en este caso el nmero1#

+in restricciones# B(tener osici!n actual

Mu) im ortante#

35

,e damos a Ace tar ) com ro(amos nuestra ca a en el anel de asar al siguiente nmero3

ro iedades

antes de

+i seleccionamos la ca a com ro(aremos su situaci!n3

Vamos colocando cada uno de los nmeros rocurando que est.n er'ectamente alineados con sus vecinos# Podemos a2ustar ) modi'icar la osici!n escri(iendo directamente en el anel de Pro iedades la osici!n

I- ) +u

+i el rimer nmero ha quedado a ;LK untos de la i-quierda ) a :KK untos de arri(a, ) cada ca a /e imagen1 ocu a :KK = :KK, el segundo nmero de(er% quedar a <LK untos de la i-quierda ) a :KK untos de arri(a, el tercer nmero a HLK untos ) a :KK untos res ectivamente# El siguiente nmero ser% el rimero de la segunda 'ila, or eso de(er% estar a ;LK untos de la i-quierda ) a ;KK untos de arri(a, el siguiente a <LK " ;KK, el siguiente a HLK " ;KK# Por ltimo la tercera 'ila3 ;LK "

36

<KK D <LK " <KK ) HLK " <KK#

Re etimos el roceso indicado ara el nmero H de a*adir com ortamiento 6 arrastrar ca a6 ara cada uno de los nmeros segn se va)an quedando colocados en su osici!n 6de soluci!n6# Al nmero que vamos a colocar en el centro /el L1 no le ad2untamos el com ortamiento de 6arrastrar ca a6# +u osici!n ser% inamovi(le3 El visitante de la %gina no lo odr% mover de su osici!n central# 9uando lo ha)amos aca(ado ), ara que ueda ser un asatiem o ara el visitante, tendremos que desordenar los nmeros3 9am(iar los nmeros que nos are-ca e=ce to el del centro que no lo tocaremos# El visitante de la %gina reci(ir% el cuadro tal como lo ha)amos guardado esta ltima ve-, ero, al ser mani ulado or .l, el rograma 6recordar%6 la osici!n que tena cuando el cuadro esta(a (ien resuelto ) cada imagen se de2ar% llevar autom%ticamente a su osici!n correcta cuando el nmero se acerque menos de ;K untos ) el 2ugador suelte el rat!n#

htt 377$$$#ar #2a--tel#es7dream$eaver#htm

37