Ejercicio paso a paso. Unidad 17. Crear una hoja de estilo

Objetivo.

Practicar las operaciones que hay que realizar para crear una hoja de estilo.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

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

4 Guárdalo (CTRL + S) y llámalo estilo_libreria.css.

Ya hemos terminado, en los próximos ejercicios añadiremos estilos a esta hoja.

Para que el estilo se aplique sobre la plantilla libreria.dwt.php deberemos vincularlo.

5 Abre el archivo libreria.dwt.php.

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

7 Busca el archivo estilo_libreria.css que acabamos de crear y selecciona la opción Vincular.

8 Copia la carpeta imagenes que encontrarás en la carpeta ejerciciosdream/libreria del curso y pégala en tu sitio libreria.

9 Ahora pega la siguiente estructura que vamos a formatear con los estilos CSS.

En la vista Código coloca inmediatamente después de la etiqueta body el siguiente código:

<div id="cabecera">

<a href="../index.php">eLibrer&iacute;a aulaClic</a>

<br /><br /><br /><br /><br /><br />

Libros Nuevos <img src="../imagenes/nuevos.gif" alt="Nuevos" width="21" height="27" align="absmiddle" />

<br />

Libros Usados <img src="../imagenes/usados.gif" alt="Usados" width="21" height="27" align="absmiddle" />

</div>

Si lo prefieres puedes desde la vista Diseño:

escribir el texto Librería aulaClic
asociarle el vínculo ../index.php
pulsar 6 veces May+Enter
escribir el texto Libros Nuevos
insertar a continuación la imagen nuevos.gif que se encuentra en la carpeta imagenes del sitio
escribir el texto Libros Usados
insertar a continuación la imagen usados.gif que se encuentra en la carpeta imagenes del sitio
seleccionar todo lo que acabas de añadir
ejecutar la opcion Insertar-->Objetos de diseño-->Etiqueta Div
escribe cabecera en el cuadro Id:
Aceptar

Estas operaciones te tienen que generar el mismo código.

Ahora modificaremos el menú.

10 Selecciona La línea Mostrar Ofertas Catálogo Críticas Buscar:. Asóciale una etiqueta div con Id menu.

11 Selecciona la palabra Mostrar (asegúrate de seleccionar también su enlace) y asígnale el estilo item.

12 Repite el paso 11 para cada una de las palabras de la línea.

El código generado será este:

<div id="menu">

<script language="JavaScript1.2">mmLoadMenus();</script>

<span class="item"><a href="#" name="link2" id="link1" onmouseover="MM_showMenu(window.mm_menu_0622115354_0,-12,26,null,'link2')" onmouseout="MM_startTimeout();">Mostrar</a></span>

<span class="item"><a href="../ofertas.php">Ofertas</a></span>

<span class="item"><a href="../catalogo.php">Cat&aacute;logo</a></span>

<span class="item"><a href="../criticas.php">Cr&iacute;ticas</a></span>

<span class="item"><a href="../buscar.php">Buscar:</a></span>

</div>

13 Luego insertaremos el código del cuerpo de la página aquí insértalo directamente en la vista Código copiando y pegando.:

<div class="contenedor">

<div id="anuncios">

<div class="item">

<a href="../usados.php"><img src="../imagenes/anuncio_largo.gif" alt="" border="0"></a>

</div>

<div class="item">

<script type="text/javascript">

<!--

google_ad_client = "pub-1875034419890743";

google_ad_width = 125;

google_ad_height = 125;

google_ad_format = "125x125_as_rimg";

google_cpa_choice = "CAAQz9vnzwEaCIUwxV0cHMEdKMO393M";

//-->

</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

</div>

<div class="item">

<a href="../catalogo.php"><img src="../imagenes/anuncio_corto.gif" alt="" border="0"></a>

</div>

<div class="item">

<script type="text/javascript">

<!--

google_ad_client = "pub-1875034419890743";

google_ad_width = 125;

google_ad_height = 125;

google_ad_format = "125x125_as_rimg";

google_cpa_choice = "CAAQz9vnzwEaCIUwxV0cHMEdKMO393M";

//-->

</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

</div>

</div>

<div id="contenido">

contenido

</div>

</div>

Hemos creado la parte que contendrá la publicidad y el contenido más importante de la página.

14 Selecciona la línea donde puedes leer contenido e inserta ahí una zona editable de plantilla (Insertar → Objetos de plantilla → Región editable).

Quedará algo así:

<!-- TemplateBeginEditable name="contenido" -->contenido<!-- TemplateEndEditable -->

15 Para terminar introduce este código al final.

Con él dibujaremos el pie de página.

<div id="pie">

Esto es un proyecto de aulaClic.com

<br />

Copyright &copy; aulaClic S.L. 2006

</div>

16 Cierra todos los archivos guardando los cambios.