Maak een aantrekkelijke Geïllustreerde Inhoudsopgave voor het web

Langere artikelen / inhoud op het web zijn goed bediend door een inhoudsopgave. Net als in een boek, ze verhogen de bruikbaarheid doordat lezers om rechtstreeks naar specifieke onderdelen, in plaats van moeizaam het hele artikel gaat u om iets te vinden. Een typisch Inhoudsopgave nogal saai, laten we het kruid een beetje met een beetje kleur en illustratie!

Hier is wat we zullen bouwen:

1. Bronmateriaal

Het karakter illustratie zullen we gebruik maken is een vector afbeelding beschikbaar van de illustrator 9Lives op iStockphoto. De vector bestand is zeer goed gebouwd, zodat het makkelijk was om de vrouw grafische isoleren. Ik liet het in Photoshop om het formaat van de exacte pixelgrootte ik wilde.

Van Photoshop, gebruikte ik de "Save for Web & Devices" export optie en opgeslagen met behulp van de PNG-24 optie. Dit is de setting voor een volledige 32-bit alpha-transparante PNG. De enige browser die geen problemen zal hebben met dit is IE 6, dus als dat gaat een probleem voor u, moet u kijken naar ofwel met behulp van de PNG Hack, opslaan als een GIF-of PNG-8-bit in plaats daarvan, of met behulp van een voorwaardelijke stylesheet te verbergen de afbeelding van IE 6.

2. Het schrijven van de HTML-opmaak

Geneste besteld lijsten zijn het vlees van een inhoudsopgave. Onze opmaak zal gebruik maken van deze, maar dan wikkel het hele ding in een DIV we gebruiken om de tan vak te maken. We zullen ook gebruik maken van een traditionele H1-tag voor een header. Schoon en simpel.

<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> 

Merk op dat voegen we de illustratie van de vrouw hier aan het begin en geven hier een unieke klasse. Dit is de haak we zullen gebruiken om doelgroep en haar positie met de CSS. Dit is ook de haak je zou kunnen gebruiken in de voorwaardelijke stylesheet om haar te verbergen indien nodig.

In een live Inhoudsopgave zou de tekst binnen elk item in de lijst worden verpakt in een anker link als goed. Het href attribuut zou wijzen op een hash-waarde URL zoals "# article-twee" die, wanneer geklikt, zou springen op de pagina naar het element die had dat ID. Aan de onderkant van elk onderdeel kon je zelfs te maken "Terug naar de Top" links die verwijzen naar # TOC, die zou springen om mensen weer aan de inhoudsopgave.

3. De CSS

De CSS is ook vrij eenvoudig. Ik zal gewoon tonen u de hele zaak, dan wijzen op een paar dingen hieronder.

 *    { 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; } 

Dingen om op te merken:

- De # ToC is heel eenvoudig gestileerd alleen met behulp van een achtergrondkleur en een enkele pixel border kleur. Browser-specifieke attributen zijn toegevoegd om te doen de afgeronde hoeken. Dit zal werken en er fantastisch uitzien in alle Mozilla-gebaseerde browsers (Flock, Firefox, enz.) evenals Webkit gebaseerde browsers (Konqueror, Safari, enz.). Als u de pagina bekijken in Internet Explorer 7 of Opera, degradeert het mooi gewoon om dat regelmatig vierkante hoeken. Not a big deal.

- De bestelde lijsten weg zijn geduwd vanaf de linkerkant van de doos (om ruimte voor de illustratie) maken met linkermarge. De bestelde geneste lijsten hebben ook een linkermarge ingesteld, een kleinere waarde. Zonder deze zouden ze worden nog steeds ingesprongen, maar met dezelfde 100px dat zou te ver. Merk ook op de onderdelen besteld worden de list-style is ingesteld op een lagere-alfa. Deze maakt gebruik van letters in plaats van de nummering vervolgens op de geneste lijsten, die het gemakkelijker maakt visueel te bladeren.

- Omdat de # TOC is relatieve positionering toegepast, kunnen we op de absolute positionering. Vrouw klas te krijgen dat illustratie precies waar we willen. Niet nodig om zenuwachtig te worden over het gebruik van absolute positionering hier, dit is niet voor layout. Meer over absolute positionering binnen relatieve positionering.

Eindproduct

Demo bekijken

DOWNLOAD FILES