Tutoriel. Votre site web en 30 minutes

Transcription

1 Tutoriel Votre site web en 30 minutes

2 But du tutoriel Nous allons vous présenter comment réaliser rapidement votre site avec Web Creator Pro 6 en vous basant sur l utilisation des modèles fournis avec le logiciel. Nous aborderons notamment les thèmes suivants : 1) Choisir et personnaliser un modèle 2) Adapter les couleurs du modèle à votre organisation ou votre logo 3) Intégrer un logo personnel et une image depuis la bibliothèque de Web Creator 4) Modifier les blocs de texte 5) Créer des liens depuis différents éléments 6) Modifier les menus 7) Modifier les boutons 8) Ajouter de nouvelles pages à votre projet Introduction Avant de créer votre site, vous devez bien sûr en avoir planifié son organisation, soit rapidement exposé : 1) Nombre et objectif des pages 2) Interaction prévues entre les pages 3) Présence d un menu. Sa composition et ses liens aux pages 4) Texte des différents paragraphes que vous voulez afficher : présentation de votre activité, de ses dirigeants, liste et coordonnées des contacts, adresse postale et , descriptifs des produits, etc 5) Divers logos et images que vous voulez utiliser (pour vos produits par exemple), bannière éventuelle que vous voulez placer en haut de vos pages. Le tout en format léger mais de bonne définition (.PNG ou.jpg) Concernant le logo, voici celui que nous allons utiliser : Nous utiliserons aussi le texte suivant saisi simplement dans le Bloc-notes de Windows : Bienvenue, Ce site a pour but de vous présenter notre activité de création, aménagement et restructuration de jardins et espaces verts. Très bonne visite! Une fois ces différents éléments préparés et réunis, vous pouvez débuter la création de votre site à proprement parler. Même dans un monde parfait, on ne peut pas tout prévoir, et certains éléments ne pourront être déterminés que lorsque vous aurez choisi un modèle, l organisation et le nombre de champs variant bien sûr de l un à l autre. Nous allons vous montrer la mise en œuvre des principaux éléments, à vous ensuite de développer et d agrémenter votre site suivant vos désirs. Votre site web en 30 minutes Page 2 / 17

3 L Assistant Nouveau Projet Pour commencer, démarrez Web Creator Pro 6. Une fois le programme chargé, la fenêtre de sélection d un projet existant s affiche. Si Web Creator Pro 6 était déjà démarré, ouvrez alors le menu Fichier. Cliquez maintenant sur Nouveau Projet. La première fenêtre qui apparaît est une note d information un peu technique évoquant le travail avec les modèles et les blocs. Vous pouvez la lire puis la refermer (de manière prolongée en cochant la case située en bas à gauche). Vous accédez maintenant à l assistant de création de projet en haut duquel vous voyez plusieurs onglets. Vous vous trouvez pour l instant dans le premier, servant à choisir le Style de votre site, en se basant sur les modèles de Web Creator Pro 6. Votre site web en 30 minutes Page 3 / 17

4 Différents boutons radio vous donnent aussi accès à des modèles déjà présents dans les versions précédentes. Nous restons dans le domaine de la version 6. Les couleurs de notre logo sont le vert, le mauve et le marron. L activité de notre entreprise étant basée sur les espaces verts, nous allons opter pour un modèle reprenant ces bases et le vert, soit le modèle V6 Style 03 que vous voyez à droite de l image précédente. Notez qu en bas de la fenêtre, le nom de votre nouveau projet et son chemin d accès sont affichés et modifiables. Pour passer à l étape suivante, double-cliquez sur le modèle choisi, ou sélectionnez-le, puis cliquez sur le bouton Suivant. Vous passez alors au deuxième onglet, Page. Vous choisissez ici l apparence et l organisation générale de la page. Votre site web en 30 minutes Page 4 / 17

