Vous êtes sur la page 1sur 12

UTILISATION DU LOGICIEL KOMPOZER

KompoZer est un logiciel qui permet de crer facilement ses premires pages web. Il y a deux faons dcrire une page web dans KompoZer : en mode Conception On crit le texte, les balises sont cres automatiquement. En cliquant sur les icnes il est possible de mettre les mots en gras, en italique, dinsrer des images, des liens hypertextes en mode Source Dans ce mode on rdige soi-mme le code HTML/CSS de la page.
Pour crer un site web on a besoin de deux langages complmentaires : le HTML (Hyper Text Markup Language) pour le contenu proprement dit ; le CSS (Cascading Style Sheets) pour lapparence, le design.

accs au mode Conception

accs au mode Source

Une bonne habitude prendre quand on travaille avec KompoZer (ou avec tout autre diteur de texte) : enregistrer la page - ds son ouverture ; - trs rgulirement ensuite, pour ne pas risquer de perdre tout son travail

Enregistrer une page HTML


Cliquer sur Fichier > Enregistrer ou sur Donner un titre sa page (ex. Ma premire page). En mode Source ce titre est situ entre les balises <title> et </title> ; sur Internet il apparatra dans la barre de titre du navigateur. Enregistrer le fichier .html en lui donnant un nom du type mapage.html ou ma_page.html
Eviter les espaces, les caractres accentus et les majuscules dans les noms de dossiers/fichiers destins au Web.

Valrie GUERIN

Crer une feuille de style


Une feuille de style regroupe un ensemble de rgles dfinissant lapparence dune page web (police, taille et paisseur des caractres, couleur du fond, emplacement des blocs de texte par rapport aux images, etc.) ; elle peut tre commune plusieurs pages web. Cliquer sur F11 ou sur pour ouvrir lditeur de style CSS. Dans la fentre Feuilles de style CSS saffichent 4 types de styles, chacun prcd dun bouton cocher.

espace texte

Utilisation de la rgle de style 1 (style appliqu aux lments de mme type) Vrifier que le premier bouton est coch. Taper h2 (titre de niveau 2) dans lespace texte (ou slectionner h2 en cliquant sur ) Cliquer sur le bouton Crer la rgle de style. Une nouvelle fentre souvre. Parcourir les onglets et dfinir le style associ h2 (police, taille et couleur du texte, teinte du fond, etc.). Cliquer sur OK pour valider. Pour appliquer le style ainsi dfini aux sous-titres figurant sur la page, deux possibilits : en mode Conception Ecrire le texte du sous-titre (ou placer le curseur dans le sous-titre sil est dj crit) puis slectionner Titre 2 dans le menu droulant Corps de texte : laspect du texte change en fonction de la rgle de style cre. Procder de la mme faon pour les autres sous-titres de la page. en mode Source On constate quentre <head> et </head> le logiciel a cr des balises <style> et </style>, balises entre lesquelles figure la 2
Valrie GUERIN

rgle de style h2 (h2 suivi de deux accolades encadrant le style prcdemment dfini). Il ne reste plus qu complter le code HTML (entre <body> et </body>) en encadrant chacun des sous-titres de la page des balises <h2> et </h2>, afin que la rgle de style leur soit applique. Retourner dans le mode Conception pour vrifier le rsultat. Exercice 1 : crer une rgle de style permettant de mettre les sous-titres crits en h3 en rouge sur fond jaune, avec des caractres en gras et en italique.

<html> <head> <title>Exercice 1</title> <style type="text/css"> h3 { color: red; background-color: yellow; font-style: italic; rgle de style (CSS) font-weight: bold; } </style> </head> <body> <h3>sous-titre rouge sur fond jaune avec des caractres en gras et en italique</h3> </body> </html>

HTML

