Siti Web fluido altamente sono voluti perché consentono un utente estendere o ridurre una pagina utilizzando il loro browser web. È facile dimenticare che i visitatori non vedere sempre la stessa cosa che che il coder vede; creando così un design fluido risolve questo problema. Utilizzando HyperText Markup Language (HTML) in alleanza con Cascading Style Sheets (CSS), è possibile codificare il proprio layout fluido che sarà molto più flessibile rispetto all'utilizzo di tabelle HTML tradizionale.

Istruzioni

1

Considerare le implicazioni di un sito Web di fluido. Delineare il contenuto per vedere se può sopportare di essere allungato fuori di larghezza. In caso contrario, determinare come riorganizzare i dati, in modo che le tariffe bene su uno schermo flessibile.

2

Aprire una pagina web in un editor di testo HTML, ad esempio Dreamweaver e creare una voce di Cascading Style Sheet (CSS) in mezzo la "< testa >< / testa >" parte del codice. Qui puoi immettere il "< stile >< / stile >" tag e le regole che controllano il layout di pagina e rendono il design fluido. Inserire un elemento HTML e seguirla con apertura e chiusura tra parentesi. Per esempio:
< head >
< style >
corpo {}
< / stile >
< / head >

3

Aggiungere margin e padding valori alla regola di stile del corpo. Si consiglia di impostare questi valori in pixel a zero per ospitare diversi valori predefiniti del browser. Digitare la parola "margine" e "imbottitura", seguire ciascuno con due punti, immettere i valori zero e finire entrambe le regole con un punto e virgola. Per esempio:
Body {margin: 0; padding: 0;}

4

Mantenere fluido di testo della pagina, insieme con il layout, impostando la dimensione del carattere del corpo ad una percentuale. Inserire la parola "font" e assegnarlo al 100% per consentire un visitatore web di ridimensionare il testo sul loro display, se si preferisce. Per illustrare:
Body {font: 100%;}

5

Contenuto della pagina per renderlo prominente e distinguibili dallo sfondo. Tale scopo, aggiungere un'altra regola di stile ma in questo caso, scegliere una parola che identifica con precisione questa regola, come "contenitore". Precedere la regola con un segno di numero per indicare che si tratta di un "ID" e digitare la parola "larghezza" seguito dal valore 80 per cento. Questa percentuale crea un contenitore che è dell'80% della larghezza del browser e funziona bene per disegni fluidi. Per esempio:

contenitore {width: 80%;} 6

Centrare il testo della pagina aggiungendo un margine per la regola di stile "#container". A tale scopo, aggiungere un valore di pixel di margine "0 auto" per funzionare in combinazione con l'impostazione di larghezza. Per esempio:

contenitore {larghezza: 80; margin: 0 auto;} 7

Fornire un cuscino di spazio per il testo della pagina, in modo che è più interessante per i visitatori e più facile da leggere. Creare un'altra regola di stile, ad esempio "maincontent" e utilizzare un valore realizzabile come "20px 0" per indicare che le parti sinistra e inferiore sono rientrate da venti pixel. Per illustrare:

MainContent {padding: 20px 0;} 8

Applicare gli stili di "ID" al codice HTML del documento. Fare questo digitando due "< div id =" ">" righe di codice dopo il "< body >" tag body e, tra ogni segno di virgolette, immettere il nome delle regole CSS. Chiudere queste righe di codice con finale "< / div >" elementi. Lo stile "corpo" non richiede un tag "DIV". Per esempio:
< corpo >
< div id = "#container" >
< div id = "#maincontent" >
< / div >
< / div >

9

Digitare tutti il codice della pagina HTML, ad esempio intestazioni o paragrafi, tra l'apertura e la chiusura "< div >< / div >" tag. Salvare il file e utilizzare la funzione di "Anteprima" del tuo browser per visualizzare design fluido della pagina.