L’ESPACE DE TRAVAIL DANS WEBACAPPELLA. WebAcappella WebAcappella 4

Documento

Manuel d’utilisation WebAcappella 4 – Juillet 2014

L’ESPACE DE TRAVAIL DANS WEBACAPPELLA

DÉCOUVERTE DE VOTRE OUTIL DE CRÉATION DE SITES INTERNET

L’INTERFACE DE WEBCAPPELLA

La barre des icônes

La barre des icônes vous permet d’accéder aux principales fonctionnalités nécessaires à la création et à la publication de votre page.

Ces icônes facilitent la navigation dans l’interface de WebAcappella.

- Icône Sauver : vous permet d’enregistrer le travail en cours.

- Icône Ressources : vous permet d'accéder à la bibliothèque de fichiers et d’images de votre site.

- Icône Bouton : vous permet de créer un bouton.

- Icône Image : vous permet d’ajouter une image.

- Icône Texte : vous permet d’insérer une zone de texte.

- Icône Album : vous permet d’intégrer un album photo.

- Icône Couleur : vous permet de créer une zone de couleur.

- Icône Ma Boutique : ouvre un menu avec l’accès à l’installation de la boutique en ligne et les différents composants d’une boutique en ligne.

- Icône Administration : vous donne accès au « Back-Office » (console d'administration) où est regroupé toute la partie gestion de votre boutique en ligne (pour la version ecommerce).

- Icône Flèches : ouvre un menu avec tous les éléments disponibles dans WebAcappella.

- Tester : vous permet de tester votre site en local dans le navigateur par défaut de votre ordinateur.

- Publier : vous permet de publier votre site sur Internet (les paramètres de votre hébergement doivent être déjà remplis).

- Visiter : vous permet d’accéder à votre site Internet s’il est déjà en ligne.

Mots clés : Icônes, Barre des icônes, Logiciel, Menu, Barre du haut

Manuel d’utilisation WebAcappella 4 – Juillet 2014

L’explorateur de pages et de maquettes

Grâce à l’explorateur de pages situé à gauche de l’écran, vous avez accès à 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 création de votre site.

En savoir plus sur les maquettes .

Mots clés : Page, Explorateur, Maquettes

Les règles

Les règles vous permettent de placer des repères horizontaux et verticaux afin de

vous aider à aligner vos

éléments.

Note : ces repères visuels ne sont visibles qu'en mode création (ils ne sont pas visibles sur le site publié ou sur le navigateur Internet en mode test).

Il existe trois façons de créer ou de supprimer une règle :

- Double clic dans la règle

- Cliquer / glisser / déposer depuis une règle

- Clic droit, puis «

Ajouter une règle

» / «

Supprimer la règle

Mots clés : Règles, Repère, Graduation, Mesure, Pixel

MOTS CLÉS: REGLES, REPERE

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Le plan de travail

Le plan de travail se présente sous la forme d’un espace vide ou prédéfini ( voir aussi les maquettes ). Cet espace, dont vous aurez déterminé les caractéristiques (taille, fond),

vous permet d’ajouter les éléments mis à votre disposition par WebAcappella.

La grille magnétique vous permet de placer les éléments par rapport à des points de repère dans le plan de travail. Ces points de repère attirent les éléments et les alignent avec précision. Cette option est très utile pour placer rapidement vos éléments de manière homogène. Cette grille peut être désactivée à tout moment (menu

« Affichage »).

Mots clés : Plan de travail, Espace de travail, Scène, Fenêtre centrale

Explorateur de calques

L'explorateur de calques vous permet de créer des calques et de les gérer.

Les calques sont utilisés pour regrouper des éléments. Vous pouvez créer un ensemble en vue d'une modification simplifiée des éléments (exemple : regrouper tous les

Manuel d’utilisation WebAcappella 4 – Juillet 2014

éléments d'une barre de navigation afin de pouvoir sélectionner et déplacer tous ces

éléments en un seul clic ou une fois que l’ensemble est créé et que le placement dans la page est définitif, verrouiller le calque pour « ancrer » ces éléments et qu’ils ne soient plus sélectionnables.

Note : l'explorateur de calques peut être détaché ou rattaché de l'interface grâce au bouton placé en haut à gauche de l'explorateur (double flèche).

De même, vous pouvez fermer l'explorateur de calques. Pour l'afficher à nouveau, rendez-vous dans le menu « Affichage » - « Afficher l'explorateur de calques ».

Mots clés : Pages, Explorateur, Calques

L’inspecteur d’éléments

L'inspecteur vous permet d'accéder aux paramétrages et aux options de chaque

élément.

Par défaut l'inspecteur est visible mais vous pouvez le faire apparaître ou disparaître via l'icône situé à droite de l'élément :

Chaque action effectuée sur un élément via l'inspecteur est instantanément appliquée et visible.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

De plus, l'inspecteur vous permet de modifier plusieurs éléments du même type en même temps. Par exemple, sélectionnez plusieurs zones de couleur en même temps et appliquez leur la même couleur.

Mots clés : Inspecteur d’éléments, Fenêtre flottante, Contrôleur

LES FONDAMENTAUX

Sélectionner et déplacer un élément

WebAcappella met à votre disposition de nombreux éléments que vous pouvez placer où vous le souhaitez dans l’espace de travail (votre page en création).

Pour sélectionner un élément, placez votre souris dessus et effectuez un simple clic gauche. L’élément sélectionné sera alors entouré d’une bordure en pointillés et de points de redimensionnement.

Une barre d’icônes apparaît alors sur son côté droit. Cette barre permet d’accéder à l’inspecteur de propriétés ou de le clic gauche enfoncé et déplacez-le sur le plan de travail. Relâchez le clic gauche pour déposer l’élément.

WebAcappella permet de sélectionner plusieurs éléments en même temps ou bien encore tous les éléments de la page.

Sélection multiple

supprimer l’élément (croix rouge).

Une fois l’élément sélectionné, maintenez

Maintenez la touche CTRL (ou cmd sur Mac) enfoncée et sélectionnez les éléments un à un. Les éléments seront alors entourés d'orange. Vous déplacerez ainsi le groupe d’éléments sélectionnés.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Vous pouvez aussi faire une sélection des éléments en effectuant, dans une partie vide, un clic gauche, puis maintenez-le enfoncé et déplacez votre curseur pour sélectionner une zone et les éléments qui s’y trouvent.

Enfin, en faisant un clic droit (ctrl-clic sur Mac) dans la page, vous pouvez sélectionner tous les éléments de la page en cliquant sur «

Sélectionner tous les éléments de la page

».

Mots clés : Sélectionner, Déplacer, Bouger, Superposition, Sélectionner plusieurs

éléments, Sélection multiple

Redimensionnement et rotation

Redimensionnement

Tous les éléments intégrés 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 l’élément.

Placez votre souris dans un des angles ou sur un côté de l’élément, maintenez le clic gauche enfoncé et déplacez votre souris dans la direction voulue pour changer sa taille.

- Un mouvement vers la gauche ou la droite modifiera la largeur de l’élément.

- Un mouvement vers le haut ou le bas modifiera sa hauteur.

- Un mouvement diagonal modifiera à la fois la hauteur et la largeur de votre élément.

L'inspecteur de l'élément, onglet «

Propriétés géométriques

» de l'élément, vous permet d'ajuster manuellement la taille de votre élément.

Si vous voulez rétablir les dimensions initiales d’une image (par exemple dans le cas d’une image déformée suite à un redimensionnement), faites un clic droit sur l’élément et cliquez sur «

Remettre l’image à ses dimensions initiales

».

Manuel d’utilisation WebAcappella 4 – Juillet 2014

De même si vous ne voulez pas que l’image soit déformée, cochez la case de l'inspecteur

Conserver les proportions

» dans la rubrique «

Propriétés géométriques

» de l'élément.

Voir aussi « Propriétés géométriques des éléments »

Rotation

Il est possible de faire tourner votre élément manuellement.

Sélectionnez votre élément, appuyez sur la touche

Commande (Alt sur Windows) et cliquez dans un angle de votre élément. Une icône incurvée apparaît.

Tout en maintenant enfoncé la touche Commande ou Alt, montez ou descendez votre souris pour faire tourner votre élément.

Voir aussi « Propriétés géométriques des éléments ».

Mots clés : Sélectionner, Redimensionner, Rotation, Taille, Dimension, Proportion,

Agrandir, Modifier, Changer, Dimensionner

Copier, couper, coller et dupliquer

Les éléments (texte, images, album photo) peuvent être copiés ou coupés, puis collés sur la page en cours de création, sur une autre page du site courant ou bien encore un autre site WebAcappella.

- Pour copier un élément, sélectionnez-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 élément, effectuez la même 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 d’éléments sélectionnés ( voir aussi

« Sélectionner et déplacer un élément » ). Enfin, si vous désirez dupliquer un élément, via

le clic droit (commande + clic sur Mac) cliquez sur «

dupliquer

» pour qu’un élément identique au premier soit créé.

Note : lorsque vous copiez ou coupez / collez un élément dans une même page, l’élément sera légèrement décalé par rapport à l’élément d’origine. Cependant, si vous copiez ou coupez un élément dans une page et que vous le collez dans une autre page, l’élément sera placé exactement au même endroit que son emplacement d’origine

Manuel d’utilisation WebAcappella 4 – Juillet 2014

L’utilisation des maquettes pour placer les éléments récurrents de vos pages (menu,

bandeau haut, pied de page) peut aussi éviter de nombreux copier / coller d’une page à l’autre.

Mots clés : Copier, Couper, Coller, Dupliquer, Multiplier

Alignement

Lorsque vous sélectionnez un ou plusieurs éléments dans votre page, vous pouvez les aligner dans la page et/ou les uns par rapport aux autres.

Une fois un ou plusieurs éléments sélectionnés, effectuez un clic droit sur l'élément ou le groupe d'éléments, 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 élément est sélectionné, l'alignement se fera au niveau de son emplacement dans la page (exemple : le menu « Aligner au centre » aligne votre

élément au centre de votre page de façon horizontale).

