Dreamweaver Cs6 Parte1

Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por
nosotros. Rm, 5:8

1
Ing. CIP Herberth Aranda Rojas hhharanda@yahoo.com
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

D R E A M W E A V E R C S 6
N D I C E D E T A L L A D O
UNIDAD 1. CONCEPTOS BSICOS DE DREAMWEAVER CS6
1.1. Qu es Dreamweaver CS6
1.2. Novedades de Dreamweaver CS6
HTML bsico
1.3. Editar pginas web
1.4. Cmo tener una pgina en Internet
1.5. Arrancar y cerrar Dreamweaver CS6
1.6. Abrir y guardar documentos
Compaginar dos sesiones
1.7. Mi primera pgina
UNIDAD 2. EL ENTORNO DE DREAMWEAVER CS6
2.1. La pantalla inicial
2.2. Las barras
2.3. Inspectores y paneles
Personalizar el rea de trabajo
2.4. Vistas de un documento
2.5. La ayuda
UNIDAD 3. CONFIGURAR UN SITIO LOCAL
3.1. Introduccin
3.2. Crear o editar un sitio web sin conexin a Internet
3.3. Abrir un sitio
3.4. Ver el sitio
3.5. Subir archivos al servidor
3.6. Propiedades del documento
Comprobar tamao para optimizar la carga
3.7. Los colores
UNIDAD 4. EL TEXTO: PROPIEDADES Y FORMATO
4.1. Caractersticas del texto
4.2. Listas
4.3. Caracteres especiales
4.4. Estilos CSS. Introduccin
4.5. Crear un estilo personalizado
4.6. Definir o editar un estilo
El Panel CSS
4.7. Aplicar un estilo
4.8. Hojas de estilos
UNIDAD 5. HIPERENLACES

5.1. Introduccin
5.2. Tipos de referencia
5.3. Crear enlaces
Configurar nuevos enlaces
5.4. Destino del enlace
5.5. Formato del enlace
5.6. Enlace a correo electrnico
Vnculos rotos
nosotros. Rm, 5:8
2
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

UNIDAD 6. IMGENES
6.1. Introduccin
6.2. Insertar una imagen
Formatos de imagen para web
6.3. Propiedades de una imagen
Mapas de imagen
Cambiar formato y crear transparencias
Programas de edicin de imgenes
6.4. Cambiar el tamao de una imagen
6.5. Imagen de sustitucin. Rollover
6.6. Barra de navegacin
6.7. Objetos inteligentes
Men CSS
UNIDAD 7. TABLAS
7.1. Introduccin
7.2. Insertar una tabla
7.3. Rellenar las celdas
7.4. Seleccionar elementos de una tabla
7.5. Formato de tabla
7.6. Formato CSS
7.7. Cambiar tamao de tabla y celdas
7.8. Aadir y eliminar filas y columnas
7.9. Anidar, dividir y combinar celdas
7.10. Modos de tabla
7.11. Adaptar webs a distintas resoluciones
UNIDAD 8. MARCOS
8.1. Introduccin
8.2. Crear marcos
8.3. Seleccionar marcos
8.4. Guardar
8.5. Configurar marcos
8.6. Contenido del marco
UNIDAD 9. FORMULARIOS
9.1. Introduccin
9.2. Elementos de formulario
9.3. Crear formularios
9.4. Validar formularios
UNIDAD 10. MULTIMEDIA
10.1. Pelculas Flash (SWF)
10.2. Sonido
10.3. Vdeos
UNIDAD 11. LAS PLANTILLAS
11.1. Introduccin
11.2. Crear plantillas
11.3. Establecer regiones editables en una plantilla
11.4. Basar pginas en una plantilla

nosotros. Rm, 5:8
3
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

UNIDAD 12. HTML DESDE DREAMWEAVER
12.1. Etiquetas
12.2. Entidades HTML
Listado de Entidades HTML
12.3. El inspector de cdigo
12.4. Completar las etiquetas
12.5. Contraer y expandir cdigo
12.6. Errores en el cdigo
12.7. Buscar y reemplazar
Expresiones Regulares
Bsqueda en Etiquetas
UNIDAD 13. OTROS ELEMENTOS
13.1. Marquesinas
13.2. Fecha
13.3. Regla horizontal
13.4. Cdigo de otras pginas
UNIDAD 14. CAPAS
14.1. Introduccin
14.2. Insertar una capa
14.3. Formato de una capa
14.4. Capas prediseadas
UNIDAD 15. COMPORTAMIENTOS
15.1. Introduccin
15.2. Insertar un comportamiento
15.3. Mostrar-Ocultar elementos
15.4. Llamar JavaScript
Eventos

UNIDAD 16. COMPORTAMIENTOS AVANZADOS
16.1. Mensajes emergentes
16.2. Texto de la Barra de Estado
16.3. Carga Previa de Imgenes
16.4. Abrir Ventana del Navegador
16.5. Cambiar propiedades CSS
16.6. Comprobar Plug-ins
16.7. Mens de Salto
UNIDAD 17. ESTILOS CSS AVANZADOS
17.1. Aplicar estilos CSS
17.2. Sintaxis CSS
17.3. Selectores compuestos
17.4. Selectores de atributo
17.5. Pseudo-clases y Pseudo-elementos CSS
17.6. Orden de aplicacin de los estilos CSS
17.7. Controles de fuente
17.8. Espaciado y alineacin
17.9. Apariencia del texto
17.10. Controles de ratn
17.11. Controles de lista
17.12. Controles de fondo
17.13. Controles de margen interior y exterior
nosotros. Rm, 5:8
4
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

17.14. Bordes
17.15. Elementos flotantes
17.16. Controles de elementos de bloque y en lnea
17.17. Controles de posicin
17.18. Controles de visibilidad
UNIDAD 18. DISEO DE PGINA : MAQUETACIN WEB
18.1. Maquetar una pgina web
18.2. Tamao
18.3. Desbordamiento
18.4. Posicionamiento
18.5. Posicionamiento relativo
18.6. Posicionamiento absoluto
18.7. Posicionamiento flotante
18.8. Posicionamiento fijo
18.9. Ancho de la pgina, lquido o elstico
18.10. Maquetacin prediseada en Dreamweaver
18.11. Videotutoriales. Creando un sitio web completo
UNIDAD 19. SITIOS REMOTOS
19.1. Configurar un Sitio Remoto
19.2. El Panel Archivos
19.3. Sincronizar Sitios
UNIDAD 20. SERVIDOR DE PRUEBAS
20.1. Introduccin a PHP
Bases de datos
20.2. Estructura PHP
20.3. Instalar un Servidor Local con WampServer
20.4. Configuracin inicial
20.5. Trabajar con un Servidor Local WampServer
20.6. Configurar un Servidor de Pruebas
20.7. Introduccin a phpMyAdmin
20.8. Crear una Base de Datos en phpMyAdmin
20.9. Crear una Tabla en phpMyAdmin
20.10. Insertar Datos en una Tabla
20.11. Modificar la estructura de la tabla
20.12. Modificar datos de una tabla
20.13. Establecer privilegios en phpMyAdmin
UNIDAD 21. PGINAS DINMICAS
21.1. Introduccin
21.2. Crear una conexin a la Base de Datos
21.3. Juegos de registros o RecordSets
21.4. Mostrar Datos Dinmicos
21.5. Repeticiones
21.6. Orden de Juegos de Registros
21.7. Filtrado de Juegos de Registros
21.8. Paginacin de Registros
21.9. Mostrar/Ocultar Regiones
21.10. Uso de Variables
21.11. Pginas Maestro-Detalle
21.12. Asistente de Insercin de Registros
21.13. Asistente de Actualizacin de Registros
21.14. Asistente de Eliminacin de Registros
21.15. Juegos de Registros Avanzados
nosotros. Rm, 5:8
5
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

UNIDAD 22. CMO CREAR UN BLOG
22.1. Introduccin
22.2. Estructura de datos
22.3. Interfaz pblica
22.4. Interfaz privada
22.5. Insertar nuevos elementos
22.6. Listado de elementos
22.7. Modificacin de elementos
22.8. Eliminacin de elementos
22.9. Restringir acceso

UNIDAD 23. XML Y RSS
23.1. Introduccin
23.2. Importar datos de un Archivo externo
23.3. Trabajar con elementos XML
23.4. Crear repeticiones
23.5. Ordenar elementos
23.6. Sentencias condicionales
23.7. Insertar un fragmento XSLT
23.8. Paso de Parmetros
UNIDAD 24. ACCESO A DATOS CON SPRY
24.1. Introduccin
24.2. Conjunto de datos XML
24.3. Crear una regin de Spry
24.4. Repeticin de Elementos
24.5. Listas de Repeticin
24.6. Mostrar Maestro - Detalle
UNIDAD 25. AJAX Y SPRY FRAMEWORK
25.1. Introduccin
25.2. Incluir Spry
25.3. Importar Datos
25.4. Definiendo regiones Spry
25.5. Mostrar informacin
25.6. Crear Repeticiones
25.7. Ordenar registros
25.8. Condicionales
25.9. Filtros
25.10. Eliminar filas repetidas
25.11. Actualizar la carga de un archivo XML
25.12. Modo Maestro/Detalle
25.13. Modo Maestro/Detalle con diferentes fuentes XML
25.14. Spry y estilos CSS
25.15. Importar Datos (II)
UNIDAD 26. SPRY Y FORMULARIOS
26.1. Introduccin
26.2. Validacin de campos de texto
26.3. Estados de validacin
26.4. Validacin de campos desplegables
26.5. Grupo de opciones
26.6. Casillas de verificacin
nosotros. Rm, 5:8
6
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

26.7. reas de texto
26.8. Contraseas
26.9. Campo de confirmacin
UNIDAD 27. CONTROLES SPRY AVANZADOS
27.1. Introduccin
27.2. Barra de mens
27.3. Navegacin por Fichas
27.4. Control Acorden
27.5. Panel con Contraccin
27.6. Cambiar Estilos CSS
Ejercicios paso a paso por Captulos

