29 - Exercice avancé : html et css

Description

Votre employeur vous a remis plusieurs documents afin que vous produisiez une page web pour un client , à vous produire cette page maintenant.

1. Voici la liste des documents reçus :
   Une image initiale vide de contenu qui a servi à produire une page HTML de base
   
   
   Cliquez l'image afin d'afficher en taille agrandie.
   
   Une page HTML vide de contenu qui a préalablement été découpée avec le logiciel IMAGECUT (cliquez ici pour afficher le découpage effectué - activité no 34057 du Module CSS - Division d'une image dans un tableau ): Cliquez ici pour afficher cette page sans les bordures
   
   Une image affichant le résultat désiré :
   
   Cliquez l'image afin d'afficher en taille agrandie.
   
   
2. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 81396
   
   
3. Inscrivez dans le champ titre : 29 - Exercice avancé : html et css
   
   
4. Sélectionnez la section : MODULE CSS
   
   
5. Sélectionnez la matière : informatique
   
   
6. Inscrivez dans le champ no de la directive : 81396
   
   
7. Copiez et collez le code source de la page HTML vide de son contenu : Cliquez ici
   
   
8. Collez ce code dans votre page et modifiez ce code afin d'obtenir le résultat suivant, en vous assurant que les liens du menu utilisent un effet de type mouseover (voir l'activité du Module CSS no 7996, Les effets sur un lien) :
   
   Cliquez l'image afin d'afficher en taille agrandie.
   
   
9. En utilisant les langages HTML et CSS seulement,
   Piste de solutions possibles :
   
   1. Utilisez le logiciel gcolor2 (sudo apt-get install gcolor2) pour capturer les codes de couleurs à utiliser
      
      
   2. Utilisez le logiciel kruler (sudo apt-get install kruler) pour effectuer vos mesures
      
      
   3. Placez les images en arrière-plan de cellule dans le tableau en utilisant la méthode intraligne et la propriété : background-image:url()
      exemple <td style="background-image:url(URL_DE_L_IMAGE.jpg);"></td>
   
   
   
   4. Spécifiez avec la méthode intraligne la hauteur et la largeur de chacune des cellules
      exemple <td style="background-image:url(URL_DE_L_IMAGE.jpg);height:300px;width:150px;"></td>
   
   
   
   5. Dans chacune des cellules, placez le contenu désiré en utilisant la balise DIV et les propriétés CSS suivantes : margin-left, margin-top, font-size, color, width, height, padding-top, padding-left, font-weight, ou toutes autres propriétés que vous jugerez utile exemple <td style="background-image:url(URL_DE_L_IMAGE.jpg);height:300px;height:150px;"><div style="margin-left:5px;margin-top:20px;width:10px;height:80px;color:red;font-size:20px;">Contenu ICI</div></td>
   
   
   
   
   
   
10. Visualisez votre page et apportez des modifications au besoin.