SESIÓN 8

PLANTILLAS Y
CSS
Al finalizar la sesión, lograrás:

Crear plantillas que sirvan como estructura de

base para diseñar páginas Web interactivas
Trabajar con hojas de estilos para facilitar la
aplicación y los cambios de formatos en las
páginas Web

Además, podrás conocer acerca de:

Plantillas
Operaciones con plantillas
Estilos CSS
Operaciones con estilos CSS
PRESENTACIÓN
Existen técnicas y herramientas muy usadas en Adobe Dreamweaver CS6 para facilitar la creación
y edición de páginas web que son las Plantillas y Hojas de estilos.
En esta sesión, aprenderás cómo crear plantillas para que la página web sea interactiva con otros
documentos HTML. Además, podrás crear y editar estilos CSS a tu documento web.

(S8-38)

PLANTILLAS
Una plantilla en Adobe Dreamweaver CS6 es un documento especial que sirve para definir una
estructura o diseño fijo, los documentos creados en base a una plantilla permiten sólo la inserción y
la modificación de contenido adicional al de la plantilla. Dicho contenido de la plantilla contiene
regiones editables y otras zonas sin posibilidad de modificación.
Las plantillas (base o padre) cuentan con plantillas anidadas que también se les llaman páginas
hijas y que están vinculadas con la plantilla base , por lo que van a heredar las características de la
plantilla base, dichas características no son editables.

(S8-01)

OPERACIONES CON PLANTILLAS

A continuación vas a crear plantillas. Para ello debes crear una carpeta llamada
Plantillas_HojaCSS en la ubicación donde te indique el profesor(a) en esta carpeta se almacenarán
los archivos del nuevo sitio web llamado sesion8.

Crear una plantilla

A continuación vas a crear plantillas. Para ello debes crear una carpeta Plantilla_HojaCSS
Realiza los siguientes pasos para crear una plantilla.

1. Crea un Sitio Web con el nombre sesion8 en la carpeta Plantilla_HojaCSS.

2. Haz clic en el menú Archivo y da clic en la opción Nuevo.
3. En el cuadro de diálogo Nuevo
documento, haz clic en Plantilla en
blanco y en Tipo de Plantilla
selecciona Plantilla HTML,
finalmente haz clic en el botón
Crear.

(S8-03)

4. En la ventana en blanco crea una

tabla con las siguientes
características:
Fila =3
Columna =2
Ancho de tabla = 930
5. Combina la primera y la última fila, ajusta la columna hacia la izquierda e ingresa en las
celdas la siguiente información.

(S8-04)

Definir regiones editables de una plantilla

Las regiones editables basadas en una plantilla son las zonas de las páginas web hijas que se
pueden modificar, estos documentos web heredan las características de la plantilla o página web
padre, la cual no son editables.
Ahora, crearás una región editable en la celda Contenido de la plantilla creada. Para ello:

1. Haz clic en el menú Insertar , en la lista desplegable selecciona Objetos de plantillas y da

clic en la opción Región editable.
 (S8-05)

2. Aparecerá el cuadro de diálogo Nueva región editable, configura la opción como se indica
en el campo Nombre y haz clic en Aceptar.

(S8-06)

3. Observa que aparece marcado de color celeste la región editable.

(S8-09)

4. Guarda la plantilla presionando la combinación de teclas de comando Ctrl + S

Adobe Dreamweaver mostrará un cuadro de diálogo donde indica el sitio web y el nombre de
la plantilla, finalmente da clic en el botón Guardar

(S8-07)

5. Observa que el panel Archivos se actualiza en el sitio web sesion8 con la carpeta Templates
que contiene el archivo Plantilla1.dwt dicho archivo presentará la región editable definido de
color celeste para que el usuario pueda agregar cualquier tipo de contenido o información en
dicha área.
 (S8-08)

Crear Plantillas anidadas o Páginas hijas

