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 Questo promemoria vuole essere una guida per l’organizzazione e creazione di pagine web. Vi assisterà in maniera dettagliata, passo per passo, dalla creazione della cartella principale, sino alla messa online. Laboratorio Informatico Web 07/08

Passo n.1 Crea una cartella sul desktop, nomila a tuo piacimento. Questa sarà la cartella principale del sito . All’interno crea due cartelle: img CSS Qui verranno inserite rispettivamente le immagini del sito e il file .css Laboratorio Informatico Web 07/08

Passo n.2 Apri il programma DREAMWEAVER (qualunque versione tu abbia), vai sulla barra dei menu -> sito -> nuovo sito 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 Le schermate successive ti chiederanno: Se vuoi usare una tecnologia server -> seleziona NO. Selezionare la cartella principale del sito (la tua è sul desktop ;-) ) Come ti connetti al server -> nessuno (none in inglese) Laboratorio Informatico Web 07/08 FATTO!

Passo n.4 Il sito è stato creato. Sulla barra destra, nella finestra ‘ file ’ di dreamweaver troverai la cartella principale, al cui interno ci saranno la cartella ‘ img ’ e quella ‘ CSS ’. Laboratorio Informatico Web 07/08

Passo n.5 Adesso è ora di creare la nostra prima pagina: il file index.html Sulla barra dei menu clicca su -> file -> nuovo. Qui si aprirà una maschera; seleziona: Categoria -> pagina di base Pagina di base -> HTML Inoltre, se è presente spuntare la casella “rendi xhmtl compatibile”. Laboratorio Informatico Web 07/08

Passo n.6 Creato il nuovo file, Dreamweaver ha inserito automaticamente l’ossatura della pagina: dichiarazione del DOCTYPE, elemento <html>, <head>, <title>, <body>. *ATTENZIONE! In alcune versioni di Dreamweaver è possibile che prima della dichiarazione del DOCTYPE inserisca anche questo: <? xml version="1.0" encod in g="UTF-8"?> cancellala! Potrebbe dare problemi con Internet Explorer 6 Laboratorio Informatico Web 07/08

Passo n.7 Crea il MARKUP strutturale (XHTML) della pagina web (i 3 div di classe wrapper che conterranno il resto del sito di class): <div id=“header” class=“wrapper”> </div> <div id=“content” class=“wrapper”> </div> <div id=“footer” class=“wrapper”> </div> Laboratorio Informatico Web 07/08

Passo n.8 Fermiamoci un attimo con l’XHTML e creiamo il nostro file css, che ci permetterà di modificare la struttura e l’apparenza grafica del sito: Sulla barra dei menu di Dreamweaver, seleziona file -> nuovo Qui si aprirà una maschera; seleziona: Categoria -> pagina di base Pagina di base -> CSS Laboratorio Informatico Web 07/08

Passo n.9 Crea le 3 rules base dei CSS : *{ margin:0; padding:0; } html { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif background:url(../img/nomeFIle.png) center top repeat-y; } body { width:100%; height:auto; } Laboratorio Informatico Web 07/08 -> selettore universale -> selettore elemento html -> selettore elemento body

Passo n.10 Crea la classe wrapper .wrapper { border:1px solid red; width:740px; margin:0 auto; padding:10px; } Laboratorio Informatico Web 07/08 -> bordo rosso -> larghezza dei div (può variare) -> proprietà che permette di centrarli -> margine interno

Passo n.11 Crea le rules per i selettori di id specifici: #header { width:760px; height:auto; Padding:0; } #content { height:550px; } #footer { height:70px; } Laboratorio Informatico Web 07/08 Cosi facendo settiamo proprietà specifiche per ognuno dei div.

Passo n.12 Per fare in modo che le rules css vengano applicate al markup XHTML, dobbiamo collegare i due file tramite un ‘ponte’; questo ‘ponte’ è rappresentato dall’ elemento <link>, che va inserito nella pagina .html, all’interno dell’elemento <head>. L’elemento <link> deve avere necessariamente 3 attributi: rel=“stylesheet” type=“text/css” href=“CSS/nomeFile.css” (percorso del file.css) <link rel="stylesheet" type="text/css" href="CSS/nomeFile.css" /> Laboratorio Informatico Web 07/08

Passo n.13 Se tutto funziona correttamente, adesso puoi inserire il contenuto della tua pagina nel file .html. Nel <div id=“header” class=“wrapper”> puoi inserire un’immagine che farà da sfondo, attenzione: l’immagine dovrà essere larga quanto il div header, quindi 760px. <img src=“nomeImmagine.png” width=“760” height=“200” alt=“immagine”/> Laboratorio Informatico Web 07/08

