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 un documento deberemos vincularlo.

 

5 Abre el archivo libreria.dwt.php que se encuentra en la carpeta de ejercicios del curso.

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 InsertarObjetos de diseñoEtiqueta 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.

 




  Índice del curso  
Septiembre - 2007.


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.