Situé au coeur d'un village du Namurois, notre jardin vous ouvre ses portes tous les dimanches de mai et de juin.

Vous aimez les roses anglaises, les arbustes d'ornement qui sortent de l'ordinaire?

N'hésitez pas à nous rendre visite.
Nous vous accueillerons avec plaisir entre 10 et 12 h (sur rendez-vous uniquement)

Voyez un peu...

Retour

Tutoriel

Structure de la page

Nous n'aurons pas de #wrapper mais nous donnerons au bloc html une couleur de fond différente de celle de body. Nous partons d'une image d'arrière plan pour le header mesurant 770x150px. Nous donnons à body une largeur de 770px et à #header une hauteur de 150px (marges latérales automatiques et nulles en haut et en bas pour body)

structure de la page index-jardin

Choix des couleurs du site à partir de notre image

Colorhunter

Permet d'avoir une orientation dans le choix des couleurs.
Se rendre sur le site :  http://www.colorhunter.com/
Pour uploader notre image, cliquer sur le lien upload an image  puis sur Parcourir 

uploader l'imageQuand l'image est trouvée et cliquée le champ upload this image est rempli , il suffit alors de cliquer sur le bouton upload image, nous obtenons alors une palette de couleurs brillantes avec les couleurs de notre image.
Si nous cliquons sur l'cône luminosité, nous obtenons une autre palette avec des couleurs ternes.
Si nous cliquons sur l'icône image nous pouvons masquer la représentation de notre image.

palette de couleurs brillantesNous choisissons les couleurs qui nous plaisent  comme ici le fond pour le bloc html. Copions le code hexadécimal dans le presse-papier pour le coller comme couleur du texte h1.

palette de couleurs ternesDans la palette de couleurs ternes nous faisons d'autres choix pour les fonds en les éclaircissant ou en les fonçant.

ColorZilla

Cet Add-on de Firefox permet de pipeter directement sur notre navigateur n'importe quelle couleur affichée à l'écran, puis d'affiner notre choix avec la palette des couleurs sans avoir à ouvrir notre image dans un logiciel de traitement d'images.

palette colorZillaAvec cet outil et aussi la palette de Cascades, nous choisissons les autres couleurs de notre site si celles proposées par Colorhunter ne nous convenaient pas : l'arrière plan de body, les titres, les liens à l'état repos et à l'état survolé, les bordures etc...

Positionnement du titre h1 dans le #header

border-style: dotted;
border-width: 1px;
font-size: 3em;
font-weight: normal;
height: 60px;
line-height: 60px;
margin-left: 20px;
margin-bottom: 0;
width: 500px;
text-align: center;
color: #d3d37f;
margin-top: 20px;
Donnons à ce bloc, tout au moins provisoirement, une bordure pour mieux le visualiser.
Taille de la police 3em, texte non gras
Dimensions du bloc 500x60px
Nous avons choisi un vert clair proposé par ColorHunter que nous avons encore éclairci, et nous positionnons le bloc à notre convenance :
  • Horizontalement par par une marge gauche
  • Verticalement : si nous voulons que la page colle en haut de la fenêtre, nous ne pouvons pas donner une marge haute au titre car la fusion des marges produirait un décalage,  nous pouvons donner un padding haut ou bien placer un retour charriot avant le titre et utiliser un margin haut.

Liste à puces avec puce personnalisée

Haut de page
Auteur de l'image : Original uploader was Joan-T at fr.wikipedia