Curso Dreamweaver CS6

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 Estilos 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

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
Men CSS
6.6. Objetos inteligentes

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

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. Fuentes web

13.2. Marquesinas
13.3. Fecha
13.4. Regla horizontal
13.5. Cdigo de otras pginas

Unidad 14. Capas

14.1. Introduccin
14.2. Insertar una capa
14.3. Formato de una capa

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. Carga previa de imgenes
16.3. Abrir nueva ventana del navegador
16.4. Cambiar propiedades CSS
16.5. Comprobar Plug-ins
16.6. Mens de salto
16.7. Transiciones

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
Inspeccin de CSS
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
18.12. Diseo de cuadrcula fluida con Dreamweaver

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

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
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

Unidad 1. Conceptos bsicos de Dreamweaver CS6 (I)

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.

Nota: Esta versin estar disponible hasta que Adobe lance la nueva versin del 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.

2.

Novedades de Dreamweaver CS6

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.
Plantillas diseo fluido. El acceso a la web a travs de todo tipo de dispositivos est
experimentando un aumento importante. Ahora es habitual acceder a internet desde el telfono
mvil y desde las tabletas. Esto complica el diseo de los sitios web porque los dispositivos son
de diferentes dimensiones.
Una forma de afrontar este problema es utilizando el diseo fluido, este tipo de diseo hace que la
pgina se adapte automticamente a las dimensiones del dispositivo. Este tipo de diseo utiliza
HTML 5 por los que los navegadores antiguos no son capaces de representarlo correctamente.
Sin embargo, existen librerias de Javascript que solucionan este inconveniente.
Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseo fluido que veremos
en la unidad 18.

Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial a otro
estado final de forma continua. Con transiciones se pueden lograr vistososefectos de
animaciones.
Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire
distinto a nuestros diseos de pginas web. En esta versin, Dreamweaver permite incorporar los
archivos de nuevas fuentes de forma sencilla.
Intergracin con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones
para telfonos mviles en las plataformas ms utilizadas (Android, Apple, ...) ahora se ha
mejorado la compatibildad con PhoneGap desde Dreamweaver .
Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de adquirir
productos Adobe, como Dreamweaver, mediante suscripcin mensual o anual, de esta forma se
tiene acceso ms rapido a las actualizaciones y se puede disponer de los archivos de trabajo en
cualquier ubicacin con acceso a internet.
Adems hay funciones que slo estan disponibles para los suscriptores de Cloud, como la
insercin de etiquetas HTML 5 desde el panel Insertar, la compatibilidad con Edge Animate o la
bsqueda dinmica en Mac.

Unidad 1. Bsico: HTML bsico

Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper Text
Markup Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de cada
elemento de la pgina Web.
Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <title> y </title>.
Como ves, ambas etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">".
La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final.

Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que
actan. Por ejemplo, <table border="1"> indica que la que se trata de una tabla, y que tendr
un borde de grosor 1.
Una pgina HTML bsica tendra el siguiente aspecto:

<html>
<head>
<title> Mi primera pgina web </title>
</head>
<body>
<p><a
href="http://www.aulaclic.es/">
Haz
aulaClic</a>
y aprender ms sobre pginas web.</p>
</body>
</html>

clic

aqu

para

ir

El ejemplo anterior mostrara una pgina con un slo prrafo en el que parte del texto enlaza con
la web de aulaClic. Puedes probarlo copiando el cdigo y pegndolo en un archivo de texto, que
debes guardar con la extensin .htm.
Observa que cada etiqueta tiene una apertura y un cierre, y que estn anidadas unas dentro de
otras.
Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se
muestra en un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuando un usuario desde
Internet solicita ver una pgina el servidor Web enva la pgina al navegador y este interpreta las
etiquetas para dar la pgina correctamente formateada.
Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de
todo esto. Dreamweaver inserta automticamente las etiquetas necesarias para construir la
pgina con la apariencia y contenido definidos en el editor grfico. Esto nos facilita muchsimo el
trabajo.

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 laborioso que hacerlo utilizando un
editor 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
entender lo que estamos haciendo y podremos aprender HTML 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.

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 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.
Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para publicar en
Intenet de forma gratuita en forma de blog. Como por ejemplo, Blogger de Google o MySpace de
Microsoft. Un blog tiene una estructura definida y no ofrece tanta libertad como una pgina web a
la hora del diseo.
Tambin tenemos Google Sites que permite modificar directamente el cdigo HTML.
En el resto del curso nos referiremos preferentemente a pginas web creadas desde cero por el
usuario, sin restricciones de diseo.
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. La terminacin hace

referencia al pais (.es para Espaa, .com.mx para Mxico, .pe para Per, ...) o al tipo de pgina
(.com para comerciales, .org para organizaciones, .mobi para telfonos mviles o celulares, ...)
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.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.
En cualquier caso, una vez 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.

5.

Arrancar y cerrar Dreamweaver CS6

Veamos las dos formas bsicas de arrancar Dreamweaver CS6.

Desde el botn Inicio

situado, normalmente, en la esquina inferior izquierda de la

pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men. Puedes
comenzar a escribir el nombre del programa, y aparecer directamente. O puedes pulsar
en Todos los programas y buscarlo en la 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, si lo tienes

10

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.

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 clic sobre el men Archivo y elegir la opcin Abrir reciente. Muestra los ltimos
archivos abiertos.
Hacer clic sobre el men Archivo y elegir la opcin Examinar en Brigde. Se abrir el
programa Brigde que muestra las carpetas y archivos de forma grfica.
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.

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.

11

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 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.

Unidad 1. Bsico: Compaginar dos sesiones

Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con el curso y
otra con Dreamweaver CS6.
1. Abre la sesin con el curso en tu navegador habitual.

12

2. Abre la sesin de Dreamweaver CS6.

3. Pulsar con el botn derecho sobre cualquier parte vaca de la barra de tareas, en la parte inferior
de la ventana de Windows (del escritorio). Es la barra en la que se encuentra el botn Inicio.
4. Elegir la opcin Mosaico ventanas en paralelo.
Observa como la pantalla ha quedado dividida en dos partes, como en la figura:

5. Una vez tenemos las dos sesiones con el tamao adecuado, basta hacer clic con el ratn para
pasar de la una a la otra.
Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar

Esto va bien con monitores habituales (de 17" o ms pulgadas), sobre todo si son panormicos.
Con monitores pequeos como los de las Netbooks, quizs prefieras dejar las ventanas con su
tamao normal e ir pasando de una a otra presionando las teclas Alt + tabulador (manteniendo
pulsada Alt, presionar la tecla tabulador) o pulsando el botn correspondiente a la sesin en la
barra de tareas en la ltima lnea de la pantalla.

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:

13

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.
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.

14

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 donde vas a guardar la pgina que acabas de crear.

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.

15

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 cuadroFormato.

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, Dreamweaver aplica formato al texto
mediante hojas de estilos 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 <Nuevo estilo en lnea>, para
aplicar el formato solo al texto seleccionado. Tambin aplica el estilo de FuenteArial, Helvetica,
sans-serif, color azul #009 y centra el texto con el segundo botn de la parte derecha

, tal y

como muestra la imagen siguiente:

Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo 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.

16

Ahora, en Regla de destino selecciona <Nuevo estilo en lnea> y 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.
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 llamadomiprimerapagina.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.

17

Evaluacin 1: Conceptos bsicos de Dreamweaver CS6

Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta.
Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin.
Si pulsas Restablecer podrs repetir la evaluacin.
1. Las pginas web pueden tener la extensin HTML.
a) Verdadero.
b) Falso.
2. Los servidores gratuitos son recomendables para alojar pginas de empresas.
a) Verdadero.
b) Falso.
3. En Internet pueden existir pginas con el mismo nombre pero distinta terminacin.
a) Verdadero.
b) Falso.
4. En Dreamweaver no pueden utilizarse combinaciones de teclas.
a) Verdadero.
b) Falso.

