Le caselle di InDesign sono semplici come fare clic e trascinare. I livelli di Photoshop consentono ai pittori di colorare i pixel ovunque preferiscano. Ma il layout con HTML e CSS è un gioco di nudging e cascading.

Succede ogni giorno: i direttori artistici esperti di Photoshop prendono in giro i progetti, affinando la loro spaziatura, scegliendo accuratamente i caratteri e i colori appropriati. Consegnano il loro lavoro a uno sviluppatore desideroso di HTML, che annuncia che il design impiegherà probabilmente giorni per trasformarsi in HTML / CSS funzionanti. Peggio ancora, apporteranno modifiche per tenere conto delle diverse dimensioni dello schermo. Il tempismo è un mistero per entrambe le parti. Ci vorrà lo sviluppatore un'ora o una settimana per trasformare il loro PSD in HTML / CSS funzionante?

I fondamenti del layout web - il possibile, il pratico, le possibilità - sono facili da comprendere. Come il design stesso, la comprensione dei principi aiuterà qualsiasi progettista a realizzare progetti migliori e ad accelerare il processo di costruzione di un sito.

Gli elementi di blocco si impilano, gli elementi in linea scorrono

Tutto in una pagina web, dai paragrafi alle immagini ai collegamenti al testo in grassetto, risiede in riquadri invisibili. Queste scatole sono disponibili in due varianti: blocco e in linea. La differenza tra inline e block sta nel loro comportamento.

• Gli elementi di blocco sono rettangoli. Amano riempire lo spazio orizzontale.
• Gli elementi in linea sono rettangolari, tranne per il fatto che possono essere avvolti.

Gli elementi di blocco si impilano uno sopra l'altro. A meno che non sia detto diversamente, occupano tutto lo spazio orizzontale possibile, spingendo tutto intorno a loro su o giù. Per la progettazione, gli elementi di blocco sono lo strumento di layout principale.

Gli elementi in linea si basano sulla formattazione del testo. Non interrompono il flusso del testo e le loro dimensioni si espandono per adattarsi al loro contenuto. Dire un elemento in linea per mantenere una larghezza di 200 pixel non funzionerà. Riempiendolo con il testo lo farà.

Di default, ogni elemento nel è un elemento in linea o di blocco. I progettisti possono cambiare la loro natura con un piccolo CSS, ad esempio trasformando una pila di elementi della lista (blocchi nativi) in una riga o una serie di collegamenti orizzontali (inline nativamente) in una pila verticale. Ciò significa che qualsiasi elemento visibile può essere usato per il layout. Se dovrebbero dipendere dal layout in questione.

Gli elementi di blocco nativi includono:

• divisioni
• I paragrafi

• elenchi
  • Articoli in una lista
  • Titoli

    -

  • tabelle
    Blocca citazioni

    Organizzatori in HTML5

    , ,
    Il corpo stesso

    Gli elementi incorporati includono:

    • Ancore (collegamenti ipertestuali)
    • Grassetto e
    • Corsivo e
    • immagini
    • citazioni
    • Digitare lo stile
    • Formare etichette
    • Sta a te

    Tag comuni che non sono né block né inline:

    • Il titolo del documento