Diseño Web Dreamweaver MX

8/19/2019 Diseño Web Dreamweaver MX

1/56

Prácticas guiadas para el

diseño web conDreamweaver MX

Prof. Roger Carrera Mendoza


2/56


3/56

Práctica 1 - Introducción a DRE M!E "ER

#$u% es Dreamweaver&

Dreamweaver es un software fácil de usar que permite crear páginas web profesionales.Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño yfuncionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Editar páginas webTal y como ya hemos visto, cualquier editor de te to permitecrear páginas we!. "ara ello sólo es necesario crear losdocumentos con la e tensión HTML o HTM, e incluir comocontenido del documento el código HTML deseado. "uedeutili#arse incluso el Bloc de notas para hacerlo."ero crear páginas we! mediante el código HTML es máscostoso que hacerlo utili#ando un editor gráfico. $unque esnecesario conocer algo de HTML para poder hacer páginas decierta calidad.Hoy en d%a e iste una amplia gama de editores de páginas we!.&no de los más utili#ados, y que destaca por su sencille# y por las numerosas funciones que incluye, es MacromedíaDreamweaver.

'onceptos básicos de DRE M!E "ER

'uando entramos a Dreamweaver lo primero que vemos es esta pantalla(

'uadro deHerramientas(

para insertar imágenes,hiperv%nculos,capas, !arras,men*sdesplega!les, etc

