Les instructions qui vont suivre vous donneront une idée sur la manière avec laquelle vous pouvez créer des sites Web attrayants en utilisant nos Interfaces Graphiques.

Etape 1 : Choisissez et sélectionnez l'Interface graphique qui vous plait
Dans cette première étape vous apprendrez comment rechercher et choisir une Interface Graphique qui convient au mieux à votre activité.

Etape 2 : Editez votre Interface Graphique
Cette étape vous donnera une idée sur la méthode pour adapter votre Interface Graphique à vos besoins les plus spécifiques.

Etape 1 : Choisissez et sélectionnez l'Interface Graphique qui vous plait
 

1. Allez sur la page d'accueil de Webjahiz.com.
2. Cliquez sur le thème ou la catégorie qui correspond le mieux à votre activité ou à celle de votre client.
3. Sur la page qui apparaît, vous pouvez voir les Interfaces Graphiques en plus grand en cliquant sur DÉTAILS.
4. Cliquez sur les images pour les prévisualiser.
5. Choisissez l'Interface Graphique qui répond à vos attentes et cliquez sur COMMANDER. Le paiement se fait par versement/virement bancaire, en espèces ou par carte de crédit internationale. Après la validation du paiement, automatique si paiement par carte de crédit et par fax en nous envoyant une copie de l'ordre de versement/virement dans le cas contraire, vous recevrez quelques minutes après par email le lien pour télécharger votre Interface Graphique au format compressé .ZIP.
6. Ouvrez l'archive avec WinZip.
7. Passez en revue les dossiers ouverts pour trouver ce qui suit:
   - Le répertoire FONTS qui contient les polices dont vous aurez besoin pour éditer le fichier source (.psd) de votre Interface Graphique,
   - Le répertoire HTML avec le fichier '"index.htm" et le répertoire des Images,
   - Le répertoire JPEG avec le fichier "template.jpg", qui est une image de votre Interface Graphique,
   - Le répertoire PSD avec le fichier "template.psd" qui vous permet de faire toutes les modifications au niveau de votre site Web,
   - Le répertoire LIBRARY contient la bibliothèque avancée de cliparts que vous pouvez utiliser pour donner à votre Interface Graphique un look unique.

Etape 2 : Modifiez votre Interface Graphique

1. Installation des nouvelles polices.
2. Modifier le nom de la compagnie.
3. Modifier les couleurs.
4. Insérer / Remplacer une image.
5. Découpe et exportation en HTML.

Installation des nouvelles polices.

1. Cliquez sur Démarrer => Paramètres => Panneau de Configuration.  Ensuite ouvrez le répertoire FONTS.
2. Cliquez sur Fichier => Installer une nouvelle police.
3. Sélectionnez l'emplacement des polices contenues dans le répertoire FONTS de votre Interface Graphique.
4. Cliquez sur Sélectionner Tout, puis sur OK.
5. Félicitations, vos nouvelles polices sont installées.

Modifier le nom de la compagnie.

1. Double-cliquez sur le fichier TEMPLATE.PSD pour l'ouvrir avec Photoshop.
2. Assurez-vous que la boite à outils et la boite d'options sont visibles. Si ce n'est pas le cas, Cliquez sur Windows => Outils & Fenêtres => Options afin de les afficher.
3. Votre Interface Graphique peut vous apparaître trop grande ou trop petite par rapport à votre résolution d'écran. Afin de l'ajuster, sélectionnez Zoom depuis la boite à outils puis choisissez recadrer la fenêtre et cliquez sur Pixels actuels.
4. Assurez-vous que les Layers sont visibles.
   Si ce n'est pas le cas, sélectionnez Windows => Layers pour les afficher.
5. Sélectionnez l'outil Déplacer , approchez le pointeur de la souris sur le mot  "COMPANY" et faites un clic droit dans son coin supérieur gauche. Choisissez COMPANY parmi la liste de layers qui apparaissent.
6. Assurez-vous d'avoir sélectionné le bon Layer avant d'y faire des modifications. Pour ce vérifier, cliquez sur l'icône EYE dans la fenêtre des layers, placé juste à gauche du claque, cela devrait normalement rendre votre Layer invisible. Si vous êtes sur le bon Layer, réactiver l'icône Eye pour le réafficher et modifiez son contenu.
7. Double-cliquez sur cela vous permettra de basculer vers l'outil Type et mettra votre texte en surbrillance. Maintenant, cliquez sur votre texte "COMPANY" sur l'Interface Graphique et remplacez le mot "COMPANY" par le nom de votre compagnie.
8. Accentuez le texte que vous avez juste dactylographié afin d'éditer la police, la taille, le modèle, et la couleur. Utilisez les boîtes drop-down dans la barre d'options pour changer la police en Arial, taille en 24pt, et modèle en italique "bold". Serrez alors le rectangle vert dans la barre d'options pour montrer le dialogue de couleur. Votre indicateur de souris se transforme en snippet.
9. Traînez le Layer avec le texte édité . Vous noterez que d'autres Layers se déplacent aussi en même temps. C'est parce que ces Layers sont liés. Vous pouvez voir quelles couches sont liées actuellement en cliquant sur l'icône de lien à gauche des Layers.

