1
00:00:04,040 --> 00:00:09,465
È giunto il momento del tuo primo incarico in questo corso.

2
00:00:09,465 --> 00:00:10,975
Nel primo incarico,

3
00:00:10,975 --> 00:00:18,605
ci accingiamo a fornire con la pagina aboutus.html senza stile.

4
00:00:18,605 --> 00:00:22,130
Il file zip contenente la

5
00:00:22,130 --> 00:00:25,670
pagina aboutus.html è disponibile nelle istruzioni di assegnazione.

6
00:00:25,670 --> 00:00:30,530
Quindi è necessario scaricare la pagina e quindi spostare quella pagina nella cartella con Fusion.

7
00:00:30,530 --> 00:00:33,060
Successivamente, applicherai

8
00:00:33,060 --> 00:00:40,970
le classi Bootstrap e la griglia di Bootstrap Flexbox per lo stile

9
00:00:41,110 --> 00:00:47,780
della pagina, quindi sposterai la pagina nella cartella Con Fusion,

10
00:00:47,780 --> 00:00:52,095
quindi potrai visualizzare la pagina nel tuo browser digitando

11
00:00:52,095 --> 00:01:01,810
localhost:3000/aboutus.html e il tuo server di build light server nella pagina aboutus.html,

12
00:01:01,810 --> 00:01:05,310
quindi questo è l'unico modo per visualizzare la pagina.

13
00:01:05,310 --> 00:01:06,545
Quindi, per cominciare,

14
00:01:06,545 --> 00:01:08,775
la pagina sarà simile a questa,

15
00:01:08,775 --> 00:01:12,520
una pagina completamente scomoda che contiene solo contenuti.

16
00:01:12,520 --> 00:01:20,165
Ora il tuo compito è quello di passare attraverso tre attività al fine di formattare questa pagina.

17
00:01:20,165 --> 00:01:23,245
Diamo un'occhiata ai tre compiti in modo più dettagliato. Il

18
00:01:23,245 --> 00:01:26,890
tuo primo compito è quello di applicare

19
00:01:26,890 --> 00:01:32,850
il CSS Bootstraps e le classi Javascript alla

20
00:01:32,850 --> 00:01:42,415
pagina aboutus.html in modo che questa pagina venga immediatamente trasformata in questa pagina,

21
00:01:42,415 --> 00:01:48,470
dove non appena aggiungi le classi CSS e JavaScript Bootstraps,

22
00:01:48,470 --> 00:01:54,115
l'intestazione e il piè di pagina verranno automaticamente formattati correttamente,

23
00:01:54,115 --> 00:01:59,170
perché ho semplicemente copiato l'intestazione nel piè di pagina dalla pagina index.html in

24
00:01:59,170 --> 00:02:05,140
questa pagina e ho lasciato tutta la formattazione Bootstrap in quanto tale,

25
00:02:05,140 --> 00:02:10,955
ma il contenuto effettivo della pagina è ancora lasciato senza stile.

26
00:02:10,955 --> 00:02:14,580
Così ora, come seconda attività,

27
00:02:14,580 --> 00:02:19,580
si sta andando ad applicare la griglia Bootstraps Flexbox che include il contenitore,

28
00:02:19,580 --> 00:02:23,190
le righe e le classi di colonna a

29
00:02:23,190 --> 00:02:28,430
questo contenuto o la pagina in modo che si può stile correttamente.

30
00:02:28,430 --> 00:02:30,345
Ora, quando applichi le classi,

31
00:02:30,345 --> 00:02:36,430
applicherai le classi di riga e colonna all'aboutus per lasciarlo come tale.

32
00:02:36,430 --> 00:02:40,390
Quindi si sta andando ad applicare le classi riga e colonna a

33
00:02:40,390 --> 00:02:45,445
questo contenuto in modo che questo contenuto occupa solo la metà dello schermo,

34
00:02:45,445 --> 00:02:48,740
e quindi si sta andando ad applicare le classi riga e colonna a

35
00:02:48,740 --> 00:02:53,245
questo contenuto in modo che hanno occupa l'intera larghezza dello schermo.

36
00:02:53,245 --> 00:03:00,300
Quindi, scegli le classi di riga e colonna correttamente da applicare a questo.

37
00:03:00,300 --> 00:03:05,220
È possibile utilizzare le classi CSS personalizzate che abbiamo già

38
00:03:05,220 --> 00:03:10,510
implementato per index.html aggiungendo il file style.css,

39
00:03:10,510 --> 00:03:14,765
anche per lo stile del contenuto in questa pagina.

40
00:03:14,765 --> 00:03:18,010
Quindi, quando completi la seconda attività,

41
00:03:18,010 --> 00:03:21,990
la tua pagina finirà per essere stilata in questo modo.

42
00:03:21,990 --> 00:03:27,290
Quindi puoi vedere che la pagina aboutus esiste nella sua.

