Chapitre 3 : Personnaliser son template avec Artisteer Nous allons franchir une étape dans l utilisation d Artisteer, la personnalisation! Vous souhaitez que votre site soit unique, qu il ne ressemble à aucun autre? Artisteer est encore là pour réaliser vos souhaits! Dans le Chapitre 2 je vous avais décrits les diverses fonctionnalités qu Artisteer proposait. Mais sachez que vous pouvez y apporter votre propre touche personnelle : insérer des photos, créer des couleurs etc.. C est ce que je vais vous montrer dans ce chapitre. Rappelez vous la barre de tâches, nous allons vous révéler tous les secrets des onglets! - Couleurs et Polices : Cet onglet permet de modifier les couleurs et les polices du modèle. -Les Thèmes de couleurs : Pour changer le thème du site, choisissez un thème à partir des thèmes de couleurs disponibles. En outre, chaque couleur peut être modifiée. Ayant choisi les couleurs, vous pouvez les affiner en ajustant le contraste global. - Les Peintures : Dans ce bloc vous avez la possibilité d'ajuster la couleur thème. Vous pouvez sélectionner l'un des régimes prédéfinis ou personnaliser le thème de la couleur en choisissant les couleurs souhaitées. Cliquer sur "Ajuster les options va ouvrir la liste des options de couleurs. Personnaliser son template HI-TECH Depanne 1/14
En cliquant sur ces petites flèches, vous pouvez choisir la couleur de votre choix. Ce thème orange que je vous présente depuis le début de ce tutoriel ne vous plait pas, alors changez pour du bleu ou du vert! Vous avez ici une déclinaison de palettes de luminosité. La luminosité fait référence à la blancheur et l'intensité d'une couleur. La luminosité pour une couleur donnée variera de blanc pur jusqu'au noir. Les valeurs prises en charge sont de -100% à 100%, où 100% et -100% réfèrent à la plus haute et la plus faible des composantes RVB. Personnaliser son template HI-TECH Depanne 2/14
La saturation correspond à la quantité de gris dans une couleur. Les valeurs supportées sont de - 100% à 100%, où 100% signifie grande quantité du gris. Cliquez ensuite sur aperçu et vous aurez une visualisation de votre paramétrage. Si cela vous convient, enregistrez votre travail, sinon, faites varier luminosité et saturation afin de trouver ce que vous recherchez. - Les Polices : Jeux de polices : vous permet de changer le texte et la position des polices. Cela vous permet de choisir l'un des modèles standards de police ou créer votre propre jeu de polices. Typographie : vous permet de sélectionner l'un des styles de typographie ou de créer votre propre style de conception. Personnaliser son template HI-TECH Depanne 3/14
Echelle de Police vous permet de modifier la taille de la police. Personnaliser son template HI-TECH Depanne 4/14
- Mise en forme de page L'onglet mise en forme de page est l'endroit où vous pouvez rapidement changer le positionnement global des éléments sur la page. Vous pouvez rapidement changer la mise en page, le positionnement de l'en-tête, les menus, les pieds de page, varier le nombre de colonne et leur largeur. Vous trouverez toute une panoplie de proposition dans cette partie là. Personnaliser son template HI-TECH Depanne 5/14
- Arrière-plan : Le fond de la page est tout aussi important que la page elle-même. Vous pouvez modifier les effets d'arrière-plan pour obtenir l'aspect désiré. Deux possibilités s offrent à vous : utiliser les combinaisons qu Artisteer met à votre disposition, soit vous utilisez votre propre fichier (photo, dessin, montage photo ). Voici quelques exemples de Texture/Image Personnaliser son template HI-TECH Depanne 6/14
- Feuille L'onglet Feuille offre la possibilité de changer le positionnement global et le look de la feuille ou de la page. Vous pouvez préférer une feuille avec des bords plus ou moins arrondis. Vous pouvez également déplacer la feuille à partir du haut de la page, mettre un effet d'ombre, modifier la largeur des bords de la feuille, la transparence du fond, ou la couleur de la feuille. Personnaliser son template HI-TECH Depanne 7/14
Largeur : Définit la largeur de feuille en pixels. Remplissage : Définit le remplissage pour le contenu de la feuille en pixels. Rayon : Définit le rayon d'angle de la feuille en pixels. Largeur de bordure : Fixe la largeur des bordures pour la feuille en pixels. Transparence : Définit la transparence de la feuille Ombre : Taille : Définit la taille de l'ombre de la feuille en pixels. Opacité : Définit l'opacité de l'ombre de la feuille Distance : Définit le décalage de l'ombre en pixels. Angle : sens de décalage de l'ombre. - En-tête : L'onglet en-tête contrôle tous les aspects de l'en-tête, y compris la taille, les couleurs, les polices et les images de fond. Vous pouvez utiliser l'onglet en-tête pour apporter des modifications tout en étant capable de mettre des images. - Mise en forme : vous pouvez faire varier la hauteur, la largeur, l arrière plan ( avec les propositions prédéfinies ou une image personnelle). - Effets d image d arrière-plan : Vous pouvez ajouter des effets visuels à l'arrière-plan pour faire de votre conception une œuvre unique. - Photo de premier plan : Cette section offre la possibilité d'ajouter une photo qui viendra en complément de votre en-tête. Vous avez la possibilité de choisir la photo à partir d'une variété de photos professionnelles et de nombreux types de sujets. Vous pouvez également insérer votre propre photo. Ensuite, vous pouvez la positionner à droite, ou à gauche, ou la centrer. Personnaliser son template HI-TECH Depanne 8/14
- Titre : Cette section offre la possibilité de modifier le titre de l en-tête et le texte slogan de votre conception. Vous pouvez choisir la position, la taille, et l alignement. - Menu : L'onglet "Menu est utilisé pour contrôler la position et l'apparence du menu de navigation principal. Il se compose de la barre de menu et des options de menu. Le menu peut être comme un menu de site web standard ou sous forme d'onglets et/ou boutons. - Styles et coloriage du menu. Vous pouvez changer l'ensemble des boutons du menu, y compris les formes, les couleurs, les bords et l'espacement entre les éléments. Vous choisissez ensuite les couleurs que vous souhaitez apporter à vos boutons. Voici les possibilités proposées. Personnaliser son template HI-TECH Depanne 9/14
- Barre de Menu : Vous pouvez affiner encore la barre de menu ( là où se trouve vos onglets) en choisissant barre de menu. Une texture et un dégradé vous sont proposés, ainsi que Remplissage et Bordures. Personnaliser son template HI-TECH Depanne 10/14
- Elément et sous élément : Cette section vous permet de modifier les éléments (ou bouton ou onglet) et les sous-éléments, en choisissant le remplissage le rayon d angle, la largeur de la bordure, le texte... - Articles : L'onglet article vous permet de contrôler la mise en forme de l'article. Vous pouvez choisir la forme de l'article (avec ou sans bloc), le formatage du texte, des polices d en-tête, hyperliens, citation, puces, images, tableaux, ou modifier l'en-tête et pied de l'article. Dans cette partie là vous pourrez modifier et personnaliser votre article et influer sur l image, la forme, le formatage du texte, les autres éléments (en têtes, hyperlien, citations, puces, image, tableau), l en tête et le pied de page. Personnaliser son template HI-TECH Depanne 11/14
- Aperçu Image : vous permet d insérer une image ou non dans votre article. - Forme : Dans cette section, vous pouvez choisir la forme de contenu d'article (avec ou sans bloc). Vous pouvez choisir : - la forme de votre article - définir les marges droites et gauches par rapport à la feuille - le remplissage du texte - remplir avec une couleur - définir une bordure et sa couleur - définir le rayon du bloc si besoin - appliquer une ombre - Formatage du texte : Cette section vous permet de modifier le formatage du texte comme: Marge gauche, Marge droite, hauteur de ligne, espacement de caractères, polices et alignement du texte. - Autres éléments : Cette section offre la possibilité de contrôler et changer les options de police, hyperliens, citations, des puces graphiques, bordures de tableau et d'image. En-têtes : de H1 à H6 (les différents titres crées), couleur, taille, style et alignement Hyperlien : lien, lien visité et survolé dans la couleur, la police, la taille, le style et le soulignement. Citation : Vous pouvez remplir la zone, mettre une bordure, choisir un icône et toutes les options de police. Puces : Vous pouvez choisir la couleur et l image. Vous pouvez intégrer votre propre image de puce et la formater. Image : C est ici que vous sélectionner la bordure et sa couleur, le style de bordure et sa largeur. Toutes les images intégrées dans votre article auront ce formatage. Tableau : De même que pour les images, vos tableaux seront formatés. - En-tête et pied de page : Vous pouvez personnaliser l'en-tête et le pied de l'article, ajuster le style, le texte, et le titre en choisissant des icônes des images prédéfinies ou en utilisant vos propres images. Vous pouvez afficher ou non la date, l'auteur, les modifications, éditer des icônes situées dans la section en-tête de l'article, les étiquettes de la catégorie et les icônes situées en bas de page des commentaires de l'article (si le thème le permet). Mettez en forme votre en-tête, modifier la couleur, mettre une bordure, installer une icône, changer le texte, les liens Artisteer vous donne toutes les possibilités d avoir un thème unique et original. Personnaliser son template HI-TECH Depanne 12/14
- Barre latérale et Menu vertical : Ces deux fonctions permettent de personnaliser l intérieur de votre article et plus particulièrement les menus qui apparaissent à gauche ( pour notre exemple). Vous allez pouvoir choisir des blocs arrondis ou carrés, individualisés ou pas, leur position les uns par rapport aux autres. Le menu vertical vous permettra de peaufiner la couleur, la forme, la texture, le dégradé, la bordure, le texte. N hésitez pas à tester les fonctionnalités jusqu à trouver votre bonheur! Personnaliser son template HI-TECH Depanne 13/14
- Boutons : L'onglet Boutons est utilisé pour choisir la forme et le style des boutons. Vous pouvez choisir parmi une grande variété de styles de boutons. - Pied de page : L'onglet pied de page est utilisé pour spécifier le style de pied de page du site. Les options incluent les effets suivants: Couleur, Dégradé,Texture, Aligner,Remplissage du texte, Transparence, Police de texte,formatage des Hyperliens et des Icône RSS. Voilà, nous venons de voir de façon simple et rapide les fonctionnalités de Artisteer qui vont vous permettre d avoir VOTRE site bien à vous, celui qui ne ressemble à aucun autre. Bien sûr, plus vous allez utiliser Artisteer et plus cela va vous paraitre simple! Surtout n hésitez pas à enregistrer votre travail le plus souvent possible, voire en faire plusieurs copies variantes, car parfois, vous aurez du mal à vous décider! Personnaliser son template HI-TECH Depanne 14/14