Creare un tavolo attraente Illustrato dei Contenuti per il Web

Tweet

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 a sezioni specifiche, piuttosto che faticosamente scorrere l'intero articolo di trovare qualcosa. Una tabella tipica dei contenuti piuttosto noioso, andiamo spezia esso su un po 'con un po' di colore e illustrazione!

Ecco ciò che andremo a costruire:

1. Materiale sorgente

L'illustrazione dei caratteri che verrà utilizzata è un'immagine vettoriale disponibile presso l'illustratore 9Lives su iStockPhoto . Il file vettoriale è stata costruita molto bene, quindi era facile isolare la donna grafica. L'ho lasciato cadere in Photoshop per ridimensionarla alle dimensioni in pixel esatta che volevo.

Da Photoshop, ho usato l'opzione "Salva per Web e dispositivi" esportazione e salvato utilizzando il formato PNG-24 opzione. Questa è l'impostazione per una full 32-bit alpha-trasparenti PNG. L'unico browser che avrà problemi con questo è IE 6, quindi se questo sarà un problema per te, si dovrebbe guardare in sia utilizzando il PNG Hack , il salvataggio in GIF o PNG 8-bit, invece, o utilizzando un foglio di stile condizionale per nascondere l'immagine da IE 6.

2. Scrivere il markup HTML

Annidati elenchi ordinati sono la carne di un sommario. Il nostro markup usare quelli, ma poi avvolgere il tutto in un DIV useremo per creare la casella tan. 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 dare qui una classe unica. Questo è il gancio che useremo per individuare e posizionare lei con il CSS. Questo è anche il gancio è possibile utilizzare nel foglio di stile condizionale per nascondere la sua se necessario.

In una tabella dal vivo dei contenuti, il testo all'interno di ogni elemento della lista sarebbe stata racchiusa in un link d'ancoraggio pure. L'attributo href dovrebbe essere rivolto ad un URL valore hash come "# article-due" che, se cliccato, saltava giù la pagina per l'elemento che aveva quel ID. Nella parte inferiore di ogni sezione, si potrebbe anche fare "Back to Top" links che puntano a # ToC, che saltava la gente torna al Sommario.

3. Il CSS

Il CSS è anche abbastanza semplice. Mi limiterò a mostrarvi il tutto, poi sottolineare alcune 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 ToC # è in stile molto semplicemente con un colore di sfondo e un unico colore per il bordo pixel. Browser attributi specifici vengono aggiunti a fare gli angoli arrotondati. Questo lavoro e guardare grande in tutti i browser basati su Mozilla (Flock, Firefox, ecc) così come browser basato su WebKit (Konqueror, Safari, ecc.) Se si visualizza la pagina in IE 7 o Opera, che degrada bene solo per avere regolari angoli quadrati. Non un grande affare.

- Le liste ordinate sono spinti lontano dal lato sinistro della finestra (per fare spazio per l'illustrazione) con margine sinistro. Il nidificata elenchi ordinati anche una serie sinistra margine, ad un valore inferiore. Senza questo, sarebbero ancora rientrata, ma utilizzando gli stessi 100px che sarebbe troppo lontano. Da notare anche nelle liste sub ordinato la list-style è impostato per abbassare-alfa. Questo utilizza caratteri invece di numerazione poi sulle liste nidificate, che rende più facile per sfogliare.

- Perché il ToC # ha posizionamento relativo applicata, possiamo usare il posizionamento assoluto sulla classe donna per ottenere che l 'illustrazione esattamente dove vogliamo.. Non c'è bisogno di essere nervoso sull'utilizzo di posizionamento assoluto qui, questo non è per il layout. Ulteriori informazioni posizionamento assoluto all'interno di posizionamento relativo .

Prodotto finito

VISUALIZZA DEMO

SCARICA FILE