1.22k likes | 1.39k Views
Fichier HTML. Règles CSS. Feuilles CSS. Balises HTML. Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800. François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève.
E N D
Fichier HTML Règles CSS Feuilles CSS Balises HTML Cours « CSS » - Mardi 3 février 2009, 8h00-18h00 et Mardi 17 février 2009, 13h30-1800 François Daniel Giezendanner, SEM (Service Ecoles-Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch - http://icp.ge.ch/sem/cms-spip/ CSS : Quelques exemples de mise en page fluide en n colonnes Présentation séquentielle des mises en relation de : avec Disposition relative des boîtes imbriquées
Hiérarchie arborescente des balises HTML Fichier HTML Boîtes imbriquées Règles CSS Pensez aux inter-relations : Le présent document ainsi que les fichiers HTML, CSS et images des templates proposés ici en exercices sont téléchargeables à l’adresse : http://p7app.geneve.ch:8007/spip/article.php3?id_article=169
Présentation séquentielle des relation : Présentation séquentielle des relation : Feuilles CSS Fichier HTML Balises HTML Règles CSS avec Disposition relative des boîtes imbriquées avec Disposition relative des boîtes imbriquées Présentations séparées selon les directives ci-dessous
Rappel des principaux sélecteurs de types : • « boîtes bloc » (block boxes) dite aussi « boîtes paragraphe » ou boîte conteneur • « boîtes en-ligne » (inline boxes)
Les principaux éléments créant des boîtes blocs (block) conteneur appelées aussi boîtes paragraphe sont :
Les principaux éléments créant des boîtes en ligne (inline) sont :
Exemple 1 CSS: créer une mise en page fluide avec trois colonnes de longueur égale D’après l’article de Michael Meadhra sur le site « Builder.com » du Mercredi 22 septembre 2004 http://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39172674,00.htm
CSS: créer une mise en page avec trois colonnes de longueur égale Par Michael Meadhra, Builder.com. Mercredi 22 septembre 2004 http://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39172674,00.htm Michael Meadhra propose la construction d’une page « fluide » en 3 colonnes avec en-tête et pied de page au travers de cinq étapes progressives. Nous décrivons ici les éléments pour l’étape B, ceci afin de vous donner le goût d’explorer son article et d’aller jusqu’à la cinquième étape (E). Bon travail! Le template en 3 colonnes et en couleur de la deuxième étape (B) de Michael Meadhra : http://meadhra.com/CNET/040714/3col-float-FigB.html
Ce template « Meadhra-Zdnet » utilise : HTML : les éléments de balises : - Boîtes bloc : div, h2, h4, p, ul, li - Boîtes en-ligne : néant CSS : - le sélecteur de type body et div - le sélecteur d’id (d’identifiant), symbole # associé à la balise div, soit : div#xxxxx
Présentation séquentielle des relation : Feuilles CSS Balises HTML avec Disposition relative des boîtes imbriquées Présentation selon les directives ci-dessous
Présentation séquentielle des relation : Feuilles CSS Balises HTML avec Disposition relative des boîtes imbriquées
Présentation séquentielle des relation : Fichier HTML Règles CSS avec Disposition relative des boîtes imbriquées Présentation selon les directives ci-dessous
Présentation séquentielle des relation : Fichier HTML Règles CSS avec Disposition relative des boîtes imbriquées
Cette présentation séquentielle montre comment s’effectuent les rôles séparés et complémentaires du « HTML-purgé » et des CSS : • Le fichier HTML assume le contenu et la structure arborescente de la page. À savoir l’existence et la hiérarchie arborescente des boîtes principales et des boîtes imbriquées de tous les objets (texte, liens, images, etc.). • Les CSS assument la « mise en page (disposition relative), mise en forme, esthétique, cosmétique » des boîtes ainsi que des texte, liens, etc.
« PS : Ajustement approximatif des couleurs de l’organigramme consécutif aux limitations de PowerPoint. »
Exemple 1 Résumé du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS
body margin: 0px; padding: 0px;
header navcol main sidecol foot
header height: 60px; Margin: 0px; navcol main sidecol width: 130px; float: left; margin-left: 160px; margin-right: 160px; width: 130px; float: right; foot clear: both;
header height: 60px; Margin: 0px; navcol main sidecol width: 130px; float: left; margin-left: 160px; margin-right: 160px; width: 130px; float: right; <body> <div id="header">En tete</div> <div id="navcol">Colonne gauche</div> <div id="sidecol">Colonne droite</div> <div id="main"> Colonne centrale</div> <div id="foot">Pied de Pge</div> </body> foot clear: both;
Exemple 1 Variante 1 du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS
En-tete colgauche colcentre coldroite Pied-de-page
margin-top: 0px; margin-left: 250px; margin-right: 250px; width: 220px; float: right; width: 220px; float: left; clear: both;
margin-top: 0px; width: 220px; float: left; width: 220px; float: right; margin-left: 250px; margin-right: 250px; clear: both;
Exemple 1 Variante 2 du Template 3 colonnes de Michael Meadhra Les points essentiels aux plans du HTML et des CSS
En-tete gauche centre droite Pied-de-page
Div 1 Div 2 Div 3 Div 4 Div 5
margin: 0px; height: auto; width: 100% Div 1 Div 2 Div 3 margin: 0px; 25%; position: static; margin: 0px; float: left; position: static; width: 25%; margin: 0px; 25%; float: right; width: 220px; position: static; Div 4 Div 5 clear: both; height: auto; width: 100%
overflow: scroll; width: auto; Div 4
overflow: scroll; width: auto; overflow: scroll; width: auto; overflow: scroll; width: auto;
Template CSS 2 modèle 3 colonnes auto adaptable • D’après le site ultra-fluide.com • Template CSS 2 : modèle 3 colonnes auto adaptable.http://www.ultra-fluide.com/ressources/css/template-css2.htm