+arra de propiedades( en ella tenemos las propiedades de cada uno de los elementos denuestra página we!. "or e emplo siseleccionamos un te to desde ah% podemoscam!iar el tipo de letra, el tamaño, laalineación, ponerle un hiperenlace, etc.


4/56

- /sta va a ser nuestra primera página we!. Lo primero va a ser ponerle un t%tulo. "ara ello vamos aseguir los siguientes pasos(


5/56

0 "ulsar con el !otón derecho so!re cualquier parte de la ho a en !lanco y seleccionar laopción “Propiedades de la página”.

0 $parecerá la siguiente ventana, en ella pondremos el título que tenemos aqu% y como color de fondo pondremos el naranja.

Desde aqu% se puede poner tam!i1n unaimagen como fondo de pantalla si quisi1ramos,se hace seleccionándoladesde aqu%

2 Hasta ahora de!er%amos tener una página we! donde arri!a del todo ponga el t%tulo quehemos introducido y como color de fondo tengamos el color naran a. $hora vamos a introducir el siguiente te to(

C !" P#$%&"' (!) C*& D !"M(!"+! '3L34 $5&L

Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro . Alhacer clic con el botón derecho del ratón sobre la imagen que queremos traer deInternet, se abre una ventana con una opción similar a Guardar imagen como...(dependiendo del navegador que utilices) que permite grabar dicha imagen en unfichero de nuestro disco duro.

3 !ara conseguir los efectos que ha" en el te#to que acabas de copiar $negritas, letrasen colores, cursivas, etc se debe recurrir a la ventana de propiedades. !ara elloseleccionaremos el te#to deseado $por e%emplo& “botón derecho del ratón” debe ir ennegrita " se pone pulsando sobre


6/56

T6"3 D/ L/T4$7seleccionar el tipo

$46$L

'3L34 D/L/T4$

'&4869$ $L6:/$'6;: D/LT/


7/56

Práctica ( - Introducción a DRE M!E "ER

'on)guración de un sitio local *I+

&n sitio we! es un conjunto de arc-ivos / carpetas , relacionados entre si, con un diseñosimilar o un o! etivo com*n. /s necesario diseñar y planificar el sitio we! antes de crear las páginas que va a contener."or e emplo si vamos a crear una página we! so!re un equipo de f*t!ol, lo primero es crear unsitio we! 7por e emplo que se llame f*t!ol y dentro de ese sitio ya irán las diversas páginas queformen parte de 1l. 'omo por e emplo presentacion.htm, palmares.htm, plantilla.htm, etc.La forma ha!itual de crear un sitio we! consiste en crear una carpeta en el disco local. Losdocumentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las ho as de estilo, etc., se de!en crear nuevas carpetas dentro de1sta, con el o! etivo de tener una me or organi#ación de los archivos a la hora de tra!a ar./s mu/ importante que la página principal del sitio tenga el nom!re inde0.-tml, ya que losnavegadores !uscan una página con ese nom!re cuando se intenta acceder a una &4L gen1rica."or e emplo, si escri!i1ramos la dirección gen1rica -ttp122www.petrer.es2 en el navegador, 1steintentar%a cargar la página -ttp122www.petrer.es2inde0.-tml, por lo que se producir%a un error en el caso de que no e istiera ninguna página con el nom!re inde0.-tml

'rear o editar un sitio web

&na ve# creadas las carpetas que formarán un sitio local, ya es posi!le definir el sitio enDreamweaver. "ara ello hay que seguir los siguientes pasos(- De!er1is tener creada dentro de vuestra carpeta de alumno una carpeta llamada “D !"M”

2 Dirigirse al men* 'itio , a la opción &uevo sitio. $ll% veremos la siguiente pantalla(

> $h% introduciremos lossiguientes datos(

0 Donde pone :om!re delsitio pondremos “'itio webde “vuestro nombre”

0 /n la 'arpeta ra%# localseleccionaremos la carpetaD4/$M

que

previamentehemos creado.


8/56

'uando aceptemos nos aparecerá una nueva ventana que será el sitio we!. /n ella ha!rán doscolumnas. /n la de la derecha veremos la lista de páginas web que tiene nuestro sitio, y en la


9/56

i#quierda veremos la estructura de árbol que va adoptando nuestro sitio we!. /sta ventana lade aremos minimi#ada porque en ella podremos ir viendo la estructura que tiene la página.

= $hora nos vamos a la otra ventana, la que está toda en !lanco y vamos a definir tal y comohicimos en la práctica anterior las propiedades de la página 7se hac%a pulsando con el !otónderecho y seleccionando la opción "ropiedades de página . 6ntroduciremos los siguientesvalores(

0 Titulo( “Primera página del sitio web”0 'olor de fondo( “"3ul claro”

? &tili#ando los elementos de la !arra de propiedades, escri!ir el siguiente te to en la páginaque ten1is a!ierta(

Obtener ayuda del menú de ayuda

8ólo tiene que hacer clic en "/uda de Microso4t (ord , en el men* de ayuda. 8i el$yudante está activado, aparecerá en pantalla. 8i el $yudante está desactivado, aparecerá laventana de ayuda. "ara escri!ir una pregunta en la ventana de ayuda, haga clic en la ficha

"sistente para "/uda . "ara despla#arse por una tabla de contenido de la a/uda5 -aga clic enla ficha Contenido. 'uando desee !uscar pala!ras o frases espec%ficas, haga clic en la ficha

6ndice.

Formato: !ermite poner encabe'ados al te#to seleccionadoFuente: !ermite cambiar tipo de fuente del te#to

seleccionado.

Tamaño: !ermite cambiar el tama(o del te#to seleccionado.

Color: !ermite cambiar el color del te#to seleccionado.Estilo: !ermite cambiar el te#to seleccionado a negrita ) cursiva.Alinear: !ermite alinear el te#to seleccionado a la i'qda., centrado, dcha.

Lista: !ermite crear listas para el te#to seleccionado


10/56

Sangria: !ermite establecer sangr*as para el te#to seleccionado

@ Auardar la página con el nom!re 7inde0.-tml8 dentro del sitio we! D4/$M


11/56

Práctica , - Introducción a DRE M!E "E

R

'on)guración de un sitio local *II+

- 9amos a crear dos páginas we! nuevas, para ello nos vamos al men* $rchivoB :uevo.

0 La primera la guardaremos con el nom!re “prueba,.-tm” dentro del sitio we!D4/$M y dentro tendrá el siguiente te to(

“Te0to de la página prueba,.-tm”

0 La segunda la guardaremos con el nom!re “prueba9.-tm” dentro del sitio we!D4/$M y dentro tendrá el siguiente te to(

“Te0to de la página prueba9.-tm”

2 $hora vamos a a!rir la página “inde0.-tml”y en ella escri!iremos al final de la página el siguiente te to(

Acceso a prueba1 Acceso a prueba2

Cueremos esta!lecer hiperv%nculos para que cuando pulse so!re $cceso a prue!a-E pase a la página prueba,.-tm . /l proceso para reali#ar esto es muy sencillo(

0 8eleccionar la frase 7"cceso a prueba,8 y pulsar so!re el !otón de la !arra de propiedades.

0 8e a!rirá una ventana donde especificaremos el destino del hiperv%nculo. /n este casoseleccionaremos la página prueba,.-tmE

0 4eali#ar este mismo proceso con 7"cceso a prueba98 y guardar los cam!ios

"istas del sitio/s posi!le visuali#ar un sitio en el panel 'itio o en una ventana. /l panel 'itio se puede a!rir atrav1s del men* +entana, opción 'itio . Tam!i1n pulsando :; o so!re el !otón


12/56

dellan3ador.

> 9amos a hacer la prue!a con nuestro sitio we! D4/$M. 8i todo ha ido !ien hasta elmomento de!er%amos tener > páginas we!( inde0.-tml5 prueba,.-tm / prueba9.-tm.

0 "ulsaremos so!re el !otón y nos de!er%aquedar algo como esto(


13/56

/n esta imagen se visuali#an el mapa del sitio y el sitio local./n este caso los documentos prueba,.-tm y prueba9.-tm cuelgan del documento inde0.-tml,ya que 1ste ha sido definido como página principal del sitio y contiene v%nculos hacia los otrosdos.

8i los archivos se mueven de una carpeta a otra, o se cam!ian de nom!re, desde fuera deDreamweaver, las páginas no se mostrarán correctamente( no aparecerán imágenes, nofuncionarán enlaces, etc.

/n cam!io, si estas modi4icaciones se -acen desde dentro de Dreamweaver, a trav1s delsitio, es posi!le actuali3ar automáticamente las páginas para que si hacen referencia a uno! eto que ha cam!iado, despu1s no se produ#can pro!lemas al visuali#arlas.

$l modificar alg*n o! eto que es referenciado por alg*n otro documento, se muestra unaventana similar a esta, que indica los documentos que hacen referencia a dicho o! eto, y que pueden ser actuali#ados para que no se produ#can los pro!lemas antes mencionados.

8implemente hay que pulsar so!re el !otón "ctuali3ar.

= 'am!iar las propiedades de página de las páginas 7prueba,.-tm8 y 7prueba9.-tm8 7se hac%a pulsando el !otón derecho y seleccionando "ropiedades de página y ponerles los siguientesatri!utos(prueba,.-tm

0 'olor de fondo de color amarillo

0 'olor de te to de color verde

0 Titulo de página( FMi segunda página we! con Dreamweaver ( prue!a-G0 /scri!ir al final de la página el te to F9olverG e insertar un hiperv%nculo para que vuelva a

7inde0.-tml8prueba9.-tm

0 'olor de fondo de color naran a

0 'olor de te to de color a#ul

0 Titulo de página( FMi tercera página we! con Dreamweaver ( prue!a2G0 /scri!ir al final de la página el te to F9olverG e insertar un hiperv%nculo para que vuelva a

7inde0.-tml8Auardar los cam!ios y ver si ha cam!iado algo en el sitio we!.

? $!rir la página 7inde0.-tml8 y pulsar la tecla :,9 . 'on esto conseguimos ver una vista previa decómo quedar%a esta página we! en el navegador.


14/56

'ompro!ar que todos los hiperv%nculos funcionan !ien y si alguno falla corregirlo.


15/56

Práctica - Introducción a DRE M!E "E

R

Imágenes *I+

/n este tema vamos a ver cómo insertar imágenes en un documento. Tam!i1n veremoscómo crear algunas imágenes especiales, como es el caso de los ollovers y losbotones 4las-, que ayudan a me orar la apariencia de nuestras páginas.

"ara insertar una imagen hay que dirigirse al men* %nsertar , a la opción %magen.Despu1s de esto, ya es posi!le seleccionar una imagen a trav1s de la nueva ventana.

- 9amos a insertar dentro de la página inde0.-tml de vuestr o sitio we! D !"M unascuantas imágenes. stas de!erán guardarse previamente dentro de una carpeta llamada6M$A/:/8 que de!er1is crear dentro del sitio we! D4/$M. Las imágenes a insertar las ten1is dentro de la carpeta C1< "L=M&* < !C= '*' P" " !L "L=M&* <

%M#$!&!'1"! *&"+!.>P$ " C*.>P$ "+%*&.>P$ C"D!&".>P$

"onerlas una de!a o de la otra centradas, utili#ando el !otón centrar y guardar la página7inde0.-tml8

'ambiar el tamaño de una imagen

Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cam!iode tamaño no se aplica directamente so!re el archivo de imagen, sino que lo que var%aes la visuali#ación de la imagen dentro de la página 7por lo tanto no es recomenda!le ./s muy pro!a!le que la imagen resultante no sea de !uena calidad, en comparación decomo podr%a quedar modificándola desde un editor e terno, como "hotoshop o Aimp."or e emplo, vamos a ver lo que ocurre si insertamos una imagen que representa alicono de Dreamweaver y modificamos su tamaño de varias formas diferentes(

%magen original


16/56

%magen con tama?o modi4icado

"uede apreciarse claramente que los resultados no son muy satisfactorios, pero enocasiones puede resultar *til modificar el tamaño de algunas imágenes aunque estoimplique perder calidad./ isten dos formas de modificar el tamaño(


17/56

alineación(

0 &na de ellas es, una ve# seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de laimagen.

0 La otra es a trav1s de la ventana de propiedades, cam!iando loscampos "n 7anchura o "l 7altura . /stos campos aparecerán en elinspector cuando sea seleccionada alguna imagen.

"ara cambiar la alineaci@n de la imagen Ai3Buierda5 centrada5 derec-a podemos hacerloigual que hicimos con el te to, utili#ando las opciones de alineación de la ventana de propiedades.

"ueden crearse v%nculos y comportamientos so!re partes de una imagen, sin la

necesidad de que sea so!re toda ella. $ esto se le conoce como mapa de imagen.

2 9amos a a!rir la página we! “inde0.-tml” y modificaremos el tamaño de lasimágenes que antes insertamos, de forma que queden con el siguiente tamaño y

> $hora crearemos dentro de nuestro sitio we! D4/$M, tres páginas más, llamadas“valencia.-tm”5 “andalucia.-tm” / “madrid.-tm”. stas tendrán el siguiente te todentro( valencia.-tm I F"ágina principal de la 'omunidad 9alencianaG , con fondo amarillo

%M"$! "&CH= " A"& "LT= " A"L "L%&!"C%E&AERONAVE.JPG @JJ 2JJ DerechaARCO.JPG -?J ?JJ 'entradaAVION.JPG >JJ >JJ 6#quierdaCADENA.JPG ?JJ -JJ Derecha


18/56

andalucia.-tm I F"ágina principal de la 'omunidad $ndalu#aG, con fondo ro o madrid.-tm I F"ágina principal de la 'omunidad de MadridG, con fondo naran a

= $ continuación, guardad las páginas anteriores y cread una página we! nuevallamada Fmapa.-tm”, donde añadiremos una imagen del mapa de /spaña 7que previamente os de!er1is !a ar de Aoogle .


19/56


20/56

Práctica . - Introducción a DRE M!E "ER

Imágenes *II+ - Imagen de sustitución&n rollover o imagen de sustituci@n es una imagen que cam!ia por otra cuando el puntero se sit*a so!re ella. /ste tipo de imagen suele utili#arse en los men*s o en los !otones para despla#arnos a trav1s de distintas páginas."ara insertar un rollover hay que dirigirse al men* %nsertar, %mágenes interactivas, ala opción %magen de sustituci@n. /n la nueva ventana hay que especificar la imágenoriginal y la de sustitución./l Te0to alternativo es el te to que aparece al situar el puntero so!re una imagen, o elque aparecerá en lugar de la imagen en el caso de que por alg*n motivo 1sta no puedaser mostrada en el navegador./l te to alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. "uedehacerse a trav1s del campo "lt del inspector de propiedades de la imagenseleccionada.

- /ntrar dentro del sitio we! D4/$M y crear all% una nueva página llamada

Fmenu.-tm” y que tenga las siguientes caracter%sticas 7las imágenes de!er1is copiarlas previamente a vuestra carpeta(0 Kondo con la imagen :&+/8. "AE situada en la carpeta 4/'&4838 "$4$

/L $L&M:3 B 6M A/:/8.0 'olor del te to amarilloE0 6nsertar una imagen de sustituci@n con las imágenes F;9F;.jpg” y “;99G.jpg”

para que accedan a la página 7inde0.-tml8. 'entrar la imagen y poner de!a o“"cceso a la página principal”

0 6nsertar dos imágenes de sustituci@n para que accedan a las páginas

prue!a-.htmE y prue!a2.htmE. /legid las = imágenes que queráis de la carpeta4/'&4838 "$4$ /L $L&M:3 B 6M A/:/8 y ponerle de!a o los te tos“"cceso a la página prueba,” y “"cceso a la página prueba9.-tm

”respectivamente.

Auardad la página y compro!ar que cam!ian las imágenes en la vista previa de la página.

2 $ñadir en la página anterior hiperv%nculos a los te tos que ha!1is escrito, de formaque se pueda acceder a las páginas 7inde0.-tml85 7prueba,.-tm8 y 7prueba9.-tm8


21/56

tanto desde las imágenes como desde los te tos. Auardar y compro!ar que funcionan loscam!ios.

/otones 0las/ isten otra serie de imágenes especiales, similares a los rollovers, que suelen utili#arse

para crear men*s, como pueden ser los botones :las- . "ara insertar un !otón Klash hayque dirigirse al men* %nsertar, %mágenes interactivas, a la opción )ot@n :las- .


22/56

donde pongamos = !otones flash con las siguientes propiedades(

$ trav1s de !stilo puede seleccionarse uno de los distintos formatos de !otón que seofrecen. /n esta misma ventana hay que especificar tam!i1n el te to que mostrará el

!otón, as% como el nom!re con el que será guardado y el v%nculo asociado./s preferi!le guardar los botones :las- en el mismo directorio que los documentosHTML, en lugar de en la carpeta destinada a almacenar imágenes, ya que de no ser as%es posi!le que al intentar asignar un v%nculo dentro del propio sitio, Dreamweaver no permita guardar el !otón con ese v%nculo en una u!icación diferente de la de dichodocumento.

4ecuerda que los !otones de!en guardarse con la e tensión '(: .

> 'rear una nueva página we! llamada 7menu9.-tm8 que tenga color de fondo ro o y

$ trav1s del inspector de propiedades del !otón Klash es posi!le editar de nuevo susatri!utos. "uede volver a a!rirse la ventana anterior pulsando so!re el !otón !ditar , y atrav1s del !otón eproducir es posi!le pro!ar el funcionamiento del !otón Klash desdeDreamweaver, sin la necesidad de tener que a!rir la página con alg*n navegador.Despu1s de ha!er pro!ado el funcionamiento del !otón Klash, de!e pulsarse de nuevoso!re el !otón eproducir 7que ha!rá cam!iado por el !otón Detener .

= 'am!iar las propiedades de los !otones que antes ha!1is insertado para hacerlos un

!'T%L* T! T* +6&C=L*

)lip"rrow $cceso al menu - 7menu.-tm8

$eneric $old $cceso a prue!a- 7prueba,.-tm8

$lass Purple $cceso a prue!a2 7prueba9.-tm8

'o4t *range $cceso a inde 7inde0.-tml8


23/56

poco más grandes. Tam!i1n pod1is cam!iar alguno de los estilos anteriores 7desde/ditar... si no os gustan. Auardar y pro!ar cómo han quedado.

? $ñadirles un parámetro para que cada uno de los !otones tengan el fondotransparente. /n este caso lo haremos pulsando so!re "arámetros y poniendo"arámetroIwmode y 9alorI transparent. Auardar los cam!ios y compro!ar el efecto producido.


24/56

Todos los o! etos se alinean por defecto a lai#quierda de las páginas we!, pero gracias a lasta!las es posi!le distri!uir el te to en columnas,colocar imágenes al lado de un !loque de te to, yotra serie de cosas que sin las ta!las ser%an

Hoy en d%a, la mayor%a de las páginas we! se !asan en ta!las, ya que resultan de gran utilidad

Las celdas son cada uno de los recuadros queforman una ta!la, que son el resultado de la

"ara poder insertar alg*n elemento en una celda,


3ablas *I+

/n este tema vamos a ver cómo tra!a ar con tablas. "odremos, entre otras cosas,insertar ta!las, com!inar celdas, insertar filas o columnas y cam!iar el tamaño del !orde.

imposi!les de reali#ar.

al me orar nota!lemente las opciones de diseño.

intersección entre una fila y una columna.

ya sea te to o imágenes, simplemente hay que situar el cursor previamente dentro de lacelda deseada.

Insertar una tabla

"ara insertar una ta!la hay que dirigirse al men* %nsertar, a la opción Tabla./n la nueva ventana ha!rá que especificar el n*mero de :ilas y Columnas que tendrá lata!la, as% como el "nc-o . /l "nc-o puede ser definido como Pí0eles o comoPorcentaje.)orde indica el grosor del !orde de la ta!la,

elleno de celda indica la distancia entre elcontenido de las celdas y los !ordes de 1stas,y !spacio entre celdas indica la distanciaentre las celdas de la ta!la.

- 'rear la ta!la que ten1is a continuación dentro de la página “inde0.-tml”1

"oner como colores dearri!a hacia a!a o(marr@n5 naranja5 rojo5/ amarillo claro.Auardar los cam!ios ycompro!ar cómo haquedado.

imagen y te to C*L=M&"

Te to dentro de unacelda

:%L" C!LD"


25/56

0ormato de tabla

Las propiedades de la ta!la se especifican a trav1s de su inspector de propiedades.

$ trav1s del inspector de propiedades se pueden modificar los valores que seespecificaron al insertar la ta!la. $l mismo tiempo, pueden indicarse otros como puedenser el valor "linear , el color de fondo o de !orde de la ta!la, o la imagen de fondo.8i lo que se selecciona es una celda, o un con unto de celdas, el inspector depropiedades cam!ia, para permitir especificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del te to que se insertará dentro de la celda 7o celdas seleccionada.La parte inferior sirve para especificar valores propios de la celda, como puede ser elcolor o imagen de fondo 7diferentes de los especificados para la ta!la glo!al , el color del !orde de la celda, etc.

2 'rear una página we! que tenga como t%tulo “Meses del a?o” y un enca!e#ado en la primera l%nea que ponga “Mes de "bril”. $ continuación de!er1is definir la ta!lanecesaria para al!ergar este mes. Auardar la página con el nom!re 7abril.-tm8 dentrode vuestro sitio we! D4/$M. $demás la página de!e tener las siguientescaracter%sticas(

0 color de fondo verde0 color de fondo de la ta!la de color naran a0 letras para cada fila en un color diferente.


26/56

Práctica 4 - Introducción a DRE M!E "E

R

3ablas *II+ - ñadir 5 eliminar )las 5 columnas

/ isten varias formas de a?adir y eliminar filas y columnas a una ta!la.Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias,desplegar el menI conte0tual de la ta!la al pulsar con el !otón derecho so!re ella, o !ien a!rir el men* Modi4icar. /n am!os casos aparece la opción Tabla.8eg*n las celdas seleccionadas, algunas de las opciones de Tabla se podrán utili#ar mientras que otras no."ara insertar una fila o una columna, hay que pulsar so!re las opciones %nsertar 4ila o%nsertar columna. La fila se inserta so!re la celda o el con unto de celdasseleccionadas, mientras que la columna se inserta a su i#quierda.

Tam!i1n es posi!le insertar filas o columnas a trav1s de la opción %nsertar 4ilas ocolumnas. $l pulsar so!re este !otón aparece una nueva ventana, donde es posi!ledeterminar si lo que se insertarán serán filas o columnas, el n*mero de ellas que se

insertará, y la posición donde se insertarán."ara eliminar una fila o una columna, hay que pulsar so!re las opciones !liminar 4ila o!liminar columna.


27/56

- $!rir la página we! “abril.-tmG situada dentro de vuestro sitio we!. $ñadir una

columna a la derecha y otra a la i#quierda y tam!i1n una arri!a y otra a!a o. De!er1is poner como color de fondo de las celdas creadas el color gris. /sto lo pod1is hacer seleccionando las celdas y pulsando so!re el !otón

Auardar la ta!la resultante con el nom!re FabrilJmodi4icado.-tmG


28/56

De!e ha!eros quedado algo similar a esto, donde los datos de la ta!la son los que pusisteis en la práctica anterior(


29/56

primera celda de una ta!la se a insertado otra ta!la.nidar6 dividir 5 combinar celdas/s posi!le insertar ta! las dentro de las celdas de otras ta!las. $ esto se le llama anidarta!las. $ continuació n tienes un e emplo de anidamiento. 'om o puedes ver, en la

2 'rear en una página we! nueva el e emplo anterior, donde insertar1is una ta!la de 2filas por 2 columnas y en el interior de la primera celda volver1is a introducir una ta!lade ese tamaño. "oner a la primera ta!la el color de fondo Fverde claroG y a la ta !lainterior el color Fnaran aG./l t%tulo de la página será FTa!las anidadasG, tendrá como color de fondo el gris y lade!er1is guardar con el nom!re “tablas9.-tm” dentro de vuestro sitio we! D4/$M.&na de las formas de dividir y combinar celdas es a trav1s del inspector depropiedades5 con los botones.

8i se seleccionan varias celdas pueden combinarse pulsando so!re el !otóndelinspector de propiedades. Tienes que tener en cuenta que sólo es posi!le com!inar celdas contiguas, cuya com!inación pueda dar como resultado otra celda."ara dividir una celda hay que pulsar so!re el !otón del inspector de propiedades,


30/56

o so!re la opción Dividir celda de la opción Tabla.

> $!rir la página we! del e ercicio anterior y reali#ar los siguientes pasos(0 com!inar las = celdas de la ta!la interior

0 añadir dos columnas a la derecha de ta!la e terior 0 dividir las = celdas de la ta!la interior 0 insertar una nueva ta!la a continuación de ? filas @ columnas y guardar los

cambios reali3ados.


31/56


0ormularios *I+

9amos a ver qu1 es un 4ormulario, para qu1 se utili#a, cómo insertar uno y qu1 elementos puede contener.Los formularios se utili#an para recoger datos de losusuarios, nos pueden servir para reali#ar un pedido en unatienda virtual, crear una encuesta, conocer las opiniones delos usuarios, reci!ir preguntas, etc.

&na ve# el usuario rellena los datos y pulsa el !otón paraenviar el formulario se arrancará un programa que reci!irálos datos y hará el tratamiento correspondiente.&n formulario está formado, entre otras cosas, por etiquetas, campos de te to, men*sdesplega!les, y !otones.

'rear 8ormularios

"uedes crear formularios a trav1s del men* %nsertar, opción :ormulario.&na ve# creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadroformado por l%neas ro as discontinuas.Dentro de dicho formulario se podrán insertar los elementos del formulario a trav1s del men*%nsertar, opción *bjetos de 4ormulario.

- 'rear una nueva página we! dentro del mismo sitio we! D4/$M que tenga las siguientescaracter%sticas(0 T%tulo de la página( “:ormulario para la introducci@n de datos”.0 'olor de fondo( “+ioleta”5 con te to en color “)lanco”

0 &na l%nea donde ponga “%ntroduce aBuí tus datos para reali3ar la reserva1”y en la l%nea de a!a o insertar un formulario con datos similares a los que tienes en el e emplo dearri!a.Auardar la página con el nom!re F4ormulario.-tm”

Elementos de un 8ormulario

Los elementos de un formulario pueden insertarse en una página a trav1s del men* %nsertar,opción *bjetos de 4ormulario.$ trav1s de esta opción se puede acceder a la lista de todos los o! etos de formulario que puedenser insertados en la página.


32/56


33/56

2 $!rir la página 74ormulario.-tm8 si no la tienes a!ierta, e inserta los siguientes elementosdentro del formulario que creaste(

"osi!les valores(0 Don +enito

Nombre:0 Madrid0 8an 'arlos0 Legan1s0 9allecas

DNI: e-mail:

Día: !ne" Me": Enero #ora:

In"$ala%i&n o a%$i'idad: Pi"$a $eni" Cen$ro: Don (eni$o

"osi!les valores(Re"$able%er En'iar > Auardar los

cam!ios y com

&*M) ! D!'C %PC%E&

Campo dete0to / #reade te0to1

"ermiten añadir un cuadro de te to. /l Campo de te0to sólo permite escri!ir una l%nea alusuario, mientras que el #rea de te0to permite escri!ir varias. 8e puede pasar de Campo dete0to a #rea de te0to a trav1s del inspector de propiedades.$ trav1s del inspector de propiedades es posi!le cam!iar sus propiedades./ :om!re(

)ot@n1 /s el !otón tradicional de Nindows. /l !otón puede tener asignadas tres opciones(!nviar4ormulario, establecer 4ormulario 7!orrar todos los campos del formulario , o &inguna7para poder asignarle un comportamiento diferente de los dos anteriores .

Casilla deveri4icaci@n1

/s un cuadrito que se puede activar o desactivar."uede asignársele el estado inicial como "ctivado o como Desactivado./ . Módulos reali#ados( Módulo - Módulo 2 Módulo >

)ot@n deopci@n1

/s un pequeño !otón redondo que puede activarse o desactivarse. 8i hay varios del mismoformulario, solo puede ha!er uno activado. 'uando se activa uno, automáticamente sedesactivan los demás./ . /stado civil( 8oltero 'asado

Lista2MenI1&na lista o men* es un elemento de formulario que lleva asociada una lista de opciones.Los elementos se añaden a trav1s de !otón +alores de lista del inspector de propiedades.

/ . Tipo de ha!itación Eli%e tipo de habitación


34/56

pro!ar que funciona todo correctamente. 0 "ista tenis0 "ista "ádel0 'ampo de f*t!ol


35/56

Práctica 9 - Introducción a DRE M!E "E

R0ormularios *II+

- 4eali#ad la siguiente página Ne! con Dreamweaver 7en una página en !lanco .

De!e tener las siguientes caracter%sticas(

0 Ta!la, con O filas y = columnas0 Todo centrado.0 Tamaño del !orde I >0 'olor del fondo de la -P l%nea, 9erde0 'olor del fondo de la 2P l%ne a, $#ulado0 'olor del fondo del r esto de l a ta!la, "lateado

TABLA DE PRECIOS 2005TEMPORADA ALTA TEMPORADA BAJA

HAB.

INDIVIDUAL55.00 HAB.

INDIVIDUAL40.00

HAB. DOBLE 68.00 HAB. DOBLE 58.00SUIT 125.00 SUIT 100.00

DESAYUNO 10.00 DESAYUNO 8.00COMIDA 45.00 COMIDA 32.00

CENA 48.00 CENA 35.00Todos los P !"#os so$ !$ % & $o #$"l'&!$ !l IVA


36/56

HOTEL LAS FUENTES * * * *

2 $ continuación de la Ta!la de precios de nuestra página Ne!, vamos a insertar un Kormulario de reservas7de ando un par de l%neas de separación donde podamosrecoger 4eservas para nuestro hotel por 6nternet.

/ste formulario de!e contener los elementos necesariosya vistos en la práctica anterior para que nos quede comoel que tenemos a continuación(


37/56

Para realizar su Reserva rellene el siguiente Formulario

:om!re($pellidos(D.:.6.(

Tipo de ha!itación Eli%e tipo de habitación 7!otón Men* desplega!le

Creamos 4 elementos para la lista desplegable: “Elige tipo de habitación..., Individual, Doble y Suit”

41gimen escogido( $lo amiento $D M" "' 7+otón de opciónD%a de entrada(D%a de salida(/ tras que desear%a utili#ar 7eli a cuantos quiera (

Lavander%a Mini!ar 8ervicio ha!itaciones 8auna Aimnasio7con el !otón 'asilla de verificación

/nviar 4esta!lecer 7!otón de comando

Auardar la página con el nom!re Freservas.-tm”

> /n las propiedades del formulario de!1is especificar que estos datos se env%en por correocuando pulsemos el !otón F/nviarG. "ara ello introducir en el campo "cci@n la dirección de

correo luisescandellQyahoo.es

= $!rir la pagina Ne! “reservas.-tm” desde el 6nternet / plorer y rellenar el siguienteformulario de reserva(


38/56

0 $ntonio Lópe# Aon#ále#, con D:6( [email protected]'.0 Ha!itación do!le en Media "ensión.0 /ntrada el - de unio y salida el R de unio.0 / tras de Mini!ar y 8auna.

'uando le deis a /nviar, se de!er%a reci!ir en ese correo la selección escogida.

? "ro!ad a enviar varias reservas más que vosotros queráis


39/56

Práctica 1: - Introducción a DRE M!E "ER

Marcos9amos a ver qu1 son los marcos y para qu1 se utili#an. Tam!i1n veremos cómo insertar unmarco sencillo en una página, y cómo tra!a ar con 1l.Los marcos o frames sirven para distri!uir me or los datos de las páginas, ya que permitenmantener fi as algunas partes, como pueden ser el logotipo y la !arra de navegación, mientrasque otras s% pueden cam!iar. $demás de me orar la funcionalidad, pueden me orar tam!i1n laapariencia.'ada uno de los marcos de una página, contiene undocumento HTML individual. "or e emplo, en la imagende la derecha puedes ver una página con tres marcos.

0 Marco i#quierdo0 Marco derecho o principal0 Marco de arri!a

"ara poder visuali#ar la página de este modo, hemostenido que a!rir en el navegador una página we!7inde .html que es la que incluye a todas las demás.

'rear marcos- "ara crear un marco, primero hay que a!rir alg*n documento. /n este caso vamos a crear unonuevo dentro de nuestro sitio we! D4/$M 7"rc-ivo 2 &uevo .Lo primero que hay que hacer es dirigirse al men* %nsertar, a la opción Marcos. $ trav1s deesta opción puede elegirse el tipo de marco que va a crearse."ulsaremos so!re %nsertar 2 Marcos 2 %3Buierda se creará un nuevo marco a la i#quierda deldocumento actual.$ continuación pulsaremos so!re %nsertar 2 Marcos 2 "rriba y se creará un nuevo marco arri!adel documento actual.'omo puedes ver en la imagen, aparece unas l%neas que divide el documento en tres. /ldocumento de partida era uno nuevo./n este caso tendremos cuatro documentos( el de la i#quierda, el de la derecha, el de arri!a, y elque contiene los marcos. /l de la derecha es el documento que ten%amos inicialmente, que estáen el marco conocido como marco padre 7MainKrame .

"ara diferenciar cada uno de los marcos vamos a cam!iar el color de fondo de cada uno de ellos."ulsad el !otón derecho encima de cada uno de ellos y en "ropiedades de página poned los


40/56

siguientes colores(

0 marco principal I amarillo claro0 marco de arriba I ro o claro0 marco de la i3Buierda I a#ul claro


41/56

2 "or *ltimo guardaremos todos los marcos 7recordad que ahora tendremos = páginas .8eleccionar la opción "rc-ivo 2 $uardar todos los marcos y poned los siguientes nom!res(0 $l marco que englo!a a todos los demás lo llamaremos 7marcos.-tm80 $l marco principal lo llamaremos 7principal.-tm8

0 $l marco de arri!a lo llamaremos 7arriba.-tm80 $l marco de la i#quierda lo llamaremos 7i3Buierda.-tm8

'on esto ya tendremos guardados cada uno de los marcos de nuestra página. "ro!ad ae ecutarlos desde el navegador 7entrar en Mi "' B $lumno B etc y ver cómo ha quedado cadauno de ellos. De!er1is compro!ar que el archivo 7marcos.-tm8 contiene al resto de marcos.

Modi)car marcos

8i en alg*n momento se necesita modificar alguno de los marcos para hacerlos másgrandes o más pequeños se puede hacer accediendo al men* 9er B $yudas 9isuales BMarcos. /ntonces solamente con pinchar y arrastrar en el !orde del marco lo podremosagrandar.> $!rir la página 7marcos.-tm8 y hacer los marcos de la i#quierda y el de arri!a más grandes.= 6nsertar en el marco 7i3Buierda.-tm8 !otones flash que contengan hiperv%nculos a lassiguientes páginas 7que ya de!er%amos tener creadas (

prueba,.-tm 2 prueba9.-tm 2 abril.-tm 2 4ormulario.-tm 2 reservas.-tm 2 menu.-tm? 'rear usando el Aimp una imagen de tamaño 2?J R? que tenga el te to “Mi primera páginade Prueba”, guardar esta imagen con el nom!re 7%magen,.jpg8 en vuestra carpeta D4/$M. $continuación insertarla en el marco de arri!a.@ Auardar la imagen 7D%'P" *.>P$8 dentro de la carpeta D4/$M y a continuacióninsertarla en la página 7principal8 unto al te to “P#$%&" P %&C%P"L”.R Auardar todos los marcos y pro!ar si funcionan !ien los hiperv%nculos.

Modi)car propiedades de los marcos

8i en alg*n momento se necesita modificar las propiedades de los marcos como puedan ser susnom!res o el de los hiperv%nculos, se puede hacer siguiendo las siguientes indicaciones(

S $ trav1s del men* +entana 2 Marcos se puede acceder a las propiedades de cada marco,aprovecharemos para cam!iar al nom!re a cada marco, llamándolos respectivamente“principal”, “i !uierda” y “arriba”

O 8i en alg*n momento una página no se a!re en el marco correcto es porque de!emos indicarle


42/56

en las propiedades del hiperv%nculo el destino hacia donde va a a!rirse la nueva página. "or e emplo, en el e ercicio anterior puede que se os haya a!ierto los enlaces en el marco de lai#quierda, cuando nosotros quer%amos que se a!riera en el principal. "ara ello hay que cam!iar el destino en las propiedades del !otón flash(


43/56

Práctica 11 - Introducción a DRE M!E "

ER

'reación de la primera web *1+

/n las siguientes > prácticas vamos a ir creando una página we! con diferentes secciones que yase puede apro imar una de las we!s que encontramos en 6nternet.

- /n primer lugar de!emos crear un nuevo sitio we! A'itio 2 &uevo sitio que tendrá lassiguientes caracter%sticas.

0 'rearlo dentro de la carpeta F'6'L68M3G que a su ve# estará dentro de tu carpeta de alumno,es decir en la ruta C1


44/56

un te to. $qu% ya entra en uego vuestra imaginación, un e emplo propuesto ser%a este(

/l tamaño de!e a ustarse a cómo hayáis hecho el marco. Auardar la página Farriba.-tm”

? /n el marco de la i#quierda A“i3Buierda.-tm” vamos a crear un men* para poder acceder alas diferentes secciones, para ello crearemos una ta!la de O filas por - columna, dondeintroduciremos las siguientes secciones(


45/56

/l color de fondo de la ta!la de!e ser el naran a claro, menos la primeracelda que estará en a#ul claro. 'on letras en color negro.

@ usto encima de la primera celda pod1is poner, si os queda sitio, un icono pequeño devuestra empresa 7que previamente de!er1isdiseñar . "or e emplo uno similar a 1ste(

R Llegado a este punto de!er%amos tener diseñada ya la página

principal del sitio we!. Auardar todas las páginas y a!ridla desde elnavegador para compro!ar que se ve todo correctamente.

S $hora nos queda ir definiendo el resto de secciones y añadiendo loshiperenlaces en las opciones del men*. 'rearemos una página nueva y

en ella definiremos la sección(UCui1nes somosV⇒ 8e trata de poner un te to introductorio quee plique cómo es nuestra empresa. /ste te to os lo pod1is inventar, sino se os ocurre nada pod1is utili#ar el siguiente te to(

“ esde esta sección! "ueremos en #rimer lugar e$#licaros en #ocas l%neas un #e"ueñoresumen de nuestra historia! &icicletas 'ocamora (u) (undada en el año *+,-. #or dos delos hermanos 'ocamora! A/elino y 0anuel! en a"uellos años com#aginaban el taller conla com#etición #ues los dos hermanos hac%an sus #initos com#itiendo en a"uellascarreras "ue se organi1aban #or a"uel entonces en el Cam#o de &atallones+ En nuestrosinicios como taller nos dedic2bamos a las bicicletas y a las motocicletas! de lasbicicletas se encargaba A/elino y de las motocicletas el encargado era 0anuel! 3#adre yt%o del actual #ro#ietario4! el taller se encontraba en 5ubia! 6usto al #asar el #uente condirección a 7eda en el lado i1"uierdo! all% estu/imos hasta el año *+,88”+

$ñadir alguna imagen que tenga relación con el mundo ciclista intercalada con el te to.

Auardar la página con el nom!re FBuienes.-tm” dentro del sitio we! '6'L68M3

O $ continuación crearemos una página nueva y en ella definiremos la sección(Taller ⇒ 8e trata de poner un te to e plicativo de los servicios que ofrece nuestra empresa. /stete to os lo pod1is inventar, si no se os ocurre nada pod1is utili#ar el siguiente te to(

“7uestra

intención!

es

#oder

atender

las

demandas

de

nuestros

clientes!

cada

/e1

m2se$igentes! con lo cual intentamos ser nosotros tambi)n e$igentes con nosotros mismos!#ara #oder o(recer un buen ser/icio y una buena calidad con unos #recios muycom#etiti/os+ 9ara com#robarlo solo ten)is "ue dirigiros a nuestro comercio y locom#robareis en situ! "ue al margen de las #alabras es la me6or (orma de com#robarlo+”

$ñadir tam!i1n alguna imagen relacionada con la reparación de !icicletas intercalada con elte to.

Auardar la página con el nom!re Ftaller.-tm” dentro del sitio we! '6'L68M3


46/56

Práctica 1( - Introducción a DRE M!E "

ER

'reación de la primera web *(+

9amos a seguir definiendo las secciones de la we! que comen#amos en la práctica anterior.

- "ara la sección Kotos de!eremos crear una nueva página en !lanco y !a arnos de 6nternet unaserie de fotos relacionadas con el ciclismo 7al menos S fotos , que guardaremos en una carpetallamada K3T38 y que a su v e# estará dentr o del sit io we! '6'L68M3.

/stas fo tos las organi#aremos en una ta!la que estar á centrada res pecto a la página y de !e tene r la foto y una descripción usto de!a o. :os de!e quedar algo parecido a esto(

Auardar la página con el nom!re “4otos.-tm”

2 "ara la sección 3fertas de!eremos crear una nueva página en !lanco y !a arnos de 6nternet

K3T3 K3T3

Descripción de la foto Descripción de la foto

K3T3 K3T3

Descripción de la foto Descripción de la foto

... ...


47/56

una serie de fotos relacionadas con productos para el ciclismo 7al menos @ productos como por e emplo !icicletas, sillines, maillots, cascos, etc. Los guardaremos en una carpeta llamada6M A/:/8, que a su ve# estará dentro del sitio we! '6'L68M3.

3rgani#ad los productos igual que hicisteis con las fotos, es decir, por medio de una ta!la dondeapare#ca la foto del producto, al lado una pequeña descripción, y a su derecha el precio. De!equedar algo como esto(

Auardar la página con el nom!re “o4ertas.-tm”


48/56

> "ara la sección /nlaces tendr1is que crear una nueva página en !lanco y crear en ella unarecopilación de enlaces relacionados con el ciclismo. "inchando encima de cada enlace se de!e poder acceder a esa página mostrada en una página aparte. "ara hacer esto pulsaremos so!re la

opción del hiperv%nculo siguiente

/ emplo(

!nlaces interesantes

Auardar la página con el nom!re “enlaces.-tm”

= "ara la sección :uestras Marcas tendr1is quecrear una nueva página en !lanco y crear en ellauna recopilación de imágenes de marcasrelacionados con el ciclismo, ya sean marcas de !icicletas, sillines, pedales, etc. De!e quedarosalgo como lo siguiente

Auardar la página con el nom!re “marcas.-tm”

"ágina del Tour de Krancia http(BBwww.tourdefrancia.es"ágina de la vuelta a /spaña http(BBwww.vueltaespaña.es

......


49/56

? "ara la *ltima de las secciones, la sección /0mail , tendr1is que crear una nueva páginaen !lanco y en ella pondr1is la forma de contactar con vosotros. /l e0mail os lo pod1is inventar.$ñadir tam!i1n alg*n icono que tenga relación con el env%o de correo electrónico, como por e emplo este(

Auardar la página con el nom!re Femail.-tm”


50/56

Práctica 1, - Introducción a DRE M!E "ER

'reación de la primera web *,+9amos a terminar de retocar la we! que comen#amos en las prácticas anteriores.- 'rear un hiperv%nculo en cada una de las opciones del men* para que se pueda acceder a cadauna de las secciones. "or e emplo cuando pinchemos en Kotos se de!e poder acceder a la página“4otos.-tm” y compro!ar que se a!re la página en el marco principal.

2 /n cada una de las páginas de las secciones anteriores de!eremos crear un enca!e#ado al principio de la página que ponga el t%tulo de la sección. "or e emplo en la sección Kotos pondremos al principio de la página un t%tulo centrado como 1ste(

:otos> 6nsertar recursos para que la we! quede con un aspecto más agrada!le 7fondos, !arras,iconos, gifs animados, etc . Hay muchas páginas en 6nternet donde encontrar recursos par a

!a ar, si no encontráis ninguno pod1is entrar a la we! http(BBwww.areas.netBcolorvivo.htm ./n ella ten1is fondos, iconos, !arras, gifs animados, etc as% que !a aros algunos de ellos einsertarlos en las páginas que previamente ha!1is creado."ara ello de!er1is guardarlos dentro de vuestro sitio we! '6'L68M3.

= "onerle un sonido de fondo a la we!. "ara hacer esto nos guardaremos un sonido descargadode 6nternet en formato midi, y sino encontráis ninguno guardaros cualquier canción de las quehay en /ntorno de 4ed dentro de vuesto sitio we! '6'L68M3.

$ continuación a!riremos la página 7i3Buierda.-tm8 7porque siempre la vamos a tener fi a ennuestra pantalla y en ella mostrad el código fuente de la página pulsando el !otón

Dentro del W!odyX escri!id la siguiente l%nea(

Kbgsound src nombreJdelJarc-ivo.mid loop ,FF N

? 'rear dentro de la sección /0mail un formulario similar al que creamos en prácticasanteriores que nos permita recoger las sugerencias acerca de nuestra página we! y enviarlas por

correo. Auardar la página 7email.-tm8

@ 8ustituir en la página del men* los hiperv%nculos creados por !otones flash que tengan lo


51/56

smismos hiperv%nculos y el mismo te to en su interior que los anteriores hiperv%nculos. Auardar la página 7i3Buierda.-tm8.

R 'ompro!ar que todo está !ien enla#ado y si consideráis que pod1is retocar algo de la página para que quede me or, hacedlo ahora.


52/56


3raba;o 0inal

- 'rear un sitio we! en Dreamweaver que tenga como t%tulo( “Trabajo :inal de%n4ormática” y lo guardar1is dentro de la carpeta FK6:$LG que a su ve# estará dentrode tu carpeta de alumno, es decir en la ruta C1


53/56

= $cordaos de guardar las páginas y todos los elementos que us1is en vuestra carpeta:%&"L.

? "ro!ar que todo funciona correctamente y está !ien enla#ado.


54/56

Práctica 1. < =ubir la página web por 03P

$ continuación vamos a ver cómo su!ir nuestra página we! a 6nternet para que puedaverla todo el mundo utili#ando un gestor KT".

- &na ve# hemos activado la página we!, nos !a aremos un programa para Fsu!irG las páginas por ftp a 6nternet A'% &* L* T!&!M*' Q" %&'T"L"D* . "ara ellode!er1is entrar en http(BBwww.smartftp.com y ah% descargaros el programa 'mart:tp ./ste programa es gratuito y muy sencillo de utili#ar para su!ir datos a 6nternet.

2 6nstalad el programa dándole a aceptar a todos los pasos 7si ten1is alguna duda no

dud1is en preguntarlo .

> 8e os creará un acceso directo en el escritorio de esta forma./ntrad en este programa y tendr1is que conectar con el servidor delcolegio para poder acceder a los datos de vuestra we!. "ara ello de!er1isintroducir estos datos(

CO7F ;OST4 servidor elLO; 7 3


55/56

3s los facilitará profesor

Z pulsar so!re el !otón de conectar 7

"ara que os apare#ca el navegador de vuestro disco duro tendr1is que pulsar so!re elmen* :TP2Local )rowser.

/n estos momentos de!er1is tener dos ventanas, una donde veáis los archivos de vuestrodisco duro y otra que estará enla#ando con el espacio we! que aca!áis de crear


56/56

= $ntes de su!ir los archivos aseguraros que toda vuestra página funcionacorrectamente y que la página principal del sitio se llama inde0.-tml7será la quecargue en primera instancia .

!'P"C%*(!)

D%'C*D= *

? Hacer do!le clic en la carpeta publicJ-tml 7de la ventana de arri!a para entrar dentro de ella. /ste es el espacio reservado para guardar vuestra página we!.

@ Para pasar los arc-ivos de un sitio a otro simplemente tenOis Bue seleccionarlos/ arrastrar -asta la carpeta web donde BuerOis Bue Bueden guardados7si os pideso!rescri!ir alg*n archivo contestar que 8%

R 'ompro!ad que la página funciona correctamente, accediendo a la dirección we!

Documents

Diseño Web Dreamweaver MX