Es ist an der Zeit für Ihren ersten Einsatz in diesem Kurs.
In der ersten Zuweisung
werden wir Ihnen mit unformatierten aboutus.html Seite zur Verfügung stellen.
Die ZIP-Datei, die diese
Seite aboutus.html enthält, steht Ihnen in den Zuweisungsanweisungen zur Verfügung.
Sie müssen also die Seite herunterladen und diese Seite dann in Ihren con Fusion-Ordner verschieben.
Danach werden Sie
Bootstrap-Klassen und das Bootstrap-Flexbox-Raster anwenden, um die Seite
zu
formatieren, dann verschieben Sie die Seite in den Con Fusion-Ordner, dann können Sie die Seite in Ihrem Browser anzeigen, indem Sie
localhost:3000/aboutus.html eingeben und Ihr Light-Server-Build-Server die Seite aboutus.html aufbauen,
also ist dies der einzige Weg, um die Seite zu sehen.
Zu Beginn
wird die Seite so aussehen,
eine komplett Unstyle-Seite, die nur Inhalt enthält.
Jetzt ist es Ihre Aufgabe, drei Aufgaben zu durchlaufen, um diese Seite zu formatieren.
Schauen wir uns die drei Aufgaben genauer an.
Ihre erste Aufgabe besteht darin,
die Bootstraps CSS und die Javascript-Klassen auf die
Seite aboutus.html anzuwenden, damit diese Seite sofort in diese Seite umgewandelt wird.
Sobald Sie die Bootstraps CSS und JavaScript Klassen hinzufügen,
werden die Kopf- und Fußzeile automatisch formatiert korrekt,
weil ich einfach die Kopfzeile in der Fußzeile von der Seite index.html in
diese Seite kopiert habe und die gesamte Bootstrap-Formatierung als solche verlassen habe,
aber der eigentliche Inhalt der Seite bleibt immer noch unformatiert.
Nun, als zweite Aufgabe,
werden Sie das Bootstraps Flexbox-Raster einschließlich des Containers, der
Zeilen und der Spaltenklassen auf
diesen Inhalt oder die Seite anwenden, so dass Sie es richtig formatieren können.
Wenn Sie nun die Klassen anwenden,
werden Sie die Zeilen- und Spaltenklassen auf den Aboutus anwenden, um ihn einfach als solche zu belassen.
Dann werden Sie die Zeilen- und Spaltenklassen auf
diesen Inhalt anwenden, so dass dieser Inhalt nur die Hälfte des Bildschirms belegt,
und dann werden Sie die Zeilen- und Spaltenklassen auf
diesen Inhalt anwenden, so dass die gesamte Bildschirmbreite einnimmt.
Wählen Sie also die Zeilen- und Spaltenklassen korrekt aus, um dies anzuwenden.
Sie können die benutzerdefinierten CSS-Klassen verwenden, die wir bereits
für die index.html implementiert haben, indem Sie die Datei style.css hinzufügen,
auch um den Inhalt auf dieser Seite zu formatieren.
Wenn Sie also die zweite Aufgabe abschließen,
wird Ihre Seite am Ende so formatiert.
So können Sie sehen, dass die aboutus Seite in ihrer eigenen existiert.
Dann Unsere Geschichte Teil,
beachten Sie, dass auf einer kleinen bis großen Bildschirmgröße,
die Unsere Geschichte wird nur die Hälfte der Bildschirmbreite zu besetzen.
Dann nimmt der Teil Corporate Leadership in diesem Fall die gesamte Bildschirmbreite ein.
Dies ist die zweite Aufgabe, die Sie in Ihrem Arbeitsauftrag ausführen müssen.
Für die dritte Aufgabe, wie Sie sehen können,
sieht dieses Inhaltslayout gut aus für größere Bildschirmgrößen,
aber wenn Sie auf die extra kleine Bildschirmgröße gehen besonders so,
Sie bemerken, dass der Inhalt in diesem Abschnitt zu viel ist.
Was wir also tun möchten, ist eine andere Bootstrap-Klasse zu verwenden, die für uns bereitgestellt wird, genannt,
[unhörbar] und DSM-Block.
Es gibt einen Link zu den ansprechenden Klassen in den Zuweisungsressourcen,
so dass Sie die Dokumentation für den [unhörbaren] und den DSM-Block überprüfen können.
Sie müssen diese anwenden, damit diese Beschreibung
in den extra kleinen Bildschirmgrößen ausgeblendet wird.
Also, wenn Sie die Klassen zu diesem Corporate Leadership Teil,
wird der gleiche Inhalt jetzt ohne die Beschreibung angelegt
werden, so dass es in der extra kleinen Bildschirmgröße ausgeblendet wird.
Aber wenn Sie zu den kleinen die große Bildschirmgröße gehen,
wird der Inhalt sichtbar.
So können Sie feststellen, dass für die extra kleine Bildschirmgröße
der Inhalt ausgeblendet ist,
aber für die kleine Bildschirmgröße
wird dieser Beschreibungsinhalt deutlich angezeigt.
Das ist also Ihre dritte Aufgabe in Ihrem Auftrag.
Während Sie dabei sind, können Sie die gleichen Klassen auch auf
die Beschreibungen in unserer index.html Seite anwenden, so dass
die detaillierten Beschreibungen für die Inhaltselemente auch auf
der Seite index.html ausgeblendet werden, wenn sie auf extra kleinen Bildschirmgrößen angezeigt wird.
Damit ist Ihre erste Aufgabe abgeschlossen.
Wenn Sie Ihre Aufgabe einreichen,
machen Sie bitte einen ganzseitigen Screenshot Ihres Layouts
sowohl in kleiner bis
extragroßer Bildschirmgröße als auch auf der extra kleinen Bildschirmgröße,
und fügen Sie diesen dann als Teil Ihrer Einreichung hinzu.
Um einen vollständigen Screenshot in Chrome zu erstellen,
können Sie eine Chrome-Erweiterung verwenden, die uns zur Verfügung steht.
Der Link zur Chrome-Erweiterung ist in den
Zuweisungsressourcen enthalten, die der Zuweisungsbeschreibung folgen.
Wenn Sie Ihre Zuweisung abgeschlossen haben,
vergessen Sie bitte nicht, die Änderungen in Ihrem Git-Repository
mit der Message Assignment One zu übernehmen, wenn Sie Ihre Änderungen in einem Git-Repository speichern.