C'est l'heure de votre première affectation dans ce cours.
Dans la première affectation,
nous allons vous fournir la page aboutus.html non stylée.
Le fichier zip contenant cette
page aboutus.html est disponible dans les instructions d'affectation.
Donc, vous devez télécharger la page, puis déplacer cette page dans votre dossier Confusion.
Ensuite, vous appliquerez les
classes Bootstrap et la grille Bootstrap Flexbox pour styliser la page,
puis vous déplacez la page dans le dossier Con Fusion,
puis vous pouvez afficher la page dans votre navigateur en tapant
localhost:3000/aboutus.html et votre serveur de construction de serveur léger vers la page aboutus.html,
donc c'est la seule façon de voir la page.
Donc, pour commencer,
la page ressemblera à ceci,
une page complètement déstyle qui ne contient que du contenu.
Maintenant, votre travail consiste à passer par trois tâches afin de formater cette page.
Regardons les trois tâches plus en détail.
Votre première tâche consiste à appliquer
les classes Bootstraps CSS et Javascript à la
page aboutus.html afin que cette page soit instantanément transformée en cette page,
où dès que vous ajoutez les classes Bootstraps CSS et JavaScript,
l'en-tête et le pied de page seront automatiquement formatés correctement,
parce que j'ai simplement copié l'en-tête dans le pied de page de la page index.html dans
cette page et j'ai laissé tout le formatage Bootstrap en tant que tel,
mais le contenu réel de la page est toujours laissé non stylé.
Donc maintenant, en tant que deuxième tâche,
vous allez appliquer la grille Bootstraps Flexbox, y compris le conteneur,
les lignes et les classes de colonnes à
ce contenu ou à la page afin que vous puissiez le styliser correctement.
Maintenant, lorsque vous appliquez les classes,
vous allez appliquer les classes de ligne et de colonne à l'aboutus pour simplement le laisser en tant que telle.
Ensuite, vous allez appliquer les classes de ligne et de colonne à
ce contenu de sorte que ce contenu occupe seulement la moitié de l'écran,
puis vous allez appliquer les classes de ligne et de colonne à
ce contenu afin qu'ils occupent toute la largeur de l'écran.
Donc, choisissez les classes de ligne et de colonne correctement à appliquer à cela.
Vous pouvez utiliser les classes CSS personnalisées que nous avons déjà
implémentées pour le index.html en ajoutant le fichier style.css,
également pour styliser le contenu de cette page.
Ainsi, lorsque vous terminez la deuxième tâche,
votre page finira par être stylisée comme ceci.
Ainsi, vous pouvez voir que la page aboutus existe dans sa propre.
Ensuite, notre histoire,
notez que sur un écran de petite à grande taille,
notre histoire n'occupera que la moitié de la largeur de l'écran.
Ensuite, la partie Corporate Leadership occupe toute la largeur de l'écran dans ce cas.
Il s'agit de la deuxième tâche que vous devez effectuer dans votre affectation.
Pour la troisième tâche, comme vous pouvez le voir,
cette mise en page de contenu semble bien pour les plus grandes tailles d'écran,
mais lorsque vous passez à la taille d'écran extra petite en particulier comme ceci,
vous remarquez que le contenu est trop dans cette section.
Donc, ce que nous aimerions faire est d'utiliser une autre classe Bootstrap fournie pour nous appelé,
[inaudible] et le bloc DSM.
Il existe un lien vers les classes réactives dans les ressources d'affectation, de
sorte que vous pouvez consulter la documentation du bloc [inaudible] et du bloc DSM.
Vous devez les appliquer de manière à ce que cette description soit
cachée dans les tailles d'écran très petites.
Donc, lorsque vous les classes à cette partie de leadership d'entreprise,
le même contenu sera maintenant disposé sans la description, de
sorte qu'il sera caché dans la taille des écrans extra petits.
Mais quand vous allez à la petite taille de l'écran grand,
le contenu deviendra visible.
Ainsi, vous pouvez remarquer que pour la taille d'écran extra petite,
le contenu est masqué,
mais pour la petite taille d'écran,
ce contenu de description sera affiché clairement.
C' est donc votre troisième tâche dans votre mission.
Pendant que vous y êtes, vous pouvez également appliquer les mêmes classes aux
descriptions de notre page index.html afin que
les descriptions détaillées des éléments de contenu soient également masquées dans
la page index.html lorsqu'elle est affichée sur de très petites tailles d'écran.
Ceci termine votre première affectation.
De plus, lorsque vous soumettez votre mission,
veuillez prendre une capture d'écran pleine page de votre mise
en page à la fois en
format petit à très grand écran et sur la taille d'écran extra petit,
puis inclure cela dans votre soumission.
Pour prendre une capture d'écran de page complète dans Chrome,
vous pouvez utiliser une extension Chrome qui est disponible pour nous,
le lien vers l'extension Chrome est fourni dans
les ressources d'affectation qui suivent la description de l'affectation.
Une fois votre affectation terminée,
au cas où vous enregistrez vos modifications dans un référentiel Git,
n'oubliez pas de valider les modifications dans
votre référentiel Git avec l'affectation de message 1.