Sunteți pe pagina 1din 112

DITION JUILLET 2014

Manuel dutilisation WebAcappella 4 Juillet 2014

SIMPLIFIEZ-VOUS LE WEB AVEC LE

MANUEL DUTILISATION

WEBACAPPELLA 4

Copyright Intuisphere - Tous droits rservs

Manuel dutilisation WebAcappella 4 Juillet 2014

Copyright Intuisphere - Tous droits rservs

Manuel dutilisation WebAcappella 4 Juillet 2014

TABLE DES MATIERES


AVANT PROPOS

GUIDE DE DMARRAGE RAPIDE

PREMIRE MISE EN SERVICE


CRATION DES PAGES
CRATION DE MAQUETTES
TESTS ET PRPARATION AVANT MISE EN LIGNE
Tester votre site
Prparation avant la mise en ligne : rfrencement
PUBLICATION & SAUVEGARDE
Configuration de la publication
Publication
Sauvegarde
INTRODUCTION
CRER UN PROJET
CONFIGURER LA PUBLICATION DE VOTRE SITE
Proprits gnrales de la publication
Base de donnes
Personnaliser lenvoi des mails
AIDE LA PUBLICATION
Publication interrompue
Changements non pris en compte
Il manque des lments
La publication ne dmarre pas
La publication est bloque sur le premier fichier
BIEN CHOISIR SON HBERGEMENT
Gnralits
Bien choisir son hbergeur
Les diffrents types dhbergement
PUBLIER VOTRE SITE MANUELLEMENT EN UTILISANT UN LOGICIEL FTP
PRREQUIS TECHNIQUES
E-commerce
Blog
Formulaire de contact
LIMITATIONS DE LA VERSION GRATUITE
LIMITES DUTILISATION SUR CERTAINS NAVIGATEURS INTERNET
IMPORTER VOS SITES WEBACAPPELLA 3 DANS WEBACAPPELLA 4
QUESTIONS FRQUENTES
Installation
Cration
Publication

Copyright Intuisphere - Tous droits rservs

8
8
9
10
10
10
11
11
11
12
14
14
14
15
16
16
17
17
18
18
18
18
19
19
19
19
20
21
21
21
21
22
22
22
23
23
23
24

Manuel dutilisation WebAcappella 4 Juillet 2014


LESPACE DE TRAVAIL DANS WEBACAPPELLA
LINTERFACE DE WEBCAPPELLA
La barre des icnes
Lexplorateur de pages et de maquettes
Les rgles
Le plan de travail
Explorateur de calques
Linspecteur dlments
LES FONDAMENTAUX
Slectionner et dplacer un lment
Redimensionnement et rotation
Copier, couper, coller et dupliquer
Alignement
Superposition
Annuler une modification
Sauvegarder votre travail
Crer une archive de sauvegarde de votre site
Rcuprer votre site depuis une sauvegarde WebAcappella
Affichage de la page
Ajouter une page
Crer des liens internet
Tester votre site
Publier votre site
Visiter votre site
POUR ALLER PLUS LOIN
Organisation des pages
Les maquettes
Les calques
Les pieds de page
La barre de multilangage
GESTION DES RESSOURCES DE VOTRE SITE
Bibliothque des fichiers de votre site
Bibliothque des images de votre site
LES LMENTS DE VOTRE PAGE
Proprits gnrales des lments
Les lments
PARAMTRAGES
PRFRENCES DE WEBACAPPELLA
Prfrences gnrales
Prfrences des images de votre site
Navigateur internet de votre site
Langue de lapplication
Grille magntique

Copyright Intuisphere - Tous droits rservs

27
27
27
28
28
29
29
30
31
31
32
33
34
34
35
35
36
37
38
38
38
40
40
41
41
41
42
43
44
45
46
46
47
47
47
50
72
72
72
72
74
74
75

Manuel dutilisation WebAcappella 4 Juillet 2014


PROPRITS DU SITE WEB
Rfrencement SEO
Activer et utiliser le multilangage
Grer la protection de vos pages
Fonctions avances des proprits du site web
Rglages Apache
PROPRITS DE LA PAGE
Rfrencement de la page SEO
Arrire plan et taille de la page
Protection de la page
Activer le multilangage sur les page
Options avances de la page
FONCTIONNALITS AVANCES
Rafrachir votre site
Importer un dossier de site WebAcappella (version 3 ou 4)
Fentres de dialogue du site
Gestionnaire despace web
Harmonie des couleurs
Outil de traduction
E-COMMERCE
INSTALLATION DU E-COMMERCE
LES OPTIONS AVANCES
LINTERFACE DE VOTRE BOUTIQUE DANS WEBACAPPELLA
Composant Produits
Composant Panier
Composant Compte client
Composant Devise
LOUTIL EXPORT / IMPORT
LA CONSOLE DADMINISTRATION DE VOTRE BOUTIQUE
PRSENTATION DE LINTERFACE

Copyright Intuisphere - Tous droits rservs

75
76
78
80
81
82
83
83
84
85
86
86
87
87
87
88
88
89
90
95
97
99
100
101
104
104
105
105
108
108

Manuel dutilisation WebAcappella 4 Juillet 2014

Copyright Intuisphere - Tous droits rservs

Manuel dutilisation WebAcappella 4 Juillet 2014

AVANT PROPOS
BIENVENUE DANS LUNIVERS WEBACAPPELLA
Merci d'avoir choisi WebAcappella !
Bienvenue dans le manuel dutilisation de WebAcappella.
Des tutos et des astuces sont galement disponibles sur le site de WebAcappella,
rubrique Aide ou sur notre blog www.blogwebacappella.fr.
Nous vous souhaitons une agrable cration de site !

Copyright Intuisphere - Tous droits rservs

Manuel dutilisation WebAcappella 4 Juillet 2014

GUIDE DE DMARRAGE

RAPIDE

Copyright Intuisphere - Tous droits rservs

Manuel dutilisation WebAcappella 4 Juillet 2014

GUIDE DE DMARRAGE RAPIDE


VOTRE PREMIER SITE WEBACAPPELLA EN 5 TAPES

PREMIRE MISE EN SERVICE


Au premier dmarrage, WebAcappella
vous demande de crer un nouveau
projet Web, puis de lui attribuer un nom.
Ceci vous permettra d'identifier votre
site, de pouvoir le stocker et de le
retrouver chaque ouverture du logiciel.
Un accs au guide de dmarrage rapide
vous est galement propos.
Une fois le nom attribu, vous pouvez
choisir un modle de site parmi ceux
proposs.
Remplacez ensuite les lments graphiques et textuels par votre propre contenu.

Vous pouvez crer votre site de A Z en


cliquant sur site vide en bas de la liste
des modles.
Vous tes prts crer la premire page
de votre site !

CRATION DES PAGES


Aprs avoir cliqu sur site vide vous arrivez directement en mode cration de pages.
Commencez par dterminer les proprits de la page.
A partir du menu Pages / maquettes slectionnez Proprits de la page .

Cliquez sur l'onglet Fond de la fentre qui s'ouvre :

Copyright Intuisphere - Tous droits rservs

Manuel dutilisation WebAcappella 4 Juillet 2014


- Taille du plan de travail : vous pouvez modifier en hauteur et en largeur les dimensions
de la zone de travail o seront placs les lments de la page (taille standard par
dfaut). Ces dimensions correspondent galement celles des pages du site.
- Couleur ou image d'arrire plan : slectionnez une couleur ou une image pour l'arrire
plan de votre page.

Avec WebAcappella, vous choisissez librement les lments ajouter ainsi que leurs
emplacements.
Utilisez le menu Insertion pour ajouter des lments sur votre page (images, zones
de textes, boutons, menus...).
Tous les lments sont personnalisables via leur inspecteur de proprits (dimensions,
bordures, liens...).
Ajoutez de nouvelles pages que vous pouvez renommer comme vous le souhaitez.
Puis, crez simplement des liens entre les pages partir de boutons ou de menus pour
la navigation dans votre site.
Certaines fonctionnalits sont accessibles avec les versions payantes en savoir plus ...

CRATION DE MAQUETTES
Pour commencer la cration d'un site, l'utilisation de maquettes est fortement
recommande afin de pouvoir appliquer un style visuel uniforme sur lensemble des
pages du site. Une maquette est ainsi compose des lments rcurrents : bandeau,
menu(s) de navigation, couleur de fond, logo... Le contenu (textes, photos...) sera plac
dans les diffrentes pages.
Pour effectuer des changements, il suffit de modifier la maquette.
Les changements seront effectifs sur toutes les pages utilisant une mme maquette.
Copyright Intuisphere - Tous droits rservs

Manuel dutilisation WebAcappella 4 Juillet 2014

Pour crer une maquette, cliquez sur licne


de l'explorateur de maquettes,
gauche de l'cran. Une nouvelle page vide sajoute dans l'explorateur de maquettes.

Crez votre maquette comme une page (voir


cration des pages). Elle peut se composer dimages,
de zones de couleur, de menus, de boutons...

Une fois votre maquette cre, vous pouvez lappliquer vos pages.
Allez dans l'explorateur de pages. Dans la page en
cration, affichez les proprits de la page. Dans
longlet Arrire plan cochez la case Utiliser une
maquette comme arrire plan .
Slectionnez ensuite votre maquette et cliquez sur
OK .
Note : Les lments d'une maquette ne sont pas modifiables directement sur les
pages, mais dans les maquettes.

TESTS ET PRPARATION AVANT MISE EN LIGNE


Tester votre site
Ce que vous crez dans WebAcappella donnera exactement le mme rsultat une fois
en ligne.
Testez le rsultat de votre travail en le visualisant sur votre navigateur
Internet.
Cliquez sur le bouton Tester de la barre d'outils, votre navigateur Internet
prfr va ouvrir votre page.

Prparation avant la mise en ligne : rfrencement


Un bon rfrencement permet une bonne visibilit de votre site Web sur Internet. Il est
pris en compte pour l'affichage des rsultats dans les moteurs de recherche.
Le rfrencement de votre site se fait via les proprits de votre site Web et via les
proprits de la page (onglet SEO ). Pour un rfrencement optimal, remplissez les
champs consacrs au rfrencement page par page.

Copyright Intuisphere - Tous droits rservs

10

Manuel dutilisation WebAcappella 4 Juillet 2014


