47
WebCreator 7 Manuel de prise en main

WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

  • Upload
    others

  • View
    22

  • Download
    0

Embed Size (px)

Citation preview

Page 1: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 2: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 3: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 4: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 5: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 6: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 7: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 8: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 9: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 10: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 11: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 12: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 13: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 14: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 15: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 16: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 17: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 18: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 19: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 20: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 21: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 22: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 23: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 24: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 25: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 26: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 27: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 28: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 29: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 30: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 31: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 32: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 33: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 34: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 35: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 36: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 37: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 38: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 39: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 40: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 41: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 42: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 43: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 44: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 45: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 46: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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

Page 47: WebCreator 7 Manuel de prise en main - LMsoft › downloads › Prise en main WebCreator 7.pdf · 2018-05-08 · Manuel de prise en main WebCreator 7 Centre d'aide 2.1. L’espace

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