TD 2 : CSS

Prérequis : TD HTML

Objectif :

0. Préambule

Reprendre le TD précédent et compléter-le avec les nouveaux éléments

______________________________________________________________________
1 : A défaut de téléchargement, vous pouvez créer ce fichier et y recopier le code ci-dessous
2 : Le fichier à télécharger est compréssé. Il est nécessaire de l'extraire et de l'enregistrer dans votre dossier pages avant de l'utiliser

Code source à copier si le téléchargement ne fonctionne pas : 

<!DOCTYPE html>			<!-- PAGE : MODELE.HTML -->

<html>

<head>
	<title>Petites annonces - hxxxxx</title>
	<meta charset="utf-8" />
</head>


<body>
						
		<!-- ******************************************************* -->
		<!--                 MENU                                    -->
		<!-- ******************************************************* -->
		
		<div id="menu">
		
			<img src="../images/h99999.jpg" /><br/>
			<p>Pr&eacute;nom NOM</p>
			<p>13 rue de toul<br/>59000 LILLE<br/>03.28.38.48.58<br/>
				<a href="mailto:xxxxxx@hei.yncrea.fr">xxx@hei.yncrea.fr</a>
			</p>
		
			<ul class="menuGauche">
				<li><a href="consulter.html">Consulter</a></li>
				<li><a href="ajouter.html">Ajouter</a></li>
				<li><a href="supprimer.html">Supprimer</a></li>
			</ul>
		
		</div> <!-- fin menu -->
		
		<!-- ******************************************************* -->
		<!--                 CONTENU                                 -->
		<!-- ******************************************************* -->
		
		<div id="contenu">
		
			<h1>Mod&egrave;le</h1>		
							
		</div> <!-- fin contenu -->

				 
		<!-- ******************************************************* -->
		<!--                 PIED DE PAGE                            -->
		<!-- ******************************************************* -->
		
		<footer>
		
			<hr width="80%" />
			<p>HEI - Mise &agrave; jour : 21/09/2017</p>
		
		</footer> <!-- fin du pied de page -->

</body>

</html>

Un peu de contenu pour agrémenter votre page modèle....

			<h3>Vends Galaxy S6 Edge Neuf</h3>
			
			<p>Samsung galaxy s6 Edge 32go neuf pas déballé jamais utilisé
				garantie 2 ans avec protège écran verre trempé neuf débloqué 
				tout opérateur prix 380 euro; </p>
			

			<h3>Piano droit noir </h3>
			
			<p>Piano droit de marque MAEARI. laque noir.
				Parfait état. Première main. Trois pédales. </p>
			

			<h3>Plain-Pied Au Calme A 20mn De Lille</h3>
			
			<p>Grande maison de 170m2, 
				4 chambres avec chacune leur dressing
				une salle de bain et une salle de douche
				séjour de 42m2 avec poêle à bois
				cuisine équipée récente avec coin repas
				salle de 26m2 pouvant servir de salle de sport/jeux 
				ou autre chambre ou studio
				garage deux voitures
				sous sol complet avec coin laverie et atelier
				terrasses, piscine
				terrain clos et arboré de 1520m2 avec coin potager;</p>
			

			<h3>Superbe Harley Davidson Sportster Roadster Xlr 883</h3>
			
			<p>HARLEY DAVIDSON SPORTSTER ROADSTER 883 XLR
				2011 - PREMIERE MAIN - QUASI NEUVE (entretien HARLEY)
				Équipée : pare-brise, pares-cylindres, sissy-bar, 
				reposes-pieds chromés, becquet bas de cadre, 
				sacoches cuir de cadre et fourche, 
				cabochons de clignotant fumés, bouchon de réservoir skull, 
				chargeur batterie</p>

			<h3>Diverses Pièces Moto Guzzi</h3>
			
			<p> la marque MOTOGUZZI en plastique relief longueur 150mm 
				hauteur 15mm avec 2 tétons derrière pour certainement 350 2t guzzi
				fixations garde-boue avant pour v7ou 850gt 38euros
				notice entretient california 3 9euro(s)
				chambre à air 110/80/18 90/100/18 110/90/18
				5euro(s) la chambre à air
				des reposes pieds avant ou arrière 
				un par cylindre de california 90euros neuf
				Clignotant complet california 3 20 euros
				je peux joindre des photos pour chaque demande
			</p>

1. CSS Interne :
positionnement des balises <div> et <footer>.

Dans la page modele.html, créer tout d'abord les styles internes suivant:

Tester la page "modele.html"

2. CSS Externe

Pour la suite, on souhaite maintenant détacher les styles de la page pour les gérer directement dans une feuille de styles à part. Il sera alors plus simple, quand on aura plusieurs pages à gérer, d'attacher la feuille de styles à chaque page HTML

	<link href="../styles/style.css"  rel="stylesheet" type="text/css" />

3. Mise en forme de la balise <div> d'identificateur "menu"

Pour toutes les images pouvant se trouver dans le DIV d'identificateur menu, créer, dans la feuille de styles, un style ayant une propriété de cadre (border) avec des coins arrondis et une ombre portée floue, noire sur deux côtés de l'image (à droite et en bas). voir annexe

Pour le menu, nous allons appliquer un style qui permet de transformer une liste à puces en une liste verticale où chaque item sera encadré. Cela donnera une impression de menu avec des boutons les uns en dessous des autres

Exemple de code : 

#menu ul.menuGauche {
	margin: ... ;
	padding: ...  ;
	list-style-type: ... ;
}

#menu ul.menuGauche li {
	background-color: ... ;
	margin: ... ;
	padding: ... ;
	border-style: ... ;
	border-color: ... ;
	border-width: ... ;
	text-align: ... ;
	border-radius:...;
	box-shadow:...;
}		

#menu ul.menuGauche li a:link, #menu ul.menuGauche li a:visited   {
    color:...;
	background-color:...;
	text-decoration:...;
	display:...;
}

#menu ul.menuGauche li a:hover {
	color:...;
	background-color:...;
}

4. Création des autres pages à partir de la page modèle

A présent, l'objectif est de se servir de cette page modèle modele.html pour créer toutes les autres pages du site. Ce qui permet d'avoir une même présentation pour toutes les pages. On pourra par la suite personnaliser chacune de ces pages

5. Solution (vidéo)

Page Modèle SANS les styles

Page Modèle AVEC les styles