Slectionnez le menu Page/Maquette - Proprits de la page .
Indiquez les informations suivantes :
- Nom de la page : il s'agit du texte qui apparat dans l'adresse de votre site. Indiquez le
nom de votre choix (Par exemple : la page contact, dans l'adresse internet donnera
http://www.webacappella.com/contact.html). Ne pas mettre despaces ou de caractres
spciaux. Note : seul le nom de la page daccueil (index.html) de votre site ne pourra
tre modifi.
- Titre de la page : il s'agit du texte qui apparat en haut de l'interface du navigateur
Internet.
- Mots cls : utiliss par les moteurs de recherche, ils rsument le contenu de votre
page.
- Description de la page : il s'agit du texte qui apparat dans les moteurs de recherche
pour dcrire une page web.

PUBLICATION & SAUVEGARDE


Configuration de la publication
Allez dans le menu Fichiers - Paramtres de publication .
1 - Compltez les champs requis pour la publication de votre site sur Internet (tels le
serveur, le nom d'utilisateur, le mot de passe, le dossier FTP distant en mode manuel
ils vous ont t communiqus par votre hbergeur ou choisis par vous).
2 - Testez la connexion afin de vrifier vos paramtres (si vous avez bien suivi le point
prcdent tout doit se passer correctement).
Il faut prendre en compte un dlai d'activation de plus ou moins 24 heures suivant
l'hbergeur.

Publication
Il ne vous reste plus qu' publier votre site (c'est dire l'envoyer chez votre hbergeur).
Cliquez sur l'icne Publier de la barre d'outils. Si vous avez rempli correctement les
informations concernant votre espace d'hbergement, la publication se fera
automatiquement. Votre site sera transfr plus ou moins vite selon sa taille et votre
connexion.

Copyright Intuisphere - Tous droits rservs

11

Manuel dutilisation WebAcappella 4 Juillet 2014


Une fentre va s'ouvrir vous indiquant la progression de la publication.
A la fin des oprations, WebAcappella vous indiquera le rsultat du transfert, la taille de
votre site ainsi que l'adresse o votre site pourra tre consult.
Si vous effectuez des modifications sur votre site, seuls les fichiers modifis seront
transfrs, vous faisant ainsi gagner du temps lors de la publication.

Sauvegarde
Nous vous conseillons de faire rgulirement des sauvegardes de votre site afin de
retrouver votre travail en cas de problme avec votre ordinateur.
- Dans la barre des menus, cliquez sur Fichiers puis sur Sauvegarder le site Web
dans une archive .
- Choisissez un emplacement pour la sauvegarde (diffrent de votre disque dur : cl
USB, CD rinscriptible... afin de pouvoir rcuprer vos fichiers en cas de dfaillance de
votre disque dur).
- Validez. WebAcappella va effectuer une sauvegarde (au format .zip) de votre travail
l'emplacement que vous aurez dtermin.

Copyright Intuisphere - Tous droits rservs

12

Manuel dutilisation WebAcappella 4 Juillet 2014

INTRODUCTION AU

LOGICIEL

Copyright Intuisphere - Tous droits rservs

13

Manuel dutilisation WebAcappella 4 Juillet 2014

INTRODUCTION
PRINCIPES GNRAUX DU LOGICIEL

CRER UN PROJET
Pour commencer, vous devez crer un projet web et lui attribuer un nom pour le
retrouver facilement chaque ouverture de WebAcappella.
Cliquez sur Crer un projet web . Donnez ensuite un nom votre projet (sans
espace) et cliquez sur Ok.
Vous pouvez supprimer un projet en
cliquant sur l'icne poubelle
situe en dessous de la liste de vos
projets.
Attention : si vous supprimez un
projet web, l'ensemble des sites
contenus dans ce projet sera
effac.

Mots cls : Projet, Dmarrer,


Nouveau, Crer, Accueil,
Commencer, Dbut,

CONFIGURER LA PUBLICATION DE VOTRE SITE


La configuration va vous permettre de mettre en ligne votre site WebAcappella en
saisissant les informations de publication fournies par votre fournisseur
d'hbergement.
Pour accder aux paramtrages de publication, cliquez sur le bouton Paramtres de
publication . Vous pouvez tout moment accder aux paramtrages de publication
depuis le menu Fichiers - Paramtres de publication .

Copyright Intuisphere - Tous droits rservs

14

Manuel dutilisation WebAcappella 4 Juillet 2014


Vous avez ensuite accs plusieurs onglets de paramtrage :
- Proprits gnrales de la publication
- Base de donnes
- Mail

Proprits gnrales de la publication


Remplissez les diffrents champs ( Hte , Identifiant , Mot de passe ) avec les
informations communiques par votre fournisseur d'hbergement.

Protocole : par dfaut, le protocole appliqu est FTP (protocole de transfert de fichier le
plus rpandu). Si votre service d'hbergement utilise un protocole diffrent (comme le
SFTP), vous pouvez choisir un autre protocole dans la liste et l'appliquer vos
paramtres de publication.
Hte : le nom (ou IP) du serveur FTP.
Adresse Internet : votre site sera visible cette adresse Internet. Elle correspond par
exemple votre nom de domaine (http://www.monsite.fr).
Dossier FTP distant : le dossier FTP distant est trs important et impos par votre
hbergeur. Il est ncessaire d'indiquer ce dossier distant pour que votre site soit visible
sur Internet. Les dossiers distants les plus courant sont : www, html, public_html...
Tester vos paramtrages FTP
Vous pouvez enfin tester l'accs votre hbergement via WebAcappella grce au
bouton Tester vos paramtrages FTP .

Mots cls : Publication Gnral, FTP, Hte, Protocole, Paramtrer

Copyright Intuisphere - Tous droits rservs

15

Manuel dutilisation WebAcappella 4 Juillet 2014

Base de donnes
Afin de pouvoir bnficier de certaines fonctionnalits de WebAcappella (Blogs, ecommerce), il est impratif que votre hbergement gre les bases de donnes.
Vous avez le choix entre
deux types de base de
donnes : MySQL et
SQLite.
Choisissez l'un ou l'autre
en fonction de ce qui
vous est impos par
votre hbergeur. Si
SQLite est propos,
prfrez ce type de base de donnes car elles ne ncessitent aucun paramtrage pour
sa mise en place.
Certains hbergeurs vous proposent directement dactiver les bases de donnes lors de
lactivation du compte, mais si ce nest pas le cas, allez sur longlet Base de donnes
et remplissez les champs avec les informations disponibles sur le site Web de votre
hbergeur.
Mots cls : Publication, Base de donnes, MySQL, SQLite, E-commerce, Blog

Personnaliser lenvoi des mails


Cet onglet vous permet de personnaliser les paramtrages de la fonction mail de
PHP. Un paramtrage par dfaut a t appliqu (sauf pour l'adresse email par dfaut),
modifiez ce code si vous possdez de bonnes connaissances en code PHP.
Attention : Paramtrages rservs aux utilisateurs expriments

Copyright Intuisphere - Tous droits rservs

16

Manuel dutilisation WebAcappella 4 Juillet 2014


Adresse email par dfaut : si vous ne remplissez pas le champ Adresse email de vos
formulaires de contact, cette adresse email remplissant le champ sera utilise par
dfaut.
Variable Content-type : dfinie l'encodage des caractres (texte) de votre email.
Nous vous conseillons de laisser les paramtres par dfaut (UTF-8).
Variable From : la valeur correspondante sera de type email . L'adresse email
renseigne ici sera affiche dans votre messagerie comme tant l'metteur du mail. Par
dfaut, la valeur sera rempli avec [mail] et correspondra l'adresse email par dfaut.
Variable Return-Path : cette variable est ncessaire chez la plupart des hbergeurs
pour l'envoi des emails. Nous vous conseillons de laisser les paramtres par dfaut.
Voici deux cas frquemment rencontrs si votre hbergeur demande des paramtres
supplmentaires concernant l'envoi des mails depuis votre site web :
Adresse email de l'expditeur
Variable : From
Valeur : votreadressemail@domaine.com ou laisser [mail] si vous avez rempli l'adresse
email par dfaut
Encodage des caractres du mail
Variable : Content-Type
Valeur : text/plain; charset=utf-8
Attention : En raison de nombreux paramtrages possibles imposs par les
diffrents hbergeurs, aucun support ne pourra tre effectu sur ces
paramtrages.

Mots cls : Publication, Email, PHP, Fonction MAIL, Latin : UTF-8, Envoi des mail,
Variable, Adresse email par dfaut, Valeur, Adresse email par dfaut

AIDE LA PUBLICATION
Publication interrompue
- Vrifiez votre connexion Internet.
- Vrifiez lespace maximal disponible pour votre site Internet chez votre hbergeur.
- Vrifiez quun de vos fichiers nest pas trop volumineux (vido / son) car certains
hbergeurs limitent la taille maximal des fichiers (2 Mo ou 4 Mo par ex).

Copyright Intuisphere - Tous droits rservs

17

Manuel dutilisation WebAcappella 4 Juillet 2014

Changements non pris en compte


- Attendez quelque temps. En fonction du taux doccupation du rseau, les mises jour
sont prises en compte plus ou moins rapidement. Vous pouvez aussi vider le cache de
votre navigateur.
- Cliquez sur Rafrachir le site Web pour actualiser les changements effectus.
- Assurez-vous davoir suffisamment de place sur votre hbergement.

Il manque des lments


- Vrifiez la taille de vos pages.
- Vrifiez la compatibilit de votre navigateur Internet avec les lments en question.

La publication ne dmarre pas


Il se peut que votre hbergeur subisse un problme technique temporaire.
Diffrentes erreurs peuvent safficher dans ce cas :
- Mauvais password / Mot de passe
- Folder / dossier inexistant
- Connexion interrompue
Ressayez plus tard. Si le problme persiste, nhsitez pas contacter votre hbergeur.

La publication est bloque sur le premier fichier


- Une protection de type pare-feu (Firewall) peut empcher le logiciel de fonctionner
correctement.
- Certains outils de scurit peuvent galement bloquer la publication.
Si vous ntes pas sr de vous, demandez conseil une personne exprimente mais il
est important de toujours avoir un pare-feu activ lorsque vous tes connect
Internet.
Pour tout autre problme, consulter le support client en vous connectant sur votre
espace personnel www.webacappella.fr/customer_space_fr.html ou la page daide du
site WebAcappella www.webacappella.fr

Mots cls : Paramtres, Connexion, Arrt, Firewall, Aide, Hbergeur, Publier,


Problme, Bloqu

Copyright Intuisphere - Tous droits rservs

18

Manuel dutilisation WebAcappella 4 Juillet 2014

BIEN CHOISIR SON HBERGEMENT


Gnralits
Afin de mettre votre site en ligne, vous devez choisir un hbergeur. WebAcappella est
compatible avec un grand nombre dhbergeurs. Voir les spcificits des hbergements
pour la version e-commerce : www.webacappella.fr/ecommerce_fr.html

Bien choisir son hbergeur


En fonction de la finalit de votre site Internet (personnel ou professionnel), vos besoins
seront diffrents. En effet, il existe de nombreuses solutions dhbergement (gratuites
ou payantes) et chacune dentre elles possde ses propres particularits pour sadapter
au mieux vos attentes et votre budget.
Nous vous conseillons de bien rflchir la solution la mieux adapte vos besoins.

Les diffrents types dhbergement


Intgr votre abonnement Internet
En vous abonnant un fournisseur daccs Internet, ce dernier met en gnral votre
disposition un espace Web personnel. Renseignez-vous auprs de votre fournisseur
daccs pour connatre les conditions daccs et dutilisation de ces espaces Web.
La plupart du temps, ce service est gratuit et intgr votre abonnement.
Cette solution dhbergement est trs utile pour publier votre premier site
WebAcappella et pour vous familiariser avec la gestion de sites Internet mais prsente
des limites dutilisation (lenteur de la connexion, publicit, faible espace de stockage...).
Payant
Choisir un hbergeur payant est souvent la solution la plus efficace et la plus stable.
Avec des tarifs commenant 1 ou 2 par mois, choisir un hbergement payant vous
vitera bien des soucis de publication et daccessibilit.
Un hbergement payant vous donnera aussi accs plus de fonctionnalits et
davantages.
Il vous permettra de choisir votre propre nom de domaine (ex : http://www.monsite.fr),
de crer des comptes emails associs votre site (ex : contact@monsite.fr), de
bnficier de plus despace de stockage...
Nous vous recommandons ce type dhbergement.

Copyright Intuisphere - Tous droits rservs

19

Manuel dutilisation WebAcappella 4 Juillet 2014


Gratuit
Vous pourrez trouver de nombreux hbergeurs qui vous proposent des solutions
dhbergement gratuit. La gratuit de ces solutions nest pas sans contrepartie. En effet,
ces solutions sont la plupart du temps limites en fonctionnalits, intgrent des
publicits, sont limites en espace de stockage et la connexion nest pas toujours dune
grande qualit.

Mots cls : Publication, Hbergement

PUBLIER VOTRE SITE MANUELLEMENT EN UTILISANT UN


LOGICIEL FTP
Pour publier votre site manuellement l'aide d'un logiciel FTP vous pouvez procder de
la manire suivante depuis WebAcappella.
Attention : PARAMETRAGES RESERVES AUX UTILISATEURS EXPERIMENTES.
Cliquez sur Fichier / Paramtres
de publication . Puis, cliquez sur le
bouton Publication avance .
Dans la fentre qui souvre cochez la
case Publier en local . Cliquez sur
le bouton avec les trois petits points
pour choisir (ou crer) un dossier o
seront placs les fichiers de votre site.
Cliquez deux fois sur OK et enfin sur le bouton Publier , tous les fichiers seront
placs dans le dossier choisi.
Il ne vous reste plus qu' transfrer tous les fichiers et dossiers contenus dans ce
dossier vers votre hbergeur en utilisant un logiciel FTP (par exemple FileZilla).
- Tout en haut, remplissez les champs Hte , Identifiant et mot de passe .
- Cliquez sur le bouton Connexion rapide , la liste des dossiers sur le panneau
central droit va alors se mettre jour.
- Sur le panneau de gauche, naviguez pour vous retrouver dans le dossier ou vous
avez publi votre site.
- Faites glisser le contenu du panneau de gauche dans le panneau de droite.
- Patientez le temps de l'upload.
- Votre site est disponible.

Copyright Intuisphere - Tous droits rservs

20

Manuel dutilisation WebAcappella 4 Juillet 2014


Note : Noubliez pas dinclure les fichiers cachs (HTAccess).

Pour visionner votre site, il vous suffira de lancer votre navigateur et de le faire pointer
vers l'url de votre site.
Mots cls : Publier, Local, Manuellement, Logiciel FTP

PRREQUIS TECHNIQUES
E-commerce
L'utilisation de la version e-commerce ncessite un hbergement avec certaines
caractristiques. Vous trouverez le dtail sur le site :
www.webacappella.fr/ecommerce_fr.html

Blog
Les blogs ou livres dor ne sont actifs qu'une fois publis (tout comme l'interface de
gestion des messages). Pour que l'outil Blog fonctionne correctement, il faut que vous
activiez les fonctions MySQL ou SQLite (base de donnes) sur votre hbergement.

Formulaire de contact
Lutilisation du formulaire de contact ncessite lactivation et la prise en charge de
certaines fonctionnalits auprs de votre hbergeur :
- Prise en charge du PHP (langage informatique de programmation Web ct serveur).
- Prise en compte de la Fonction Mail dans PHP (qui permettra le transfert des mails
depuis votre site Web vers votre bote mail).
Note : Renseignez-vous auprs de votre hbergeur pour savoir si ces fonctionnalits
sont prises en compte dans votre hbergement.

Mots cls : Prrequis techniques

Copyright Intuisphere - Tous droits rservs

21

Manuel dutilisation WebAcappella 4 Juillet 2014

LIMITATIONS DE LA VERSION GRATUITE

Rfrencement

Multilangage
Nombre de pages

Albums photos

Objets multimdia
E-commerce

La version gratuite ne permet pas deffectuer du


rfrencement page par page. Seuls les titres des pages
seront utiliss par les rsultats du moteur de recherche.
La version gratuite est limite 2 langues.
Vous ne pouvez crer que 8 pages par site dans cette
version.
Vous ne pouvez insrer que 12 photos dans chaque
album avec la version gratuite.
Taille maximale des fichiers : 1,4 mo.
Le-commerce est uniquement disponible en version
test.

Mots cls : Limitation, Version gratuite, Restriction

LIMITES DUTILISATION SUR CERTAINS NAVIGATEURS INTERNET


Afin de bnficier au maximum des effets et fonctionnalits proposs par
WebAcappella, nous vous conseillons d'utiliser la dernire mise jour de votre
navigateur Internet.
En effet, certains effets comme les ombres portes, la transparence sur les images ou
les rotations peuvent tre mal grs ou non pris en compte par les navigateurs les
moins rcents (versions antrieures la version 9 dInternet Explorer).

Mots cls : Limitation dutilisation, Navigateur, Internet Explorer

IMPORTER VOS SITES WEBACAPPELLA 3 DANS WEBACAPPELLA 4


Au premier lancement de WebAcappella 4, l'application dtecte automatiquement si
vous possdez dj des sites crs avec WebAcappella 3 et vous propose de les
importer.

Copyright Intuisphere - Tous droits rservs

22

Manuel dutilisation WebAcappella 4 Juillet 2014

Pour cela, cliquer simplement sur le bouton Importer vos sites WebAcappella 3 .
Cette action n'aura aucune rpercussion sur vos sites crs avec WebAcappella 3.
Les sous-dossiers et fichiers prsents dans le dossier WebAcappella seront copis et
colls dans un nouveau dossier intitul WebAcappella_4 . Vos sites seront
automatiquement repris par WebAcappella 4 et vous pourrez continuer travailler
dessus.
Note : Un travail d'adaptation de design est trs certainement prvoir. Certains
lments ont t redesigns (lecteur audio et vido, boutons, album photo, ecommerce), des effets ont t rendus indisponibles (effet de flou) et d'autres
fonctionnalits ont vu le jour (Google Web Fonts, transformation du texte en
image...).
Pour importer manuellement vos sites crs avec WebAcappella 3, fermez
WebAcappella et effectuez cette opration :
- Copiez l'intgralit des dossiers contenus dans le dossier
/.../Mesdocuments/WebAcappella ou /.../Documents/WebAcappella
- Ouvrez ensuite le dossier /.../Mesdocuments/WebAcappella_4 et collez l'intgralit des
dossiers prcdemment copis
- Lancez WebAcappella 4, tous vos sites sont de nouveau prsents.
Mots cls : Import, WebAcappella, Rcuprer

QUESTIONS FRQUENTES
Installation
Compatibilit
Vrifiez que vous avez install la version correspondant votre systme dexploitation
(Windows ou Mac). Mettez jour votre systme.
Mises jour
WebAcappella dtecte automatiquement les nouvelles mises jour. Nous vous
conseillons dinstaller ces mises jour de WebAcappella. Pour vrifier si une mise jour
est disponible cliquez sur le menu Options - Vrifier les mises jour .

Cration
Compression des images
WebAcappella compresse les images afin quelles occupent moins de place sur votre
hbergement. Vous pouvez rgler la qualit et le poids des images de votre site grce au

Copyright Intuisphere - Tous droits rservs

23

Manuel dutilisation WebAcappella 4 Juillet 2014


menu Options - Prfrences .
Taille de la page
Vous pouvez rgler la largeur et la hauteur de vos pages pour quelles sadaptent au
mieux leur contenu dans Proprits de la page onglet Fond .
Gestion des maquettes
Une maquette ne peut pas tre modifie sur une page lutilisant. Vous devez effectuer
les modifications directement sur la maquette partir de l'explorateur Maquettes .
Jai perdu mon travail
WebAcappella enregistre automatiquement votre site dans le rpertoire C://Mes
documents/WebAcappella4 sous PC et Documents/WebAcappella4 sous Mac. Pour plus
de scurit, nous vous conseillons de faire des sauvegardes rgulires de votre travail
sur un support externe (cl USB).
Installer une nouvelle police de caractre
Sur mac :
- Tlchargez votre police de caractre sur votre ordinateur.
- Double cliquez sur votre police pour lancer son installation et cliquez sur le bouton
Installer la police .
- Votre police s'installe automatiquement dans le livre des polices de votre ordinateur.
Sur PC :
- Tlchargez votre police puis copiez le fichier .ttf.
- Collez-le dans le dossier intitul Font qui se situe dans C:/windows/
- Une fois colle, votre police est installe automatiquement dans votre librairie de
polices.

Publication
Publication interrompue
- Vrifiez votre connexion Internet.
- Vrifiez lespace maximal disponible pour votre site Internet chez votre hbergeur.
- Vrifiez quun de vos fichiers nest pas trop volumineux (vido / son) car certains
hbergeurs limitent la taille maximal des fichiers (2 Mo ou 4 Mo par ex).
Changements non pris en compte
- Attendez quelque temps. En fonction du taux doccupation du rseau, les mises jour
sont prises en compte plus ou moins rapidement. Vous pouvez aussi vider le cache de
votre navigateur.
- Cliquez sur Rafrachir le site Web pour actualiser les changements effectus.
- Assurez-vous davoir suffisamment de place sur votre hbergement.
Il manque des lments

Copyright Intuisphere - Tous droits rservs

24

Manuel dutilisation WebAcappella 4 Juillet 2014


- Vrifiez la taille de vos pages.
- Vrifiez la compatibilit de votre navigateur Internet avec les lments en question.
La publication ne dmarre pas
Il se peut que votre hbergeur subisse un problme technique temporaire.
Diffrentes erreurs peuvent safficher dans ce cas :
- Mauvais password / Mot de passe
- Folder / dossier inexistant
- Connexion interrompue
Ressayez plus tard. Si le problme persiste, nhsitez pas contacter votre hbergeur.
La publication est bloque sur le premier fichier
- Une protection de type pare-feu (Firewall) peut empcher le logiciel de fonctionner
correctement.
- Certains outils de scurit peuvent galement bloquer la publication.
Si vous ntes pas sr de vous, demandez conseil une personne exprimente mais il
est important de toujours avoir un pare-feu activ lorsque vous tes connect
Internet.
Pour tout autre problme, consulter le support client en vous connectant sur
votre espace personnel www.webacappella.fr/customer_space_fr.html ou la page
daide du site WebAcappella www.webacappella.fr

Mots cls : FAQ, Questions frquentes, Police, Font, Caractre, Publication,


Installation, Publication interrompue, Compression dimages, Taille de la page

Copyright Intuisphere - Tous droits rservs

25

Manuel dutilisation WebAcappella 4 Juillet 2014

LESPACE DE TRAVAIL DANS

WEBACAPPELLA

Copyright Intuisphere - Tous droits rservs

26

Manuel dutilisation WebAcappella 4 Juillet 2014

LESPACE DE TRAVAIL DANS WEBACAPPELLA


DCOUVERTE DE VOTRE OUTIL DE CRATION DE SITES INTERNET

LINTERFACE DE WEBCAPPELLA
La barre des icnes
La barre des icnes vous permet daccder aux principales fonctionnalits ncessaires
la cration et la publication de votre page.

Ces icnes facilitent la navigation dans linterface de WebAcappella.


- Icne Sauver : vous permet denregistrer le travail en cours.
- Icne Ressources : vous permet d'accder la bibliothque de fichiers et dimages de
votre site.
- Icne Bouton : vous permet de crer un bouton.
- Icne Image : vous permet dajouter une image.
- Icne Texte : vous permet dinsrer une zone de texte.
- Icne Album : vous permet dintgrer un album photo.
- Icne Couleur : vous permet de crer une zone de couleur.
- Icne Ma Boutique : ouvre un menu avec laccs linstallation de la boutique en ligne
et les diffrents composants dune boutique en ligne.
- Icne Administration : vous donne accs au Back-Office (console d'administration)
o est regroup toute la partie gestion de votre boutique en ligne (pour la version ecommerce).
- Icne Flches : ouvre un menu avec tous les lments disponibles dans WebAcappella.
- Tester : vous permet de tester votre site en local dans le navigateur par dfaut de votre
ordinateur.
- Publier : vous permet de publier votre site sur Internet (les paramtres de votre
hbergement doivent tre dj remplis).
- Visiter : vous permet daccder votre site Internet sil est dj en ligne.

Mots cls : Icnes, Barre des icnes, Logiciel, Menu, Barre du haut

Copyright Intuisphere - Tous droits rservs

27

Manuel dutilisation WebAcappella 4 Juillet 2014

Lexplorateur de pages et de maquettes


Grce lexplorateur de pages situ gauche de lcran, vous avez accs toutes les
pages et maquettes de votre site WebAcappella.
Vous pouvez renommer les pages, les classer dans
des dossiers, les supprimer ou bien encore ajouter
une nouvelle maquette pour faciliter la cration de
votre site.
En savoir plus sur les maquettes.

Mots cls : Page, Explorateur, Maquettes

Les rgles
Les rgles vous permettent de placer des repres horizontaux et verticaux afin de
vous aider aligner vos
lments.

Note : ces repres visuels


ne sont visibles qu'en
mode cration (ils ne sont pas
visibles sur le site publi ou sur le navigateur Internet en mode test).
Il existe trois faons de crer ou de supprimer une rgle :
- Double clic dans la rgle
- Cliquer / glisser / dposer depuis une rgle
- Clic droit, puis Ajouter une rgle / Supprimer la rgle .

Mots cls : Rgles, Repre, Graduation, Mesure, Pixel


MOTS CLS: REGLES, REPERE

Copyright Intuisphere - Tous droits rservs

28

Manuel dutilisation WebAcappella 4 Juillet 2014

Le plan de travail
Le plan de travail se prsente sous la forme dun espace vide ou prdfini (voir aussi les
maquettes). Cet espace, dont vous aurez dtermin les caractristiques (taille, fond),
vous permet dajouter les lments mis votre disposition par WebAcappella.
La grille magntique vous permet de placer les lments par rapport des points de
repre dans le plan de travail. Ces points de repre attirent les lments et les alignent
avec prcision. Cette option est trs utile pour placer rapidement vos lments de
manire homogne. Cette grille peut tre dsactive tout moment (menu
Affichage ).

Mots cls : Plan de travail, Espace de travail, Scne, Fentre centrale

Explorateur de calques
L'explorateur de calques vous permet de crer des calques et de les grer.
Les calques sont utiliss pour regrouper des lments. Vous pouvez crer un ensemble
en vue d'une modification simplifie des lments (exemple : regrouper tous les

Copyright Intuisphere - Tous droits rservs

29

Manuel dutilisation WebAcappella 4 Juillet 2014


lments d'une barre de navigation afin de pouvoir slectionner et dplacer tous ces
lments en un seul clic ou une fois que lensemble est cr et que le placement dans la
page est dfinitif, verrouiller le calque pour ancrer ces lments et quils ne soient
plus slectionnables.

Note : l'explorateur de calques peut tre dtach ou rattach de l'interface grce au


bouton plac en haut gauche de l'explorateur (double flche).
De mme, vous pouvez fermer l'explorateur de calques. Pour l'afficher nouveau,
rendez-vous dans le menu Affichage - Afficher l'explorateur de calques .
Mots cls : Pages, Explorateur, Calques

Linspecteur dlments
L'inspecteur vous permet d'accder aux paramtrages et aux options de chaque
lment.
Par dfaut l'inspecteur est
visible mais vous pouvez le
faire apparatre ou disparatre
via l'icne situ droite de
l'lment :
Chaque action effectue sur
un lment via l'inspecteur est
instantanment applique et
visible.

Copyright Intuisphere - Tous droits rservs

30

Manuel dutilisation WebAcappella 4 Juillet 2014


De plus, l'inspecteur vous permet de modifier plusieurs lments du mme type en
mme temps. Par exemple, slectionnez plusieurs zones de couleur en mme temps et
appliquez leur la mme couleur.
Mots cls : Inspecteur dlments, Fentre flottante, Contrleur

LES FONDAMENTAUX
Slectionner et dplacer un lment

WebAcappella met votre disposition de nombreux lments que vous pouvez placer
o vous le souhaitez dans lespace de travail (votre page en cration).
Pour slectionner un lment, placez votre souris dessus et effectuez un simple clic
gauche. Llment slectionn sera alors
entour dune bordure en pointills et de
points de redimensionnement.
Une barre dicnes apparat alors sur son
ct droit. Cette barre permet daccder
linspecteur de proprits ou de
supprimer llment (croix rouge).

Une fois llment slectionn, maintenez


le clic gauche enfonc et dplacez-le sur le plan de travail. Relchez le clic gauche pour
dposer llment.
WebAcappella permet de slectionner plusieurs lments en mme temps ou bien
encore tous les lments de la page.

Slection multiple
Maintenez la touche CTRL (ou cmd sur Mac)
enfonce et slectionnez les lments un
un. Les lments seront alors entours
d'orange. Vous dplacerez ainsi le groupe
dlments slectionns.

Copyright Intuisphere - Tous droits rservs

31

Manuel dutilisation WebAcappella 4 Juillet 2014


Vous pouvez aussi faire une slection
des lments en effectuant, dans une
partie vide, un clic gauche, puis
maintenez-le enfonc et dplacez
votre curseur pour slectionner une
zone et les lments qui sy trouvent.

Enfin, en faisant un clic droit (ctrl-clic sur Mac) dans la page, vous pouvez slectionner
tous les lments de la page en cliquant sur Slectionner tous les lments de la
page .
Mots cls : Slectionner, Dplacer, Bouger, Superposition, Slectionner plusieurs
lments, Slection multiple

Redimensionnement et rotation
Redimensionnement
Tous les lments intgrs dans WebAcappella sont redimensionnables. Que ce soit une
zone de texte, une image, un album photo, une zone de couleur... vous avez la
possibilit de modifier la taille de llment.
Placez votre souris dans un des angles ou sur un ct de llment, maintenez le clic
gauche enfonc et dplacez votre souris dans la direction
voulue pour changer sa taille.
- Un mouvement vers la gauche ou la droite modifiera la
largeur de llment.
- Un mouvement vers le haut ou le bas modifiera sa hauteur.
- Un mouvement diagonal modifiera la fois la hauteur et la
largeur de votre lment.
L'inspecteur de l'lment, onglet Proprits gomtriques de l'lment, vous
permet d'ajuster manuellement la taille de votre lment.
Si vous voulez rtablir les dimensions initiales dune image (par exemple dans le cas
dune image dforme suite un redimensionnement), faites un clic droit sur llment
et cliquez sur Remettre limage ses dimensions initiales .

Copyright Intuisphere - Tous droits rservs

32

Manuel dutilisation WebAcappella 4 Juillet 2014


De mme si vous ne voulez pas que limage soit dforme, cochez la case de l'inspecteur
Conserver les proportions dans la rubrique Proprits gomtriques de
l'lment.
Voir aussi Proprits gomtriques des lments

Rotation
Il est possible de faire tourner votre lment manuellement.
Slectionnez votre lment, appuyez sur la touche
Commande (Alt sur Windows) et cliquez dans un angle de
votre lment. Une icne incurve apparat.
Tout en maintenant enfonc la touche Commande ou Alt,
montez ou descendez votre souris pour faire tourner
votre lment.
Voir aussi Proprits gomtriques des lments .

Mots cls : Slectionner, Redimensionner, Rotation, Taille, Dimension, Proportion,


Agrandir, Modifier, Changer, Dimensionner

Copier, couper, coller et dupliquer


Les lments (texte, images, album photo) peuvent tre copis ou coups, puis colls
sur la page en cours de cration, sur une autre page du site courant ou bien encore un
autre site WebAcappella.
- Pour copier un lment, slectionnez-le et appliquez les raccourcis clavier usuels
(touche CTRL + C puis CTRL + V ) ou faites un clic droit copier et de nouveau un
clic droit coller .
- Pour couper un lment, effectuez la mme manipulation en changeant les raccourcis :
CTRL + X puis CTRL + V ) ou clic droit couper et de nouveau clic droit coller .
Vous pouvez copier ou couper un ensemble dlments slectionns (voir aussi
Slectionner et dplacer un lment ). Enfin, si vous dsirez dupliquer un lment, via
le clic droit (commande + clic sur Mac) cliquez sur dupliquer pour quun lment
identique au premier soit cr.
Note : lorsque vous copiez ou coupez / collez un lment dans une mme page,
llment sera lgrement dcal par rapport llment dorigine. Cependant, si
vous copiez ou coupez un lment dans une page et que vous le collez dans une
autre page, llment sera plac exactement au mme endroit que son emplacement
dorigine.
Copyright Intuisphere - Tous droits rservs

33

Manuel dutilisation WebAcappella 4 Juillet 2014


Lutilisation des maquettes pour placer les lments rcurrents de vos pages (menu,
bandeau haut, pied de page) peut aussi viter de nombreux copier / coller dune page
lautre.
Mots cls : Copier, Couper, Coller, Dupliquer, Multiplier

Alignement
Lorsque vous slectionnez un ou plusieurs lments dans votre page, vous pouvez les
aligner dans la page et/ou les uns par rapport aux autres.
Une fois un ou plusieurs lments slectionns, effectuez
un clic droit sur l'lment ou le groupe d'lments, cliquez
dans le menu Alignement des objets et choisissez
ensuite le type d'alignement que vous souhaitez
appliquer. Le menu Alignement des objets est aussi
disponible depuis le menu Disposition .

Note : si un seul lment est slectionn, l'alignement se fera au niveau de son


emplacement dans la page (exemple : le menu Aligner au centre aligne votre
lment au centre de votre page de faon horizontale).

Mots cls : Aligner lments, Justifier, Ranger, Ordonner

Superposition
Lors de la cration de votre page, vous pouvez superposer des lments et choisir
lordre dapparition (superposition).
Ainsi, un lment peut tre mis au premier plan ou en arrire-plan, mais vous avez aussi
la possibilit de dplacer en profondeur chaque lment.
Ces options de placement sont accessibles via un simple clic droit sur llment.

Copyright Intuisphere - Tous droits rservs

34

Manuel dutilisation WebAcappella 4 Juillet 2014


Pour slectionner un lment se trouvant sous un autre lment, maintenez la touche
Maj enfonce et cliquez sur le premier lment. Continuez cliquer au mme endroit
pour accder aux lments situs en dessous du premier lment.
Mots cls : Slectionner, Dplacer, Superposition, Avancer, Reculer, Premier plan,
Arrire plan, Devant, Derrire, Superposer, Empiler

Annuler une modification


Chaque action (modification, dplacement, suppression...) effectue sur une page ou
un lment peut tre annule. Trois mthodes sont disponibles :
Via le menu Edition
Cliquez sur le menu Edition - Annuler (....) pour revenir la dernire action
effectue. Le nom de l'action est automatiquement report dans ce menu.
Via l'historique des actions
L'historique des actions est accessible via le menu Affichage - Afficher
l'historique des actions . Pour revenir une tape antrieure de cration,
slectionnez simplement une action dans la liste pour revenir cette tape. Toutes les
modifications apportes entre la dernire action et l'action slectionne seront
annules.
Vous pouvez aussi revenir la dernire modification effectue.
Via les raccourcis clavier
Les modifications effectues peuvent aussi tre annules via le raccourci clavier
Commande + Z (ou Ctrl + Z sous Windows).
Pour rtablir les modifications, tapez le raccourci clavier Commande + Maj + Z ou
Ctrl + Maj + Z sous Windows.
Mots cls : Annuler, Historique, Modification, Dfaire, Revenir en arrire

Sauvegarder votre travail


Pour enregistrer les dernires modifications effectues dans votre page courante et
sauvegarder ainsi votre travail, cliquez sur le bouton Sauver .
Vous pouvez cliquer dessus nimporte quel moment pour enregistrer les tapes de
votre cration.

Copyright Intuisphere - Tous droits rservs

35

Manuel dutilisation WebAcappella 4 Juillet 2014


Lorsque vous changez de page, WebAcappella vous demandera automatiquement si
vous dsirez enregistrer le travail ralis.
Enfin, lors de la publication et de la prvisualisation de votre site, un enregistrement
automatique est ralis. Cet enregistrement permet de reprendre votre ralisation
lendroit o vous vous tes arrt et seffectue automatiquement dans un dossier
destin au stockage des sites WebAcappella. Ce dossier est enregistr sur votre
ordinateur ladresse suivante : C://Documents/WebAcappella_4.
Mots cls : Enregistrer, Modification, Conserver

Crer une archive de sauvegarde de votre site


Sauvegarder depuis WebAcappella
WebAcappella enregistre automatiquement votre travail dans le dossier /Mes
documents/WebAcappella (Documents/WebAcappella sur Mac). Mais afin de conserver
une sauvegarde supplmentaire de votre travail dans un dossier ou un support de votre
choix, vous pouvez effectuer une sauvegarde manuelle de votre site WebAcappella.
Les sauvegardes sont trs importantes ! En effet, il nest pas possible de rcuprer
votre site install sur votre hbergement mme via un client FTP. Les fichiers en
ligne ne sont pas ceux qui ont servi la cration du site.
Pour sauvegarder votre site WebAcappella
- Ouvrez WebAcappella et slectionnez le site que vous souhaitez sauvegarder.
- Cliquez sur le menu Fichiers - Sauvegarder le site Web dans une archive .
Choisissez ou crez (crer un dossier vous permet de personnaliser votre sauvegarde et
dviter tout problme de compression des donnes) un dossier de destination et
cliquez sur OK (nous vous conseillons de choisir un support amovible tel quune cl
USB ou un disque externe).
- Vous pouvez ensuite choisir d'incorporer ou non votre sauvegarde vos paramtres
de publication. Cochez ou dcochez la case Intgrer les paramtres de publication
dans cette sauvegarde . Cliquez ensuite sur Oui .

Copyright Intuisphere - Tous droits rservs

36

Manuel dutilisation WebAcappella 4 Juillet 2014


- Un fichier .zip contenant votre site sera cr l'endroit slectionn.

Sauvegarde puis votre systme dexploitation (avanc)


Vous pouvez aussi sauvegarder lensemble de vos sites directement depuis lexplorateur
de votre systme dexploitation. Il vous suffit de copier le dossier WebAcappella
(situ dans le dossier Mes documents sur Windows et Documents sur Mac) et de
le coller sur un support amovible (cl USB, disque externe) ou sur une partition de votre
disque dur.
Cette mthode est particulirement utile dans diffrentes situations : pour importer vos
sites sur un nouvel ordinateur, pour transfrer vos sites vers votre ordinateur portable
ou tout simplement pour conserver une sauvegarde de lensemble de vos sites. Pour
rintgrer vos sites dans WebAcappella, il suffit dcraser le dossier WebAcappella avec
votre sauvegarde

Mots cls : Sauvegarder, Archive, ZIP

Rcuprer votre site depuis une sauvegarde WebAcappella


Cliquez sur Restaurer le site Web depuis une archive et slectionnez le fichier .zip
de votre site ( lendroit o vous avez cr la sauvegarde depuis WebAcappella). Cette
manipulation peut seffectuer depuis votre site en construction ou depuis un site vierge
(dans le cas dun formatage / rinstallation de votre systme).
Note : il nest pas possible de rcuprer votre site dans WebAcappella depuis
Internet (fichiers et dossiers de travail diffrents des fichiers et dossiers publis). En
cas de problme sur votre ordinateur, pour reprendre votre travail une sauvegarde
ralise depuis WebAcappella est imprative. Nous vous conseillons d'effectuer
rgulirement des sauvegardes sur un support

Vous avez galement la possibilit de reprendre votre site zro en cliquant sur
Recommencer votre site . Attention ! Cette opration effacera de manire dfinitive
le site courant.
Copyright Intuisphere - Tous droits rservs

37

Manuel dutilisation WebAcappella 4 Juillet 2014

Affichage de la page
WebAcappella vous donne la possibilit de travailler en plein cran (menu Affichage
- Agrandir la fentre ). De plus, si vous voulez travailler dans le dtail les lments
de votre site (taille des objets, alignement, ...) vous pouvez effectuer un zoom de 200 %
ou 300 %.
Mots cls : Affichage, Zoom, Afficher, Prsentation, Visualisation

Ajouter une page


Par dfaut, WebAcappella ouvre votre premire cration sur la page Accueil .
Cette page est obligatoire et ne peut pas tre supprime. Elle est la base de votre site et
lors de la mise en ligne elle sera la premire page (page daccueil) de votre site Web.
Ajoutez de nouvelles pages grce au bouton Ajouter une nouvelle page (icne +
dans lexplorateur de page) ou par lintermdiaire du menu Pages / Maquettes -
Ajouter une nouvelle page .
Toute page cre peut tre change en page daccueil grce au menu
Pages/Maquettes - Mettre la page courante en Page daccueil .
Voir aussi limitations de la version Gratuite.
Mots cls : Ajouter page, Insrer, Rajouter

Crer des liens internet


Les liens vous permettent de naviguer dans votre site, denvoyer vos visiteurs vers
dautres sites, denvoyer des e-mails, de tlcharger des fichiers ou bien encore de
changer la langue de votre site.
Les liens peuvent tre appliqus sur :
- Le texte (liens hypertexte)
- Les images
- Les bouton et menus dynamiques
- Les zones de couleur
- Les frames
- Les lments multimdia
Lorsque vous tes sur un de ces lments, l'onglet
d'accder aux diffrents types de liens.

Copyright Intuisphere - Tous droits rservs

de l'inspecteur vous permet

38

Manuel dutilisation WebAcappella 4 Juillet 2014


Note : pour chaque type de lien (sauf pour les e-mails), vous pouvez choisir de le
rendre effectif dans la page courante (changement de page dans une mme fentre)
ou de louvrir dans une nouvelle page Internet.

Lien vers une page de ce site Web


Votre site comporte plusieurs pages et vous dsirez crer un lien vers une de ces pages.
Cliquez sur ce type de lien et lexplorateur de page ainsi que la liste des miniatures
apparaissent. Choisissez ensuite la page vers laquelle le lien sera effectif. Le lien est en
place.
Lien vers un fichier
Cette option ajoute un lien qui ouvrira un fichier (PDF, Word) de votre choix.
Choisissez un document dans lexplorateur ou importez-en un de votre ordinateur grce
au bouton Ajouter un nouveau fichier . Si vous avez effectu des modifications sur
un fichier aprs lavoir ajout, slectionnez-le dans votre liste de fichiers et cliquez sur le
bouton Rafrachir , enfin choisissez le fichier et cliquez sur ouvrir .
Lors du clic sur ce lien, le fichier sera :
- soit ouvert dans le navigateur Internet (ex : Pdf)
- soit ouvert par le logiciel appropri (ex : document Word, vido QuickTime...).
Lien vers une adresse Internet
Le lien dirige les visiteurs vers un autre site Internet.
Un champ apparat vous demandant de Taper une adresse Internet [...] .
Remplissez le champ avec ladresse Internet vers laquelle le lien hypertexte pointera.
Noubliez pas de mettre http:// au dbut de votre adresse pour que le lien fonctionne
correctement. Si vous choisissez douvrir le lien dans une nouvelle fentre, une infobulle gnre par WebAcappella vous permettra douvrir cette fentre sans tre gn
par le systme anti-popup de votre navigateur Internet.

Lien vers une adresse E-mail


Le lien envoie un Email vers ladresse indique.
Remplissez le champ avec ladresse Email dsire. En cliquant sur ce lien, les visiteurs de
votre site pourront envoyer un Email ladresse dfinie. Ce lien ouvre automatiquement
l'utilitaire d'envoi d'Email par dfaut.
Changement de langue
Disponible uniquement sur les sites sur lesquels l'option multilingue a t active.
Il permettra aux visiteurs de votre site de changer de langue.
Choisissez la destination du lien dans les pages (fentre actuelle ou nouvelle fentre, en
bas ou en haut de la page), puis choisissez la langue dans le menu droulant. Ce lien va
changer la langue de votre site (le reste de la navigation aura alors lieu dans la langue
dans laquelle pointe le lien).

Copyright Intuisphere - Tous droits rservs

39

Manuel dutilisation WebAcappella 4 Juillet 2014


Note : envisagez de placer ce type de lien sur une maquette, sinon il faudra lintgrer
sur toutes les pages de votre site.

Mots cls : lment, Lien hypertexte, Fichier, Adresse internet, Email

Tester votre site


Tout au long de la cration vous pouvez prvisualiser votre travail dans le
navigateur Internet par dfaut en cliquant sur cette icne Tester
Cette fonctionnalit vous permet de vous rendre compte du rsultat final : vrifier le
bon fonctionnement des liens, laffichage des images, laspect graphique de votre site ou
bien encore la navigation.
Chaque fois que vous testez votre site, il est automatiquement enregistr.
Note : certains lments ne fonctionnent pas lors dune prvisualisation mais une
fois votre site en ligne (Blogs, formulaire de contact).
Mots cls : Tester, Prvisualiser site, Vrifier

Publier votre site


Avant de lancer la publication, assurez-vous davoir correctement renseign les
paramtres de publication de votre site WebAcappella (voir Configurer la
publication de votre site WebAcappella ).
Cliquez sur cette icne Publier pour mettre en ligne votre site ou publier les
dernires modifications effectues. La publication automatique sera lance. Une fentre
souvre vous prsentant lavancement du transfert de vos fichiers. A chaque
modification sur votre site, pensez le publier pour quil soit jour en ligne.
Note : La mise en ligne ou les modifications de votre site peuvent tre plus ou moins
rapidement prises en compte.
A la fin de la publication de votre site, la fentre vous donne un rcapitulatif des
informations relatives votre site WebAcappella :
- Adresse o le site pourra tre consult
- Nombre de fichiers modifis
- Taille du site Web
Mots cls : Publier, Espace web, Editer, Mettre en ligne, Edition

Copyright Intuisphere - Tous droits rservs

40

Manuel dutilisation WebAcappella 4 Juillet 2014

Visiter votre site


Vous pouvez tout moment accder votre site en ligne (sil est dj publi) en
cliquant sur licne Visiter votre site .
Vous serez alors directement envoy sur la page daccueil de votre site WebAcappella.
Mots cls : Visiter votre site, Inspecter

POUR ALLER PLUS LOIN


Organisation des pages
Lorsque vous crez un site contenant de nombreuses pages, l'explorateur de pages
vous en facilite leur organisation.
Dossiers
WebAcappella vous permet dorganiser vos pages dans
des dossiers. Vous pouvez ainsi regrouper plusieurs
pages dans un mme dossier afin de les classer par
thme et dy accder rapidement.
Par exemple : dossier Pages photos ,
dossier Pages produits , dossier Pages achat ...

Cliquez sur l'icne


pour accder au menu. Cliquez ensuite sur Crer un nouveau
dossier . Ensuite, faites glisser simplement les pages dans le dossier.
Renommer
Vous pouvez renommer vos pages et vos dossiers. Les noms donns dans l'explorateur
n'ont aucune influence sur le nom de vos pages en ligne.
Pour renommer une page ou un dossier
- Slectionnez une page ou un dossier
- Effectuez un simple clic dessus ou ouvrez le menu
- Attribuez un nom de votre choix.

et cliquez sur Renommer

Changer la page d'accueil


La page qui saffiche par dfaut lors de l'ouverture du site en est sa page d'accueil.
Cependant, vous pouvez choisir une autre page qui sera mise en page d'accueil.

Copyright Intuisphere - Tous droits rservs

41

Manuel dutilisation WebAcappella 4 Juillet 2014

Pour cela, slectionnez la page dsire et cliquez sur le menu


. Cliquez ensuite sur
Dfinir comme page d'accueil du site Web . La page slectionne sera alors
automatiquement place en page d'accueil.
Limitations de la version Gratuite.
Mots cls : Organisation des pages, Explorateur, Organiser, Structurer, Hirarchiser

Les maquettes
Les maquettes permettent de crer un style visuel uniforme sur lensemble des pages
de votre site.
Grce aux maquettes, la mise en page sera simplifie et votre site aura un aspect visuel
global homogne (pas de dcalage dans les menus ou les lments rcurrents de vos
pages).
Aussi, si vous dsirez effectuer des changements, modifiez seulement la maquette. Les
changements seront alors effectifs sur toutes les pages utilisant cette maquette.

Crer une maquette


Pour crer une maquette, cliquez sur licne
de l'explorateur de maquette (
gauche de l'cran) puis sur Ajouter une nouvelle maquette ou cliquez sur le menu
Pages / maquettes puis Ajoutez une nouvelle maquette . Une nouvelle page
vide souvre dans l'explorateur de maquettes.
Crez votre maquette comme n'importe quelle page.
Elle peut par exemple se composer dimages, de zones
de couleur, de menus dynamiques et de boutons.
Cette composition sera enregistre comme maquette
et pourra servir de base homogne la cration des
pages de votre site.
Un repre de couleur sera automatiquement attribu votre maquette. Il est visible
gauche du nom de la maquette dans lexplorateur. Lorsque vous utiliserez cette
maquette sur une page de votre site, ce repre de couleur sera report sur votre page,
vous permettant ainsi d'identifier facilement la maquette utilise.

Copyright Intuisphere - Tous droits rservs

42

Manuel dutilisation WebAcappella 4 Juillet 2014

Intgrer une maquette votre page


Une fois votre maquette cre, vous pouvez lappliquer vos pages.
Dans la page en cration, affichez les proprits de la page. Dans longlet Arrire
plan cochez la case Utiliser une maquette comme arrire plan . Slectionnez
ensuite votre maquette et cliquez sur OK .
La maquette sera intgre larrire plan de votre page. Un repre de couleur
correspondant votre maquette apparat alors sur la gauche du nom de votre page.
Note : les modifications des lments de votre maquette ne peuvent pas se faire
directement sur les pages utilisant la maquette, elles se font directement dans la
maquette.
Toutes les modifications effectues sur une maquette sont automatiquement prises en
compte sur les pages utilisant la maquette.
Voir aussi : Les pieds de page.

Mots cls : Maquette, Pied de page, Repre de couleur

Les calques
Comme nous lavons prcdemment vu, les calques sont utiliss pour regrouper des
lments.
Vous pouvez crer un ensemble en vue d'une modification simplifie des lments
(exemple : regrouper tous les lments d'une barre de navigation afin de pouvoir
slectionner et dplacer tous ces lments en un seul clic ou une fois que lensemble est
cr et que le placement dans la page est dfinitif, verrouiller le calque pour
ancrer ces lments et quils ne soient plus slectionnables.

Copyright Intuisphere - Tous droits rservs

43

Manuel dutilisation WebAcappella 4 Juillet 2014


Les actions disponibles dans lexplorateur de calques et leur fonction :
- Ajouter un calque : ajoute un nouveau calques vide dans la listes des calques.
- Ajouter au calque : ajoute le ou les lment slectionn(s) dans l'espace de travail au
calque slectionn.
- Verrouiller le calque : les lments contenus dans un calque ne seront plus
slectionnables dans l'espace de travail (pour par exemple viter toute action non
dsire).
- Isoler le calque : permet d'isoler un lment ou un groupe d'lments prsents dans
un calque (le reste des lments de la page sera alors non slectionnable). Ceci
permet par exemple de modifier les attributs des lments prsents dans ce calque
(taille, bordure, opacit).
- Associer des calques : permet dassocier deux ou plusieurs calques slectionns.
- Dissocier les lments : permet d'enlever du calque les lments qui y sont prsents.
- Supprimer le calque : supprime le calque ainsi que les lments qui y ont t ajouts.
Voir aussi lexplorateur de calques.
Mots cls : Explorateur, Calques

Les pieds de page


Les pieds de page fonctionnent de la mme manire que les maquettes.
Les pieds de pages sont utiles pour crer le bas des pages de votre site Web. Des liens
vers les mentions lgales, les contacts, le copyright.... peuvent y tre intgrs.
Pour crer un pied de page
- Crez une nouvelle maquette (que vous pouvez renommer pied de page pour la
reconnatre plus facilement) et intgrez vos lments.

- Dans longlet Arrire plan , section Pied de page , cliquez sur Choisir un pied
de page .

Copyright Intuisphere - Tous droits rservs

44

Manuel dutilisation WebAcappella 4 Juillet 2014

- Slectionnez votre pied de page dans la liste des maquettes puis cliquez sur OK .
Note : Le pied de page napparat pas lors de la cration. Vous pourrez le voir
seulement en prvisualisation ou une fois le site en ligne.
Le pied de page sadapte automatiquement la hauteur de votre page et vient se
placer juste aprs le dernier lment, en bas de la page.
Attention : Si vous utilisez une maquette, appliquez directement le pied de page la
maquette. Il est impossible dappliquer une maquette et un pied de page en mme
temps.
Voir aussi : les maquettes
Mots cls : Maquette, Pied de page

La barre de multilangage
WebAcappella permet de crer et de grer des sites Internet multilingues.
La barre des langues, situe au dessus de lexplorateur de pages en haut gauche de
lcran, vous permet de passer aisment dune langue lautre lors de la cration du
site. Cette barre est uniquement visible lorsque le multilangage est activ sur votre site.
Voir aussi : activer le multilangage

Mots cls : Multilangage, Barre, Langues, Langage

Copyright Intuisphere - Tous droits rservs

45

Manuel dutilisation WebAcappella 4 Juillet 2014

GESTION DES RESSOURCES DE VOTRE SITE


Bibliothque des fichiers de votre site

L'icne

vous permet d'accder la bibliothque de fichiers.

Cet onglet vous permet de grer les fichiers ajouts votre site WebAcappella. Vous
pouvez les renommer, les supprimer ou bien les classer dans des dossiers.

Pour ajouter des fichiers la bibliothque de ressources et y avoir accs, cliquez sur le
bouton Ajouter des fichiers depuis votre ordinateur .
Le bouton Nettoyer les fichiers inutiliss supprime les fichiers non intgrs ou lis
aux pages de votre site.
Si vous effectuez des modifications sur un fichier, slectionnez-le puis cliquez sur
Rafrachir le fichier pour le mettre jour (importez la dernire version de votre
fichier depuis votre ordinateur).
Mots cls : Fichiers, Bibliothque des fichiers, Gestion, Fichiers inutiliss, Rafrachir le
fichier, Elments, Images, Ressources, Effacer

Copyright Intuisphere - Tous droits rservs

46

Manuel dutilisation WebAcappella 4 Juillet 2014

Bibliothque des images de votre site

L'icne

vous permet d'accder la bibliothque d'images.

Cet onglet vous permet de grer les images intgres dans votre site WebAcappella.
Vous pouvez les renommer, les supprimer ou bien encore les classer dans des dossiers.

Pour ajouter des images la bibliothque de ressources et y avoir accs, cliquez sur le
bouton Ajouter des images depuis votre ordinateur .
Le bouton Nettoyer les images inutilises supprime les images non intgres aux
pages de votre site.
Mots cls : Images, Bibliothques dimage, Gestion, Images inutilises, Importer des
images, Librairie

LES LMENTS DE VOTRE PAGE


Proprits gnrales des lments
La quasi totalit des lments ont certains paramtrages en commun :
- Les proprits gomtriques
- Les proprits du fond
- La transparence
- Les bordures

Copyright Intuisphere - Tous droits rservs

47

Manuel dutilisation WebAcappella 4 Juillet 2014

Proprits gomtriques des lments


Ces paramtrages, accessibles depuis l'inspecteur de chaque lment, vous permettent
de rgler avec prcision la taille de votre objet et son emplacement dans la page. Vous
pouvez aussi rgler l'angle de rotation de cet lment.
x : distance partir du bord gauche de la zone
de travail
y : distance partir du haut de la zone de travail
Largeur : Largeur de llment
Hauteur : hauteur de llment
En cochant la case Conserver les
proportions , le ratio Hauteur - Largeur
restera le mme si vous augmentez ou
diminuez la taille de l'lment. Enfin, sur
certains lments vous pouvez rgler avec
prcision l'angle de rotation.

Mots cls : Proprits des lments, Gomtrie, Rotation, Position, Taille, Conserver
proportions, Dimensions

Proprits du fond des lments


Ces paramtrages vous permettent d'appliquer une couleur ou une image de fond vos
lments pour personnaliser leur apparence.
Dgrad de couleur
Pour appliquer un dgrad de couleur en arrireplan dun lment activez-le en cochant la case
Dgrad . Choisissez les couleurs du dgrad
(vous pouvez choisir le degr dopacit des
couleurs ou faire simplement un dgrad vers une
transparence). Une fois les couleurs dtermines, vous pouvez dplacer les curseurs
afin de rgler lorientation et la force du dgrad.

Mots cls : Proprits, Fond, Image de fond, Couleur de fond, Dgrad

Copyright Intuisphere - Tous droits rservs

48

Manuel dutilisation WebAcappella 4 Juillet 2014

Transparence des lments


Chaque lment peut tre rendu plus ou moins
opaque.
Par dfaut, llment est opaque 100 % mais vous
pouvez rgler sa transparence en bougeant le curseur vers la gauche ou la droite.

Mots cls : Proprit, Fond, Transparence, Opacit, Pourcentage

Les bordures
Vous pouvez attribuer beaucoup dlments une bordure.
Vous avez le choix entre diffrentes options : coin, bordure et ombre porte. Ces
options vous permettent de varier lapparence des lments pour leur donner un aspect
graphique agrable.

Choisissez la taille des options de bordure grce aux menus droulants (exprim en
pixels).
Ombre porte
Exemples de paramtrages d'ombre porte :

Exemple 1

Copyright Intuisphere - Tous droits rservs

49

Manuel dutilisation WebAcappella 4 Juillet 2014

Exemple 2

Exemple 3

Mots cls : Proprits, Bordure, Coin, Ombre porte, Angle, Arrondi

Les lments
Bouton
Afin de crer vos liens ou vos menus, WebAcappella met votre disposition des
boutons de navigation entirement paramtrables. Pour insrer un bouton,
cliquez sur le menu Insertion - Ajouter un bouton , ou cliquez sur l'icne.
Aspect gnral du bouton
Dans cette partie choisissez la forme gnrale de votre bouton (vous pouvez paramtrer
le % darrondi du coin).

Copyright Intuisphere - Tous droits rservs

50

Manuel dutilisation WebAcappella 4 Juillet 2014

Aspects graphiques du bouton


Il est possible de dterminer laspect du bouton sur 3 tats :
- tat normal : bouton inactif
- tat survol : lorsque la souris passe dessus
- tat actif : lorsque le bouton correspond la page en cours de visualisation

Apparence du fond
Choisissez une couleur ou une image de fond pour votre bouton. Cliquez sur une des
deux cases pour slectionner une couleur sur la palette ou slectionner une image
depuis votre Bibliothque de ressources .
Si vous laissez coche la case Lien , les couleurs de bordure et de dgrad seront
automatiquement choisies par WebAcappella (pour obtenir un dgrad de tonalit). Si
vous dcochez cette case Lien vous pouvez alors choisir les couleurs que vous
souhaitez (afin d'obtenir un rsultat personnalis).
Attention : si vous cochez nouveau cette case, vos couleurs personnalises seront
nouveau remplaces par les couleurs automatiques.

Copyright Intuisphere - Tous droits rservs

51

Manuel dutilisation WebAcappella 4 Juillet 2014


Pictogramme
Loption Pictogramme vous permet dinsrer une image dans votre bouton afin de le
personnaliser. Si vous dcochez lutilisation du pictogramme dans ltat survol ou
dans ltat actif , le pictogramme de ltat normal sera alors utilis par dfaut.
Vous choisissez la taille de votre pictogramme (en %) grce au menu droulant.

Proprits du texte
Choisissez la couleur du texte de votre bouton. Vous pouvez le passer en gras ou bien
encore le souligner.

Proprits gnrales du texte


Entrez le texte qui apparatra sur votre bouton. Pensez adapter la taille du bouton la
taille de votre texte.
Vous pouvez aussi faire apparatre une info-bulle. Lors du survol de votre bouton, le
texte que vous aurez saisi apparatra dans une bulle. Cette option est pratique lorsque
vous dsirez dcrire quoi correspond le bouton.
Choisissez une police de caractre, sa taille et ses attributs (gras ou italique) et
dterminez lalignement de votre texte ( gauche, centr ou droite).
La marge intrieure dtermine lemplacement du texte dans le bouton. Plus le
pourcentage est lev, plus le texte sera loign des bords du bouton. La marge
intrieure est inefficace si le texte est centr.
Liens
Dans longlet Lien des proprits du bouton, choisissez la destination du lien
hypertexte de votre bouton (voir section Crer des liens Internet ).
Fonction Blog
Sur chaque bouton, vous pouvez ajouter la fonction Blog qui permettra vos
visiteurs de laisser un message ou de ragir vos articles.
Pour activer la fonction Blog, cliquez sur l'onglet Lien de l'inspecteur du bouton.
Slectionnez ensuite le type de lien Lien vers le Blog . Il suffit de cliquer sur ce
bouton pour laisser un message.

Copyright Intuisphere - Tous droits rservs

52

Manuel dutilisation WebAcappella 4 Juillet 2014

Vous pouvez indiquer le nombre de messages dans votre blog en inscrivant %


commentaires dans le nom de votre bouton. Vous pouvez tout fait personnaliser
votre message, le caractre % tant toujours remplac par le nombre de commentaires
sur ce blog.
Le champs Identifiant de votre Blog est gr par WebAcappella. Un code est
automatiquement gnr, code qui pourra tre copi puis coll dans un autre champ
Identifiant de votre blog d'un autre bouton. Ce systme permet de supprimer un
blog d'une zone de texte et de transfrer les messages dj posts vers un autre blog.
Voir prrequis techniques
Proprits gomtriques
Rglez avec prcision la taille de votre objet et son emplacement dans la page.
Voir proprits gomtriques

Mots cls : lment, Bouton, Pictogramme, Blog, Lien, Etat bouton

Image
WebAcappella vous permet
dintgrer autant dimages que
vous le dsirez et de les placer o
vous le souhaitez.
Cliquez sur licne Image ou
depuis le menu Insertion cliquez
sur Insrer une image .

Copyright Intuisphere - Tous droits rservs

53

Manuel dutilisation WebAcappella 4 Juillet 2014


Survol de limage
WebAcappella vous donne aussi la possibilit de crer un changement dimage au
survol de limage principale, donnant ainsi du dynamisme vos pages.
Cliquez dans le deuxime cadre et choisissez une image. Cette image de survol peut tre
enleve tout moment en cliquant sur la croix rouge.

Note : le survol de l'image est dsactiv si vous utilis l'effet de reflet.

Fancybox
L'option FancyBox vous permettra d'afficher un agrandissement de votre image au
sein mme de la page (dans une fentre flottante).

Activez cette option et testez votre page :


vous pourrez alors cliquer sur votre image
pour l'afficher en grand.

Note : si un lien est appliqu votre image, le lien sera report dans le commentaire
de l'image une fois affiche avec l'effet FancyBox.
Copyright Intuisphere - Tous droits rservs

54

Manuel dutilisation WebAcappella 4 Juillet 2014


La fonction Regrouper les images dans une galerie permet d'utiliser les images de
votre page (dont la fonction FancyBox est active) comme une galerie photo. Vous
pouvez crer plusieurs groupes d'images afin de les sparer ou de les regrouper
(images ayant par exemple le mme thme). Le chiffre attribu chaque image
dterminera sa position dans la galerie photo (par ordre croissant).
Le bouton Editer les proprits par dfaut fixe les rgles d'affichage de vos images
pour l'effet FancyBox (taille maximale d'affichage, effet, lecture en boucle,
commentaire). Les paramtres appliqus sont communs toutes les images utilisant
FancyBox.
Voir Prrequis techniques.
Proprits gomtriques

Rglez avec prcision la taille de votre objet et son


emplacement dans la page. Vous pouvez aussi rgler l'angle
de rotation. Voir : Proprits gomtriques
Mots cls : lment, Image, Survol Fancybox, Proprit,
Gomtrie, Rotation, Position, Taille, Dimension,
Proportion, Png, Jpg, Jpeg, Photo

Zone de texte
Ajoutez une zone de texte grce licne Texte ou par le menu Insertion Ajouter du texte .

Saisissez votre texte en double cliquant dans la zone. Diffrents styles de texte sont
votre disposition : lcriture en gras, italique et soulign, lalignement de votre texte
Copyright Intuisphere - Tous droits rservs

55

Manuel dutilisation WebAcappella 4 Juillet 2014


gauche, droite ou centr, le changement de couleur et de taille ainsi que de l'ombre
porte (non disponible si le texte est transform en image).
Vous avez la possibilit de crer, de modifier ou de supprimer des liens
hypertexte (internes ou externes) sur une partie ou sur lensemble de votre texte.
Si vous voulez quune zone de texte garde une certaine taille mais que votre texte est
plus long, la zone cre automatiquement une barre de dfilement verticale. Cette barre
peut tre en permanence visible ou uniquement prsente lors du survol du texte
(cochez la case Cacher automatiquement pour cette visualisation).
Le dfilement du texte (vertical ou horizontal) est aussi possible. Paramtrez les options
de dfilement directement dans l'inspecteur.
L'inspecteur vous permet aussi d'diter d'autres caractristiques de la zone de texte :
- Marge intrieur
- Couleurs des liens
- Bordure, dgrad, arrire plan et transparence
- Ombre porte
Transformer le texte en image
Cette option vous permet de transformer vos polices de caractre en image, sans
perturber le bon affichage de votre page.
Pour transformer du texte en image, placez-vous sur votre zone de texte et, via
l'inspecteur de proprits, cochez la case Transformer le texte en image .
Attention : Cette option dsactive les liens appliqus sur le texte ainsi que le
dfilement. Cette fonctionnalit est surtout conseille pour la transformation en
image de titres de paragraphe ou de nom de site. L'utilisation de cette fonction sur
l'ensemble des textes de votre site risque de fortement alourdir l'affichage de votre
page une fois en ligne. De plus les textes transforms en image ne sont pas pris en
compte pour le rfrencement de votre site.
Les Google Web Fonts
Les standards du web imposent un choix limit de
polices (Arial, Helvetica, Times, Verdana) afin que
l'affichage de votre site soit compatible sur tous les
ordinateurs.

Google web fonts est un service propos par Google. Il


vous permet d'utiliser des polices personnalises sur votre

Copyright Intuisphere - Tous droits rservs

56

Manuel dutilisation WebAcappella 4 Juillet 2014


site Web et fera en sorte que ces polices soient visibles par l'ensemble de vos visiteurs.
WebAcappella vous permet d'utiliser les Google web fonts dans votre site (sans avoir
coder).
Trouver et installer une police Google web fonts
- Rendez-vous cette adresse Internet : www.google.com/webfonts
- Ajoutez votre collection une ou plusieurs polices de caractre (en cliquant sur le
bouton - Add to collection )
- Cliquez sur le lien Download your collection situ en haut de page
- Cliquez ensuite sur Download the font families in your collection as a zip-file
- Enregistrez le fichier sur votre ordinateur et dcompressez-le.
- Installez sur votre ordinateur la ou les polices contenues dans le dossier en doublecliquant dessus.
Utiliser une police Google web font
- Les Google web fonts que vous avez tlcharges sont dsormais accessibles dans la
liste des polices disponibles sur votre ordinateur (et identifies grce l'icne jaune
place sur sa gauche).
- Vous pouvez maintenant utiliser cette police dans votre site WebAcappella. Cette
dernire sera visible par l'ensemble de vos visiteurs (qui n'ont pas besoin d'avoir cette
police d'installe sur leur ordinateur pour pouvoir la visionner correctement).

Note : Les polices garanties pour un bon affichage sur le Web ainsi que les Google
web fonts sont places en dbut de liste et identifies grce une icne jaune.

Copyright Intuisphere - Tous droits rservs

57

Manuel dutilisation WebAcappella 4 Juillet 2014


Balises Heading (H1, H2, H3)
L'utilisation de ces balises, pour l'optimisation du rfrencement de vos textes,
demande des connaissances en SEO.

Proprits gomtriques
Rglez avec prcision la taille de votre objet et son emplacement dans la page. Vous
pouvez aussi rgler l'angle de rotation. Voir : Proprits gomtriques

Mots cls : lment, Texte, Texte en image, Google Web Fonts, Heading, H1, H2,
Balise, UTF-8, Police personnalise, Caractre, Police, Style, Pixeliser

Album photo
Vous pouvez intgrer votre site Web un album photo paramtrable. Cliquez sur le
menu Insertion - Ajouter un album Photo .

Mode normal

Copyright Intuisphere - Tous droits rservs

Mode pleine page

58

Manuel dutilisation WebAcappella 4 Juillet 2014


Pour paramtrer votre album photo, l'inspecteur de proprits est divis en 5 onglets :
- Ajout dimages
- Paramtrages de lalbum photo
- Proprits du diaporama
- Proprits des commentaires
- Proprits gomtriques
Voir : Limitations de la version Gratuite.
Onglet ajout dimages
Pour ajouter des images votre album photo, cliquez sur
l'icne + et importez vos photos depuis votre bibliothque
d'images. Pour supprimer ou dplacer vos photos, utilisez la
barre d'outils situe droite de la liste. Vous pouvez aussi
choisir la taille maximum des images de votre album photo.
Double cliquez sur une de vos images ou slectionnez-en une,
puis cliquez sur

pour diter ses proprits.

Cadrage de la miniature
Le cadrage de la miniature vous permet de
slectionner une zone de limage qui
apparatra dans le slecteur dimages.
Slectionnez un format pour le cadrage et
dplacez la zone lendroit voulu sur votre
image. Par dfaut, limage est 100 % et
rogne sur les bordures pour former un carr
et sadapter aux miniatures du slecteur
dimages. Ce cadrage naffecte pas limage dans la zone de visualisation et dans le
diaporama. Les flches servent faire pivoter vos images (dans le sens horaire et
antihoraire).

Copyright Intuisphere - Tous droits rservs

59

Manuel dutilisation WebAcappella 4 Juillet 2014


Description
Le champ description correspond au texte qui apparatra dans la zone de
commentaires. Si le multilangage est activ, vous pouvez remplir ce champ avec
plusieurs langues.
Utiliser un album Flickr
Pour utiliser cette option, vous devez possder un compte utilisateur chez Flickr.
Si vous possdez un compte et des albums photo sur le service en ligne Flickr, importezles dans votre site en renseignant l'identifiant de votre album photo dans les champs
ddis cet effet (dans l'inspecteur de proprits de l'album photo en mode Flickr).
Onglet paramtrages de lalbum photo
Choisissez ici le mode d'affichage de votre album (Classique,
diaporama automatique ou dfilement image par image).
Dterminez la taille et l'espacement des miniatures, les
options d'affichage de la navigation, l'ombre porte et enfin
l'effet de transition entre les images (plus le curseur sera
plac gauche, plus les images auront un enchanement en
fondu).
Note : En mode diaporama automatique, les
commentaires de vos photos saffichent sur une seule
ligne (retour la ligne non pris en charge).

