Unidad 17. Ejercicio: Crear una hoja de estilo CSS


Objetivo

Practicar las operaciones que hay que realizar para crear una hoja de estilo.

Ejercicio

A partir de ahora, en los ejercicios paso a paso iremos creando el sitio Librería. En la carpeta ejercicios del curso, encontrarás la carpeta librería con los archivos que necesitarás para crear el sitio. Cópiala a la carpeta mis_sitios en la que has ido creando los sitios de ejemplo, y define el nuevo sitio Librería en Dreamweaver.

Si necesitas ayuda con las operaciones anteriores, consulta los ejercicios propuestos o paso a paso de la unidad 3.

  1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
  2. Abre el sitio libreria.
  3. Crea un nuevo archivo CSS desde Archivo → Nuevo → Página en blanco → CSS.
  4. Guárdalo (CTRL + S) y llámalo estilolibreria.css.
    Ahora vamos a vincularla a la plantilla del sitio.
  5. Abre la plantilla libreria.dwt.php que encontrarás en la carpeta Templates del sitio.
  6. Ve al menú FormatoEstilos CSSAdjuntar hoja de estilos...
  7. Busca el archivo estilolibreria.css que acabamos de crear y selecciona la opción Vincular.
  8. Pulsa Aceptar.

A lo largo de la unidad, iremos modificando la hoja de estilo hasta que la página se muestre así.

Este documento es la plantilla que emplearemos en las páginas del sitio Librería. Vamos a echarle un vistazo para familiarizarnos con su estructura:

Al principio tenemos un div "cabecera". En él tenemos los elementos que mostraremos en la parte superior de la página. Además, será donde incluyamos el logo.

A continuación encontramos el div "menu". En él encontramos una lista con los elementos que formarán el menú de navegación. Además verás que hay una sublista, que convertiremos en un menú desplegable.

Lo siguiente que encontramos es el div "contenedor" donde agrupamos la estructura central de la página. Esta estructura se divide en otras dos divisiones: div "anuncios" donde tenemos la publicidad que mostrará nuestra web, y div "contenido", donde se mostrará el contenido de las distintas páginas. Es aquí donde encontramos la región editable de la plantilla.

Para acabar, cerramos la página con el div "pie" en el que mostramos el pie de página.


Marzo-2015
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.