Passo n.14 Sempre nel file .html inseriamo all’interno di <div id=“header” class=“wrapper”> gli elementi che daranno vita al menu del sito : <ul id="menu"> <li><a href="index.html" title="torna alla home page">Home</a></li> <li><a href="pagina1.html" title="vai alla pagina 1">Pagina 1</a></li> </ul> Abbiamo inserito una ‘unordered list’ <ul> il cui id è menu con all’interno due o più ‘list item’ <li>, che contengono dei collegamenti esterni <a> Laboratorio Informatico Web 07/08

Passo n.15 La nostra lista sarà disposta verticalmente, con i collegamenti uno sotto l’altro.Noi vogliamo una barra di navigazione orizzontale. Per fare questa modifica grafica usiamo il file .css: Inseriamo una rule con il selettore di id menu: #menu { width:auto; height:auto; margin:0; padding:5px; list-style:none; border:1px solid green; } 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…

Passo n.16 Per ottenere il risultato voluto dobbiamo scrivere una nuova rule css, che modifica solo gli elementi <li> all’interno della <ul> il cui id è ‘menu’ : #menu li { display:inline; margin:0; padding:0 5px; } Laboratorio Informatico Web 07/08

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.19 Ritorniamo nel file .html e inseriamo il contenuto che verrà visualizzato nel div content: <div id=”leftbar"> Barra di sinistra </div> <div id=”main_content"> Contenuto principale </div> Laboratorio Informatico Web 07/08

Passo n.20 Grazie ai selettori di id leftbar e main_content possiamo modificare il loro aspetto grafico tramite i css nel file .css: #leftbar { border-right:1px dashed gray; width:130px; height:500px; padding:5px; float:left; } Laboratorio Informatico Web 07/08 La proprietà float è fondamentale affinchè i due div vengano disposti uno accanto l’altro.

Passo n.21 Ora modifichiamo la visualizzazione grafica del div main_content: #main_content { width:550px; height:500px; margin:0; padding:5px; float:left; margin-left:25px; } 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.22 Adesso creiamo una rule CSS per fare in modo che i paragrafi all’interno dei div leftbar e main_content, abbiano un margine esterno superiore e inferiore di 10px, e una grandezza del carattere di 12px: #leftbar p, #main_content p { margin:5px 0; font-size:12px; } Laboratorio Informatico Web 07/08

Passo n.23 Infine inseriamo un paragrafo nel div footer con il tuo nome e cognome, altre informazioni che credi importanti, e se sarà valido XHTML 1.0 Transitional, l’icona del W3C. Modifichiamo la formattazione del testo in questo paragrafo tramite un selettore css composto: #footer p { font-size:10px; } Il testo apparirà più piccolo rispetto il resto. Laboratorio Informatico Web 07/08

Passo n.24 Adesso è il momento di inserire gli ‘orpelli’ grafici al nostro sito: Iniziamo dal menu. Andiamo sul file .css, troviamo la rule il cui selettore è #menu, e inseriamo la proprietà: background:url( percorsoImmagine/nome.png ) top center no-repeat; Laboratorio Informatico Web 07/08

Passo n.25 Ora inseriamo un’immagine di sfondo al div content, lavorando sempre sul file .css, posizionandoci sulla rule il cui selettore di id è #content: background:url(../img/corpo_sfondo.png) top center no-repeat; Laboratorio Informatico Web 07/08

Passo n.26 Infine il div footer, posizioniamoci sulla rule il cui selettore è #footer background:url(../img/corpo_sfondo.png) top center no-repeat; Laboratorio Informatico Web 07/08

Passo n.27 Per ultimo andiamo a modificare le proprietà grafiche dei collegamenti con queste rule css: a:link{color:black; text-decoration:none} a:visited{color:black; text-decoration:none} a:hover{color:gray; text-decoration:underline} a:active{color:black; text-decoration:none} Laboratorio Informatico Web 07/08

Passo n.28 Non dimenticate di eliminare tutti i bordi che abbiamo usato fin’ora! Puoi modificare la formattazione dei vari elementi a tuo piacere: dimensioni del font, tipo di carattere, colore, margini etc… Laboratorio Informatico Web 07/08

Passo n.29 Adesso possiamo inserire dei paragrafi di testo a nostro piacimento nel div leftbar collegamenti ad altri siti che ci piacciono, e nel div main_content , delle immagini, collegamenti, filmati da youtube etc… Come inserisco un filmato da youtube nel mio sito web? Laboratorio Informatico Web 07/08

Passo n.30 Basta copiare e incollare il codice che trovate alla destra di ogni filmato sotto la parola ‘embed’… ;-) Laboratorio Informatico Web 07/08

Email Dubbi? Chiarimenti? Approfondimenti? [email_address] Laboratorio Informatico Web 07/08

Lab Web Prof.Di Blasi 2008

More Related Content

What's hot

Viewers also liked

Similar to Lab Web Prof.Di Blasi 2008

Lab Web Prof.Di Blasi 2008