Come convertire un Template PSD in HTML e CSS – Parte 2 – Banner e Container:In questo articolo vedremo come inserire L’immagine in evidenza della pagina ed il container con il contenuto principale.
Questo è il terzo video di questo corso, nel primo abbiamo creato il template su Photoshop, e nel secondo abbiamo iniziato a convertirlo in HTML e CSS.
In questo video inseriremo l’immagine di copertina della pagina, l’immagine e il testo dell’articolo.
Per l’immagine principale della pagina, imposteremo la larghezza in modo da averla al 100% delle dimensioni del dispositivo, mentre per l’altezza la lasceremo modificare in base alla larghezza.
Andremo inoltre a rimuovere qualsiasi margine e rientro laterale in modo da avere l’immagine che occupa l’intero spazio della pagina.
Per quanto riguarda invece il contenuto sotto l’immagine, che ipoteticamente è il contenuto principale della pagina, andremo a creare uno sfondo colorato, imposteremo dei rientri in modo da non farlo arrivare a toccare i bordi della pagina.
Inoltre utilizzeremo il Flex Design per affiancare i 2 div (immagine e testo).
Nel prossimo video, proseguiremo la creazione del contenuto principale della pagina, andando a migliorare l’aspetto grafico del testo.
Rispondi