5. El botn

significa...

a) Abrir.
b) Nuevo.
c) Cerrar.

6. El icono

significa...

a) Abrir.
b) Nuevo.
c) Cerrar.

7. El icono

significa...

a) Abrir.
b) Nuevo.
c) Cerrar.
d) Propiedades.

18

8. Si hacemos clic sobre el botn Nuevo de la barra de herramientas:

a) Aparecer directamente un nuevo documento vaco en pantalla.
b) Aparecer una nueva ventana en la que hay que elegir el tipo de documento que se
desea crear.
c) Creamos un nuevo cdigo HTML dentro de nuestra pgina.
d) Ninguna de las opciones anteriores.
9. La combinacin de teclas Ctrl + O sirve para...
a) Crear un nuevo documento.
b) Abrir un documento existente.
c) Organizar nuestros archivos.
d) Guardar los archivos modificados.

10. Si se pulsa sobre el icono

...

a) Se guardarn todos los documentos modificados y los nuevos.

b) Se guardarn solamente todos los nuevos documentos.
c) Se guardarn solamente todos los documentos modificados.
d) Se crear una copia de seguridad de nuestros archivos.

19

Unidad 2. El entorno de Dreamweaver CS6 (I)

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.

1.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 ser ms fcil
entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de
este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario
puede decidir qu elementos quiere que se vean en cada momento y dnde, como veremos ms
adelante.

En el resto de esta unidad vamos a ir describiendo los puntos ms importantes sealados en esta
imagen por los nmeros en azul del 1 al 9.
1.- Las barras.
2.- Las pestaas de documentos.
3.- La barra de estado.
4.- El panel de propiedades.
5.- rea de paneles.
6.- Paneles y ventanas.
7.- Lnea inferior de pestaas.
8.- Vista diseo del documento.
9.- Vista cdigo del documento.

20

1.2.

Las barras
1.- La barra de la aplicacin.

La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. 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 yuna 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.

2.- 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
cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o
acceder a otras acciones haciendo clic con el botn derecho, como Cerrar otros archivos.
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.

21

3.- 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 tenemos las herramientas de Seleccin, Mano (para
desplazarse) y Zoom. Ms a la derecha encontramos tres iconos para ver la pgina en tres
tamaos de pantalla: mvil, tableta y PC escritorio.Y al final hay 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. Esta barra puede ser muy til, pero en realidad casi todo el mundo usa esos comandos
directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)

La barra de herramientas de documento.

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

22

La barra de representacin de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos,
si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver
los estilos que dependen de pseudo clases activas, como cuando el cursor est sobre un
elemento.

La barra de navegacin con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas de
nuestro sitio, aunque slo tiene sentido con la Vista en vivo, como ya veremos.

Como tambin veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten
colocarlo como otra barra de herramientas.

1.3.

Inspectores y paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen
como paneles (ventanas) 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 fijas.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los
paneles o inspectores. A continuacin vamos a ver el inspector de Propiedades y ms adelante
veremos el panel Insertar.

4.- 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, como sucede en la
imagen que puedes ver, mostrar su ubicacin, dimensiones, peso, clase, etc...
En otros elementos, como prrafos y estilos, 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.

23

5.- rea de paneles.

En la parte derecha de la pantalla tenemos el rea o pila de paneles.

Inicialmente, el rea de paneles contiene unos determinados elementos, pero podemos quitar y
poner los elementos que queramos. Para quitar un elemento del rea de paneles basta hacer clic
con el botn derecho sobre su nombre para que aparezca un men con la opcin Cerrar. Para
aadir un elemento al rea de paneles hay que ir al men Ventana y hacer clic en el elemento que
queramos aadir, si el elemento se abre en una ventana flotante, bastar arrastrarlo al rea de
paneles.

6.- Paneles.

Una vez tenemos el ea de paneles con los elementos que ms nos interesen, podemos abrirlos o
desplegarlos de tres formas.

1. Abrir el panel dentro del rea de paneles. Para ello primero hay que expandir el rea de
paneles pulsando el botn de la parte superior derecha

, a continuacin, basta hacer clic en

cada panel para que se abra dentro del rea de paneles. Para cerrar el panel hacer doble clic.
Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del rea de paneles.
Se pueden abrir varios paneles a la vez y ajustar sus tamaos colocando el cursor en el borde
inferior y arrastrndolo.

24

2. Abrir el panel al lado del rea de paneles. Para ello hay que partir del rea de paneles sin
expandir, y al pulsar en un panel, este se abrir pegado al lado, como vemos en la siguiente figura.

3. Abrir como panel flotante. Para ello hay que pinchar en el ttulo del panel y arrastar el panel
fuera del rea de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera

25

de la pantalla de Dreamweaver. Al hacer doble clic en el ttulo del panel, este se contrae pero
sigue flotando en la misma posicin. Para expandirlo, volver a hacer doble clic. En al siguiente
imagen vemos el panel Archivos flotando y epandido.

Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar.

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 (imagen
anterior), como panel flotante o como una barra de herramientas integrada en la ventana de
trabajo (imagen siguiente)

26

.
Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos
este avanzado

7. Lnea inferior de pestaas.

En al parte inferior de la pantalla tenemos una lnea que contiene varias pestaas (Buscar,
Validacin , ... )

Para abrir una pestaa basta hacer clic sobre ella, para cerrarla hacer doble clic en su ttulo.
Estas pestaas se pueden configurar de forma similar a como acabamos de ver con el rea de
paneles. Es decir, se pueden aadir y quitar, convertir en flotantes, etc.

Unidad 2. Avanzado: Personalizar el rea de trabajo (I)

Abrir y cerrar paneles
Todos los paneles son accesibles a travs del men Ventanas.
Para cerrar un panel, basta con hacer clic derecho sobre su pestaa y elegir Cerrar del men.

Un comando que puede resultarnos til es la tecla F4. Al pulsarla, todos los paneles se ocultan.
Para mostrarlos, la volvemos a pulsar.

Acoplar y desacoplar paneles

A la derecha (por defecto) encontramos la rea o pila de paneles.

27

Algunos paneles aparecen acoplados. Eso quiere decir que se muestran como pestaas, pudiendo
ver el que queramos haciendo clic, pero sin poder ver dos a la vez.
Para desacoplarlos, basta con hacer clic sobre la pestaa y arrastrar.

Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros lugares
(zonas de colocacin), que aparecern resaltados en azul (imagen anterior). Esto nos permite
intercambiar paneles entre grupos acoplados o dejarlos como flotantes si los sacamos fuera.
Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra de
herramientas.

Cambiar el aspecto del panel insertar

Es posible cambiar el aspecto del panel. Como ya hemos dicho, podemos arrastrarlo hasta la
barra de mens para que tome un aspecto de fichas, como se aprecia en la siguiente imagen:

Pero tambin puede tener este otro aspecto, en men:

Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el men y seleccionamos
la opcin Mostrar como Fichas o Mostrar como men, segn el caso.

28

Cambiar los mtodos abreviados de teclado

Los mtodos abreviados de teclado son las combinaciones de teclas que permiten acceder a
algunas opciones sin la necesidad de moverse a travs de los mens. Para modificar las
combinaciones de teclas hay que dirigirse al men Edicin, a la opcin Mtodos abreviados de
teclado.
En esta nueva ventana es necesario seleccionar un comando y una de las combinaciones de la
lista de Mtodos abreviados, situar el cursor en el campo Pulse tecla, seguidamente pulsar la
combinacin de teclas deseada, y por ltimo hacer clic sobre el botn Cambiar.
Es posible que no se permita modificar las combinaciones de teclas del conjunto seleccionado, por
ser combinaciones que provienen de fbrica, por lo que se pedir confirmacin para crear una
copia modificable del conjunto.
Hay que tener tambin en cuenta que no se permite asignar a un comando una combinacin de
teclas que ya est asignada a otro diferente.

