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-->Div

3 Escribe contenido en el cuadro Id:

4 Pulsa en Aceptar

5 Coloca en cursor dentro del bloque

6 Selecciona Insertar →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 Insertar →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 Insertar →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;
}

Marzo-2015

Cursos Informática Gratuitos

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