MAN A DEL !AR"#$#!

AN"E

Diseo de pginas web estticas con DREAMWEAVER

Facilitadora:

Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

TABLA DE CONTENIDO

Objetivo General......................................................................................................3 Introduccin.............................................................................................................4 Unidad I. Generalidades de Dreamweaver..............................................................6 Pr ctica !. "ntorno de #rabajo.............................................................................6 Pr ctica $. %en&s.................................................................................................' Pr ctica 3. (os)uejo del sitio *eb......................................................................+ Pr ctica 4. ,reacin de un sitio..........................................................................!! Pr ctica -. ,reacin del .rimer documento.......................................................!' Unidad II. "nla/ar e ilustrar una . 0ina................................................................$Pr ctica !. 12nculos...........................................................................................$Pr ctica $. Im 0enes..........................................................................................33 Pr ctica 3. Ima0en de sustitucin ......................................................................3Pr ctica 4. Insertar #e4to de Flas5.....................................................................3' Pr ctica -.6 (otn de 7las5.................................................................................3+ Unidad III. Formas de ordenar la in7ormacin......................................................4! Pr ctica !. #ablas...............................................................................................4! Pr ctica $. 89adir : eliminar 7ilas : columnas .................................................43 Pr ctica 3. 8nidar; dividir : combinar celdas ...................................................44 Pr ctica 4. %arcos..............................................................................................4Unidad I1. ,reacin de Formularios : Plantillas..................................................-4 Pr ctica !. Formularios......................................................................................-4 Pr ctica $. Plantillas...........................................................................................64 Unidad 1. 8nimaciones en una . 0ina web..........................................................6+ Pr ctica !. ,a.as................................................................................................6+ Pr ctica $. ,ubo m 0ico....................................................................................'3 ,onclusiones..........................................................................................................'4 (iblio0ra72a............................................................................................................'-

' Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Objetivo General

El participante utilizar las herramientas de Dreamweaver para disear pginas Web estticas.

( Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Introduccin
El programa DreamWeaver es una herramienta de desarrollo profesional de sitios web, cuenta con caractersticas novedosas y ofrece un panorama amplio de opciones de diseo ue son indispensables para los diseadores e!pertos y principiantes de web. "odemos emplear DreamWeaver para crear sitios de web en forma visual, con una interfaz grfica de fcil mane#o ue nos permite visualizar los cambios ue efectuamos al mismo tiempo ue los realizamos. $on Dreamweaver podemos crear pginas %&'( sin tener ue preocuparnos por el c)digo %&'(, recordar todos los *tags* necesarios para componer nuestra pgina o tener ue pre+visualizar en nuestra cabeza cual ser el resultado compositivo del documento final. De esta manera, crear un documento %&'( se convierte en una tarea menos parecida a programar y ms parecida a ma uetar, tal y como se hara en un programa de ma uetaci)n tradicional como puede ser ,uar-E!press o "agema-er. En resumen, podramos decir ue Dreamweaver es un programa de *ma uetaci)n* de pginas web, salvando las l)gicas distancias ue lo separan de un programa de ma uetaci)n normal. $on el fin de facilitar aun ms el proceso de creaci)n de una pgina web, Dreamweaver aade #unto a las opciones ue permiten formatear un documento %&'( otras opciones ue pueden ser de gran utilidad, como funciones #avascripts predefinidas .behaviors/, opciones de %&'( dinmico. 0s mismo, aade otras herramientas ue potencian la productividad, como son la creaci)n de plantillas o *templates* ue permiten mantener y modificar la apariencia completa de un sitio modificando un solo documento, la posibilidad de convertir en smbolos elementos ue se repiten en muchas pginas del sitio de manera ue cual uier cambio en este smbolo actualice dicho elemento en todas las pginas del sitio. "or otro lado, alrededor de estas herramientas de diseo y composici)n se han ido aadiendo otras opciones ue permiten gestionar sitios completos, como puede ser el cliente 1&" incluido en Dreamweaver. $omo ver, un editor de pginas web como Dreamweaver ha de#ado de ser una herramienta de composici)n para convertirse en una herramienta completa para la gesti)n y desarrollo de sitios web completos. (os temas de Dreamweaver que se vern en este manual, son los siguientes: Generalidades de Dreamweaver. En esta unidad los participantes conocern ue es Dreamweaver y cules son los re uerimientos para instalar el programa, as como las herramientas bsicas de dicho software.

) Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Enlazar e ilustrar una pgina. El participante conocer y crear varios tipos de enlaces con diferentes destinos y formatos, as como insertar imgenes con la finalidad de ilustrar una pgina web. Formas de ordenar la informacin . El participante insertar tablas y marcos con la finalidad de ordenar la informacin dentro de una pgina web. Creacin de Formularios y Plantillas. 0 u se aprender a insertar los elementos bsicos de un formulario, as como la utilidad de las plantillas para la creaci)n de pginas web. Animaciones en una pgina web . Este tema tiene la finalidad de ue el participante inserte capas y ob#etos multimedia para generar animaciones en una pgina web.

* Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Unidad I. Generalidade de Dream!eaver

"r#ctica $. Entorno de Trabajo. "scriba el nombre corres.ondiente a lo )ue indica la 7lec5a.

+ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica %. &en' . "scriba sobre la l2nea; el nombre de los botones con )ue se activan los si0uientes men&s.

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
, Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica (. Bo )uejo del itio Web.

Entrar a Dreamweaver. $rear un sitio ue se llame E#ercicios en la unidad $23'is documentos. En la ventana 0dministrador de sitios seleccionar el bot)n 4uevo.

5eleccionar la opci)n 5itio. 5eleccionar la ficha 0vanzadas.

En la categora datos locales ingresa los siguientes datos2 o 4ombre del sitio. o 4ombre y ubicaci)n de la carpeta raz local. o 4ombre y ubicaci)n de la carpeta de imgenes. o 0ctiva la casilla cach6.

Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Debe crearse las carpetas E7E8$9$9:5 y la de imgenes.

En la categora 'apa de sitio seleccionar y agregar el nombre de la pgina principal como se muestra a continuaci)n2

Dar un clic en el bot)n 0ceptar

'ostrar el siguiente mensa#e