Modifier les couleurs.

1. Sélectionnez le layer dont vous voulez modifier les couleurs
2. Sélectionnez l'outil Paint.  
3. Sélectionnez une autre couleur, puis avec l'outil Paint , cliquez sur le layer sélectionné.
4. Le layer change alors intégralement de couleur tout en gardant ses autres paramètres.

Insérer / Remplacer une image.

1. Cliquez sur Fichier => Ouvrir et sélectionnez une photo.
2. Cliquez sur Image => Taille de l'image pour voir apparaître la fenêtre des dimensions.
3. Assurez-vous que la fonction "Conserver les proportions" est cochée pour ne pas déformer votre photo.
4. Entrez 120 en largeur et validez sur OK.
5. Ensuite Cliquez sur Select => Tout, puis Édition => Copier pour mettre votre photo en mémoire.
6. Quittez la fenêtre de votre photo sans sauvegarder les modifications.
7. Placez vous sur votre Interface Graphique et cliquez sur Édition => Coller. Un nouveau Layer contenant votre photo se crée automatiquement.
8. Cliquez droit sur ce nouveau Layer, choisissez l'outil Déplacer, puis déplacer votre photo à votre guise.

Découpe et exportation en HTML.

Dans cette étape vous apprendrez ce qu'est une découpe et comment la créer et l'éditer. Vous découperez l'image en tranches de psd afin qu'elle puisse être produite en HTML et ainsi vu sur un navigateur.

1. Choisissez l'outil de tranche et dessinez une boîte autour du bouton "COMPANY". Vous pouvez le redimensionner après création - Choisissez   pour sélectionner la tranche nécessaire et pour traîner des poignées.
2. Faites un Clic droit sur la tranche nouvellement créée. Dans le menu contextuel, choisissez Édition Slice Options. Dans cette nouvelle fenêtre Options Slice, placez-vous dans la case URL et mettez-y l'adresse URL de la page web correspondant à ce bouton et valider par OK.  Vous pouvez modifier l'URL plus tard.
3. Faites une autre tranche autour du texte sous la légende bienvenue. Vous remplacerez l'image dans cette tranche par le texte composé pour rendre le téléchargement de la page plus rapide.
4. Sélectionnez Fichier => Sauvegarder pour le Web pour afficher la fenêtre d'exportation. Choisissez les options d'optimisation des images à exporter. Cliquez seulement sur OK et spécifiez l'emplacement pour l'enregistrement.

Maintenant vous devrez travailler avec le fichier Html. Les étapes suivantes supposent que vous utilisez les éditeurs de HTML de Macromedia Dreamweaver 4,0. Dans d'autres éditeurs les endroits des commandes peuvent changer.

1. Ouvrez le html exporté avec Dreamweaver. Assurez-vous que le fenêtre de propriétés est visible, sinon choisissez Window>Properties pour l'afficher.
2. Cliquez sur le bouton COMPANY et examinez le contenu de la fenêtre propriétés. Vous pouvez éditez le champ du lien et ainsi changer l'URL.
3. Selectionnez Window => Code Inspector pour éditer le code  HTML. L'< img... > tag est automatiquement mis en surbrillance (elle apparaît comme suit: < IMG SRC="images/edited_TEMPLATE_07.jpg "WIDTH=424 HEIGHT=161 alt =" "> ). Remplacez ce tag par votre texte. Fermez l'éditeur de code. Servez-vous des options de formatage du texte dans la fenêtre de propriétés pour assortir l'aspect initial des textes aussi bon que vous pouvez.
4. Vous pouvez utiliser l'image "back.gif" présente dans le répertoire RESSOURCE comme fond pour cette cellule.
5. Sauvegardez votre travail et visionnez la page préalablement adaptée aux besoins du client en choisissant File => Preview in browser.