Ejercicios unidad 17: Estilos CSS Avanzados (I)

Si no tienes abierto Dreamweaver, ábrelo para realizar los ejercicios planteados a continuación.

Crearemos los estilos necesarios para que la plantilla se vea así.

 

Antes de comenzar con los ejercicios, y si no lo hiciste al crear el sitio, copia todos los archivos de la carpeta blog que encontrarás en la carpeta de ejercicios, a la carpeta blog que debes de haber creado en la carpeta mis_sitios con la que estamos trabajando.

Ejercicio 1: Crear una hoja de estilos.

1 Abre el sitio Blog.

2 Crea un archivo CSS llamado estiloblog.css.

3 Vincula la nueva hoja de estilos a la plantilla blog.dwt.php creada en la unidad anterior.

4 Copia la carpeta imagenes que podrás encontrar en la carpeta de ejercicios dentro de blog a la carpeta del sitio.

Modifica la plantilla blog.dwt.php de la siguiente forma:

5 Crea un bloque div de identificador contenido y que contenga una sección editable de plantilla.

6 Encierra también el menú de salto en un bloque de identificador seccion.

7 Dentro de ese bloque añade un párrafo con el texto Categorías delante del menú de salto.

8 Después del menú de salto y dentro del bloque seccion añade una lista como ésta:

• Principal
• Administración
• Enlaces

Cada palabra tendrá un vínculo a las páginas .../index.php, .../admin.php y .../enlaces.php respectivamente.

Nota: Los tres puntos los ponemos porque estamos trabajando sobre una plantilla.

9 A continuación coloca estos dos bloques (contenido y seccion) dentro de un bloque con Id contenedor.

 

Ejercicio 2: Controles de Fuente.

1 Abre el archivo estiloblog.css, creado en el ejercicio anterior.

2 Añade un estilo para el body para que se muestre el tipo de fuente Tahoma, de 14 píxeles de tamaño, 1 píxel de separación entre caracteres y de color negro.

3 Crea un estilo para una clase llamada titulo que establezca un tamaño de fuente de 18 píxeles.

4 Crea un estilo para una clase llamada datos que establezca que el texto esté alineado a la derecha, de 12 píxeles de tamaño, en cursiva y con un alto de línea de 0.2.

5 Haz que todos los enlaces dentro de un párrafo o un elemento de lista no tengan subrayado y sean de color negro.

6 Por último, haz que los elementos de lista dentro del bloque sección no muestre viñetas.

 

Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aquí te lo explicamos.

Los ejercicios continúan en la página siguiente.