Dar clic en 0ceptar y se mostrar el sitio creado

Dar clic en el bot)n (isto y aumentar la ventana para crear un nuevo documento. $errar Dreamweaver completamente. Entrar ahora a Dreamweaver y abrir el sitio ue se cre) anteriormente.
. Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5eleccionar Dreamweaver en 9nicio, &odos los programas, 'acromedia, 'acromedia Dreamweaver ;. En la ventana ue se muestra seleccionar el sitio y dar un clic en el bot)n listo.

0 partir de este momento todos los archivos ue se utilicen se guardarn en este sitio.

/0 Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica *. Creacin de un itio (o primero ue se debe hacer, es crear una carpeta ue ser el sitio donde residan nuestras pginas y todos los archivos ue se vayan aadiendo. Es recomendable ue esta carpeta se encuentre directamente en disco duro $. 5eleccionar 5itio, en la barra de men<s, y se desplegar el siguiente men<2

Elegir 0dministrador de sitios= y se abre otra ventana2

5eleccionar el bot)n nuevo para crear un sitio, en la ventana ue se muestra dar clic en la opci)n 5itio.

5eleccionar la ficha avanzadas.

// Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Dar doble clic en el icono

de la carpeta raz local. 5e desplegar la ventana para crear una

de b<s ueda de directorios. Elegir $ y hacer clic en el icono nueva carpeta.

/' Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

0parecer la siguiente ventana2

$ambiar el nombre de la 4ueva carpeta y se le pondr, por e#emplo, mi>primer pagina y se le dar .

$on toda seguridad se tendr ue volver a repetir el proceso anterior pues se habr vuelto a la ventana Definici)n del sitio.

Dar clic al icono

y seleccionar la carpeta ue se acaba de crear, clic en

aparecer la siguiente ventana. $lic en y se volver a la ventana de Definici)n del sitio pero ahora ya con la carpeta creada y seleccionada como $arpeta raz local2
/( Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

$lic a y se volver a la ventana de Definici)n del sitio pero ahora ya con la carpeta creada y seleccionada como $arpeta raz local2

/) Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"oner el nombre al sitio. "or e#emplo E7E8$9$9:5. (o dems se de#ar como est y clic en 0ceptar. ?olver a la ventana m<ltiple del 5itio2 5eleccionar la categora mapa de diseo de sitio. &eclear el nombre del archivo de la pgina principal. "or e#emplo, inde!.html.

"or <ltimo clic en el bot)n aceptar y se mostrar la siguiente pantalla

/* Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

:bservar el lateral inferior derecho2

0parece abierto el sitio ue se acaba de crear ue est ali#ado en una carpeta denominada E7E8$9$9:5DW ue est en el disco duro.

/+ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica +. Creacin del ,rimer documento. En la ventana '<ltiple ya se ha creado un primer archivo al ue Dreamweaver llama @ntitled+A. :bserva la pestaa inferior iz uierda del espacio mayor vaco . "or otro lado, el documento .no el archivo/ lo ue ser la pgina tampoco tiene ttulo . (o primero ue se debe hacer es guardar el documento. $omo va a ser nuestro primer documento, vamos a guardarlo con el nombre especial de inde!. Dreamweaver le aadir la e!tensi)n .htm de pgina Web. Es recomendable ue se le de la e!tensi)n html. 5e le dar clic en 0rchivo y luego en Buardar como

0parecer la ventana Buardar como. 5e le pondr el nombre de inde!.html.

C se le da guardar.

/, Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

En el lateral inferior derecho aparece el archivo dentro de la carpeta del sitio.

y, en la pestaa inferior del documento ya aparece el nuevo nombre .inde!.html/ ue se le ha dado al archivo. 5implemente se empezar a escribir en el espacio vaco. 5e podr empezar dando la bienvenida a los visitantes. Escribir y pulsar Enter para saltar a la siguiente lnea.

/Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"ara dar formato al te!to, disponemos de las herramientas ue se desplegan en el 9nspector de propiedades.

5i no se ve este panel es por ue est oculto . :bservar ue la flecha est sealando hacia la derecha. 5implemente haciendo clic en 6l pasas a la posici)n anterior. "ara efectuar los cambios ue se desea, previamente seleccionar el te!to al ue se uiere hacer referencia.

"or e#emplo, a la primera lnea se le ha aplicado un formato de Encabezado A. 4o se ha modificado el tipo de fuente, ni el tamao .de forma e!plcita/. 5e ha puesto de color ro#o y se ha centrado en la lnea.

0hora se harn cambios en la segunda lnea.

/. Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

(o ue se realiz) en la pgina fue cambiar el tipo de fuente, el tamao, el color y la alineaci)n. "ara finalizar, pondremos un ttulo al documento, por e#emplo, "gina de Dienvenida. 5e escribe directamente en la ventana &tulo :bserve c)mo ha la barra de ttulo. En primer lugar aparece el nombre del documento E#ercicios. En segundo lugar, la carpeta raz, y finalmente el nombre del archivo inde!. El asterisco ue viene a continuaci)n nos recuerda ue el documento no ha sido guardado despu6s de los cambios efectuados. 0s ue se procede a guardar el documento.

El asterisco habr desaparecido. 0hora se pondr un color de fondo a la pgina. "ara ello se le da clic en cual uier punto vaco de la pgina con el bot)n derecho del rat)n C E(EB9':5 propiedades de la pgina= del men< conte!tual.

'0 Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

0parecer la siguiente ventana2

'/ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

De todo lo ue se puede hacer a u, de momento nos uedamos con poner un color de fondo. %acer clic en el cuadrito la paleta de colores. y aparecer

5e elegir el ms adecuado y vemos su efecto en 0plicar. $uando se este convencido, se le dar 0ceptar. (a pgina tiene ahora este aspecto2

Dar clic en 0rchivo, Buardar de manera frecuente para conservar los cambios. ?a siendo hora de comprobar la pgina con el navegador. @na primera forma de hacerlo consiste en darle a la tecla de funciones del teclado E1AFG. 5e abrir el navegador ue se tenga configurado como predeterminado y se ver el aspecto de la pgina.
'' Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

:tra forma conveniente es ver la pgina desde fuera de Dreamweaver. "ara ello ir al E!plorador de Windows o al disco duro $ y buscar la carpeta 'is documentos, la carpeta E7E8$9$9:5 y el archivo ue contiene la primer pgina, inde!.html.

En 'is documentos vemos la carpeta de E7E8$9$9:5. %acemos doble clic sobre ella2

'( Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

%acer doble clic sobre el archivo y visualizaremos nuestra pgina con el navegador ue se tenga predeterminado. En este caso, como se ve por el icono, es el E!plorer

') Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Unidad II. Enla-ar e ilu trar una ,#.ina

"r#ctica $. /0nculo 5eleccionar el elemento ue va a servir para enlazar .puede ser una palabra, una frase, una imagen o un fragmento de imagen/. @na vez seleccionado dar clic en el icono panel de propiedades. de la secci)n ?nculo dentro del

"or e#emplo, hacer clic en la frase Hir a la pgina anteriorI sea un vnculo con la pgina anterior de este curso de Dreamweaver. 5eleccionar la frase

0brir el panel propiedades, si no est abierto. 0brir el panel de "ropiedades, si no est abierto.

%acer clic en el icono

de

y se abrir.

5eleccionar el archivo correspondiente, en este caso es uno, y hacer clic en 0ceptar.

'* Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

El enlace habr uedado marcado de otro color y subrayado aun ue esto se puede modificar2

$uando se pruebe con el navegador se comprobar ue al dar clic en la frase se va al documento anterior2 inde!. El documento se abrir. ?incular una pgina de 9nternet a#ena a nuestro sitio. 5e har lo mismo2 seleccionar el elemento ue va a ser el activador del vnculo y, ahora, escribir en la ca#a de te!to la direcci)n completa del sitio. 5upongamos ue se uiere hacer ue esta imagen sea un vnculo a la pgina de yahoo. "ues bien, se selecciona y escribimos la @8( de la pgina http2JJyahoo.com.m! en la ca#a de te!to2

como en el caso anterior, se comprobar E1AFG y comprobando con el navegador.

ue funciona oprimiendo la tecla

0hora al dar clic en el activador se colo ue al principio de la pgina, al final, al comienzo de un apartado determinado, siempre dentro del mismo documento. "ara ello primeramente hay ue hacer marcas en los puntos a los cuales se re uiere ue vaya el vnculo. 8ealizar vnculos en cada una de las partes de este documento2 al comienzo .apartado AF/ y a los apartados AF.A, AF.F, AF.K y AF.L. para ello se colocarn con el cursor en el punto en el cual se uiere establecer un denominado punto de fi#aci)n con nombre.

'+ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5e hace con el comienzo2 se sit<a el cursor delante del ttulo del documento .delante de ?nculos/ y clic en la barra de men<s 9nsertar, 0ncla#e con nombre.

0parecer un cuadro de dilogo para uiere dar.

ue introduzca el nombre

ue se le

5e escribe @no y clic en 0ceptar.

', Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

0parece este icono #usto en el sitio donde se haba colocado el cursor y ue es el punto al cual se ir cuando activemos el enlace. Este icono no se visualizar cuando se vea la pgina en el navegador.

$omo en el caso anterior, se comprueba ue funciona dndole a la tecla E1AFG y comprobando con el navegador. /0nculo a ,unto concreto de otro documento del mi mo itio. (os dos tipos de vnculos anteriores se pueden combinar, de tal manera ue podamos ir a partes concretas de otros documentos. En este caso, una vez definido el ancla#e con nombre en el documento correspondiente, se establece el enlace escribiendo el nombre de la pgina con su e!tensi)n .html seguido de smbolo de n<mero y el nombre del ancla#e. /0nculo de correo electrnico 5e puede establecer tambi6n vnculos de correo electr)nico a partir de una imagen o un te!to, de manera muy similar al resto de los hiperenlaces. ?amos a vincular un nombre .o una e!presi)n o frase cual uiera/ con su direcci)n de correo electr)nico. @na forma de hacerlo es2 $olocar el cursor en el punto en el ueramos 9nsertar, ?nculo de correo electr)nico2 ue est6 el enlace y darle a

'Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

0parecer el cuadro de dilogo en el ue pondremos el te!to ue ueremos ue sirva como enlace y la direcci)n de correo electr)nico2

Mste es el resultado2

$uando un visitante de la pgina d6 clic sobre este vnculo se abrir su programa de correo y podr enviar un mensa#e a la persona a cuya direcci)n se hayamos vinculado el enlace. $omo en los casos anteriores, se comprobar ue funciona dndole clic a la tecla E1AFG y comprobando con el navegador.

'. Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica %. Im#.ene "ara insertar una imagen es conveniente tenerla previamente guardada en la carpeta del sitio. De lo contrario Dreamweaver advertir para ue se guarde una copia en la carpeta correspondiente. (as imgenes pueden estar sueltas en la carpeta raz #unto con los archivos de cada uno de los documentos o, mucho me#or, en una carpeta especial dentro del sitio a la ue se le llamar 9mgenes .nombre de los archivos y carpetas sin acentos/ o cual uier otro nombre ue sugiera ue, dentro de esa carpeta estn las imgenes. "ara crear una carpeta dentro de la carpeta raz del sitio, dar un clic derecho sobre el sitio y seleccionar 4ueva carpeta.

5e crear una carpeta con el nombre untitled ue habr ue cambiar por el ue se desee tenga la carpeta de imgenes2

"or e#emplo, se podr llamar 9mg.

5e pueden llevar las imgenes a la carpeta por cual uiera de los procedimientos habituales en Windows. 5i por e#emplo, tal como se indicaba al principio, la imagen no est previamente guarda en la carpeta, Dreamweaver

(0 Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

va a sugerir ue se haga. 5upongamos ue se uiere insertar una imagen ue se tiene guardada en el Escritorio. (a imagen se llama obras. 5eleccionar 9nsertar de la barra de men<s y dar clic en 9magen2

0parecer la ventana 5eleccionar origen de imagen.

5eleccionar Escritorio y dar clic a la imagen2 (:B:

(/ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

0parecer el mensa#e de advertencia diciendo carpeta raz del sitio.

ue la imagen no est en la

(e decimos ue 5 y se abrir la ventana $opiar archivo como.

Dar doble clic sobre la carpeta 9mg. para abrirla.

(' Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Dar clic en Buardar. (a imagen se guardar en la carpeta 9mag y se colocar en el documento.

0hora colocar una imagen a fondo de una tabla, o de una celda. "or e#emplo, en la tabla ue se ha creado en el apartado anterior. 5e pone una imagen de fondo a algunas de las celdas. "or e#emplo, seleccionar la primera celda .colocar el cursor en ella y pulsar EtdG en la barra de estado/. En el panel de "ropiedades seleccionar en de

0parecer la ventana 5eleccionar origen de imagen. 5e busca y se selecciona.

(( Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Dar clic en aceptar y la imagen se colocar como fondo de la celda seleccionada.

Buardar los cambios.

() Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica (. Ima.en de u titucin @n rollover o imagen de sustituci)n es una imagen ue cambia por otra cuando el puntero se sit<a sobre ella. Este tipo de imagen suele utilizarse en los men<s o en los botones para desplazarnos a trav6s de distintas pginas. "ara insertar un rollover hay ue dirigirse al men< 9nsertar, ob#etos de imagen, y en la opci)n 9magen de sustituci)n. En la nueva ventana hay ue especificar la imagen original y la de sustituci)n.

El &e!to alternativo es el te!to ue aparece al situar el puntero sobre una imagen, o el ue aparecer en lugar de la imagen en el caso de ue por alg<n motivo 6sta no pueda ser mostrada en el navegador.

El te!to alternativo puede asignarse a todas las imgenes, no s)lo a los rollovers. "uede hacerse a trav6s del campo 0lt del inspector de propiedades de la imagen seleccionada.

A/ $rear una nueva pgina llamada Hmenu.htmlI ue tenga las siguientes caractersticas .las imgenes se habrn copiado previamente a la carpeta/ 8ealizar el fondo con una imagen ue se tenga en la carpeta imgenes.
(* Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

$olor del te!to NamarilloO 9nsertar una imagen de sustituci)n con otra de las imgenes para ue accedan a la pgina Ninde!.htmlO. $entrar la imagen y poner deba#o H0cceso a la pgina principalI 9nsertar dos imgenes de sustituci)n para ue accedan a las pginas NpruebaA.htmlO y NpruebaF.htmlO. Elegir las L imgenes de la carpeta imgenes y ponerle deba#o los te!tos H0cceso a la pgina pruebaAI y H0cceso a la pgina pruebaF.htmI respectivamente. Buardar la pgina y comprobar ue cambian las imgenes en la vista previa de la pgina.

F/ 0adir en las pginas anteriores hipervnculos a los te!tos ue se han escrito, de forma ue se pueda acceder a las pginas Ninde!.htmlO, Hmen<.htmlI, HpruebaA.htmI y HpruebaF.htmI tanto desde las imgenes como desde los te!tos. Buardar y comprobar ue funcionan los enlaces.

(+ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica *. In ertar Te1to de 2la 3 Dar clic en 9nsertar, 'edia, &e!to 1lash, aparecer la siguiente ventana

5e puede elegir elementos como2 el tipo de fuente, el tamao, negrita, cursiva, el tipo de #ustificaci)n dentro del bot)n y el te!to ue va a tener. Elegir el archivo con el ue se vincula, el destino, si es en ventana nueva o en toda la pantalla, el color de fondo y el nombre con el ue se va a guarda. %aciendo doble clic sobre el te!to se vuelve a la ventana anterior. &ambi6n haciendo un solo clic se abre esta ventana

En ella realiza algunos cambios, ver el comportamiento y, en todo caso, volver a la pantalla de 9nsertar te!to de 1lash dndole clic a

(, Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica +.4 Botn de 5la 3. "ara insertar un bot)n le damos a 9nsertar G 9mgenes interactivas G Dot)n de 1lash

0parece la siguiente ventana2

En estilo elegir el bot)n ue se desee. En 'uestra se ver el bot)n elegido. En &e!to del bot)n escribir lo ue se uiere ue aparezca en el bot)n.

(Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Elegir el tipo de fuente y el tamao. En vnculo escribir la direcci)n @8( completa si es un vnculo e!terno, o haz clic en E!aminar y elegir el archivo en caso de ser un vnculo a un documento de la pgina Web. En destino elegir ue se abra en la pantalla completa .>top/, en ventana nueva .>blan-/. Elegir el color de fondo ue rodear el bot)n . a veces el bot)n no se ve/. 1inalmente de#ar el nombre por defecto o poner otro. Es importante saber ue los botones tienen ue estar en la misma carpeta ue el documento. 4o pueden estar en carpetas diferentes. %acer clic en 0ceptar y el bot)n se habr colocado en el sitio elegido. $olocar un bot)n a continuaci)n de esta lnea con enlace a otra pgina de estilo

'odificar alguna de las propiedades del mismo, basta con hacer doble clic sobre el bot)n para volver a la ventana anterior y poder hacer los cambios oportunos.
(. Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5i se hace un solo clic se obtiene la ventana2

&ambi6n es posible modificar algunas de las propiedades. (os resultados pueden verse pulsando el bot)n 8eproducir.

)0 Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Unidad III. 2orma de ordenar la in5ormacin.

"r#ctica $. Tabla . Desde 9nsertar de la barra de 'en<s, elegir &abla

0parecer una ventana similar a 6sta2

(a tabla debe ser como sigue2 con K filas y P columnas y ue ocupe ;QR del ancho, un borde de F pi!eles y un relleno de celda de S pi!eles2

?amos a realizar alg<n cambio en la tabla

)/ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5e ha aadido una fila, alineando al centro, incrementando el grosor del borde a S pi!eles, estableciendo un color de fondo y otro diferente para el borde. 0hora seleccionar la primer fila, en el panel "ropiedades realizar los siguiente cambios.

"ulsar el bot)n

, el te!to ue est6 escrito en las celdas de esa fila se colocar , el te!to escrito pasar

centrado en cada una de las celdas. "ulsar el bot)n a estar en negritas. El resultado ser2

:tra forma de seleccionar filas yJo celdas consiste en situar el cursor en una de las celdas y arrastrar con el rat)n hasta donde se desee. 5eleccionar las cuatro celdas intermedias de la <ltima fila. 5i se le da clic al icono , las celdas seleccionadas se agruparn en una sola2

5e puede aadir te!to o variar las propiedades de las celdas por los procedimientos descritos2

Buardar la pgina con el nombre de miprimertabla.html.

)' Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica %. A6adir 7 eliminar 5ila 7 columna E!isten varias formas de aadir y eliminar filas y columnas a una tabla. (o primero ue hay ue hacer es, estando el cursor en una celda o seleccionando varias, desplegar el men< conte!tual de la tabla al pulsar con el bot)n derecho sobre ella, o bien abrir el men< 'odificar. En ambos casos aparece la opci)n &abla. 5eg<n las celdas seleccionadas, algunas de las opciones de &abla se podrn utilizar mientras ue otras no. "ara insertar una fila o una columna, hay ue pulsar sobre las opciones 9nsertar fila o 9nsertar columna. (a fila se inserta sobre la celda o el con#unto de celdas seleccionadas, mientras ue la columna se inserta a su iz uierda. &ambi6n es posible insertar filas o columnas a trav6s de la opci)n 9nsertar filas o columnas. 0l pulsar sobre este bot)n aparece una nueva ventana, donde es posible determinar si lo ue se insertarn sern filas o columnas, el n<mero de ellas ue se insertar, y la posici)n donde se insertarn.

"ara eliminar una fila o una columna, hay Eliminar fila o Eliminar columna.

ue pulsar sobre las opciones

A/ 0brir el archivo Hmiprimertabla.htmI. 0adir una columna a la derecha y otra a la iz uierda y tambi6n una arriba y otra aba#o. "oner como color de fondo a las celdas creadas el color gris. Esto se hace seleccionando las celdas y pulsando sobre el bot)n Buardar la tabla resultante con el nombre Hmiprimertabla>modificada.htmI

)( Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica (. Anidar8 dividir 7 combinar celda Es posible insertar tablas dentro de las celdas de otras tablas. 0 esto se le llama anidar tablas. $rear en una pgina nueva, donde se insertar una tabla de F filas por F columnas y en el interior de la primera celda se introducir una tabla de ese mismo tamao. "oner a la primera tabla el color de fondo Hverde claroI y a la tabla interior el color Hnaran#aI. El ttulo de la pgina ser H&ablas anidadasI, tendr como color de fondo el gris y la se deber guardar con el nombre HtablasF.htmI @na de las formas de dividir y combinar celdas es a trav6s de los botones del inspector de propiedades.

5i se seleccionan varias celdas pueden combinarse pulsando sobre el bot)n del inspector de propiedades. 5e debe de considerar ue s)lo es posible combinar celdas contiguas, cuya combinaci)n pueda dar como resultado otra celda. "ara dividir una celda hay ue pulsar sobre el bot)n del inspector de propiedades, o sobre la opci)n del men< 'odificarJtablaJDividir celda

0brir la pgina web del e#ercicio anterior y realizar los siguientes pasos2 $ombinar las L celdas de la tabla interior +0adir dos columnas a la derecha de tabla e!terior +Dividir las L celdas de la tabla interior

Buardar los cambios realizados, con la creaci)n de la pgina HtablaK.htmlI

)) Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica *. &arco "ara crear una pgina con marcos, se debe saber ue2

(a estructura de la pgina es un documento independiente. $ada uno de los marcos es otro documento independiente. $uando se carguen los diferentes documentos, el documento inicial situado en el espacio principal .main frame/, ser sustituido por el enlace ue haya sido pulsado.

$rear un sitio nuevo ue se llame E#emplo de marcos dentro de la carpeta raz marcos ue se crear en 'is documentos. Empezar por crear un nuevo archivo, sealando 0rchivo, nuevo archivo. 0parecer el nuevo archivo al ue Dreamweaver llamar untitled.html.

%acer doble clic sobre 6l para abrirlo2

"ulsar

para ue se despliegue2

5eleccionar el bot)n

para ue aparezcan los patrones de marcos2

)* Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

$olocando el cursor sobre cada uno de los conos muestra los diferentes con#untos de marcos ue se pueden utilizar. @na vez decidido u6 con#unto de marcos se va a utilizar .en nuestro caso, hacemos clic sobre el icono pgina. y el con#unto de marcos dividir nuestra

5e puede modificar la anchura de los marcos, simplemente situndose con el cursor en el borde y arrastrarlo.

)+ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

En este momento, Dreamweaver ya ha creado L diferentes documentos2 El primero ue es el ue contiene la estructura de los tres marcos .frameset/ y uno por cada marco .el superior, el iz uierdo y el principal/ los frames. 5e puede ahora, escribir algo en cada una de las tres partes para identificarlas posteriormente. "or e#emplo, escribir2

1rame el ttulo. 1rame del ndice. 1rame principal.

,uedar algo as2

"roceder a guardar, eligiendo 0rchivo, Buardar todo.

), Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Este proceso es muy importante, por eso se debe realizar tal como se indica. 0parecer la siguiente ventana2

:bservar ue a la carpeta raz del sitio se le ha llamado marcos, luego se guardarn en esta carpeta los frames creados. "uede ocurrir ue Dreamweaver intente guardarlo en otro sitio, en ese caso se tiene ue buscar la carpeta marcos dentro de la carpeta 'is documentos. :bservar, tambi6n, ue aparece aparte de la carpeta >notes, un documento denominado untitledT ms adelante sabremos u6 documento es 6ste. (o primero ue se va a guardar el el con#unto de marcos o frameset. Dreamweaver le ha puesto un nombre2 @ntitled1rameset+P. 4osotros le podemos llamar inde! por ue es la pgina ue se va a abrir al principio con todos los marcos cargados.

)Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

@na vez cambiado el nombre y guardado, aparecer la siguiente ventana2

:bservar ue ahora el borde est rodeando al frame de la iz uierda, el frame de los enlace. 0dems, el nombre ue le est poniendo Dreamweaver ya no es 1rameset sino @ntitled. 5e le pone el nombre ue nos aparezca, por e#emplo, ndice.

(e damos guardar y aparecer la <ltima ventana2

). Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

0hora el cord)n est rodeando el marco superior. De nuevo observa el nombre de Dreamweaver2 @ntitled1rame+K. 5e est guardando el marco del ttulo. 5e puede llamar ttulo.

(e damos Buardar y ya no aparecen ms ventanas. 1alta, sin embargo, un frame por guardar, el frame principal, 6ste es el documento ue Dreamweaver ha guardado con el nombre untitled ue veamos en la carpeta marcos. $omprobamos, finalmente, ue los tres marcos y el con#unto de marcos estn dentro de la carpeta del sitio2

*0 Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

9ntentar entender un poco la estructura de este comple#o sistema. 0brir el inde!.html haciendo clic sobre el.

:bserva las eti uetas ue aparecen2 . 9ndican ue el frame principal .observa ue est enmarcada/ est dentro de un frameset ue es la banda horizontal entera .con el frame del ndice/ y ue este frameset est dentro de otro ue divide el espacio en dos bandas. 5i al menos un no aparece al abrir el inde!, da un clic con el rat)n en cual uiera de los bordes internos de separaci)n entre marcos .a veces cuesta un poco, al parecer el borde inferior es el ue responde antes/.

*/ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Car.ar otro documento en el marco ,rinci,al $ada uno de los tres documentos ue forman nuestro espacio se pueden modificar desde el con#unto de marcos, o bien, abriendo cada uno de ellos de manera independiente. El documento ue va a tener los enlaces se recomiendan ue sea modificado dentro de la estructura de marcos para poder elegir el destino de los enlaces. 0s colocamos el te!to, los fondos, ue nos parezca y cundo vamos a hacer los enlaces2