3. Crear un sitio web local
3. Crear nuevo documento y modificar sus propiedades
4. Insertar texto y modificar sus propiedades
4. Convertir texto en una lista
4. Redefinir el estilo de una etiqueta
4. Crear y aplicar una clase
4. Modificar el estilo de una lista
4. Exportar y vincular hojas de estilo
5. Crear un hiperenlace
5. Crear un vnculo de correo electrnico
6. Insertar una imagen
6. Crear Mapas de imagen
6. Crear Rollovers
7. Crear y rellenar una tabla
7. Modificar las propiedades de la tabla
7. Modificar el estilo de la tabla
7. Ajustar el tamao de la tabla
7. Combinar celdas
8. Crear y configurar marcos
9. Insertar elementos de formulario
10. Insertar un archivo de audio
11. Crear una plantilla
12. Buscar y reemplazar
13. Insertar la fecha de ltima actualizacin
14. Insertar una capa
15. Crear comportamiento
17. Crear una hoja de estilo CSS
17. Utilizando pseudo-elementos y clases
17. Controles de Fuente
17. Controles de Lista
17. Controles de Fondo
17. Controles de Mrgenes y Borde
17. Controles de Bloque
17. Controles de Posicin y visibilidad
20. Crear un alias en WampServer
20. Crear un Servidor de Prueba
20. Crear una Base de datos MySQL
20. Crear una tabla
20. Importar datos a una tabla
20. Asignar privilegios
21. Crear una conexin a base de datos
21. Crear un Recordset
21. Texto dinmico
21. Repeticin de texto dinmico
21. Ordenar un RecordSet
21. Filtrado de registros
nosotros. Rm, 5:8
7
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

21. Paginacin de registros
21. Recuento de registros
21. Ocultar/mostrar regiones
21. Enlaces con parmetros
21. Filtrar con parmetros
21. Insercin de registros
21. Utilizar sentencias SQL
22. Estructura de datos de un Blog
22. Interfaz Pblica
22. Creacin de un Men de Administracin
22. Insercin de elementos
22. Listado de elementos
22. Modificar elementos
22. Eliminar elementos
22. Restringir Acceso
23. Preparando el Servidor de Pruebas para XLS
23. Importar datos RSS
23. Enlaces con elementos
23. Repeticin de elementos
23. Ordenacin de elementos
23. Insertar XSLT en una pgina dinmica
23. Paso de parmetros
25. Crear un dataset
25. Crear una regin con informacin
25. Crear repeticiones de registros
25. Crear condiciones
25. Crear Filtros

Ejercicios propuestos por Captulos.

3. Configurar un sitio local
4. El texto: propiedades y formato
5. Hiperenlaces
6. Imgenes
7. Tablas
9. Formularios
10. Multimedia
11. Las plantillas
12. HTML desde Dreamweaver
13. Otros elementos
14. Capas
15. Comportamientos
16. Comportamientos avanzados
17. Estilos CSS Avanzados
18. Diseo de pgina. Maquetacin web
20. Servidor de Pruebas
21. Pginas dinmicas
22. Cmo crear un Blog
23. XML y RSS
24. Acceso a datos con Spry
25. AJAX y Spry Framework
26. Spry y Formularios
27. Controles Spry Avanzados

nosotros. Rm, 5:8
8
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Pruebas evaluativas por Captulos

1. Conceptos bsicos de Dreamweaver CS6
2. El entorno de Dreamweaver CS6
3. Configurar un sitio local
4. El texto: propiedades y formato
5. Hiperenlaces
6. Imgenes
7. Tablas
8. Marcos
9. Formularios
10. Multimedia
11. Las plantillas
12. HTML desde Dreamweaver
13. Otros elementos
14. Capas
15. Comportamientos
16. Comportamientos avanzados
17. Estilos CSS Avanzados
18. Diseo de pgina. Maquetacin web
19. Sitios remotos
20. Servidor de Pruebas
21. Pginas Dinmicas
22. Cmo crear un Blog
23. XML y RSS
24. Acceso a datos con Spry
25. AJAX y Spry Framework
26. Spry y Formularios
27. Controles Spry Avanzados
Videotutoriales por Captulos.
ndice de videotutoriales

1. Conceptos bsicos Ver en YouTube
2. El entorno de trabajo Ver en YouTube
2. Las vistas Ver en YouTube
2. La ayuda Ver en YouTube
3. Crear un sitio local Ver en YouTube
3. Las propiedades de la pgina Ver en YouTube
4. Estilo CSS de las etiquetas Ver en YouTube
4. Crear y aplicar clases CSS Ver en YouTube
5. Los hiperenlaces Ver en YouTube
6. Insertar una imagen Ver en YouTube
6. Objetos inteligentes Ver en YouTube
7. Insertar y modificar tablas Ver en YouTube
8. Insertar un marco Ver en YouTube
9. Crear formularios Ver en YouTube
10. Insertar elementos multimedia Ver en YouTube
11. Crear plantillas Ver en YouTube
12. HTML desde Dreamweaver Ver en YouTube
13. Insertar otros elementos Ver en YouTube
14. Insertar capas Ver en YouTube
nosotros. Rm, 5:8
9
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

15. Insertar comportamientos Ver en YouTube
16. Crear un men de salto Ver en YouTube
17. Estilos CSS Ver en YouTube
18. Maquetar una pgina web (1/2) Ver en YouTube
18. Maquetar una pgina web (2/2) Ver en YouTube
18. Crear un sitio web completo (1/4) Ver en YouTube
19. Configurar un sitio remoto Ver en YouTube
20. Crear una base de datos en phpMyAdmin Ver en YouTube
20. Editar registros con phpMyAdmin Ver en YouTube
21. Crear un juego de registros Ver en YouTube
21. Utilizar un juego de registros Ver en YouTube
21. Paginacin de registros Ver en YouTube
21. Insertar registros Ver en YouTube
21. Eliminar registros Ver en YouTube
22. Qu es un Blog? Ver en YouTube
23. Mostrar noticias de un RSS Ver en YouTube
24. Acceso a datos con Spry Ver en YouTube
25. Spry desde el cdigo Ver en YouTube
26. Validar formularios con Spry Ver en YouTube
27. Men y fichas con Spry Ver en YouTube
nosotros. Rm, 5:8
10
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

UNIDAD 1.
CONCEPTOS BSICOS DE DREAMWEAVER CS6
1.1. Qu es Dreamweaver CS6
Dreamweaver CS6 es un software fcil de usar que permite crear pginas web profesionales.

Las funciones de edicin visual de Dreamweaver CS6 permiten agregar rpidamente diseo y
funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc..,
de una forma muy sencilla y visual.
Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con
mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de
Adobe, la versin caduca al cabo de 30 das, pero seguro que te dar tiempo a entenderlo y decidir si
quieres adquirir la versin completa de este fantstico programa.
Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas
Dreamweaver y Adobe. aulaClic no tiene ninguna relacin con Adobe.
Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de HTML
puedes verlas aqu.
1.2. Novedades de Dreamweaver CS6
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.

