Valeur de cette activité : 5 points
Compétence :
Compétence :
Compétence :
Ballon texte pour une bande dessinée en CSS

A-Module 03 : CSS : 5 points - difficulté : 2

Ballon texte pour une bande dessinée en CSS

Description

Nous avons vu préalablement que nous pouvions créer un ballon texte de bande dessinée en utilisant GIMP. Dans cette activité, nous allons créer un ballon texte en utilisant le langage CSS

Notez que vous pouvez répéter cette activité deux fois en utilisant une bulle différente pour chacun des travaux présentés.




  1. Ajouter une page à votre portfolio en inscrivant le numéro 101179



  2. Inscrivez dans votre page le titre de niveau 1 : Ballon texte pour une bande dessinée en CSS
    Une des méthodes est d'utiliser le logiciel wdt +Css Tool Editor + Css Speech

    SOUS ZORIN - UBUNTU 14.04 : Téléchargez et installez le logiciel Web Developer tools en tapant dans le terminal : wget http://chene-bleu.info/i/ladifference//wdt.zip && unzip wdt.zip && rm wdt.zip && sudo dpkg -i wdt_2.6.6-1.deb

    SOUS CRUNCHBANG : Téléchargez et installez le logiciel Web Developer tools en tapant dans le terminal : wget http://chene-bleu.info/i/ladifference//wdt.zip && unzip wdt.zip && rm wdt.zip && sudo dpkg -i wdt_2.6.6-1.deb

    Lancez le logiciel en inscrivant dans le lanceur de programme ou le terminal : wdt

    ou



  3. Trouvez une image ou produisez une image

  4. Placez cette image dans votre espace de téléchargement

  5. Insérez cette IMAGE dans votre page

  6. Consultez le site : http://nicolasgallagher.com/pure-css-speech-bubbles/ et identifiez une bulle de votre choix

  7. Copiez le texte de votre bulle

  8. Afficher le code source de la page (clic droit + code source de la page)

  9. Recherchez dans le code le texte de votre bulle (touches Ctrl + f)

  10. Copiez le code html de votre bulle

  11. Collez ce code html sous votre image

  12. Modifiez le texte

  13. Identifiez le nom de la classe utilisée dans ce code html

  14. Retournez dans le code source et cliquez au haut de le page defaut.css

  15. Recherchez et copiez tout le code css de cette classe

  16. Insérez entre les balises <style> </style> le code css copié

  17. Ajoutez à votre image, en utilisant la méthode intraligne, les propriétés CSS afin de bien positionner votre image.
    Exemple : <img src=./ladif3.png style="position:relative;left:20%;top:-100px;z-index:-1;"/>

  18. Modifiez ensuite les propriétés CSS de votre bulle en utilisant les propriétés suivantes en modifiant les valeurs selon votre bulle : 
    
width:400px;
height:100px;
left:200px;
top:450px;
color:white;
font-size:40px;


  19. Visualisez votre page et apportez des modifications au besoin.

  20. Inscrivez dans le champ titre : Ballon texte pour une bande dessinée en CSS

  21. Sélectionnez la section : MODULE CSS

  22. Sélectionnez la matière : informatique

  23. Inscrivez dans le champ no de la directive : 101179