E' ora di passare al prossimo esercizio.
In questo esercizio, ci occuperemo delle immagini,
come includiamo le immagini nelle nostre pagine web
e come possiamo utilizzare l'oggetto multimediale nella nostra pagina web.
Come primo passo,
vai alle istruzioni dell'esercizio e scarica il file image.zip,
quindi salvalo nella cartella della confusione.
E poi decomprimere il file per ottenere una cartella denominata, img,
e
al suo interno troverete alcune immagini che useremo in questo esercizio.
Tutte le immagini sono in formato png in quella cartella.
Ora stiamo andando a lavorare per aggiungere alcune immagini alla pagina.
Per prima cosa, aggiungiamo il logo per il nostro ristorante.
Quindi, andando alla pagina index.html, nel Jumbotron,
vedrai che il secondo div qui ha il col-sm.
Quindi, abbiamo intenzione di risolvere questo problema aggiungendo a questo div,
e allineare self center a questo div.
Ora, a questo div,
stiamo andando ad aggiungere in un'immagine.
Quindi, lasciami usare l'immagine con la fonte, img.
Abbiamo già inserito la cartella immagine contenente le immagini nel nostro progetto.
Quindi, da lì, aggiungerò il file logo.png come immagine qui.
Inoltre, ho intenzione di aggiungere la classe come fluido immagine, in
modo che questa immagine sarà automaticamente reattiva e si adatta alle dimensioni dello schermo.
Salviamo le modifiche.
Abbiamo intenzione di applicare la stessa modifica sia alla pagina aboutus.html,
e anche alla pagina contactus.html nel Jumbotron.
Ora, quando date un'occhiata più da vicino alla vostra pagina web,
scoprirete che nel Jumbotron,
subito dopo queste parole,
vedrete l'immagine del nostro ristorante inserita lì.
Successivamente, andremo nella barra di navigazione,
e poi dove abbiamo questo per il marchio navbar,
sostituirò queste parole per il ristorante con il logo corrispondente.
Quindi, queste parole lo sostituirò con img,
e la fonte è logo.png.
Inoltre, ho intenzione di specificare un attributo height di 30
e un attributo width di 41 a questo logo.
Questa dimensione è adatta per il marchio navbar lì.
Quindi, salviamo le modifiche.
Ho intenzione di andare e fare la stessa modifica nella pagina aboutus.html,
e anche nella pagina contactus.html.
Dando un'occhiata alla pagina web,
vedrai che il nome del ristorante è stato sostituito
con il logo del ristorante in piccole dimensioni lì.
Ora vedi che quando navighi alla pagina Informazioni,
vedrai che l'immagine viene inclusa lì,
e allo stesso modo nella pagina Contatti,
vedrai che l'immagine è stata aggiornata tornando alla pagina principale.
Ora, quello che faremo,
è usare un oggetto multimediale al posto di queste descrizioni che abbiamo qui,
e quindi usare l'oggetto multimediale per
sostituirli con la descrizione e anche un'immagine da includere.
Questo dà una visione migliore della nostra pagina web.
Quindi, andiamo avanti e facciamo quel cambiamento.
Per utilizzare l'oggetto multimediale nella nostra pagina index.html,
andremo alla prima riga di contenuto qui.
E poi proprio lì nel secondo div,
introdurrò un nuovo dev con i media di classe
e racchiuderò il contenuto all'interno di questo div lì,
chiudendo il div.
Ora, all'interno di questo div,
introdurrò un'immagine da usare lì.
Qui vado e dico classe immagine,
e per utilizzare un'immagine in un oggetto multimediale,
abbiamo bisogno di applicare alcune classi correlate al flex aggiuntive qui,
quindi applico il d-flex, e poi mr-3.
Quindi, M significa margine destro con il numero 3.
Ciò dà un margine sufficiente a destra di questa immagine,
in modo che la descrizione sia leggermente diversa dall'immagine nella pagina web.
E poi userò la miniatura dell'immagine per questa immagine,
e poi userò anche l'allineamento auto-centro per l'immagine,
quindi digiterò l'origine dell'immagine, che è img,
e puoi
cercare il nome dell'immagine nella cartella img,
e lasciatemi dare un'alternativa lì,
e chiudere l'immagine.
Questo includerà ora l'immagine nel mio oggetto midi.
Inoltre, ho intenzione di creare il corpo multimediale per questa immagine
dicendo div class media body,
e quindi racchiuso questo h2 e p che contiene la descrizione all'interno di questo div lì.
Quindi, lasciami indentare il contenuto lì,
e poi chiudere quel div qui.
Con questo, la mia descrizione è racchiusa all'interno del corpo dei media.
Oltre a questo h2,
ho intenzione di introdurre una classe come mt-0.
Con questo, questa classe dice margine superiore zero.
Questo titolo sarà allineato alla parte superiore di questo particolare oggetto multimediale qui.
Con queste modifiche, salviamo le modifiche e
poi andiamo a dare un'occhiata veloce alla nostra pagina web.
Andando alla nostra pagina web,
noterai immediatamente il cambiamento nella pagina web.
Ora puoi vedere che c'è una posizione dell'immagine qui,
e quindi la descrizione
che era in precedenza in quella posizione è stata posizionata correttamente qui.
Contrasta questo con le restanti due righe,
e ora inizi a vedere come l'oggetto multimediale ci aiuta
a trasformarlo in qualcosa di più vibrante.
Ho intenzione di fare la stessa cosa alla terza fila qui.
La seconda riga verrà lasciata come esercizio per te nell'assegnazione.
Andando a quel terzo trapano,
applicherò una modifica simile a questa terza riga per introdurre l'oggetto multimediale qui.
Permettetemi di introdurre l'oggetto multimediale lì
, e poi a questo div
, andare nell'oggetto multimediale
e quindi introdurre l'immagine che userò qui.
Io uso la classe come d-flex mr-3.
Se stai posizionando l'immagine sul lato destro,
allora devi dare un margine come ml-3 per esso.
Inoltre, ho intenzione di aggiungere nella classe miniature immagine a questo,
e poi anche dire, allineare auto-centro.
Queste sono le classi che ho intenzione di aggiungere a questa immagine.
E poi, specifichiamo la fonte di questa immagine,
img e alberto.png, e quindi specificherò l'alternativa.
E dopo questo, questo h2 e h4 e la p,
li chiuderò all'interno di un div media-corpo qui,
chiudendo il div del corpo dei media.
Ora abbiamo completato l'oggetto multimediale nella terza riga.
Salviamo le modifiche,
e poi andiamo a dare un'occhiata alla nostra pagina web successiva.
Ora, dando un'occhiata alla nostra pagina web,
noterai che abbiamo la descrizione del piatto lì.
Ora, se si passa alla terza riga,
si vedrà come è stata ridefinita anche la terza riga.
Si noti l'uso del supporto a sinistra,
il che significa che l'immagine è posizionata sul lato sinistro in questo oggetto multimediale,
quindi la pagina centrale del supporto posiziona l'immagine al centro della descrizione.
È inoltre possibile utilizzare il supporto superiore e inferiore,
per allineare l'immagine verso l'alto e verso il basso di questa descrizione.
Con questo, completiamo questo esercizio.
In questo esercizio, abbiamo esaminato l'uso di immagini e oggetti multimediali nella nostra pagina web.
Questo è un buon momento, ancora una volta,
per fare un buon commento,
con il messaggio, le immagini e i media.