Unidad 4. Ejercicio paso a paso: 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
- Si no tienes abierto Dreamweaver,
ábrelo para realizar el ejercicio.
- Si no aparece el panel Archivos,
ábrelo a través del menú Ventana,
opción Archivos.
- Selecciona el sitio Cocina en el panel Archivos.
- Haz doble clic sobre el documento menu.htm, que aparece en el panel Archivos.
Se abrirá el documento en Dreamweaver.
- Ve al menú Ventana y elige Estilos CSS. Se abrirá el panel.
- Haz clic en el botón Todo.
- Selecciona las reglas que cuelgan de style.
- Haz clic derecho sobre ellas y elige Mover reglas CSS....
- Marca Nueva hoja de estilos y pulsa Aceptar.
- Asegúrate de tener elegida la carpeta del sitio Cocina, escribe el nombre estilococina y pulsa Guardar.
- Ve al menú Archivo y elige Guardar todo.
- Haz doble clic sobre el documento postresemana.htm, que aparece en el panel Archivos.
- Repite los pasos 5 a 8 para exportar sus estilos.
- En la ventana Mover hoja de estilos externa, pulsa Examinar... y elige el archivo estilococina.css.
- Pulsa Aceptar.
- Nos advertirá de que hay dos reglas con el mismo nombre. Pulsamos Sí para mantener ambas.
- Ve al menú Archivo y elige Guardar todo.
Ejercicio 2: Vincular hojas de estilo
- Selecciona el sitio Cocina en el panel Archivos.
- Haz doble clic sobre el documento platosemana.htm, que aparece en el panel Archivos.
- Ve al menú Formato → Estilos CSS y elige Adjuntar hoja de estilos...
Se abrirá la hoja Vincular hoja de estilos externa.
- Pulsa Examinar y elige la hoja estilococina.css.
- 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.
- Haz clic sobre el botón Guardar de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.
- Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos.
- Ve al menú Ventana y elige Estilos CSS. Se abrirá el panel.
- Haz clic en el botón Todo.
- Selecciona <style>.
- Pulsa el botón , en la esquina inferior derecha, para borrar los estilos incrustados.
- Pulsa el botón para adjuntar una hoja de etilos.
- Se abrirá la hoja Vincular hoja de estilos externa con las opciones ya seleccionadas. Si no, sigue el paso 4.
- Pulsa Aceptar.
- Haz clic sobre el botón Guardar de la barra de herramientas o pulsa Ctrl + S para guardar los cambios.
Octubre-2009.