sábado, 17 de marzo de 2012

CSS

Aplicar objeto de substitución a Divs.






Para la realización de esta práctica he utilizado Ai y Dw


Con Adobe Illustrator hemos recortado las partes que nos interesan a base de utilizar selectores.
-Creamos una exportación de imágenes a partir de selectores y los guardamos para web y dispositivos. Se nos creará una carpeta "imágenes" con todas las imágenes en su interior. 


En DreamWeaver desde propiedades de la página ponemos la tabla tipográfica como imagen de rastreo para calcar elementos. 


Por cada recuadro de tipografías crearemos un Div de ese tamaño, seleccionamos el Div por la cajita que sale encima a su izquierda y elegimos la imagen de fondo.


En nuestro caso le hemos dado efecto para que al pasar sobre la tabla vaya cambiando el color, por eso en Illustrator hemos creado las imágenes originales y en blanco y negro.


En cada Div creamos un objeto imagen de substitución. 


Cuando ponemos una imagen de fondo de un Div no se pueden guardar ni se pueden seleccionar en el navegador. A través del código fuente si que se podría acceder a ellas.


Desde Safari en la ventana de actividad se pueden descargar directamente. 


Para crear el título de "Tipografías de Lorena" hemos creado un Div y hemos puesto el texto. A la hora de elegir la tipografía no hemos puesto ninguna de las que viene con DW, sino que hemos puesto una externa. Para hacerlo hemos accedido a Google Web Fonts, una web de Google con 466 tipos distintos de fuentes que funcionan en safari para poder aplicarlas a tu web sin tener que instalarlas. 


Para poder aplicarlas a nuestra web seleccionamos la que nos guste y debajo aparece el código, hemos de copiarlo y pegarlo en nuestro archivo HTML detrás de </title> y antes de <style>

No hay comentarios:

Publicar un comentario