Notre magasin Rue Albert 1er, 7 6810 Pin - Chiny (/fax: 061/32.00.15 |
Tutorial / Cours Sur Frontpage |
|
FORMATIONS |
Le MAGASIN YBET |
PRODUITS et SERVICES |
COURS HARDWARE | Rayon d'action | |
Formations YBET | Plan d'accès |
Magasin informatique |
1. Utiliser une feuille de style - 2. Enregistrement et insertion dans une page - 3. Feuille de style pour les textes de la page - 4. Mise en forme de la page - 5. Pour terminer
Les feuilles de styles sont utilisées sur les sites Internet pour différentes raisons. La principale est de modifier automatiquement les couleurs des textes, liens, contenu des balises H1, H2, ... sur l'ensemble du site (y compris mettre l'ensemble du site en responsive design). Dans un exercice précédant, nous l'avons fait manuellement pour chaque texte entre balise. La deuxième utilisation est liée aux tableaux qu'ils remplacent dans certains cas. Le principal avantage est de réduire la taille du code HTLM, de le rendre plus léger.
FrontPage inclus quelques feuilles de styles par défaut. Ce chapitre verra ceux implantés dans le logiciel et quelques propriétés et exemples standards d'utilisations. Un chapitre suivant nous permettra de créer des feuilles de styles personnelles plus évoluées.
Une feuille de style peut-être utilisée en HTML et en PHP. On l'appelle également CSS (Cascading Style Sheets).
Dans le menu Fichier, sélectionnez Nouveau -> Page. Au lieu d'utiliser l'onglet général, nous allons utiliser l'onglet Feuilles de Style.
Plusieurs sont déjà programmées. Parmi celles-ci, sélectionnez par exemple Courbes. Le fichier devrait ressembler à ceci:
a:link { color: rgb(51,153,255); } a:visited { color: rgb(51,102,204); } a:active { color: rgb(255,153,0); } table { table-border-color-light: rgb(255,204,102); table-border-color-dark: rgb(204,153,102); } body { font-family: Verdana, Arial, Helvetica; background-color: rgb(255,255,204); color: rgb(102,102,51); } h1 { font-family: Times New Roman, Times; color: rgb(153,153,51); } h2 { font-family: Times New Roman, Times; color: rgb(204,153,0); } h3 { font-family: Times New Roman, Times; color: rgb(0,102,153); } |
Analysons le contenu de ce fichier. On retrouve des groupes comme
Pour chaque groupe, on retrouve entre {} les propriétés. Chaque propriété est séparée par ;
Nous verrons d'autres propriétés par la suite.
Deux méthodes sont possibles. La première fait un lien vers une feuille de style externe. L'autre insère les propriétés dans l'en-tête de votre page. La première méthode permet d'utiliser la même feuille dans plusieurs pages. La deuxième permet de créer des propriétés pour une seule page Internet.
Enregistrons notre feuille de style sous le nom style. Le fichier créé prend automatiquement l'extension CSS. Il nous reste à l'implanter dans nos pages.
Plusieurs solutions sont possibles. La plus simple est d'utiliser la commande du menu Format: Liens de feuille de style. Vous pouvez utiliser plusieurs feuilles de styles dans la même page mais c'est la dernière qui est la principale. Cette commande permet d'utiliser la feuille de style sélectionnée pour la page en cours ou pour toutes les pages, ce qui permet d'automatiser la mise en forme de vos pages Internet.
Le code HTML <link rel="stylesheet" type="text/css" href="style.css"> est automatiquement inséré entre <head> et </head>. style.css est le nom de la feuille de style.
En mode manuel, cette ligne doit simplement être implantée dans le header.
Dans ce cas, les propriétés ne sont utilisée que dans la page en cours. Placez le code suivant dans le header (entre <head> et </head>)
<style type="text/css">
.... vos propriétés
</style>
Pour améliorer la présentation, nous allons voire en détail chaque groupe suivant un classement textes, corps de la page, tableau et liens. Commençons par les groupes de textes.
Cette partie de la formation analyse le body, balises H1, H2, ... Nous avons déjà rencontré quelques options comme color ou Font-Family. D'autres sont possibles pour désigner la taille du texte dans le paragraphe.
Cette propriété permet de définir la taille des caractères. Quatre méthodes de codage peuvent être utilisées:
Exemple d'utilisation:
Cette commande va permettre d'aligner votre paragraphe. options sont possibles.
Exemple: text-align : right;
La feuille de style permet également de positionner le contenu de la page en fonction de l'écran. Dans cette partie, voyons déjà les solution de marges:
La valeur de margin peut prendre les valeurs numériques en px, %, pt ou em. Si vous raccourcissez la commande, ceci donne margin (top,right,bottom,left);
body { margin:0px; }
... est par exemple équivalent à body { margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px; } |
Cette marge est l'équivalent de la commande <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"> placée après </head> pour débuter le corps de la page (body). Attention la commande Margin n'existe pas en <body>. Cette page utilise par exemple cette propriété pour qu'il n'y ai pas de bord au-dessus. La feuille de style est prioritaire sur la commande placée en body.
Remarque, si vous utilisez des feuilles de styles de tableaux, vous serez quasiment obligé de mettre margin:0px avec Internet Explorer, alors que Firefox ne posera aucun problème sans. C'est d'ailleurs le problèmes des feuilles de styles, c'est que tous les navigateurs ne réagissent pas de la même manière à toutes les commandes.
Le padding définit les marges à l'intérieur d'un élément.
padding-top | Espace intérieur entre la bordure supérieure et l'élément |
padding-right | Espace intérieur entre la bordure droite et l'élément |
padding-bottom | Espace intérieur entre la bordure inférieure et l'élément |
padding-left | Espace intérieur entre la bordure gauche et l'élément |
padding | espace intérieur complet, command globale |
La valeur padding peut prendre les valeurs numériques en px, %, pt ou em.
Si la propriété css padding est suivie d'une seule valeur, cette valeur est utilisée pour toutes les marges intérieures (top, bottom, left, right). Si elle est suivie de 2 valeurs séparées par un espace, la première valeur gère les marges horizontales, la deuxième les marges verticales. Dans le cas de 4 valeurs, les marges sont reprises dans l'ordre haut, gauche, bas et droite
Cette propriété s'adapte par exemple au corps du texte.
Exemple:
body { padding: 50px; font-family: Verdana, Arial, Helvetica; background-color: rgb(255,255,204); color: rgb(102,102,51); } |
donne une marge de 50 pixels tout au-tour de la page pour le contenu, même si cette notion s'adapte plus (un peu trop important en pratique).
Padding ou margin? Ces deux propriétés ne sont pas équivalentes, mais complémentaires.
body { margin:0px; padding: 50px; background-color: rgb(255,255,204); } |
Cette feuille de style donnera une feuille parfaitement alignée contre les bords de l'affichage avec une couleur de fond grise, mais le texte sera à 50 px du bord.
Cette propriété des feuilles de styles définit la grosseur des traits. Elle peut être définie comme:
Exemple: font-weight: bold;
Cette propriété permet de définir l'italique des caractères. Trois options sont proposées:
Cette propriété des feuilles de styles permet de mettre en petite majuscule le texte. Les lettre en majuscules effectives sont standard. Les autres caractères ont l'aspect des majuscules, mais de taille inférieure. Toutes les polices n'acceptent pas cette propriété. On retrouve 2 valeurs possibles:
Les propriétés Font ci-dessus (font-style, font-weight, font-size, font-variant, font-family) peuvent être regroupées sur une seule ligne de commande, Font [font-style] [Font-variant] [Font-weight] [Font-family]
Exemple: h1{ Font: 12pt Arial bold italic}
Les propriétés non mentionnées gardent leur valeur initiale.
Je regroupe ici d'autres propriétés moins utilisées, même parfois délicates à utiliser. Letter-Spacing définit l'espace entre chaque lettre, Word-Spacing, l'espace entre chaque mot.
D'autres existent.
Cette partie reprend les fonds de couleurs et images de fond d'écran.
Nous l'avons déjà rencontré ci-dessus avec:
body { background-color: rgb(255,255,204); } |
Comme précédemment, FrontPage l'a codé sous RGB. Les notations traditionnelles utilisent plutôt la version hexadécimale background-color: #FF00FF où #FFFFFF donne le blanc et #000000 donne le noir.
Remarque: pour chaque feuille, dans le body, vous pouvez également insérer la commande <body bgcolor="#D8EAFA">. La couleur dans la feuille de style est prioritaire.
La propriété background-image permet d'insérer une image de fond dans un élément.
background-image: url("http://www.ybet.be/logo.gif") ;
Quelques remarques s'imposent:
Exemple.
<header> <style type="text/css"> .boite { background-image: url("http://www.ybet.be/logo.gif"); border: solid 2px #990000 ; margin-left: 10px ; width: 60% ; height: 150px ; background-color:#FFFFFF; } </style> </header> |
Le point devant le style de paragraphe est obligatoire ! (également le cas d'une feuille de style externe)
Dans votre feuille, utiliser les propriétés du paragraphes (comme pour titre 1 par exemple) pour mettre le texte souhaité avec les propriétés ci-dessus. Insérez dans le codage HTML: <p class="boite">Texte en boîte</p>
Voici le résultat:
Texte en boîte
Valable comme fond de page, insérée directement dans la feuille de style.
body { background-color: rgb(255,255,204); background-image: url("http://ybet.be/logo.gif"); } |
Dans les cas ci-dessus, l'image est automatiquement répétée. Les propriétés suivantes permettent de définir le nombre de fois que l'image est insérée en horizontal (X) et en vertical (y). Cette propriété est donnée par: background-repeat: <valeur>
Valeur peut prendre les valeurs suivantes:
Remarque: il n'y a pas la possibilité de définir le nombre de fois où l'image est reproduite
Cette propriété permet de fixée une image d'arrière plan lors du défilement. Plusieurs options sont possibles:
Exemple:
body
{ background-image: url("http://.ybet.be/logo.gif"); } |
Cette propriété reprend l'image en horizontal au début de la page. Elle descend en même temps que l'ascenseur vertical
body
{ background-image: url("http://.ybet.be/logo.gif"); } |
Cette image reste fixe en haut de la page, dans ce cas le background-attachement est donc sans intérêt.
Cette propriété va nous permettre de positionner l'image de fond sur la feuille. Background-position peut prendre 5 valeurs distinctes:
Valeur | alignement horizontal | Alignement vertical |
Top | centré | Haut de la page (bloc) |
Center | centré | centré |
bottom | centré | bas de la page (bloc) |
right | droite | centré |
Left | gauche | centré |
C'est valeur peuvent aussi utiliser des valeurs en chiffres et peuvent même être combinées
X X | valeur en px, première valeur, décalage horizontal, deuxième pour le décalage vertical |
% % | valeur donnée en pourcentage par rapport à la page, en horizontal et en vertical ensuite |
Exemples:
Cette partie permet déjà de créer ses feuilles de styles personnalisées en reprenant les propriétés directement dans l'entête. Nous verrons également quelques propriétés liées aux tableaux.
Formations complémentaires:
La suite du tutorial FrontPage > 13.10. Feuilles de style externe |