Creare un polo di attrazione Illustrated tabella dei contenuti per il Web

Gli articoli più lunghi / contenuti sul web sono ben serviti da un sommario. Come in un libro, che aumentano l'usabilità, consentendo ai lettori di passare direttamente alle sezioni specifiche, piuttosto che faticosamente scorrere l'intero articolo di trovare qualcosa. Un tipico Table of Contents piuttosto noioso, let's spice it up un po 'con un po' di colore e illustrazione!

Ecco cosa ci si baserà:

1. Materiale di

L'illustrazione personaggio che useremo è un'immagine vettoriale disponibile dal 9Lives illustratore su iStockPhoto. Il file vettoriale è stata costruita molto bene, quindi era facile isolare la donna grafica. Ho lasciato cadere in Photoshop per ridimensionare per l'esatta dimensione dei pixel che volevo.

Da Photoshop, ho usato l'opzione "Salva per Web e dispositivi" opzione di esportazione e salvato con il PNG-24 opzione. Questa è l'impostazione di un 32 full-alfa-bit PNG trasparenti. L'unico browser che non avranno alcun problema con questo è IE 6, quindi se questo sarà un problema per te, si dovrebbe esaminare sia utilizzando il Hack PNG, salvare come GIF o PNG a 8-bit, invece, o utilizzando un foglio di stile condizionale per nascondere la grafica di IE 6.

2. Scrivi il codice HTML

Nidificati elenchi ordinati sono la carne di un Indice. Il nostro codice utilizzerà tali, ma poi avvolgere il tutto in un DIV useremo per creare la casella di abbronzatura. Faremo anche utilizzare un tag H1 tradizionale per un colpo di testa. Semplice e pulito.

<div id="ToC"> <img src="images/woman.png" alt="" class="woman" /> <h1>Table of Contents</h1> <ol> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> <li>Article Subhead</li> </ol> </li> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> <li>Article Subhead</li> <li>Article Subhead</li> <li>Article Subhead</li> </ol> </li> <li>Article Heading</li> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> </ol> </li> </ol> </div> 

Si noti che si aggiunge l'illustrazione della donna qui a destra in alto e le danno una classe unica. Questo è il gancio che useremo per target e la sua posizione con il CSS. Questo è anche il gancio si può usare nel foglio di stile condizionale per nascondere il suo caso di necessità.

In un live Table of Contents, il testo all'interno di ogni elemento della lista sarà avvolto in un legame ancora così. L'attributo href sarebbe rivolto ad un valore di hash URL come "Articolo #-due", che, se cliccato, saltava giù la pagina per l'elemento che aveva tale ID. Nella parte inferiore di ogni sezione, si potrebbe anche fare "Back to Top" link che link # TOC, che saltava la gente torna a per la Table of Contents.

3. Il CSS

Il CSS è anche piuttosto semplice. Mi limiterò a mostrare tutta la faccenda, poi sottolineare un paio di cose qui di seguito.

 *    { margin: 0; padding: 0; } body    { font-size: 62.5%; font-family: Helvetica, sans-serif; padding: 50px; } #ToC    { background: #f4e5b1; border: 1px solid #b1a041; margin: 25px; -moz-border-radius: 12px; -webkit-border-radius: 12px; padding: 10px; width: 260px; position: relative; min-height: 320px; } h1    { font-size: 22px; margin: 5px 0 10px 75px; letter-spacing: -1px; } ol    { margin-left: 100px; font-weight: bold; letter-spacing: -1px; } ol ol    { margin-left: 20px; list-style: lower-alpha;} ol li    { font-size: 18px; margin: 3px 0;} ol li ol li   { font-size: 12px; } .woman    { position: absolute; top: -25px; left: -55px; } 

Cose da notare:

- Il sommario # è uno stile molto semplicemente usando solo un colore di sfondo e un colore unico confine pixel. Browser attributi specifici sono aggiunti a fare gli angoli arrotondati. Questo lavoro e guardare grande in tutti i browser basati su Mozilla (Flock, Firefox, ecc) così come browser basati Webkit (Konqueror, Safari, ecc.) Se si visualizza la pagina in Internet Explorer 7 o Opera, si degrada bene solo per avere regolari angoli quadrati. Non un grande affare.

- Gli elenchi ordinati sono allontanato dal lato sinistro della finestra (per fare spazio per l'illustrazione) con il margine sinistro. Gli elenchi annidati ordinato anche una serie margine sinistro, a un valore inferiore. Senza questo, sarebbero rientrati ancora, ma utilizzando la 100px stesso che sarebbe troppo lontano. Notare anche il sub liste ordinate il list-style è impostato su basso-alfa. Questo utilizza caratteri invece di numerazione poi nelle liste nidificate, il che rende più facile da navigare visivamente.

- Perché il # ToC ha applicato il posizionamento relativo, possiamo usare il posizionamento assoluto per la classe. Donna per ottenere tale illustrazione esattamente dove vogliamo. Non c'è bisogno di essere nervoso per usare il posizionamento assoluto qui, questo non è per il layout. Maggiori informazioni circa il posizionamento assoluto all'interno di posizionamento relativo.

Prodotto finito

Guarda le Demo

DOWNLOAD FILES