Εξαιρετική χρήση των λιστών HTML στο Web Design

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

Σε αυτή την ανάρτηση θα εισαγάγω διαφορετικά είδη λίστας HTML, με συμβουλές για το σχεδιασμό τους, ιδιαίτερα για το πώς να προσθέστε ένα μοναδικό πλεονέκτημα στη λίστα σας. Επίσης, θα σας πάρω μερικά παραδείγματα ιστοσελίδων με φανταστικά σχέδια λίστας και τελικά θα πάρετε μια λίστα από ιστότοπους με ωραία σχεδιασμένες λίστες HTML. Δεν υπάρχει άλλη αμφιβολία για το πώς να κάνετε τους λίστες που αναζητούν απλά να φαίνονται μοναδικοί και ας αρχίσουμε να κάνουμε το μεγαλύτερο μέρος από αυτές σήμερα!

Τα Στοιχεία Καταχώρισης

Οι σχεδιαστές ιστοσελίδων συνεχώς μεταπηδούν από το ένα στο άλλο, προκαλώντας έτσι την αλλαγή του στυλ ιστοτόπων με την πάροδο του χρόνου, αλλά οι λίστες έχουν αντέξει τη δοκιμασία του χρόνου και μπορεί πολύ καλά να βρίσκονται γύρω από τη μελλοντική καινοτομία του World Wide Web.

Πριν από τον έλεγχο των παραδειγμάτων θέλω να καλύψω μερικά σημεία με λίστες HTML. Υπάρχουν λίγοι διαφορετικοί τύποι λιστών που μπορείτε να χρησιμοποιήσετε στη δική σας δουλειά σχεδιασμού. Η πλειοψηφία των σχεδιαστών ιστοσελίδων επικεντρώνονται Μη καταχωρημένες λίστες που ανοίγονται με α

αλλά υπάρχουν και άλλες δύο λιγότερο δημοφιλείς παραλλαγές: Επιλεγμένες λίστες και Ορισμοί δεδομένων. Έχω πάει σε περισσότερες λεπτομέρειες παρακάτω.

Μη καταχωρημένες λίστες (

)

Ενδεχομένως ένα από τα πιο χρησιμοποιούμενα στοιχεία στα πρότυπα HTML4 / HTML5. Οι μη ταξινομημένες λίστες θα εξάγουν δεδομένα με τον ίδιο τρόπο όπως μια λίστα που έχετε παραγγείλει, ωστόσο εσείς δεν θα βλέπουν αριθμητικούς δείκτες στην πλευρά. Αντί για κάθε στοιχείο δίνεται ένα a μικρό κύκλο ή δίσκο και κατανεμήθηκε σε μια νέα γραμμή. Αυτό το εικονίδιο μπορεί επίσης να αλλάξει με την ιδιότητα τύπου λίστας που βρέθηκαν στο CSS.

Παρακάτω είναι ο κωδικός παραδείγματος της μη ταξινομημένης λίστας:

 
 
Στοιχείο 1
 
Σημείο 2
 
Σημείο 3
 
 

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

Συνηθέστερα θα βρείτε ασαφείς λίστες στη μέση των άρθρων ιστού ή των οδηγιών εγκατάστασης. Προσέξτε αυτό Η Google και άλλα bots αναζήτησης δεν επεξεργάζονται το περιεχόμενο της σελίδας σας διαφορετικά, έτσι σας Το SEO δεν πρέπει να επηρεάζεται ανεξάρτητα από το είδος του καταλόγου που επιλέγετε.

Επιλεγμένες λίστες (

)

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

