Ayuda ejercicios unidad 17: Estilos CSS Avanzados

Ejercicio 1: Crear una hoja de estilos

Apartado 2

1 Crea un nuevo archivo CSS desde Archivo → Nuevo → Página básica → CSS.

2 Guárdalo (CTRL + S) y llámalo estiloblog.css.

 

Apartado 3

1 Abre la plantilla blog.dwt.php (en la carpeta Templates). Este archivo lo creamos en la unidad anterior.

2 En el panel Propiedades despliega el campo Clase y selecciona la opción Adjuntar hoja de estilos....

3 Busca el archivo estiloblog.css que acabamos de crear y selecciona la opción Vincular y pulsa Aceptar.

 

Apartado 5

1 Coloca el cursor al prinicipio de la página delante del formulario del menú de salto.

2 Selecciona la opción Insertar-->Objetos de diseño-->Etiqueta Div

3 Escribe contenedor en el cuadro Id:

4 Pulsa en Aceptar

5 Coloca en cursor dentro del bloque

6 Selecciona Insertar → Objetos de plantilla → Región editable.

7 Llámala contenido

8 Pulsa Aceptar.

 

Apartado 6

1 Selecciona el formulario del menú por ejemplo haciendo clic sobre la etiqueta <form> en la barra de estado. Pulsa Aceptar.

2 Selecciona la opción Insertar-->Objetos de diseño-->Etiqueta Div

3 Escribe seccion en el cuadro Id:

4 Pulsa en Aceptar

 

Apartado 7

1 Para asegurarte de que te colocas dentro del bloque y delante del formulario pasa a vista Código y coloca el cursor detrás de la etiqueta <div id="seccion"> y delante de la etiqueta <form..

2 Vuelve a la vista Diseño

3 Pulsa Intro (para crear un párrafo en blanco).

4 Escribe Categorías.

 

Apartado 8

1 Para asegurarte de que te colocas dentro del bloque y detrás del formulario pasa a vista Código y coloca el cursor detrás de la etiqueta </form> y delante de la etiqueta </div>

2 Vuelve a la vista Código

3 Pulsa Intro escribe los tres párrafos y asígnales los vínculos desde el inspector de propiedades.

4 Selecciona los tres párrafos conviértelos en una lista no ordenada (ul) desde el Inspector de propiedades HTML.

Al final te quedará un código así:

<body>

<div id="contenedor">
<div id="contenido"> <!-- TemplateBeginEditable name="contenido" --> Colocar aquí el contenido para id "contenido" <!-- TemplateEndEditable --> </div>
<div id="seccion">
<p>Categor&iacute;as</p>
<form name="form" id="form">
<select name="menuBlog" id="menuBlog">
<option value="#">Sección 1</option>
<option value="#">Sección 3</option>
<option value="#">Sección 3</option>
</select>
<input type="button" name="go_button" id="go_button" value="Ir" onclick="MM_jumpMenuGo('menuBlog','parent',0)" />
</form>
<ul>
<li><a href="../index.php">Principal</a></li>
<li><a href="../admin.php">Administraci&oacute;n</a></li>
<li><a href="../enlaces.php">Enlaces</a></li>
</ul>
</div> </div>
</body>

4 Guarda los cambios.

Ejercicio 2: Controles de Fuente.

1 Abre el archivo estiloblog.css.

2 Escribe el siguiente estilo para el body:

body {

  font-family: Tahoma;

  font-size: 14px;

  letter-spacing: 1px;

  color: black;

} 

3 Escribe el siguiente estilo para la clase titulo:

.titulo {

  font-size: 18px;

}

4 Escribe el siguiente estilo para la clase datos:

.datos {

  text-align: right;

  font-size: 12px;

  font-style: italic;

  line-height: 0.2;

}

5 Escribe el siguiente estilo para los enlaces dentro de un párrafo o elemento de lista:

p a, li a {

  text-decoration: none;

  color: black;

}

6 Por último, escribe el siguiente estilo para ocultar la viñeta de los elementos de lista dentro de seccion:

#seccion ul {

  list-style-type: none;

}

 

Inicio     Siguiente





Página inicial  Cursos Informática Gratuitos

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


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