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 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 existantes

Nous allons ajouter la balise permettant d'insérer la feuille de style dans l'entête de toutes les pages. La feuille de style s'appellera “style1.css”.

Mise en forme utiles

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