Cours 3: Feuilles de style Pr. Namar Ydriss Université Paris II Panthéon - Assas Informatique de base Cours 3: Feuilles de style 04/12/2018
Format de base : HTML <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> <META NAME="Generator" CONTENT="Microsoft Word 97"> <TITLE>Conseil d'une chenille</TITLE> <style type="text/css"> <!-- .s2 { background-color: #FFFF99} --> </style></HEAD>
Utilisation des styles Sélection Styles s2 Ma page La chenille et Alice se regardèrent <P > La chenille et Alice se regardèrent </P>
Utilisation des styles Ma page s2 La chenille et Alice se regardèrent La chenille et Alice se regardèrent <P class="s2"> La chenille et Alice se regardèrent </P>
Utilisation manuelle <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> <META NAME="Generator" CONTENT="Microsoft Word 97"> <TITLE>Conseil d'une chenille</TITLE> <style type="text/css"> <!-- .s2 { background-color: #FFFF99} .s1 { background-color: #FF0000} --> </style> </HEAD>
Utilisation des styles Ma page s2 s1 <P class="s2"> La chenille et Alice se regardèrent La chenille et Alice se regardèrent La chenille et Alice se regardèrent </P> <P class="s1"> Que voulez-vous dire? </P> Que voulez-vous dire?
Utilisation des styles Ma page s2 s1 <P class="s2"> La chenille et Alice se regardèrent La chenille et Alice se regardèrent La chenille et Alice se regardèrent </P> <P class="s1"> Que voulez-vous dire? </P> Que voulez-vous dire?
CSS Styles en HTML Légères différences entre : Que voulez-vous dire? <P class="s1"> Que voulez-vous dire? </P> Et <span class="s1"> Que voulez-vous dire? </span>
Tableaux <table border="1" cellpadding="10"> <tr> <th bgcolor="#FF0000">Year</th> <th bgcolor="red">Sales</th> </tr> <tr><td>2000</td><td>$18M</td></tr> <tr><td>2001</td><td>$25M</td></tr> <tr><td>2002</td><td>$36M</td></tr> </table>
Interprétation des tableaux Year Sales 2000 $18M 2001 $25M 2002 $36M Paramètres : Cols, Cell Padding, Cell Spacing, Width,…...
Layers <style type="text/css"> <!-- #layertop { position:absolute; height:10px; left: 0px; top: 0px } #layerinfo { position:absolute; height:235px; left: 10px; top: 80px; z-index:10 } #layertext { position:absolute; height:135px; left: 10px; top: 120px; z-index:30} #layercontent { position:absolute; height:235px; left: 10px; top: 320px; z-index:20 } #layerform { position:absolute; height:235px; left: 00px; top: 0px; z-index:20 } -->
Interprétation des couches Ma Page top Z-axis détermine quel couche est visible. left height
Cadres (Frames) en HTML <FRAMESET ROWS= "25%,50%,25% "> <FRAME SRC= " f1.html "> <FRAMESET COLS= "25%,75% "> <FRAME SRC= " f2.html "> <FRAME SRC= " f3.html "> </FRAMESET> <FRAME SRC= " f4.html "> <NOFRAMES>Votre navigateur ne supporte pas les frames </NOFRAMES>
Interprétation des cadres Ma Page 3 1 2 4
Cartes (Maps) <p align="center"> <img src="dessindeug.jpg" width="631" height="268" alt="site map" usemap="#sitemap" border="0"> <map name="sitemap"> <area shape="rect" coords="140,54,245,158" href="C:\Mes documents\O.htm" alt="Carré"> <area shape="circle" coords="98,210,15" href="S.htm" alt="Cercle"> </map> </p>
Interprétation des cartes Ma page Séléction
Effet de Sélection Page O.html Overview….
Système de coordonnées X O 140,54 245,158 Centre 98,210 Rayon: 15 Y
Définition de styles sous Dreamweaver 1.2 T. D. 3 Définition de styles sous Dreamweaver 1.2 Applications d’un style à un paragraphe: automatiques, manuelles Tableaux Frames et Layers.