1 D-Web Dream Uni1

CuRso
DE
Dseo DE PctNAs Wee

DREAMWEAVER
UNlono 3
DREAMWEAVER
ESOUEMA DE CONTENIDO
ESQUEMA DE CONTENIDO
Pnrsrrurncrru
1.
DE DREAMWEAVER
Aspecros esrcos or DRenvweavrR

1..l
lntroduccin
trabajo de Dreamweaver 1.3 Personalizacin del espacio de trabajo de Dreamweaver 1.4 Realizacin de tareas bsicas con Dreamweaver
2. CouncuRnctN
2.1
DEL
1.2 Conocer el espacio de
srro y
DE
Los ARcHrvos DEL pRoyEcro
Conocer los sitios de Dreamweaver 2.2 Configuracin de los archivos del proyecto
2.3 Define una caroeta

3. Cnrnn uN DrsEo or pcrr.n
local
de la maoueta de diseo 3.2 Creacin y almacenamiento de una pgina

3.1 Examen
3.3 lnsercin de tablas 3.4 Establecimiento de las propiedades de una tabla 3.5 Insercin de un marcador de posicin de imagen 3.6 Adicin de color a la pgina 4. Aorcrr.r
DE coNTENrDo
us
porruns
4.1 Insercin de imgenes
4.2 4.3 4.4 4.5
Insercin v reoroduccin de un archivo Flash Insercin de Flash video Creacin de vnculos Vista previa de la pgina en un navegador
PRESENTACON DE DREAMWEAVER
,il
PRESENTAoTN DE DREAMWEAvER
En las unidades 3 y 4 tendrs acceso al programa por excelencia cuando se habla
de creacin de pginas web: Dreamweaver. fncontrars ampliamente explicadas

