lab web prof.di blasi 2008

Laboratorio Informatico Web

A.A. 2007/2008di Davide Di Blasi

Laboratorio Informatico Web 07/08 1

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.


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 CSSQui verranno inserite rispettivamente le

immagini del sito e il file .css


Passo n.2

Apri il programma DREAMWEAVER (qualunque versione tu abbia), vai sulla barra dei menu -> sito -> nuovo sito


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:1. Se vuoi usare una tecnologia server -> seleziona NO.2. Selezionare la cartella principale del sito (la tua è sul desktop ;-) )3. Come ti connetti al server -> nessuno (none in inglese)


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’.


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:1. Categoria -> pagina di base2. Pagina di base -> HTML

Inoltre, se è presente spuntare la casella “rendi xhmtl compatibile”.


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" encoding="UTF-8"?> cancellala! Potrebbe dare problemi con Internet Explorer 6


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>


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:1. Categoria -> pagina di base2. Pagina di base -> CSS


Passo n.9

Crea le 3 rules base dei CSS:*{margin:0;padding:0;}html{margin:0;padding:0;font-family:Arial, Helvetica, sans-serifbackground:url(../img/nomeFIle.png) center top repeat-y;}body{width:100%;height:auto;}


-> 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;}


-> 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;}


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:

1. rel=“stylesheet”2. type=“text/css”3. href=“CSS/nomeFile.css” (percorso del file.css)

<link rel="stylesheet" type="text/css" href="CSS/nomeFile.css" />


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”/>


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>


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;

}


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;

}



Passo n.17Adesso 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>


Passo n.18Inserito 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>


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;}


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;

}


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;

}


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.


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;


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;


Passo n.26

Infine il div footer, posizioniamoci sulla rule il cui selettore è #footer

background:url(../img/corpo_sfondo.png) top center no-repeat;


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}


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…


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?


Passo n.30

Basta copiare e incollare il codice che trovate alla destra di ogni filmato sotto la parola ‘embed’… ;-)


Email

Dubbi?

Chiarimenti?

Approfondimenti?

[email protected]


lab web prof.di blasi 2008

Technology