Interface graphique : CleanShop

Incroyable et multifonctions, voila les deux mots qui pourraient définir à merveille le kitgraphique CleanShop. Ce kit graphique dépasse les fonctions simples de la traditionnelle charte graphique puisque nous vous proposons aujourd’hui un site clé en main composé de 6 pages en HTML (exploitables en l’état) avec des fonctions comme menu CSS dynamique, onglet de survol et de situation, page de contact et d’envoi d’emails (en PHP), une page produits avec spécificités, fiche technique et zoom de l’image via le script JS lightbox, galerie de photos par effet glissant et reflet Web2.0, un moteur de recherche Google adapté à l’interface … Mais surtout nous vous proposons un logo créé rien que pour vous, facilement exploitable, nous vous fournissons même les fichiers sources Photoshop ainsi qu’un tutorial pour le personnaliser.

De plus Clean Shop est tout à fait adapté aux sites d’informations, rien ne vous empêche de l’utiliser pour un site autre qu’E-commerce. Clean Shop est multifonctions et saura s’adapter à la publication de vos contenus.

Pas la peine d’être un as de l’informatique, ni même d’avoir de grandes connaissances en programmation pour adapter ce kit graphique. Une assistance vous est, qui plus est, proposée : pour les débutants nous proposons via le site wks.fr plusieurs tutoriaux pour vous aider à personnaliser les kits graphiques achetés dans notre galerie. Voyez par vous-même sur ces pages :

Votre site ne mérite-t-il pas d’être le plus beau ? L’Habiller avec CleanShop, c’est acquérir un aspect professionnel, intuitif, et tendance. N’oubliez pas que c’est via l’aspect graphique de votre site que vos internautes jugeront de votre sérieux.

 Description des fonctionnalités communes à chaque page

Description de l’interface graphique CleanShop de haut en bas (page standard).

Un header graphique contenant un logo à gauche (vous pourrez le personnaliser facilement car nous vous proposons les sources Photoshop ainsi qu’un guide).

En dessous, nous avons un menu horizontal entièrement codé sous forme d’une liste CSS ; au survol de la souris les onglets changent de couleur, et sur chaque page l’onglet actif devient blanc pour aider l’internaute à naviguer sur le site.

Ensuite nous trouvons sur la partie gauche, un menu vertical textuel avec son header (effet de survol sur les liens) et enfin, en dessous, des blocs graphiques pour afficher les derniers produits ajoutés à la boutique (nous avons ajouté le fichier source Photoshop pour que vous puissiez vous aussi exporter vos propres images).

Pour les contenus, il y a un header pour afficher le titre de l’article et en dessous, le texte.

Sur la droite nous avons un menu vertical textuel avec son header (effet de survol sur les liens) puis un bloc pour présenter les meilleures ventes (par exemple).

Et enfin un footer pour appliquer vos Copyrights et autres crédits de créations.

 Description des fonctionnalités page par page

Page 1 : index.html

La page d’accueil du site : elle correspond également à une page spécifique produits, elle concentre des points réactifs et dynamiques que vous pourrez utiliser sur toutes les pages du site : zoom des images via lightbox, liste avec hover graphique, texte css etc…

JPG - 186.6 ko
JPG - 135.3 ko

Page 2 : page2.html

Cette page est une page dite standard mais possédant quand même son unicité puisque dans l’exemple elle présente une liste de produits récemment disponibles.

JPG - 190.7 ko

Page 3 : page3.html

Cette page correspond à la galerie, elle s’affiche sous forme de plusieurs vignettes qui se suivent et s’affichent avec un effet glissant. Très facile d’utilisation, vous pourrez y placer autant d’images que vous le souhaitez !

JPG - 194.9 ko

Page 4 : page4.html

Ici nous aurons le moteur de recherche, il permet de faire des recherches sur le site via Google. Pratique de donner ce petit plus à ses internautes ;)

JPG - 140.1 ko

Page 5 : page5.html

Cette page est une page standard d’informations, dans notre exemple elle présente les conditions d’expédition des commandes.

JPG - 195.4 ko

Page 6 : page6.html

Page de contact : elle contient un formulaire validé par JavaScript et envoyé via PHP, vous pourrez donc recevoir les messages de vos internautes / clients sans donner pour autant votre adresse email personnelle !

JPG - 128.7 ko

 Programmation de l’interface CleanShop

Full CSS

Toute l’interface est codée en strict XHTML CSS Les menus sont sous forme de listes, facilement paramétrables. Les styles de textes et de mises en page sont placés sur une feuille css externe

Galerie effet glissant + miroir (type Apple)

Galerie CSS + PHP présentant plusieurs photos sous forme de vignettes, celles-ci glissent et se présentent avec un reflet à la Web 2.0 ! Cette galerie est tout simplement délicieuse : vous pouvez en voir un exemple sur http://www.wks.fr/kitgrafik/light2/index.html

Zoom de vos images par surimpression de l’écran

Image dynamique, placez vos vignettes dans une balise div spécial et vos images s’ouvriront en grand grâce à une animation surprenante. Voir un exemple sur cette page : http://www.wks.fr/kitgrafik/light1/index.html

