Kit graphique : Dark Corporate

Epoustouflant, voila le mot qui pourrait définir à merveille le kit graphique Dark Corporate, 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, avec onglet de survol et de situation, page de contact et d’envois d’emails (en PHP), une page liens et partenaires avec affichage des captures dynamiques avec le script lightbox, galerie de photos par effet glissant et reflet web2.0, un moteur de recherche Google … Mais surtout nous vous proposons un logo créé rien que pour vous, exploitable simplement, nous 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. Voyez par vous-même sur cette page : http://www.wks.fr/

Votre site ne mérite-t-il pas d’être le plus beau ? Habillez votre site avec DarkCorporate 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 votre sérieux.

 Description des fonctionnalités communes à chaque page

Un header contenant un logo à gauche (vous pourrez le personnaliser facilement car nous vous proposons les sources photoshop ainsi qu’un guide) et un moteur de recherche Google à droite (intégré parfaitement à le charte). 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 blanc pour aider l’internaute à naviguer sur le site internet. Ensuite nous avons sur la partie gauche un menu vertical textuel avec son header (effet de survol sur les liens) et enfin dessous trois blocs graphiques (changeant de couleur au passage de la souris) pour y placer trois liens importants. 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 deux espaces de contenus spécifiques : un premier sur fond noir pour afficher les titres des news par exemple (sur deux blocs étirables verticalement) et un bloc blanc pour y placer l’édito par exemple.

JPG - 159.5 ko

Page 2 : page2.html

Cette page est une page de contenus types, elle comprend les fonctionnalités complètes du site mais en intégrant à droite un bloc pour les contenus textes (long).

JPG - 176.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 souhaiterez !

JPG - 135.4 ko

Page 4 : page4.html

Cette page est une page de contenus types, elle comprend les fonctionnalités complètes du site mais en intégrant à droite un bloc pour les contenus textes (long).

JPG - 189.3 ko

Page 5 : page5.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.

JPG - 175.3 ko

Page 6 : page6.html

Cette page contient un formulaire, vos internautes rempliront le formulaire et une fois validé vous recevrez un email contenant toutes les informations saisies.

JPG - 108.3 ko

 Programmation de l’interface MyFolio

Full CSS

Toute l’interface est codé 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 voir un exemple sur http://www.wks.fr/

Affiche des images en lightbox

Image dynamique placer 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/

Un formulaire de contact

Géré en JavaScript pour sécuriser le formulaire et en PHP pour traiter l’envoi du mail vers votre boite email. 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 !

 Information complémentaire 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 a sa propre couleur ! Présence d’images vierges : logo, header, bouton

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

 Autres liens sur Internet en rapport avec l’interface graphique DarkCorporate

Article de présentation de l’interface DarkCorporate

http://www.wks.fr/Kit-graphique-DarkCorporate.html

Tutorial de personnalisation du kit DarkCorporate

http://www.wks.fr/Dark-Corporate-Aide-a-la.html

Tutorial de création du logo :

http://www.wks.fr/Creer-une-bille-metal-dark-glossy.html

Exemple du script lightbox :

http://www.wks.fr/kitgrafik/light1/index.html

Exemple de la galerie glissante :

http://www.wks.fr/kitgrafik/light2/index.html

Site officiel du script lightview :

http://www.nickstakenburg.com/projects/lightview/

Attention : les scripts ne sont pas à vendre, ils sont disponibles gratuitement sur le net, ils sont intégrés dans cette charte à titre d’exemple. L’utilisation, la diffusion sont entièrement gratuits via les sites des auteurs.

Mot-clés : Charte graphique

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

Il y a aucune image pour le moment, soyez le premier à ajouter une image à ce tuto Photoshop.

Vous avez terminé ce tuto ? Partager votre création graphique.