5elecciona el A y da un clic en la carpeta

del panel "ropiedades2

*' Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

0parecer la ventana 5eleccionar archivo.

Elige @no y clic en 0ceptar. 0 continuaci)n elegir el marco de destino en Dest2

Elige main1rame. %az lo mismo para el enlace del F2 selecconalo o haz clic en la carpeta del vnculo. Elige el archivo dos y en Dest selecciona el main1rame. (o mismo para el tercer enlace. Buardar el archivo, guardar todo. :primir E1AFG para comprobar con el navegador ue las cosas funcionan.

*( Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Unidad I/. Creacin de 2ormulario 7 "lantilla .

"r#ctica $. 2ormulario "ara insertar un formulario hacer clic en panel2 para ue se despliegue el

Elegir la pestaa

$olocar el cursor en el sitio donde se uiera ue se colo ue el formulario y dar un clic en el icono .

0parecern los lmites del formulario representados por un rectngulo cuyos lados son una lnea punteada de color ro#o2

0hora, por motivos est6ticos, coloca una tabla dentro del formulario con dos columnas y varias filas2 sit<a el cursor dentro del rectngulo de lneas discontinuas, introduce la tabla y c6ntrala.

*) Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5e emplear la columna de la iz uierda para realizar la pregunta correspondiente .#ustificado a la derecha/ y la columna de la derecha para colocar los ob#etos de formulario .#ustificado a la iz uierda/. 5ituar el cursor en la primera celda, alinear a la derecha y escribir, 4ombre2 En la primera celda de la derecha insertar un campo de te!to El formulario tendr el siguiente aspecto2 .

Deba#o aparecer la ventana de propiedades del campo del te!to2

Elegir la anchura del campo a KQ, el n<mero de caracteres m!imo a FS, ueremos ue aparezca un te!to inicialmente 'i pgina, lo ue es ms importante, el nombre ue se le uiera dar2 uitar te!tfield y poner el nombre.

En la segunda celda de la columna de la derecha, insertar un bot)n de opci)n . El formulario tendr el siguiente aspecto2

** Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Deba#o aparecer el panel "ropiedades del bot)n2 En la primera casilla de la iz uierda borra radiobutton y escribir el nombre de la opci)n global2 opini)n. En la segunda casilla al lado de ?alor activado, escribe lo ue corresponda con esta primera opci)n ue puede ser2 muy buena. 5e puede elegir ue esta opci)n est6 activada o desactivada de entrada. &ienes ue escribir a la derecha del bot)n el te!to ue ver el visitante2 muy buena, e!celente. El formulario ir uedando as2

5igue insertando los dems botones de opci)n correspondientes a esta misma cuesti)n. "or lo tanto, los siguientes botones se debern seguir llamando opini)n y en cada caso habr ue escribir lo ue corresponde con esa opci)n. "ara ue el segundo bot)n no uede muy separado del primero pon un salto de lnea, eligiendo 9nsertar, %&'( $aracteres especiales, 5alto de lnea. El segundo bot)n debe uedar as2

*+ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"on un tercer bot)n con la opci)n de ue la pgina es mala, bastante mala. $on el mismo nombre2 opini)n y como valor activado2 mala.

5i se uiere colocar otra pregunta de opci)n se debe llamar de otra manera para ue no se e!cluyan las selecciones. "or e#emplo, se puede pregunta al visitante sobre sus conocimientos de informtica. El nombre de la opci)n podra ser conoc>infor. El formulario va teniendo es aspecto siguiente2

*, Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

En la siguiente celda de la iz uierda introducir la pregunta HU,u6 es lo ue ms te ha gustado del cursoVI En la celda de la derecha introduce la primera casilla de verificaci)n pulsando en el icono correspondiente. "onle un nombre a la casilla, por e#emplo2 gustado y como primer valor uno de los ue se nos puedan ocurrir, por e#emplo, paso a paso .para ?alor activado/ y una frase un poco ms construida para el formulario visible.

Da un salto de lnea e introduce nuevas casillas, siempre con el mismo nombre, gustado, y una frase nueva como ?alor activado ue debe ser una e!presi)n corta de lo ue se escriba en el formulario. Esta parte del formulario podra uedar as2

*Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Escribe la pregunta en la siguiente celda 9ndica tu edad e incluye el men< en la celda de la derecha pulsando en .

Dale un nombre a la (istaJmen<, por e#emplo, edad y pulsa 0parecer la siguiente ventana2

Escribe en los elementos del men<. En valor escribe lo mismo .ser lo ue aparezca al ser enviado el formulario/. "ulsando la tecla para incluir el siguiente y la tecla para uitar uno ya introducido. $on las flechas ve cambiando el orden de las eti uetas de elemento.

*. Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

$uando los tengas todos clic en 0ceptar. (as diferentes eti uetas no aparecen, s)lo lo harn al lanzar la pgina con el navegador

9ncluye un rea de te!to pulsando el bot)n

