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í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 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álogo</a></span> <span class="item"><a href="../criticas.php">Crí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"> <!-- <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 © aulaClic S.L. 2006 </div>
16 Cierra todos los archivos guardando los cambios.
|
|
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.