5 Nous aurons l occasion plus tard d évoquer à nouveau cet onglet qui sert aussi pour la création de nouvelles pages. Pour une première page de présentation, nous choisirons «Accueil», qui contient 5-6 zones de texte ainsi que 3 emplacements pour des images et le logo. Sélectionnez ce modèle et cliquez sur le bouton Suivant. La page qui s affiche ensuite, intitulée Thème, n est pas utilisée sur les modèles de la version 6 de Web Creator. Vous pouvez donc passer directement à la page suivante, soit Couleur/Aperçu. Modifier les couleurs du modèle Ici, vous pouvez modifier la couleur de certains composants de votre modèle. Ces différentes couleurs sont affichées à gauche, avec leurs composantes RVB. Comme notre logo contient du marron, nous allons modifier la base du fond de page, noir/gris, et la passer en marron. Pour cela, nous cliquons sur la sixième ligne, puis sur le petit bouton muni de points de suspension qui apparaît alors à sa droite. Pensez à toujours noter avant les composantes RVB de la couleur d origine, pour y revenir en cas de mauvaise manipulation. Dans la palette de couleurs qui s affiche ensuite, vous pouvez sélectionner la nouvelle couleur que vous voulez adopter en lieu et place du noir. Votre site web en 30 minutes Page 5 / 17

6 Dans notre cas, nous sélectionnons le marron clair, soit le rectangle de la deuxième colonne et cinquième ligne. Tout à droite de la boîte de dialogue, vous voyez une barre verticale affichant le dégradé de la couleur choisie. Encore à droite se trouve un curseur de réglage que nous descendons un petit peu, afin de foncer le marron choisi, pour qu il se rapproche au mieux de celui de notre logo. Si vous connaissez les composantes de couleurs exactes de votre logo, vous pouvez bien sûr les indiquer directement dans les zones correspondantes. Comme vous le voyez, vous pouvez procéder à des réglages très précis, vous permettant d obtenir rapidement un site avec des couleurs vraiment personnalisées. D ailleurs, une fois que vous avez défini exactement la couleur que vous désirez, cliquez sur le bouton Ajouter aux couleurs personnalisées. Cela permet de sauvegarder la nouvelle teinte et de la retrouver ensuite pour la réutiliser sans complications. Refermez la palette de couleurs en cliquant sur OK. Vous constatez alors que les couleurs de la page ont été adaptées à vos modifications. Dans notre cas, la ligne «Noir» contient maintenant les valeurs RVB «89, 45, 0» en lieu et place de «0, 0, 0» d origine. Votre site web en 30 minutes Page 6 / 17

7 Cliquez maintenant sur Terminer pour ouvrir votre projet dans Web Creator Pro6..image.Nouveau_Projet_WCP6_1.bmp Afficher votre logo En haut à gauche du projet, cliquez sur l image intitulée «Logo». Quatre poignées apparaissent alors autour. Simultanément, à droite de la fenêtre, dans la zone «Vue hiérarchique des éléments de la page», l élément LogoEdit est sélectionné. Juste en dessous se situe la barre des propriétés. Vous constatez que son titre est maintenant «LogoEdit». Ceci indique que les propriétés affichées sont bien celles de cet élément. Nous allons donc pouvoir le modifier. Tout en haut de l onglet Elément, ouvert par défaut, se trouve une ligne intitulée Fichier, avec 4 icônes à droite. Cliquez sur la deuxième, représentant un dossier, et qui permet de charger une image personnelle sur votre ordinateur. Vous pouvez maintenant parcourir l arborescence de votre disque pour chercher votre logo. Votre site web en 30 minutes Page 7 / 17

8 Une fois votre fichier choisi, cliquez sur Ouvrir et il apparaît en lieu et place de l ancien Logo. Charger une image de la bibliothèque Nous allons maintenant faire de même avec l image située à droite de la zone «Accueil» de la page : sélectionnez-la, puis dans la barre des propriétés, cliquez cette fois sur la première icône à droite du champ Fichier. Elle vous permet de choisir une image dans la bibliothèque d illustrations fournies avec Web Creator Pro 6. Votre site web en 30 minutes Page 8 / 17

