Vous avez créé votre propre site avec IziSpot (voir notre numéro 627 page 38 et 39). Pour améliorer son apparence, vous avez utilisé l’un des modèles du logiciel, autrement dit une charte graphique. Mais celle-ci ne vous convient pas vraiment. Pourquoi ne pas créer votre propre modèle (charte) graphique et l’appliquer à votre site ? Cette charte regroupera une bonne fois pour toutes les éléments figés de votre site : le style, la taille, la couleur des caractères, la couleur de fond de la page, l’emplacement du menu, du texte, d’un logo, etc.
Patricia Frein (Carm2i)
Étape 1 : Créez une nouvelle charte graphique
1 Une fois que votre site est ouvert dans IziSpot, cliquez en bas de l’écran sur le bouton Graphisme puis, dans le menu qui se déroule, sur Editeur de chartes :2 Dans la fenêtre Editeur de chartes graphiques qui s’affiche, choisissez, dans le menu Fichier, l’option Nouveau.3 Dans la partie Informations générales, tapez dans les zones Nom de la charte, Catégorie et Couleur, les renseignements qui permettront de retrouver facilement votre charte dans le classeur des chartes d’IziSpot. Ces informations peuvent être modifiées ultérieurement. Par exemple :4 Dans la partie Taille, indiquez la largeur et la hauteur des pages qui vont composer votre site. Par défaut, les chartes graphiques sur Internet sont définies en 800 x 600 pixels.Mais de plus en plus de personnes peuvent avoir une résolution d’écran de 1 024 x 768 pixels, ce qui permet d’avoir une charte de plus grande taille. Ici, cliquez dans la zone Taille, puis sur Ecran 1 024 x 768 (960 x 560) :Cliquez dans la liste sur le bouton Ajouter.
Étape 2 : Composez la charte
Dans la page blanche qui s’affiche, composez le modèle graphique en modifiant ses options et en utilisant deux types d’éléments : ceux décoratifs qui sont des images importées et ceux dynamiques qui correspondent à des zones dont le contenu est modifiable lors de la création de la page du site.Changez les options de la charteLes options générales de la charte permettent de définir la couleur de fond, mais aussi l’apparence générale des caractères comme la police et la couleur du texte, des liens actifs et visités, etc. Voici comment les modifier.1 A partir de la fenêtre Editeur de chartes graphiques, choisissez dans le menu Propriétés, l’option Propriétés de la charte.2 Pour changer la couleur de fond de la page, cliquez sur Couleur de fond dans la partie Document, puis à droite de cette zone sur le bouton Parcourir :Dans la palette de couleur qui apparaît, cliquez sur la couleur à utiliser puis sur le bouton OK.3 Pour modifier l’apparence de la police de caractères par défaut, cliquez sur Police par défaut dans la partie Document puis, à droite de cette zone, sur le bouton Parcourir. Dans la fenêtre affichée, indiquez le type de la police, sa taille, etc., puis cliquez sur le bouton OK.4 De la même manière que dans les points 2 et 3, vous pouvez modifier la couleur et l’apparence des liens actifs et visités en cliquant dans les zones adéquates dans la partie Documents et effectuer vos choix.5 Fermez la fenêtre des Propriétés en cliquant en haut à droite de celle-ci sur la croix.Insérez des imagesAttention : les éléments décoratifs comprennent des photos, des formes géométriques, des boutons, des zones de couleurs, etc. Ces éléments sont tous des images que vous importez dans l’éditeur. Vous devez donc les avoir conçus préalablement avec un logiciel adapté comme un logiciel de retouches d’images. Puis pour faciliter les manipulations, stockez-les dans un dossier commun.1 A partir de la fenêtre Editeur de chartes graphiques, choisissez, dans le menu Objets, l’option Nouvelle image.Recherchez l’image à insérer puis double-cliquez sur son nom.2 Pour augmenter ou diminuer la taille de l’image, cliquez sur celle-ci, puis placez le pointeur sur l’une des poignées noires qui l’entourent :Effectuez un cliquer-glisser vers le centre de l’image pour la diminuer ou vers l’extérieur pour l’agrandir.3 Pour déplacer l’image dans la page, cliquez dans celle-ci, puis placez le pointeur en son centre et effectuez un cliquer-glisser vers l’endroit souhaité.Vous pouvez ainsi ajouter d’autres images (Illustration 2).Ajoutez des zones modifiablesLes zones modifiables (dynamiques) permettent de positionner une zone de menu, une zone de titre et une zone de texte. Pour commencer, choisissez dans le menu Objets de la fenêtre Editeur de chartes graphiques, l’option Nouvelle zone dynamique. Puis pour :Ajouter une zone de menuCliquez sur Zone de navigation et sur Ajouter. La zone menu permet d’afficher les liens vers les pages existantes de votre site. Son contenu se remplit automatiquement au fur et à mesure de la création des pages. Un cadre nommé Zone de navigation (Défaut) apparaît (Illustration 2).Pour modifier l’apparence du menu, double-cliquez au centre de cette zone. Un exemple apparaît à droite de la fenêtre. Cliquez dans la zone Image à gauche puis sur la flèche qui s’affiche :Cliquez sur le modèle souhaité, par exemple -4Vista. Fermez la fenêtre des propriétés en cliquant en haut à droite de celle-ci sur la croix.Ajoutez une zone de titreCliquez sur Titre de la page et sur Ajouter. Cette zone affiche automatiquement le titre de la page que vous avez précisé au moment de sa création. Un cadre nommé Titre de la page (Défaut) apparaît (Illustration 2).Pour modifier l’apparence du titre, double-cliquez au centre de cette zone et dans les zones Couleur et Font, choisissez l’apparence et la couleur des caractères.Ajoutez une zone de texteCliquez sur Contenu de la page ensuite sur Ajouter. Cette zone permet de taper le texte principal de la page lors de la création de la page. Un cadre nommé Contenu de la page (Défaut) apparaît (Illustration 2).Remarque : vous pouvez modifier la taille et l’emplacement de ces zones en effectuant les mêmes manipulations que dans les points 3 et 4 de la partie Ajouter une image dans l’étape 2.
Étape 3 : Exportez et appliquez le modèle
1 Une fois que vous avez fini votre modèle, sauvegardez-le en choisissant dans le menu Fichier, l’option Exporter et cliquez sur Dans un fichier.Pour pouvoir retrouver rapidement le modèle, choisissez le même emplacement sur votre ordinateur que celui de votre site. Puis intitulez le fichier dans la zone Nom du fichier et cliquez sur le bouton Enregistrer.2 Pour appliquer le modèle à votre site, cliquez sur la croix en haut à droite de la fenêtre Editeur de chartes graphiques.IziSpot vous demande si vous souhaitez appliquer le modèle à votre site. Cliquez sur le bouton Oui.La charte s’applique automatiquement à toutes les pages existantes et par la suite aux nouvelles pages ( Illustration 1)
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