nosotros. Rm, 5:8
11
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Compatibilidad con CMS integrada. Un sistema de gestin de contenidos (en ingls Content
Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido
de un sitio web. Cada vez son ms usados, y ahora Dreamweaver integra con los principales,
permitindonos crear nuestras pginas con la estructura adecuada.

Inspeccionar CSS. Ahora, con la opcin Inspeccionar, podemos ver claramente los mrgenes aplicados
al elemento seleccionado, y qu propiedades le afectan, tanto si son propias, como heredadas de los
elementos padre.

Integracin Adobe Browserlab. Adobe Browser Lab es un servicio en lnea de Adobe, que nos permite
comparar cmo se ve una misma pgina web en las distintas versiones de Internet Explorer, Firefox y
Safari, bajo los sistemas operativos de Windows o Mac OS.

Este servicio es fcilmente accesible desde Dreamweaver, pero realmente cualquiera puede usarlo desde
su pgina web.

nosotros. Rm, 5:8
12
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Configuracin sencilla de sitios. Ahora resulta ms sencillo configurar nuestro sitio local y remoto.
Ya que se han simplificado las opciones esenciales, y distinguido ms las opciones avanzadas y poco
importantes.

Sugerencias de cdigo. Ahora las sugerencias de cdigo incluyen nuestras clases personalizadas,
y los comandos y funciones propios de los distintos CMS soportados.
Nueva interfaz de usuario. Dreamweaver CS6 presenta una nueva interfaz que permite cambiar
fcilmente de espacio de trabajo y adaptar los paneles de forma rpida y cmoda. Esta nueva interfaz
es muy parecida a los dems programas de Adobe, como Photoshop, Illustrator, etc. Existen distintos
espacios de trabajo adecuados para cada ocasin (clsico, programador, diseador, etc. ) pero
tambin tenemos la posibilidad de crear el nuestro propio de forma muy sencilla.
Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veramos la
pgina en un navegador. Si hemos incluido elementos interactivos en nuestra pgina, como mens
desplegables, mens tipo acorden, widgets, etc, podremos interactuar con ellos en la vista en vivo, de
la misma forma que lo haramos en un navegador.

Navegador de cdigo. La funcin de Navegador de cdigo muestra las fuentes de cdigo que
afectan a la seleccin que tengamos activa, pueden ser CSS (hojas de estilos en cascada), funciones
JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.

nosotros. Rm, 5:8
13
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

La nueva barra de Archivos relacionados muestra todos los archivos que de una forma u otra
contribuyen al diseo final de nuestra pgina, como hojas de estilo css, archivos javascript, etc.
Mediante esta nueva utilidad podemos pasar de un archivo a otro cmodamente y tener una visin
mucho ms clara de todos los archivos con los que estamos trabajando en nuestro sitio web.

Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido en
propiedades HTML (el que conocamos de otras versiones) y CSS. ste ltimo nos permite crear y
editar nuestros estilos de forma cmoda y sencilla.

Objetos inteligentes de imagen. Dreamweaver CS6 incluye la posibilidad de crear
objetos inteligentes de imagen. Ahora podemos incluir un archivo psd en las pginas web, de forma
que el archivo original de Photoshop y la imagen optimizada en Dreamweaver se mantienen
vinculados. Podemos redimensionar o cambiar caractersticas de los objetos inteligentes de imagen
directamente desde Dreamweaver.
Adobe InContext Editing. Mediante Adobe InContext Editing creamos regiones editables. De
esta forma los usuarios previamente habilitados podrn actualizar el contenido de estas regiones de la
pgina web directamente desde el navegador, sin necesidad de tener un editor de pginas web
instalado.
Software Subversion. Subversion es uno de los ms usados sistemas de control de versiones
para equipos de desarrollo. Dreamweaver CS6 es capaz de sincronizarse con el repositorio de
versiones, facilitando el trabajo a los profesionales que empleen este sistema.
Conjuntos de datos. Dreamweaver CS6 permite la creacin de pginas dinmicas de forma
sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad de conocer en
profundidad su funcionamiento. Resulta muy sencillo crear regiones dinmicas con la tecnologa Spry.

nosotros. Rm, 5:8
14
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

1.3. Editar pginas web

Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los
documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML
deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un edi tor
grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la
pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina, sobre
todo si no estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que escribir el
cdigo nos da ms control sobre l, y sobre todo al principio, nos ayudar a aprenderlo rpidamente.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que
destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser
Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales
tienen la ventaja de ser gratuitos.
1.4. Cmo tener una pgina en Internet
Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por
disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de
transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio
de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en
cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender
nosotros. Rm, 5:8
15
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en
ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa,
aunque s es aceptable para una pgina personal, sobre todo al comienzo.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio,
tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en
registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser
nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con
distintas terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra
pgina no ser ms que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de
cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos
para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para
usuarios avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.
En cualquier caso, una vez que tengas tu espacio en Internet, darle contenido es muy
sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que
se encuentre a disposicin de todo el mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor
manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen
en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no
lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni
espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurars de que el
servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los
nombres en minscula. Algunos servidores (los que utilizan linux) distinguen entre maysculas y
minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese
nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.
nosotros. Rm, 5:8
16
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

1.5. Arrancar y cerrar Dreamweaver CS6
Veamos las dos formas bsicas de arrancar Dreamweaver CS6.
Desde el botn Inicio (Windows Vista 7) situado, normalmente, en la esquina inferior
izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un
men. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que
hay instalados en tu ordenador, buscar Adobe Dreamweaver CS6 y haz clic sobre l para
arrancar el programa.
Desde el icono de Dreamweaver CS6 del Escritorio .
Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos. Cuando
realices los ejercicios tambin puedes compaginar dos sesiones de la forma que puedas ver el tema
mientras utilizas Dreamweaver, como te explicamos aqu.
Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn cerrar , en la esquina superior derecha, como en cualquier ventana de
Windows.
Pulsar la combinacin de teclas Alt + F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te
pedir confirmacin para guardar o no cada uno de ellos.
1.6. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botn abrir de la barra de herramientas estndar (si est visible).
Pulsar la combinacin de teclas Ctrl + O.
Hacer clic sobre el men Archivo y elegir la opcin Abrir.
Hacer doble clic sobre el archivo en la ventana del sitio.
Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opcin Abrir con
Adobe Dreamweaver CS6.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
Hacer clic en el botn nuevo de la barra de herramientas estndar (si est visible).
Pulsar la combinacin de teclas Ctrl + N.
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
nosotros. Rm, 5:8
17
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en
blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya creados que
podemos elegir, para nuestro primer ejemplo elegimos en Diseo ninguno. A continuacin pulsamos
el botn Crear.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn Guardar de la barra de herramientas estndar.
Pulsar la combinacin de teclas Ctrl + S.
Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios
documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar
todo puedes realizar cualquiera de las siguientes operaciones.
Hacer clic en el botn Guardar todo de la barra de herramientas estndar.
Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.
Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones hechas en cada
uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es
posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente
nosotros. Rm, 5:8
18
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

que al principio no utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa.
De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del
documento .
1.7. Mi primera pgina
Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina
web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo
te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn
hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para
descubrir lo fcil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como
puede hacerse. Abre un documento nuevo y selecciona la Categora Pgina bsica, HTML, en la
columna Diseo dejamos la opcin por defecto: <ninguno>.
Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:

Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del documento.
Para ello podemos hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.
nosotros. Rm, 5:8
19
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Entonces se abrir una ventana como la que aparece a continuacin:

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color
azul.
Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera pgina.
Para aplicar los cambios, pulsa sobre el botn Aceptar.
Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde
estamos creando nuestras pginas, habitualmente en una subcarpeta dedicada a las imgenes.
Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el
botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una
opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite
grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas publicar la
pgina en Internet, hay que respetar los derechos de autor de la imagen.
Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que
estamos creando. Gurdala en la carpeta dnde vas a guardar la pgina que acabas de crear.
nosotros. Rm, 5:8
20
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar, situamos el
cursor al final de la segunda lnea y creamos un salto de lnea (tecla Enter). Despus nos dirigimos al
men Insertar, opcin Imagen.

En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas
guardado, seleccionarla y pulsar Aceptar.
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de
propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente
aspecto:

Si no te aparece, puedes mostrarlo a travs del men Ventana, opcin Propiedades.
Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contrado. Para
que te aparezca desplegado debes hacer doble clic en Propiedades.

Selecciona la primera lnea de texto. En el inspector de propiedades pulsa HTML y aplica el formato
Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.
nosotros. Rm, 5:8
21
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS
a la izquierda.
Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades de
CSS como a las propiedades de HTML.

Podemos decir que en una pgina web, HTML se encarga de estructurar el contenido, la
informacin, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.
Al utilizar el inspector de propiedades de CSS (Cascading Style Sheets), Dreamweaver aplica
formato al texto mediante estilo de hojas en cascada. Los estilos CSS ofrecen un mayor control sobre
el diseo de la pgina Web y reducen el tamao del archivo.
Selecciona la primera lnea. En Regla de destino selecciona Estilo en lnea, para aplicar el formato
solo al texto seleccionado. Tambin aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul
#009 y centra el texto, tal y como muestra la imagen siguiente:

Observa que hemos centrado el texto pulsando en el botn .
Selecciona la segunda lnea de texto, y seleccionando como antes < estilo en lnea >, marca los
botones para ponerlo en negrita y cursiva respectivamente.
Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el contenido
del prrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos
aparece la jerarqua de etiquetas. Haz clic sobre p.
Ahora, centra el prrafo como hemos visto hasta ahora, pulsando en .
Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel de
Propiedades a las propiedades de HTML.
nosotros. Rm, 5:8
22
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:

Por ltimo guarda el documento. Ya sabes
que puedes hacerlo a travs del men Archivo, desde la opcin Guardar.
Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html. Por ejemplo, lo
hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen
descargada.
Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.
Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos
los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has hecho todo bien.
Prueba evaluativa de la Unidad 1

EJEMPLO DE DISEO
Esta es mi primera pgina.
Esta pgina nos servir para comprobar el funcionamiento de Dreamweaver.

A continuacin se muestra un enlace para acceder a otra web.
www.fiupla.edu.pe

nosotros. Rm, 5:8
23
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

UNIDAD 2.
EL ENTORNO DE DREAMWEAVER CS6
Vamos a ver cules son los elementos bsicos de Dreamweaver CS6, la pantalla, las barras, los
paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde
estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos
cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear
pginas web.

2.1. La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes
fundamentales. As conoceremos los nombres de los diferentes elementos Y SERA mas fcil ententer
el resto del curso) puede no coninsidir con el ordenador ya que cad usuario puede decidir que
elementos quiere que se vean en cada momento y donde , como se vera mas adel ante.

nosotros. Rm, 5:8
24
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

2.2. Las barras
La barra de la aplicacin.

La barra la aplicacin es una novedad en Dreamweaver CS6. Si tenemos la ventana maximizada
veremos todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en
la imagen superior.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios
botones propios de la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas
para obtener ayuda on line.

Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a
izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones que se pueden aadir,
o al administrador de sitios, que ya veremos.

Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un
espacio de trabajo es la configuracin del entorno (paneles visibles y su disposicin) que podemos
guardar y cargar. Lo veremos ms adelante.
Los mens, estn agrupados en categoras.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes
elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son
accesibles a travs de los mens, aunque en ocasiones nos enven a los paneles.
Las pestaas de documento.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir
cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene
nosotros. Rm, 5:8
25
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

cambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones
haciendo clic con el botn derecho, como Cerrar otros archivos.
Dreamweaver CS6 aade una novedad. Debajo de las pestaas encontramos los archivos a que
utiliza nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con
un clic. Esto nos ahorrar bastante tiempo.
La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el
mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas.
Siguiendo hacia la derecha encontramos las herramientas de Seleccin, Mano (para desplazarse) y
Zoom. Y otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin.

Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver
u ocultar desde el men Ver Barras de herramientas.

La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del
men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge,
Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.
La barra de herramientas de documento.
nosotros. Rm, 5:8
26
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las
distintas vistas de edicin y la vista en vivo, acceder cmodamente al ttulo de la pgina, o realizar las
distintas opciones de validacin que nos ofrece el programa.
La barra de representacin de estilos.

Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos
dispositivos, si estamos utilizando hojas distintas que dependan del eso.
Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo
como otra barra de herramientas.

2.3. Inspectores y paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen
como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y
opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da
acceso a opciones generales.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los
paneles o inspectores. Vamos a ver los ms importantes.
El inspector de Propiedades

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado,
permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en
Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrar su ubicacin,
dimensiones, peso, clase, etc...
nosotros. Rm, 5:8
27
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los
diferentes elementos de la pgina Web que estemos diseando.
El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar,
clasificados en categoras. Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas,
formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imgenes, es posible configurar este panel para verlo como men, como panel
flotante o como una barra de herramientas integrada en la ventana de trabajo.
Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este
avanzado .

2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de
documento:
nosotros. Rm, 5:8
28
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

La vista Diseo
La vista Diseo permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo
fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn
se va modificando el cdigo.
nosotros. Rm, 5:8
29
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.
La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona superior muestra
el cdigo fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este
cambio se aplica directamente sobre la otra.

nosotros. Rm, 5:8
30
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

La vista en Vivo
La vista en Vivo es otra de las novedades que trae Dreamweaver CS6. Nos ofrece una vista del
resultado final no editable. A diferencia de la vista Diseo, que nos permite editar los elementos, esta
vista nos permite interactuar con ellos, tal como lo haramos con el navegador.
La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos
cambios se previsualizan correctamente en el navegador.
No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado,
que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso vers cmo algunos
elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en el
navegador.
La vista Cdigo en vivo
Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir,
pero sin que podamos editar el cdigo. Lo que hace es que al seleccionar partes de la web en la Vista
en vivo, se seleccione su correspondiente cdigo fuente.
2.5. La ayuda

nosotros. Rm, 5:8
31
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas:
Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por
temas, por ndice o por contenido, si seleccionas la opcin Ayuda de Dreamweaver o
simplemente pulsando F1.
Acceder a una Introduccin a InContext Editing de la pgina de Adobe, que muestra un resumen
de esta herramienta.
Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML.
Acceder a Dreamweaver Support Center en la web.
Acceder al Foros en lnea de Adobe.
Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de
la bsqueda y buscar, iremos a la ayuda online de Adobe.

nosotros. Rm, 5:8
32
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

