Documente Academic
Documente Profesional
Documente Cultură
MANUEL DUTILISATION
WEBACAPPELLA 4
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
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
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
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 !
GUIDE DE DMARRAGE
RAPIDE
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
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.
10
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.
11
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.
12
INTRODUCTION AU
LOGICIEL
13
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.
14
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 .
15
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
16
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).
17
18
19
20
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.
21
Rfrencement
Multilangage
Nombre de pages
Albums photos
Objets multimdia
E-commerce
22
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
23
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
24
25
WEBACAPPELLA
26
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.
Mots cls : Icnes, Barre des icnes, Logiciel, Menu, Barre du haut
27
Les rgles
Les rgles vous permettent de placer des repres horizontaux et verticaux afin de
vous aider aligner vos
lments.
28
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 ).
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
29
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.
30
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).
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.
31
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 .
32
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 .
33
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 .
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.
34
35
36
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
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
38
39
40
41
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.
42
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.
43
- Dans longlet Arrire plan , section Pied de page , cliquez sur Choisir un pied
de page .
44
- 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
45
L'icne
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
46
L'icne
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
47
Mots cls : Proprits des lments, Gomtrie, Rotation, Position, Taille, Conserver
proportions, Dimensions
48
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
49
Exemple 2
Exemple 3
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).
50
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.
51
Proprits du texte
Choisissez la couleur du texte de votre bouton. Vous pouvez le passer en gras ou bien
encore le souligner.
52
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 .
53
Fancybox
L'option FancyBox vous permettra d'afficher un agrandissement de votre image au
sein mme de la page (dans une fentre flottante).
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
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
56
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.
57
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
58
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).
59
60
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
61
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.
62
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 .
63
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
Note : les chiffres placs droite des champs sont des repres visuels vous
permettant d'identifier rapidement le champ que vous souhaitez modifier.
65
66
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.
Produits
Voir rubrique e-commerce
Bouton Panier
Voir rubrique e-commerce
Bouton Devises
Voir rubrique e-commerce
Audio
67
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
68
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
69
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
70
PARAMTRAGES DE
WEBACAPPELLA
71
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
72
73
Langue de lapplication
Choisissez ici la langue de l'application.
74
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.
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.
75
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.
76
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
77
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
78
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).
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.
Mots cls : Multilangage, Proprits du site web, Langue par dfaut, Langage
79
80
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.
81
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
82
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
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.
83
84
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.
85
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
86
FONCTIONNALITS AVANCES
Rafrachir votre site
Rafrachir votre site WebAcappella vous permettra de le rgnrer entirement.
Menu Site Web , Rafrachir le site Web .
87
88
89
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 .
90
91
92
93
FONCTIONNALITS DU
E-COMMERCE
94
E-COMMERCE
CRATION DE BOUTIQUE EN LIGNE
Affichage de produits
Optimisation SEO
95
Commandes
Expdition
Paiement
Compte client
Gestion du site
Statistiques
Rapports graphiques
Suivi des visiteurs
Profils des clients (meilleurs clients, ges,
commandes...)
Statistiques du catalogue
Suivi des commandes et des ventes
Golocalisation
96
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
97
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).
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
98
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.
99
100
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 ).
101
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.
102
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 :
-
Onglet Compte :
3 proprits sont personnalisables :
-
103
Onglet Devise :
3 proprits sont aussi personnalisables :
-
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).
104
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.
105
106
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).
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
107
La barre suprieure
108
Les menus
109
110
111