9 A gauche se trouve la liste des catégories d images, et à droite l aperçu des fichiers que chacune contient. Parcourez les différentes catégories pour voir les types d illustrations proposés. Pour notre part, pour des espaces vert, nous sélectionnons l image SMR003.jpg de la catégorie Images. Une fois revenu à notre projet, l image est un peu plus petite que la zone d origine. Nous allons donc la redimensionner. Pour commencer, dans la barre des propriétés, décochez la case Verrouiller les proportions, afin de pouvoir changer la taille librement. Quatre nouvelles poignées apparaissent alors au-dessus, en-dessous, à droite et à Votre site web en 30 minutes Page 9 / 17

10 gauche de l image. Elles permettent de modifier la hauteur et la largeur de l image. En l occurrence, nous allons élargir l image, mais pas trop pour ne pas la déformer, et l agrandir aussi un peu, afin qu elle remplisse mieux l espace de la zone «Accueil». Modifier les champs de texte Nous allons maintenant modifier les champs de texte pour donner un peu d information sur notre activité. Comme expliqué en préambule, nous vous recommandons bien sûr de préparer vos textes après avoir identifié les différentes zones de texte de la page. Par contre, inutile de formater le texte, d appliquer du gras ou des italiques, etc Tout d abord, Web Creator Pro 6 vous permet d effectuer toutes ces opérations. Ensuite, suivant le logiciel de traitement de texte que vous utilisez, il se peut que certains formatages soient perdus lors du transfert vers Web Creator. Enfin, ne sachant pas exactement la place que va prendre votre texte et la taille finale que vous donnerez à vos blocs de texte, il vaut mieux effectuer la mise en forme directement sous Web Creator Pro 6. Conseil : utilisez donc un éditeur simple et neutre, comme le Bloc-notes de Windows. Pour l exemple, nous allons éditer le texte du champ «Accueil», assez court et «passe-partout» ; idéal pour un exemple de manipulation. Passer en mode édition Si vous cliquez une fois sur le bloc de texte «Accueil», cela sélectionne tout le cadre de texte. Vous le voyez aux poignées qui l entourent. Vous êtes alors juste en mode «sélection». Cliquez une deuxième fois dessus et le curseur de saisie apparaît alors à l emplacement ou vous aurez cliqué. Vous êtes maintenant en mode «édition». Votre site web en 30 minutes Page 10 / 17

11 Vous pouvez maintenant effacer le texte et le remplacer par celui que vous voulez en tapant simplement comme dans un traitement de texte. Sélectionner le contenu d un bloc de texte Si vous avez préparé votre texte à l avance, ouvrez l éditeur dans lequel il se trouve, le Bloc-notes de Windows par exemple. Sélectionnez le paragraphe destiné au champ «Accueil» et copiez-le en mémoire (Ctrl+C ou clic droit puis Copier). Revenez dans Web Creator Pro 6, puis sélectionnez tout le texte du bloc «Accueil». Pour ce faire cliquez une première fois dans le bloc de texte puis cliquez une deuxième fois pour faire apparaître le curseur de saisie, comme nous l avons fait précédemment. Vous êtes maintenant en mode «édition». Pour sélectionner tout le texte, appuyez maintenant sur les touches Ctrl + A ou bien cliquez avec le bouton droit de la souris et choisissez Sélectionnez tout. Dans les deux cas, cela sélectionne l ensemble du texte du bloc qui doit apparaître en surbrillance. Si ce n est pas le cas, c est que vous n étiez pas en mode «édition». Vous pouvez maintenant remplacer tout le texte sélectionné par celui copié précédemment en mémoire. Appuyez sur Ctrl+V ou cliquez avec le bouton droit de la souris et choisissez Coller. Le nouveau texte apparaît alors à la place de l ancien..image.nouveau_texte_1.bmp Panique : tout est sélectionné! Si à un moment donné, tous les éléments constituant votre page sont entourés de cadres et de poignées, c est très probablement que vous avez appuyé sur Ctrl+A alors que vous n étiez pas en mode «édition». Votre site web en 30 minutes Page 11 / 17

