foglio di stile di base

html, body {margin: 0; padding: 0 }
#container {width: 960px; margin: 0 auto}
#header {background-color: red; } 
#navigation { background-color: blue; color:white; }
#content { background-color: green;}
#footer {background-color: black; }

<div id="container">

<div id="header">TESTATA</div>
<div id="navigation">NAVIGAZIONE</div>
<div id="content">CONTENUTO</div>
<div id="footer">PIEDE</div>

</div>

Guide HTML + CSS

http://www.html.it/guide/guida-html/

http://www.html.it/guide/guida-css-di-base/

Come scaricarsi le immagini da google

Andate sul motore di ricerca di google immagini su ogni immagine c'è scritta la grandezza, bisogna cliccare sull'immagine, ma per visualizzare definitivamente l'immagine nella sua grandezza reale bisogna cliccare nuovamente su visualizza immagine.
Cosa importante ma da non sottovalutare: ogni immagine esiste sul web come un file con un indirizzo web.
Se voglio scaricarla nella sua grandezza reale devo fare salva con nome,
per visualizzare l'estensione dell'immagine basta andare su pannello di controllo --> opzioni cartella e spuntare "nascondi estensione file", se non la apro con il visualizzatore di windows ma la apro con gimp me la apre con la sua grandezza reale (GIMP ci dice sempre la grandezza dell'immagine),
per ridimensionarla vado su immagine --> scala immagine (la risoluzione degli schermi deve essere 72),
la catenella a destra in automatico fà in modo che si mantenga il rapporto tra altezza e larghezza,
infatti se un'immagine si vuole trasformare da lunga a quadrata dovrò tagliarne un pezzo.
Per confermare digito "scala", se sono furbo faccio salva con nome e la salvo aggiungendo "piccola" al nome per distinguerla dall'originale.
Mettiamo che mi serva per il sito un'immagine quadrata 200x200 per farlo correttamente la dovrò ritagliare (tool taglierino x intenderci) e farla perfettamente quadrata con lo strumento ritaglia, compaiono delle proprietà a sinistra (conviene farlo con dimensioni con un rapporto fisso 600 600) infine dò la conferma.

Come impostare il design di un sito

Come impostare il design di un sito

Per prima cosa occorre realizzare un abbozzo del sito utilizzando uno dei tanti programmi di grafica esistenti (nel nostro caso GIMP), in modo da avere un'idea di come sarà il nostro prodotto finale.
Detto questo andiamo ad aprire un file gimp di 72 megapixel, impostando le dimensioni della pagina a seconda delle nostre necessità (ad esempio una pagina corta avrà come dimensioni 960x600); una volta creata la pagina posizioneremo al suo interno tutti i nostri elementi (sfondo, immagini, testi, ecc.) ricordando che potremo poi eventualmente estenderli ed adattarli alla pagina web finale.

Osserviamo ora nello specifico come inserire nel nostro file ciascuno degli elementi sopra citati:

• SFONDO - se vogliamo realizzare uno sfondo in tinta unita utilizziamo lo strumento "secchiello"; una volta selezionato, facciamo click su uno dei due rettangoli (quello in primo piano) presenti poco più sotto all'elenco degli strumenti, in modo da poter scegliere la tonalità del colore che ci interessa (nella finestra delle tonalità sarà presente anche la notazione HTML del colore da noi scelto). Se invece vogliamo impostare un'immagine particolare come sfondo, vedi sez. IMMAGINI.

 N.B.: Se una volta realizzata la testata, la vogliamo uniformare con un unico sfondo, diverso da quello principale, dobbiamo cliccare su "livello" - "crea nuovo livello" e scegliamo il nuovo colore; fatto questo, nella colonna a destra (dove è rappresentato l'ordine gerarchico dei livelli) dobbiamo spostare questo livello sotto i livelli delle immagini / testi della testata, ma sopra il livello dello sfondo principale.

• IMMAGINI - per portare un'immagine nella nostra pagina grafica occorre aprirla in una seconda pagina gimp, selezionarla, copiarla e scegliere, dopo aver cliccato con il tasto destro del mouse nella nostra pagina principale, l'opzione "incolla come livello". Per scalare un livello (ad es. se l'immagine è troppo grande), lo selezioniamo nella colonna di destra e utilizziamo lo strumento "scala", facciamo click sull'elemento e lo riduciamo della misura desiderata.
• TESTI - per inserire dei testi nella nostra pagina dobbiamo utilizzare lo strumento "testo"; facciamo click sulla pagina e si aprirà una finestra dove potremo inserire il nostro testo. Nella colonna di sinistra sarà inoltre possibile apportare modifiche al tipo di carattere usato, alle sue dimensioni, al colore, ecc.

 

Come creare e salvare un file con Gimp

Come creare e salvare un file con Gimp

Come creare un file con Gimp? Per prima cosa clicco su Nuovo, immediatamente si apre una finestra con tutte le funzioni avanzate, tra cui la dimensione dell'immagine, fondamentale è la grandezza dell'immagine in quanto il programma vuole sapere la lunghezza e la larghezza di essa in pixel. Per comodità sceglieremo quasi sempre 960 x 600 cosi da avere un'immagine un po più larga e non molto alta. Importante è il fatto di accertarsi che nell'immagine vi siano sempre 72 dpi (punti per pollice) e che il colore sia sempre RGB (rosso, verde, blu) ovvero lo spazio colore dell'immagine.

Dopo aver inserito questi dati del file e aver cliccato su Ok comparirà lo spazio della grafica o dell'immagine alla quale andremo a lavorare. Per organizzare il lavoro al meglio è fondamentale regolare lo zoom in basso a sinistra e posizionare le finestre degli strumenti, sia per la creazione del nostro lavoro e sia per la gestione dei suoi livelli, ai lati dello schermo e lo spazio di lavoro al centro. Ma come si salva un file su Gimp? E' molto semplice, basta con lo strumento Pennello per esempio disegnare un disegno o una grafica sul foglio di lavoro e infine per salvare bisogna cliccare su Salva. Tutti i file grafici però possono essere molto complessi, come file immagini, scritte ecc... per salvarli con tutte le loro caratteristiche dobbiamo salvarli nel loro formato grafico nativo del programma. Il formato di Gimp è XCF, e solo questo formato permette di conservare la complessità del lavoro effettuato, tutti i lavori di grafica e design che andremo a fare, li salveremo in formato nativo, questo per appunto modificare o lavorare nuovamente sul file di Gimp. Altrettanto importante è la possibilità di salvare in un formato visibile a tutti gli altri programmi di visualizzazione immagini e grafica, come lo è per esempio Jpeg. Se ho bisogno di dare a qualcuno lo stesso file con la quale sto lavorando su Gimp, devo cliccare “Salva come”, selezionare il tipo di file, selezionare Jpeg e salvarlo sul desktop. Si tratterà di un file che basterà alla sola visualizzazione e non darà la possibilità di operare su di esso. E' necessario sapere che il Jpeg permette per mezzo di un algoritmo di compressione di fare delle immagini comprimendole in modo da regolare la dimensione fisica, ma lo fa perdendo delle informazioni e buttando via della qualità, la qualità va da 0 a 100, ma noi per il web generalmente utilizzeremo una qualità intorno ai 70. Con questo processo ho salvato il file sia con il suo formato nativo sia in Jpeg per la comunicazione esterna, e quindi posso vedere la grafica o l'immagine con un normale visualizzatore d'immagini e lo posso far vedere agli altri. Bisogna prestare molta attenzione attenzione a non lasciare il file per Gimp in Jpeg salvandolo sempre di nuovo con il suo formato nativo per poterci lavorare su.

Roberto Neri