Unidad 5. Ejercicio: Exportar y vincular hojas de estilo

Objetivo

Practicar las operaciones necesarias para unificar los estilos declarados en distintas páginas en una única hoja de estilos y vincularla al resto de páginas.

Ejercicio 1: Exportar estilos

1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.
3. Selecciona el sitio Cocina en el panel Archivos.
4. Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
   
   Se abrirá el documento en Dreamweaver.
5. Ve al menú Ventana y elige Diseñador de CSS. Se abrirá el panel.
6. Haz clic en el botón Agregar fuente del subpanel Fuentes.
7. Del menú selecciona la opción Crear un nuevo archivo CSS.
8. En el cuadro de diálogo que aparece, escribe el nombre estilococina. Asegúrate de tener elegida la carpeta del sitio Cocina.
9. Del subpanel Fuentes selecciona <style>.
10. Del subpanel Selectores selecciona todas las reglas.
11. Arrástralas al nuevo archivo CSS del subpanel Fuentes.
12. Ve al menú Archivo y elige Guardar todo.
13. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
14. Repite los pasos 7 a 11 para exportar sus estilos.
15. Ve al menú Archivo y elige Guardar todo.

Ejercicio 2: Vincular hojas de estilo

1. Selecciona el sitio Cocina en el panel Archivos.
2. Haz doble clic sobre el documento platosemana.htm, que aparece en el panel Archivos.
3. Ve al menú Formato → Estilos CSS y elige Adjuntar hoja de estilos...
   Se abrirá la hoja Vincular hoja de estilos externa.
4. Pulsa Examinar y elige la hoja estilococina.css.
5. En Añadir como deja Vincular y pulsa Aceptar.
   Observa cómo ha cambiado todo el diseño. Ten en cuenta que las clases info e instrucciones ya estaban aplicadas a los textos correspondientes.
6. Haz clic sobre el botón Guardar de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.
    
7. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
8. Ve al menú Ventana y elige Diseñador de CSS. Se abrirá el panel.
9. Selecciona <style> del subpanel Fuentes.
10. Pulsa el botón Quitar origen CSS .
11. Haz clic en el botón Agregar fuente del subpanel Fuentes, del menú selecciona Adjuntar archivo CSS existente.
12. Pulsa el botón Examinar del cuadro de diálogo que aparece y selecciona estilococina.css
13. Haz clic sobre el botón Guardar de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.