Color de los iconos

Por defecto, los iconos de Dreamweaver se muestran de color gris, y al pasar el cursor por
encima, se muestran de color.

Pero como ves en la imagen anterior, podemos hacer que todos los iconos se muestren de color.
Para ello no tenemos ms que elegir la opcin Iconos de colores del menVer.

29

Espacios de trabajo
Si adaptamos a nuestro grupo el entorno y cerramos el programa, al volver a iniciarlo se
mantendr nuestra configuracin. Pero a la larga iremos haciendo cambios, abriendo paneles que
necesitemos puntualmente, cerrando otros por accidente, etc. Por eso es muy til guardar nuestra
configuracin y poder restaurarla cuando queremos.
A esta configuracin del entorno, se le denomina Espacio de trabajo. Y podemos guardar nuestra
configuracin actual desde el men Ventana Diseo del espacio de trabajo Nuevo
espacio de trabajo.... y darle un nombre.

Como vemos en el la imagen, www.aulaclic.es es un espacio personalizado. Adems vemos que

Dreamweaver trae una serie de espacios ya creados que podemos utilizar. Para cargarlo, basta
con seleccionarlo en el men.
Otra opcin muy interesante que encontramos en este men es la de Restablecer 'espacio'. Esto
lo volver a cargar, muy til cuando lo hemos desorganizado.

1.4.

Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de
documento:

8.- La vista Diseo

La vista Diseo permite trabajar con el editor visual.

30

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

9.- 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.

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.

31

- La vista Dividir

La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona izquierda
muestra el cdigo fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de
las zonas, este cambio se aplica directamente sobre la otra.

- La Vista en vivo

La vista en Vivo es una mejora reciente de Dreamweaver. 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. Tambin es conveniente comprobar la pgina con los distintos tamaos de
pantalla, telfono mvil, tablet y PC.

- 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 y refleja los cambios

32

dinmicamente al interactuar con la pgina. Si adems pulsamos el botn

podremos

ver los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre un prrafo
podemos ver sus mrgenes, como se aprecia en la siguiente imagen.

1.5.

La ayuda

A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas:

33

Si seleccionas la opcin Ayuda de Dreamweaver o simplemente pulsando F1 se accede a la

ayuda en lnea de Adobe Community Help donde puedes buscar por temas o por bsqueda de
palabras clave.

Ayuda de Business Catalyst que es un sistema de alojamiento de pginas web con funciones
adicionales. Es de Adobe y hay diferentes opciones de pago al mes.

Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.

Referencia abre un panel en el que encontrars la sintaxis y descripcin de las etiquetas

HTML.

Acceder al Centro de soporte de Dreamweaver en la web.

Dreamweaver Exchange es un sistema para compartir extensiones.

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.

Evaluacin 2: El entorno de Dreamweaver CS6

Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta.
Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin.
Si pulsas Restablecer podrs repetir la evaluacin.
1. Los botones para minimizar y maximizar la ventana del programa Dreamweaver se
encuentran en la Barra Insertar.
a) Verdadero.
b) Falso.
2. Las vistas del documento pueden cambiarse a travs del panel Propiedades.
a) Verdadero.
b) Falso.
3. La pestaa Favoritos en la barra Insertar puede personalizarse para mostrar unos u otros
iconos.
a) Verdadero.
b) Falso.
4. Las barras de herramientas pueden ser flotantes.
a) Verdadero.
b) Falso.
5. La apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
a) Verdadero.
b) Falso.

34

6. Los paneles e inspectores se muestran y ocultan a travs del men ...

a) Insertar.
b) Comandos.
c) Ventana.
7. En el panel de Insertar...
a) se puede cambiar las vistas del documento.
b) los botones estn clasificados segn su categora.
c) se configuran las propiedades del objeto seleccionado.
d) respuesta
8. Se puede trabajar con el editor visual mediante las vistas...
a) diseo.
b) cdigo.
c) vista en vivo.
d) cualquiera de las anteriores.
9. El botn

sirve para...

a) pasar a la vista cdigo.

b) pasar a la vista cdigo y diseo.
c) pasar a la vista diseo.
d) pasar a la vista cdigo en vivo.
10. La vista diseo...
a) es la vista predeterminada en el entorno de trabajo clsico.
b) es la que se suele utilizar habitualmente.
c) las dos afirmaciones anteriores son verdaderas.
d) las tres afirmaciones anteriores son falsas.

35

Unidad 3. Configurar un sitio local (I)

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.

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 exactamentehttp://www.aulaclic.es/nombrepagina.htm

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.

36

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...

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que
contiene la lista de sitios locales definidos

37

Por supuesto, pueden existir varios sitios locales en un mismo ordenador, como podemos ver en la
imagen.
Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos cuatro
botones

que nos permiten borrar un sitio, editarlo, duplicarlo y exportarlo.

A continuacin tenemos otros cuatro botones:

- Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador.
- Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe.
- Nuevo sitio. A continuacin explicaremos esta opcin.
- Nuevo sitio de Business Catlyst.
En la parte inferior derecha tenemos el botn Listo que nos abrir el sitio seleccionado.
Tanto si se pulsa el botn Nuevo sitio, como si se elige el botn Editar, se mostrar la misma
ventana en la que definir o modificar las caractersticas del sitio.

Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo
clic en ella.
Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y de
momento son las nicas que cambiaremos:
Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que
empleemos de momento:
Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de
sitios.
La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local.
La carpeta puede contener ya archivos o no.
Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son
opcionales, y de momento no nos interesan.
Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y
no es necesario establecer los datos del servidor en el que estar el sitio remoto.

38

Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.

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.
2.

Para practicar realiza el Ejercicio paso a paso Crear un sitio web local. En este ejercicio,
configuraremos un sitio que iremos completando ms adelante.

Unidad 3. Ejercicio: 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
3.

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.

4.

Copia a ella la carpeta cocina que encontrars en la carpeta ejercicios del curso.

5.

Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.

6.

Haz clic sobre el men Sitio.

7.

Elige la opcin Administrar sitios. Se abrir una nueva ventana.

8.

Pulsa el botn Nuevo....

9.

Se abrir una nueva ventana, selecciona la opcin Sitio.

10. En Nombre del sitio escribe Cocina.

11. En Carpeta del sitio 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.
12. Pulsa el botn Guardar y el sitio estar listo.

39

A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como
la que aparece si pulsas aqu.

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 archivos del sitio.

En

este

caso

vemos

todos

los

documentos

creados

sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y

en

nuestro
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.

40

En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha)
con nuestros archivos.

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.

41

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.
Una vez instalado, abre el programa y haz clic en Archivo Gestor de sitios y luego en Nuevo
sitio para configurar un nuevo sitio FTP.

Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus
pginas: Servidor, Usuario y Contrasea.
Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver una
carpeta donde podrs copiar los archivos que hayas creado.

42

La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la marcada

como Sitio local, nos permite explorar la estructura de archivos y carpetas de nuestro sitio. A la
derecha encontramos Sitio remoto, con los archivos ubicados en el servidor FTP.

Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos, o del
remoto al local, para descargarlos al equipo.
Vers como el programa empieza a copiar la informacin de tu disco a Internet.
Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de
direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el
servidor. Busca la carpeta html, public_html o httpdocs y sube tus archivos all.

6.

Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo
formato, es decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las pginas a travs del cuadro de
dilogo Propiedades de la pgina.
Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinacin de teclas Ctrl + J.

Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.

43

Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del
men contextual la opcin Propiedades de la pgina.

Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras.

En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las
propiedades:

Fuente de pgina: es el tipo de letra que le aplicaremos al texto.

Tamao: es el tamao de la fuente que aplicaremos al texto.

Color del texto: es el color de la fuente.

