docEsercitazione 2 - Scienze Politiche
download 
Reclamo Transcript
Esercitazione 2 - Scienze Politiche
Università della Tuscia – L.M. in Comunicazione Pubblica, d'Impresa e Pubblicità
corso di Web Avanzato per la Comunicazione ed i Servizi (WACS) – Prof. F. Donini
Esercitazione n.2
1) Apri Visual Web Developer, e dal menù File, scegli Apri sito Web..., e alla finestra di scelta, seleziona il
sito Web salvato nella prima esercitazione (se non lo hai rinominato, dovrebbe ancora chiamarsi WebSite1,
oppure WebSite2, ecc.)
2) Dal menù File, scegli Nuovo File..., e tra i modelli che vengono presentati, scegli Foglio di stile (icona con
una “A” rossa). Nella parte sottostante della finestra, viene proposto per il file il nome StyleSheet.css;
rinomina il file con il nome mioStile.css
3) Nella finestra che appare, puoi inserire regole CSS; comincia scrivendo (ad es.) le seguenti:
body {
background-color: Aqua;
font-family: DejaVu Sans, Lucida Sans, Sans-Serif;
}
h1 {
text-align: center;
font-size: x-large;
}
Prova usando anche
altri colori, con i nomi o con
rgb(x%, y%, z%),
altre font tipografiche,
altre dimensioni,
fino ad ottenere un risultato che ti
soddisfa
4) Ora clicca sulla linguetta del primo file del tuo sito (miaHome.htm, o altro nome personale). Dal menù
Formato, scegli Associa foglio di stile... Nella finestra di scelta che appare, seleziona il file di stile appena
creato (mioStile.css, o il nome che gli hai dato). Nella finestra Progettazione, controlla l'effetto delle regole
impostate (sfondo celeste, font senza grazie, titolo al centro, ecc.)
Nota che nella finestra Origine, nell'intestazione del file <head>...</head> ora compare l'associazione
con il foglio di stile, nella forma <link href=”mioStile.css” rel=”stylesheet” ...>
10 mar 2011
Università della Tuscia – L.M. in Comunicazione Pubblica, d'Impresa e Pubblicità
corso di Web Avanzato per la Comunicazione ed i Servizi (WACS) – Prof. F. Donini
5) Passa ora al secondo file del tuo sito (quello con la tabella). Cambia TUTTI e SOLI i <td> che contengono
anni in <td class="primaColonna"> (nel file di esempio su Leonardo, ad esempio, l'elemento
<td>1452</td> diventa
<td class="primaColonna">1452</td>).
6) Aggiungi al file mioStile.css alcune regole relative alla tabella, ad es., le seguenti:
table {
border-width: thin;
background-color:Yellow;
}
th {
background-color: Orange;
}
table .primaColonna {
background-color: Silver;
}
Anche qui prova anche con altri colori,
ed altri spessori del bordo, fino ad
ottenere un risultato che ti soddisfa.
7) Aggiungendo class=”stacco” alle celle unite (quelle con <td colspan=”2”>) prova a dare uno
stile alle celle unite che metta il testo al centro, in grassetto (font-weight: bold). Verifica l'effetto
delle tue aggiunte sulla finestra Progettazione di curriculum.htm.
8) Inserisci adesso un'immagine nel documento miaHome.htm. Nella finestra origine, prima di </body>,
inserisci
<img src="200px-Leonardo_self.jpg" id="immagineLeonardo"
alt="Autoritratto di Leonardo" />
(l'immagine può essere scaricata dal sito del corso; puoi usare altre immagini personali, o scaricate da
internet). Verifica che nella finestra Progettazione l'immagine appaia.
9) Metti la parte sugli interessi personali (con la lista) tra <div id=”interessi”> e </div>,
(quest'ultimo deve trovarsi subito dopo </ul>) e l'immagine tra <div id=”ritratto”> e </div>.
10) Nel file mioStile.css, dài ora una posizione (impaginazione) agli interessi e all'immagine. Puoi usare le
seguenti regole:
div#interessi {
float:right;
}
div#ritratto {
float: left;
border-style: solid;
border-width: thick;
border-color: Red;
}
11) Visualizza il risultato nel browser Firefox (NON in Explorer). Identifica in alto la riga con i comandi
dell'estensione Web Developer (attenzione NON è Visual Web Developer di Microsoft, è un'estensione del
browser Firefox). Mentre visualizzi miaHome.htm, dal menù Strumenti (quello con una chiave inglese
accanto) seleziona prima Valida HTML salvato localmente, e poi Valida CSS salvato localmente. Se non
ottieni errori, puoi copiare il simbolo di XHTML valido e quello di CSS valido in fondo alla tua pagina.
12) Ripeti la validazione XHTML per la pagina curriculum.htm.
10 mar 2011
