32
Kit Graphique : DarkNessLife
Ce kit graphique est en vente sur cette page, cliquez ici !
Epoustoufflant, voila le mot qui pourrait définir à merveille le kit graphique DarkNessLife. Ce kit 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, avec onglet de survol et de situation, page de contacts et d’envois d’emails (en PHP), une page liens et partenaires avec affichage des captures dynamiques avec le script lightbox (capture en surimpression), galerie de photos par effet glissant et reflet Web2.0 (imageflow), nombreux effets de survols et de dynamisme … mais surtout, nous vous proposons un logo créé rien que pour vous, facilement exploitable, nous vous fournissons même les fichiers sources Photoshop et un tutorial pour le personnaliser.
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. De plus, une assistance vous 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.
Votre site ne mérite-t-il pas d’être le plus beau ? L’habiller avec DarkNessLife 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 à toutes les pages
Un header contenant un logo au centre (vous pourrez le personnaliser facilement car nous vous proposons les sources Photoshop ainsi qu’un tutorial d’aide à la modification. Le logo se personnalisera en 2 minutes chrono car il est fait uniquement de textes vectorielles !
En dessous nous avons un menu horizontal entièrement codé sous forme de liste CSS ; au survol de la souris les onglets changent de couleur et sur chaque page l’onglet actif devient orangé pour aider l’internaute à naviguer sur le site internet.
Ensuite nous avons sur la partie gauche :
- Un bloc d’informations importantes, sous forme d’images. Vous pouvez le supprimer en deux secondes, et le modifier en quelques minutes.
- Un menu vertical textuel codé sous forme de liste CSS (avec effet de survol sur les liens au passage de la souris).
- Une liste d’information pouvant être adaptée pour des liens rapides vers des pages importantes du site.
Pour le contenu, le bloc seulement est présent sur chaque page et il est composé d’un titre graphique (la source Photoshop de ce titre se trouve dans le dossier).
Et en fin de page nous avons le bloc footer.
Description des fonctionnalités page par page
Page 1 : index.html
Cette page correspond à la page d’accueil du site, elle comprend trois blocs qui peuvent être étirés verticalement à l’infini :
- Un bloc pour contenir l’édito du site
- Une liste contenant les sujets de news ou d’articles (avec un effet de survol hover)
- Un bloc avec une liste de liens + icône graphique black glossy
Page 2 : page1.html
Cette page est une page de contenus « type », elle comprend les fonctionnalités complètes du site mais en intégrant à droite un bloc pour les contenus textes (longs).
Page 3 : page2.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 désirez !
Page 4 : page3.html
Cette page est une page de contenus « type », elle comprend les fonctionnalités complètes du site mais en intégrant à droite un bloc pour les contenus textes (longs).
Page 5 : page4.html
Cette page liste vos futurs liens et partenaires, vous affichez un titre (nom du site) une description, une capture d’écran ; en cliquant sur celle-ci, la capture s’ouvre dynamiquement en grand avec une animation.
Page 6 : page5.html
Cette page contient un formulaire, vos internautes rempliront le formulaire et une fois validée, vous recevrez un email contenant toutes les informations saisies.
Programmation de l’interface dark corporate
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 ImageFlow)
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 voir un exemple sur http://www.wks.fr/kitgrafik/light2/
Script d’affichage LightBox
Images dynamiques : placez vos vignettes dans une balise div spéciale et vos images s’ouvriront en grand grâce à une animation surprenante. Voir un exemple sur cette page : http://www.wks.fr/kitgrafik/light3/
Un formulaire de contact
Géré en JavaScript pour sécuriser le formulaire et en PHP pour traiter l’envoi de mails vers votre boite email. Ce script est paramétrable en deux minutes.
Effet de survol hover au passage de la souris
Sur les liens, les boutons, les menus, un effet de survol au passage de la souris est appliqué, cela invite les internautes plus facilement à cliquer sur ces éléments, la navigation est ainsi facilitée. L’effet de survol est créé grâce à la technique CSS du tiroir.
Information complémentaire sur le design
Pour faciliter la personnalisation de ce kit graphique, nous vous fournissons les images en édition clean (images vierges de textes ou de logos) et pour les plus motivés, nous avons ajouté les fichiers sources Photoshop (.psd) qui vous permettront de modifier l’aspect visuel de votre futur site. Pour vous en donner plus, nous vous proposons des articles (tutoriels) vous expliquant le comment du pourquoi (graphisme et programmation html css php javascript expliqués).
En plus de tout cela, nous vous proposons une assistance technique vous garantissant une réponse sous 24 heures. Nous suivront votre problème jusqu’à sa résolution.
Liens en rapport avec DarkNessLife
Ce kit graphique est en vente sur cette page, cliquez ici !
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 !
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 18 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.
-
18 juin 2008 03:05, par claire PILCH
Bonjour, j’ai téléchargé le kit graphique : DarkNessLife ! Je suis une débutante, je voudrais savoir comment modifier le code php dans la rubrique CONTACT pour recevoir des mails des visiteurs, et aussi je rencontre un problème avec Galerie effet glissant + miroir, car les photos ne s’affichent pas quand je les essaye sur mon ordinateur, est ce nécessaire de les publié en ligne pour les voir ? Merci pour vore aide cordialement, Claire Pilch
Répondre-
18 juin 2008 15:40, par Wonka
Oui il est necessaire de publier les pages en ligne pour constater les photos à l’écran, d’autre part il faut juste remplacer l’email wonka @wks.fr dans le fichier traitement_email.php en l’ouvrant avec le bloc note par exemple.
Bonne chance
Répondre
-
18 juin 2008 22:34, par Claire
Merci pour votre réponse, mais j’arrive pas trouver le fichier traitement_email.php
Répondre-
19 juin 2008 09:40, par Wonka
Si ce n’est pas disponible tu peux le trouver ici : http://rapidshare.com/files/123510598/...
Ensuite tu place le fichier à coté de ton fichier index.html
Bonne chance !
Répondre-
19 juin 2008 20:05, par claire PILCH
Merci vraiment pour votre réponse rapide, je voudrais aussi créer une galerie de photo classe, et 100% professionnel, qu’est ce que vous me conseillez comme kit graphique ? Merci
Répondre-
20 juin 2008 09:26, par Wonka
Est bien moi je n’ai rien créée pour les galeries, enfin pour le moment, donc je vous conseil de visiter les galeries de kitgrafik.com à la recherche de la perle rare ! Bonne chance !
Répondre-
20 juin 2008 15:42, par claire PILCH
Merci pour votre réponse, je vais aller jeter un coup d’oeil
Répondre
-
-
-
-
-
-
-
24 juin 2008 19:42, par phil
j’ai le meme problème pour le fichier php pour le mail mais le lien rapidshare me demande un code pour le download, je mets quoi ? ou accessoirement merci de m’envoyer ce fichier php
Répondre-
24 juin 2008 19:45, par phil
et j’ai essayé avec crazybrowser au lieu de firefox et là j’arrive à downloader via downloadexpress mais çà me dit que l’archive est corrumpue. MERCI de bien vouloir faire le nécessaire, car je suis bloqué
Répondre-
24 juin 2008 19:56, par phil
c est finalement le code est apparu seulement maintenant ... cela aurait été plus simple de le placer dans le zip
Répondre
-
24 juin 2008 19:59, par phil
par contre çà ne prend pas le mail du user qui envoie le message (je reçois le corps du message, mais pas le nom, prénom et email) Y aurait-il un bug ?????
Répondre
-
-
-
-
5 septembre 2008 18:45, par margueritat benjamin
je n’ai pas le ficher email.php pour mofifier cela il manque dans la dossier merci
Répondre-
6 septembre 2008 12:32, par Wonka
http://rapidsha...traitement_email.php.html
Ici par exemple !
Répondre-
9 septembre 2008 11:56, par kumkatdu13
le fichier traitement_email.php ne fonctionne pas avec ce kit quand on le place dans le dossier
Répondre-
9 septembre 2008 14:36, par Wonka
Des dizaines de clients utilisent déjà ce fichier et évidemment nous avons tous attendus votre message pour faire cette déduction :
Je rappel que pour fonctionner ce fichier doit être testé sur un serveur acceptant PHP notamment la fonction mail() de PHP.
Celui ci doit être testé avec le formulaire d’origine, donc sans modification des names ou id présent dans les inputs des formulaires.
Et enfin l’arborescence première doit être préservé dans le kit graphique.
Bien évidemment vous n’oublierez pas de modifier le mail d’envoi dans ce même fichier de traitement PHP !
Bonne chance
Répondre Pour toute question n’hésitez pas !
-
-
-
-
5 juillet 2009 18:30, par nikos33185
bonjour j’ai telecharger votre kit mais je n’ai pas le fichier traitement-email.php et quand j vais sur le lien que vous avez donnez , cela me dit error comment puis-je l’avoir ou pouvez vous me l’envoyer merci
Répondre -
27 juillet 2009 18:02, par titin
Boujours à tous ...
Après réflexion, j’ai réussi a trouver la solution pour la page contact :
Alors voici mon traitement_email .php
<font color="#000000">
<font color="#0000BB"><?php
<br />$msg_ok </font><font color="#007700">= </font><font color="#DD0000">"Votre demande a bien été prise en compte."</font><font color="#007700">;
<br /></font><font color="#0000BB">$message </font><font color="#007700">= </font><font color="#0000BB">$msg_erreur</font><font color="#007700">;
<br /></font><font color="#0000BB">define</font><font color="#007700">(</font><font color="#DD0000">'MAIL_DESTINATAIRE'</font><font color="#007700">,</font><font color="#DD0000">'fan.2.quentin@live.fr'</font><font color="#007700">); </font><font color="#FF8000">// remplacer par votre email
<br /></font><font color="#0000BB">define</font><font color="#007700">(</font><font color="#DD0000">'MAIL_SUJET'</font><font color="#007700">,</font><font color="#DD0000">'Contact de Créa Templates PowerPoint'</font><font color="#007700">);
<br />
<br /></font><font color="#FF8000">// sinon c'est ok
<br />
<br /></font><font color="#007700">foreach(</font><font color="#0000BB">$_POST </font><font color="#007700">as </font><font color="#0000BB">$index </font><font color="#007700">=> </font><font color="#0000BB">$valeur</font><font color="#007700">) {
<br />$</font><font color="#0000BB">$index </font><font color="#007700">= </font><font color="#0000BB">stripslashes</font><font color="#007700">(</font><font color="#0000BB">trim</font><font color="#007700">(</font><font color="#0000BB">$valeur</font><font color="#007700">));
<br />}
<br />
<br /></font><font color="#0000BB">$interets </font><font color="#007700">= </font><font color="#0000BB">$_POST</font><font color="#007700">[</font><font color="#DD0000">'interets'</font><font color="#007700">];
<br /></font><font color="#0000BB">$sqlinterets </font><font color="#007700">= </font><font color="#DD0000">''</font><font color="#007700">;
<br />for (</font><font color="#0000BB">$i</font><font color="#007700">=</font><font color="#0000BB">0</font><font color="#007700">; </font><font color="#0000BB">$i</font><font color="#007700"><</font><font color="#0000BB">count</font><font color="#007700">(</font><font color="#0000BB">$interets</font><font color="#007700">); </font><font color="#0000BB">$i</font><font color="#007700">++)
<br />{
<br /></font><font color="#0000BB">$sqlinterets </font><font color="#007700">.= </font><font color="#0000BB">$interets</font><font color="#007700">[</font><font color="#0000BB">$i</font><font color="#007700">];
<br /></font><font color="#0000BB">$sqlinterets </font><font color="#007700">.= </font><font color="#DD0000">', '</font><font color="#007700">;
<br />}
<br />
<br /></font><font color="#FF8000">//Préparation de l'entête du mail:
<br /></font><font color="#0000BB">$mail_entete </font><font color="#007700">= </font><font color="#DD0000">"MIME-Version: 1.0\r\n"</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_entete </font><font color="#007700">.= </font><font color="#DD0000">"From: {$_POST['nom']} "
<br /> </font><font color="#007700">.</font><font color="#DD0000">"<{$_POST['email']}>\r\n"</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_entete </font><font color="#007700">.= </font><font color="#DD0000">'Reply-To: '</font><font color="#007700">.</font><font color="#0000BB">$_POST</font><font color="#007700">[</font><font color="#DD0000">'email'</font><font color="#007700">].</font><font color="#DD0000">"\r\n"</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_entete </font><font color="#007700">.= </font><font color="#DD0000">'Content-Type: text/plain; charset="iso-8859-1"'</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_entete </font><font color="#007700">.= </font><font color="#DD0000">"\r\nContent-Transfer-Encoding: 8bit\r\n"</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_entete </font><font color="#007700">.= </font><font color="#DD0000">'X-Mailer:PHP/' </font><font color="#007700">. </font><font color="#0000BB">phpversion</font><font color="#007700">().</font><font color="#DD0000">"\r\n"</font><font color="#007700">;
<br />
<br /></font><font color="#FF8000">// préparation du corps du mail
<br /></font><font color="#0000BB">$mail_corps </font><font color="#007700">= </font><font color="#DD0000">"Message de : $destinataire $nom $prenom\n"</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_corps </font><font color="#007700">.= </font><font color="#DD0000">"e-mail : $email\n"</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_corps </font><font color="#007700">.= </font><font color="#DD0000">"Sujet : $sujet\n"</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_corps </font><font color="#007700">.= </font><font color="#DD0000">"Le Message : $texte\n\n\n"</font><font color="#007700">;
<br /></font><font color="#0000BB">$mail_corps </font><font color="#007700">.= </font><font color="#0000BB">$comments</font><font color="#007700">;
<br />
<br /></font><font color="#FF8000">// envoi du mail
<br /></font><font color="#007700">if (</font><font color="#0000BB">mail</font><font color="#007700">(</font><font color="#0000BB">MAIL_DESTINATAIRE</font><font color="#007700">,</font><font color="#0000BB">MAIL_SUJET</font><font color="#007700">,</font><font color="#0000BB">$mail_corps</font><font color="#007700">,</font><font color="#0000BB">$mail_entete</font><font color="#007700">)) {
<br />
<br /> </font><font color="#FF8000">//Le mail est bien expédié
<br /> </font><font color="#007700">echo </font><font color="#0000BB">$msg_ok</font><font color="#007700">;
<br />} else {
<br />
<br /> </font><font color="#FF8000">//Le mail n'a pas été expédié
<br /> </font><font color="#007700">echo </font><font color="#DD0000">'Une erreur est survenue lors de l\'envoi du formulaire par email'</font><font color="#007700">;
<br />}
<br />
<br /></font><font color="#0000BB">?></font>
</font>Voila
Répondre -
27 août 2009 08:23, par zenced
Wonka, Merci pour le kit graphique, ca m’a permis d’etre operationel en quelques jours seulement. Tout marche comme je le desire, je vais realiser mes propres mofications sur ce merveilleux squelette. Le seul bemol c’est mon utilisation de LightBox dans ma page « Evenementiel » j’ai du raté qqchose... Parce qu’une fois l’affichage effectué a pârtir de la vignette, le nombre des images de la page est erroné et le defilement (next) est bloqué dans la fenetre LightBox... Merci pour tout et d’avance pour le support du kit. Avec toute mon admiration. Zenced
Répondre