UNIDAD 3.
CONFIGURAR UN SITIO LOCAL
En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las
propiedades de los documentos, como puede ser el color de fondo.
3.1. Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo
similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas
que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las
imgenes, las animaciones, archivos de tipos especfico, etc., se deben crear nuevas carpetas dentro
de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es
lo que se conoce como sitio local.
Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo
que equivale a publicar el sitio, de modo que la gente podr verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del
sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.
La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los
vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc.
La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando
se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese nombre.
Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.es en el navegador, ste
intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el
caso de que no existiera ninguna pgina con el nombre index.htm, y no se podra navegar por el sitio
a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm

nosotros. Rm, 5:8
33
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

3.2. Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta
raz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo
sitio.
Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos.
Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin
Administrar sitios o Nuevo sitio...

nosotros. Rm, 5:8
34
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene
la lista de sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

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.

nosotros. Rm, 5:8
35
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

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.
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 raz 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.
Aunque s destacaremos la opcin Usar vnculos de distincin entre maysculas y minsculas.
Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores
distinguen entre maysculas y minsculas. As Dreamweaver tambin lo har.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa
Bsicas, en vez de la pestaa Avanzadas.
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 puedes realizar el Ejercicio paso a paso Crear un sitio web local.

nosotros. Rm, 5:8
36
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Unidad 3.
Ejercicio paso a paso: Crear un sitio web local
Objetivo
Practicar las operaciones que hay que realizar para crear un sitio sin conexin a Internet.
En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante
que realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios estn diseados para ir
construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores
puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.
Nota: Si es la primera vez que realizas los ejercicios, recuerda que encontrars todos los archivos
necesarios en la carpeta de ejercicios. Esta carpeta se incluye con los cursos de pago, pero tambin
puede ser descargada gratuitamente por cualquier usuario registrado en aulaClic.
Ejercicio
1. Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar los archivos de
los distintos que vayamos creando. Llmala mis_sitios.
2. Copia a ella la carpeta cocina que encontrars en la carpeta ejercicios del curso.
3. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
4. Haz clic sobre el men Sitio.
5. Elige la opcin Administrar sitios. Se abrir una nueva ventana.
6. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana.
7. Selecciona la pestaa Avanzadas de la nueva ventana.
8. Selecciona Datos locales en Categora.
9. En Nombre del sitio escribe Cocina.
10. En Carpeta raz local busca la carpeta cocina que acabas de copiar, y que se encuentra dentro
de la carpeta mis_sitios. Seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.
11. En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro
de la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta.
12. Haz clic sobre el botn Aceptar y sobre el botn Listo.
A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la
que aparece si pulsas aqu.

nosotros. Rm, 5:8
37
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

3.4. Ver el sitio
El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes
de Dreamweaver, ya que nos da acceso a los archivo del sito.

En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm,
platossemana.htm, postresemana.htm y las carpetas imagenes y varios.
Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a
otra hay que pulsar sobre el botn que aparece en la parte superior del panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor),
y poder, por ejemplo, sincronizar los archivos, o compararlos. Tambin el servidor de pruebas o las
bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha)
con nuestros archivos.
nosotros. Rm, 5:8
38
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

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.
nosotros. Rm, 5:8
39
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

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.
nosotros. Rm, 5:8
40
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Aqu debers introducir los datos que te facilit el servidor dnde 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. Se puede usar el
FileZilla
nosotros. Rm, 5:8
41
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

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.
nosotros. Rm, 5:8
42
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

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.
nosotros. Rm, 5:8
43
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

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.
nosotros. Rm, 5:8
44
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

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:

nosotros. Rm, 5:8
45
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

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.
Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador.
Para ver cmo comprobar el tamao de los documentos, pulsa aqu .
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 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.
nosotros. Rm, 5:8
46
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , 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.

Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus
propiedades.

nosotros. Rm, 5:8
47
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Unidad 3. Avanzado:
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 es nada recomendable, ya que
los usuarios pueden perder la paciencia, y no visitar ms nuestra pgina.
Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado.
Dreamweaver permite calcular automticamente el tiempo de descarga de las pgi nas. Para ello hay
que dirigirse al men Edicin, a la opcin Preferencias.

En esta nueva ventana lo primero que hay que hacer es seleccionar una Categora. En este caso
nos interesa la de Barra de estado.
En ella habr que establecer una Velocidad de conexin.
La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que se conectaban lo
mdems telefnicos. Actualmente, las conexiones de ADSL y cable llegan a cifras mucho mayores, de
varios MB/s. No obstante, ha que establecer el valor al de la conexin media de la regin de los
usuarios a los que va destinada la web.
Una vez establecida una velocidad de conexin, y aceptados los cambios, Dreamweaver calcular el
tamao y el tiempo de descarga de la pginas a partir de esa velocidad de conexin.
nosotros. Rm, 5:8
48
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Hay que tener en cuenta que el tamao de descarga de una pgina no solo se calcula a partir del
tamao de esa pgina en disco, sino que hay que considerar tambin el tamao de las imgenes que
aparecen en ella, y del resto de elementos.
Cuando en la ventana de documento de Dreamweaver est abierta alguna pgina, se mostrarn su
tamao y su tiempo de descarga en la barra de estado.
Por ejemplo, esta pgina que ests viendo tiene un tamao de descarga de 39K, y se presupone un
tiempo de descarga de 1 segundos (para una conexin ADSL), ya que en la barra de estado de la
ventana de documento aparecen estos datos entre el tamao de la ventana de documento y el panel
de propiedades, representados por 70K/10 s.

Ejercicios unidad 3: Configurar un sitio local
En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que
realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios estn diseados para ir
construyendo una pgina web completa y si intentas realizar un ejercicio sin haber hecho los anteriores
puede que no veas un resultado muy coherente.
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
A partir de este momento vamos a realizar todos los ejercicios en la vista Diseo, a no ser que se
indique lo contrario. Haz clic sobre el botn Mostrar vista de diseo .
Ejercicio 1: Deportes.
1. Copia la carpeta deportes que encontrars en la carpeta ejercicios a la carpeta mis_sitios
(creada en los ejercicios paso a paso del tema). Crear un sitio local con el nombre Deportes,
cuya carpeta raz sea la carpeta deportes, que se encuentra dentro de la carpeta mis_sitios.
2. Abrir el documento index.htm.
3. Modificar sus propiedades para que el color de los vnculos, sea cual sea su estado, sea #000 y
nunca se encuentren subrayados.
4. Asgnale la imagen fondo-logo.gif que se encuentra en la carpeta imagenes del sitio aparezca
como fondo sin repeticin.
5. Haz que la fuente del documento sea Verdana, Arial, sans-serif 18px, y de color #535D6F.
6. Haz que el ttulo de la pgina sea Tu tienda de deportes.
7. Guardar todos los cambios y cerrar los documentos.
A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la

nosotros. Rm, 5:8
49
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Ejercicio 2: Animales.
1. Copia la carpeta animales que encontrars en la carpeta de ejercicios a la carpeta mis_sitios,
creada en el primer ejercicio paso a paso de la unidad.
2. Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se
encuentra dentro de la carpeta mis_sitios, copiada en el paso anterior.
3. Abre el documento consultas.htm y modifica sus propiedades, para que su ttulo sea Consultas.
4. Abre el documento gatos.htm y modifica sus propiedades, para que su ttulo sea Gatos.
5. Abre el documento perros.htm y modifica sus propiedades, para que su ttulo sea Perros.
6. Abre el documento index.htm y modifica sus propiedades, para que su ttulo sea Inicio.
7. Guarda los cambios y cierra los documentos.
A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.
Ayuda ejercicios unidad 3: Configurar un sitio local
Ejercicio 1: Deportes
Apartado 1 Copia la carpeta deportes que encontrars en la carpeta ejercicios a la carpeta
mis_sitios.
Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men Sitio.
En la nueva ventana, seleccionar el botn Nuevo...
En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales.
En Nombre del sitio hay que escribir Deportes.
En Carpeta raz local hay que seleccionar la carpeta deportes, que has copiado a la carpeta
mis_sitios.

Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta deportes, como
Carpeta predeterminada de imgenes.
Por ltimo, hay que hacer clic sobre el botn Aceptar.
Apartado 2 Para abrir el documento index.htm puedes hacer doble clic sobre l en el panel
Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en
el men desplegable que aparece.
Apartado 3 Una vez abierto el documento en Dreamweaver, elige a la opcin Propiedades de la
pgina del men Modificar.
En la nueva ventana haz clic en la categora Vnculos (CSS), y en los campos que aparecern a la
derecha modifica Color de vnculo, Vnculos visitados, Vnculos de sustitucin y Vnculos activos
y dales el valor #000, en el campo Estilo subrayado escoge Nunca subrayar.
Apartado 4 Selecciona la categora Apariencia (CSS) y modifica los campos a los siguientes
valores: Imagen de fondo: imagenes/fondo_logo.gif; Repetir: no repetir.
Apartado 5 Modifica tambin los campos Fuente de pgina: Verdana, Arial, sans-serif; Tamao:
16 y Color de texto: #535D6F.
Apartado 6 En Ttulo/Codificacin escribe Tu tienda de deportes.
Por ltimo, pulsa el botn Aceptar.
nosotros. Rm, 5:8
50
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Apartado 7 Haz clic sobre el botn Guardar (o pulsa las teclas Ctrl + S), y despus sobre el
botn Cerrar . El botn de cerrar cambia dependiendo del diseo de vista de la pgina, si es como
fichas o como ventanas flotantes.
Ejercicio 2: Animales

Apartado 1 Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men Sitio.
En la nueva ventana, seleccionar el botn Nuevo...
En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales.
En Nombre del sitio hay que escribir Animales.
En Carpeta raz local hay que seleccionar la carpeta animales, mis_sitios.
Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta animales, como
Carpeta predeterminada de imgenes.
Por ltimo, hay que hacer clic sobre el botn Aceptar.
Apartado 2 Para abrir el documento consultas.htm puedes hacer doble clic sobre l, en el panel
Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos.
Escribe Consultas en el campo Ttulo de la barra de herramientas de documento. Si no la ves,
puedes activarla desde el men Ver Barras de herramientas Documento.
Apartado 3 Para abrir el documento gatos.htm puedes hacer doble clic sobre l, en el Archivos.
Escribe Gatos en el campo Ttulo de la barra de herramientas de documento.
Apartado 4 Para abrir el documento perros.htm puedes hacer doble clic sobre l, en el panel
Archivos.
Escribe Perros en el campo Ttulo de la barra de herramientas de documento.
Apartado 5 Para abrir el documento inicio.htm puedes hacer doble clic sobre l, en el panel
Archivos.
Escribe Inicio en el campo Ttulo de la barra de herramientas de documento.
Apartado 6 En todos los documentos, hacer clic sobre el botn Guardar , y despus sobre el
botn Cerrar .
Otra opcin sera utilizar el men Archivo Guardar todo y men Archivo Cerrar todo.

