LAB Web Design 2014

giovedì 24 aprile 2014

bottoni di menu immagini animati rollover

Ciao,
vi segnalo un tutorial per chi volesse avere delle immagini in rollover nei menu di navigazione.
http://www.w3facile.com/css-e-webdesign/bottoni-rollover-col-css.html
E' un po' avanzato ma non vi spaventate.
Chi vuole fare questa cosa ci si può mettere su al lavoro!
Se ne trovate altri in giro in rete provateli e segnalateli volentieri.
Buon lavoro.

P.S. Già che ci siamo vi segnalo anche questo http://www.w3facile.com/css-e-webdesign/css-sprite-rollover-immagini-menu.html

martedì 22 aprile 2014

Avanzamento Siti

50% - http://web.dfc.unibo.it/lab-web-design/luca.naldi6/
100% - http://web.dfc.unibo.it/lab-web-design/morena.abbagnato/
100% - http://web.dfc.unibo.it/lab-web-design/elisabetta.dimari/
100% - http://web.dfc.unibo.it/lab-web-design/federica.motteran/
100% - http://web.dfc.unibo.it/lab-web-design/roberto.neri4
100% - http://web.dfc.unibo.it/lab-web-design/sara.giorgi4/

100% - http://web.dfc.unibo.it/lab-web-design/margrethe.salvati/

venerdì 4 aprile 2014

Galleria di foto

A voi: maneggiare con cautela e perizia
http://lokeshdhakar.com/projects/lightbox2/

LETTERE ACCENTATE:
Per scrivere parole con accenti basta semoplicemente sostituire le lettere accentate con gli opportuni codici HTML. Esempi:

à à
è è
é é
ì ì
ò ò
ù ù
À À
È È
É É
Ì Ì
Ò Ò
Ù Ù

link di riferimento: http://www.fauser.edu/fau/html_htm/html4b.htm

mercoledì 26 marzo 2014

Siti Online

martedì 25 marzo 2014

Gestione sfondi

Lo sfondo potrà essere o UNIFORME oppure un' IMMAGINE (sfumata, texture, ecc...)

Tramite la guida di stile andiamo alla lezione 20:
http://www.html.it/pag/14225/gestione-dello-sfondo/

E' fondamentale sapere che il colore di sfondo è una proprietà del BODY, è assegnabile a qualsiasi DIV
e va perciò gestita dal foglio di stile.

Ecco la lista delle proprietà per lo sfondo, applicabili:

background-color
background-image
background-repeat
background-attachment
background-position

- Per una trovare una texture basta scrivere su google image ''texture siti web'
- Per quanto riguarda la trasparenza dei file invece bisogna ricordarsi che vanno salvati ESCLUSIVAMENTE in PNG

domenica 16 marzo 2014

Come creare il menu di Navigazione

Lla navigazione si realizza nel box <div id="navigation">NAVIGAZIONE</div> del nostro file .html. Davanti ogni parola del nostro menu mettiamo il tag a e con questo facciamo i link tra le pagine (es. <a href="#">Home </a>).

Quando dobbiamo scrivere link più complessi creiamo un unordered list <ul> </ul> nella sezione di navigazione nel file .html.

<div id="navigation">
	<ul>
	<li><a id="activelink" href="#">Home</a></li>
	<li><a href="#">Pillole</a></li>
	<li><a href="#">Contenuti</a></li>
	<li><a href="#">Grafica</a></li>
	<li><a href="#">Linguaggi</a></li>
	<li><a href="#">Webdesign</a></li>
	<li><a href="#">Software</a></li>
	</ul>
	</div>

E nel file .css coppiamo i seguenti “stili di navigazione” per personalizzare il menu:

/*stili per la navigazione*/

div#navigation ul{margin: 0;padding: 0; list-style-type: none;}

div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/

div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}

div#navigation a:hover{color: #fff;text-decoration: underline}

div#navigation a#activelink{color: #033;text-decoration: none}

Visto che il tag è a, le proprietà vanno messe dentro il tag navigation a. Tutti i link che sono dentro navigation son con queste proprietà.

"Margini" e "padding" sono le due proprietà usate per la spaziatura degli elementi in HTML. Il margine è lo spazio esterno dell'elemento e il padding invece è l'imbottitura, lo spazio all'interno dell'elemento.

I selettori:

- a:hover gestisce il comportamento del tag a quando ci siamo sopra il link con il mouse (cambiare colore, sottolineare, campiare l’imagine pulsante);

- a:activelink ci fa vedere che siamo già stati nella pagina del link.

Quando dobbiamo mettere imagini nel menu, si inserisce il tag dell’imagine nel documento .html

<img src="url" alt="some_text"> .