Il y a 62 commentaires publiés sur cet article
  • chantal

    Merci pour ce tutorial il permet de bien comprendre comment modifier les images.

    je cherhce deseperement comment modifier l’image : block_white_background (index) car je ne la retrouve pas en psd

    merci pour votre aide

    chantal

    ps : le design est superbe

    Répondre
    • Wonka

      Ah oui je crois l’avoir oublié celui la ! Cependant le bloc est disponible dans le fichier global psd (interface.psd ou quelque chose comme cela !).

      Répondre
  • BONJOUR, dans la galerie les miniature avec reflet ne s’affiche pas en local est ce normal ???

    Répondre
    • Wonka

      Oui c’est normal puisque cette galerie utilise un script PHP tu dois donc uploader tes fichiers avant des les visualiser.

      Cependant si tu veux rester en local tu peux installer un serveur php apache sur ton poste. Cela te permettras d’exécuter des scripts php.

      Répondre
  • clement

    bonjour a tous, question bete surement : il est ecrit dans le tuto :> Modifier le menu horizontal à onglet> Ce menu est présent dans chaque fichier html, vous devrez donc faire la> modification sur chaque fichier : j’ouvre le fichier index.html (pour> faire la modification sur la page d’index) et je fais ctrl + f (pour> ouvrir une recherche interne) et j’inscris dans le formulaire menu_first,> j’appuie sur entrer. Je me retrouve directement à l’endroit où se trouve> le menu. Je n’ai plus qu’à modifier le nom des onglets>>

    dans quel application ouvrir la page html ?

    si je le fait dans internet explorer ou dans dreamw, controle+f + la manip....rien ne se passe....je nai pas possibilité de changer le nom de l’onglet...
     autre question : est ce possible de changer le fond noir de toute les pages par un fond perso ? merci d’avance pour vos conseils clement.

    Répondre
    • Wonka

      En fait il faut ouvrir le fichier avec un logiciel qui permet de modifier le code source de la page.

      Sous Ie qui est un navigateur tu ne pourras pas le faire. Sous dreamW oui tu pourras mais il faut être en édition de code source.

      Ctrl + f permet de faire une recherche de caractère dans un fichier, rien de bien important si ce moteur de recherche interne ne fonctionne pas chez toi. Cherche et trouve le bon code dans le fichier, tout est expliqué dans l’article plus haut ;)

      Si tu as de nouvelles questions n’hésites pas !

      Répondre
  • salut ! je souhaite rajouter un onglet en haut, g réussit avec dreamw mais il me coupe le bloc ’menu last’ il me le met + bas...fo t’il que je reduise chaque onglet dans photoshop en largeur ainsi que les blocs ’menu’ ? merci d’avance et merci aussi de votre disponibilité c’est super sympa

    Répondre
    • Wonka

      Oui il faut réduire la largeur de chaque onglet, mais pas dans photoshop plutôt dans la feuille de style css !

      Répondre
      • waoo cé chaud dream kan meme... !je vois qu’on ne s’improvise pas webdesigner meme en etant graphiste... ! et bien quand je change la largeur dans les codes css ca fait n’importe quoi soit la barre est pas assez large, soit elle est bien mais le dernier onglet se barre en dessous...sniff bon c’est ma derniere tentative apres j’irai voir un pote webmaster ! j’aurai bien aimé y arriver par moi meme quand meme ! si vous avez (encore) le courage de m’expliquer a++

        Répondre
  • alexandra

    Bonjour, je fais mon site en plusieurs langues, il me faut donc créer d’autres images content_1_back_xxx qui aparemment correspondent dans le code a content_haut_1_xxx les xxx sont interchangeables, mais quand je crée une new image et que je la nomme ainsi et fais cette procedure, ça ne marche pas !!! je travaille avec dream et ne sais pas du tout manipuler le code.

    Sinon le moteur google ne fonctionne pas et je ne sais pas comment faire pour que les messages du formulaire de contact arrivent sur mon email.

    Pour l’instant ça me fait erreur quand j’essaie d’envoyer.

    Help

    Répondre
    • Wonka

      Bonjour,

      Pour faire les modifications tu vas devoir obligatoirement passer par le code source des pages. Une fois que tu es dans le code lis bien ce tutorial car tout y est expliqué. Si tu as des questions précises sur des problèmes, n’hésite pas !

      La ton message est bien trop vague pour que je t’apporte un semblant de réponse ou de piste !

      Cordialement Julien

      Répondre
      • Bon, je vais essayer d’etre plus precise. Par exemple pour le fond de la page services, c’est l’image content_1_back_services.png le seul endroit ou ça colle dans le code est content_haut_1_services , j’ai donc éssayé de changer services par agence par ex et ça marche, je me retrouve avec l’image d’agence...mais la ou je ne comprend plus c’est que j’ai crée d’autres images pour aller dans ma version españole du site : j’ai nommé par exemple content_1_back_serviceses. png et mis dans le code content_haut_1_serviceses...en me disant que logiquement ça devrait marcher...et non, ça ne marche qu’avec les noms d’images déjà dans le kit ! je ne comprend vraiment pas, or comme le site va etre dans au moins 3 langues, j’ai besoin de faire des nouvelles images avec forcement de nouveaux noms pour chacune des versions.

        Sinon, comment faire marcher le moteur de recherche google ?

        Et que faut il mettre dans le code pour que les messages envoyés par mon formulaire de contact arrivent sur mon email.

        Tu peux voir l’ebauche de mon site ici :

        http://forex-synergy.ovh.org/ c’est une mise ne ligne provisoire en attendant que je choisisse un nom de domaine.

        Merci de m’aider !

        Alexandra

        Répondre
        • Wonka

          Pour chaque image ajouté il faut changer le code source de cette image.

          Si je veux ajouter l’image new.png je doit modifier le code en < img src=« new.png » ...

          Le moteur de recherche google fonctionne !

          Pour les autres questions tout est expliqué dans le tutorial d’aide !

          Je reste à votre disposition.

          Répondre
          • ça ne repond pas a mes questions, l’image en question est introuvable dans le code en img src, elle correspond a un endroit ou il ya div class, j’ai pourtant expliqué clairement mon pb dans ma question.

            et la configuration du formulaire de contact pour que ça arrive sur mon mail, n’est expliqué nulle part dans le tutoriel !

            Le moteur google ne marche pas chez moi en tout cas.

            pourrais t’on communiquer par skype, ce site va etre mon outil de travail, et ce souci me fait perdre bcp de temps

            mon skype est alexaperrier

            merci

            alexandra

            Répondre
  • SALUT bon toujours pas de reponse finalement ! pour mes onglet je veut en rajouter un : quand je change la largeur dans les codes css ca marche pas, soit la barre d’onglets est pas assez large, soit elle est bien mais le dernier onglet se barre en dessous...help please !!!

    Répondre
  • patrick

    j’ouvre le fichier icone_left1.psd dans photoshop. Je ne modifie rien, je laisse tel quel. Je sauvegarde en .png, et la page html une fois publiée fait apparaitre une ligne bleue à la base du bouton (non-survolé). Cette barre correspond la à la 1ere ligne du bouton bleu (survolé) dans le psd. Il y a un décalage et je pense qu’il y a un prb de version des fichiers psd pour ces icone_left. Merci de vérifier et de proposer une mise à jour.

    Répondre
    • Wonka

      Je n’ai constaté aucun problème de ce genre !

      Répondre
      • Bien, j’ai remédié au problème en retirant 1 pixel à la propriété height (48px au lieu de 49) de la classe des icone_left.

        Répondre
  • Patrick

    Les roll-overs des boutons Icone_left ne fonctionne pas sous IE.

    Répondre
    • Wonka

      IE6 effectivement certaines hover sont inactifs :/ C’est un vrai problème. Par contre sous IE 7 il y a aucun soucis !

      Répondre
      • C’est un vrai problème. IE6 est encore largement utilisé. Je suis développeur sénior et je règlerais le soucis, je ne manquerais pas de faire part de la correction javascript.

        Répondre
  • Bonjour quand j’ouvre le Kit graphique Dark Corporate dans dreamw tout ce mélange je n’arrive plus a me retrouvé pourriez-vous me dire comment dois-je faire pour avoir l’index en entier merci.

    Répondre
  • Lightview is not free, it should not be inside the download. A link to the officla site can be provided instead so people can conform to the license.

    Répondre
    • Wonka

      What, it’s a joke ?

      Répondre
      • pepsy

        Bonjour, le kit Dark Corporation m’intéresse beaucoup pour mon futur site, mais je voulais savoir si je pourrais l’utiliser comme un site marchand

        Et si il était possible de changer le bleu par de l’orange(un peu prés même ton que le kit my folio)

        Merci pour vos réponses.

        Répondre
        • Dj Flo Animation

          bonjour,le kit graphique est vraiment bien !!

          j’ai un petit soucis avec le formulairede contact

          j’ai du mal configurer traitement_email ??

          Merci

          Répondre
          • Wonka

            Quel est le problème ? Je rappel que dans ce fichier il faut tout simplement remplacer l’email wonka@wks.fr par le votre !

            Répondre
            • Dj Flo Animation

              bah poutr tant c’est bien ce que j’ai fait mais cela ne marche pas

              Répondre
              • Wonka

                Et je te rappel qu’il faut tester cela sur un serveur distant puisque ce formulaire utilise php !

                Répondre
  • mazflo007

    Bonjour, j’aimerais savoir si il est possible de modifier la taille (d’affichage) des images pour la galerie glissante. Merci

    Répondre
    • Wonka

      La taille est une notion qui ne se modifie que très légèrement, la diminué oui l’agrandir je n’ai jamais réussis !

      Répondre
      • merci mais on la diminue comment ?

        Répondre
  • flo

    Bonjour,

    ou peut on trouver le tutorial pour la modification du formulaire php du kit dark corporate ?

    Répondre
    • Wonka

      Le formulaire c’est du HTML et il n’y a que l’envoi de l’email qui est en PHP, il n’est pas prévus dans le tutoriel de modifier ce dit formulaire, désolé !

      Répondre
      • foxy

        bonjour ,

        j’ai acheter le kit graphique

        et je voudrais ôté la partie recherche google , j’ai vue qu’il y a une partie de code a retirer , mais voilà quand je la retire cela modifie la mise ne page ( cela decale tous vers le haut

        merci

        Répondre
        • Wonka

          Attention a ne retirer que le code correspondant au moteur de recherche !

          Répondre
        • foxy

          désoler , voilà c’est bon j’ai trouver

          j’avais oublier de modifier la feuille.ccs

          merci

          Répondre
      • dieu_le_pere

        Salut à tous moi aussi des probleme avec le formulaire. Si quelqu’1 peut me retirer cette épine des pieds ca sera bien gentil.

        Répondre
        • Wonka

          Oui mais quel est le problème ?

          Répondre
  • Eldiablo

    Bonjour, jaimerais savoir quelle police d’ecriture vous utilisez afin de modifier les tous les boutons ! Merci !

    Répondre
  • bonjour , j aimerais savoir comment parametrer l’envoi de mail a la page 6 , ou faut il rentrer mon adresse mail ou tout autre renseignement ? je seche

    Répondre
    • Wonka

      Il faut remplacer le mail dans le fichier traitement_email.php et c’est tout. Bonne chance.

      Répondre
  • mais a quel endroit , je suis désole , je ne parvient pas a trouver ...

    Répondre
  • Bonjour, je suis super content du kit graph merci pour ce superbe travail. par contre j’ai quelques soucis que j’aimerai éclaircir avec votre aide pouvez vous m’expliquer comment enlever le texte dans les différents onglets et page je m’explique tout en haut du kit il y a un logo,juste à coté j’ai dark...... comment faire pour enlever tout ça et garder que l’image (le fond) même chose pour les autres onglets et barre de menu (je bosse avec dreamweaver et photoshop cs4) merci d’avance j’attends votre réponse

    Répondre
    • diabolo57

      il suffit d’aller dans le repertoire fichiers sources photoshop et tu auras toutes les images

      Répondre
  • Voila pour ceux qui utilise le formulaire et que le nom, prenom et l’email marché pas quand vous receviez le message ecriver cette ligne a from

    $headers .= « From : $nom $prenom <$email>\n »

    Voila

    Répondre
  • diabolo57

    magnifique ce kit grapfik..mais ’jai un prob avec l’envoi de mail. J’ai changé les adresses dans le ficher traitement_email.php, ensuite j’ai demandé un ami d’essayer l’envoi ...voilà le message d’erreur affiché

    Warning : mail() has been disabled for security reasons in /var/www/d/do/dom/domo.informatique.perso.neuf.fr/public_html/traiteme nt_email.php on line 13 Un probleme est survenu lors de l’envoir de votre message !

    ou est le prob ?? merci de votre aide

    Répondre
    • Wonka

      Alors la, je sais pas, peut être avez vous supprimer quelque chose de trop dans le fichier d’envoi d’email ? Peut être que vous hebergeur n’accepte pas le PHP ou la fonction mail() de php !

      Répondre
  • arcoa

    bonjour,je viens de telecharcher le kit dark,tout fonctionne sauf l’affichage des photos merci de m’aider

    Répondre
    • Wonka

      Sur quelle page exactement, et pouvez vous donner d’avantage de détails concernant le problème ? Le site est il en ligne pour constater l’erreur ?

      Répondre
  • Psill

    Bonjour, très beau travail !!! Tout fonctionne impecable. Ma question porte sur la galerie, comment ouvrir l’url des images dans une nouvelle page ? Merci.

    Répondre
    • Wonka

      On m’as déjà posé cette question, et je ne sais pas ... désolé !

      Répondre
  • Le Lantien

    Bonjour.

    Je viens d’acheter ce magnifique kit graphique, je voudrais le recoder coté HTML mais je ne trouve pas le psd de l’interface, il n’y est dans aucun dossier ...

    Répondre
    • Le Lantien

      Alors pas de réponse ?

      Si le créateur du kit pouvait me répondre ? Je dispose bien sur de la licence qui prouve mon achat ...

      Car pour le moment j’ai acheté quelque chose que je ne trouve pas dans le dossier ce qui est embêtant ...

      Répondre
      • Wonka

        Je vois pas à quoi à sa sert de re coder le fichier en HTML puisque c’est déjà, d’autres part le fichier psd n’est pas fournis avec le kit. Bonne chance pour la suite.

        Répondre
  • Le Lantien

    Bonsoir.

    Je vais m’expliquer alors :

    le design n’est pas super bien codé selon mes envies. Je veux dire par là qu’il ne passe pas bien en 800 (je pense aussi à ceux qui n’ont pas les nouveaux écrans).

    PS : lors de l’achat je peux lire : « Présence du fichier PSD de l’interface complète pour vous aidez à modifier en profondeur votre prochain site. »

    Je voudrais bien l’avoir donc. J’invite le responsable du kit à me contacter par email pour que je puisse lui montrer la licence d’achat afin qu’il puisse me le fournir.

    Répondre
  • Le Lantien

    Merci, je vous ai envoyé un message.

    Répondre
  • Le Lantien

    Toujours aucune réponse ...

    Répondre
  • Le Lantien

    Je vous ai à nouveau envoyé un message email ... J’espère que maintenant vous allez y répondre car je commence à m’impatienter ...

    Répondre
  • Luffy

    Bonsoir l’envoi de mail ne marche pas voici le code

    <?
    $headers 
    "MIME-Version: 1.0\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";

    $headers .= "From: BleuNeutral <creatweb-support@hotmail.fr>\n";

    $headers .= "Cc: $adresse\n";
    $headers .= "Bcc: creatweb-support@hotmail.fr\n";

    $message htmlentities("$texte");

    // On envoi l'email
    if ( mail($destinataire$sujet$message$headers) ) echo "<br/><br/><center><h2>Nous avons bien reçu votre message, merci.</h2></center>";
    else echo 
    "Un probleme est survenu lors de l'envoir de votre message !";

    ?>

    Répondre
  • 可愛い 女子

    可愛い 女子看護婦 プレイ騎乗位のやり方岐阜 結婚 再婚岐阜 合コン お店逆援 秋田 掲示板逆援 茨城 セフレ逆援 大分 人妻逆援 岡山 人妻逆援 沖縄 人妻逆援 岐阜 掲示板逆援 熊本 セフレ逆援 掲示板逆援 埼玉 掲示板逆援 滋賀 人妻逆援 高松逆援 東京 情報逆援 栃木 掲示板逆援 鳥取 人妻逆援 新潟 不倫逆援 福井 掲示板逆援 福島 セフレ逆援 北海道 セフレ逆援 宮城人妻逆援 山形 セフレ逆援 山梨 人妻逆援 富山 出会い 募集中学生 サークルコミュニティー中学生 画像中出しセックス中出し ハメ撮り画像中出し 画像掲示板潮吹き AV女優画像潮吹き講座潮吹きまんこ 掲示板潮吹き 人妻画像長崎 出会い長野 セックス長野 出会い掲示板鳥取 出会い島根 セックス島根 出会い掲示板東京都 出会い盗撮 マニア掲示板盗撮 画像無料盗撮 出会い盗撮 動画投稿動画無料DL童貞 サイト童貞 風俗童貞 出会い系サイト童貞 卒業支援徳島 出会い栃木 出会い奈良 出会い乳首 風俗乳首 画像掲示板乳首 女性乳首性感帯乳輪 動画爆乳 風俗爆乳 画像無料爆乳 人妻セックス爆乳娘 家出美少女 家出美少女 出会いサイト美少女 出会い攻略美少女 動画投稿美乳 彼女美乳 掲示板紹介美乳 少女出会い美乳娘 東京不倫 セックス体感不倫 愛知不倫 愛媛 出会い系不倫 岡山不倫 沖縄 出会い系不倫 岐阜不倫 宮崎 出会い系不倫 京都府不倫 熊本 出会い系不倫 掲示板不倫 香川不倫 高知 出会い系不倫 告白 体感不倫 埼玉不倫 三重 出会い系不倫 山口不倫 山梨 出会い系不倫 鹿児島不倫 秋田 出会い系不倫 新潟 出会い系不倫 青森不倫 静岡 出会い系不倫 千葉不倫 体感 告白不倫 大分不倫 長崎 出会い系不倫 鳥取不倫 島根 出会い系

    Répondre
Ajouter un nouveau commentaire