12 Pas de panique. Pour désélectionner les éléments, appuyez juste sur la touche Echap et les cadres disparaîtront. Refaites alors la manipulation expliquée précédemment en vous assurant que le curseur de saisie apparaît bien dans le texte. Modifier les attributs de texte Pour modifier l apparence du texte, repassez en mode «édition» en cliquant à l intérieur du bloc de texte. L édition de texte dans Web Creator Pro 6 fonctionne exactement comme dans un traitement de texte habituel : le menu Accueil dispense toutes les fonctions de mise en forme de caractères et de paragraphes usuelles, et même plus, en relation avec la finalité de création de site web. Créer un lien Notez à droite de la barre de menu de l onglet Accueil, les trois icônes permettant de créer rapidement des liens depuis du texte. Pour cela, il vous suffit de sélectionner un ou plusieurs mots, puis de cliquer sur le bouton Lien. Une boîte de dialogue s ouvre alors. Vous pouvez y choisir, parmi plusieurs éléments, celui vers lesquels vous voulez que pointe le texte en question : une autre page de votre site (quand vous en aurez plusieurs), une nouvelle page (que vous pouvez créer à la volée), l adresse d une page sur internet (une URL), une adresse mail (pour un lien de contact par exemple), etc Pour établir le lien, saisissez une rapide description dans le champ correspondant, puis cliquez en dessous, sur l icône en regard du type de lien choisi. Familiarisez-vous bien avec cette boîte de dialogue que vous retrouverez souvent, car c est la même, quel que soit l élément à partir duquel vous voulez établir un lien. Votre site web en 30 minutes Page 12 / 17

13 Modifier le menu Une dernière modification importante de votre page concerne le menu. Cliquez tout d abord dessus pour le sélectionner. La barre des propriétés, en bas à droite de l interface, prend alors le titre «Menu1» et affiche, dans la zone Items les différents composants du menu. Vous pouvez alors effectuer des modifications de deux ordres : le style (couleurs et forme) et le contenu (textes et sous-menus). Le style du menu par défaut est indiqué en haut de la barre des propriétés. En cliquant sur la première icône à droite du champ Style, vous pouvez choisir un modèle de menu pré-formaté, dans la bibliothèque de Web Creator Pro 6. En cliquant sur la deuxième icône, en forme de crayon, vous accédez à l éditeur de menu, très complet, qui vous permet de modifier tous les attributs du menu et des sous-menus. Son descriptif détaillé dépasserait le cadre de ce tutoriel et nous vous invitons à expérimenter ultérieurement les possibilités de modifications offertes, qui feront l objet d un autre tutoriel. Le deuxième type de modification, et le plus impératif, concerne les entêtes texte du menu. Votre site web en 30 minutes Page 13 / 17

14 Les propriétés affichent un aperçu du menu et de ses entêtes. Si vous cliquez sur l un d eux, «Menu1» par exemple, vous êtes automatiquement amené en bas de la barre des propriétés et le texte «Menu1» est mis en mode édition. Vous pouvez alors directement saisir le nom du premier entête de menu, «Accueil» par exemple ; c est celui qui permettra de revenir à la page principal depuis n importe quelle autre page. A droite de la zone Lien située juste en dessous, l icône en forme de crayon permet d ouvrir la boîte de dialogue Lier à, la même que nous avons vu précédemment pour établir un lien à partir d un texte. Détacher la Barre de propriétés Lors de la modification du menu, vous avez dû remarquer que la taille restreinte de la Barre des propriétés obligeait à des déplacements nombreux et gênants à la longue. Il serait plus simple d avoir une visibilité complète sur ses divers composants. Pour y arriver, cliquez, en haut à droite de la Barre des propriétés, sur le bouton en forme d épingle. Cela détache la barre et la place en mode fenêtré au milieu de l écran. Vous pouvez ainsi à loisir modifier toutes les entrées de menus en les visualisant dans leur ensemble. Une fois terminé, vous pouvez ranger la Barre des propriétés à sa place d origine en cliquant à nouveau sur l épingle. Panique : la Barre des Propriétés a disparu Si vous avez par mégarde appuyé sur la croix ou sur le bouton Fermer de la Barre des propriétés, celle-ci a disparu de l interface. Pour la faire réapparaître, cliquez simplement sur le bouton Propriétés situé en bas à droite de l interface de Web Creator. Rangez alors la barre à sa place en cliquant sur l épingle cette fois. Votre site web en 30 minutes Page 14 / 17

