Embed Size (px)
Citation preview
Manuel de prise en mains
Web Creator Pro 6
Table des matières
Les nouveautés de Web Creator Pro 6 .................................................................................................... 3
Une nouvelle interface ............................................................................................................................ 3
La barre d’accès rapide............................................................................................................................ 4
Le Ruban de commandes ........................................................................................................................ 4
La Liste des éléments ............................................................................................................................ 11
L’onglet éléments .................................................................................................................................. 12
L’onglet Blocs ......................................................................................................................................... 13
La Barre des propriétés ......................................................................................................................... 14
L’onglet Elément .................................................................................................................................... 14
L’onglet Options .................................................................................................................................... 14
L’onglet Actions ..................................................................................................................................... 14
L’onglet RollOver ................................................................................................................................... 14
L’onglet Position .................................................................................................................................... 15
L’onglet Propriétés ................................................................................................................................ 15
De nouveaux modèles de projets .......................................................................................................... 15
Les nouveaux éléments conteneurs : les Boîtes et les Panneaux ......................................................... 15
Différence entre Panneaux et Boîtes .................................................................................................... 15
Ajout d’éléments dans un conteneur .................................................................................................... 16
Reprise d’une page d’une version précédente de Web Creator ........................................................... 18
Propriétés des Boîtes et des Panneaux .............................................................................................. 18
Les nouveaux outils d’alignement et de positionnement ..................................................................... 20
La Grille .................................................................................................................................................. 20
Les lignes-guides de positionnement .................................................................................................... 21
Les commandes du menu Format ......................................................................................................... 21
Nouveaux paramètres Flottant et Retour ............................................................................................. 23
Principe du paramètre Flottant ............................................................................................................. 23
Restriction de positionnement .............................................................................................................. 24
Exploiter au mieux le paramètre Flottant ............................................................................................. 27
Ajout d’un élément Flottant .................................................................................................................. 27
Déplacer des éléments flottants ........................................................................................................... 28
Les applications du paramètre Flottant ................................................................................................ 28
Le paramètre « Retour » ....................................................................................................................... 30
Création et utilisation des blocs ............................................................................................................ 31
Présentation des blocs .......................................................................................................................... 31
Création d’un bloc ................................................................................................................................. 31
Réutilisation d’un bloc ........................................................................................................................... 33
Précautions d’utilisation des blocs ........................................................................................................ 33
Taille des blocs idéale ............................................................................................................................ 33
Transparence et luminosité ................................................................................................................... 33
Les onglets ............................................................................................................................................. 34
L’accordéon ........................................................................................................................................... 35
L’élément Réseaux sociaux.................................................................................................................... 35
Les fenêtres Pop-up ............................................................................................................................... 35
Les éléments Carte Google .................................................................................................................... 35
Traduction Google ................................................................................................................................. 36
Google Analytics .................................................................................................................................... 36
Les éléments Iframe .............................................................................................................................. 36
Paypal .................................................................................................................................................... 36
Les éléments améliorés ......................................................................................................................... 37
Ouverture des projets ........................................................................................................................... 37
Les groupes ............................................................................................................................................ 37
Les images ............................................................................................................................................. 38
Les boutons ........................................................................................................................................... 39
Les sons ................................................................................................................................................. 39
Les vidéos .............................................................................................................................................. 40
Les éléments Texte ................................................................................................................................ 40
Référencement et balises de titres ....................................................................................................... 41
Manuel de prise en main Web Creator Pro 6 Une nouvelle interface
Page 3 sur 39
Introduction Web Creator Pro 6 est bien plus qu’une mise à jour des versions 4 ou 5, c’est une nouvelle version à
part entière. Elle a été mise au point d’une part sur la base des remarques des utilisateurs des
versions précédentes et d’autre part en suivant les évolutions de l’environnement Internet, de ses
caractéristiques techniques et des habitudes des internautes. Web Creator Pro 6 inclut ainsi de
nombreuses nouveautés, mais aussi de réelles améliorations de fonctions existant déjà dans les
versions précédentes et qui nécessitaient une simplification ou une amélioration de leur usage.
Au résultat, l’utilisation de Web Creator Pro 6 est beaucoup plus simple par rapport à ses
prédécesseurs, la création de vos sites est accélérée, leur apparence est comme toujours
irréprochable, tandis que les possibilités et l’évolutivité de vos sites sont grandement améliorées.
Autant de bonnes raisons de choisir Web Creator Pro 6 ou de lui rester fidèle.
Les nouveautés de Web Creator Pro 6 Nous allons maintenant vous présenter rapidement le détail des nouveautés, puis celui des fonctions
améliorées.
Une nouvelle interface
La nouvelle interface de Web Creator Pro 6, dans la droite lignée des programmes les plus récents,
comme Microsoft Office, inclut maintenant, tout en haut, une Barre d’accès rapide aux commandes
les plus utilisées. En dessous s’affiche un Ruban de commandes en lieu et place de la barre des
menus, avec l’affichage amélioré de toutes les commandes regroupées en sections thématiques. Sur
la gauche de l’interface, la Barre des éléments est constamment disponible, et à droite, la Liste des
éléments optimisée vient compléter cette nouvelle interface, avec en dessous la Barre des
propriétés.
Manuel de prise en main Web Creator Pro 6 Une nouvelle interface
Page 4 sur 39
La barre d’accès rapide
Vous remarquez tout en haut à gauche la barre d’accès rapide. Elle dispense plusieurs icônes
correspondant à des commandes très usitées : Enregistrer, Annuler, Liste des pages du projet,
Navigateurs Web.
La Liste des pages du projet en cours permet de passer d’une page à l’autre par un simple clic.
Le test rapide du projet est possible dans un des navigateurs Web installés sur votre PC. Web
Creator Pro 6 prend en charge Internet Explorer, Mozilla Firefox, Google Chrome, Opera et Safari. Si
vous utilisez un autre navigateur non référencé, vous avez la possibilité de l’ajouter manuellement à
la liste, via le menu Web, section Navigateurs, commande Ajouter.
Le Ruban de commandes
La principale nouveauté réside dans la présence, en haut de l’interface, du Ruban de commandes, en
lieu et place de la traditionnelle barre de menus. Ainsi, dans chaque onglet du ruban, les
commandes sont désormais accessibles sur toute la largeur du ruban, regroupées dans des Sections
sous-titrées, sous forme de couple pictogramme/texte.
Cette organisation en ruban déroute parfois au début, mais après quelques minutes de prise en
main, elle facilite et accélère grandement l’accès aux différentes commandes.
Tout à droite du Ruban, vous pouvez voir 4 icônes. La première à gauche, permet de fermer le Ruban
pour dégager de l’espace. La flèche vers le haut se transforme alors en flèche vers le bas et sert à
rouvrir le Ruban.
Les trois autres icônes se réfèrent au projet en cours. Elles permettent d’iconifier la fenêtre et de la
placer en bas à gauche de l’interface. La deuxième passe la fenêtre du projet en mode fenêtré, tandis
que la troisième ferme le projet, non sans vous avoir éventuellement demandé de le sauvegarder.
Le menu Fichier
Manuel de prise en main Web Creator Pro 6 Une nouvelle interface
Page 5 sur 39
Vous trouverez ici les commandes d’entrées/sortie relatives aux fichiers physiques des projets :
Ouverture d’un projet, Nouveau projet, Fermeture, Enregistrement, Enregistrement sous,
Impression et Sortie du programme.
La commande Ouvrir présente un nouvel aspect avec deux onglets distincts :
Le premier, Récents, affiche la liste des derniers projets édités. A noter que cette liste n’est mise à
jour qu’après la fermeture de Web Creator Pro 6.
Le second onglet, Parcourir, affiche l’arborescence de votre ordinateur. Le dossier par défaut est
celui des projets de Web Creator Pro 6, soit « Utilisateur/Nom d’utilisateur/Web Creator/ ».
Le menu Accueil
C’est le menu par défaut dans lequel vous travaillerez le plus souvent.
Manuel de prise en main Web Creator Pro 6 Une nouvelle interface
Page 6 sur 39
Il affiche des commandes relatives à l’édition, Annuler, Couper, Copier, Coller, Sélectionner et
Supprimer.
La plupart des autres commandes concernent les polices, la mise en forme du texte, l‘alignement, la
création de listes à puces ou numérotées et l’indentation du texte. Une dernière commande vous
permet de supprimer toute mise en forme appliquée à un texte.
Vous trouverez enfin une section dédiée à la gestion des liens : création, édition, recherche d’un lien
et suppression.
Le menu Projet
Cet onglet se réfère au projet en cours.
La première section, Alignement dans le navigateur, vous permet de déterminer la future position
de votre site dans la fenêtre du navigateur internet, soit à gauche, au centre ou à droite.
La section Page d’accueil sert à définir la page de départ de votre projet.
Le menu Page
Cet onglet se rapporte à la page en cours.
La première section, Pages, permet de changer de page, soit en en créant une nouvelle, soit en
appelant la liste des pages du projet pour en choisir une autre.
La troisième icône, Gestionnaire, ouvre aussi une liste des pages du projet, mais permet de plus
d’afficher ou non un aperçu des pages et d’effectuer diverses opérations : créer une page,
renommer, dupliquer, supprimer, et changer de page.
La section Actuelle : l’icône Propriétés vous permet directement d’activer les propriétés de la page
courante dans la Barre des propriétés. Ceci est très pratique lorsque votre page est remplie de
nombreux éléments et qu’il serait alors trop compliqué de cliquer sur le fond de la page ou sur la
ligne correspondant à la page dans la Liste des éléments.
Manuel de prise en main Web Creator Pro 6 Une nouvelle interface
Page 7 sur 39
Rafraîchir redessine la page et ses éléments à partir de la mémoire vive, tandis que Recharger
reprend les éléments physiques sur votre disque pour redessiner la page. Pour cette raison, Web
Creator vous demandera éventuellement de sauvegarder la page avant de la recharger.
Ces commandes sont très utiles en cas de dégradation de l’apparence de la page après de
nombreuses modifications ou avec un ordinateur un peu lent.
Auto-détection téléphones vous permet de gérer simplement la visite de votre site avec des
appareils autre qu’un ordinateur. En pratique, vous définissez par avance des pages spécifiques à
utiliser lorsque la navigation avec un mobile ou une tablette a été détectée.
La définition d’un Mot de passe permet de protéger l’accès à la page courante lors du test du projet
dans un navigateur ou de son exploitation.
La section Couleurs : vous pouvez ici changer la palette de couleurs, c’est-à-dire l’association de
différentes couleurs dédiées aux différents éléments de la page en cours, simplement en
sélectionnant un modèle de couleurs dans la liste.
Le bouton Palette vous permet de modifier la couleur d’un élément du modèle utilisé pour la page.
Le menu Insertion
Cet onglet regroupe tous les éléments disponibles dans Web Creator.
Manuel de prise en main Web Creator Pro 6 Une nouvelle interface
Page 8 sur 39
La section Base donne accès aux mêmes éléments que la Barre d’outils située à gauche de l’interface
et classés dans des catégories semblables.
Plus pratique, la section Bibliothèque vous permet de directement choisir des fichiers multimédia
fournis par Web Creator et classés en différents catégories : Images, Vidéos, Sons et animations
Flash.
Manuel de prise en main Web Creator Pro 6 Une nouvelle interface
Page 9 sur 39
Le menu Sélection
Comme son nom l’indique, les commandes de cet onglet s’appliquent aux éléments sélectionnés
dans la page.
Les commandes des sections Actions et Ordre-Z sont assez explicites et ont déjà été vues en ce qui
concerne les liens.
La section Groupe sert à transférer la sélection d’éléments dans un groupe existant dans la page ou à
l’en retirer, ou de créer à la volée un nouveau groupe afin d’y intégrer les éléments considérés.
La section Parent, quant à elle, permet de transférer le ou les éléments sélectionnés dans un des
conteneurs existant dans la page, ou de créer directement un nouvel élément conteneur (une Boîte
ou un Panneau) afin de les y intégrer.
Le menu Format
Ce menu vous donne accès à toutes sortes de possibilités d’aligner un ou plusieurs éléments, et ce
par rapport au Parent / Conteneur (Boîte, Panneaux ou Page) ou les uns par rapport aux autres.
Manuel de prise en main Web Creator Pro 6 Une nouvelle interface
Page 10 sur 39
Vous trouverez un peu plus loin des explications plus complètes et des exemples dans le paragraphe
intitulé Les nouveaux outils d’alignement et de positionnement.
Le menu Web
Ce menu regroupe les commandes ayant trait à la finalisation de votre projet et à sa mise en ligne sur
Internet.
La première section, Navigateur, affiche la liste des navigateurs installés sur votre machine et que
vous pouvez donc utiliser pour prévisualiser votre site.
La zone d’outils située à droite vous donne la possibilité d’ajouter, modifier ou supprimer la
référence à un navigateur qui serait installé sur votre ordinateur, mais qui ne serait pas reconnu par
Web Creator Pro 6.
Dans la section Page, Ajout de Code personnalisé ouvre une fenêtre d’édition qui permet d’associer
des lignes de codes HTML ou Javascript à des éléments de la page courante.
La deuxième icône, Poids de la page, calcule la somme de tous les éléments, code, images, sons,
etc… constituant la page et estime le temps de téléchargement à un débit moyen de 256 kilobits par
seconde.
Dans la section Référencement, vous définissez les mots-clefs et le format des balises de H1 à H6
servant de base pour le référencement par les moteurs de recherche. Les balises H1 à H6 peuvent
être intégrées dans la page grâce à la commande Titre (H1…H6) de la barre d’outils, section Mise en
page.
De même, en cliquant sur Google Analytics, vous ouvrez une fenêtre qui vous permet de saisir des
mots-clefs associés au projet entier, ou à la page courante, et qui seront spécifiquement lus par
l’outil de recherche de mots-clefs de Google.
Enfin Sitemap reprend les informations « officielles »définie pour les fichiers Sitemap à destination
des moteurs de recherche. Vous y voyez le plan de votre site avec ses différents composants affichés
en arborescence hiérarchique. Vous pouvez alors définir pour chacun d’eux les fréquences de mise à
jour prévues et la répartition des niveaux de priorité. La date de dernière mise à jour est affichée
automatiquement par Web Creator Pro 6.
La section Sortie Web concerne la dernière étape de publication de votre site.
Optimiser passe en revue le site entier et dresse la liste des éventuels composants inutilisés.
Régénérer reconstruit ensuite entièrement votre site et tous les liens. Enfin Envoyer vers
l’hébergeur vous permet de mettre votre site en ligne. Le programme vous dispense tout d’abord
quelques informations relatives à l’hébergement de sites directement chez LMSOFT, l’éditeur de
Manuel de prise en main Web Creator Pro 6 La Liste des éléments
Page 11 sur 39
Web Creator Pro 6. Ensuite apparaît une boîte de dialogue dans laquelle vous spécifiez toutes les
informations nécessaires pour la mise en ligne effective de votre site.
Le menu Outils
Ce menu vous donne accès à différents modules complémentaires de Web Creator Pro 6.
La première section concerne des outils propres à LMSOFT.
La seconde concerne des outils de correction orthographique, lexicale et grammaticale, édités par la
société Druide Informatique. Vous serez généralement redirigé vers leur site internet pour consulter
l’ensemble de leurs solutions de validation linguistique.
La section Grille, déjà évoquée, dispense tous les paramètres de réglage de la grille aidant au
positionnement des éléments dans la page.
Enfin la section Barre d’outils permet d’afficher ou de cacher la Barre des éléments située à gauche
de l’interface lorsque vous aurez placé la plupart de vos composants de page. L’accès aux
bibliothèques et aux éléments est alors toujours possible via le menu Insertion.
Le menu Aide
Ce menu consacré à l’aide n’a pas changé depuis les dernières versions et le titre des sections qui le
composent sont assez évocateurs.
La Liste des éléments
A droite de l’interface de Web Creator Pro 6, vous retrouvez la Liste des éléments (avec en dessous
la Barre des propriétés).
Manuel de prise en main Web Creator Pro 6 La Liste des éléments
Page 12 sur 39
Cette liste est maintenant détachable. Effectuez pour cela un double-clic sur la barre supérieure de la
liste et vous pourrez alors la déplacer ou vous voulez. Pour la remettre à sa place d’origine, effectuez
un nouveau double-clic sur la barre supérieure.
La Liste des éléments comporte maintenant 2 onglets : Eléments et Blocs.
L’onglet éléments
Dans Eléments, vous trouvez par défaut la liste des différents éléments composant la page en cours,
avec l’arborescence illustrant leur place respective suivant leur ordre de création ou leur
appartenance aux différents Parents/Conteneurs, une notion que nous expliquerons dans le chapitre
Les nouveaux éléments conteneurs : les Boîtes et les Panneaux.
Grâce aux icônes précédant leur nom, vous pouvez afficher ou cacher des éléments ou empêcher
leur modification. Les petits signes + et – permettent de développer ou de fermer le contenu d’un
Conteneur.
Rechercher un élément
La zone Filtre vous permet de rechercher facilement un élément par son nom ou une partie de son
nom. Un clic sur la flèche située à droite met en surbrillance rouge la première occurrence
correspondant à votre recherche et sélectionne en même temps l’élément dans la liste et sur la page.
Changer l’ordre des éléments
Juste à droite se trouve l’inscription Z-Order suivi de deux flèches verticales. Cette zone concerne
l’ordre des éléments dans la page. Par défaut, les éléments sont classés par ordre de création, puis,
lorsque vous les placez dans des parents, c’est l’ordre de ces derniers qui prime. Les deux flèches Z-
Order vous permettent donc de modifier l’ordre des éléments ou des parents conteneurs dans la
page.
Affichage des éléments ou des groupes
En haut de la liste, vous voyez un entête déroulant intitulé Vue hiérarchique de la page. Si vous
cliquez dessus, vous pouvez choisir de Voir la liste des groupes d’éléments et leur contenu.
Manuel de prise en main Web Creator Pro 6 La Liste des éléments
Page 13 sur 39
Rechercher un groupe
Comme pour les éléments, la zone Filtre vous permet de rechercher facilement un groupe ou un
élément par son nom ou une partie de son nom. Un clic sur la flèche située à droite met en
surbrillance rouge la première occurrence correspondant à votre recherche et sélectionne en même
temps l’élément dans la liste et sur la page.
L’onglet Blocs
Si vous cliquez maintenant sur l’onglet Blocs, une nouvelle zone apparaît, avec deux nouveaux
onglets : Bibliothèque et Personnalisé.
Dans l’onglet Bibliothèque, vous trouverez un ensemble de blocs d’éléments fournis avec Web
Creator Pro 6.
Dans la liste déroulante, vous choisissez une bibliothèque, puis les blocs contenus s’afficheront.
L’onglet Personnalisés vous permet de stocker vos propres blocs quand vous les aurez créés.
Les blocs étant une des nouveautés importante de Web Creator Pro 6, pour plus de précisions,
reportez-vous au chapitre Création et utilisation des blocs.
Manuel de prise en main Web Creator Pro 6 La Barre des propriétés
Page 14 sur 39
La Barre des propriétés
Entièrement remaniée, la Barre des propriétés regroupe maintenant sous différents onglets toutes
les propriétés relatives à l’élément sélectionné.
Grâce à l’icône en forme d’épingle située en haut à droite, vous pouvez détacher la Barre des
propriétés, puis la replacer. Vous pouvez aussi la fermer avec le bouton en croix. Une simple barre
intitulée Propriétés la remplacera en bas de l’interface et en cliquant dessus vous pourrez à nouveau
afficher la Barre des propriétés.
L’onglet Elément
Vous y trouvez les caractéristiques physiques permettant de changer par exemple la couleur, la
forme, la bordure de l’élément.
L’onglet Options
Ici vous pouvez renommer l’élément sélectionné. Pour une image, vous pourrez déclarer dans un
champ « ALT » (pour Alternet), un texte d’information utilisé notamment par les moteurs de
recherche, ou pour remplacer une image en cas de désactivation de l’affichage des images dans le
navigateur du visiteur. Enfin, vous pouvez aussi indiquer le comportement de l’élément lors du
chargement de la page, notamment les éventuels effets et délais d’apparition.
L’onglet Actions
Celui-ci gère l’interactivité de l’élément avec la souris de l’internaute : clic, appui, relâchement mais
aussi entrée et sortie du curseur sur l’élément. Vous pouvez ici choisir dans la liste parmi plusieurs
éléments de la page courante pour être récepteurs des actions.
L’onglet RollOver
Il ne concerne que le survol de l’élément sélectionné par le curseur de la souris. Par contre l’effet
pourra s’appliquer à n’importe quel autre élément de la page. Si vous sélectionnez un élément
simple, comme un bouton par exemple. Celui-ci sera automatiquement invisible au chargement de la
page, et affiché au survol de l’élément déclencheur. Si vous sélectionnez un élément multimédia,
comme un son, celui-ci sera joué au survol de l’élément déclencheur.
Comme son nom l’indique, l’onglet Lien vous permet de créer avec l’élément sélectionné différents
liens vers des objets internes ou externes au projet : page du projet, nouvelle page, fichier externe,
Manuel de prise en main Web Creator Pro 6 De nouveaux modèles de projets
Page 15 sur 39
page web externe, etc… Vous pouvez aussi définir des paramètres de lien, comme le délai de mise en
œuvre du lien ou des paramètres d’affichage supplémentaires dans le cas d’une fenêtre ou d’un
onglet.
L’onglet Position
Celui-ci reprend toutes les informations de taille, position et marges de l’élément dans la page, ainsi
que le paramètre Flottant et Retour (voir plus loin le chapitre Technologie des éléments flottants).
L’onglet Propriétés
Ce dernier onglet reprend l’ensemble des propriétés des différents onglets, mais sous forme de liste
et classés par catégories, différentes des onglets précédemment cités.
De nouveaux modèles de projets
Comme les versions précédentes, Web Creator Pro 6 vous propose des modèles de sites déjà prêts,
incluant de nouveaux visuels et les nouveautés que nous allons évoquer dans la suite de ce chapitre,
comme l’utilisation des Conteneurs et des Blocs. Si vous êtes vraiment pressés, vous n’avez
quasiment plus qu’à personnaliser ces modèles pour obtenir rapidement votre site fonctionnel.
Les nouveaux éléments conteneurs : les Boîtes et les Panneaux
Web Creator Pro 6 met à votre disposition deux nouveaux types d’éléments qui, comme les pages,
sont des Conteneurs : les Boîtes et les Panneaux.
Les boîtes existaient déjà dans les versions précédentes de Web Creator, mais elles n’étaient que des
éléments de base à finalité uniquement esthétique. Elles peuvent désormais, lors de l’ouverture d’un
projet de la version 4 ou 5, être converties en Conteneur depuis leur onglet Position de la Barre des
propriétés, ou laissées telles quelles.
Versions évoluées et beaucoup plus puissantes des groupes, les conteneurs sont spécifiquement
destinés à contenir des éléments primaires et s’utilisent réellement comme de vraies boîtes : tout
élément glissé dedans en devient un sous-élément. Dès lors, lorsque vous déplacez le conteneur,
vous déplacez tous les éléments inclus.
Grâce à ces conteneurs, vous pouvez très facilement créer des modèles de pages en juxtaposant des
conteneurs préformatés. Vous pouvez aussi créer des assemblages d’éléments complexes gardant
toujours leur homogénéité.
Différence entre Panneaux et Boîtes
La principale différence entre les Boîtes et les Panneaux est d’ordre esthétique :
Les Panneaux sont initialement rectangulaires et transparents et seules leur taille et leur couleur
peuvent être modifiées. Les Boîtes ont beaucoup d’autres caractéristiques que nous détaillerons un
peu plus loin dans un paragraphe dédié.
Ainsi lorsque vous aurez besoin d’un conteneur d’élément invisible, pour des raisons d’organisation
pure, de mise en page, vous utiliserez un Panneaux.
Manuel de prise en main Web Creator Pro 6Les nouveaux éléments conteneurs : les Boîtes et les Panneaux
Page 16 sur 39
Si le conteneur a aussi une finalité esthétique, de par sa forme, sa couleur, sa bordure, alors vous
choisirez plutôt une Boîte. Nous verrons un peu plus loin quelques possibilités de modification de ces
propriétés.
Comme nous allons le voir maintenant, la méthode d’utilisation des deux types de conteneurs est la
même.
Mise en œuvre des éléments conteneurs
Vous trouvez ces nouveaux éléments dans la Barre des éléments, section Mise en page, puis
Panneau et Boîte.
Un clic sur ces éléments les crée au centre de la page. Les Boîtes apparaissent en bleu et les
Panneaux transparents, uniquement délimités par un trait pointillé (qui ne sera pas affichée sur le
site dans le navigateur).
Ajout d’éléments dans un conteneur
Intégration d’un élément à un conteneur
Comme vous allez le voir, pour des raisons pratiques, il n’y a pas moyen de créer un élément
directement inclus dans un conteneur existant.
Créez donc tout d’abord un Conteneur, par la Barre des éléments, section Mise en page, puis
Panneau ou Boîte. Celui-ci se positionne au centre de la page.
Créez maintenant un élément, une image par exemple, en cliquant sur la Barre des éléments, section
Base, puis Image. Celle-ci apparaît aussi au centre de la page et donc au centre du panneau que vous
avez créé précédemment.
Si vous sélectionnez le Panneau, en cliquant sur sa bordure pointillée, puis le déplacez, vous
observerez que l’élément Image ne suit pas le panneau. En effet, par défaut, les éléments sont créés
indépendants ; cela évite d’intégrer automatiquement un élément à un conteneur qui se trouverait
au centre de la page si ce n’est pas souhaité.
Maintenant que votre page un élément et son futur conteneur, procédez ainsi :
Sélectionnez l’élément, puis glissez-le à l’intérieur du panneau. Dès que l’élément sera entièrement
compris dans les limites du panneau, vous observerez une surbrillance mauve sur la bordure de ce
dernier. Cela indique que le panneau est activé comme conteneur de l’image, qu’il va en devenir le
Parent. Vous pouvez alors relâcher l’élément. Si vous déplacez maintenant le panneau, l’élément
bouge en même temps.
Une autre solution consiste, après avoir sélectionné l’élément, à cliquer avec le bouton de droite de
la souris ou à ouvrir le menu Sélection. Choisissez alors la commande Ajouter au parent puis, dans la
liste, le nom du conteneur de destination.
Manuel de prise en main Web Creator Pro 6Les nouveaux éléments conteneurs : les Boîtes et les Panneaux
Page 17 sur 39
L’élément viendra alors instantanément se loger en haut à gauche du conteneur.
Intégration de plusieurs éléments à un conteneur
Pour intégrer plusieurs éléments, vous pouvez procéder de différentes manières.
Une fois le conteneur créé, la première et la plus simple consiste à sélectionner les différents
éléments et à cliquer ensuite sur le bouton de droite de la souris ou à ouvrir le menu Sélection.
Choisissez alors la commande Ajouter au parent puis dans la liste, le nom du panneau ou de la boîte
de destination. Les éléments viennent alors se positionner automatiquement en haut et à gauche de
leur nouveau parent conteneur.
La deuxième méthode consiste à glisser/déposer les éléments les uns après les autres dans le
conteneur et à la place que vous souhaitez.
Enfin, vous pouvez aussi sélectionner tous les éléments en même temps et les faire glisser dans le
conteneur jusqu’à ce que la bordure de ce dernier s’affiche en surbrillance mauve. Lorsque vous
relâchez le bouton de la souris, les éléments se positionnent correctement à la même place qu’ils
occupaient auparavant.
Sélectionnez maintenant le conteneur, en cliquant dessus ou en le sélectionnant dans la Liste des
éléments. Si vous le déplacez, vous constatez que les éléments qu’il contient se déplacent en même
temps. Si ce n’est pas le cas, c’est qu’un ou plusieurs éléments ont été mal sélectionnés ou ne sont
pas rentrés dans le cadre du conteneur. Annulez puis recommencez alors l’opération de transfert.
Manuel de prise en main Web Creator Pro 6Les nouveaux éléments conteneurs : les Boîtes et les Panneaux
Page 18 sur 39
Vous n’avez alors plus qu’à peaufiner la disposition en ajustant la taille et la position du conteneur.
Cette méthode est très adaptée à la reprise de projets des versions antérieures.
Reprise d’une page d’une version précédente de Web Creator
De l’exemple précédent, vous déduisez qu’il va ainsi être assez simple de reprendre des éléments de
pages créés avec les versions précédentes de Web Creator qui n’intégraient pas le concept des
conteneurs. Après avoir ouvert votre ancien projet, enregistrez-le tout d’abord avec Web Creator Pro
6. Créez ensuite dans une des pages un conteneur de la taille adéquate, puis sélectionnez les
différents éléments que vous voulez y placer et déposez-les tout simplement dans le cadre du
conteneur.
En étroite liaison avec l’utilisation des conteneurs, Web Creator Pro 6 propose une autre nouveauté
très utile pour la génération de plusieurs pages ou projets basées sur un même modèle : les Blocs.
Ce sont aussi des évolutions de la notion de Groupes, dans lesquels vous pouvez copier le conteneur
et ses éléments puis les mettre de côté pour les réutiliser ultérieurement en les transférant à une
autre page sans avoir à refaire toute l’opération de création du conteneur ou la disposition des
éléments. Nous détaillons cela dans le chapitre Création et utilisation des blocs.
Propriétés des Boîtes et des Panneaux
Les utilisateurs des versions précédentes de Web Creator connaissent déjà les boîtes, mais elles
n’étaient alors que des éléments basiques à seule finalité esthétique. Elles peuvent désormais, lors
de l’ouverture d’un projet issu des versions 4 ou 5, être laissées telles quelles ou converties en
Conteneur depuis l’onglet Position de la Barre des propriétés, case Permettre à ce box d’être
parent.
Comme nous l’avons dit aussi, la différence entre les Boîtes et les Panneaux est principalement
esthétique.
Leurs différentes propriétés sont modifiables dans l’onglet Elément de la Barre des propriétés.
Concernant les Panneaux, vous ne pourrez y modifier que la couleur, la transparence et la
luminosité, en cliquant sur la petite palette située à droite du champ Couleur.
Manuel de prise en main Web Creator Pro 6Les nouveaux éléments conteneurs : les Boîtes et les Panneaux
Page 19 sur 39
Les Boîtes par contre, ont désormais de nombreuses propriétés : par défaut elles sont rectangulaires
à coins arrondis, dotées d’une bordure colorée, d’une ombre portée et d’une couleur de fond, tandis
que les Panneaux sont initialement transparents et peuvent juste se voir attribuer une couleur de
remplissage.
Vous pouvez aussi doter une Boîte d’un entête et d’un pied, de couleur différente ou encore
transparent, pour y apposer par exemple un texte ou laisser voir un autre élément en arrière-plan et
créer ainsi des effets très variés.
Manuel de prise en main Web Creator Pro 6Les nouveaux outils d’alignement et de positionnement
Page 20 sur 39
Ci-dessous, quelques exemples de modification des arrondis, de l’entête et du pied, de la couleur,
avec transparence et dégradés, ou encore différentes épaisseurs de bordure.
Les nouveaux outils d’alignement et de positionnement
L’alignement, le redimensionnement et le positionnement des éléments sont rendus très précis par 3
outils de Web Creator Pro 6 :
1) La grille magnétique paramétrable entièrement dans le menu Outils
2) Les lignes-guides de positionnement et de redimensionnement
3) Les nombreuses options du menu Format
La Grille
Tous ses réglages sont maintenant accessibles dans le menu Outils.
Vous pouvez ici paramétrer entièrement l’affichage de la grille par défaut dans Web Creator :
Affichée ou non (Visible), magnétique ou non (Active), changer la couleur des points d’alignement
Manuel de prise en main Web Creator Pro 6Les nouveaux outils d’alignement et de positionnement
Page 21 sur 39
via une palette déroulante, ainsi que et la distance horizontale (Largeur) et verticale (Hauteur) entre
les points.
Les lignes-guides de positionnement
Désormais, dès que vous déplacez un élément, WEB CREATOR 6 affiche des lignes-guide qui
permettent de l’aligner par rapport aux autres éléments de la page. Ceci est très pratique et
particulièrement utile lorsque la page comporte de nombreux éléments et que vus rechercher des
alignements parfaits.
De plus, ces lignes-guides entre aussi en jeu lorsque vous redimensionnez un élément.
Un exemple lors du déplacement d’un élément :
…et lors du redimensionnement :
Les commandes du menu Format
Web Creator Pro 6 vous permet maintenant d’aligner plusieurs éléments facilement par rapport à
un élément parent, ou les uns par rapport aux autres : à gauche, à droite, en haut, en bas, et par
combinaison en escalier montant ou descendant.
Manuel de prise en main Web Creator Pro 6Les nouveaux outils d’alignement et de positionnement
Page 22 sur 39
Grâce à toutes ces commandes, vous pouvez maintenant aligner facilement plusieurs éléments
sélectionnés, par rapport à la page ou par rapport aux autres : à gauche, à droite, en haut et en bas.
Vous pouvez aussi combiner les alignements pour créer par exemple une disposition en escalier.
La première section du menu Format sert à positionner un ou plusieurs élément non pas entre eux,
mais par rapport au centre de la page ou de tout conteneur, Boîte ou Panneau, déclaré comme
Parent du ou des éléments sélectionnés (Clic droit sur l’élément/Ajouter au parent/…).
L’exemple ci-dessous vous montre l’alignement d’un objet dans une Boîte, d’abord horizontalement,
puis verticalement, et le résultat des deux combinés, soit centré.
Attention, si vous voulez aligner horizontalement plusieurs éléments par rapport à leur conteneur,
vous devez d’abord les centrer les uns par rapport aux autres (voir plus bas) et ensuite seulement, les
centrer horizontalement dans le conteneur. En effet, il peut arriver que vous vouliez placer au milieu
d’un conteneur un groupe d’éléments répartis de manière déséquilibrée (une photo avec un nom en
dessous et un texte à sa droite par exemple).
Les autres sections du menu Format se rapportent au positionnement des éléments les uns par
rapport aux autres.
Voici un résumé visuel des alignements et redimensionnements obtenus en partant des 3 éléments
représentés en haut de l’image.
Manuel de prise en main Web Creator Pro 6 Nouveaux paramètres Flottant et Retour
Page 23 sur 39
Lorsque vous sélectionnez plusieurs éléments, l’un d’eux sera doté de poignées plus visibles, en
surbrillance verte, et sera considéré comme l’élément de référence pour certains alignements qui en
nécessitent un.
Si vous n’obtenez pas le résultat que vous escomptiez après avoir aligné les éléments entre eux,
procédez ainsi : annulez l’alignement, sélectionnez à nouveau les différents éléments à aligner, et
cliquez une fois sur l’élément qui doit servir de référence pour l’alignement. Il passera alors en
surbrillance et vous pouvez alors appliquer l’alignement que vous souhaitez.
Après quelques essais, vous trouverez instinctivement l’élément de référence.
Nouveaux paramètres Flottant et Retour
La prise en compte du paramètre CSS Floating, pour Flottants, et Clear pour Retour, permet le
positionnement automatique des éléments entre eux et dans leur parent direct, Page, Panneau ou
Boîte.
Cela permet ainsi d’améliorer la mise en page, de faciliter le redimensionnement des pages et
d’optimiser la création de sites dédiés aux appareils mobiles.
Ces paramètres sont accessibles dans la Barre des propriétés, à l’onglet Position, dans la zone
Comportement, ou dans l’onglet Propriétés, zone Options.
Principe du paramètre Flottant
Un élément doté d’un paramètre Flottant va effectivement flotter, comme s’il était dans l’eau.
Manuel de prise en main Web Creator Pro 6 Nouveaux paramètres Flottant et Retour
Page 24 sur 39
Tel un cube de mousse dans un aquarium, il va donc se positionner automatiquement le plus haut
possible dans la page ou dans son parent conteneur, page, boîte ou panneau, exactement comme s’il
flottait à sa surface.
Ensuite, suivant le paramètre Flottant choisi, « left » (à gauche) ou « right » (à droite), l’élément se
décale à gauche ou à droite. S’il rencontre un autre élément, il arrête son décalage. S’il passe sous un
« trou » créé par un élément moins haut que les autres, il reste quand même sur la même ligne
horizontale et se décale jusqu’au prochaine élément ou jusqu’au bord du conteneur. Avec le
troisième paramètre « none », pas de flottaison, et l’élément peut être positionné manuellement
n’importe où.
L’application de ce paramètre permet ainsi un positionnement automatique des éléments, en cas de
modification de la mise en page, de changement d’orientation de la page ou de l’insertion d’un
nouvel élément.
Important : ce paramètre Flottant gère le positionnement de tout élément par rapport aux limites de
son parent ou conteneur le plus immédiat, soit la page courante, soit en priorité un panneau ou une
boîte dans lequel il serait intégré.
Des combinaisons en cascade sont possibles, tel que l’application d’un paramètre Flottant gauche à
des éléments contenus dans une boîte, l’application du paramètre Flottant droit à cette même Boîte
par rapport à un Panneau qui la contiendrait, lui-même Flottant gauche par rapport à la Page. Vous
en voyez un exemple dans l’illustration suivante.
Restriction de positionnement
Les éléments dotés d’un paramètre Flottant se positionnent sur et seulement sur la largeur de
l’espace disponible en haut de leur conteneur. Ni le ou les éléments, ni le conteneur ne changent de
taille automatiquement en cas de décalage.
Cela signifie que si un élément a de la place à côté d’un autre, il s’y positionne. Sinon, il passe en
quelque sorte « à la ligne », se positionne en dessous de l’élément qui le précède, puis se décale
Manuel de prise en main Web Creator Pro 6 Nouveaux paramètres Flottant et Retour
Page 25 sur 39
suivant son paramètre de flottaison, à gauche ou à droite. S’il rencontre un obstacle, il arrête son
décalage. S’il passe sous un trou, il continue suivant la même direction horizontale sans se « ranger ».
Dans l’illustration suivante, vous voyez en haut trois boutons à Flottant gauche, ajustés à la taille de
leur parent, un panneau. Ils sont donc bien alignés sur une ligne.
Dans la vue du milieu, la taille du panneau conteneur a été réduite en largeur. Le troisième bouton,
ne tenant plus sur la rangée du haut, est alors passé automatiquement en dessous de l’élément qui
le précède.
Dans la vue du bas, c’est la taille du bouton de droite qui a été élargie. Ne tenant plus sur la largeur
du panneau, il est donc passé aussi en dessous.
Dans l’illustration suivante, les boutons ont une hauteur décroissante.
Manuel de prise en main Web Creator Pro 6 Nouveaux paramètres Flottant et Retour
Page 26 sur 39
Dans la deuxième vue, lorsque la largeur du panneau est réduite, le bouton 4 n’ayant plus de place se
décale sous l’élément qui le précède immédiatement, le 3 et son paramètre Flottant le décale à
gauche jusqu’à s’arrêter contre l’élément 2, plus dont la bordure inférieure est plus basse que celle
du bouton 3.
Dans la troisième vue, lorsque l’on réduit encore la largeur du panneau, le bouton 4 n’ayant plus de
place à droite, se décale alors sous l’élément n° 2, puis part vers la gauche et s’arrête contre le 1.
Dans l’illustration suivante, nous avons réduit encore la taille du panneau.
C’est le bouton 3 qui est affecté en premier. Ne tenant plus en largeur, il passe donc sous le 2,
puisque c’est l’élément qui le précède, et en se calant à gauche, bute contre le 1. Ensuite, c’est au
tour du 4 qui, ne tenant pas à droite du 3, passe en dessous de lui et se décale vers la gauche pour
buter contre le bord du panneau conteneur et se positionner ainsi sous le bouton 1, mais en restant
aligné sur la bordure inférieure du bouton 3.
Vous remarquez le trou situé sous le bouton 1. On pourrait penser qu’il est dû au fait que le bouton 4
est trop large pour « remonter » et se coller au bouton 1.
Comme nous l’avons expliqué plus haut il n’en est rien : une fois qu’un élément s’est calé sous son
élément précédent et qu’il commence à se décaler à gauche ou à droite, il ne remonte plus, mais
continue sur la même ligne horizontale.
Ainsi, comme vous le voyez sur l’illustration suivante, si l’on réduit la largeur de l’élément 4, il reste
toujours aligné à gauche et sa bordure supérieure alignée sur la bordure inférieure de l’élément 3,
celui qui le précède.
Dans les 3 exemples qui suivent, quelle que soit la hauteur et la largeur des éléments précédents par
rapport aux numéros 4 et 5, le mode de placement est le même : tant qu’il peut, l’élément reste à
droite de son précédent. Quand il ne peut plus, il se place sous l’élément précédent puis se cale le
plus à gauche possible en restant aligné horizontalement.
Manuel de prise en main Web Creator Pro 6 Nouveaux paramètres Flottant et Retour
Page 27 sur 39
Exploiter au mieux le paramètre Flottant
Au vu des explications précédentes, il apparaît évident que la meilleure manière d’exploiter ce mode
de positionnement automatique, fourni par le paramètre Flottant, est de créer dans un même
conteneur des éléments qui soient tous de la même hauteur, et pour de raisons esthétiques, de
largeurs complémentaires par rapport à la largeur totale du conteneur. Ainsi lorsque vous
redimensionnez le conteneur, les éléments pourront bouger et changer de place automatiquement,
tout en conservant une apparence uniforme au conteneur sans créer de trous entre les éléments.
On pourrait être tenté de remplir les trous avec des éléments sans leur appliquer le paramètre
« floating ».
Cependant ces éléments seraient incapables de changer de place automatiquement lors du
redimensionnement du conteneur et créeraient alors de nouveaux trous de manière complètement
aléatoire.
Ajout d’un élément Flottant
Lorsque vous créez ou positionnez un élément au-dessus d’un ensemble d’éléments dotés de
l’attribut Flottant, le nouvel élément, n’ayant pas cet attribut, vient se placer à l’endroit où vous le
posez, au premier plan. (assurez-vous d’avoir intégré le nouvel élément dans le conteneur souhaité,
en le glissant ou en le déplaçant un peu au-dessus de ce conteneur, ou par un clic droit puis Ajouter
au Parent/Nom du parent).
Si vous activez maintenant son attribut Flottant, l’élément ira se positionner automatiquement à la
seule place possible en tant que dernier élément du groupe de flottants : à droite ou à gauche de
Manuel de prise en main Web Creator Pro 6 Nouveaux paramètres Flottant et Retour
Page 28 sur 39
l’ex-dernier élément, ou bien, s’il n’y a pas de place, sous l’ex-dernier élément, puis calé le plus à
gauche ou à droite suivant l’attribut choisi.
Vous pouvez dès lors déplacer ce nouvel élément pour le positionner ou vous voulez, en suivant les
explications à venir.
Déplacer des éléments flottants
Vous l’avez constaté : l’ordre des éléments flottants a une grande importance et détermine la
réaction de chaque élément au changement de forme du conteneur ou à l’arrivée d’un nouvel
élément. Le déplacement des éléments flottants diffère donc quelque peu de celui des éléments
« libre ». A l’intérieur du conteneur, cliquez comme d’habitude sur l’élément à déplacer, puis
commencez à le déplacer. Dès que le curseur de la souris arrive à la limite d’un autre élément, une
barre verticale bleue apparaît. Elle indique le nouvel emplacement. Si la barre est à droite, l’élément
se placera après l‘autre, si elle est à gauche, l’élément se placera avant.
Faites bien attention au fait que, suivant les principes de positionnement expliqués précédemment,
l’agencement des différents éléments risque parfois de se trouver fortement modifiée par le
déplacement d’un seul.
Les applications du paramètre Flottant
L’utilisation du paramètre Flottant est indiquée dans deux cas principaux :
1) Pour la présentation d’éléments de même type. Le meilleur exemple est celui des fiches produits. Sur
une page, un conteneur de type panneau va par exemple contenir des boîtes, toutes de la même
taille, et présentant toutes la photo et le descriptif rapide d’un article en vente, d’une recette de
cuisine ou d’un personnage célèbre, suivant le sujet du site. Chaque boîte aura un paramètre Flottant
gauche et ainsi lors de l’ajout ou du retrait d’une fiche, ou du redimensionnement du panneau
contenant les fiches, celles-ci garderont une organisation impeccable.
Ci-dessous un exemple de galerie de compositeurs dans deux dispositions différentes obtenues par
simple modification de la forme du parent.
Manuel de prise en main Web Creator Pro 6 Nouveaux paramètres Flottant et Retour
Page 29 sur 39
L’autre utilisation courante se fait dans le cadre de la mise en page même du site, au niveau de
l’organisation du conteneur Page : un panneau va contenir le logo, en haut à gauche ; sur la même
ligne, plus à droite, une image en guise de bannière et encore plus à droite l’indication du logiciel de
création. Les trois éléments sont contenus dans un panneau et sont de la même hauteur. Le fait de
leur appliquer un « floating left » aligne automatiquement les éléments à gauche du panneau,
évitant le souci du positionnement manuel. Ensuite en dessous, il ne reste qu’à installer des
panneaux ou des boîtes de taille complémentaires par rapport à la largeur de la page, et de hauteur
similaire ou multiple.
Manuel de prise en main Web Creator Pro 6 Nouveaux paramètres Flottant et Retour
Page 30 sur 39
Vous pouvez voir ici l’entête avec les 2 logos et l’image, puis en dessous le menu, puis dans le corps
de la page, 4 panneaux de même largeur, et de même hauteur 2 à 2, intitulés Bloc 2x1 et Bloc 2x3.
La notion de Blocs, une autre des nouveautés importantes de Web Creator Pro 6, est présentée dans
le chapitre Création et utilisation des blocs.
Le paramètre « Retour »
En complément du paramètre Flottant, le paramètre « Clear » pour « Retour », fait en sorte que
l’élément flottant considéré se place automatiquement à la ligne suivante des éléments flottants qui
Manuel de prise en main Web Creator Pro 6 Création et utilisation des blocs
Page 31 sur 39
le précèdent, même s’il y a de la place à droite (pour les Flottants gauche) ou à gauche (pour les
Flottants droit).
Cela permet de disposer automatiquement les éléments les uns sous les autres, comme avec un
« Retour chariot », par exemple pour créer une colonne d’objets calée à gauche ou à droite de la
page ou du conteneur parent.
Si, pour des raisons de place, des éléments ou conteneurs ne peuvent tenir que les uns sous les
autres dans une page (pour une question de largeur), ou si c’est simplement la disposition que vous
avez choisie, cet attribut vous assure que même en cas de redimensionnement de la page, la
disposition que vous aurez choisie restera la même.
Cela sera très pratique par exemple pour la consultation de votre site sur un téléphone portable,
lorsqu’à la rotation de l’écran, l’affichage passe de vertical à horizontal ou inversement.
Attention, même s’il est toujours activable, l’attribut Retour n’est bien sûr opérant que sur des
éléments dotés d’un attribut flottant.
Création et utilisation des blocs
Présentation des blocs
Les Blocs sont une évolution de la notion de Groupes de Web Creator. Ces derniers sont, rappelons-
le une réunion logique d’éléments, permettant par exemple de les verrouiller pour empêcher leur
modification, ou de sélectionner plusieurs éléments en sélectionnant le groupe.
Un Bloc est un outil permettant de stocker un ensemble d’éléments réunis afin de les réutiliser à un
autre emplacement, dans une autre page ou un autre projet.
Création d’un bloc
Même si cela n’est pas obligatoire, il est largement préférable de créer un bloc sur la base d’un
conteneur, panneau ou boîte afin de disposer facilement d’un élément de dimensionnement et de
manipulation du bloc. La possibilité d’appliquer un paramètre de flottaison au conteneur comme
nous l’avons vu précédemment, permettra de plus d’aligner et de positionner automatiquement tous
les éléments contenus dans le bloc juste en positionnant ce dernier.
Pour l’exemple, créez donc un panneau sur votre page. Définissez éventuellement le paramètre de
flottaison de votre bloc, via la Barre des propriétés, onglet Propriétés, section Options, paramètre
floating (ceci n’est pas très utile pour cet exemple, mais il sera préférable de le faire à ce stade de la
création du bloc, lors de la mise en place de votre page réelle).
Manuel de prise en main Web Creator Pro 6 Création et utilisation des blocs
Page 32 sur 39
Disposez ensuite indifféremment divers éléments, comme un titre, une puce, un entête, une ou deux
colonnes de texte, une image d’illustration, un lien vers un réseau social et un bouton de lien, comme
dans l’illustration suivante.
Une fois les différents éléments agencés, vous allez sauvegarder l’ensemble en tant que bloc, et
surtout le stocker afin de pouvoir le réutiliser plus tard.
Pour ce faire, sélectionnez le panneau ou la boîte contenant tous les éléments (en cliquant sur une
de ses zones vides, sur sa bordure, ou sur son nom dans la Liste des éléments), puis dans la Liste des
éléments, ouvrez l’onglet Blocs, puis le sous-onglet Personnalisés. En haut de l’onglet, cliquez sur
l’icône « + ». Aussitôt, vous voyez apparaître en bas de l’onglet Personnalisés un nouvel élément
intitulé « ItemX » ou X représente un numéro d’ordre.
Voilà, votre bloc est créé. En cliquant deux fois sur son nom, vous pouvez le renommer.
Ainsi, vous pouvez de la même manière créer par exemple un bloc d’entête complet, que vous allez
réutiliser sur toutes les pages de votre site, sans avoir à le recomposer à chaque fois.
Si vous créez une variation que vous voulez tester ou utiliser pour un autre site, vous pouvez la
sauvegarder aussi et bénéficier ainsi d’un gain de temps énorme tout en évitant les erreurs de
création.
Manuel de prise en main Web Creator Pro 6 Transparence et luminosité
Page 33 sur 39
Réutilisation d’un bloc
Si vous changez maintenant de page ou même de projet, et que vous retournez dans la Liste des
éléments, onglet Blocs/Personnalisés, vous retrouvez le bloc récemment créé. Lorsque vous le
sélectionnez, le bouton Ajouter à la page devient actif. Si vous cliquez dessus, le bloc entier est alors
transféré dans la page courante avec ses différents éléments disposés comme dans l’original.
Précautions d’utilisation des blocs
Si aucun élément conteneur n’est sélectionné, un nouveau bloc sera toujours inséré dans la page
courante qui sera donc son parent direct. Cela conviendra pour de gros blocs que vous voulez utiliser
pour aménager une page.
Par contre - et ce qui serait préférable - vous pouvez aussi avoir déjà structuré votre page en
plusieurs gros conteneurs, des panneaux par exemple, et vouloir maintenant aménager chacun d’eux
avec plusieurs blocs.
Avant de les insérer, veillez donc à toujours sélectionner le conteneur de destination souhaité,
Panneau ou Boîte, afin qu’il s’y place directement. Sinon, comme nous l’avons dit, le bloc sera intégré
dans la page, et vous devriez ensuite le déplacer pour l’intégrer au conteneur.
En résumé : si un élément simple est sélectionné ou qu’aucun élément n’est sélectionné, le bloc sera
créé dans la page avec la page comme parent.
Si un autre conteneur, Panneau ou Boîte est sélectionné, le bloc apparaîtra dans ce conteneur qui
deviendra alors son parent.
Taille des blocs idéale
Les modèles fournis avec Web Creator Pro 6 se basent sur des multiples de 240 pixels de large,
considéré comme l’unité de taille. Il existe ainsi des blocs de taille de 240, 480, 720 et 960 avec les
différentes combinaisons largeur x hauteur, soit 16 type de blocs.
Les pages web actuelles ont généralement une largeur totale de 960. Cette taille a donc été reprise
comme taille par défaut dans Web Creator Pro 6. Cela permet donc de créer 4 blocs en largeur, ce
qui donne un espace suffisant pour combiner divers éléments. Rien ne vous empêche bien sûr de
créer des blocs de taille inférieure à 240.
Comme nous l’avons vu au chapitre traitant des conteneurs et du « floating », gardez à l’esprit que la
somme des largeurs de blocs doit être égale à la largeur de votre page et que les blocs d’une même
ligne doivent avoir la même hauteur ou des hauteurs décroissantes par multiples.
Transparence et luminosité
Web Creator Pro 6 vous permet de gérer la transparence et la luminosité sur les conteneurs de type
Boîtes et Panneaux précédemment évoqués, mais aussi sur les textes, les images, les boutons, etc…
Ceci permet d’appliquer indirectement ces effets sur d’autres éléments de type image par exemple,
sans avoir à les modifier directement et en permettant des modifications rapides au niveau du site
par simple modification des effets sur les conteneurs.
Manuel de prise en main Web Creator Pro 6 Les onglets
Page 34 sur 39
Pour accéder à ces paramètres, sélectionnez l’élément souhaité, puis, dans la Barre des propriétés,
onglet Elément, cliquez sur l’icône en forme de palette de peinture. Au bas de la boîte de choix de
couleur qui s’ouvre, vous pourrez modifier les paramètres de luminosité et de transparence.
Faites plusieurs essais pour tester les nombreuses variations possibles, notamment lors de la
superposition d’éléments avec des paramètres différents.
Les onglets
Les éléments Onglets permettent de placer sur votre page une zone délimitée dans laquelle vous
voulez affichez une ou plusieurs pages web appartenant à votre site ou à un site externe.
L’affichage de ces pages se fait dans une boîte à onglets, d’où son nom, à affichage horizontal et où
chaque onglet correspond à une page. Ceci permet donc d’afficher d’autres pages de partenaires ou
d’information, sans remplacer la page courante et sans ouvrir de nouvelle page.
La taille des pages affichées dans les onglets ne sera pas modifiée et des barres de défilement seront
disponibles pour se déplacer dans la page. La navigation sera quant à elle la même que lors de la
consultation « normale » du site en pleine page.
Manuel de prise en main Web Creator Pro 6 L’accordéon
Page 35 sur 39
L’accordéon
Les éléments Accordéons peuvent être apparentés à des barres de titre empilées les unes sur les
autres. Lorsque vous cliquez sur une barre, une zone de visualisation s’ouvre en dessous, laissant
apparaître généralement un texte ou une image ou une combinaison de différents éléments.
Dans Web Creator Pro 6, vous associerez donc généralement à chaque titre une page spécialement
créée à cet effet.
La différence avec les éléments Onglets réside dans le fait que les entêtes permettant de passer
d’une page à l’autre sont les uns au-dessus des autres et que l’accordéon ne permet d’afficher que
des informations ou des pages propres au site.
L’élément Réseaux sociaux
Comme son nom l’indique, cet élément vous permet d’intégrer rapidement des liens vers une liste
prédéfinie de Réseaux sociaux : Facebook, Twitter, Google+, Delicious, Reddit, Stubleupon, Tumblr,
Linked In et Digg. Vous pouvez définir quelques paramètres supplémentaires comme le nom de
l’élément, sa couleur, son orientation, etc…
Les fenêtres Pop-up
Elles permettent d’afficher une autre page web en surimpression de la page actuelle, suite à une
action spécifique sur un élément de la page courante (clic, survol, etc…).
Les éléments Carte Google
Vous pouvez afficher dans votre site la carte Google Map d’une adresse donnée, ainsi que sa vue
depuis la rue ou la vue par satellite. Une fois l’élément intégré, vous pouvez le redimensionner à la
taille voulue et surtout saisir l’adresse précise dans la Barre des propriétés, onglet Elément.
Manuel de prise en main Web Creator Pro 6 Traduction Google
Page 36 sur 39
Traduction Google
Cet élément donne la possibilité à vos visiteurs de traduire instantanément le contenu de votre site
dans leur langue. L’élément est composé d’une simple liste déroulante dans laquelle le visiteur
choisira la langue dans laquelle il veut traduire votre site.
Google Analytics
Puissants outils marketing, ils vous permettent de suivre et d’analyser la fréquentation, au travers
des données relatives au trafic sur votre site, afin d’augmenter sa portée et le ciblage de vos futurs
visiteurs. La mise en œuvre se fait via le menu Web et sa section Référencement. Vous trouverez au
même endroit la gestion des Métatags, des Titres H1 à H6 et des informations Sitemap permettant
d’indiquer les fréquences de mises à jour aux moteurs de référencement.
Les éléments Iframe
Voici une autre possibilité d’afficher une page web interne ou externe dans une zone délimitée de la
page courante, en définissant différents paramètres d’affichage, comme le nom, la couleur, la taille,
la présence de barres de défilement, etc…
Paypal
Permet d’insérer un lien vers un compte Paypal pour initier un paiement sécurisé en ligne. Dans
l’onglet Elément de la Barre des propriétés, vous pouvez définir le type de lien : Ajout au panier,
Affichage du panier Paypal ou Achat.
Vous définissez ensuite le courriel du compte Paypal, le nom et le prix du produit, et si plusieurs
produits peuvent être achetés.
Manuel de prise en main Web Creator Pro 6 Ouverture des projets
Page 37 sur 39
Les éléments améliorés
Ouverture des projets
Au démarrage de Web Creator Pro 6, la fenêtre d’ouverture de projets vous propose
automatiquement la liste et l’aperçu des derniers projets sur lesquels vous avez travaillé, ainsi
qu’une arborescence de votre ordinateur permettant d’effectuer directement la recherche manuelle
d’un projet.
Pour plus de détails, consultez plus haut la partie consacrée au menu Fichier.
Les groupes
Comme dans Web Creator 5, les groupes sont toujours des associations logiques d’éléments, servant
à cacher ou à afficher plusieurs éléments en même temps ou à empêcher leur modification.
Dans les versions précédentes de Web Creator, les groupes servaient aussi à modifier l’ordre
hiérarchique des éléments dans la page (Z-order). L’ordre est maintenant directement géré par les
flèches haut et bas situées en haut de la liste des éléments, à droite de la zone Filtre.
Vous pouvez définir un groupe en sélectionnant plusieurs éléments puis en cliquant sur le bouton de
droite et en choisissant la commande Grouper/(Nouveau).
Pour accéder aux propriétés d’un groupe, cliquez sur l’intitulé Vue hiérarchique des éléments de la
page située en haut de la Liste des éléments. Sélectionnez alors Voir les groupes d’éléments et leur
contenu.
Manuel de prise en main Web Creator Pro 6 Les images
Page 38 sur 39
Dans la vue hiérarchique du haut, vous pouvez afficher ou cacher le groupe et ses éléments (icône
Œil). Vous pouvez aussi verrouiller le groupe ou ses éléments (icône cadenas).
Dans la zone inférieure, vous pouvez renommer le ou les groupes, définir la visibilité dans le
navigateur et ajouter ou retirer des éléments.
Si vous sélectionnez ici un élément du groupe, vous pouvez aussi accéder directement à ses
propriétés, actions, Liens, etc...
Les images
Depuis l’onglet Elément de la Barre des propriétés, vous pouvez maintenant déclencher l’affichage
maximisé d’une image par un simple clic sur une icône ou sur l’image elle-même. Vous pouvez
définir la taille qu’aura alors l’image maximisée.
Manuel de prise en main Web Creator Pro 6 Les boutons
Page 39 sur 39
Les boutons
Outre les options regroupées dans la Barre des propriétés, le texte est modifiable directement sur le
bouton par un double-clic.
Les sons
Un élément de type son est maintenant représenté par une barre de lecture, identique à celle qui
s’affichera dans le navigateur. Le son peut aussi être écouté directement en mode édition, depuis
l’onglet Elément de la Barre des propriétés. Les formats sonores courants sont utilisables et vous
choisissez l’interface de lecture Flash Vidéo, Windows Média ou QuickTime.
Manuel de prise en main Web Creator Pro 6 Les vidéos
Page 40 sur 39
Les vidéos
La vidéo est directement visualisable en mode édition depuis la Barre des propriétés, onglet
Elément. Les formats courants sont utilisables et vous pouvez choisir l’interface de diffusion parmi
Flash Vidéo, Windows Media, QuickTime ou HTML5.
Les éléments Texte
Les hyperliens sur du texte sont maintenant bien plus faciles à définir et configurer via le bouton Lien
du menu Accueil.
Manuel de prise en main Web Creator Pro 6 Référencement et balises de titres
Page 41 sur 39
La transparence et la luminosité de l’arrière-plan du texte peuvent maintenant être réglées,
permettant ainsi des effets visuels de superposition efficaces (Propriétés des
éléments/Eléments/Couleur de fond).
Référencement et balises de titres
La gestion du référencement est maintenant améliorée avec le regroupement des métatags (mots
clés), des balises titres H1 à H6, de Google analycs et du Sitemap dans le menu Web section
Référencement.
Les 6 balises de titres H1 à H6 sont paramétrables pour l’ensemble du projet ou chacune
individuellement pour la page en cours (Web/Référencement/Titres).
![Intro to Catalogue Creator...Creator Switch Pro]ect product Catalogues Enterprise / Manufacturer Tools Prod u Cts Undo Redo < No Name > [ ] Data Import Utilities Publish Price](https://img.pdfslide.net/doc/110x75/5ecd3a55e758c102e87a91cc/intro-to-catalogue-creator-creator-switch-proect-product-catalogues-enterprise.jpg)