Onglet paramtres du diaporama


Choisissez ici d'autoriser ou non la lecture alatoire des images, le temps d'affichage de
chaque image (en secondes) et l'affichage du bouton donnant accs ce mode de
lecture en diaporama.

Copyright Intuisphere - Tous droits rservs

60

Manuel dutilisation WebAcappella 4 Juillet 2014


Onglet paramtres des commentaires
En cochant ou dcochant la case Afficher les commentaires vous rendrez visible ou
invisible la zone de commentaires.
Vous pouvez aussi dterminer les paramtres d'attribution de nom vos photos.
Enfin, vous pouvez choisir de faire apparatre ou non les info-bulles personnalises de
vos miniatures.
Onglet proprits gomtriques
Vous pourrez rgler avec prcision la taille de votre objet et son emplacement dans la
page.
Voir : Proprits gomtriques

Mots cls : lment, Album photo, Miniature, Diaporama, Image principale,


Slecteur dimages, Image dfilante, Pleine page, Cadrage, Commentaires, Vitesse,
Slideshow, Remarques

Couleur
Cliquez dans le menu Insertion puis sur Couleur . Une zone de couleur apparat.
Vous pouvez la redimensionner et choisir sa couleur ou son image darrire plan.
Vous pouvez par la suite rgler son degr
de transparence et lui attribuer une
bordure.
De mme, vous pouvez appliquer un
dgrad, des coins arrondis ainsi quun
effet dombre porte.
Vous avez accs galement ses
proprits gomtriques.
Note : En rglant son ordre dapparition dans la page (premier plan, arrire plan,
avancer, reculer), vous pouvez vous servir de cet lment comme base dune
cration graphique pour votre site.
Mots cls : lment, Zone de couleur, Aplat, Forme gomtrique