Exercice 2 : recopier une comptine de quelques lignes dans KompoZer. Mettre en forme le texte en crant une rgle de style pour le titre (h1), une autre pour les paroles (p). Utilisation de la rgle de style 2 (style appliqu aux lments de mme classe) Cliquer sur F11 ou sur puis sur licne en haut gauche de la fentre Feuilles de style CSS pour accder nouveau aux quatre types de styles. Cocher le deuxime bouton un point apparat dans lespace texte. Donner un nom la rgle en conservant le point, par exemple .maclasse, .essai ou .test Cliquer sur le bouton Crer la rgle de style. Comme prcdemment parcourir les onglets et dfinir le style associ .maclasse. Cliquer sur OK pour valider. Ecrire une phrase, en surligner un mot ; drouler le menu situ droite de Corps de texte puis cliquer sur maclasse pour appliquer la rgle au mot surlign. Passer en mode Source : on constate que la rgle de style .maclasse se trouve entre <style> et </style> et quentre <body> et </body> le mot surlign est encadr par les balises <span class="maclasse"> et </span>. Revenir en mode Conception et crire deux ou trois phrases supplmentaires ; surligner ces phrases puis slectionner dans Corps de texte Conteneur gnrique (div) ; cliquer sur maclasse pour appliquer 3
Valrie GUERIN

la rgle aux phrases surlignes. Passer en mode Source : on constate que la rgle de style .maclasse se trouve toujours entre <style> et </style> mais quentre <body> et </body> les phrases sont encadres par les balises <div class="maclasse"> et </div>.

En rsum : En mode Source on utilise les balises <span class> et </span> pour modifier laspect dune zone limite de donnes (une lettre, un mot), les balises <div class> et </div> pour modifier laspect de zones plus tendues. Exercice 3 : crer une rgle de style .class ; utiliser cette rgle pour crire une phrase contenant deux mots souligns crits en bleu, italique, gras et majuscules.

