Salut, tout le monde.
Bienvenue, il est temps d'un autre exemple de devoirs.
Ce que nous allons faire cette semaine est d'ajouter encore plus de style
aux pages que vous avez commencé à coiffer la semaine dernière.
Donc, une fois de plus, l'objectif de cette affectation est que je
ne veux pas que vous changiez le html du tout.
Je veux que vous créez une nouvelle feuille de style ou mettez à jour la feuille de style de la semaine dernière afin
qu'elle puisse être utilisée sur trois fichiers html différents.
Lorsque vous commencez, il est très important que vous ayez terminé la première
affectation graduée par les pairs.
Je vais supposer que vous l'avez fait et donc
quand je parle dans cette vidéo des différents changements que je veux que vous apportiez.
Vous pouvez soit modifier cette affectation précédente, soit vous
pouvez vraiment commencer complètement à partir de zéro si vous n'étiez pas satisfait de votre travail précédent.
Jetons donc un coup d'oeil à l'avant et à l'après pour
cette tâche que je veux que tu essaies d'accomplir.
C' était notre page quand nous avons commencé.
Dans les devoirs 1, vous l'avez pris d'ici à ici.
Encore très simple, mais juste beaucoup plus propre parce que nous avons ajouté de la couleur de fond,
des polices de couleur, et nous nous sommes débarrassés de ces images.
Ce que je veux que vous travailliez cette semaine, c'est vraiment changer les choses et la
rendre vraiment stylée plutôt que juste propre.
Jetons un coup d'oeil à ce que j'aimerais que vous travailliez dans la troisième semaine.
Comme vous pouvez le voir, cela ressemble à un site complètement différent.
Les images sont de retour, j'ai ajouté une image d'arrière-plan pour une barre de navigation et
quelque chose qui n'est pas nécessairement facile à voir quand vous regardez juste du papier,
j'ai ajouté une nouvelle classe qui met en évidence la page sur laquelle nous sommes en ce moment.
Donc, si vous regardez,
le lien d'accueil est mis en surbrillance parce que nous sommes sur la page d'accueil.
Si je clique sur l'historique, le lien historique est comment cela
parce que nous sommes sur la page historique et puis de la même façon, la page de l'équipe.
Donc, c'est ce que nous appelons la page actuelle que nous regardons.
Et vous allez donc faire en sorte que vos spectateurs
sachent où ils sont sur cette page.
Donc, je vais aller de l'avant et parler de chacune des balises
que je veux que vous regardiez afin de terminer cette tâche.
Donc, quand vous commencez, vous allez laisser ce code HTML seul,
et soit vous allez créer une nouvelle feuille de style, soit vous allez aller de l'avant et
mettre à jour celui que vous avez utilisé auparavant.
Ce que vous aurez besoin de travailler spécifiquement, ce sont ces éléments.
Vous devez travailler sur le corps, l'en-tête, le h one, les liens,
puis j'ai trois classes appelées actif, gauche et droite, et enfin, vous allez
vouloir remettre ces images qui étaient dans le côté gauche de la page.
Alors d'abord, parlons du corps.
Par défaut, vos navigateurs mettent dans une sorte de remplissage et de marge, mais je veux que vous
écrasiez cela et mettez quelque chose qui semblera cohérent sur tous les navigateurs.
Vous pouvez également vous sentir libre d'ajuster la taille du texte, mais ce n'est pas nécessaire.
Je sais que je l'ai fait parce que je viens de trouver le texte un peu trop petit.
Ensuite, allez à l'en-tête.
La première étape consiste à changer la couleur d'arrière-plan et à voir si vous pouvez faire fonctionner cela.
Ensuite, vous allez vouloir ajouter une image d'arrière-plan.
Et pour être honnête,
ce sera la partie la plus difficile de toute la mission de devoirs.
Parce que parfois, il n'est pas toujours clair où vous pouvez trouver les images et
où vous ne pouvez pas, alors
assurez-vous de vérifier certaines des autres ressources si vous êtes coincé sur cette partie.
Ensuite, je veux que vous changiez la couleur de la police et
augmentez un peu plus cette taille de police.
Maintenant, voici quelque chose de nouveau que vous n'avez pas appris auparavant.
Je veux que vous stylisez les liens qui se trouvent dans la section de navigation, mais
seulement ces liens.
Pas tous les liens de la page.
Vous n'avez pas besoin de recréer mon exemple exactement, mais
je veux que vos liens soient bien espacés,
ils devraient avoir une couleur d'arrière-plan, des bordures arrondies et aucun soulignement.
Rends-les beaux.
Ensuite, assurez-vous que vous avez vu la classe active dont j'ai parlé.
C' est ainsi que les gens seront en mesure de savoir quelle page ils regardent
sans avoir à regarder l'URL.
Maintenant, une autre chose sur laquelle vous allez avoir besoin de travailler est cette idée que notre page a
une classe gauche et une classe droite à elle.
Maintenant, afin d'obtenir les choses à aller à côté de l'autre, vous allez devoir gâcher avec
l'affichage et éventuellement flotter en fonction de la façon dont vous implémentez cela.
Assurez-vous donc de les changer pour qu'ils soient côte à côte, et
changez cette couleur d'arrière-plan pour la classe gauche.
Vous avez peut-être déjà fait cela dans les devoirs précédents, mais
si vous ne vous êtes pas assuré que cela soit fait maintenant.
Enfin, nous voulons revenir à ces images. Tout d'
abord, vous devez remettre les images dans parce que,
espérons-le dans les devoirs 1, vous définissez leur affichage sur zéro, ce qui signifie qu'elles sont disparues.
Alors remettez-les dans quelque chose pour qu'ils s'empilent l'un sur l'autre.
Ensuite, assurez-vous qu'ils sont centrés dans cette classe gauche.
Je ne veux pas que les photos soient d'un côté ou de l'autre.
Et, pendant que vous les centrez, assurez-vous de mettre un peu d'espace entre eux,
en haut et en bas, aussi.
Encore une fois, nous utiliserons la classe de pairs pour évaluer votre travail.
Contrairement à ce qui précède, les notes seront basées sur le niveau d'achèvement et
un peu plus sur l'apparence de votre page.
Nous voulons nous assurer que vous ne mettez pas des choses difficiles à lire ou
qui sont vraiment écrasées ensemble.
Donc, si vous en
avez la chance, assurez-vous d'exécuter votre page via différents évaluateurs d'accessibilité.
Donc il y avait vague et il y a des sangles.
Il y a différents endroits où vous pouvez aller.
Mais c'est la partie vraiment agréable à propos de la notation par les pairs, vos
pairs peuvent vous dire si oui ou non les choses n'ont pas vraiment le meilleur contraste de couleur.
Encore une fois, des normes appropriées vont s'appliquer.
Et cela est particulièrement important lorsque nous commençons à parler de sélecteurs avancés.
J' ai trouvé que parfois les gens jettent tout ce qu'ils peuvent penser
dans leur feuille de style, et ils espèrent, espèrent, espèrent que ça marche.
On va enlever des points si tu essayes de le faire.
Maintenant, la dernière chose que je veux mentionner est que
je sais que les gens codent sur différents appareils.
Donc, lorsque vous soumettez votre code, assurez-vous de vous sentir libre de dire que mon code
ne semble vraiment bon que sur un grand écran, ou sur un téléphone, ou quelque chose comme ça.
Prendre soin de différentes tailles d'écran est quelque chose appelé design responsive
que nous ne gérons pas dans ce cours particulier.
Donc, je ne m'attends pas à ce que vous fassiez un site qui a l'air génial sur toutes les plateformes.
Ce que je m'attends à ce que vous fassiez, c'est vraiment posséder le code que vous soumettez cette fois.
Assurez-vous de savoir exactement ce que chaque ligne fait et vous
sentez à l'aise en changeant de petites pièces et en ayant l'impression que votre page ne se cassera pas.
Encore une fois, si vous rencontrez des problèmes, assurez-vous de toucher ces forums de discussion.
Vous avez des camarades de classe ont été très utiles, et
je veux vraiment encourager cette communication.
Bonne chance.