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í.

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:

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

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.

Atrás  Inicio  Adelante





Página inicial  Cursos Informática Gratuitos

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


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