Copyright Intuisphere - Tous droits rservs

61

Manuel dutilisation WebAcappella 4 Juillet 2014

Menu dynamique
Le menu dynamique facilite la navigation dans votre site en vous proposant un systme
de menus et de sous-menus.
Organisation de votre menu
Pour crer un menu principal, slectionnez Menu dynamique , puis cliquez sur
Pour un sous-menu, placez-vous sur un menu principal et cliquez sur

Dans la fentre Nom du menu , vous pouvez renommer vos menus et sous-menus
puis leur attribuer un lien.
Rorganisez votre menu grce aux boutons Monter et Descendre .
Apparence de votre menu
Longlet Aspect du menu dynamique permet de rgler lapparence de votre menu
et de vos sous-menus.

Choisissez lorientation, le fond, la police de caractre, la couleur des sparateurs, le


style qui apparatra lors du survol du texte, lapparence des coins, la bordure, les
proprits gomtriques...
Mots cls : lment, Bouton, Menu dynamique, Navigation, Sous-menu

Copyright Intuisphere - Tous droits rservs

62

Manuel dutilisation WebAcappella 4 Juillet 2014

Frame dynamique
L'lment frame dynamique vous permet de crer un groupe d'lments une seule fois
dans une sorte de maquette pour l'utiliser ensuite de manire rgulire sur les
diffrentes pages de votre site (placement libre). De plus, lorsque vous modifiez votre
maquette, toutes les frames dynamiques qui pointent vers cette maquette seront aussi
modifies.
Pour utiliser une frame dynamique :
- Crez une nouvelle maquette partir de l'explorateur
de maquettes
- Crez, dans la zone de travail, une composition que
vous serez amen utiliser rgulirement dans vos
pages (mais que vous souhaitez placer des endroits
diffrents des pages).
- Dans une page de votre site en construction, ajoutez
un lment
Frame dynamique .

