Qualcuno di voi ha inserito all'interno del sito una fotogallery?
Se si, avete qualche indicazione su come procedere perché ho provato ma non mi va!
Grazie dell'attenzione!
sabato 19 maggio 2012
mercoledì 16 maggio 2012
Valutazione Finale
Come indicato fin dal principio ricordo che il lab è una idoneità subordinata alla realizzazione del vostro progetto di sito internet. In questo post voglio rendere il più esplicito possibile, come già fatto a lezione, i criteri di valutazione del vostro lavoro. Non essendoci voto ci sono una serie di requisiti minimi che il vostro progetto deve avere per superare l’idoneità.
Con il vostro sito dovete dimostrarmi che possedete le seguenti competenze:
Grafica
- manipolazione grafica immagini livello base
- elaborazione immagini per il web
- manipolazione grafica immagini livello base
- elaborazione immagini per il web
Contenuti
- progetto di articolazione contenuti
- costruzione di un menu di navigazione
- inserimento contenuti nelle pagine
(il sito deve essere completo, anche scarno ma finito)
- progetto di articolazione contenuti
- costruzione di un menu di navigazione
- inserimento contenuti nelle pagine
(il sito deve essere completo, anche scarno ma finito)
Informatica
- corretto utilizzo dell’html livello base
- corretto utilizzo dei css livello base
- gesionte caricamento/aggiornamento sul server
- corretto utilizzo dell’html livello base
- corretto utilizzo dei css livello base
- gesionte caricamento/aggiornamento sul server
Nel momento in cui il sito soddisfa questi requisiti per me l’idoneità c’è. Comunico personalmente quando il sito è soddisfacente per l'idoneità.
martedì 15 maggio 2012
Indirizzi siti
http://www-utenti.dsc.unibo.it/~adarosa.civetta/ - OK
http://web.ddc.unibo.it/labwebdes/alessia.sarselli/ - OK
lunedì 7 maggio 2012
CSS all'opera: le proprietà di base
CSS all'opera: le proprietà di base
Gestione dello sfondo
Generalmente si inserisce un'immagine o un
colore di sfondo direttamente nel markup HTML. La scelta si restringe a due
elementi: il corpo principale della pagina (<body>)
o le tabelle.
Un'altra limitazione riguarda il comportamento delle immagini di sfondo in HTML:
esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire
l'intera area della finestra, del frame o della tabella. Questo ha favorito la
scelta di piccole texture in grado di dare la sensazione visiva
dell'uniformità. Grazie ai CSS questi limiti vengono spazzati via.
Ecco la lista delle proprietà per lo sfondo,
applicabili a tutti gli elementi:
·
background-color
·
background-image
·
background-repeat
·
background-attachment
·
background-position
Ciascuna di essa definisce un
solo, particolare aspetto relativo allo sfondo di un elemento.
background
Questa è la proprietà background. Con essa
possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere
valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte
le proprietà viste finora, ma deve contenere almeno la definizione del
colore di sfondo.
Sintassi
selettore { background: background-color
background-image
background-repeat
background-attachment
background-position;
}
I
valori non vanno separati da virgole. L'ordine non è importante, ma quello dato
è il più logico e andrebbe rispettato: si va in ordine di importanza.
background-color
Definisce
il colore di sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
selettore {background-color: valore;}
Valori
·
un qualunque colore
·
la parola chiave transparent
Usando transparent come
valore un elemento avrà come colore quello dell'elemento parente. Nell'esempio: il
colore di #div2 è impostato sutransparent, per cui esso sarà, per
l'appunto, trasparente, lasciando emergere il colore dell'elemento parente
(#div1).
Esempi
body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)
background-image
Definisce
l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non
è ereditata.
Sintassi
selettore { background-image: url(valore); }
Valori
·
un URL assoluto o relativo che punti ad un'immagine
·
la parola chiave none. Valore
di default.
Usare
none equivale a non impostare la proprietà:
nessuna immagine verrà applicata come sfondo.
Esempi
body {background-image: url(sfondo.gif); }
div body {background-image: url(http://www.server.it/images/sfondo.gif); }
Usando questa proprietà da
sola si ottiene lo stesso risultato che in HTML si aveva con l'attributo
background.background-repeat
Questa proprietà consente di definire la
direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata.
Sintassi
selettore {background-repeat: valore;}
Valori
·
repeat. L'immagine viene ripetuta in orizzontale e
verticale. È il comportamento standard.
·
repeat-x. L'immagine viene ripetuta solo in orizzontale.
·
repeat-y. L'immagine viene ripetuta solo in verticale.
·
no-repeat. L'immagine non viene ripetuta.
L'esempio riporta i quattro diversi
comportamenti con un'immagine di sfondo applicata ad una tabella.
Esempi
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }
Link utili:
CSS all'opera: le proprietà di base
CSS all'opera: le proprietà di base
Gestione dello sfondo
Generalmente si inserisce un'immagine o un
colore di sfondo direttamente nel markup HTML. La scelta si restringe a due
elementi: il corpo principale della pagina (<body>)
o le tabelle.
Un'altra limitazione riguarda il comportamento delle immagini di sfondo in HTML:
esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire
l'intera area della finestra, del frame o della tabella. Questo ha favorito la
scelta di piccole texture in grado di dare la sensazione visiva
dell'uniformità. Grazie ai CSS questi limiti vengono spazzati via.
Ecco la lista delle proprietà per lo sfondo,
applicabili a tutti gli elementi:
·
background-color
·
background-image
·
background-repeat
·
background-attachment
·
background-position
Ciascuna di essa definisce un
solo, particolare aspetto relativo allo sfondo di un elemento.
background
Questa è la proprietà background. Con essa
possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere
valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte
le proprietà viste finora, ma deve contenere almeno la definizione del
colore di sfondo.
Sintassi
selettore { background: background-color
background-image
background-repeat
background-attachment
background-position;
}
I
valori non vanno separati da virgole. L'ordine non è importante, ma quello dato
è il più logico e andrebbe rispettato: si va in ordine di importanza.
background-color
Definisce
il colore di sfondo di un elemento. Questa proprietà non è ereditata.
Sintassi
selettore {background-color: valore;}
Valori
·
un qualunque colore
·
la parola chiave transparent
Usando transparent come
valore un elemento avrà come colore quello dell'elemento parente. Nell'esempio: il
colore di #div2 è impostato sutransparent, per cui esso sarà, per
l'appunto, trasparente, lasciando emergere il colore dell'elemento parente
(#div1).
Esempi
body { background-color: white; }
p { background-color: #FFFFFF; }
.classe1 { background-color: rgb(0, 0, 0)
background-image
Definisce
l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non
è ereditata.
Sintassi
selettore { background-image: url(valore); }
Valori
·
un URL assoluto o relativo che punti ad un'immagine
·
la parola chiave none. Valore
di default.
Usare
none equivale a non impostare la proprietà:
nessuna immagine verrà applicata come sfondo.
Esempi
body {background-image: url(sfondo.gif); }
div body {background-image: url(http://www.server.it/images/sfondo.gif); }
Usando questa proprietà da
sola si ottiene lo stesso risultato che in HTML si aveva con l'attributo
background.background-repeat
Questa proprietà consente di definire la
direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata.
Sintassi
selettore {background-repeat: valore;}
Valori
·
repeat. L'immagine viene ripetuta in orizzontale e
verticale. È il comportamento standard.
·
repeat-x. L'immagine viene ripetuta solo in orizzontale.
·
repeat-y. L'immagine viene ripetuta solo in verticale.
·
no-repeat. L'immagine non viene ripetuta.
L'esempio riporta i quattro diversi
comportamenti con un'immagine di sfondo applicata ad una tabella.
Esempi
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }
Link utili:
Lista
Guida Layout dei siti con i CSS, lezione 41.
Layout monolitico fluido >> visualizza il css di questo layout >> /*stili per la navigazione*/
La LISTA si realizza nel modo seguente:
nella pagina HTML, inserire dopo il tag <div id=”...”>:
<div id="box3">
<ul>
<li>HOME</li>
<li>PHOTO GALLERY</li>
</ul>
Il tag <ul> apre la lista, mentre <il> viene inserito per creare le voci della navigazione, creando così una lista verticale, puntata.
Se vogliamo ottenere una navigazione inline, ovvero orizzontale, bisogna ridefinire il foglio di stile inserendo:
#navigation ul{margin: 0;padding: 0; list-style-type: none;}
#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
Per inserire i link nella navigazione, dobbiamo aggiungere il tag <href>, nella pagina html:
<div id="box3">
<ul>
<li><a href="index.html">HOME</a></li>
Di base, se creiamo un link abbiamo una formattazione standard, che ne definisce lo stile. Per eliminarla, torniamo sul foglio di stile ed inseriamo:
#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
#navigation a:hover{color: #fff;text-decoration: underline}
#navigation a#activelink{color: #033;text-decoration: none}
Il primo navigation definisce come si vedranno i link, quindi il colore, il font e la grandezza.
Il secondo navigation, riguarda il colore che il link assume quando ci passiamo sopra con il cursore del mouse. Per modificarlo, dobbiamo cambiare il codice cromatico seguente ad a:hover.
Layout monolitico fluido >> visualizza il css di questo layout >> /*stili per la navigazione*/
La LISTA si realizza nel modo seguente:
nella pagina HTML, inserire dopo il tag <div id=”...”>:
<div id="box3">
<ul>
<li>HOME</li>
<li>PHOTO GALLERY</li>
</ul>
Il tag <ul> apre la lista, mentre <il> viene inserito per creare le voci della navigazione, creando così una lista verticale, puntata.
Se vogliamo ottenere una navigazione inline, ovvero orizzontale, bisogna ridefinire il foglio di stile inserendo:
#navigation ul{margin: 0;padding: 0; list-style-type: none;}
#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
Per inserire i link nella navigazione, dobbiamo aggiungere il tag <href>, nella pagina html:
<div id="box3">
<ul>
<li><a href="index.html">HOME</a></li>
Di base, se creiamo un link abbiamo una formattazione standard, che ne definisce lo stile. Per eliminarla, torniamo sul foglio di stile ed inseriamo:
#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
#navigation a:hover{color: #fff;text-decoration: underline}
#navigation a#activelink{color: #033;text-decoration: none}
Il primo navigation definisce come si vedranno i link, quindi il colore, il font e la grandezza.
Il secondo navigation, riguarda il colore che il link assume quando ci passiamo sopra con il cursore del mouse. Per modificarlo, dobbiamo cambiare il codice cromatico seguente ad a:hover.
venerdì 4 maggio 2012
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; font:16px "courier New"; }
#content { background-color: green;}
#footer {background-color: black; }
#container {width: 960px; margin: 0 auto}
#header {background-color: red; }
#navigation { background-color: blue; color:white; font:16px "courier New"; }
#content { background-color: green;}
#footer {background-color: black; }
Iscriviti a:
Post (Atom)