logo_inplogo_n7           logo_total           logo_beinp  
Enseignant : Mr Jean Fabre et Mr  Dominique Legendre
Etudiants :         Sylvain Jardel  et  Stanislas Gendreau

KompoZer

logo_kompozer

Le logiciel KompoZer

KompoZer est un logiciel libre de création de site web. Il est gratuitement téléchargeable ici.

Il est important de commencer par un site web simple, et de se donner des objectifs réalisables. Essayer de créer d'entrée un site web professionnel menera surement à l'echec et à la perte de motivation. Il existe plusieurs sites proposant des tutoriaux permettant d'apprendre à utiliser kompozer en respectant les étapes de la création du site web.

Un bon tutorial pour apprendre à se servire du logiciel se trouve sur le site sio2, sur cette page.

Pour plus de clareté et de modulabilité, il faut essayer de séparer au maximum le fond et la forme du ducument, ce que permet de faire kompozer grâce à l'utilisation des feuilles de styles.

Un site web illustre parfaitement ce concept : csszengarden.

Chaque page de ce site contient exactement le même contenu html, le même fond, mais fait appel à une feuille de style .css différente. C'est cette feuille de style qui fait le design de la page web. La même feuille de style peut être utilisée gérer la mise en page de toutes les pages du site web, harmonisant ainsi la présentation du site. 

Ci-dessous est donc un peu expliqué 

- Le role de certaines balises html, 

- Comment faire le découpage de la page web,

- Le contenu de la feuille de style.

Les bases en html

Les balises principales

<html> ... <\html>

Cette balise est obligatoire au début et à la fin du fichier html, elle doit encadrer tout le document.

<head> ... <\head>

Cette balise est l'entête du fichier html. Elle encadre les balises <title>, <meta> et <base>.

<title> ... <\title>

Indique le titre du document, le la page html.

<style> ... </style>

Permet d'insérer la feuille de stile utilisée. La création de la feuille de style est détaillée dans le paragraphe suivant.

<body> ... <\body>

Encadre le corps du fichier html.

<div> ... </div>

Ces balises permettent de diviser la page en différents éléments, tels que les blocs entête de page, pied de page, menu...

<p> ... <\p>

Délimite un paragraphe.

<h1> ... <\h1>

Délimite un titre de niveau 1. Il y a au total 6 niveaux de titres prédéfinis dans kompozer.

<br>

Provoque un retour à la ligne.

<li> ... <\li>

Element d'une liste.

<a> ... </a>

Création d'une ancre pour les liens hypertexte. Peut être un lien vers une page web, vers une adresse email...

<img>

Permet d'insérer une image.

...

Une liste complète des balises html peut être consultée sur cette page.

La feuille de style

Chaque bloc délimité par les balises <div> ... </div> peut identifié de manière unique , par exemple <div id="menu"> ... </div>. Un seul bloc de la page peut alors s'appeler "menu". Toutes ses caractéristiques telles que la couleur, le fond, la position, le style des listes, le styles des titres, le style des liens visités ou non... sont renseignées dans la feuille de style dont l'extension est .css

Si un bloc revient plusieurs fois dans la page, il convient alors de lui donner le type class, par exemple : <div class="imagecentree"> ... </div>. Différentes images de la page pourront alors adopter ce style et auront la même présentation, par exemple centrée avec une bordure noire de 2 pixels.

Un bloc <div> est identifié par le symbole # dans la feuille de styles. Ses caractéristiques données dans l'accolade :

Caractéristiques du cadre du menu :

#margemenu {
  margin-left: 600px;
  top: 0;
  right: 0;
  padding-top: 0px;
  background-color: red;
  padding-right: 15px;
  padding-left: 15px;
  position: fixed;
  margin-top: 8px;
  margin-right: 8px;
}

Style des éléments de liste non numérotés appartenant au menu :

#cadremenu ul {
  margin: 0;
  padding: 0;
  background-color: #99ffff;
}

#cadremenu li {
  line-height: 2.5ex;
  display: block;
  padding-top: 5px;
  margin-bottom: 5px;
  list-style-type: none;
}

Styles des liens dans le menu :

#cadremenu li a:link {
  color: #988f5e;
}

#cadremenu li a:visited {
}

Un style de titre définit pour le menu :

#cadremenu h3 {
  border-bottom-style: solid;
}

Quelques recommendations

- Créer un site web très simple en suivant le tutorial, tout en pensant à la création future du site web du BEI.

- Pour le site du BEI, commencer par bien découper la page, positionner l'entête et le pied de page, le menu, le cadre du contenu principal de la page... 

- Ne pas chercher à créer une page très stylée dès le début. Se contenter d'affecter les styles prédéfinis, le contenu scientifique de la page reste tout de même l'essentiel. 

- Lorsque tous les liens fonctionnent correctement, que le site web est fonctionnel, lui donner un meilleur design en modifiant la feuille de style.

- Penser à faire des sauvegardes régulièrement du dossier contenant le site web autre part sur l'ordinateur et également sur un autre média (disque dur externe, CD, clé usb...). Le logiciel kompozer  peut en effet parfois bugger lors de la modification directe du source de la page, et rien de plus désagréable que de devoir retravailler une heure pour rien ou de tout perdre dans le pire des cas (vol d'ordinateur ou crash de disque dur par exemple).

BEI 2009 - Total - Severe slugging