Wrea de te!to2

"uedes introducir la direcci)n de correo electr)nico del visitante. En este caso, puedes poner un ?alor inicial2

+0 Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

1inalmente, tienes ue insertar un bot)n para enviar el formulario y, si lo deseas, un bot)n para borrar todo lo ue haya podido escribir el visitante. Empecemos por el de borrar. $oloca el bot)n de borrar en la <ltima celda de la iz uierda alineado a la derecha. $oloca el cursor en la celda, alinea y pulsa el cono . "or defecto dreamweaver coloca el bot)n enviar.

+/ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5e puede modificar de la siguiente forma2

0 continuaci)n, coloca el cursor en la celda de la derecha, alin6alo a la iz uierda, pulsa en el icono . 0parecer de nuevo la ventana anterior ue se modifico, esta ligeramente2

+' Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"ara dar por finalizado el formulario. ,ueda por definir la acci)n ue se uiere realizar una vez relleno. "ara usuarios personales, la opci)n ms habitual es el envo por correo electr)nico de los datos obtenidos. Esto se hace colocando el cursor en cual uier punto del formulario y eligiendo EformG desde la barra de estado . 0parecern las propiedades del formulario

En 0cci)n escribimos malito2direcciondecorreo. "or e#emplo en mi caso, escribira malito2nfernandXYZhotmail.com. De todas formas, para ue el envo del formulario pueda leerse como un mensa#e de correo ordinario, hay ue escribir en la eti ueta del formulario del c)digo fuente el atributo enctype[Ite!tJplainI.

