martes, 29 de octubre de 2013

Plantilla, conmutador css y load de jQuery

Para esta entrega he encontrado algunas plantillas css  tras buscar un poquito por la red.
Al final me he decidido por escoger una de la página: http://www.mejoresplantillasgratis.es/free-templates/Plantillas-CSS.html.
He elegido esa porque ya estaba orientada a una empresa agraria y el esqueleto se ajusta perfectamente a lo que buscaba.



Dispone de 5 ficheros html, cada uno para los distintos apartados de la navegación:

Home






Products
Technology




Pricinig

Contacts



Una vez descargada y después de haber leído un poco el html, css y scripts de jQuery pasé a cambiar el title en el head por "Bodegas y Viñedos Hermanos Blanco".
A continuación traduje la navegación a español y la adapté a los apartados que yo quiero incluir: Inicio, Viñedos, Bodega, Catálogo y Contacto.
Después de esto pasé a realizar lo pedido en la entrega.
He introducido un conmutador de estilos css mediante un switcher que permita alternar entre dos ficheros .css, añadiendo unas líneas de código al html y un fichero styleswitcher.js con el script a realizar.
A efectos de usuario esto permite la selección de dos diseños para la misma página mediante dos links que he situado en la parte superior izquierda de la misma. Además cada vez que se selecciona uno u otro se almacena una cookie que permite que el navegador "recuerde" el css elegido por el usuario y lo seleccione cada vez que abra la página.
Terminada esta parte introduje la función load de jQuery y la he integrado de manera que la barra de navegación, la presentación de imágenes  y el footer permanezcan fijos y el contenido entre ambos vaya cambiando según se pinche con el ratón en un apartado u otro.
Tras esto retoqué el script del load para que cada vez que se pincha en un apartado de la navegación este resalte sobre los demás como que está pinchado jugando un poco con las id y el className de los elementos de la lista y los ancle.
Por último he introducido un icono para que aparezca en la pestaña de la web recortando el logo de la empresa de una fotografía y a su vez he empezado a mirar cómo puedo cambiar las fotos de la plantilla por las mías, así como el contenido.

No hay comentarios:

Publicar un comentario