Mots clés : Aligner éléments, Justifier, Ranger, Ordonner

Superposition

Lors de la création de votre page, vous pouvez superposer des éléments et choisir

l’ordre d’apparition (superposition).

Ainsi, un élément peut être mis au premier plan ou en arrière-plan, mais vous avez aussi la possibilité de déplacer en profondeur chaque élément.

Ces options de placement sont accessibles via un simple clic droit sur l’élément.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Pour sélectionner un élément se trouvant sous un autre élément, maintenez la touche «

Maj » enfoncée et cliquez sur le premier élément. Continuez à cliquer au même endroit pour accéder aux éléments situés en dessous du premier élément.

Mots clés : Sélectionner, Déplacer, Superposition, Avancer, Reculer, Premier plan,

Arrière plan, Devant, Derrière, Superposer, Empiler

Annuler une modification

Chaque action (modification, déplacement, suppression...) effectuée sur une page ou

un élément peut être annulée. Trois méthodes sont disponibles :

Via le menu « Edition »

Cliquez sur le menu «

Edition

» - «

Annuler (....)

» pour revenir à la dernière action effectuée.

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 antérieure de création, sélectionnez simplement une action dans la liste pour revenir à cette étape. Toutes les modifications apportées entre la dernière action et l'action sélectionnée seront annulées.

Vous pouvez aussi revenir à la dernière modification effectuée.

Via les raccourcis clavier

Les modifications effectuées peuvent aussi être annulées via le raccourci clavier «

Commande + Z » (ou « Ctrl + Z » sous Windows).

Pour rétablir les modifications, tapez le raccourci clavier « Commande + Maj + Z » ou «

Ctrl + Maj + Z » sous Windows

Mots clés : Annuler, Historique, Modification, Défaire, Revenir en arrière

Sauvegarder votre travail

Pour enregistrer les dernières modifications effectuées dans votre page courante et sauvegarder ainsi votre travail, cliquez sur le bouton «

Sauver

».

Vous pouvez cliquer dessus à n’importe quel moment pour enregistrer les étapes de votre création.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Lorsque vous changez de page, WebAcappella vous demandera automatiquement si vous désirez enregistrer le travail réalisé.

Enfin, lors de la publication et de la prévisualisation de votre site, un enregistrement automatique est réalisé. Cet enregistrement permet de reprendre votre réalisation à l’endroit où vous vous êtes arrêté et s’effectue automatiquement dans un dossier destiné au stockage des sites WebAcappella. Ce dossier est enregistré sur votre ordinateur à l’adresse suivante : C://Documents/WebAcappella_4.

Mots clés : Enregistrer, Modification, Conserver

Créer 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 supplémentaire 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 très importantes ! En effet, il n’est pas possible de récupérer votre site installé sur votre hébergement même via un client FTP. Les fichiers en

ligne ne sont pas ceux qui ont servi à la création du site.

Pour sauvegarder votre site WebAcappella

- Ouvrez WebAcappella et sélectionnez le site que vous souhaitez sauvegarder.

- Cliquez sur le menu «

Fichiers

» - «

Sauvegarder le site Web dans une archive

».

Choisissez ou créez (créer un dossier vous permet de personnaliser votre sauvegarde et d’éviter tout problème de compression des données) un dossier de destination et cliquez sur «

