CSS tiene grandes posibilidades de cambiar la apariencia de un sitio. Entre los trucos más solicitados están: el de cambiar las características de los links (sacarle el subrayado por ejemplo); hacer que en un documento existan todos los tipos de links que yo quiera; jugar con las imágenes de fondo; cambiar la apariencia de objetos de formularios; cambiar cursores; agregar filtros; cambiar características de los elementos de HTML, entre otros. Ustedes deben ser los descubridores: acá va un pequeño empujón.
Vamos a la práctica. Dreamweaver > Windows > CSS Styles. O Shift+F11 es más sencillo. Abre esa paleta y aparecerá por defecto la palabra none y unos iconos abajo a la derecha. Básicamente Dreamweaver da la posibilidad de vincular un nuevo estilo CSS desde un archivo (archivo de extensión .css que puedes abrir desde el block de notas y desde el que puedes tener todos los estilos que necesites), crear un nuevo archivo, editarlo, crear estilos sólo para esa página (incrustados) y además editarlos.
Para crear los estilos desde el dreamweaber le damos a nuevo
+12.21.25.png)
Una vez estamos dentro tenemos diferentes estilos para escoger depende lo que queramos hacer
+12.22.28.png)
Hay 4 tipos :
ClaseID
Compuesto
Etiqueta: El étiqueta se le aplica a uno de las opciones y se le dan unas caracteristicas para que las cumpla el solo .
+12.22.42.png)
+12.26.02.png)
Creacion de un div
1 Crea un nuevo archivo CSS desde Archivo → Nuevo → Página básica → CSS.
2 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.
3 Abre el archivo libreria.dwt.php que se encuentra en la carpeta de ejercicios del curso.
4 En el panel Propiedades despliega el campo Estilo y selecciona la opción Adjuntar hoja de estilos....
5 Busca el archivo estilo_libreria.css que acabamos de crear y selecciona la opción Vincular.
6 Copia la carpeta imagenes que encontrarás en la carpeta ejerciciosdream/libreria del curso y pégala en tu sitio libreria.
7 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 aulaClicasociarle el vínculo ../index.phppulsar 6 veces May+Enterescribir 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 Divescribe cabecera en el cuadro Id:Aceptar
Estas operaciones te tienen que generar el mismo código.
Ahora modificaremos el menú.
8 Selecciona la línea Mostrar Ofertas Catálogo Críticas Buscar:. Asóciale una etiqueta div con Id menu.
9 Selecciona la palabra Mostrar (asegúrate de seleccionar también su enlace) y asígnale el estilo item.
10 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>
11 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.
12 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 -->
13 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.
div>
G
No hay comentarios:
Publicar un comentario