5e puede intentar seleccionarlo del men< . 5i no est all tienes ue escribirlo directamente en el c)digo. 5elecciona el formulario colocando el cursor y pulsa EformG de la barra de estado. "ulsa el bot)n para acceder al c)digo2
Eform id[*formA* name[*formA* method[*post* action[*mailto2nfernandXYZhotmail.com*G

En las propiedades ueda de la siguiente manera2

El formulario ya debe funcionar. Burdalo primero, se visualizar con el navegador y realiza un rellenado de prueba para ver si lo recibimos satisfactoriamente por el correo electr)nico. 0ntes de dar por concluido el formulario se puede hacer alguna modificaci)n en la tabla, aadiendo alg<n color de fondo para separar unas filas de otras.

+( Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica %. "lantilla 5e empezar abriendo desde 0rchivo de la barra superior.

Elegir la pestaa Beneral y seleccionar "gina de plantilla y, dentro de ella "lantilla %&'(2

%acer clic en crear y abrir el documentoT en 6l se puede empezar a traba#ar y colocar los distintos elementos2

+) Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

En el caso ue se este traba#ando con una tabla, por e#emplo2

@na vez finalizada la tabla se tiene ue elegir los elementos ue van a poder ser modificados2 "rimero se selecciona el elemento modificable .en el primer e#emplo el nombre del curso/ y en el men< 9nsertar clic en :b#eto de plantilla, 8egi)n editable.

+* Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5e abrir la ventana siguiente2

5e debe cambiar el nombre2

C dar clic en aceptar. 8epetir el proceso para todos los dems elementos editables. Mste es el resultado final.

()gicamente el nombre de los elementos editables solamente se ven dentro de Dreamweaver. $uando se visite la pgina con el navegador, no se notarn las diferencias entre las regiones editables y no editables, nada sealar unas partes de otras. 0hora se guarda como plantilla2 0rchivo, guardar como plantilla=

++ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

El programa permite elegir el sitio donde guardar la plantilla y el nombre con el ue se guardar2

En los archivos se habr creado una carpeta con el nombre &emplates y, dentro de ella, la plantilla ue se acaba de crear. 0 veces no se visualiza inmediatamente, hay ue cerrar y abrir de nuevo el sitio para ue se haga visible la carpeta.

0hora para crear un documento basado en esa plantilla, abre 0rchivo, 4uevo, "lantillas y haz clic en $rear.

5e abrir la plantilla y se podr modificar los elementos editables. Dastar guardar como un documento nuevo cada una de las modificaciones para hacer funcionar la plantilla.
+, Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Unidad /. Animacione en una ,#.ina !eb.

"r#ctica $. Ca,a . 0brir un sitio. $rear un documento de %&'(. 5elecciona la opci)n para crear capas.

$rear cuatro capas como se muestra a continuaci)n2

+Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

(as medidas del primer cuadro son KQQ ! KXY. (as medidas de los tres cuadros a la derecha son KQL ! ;P. 9nsertar la una imagen con2

El inspector de propiedades de la ruta. (a imagen Espaa>1rancia

+. Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

"r#ctica %. Cubo m#.ico 5e har un traba#o concreto con capas para aprender sobre su funcionamiento e intuir posibles utilidades. El traba#o a realizar es un pasatiempo denominado H$ubo mgicoI. $onsiste en colocar determinados n<meros en un cuadrado con un n<mero igual de fila y de columnas de tal manera ue las filas sumen AS al igual ue las columnas y las diagonales del cuadro. El $ubo mgico va a ser de K filas y K columnas, nueve casillas en total a ocupar por las cifras del A al X. la suma de todas las filas y de todas las columnas y diagonales debe ser AS.

"rimero hay ue disear, con un programa grfico, las X cifras

A F K L S P Y ; X
Es importante realizar cada imagen con un tamao HredondoI. En el e#emplo miden AQQ ! AQQ pi!eles. 5e 9rn insertando capas e introduciendo una imagen con el n<mero respectivo dentro de cada una de las capas .el cursor deber estar dentro de la capa antes de insertar la imagen/. (a capa y la imagen deben tener el mismo tamao.

,0 Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Dreamweaver llamar a la primera capa (ayer A .y estar la imagen del n<mero A/ y a la segunda capa (ayerF .y estar la imagen del F/. Es conveniente ser consciente del nombre ue Dreamweaver le va dando a cada capa .9nspector de propiedades/. 5e puede ir dando clic en todos los iconos de capa para comprobar ue se seleccionan todos y cada uno de los n<meros. 5e debe tener abierto el "anel "ropiedades y comprueba, una vez ms el nombre de cada una de las capas. 0 continuaci)n coloca los n<meros tal y como van a estar en la soluci)n final. Empieza por la casilla superior iz uierda ue, en esta soluci)n, va a ser el L. (l6valo ms o menos al centro de la pantalla y haz clic en ?entana, comportamientos.

5e abrir la siguiente ventana2

0hora hacer clic en el icono comportamientos2

y se desplegar el siguiente catlogo de

De este men< se elegir 0rrastrar capa .si no estuviera activo este comportamiento al dar clic en la cruz, dar clic en la eti ueta EbodyG de la barra de estado y volver a hacerlo/. 0parecer la siguiente ventana2

,/ Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5e tiene ue2 En $apa2 seleccionar la capa H(ayerLI .est colocado el L/. 'ovimientos de#ar 5in restricciones. %acer clic en :btener posici)n actual para Destino de forma automtica. ue se rellenen los n<meros del

0#ustar a FQ pi!eles del destino. Esto uiere decir ue, cuando el visitante suelte el ob#eto a menos de FQ puntos de la soluci)n, el ob#eto se colocar solo de manera e!acta en el sitio ue acaba de ser obtenido al pulsar en :btener posici)n actual, lo ue proporcionar belleza en la soluci)n final y sensaci)n de seguridad al saber ue es 6sa la posici)n a la ue haba ue llevar el ob#eto .en este caso, el n<mero/.

%acer clic en 0ceptar y comprobar la capa en el panel "ropiedades antes de pasar al siguiente n<mero2 5i se selecciona la capa, se comprobar su situaci)n. $olocar cada uno de los n<meros procurando ue est6n perfectamente alineados con sus vecinos. 5e puede a#ustar y modificar la posici)n escribiendo directamente en el panel "ropiedades la posici)n 9\ y 5up.

,' Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

5i el primer n<mero ha uedado a FSQ puntos de la iz uierda y a AQQ puntos de arriba, y cada capa .e imagen/ ocupa AQQ ! AQQ, el segundo n<mero deber uedar a KSQ puntos de la iz uierda y a AQQ puntos de arriba, el tercer n<mero a LSQ puntos y a AQQ puntos respectivamente. El siguiente n<mero ser el primero de la segunda fila, por eso deber estar aFSQ puntos de la iz uierda y a FQQ puntos de arriba, el siguiente a KSQ ] FQQ, el siguiente a LSQ ] FQQ. "or <ltimo la tercera fila2 FSQ ] KQQT KSQ ] KQQ y LSQ ] KQQ. 8epetir el proceso indicado para el n<mero L de aadir comportamiento 0rrastrar capa para cada uno de los n<meros seg<n se vayan uedando colocados en su posici)n de soluci)n. 0l n<mero ue se va a colocar en el centro .el S/ no se le a#usta el comportamiento de arrastrar capa. 5u posici)n ser inamovibleT es decir, el visitante de la pgina no lo podr mover de su posici)n central. $uando se haya acabado y, para ue pueda ser un pasatiempo para el visitante, se tendr ue desordenar los n<meros2 cambiar los n<meros ue nos parezca e!cepto el del centro ue no lo tocar. El visitante de la pgina recibir el cuadro tal como lo haya guardado esta <ltima vez, pero, al ser manipulado por 6l, el programa HrecordarI la posici)n ue tena cuando el cuadro estaba bien resuelto y cada imagen se de#ar llevar automticamente a su posici)n correcta cuando el n<mero se acer ue menos de FQ puntos y el #ugador suelte el rat)n.

,( Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Conclu ione
Dreamweaver ; puede integrar entradas 855 provenientes de otras pginas con s)lo introducir la fuente y arrastrar y colocar los campos. De esta forma podr introducir datos en formato ^'( fcil y c)modamente. Esta <ltima versi)n ha me#orado mucho respecto a la compatibilidad y mane#o de estilos de cascada. De esta forma se ha me#orado el panel de estilos $55, donde ahora podr acceder a la configuraci)n de cada uno de los estilos desde una lista mucho me#or dotado de una cuadrcula editable desde donde se modificarn sus propiedades. 0dems, Dreamweaver ;, aade una nueva barra de herramientas ue proporciona la reproducci)n inmediata de los estilos para diferentes medios .pantalla, impresora, web&?, "D0s.../. 5u sincronizaci)n ha me#orado notablemente siendo posible una me#or gesti)n de cambios, adems de permitir en uso de bol ueoJdesblo ueo de archivos para ue estos no se sobreescriban. (os usuarios con problemas visuales podrn acceder a una opci)n de 0umento de la pantalla en vista de diseo para analizar o traba#ar con difciles anidamientos de tablas. 0dems de la inclusi)n de informaci)n visual gracias a las guas ue permitirn la medici)n p!el a p!el de todos los elementos. 5e ha aadido una barra de herramientas a Dreamweaver ;, podr encontrarla en la parte lateral iz uierda del modo de $)digo, esta barra hace mucho ms accesible el c)digo al permitir la navegaci)n por eti uetas y su contracci)n. @na de las nuevas novedades es la posibilidad de aadir comentarios con un s)lo clic. $oncluiremos, adems, la compatibilidad aadida en esta versi)n con "%"S, $oldfusion '^ Y y ?ideo 1lash.

,) Lic. Norma Fernndez Osorio

$NAD % Mecatr&nica

Biblio.ra50a
GA9"A: GON;<LE; &ANGA9 7 ANTONIA GON;<LE; &ANGA9 . =Ne.ocio /irtuale >. Ed. '$ Braw %ill. "rimera edici)n http2JJmacromedia.com http2JJaulaclic.com http2JJwww.ua.esJugtJcursosJcurso>diseno>webJe#erciciosA>;.pdf http2JJwww.adrformacion.comJcursosJdreamJdream.html http2JJwww.arp.#azztel.esJdreamweaver.htm http2JJwww.arp.#azztel.esJdreamweaver.htm

,* Lic. Norma Fernndez Osorio