Unidad 4. 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 Estilos CSS. Se abrirá el panel.
  6. Haz clic en el botón Todo.
  7. Selecciona las reglas que cuelgan de style.
  8. Haz clic derecho sobre ellas y elige Mover reglas CSS....
  9. Marca Una nueva hoja de estilos... y pulsa Aceptar.
  10. Asegúrate de tener elegida la carpeta del sitio Cocina, escribe el nombre estilococina y pulsa Guardar.
  11. Ve al menú Archivo y elige Guardar todo.
  12. Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
  13. Repite los pasos 5 a 8 para exportar sus estilos.
  14. En la ventana Mover hoja de estilos externa, pulsa Examinar... y elige el archivo estilococina.css.
  15. Pulsa Aceptar.
  16. Nos advertirá de que hay dos reglas con el mismo nombre. Pulsamos para mantener ambas.
  17. Ve al menú Archivo y elige Guardar todo.

Ejercicio 2: Vincular hojas de estilo

  1. Selecciona el sitio Cocina en el panel Archivos.
  2. Haz doble clic sobre el documento platosemana.htm, que aparece en el panel Archivos.
  3. Ve al menú FormatoEstilos 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 Estilos CSS. Se abrirá el panel.
  9. Haz clic en el botón Todo.
  10. Selecciona <style>.
  11. Pulsa el botón Borrar regla, en la esquina inferior derecha, para borrar los estilos incrustados.
  12. Pulsa el botón Adjuntar hoja para adjuntar una hoja de etilos.
  13. Se abrirá la hoja Vincular hoja de estilos externa con las opciones ya seleccionadas. Si no, sigue el paso 4.
  14. Pulsa Aceptar.
  15. Haz clic sobre el botón Guardar de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.

   Inicio