nosotros. Rm, 5:8
51
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

UNIDAD 4.
EL TEXTO, PROPIEDADES Y FORMATO
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos
CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.
4.1. Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a
travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del
inspector de propiedades, que estn clasificadas en dos categoras HTML y CSS.
Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador.
Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.
Formato:
Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado,
prrafo o formato predeterminado. Los encabezados se utilizan para establecer ttulos dentro de
un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido
escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno,
pero al establecer el formato predeterminado se respetar que hayan varios espacios en lugar de
solo uno. El texto normal, debera ir siempre en prrafos, salvo que est en otros elementos,
como tablas o listas.
Es importante emplear correctamente los encabezados, ya que se organizar mejor el contenido
de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cmo se
muestran esos encabezados, recuerda que siempre podremos personalizarlo.
Estilo:
El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra
en negrita. El botn I, lo encierra entre <em></em>, que por defecto se ve en cursiva.
nosotros. Rm, 5:8
52
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs
del men Texto. Por ejemplo, subrayar el texto. Esta opcin no aparece en el panel de
Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen
subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un
vnculo. Adems, emplea etiquetas que estn en desuso.
Lista:
Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas
en el siguiente apartado.
Sangra:
Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de
margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangra
a la izquierda del texto.
Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta
<blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En
cambio, al aplicarlo sobre una lista, crear una sublista dentro de sta.

Accediendo a las propiedades CSS.
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra
pgina y darle el diseo que queramos. Podemos cambiar desde propiedades simples, como el color
de fondo, hasta cosas ms vistosas, como hacer que un bloque se muestre en una posicin
determinada o que un elemento cambie al pasar el cursor sobre l. Profundizaremos en esto ms
adelante, por ser una parte fundamental en la creacin de pginas web.
Tenemos ms posibilidades a la hora de aplicar formatos. Dreamweaver CS6 nos proporciona
numerosas funciones para la creacin de estilos mediante hojas de estilos en cascada .

Regla de destino:
Las reglas CSS sirven para definir a qu elemento aplicamos el estilo, y cmo lo hacemos.
Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de
acabar el tema.
Editar regla:
Mediante este botn accedemos a las opciones para la creacin o modificacin de estilos CSS,
de la regla seleccionada.
nosotros. Rm, 5:8
53
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Panel CSS:
Este botn abre el panel CSS si no lo tuviramos abierto.
Fuente: Permite seleccionar un conjunto de
fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer
una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes
posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por
ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se ver con la fuente Arial, pero
si esta no existe se ver en Helvetica.
Estilo:
Estos botones ponene el texto en negrita y cursiva respectivamente.
Alineacin:
A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro
formas distintas: izquierda, centrada, derecha y justificada.
Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo
sobre un prrafo.
Tamao:
Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en
pxeles, porcentajes del tamao base, etc...
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las
propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni
aqu, el color del texto por defecto ser el negro.
Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus
propiedades.

Ejercicio paso a paso: Insertar texto y modificar sus propiedades
Objetivo
Practicar las operaciones de insertar texto y modificar sus propiedades.
Ejercicio
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
nosotros. Rm, 5:8
54
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

3. Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema
anterior.
4. Haz doble clic sobre el documento quienes.htm, que aparece en los archivos desplegados en el
panel de Archivos. Se abrir el documento en Dreamweaver.
5. Sita el punto de insercin antes de la primera letra de la primera lnea.
6. Escribe el texto Quines somos y pulsa la tecla Intro para saltar de lnea.
7. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin
Propiedades.
8. Haz clic en el texto Quines somos.
9. En Formato, del inspector de propiedades, elige Encabezado 1. Observa como ahora el texto es
de mayor tamao.
10. En la barra de herramientas de documento, haz clic sobre la caja de texto Ttulo, y escribe
Quines somos.
11. Haz clic sobre el botn Guardar de la barra de herramientas.
Ejercicio Propuesto Unidad 4: El texto, propiedades y formato
1. Abrir el sitio Deportes.
3. Edita el estilo de la pgina. Asigna la propiedad margen a 20px para todos los lados. El fondo
debe ser posicionado en el centro en el eje horizontal y arriba en el eje vertical.
4. Crea una regla de estilo para la etiqueta HTML. En ella debes de cambiar las propiedades para
que muestre la imagen fondo.png como fondo, ocupando la parte superior de la pgina, y
estableciendo como #D1D6DF color de fondo. La regla slo afectar a la pgina actual.
5. Crea una regla de estilo para el elemento con ID menu. Debes de establecer las siguientes
propiedades: En propiedades de Cuadro, ancho 600px, y los mrgenes superior: 80px, inferior
10px y laterales auto. Adems en propiedades de Tipo, el color del texto ha de ser #EFF4FF y
estar en negrita a 18px. En las propiedades de Bloque, centra el texto.
Selecciona la tabla (etiqueta table). Es el primer texto, qel que aparece con un marco punteado.
Asgnale el ID menu.
Edita la regla body,th,td cambiando su selector a slo body.
6. Que los encabezados 1 tengan el color #738098.
7. Exporta las reglas a una nueva hoja de estilos llamada estilodeportes.css. Vincula esa hoja a
las pginas donde.htm, instalaciones.htm, y reservas.htm.
8. En el archivo instalaciones.htm convertir las seis lneas que hacen referencia a las
instalaciones en una lista desordenada.
9. Guardar los cambios y cerrar el documento.
Si no tienes muy claro las operaciones a realizar para resolver este ejercicio, Aqu te lo
explicamos.
nosotros. Rm, 5:8
55
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

1. Abrir el sitio Animales.
2. Abrir el documento perros.htm.
3. Convertir la primera lnea Perros a un encabezado 1.
4. Asignarle un estilo cursiva, con un tamao de fuente de 36px. Definir la regla solo en este
documento.
5. Al prrafo Cuidados Postnatales asignarle un tamao de fuente de 18px, en cursiva y negrita.
6. Guarda el estilo como titulo. Definir la regla solo en este documento.
7. Cambia las propiedades del documento para que tenga la fuente Georgia a 16px y el fondo de
color #EFEFD1.
8. Mueve estas Reglas CSS a una nueva hoja que vinculars a este documento. Llmala
estiloanimales.css.
9. Abrir el documento index.htm y asignarle la hoja de estilos estiloanimales.css.
10. Convertir la primera lnea de texto a un encabezado 1.
11. Abrir el documento consultas.htm y asignarle la hoja de estilos estiloanimales.css.
13. Abrir el documento gatos.htm y asignarle la hoja de estilos estiloanimales.css.
15. Al ttulo Cmo Prevenir Los Problemas Dentales? asignarle el estilo .titulo.
16. Convertir las cuatro ltimas lneas en un lista desordenada, aplica una sangra solamente a la
segunda lnea.
17. Guardar los cambios y cerrar los documentos.

Si no tienes muy claro las operaciones a realizar para resolver este ejercicio, Aqu te lo
explicamos.

nosotros. Rm, 5:8
56
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

4.2. Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente
hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector
de propiedades, o a travs del men Formato.
La lista con vietas (sin ordenar) se selecciona a travs del botn , mientras que la lista
numerada (ordenada) se selecciona a travs del botn .
Ejemplo de lista numerada (ordenada):
1. Preparar la mochila
1. Sacar los libros de ese da
2. Introducir los libros del da siguiente
2. Ponerme el pijama
3. Lavarme los dientes
4. Poner el despertador
Ejemplo de lista con vietas (sin ordenar):
o Perro
o Gato
o Aves
Canario
Loro
o Hmster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario
aadir una sangra en los elementos de la lista que se desee que pasen a formar parte de la lista
anidada.
A travs del men Formato, opcin Lista, es posible acceder a las propiedades de la lista
seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de l a
lista para que se active este submen.
En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con
vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las
listas ordenadas, el nmero por el que comenzar el recuento.
nosotros. Rm, 5:8
57
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.

Unidad 4.
Ejercicio paso a paso: Convertir texto en una lista
Objetivo
Practicar las operaciones que hay que realizar para convertir texto en una lista desordenada.
Ejercicio
3. Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema
anterior a partir de archivos de la carpeta Ejercicios.
4. Haz doble clic sobre el documento postresemana.htm, que aparece en los archivos
desplegados en el panel Archivos.

Se abrir el documento en Dreamweaver.
5. Si no aparece el Inspector de propiedades HTML, brelo a travs del men Ventana, opcin
Propiedades.
6. Haz clic en la primera lnea Postre de la semana.
7. En el desplegable Formato, elige Encabezado 1.
8. Haz clic en la segunda lnea Boniatos a la mallorquina.
9. En el desplegable Formato, elige Encabezado 2.
10. Selecciona las tres lneas de texto desde 1kg de boniatos hasta Abundante aceite.
11. Haz clic sobre el botn Lista sin ordenar del Inspector de propiedades HTML.
12. Selecciona las lneas desde Mondar los boniatos hasta el final.
13. Haz clic sobre el botn de Lista ordenada del inspector de propiedades.
nosotros. Rm, 5:8
58
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

14. Haz clic sobre la barra de herramientas, para cambiar el Ttulo, e introduce Postre de la
semana.
15. Haz clic sobre el botn Guardar de la barra de herramientas. Si esta barra no aparece
visible, pulsa Ctrl + S.

4.3. Caracteres especiales
A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de
Diseo de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres
como , , , , .. de forma rpida. Pero si quieres poner dos espacios en blanco y los introduces por
teclado, Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin que vamos a
ver a continuacin. Lo mismo ocurrir con los caracteres que no tenemos en el teclado.
Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen
inferior.

Slo coloca el cursor del ratn sobre Caracteres especiales y vers una lista rpida de los
caracteres ms utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en
la vista de Diseo.
nosotros. Rm, 5:8
59
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde
donde podrs seleccionar caracteres entre una lista bastante ms amplia:

4.4. Estilos CSS. Introduccin

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el
color o el tamao, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se
desee repetir la asignacin de esos mismos valores a otras partes del texto.
Tambin permiten, como veremos ms adelante, definir prcticamente cualquier propiedad de los
elementos que contendrn nuestra web.
Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...),
prrafos (<p>), enlaces (<a>), etc... lo que formatear todas las apariciones de esta etiqueta en el
mbito del estilo.
Tambin podemos crear clases. Algo as como definir un estilo y darle un alias. El estilo afectar a
todos los elementos a los que apliquemos esa clase.
Por otro lado, al crear el estilo, podemos definirlo como un estilo en lnea (afectar slo al elemento
seleccionado) o crear una regla, que puede afectar a toda la pgina, o a todo el sitio si la guardamos
en un archivo CSS.
nosotros. Rm, 5:8
60
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del
contenido de una pgina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto
que se busca en una pgina, desde la posicin precisa de elementos hasta el diseo de fuentes y
estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de
actualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo
se actualiza automticamente.
4.5. Crear un estilo personalizado
Con Dreamweaver CS6, las caractersticas que apliquemos a un texto a travs del Inspector de
propiedades CSS crearn automticamente estilos CSS. Aunque tenemos que decidir a qu
elementos afecta.
Vemoslo:
Crear un estilo en lnea.
Por ejemplo, si queremos que un determinado estilo afecte a un nico elemento y en un caso
puntual, podemos crearlo como un estilo en lnea. Esto incrustar el estilo en la propia etiqueta HTML,
por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento.
En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo en
lnea>.

A continuacin, definimos las propiedades del estilo.
Insistimos que esta opcin es la menos flexible y debe empelarse slo en casos concretos.
Crear una regla de estilo:
Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, slo a las que estn contenidas
en determinados elementos o una clase.
Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos < Nuevo
estilo en lnea >.
nosotros. Rm, 5:8
61
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos
aparecer la siguiente ventana:

Tipo de selector: el tipo de selector es fundamental, ya que determina a qu elementos afectar el
estilo.
Podemos elegir entre cuatro tipos de selector:

Clase. Es el alias que tomar el estilo, y para que afecte a un elemento, debemos de aplicarle
esa clase.
El nombre de la clase va precedido por un punto, y si no lo ponemos lo har Dreamweaver.
ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma
nica y concreta. Por tanto, el estilo slo puede afectar a un elemento en cada pgina, al que
tenga ese ID. En el selector, se escribe precedido por #.
Etiqueta. El estilo afectar a todas las apariciones de la etiqueta HTML indicada.
nosotros. Rm, 5:8
62
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta nicamente a
los prrafos con la clase resaltado, pero no a los encabezados con esa clase. Tambin se
pueden anidar. Por ejemplo ul#menu li p afecta slo a los prrafos que estn dentro de un
elemento de una lista con el id menu.

Nombre del selector: esta opcin permite asignar un nombre al selector.

Depende ntimamente del tipo de selector, pues aqu introduciremos el nombre de la clase, id,
etiqueta, etc... Por defecto, indicar el elemento seleccionado, pero podemos escribir el que queramos.
Definicin de regla: esta opcin nos permite guardar el estilo en el documento actual o en un nuevo
archivo .css.

Si elegimos (Slo este documento) la definicin del estilo se guardar en la cabecera de la pgina,
por lo que slo estar disponible dentro de sta.
Si elegimos (Nueva hoja de estilo) se crear un archivo CSS. Podremos emplear estos estilos en
cualquier pgina del sitio slo con vincular la hoja de estilos. Deberemos de indicar dnde guardar el
archivo css que contendr los estilos. Normalmente en la misma carpeta que las pginas.
Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aqu y los estilos se aadirn
ella.

4.6. Definir o editar un estilo
Una vez creado, tenemos que definir las propiedades que formarn el estilo.
Para ello, encontramos las opciones bsicas en el Inspector de propiedades CSS.

nosotros. Rm, 5:8
63
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos
editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van
aadiendo a la lista.
Si queremos acceder a todas las propiedades, podemos pulsar en el botn Editar regla. Se abrir la
ventana Definicin de regla.

Aqu encontramos todas las propiedades CSS agrupadas por Categoras. Las veremos ms
adelante.
Esta ventana es la opcin ms cmoda nada ms crear el estilo, cuando tenemos que cambiar
varias propiedades.
Para pequeos cambios que no podamos hacer desde el Inspector de propiedades y otras funciones
extras, disponemos del panel Estilos CSS. Podemos acceder a l desde el men Ventanas o pulsando
en el botn Panel CSS.
nosotros. Rm, 5:8
64
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas aplicadas,
y en la parte inferior las propiedades del estilo actual.
Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que
indique a qu tipo de texto se va a aplicar. Para ello accedemos al panel Estilos, hacemos clic con el
botn derecho sobre el estilo y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de
dilogo para que introduzcamos el nuevo nombre como la imagen inferior.

Si quieres aprender ms sobre el panel CSS, puedes hacerlo aqu.
Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado
previamente cada una. Ms adelante detallaremos qu hacen las propiedades existentes. No obstante,
sabiendo un poco de ingls resultan muy intuitivas.
Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir el estilo de
una etiqueta.

nosotros. Rm, 5:8
65
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Unidad 4.
Ejercicio paso a paso: Redefinir el estilo de una etiqueta
Objetivo
Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.
Ejercicio
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.

5. Haz clic sobre cualquier texto, sin seleccionar.
6. En el Inspector de propiedades CSS, en el desplegable Fuente elige Arial,Helvetica,sans-
serif.
7. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta, en Nombre de
selector elige body, y en Definicin de regla deja Slo este documento.
8. Pulsa Aceptar. Observars como cambia toda la tipografa.
9. Haz clic en la primera lnea Postre de la semana.
10. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva regla
CSS>.
11. Cambia el valor de Tamao a 140%.
12. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de
selector, asegrate de que ya pone h1.
13. Pulsa Aceptar.
14. Vamos a editar la regla. Haz clic en el botn Editar regla.
15. En la categora Fondo, en Background-color escribe #F9CA69. Pulsa Aceptar.
16. Haz clic en la segunda lnea Boniatos a la mallorquina.
CSS>.
18. Pulsa en el icono para poner el texto en cursiva.
19. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de
selector, asegrate de que ya pone h2.
20. Pulsa Aceptar.
21. En el desplegable Fuente, elige Verdana, Geneva, sans-serif.
22. Haz clic en el desplegable de color e introduce #6F9DBE.
23. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige body.
24. Pulsa el botn Editar regla.
25. En la categora Fondo, en background-image elige la imagen fondococina.png que
encontrars en la carpeta imagenes del sitio. Pulsa Aceptar.
26. Haz clic sobre el botn Guardar todo de la barra de herramientas o pulsa Ctrl + S para
guardar los cambios.

nosotros. Rm, 5:8
66
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

4.7. Aplicar un estilo
En el caso de haber creado una regla para una etiqueta, nos ser necesario aplicarla, ya que
directamente se aplicarn directamente.
Por tanto lo que tendremos que aplicar sern los estilos que definamos como clases. Veamos cmo
hacerlo:
En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de
insercin, pero sin seleccionar, el estilo se aplicar a la primera etiqueta que contenga el texto (por
ejemplo el prrafo).
En el inspector de Propiedades seleccionamos la opcin CSS y seleccionamos el estilo creado por
nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades
HTML tambin podemos hacerlo, utilizando el desplegable Clase.

Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de
estado, y seleccionar la clase deseada del men Establecer clase.
nosotros. Rm, 5:8
67
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Todas las reglas disponibles aparecen al desplegar el submen Formato Estilos CSS.
Observa que existe una clase llamada ninguna. Lo que hace esta opcin es quitar la clase al
elemento.
La barra de estado nos ayudar a saber qu clase tiene aplicada un elemento. La clase aparecer
junto al nombre de la etiqueta, separada por un punto.

Para practicar puedes realizar el Ejercicio paso a paso Crear y aplicar una clase y el ejercicio
paso a paso Modificar el estilo de una lista.

Unidad 4. Ejercicio paso a paso: Crear y aplicar una clase
Objetivo
Ejercicio
4. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.

5. Haz doble clic sobre la palabra Comensales para seleccionar la palabra completa.
6. En el Inspector de propiedades CSS, pulsa el icono para poner el texto en cursiva.
7. Se abrir la ventana Nueva regla CSS. En Tipo de selector asegrate de que est elegido
Clase.
nosotros. Rm, 5:8
68
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

8. En Nombre de selector, escribe info, y en Definicin de regla deja Slo este documento.
9. Pulsa Aceptar.
10. En el selector de color, escribe #678090.
11. Selecciona el texto Tiempo de reparacin.
12. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige info.
13. Selecciona el texto Tiempo de coccin, y repite el paso anterior.
14. Haz doble clic sobre Ingredientes para seleccionar el texto.
15. En el Inspector de propiedades CSS, pulsa el botn Editar regla.
16. Se abrir la ventana Nueva regla CSS. En Tipo de selector elige Clase. En Nombre de
selector, escribe instrucciones.
17. Pulsa Aceptar.
18. En la categora Tipo, en Font-weight, selecciona bold.
19. En Color introduce #678090.
20. Pulsa Aceptar.
21. Haz doble clic sobre Preparacin para seleccionar el texto.
22. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige instrucciones.
23. Haz clic sobre el botn Guardar de la barra de herramientas o pulsa Ctrl + S para guardar
los cambios.
El aspecto de la pgina postresemana.htm, con los cambios que hemos realizado hasta este
ejercicio es el que puedes ver aqu.
Unidad 4.
Ejercicio paso a paso: Modificar el estilo de una lista
Objetivo
Ejercicio
4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. Se abrir el
documento en Dreamweaver.
5. Inserta los siguientes prrafos:
Quines somos
Plato Semana
Postre Semana
Tu Receta
nosotros. Rm, 5:8
69
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

