April 4
È possibile pagare qualcuno un buon prezzo per la progettazione di un grande layout per il sito web, oppure si può imparare a farlo da soli e salvare tutti i contanti! Un bel layout web pulito, professionale non deve essere grafico-intenso o complicato. Se si prende il tempo per imparare come codificare un layout sito web, sarà anche più ricco, nel senso che si dovrebbe avere una certa conoscenza preziosa che ogni webmaster vorrebbe. Ci sono programmi che rendono più facile per codificare un layout Web, ma si può anche farlo a mano senza troppa difficoltà.
1 Utilizzare Adobe Photoshop o Microsoft Paint per scegliere i colori esatti che si desidera utilizzare. Creazione di una visuale mock-up vi farà risparmiare la fatica di tentativi ed errori quando si sta facendo la codifica attuale e la progettazione. Guarda altri layout di siti web che ti piace di ispirazione.
2 Utilizzare la forma di rettangolo nel vostro programma di editing grafico e disegnare un rettangolo che è largo 900 pixel e alta almeno 600 pixel. Questo sarà il "contenitore" che conterrà tutti gli altri elementi del layout. Quando si codifica il layout che si sarà in grado di centrare il contenitore al centro dello schermo o tenerlo sopra a sinistra.
3 Disegnare un rettangolo orizzontale che si estende da una estremità della parte interna del contenitore all'altro. Questo rettangolo rappresenta l'intestazione. Disegnare una colonna sotto l'intestazione, larga almeno 150 pixel, con lo strumento rettangolo. Questo rappresenterà la vostra barra laterale. Disegnare un altro, più grande colonna accanto ad esso, che rappresenterà il vostro elemento contenuto principale. Le larghezze di questi due colonne più qualsiasi spazio tra di essi dovrebbero aggiungere fino alla larghezza del contenitore. Disegnare un altro rettangolo orizzontale sotto le due verticali per rappresentare il piè di pagina.
4 Aprire il programma di elaborazione testi. Aprire un documento vuoto e scrivere questo codice:
<Html>
<Head>
<Title> Il titolo della pagina web </ title>
</ Head>
<Body>
</ Body>
</ Html>
Salvare il documento con estensione file HTML o .PHP e caricarlo nella directory del tuo sito web.
5 Scrivi questo codice tra i tag <body> e </ body> tag:
<Div class = "contenitore">
<Div class = "header">
Il tuo Masthead o titolo
</ Div>
<Div class = "sidebar">
Side barra delle informazioni e il menu principale.
</ Div>
<Div class = "content">
Il contenuto principale.
</ Div>
<Div class = "footer">
informazioni piè di pagina.
</ Div>
</ Div>
Ciascuno dei tuoi rettangoli rappresentano i "div" o elementi separati del layout.
6 Utilizzare un .CSS (Cascading Style Sheet) file per la progettazione di ogni elemento e assegnare ad essi le loro dimensioni. Fare riferimento alla risorsa 1 come guida per la codifica di un file css. Utilizzare l ' "occhio contagocce" o strumento di color picker nell'editor grafico per ottenere i codici dei colori esadecimali utilizzate nel vostro mock-up. Dopo aver codificato il file .CSS, caricarlo nella directory del tuo sito web. Mettete questo codice da qualche parte tra i tag <head> e </ head> della pagina che hai fatto.
<Link rel = "stylesheet" type = "text / css" href = "yourstylesheet.css" />
Inserire il nome del file del file .CSS tra l'ultima serie di citazioni. Questo bit di codice "chiamata" il file css e dare il layout dello stile.