Création d’un site Web avec KompoZer

Création d’un site Web avec KompoZer

Le langage des pages Web

Le langage HTML établit l’ensemble des balises qui transforment un texte brut en un texte stylisé avec paragraphes, images, etc.
Exemples de texte brut avec leurs balises de transformation :
<b>texte en gras</b>
Les marqueurs ont en général la forme suivante :
<> : pour ouverture d’une balise qui transformera le texte brut ;
</> : pour fin de la transformation du texte brut. À l’intérieur de ces balises, vous y glissez toutes les commandes de styles et de typographies possibles et imaginables (dans la limite de la possibilité du langage HTML, bien sûr).
Dans l’exemple proposé, l’effet de la balise <b> est de mettre en caractère gras le texte entre les deux balises.
Certaines balises sont utilisées très fréquemment, en particulier avec les feuilles de style : titres, paragraphe et liens.

Préparation du site web

• Tous les fichiers qui composent le site (les pages, la feuille de style, les images, …) sont dans un même dossier.
• Ouvrir la page modele.html . Cette page servira de modèle à toutes les pages du site. Elle doit donc contenir les éléments communs à toutes les pages (menu, en tête, pied de page).
• Sur cette page, vous pouvez identifier des zones, appelées blocs, page, en tête, menu, contenu et pied de page. En fait, ces éléments ont été définis dans une feuille de style.

Utilisation d’une feuille de style

Cette méthode consiste à différencier le fond de la forme. Le grand avantage d’un traitement de texte est de pouvoir taper d’abord un texte tel quel (on parle de frappe au kilomètre) et, ensuite, d’appliquer la mise en page.
Cette méthode est si pratique qu’elle en est devenue un standard pour la publication des pages Web.
Le texte, tel quel, correspondra au langage HTML. La présentation correspondra à une feuille de style nommée CSS.
Une feuille de style CSS est un simple fichier texte dont l’extension est .css. La feuille de style utilisée est nommée style.css (vous pouvez l’ouvrir en cliquant sur son icône). Elle est placée dans le dossier du site.
Pour associer cette feuille de style à une page html, il faut ajouter la ligne suivante dans « head » :
<link href= »style.css » rel= »stylesheet » type= »text/css »> Cliquer sur l’onglet Source et repérer cette ligne
La feuille de style permet :
● de définir les blocs (taille, position, fond, bordure)
● d’attribuer un style à chaque balise (liens, titres, paragraphe)
Ainsi, toute modification de la feuille de style sera appliquée à l’ensemble des pages du site. Il est possible de modifier directement la feuille de style dans un éditeur de texte. Pour une approche plus intuitive, nous utiliserons l’éditeur CSS de KompoZer.

Définition des blocs dans la feuille de style

Les blocs (page, bandeau, menu, pied de page) ont été crées dans la feuille de style.
Les blocs s’emboîtent les uns dans les autres :
Menu, contenu, bandeau, pied de page dans page, lui même dans body (fond gris)
Dans le fichier modele.html, les balises sont les suivantes (chaque bloc est identifié par une balise <div>) :
<body>
<div id= »page »>
<div id= »bandeau »>

</div>
<div id= »menu »>

</div>
<div id= »contenu »>

</div>
<div id= »piedpage »>

</div>
</div>
</body>
Dans le fichier style.css, le bloc
page a les caractéristiques
suivantes :
#page {
margin: 20px auto;
background: #ffffff ;
width: 90%;
text-align: left;
}
style.css (fichier feuille de
style)
exemple du bloc page
margin définit la position
background définit le fond
width la largeur
modele.html

Modification des blocs dans la feuille CSS

Ne pas hésiter à faire des essais, les modifications sont visibles en temps réel. ouvrir l’Editeur CSS : Outils > Editeur CSS ou F11 ou
● Choisir un bloc dans la liste de gauche, par exemple : #menu
● Cliquer sur l’onglet Fond pour modifier le fond (couleur ou image)
● Cliquer sur l’onglet Bordures pour attribuer une bordure au bloc menu
● Cliquer sur l’onglet Boîtes, jouer sur les paramètres Largeurs, Marges (position du bloc) et Espacements (position du texte dans le bloc)

Attribution de styles aux balises html (titre, paragraphe et liens)

Choisir une balise dans la liste de gauche de l’éditeur CSS, par exemple h1 pour modifier le style du titre 1
● Cliquer sur l’onglet Texte
● Vous pouvez modifier le style de police, la taille (choisir em comme unité) de la police, la hauteur de ligne, la couleur et d’autres attributs
cas particulier des liens :
● Choisir a pour modifier le style du lien (couleur par exemple)
● Choisir a:hover pour modifier le style du lien lorsque la souris le survole (couleur, fond, …)
● Choisir a:visited pour modifier le style du lien lorsqu’il a été visité
La feuille de style est prête. Vous pourrez la modifier à tout moment.
Attention ! Utiliser les styles paragraphe et Titre 1, 2, 3, … pour mettre en forme le texte (privilégier la mise en forme CSS)

1Rudiments sur le langage HTML
1.1Structure d’une page web :
1.2Le langage des pages Web
2Préparation du site web
3Utilisation d’une feuille de style
3.1Définition des blocs dans la feuille de style
3.2Modification des blocs dans la feuille CSS
3.3Attribution de styles aux balises html (titre, paragraphe et liens)
3.4Attribuer un style à un élément (paragraphe, titres) dans KompoZer
4Modifier la page modele.html
5Créer les pages du site
6Insérer une image
6.1Recherche de l’image
6.2Insertion de l’image
7Insérer un lien
8Visualiser la page en cours d’élaboration

Création d'un site Web avec KompoZerTélécharger le cours complet

Télécharger aussi :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *