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: 150px;
	margin-right: 150px;
	background-color: silver;
}
ul {
	margin-left: 100px;
	background-color: green;
}
li {
	font-size: 18px;
	font-weight: bold;
	color: yellow;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
        border: 1px solid black;
}
h1 {
	color: navy;
	margin-top: 0px;
}
p.description {
	text-align: justify;
}
img.grandeimg {
	width: 400px;
	float: left;
	margin-right: 20px;
}
p.categorie {
	color: navy;
	float: left;
	margin: 0px;
	padding-right: 100px;
}
P.lieu  {
	color: navy;
	float: left;
	margin: 0px;
	padding-right: 100px;
}

Inconvénients

Il n'y a que des avantages à utiliser le CSS.

Pour notre site, il est toujours nécessaire de créer une nouvelle page complète par nouveau pont et de modifier le menu. Nous pouvons améliorer cela après avoir découvert la création de la base de données pour notre premier site SQL.

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Table des matières