ADOBE DREAMWEAVER CS6 - Cc

2013
Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

Mi primera pgina
Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web senci a, con varios esti os de te!to, una imagen y un en ace a otra pgina" #rear esta pgina so o te evar unos pocos minutos, y sa$rs cmo tra$a%ar con os e ementos $sicos con os que estn hechas a mayor&a de as pginas we$" 'i nunca has hecho una pgina we$, este es e momento para descu$rir o fci que es" (o primero que tienes que hacer es a$rir Dreamweaver" )$re un documento nuevo Archivo/Nuevo y se ecciona a Categora Pgina bsica, HTML, en a co umna Dise*o de%amos a opcin por defecto+ <ninguno>"

'eguidamente, ha, c ic so$re a ,ona $ anca de documento y escri$e o siguiente+

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

-na ve, introducido e te!to, vamos a modificar e t&tu o y e co or de fondo de documento" Para e o podemos hacer c ic so$re e men. Mo i!icar "ctr#$%& y e egir a opcin Propie a es e #a pgina' /ntonces se a$rir una ventana como a que aparece a continuacin+

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

/n Co#or e (on o escri$e #CCCCFF, de este modo e fondo de documento pasar a ser de co or a,u " 0a, c ic en Ttu#o/Co i!icaci)n a a i,quierda, y en e Ttu#o escri$e Mi primera pgina" Para ap icar os cam$ios, pu sa so$re e $otn Aceptar" Ahora va*os a insertar una i*agen' Para insertar a imagen, hemos de tener a en a carpeta donde estamos creando nuestras pginas, ha$itua mente en una su$carpeta dedicada a as imgenes" Muchas de as imgenes que vemos en 1nternet se pueden copiar a disco duro" ) hacer c ic con e $otn derecho de ratn so$re a imagen que queremos traer de 1nternet, se a$re una ventana con una opcin simi ar a +uar ar i*agen co*o''' 2Dependiendo de navegador que uti ices3 que permite gra$ar dicha imagen en un fichero de nuestro disco duro" 4en en cuenta que si piensas pu$ icar a pgina en 1nternet, #os erechos e autor e #a i*agen' #opia a imagen que aparece a continuacin, para uego poder insertar a en a pgina we$ que estamos creando" 5urda a en a carpeta donde vas a guardar a pgina que aca$as de crear" ebe*os ,ue respetar

)hora vamos a insertar a imagen de$a%o de a segunda &nea de te!to" /n primer ugar, situamos e cursor a fina de a segunda &nea y creamos un sa to de &nea 2tec a -nter3" Despu6s nos dirigimos a men. .nsertar, opcin .*agen" /n a nueva ventana que aparece, de$ers $uscar a imagen en a carpeta en a que a ha$&as guardado, se eccionar a y pu sar Aceptar" / pane inferior mostrar as propiedades de a imagen"

)hora vas a pasar a cam$iar e formato de te!to" Para e o necesitas rea#i/ar c#ic !uera e #a i*agen"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

'e mostrar e pane de Propie a es HTML'

'i no te aparece, puedes mostrar o a trav6s de men. 0entana, opcin Propie a es "(1&" 'i o que te ocurre es que .nicamente te aparece e t&tu o de pane , es porque est contra&do" Para que te apare,ca desp egado de$es hacer ob#e c#ic en Propie a es"

'e ecciona a primera &nea de te!to" /n e inspector de propiedades pu sa HTML y ap ica e formato -ncabe/a o 2 2h13 se eccionando e va or -ncabe/a o2 de cuadro (or*ato"

Para cam$iar e co or de te!to cam$iamos e pane a as opciones de esti o, pu sando e icono C33 a a i,quierda" Mediante e inspector de propiedades en Dreamweaver #'7 accedemos tanto a as propiedades de C33 como a as propiedades de HTML"