Color del fondo: permite especificar un color de fondo para el documento, pero dicho color
solo se mostrar en el caso de no haber establecido ninguna imagen de fondo.

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen
se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que
segn los colores de la imagen ser necesario establecer unos u otros colores para el texto,
as como que no es conveniente tener un gif animado como fondo.

Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no

queremos que se repita, seleccionamos la opcin no-repeat. Si queremos que se repita o
dejamos la opcin en blanco o seleccionamos la opcin repeat. Si queremos que se repita
solo en horizontal seleccionamos la opcin repeat-x y si queremos que se repita en vertical,
entonces seleccionamos repeat-y.

Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde

empieza el contenido de la pgina y la ventana del navegador.

En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las

propiedades:

44

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen
se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que
segn los colores de la imagen ser necesario establecer unos u otros colores para el texto,
as como que no es conveniente tener un gif animado como fondo.

Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se
mostrar en el caso de no haber establecido ninguna imagen de fondo.

Texto: es el color de la fuente.

Vnculos: es el color que mostrar el texto de los vnculos.

Vnculos visitados: es el color que mostrar el texto de los vnculos visitados.

Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic
sobre el mismo.

Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde

empieza el contenido de la pgina y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que
CSS aplica nuestra configuracin utilizando reglas de estilo, mientras que HTML lo hace con
atributos HTML. Estos ltimos estn cayendo en desuso, ya que se tiende a limitar el HTML al
contenido, y no al diseo. Por eso, te desaconsejamos su uso.

En la categora Vnculos (CSS) encontramos las propiedades:

45

Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo.

Tamao: es el tamao del texto de los vnculos.

Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto
normal y los vnculos que sirven de enlace a otras pginas.

Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si
unos vnculos ya han sido visitados o no.

Vnculos de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del
vnculo.

Vnculos activos: es el color de los vnculos activos.

Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto
aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que
no aparezca subrayado.

En la categora Encabezados (CSS) encontramos la propiedad:

Fuente de encabezado: permite establece el tipo de fuente de los encabezados.

El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que
queremos aplicar a cada tipo de encabezado.

En la categora Ttulo/Codificacin encontramos la propiedad:

Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la
ventana de documento de Dreamweaver

En la categora Imagen de rastreo encontramos las propiedades:

Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo
se mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha
imagen se utiliza como plantilla grfica sobre la que crear el documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo.

46

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

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 pginas. 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 Tamaos de vantanas.
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.
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.

47

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 labarra 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.

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.
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.

48

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.

Unidad 3. Ejercicio: Crear nuevo documento y modificar sus

propiedades
Objetivo.
Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar
las propiedades de la pgina.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Abre el men Archivo y elige la opcin Nuevo, o bien haz clic sobre el botn

de la barra

de herramientas.
3. Selecciona Pgina en blanco en Categora.
4. Selecciona HTML en Tipo de pgina.
5. Haz clic sobre el botn Crear.
6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseo. Haz clic
sobre el botn Mostrar vista de diseo

7. Haz clic con el botn derecho del ratn sobre el documento en blanco, para abrir su men
contextual.
8. Elige la opcin Propiedades de la pgina en el men contextual y selecciona la
categora Apariencia (CSS).
9. En Color de texto: escribe #585858.
10. En Color de fondo: escribe #FEFEFE.
11. Haz clic en la categora Vnculos CSS.
12. En Color de vnculos: escribe #DFA01B.
13. En Vnculos visitados: escribe #F9CA69.
14. En Vnculos activos: escribe #FFB900.
15. Haz clic en la categora Ttulo/codificacin.
16. En Ttulo, escribe Cocina.
17. Haz clic sobre el botn Aceptar.

49

18. Haz clic sobre el botn Guardar

de la barra de herramientas. Guarda el documento con el

nombre menu.htm, dentro de la carpeta mis_sitios/cocina que habrs creado en ejercicio

anterior.

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
nombreDeportes, 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
que aparece si pulsas aqu.

50

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
que aparece si pulsas aqu.

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

51

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 accede al men Sitio y elige Nuevo sitio....
En la nueva ventana, asegrate de tener seleccionada la categora Sitio.
En Nombre del sitio hay que escribir Deportes.
En Carpeta del sitio local hay que seleccionar la carpeta deportes, que has copiado a la
carpeta mis_sitios.
Por ltimo, hay que hacer clic sobre el botn Guardar.
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-repeat.
Apartado

5 Modifica

tambin

los

campos Fuente

de

pgina: Verdana,

Arial,

sans-

serif; Tamao: 16 y Color de texto: #535D6F.

Apartado 6 En la categora Ttulo/Codificacin escribe Tu tienda de deportes como Ttulo.
Por ltimo, pulsa el botn Aceptar.
Apartado 7 Haz clic sobre el botn Guardar
botn Cerrar

(o pulsa las teclas Ctrl + S), y despus sobre el

. 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 accede al men Sitio y elige Nuevo sitio....
En la nueva ventana, asegrate de tener seleccionada la categora Sitio
En Nombre del sitio hay que escribir Animales.
En Carpeta del sitio local hay que seleccionar la carpeta animales, que habrs copiado de la
carpeta ejercicios a mis_sitios.
Por ltimo, hay que hacer clic sobre el botn Guardar.
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.

52

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 index.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
botn Cerrar

, y despus sobre el

Otra opcin sera utilizar el men Archivo Guardar todo y men Archivo Cerrar todo.

Evaluacin 3: Configurar un sitio local

Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta.
Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin.
Si pulsas Restablecer podrs repetir la evaluacin.
1. Es posible visualizar un sitio en el panel Archivos o en una ventana.
a) Verdadero.
b) Falso.
2. El botn

sirve para cambiar la vista del sitio.

a) Verdadero.
b) Falso.

3. El botn

sirve para ver los archivos del Sitio.

a) Verdadero.
b) Falso.
4. Si los archivos se mueven de una carpeta a otra desde fuera de Dreamweaver, las
pginas se mostrarn correctamente.
a) Verdadero.
b) Falso.
5. No importa que las pginas sean voluminosas y ocupen mucha memoria.
a) Verdadero.
b) Falso.
6. Es conveniente que todas las pginas de un sitio sigan un mismo formato.
a) Verdadero.
b) Falso.
7. Una imagen de rastreo sirve para...
a) Insertar una barra de mens.

53

b) Establecer una imagen como fondo, que no se mostrar en el navegador.

c) Buscar imgenes en Internet, al pulsar sobre ella.

8. Para qu sirve este otro botn

a) Para crear un sitio nuevo.

b) Para cambiar la vista del sitio.
c) Para elegir un color.
9. Los colores seguros para web son...
a) Los colores que no afectan a la vista.
b) Imgenes de fondo para los documentos.
c) Los colores que seguro se mostrarn de la misma forma en cualquier navegador.
d) Ninguna de las opciones anteriores.
10. Los colores...
a) Se representan con un nmero hexadecimal.
b) Pueden personalizarse.
c) Cualquiera de las dos primeras opciones.
d) Ninguna de las opciones anteriores.

54

Unidad 4. El texto: propiedades y formato (I)

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.

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.

55

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.
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.

56

Editar regla:
Mediante este botn accedemos a las opciones para la creacin o modificacin de estilos
CSS, de la regla seleccionada.

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 ponen el texto en negrita y cursiva respectivamente. Pero en este caso,
generan un estilo css en lnea.

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:

57

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.

Unidad 4. Ejercicio: Insertar texto y modificar sus propiedades

Objetivo
Practicar las operaciones de insertar texto y modificar sus propiedades.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
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 HTML, 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

2.

de la barra de herramientas.

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
numerada (ordenada) se selecciona a travs del botn

, mientras que la lista

Ejemplo de lista numerada (ordenada):

58

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

Gato

Aves

Canario

Loro

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 la 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.

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

Unidad 4. Ejercicio: Convertir texto en una lista

Objetivo
Practicar las operaciones que hay que realizar para convertir texto en una lista desordenada.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.

59

2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
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.

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.

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.

