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 en blanco→ 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 principio 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 contenido 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 region_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 InsertarObjetos de diseñoEtiqueta 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 Diseño.

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.

 

Apartado 9

1 Ve a la vista de Código, y selecciona los divs contenido y sección completos, etiquetas incluidas.

2 Vuelve a la vista Diseño.

3 Selecciona la opción InsertarObjetos de diseño → Etiqueta Div

4 Escribe contenedor en el cuadro Id:

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

<body>
<div id="contenedor">
<div id="contenido"> <!-- TemplateBeginEditable name="region_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>

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    







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.