Post on 09-Jun-2020
WebCreator 7
Manuel de prise en main
Manuel de prise en main WebCreator 7 Centre daide
Prise en main de WebCreator 7
Table des matiegraveres
1 Bienvenue dans WebCreator 7 5
11 Deacutemarrage du programme 5
2 Premiers contacts 6
21 Lrsquoespace de travail 7
22 Personnaliser un modegravele 7
221 Modifier un texte 8
222 Remplacer une image 10
3 Architecture des pages 13
31 La notion de Conteneurs et de Blocs 14
311 La notion de Blocs 15
312 Ajouter des blocs dans une section 15
313 Deacuteplacer des blocs drsquoune section agrave une autre 17
4 Les modes de positionnement sous WebCreator 17
41 Le positionnement Libre 17
42 Le positionnement Flottant 18
5 Ajouter une section avec des blocs 18
51 Creacuteer une nouvelle section 18
511 Gestion des blocs 19
6 Gros plan sur les eacuteleacutements 23
61 Geacuteneacuteraliteacutes 23
611 Ougrave trouver les eacuteleacutements 23
612 Insertion drsquoun eacuteleacutement 23
613 Proprieacuteteacutes communes 23
614 Alignement 24
615 Empilement avec lrsquoOrdre Z 25
Manuel de prise en main WebCreator 7 Centre daide 616 Le mode imbriqueacute 26
617 Gestion des Groupes 27
62 Preacutesentation des principaux Eacuteleacutements 27
621 Image 27
622 Bouton 27
623 Menu 27
624 Titre H1 H6 Balises H1 agrave H6 28
625 Panneaux et Boicirctes 29
626 Iframe inseacuterez un autre site dans une page 30
627 Boicirctes agrave Onglets 30
628 Accordeacuteon 31
629 Canvas 31
6210 Diaporama 32
6211 Eacuteleacutements Web 33
6212 Service Web 33
6213 Formulaire 37
7 Mise en ligne de votre site 38
71 Heacutebergement 38
72 Nom de domaine 38
73 Teacuteleacutechargement (upload) du site 38
74 Reacutefeacuterencement 40
8 Trucs astuces et conseils de travail 41
81 Seacutecuriteacute 41
811 Problegravemes possibles 41
812 Emplacement des fichiers projets et site 41
813 Faire des sauvegardes 42
82 Grille 42
83 Palettes de couleur 43
84 Commande drsquoannulation 44
85 Travailler poseacutement 44
86 Zone drsquoeacutedition et Vue hieacuterarchique 44
Manuel de prise en main WebCreator 7 Centre daide 87 Taille automatique des panneaux 45
88 Un site aussi pour les Mobiles 45
89 Centre daide 46
Manuel de prise en main WebCreator 7 Centre daide
1 Bienvenue dans WebCreator 7
11 Deacutemarrage du programme
Apregraves avoir proceacutedeacute agrave lrsquoinstallation au premier chargement du programme vous ecirctes inviteacute agrave enregistrer
votre version de WebCreator 7
Entrez alors le numeacutero de seacuterie et la clef de licence qui vous ont eacuteteacute fournis ainsi que vos informations
drsquoidentification
Les 4 premiers chiffres dans lrsquoimage 0278 sont des identifiants de lot qui correspondent au lien de
teacuteleacutechargement qui se trouve sur votre facture
Pour reacutecupeacuterer cleacutes et installeurs avec les bons numeacuteros de lots rendez-vous agrave lrsquoadresse internet
httpwwwlmsitenetcentreaiderecuperateurphpBonjour
Manuel de prise en main WebCreator 7 Centre daide Remplissez les 3 champs Numeacutero de seacuterie Clef drsquoidentification et Adresse mail et cliquez sur le bouton
correspondant agrave lrsquoaction que vous deacutesirez Teacuteleacutecharger lrsquoinstalleur de WebCreator Recevoir le courriel
drsquoactivation ou recevoir les cleacutes correspondantes agrave votre licence
Si vous avez changeacute drsquoadresse mail allez agrave lrsquoadresse suivante
wwwlmsoftcomenregistrement
Saisissez en haut de la page votre numeacutero de seacuterie et votre ancienne adresse mail puis cliquez sur le
bouton-flegraveche 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 tregraves important que vous saisissiez une adresse mail valide car crsquoest par ce biais que vous eacutechangerez
avec notre service de soutien technique et recevrez les informations relatives agrave ce dernier et aux mises agrave
jour du programme
La licence de WebCreator vous donne droit agrave une installation sur trois machines diffeacuterentes Vous devez
utiliser la mecircme adresse de mail agrave chaque fois celle du deacutetenteur de la licence
2 Premiers contacts Apregraves une preacutesentation rapide des composantes de lrsquointerface nous vous montrerons comment utiliser
WebCreator en adaptant rapidement un modegravele preacutedeacutefini et nous finirons par la manipulation des
eacuteleacutements essentiels agrave lrsquoeacutelaboration de pages avec WebCreator
Manuel de prise en main WebCreator 7 Centre daide
21 Lrsquoespace de travail
22 Personnaliser un modegravele
Nous allons vous montrer les principes de base de lrsquoeacutedition de pages sous WebCreator en commenccedilant
par diffeacuterentes manipulations essentielles dont nous vous expliquerons ensuite les concepts sous-jacents
Nous allons pour cela utiliser le modegravele drsquoexemple ci dessous Crsquoest celui qui srsquoouvre en premier lorsqursquoon
fait templatecreatorlmsoftcom ou Nouveau projet dans le logiciel
Manuel de prise en main WebCreator 7 Centre daide
Vous y retrouvez tous les composants deacutesigneacutes preacuteceacutedemment et remarquez que la Zone des contenus
affiche une arborescence dans laquelle le premier eacuteleacutement Page est seacutelectionneacute par deacutefaut Nous y
reviendrons
221 Modifier un texte
Dans la zone drsquoeacutedition cliquez sur le texte Lorem ipsumhellip Celui-ci srsquoentoure drsquoun cadre de seacutelection blanc
muni de 8 poigneacutees
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Prise en main de WebCreator 7
Table des matiegraveres
1 Bienvenue dans WebCreator 7 5
11 Deacutemarrage du programme 5
2 Premiers contacts 6
21 Lrsquoespace de travail 7
22 Personnaliser un modegravele 7
221 Modifier un texte 8
222 Remplacer une image 10
3 Architecture des pages 13
31 La notion de Conteneurs et de Blocs 14
311 La notion de Blocs 15
312 Ajouter des blocs dans une section 15
313 Deacuteplacer des blocs drsquoune section agrave une autre 17
4 Les modes de positionnement sous WebCreator 17
41 Le positionnement Libre 17
42 Le positionnement Flottant 18
5 Ajouter une section avec des blocs 18
51 Creacuteer une nouvelle section 18
511 Gestion des blocs 19
6 Gros plan sur les eacuteleacutements 23
61 Geacuteneacuteraliteacutes 23
611 Ougrave trouver les eacuteleacutements 23
612 Insertion drsquoun eacuteleacutement 23
613 Proprieacuteteacutes communes 23
614 Alignement 24
615 Empilement avec lrsquoOrdre Z 25
Manuel de prise en main WebCreator 7 Centre daide 616 Le mode imbriqueacute 26
617 Gestion des Groupes 27
62 Preacutesentation des principaux Eacuteleacutements 27
621 Image 27
622 Bouton 27
623 Menu 27
624 Titre H1 H6 Balises H1 agrave H6 28
625 Panneaux et Boicirctes 29
626 Iframe inseacuterez un autre site dans une page 30
627 Boicirctes agrave Onglets 30
628 Accordeacuteon 31
629 Canvas 31
6210 Diaporama 32
6211 Eacuteleacutements Web 33
6212 Service Web 33
6213 Formulaire 37
7 Mise en ligne de votre site 38
71 Heacutebergement 38
72 Nom de domaine 38
73 Teacuteleacutechargement (upload) du site 38
74 Reacutefeacuterencement 40
8 Trucs astuces et conseils de travail 41
81 Seacutecuriteacute 41
811 Problegravemes possibles 41
812 Emplacement des fichiers projets et site 41
813 Faire des sauvegardes 42
82 Grille 42
83 Palettes de couleur 43
84 Commande drsquoannulation 44
85 Travailler poseacutement 44
86 Zone drsquoeacutedition et Vue hieacuterarchique 44
Manuel de prise en main WebCreator 7 Centre daide 87 Taille automatique des panneaux 45
88 Un site aussi pour les Mobiles 45
89 Centre daide 46
Manuel de prise en main WebCreator 7 Centre daide
1 Bienvenue dans WebCreator 7
11 Deacutemarrage du programme
Apregraves avoir proceacutedeacute agrave lrsquoinstallation au premier chargement du programme vous ecirctes inviteacute agrave enregistrer
votre version de WebCreator 7
Entrez alors le numeacutero de seacuterie et la clef de licence qui vous ont eacuteteacute fournis ainsi que vos informations
drsquoidentification
Les 4 premiers chiffres dans lrsquoimage 0278 sont des identifiants de lot qui correspondent au lien de
teacuteleacutechargement qui se trouve sur votre facture
Pour reacutecupeacuterer cleacutes et installeurs avec les bons numeacuteros de lots rendez-vous agrave lrsquoadresse internet
httpwwwlmsitenetcentreaiderecuperateurphpBonjour
Manuel de prise en main WebCreator 7 Centre daide Remplissez les 3 champs Numeacutero de seacuterie Clef drsquoidentification et Adresse mail et cliquez sur le bouton
correspondant agrave lrsquoaction que vous deacutesirez Teacuteleacutecharger lrsquoinstalleur de WebCreator Recevoir le courriel
drsquoactivation ou recevoir les cleacutes correspondantes agrave votre licence
Si vous avez changeacute drsquoadresse mail allez agrave lrsquoadresse suivante
wwwlmsoftcomenregistrement
Saisissez en haut de la page votre numeacutero de seacuterie et votre ancienne adresse mail puis cliquez sur le
bouton-flegraveche 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 tregraves important que vous saisissiez une adresse mail valide car crsquoest par ce biais que vous eacutechangerez
avec notre service de soutien technique et recevrez les informations relatives agrave ce dernier et aux mises agrave
jour du programme
La licence de WebCreator vous donne droit agrave une installation sur trois machines diffeacuterentes Vous devez
utiliser la mecircme adresse de mail agrave chaque fois celle du deacutetenteur de la licence
2 Premiers contacts Apregraves une preacutesentation rapide des composantes de lrsquointerface nous vous montrerons comment utiliser
WebCreator en adaptant rapidement un modegravele preacutedeacutefini et nous finirons par la manipulation des
eacuteleacutements essentiels agrave lrsquoeacutelaboration de pages avec WebCreator
Manuel de prise en main WebCreator 7 Centre daide
21 Lrsquoespace de travail
22 Personnaliser un modegravele
Nous allons vous montrer les principes de base de lrsquoeacutedition de pages sous WebCreator en commenccedilant
par diffeacuterentes manipulations essentielles dont nous vous expliquerons ensuite les concepts sous-jacents
Nous allons pour cela utiliser le modegravele drsquoexemple ci dessous Crsquoest celui qui srsquoouvre en premier lorsqursquoon
fait templatecreatorlmsoftcom ou Nouveau projet dans le logiciel
Manuel de prise en main WebCreator 7 Centre daide
Vous y retrouvez tous les composants deacutesigneacutes preacuteceacutedemment et remarquez que la Zone des contenus
affiche une arborescence dans laquelle le premier eacuteleacutement Page est seacutelectionneacute par deacutefaut Nous y
reviendrons
221 Modifier un texte
Dans la zone drsquoeacutedition cliquez sur le texte Lorem ipsumhellip Celui-ci srsquoentoure drsquoun cadre de seacutelection blanc
muni de 8 poigneacutees
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide 616 Le mode imbriqueacute 26
617 Gestion des Groupes 27
62 Preacutesentation des principaux Eacuteleacutements 27
621 Image 27
622 Bouton 27
623 Menu 27
624 Titre H1 H6 Balises H1 agrave H6 28
625 Panneaux et Boicirctes 29
626 Iframe inseacuterez un autre site dans une page 30
627 Boicirctes agrave Onglets 30
628 Accordeacuteon 31
629 Canvas 31
6210 Diaporama 32
6211 Eacuteleacutements Web 33
6212 Service Web 33
6213 Formulaire 37
7 Mise en ligne de votre site 38
71 Heacutebergement 38
72 Nom de domaine 38
73 Teacuteleacutechargement (upload) du site 38
74 Reacutefeacuterencement 40
8 Trucs astuces et conseils de travail 41
81 Seacutecuriteacute 41
811 Problegravemes possibles 41
812 Emplacement des fichiers projets et site 41
813 Faire des sauvegardes 42
82 Grille 42
83 Palettes de couleur 43
84 Commande drsquoannulation 44
85 Travailler poseacutement 44
86 Zone drsquoeacutedition et Vue hieacuterarchique 44
Manuel de prise en main WebCreator 7 Centre daide 87 Taille automatique des panneaux 45
88 Un site aussi pour les Mobiles 45
89 Centre daide 46
Manuel de prise en main WebCreator 7 Centre daide
1 Bienvenue dans WebCreator 7
11 Deacutemarrage du programme
Apregraves avoir proceacutedeacute agrave lrsquoinstallation au premier chargement du programme vous ecirctes inviteacute agrave enregistrer
votre version de WebCreator 7
Entrez alors le numeacutero de seacuterie et la clef de licence qui vous ont eacuteteacute fournis ainsi que vos informations
drsquoidentification
Les 4 premiers chiffres dans lrsquoimage 0278 sont des identifiants de lot qui correspondent au lien de
teacuteleacutechargement qui se trouve sur votre facture
Pour reacutecupeacuterer cleacutes et installeurs avec les bons numeacuteros de lots rendez-vous agrave lrsquoadresse internet
httpwwwlmsitenetcentreaiderecuperateurphpBonjour
Manuel de prise en main WebCreator 7 Centre daide Remplissez les 3 champs Numeacutero de seacuterie Clef drsquoidentification et Adresse mail et cliquez sur le bouton
correspondant agrave lrsquoaction que vous deacutesirez Teacuteleacutecharger lrsquoinstalleur de WebCreator Recevoir le courriel
drsquoactivation ou recevoir les cleacutes correspondantes agrave votre licence
Si vous avez changeacute drsquoadresse mail allez agrave lrsquoadresse suivante
wwwlmsoftcomenregistrement
Saisissez en haut de la page votre numeacutero de seacuterie et votre ancienne adresse mail puis cliquez sur le
bouton-flegraveche 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 tregraves important que vous saisissiez une adresse mail valide car crsquoest par ce biais que vous eacutechangerez
avec notre service de soutien technique et recevrez les informations relatives agrave ce dernier et aux mises agrave
jour du programme
La licence de WebCreator vous donne droit agrave une installation sur trois machines diffeacuterentes Vous devez
utiliser la mecircme adresse de mail agrave chaque fois celle du deacutetenteur de la licence
2 Premiers contacts Apregraves une preacutesentation rapide des composantes de lrsquointerface nous vous montrerons comment utiliser
WebCreator en adaptant rapidement un modegravele preacutedeacutefini et nous finirons par la manipulation des
eacuteleacutements essentiels agrave lrsquoeacutelaboration de pages avec WebCreator
Manuel de prise en main WebCreator 7 Centre daide
21 Lrsquoespace de travail
22 Personnaliser un modegravele
Nous allons vous montrer les principes de base de lrsquoeacutedition de pages sous WebCreator en commenccedilant
par diffeacuterentes manipulations essentielles dont nous vous expliquerons ensuite les concepts sous-jacents
Nous allons pour cela utiliser le modegravele drsquoexemple ci dessous Crsquoest celui qui srsquoouvre en premier lorsqursquoon
fait templatecreatorlmsoftcom ou Nouveau projet dans le logiciel
Manuel de prise en main WebCreator 7 Centre daide
Vous y retrouvez tous les composants deacutesigneacutes preacuteceacutedemment et remarquez que la Zone des contenus
affiche une arborescence dans laquelle le premier eacuteleacutement Page est seacutelectionneacute par deacutefaut Nous y
reviendrons
221 Modifier un texte
Dans la zone drsquoeacutedition cliquez sur le texte Lorem ipsumhellip Celui-ci srsquoentoure drsquoun cadre de seacutelection blanc
muni de 8 poigneacutees
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide 87 Taille automatique des panneaux 45
88 Un site aussi pour les Mobiles 45
89 Centre daide 46
Manuel de prise en main WebCreator 7 Centre daide
1 Bienvenue dans WebCreator 7
11 Deacutemarrage du programme
Apregraves avoir proceacutedeacute agrave lrsquoinstallation au premier chargement du programme vous ecirctes inviteacute agrave enregistrer
votre version de WebCreator 7
Entrez alors le numeacutero de seacuterie et la clef de licence qui vous ont eacuteteacute fournis ainsi que vos informations
drsquoidentification
Les 4 premiers chiffres dans lrsquoimage 0278 sont des identifiants de lot qui correspondent au lien de
teacuteleacutechargement qui se trouve sur votre facture
Pour reacutecupeacuterer cleacutes et installeurs avec les bons numeacuteros de lots rendez-vous agrave lrsquoadresse internet
httpwwwlmsitenetcentreaiderecuperateurphpBonjour
Manuel de prise en main WebCreator 7 Centre daide Remplissez les 3 champs Numeacutero de seacuterie Clef drsquoidentification et Adresse mail et cliquez sur le bouton
correspondant agrave lrsquoaction que vous deacutesirez Teacuteleacutecharger lrsquoinstalleur de WebCreator Recevoir le courriel
drsquoactivation ou recevoir les cleacutes correspondantes agrave votre licence
Si vous avez changeacute drsquoadresse mail allez agrave lrsquoadresse suivante
wwwlmsoftcomenregistrement
Saisissez en haut de la page votre numeacutero de seacuterie et votre ancienne adresse mail puis cliquez sur le
bouton-flegraveche 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 tregraves important que vous saisissiez une adresse mail valide car crsquoest par ce biais que vous eacutechangerez
avec notre service de soutien technique et recevrez les informations relatives agrave ce dernier et aux mises agrave
jour du programme
La licence de WebCreator vous donne droit agrave une installation sur trois machines diffeacuterentes Vous devez
utiliser la mecircme adresse de mail agrave chaque fois celle du deacutetenteur de la licence
2 Premiers contacts Apregraves une preacutesentation rapide des composantes de lrsquointerface nous vous montrerons comment utiliser
WebCreator en adaptant rapidement un modegravele preacutedeacutefini et nous finirons par la manipulation des
eacuteleacutements essentiels agrave lrsquoeacutelaboration de pages avec WebCreator
Manuel de prise en main WebCreator 7 Centre daide
21 Lrsquoespace de travail
22 Personnaliser un modegravele
Nous allons vous montrer les principes de base de lrsquoeacutedition de pages sous WebCreator en commenccedilant
par diffeacuterentes manipulations essentielles dont nous vous expliquerons ensuite les concepts sous-jacents
Nous allons pour cela utiliser le modegravele drsquoexemple ci dessous Crsquoest celui qui srsquoouvre en premier lorsqursquoon
fait templatecreatorlmsoftcom ou Nouveau projet dans le logiciel
Manuel de prise en main WebCreator 7 Centre daide
Vous y retrouvez tous les composants deacutesigneacutes preacuteceacutedemment et remarquez que la Zone des contenus
affiche une arborescence dans laquelle le premier eacuteleacutement Page est seacutelectionneacute par deacutefaut Nous y
reviendrons
221 Modifier un texte
Dans la zone drsquoeacutedition cliquez sur le texte Lorem ipsumhellip Celui-ci srsquoentoure drsquoun cadre de seacutelection blanc
muni de 8 poigneacutees
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
1 Bienvenue dans WebCreator 7
11 Deacutemarrage du programme
Apregraves avoir proceacutedeacute agrave lrsquoinstallation au premier chargement du programme vous ecirctes inviteacute agrave enregistrer
votre version de WebCreator 7
Entrez alors le numeacutero de seacuterie et la clef de licence qui vous ont eacuteteacute fournis ainsi que vos informations
drsquoidentification
Les 4 premiers chiffres dans lrsquoimage 0278 sont des identifiants de lot qui correspondent au lien de
teacuteleacutechargement qui se trouve sur votre facture
Pour reacutecupeacuterer cleacutes et installeurs avec les bons numeacuteros de lots rendez-vous agrave lrsquoadresse internet
httpwwwlmsitenetcentreaiderecuperateurphpBonjour
Manuel de prise en main WebCreator 7 Centre daide Remplissez les 3 champs Numeacutero de seacuterie Clef drsquoidentification et Adresse mail et cliquez sur le bouton
correspondant agrave lrsquoaction que vous deacutesirez Teacuteleacutecharger lrsquoinstalleur de WebCreator Recevoir le courriel
drsquoactivation ou recevoir les cleacutes correspondantes agrave votre licence
Si vous avez changeacute drsquoadresse mail allez agrave lrsquoadresse suivante
wwwlmsoftcomenregistrement
Saisissez en haut de la page votre numeacutero de seacuterie et votre ancienne adresse mail puis cliquez sur le
bouton-flegraveche 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 tregraves important que vous saisissiez une adresse mail valide car crsquoest par ce biais que vous eacutechangerez
avec notre service de soutien technique et recevrez les informations relatives agrave ce dernier et aux mises agrave
jour du programme
La licence de WebCreator vous donne droit agrave une installation sur trois machines diffeacuterentes Vous devez
utiliser la mecircme adresse de mail agrave chaque fois celle du deacutetenteur de la licence
2 Premiers contacts Apregraves une preacutesentation rapide des composantes de lrsquointerface nous vous montrerons comment utiliser
WebCreator en adaptant rapidement un modegravele preacutedeacutefini et nous finirons par la manipulation des
eacuteleacutements essentiels agrave lrsquoeacutelaboration de pages avec WebCreator
Manuel de prise en main WebCreator 7 Centre daide
21 Lrsquoespace de travail
22 Personnaliser un modegravele
Nous allons vous montrer les principes de base de lrsquoeacutedition de pages sous WebCreator en commenccedilant
par diffeacuterentes manipulations essentielles dont nous vous expliquerons ensuite les concepts sous-jacents
Nous allons pour cela utiliser le modegravele drsquoexemple ci dessous Crsquoest celui qui srsquoouvre en premier lorsqursquoon
fait templatecreatorlmsoftcom ou Nouveau projet dans le logiciel
Manuel de prise en main WebCreator 7 Centre daide
Vous y retrouvez tous les composants deacutesigneacutes preacuteceacutedemment et remarquez que la Zone des contenus
affiche une arborescence dans laquelle le premier eacuteleacutement Page est seacutelectionneacute par deacutefaut Nous y
reviendrons
221 Modifier un texte
Dans la zone drsquoeacutedition cliquez sur le texte Lorem ipsumhellip Celui-ci srsquoentoure drsquoun cadre de seacutelection blanc
muni de 8 poigneacutees
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Remplissez les 3 champs Numeacutero de seacuterie Clef drsquoidentification et Adresse mail et cliquez sur le bouton
correspondant agrave lrsquoaction que vous deacutesirez Teacuteleacutecharger lrsquoinstalleur de WebCreator Recevoir le courriel
drsquoactivation ou recevoir les cleacutes correspondantes agrave votre licence
Si vous avez changeacute drsquoadresse mail allez agrave lrsquoadresse suivante
wwwlmsoftcomenregistrement
Saisissez en haut de la page votre numeacutero de seacuterie et votre ancienne adresse mail puis cliquez sur le
bouton-flegraveche 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 tregraves important que vous saisissiez une adresse mail valide car crsquoest par ce biais que vous eacutechangerez
avec notre service de soutien technique et recevrez les informations relatives agrave ce dernier et aux mises agrave
jour du programme
La licence de WebCreator vous donne droit agrave une installation sur trois machines diffeacuterentes Vous devez
utiliser la mecircme adresse de mail agrave chaque fois celle du deacutetenteur de la licence
2 Premiers contacts Apregraves une preacutesentation rapide des composantes de lrsquointerface nous vous montrerons comment utiliser
WebCreator en adaptant rapidement un modegravele preacutedeacutefini et nous finirons par la manipulation des
eacuteleacutements essentiels agrave lrsquoeacutelaboration de pages avec WebCreator
Manuel de prise en main WebCreator 7 Centre daide
21 Lrsquoespace de travail
22 Personnaliser un modegravele
Nous allons vous montrer les principes de base de lrsquoeacutedition de pages sous WebCreator en commenccedilant
par diffeacuterentes manipulations essentielles dont nous vous expliquerons ensuite les concepts sous-jacents
Nous allons pour cela utiliser le modegravele drsquoexemple ci dessous Crsquoest celui qui srsquoouvre en premier lorsqursquoon
fait templatecreatorlmsoftcom ou Nouveau projet dans le logiciel
Manuel de prise en main WebCreator 7 Centre daide
Vous y retrouvez tous les composants deacutesigneacutes preacuteceacutedemment et remarquez que la Zone des contenus
affiche une arborescence dans laquelle le premier eacuteleacutement Page est seacutelectionneacute par deacutefaut Nous y
reviendrons
221 Modifier un texte
Dans la zone drsquoeacutedition cliquez sur le texte Lorem ipsumhellip Celui-ci srsquoentoure drsquoun cadre de seacutelection blanc
muni de 8 poigneacutees
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
21 Lrsquoespace de travail
22 Personnaliser un modegravele
Nous allons vous montrer les principes de base de lrsquoeacutedition de pages sous WebCreator en commenccedilant
par diffeacuterentes manipulations essentielles dont nous vous expliquerons ensuite les concepts sous-jacents
Nous allons pour cela utiliser le modegravele drsquoexemple ci dessous Crsquoest celui qui srsquoouvre en premier lorsqursquoon
fait templatecreatorlmsoftcom ou Nouveau projet dans le logiciel
Manuel de prise en main WebCreator 7 Centre daide
Vous y retrouvez tous les composants deacutesigneacutes preacuteceacutedemment et remarquez que la Zone des contenus
affiche une arborescence dans laquelle le premier eacuteleacutement Page est seacutelectionneacute par deacutefaut Nous y
reviendrons
221 Modifier un texte
Dans la zone drsquoeacutedition cliquez sur le texte Lorem ipsumhellip Celui-ci srsquoentoure drsquoun cadre de seacutelection blanc
muni de 8 poigneacutees
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Vous y retrouvez tous les composants deacutesigneacutes preacuteceacutedemment et remarquez que la Zone des contenus
affiche une arborescence dans laquelle le premier eacuteleacutement Page est seacutelectionneacute par deacutefaut Nous y
reviendrons
221 Modifier un texte
Dans la zone drsquoeacutedition cliquez sur le texte Lorem ipsumhellip Celui-ci srsquoentoure drsquoun cadre de seacutelection blanc
muni de 8 poigneacutees
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Vous remarquez simultaneacutement qursquoagrave droite dans la Zone des contenus la ligne Text1 ndash Lorem ipsum dolhellip
est maintenant en sur-brillance
Si vous cliquez agrave nouveau dans le texte un curseur drsquoinsertion apparaicirct agrave lrsquoendroit mecircme ougrave vous avez
cliqueacute Vous pouvez alors saisir du texte en seacutelectionner en effacer et effectuer toutes les manipulations
habituelles drsquoun eacutediteur de texte avec lrsquoaide des outils du menu Accueil
Avec la souris vous pouvez deacuteplacer et redimensionner les eacuteleacutements gracircce au cadre qui les entoure
comme avec nrsquoimporte quel logiciel graphique Lorsque vous placez le curseur de la souris sur le cadre il
se transforme en une croix fleacutecheacutee (deacuteplacement) et sur les poigneacutees il se transforme en double flegraveche
(redimensionnement)
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Apregraves quelques manipulations vous obtenez un aspect diffeacuterent de celui du deacutebut
Le mode de positionnement que vous venez drsquoexpeacuterimenter et dans lequel vous prenez un eacuteleacutement et le
placez directement agrave lrsquoendroit ougrave vous voulez srsquoappelle le positionnement libre Le positionnement libre
crsquoest sans regravegles ni contraintes Crsquoest naturel et intuitif Tant qursquoon travaille dans une petite zone ou une
page contenant peu drsquoeacuteleacutements crsquoest possible On verra plus loin quoi faire quand le site est plus
conseacutequent
222 Remplacer une image
Cliquez dans la partie gauche ougrave srsquoaffiche le compteur A droite de lrsquointerface dans la Zone des contenus
la ligne seacutelectionneacutee indique Img2 ndash Cars_007jpg Vous pouvez aussi y seacutelectionner directement les
eacuteleacutements de la page
Plus bas dans la Zone des proprieacuteteacutes onglet Eacuteleacutement vous retrouvez ce mecircme nom sur la ligne Fichier
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Pour notre exemple seacutelectionnez par exemple lrsquoimage Cars_010jpg et cliquez sur Ouvrir pour la charger
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Ce premier exercice vous a donneacute lrsquooccasion de prendre contact avec de nombreux aspects de WebCreator
et avec les manipulations essentielles de son interface et de ses outils
En vous essayant agrave ces quelques manipulations vous pouvez rapidement arriver agrave personnaliser
complegravetement votre page dont vous pouvez voir un aperccedilu par lrsquoonglet Visualisation avec Internet
Explorer ou avec les autres navigateurs preacutesents sur votre machine afficheacutes dans la zone drsquoaccegraves rapide
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Avant de poursuivre nous devons eacutevoquer lrsquoarchitecture des pages et certains concepts car ils
repreacutesentent les fondements de lrsquoorganisation drsquoun travail efficace avec WebCreator 7
3 Architecture des pages Il est encore possible bien entendu de creacuteer des pages en placcedilant les eacuteleacutements agrave la souris en
positionnement libre Mais les sites web contemporains comportent souvent de longues pages qursquoon fait
deacutefiler Il devient alors difficile de manipuler tout ccedila par exemple si on veut ajouter une nouvelle en
haut il va falloir deacuteplacer tous les eacuteleacutements vers le bas Crsquoest faisable mais il y a mieux Il srsquoagit en fait de
deacutelimiter des zones Ces zones qursquoon deacutefinit avec des panneaux sont des conteneurs dans lesquels on
peut placer des eacuteleacutements comme dans lrsquoexemple ci-dessus ou drsquoautres conteneurs plus petits comme
nous allons le voir dans lrsquoexemple suivant
Typiquement donc une page va ecirctre constitueacutee de zones une zone pour lrsquoentecircte une zone centrale
contenant des sous-zones et une zone de pied de page
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Ce type drsquoorganisation constitue lrsquoarchitecture de page des modegraveles de WebCreator Elle vous permettra
de creacuteer tregraves rapidement des pages modifiables et reacuteutilisables de maniegravere tregraves simple et rapide
Les trois parties HEADER CENTER et FOOTER sont creacuteeacutees agrave partir drsquoeacuteleacutements que lrsquoon appelle des
Conteneurs
31 La notion de Conteneurs et de Blocs
Il y a dans WebCreator deux types drsquoeacuteleacutements
1) Les Eacuteleacutements de base ils servent par nature agrave afficher des informations Ce sont les Images les
Textes les Boutons entre autreshellip
2) Les Conteneurs ils servent agrave deacutelimiter des zones drsquoaffichage dans lesquelles sont contenus
drsquoautres eacuteleacutements basiques ou drsquoautres conteneurs plus petits en les regroupant pour former des
uniteacutes drsquoorganisation de la page
La Page est le principal et le plus grand Conteneur Drsquoailleurs dans la Vue hieacuterarchique des eacuteleacutements elle
se trouve tout en haut car elle contient tous les autres eacuteleacutements
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 daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Plus preacuteciseacutement ce sont des Conteneurs du type Panneaux qui ne servent en fait qursquoagrave deacutelimiter des zones
drsquoarchitecture de la page des cadres invisibles dans lesquels sont placeacutes drsquoautres Conteneurs et Eacuteleacutements
de base
311 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 agrave lrsquointeacuterieur drsquoun conteneur plus grand comme une zone Les Blocs peuvent ecirctre vides ou
contenir des eacuteleacutements comme par exemple les 3 fiches-produit contenues dans la Section Produit
312 Ajouter des blocs dans une section
Cliquez dans le coin en bas agrave droite de la fiche Produit 1 Vous constatez qursquoagrave droite la Vue hieacuterarchique
se cale automatiquement sur cette section et cette mecircme fiche
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Faites un copiercoller du Bloc seacutelectionneacute
Le Bloc vient se positionner automatiquement en dessous des 3 autres et caleacute agrave gauche Collez agrave nouveau
le Bloc 2 fois deux nouvelles fiches-produit viennent se placer immeacutediatement agrave droite de la preacuteceacutedente
parfaitement aligneacutees En plus la hauteur de la Section Produits srsquoest ajusteacutee automatiquement
repoussant tout le reste de la page vers le bas Crsquoest ce que lrsquoon appelle Positionnement Automatique ou
Flottant
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
313 Deacuteplacer des blocs drsquoune section agrave une autre
Lorsque vous copiezcollez un bloc il srsquoinsegravere automatiquement dans le conteneur ougrave se trouvait lrsquooriginal
Pour le copier dans une autre section il faut seacutelectionner le conteneur de cette section AVANT de coller le
bloc Un eacuteleacutement se colle toujours dans le conteneur qui est seacutelectionneacute
Vous pouvez parfois oublier de seacutelectionner le conteneur de destination Vous vous en apercevez alors car
le bloc nrsquoapparaicirct pas lagrave ougrave vous lrsquoattendiez Dans ce cas annulez la derniegravere action (le collage) par Ctrl+Z
et veacuterifiez avant de recommencer que vous seacutelectionnez le bon conteneur de destination
Plus geacuteneacuteralement faites le Ctrl+Z agrave chaque fois que ce qui se produit ne correspond pas agrave ce que vous
attendiez et veacuterifiez bien votre manipulation
4 Les modes de positionnement sous WebCreator Dans les exercices preacuteceacutedents vous avez donc mis en œuvre les deux modes de positionnement de
WebCreator Libre et Automatique Flottant
41 Le positionnement Libre
Crsquoest le mode de positionnement intuitif et simple on prend on deacuteplace et on pose
Il se trouve cependant qursquoen matiegravere de creacuteation de pages Web ce mode a ses limites Avec de longues
pages contenant beaucoup drsquoeacuteleacutements ce qui semble justement devenir la norme ccedila devient trop
compliqueacute
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Le mode de positionnement libre est donc agrave privileacutegier pour la disposition des eacuteleacutements dans de petites
structures comme les Blocs que nous avons eacutevoqueacutes preacuteceacutedemment des cadres drsquoinformations ou des
fiches-produit que vous allez positionner sur votre page ou dans de plus grands Conteneurs
42 Le positionnement Flottant
Pour une page ou pour un grand Panneau dans lequel vous allez positionner plusieurs autres petits
Conteneurs comme des Blocs vous privileacutegierez le positionnement Automatique ou Flottant
En parameacutetrant ainsi le positionnement de vos eacuteleacutements vous leur indiquez que dans le Conteneur ougrave ils
se trouvent ils vont se positionner automatiquement soit le plus en haut agrave gauche ou agrave droite Degraves lors
plus aucun souci de calage manuel agrave reacutepeacutetition
5 Ajouter une section avec des blocs Nous allons maintenant vous montrer comment ajouter une section dans une page et y inteacutegrer des blocs
preacutedeacutefinis
51 Creacuteer une nouvelle section
Nous allons continuer avec le modegravele V7 Style 1a et vous montrer la maniegravere la plus rapide drsquoajouter une
section Nous allons proceacuteder par simple CopierColler puis modifier les Blocs de la nouvelle section
Dans la Zone drsquoeacutedition descendez au bas de la page puis seacutelectionnez la section Actualiteacute en cliquant sur
son pourtour gris
Veacuterifiez drsquoun coup drsquoœil dans la Vue hieacuterarchique que la bonne section est seacutelectionneacutee
Faites maintenant un CopierColler au clavier avec les seacutequences de touches ltCtrlgt+ltCgt puis ltCtrlgt+ltVgt
La nouvelle section apparaicirct maintenant tout en bas de la page et simultaneacutement dans la Vue
hieacuterarchique
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Modifiez lrsquoentecircte de la section Actualiteacutes en Partenaires en cliquant sur le texte pour le reacuteeacutecrire comme
nous lrsquoavons deacutejagrave fait puis remplacez agrave votre convenance le texte de preacutesentation de la section
511 Gestion des blocs
Lorsque vous voulez recopier un bloc vous pouvez utiliser le CopierColler comme nous lrsquoavons fait pour
la section Actualiteacutes Sur une mecircme page cela reste pratique mais en revanche si vous voulez avoir des
blocs agrave disposition depuis nrsquoimporte quelle page du projet vous avez la possibiliteacute de les enregistrer
Nous allons donc maintenant modifier le premier bloc et lrsquoenregistrer dans une liste de blocs personnaliseacutes
du projet puis le rappeler agrave la place des blocs 2 et 3
5111 Modifier un bloc
Commenccedilons donc par modifier le premier Bloc Nous seacutelectionnons puis supprimons le champ texte de
la date 12 JAN Nous seacutelectionnons ensuite lrsquoimage du cercle orange et dans ses proprieacuteteacutes nous la
remplaccedilons par un logo de la socieacuteteacute partenaire fictive Formastic ltd Enfin nous reacuteeacutecrivons le texte situeacute
en dessous par une description de la socieacuteteacute avant de deacutecaler vers la droite le bouton En savoir plus Nous
obtenons finalement le reacutesultat suivant
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
5112 Enregistrer un bloc personnaliseacute
Seacutelectionnez maintenant le bloc dans la Vue hieacuterarchique ou en cliquant en bas agrave gauche du bouton En
savoir plus Veacuterifiez dans la Vue hieacuterarchique que le bon panneau est seacutelectionneacute (il contient le nouveau
logo)
Au-dessus de la Vue hieacuterarchique cliquez sur lrsquoonglet Blocs puis sur lrsquoonglet Personnaliseacutes Cliquez sur
lrsquoicone + et le bloc est maintenant inseacutereacute dans la liste
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
5113 Inseacuterer un bloc personnaliseacute
Dans la Zone drsquoeacutedition seacutelectionnez et supprimez le deuxiegraveme et le troisiegraveme bloc (17 FEV et 21 AVR) De
retour dans lrsquoonglet BlocsPersonnaliseacute seacutelectionnez le bloc que nous venons drsquoenregistrer et cliquez deux
fois sur le bouton Ajouter agrave la page Le bloc est transfeacutereacute dans la page et dans la section Partenaires qui
eacutetait seacutelectionneacutee En revanche il se peut que les blocs aient eacuteteacute colleacutes apregraves le Panneau contenant le
bouton Devenir Partenaire En effet le mode de placement Flottant est activeacute sur les blocs et ceux-ci se
sont donc placeacute naturellement tout agrave la fin du panneau Partenaire Vous nrsquoavez juste qursquoagrave seacutelectionner
chaque bloc et agrave le deacuteplacer agrave la suite du premier pour qursquoil prenne la bonne place
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Il ne vous reste plus qursquoagrave modifier les eacuteleacutements des deux blocs pour compleacuteter la creacuteation de cette nouvelle
section
5114 Bibliothegraveque de blocs
Dans lrsquoonglet Blocs le sous-onglet Bibliothegraveque vous donne accegraves agrave diffeacuterents types de blocs preacutedeacutefinis et
inteacutegreacutes au modegravele que vous avez ouvert Vous pouvez les inteacutegrer dans la page tout aussi facilement de
la mecircme maniegravere que nous venons de le voir
Vous remarquerez que ces blocs preacutedeacutefinis ont des dimensions diffeacuterentes
Ils sont en fait dimensionneacutes avec des largeurs multiples de celle des pages de modegraveles vous permettant
ainsi drsquoen placer 2 3 ou 4 cocircte agrave cocircte en tombant juste au niveau de la largeur de page
Quant aux hauteurs elles sont aussi varieacutees ce qui vous permet drsquoutiliser des blocs de proportions
diverses tout en beacuteneacuteficiant drsquoune vrai simpliciteacute drsquoemploi et de placement
La bonne ideacutee est de partir des blocs fournis de changer leur contenu et drsquoen faire des blocs personnaliseacutes
Comme ils ont au deacutepart des dimensions calculeacutees pour bien remplir les Conteneurs et drsquoadapter aux
eacutecrans des tablettes et mobiles ce sera facile de rendre le site adaptable aux diffeacuterentes largeurs par la
suite
Le travail avec les sections et les blocs dans WebCreator ressemble agrave un jeu de construction
Et il en est en fait de mecircme avec une page complegravete
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Vous creacuteez votre Conteneur Page que vous divisez en sections gracircce agrave des conteneurs Panneaux qui se
positionnent automatiquement Avec la Hauteur automatique la hauteur srsquoajusteront automatiquement
au fur et agrave mesure que vous ajouterez des plus petits conteneurs Blocs dans lesquels vous positionnez
librement divers Eacuteleacutements de base qui sont les contenus
Nous allons maintenant passer en revue les eacuteleacutements qui meacuteritent quelques preacutecisions soit de par leur
nature soit par rapport agrave leur mise en œuvre
6 Gros plan sur les eacuteleacutements
61 Geacuteneacuteraliteacutes
611 Ougrave trouver les eacuteleacutements
Vous trouvez tous les eacuteleacutements disponibles dans WebCreator dans la Barre des eacuteleacutements agrave gauche de la
Zone drsquoeacutedition ainsi que dans le menu PageEacuteleacutements
612 Insertion drsquoun eacuteleacutement
Lrsquoajout drsquoun eacuteleacutement dans la page courante se fait par un simple clic sur lrsquoeacuteleacutement (et pas par Glisser)
Lrsquoeacuteleacutement est alors directement poseacute au milieu de la page sauf pour certains eacuteleacutements comme les images
qui ouvrent une boicircte de dialogue intermeacutediaire
613 Proprieacuteteacutes communes
Chaque eacuteleacutement seacutelectionneacute est doteacute des caracteacuteristiques suivantes
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide 1) Un cadre qui permet de le seacutelectionner lorsque le pointeur de la souris se transforme en croix
2) Des poigneacutees pour le redimensionner
3) Des proprieacuteteacutes accessibles dans la Zone des proprieacuteteacutes et reparties en onglets
a Eacuteleacutement concerne le nom lrsquoemplacement et lrsquoapparence
b Option sert agrave appliquer des effets drsquoapparition au chargement de lrsquoeacuteleacutement
c Action et RollOver permettent de reacuteagir agrave des actions de la souris sur lrsquoeacuteleacutement
d Lien permet de creacuteer un lien vers diverses destinations (fichier page site etchellip)
e Position gegravere la taille la position les marges et le mode de positionnement
f Proprieacuteteacutes reacutesume certaines proprieacuteteacutes lieacutees agrave lrsquoapparence la taille et la position
614 Alignement
Le menu Format vous propose diffeacuterents outils permettant lrsquoalignement des eacuteleacutements Ces outils ont eacuteteacute
conccedilus pour faciliter lrsquoalignement en mode libre Il ne faut pas y avoir recours pour des blocs ou conteneurs
reacutegis par lrsquoalignement automatique
Les deux premiers outils (section Centrer dans le parent) servent agrave positionner un ou plusieurs eacuteleacutements
agrave lrsquointeacuterieur de leur conteneur
Les outils suivants srsquoappliquent toujours agrave plusieurs eacuteleacutements et permettent de les positionner ou
redimensionner les uns par rapport aux autres
Pour seacutelectionner plusieurs eacuteleacutements cliquez successivement dessus en appuyant sur la touche ltCtrlgt
Lrsquoeacuteleacutement servant de repegravere agrave lrsquoalignement est le premier seacutelectionneacute Il est doteacute de poigneacutees de couleur
fonceacutee alors que les suivants sont doteacutes de poigneacutees claires
Nrsquoayez pas peur drsquoexpeacuterimenter sachant que vous pouvez toujours revenir en arriegravere avec annuler
ltCtrl+Zgt
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
615 Empilement avec lrsquoOrdre Z
Lrsquooutil Ordre-Z permet de geacuterer la superposition des eacuteleacutements les uns par rapport aux autres On peut voir
ccedila comme une pizza la page est la pacircte le conteneur principal la sauce et on peut mettre ensuite les
ingreacutedients dans lrsquoordre qui nous plaicirct
Dans le modegravele V7 Style 1a par exemple lrsquoimage du compteur se trouve en arriegravere-plan du texte
Seacutelectionnez lrsquoimage en cliquant sur sa partie gauche
Dans la Vue hieacuterarchique lrsquoimage est bien seacutelectionneacutee et elle se trouve en haut de lrsquoarborescence du
panneau Section_Intro En effet les eacuteleacutements sont afficheacutes de haut en bas en fonction de leur ordre de
creacuteation dans leur conteneur donc de lrsquoarriegravere-plan vers le premier-plan
En haut de la Vue hieacuterarchique cliquez sur la flegraveche vers le bas situeacutee agrave droite de lrsquooption Ordre-Z Lrsquoimage
passe alors en bas de lrsquoarborescence du panneau Section_Intro Simultaneacutement dans la Zone drsquoeacutedition
lrsquoimage arrive au premier-plan masquant le texte et le bouton
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
La commande Ordre-Z de la Vue hieacuterarchique est preacutecise et permet de deacuteplacer des eacuteleacutements niveau par
niveau Dans le menu Accueil vous trouvez une section Ordre-Z qui vous permet de passer un eacuteleacutement
directement au premier-plan ou agrave lrsquoarriegravere-plan
616 Le mode imbriqueacute
Ce mode actif par deacutefaut vous permet de placer automatiquement un eacuteleacutement dans un conteneur en le
deacuteplaccedilant Un cadre vert entoure le conteneur de destination lorsque vous le survolez
Lorsque le mode imbriqueacute est deacutesactiveacute les eacuteleacutements ne sont pas inclus dans des conteneurs mais sont
juste deacuteposeacutes et restent indeacutependants du conteneur au-dessus duquel ils se trouvent
Ajouter un eacuteleacutement agrave un conteneur
Il y a plusieurs maniegraveres drsquoajouter un eacuteleacutement agrave un conteneur
1) Apregraves avoir seacutelectionneacute lrsquoeacuteleacutement faites un clic droit et dans le menu contextuel choisissez
Couper (ou au clavier Ctrl+x) Seacutelectionnez ensuite le conteneur de destination et faites Clic
droitColler (Ctrl+v) Crsquoest la meacutethode la plus pratique et la plus infaillible
2) Le mode imbriqueacute eacutetant activeacute vous glissez un eacuteleacutement et le lacircchez au-dessus du conteneur qui
srsquoest entoureacute drsquoun cadre vert Cette meacutethode est simple mais reacuteserveacutee agrave de petits deacuteplacements
dans la Zone drsquoeacutedition
3) Seacutelectionnez lrsquoeacuteleacutement puis faites clic droitAjouter au conteneur ou AccueilAjouter au
conteneur et choisissez le conteneur de destination Cette meacutethode neacutecessite drsquoavoir bien nommeacute
vos conteneurs pour les reconnaicirctre
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
617 Gestion des Groupes
Vous trouverez une section Groupe dans le menu Accueil mais elle assure juste la compatibiliteacute avec des
fichiers issus drsquoanciennes versions de WebCreator Destineacutee agrave ecirctre supprimeacutee elle a eacuteteacute remplaceacutee par la
gestion des Blocs beaucoup plus eacutevolueacutee et qui doit ecirctre utiliseacutee doreacutenavant
62 Preacutesentation des principaux Eacuteleacutements
Nous allons maintenant deacutecrire certains des principaux eacuteleacutements dont vous aurez besoin ou pour lesquels
quelques preacutecisions drsquoutilisation nous ont sembleacutees neacutecessaires Nous ne parlerons pas des eacuteleacutements
qursquoon peut deacutecouvrir facilement en expeacuterimentant avec leurs reacuteglages Comme indiqueacute preacuteceacutedemment
les eacuteleacutements sont directement disponibles depuis la barre des eacuteleacutements agrave gauche de lrsquointerface
Ainsi la notation laquo eacuteleacutement BaseImage raquo se reacutefegravere agrave la section Base de la Barre des eacuteleacutements et agrave
lrsquoeacuteleacutement Image qui srsquoy trouve
Lrsquoeacutevocation des proprieacuteteacutes des eacuteleacutements se reacutefegravere agrave la Zone de proprieacuteteacutes partie basse agrave droite de
lrsquointerface
621 Image
Lorsque vous cliquez sur lrsquoeacuteleacutement BaseImage une boicircte de dialogue srsquoouvre et vous permet de
seacutelectionner une image dans la bibliothegraveque de WebCreator ou depuis vos dossiers personnels
WebCreator srsquooccupera de redimensionner les images pour ne pas alourdir le site inutilement
622 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 lrsquoonglet eacuteleacutement des proprieacuteteacutes
vous pouvez modifier la taille du bouton de Petit agrave Tregraves grand ou bien choisir Personnaliseacutee afin de
changer librement les proportions du bouton
Vous pouvez ensuite ajouter une bordure personnaliseacutee en eacutepaisseur couleur et transparence
Enfin vous pouvez doter le bouton drsquoune icocircne monochrome ou drsquoune image personnelle
Les anciens types de boutons sont disponibles dans la section Ancien (V6) de la Barre des eacuteleacutements
623 Menu
Pour personnaliser un Menu vous devez aller dans ses proprieacuteteacutes onglet Eacuteleacutements puis cliquer sur
Configurer les eacuteleacutements
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Il est aussi possible de reprendre les caracteacuteristiques drsquoun menu deacutejagrave creacuteeacute dans le projet avec la liste
Instance Vous pouvez ainsi avoir plusieurs scheacutemas de menus reacuteutilisables dans les diffeacuterentes pages du
projet
Le bouton Configurer le style vous permet de parameacutetrer entiegraverement lrsquoapparence les couleurs la police
lrsquoalignement et bien drsquoautres paramegravetres du menu principal et des commandes de menu
Une option tregraves inteacuteressante consiste agrave figer la position de votre menu lors du deacutefilement de la page afin
qursquoil soit toujours visible Pour cela placez votre menu dans un panneau puis dans lrsquoonglet Eacuteleacutement des
proprieacuteteacutes du Panneau cochez la case Ancrage Notez que cela fonctionne avec tous les Panneaux mais
crsquoest surtout utile avec ceux contenant un menu ou un bandeau drsquoinformation que vous voulez afficher
continuellement
624 Titre H1 H6 Balises H1 agrave H6
Les balises de titre ne servent pas tant au formatage du texte (qui se fait avec les options du texte) qursquoagrave
mettre des informations agrave disposition des moteurs de recherche et de reacutefeacuterencement Logiquement les
moteurs de recherche donnent plus drsquoimportance aux balises H1 qursquoaux H2 plus aux H2 qursquoaux H3 et ainsi
de suite Vous devez donc y faire figurer des textes et des mots-cleacutes bien choisis Ceci eacutetant vous pouvez
ajouter une balise Hx nrsquoimporte ougrave dans le texte Crsquoest tregraves inteacuteressant pour bien optimiser la page sans
lrsquoalourdir drsquoune multitude de gros titres
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
625 Panneaux et Boicirctes
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 eacuteleacutements
La diffeacuterence entre ces deux types de conteneur reacuteside dans les options de configuration et les paramegravetres
visuels En reacutesumeacute une Boicircte est beaucoup plus graphique qursquoun Panneau
Elle peut avoir diffeacuterentes formes des coins arrondis une ombre porteacutee afficher une image des deacutegradeacutes
avoir un entecircte et un bas de page etc
Un Panneau peut juste ecirctre coloreacute en plein ou deacutegradeacute Sa fonction est de deacutelimiter des zones de la page
(sections ou simples blocs) et drsquoy contenir des eacuteleacutements
Un Panneau peut aussi srsquoadapter automatiquement agrave la hauteur des eacuteleacutements qursquoil contient et agrave la largeur
de la page gracircce aux options Hauteur automatique et Pleine largeur de lrsquoonglet Position de ses
proprieacuteteacutes Sur le site de LMSoft le diaporama de la premiegravere page est placeacute dans un Panneau avec
lrsquooption Pleine largeur Ainsi quelle que soit la taille de votre zone drsquoaffichage le diaporama srsquoadapte et
prend toute la largeur de la page
Enfin un Panneau peut ecirctre ancreacute crsquoest-agrave-dire que lors de la navigation il peut rester fixe agrave lrsquoeacutecran alors
que lrsquoutilisateur fait deacutefiler la page Cela srsquoobtient en cochant la case Ancrage de lrsquoonglet Eacuteleacutement des
proprieacuteteacutes
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
626 Iframe inseacuterez un autre site dans une page
Cet eacuteleacutement vous permet drsquoafficher une page web interne ou externe dans une zone deacutelimiteacutee de la page
courante en deacutefinissant diffeacuterents paramegravetres drsquoaffichage comme le nom la couleur la taille la preacutesence
de barres de deacutefilement etchellip ci-dessous le site de LMSOFT apparaicirct dans une iFrame au milieu du modegravele
V7 Style 1a Ccedila nrsquoa pas de sens ici mais crsquoest juste pour aider agrave comprendre
627 Boicirctes agrave Onglets
Lrsquoaffichage des eacuteleacutements se fait ici dans une boicircte diviseacutee en onglets situeacutes les uns agrave cocircteacute des autres Ils
correspondent chacun agrave un contenu diffeacuterent placeacute dans un conteneur un peu speacutecial qui sappelle Canvas
Ceci permet un affichage multiple superposeacute agrave la page courante sans la remplacer et sans en ouvrir de
nouvelle
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
628 Accordeacuteon
Lrsquoaccordeacuteon est un eacuteleacutement tregraves similaire agrave la Boicircte agrave onglets mais lrsquoaffichage srsquoy fait suivant une
preacutesentation verticale plutocirct que dans des onglets horizontaux
Les informations qursquoon veut afficher sont aussi placeacutees dans des panneaux qursquoon appelle Canvas
629 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 drsquoeacuteleacutements que vous y placez
Pour deacutefinir le nom et les caracteacuteristiques de chaque Canvas vous devez aller dans la Zone des proprieacuteteacutes
onglet Eacuteleacutement et y seacutelectionner le Canvas que vous voulez modifier
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Notez bien que crsquoest lorsque le Canvas est seacutelectionneacute dans les proprieacuteteacutes que vous pouvez y inseacuterer des
eacuteleacutements ou un bloc existant
Astuce notez la dimension exacte du Canvas dans Position Vous pourrez ensuite creacuteer des blocs de la
mecircme taille que vous pourrez inseacuterer dans le Canvas
6210 Diaporama
Geacuteneacuteralement un diaporama vous permet drsquoafficher des images les unes agrave la suite des autres
manuellement ou automatiquement avec un deacutelai Dans WebCreator vous pouvez aussi afficher toute
sorte drsquoeacuteleacutements suppleacutementaires comme du texte des blocs que vous aurez creacuteeacutes des eacuteleacutements
multimeacutedia des boutons etc Tout type drsquoeacuteleacutement en fait
Comme pour un accordeacuteon chaque vue du diaporama est repreacutesenteacutee par un Canvas que vous
seacutelectionnez ajoutez et supprimez dans les proprieacuteteacutes onglet Eacuteleacutement
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
6211 Eacuteleacutements Web
Reacuteserveacute aux utilisateursprogrammeurs avanceacutes cet eacuteleacutement permet drsquoinseacuterer du code HTML javascript
dans vos pages Le code est inclus sous forme de balises ltDivgt
Un autre chemin consiste agrave passer par la commande PageAjout de code personnaliseacute mais dans ce cas
le code est ajouteacute dans la section ltBodygt de la page
Notez que LMSOFT nrsquoassure pas de support technique par rapport agrave ces outils de programmation dont la
maicirctrise et lrsquoefficaciteacute deacutependent seulement du programmeur qui les utilise
6212 Service Web
Un service web est une application situeacutee sur notre serveur et qui permet de geacuteneacuterer et de modifier des
eacuteleacutements Web que vous pouvez inclure dans vos sites Comme ces objets sont geacutereacutes par des services web
une fois inclus dans vos pages vous pouvez les modifier depuis nrsquoimporte quel appareil doteacute drsquoun
navigateur sans utiliser ensuite WebCreator
WebCreator met agrave votre disposition lrsquoaccegraves agrave 3 services Web qui sont le Blogue la Galerie et lrsquoEacuteleacutement
Cloud
62121 Accegraves aux Services Web
La premiegravere chose agrave faire pour les utiliser est de creacuteer un compte drsquoaccegraves aux services web (un ID Web
Services) avec une adresse mail valide et un mot de passe Voici lrsquoaccegraves
httpdev-webserviceslmsoftcomlogin
Vous pouvez en creacuteer jusqursquoagrave 5 afin que plusieurs personnes aient accegraves aux services Web et puissent
eacutediter les eacuteleacutements agrave geacuterer
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Si vous en avez une utilisation importante (de nombreux clientsintervenants) vous pouvez passer agrave la
version WebCreator Deacuteveloppeur avec abonnement Il nrsquoy a alors plus de limites quant au nombre de
comptes autoriseacutes que vous pouvez alors en creacuteer agrave volonteacute pour vous et vos clients
Nous allons maintenant vous expliquer pour lrsquoexemple comment creacuteer un Eacuteleacutement Cloud
62122 Exemple de lrsquoeacuteleacutement Cloud
La premiegravere fois que vous creacuteez un eacuteleacutement Services Web (Blogue Galerie ou Eacuteleacutement Cloud) vous devez
seacutecuriser votre accegraves aux services Web en saisissant un mot de passe
Attention choisissez un mot de passe speacutecial pour lrsquoaccegraves aux services Web ne saisissez pas celui de votre
messagerie
Validez bien la boicircte de dialogue en cliquant sur le bouton Se connecter Si vous ecirctes deacutejagrave connecteacute cette
boicircte vous propose logiquement de vous deacuteconnecter
Le cadre de lrsquoeacuteleacutement Service Web est visible au milieu de la page
Attention Vous devez bien sucircr ecirctre connecteacute agrave Internet pour eacutediter un eacuteleacutement Service Web
Dans les proprieacuteteacutes cliquez alors sur le bouton Creacuteer et geacuterer vos eacuteleacutements
Une fenecirctre externe agrave WebCreator et intituleacutee LMSOFT Web Services srsquoouvre alors vous indiquant que
Vous nrsquoavez aucun eacuteleacutement disponible
Cliquez alors sur le bouton Creacuteer votre premier eacuteleacutement HTML Et une interface drsquoeacutedition apparaicirct
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
En haut agrave gauche de la fenecirctre les 5 icocircnes vous permettent drsquoenregistrer lrsquoeacuteleacutement drsquoannuler ou refaire
une action drsquoajouter un nouvel eacuteleacutement ou drsquoen supprimer un
Le bouton Reacuteglages vous permet de creacuteer les autres utilisateurs autoriseacutes agrave modifier les eacuteleacutements Cloud
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Avant de quitter lrsquoeacutediteur nrsquooubliez surtout pas drsquoenregistrer les modifications effectueacutees avec lrsquoicocircne
situeacutee en haut agrave gauche
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide De retour dans WebCreator dans la liste Eacuteleacutements Cloud des proprieacuteteacutes seacutelectionnez lrsquoeacuteleacutement que vous
voulez afficher
Si vous avez effectueacute des modifications sur plusieurs eacuteleacutements le bouton Recharger les eacuteleacutements Cloud
vous permet de remettre agrave jour lrsquoaffichage
6213 Formulaire
WebCreator dispose drsquoun nouvel eacuteleacutement Formulaire que vous trouvez dans la section Donneacutees de la
Barre des Eacuteleacutements
Crsquoest un eacuteleacutement contenant des champs agrave renseigner par le VISITEUR du site qui les envoie ensuite agrave une
destination que VOUS aurez preacutedeacutefinie geacuteneacuteralement vous ou celui pour qui vous aurez creacuteeacute le site
WebCreator vous fournit 4 modegraveles de formulaires Demande de contact Reacuteservation Commande et
Personnaliseacute En fait vous pouvez ajouter des champs et des eacuteleacutements suppleacutementaires agrave chacun drsquoeux et
acceacuteder agrave de nombreux paramegravetres de proprieacuteteacutes
Pour la transmission des donneacutees du formulaire vous pouvez vous inscrire gratuitement sur Dataform un
service gratuit de LMSOFT qui vous permet de recevoir gratuitement jusqursquoagrave 100 demandes drsquoinformation
par jour
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
7 Mise en ligne de votre site Pour ecirctre vu et visiteacute votre site deacutepend de deux choses essentielles lrsquoheacutebergement et le nom de domaine
71 Heacutebergement
Votre site doit ecirctre accessible de tous et donc se situer sur un serveur constamment connecteacute agrave internet
ET capable de geacuterer le volume des visiteurs (hors de chez vous donc) Crsquoest ce que permet lrsquoheacutebergement
72 Nom de domaine
Lrsquoautre condition est que votre site ait une adresse drsquoaccegraves qui lui soit propre ET qursquoelle soit unique ET
qursquoelle soit toujours la mecircme Crsquoest agrave cela que sert un nom de domaine comme LMSOFTCOM par
exemple
Il est essentiel que ce nom de domaine soit votre proprieacuteteacute et non celle de lrsquoheacutebergeur pour ecirctre sucircr que
seul vous pourrez lrsquoutiliser tant que vous le voudrez
Les sites creacuteeacutes avec WebCreator peuvent ecirctre heacutebergeacutes nrsquoimporte ougrave et nous vous laissons toute liberteacute
de choix en la matiegravere
Neacuteanmoins LMSOFT propose eacutegalement des heacutebergements de qualiteacute et agrave prix compeacutetitif
Lrsquoavantage drsquoecirctre heacutebergeacute chez nous est drsquoecirctre indeacutependant des fournisseurs drsquoaccegraves chez qui vous ecirctes
un peu noyeacute parmi les millions de clients De notre cocircteacute dans une structure agrave taille humaine ougrave nous
connaissons tous nos clients nos techniciens sont capable de vous aider rapidement et efficacement si
requis
73 Teacuteleacutechargement (upload) du site
Lors de votre inscription chez un heacutebergeur comme chez LMSOFT toutes les informations de connexion
notamment lURL et les chemins agrave utiliser vous sont transmises tandis que vous deacutefinissez les identifiants
et mots de passe utilisateur
Ce sont toujours ces mecircmes informations que vous utilisez lorsque vous teacuteleacutechargez votre site
WebCreator 7 integravegre un outil tregraves simple et qui remplit apregraves quelques reacuteglages initiaux la fonction
drsquoenvoi des fichiers de votre site vers sa destination sur internet
Notez que LMSOFT diffuse aussi un logiciel client FTP nommeacute FTP Site Manager beaucoup plus eacutevolueacute
que la version inteacutegreacutee de base Il dispense un affichage de type explorateur agrave plusieurs fenecirctres dans
lesquelles vous affichez les dossiers source et destination du teacuteleacutechargement Cela le rend utilisable pour
tous types de transferts FTP Enfin une fois installeacute il srsquointegravegre automatiquement dans lrsquointerface de
WebCreator 7 au deacutebut du menu Outils et sera appeleacute par la commande Mise en ligne
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Dans WebCreator la mise en ligne de votre site se fait via la commande OutilsSortie WebEnvoyer vers
lrsquoheacutebergeur
Au premier accegraves la boicircte de dialogue suivante apparaicirct
Dans Type de connexion lentreacutee par deacutefaut est LMSOFT Web Solution Heacutebergement LMSOFT
Lentreacutee LMSOFTHosting est lieacutee aux versions preacuteceacutedentes et Deacutemos LMSOFTSITES est utiliseacute pour la
version deacutevaluation de nos produits
Remplissez ensuite les champs suivants
Nom afficheacute ce champ sert agrave vous aider pour lidentification notamment si vous avez plusieurs
heacutebergements Crsquoest un aide-meacutemoire pour vous
Dossier distant pour un heacutebergement LMSOFT cliquez sur le bouton Valeur par deacutefaut qui inscrira
automatiquement la valeur public_html
Si vous ecirctes heacutebergeacute ailleurs dans Type de configuration choisissez Configuration manuelle Saisissez
bien le nom du fichier distant Chez LMSOFT crsquoest indexhtml mais cela peut varier drsquoun heacutebergeur agrave
lrsquoautre Consultez donc bien les informations fournies par votre heacutebergeur
Autre source de confusion transfeacuterez bien le CONTENU du dossier WEB et pas le dossier lui-mecircme ni le
dossier projet
Dans lrsquooutil inteacutegreacute de WebCreator le dossier local doit ecirctre WEB
Dans les autres logiciels FTP ouvrez le dossier dans lequel vous trouverez plusieurs fichiers et sous-
dossiers Un fichier srsquoappelle indexhtml et correspond agrave la page drsquoaccueil Vous devez bien transfeacuterer tout
le dossier et les sous-dossiers
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Quand votre connexion est deacutejagrave parameacutetreacutee vous arrivez directement agrave la boicircte de dialogue suivante
Vous pouvez y parameacutetrer des options de filtre pour nenvoyer que les fichiers reacutecemment modifieacutes et
seacutelectionner la connexion serveur que vous voulez utiliser avant de cliquer sur Envoyer le site pour
proceacuteder au teacuteleacutechargement
Lorsque vous voulez parameacutetrer un autre heacutebergeur cliquez sur le bouton Ajouter pour revenir agrave la boicircte
de dialogue de parameacutetrage deacutecrite preacuteceacutedemment
En cas derreur les causes possibles sont
1) Un problegraveme de connexion - veacuterifiez que vous ecirctes connecteacute agrave internet
2) Une erreur de saisie dun des chemins ou dun nom de fichier ndash la premiegravere fois seulement
3) Une erreur de nom dutilisateur et mot de passe
Si le teacuteleacutechargement se deacuteroule bien mais que votre site nest pas mis agrave jour correctement veacuterifiez que
cest le bon chemin de site source que vous avez speacutecifieacute
74 Reacutefeacuterencement
Voici quelques points essentiels agrave respecter pour un reacutefeacuterencement optimal
1) Le nom du site doit contenir le mot le plus unique et repreacutesentatif de votre activiteacute
2) Les mots clefs doivent apparaicirctre dans le titre de la page drsquoaccueil mais aussi dans celui des
autres pages
3) Inseacuterez les mots cleacutes dans les metatags du projet (menu Outils) et eacuteventuellement de chaque
page srsquoils doivent ecirctre diffeacuterents pour chaque page
4) Appliquez des balises dites laquo titre raquo H1 H2 et ainsi de suite dans les titres et agrave divers endroits
dans les textes de chaque page Notez qursquoil nrsquoest pas neacutecessaire de modifier la police du texte
On peut mettre une balise Hx nrsquoimporte ougrave dans le texte sans que ccedila 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 daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide 5) Dans les proprieacuteteacutes de chaque image onglet Options zone Identification ajoutez des mots
cleacutes dans la balise Alt situeacutee agrave cocircteacute du Nom
Bien sucircr pensez bien agrave republier le site agrave chaque modification ou ajout de ces clefs de reacutefeacuterencement afin
que ce soit bien en ligne et vu par les moteurs de recherche
Pour de plus amples informations et compte-tenu de lrsquoeacutevolution incessante des meacutethodes de
reacutefeacuterencement nous vous invitons agrave consulter reacuteguliegraverement les conseils de Google et autres moteurs de
recherche agrave ce sujet
Enfin sachez qursquoil nrsquoy a aucun moyen drsquoarriver en premiegravere page ni drsquoy rester sans efforts Crsquoest le contenu
qui fait tout pas le logiciel drsquoeacutedition et surtout la mise en avant du contenu
8 Trucs astuces et conseils de travail
81 Seacutecuriteacute
Ce vaste sujet nrsquoest ni nouveau ni speacutecifique au travail avec WebCreator mais neacutecessite drsquoecirctre eacutevoqueacute ici
811 Problegravemes possibles
La question que vous devez vous poser est quelles sont les implications de lrsquointerruption drsquoaccegraves agrave mon
site par moi et par ses visiteurs et sous-tendue que peut-il arriver durant la creacuteation puis la vie de mon
site et qui interromprait lrsquoaccegraves agrave ce dernier
1) Sur votre ordinateur local de travail vous pouvez perdre vos fichiers de projet par une mauvaise
manipulation par une panne seacutevegravere de votre mateacuteriel ou par lrsquoaction drsquoun virus
2) En local toujours votre connexion internet peut ecirctre interrompue plus ou moins longtemps vous
empecircchant de mettre agrave jour votre site
3) Une fois en ligne votre site peut ecirctre pirateacute etou partiellement corrompu voire entiegraverement
deacutetruit
Du coup plusieurs mesures de seacutecuriteacute malheureusement trop souvent neacutegligeacutees peuvent palier agrave TOUS
ces deacutesagreacutements Lrsquoideacutee est de permettre un redeacutemarrage le plus rapide possible
La premiegravere mesure est la sauvegarde de votre projet ET de votre site
812 Emplacement des fichiers projets et site
Par deacutefaut les fichiers de vos projets sont stockeacutes dans Mes DocumentsWebCreator
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 crsquoest lagrave que se trouve le fichier indexhtml qui repreacutesente le fichier principal
de votre site
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Nrsquooubliez surtout pas les sous-reacutepertoires car ils contiennent tous les fichiers images boutons etchellip
utiliseacutes pour lrsquoaffichage de votre site
813 Faire des sauvegardes
Degraves lors pour faire des sauvegardes le plus simple est de recopier reacuteguliegraverement tous les fichiers de vos
dossiers Projet
Ougrave Dans un autre dossier de votre ordinateur ET sur un support externe amovible non connecteacute agrave votre
reacuteseau
Avec la sauvegarde locale vous preacuteviendrez les problegravemes lieacutes agrave de mauvaises manipulations
Avec la sauvegarde externe vous preacuteviendrez
1) Les crashes mateacuteriels
2) Les attaques de virus
3) Les interruptions de connexion puisque vous pourrez travailler depuis un autre lieu
Enfin reacuteservez un support speacutecifique pour chaque sauvegarde Une sauvegarde de projet prendre quelque
centaines de Mo Deux clefs USB de sauvegarde peuvent ecirctre deacutedieacutees uniquement agrave cette fin mais ne
doivent pas ecirctre utiliseacutees pour transfeacuterer drsquoautres fichiers
82 Grille
Pour positionner et aligner facilement les eacuteleacutements en mode libre WebCreator met agrave votre disposition
une grille dont vous pouvez parameacutetrer lrsquoespacement des lignes et le magneacutetisme Vous la trouverez dans
le menu Page
Ideacutealement laissez-la sur le parameacutetrage drsquointerligne 10 et activez le magneacutetisme
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide Vous verrez ensuite agrave lrsquousage et en fonction des opeacuterations que vous faites les reacuteglages qui vous
conviennent le mieux
83 Palettes de couleur
A chaque modegravele de projet est associeacutee une palette de couleur
Dans la liste du menu ProjetCouleurs vous retrouvez en sur-brillance la palette lieacutee au projet en cours
Vous pouvez en tester une autre en la seacutelectionnant dans la liste et voir instantaneacutement le reacutesultat agrave
lrsquoeacutecran
En cliquant sur licocircne situeacutee agrave droite vous pouvez eacutediter les diffeacuterentes composantes de la palette
seacutelectionneacutee
Enfin nrsquooubliez pas que vous pouvez toujours annuler les derniegraveres actions si vous avez modifieacute par erreur
les mauvaises composantes de couleur
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
84 Commande drsquoannulation
Gardez toujours agrave lrsquoesprit que WebCreator vous donne la possibiliteacute drsquoannuler toute action soit par le
raccourci clavier Ctrl+Z soit par licocircne flegraveche courbeacutee situeacutee dans la Barre drsquoaccegraves rapide en haut agrave gauche
de lrsquointerface
Cette commande fonctionne pour toutes les actions aussi bien pour les ajoutsmodifications drsquoeacuteleacutements
les deacuteplacements de conteneurs la modification drsquoune couleur ou la creacuteation drsquoun lien
En revanche comme dans tout logiciel elle sera inopeacuterante une fois que vous aurez enregistreacute le projet en
cours ce qui validera toutes les derniegraveres modifications
85 Travailler poseacutement
Dans WebCreator vous travaillez sur des pages web Degraves lors pour afficher les eacuteleacutements que vous placez
WebCreator geacutenegravere agrave la voleacutee le code HTML correspondant ce qui neacutecessite une peu plus de temps
drsquoaffichage que dans un simple logiciel de dessin Si vous travaillez rapidement lrsquoaffichage peut prendre
du deacutecalage avec vos actions drsquoautant plus lorsque la taille de votre page et le nombre drsquoeacuteleacutements
augmentent le code devenant alors plus long agrave mettre agrave jour
Travaillez donc poseacutement pour laisser le temps au logiciel drsquoafficher les eacuteleacutements avant de passer au
suivant
Enfin en cas de doute le menu Page section Actuelle met agrave votre disposition une commande Rafraicircchir
qui permet de redessiner la page
86 Zone drsquoeacutedition et Vue hieacuterarchique
Comme nous lrsquoavons deacutejagrave eacutevoqueacute dans les exercices il est essentiel de toujours travailler de concert avec
ces deux espaces de lrsquointerface
Un coup drsquoœil agrave la Vue hieacuterarchique vous permet de veacuterifier que vous avez seacutelectionneacute le bon eacuteleacutement
dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous permet aussi de seacutelectionner plus facilement un eacuteleacutement qui se trouverait agrave
lrsquoarriegravere-plan drsquoun autre ou entiegraverement masqueacute dans la Zone drsquoeacutedition
La Vue hieacuterarchique vous donne une vue tregraves claire des deacutependances et inclusions des diffeacuterents eacuteleacutements
les uns par rapport aux autres et vous permet notamment gracircce agrave lrsquoOrdre-Z de deacuteplacer les eacuteleacutements
dans leur conteneur Dans la Zone drsquoeacutedition les commandes du menu contextuel Ajouter au conteneur
Amener agrave lrsquoavant et Envoyer agrave lrsquoarriegravere complegravetent efficacement ces manipulations
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
87 Taille automatique des panneaux
Afin de placer parfaitement les panneaux dans la page WebCreator met agrave votre disposition deux options
incontournables qui vous feront eacuteconomiser de nombreuses manipulations
Dans les proprieacuteteacutes du panneau onglet Eacuteleacutement vous trouverez une option Pleine largeur qui adaptera
automatiquement la largeur du panneau agrave 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 lrsquooption ne sera
pas disponible (une mise en garde est afficheacutee)
Lrsquoautre option se trouve dans lrsquoonglet Position et srsquointitule Hauteur automatique Elle vous permet de
faire en sorte que le panneau srsquoagrandisse automatiquement en vertical lorsque vous y placez des
eacuteleacutements Lrsquooption Taille min vous permet de deacutefinir une hauteur minimum initiale pour le panneau
88 Un site aussi pour les Mobiles
Lorsque vous creacuteez un site avec WebCreator il est destineacute agrave ecirctre afficheacute sur un ordinateur ou sur une
tablette
Cependant agrave notre eacutepoque vous devez aussi creacuteer une version pour les teacuteleacutephones mobiles Il faut savoir
que maintenant GOOGLE deacuteclasse les sites qui nrsquoont pas de version mobile Il suffit drsquoavoir quelques page
qui seront forceacutement diffeacuterentes
1) La taille de lrsquoeacutecran eacutetant plus petite les informations affichables sont moins nombreuses
2) Le mode de navigation est diffeacuterent ne serait-ce qursquoentre un doigt et un pointeur de souris
3) La navigation sur un site mobile reacutepond tregraves souvent agrave des besoins diffeacuterents identifier
rapidement une socieacuteteacute afficher des informations concentreacutees et proposer immeacutediatement des
actions
Vous devez donc eacuteviter les longs textes les grands tableaux les images lourdes agrave charger etchellip et
privileacutegier les boutons et blocs peu nombreux et lisibles sur lrsquoeacutecran
LMSOFT propose un logiciel compleacutementaire pour creacuteer une version mobile de votre site MobileCreator
On peut creacuteer quelques pages ougrave on va privileacutegier les actions comme lrsquoaffichage des coordonneacutees et
contacts lrsquoappel au teacuteleacutephone lrsquoenvoi de demande drsquoinfo les principaux produits des boutons drsquoachat
Paypal etc
Vous pouvez ajouter un lien vers le site complet qui reste bien sucircr visible sur mobiles moyennant quelques
manipulations et zooms
Le site mobile en ligne nrsquoa pas besoin drsquoun heacutebergement speacutecifique Celui que vous aurez creacuteeacute avec
MobileCreator sera mis en ligne dans un sous-dossier de votre heacutebergement intituleacute laquo mobile raquo Crsquoest
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide normalement la configuration par deacutefaut et automatique Mais on peut le faire manuellement aussi avec
nrsquoimporte quel outil FTP
Pour que vos visiteurs soient dirigeacutes vers le bon site en fonction de leur appareil (site mobile avec
teacuteleacutephones site principal avec ordinateur ou tablette) il faut simplement republier le site principal avec
WebCreator 7
Notez que quand vous creacuteez votre projet mobile vous pouvez importer la palette de couleurs utiliseacutee avec
WebCreator pour que votre site mobile ait les mecircmes couleurs que le principal
En quelques heures vous reacuteussirez agrave creacuteer un site mobile de qualiteacute professionnelle qui respectera lrsquoimage
de votre socieacuteteacute
Un site mobile de qualiteacute dira de vous que vous ecirctes un acteur de premier plan dans votre domaine
Nos sites mobiles obtiennent un score de 100 sur le test de mobiliteacute de Google
Enfin pour les raisons de design et drsquoergonomie eacutevoqueacutees en deacutebut de ce sujet preacutetendre geacuteneacuterer des
sites laquo responsive designraquo uniques pour tous les appareils ou offrir une conversion automatique de sites
pour les mobiles est agrave la mode mais notre expeacuterience nous a montreacute que crsquoest un leurre Un site pour
mobile nrsquoest pas un site pour ordinateur en modegravele reacuteduit Crsquoest un site qui apporte une partie des
informations en les preacutesentant sous une apparence entiegraverement adapteacutee agrave lrsquointerface et aux outils de
navigation drsquoun mobile
89 Centre daide
LMSOFT met agrave votre disposition en 5 langues un site de soutien pour les problegravemes techniques agrave ladresse
httpwwwlmsitenetcentreaide
Vous y trouverez entre autres des tutoriels videacuteo les manuels des versions preacuteceacutedentes une base de
reacutesolution de problegravemes techniques
Un lien vous redirige vers le Forum LMSOFT dans lequel de nombreux utilisateurs de tous niveaux peuvent
eacutechanger sentraider et donc vous aider
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT
Manuel de prise en main WebCreator 7 Centre daide
Enfin vous pouvez envoyer toutes vos suggestions agrave infolmsoftcom Sachez que nous lisons tous les
messages avec beaucoup drsquointeacuterecirct et que toutes les demandes sont traiteacutees au plus vite afin de continuer
agrave satisfaire nos clients et agrave faire eacutevoluer nos produits
Voilagrave nous arrivons agrave la fin de ce guide de prise en main de WebCreator 7
Nous vous souhaitons beaucoup de reacuteussite dans votre activiteacute et dans son deacuteveloppement notamment
nous lrsquoespeacuterons gracircce agrave lrsquoutilisation de WebCreator 7
Nous restons comme toujours agrave votre service et agrave votre eacutecoute pour reacutepondre agrave vos question et permettre
drsquoameacuteliorer encore votre maicirctrise ainsi que notre logiciel et nos services
Lrsquoeacutequipe de LMSOFT