Las plantillas anidadas o páginas hijas están basadas en plantillas y que poseen regiones editables
creadas en las plantillas padres.

1. A continuación, crearás las plantillas anidadas o plantillas hijas. Para ello, cierra el archivo
Plantilla1.dwt
2. Haz clic en el menú Archivo, da clic en la opción Nuevo, aparecerá el cuadro de diálogo
Nuevo Documento.
3. Selecciona las opciones como se muestran. Haz clic en el botón crear

(S8-10)

4. Observa que solo el área de la celda Contenido es editable y las demás áreas no editables
muestran el símbolo nulo.

(S8-11)

5. Ahora, guarda el archivo con el nombre Index.

6. Observa que, en el panel Archivo, aparece el archivo Index.html.
7. Creas dos páginas hijas más, ramking y radios con la misma plantilla, haz clic en el menú
Archivo y luego en Guardar como.

(S8-12)

8. Finalmente, da clic en el botón Actualizar del panel archivos y observa que se añaden los
archivos creados.
9. Observa que las páginas creadas tienen las mismas características de la plantilla, pero sólo se
puede modificar la región editable asignada en la plantilla.

Vincular platilla con páginas hijas

Uno de los objetivos finales de la creación de plantillas es vincularlas con las páginas hijas, creando
de esa manera páginas interactivas. Realiza los siguientes pasos para vincular.

1. Abre el archivo Plantilla1.dwt

2. Borra el texto Navegación, escribe los textos “Inicio, Radios y Ranking” como se aprecia
en la imagen.

(S8-13)

3. Selecciona la palabra Inicio y creále el vínculo a la página web Index.html

Ejercicio
 Repita la acción para vincular los demás archivos con sus respectivas páginas web.
o Radios vinculado a radios.html
o Ranking vinculado a ranking.html

4. Actualice la plantilla, haz clic en el menú Archivo, luego haz clic en Guardar.
5. Observa que en el cuadro de diálogo Actualizar archivos de plantilla se muestran los
archivos vinculados a esa plantilla y luego da clic en el botón Actualizar para actualizar la
plantilla y todos los documentos web.
 (S8-15)

6. Observa que aparecerá una ventana donde te mostrarán los archivos actualizados, también te
da la opción para actualizar otros archivos que estén en otra ubicación, finalmente da clic en
el botón Cerrar.

(S8-16)

7. Verifica que los demás archivos hayan sido actualizados.

8. Modifica los archivos web de la siguiente manera:

Página web: Plantilla1 Modifica el color de fondo a negro

En el encabezado Inserta la imagen encabezado.jpg
En pie de página Inserta la imagen pie de pagina.jpg
En la Región editable Inserta la imagen plantilla.jpg
Página web index.html Inserta la imagen index_s8.jpg
Página web Radios.html Inserta la imagen radio.html
Página web Ranking.html Inserta la imagen ranking.jpg

9. Guarda la página y actualízala, observa cómo queda la página final

 (S8-17)

NOTA:
Cibertito: Para crear una región editable en una plantilla se puede presionar las combinaciones de teclas
Ctrl+Alt+V

ESTILOS CSS
Las páginas web siempre están actualizándose, cambiando de información y de formato; es por ello
que Adobe Dreamweaver CS6 implementa una herramienta para hacer eficaz esta tarea, la cual se
llama Estilo de Clase CSS. Dicha tarea se usa para combinar una serie de atributos, de modo que
no sea necesario asignar uno por uno, sino aplicar estilos que ya fueron creados.

Operaciones con estilos CSS

Para la buena aplicación de estilos CSS Adobe Dreamweaver CS6 ofrece una herramienta muy fácil
de usar y es el inspector de propiedades CSS que facilita la aplicación de conjuntos de
características, por lo que crea automáticamente estilos CSS para ser usados en esa página web o
en otros archivos web.
Crear un estilo en línea
Este procedimiento se usa cuando se decide aplicar un estilo a un único elemento y en un caso
puntual. Para ello, realiza los siguientes pasos:

