Premier site en CSS

Présentation

But

Mettre en forme notre site pour le rendre plus agréable à regarder. Si le HTML décrit le contenu, le CSS décrit la mise en forme.

Connaissances de base

Revoir le cours sur le CSS

Activité

Pour mettre en forme nous allons :

Diminuer la largeur de la page HTML (comme sur ce wiki) et mettre une couleur de fond pour la balise <body>
Améliorer la présentation du menu de la page d'accueil <ul><li>
Améliorer la présentation des titres de page <h1>
Faire gérer par la feuille de style l'image du pont <img class='grandeimg'>
Rendre plus évidents les lieux et les type< class='xx'>

Déroulement

Modification des pages HTML existantes

Ajouter la(es) balise(s) permettant d'insérer la feuille de style dans l'entête de toutes les pages. La feuille de style s'appellera “style1.css”.

Nouvelles mise en forme utiles

Chaque balise se positionne dans une boîte rectangulaire dont on peut fixer les dimensions, les espaces autours (margin, padding), le fond (background) et la bordure (border). Les boîtes de succèdent normalement les une sous les autres.

width: 50%; height: 20px; fixe les dimensions en pourcentage de la page ou en pixels.
float: left; modifie l'ordre de succession en plaçant la boite courante à gauche (droite) de la précédente
text modifie les propriétés d'affichage du texte contenu dans la boîte (font→caractère ; text→paragraphe).

Les styles par balises

Traiter les demandes (plus ou moins explicites à votre goût) et pourquoi pas en ajouter d'autres.

body : toutes pages, couleur de fond et marges à droite et gauche.
h1 : toutes pages, couleur de fond, couleur de police et choix police.
ul (la liste) : page index, marges supplémentaires et bordures.
li (ligne de la liste) : police et couleur.
p.type, p.lieu : mettre en évidence (différentier les 2 informations).
p.description : justifier le texte, police.
img : limiter la taille à 400 pixels et placer à gauche de la description
cite : rendre discret

Exemple

Coup de pouce

Ajouter la feuille de style

    <link rel='stylesheet' href='style1.css' type='text/css' />

Code de la feuille de style

style1.css

body {
	margin-left: 100px;
	margin-right: 100px;
	background-color: silver;
}
ul {
	margin-left: 100px;
	margin-right: 100px;
    border: 1px solid black;
}
li {
	font-size: 18px;
	font-weight: bold;
	color: yellow;
}
hr {
	float: none;
}
h1 {
	font: bold 24pt "Arial", sans-serif;
	color: navy;
	background-color: white;
}
p.description {
	text-align: justify;
}
img.grandeimg {
	width: 400px;
	float: left;
	margin-right: 20px;
}
p.type {
	color: navy;
	width: 400px;
	margin: 0px;
	margin-right: 20px;
}
P.lieu  {
	color: green;
	float: right;
	margin: 0px;
}
cite {
	font-size: 10pt;
	color: white;
}

Le 1er site (avec CSS) en fichier ZIP à télécharger

Améliorations

Il n'y a que des avantages à utiliser les feuilles CSS pour la mise en forme. Il existe une séparation complète entre le contenu et celle-ci. De plus, il est possible de définir différentes mises en forme adaptées aux différents médias.

Nous allons optimiser notre travail en ajoutant des améliorations sur le contenu HTML et CSS avant de passer à de nouveaux langages utiles sur le web.

En effet, pour notre site, il est toujours nécessaire de créer une nouvelle page complète par pont ajouté et de modifier le menu. Nous pouvons améliorer cela après avoir découvert :

le PHP pour automatiser et personnaliser la création de page ou la gestion des données.
les formulaires HTML pour modifier les données de notre site
la création de la base de données pour notre premier site SQL.