Publicado el 3 de Julio del 2018
741 visualizaciones desde el 3 de Julio del 2018
524,2 KB
15 paginas
Creado hace 21a (18/03/2003)
UNIVERSIDAD CARLOS III DE MADRID.
ESCUELA DE TURISMO.
Informática aplicada al
sector turístico
Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en
Dreamweaver
En esta práctica guiada vamos a ver un conjunto de herramientas que nos van a facilitar la
creación de nuestra guía virtual y guardar la uniformidad de estilo en todas sus páginas. Las
herramientas que vamos a tener que utilizar son:
1. Hojas de estilo CSS.
2. Plantillas en Dreamweaver
3. Bibliotecas en Dreamweaver.
1. Hojas de estilo CSS
Las hojas de estilo son una potente herramienta para dar formato y uniformidad a una
web, permite definir y modificar atributos del lenguaje HTML. Pensemos por ejemplo que
estamos diseñando un web con 10.000 páginas, cada una con su título, menús y texto y
quisiésemos que con una sola modificación pudiésemos cambiar la apariencia de todos los
títulos, sin tener que ir página a página. Si trabajásemos con hojas de estilo, sólo tendríamos que
modificarlas y este cambio se vería reflejado en todas las páginas.
Las hojas de estilos CSS residen en el área HEAD de un documento y definen una serie
de estilos. Una hoja de estilos CSS es un archivo de texto externo que contiene estilos y
especificaciones de formato. Si edita una hoja de estilos CSS externa, todos los documentos
vinculados a esa hoja se actualizarán con los cambios. Las hojas de estilos CSS residen en el área
HEAD de un documento y definen una serie de estilos.
se llama “fichero.css”:
A continuación vemos como es el archivo de una hoja de estilos CSS externa, el archivo
/* hoja de estilo externa estilo.html */
all.BOLDBLUE {color: blue; font-weight: bold;}
h1 {line-height: 18pt;}
p {color: yellow;}
/* fin de fichero */
Para incluir una hoja de estilos CSS (“fichero.css”) en una página tenemos que añadir en
el área HEAD lo siguiente:
<head>
<title>Los CSS</title>
<link rel = stylesheet type = "text/css" href = "fichero.css">
</head>
Dreamweaver nos ayuda a crear estos ficheros. Para comprobar como creamos nuestras
hojas de estilo vamos a seguir dos ejemplos.
1
2.1 Ejemplo 1
Nuestro objetivo es el de crear un fichero externo (“externo.css”) para definir el formato
que vamos utilizar para los títulos y para el texto del cuerpo del documento.
Seleccionamos la opción “CSS Styles” según como se muestra en la siguiente ventana:
Aparecerá la siguiente ventana:
Haciendo doble-click en el área blanca de esta ventana podremos definir los estilos en
una nueva página externa presionando el botón de “New...” (“Nueva...”)
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 2
Aparecerá la siguiente ventana, donde escribiremos el nombre del estilo “.titulo”
(comprobar que las demás opciones son las mismas):
Pulsando el botón “OK” aparecerá la siguiente pantalla donde indicaremos el nombre del
fichero “externo.css” :
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 3
Pulsamos el botón guardar y aparecerá la ventana donde elegimos el formato para el
estilo “.titulo”. Elegiremos el tipo de fuente (“Font”), el tamaño de la letra (“Size”), negrita
(“Bold”) y el color.
Añadiremos también la definición para el texto general del documento (“.resto”). Para
Pulsamos “OK” y en la siguiente ventana “Done”.
ello procedemos de la misma forma y seleccionamos el formato para el estilo “.resto”:
Por lo tanto, tendremos los dos estilos:
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 4
Ahora, para hacer que un texto de la página HTML tenga uno de los estilos basta con
seleccionarlo y pulsar el estilo que deseamos aplicar:
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 5
2.2 Ejemplo 2
En este ejemplo aprenderemos la utilización de las hojas de estilo CSS para hacer que los
hiperenlaces de nuestras páginas no salgan subrayados y que al pasar por ellos, se cambie de
color. Realizamos la misma operación que en el ejemplo anterior hasta que lleguemos a la parte
de la creación del nuevo estilo. En esta ventana debemos elegir la opción “Redefine HTML Tag”
y seleccionar el tag “a”, igual que mostramos en la siguiente ventana:
Pulsamos “OK” y seleccionamos el tipo de letra (“Font”), el tamaño (“Size”), el color
para los hiperenlaces y “Decoration” “none” (ninguno).
Ahora queremos modificar el formato para los hiperenlaces cuando pasamos por encima
de ellos con el ratón. Procedemos de la misma forma que los pasos anteriores y cuando vamos a
crear el nuevo estilo seleccionamos “Use CSS Selector” y el “Selector” “a:hover” que es la
propiedad que se activa cuando pasamos por encima del un enlace con el ratón.
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 6
Pulsamos “OK” y seleccionamos el formato de este estilo, cambiando el color respecto al estilo
“a”.
De esta forma tendremos los cuatro estilos en la hoja de estilos CSS que hemos llamado
“externo.css”.
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 7
Se recomienda
insertar un hiperenlace y comprobar, desde el navegador, el
comportamiento cuando pasamos por encima con el ratón .
2. Plantillas en Dreamweaver
Las plantillas y bibliotecas de Dreamweaver nos pueden ayudar a crear páginas Web con
un diseño coherente. El uso de plantillas y bibliotecas también facilita el mantenimiento de sitios
Web, ya que podemos rediseñar un sito y cambiar cientos de páginas en cuestión de segundos.
Una plantilla es un documento que puede utilizarse como base para otros documentos.
Al crear una plantilla, podemos indicar qué elementos de la página deberán permanecer
constantes (no editables) y qué elementos podrán modificarse. Por ejemplo, si deseamos publicar
una revista en línea, la cabecera probablemente nunca cambie, pero sí cambiará el título y el
contenido con cada nuevo número. Para indicar el estilo y la ubicación del artículo central, puede
utilizar texto marcador de posición y definirlo como región editable. Para agregar nuevos
artículos, el redactor sólo tendrá que seleccionar el texto marcador de posición y escribir el
artículo sobre él.
Podemos modificar una plantilla incluso después de usarla para crear documentos.
Posteriormente, al actualizar documentos que usen una plantilla, las secciones bloqueadas (no
editables) de los documentos se actualizarán con los cambios efectuados en la plantilla.
En esta práctica guiada aprenderemos a crear una plantilla con sus regiones editables y
constantes. Más adelante aprenderemos a crear un documento a partir de una plantilla y, por
último, a modificar una plantilla haciendo que estos cambios se reflejen en los documentos que
hubiésemos creado anteriormente a partir de la misma.
2.1 Creación de una plantilla
Lo primero de todo es diseñar el aspecto que queremos que tengan nuestras páginas.
Sería interesante utilizar hojas de estilo para definir los formatos de los objetos que insertemos en
la plantilla. Para ello creamos un documento como el siguiente:
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 8
Fíjese que para la creación de este documento tipo se han utilizado tablas para distribuir
de una forma coherente los objetos que van a formar parte de nuestras páginas.
A partir de este documento tipo, lo que haremos es guardar este documento como una
plantilla de Dreamweaver.
Ahora debemos definir la parte donde podrá insertarse algún objeto (imagen, texto, ...),
las demás zonas quedarán como no editables. Marcamos primero el texto donde insertaremos el
título de la página (“INSERTAR TITULO”).
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 9
A continuación seleccionamos del menú la opción “Modificar > Plantillas > Neuva
región editable.”
Aparecerá la siguiente ventana donde insertaremos el nombre de la región editable
“titulo”.
Con una franja azul claro se encuentra marcada la zona donde puede introducirse el
contenido (en este caso el título).
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 10
A continuación haríamos lo mismo para la región “foto” y “contenido”. De esta forma,
cuando creemos un documento nuevo a partir de esta plantilla sólo podremos modificar las
regiones “titulo”, “foto” y “contenido”.
2.2 Creación de una plantilla
Informática aplicada al sector turístico – Hojas de estilo, plantillas y objetos en Dreamweaver 11
Una plantilla la utilizaremos como punto de partida para la creación de nuevos
documentos o aplicarla a documentos existentes. En nuestro sitio web podemos crear más de
una plantilla, depende de cómo queremos organizar la información en cada una de las páginas.
Para crear un nuevo documento basado en una plantilla, seleccionamos la opción
“Archivo > Nuevo desde plantilla”. En el cuadro de diálogo que aparece a continuación,
seleccionamos una plantilla (“miplantilla”) y hacemos clic en Seleccionar.
Comprobar que está activa la opción para actualizar las páginas que creamos si alguna
Crear cuenta
Comentarios de: Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver (0)
No hay comentarios