60

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.
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.

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.

61

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.
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.

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, cuando
el estilo no se repita, y no tenga sentido mantenerlo si borramos esa etiqueta concreta.

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.

62

Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nueva

regla CSS>.

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.

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.

63

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.

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.

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.

64

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.

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 Estilos 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.

65

Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir el estilo de
una etiqueta.

Unidad 4. Ejercicio: Redefinir el estilo de una etiqueta

Objetivo
Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
Se abrir el documento en Dreamweaver.
5. Haz clic sobre cualquier texto, sin seleccionar.
6. En el Inspector de propiedades CSS, en el desplegable Fuente elige Arial,Helvetica,sansserif.
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 de la pgina.
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.
17. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva
regla 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.

66

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.

Unidad 4. Avanzado: El panel Estilos CSS (I)

Veamos cmo funciona el panel Estilos CSS

El panel Estilos CSS

Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rpida y sencilla, los
estilos creados de esta manera se pueden guardar en nuestro documento, pero tambin podemos
utilizar estilos que se encuentren en hojas externas al documento. Esta particularidad es muy til
cuando diseamos un sitio web con varias pginas ya que permite definir una sola hoja de estilos
que utilizarn todas las pginas del sitio y as facilitar el diseo.
Vamos a ver cmo funcionan las hojas de estilo a travs del panel CSS que puede abrirse a travs
del men Ventana, opcin Estilos CSS. Existen otras alternativas para abrir este panel, una es
pulsando Mays + F11, o puedes hacer clic en el botn Panel CSS que aparece en el Inspector
de Propiedades CSS.
El panel tiene dos modos de visualizacin, representados por dos botones bajo el nombre del
panel. Vemoslos:

El modo Actual.

Este modo nos ofrece informacin sobre qu estilos estn afectando a la seleccin.

67

Se divide en tres secciones:

En Resumen de la seleccin, se muestran las propiedades aplicadas sobre la seleccin, aunque
estas provengan de distintas reglas. Por ejemplo, a un texto le pueden afectar las reglas generales
de la pgina, las del prrafo, etc.
La parte central muestra la seccin Reglas / Acerca de, pudiendo cambiar entre ellas con los
botones

La vista Reglas muestra las reglas que afectan a la seleccin.

La vista Acerca de nos dice dnde est definida la propiedad seleccionada.
La vista Propiedades de nos muestra las propiedades de la regla seleccionada. Aqu podemos
editarlas.

Una opcin muy interesante del panel es que nos permite activar/desactivar propiedades solo con
hacer clic a la izquierda de su nombre.
Esto nos permite comprobar rpidamente cmo afectan los estilos a nuestra pgina.

El modo Todo.

En este modo obtenemos informacin sobre los estilos disponibles en el documento actual,
independientemente de la seleccin.

68

Tenemos dos secciones:

4.

En Todas las reglas, aparece un listado de las reglas disponibles, definidas en el propio documento
o en hojas de estilo enlazadas.

5.

En Propiedades de encontramos las propiedades de la regla seleccionada, pudiendo editarlas.

En ambos modos, en la parte inferior encontramos las mismas opciones.
Desde los botones
primer

botn

podrs ordenar las propiedades de diferentes maneras. Con el

mostrars

todas

las

propiedades

ordenadas

por

categoras

(Fuente,Fondo, Bloque, Borde, etc.); tambin puedes mostrarlas ordenadas de la A a la Z con el

segundo botn.
En la esquina inferior derecha encontramos los controles que nos permiten gestionar las
reglas:

De izquierda a derecha, estos controles nos sirven para adjuntar una hoja de

estilo, crear una regla, editar la regla seleccionada o borrarla.

Gestionar estilos CSS

Para aadir una nueva regla de estilo desde el panel, basta con pulsar el icono

, y seguir

los pasos que vimos para definir estilos desde el Inspector de Propiedades CSS.
Otra opcin es ir al final de la lista de propiedades, y pulsar en Aadir propiedad.

En este caso deberemos introducir el nombre de la propiedad en la columna de la izquierda

(podremos seleccionarlo de la lista) y su valor en la columna de la derecha.

Para modificar un estilo ya existente, seleccionamos el estilo a modificar en la lista de estilos

del panel y hacemos clic en el botn

, se abrir la ventana donde se puede definir las

caractersticas del estilo.

Tambin podemos abrir esta ventana pulsando con el botn derecho sobre el estilo en el
panel CCS, y seleccionar del men desplegable la opcin Edicin. O incluso modificarlo
directamente desde la lista de propiedades que se encuentra en el panel, editando la columna
derecha que contiene el valor.
Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja de estilos vinculada, es
decir, a un archivo CSS externo, todas las pginas que contengan ese estilo sern actualizadas al
instante.

Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la lista de estilos del
panel y hacemos clic en el botn

69

7.

Aplicar un estilo
En el caso de haber creado una regla para una etiqueta, no ser necesario aplicarla, ya que
directamente afecta a todas las etiquetas de ese tipo.
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.

70

Todas las reglas disponibles estan accesibles desde el men 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: Crear y aplicar una clase

Objetivo
Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
Se abrir el documento en Dreamweaver.
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.
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.

71

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: Modificar el estilo de una lista

Objetivo
Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos. Recuerda
que este archivo lo creamos en ejercicios anteriores.
Se abrir el documento en Dreamweaver.
5. Inserta los siguientes prrafos:
Quines somos
Plato Semana
Postre Semana
Tu Receta

72

6. Selecciona todos los prrafos y pulsa el botn

para convertirlo en una lista no ordenada.

Debes hacerlo desde el Inspector de propiedades HTML.

7. Haz clic sobre la etiqueta <ul> de la barra de estado para seleccionar la lista.
8. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva
regla 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 enLeft 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.
18. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva
regla CSS> y pulsa en Editar regla.
19. Observa que aparece el selector 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

abajo,#999, #333, #333, #999.

25. Pulsa Aceptar.
26. Haz clic en el primer elemento de la lista.
27. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva
regla CSS> y pulsa en Editar regla.
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.

73

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.

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.

74

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

Unidad 4. Ejercicio: Exportar y vincular hojas de estilo

Objetivo
Practicar las operaciones necesarias para unificar los estilos declarados en distintas pginas en
una nica hoja de estilos y vincularla al resto de pginas.

Ejercicio 1: Exportar estilos

1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
Se abrir el documento en Dreamweaver.
5. Ve al men Ventana y elige Estilos CSS. Se abrir el panel.
6. Haz clic en el botn Todo.
7. Selecciona las reglas que cuelgan de style.
8. Haz clic derecho sobre ellas y elige Mover reglas CSS....
9. Marca Una nueva hoja de estilos... y pulsa Aceptar.
10. Asegrate de tener elegida la carpeta del sitio Cocina, escribe el nombre estilococina y
pulsa Guardar.
11. Ve al men Archivo y elige Guardar todo.
12. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
13. Repite los pasos 5 a 8 para exportar sus estilos.
14. En

la

ventana Mover

hoja

de

estilos

externa,

pulsa Examinar... y

elige

el

archivo estilococina.css.
15. Pulsa Aceptar.
16. Nos advertir de que hay dos reglas con el mismo nombre. Pulsamos S para mantener
ambas.
17. Ve al men Archivo y elige Guardar todo.

Ejercicio 2: Vincular hojas de estilo

1. Selecciona el sitio Cocina en el panel Archivos.
2. Haz doble clic sobre el documento platosemana.htm, que aparece en el panel Archivos.
3. Ve

al

men Formato Estilos

CSS y

elige Adjuntar

hoja

de

estilos...

Se abrir la hoja Vincular hoja de estilos externa.

4. Pulsa Examinar y elige la hoja estilococina.css.
5. En Aadir como deja Vincular y pulsa Aceptar.

75

Observa

cmo

ha

cambiado

todo

el

diseo.

Ten

en

cuenta

que

las

