Bentornati, tutti quanti.
E' tempo per noi di smettere di imparare cose nuove e
mettere in pratica le cose di cui abbiamo parlato nell'ultima settimana.
Quello che faremo è aggiungere alcuni dei nuovi componenti su cui abbiamo lavorato.
Ma lo faremo insieme come programmiamo, quindi ancora una volta voglio sottolineare che
spero davvero che tu ti fermi, metta giu' qualsiasi altra cosa tu stia facendo, metti
su il tuo portatile o qualsiasi cosa tu stia codificando, e scrivi
con me piuttosto che guardare quello che sto facendo.
L' ultima volta che stavamo codificando insieme,
speriamo che tu abbia creato qualcosa che assomiglia a questa schermata qui.
Siamo entrati e avevamo usato larghezza e diversi display,
padding e margine e stavamo rendendo la nostra pagina un po 'migliore.
Oggi, faremo un passo avanti e aggiungeremo alcuni elementi diversi
come il gradiente, invece di avere tre sezioni di uguale larghezza avremo alcune
sezioni occupano metà della pagina, alcune occupano l'intera pagina, piccole cose come questa.
E useremo questi nuovi selettori che abbiamo studiato.
Quindi, andiamo avanti e cominciamo.
La prima cosa che voglio fare è inserire quel gradiente lineare o
quel nuovo colore che va sia nell'intestazione che nel piè di pagina.
Quindi, quando andro' al mio foglio di stile, e verro' quassu'.
Una delle prime cose che voglio fare è che voglio mettere in che abbiamo bisogno di un nuovo
sfondo per l'intestazione e il piè di pagina.
E comincerò mettendolo proprio qui.
So di aver imbrogliato, copiato e incollato.
Ma volevo farlo, scusami.
Volevo farlo, perche' continuavo a fare casino mentre stavo scrivendo.
Quindi, quello che ho messo qui, è che ho iniziato mettendo un colore di sfondo.
Vuoi sempre farlo, perché se non lo fai, se per qualche motivo
il browser non può gestire il gradiente lineare, gli hai dato un fall-back.
Quindi, ho avuto la mia regola di gradiente lineare in ciascuno dei diversi webkit.
Quindi, una volta aggiunto che e ho premuto Salva, possiamo aggiornare la pagina e
vedere se abbiamo quel tipo di colore da grigio a blu che stavamo cercando.
Ehi, fantastico, l'abbiamo fatto.
Ora, quando ho scritto questa regola, potresti ricordare che ho messo
intestazione, piè di pagina e questo significa che dovrebbe applicarsi a entrambi questi elementi.
Ma si applicava solo all'intestazione.
Dobbiamo pensare al perche' e' successo.
Il motivo è che se scorriamo verso il basso, puoi vedere che più in basso nella pagina che
ho detto, voglio che il mio sfondo piè di pagina sia questo particolare colore.
Questo sovrascrive tutte le regole precedenti, quindi vado qui.
E ho intenzione di cancellare questo, e dire, liberamoci di questo.
Aggiorna, e ottimo.
Ora sembra molto meglio.
Ok, quindi abbiamo fatto questo cambiamento, e spero che ti stia abituando all'idea
di entrambi usando la virgola per creare due elementi contemporaneamente, puoi fare ancora di più e
inserire questi prefissi del web kit o prefissi del browser.
Se ti sbarazzi di esso, potrebbe funzionare sul tuo browser,
ma c'è una buona probabilità che non funzioni sull'altro browser.
Quindi vogliamo esercitarci.
Va bene, diamo un'occhiata e vediamo cosa abbiamo.
Ho il gradiente dentro.
La prossima cosa che voglio affrontare è lo styling di questi link
, e ancora, non sto disegnando tutti i link nella
pagina, perché se notate, questo qui sembra ancora esattamente lo stesso.
Voglio solo modellare i collegamenti che si trovano all'interno della sezione di navigazione.
Quindi, vado proprio qui e, ho disegnato il mio navigatore.
Sembra buono.
La prossima volta, ho intenzione di dire,
hey, cerchiamo di stile solo quei collegamenti che sono all'interno del navigatore.
E, abbiamo fatto un bel paio di modifiche.
Se vengo qui, possiamo vederlo.
Uno abbiamo aggiunto qualcosa che sembra un po 'come una struttura a scatola ad esso.
Normalmente non potresti farlo perché gli elementi in linea non prendono una larghezza e
un'altezza ma, andremo avanti e giocheremo con esso.
Andiamo avanti e iniziamo, prima dirò che vorrei che la larghezza di ciascuno dei
miei collegamenti fosse di circa il 22%, salva questo.
Aggiorna, no, niente fortuna.
Quindi di nuovo, ricorda, una delle cose che ho detto è che i collegamenti sono in linea e
non puoi dare loro larghezza o altezza.
Quindi ora, se entro e dico di cambiare il nostro display in
blocco in linea, dovremmo avere piu' fortuna.
Quasi troppa fortuna, perché lo schermo non si adatta abbastanza.
Tutto bene? Va bene.
Fantastico, e' un passo piu' vicino.
Aggiungiamo quel colore di sfondo diverso.
E penso di averlo reso bianco.
Ma puoi usare tutto quello che vuoi.
Boom.
Ci stiamo decisamente avvicinando.
Piccoli passi ci stanno avvicinando molto, molto.
Quindi, la prossima cosa che voglio affrontare mentre cerchiamo di cambiare la nostra pagina
è l'idea che alcune delle sezioni dovrebbero occupare metà dello schermo,
mentre alcune delle sezioni dovrebbero andare avanti e occupare l'intera larghezza dello schermo.
E il modo in cui lo faremo è usare le lezioni.
Se ricordi,
le classi sono un modo per modellare determinati gruppi di elementi in modi simili.
Quindi andiamo avanti e vediamo come faremo a farlo.
La prima cosa che devo fare e' fare una nuova lezione, e questa classe dira' che
invece di tutte le sezioni che occupano il 30%, ne voglio solo alcuni,
li chiamero' meta' per occupare circa, diciamo il 45% della pagina.
In questo modo raccogliera' solo alcune delle sezioni, non tutte.
Se mi aggiorno, non funzionerà ancora perché il problema è che mi sono
sbarazzato del mio stile di sezione e lo ho sostituito con questa classe e da
nessuna parte nel mio HTML mi sono ricordato di fare riferimento alla classe.
Quindi per la prima volta andremo nel nostro file HTML e
inizieremo a fare alcune modifiche.
Vado qui, vorrei che questo prendesse solo metà dello schermo,
quindi dirò classe = metà.
E vorrei che questo prendesse meta' dello schermo.
Abbiamo quello.
Non cambieremo l'altro, quindi
quando mi rinfregio, vedrai che due di loro ora sono uno accanto all'altro.
Così quando ho e rinfrescato sembra un po 'più vicino, a parte che ho
alcune cose strane in corso con alcune cose blu e diverse.
Quindi questo è perché ho usato float.
E se ricordi, quando stai usando float a volte fa sì che le cose che
sono vicine l'una all'altra siano fondamentalmente in posizioni in cui non vuoi che siano in.
Quindi la nostra sezione inferiore, quella che sapevamo che non volevamo
fluttuare, dobbiamo entrare e dire hey, ci sono alcune sezioni che vogliamo essere complete.
Quindi torniamo al nostro foglio di stile.
E faro' solo un po' di copia e incollero' qui.
E ti diro', sai una cosa?
Questa sezione, ho bisogno che sia classe uguale intero.
Allora torna qui.
Sezione class = intero, il che significa che questo dovrebbe occupare l'intera larghezza,
non provare a galleggiare l'uno accanto all'altro.
E andiamo avanti e rinfrescaremo.
Sembra molto meglio.
Sembra proprio che volessimo che le cose fossero alla fine.
E ancora, fai attenzione.
Solo i collegamenti nav sono in stile, non tutti i collegamenti.
Abbiamo inserito il gradiente.
Se il gradiente non
funziona, potrebbe essere perché non hai inserito i prefissi del browser.
Abbiamo davvero un sacco di piccole cose in questa pagina.
E ancora, non sono una graphic artist, quindi non faccio le cose più belle.
Ma è un po 'divertente entrare e creare cose diverse e
vedere come si può stile da soli.
Quindi, continua e buona fortuna e non preoccuparti quando colpisci quegli errori di battitura.
Tutti noi ce l'abbiamo.