- Slectionnez la maquette dans laquelle se trouve votre composition.


- Le contenu de cette maquette est automatiquement affich dans la frame dynamique
que vous pouvez placer librement dans votre page.

Mots cls : Frame dynamique, Maquette, Zone dynamique

Copyright Intuisphere - Tous droits rservs

63

Manuel dutilisation WebAcappella 4 Juillet 2014

Moteur de recherche
Le moteur de recherche intgr
WebAcappella permet de rechercher un ou
plusieurs mots dans les textes de votre
site. Aucun paramtrage de fonctionnement n'est requis.
Pour que votre moteur de recherche affiche des rsultats personnaliss (afin d'obtenir
des informations sur les pages donnes en rsultat) les paramtres de rfrencement
de vos pages doivent tre renseigns. Voir aussi le rfrencement des pages.
Les textes saisis dans les champs Titre de votre page Web et Description de
votre page Web seront les informations
affiches dans les rsultats des recherches.
Pour ajouter un moteur de recherche
votre site, cliquez sur Insertion -
Moteur de recherche .
Modifiez ensuite laspect visuel du champs
de saisie (le texte et le bouton). Vous avez
accs galement aux proprits
gomtriques.
Pour lancer une recherche, testez ou publiez
votre site. Saisissez un terme dans le champ
et cliquez sur le bouton (ou appuyez sur la
touche Entrer ).
Les rsultats de votre recherche s'affichent alors dans une fentre en superposition.
Vous pouvez ensuite effectuer une nouvelle recherche, cliquer sur un lien ou fermer la
fentre.
Astuce : nous vous conseillons d'insrer le moteur de recherche dans une maquette
ou dans chacune de vos pages pour autoriser la recherche n'importe quel moment.
Mots cls : lment, Moteur de recherche

Formulaire de contact
Cet lment vous permet de crer un formulaire de contact pour votre site.
Choisissez les champs que vous dsirez voir apparatre, lapparence de votre formulaire
Copyright Intuisphere - Tous droits rservs

64

Manuel dutilisation WebAcappella 4 Juillet 2014


ainsi que les paramtres denvoi du mail.

Note : les chiffres placs droite des champs sont des repres visuels vous
permettant d'identifier rapidement le champ que vous souhaitez modifier.

L'inspecteur du formulaire de contact est divis en cinq principales catgories


- Les champs du formulaire
- Le style visuel des champs
- Les boutons de votre formulaire
- Le style visuel du fond du formulaire
- Les proprits gomtriques
Les champs du formulaire
Ajoutez, supprimez ou dplacez vos champs grce aux boutons disponibles sous
l'intitul Gestion des champs .
La liste droulante Champ en cours d'dition vous permet de naviguer entre les
diffrents champs de votre formulaire.
Attribuez le nombre maximum de caractres insrables la zone en cours ddition.
Dterminez le type de zone que vous dsirez insrer et saisissez son intitul dans le
champ Nom de la zone :
- Texte en lecture seule : texte libre en lecture seule.
- Email : texte qui devra obligatoirement tre format comme une adresse email
(xxxxx@xxxx.com). WebAcappella vrifie le formatage de l'adresse email.
- Texte ditable : zone de texte remplir par lutilisateur (exemples : nom,
prnom...). Vous avez la possibilit de saisir un texte d'exemple dans le champs
Copyright Intuisphere - Tous droits rservs

65

Manuel dutilisation WebAcappella 4 Juillet 2014


Message par dfaut . Exemple : Saisir ici votre nom .
- Texte ditable large : texte libre o lutilisateur peut saisir son message.
Paramtrez la hauteur du champ en pixels et en nombre maximum de caractres.
- Choix multiples : ce type de champs vous permet d'ajouter un menu droulant
dans votre formulaire. Dans le champs Liste des valeurs saisissez votre liste de
choix en sparant les valeurs par une virgule (exemple : M.,Mlle,Mme). Vous avez aussi
la possibilit de choisir une des valeurs saisies comme valeur par dfaut de votre menu
droulant grce Elment slectionn par dfaut .
Si vous dsirez quun champ soit obligatoirement rempli par lutilisateur du formulaire,
cochez la case Champ obligatoire .
Pour que les mails envoys depuis le formulaire vous parviennent, remplissez les
champs Intitul du mail et Destinataire avec votre adresse e-mail.
Forcer la rponse du mail avec le champ email du formulaire En activant cette
option, lorsque vous recevrez un mail en provenance de votre site, quand vous cliquerez
sur Rpondre ou Transfrer depuis votre messagerie (Gmail, Yahoo...) l'adresse
email du message sera automatiquement reconnue et utilise comme adresse email de
rponse.
Note : cette option est fonctionnelle uniquement si votre formulaire contient un
champ de type Email .
Le style visuel des champs
Vous pouvez appliquer une couleur darrire-plan et une bordure vos champs et
modifier lapparence de votre texte (pour le nom des champs).
Les boutons de votre formulaire
La couleur des boutons et du texte peut tre modifie en mode normal et survol.
Choisissez aussi le style de texte de vos boutons.
Vous avez enfin le choix de faire apparatre ou non le bouton Effacer qui sert
supprimer tout le contenu saisi dans les champs ditables du formulaire.
Fond
Paramtrez enfin le fond de votre formulaire : couleur/image de fond, bordure, ombre
porte et transparence.
Voir Prrequis techniques.

Mots cls : lment, Formulaire de contact, Champ, Questionnaire

Copyright Intuisphere - Tous droits rservs

66

Manuel dutilisation WebAcappella 4 Juillet 2014

Google Maps
Ajoutez des plans Google Maps dans vos pages.
Insrez l'lment Google Maps et choisissez sa taille. Insrez ensuite votre adresse
complte dans le champs ddi cet effet de l'inspecteur de proprits. Vous pouvez
galement paramtrer la bordure et les proprits gomtriques.
Votre plan s'affiche automatiquement dans votre page.

Mots cls : lment, Google Maps, Plan, Elment, Carte, Rue

Produits
Voir rubrique e-commerce

Bouton Panier
Voir rubrique e-commerce

Bouton Compte Client


Voir rubrique e-commerce

Bouton Devises
Voir rubrique e-commerce
Audio

Copyright Intuisphere - Tous droits rservs

67

Manuel dutilisation WebAcappella 4 Juillet 2014


Pour intgrer un lment audio votre site, cliquez sur le menu Insertion puis sur
Audio .

L'inspecteur de l'lment audio vous permet de :