clases info e instrucciones ya estaban aplicadas a los textos correspondientes.

6. Haz clic sobre el botn Guardar

de la barra de herramientas o pulsa Ctrl + S para

guardar los cambios.

7. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
8. Ve al men Ventana y elige Estilos CSS. Se abrir el panel.
9. Haz clic en el botn Todo.
10. Selecciona <style>.
11. Pulsa el botn

, en la esquina inferior derecha, para borrar los estilos incrustados.

12. Pulsa el botn

para adjuntar una hoja de etilos.

13. Se abrir la hoja Vincular hoja de estilos externa con las opciones ya seleccionadas. Si no,
sigue el paso 4.
14. Pulsa Aceptar.
15. Haz clic sobre el botn Guardar

de la barra de herramientas o pulsa Ctrl + S para

guardar los cambios.

Ejercicios unidad 4: El texto: propiedades y formato

Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.

Ejercicio 1: Deportes.
1. Abrir el sitio Deportes.
2. Abrir el documento index.htm.
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 #E0E5EF 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, el 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.

76

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.

Ayuda ejercicios unidad 4: El texto: propiedades y formato

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. Seleccionar el sitioDeportes en el
men desplegable que aparece en la parte superior del panel.
Apartado 2 Para abrir el documento index.htm hay que hacer doble clic sobre este archivo, en la
lista de archivos que aparecen en el panel Archivos.
Apartado 3 Si no aparece el panel Inspector de propiedades CSS, brelo a travs del
men Ventana, opcin Propiedades.
En le desplegable Regla de destino, selecciona body, y pulsa el botn Editar regla.
Haz clic en la categora Cuadro y en el marco Margin asegrate de que la opcin Igual para
todo esta activada. En el campo Top. escribe 20px.
Haz

clic

en

la

categora Fondo y

modifica

las

propiedades Background-position

(x) a center y Background-position (y) a top.

Pulsa Aceptar.
Apartado 4 En le desplegable Regla de destino del Inspector de propiedades CSS,
selecciona <Nueva regla CSS>, y pulsa el botn Editar regla.
En Tipo de Selector selecciona Etiqueta.
En nombre escribe html.
Y en Definicin de regla selecciona Slo en este documento.
Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS.
En la categora Fondo, en la propiedad background-color escribe el valor #E0E5EF. En la
propiedad Background-image elige

la

imagen fondo.png que

encontrars

en

la

carpeta imagenes. En Background-repeat establece repeat-x. En las propiedades Backgroundposition (x) elige center y Background-position (y) elige top.
Pulsa el botn Aceptar.
Para ver el resultado correctamente, utiliza la Vista en vivo o previsualzalo en el navegador.
Apartado 5. En le desplegable Regla de destino del Inspector de propiedades CSS,
selecciona <Nueva regla CSS>, y pulsa el botn Editar regla.
En Tipo

de

Selector selecciona ID,

en Nombre selecciona menu,

en Definir

en selecciona Slo en este documento.

Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS.
En la categora Tipo, escribe #EFF4FF en color, selecciona 18px en font-size y bold en fontweight.

77

En la categora Cuadro, introduce 600px en la propiedad width, En el cuadro margin, desmarca

la

opcin Igual

para

todo e

introduce

los

valores Top: 80px, Right: auto,Bottom: 10px y Left auto.

En la categora Bloque, selecciona center en Text-align. Pulsa Aceptar.
Haz clic sobre el primer texto, el que aparece en cajas punteadas y que ahora mismo tenemos
sobre el fondo del logo. En la barra de estado, haz clic sobre la etiqueta table. En el Inspector de
propiedades, en el campo que aparece bajo el nombre de la etiqueta, despligalo y
escribe menu.
Abre el panel Estilos CSS (men Ventana Estilos CSS).
Haz clic en la vista todo. Selecciona el selector body,th,td. Haz clic derecho sobre l y
elige Editar selector. Cmbialo por slo body.
Apartado 6. Haz clic sobre el encabezado 1. En el desplegable Regla de destino del Inspector
de propiedades CSS, selecciona <Nueva regla CSS>, y pulsa el botn Editar regla.
En Tipo

de

Selector selecciona Etiqueta,

en Nombre selecciona h1,

en Definir

en selecciona Slo en este documento.

Pulsa el botn Aceptar y se abrir el dilogo dnde asignars las propiedades CSS.
En la categora Tipo, escribe #738098 en color. Pulsa Aceptar.
Puedes ver cmo se vera esta pgina con los cambios hechos hasta ahora aqu.

Apartado 7. Abre el panel CSS (men Ventana Estilos CSS). Haz clic en la vista todo.
Selecciona las reglas que cuelgan de style.
Haz clic derecho sobre ellas y elige Mover reglas CSS....
Marca Una nueva hoja de estilos y pulsa Aceptar.
Asegrate de tener elegida la carpeta del sitio Deportes, escribe el nombre estilodeportes y
pulsa Guardar.
Ve al men Archivo y elige Guardar todo.
Para abrir los documentos donde.htm, instalaciones.htm y reservas.htm hay que hacer doble
clic sobre estos archivos, en la lista de archivos que aparecen en el panelArchivos.
Para cada uno de los archivos, ve al men Formato Estilos CSS Adjuntar hoja de estilos,
y selecciona la hoja estilodeportes.css.
Apartado 8 Haz clic sobre la pestaa del archivo instalaciones.htm y seleccionar las seis lneas
que hacen referencia a las instalaciones. Haz clic sobre el botn Lista sin ordenar

78

Apartado 9 Para cada uno de los archivos, hacer clic sobre el botn Guardar
sobre el botn Cerrar

. O puedes pulsar en Guardar Todo

, y despus

, hacer clic derecho sobre las

pestaas y elegir Cerrar todo.

Ejercicio 2: Animales.
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.
12. Convertir la primera lnea de texto a un encabezado 1.
13. Abrir el documento gatos.htm y asignarle la hoja de estilos estiloanimales.css.
14. Convertir la primera lnea de texto a un encabezado 1.
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.

Ayuda ejercicios unidad 4: El texto: propiedades y formato

Ejercicio 2: Animales
Apartado 1 Para abrir el sitio Animales hay que seleccionarlo en el panel Archivos. Puedes abrir
el

panel

travs

del

men Ventana,

opcin Archivos.

Seleccionar

el

sitio

en

el

men Animales desplegable que aparece en la parte superior del panel Archivos.
Apartado 2 Para abrir el documento perros.htm hay que hacer doble clic sobre l, en el
panel Archivos.

79

Apartado

3 Haz

el

ttulo Perros y

en

el Inspector

de

propiedades

HTML selecciona Encabezado 1 en el desplegable Formato.

Apartado 4 En el Inspector de propiedades CSS, selecciona <Nueva regla CSS> haz clic en el
botn

para ponerlo en cursiva.

Se abrir la ventana Nueva regla CSS. Elige el Tipo de selector como Etiqueta, quedar
seleccionada la etiqueta h1. Pulsa Aceptar.
Tambin selecciona 36 en el desplegable Tamao del el Inspector de propiedades CSS.
Apartado 5 y 6 Selecciona el texto Cuidados Postnatales y en el Inspector de propiedades
CSS haz clic en el botn

para poner el texto en cursiva.

Se abrir la ventana Nueva regla CSS. Deja el Tipo de selector como Clase y escribe
como Nombre titulo.
Pulsa en

para ponerlo en negrita.

Tambin selecciona 18 en el desplegable Tamao.

