Les dinosaures suscitèrent, dès leur découverte, un grand intérêt auprès du public

reconstitution d'un squelette d'iguanodon découvert à Bernissart Ils sont devenus actuellement, partie intégrante de la culture populaire.

  • reconstitution de squelettes dans les musées du monde entier
  • livres et films à succès
  • parcs à thème

Si l'on ne prend pas en considération les oiseaux, ils constituent un groupe de vertébrés majoritairement terrestres qui connut un succès évolutif considérable pendant plus de 160 millions d'années.

Présents sur l'ensemble des continents dès la fin du Trias, ils comprennent des formes très diverses :

  • animaux terrestres et volants
  • bipèdes et quadrupèdes
  • carnivores et herbivores

Ils ont développé toute une série d'innovations squelettiques et tégumentaires telles que des cornes, des crêtes, des plaques et des plumes.

  • Les dinosaures non-aviens comptent parmi eux les animaux les plus grands et les plus lourds
    à avoir existé sur la terre ferme. 
  • Néanmoins, un grand nombre de dinosaures non-aviens ne dépassait pas la taille d'un être
    humain et certains d'entre eux étaient plus petits qu'une poule.
Tous les dinosaures pondaient des oeufs, ronds pour les herbivores, longs pour les carnivores.
Des nids et des oeufs ont été trouvés pour la plupart des principaux groupes de dinosaures, et il apparait probable que les dinosaures non aviens communiquaient avec leurs petits d'une manière similaire aux dinosaures actuels (oiseaux) et aux crocodiles.
Un nid de Maiasaura découvert en 1978.

Sources : 

Tutoriel général

arborescence du dossier de siteArborescence du dossier de site

A la racine se trouvent :
  • la page index.html
  • la feuille de style monStyle.css
  • les 2 pages du menu horizontal qui ne contiennent pas d'images (contact.html et liens.html)
  • le dossier images contient les images communes
  • un dossier pour chaque rubrique du menu vertical et pour chaque rubrique du menu horizontal contenant des images (parc et extinction)

Bloc header

Le logo est une image à fond transparent flottant à gauche, positionnée par une marge haute.

le logo du site est une image transparente flottante

Un clic sur le logo permet, par convention, d'atteindre la page index à partir de n'importe quelle page du site.

L'arrière plan du bloc est un dégradé symétrique horizontal  de la largeur du bloc et de 10px de haut qui se répète verticalement

dégradé du bandeauLe titre h1 est un bloc de 400 px de large, sur 2 lignes, positionné par des marges haute et gauche. Penser à placer, juste avant le titre, un retour charriot pour éviter la fusion des marges.
Le menu horizontal réactif est inclus dans le bas du bloc header

Bloc menu horizontal

Contient seulement cinq items, permettant d'atteindre des pages qui ne sont pas la description d'une espèce de dinosaure.
Les pages Parc et Extinction sont faites sur le modèle de la page index par contre les pages Liens et Contact sont différentes, elles ont une image d'arrière plan pour le #content

arrière plan du bloc afficheBloc Affiche

La couleur d'arrière plan est un marron plus clair que celui de body. Les mêmes teintes se retrouvent dans le dégradé de header, les titres, les liens.
L'image d'arrière plan à fond transparent, positionnée à gauche, se répète verticalement, elle est confectionnée de 7 silhouettes, l'opacité est réduite pour permettre une bonne lisibilité des liens du menu.

Le bloc affiche contient le menu vertical flottant à gauche dans la marge gauche du content.Le menu vertical contient 10 items mais il peut s'allonger à volonté. Il est réactif par changement de couleur et une bordure pleine épaisse se place à gauche au survol de la souris sans déplacement du texte.

Bloc element-menu

Dans ces blocs le titre doit se présenter complètement différent des liens qui sont les plus importants.
Pour bien visualiser ces blocs nous leur donnons un arrière plan dégradé symétrique horizontal. Cette image se répète verticalement, ainsi le bloc peut s'allonger à volonté.
L'image finale doit avoir la largeur des blocs element-menu soit 180px. 

Méthode 1 - Créer un premier fichier 90px de large de 2 calques (gauche et droit) de largeur la moitié soit 90px puis les transporter dans l'image finale.
étape 1
étape 2

Méthode 2 - Il est également possible de partir d'une image 180px de large sur laquelle nous définissons une sélection rectangle de la moitié. Après avoir appliqué le dégradé sur cette sélection, nous inversons la sélection par Ctrl+Maj+i et y appliquons le dégradé symétrique. Puis déselectionner.

Editeur de dégradé type "Premier plan à transparent" avec une étape à 3% de la même couleur que le premier plan.

éditeur de dégradé : premier plan à transparent

Sauvegarder cette image en png-24 pour conserver la transparence.

Le bloc content  

  • arrière plan beige très clair (preque blanc) pour faciliter la lecture, il contient
  • de grandes images centrées
  • le texte est aéré par des listes à puces et des images flottantes.

Le bloc footer 

il dégage des flottants et contient un script javascript permettant d'indiquer automatiquement au visiteur la date de la dernière mise à jour.

code du script