- Choisir le lien vers votre son (format .mp3 impratif) depuis la bibliothque de
ressources (grce au bouton + ) ou depuis une adresse Internet.
- Paramtrer les options de lecture ( Lancer au dmarrage , Rpter et Volume
par dfaut ).
- Paramtres gomtriques
Note : Votre lment audio est lu en streaming. Ceci signifie qu'il na pas besoin
dtre compltement charg pour que la lecture commence.
Limitations de la version Gratuite.

Mots cls : lment, Son, Sonore, Musique, Audio,

Vido
Pour intgrer une vido votre page, cliquez sur le menu Insertion puis sur
Elment vido .
Vous pouvez insrer des vidos hberges en ligne sur les sites Youtube, Dailymotion
ou Myspace.
Collez dans le champ de l'inspecteur vido le code d'intgration que vous souhaitez
mettre en place.
Dans Youtube par exemple, le code d'intgration se situe dans : lien Partager puis
cliquez sur le lien Intgrer .
Mots cls : lment, Vido, Youtube, Dailymotion, MySpace, Vido en ligne, Film

Flash

Copyright Intuisphere - Tous droits rservs

68

Manuel dutilisation WebAcappella 4 Juillet 2014


Vous pouvez insrer vos propres animations Flash (au format SWF) dans
WebAcappella.
Cliquez sur Ajouter une animation Flash .
Vous pouvez donner un nom votre animation dans le champs Titre .
- Lien vers une adresse Internet : entrez ladresse de lanimation Flash (en entier).
- Lien vers un fichier : slectionnez votre animation ou ajoutez-la dans lexplorateur de
fichiers en cliquant sur Ajouter un fichier , puis slectionnez le fichier import
depuis votre ordinateur.
Les utilisateurs expriments ayant cr eux mme leur animation Flash peuvent
modifier les paramtres de leur animation via la fentre de paramtrage des noms et
valeurs.
Mots cls : lment, Flash

Frame
Une frame est une fentre lintrieur mme dune page dont le contenu est
indpendant du reste de la page. Elle peut avoir les dimensions que vous souhaitez.
Le contenu d'une frame est directement visible dans l'espace de travail.
Diffrents types de liens peuvent tre appliqus une frame :
Lien vers une page de ce site Web
Slectionnez dans le menu droulant Lien vers une page de ce site Web . Choisissez
une page de votre site qui apparatra alors dans la frame.
Lien vers un fichier
Ce lien ouvrira le fichier slectionn lintrieur de la frame condition que votre
navigateur Internet soit quip des fonctionnalits ncessaires sa lecture (Adobe PDF
Reader, images, fichiers en .txt texte simple...). Dans le cas contraire, le fichier sera
ouvert de manire externe (en dehors de votre navigateur Internet) par le logiciel
correspondant au fichier (Word, Excel).
Slectionnez Lien vers un fichier dans le menu droulant. Cliquez ensuite sur
Ajouter un fichier et slectionnez le fichier voulu.
Lien vers une adresse Internet

Copyright Intuisphere - Tous droits rservs

69

Manuel dutilisation WebAcappella 4 Juillet 2014


Votre frame aura pour contenu un site Internet dont vous aurez dtermin ladresse.
Note : pensez adapter la taille de votre frame au site Internet mis en lien.
Slectionnez Lien vers une adresse Internet puis tapez ladresse Internet dans le
champ correspondant.
Limitations dans certains navigateurs.
Mots cls : lment, Frame, Position

Code HTML
Vous avez la possibilit de saisir vous-mme du code HTML et de lincorporer dans
la page en cours de cration. Des notions en codage sont ncessaires.
Dans le menu Insertion , cliquez sur Ajouter une zone de code HTML .
Saisissez votre code dans la fentre prvue cet effet dans l'inspecteur et gardez la case
Activer le code HTML ci-dessous coche. Placez votre zone dans votre page (dans
certains cas pensez adapter la taille de la zone au contenu de votre code).
Note : Certains codes HTML peuvent perturber l'affichage de votre site
WebAcappella.
Astuce : $wa_var.LANG Cette variable peut tre utilise n'importe o dans un
code et sera remplace par le code langue de la page courante (utilisateurs
expriments).
Limitations dans certains navigateurs.
Mots cls : lment, Code HTML, Variable

Copyright Intuisphere - Tous droits rservs

70

Manuel dutilisation WebAcappella 4 Juillet 2014

PARAMTRAGES DE

WEBACAPPELLA

Copyright Intuisphere - Tous droits rservs

71

Manuel dutilisation WebAcappella 4 Juillet 2014

PARAMTRAGES
COMMENT PARAMTRER WEBACAPPELLA

PRFRENCES DE WEBACAPPELLA
Prfrences gnrales
Prfrences des images de votre site
Navigateur Internet de votre site
Langue de l'application
Grille magntique

Prfrences gnrales
Cet onglet des prfrences de WebAcappella vous permet de modifier le dossier dans
lequel vos sites seront enregistrs sur votre ordinateur.

Modifier le dossier de destination de vos sites Web est rserv aux experts. Ceci est utile
pour sauvegarder vos espaces Web ailleurs que dans la partition Systme.
Mots cls : Prfrences, Gnral, Dossier stockage projets, Chemin daccs

Prfrences des images de votre site


Vous pouvez ici choisir le taux de compression des images du site Web.
Par dfaut il est 80 %, ce qui donne un bon compromis entre la qualit visuelle et le
poids dimage (pour aucune dtrioration de la qualit des images mettez 100 %).
Dterminez aussi la taille maximum quune image peut avoir sur votre site.

Copyright Intuisphere - Tous droits rservs

72

Manuel dutilisation WebAcappella 4 Juillet 2014

Compression des images (JPEG)


Lorsque vous publiez vos images JPEG elles sont compresses suivant les paramtres
que vous avez dfinis dans les options (exemple : une image dorigine est importe sans
compression, si vous lenvoyez avec la qualit 70 % son poids sera diminu et sa
qualit baisse).
Vous pourrez dterminer le rglage optimal en effectuant des essais.
Taille maximale des images
Vous pouvez aussi rgler la taille maximale des images qui seront intgres dans votre
site (par dfaut en 1024 x 1024 pixels).
Lorsque vous importez des images dans votre projet WebAcappella, si leur taille est
suprieure la taille dfinie dans cette option, elles seront automatiquement
redimensionnes. Cette option n'a pas d'influence sur l'apparence des images sur votre
site.
Ce paramtrage est utile pour optimiser la taille de vos projets WebAcappella et de votre
sauvegarde. Nous vous conseillons de laisser 1024 x 1024 par dfaut.
Format des images importes en gliss/dpos
Par dfaut, WebAcappella importe vos images glisses/dposes (par exemple depuis
votre navigateur Internet) au format JPEG.
Cependant, vous pouvez choisir dans cette fentre le format PNG comme format par
dfaut.
Si vous cochez la case Toujours montrer la fentre de choix , chaque import
d'image WebAcappella vous demandera quel format vous souhaitez utiliser.
Mots cls : Prfrences, Images, Taille, Qualit, Compression, JPEG, PNG, Format,
Rendu, Niveau

Copyright Intuisphere - Tous droits rservs

73

Manuel dutilisation WebAcappella 4 Juillet 2014

Navigateur internet de votre site


Vous pouvez choisir le navigateur Internet utilis par WebAcappella pour effectuer la

prvisualisation de votre site et la navigation sur Internet.

WebAcappella est automatiquement configur pour utiliser le navigateur par dfaut de


votre systme.
Mots cls : Prfrences, Navigateur Internet, Exploreur, Safari, Chrome, Firefox,
Opera.

Langue de lapplication
Choisissez ici la langue de l'application.

Copyright Intuisphere - Tous droits rservs

74

Manuel dutilisation WebAcappella 4 Juillet 2014

Aprs avoir cliqu sur OK, l'interface de WebAcappella passera automatiquement dans
la langue slectionne.
Cliquez sur la case Activer le correcteur orthographique pour que WebAcappella
vrifie en temps rel l'orthographe et la grammaire lors de la saisie.

Note : Le correcteur orthographique est uniquement disponible sur Mac.

Attention : si le multilangage n'est pas activ sur votre site, pensez vrifier que la
langue par dfaut de votre site soit bien la langue avec laquelle vous crivez
(slectionner Franais si vous crivez en franais et inversement avec l'anglais).

Grille magntique
Cet onglet vous permet de grer la grille magntique de l'espace de travail et l'attraction
entre les lments.

Choisissez le nombre de points afficher dans la grille magntique de l'espace de


travail. Plus le pas est important, plus les points de votre grille magntique seront
espacs.
Mots cls : Prfrences, Grille, Magntique, Attraction

PROPRITS DU SITE WEB


Rfrencement - SEO
Activer et utiliser le multilangage
Grer la protection de vos pages
Fonctions avances des proprits du site Web
Rglages Apache

Copyright Intuisphere - Tous droits rservs

75

Manuel dutilisation WebAcappella 4 Juillet 2014

Rfrencement SEO
WebAcappella gre des aspects techniques lis au rfrencement naturel de votre site.
Remplissez pour cela les champs destins au rfrencement et cochez la case Gestion
automatique du Site Map . Voir aussi : Sitemap.
Limitations de la version gratuite.
Le rfrencement de votre site se fait via les proprits de votre site Web et via les
proprits de la page.
Site Web : Accessible depuis le menu Site Web - Proprits du site Web .

Le champs titre de votre page Web ou balise title est celle qui saffiche en
premier dans le moteur de recherche. Cette balise est galement utilise quand vous
marquez un site dans vos favoris. Nous vous conseillons de nutiliser que 60 caractres
pour la rdiger (espaces compris).
Le champs description de la page Web ou balise description saffiche en dessous
du titre dans les rsultats des moteurs de recherche. Elle doit dcrire en deux ou trois
phrases courtes le contenu de la page. Nous vous conseillons de faire une description
diffrente pour chaque page. Utilisez au maximum 160 caractres.

Copyright Intuisphere - Tous droits rservs

76

Manuel dutilisation WebAcappella 4 Juillet 2014


Le champs Mots cls utiliss par les moteurs de recherche ou balise mots cls .
Indiquez des mots cls en rapport avec le contenu de la page spars par des virgules
(exemple : cration, site, WebAcappella). Cette balise est peu prise en compte par les
moteurs de recherche aujourdhui.

Mots cls : Rfrencement, Site web, Page, SEO, Balise title, Balise description, Balise
mots-cls

Sitemap
Les sitemaps permettent de signaler Google des pages de son site qui nauraient pas
t dtectes par ses robots. Un sitemap est un fichier au format XML qui contient la
liste des pages de son site web.
Voici les cas les plus frquents dutilisation dun sitemap :
- Toutes les pages de votre site nont pas t dtectes par Googlebot lors du processus
dexploration (les pages prsentant du contenu AJAX ou des images, par exemple).
- Votre site est rcent et seul quelques liens permettent dy accder. Googlebot explore
le web en suivant les liens entre les diffrentes pages. Par consquent, si le systme de
liens de votre site nest pas cohrent, les robots auront des difficults la dtecter.
- Votre site contient de nombreuses pages de contenu mal ou non relies entre elles.
Mots cls : Rfrencement, Site web, Proprits du site web, Sitemap, Site map, SEO,
Fichier XML

Google Analytics (statistiques)


Accdez Google Analytics (www.google.com/intl/fr_ALL/analytics/index.html) puis
cliquez sur le bouton Se connecter situ en haut droite de lcran.
Si vous avez dj un compte Google (Gmail notamment), renseignez vos identifiants de
connexion (E-mail et Mot de passe). Si vous navez pas encore de compte, cliquez sur le
bouton Crer un compte situ en haut droite de lcran et enregistrez-vous.
Installer Google Analytics
Il vous faut tout dabord dclarer votre site Google Analytics depuis lespace Admin
sur le site Google Analytics. Cliquez sur Nouveau Compte puis Site Web et
Copyright Intuisphere - Tous droits rservs

77

Manuel dutilisation WebAcappella 4 Juillet 2014


renseignez tous les champs. Pour finir, cliquez sur Obtenir un ID de suivi . Vous allez
obtenir un identifiant sous la forme UA-XXXXXXXX.
Dans WebAcappella, collez votre code UA-XXXXXXXX dans le champ cet effet en bas de
la fentre Proprits du Site Web (menu Site Web , proprits du Site Web )
et cliquez sur OK.

Publiez ensuite votre site sur internet. Vos statistiques apparatront dans les jours qui
suivent.
Mots cls : Rfrencement, Site web, Proprits du site web, Analytics, SEO

Activer et utiliser le multilangage


Si vous le souhaitez, vous pouvez rendre votre site multilingue en activant la gestion du
multilangage.
Lactivation du multilangage sur un site WebAcappella se fait en deux tapes :

Activer la gestion du multilangage


Cliquez dans le menu Site Web Proprits du site Web - Onglet
Gestion du mutilangage .
Ensuite, en bas, cliquez sur la case
Activer la gestion du
multilangage .
Choisissez les langues que vous
voulez utiliser (vous pouvez en
ajouter, en enlever et dterminer
leur priorit). La premire langue de
la liste (langue par dfaut) sera celle
qui apparatra lors de l'accs la
page d'accueil de votre site.
Copyright Intuisphere - Tous droits rservs

78

Manuel dutilisation WebAcappella 4 Juillet 2014

La premire partie de cette fentre vous permet de choisir la langue qui sera applique
sur des lments comme certains boutons prformats (exemple : bouton Envoyer
du formulaire de contact).

Activer le multilangage sur les pages


A vous de dcider si vous voulez quune page soit multilingue ou non. Si vous nactivez
pas le multilangage sur une page, elle sera dite dans la langue par dfaut.
Dans la page en cration, cliquez sur le premier icne de la barre du multilangage pour
ouvrir la fentre du multilangage de la page. En cochant la case Activer le
multilangage sur la page courante , le multilangage sera actif.
D'origine, la case nest pas coche et la page sera dite dans la langue par dfaut.

Ensuite, naviguez dune langue lautre grce la barre des


langues (en haut gauche) pour intgrer vos traductions.

Note : si vous avez dj saisi du texte dans votre page avant l'activation du
multilangage (zone de texte, bouton, menu...), vous pouvez rcuprer ce texte par
l'action suivante : effectuez un clic droit dans la page et cliquez sur Remplir le
texte de la page partir d'une autre langue .
Dans la fentre qui saffiche, slectionnez Langue par dfaut et cliquez sur OK
pour valider.

Limitations de la version Gratuite.

Mots cls : Multilangage, Proprits du site web, Langue par dfaut, Langage

Copyright Intuisphere - Tous droits rservs

79

Manuel dutilisation WebAcappella 4 Juillet 2014

Grer la protection de vos pages


WebAcappella vous permet de protger l'accs aux pages de votre site Web grce un
mot de passe. Vous pouvez aussi bloquer le clic droit sur votre site Web.

La protection dune page par un mot de passe se fait en deux tapes :


1. Affichez les proprits du site Web ( Site Web - Proprits du site Web . Dans
longlet Protection des pages , remplissez le champ avec un mot de passe de votre
choix. Vous pouvez tout moment changer ce mot de passe mais noubliez pas den
informer vos visiteurs.
2. Affichez les proprits de la page que vous dsirez protger par un mot de passe.
Dans longlet Protection de la page cochez la case Cette page est protge par
un mot de passe . Lorsque votre site sera mis en ligne ou en mode aperu, une
fentre de dialogue apparatra vous demandant de saisir votre mot de passe.
Remplissez le champ avec le mot de passe que vous avez choisi et cliquez sur OK .
Voir aussi protection de la page

La protection du contenu de vos pages par le blocage du clic droit


Avec WebAcappella vous pouvez empcher le clic droit de la souris et la slection de
texte sur vos pages, afin de protger les ressources textes et images de votre site.
Affichez les proprits de votre site Web et dans longlet Protection des pages
cochez la case Bloquer le clic droit de la souris sur vos pages .
Mots cls : Protection, Site web, Mot de passe, Clic droit, Interdire, Accs

Copyright Intuisphere - Tous droits rservs

80

Manuel dutilisation WebAcappella 4 Juillet 2014

Fonctions avances des proprits du site web


Section Code HTML
Cet onglet vous permet lajout de code HTML dans la partie Head de la page gnre
par WebAcappella (rserv aux utilisateurs expriments). Cette zone ditable va vous
permettre dinsrer des outils du type Google webmaster Tools

Favicon
Le favicon est une image de petite taille qui sera place dans votre navigateur Internet,
ct de l'adresse Internet de votre site. Cette image peut aussi apparatre sur le ct
gauche d'un onglet de navigation (sur les navigateurs supportant la gestion d'onglet).
Le favicon peut par exemple correspondre au logo de votre socit.
Nous vous conseillons de choisir une image au format carr afin d'viter toute
dformation.

Copyright Intuisphere - Tous droits rservs

81

Manuel dutilisation WebAcappella 4 Juillet 2014

Gestion du screenshot de votre site web


Cette partie vous permet de grer la capture dcran qui pourra tre utilise lors de
linscription de votre site sur les annuaires et sites utilisant le systme Ascreen .
WebAcappella utilise par dfaut une capture dcran automatique de la page daccueil
de votre site. En dcochant la case Gestion automatique et en cliquant sur le
bouton Choisir un screenshot vous pourrez choisir votre propre image.
Cette image est enregistre au format ascreen.jpg .

Gnration des pages


Forcer le rendu IE7 avec IE9
Sur Internet Explorer 9, lorsqu'un site est affich dans une frame avec une redirection
transparente, des problmes de navigation peuvent survenir.
Cette option permet de contourner cette limitation de Internet Explorer 9. Nous vous
conseillons de laisser cette case dcoche.

Encodage des caractres de la balise Head en UTF-8


En cochant cette case, l'encodage des caractres de votre balise head sera transform
en UTF-8. Les caractres accentus et spciaux (tels que , , , &, $, ...) seront affichs
dans le code source de votre page (certains hbergeurs n'acceptent pas cette option).
Mots cls : Avanc, Site web, Head, Code HTML, Screenshot, Ascreen, IE7, IE9,
Gnration des pages, UTF-8

Rglages Apache
Utiliss pour paramtrer la scurit et l'accs au contenu de votre site, ces rglages sont
rservs aux utilisateurs expriments possdant de bonnes connaissances en codage
et dveloppement Web.
Pour en savoir plus sur ces fonctionnalits, vous pouvez consulter le lien ci-dessous :
fr.wikipedia.org/wiki/Htaccess
Mots cls : Apache, HTaccess, HTpassword

Copyright Intuisphere - Tous droits rservs

82

Manuel dutilisation WebAcappella 4 Juillet 2014

PROPRITS DE LA PAGE
WebAcappella vous permet de personnaliser les proprits de vos pages.
Vous pourrez travailler entre autre le rfrencement de votre site, modifier larrire plan
de la page, ou insrer une maquette...
- Le rfrencement de la page
- Arrire plan et taille de la page
- La protection de la page
- Le multilangage
- Les options avances

Rfrencement de la page SEO


Comme nous lavons prcdemment voqu, le rfrencement de votre site se fait via
les proprits de votre site Web et via les proprits de la page.
Via les proprits de la page : pour un rfrencement individuel des pages, allez dans le
menu Page/Maquette - Proprits de la page (ou bien encore via un clic droit
ou un double clic dans la page).

Cet onglet vous permet aussi de donner un nom votre page et ainsi remplacer
lintitul crbst_xx par un nom de votre choix (exemple : pagecontact ou albumphoto).
Ce nom fera partie de lURL de la page de votre site (il sagit dun point important pour le
rfrencement). Il est impratif de ne pas mettre despaces ou de caractres spciaux.

Copyright Intuisphere - Tous droits rservs

83

Manuel dutilisation WebAcappella 4 Juillet 2014


Note : Seul le nom de la page d'accueil (index.html) de votre site ne pourra tre
modifi.
Si votre site est multilingue, vous pouvez rfrencer votre site dans les diffrentes
langues grce au menu droulant.
Voir aussi : le rfrencement du site, les balises H1
Limitations de la version Gratuite.
Mots cls : Rfrencement, Site web, Proprits de la page, Site map, SEO, Balises
Meta, Balise title, Balise description, Balise mots-cls

Arrire plan et taille de la page


Vous pouvez choisir la couleur ou limage
darrire-plan de votre page en cours.

Rptition d'une image en arrire plan de page


- Rpter horizontalement : votre image sera rpte sur toute la largeur de votre fond
de page
- Rpter verticalement : votre image sera rpte sur toute la hauteur de votre fond de
page
Combiner les deux types d'alignement donnera un effet de mosaque.
Alignement d'une image en arrire plan de page
- Dfaut : l'image sera aligne sur la gauche de votre zone de travail
- Gauche : l'image sera aligne sur la gauche de larrire plan de page (elle bougera en
mme temps que la largeur de fentre de votre navigateur Internet)
- Centr : l'image sera aligne au centre de la zone de travail et de larrire plan de page
Option Fond statique : cette option permet votre fond de page de ne pas dfiler
lorsque vous faites dfiler le contenu de votre site.
Attention : Activer cette option peut dgrader les performances d'affichage de
WebAcappella et de votre navigateur Internet.

Copyright Intuisphere - Tous droits rservs

84

Manuel dutilisation WebAcappella 4 Juillet 2014

Modifier la taille de votre page


Changez la hauteur et la largeur grce aux menus droulants (les dimensions sont
exprimes en pixels).
Si vous cochez la case Plan de travail centr lors de la publication , votre site sera
automatiquement centr dans votre navigateur Internet et dans votre espace de travail.
Si vous dcochez cette case, la page sera aligne gauche.

Note : llment plac le plus bas dans la page dterminera la fin de votre page et
par consquent la fin du dfilement vertical.
Pour aller plus loin dans la gestion de larrire-plan, vous pouvez consulter la
partie Maquettes .
Mots cls : Proprits de la page, Arrire plan de la page, Fond de la page, Taille,
Plan de travail, Image de fond, Centrer, Format

Protection de la page
Cette partie vous permet de protger laccs votre page par un mot de passe.
Cochez la case pour protger votre page par le mot de passe.

Le mot de passe est dterminer dans les proprits du site Web.


Mots cls : Proprits de la page, Protection, Mot de passe, Interdire, Scurit,
Scuriser

Copyright Intuisphere - Tous droits rservs

85

Manuel dutilisation WebAcappella 4 Juillet 2014

Activer le multilangage sur les page


Voir : Activer et utiliser le multilangage

Options avances de la page


Cet onglet vous permet lajout de code dans la partie Head de la page HTML gnre
par WebAcappella (rserv aux utilisateurs expriments).

Page en construction
Si une page de votre site n'est pas encore prte tre publie, mais que vous souhaitez
publier les autres pages, cochez cette case pour que le contenu de la page en cours
n'apparaisse pas une fois publie sur votre hbergement.
Mots cls : Proprits de la page, HTML, Head, Crbst, Nom de la page, Page en
construction

Copyright Intuisphere - Tous droits rservs

86

Manuel dutilisation WebAcappella 4 Juillet 2014

FONCTIONNALITS AVANCES
Rafrachir votre site
Rafrachir votre site WebAcappella vous permettra de le rgnrer entirement.
Menu Site Web , Rafrachir le site Web .

Cette fonction est particulirement utile lorsque le site a t effac ou modifi en


dehors de WebAcappella (via un FTP par exemple).
Rafrachissez aussi votre site aprs une publication si des problmes ont t constats
(par exemple sil manque des fichiers ou que laffichage est incomplet).
De mme, le changement des options dune image ne sera pris en compte quaprs
avoir rafrachi votre site.
Mots cls : Rafrachir site web, Renouveler

Importer un dossier de site WebAcappella (version 3 ou 4)


Un dossier de site WebAcappella (3 ou 4) peut tre import dans WebAcappella 4.
Cliquez sur Importer un dossier de site WebAcappella et slectionnez le dossier de
votre site. Cette manipulation peut seffectuer depuis votre site en construction ou
depuis un site vierge.
Note : Pour limport dun dossier WebAcappella 3 dans 4 un travail d'adaptation du
design est trs certainement prvoir. Certains lments ont t redesigns (lecteur
audio et vido, boutons, album photo), des effets ont t rendus indisponibles (effet
de flou) et d'autres fonctionnalits ont vu le jour (Google Web Fonts, transformation
du texte en image...).

