1
00:00:03,780 --> 00:00:07,090
E' ora di passare al prossimo esercizio.

2
00:00:07,090 --> 00:00:10,005
In questo esercizio, ci occuperemo delle immagini,

3
00:00:10,005 --> 00:00:13,660
come includiamo le immagini nelle nostre pagine web

4
00:00:13,660 --> 00:00:21,030
e come possiamo utilizzare l'oggetto multimediale nella nostra pagina web.

5
00:00:21,040 --> 00:00:23,240
Come primo passo,

6
00:00:23,240 --> 00:00:27,890
vai alle istruzioni dell'esercizio e scarica il file image.zip,

7
00:00:27,890 --> 00:00:34,550
quindi salvalo nella cartella della confusione.

8
00:00:35,890 --> 00:00:42,360
E poi decomprimere il file per ottenere una cartella denominata, img,

9
00:00:42,360 --> 00:00:44,210
e

10
00:00:44,210 --> 00:00:49,175
al suo interno troverete alcune immagini che useremo in questo esercizio.

11
00:00:49,175 --> 00:00:53,115
Tutte le immagini sono in formato png in quella cartella.

12
00:00:53,115 --> 00:00:58,785
Ora stiamo andando a lavorare per aggiungere alcune immagini alla pagina.

13
00:00:58,785 --> 00:01:02,310
Per prima cosa, aggiungiamo il logo per il nostro ristorante.

14
00:01:02,310 --> 00:01:06,360
Quindi, andando alla pagina index.html, nel Jumbotron,

15
00:01:06,360 --> 00:01:11,130
vedrai che il secondo div qui ha il col-sm.

16
00:01:11,130 --> 00:01:17,295
Quindi, abbiamo intenzione di risolvere questo problema aggiungendo a questo div,

17
00:01:17,295 --> 00:01:24,030
e allineare self center a questo div.

18
00:01:24,030 --> 00:01:26,620
Ora, a questo div,

19
00:01:26,620 --> 00:01:28,515
stiamo andando ad aggiungere in un'immagine.

20
00:01:28,515 --> 00:01:33,790
Quindi, lasciami usare l'immagine con la fonte, img.

21
00:01:33,790 --> 00:01:40,710
Abbiamo già inserito la cartella immagine contenente le immagini nel nostro progetto.

22
00:01:40,710 --> 00:01:49,150
Quindi, da lì, aggiungerò il file logo.png come immagine qui.

23
00:01:49,150 --> 00:01:58,140
Inoltre, ho intenzione di aggiungere la classe come fluido immagine, in

24
00:01:58,140 --> 00:02:06,410
modo che questa immagine sarà automaticamente reattiva e si adatta alle dimensioni dello schermo.

25
00:02:07,160 --> 00:02:09,634
Salviamo le modifiche.

26
00:02:09,634 --> 00:02:14,810
Abbiamo intenzione di applicare la stessa modifica sia alla pagina aboutus.html,

27
00:02:14,810 --> 00:02:19,855
e anche alla pagina contactus.html nel Jumbotron.

28
00:02:19,855 --> 00:02:23,350
Ora, quando date un'occhiata più da vicino alla vostra pagina web,

29
00:02:23,350 --> 00:02:26,350
scoprirete che nel Jumbotron,

30
00:02:26,350 --> 00:02:29,210
subito dopo queste parole,

31
00:02:29,210 --> 00:02:34,120
vedrete l'immagine del nostro ristorante inserita lì.

32
00:02:34,120 --> 00:02:36,905
Successivamente, andremo nella barra di navigazione,

33
00:02:36,905 --> 00:02:41,750
e poi dove abbiamo questo per il marchio navbar,

34
00:02:41,750 --> 00:02:47,915
sostituirò queste parole per il ristorante con il logo corrispondente.

35
00:02:47,915 --> 00:02:57,650
Quindi, queste parole lo sostituirò con img,

36
00:02:57,650 --> 00:03:03,280
e la fonte è logo.png.

37
00:03:03,280 --> 00:03:13,750
Inoltre, ho intenzione di specificare un attributo height di 30

38
00:03:14,310 --> 00:03:20,950
e un attributo width di 41 a questo logo.

39
00:03:20,950 --> 00:03:28,530
Questa dimensione è adatta per il marchio navbar lì.

40
00:03:28,530 --> 00:03:30,330
Quindi, salviamo le modifiche.

41
00:03:30,330 --> 00:03:35,895
Ho intenzione di andare e fare la stessa modifica nella pagina aboutus.html,

42
00:03:35,895 --> 00:03:39,745
e anche nella pagina contactus.html.

43
00:03:39,745 --> 00:03:41,790
Dando un'occhiata alla pagina web,

44
00:03:41,790 --> 00:03:44,900
vedrai che il nome del ristorante è stato sostituito