<html> <head> <title>Exercice 3</title> <style type="text/css"> .class { color: #3366ff; font-style: italic; font-weight: bold; text-transform: uppercase; text-decoration: underline; } </style> </head> <body> Je vais souligner le mot <span class="class">texte</span> et le mettre en bleu, italique, gras et majuscules ; je peux rpter ceci autant de fois que je <span class="class">veux</span>. </body> </html>

CSS

HTML

Exercice 4 : Crer une rgle de style .lettrine pour faire ressortir la premire lettre de la phrase de lexercice 3. ex.

Utilisation de la rgle de style 3 (style appliqu llment portant lID) Cette rgle sert principalement dcouper les pages web en plusieurs zones : une zone den-tte qui indique lobjet gnral de la page ; une zone de menu qui contient les liens permettant daccder aux autres pages du site ; une zone de contenu qui prsente les informations essentielles de la page ; 4

Valrie GUERIN

une zone de pied de page dans laquelle on trouve des informations techniques (date de mise jour, copyright, etc.). Mise en place des blocs <div> On se sert des balises <div> et </div> pour dlimiter les zones den-tte, contenu, menu et pied de page dans le texte du code HTML de la page. Pour mettre en place les blocs (on dit aussi botes) <div> passer en mode Source et recopier le code ci-dessous entre les balises <body> et </body> :
<div>en-tte</div> <div>menu</div> <div>contenu</div> <div>pied de page</div>

Munir ensuite chaque balise <div> dun identificateur id qui permettra aux logiciels (KompoZer et plus tard le navigateur) de reconnatre chaque bloc. Le code devient donc :
<div <div <div <div id="entete">en-tte</div> id="menu">menu</div> id="contenu">contenu</div> id="pied">pied de page</div>

Pour crer des rgles de style (celle du bloc den-tte par exemple) Revenir en mode Conception. Cliquer sur F11 ou sur puis sur licne en haut gauche de la fentre Feuilles de style CSS pour accder aux quatre types de styles. Cocher le troisime bouton un signe dise # apparat dans lespace texte. Donner un nom la rgle en conservant le signe dise, par exemple #entete Cliquer sur le bouton Crer la rgle de style. Comme prcdemment parcourir les onglets et dfinir le style associ #entete (largeur et hauteur du bloc, couleur de fond, etc.) Cliquer sur OK pour valider : laspect du bloc en-tte change en fonction de la rgle de style cre. Procder de la mme faon pour les blocs menu, contenu et pied de page. Exercice 5 : dcouper lcran en trois botes (= blocs) une bote en-tte verte en haut, une bote menu orange gauche, une bote contenu jaune au centre.

Valrie GUERIN

<html> <head> <title>Exercice 5</title> <style type="text/css"> #entete { background-color: #33cc00; width: 100%; height: 50px; } #menu { background-color: #ff6600; width: 20%; height: 300px; float: left; } #contenu { background-color: yellow; width: 80%; height: 300px; float: left; } </style> </head> <body> <div id="entete">en-tte</div> <div id="menu">menu</div> <div id="contenu">contenu</div> </body> </html>

CSS
liste des rgles CSS cres

HTML

Pour que les blocs menu et contenu ne se positionnent pas lun au-dessous de lautre mais flottent cte--cte on doit les dclarer flottants gauche (float: left) ; on reviendra sur cette rgle dans le cours Expert

Exercice 6 : dcouper la bote en-tte de lexercice 5 en trois sous-botes (bote 1, bote 2 et bote 3).

#entete { } #menu { } #contenu { } .boite1 { background-color: #33ff33;

Valrie GUERIN

width: 10%; height: 50px; float: left; } .boite2 { background-color: #009900; width: 80%; height: 50px; float: left; } .boite3 { background-color: #33ff33; width: 10%; height: 50px; float: left; } </style> </head> <body> <div id="entete"> <div class="boite1">1</div> <div class="boite2">2</div> <div class="boite3">3</div> </div> <div id="menu">menu</div> <div id="contenu">contenu</div> </body> </html>

Exercice 7 : dcouper la bote 2 de lexercice 6 en deux sous botes supplmentaires (botes 2.1 et 2.2). Exercice 8 : insrer 3 liens colors en vert dans la bote menu de lexercice 5 (un lien vers lexercice 1, un lien vers lexercice 2 et un lien vers lexercice 3)

#entete { } #menu { } #contenu { }

Valrie GUERIN

a { color: #009900; } </style> </head> <body> <div id="entete">en-tte</div> <div id="menu"> <br> <a href="exercice1.html">Exercice 1</a> <br> <br> <a href="exercice2.html">Exercice 2</a> <br> <br> <a href="exercice3.html">Exercice 3</a> </div> <div id="contenu">contenu</div> </body> </html>

Utilisation de la rgle de style 4 (rgle de style personnalise) Les pseudo-classes se diffrencient des classes par leur syntaxe lgrement diffrente le point est remplac par deux points. Elles sont utilises pour ajouter des effets spciaux certains slecteurs comme <div>, <p> ou <a>. Quelques exemples de pseudo-classes : :first-line ajoute un style la premire ligne dun lment (<p> par ex.) :first-letter ajoute un style (lettrine) au premier caractre dun lment (<p> par ex.) :link ajoute un style un lien non visit :visited ajoute un style un lien visit :hover ajoute un style un lment survol (<a> ou <img /> par ex.) :active ajoute un style un lment sur lequel on clique Exercice 9 : modifier le style des liens crs dans lexercice 8 en appliquant la balise <a> les pseudo-formats :link (lien non visit), :visited (lien visit) et :hover (lment survol par la souris).

Valrie GUERIN

#entete { } #menu { } #contenu { } a:link { color: #009900; } a:visited { color: #3333ff; } a:hover { color: #993399; font-weight: bold; } </style> </head> <body> <div id="entete">en-tte</div> <div id="menu"> <br> <a href="exercice1.html">Exercice 1</a> <br> <br> <a href="exercice2.html">Exercice 2</a> <br> <br> <a href="exercice3.html">Exercice 3</a> </div> <div id="contenu">contenu</div> </body> </html>

Exercice 10 : recopier la comptine de lexercice 2 dans la bote contenu de lexercice 9 ; crer une rgle de style :first-letter pour faire ressortir la premire lettre de la premire ligne.

Exporter une feuille de style


Pour obtenir un site web homogne il faut appliquer une seule et unique mise en forme lensemble de ses pages. Principe On dfinit une srie de rgles de style pour une page (la page daccueil index.html par ex.) puis on exporte la feuille de style interne de cette page dans un fichier distinct (= feuille de style externe), auquel on relie les autres pages du site. Application Ouvrir la page daccueil. Cliquer sur Cliquer sur le bouton Exporter la feuille de style et utiliser la version exporte.

Valrie GUERIN

Enregistrer la feuille de style externe sous un nom simple (ex. styles.css) dans le dossier regroupant toutes les pages du site. Dans lditeur CasCadeS la rfrence la feuille de style interne est remplace par la rfrence au fichier styles.css Cliquer sur OK pour fermer la bote de dialogue Feuilles de style CSS. Revenir en mode Source ; on constate que les rgles de style ont disparu, remplaces par la ligne <link rel="stylesheet" href="styles.css" type="text/css">

Pour lier une page du site au fichier styles.css : Ouvrir la page. Cliquer sur puis sur droite de Slectionner la ligne Feuille lie dans la liste droulante. Remplir les champs de la fentre Nouvelle feuille de style lie : aller chercher le fichier styles.css pour le champ URL (cliquer sur Parcourir) ; inscrire all dans le champ Liste des mdia ; entrer mesStyles dans le champ Titre.

Cliquer sur le bouton Crer la feuille de style puis sur OK. Enregistrer le document. Rpter les mmes oprations pour chacune des pages du site. 10
Valrie GUERIN

NOTES
Rgle de style 1 Il est possible de crer/modifier les rgles de style directement dans longlet Gnral de lditeur de styles le code qui y figure est identique celui qui est inscrit entre les balises <style> et </style>. Concernant les polices de caractres : choisir de prfrence une famille de polices serif (caractres avec empattements, par ex. Times, Georgia ou Garamond) pour les titres et sans-serif (par ex. Arial, Verdana ou Helvetica) pour les paragraphes ; les noms de police contenant des espaces doivent tre placs entre guillemets ex. "Comic Sans MS" dfinir la taille de la police en utilisant des units relatives, qui dpendent de leur lment parent (pixels, em, ex), plutt que des units absolues (cm, points, pouces) afin que la police sadapte la dimension de lcran quelque soit la taille de ce dernier. Rgle de style 2 <div> et <span> sont des balises dites gnriques (vides de sens), principalement utilises lors de la mise en forme du site. Les <div> en particulier permettent de crer des blocs que lon peut ensuite disposer comme on veut sur la page (cf. rgle de style 3). Rgle de style 3 Il y a peu de diffrences entre les attributs id et class si ce nest que class peut tre utilis plusieurs fois dans une mme page alors quun id est unique sur la page (il ne peut pas y avoir deux lments munis du mme identifiant dans une mme page) id est donc plus adapt que class pour dcouper une page en blocs car sur une page il ny a quun seul en-tte, un seul menu, un seul contenu et un seul pied de page. Pour simplifier il est conseill de donner aux identifiants le mme nom (non accentu, sans espaces et sans majuscules) que les blocs conteneurs auxquels ils correspondent (ex. le bloc contenant les lments den-tte de page aura comme identifiant entete). Exemple :
<style type="text/css"> .texte { . . . } .copyright { . . . } .menu { . . . } .fond { . . . } #entete { . . . } #menu { . . . } #contenu { . . . } Plusieurs lments peuvent utiliser la mme classe. #pied { . . . } </style> <div class="texte"></div> Un lment ne peut avoir quun seul identifiant mais <p id="contenu" class="texte"></p> une ou plusieurs classes (ici menu & fond llment <span id="menu" class="menu fond"></span> utilise les proprits cumules des deux classes). <span id="pied" class="copyright"></div>

11

Valrie GUERIN

Lordre de priorit des styles Lorsquun document est soumis des directives de style contradictoires, la directive de style qui simpose est la dernire dfinie dans lordre chronologique (mcanisme en cascade). n 1 = rgle(s) de style dfinie(s) dans le code HTML n 2 = rgle(s) de style dfinie(s) dans len-tte de la page (feuille de style interne) n 3 = rgle(s) de style dfinie(s) dans la feuille de style externe privilgier pour une prsentation homogne du site n 4 = rgles de style par dfaut Rcapitulatif des raccourcis utiles dans KompoZer F1 F5 F8 F9 F11 pour obtenir de laide pour avoir un aperu dans le Navigateur pour activer la vue Mixte pour ouvrir le Gestionnaire de sites pour ouvrir lditeur de style CSS

12

Valrie GUERIN