las posibilidades de este programa, como son configurar tu sitio web y disear tu
propia pgina web. Asmlsmo, podrs reforzar los conocimientos que hayas adquirido con el DVD videoiutorial sobre Dreamweaver que acompaa al curso.
En el videotutorial comenzars por ver el entorno de trabajo y las opciones que las barras de herramientas dei programa incluyen para, a continuacin, comenzar a trabajar con elementos de texto y grficos. Pasando por el uso de las tablas en
Drearnweaver y de las etiquetas DIV hasta la administracin y configuracin de los sitios, el videotutorial (que tiene una extensin aproximada de dos horas) termina
con la explicacn de las herramentas de cdigo y la validacin de este. Gracias a Dreamweaver, la complicada sintaxis del lenguaje HTI\,4L desaparece por completo. La agilidad es la nota dominante en el trabajo con Dreamweaver,
ya que contiene todas las posibilidades formales para creaT pginas web y, adems, mostradas de una forma absolutamente accesble.
Si anteriormente insistamos en la importancia de
(hablar) del lenguaje
HT[,,1L,
ahora que lo has conocido en as unidades dedicadas a HTlvlL, sin duda agradecers disponer de un intrprete que se encargue de utilizar dicho lenguaje a la perfeccin y que cumpla tus peticiones al pie de la letra: este ntrprete es
DTeamweaver. Desde el entorno de trabajo alque vas a acceder de inmediato, tendrs la posi-
bilidad de experimentar con todos {os elementos web que ya has vsto anteriormenie, y con os que ahora aprenders a disponer con un simple par de clics. Adems, aprenders tambin a cTear nuevos elementos como, por ejemplo, los
formularios web, que refuerzan la interaccin que habitualmente se busca en las oc inas web.
ASPECTOS BASfCOS DE DREAMWEAVER
ffi nseecros esrcos DE DREAMWEAvER

.*
1.1. INTRODUCCION
Adobe Dreamweaver CS3 es un editor HTN/L profesional para disear, codifcar y desarrollar sitios, pginas y aplcaciones web. Tanto si deseas controlar manualmente el cdigo HTI',/L como si prefieres trabajar en un entorno de edicin visua , Drearnweaver te proporciona tiles herramientas que me.iordrn tu
experiencia de creac
i
n web.
Las funciones de edicin visua de Dreamweaver permiten crear pginas web de
forma rpida, sin escrbir una sola lnea de cdigo. Puedes ver todos los elementos o actvos del sitio y arrastrarlos desde un panel fcil de usar directa' mente hasta un documento. Puedes aglizar el flujo de trabajo de desarrollo mediante 1a creacin y edicin de imgenes en Photoshop o en otra aplicacin de grficos y su posterior importacin drecta a Dreamweaven Dreamweaver tambin contiene herramientas que faci itan la adicin de activos de Flash a las
pg inas web.
Adems de las funciones de arrastrar y soltar que te ayudan a crear paginas

web, Dreamweaver te ofrece un entorno de codificacin con todas las funciones, que ncluye herramientas para la edicin de cdgo (tales como coloreado de c-
digo, terminacin automtica de etiquetas, barra de herramientas para codificacin y contraccin de cdigo) y rnaterial de referencia para lenguajes sobre
hojas de estilos en cascada (CSS) y JavaScript entre otros. La tecnologa Round-
trp HTN/L de Nlacromedia importa los documentos con cdigo manual HTlL sin modif car el formato del cooigo. PosteriormelLe, si o deseas, pueoes formatear el cdigo con el estilo que prefieras.
Adems, Drearnweaver te permite crear aplicaciones web dinmicas basadas
en bases de datos empleando tecnologas de servidor como CFI\,4L, ASP.NEI ASP, JSP y PHP. Si prefieres trabajar con datos en XN4L, Dreamweaver incorpora herramentas que te permiten crear fcilmente pginas XSLI adjuntar archivos Xl'y'L y mostrar datos XN4L en sus pginas. Dreamweaver se puede personalizar totalmente. Puedes crear tus propios ob'
jetos y comandos, rnodficar mtodos abreviados de teclado e incluso escribir cdigo Java Script para ampllar las poslbilidades que ofrece DTeamweaveT con
nuevos comporta
m
ientos, inspectores de propiedades e informes de sitios.
DREAMWEAVER
INSTALACION DE DREAI\4WEAVER
En esta seccin se explica cmo instalar DreamweaveT.
Para instalar Dreamweaver:
. . .
Introduce el CD de Dreamweaver en la unidad de CD-RON/ de tu sistema.

Se iniciar automticamente el programa de instalacin de Dreamweaver.
Sigue las instrucciones que aparecen en pantalla.
- El programa de instalacin te indicar que introduzcas la informa cin necesa ria.
Si el sistema lo solicita, reinicia el sistema.
=*
.2. CONOCER EL ESPACIO DE TRABAJO DE DREAMWEAVER
trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Adems, coloca muchas de las operaciones ms frecuentes en barras de herramientas, para que puedas realizar cambios en los
El espacio de
documentos rpdamente.
Dreamweaver proporciona un diseo integrado en una nica ventana. En el espaclo de trabajo integrado, todas las ventanas y paneles estn integrados en una nica ventana de Ia aplicacin de mayor tamao (Figura l.i).
1'
Bafta insertr.
2 Barrade herramentas
3'Ventana del docunento.

C.ttn dp n^nple<
5- Pa nel de arch vas.
6-
Selectot de etquetas.
7 lnspector de
Figura
1.1. Ve nta na pr nc pal d e Drea
n weave r.
ASPECTOS BSICOS DE DREAMWEAVER
tr
VENTANADEDocUMENTo
La ventana de documento muestra el documento actual. Puedes elegir entre

una de las vistas siguientes:
La
Vista Diseo es un entoTno de diseo para el diseo visual de la pgina,
la
edicin visuaf y el desarrollo rpido de aplcaciones. En esta vista, Dreamweaver muestra una representacin visual del documento completamente editable, similar a la que aparecera en un navegador.
La Vista Cdigo es un entorno de codificacn manual para escribir y editar c-
digo HTML, JavaScript, cdigo de lenguaje de servidor, como por ejemplo PHP o ColdFuson lvlarkup Language (CFN4L), y otros tipos de cdigo.
Es posible ver el mismo documento en las dos vistas, Cdigo y Diseo, en una
so la
ventana de documento.
Cuando la ventana de documento tiene una barra de ttulo, esta muestra el ttulo de la pgina y, entre parntesis, el nombre y la ruta del archivo. Si se han realizado cambos que an no se han guardado, despus del nombre delarchivo
D Tea
mweaveT inc luye un asterisco.
Cuando se maximiza la veniana de documento en el diseo integrado de espacio de trabajo (slo Windows), no aparece la barra de tiiulo; en este caso, el t-
tulo de la pgina y el nombre y la ruta del archivo aparecen en la barra de ttulo de la ventana principai del espacio de trabajo. Adems, cuando una ventana de documento est maximizada, apaTecen fichas en a parte superior de la misma
con los nombres de archivo de todos los documentos abiertos. Para cambiar un documento, haz clic en su ficha.
a
BARRADE HERRAMIENTAS DE DocUMENTo
La barra de herramientas de Documento contiene botones que permiten alternar entre diferentes vistas del documento rpidamente: vista Cdigo, vista Diseo y una vista dividida que muestra las vistas Cdigo y Diseo.
La barra de herramientas contiene tambin algunos comandos y opciones relativos a la visualizacin del documento y a su transferencia entre los sitios localy remoto (Figura 1.2).
r,l
cjdoo
D".dr
Doo
r'to' Da{Blo
s ltr
0f. grr ,' E- -'i- >*- i. {
cdip..b' pdE
Figwa1,2, Barra de herftmentas de Dacumenta.
DREAMWEAVER
En la Barra de
herramientas de documento, aparecen las siguientes opciones:

Ja
l-!f | cdqo il
!_
. i
. .
Mostrar vista de Cdigo, slo muestra la vista Cdigo en c noa || mp lrn
ventana
F-|o lryJ
Mostrar vistas de Cdigo y Diseo, muestra la vista Cdigo en una parte de la ventana de documento y ta vista Diseo en la otra parte de
1a
venta n.
!$E
.
.
Mostrar vista de Diseo, slo muestra la vista Diseo en la ventana

de documento.
t"
ET ET
-r
Ttulo del documento, permite lntroducir un ttulo para el documento, que aparecera en la barra de ttulo del navegador. Si el documento ya tiene titulo. esLe aparecer en dicho campo.
. .
Administracin de archivos, muestra el men emergente Administracin de archivos.
Vista previa/Depurar en explorador, permite ver una vista previa del

documento o depurarlo en un navegador. Se ecclona un navegador en el men emergente.
ET
Actualizar vsta de diseo, actualiza la vista Diseo tras realizar

cambios en la vista Cdigo. Los cambios realizados en la vista Cdigo no aparecern de forma automtica en la vista Diseo hasta que se efecten determinadas acciones, como guardar el archivo o hacer cl;c en este botn.
ET
Ver opciones, permite definir las opciones de las vistas Cdigo y Diseo, y establecer que vista va a apareceT en la parte superior de la ventana. Las opciones del men corresponden a la vista actual: l vista
Diseo, la vista Cdigo o ambas.
tr
ET trtI
. . .
Ayudas vsuales, permite utilizar distintas ayudas vlsuales para el diseo de las nnina5.
Validar formato, permite validar el documento actual o una etiqueta

seleccionada.
Comprobar compatibilidad con navegadores permite comprobar com pat ibilidad con d ist'ntos navegadores.
fa
ASPECTOS BASICOS DE DREAMWEAVER
BARRA DE ESTADO
La barra de estado, situada en la parte inferior de la ventana de documento, pro-
porciona informacin adicionalsobre ei documento que est creando (Figurd l.3).
1
Fiqu1.3. Barra de estdo.
100,.
" 8ll"l16,
tX/ Ls
El selector de etiquetas muestra ia jerarqua de etiquetas que rodea

a la seleccin actual. Haz clic en cualquier etiqueta de la jerarquia para
seleccionar la etiqueta y todo su contenido. Haz clic en <body> para seleccionar todo el cuerpo del documento. Podrs observarlo en las vistas Cdigo y Dvidir.
Para definir los atributos class o d paTa una etiqueta en el selector de
etiquetas, haz clic con el botn secundario del ratn en la etoueta v elge una clase o un lD del men contextuai.
La herramienta Sefeccionar permite desactivar la herramienta Mano y escoger cualquier elemento de {a pglna (en las vistas Diseo y Di-
vidir) para luego editarlo, moverlo o modifjcarlo.

La herramienta Mano permite hacer c lic en el documento y arrastrarlo
en la ventana de documento. Haz clic en la herramienta Seleccionar para desactivar la herramienta Mano. La herramenta Zoom y el men emergente Establecer nivel de aumento permiten establecer el nivel de amplacin del documento.
El men emergente Tamao de ventana (que aparece en las vistas Di-
EI@
seo y Dividir) permite cambiar el tamao de la ventana de documento
para que adopte o bien dimensiones predeterminadas o bien dimensiones personalizadas. A la derecha del men emergente, Tamao de ventana muestra la estimacin del tamao deldocumento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como imgenes y otros
archivos mu ltlmedia.
DREAMWEAVER
ffi
BARRAINSERTAR
La barra Insertar contiene botones para ia creacn e insercin de diversos tipos de objetos, como tablas, capas e imagenes. A1 pasar el puntero sobTe un
botn, aparece una descripcin de la herramienta con el nombTe del botn. Los botones estn organizados en categoras, a las que puedes cambiar en la parte izquierda de la barra Insertar (Figura 1.4). 5i el documento aciual con-
tiene cdigo de servidor, como los documentos ASP o CFl"4L, aparecen tambin otras categoras. Cuando se inicia Dreamweaver, se abre la ltma categora con
la oue has trabaiado.
.-
"r E:<,d- 7e t. e.
ot.no
tomdrno,
,FJ.;;
Figura 1.4. Baa Insertdr.
Algunas categoras tienen botones con mens emergentes. Al selecconar una opcin de un men emergente, dicha opcin se convierte en la accin predeterminada del botn. Por ejemplo, si seleccionas Marcador de posicin de imagen en el men emergente del botn lmagen, la siguiente vez que hagas clc en
el botn lmagen, DreamweaveT insertar un marcador de posicin de imagen. Siempre que selecciones una nueva opcin del men emergente, cambiar la
accin predeterm
ina da
del botn.
La barra Insertar est orqanizada en las categoras siguientes: La categora Comn, permite crear e insertar los objetos que se utili-
zan con ms frecuencia, como las imgenes y las tablas.
\ I !l-
Comn Direo Fomulaos Oator Spry fxto
E E - - tr 7 L;
t,-A-
r!J-
La categora Diseo, permite insertar tablas, etiquetas div, marcos y widgets de Spry. Tambin puedes eleg ir entre as tres vistas de las tablas: Estndar (valor predeterminado), y Tablas expandidas.
lt.thr cos. otr.o Fomurlror OrloJ sory T.no
Fvotot
lffi'".Fida E
I-:1
:i[..1.-
;'
10
La categora Formularios, contiene botones que permiten crear for-
mularios e nsertar elementos de formulario, incluidos widoets de valdacn de SDrv.
t ht{rbr Co 0.o omular.J Dltoi Srry t.rio
E-
e :i ; " 'l- ,,i
Frrorito
:.:,
t1::
i'
-l yr li'.i
La categora Datos permite insertar objetos de los datos de Spry y otros elementos dinmicos, por e.jemplo, juegos de registros, regiones repetidas, adems de grabar formularios de nsercion y actualizacion.
La categora Spry contiene los botones necesarios para crear pginas
de Spry, includos objetos de datos y widgets de Spry. Los wjdgets de

SprV son una novedad de ia versin CS3 de Dreamweaver. Se trata de
componentes comunes de interfaz de usuarjo, (tablas, listas, elementos

de formularios con validacin, etc.) listos para ser utilizados V aadidos a tus pginas web, aunque tambin es posible personalizarlos. v |,rsarlar Comn Oirio Frmularo5 Datos spry fcxto
Favorito!
La categora Texto, permite insertar diversas eiiquetas de formato de
texto y listas, como b, em, p,

t nst. A f
hl y ul.
Tdo Feoinot
Com Oi5.o romutarios Dator Spry
S en !t I""i !r hl h2 h3 ul ol li
dl dt dd
.b.
3c E,
La categora Favoritos, te permite agrupar y organizar los botones de la barra Insertar que utilizas con ms frecuencia en un lugar comn.
r!
v ttertr (omn Dirao Formutaro5 Dto5 Spry fxto

i-lg dc con elbotin derdro pra personalizr los objtos fuvorto!.
Favoritot
Las categoras de cdigo de servidor, slo estn disponibles para las
pginas que empiean un lenguaje de servidor determinado, como ASq

11
DREAMWEAVER
ASPNET, CFl,/L Basic, CFML Flow, CFN4L Advanced, JSP
PHP. Cada
una de ests categorias contiene objetos de cdigo de servidor que pueden inserrarse en la vista Cdigo.
BARRA HERRAMTENTAS DE coDtFtcACtN
La barra de herramientas de Codificacin contiene botones que te perriten
realizar numerosas operaciones de codficacin estndar, como ampliar y contraer las selecciones de cdigo, resaltar cdigo no vlido, insertar o eliminar comentarios, aplicar sangra al cdigo e insertar fragmentos de cdigo utlizados
recientemente. La barra de herramlentas de Codificacin slo est visible en la vsta Cdigo y aparece vertica mente en el lado izquierdo de la ventana de
documento.
No puedes desacoplar ni mover la barra de herramientas de Codificacin, pero
spuedes ocu lta rla.
I
El
INSPECTOR DE PROPIEDADES
inspector de propiedades permite examinar y editar las propiedades ms comunes de{ elemento de pgina seleccionado actualmente, como texto o un ob-
jeto
inse
rtado (Fgura 1.5).
r.*t" 91_
F!a!
F!reerner.rtr
re"t n"o-" - r E:! -
- it t31===-vih.o = i= E s i=]
1"sie.';;et;._
-qJ
Dt
Figura 1.5. /rspe.to de prcpedades.
distinto en funcin del elemento seleccionado. Por ejemplo, sl selecconas una imagen en la pgina, el inspector
de propiedades cambiar para mostrar las propiedades de la imagen (como la
El contenido del inspector de propiedades es
ruta del archivo de imagen, el ancho y alto de la imagen, el borde que la rodea,
etc. ).
El inspector de propiedades se encuentra en la parte inferior del espacio de
trabajo de forma predeterminada, pero puedes colocarlo en la parte superior si lo deseas. Tambin puedes convertirlo en un panef flotante en el espacio de
tra bajo.
12
&
PANELARCHIVOS
El panel Archivos se utiliza para ver V administrar los archivos del sitio de Dreamweaver (Figura 1.6).
.l q:s*,f{1-
:l
adm,Rst'
lboe
- -j cfe_to^$end t J tor'phd-fi16 + J + j 'i _ :

feôrk5-*sE
nshc@tent
caf-to,ssnd-...
nsh-fn.
s^f
msuss
$ole_tut,
ht
-r
Fch: 1604,,:008
Ace.dl
l:*-
eq!,,.,
igwa 1.6,
Pa n
el d e a rc h i vas.
Al visualizar sitios, archivos o carpetas en el panel Archivos, puedes cambiar el iamao del rea de visualizacin v expandir o contraer el Danel Archivos. Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto o el servdor de prueba como una lista de archjvos. Cuando se expande, muestra el stio local, adems del sitio remoto o el servidor de prueba. El panel Archivos tambin puede mostrar un mapa visual del stio local. Para sitios de Dreamweaver, tambin puedes personaiizar el panel Archivos cambiando la vista (sitjo local o sitio remoto) que aparece de forma predeterminada en el panel contraido.
&
PANEL ESTILOS cSS
El panel Estlos CSS con el modo Actual te permite supervisar las reglas y propedades CSS que afectan a un elemento de pgina actualmente seleccionado; y con el modo Todo, las reglas y propiedades que afectan a todo un docu-
mento. Un botn situado en la parte superor del panel Estilos CSS te permite carnbiar entre estos dos modos. El panel Estilos CSS tambin te permite modifcar propiedades CSS tanto en modo Todo como en modo Actual. 13
DREAMWEAVER
Puedes cambar el tamao de cualquiera de los paneles arrastrando los bordes

Puedes acoplar los grupos de panees a ambos lados del espaco de ttabajo en cualquerc de los
que separan Un panel de otro. modo Actual, el panel Estilos CSS muestra tTes secciones: un resumen oel panel Seleccin que muestra las propiedades de CSS de la seleccin actual del documento, un panel Reglas que muestra la ubicacin de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en funcin de a seleccin) y un panel Propiedades que te permlte editar las propiedades CSS
al definr reglas para la seleccn (Figura '|.7).
[n
dse$ del
espacio de
tabajo.
Ertilor
CSs
roa"
iTiil
d. l.
i!
*k
.n
brdgorrd<olor 100000
d.
'b&rqu'd-.or.r'
dv r
Dd,.9,osno<oior r h df'oo en l /9,.
P9iddc d. 'body'
bds.oid<d.r l.oooooo
I,irr
nten;
Fiq1.7, Panel de estlas
CSS en
modo Actuat.
En modo Todo, el panel Estifos CSS muestra tres secciones: un panel Todas las reglas arriba y un panel Propiedades abajo. El panel Todas las reglas mues-
tra una lista de reglas defnidas en el documento actual, asi como las reglas definidas en las hojas de estilo adjuntas al documento aciual. El panel propiedades te permite editar propiedades CSS para cualquer regla seleccionada en el panel
Todas las reglas.
Todos los cambios que reallces en el panel propiedades se aplican de forma inmediata; de este modo, puedes previsualzar el trabajo a medda que lo vavas lle-
van00 a caDo.
1.3. PERSONALIZACIN DEL ESPACIO DE

TRABAJO DE DREAMWEAVER
Puedes escoger el diseo del espacio de trabajo del diseador (Diseo) o del pro-
gramador (Cdigo) o de pantalla doble (Dividir). La primera vez que se inicia Dreamweaver, un cuadro de dilogo te permite elegir un diseo para el espacio de trabajo. Puedes pasar de un espacjo de trabajo a otro en cualquier momento.
14
T
.
ELEGIR UN DISEo DEL ESPAoIo DE TRABAJo LA PRIMERA VEZ QUE SE INICIA DREAMWEAVER
Selecciona uno de los siguientes diseos del espacio de trabajo:
Diseador es un espacio de trabajo integrado que utiliza N4Dl (lnterfaz para Mltiples Documentos, Multiple Document lnterface) en el que todas las ventanas de documentos y todos los paneles estn integrados en una ventana de aplicacin ms grande, con los grupos de panefes apilados a fa derecha.
Programador es el mismo espacio de trabajo integrado, pero con los grupos de paneles apilados a la izquierda; es un diseo similar al que utiliza Adobe Homesite y Adobe ColdFusion Studio, en el que las ventanas de documentos muestran de forma predeterminada la vsta de
cdgo.
Haz clic en Aceptar.
I .
PARA oAMBIAR A UN ESPACIO DE TRABAJo DISTINTo DEL OUE
HAS ELEGIDO
Selecciona Ventana > Diseo del espacio de trabajo y selecciona el di<an lpl a<n.i da rr^hî ||a nrafiara<
Adems de selecconar Diseador y Programador, puedes selecclonar Pantalla
doble. S dispones de un monitor secundario, la opcin Pantalla doble coloca todos los paneles en el monitor y conserva la ventana de documento en el mo-
nitor Drincoa
l.
COMO OCULTAR Y IVOSTRAR LA

PANTALLA DE BIENVENIDA
La pantalla de blenvenida de Dreamweaver (Figura 1.8) aparece al iniciar Dreamweaver y sempre que no se tenga abierto nngn documento.
Puedes optar por ocultar la pantalla de bienvenda y volver a mostrarla posteriormente. Cuando
**.
la pantalla de bienvenida est oculta y no se tie-
nen documentos abiertos, la ventana de documento est en blanco.
Figra1.8. Pqna de benvenida de Dreamweaver.
15
DREAMWEAVER
PARA OCULTAR LA PANTALLA DE BIENVENIDA
Selecciona en la pantalla de bienvenida la casilla de verificacin No volver a
mostrar. La pantalla de bienvenida no aparecer al inicia r Dreamweaver ni despus de abrir y cerrar un documento (Figura l.9).
a.talizrih
sqid.|
D6.rql drt. atd?d. qr d (m.ndo
Fiq'.)ra1.9. Debes actvar Ia caslla de verfcacn para que no se vuelv a mostrct la pantalla de benvenda.
PARA IVOSTRAR LA PANTALLA DE BIENVENIDA
Selecciona Edicin > Preferencias (Windows) o Deamweaver > Pre-
ferencias (N4acintosh).
El cuadro de dilogo Preferencias aparece y muestra la categora de preferen-
cias General (Figura
1.10).
Selecciona la casiila de verificacin Mostrar pantalla de bienvenida.
1r
ave d btr d'i&
de sto
h<ti
A.hFlza iE!6 OpcE

de
@!* *di!s: ll,|!rt'. -l

e.tar obFtos
e&it
: rJ
!E de d.le brF cara p6b sr{. lr el 6rdd I - Psnnn ftjde. espdf .o!|G
J:
'il Pflfl'l r..d 6
6br
d.o
al
- Lnid <5E> y
<s> 6 .!d
d
d 
y 
J utl,B
Css en
h{
ebq6e Frft -
:J Advdn d
ctrt*:
o rJsrettleb
d
d .eqiffi edraus ete qlEts o <h 1>-<h6> <e{> llsaettq@ta <6te>
pe5
&rl@ xirc
fi6ionli
50
Dn*dtosfi:
@__:]
FigwallO, Cuadro
de dlaga Prcferccias.
16
1.4. REALIZACIN DE TAREAS BSICAS CON

DREAMWEAVER
En esta seccin se explica cmo realizar tareas bsicas como
creal abrir y guar-
dar arch ivos.

En Dreamweaver, puedes trabajar con distntos tipos de archivo. El principaf tipo
de archvo de trabajo es el archivo HTML. Los archivos HTN/L (o archivos en

Lenguaje de formato de hipertexto) incluyen un lenguaje basado en etiquetas
que es el responsabie de mostrar la pgina web a travs del navegador. Puedes
guardar archivos HTML con las extensiones ".html" o ".htm". Dreamweaver, por defecto, guarda los archivos con la extensjn ".hml".
En Dreamweaver tambin se trabaja con los siguientes tipos de archvo:
CSS, o archvos de hojas de estilos en cascada, que tienen la exten-
n '.css". Se uril.zan oara dar formato al conrenido HTNIL v nar dpfinir la stuacn de diversos elementos de la Doina.
s
GIF (Formato de intercambio de grficos), que tienen la extensin ".9f".ll f ormato GIF es un formato grf ico popu la r en la Web para comics, logotipos, grficos con zonas transparentes y animacones. Los
GIF tenen u'r rrximo de 256 colores.
JPEG (Grupo conjunto de expertos fotogrfico, el nombre de la organizacion oue cre el 'ormato), que tienel la extensin "./pq" y suelen ser fotografas o imgenes ricas en color. El formato JPEG suele ser utilizado para fotografas digitales o escaneadas, imgenes con texturas, imgenes con gradaciones de color y cualquier imagen que nece-
site ms de 256 colores.
XML (Lenguaje de formato ampliable), son los que tienen la extensin ".xml". Estos archivos contienen datos en su forma original que se pueden formatear utilizando XSL (Lenguaje de hojas de estilo amplia ble).
XSL (Lenguaje de hojas de estlo ampliable), que tenen la extensin ".xslt" y se utilizan para dar estilo a Ios datos en formato XN,4L nue se quieran visualizar en una pgina web.
CFML (Lenguaje de formato ColdFusion), que tienen la extensin ".cfm". Se utilizan para procesr pgins dinTicas.
17
DREAMWEAVER
ASPX o archivos ASPNEI que tienen la extensin ".aspx". Se utillzan para procesa r pginas dinmicas. PHP (Procesador de hipertexto), que iienen la extensin ".php". Se utilzan para procesar pginas dinmicas.
ffi
CREAR NUEVOS ARoHIVoS coN DREAMWEAVER
En esta seccin se explica cmo crear un nuevo documento en blanco con

DTeamweaveL
Tambin puedes crear nuevos documentos con Dreamweaver basndote en un
archivo de diseo de DreamweaveT o en una plantilla ya existente.

o PARA CREAR UN DOCUI\4ENTO NUEVO EN BLANCO
Se
lecciona Archivo> Nuevo.
Aparecer el cuadro de dilogo Nuevo documento (Figura
1.11).
-) ec*.-u* $ $ {
er-rr"*uw"
raoa.or*a.
1@utr J, eda, enb.d. 1 co !tr ott, c..rda 1 coluffi ffot.t, @'ad, er6b colu.r elisb63, br ltr. da c.lu.5 ern6t, br laterl d, 2 coumn.s eLeb., bar lte.ai zq 2 .ol@.5 elii'b6e, bra l6te.al ?q 6l@ar njr, bar Fl a.dt
2
& "***o"
ou.
bra lalera deredl lumru. F , bara l.ter 'zAue( 2 o !ne )e, br ltf !ft 'rq 2 coLnr otnts, br lat ra d
2
@lums l5,
2 @ 2 2 2 2 2
!ffir olanles, b3r ltral de colur fl.tates, bar lt ,c 'l @lua3 iotir, br bre.al r. @lunt hr dt, br ltrl d,
@u..r hnd.t, b.r. later! der .dumae hbnd!, br l &rl rqL
'*
-
o"o**"
@..
i.oq4l
Au^trrd,vocss;
Ijt!11: , .l1fl!t l
Figur1.11. CLtddro dc d,/OqO
\.le\
o docL--ler Io.
.
18
Plantilla en blanco. A continuacin, en la lista central, selecciona el tipo de pgina

En la lista de la izquierda, selecciona Pgina en blanco o oue deseas crear v el diseo.
Por ejemplo, selecciona HTML para cTear un documento HTN4L o ellge Pgna en blanco y Coldfusion para crear un documento ColdFus
ion, etc.
l-rri"-:
Figwa
r.r.i"jr+-
aq- iilq-
1.12.
Seleccn de categorias de pqnas y diseos.
Haz clic en el botn Crear.

El documento nuevo se abrir en la ventana del documento.
. tr
Guarda el documento.
GUARDAR AROHIVOS
coN DREAMWEAVER
Al crear un documento nuevo, es necesario guardarlo.

o PARA GUARDAR UN DOCUIVENTO NUEVO
. . .
Selecciona Archivo
>
Guardar.
En ef cuadro de dilogo que aparece a continuacin (Figura 1.13), vete
hasta la carpeta en la que deseas guardar el archvo.
fn
el cuadro de texto Nombre, introduce un nombre para el archivo.
Evita utilizar espacos y caracteres especiales en los nombres de archivos y carpetas. Asimismo, no empieces los nombres de los archivos con nmeros. En con-
creto, no utllices caracteres especiales (como , q o Y) ni signos de puntuacin (como dos puntos, barras lnclinadas o puntos) en los nombres de archivos que
desees colocar en un servidor remoto; muchos servidores cambian estos carac-
19
DREAMWEAVER
teres durante la carga, lo que provoca que se rompan los vncuios exlstentes con los a rchivos.
Haz clic en Guardar.
Figwa
1.13.
Guardar n atahva.
APERTURA DE ARCHIVoS EN DREAMWEAVER
En Dreamweaver, se puede abrir y editar documentos con gran facilidad. Para
brir un archivo:
Selecciona Archivo
>
. .
Abrir.
Abrir, sefecciona el archivo y haz clc en Abrir.
En el cuadro de dilogo
Fiqura1,14. Abrr un dacumento.
20
CONFIGURACION DEL SITIO Y DE LOS ARCHIVOS DEL PROYECTO
corurrcunncrr' DEL smo "f Y DE LOS ARCHIVOS DEL PROYECTO

En Dreamweaver un sitio normalmente consta de dos partes: un conjunto de archivos situados en un equipo focal (el sitio local) y una ubicacin en un seTVidor web remoto donde cargar los archivos cuando est preparado para poner'
los a disposicin pblica (el sitio remoto). El panel
Archivos de Dreamweaver
se
utiliza para administrar los archivos del sitio. mtodo ms comn para crear un sitio web utilizando Dreamweaver consiste en cTear y editar pginas en el disco local y, a continuacin, cargar copias de
El
esas pginas en un servldor web remoto para que puedan ser vistas a travs de ia Web.
'-2.1.
CONOCE LOS SITIOS DE DREAMWEAVER
En Dreamweaver ei trmino sitlo se emplea para referirse tanto a un sitio web
como a una ubicacin de almacenamiento local de los documentos que pertenecen a un sitio web. Esto ltimo es lo que tienes que estabiecer antes de comenzaT
a crear tu sitio web. Un sitio de Dreamweaver organiza todos
los
documentos asociados a su sitio web y te permite controlaT y mantener vnculos, administrar y compartir archivos, y
vid or web.
transferir los archivos del sito a un ser-
Un sitio de DrearnweaveT consta de un mximo de tres partes, segn el entorno
'nformatico y el tipo de slio web que se desar.olle:
La carpeta local, el directorio de trabajo. En Dreamweaver esta carpeta se conoce como sltio local. La carpeta localsuele ser una carpeta
situada en tu disco duro.
En la carpeta remota, se almacenan los archivos, segn el entorno, para fines de prueba, produccin, colaboracin y publicacin. En DreamweaveT esta carpeta se conoce como sitlo remoto. La carpeta re-
mota est situada en el equipo donde se ejecuta el servidor web.
El
equipo donde reside el servidor web suele ser, aunque no siempre, el sistema que permlte que tu sitio web est disponible pblicamente en
la Web.
21
DREAMWEAVER
La carpeta para pginas dinmicas es la carpeta del servidor de prueba; es decir, la carpeta donde Dreamweaver procesa las pginas dlnmicas. Esta carpeta suele coincidir con la carpeta remota. Slo lendrs que preocuparte por esta carpetd si desarrollas una aplicac n web.
Puedes configurar un sitio de Dreamweaver utilizando el asistente para la Defi-
nicin del siiio, que te orientar paso a paso a travs def proceso de configura-
cin, o utilizando las opciones avanzadas de Definicin del sitlo, que te

permitirn conflgurar ind ividua lmente, segn sea necesario, las carpetas local, remota v de orue bas.
**2.2.
CONFIGURACION DE LOS ARCHIVOS DEL PROYECTO
Cuando crees un sitio local, puedes colocar los archivos exlstentes (imgenes u
otro tipo de contenido) en la carpeta raz del sitio ocal (la carpeta prlncipal del sitio). Posteriormente, cuando ests llsto para aadir contenido a las pginas, tendrs los archivos disponibles y listos para ser utilizados.
Los archvos incluidos con DTeamweaver contienen ficheros para ef sitio Web que crears. El primer paso en la creacin del sitio es copiar los archivos de muestra de la carpeia de aplicacin de Dreamweaver en la carpeta adecuada del disco duro.
Crea una nueva carpeta llamada local_sites en tu disco duro. Por eiemnlo. cral en cst ubicacin:
C:\Usuario\tu nombre de usuario\Documentos\local_sites
Localiza la carpeta cafe_townsend en la carpeta de la aplicacin de

DreamweaveT en el disco duro.
Si has instalado DTeamweaveT en su ubicacin predeterminada, la ruta
us ro Lorpro
C:\Archivos de programa\Adobe\Adobe DreamweaverCs3\
Sa m ple_f
iles\caf e_townsend
.
22
Copia la carpeta cafe_townsend en la carpeta local_sites.
CONFIGURACIN DEL SITIO Y DE LOS ARCHIVOS DEL PROYECTO
La carpeta cafe_townsend es la carpeta que vas a utilizar como carpeta raz (carpeta principal) para tu sito de Dreamweaver (Figura 2.1).
Adob., Alob.Dd|l:ucsl
9pk-ri,6
o,._to*r.d t
Archivo dkin
v.' H6i.nt5 At!d! fpo

To
F ,.'.-,
*;
r.,' ,:"
Hp,PA!,ruoN (cJ
archrr'o5
d. pfogr
nih !ii.o
Doc!ro
l.
30 xB
t0$ deho..
?
rG
tubd7.0
Adob3d9r Adob.8.id9. C5l
oocun.dodra..
6k3 xB
4doboYlr.C.nt.rc5l Adob.Drc{.rvrCSl
(onr9uano
IMRrrc.r
5rple_tilr Eend'9
Adob.Ett!on Mn9.r adob. tah c5l

Adob.
tlrh
C53 vid?o
E.c
adob!H.rpv,ed
AdobPholchop
Ct
Adob Phoror6p CSt
Fiqura2,1, Cantenida de / carpet' cafe_townsend.
ffi
CARPETAS LoCALES Y oARPETAS REMoTAS "RAz,,
"raiz" local del sitio Dreamweaver sue{e ser la carpeta principal o la carpeta de nivel superior de tu sltio web. Suele correspondeTse con una carpeta dntica situada en el stio remoto (servidor web). La carpeta raiz tambin suele definir la primera parte de la URL del sitio web, despus del nombre de dominio. Por ejemplo, si tu carpeta raiz localse llama misitioweb, y tienes una carpeta raz idntica en el sitio remoto, la URL de tu sto web
La crpeta
se
r algo como htt p://www.ya hoo.co m/m isit iowe b.
En algunos casos, la carpeta raz local podra no tener un nombre exacto equi-
valente en el sitio remoto. Por ejemplo, si eres propetario del dominio www.misitioweb.com, con un directorio raz remoto llamado publlc_html, tu carpeta raz local podra seguir llamndose misltioweb. Los archlvos en los directorios local
y remoto raz seran idnticos; lo nico diferente sera los nombres de las carpetas (public html en el sitio remoto y misitioweb en el equipo local).
23
DREAMWEAVER
.-2.3.
DEFINE UNA CARPETA LOCAL
Debes definir una carpeta local de Dreamweaver para cada sitio web nuevo que
crees. La carpeta local es la carpeta utilizada para almacenar copias de trabajo de los archivos del sitio en ei disco duro. Si no defines una carpeta local, algunas funclones de Dreamweaver podran no funcionar correctamente. Adems, al definir una carpeta local podrs tambin administrar archivos y transferlrlos entre el dsco local y el servidor web utilizando distintos mtodos
de tra n sferencia de archivos.
Ahora vas a definir la carpeta cafe_townsend que copiaste en tu carpeta local
llamada local stes:
lnicia Dreamweaver y selecciona
Sitio > Administrar sitios.

Aparece el cuadro de dilogo Administrar sitios (Figura 2.2 ).
Haz clic en el botn Nuevo y se-
lecciona Sitio.
Aparecer el cuadro de dilogo Definicin del sitio.
Flgura 2.2. Cuadro de d/jloqo Administ.ar sitios.
Si aparece el asistente (ficha Bsicas), haz clic en la ficha Avanzadas
y selecciona Datos locales en fa lista Categora (que debe ser la op' cin p redeterm inada) (Figura 2.3).
Figura2.3. Cuadro de dlloqo Definicin de sitio.
24
CONFIGURACION DEL SITIO Y DE LOS ARCHIVOS DEL PROYECTO
En el cuadro de texto Nombre del como nombre del sitio.
sitio, introduce Cafe Townsend
En el cuadro de texto Carpeta raz local, especifica la carpeta cafe_townsend que copiaste en la carpeta local_sites en el apartado
anteTror.
Puedes hacer clic en el icono de la carpeta para examinar y seleccionar

Ia carpeta, o
introducir una ruta en el cuadro de texto Carpeta raz local.
predeterminada de imgenes, especifica la carpeta de imgenes que ya existe en la carpeta cafe_townsend.

En el cuadro de texto Carpeta
Puedes hacer clc en el icono de la carpeta para examinar y seleccionar la carpeta, o introducir una TUta en el cuadro de texto Carpeta pre-
determinada de im9enes.
El cuadro de dilogo Definicin de puedes ver en la figura 2.4.
sitio debe parecerse ahora ai que
Ctegon'
oojltaon
No0bre detstor Carpta r localr Crpta predeterminda deirngees:
Vhculos relativos Drecodn
ar 0 Doqrmento
Rai delstio
HrrPr htbr//
Est di.ecdn se utjli pr vcuos rell'vos l stio y pr que Verificdor de vinojos detecte los vinsrlos HrrP refe.idos su
Vo,os con dst'nc'on
ene
mWsoias y mnsculasr
IUsr
verifcn (adt
de vinojos con distinn
ele
myusojs y mingculs
Cdl
a activr
la nfo.macin de rivos y adtvos del sit'o. Esto celer ls func'ones pnel de de Activos, adminis8aon de vinoJlos y llap delglto.
g c mntiene
Fiqra 2.4. Defnicn del sto personalizado.
. A^7 .l. n A.ntr

Aparecer e{ cuadro de dilogo Administrar sitios, en el que se muestra el nuevo sitio.
25
DREAMWEAVER
.
El
Haz clic en Listo para cerrar el cuadro de dilogo Administrar sitios.
panel Archivos mostrar ahora la nueva carpeta raz local correspondiente al

(
sltio actual
Fig
ura 2.5).
Figur 2.5. PnelArchivas con elnuevo sto.
Archivos acta como administrador de archivos, ya que permite copiar, pegar, eliminar, mover y abrir archivos como si se tratara del escritorio del PC.
Ya has definido una carpeta raz local para el siiio. La carpeta raz locales el punto
La lista de archivos del panel
de tu equipo local donde se almacenan las copias de traba.io de tus pginas web.
Ms adelante, si quleres publicar tus pginas y hacerlas pblicas, debers definir
una carpeta remota, es decir, un lugar en un equipo remoto donde resida un ser-
vidor web y donde se almacenen las copias publicadas de tus archivos locales.
26
CREAR UN DISEO DE PGINA
,fl
cnenn un oseo o pcrrun
Un diseo de pgina determina cmo va a aparecer la pgina en ef navegado
mostrando, por ejemplo, la situacin de los mens, las imgenes, y el contenido de Adobe Ffash. si lo hav.
Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseo de texto y grficos en una pgina HTML. Puedes utlzar las tablas para cTear tu propio dlseo de un modo rpido y basta
nte
se n c
illo.
,,*
3,1. EXAMEN DE LA MAQUETA DE DISEO
Lo habitual no es empezaT a construir un sitio web iniciando Dreamweaver y creando pginas direciamente. Los primeros pasos para crear un stio web debes darlos sobre una hoja de papel, o en una aplicacin de edicin grfica como Photoshop. Los diseadores grficos suelen crear un boceto artstico general del sitio web (tambin conocido como (maqueta>), con el fin de mostrrselo al cliente y asegurarse de que la idea inicial para el sitio web recibe la nr^h:.i^n .lol .lionfo
Una maqueia est formada por una cantidad indeterminada de elementos de pginas que el cliente ha solicitado para su sitio web. Por ejemplo, el clente podra haber dlcho: <<quiero un logotipo en la parte superior de la paglna, un zona de navegacin que enlace con estas otras pginas, una seccin para una tienda
parte donde pueda insertar videoclips). A partir de esto, e1 d ise ador comienza a planificar el diseo de la pgina y realiza bocetos de pginas de
on line y una
muestra que cumplen los requisitos del cliente.
''*
3.2. CREACIN Y ALMACENAM IENTO DE UNA PGINA NUEVA
Despus de crear un sitio nuevo, ya puedes empezar a crear pginas web. Co-
mienza creando una pgina nueva y guardndola en la carpeta raz local de tu
sitio web.
l',1s
adelante esta pgina ser la pgina de inicio.
Si no has creado una carpeta raz local llamada cafe_townsend, debers ha-
cerlo antes de continuar. Para instrucciones, consulta el captulo anterior Confguracin del sito y de los archvos del proyecto.
27
DREAMWEAVER
En Dreamweaver, Selecciona Archvo
>
Nuevo.
En la ficha General def cuadro de dlogo Nuevo documento selecciona Pgina en blanco, selecciona HTML en la lsta Tipo de pgina,
el diseo que prefieras en la lista Diseo y haz clic en Crear.
Selecciona Archvo
>
Guardar como.
En el cuadro de dilogo Guardar como, busca, seleccona y abre la car-
peta cafe_townsend que definiste como carpeta raz local del sitio.
Esta carpeta debera haber sido creada en el Captulo 2, Configuracin
del sto y de los archvos del proyecfo, dentro de una carpeta flamada
f
ocal_sites (pqina 22).
Escribe index.html en el cuadro de texto Nombre de archivo y haz clic en Guardar (Fiqura 3.1).
g Gu.dr coo
iT:
! cr-ros6r n.-* F.h mod.,. Tjpo *

dt
- OIJFTm.o ttiqu.ts
Ec.itorio
r
t$
L.bry
hl
Er m.nu
g
*
Equipo
Uone. -
Tfo:@
'
Te-r.-]
fc"""d.-l
|*4a$l
!?!.+,ii:qi JjrLEF.ltEE;EiE -
Ftgura 3.1. Cuadro de dloero Guafdar como.
El nombre de archivo aparecer ahora en la barra de
titulo en la parte
superior de la ventana de la aplicacln (Figura 3.2).
lu",t@
2A
Et . i
e tr-6
Flqttra3.2. Elnombre del documenta aparece en la barra delttulo.
En el cuadro de texto
Ttulo del documento en la 0arte suDerior dei
nuevo documento, escribe Cafe Townsend.

Este es el ttulo de la pgina (distinto al nombre de archivo). Los vtst-
tantes del sitio vern este ttulo en la barra del ttulo del naveqador cuando accedan a ella a travs de su naveqador web.
Selecciona Archivo
>
Guardar para guardar la pgina.
3.3. INSERCION DE TABLAS
Las tablas constituyen una herramlenta muy eficaz para presentar datos de tabla
y establecer el diseo de texto y grficos en una pgina HT\lL. Una iabla consta
de una o varias filas, cada una de las cuales consta, a su vez,0e una o mds cetdas. Al crear filas mltiples con ceLdas mltiples, las celdas forman columnas. Tcnicamente, una celda es una divisin dentro de una fia horizontal, y una columna es una acumulacn vertical de estas divislones de celdas.
DreamweaveT muestra el ancho de la tabla y de cada columna en el Selector de
tablas (marcado con lneas verdes) cuando se selecciona una tabla o cuando
punto de insercin est en ella (Figura 3.3).
el
Fiqura 3.3, Ejemplo de tabla.
Junto a los anchos se encuentTan flechas para el men de encabezado de la tabla y los mens de encabezado de las columnas. Puedes utilizar los mens para acceder rpidamente a determinados comandos relaconados con tablas. Tambin puedes activar o desactivar la vista de los anchos y los mens selec" cionando Ver > Ayudas visuales > Anchos de tabla.
Las tablas pueden tener bordes, y las celdas de una tabla pueden tener relleno,
espaciado o ambos.
fl
relleno de celda determina el nmero de pxeles entre
contenido de una celda y los lmites de la misma.
tl
espdcio entre celdas determina el nmero de pxeles entre celdas coniiguas
de una ta bla.
29
DREAMWEAVER
Si no se especifican de forma explcta los valores de relleno y espaciado de celda,
la mayora de los navegadores mostrar la tabla como si el valor de relleno de celda fuera 1y el de espaciado de celda fuera 2. Si quieres asegurarse de que los navegadores muestran la tabla sin relleno ni espaciado, establece 0 como valor
de ambos atributos. A contlnuacin, vamos a introducir una tabla que incluir texto, grficos y un ar-
chivo de Adobe Flash:
Haz clic una vez en la pgina para colocar el punto de insercin en la
esquina superior lzquierda de la pgina (Figura 3.4).
Fiqura 3.4. Punto de nsercn calocado.
Selecciona Insertar
> Tabla.
En el cuadro de dilogo Tabla, rellena los campos con los valores que
aoarecen en la fioura 3.5.
ldrdo
de bbla
3
Ar|o de bbll ?oo
&oor dd bord.l
..
Co&nas:
l*d"rl
Pi,(.hs
Rdleo
de.dl
lqq
Erpdo edbe eHsr AKbezrro
A.c.s*drd
Alcar
Exbi
Resrnen:
t A..-l fc-'.d.
t tgula 3.5. cuaoro oe oEtoqo taDta.
-l
.
30
CREAR UN DI5EO DE PGINA
Aparece en tu documento una tabla con tres fjas y una columna. La tabla tiene 700 pxeles de ancho, sin bordes, relleno de celda ni espacio entre celdas (Figura 3.6).
Figura3.6. Aspecta de la tabla insertada.
. . .
Haz c lc una vez a fa derecha de la tabla para anular la seleccin.
Selecciona Insertar
>
Tabla para inserLar ot'a tabla.
En el cuadro de dilogo
Insertar tabla, sigue este procedimiento para
la segu nda ta b{a:
Escribe I en el cuadro de texto Filas. Escribe 3 en el cuadro de texto Columnas. Escrlbe 7OO en el cuadro de texto Ancho de tabla. Selecciona Pxeles en el men emergente Ancho de tabla. Escribe O en el cuadro de texto Grosor def borde. Escribe O en el cuadro de texto Relleno de celda.
tscribe O en el cuadro de texto Espaco entre celdas.
Aparece una segunda tabla con una fila y tres columnas debajo de la primera tabla (Figura 3.7).
Figura 3.7. Aspecta de la sequnda tabla nsettada.
. .
Haz clc a la derecha de la tabla para anular la seleccin.
Inserta una teTcera tabla seleccionando lnsertar > Tabla e introduciendo los siguientes valores en el cuadro de dilogo Insertar tabla:
31
DREAMWEAVER
Escribe 1en el cuadro de texto Filas.

Es po5ble que se
Escrlbe
en el cuadro de texto Columnas.
vea el Selectot de tablas (sealada con lneas verdes) despus de inseal una tabla. Puedes hacedo desapatecel con un clc fuen de
Ia tabla. Tambn
Escrlbe 7OO en ei cuadro de texto Ancho de tabla. Seiecciona Pxeles en el men emergente Ancho de tabla Escribe O en el cuadro de texto Grosor del borde. Escriba O en el cuadro de texto Relleno de cefda. Escribe O en el cuadro de texto Espacio entre celdas.
puedes desactval el Selector de tabla' selecconando Ver >
Haz cllc en Aceptar.
hp.de tabla.
Aparece una tercera tabla con una fila y una columna debajo de la se,1r1 f.rhl /Firrr ? R\
Fioura 3.8. ,4srecfo de la tetcera tabla nsertacla.
Haz clc a la derecha de la tabla para anular la seleccin. La pg ina creada debe ser parecida a ra que pueoes ver en la fig u ra 3.9:
Fiqurc 3,9. Aspecto fnal del canjunto de tablas insertadas.
,-
3.4. ESTABLECIMIENTO DE LAS PROPIEDADES DE UNA TABLA
Ahora vamos a definir propiedades especficas de la tabla utlizando el modo de tablas expandidas, una funcin que aade temporalmente relleno y espaciado de celdas a las tablas y aumenta los bordes, para assimplif icar la edi-
cin. Especificamente, permite colocar el punto de insercin de manera precisa, sin seleccionar accidentalmente la tabla equlvocada o el contenido de otra ta b la:
32
Selecciona Ver > Modo de tabla > Modo de tablas expandidas (Figura 310).
aiedo 4!*.1
cd.{44.0 cd,e,raGo
E,
G'
ro,
F{e&-,
Cd.M?''c
R4.j
P9ft
Fiqura 3lO. l'en Ver con Modode tablas expandidas seleccionado.
. .
Haz cfic una vez dentro de la orimera fila de la Drimera tabla.

En e nspector de propiedades (Ventana > Propiedades), introduce
90
en el cuadro de iexio Alto de celda (Al) y presiona Intro (Figura
3.11).
Fguta 311. Alta de celda.
Haz clc una vez dentro de la segunda fila de la primera tabla (Figu
ra 3.12).
Figwa 3.12. Seleccn de la sequnda fla dela prmera tabla.
En el inspector de propiedades, ntroduce 166 en el cuadro de texto
Alto de celda (Al) y presona Intro.
33
DREAMWEAVER
Haz cllc una vez dentro de la tercera fila de la primera tabla.

Si apatece el cuadtu de dilogo
Introduccn al modo de tablas expanddas, haz

..lgJc en
En el inspector de propiedades, introduce
24 en el cuadro de texto
Alto d celda (Af) y presiona Intro.

Ahora debes tener tres filas de alturas diferentes en la primera tabla.
aceptar.
A continuacin vamos a definir las propiedades de la segunda tabla (la que

consta de tres
co lum nas):
Haz clic una vez dentro de la primera columna de a segunda tabla. En el inspector de propiedades, introduce 14O en el cuadro de texto
Ancho de celda (An) y presiona Intro.

Haz clc una vez dentro de la segunda columna de la segunda tabla. En el inspector de propiedades, introduce 23O en el cuadro de texto
Ancho de celda (An) y presiona Intro (Figura 3.13).
:f!@
Fuente
p..detem
' Estjb Nrngu - rm F? -
i=::E=
eo,Ae
oesi
F
l--:I
f;
'tr
lP.os"ddt de l. p,te'"..,
Fiqura 3.13. lntroduccin delancha de una calunna en elselectorde tablas.
.
34
Define el ancho de la tercera columna con un valor de 23O pxeles.
Si el Selector de tablas est activado (Ver > Ayudas visuales > Anchos de tabla), podrs ver sobre las columnas de la tabla respectivas
los tres valores en pxefes que acabas de introducir (Flgura 3.14).
Fqura 3.14. Valores en pxeles de las calunnas.
No vas a introducir valores para la altura de las celdas de esta tabla
porque la altura de dichas celdas variar dependiendo del contenido que agregues ms adelante.
. .
Por ltimo, haz clic dentro de la ltima tabla (la que tiene una fila y
una coumna).
En el inspector de propiedades, introduce
24 en el cuadro de texto
Alto de celda (Al) y presiona Intro.

El diseo creado debe ser parecido al de la figura 3.15.
Figura 3.15. Re<u/ldo [nt dld5pa d-
lbt.
35
DREAMWEAVER
Haz clic en elvinculo Modo de tablas expandidas salr en la parte su-
perior de la ventana de docu me nto Dara reoresaT al Modo estndar.
cuarda la
pg ina.
.-
3.5. INSERCION DE UN MARCADOR DE POSICION DE IMAGEN
Un marcador de posicin de imagen es un grfico que se utiliza hasta que el grfico definitivo est listo para su incorporacin a {a pgina web. fste marcador de posicin puede resultar til al crear eldiseo de pgina, pues permite co-
loca. una imagen en L4a pgina antes de crear ld imdgen.
En la ventana de documento, haz clic una vez dentro de la prirnera

pr
I||trro
ro u ro.
Selecciona Insetar
magen.
>
Objetos de imagen ) Marcador de posicin de
En el cuadro de dilogo Marcador de posicin de imagen, sigue este
procedimiento: Escrlbe banner_qraphic en el cuadro de texto Nombre. Escribe 7OO en el cuadro de texto Ancho.
Escrbe 90 en el cuadro de texto Altura. Haz clc en el cuadro de color y selecciona un color en el selector. de color. Selecciona un maTrn rojizo (S9933OO). Deia en blanco el cuadro de texto Texto alternativo.
Para entender mejor los conceptos que utilizamos en DTeamweaver, a continua-
cin te explicamos qu es un texto alternativo. Se trata de una descripcin tex-
tual de una imagen en una pgina web. Forma parte del cdigo HTN,,lL y no se muestra en la pgina. Es importante proporcionar texto alternativo para la mayora de tus imgenes, con el fin de ofrecer los mximos datos posibles sobre
la imagen a los visitantes del sitio que utilicen lectores de pantalla o navegado-
res que slo admiten texto. En los grficos de rtulo, que slo suelen mostrar
el logotlpo en la pgna web, no es esenclal proporcionar texto alternativo. Si

dejas el cuadro de texto; Texto alternativo en blanco, en el cuadro de diogo
Marcador de posicin de imagen, DTeamweaveT aade un atributo alt="" a la etiqueta img. S posieriormente decides que quieres aadir texto alternativo a
una imagen, puedes seleccionar la imagen e introducir el texto alternativo en el
36
inspector de propiedades. Por ejemplo, si ms adelante cambias el logotipo aadiendo un nmero de telfono o direccin, podras inciuir esta informacin en
ei texto
a
lternativo.
Cuando se vsualza en un navegador, el texto cle etqueta
Por otro lado, el marcador de posicin de imagen es un grfico que se utiliza hasta que el grfico definitivo est listo para su incorporacin a la pgina web; no es una imagen grfica que se puede ver en ef navegador. Antes de publicar el sitio, reemplaza todos los marcadores de posicin de imgenes que hayas aadido por archjvos grficos aptos para la Web, como archivos GIF o JPEG.
Si dispones de Adobe Fireworks, puedes crear un nuevo grfico desde un mar-
y tanao del matcaoor de

posicn de magen no aparece.
cador de poscn de imagen de DTeamweaver. Al seleccionar el marcador de posicin de imagen y hacer clic en el botn Crear del inspector de propiedades, Fireworks abre un nuevo lienzo. Las dimensiones de la nueva imagen se confguran con el mismo tamao que la imagen del marcador de posicin. Puedes crear y editar la magen como desees y reemplazar la imagen del marcador
de pos icin en DTeamweaver.
Haz clic en Aceptar. El marcador de posicin de imagen aparece dentro de la primera tabla. El marcador de posicin de imagen muestra una etiqueta y los atributos
de tamao de la imagen que en su momento colocars en ese lugar (Fi-
gura 3.16).
Figu.a 316. l,4arcadat de poslcn de magen.
cuarda la pg ina.
.,-
3.6. ADICION DE COLOR A LA PGINA
A continuacin vamos a aadir ms color a la pgina configurando los colores de algunas de las celdas de la tabla y de{ fondo de la pgina:
Haz clic una vez dentro de la prmera celda de la tabla de tres columnas.
37
DREAMWEAVER
.
S no
aparcce el
Haz clic en la et;queta <td> (etiqueta de celda) en el selector de etiquetas para seleccionar la celda (Figura 3.17).
cuadro de texto
Color de tondo,
haz c c en la flecha de anpliacn stuada en la esquina nferior derccha del nspector de prcpedades.
Figura3.17. Seleccn de la etqueta
<tcl>.
En el inspector de propiedades (Ventana > Propiedades), haz clic
una vez dentro del cuadro de texto Color de fondo.
texto est situado justo al lado del cuadro de color de Color de fondo (Fnd).
El cuadro de
En el cuadro de texto Color de fondo, introduce el valor hexadeci-
mal S9933OO y presiona Intro (Fgura 3.18).
100%
- 90t:71- Is
i=:==e
06r
Figura 3.18.
Crddl o
dp t'6\'o aolor de fando.
La celda de la tabla se volver de color marrn roiizo.
. .
38
Haz cl.c ura vez dentro columnas.
de a segunda celda de la tabia de tres
Haz clic en la etiqueta <td> (etiqueta de celda) en el selector de eti-
ouetas oara seleccionar la celda.
En el cuadro de texto Color de fondo, lntroduce el valor hexadecimal
SFTEEDF y pulsa Intro.

La celda de la tabla se volver de color marrn muy claro.
Repite esta misma operacin para cambiar tambin el color de la

+^,-^r1 -^^ t- +-At- o -,,^ r-.ll tTtdtlo mUV claTo.
Una vez definidos los colores de las tres celdas, haz cltc una vez fuera de la tdbl pdra ar-ular la seleccior'.
A continuacin, cambiaremos el color de fondo de toda la pgina modlficando las propiedades de la pgina. El cuadro de dilogo Propiedades de la pgina permite configurar varias propiedades de la pgna, incluyendo, entre otros, el tamao y el color de las fuentes de la pgina, el color de los vnculos visitados y los mrgenes de la pgina:
Selecciona Modificar > Propiedades de la pgina.

En la categora Aspecto del cuadro de dilogo Propiedades de la pgin, haz clic en el cuadro de color Color de fondo y selecclona neqro (S000000) en el selector de color (Fiqura 3.19).
- Br
a. tu";;...
!d!
I.
la
i..,; l;
:. d'..
F9!3.19. Cuadrc de dloqo Propedades de
pqna.
Los colores se expTesan en forma de vaJores hexadecimales (por ejemplo,
#FF0000) o con nombres en ingls (red). Un color seguro para la Web es aquel que se muestra de la misma forma en Firefox y en l\,4lcrosoft Internet Explorer, tanto en Windows como en Ny'acintosh, con un modo de 256 colores. Existen 216 colores comunes y cualquier valor hexadecimal que combine los pares 00,33,66,99,
CC o FF (valores RGB 0, 51, 102, 153,
204
y 255, respectivamente) representa un color seguro para a Web
39
DREAMWEAVER
En DreamweaveT puedes seleccionar colores introduciendo valores he-
xadecimales en los cuadros de texto correspondientes o seleccionando un color en eJ selector de color. El selector de color utiliza la paleta de
216 colores seguros para la Web; al seleccionaT un color de esta paleta,
se muestra el valor hexadecimal del color. Para utilizar el selector de color, haz clic en el cuadro del color para seleccionar un color.
Tambin puedes utilizar el selector de color para igualar colores. Por ejemplo, si una imagen de tu pgina incluye un tono de azul especfico
y quieres aplicar el mismo color al coior de fondo de una celda de la tabla, selecciona la celda en cuestin, haz clic en ef cuadro oe cotoT para abrir e{ selector de color, mueve elcuentagotas sobre el azulde la magen y haz cllc con el botn del ratn. El selector de color rellenar 1a zona seleccionada con el color ms parecido al que marc con el cuentagotas. No obstante, al seleccionar colores con este mtodo, el color seleccionado por el selector de color podra no seT un color seguro para la Web.
o Aaz elir n A.aiar
El color de fondo de la pgina se vuelve negro (Figura 3.20).
Figura3.2O. Aplcacn delcalordeondo de la pqna.
Cr r.rr{.
|| lrhin
Tu diseo de pgina quedar deflnido. El diseo incluye varias tablas que pue-
den albergar archivos como imgenes, texto y Flash Video (FLV).
40
ADICION DE CONTENIDO A LAS PGINAS
fl
Puedes
a
nucrrrr
DE coNTENIDo A
LAs pcllRs
entre
ad ir a las pgnas web contenidos de diversa ndole incluyenclo,
otros, grficos, archivos de Adobe Flash, vdeos de Adobe Flash y texto. Una vez aadido el contenido a las pginas, puedes obtener una vista previa con un navegador, paTa veT cmo va a aparecer en ia web.
**
4.1. INSERCION DE IMGENES

a
a pgina.
Una vez creado tu diseo de pgina, ya puedes aadir contenidos
Vamos a comenzaT viendo cmo se aaden imgenes. Hay varias formas de aadir imgenes a una pgina web en Dreamweaver.
ffi
REEMPLAZO DEL IVARCADoR DE PoSIcIoN DE IMAGEN

En Dreamweaver, abre el archivo index.html que creaste en el cdp-
. .
tulo anterior, Crear un dseo de pqna.

Haz doble clic en el marcador de posicin de imagen banner_graphic,
e4 la parte suoe'ior de la ogina rF gL'a 4.
).
Fiqura 4.1. l",larcador de poscin de Ia maqen 5etecctona00.
sd...bdrr.
s.md.ehd
Erldd!9
..rh
<'
t ":;;it6Fl!q
d!dPruc
!qud'
fn e
cuadro de dilogo Selecconar
orgen de imagen, accede a la carpeta de imgenes dentro de la carpeta cafe_townsend que def inmos como
carpeta raz del sitio.
iona el archivo banner_graphic.jpg y hdz clic en Aceptar (Figra

Se lecc
4.?).
Fiqura 4.2. Cuadro de dlloqo Seleccionar or gen de imagen.
41
DREAMWEAVER
DreamweaveT sustituye el marcador de posicin de imagen por el grfico de r-
tulo de Cafe Townsend (Fiqura 4.3).
Figuta 4.3. RtuloCaf Townsend.
. .
ffi
Haz ciic una vez fuera de la tabla para anular la seleccin de la imagen.
Guarda el archivo (Archivo
>
Guardar).
INSERTAR UNA II\AGEN UTILIZANDO EL IVENU INSERTAR
de a primera tabla (dos fiias po. debajo del grfico de rlulo que acabmos de nserta', justo enHaz clic una vez dentro de la tercera fi a
cima de las celdas coloreadas de la tabla) (Fqura 4.4).
Fiquta 4.4. Seleccn de la tercera fla de
Ia
prmera tabla.
. .
Selecciona Insertar > lmagen.

En el cuadro de dilogo Seleccionar origen de imagen, accede a la
carpeta de imgenes dentro de la carpeta cafe_townsend, selecciona el archivo body_main_header.gif y haz clic en Aceptar en elcuadro de
dilogo Atributos de accesibilidad de la etiqueta de imagen. Aparece en la tabla un grfico largo y coloreado. Parece ms un color de fondo para la celda de la tabla que un grfico; no obstante, si lo miras con ms atencin, vers que elgrfico tiene las esquinas redondeadas. El efecto de esquinas
42
ADICIN DE CONTENIDO A LAS PGINAS
redondeadas le dar un aspecto interesante a la parte inferior de la pgina una vez hayas aadido todos los archivos (Figura 4.5).
Figara 4.5. Aspecto delnueva qfco.
,i:! INSERCION DE UNA IIVIAGEN ARRASTRANDo

Haz clic una vez dentro de la ltima fila de la ltima tabla de la oqina
(justo debajo de las celdas coloreadas de la tabla).
fn
el panel Archivos (Ventana > Archivos) busca el archivo body_main
_footer.gif (dentro de la carpeta de imgenes) y arrstralo hasta el punto de insercin de la ltima tabla (Figura 4.6). Pulsa Aceptar en el cuadro
de dilogo
Atributos de accesibilidad de la etgueta de imagen.
figura 4.6. Atrd<tran\ -'
dt
b't o hd.ld
'"
fD|
Haz clc una vez fuera de la tabla y guarda la pgna (Archivo >
cuar-
oar).
43
DREAMWEAVER
INSERTAR UNA IMAGEN DESDE EL PANEL ACTIVOS
Activos (F11) te permite adrninistrar los archivos del sltio actual. En el panel Activos se muestran los archivos del sitio asociados al documento activo en la ventana de documento, donde debers definir un sitio local anies de ver los archlvos en el panel Activos.
El panel
La llsta Sitio enumeTa todos los activos del sitio, incluidos los colores
as URL
que se utilizan en los documentos del sitio, adems de las dirnensiones, el tamao o el tipo de archivo.
La lista Favoritos enumera nicamente los actvos que hemos elegido de forma
explclta. Para aadir un activo a la llsta Favoritos, selecciona el activo en la lista Sitio y, a continuacin, selecciona Aadr a Favoritos, botn stuado en la esquina inferior derecha del panel Archivos.
Al hacer ciic en un activo del panel Activos, aparece el activo selecconado en el
rea de vista previa. Para cambiar el tamao del rea de vista previa, arrastra la
lnea que separa el rea de vista previa de los encabezados de columna de activos:
.
Sno aparecen los mens emetgentes vert u Hoiz, haz clc en ]a flecha de amplacn stuada en la esquna
Haz clic una vez dentro de la columna central de la tabla de tres colum'
nas (la primera celda de la tabla de color marrn ciaro).
En el inspector de propiedades (Ventana > Propiedads), selecciona
Centro en el men emergente Horiz, y selecciona Superior en el men e rn erg ente Vert (Figura 4.7).
nerbr derccha del inspectot de
e*.ooiG
-]
e"tto r,E
*
w
F4nte F!teFfedete.r, Tdm Ntrg,
ffi
r-
c"ro" r*r
c-r" . .
'
A
, !1s l_,1
l.o.j. Fnd
r"a
B EEEE,rot i= i= = = D6t
OJ
aola"
--l 1c vrt !p.M
e"".
Lj .rzmr
fl
Figwa 4:7. lnspector de propedades.
Esto alinear el contendo de la tabla en el centro de la celda, y empujar el conrenido de la celda a la parle superior de la m.sra.
. .
44
Presiona Intro una ver paT crear ms espaco.
Activos del panel Archivos o selecciona Ventana > Activos. Aparecen los activos de tu sitio.
Haz clic en la ficha
Si no est seleccionada la vista lmgenes, haz clic en el botn lmge-
nes para ver tus actjvos de imagen (Figura 4.8).
fl
a
I IJ
Figura 4.8. Bofn de imqenes.
. .
En el panel Activos, selecciona el archivo
street_signjpg.
Haz clic en Insertar en la parte inferior del panel Activos.
El grfico
street_sign.jpg aparece en a pglna (Fgura 4.9).
Si se abrc el cuadrc de d//ogo Atribulos
de accesibilidad de Ia etqueta de magen, haz clc
enAceptar.
Figura 4.9. El qrfco seleccianada apdrece en la pqna.
45
DREAMWEAVER
. .
Haz clic una vez fuera de Ia tabla para anular la seleccin de la imagen.
Guarda a pg na.
.,* 4.2.INSERCION Y REPRODUCCION

ARCHIVO FLASH
DE UN
Al crear activos en Adobe Flash, se trabaia con archivos FLA, eltipo de archivo predetermlnado de la aplicacin F ash. Los archivos FLA tlenen la extensin
".fla".Pot ejemplo, si estamos trabajando con un logotipo animado para un sitio web, el nombre del archivo Flash podra ser animated logo.fla.
Cuando terminemos de trabajar con el archivo FLA en Flash, debemos exportar el archivo a un formato que pueda verse en la Web con Flash Player. Al expor-
tar archivos FLA en Flash, se convierten en archivos ".swf".los archivos SWF (no FLA) reproducen contenido
sea ndo con
D
SWF con la extensln Flash en un navegador;
es el tipo de archivo que se debe introducir en una pgina web que se est direa mweaveT.
A continuacln vamos a insertaT un archivo FLash. Para hacer esto, lo ms sencillo es insertar el archivo SWF (elarchivo de pelicula
Flash exportado) en la pgina. Cuando se inserta un archivo SWF en Dreamweaver, el programa escribe todo el cdigo Flash HTtL necesario:
Con la pgina index.html abierta en la ventana de documento de Dre-
fila de la primera tabla (la fi a de la tabla justo debajo del grfico de rtulo introducido
amweaveT, haz clic una vez dentro de la segunda
en el
pa
rtado anterior).
En el inspector de propiedades (Ventana > Propiedades), selecciona
Centro en el men emergente Horiz y luego selecciona Medio en el men emerqente Vert (Fiqura 4.10).
rr'rto
r,L'ro
uet! Fumrer{ederotr
l;1
J ic ,,et@-
- e.uo u,"e,n. y rm rr'ng. ... c"t" cenro ' ar
. -.
Ed
B -a
==== i=:: i! :!
ooe
vioro
Oest
.QJ
Ar 166 E"c. .d
--l
Fgwa 4.1o. Seleccn de Medo en el menyetl.
46
De este modo se colocan los contenidos de fa cefda de la tabfa en el
medio de fa misma.
Selecciona Insertar
) Media > Flash.
En el cuadro de dilogo Seleccionar archivo, accedemos al archivo flash_fma.swf (est en la carpeta raz cafe_townsend del sitio). Selec-
ciona el archvo y haz clic en Aceptar (Figura
4.11).
**."di-
A+,
-rj4!,":{q.
Fi?ura 4.11. Cuadto de dlloqo Seleccionar archvo.
S se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de objeto, haz clic en Aceptar.
En fa ventana de documento aparecer un marcadoT de posicin del
contendo Flash en lugar de una escena de Fl\4A. Esto es debido a que el cdigo HTl,y'L (apunta> al archvo SWF flash_fma.swf. Al cargar la pgina ndex.html, el navegador mostrar el archjvo
SWF.
El marcador de posicin del contenido Flash se mantendr seleccionado despus de insertar un archivo SWF mientras no hagas clic en ningn otro punto de la pgina.
Sl no est seleccionado, selecciona el marcador de posicin del conte-
ndo hacendo clic sobre
1.
inspector de propiedades (Ventana Reproducir ( Fg ura 4.12).

En el
> Propedades), haz clc en
F '.'*
ll &rd. i? Ro. &b. Fiquta 4.12.
:; ,ff*-*"
Eeeov
Es:e H
5..r, *.d.re.md. (ffirr u -
o,l3-;**".l"1 - *"- tr41@-.,-:l E Erqs

n I
E Edi.''----l cb* .s-.
@n-;
BatnReVodrc
en el nspector (le prapiedades.
47
DREAMWEAVER
Dreamweaver reproduce el archivo Flash en la ventana de documento, mostrando lo que podrn ver los visltantes de la pgina cuando la vean a travs de un navegador (Flgura 4.13).
Figu 413. Atchvo Flash.
. .
Haz clic en el botn Next para visuafizar el archivo Flash.
inspector de propiedades, haz clic en Detener para detener Ia reproduccin del archivo Flash y luego guarda la pgina.
En el
El comando
4.3.INSERCIN DE FLASH VIDEO
lnsertar Flash Video de Dreamweaver nos permlte lnsertar contenido de Flash Video en las pginas web sin tener que utilizar la herramienta de
autora de Flash. El comando inserta un componente de Flash, que muestra el contenido de Flash Video seleccionado, adems de un coniunto de mandos de reproduccin cuando se muestra en un navegador.
Insertar Flash Video nos permite ofrecer contenido de vdeo visitantes de tu sitio a travs de una de estas oociones:
El comando El vdeo de descarga progresiva descarga el archivo de Flash Video (FLV)
a los
aldisco
duro del usuario y lo reproduce. Sin embargo, a diferencia de los mtodos tradicionales de entrega de vdeo de tipo <<descarga y reproduccin)), la descarga progresiva permite iniciar la reproduccin del archivo de video antes de que
haya finalizado la desca rga.
flujo (Streaming vldeo) transfiere el contenido de Flash Video y lo reproduce en la pgina web de inmediato cuando se solicite. No obstante, para poder utilizar el vdeo de flujo en pginas web, es necesaTio tener acceso a
El vdeo de
Adobe Flash Media Server, el nico servidor que puede transferir contenido de
Ffash Video.
4A
A continuacin vamos a insertar un archivo de vdeo Flash utilizando el archivo
proporcio nado:
Con la pgina ndex.html abierta en la ventana de documento de Dreamweaver, haz clic una vez sobre el grfico de la columna central de la
ta bla de
tres columnas.
En el apartado anterior, se cre espacio antes de insertar el grfico; es aqu donde debes hacer clic (Figura 4.14).
Figura 4J4. Ubcacn del atchva cle vdeo FIash.
Selecciona Insertar > Media > Flash Video. En el cuadro de dilogo Insertar Flash Video, selecciona Vdeo de descarga progresiva (Proqressve Download Video) en el men emergente Tipo de vdeo.
En el cuadro de texto Vnculo, especificamos una ruta relativa al archlvo
cafe_townsend_home.flv; para ello, haz clic en Examinar, accede al archivo cafe_townsend_home,flv (situado en la carpeta raz cafe_townsend del sitio), y selecciona el archivo FLV (Flgura 4.15).
fFd.vij.o|Ro!.6iveDo}rjnvld
vib: ar-btrR.d_hd.iY
(rrlrcs h rub a:tu
rbcorub der
L!a-q
lEw
rdrvo na$ eo)
-tr4 -
aFl|u: cdsrn lirdni!rcr s)
Figura 4,15, Cuadro de
di
/oqo Lnsertar Flash Video.
Selecciona Halo Skin 2 en el men emerqente Apariencia,
49
DREAMWEAVER
Se muestra una vista previa del aspecto seleccionado bajo el men emergenie
asqecto. es el
valot del ancho y alto delarchivo FLV ms el ancho y alto del aspecto aelecconado. "Tatal con
Apariencia. La opcin Apariencia determina el aspecto y funcionamiento del componente de Flash Video que incluir el contenido de Flash Video (Fig.ra 4.16).
'llpo de ,lCeor 'Progres$ve Oownload Vdeo
=-._Aceptr
ncelar
vnculo:
ctu-to,lnsend-home.fv
-!g!!9!._
lrye,_
ongrese la rut relava o bsolut del ardvo Flsh \,deo)
oo.""o"'@
I
ancho:
1Bo / ResEinsr
!35
|leFie.Ueg"pj
.lto:
fotalcon aspector 202x18
i.p,_;;i;;-;;".;,,..;
Rebobindo utomtico
Fig\Jta 416. Seleccn de parmetras en elcuadrc de dlogo.
En los cuadros de texto Ancho y
Alto, sigue este procedimiento:
En el cuadro de texto Ancho, escribe 180. En el cuadro de texto
Alto, escribe l35.
Ancho y Alto especifca la anchura y la altura en pxeles del archivo FLV. Puedes ajustar los valores arbitrariamente para cambiar el tamao del Flash Video en tu pgina web. Al aumentar las dimensiones de un vdeo, suele deteriorarse la calidad
El valor de los cuadros de texto
del v deo.
Puedes hacer c lic en Detectar tamao para especificar el ancho y alto
exacto del archivo FLV. No obstante, en ocasiones DreamweaveT no puede determinar las dimensiones del archivo FLV. En estos acnc dobers introducir manualmente los valores de ancho y alto.
En el resto de opciores, deja los valo"es predeterminados:
Restringir mantene la misma relacin de aspecto entre el ancho y alto del componente de Flash Video. Esta opcin est activada de forma
predeterminada.
50
Reproduccin automtica especifica si el archivo se va a reproducjr al abrr la pgina web. Esta opcin est desactivada de forma Drecteterminada.
Rebobinado automtico especifica si el control de reproduccln vuelve al punto de inicio cuando finalice la reproduccin. Esta opcin est desactivada de forma predeterminada.
Haz clic en Aceptar para cerrar el cuadro de dilogo y aadir el con'
tenido de Flash Video a la ooina web.

El comando
Insertar Flash Video crea un archivo de reproduccin de
vdeo SWF y un archivo de skin SWF que se utllizan para reproducir el contenido de Flash Vldeo en una pgina web (quiz tengas qLre hacer
clc en el botn Actualzar del panel Archvos para ver los nuevos archvos). Estos archivos se almacenan en el mismo directorio que el ar-
chivo HTN/L al que ests aadiendo contenido de Flash Video (en este caso, la carpeta raiz cafe_townsend). Al cargar la pgina HTVL con el contenido de Flash Video, DTeamweaver carga estos archivos como archivos dependientes (siempre que te lo pida, haz clic en S en ef cuadro de dilogo Colocar archivos dependientes).
Guarda la pg ina.
"*
4.4.INSERCIN DE TEXTO
A continuacin, vamos a aadir texto a la pgina. Puedes escribir texto directa-
mente en la ventana de documento de Dreamweaver o copiarlo y pegarlo de otro orgen (como un archivo de Microsoft Word o de texto).
,4as
adelante, le daremos formato al texto utilizando hojas de estilos en cas-
cada (CSS).
ffi
INSERoIoN DEL TEXTo DEL cUERPo
Vamos a ver cmo se edita un texto usando DreamweaveT y aprenderemos a darle formato y tambin a inseTtar caracteres especiales, como son los espacios en blanco. Asimismo veremos cmo se crean listas ordenadas y no ordenadas, las cuales sern otro elemento ms que proporcionarn orden y esiilo a tus pg
Inas web. 51
DREAMWEAVER
Para inseriar texto en tu pgina HTt\4L basta con colocar el cursor donde quieras insertarlo (en un prrafo simple, una celda de tabla o una capa) y escribir el
texto correspo
nd
iente (Flgura 4.17).
o! o@qtrdr.sr tud. ?rmrr
ql
F"^b hF
r,t
q :q.r,
,c,l
:::
;*s:,i*
t;t
rz
====
rndc
'I=!:lei
{ri?
d@djl
!!
f ll+!1a e
Fiqura 4.17. lnsercln de texto en Dreamweaver.
Tambin podemos escribir directamente en la vista de Cdigo de la pgina, al gual que se ha hecho en la vista de Diseo. Cuando hayas terminado de escribir el texto en la vista de Cdigo y pulses sobre la vista de Diseo, e{ documento se actualizar con er nuevo rexro ntroducido.
modificar en el bloque de texto. Para que los cambios se lLeven a cabo, debers seleccionar previamente el texto que quieras modificar. Si lo que quieres es apficar una etiqueta de prrafo o encabezado, sita el punto de insercin donde desees que aparezcan.
Entra en el Inspector de propiedades y, en Formato, elige el que ms te convenga.
La etiqueta HTl,4L asociada con el estilo seleccionado se aplicar a todo el prrafo;
En el panel Propiedades puedes ver los parmetros que es posible
por ejemplo, h/ser para Encabezado
1,
h2 para Encabezado 2 y assucesivamente.
Si lo que te interesa es quitar un formato de prrafo, selecciona Ninguno.
52
Puedes variar el tamao de la fuente, especificando un vaior absoluto, (tamao de
letra en nmero), o bien indcando valores relativos (ms pequeo, muy grande, intermedio, etc.). Tambin podemos cambiar el formato (cursiva, negrita, subrayado),
la alineacin o colo como si de un procesador de textos se tratara. Asimismo es po-
sible modificar el tipo de fuente. Aparecen conjuntos de fuentes en lugar de una

sola, ya que es posible que al establecer una nica fuente el usuario no disponga de
ella en su ordenador. De esta manera, se aDlicara otra del coniunto.

DTeamweaver agTupa las propiedades de formato que el usuario aplica a toclos los
elementos del texto y le asigna una etiqueta a cada uno de ellos mediante una con-
vencin de asignacn de nombres: Style
1,
Style 2, Style 3, Style n, Si aplicas los
mismos atributos de formato a dos o ms elementos del texto, DTeamweaver asignar una etiqueta a los elementos que tengan el mismo ttulo; de este modo, se eli-
minan los nombres de estilo redundantes.
LISTAS ORDENADAS Y SIN ORDENAR
Puedes crear listas ordenadas (numeradas) o sin ordenar (vietas). Adems, las
lstas se pueden anidar. Una ista anidada es, como ya habrs intuido, aquella que contiene otra lista en su interior.
Puedes elegir entre crear una lista e ir introducendo sus elementos, o bien es-
cribir primero los componentes de la lista como un texto simple, y luego convertirlos en lista, tal y como se explica a continuacin:
Para convertir un texto en llsta, primero debes escribirlo en forma de
parrdfos separddos y luego seleccionarlo (Figura .18).
-g-j:"* @ E@
E6@
&o
Titulor ooBmst' en
itllo
Bt'
c/- - F. ?i,,
>". ; {
c@obr p,tqd
q@
Fiqur.18. To to.plct (iono ptd tedt F ttrL.
53
DREAMWE,AVER
A continuacin, haz clic en el botn Lista sin ordenar o Lista ordenada en el inspector de propiedades. Tambin puedes hacer clic en
Lista y selecciona Lsta sin ordenar, Lista ordenada o Lista de defincin (Figura 4.19).
Texto
>
u*o,w.atou*
!
P6Cr+!Cio4+-
6lr= i:
D*r
Figura 4.19. Seleccn deltipo de Ista en el nspector de ptapedades.
Para escalonar el listado, debes seleccionar los elementos a los que deseas aplicar la sangra y pulsar sobre Sangra de texto.
Repite esta operacin para cada lista anidada que tengas en tu listado. Por otra
parte, si deseas creaT una lista numerada, procede de la misma forma, slo que
pu lsa
ndo sobre Lista ordenada.
lista, puedes definir la apariencia de la lista, ya sea sta numerada, o de vietas (sin numerar).
En Elemento de
Para una lista numerada se pueden elegir, por ejemplo, el formato en que se mostrarn los nmeros (Figura 4.20).
Figura 4.2O, Seleccn delfarmato en Elementa de lista.
Para una lista sin numeTaT, podemos elegir el aspecto que tendrn las diferen-
tes entradas de la lista (cuadrado o veta).
54
ADICION DE CONTENIDO A LAs PGINAS
INSERTAR CARACTERES ESPECIALES
^rni7:n en principio, en p rrafos como puedes ver en la figura 4.21. Para crear un
nuevo prrafo pu lsa Intro,
lc tpYfoq, <a
al\/ a< co in<.ortr

una lnea en blanco de es-
ru e||U tr ruf pdrroru). Fn.< da lrar a:d ir

poL
rrn^ rni. lino: da o<ncro,

Figura 4,21, Texta arqanzado en prrafas.
y no ese espacto
en
blanco, presiona Mayscula + Intro. Si lo prefieres,

puedes lograr el mismo re-
sultado desde el men Insertar, opcin HT|\/L, submen Caracteres especiales, opcin Salto de lnea. .ADICIN DE ESPACIO ENTRE CARACTERES
HTIVL slo permite un espacio entre caracteres; para aadir espacio adicional
en un documento debes insertar un espacio indivisible. Esta opcin se encuen-
tra en el men Insertar opcin HTML, submen Caracteres especiales, opcin Espacio indivisible.
Tambin puedes insertar espa-
cios indivisbles
irecta mente
desde el teclado, pulsando la
Control + Maysculas + Espacio.

com binacin de teclas
Observa en la vista de Cdgo
cmo el prrafo de texto viene
delimitado por las etiq uetas

 y .
El salto de lnea simple se re-
presenta con la etqueta ,
mientras que ios espacios en

blanco se representan con
(Figura 4.22).
la
secuencia de escape &nbsp

Flgura 4.22. Salta de Iinea.
DREAMWEAVER
En el panel Archivos, iocaliza el archivo sample_
text.txt
(en la car-
peta raz cafe_townsend) y haz doble clic en el icono del archivo para
a
brir o en DreamweaveT.
Esta ventana se muestra en la vista Cdigo y no se puede cambiar a

la vista Diseo ( a vista que has estado utilizando hasta ahora) porque
ei archivo no tiene formato HTlr/L (Fioura 4.23).
Fgl.lra 4,23. Archvo sample-text.txt abierto.
En la ventana de documento sample_text.txt, presiona Control+A para seleccionar todo eltexto y, a contlnuacin, elige Edicin > Copiar
Dara copia r el texto.
Cierra el archivo sample_text.txt haciendo clic en la X de la esquina

s u
perior derecha del docurnento.
En la ventana de documento ndex.html, haz clic una vez

dentro de la tercera celda de
,):r
s\
la
To\sdi risio4 cded foudd
l.ads
ro
tabla de tres columnas (la celda

a la derecha de la columna con el grfico y el vdeo de Flash).
ri eLoturio Rocledbf l@\
e b+t chef th. \ dld !oda! Cb.flDr@ bled! rasorl aro6 dd bld irgr.did to drat.
@.
l9al
Cat
Toq*od cwa nm
Llre
oca.d n
h S tu $'( \'. repced
historic bdnrg n fo\sdd irco shre rve opded rh. doos
or
elesd htd.
Selecciona Edicin > Pegar.
5ic.,
ad $dd chss cish. i'r
El texto del archivo de texto apaTece en la celda de ia tabla selecFiqura 4,24. Archivo de texfo coplada en el dacumento ndex.html.
conada (Fig u ra 4.24).
ADICIN DE CONTENIDO A LAS PGINAS
Dependiendo de la resolucin de tu monitor, se ampliar la tabla de tres columnas para darle cabda al texto. De rnomento, no te preocupes por er as pecto.
Asegrate de que el punto de insercin contina en la celda de la tabla donde acabas de pegar el texto. Si no lo est, haz cllc dentro de la celda de la ta bla. F'r
el lsoeclor
de propieoaoes (Ventana > Propiedades), selecciond
Superior en el men emergente Vert. El texto que acabas de pegar se alnear en la parte superior de la celda. Si no aparece el menu emeTgente Vert, haz clic en la flecha de ampliacin situada en la esquina inferior derecha del inspector de propiedades (Flgura 4.25).
cua rda la pgina.
|.r .& *" 'd, - -
qr
|';t*abe4.
F?uta 4.25. Selecconmos Superior en e/ /, spectar de propiedades.
ffi
rNSERctN DE TEXTo DE UNA BARRA DE NAVEGActoN
A contnuacin, vamos a insertar texto para una llarra de navegacin. Ten en cuenta que el texto no va a tener aspecto de baTra de navegacin hasta que lo fo rmatees:
Hacernos clic una vez dentro de la prirera columna de la tabla de tres
columnas (la columna de color marrn rolizo).
fscribe la palabra Cuisne (Figura 4.26).
best
chdin thc world today. Chdlpsur ,edonl flavors and bold inpredie s
Cafa Townsend cone5 &o! located in a hLtoric bildtdg o T i0 San Frcilco, irdcr s.e ope&d 1992. r.pnc*.d thc .Lga$t
nmc
\I.'\!
Fioura 4.26. Escribmas en la Drmeft cluna de le tbl.
57
DREAMWEAVER
. .
Presiona la barra de espacio y escnbe Chef lpsum.
Repite el paso anterior hasta haber incluido as siguientes palabras con rrr esnario pnTTe ellas: Arf.lps Snccial Fvcnts. lo.ltion, Menu,
Contact Us (Figura 4.27).
b.i
chdi orlrl b,l. Cbef ip Uo& s.ao'al n56 &d bold iscdids o .ad Tousd ,o@5 n@
a
.rii6 rlirid scldb!@r
ro
u r d lonrad Sl'ru.o rn.n.ope.dods l99l \\.\! r.p|icd.d t? .t gat i@ir, rr., d s Gld rL5. ilir i @
Ct;
ne
brdd ir
hddir
bLiiog
Figu 4.27. Sequmas ntraduccenda fexta en

de la tabla.
Ia
ptimera columna
No presiones la tecla
Intro mientras escribes. Utiliza solamente
la barra
de espacio para separar las palabras y deja que estas se distribuyan de
forma natural. tl ancho fijo de la celda de la tabla determina las palabras nra \/^n rhor nnr lnpa
Ny'anteniendo el punto de insercin en la primera celda de la tabla de tres columnas, haz clic en la etiqueta <td> del selector de etiquetas (Fi-
ntra 4 2A\
figu(a 4,28.
Clc en la etqueta <td>.
En el inspector de propiedades (Ventana > Propiedades), selecciona supe-
rior en el men emergente Vert (Figura 4.29).
Sno aparece el men emergente Verl, haz clc en la flecha de amplacn stuada en la esquina infeol derecha del nspectot de prcpiedades.
r*."o
ah
inaEt
lEl
|
c"{.
r t(
* *Ji. :
- e'u rq" , .r.h ;i:1

.
aL
'.
css E1
i=i==
D*t
-qJ
9j
PdE!.' de;;:a,.:.
lkr iaadt. ,t
r"dl.,,r3oo
Figut 4.29.
S-1.
t!' <upt;or.1 cl nspe. Lo de p,op edd^,.
58
ADICION DE CONTENIDO A LAS PAGINAS
El texto que acabas de escribir se alinear en la parte su pero r de la

ce ld a.
Guarda la pg ina.
"*
4.5, CREACIN DE VNCULOS
Un vnculo es una refeTencia insertada en una pgina web que seala a otro do-
cumento. Puedes convertir prcticamente cualquier tipo de aciivo en un vnculo, pero el tiDo de vnculo rns comn es el de texto.
Puedes crear vnculos en cualquier eiapa de proceso de creacin del sitio. En este apartado vas a cTear vnculos para la barra de navegacin, aunque todava no la hayas formateado para que aparezca como barra de navegacin:
Con la pgina index.html abierta en la ventana de documento de Dreamweaver, selecciona la palabra Cuisine que introdujiste en la primera
celda de la tabla de tres co umnas. Ten cuidado de seleccionar nicamente la palabra Cuisine y no el espacio que le sigue (Figura 4.30).
Los vinculos no Figura 4.30. se/ecclo, de la palabra Cus

ê.
cuando se hace clc en ellos en la venQna oe Dreamweaver,

sno que slo funconan en los
En el inspector de propiedades (Ventana > Propiedades), haz clic en el
icono de carpeta stuado junto al cuadro de texto Vnculo (Figura 4.31).
navegadores.
Para asegurc e ae que tos
i=i=g=
eo.u"[l
-o*
Dest
vinculos funconan
coectaenae, tends que

obtenef una vista previa de la pgna en un navegadot.
ar@@
Figura 4.31. lnspectar de Nopedades.
DREAMWEAVER
Dentro del cuadro de dilogo Seleccionar archvo, localza ef archivo menu.htmf (que est en la misma carpeta que el archivo index.html) y
haz clic en Aceptar.
Haz cllc una vez en la pgina para anular la seleccin de la palabra Cu
slne. El iexto Cuislne aparecer subrayado y de color azul, lo que ndca
que se ha convertido en un vnculo. Repite los pasos anteriores para vincular cada palabra o conjunto de palabras escritas para aspoder navegar. Tendrs que crear seis vfnculos ms: para Chef lpsum, Artcles, Specal Events, Locaton, Menu, y
Contact Us.
Enlaza con vnculos cada palabra o conjunio de palabras a la pqina
menu.html, y al crear los vnculos ten cuidado de no incluir los espacios antes y despus de las palabras o grupos de palabras. Se trata
slo de un conjunto de vnculos ficticios; en un sitio real, enlazando cada palabra de la barra de navegacin con una pgina especfica diferente.
Guarda la pgina.
"-
4.6. VISTA PREVIA DE LA PAGINA EN UN NAVEGADOR
La vista de Diseo te da una idea aproximada de cmo se ver la pqina en la Web, pero debes hacer una visualizacin previa en un navegador si deseas ver
el resultado final definitivo. Aunque en generaf los navegadores producen los mismos resultados, las distintas versiones de cada navegador pueden producir
algunas diferencias al mostrar pginas
HTN.4L.
DTeamweaver procura producir HTIVL que tenga el aspecto ms parecido posi-
ble en todos fos navegadores, si bien no puede evitar algunas diferencias. Por
lo tanto, el nico modo de comprobar lo que van a ver los usuarios de
tu pgina
una vez publicada es visualizndola previamente en un navegador:
. .
60
Asegrate de que el archivo index.html est activo en la ventana de 00cumenIo.

Pulsa Fl2.
ADICON DE CONTENIDO A LAS PGINAS
Si no est abierto, tu navegador principal se inicjar mostrando la pg
ina index.html (Figwa 4.32).
Deamweavel
detecta automtcamente
elnavegador
pdncipal y lo utlza
parc E wsla
prcva. Sna aparece Q va
preva ost no navegadol

cleseado, vuelve a
Dreanweaver (s
es necesano)y elgeArchvo > Vista preva en el navegaclot > Edikr lista de
navegadorcs. Cuando aparczca
elcuadrcde
dilogo de
prcfercncas de
Vsta preva en
el
nav
adot, aade
et navegaqor adecuado a la Ista. Pa rn6
Fgura 4.32. Pqna trdex en el naveqadat.
nonnacn, haz clc en elbotn Ayuda del cuadrc

de dilogo
(Opcional) Vuelve a Dreamweaver para realizar los cambios necesarios.
Preferencias.
A contnuacin, guarda tu trabajo y pulsa de nuevo la tecla F12 para asegurarte de que tus ca m bios s u rten efecto.
61
DREAMWEAVER
EJERCICIOS DE AUTOCOMPROBACION
Rodea con un crculo la alternativa que consideres correcta de las tres que presentamos. Hazlo en el espacio de la derecha destinado a tal efecto.
1. De
todos los paneles con los gue cuenta Dream-
weaver... a) Pueden ocultarse los de la izquierda. b) Pueden ocultarse los de la parte inferior. c) Ambos grupos pueden ocultarse, obteniendo asun mayor espacio de trabajo.
2. Qu men alberga la opcin Ocultar todos los paneles de Dreamweave? a) El men Herramientas. b) El men l/er. c) El men Formato. 3. Para qu sirve el inspector de propiedades? a) Para configurar y editar las propiedades del elemento seleccionado en la pgina. b) Para buscar pqinas web. c) Abre una ventana y muestra un fistado con todos los archivos del directorio. 4. ZMediante qu herramienta podemos definir un sitio en Dreamweaver? a) Administrador de Sitios. b) Localizador de URL. c) Herramienta Sitio remoto. a)
5. Para qu sirve la vista de Diseo en Dreamweaver? a) Para ver la alineacin de los elementos de una pgina web. b) Para ver el orden de aparicin de los elementos
de una pgina web. c) Para simplficar el diseo de una pgina uti-
lizando tablas.
62
EJ ERC IC IOS DE AUTOCOM PROBAC
IN
EJERCICIOS DE AUTOCOMPROBACIN
6. La vista de Cdioo te
VF
HTML en Dreamweaver.
VF
8. Para crear una tabla en una pgina, se pulsa sobre el icono de
Crear tabla, situado en el panel lnsertar.
VF
9. Al conjunto de caracteres del texto se le llama Esllo.
10. Para aadir un espacio adicional en un documento de HTML, se debe nsertar un espacio indivisible.
VF
Consulta las soluciones a estos ejercicios de autocomprobacn en la pgna sguiente. En caso de que no los hayas contestado correctamente, repasa la parte
de la undad correspondiente.
63
DREAMWEAVER
SOLUCIONES A LOS EJERCICIOS DE AUTOCOMPROBACIN
nado en Ia
4. a) Ad
de Sitios.
64
INDICE
.*
'1.
indice
Presentacin de Dreamweaver .........................................,..,. 4 Aspectos bsicos de Dreamweaver...,.................

1.1. Introduccin ........................
5
5
1.2. Conocer el espacio de trabajo de DreamweaveT ........... 6 Ventana de docu mento.......... Barra de herram ientas de documento Barra de estado Barra inserta r Barra herramientas de codificacin ................
7 7
l0
t
1a
I.J
lnspector de propiedades
Panel
a
.....
rch ivos
Panel estilos CSS...................

1.3.
IJ
Personalizacin del espacio de trabajo de DreamweaveT.........................

Cmo ocultar y mostrar la pantalla de
14
bienvenida
...............
15
17 1B
Realizacin de tareas bsicas con Drea mweaver.. ....... Crear nuevos archivos con Drea mweaver.................... Guardar archivos con Dreamweaver .................... .........
19
Apertura de archivos en Dreamweaver....................... 20

2. Configuracin del sitio y de los archivos del proyecto 2.1. Conoce los sitios de Dreamweaver ..................................
21
2.2. Configuracin de los archivos del proyecto
22
a-.^^+---.^^+-- .^^t--,,.-i,,, ruLdtc5 ., y LdtpeLd5 udf pLd> t^--t^tgtuLd5 tc|L .,,,.,......,,, 23

2.3. Define una carpeta local .................. 3. Crear un diseo de pgina
3.1. Examen de la maqueta de diseo 3.2. Creacin y almacenamiento de una pgina nueva.....
24 27
27 27
65
DREAMWEAVER
3.3. lnsercin de tablas
29
......
1A Establecimiento de las propiedades de una tabla
32
3.5. Insercin de un marcador de posicin de imagen...... 3.6. Adicin de color a la oqina
36
37
4. Adicin de contenido a las

4.1. Insercin de imgenes Reemplazo del marcador de posicin de imagen.....
41
Al
A1
Insertar una imagen utilizando el men Insertar...... 42

Insercin de una imagen arrastrando.....
A1
..............
Insertar una imagen desde el panel Activos 4.2. Insercin y reprod 4.3. lnsercin de Flash 4.4. Insercin de texto
Insercin del texto del cuerpo
44 46 48
:ll
5l
57
Insercin de texto de una barra de navegacin........
4.5. Creacin de vnculos
59
4.6. Vista previa de la pgina en un n avegado r.................. 60

Eiercicios de autocomorobacn .............. 62
66

1 D-Web Dream Uni1

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

1 D-Web Dream Uni1

Încărcat de

Drepturi de autor:

Formate disponibile

CuRso

Dseo DE PctNAs Wee

Aspecros esrcos or DRenvweavrR

1.2 Conocer el espacio de

Los ARcHrvos DEL pRoyEcro

2.3 Define una caroeta

de la maoueta de diseo 3.2 Creacin y almacenamiento de una pgina

4.1 Insercin de imgenes

4.2 4.3 4.4 4.5

En las unidades 3 y 4 tendrs acceso al programa por excelencia cuando se habla

de creacin de pginas web: Dreamweaver. fncontrars ampliamente explicadas

(hablar) del lenguaje

ASPECTOS BASfCOS DE DREAMWEAVER

ffi nseecros esrcos DE DREAMWEAvER

Las funciones de edicin visua de Dreamweaver permiten crear pginas web de

Adems de las funciones de arrastrar y soltar que te ayudan a crear paginas

ientos, inspectores de propiedades e informes de sitios.

En esta seccin se explica cmo instalar DreamweaveT.

Para instalar Dreamweaver:

Introduce el CD de Dreamweaver en la unidad de CD-RON/ de tu sistema.

Sigue las instrucciones que aparecen en pantalla.

- El programa de instalacin te indicar que introduzcas la informa cin necesa ria.

Si el sistema lo solicita, reinicia el sistema.

.2. CONOCER EL ESPACIO DE TRABAJO DE DREAMWEAVER

3'Ventana del docunento.

ASPECTOS BSICOS DE DREAMWEAVER

La ventana de documento muestra el documento actual. Puedes elegir entre

Vista Diseo es un entoTno de diseo para el diseo visual de la pgina,

mweaveT inc luye un asterisco.

BARRADE HERRAMIENTAS DE DocUMENTo

0f. grr ,' E- -'i- >*- i. {

Figwa1,2, Barra de herftmentas de Dacumenta.

herramientas de documento, aparecen las siguientes opciones:

Mostrar vista de Cdigo, slo muestra la vista Cdigo en c noa || mp lrn

Mostrar vista de Diseo, slo muestra la vista Diseo en la ventana

Administracin de archivos, muestra el men emergente Administracin de archivos.

Vista previa/Depurar en explorador, permite ver una vista previa del

Actualizar vsta de diseo, actualiza la vista Diseo tras realizar

Validar formato, permite validar el documento actual o una etiqueta

ASPECTOS BASICOS DE DREAMWEAVER

La barra de estado, situada en la parte inferior de la ventana de documento, pro-

porciona informacin adicionalsobre ei documento que est creando (Figurd l.3).

El selector de etiquetas muestra ia jerarqua de etiquetas que rodea

vidir) para luego editarlo, moverlo o modifjcarlo.

seo y Dividir) permite cambiar el tamao de la ventana de documento

Figura 1.4. Baa Insertdr.

zan con ms frecuencia, como las imgenes y las tablas.

Comn Direo Fomulaos Oator Spry fxto

lt.thr cos. otr.o Fomurlror OrloJ sory T.no

ASPECTOS BASICOS DE DREAMWEAVER

La categora Formularios, contiene botones que permiten crear for-

mularios e nsertar elementos de formulario, incluidos widoets de valdacn de SDrv.

t ht{rbr Co 0.o omular.J Dltoi Srry t.rio

e :i ; " 'l- ,,i

La categora Spry contiene los botones necesarios para crear pginas

de Spry, includos objetos de datos y widgets de Spry. Los wjdgets de

componentes comunes de interfaz de usuarjo, (tablas, listas, elementos

La categora Texto, permite insertar diversas eiiquetas de formato de

texto y listas, como b, em, p,

Com Oi5.o romutarios Dator Spry

v ttertr (omn Dirao Formutaro5 Dto5 Spry fxto

Las categoras de cdigo de servidor, slo estn disponibles para las

pginas que empiean un lenguaje de servidor determinado, como ASq