» (nous vous conseillons de choisir un support amovible tel qu’une clé

USB ou un disque externe).

- Vous pouvez ensuite choisir d'incorporer ou non à votre sauvegarde vos paramètres de publication. Cochez ou décochez la case «

Intégrer les paramètres de publication dans cette sauvegarde

». Cliquez ensuite sur «

Oui

».

Manuel d’utilisation WebAcappella 4 – Juillet 2014

- Un fichier .zip contenant votre site sera créé à l'endroit sélectionné.

Sauvegarde puis votre système d’exploitation (avancé)

Vous pouvez aussi sauvegarder l’ensemble de vos sites directement depuis l’explorateur de votre système d’exploitation. 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 méthode est particulièrement utile dans différentes situations : pour importer vos sites sur un nouvel ordinateur, pour transférer vos sites vers votre ordinateur portable ou tout simplement pour conserver une sauvegarde de l’ensemble de vos sites. Pour réintégrer vos sites dans WebAcappella, il suffit d’écraser le dossier WebAcappella avec votre sauvegarde

Mots clés : Sauvegarder, Archive, ZIP

Récupérer votre site depuis une sauvegarde WebAcappella

Cliquez sur «

Restaurer le site Web depuis une archive

» et sélectionnez le fichier .zip de votre site (à l’endroit où vous avez créé la sauvegarde depuis WebAcappella). Cette manipulation peut s’effectuer depuis votre site en construction ou depuis un site vierge

(dans le cas d’un formatage / réinstallation de votre système).

Note : il n’est pas possible de récupérer votre site dans WebAcappella depuis

Internet (fichiers et dossiers de travail différents des fichiers et dossiers publiés). En cas de problème sur votre ordinateur, pour reprendre votre travail une sauvegarde réalisée depuis WebAcappella est impérative. Nous vous conseillons d'effectuer régulièrement des sauvegardes sur un support

Vous avez également la possibilité de reprendre votre site à zéro en cliquant sur

Recommencer votre site

». Attention ! Cette opération effacera de manière définitive le site courant.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Affichage de la page

WebAcappella vous donne la possibilité de travailler en plein écran (menu «

Affichage

- «

Agrandir la fenêtre

»). De plus, si vous voulez travailler dans le détail les éléments de votre site (taille des objets, alignement, ...) vous pouvez effectuer un zoom de 200 % ou 300 %.

Mots clés : Affichage, Zoom, Afficher, Présentation, Visualisation

Ajouter une page

Par défaut, WebAcappella ouvre votre première création sur la page « Accueil ».

Cette page est obligatoire et ne peut pas être supprimée. Elle est la base de votre site et lors de la mise en ligne elle sera la première page (page d’accueil) de votre site Web.

Ajoutez de nouvelles pages grâce au bouton «

Ajouter une nouvelle page

» (icône + dans l’explorateur de page) ou par l’intermédiaire du menu «

Pages / Maquettes

» - «

Ajouter une nouvelle page

».

Toute page créée peut être changée en page d’accueil grâce au menu «

Pages/Maquettes

» - «

Mettre la page courante en Page d’accueil

».

Voir aussi limitations de la version Gratuite.

Mots clés : Ajouter page, Insérer, Rajouter

Créer des liens internet

Les liens vous permettent de naviguer dans votre site, d’envoyer vos visiteurs vers d’autres sites, d’envoyer des e-mails, de télécharger des fichiers ou bien encore de changer la langue de votre site.

Les liens peuvent être appliqués sur :

- Le texte (liens hypertexte)

- Les images

- Les bouton et menus dynamiques

- Les zones de couleur

- Les frames

- Les éléments multimédia

Lorsque vous êtes sur un de ces éléments, l'onglet d'accéder aux différents types de liens.

de l'inspecteur vous permet

Manuel d’utilisation 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 même fenêtre) ou de l’ouvrir dans une nouvelle page Internet

« Lien vers une page de ce site Web »

Votre site comporte plusieurs pages et vous désirez créer un lien vers une de ces pages.

Cliquez sur ce type de lien et l’explorateur 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 l’explorateur ou importez-en un de votre ordinateur grâce au bouton «

Ajouter un nouveau fichier

». Si vous avez effectué des modifications sur un fichier après l’avoir ajouté, sélectionnez-le dans votre liste de fichiers et cliquez sur le bouton «

Rafraîchir

», 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, vidéo QuickTime...).

« Lien vers une adresse Internet »

Le lien dirige les visiteurs vers un autre site Internet.

Un champ apparaît vous demandant de «

Taper une adresse Internet [...]

».

Remplissez le champ avec l’adresse Internet vers laquelle le lien hypertexte pointera.

N’oubliez pas de mettre « http:// » au début de votre adresse pour que le lien fonctionne correctement. Si vous choisissez d’ouvrir le lien dans une nouvelle fenêtre, une infobulle générée par WebAcappella vous permettra d’ouvrir cette fenêtre sans être gêné par le système anti-popup de votre navigateur Internet.

« Lien vers une adresse E-mail »

Le lien envoie un Email vers l’adresse indiquée.

Remplissez le champ avec l’adresse Email désirée. En cliquant sur ce lien, les visiteurs de votre site pourront envoyer un Email à l’adresse définie. Ce lien ouvre automatiquement l'utilitaire d'envoi d'Email par défaut.

« Changement de langue »

Disponible uniquement sur les sites sur lesquels l'option multilingue a été activée.

Il permettra aux visiteurs de votre site de changer de langue.

Choisissez la destination du lien dans les pages (fenêtre actuelle ou nouvelle fenêtre, en bas ou en haut de la page), puis choisissez la langue dans le menu déroulant. 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).

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Note : envisagez de placer ce type de lien sur une maquette, sinon il faudra l’intégrer

sur toutes les pages de votre site.

Mots clés : Élément, Lien hypertexte, Fichier, Adresse internet, Email

Tester votre site

Tout au long de la création vous pouvez prévisualiser votre travail dans le navigateur Internet par défaut en cliquant sur cette icône

« Tester »

Cette fonctionnalité vous permet de vous rendre compte du résultat final : vérifier le bon fonctionnement des liens, l’affichage des images, l’aspect graphique de votre site ou bien encore la navigation.

Chaque fois que vous testez votre site, il est automatiquement enregistré.

Note : certains éléments ne fonctionnent pas lors d’une prévisualisation mais une fois votre site en ligne (Blogs, formulaire de contact).

Mots clés : Tester, Prévisualiser site, Vérifier

Publier votre site

Avant de lancer la publication, assurez-vous d’avoir correctement renseigné les

paramètres de publication de votre site WebAcappella (voir « Configurer la publication de votre site WebAcappella » ).

Cliquez sur cette icône «

Publier

