La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

FORMATTARE LE LISTE DI LINK MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste.

Presentazioni simili


Presentazione sul tema: "FORMATTARE LE LISTE DI LINK MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste."— Transcript della presentazione:

1

2 FORMATTARE LE LISTE DI LINK MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di collegamenti: Collegamento 1 Collegamento 2 Collegamento 3 Collegamento 4 Collegamento 5 Tuttavia, il classico aspetto delle liste rende poco attraente un menu realizzato in questo modo

3 FORMATTARE LE LISTE DI LINK MENU Per ottenere un menu verticale dallaspetto più accattivante a partire da una lista, come prima cosa dovremo letteralmente eliminare la formattazione a lista ul { margin:0; padding:0; } li { display:inline; } SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU

4 FORMATTARE LE LISTE DI LINK MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU Quando si usano i CSS per gestire un menu di collegamenti è possibile sfruttare le pseudo-classi a:link, a:visited, a:hover, a:active per creare effetti roll-over senza utilizzare il javascript, con ovvi vantaggi Avendo eliminato le varie proprietà della lista, per fornire laspetto desiderato al menu dovremo agire direttamente sui tag e le loro pseudo-classi

5 a:pseudoclasses a:link viene usato per elaborare lo stile di un link non ancora visitato a:active colore del link allatto del click. a:visited colore del link dopo averlo visitato A:active dovrebbero venire dopo gli a:hover (se presente) nella definizione CSS in modo da essere efficace!

6 TAG e CSS Ricalcare la grgilia di impaginazione

7 UNA STRUTTURA PER I CONTENUTI Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti), il linguaggio di marcatura ha il compito di realizzare la struttura in cui inserire i contenuti stessi Per raggruppare elementi da trattare come un oggetto unico, lelemento chiave è il tag Il tag è un contenitore generico. PRIMA PARTE: XHTML

8 Modello visuale di CSS – Box Model La visualizzazione di un documento con CSS avviene identificando lo spazio di visualizzazione di ciascun elemento del documento. Il flusso di dati è sempre dallalto verso il basso Ogni elemento è definito da una scatola all'interno del quale sta il contenuto. Le scatole sono in relazione alle altre come segue: Le scatole degli elementi contenuti stanno dentro alla scatole dell'elemento genitore. Flusso normale di tipo blocco: le scatole sono poste l'una sopra l'altra in successione verticale (come paragrafi). Lelemento che contiene le varie scatole, assume la dimensione massima data dalla somma delle dimenzioni degli elementi in esso contentui La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono.

9 Modello visuale di CSS – Box Model Flusso normale di tipo inline: le scatole sono poste l'una accanto all'altra in successione orizzontale (come parole della stessa riga) Gli elementi stanno tutti uno accanto allaltro su una linea orizontale. La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono. Si utilizza molto per orientare le voci di un menu, realizzato con una lista non odinata ( e rispettivi ) Di solito, per un menu orizzontale, si dichiara una lista non ordinata Si dichiarano le voci di menu (home, chi siamo, dove, contatti) come dei list item. Si associa ad un elemento li e ul il rispettivo selettore con la property display:inline; li a { color: white; display:inline; padding:10px; font-weight: bold; height: 40px; line-height: 50px; text-decoration: none; }

10 Modello visuale di CSS – Box Model Flusso di tipo float: le scatole sono poste all'interno del contenitore e poi spostate all'estrema sinistra o destra della scatola, lasciando che le altre scatole vi girino intorno. La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono. Dichiarando un elemento come float, è come se lo si staccasse dal normale flusso di lettura dei blocchi dallalto verso il basso e lo si stesse posizionando sulla destra o sulla sinistra del foglio.

11 A seguire: Un esempio di posizionamento (1)20/35 Modello visuale di CSS –Box model Alcune proprietà controllano il tipo di posizionamento e di scatola: DISPLAY ( inline | block | … | none ): il tipo di scatola da utilizzare per l'elemento: un blocco, un inline, una lista, una cella di tabella, ecc. POSITION ( relative ): il posizionamento rispetto al flusso del documento. FLOAT ( left | right | none ): un float è una scatola scivolata all'estrema destra o sinistra del contenitore muovendo le altre per farle posto. TOP, BOTTOM, LEFT, RIGHT: coordinate della scatola WIDTH, HEIGHT: dimensioni

12 A seguire: Un esempio di posizionamento (2)21/35 Un esempio di posizionamento (1)

13 IL BOX MODEL Ogni box è caratterizzato da 1.Larghezza dello spazio per i contenuti ( width ) 2.Altezza dello spazio per i contenuti ( height ) 3.Spazio fra contenuti e bordi ( padding ) 4.Bordo ( border ) 5.Spazio fra il bordo e gli altri oggetti della pagina ( margin ) PRIMA PARTE: IL BOX MODEL

14 IL BOX MODEL Ex nostrum … Indoctum … body { margin: 0; padding: 0; } div { width:300px; padding:10px; border:5px solid #600; margin: 20px; } Si noti che i margini superiori e inferiori adiacenti collassano PRIMA PARTE: IL BOX MODEL

15 IL BOX MODEL Internet Explorer per Windows versione 5.5 e precedenti ha un modo differente di interpretare il box model: anziché aggiungere il padding e il border alla larghezza dei contenuti, toglie spazio ai contenuti La larghezza totale del box (bordi e padding compresi) è pari al valore assegnato alla proprietà width. PRIMA PARTE: IL BOX MODEL

16 LARGHEZZA E ALTEZZA Se non si specifica la larghezza ( width ) dei contenuti del box, questo si allargherà (margini compresi) per riempire tutto lo spazio a sua disposizione Se non si specifica la altezza ( height ) dei contenuti del box, questo si espanderà in verticale il minimo possibile per ospitare gli oggetti al suo interno La larghezza e la altezza del box possono essere espresse: In percentuali rispetto alle dimensioni del box contenitore Tramite le unità di miusra em, px, ( ex, pt, mm ) Tramite il valore auto PRIMA PARTE: IL BOX MODEL

17 LARGHEZZA E ALTEZZA Quando si specifica la larghezza di un box, questa diviene indipendente dalla dimensione effettiva dei suoi contenuti Internet Explorer per Windows in realtà allarga il box quando i suoi contenuti (ad esempio unimmagine o una stringa molto lunga) eccedono la larghezza del box È possibile anche indicare una larghezza minima e una larghezza massima tramite le proprietà min-width e max- width, ma Internet Explorer (Win/Mac) non supporta tali proprietà PRIMA PARTE: IL BOX MODEL

18 LARGHEZZA E ALTEZZA Quando si specifica laltezza di un box questo non si espanderà per ospitare eventuali contenuti che richiedono maggiore spazio Per ottenere un simile comportamento esiste infatti la proprietà min- height, ma questa non è supportata né da Internet Explorer né da Safari. Esiste anche la proprietà max-height ma presenta le stesse incompatibilità di min-height A meno di altre dichiarazioni, IE/Win interpreta la proprietà height come fosse min-height Quando espressa in %, laltezza di un box si riferisce allaltezza esplicitamente del box genitore, quando definita tramite la proprietà height PRIMA PARTE: IL BOX MODEL


Scaricare ppt "FORMATTARE LE LISTE DI LINK MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste."

Presentazioni simili


Annunci Google