Skape en attraktiv Illustrated Innholdsfortegnelse for Web

Lengre artikler / innhold på nettet er godt tjent med en innholdsfortegnelse. Som i en bok, de øker brukervennligheten ved at lesere å hoppe direkte til bestemte deler, snarere enn møysommelig bla hele artikkelen for å finne noe. En typisk Innholdsfortegnelse ganske kjedelig, la oss krydre det opp litt med litt farge og illustrasjon!

Her er hva vi skal bygge:

1. Kildematerialet

Tegnet illustrasjon vi vil bruke er en vektor bilde tilgjengelig fra illustratør 9Lives på iStockphoto. Vektoren filen ble bygget svært godt, så det var lett å isolere kvinnen grafikken. Jeg slapp den i photoshop for å endre størrelsen til nøyaktig piksel størrelsen jeg ønsket.

Fra Photoshop, jeg brukte "Save for Web & Devices" eksportalternativ og lagres ved hjelp av PNG-24 alternativ. Dette er settingen for en full 32-bit alpha-transparente PNG. Den eneste nettleseren som vil ha noen problemer med dette er IE 6, så hvis det kommer til å bli et problem for deg, bør du se på enten ved å bruke PNG Hack, lagre som GIF-eller 8-bits PNG stedet, eller ved hjelp av en betinget stilark for å skjule grafikk fra IE 6.

2. Skrive HTML markup

Nestede bestilte lister er kjøtt av en innholdsfortegnelse. Vår markering vil bruke dem, men så pakk det hele i en DIV vi bruke for å lage brun boks. Vi vil også bruke en tradisjonell H1-kode for en overskrift. Clean and simple.

<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 at vi legger til illustrasjon av kvinnen her helt i toppen og gir her en unik klasse. Dette er kroken vi vil bruke til å målrette og plassere henne med CSS. Dette er også den nålen du kan bruke i den betingede stilarket å skjule henne om nødvendig.

I en direktesendt innholdsfortegnelse, ville teksten i hvert listepunkt være innpakket i et anker kobling i tillegg. Href-attributtet ville være å peke på en hash verdi URL som "# artikkel-to", som, når den klikkes, ville hoppe ned på siden til elementet som hadde denne IDen. Nederst i hver del, kan du selv lage "Back to Top" lenker som kobler til # innholdsfortegnelsen, noe som ville hoppe folk tilbake til innholdsfortegnelsen.

3. CSS

CSS er også ganske grei. Jeg skal bare vise deg hele greia, så påpeke et par ting nedenfor.

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

Ting å merke seg:

- Det # TOC er stylet veldig enkelt bare bruke en bakgrunnsfarge og et enkelt piksel kantfarge. Browser-spesifikke attributter legges til å gjøre det avrundede hjørner. Dette fungerer og ser flott ut i alle Mozilla-baserte nettlesere (Flock, Firefox, osv.) samt Webkit baserte nettlesere (Konqueror, Safari, osv.). Hvis du ser på siden i IE 7 og Opera, forringer det pent bare å ha vanlige kvadratiske hjørner. Not a big deal.

- De bestilte lister blir skjøvet vekk fra venstre side av boksen (for å gjøre plass til illustrasjonen) med venstre marg. Den nestede sortert listene har også en venstremarg sett, til en mindre verdi. Uten dette, ville de være innrykket enda, men bruker samme 100px som ville bli for langt. Også se på sub bestilt viser list-style er satt til lavere alpha. Dette bruker bokstaver i stedet for nummerering deretter på nestede lister, noe som gjør det enklere å bla visuelt.

- Fordi # innholdsfortegnelsen har relative posisjonering i kraft, kan vi bruke absolutt posisjonering på. Kvinne klassen for å få den illustrasjonen akkurat der vi vil ha det. Du trenger ikke å være nervøs om hvordan du bruker absolutt plassering her, dette er ikke for layout. Mer om absolutt posisjonering innenfor relative posisjonering.

Ferdig produkt

Se demo

LAST NED FILER