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

Le cours HTML

13.1. FrontPage

13.2. Les tableaux, mise en page simplifiée.

13.3. Insertion d'images

13.4. Les paragraphes

13.5 Bases HTML

13.6. Liens hypertextes et signets

13.7. Structure du site, taille des pages

13.8. Extensions FrontPage

13.9. Introduction aux CSS

13.10. CSS , les feuilles de styles

13.11. Positionnement de zone en CSS

13.12 Formulaires HTML

Sur le sujet

Avant de programmer un site Internet, avant de débuter, petites explications

Positionner ses pages sur Google, un beau site, c'est bien, un site visité c'est encore mieux.

Liste des META, les balises et Meta à utiliser et ... les autres

Autres formations YBET

Microsoft Access

Microsoft Excel

Cours techniques, équipements matériels informatiques, Windows

9. Utilisation des feuilles de styles (CSS) dans la création d'un site Internet.

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).

1. Utiliser une feuille de style

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:

Analysons le contenu de ce fichier. On retrouve des groupes comme

• a:link, a:visited, a:active qui gère les liens
• table qui gère les tableaux par défaut
• Body qui gère le corps du texte
• h1, h2, ... qui gère les styles de paragraphes titre 1, titre 2, ...

Pour chaque groupe, on retrouve entre {} les propriétés. Chaque propriété est séparée par ;

• Font-family désigne la police de caractères utilisée. La première listée est la principale. Si elle n'est pas présente sur l'ordinateur du navigateur, c'est la deuxième qui sera utilisée et ainsi de suite.
• Color: reprend la couleur. Quelques options sont utilisées pour désigner le type de codage

• RGB indique que les couleurs sont données dans le format RGB (Red - rouge, Green - Vert et Blaw -bleu) en décimal, 3 chiffres entre 0 et 255.
• Sans cette option, vous pouvez également utiliser Black, White, ...
• #CCFFCC donne la couleur sous forme hexadécimal. 000000 donne le noir, FFFFFF donne le blanc.
• Background-color: définit la couleur de fond pour le corps du texte (body) ou les tableaux (table)
• Dans le cas des tables, on retrouve table-border-color-light: et table-border-color-dark: pour les couleurs des bordures claires et foncées.

Nous verrons d'autres propriétés par la suite.

2. Enregistrement et insertion dans une page

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.

2.1. Feuille de style externe

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.

2.2. Propriétés par page Internet

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>

3. Feuille de style pour les textes de la page

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.

3.1. Font-size

Cette propriété permet de définir la taille des caractères. Quatre méthodes de codage peuvent être utilisées:

• la taille relative. Dans ce mode, 3 options sont possibles: smaller, medium, larger. La taille se base sur la valeur courante du navigateur (medium par défaut).
• la taille absolue: Dans ce mode, 7 options sont proposées: xx-small (soit 6,9pt), x-small (8,3pt), small (10pt), medium (12pt, valeur par défaut), large (14,4pt), x-large (17,28pt), xx-large (20,7pt). Cette méthode impose la taille. Le navigateur ne pourra pas réduire ou augmenter la taille de la police.
• la valeur numérique: dans ce mode, on définit la taille de la police sur l'écran. Deux modes sont possibles, en absolu ou en relatif
  • en mode absolu, on utilise les unités de mesures in (pouce), cm (centimètres), mm (millimètres), pc (pica utilisé en imprimerie, 1 pica = 12 points) et pt (points). Attention la notation est américaine, les virgules sont remplacées par le point. Exemple: Font-size: 12.5pt
  • en mode relatif,  les valeurs em, ex et px sont utilisées. Cette méthode n'est utilisée que dans des cas exceptionnels.
• la valeur en pourcentage. Dans ce cas, on désigne la taille par rapport au texte courant. Les symboles + et - peuvent être utilisés, + par défaut.

Exemple d'utilisation:

• Font-size:15pt;
• Font-size:xx-small;

3.2. Text-align

Cette commande va permettre d'aligner votre paragraphe. options sont possibles.

• center: alignement centré
• Left: alignement à gauche (par défaut)
• Right: alignement à droite
• Justify: justifié

Exemple: text-align : right;

3.2. Margin

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:

• Margin: la marge sur l'ensemble des 4 cotés.
• margin-top: la marge supérieur
• margin-right: la marge de droite de la feuille
• margin-left: la marge de gauche de la feuille
• margin-bottom: la marge en-dessous

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);

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.

3.3. Padding

Le padding définit les marges à l'intérieur d'un élément.

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:

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.

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.

3.4. Font-weight

Cette propriété des feuilles de styles définit la grosseur des traits. Elle peut être définie comme:

• normal
• bold (gras)
• bolder (très gras)
• lighter (plus fin)
• 100, 200, 300, 400, 500, 600, 700, 800 ou 900. Très fin prend la valeur 100, très gras prend la valeur 900

Exemple: font-weight: bold;

3.5. Font-style

Cette propriété permet de définir l'italique des caractères. Trois options sont proposées:

• normal, met le texte dans son aspect normal
• italic, met le texte en italique
• oblique, quasiment identique à italique pour la majorité des polices.

3.6. Font-variant

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:

• Normal.
• small-caps: met le texte en petite majuscule.

3.7. Font

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.

3.8. Propriétés spéciales

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.

• Letter-Spacing (valeur numérique, pourcentage), exemple: { letter-spacing : -1px ; }
• Word-Spacing (valeur numérique seulement), exemple {word-spacing : 9px;}

D'autres existent.

4. Mise en forme de la page

Cette partie reprend les fonds de couleurs et images de fond d'écran.

4.1. Couleur de fond.

Nous l'avons déjà rencontré ci-dessus avec:

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.

2.2. Image de fond

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:

• Choisissez vos images de préférence uniformes
• Ajoutez également un fond de couleur par défaut en cas de difficulté de chargement

Exemple.

Pour uniquement une page, dans le header, insérer:

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"); }

4.3. Répétition de l'image de fond.

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:

• repeat (par défaut)
• repeat-x: l'image se répète horizontalement (1 seule ligne d'image)
• repeat-y: l'image se répète verticalement.
• no-repeat: pas de répétition.

Remarque: il n'y a pas la possibilité de définir le nombre de fois où l'image est reproduite

4.4.Image fixe.

Cette propriété permet de fixée une image d'arrière plan lors du défilement. Plusieurs options sont possibles:

• scroll: l'image défile avec la page. Paramètre par défaut.
• fixed: l'image reste fixe à son emplacement lors du défilement de la page.

Exemple:

Cette propriété reprend l'image en horizontal au début de la page. Elle descend en même temps que l'ascenseur vertical

Cette image reste fixe en haut de la page, dans ce cas le background-attachement est donc sans intérêt.

4.5. background-position, position sur la feuille

Cette propriété va nous permettre de positionner l'image de fond sur la feuille. Background-position peut prendre 5 valeurs distinctes:

C'est valeur peuvent aussi utiliser des valeurs en chiffres et peuvent même être combinées

Exemples:

• background-position: center 600px; centre l'image en horizontal et la décale de 600 pixels vers le bas
• background-position: left top; en haut à droite
• background-position: 50% 30%; 50 % en horizontal, 30 % en vertical

5. Pour terminer

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 mise en ligne d'un site, explications complémentaires, fichier htaccess, javascript, ...
• Formation en ligne PHP, MySQL: même série de formation en ligne YBET, introduction au PHP, gestion de base de donnée MySQL.
• Comment créer son site Internet, avant de débuter, petites explications sur les différents types d'hébergement, langages, ...

Mise à jour: 14/12/2007