Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.

On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarassantes). 

Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou de mots aléatoires qui ne ressemblent pas une seconde à du texte standard. Si vous voulez utiliser un passage du Lorem Ipsum, vous devez être sûr qu'il n'y a rien d'embarrassant caché dans le texte. Tous les générateurs de Lorem Ipsum sur Internet tendent à reproduire le même extrait sans fin, ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum; il utilise un dictionnaire de plus de 200 mots latins, en combinaison de plusieurs structures de phrases, pour générer un Lorem Ipsum irréprochable. Le Lorem Ipsum ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, ou des touches d'humour.

Variante2     Variante3    Variante4

Choix d'un thème  et confection de la bannière

Requin blancNous voulons une image 800x100 pixels, à l'aide d'un logiciel de traitement d'images, gérant les calques, prélevons la partie qui nous intéresse (le banc de poissons sous le requin pris en diagonale).

Ensuite, pour que les titres h1 et h2 du header soient très lisibles sur l'image nous avons plusieurs solutions :

http://en.wikipedia.org/wiki/Image:Whiteshark-TGoss5b.jpg

calques bannière

masque

Dans Kompozer insérons dans la div header, dans l'ordre : 

Les blocs titres étant flottants, ils sortent du flux de la page, nous ne risquons pas la fusion des marges.
Attribuons à #header la même hauteur 100px que l'image d'arrière plan puis appliquons cet arrière plan.
Pour positionner h1 et h2 donnons leur une largeur (et provisoirement une bordure pointillée 1px permettant de visualiser les blocs).
Pour affiner la position de ces blocs jouons sur les marges haute, gauche et droite.

La  charte graphique mérite un soin particulier.
ColorHunter, ColorZilla et la palette de Cascades sont de bons outils pour obtenir plusieurs nuances de nos couleurs de base (2 ou 3 maximum)

Menu vertical réactif

Dès que nous voulons commencer un menu structuré avec une liste à puces, penser à mettre les navigateurs d'accord en imposant une marge gauche et un padding gauche à zéro pour ol et ul 

    ol ul {
    margin-left: 0;
    padding-left: 0;
    }
ou bien au moins pour #menu ul

Dans la div menu flottante à gauche, plaçons une liste à puces de liens, affichage block, dimensionnés et  réactifs à l'état survolé ( bordure pleine de 8px à gauche, le padding gauche étant adapté pour éviter le décalage  1+14 = 8+7 ).

#menu #menu ul #menu a #menu a:hover
border: 3px groove #0a9174;
margin: 35px 8px 15px 15px;
float: left;
width: 180px;
background-color: #a5bcea;
list-style-type: none;
margin-left: 0;
padding-left: 0px;
border-style: dotted;
border-width: 1px;
display: block;
height: 20px;
margin-bottom: 5px;
width: 144px;
padding-left: 14px;
background-color: #96abd4;
color: #182b39;
text-decoration: none;
margin-right: auto;
margin-left: auto;
border-style: dotted dotted dotted solid;
border-color: #144e7e;
border-width: 1px 1px 1px 8px;
padding-left: 7px;
background-color: #889bc0;
color: #144e7e;
text-decoration: underline;

Créer une class .miseEvidence pour du texte

Depuis le 13 juin 2007, la Géode à Paris propose de découvrir le film Deep Sea,
Dansons sous la mer du réalisateur Haward Hall. Le film offre aux spectateurs un face à face unique avec les créatures les plus étranges et les plus effrayantes des fonds marins. Plongé dans cette aventure, chaque spectateur est invité à nager aux côtés de créatures marines parmi les plus dangereuses et les plus colorées de la planète. Ce documentaire met l'accent sur l'importance de la diversité biologique et de l'interdépendance des espèces, qui, grâce à leur complicité assurent leur survie et participent à la magie de cet univers hors du commun.

Retour liste exercices 2010-2011

Haut de page