6. Selecciona todos los prrafos y pulsa el botn para convertirlo en una lista no ordenada.
7. Haz clic sobre la etiqueta <ul> de la barra de estado para seleccionar la lista.
CSS> y pulsa en Editar regla.
9. Se abrir la ventana Nueva regla CSS. En Tipo de selector asegrate de que est elegido
Clase.
10. En Nombre de selector, escribe .menu, y en Definicin de regla deja Slo este documento.
11. Pulsa Aceptar.
12. En la categora Tipo, en Font-weight, selecciona bold, y en Font-size 12px.
13. En la categora Cuadro, en Width introduce 100px. Padding, deja marcado Igual para todo e
introduce 0 en Top. En Margin, desmarca Igual para todo e introduce auto en Left y Right.
14. En la categora Lista, en List-style-type selecciona none.
15. Pulsa Aceptar.
16. Aplcale la clase a la lista desde el desplegable Clase del Inspector de propiedades HTML.
17. Haz clic en el primer elemento de la lista.
19. Observa que aparece el selectir compuesto .menu li. Es decir, el estilo afectar a los elementos
de lista que estn dentro de una lista con la clase menu. Pulsa Aceptar.
20. En la categora Fondo, en background-color introduce #FFF, en background-image pulsa
Examinar y elige fondo-menu.png de la carpeta imagenes.
21. En Background-repeat elige repeat-x y en background-position (Y) elige bottom.
22. En la categora Bloque, en Text-align, selecciona center.
23. En la categora Cuadro, en Margin, desmarca Igual para todo e introduce 10 en Bottom.
24. En la categora Borde, en Style, deja marcado Igual para todo y elige solid en Top. En Width
introduce 1. Desmarca Igual para todo en Color e introduce, de arriba a abajo, #999, #333,
#333, #999.
25. Pulsa Aceptar.
26. Haz clic en el primer elemento de la lista.
28. Observa que aparece el selector compuesto .menu li. Compltalo para que quede .menu
li:hover (cuando el cursor est sobre el elemento). Pulsa Aceptar.
29. En la categora Fondo, en background-color introduce #FFEDCF y pulsa Aceptar.
30. Haz clic sobre el botn Guardar de la barra de herramientas o pulsa Ctrl + S para guardar
los cambios.

nosotros. Rm, 5:8
70
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

4.8. Hojas de estilos
Exportar estilos
Es frecuente que comencemos creando los estilos en la propia pgina, y despus al ver que los
necesitaremos en otras pginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite
exportar estos estilos fcilmente.
Utilizamos el panel Estilos CSS (Mays + F11). En este caso nos ser ms til la vista Todo.
Agrupados en <style>encontramos los estilos creados en la pgina.

Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono de la
esquina superior derecha) seleccionamos Mover Reglas CSS....
Nos aparecer la siguiente ventana:

Encontramos dos opciones para ubicar los estilos:
Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se aadirn a ella.
Una nueva hoja de estilos... crear una hoja nueva para las reglas exportadas. Deberemos de
indicar dnde queremos guardar el archivo, normalmente en la misma carpeta que las pginas.
Los estilos seleccionados se quitarn de la pgina actual, y se vincular con la hoja de estilos.

nosotros. Rm, 5:8
71
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Vincular una hoja de estilos.
Si queremos utilizar una hoja de estilos ya existente en nuestra pgina, debemos vincularla.
Podemos hacerlo desde el men Formato Estilos CSS Adjuntar hoja de estilos... o desde el
panel Estilos CSS. Lo nico que tendremos que hacer es seleccionar el archivo a vincular. Las hojas
de estilo tienen la extensin .css.
Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo del equipo,
todos los archivos que utilicemos deben de estar dentro del sitio.

Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso Exportar y
vincular hojas de estilo.

nosotros. Rm, 5:8
72
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

UNIDAD 5.
HIPERENLACES

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento
esencial para cualquier pgina web.
5.1. Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de
una pgina o archivo a otra pgina o archivo.
Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.
Cuando creemos un enlace, lo que realmente haremos ser crear una etiqueta <a></a> que
es la que en HTML se encarga de definir los enlaces. Esto podrs observarlo en la barra de estado:

