slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
FORMATTARE LE LISTE DI LINK  MENU PowerPoint Presentation
Download Presentation
FORMATTARE LE LISTE DI LINK  MENU

Loading in 2 Seconds...

play fullscreen
1 / 18

FORMATTARE LE LISTE DI LINK  MENU - PowerPoint PPT Presentation


  • 103 Views
  • Uploaded on

SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU. FORMATTARE LE LISTE DI LINK  MENU. Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di collegamenti: <ul> <li><a href="…">Collegamento 1</a></li> <li><a href="…">Collegamento 2</a></li>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'FORMATTARE LE LISTE DI LINK  MENU' - ronia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
formattare le liste di link menu

SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

FORMATTARE LE LISTE DI LINK  MENU
  • Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di collegamenti:

<ul>

<li><a href="…">Collegamento 1</a></li>

<li><a href="…">Collegamento 2</a></li>

<li><a href="…">Collegamento 3</a></li>

<li><a href="…">Collegamento 4</a></li>

<li><a href="…">Collegamento 5</a></li>

</ul>

  • Tuttavia, il classico aspetto delle liste rende poco “attraente” un menu realizzato in questo modo
formattare le liste di link menu1

SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

FORMATTARE LE LISTE DI LINK  MENU
  • Per ottenere un menu verticale dall’aspetto 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; }

formattare le liste di link menu2

SECONDA PARTE: FORMATTARE LE LISTE DI LINK  MENU

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:activeper creare effetti roll-over senza utilizzare il javascript, con ovvi vantaggi
  • Avendo eliminato le varie proprietà della lista, per fornire l’aspetto desiderato al menu dovremo agire direttamente sui tag <a> e le loro pseudo-classi
a pseudoclasses
a:pseudoclasses
  • a:link viene usato per elaborare lo stile di un link non ancora visitato
  • a:active colore del link all’atto 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!
tag div e css

TAG <div> e CSS

Ricalcare la grgilia di impaginazione

una struttura per i contenuti

PRIMA PARTE: XHTML

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, l’elemento chiave è il tag <div>
  • Il tag <div> è un contenitore generico.
modello visuale di css box model
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 dall’alto 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 tipoblocco: le scatole sono poste l'una sopra l'altra in successione verticale (come paragrafi).
    • L’elemento 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.
modello visuale di css box model1
Modello visuale di CSS – Box Model
  • Flusso normale di tipoinline: le scatole sono poste l'una accanto all'altra in successione orizzontale (come parole della stessa riga)
  • Gli elementi stanno tutti uno accanto all’altro 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 ( <ul> e rispettivi <li>)
  • 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 ulil rispettivo selettore con la propertydisplay:inline;

li a {

color: white;

display:inline;

padding:10px;

font-weight: bold;

height: 40px;

line-height: 50px;

text-decoration: none;

}

modello visuale di css box model2
Modello visuale di CSS – Box Model
  • Flusso di tipofloat: 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 dall’alto verso il basso e lo si stesse posizionando sulla destra o sulla sinistra del foglio.
modello visuale di css box model3
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

A seguire: Un esempio di posizionamento (1) 20/35

un esempio di posizionamento 1
Un esempio di posizionamento (1)

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

il box model

PRIMA PARTE: IL BOX MODEL

IL BOX MODEL

Ogni box è caratterizzato da

  • Larghezza dello spazio per i contenuti (width)
  • Altezza dello spazio per i contenuti (height)
  • Spazio fra contenuti e bordi (padding)
  • Bordo (border)
  • Spazio fra il bordo e gli altri oggetti della pagina (margin)
il box model1

PRIMA PARTE: IL BOX MODEL

IL BOX MODEL

<div>Ex nostrum … </div><div>Indoctum … </div>

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

il box model2

PRIMA PARTE: IL BOX MODEL

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.
larghezza e altezza

PRIMA PARTE: IL BOX MODEL

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
larghezza e altezza1

PRIMA PARTE: IL BOX MODEL

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 un’immagine 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à
larghezza e altezza2

PRIMA PARTE: IL BOX MODEL

LARGHEZZA E ALTEZZA
  • Quando si specifica l’altezza 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 ‘%’, l’altezza di un box si riferisce all’altezza esplicitamente del box genitore, quando definita tramite la proprietà height