43
00:03:27,290 --> 00:03:31,505
Poi parte Nostra Storia,

44
00:03:31,505 --> 00:03:37,800
notare che su uno schermo di piccole o grandi dimensioni,

45
00:03:37,800 --> 00:03:43,815
la nostra storia occuperà solo la metà della larghezza dello schermo.

46
00:03:43,815 --> 00:03:51,850
In questo caso, la parte Corporate Leadership occupa l'intera larghezza dello schermo.

47
00:03:51,850 --> 00:03:56,000
Questa è la seconda attività che devi completare nel tuo incarico.

48
00:03:56,000 --> 00:03:59,660
Per la terza attività, come si può vedere,

49
00:03:59,660 --> 00:04:05,380
questo layout di contenuto sembra adatto per le dimensioni dello schermo più grandi,

50
00:04:05,380 --> 00:04:13,240
ma quando si passa alle dimensioni dello schermo più piccole in particolare in questo modo,

51
00:04:13,240 --> 00:04:20,415
si nota che il contenuto è troppo in questa sezione.

52
00:04:20,415 --> 00:04:27,670
Quindi quello che vorremmo fare è usare un'altra classe Bootstrap fornita per noi chiamata,

53
00:04:27,670 --> 00:04:31,615
[inudibile] e blocco DSM.

54
00:04:31,615 --> 00:04:37,865
C' è un collegamento alle classi reattive nelle risorse di assegnazione,

55
00:04:37,865 --> 00:04:44,550
quindi è possibile controllare la documentazione per il blocco [inudibile] e DSM.

56
00:04:44,550 --> 00:04:49,440
È necessario applicare quelli in modo che questa descrizione sia

57
00:04:49,440 --> 00:04:54,400
nascosta nelle dimensioni dello schermo extra piccole.

58
00:04:54,400 --> 00:04:59,955
Quindi, quando le classi a questa parte di leadership aziendale,

59
00:04:59,955 --> 00:05:06,040
lo stesso contenuto sarà ora disposto senza la descrizione, in

60
00:05:06,040 --> 00:05:10,465
modo che sarà nascosto nelle dimensioni degli schermi extra piccoli.

61
00:05:10,465 --> 00:05:14,170
Ma quando vai al piccolo le dimensioni dello schermo di grandi dimensioni,

62
00:05:14,170 --> 00:05:16,335
il contenuto diventerà visibile.

63
00:05:16,335 --> 00:05:21,200
Quindi puoi notare che per le dimensioni dello schermo extra small,

64
00:05:21,200 --> 00:05:23,760
il contenuto è nascosto,

65
00:05:23,760 --> 00:05:26,170
ma per le dimensioni dello schermo piccolo,

66
00:05:26,170 --> 00:05:30,475
quel contenuto della descrizione verrà mostrato chiaramente.

67
00:05:30,475 --> 00:05:35,310
Quindi questo è il tuo terzo compito nel tuo incarico.

68
00:05:35,310 --> 00:05:40,175
Mentre ci sei, puoi anche applicare le stesse classi alle

69
00:05:40,175 --> 00:05:45,810
descrizioni nella nostra pagina index.html in modo che

70
00:05:45,810 --> 00:05:51,480
le descrizioni dettagliate per gli elementi di contenuto saranno anche nascoste

71
00:05:51,480 --> 00:05:57,645
nella pagina index.html quando viene visualizzato su dimensioni dello schermo extra piccole.

72
00:05:57,645 --> 00:06:02,090
Questo completa il tuo primo incarico.

73
00:06:02,090 --> 00:06:04,965
Inoltre, quando invii il tuo incarico,

74
00:06:04,965 --> 00:06:14,460
prendi una schermata a pagina intera del tuo layout

75
00:06:14,460 --> 00:06:19,615
sia nelle

76
00:06:19,615 --> 00:06:25,930
dimensioni dello schermo da piccole a extra large

77
00:06:25,930 --> 00:06:29,230
che nelle dimensioni dello schermo extra small, e quindi includilo come parte del tuo invio.

78
00:06:29,230 --> 00:06:32,420
Per acquisire uno screenshot a pagina intera in Chrome,

79
00:06:32,420 --> 00:06:36,000
puoi utilizzare un'estensione Chrome disponibile per noi,

80
00:06:36,000 --> 00:06:39,305
il link all'estensione Chrome viene fornito nelle

81
00:06:39,305 --> 00:06:45,325
risorse di assegnazione che seguono la descrizione dell'assegnazione.

82
00:06:45,325 --> 00:06:48,555
Dopo aver completato il tuo incarico,

83
00:06:48,555 --> 00:06:52,610
nel caso in cui tu stia salvando le tue modifiche in un repository Git,

84
00:06:52,610 --> 00:06:55,750
non dimenticare di eseguire il commit delle modifiche al

85
00:06:55,750 --> 00:07:00,090
tuo repository Git con il Message Assignment One.