Beruflich Dokumente
Kultur Dokumente
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 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
11.1. Introduccin
11.2. Crear plantillas
11.3. Establecer regiones editables en una plantilla
11.4. Basar pginas en una plantilla
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
14.1. Introduccin
14.2. Insertar una capa
14.3. Formato de una capa
15.1. Introduccin
15.2. Insertar un comportamiento
15.3. Mostrar-Ocultar elementos
15.4. Llamar JavaScript
Eventos
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
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
23.1. Introduccin
23.2. Importar datos de un archivo externo
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
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)
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
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
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
2.
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.
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.
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.
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.
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.
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:
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.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
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
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.
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.
12
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:
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.
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
Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo estilo en lnea>,
marca los botones
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
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
...
19
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.
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.
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.
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
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 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
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.
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.
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
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
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.
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
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.
Un comando que puede resultarnos til es la tecla F4. Al pulsarla, todos los paneles se ocultan.
Para mostrarlos, la volvemos a pulsar.
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.
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
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.
1.4.
Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de
documento:
30
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
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.
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
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
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.
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.
34
sirve para...
35
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.
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
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
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.
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.
6.
7.
8.
9.
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
en
nuestro
las
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.
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
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.
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.
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.
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.
Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic
sobre el mismo.
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.
45
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.
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.
El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que
queremos aplicar a cada tipo de encabezado.
Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la
ventana de documento de Dreamweaver
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.
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
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
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
, 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.
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
Ejercicio 1: Deportes.
1. Copia
la
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
encontrars
en
la
carpeta
de ejercicios a
la
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.
51
Ejercicio 1: Deportes
Apartado
1 Copia
la
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-
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.
a) Verdadero.
b) Falso.
3. El botn
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
54
1.
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
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.
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.
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
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
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.
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
12. Selecciona las lneas desde Mondar los boniatos hasta el final.
13. Haz clic sobre el botn de Lista ordenada
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
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.
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.
Vemoslo:
62
Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos
aparecer la siguiente ventana:
Clase. Es el alias que tomar el estilo, y para que afecte a un elemento, debemos de aplicarle
esa
clase.
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 #.
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.
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.
6.
Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos
editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se
van aadiendo a la lista.
Si queremos acceder a todas las propiedades, podemos pulsar en el botn Editar regla. Se abrir
la ventana Definicin de regla.
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.
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.
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
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
El modo Actual.
Este modo nos ofrece informacin sobre qu estilos estn afectando a la seleccin.
67
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
En Todas las reglas, aparece un listado de las reglas disponibles, definidas en el propio documento
o en hojas de estilo enlazadas.
5.
botn
todas
las
propiedades
ordenadas
por
categoras
De izquierda a derecha, estos controles nos sirven para adjuntar una hoja de
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.
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.
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
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
El aspecto de la pgina postresemana.htm, con los cambios que hemos realizado hasta este
ejercicio es el que puedes ver aqu.
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
de
selector,
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-
Desmarca Igual
para
todo en Color e
introduce,
de
arriba
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:
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.
74
Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso Exportar y
vincular hojas de estilo.
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.
al
CSS y
elige Adjuntar
hoja
de
estilos...
75
Observa
cmo
ha
cambiado
todo
el
diseo.
Ten
en
cuenta
que
las
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
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
Si no tienes muy claro las operaciones a realizar para resolver este ejercicio, Aqu te lo
explicamos.
clic
en
la
categora Fondo y
modifica
las
propiedades Background-position
la
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
en Definir
77
opcin Igual
para
todo e
introduce
los
de
en Definir
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
, y despus
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.
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
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
Se abrir la ventana Nueva regla CSS. Deja el Tipo de selector como Clase y escribe
como Nombre titulo.
Pulsa en
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
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
de
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
Haz clic sobre la segunda lnea de la lista, y pulsa el botn Sangra de texto
,o
3. El botn
a) Verdadero.
b) Falso.
81
a) Verdadero.
b) Falso.
82
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:
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
84
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.
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
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.
_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.
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.
89
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.
Objetivo
Practicar cmo crear un hiperenlace.
Ejercicio
Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos.
Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
para
90
Selecciona la imagen del logotipo de aulaClic. Para ello hay que hacer clic sobre ella.
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.
Pulsa Aceptar.
Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
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.
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.
91
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.
Objetivo
Practicar cmo crear un vnculo de correo electrnico.
92
Ejercicio
Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin 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..
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.
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
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
Entonces se muestra un nuevo panel, en el que ya es posible comprobar si existen vnculos rotos.
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.
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.
Si no tienes abierto Dreamweaver, brelo para realizar los ejercicios planteados a continuacin.
Ejercicio 1: Deportes.
Observa que al principio de cada uno se repite el mismo men. Para cada palabra, crea los
siguientes enlaces:
o
95
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.
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
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
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
99
100