Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
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
2
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>
3
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>
4
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>
5
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>
6
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?
7
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?
8
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>
9
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>
10
Interprétation des tableaux
Year Sales $18M $25M $36M Paramètres : Cols, Cell Padding, Cell Spacing, Width,…...
11
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 } -->
12
Interprétation des couches
Ma Page top Z-axis détermine quel couche est visible. left height
13
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>
14
Interprétation des cadres
Ma Page 3 1 2 4
15
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>
16
Interprétation des cartes
Ma page Séléction
17
Effet de Sélection Page O.html Overview….
18
Système de coordonnées
X O 140,54 245,158 Centre 98,210 Rayon: 15 Y
19
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.
Présentations similaires
