CSS3 – Mini projets

 

Remarques qui s'appliquent à tous les mini-projets :

  • Les mots dans les textes (titres,  paragraphes, barres de menu, et cetera) ne sont pas importants. Le mieux, pour économiser du temps, est d'utiliser un générateur de texte comme lipsum.com. Tout autre aspect d'un texte est à reproduire (titre ou pas, taille/type de police, couleur de texte et de fond, style, justification, espace entre les lettres/mots, et cetera). Et chaque texte doit être reproduit au bon endroit dans la page et avec la bonne taille : par exemple, si on voit un paragraphe de 3 lignes dans la capture, il faut générer et inclure un paragraphe de 3 lignes dans sa page.
  • Quand les images sont fournies : INTERDICTION DE MODIFIER LES IMAGES - s'il faut retailler ou manipuler autrement une image pour affichage il doit être fait via le CSS.

 

 

Mini projet : "Champi"

Niveau :

  • BACC1 ou supérieur
  • HTML (jusqu'à la leçon "Balises essentielles")
  • CSS (jusqu'à la leçon "Propriétés CSS essentielles")

Créer un fichier HTML et un fichier CSS pour reproduire une page qui ressemble à la page ci-dessous.

Règles / remarques / astuces :

  • Bien séparer la structure (dans le HTML) et la mise en forme (dans le CSS)
  • Les images (nuages, champi) sont disponibles via les liens ci-dessous
  • La largeur de la zone de contenu (tout ce qui n'est pas fond nuage) est de 700 pixels et la zone de contenu est centrée dans la fenêtre du navigateur (Astuce : utiliser une image de fond et margin auto sur la balise body).
  • Remarquer et reproduire les espaces et/ou les cadres qui entourent les différents éléments
  • Remarquer et reproduire les différentes couleurs de fond des différentes zones.
  • Remarquer et reproduire les différentes tailles de police, les titres en gras/italique, et cetera.
  • Remarquer et reproduire les différents types d'alignement de texte (centré, justifié).

 

capture

Liens pour les images :      Nuages       Champi

[Remerciements : Nintendo Corporation pour les images du jeu Mario Bros]

 

 

Mini projet : "Parlement"

Niveau :

  • BACC1 ou supérieur
  • HTML (jusqu'à la leçon "Balises essentielles")
  • CSS (jusqu'à la leçon "Propriétés CSS essentielles")

Créer un fichier HTML et un fichier CSS pour reproduire une page qui ressemble à la page ci-dessous.

Règles / remarques / astuces :

  • Bien séparer la structure (dans le HTML) et la mise en forme (dans le CSS)
  • Les images (fond de page, bannière et pied de page) sont disponibles via les liens ci-dessous
  • La largeur de la zone de contenu (tout ce qui n'est pas uniquement fond de page dégradé bleu) est de 800 pixels et la zone de contenu est centrée dans la fenêtre du navigateur (Astuce : utiliser une image de fond et margin auto sur la balise body).
  • Remarquer et reproduire les espaces et/ou les cadres qui entourent les différents éléments
  • Remarquer et reproduire les différentes couleurs de fond des différentes zones.
  • Remarquer et reproduire les différentes tailles de police, les titres en gras/italique, et cetera.
  • Remarquer et reproduire les différents types d'alignement de texte (centré, justifié).

 

capture

Liens pour les images :      Fond de page      Bannière      Pied de page

 

 

Mini projet : "Papillon"

Niveau :

  • BACC1 ou supérieur
  • HTML (jusqu'à la leçon "Balises essentielles")
  • CSS (jusqu'à la leçon "Propriétés CSS essentielles")

Créer un fichier HTML et un fichier CSS pour reproduire une page qui ressemble à la page ci-dessous.

Règles / remarques / astuces :

  • Bien séparer la structure (dans le HTML) et la mise en forme (dans le CSS)
  • Les images (terrain/fond et papillon) sont disponibles via les liens ci-dessous
  • La largeur de la zone de contenu (tout ce qui n'est pas fond nuage) est de 760 pixels et la zone de contenu est centrée dans la fenêtre du navigateur (Astuce : utiliser une image de fond et margin auto sur la balise body).
  • Remarquer et reproduire les espaces et/ou les cadres qui entourent les différents éléments
  • Remarquer et reproduire les différentes couleurs de fond des différentes zones.
  • Remarquer et reproduire les différentes tailles de police, les titres en gras/italique, et cetera.
  • Remarquer et reproduire les différents types d'alignement de texte (centré, justifié).

 

capture

Liens pour les images :    Fond de page    Papillon

 

 

Mini projet : "Mario"

Niveau :

  • BIW2 ou supérieur
  • HTML (jusqu'à la leçon "Balises essentielles")
  • CSS (jusqu'à la leçon "Flux de la page / Float et Clear")

 

Créer un fichier HTML et un fichier CSS pour reproduire une page qui ressemble à la page ci-dessous.

Règles / remarques / astuces :

  • Bien séparer la structure (dans le HTML) et la mise en forme (dans le CSS)
  • Les images (nuages, champi, mario et wario) sont disponibles via les liens ci-dessous
  • La largeur de la zone de contenu (tout ce qui n'est pas fond nuage) est de 960 pixels et la zone de contenu est centrée dans la fenêtre du navigateur (Astuce : utiliser une image de fond et margin auto sur la balise body).
  • Remarquer et reproduire les espaces qui séparent les différents éléments textuels et graphiques
  • Remarquer et reproduire les espaces qui séparent les textes/images des bordures et des bords des différentes zones.
  • Remarquer et reproduire les différentes tailles de police, les titres en gras, et cetera.
  • Remarquer et reproduire les différents types d'alignement de texte (centré, justifié).

 

capture

Liens pour les images :      Nuages     Champi     Mario     Wario

[Remerciements : Nintendo Corporation pour les images du jeu Mario Bros]

 

 

Mini projet : "Jimi Hendrix"

Niveau :

  • BIW2 ou supérieur
  • HTML (jusqu'à la leçon "Balises essentielles")
  • CSS (jusqu'à la leçon "Flux de la page / Float et Clear")

 

Créer un fichier HTML et un fichier CSS pour reproduire une page qui ressemble à la page ci-dessous.

Règles / remarques / astuces :

  • Bien séparer la structure (dans le HTML) et la mise en forme (dans le CSS)
  • Les images (ronds, vignette magazine, portraits de Jimi Hendrix) sont disponibles via les liens ci-dessous
  • La largeur de la zone de contenu (tout ce qui n'est pas fond nuage) est de 960 pixels et la zone de contenu est centrée dans la fenêtre du navigateur (Astuce : utiliser une image de fond et margin auto sur la balise body).
  • Remarquer et reproduire les espaces qui séparent les différents éléments textuels et graphiques
  • Remarquer et reproduire les espaces qui séparent les textes/images des bordures et des bords des différentes zones.
  • Remarquer et reproduire les différentes tailles de police, les titres en gras, et cetera.
  • Remarquer et reproduire les différents types d'alignement de texte (centré, justifié).

 

capture_ecran

Liens pour les images : Ronds      Magazine     Hendrix1      Hendrix2      Hendrix3     Hendrix4

 

 

Mini projet : "Classique"

Niveau :

  • BIW3
  • HTML (jusqu'à la leçon "Balises essentielles")
  • CSS (jusqu'à la leçon "Affichage par colonnes")

 

Créer un fichier HTML et un fichier CSS pour reproduire une page qui ressemble à la page ci-dessous.

Règles / remarques / astuces :

  • Bien séparer la structure (dans le HTML) et la mise en forme (dans le CSS)
  • Ne nécessite aucune image, aucune table - il faut utiliser les float, et margin auto
  • La largeur de la zone de contenu (tout ce qui n'est pas fond rouge) est de 960 pixels. La hauteur n'est pas fixe.
  • La zone de contenu est centrée dans la fenêtre du navigateur.
  • Remarquer et reproduire les espaces qui séparent les différents éléments textuels et qui séparent les textes des bords des différentes zones.
  • Remarquer et reproduire les différentes tailles de police, les titres en gras, et cetera.
  • Remarquer et reproduire les différents types d'alignement de texte (centré, justifié).
  • Les lignes entre les listes dans la barre à gauche peuvent être faites avec la balise <hr>.

 

mini_projet_css_1_capture

 

 

Mini projet : "Glucose"

Niveau :

  • BIW3
  • HTML (jusqu'à la leçon "Balises essentielles")
  • CSS (jusqu'à la leçon "Menu interactifs")

 

Créer un fichier HTML et un fichier CSS pour reproduire une page qui ressemble à la page dans les captures ci-dessous. Attention aux changements d'affichage quand on survole les éléments dans la barre de menu secondaire (liens tout en haut de la page) et quand on survol le menu principal (menu déroulant interactif à 3 niveaux).

  • Capture 1 : haut de la page sans survol
  • Capture 2 : haut de la page avec survol d'un élément dans la barre de menu secondaire (tout en haut de la page)
  • Capture 3 : haut de la page avec survol du menu principal (affichage du 2ème et du 3ème niveaux)
  • Capture 4 : bas de la page

Règles / remarques / astuces :

  • Bien séparer la structure (dans le HTML) et la mise en forme (dans le CSS)
  • Toutes les images sont fournies : disponible via les liens ci-dessous
  • Les liens dans la barre de menu secondaire (tout en haut de la page) ne mènent nulle part (utiliser href="#")
  • La largeur de la zone de contenu est de 960 pixels. La hauteur n'est pas fixe.
  • La zone de contenu est centrée dans la fenêtre du navigateur.
  • L'affichage du contenu principal est en deux colonnes - la hauteur de chaque colonne n'est PAS CONNUE à l'avance (il ne faut pas présumer que la colonne à gauche sera toujours plus grande ou plus petite que la colonne à droite)
  • Remarquer et reproduire tous les aspects du menu principal déroulant : couleurs de fond, de texte et de "bullet" quand l'élément est actif/non-actif.
  • Remarquer et reproduire les espaces qui séparent les différents éléments textuels et qui séparent les textes des bords des différentes zones.
  • Remarquer et reproduire les différentes tailles de police, les titres en gras, et cetera.
  • Remarquer et reproduire les différents types d'alignement de texte (centré, justifié).

 

Capture 1 : haut de la page sans survol

Capture1

Capture 2 : haut de la page avec survol d'un élément dans la barre de menu secondaire (tout en haut de la page)

Capture2

Capture 3 : haut de la page avec survol du menu principal (affichage du 2ème et du 3ème niveaux)

Capture3

Capture 4 : bas de la page

Capture4

 

Liens pour les images :      Fond 1       Fond 2       Banner       Flacons       Glucose       Glucose 2       Glucose 3       Glucose 4