Δημιουργήστε ένα ελκυστικό Εικονογραφημένη πίνακα περιεχομένων για το Web

Μεγαλύτερα άρθρα / περιεχόμενο στο διαδίκτυο εξυπηρετούνται καλά από έναν πίνακα περιεχομένων. Όπως και σε ένα βιβλίο, που αυξάνουν τη χρηστικότητα επιτρέποντας στους αναγνώστες να μεταβείτε απευθείας σε συγκεκριμένα τμήματα, και όχι κόπο μεταβείτε ολόκληρο το άρθρο για να βρούμε κάτι. Ένα τυπικό πίνακα περιεχομένων μάλλον βαρετό, ας το μπαχαρικό επάνω λίγο με λίγο χρώμα και εικόνα!

Εδώ είναι αυτό που θα βασίζεται:

1. Πηγή Υλικό

Η εικονογράφηση χαρακτήρας θα χρησιμοποιήσουμε είναι μια εικόνα φορέα διατίθενται από το 9Lives εικονογράφος σε iStockPhoto. Το αρχείο φορέα χτίστηκε πολύ καλά, οπότε ήταν εύκολο να απομονώσει τη γυναίκα γραφικό. Μου έπεσε το photoshop για να αλλάξετε το μέγεθός του με το ακριβές μέγεθος pixel που ήθελα.

Από Photoshop, χρησιμοποίησα το "Αποθήκευση για Web & συσκευές" επιλογή των εξαγωγών και αποθηκεύονται με τη PNG-24 επιλογή. Αυτό είναι το σκηνικό για μια πλήρη 32-αλφα-bit διαφάνεια PNG. Το πρόγραμμα περιήγησης μόνο ότι θα έχουμε κανένα πρόβλημα με αυτό είναι IE 6, οπότε αν αυτό πρόκειται να είναι ένα θέμα για εσάς, εσείς θα πρέπει να εξετάσουν είτε χρησιμοποιώντας το PNG Hack, εξοικονόμηση ως GIF ή PNG 8-bit αντί, ή με τη χρήση όρους stylesheet να κρύψει το γραφικό από IE 6.

2. Γράφοντας την HTML markup

Nested διέταξε λίστες τα κρέατα που προέρχονται από έναν πίνακα περιεχομένων. Markup μας θα χρησιμοποιούν αυτές, αλλά στη συνέχεια, τυλίξτε το όλο θέμα σε ένα DIV θα χρησιμοποιήσουμε για να δημιουργήσουμε το μαύρισμα κουτί. Θα χρησιμοποιήσουμε επίσης ένα παραδοσιακό Η1 ετικέτα για μια κεφαλίδα. 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> 

Σημειώστε ότι θα προστεθεί η εικόνα της γυναίκας εδώ δεξιά στην κορυφή και να δώσουμε εδώ μια μοναδική κλάση. Αυτό είναι το άγκιστρο θα χρησιμοποιήσουμε το στόχο και τη θέση της με το CSS. Αυτό είναι επίσης το άγκιστρο θα μπορούσατε να χρησιμοποιήσετε στην όρους stylesheet να την κρύψει αν χρειαστεί.

Σε ένα ζωντανό πίνακα περιεχομένων, το κείμενο μέσα σε κάθε στοιχείο της λίστας θα είναι τυλιγμένο σε ένα σύνδεσμο άγκυρα επίσης. Η href χαρακτηριστικό θα είναι να παραπέμπει σε μια τιμή κατακερματισμού URL όπως "# άρθρο-δύο" το οποίο, όταν πατηθεί, θα πηδήσει κάτω μέρος της σελίδας για το στοιχείο που είχε ότι το ID. Στο κάτω μέρος της κάθε ενότητας, θα μπορούσε ακόμη και να «Πίσω στην κορυφή" δεσμούς που συνδέουν προς # TOC, η οποία θα άλμα άνθρωποι πίσω στον πίνακα περιεχομένων.

3. Η CSS

Η CSS είναι επίσης αρκετά απλή. Θα σας δείξει ακριβώς το όλο θέμα, στη συνέχεια, να επισημάνω μερικά πράγματα παρακάτω.

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

Πράγματα που πρέπει να σημειωθεί:

- Η # TOC στυλ είναι πολύ απλά χρησιμοποιεί μόνο ένα χρώμα φόντου και ένα μόνο pixel χρώμα των συνόρων. Browser-ειδικά χαρακτηριστικά προστίθενται για να κάνετε τα στρογγυλεμένες γωνίες. Αυτό το έργο και θα δούμε μεγάλη σε όλα βασίζονται Mozilla browsers (Flock, Firefox, κλπ.), καθώς και με βάση Webkit browsers (Konqueror, Safari, κλπ.). Αν δείτε τη σελίδα σε IE 7 ή Opera, διασπάται ωραία μόνο για να έχει τακτική πλατεία γωνίες. Δεν είναι μεγάλη υπόθεση.

- Οι κατάλογοι διέταξε έσπρωξε μακριά από την αριστερή πλευρά του κουτιού (για να δημιουργηθεί χώρος για την εικόνα) με το αριστερό περιθώριο. Οι ένθετα διέταξε κατάλογοι έχουν επίσης ένα αριστερό περιθώριο που, σε μια μικρότερη τιμή. Δεν γίνει αυτό, θα ήταν ακόμη εσοχή, αλλά με την ίδια 100px που θα ήταν πολύ μακριά. Επίσης, ανακοίνωση σχετικά με τις επιμέρους καταλόγους διέταξε τη λίστα-στυλ έχει οριστεί σε χαμηλότερο-άλφα. Αυτό χρησιμοποιεί γράμματα αντί των αριθμών στη συνέχεια για την ένθετη καταλόγους, πράγμα που καθιστά ευκολότερο να περιηγηθείτε οπτικά.

- Επειδή η # TOC έχει εφαρμοστεί σχετική τοποθέτηση, μπορούμε να χρησιμοποιήσουμε για την απόλυτη τοποθέτηση του. Κλάση γυναίκα για να πάρει η απεικόνιση αυτή ακριβώς που θέλουμε. Δεν χρειάζεται να είναι νευρικό σχετικά με τη χρήση απόλυτη θέση εδώ, αυτό δεν είναι για το layout. Περισσότερα για την απόλυτη τοποθέτηση μέσα σχετική τοποθέτηση.

Τελικού προϊόντος

Προβολή Demo

ΛΗΨΗ ΑΡΧΕΙΩΝ