Supuesto práctico - CSS

Con el siguiente ejercicio quisiera poner un caso ficticio que se podría dar en la realidad..erll coomo???.

Para resolverlo hay que tener conocimientos (básicos) en HTML y CSS.

Los objetivos que planteo con este ejercicio son:

1. En primer lugar se pretende una organización y comprensión del código fuente.
   
2. En segundo lugar se pretende la modificación del código fuente de las hojas de estilos en cascada.
   
3. En tercer lugar se pretende elaborar un portal web con la plantilla re-diseñada.
   

Supongamos que una empresa nos contrata para elaborar su web. El gerente nos propone realizar un portal web. Del conjunto de plantillas gratuitas que disponemos en la red, elige la que más le gusta: “Dark Ritual” por la distribución de las columnas y el formato de sus elementos. Esta plantilla fue diseñada por un tal Arcsin (le hago propaganda).

El código HTML del que disponemos está muy confuso ya que no está bien tabulado y apenas se aprecia la distribución de las capas y de los elementos en el código.

En este enlace tenéis los archivos necesarios: plantilla

• En primer lugar deberás organizar el código HTML de la plantilla (ya que es un poco caótico -lo he caotizado yo-) para poder comprender mejor la estructura de capas que se ha diseñado. Haz uso de la tabulación e inserta comentarios para explicar la distribución de las mismas.
  



• Una vez comprendido la distribución, echa un vistazo al código CSS para comprender mejor la posición y los estilos de cada capa. Elimina el código sobrante (no utilizado) de la hoja de estilos.
  
• El gerente nos comunica en primer lugar que la columna que se muestra a la derecha, no le gusta que ocupe la parte superior, sino que empiece al igual que las otras columnas (la del menú y central), justo debajo del título.
  



• Además el gerente nos informa que la imagen que forma el título del portal debe ser cambiada y que debe ocupar el ancho del portal.
  
• Crea varias páginas de ejemplos, de manera que estén enlazadas en el menú lateral y modifica la página de estilos de manera dicha opción aparezca resaltada de otro color cuando se está visualizando la página a la que enlaza.

Ejercicio creado por: Pepe Lluyot