È giunto il momento del tuo primo incarico in questo corso.
Nel primo incarico,
ci accingiamo a fornire con la pagina aboutus.html senza stile.
Il file zip contenente la
pagina aboutus.html è disponibile nelle istruzioni di assegnazione.
Quindi è necessario scaricare la pagina e quindi spostare quella pagina nella cartella con Fusion.
Successivamente, applicherai
le classi Bootstrap e la griglia di Bootstrap Flexbox per lo stile
della pagina, quindi sposterai la pagina nella cartella Con Fusion,
quindi potrai visualizzare la pagina nel tuo browser digitando
localhost:3000/aboutus.html e il tuo server di build light server nella pagina aboutus.html,
quindi questo è l'unico modo per visualizzare la pagina.
Quindi, per cominciare,
la pagina sarà simile a questa,
una pagina completamente scomoda che contiene solo contenuti.
Ora il tuo compito è quello di passare attraverso tre attività al fine di formattare questa pagina.
Diamo un'occhiata ai tre compiti in modo più dettagliato. Il
tuo primo compito è quello di applicare
il CSS Bootstraps e le classi Javascript alla
pagina aboutus.html in modo che questa pagina venga immediatamente trasformata in questa pagina,
dove non appena aggiungi le classi CSS e JavaScript Bootstraps,
l'intestazione e il piè di pagina verranno automaticamente formattati correttamente,
perché ho semplicemente copiato l'intestazione nel piè di pagina dalla pagina index.html in
questa pagina e ho lasciato tutta la formattazione Bootstrap in quanto tale,
ma il contenuto effettivo della pagina è ancora lasciato senza stile.
Così ora, come seconda attività,
si sta andando ad applicare la griglia Bootstraps Flexbox che include il contenitore,
le righe e le classi di colonna a
questo contenuto o la pagina in modo che si può stile correttamente.
Ora, quando applichi le classi,
applicherai le classi di riga e colonna all'aboutus per lasciarlo come tale.
Quindi si sta andando ad applicare le classi riga e colonna a
questo contenuto in modo che questo contenuto occupa solo la metà dello schermo,
e quindi si sta andando ad applicare le classi riga e colonna a
questo contenuto in modo che hanno occupa l'intera larghezza dello schermo.
Quindi, scegli le classi di riga e colonna correttamente da applicare a questo.
È possibile utilizzare le classi CSS personalizzate che abbiamo già
implementato per index.html aggiungendo il file style.css,
anche per lo stile del contenuto in questa pagina.
Quindi, quando completi la seconda attività,
la tua pagina finirà per essere stilata in questo modo.
Quindi puoi vedere che la pagina aboutus esiste nella sua.
Poi parte Nostra Storia,
notare che su uno schermo di piccole o grandi dimensioni,
la nostra storia occuperà solo la metà della larghezza dello schermo.
In questo caso, la parte Corporate Leadership occupa l'intera larghezza dello schermo.
Questa è la seconda attività che devi completare nel tuo incarico.
Per la terza attività, come si può vedere,
questo layout di contenuto sembra adatto per le dimensioni dello schermo più grandi,
ma quando si passa alle dimensioni dello schermo più piccole in particolare in questo modo,
si nota che il contenuto è troppo in questa sezione.
Quindi quello che vorremmo fare è usare un'altra classe Bootstrap fornita per noi chiamata,
[inudibile] e blocco DSM.
C' è un collegamento alle classi reattive nelle risorse di assegnazione,
quindi è possibile controllare la documentazione per il blocco [inudibile] e DSM.
È necessario applicare quelli in modo che questa descrizione sia
nascosta nelle dimensioni dello schermo extra piccole.
Quindi, quando le classi a questa parte di leadership aziendale,
lo stesso contenuto sarà ora disposto senza la descrizione, in
modo che sarà nascosto nelle dimensioni degli schermi extra piccoli.
Ma quando vai al piccolo le dimensioni dello schermo di grandi dimensioni,
il contenuto diventerà visibile.
Quindi puoi notare che per le dimensioni dello schermo extra small,
il contenuto è nascosto,
ma per le dimensioni dello schermo piccolo,
quel contenuto della descrizione verrà mostrato chiaramente.
Quindi questo è il tuo terzo compito nel tuo incarico.
Mentre ci sei, puoi anche applicare le stesse classi alle
descrizioni nella nostra pagina index.html in modo che
le descrizioni dettagliate per gli elementi di contenuto saranno anche nascoste
nella pagina index.html quando viene visualizzato su dimensioni dello schermo extra piccole.
Questo completa il tuo primo incarico.
Inoltre, quando invii il tuo incarico,
prendi una schermata a pagina intera del tuo layout
sia nelle
dimensioni dello schermo da piccole a extra large
che nelle dimensioni dello schermo extra small, e quindi includilo come parte del tuo invio.
Per acquisire uno screenshot a pagina intera in Chrome,
puoi utilizzare un'estensione Chrome disponibile per noi,
il link all'estensione Chrome viene fornito nelle
risorse di assegnazione che seguono la descrizione dell'assegnazione.
Dopo aver completato il tuo incarico,
nel caso in cui tu stia salvando le tue modifiche in un repository Git,
non dimenticare di eseguire il commit delle modifiche al
tuo repository Git con il Message Assignment One.