April 11
Purtroppo per i web designer, schermi di computer ancora sono disponibili in un'ampia varietà di forme e dimensioni, che rende difficile la creazione di un layout di pagina web che sembra sempre bene a tutti coloro che lo vedono. Questo è dove "il dimensionamento relativo" entra in gioco. Impostando pagine e alle sezioni larghezze di percentuali invece di un determinato numero di pixel, si contribuirà a garantire che il layout di pagina web si adatta a qualsiasi dimensione dello schermo o la risoluzione.
1 In un editor HTML o Testo normale come Blocco note, creare un nuovo file e inserire il seguente:
<HTML>
<Head>
</ Head>
<Body>
</ Body>
</ HTML>
Salvare il file come "filename.html".
2 Individuare il <head> e </ head> nel file HTML. Tra questi tag, inserire il seguente codice CSS:
<Style type = "text / css '>
<! -
body {width: 100%; background-color: # 000000;}
.container {width: 80%; background-color: #FFFFFF; margin: 10%; padding: 5px;}
.header {width: 100%;}
.main-content {width: 100%}
->
</ Style>
Questo indica al browser che mentre il corpo della pagina web occupa l'intero schermo, il contenitore all'interno del corpo manterrà il contenuto limitato al 80% al centro dello schermo. Poiché le sezioni .header e-content .main saranno all'interno del contenitore, vengono impostati a prendere 100% dello spazio del contenitore. Inoltre, crea un contenitore di contenuti su una pagina bianca sfondo nero per aiutarvi a vedere le dimensioni del contenitore migliore.
3 Individuare il <body> e </ body> tag. Tra questi tag, inserire il seguente codice HTML:
<Div class = "contenitore">
<Div class = "header"> <h1> Web titolo della pagina </ h1> </ div>
<Div class = "-contenuto principale"> contenuto della pagina </ div>
</ Div>
Questo dice al browser l'ordine in cui visualizzare gli elementi della pagina nidificati definiti dal codice CSS.
4 Salvare il file HTML e visualizzarlo nel browser Web. Prova a cambiare la dimensione della finestra del browser per vedere come si comporta la pagina web. La larghezza del layout di pagina cambierà per adattarsi diverse dimensioni del suo navigatore.