1. Abre el sitio web sesion8 y crea una página web nueva llamada estilosCSS.html donde
copiarás el texto que se encuentra en el archivo texto_s8.docx
2. Haz clic en el ícono CSS del Inspector de Propiedades.
3. Selecciona el primer párrafo, luego h az clic en el botón de lista Regla de destino del
Inspector de propiedades CSS y selecciona la opción Nuevo estilo en línea.
 (S8-18)

4. Ahora aplica las siguientes propiedades:

 Fuente : Agency FB, Algerian, Arial Black
 Tamaño : 24px.
 Color : Azul (#009)

Crear una regla de estilos

Este tipo de estilo afecta a todas las etiquetas de un tipo o a las que estén contenidas en
determinadas elementos o clase.
Para crear una regla de estilos realiza los siguientes pasos:

1. Haz clic en el botón de lista Regla de destino del Panel de propiedades y selecciona la
opción Nueva regla.

(S8-19)

2. A continuación, da clic en el botón Editar regla, se mostrará el cuadro de diálogo llamado

Nueva regla CSS.

Partes y funciones de la ventana Nueva regla CSS

Ahora, conocerás algunas de las partes y funciones de la ventana Estilos.

Elemento Función
Clase Es el alias que se le asigna al estilo, esto se aplica a
un elemento para su uso. El nombre de la clase va
precedido por un punto.
ID Es un atributo HTML, lo cual proporciona un
Tipo de selector identificador únicopara un elemento dentrodel
(Determina a que documento, dicho ID va precedido por el símbolo #
elementos afectará el Etiqueta El estilo afectará a todas las apariciones de la etiqueta
estilo) HTML indicada.
Compuesto Combina los selectores anteriores, por ejemplo:
p.estilo1afecta únicamente a los párrafos con la clase
estilo1, pero no a los encabezados o títulos con esa
clase.
Nombre del selector Permite asignar un nombre a un selector, dependiendo del tipo de
 selector.
Permite guardar el estilo en el documento actual o en un nuevo archivo
Definición de regla
CSS.

3. Configura las opciones como se indica, haz clic en el botón de lista Tipo de selector y
selecciona la opción Clase, en el campo Nombre de selector escribe .estilo1, en Definición
de regla selecciona la opción Solo este documento

(S8-20)

4. Finalmente, da clic en el botón Aceptar.

5. Adobe Dreamweaver CS6 mostrará una ventana para definir los tipos de formatos o
propiedades que formarán el estilo.

Categoría Tipo Configuración

Tipo Font – family Arial, Helvetica, sans-serif
Font – size 12
Font weight bold
Font style Oblique
Color Azul (#00F)
 (S8-21)

6. Finalmente, haz clic en el botón Aplicar y luego en Aceptar

7. Observa que se muestra el Panel de estilos CSS, el cual sirve para hacer pequeños cambios
que el inspector de propiedades no posee.

(S8-22)

NOTA:
Cibertito: Puedes ordenar las propiedades de diferentes maneras y gestionar las reglas dando clic en los botones que
se encuentran en la parte inferior del Panel de estilos CSS.

Aplicar un estilo CSS

Anteriormente has creado una regla de estilo CSS, pero no servirá de nada si esto no se aplica a un
elemento. Para ello, abre la página estilosCSS.html del sitio web sesion8 y realiza los siguientes
pasos:
1. Selecciona el texto La década de 1960: Los orígenes del Rock & Roll en el Perú de la
página web indicada.
2. Haz clic en el botón de lista Regla de destino
 (S8-23)

3. También puedes aplicar este estilo desde el botón desplegable Clase que se encuentra en el
panel de propiedades HTML.

(S8-24)

4. Puedes aplicar la clase a una etiqueta, para ello haz clic derecho sobre la barra de estado y
selecciona la opción Establecer clase, seguidamente estilo1

(S8-25)

5. Puedes acceder a todas las reglas creadas desde el menú Formato, Estilos CSS y aplicarlo a
cualquier selección.
 (S8-26)

Hojas de estilos
La manera más eficiente de crear una página web y aplicar múltiples características en ella es
creando hojas de estilos, ya que minimiza el tiempo de modificación de formatos y otros.

Exportar estilos
Dreamweaver CS6 permite exportar estilos ya creados anteriormente para ser utilizados en las
páginas que desees.
Abre la página estilosCSS.html y para exportar estilos realiza los siguientes pasos:

1. En el Panel de estilos CSS, haz clic en el botón que se encuentra en la parte superior
derecha.

(S8-27)

2. Al aparecer el menú elige la opción Mover regla CSS…

(S8-28)
3. En el cuadro de diálogo Mover a hoja de estilos externa, haz clic en el botón llamado Una
nueva hoja de estilos.

(S8-29)

4. Ahora, haz clic en el botón Aceptar.

5. Aparecerá una caja de diálogo donde debes escribir el nombre para la hoja de estilos, el cual
será estilos.

(S8-30)

6. Finamente, da clic en el botón Guardar y observa cómo se crea un ícono en el Sitio Web.

(S8-31)

Vincular una hoja de estilos

Para el uso de la hoja de estilos en una página web, debes vincularla y para ello debes crear una
página web llamada PedroSuarez.html, copia y pega el texto que se encuentra en el archivo
pedro-suarez.docx

1. Haz clic en el menú Formato, luego selecciona Estilos CSS y da clic en la opción Adjuntar
hoja de estilos.

(S8-32)

2. En el cuadro de diálogo Vincular hoja de estilos externa, haz clic en la opción Vincular,
luego da clic en el botón Examinar.

(S8-33)

3. En la ventana de diálogo que aparece, selecciona el archivo estilos y da clic en el botón

Aceptar.
 (S8-34)

4. Finalmente, haz clic en el botón Aceptar de la ventana Vincular hoja de estilos externa

ACTIVIDADES
Llegó el momento de que pruebes y fortalezcas tu destreza en los temas aprendidos a lo largo de
esta sesión.
COMPRENDO
Basándose en la sesión aprendida, ahora marca verdadero (V) o falso (F) según corresponda.

1. Las plantillas no poseen regiones editables (V) (F)

2. Las plantillas anidadas poseen características heredadas de la plantilla base (V) (F)
3. Los estilos de clase CSS combina una serie de atributos (V) (F)
4. Regla de estilos afecta a todas las etiquetas de un tipo o clase (V) (F)
Clase es el alias de un estilo CSS y va precedido por un punto (V) (F)

REALIZO
5. Ahora crearás una plantillas con sus página anidada y para ellos realiza las acciones:
a. En el sitio web de la presente sesión, crea una plantilla llamada plantilla2.html
b. En la plantilla, crea una tabla de 2 filas y 1 columna, ancho 960px
c. Inserta la imagen encabezado.jpg en la fila 1.
d. Define a la segunda fila como región editable de nombre contenido
e. A partir de la plantilla creada crea una plantilla anidada llamada tarea8.html
f. En la región editable de la página web tarea8.html , escriba las 10 mejores canciones de tu
preferencia.
g. En la plantilla, crea un enlace Ir a tarea 8 en la región editable para vincularlo a la página
tarea8.html.
h. En la página web tarea8.html , crea una regla de estilos de clase llamada .tarea8, aplica los
siguientes formatos:
 Fondo: Background color: negro (#000)
 Font family: Tahoma, Geneva, sans-serif
  Font size: 14
 Color: celeste (#0FF)

Plantilla

(S8-35)

Páginas anidadas

(S8-36)

INVESTIGO
6. Investigue el nombre y la función que cumple los siguientes botones del panel de estilos CSS

(S8-37)

Nombre del botón Función

a
b