Ciao a tutti, bentornati.
Ancora una volta, ti chiederò di smettere di imparare e iniziare a programmare e praticare.
E useremo lo stesso esempio che abbiamo usato nella nostra prima pausa di codifica.
Quindi volevo mostrarti qual era la nostra vecchia pagina, proprio qui.
E vediamo come possiamo trasformarlo in qualcosa che assomiglia un po' più alla
nostra nuova pagina qui,
dove abbiamo implementato alcuni dei nostri margini, imbottiture, larghezze e altezze.
Va bene, allora andiamo avanti e cominciamo.
La prima cosa che voglio fare è usare lo stesso foglio di stile che ho usato per
il primo.
Non c'è assolutamente bisogno di ricreare il foglio di stile quando è possibile semplicemente
utilizzare questo e modificarlo, o, se lo si desidera, utilizzare due fogli di stile.
Ne usero' uno solo.
E la prima cosa che sistemero' e' il fatto
che ho fatto quello che potresti chiamare un errore nella mia versione precedente.
Ho due regole styling h1.
Non e' un problema.
Il browser applicherà tutti questi stili.
Ma quello che volevo davvero fare era quello di modellare l'etichetta del corpo.
Quindi, diamo un'occhiata a come sembra in questo momento.
E torniamo alla nostra versione attuale.
Ed eccoci qui.
Sembra gia' un po' meglio di quello che avevamo prima.
Ok, quindi ora che sono in un buon punto di partenza per quando inizio,
parliamo delle diverse cose che possiamo stilare nella nostra pagina, ok?
Una delle prime cose che voglio fare è aggiungere un po' di
margine alla mia pagina.
Se guardi qui, non c'è molto spazio tra il bordo della pagina e
il browser effettivo.
Voglio aggiungere solo un po'.
Puoi aggiungere un po ', puoi aggiungere molto.
Infatti, mentre decidiamo oggi, aggiungo molto, solo per vedere gli effetti.
Allora, come si fa?
Come si aggiunge quello spazio tra l'elemento e i suoi vicini?
Tu entri e noi aggiungeremo un margine.
E, come ho detto, penso che lo rendero' un po' piu' pronunciato rispetto
al codice che ho mostrato qui.
Vado avanti e lo faccio 4 percento.
Quindi, quando lo faremo, tornero' alla pagina.
Vado a ricaricare.
E si vede che tutto è un po' spostato, va bene?
Margine aggiunge solo un po 'di spazio e lo rende più visivamente attraente per gli utenti,
va bene?
Pensiamo ad altre cose che vogliamo fare.
Chiaramente probabilmente voglio aggiungere un po 'di spazio tra
i miei collegamenti e la parte inferiore del testo.
Quindi questo è un po 'diverso.
Non sto dicendo di separare gli elementi,
sto dicendo che ho bisogno di più spazio tra il mio bordo e l'elemento stesso.
Quindi in questo caso, quello che vogliamo usare non è margine, vogliamo modificare il padding.
Quindi entriamo e vediamo dove pensiamo di farlo.
Va bene, quindi ho bisogno di aggiungere padding all'interno dell'intera intestazione.
Quindi andiamo qui e
ho intenzione di cambiarlo in, padding, ancora una volta puoi scegliere tutto quello che vuoi.
Puoi usare i pixel, puoi usare le percentuali.
Andrò avanti in questo caso, metterò solo i pixel.
E dirò per favore aggiungi 15 pixel di spazio tra il bordo e il fondo.
Quindi, aggiorna, oh, assicurati di risparmiare.
E aggiorna, e
puoi vedere che ho aggiunto il padding tutto intorno all'intera cosa.
Se davvero volessi solo che il padding fosse sul fondo,
avrei potuto dire padding bottom, o padding right, o padding left.
Va bene, andiamo avanti e modelliamo qualcos'altro.
Una delle grandi cose che ho cambiato è che invece di
averne uno sotto l'altro, ho cambiato questi in modo che siano uno accanto all'altro.
Quindi ricorda, per impostazione predefinita, le sezioni sono blocchi, sono blocchi di visualizzazione, il
che significa che non lasciare che nessun altro venga accanto a me.
Per cambiarlo in modo
che siano vicini l'uno all'altro, possiamo usare sia in linea che in linea.
Quasi sempre quando viene data questa scelta, userai in linea,
perché quando usi in linea, puoi includere un'altezza e una larghezza.
Va bene, torna al mio file CSS.
Non voglio cambiare l'intestazione.
Penso di essere abbastanza bravo con H1.
Il navigatore, l'H2, oh, sai una cosa?
Non ho niente che possa cambiare qui, quindi andiamo avanti e
inseriamo un nuovo tag.
Sezione, va bene, voglio tutte e tre queste sezioni l'una accanto all'altra.
Quindi quello che potrei fare è scegliere forse 400 pixel ciascuno.
Beh, questo significherebbe che il browser deve essere di almeno 1.200 pixel.
Potrei scegliere 150 pixel ciascuno.
Beh, questo significa che saranno molto magri anche se non ne hanno bisogno.
Quindi usiamo le percentuali.
Userò il 30%, non il 33%, perché voglio dare un po' di spazio al gomito per
imbottiture, margini, bordi
, ecc Va bene, andiamo avanti e guardatelo adesso, voglio vedere come sembra.
Si vede che ho fatto il 30%, ma non sono ancora l'uno accanto all'altro.
Questo perche' sono ancora bloccati.
Mettiamoli in blocco in linea, Display.
E speriamo per il meglio.
Ci siamo.
Ho tutte e tre le cose l'una accanto all'altra.
Ancora non sembra esattamente come vogliamo, ma è passo dopo passo.
Sta facendo questo piccolo progresso alla volta.
Vado avanti e sistemero' questo fatto che non sono tutti allineati in cima.
E dirò float: a sinistra; rinfrescare e ci stiamo avvicinando, ci
stiamo avvicinando, ma c'è ancora qualcosa di sbagliato qui.
Prima, sono schiacciati.
Non mi piacciono tutti schiacciati insieme.
Quindi, come separi diversi elementi l'uno dall'altro?
Come si aggiunge un po 'di spazio tra gli elementi?
Va bene, se fossimo in classe, avrei quella studentessa che e' tipo, ooh,
lo so, si', e' un margine, ok?
Margine, mettero' un margine solo su un lato, diciamo Margin-destra.
E lo rendero' qualcosa di piccolo tipo il 2%.
Va bene, ci stiamo avvicinando.
Ci stiamo avvicinando.
Ancora non proprio quello che volevamo, ma è così che funziona.
Aggiungi un po'.
Tu ti adegui.
Aggiungi un po'.
Quindi uno dei grandi problemi qui è che quando si galleggia le cose a sinistra, o
quando si galleggia le cose,
una volta che hai finito di galleggiare quando non si desidera che quei prossimi elementi galleggiino.
Devi davvero entrare e dire, oh, ma non voglio galleggiare questa parte.
Quindi una volta che abbiamo finito con queste tre sezioni,
non vogliamo che il piè di pagina sia anche loro accanto.
Quindi entriamo e aggiustiamo il codice del piè di pagina.
Quaggiù.
Va bene, se ti ricordi se non vuoi che le cose fluttuino accanto a te,
useremo chiaro: entrambi, il
che significa che non lasciare che nulla fluttui su entrambi i lati di me.
Oh, molto meglio, giusto?
Sembra molto, molto meglio.
E a parte il fatto che ho colori strani,
siamo molto vicini proprio qui.
A dire il vero mi piace il grigio sull'intestazione e il piè di pagina, quindi
lo lascio.
Ma quello che voglio fare, e' che voglio fare quella foto piu' piccola.
Questa piccola icona qui, facciamola sembrare un po' più simile a questa.
Ed e' molto semplice per l'approccio che useremo adesso.
Andiamo avanti.
Ho intenzione di aggiungere un'immagine.
E io vado avanti e lo scrivero' subito.
Quindi, lo farò 75 pixel.
Oops, devo dire larghezza:75px.
Diamo un'occhiata a come abbiamo fatto.
Si', sembra ok.
Se non mi piacesse e volessi giocarci, non entrerei qui a
provare 100 e poi 80 e poi 52.
Quello che farei è entrare qui e fare di nuovo Inspect Element.
E farei, oh, renderlo molto piu' grande perche' altrimenti tutto sembra davvero folle.
E andrei nell'immagine e
direi, ok come appare se invece lo facessi 150 pixel?
Ha un aspetto migliore?
O oops, non voglio farlo.
O cosa succede se lo faccio 125 pixel?
Mi piace questo?
Scegli un valore che ti piace e,
una volta trovato qualcosa che ti sembra bello, copialo nel foglio di stile.
Perché se lo aggiorno in questo momento, i miei valori degli elementi di ispezione scompaiono.
Va bene, entriamo qui, aggiustalo, salvalo e aggiorniamo.
Va bene, questo e' fantastico.
Queste sono le cose che voglio che tu faccia in questa classe.
Voglio che tu prenda un file HTML e dica ooh, posso cambiarlo in giro?
Cosa posso fare per renderlo diverso?
Chiaramente, questa pagina che abbiamo creato qui non è un prodotto finito.
Non e' esattamente come vorresti che fosse la' fuori sul web.
Quindi continueremo ad imparare cose nuove e
continueremo a disegnare le cose in modi diversi.
E mentre continui a praticare, sei sicuro e
le tue capacità cresceranno davvero.
Ed e' quello che voglio.
Voglio che la tua fiducia sia molto,
molto alta entro la fine della quarta settimana, che tu possa farlo.
Allora, buona fortuna.