Dreamweaver 8

1 Abre el sitio blog.

2 Crea un archivo CSS llamado estilo_blog.css.

3 Vincula la nueva hoja de estilos a la plantilla blog.dwt.php.

4 Copia la carpeta imagenes que podrás encontrar en la carpeta ejerciciosdream del curso en tu 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 estos párrafos:

Principal

Administración

Enlaces

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.

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

1 Abre el archivo estilo_blog.css.

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 un 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 Finalmente haz que todos los enlaces dentro de un párrafo no tengan subrayado y sean de color negro.

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

1 Abre el archivo estilo_blog.css.

2 El body tiene que tener como fondo la imagen fondo_body.gif que encontrarás en la carpeta imagenes que has copiado, no debe repetirse.

3 Crea un estilo para el elemento con id contenedor que tenga el fondo blanco, y la imagen fondo.gif que encontrarás en la carpeta imagenes sin repetición.

4 Crea un estilo para el elemento con id seccion que tenga el fondo blanco, y la imagen fondo_seccion.gif que encontrarás en la carpeta imagenes sin repetición.

5 Al estilo de la clase titulo añádele un fondo de imagen titulo.gif (en la carpeta de imagenes) y que no se repita.

6 Por último, los enlaces que se encuentren dentro de los párrafos deberán tener un color de fondo igual a #CCFF66.

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

1 Abre el archivo estilo_blog.css.

2 El body tiene que tener un margen de 0 píxeles por todos los lados.

3 El bloque con id seccion debe tener un padding de 20 píxeles menos en el lado superior que ha de ser de 90.

También añádele un borde de 2 píxeles en color negro en los lados inferior, izquierda y derecha.

4 Al formulario que se encuentra en el bloque seccion le aplicaremos un margen inferior de 10 píxeles.

5 El bloque contenido debe tener un padding en el lado superior de 190 píxeles, 300 en el lado derecho, y 30 en el inferior e izquierdo.

6 La clase titulo deberá tener un padding superior de 30 píxeles y uno izquierdo de 35.

7 Los enlaces que se encuentren dentro de un párrafo deberán tener un padding izquierdo y derecho de 2 píxeles.

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

1 Abre el archivo estilo_blog.css.

2 El bloque contenedor debe medir 800 píxeles de ancho.

3 El bloque seccion debe medir 136 píxeles de ancho.

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

1 Abre el archivo estilo_blog.css.

2 El bloque seccion debe tener una posición absoluta respecto a la ventana del navegador, lo posicionaremos a 166 píxeles del borde superior y a 533 del borde izquierdo.

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

Pág. Ej.17

 Cursos Informática Gratuitos