15 Modifier un bouton Un des derniers éléments présents sur la page est le bouton situé sous la zone «Accueil». Celui-ci peut par exemple servir à afficher vos coordonnées. Pour le modifier, cliquez simplement dessus. La Barre des propriétés vous permet maintenant de modifier son apparence en temps réel. Là encore, il est très pratique de détacher la barre pour visualiser entièrement toutes les informations. Et encore une fois, vous pourrez facilement établir un lien à partir de ce bouton depuis ces mêmes propriétés. Si vous voulez juste modifier le nom du bouton, effectuez un double-clic dessus et vous passerez en mode d édition directe sur le bouton. Son nom est aussi modifiable depuis la page Éléments de ses propriétés. Ajouter de nouvelles pages Une fois votre page d accueil terminée ou pendant son élaboration, vous voudrez bien sûr ajouter d autres pages à votre site. Trois possibilités principales s offrent à vous. 1) Comme nous venons de le voir, vous pouvez créer une page «à la volée», c est-à-dire, en créant un lien depuis une partie de texte, depuis une image sélectionnée, ou depuis une entrée de menu ou un bouton. Vous choisissez alors dans la boîte de dialogue de création de lien, la première option Une nouvelle page ou page existante. Une fois l icône cliquée, une nouvelle boîte de dialogue s ouvre. Votre site web en 30 minutes Page 15 / 17

16 Votre site ne contenant normalement qu une seule page à ce stade, vous cliquez alors sur le bouton Créer une nouvelle page et retrouvez ainsi l assistant de création de page que nous avons décrit au début de ce tutoriel. 2) L autre solution convient si vous préparez vos pages en avance, pour établir ensuite le lien entre ces pages via les menus, boutons ou textes qu elles contiennent. Dans ce cas de figure, ouvrez le menu Page, et cliquez sur la première icône, intitulée Nouvelle Page. Vous ouvrez alors l assistant de création de page que nous avons déjà vu précédemment et vous pouvez sélectionner soit une page vide, soit, plus logiquement, une page basée sur le même modèle que celui choisi au départ pour votre site. 3) Enfin, Web Creator Pro 6 met à votre disposition un gestionnaire de pages, via la troisième icône du menu Page. Votre site web en 30 minutes Page 16 / 17

17 La zone centrale affiche un aperçu des pages du projet. Lorsque votre site contient beaucoup de pages nommées de manière explicite, pour accélérer le défilement de celles-ci, vous pouvez désactiver l aperçu en décochant la case éponyme située en bas de la fenêtre. Les quatre icônes situées à droites servent respectivement, de haut en bas, à créer, renommer, dupliquer et enfin effacer une page. La troisième icône est très intéressante pour créer des pages d organisation complètement similaire, pour des présentations de fiche-produits par exemple. Elle permet en effet, en dupliquant une page terminée, de garder sa structure générale et tous les éléments que vous voudrez voir afficher sur chaque page similaire. Vous n aurez plus ensuite qu à adapter le descriptif des fiches aux produits considérés sur les nouvelles pages. Si vous ne souhaitez reproduire qu une partie de page (entête, bannière, menu par exemple) l utilisation des blocs, illustré par un autre tutoriel, sera à privilégier. Votre site web en 30 minutes Page 17 / 17