Un formulaire de contact

Géré en JavaScript pour sécuriser le formulaire et en PHP pour traiter l’envoi des mails vers votre boite mail. Ce script et paramétrable en deux minutes.

Un formulaire de recherche

Le moteur de recherche Google dans votre kit graphique ! Vos futurs internautes auront la possibilité de lancer une recherche Google directement à partir de vos pages. Vous n’avez rien à programmer, le moteur de recherche est déjà fonctionnel !

 Informations complémentaires sur le design

Un header avec un logo original pour votre futur site internet (header vierge disponible + fichier PSD du logo)

Un menu horizontal avec effet de rollover + bouton onglet pour faciliter la navigation sur le site, chaque page à sa propre couleur !

Présence d’images vierges : logo, header, bouton.

Présence du fichier PSD de l’interface complète pour vous aider à modifier en profondeur votre prochain site.

 Les autres captures

JPG - 107.7 ko
JPG - 155.6 ko

 Liens en rapport avec l’interface graphique CleanShop

Article publié par Wonka

Vous aimez cet article? Partagez le !

Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !

Publiez une nouvelle image

Vous avez réussis à créer une belle image grâce à ce tutorial ? Soyez sympa, partagez la avec la communauté. Utilisez simplement ce formulaire :

Vous devez être connecté pour activer le bouton de validation !

La galerie des membres

Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !

    Questions et commentaires, Il y a 9 messages de forum.

    Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.

    • 23 janvier 2009 23:21, par Ggreg

      Bonjour , je viens d acheter ce kit graphique et malheureusement je n’est pas était satisfait... Dans la description vous cité « un site clés en main » ?? j ai pas réussi a trouvé trouvé le panier etc donc j aimerai trouver un arrangement affin de réglé mon problème car sans ça ce kit ne me sert a rien ... merci de me re contacté

      Répondre

    • 7 mai 2009 08:53, par pierre_30

      Bonjour, J’ai acheté le kit « MyEcoloWebsite ». Il est superbe mais avant de le modifier, je l’ai fait tourner sur Firefox et internet7 en local. Sur firefox, superbe. Lorsque je suis sur IE7, pas moyen de passer de l’onglet acceuil (index.html) sur un autre onglet. Par contre si j’ouvre page2.html alors pas de problème bonne navigation sur toutes les pages sauf si je retourne sur index alors de nouveau bloqué Je ne vois pas pourquoi hors lors de l’achat, la compatibilité pour IE est grande. Pourriez-vous m’aider ? Merci de votre collaboration

      Répondre

      • 7 mai 2009 09:52, par Wonka

        Simple problème de lien, et non compatibilité, vérifier les liens dans le menus ;)

        Répondre

        • 7 mai 2009 13:33, par pierre_30

          Rebonjour, J’ai vérifier les liens, pas de problème. Si les liens n’avaient pas été bon, je crois que je n’aurais pas eu la possibilité de passer d’un onglet à l’autre via firefox. Aurriez-vous une autre idée ou approche ? Merci de votre collaboration

          Répondre

          • 9 mai 2009 10:27, par Votre pseudonyme

            Pas de nouvelle ? Pourriez-vous me répondre svp.

            Merci

            Répondre

    • 9 août 2009 21:35, par Serge

      Bjr,

      Ne possédant pas adobe photoshop, et après avoir télécharger les deux tutoriaux >> Tuto_307_psd.psd et tuto_308_psd.psd, je ne peux créer mon header et mon logo. Donc les deux tutoriaux sans adobe photoshop ne me servent à rien !!! Donc impossible de créer mon header et mon logo, sachant que je n’acheterai pas le logiciel adobe photoshop. Merci de me donner une solution, compte tenu de mon achat de votre kit. Cordialement Serge

      Répondre

    • 3 septembre 2009 15:54, par corentin du 34

      bonjour d acheter votre kit graphique jaimerai savoir utiliser quel logiciel pour lutiliser merci cordialement.

      Répondre

      • 12 octobre 2009 19:01, par Wonka

        Pour modifier les pages vous devez ouvrir les fichiers HTML avec un éditeur HTML comme dreamweaver !

        Répondre

    • 12 octobre 2009 16:33, par Loutre

      Je viens d’acheter le kit et de le mettre en ligne (parallèlement au site actuel) pour faire des tests.

      1 -Après avoir changé l’adresse mail de retour du formulaire (traitement_email.php), j’ai testé et si j’avais bien :

      • dans l’objet du mail le bouton radio sélectionné
      • dans le corps du mail ce que j’avais écrit dans le message,

      Mais je n’avais ni le nom, ni le prénom, ni l’email de l’envoyeur.

      2. A priori l’animation du header ne fonctionne pas (ni sur mon ordi, ni en ligne). Vous pouvez jeter un oeil à : http://www.generation-nature.fr/Kit_Green/index.html

      Merci de me fournir les pistes pour corriger.

      Répondre

    Laissez un commentaire

    Remplissez correctement le formulaire puis appuyez sur Validez.