WebCreator 7  
Manuel de prise en main  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Prise en main de WebCreator 7  
Table des matières  
1
2
.
.
Bienvenue dans WebCreator 7.............................................................................................................. 5  
.1. Démarrage du programme............................................................................................................ 5  
Premiers contacts.................................................................................................................................. 6  
.1. L’espace de travail......................................................................................................................... 7  
.2. Personnaliser un modèle............................................................................................................... 7  
1
2
2
2
2
.2.1.  
.2.2.  
Modifier un texte................................................................................................................... 8  
Remplacer une image.......................................................................................................... 10  
3
.
Architecture des pages........................................................................................................................ 13  
.1. La notion de Conteneurs et de Blocs........................................................................................... 14  
3
3
3
3
.1.1.  
.1.2.  
.1.3.  
La notion de Blocs................................................................................................................ 15  
Ajouter des blocs dans une section..................................................................................... 15  
Déplacer des blocs d’une section à une autre..................................................................... 17  
4
5
6
.
.
.
Les modes de positionnement sous WebCreator ............................................................................... 17  
.1. Le positionnement Libre.............................................................................................................. 17  
.2. Le positionnement Flottant......................................................................................................... 18  
Ajouter une section avec des blocs..................................................................................................... 18  
.1. Créer une nouvelle section.......................................................................................................... 18  
4
4
5
6
5
.1.1.  
Gestion des blocs................................................................................................................. 19  
Gros plan sur les éléments .................................................................................................................. 23  
.1. Généralités .................................................................................................................................. 23  
6
6
6
6
6
.1.1.  
.1.2.  
.1.3.  
.1.4.  
.1.5.  
Où trouver les éléments...................................................................................................... 23  
Insertion d’un élément........................................................................................................ 23  
Propriétés communes ......................................................................................................... 23  
Alignement .......................................................................................................................... 24  
Empilement avec l’Ordre Z.................................................................................................. 25  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
6
.1.6.  
Le mode imbriqué ............................................................................................................... 26  
6
.1.7.  
Gestion des Groupes ........................................................................................................... 27  
6
.2. Présentation des principaux Éléments........................................................................................ 27  
6
6
6
6
6
6
6
6
6
6
6
6
6
.2.1.  
.2.2.  
.2.3.  
.2.4.  
.2.5.  
.2.6.  
.2.7.  
.2.8.  
.2.9.  
Image................................................................................................................................... 27  
Bouton................................................................................................................................. 27  
Menu ................................................................................................................................... 27  
Titre H1 H6 : Balises H1 à H6 ............................................................................................... 28  
Panneaux et Boîtes.............................................................................................................. 29  
Iframe : insérez un autre site dans une page ...................................................................... 30  
Boîtes à Onglets................................................................................................................... 30  
Accordéon............................................................................................................................ 31  
Canvas.................................................................................................................................. 31  
.2.10. Diaporama........................................................................................................................... 32  
.2.11. Éléments Web ..................................................................................................................... 33  
.2.12. Service Web......................................................................................................................... 33  
.2.13. Formulaire ........................................................................................................................... 37  
7
8
.
.
Mise en ligne de votre site .................................................................................................................. 38  
.1. Hébergement............................................................................................................................... 38  
.2. Nom de domaine......................................................................................................................... 38  
.3. Téléchargement (upload) du site ................................................................................................ 38  
.4. Référencement............................................................................................................................ 40  
Trucs, astuces et conseils de travail .................................................................................................... 41  
.1. Sécurité........................................................................................................................................ 41  
7
7
7
7
8
8
8
8
.1.1.  
.1.2.  
.1.3.  
Problèmes possibles............................................................................................................ 41  
Emplacement des fichiers projets et site ............................................................................ 41  
Faire des sauvegardes ......................................................................................................... 42  
8
8
8
8
8
.2. Grille ............................................................................................................................................ 42  
.3. Palettes de couleur...................................................................................................................... 43  
.4. Commande d’annulation............................................................................................................. 44  
.5. Travailler posément..................................................................................................................... 44  
.6. Zone d’édition et Vue hiérarchique............................................................................................. 44  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
8
8
8
.7. Taille automatique des panneaux ............................................................................................... 45  
.8. Un site aussi pour les Mobiles..................................................................................................... 45  
.9. Centre d'aide ............................................................................................................................... 46  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
1
.
Bienvenue dans WebCreator 7  
1.1. Démarrage du programme  
Après avoir procédé à l’installation, au premier chargement du programme, vous êtes invité à enregistrer  
votre version de WebCreator 7.  
Entrez alors le numéro de série et la clef de licence qui vous ont été fournis ainsi que vos informations  
d’identification.  
Les 4 premiers chiffres, dans l’image 0278, sont des identifiants de lot qui correspondent au lien de  
téléchargement qui se trouve sur votre facture.  
Pour récupérer clés et installeurs avec les bons numéros de lots, rendez-vous à l’adresse internet :  
http://www.lmsite.net/centreaide/recuperateur.phpBonjour,  
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Remplissez les 3 champs Numéro de série, Clef d’identification et Adresse mail et cliquez sur le bouton  
correspondant à l’action que vous désirez : Télécharger l’installeur de WebCreator, Recevoir le courriel  
d’activation ou recevoir les clés correspondantes à votre licence.  
Si vous avez changé d’adresse mail, allez à l’adresse suivante :  
www.lmsoft.com/enregistrement  
Saisissez en haut de la page votre numéro de série et votre ancienne adresse mail, puis cliquez sur le  
bouton-flèche pour charger votre profil. Enfin, dans les champs de bas de page de vos informations  
personnelles, saisissez la nouvelle adresse mail que vous voulez enregistrer.  
Il est très important que vous saisissiez une adresse mail valide, car c’est par ce biais que vous échangerez  
avec notre service de soutien technique et recevrez les informations relatives à ce dernier et aux mises à  
jour du programme.  
La licence de WebCreator vous donne droit à une installation sur trois machines différentes. Vous devez  
utiliser la même adresse de mail à chaque fois, celle du détenteur de la licence.  
2
.
Premiers contacts  
Après une présentation rapide des composantes de l’interface, nous vous montrerons comment utiliser  
WebCreator en adaptant rapidement un modèle prédéfini, et nous finirons par la manipulation des  
éléments essentiels à l’élaboration de pages avec WebCreator.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
2.1. L’espace de travail  
2.2. Personnaliser un modèle  
Nous allons vous montrer les principes de base de l’édition de pages sous WebCreator, en commençant  
par différentes manipulations essentielles dont nous vous expliquerons ensuite les concepts sous-jacents.  
Nous allons pour cela utiliser le modèle d’exemple ci dessous. C’est celui qui s’ouvre en premier lorsqu’on  
fait templatecreator.lmsoft.com ou Nouveau projet dans le logiciel.  
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Vous y retrouvez tous les composants désignés précédemment et remarquez que la Zone des contenus  
affiche une arborescence dans laquelle le premier élément, Page, est sélectionné par défaut. Nous y  
reviendrons.  
2
.2.1. Modifier un texte  
Dans la zone d’édition, cliquez sur le texte Lorem ipsum… Celui-ci s’entoure d’un cadre de sélection blanc  
muni de 8 poignées.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Vous remarquez simultanément qu’à droite, dans la Zone des contenus, la ligne Text1 – Lorem ipsum dol…  
est maintenant en sur-brillance.  
Si vous cliquez à nouveau dans le texte, un curseur d’insertion apparaît à l’endroit même où vous avez  
cliqué. Vous pouvez alors saisir du texte, en sélectionner, en effacer et effectuer toutes les manipulations  
habituelles d’un éditeur de texte avec l’aide des outils du menu Accueil.  
Avec la souris vous pouvez déplacer et redimensionner les éléments grâce au cadre qui les entoure,  
comme avec n’importe quel logiciel graphique. Lorsque vous placez le curseur de la souris sur le cadre, il  
se transforme en une croix fléchée (déplacement) et sur les poignées il se transforme en double flèche  
(redimensionnement).  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Après quelques manipulations, vous obtenez un aspect différent de celui du début.  
Le mode de positionnement que vous venez d’expérimenter et dans lequel vous prenez un élément et le  
placez directement à l’endroit où vous voulez s’appelle le positionnement libre. Le positionnement libre,  
c’est sans règles ni contraintes. C’est naturel et intuitif. Tant qu’on travaille dans une petite zone ou une  
page contenant peu d’éléments, c’est possible. On verra plus loin quoi faire quand le site est plus  
conséquent.  
2
.2.2. Remplacer une image  
Cliquez dans la partie gauche où s’affiche le compteur. A droite de l’interface, dans la Zone des contenus,  
la ligne sélectionnée indique Img2 – Cars_007.jpg. Vous pouvez aussi y sélectionner directement les  
éléments de la page.  
Plus bas, dans la Zone des propriétés, onglet Élément, vous retrouvez ce même nom sur la ligne Fichier :  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Pour notre exemple, sélectionnez par exemple l’image Cars_010.jpg et cliquez sur Ouvrir pour la charger.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Ce premier exercice vous a donné l’occasion de prendre contact avec de nombreux aspects de WebCreator  
et avec les manipulations essentielles de son interface et de ses outils.  
En vous essayant à ces quelques manipulations, vous pouvez rapidement arriver à personnaliser  
complètement votre page, dont vous pouvez voir un aperçu par l’onglet Visualisation avec Internet  
Explorer ou avec les autres navigateurs présents sur votre machine affichés dans la zone d’accès rapide.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Avant de poursuivre, nous devons évoquer l’architecture des pages et certains concepts, car ils  
représentent les fondements de l’organisation d’un travail efficace avec WebCreator 7.  
3
.
Architecture des pages  
Il est encore possible bien entendu de créer des pages en plaçant les éléments à la souris, en  
positionnement libre. Mais les sites web contemporains comportent souvent de longues pages qu’on fait  
défiler. Il devient alors difficile de manipuler tout ça : par exemple, si on veut ajouter une nouvelle en  
haut, il va falloir déplacer tous les éléments vers le bas. C’est faisable, mais il y a mieux. Il s’agit en fait de  
délimiter des zones. Ces zones, qu’on définit avec des panneaux, sont des conteneurs dans lesquels on  
peut placer des éléments, comme dans l’exemple ci-dessus, ou d’autres conteneurs plus petits, comme  
nous allons le voir dans l’exemple suivant.  
Typiquement donc, une page va être constituée de zones : une zone pour l’entête, une zone centrale,  
contenant des sous-zones et une zone de pied de page.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Ce type d’organisation constitue l’architecture de page des modèles de WebCreator. Elle vous permettra  
de créer très rapidement des pages modifiables et réutilisables de manière très simple et rapide.  
Les trois parties, HEADER, CENTER et FOOTER sont créées à partir d’éléments que l’on appelle des  
Conteneurs.  
3.1. La notion de Conteneurs et de Blocs  
Il y a dans WebCreator deux types d’éléments :  
1
2
) Les Éléments de base : ils servent par nature à afficher des informations. Ce sont les Images, les  
Textes, les Boutons, entre autres…  
) Les Conteneurs : ils servent à délimiter des zones d’affichage dans lesquelles sont contenus  
d’autres éléments basiques ou d’autres conteneurs plus petits, en les regroupant pour former des  
unités d’organisation de la page.  
La Page est le principal et le plus grand Conteneur. D’ailleurs, dans la Vue hiérarchique des éléments, elle  
se trouve tout en haut, car elle contient tous les autres éléments.  
Les HEADER, CENTER et FOOTER sont donc aussi des Conteneurs, logiquement plus petits que la Page qui  
les contient.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Plus précisément, ce sont des Conteneurs du type Panneaux qui ne servent en fait qu’à délimiter des zones  
d’architecture de la page ; des cadres invisibles dans lesquels sont placés d’autres Conteneurs et Éléments  
de base.  
3
.1.1. La notion de Blocs  
Nous utilisons le terme Bloc par analogie avec les jeux de construction. Un Bloc est en fait un panneau qui  
va se placer à l’intérieur d’un conteneur plus grand, comme une zone. Les Blocs peuvent être vides ou  
contenir des éléments, comme par exemple les 3 fiches-produit contenues dans la Section Produit :  
3
.1.2. Ajouter des blocs dans une section  
Cliquez dans le coin en bas à droite de la fiche Produit 1. Vous constatez qu’à droite, la Vue hiérarchique  
se cale automatiquement sur cette section et cette même fiche.  
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Faites un copier/coller du Bloc sélectionné.  
Le Bloc vient se positionner automatiquement en dessous des 3 autres et calé à gauche. Collez à nouveau  
le Bloc 2 fois : deux nouvelles fiches-produit viennent se placer immédiatement à droite de la précédente,  
parfaitement alignées. En plus, la hauteur de la Section Produits s’est ajustée automatiquement,  
repoussant tout le reste de la page vers le bas. C’est ce que l’on appelle Positionnement Automatique ou  
Flottant.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
3
.1.3. Déplacer des blocs d’une section à une autre  
Lorsque vous copiez/collez un bloc, il s’insère automatiquement dans le conteneur où se trouvait l’original.  
Pour le copier dans une autre section, il faut sélectionner le conteneur de cette section AVANT de coller le  
bloc. Un élément se colle toujours dans le conteneur qui est sélectionné.  
Vous pouvez parfois oublier de sélectionner le conteneur de destination. Vous vous en apercevez alors car  
le bloc n’apparaît pas là où vous l’attendiez. Dans ce cas, annulez la dernière action (le collage) par Ctrl+Z  
et vérifiez, avant de recommencer, que vous sélectionnez le bon conteneur de destination.  
Plus généralement, faites le Ctrl+Z à chaque fois que ce qui se produit ne correspond pas à ce que vous  
attendiez et vérifiez bien votre manipulation.  
4
.
Les modes de positionnement sous WebCreator  
Dans les exercices précédents, vous avez donc mis en œuvre les deux modes de positionnement de  
WebCreator : Libre et Automatique/ Flottant.  
4.1. Le positionnement Libre  
C’est le mode de positionnement intuitif et simple: on prend, on déplace et on pose.  
Il se trouve cependant qu’en matière de création de pages Web, ce mode a ses limites. Avec de longues  
pages contenant beaucoup d’éléments, ce qui semble justement devenir la norme, ça devient trop  
compliqué.  
 
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Le mode de positionnement libre est donc à privilégier pour la disposition des éléments dans de petites  
structures comme les Blocs que nous avons évoqués précédemment, des cadres d’informations ou des  
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs.  
4.2. Le positionnement Flottant  
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits  
Conteneurs, comme des Blocs, vous privilégierez le positionnement Automatique ou Flottant.  
En paramétrant ainsi le positionnement de vos éléments, vous leur indiquez que, dans le Conteneur où ils  
se trouvent, ils vont se positionner automatiquement, soit le plus en haut à gauche ou à droite. Dès lors,  
plus aucun souci de calage manuel à répétition.  
5
.
Ajouter une section avec des blocs  
Nous allons maintenant vous montrer comment ajouter une section dans une page et y intégrer des blocs  
prédéfinis.  
5.1. Créer une nouvelle section  
Nous allons continuer avec le modèle V7 Style 1a et vous montrer la manière la plus rapide d’ajouter une  
section. Nous allons procéder par simple Copier/Coller puis modifier les Blocs de la nouvelle section.  
Dans la Zone d’édition, descendez au bas de la page, puis sélectionnez la section Actualité en cliquant sur  
son pourtour gris.  
Vérifiez d’un coup d’œil dans la Vue hiérarchique que la bonne section est sélectionnée.  
Faites maintenant un Copier/Coller au clavier avec les séquences de touches <Ctrl>+<C> puis <Ctrl>+<V>.  
La nouvelle section apparaît maintenant tout en bas de la page et simultanément dans la Vue  
hiérarchique.  
 
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Modifiez l’entête de la section Actualités en Partenaires en cliquant sur le texte pour le réécrire comme  
nous l’avons déjà fait, puis remplacez à votre convenance le texte de présentation de la section.  
5
.1.1. Gestion des blocs  
Lorsque vous voulez recopier un bloc, vous pouvez utiliser le Copier/Coller comme nous l’avons fait pour  
la section Actualités. Sur une même page, cela reste pratique, mais en revanche, si vous voulez avoir des  
blocs à disposition depuis n’importe quelle page du projet, vous avez la possibilité de les enregistrer.  
Nous allons donc maintenant modifier le premier bloc et l’enregistrer dans une liste de blocs personnalisés  
du projet, puis le rappeler à la place des blocs 2 et 3.  
5
.1.1.1.Modifier un bloc  
Commençons donc par modifier le premier Bloc. Nous sélectionnons puis supprimons le champ texte de  
la date 12 JAN. Nous sélectionnons ensuite l’image du cercle orange et dans ses propriétés, nous la  
remplaçons par un logo de la société partenaire fictive Formastic ltd. Enfin nous réécrivons le texte situé  
en dessous par une description de la société, avant de décaler vers la droite le bouton En savoir plus. Nous  
obtenons finalement le résultat suivant.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
5
.1.1.2.Enregistrer un bloc personnalisé  
Sélectionnez maintenant le bloc dans la Vue hiérarchique ou en cliquant en bas, à gauche du bouton En  
savoir plus. Vérifiez dans la Vue hiérarchique que le bon panneau est sélectionné (il contient le nouveau  
logo).  
Au-dessus de la Vue hiérarchique, cliquez sur l’onglet Blocs, puis sur l’onglet Personnalisés. Cliquez sur  
l’icone  
+ et le bloc est maintenant inséré dans la liste.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
5
.1.1.3.Insérer un bloc personnalisé  
Dans la Zone d’édition, sélectionnez et supprimez le deuxième et le troisième bloc (17 FEV et 21 AVR). De  
retour dans l’onglet Blocs/Personnalisé, sélectionnez le bloc que nous venons d’enregistrer et cliquez deux  
fois sur le bouton Ajouter à la page. Le bloc est transféré dans la page et dans la section Partenaires qui  
était sélectionnée. En revanche, il se peut que les blocs aient été collés après le Panneau contenant le  
bouton Devenir Partenaire. En effet, le mode de placement Flottant est activé sur les blocs et ceux-ci se  
sont donc placé naturellement tout à la fin du panneau Partenaire. Vous n’avez juste qu’à sélectionner  
chaque bloc et à le déplacer à la suite du premier pour qu’il prenne la bonne place.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Il ne vous reste plus qu’à modifier les éléments des deux blocs pour compléter la création de cette nouvelle  
section.  
5
.1.1.4.Bibliothèque de blocs  
Dans l’onglet Blocs, le sous-onglet Bibliothèque vous donne accès à différents types de blocs prédéfinis et  
intégrés au modèle que vous avez ouvert. Vous pouvez les intégrer dans la page tout aussi facilement de  
la même manière que nous venons de le voir.  
Vous remarquerez que ces blocs prédéfinis ont des dimensions différentes.  
Ils sont en fait dimensionnés avec des largeurs multiples de celle des pages de modèles, vous permettant  
ainsi d’en placer 2, 3 ou 4 côte à côte, en tombant juste au niveau de la largeur de page.  
Quant aux hauteurs, elles sont aussi variées, ce qui vous permet d’utiliser des blocs de proportions  
diverses, tout en bénéficiant d’une vrai simplicité d’emploi et de placement.  
La bonne idée est de partir des blocs fournis, de changer leur contenu et d’en faire des blocs personnalisés.  
Comme ils ont au départ des dimensions calculées pour bien remplir les Conteneurs et d’adapter aux  
écrans des tablettes et mobiles, ce sera facile de rendre le site adaptable aux différentes largeurs par la  
suite.  
Le travail avec les sections et les blocs dans WebCreator ressemble à un jeu de construction.  
Et il en est en fait de même avec une page complète :  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Vous créez votre Conteneur Page que vous divisez en sections grâce à des conteneurs Panneaux qui se  
positionnent automatiquement. Avec la Hauteur automatique, la hauteur s’ajusteront automatiquement  
au fur et à mesure que vous ajouterez des plus petits conteneurs Blocs, dans lesquels vous positionnez  
librement divers Éléments de base qui sont les contenus.  
Nous allons maintenant passer en revue les éléments qui méritent quelques précisions, soit de par leur  
nature, soit par rapport à leur mise en œuvre.  
6
.
Gros plan sur les éléments  
6.1. Généralités  
6
.1.1. Où trouver les éléments  
Vous trouvez tous les éléments disponibles dans WebCreator dans la Barre des éléments, à gauche de la  
Zone d’édition, ainsi que dans le menu Page/Éléments:  
6
.1.2. Insertion d’un élément  
L’ajout d’un élément dans la page courante se fait par un simple clic sur l’élément (et pas par Glisser).  
L’élément est alors directement posé au milieu de la page, sauf pour certains éléments, comme les images,  
qui ouvrent une boîte de dialogue intermédiaire.  
6
.1.3. Propriétés communes  
Chaque élément sélectionné est doté des caractéristiques suivantes :  
 
 
 
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
1
2
3
) Un cadre qui permet de le sélectionner lorsque le pointeur de la souris se transforme en croix.  
) Des poignées pour le redimensionner.  
) Des propriétés, accessibles dans la Zone des propriétés et reparties en onglets  
a. Élément concerne le nom, l’emplacement et l’apparence  
b. Option sert à appliquer des effets d’apparition au chargement de l’élément  
c. Action et RollOver permettent de réagir à des actions de la souris sur l’élément  
d. Lien permet de créer un lien vers diverses destinations (fichier, page, site, etc…)  
e. Position gère la taille, la position, les marges et le mode de positionnement  
f. Propriétés résume certaines propriétés liées à l’apparence, la taille et la position  
6
.1.4. Alignement  
Le menu Format vous propose différents outils permettant l’alignement des éléments. Ces outils ont été  
conçus pour faciliter l’alignement en mode libre. Il ne faut pas y avoir recours pour des blocs ou conteneurs  
régis par l’alignement automatique.  
Les deux premiers outils (section Centrer dans le parent) servent à positionner un ou plusieurs éléments  
à l’intérieur de leur conteneur.  
Les outils suivants s’appliquent toujours à plusieurs éléments et permettent de les positionner ou  
redimensionner les uns par rapport aux autres.  
Pour sélectionner plusieurs éléments, cliquez successivement dessus en appuyant sur la touche <Ctrl>.  
L’élément servant de repère à l’alignement est le premier sélectionné. Il est doté de poignées de couleur  
foncée, alors que les suivants sont dotés de poignées claires.  
N’ayez pas peur d’expérimenter, sachant que vous pouvez toujours revenir en arrière avec annuler  
<Ctrl+Z>.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
6
.1.5. Empilement avec l’Ordre Z  
L’outil Ordre-Z permet de gérer la superposition des éléments les uns par rapport aux autres. On peut voir  
ça comme une pizza : la page est la pâte, le conteneur principal la sauce et on peut mettre ensuite les  
ingrédients dans l’ordre qui nous plaît.  
Dans le modèle V7 Style 1a par exemple, l’image du compteur se trouve en arrière-plan du texte.  
Sélectionnez l’image en cliquant sur sa partie gauche.  
Dans la Vue hiérarchique, l’image est bien sélectionnée et elle se trouve en haut de l’arborescence du  
panneau Section_Intro. En effet les éléments sont affichés de haut en bas en fonction de leur ordre de  
création dans leur conteneur, donc de l’arrière-plan vers le premier-plan.  
En haut de la Vue hiérarchique, cliquez sur la flèche vers le bas située à droite de l’option Ordre-Z. L’image  
passe alors en bas de l’arborescence du panneau Section_Intro. Simultanément, dans la Zone d’édition,  
l’image arrive au premier-plan, masquant le texte et le bouton.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
La commande Ordre-Z de la Vue hiérarchique est précise et permet de déplacer des éléments niveau par  
niveau. Dans le menu Accueil, vous trouvez une section Ordre-Z qui vous permet de passer un élément  
directement au premier-plan ou à l’arrière-plan.  
6
.1.6. Le mode imbriqué  
Ce mode, actif par défaut, vous permet de placer automatiquement un élément dans un conteneur en le  
déplaçant. Un cadre vert entoure le conteneur de destination lorsque vous le survolez.  
Lorsque le mode imbriqué est désactivé, les éléments ne sont pas inclus dans des conteneurs, mais sont  
juste déposés et restent indépendants du conteneur au-dessus duquel ils se trouvent.  
Ajouter un élément à un conteneur  
Il y a plusieurs manières d’ajouter un élément à un conteneur :  
1
2
3
) Après avoir sélectionné l’élément, faites un clic droit et, dans le menu contextuel, choisissez  
Couper (ou au clavier Ctrl+x). Sélectionnez ensuite le conteneur de destination et faites Clic  
droit/Coller (Ctrl+v). C’est la méthode la plus pratique et la plus infaillible.  
) Le mode imbriqué étant activé, vous glissez un élément et le lâchez au-dessus du conteneur qui  
s’est entouré d’un cadre vert. Cette méthode est simple mais réservée à de petits déplacements  
dans la Zone d’édition.  
) Sélectionnez l’élément, puis faites clic droit/Ajouter au conteneur ou Accueil/Ajouter au  
conteneur et choisissez le conteneur de destination. Cette méthode nécessite d’avoir bien nommé  
vos conteneurs pour les reconnaître.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
6
.1.7. Gestion des Groupes  
Vous trouverez une section Groupe dans le menu Accueil, mais elle assure juste la compatibilité avec des  
fichiers issus d’anciennes versions de WebCreator. Destinée à être supprimée, elle a été remplacée par la  
gestion des Blocs, beaucoup plus évoluée et qui doit être utilisée dorénavant.  
6.2. Présentation des principaux Éléments  
Nous allons maintenant décrire certains des principaux éléments dont vous aurez besoin ou pour lesquels  
quelques précisions d’utilisation nous ont semblées nécessaires. Nous ne parlerons pas des éléments  
qu’on peut découvrir facilement en expérimentant avec leurs réglages. Comme indiqué précédemment,  
les éléments sont directement disponibles depuis la barre des éléments à gauche de l’interface.  
Ainsi la notation « élément Base/Image » se réfère à la section Base de la Barre des éléments et à  
l’élément Image qui s’y trouve.  
L’évocation des propriétés des éléments se réfère à la Zone de propriétés, partie basse à droite de  
l’interface.  
6
.2.1. Image  
Lorsque vous cliquez sur l’élément Base/Image, une boîte de dialogue s’ouvre et vous permet de  
sélectionner une image dans la bibliothèque de WebCreator ou depuis vos dossiers personnels.  
WebCreator s’occupera de redimensionner les images pour ne pas alourdir le site inutilement.  
6
.2.2. Bouton  
Un nouveau type de bouton est inclus dans la version 7.  
Dans la zone Couleurs du bouton, vous pouvez modifier la transparence du bouton.  
Un bouton arrive toujours avec des proportions et une taille fixes. Dans l’onglet élément des propriétés,  
vous pouvez modifier la taille du bouton de Petit à Très grand, ou bien choisir Personnalisée afin de  
changer librement les proportions du bouton.  
Vous pouvez ensuite ajouter une bordure personnalisée en épaisseur, couleur et transparence.  
Enfin vous pouvez doter le bouton d’une icône monochrome ou d’une image personnelle.  
Les anciens types de boutons sont disponibles dans la section Ancien (V.6) de la Barre des éléments.  
6
.2.3. Menu  
Pour personnaliser un Menu, vous devez aller dans ses propriétés, onglet Éléments puis cliquer sur  
Configurer les éléments.  
 
 
 
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Il est aussi possible de reprendre les caractéristiques d’un menu déjà créé dans le projet, avec la liste  
Instance. Vous pouvez ainsi avoir plusieurs schémas de menus réutilisables dans les différentes pages du  
projet.  
Le bouton Configurer le style vous permet de paramétrer entièrement l’apparence, les couleurs, la police,  
l’alignement et bien d’autres paramètres du menu principal et des commandes de menu.  
Une option très intéressante consiste à figer la position de votre menu lors du défilement de la page afin  
qu’il soit toujours visible. Pour cela, placez votre menu dans un panneau, puis dans l’onglet Élément des  
propriétés du Panneau, cochez la case Ancrage. Notez que cela fonctionne avec tous les Panneaux, mais  
c’est surtout utile avec ceux contenant un menu ou un bandeau d’information que vous voulez afficher  
continuellement.  
6
.2.4. Titre H1 H6 : Balises H1 à H6  
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte), qu’à  
mettre des informations à disposition des moteurs de recherche et de référencement. Logiquement, les  
moteurs de recherche donnent plus d’importance aux balises H1 qu’aux H2, plus aux H2 qu’aux H3, et ainsi  
de suite. Vous devez donc y faire figurer des textes et des mots-clés bien choisis. Ceci étant, vous pouvez  
ajouter une balise Hx n’importe où dans le texte. C’est très intéressant pour bien optimiser la page sans  
l’alourdir d’une multitude de gros titres.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
6
.2.5. Panneaux et Boîtes  
Ce sont les principaux conteneurs que vous utiliserez pour structurer vos pages. Vous les trouverez  
logiquement dans la section Mise en page de la Barre des éléments.  
La différence entre ces deux types de conteneur réside dans les options de configuration et les paramètres  
visuels. En résumé : une Boîte est beaucoup plus graphique qu’un Panneau.  
Elle peut avoir différentes formes, des coins arrondis, une ombre portée, afficher une image, des dégradés,  
avoir un entête et un bas de page, etc.  
Un Panneau peut juste être coloré en plein ou dégradé. Sa fonction est de délimiter des zones de la page  
(sections ou simples blocs) et d’y contenir des éléments.  
Un Panneau peut aussi s’adapter automatiquement à la hauteur des éléments qu’il contient et à la largeur  
de la page, grâce aux options Hauteur automatique et Pleine largeur de l’onglet Position de ses  
propriétés. Sur le site de LMSoft, le diaporama de la première page est placé dans un Panneau avec  
l’option Pleine largeur. Ainsi, quelle que soit la taille de votre zone d’affichage, le diaporama s’adapte et  
prend toute la largeur de la page.  
Enfin, un Panneau peut être ancré, c’est-à-dire que lors de la navigation, il peut rester fixe à l’écran alors  
que l’utilisateur fait défiler la page. Cela s’obtient en cochant la case Ancrage de l’onglet Élément des  
propriétés.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
6
.2.6. Iframe : insérez un autre site dans une page  
Cet élément vous permet d’afficher une page web interne ou externe dans une zone délimitée de la page  
courante, en définissant différents paramètres d’affichage, comme le nom, la couleur, la taille, la présence  
de barres de défilement, etc… ci-dessous, le site de LMSOFT apparaît dans une iFrame au milieu du modèle  
V7 Style 1a. Ça n’a pas de sens ici mais c’est juste pour aider à comprendre.  
6
.2.7. Boîtes à Onglets  
L’affichage des éléments se fait ici dans une boîte divisée en onglets situés les uns à côté des autres. Ils  
correspondent chacun à un contenu différent placé dans un conteneur un peu spécial qui s'appelle Canvas.  
Ceci permet un affichage multiple superposé à la page courante, sans la remplacer et sans en ouvrir de  
nouvelle.  
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
6
.2.8. Accordéon  
L’accordéon est un élément très similaire à la Boîte à onglets, mais l’affichage s’y fait suivant une  
présentation verticale plutôt que dans des onglets horizontaux.  
Les informations qu’on veut afficher sont aussi placées dans des panneaux qu’on appelle Canvas.  
6
.2.9. Canvas  
Chaque Canvas est en fait un Conteneur. Vous lui associez un titre et y affichez une page ou un bloc,  
suivant sa taille et le nombre d’éléments que vous y placez.  
Pour définir le nom et les caractéristiques de chaque Canvas, vous devez aller dans la Zone des propriétés,  
onglet Élément et y sélectionner le Canvas que vous voulez modifier.  
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Notez bien que c’est lorsque le Canvas est sélectionné dans les propriétés que vous pouvez y insérer des  
éléments ou un bloc existant.  
Astuce : notez la dimension exacte du Canvas dans Position. Vous pourrez ensuite créer des blocs de la  
même taille que vous pourrez insérer dans le Canvas.  
6
.2.10.  
Diaporama  
Généralement un diaporama vous permet d’afficher des images les unes à la suite des autres  
manuellement ou automatiquement avec un délai. Dans WebCreator, vous pouvez aussi afficher toute  
sorte d’éléments supplémentaires, comme du texte, des blocs que vous aurez créés, des éléments  
multimédia, des boutons etc. Tout type d’élément en fait.  
Comme pour un accordéon, chaque vue du diaporama est représentée par un Canvas que vous  
sélectionnez, ajoutez et supprimez dans les propriétés, onglet Élément.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
6
.2.11.  
Éléments Web  
Réservé aux utilisateurs/programmeurs avancés, cet élément permet d’insérer du code HTML, javascript  
dans vos pages. Le code est inclus sous forme de balises <Div>.  
Un autre chemin consiste à passer par la commande Page/Ajout de code personnalisé, mais dans ce cas  
le code est ajouté dans la section <Body> de la page.  
Notez que LMSOFT n’assure pas de support technique par rapport à ces outils de programmation dont la  
maîtrise et l’efficacité dépendent seulement du programmeur qui les utilise.  
6
.2.12.  
Service Web  
Un service web est une application située sur notre serveur et qui permet de générer et de modifier des  
éléments Web que vous pouvez inclure dans vos sites. Comme ces objets sont gérés par des services web,  
une fois inclus dans vos pages, vous pouvez les modifier depuis n’importe quel appareil doté d’un  
navigateur sans utiliser ensuite WebCreator.  
WebCreator met à votre disposition l’accès à 3 services Web qui sont le Blogue, la Galerie et l’Élément  
Cloud.  
6
.2.12.1.  
Accès aux Services Web  
La première chose à faire pour les utiliser est de créer un compte d’accès aux services web (un ID Web  
Services), avec une adresse mail valide et un mot de passe. Voici l’accès:  
http://dev-webservices.lmsoft.com/login  
Vous pouvez en créer jusqu’à 5 afin que plusieurs personnes aient accès aux services Web et puissent  
éditer les éléments à gérer.  
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Si vous en avez une utilisation importante (de nombreux clients/intervenants), vous pouvez passer à la  
version WebCreator Développeur avec abonnement. Il n’y a alors plus de limites quant au nombre de  
comptes autorisés que vous pouvez alors en créer à volonté pour vous et vos clients.  
Nous allons maintenant vous expliquer pour l’exemple comment créer un Élément Cloud.  
6
.2.12.2.  
Exemple de l’élément Cloud  
La première fois que vous créez un élément Services Web (Blogue, Galerie ou Élément Cloud), vous devez  
sécuriser votre accès aux services Web en saisissant un mot de passe.  
Attention : choisissez un mot de passe spécial pour l’accès aux services Web, ne saisissez pas celui de votre  
messagerie.  
Validez bien la boîte de dialogue en cliquant sur le bouton Se connecter. Si vous êtes déjà connecté, cette  
boîte vous propose logiquement de vous déconnecter.  
Le cadre de l’élément Service Web est visible au milieu de la page.  
Attention : Vous devez bien sûr être connecté à Internet pour éditer un élément Service Web !  
Dans les propriétés, cliquez alors sur le bouton Créer et gérer vos éléments.  
Une fenêtre externe à WebCreator et intitulée LMSOFT Web Services s’ouvre alors vous indiquant que  
Vous n’avez aucun élément disponible.  
Cliquez alors sur le bouton Créer votre premier élément HTML. Et une interface d’édition apparaît.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
En haut à gauche de la fenêtre, les 5 icônes vous permettent d’enregistrer l’élément, d’annuler ou refaire  
une action, d’ajouter un nouvel élément ou d’en supprimer un.  
Le bouton Réglages vous permet de créer les autres utilisateurs autorisés à modifier les éléments Cloud.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Avant de quitter l’éditeur, n’oubliez surtout pas d’enregistrer les modifications effectuées avec l’icône  
située en haut à gauche.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
De retour dans WebCreator, dans la liste Éléments Cloud des propriétés, sélectionnez l’élément que vous  
voulez afficher.  
Si vous avez effectué des modifications sur plusieurs éléments, le bouton Recharger les éléments Cloud  
vous permet de remettre à jour l’affichage.  
6
.2.13.  
Formulaire  
WebCreator dispose d’un nouvel élément Formulaire que vous trouvez dans la section Données de la  
Barre des Éléments.  
C’est un élément contenant des champs à renseigner par le VISITEUR du site, qui les envoie ensuite à une  
destination que VOUS aurez prédéfinie, généralement vous ou celui pour qui vous aurez créé le site.  
WebCreator vous fournit 4 modèles de formulaires : Demande de contact, Réservation, Commande et  
Personnalisé. En fait vous pouvez ajouter des champs et des éléments supplémentaires à chacun d’eux et  
accéder à de nombreux paramètres de propriétés.  
Pour la transmission des données du formulaire, vous pouvez vous inscrire gratuitement sur Dataform, un  
service gratuit de LMSOFT, qui vous permet de recevoir gratuitement jusqu’à 100 demandes d’information  
par jour.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
7
.
Mise en ligne de votre site  
Pour être vu et visité, votre site dépend de deux choses essentielles : l’hébergement et le nom de domaine.  
7.1. Hébergement  
Votre site doit être accessible de tous et donc se situer sur un serveur constamment connecté à internet  
ET capable de gérer le volume des visiteurs (hors de chez vous donc). C’est ce que permet l’hébergement.  
7.2. Nom de domaine  
L’autre condition est que votre site ait une adresse d’accès qui lui soit propre ET qu’elle soit unique ET  
qu’elle soit toujours la même. C’est à cela que sert un nom de domaine, comme LMSOFT.COM par  
exemple.  
Il est essentiel que ce nom de domaine soit votre propriété et non celle de l’hébergeur pour être sûr que  
seul vous pourrez l’utiliser tant que vous le voudrez.  
Les sites créés avec WebCreator peuvent être hébergés n’importe où et nous vous laissons toute liberté  
de choix en la matière.  
Néanmoins LMSOFT propose également des hébergements de qualité et à prix compétitif.  
L’avantage d’être hébergé chez nous est d’être indépendant des fournisseurs d’accès chez qui vous êtes  
un peu noyé parmi les millions de clients. De notre côté, dans une structure à taille humaine où nous  
connaissons tous nos clients, nos techniciens sont capable de vous aider rapidement et efficacement si  
requis.  
7.3. Téléchargement (upload) du site  
Lors de votre inscription chez un hébergeur, comme chez LMSOFT, toutes les informations de connexion  
notamment l'URL et les chemins à utiliser vous sont transmises, tandis que vous définissez les identifiants  
et mots de passe utilisateur.  
Ce sont toujours ces mêmes informations que vous utilisez lorsque vous téléchargez votre site.  
WebCreator 7 intègre un outil très simple et qui remplit après quelques réglages initiaux la fonction  
d’envoi des fichiers de votre site vers sa destination sur internet.  
Notez que LMSOFT diffuse aussi un logiciel client FTP, nommé FTP Site Manager, beaucoup plus évolué  
que la version intégrée de base. Il dispense un affichage de type explorateur à plusieurs fenêtres, dans  
lesquelles vous affichez les dossiers source et destination du téléchargement. Cela le rend utilisable pour  
tous types de transferts FTP. Enfin, une fois installé, il s’intègre automatiquement dans l’interface de  
WebCreator 7, au début du menu Outils et sera appelé par la commande Mise en ligne.  
 
 
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Dans WebCreator, la mise en ligne de votre site se fait via la commande Outils/Sortie Web/Envoyer vers  
l’hébergeur.  
Au premier accès, la boîte de dialogue suivante apparaît.  
Dans Type de connexion, l'entrée par défaut est LMSOFT Web Solution / Hébergement LMSOFT.  
L'entrée LMSOFTHosting est liée aux versions précédentes et Démos LMSOFTSITES est utilisé pour la  
version d'évaluation de nos produits  
Remplissez ensuite les champs suivants:  
Nom affiché : ce champ sert à vous aider pour l'identification, notamment si vous avez plusieurs  
hébergements. C’est un aide-mémoire pour vous.  
Dossier distant : pour un hébergement LMSOFT, cliquez sur le bouton Valeur par défaut, qui inscrira  
automatiquement la valeur public_html.  
Si vous êtes hébergé ailleurs, dans Type de configuration, choisissez Configuration manuelle. Saisissez  
bien le nom du fichier distant. Chez LMSOFT, c’est index.html, mais cela peut varier d’un hébergeur à  
l’autre. Consultez donc bien les informations fournies par votre hébergeur.  
Autre source de confusion : transférez bien le CONTENU du dossier WEB, et pas le dossier lui-même ni le  
dossier projet.  
Dans l’outil intégré de WebCreator, le dossier local doit être WEB.  
Dans les autres logiciels FTP, ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-  
dossiers. Un fichier s’appelle index.html et correspond à la page d’accueil. Vous devez bien transférer tout  
le dossier et les sous-dossiers.  
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Quand votre connexion est déjà paramétrée, vous arrivez directement à la boîte de dialogue suivante.  
Vous pouvez y paramétrer des options de filtre pour n'envoyer que les fichiers récemment modifiés, et  
sélectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour  
procéder au téléchargement.  
Lorsque vous voulez paramétrer un autre hébergeur, cliquez sur le bouton Ajouter pour revenir à la boîte  
de dialogue de paramétrage décrite précédemment.  
En cas d'erreur, les causes possibles sont :  
1
2
3
) Un problème de connexion - vérifiez que vous êtes connecté à internet  
) Une erreur de saisie d'un des chemins ou d'un nom de fichier – la première fois seulement  
) Une erreur de nom d'utilisateur et mot de passe  
Si le téléchargement se déroule bien, mais que votre site n'est pas mis à jour correctement, vérifiez que  
c'est le bon chemin de site source que vous avez spécifié.  
7.4. Référencement  
Voici quelques points essentiels à respecter pour un référencement optimal :  
1
2
) Le nom du site doit contenir le mot le plus unique et représentatif de votre activité.  
) Les mots clefs doivent apparaître dans le titre de la page d’accueil mais aussi dans celui des  
autres pages.  
3
4
) Insérez les mots clés dans les metatags du projet (menu Outils) et éventuellement de chaque  
page s’ils doivent être différents pour chaque page.  
) Appliquez des balises dites « titre » H1, H2 et ainsi de suite dans les titres et à divers endroits  
dans les textes de chaque page. Notez qu’il n’est pas nécessaire de modifier la police du texte.  
On peut mettre une balise Hx n’importe où dans le texte sans que ça paraisse car les balises  
Titre sont des marqueurs de texte. Seul le robot du moteur de recherche les verra.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
5
) Dans les propriétés de chaque image, onglet Options, zone Identification, ajoutez des mots  
clés dans la balise Alt située à côté du Nom.  
Bien sûr, pensez bien à republier le site à chaque modification ou ajout de ces clefs de référencement, afin  
que ce soit bien en ligne et vu par les moteurs de recherche.  
Pour de plus amples informations et compte-tenu de l’évolution incessante des méthodes de  
référencement, nous vous invitons à consulter régulièrement les conseils de Google et autres moteurs de  
recherche à ce sujet.  
Enfin, sachez qu’il n’y a aucun moyen d’arriver en première page ni d’y rester sans efforts. C’est le contenu  
qui fait tout, pas le logiciel d’édition, et surtout la mise en avant du contenu.  
8
.
Trucs, astuces et conseils de travail  
8.1. Sécurité  
Ce vaste sujet n’est ni nouveau ni spécifique au travail avec WebCreator mais nécessite d’être évoqué ici.  
8
.1.1. Problèmes possibles  
La question que vous devez vous poser est : quelles sont les implications de l’interruption d’accès à mon  
site par moi et par ses visiteurs et sous-tendue : que peut-il arriver durant la création puis la vie de mon  
site, et qui interromprait l’accès à ce dernier ?  
1
2
3
) Sur votre ordinateur local de travail, vous pouvez perdre vos fichiers de projet par une mauvaise  
manipulation, par une panne sévère de votre matériel ou par l’action d’un virus.  
) En local toujours, votre connexion internet peut être interrompue plus ou moins longtemps vous  
empêchant de mettre à jour votre site.  
) Une fois en ligne, votre site peut être piraté, et/ou partiellement corrompu, voire entièrement  
détruit.  
Du coup, plusieurs mesures de sécurité, malheureusement trop souvent négligées, peuvent palier à TOUS  
ces désagréments. L’idée est de permettre un redémarrage le plus rapide possible.  
La première mesure est la sauvegarde de votre projet ET de votre site.  
8
.1.2. Emplacement des fichiers projets et site  
Par défaut, les fichiers de vos projets sont stockés dans Mes Documents\WebCreator.  
Les fichiers de votre site, ceux que vous allez publier en ligne, se trouvent dans le sous-dossier Web. Vous  
ne pouvez pas vous tromper : c’est là que se trouve le fichier index.html qui représente le fichier principal  
de votre site.  
 
 
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
N’oubliez surtout pas les sous-répertoires car ils contiennent tous les fichiers images, boutons, etc…  
utilisés pour l’affichage de votre site.  
8
.1.3. Faire des sauvegardes  
Dès lors, pour faire des sauvegardes, le plus simple est de recopier régulièrement tous les fichiers de vos  
dossiers Projet.  
Où ? Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecté à votre  
réseau.  
Avec la sauvegarde locale, vous préviendrez les problèmes liés à de mauvaises manipulations.  
Avec la sauvegarde externe, vous préviendrez :  
1
2
3
) Les crashes matériels  
) Les attaques de virus  
) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu.  
Enfin réservez un support spécifique pour chaque sauvegarde. Une sauvegarde de projet prendre quelque  
centaines de Mo. Deux clefs USB de sauvegarde peuvent être dédiées uniquement à cette fin, mais ne  
doivent pas être utilisées pour transférer d’autres fichiers.  
8.2. Grille  
Pour positionner et aligner facilement les éléments en mode libre, WebCreator met à votre disposition  
une grille dont vous pouvez paramétrer l’espacement des lignes et le magnétisme. Vous la trouverez dans  
le menu Page.  
Idéalement laissez-la sur le paramétrage d’interligne 10 et activez le magnétisme.  
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Vous verrez ensuite à l’usage et en fonction des opérations que vous faites les réglages qui vous  
conviennent le mieux.  
8.3. Palettes de couleur  
A chaque modèle de projet est associée une palette de couleur.  
Dans la liste du menu Projet/Couleurs, vous retrouvez en sur-brillance la palette liée au projet en cours.  
Vous pouvez en tester une autre en la sélectionnant dans la liste et voir instantanément le résultat à  
l’écran.  
En cliquant sur l'icône située à droite, vous pouvez éditer les différentes composantes de la palette  
sélectionnée.  
Enfin n’oubliez pas que vous pouvez toujours annuler les dernières actions, si vous avez modifié par erreur  
les mauvaises composantes de couleur.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
8.4. Commande d’annulation  
Gardez toujours à l’esprit que WebCreator vous donne la possibilité d’annuler toute action, soit par le  
raccourci clavier Ctrl+Z, soit par l'icône flèche courbée située dans la Barre d’accès rapide en haut à gauche  
de l’interface.  
Cette commande fonctionne pour toutes les actions, aussi bien pour les ajouts/modifications d’éléments,  
les déplacements de conteneurs, la modification d’une couleur ou la création d’un lien.  
En revanche comme dans tout logiciel, elle sera inopérante une fois que vous aurez enregistré le projet en  
cours, ce qui validera toutes les dernières modifications.  
8.5. Travailler posément  
Dans WebCreator, vous travaillez sur des pages web. Dès lors, pour afficher les éléments que vous placez,  
WebCreator génère à la volée le code HTML correspondant, ce qui nécessite une peu plus de temps  
d’affichage que dans un simple logiciel de dessin. Si vous travaillez rapidement, l’affichage peut prendre  
du décalage avec vos actions, d’autant plus lorsque la taille de votre page et le nombre d’éléments  
augmentent, le code devenant alors plus long à mettre à jour.  
Travaillez donc posément pour laisser le temps au logiciel d’afficher les éléments avant de passer au  
suivant.  
Enfin, en cas de doute, le menu Page, section Actuelle met à votre disposition une commande Rafraîchir  
qui permet de redessiner la page.  
8.6. Zone d’édition et Vue hiérarchique  
Comme nous l’avons déjà évoqué dans les exercices, il est essentiel de toujours travailler de concert avec  
ces deux espaces de l’interface.  
Un coup d’œil à la Vue hiérarchique vous permet de vérifier que vous avez sélectionné le bon élément  
dans la Zone d’édition.  
La Vue hiérarchique vous permet aussi de sélectionner plus facilement un élément qui se trouverait à  
l’arrière-plan d’un autre ou entièrement masqué dans la Zone d’édition.  
La Vue hiérarchique vous donne une vue très claire des dépendances et inclusions des différents éléments  
les uns par rapport aux autres et vous permet, notamment grâce à l’Ordre-Z, de déplacer les éléments  
dans leur conteneur. Dans la Zone d’édition, les commandes du menu contextuel Ajouter au conteneur,  
Amener à l’avant et Envoyer à l’arrière complètent efficacement ces manipulations.  
 
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
8.7. Taille automatique des panneaux  
Afin de placer parfaitement les panneaux dans la page, WebCreator met à votre disposition deux options  
incontournables qui vous feront économiser de nombreuses manipulations.  
Dans les propriétés du panneau, onglet Élément, vous trouverez une option Pleine largeur qui adaptera  
automatiquement la largeur du panneau à celle de la page. Attention, cela ne fonctionne que pour un  
panneau directement inclus dans la page. Pour un panneau inclus dans un autre panneau, l’option ne sera  
pas disponible (une mise en garde est affichée).  
L’autre option se trouve dans l’onglet Position et s’intitule Hauteur automatique. Elle vous permet de  
faire en sorte que le panneau s’agrandisse automatiquement en vertical lorsque vous y placez des  
éléments. L’option Taille min. vous permet de définir une hauteur minimum initiale pour le panneau.  
8.8. Un site aussi pour les Mobiles  
Lorsque vous créez un site avec WebCreator, il est destiné à être affiché sur un ordinateur ou sur une  
tablette.  
Cependant, à notre époque, vous devez aussi créer une version pour les téléphones mobiles. Il faut savoir  
que maintenant GOOGLE déclasse les sites qui n’ont pas de version mobile. Il suffit d’avoir quelques page,  
qui seront forcément différentes :  
1
2
3
) La taille de l’écran étant plus petite, les informations affichables sont moins nombreuses.  
) Le mode de navigation est différent, ne serait-ce qu’entre un doigt et un pointeur de souris.  
) La navigation sur un site mobile répond très souvent à des besoins différents : identifier  
rapidement une société, afficher des informations concentrées et proposer immédiatement des  
actions.  
Vous devez donc éviter les longs textes, les grands tableaux, les images lourdes à charger, etc…. et  
privilégier les boutons et blocs peu nombreux et lisibles sur l’écran.  
LMSOFT propose un logiciel complémentaire pour créer une version mobile de votre site: MobileCreator.  
On peut créer quelques pages où on va privilégier les actions comme l’affichage des coordonnées et  
contacts, l’appel au téléphone, l’envoi de demande d’info, les principaux produits, des boutons d’achat  
Paypal, etc...  
Vous pouvez ajouter un lien vers le site complet, qui reste bien sûr visible sur mobiles moyennant quelques  
manipulations et zooms.  
Le site mobile en ligne n’a pas besoin d’un hébergement spécifique. Celui que vous aurez créé avec  
MobileCreator sera mis en ligne dans un sous-dossier de votre hébergement intitulé « /mobile ». C’est  
 
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
normalement la configuration par défaut et automatique. Mais on peut le faire manuellement aussi avec  
n’importe quel outil FTP.  
Pour que vos visiteurs soient dirigés vers le bon site en fonction de leur appareil (site mobile avec  
téléphones, site principal avec ordinateur ou tablette), il faut simplement republier le site principal avec  
WebCreator 7.  
Notez que quand vous créez votre projet mobile, vous pouvez importer la palette de couleurs utilisée avec  
WebCreator pour que votre site mobile ait les mêmes couleurs que le principal.  
En quelques heures, vous réussirez à créer un site mobile de qualité professionnelle qui respectera l’image  
de votre société.  
Un site mobile de qualité dira de vous que vous êtes un acteur de premier plan dans votre domaine.  
Nos sites mobiles obtiennent un score de 100% sur le test de mobilité de Google.  
Enfin, pour les raisons de design et d’ergonomie évoquées en début de ce sujet, prétendre générer des  
sites « responsive design» uniques pour tous les appareils ou offrir une conversion automatique de sites  
pour les mobiles est à la mode, mais notre expérience nous a montré que c’est un leurre. Un site pour  
mobile n’est pas un site pour ordinateur en modèle réduit. C’est un site qui apporte une partie des  
informations en les présentant sous une apparence entièrement adaptée à l’interface et aux outils de  
navigation d’un mobile.  
8.9. Centre d'aide  
LMSOFT met à votre disposition en 5 langues un site de soutien pour les problèmes techniques à l'adresse  
http://www.lmsite.net/centreaide  
Vous y trouverez entre autres des tutoriels vidéo, les manuels des versions précédentes, une base de  
résolution de problèmes techniques.  
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent  
échanger, s'entraider et donc vous aider.  
 
Manuel de prise en main  
WebCreator 7  
Centre d'aide  
Enfin, vous pouvez envoyer toutes vos suggestions à info@lmsoft.com. Sachez que nous lisons tous les  
messages avec beaucoup d’intérêt et que toutes les demandes sont traitées au plus vite afin de continuer  
à satisfaire nos clients et à faire évoluer nos produits.  
Voilà, nous arrivons à la fin de ce guide de prise en main de WebCreator 7.  
Nous vous souhaitons beaucoup de réussite dans votre activité et dans son développement, notamment  
nous l’espérons grâce à l’utilisation de WebCreator 7.  
Nous restons comme toujours à votre service et à votre écoute pour répondre à vos question et permettre  
d’améliorer encore votre maîtrise ainsi que notre logiciel et nos services.  
L’équipe de LMSOFT