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
