Come convertire un Template PSD in HTML e CSS – Parte 2 – Banner e Container

Come convertire un Template PSD in HTML e CSS - Parte 2 - Banner e Container

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.

author avatar
Claudio Masci
Sono innanzitutto un appassionato di informatica e tecnologia in generale. Lavoro in ambito informatico da circa 16 anni, spaziando in diversi campi, andando dalla programmazione web, allo sviluppo di software, dalla grafica alla modellazione 3d ed al video editing, ho sempre voluto approfondire ogni aspetto e questo mi ha permesso di lavorare in diversi ambiti informatici.