Advertisement
  1. Web Design
  2. Kids

Web Design per Bambini: Impaginazione CSS

by
Read Time:7 minsLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS
Web Design for Kids: Images

Italian (Italiano) translation by Luca Sartori (you can also view the original English article)

Benvenuti alla sesta lezione della nostra serie di Web Design per Bambini, Impaginazione con i CSS!

Qui è dove mettiamo tutti i nostri elementi esattamente dove li vogliamo sullo schermo. Useremo sia un file HTML che uno CSS per farlo.

Per dare una rinfrescata alla memoria, dai un'occhiata al sito che stiamo costruendo. I file di questo corso possono essere scaricati qui e non dimenticate di fare tutte le domande che hai nella sezione commenti in fondo a questa pagina.

Prima di Iniziare

Ci sono alcune cose che dobbiamo sapere prima di saltare dritti all'impaginazione(layout). In questa prima sezione vedremo come restare organizzati. Copriremo alcune nozioni di base per il posizionamento e parleremo di che tipo di proprietà CSS vengono utilizzate per il layout.

Ordine dei CSS

Tenere organizzato un documento CSS è molto importante. Una organizzazione corretta renderà più facile per noi trovare tutti i pezzi all'interno del nostro file, rendendo più semplice modificare e aggiungere cose più tardi. Parlando in generale, è meglio ordinare le nostre dichiarazioni CSS nell'ordine con cui prendono posto nella pagina.

Come esempio, in questa lezione aggiungeremo degli stili al main, Questo insieme di stili aggiunti su un così importante elemento dovrebbero essere inclusi nel nostro documento CSS prima di altri elementi che sono nidificati all'interno di main.

Il Box Model

Gli elementi HTML sono un po' come delle scatole rettangolari. Il box model dei CSS descrive la spaziatura tra queste scatole.

Ogni scatola ha quattro lati. Possiamo applicare un valore per tutti e quattro i lati in una sola volta nel nostro CSS attraverso padding, border e/o margin. Tuttavia, se vogliamo assegnare uno stile anche a un solo lato di un elemento, possiamo farlo. Per esempio:

Diciamo che questa scatola rosa rappresenti il testo. Possiamo vedere che l'imbottitura(padding) è stata aggiunta solo a sinistra e uno spesso bordo(border) blu copre tutti i quattro lati del contenuto.

Flexbox

I CSS ci forniscono un insieme di proprietà fatte soprattutto per aiutarci con il layout del nostro sito. Così mentre il box model contribuisce a spiegare la spaziatura attorno e all'interno degli elementi HTML, flexbox ci permetterà di spostare questi elementi in un determinato posto.

Quando usiamo flexbox su un elemento contenitore, questo elemento diventa un contenitore flex e tutti gli elementi all'interno di esso diventano elementi flex.

Quando applichiamo flexbox a un contenitore, questo disporrà automaticamente gli elementi su di una linea retta (in orizzontale) e quindi potremo approfondire in maggiore dettaglio con altre proprietà flexbox.

Non avremo bisogno di utilizzare flexbox troppo spesso per il nostro sito, ma è importante pensare a flexbox in quanto è considerato il modo più moderno e adeguato per posizionare piccoli pezzetti di contenuti su un sito web.

La Testata (Header)

L'h1 e l'immagine della città all'interno dell'header sono centrati sulla pagina. Ci sono un sacco di modi diversi per centrare qualcosa con i CSS, ma per ora useremo text-align: center; sull'header.

Punteremo all'header utilizzando il nome della classe che abbiamo aggiunto in precedenza:

Non dimenticare! Salva i documenti e aggiorna la pagina nel browser per vedere i nostri cambiamenti via via che li facciamo!

Sezioni (sections)

La primissima cosa che vogliamo fare alle nostre sezioni è quella di rendere il loro contenuto, l'immagine e l'elenco all'interno di ogni sezione, allineati uno accanto all'altro, piuttosto che impilati uno sopra l'altro.

Per raggiungere questo obiettivo utilizzeremo flexbox. Flexbox viene applicato agli elementi all'interno di un elemento contenitore mediante display: flex; sul contenitore:

Per riprendere ciò di cui abbiamo parlato in precedenza, l'immagine e il div che contiene l'elenco di negozi sono ora elementi flex, perché sono all'interno di questo contenitore flex.

