Erstellen Sie eine attraktive Illustrated Inhaltsverzeichnis für das Web

Längere Texte / Inhalte im Web sind durch ein Inhaltsverzeichnis serviert. Wie in einem Buch, sie erhöhen die Benutzerfreundlichkeit, indem Leser direkt zu bestimmten Abschnitten springen, anstatt mühsam den gesamten Artikel zu blättern, um etwas zu finden. Ein typisches Inhaltsverzeichnis eher langweilig, let's würzen Sie ein bisschen mit ein wenig Farbe und Illustration!

Hier ist, was wir aufbauen werden:

1. Source Material

Der Charakter Illustration verwenden wir ein Vektor Bild verfügbar von der Illustrator 9lives bei iStockphoto. Der Vektor-Datei wurde sehr gut integriert, so dass es leicht war, die Frau Grafik zu isolieren. Ich ließ es in Photoshop, um ihn an den genauen Pixelgröße resize ich wollte.

Von Photoshop, benutzte ich die "für Web-und Geräte speichern" Export-Option und rettete mit dem PNG-24-Option. Dies ist der Rahmen für eine vollständige 32-Bit-Alpha-transparente PNG. Der einzige Browser, der keine Probleme mit IE 6 dies haben wird, wenn das so sein wird ein Problem für Sie, sollten Sie sich entweder mit dem PNG-Hack suchen, speichern als GIF-oder PNG-8-Bit-statt, oder mit einem bedingte Stylesheet zu verstecken die Grafik aus IE 6.

2. Schreibe das HTML-Markup

Geschachtelte geordnete Listen sind die Fleisch von einem Inhaltsverzeichnis. Unsere Auszeichnungen werden diese zu benutzen, aber dann wickeln das Ganze in ein DIV wir verwenden, um die tan-Box zu erstellen. Wir werden auch einen traditionellen H1-Tag für eine Kopfzeile. 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> 

Beachten Sie, dass wir die Darstellung der Frau, fügen sich hier ganz oben auf und geben ihr eine einzigartige Klasse. Dies ist der Haken, die wir benutzen, um Ziel und ihre Position mit dem CSS. Dies ist auch der Haken Sie könnten in der bedingten Stylesheet verwenden, um ihr zu verbergen, wenn es sein muß.

In einer Live-Table of Contents würde, wird der Text in jedem Listenelement in ein Sprungnavigation sowie eingewickelt. Das href-Attribut wäre Hinweis auf einen Hash-Wert URL wie "# article-zwei", die bei Anklicken, würde direkt unten auf der Seite auf das Element, das war dieser ID. Am unteren Ende jedes Abschnitts können Sie auch machen "Back to Top" Links, die Verbindung zu # ToC, die Menschen wieder an den Tisch zu springen würde.

3. Die CSS

Das CSS ist auch ziemlich einfach. Ich werde nur zeigen Ihnen die ganze Sache, dann weisen darauf hin, ein paar Dinge unten.

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

Wichtige Hinweise:

- The # ToC ist sehr einfach gestaltet nur über einen Hintergrund-Farbe und ein einzelnes Pixel Rahmenfarbe. Browser-spezifischen Attribute hinzu, um den abgerundeten Ecken zu tun. Damit werden die Arbeiten und sehen toll aus in alle Mozilla-basierenden Browser (Flock, Firefox, etc.) sowie Webkit basierende Browser (Konqueror, Safari, etc.). Wenn Sie die Seite im IE 7 oder Opera, degradiert sie hübsch, nur um mit regelmäßigen quadratischen Ecken. Not a big deal.

- Die geordnete Listen weg sind von der linken Seite der Box geschoben (um Platz für die Darstellung zu machen) mit dem linken Rand. Die verschachtelte geordnete Listen haben auch einen linken Rand gesetzt, um einen kleineren Wert. Ohne diese würden sie immer noch eingerückt, sondern mit dem gleichen 100px das wäre zu weit. Beachten Sie auch auf der Unter-geordnete Listen der list-style wird sich lower-alpha. Dieser Schriftzug verwendet, anstatt der Nummerierung dann auf dem verschachtelten Listen, wodurch es leichter durchsuchen visuell.

- Weil die # ToC relative Positionierung angewandt hat, können wir absolute Positionierung auf dem. Frau Klasse verwenden, um diese Darstellung zu erhalten, wo wir es wollen. Nr. müssen über die Verwendung absolute Positionierung hier nervös, ist dies nicht für das Layout. Mehr über die absolute Positionierung in der relativen Positionierung.

Fertiges Produkt

VIEW DEMO

Download-Dateien