Web Creator 5
Manuel de prise en main
Convention de droits d’utilisation
Par l’usage de ce CD-ROM, vous acceptez les conditions d’utilisation de ce produit.
Cette convention concerne l’utilisation des produits de Mindscape inclus dans cet emballage ainsi que les manuels, disques, programmes et documentations qui y sont associés. En ouvrant l’emballage scellé qui contient les disques et/ou en utilisant le logiciel, vous acceptez de vous soumettre aux termes de cette convention. Si vous n’acceptez pas les termes de cette convention, retournez le paquet intact chez Mindscape, afin d’obtenir un remboursement intégral.
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é temporairement 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.
2 — Droits d’auteur et Restrictions
Le logiciel est la propriété de Mindscape ou de ses fournisseurs et est protégé par les réglementations en matière de droits d’auteur applicables en France et en Europe en la matière, et les dispositions des traités internationaux. Mindscape conserve tous les droits non expressément accordés.
Ainsi, vous devez traiter le logiciel comme n’importe quel produit protégé par des droits d’auteur.
Vous ne pouvez louer ou donner en crédit-bail le logiciel, mais vous pouvez céder vos droits d’après cette convention et de manière définitive si vous cédez la licence accordée par cette convention, le logiciel et toutes les documentations qui y sont associées, si vous ne gardez aucune copie de ce logiciel et si l’acquéreur s’engage à respecter les termes de cette convention. Vous ne pouvez reconstituer la logique du programme, décompiler ou désassembler le logiciel, sauf dans la mesure où la restriction citée précédemment est expressément interdite par les dispositions applicables.
3 — Date limite de garantie
Dans les 90 jours suivant la date d’acquisition, Mindscape garantit que le support sur lequel le logiciel est distribué est exempt de vice de fabrication. Mindscape, de son propre gré, ne remboursera la somme dépensée pour l’achat du logiciel, ne le réparera ou ne le remplacera que si le logiciel défectueux lui est retourné ou est retourné à un vendeur agréé dans les 90 jours suivant la date d’acquisition (ticket de caisse faisant foi). Ce sont les seuls recours à votre disposition pour n’importe quelle rupture de garantie. Mindscape n’assume aucune autre garantie, implicite ou explicite, en rapport avec le logiciel et les documentations l’accompagnant, notamment, mais pas uniquement, les garanties implicites de commercialisation du logiciel et d’utilisation du logiciel dans un but particulier.
4 — Limite de responsabilités
En aucun cas Mindscape ne pourra être tenu pour responsable des dommages indirects, particuliers, 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 accidentels, les limites exprimées ci-dessus peuvent ne pas vous concerner.
© 2009 Mindscape
Sommaire
Installation et mise à jour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Installation et désinstallation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Premier démarrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Enregistrement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5
Mise à jour sur le Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Quoi de neuf dans Web Creator 5 ? . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Considérations générales sur l’interface . . . . . . . . . . . . . . . . . . . . . . .10
Onglets pour l’édition et la visualisation . . . . . . . . . . . . . . . . . . . . . . .11
Onglets Éléments, Couleurs et Pages du projet . . . . . . . . . . . . . . . . .11
Sélection des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Le projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18
Pour démarrer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Principe du logiciel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
Nom de projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
Nom des pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
Créer un lien vers une autre page . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
Consignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Méthode de travail et planification . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Onglet Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
Votre site web en 30 mn ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27
Présentation de l’interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
Personnalisez le modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33
Insérer des images, du son, de la vidéo . . . . . . . . . . . . . . . . . . . . . . .34
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
1
Intégrer des éléments Excel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Créer et paramétrer une nouvelle page . . . . . . . . . . . . . . . . . . . . . . . .48
Créer un lien d’une page à l’autre . . . . . . . . . . . . . . . . . . . . . . . . . . . .51
Tester votre site avec Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . .53
Mettez votre site en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54
Service Clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57
2
We b C r e a t o r 5
•
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 « autorun.exe » situé à la racine du disque, ce qui charge 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’actualité 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 lancer l’assistant d’installation.
Dans la boîte de dialogue, choisissez 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 (l’environnement de programmation de
Microsoft). Si vous l’avez déjà installé, notre logiciel ne vous demandera pas de le refaire puisque .NET est utilisé par un nombre grandissant d’applications. Si vous avez déjà .NET, assurez-vous que votre version est au moins aussi récente que celle incluse avec notre logiciel.
• 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’installer 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 5) ou en sélectionner un nouveau en cli-
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
3
quant sur le bouton P arrc urriirr. Un clic sur le bouton S 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’installation ne vous soit confirmée. Vous êtes ensuite invité à démarrer automatiquement le programme.
Désinstallation
Le logiciel peut être désinstallé en cliquant sur la commande D éssiin dans le Groupe Mindscape/Web Creator 5 du menu D ém
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
Au démarrage, l’écran d’activation s’affiche. Vous aurez alors 3 options :
4
• Activer le programme tout de suite en cliquant sur le premier bouton si vous avez en main votre code d’activation.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
• Acheter un code d’activation en cliquant sur le deuxième bouton
• Utiliser le programme en mode Évaluation durant 30 jours en cliquant sur le bouton « Démarrer ».
Important
Vous devez être connecté à Internet pour activer le programme ou acheter une clé d’activation. Il est toutefois possible d’activer le logiciel sur un ordinateur ne possédant pas de connexion Internet. Pour connaître la marche à suivre, contactez www.lmsoft.com/sav
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é d’activation. Chaque logiciel doit avoir une paire unique de ces numéros.
Ces numéros sont 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.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
5
6
Lorsque vous aurez activé le logiciel, vous devrez compléter le formulaire d’enregistrement de LMSOFT. Vérifiez l’exactitude des données avant de confirmer puisque l’enregistrement est requis pour profiter des mises à jour gratuites, pour avoir accès au Service d’assistance technique, au Forum, etc.
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.
Important
Le numéro de série et la clé sont personnels. Ils vous donnent droit à des mises à jour gratuites sur Internet ainsi qu’à des prix préférentiels pour les futures versions et les autres produits de LMSOFT, comme l’hébergement de votre site web.
Ces avantages ne sont conférés qu’une seule fois par paire de numéros ; si vous laissez une autre personne utiliser vos numéros, il est possible que ce soit lui qui en bénéficie à votre place. De plus, LMSOFT se réserve le droit de bloquer un couple numéro de série/clé d’activation en cas d’activation excessive qui enfreindrait l’entente d’utilisation du logiciel.
Mise à jour sur le Web
Il y a deux façons d’obtenir les mises à jour sur le Web :
• Par l’option Vérifier pour une mise à jour du menu Aide
• En allant à http://www.lmsoft.com/corrections
Nous vous recommandons fortement d’effectuer une mise à jour par
Internet après avoir installé le logiciel à partir du cédérom. Pour ce faire, cliquez sur l’option V érriiffiie ou un e m à jjo urr du menu A mise à jour la plus récente concernant votre produit.
e et installez la
Important
Assurez-vous que la langue de la page de téléchargement soit la même que celle de votre logiciel.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Présentation générale
Ce logiciel est le fruit d’une longue lignée de produits dont la mission consiste à offrir les avantages du multimédia pour la création de sites web, sans exiger de connaissances techniques particulières.
Web Creator est reconnu par la presse pour sa souplesse et sa facilité d’utilisation. Ainsi, des outils d’édition puissants et des fonctions graphiques avancées sont disponibles en effectuant simplement des choix dans des boîtes de dialogue ou de propriétés.
Nul besoin de connaître un langage de programmation pour réaliser des projets de site web rivalisant avec ceux des professionnels. En outre, facilité et créativité vont de pair. Avec Web Creator, vous allez réaliser des projets aux caractéristiques dynamiques très poussées sur le plan visuel, domaine réservé jusque-là aux programmeurs spécialisés.
Quoi de neuf dans Web Creator 5 ?
Plusieurs nouveaux outils pour donner à votre site un graphisme digne des meilleurs professionnels, sans aucune programmation :
Template Creator
Créez maintenant vous-même vos propres modèles entièrement personnalisés en 4 étapes faciles :
1. Choisissez un style graphique, puis
2. un type de page (accueil, produit, contact, etc.)
3. un thème, représentant une activité économique des éléments décoratifs abstraits (Pro)
4. une charte de couleurs, qui peut même être ajustée exactement à celle de votre organisation
Répétez ensuite pour autant de pages souhaitées. Créez ensuite facilement des liens avec Button Creator ou Menu Creator (Version Pro).
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
7
8
Button creator
Ce nouvel outil permet de créer toutes sortes de boutons de navigation :
2D, 3D, invisibles et Design. Ces derniers comportent des milliers de styles et dimensions, avec ou sans effets graphiques d’ombres et de transparence, des pictogrammes et même des bandes de couleur. Et oui, ces couleurs s’agencent automatiquement à la palette de couleurs de votre projet !
Menu Creator (Pro)
Ce tout nouvel outil vous permet de créer facilement des menus de navigation sans limites : horizontaux ou verticaux, avec sous-menus. Vingt modèles de base sont proposés, qui peuvent bien entendu être personnalisés ensuite.
Line Creator
Avec Line Creator, créez d’élégantes lignes de séparation entre les sections d’une page : avec ou sans pointillés, ombres portées, dégradés de couleur.
Box Creator (Pro)
Créez rapidement des bannières ou boîtes pour bien isoler les éléments et mettre en valeur les plus importants. Les possibilités sont nombreuses :
• Bordures et coins arrondis de taille variable
• Zone de texte avec dégradés de couleurs et transparence, ajustables pour chaque boîte
• En-têtes et pieds de page, également personnalisables
• Ombre ajustable en intensité, transparence, hauteur et angle de lumière.
Et tous ces effets se redessinent instantanément quand vous modifiez l’emplacement ou la taille des boîtes sur votre page. C’est magique !
Ce que vous pouvez créer en quelques minutes avec Box Creator demandait autrefois des heures de travail avec de complexes outils d’infographie.
Flash Video Creator
Toutes les vidéos et animations peuvent être converties en Flash, la norme qui s’est imposée pour la transmission de vidéos sur Internet. Finies les incompatibilités de codecs et autres désagréments. Vos visiteurs verront vos vidéos comme sur les sites les plus performants.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Galerie améliorée
La galerie photo améliorée permet de créer rapidement une galerie photo
à partir d’une liste d’images. Une nouvelle frise facilite la navigation dans le diaporama.
Nouveaux dossiers Projets
Les éléments d’un projet sont maintenant inclus DANS le projet, ce qui permet de copier-coller les dossiers de projets, facilitant leur déplacement d’un ordinateur à un autre et les sauvegardes de sécurité.
Ces nouveaux outils d’édition s’ajoutent à la déjà longue liste de fonctions de Web Creator, notamment :
• Éditeur de texte WYSIWYG (résultat conforme à ce qui apparaît à l’écran) permettant d’écrire et de visualiser votre texte tel qu’il apparaîtra dans votre page finale.
• Prise en compte des langues non latines (arabe, chinois, japonais, etc.).
• Compatible avec le correcteur orthographique et grammatical Antidote.
• Intégration de cellules, issues de tableurs comme Excel, sous forme de tableaux modifiables.
• Bibliothèque d’accès rapide permettant d’avoir continuellement à portée de souris les éléments à incorporer dans vos pages, tels qu’images, animations Flash, boutons, sons et vos éléments personnels favoris.
• Nouveaux modèles au look moderne créés par un graphiste web professionnel : galeries photos, vidéo, musique, vacances, entreprises, associatifs, artisanat, etc.
• Générateur de blog facile à utiliser. Les articles sont des pages Web
Creator et peuvent accepter le son et la vidéo. Le générateur facilite la création du flux RSS pour l’abonnement au blog.
• É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.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
9
10
• Barre d’accès rapide aux éléments de la bibliothèque permettant d’ajouter 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 garder 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’enregistrement et modification majeure au code généré : chaque page est enregistré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 suivent en Javascript. Ceci a pour effet de rendre les pages plus compatibles 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 automatiquement.
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.
•• L ess m uss : comprend Fichier, Édition, Affichage, Insertion, Format,
Fenêtre et Aide.
•• B arrrre d’’o uttiillss : 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’interface de Web Creator.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
La première donne accès aux fonctions de gestion des fichiers et des éléments multimédias.
La seconde donne accès aux fonctions d’insertion des éléments multimédias.
Onglets pour l’édition et la visualisation
La fenêtre principale de Web Creator donne accès à 3 onglets :
•• É err : 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.
•• É diitte e H TM 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.
évviissu alliissa da nss IIn 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 ou les autres navigateurs installés sur votre machine.
Onglets Éléments, Couleurs et Pages du projet
Cette zone, située sur la droite de l’écran, donne directement accès aux pages du projet, à leurs propriétés ainsi qu’aux propriétés de chaque élément multimédia contenu dans les pages. En y recourant, vous gagnerez en simplicité et en rapidité, puisque tous les éléments sont à portée de main.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
11
L’icône affiche les éléments par ordre alphabétique.
L’icône permet de dérouler chacune des propriétés d’un élément.
L’onglet Éléments
12
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 cliquant 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.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
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 !
L’onglet Couleurs du modèle
L’onglet Couleurs du modèle, de la Barre de sélection, permet de modifier rapidement les couleurs 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 personnaliser vos modèles en choisissant des couleurs particulières.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
13
Modifier les couleurs de toutes les pages d’un site
Cette fonction marche si vous travaillez avec un des modèles fournis avec
Web Creator. Pour accéder à l’ensemble des modèles, faites Fichier/
Nouveau/Nouveau projet. La fenêtre Nouveau projet s’affiche. Choisissez un modèle dans cette fenêtre. Cliquez sur OK.
Pour modifier les couleurs de toutes les pages du projet, dans la Barre de sélection, cliquez sur l’onglet Couleurs du modèle. Dans la fenêtre Style, déroulez la liste et choisissez une autre charte graphique. La modification est instantanée.
14
Personnaliser la charte graphique de votre site
Pour adapter exactement la charte graphique de votre entreprise aux couleurs 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 Fichier, 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 s’affiche. Cliquez dessus. La fenêtre Couleur s’affiche. Sélectionnez une couleur soit :
• parmi les couleurs de base,
• en sélectionnant une couleur particulière dans la mire,
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
• 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éutiliser 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 à droite. 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.
L’onglet Pages du projet
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
15
En mode Éditer, cet onglet, de la Barre de sélection, montre toutes les pages situées dans le dossier du projet. Vous pouvez accéder directement
à chaque page en cliquant sur la vignette correspondante.
En cliquant sur la vignette d’une page avec le bouton droit de la souris, un menu contextuel s’affiche. Il permet de :
• dupliquer,
• renommer,
• supprimer 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 tomberont dans le vide, générant des messages d’erreur lors de la préparation pour le web. Assurez-vous donc d’effacer tous les liens pointant vers la page que vous voulez supprimer.
L’onglet Bibliothèque
Cet onglet vous donne un accès immédiat à différents objets multimédias que vous pouvez insérer dans votre projet.
16
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.
Les bannières dimensionnées (600x250 par ex.) permettent de remplacer les bannières dans les nouveaux modèles pour ainsi les personnaliser. Les
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
bannières abstraites sont liées à la palette du projet et permettent un agencement de couleur avec celles de votre site.
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 active, puis de cliquer sur le bouton « + » situé au dessus de la fenêtre de la catégorie « Mes éléments ».
Un son et un objet calendrier inséré dans « Mes éléments ».
Sélection des éléments
Il faut être en mode Éditer pour sélectionner des éléments sur la page.
Plusieurs méthodes sont possibles pour sélectionner des éléments :
•
Ctrl+clic permet de sélectionner plusieurs éléments,
• Ctrl+A sélectionne tous les éléments sur la page,
• « l’élastique » sélectionnera tous les éléments entièrement contenus dans le rectangle. Pour faire le rectangle, tenez le clic enfoncé et déplacez la souris.
Quand vous cliquez sur un élément dans la liste des éléments, l’élément correspondant dans la page est entouré d’un cadre gris. Vous pouvez déplacer ce cadre à volonté pour positionner l’élément dans la page.
Inversement, le fait de cliquer sur un élément dans la page le sélectionne
également dans l’onglet des éléments.
Quand vous effectuez une sélection multiple, un cadre gris apparaît et entoure tous les éléments. Vous pouvez ensuite déplacer tout le groupe en cliquant dans un des éléments du groupe et en glissant la souris.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
17
Vous pouvez supprimer les éléments sélectionnés avec la touche supprime du clavier ou l’outil .
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
Tous les éléments utilisés dans un projet vont être copiés dans le dossier du projet. Il est donc maintenant possible de déplacer les projets par un simple copier-coller.
18
We b C r e a t o r 5
•
M a n u e l 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 logiciel 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 à comprendre 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.
2. Personnalisez la gamme de couleurs. Changez de palette, puis changez les deux premières couleurs.
3. Habituez-vous à sélectionner des éléments, à les déplacer et à les supprimer. Utilisez la fonction Annuler (menu Édition ou Ctrl + z) pour revenir étape par étape à l’état initial de la page.
4. Insérez ensuite une image pour vous apprendre comment ajouter des
éléments à la page. Pour cela, servez-vous de la zone Bibliothèque située au bas de l’écran. Elle vous donne un accès rapide à tous les élé-
We b C r e a t o r 5
•
M a n u e l 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 cours puis en cliquant sur le bouton « + » situé en haut de la bibliothèque.
5. Insérez maintenant un bouton que vous prendrez dans la bibliothèque de boutons. Allez à l’onglet Liens et Créez un lien à une nouvelle page.
La boîte de sélection de modèles de pages vous sera de nouveau présentée. Choisissez un modèle et créez une deuxième page.
Voilà, c’est ainsi qu’on bâtit son site : page par page. Il vous reste à découvrir toutes les options pour le rendre plus attrayant et dynamique, ce qui se fait en explorant les diverses options des pages et des éléments.
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 à intervenir dans cette structure.
20
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Nom des pages
Un projet est constitué de pages reliées entre elles. Il faut donner un nom à chacune des pages. Web Creator en attribue un par défaut. Sinon, cliquez avec le bouton droit de la souris sur la page, depuis l’onglet Pages du projet de la Barre de sélection. Dans le menu contextuel, choisissez Renommer.
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.
Créer un lien vers une autre page
Un projet est généralement constitué de plusieurs pages. Pour accéder à d’autres pages, cliquez sur des éléments dans la page. On désigne par
« lien » ou « hyperlien » l’association entre un élément et un changement de page ou autres actions que vous trouverez dans l’onglet Lien des boîtes de propriétés des éléments (accessibles par un double-clic).
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
21
22
Note
Tout élément (image, bouton, vidéo, etc.) sur la page peut
être porteur d’un lien.
Vous connaissez maintenant la base du logiciel : des éléments sur une page, pouvant mener à d’autres pages.
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.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
• 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 groupe, 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 toujours la « rebrancher ». Cette indépendance des pages est très précieuse en cas de plantage, car seule la page en cours risque d’être affectée.
• 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 abandonnées et les variantes d’éléments.
Méthode de travail et planification
Assembler soi-même son propre site Internet peut se révéler un véritable casse-tête, et ce peu importe le logiciel que l’on utilise. Il faut avant tout faire un certain travail préparatoire, sinon gare aux mauvaises surprises !
Ce petit guide vous aidera à bien planifier votre travail afin de tirer le maximum des modèles fournis avec Web Creator.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
23
24
Étape 1 Architecture du site : inspirez-vous des modèles fournis !
Avant de commencer l’assemblage de votre site, il faut en faire le plan, un peu comme pour une maison. Prenez quelques minutes et faites un diagramme sur papier des diverses sections de votre site, en prenant soin d’en identifier les plus importantes – celles-ci devront être facilement accessibles à partir de n’importe quelle page de votre site. Ce travail peut sembler fastidieux, mais cela vous évitera, par exemple, de refaire toutes vos pages parce que vous avez oublié de mettre un lien important sur chacune d’entre elles, ou de reconstruire vos menus parce qu’il manque une section essentielle dans telle ou telle partie… Ce plan, que l’on peut représenter sous forme d’arbre (ou flowchart), vous servira dans toutes les
étapes de la réalisation de votre site.
Puis, en vous inspirant des modèles fournis (ou en créant votre propre design de site), faites une esquisse des pages les plus importantes et disposez les boutons principaux. Y aura-t-il plusieurs langues offertes ? Prévoyezvous des promotions, des concours ? Peut-être que vos visiteurs pourraient s’abonner à un bulletin mensuel, ou à une liste d’envoi ? Quels seront les éléments principalement affichés sur les pages : textes, images ou séquences vidéo ? Déterminez aussi la dimension de vos pages selon la 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.
Étape 2 Préparation de la première page
Vous pouvez maintenant créer votre page d’accueil, qui contiendra les éléments principaux que l’on pourra retrouver dans votre site. Pour débuter, créez un nouveau projet avec Web Creator (lien vers la section de l’aide correspondante), choisissez le modèle de site voulu et entrez le nom de la première page. Vous aurez devant vous la première page de votre site, prête à être modifiée selon vos besoins.
Commencez par enlever, avec la commande Édition>Effacer, les éléments dont vous n’aurez pas besoin – boutons de symboles, boutons de la barre verticale, boutons du menu déroulant, textes, titres, etc. Puis placez votre
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
logo à l’endroit prévu à cet effet, et remplacez, au besoin, les textes descriptifs des boutons de navigation et des boutons de la barre verticale.
Vous pouvez aussi assigner les liens des boutons de navigation – courrier
électronique, info, accueil. Les liens des boutons « Page suivante » et
« Page précédente » devront être assignés manuellement, pour chacune des pages, afin de créer une navigation simplifiée. Vos visiteurs pourront ainsi naviguer sur votre site tout simplement en appuyant sur « Page suivante » ; assurez-vous de leur offrir un parcours agréable ! Ces liens pourront être assignés à la toute fin, lorsque votre site sera complété.
Étape 3 Menu Creator (Pro)
Ce nouvel outil vous permet de créer facilement des menus de navigation horizontaux ou verticaux avec sous-menus. Vingt modèles de base personnalisables sont proposés et les utilisateurs avancés peuvent même créer leurs propres styles de menus.
Onglet Menu
Pour créer un menu, vous devez d’abord choisir le style visuel du menu.
Ajoutez des items pour former un menu principal vertical ou horizontal, puis des sous-menus.
Cliquer sur l’aperçu dans la liste de modèles de menus pour choisir un style de menu. Celui-ci s’ajustera aux couleurs de la palette de votre projet automatiquement.
Pour créer votre propre style de menu, cliquez sur l’icône éditer, ce qui ouvrira le Menu Style Creator.
Bâtir un menu avec des items
Cliquez sur la case grise « Nouveau » pour créer le premier item de votre menu (MenuItem1). L’item sélectionné deviendra rouge, ce qui signifie que c’est celui que vous éditez.
Dans la zone « Propriété des items », entrez le texte que vous voulez voir apparaître sur l’item du menu.
Pour créer un lien : cliquez sur le crayon pour ouvrir la boîte de propriété
« Options de lien ».
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
25
Pour créer un menu horizontal, ajoutez les items suivants à droite du premier item. Pour un menu vertical, ajoutez-les en dessous du premier item.
Ajoutez un titre et un lien pour chaque item.
Pour créer un sous-menu, il suffit d’ajouter un item perpendiculairement à un item du menu principal. Le sous-menu apparaîtra en mode visualisation lorsque vous survolez ou cliquez l’item du menu principal selon l’option choisie.
26
We b C r e a t o r 5
•
M a n u e l 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 avantages du multimédia, sans exiger de connaissances techniques particuliè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 site web en moins de 30 minutes.
We b C r e a t o r 5
•
M a n u e l 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 principal affiche la page web que vous créez. Le cadre de droite affiche les panneaux Éléments, Couleurs et Pages du projet et la partie basse la bibliothèque multimédia. Ces différentes parties sont activables par le menu Affichage.
28
Figure 1 – L’interface de WebCreator se compose de trois parties : les menus, la fenêtre d’édition et la Barre de sélection.
1. La fenêtre d’édition : dans la moitié gauche de l’écran. Elle sert à préparer les pages de vos sites, y insérer des éléments et des fonctionnalités, et à les visualiser avant de les mettre sur votre serveur web.
2. Les menus et les barres d’outils donnent accès aux différentes fonctions et options de Web Creator.
3. Les onglets Édition, Couleurs, Pages du projet et Bibliothèque : situés à droite ils permettent d’accéder à tous les éléments présents dans le projet et de modifier leurs propriétés.
We b C r e a t o r 5
•
M a n u e l 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, 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 uniquement 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 projet, de nombreux modèles apparaissent. Choisissez pour cet exemple, sélectionnez le modèle Profession libérale – Conseil (Menu).
Figure 02 – La fenêtre Nouveau projet affiche la liste des modèles disponibles. Sélectionnez le modèle Profession libérale – Conseil (Menu).
We b C r e a t o r 5
•
M a n u e l 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.
Les onglets d’édition et de prévisualisation
Lorsque votre projet est intégré (image 03), Web Creator affiche trois onglets qui correspondent à trois modes de travail : Editer, Editer le HTML et le Javascript, Prévisualiser dans Internet Explorer.
É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.
ont certaines 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.
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.
Figure 03 – Les onglets d’édition et de prévisualisation.
Les onglets Éléments, Couleurs, Pages du projet et Bibliothèque
Cette zone facilite grandement l’édition d’un projet. Placée à droite de la fenêtre de Web Creator, elle permet d’accéder rapidement aux différentes pages d’un projet, ainsi qu’aux éléments de chaque page, et de modifier simplement leurs propriétés (Image 04).
30
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Figure 04 – Accédez rapidement aux propriétés de toutes les composantes d’un projet.
1. Dans l’onglet Éléments, la liste des éléments n’apparaît qu’en mode
Editer. 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 cliquant 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
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
31
32
•
• 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. 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 fonction 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 éviter par la suite toute fausse manipulation !
2. L’onglet Couleurs du modèle permet de modifier rapidement les couleurs 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 personnaliser 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 cliquant sur la vignette d’une page avec le bouton droit de la souris, un menu contextuel s’affiche. Il permet de dupliquer, renommer ou supprimer 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 tomberont dans le vide, générant des messages d’erreur lors de la préparation pour le web.
4. L’onglet Bibliothèque donne un accès immédiat aux différents objets multimédias que vous pouvez insérer dans votre projet en double-cliquant ou par glisser-déposer. 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 "Mes éléments" (Pro), 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 active, 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 5
•
M a n u e l d e p r i s e e n m a i n
Un son et un objet calendrier insérés dans "Mes éléments".
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 !
Figure 05 – Un cadre gris apparaît autour des éléments sélectionnés.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
33
Voici une page beaucoup plus aérée (image 06), dans laquelle vous pouvez insérer des éléments comme bon vous semble.
Figure 06 – Une page aérée prête à recevoir des éléments.
Insérer des images, du son, de la vidéo
Rien de plus simple. Tout est prévu dans Web Creator pour faire vite. Ainsi, l’interface de Web Creator offre une barre d’outils qui permet d’insérer rapidement des éléments (Image 07).
34
Figure 07 – Insérez rapidement des éléments depuis la barre d’outils.
Nous vous donnons ci-dessous quelques exemples, sachant que le principe reste le même pour tous les éléments : avec un clic sur le bouton correspondant à l’objet, vous définissez ses propriétés et lorsque vous validez la boîte de dialogue des propriétés, l’élément en question est inséré dans la page. Nous vous conseillons de vous référer à l’aide du programme pour des explications plus précises.
We b C r e a t o r 5
•
M a n u e l 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).
Figure 08 – La fenêtre des propriétés de l’image.
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 (figure 09), avant de l’insérer sur la page web.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
35
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.
Figure 09 – Web Creator affiche un aperçu avant l’insertion d’une 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.
36
We b C r e a t o r 5
•
M a n u e l 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.
Remarque
Comme vous pouvez le voir sur la figure 11, chaque nouvel
élément inséré apparaît sous la forme d’une icône dans le cadre Éléments de la Barre de sélection, dans la partie droite de l’interface.
Figure 11 – L’image apparaît sous la forme d’une icône dans le cadre
Éléments de la Barre de sélection.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
37
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.
Remarque
Pour modifier les dimensions d’une image, tout en maintenant ses proportions, saisissez l’un des coins de l’image avec le curseur de la souris, et tout en maintenant la touche
MAJ enfoncée, déplacez-le curseur.
La procédure pour insérer une vidéo ou un son est rigoureusement identique. Pour une vidéo, cliquez dans la barre d’outils sur l’icône en forme de pellicule (figure 12), ou bien appelez-le menu Insertion/Animation-Vidéo. Et pour insérer un son, cliquez sur le bouton en forme de haut-parleur (figure 12) ou appelez le menu Insertion/Son.
Figure 12 – Les boutons d’insertion de vidéo et de son.
Insérer du texte
Pour insérer du texte, cliquez sur l’icône en forme de A dans la barre d’outils, 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).
38
We b C r e a t o r 5
•
M a n u e l 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.
Saisissez votre texte à l’intérieur du cadre. Puis utilisez la barre d’outils
"Texte", située par défaut en haut de la fenêtre, pour appliquer des attributs à ce texte, comme la justification, la police, la taille du corps et bien d’autres.
Modifier les attributs du texte
Web Creator permet d’appliquer des styles à tout ou une partie d’un texte seulement. Sélectionnez par exemple une phrase de votre texte. Puis modifiez les attributs en changeant la police, la grosseur des caractères, le style (gras, italique, souligné), ou bien la couleur de la police en cliquant sur le bouton rectangulaire, noir par défaut, et doté d’une petite flèche. Cette dernière permet, après avoir cliqué dessus, de choisir une autre couleur dans la palette qui s’affiche alors. Vous remarquerez que le style ne s’applique qu’au bloc de texte sélectionné et que les modifications s’affichent en temps réel (figure 14).
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
39
40
Figure 14 – Les modifications ne s’appliquent qu’au bloc de texte sélectionné.
Attribuer une couleur de fond au texte
Découvrons maintenant une autre fonction intéressante : la modification de la couleur de fond du texte. Pour attribuer une couleur de fond au texte, dans les propriétés de la Barre des éléments, déroulez l’option Arrière-plan invisible et choisissez Non (image 15).
Figure 15 – Décochez l’option Transparent pour appliquer au texte une couleur de fond.
Cliquez ensuite sur l’option Arrière-plan (couleur) (Image 15-1) puis sur
Figure 15-1 – Déterminez ensuite la couleur de l’arrière-plan.
We b C r e a t o r 5
•
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’étape de la figure 15, en choisissant Oui pour un arrière-plan invisible.
Figure 16 – Le sélectionneur de couleur.
Figure 17 – Texte avec couleur de fond.
Insérer un lien hypertexte
Un lien hypertexte permet, en cliquant sur du texte, une image, ou tout autre objet multimédia, d’accéder à une autre page web, ou même d’ouvrir une application comme Word.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
41
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.
42
We b C r e a t o r 5
•
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).
Figure 21 – Saisissez l’adresse email.
Remarque
Pour supprimer un lien hypertexte, cliquez sur l’icône en forme de croix à droite du champ Lien (figure 22).
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
43
Figure 22 – Suppression d’un lien.
Cliquez sur OK pour retourner à la fenêtre des propriétés du texte. Puis, dans celle-ci, encore sur OK, pour retourner en mode Édition.
Intégrer des éléments Excel
Intégrer des cellules
Vous avez des tableaux ou des graphiques qui proviennent d’Excel ou de
Powerpoint à intégrer ? Allons-y. Web Creator propose une fonction d’intégration très simple à utiliser. Ceci permet une intégration très propre. Bien entendu, Web Creator se charge de cette conversion, et le tout se passe selon un simple copier/coller.
Commencez par créer votre tableau sous Excel. Normalement, ça vous savez le faire ! (figure 23).
44
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 enfoncé jusqu’à ce que toutes les cases soient sélectionnées. Les cellules sélectionnées apparaissent en grisé (image 24).
We b C r e a t o r 5
•
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).
Figure 25 – Sélectionnez la fonction Coller dans le menu contextuel de Web
Creator, accessible en cliquant sur le bouton droit de la souris.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
45
46
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éplacez 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.
Remarque 1
Le tableau ayant été importé sous forme de tableau, vous pouvez encore apporter des modifications au niveau de son contenu dans Web Creator.
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).
We b C r e a t o r 5
•
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).
Figure 29 – Votre graphique Excel intégré dans Web Creator cette fois sous forme d’une image non modifiable.
Remarque
La procédure est identique pour intégrer des éléments issus de Powerpoint.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
47
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 projet s’affichent (figure 30).
48
Figure 30 – Affichage de toutes les pages du projet en cours.
Plusieurs solutions s’offrent à vous. Vous pouvez :
• partir d’une page vierge
• partir d’une page du modèle
• dupliquer la page en cours
Créer une nouvelle page
Cliquez avec le bouton droit de la souris n’importe où dans l’onglet Pages du projet. Dans le menu contextuel qui s’affiche, choisissez Nouvelle
(figure 31).
We b C r e a t o r 5
•
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.
La fenêtre Sélection d’un modèle de page s’affiche (figure 32).
Figure 32 – Création d’une nouvelle page à partir d’un modèle.
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 partir 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 5
•
M a n u e l d e p r i s e e n m a i n
49
Figure 33 – Création d’une nouvelle page à partir d’une page vierge.
Dupliquer une page
Cliquez avec le bouton droit de la souris n’importe où dans l’onglet Pages du projet de la Barre de sélection. Dans le menu contextuel qui s’affiche, choisissez Dupliquer (figure 34).
50
figure 34 – Dupliquer une page à partir du menu contextuel.
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Web Creator demande ensuite d’enregistrer la page. La fenêtre Enregistrer sous s’affiche. Pour cet exemple, nous nommons cette page
Page dupli-
quée. Cette opération effectuée, la page dupliquée s’affiche dans l’onglet des pages du projet (figure 35).
figure 35 – La page dupliquée s’affiche dans les pages du projet.
Créer un lien d’une page à l’autre
Un site web est constitué de pages et de liens entre ces pages. Nous allons désormais lier deux pages. Depuis la page d’accueil, nous allons créer un lien vers la page fraîchement dupliquée.
Depuis l’onglet Pages du projet, double cliquez sur la page Accueil, afin de l’afficher dans la fenêtre d’édition. Puis sélectionnez l’icône en forme de flèche. Depuis l’onglet Elément, cliquez sur l’option Lien, puis Lier à. Puis cliquez sur l’icône (figure 36).
Figure 36 – Paramétrage d’un lien depuis la Barre de sélection.
La fenêtre Lier à s’affiche (figure 37).
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
51
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).
52
Figure 38 – Sélectionner la page d’accueil.
Validez en cliquant sur OK puis refermez la boîte de dialogue en cliquant
également sur OK.
We b C r e a t o r 5
•
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).
Figure 39 – Prévisualisation de la page depuis l’onglet Prévisualisation dans Internet Explorer.
Visualiser dans Internet Explorer
Pour vérifier le rendu exact sur Internet Explorer ou tout autre navigateur, appelez la commande Affichage/Visualiser avec Microsoft Internet Explorer.
La page s’affiche instantanément dans Internet Explorer (figure 42).
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
53
54
figure 42 – Prévisualisation de la page dans Internet Explorer.
Et si vous cliquez sur la flèche, sur laquelle vous venez de paramétrer un lien, la page dupliquée s’affichera.
Mettez votre site en ligne
L’hébergement
Pour mettre en ligne votre site, vous devez d’abord trouver un hébergeur. Il existe des dizaines d’entreprises qui offrent gracieusement ce service :
Wazanet, Yahoo, Hotmail de Microsoft, etc. Tapez « Hébergement gratuit » dans Google, et vous serez surpris du résultat ! Nous n’en conseillons pas un plus qu’un autre. Tant qu’ils sont gratuits et qu’ils offrent un bon débit, ces prestataires suffiront à héberger quelques pages personnelles.
Par contre, les solutions gratuites s’accompagnent souvent de publicité qui se superpose à vos pages. Non seulement cela créée des distractions pas toujours souhaitables, mais en plus il arrive que le code de ces pubs soit mal ficelé et interfère avec le bon affichage de votre propre matériel ! Testez bien avant de vous contenter de cette solution. En conclusion, les hébergements gratuits peuvent être acceptables pour des sites perso ou récréatifs.
We b C r e a t o r 5
•
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 solutions 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/hebergement.
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.
Le transfert sur le web
Appelez la commande "Outils/Optimisation du site" afin de préparer au mieux les pages avant leur envoi notamment en supprimant des éléments qui ne sont plus utilisés. La durée de l’optimisation varie bien sûr en fonction de l’importance du site web considéré et du nombre d’éléments qu’il contient. Une fois cette opération terminée, appelez la commande
"Outils/Télécharger vers l’hébergeur". La boîte dialogue "LMSOFT FTP Site
Uploader" apparaît alors.
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 ».
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
55
Remarque
A partir du moment où un site est préparé et mis en ligne une première fois, il est possible d’accélérer la mise à jour en ne transférant que les changements apportés à ce site.
A cette fin, le logiciel compare la nouvelle version avec l’ancienne. Ainsi, seuls les nouveaux fichiers ou ceux qui ont été modifiés seront transférés vers le serveur d’hébergement.
56
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Service Clients
Le Service Clients est à votre disposition. Contactez-nous par téléphone, du lundi au vendredi de 9h à 12h et de 14h à 18h au : 08 92 70 01 53
• 0,34 euro TTC/mn depuis la France Métropolitaine.
• Pour les DOM-TOM : 0,282 euro TTC/mn pour la Guyane, les îles de Saint
Barthélémy et de Saint Martin – 0,306 euro TTC/mn pour la Martinique, la Guadeloupe et la Réunion.
Par e-mail, via notre site web, www.mindscape.com, rubrique Support Technique>Nous écrire.
Malgré tout le soin apporté à la réalisation de ce programme, il se peut que selon la configuration de votre ordinateur, vous obteniez un blocage lors du lancement du produit ou que certains messages apparaissent.
Vous trouverez depuis le démarrage automatique du produit (autorun), un bouton
Aide & Support, accessible également depuis Démarrer > Programmes, contenant une liste des questions les plus fréquemment posées (FAQ).
Celle-ci vous renseignera sur les éventuels problèmes rencontrés avec nos logiciels ainsi que leurs solutions. Vous pouvez retrouver ce document :
• A la racine du CD dans le répertoire SAV sous le nom "FAQ Standard.html".
• Sur notre site Internet, www.mindscape.com, rubrique : Support Technique >
Problèmes Communs.
Si le problème que vous rencontrez ne figure pas parmi ceux qui sont référencés, ou si votre problème persiste après avoir essayé toutes les manipulations indiquées, merci de nous retourner par courrier, fax ou e-mail le formulaire de renseignements
(.doc ou .txt) présent à la racine du CD-ROM dans le répertoire SAV sous le nom :
"Formulaire SAV".
Veuillez lors de votre appel vous munir des informations suivantes :
• Nom du produit (version) et description du problème (libellé du message d’erreur et son contexte).
• Configuration de votre ordinateur et version du système d’exploitation : processeur et vitesse, quantité de mémoire vive (RAM), types de carte son, de carte graphique et marque du lecteur de CD-ROM.
La garantie sur les cédéroms Mindscape prévoit le remplacement sans frais de tout cédérom défectueux dans les 90 jours suivant la date d’acquisition (ticket de caisse faisant foi). Au delà et/ou à défaut de pouvoir justifier l’achat de ce logiciel, nous vous demanderons une participation aux frais d’échange. (chèque libellé à l’ordre de
Mindscape). Pour procéder à ce remplacement, écrivez à l’adresse ci-dessous :
Mindscape Service Clients – 73-77, rue de Sèvres
92514 Boulogne-Billancourt CEDEX – France
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
57
58
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
59
60
We b C r e a t o r 5
•
M a n u e l d e p r i s e e n m a i n
Link pubblico aggiornato
Il link pubblico alla tua chat è stato aggiornato.