45
00:03:44,900 --> 00:03:49,835
con il logo del ristorante in piccole dimensioni lì.

46
00:03:49,835 --> 00:03:53,280
Ora vedi che quando navighi alla pagina Informazioni,

47
00:03:53,280 --> 00:03:56,720
vedrai che l'immagine viene inclusa lì,

48
00:03:56,720 --> 00:03:59,700
e allo stesso modo nella pagina Contatti,

49
00:03:59,700 --> 00:04:04,995
vedrai che l'immagine è stata aggiornata tornando alla pagina principale.

50
00:04:04,995 --> 00:04:07,080
Ora, quello che faremo,

51
00:04:07,080 --> 00:04:13,980
è usare un oggetto multimediale al posto di queste descrizioni che abbiamo qui,

52
00:04:13,980 --> 00:04:19,095
e quindi usare l'oggetto multimediale per

53
00:04:19,095 --> 00:04:25,370
sostituirli con la descrizione e anche un'immagine da includere.

54
00:04:25,370 --> 00:04:29,890
Questo dà una visione migliore della nostra pagina web.

55
00:04:29,890 --> 00:04:32,725
Quindi, andiamo avanti e facciamo quel cambiamento.

56
00:04:32,725 --> 00:04:37,695
Per utilizzare l'oggetto multimediale nella nostra pagina index.html,

57
00:04:37,695 --> 00:04:40,555
andremo alla prima riga di contenuto qui.

58
00:04:40,555 --> 00:04:44,930
E poi proprio lì nel secondo div,

59
00:04:44,930 --> 00:04:51,380
introdurrò un nuovo dev con i media di classe

60
00:04:51,380 --> 00:04:57,500
e racchiuderò il contenuto all'interno di questo div lì,

61
00:04:57,500 --> 00:05:01,245
chiudendo il div.

62
00:05:01,245 --> 00:05:04,940
Ora, all'interno di questo div,

63
00:05:04,940 --> 00:05:10,820
introdurrò un'immagine da usare lì.

64
00:05:10,820 --> 00:05:14,840
Qui vado e dico classe immagine,

65
00:05:14,840 --> 00:05:20,120
e per utilizzare un'immagine in un oggetto multimediale,

66
00:05:20,120 --> 00:05:26,820
abbiamo bisogno di applicare alcune classi correlate al flex aggiuntive qui,

67
00:05:26,820 --> 00:05:31,545
quindi applico il d-flex, e poi mr-3.

68
00:05:31,545 --> 00:05:40,035
Quindi, M significa margine destro con il numero 3.

69
00:05:40,035 --> 00:05:43,625
Ciò dà un margine sufficiente a destra di questa immagine,

70
00:05:43,625 --> 00:05:53,205
in modo che la descrizione sia leggermente diversa dall'immagine nella pagina web.

71
00:05:53,205 --> 00:05:59,370
E poi userò la miniatura dell'immagine per questa immagine,

72
00:05:59,370 --> 00:06:08,650
e poi userò anche l'allineamento auto-centro per l'immagine,

73
00:06:08,650 --> 00:06:16,350
quindi digiterò l'origine dell'immagine, che è img,

74
00:06:16,350 --> 00:06:23,570
e puoi

75
00:06:23,570 --> 00:06:30,680
cercare il nome dell'immagine nella cartella img,

76
00:06:30,680 --> 00:06:34,340
e lasciatemi dare un'alternativa lì,

77
00:06:36,240 --> 00:06:39,005
e chiudere l'immagine.

78
00:06:39,005 --> 00:06:43,465
Questo includerà ora l'immagine nel mio oggetto midi.

79
00:06:43,465 --> 00:06:49,830
Inoltre, ho intenzione di creare il corpo multimediale per questa immagine

80
00:06:49,830 --> 00:06:56,840
dicendo div class media body,

81
00:06:56,840 --> 00:07:06,055
e quindi racchiuso questo h2 e p che contiene la descrizione all'interno di questo div lì.

82
00:07:06,055 --> 00:07:10,365
Quindi, lasciami indentare il contenuto lì,

83
00:07:10,365 --> 00:07:16,395
e poi chiudere quel div qui.

84
00:07:16,395 --> 00:07:23,395
Con questo, la mia descrizione è racchiusa all'interno del corpo dei media.

85
00:07:23,395 --> 00:07:25,430
Oltre a questo h2,

86
00:07:25,430 --> 00:07:30,955
ho intenzione di introdurre una classe come mt-0.

87
00:07:30,955 --> 00:07:37,785
Con questo, questa classe dice margine superiore zero.

88
00:07:37,785 --> 00:07:44,940
Questo titolo sarà allineato alla parte superiore di questo particolare oggetto multimediale qui.

89
00:07:44,940 --> 00:07:48,120
Con queste modifiche, salviamo le modifiche e

90
00:07:48,120 --> 00:07:51,705
poi andiamo a dare un'occhiata veloce alla nostra pagina web.