• ) θα υπαγορεύσει τον τρόπο παρουσίασης των δεδομένων.

  Παρακάτω είναι ο κωδικός παράδειγμα της ταξινομημένης λίστας:

   
   
  Στοιχείο 1
   
  Σημείο 2
   
  Σημείο 3
   
   

  Είναι επίσης δυνατό να αλλάξτε τον μετρητή από τους κανονικούς αριθμούς σε μια σειρά από άλλες επιλογές. Αυτά περιλαμβάνουν αλφαβητικά γράμματα και λατινικούς αριθμούς, για να αναφέρουμε μερικά. Οι σχεδιαστές ιστοσελίδων θα χρησιμοποιούσαν ταξινομημένη λίστα για συγκεκριμένες λίστες περιεχομένου. Δεδομένα συνταγής, καθημερινές εργασίες, αγαπημένα, ή κορυφαίους / πρόσφατους συνδεδεμένους χρήστες είναι μερικά παραδείγματα. Συχνά θα δείτε σχόλια blog Κατασκευάστηκε χρησιμοποιώντας ταξινομημένες λίστες για να κρατήσει κάθε σχόλιο σε αριθμημένη σειρά.

  Λίστες προσδιορισμού δεδομένων (

  )

  Οι λίστες ορισμών δεν βλέπονται πολύ συχνά (όχι σαν να ήταν ποτέ δημοφιλείς). Χρησιμοποιούνταν για να δει κανείς με τους σχεδιαστές ιστοσελίδων να δημιουργούν σύνθετες μορφές συνδέσμων ή περιεχόμενο κουτιού. ο ετικέτα λίστας δεδομένων (

  ) συχνά παρερμηνεύεται από τους κωδικοποιητές σήμερα. Στις προδιαγραφές HTML4.01 χρησιμοποιήθηκαν λίστες δεδομένων ζεύγη αντικειμένων με τις περιγραφές τους. Αυτές ονομάστηκαν λίστες ορισμών.

  Παρακάτω είναι ο κωδικός παραδείγματος της λίστας ορισμού δεδομένων:

   
   
  Στοιχείο 1
   
  Περιγραφή
   
  Σημείο 2
   
  Περιγραφή
   
  Σημείο 3
   
  Περιγραφή
   
   

  Ωστόσο, με τις νέες λίστες δεδομένων HTML5 προδιαγραφές δόθηκε μια μεταγραφή. Δεν υπάρχουν διαφορές με τη σύνταξη για τον τρόπο χρήσης των στοιχείων, ωστόσο ο σκοπός τους έχει ενημερωθεί ως α περιγραφής που αποτελείται από έναν ή περισσότερους όρους δεδομένων (

  ) που ακολουθείται από έναν ή περισσότερους ορισμούς δεδομένων (

  ).

  Ένα ισχυρό παράδειγμα από το άρθρο του γιατρού HTML5 είναι ένα λίστα μορφοποιημένων μεταδεδομένων. Μέσα σε ένα ενιαίο dl στοιχείου λίστας που θα κάνατε ορίστε έναν όρο, όπως το όνομά σας, στη συνέχεια κάθε επόμενο ετικέτα ορισμού θα μπορούσε να περιγράψει δεδομένα για σας, πιθανώς την ηλικία σας, την κατοχή, την τρέχουσα πόλη / πόλη, κλπ. Τελικά κάθε σύνολο δεδομένων με ζεύγη κλειδιών / τιμών ταιριάζει καλά σε μια λίστα περιγραφής. Μπορείτε να χρησιμοποιήσετε περισσότερους από έναν όρους δεδομένων σε μια λίστα, αλλά το W3C δηλώνει αυτό κάθε όρος πρέπει να είναι μοναδικός στη λίστα.

  Τώρα που έχουμε καρφώσει τα 3 δημοφιλή στυλ λίστας, ας προχωρήσουμε σε μερικά παραδείγματα! Οι σχεδιαστές ιστοσελίδων έχουν γίνει πολύ δημιουργικοί με τους καταλόγους τους τα τελευταία χρόνια. Έχω καταλόγου 7 από τις αγαπημένες μου ιστοσελίδες παρακάτω, με ιδιαίτερη έμφαση στη δημιουργική χρήση των λιστών.

  Απλή πλοήγηση χωρίς λίστα

  Τα μενού πλοήγησης είναι πολύ απλούστερα στην κατασκευή με σύγχρονες τεχνικές CSS. Αυτός είναι ο λόγος για τον οποίο οι απρογραμμάτιστες λίστες και ακόμη και οι ταξινομημένες λίστες έχουν γίνει μια δημοφ Ένα από τα αγαπημένα μου παραδείγματα για αυτό εμφανίζεται στο blog των κοινωνικών μέσων ενημέρωσης, Mashable.

  

  Προς την κορυφή της κεφαλίδας τους θα παρατηρήσετε 2 κύρια σύνολα συνδέσμων. Ακριβώς στην κορυφή του λογότυπου τους υπάρχει μια μικρή λίστα που δεν έχει τακτοποιηθεί και περιέχει κοινοτικούς συνδέσμους όπως Top Stories, Trending Topics και People. Ο σχεδιαστής δημιούργησε ένα κομψό στιλ που έχει ένα στερεό υπόβαθρο και ένα χρωματικό σχέδιο.

  Ακριβώς κάτω από αυτό θα δείτε τους συνδέσμους δευτερεύουσας πλοήγησης. Αυτό το μενού πλοήγησης οδηγεί σε κατηγορίες blog όπως το Social Media ή το Tech. Και οι δύο μη ταξινομημένες λίστες περιλαμβάνονται σε ένα HTML5