Mots cls : Importer, Dossier, Restaurer, Sauvegarde, WebAcappella 3,


Ancienne version

Copyright Intuisphere - Tous droits rservs

87

Manuel dutilisation WebAcappella 4 Juillet 2014

Fentres de dialogue du site


Ces options vous permettent de choisir les
couleurs qui apparatront sur les diffrentes
fentres en superposition sur votre site telles
que les rsultats du moteur de recherche ou les
blogs.
La fentre d'aperu vous permet d'apprcier le
rendu visuel en temps rel.
Ces paramtres sont accessibles depuis
l'inspecteur de proprits des lments utilisant ces types de fentres et depuis le menu
Site Web - Paramtrage des fentres de dialogue du site .

Gestionnaire despace web


Lors de la publication, WebAcappella envoie les fichiers de votre site (fichiers systme,
code HTML, images, vido...) sur votre hbergement. Le gestionnaire despace Web vous
donne un accs direct aux fichiers prsents sur cet espace. Menu Outils , Gestion
des fichiers de votre site .

Copyright Intuisphere - Tous droits rservs

88

Manuel dutilisation WebAcappella 4 Juillet 2014


Grce au gestionnaire despace Web, vous pouvez naviguer dans votre hbergement
pour visualiser lemplacement de vos sites et supprimer dventuels fichiers inutiles.
Vous pouvez aussi effacer votre site directement depuis le gestionnaire. Pour ce faire, il
vous suffit de supprimer le dossier contenant votre site, par exemple acappella1 ou
acappella4 si vous avez activ la gestion multisite. Si la gestion multisite est dsactive,
supprimez lensemble des lments prsents sur votre hbergement.
Mots cls : Gestionnaire, Espace web, Administrateur, Administrer, Supprimer

Harmonie des couleurs


L'harmonie des couleurs vous permet de
choisir une palette de couleurs et leurs
nuances. Ces couleurs et leurs nuances
pourront tre par la suite appliques sur les
lments utilisant des couleurs (fond,
bordures, dgrad...). Cet outil vous
permettra de choisir des couleurs qui se
marient bien ensemble et de crer un site aux
couleurs homognes.
1. Choix de couleurs
Cliquez sur le menu Site Web -
Harmonie des couleurs .
Choisissez en premier votre mode de
composition des couleurs : analogue,
monochromatique, triade, complmentaires,
compos ou dgrad.
Dplacez ensuite le marqueur dans la palette
pour choisir vos nuances. Paramtrez ensuite
avec les curseurs la luminosit de vos
couleurs et le paramtre des harmonies (pour
le mode analogue).
Vous pouvez aussi sauvegarder plusieurs harmonies. Une fois votre harmonie de
couleurs cre, cliquez sur le bouton + en bas de la fentre pour l'ajouter vos
harmonies. Vous pouvez aussi supprimer une harmonie en cliquant sur le bouton - .
Une fois votre choix effectu, cliquez sur OK pour sauvegarder vos nuances de
couleur.

Copyright Intuisphere - Tous droits rservs

89

Manuel dutilisation WebAcappella 4 Juillet 2014


2. Utilisation de la palette de couleurs
A partir du bouton de choix de couleur, vous retrouverez vos harmonies des couleurs
ainsi que leurs dclinaisons.

Choisissez une couleur pour l'appliquer sur votre lment.


Vous pouvez tout moment crer une nouvelle harmonie ou changer de nuance en
cliquant sur le bouton

Mots cls : Couleurs, diteur de thme, Palette, Fentre de linterface, Moteur de


recherche, Nuance, Teinte, Tonalit

Outil de traduction
WebAcappella vous donne la possibilit de traduire tous les textes de l'interface et des
messages prdfinis de votre site Web grce une application intgre.
Elle est accessible via le menu Outils .
Cet outil vous permet de traduire les messages de WebAcappella dans une nouvelle
langue ou de modifier une traduction dj en place.
La traduction de ces messages est applique ds que vous cliquez sur le bouton
Enregistrer .

Copyright Intuisphere - Tous droits rservs

90

Manuel dutilisation WebAcappella 4 Juillet 2014

Mots cls : Traducteur, Traduction

Traduire linterface de WebAcappella


Les messages disponibles dans cette interface de traduction sont les messages
disponibles dans tous les menus et fentres de l'application.

- Cliquez sur le menu Outils - Traduire l'interface de WebAcappella .


- Dans la partie suprieure droite, choisissez la langue de rfrence que vous souhaitez
utiliser.
- Dans la partie suprieure gauche, choisissez la langue que vous souhaitez modifier ou
ajoutez une nouvelle langue traduire.

Copyright Intuisphere - Tous droits rservs

91

Manuel dutilisation WebAcappella 4 Juillet 2014


- Slectionnez un message dans la liste des messages.
- Effectuez votre traduction dans la fentre blanche situe dans la partie latrale droite.
- La zone verte comporte le message d'origine qui vous aidera effectuer votre
traduction.
- Une fois la ou les traductions effectues, cliquez sur Enregistrer puis sur OK .
Les modifications apportes aux traductions sont instantanment visibles
Mots cls : Traducteur, Traduction, Interface, Transcription

Traduire et modifier les messages prdfinis de vos sites


Les messages prdfinis sont les messages qui apparaissent sur divers lments de
votre site tels que le formulaire de contact (messages Envoyer dans le texte du
bouton).
Note : Vous pouvez modifier ces messages que ce soit dans la langue par dfaut de
votre site ou si vous tes dans le cadre dun site multilingue, changer les termes des
autres langues.
- Cliquez sur le menu Outils et Traduire les messages prdfinis de vos sites
Web .
- Dans la partie suprieure droite, choisissez la langue de rfrence que vous souhaitez
utiliser.
- Dans la partie suprieure gauche, choisissez la langue que vous souhaitez modifier ou
ajoutez une nouvelle langue traduire.
- Slectionnez un message dans la liste des messages.
- Effectuez votre traduction dans la fentre blanche situe dans la partie latrale droite.
- La zone verte comporte le message d'origine qui vous aidera effectuer votre
traduction.
- Une fois la ou les traductions effectues, cliquez sur Enregistrer puis sur OK .

Copyright Intuisphere - Tous droits rservs

92

Manuel dutilisation WebAcappella 4 Juillet 2014

Les modifications apportes aux traductions sont instantanment visibles


Mots cls : Traducteur, Traduction, Bouton envoyer, Messages prdfinis

Copyright Intuisphere - Tous droits rservs

93

Manuel dutilisation WebAcappella 4 Juillet 2014

FONCTIONNALITS DU

E-COMMERCE

Copyright Intuisphere - Tous droits rservs

94

Manuel dutilisation WebAcappella 4 Juillet 2014

E-COMMERCE
CRATION DE BOUTIQUE EN LIGNE

Le nouveau E-commerce se divise en deux parties : une partie situe dans