Apartado 7 Para acceder a las propiedades del documento haz clic en un rea vaca de la pgina
y en el Inspector de propiedades haz clic sobre el botn Propiedades de la pgina...
En la categora Apariencia (CSS) selecciona Georgia, Times New Roman, Times, serif en el
desplegable Fuente de la pgina.
Escoge 16 en el campo Tamao.
En Color del fondo escribe #EFEFD1.
Acepta los cambios.
Apartado 8 Para exportar los estilos a un archivo .css abre el panel Estilos CSS a travs del
men Ventana, opcin Estilos CSS.
Pulsa el botn Todo para ver todos los estilos aplicados sobre la pgina en este momento.
Selecciona todas las reglas, haz clic derecho y selecciona Mover reglas CSS... para exportar
todos los estilos de la pgina.
Marca la opcin Una nueva hoja de estilos CSS... y pulsa Aceptar.
Busca la carpeta animales, raz del sitio, en el cuadro de dilogo que se te muestra y guarda la
hoja de estilos como estiloanimales.css.
Se vincular al documento automticamente.
Apartado 9 Para abrir el documento index.htm hay que hacer doble clic sobre l, en el
panel Archivos.
Para vincular la hoja de estilos a la pgina haz clic en el botn Adjuntar hoja de estilos

del

panel CSS. En el siguiente cuadro de dilogo haz clic en el botn Examinar y selecciona el
archivo estiloanimales.css.

Confirma

que

el

campo Aadir

como tiene

la

opcin Vincular activada.

Apartado 10 Haz clic sobre la primera lnea de texto, y en el Inspector de propiedades
HTML selecciona Encabezado 1 en el desplegable Formato.
Apartado 11 Para abrir el documento consultas.htm hay que hacer doble clic sobre l, en el
panel Archivos.

80

Para vincular la hoja de estilos a la pgina haz clic en el botn Adjuntar hoja de estilos

del

panel CSS. En el siguiente cuadro de dilogo haz clic en el botn Examinar y selecciona el
archivo estilo.css. Confirma que el campo Aadir como tiene la opcin Vincular activada.
Apartado 12 Selecciona

el

texto Consultas y

en

el

campo Formato del inspector

de

propiedades HTML selecciona Encabezado 1.

Apartado 13 Para abrir el documento gatos.htm hay que hacer doble clic sobre l, en el
panel Archivos.
Para vincular la hoja de estilos a la pgina haz clic en el botn Adjuntar hoja de estilos

del

panel CSS. En el siguiente cuadro de dilogo haz clic en el botn Examinar y selecciona el
archivo estiloanimales.css.

Confirma

que

el

campo Aadir

como tiene

la

opcin Vincular activada.

Apartado 14 Selecciona el texto Gatos y en el campo Formato del inspector de propiedades
HTML selecciona Encabezado 1.
Apartado 15 Selecciona el texto Cmo Prevenir Los Problemas Dentales? y en el
campo Clase del inspector de propiedades HTML selecciona titulo.
Apartado 16 Seleccionar las cuatro ltimas lneas.
Hacer clic sobre el botn Lista sin ordenar

Haz clic sobre la segunda lnea de la lista, y pulsa el botn Sangra de texto

Pulsar fuera de la lista para que se aplique el ltimo cambio.

Apartado 17 Para todos los documentos abiertos, hacer clic sobre el botn Guardar Todo

,o

sobre el men Archivo Guardar todo.

Evaluacin 4: El texto: propiedades y formato

Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta.
Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin.
Si pulsas Restablecer podrs repetir la evaluacin.

1. Las caractersticas del texto no pueden modificarse a travs del inspector de

propiedades.
a) Verdadero.
b) Falso.

2. Es posible cambiar la alineacin del texto.

a) Verdadero.
b) Falso.

3. El botn

sirve para que el texto aparezca en negrita.

a) Verdadero.
b) Falso.

4. El tipo de nmeros o vietas de las listas pueden modificarse.

81

a) Verdadero.
b) Falso.

5. En los estilos CSS no hay actualizacin automtica.

a) Verdadero.
b) Falso.

6. Hay que limitar el uso de CSS, ya que muchos navegadores no lo reconocen.

a) Verdadero.
b) Falso.

7. A la hora de seleccionar la fuente...

a) Aparecen conjuntos de fuentes en lugar de una sola.
b) La fuente tiene que ser descargada desde Internet.
c) La fuente tiene que ser de Adobe.

8. Para qu sirve este otro botn

a) Para crear una lista ordenada.

b) Para crear una lista no ordenada.
c) Para aplicar sangra.
d) Para crear prrafos.

9. Los estilos CSS...

a) Son aplicables a prrafos.
b) Son aplicables a palabras seleccionadas.
c) Cualquiera de las dos primeras opciones.
d) Ninguna de las opciones anteriores.

10. Las hojas de estilo...

a) Slo pueden estar vinculadas a una pgina.
b) Permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo.
c) Slo son recomendables para sitios con muchas pginas.
d) Son incompatibles con los estilos en lnea o incrustados en la pgina.

82

Unidad 5. Hiperenlaces (I)

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/seccion2/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.
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.

83

Si queremos referirnos a carpetas que estn por encima del nivel donde nos encontramos
deberemos utilizar ../
Por

ejemplo,

imagina

que

estamos

direccin http://www.misitio.com/pagina/informacion/index.html.
mostrar

una

imagen

que

se

en
En

la
esta

encuentra

siguiente

pgina
en