Mentre ci sono molte opzioni per specificare esattamente dove dovrebbe andare un elemento, il comportamento predefinito di flexbox qui funziona perfettamente per quel che ci serve – e la lista dei nostri negozi ora resta a destra dell'immagine del negozio.

Una nota riguardo ai "Prefissi Vendor"

Poiché Flexbox è piuttosto recente, non tutti i browser hanno avuto la possibilità di includerlo correttamente. Per ovviare a questo problema, possiamo includere un prefisso fornitore(vendor prefix) per aggiungere al browser il supporto alla proprietà flexbox che al momento gli potrebbe mancare. Anche se ci siamo concentrati solo sulle versioni più recenti dei browser moderni per questo progetto, abbiamo ancora bisogno includere un vendor prefix -webkit- per assicurarci che flexbox funzioni su "Safari".

Immagini & Elenchi

Potremmo usare un po' di spazio tra l'immagine e l'elemento che contiene tutto il testo, così nel nostro HTML aggiungiamo una classe store-details al div che contiene il testo.

Dopo che abbiamo salvato possiamo passare al nostro CSS e aggiungere questa spaziatura, ma solo a sinistra del tag div:

Spaziatura predefinita delle liste

C'è della spaziatura a sinistra della lista non numerata del nostro negozio. Questo avviene perché ci sono alcuni stili predefiniti che vengono applicati di default a un elenco HTML. A volte questo stile di default ci può andare bene, altre volte può non produrre l'effetto che desideriamo.

Possiamo sbarazzarci di questa spaziatura predefinita utilizzando padding: 0; sull'elenco non ordinato, ma ciò porterebbe i punti troppo lontano sulla sinistra rispetto alle voci della nostra lista.

Ci serve un po' di padding, ma non tanto quanto viene fornito per impostazione predefinita all'elenco. Impostare una spaziatura interna sinistra(padding-left) a 15px sulla lista allinea abbastanza bene i nostri punti con le voci, quindi aggiungeremo questa proprietà alle cose che abbiamo già aggiunto all'elenco nella lezione precedente:

Spazio tra gli elementi dell'elenco

Abbiamo ancora da sistemare la questione che abbiamo accennato nella lezione precedente, ovvero gli elementi dell'elenco sono troppo vicini tra loro. Per risolvere questo problema andiamo ad aggiungere nel nostro codice HTML una classe store-name a tutti gli elementi <li> dell'elenco. Aggiungeremo quindi un piccolo margine in basso(bottom) su questi elementi.

Margini e centratura

Deve essere aggiunta una spaziatura alle sezioni, che devono essere anche centrate sulla pagina. Lo faremo attraverso le proprietà margin e width.

Ancora una volta, ci sarà l'aggiunta di styling che abbiamo già usato:

Il valore di 50px come margin indicato va a costituire la quantità di spazio nella parte superiore di ogni classe store-section. Con auto a seguito di questo, dice al browser di considerare la larghezza dell'elemento (che abbiamo impostato a 450px) e centrarlo nella finestra del browser automaticamente.

Piè di pagina

Per il nostro footer (piè di pagina) centreremo il testo e aggiungeremo una piccola quantità di padding per assicurarci che il testo non sia troppo attaccato ai suoi bordi.

Margine del corpo della pagina

Abbiamo parlato di stile di default mentre mettevamo a posto lo stile delle nostre liste. L'elemento body ha anch'esso degli stili applicati di default, uno di questi è il margin che circonda l'intera pagina. Mentre alle volte non è un problema, in questo caso impedisce al background-color del nostro footer di estendersi in larghezza da un lato all'altro della finestra del browser.

La soluzione è di fare un salto alle proprietà del body nel nostro documento CSS e aggiungere la seguente proprietà:

Conclusioni

In questo corso abbiamo messo in posizione tutti i nostri elementi con tecniche di layout CSS. Mentre di solito ci sono diversi modi per ottenere un determinato layout, prendere più confidenza con il box model e flexbox CSS fornisce una comprensione molto concreta a questi diversi approcci.

Poiché il nostro sito è completo (congratulazioni!) nelle lezioni a seguire ci troveremo a parlare del design, della tipografia e del colore. Questo ti aiuterà a diventare un web designer informato a tutto tondo.

Ci vediamo in città!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.