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>
Mostrando entradas con la etiqueta divs. Mostrar todas las entradas
Mostrando entradas con la etiqueta divs. Mostrar todas las entradas
sábado, 17 de marzo de 2012
CSS
Etiquetas:
AGS2,
c6,
CSS,
divs,
DreamWeaver,
GoogleWebFonts
domingo, 11 de marzo de 2012
CSS
Divs: Divisiones para repartir el espacio de una web en lugar de usar tablas. Cajas (en el HTML) como una división. Siempre hay uno encima de otro. Se adaptan al tamaño del contenido, cuanto más texto, más largo, son horizontales. Cada Div puede tener su propio estilo. En el apartado "posición" podemos ponerlo donde nosotros le digamos, si le damos el valor "absolut" lo podemos mover donde queramos.
imagen dreamweaver
Div PA: Posicionamiento Absoluto, las podemos colocar donde queramos. Se pueden modificar como en Ai.
Podemos cambiarle el nombre a los elementos y no dejar los genéricos. El inconveniente de los absolutos es que son estáticos, no se mueven, nosotros le decimos donde puede estar pero si esa web se mira en un monitor más pequeño el DivPA se queda en su sitio, nose adapta. El Div si se adapta.
-Índice Z: es como las capas, la posición relativa respecto a los otros elementos, cuanto menor es el número más por debajo queda. (dibujar ejemplo)
-En visibilidad podemos modificarlas y que no sean visibles pero la seguimos viendo. (Las vemos en el documento pero no se ven en la web).
- Las propiedades que le damos aparecerá en el código antes de "head" como "Style" creado.
¡Anotación General!
Cuantas menos líneas tenga un estilo mejor, no poner por poner.
En la etiqueta Body personalizamos todo el body, fondo, tipografía, etc.
En propiedades de la página, apariencia CSS se puede modificar el body directamente.
Suscribirse a:
Entradas (Atom)