91
00:07:51,705 --> 00:07:53,930
Andando alla nostra pagina web,

92
00:07:53,930 --> 00:07:56,980
noterai immediatamente il cambiamento nella pagina web.

93
00:07:56,980 --> 00:08:00,115
Ora puoi vedere che c'è una posizione dell'immagine qui,

94
00:08:00,115 --> 00:08:03,650
e quindi la descrizione

95
00:08:03,650 --> 00:08:08,375
che era in precedenza in quella posizione è stata posizionata correttamente qui.

96
00:08:08,375 --> 00:08:13,280
Contrasta questo con le restanti due righe,

97
00:08:13,280 --> 00:08:17,290
e ora inizi a vedere come l'oggetto multimediale ci aiuta

98
00:08:17,290 --> 00:08:23,545
a trasformarlo in qualcosa di più vibrante.

99
00:08:23,545 --> 00:08:30,270
Ho intenzione di fare la stessa cosa alla terza fila qui.

100
00:08:30,270 --> 00:08:38,155
La seconda riga verrà lasciata come esercizio per te nell'assegnazione.

101
00:08:38,155 --> 00:08:40,680
Andando a quel terzo trapano,

102
00:08:40,680 --> 00:08:48,730
applicherò una modifica simile a questa terza riga per introdurre l'oggetto multimediale qui.

103
00:08:48,730 --> 00:08:51,595
Permettetemi di introdurre l'oggetto multimediale lì

104
00:08:51,595 --> 00:08:54,240
, e poi a questo div

105
00:08:54,240 --> 00:08:57,115
, andare nell'oggetto multimediale

106
00:08:57,115 --> 00:09:01,290
e quindi introdurre l'immagine che userò qui.

107
00:09:01,290 --> 00:09:05,410
Io uso la classe come d-flex mr-3.

108
00:09:05,410 --> 00:09:08,830
Se stai posizionando l'immagine sul lato destro,

109
00:09:08,830 --> 00:09:14,060
allora devi dare un margine come ml-3 per esso.

110
00:09:14,060 --> 00:09:20,560
Inoltre, ho intenzione di aggiungere nella classe miniature immagine a questo,

111
00:09:20,560 --> 00:09:26,005
e poi anche dire, allineare auto-centro.

112
00:09:26,005 --> 00:09:31,010
Queste sono le classi che ho intenzione di aggiungere a questa immagine.

113
00:09:31,010 --> 00:09:35,670
E poi, specifichiamo la fonte di questa immagine,

114
00:09:35,760 --> 00:09:46,880
img e alberto.png, e quindi specificherò l'alternativa.

115
00:09:52,060 --> 00:09:57,400
E dopo questo, questo h2 e h4 e la p,

116
00:09:57,400 --> 00:10:07,140
li chiuderò all'interno di un div media-corpo qui,

117
00:10:07,760 --> 00:10:11,845
chiudendo il div del corpo dei media.

118
00:10:11,845 --> 00:10:17,845
Ora abbiamo completato l'oggetto multimediale nella terza riga.

119
00:10:17,845 --> 00:10:19,230
Salviamo le modifiche,

120
00:10:19,230 --> 00:10:22,700
e poi andiamo a dare un'occhiata alla nostra pagina web successiva.

121
00:10:22,700 --> 00:10:25,480
Ora, dando un'occhiata alla nostra pagina web,

122
00:10:25,480 --> 00:10:30,685
noterai che abbiamo la descrizione del piatto lì.

123
00:10:30,685 --> 00:10:32,760
Ora, se si passa alla terza riga,

124
00:10:32,760 --> 00:10:37,705
si vedrà come è stata ridefinita anche la terza riga.

125
00:10:37,705 --> 00:10:40,425
Si noti l'uso del supporto a sinistra,

126
00:10:40,425 --> 00:10:45,210
il che significa che l'immagine è posizionata sul lato sinistro in questo oggetto multimediale,

127
00:10:45,210 --> 00:10:52,230
quindi la pagina centrale del supporto posiziona l'immagine al centro della descrizione.

128
00:10:52,230 --> 00:10:55,760
È inoltre possibile utilizzare il supporto superiore e inferiore,

129
00:10:55,760 --> 00:11:01,970
per allineare l'immagine verso l'alto e verso il basso di questa descrizione.

130
00:11:01,970 --> 00:11:05,185
Con questo, completiamo questo esercizio.

131
00:11:05,185 --> 00:11:12,970
In questo esercizio, abbiamo esaminato l'uso di immagini e oggetti multimediali nella nostra pagina web.

132
00:11:12,970 --> 00:11:14,535
Questo è un buon momento, ancora una volta,

133
00:11:14,535 --> 00:11:16,365
per fare un buon commento,

134
00:11:16,365 --> 00:11:19,960
con il messaggio, le immagini e i media.