Intégration gabarits HTML

Mise en garde : Cette fonction est réservée aux personnes maitrisant le langage HTML.

L'assistance téléphonique gratuite ne pourra en aucun cas vous aider sur la création de votre page et les problèmes y étant liés.





Cette fonction permet de :

- créer des gabarits (pages HTML) pour personnaliser de façon poussée la charte graphique de votre site

- placer des pages institutionnelles en amont du catalogue, par exemple une page d'introduction avant la page d'accueil (liste des rayons), ...

- créer autant de pages supplémentaires que vous le désirez

 
Le répertoire où vous stockez vos fichiers s'appelle "site". Un chemin de navigation, inscrit en vert, présent sur la fonction "Intégration gabarits HTML" ( > "Apparence générale" ), vous indique à tout moment l'adresse où vous vous trouvez. Pour connaître à tout moment l'adresse d'un fichier (son URL), cliquez sur le fichier uploadé : une fenêtre s'ouvre qui l'affiche, et son URL apparaît dans la barre d'adresse du navigateur.

 


Construction de votre page

 
Construisez votre page HTML (via un éditeur HTML), de préférence en tableau.

Les images qui la composent seront classées dans un dossier créé sur votre disque dur.


Les codes dev

Nous vous avons facilité la tâche en mettant à votre disposition des codes DEV. Un code DEV est un ou plusieurs mots encadrés par des étoiles. Il permettent de faire appel aux parties dynamiques de votre site.

Vous placez les codes dev dans les cellules de votre tableau HTML.

Lorsque la page sera appliquée au site, les codes DEV seront interprétés et remplacées par les éléments dynamiques correspondant.

 

Pour bien comprendre le fonctionnement des codes DEV, nous vous conseillons de vous rendre dans la fonction "Intégration gabarits HTML" de la rubrique "Apparence générale" , d'ouvrir le fichier "exemple" mis à votre disposition en cliquant dessus pour constater l'emplacement des codes DEV sur cette page et de l'appliquer afin de comprendre comment les codes DEV ont été interprétés.

 

Voir la liste des codes DEV


Les liens internes

Pour tous les liens internes au site, vous pouvez aller chercher les URLs grâce à la fonction "Exports URLs du site" de la rubrique "Import/Export". En effet, en exportant cette base vous obtiendrez toutes les URLs de votre site.

 

Pour éviter d'avoir à retravailler vos liens lorsque le nom de domaine pointera sur le site, vous pouvez travailler en liens relatifs :

Vous constaterez en exportant vos URLs qu'elles contiennent toutes /boutique/

Il vous suffit de remplacer tout ce qui précède ce /boutique/ par 2 points (..)

Exemple :

../boutique/liste_rayons.cfm

 

Le chemin d'appel de vos médias (images, feuilles de style, ...)

Votre page va contenir des médias. Ces médias seront stockés dans un répertoire au même niveau que votre page sur votre disque dur.

Le chemin d'appel sera donc du type images/image1.jpg

Vous placerez dans la fonction "Intégration gabarits HTML" de la rubrique "Apparence générale", votre page et le répertoire de médias. Ils seront donc toujours au même niveau.

Par contre, lorsque vous allez appliquer votre gabarit à votre site, cela aura pour conséquence de changer le répertoire de votre page alors que le répertoire de vos médias restera dans le répertoire "site".

Vous devez donc veiller à ce que le chemin d'appel de vos médias ne soit pas images/image1.jpg mais plutôt  ../site/images/image1.jpg



Transfert de votre page sur le serveur

Une fois votre page créée, vous allez pouvoir la transférer dans l’espace FTP de la manière suivante :

 
1 - Allez dans "Intégration gabarits HTML"

2 - Cliquez sur "ajouter"

3 - Allez chercher votre page sur votre disque dur

4 - Cliquez sur « OK », votre page apparaît dans la liste des fichiers

5 - Cliquez sur "nouveau dossier", saisissez le nom de votre dossier images (à l’identique de celui dans lequel vous avez classé vos images sur votre disque dur), cliquez sur "OK". Votre dossier apparaît dans la liste.

6 - Cliquez sur votre dossier pour y entrer. Cliquez sur "ajouter". Allez chercher vos images sur votre disque dur par lot de 5.

7 - Lorsque vous avez intégré toutes les images composant votre page, cliquez sur la flèche verte pour revenir sur l’accueil de votre espace FTP

8 - Il vous faut à présent créer un alias sur votre dossier, de manière à indiquer le chemin pour récupérer les images de votre page. Pour ce, cochez la case à côté de votre dossier, cliquez sur Appliquer FR (même manipulation avec Appliquer US pour la version anglaise), et confirmez la création de l’alias. Votre dossier, jaune au départ, est devenu rouge, ce qui signifie que l’alias a été créé.


Application de votre gabarit au site

Maintenant, vous devez appliquer votre page au site de la façon suivante :

 
1 - Cocher la case à côté de votre page

2 - Cliquer sur Appliquer FR (ou Appliquer US pour la version anglaise), vous accédez à la liste des pages que vous pouvez personnaliser (la colonne gabarit vous indiquant le gabarit appliqué aux pages. Si vous n’avez pas appliqué de gabarit personnel, il y a la mention "défaut")

3 - Choisir sur quelles pages vous souhaitez appliquer le gabarit en cochant la ou les cases correspondantes (si toutes les pages, cocher "tous les fichiers (hors page d’intro)" ; si vous voulez que la page soit en amont du catalogue, il s’agit de la page d’introduction)

4 - Cliquer sur « OK » en bas de liste

Comment tester le gabarit avant de l'appliquer au site?

Vous avez la possibilité de tester votre gabarit en utilisant la fonction fichiers personnels ci-dessous :


Fichiers Personnels:

Cette fonction, présente en bas de la page "Import gabarits Fichiers FR" ou "Import gabarits Fichiers US", vous permet de créer autant de pages que vous le désirez. Elles devront être en .htm ou .html et seront transformées automatiquement en .cfm une fois intégrées en tant que fichiers personnels. Elles peuvent comporter des codes DEV qui seront remplacés par les modules dynamiques correspondants.

Cette fonction vous permet également de tester vos gabarits avant de les appliquer à votre site.
Comment utiliser cette fonction ?

Voici la procédure pour créer un fichier personnel :

1 - Créez votre page HTML et son dossier images (voir construction de votre page).

2 - Cochez la case à droite de votre page dans la fonction "Intégration gabarits HTML"
 
3 - Cliquez sur Appliquer FR ou Appliquer US (si vous avez une version anglaise).

4 - En bas de page, dans la partie "fichiers personnels", indiquez le nom de votre page, puis cliquez sur "ajouter".

 
Vous pouvez visualiser votre page en cliquant sur le fichier en .cfm ainsi créé.

Pour récupérer l'URL de cette page, visualisez la. La barre d'adresse indique l'url. Grâce à cette URL, vous pourrez créer un lien et intégrer la page à votre site.



Ce guide utilisateur a été réalisé avec PowerBoutique Présentation