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; }
mercoledì 2 maggio 2012
Layout
Le sezioni logiche di una pagina web
L' header (testata)
Generalmente l'header si estende orizzontalmente per tutto lo spazio a disposizione del layout. In verticale l'header si dovrebbe estendere per circa 80, 100 o massimo 150 pixels. È fondamentale anche in questa sezione il contenuto: che sia grafico o testuale, l'header dovrebbe riportare il nome del sito e una sorta di descrizione o sottotitolo.
È poi diffusa la buona pratica che l'header, oltre che a essere un titolo, sia anche un link che punti alla home page, cosicché da qualsiasi pagina interna del sito, oltre che dal menu di navigazione, sia possibile con un solo click ritornare alla pagina iniziale.
La navigazione
La navigazione, anche detta menu è una sezione indispensabile di ogni sito, in quanto permette di accedere ai contenuti. La navigazione principale dovrebbe essere ben visibile, leggibile e distinguibile dai contenuti, e un buon sito internet dovrebbe poter consentire di accedere da ogni pagina a tutte le altre pagine senza troppi click e soprattutto senza l' uso dei tasti "indietro" e "avanti" del browsers. È importante ricordare all' utente dove si trova, evidenziando in qualche modo la pagina o sezione corrente.
La sezione dei contenuti
È questa la parte principale di un sito. Se è vero che un buon layout e una buona grafica possono fare la differenza al primo impatto, quello che davvero attira un visitatore dopo un primo sguardo sono i contenuti.
Il footer (pie' di pagina)
Il footer è generalmente una piccola sezione disposta a fondo pagina e contiene informazioni sullo sviluppatore del sito, sul copyright, i contatti di posta elettronica ed eventualmente indirizzo e numero di telefono se il sito riguarda un'azienda. Il footer dovrebbe essere presente in ogni pagina, ben distinguibile e discreto. A mio avviso, non dovrebbe essere spazialmente più grande dell'header.
Esistono varie tipologie di layout. Prendiamo in considerazione il layout monolitico.
Layout monolitico
Il laoyout monolitico si compone di quattro sezioni fondamentali:
- header
- navigazione
- contenuti
- footer
Il codice HTML
Ecco il codice HTML di base, per ora senza contenuti:
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
Per contenere le sezioni principali, ho dichiarato un div con id container. È fondamentale: il suo scopo è infatti modificare l'estensione orizzontale in maniera facile attraverso poche e semplici regole CSS, come spiegato nella parte introduttiva della guida.
Esempio di layout monolitico:
Nel foglio di stile trascrivo questo per collegarlo con la pagina di riferimento:
#container
{ }
#header { }
#navigation { }
#content { }
#footer { }
Link utilli
Nel foglio di stile trascrivo questo per collegarlo con la pagina di riferimento:
#container
{ }
#header { }
#navigation { }
#content { }
#footer { }
#header { }
#navigation { }
#content { }
#footer { }
Link utilli
Id e classi: due selettori speciali
In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id.
In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento, mentre la classe presente nel CSS formatterà allo stesso modo il testo dei paragrafo, del div e della tabella.
Classe
Sintassi di base (nome preceduto da un semplice punto): .nome_della_classe
Un selettore classe così definito può essere applicato a tutti gli elementi di un documento (X)HTML.
ID
La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #: #nome_id
Se l'id è univoco non abbiamo alcun bisogno di distinguere l'elemento cui verrà applicata. Inoltre: la sintassi generica si rivela più razionale e utile. Se si dichiara un ID semplice è possibile assegnarlo a qualunque tipo di elemento. Posso usarlo su un paragrafo, ma se poi cambio idea posso passare tranquillamente ad un div senza dover modificare il foglio di stile. Usando la seconda sintassi, invece, sono costretto a rispettare l'elemento definito nel selettore.
Box Model
IL BOX MODEL
Una pagina (X)HTML è un insieme di box rettangolari, che si tratti di elementi blocco o di elementi inline non fa differenza. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model.Varie componenti del box model:
- l'area del contenuto. È la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà
width. Quelle verticali conheight. - il padding. È uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.
- il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
- il margine. È uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.
Esistono 3 proprietà fondamentali: altezza, larghezza e posizione.
Gestione delle dimensioni: altezza
height
Questa proprietà definisce la distanza tra il bordo superiore e quello inferiore di un elemento.
selettore {height: valore;}
Valori
- un valore numerico con unità di misura.
- un valore in percentuale. Il valore in percentuale si riferisce sempre all'altezza del blocco contenitore, purché esso abbia un'altezza esplicitamente dichiarata. Diversamente, la percentuale viene interpretata come
auto. - auto. L'altezza sarà quella determinata dal contenuto.
Gestione delle dimensioni: larghezza
width
selettore {width: valore;}
Valori
- auto. Valore di default. Se non si impostano margini, bordi e padding la larghezza dell'elemento sarà uguale all'area del contenuto dell'elemento contenitore.
- un valore numerico con unità di misura.
- un valore in percentuale. La larghezza sarà calcolata rispetto a quella dell'elemento contenitore.
I Margini
Sono cinque le proprietà con cui è possibile definire un margine (margin-bottom, margin-left, margin-right, margin-top, margin). Quattro di esse sono singole e impostano la distanza per ciascun lato del box. L'ultima,margin, è una proprietà a sintassi abbreviata utile per definire con una sola dichiarazione tutte le impostazioni per i quattro lati.
Iscriviti a:
Post (Atom)