WebAcappella, appele Front-Office (votre boutique dans WebAcappella) et une
autre appele Back-Office (console d'administration).
Le Front-Office contient l'ensemble des composants de votre boutique, savoir :
- Le composant Produits
- Le composant Bouton Panier
- Le composant Bouton Compte Client
- Le composant Bouton Devise
Ces composants sont modifiables en terme de rendu (notamment en terme de
couleurs).
Le Back-Office (console d'administration) regroupe toute la partie gestion de votre
boutique.
Parmi les grandes nouveauts, vous allez retrouver dans ce nouveau e-commerce :

Gestion des stocks avance

Produits, catgories et attributs illimits


Affichage de plusieurs images de chaque produit
Vente de produits tlchargeables

Affichage de produits

Affichage des quantits disponibles


Zoom sur les produits
Ajout la liste de souhaits
Avis sur les produits
Envoyer un ami

Optimisation SEO

Personnalisation des URL


Google Site Map
Mta-description pour les produits et les catgories
URL simplifie bas sur le nom du produit
Balises de titre par produit

Copyright Intuisphere - Tous droits rservs

95

Manuel dutilisation WebAcappella 4 Juillet 2014

Commandes

Commande en tant qu'invit

Expdition

Frais de port selon prix ou poids


Adresses de livraison ou de facturation distinctes
Transporteurs et pays illimits

Paiement

Moyens de paiement divers et scuriss


Devises illimites
Taxe automatiquement configure par pays ou tat

Compte client

Compte client complet


Gestion des retours
Centralisation des messages dans le SAV intgr

Gestion du site

Administration des autorisations et des utilisateurs


Traductions du backoffice
Personnalisation des logos sur les factures

Statistiques

Rapports graphiques
Suivi des visiteurs
Profils des clients (meilleurs clients, ges,
commandes...)
Statistiques du catalogue
Suivi des commandes et des ventes
Golocalisation

Rappel de la configuration requise pour installer la nouvelle version du E-commerce :


http://www.webacappella.fr/ecommerce_fr.html
Mots cls : E-commerce, Boutique, Achat, Produits, Back-office, Administration,
Console, Web boutique

Copyright Intuisphere - Tous droits rservs

96

Manuel dutilisation WebAcappella 4 Juillet 2014

INSTALLATION DU E-COMMERCE
Installation de votre nouvelle boutique : * Si vous travaillez sur Mac, il est fortement
conseill dinstaller cette nouvelle version e-commerce dans un dossier autre que
applications sur votre ordinateur. En effet, votre version actuelle de WebAcappella est
installe par dfaut dans ce dossier.
1 Ouvrir la nouvelle version WebAcappella e-commerce
2 Crer un projet (lui donner un nom) puis choisir site vierge ou un des modles
proposs.
3 Cliquer sur le bouton Ma boutique puis installation et gestion de votre
boutique
4 Dans longlet Gnral , remplir les champs suivants :
Protocole
Nom de lHte
Identifiant
Mot de passe
Adresse internet
Dossier FTP distant
Puis, cliquer sur Tester vos paramtrages FTP . Si ok alors tape suivante sinon
merci de vrifier les champs (ci-dessus) saisis.
5 Saisir les champs de longlet Base de donnes :
Pour le champ connecteur uniquement MySQL !
Nom de lhte
Nom de la base de donnes
Identifiant de la base de donnes
Mot de passe de la base de donnes
Puis, cliquer sur Tester vos paramtrages de base de donnes SQL . Si ok alors
tape suivante sinon merci de vrifier les champs (ci-dessus) saisis.
6 Saisir les champs de longlet Boutique

Note : le mot de passe doit avoir 8 caractres minimum.

Copyright Intuisphere - Tous droits rservs

97

Manuel dutilisation WebAcappella 4 Juillet 2014

Pour le type de moteur SQL, merci de privilgier InnoDB (plus avantageux). Le prfixe
est non modifiable.

Cette option sera utile pour forcer l'installation de la boutique chez certains hbergeurs
( n'utiliser qu'en cas de problme, laissez dcoche par dfaut).

Choisissez ce qui vous convient le mieux.

Le choix ici est tout fait libre et il peut-tre modifiable posteriori.

Certains hbergeurs mettent disposition des serveurs non optimiss ou dont les
performances sont trop faibles pour certaines tches dont la dcompression la vole
de fichiers compresss.
Cette option permet de dcompresser les fichiers d'installation en local puis de les
publier dans le dossier distant de votre compte chez votre hbergeur.
Cela permet donc une plus grande compatibilit au dtriment du temps d'installation
qui est considrablement rallong (de 20 minutes plus d'une heure).
Voil tous les champs sont maintenant renseigns, nous pouvons procder

Copyright Intuisphere - Tous droits rservs

98

Manuel dutilisation WebAcappella 4 Juillet 2014


linstallation de votre boutique en cliquant sur :

7 Finalisation de linstallation de Prestashop


Cliquez sur le bouton Dmarrer linstallation et laissez-faire en cas dinterruption
(volontaire ou non), chaque fois un message vous indiquera clairement la marche
suivre.
Une fois linstallation termine, un message vous indiquera que votre boutique a t
installe et configure correctement et un cran rcapitulatif des champs saisis vous
sera propos.
Note : la dure d'installation est dpendante de multiples lments et peut durer
plusieurs minutes (surtout si votre offre dpend de serveurs mutualiss).
Mots cls : Install, Installation, Procdure, tapes, Paramtres, FTP, SQL, MySQL,
Base de donnes, E-commerce, Boutique

LES OPTIONS AVANCES


Il existe 6 rubriques :

Si vous n'avez pas coch l'option Insrer des liens images dans les fichiers CSV des
produits et dclinaisons et que vous souhaitez prsent importer les images des
articles de votre ancienne boutique, alors vous devez cliquer sur ce bouton et choisir le
fichier CSV comprenant les liens (url) des images.

Copyright Intuisphere - Tous droits rservs

99

Manuel dutilisation WebAcappella 4 Juillet 2014

Mots cls : Options, Avances, Installer, Rinstaller, Importer, Forcer, Dsinstaller

LINTERFACE DE VOTRE BOUTIQUE DANS WEBACAPPELLA


Le terme Front-Office dsigne l'affichage de votre boutique dans WebAcappella.

Cliquez sur ce bouton


afin
de dcouvrir le menu de votre
boutique comme l'installation de
celle-ci ou encore les composants qui
la dfinissent.

Copyright Intuisphere - Tous droits rservs

100

Manuel dutilisation WebAcappella 4 Juillet 2014

Composant Produits
ONGLET PROPRITS GNRALES DES PRODUITS
Produits : celui-ci vous permettra de choisir et dafficher un ou plusieurs produits de
votre catalogue (catalogue de produits que vous avez cr au pralable dans la partie
administration de votre boutique dans le menu Catalogue - Produits ).
A noter que pendant linstallation de votre nouvelle boutique, quelques produits sont
dj prsents.
Le bouton + vous permettra de rechercher les produits que vous souhaitez insrer dans
votre boutique en ligne en tapant les premiers caractres du produit (barre Rechercher).
Ou bien de les slectionner un un ou par lot (maintenez enfonc la touche shift puis
clic gauche avec la souris).
Une fois le choix effectu, appuyez sur licne + .
Catgories : la liste propose sera identique celle que vous avez prcdemment cre
dans le back office de votre boutique : Menu Catalogue - Catgories ).
Ce type daffichage a lavantage de ne prsenter quune partie des produits de votre
boutique et donc de cibler une catgorie de visiteurs/clients (exemple : vous avez cr
une page intitule Ordinateurs et vous ne souhaitez faire apparatre que des PC de
bureaux ou Macintosh).
Marques : la marque d'un produit correspond son fabricant.
Les visiteurs de votre site peuvent avoir un accs rapide l'ensemble des produits d'une
marque donne. Cela rend la navigation sur votre site plus facile pour eux.
Disposition : une disposition est une forme de mise en page de vos produits ou
catgories de produits.
Cet outil peut se rvler particulirement pertinent par rapport la quantit de produits
/ catgories affichs mais aussi pour lesthtisme de la page de votre site.
En effet, selon le type de Layout choisi, laffichage des produits sera diffrent :
- Disposition 1 : affichage sous forme de liste verticale comprenant une image du
produit, son rcapitulatif, son tarif
- Disposition 2 : Idem que la Disposition 1 sauf que laffichage est sous forme de grille
(affichage de gauche droite et non de haut en bas).
- Disposition 3 : Idem que la Disposition 2 mais en plus restreint : seul le nom du
produit, son image et son prix seront affichs.
- Disposition 4 : taille de l'image du produit maximise et affichage minimaliste des
caractristiques de celui-ci (nom, prix, ajouter au panier et lien voir ).

Copyright Intuisphere - Tous droits rservs

101

Manuel dutilisation WebAcappella 4 Juillet 2014


- Disposition 5 : mise en avant de la photo du produit et des dtails.
- Disposition 6 : affichage minimaliste sous forme de liste avec petite photo, nom du
produit et prix.
Bien entendu, vous pouvez slectionner le nombre de produits affichs par page.
Si par exemple votre liste de produits comporte 10 produits mais que vous dcidez de
nen afficher que 4 par page alors linternaute devra cliquer sur les boutons de
navigation afin de tous les parcourir.

Administration de votre boutique


Ce bouton est la partie centrale de la gestion
de votre boutique.
En cliquant dessus, cela ouvrira un nouvel onglet
vous dirigeant vers le cur de votre boutique
(appel administration de votre boutique).
Rafrachir
Cet outil est utiliser dans le cas de modifications des catgories des produits (mise
jour, suppression, ajout) mais galement si des modifications sur nimporte quelle
proprit dun produit ont t faites depuis le back-office (prix, image, rfrence).

ONGLET PERSONNALISATION DU RENDU DES COMPOSANTS


En cliquant sur Editer les proprits partir de cet onglet, vous pourrez
modifier et adapter votre got (notamment les couleurs) les 4 composants
fondamentaux de votre boutique : panier, compte client, barre des devises et
les produits.
Ces modifications pourront seffectuer de 2 manires :
- par lentre dune valeur hexadcimal
- par louverture dune palette graphique (bouton de droite).
Pour chaque Onglet, vous pourrez voir instantanment les modifications faites et cela
dans les 6 types dagencement (Layout 1,2,3,4,5 ou 6) disponibles en haut droite.

Onglet produit :
Cet onglet est la partie la plus complte au niveau des modifications possibles car elle
reprsente le cur de laffichage de votre boutique.

Copyright Intuisphere - Tous droits rservs

102

Manuel dutilisation WebAcappella 4 Juillet 2014


Dix proprits sont personnalisables, principalement au niveau des couleurs :
- La couleur de larrire plan (concerne lintgralit de larrire plan sauf limage du
produit).
- La couleur de la bordure (il sagit du cadre de limage du produit)
- La couleur du titre (change la couleur du nom du produit)
- La couleur de la description (modifie la couleur de la description du produit)
- La couleur du prix (uniquement la couleur du prix du produit affich)
- La couleur du texte du lien Voir
- Vous pouvez galement remplacer le texte Voir par une icne (de prfrence une
image au format jpeg (jpg) ou png).
Enfin, vous pouvez galement changer licne, la couleur de larrire plan et du texte
Ajouter au panier :
-

Licne (de prfrence une image au format jpeg (jpg) ou png).


La couleur de larrire plan de ce bouton.

Onglet Panier :
Sur la partie de gauche est prsent un exemple de panier dont vous pourrez voir en
temps rel les modifications que vous allez apporter depuis la partie de droite, savoir :
- La couleur de larrire plan de llment Panier
- La couleur du texte
- La modification de licne du panier (de prfrence une image au format jpeg (jpg) ou
png)
- La couleur du sparateur permet de modifier la couleur de la barre horizontale
sparant la liste des produits avec le sous-total du panier.
Mais aussi vous avez la possibilit de personnaliser le bouton Commander de 3
manires :
-

Licne (de prfrence une image au format jpeg ou png)


La couleur de larrire plan de ce bouton
La couleur du texte de ce bouton.

Onglet Compte :
3 proprits sont personnalisables :
-

La couleur du texte Bienvenue et Identifiez-vous


Licne connect (de prfrence une image au format jpeg (jpg) ou png)
Licne dconnect (de prfrence une image au format jpeg (jpg) ou png).

Copyright Intuisphere - Tous droits rservs

103

Manuel dutilisation WebAcappella 4 Juillet 2014

Onglet Devise :
3 proprits sont aussi personnalisables :
-

La couleur de larrire plan


La couleur de la fonte (du texte)
Licne (de prfrence une image au format jpeg (jpg) ou png).

Onglet personnalisation du rendu des proprits gomtriques :


La position et la taille du cadre du composant sont modifiables ici (taille exprime en
pixels).

Composant Panier
Le panier (appel aussi caddie ou caddie virtuel) permet de conserver la trace des achats
du client tout au long de son parcours et de modifier les quantits pour chaque
rfrence.
Onglet proprits gnrales du panier
Onglet personnalisation du rendu des composants
Voir : Onglet personnalisation du rendu des composants
Onglet personnalisation du rendu des proprits gomtriques : la position et la
taille du cadre du composant sont modifiables ici (taille exprime en pixels).

Composant Compte client


Ce composant donne la possibilit vos clients davoir accs leur compte client :

Historique et dtails de mes commandes


Mes avoirs
Mes adresses
Mes informations personnelles
Mes bons de rductions
Mes produits favoris

Copyright Intuisphere - Tous droits rservs

104

Manuel dutilisation WebAcappella 4 Juillet 2014

Onglet proprits gnrales du compte client

Onglet personnalisation du rendu des composants

Onglet personnalisation du rendu des proprits gomtriques : la position et la


taille du cadre du composant sont modifiables ici (taille exprime en pixels).

Composant Devise
Votre boutique ne peut vendre des marchandises ou des services ltranger, sans que
vos clients aient la possibilit de choisir entre diffrentes devises.
Cest donc dans ce composant que la liste des diffrentes devises (que vous aurez dfini
pralablement dans la partie Administration de votre boutique) apparatra.

Onglet proprits gnrales Devise

Onglet personnalisation du rendu des composants

Onglet personnalisation du rendu des proprits gomtriques : la position et la


taille du cadre du composant sont modifiables ici (taille exprime en pixels).
Mots cls : Composant, Produits, Devise, Panier, Caddie, Compte client, Couleur,
Icne

LOUTIL EXPORT / IMPORT


Cet outil va vous permettre de transfrer les produits (et ses options) du e-commerce
initiale vers le nouveau e-commerce.
Menu Outils puis Exporter les produits de votre boutique WebAcappella
Deux possibilits de slection darticles : soit article par article, soit tous les articles
(cocher alors la case gauche de Titre ).
Une fois la slection faite, il vous faudra saisir un nom de catgorie pour lexport puis
cliquer sur Exporter .
Note : une option concernant les liens des images inclure ou non dans l'export des
articles de votre boutique est disponible :

Copyright Intuisphere - Tous droits rservs

105

Manuel dutilisation WebAcappella 4 Juillet 2014


Attention : Par dfaut, cette option n'est pas coche et donc vos articles n'auront
pas d'images associes la fin du processus d'importation (pour associer vos images
voir les options avances)
Cette option est utile notamment pour des serveurs dont le temps dexcution est limit
(traitement de lot dimages par groupe de cinq).
Un mini-explorateur va alors souvrir vous demandant quel endroit (quel dossier)
crire le fichier dexport (format csv).
Une fois lexportation termine, vous trouverez au minimum deux fichiers portant ce
nom (Boutique_products et Boutique_combinations) ou plus, si jamais votre site est
multilingue.
Il est temps maintenant dimporter vos nouveaux produits dans le back-office.
Pour ce faire, il faut cliquer sur le bouton Administration de votre boutique de
linspecteur dlment E-commerce :
1. Menu paramtres avancs , puis import :
Cliquer sur Mettre en ligne un fichier puis choisir un fichier produit dont le nom du
fichier est : Boutique_products et cliquez sur mettre
en ligne un fichier .

Attention : si un en-tte est prsent dans le fichier


CSV concern alors vous devez obligatoirement
changer la valeur de Sauter...lignes :

2. Dans le champ Quel type d'entits souhaitez-vous importer ? , choisir


Produits puis cocher les cases suivantes :

Copyright Intuisphere - Tous droits rservs

106

Manuel dutilisation WebAcappella 4 Juillet 2014

Puis cliquer sur tape suivante et plusieurs fois sur la flche droite
Jusqu la dernire colonne intitule Price Tax Include et remplacez ignorer cette
colonne par Prix TTC puis cliquez sur le bouton :
prendre un peu de temps).

et patientez (cela peut

Note : Si les prix affichs de votre boutique comprennent la TVA dans le montant du
panier alors vous devrez modifier la dernire colonne d'import dans votre console
d'administration.
Vous devrez procder la mme manipulation si vous possdez dautres langues sur
votre projet de site mais sans cocher la case ci-dessous supprimer tous les produits
avant limport !

Ensuite, si vous avez insr des options de produits, alors ce type de fichier sera
galement prsent (Boutique_combinations) :
Pour ajouter donc les dclinaisons de vos produits, cliquer sur mettre en ligne un
fichier puis choisir un fichier produit (ex : Boutique_combinations) et cliquer sur
mettre en ligne un fichier .
3. Dans ce champ Quel type d'entits souhaitez-vous importer ? , choisir
Dclinaisons puis cocher les cases suivantes :

Puis cliquez sur Etape suivante (cliquer sur Ok la question pose) puis appuyez
sur le bouton importer les donnes
Limportation de vos produits est finie (ne pas tenir compte des messages
davertissement ou derreurs la fin de chaque import de produits/dclinaisons).
Vous pourrez les retrouver dans le menu Catalogue - Produits .
Note : Il faut que la boutique actuelle (celle dont les produits vont tre exports) soit
dj en ligne afin de pouvoir rcuprer les images des produits.
Mots cls : Outil, Import, Export, Produit, Dplacer

Copyright Intuisphere - Tous droits rservs

107

Manuel dutilisation WebAcappella 4 Juillet 2014

LA CONSOLE DADMINISTRATION DE VOTRE BOUTIQUE


PRSENTATION DE LINTERFACE
Prenez le temps d'apprhender le tableau de bord c'est dire, la premire page que
vous voyez en vous connectant au back-office. Non seulement il vous donne un rsum
de tout ce que vous devez savoir sur votre boutique un instant T, avec des liens vers
les pages les plus utiles, mais par ailleurs, en tant que nouvel utilisateur de la nouvelle
version e-commerce WebAcappella, il vous donne quelques conseils propos de
rglages auxquels vous devez faire attention.

La barre suprieure

En haut de la page se trouve une barre sombre contenant quelques liens :


- Nom de votre boutique (ici, WebAcappella) : Il vous permet de revenir au tableau de
bord depuis n'importe quelle page.
- Icne de caddie : Ouvre un encadr vous prsentant les nouvelles commandes depuis
la dernire fois que vous avez cliqu sur cette icne. Une info bulle rouge donne le
nombre de nouvelles commandes. De l, vous pouvez soit afficher l'une des
commandes, soit aller la liste de commandes.
- Icne de personnes : Ouvre un encadr vous prsentant les nouveaux clients inscrits
depuis la dernire fois que vous avez cliqu sur cette icne. Une info bulle rouge donne
le nombre de nouveaux inscrits. De l, vous pouvez soit afficher la page de l'info des
clients, soit aller la liste des clients.
- Bulles de dialogue : Ouvre un encadr vous prsentant les nouveaux messages reus
par le service clientle depuis la dernire fois que vous avez cliqu sur cette icne. Une
info bulle rouge donne le nombre de messages. De l, vous pouvez soit afficher l'un des
messages, soit aller la page du SAV.
- Moteur de recherche avec un slecteur indiquant tout : Vous permet de lancer une
recherche sur l'ensemble de votre boutique, y compris les pages du back-office s'il vous
ne vous souvenez pas o se configure une option.
- Accs rapide : Un menu regroupe des raccourcis vers certaines des pages les plus
utiles, que vous pouvez modifier dans la page Accs rapide du menu
Administration .
- Bienvenue, (votre nom) : Un simple rappel du compte avec lequel vous tes connect.

Copyright Intuisphere - Tous droits rservs

108

Manuel dutilisation WebAcappella 4 Juillet 2014


- Liens Mes Prfrences : Ouvre la page de prfrence de votre compte utilisateur
actuel, d'o vous pouvez rgler certaines options, comme la langue du back-office ou
votre mot de passe.
- Lien Dconnexion : Vous dconnecte du compte actuellement utilis.
- Lien Voir Ma Boutique : Ouvre un nouvel onglet de votre navigateur avec la page
d'accueil de votre boutique.

Les menus

Lors de vos activits quotidiennes d'administrateur de boutique, vous aurez


rgulirement parcourir les nombreuses pages et options du back-office.
Chaque menu correspond un ensemble donn de tches :
- Catalogue : c'est le cur de votre boutique, l o vous aller ajouter vos produits, crer
des catgories, configurer vos transporteurs et fournisseurs...
- Commandes : ds qu'un client commence ajouter des produits son panier, vous
verrez les premires commandes arriver dans ce menu, avec les factures qui les
accompagnent. C'est galement partir de ce menu que vous grerez vos retours de
marchandise, vos avoirs et le service client par commande.
- Clients : ce menu vous donne accs toutes les informations sur vos clients. Vous
pouvez modifier leurs adresses, crer des groupes d'utilisateurs afin de leur appliquer
des promotions spcifiques, grer le service aprs-vente, et mme ajouter de nouveaux
titres de civilit si besoin est.
- Promotions : ce menu vous permet de crer rapidement des bons de rduction et des
promotions par le biais d'un jeu de rgles.
- Transports : tout ce qui concerne l'expdition de vos colis, notamment les cots de
transport.
- Localisation : vous aide configurer votre boutique avec des lments locaux, tels que
la langue et les traductions, la monnaie, les units de mesure, les taxes et rgles de
taxes, et les entits gographiques.
- Modules : multipliez la puissance et l'utilit de votre boutique en ajoutant des modules,
dont une centaine est dj disponible dans l'installation par dfaut, et plein dautres
sont disponibles l'achat sur le site Addons. Consultez notre quipe technique sur le
Copyright Intuisphere - Tous droits rservs

109

Manuel dutilisation WebAcappella 4 Juillet 2014


support client avant lachat de modules. C'est galement dans ce menu que vous
grerez vos thmes, o vous placerez les lments de vos modules sur votre thme.
Enfin, une dernire page vous permet d'appliquer des rglages globaux vos modules
de paiement.
- Prfrences : ladministration de votre boutique est trs configurable, et vous pouvez
modifier quasiment tous ces comportements l'aide de ce jeu de pages de prfrences.
- Paramtres avancs : contient des liens vers des outils et des pages d'informations qui
sont trop particuliers pour tenir dans d'autres menus, tels que les rglages du service
web, l'outil de sauvegarde de la base de donnes, ou la page d'amlioration des
performances, entre autres.
- Administration : voici tous les rglages relatifs au back-office lui-mme. Par exemple, le
contenu du menu Accs rapide , la liste de vos employs et leurs droits d'accs, et
l'ordre des menus, entre autres.
- Stats : ce menu vous donne accs un grand nombre de statistiques et graphiques.
- Stock (uniquement si la case activer la gestion des stocks avancs est coche) : ce
menu vous donne accs une nouvelle fonctionnalit, o vous pouvez grer vos
entrepts, les mouvements de votre stock et vos commandes de rapprovisionnement.
Pour tout lment prsent dans les menus, vous aurez la prsence de
l'aide symbolise par ce bouton.

Copyright Intuisphere - Tous droits rservs

110

Manuel dutilisation WebAcappella 4 Juillet 2014

Copyright Intuisphere - Tous droits rservs

111

S-ar putea să vă placă și