queremos
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 para enlazar archivos
dentro del sitio.
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 ahttp://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.

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 (#).

84

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, en la siguiente imagen hay un enlace a www.aulaclic.es, que al ser un archivo
externo es de referencia absoluta, por eso contiene http://

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.

85

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.

Unidad 5. Avanzado: Configurar nuevos enlaces

Crear vnculos relativos automticamente

Haciendo clic en el men Sitio y seleccionando la opcin Administrar sitios... podemos editar la
configuracin del sitio. Bastar con seleccionar el sitio y hacer doble clic en el cuadro de dilogo, o
seleccionar el sitio y pulsar en el icono Editar.
Se abrir la ventana de Configuracin del Sitio. All selecciona la categora Informacin
local dentro del grupo Configuracin avanzada, y podrs ver las siguientes opciones:

86

Estas opciones te ayudarn a crear los enlaces de forma relativa. Selecciona Documento o Raz
del sitio en Vnculos relativos a: para que se creen los enlaces relativos al documento donde se
halla situado el enlace o desde la raz del sitio.
Si seleccionas la opcin Raz del sitio, los enlaces se establecern respecto a la carpeta
seleccionada en el campo Carpeta raz local:. Pero recuerda que en nuestro sitio local no
funcionarn a no ser que instalemos un servidor de pruebas.

Seleccionar estas opciones no cambiar los enlaces existentes, sino que aplicar esta
configuracin a los vnculos que se creen a partir de ese momento.

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.
Puede especificarse en el inspector de propiedades HTML a travs de Destino, 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.

87

_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 tiempo,
puede adquirir cuatro colores diferentes que pueden especificarse a travs de las propiedades de la
pgina. Estos cuatro colores diferentes corresponden a los tres estados del vnculo: vnculo normal,
vnculo activo (el ltimo pulsado), vnculo visitado o vnculo de sustitucin (cuando el cursor est
sobre el vnculo).
Aqu tienes dos vnculos de ejemplo:
www.aulaclic.es www.elpais.com
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.

a:hover para los enlaces con el cursor encima.

88

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.
Las ltimas versiones de los navegadores Chrome (v.24) y Firefox (v.18) ya no dibujan el contorno
de la imagen, IE 9 si lo dibuja.
Veamos como quitarlo utilizando CSS.
En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y
pulsamos Editar regla.

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:

89

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: Crear un hiperenlace

Objetivo
Practicar cmo crear un hiperenlace.

Ejercicio

Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.

Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.

Selecciona el sitio Cocina en el panel Archivos.

Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.

Se abrir el documento en Dreamweaver.

Si no aparece el inspector de propiedades, brelo a travs del men Ventana,

opcin Propiedades.

Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botn

desplegar sus propiedades ms avanzadas.

para

90

Selecciona la imagen del logotipo de aulaClic. Para ello hay que hacer clic sobre ella.

En Vnculo, del inspector de propiedades, escribe http://www.aulaclic.es.

En Dest selecciona la opcin _blank.

Pulsa fuera del texto para que deje de estar seleccionado y se le apliquen todos los
cambios.

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.

Cierra la ventana del navegador.

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.

En Tipo de selector elige Compuesto.

En Nombre del selector, escribe a img.

En Definicin de regla selecciona la hoja estilococina.css.

Pulsa Aceptar.

Ve a la categora Borde. En Border-style elige none y pulsa Aceptar.

Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.

Para cada elemento de la lista, selecciona el texto y crea el enlace a la pgina

correspondiente del sitio. No pongas nada en Destino.

Con el cursor en un elemento de la lista, en el Inspector de propiedades CSS, en el

desplegable Regla de destino elige <Nueva regla CSS> y pulsa en Editar regla.

Observa que aparece el selector compuesto .menu li a. Pulsa Aceptar.

En la categora Tipo, en color introduce #000 y en Text-decoration selecciona none.

En la categora Cuadro, en Padding, deja marcado Igual para todo e introduce 3 en Top.

En la categora Bloque, en Display, selecciona Block. Esto har que el enlace ocupe todo
el elemento de la lista.

Pulsa Aceptar.

En el Inspector de propiedades CSS, en el desplegable Regla de destino elige <Nueva

regla CSS> y pulsa en Editar regla.

Observa que aparece el selector compuesto .menu li a. Compltalo para que quede .menu
li a:hover (cuando el cursor est sobre el elemento). Pulsa Aceptar.

En la categora Tipo, en Color introduce #DB8C15 y pulsa Aceptar.

Haz clic en el men Archivo Guardar todo.

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.

91

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 depende del navegador que estemos utilizando, tericamente, el
navegador debera abrir el cliente de correo predeterminado del usuario (Outlook, Firebird...). Pero en
la prctica cada navegador se comporta de una forma distinta, sobre todo si no tenemos instalado un
cliente de correo electrnco y vemos el correo con webmail (Gmail, Hotmail, ...)
Por ejemplo, con las versiones disponbles a la hora de escribir esto, IE9 da un mensage de error
diciendo que no hay ningn cliente de correo instalado, Firefox saca una ventana ofreciendo abrir un
correo webmail y Chrome no hace nada.
Por lo tanto usar mailto es una opcin que puede no ser prctica si el usuario no tiene instalado un
cliente de correo (Outlook, Firebird...), tamoco si se conecta en un ordenador pblico, o si utiliza un
telfono mvil o una tableta.
Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerir una
pgina dinmica como veremos a lo largo del curso. 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.

Unidad 5. Ejercicio: Crear un vnculo de correo electrnico

Objetivo
Practicar cmo crear un vnculo de correo electrnico.

92

Ejercicio

Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio.

Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.

Selecciona el sitio Cocina en el panel Archivos

Haz doble clic sobre el documento quienes.htm, que aparece en el panel desplegable
de Archivos.
Se abrir el documento en Dreamweaver.

Si no aparece el inspector
opcin Propiedades.

Al final del todo, en una nueva lnea, escribe el texto Buscamos cocinero. Si quieres trabajar
con nosotros, envanos tu CV aqu..

Selecciona la palabra aqu que acabas de escribir.

En Vnculo, del inspector de propiedades, escribe mailto:trabajo@aulaclic.es (es una

direccin ficticia. Puedes emplear la tuya para comprobar si funciona).

Pulsa fuera del texto para que deje de estar seleccionado y se le aplique el ltimo cambio.

Pulsa F12 para ver el resultado en tu navegador, observa que si haces clic sobre el texto se
abre tu aplicacin de correo (si la tienes instalada en tu ordenador) preparada para que escribas
el texto del mensaje que quieres enviar, en la direccin de destino habr
puesto trabajo@aulaclic.com.

Cierra tu aplicacin de correo.

Cierra la ventana del navegador.

Haz clic sobre el botn Guardar

de

propiedades,

brelo

travs del

men Ventana,

de la barra de herramientas.

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

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, adems del efecto negativo que causa.
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.

93

Para evitar esto puedes activar la opcin Comprobacin de vnculos con distincion entre
maysculas y minsculas que se encuentra en la ventana deConfiguracin del Sitio, dentro
de Configuracin avanzada en la categora Informacin local.
Configuracin

del

Sitio.

All

selecciona

la

categora Informacin

local dentro

del

grupo Configuracin avanzada

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.

En la imagen vemos que no se ha encontrado un archivo enlazado, posiblemente porque el

nombre est mal escrito, y 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 eldocumento actual,
en todo el sitio, o en los archivos o carpetas del sitio seleccionados previamente.
A travs de Mostrar hay que especificar si han de mostrarse los Vnculos rotos, los Vnculos
externos o Archivos hurfanos.
1. Los Vnculos rotos son los vnculos que no siguen una ruta vlida, o que enlazan a archivo que
no existe.

94

2. 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.
3. 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 u
otros medios. En este caso s 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:

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

Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.

Ejercicio 1: Deportes.

Abrir el sito Deportes.

Abrir los documentos index.htm, donde.htm, instalaciones.htm y reservas.htm.

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.

Crear un hiperenlace a donde.htm en el texto Dnde.

95

Crear un hiperenlace a instalaciones.htm.

Crear un hiperenlace a reservas.htm en el texto Reservas.

No crees el enlace que lleva a la pgina actual.

Guardar los cambios y cerrar el documento.

Ejercicio 2: Animales.
1. Abrir el sito Animales.
2. Abrir el documento index.htm.
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.
6. Guardar los cambios y cerrar el documento.

Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.

Ayuda ejercicios unidad 5: 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.

96

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.
Observa que ya no har falta que escribas la pgina a enlazar, ya que te aparecer en el
desplegable.
Apartado 4 Ve al men Archivo y elige Guardar todo. Despus en el mismo 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.
Escribir http://www.aulaclic.es en Vnculo, del Inspector de propiedades HTML.
Apartado 4 Seleccionar la imagen de aulaclic.
Seleccionar _blank en Destino, 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 style elige none y pulsa Aceptar.
Apartado 6 Hacer clic sobre el botn Guardar

, y despus sobre el botn Cerrar de la

pestaa.

97

Evaluacin 5: Hiperenlaces

Slo una respuesta es vlida por pregunta. Haz clic en la respuesta que consideres correcta.
Contesta todas las preguntas y haz clic en el botn Corregir para ver la solucin.
Si pulsas Restablecer podrs repetir la evaluacin.
1. Un hiperenlace es lo mismo que un hipervnculo, un vnculo, o un enlace.
a) Verdadero.
b) Falso.
2. Es posible asignar un vnculo a parte de una imagen.
a) Verdadero.
b) Falso.
3. Los vnculos vacos no existen.
a) Verdadero.
b) Falso.
4. Es posible abrir el documento vinculado en una ventana nueva del navegador.
a) Verdadero.
b) Falso.
5. No es posible especificar vnculos a direcciones de correo electrnico desde Dreamweaver.
a) Verdadero.
b) Falso.
6. El cursor cambia de forma al situarse encima del vnculo en el navegador.
a) Verdadero.
b) Falso.
7. Cuando el vnculo est definido sobre una imagen.
a) sta adquiere un tono azulado.
b) Es posible evitar el borde azul alrededor de ella.
c) En todos los navegadores aparece el borde azul alrededor de ella.
8. El vnculo vaco...

98

a) No necesita que se establezca nada como vnculo.

b) Tiene un formato diferente al del resto de vnculos.
c) Necesita que se inserte el smbolo # como vnculo.
9. Es posible especificar el color de...
a) Los vnculos.
b) Los vnculos activos.
c) Los vnculos visitados.
d) Cualquiera de las opciones anteriores.
10. El texto asignado a un hiperenlace siempre aparece subrayado.
a) Verdadero.
b) Falso.

99

100