» pour mettre en ligne votre site ou publier les dernières modifications effectuées. La publication automatique sera lancée. Une fenêtre s’ouvre vous présentant l’avancement du transfert de vos fichiers. A chaque modification sur votre site, pensez à le publier pour qu’il 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 fenêtre vous donne un récapitulatif des informations relatives à votre site WebAcappella :

- Adresse où le site pourra être consulté

- Nombre de fichiers modifiés

- Taille du site Web

Mots clés : Publier, Espace web, Editer, Mettre en ligne, Edition

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Visiter votre site

Vous pouvez à tout moment accéder à votre site en ligne (s’il est déjà publié) en cliquant sur l’icône

« Visiter votre site ».

Vous serez alors directement envoyé sur la page d’accueil de votre site WebAcappella.

Mots clés : Visiter votre site, Inspecter

POUR ALLER PLUS LOIN

Organisation des pages

Lorsque vous créez un site contenant de nombreuses pages, l'explorateur de pages vous en facilite leur organisation.

Dossiers

WebAcappella vous permet d’organiser vos pages dans des dossiers. Vous pouvez ainsi regrouper plusieurs pages dans un même dossier afin de les classer par thème et d’y accéder rapidement.

Par exemple : dossier « Pages photos », dossier « Pages produits », dossier « Pages achat »...

Cliquez sur l'icône pour accéder au menu. Cliquez ensuite sur «

Créer un nouveau dossier

». Ensuite, faites glisser simplement les pages dans le dossier.

Renommer

Vous pouvez renommer vos pages et vos dossiers. Les noms donnés dans l'explorateur n'ont aucune influence sur le nom de vos pages en ligne.

Pour renommer une page ou un dossier

- Sélectionnez une page ou un dossier

- Effectuez un simple clic dessus ou ouvrez le menu et cliquez sur «

Renommer

- Attribuez un nom de votre choix.

Changer la page d'accueil

La page qui s’affiche par défaut 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.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Pour cela, sélectionnez la page désirée et cliquez sur le menu . Cliquez ensuite sur

Définir comme page d'accueil du site Web

». La page sélectionnée sera alors automatiquement placée en page d'accueil.

Limitations de la version Gratuite.

Mots clés : Organisation des pages, Explorateur, Organiser, Structurer, Hiérarchiser

Les maquettes

Les maquettes permettent de créer un style visuel uniforme sur l’ensemble des pages de votre site.

Grâce aux maquettes, la mise en page sera simplifiée et votre site aura un aspect visuel global homogène (pas de décalage dans les menus ou les éléments récurrents de vos pages).

Aussi, si vous désirez effectuer des changements, modifiez seulement la maquette. Les changements seront alors effectifs sur toutes les pages utilisant cette maquette.

Créer une maquette

Pour créer une maquette, cliquez sur l’icône 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 s’ouvre dans l'explorateur de maquettes.

Créez votre maquette comme n'importe quelle page.

Elle peut par exemple se composer d’images, de zones de couleur, de menus dynamiques et de boutons.

Cette composition sera enregistrée comme maquette et pourra servir de base homogène à la création des pages de votre site.

Un repère de couleur sera automatiquement attribué à votre maquette. Il est visible à gauche du nom de la maquette dans l’explorateur. Lorsque vous utiliserez cette maquette sur une page de votre site, ce repère de couleur sera reporté sur votre page, vous permettant ainsi d'identifier facilement la maquette utilisée.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Intégrer une maquette à votre page

Une fois votre maquette créée, vous pouvez l’appliquer à vos pages.

Dans la page en création, affichez les propriétés de la page. Dans l’onglet «

Arrière plan

» cochez la case «

Utiliser une maquette comme arrière plan

». Sélectionnez ensuite votre maquette et cliquez sur «

».

La maquette sera intégrée à l’arrière plan de votre page. Un repère de couleur correspondant à votre maquette apparaît alors sur la gauche du nom de votre page.

Note : les modifications des éléments 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 effectuées sur une maquette sont automatiquement prises en compte sur les pages utilisant la maquette.

Voir aussi : Les pieds de page.

Mots clés : Maquette, Pied de page, Repère de couleur

Les calques

Comme nous l’avons précédemment vu, les calques sont utilisés pour regrouper des

éléments.

Vous pouvez créer un ensemble en vue d'une modification simplifiée des éléments