Podemos decir que en una pgina we$, 04M( se encarga de estructurar e contenido, a informacin, mientras que #'' se encarga de mostrar ese contenido con e formato" ) uti i,ar e inspector de propiedades de #'', Dreamweaver ap ica formato a te!to mediante ho%as e esti#os en casca a" (os esti os #'' ofrecen un mayor contro so$re e dise*o de a pgina 8e$ y reducen e tama*o de archivo"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

'e ecciona a primera &nea" /n 4eg#a e estino se ecciona <Nuevo esti#o en #nea>, para ap icar e formato so o a te!to se eccionado" 4am$i6n ap ica e esti o de (uenteArial, Helvetica, sans-serif, co or a,u #009 y centra e te!to con e segundo $otn de a parte derecha , ta y como muestra a imagen siguiente+

'e ecciona a segunda &nea de te!to, y se eccionando como antes <Nuevo esti#o en #nea>, marca os $otones para poner o en negrita y cursiva respectivamente"

9amos a centrar tam$i6n a imagen" Para e os se eccina a" (o que hay que centrar es e contenido de prrafo que a contiene" Para hacer o, en a $arra de estado, encima de as propiedades nos aparece a %erarqu&a de etiquetas" 0a, c ic so$re p" )hora, en 4eg#a ahora, pu sando en e " estino se ecciona <Nuevo esti#o en #nea> y centra e prrafo como hemos visto hasta

Por . timo vamos a crear e en ace" 'e ecciona e te!to de a . tima &nea, y cam$ia e pane de Propie a es a as propiedades de HTML" /n e campo 0ncu#o, escri$e a -:( de a pgina a en a,ar, como se ve en a imagen+

Por . timo guarda e documento" ;a sa$es que puedes hacer o a trav6s de men. Archivo, desde a opcin +uar ar" Puedes amar a documento como o desees, pero a e!tensin ha de ser htm o htm " Por e%emp o, o hemos amado index.htm, y a hemos guardado en a misma carpeta de 3itio" )hora, puedes ver cmo se ve en tu navegador pu sando a tec a (25"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

9amos a ver cu es son os e ementos $sicos de Dreamweaver #'7, a panta a, as $arras, os pane es, etc""", para sa$er diferenciar entre cada uno de e os" )prenderemos cmo se aman, dnde estn y para qu6 sirven" 4am$i6n veremos cmo o$tener ayuda, por si en a g.n momento no sa$emos cmo seguir tra$a%ando" #uando cono,camos todo esto estaremos en disposicin de empe,ar a crear pginas we$"

/spacio de tra$a%o de Dreamweaver 2#'7, 12"1, 12"23

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

A' <arra de herramientas Documento" 6' <arra de a ap icacin C' 9entana de documento 7' #onmutador de espacios de tra$a%o -' 5rupos de pane es (' 'e ector de etiquetas +' 1nspector de propiedadeso H' Pane )rchivos

/spacio de tra$a%o de Dreamweaver 2##3

A' <arra de herramientas Documento 6' <arra de a ap icacin C' 9entana de documento 7' #onmutador de espacios de tra$a%o -' 5rupos de pane es (' Pane )rchivos +' 1nspector de propiedades H' 'e ector de etiquetas

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

Mo os e visua#i/aci)n
Podemos editar e documento con distintas vistas, que puedes cam$iar trav6s de a $arra de documento+

8 La vista 7ise9o (a vista Diseo permite tra$a%ar con e editor visua "

=os ofrece un aspecto muy simi ar a resu tado fina , pero tota mente edita$ e"

8 La vista C) igo (a vista Cdigo se uti i,a para poder tra$a%ar en un entorno tota mente de programacin, de cdigo fuente" =o permite tener directamente una referencia visua de cmo va quedando e documento seg.n se va modificando e cdigo"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

/ cdigo que vemos es e que genera Dreamweaver a editar e contenido en a vista Diseo"

8 La vista 7ivi ir (a vista Dividir permite dividir a ventana en dos ,onas+ #digo y Dise*o" (a ,ona i,quierda muestra e cdigo fuente, y a derecha e editor visua " #uando se rea i,a un cam$io en a guna de as ,onas, este cam$io se ap ica directamente so$re a otra"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

8 La 0ista en vivo (a vista en Vivo es una me%ora reciente de Dreamweaver" Nos o!rece una vista e# resu#ta o !ina# no e itab#e " ) diferencia de a vista Diseo, que nos permite editar os e ementos, esta vista nos permite interactuar con e os, ta como o har&amos con e navegador" (a funcin de esta vista es a de ahorrarnos tiempo, a no tener que compro$ar que peque*os cam$ios se previsua i,an correctamente en e navegador" =o o$stante, siempre hay que compro$ar a pgina con os principa es navegadores de mercado que sern os que emp earn nuestros visitantes" De hecho, a o argo de curso vers cmo a gunos e ementos se ven de forma muy distinta si os vemos en a vista de dise*o, en a vista en vivo o en e navegador" 4am$i6n es conveniente compro$ar a pgina con os distintos tama*os de panta a, te 6fono mvi , ta$ et y P#"

8 La vista C) igo en vivo

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

/sta vista se emp ea con%untamente con a Vista en vivo" Divide a panta a como a vista Dividir, pero sin que podamos editar e cdigo" (o que hace es que a se eccionar partes de a we$ en a Vista en vivo, se se eccione su correspondiente cdigo fuente y ref e%a os cam$ios dinmicamente a interactuar con a pgina" 'i adems pu samos e $otn podremos ver os esti os asociados a cada e emento" Por e%emp o, a co ocar e cursor so$re un prrafo podemos ver sus mrgenes, como se aprecia en a siguiente imagen"

Creaci)n : e ici)n e 3itio sin cone;i)n a internet

3itio
-n sitio we$ es un con%unto e archivos : carpetas , re acionados entre s&, con un dise*o simi ar o un o$%etivo com.n" /s necesario dise*ar y p anificar e sitio we$ antes de crear as pginas que va a contener" (a forma ha$itua de crear un sitio consiste en crear una carpeta en e# isco #oca#" (os documentos 04M(

norma mente se crean dentro de dicha carpeta, mientras que para contener as imgenes, as animaciones, archivos de tipos espec&fico, etc", se de$en crear nuevas carpetas dentro de 6sta, con e o$%etivo de tener una me%or organi,acin de os archivos a a hora de tra$a%ar" /sto es o que se conoce como sitio #oca#" Despu6s se podrn copiar os archivos en un servidor we$, en e denominado sitio re*oto, o que equiva e a pu$ icar e sitio, de modo que a gente podr ver o en 1nternet"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

Por tanto, e# sitio #oca# : e# sitio re*oto tienen #a *is*a estructura " / sitio oca es a copia de sitio con a que tra$a%aremos, y os cam$ios os actua i,aremos en e sitio remoto" (a organi,acin de os archivos en un sitio permite administrar y compartir archivos, mantener os v&ncu os de forma automtica, uti i,ar (TP para cargar e sitio oca en e servidor, etc" (a pgina inicia de nuestro sitio de$e de tener e nom$re index.htm o index.html, ya que cuando se intenta acceder a una -:( gen6rica, e servidor devue ve a pgina con ese nom$re" Por e%emp o, si escri$i6ramos a direccin gen6rica http: !!!.g""gle.c"m en e navegador, 6ste intentar&a cargar a pgina http: !!!.g""gle.c"m index.htm, por o que se producir&a un error en e caso de que no e!istiera ninguna pgina con e nom$re index.htm, y no se podr&a navegar por e sitio a no ser que se escri$iese e!actamente http: !!!.g""gle.c"m n"m#repagina.htm

<-# sitio estar co*puesto por carpetas para una *e%or organi/aci)n=
Con!iguran o/3e#eccionan o 3itio
/n e men. 3itio e egir A *inistrar 3itio'

:ea i,ar c ic en Nuevo sitio" 'i tiene sitios configurados, mostrar a ista"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

/n nuestro caso e egimos Nuevo 3itio" 'e asignar un no*bre a# sitio y a ruta de a carpeta crea a para traba%ar" +uar ar" <3i :a tiene un sitio crea o, en #a #ista e sitios so#o ebe e#egir con ,ue sitio esea traba%ar=

Propie a es e #a pgina
/s conveniente definir sitios homog6neos, que todas as pginas de un sitio sigan un mismo formato, es decir, que tengan e mismo co or de fondo, de fuente, etc" Puede definirse e formato de cada una de as pginas a trav6s de cuadro de di ogo Propie a es pgina" /ste cuadro se puede a$rir de tres modos diferentes+ Pu sar a com$inacin de tec as Ctr# $ >" 0acer c ic so$re e men. Mo i!icar y e egir a opcin Propie a es e #a pgina" 0acer c ic con e $otn derecho de ratn so$re e fondo de a pgina" )parecer a fina de men. conte!tua a opcin Propie a es e #a pgina" e #a

'e a$rir e cuadro de di ogo siguiente+

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

(as propie a es estn organi/a as en categoras" /n a categor&a Apariencia "C33&, como ves en a imagen anterior, encontramos as propiedades+ (uente e pgina? es e tipo de etra que e ap icaremos a te!to" Ta*a9o? es e tama*o de a fuente que ap icaremos a te!to" Co#or e# te;to? es e co or de a fuente" Co#or e# !on o? permite especificar un co or de fondo para e documento, pero dicho co or so o se mostrar en e caso de no ha$er esta$ ecido ninguna imagen de fondo" .*agen e !on o? permite especificar una imagen de fondo para e documento" Dicha imagen se muestra en mosaico" /s importante a e egir una imagen de fondo tener en cuenta que seg.n os co ores de a imagen ser necesario esta$ ecer unos u otros co ores para e te!to, as& como que no es conveniente tener un gif animado como fondo" 4epetir? permite especificar si queremos que a imagen de fondo se repita o no" 'i no queremos que se repita, se eccionamos a opcin no8repeat" 'i queremos que se repita o de%amos a opcin en $ anco o se eccionamos a opcin repeat" 'i queremos que se repita so o en hori,onta se eccionamos a opcin repeat8; y si queremos que se repita en vertica , entonces se eccionamos repeat8:" Mrgenes? permiten esta$ ecer mrgenes en e documento, es decir, a distancia entre donde empie,a e contenido de a pgina y a ventana de navegador" /n a categor&a Apariencia "HTML&, como vemos en a imagen siguiente, encontramos as propiedades+

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

.*agen e !on o? permite especificar una imagen de fondo para e documento" Dicha imagen se muestra en mosaico" /s importante a e egir una imagen de fondo tener en cuenta que seg.n os co ores de a imagen ser necesario esta$ ecer unos u otros co ores para e te!to, as& como que no es conveniente tener un gif animado como fondo" (on o? permite especificar un co or de fondo para e documento, pero dicho co or so o se mostrar en e caso de no ha$er esta$ ecido ninguna imagen de fondo" Te;to? es e co or de a fuente" 0ncu#os? es e co or que mostrar e te!to de os v&ncu os" 0ncu#os visita os? es e co or que mostrar e te!to de os v&ncu os visitados" 0ncu#os activos? es e co or que mostrar e v&ncu o cuando e cursor de ratn hace c ic so$re e mismo" Mrgenes? permiten esta$ ecer mrgenes en e documento, es decir, a distancia entre donde empie,a e contenido de a pgina y a ventana de navegador"

Podemos o$servar que muchas propiedades 04M( y #'' son simi ares" (a diferencia es que #'' ap ica nuestra configuracin uti i,ando reg as de esti o, mientras que 04M( o hace con atri$utos 04M(" /stos . timos estn cayendo en desuso, ya que se tiende a imitar e 04M( a contenido, y no a dise*o" Por eso, te desaconse%amos su uso" /n a categor&a 0ncu#os "C33& encontramos as propiedades+

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

(uente e vncu#o? es e tipo de etra que mostrar e te!to de v&ncu o" Ta*a9o? es e tama*o de te!to de os v&ncu os" Co#or e vncu#o? es e co or de os v&ncu os, que ayuda a usuario a distinguir entre e te!to norma y os v&ncu os que sirven de en ace a otras pginas" 0ncu#os visita os? es e co or de os v&ncu os visitados, que permite distinguir a usuario si unos v&ncu os ya han sido visitados o no" 0ncu#os e sustituci)n? es e co or de te!to de v&ncu o cuando situamos e ratn encima de v&ncu o" 0ncu#os activos? es e co or de os v&ncu os activos" -sti#o subra:a o? por defecto, cuando tenemos un te!to con un v&ncu o asociado, e te!to aparece su$rayado, con esta opcin podemos e egir otro tipo de esti o por e%emp o para que no apare,ca su$rayado" /n a categor&a -ncabe/a os "C33& encontramos a propiedad+

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

(uente e encabe/a o? permite esta$ ece e tipo de fuente de os enca$e,ados"

/ resto propiedades hacen referencia a esti o cursiva o negrita, as& como a tama*o y co or que queremos ap icar a cada tipo de enca$e,ado" /n a categor&a Ttu#o/Co i!icaci)n encontramos a propiedad+ Ttu#o? es e t&tu o de documento, que aparecer en a $arra de t&tu o de navegador y de a ventana de documento de Dreamweaver /n a categor&a .*agen e rastreo encontramos as propiedades+ .*agen e rastreo? permite esta$ ecer una imagen como fondo de documento, pero que s o se mostrar en a ventana de documento de Dreamweaver, y nunca en un navegador" Dicha imagen se uti i,a como p anti a grfica so$re a que crear e documento" Transparencia? permite esta$ ecer a opacidad de a imagen de rastreo"

-%ercicio? Crear nuevo ocu*ento : *o i!icar sus propie a es

>$%etivo"
Practicar as operaciones que hay que rea i,ar para crear un nuevo documento htm y configurar as propiedades de a pgina"

/%ercicio
1" 'i no tienes a$ierto Dreamweaver, $re o para rea i,ar e e%ercicio"

2. )$re e men. Archivo y e ige a opcin Nuevo, o $ien ha, c ic so$re e $otn
herramientas"

de a $arra de

3. 'e ecciona Pgina en b#anco en Categora" 4. 'e ecciona HTML en Tipo e pgina" 5. 0a, c ic so$re e $otn Crear" 6. ) partir de este momento vamos a rea i,ar todos os e%ercicios en a vista dise*o" 0a, c ic so$re e
$otn Mostrar vista e ise9o " ?" 0a, c ic con e $otn derecho de ratn so$re e documento en $ anco, para a$rir su men. conte!tua "

8. / ige a opcin Propie a es "C33&"

e #a pgina en e men. conte!tua y se ecciona a categor&a Apariencia

9. /n Co#or e te;to+ escri$e #$%$%$%. 10. /n Co#or e !on o? escri$e #F&F&F&" 11. 0a, c ic en a categor&a 0ncu#os C33" 12. /n Co#or e vncu#os? escri$e #'FA0()" 13. /n 0ncu#os visita os? escri$e #F9CA*9" 14. /n 0ncu#os activos? escri$e #FF)900" Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc 15. 0a, c ic en a categor&a Ttu#o/co i!icaci)n" 16. /n Ttu#o, escri$e C"cina" 17. 0a, c ic so$re e $otn Aceptar" 1@" 0a, c ic so$re e $otn +uar ar
de a $arra de herramientas" 5uarda e nom$re men+.htm, dentro de a carpeta mis siti"s c"cina" documento con e

-%ercicio? .nsertar te;to : *o i!icar sus propie a es

>$%etivo
Practicar as operaciones de insertar te!to y modificar sus propiedades"

/%ercicio
1" 'i no tienes a$ierto Dreamweaver, $re o para rea i,ar e e%ercicio"

2. 'i no aparece e pane Archivos, $re o a trav6s de men. 0entana, opcin Archivos" 3. 'e ecciona e sitio C"cina en e pane Archivos" :ecuerda que creamos este sitio en e tema anterior' 4. 0a, do$ e c ic so$re e documento ,+ienes.htm, que aparece en os archivos desp egados en e pane de Archivos" 'e a$rir e documento en Dreamweaver"
A" 'it.a e punto de insercin antes de a primera etra de a primera &nea"

6. /scri$e e te!to -+i.nes s"m"s y pu sa a tec a -nter para sa tar de &nea" 7. 'i no aparece e inspector de propiedades, $re o a trav6s de men. 0entana, opcin Propie a es" 8. 0a, c ic en e te!to -+i.nes s"m"s" 9. /n (or*ato, de inspector e propie a es HTML, e ige -ncabe/a o 2" >$serva como ahora e te!to es
de mayor tama*o"

10. /n a barra e herra*ientas e ocu*ento , ha, c ic so$re a ca%a de te!to Ttu#o, y escri$e -+i.nes
s"m"s" 11" 0a, c ic so$re e $otn +uar ar de a $arra de herramientas"

#reacin de (istas
/s posi$ e insertar te!to a modo de ista" ) su ve,, a ista puede ser numerada o con vi*etas" Para que un te!to que ya ha sido introducido en e documento se convierta en una ista, simp emente hay que se eccionar o y pu sar so$re a opcin de ista correspondiente, ya sea a trav6s de inspector e propie a es, o a trav6s de men. (or*ato" (a ista con vi*etas 2sin ordenar3 se se ecciona a trav6s de $otn 2ordenada3 se se ecciona a trav6s de $otn /%emp o de #ista nu*era a 2ordenada3+ " , mientras que a ista numerada

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

1" Preparar a mochi a 1" 'acar os i$ros de ese d&a 2" 1ntroducir os i$ros de d&a siguiente 2" Ponerme e pi%ama 3" (avarme os dientes B" Poner e despertador /%emp o de #ista con vi9etas 2sin ordenar3+ o o o Perro 5ato )ves o #anario (oro

0mster

Para esta$ ecer istas anidadas dentro de otras como en os e%emp os anteriores, es necesario a*adir una sangr&a en os e ementos de a ista que se desee que pasen a formar parte de a ista anidada" ) trav6s de men. (or*ato, opcin Lista, es posi$ e acceder a as propiedades de a ista se eccionada" 'e de$e se eccionar e te!to de a ista previamente o tener e cursor en a g.n ugar de a ista para que se active este su$men." /n a ventana Propie a es e #ista se puede especificar e tipo de ista 2con n.meros o con vi*etas3, e tipo de n.meros o vi*etas que se uti i,arn 2en a propiedad -sti#o?3, y en e caso de as istas ordenadas, e n.mero por e que comen,ar e recuento"

-%ercicio? Convertir te;to en una #ista

>$%etivo
Practicar as operaciones que hay que rea i,ar para convertir te!to en una ista desordenada"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

/%ercicio
1" 'i no tienes a$ierto Dreamweaver, $re o para rea i,ar e e%ercicio"

2. 'i no aparece e pane Archivos, $re o a trav6s de men. 0entana, opcin Archivos" 3. 'e ecciona e sitio C"cina en e pane Archivos" :ecuerda que creamos este sitio en e tema anterior a partir
de archivos de a carpeta &/ercici"s"

B" 0a, do$ e c ic so$re e documento p"stresemana.htm, que aparece en os archivos desp egados en e pane Archivos"
A" 'e a$rir e documento en Dreamweaver"

6. 'i no aparece e .nspector

opcin Propie a es"

propie a es

HTML, $re o a trav6s de

men. 0entana,

7. 0a, c ic en a primera &nea 0"stre de la semana" 8. /n e desp ega$ e (or*ato, e ige -ncabe/a o 2" 9. 0a, c ic en a segunda &nea )"niat"s a la mall"r,+ina" 10. /n e desp ega$ e (or*ato, e ige -ncabe/a o 5" 11. 'e ecciona as tres &neas de te!to desde (1g de #"niat"s hasta A#+ndante aceite" 12. 0a, c ic so$re e $otn Lista sin or enar
de .nspector e propie a es HTML"

13. 'e ecciona as &neas desde M"ndar l"s #"niat"s hasta e fina " 14. 0a, c ic so$re e $otn de Lista or ena a
de inspector e propie a es"

15. 0a, c ic so$re a $arra de herramientas, para cam$iar e Ttu#o, e introduce 0"stre de la semana" 16. 0a, c ic so$re e $otn +uar ar
pu sa Ctr# $ 3" de a $arra de herramientas" 'i esta $arra no aparece visi$ e,

#aracteres especia es
) veces necesitars introducir caracteres especia es en tus pginas" De$ido a modo editor de 7ise9o de Dreamweaver esta tarea es muy senci a uti i,ando e tec ado, podemos inc uir caracteres como , 2, 3, 4, 5" de forma rpida" 0er" si ,+ieres p"ner d"s espaci"s en #lanc" 6 l"s intr"d+ces p"r teclad", 'ream!eaver n" l"s crear, de#ers intr"d+cirl" d"s veces +tili7and" la "pci8n ,+e vam"s a ver a c"ntin+aci8n " (o mismo ocurrir con os caracteres que no tenemos en e tec ado" 0a, c ic en e men. .nsertar y se ecciona a opcin HTML vers e desp ega$ e de a imagen inferior"

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe

ADOBE DREAMWEAVER CS6 - Cc

' o co oca e cursor de ratn so$re

Caracteres especia#es y vers una ista rpida de os caracteres ms

uti i,ados que no pueden ser introducidos mediante tec ado" Para introducir a guno de estos caracteres en tus te!tos s o se eccina o en a ista y aparecer en a vista e 7ise9o" 'i e carcter que $uscas no se encontrase a &, ha, c ic en se eccionar caracteres entre una ista $astante ms amp ia+

@tro''' y se a$rir una ventana desde donde podrs

Ral Lavado Yupanqui Web Master rlavado@sise.edu.pe