5.2. Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas referencias no
se limitan a los enlaces, se comportarn igual cuando indiquemos la ubicacin de una imagen, de un
archivo Flash, de la hoja de estilo, etc.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo,
incluyendo el protocolo http://.
Por ejemplo, http://www.aulaclic.com, o
http://www.misitio.com/pagina/pagina1.html.
La referencia absoluta es independiente de la ubicacin de la pgina que contiene el
enlace, y ser vlida siempre que no cambie la ubicacin del archivo enlazado. Es la opcin
obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).
Referencia relativa al documento (por defecto):
La ubicacin del archivo enlazado se toma en relacin con la ubicacin del la pgina. Es
decir, partimos de la carpeta en la que se encuentra el documento.
nosotros. Rm, 5:8
73
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Si queremos enlazar con una pgina o archivo dentro de la misma carpeta, no tenemos ms
que utilizar su nombre. Por ejemplo, pagina2.htm.
Si est en una subcarpeta de la pgina actual, no tenemos ms que indicar el nombre de la
carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif.
Si queremos referirnos a carpetas que estn por encima del nivel donde nos encontramos
deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente direccin
http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos mostrar una
imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html,
cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior
(http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sera el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego
nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
Esta opcin depende de la ubicacin del archivo, y pueden no funcionar correctamente si
alteramos la estructura de carpetas.
Esta es la opcin por defecto de Dreamweaver, y es la forma ms habitual
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando como
origen la carpeta raz del sitio.
Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.
En el ejemplo anterior si tuvisemos definido como sitio la carpeta http://www.misitio.com/, un
enlace en cualquier pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se
creara como /pagina/secciones/seccion1.html.
Por tanto, podramos poner ese vnculo en cualquier pgina del sitio y funcionara
independientemente de su ubicacin.
Estos enlaces no funcionarn en el sitio local, a no ser que configuremos un servidor de pruebas
como veremos ms adelante, ya que Windows interpretar como raz la raz del disco duro.

nosotros. Rm, 5:8
74
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Marcadores o Puntos de fijacin:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello,
indicamos el nombre del punto de fijacin a continuacin de la ruta del archivo (relativa o absoluta)
separados por una almohadilla (#).
El formato sera nombre_de_documento.extension#nombre_de_punto.
Si el punto de fijacin est en la propia pgina, basta con indicar nicamente el punto en el enlace,
por ejemplo #apartado2
Podemos definir el punto dentro de un documento a travs del men Insertar, opcin Anclaje con
nombre. O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde el
Inspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos en la
pgina.

Debers tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente
a los nombres de los archivos y carpetas en el servidor (local o remoto).
Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces.
Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs
problemas a la hora de referenciar tus objetos.
5.3. Crear enlaces

La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el
Vnculo en el inspector HTML.
Por ejemplo, aqu hay un enlace a www.aulaclic.es, que al ser un archivo externo es de
referencia absoluta, por eso contiene http://

nosotros. Rm, 5:8
75
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan
comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla #.
Veremos su utilidad ms adelante.

Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos
a continuacin y el enlace se colocar en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace. Si tenamos un texto seleccionado, aparecer ah.
Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers
escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta para buscar los
archivos que existan dentro del sitio. Por defecto Dreamweaver te crear un enlace relativo al
documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado .
Destino: la ventana donde se abrir la pgina, este campo se explica en el siguiente apartado.
Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante el
cursor sobre el enlace.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace
mediante la pulsacin de la tecla Alt ms la tecla de acceso indicada.
ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces
pulsando la tecla Tabulador. En este campo podrs establecer un ndice indicando la prioridad
del enlace y as configurar el modo en el que actuar el Tabulador es sus diferentes saltos. Por
defecto, se tabularn por orden de aparicin.
5.4. Destino del enlace
El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar
dependiendo de si el documento est basado en marcos.
nosotros. Rm, 5:8
76
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que
aparece a travs del men Insertar, opcin Hipervnculo.

_blank:
Abre el documento vinculado en una nueva ventana o pestaa del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el
conjunto de marcos padre. Tiene sentido si se emplean marcos.
_self:
Es la opcin predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento
vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se
emplean marcos.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de
destino, ya que se volvern a ver en el tema de Marcos.
Si la pgina no usa marcos (lo habitual hoy en da) simplemente no especificaremos nada para
abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas nuevas.
Lo habitual es abrir las los enlaces a pginas del sitio en la misma ventana, y los enlaces externos
en ventanas nuevas. Otra tendencia dice que una pgina nunca debera de abrir nuevas ventanas, y
que debe de ser el usuario el que decida qu enlaces quiere abrir en ventanas nuevas. En la mayora
de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la ruedecilla
del ratn.
5.5. Formato del enlace
En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo ti empo,
puede adquirir tres colores diferentes que pueden especificarse a travs de las propiedades de la
pgina. Estos tres colores diferentesse corresponden a los tres estados del vnculo: vnculo normal,
vnculo activo (el ltimo pulsado) o vnculo visitado.
Aqu tienes dos vnculos de ejemplo:
www.aulaclic.es www.elpais.es
nosotros. Rm, 5:8
77
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Si has visitado alguno, vers que sale en un tono morado, si no sale en azul.
Recuerda que como todo en nuestra pgina, los vnculos tienen un formato por defecto, pero es
totalmente personalizable por CSS. Para ello, basta con crear una Regla de estilo para la etiqueta a.
Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores:
a:link para los enlaces normales.
a:visited para los enlaces visitados.
a:active para los enlaces activos.
Aunque recuerda que en las propiedades del documento tenamos la categora Vnculos CSS
que nos permite establecer estos valores.
Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al
pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece
el contorno de esa zona.
Aqu tenemos dos vnculos en una imagen:

Como puedes ver, la primera imagen que hace de vnculo contiene un recuadro alrededor. Este
es el formato por defecto, pero no suele quedar bien, sobre todo en imgenes con el fondo
transparente.
Veamos como quitarlo utilizando CSS.
En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y
pulsamos Editar regla.

nosotros. Rm, 5:8
78
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a img, es
decir, imgenes que estn dentro de una etiqueta a (de enlace).
Se abrir la ventana Definicin de regla para a img:

En ella, seleccionamos la categora Borde, y en Style seleccionamos none. Pulsamos Aceptar.
Esta regla har que las imgenes con enlace se muestren sin borde.

Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse
encima del vnculo. Suele adquirir la apariencia de una mano sealando.
Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.
Unidad 5. Ejercicio paso a paso: Crear un hiperenlace
Objetivo
Practicar cmo crear un hiperenlace.

Ejercicio
4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
5. Se abrir el documento en Dreamweaver.
nosotros. Rm, 5:8
79
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

6. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin
Propiedades.
7. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn para
desplegar sus propiedades ms avanzadas.
8. Selecciona la imagen del logotipo de aulaClic. Para ello hay que hacer clic sobre ella.
9. En Vnculo, del inspector de propiedades, escribe http://www.aulaclic.es.
10. En Dest selecciona la opcin _blank.
11. Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los cambios.
12. Pulsa F12 para ver el resultado en tu navegador, observa que si posicionas el ratn encima de
la imagen, el puntero del ratn cambia de aspecto (normalmente toma forma de mano con el
dedo ndice sealando) esto te indica que asociado a la imagen hay un hiperenlace y en la barra
de estado puedes ver la pgina a la que enlaza.
Observa tambin que la imagen muestra un recuadro naranja alrededor, que no queda
demasiado bien con su fondo transparente.
13. Cierra la ventana del navegador.
14. Vamos a quitar el borde de la imagen. En el Inspector de propiedades CSS, en Regla de
destino, elige Nueva regla, y pulsa el botn Editar regla.
15. En Tipo de selector elige Compuesto.
16. En Nombre del selector, escribe a img.
17. En Definicin de regla selecciona la hoja estilococina.css.
18. Pulsa Aceptar.
19. Ve a la categora Borde. En Border-style elige none y pulsa Aceptar.
20. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
21. Para cada elemento de la lista, selecciona el texto y crea el enlace a la pgina correspondiente
del sitio. No pongas nada en Destino.
23. Observa que aparece el selectir compuesto .menu li a. Pulsa Aceptar.
24. En la categora Tipo, en color introduce #000 y en Text-decoration selecciona none.
25. En la categora Cuadro, en Padding, deja marcado Igual para todo e introduce 3 en Top.
26. En la categora Bloque, en Display, selecciona Block. Esto har que el enlace ocupe todo el
elemento de la lista.
27. Pulsa Aceptar.
29. Observa que aparece el selectir compuesto .menu li a. Compltalo para que quede .menu li
a:hover (cuando el cursor est sobre el elemento). Pulsa Aceptar.
30. En la categora Tipo, en Color introduce #DB8C15 y pulsa Aceptar.
31. Haz clic en el men Archivo Guardar todo.
nosotros. Rm, 5:8
80
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

5.6. Enlace a correo electrnico
Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea
que los visitantes de la web puedan contactar con nosotros.
La sintaxis del vnculo en este caso es mailto:direccindecorreo.
Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando
previamente el texto o la imagen deseados.
Tambin es posible a travs del men Insertar, opcin Vnculo de correo electrnico.
En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el texto que
contendr el vnculo de correo.

Lo que hace esta opcin es abrir el cliente de correo predeterminado del usuario (Outlook,
Firebird...). Por lo que puede no ser prctica si el usuario no lo tiene, se conecta en un ordenador
pblico, o emplea el correo web directamente.
Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerir una pgina
dinmica como veremos actualmente. Otra opcin sera mostrar nuestra direccin de correo, para que
el usuario pueda enviarnos el correo como quiera. Si publicamos nuestra direccin en la web es mejor
hacerlo como una imagen, o escribindola de forma que la pueda entender un humano (por ejemplo
micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la emplearn para el envo de
correo no deseado.
Para practicar puedes realizar el Ejercicio paso a paso Crear vnculo de correo electrnico.

En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos rotos. Si no
sabes lo qu son o cmo solucionarlos, consltalo aqu

nosotros. Rm, 5:8
81
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

EJERCICIO PROPUESTO AVANZADO
Unidad 5. Avanzado: Vnculos rotos
Comprobacin de vnculos rotos
Los Vnculos rotos son vnculos que no siguen una ruta vlida, o que enlazan a archivo que no
existe.
La existencia de estos vnculos en nuestras pginas es un error, ya que no permite navegar
correctamente a los usuarios por nuestro sitio, se producen errores.
Los servidores de tipo UNIX/Linux distinguen entre maysculas y minsculas. As, por ejemplo, si
enlazas a un archivo Perros.htm puede que el servidor no lo encuentre porque en realidad lo hayas
llamado perros.htm (en minsculas).
Trabajando con Windows este tipo de errores no se presentan porque no hace esta distincin. En
el ejemplo anterior Dreamweaver considerara el enlace Perros.htm correcto aunque no lo fuese.
Para evitar esto puedes activar la opcin Usar verificacin de vnculos entre maysculas y
minsculas que se encuentra en la ventana de Definicin del Sitio, pestaa Avanzadas y
categora Datos Locales.
Para comprobar si nuestro sitio tiene Vnculos rotos hay que abrir el Verificador de vnculos.
Accedemos a l desde el men Sitio Comprobar vnculos en todo el sitio o con las teclas
Ctrl + F8.

Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen vnculos rotos.
nosotros. Rm, 5:8
82
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

En la imagen vemos que no se ha encontrado una imagen.
Lo primero que hay que hacer es pulsar sobre el botn , a travs del cual se ofrece la
posibilidad de elegir dnde se comprobarn los vnculos rotos. Puede ser en el documento actual,
en todo el sitio, o en los archivos o carpetas del sitio seleccionados previamente.
A travs de Mostrar (Mos) hay que especificar si han de mostrarse los Vnculos rotos, los
Vnculos externos o los Vnculos hurfanos.
Los Vnculos rotos son los vnculos que no siguen una ruta vlida, o que enlazan a archivo que
no existe.
Los Vnculos externos son los vnculos a documentos que se encuentran fuera del sitio, pero
que no necesariamente son vnculos errneos. No comprueba si estos vnculos son correctos o
no, simplemente los enumera.
A travs de Vnculos hurfanos se muestran todos aquellos archivos del sitio que no estn
siendo vinculados por otros, a la vez que tampoco contienen vnculos a otros documentos. Estos
documentos, en ocasiones, pueden no estar siendo utilizados para nada, por lo que simplemente
estn ocupando espacio en disco innecesariamente. Pero en otras ocasiones, tal vez si que los
empleamos, slo que en vez de enlazarlos, accedemos a ellos por javascript. En este caso si
son necesarios, aunque se marquen como hurfanos.
De estos tres tipos de vnculos, el que ms nos interesa ahora es el de los Vnculos rotos. En el
panel se mostrarn todos los documentos que tienen un vnculo roto, y el documento al que cada uno
de esos vnculos hace referencia.
Reparacin de vnculos rotos
Podemos reparar los vnculos rotos de dos formas:

nosotros. Rm, 5:8
83
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Una de ellas es pulsando dos veces sobre el nombre del documento que aparece en la lista de
archivos del panel. De este modo, dicho documento se abre. Entonces es posible buscar dentro del
documento el vnculo errneo y modificarlo a travs del Inspector de propiedades.
La otra forma es pulsando sobre el vnculo roto, en lugar de sobre el nombre del archivo. En este
caso es posible modificar directamente el nombre del documento en el panel, o buscarlo a travs del
icono con forma de carpeta que aparecer a su derecha.
Ejercicios unidad 5: Hiperenlaces
1. Abrir el sito Deportes.
2. Abrir los documentos index.htm, donde.htm, instalaciones.htm y reservas.htm.
3. Observa que al principio de cada uno se repite el mismo men. Para cada palabra, crea los
siguientes enlaces:
o Crear un hiperenlace a index.htm en el texto Quines.
o Crear un hiperenlace a donde.htm en el texto Dnde.
o Crear un hiperenlace a instalaciones.htm.
o Crear un hiperenlace a reservas.htm en el texto Reservas.
No crees el enlace que lleva a la pgina actual.
1. Abrir el sito Animales.
3. Crear un hiperenlace a www.aulaclic.es en la imagen de aulaClic.
4. Hacer que el enlace se abra en una ventana nueva del navegador.
5. Hacer que las imgenes con enlaces no muestren bordes.

Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo
explicamos.
nosotros. Rm, 5:8
84
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Ayuda de ejercicios: Hiperenlaces
Ejercicio 1: Deportes
Apartado 1 Para abrir el sitio Deportes hay que seleccionarlo en el panel Archivos. Puedes abrir el
panel a travs del men Ventana, opcin Archivos.
Apartado 2 Para abrir los documentos, haz doble clic sobre cada uno en el panel Archivos.
Apartado 3 Si no aparece el inspector de propiedades HTML brelo a travs del men Ventana,
opcin Propiedades.
Veamos, por ejemplo, cmo hacerlo en index.htm:
En el texto Quienes no crees vnculo, ya que sera el que lleva a la pgina actual.
Selecciona el texto Dnde.
Escribe donde.htm en Vnculo, del inspector de propiedades.
Selecciona el texto Instalaciones.
Escribe instalaciones.htm en Vnculo, del inspector de propiedades.
Selecciona el texto Reservas.
Escribe reservas.htm en Vnculo, del inspector de propiedades.
Pulsar fuera del texto para que se aplique el ltimo cambio.
Repite los pasos con cada pgina, omitiendo el enlace a la pgina actual segn corresponda.
Apartado 4 Ve al men Archivo y elige Guardar todo. Despus en el mimo men elige Cerrar todo.
Ejercicio 2: Animales
Apartado 1 Para abrir el sitio Animales hay que seleccionarlo en el panel Archivos. Puedes abrir el
panel a travs del men Ventana, opcin Archivos.
Apartado 2 Para abrir el documento index.htm hay que hacer doble clic sobre l, en el panel
Archivos.
Apartado 3 Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin
Propiedades.
Seleccionar la imagen de aulaClic. Para ello basta con pulsar sobre ella.
nosotros. Rm, 5:8
85
P
o
r
q
u
e

d
e

T
a
l

m
a
n
e
r
a

A
m
o

D
i
o
s

a
l

M
u
n
d
o

q
u
e

h
a

d
a
d
o

a

s
u

H
i
j
o

U
n
i
g
n
i
t
o

p
a
r
a

q
u
e

T
o
d
o

A
q
u
e
l

q
u
e

e
n

E
l

C
r
e
a

N
o

s
e

P
i
e
r
d
a

M
a
s

T
e
n
g
a

V
i
d
a

E
t
e
r
n
a
.

J
n
.

3
:
1
6

Escribir http://www.aulaclic.es en Vnculo, del Inspector de propiedades HTML.
Apartado 4 Seleccionar la imagen de aulaclic.
Seleccionar _blank en Dest, del inspector de propiedades.
Pulsar fuera de la imagen para que se aplique el ltimo cambio.
Apartado 5 en el Inspector de propiedades CSS, en Regla de destino, elige Nueva regla, y pulsa
el botn Editar regla.
En Tipo de selector elige Compuesto.
En Nombre del selector, escribe a img.
En Definicin de regla selecciona la hoja estiloanimales.css.
Pulsa Aceptar.
Ve a la categora Borde. En Border-style elige none y pulsa Aceptar.
Apartado 6 Hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar de la pestaa

Dreamweaver Cs6 Parte1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweaver Cs6 Parte1

Uploaded by

Copyright:

Available Formats

Ms Dios Muestra su Amor para con nosotros, en que siendo aun pecadores, Cristo muri por

nosotros. Rm, 5:8

You might also like