1 00:00:03,780 --> 00:00:07,090 Zeit, um mit der nächsten Übung fortzufahren. 2 00:00:07,090 --> 00:00:10,005 In dieser Übung beschäftigen wir uns mit Bildern, 3 00:00:10,005 --> 00:00:13,660 wie wir Bilder in unsere Webseiten aufnehmen 4 00:00:13,660 --> 00:00:23,240 und wie wir das Medienobjekt auf unserer Webseite nutzen können. 5 00:00:23,240 --> 00:00:27,890 Wechseln Sie im ersten Schritt zu Ihren Übungsanweisungen und laden Sie die Datei image.zip herunter, 6 00:00:27,890 --> 00:00:34,550 und speichern Sie sie dann in Ihrem Verwirrungsordner. 7 00:00:35,890 --> 00:00:42,360 Und dann entpacken Sie die Datei, um einen Ordner mit dem Namen img zu erhalten, 8 00:00:42,360 --> 00:00:44,210 und darin finden Sie 9 00:00:44,210 --> 00:00:49,175 ein paar Bilder, die wir in dieser Übung verwenden werden. 10 00:00:49,175 --> 00:00:53,115 Alle Bilder sind im PNG-Format in diesem Ordner. 11 00:00:53,115 --> 00:00:58,785 Wir werden nun arbeiten, um einige Bilder auf der Seite hinzuzufügen. 12 00:00:58,785 --> 00:01:02,310 Lassen Sie uns zuerst das Logo für unser Restaurant hinzufügen. 13 00:01:02,310 --> 00:01:06,360 Also, auf die Seite index.html, im Jumbotron, 14 00:01:06,360 --> 00:01:11,130 sehen Sie, dass das zweite div hier den col-sm bekam. 15 00:01:11,130 --> 00:01:17,295 Also, wir werden das beheben, indem Sie zu diesem div hinzufügen 16 00:01:17,295 --> 00:01:24,030 und das Selbstcenter an diesem div ausrichten. 17 00:01:24,030 --> 00:01:26,620 Nun, zu diesem div, 18 00:01:26,620 --> 00:01:28,515 werden wir ein Bild hinzufügen. 19 00:01:28,515 --> 00:01:33,790 Also, lassen Sie mich das Bild mit der Quelle verwenden, img. 20 00:01:33,790 --> 00:01:40,710 Wir haben bereits den Bildordner mit den Bildern in unser Projekt eingefügt. 21 00:01:40,710 --> 00:01:49,150 Also, von dort werde ich die Datei logo.png als Bild hier hinzufügen. 22 00:01:49,150 --> 00:01:58,140 Außerdem werde ich die Klasse als Bildflüssigkeit hinzufügen, 23 00:01:58,140 --> 00:02:06,410 damit dieses Bild automatisch reagiert und sich an die Bildschirmgröße anpasst. 24 00:02:07,160 --> 00:02:09,634 Speichern wir die Änderungen. 25 00:02:09,634 --> 00:02:14,810 Wir werden die gleiche Änderung sowohl auf aboutus.html Seite als 26 00:02:14,810 --> 00:02:19,855 auch auf die contactus.html Seite im Jumbotron anwenden. 27 00:02:19,855 --> 00:02:23,350 Nun, wenn Sie einen genaueren Blick auf Ihre Webseite werfen, 28 00:02:23,350 --> 00:02:26,350 werden Sie feststellen, dass im Jumbotron, 29 00:02:26,350 --> 00:02:29,210 gleich nach dieser Formulierung, 30 00:02:29,210 --> 00:02:34,120 Sie werden das Bild für unser Restaurant eingefügt sehen. 31 00:02:34,120 --> 00:02:36,905 Als nächstes gehen wir in die Navbar, 32 00:02:36,905 --> 00:02:41,750 und wo wir das für die Navbar-Marke haben, 33 00:02:41,750 --> 00:02:47,915 werde ich diese Worte für das Restaurant durch das entsprechende Logo ersetzen. 34 00:02:47,915 --> 00:02:57,650 Also, diese Worte werde ich das durch img ersetzen, 35 00:02:57,650 --> 00:03:03,280 und Quelle ist logo.png. 36 00:03:03,280 --> 00:03:13,750 Darüber hinaus werde ich ein Höhenattribut von 30 37 00:03:14,310 --> 00:03:20,950 und ein Breitenattribut von 41 zu diesem Logo angeben. 38 00:03:20,950 --> 00:03:28,530 Diese Größe ist passend für die Navbar Marke dort. 39 00:03:28,530 --> 00:03:30,330 Also, lassen Sie uns die Änderungen speichern. 40 00:03:30,330 --> 00:03:35,895 Ich werde gehen und die gleiche Änderung auf der Seite aboutus.html 41 00:03:35,895 --> 00:03:39,745 und auch auf der Seite contactus.html vornehmen. 42 00:03:39,745 --> 00:03:41,790 Wenn Sie jetzt auf die Webseite schauen, 43 00:03:41,790 --> 00:03:44,900 werden Sie sehen, dass der Name des Restaurants jetzt 44 00:03:44,900 --> 00:03:49,835 durch das Logo des Restaurants in kleiner Größe ersetzt wurde. 45 00:03:49,835 --> 00:03:53,280 Sie sehen nun, dass, wenn Sie zur Seite Info navigieren, 46 00:03:53,280 --> 00:03:56,720 das Bild dort enthalten ist, 47 00:03:56,720 --> 00:03:59,700 und ähnlich auf der Seite Kontakt 48 00:03:59,700 --> 00:04:04,995 sehen Sie, dass das Bild aktualisiert wurde und auf die Hauptseite zurückgeht. 49 00:04:04,995 --> 00:04:07,080 Nun, was wir tun werden, 50 00:04:07,080 --> 00:04:13,980 ist ein Medienobjekt anstelle dieser Beschreibungen, die wir hier haben, zu verwenden 51 00:04:13,980 --> 00:04:19,095 und dann das Medienobjekt zu verwenden, um 52 00:04:19,095 --> 00:04:25,370 diese durch die Beschreibung und auch ein Bild zu ersetzen. 53 00:04:25,370 --> 00:04:29,890 Das gibt einen besseren Blick auf unsere Webseite. 54 00:04:29,890 --> 00:04:32,725 Also, gehen wir weiter und machen diese Änderung. 55 00:04:32,725 --> 00:04:37,695 Um das Medienobjekt in unserer index.html Seite zu nutzen, 56 00:04:37,695 --> 00:04:40,555 gehen wir hier zur ersten Zeile des Inhalts. 57 00:04:40,555 --> 00:04:44,930 Und dann genau dort im zweiten div 58 00:04:44,930 --> 00:04:51,380 werde ich einen neuen Entwickler mit den Klassenmedien einführen 59 00:04:51,380 --> 00:04:57,500 und den Inhalt in diesem div dort 60 00:04:57,500 --> 00:05:01,245 einschließen und das div schließen. 61 00:05:01,245 --> 00:05:04,940 Jetzt, in diesem div, 62 00:05:04,940 --> 00:05:10,820 werde ich ein Bild vorstellen, das dort verwendet werden soll. 63 00:05:10,820 --> 00:05:14,840 Hier gehe ich hinein und sage Bildklasse, 64 00:05:14,840 --> 00:05:20,120 und um ein Bild in einem Medienobjekt zu verwenden, 65 00:05:20,120 --> 00:05:26,820 müssen wir hier einige zusätzliche Flex-bezogene Klassen anwenden, 66 00:05:26,820 --> 00:05:31,545 also wende ich den d-flex und dann mr-3 an. 67 00:05:31,545 --> 00:05:40,035 Also, M bedeutet Marge rechts mit der Nummer 3. 68 00:05:40,035 --> 00:05:43,625 Das gibt einen ausreichenden Rand rechts von diesem Bild, 69 00:05:43,625 --> 00:05:53,205 so dass die Beschreibung leicht von dem Bild auf der Webseite abweicht. 70 00:05:53,205 --> 00:05:59,370 Und dann werde ich Bildminiaturbild für dieses Bild 71 00:05:59,370 --> 00:06:08,650 verwenden und dann auch align-self-center für das Bild verwenden, 72 00:06:08,650 --> 00:06:16,350 und geben Sie dann die Quelle des Bildes ein, die img ist, 73 00:06:16,350 --> 00:06:23,570 und Sie können 74 00:06:23,570 --> 00:06:30,680 den Bildnamen im Ordner img nachschlagen, 75 00:06:30,680 --> 00:06:34,340 und lassen Sie mich dort eine Alternative geben, 76 00:06:36,240 --> 00:06:39,005 und schließen Sie das Bild ab. 77 00:06:39,005 --> 00:06:43,465 Dies wird nun das Bild in mein Midi-Objekt einschließen. 78 00:06:43,465 --> 00:06:49,830 Außerdem werde ich den Medienkörper für dieses Bild erstellen, indem ich 79 00:06:49,830 --> 00:06:56,840 div Klasse Medienkörper sage, 80 00:06:56,840 --> 00:07:06,055 und dann dieses h2 und p eingeschlossen, das die Beschreibung in diesem div enthält. 81 00:07:06,055 --> 00:07:10,365 Also, lassen Sie mich den Inhalt dort einrücken 82 00:07:10,365 --> 00:07:16,395 und dann dieses div hier schließen. 83 00:07:16,395 --> 00:07:23,395 Damit ist meine Beschreibung im Medienkörper eingeschlossen. 84 00:07:23,395 --> 00:07:25,430 Zusätzlich zu diesem h2 85 00:07:25,430 --> 00:07:30,955 werde ich eine Klasse als mt-0 vorstellen. 86 00:07:30,955 --> 00:07:37,785 Damit sagt diese Klasse Marge Top Null. 87 00:07:37,785 --> 00:07:44,940 Dieser Titel wird hier an der Spitze dieses speziellen Medienobjekts ausgerichtet. 88 00:07:44,940 --> 00:07:48,120 Mit diesen Änderungen lassen Sie uns die Änderungen speichern und 89 00:07:48,120 --> 00:07:51,705 dann gehen und werfen Sie einen kurzen Blick auf unsere Webseite. Wenn Sie 90 00:07:51,705 --> 00:07:53,930 auf unsere Webseite gehen, 91 00:07:53,930 --> 00:07:56,980 werden Sie sofort die Änderung in der Webseite bemerken. 92 00:07:56,980 --> 00:08:00,115 Sie können jetzt sehen, dass es hier eine Bildposition gibt, 93 00:08:00,115 --> 00:08:03,650 und dann 94 00:08:03,650 --> 00:08:08,375 wurde die Beschreibung, die früher an diesem Ort war, richtig positioniert. 95 00:08:08,375 --> 00:08:13,280 Kontrastieren Sie dies mit den verbleibenden beiden Zeilen, 96 00:08:13,280 --> 00:08:17,290 und Sie beginnen jetzt zu sehen, wie das Medienobjekt uns hilft 97 00:08:17,290 --> 00:08:23,545 , das in etwas lebendigeres zu verwandeln. 98 00:08:23,545 --> 00:08:30,270 Ich werde das Gleiche mit der dritten Reihe hier machen. 99 00:08:30,270 --> 00:08:38,155 Die zweite Zeile wird als Übung für Sie in der Zuweisung belassen. 100 00:08:38,155 --> 00:08:40,680 Wenn ich zu diesem dritten Bohrer 101 00:08:40,680 --> 00:08:48,730 gehe, werde ich eine ähnliche Änderung auf diese dritte Zeile anwenden, um das Medienobjekt hier einzuführen. 102 00:08:48,730 --> 00:08:51,595 Lassen Sie mich das Medienobjekt dort vorstellen 103 00:08:51,595 --> 00:08:54,240 und dann zu diesem div 104 00:08:54,240 --> 00:08:57,115 in das Medienobjekt gehen 105 00:08:57,115 --> 00:09:01,290 und dann das Bild vorstellen, das ich hier verwenden werde. 106 00:09:01,290 --> 00:09:05,410 Ich benutze die Klasse als d-flex mr-3. 107 00:09:05,410 --> 00:09:08,830 Wenn Sie das Bild auf der rechten Seite positionieren, 108 00:09:08,830 --> 00:09:14,060 müssen Sie einen Rand als ml-3 dafür angeben. 109 00:09:14,060 --> 00:09:20,560 Darüber hinaus werde ich die Bild-Miniaturansicht-Klasse zu diesem hinzufügen 110 00:09:20,560 --> 00:09:26,005 und dann auch sagen, align-self-center. 111 00:09:26,005 --> 00:09:31,010 Dies sind die Klassen, die ich diesem Bild hinzufügen werde. 112 00:09:31,010 --> 00:09:35,670 Und dann geben wir die Quelle dieses Bildes an, 113 00:09:35,760 --> 00:09:46,880 img und alberto.png, und dann werde ich die Alternative angeben. 114 00:09:52,060 --> 00:09:57,400 Und danach, diese h2 und h4 und die p, 115 00:09:57,400 --> 00:10:07,140 werde ich sie in einem Medien-Body div hier 116 00:10:07,760 --> 00:10:11,845 schließen und das Medien-Body div schließen. 117 00:10:11,845 --> 00:10:17,845 Wir haben nun das Medienobjekt in der dritten Reihe fertiggestellt. 118 00:10:17,845 --> 00:10:19,230 Lassen Sie uns die Änderungen speichern, 119 00:10:19,230 --> 00:10:22,700 und dann gehen und werfen Sie einen Blick auf unsere Webseite als nächstes. Wenn Sie 120 00:10:22,700 --> 00:10:25,480 nun einen Blick auf unsere Webseite werfen, 121 00:10:25,480 --> 00:10:30,685 werden Sie feststellen, dass wir die Beschreibung des Gerichts dort haben. 122 00:10:30,685 --> 00:10:32,760 Wenn Sie nun zur dritten Zeile wechseln, 123 00:10:32,760 --> 00:10:37,705 sehen Sie nun, wie die dritte Zeile ebenfalls neu definiert wurde. 124 00:10:37,705 --> 00:10:40,425 Beachten Sie die Verwendung der Medien links, 125 00:10:40,425 --> 00:10:45,210 was bedeutet, dass das Bild auf der linken Seite in diesem Medienobjekt positioniert wird, 126 00:10:45,210 --> 00:10:52,230 und dann die Medien-Mittelseite positioniert das Bild in der Mitte der Beschreibung. 127 00:10:52,230 --> 00:10:55,760 Sie können auch Medien oben und unten verwenden, 128 00:10:55,760 --> 00:11:01,970 um das Bild oben und unten in dieser Beschreibung auszurichten. 129 00:11:01,970 --> 00:11:05,185 Damit schließen wir diese Übung ab. 130 00:11:05,185 --> 00:11:12,970 In dieser Übung haben wir uns die Verwendung von Bildern und Medienobjekten auf unserer Webseite angesehen. 131 00:11:12,970 --> 00:11:14,535 Dies ist ein guter Zeitpunkt, wieder, 132 00:11:14,535 --> 00:11:16,365 einen guten Kommentar zu tun, 133 00:11:16,365 --> 00:11:19,960 mit der Botschaft, Bilder und Medien.