Zeit, um mit der nächsten Übung fortzufahren.
In dieser Übung beschäftigen wir uns mit Bildern,
wie wir Bilder in unsere Webseiten aufnehmen
und wie wir das Medienobjekt auf unserer Webseite nutzen können.
Wechseln Sie im ersten Schritt zu Ihren Übungsanweisungen und laden Sie die Datei image.zip herunter,
und speichern Sie sie dann in Ihrem Verwirrungsordner.
Und dann entpacken Sie die Datei, um einen Ordner mit dem Namen img zu erhalten,
und darin finden Sie
ein paar Bilder, die wir in dieser Übung verwenden werden.
Alle Bilder sind im PNG-Format in diesem Ordner.
Wir werden nun arbeiten, um einige Bilder auf der Seite hinzuzufügen.
Lassen Sie uns zuerst das Logo für unser Restaurant hinzufügen.
Also, auf die Seite index.html, im Jumbotron,
sehen Sie, dass das zweite div hier den col-sm bekam.
Also, wir werden das beheben, indem Sie zu diesem div hinzufügen
und das Selbstcenter an diesem div ausrichten.
Nun, zu diesem div,
werden wir ein Bild hinzufügen.
Also, lassen Sie mich das Bild mit der Quelle verwenden, img.
Wir haben bereits den Bildordner mit den Bildern in unser Projekt eingefügt.
Also, von dort werde ich die Datei logo.png als Bild hier hinzufügen.
Außerdem werde ich die Klasse als Bildflüssigkeit hinzufügen,
damit dieses Bild automatisch reagiert und sich an die Bildschirmgröße anpasst.
Speichern wir die Änderungen.
Wir werden die gleiche Änderung sowohl auf aboutus.html Seite als
auch auf die contactus.html Seite im Jumbotron anwenden.
Nun, wenn Sie einen genaueren Blick auf Ihre Webseite werfen,
werden Sie feststellen, dass im Jumbotron,
gleich nach dieser Formulierung,
Sie werden das Bild für unser Restaurant eingefügt sehen.
Als nächstes gehen wir in die Navbar,
und wo wir das für die Navbar-Marke haben,
werde ich diese Worte für das Restaurant durch das entsprechende Logo ersetzen.
Also, diese Worte werde ich das durch img ersetzen,
und Quelle ist logo.png.
Darüber hinaus werde ich ein Höhenattribut von 30
und ein Breitenattribut von 41 zu diesem Logo angeben.
Diese Größe ist passend für die Navbar Marke dort.
Also, lassen Sie uns die Änderungen speichern.
Ich werde gehen und die gleiche Änderung auf der Seite aboutus.html
und auch auf der Seite contactus.html vornehmen.
Wenn Sie jetzt auf die Webseite schauen,
werden Sie sehen, dass der Name des Restaurants jetzt
durch das Logo des Restaurants in kleiner Größe ersetzt wurde.
Sie sehen nun, dass, wenn Sie zur Seite Info navigieren,
das Bild dort enthalten ist,
und ähnlich auf der Seite Kontakt
sehen Sie, dass das Bild aktualisiert wurde und auf die Hauptseite zurückgeht.
Nun, was wir tun werden,
ist ein Medienobjekt anstelle dieser Beschreibungen, die wir hier haben, zu verwenden
und dann das Medienobjekt zu verwenden, um
diese durch die Beschreibung und auch ein Bild zu ersetzen.
Das gibt einen besseren Blick auf unsere Webseite.
Also, gehen wir weiter und machen diese Änderung.
Um das Medienobjekt in unserer index.html Seite zu nutzen,
gehen wir hier zur ersten Zeile des Inhalts.
Und dann genau dort im zweiten div
werde ich einen neuen Entwickler mit den Klassenmedien einführen
und den Inhalt in diesem div dort
einschließen und das div schließen.
Jetzt, in diesem div,
werde ich ein Bild vorstellen, das dort verwendet werden soll.
Hier gehe ich hinein und sage Bildklasse,
und um ein Bild in einem Medienobjekt zu verwenden,
müssen wir hier einige zusätzliche Flex-bezogene Klassen anwenden,
also wende ich den d-flex und dann mr-3 an.
Also, M bedeutet Marge rechts mit der Nummer 3.
Das gibt einen ausreichenden Rand rechts von diesem Bild,
so dass die Beschreibung leicht von dem Bild auf der Webseite abweicht.
Und dann werde ich Bildminiaturbild für dieses Bild
verwenden und dann auch align-self-center für das Bild verwenden,
und geben Sie dann die Quelle des Bildes ein, die img ist,
und Sie können
den Bildnamen im Ordner img nachschlagen,
und lassen Sie mich dort eine Alternative geben,
und schließen Sie das Bild ab.
Dies wird nun das Bild in mein Midi-Objekt einschließen.
Außerdem werde ich den Medienkörper für dieses Bild erstellen, indem ich
div Klasse Medienkörper sage,
und dann dieses h2 und p eingeschlossen, das die Beschreibung in diesem div enthält.
Also, lassen Sie mich den Inhalt dort einrücken
und dann dieses div hier schließen.
Damit ist meine Beschreibung im Medienkörper eingeschlossen.
Zusätzlich zu diesem h2
werde ich eine Klasse als mt-0 vorstellen.
Damit sagt diese Klasse Marge Top Null.
Dieser Titel wird hier an der Spitze dieses speziellen Medienobjekts ausgerichtet.
Mit diesen Änderungen lassen Sie uns die Änderungen speichern und
dann gehen und werfen Sie einen kurzen Blick auf unsere Webseite. Wenn Sie
auf unsere Webseite gehen,
werden Sie sofort die Änderung in der Webseite bemerken.
Sie können jetzt sehen, dass es hier eine Bildposition gibt,
und dann
wurde die Beschreibung, die früher an diesem Ort war, richtig positioniert.
Kontrastieren Sie dies mit den verbleibenden beiden Zeilen,
und Sie beginnen jetzt zu sehen, wie das Medienobjekt uns hilft
, das in etwas lebendigeres zu verwandeln.
Ich werde das Gleiche mit der dritten Reihe hier machen.
Die zweite Zeile wird als Übung für Sie in der Zuweisung belassen.
Wenn ich zu diesem dritten Bohrer
gehe, werde ich eine ähnliche Änderung auf diese dritte Zeile anwenden, um das Medienobjekt hier einzuführen.
Lassen Sie mich das Medienobjekt dort vorstellen
und dann zu diesem div
in das Medienobjekt gehen
und dann das Bild vorstellen, das ich hier verwenden werde.
Ich benutze die Klasse als d-flex mr-3.
Wenn Sie das Bild auf der rechten Seite positionieren,
müssen Sie einen Rand als ml-3 dafür angeben.
Darüber hinaus werde ich die Bild-Miniaturansicht-Klasse zu diesem hinzufügen
und dann auch sagen, align-self-center.
Dies sind die Klassen, die ich diesem Bild hinzufügen werde.
Und dann geben wir die Quelle dieses Bildes an,
img und alberto.png, und dann werde ich die Alternative angeben.
Und danach, diese h2 und h4 und die p,
werde ich sie in einem Medien-Body div hier
schließen und das Medien-Body div schließen.
Wir haben nun das Medienobjekt in der dritten Reihe fertiggestellt.
Lassen Sie uns die Änderungen speichern,
und dann gehen und werfen Sie einen Blick auf unsere Webseite als nächstes. Wenn Sie
nun einen Blick auf unsere Webseite werfen,
werden Sie feststellen, dass wir die Beschreibung des Gerichts dort haben.
Wenn Sie nun zur dritten Zeile wechseln,
sehen Sie nun, wie die dritte Zeile ebenfalls neu definiert wurde.
Beachten Sie die Verwendung der Medien links,
was bedeutet, dass das Bild auf der linken Seite in diesem Medienobjekt positioniert wird,
und dann die Medien-Mittelseite positioniert das Bild in der Mitte der Beschreibung.
Sie können auch Medien oben und unten verwenden,
um das Bild oben und unten in dieser Beschreibung auszurichten.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir uns die Verwendung von Bildern und Medienobjekten auf unserer Webseite angesehen.
Dies ist ein guter Zeitpunkt, wieder,
einen guten Kommentar zu tun,
mit der Botschaft, Bilder und Medien.