(exemple : regrouper tous les éléments d'une barre de navigation afin de pouvoir sélectionner et déplacer tous ces éléments en un seul clic ou une fois que l’ensemble est créé et que le placement dans la page est définitif, verrouiller le calque pour « ancrer » ces éléments et qu’ils ne soient plus sélectionnables.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Les actions disponibles dans l’explorateur 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 élément sélectionné(s) dans l'espace de travail au calque sélectionné.

- Verrouiller le calque : les éléments contenus dans un calque ne seront plus sélectionnables dans l'espace de travail (pour par exemple éviter toute action non désirée).

- Isoler le calque : permet d'isoler un élément ou un groupe d'éléments présents dans un calque (le reste des éléments de la page sera alors non sélectionnable). Ceci permet par exemple de modifier les attributs des éléments présents dans ce calque

(taille, bordure, opacité).

- Associer des calques : permet d’associer deux ou plusieurs calques sélectionnés.

- Dissocier les éléments : permet d'enlever du calque les éléments qui y sont présents.

- Supprimer le calque : supprime le calque ainsi que les éléments qui y ont été ajoutés.

Voir aussi l’explorateur de calques.

Mots clés : Explorateur, Calques

Les pieds de page

Les pieds de page fonctionnent de la même manière que

les maquettes.

Les pieds de pages sont utiles pour créer le bas des pages de votre site Web. Des liens vers les mentions légales, les contacts, le copyright.... peuvent y être intégrés.

Pour créer un pied de page

- Créez une nouvelle maquette (que vous pouvez renommer « pied de page » pour la reconnaître plus facilement) et intégrez vos éléments.

- Dans l’onglet «

Arrière plan

», section «

Pied de page

», cliquez sur «

Choisir un pied de page

».

Manuel d’utilisation WebAcappella 4 – Juillet 2014

- Sélectionnez votre pied de page dans la liste des maquettes puis cliquez sur «

».

Note : Le pied de page n’apparaît pas lors de la création. Vous pourrez le voir seulement en prévisualisation ou une fois le site en ligne.

Le pied de page s’adapte automatiquement à la hauteur de votre page et vient se placer juste après le dernier élément, en bas de la page.

Attention : Si vous utilisez une maquette, appliquez directement le pied de page à la maquette. Il est impossible d’appliquer une maquette et un pied de page en même temps.

Voir aussi : les maquettes

Mots clés : Maquette, Pied de page

La barre de multilangage

WebAcappella permet de créer et de gérer des sites Internet multilingues.

La barre des langues, située au dessus de l’explorateur de pages en haut à gauche de l’écran, vous permet de passer aisément d’une langue à l’autre lors de la création du site. Cette barre est uniquement visible lorsque le multilangage est activé sur votre site.

Voir aussi : activer le multilangage

Mots clés : Multilangage, Barre, Langues, Langage

Manuel d’utilisation WebAcappella 4 – Juillet 2014

GESTION DES RESSOURCES DE VOTRE SITE

Bibliothèque des fichiers de votre site

L'icône vous permet d'accéder à la bibliothèque de fichiers.

Cet onglet vous permet de gérer les fichiers ajoutés à votre site WebAcappella. Vous pouvez les renommer, les supprimer ou bien les classer dans des dossiers.

Pour ajouter des fichiers à la bibliothèque de ressources et y avoir accès, cliquez sur le bouton «

Ajouter des fichiers depuis votre ordinateur

».

Le bouton «

Nettoyer les fichiers inutilisés

» supprime les fichiers non intégrés ou liés aux pages de votre site.

Si vous effectuez des modifications sur un fichier, sélectionnez-le puis cliquez sur

Rafraîchir le fichier

» pour le mettre à jour (importez la dernière version de votre fichier depuis votre ordinateur).

Mots clés : Fichiers, Bibliothèque des fichiers, Gestion, Fichiers inutilisés, Rafraîchir le fichier, Eléments, Images, Ressources, Effacer

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Bibliothèque des images de votre site

L'icône vous permet d'accéder à la bibliothèque d'images.

Cet onglet vous permet de gérer les images intégrées dans votre site WebAcappella.

Vous pouvez les renommer, les supprimer ou bien encore les classer dans des dossiers.

Pour ajouter des images à la bibliothèque de ressources et y avoir accès, cliquez sur le bouton «

Ajouter des images depuis votre ordinateur

».

Le bouton «

Nettoyer les images inutilisées

» supprime les images non intégrées aux pages de votre site.

Mots clés : Images, Bibliothèques d’image, Gestion, Images inutilisées, Importer des images, Librairie

LES ÉLÉMENTS DE VOTRE PAGE

Propriétés générales des éléments

La quasi totalité des éléments ont certains paramétrages en commun :

- Les propriétés géométriques

- Les propriétés du fond

- La transparence

- Les bordures

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Propriétés géométriques des éléments

Ces paramétrages, accessibles depuis l'inspecteur de chaque élément, vous permettent de régler avec précision la taille de votre objet et son emplacement dans la page. Vous pouvez aussi régler l'angle de rotation de cet élément. x : distance à partir du bord gauche de la zone de travail y : distance à partir du haut de la zone de travail

Largeur : Largeur de l’élément

Hauteur : hauteur de l’élément

En cochant la case «

Conserver les proportions

», le ratio Hauteur - Largeur restera le même si vous augmentez ou diminuez la taille de l'élément. Enfin, sur certains éléments vous pouvez régler avec précision l'angle de rotation.

Mots clés : Propriétés des éléments, Géométrie, Rotation, Position, Taille, Conserver proportions, Dimensions

Propriétés du fond des éléments

Ces paramétrages vous permettent d'appliquer une couleur ou une image de fond à vos

éléments pour personnaliser leur apparence.

Dégradé de couleur

Pour appliquer un dégradé de couleur en arrièreplan d’un élément activez-le en cochant la case «

Dégradé

». Choisissez les couleurs du dégradé

(vous pouvez choisir le degré d’opacité des couleurs ou faire simplement un dégradé vers une transparence). Une fois les couleurs déterminées, vous pouvez déplacer les curseurs afin de régler l’orientation et la force du dégradé.

Mots clés : Propriétés, Fond, Image de fond, Couleur de fond, Dégradé

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Transparence des éléments

Chaque élément peut être rendu plus ou moins opaque.

Par défaut, l’élément est opaque à 100 % mais vous pouvez régler sa transparence en bougeant le curseur vers la gauche ou la droite.

Mots clés : Propriété, Fond, Transparence, Opacité, Pourcentage

Les bordures

Vous pouvez attribuer à beaucoup d’éléments une bordure.

Vous avez le choix entre différentes options : coin, bordure et ombre portée. Ces options vous permettent de varier l’apparence des éléments pour leur donner un aspect graphique agréable.

Choisissez la taille des options de bordure grâce aux menus déroulants (exprimé en pixels).

Ombre portée

Exemples de paramétrages d'ombre portée :

Exemple 1

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Exemple 2

Exemple 3

Mots clés : Propriétés, Bordure, Coin, Ombre portée, Angle, Arrondi

Les éléments

Bouton

Afin de créer vos liens ou vos menus, WebAcappella met à votre disposition des boutons de navigation entièrement paramétrables. Pour insérer un bouton, cliquez sur le menu «

Insertion

» - «

Ajouter un bouton

», ou cliquez sur l'icône.

Aspect général du bouton

Dans cette partie choisissez la forme générale de votre bouton (vous pouvez paramétrer le % d’arrondi du coin).

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Aspects graphiques du bouton

Il est possible de déterminer l’aspect 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 sélectionner une couleur sur la palette ou sélectionner une image depuis votre «

Bibliothèque de ressources

».

Si vous laissez cochée la case «

Lien

», les couleurs de bordure et de dégradé seront automatiquement choisies par WebAcappella (pour obtenir un dégradé de tonalité). Si vous décochez cette case «

Lien

» vous pouvez alors choisir les couleurs que vous souhaitez (afin d'obtenir un résultat personnalisé).

Attention : si vous cochez à nouveau cette case, vos couleurs personnalisées seront

à nouveau remplacées par les couleurs automatiques.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Pictogramme

L’option «

Pictogramme

» vous permet d’insérer une image dans votre bouton afin de le personnaliser. Si vous décochez l’utilisation du pictogramme dans «

l’État survolé

» ou dans «

l’État actif

», le pictogramme de «

l’État normal

» sera alors utilisé par défaut.

Vous choisissez la taille de votre pictogramme (en %) grâce au menu déroulant.

Propriétés du texte

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

Propriétés générales du texte

Entrez le texte qui apparaîtra sur votre bouton. Pensez à adapter la taille du bouton à la taille de votre texte.

Vous pouvez aussi faire apparaître une info-bulle. Lors du survol de votre bouton, le texte que vous aurez saisi apparaîtra dans une bulle. Cette option est pratique lorsque vous désirez décrire à quoi correspond le bouton.

Choisissez une police de caractère, sa taille et ses attributs (gras ou italique) et déterminez l’alignement de votre texte (à gauche, centré ou à droite).

La marge intérieure détermine l’emplacement du texte dans le bouton. Plus le pourcentage est élevé, plus le texte sera éloigné des bords du bouton. La marge intérieure est inefficace si le texte est centré.

Liens

Dans l’onglet «

Lien

» des propriétés du bouton, choisissez la destination du lien

hypertexte de votre bouton (voir section « Créer des liens Internet »).

Fonction Blog

Sur chaque bouton, vous pouvez ajouter la fonction «

Blog

» qui permettra à vos visiteurs de laisser un message ou de réagir à vos articles.

Pour activer la fonction Blog, cliquez sur l'onglet «

Lien

» de l'inspecteur du bouton.

Sélectionnez ensuite le type de lien «

Lien vers le Blog

». Il suffit de cliquer sur ce bouton pour laisser un message.

Manuel d’utilisation 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 caractère % étant toujours remplacé par le nombre de commentaires sur ce blog.

Le champs «

Identifiant de votre Blog

» est géré par WebAcappella. Un code est automatiquement généré, code qui pourra être copié puis collé dans un autre champ

Identifiant de votre blog

» d'un autre bouton. Ce système permet de supprimer un blog d'une zone de texte et de transférer les messages déjà postés vers un autre blog.

Voir prérequis techniques

Propriétés géométriques

Réglez avec précision la taille de votre objet et son emplacement dans la page.

Voir propriétés géométriques

Mots clés : Élément, Bouton, Pictogramme, Blog, Lien, Etat bouton

Image

WebAcappella vous permet d’intégrer autant d’images que vous le désirez et de les placer où

vous le souhaitez.

Cliquez sur l’icône «

Image

» ou depuis le menu «

Insertion

» cliquez sur «

Insérer une image

».

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Survol de l’image

WebAcappella vous donne aussi la possibilité de créer un changement d’image au

survol de l’image principale, donnant ainsi du dynamisme à vos pages.

Cliquez dans le deuxième cadre et choisissez une image. Cette image de survol peut être enlevée à tout moment en cliquant sur la croix rouge.

Note : le survol de l'image est désactivé si vous utilisé l'effet de reflet

Fancybox

L'option FancyBox vous permettra d'afficher un agrandissement de votre image au sein même de la page (dans une fenêtre 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 affichée avec l'effet FancyBox

Manuel d’utilisation 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 activée) comme une galerie photo. Vous pouvez créer plusieurs groupes d'images afin de les séparer ou de les regrouper

(images ayant par exemple le même thème). Le chiffre attribué à chaque image déterminera sa position dans la galerie photo (par ordre croissant).

Le bouton «

Editer les propriétés par défaut

» fixe les règles d'affichage de vos images pour l'effet FancyBox (taille maximale d'affichage, effet, lecture en boucle, commentaire). Les paramètres appliqués sont communs à toutes les images utilisant

FancyBox.

Voir Prérequis techniques.

Propriétés géométriques

Réglez avec précision la taille de votre objet et son emplacement dans la page. Vous pouvez aussi régler l'angle

de rotation. Voir : Propriétés géométriques

Mots clés : Élément, Image, Survol Fancybox, Propriété,

Géométrie, Rotation, Position, Taille, Dimension,

Proportion, Png, Jpg, Jpeg, Photo

Zone de texte

Ajoutez une zone de texte grâce à l’icône «

Texte

» ou par le menu «

Insertion

» -

Ajouter du texte

».

Saisissez votre texte en double cliquant dans la zone. Différents styles de texte sont à votre disposition : l’écriture en gras, italique et souligné, l’alignement de votre texte à

Manuel d’utilisation WebAcappella 4 – Juillet 2014 gauche, à droite ou centré, le changement de couleur et de taille ainsi que de l'ombre portée (non disponible si le texte est transformé en image).

Vous avez la possibilité de créer, de modifier ou de supprimer des liens hypertexte (internes ou externes) sur une partie ou sur l’ensemble de votre texte.

Si vous voulez qu’une zone de texte garde une certaine taille mais que votre texte est plus long, la zone crée automatiquement une barre de défilement verticale. Cette barre peut être en permanence visible ou uniquement présente lors du survol du texte

(cochez la case «

Cacher automatiquement

» pour cette visualisation).

Le défilement du texte (vertical ou horizontal) est aussi possible. Paramétrez les options de défilement directement dans l'inspecteur.

L'inspecteur vous permet aussi d'éditer d'autres caractéristiques de la zone de texte :

- Marge intérieur

- Couleurs des liens

- Bordure, dégradé, arrière plan et transparence

- Ombre portée

Transformer le texte en image

Cette option vous permet de transformer vos polices de caractère 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 propriétés, cochez la case «

Transformer le texte en image

».

Attention : Cette option désactive les liens appliqués sur le texte ainsi que le défilement. Cette fonctionnalité est surtout conseillée 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 transformés en image ne sont pas pris en compte pour le référencement 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 personnalisées sur votre

Manuel d’utilisation 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 caractère (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 décompressez-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 téléchargées sont désormais accessibles dans la liste des polices disponibles sur votre ordinateur (et identifiées grâce à l'icône jaune placée sur sa gauche).

- Vous pouvez maintenant utiliser cette police dans votre site WebAcappella. Cette dernière sera visible par l'ensemble de vos visiteurs (qui n'ont pas besoin d'avoir cette police d'installée 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 placées en début de liste et identifiées grâce à une icône jaune.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Balises « Heading » (H1, H2, H3…)

L'utilisation de ces balises, pour l'optimisation du référencement de vos textes, demande des connaissances en SEO.

Propriétés géométriques

Réglez avec précision la taille de votre objet et son emplacement dans la page. Vous

pouvez aussi régler l'angle de rotation. Voir : Propriétés géométriques

Mots clés : Élément, Texte, Texte en image, Google Web Fonts, Heading, H1, H2,

Balise, UTF-8, Police personnalisée, Caractère, Police, Style, Pixeliser

Album photo

Vous pouvez intégrer à votre site Web un album photo paramétrable. Cliquez sur le menu «

Insertion

» - «

Ajouter un album Photo

».

Mode normal Mode pleine page

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Pour paramétrer votre album photo, l'inspecteur de propriétés est divisé en 5 onglets :

- Ajout d’images

- Paramétrages de l’album photo

- Propriétés du diaporama

- Propriétés des commentaires

Propriétés géométriques

Voir : Limitations de la version Gratuite.

Onglet ajout d’images

Pour ajouter des images à votre album photo, cliquez sur l'icône « + » et importez vos photos depuis votre bibliothèque d'images. Pour supprimer ou déplacer vos photos, utilisez la barre d'outils située à 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 sélectionnez-en une, puis cliquez sur pour éditer ses propriétés.

Cadrage de la miniature

Le cadrage de la miniature vous permet de sélectionner une zone de l’image qui apparaîtra dans le sélecteur d’images.

Sélectionnez un format pour le cadrage et déplacez la zone à l’endroit voulu sur votre image. Par défaut, l’image est à 100 % et rognée sur les bordures pour former un carré et s’adapter aux miniatures du sélecteur d’images. Ce cadrage n’affecte pas l’image dans la zone de visualisation et dans le diaporama. Les flèches servent à faire pivoter vos images (dans le sens horaire et antihoraire).

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Description

Le champ description correspond au texte qui apparaîtra 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 posséder un compte utilisateur chez Flickr.

Si vous possédez 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 dédiés à cet effet (dans l'inspecteur de propriétés de l'album photo en mode Flickr).

Onglet paramétrages de l’album photo

Choisissez ici le mode d'affichage de votre album (Classique, diaporama automatique ou défilement image par image).

Déterminez la taille et l'espacement des miniatures, les options d'affichage de la navigation, l'ombre portée et enfin l'effet de transition entre les images (plus le curseur sera placé à gauche, plus les images auront un enchaînement en fondu).

Note : En mode diaporama automatique, les commentaires de vos photos s’affichent sur une seule ligne (retour à la ligne non pris en charge).

Onglet paramètres du diaporama

Choisissez ici d'autoriser ou non la lecture aléatoire des images, le temps d'affichage de chaque image (en secondes) et l'affichage du bouton donnant accès à ce mode de lecture en diaporama.

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Onglet paramètres des commentaires

En cochant ou décochant la case «

Afficher les commentaires

» vous rendrez visible ou invisible la zone de commentaires.

Vous pouvez aussi déterminer les paramètres d'attribution de nom à vos photos.

Enfin, vous pouvez choisir de faire apparaître ou non les info-bulles personnalisées de vos miniatures.

Onglet propriétés géométriques

Vous pourrez régler avec précision la taille de votre objet et son emplacement dans la page.

Voir : Propriétés géométriques

Mots clés : Élément, Album photo, Miniature, Diaporama, Image principale,

Sélecteur d’images, Image défilante, Pleine page, Cadrage, Commentaires, Vitesse,

Slideshow, Remarques

Couleur

Cliquez dans le menu «

Insertion

» puis sur «

Couleur

». Une zone de couleur apparaît.

Vous pouvez la redimensionner et choisir sa couleur ou son image d’arrière plan.

Vous pouvez par la suite régler son degré

de transparence et lui attribuer une bordure .

De même, vous pouvez appliquer un dégradé, des coins arrondis ainsi qu’un effet d’ombre portée.

Vous avez accès également à ses

propriétés géométriques .

Note : En réglant son ordre d’apparition dans la page (premier plan, arrière plan,

avancer, reculer), vous pouvez vous servir de cet élément comme base d’une création graphique pour votre site.

Mots clés : Élément, Zone de couleur, Aplat, Forme géométrique

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Menu dynamique

Le menu dynamique facilite la navigation dans votre site en vous proposant un système de menus et de sous-menus.

Organisation de votre menu

Pour créer un menu principal, sélectionnez «

Menu dynamique

», puis cliquez sur .

Pour un sous-menu, placez-vous sur un menu principal et cliquez sur .

Dans la fenêtre «

Nom du menu

», vous pouvez renommer vos menus et sous-menus puis leur attribuer un lien.

Réorganisez votre menu grâce aux boutons «

Monter

» et «

Descendre

».

Apparence de votre menu

L’onglet «

Aspect du menu dynamique

» permet de régler l’apparence de votre menu et de vos sous-menus.

Choisissez l’orientation, le fond , la police de caractère, la couleur des séparateurs, le

style qui apparaîtra lors du survol du texte, l’apparence des coins, la bordure ,

les propriétés géométriques ...

Mots clés : Élément, Bouton, Menu dynamique, Navigation, Sous-menu

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Frame dynamique

L'élément frame dynamique vous permet de créer un groupe d'éléments une seule fois dans une sorte de maquette pour l'utiliser ensuite de manière régulière sur les différentes pages de votre site (placement libre). De plus, lorsque vous modifiez votre maquette, toutes les frames dynamiques qui pointent vers cette maquette seront aussi modifiées.

Pour utiliser une frame dynamique :

- Créez une nouvelle maquette à partir de l'explorateur de maquettes

- Créez, dans la zone de travail, une composition que vous serez amené à utiliser régulièrement dans vos pages (mais que vous souhaitez placer à des endroits différents des pages).

- Dans une page de votre site en construction, ajoutez un élément

Frame dynamique

».

- Sélectionnez 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 clés : Frame dynamique, Maquette, Zone dynamique

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Moteur de recherche

Le moteur de recherche intégré à

WebAcappella permet de rechercher un ou plusieurs mots dans les textes de votre site. Aucun paramétrage de fonctionnement n'est requis.

Pour que votre moteur de recherche affiche des résultats personnalisés (afin d'obtenir des informations sur les pages données en résultat) les paramètres de référencement

de vos pages doivent être renseignés. Voir aussi le référencement des pages.

Les textes saisis dans les champs «

Titre de votre page Web

» et «

Description de votre page Web

» seront les informations affichées dans les résultats des recherches.

Pour ajouter un moteur de recherche à votre site, cliquez sur «

Insertion

» - «

Moteur de recherche

».

Modifiez ensuite l’aspect visuel du champs de saisie (le texte et le bouton). Vous avez

accès également aux propriétés géométriques.

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 résultats de votre recherche s'affichent alors dans une fenêtre en superposition.

Vous pouvez ensuite effectuer une nouvelle recherche, cliquer sur un lien ou fermer la fenêtre.

Astuce : nous vous conseillons d'insérer le moteur de recherche dans une maquette

ou dans chacune de vos pages pour autoriser la recherche à n'importe quel moment.

Mots clés : Élément, Moteur de recherche

Formulaire de contact

Cet élément vous permet de créer un formulaire de contact pour votre site.

Choisissez les champs que vous désirez voir apparaître, l’apparence de votre formulaire

Manuel d’utilisation WebAcappella 4 – Juillet 2014 ainsi que les paramètres d’envoi du mail.

Note : les chiffres placés à droite des champs sont des repères visuels vous permettant d'identifier rapidement le champ que vous souhaitez modifier.

L'inspecteur du formulaire de contact est divisé en cinq principales catégories

- Les champs du formulaire

- Le style visuel des champs

- Les boutons de votre formulaire

- Le style visuel du fond du formulaire

- Les propriétés géométriques

Les champs du formulaire

Ajoutez, supprimez ou déplacez vos champs grâce aux boutons disponibles sous l'intitulé «

Gestion des champs

».

La liste déroulante «

Champ en cours d'édition

» vous permet de naviguer entre les différents champs de votre formulaire.

Attribuez le nombre maximum de caractères insérables à la zone en cours d’édition.

Déterminez le type de zone que vous désirez insérer 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

([email protected]). WebAcappella vérifie le formatage de l'adresse email.

- «

Texte éditable

» : zone de texte à remplir par l’utilisateur (exemples : nom, prénom...). Vous avez la possibilité de saisir un texte d'exemple dans le champs

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Message par défaut »

. Exemple : « Saisir ici votre nom ».

- «

Texte éditable large

» : texte libre où l’utilisateur peut saisir son message.

Paramétrez la hauteur du champ en pixels et en nombre maximum de caractères.

- «

Choix multiples

» : ce type de champs vous permet d'ajouter un menu déroulant dans votre formulaire. Dans le champs «

Liste des valeurs

» saisissez votre liste de choix en séparant les valeurs par une virgule (exemple : M.,Mlle,Mme). Vous avez aussi la possibilité de choisir une des valeurs saisies comme valeur par défaut de votre menu déroulant grâce à «

Elément sélectionné par défaut

».

Si vous désirez qu’un champ soit obligatoirement rempli par l’utilisateur du formulaire, cochez la case «

Champ obligatoire

».

Pour que les mails envoyés depuis le formulaire vous parviennent, remplissez les champs «

Intitulé du mail

» et «

Destinataire

» avec votre adresse e-mail

Forcer la réponse 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 « Répondre » ou « Transférer » depuis votre messagerie (Gmail, Yahoo...) l'adresse email du message sera automatiquement reconnue et utilisée comme adresse email de réponse.

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 d’arrière-plan et une bordure à vos champs et

modifier l’apparence de votre texte (pour le nom des champs).

Les boutons de votre formulaire

La couleur des boutons et du texte peut être modifiée en mode normal et survolé.

Choisissez aussi le style de texte de vos boutons.

Vous avez enfin le choix de faire apparaître ou non le bouton «

Effacer

» qui sert à supprimer tout le contenu saisi dans les champs éditables du formulaire.

Fond

Paramétrez enfin le fond

de votre formulaire : couleur/image de fond, bordure , ombre portée et transparence .

Voir Prérequis techniques.

Mots clés : Élément, Formulaire de contact, Champ, Questionnaire

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Google Maps

Ajoutez des plans Google Maps dans vos pages.

Insérez l'élément Google Maps et choisissez sa taille. Insérez ensuite votre adresse complète dans le champs dédié à cet effet de l'inspecteur de propriétés. Vous pouvez

également paramétrer la bordure

et les propriétés géométriques .

Votre plan s'affiche automatiquement dans votre page.

Mots clés : Élément, Google Maps, Plan, Elément, 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

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Pour intégrer un élément audio à votre site, cliquez sur le menu «

Insertion

» puis sur

Audio

».

L'inspecteur de l'élément audio vous permet de :

- Choisir le lien vers votre son (format .mp3 impératif) depuis la bibliothèque de ressources (grâce au bouton « + ») ou depuis une adresse Internet.

- Paramétrer les options de lecture («

Lancer au démarrage

», «

Répéter

» et «

Volume par défaut

»).

- Paramètres géométriques

Note : Votre élément audio est lu en streaming. Ceci signifie qu'il n’a pas besoin d’être complètement chargé pour que la lecture commence.

Limitations de la version Gratuite.

Mots clés : Élément, Son, Sonore, Musique, Audio,

Vidéo

Pour intégrer une vidéo à votre page, cliquez sur le menu «

Insertion

» puis sur

Elément vidéo

».

Vous pouvez insérer des vidéos hébergées en ligne sur les sites Youtube, Dailymotion ou Myspace.

Collez dans le champ de l'inspecteur vidéo le code d'intégration que vous souhaitez mettre en place.

Dans Youtube par exemple, le code d'intégration se situe dans : lien « Partager » puis cliquez sur le lien « Intégrer ».

Mots clés : Élément, Vidéo, Youtube, Dailymotion, MySpace, Vidéo en ligne, Film

Flash

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Vous pouvez insérer 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 l’adresse de l’animation Flash (en entier).

- Lien vers un fichier : sélectionnez votre animation ou ajoutez-la dans l’explorateur de fichiers en cliquant sur «

Ajouter un fichier

», puis sélectionnez le fichier importé depuis votre ordinateur.

Les utilisateurs expérimentés ayant créé eux même leur animation Flash peuvent modifier les paramètres de leur animation via la fenêtre de paramétrage des noms et valeurs.

Mots clés : Élément, Flash

Frame

Une frame est une fenêtre à l’intérieur même d’une page dont le contenu est indépendant 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.

Différents types de liens peuvent être appliqués à une frame :

« Lien vers une page de ce site Web »

Sélectionnez dans le menu déroulant «

Lien vers une page de ce site Web

». Choisissez une page de votre site qui apparaîtra alors dans la frame.

« Lien vers un fichier »

Ce lien ouvrira le fichier sélectionné à l’intérieur de la frame à condition que votre navigateur Internet soit équipé des fonctionnalités nécessaires à sa lecture (Adobe PDF

Reader, images, fichiers en .txt texte simple...). Dans le cas contraire, le fichier sera ouvert de manière externe (en dehors de votre navigateur Internet) par le logiciel correspondant au fichier (Word, Excel…).

Sélectionnez «

Lien vers un fichier

» dans le menu déroulant. Cliquez ensuite sur

Ajouter un fichier

» et sélectionnez le fichier voulu.

« Lien vers une adresse Internet »

Manuel d’utilisation WebAcappella 4 – Juillet 2014

Votre frame aura pour contenu un site Internet dont vous aurez déterminé l’adresse.

Note : pensez à adapter la taille de votre frame au site Internet mis en lien.

Sélectionnez «

Lien vers une adresse Internet

» puis tapez l’adresse Internet dans le champ correspondant.

Limitations dans certains navigateurs.

Mots clés : Élément, Frame, Position

Code HTML

Vous avez la possibilité de saisir vous-même du code HTML et de l’incorporer dans

la page en cours de création. Des notions en codage sont nécessaires.

Dans le menu «

Insertion

», cliquez sur «

Ajouter une zone de code HTML

».

Saisissez votre code dans la fenêtre prévue à cet effet dans l'inspecteur et gardez la case

Activer le code HTML ci-dessous

» cochée. 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 utilisée n'importe où dans un code et sera remplacée par le code langue de la page courante (utilisateurs expérimentés).

Limitations dans certains navigateurs.

Mots clés : Élément, Code HTML, Variable

Manuel d’utilisation WebAcappella 4 – Juillet 2014