Alsacreations, tableaux ou div une comparaison

Transcription

Création de sites web, cours et tutoriels CSS et XHTML
●
●
●
●
●
●
●
Aller sur Alsacréations.
CV.
Liens.
Doc CSS.
Forum CSS.
Blog.
Accueil.
Galeries et Modèles
●
●
Modèles de mise en page CSS : Des dizaines de gabarits en XHTML pour construire vos sites sans tableaux
Galeries de menus : Des menus de toutes sortes pour vous inspirer (simples, graphiques, déroulants,...)
Dernier tutoriel
●
Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML
et s'auto-proclamer 'webmaster' ?
Les plus visités
●
●
●
Construire un site sans tableaux
Un menu déroulant en CSS
Savoir positionner les calques et balises en CSS
Tableaux ou Div, petite comparaison concrête
La théorie
A l'heure actuelle, la grande majorité des sites web sont construits grâce à l'utilisation de tableaux. Les tableaux,
permettent en effet de structurer la page en plusieurs parties, et chaque partie peut contenir un menu, un entête, un
contenu,...
Cependant, cette méthode quasi-universelle présente de nombreux désavantages :
●
●
●
l'imbrication multiple de tableaux est souvent nécessaire, même pour des design simples.
le nombre de balises (table, tr, td, colspan, rowspan... sans oublier les horribles spacer.gif) devient vite considérable
et alourdir le code, la lisibilité et donc la mise à jour
ce code très lourd augmente souvent inutilement le poids de la page et du chargement.
De plus, pour des questions d'Accessibilité (aux handicaps par exemple), il est recommandé d'utiliser chaque balise de
façon sémantiquement correcte.
Un tableau est conçu initialement pour afficher des données... tabulaires (un forum, des statistiques par exemple) et non
pour faire la présentation de sa page.
Vous découvrirez en détails les différent problèmes que posent une mise en page en tableaux sur les sites suivants :
http://www.alsacreations.com/articles/tableaux/ (1 sur 5) [12/08/2004 18:02:13]
OpenWeb et Cybercodeur.
Notre exemple
Nous allons utiliser un exemple concret de site web pour effectuer une comparaison entre les deux mises en pages afin de
savoir ce que peut apporter concrêtement une mise en page avec des blocs div.
Le site que nous allons prendre en exemple est www.ink2art.com (inutile d'aller visiter le site : la mise en page vient de
changer depuis avril 2004)
L'ancienne mise en page du site (celle que nous allons reproduire et comparer) est assez simple et était composée de
grosses lettres en images qui changeaient au survol de la souris :
En pratique...
Pour pouvoir faire notre comparaison "tableaux" contre "div", nous avons reproduit exactement cette mise en page de
référence (même visuel, même comportements de rollovers) de trois manières différentes :
●
●
●
Première solution : reproduire la mise en page à l'aide d'outils WYSIWIG (What You See Is What You Get),
Macromedia Fireworks pour le design et Macromedia Dreamweaver pour le code HTML. Voir le résultat.
Deuxième solution : refaire la mise en page à la main, à l'aide de tableaux. Voir le résultat.
Troisième solution : reproduire la mise en page à la main, à l'aide de balises div et de feuilles de styles CSS. Voir
le résultat.
Notons que chacune des trois solutions doit obligatoirement donner un résultat compatible (même visuel + comportement
rollover) sur les navigateurs standards récents: IE5.5+ Netscape6+ Mozilla1+ Opera6+ et Safari1+
Le poids des pages
Le poids des différentes mises en pages est celui-ci :
●
●
●
Mise en page tableaux wysiwyg : 4.73ko
Mise en page tableaux à la main : 3.86ko
Mise en page tableaux avec div et css : 1.73ko
Bien sûr, certains codes auraient pu être bien plus optimisés (on a réussi à compresser le document en div à moins de 600
octets, mais sa lisibilité s'en est trouvé considérablement réduite), cependant le constat en terme de poids est facile à
prononcer : la mise en page tableaux à la main (solution 2) a permis une économie de 18% par rapport au code généré par
les logiciels wysiwygs
Loin devant, en terme de légèreté de code, la mise en page avec div et css (solution 3) a permis une économie de 55% sur
le code à la main et de près de 64% sur le code wysiwyg !
Séparation des styles
Le principe de la mise en page à l'aide de styles CSS permet un avantage que n'ont pas les autres techniques : la séparation
des styles sur une feuille de style externe (fichier .css séparé) est un excellent moyen d'économiser du poids de page.
En effet, le document ne contiendra que la partie de code pur (partie HTML située dans les balises body), tout le design
sera sur une feuille CSS externe. Cette feuille externe sera chargée par le navigateur la première fois, puis mise en cache
dans le disque dur de l'ordinateur et rechargée instantanément. De plus, une feuille unique pour tout le design facilite
considérablement les mises à jour et les modifications du site : en un clic vous pouvez modifier tout le design de toutes les
pages du site.
Au final, en séparant les styles CSS sur une feuille externe, le poids de la mise en page avec div et css est de ... 498 octets,
soit près de 90% d'économie de code par rapport au document produit par les logiciels wysiwyg !
Bien-sûr un allègement de 90% sur un code de 4.73ko est infime et négligeable. Par contre, imaginez un instant des pages
plus complexes, un site de plusieurs centaines de ces pages lourdes, et quelques centaines de visiteurs quotidiens. Vous
arrivez rapidement à plusieurs Méga-octets de données économisées sur votre bande passante chaque jour.
L'Accessibilité
Autre point de différences : l'Accessibilité des pages aux handicaps.
Pour tester l'accessibilité des mises en page réalisées, nous allons utiliser un navigateur texte qui ne tient pas en compte les
images ou les scripts : Lynx. Nous testerons les documents à l'aide de ce visualiseur Lynx.
Les résultats sont sans appel : les deux documents réalisés en tableaux n'affichent strictement rien sur Lynx. En effet, les
images (même avec la balise alt) ne sont pas du tout utilisables et cliquables par exemple.
Voici ce que donne l'affichage des deux premieres solutions sur un navigateur texte :
Comme vous le constatez, il n'apparaît aucun élément significatif, ni aucune navigabilité sur le site.
Voici ce que donne l'affichage de la 3ème solution (div) sur un navigateur texte :
Bien que sommaires, les liens du site sont présents et cliquables.
Autre domaine à prendre en compte dans l'Accessibilité : votre document web ne sera pas obligatoirement vu sur un
navigateur et un écran d'ordinateur. A l'heure des technologies actuelles, un document doit être multisupports et passer
aussi bien sur un écran que sur un téléphone wap, un palm, ...
Lisibilité du code
Imaginons à présent que l'on vous donne pour mission de modifier une partie du code HTML, par exemple pour décaler
l'une des images. Là encore, les trois solutions offrent des codes très différents.
Voici un (court) extrait du code de la solution "wysiwyg" :
<td colspan="4"><img name="titrec1" src="images/titre.gif" width="387" height="52"
border="0" alt=""></td>
<td bgcolor="#000000"><img src="images/spacer.gif" width="33" height="52"
<td rowspan="2"><img name="t" src="images/t.gif" width="149" height="228"
<td><img src="images/spacer.gif" width="1" height="52" border="0" alt=""><
/td>
</tr>
<tr>
<td colspan="3" bgcolor="#000000" valign="top"><font color="#FFFFFF" size="2"
face="Arial, Helvetica, sans-serif">© InkArt 2003</font></td>
<td colspan="2"><a href="#" onMouseOut="MM_swapImgRestore();"
onMouseOver="MM_swapImage('a','','images/aon.gif',1);"><img name="a"
src="images/a.gif" width="177" height="176" border="0" alt=""></a></td>
Avouez qu'il est difficile de s'en sortir et de savoir à quoi correspond quelle partie du code. En réalité, vous ne pourriez
quasiment pas vous en sortir sans l'aide d'un logiciel qui déchiffrerait ce charabia.
Imaginez à présent ce document visité par un utilisateur aveugle, utilisant un lecteur braille qui "lit" les balises : cet
utilisateur sera totalement incapable d'avoir une représentation globale du document.
Voici à présent le code HTML complet de la solution 3, à l'aide de div et CSS :
<img id="i" src="images/i.gif" alt="lettre i" />
<a id="n" href="">bouton n </a>
<a id="k" href="">bouton k </a>
<a id="two" href="">bouton 2 </a>
<img id="ti" src="images/titre.gif" alt="titre" />
<a id="imga" href="">bouton a </a>
<a id="r" href="" >bouton r</a>
<img id="t" src="images/t.gif" alt="lettre t" />
<div id="copyright">© Ink2Art 2003</div>
Ce code n'est composé que de deux balises principales qui ne s'enchevêtrent pas : les images <img> (pour les lettres fixes
comme le titre ) et les balises de lien <a> (pour les liens en images réactives) : c'est simple et clair !
Il suffit de connaitre les deux balises (img, a) pour pouvoir se représenter la structure du document, même si on ne connait
pas les feuilles de styles CSS. Cette facilité de lecture va grandement améliorer les mises à jour et les modifications du
document.
Note : si vous êtes totalement néophyte dans le domaine des CSS, ce code peut vous paraître complexe au premier abord...
quelques connaissances de base des CSS vous feront vite comprendre qu'il n'en est rien.
Pour les débutants, lire l'excellent article "un cheminement vers les Standards"
Conclusion
Les tableaux ne sont pas fait pour la mise en page et ce petit exemple concrêt (même s'il a des limites) le démontre.
Les tableaux semblent pratiques mais vous obligent à bidouiller pour obtenir un affichage correct : passage obligé des
rowspan, colspan, spacer.gif et autres tables imbriquées; Tout cela est bien plus simple à structurer à l'aide de div... pour
peu que vous soyez motivé à laisser tomber les vieilles habitudes et suivre l'évolution du web.
Raphaël GOETTER
www.alsacreations.com
Alsacreations, faire une mise en page en CSS et XHTML
●
●
●
●
●
●
●
CV.
Liens.
Doc CSS.
Forum CSS.
Blog.
Accueil.
●
●
Modèles de mise en page CSS : Des dizaines de gabarits en XHTML pour construire vos sites sans
tableaux
Dernier tutoriel
●
Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le
HTML et s'auto-proclamer 'webmaster' ?
Les plus visités
●
●
●
Faire une mise en page grâce aux CSS
L'objectif est de créer un canevas de page web entièrement en CSS et qui s'adapte automatiquement à la taille du
navigateur et de l'écran. Voir le résultat / voir une variante
Introduction
Les feuilles de style (CSS) sont des outils très puissants, qui ne se résument pas qu'à modifier la couleur des liens,
comme on le croit parfois. Vous trouverez une introduction à l'utilisation des CSS dans ce tutoriel.
En fait, les feuilles de style prennent de plus en plus d'importance avec l'évolution du web et il est possible de
construire des sites entiers uniquement à l'aide de CSS.
Techniquement, il existe trois sortes de design pour le web :
●
●
●
Le design ICY : la largeur du site est fixée en pixel (en général 760px) et le site est placé à gauche du
navigateur
Le design JELLY : la largeur est toujours fixe, mais le site est centré dans l'écran
Le design FLUID : le site s'adapte automatiquement à la largeur de l'écran. C'est ce que nous allons faire
http://www.alsacreations.com/articles/design/ (1 sur 9) [12/08/2004 18:02:57]
dans ce tuto.
Avantages, inconvénients et compatibilités
Les CSS ont de nombreux avantages, notamment celui d'alléger le code et le poids de la page web, mais aussi de
permettre des choses irréalisables en html ou en javascript.
De plus, les CSS facilitent la mise à jour de gros sites : avec une feuille de style séparée, il suffira de modifier une
ligne pour changer l'aspect de tous les cadres d'un site entier.
Un aspect très intéressant des CSS c'est de pouvoir changer en un claquement de doigt tout l'aspect physique de la
page. Vous pouvez vous en apercevoir avec le choix des designs sur Alsacréations, mais surtout sur le site de
référence en la matière, un véritable caméléon : le fameux CSS Zen Garden.
Enfin, les CSS permettent le respect des standards du web, de la sémantique des balises, et facilitation de
l'Accessibilité. (voir sur le site de référence français : OpenWeb)
Du côté des inconvénients, il faut admettre que les éditeurs visuels html, comme Dreamweaver, ont encore du mal à
suivre ces techniques et se limitent généralement à l'utilisation de tableaux pour construire les pages, ou alors à une
mauvaise utilisation de calques. En clair, même si l'exercice de ce tutoriel pourra être réalisé grâce aux outils de
CSS intégrés de Dreamweaver, il est probable que vous ayez à mettre les mains dans le cambouis du code pour
passer aux étapes supérieurs et aux techniques plus évoluées.
Pour ce qui est de la compatibilité navigateurs, il faut savoir que les CSS étaient intégrées en partie dès Internet
Explorer 3 et qu'à l'heure actuelle tous les navigateurs récents gèrent très bien les feuilles de styles évoluées.
Cependant, vous devez savoir que les anciens navigateurs, comme Netscape 4, gèrent très mal (voire pas du tout)
les positionnement en CSS que nous allons utiliser dans ce tutoriel. C'est un parti pris : il faut bien bouger les
choses si l'on veut que ces dinosaures disparaissent un jour.
Démarche :
Nous n'utiliserons aucun tableau ni cellules pour construire notre canevas, mais uniquement des balises DIV pour
délimiter nos "zones".
NOTE : Les balises <div> sont des balises neutres servant de conteneurs, de blocs. Ils désignent une boite
rectangulaire invisible.
Généralement, la balise <div> est assimilée au concept de "calque" (surtout sur les éditeurs html comme
Dreamweaver).
Un calque est un <div> qui a été positionné avec la propriété "position: absolute" ou "position: relative".
Mais rien ne nous oblige à imposer cette propriété de position, on peut souvent s'en passer en plaçant les div
les uns par rapport aux autres grâce à la propriété "margin".
Afin de définir et différencier chaque bloc div, nous leur appliquerons une classe différente. Par exemple, le div
class="gauche" (celui qui servira de menu) sera un bloc placé à gauche de la page et aura une largeur définie à 200
pixels.
Voici comment nous allons procéder :
●
●
Nous commencerons par délimiter 4 parties sur notre page : un entête, un menu, une partie centrale et un
pied-de-page. Chaque partie sera un bloc (div) que nous définierons (taille, position, couleur, ...) grâce au
CSS et que distinguerons par une classe différente.
Nous placerons le code HTML dans la partie BODY de la page. Le code HTML sera très court et ne
●
contiendra que des balises div.
Nous construirons ensuite le code CSS à placer en partie HEAD de la page. C'est ce que l'on appelle une
feuille de style interne, mais vous pouvez bien sûr faire de même en utilisant une feuille externe.
Note : tous les attributs CSS utilisées ne seront pas expliqués en détail, parce qu'en général leur signification
sera suffisamment explicite. Si toutefois certaines balises ou attributs vous paraîtraient obscur, voici une liste
courte et expliquée des attributs que nous utiliserons :
http://www.commentcamarche.net/css/cssproperty.php3
Réalisation générale
1.
Code HTML
La structure générale (le code HTML que vous placerez au sein de vos balises <body>), est celle-ci :
<div class="entete"></div>
<div class="contenu">
<div class="menu"></div>
<div class="centre"></div>
</div>
<div class="pied"></div>
Nous avons donc nos quatre blocs (entête, menu, centre et pied de page). Nous remarquons que les blocs "menu" et
"centre" sont eux-même contenus dans un bloc nommé "contenu", ceci afin que nos deux parties centrales soit au
diapason (même hauteur, et positionnement l'une par rapport à l'autre par exemple)
A présent que la partie html est faite, il nous suffit de nous occuper de la partie CSS !
Important : par défaut, les blocs DIV se placent automatiqument les uns en-dessous des autres et prennent
toute la largeur de l'écran. A nous donc de nous servir de cet avantage à bon escient.
1.
Code CSS
Voilà donc le code CSS de notre mise en page, à placer entre les balises HEAD de la page html. Vous trouverez les
explications détaillées en-dessous du code :
<style type="text/css">
<!-html, body {
margin:0;
padding:0;
height: 100%;
}
.entete {
background-color: #3333CC;
height: 10%;
}
.contenu {
height: 80%;
background-color: #66CCFF;
}
.menu {
background-color: #330066;
float: left;
width: 200px;
height: 100%;
color: #ffffff;
}
.centre {
margin-left: 200px;
}
.pied {
background-color: #336699;
height: 10%;
}
-->
</style>
Explication du code CSS et réalisation :
1) Commençons par supprimer les marges de la page en cliquant sur l'ajout d'un nouveau style avec Dreamweaver
(Maj+F11). Cochez l'option "redéfinir une balise existente" et sélectionnez la balise BODY dans la liste déroulante.
Dans la catégorie "box", donnez la valeur 0 (zéro) à toutes les marges (gardez cochée la case "identique pour tous").
2) Ensuite, on va définir notre entête (div class="entete") en cliquant sur l'ajout d'un nouveau style. Nommons
notre style .entete (ne pas oublier le point avant le nom).
Dans la catégorie "background", choisissons une couleur de fond pour l'entête (j'ai choisi la couleur #3333CC).
Dans la catégorie "box", nous allons lui donner une hauteur de 10% (c'est un exemple que vous pouvez modifier).
Voilà tout pour notre entête : pas besoin de lui indiquer une position car il sera automatiquement placé en haut à
gauche. Inutile de lui indiquer une largeur : il occupera toute la largeur de l'écran.
3) Continuons de la même manière à définir notre bloc de contenu (div class="contenu") qui s'appellera .contenu
et qui va contenir les blocs de menu et central.
Donnez à ce bloc une hauteur de 80% et une couleur de fond (#66CCFF chez moi).
Inutile de donner une position à ce bloc "contenu" : il sera automatiquement placé à la suite du bloc "entête"
4) Passons au bloc de menu (div class="menu"). Ce bloc sera le seul à posséder une valeur de largeur car il ne doit
pas s'étaler sur toute la page. Il sera également différent des autres car il devra être placé à gauche et non endessous du bloc central, comme c'est le cas par défaut.
Créez donc cette classe en cliquant sur l'ajout d'un nouveau style. Appelez-la ".menu" et donnez-lui une couleur de
fond.
Dans la catégorie "box", vous allez lui spécifier une largeur (200px), mais vous allez également lui donner la valeur
"float: left" pour lui indiquer de se placer à gauche dans son conteneur.
Enfin, vous lui spécifierez une hauteur de 100%, ce qui veut dire qu'elle utilisera toute la hauteur de son conteneur,
c'est à dire le bloc "contenu".
5) Au tour du bloc central (div class="centre"), celui qui contiendra le contenu de la page. Ce bloc aura
simplement à être positionné par rapport au menu, c'est à dire avec une marge gauche de 200 pixels.
Créez cette classe en cliquant sur l'ajout d'un nouveau style. Appelez-la ".centre", inutile de lui donner une couleur
de fond : elle aura celle de son conteneur c'est à dire "contenu".
Dans la catégorie "box", vous allez lui spécifier une marge à gauche de 200px. Il faut décocher l'option "identique
pour tous", sinon la marge va s'appliquer dans tous les sens.
Inutile de donner une largeur à ce bloc "centre" : il prendra automatiquement la largeur qu'il reste dans l'écran.
6) On termine en définissant notre pied de page (div class="pied") en cliquant sur l'ajout d'un nouveau style.
Nommons notre style .pied.
Dans la catégorie "background", choisissons une couleur de fond pour l'entête (j'ai choisi la couleur #336699).
Dans la catégorie "box", nous allons lui donner une hauteur de 10% (c'est un exemple que vous pouvez modifier).
Voilà tout pour notre pied : pas besoin de lui indiquer une position car il sera automatiquement placé en dessous
des autres. Inutile de lui indiquer une largeur : il occupera toute la largeur de l'écran.
A vous de jouer !
Ce tutoriel est basique, il permet de créer un canevas-type simple. Vous pouvez très bien vous approprier cet
exercice pour réaliser des structures beaucoup plus complexes, par exemple en remplaçant les couleurs de fond par
des images.(voir cet exercice)
Les CSS permettent également de faire des menus évolués : verticaux, déroulants, animés,... (voir la page générale
et les exemples)
Attention : avec le design que nous avons créé, nous "bloquons" la hauteur du bloc centre à 80%. En effet si le
texte est trop long dans le DIV «centre» le texte passe sous le DIV «pied». Pour ne pas bloquer cette hauteur, il est
préférable d'utiliser la propriété "min-height" que "height"
Pour finir, voici toute une panoplie de modèles de mise en page CSS.
Note finale : pour aller plus loin dans le positionnement CSS, n'hésitez pas à suivre les explications sur le site de
référence, OpenWeb (http://openweb.eu.org/articles/initiation_flux/)
Raphaël GOETTER
Alsacreations, faire un site web sans tableaux : CSS et XHTML
●
●
●
●
●
●
●
CV.
Liens.
Doc CSS.
Forum CSS.
Blog.
Accueil.
●
●
Dernier tutoriel
●
Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et s'autoproclamer 'webmaster' ?
Les plus visités
●
●
●
Construire un site sans tableaux (CSS-P)
Niveau de pratique : intermédiaire
Prérequis : initiation aux CSS de base
A l'heure actuelle, la grande majorité des sites web sont construits grâce à l'utilisation de tableaux. Les tableaux, permettent en effet de
structurer la page en plusieurs parties, et chaque partie peut contenir un menu, un entête, un contenu,...
Cependant, cette méthode quasi-universelle présente de nombreux désavantages :
- l'imbrication multiple de tableaux est souvent nécessaire, même pour des design simples.
- le nombre de balises (table, tr, td, colspan, rowspan...) devient vite considérable et alourdir le code, la lisibilité et donc la mise à jour
- ce code très lourd augmente souvent inutilement le poids de la page et du chargement.
De plus, pour des questions d'Accessibilité (aux handicaps par exemple), il est recommandé d'utiliser chaque balise de façon
sémantiquement correcte.
Un tableau est conçu initialement pour afficher des données... tabulaires (un forum par exemple) et non pour faire la présentation de sa
page.
Le full-CSS, ou Positionnement-CSS (CSS-P) est l'application stricte des recommandation des Standards du web actuels.
Le XHTML, successeur de feu le HTML, est conçu pour faire une stricte séparation entre le Contenu et la Mise en page.
L'orientation des Standards est claire : tous les attributs de taille, de position, de couleurs, d'alignement (width, height, align, font,
color,...),... NE DOIVENT PAS figurer sur la page html, mais sur ce qui va gérer l'affichage, c'est à dire la feuille de style CSS.
Nous allons donc créer notre site proprement, intégralement en CSS (pas de tableaux pour l'affichage). Ce site sera respectueux des
Standards du W3C, mais aussi de l'Accessibilité aux non-voyants, non-entendants, personnes présentant des handicaps divers (sensoriels,
moteurs...) .
Note : tous les attributs CSS utilisées ne seront pas expliqués en détail, parce qu'en général leur signification sera suffisamment explicite.
http://www.alsacreations.com/articles/tutocss/ (1 sur 7) [12/08/2004 18:03:28]
Si toutefois certaines balises ou attributs vous paraîtraient obscur, voici une liste courte et expliquée des attributs que nous utiliserons :
http://www.commentcamarche.net/css/cssproperty.php3
AVANTAGES DU POSITIONNEMENT CSS
- Meilleure Accessibilité : aux navigateurs, aux moteurs de recherche, aux machines, aux personnes handicapées
- Pérennité : le respect des Standards nous assure d'avoir un site compatible avec tous les futurs navigateurs
- Mise à jour : la séparation Structure/Contenu permet une bonne lisibilité du code, mais aussi une mise à jour facilitée
- Poids de page : chaque page HTML est réduite de 1/3 à 2/3
Pour plus d'info sur ce concept général :
- http://ljouanneau.free.fr/standards/pourquoi.html : Pourquoi respecter les Standards
- http://openweb.eu.org/ : LA référence sur les Standards et quelques tutos pour les mises en page CSS
Voici le design que l'on va construire (design conçu par Alsacréations, tous droits réservés) :
PREMIERE PARTIE : LE HEADER
On va s'intéresser à la mise en page générale
On va essayer de raisonner différemment : pas en tableaux ou cellules, mais en "zones" ou "blocs"
On voit clairement plusieurs Blocs dans le design du site :
- une surface contenant le Header
- une zone contenant le Menu horizontal (Accueil, Produits, Catalogue,...)
- une zone à gauche qui contient le Menu principal
- une zone centrale avec le contenu de page
Si on construisait ce design à l'aide de tableaux, il nous faudrait tricher en créant plein de colspan, rowspan, ... et des colonnes ou des
lignes séparatrices... ou pire encore, des fameux gifs transparents (spacers).
Dans notre cas, on va conserver l'idée des Blocs : chaque zone sera placée sur la page tout simplement... et chaque zone sera définie
(taille, structure interne, backgrounds, ...) sur la feuille de style.
NOTE : nous allons construire notre mise en page à l'aide de balises <div>, qui sont des balises neutres servant de conteneurs, de
blocs.
Généralement, la balise <div> est assimilée au concept de "calque" (surtout sur les éditeurs html comme Dreamweaver).
Un calque est un <div> qui a été positionné avec la propriété "position: absolute" ou "position: relative".
Mais rien ne nous oblige à imposer cette propriété de position, on peut souvent s'en passer en plaçant les div les uns par rapport
aux autres grâce à la propriété "margin".
Le premier avantage du CSS est facile à deviner : si on veut déplacer ou inverser des parties du site, il suffit de changer une ou deux
lignes sur la feuille de style... au-lieu de modifier chaque cellule de TOUTES les pages du site.
Commençons par étudier le HEADER ; voiçi comment je conçois la structure visuelle du Header :
Le header sera découpé en deux blocs divs conteneurs :
- le div "head1" contiendra une image de fond ainsi que le logo (Adminews) collé à droite
- le div "head2" contiendra une image de fond ainsi que le menu horizontal
Le code en page html est enfantin, le voici :
<html>
<head>
<title>mon site</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head1">
<img src="design/logo.gif" class="logo" alt="logo" /></div>
<div class="head2"></div>
</body>
</html>
Le logo sera placé dans le premier bloc (dans la div class="head1"). Ne pas oublier l'attribut ALT obligatoire en XHTML.
Le code CSS de la feuille de style (styles.css) n'est pas compliqué non-plus (explications en-dessous)
Note : /* ces textes sont des commentaires explicatifs, ils peuvent être supprimés*/
body {
margin: 0;/* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page
*/
font-size: 12px; /* on définit la taille de police de base dans la page */
}
.head1 {
background-image: url('design/head1.gif');
width: 770px;
height: 91px;
}
.head2 {
background-image: url('design/head2.gif');
width: 770px;
height: 36px;
}
.logo {
float: right; /* alignement du logo à droite */
margin-right: 10px; /* placement du logo dans son conteneur, head1 */
margin-top: 3px;
border: 0;
}
On élimine les marges de la page (pour qu'elle colle aux côtés). On définit les deux blocs de header (image de fond et tailles). On crée
une classe pour le logo (afin de préciser sa position dans le div, ici aligné à droite avec une marge de 10px à droite et 3px en haut).
L'image devra avoir une border de 0 car se sera sans-doute un lien cliquable. Or les images-liens ont toujours une border 1 par défaut... il
faut donc la supprimer en CSS.
PS : il ne faut pas oublier les ";" à la fin d'une instruction CSS
Voilà, notre header est fini ! On s'occupera du menu horizontal plus tard
DEUXIEME PARTIE : le menu et le contenu central
Le bloc de menu est aligné à gauche.
Le bloc de contenu principal prend toute la place restante laissée par le menu, soit 586px.
Voici le code CSS pour cette partie :
.gauche {
position: absolute;
left:0; /* on place le bloc gauche à gauche en position absolue */
background-image: url('design/menu.gif');
width: 181px;
height: 337px;
}
.centre {
margin-left: 181px; /* on place le bloc centre par rapport à la largeur du bloc
gauche */
width: 586px;
height: 337px;
}
Pour la partie HTML, nous ne faisons que rajouter les deux div :
<div class="gauche"></div>
<div class="centre"></div>
TROISIEME PARTIE : le menu de gauche
Le menu est composée d'un cadre bleu clair avec une bordure bleue foncée. Le texte interne sera construit sous forme de liste, puisque
cette balise est tout à fait appropriée à ce genre d'affichage.
Vous placerez évidemment le bloc de menu (<ul class="menu">) à l'intérieur du bloc de gauche (<div class="gauche">) sinon il
s'affichera ailleurs, dans un autre bloc.
Voici donc le CSS pour définir tout ça :
.menu { /* on définit un conteneur pour le menu */
margin-top: 30px;
width: 160px;
border: 1px solid #060C6F;
background-color: #B7D3F0;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}
Et voiçi ce qu'on rajoute dans la partie HTML :
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
On va tout de suite rajouter un contenu fictif pour la partie centrale :
<div class="centre">
<h1>Mon site web</h1>
<h2>Comment je l'ai construit en CSS et sans tableaux</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti.
Cras leo nibh, aliquet nec, interdum et, consequat sed, nulla. Praesent
nec quam quis augue auctor pulvinar. Nunc vehicula wisi et mi. Quisque ultricies
volutpat metus. Nulla eu erat sed mauris euismod tempor. Aliquam sit amet quam
vitae massa dignissim fringilla. Nam pharetra lobortis velit. Donec scelerisque,
nisl a molestie vulputate, urna lectus rhoncus ante, in congue lacus erat ac
urna. Duis quam. Phasellus diam eros, ullamcorper dictum, lacinia in, accumsan
vel, felis. Ut at sapien. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.</p>
<p>Sed gravida leo sed quam. Aenean vitae pede a felis semper vestibulum.
Mauris non ante. Pellentesque suscipit lectus at erat. Integer et risus id tortor
pellentesque tempus. Aliquam dui nulla, suscipit nec, consectetuer a, fringilla
sit amet, luctus at, purus. Integer nec arcu ac dui placerat rutrum. Maecenas
dignissim, justo nec rhoncus dignissim, nulla felis vehicula massa, in commodo
tempus nec, erat</p>
</div>
On en profite pour définir les balises de titres dans le CSS :
h1 {
font-size: 140%;
text-align: right;
}
h2
{
font-size: 100%;
text-align: right;
}
Et enfin les balises de listes, qui nous permettent de construire le menu de façon logique :
ul,li {
list-style-type: none; /* pour ne pas avoir de puces */
margin: 0;
padding:0;
line-height: 30px; /* interligne */
}
DERNIERE PARTIE : le menu horizontal
Chaque lien du menu (Accueil, Produits, Catalogue,...) sera structuré avec la classe "lienhaut" comme ceci : taille de police 16px, grasse
et une marge gauche de 20px pour être espacé du lien précédent.
Vu que le menu est horizontal, nous pouvons éviter d'utiliser une liste (car les éléments de liste vont à la ligne par défaut) et nous
contenter des balises <a> auxquelles on se contentera de donner des marges pour les espacer.
Ces différents liens sont placés dans un bloc conteneur qui indique la structure générale du menu (placement aligné à droite et marges)
Voiçi le code CSS :
.menuhaut {
float: right; /* on aligne le menu vertical à droite de son conteneur, head3 */
margin-right: 10px;
margin-top: 10px;
}
.menuhaut a {
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: none; /* pour éviter le soulignement au survol */
margin-left: 20px; /* espacement entre chaque sous-menu */
}
Et enfin la partie HTML (à placer au bon endroit, c'est à dire dans la DIV "head2") :
<div class="menuhaut">
<a href="...">Accueil</a>
<a href="...">Produits</a>
<a href="...">Catalogue</a>
<a href="...">Forum</a>
<a href="...">Contacts</a>
</div>
NOTE : il aurait été judicieux de construire le menu horizontal sous forme de liste aussi (comme le menu de gauche), mais cela aurait
demandé quelques paragraphes explicatifs supplémentaire, notamment pour expliquer comment placer les éléments de liste les uns à côté
des autres. Plus de renseignement sur ce point de détail sur ce site.
Et plus si affinités...
Le design général est à présent terminé. Et voilà le résultat !
La technique du Positionnement CSS peut paraître rebutante au début pour les webmasters habitués à ne réfléchir qu'en termes de
tableaux... mais les avantages des CSS deviennent très vite indéniables.
La preuve est qu'il est possible de modifier entièrement le design entier de la page, rien qu'en modifiant un attribut dans les CSS...
imaginez le gain de temps pour des sites de quelques centaines de pages !
Pour finir, et c'est important de le souligner, le positionnement CSS permet de suivre l'évolution des standards du Web proposés par le
W3C.
Note finale : pour aller plus loin dans le CSS-P, n'hésitez pas à suivre les explications sur le site de référence, OpenWeb
(http://openweb.eu.org/articles/initiation_flux/)
ANNEXES, LIENS ET BIBLIOGRAPHIES
1. les ressources CSS en français dans les sites de Macromedia + le forum ;
2. les pages du W3C sur les CSS2, traduites par yoyodesign aux adresses suivantes :
chapitre 8 : www.yoyodesign.org/doc/w3c/css2/box.html : le modèle des boîtes ;
chapitre 9 : www.yoyodesign.org/doc/w3c/css2/visuren.html : le modèle de mise en forme visuelle ;
chapitre 10 : www.yoyodesign.org/doc/w3c/css2/visudet.html : détails du modèle de mise en forme visuelle ;
chapitre 11 : www.yoyodesign.org/doc/w3c/css2/visufx.html : le rendu visuel.
3. Livres sur les CSS :
initiation : CSS, le web avec du style : J Maxwell, Compétence Micro ;
initié-e-s : CSS précis et concis édition française : Meyer/Guérin, O'Reilly ;
HTML4 et CSS : Beuzit ;
Aide-mémoire CSS2 (13 mars 2003) : Beuzit, OEM Eyrolles.
Raphaël GOETTER
Alsacreations, centrer un site et un calque div en CSS
●
●
●
●
●
●
●
CV.
Liens.
Doc CSS.
Forum CSS.
Blog.
Accueil.
●
●
Modèles de mise en page CSS : Des dizaines de gabarits en XHTML pour construire vos sites
sans tableaux
Galeries de menus : Des menus de toutes sortes pour vous inspirer (simples, graphiques,
déroulants,...)
Dernier tutoriel
●
Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et
enseigner) le HTML et s'auto-proclamer 'webmaster' ?
Les plus visités
●
●
●
Centrer les éléments ou un site web en
CSS
Niveau de pratique : débutant
Prérequis : initiation aux CSS de base
Le centrage horizontal
Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner
une largeur (width) à l'élément et les valeurs "auto" aux marges latérales.
http://www.alsacreations.com/articles/centrer/ (1 sur 5) [12/08/2004 18:04:23]
Donnons à notre bloc (div) conteneur l'id "global" :
#global {
margin-left: auto;
margin-right: auto;
width: ...; /* largeur obligatoire pour être centré */
}
De cette manière, il équilibrera automatiquement les marges latérales.
Vous placerez votre bloc (div) conteneur dans votre code HTML :
<div id="global"></div>
Il suffit ensuite de placer le reste du site dans conteneur et votre site sera centré proprement.
Très simple, me direz-vous ! Petit hic : Internet Explorer qui est buggué ne comprend pas cette syntaxe
logique et il faut tricher avec lui.
Pour que ça fonctionne sous IE, il faut aligner le texte de façon centrée dans le body (car IE interprête
mal cette propriété et s'en sert pour tout aligner : texte, mais aussi images et tous les éléments en
général).
Donc :
body {
margin: 0; /* pour éviter les marges */
text-align: center; /* pour corriger le bug de centrage IE */
}
Il faudra ensuite rétablir l'alignement texte dans le conteneur, ce qui donne :
#global {
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left; /* on rétablit l'alignement normal du texte */
}
Attention à ne pas oublier de définir une largeur pour le conteneur, sinon il ne pourra
logiquement pas être centré. Attention également : cette méthode de marges automatiques ne va
pas centrer un bloc s'il est positionné en absolu (voir la technique des marges négatives pour ces
blocs).
Cas des éléments positionnés.
Pour les sites dont les éléments internes sont positionnés en "position: absolute" ou "position: relative",
la technique des marges latérales automatiques ne fonctionne pas par défaut.
En effet, si votre conteneur est placé dans le flux (avec des marges) et que votre contenu est positionné
(absolu ou relatif), ce dernier sort du flux et donc du conteneur. Il se placera alors par rapport au
dernier parent positionné : le document.
Pour éviter ce problème, il faut absolument que le conteneur soit lui-même positionné. En lui donnant
une position relative, vous pouvez garder son centrage avec marges automatiques, tout en incorporant
du contenu lui aussi positionné. Note : vous pouvez aussi utiliser la solution des marges négatives (cf
chapitre suivant).
Exemple de conteneur prévu pour un contenu avec des éléments positionnés :
#global {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left;
}
Et voilà pour le centrage horizontal
Le centrage vertical
Pour le centrage vertical, c'est une autre histoire !
Il existe un attribut vertical-align, mais il ne permet pas :
●
●
De positionner verticalement un texte dans un bloc quelconque (DIV, P, etc...)
De positionner verticalement un bloc dans un autre bloc.
Il n'est pas fait pour ça, mais en général pour aligner deux éléments l'un par rapport à l'autre. Il n'y a
que dans les cellules de tableaux que cette propriété aligne tout le contenu verticalement.
Là encore, il est possible de "feinter" en faisant croire que le bloc conteneur est une tableau (car dans
ce cas, l'attribut vertical-align fonctionne), et donc de déclarer ce bloc en display: table-cell;
Mais une fois de plus, IE ne gère pas le table-cell, malheureusement. Nous allons donc utiliser une
autre solution :
Les marges négatives
La technique des marges négatives permet de centrer un bloc dont on connait les dimensions.
Le centrage pourra être horizontal, vertical ou les deux à la fois.
Prenons un bloc conteneur de 700px de large et 400px de haut. Nous voulons qu'il soit centré
exactement dans le navigateur quelle que soit la résolution (800x600, 1024x768 ou plus).
Pour cela, l'astuce est de placer dans un premier temps ce bloc à top 50% et left 50%, ce qui placera le
coin supérieur gauche du bloc au milieu de page.
Ensuite, nous définirons des marges négatives dont la valeur est exactement la moitié de la largeur et
hauteur du bloc, ce qui le positionnera au milieu de page.
Voici le code CSS du bloc conteneur :
#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px;
margin-left: -350px;
border: 1px solid #000;
}
Il suffit ensuite de placer le conteneur juste en-dessous de la balise <body> :
<div id="global"></div>
Et notre bloc est centré. (Voir le résultat ici)
Note : Les marges négatives verticales en CSS semblent poser des problèmes sur Explorer Mac
(Inspiré librement de http://bluerobot.com/web/css/center2.html)
Raphaël GOETTER
Alsacreations, faire un cadre arrondi en CSS et XHTML
●
●
●
●
●
●
●
CV.
Liens.
Doc CSS.
Forum CSS.
Blog.
Accueil.
●
●
Dernier tutoriel
●
Les Principes Fondamentaux : Quelles bases minimales doit-on connaître pour apprendre (et enseigner) le HTML et
s'auto-proclamer 'webmaster' ?
Les plus visités
●
●
●
Faire un cadre arrondi ou graphique en CSS et
XHTML (nouvelle version)
Premier cas : un cadre de largeur fixe
Cette nouvelle version du tutoriel va vous permettre de réaliser un cadre arrondi, ou graphique en général, qui ne pourra
s'allonger qu'en hauteur (par exemple pour des menus dont le nombre varie), de manière simple en CSS.
Pour créer un cadre étirable dans les deux directions, passez directement Second Cas.
Nous allons réaliser ce cadre à l'aide de trois images et sans aucun tableau ni aucune balise <div>. Nous partirons du principe
que la largueur du cadre sera fixée à 275px.
Voici les images utilisées pour le cadre :
●
haut.gif (partie haute. Dimension : 275px X 40px)
●
milieu.gif (partie centrale qui va se répéter. Dimension réelle: 275px X 1px)
●
bas.gif (partie basse qui va se coller en bas. Dimension réelle: 275px X 40px)
http://www.alsacreations.com/articles/cadre/ (1 sur 5) [12/08/2004 18:04:57]
Note : Nous aurions très bien pu n'utiliser que deux images pour construire le cadre (en liant milieu.gif et bas.gif pour créer
une image globale très allongée). Cependant, cette technique aurait pu être lourde pour des cadres très graphiques en jpg par
exemple.
Nous utiliserons les Listes de Définition (balises <dl>, <dt> et <dd>) pour structurer notre cadre. La balise <dl> englobera
l'ensemble. Le <dt> sera le titre du cadre et la balise <dd> désignera le contenu du cadre (possibilité d'utiliser plusieurs <dd>
pour des éléments de menu par exemple).
Listes de définitions ?
Notre structure sera de la forme "titre + description" (la description étant le contenu du tableau qui va se rapporter au titre et le
définir). Sémantiquement parlant, les listes de définitions sont idéales pour structurer ce genre de cadre.
En effet, les spécifications du W3C suggèrent que les listes de définitions peuvent s'appliquer à partir du moment où il existe
une relation directe entre les éléments "titre" et "élément(s)".
Une liste de définition est composée de trois balises : <dl> est le conteneur global (comme la balise <ul> des listes simples);
<dt> indique le titre de la liste et <dd> est un élément de la liste qui est décrit par le titre.
Certains sites ont développé assez loin cette structuration, je vous recommande la lecture de cet article très clair : Les listes de
définitions : mal utilisées ou mal comprises ?
Le CSS se contentera de définir notre cadre global (dl), notre titre (dt) et le contenu (dd).
Voici la construction du cadre étirable en hauteur
Code CSS :
dl { /* positionnement du cadre, que vous pouvez modifier */
position: absolute;
left: 50px;
top: 20px;
width: 275px; /* largeur du cadre, selon votre image de fond */
}
dl, dt, dd { /* suppression de toutes les marges et paddings */
margin: 0;
padding: 0;
}
dl { /* arrière-plan par défaut sur l'ensemble du cadre */
background: url(bas.gif) bottom left no-repeat;
padding-bottom: 40px; /* pour que le texte ne s'affiche pas sur l'arrondi du bas */
}
dt { /* définitions du titre du cadre */
height: 40px;
background: url(haut.gif) top left no-repeat;
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
dd {
padding: 0 20px 0 10px; /* gestion des espaces internes du cadre */
text-align: justify;
background: url(milieu.gif) top left repeat-y; /* arrière-plan intérieur */
}
Et voici le code HTML complet :
<body>
<dl>
<dt>Mon cadre joli</dt>
<dd>Lorem ipsum dolor sit amet, bla bla bla bla...</dd>
</dl>
</body>
Revoir le résultat obtenu
Variante : la création d'un menu
Cette technique est également tout à fait adaptée à la création d'un menu entouré de cadre.
Il suffit pour cela d'utiliser les éléments de liste <dd> pour chaque item de menu
Et voici le code HTML adapté à un menu (notez l'utilisation des accesskey pour faciliter l'Accessibilité aux utilisateurs sans
souris) :
<body>
<dl>
<dt>Mon menu joli</dt>
<dd><a href="#" title="menu1"
accesskey="1">Menu
accesskey="2">Menu
accesskey="3">Menu
accesskey="4">Menu
accesskey="5">Menu
1</a></dd>
2</a></dd>
3</a></dd>
4</a></dd>
5</a></dd>
</dl>
</body>
Voir le résultat obtenu : le menu encadré
Deuxième cas : un cadre totalement fluide
L'objectif est à présent de créer un cadre de contenu, aux bords arrondis et qui s'adapte automatiquement selon le contenu, en
hauteur et en largeur. Voir le résultat.
Comme pour le premier cas, nous définirons un bloc conteneur (dl) qui contiendra l'ensemble du cadre.
Dans notre tutoriel, la largeur globale du cadre est définie à 75% de la largeur de page (c'est juste un exemple)
Vous pouvez très bien donner une autre valeur que 75% et l'adapter à la taille de cadre que vous voulez. Vous pouvez donner
une valeur fixe aussi, en pixels, à condition qu'elle soit supérieure à la longueur du titre-image.
Voici les images utilisées pour les bordures :
●
●
●
●
haut.gif (dimension réelle : 1200px X 50px)
hautd.gif (coin haut droit. Dimension : 30px X 50px)
bas.gif (dimension réelle : 1200px X 50px)
basd.gif (coin bas droit. Dimension : 30px X 50px)
Comme vous le voyez, les images "haut.gif" et "bas.gif" mesurent 1200px de largeur, ceci pour pouvoir s'adapter à la fluidité
du cadre : seule la partie gauche des images est affichée, le reste est caché et se dévoile si le cadre est étiré ou si la fenêtre du
navigateur s'agrandit.
La structure générale ressemble au premier cas, mais nécessite quelques arrangements pour assurer la fluidité de la largeur : Le
titre (dt) contiendra l'image "haut.gif" en arrière-plan, ainsi que le coin haut droit en image flottante.
Le dernier terme de la liste de définition, le dd nommé "bas" contiendra l'image "bas.gif" en arrière-plan, ainsi que le coin bas
droit en image flottante.
Les côtés seront simplement des bordures (border) appliquées aux éléments de liste (dd).
Voici la structure générale (partie HTML à placer entre les balises BODY) :
<dl>
<dt><img id="droitehaut" src="hautd.gif" alt="" />
<img id="titre" src="titre.gif" alt="titre" /></dt>
<dd>Contenu du cadre...</dd>
<dd id="bas"><img id="droitebas" src="basd.gif" alt="" /></dd>
</dl>
Et voici les définitions de la feuille de style CSS :
dl, dt, dd { /* suppression de toutes les marges */
margin: 0;
padding: 0;
}
dl {
width: 75%; /* dimensions et positions modifiables à loisir */
position: absolute;
left: 3em;
top: 2em;
}
dt {
height: 50px;
background: #fff url(haut.gif) top left no-repeat;
line-height: 0;
text-align: center; /* centrage du titre, bug IE*/
}
dd {
border: solid #5A6C84; /* couleur et taille des bordures droite et gauche */
border-width: 0 5px;
padding: 0 10px; /* padding g et d pour éviter que le texte ne chevauche les bordures
*/
}
#bas {
height: 50px;
background: #fff url(bas.gif) bottom left no-repeat;
border: 0 none; /* pas de bordure latérale pour la partie basse */
padding: 0; /* pas de texte donc pas de padding */
}
#titre {
display: block; /* mise en bloc de l'image titre pour éviter un bug d'espacements */
margin: auto; /* centrage du titre */
}
#droitehaut, #droitebas { /* placement des coin droits en flottants */
float: right;
}
Notre cadre est fini. Revoir le résultat.
Note importante pour certains cadres : Il se peut que votre haut ou bas de cadre se dédouble. C'est normal: sur IE toutes les
images (et autres balises en-ligne) occupent par défaut une hauteur minimale (celle du texte par défaut), soit environ 13px.
Donc toutes les images de moins de 13px prendront quand-même 13px. On peut feinter IE en affichant les images en bloc
(comme sur notre exemple) ou en mettant font-size à 0 dans les balises concernées.
Raphaël GOETTER

Alsacreations, tableaux ou div une comparaison

Transcription

Documents pareils

CV - Undergraphic, création de site Internet à Amboise (37)

Son CV - David Marchesson

Informations utiles pour votre séjour à l`étranger

Tom Germain

Formation Web Adobe DREAMWEAVER PERFECTIONNEMENT

Créer une Bannière Web

Mise en page 1 - Ecole en Communication Graphique (ECG)

CORRIGE TYPE

Union Départementale du Loiret CAF Président - CFE

BEP CSS CAP PE