Lab Web Prof.Di Blasi 2008

Laboratorio Informatico Web A.A. 2007/2008 di Davide Di Blasi Laboratorio Informatico Web 07/08

Promemoria per il Web ,[object Object],[object Object],Laboratorio Informatico Web 07/08

Passo n.1 ,[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08

Passo n.2 ,[object Object],Laboratorio Informatico Web 07/08 Dovrebbe apparire una maschera di input simile a questa: ti richiede di inserire il nome del sito, e l’eventuale indirizzo web (questo puoi anche non inserirlo.)

Passo n.3 ,[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08 FATTO!

Passo n.4 ,[object Object],[object Object],Laboratorio Informatico Web 07/08

Passo n.5 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08

Passo n.6 ,[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08

Passo n.7 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08

Passo n.9 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08 -> selettore universale -> selettore elemento html -> selettore elemento body

Passo n.10 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08 -> bordo rosso -> larghezza dei div (può variare) -> proprietà che permette di centrarli -> margine interno

Passo n.11 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08 Cosi facendo settiamo proprietà specifiche per ognuno dei div.

Passo n.13 ,[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08

Passo n.15 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08 La nostra lista adesso avra margine esterno 0, margine interno 5px, eliminiamo il punto lista con list-style:none, e un bordo verde, ma rimane disposta verticalmente…

Laboratorio Informatico Web 07/08 Passo n.17 Adesso che il contenuto del div header è stato modificato graficamente a nostro piacimento, inseriamo il contenuto nella pagina .html che verrà visualizzato nel div content: Iniziamo con un titolo di livello 1 <h1> il titolo della pagina</h1>

Laboratorio Informatico Web 07/08 Passo n.18 Inserito l’<h1> nel file .html, adesso possiamo modificare il suo aspetto grafico nel file .css: Inserisci un selettore di elemento h1 , e scrive la rule css per la formattazione del titolo; es.: h1 { font-size:32px; font-family:'Times New Roman', Times, serif; color:black; } Il titolo avrà ora quest’aspetto: Titolo del tuo sito web!

Passo n.20 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08 La proprietà float è fondamentale affinchè i due div vengano disposti uno accanto l’altro.

Passo n.21 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08 La proprietà float è fondamentale affinchè i due div vengano disposti uno accanto l’altro. Il margin-left serve a distanziare i due div.

Passo n.24 ,[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08

Passo n.30 ,[object Object],Laboratorio Informatico Web 07/08

Email ,[object Object],[object Object],[object Object],[object Object],Laboratorio Informatico Web 07/08

Lab Web Prof.Di Blasi 2008

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (12)

En vedette

En vedette (20)

Similaire à Lab Web Prof.Di Blasi 2008

Similaire à Lab Web Prof.Di Blasi 2008 (20)

Lab Web Prof.Di Blasi 2008