Manuel
Manuel
Manuel
1 — Concession de licence
La présente convention vous permet d’utiliser une copie du logiciel, dont les droits d’utilisation ne
concernent qu’un seul produit. Le logiciel est en service sur un ordinateur quand il est installé tem-
porairement dans la mémoire vive (ou RAM) ou quand il est installé dans la mémoire permanente (par
exemple sur le disque dur, ou sur tout autre support de mémorisation) de cet ordinateur. Vous ne
pouvez utiliser le logiciel en réseau que si vous avez acheté une copie pour chaque utilisateur.
4 — Limite de responsabilités
En aucun cas Mindscape ne pourra être tenu pour responsable des dommages indirects, particu-
liers, accidentels ou financiers résultant de l’utilisation et de l’impossibilité d’utiliser le produit, même
si Mindscape a été prévenu de l’éventualité de tels dommages. La responsabilité de Mindscape ne
pourra en aucun cas excéder la somme payée pour l’achat du logiciel. Enfin, certaines juridictions
n’autorisant ni l’exclusion, ni la limite de la responsabilité pour des dommages indirects ou acciden-
tels, les limites exprimées ci-dessus peuvent ne pas vous concerner.
© 2006 Mindscape
Sommaire
Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Quoi de neuf dans Web Creator 4 ? . . . . . . . . . . . . . . . . . . . . . . . . . .7
Considérations générales sur l’interface . . . . . . . . . . . . . . . . . . . . . . . .9
Onglets pour l’édition et la visualisation . . . . . . . . . . . . . . . . . . . . . . . .9
Panneaux Éléments, Couleurs et Pages du projet . . . . . . . . . . . . . . .10
L’onglet élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10
Onglet Couleurs du modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
L’onglet Pages du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
Le panneau Bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Sélection des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Le projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 1
Votre site web en 30 mn ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27
Présentation de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Généralités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Les modèles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Les onglets d’édition et de prévisualisation . . . . . . . . . . . . . . . . . . . .30
Les panneaux Éléments, Couleurs et Pages du projet. . . . . . . . . . . .30
Le panneau Bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Personnalisez le modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Insérer des images, du son, de la vidéo . . . . . . . . . . . . . . . . . . . . . . .36
Insérez une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37
Insérer du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
Modifier les attributs du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41
Intégrer des éléments Excel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46
Intégrer des cellules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46
Intégrer un graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48
Créer et paramétrer une nouvelle page . . . . . . . . . . . . . . . . . . . . . . . .50
Créer une nouvelle page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50
Dupliquer une page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
Créer un lien d’une page à l’autre . . . . . . . . . . . . . . . . . . . . . . . . . . . .53
Tester votre site avec Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . .55
Un premier test . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Visualiser dans Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Mettez votre site en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
L’hébergement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .56
Le transfert sur le web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
2 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Installation et mise à jour
Installation et désinstallation
Installation
Insérez le cédérom dans le lecteur. L’interface de navigation Mindscape
devrait démarrer automatiquement. Si ce n’est pas le cas, accédez à votre
unité de cédérom dans l’Explorateur ou le Poste de Travail de Windows et
double-cliquez sur « eautorun.exe » situé à la racine du disque, ce qui char-
ge la page d’enregistrement de Mindscape.
Cet enregistrement est gratuit et n’est pas obligatoire. Il vous permet de
bénéficier d’offres spéciales et d’être tenu au courant régulièrement de l’ac-
tualité de nos produits.
Une fois cette page refermée, vous accédez à l’interface du navigateur
Mindscape, permettant d’installer le programme, de consulter le manuel en
format numérique et éventuellement d’accéder à des didacticiels de pré-
sentation ou à des informations en liaison avec nos partenaires.
Cliquez donc sur le premier bouton pour installer le programme. Après
quelques secondes de préparation, une première boîte de dialogue appa-
raît. Elle vous permet de choisir le dossier de destination où les composants
du logiciel seront installés. Ces composants sont :
• Le logiciel, son aide et ses bibliothèques.
• .NET Framework de Microsoft. C’est le nouvel environnement de pro-
grammation de Microsoft. Si vous l’avez déjà installé, notre logiciel ne
vous demandera pas de le refaire. Cette installation sera valable pour les
autres logiciels qui vont de plus en plus utiliser cet environnement.
• Quick Time (nécessaire si vous prévoyez d’utiliser des formats que seul
QuickTime peut lire). Les options par défaut conviennent bien, et vous
n’êtes pas obligé de vous identifier. Il vous sera toujours possible d’ins-
taller QuickTime plus tard si vous rencontrez un fichier qui en a besoin.
Vous pouvez conserver le chemin défini par défaut (C:\Program
Files\Mindscape\Web Creator Pro 4) ou en sélectionner un nouveau en cli-
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 3
quant sur le bouton Parcourir. Un clic sur le bouton Suite déclenche le pro-
cessus de transfert des fichiers sur votre ordinateur. Vous pouvez ensuite
placer un raccourci sur le bureau de Windows avant que la fin de l’installa-
tion ne vous soit confirmée. Vous êtes ensuite invité à démarrer automati-
quement le programme.
Désinstallation
Le logiciel peut être désinstallé en cliquant sur la commande Désinstaller
dans le Groupe Mindscape/Web Creator 4 du menu Démarrer de Windows.
Notez que seul le logiciel sera désinstallé. Les composants .NET et
QuickTime peuvent être retirés depuis le Panneau de configuration de
Windows.
Premier démarrage
Parallèlement à l’affichage d’une page de présentation du programme, ce
dernier démarre et la boîte de dialogue d’activation s’affiche.
4 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Les numéros de série et la clef d’enregistrement sont inscrits à l’arrière du
manuel d’utilisation pour un produit acheté en boîte ou bien ils vous auront
été fournis en même temps que votre version téléchargée.
Enregistrement
Comme nous venons de le voir, pour avoir une version complètement opé-
rationnelle du logiciel, il faut fournir deux numéros : un numéro de série,
accompagné d’une clé numérique. Chaque logiciel doit avoir une paire
unique de ces numéros.
Ceux-ci sont donc inscrits à l’arrière du manuel d’utilisation de votre produit
acheté en boîte ou bien ils vous auront été fournis en même temps que
votre version téléchargée.
Vous devez vous enregistrer sur le site de LMSOFT pour profiter des mises
à jour gratuites et de remises pour de nouveaux produits.
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 5
Si vous n’avez pas pu pour une raison quelconque enregistrer le produit
après l’installation, et que vous avez besoin de vous enregistrer auprès de
LMSOFT allez à www.lmsoft.com/enregistrement. Vous pourrez procéder à
l’enregistrement quand vous le voulez.
6 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Présentation générale
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 7
• Éditeur RSS-XML dans la version Pro, permettant ainsi de faire des
Podcasts.
• Objets Web dans la version Pro : pour inclure du code externe et en
positionner les aspects graphiques sur la page
• Barre d’accès rapide aux éléments de la bibliothèque permettant d’ajou-
ter les éléments graphiques d’un simple clic : cadres, verres colorés,
macarons, bannières…
• La version Pro dispose en plus d’une catégorie Mes éléments pour gar-
der les éléments souvent utilisés dans un projet et les utiliser rapidement.
• Génération du fichier SiteMap, la nouvelle norme de référencement,
pour optimiser la visibilité et le classement des sites.
• Suppression de l’étape de préparation pour le web lors de l’enregistre-
ment et modification majeure au code généré : chaque page est enre-
gistrée directement en HTML.
• Modification du code pour que le texte et les liens d’une page soient
dans une première partie en HTML. Les effets visuels et interactifs sui-
vent en Javascript. Ceci a pour effet de rendre les pages plus compa-
tibles avec les différents navigateurs et plus facilement visibles par les
moteurs de recherche.
• Abonnement gratuit et illimité à une version spéciale de Web Elixir pour
effectuer un contrôle de qualité du site (orthographe et liens brisés) lors
de la construction, des mises à jour et une fois par mois automatique-
ment.
8 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Considérations générales sur l’interface
L’interface du logiciel brille par sa simplicité. Elle fait appel aux plus récentes
technologies en matière d’ergonomie et permet à l’usager de personnaliser
l’interface en fonction de ses besoins ou habitudes. Placez la souris sur les
menus ou icônes et cliquez dessus.
• Les menus : comprend Fichier, Édition, Affichage, Insertion, Format,
Fenêtre et Aide,
• Barre d’outils : l’interface de Web Creator offre deux barres d’outils qui
permettent un accès rapide aux principales fonctions du logiciel. Vous
pouvez disposer les barres d’outils comme bon vous semble dans l’in-
terface de Web Creator.
La première donne accès aux fonctions de gestion des fichiers et des élé-
ments multimédias.
• Éditer : Pour créer vos pages web, y insérer des éléments multimédias
(images, texte, boutons, vidéos, etc.), modifier leurs propriétés.
• Éditer le HTML et Javascript : Ce mode est réservé à ceux qui ont cer-
taines connaissances en programmation. Il n’est pas nécessaire de vous
en servir pour travailler normalement avec le logiciel. Parmi les usages
possibles, on peut mentionner la possibilité d’effectuer des validations
plus précises dans les champs d’entrée de texte des formulaires, ou
ajouter des fonctionnalités complémentaires en JavaScript.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 9
• Prévisualisation dans Internet Explorer : Ce mode permet de visualiser la
page en cours telle qu’elle apparaîtra dans les navigateurs des visiteurs
du site. Notons que les liens ne sont pas actifs dans ce mode. Vous
pouvez visualiser votre site en conditions réelles via la commande
Affichage/Visualiser avec Microsoft Internet Explorer.
L’onglet élément
10 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Dans l’onglet Éléments, la liste des éléments n’apparaît qu’en mode Edition.
La séquence des éléments représente l’ordre de superposition des élé-
ments sur la page lors du chargement. Vous pouvez changer l’ordre en cli-
quant sur un élément puis sur les flèches à droite, ce qui aura pour effet de
le déplacer dans la liste. Cliquer une fois sur un élément a pour effet de le
sélectionner. Double cliquer ouvrira la boîte de propriétés de l’élément.
Vous pouvez aussi modifier l’ordre de superposition des éléments sur une
page par un simple glisser/déposer. Par exemple, pour une image de fond
d’écran, celle-ci doit se trouver tout en bas de la liste des éléments d’une
page. Sinon, elle les masquera. Cliquez, en maintenant le bouton gauche
de la souris, sur le nom de l’élément, puis déplacez-le.
Pour chaque élément d’une page, ses propriétés apparaissent de la façon
suivante :
• par ordre alphabétique, en cliquant sur l’icône ;
• par groupe de propriétés en cliquant sur l’icône ;
• l’icône permet de rendre invisible un élément en mode édition. Cette
fonction est très pratique lorsque vous travaillez par exemple avec des
images qui servent de bouton transparent.
• l’icône permet de verrouiller les propriétés d’un élément. Très utile
pour éviter par la suite toute fausse manipulation !
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 11
Onglet Couleurs du modèle
12 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Personnaliser la charte graphique de votre site
Pour adapter exactement la charte graphique de votre entreprise aux cou-
leurs de votre société, vous allez créer votre propre palette de couleurs.
Dans la Barre de sélection, cliquez sur l’onglet Couleurs du modèle. Dans
la zone Ficher, cliquez sur le bouton Sélection d’une palette . La fenêtre
éponyme s’affiche. Cliquez sur le bouton Nouvelle pour créer une nouvelle
palette de couleurs. Attribuez-lui un nom. Dans la fenêtre Sélection d’une
palette, sélectionnez-la puis cliquez sur le bouton OK.
De retour dans la Barre de sélection, dans l’onglet Couleurs du modèle,
vous pouvez modifier les couleurs primaires, secondaires, etc. de votre
palette personnelle. Pour chaque couleur à modifier, cliquez sur son nom
pour la sélectionner, par exemple Couleur primaire. Dès lors, le bouton
.icone trois points.bmp s’affiche. Cliquez dessus. La fenêtre Couleur s’af-
fiche. Sélectionnez une couleur soit :
• parmi les couleurs de base,
• en sélectionnant une couleur particulière dans la mire,
• en extrayant une couleur. En faisant sortir le curseur de la souris de la
fenêtre Couleur, celui-ci se transforme en pipette. Cliquez n’importe où
dans l’écran, sur la couleur de votre choix. Celle-ci s’affiche dans la zone
Couleur Unie. Vous pouvez enregistrer cette couleur en cliquant sur le
bouton Ajouter aux couleurs personnalisées. Vous pourrez ainsi la réuti-
liser dès que vous ouvrirez à nouveau la fenêtre Couleurs.
Style : On peut remplacer la palette d’un modèle par une de celles de la
liste. L’application des nouvelles couleurs peut prendre quelques secondes.
On peut également modifier chaque couleur individuelle en cliquant à droi-
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 13
te. On verra apparaître un sélecteur de couleur classique doublé d’une
pipette qui permet « d’extraire » une couleur n’importe où à l’écran. Cette
fonction est très pratique pour harmoniser le site avec la charte de couleur
de sa société ou le sujet traité.
De plus, vous pouvez modifier la transparence de chaque couleur. Cliquez
sur l’icône + devant le nom de chaque couleur, puis modifiez la valeur de la
transparence.
14 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Attention La suppression d’une page est une opération délica-
te. En effet, les liens provenant d’autres pages qui y
menaient tomberont dans le vide, générant des mes-
sages d’erreur lors de la préparation pour le web.
Le panneau Bibliothèque
Situé en bas de l’écran, il vous donne un accès immédiat aux différents
objets multimédias que vous pouvez insérer dans votre projet, présentés
sous forme d’arborescence.
Dès que vous cliquez sur un dossier, son contenu apparaît en aperçu, ou
un symbole pour les sons. Un double-clic sur un objet l’insère dans la page
courante. Une fois l’objet inséré, vous pouvez, comme pour tout élément,
accéder à ses propriétés en double-cliquant dessus.
La catégorie Bouton, qui semble bien vide, vous permet en fait de créer une
infinité de modèles de boutons. Pour ce faire, cliquez sur le signe « + » situé
au dessus, ce qui ouvre la boîte d’édition des boutons.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 15
Vous créez donc ici la forme du bouton ou du pictogramme sous ses dif-
férents états, relevé, pressé et survol. Vous ne pouvez pas changer ici la
couleur, car vous créez en fait un modèle de bouton. Cependant, une fois
inséré dans le projet, l’appel de la boîte de ses propriétés vous permettra
de modifier encore bien des caractéristiques.
16 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Une autre catégorie, « Mes éléments », permet de regrouper des objets
dont vous pensez avoir besoin souvent, vos favoris. Pour les ajouter, il vous
suffit simplement de les sélectionner en cliquant dessus sur la page acti-
ve, puis de cliquer sur le bouton « + » situé au dessus de la fenêtre de la
catégorie « Mes éléments ».
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 17
Le projet
La méthode de développement est la page. Un projet est constitué d’une
ou plusieurs pages reliées entre elles par des liens.
Chaque page peut contenir des éléments multimédias tels que :
• Images
• Textes
• Sons
• Animations et vidéos
• Boutons et menus de navigation
• Formulaires
• Menus personnalisés
Un projet se construit en partant d’une première page dans laquelle vous
placez des éléments. Vous pourrez associer diverses actions à ces élé-
ments :
• Délais et effets d’apparition
• Interaction entre les éléments sur une même page
• Liens vers d’autres pages
Tant que vous êtes en mode édition, il n’est pas nécessaire de déplacer ou
convertir les éléments multimédias. Vous ne faites que pointer sur les
fichiers là où ils se trouvent sur votre ordinateur. Les copies, dimensionne-
ments et conversions seront effectués automatiquement lors de la prépa-
ration pour le web.
18 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Pour démarrer
Principe du logiciel
Un site web est constitué de pages reliées entre elles. Le principe du logi-
ciel consiste à définir un projet, à créer les pages qui le constituent et à
ajouter des éléments graphiques et de navigation dans ces pages.
Voici une première démarche de prise de contact qui vous aidera à com-
prendre rapidement le principe du logiciel. Vous trouverez également un
mini tutoriel sur ce sujet dans l’option Premiers pas du menu Aide.
1. Commencez par créer un nouveau projet avec l’option de ce nom du
menu Fichier. Choisissez un modèle parmi ceux que vous avez installés.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 19
ments multimédias intégrables dans Web Creator. La bibliothèque vous
permet aussi de stocker vos éléments favoris, dans la catégorie « Mes
éléments », simplement en cliquant sur un objet de la page en cours puis
en cliquant sur le bouton « + » situé en haut de la bibliothèque.
Nom de projet
Vous pouvez accepter le nom proposé par le logiciel ou en donner un autre.
Le logiciel créera automatiquement des sous dossiers pour contenir les
fichiers nécessaires au projet. De façon générale, vous n’avez pas à inter-
venir dans cette structure.
20 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Attention On ne peut changer les noms de pages dans un
projet (sauf pour la première d’un site Web : voir
section renommer la première page dans les FAQ).
Il est donc recommandé d’utiliser des noms
significatifs, comme Index, Page_formulaire,
Page_accueil, etc.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 21
Note Tout élément (image, bouton, vidéo, etc.) sur la page
peut être porteur d’un lien.
Consignes
Web Creator a été conçu pour vous faciliter la vie. Créez vos pages et insé-
rez les éléments comme bon vous semble : le logiciel se charge des opé-
rations sous-jacentes.
Toutefois, l’expérience de milliers d’utilisateurs nous a permis de dégager
quelques conseils utiles pour se doter d’une méthode de travail agréable et
efficace :
• Allez chercher sur notre site www.lmsoft.com les dernières mises à jour
avant de commencer votre projet.
• Pour vos premiers pas, utilisez les modèles fournis dans la bibliothèque
pour créer rapidement votre premier site web.
• Ayez recours à la Barre de sélection : cette zone, située sur la droite de
l’écran, donne directement accès aux pages du projet, aux éléments de
chacune de ces pages, et à toutes leurs propriétés. En recourant à la
Barre de sélection, vous gagnerez en simplicité et en rapidité, puisque
tous les éléments sont à portée de main.
• Ayez recours au copier-coller et au glisser-déposer pour inclure plusieurs
éléments d’un seul coup dans une page.
• Vous pouvez aussi créer des groupes : sélectionnez plusieurs éléments,
et créez un groupe (Insertion/Groupe). Vous pourrez ensuite attribuer
des propriétés communes à tous les éléments contenus dans le grou-
pe, comme le délai d’apparition.
• Si vous supprimez tous les liens vers une page, elle ne fera plus partie
du projet, mais elle restera dans la liste des pages et vous pourrez tou-
jours la « rebrancher ». Cette indépendance des pages est très précieu-
se en cas de plantage, car seule la page en cours risque d’être affectée.
22 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
• Enregistrez souvent les pages en cours de montage.
• La fonction « enregistrer sous » est très pratique pour faire le ménage.
En effet, tous les fichiers utilisés dans un projet seront alors copiés dans
le dossier de destination, mais seulement ceux-là. Vous pouvez ensuite
effacer les dossiers de travail antérieurs où foisonnent les pages aban-
données et les variantes d’éléments.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 23
quantité d’information à afficher – peut-être pourrez-vous utiliser la version
courte des modèles ?
Finalement, rassemblez tous les textes, photos, vidéos et sons nécessaires
au montage de votre site, et placez-les dans un dossier sur votre disque.
Ce dossier sera votre dossier de travail.
24 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
2. Puis assignez les liens aux boutons en utilisant la commande
Édition>Lien, puis « Créer un lien à une nouvelle page », en prenant soin
de créer des pages vierges qui recevront plus tard leur contenu. Vous
aurez ainsi la première version de l’architecture de votre site, ainsi que
de votre menu de navigation principal. Assurez-vous d’avoir bien mis
tous les liens et les bons noms sur vos boutons, car ce menu sera celui
qui sera copié sur toutes les autres pages. Il est temps d’enregistrer
votre page !
3. Maintenant que votre menu est créé, nous allons l’isoler afin de pouvoir
travailler plus « confortablement » sur vos pages. Sélectionnez tous les
éléments de votre menu déroulant – les boutons de sections, les bou-
tons de sous-menus et surtout le grand bouton quadrillé se trouvant
sous les autres. Ce bouton est essentiel au fonctionnement de votre
menu déroulant ; c’est un bouton invisible qui n’est actif que lorsqu’un
des boutons de section a été actionné et qui a comme seule fonction de
masquer les boutons de sous-menus lorsque la souris sort de cette
zone de boutons. Si vous le supprimez, vos boutons de sous-menus
apparaîtront normalement, mais ne disparaîtront jamais ! Une façon rapi-
de de sélectionner tous les boutons est d’utiliser la barre de sélection de
Web Creator en choisissant l’onglet « Éléments ». Vous verrez ainsi tous
les éléments de votre page, et pourrez faire des sélections multiples en
utilisant les touches « Maj » et « Ctrl ». Une fois tous les éléments de votre
menu déroulant sélectionnés, utilisez la commande Édition>Couper ou
le raccourci clavier Ctrl+X pour couper le menu déroulant et le placer
dans le presse-papiers. Puis, en utilisant la commande Fichier>Nouvelle
page, créez une page vierge qui servira à recevoir votre menu. Vous
pouvez lui donner le nom que vous voulez, cela importe peu car cette
page ne sera pas transportée avec votre site final. Cliquez sur l’onglet
« Pages du projet » de la barre de sélection de Web Creator, et sélec-
tionnez la page nouvellement créée. Vous pouvez maintenant coller,
grâce à la commande Édition>Coller ou au raccourci clavier Ctrl+V, votre
menu déroulant sur cette page.
4. Il ne vous reste qu’à assembler les autres pages de votre site. Mais com-
ment faire, puisque toutes ces pages sont vierges ? Facile ! Allez sur
votre page d’accueil, utilisez la commande Édition>Sélectionner tout ou
le raccourci clavier Ctrl+A, puis Édition>Copier. Cliquez sur l’onglet
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 25
« Pages du projet » de la barre de sélection de Web Creator, sélection-
nez la page voulue, et utilisez la commande Édition>Coller pour dispo-
ser tous les éléments sur la page. Vous avez maintenant une copie de
votre page d’accueil, prête à être modifiée selon vos besoins. Répétez
l’opération pour toutes les autres pages de votre site, et voilà !
Il ne vous reste plus qu’à mettre votre menu déroulant sur les pages.
Cliquez sur l’onglet « Pages du projet » de la barre de sélection de Web
Creator, et sélectionnez la page contenant le menu déroulant.
Sélectionnez tout, puis copiez l’ensemble avec la commande Édi-
tion>Copier. Vous pouvez maintenant coller votre menu sur toutes les
pages de votre site.
Vous pouvez conserver la page vierge contenant le menu déroulant, elle
pourra vous être utile plus tard. En effet, si vous désirez modifier ulté-
rieurement vos pages, vous pourrez sans crainte enlever le menu dérou-
lant, apporter les modifications voulues et par la suite coller de nouveau
votre menu une fois le travail effectué.
26 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Votre site web en 30 mn !
WebCreator a été conçu pour vous faciliter la vie ! Ce logiciel est le fruit
d’une longue lignée de produits dont la mission consiste à offrir les avan-
tages du multimédia, sans exiger de connaissances techniques particu-
lières. Vous allez réaliser des projets créatifs, fonctionnels, professionnels,
aux caractéristiques dynamiques très poussées sur le plan visuel, domaine
réservé jusque-là aux programmeurs spécialisés.
En vous inspirant des modèles de sites, fournis par Web Creator, vous allez
créer votre premier en moins de 30 minutes.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 27
Présentation de l’interface
Généralités
Cette interface se compose de 4 parties. Comme dans tous les logiciels, la
partie haute est consacrée aux menus et aux barres d’outils. Le cadre princi-
pal affiche la page web que vous créez. Le cadre de droite affiche les pan-
neaux Éléments, Couleurs et Pages du projet et la partie basse la bibliothèque
multimédia. Ces diférentes parties sont activables par le menu Affichage.
28 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Les modèles
On vous l’a promis : vous allez créer en 30 minutes votre site. Avec quel
secret ? En se reposant sur les nombreux modèles fournis avec Web
Creator 3, qui constituent depuis la naissance de ce logiciel un de ses
nombreux points forts.
Le principe consiste à partir d’un modèle existant, et de conserver unique-
ment ce dont vous avez besoin, en procédant par soustraction. En effet, les
modèles contiennent de nombreux éléments : images, logos, textes mis en
forme, boutons, effets d’affichage, fond d’écran, animations sonores, etc.
Enlevez les éléments qui ne vous servent à rien et adaptez ceux qui restent
à vos besoins !
Sans plus attendre, nous allons créer le site web d’une entreprise de
conseil qui commercialise des services. Cliquez sur le menu Fichier/
Nouveau, ou bien pressez la combinaison de touches CTRL + N. La fenêtre
Nouveau projet s’ouvre (image 2). Dans la zone Choix d’un modèle de pro-
jet, de nombreux modèles apparaissent. Choisissez pour cet exemple,
sélectionnez le modèle Profession libérale – Conseil (Menu).
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 29
Dans la zone Nom du projet, attribuez un nom à votre projet. Par défaut,
Web Creator en attribue un. Mais vous pouvez modifier ce nom.
30 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Image 04 – Accédez rapidement aux propriétés
de toutes les composantes d’un projet.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 31
l’élément, puis déplacez-le. Les icônes de l’onglet Eléments permettent
les opérations suivantes :
• affiche les éléments par ordre alphabétique.
• permet de dérouler chacune des propriétés d’un élément.
• permet de rendre invisible un élément en mode édition. Cette fonc-
tion est très pratique lorsque vous travaillez par exemple avec des
images qui servent de bouton transparent.
• permet de verrouiller les propriétés d’un élément. Très utile pour évi-
ter par la suite toute fausse manipulation !
2. L’onglet Couleurs du modèle permet de modifier rapidement les cou-
leurs de la charte graphique de votre site. Ces couleurs sont communes
à toutes les pages d’un projet. Elles peuvent ainsi être personnalisées et
s’adapter aux couleurs de votre société. Vous pouvez ne changer les
couleurs que pour une page en particulier. Vous pouvez également per-
sonnaliser vos modèles en choisissant des couleurs particulières.
3. L’onglet Pages du projet donne directement accès à chaque page, ainsi
qu’à ses propriétés, en cliquant sur la vignette correspondante. En cli-
quant sur la vignette d’une page avec le bouton droit de la souris, un
menu contextuel s’affiche. Il permet de dupliquer, renommer ou suppri-
mer la page. Attention : La suppression d’une page est une opération
délicate. En effet, les liens provenant d’autres pages qui y menaient tom-
beront dans le vide, générant des messages d’erreur lors de la prépara-
tion pour le web.
Le panneau Bibliothèque
Situé en bas de l'écran, il vous donne un accès immédiat aux différents
objets multimédias que vous pouvez insérer dans votre projet, présentés
sous forme d'arborescence.
32 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Dès que vous cliquez sur un dossier, son contenu apparaît, ou un symbo-
le pour les sons. Un double-clic sur un objet l'insère dans la page couran-
te. Une fois l'objet inséré, vous pouvez, comme pour tout élément, accéder
à ses propriétés en double-cliquant dessus.
La catégorie Bouton qui semble bien vide vous permet en fait de créer une
infinité de modèles de boutons. Pour ce faire, cliquez sur le signe "+" situé
au dessus, ce qui ouvre la boîte d'édition des boutons.
Vous créez donc ici la forme du bouton ou du pictogramme sous ses dif-
férents états, relevé, pressé et survol. Vous ne pouvez pas changer ici la
couleur, car vous créez en fait un modèle de bouton. Cependant une fois
inséré dans le projet, l'appel de la boîte de ses propriétés vous permettra
de modifier encore bien des caractéristiques.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 33
Une autre catégorie, "Mes éléments", permet de regrouper des objets dont
vous pensez avoir besoin souvent, vos favoris. Pour les ajouter, il vous suf-
fit simplement de les sélectionner en cliquant dessus sur la page active,
puis de cliquer sur le bouton "+" situé au dessus de la fenêtre de la caté-
gorie "Mes éléments".
34 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Personnalisez le modèle
Faisons un peu de ménage et procédons par soustraction. Tous les
modèles servent à être adaptés à vos besoins. Cliquez sur les différents élé-
ments de la page principale. Dès qu’un élément est sélectionné, un cadre
grisé apparaît (image 05). Il suffit de presser la touche du clavier Suppr pour
faire disparaître cet élément.
Vous allez dire : pourquoi détruire ce qu’un autre a déjà construit ? Tout
simplement parce que de cette manière, vous réalisez très rapidement
qu’une page web est constituée de plusieurs éléments agencés de façon
harmonieuse. C’est tout le contraire d’un texte tapé au kilomètre ! Voici une
première initiation à l’ergonomie de sites web !
Voici une page beaucoup plus aérée (image 06), dans laquelle vous pou-
vez insérer des éléments comme bon vous semble.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 35
Image 06 – Une page aérée prête à recevoir des éléments.
36 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Insérez une image
Dans la barre d’outils précédente, cliquez sur l’icône d’insertion d’une
image .
La fenêtre propriété de l’image s’affiche à l’écran (image 08).
Depuis l’onglet Image, cliquez sur l’icône en forme de dossier ouvert et allez
chercher sur votre disque dur le fichier image de votre choix. Web Creator
accepte directement la plupart des formats d’image connus. Une fois votre
fichier choisi, Web Creator affiche un aperçu dans le cadre éponyme (figu-
re 09), avant de l’insérer sur la page web.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 37
Remarque Si vous pouvez voir une prévisualisation de l’image,
c’est que Web Creator sait la lire. Lors de la création
du site, l’image sera automatiquement optimisée
pour le web. Les images seront redimensionnées et
converties. Non seulement vous n’avez pas à
connaître les langages de programmation, mais en
plus on vous épargne de devoir vous y retrouver
dans la question complexe des tailles et formats
d’image.
Puis cliquez sur le bouton OK. La figure 10 montre que par défaut, Web
Creator place l’image au centre de la page.
38 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Figure 10 – Par défaut, Web Creator insère tout nouvel élément
au centre de la page.
We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n 39
Vous pouvez bien entendu déplacer cette image en cliquant dessus avec
le bouton de la souris et en maintenant celui-ci enfoncé. Et pour modifier
les dimensions de l’image, placez le curseur sur l’un des bords ou des
coins de l’image, et déplacez les poignées de redimensionnement.
Insérer du texte
Pour insérer du texte, cliquez sur l’icône en forme de A dans la barre d’ou-
tils, ou bien ouvrez le menu Insertion/Texte.
Dès lors, un cadre s’affiche au milieu de la page web, ainsi qu’une fenêtre
affichant des propriétés du texte (figure 13).
40 We b C r e a t o r 4 • G u i d e d e p r i s e e n m a i n
Figure 13 – Cadre de saisie du texte et fenêtre de ses propriétés.
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 41
Image 14 – Les modifications ne s’appliquent qu’au bloc
de texte sélectionné.
Cliquez ensuite sur l’option Arrière-plan (couleur) (Image 15-1) puis sur
l’icône qui s’affiche.
42 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
La fenêtre Couleurs s’affiche (figure 16). Choisissez une couleur. Le résultat
est montré dans la figure 17.
Pour revenir à une couleur de fond transparente, il suffit de revenir à l’éta-
pe de la figure 15, en choisissant Oui pour un arrière-plan invisible.
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 43
Sélectionnez la partie de votre texte sur laquelle vous voulez appliquer un
lien hypertexte. Dans l’exemple que nous créons ensemble, il s’agit de la
partie de texte « Nous écrire » : en cliquant dessus, l’internaute pourra
envoyer un email pour demander des renseignements.
Nous vous conseillons dans un premier temps d’appliquer le style Souligné
à cette sélection de texte. En effet, il est d’usage sur le web que les liens
hypertextes soient soulignés.
Puis dans la fenêtre des propriétés du texte, cliquez sur l’icône Propriétés
de l’hypertexte .
Sélectionnez la partie de texte à laquelle vous voulez appliquer un lien
hypertexte, puis dans la barre d'outils Edition, juste sous la barre de menus,
cliquez sur l'icône « Lien... » Vous pouvez aussi passer par la commande
de menu « Edition/Liens... » ou par un clic droit et la commande « Lien... ».
La fenêtre Propriété de l’hypertexte s’affiche (figure 20). Depuis l’onglet
Lien, Web Creator propose, après avoir cliqué sur le texte préalablement
sélectionné, d’ouvrir soit :
• une nouvelle page web ;
• une page existante, un programme ou un fichier ;
• un site web ou une URL ;
• un courrier électronique ;
• un lien prédéfini ;
• un élément.
44 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
figure 20 – La fenêtre des propriétés de l’hypertexte donne accès
à plusieurs options de gestion des liens.
Dans notre cas, en cliquant sur « Nous écrire », l’internaute pourra envoyer
un email pour demander des renseignements. Nous allons choisir dans la
fenêtre des Propriétés de l’hypertexte Un courrier électronique. La fenêtre
Adresse du courrier électronique s’affiche. Saisissez l’email dans le
champ associé (figure 21).
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 45
Figure 22 – Suppression d’un lien.
Figure 23 – Créez d’abord le tableau que vous voulez importer sous Excel.
Puis, sélectionnez les cases que vous allez importer. Il suffit de pointer le
curseur de la souris dessus, puis de maintenir le bouton de la souris enfon-
cé jusqu’à ce que toutes les cases soient sélectionnées. Les cellules sélec-
tionnées apparaissent en grisé (image 24).
46 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Figure 24 – Les cellules sélectionnées du tableau Excel
apparaissent avec un fond grisé.
Puis, vous devez copier cette sélection. Vous avez trois possibilités :
• Taper la combinaison de touches CTRL + C ;
• Appeler le menu Édition/Copier ;
• Cliquer sur le bouton droit de la souris. Le menu contextuel s’affiche. Il
ne vous reste qu’à sélectionner la fonction Copier.
Quelle que soit l’option de copiage que vous avez choisie, le cadre exté-
rieur des cellules sélectionnées scintille. Ceci confirme que la sélection a
bien été copiée.
Pour ensuite importer cette sélection dans Web Creator, ouvrez la fenêtre
de celui-ci, puis cliquez sur le bouton droit de la souris. Dans le menu
contextuel qui s’affiche alors, sélectionnez la fonction Coller (figure 25).
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 47
Figure 26 – Les cellules Excel importées sous forme d'un tableau.
Pour redimensionner ce tableau, procédez de la même manière qu’avec
une image. Pour ce, placez le curseur de la souris sur l’un des coins du
cadre du tableau. Vous remarquerez que le curseur se transforme en une
double flèche. Maintenez le bouton gauche de la souris enfoncé et dépla-
cez les coins comme il vous plaît. Vous pouvez également saisir une des
tranches du cadre.
Pour déplacer l’ensemble du cadre du tableau, il suffit de pointer le curseur
de la souris dessus, de maintenir le bouton gauche enfoncé à nouveau, et
de déplacer l’ensemble du cadre.
Intégrer un graphique
La procédure est identique à celle de l’intégration de cellules. Créez votre
graphique sous Excel. Sélectionnez-le en appelant le menu contextuel et
en choisissant dans ce dernier l’option Coller (figure 28).
48 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Figure 28 – Créez votre graphique sous Excel et copiez-le
à partir du menu contextuel.
Dans Web Creator, cliquez sur le bouton droit de la souris pour appeler le
menu contextuel. Choisissez l’option Coller. Votre tableau s’affiche à l’écran
(figure 29).
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 49
Créer et paramétrer une nouvelle page
Nous allons créer une nouvelle page pour notre projet. A droite de la
fenêtre, cliquez sur l’onglet Pages du projet. Toutes les pages de votre pro-
jet s’affichent (figure 30).
50 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Figure 31 – Pour créer rapidement une nouvelle page,
partez du menu contextuel.
Choisissez le modèle qui vous convient. Vous pouvez très bien rester dans
la série Profession libérale/ conseil, qui nous a servi de modèle, ou bien par-
tir d’une page vierge. Pour ce, dans le cadre de gauche, choisissez
Divers/Page vide (figure 33).
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 51
Figure 33 – Création d’une nouvelle page à partir d’une page vierge.
52 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
quée. Cette opération effectuée, la page dupliquée s’affiche dans l’onglet
des pages du projet (figure 35).
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 53
Figure 37 – La fenêtre Lier à.
Cliquez sur le bouton à une nouvelle page ou une page existante. Dans
la fenêtre Sélection d’une page existante, sélectionnez Page dupliquée
(figure 38).
54 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Tester votre site avec Internet Explorer
Un premier test
Bravo : vous savez créer un nouveau projet, insérer des éléments multimé-
dias et créer un lien hypertexte. Maintenant, vous allez tester votre site dans
Internet Explorer. Avec le Web Creator, vous pouvez visualiser la page grâce
à l’onglet Visualisation dans Internet Explorer (figure 39).
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 55
figure 42 – Prévisualisation de la page dans Internet Explorer.
56 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Pour des sociétés ou organisations, il vaut mieux avoir recours à des solu-
tions plus professionnelles. Il ne vous en coûtera que quelques euros par
an. Mais ça en vaut la peine : le débit est au rendez-vous, et vous pourrez
mettre des Mo et des Mo de données en ligne.
LMSOFT propose des prestations et des tarifs étudiés pour les utilisateurs
de Web Creator. Vous pouvez les voir à la section hébergement du site
www.lmsoft.com.
Une fois ces quelques considérations professées et que vous vous êtes
inscrit auprès de l’hébergeur de votre choix, nous allons utiliser l’assistant
de mise en ligne FTP, fourni par Web Creator.
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 57
Figure 45 – Remplissez les champs Adresse, Usager et Mot de passe.
Chaque champ dispose d'une aide contextuelle pour vous aider.
Cliquez ensuite sur le bouton « Envoyer le site ».
58 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Service Clients
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 59
Notes
60 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Notes
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 61
Notes
62 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n
Notes
We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n 63
Notes
64 We b C r e a t o r 4 • M a n u e l d e p r i s e e n m a i n