Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Tanto
si
se
elige
la
opcin
Nuevo...,
como
si
se
elige
la
opcin
Editar...,
se
mostrar
la
misma
ventana
en
la
que
definir
o
modificar
las
caractersticas
del
sitio.
Las
opciones
del
sitio
se
agrupan
en
diferentes
categoras
que
aparecen
en
la
parte
izquierda.
Para
visualizar
las
caractersticas
de
una
categora
basta
con
seleccionarla
de
la
lista
haciendo
clic
en
ella.
Las
dos
nicas
opciones
imprescindibles
son
las
que
encontramos
en
la
categora
Sitio,
y
de
momento
son
las
nicas
que
cambiaremos:
Vamos
a
ver
los
datos
que
hay
que
editar
para
la
categora
Datos
locales,
que
ser
lo
nico
que
empleemos
de
momento:
Debe
definirse
el
Nombre
del
sitio,
que
nicamente
nos
servir
para
identificarlo
en
la
lista
de
sitios.
La
Carpeta
del
sitio
local,
que
es
en
la
que
se
encuentra
el
sitio
dentro
del
disco
duro
local.
La
carpeta
puede
contener
ya
archivos
o
no.
Estas
dos
caractersticas
son
las
imprescindibles
para
definir
un
sitio
local.
El
resto
son
opcionales,
y
de
momento
no
nos
interesan.
Las
dems
opciones
en
este
momento
no
nos
interesan,
ya
que
estamos
definiendo
el
sitio
local,
y
no
es
necesario
establecer
los
datos
del
servidor
en
el
que
estar
el
sitio
remoto.
Despus
de
rellenar
los
datos
pulsamos
el
botn
Aceptar
y
abrimos
el
sitio.
3.3.
Abrir
un
sitio
Para
abrir
un
sitio
ya
definido
hay
que
dirigirse
al
men
Sitio,
a
la
opcin
Administrar
sitios....
seleccionar
el
sitio
de
la
lista
de
sitios
y
pulsar
sobre
el
botn
Listo.
Tambin
podemos
utilizar
el
panel
Archivos,
buscar
y
seleccionar
el
sitio
a
abrir
en
el
men
desplegable
Archivos.
Para
practicar
realiza
el
Ejercicio
paso
a
paso
Crear
un
sitio
web
local.
En
este
ejercicio,
configuraremos
un
sitio
que
iremos
completando
ms
adelante.
Dreamweaver
guarda
la
cach
de
nuestro
sitio,
cmo
se
organizan
los
archivos
y
se
relacionan
entre
ellos.
Por
eso,
si
cambiamos
el
nombre
de
un
archivo
o
su
carpeta
desde
Dreamweaver,
automticamente
actualizar
todas
las
referencias
a
ese
archivo
(enlaces
desde
otras
pginas,
origen
de
la
imagen,
etc).
En
cambio,
si
realizamos
estos
cambios
desde
fuera
de
Dreamweaver,
las
pginas
no
se
mostrarn
correctamente:
no
aparecern
imgenes,
no
funcionarn
enlaces,
etc,
ya
que
Dreamweaver
simplemente
no
encontrar
la
pgina.
Al
modificar
algn
objeto
que
es
referenciado
por
algn
otro
documento,
se
muestra
una
ventana
similar
a
sta,
que
indica
los
documentos
que
hacen
referencia
a
dicho
objeto,
y
que
pueden
ser
actualizados
para
que
no
se
produzcan
los
problemas
antes
mencionados.
Simplemente
hay
que
pulsar
sobre
el
botn
Actualizar,
aunque
esto
depender
de
si
tenemos
configurada
la
opcin
Mensaje
al
actualizar
vnculos
si
movemos
archivos.
Lo
cual
podemos
establecer
desde
el
men
Edicin,
opcin
Preferencias,
categora
General.
3.5.
Subir
archivos
al
servidor
Cuando
quieras
visualizar
el
sitio
en
Internet
(al
terminar
el
curso
o
para
hacer
pruebas)
debers
subir
los
archivos
al
sitio
que
hayas
contratado
o
conseguido
gratuitamente.
Algunos
sitios
gratuitos
slo
permiten
que
subas
archivos
va
web,
por
lo
que
debers
ir
subiendo
uno
a
uno
cada
archivo
y
creando
las
carpetas
t
mismo.
Este
proceso
puede
hacerse
muy
largo
y
debes
tener
mucho
cuidado
en
mantener
la
estructura
tal
y
como
se
encuentra
en
tu
carpeta
del
disco
duro.
Si
no
los
enlaces
no
funcionarn
correctamente,
y
es
posible
que
algunas
imgenes
no
se
muestren.
Para
subir
los
archivos
va
web
debers
seguir
las
instrucciones
que
te
proporcionar
tu
servidor.
La
alternativa
es
un
servidor
FTP,
que
se
utiliza
en
todos
los
sitios
de
pago
y
en
algunos
gratuitos.
Esta
forma
es,
de
lejos,
mucho
mejor
que
la
anterior.
Va
FTP
puedes
ver
el
contenido
de
tu
sitio
como
una
carpeta
ms
(igual
que
en
el
Explorador
de
Windows)
y,
obviamente,
nos
es
mucho
ms
til
para
subir
los
archivos.
Uno
de
los
programas
gratuitos
ms
utilizados
es
FileZilla,
desde
su
pgina
web
podrs
descargarte
el
programa
y
su
traduccin
tu
idioma.
Una
vez
instalado,
abre
el
programa
y
haz
clic
en
Archivo
Gestor
de
sitios
y
luego
en
Nuevo
sitio
para
configurar
un
nuevo
sitio
FTP
Aqu
debers
introducir
los
datos
que
te
facilit
el
servidor
donde
vas
a
alojar
tus
pginas:
Servidor,
Usuario
y
Contrasea.
Rellena
los
campos
y
haz
clic
en
Conectar.
Se
conectar
automticamente
y
podrs
ver
una
carpeta
donde
podrs
copiar
los
archivos
que
hayas
creado.
La
parte
central
de
la
pantalla
estar
dividida
en
dos
columnas.
A
la
izquierda,
la
marcada
como
Sitio
local,
nos
permite
explorar
la
estructura
de
archivos
y
carpetas
de
nuestro
sitio.
A
la
derecha
encontramos
Sitio
remoto,
con
los
archivos
ubicados
en
el
servidor
FTP.
Ahora
no
tenemos
ms
que
arrastrar
los
archivos
del
sitio
local
al
remoto
para
subirlos,
o
del
remoto
al
local,
para
descargarlos
al
equipo.
Vers
como
el
programa
empieza
a
copiar
la
informacin
de
tu
disco
a
Internet.
Cuando
haya
finalizado,
slo
tendrs
que
introducir
tu
direccin
de
Internet
en
la
barra
de
direcciones
de
tu
navegador
(Firefox,
Internet
Explorer...)
y
vers
el
sitio
en
Internet!
Los
servidores
de
pago,
normalmente
suelen
mostrar
varias
carpetas
al
conectar
con
el
servidor.
Busca
la
carpeta
public_html
y
sube
tus
archivos
all.
3.6.
Propiedades
del
documento
Es
conveniente
definir
sitios
homogneos,
que
todas
las
pginas
de
un
sitio
sigan
un
mismo
formato,
es
decir,
que
tengan
el
mismo
color
de
fondo,
de
fuente,
etc.
Puede
definirse
el
formato
de
cada
una
de
las
pginas
a
travs
del
cuadro
de
dilogo
Propiedades
de
la
pgina.
Este
cuadro
se
puede
abrir
de
tres
modos
diferentes:
Pulsar
la
combinacin
de
teclas
Ctrl
+
J.
Hacer
clic
sobre
el
men
Modificar
y
elegir
la
opcin
Propiedades
de
la
pgina.
Hacer
clic
con
el
botn
derecho
del
ratn
sobre
el
fondo
de
la
pgina.
Aparecer
al
final
del
men
contextual
la
opcin
Propiedades
de
la
pgina.
Se
abrir
el
cuadro
de
dilogo
siguiente:
Las
propiedades
estn
organizadas
en
categoras.
En
la
categora
Apariencia
(CSS),
como
ves
en
la
imagen
anterior,
encontramos
las
propiedades:
Fuente
de
pgina:
es
el
tipo
de
letra
que
le
aplicaremos
al
texto.
Tamao:
es
el
tamao
de
la
fuente
que
aplicaremos
al
texto.
Color
del
texto:
es
el
color
de
la
fuente.
Color
del
fondo:
permite
especificar
un
color
de
fondo
para
el
documento,
pero
dicho
color
solo
se
mostrar
en
el
caso
de
no
haber
establecido
ninguna
imagen
de
fondo.
Imagen
de
fondo:
permite
especificar
una
imagen
de
fondo
para
el
documento.
Dicha
imagen
se
muestra
en
mosaico.
Es
importante
al
elegir
una
imagen
de
fondo
tener
en
cuenta
que
segn
los
colores
de
la
imagen
ser
necesario
establecer
unos
u
otros
colores
para
el
texto,
as
como
que
no
es
conveniente
tener
un
gif
animado
como
fondo.
Repetir:
permite
especificar
si
queremos
que
la
imagen
de
fondo
se
repita
o
no.
Si
no
queremos
que
se
repita,
seleccionamos
la
opcin
no-repeat.
Si
queremos
que
se
repita
o
dejamos
la
opcin
en
blanco
o
seleccionamos
la
opcin
repeat.
Si
queremos
que
se
repita
solo
en
horizontal
seleccionamos
la
opcin
repeat-x
y
si
queremos
que
se
repita
en
vertical,
entonces
seleccionamos
repeat-y.
Mrgenes:
permiten
establecer
mrgenes
en
el
documento,
es
decir,
la
distancia
entre
donde
empieza
el
contenido
de
la
pgina
y
la
ventana
del
navegador.
En
la
categora
Apariencia
(HTML),
como
vemos
en
la
imagen
siguiente,
encontramos
las
propiedades:
Imagen
de
fondo:
permite
especificar
una
imagen
de
fondo
para
el
documento.
Dicha
imagen
se
muestra
en
mosaico.
Es
importante
al
elegir
una
imagen
de
fondo
tener
en
cuenta
que
segn
los
colores
de
la
imagen
ser
necesario
establecer
unos
u
otros
colores
para
el
texto,
as
como
que
no
es
conveniente
tener
un
gif
animado
como
fondo.
Fondo:
permite
especificar
un
color
de
fondo
para
el
documento,
pero
dicho
color
solo
se
mostrar
en
el
caso
de
no
haber
establecido
ninguna
imagen
de
fondo.
Texto:
es
el
color
de
la
fuente.
Vnculos:
es
el
color
que
mostrar
el
texto
de
los
vnculos.
Vnculos
visitados:
es
el
color
que
mostrar
el
texto
de
los
vnculos
visitados.
Vnculos
activos:
es
el
color
que
mostrar
el
vnculo
cuando
el
cursor
del
ratn
hace
clic
sobre
el
mismo.
Mrgenes:
permiten
establecer
mrgenes
en
el
documento,
es
decir,
la
distancia
entre
donde
empieza
el
contenido
de
la
pgina
y
la
ventana
del
navegador.
Podemos
observar
que
muchas
propiedades
HTML
y
CSS
son
similares.
La
diferencia
es
que
CSS
aplica
nuestra
configuracin
utilizando
reglas
de
estilo,
mientras
que
HTML
lo
hace
con
atributos
HTML.
Estos
ltimos
estn
cayendo
en
desuso,
ya
que
se
tiende
a
limitar
el
HTML
al
contenido,
y
no
al
diseo.
Por
eso,
te
desaconsejamos
su
uso.
En
la
categora
Vnculos
(CSS)
encontramos
las
propiedades:
Fuente
de
vnculo:
es
el
tipo
de
letra
que
mostrar
el
texto
del
vnculo.
Tamao:
es
el
tamao
del
texto
de
los
vnculos.
Color
de
vnculo:
es
el
color
de
los
vnculos,
que
ayuda
al
usuario
a
distinguir
entre
el
texto
normal
y
los
vnculos
que
sirven
de
enlace
a
otras
pginas.
Vnculos
visitados:
es
el
color
de
los
vnculos
visitados,
que
permite
distinguir
al
usuario
si
unos
vnculos
ya
han
sido
visitados
o
no.
Vnculos
de
sustitucin:
es
el
color
del
texto
del
vnculo
cuando
situamos
el
ratn
encima
del
vnculo.
Vnculos
activos:
es
el
color
de
los
vnculos
activos.
Estilo
subrayado:
por
defecto,
cuando
tenemos
un
texto
con
un
vnculo
asociado,
el
texto
aparece
subrayado,
con
esta
opcin
podemos
elegir
otro
tipo
de
estilo
por
ejemplo
para
que
no
aparezca
subrayado.
En
la
categora
Encabezados
(CSS)
encontramos
la
propiedad:
Fuente
de
encabezado:
permite
establece
el
tipo
de
fuente
de
los
encabezados.
El
resto
propiedades
hacen
referencia
al
estilo
cursiva
o
negrita,
as
como
al
tamao
y
color
que
queremos
aplicar
a
cada
tipo
de
encabezado.
En
la
categora
Ttulo/Codificacin
encontramos
la
propiedad:
Ttulo:
es
el
ttulo
del
documento,
que
aparecer
en
la
barra
de
ttulo
del
navegador
y
de
la
ventana
de
documento
de
Dreamweaver
En
la
categora
Imagen
de
rastreo
encontramos
las
propiedades:
Imagen
de
rastreo:
permite
establecer
una
imagen
como
fondo
del
documento,
pero
que
slo
se
mostrar
en
la
ventana
de
documento
de
Dreamweaver,
y
nunca
en
un
navegador.
Dicha
imagen
se
utiliza
como
plantilla
grfica
sobre
la
que
crear
el
documento.
Transparencia:
permite
establecer
la
opacidad
de
la
imagen
de
rastreo.
Comprobar
tamao
para
optimizar
la
carga:
Si
las
pginas
tienen
muchos
elementos
(imgenes,
tablas,
etc.)
y
son
muy
grandes,
posiblemente
tarden
mucho
tiempo
en
mostrarse
totalmente
en
el
navegador.
Esto
no
3.7.
Los
colores
Para
asignar
colores
es
posible
desplegar
una
paleta
de
colores
como
sta.
Al
seleccionar
un
color
de
estas
paletas,
se
muestra
el
valor
hexadecimal
del
color
en
la
parte
superior.
Las
paletas
de
colores
de
Dreamweaver
utilizan
la
paleta
de
216
colores
seguros
para
web.
stos
son
los
colores
que
se
muestran
de
la
misma
forma
en
cualquier
navegador
bajo
cualquier
sistema
operativo.
Esto
no
quiere
decir
que
slo
podamos
utilizar
estos
colores.
Podemos
personalizarlos
a
travs
del
botn
d
de
la
parte
superior
de
la
paleta.
Los
colores
pueden
asignarse
a
travs
de
los
botones:
Estos
botones
suelen
aparecer
en
el
inspector
de
propiedades
de
muchos
objetos,
y
tambin
en
algunas
ventanas
que
permiten
especificar
propiedades
(sobre
todo
propiedades
de
texto,
fondo,
o
tablas),
como
es
el
caso
de
la
ventana
de
Propiedades
de
la
pgina,
que
vimos
en
este
tema.
El
color
puede
insertarse
de
dos
modos.
Uno
de
ellos
es
pulsando
sobre
el
recuadro
gris
,
l
lo
que
hace
que
se
despliegue
la
paleta
de
colores.
El
otro
modo
es
introduciendo
directamente
el
nmero
hexadecimal
del
color
en
el
recuadro
blanco.
Por
ejemplo,
si
en
la
paleta
de
colores
que
aparece
ms
arriba
se
seleccionara
el
color
azul
con
valor
#39F,
el
botn
quedara
del
siguiente
modo:
En
la
web,
los
colores
se
representan
por
la
cantidad
que
contienen
de
los
colores
primarios
aditivos
(Rojo,
Verde
y
Azul).
Para
indicar
la
cantidad
de
cada
uno,
se
utilizan
nmeros
hexadecimales,
que
van
del
0
a
la
F
(A=10,
B=11,
...,
F=16).
El
valor
mnimo
(00)
indica
la
ausencia
total
de
ese
color,
y
el
mximo
(FF)
su
intensidad
total.
Para
indicar
que
nos
referimos
a
un
color,
utilizamos
el
smbolo
#
la
principio
del
cdigo.
Por
tanto,
podemos
definir
un
color
como
#F7F0E2
donde
el
primer
par
corresponde
al
rojo,
el
segundo
al
azul
y
el
ltimo
al
verde.
En
Dreamweaver
observars
muchas
veces
que
se
emplean
slo
tres
valores.
En
este
caso,
se
interpreta
que
los
valores
de
los
pares
estn
repetidos.
Es
decir,
los
colores
#FF22AA
y
#F2A
son
el
mismo.