Devoir de contrôle n°2 Durée 1H 3SI AS 2022-2023 Lycée Secondaire Manzel Ennour Header From right to left Nav Main Container On veut réaliser un site web simple autour du thème Technologie du Web Questions : 1. Télécharger le dossier se trouvant dans l'adresse : URL 2. Editer ce site en vous servant des ressources existantes dans le dossier précèdent que vous renommer par : c:\DC2STI\<Votre_nom> 3. Dans le dossier de travail créer les fichiers suivants : Fichier Rôle index.html La page d'accueil qui contient un cadre (iframe) pour afficher les autres pages. main.css La feuille de style de la page index html.html Une page contenant une brève définition du terme HTML css.html Une page contenant une brève définition du terme CSS js.html Une page contenant une brève définition du terme JAVASCRIT 4. Utiliser les mises en forme indiquées dans les pages suivantes pour optimiser votre travail LES INDICATIONS DE MISE EN FORME 1- HEADER Marge du haut :4vh Marge du bas :4vh Largeur : 86% Hauteur:16vh Le Titre : de style h3 centré verticalement animé avec l'animation scrolling : animation:scrolling 6s linear infinite; Rq: le Texte de bien venu se défile de droite vers la gauche et sa vitesse ralentie en traversant la zone du milieu 2- Nav • • • • Code utf8 de ♥ est &#9829; La distance verticale entre Nav et Header est 4vh Code utf8 de ♡ est &#x2661; Les éléments du menu est une liste (UL) La largeur de la liste est 488px Les éléments de la liste ont : • Une bordure : 1px • Rayon de la bordure : 10px • Affichage : inline-block (Les éléments inline-block peuvent changer de largeur ) • une largeur de 120px • Marge du haut et du bas :4vh • Marge du gauche et droite 20px • Alignement : centré • Forme du curseur : pointer • Une transition avec les propriétés suivantes : ✓ transition-property:box-shadow; ✓ transition-duration:.4s; ✓ transition-timing-function: linear; ✓ transition-delay: 0s; • Ajouter la pseudo classe nécessaire et lui définir la propriété box-shadow pour animer les éléments du menu en les pointant avec la souris. 3- Main • La partie main prend la forme indiquée dans l'image • Distante de nav par 4vh • Contient un cadre (iframe) • Cadre : o Sans bordure o Largeur : même largeur que main o Hauteur même hauteur que main Les pages html.html css.html et js.html on la même structure et la même mise en forme : Structure : ▪ Un titre avec le style prédéfinie h3 ▪ Un logo de largeur 100 (attribue HTML) ▪ Une liste avec un titre h3 ▪ Un paragraphe Mise en forme ▪ Le logo flotte à gauche ▪ La liste avec son Titre Flotte à Droite ▪ Le paragraphe est positionné à travers les deux autres éléments. ▪ Le cadre principale (container) exécute une animation 1 seule fois : translation du haut vers le bas (effet d'apparition) Barème : Header (5pts) : Forme & bordure 2 Titre 1 Animation 2 Nav (7pts): Forme & bordure 2 Liste 1 Éléments 1 Transition 1 Liens 2 Main (3pts): Forme & bordure 2 html.css 1 cadre 1 css.html 1 Animation : 2pts js.html 1 Bonus :4pts ▪ Enrichir votre site avec des images de fond ▪ Des bordures ▪ Des couleurs ▪ Des gradients Résultat :
