Come creare un layout Web Fluid

November 15

Come creare un layout Web Fluid


layout web fluidi si riferiscono alla capacità di un sito web per compilare il 100 per cento di schermo di un browser web a prescindere dalla risoluzione dello schermo, o il dispositivo su cui i visitatori vedono (come PDA o smart phone). Questo articolo vi darà i passi base per creare un layout fluido a tre colonne standard.

istruzione

1 Come creare un layout Web Fluid

Creare l'HTML di base per la tua pagina web. Nel tag <head>, aggiungere un tag <link> che fa riferimento il file CSS esterno. Utilizzare <div> tag per definire intestazione del sito (che conterrà il titolo del sito e la navigazione in alto), piè di pagina, e la sinistra, il centro e le colonne giusto contenuto. Assicurarsi che <div> tag vostra colonna sono elencati nell'ordine che compaiono nell'immagine, oppure le colonne galleggianti verranno visualizzati nella posizione sbagliata quando si visualizza la pagina in un browser.

2 Come creare un layout Web Fluid


Creare un file CSS esterno con lo stesso titolo definito al punto 1. Impostare i margini html e imbottitura a "0" Questo assicura che i <div> elementi appropriati si espanderà su tutta la schermata del browser.

3 Come creare un layout Web Fluid


Creare l'intestazione CSS. Si desidera che il colpo di testa di occupare l'intera larghezza dello schermo, in modo da non si specifica una larghezza. I browser renderanno la larghezza del 100 per cento per impostazione predefinita. Utilizzare "em" per "imbottitura" piuttosto che pixel fissi in modo che l'imbottitura si adatta in modo fluido a schermo dell'utente.

4 Come creare un layout Web Fluid


Creare elementi CSS per i vostri tre colonne. Nella colonna di sinistra, aggiungere un "float: left;" elemento e rendere la larghezza "200px". Nella colonna di destra, impostare "float" a "destra" e rendere la larghezza "200px". I galleggianti assicurano che le colonne di sinistra e destra rimangono a sinistra e destra rispettivamente. Nella colonna centrale, impostare i margini destro e sinistro a "215px" in modo da mantenere tutti e tre colonne <div> tag allineate orizzontalmente.

5 Come creare un layout Web Fluid


Creare il CSS piè di pagina. CSS per il piè di pagina è la stessa intestazione, tranne che è necessario aggiungere un "clear: both;" elemento ad esso. Questo costringe il piè <div> di rendere sempre nella parte inferiore di una schermata del browser, e assicura che nessuna colonna <div> tag rendering a sinistra oa destra.

6 Aprire il file HTML in un browser Web. Anche se questo layout fluido funziona in Firefox e Internet Explorer 8, testare il tuo sito web in quanto molti browser come si può garantire che il maggior numero possibile di essi possono visualizzare.