TUTORIEL JALBUM Voici une explication rapide, et j'espère suffisante, qui vous permettra, en utilisant le logiciel Web Creator (logiciel de création de site internet), d'insérer des galeries images du site JAlbum. Jalbum, qui est à mon avis le meilleur logiciel de création de galerie d'image. Dans un premier temps, il faut bien sur télécharger le logiciel, qui est gratuit, en fournissant quelques renseignements. Il faut bien sûr non seulement le logiciel Web Creator, mais aussi un site hébergeur (pour ma part j'ai choisit Nuxit, payant) mais il existe des hébergeurs gratuits qui se font payer par quelques pubs sur votre site avec une capacité de stokage assez réduite. Une fois que vous avez créé votre site : www.monsite.net, vous souhaitez insérer des galeries d'images de JAlbum. La langue de l'interface du logiciel JAlbum peut être changée dans les outils / fenêtre des Préférences.
Création d'une galerie d'image JAlbum : Lorsque vous créez votre site internet avec Web Creator, vous faites inévitablement un petit dossier dans votre disque dur ou vous rangez vos photos par thème. Et bien dans le thème «Montagne» vous allez créer un sous dossier nommé par exemple «Montagne JAlbum» (pour ma part cela sera «ACCUEIL» ou «PHOTOGRAPHIE» (en fait le liens d'ou vient les photos). Dans ce sous dossier vous allez mettre l'ensemble des photos «Montagne» modifiées pour le web (taille environ 900 pixels, 150 Dpi,etc...). Une fois votre petit dossier fait, vous allez pouvoir créer un album JAlbum que vous aurez préalablement nommé «Montagne» aussi pour si retrouver. Une fois que vous avez créé votre album en cliquant «créer l'album», vous pouvez le «Publier». Nous aurons en faite pas du tout besoin de les publier, nous allons nous contenter de le créer dans un sous sous dossier de «Montagne». Dans ce sous sous dossier des fichiers de votre galerie vont apparaître. Ces fichiers se nomment : res, slides, thumbs, album, help et index, etc... Nous reviendrons plus tard sur ces fichiers qui seront à insérer sur votre site : www.monsite.net, par le biais de FileZilla (logiciel gratuit). Mais agrémentons un peu notre galerie. L'avantage de JAlbum est de pouvoir créer une multitude de galeries différentes en appuyant «paramètres» dans l'onglet «Album». Tutoriel sur les paramètres du logiciel JAlbum : En cliquant sur «paramètres» vous voyez apparaître divers onglets tel que : Général, Pages, Avancées et Chameleon (si vous avez choisit chameleon comme skin). L'onglet Général : Il désigne votre album «Montagne», vous avez le titre de l'album et une image le représentant. En dessous vous avez votre lien avec votre dossier des images (dossier ou les images de montagnes sont traitées pour le web) et votre dossier de destination (dossier qui recueillera les fichiers res, slides, thumbs, album, help, index etc...utiles pour la création de votre galerie sur le net). L'onglet Pages : Comme son nom l'indique, il prépare votre image, rien de bien compliqué. (Pour ma part je n'y touche pas). L'onglet Images : En méthode de redimensionnement : Douce. Qualité des JPEG : 100%. Tailles des vignettes : 120x120. Tailles Images : 800x800 (tout en sachant que mes images sont déjà supérieurs en qualité sinon risque à la pixelisation, voir le dossier sur «la résolution d'une photo numérique»). L'onglet Avancées : Comme son nom l'indique, on avance et on y touche pas, sauf pour désactiver le mode progressif...
Et enfin l'onglet Chameleon : Dans cet onglet, on aperçoit cette boite de dialogue :
Tutoriel sur l'onglet Chameleon : 1- L'onglet Général : Vous pouvez ajouter des liens de votre album pour différentes langues en cliquant un par un sur chaque langue de la liste. (Cependant pour une galerie de photo peut d'intérêt sauf si vous les commenter) Paramètres multilingue : permet de mettre un repère sur la page qui sera nommé index, soit en haut ou en bas cette dernière. Repère "Texte à afficher" cliquez. Vous pouvez définir une de langue qui sera généré sur chaque page. Utilisez le code pays à 2 lettres séparés par des virgules, par exemple: FR (France), DE (Allemagne), IT (Italie)... Sur l'album, il sera affiché sur la page d'index en tant que "Anglais» «Italiano» «Deutsch», tet par les abréviations,: «fr» «de» «it». Lien vers la page principale : Vous avez la possibilité de mettre un bouton. Defaut : (default) Nom : (vide) Lien : (vide) Ensuite le reste vous y touchez pas. 2- L'onglet Design : Sous-Style : Si la case est grisée, c'est qu'il n'y a pas sous-tyle définit pour le moment. Aller à la page d'accueil Chameleon pour trouver davantage de sous-styles. Police, Taille, : C'est la police d'écriture de la gallerie (taille : 12). Ensuite le reste vous y touchez pas.
3- L'onglet Informations sur l'album : Cet onglet permet d'afficher les informations au bas de la page principal de la galerie, comme diverses données et liens utiles. Voir dans la table : Les informations sont affichées au de la page (regroupés avec les autres éléments placés au fond) ou détachés de la table et sans le cadre autour. (laissez cocher) Inclure l'aide pour la navigation : Vous pouvez inclure l'aide à la navigation sur la page ou en utilisant une fenêtre popup. Si vous choisissez la page seul une courte explication des raccourcis par keybord sera affiché, à défaut la fenêtre pop-up affichera une aide complète sur l'utilisation des boutons et des liens. (pour ma part : Name : ACCUEIL, Lien : http://www.monsite.net/acceuil.html) (lien de l'acceuil de votre site, j'insiste bien.) Ouvrir le lien dans une nouvelle fenêtre : (pour ma part décoché). Afficher le nombre total d'images : Affiche le nombre total d'images d'albums dans le dossier «Montagne». (laissez cocher). Voir la dernière mise à jour : décochez la case car peu d'utilité, la mis à jour peut être écrite sur la page d'accueil de votre site internet.
Liens personnalisés : Vous pouvez avoir deux liens personnalisés sur chaque page. Il suffit de laisser cette cases vides si vous n'avez pas besoin d'eux. (Très utile si on a des sous répertoire par exemple : Montagne France Pyrénée... ou pour y inclure un livre d'or, seulement on est limité à deux, dommage. 4- L'onglet Informations sur l'album : Inclure un diaporama : Comme son nom l'indique, on peut effectuer un diaporama. Les visiteurs peuvent également modifier le temps de retard en double cliquant sur le diaporama bouton «start» et en entrant une valeur différente. La deuxième option est d'utiliser ce bouton pour accéder à slidepages et lancer le diaporama, voir passer à la pages diapositive pages. (laissez la cocher, sinon pas de présentation de la galerie) Aller directement aux diapositive : Le diaporama va commencer avec la première image. Le retard et les paramètres de boucle sera prise à partir des paramètres sur l'onglet Diaporama. (laissez cocher). Transition entre les pages : Effet de transition entre les images. Il s'affiche uniquement avec le
navigateur Internet Explorer. (A décocher). Liste numérotée : Choisissez si vous voulez une page numéroté en haut ou en bas. Ressemblant à ceci : Page 1 2 3 4 5 6 7 8 9 >» (bas et nombre : 10) Commentaires des dossiers : Des commentaires peuvent être ajoutés aux images. (cliquez : haut) Mise en valeur d'image : Vous pouvez avoir une image affichée en grand format pour chaque dossier. Omettre Haut gauche droite, la position de l'image par rapport à la vignette table. Omettre = pas d'image. (Laissez comme tel). Ensuite le reste vous y touchez pas. 5- L'onglet Informations sur l'album :
Arrière plan : Contrôle le type d'arrière plan derrière les vignettes. «Aucun» : pas de fond, «Graphic» : Si vous spécifiez plus grande que les vignettes 120x120px allez sur Paramètres / Images / boîte miniature. L'arrière-plan simple sera utilisé à la place du graphique, parce que le graphique de type glisser-montage ne peut pas être élargie, «Simple» : fond plat et de forme carré. (pour ma part arrière plan : simple). Effet de dégradé de gris : Cette option vous permet de faire des vignettes en niveaux de gris qui changent de couleur à lorsque vous vous déplacez à la souris. Cet effet ne fonctionne que dans Internet Explorer. ( pour ma part : décoché) largeur de cadre : Si vous choisissez d'arrière-plan simple pour les vignettes, vous pouvez également contrôler la largeur du cadre ici. (pour ma part : 12px ) Espace : C'est l'espace entre les vignettes. (pour ma part : 10px) Afficher le titre de la vignette : Cochez la case si vous avez un titre de la photo. (pour ma part : décoché) Grandes vignettes pour les dossiers, Forcer les liens vers les dossiers vides et bordures : pour ma part case décochés et bordure 1px, gris (#aaaaa et #e5e5e5). Texte à afficher : «Autres fichiers» : Numéro, le titre du fichier, un commentaire, le nom de fichier, date, etc... affiche les informations que vous souhaitez voir dessous l'image. «Dossiers» : - Le titre est le nom personnalisé affiché par défaut. Vous pouvez l'éditer en double-cliquant sur le dossier (ou clic droit + Propriétés). Si aucun titre trouvé, le nom du dossier sera affiché à la place. (pour ma part : décoché). - Description : Vous pouvez également joindre des commentaires très longs à chaque dossier. Ce texte peut contenir des balises HTML.(pour ma part : décoché). - Nombre d'images dans les dossiers : (pour ma part : coché). Bas : Endroit qui permet de contrôler l'alignement du texte des aux vignettes. Attention toutefois aux alignements avec la largeur des vignettes. (laissé par défaut) Utiliser le nom en l'absence de commentaire : Utilisez le titre de la photo si aucun commentaire n'est fait. (pour ma part : décoché). Tronquer tout commentaire de longueur supérieur à caractères : (pour ma part : décoché).
6- Page de diapositives : Inclure un diaporama : Diaporama automatique soit en cliquant la photo ou la barre d'espace. Le diaporama peut également commencé par sur la page d'index avec un temps de retard.(pour ma part : cochés). Transition entre les pages : Fonctionne que sur internet explorer (pour ma part : décoché). Liens vers Jalbum/Chameleon : Vous pouvez choisir le type de liens des produits (Texte ou Bouton), ou de les omettre dans les pages de diapositives.(pour ma part : bouton). Liste numéroté : Pour numéroté l'image quand on la visionne. (pour ma part : haut). Afficher les vignettes : Affichage des vignettes à venir sur le côté ou en haut. (pour ma part : nombre 5 et taille 55px). Média : Présence d'un film : diaporama. (pour ma part : décoché). Jouer l'annotation vocale : (pour ma part : décoché).
7- Images : Ajuster l'image au navigateur : Vous pouvez indiquer ici si l'image sur la page doit remplir la fenêtre du navigateur.(pour ma part : aucun, car sinon image déformée et risque de pixelisation). * Zoom: Agrandissant l'image. * Réduction de la taille: Redimensionner l'image si elle est plus grande que la fenêtre du navigateur * Les deux: va redimensionner l'image dans les deux sens Navigation des images : Vous pouvez naviguer à travers les pages en cliquant simplement sur les parties de l'image principale. * Aucune: aucune carte de navigation sera généré * Précédente Suivante: uniquement des liens vers la page suivante et précédente * Précédent Suivant: Image possède un lien pour revenir à la page d'index (ou d'acceuil si on l'a choisit). (pour ma part : précédente/suivante). Open original in new window : Ouvre une nouvelle fenêtre lorsque vous cliquez sur l'icône de téléchargement ou en bas de la navigation l'image de zone médiane. (pour ma part : décoché).
Protection contre la copie : Protège les images des clics droit ou drag & drop, sur le disque. Cependant, il n'y a pas de protection efficace pour les images affichées dans une fenêtre de navigateur. Les visiteurs peuvent facilement faire une capture d'écran, par exemple. Utilisez le filtre filigrane pour protéger vos images. La taille des pixels utilisée relativement faible dans les galeries les rend également attrayant pour voler.(pour ma part : coché). Icône de téléchargement : Vous pouvez désactiver l'icône de téléchargement si elle n'est pas nécessaire. Il ne sera pas affichée de toute façon quand "Enregistrer l'image sous la protection" est sélectionné. Si vous sélectionnez "Lien vers les images à échelle réduite cette icône sera affiché avec l'image "Original".(pour ma part : décoché). Afficher le titre de l'image : A désactiver. (pour ma part : décoché). Bordure : Vous pouvez appliquer une bordures à vos images. (pour ma part : 0 px). Texte à afficher : Vous pouvez contrôler le lieu de l'information textuelle par rapport à l'image principale.(pour ma part : bas et décoché). 8- Méta-données :
Vous pouvez choisir le type et la position de méta-données à afficher. L'utilisation de ces domaines exige JAlbum être activé pour extraire ces domaines - vous pouvez le contrôler avec Paramètres / Avancé / Metadata. Vous pouvez regrouper les activer / désactiver par les cases sur le dessus. Afficher le nom des Méta-données : Vous pouvez omettre l'étiquette de tous les champs de métadonnées avec cette option. Peut être déroutant avec les champs numériques, comme l'iso, ouverture, focale, etc, mais il peut être pratique lorsque vous souhaitez afficher uniquement certains domaines sélectionnés, tels que Iptc.Headline et Exif.Date.(pour ma part : bas et coché). Ne faire que récupérer les méta-données : Quand vous n'êtes pas sûr de ce que sont les champs de métadonnées extraites par Jalbum cocher cette case, et vous verrez tous les champs au bas des pages se positionner exactement comme Jalbumm les voit. Il peut être utile lorsque vous définissez XMP comme champs à afficher. Pour les albums final ne pas oublier de l'éteindre.(pour ma part : décoché). EXIF : Cocher ce que vous souhaitez voir apparaître mais attention à ne pas en mettre trop, car vous serez obligé de réduire la hauteur de vos photos au risque de sortir de l'écran. XMP : Champs XMP sont une énorme collection de champs de métadonnées, définies par Adobe Corp. Vous pouvez ajouter autant de champs que vous voulez ici, divisé par des virgules. Vous pouvez également changer l'ordre des champs sont affichées. Si vous êtes dans le doute les champs qui sont inclus dans vos images utiliser la fonction de dépisteur des métadonnées.(pour ma part : coché). IPTC : Les données IPTC commentent les commentaires inscrit.(pour ma part : coché). DONNEES XP : Windows XP peut également joindre des fichiers à différents domaines. Vous pouvez ajouter cette information en droit-cliquant dessus dans l'explorateur Windows et en choisissant les propriétés / onglet Résumé.(pour ma part : décoché). DONNEES GPS : Les images peuvent contenir des données GPS (coordonnées géographiques) aussi, a ajouté ce soit par votre appareil photo ou manuellement.(pour ma part : décoché). CARTE : Si vous avez des données GPS a été ajoutée à vos images, vous pouvez avoir un lien vers Google Maps pour montrer la place de la photo a été prise directement sur la carte. Si aucune coordonnées GPS trouvée, mais les Iptc.Location ou Iptc.City / Les données par pays est disponible, le lien sera généré avec ces tags. (Par exemple: Paris, France).(pour ma part : décoché). Le type peut être : Plan d'accès, Photo satellite, Hybride est une combinaison des deux premiers, Terrain est une carte topographique Le niveau de zoom de contrôle de l'élargissement de la carte générée. Utilisez 4 pour tout un continent 8 pour un petit pays 12 pour une grande ville et 16 pour carte de rue. Vous pouvez ouvrir la carte dans une nouvelle fenêtre en cochant la «ouvrir le lien dans une nouvelle fenêtre». 9- Filtres : Laissez par défaut, il s'agit d'apporter plus d'option aux vignettes et diapositives, notamment la forme, le zoom, le filigrane ou logo. Utile si vous avez ce genre d'option à apporter.(pour ma part : tout décoché et rien rempli). Grayscale Grayscale + ColorMap ColorMap
10- Livre d'or :
L'option Livre d'or ajoute une fonctionnalité simple commentaire visiteurs basé sur Flash avec possibilité de notation. Remarque : * Le livre d'or ne fonctionne pas à partir du disque local, mais uniquement à partir d'un serveur. Donc vous pouvez voir le livre d'or, mais il ne sera pas sauvegardé. * Pour être en mesure d'ajouter des entrées sur un serveur dans le dossier livre d'or / doivent être en écriture activée. - Ou le changer avec un client FTP (par exemple, un clic droit sur Propriétés propriétaire / groupe / public - Lecture / écriture / exécution: Oui). * Si votre site est hébergé sur un serveur Microsoft Windows serveur IIS doit être configuré correctement pour faire fonctionner le livre d'or. Allez à l'onglet Répertoire pour le site web de configuration, puis sélectionnez. Faites défiler jusqu'à l'extension. PHP et assurez-vous que le chemin de l'exe PHP est comme ça "C: \ Program Files \ PHP \ php-cgi.exe" pas le c: \ progra ~ 1 etc que l'installateur utilise PHP - il ne fonctionne pas. Page d'index : Omettre - pas de livre d'or sera ajouté à la page, haut - le livre d'or sera ajouté audessus des vignettes sur la page d'index et au-dessus de l'image principale à la page de diapositives, Bas - le livre d'or est ajoutée à la base. (pour ma part : omettre). Page de diapositives : La taille du livre d'or en pixels. Par défaut il est 60px plus étroite que la largeur de l'image.(pour ma part : bas, taille 740x140) Taille : police 10 Couleur de surbrillance : La couleur des commentaires est le même que la couleur de la page de base du texte, mais vous pouvez avoir n'importe quelle couleur pour le nom d'utilisateur et le classement. Nombre d'entrées par pages : Par défaut, 20 entrées sont affichées sur une seule page, mais vous pouvez faire le nombre plus élevé ici mais 100 pourrait ralentir le chargement de la page.(pour ma part : 10 messages). Trier par ordre croissant : Vous pouvez choisir d'afficher les messages dans l'ordre croissant (premier message en haut) ou descendant (dernier message le haut).(pour ma part : coché). Notification par mail : Souhaitez-vous savoir si quelqu'un a posté un nouveau message? Activez cette option, remplissez le champ Adresse e-mail, et vous recevrez une notification par e-mail chaque fois qu'un visiteur ajoute un nouveau commentaire.(pour ma part : ajouter une adresse mail). Notez que le lien vers le fichier dans l'e-mail ne fonctionne que si vous avez utilisé que des caractères alphanumériques [AZ, az,0-9,'-'] dans le dossier et les noms de fichiers. C'est parce que le fichier livre d'or a déjà été filtrée pour les caractères non-web en toute sécurité, et ce n'est pas toujours possible de reconstituer la trajectoire d'origine de cette.
11- En tête/pied de Page :(pour ma part : laissé par défaut et passer au chapitre 11) Ce panneau vous permet d'ajouter du code personnalisé pour générer les albums. L'en-tête est placé sous le contrôle, le pied est au bas de chaque page. Vous pouvez utiliser le texte et le code HTML ici, mais pas une page HTML complet. Vous pouvez avoir différents en-tête et pied de page de contenu pour l'index et la page des diapositives. La méthode traditionnelle d'ajouter header.inc et footer.inc dans l'album ou le dossier d'image fonctionne toujours, et le contenu de ces fichiers sont lieu après ce code. Choisir cette option, le code sera inséré que dans la page d'index de niveau supérieur. Exemples: Le texte simple: Appuyez sur F11 <b> </ b> afin de maximiser la fenêtre du navigateur! <b>...</ b> signifie que le texte en gras. Lien externe: <a href="http://mysite.com/index.html"> Cliquez ici pour visiter mon site! </ a> <a href="">...</ a>, un lien.
Texte mis en forme: <p style="font-size:90%; color:red; background-color:#000088;"> texte rouge sur fond bleu </ P> Vous pouvez utiliser CSS de mise en forme par exemple attaché à <div> <span> ou <p>. La couleur peut être nommé ou trop hexagonale. L'insertion de votre logo: <img src="$respath/logo.gif" alt="logo" /> logo.gif Sauver dans JAlbum / skins / Chameleon / dossier res, et le fichier de logo seront copiés sur chaque album que vous faites avec JAlbum / Chameleon. respath $ désigne le chemin de la résolution de l'album dossier dans l'album généré. 12- Vente de photo :
Cette fonctionnalité permet de faire des paiements par Paypal. Vous avez besoin de PayPal Premier ou Business compte afin d'être en mesure de recevoir les paiements. Pour autant que je sais que vous pouvez recevoir aussi un nombre limité de paiements avec un compte personnel, mais ce n'est pas vraiment approprié pour un usage avancé. Ajouter l'achat via Paypal : Omettre - Pas de fonction achats seront ajoutés, Début de page - Shopping panneau est placé au-dessus de l'image principale, Bas - ou en dessous. (pour ma part : omettre). Type : * En ligne - Les options d'achats seront placés l'un après l'autre en une seule ligne, et représentés sous forme de boutons radio. Le visiteur choisira une option d'achat, et seulement après il ajoutera l'article à votre panier. * Ligne Multi - Chaque option d'achat est placé dans une ligne séparée avec un dédié "Ajouter au panier". Meilleure qualité pour les options d'achats plus ou étiquettes long. * Custom - Pour les utilisateurs avancés. Vous pouvez avoir autant d'options que de nombreux commerces vous définissez dans le fichier de configuration. Assurez-vous de définir les prix et les champs de livraison des commerces. Vous pouvez également définir une deuxième boîte options. Le fichier peut être trouvé ici: à partir de Jalbum, Outils / répertoires Open / changer de répertoire pour la peau comprend dossier et ouvrez le fichier avec le Bloc-notes paypal_c.inc. Hint, adresse e-mail Paypal et monétaire sera prise en charge de l'interface utilisateur si elles sont vides dans le fichier. Devise : Le code 3-lettre de la monnaie dans laquelle vous voulez récolter de l'argent. Voir la configuration de votre Paypal! Vous devez avoir cette monnaie ouverte à profil Paypal. Ne pas utiliser $, ou ici, seul le code à 3 lettres: USD, GBP, EUR, etc Options d'achat : Les options d'achats différents. Vous pouvez ajouter 1 à 6 options différentes. Étiquetter le nom de l'option d'achat, comme 10x15 «d'impression». Le nom du fichier donné apparaîtra également automatiquement sur la facture Paypal. Prix Le prix indiqué dans la monnaie spécifiée. Vous n'avez pas besoin d'ajouter le symbole monétaire ou une abréviation, ce sera automatiquement joint. Les frais de port sont ajoutés par article. Si vous le laissez vide les paramètres de port dans votre profil Paypal sera appliquée. (Par défaut, aucun frais de port est ajouté.) Si vous définissez il '0.00 'aucune expédition seront ajoutés, même si elle a été définie différemment dans le profil de Paypal. Cette taxe est utile pour les articles nécessitent un traitement-poste spéciaux, comme des objets volumineux. Identifiant : La forme courte qui identifie ce point, comme 10x15P. Utilisé par Paypal. Vous pouvez laisser ce champ vide. Utilisez la quantité :Vous pouvez également ajouter une zone de quantité. Si vous décochez la case "Ajouter au panier" sera toujours ajouter 1 de l'article en question, mais plus tard dans le panier Paypal panier les acheteurs peuvent le modifier. Utilisez la liste déroulante : Sélectionnez la case est une autre possibilité d'affiner les options de vente s'affichera. Par exemple, vous pouvez l'utiliser pour permettre aux utilisateurs de sélectionner le modèle de couleur de la photo actuelle: "Couleur", "B & W", "Sépia" ou laissez-les choisir la taille: "S", "M", "L", "XL»,«XXL». Ajouter l'étiquette dans la case vide, et appuyez sur le bouton Ajouter. Vous pouvez vérifier l'encadré à droite de la touche plus. Si vous souhaitez supprimer l'option suffit de le sélectionner et appuyez sur le bouton "Supprimer".
Tutoriel pour insérer la galerie sur un site internet créé par Web Creator : Nous avons donc créer une galerie et nous avons dans un dossiers les fichiers : res, slides, thumbs, album, help et index, etc... Nous avons aussi créer notre site internet ou nous avons mis les grands titres tel que : ACCUEIL, PHOTOGRAPHIE, REPORTAGE, BIOGRAPHIE, NOUVEAUTE, etc Nous allons créer une galerie pour l'onglet NOUVEAUTE qui sera la base de toutes les autres créations de galerie sur le site internet. Sur Web Creator nous avons d'abord créé une page de garde (index.html) puis en cliquant dessus nous arrivons à l'accueil. Sur cette dernière sont inventoriés une arborescence d'onglet qui conduise chacune à une gallerie. Nous devons créer une page nommé «nouveaute» à l'onglet NOUVEAUTE. Cette page créé nous pouvons la laissez vide (le but est de la créer et de la joindre avec un bouton lien entre l'onglet et la page «nouveaute». Notre site est maintenant sur internet en s'aidant de FileZilla (il se trouve dans les Fichiers distants). Pour installer la mise en page Web Creator de notre disque dur sur un hébergeur (voir Tutoriel FileZilla). Notre disque dur est localisé sur le Site Locale (Arborescence locale). Etapes : 1- Nous allons chercher dans «les fichiers distants» le fichier «nouveaute» et nous supprimons l'intégralité de son contenu. Maintenant le fichier «nouveaute» est vide. 2- Nous allons dans l'arborescence locale et nous cherchons le dossier ou se trouve les fichiers : res, slides, thumbs, album, help et index, etc... 3- Nous remarquons que lorsqu'on «clic» juste sur le dossier, nous constatons le détail dans les fichiers locaux. Nous sélectionnons l'ensemble de ces fichiers : res, slides, thumbs, album, help et index, etc... et nous les faisons glisser dans le fichier vide de «nouveaute» qui se trouve dans «les fichiers distants»
4- Nous remarquons dans le dossier «nouveaute» un fichier nommé «index.html», c'est la première page web de notre galerie. Pour qu'elle se lie avec notre site Web Creator, il faut la renommer «nouveaute.html». 5- Vous retournez dans les fichiers locaux et vous selectionnez à nouveau le fichier «index.html», que vous faites glisser dans le dossier «nouveaute». Voilà dans le dossier «nouveaute» vous avez tous les fichiers de JAlbum, ainsi que «nouveaute.html» (fait le lien entre le site et la galerie créé par JAlbum) et index.html (fait le lien entre les photos JAlbum et sa galerie).