Voici les 4 images utilisées pour créer la division aux coins arrondis ci-dessus:

Description

Il existe plusieurs façons de créer des divisions aux coins arrondis (utilisation d'images, utilisation du langage CSS3, utilisation d'un tableau html avec images). Cette activité vous permettra de découvrir des outils en ligne pour créer une division aux coins arrondis.


ATTENTION : Pour cette activité, vous devez faire les deux méthodes.

1. Affichez le site http://wigflip.com/cornershop/
   
   
2. Effectuez les réglages selon vos goûts
   
   
3. Enregistrez et téléchargez vos images espace de téléchargement.
4. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 75274
   
   
5. Inscrivez dans le champ titre : Outils en ligne pour créer une division aux coins arrondis
   
   
6. Sélectionnez la section : MODULE CSS
   
   
7. Sélectionnez la matière : informatique
   
   
8. Inscrivez dans le champ no de la directive : 75274
   
   
9. Inscrivez dans votre page le titre de niveau 1 : Outils en ligne pour créer une division aux coins arrondis
   
   
10. Ajoutez le code CSS et le code html créés
    
    
11. Assurez-vous que la couleur de fond de page soit la même que la couleur de vos images-bordures. Au besoin ajoutez dans votre feuille de style la couleur de fond de page :
    body{background-color:votrecouleur;}
    
    
12. Remplacez le nom des images par les URLs de ces images
    
    
13. Ajoutez ce texte dans votre division : "Division aux coins arrondis".

Méthode 2 : utilisation du langage CSS3

1. Affichez l'outil en ligne suivant : http://www.cssportal.com/css3-rounded-corner/
   
   
2. Effectuez les réglages selon vos goûts
   
   
3. Copiez le code CSS produit
   
   
4. Collez le code CSS dans un bloc de feuille de style en utilisant la classe "methode2"

   
   <style>
   .methode2{...
   
   }
   </style>

   
   
   
5. Ajoutez à cette classe les propriétés suivantes

   
   <style>
   .methode2{
   
   height:150px;
   width:500px;
   padding-left:25px;
   padding-bottom:25px;
   padding-top:25px;
   background-color:red;
   color:white;
   font-size:40px;
   
   }
   </style>

   
   
   
6. Ajoutez une division utilisant la classe "methode2" . <div class="methode2"></div>
   
   
7. Ajoutez dans cette division le texte "Utilisation du langage CSS3"
   
   
8. Visualisez votre page et apportez des modifications au besoin.