1 00:00:04,040 --> 00:00:09,465 Es ist an der Zeit für Ihren ersten Einsatz in diesem Kurs. 2 00:00:09,465 --> 00:00:10,975 In der ersten Zuweisung 3 00:00:10,975 --> 00:00:18,605 werden wir Ihnen mit unformatierten aboutus.html Seite zur Verfügung stellen. 4 00:00:18,605 --> 00:00:22,130 Die ZIP-Datei, die diese 5 00:00:22,130 --> 00:00:25,670 Seite aboutus.html enthält, steht Ihnen in den Zuweisungsanweisungen zur Verfügung. 6 00:00:25,670 --> 00:00:30,530 Sie müssen also die Seite herunterladen und diese Seite dann in Ihren con Fusion-Ordner verschieben. 7 00:00:30,530 --> 00:00:33,060 Danach werden Sie 8 00:00:33,060 --> 00:00:40,970 Bootstrap-Klassen und das Bootstrap-Flexbox-Raster anwenden, um die Seite 9 00:00:41,110 --> 00:00:47,780 zu 10 00:00:47,780 --> 00:00:52,095 formatieren, dann verschieben Sie die Seite in den Con Fusion-Ordner, dann können Sie die Seite in Ihrem Browser anzeigen, indem Sie 11 00:00:52,095 --> 00:01:01,810 localhost:3000/aboutus.html eingeben und Ihr Light-Server-Build-Server die Seite aboutus.html aufbauen, 12 00:01:01,810 --> 00:01:05,310 also ist dies der einzige Weg, um die Seite zu sehen. 13 00:01:05,310 --> 00:01:06,545 Zu Beginn 14 00:01:06,545 --> 00:01:08,775 wird die Seite so aussehen, 15 00:01:08,775 --> 00:01:12,520 eine komplett Unstyle-Seite, die nur Inhalt enthält. 16 00:01:12,520 --> 00:01:20,165 Jetzt ist es Ihre Aufgabe, drei Aufgaben zu durchlaufen, um diese Seite zu formatieren. 17 00:01:20,165 --> 00:01:23,245 Schauen wir uns die drei Aufgaben genauer an. 18 00:01:23,245 --> 00:01:26,890 Ihre erste Aufgabe besteht darin, 19 00:01:26,890 --> 00:01:32,850 die Bootstraps CSS und die Javascript-Klassen auf die 20 00:01:32,850 --> 00:01:42,415 Seite aboutus.html anzuwenden, damit diese Seite sofort in diese Seite umgewandelt wird. 21 00:01:42,415 --> 00:01:48,470 Sobald Sie die Bootstraps CSS und JavaScript Klassen hinzufügen, 22 00:01:48,470 --> 00:01:54,115 werden die Kopf- und Fußzeile automatisch formatiert korrekt, 23 00:01:54,115 --> 00:01:59,170 weil ich einfach die Kopfzeile in der Fußzeile von der Seite index.html in 24 00:01:59,170 --> 00:02:05,140 diese Seite kopiert habe und die gesamte Bootstrap-Formatierung als solche verlassen habe, 25 00:02:05,140 --> 00:02:10,955 aber der eigentliche Inhalt der Seite bleibt immer noch unformatiert. 26 00:02:10,955 --> 00:02:14,580 Nun, als zweite Aufgabe, 27 00:02:14,580 --> 00:02:19,580 werden Sie das Bootstraps Flexbox-Raster einschließlich des Containers, der 28 00:02:19,580 --> 00:02:23,190 Zeilen und der Spaltenklassen auf 29 00:02:23,190 --> 00:02:28,430 diesen Inhalt oder die Seite anwenden, so dass Sie es richtig formatieren können. 30 00:02:28,430 --> 00:02:30,345 Wenn Sie nun die Klassen anwenden, 31 00:02:30,345 --> 00:02:36,430 werden Sie die Zeilen- und Spaltenklassen auf den Aboutus anwenden, um ihn einfach als solche zu belassen. 32 00:02:36,430 --> 00:02:40,390 Dann werden Sie die Zeilen- und Spaltenklassen auf 33 00:02:40,390 --> 00:02:45,445 diesen Inhalt anwenden, so dass dieser Inhalt nur die Hälfte des Bildschirms belegt, 34 00:02:45,445 --> 00:02:48,740 und dann werden Sie die Zeilen- und Spaltenklassen auf 35 00:02:48,740 --> 00:02:53,245 diesen Inhalt anwenden, so dass die gesamte Bildschirmbreite einnimmt. 36 00:02:53,245 --> 00:03:00,300 Wählen Sie also die Zeilen- und Spaltenklassen korrekt aus, um dies anzuwenden. 37 00:03:00,300 --> 00:03:05,220 Sie können die benutzerdefinierten CSS-Klassen verwenden, die wir bereits 38 00:03:05,220 --> 00:03:10,510 für die index.html implementiert haben, indem Sie die Datei style.css hinzufügen, 39 00:03:10,510 --> 00:03:14,765 auch um den Inhalt auf dieser Seite zu formatieren. 40 00:03:14,765 --> 00:03:18,010 Wenn Sie also die zweite Aufgabe abschließen, 41 00:03:18,010 --> 00:03:21,990 wird Ihre Seite am Ende so formatiert. 42 00:03:21,990 --> 00:03:27,290 So können Sie sehen, dass die aboutus Seite in ihrer eigenen existiert. 43 00:03:27,290 --> 00:03:31,505 Dann Unsere Geschichte Teil, 44 00:03:31,505 --> 00:03:37,800 beachten Sie, dass auf einer kleinen bis großen Bildschirmgröße, 45 00:03:37,800 --> 00:03:43,815 die Unsere Geschichte wird nur die Hälfte der Bildschirmbreite zu besetzen. 46 00:03:43,815 --> 00:03:51,850 Dann nimmt der Teil Corporate Leadership in diesem Fall die gesamte Bildschirmbreite ein. 47 00:03:51,850 --> 00:03:56,000 Dies ist die zweite Aufgabe, die Sie in Ihrem Arbeitsauftrag ausführen müssen. 48 00:03:56,000 --> 00:03:59,660 Für die dritte Aufgabe, wie Sie sehen können, 49 00:03:59,660 --> 00:04:05,380 sieht dieses Inhaltslayout gut aus für größere Bildschirmgrößen, 50 00:04:05,380 --> 00:04:13,240 aber wenn Sie auf die extra kleine Bildschirmgröße gehen besonders so, 51 00:04:13,240 --> 00:04:20,415 Sie bemerken, dass der Inhalt in diesem Abschnitt zu viel ist. 52 00:04:20,415 --> 00:04:27,670 Was wir also tun möchten, ist eine andere Bootstrap-Klasse zu verwenden, die für uns bereitgestellt wird, genannt, 53 00:04:27,670 --> 00:04:31,615 [unhörbar] und DSM-Block. 54 00:04:31,615 --> 00:04:37,865 Es gibt einen Link zu den ansprechenden Klassen in den Zuweisungsressourcen, 55 00:04:37,865 --> 00:04:44,550 so dass Sie die Dokumentation für den [unhörbaren] und den DSM-Block überprüfen können. 56 00:04:44,550 --> 00:04:49,440 Sie müssen diese anwenden, damit diese Beschreibung 57 00:04:49,440 --> 00:04:54,400 in den extra kleinen Bildschirmgrößen ausgeblendet wird. 58 00:04:54,400 --> 00:04:59,955 Also, wenn Sie die Klassen zu diesem Corporate Leadership Teil, 59 00:04:59,955 --> 00:05:06,040 wird der gleiche Inhalt jetzt ohne die Beschreibung angelegt 60 00:05:06,040 --> 00:05:10,465 werden, so dass es in der extra kleinen Bildschirmgröße ausgeblendet wird. 61 00:05:10,465 --> 00:05:14,170 Aber wenn Sie zu den kleinen die große Bildschirmgröße gehen, 62 00:05:14,170 --> 00:05:16,335 wird der Inhalt sichtbar. 63 00:05:16,335 --> 00:05:21,200 So können Sie feststellen, dass für die extra kleine Bildschirmgröße 64 00:05:21,200 --> 00:05:23,760 der Inhalt ausgeblendet ist, 65 00:05:23,760 --> 00:05:26,170 aber für die kleine Bildschirmgröße 66 00:05:26,170 --> 00:05:30,475 wird dieser Beschreibungsinhalt deutlich angezeigt. 67 00:05:30,475 --> 00:05:35,310 Das ist also Ihre dritte Aufgabe in Ihrem Auftrag. 68 00:05:35,310 --> 00:05:40,175 Während Sie dabei sind, können Sie die gleichen Klassen auch auf 69 00:05:40,175 --> 00:05:45,810 die Beschreibungen in unserer index.html Seite anwenden, so dass 70 00:05:45,810 --> 00:05:51,480 die detaillierten Beschreibungen für die Inhaltselemente auch auf 71 00:05:51,480 --> 00:05:57,645 der Seite index.html ausgeblendet werden, wenn sie auf extra kleinen Bildschirmgrößen angezeigt wird. 72 00:05:57,645 --> 00:06:02,090 Damit ist Ihre erste Aufgabe abgeschlossen. 73 00:06:02,090 --> 00:06:04,965 Wenn Sie Ihre Aufgabe einreichen, 74 00:06:04,965 --> 00:06:14,460 machen Sie bitte einen ganzseitigen Screenshot Ihres Layouts 75 00:06:14,460 --> 00:06:19,615 sowohl in kleiner bis 76 00:06:19,615 --> 00:06:25,930 extragroßer Bildschirmgröße als auch auf der extra kleinen Bildschirmgröße, 77 00:06:25,930 --> 00:06:29,230 und fügen Sie diesen dann als Teil Ihrer Einreichung hinzu. 78 00:06:29,230 --> 00:06:32,420 Um einen vollständigen Screenshot in Chrome zu erstellen, 79 00:06:32,420 --> 00:06:36,000 können Sie eine Chrome-Erweiterung verwenden, die uns zur Verfügung steht. 80 00:06:36,000 --> 00:06:39,305 Der Link zur Chrome-Erweiterung ist in den 81 00:06:39,305 --> 00:06:45,325 Zuweisungsressourcen enthalten, die der Zuweisungsbeschreibung folgen. 82 00:06:45,325 --> 00:06:52,610 Wenn Sie Ihre Zuweisung abgeschlossen haben, 83 00:06:52,610 --> 00:06:55,750 vergessen Sie bitte nicht, die Änderungen in Ihrem Git-Repository 84 00:06:55,750 --> 00:07:00,090 mit der Message Assignment One zu übernehmen, wenn Sie Ihre Änderungen in einem Git-Repository speichern.