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

 
 
 
Τζέικ Ροσέλ
 
Ελεύθερος συγγραφέας και προγραμματιστής ιστού
  Χάντσο, Μασαχουσέτη, ΗΠΑ  [email protected] Το χαρτοφυλάκιό μου • @ jakerocheleau 
 
  
 
 

Πριν περάσουμε σε λεπτομερή CSS θέλω να εξηγήσω περισσότερα για τη χρήση των μικροδεδομένων. Αν κοιτάξετε προσεκτικά, έχω γεμίσει χαρακτηριστικά μέσα σε πολλά διαφορετικά στοιχεία με τα ονόματα Τύπος αντικειμένου, αντικείμενο, και itemprop. Όλα αυτά σχετίζονται με το σχέδιο Schmea το οποίο ελπίζει να προσφέρει μια δομή δεδομένων για τον ιστό.

Διαμόρφωση χρήσιμων μικροδεδομένων

Όλες οι μεγάλες μηχανές αναζήτησης όπως το Google, το Yahoo !, και το Bing έχουν αποδεχτεί το σχήμα ως την καλύτερη σύνταξη για τη σήμανση δεδομένων. Με την επισήμανση λεπτομερειών για τον εαυτό σας, βοηθά αυτές τις μηχανές αναζήτησης να εμφανίζουν σχετικά αποτελέσματα για το περιεχόμενό σας στο διαδίκτυο. Ας καταρρίψουμε πώς να τις θέσουμε.

Το χαρακτηριστικό itemcope εφαρμόζεται σε κάθε κοντέινερ που περιέχει πληροφορίες για ένα στοιχείο σχήματος. Αυτό ακολουθείται πάντα από το χαρακτηριστικό itemtype, το οποίο σε αυτό το σενάριο περιγράφει ένα άτομο. Μέσα σε αυτό το περιτύλιγμα div μπορώ να επισημάνω οποιοδήποτε περιεχόμενο χρησιμοποιώντας itemprop μαζί με οποιαδήποτε από τα στοιχεία που αναφέρονται στη σελίδα τεκμηρίωσης τους.

Η συνιστώμενη μέθοδος είναι να τυλίξετε το περιεχόμενό σας μέσα σε μια ετικέτα εύρους, αντί να προσθέσετε απευθείας στο στοιχείο. Όταν επισημαίνετε κάτι σαν μια φωτογραφία, θα πρέπει να επισυνάψετε το itemprop στο img στοιχείο απευθείας. Αλλά αλλιώς θα έχετε πολύ πιο καθαρή σήμανση περικλείοντας τα δεδομένα σας σε ετικέτες span.

Πόσο είναι πάρα πολύ?

Υποστηρίζω ότι δεν υπάρχει όριο για το ύψος των λεπτομερειών που μπορείτε να πάρετε. Τα μικροδεδομένα είναι διαθέσιμα για να βοηθήσουν τους υπολογιστές να αναγνωρίζουν τους ανθρώπους, τις οργανώσεις, τα προϊόντα και άλλα αντικείμενα μέσα σε ένα online περιβάλλον. Όσες περισσότερες πληροφορίες μπορείτε να προσφέρετε, τόσο το καλύτερο.

Αξίζει να διατηρήσετε και να ανοίξετε το μυαλό και να δείτε πώς μπορείτε να χρησιμοποιήσετε αυτά τα μικροδίσματα σε πτυχές της δικής σας ιστοσελίδας. Εάν περάσετε 10-15 λεπτά περνώντας από την τεκμηρίωση του Schema, είναι πολύ πιο εύκολη από ό, τι νομίζετε. Μπορούμε να δούμε δύο ισχυρά παραδείγματα από το demo του βιογραφικού:

 
 
Σύνολο ικανοτήτων
 
 
Ανάπτυξη
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP Backend
 
SQL Βάσεις Δεδομένων
 
Wordpress
 
Pligg CMS
 
Μερικοί Στόχοι-Γ
 
 
 
 
Λογισμικό
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

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

 
 
Πρόσφατα Άρθρα
 
  10 Χρήσιμες μέθοδοι Fallback για CSS και Javascript • Δημοσιευτηκε σε Ιούλιος 2012
 
  Επανασύνδεση διευθύνσεων URL στο WordPress: Συμβουλές και προσθήκες • Δημοσιευτηκε σε Ιούλιος 2012
 
  JPEG Βελτιστοποίηση για το Web - τελικός οδηγός • Δημοσιευτηκε σε Ιούλιος 2012
 
  9 τεχνάσματα για να σχεδιάσετε το τέλειο ενημερωτικό δελτίο HTML • Δημοσιευτηκε σε Μάιος 2012
 
  Οδηγός για τη δοκιμή A / B με το Google Website Optimizer • Δημοσιευτηκε σε Μάρτιος 2012
 
 

Ένα άλλο καλό παράδειγμα είναι η λίστα των άρθρων που βρίσκεται στο κάτω μέρος. Υπάρχει μια ρύθμιση σχήματος για άρθρα και αναρτήσεις ιστολογίου, όλα σχετικά με περιεχόμενο που βρίσκεται online. Έχω υποδείξει τη διεύθυνση URL του άρθρου και την ημερομηνία δημοσίευσης, η οποία είναι περισσότερο από αρκετή πληροφορία για αυτές τις ανιχνευτές μηχανών αναζήτησης.

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

Σχετικές Στυλ CSS

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

* περιθώριο: 0; padding: 0;  html ύψος: 101%;  σώμα background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); μέγεθος γραμματοσειράς: 62,5%; padding-bottom: 65px;  h1 γραμματοσειρά: "Simonetta", "Trebuchet MS", Arial, sans-serif; χρώμα: # 454545; μέγεθος γραμματοσειράς: 3.6em; περιθώριο-κάτω: 6px;  h2 γραμματοσειρά: "Simonetta", "Trebuchet MS", Arial, sans-serif; χρώμα: # 484848; μέγεθος γραμματοσειράς: 2,5εμ. περιθώριο-κάτω: 10px; κείμενο-διακόσμηση: υπογράμμιση;  h3 γραμματοσειρά: "Trebuchet MS", Verdana, Arial, sans-serif; χρώμα: # 777; γραμματοσειρά-βάρος: κανονική. μέγεθος γραμματοσειράς: 1.8εμ. περιθώριο-κάτω: 10px;  h4 γραμματοσειρά: "Trebuchet MS", Verdana, Arial, sans-serif; χρώμα: # 656565; γραμματοσειρά-βάρος: έντονα. μέγεθος γραμματοσειράς: 1.75em; περιθώριο-κάτω: 4px;  p γραμματοσειρά-οικογένεια: "Balthazar", "Droid Serif", Times New Roman, serif? χρώμα: # 565656; μέγεθος γραμματοσειράς: 1.8εμ. ύψος γραμμής: 1,4εκ. περιθώριο-κάτω: 15px; padding-left: 35px;  μικρό font-family: "Balthazar", serif; χρώμα: # 656565; μέγεθος γραμματοσειράς: 1.6em; εμφάνιση: μπλοκ? περιθώριο-κάτω: 6px;  ul εμφάνιση: μπλοκ? style-λίστας: κανένας.  ul li padding-left: 45px; τύπος λίστας: κανένα. κατακόρυφη ευθυγράμμιση: κορυφή. ιστορικό: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; περιθώριο-κάτω: 5px; γραμματοσειρά-οικογένεια: "Balthazar", serif; χρώμα: # 666; μέγεθος γραμματοσειράς: 1.6em; ύψος γραμμής: 2.3εμ.  img σύνορα: 0; μέγιστο πλάτος: 100%.  α χρώμα: # 5582d6; κείμενο-διακόσμηση: κανένα?  a: αιώρηση text-decoration: underline;  

Τίποτα δεν είναι πολύ ενδιαφέρον, εκτός από ορισμένες από τις προσαρμοσμένες στήλες γραμματοσειρών. Επίσης, άρπαξα ένα μοναδικό εικονίδιο με κουκκίδες αντί για την προεπιλογή “δίσκος”. Μπορείτε να δοκιμάσετε να αναζητήσετε μέσω ενός καταλόγου, όπως το Εικονίδιο αναζήτησης, όταν προσπαθείτε να εντοπίσετε ένα παρόμοιο σχέδιο.

/ ** @ διάταξη πυρήνα @group ** / #w margin: 0px 50px; padding: 20px 40px; padding-top: 35px; background: #fff; min-πλάτος: 260px; μέγιστο πλάτος: 900px. όριο-κάτω-δεξιά-ακτίνα: 8px; όριο-κάτω-αριστερά-ακτίνα: 8px; -webkit-περίγραμμα-κάτω-αριστερά-ακτίνα: 8px; -webkit-περίγραμμα-κάτω-δεξιά-ακτίνα: 8px; -moz-border-ακτίνα-bottomleft: 8px; -moz-όριο-ακτίνα-κάτω: 8px;  κεφαλίδα πλάτος: 100%;  / ** @group προσωπικές ρυθμίσεις ** / #info float: left? περιθώριο-κάτω: 12px;  #photo float: δεξιά;  #photo img -webkit-ακτίνα-ακτίνα: 3px; -moz-border-radius: 3px. ακτίνα ακτίνων: 3px; -webkit-box-σκιά: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-σκιά: 0 2px 4px rgba (0, 0, 0, 0,2); κουτί-σκιά: 0 2px 4px rgba (0, 0, 0, 0.2); χρώμα φόντου: #fff; σύνορα: 1px στερεά # ccc; padding: 5px;  

Υπάρχουν μόνο λίγες σημαντικές περιοχές μπλοκ στη σελίδα που απαιτούν προσοχή. Φυσικά το περιτύλιγμα div είναι ρυθμισμένο με επιπλέον περιθώρια και padding. Επίσης, το μέγιστο πλάτος είναι περιορισμένο στα 900px επειδή οποιοδήποτε μεγαλύτερο μέγεθος θεωρεί ότι η σελίδα έχει υπερβολικά μεγάλο κενό. Έχω επίσης χρησιμοποιήσει στρογγυλεμένες γωνίες στο κάτω μέρος της σελίδας για μια ομαλότερη επίδραση στα μάτια.

Ανταποκρίσιμος σχεδιασμός

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

@media μόνο οθόνη και (max-width: 740px) h1 font-size: 4.5em;  h3 μέγεθος γραμματοσειράς: 2.2em;  h2 εμφάνιση: μπλοκ? κείμενο-ευθυγράμμιση: κέντρο;  #info float: κανένας; εμφάνιση: μπλοκ? κείμενο-ευθυγράμμιση: κέντρο;  #photo float: κανένας; εμφάνιση: μπλοκ? κείμενο-ευθυγράμμιση: κέντρο;  #w padding: 20px 15px;  p padding: 0;  

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

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

@media μόνο οθόνη και (max-width: 570px) ul li εμφάνιση: inline-block; padding-left: 15px; πλάτος: 140px; φόντο-θέση: -5px 0px; περιθώριο-δεξιά: 6px; ύψος γραμμής: 1.7εκ.  # δεξιότητες-αριστερά, δεξιότητες-δεξιά margin-bottom: 15px;  

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

Κωδικοποίηση για τα Smartphones

Τα τελευταία τρία ερωτήματα των μέσων ενημέρωσης είναι μικρά αλλά πολύ σημαντικά. Καθώς αλλάζετε μεταξύ οριζόντιου και πορτραίτου, το iPhone θα αλλάξει το μέγεθος κάθε browser του κινητού. Αυτό συμβαίνει και με τις περισσότερες συσκευές Android και τα Windows Mobile.

@media μόνο οθόνη και (max-width: 480px) ul li width: 120px;  #w περιθώριο: 0 20px;  Μόνο οθόνη @media και (max-width: 320px) #w margin: 0 10px;  / ** Μόνο το iPhone ** / οθόνη @media και (μέγιστο πλάτος συσκευής: 480px) ul li width: 150px;  

Όταν χτυπάμε πρώτα 480 pixels ή και μικρότερες, αφαιρούμε λίγο περισσότερο από το περιτύλιγμα και αναδιαμορφώνουμε τα στοιχεία της λίστας ξανά. Στη συνέχεια, στα 320px έχω αφαιρέσει μέρος του περιθωρίου περιθωρίου έξω από το έγγραφο. Μπορείτε ακόμα να δείτε το υφή φόντου, αλλά δεν είναι πολύ σημαντικό σε μια τόσο λεπτή κατακόρυφη προβολή.

Τέλος, χρησιμοποιώ μέγιστο πλάτος συσκευής για να στοχεύσετε την ίδια τη συσκευή iPhone ή συγκεκριμένα οποιαδήποτε άλλη οθόνη κινητού τηλεφώνου με μέγιστο πλάτος 480px. Σε αυτήν την περίπτωση, θέλω να ενημερώσω τα στοιχεία της λίστας λίγο πιο πλατιά ώστε να γεμίσουν ολόκληρη την οθόνη. Θα επηρεάσει μόνο τις καταχωρίσεις δεξιοτήτων σε προβολή τοπίου, αφού το πορτρέτο είναι πολύ κοκαλιάρικο για να παρατηρήσει τυχόν διαφορές.

• Διαδήλωση
• Λήψη πηγαίου κώδικα

Τελικές σκέψεις

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

Ελπίζω ότι μπορείτε να πάρετε μερικά βασικά σημεία μακριά από αυτό το σεμινάριο. Οι ελεύθεροι επαγγελματίες σε οποιαδήποτε θέση σε όλο τον κόσμο μπορούν να εμπορευθούν τους εαυτούς τους με λίγη τεχνική προσπάθεια. Μη διστάσετε να κατεβάσετε τον κώδικα πηγαίου κώδικα παραπάνω και μοιραστείτε τις σκέψεις σας σε αυτό το άρθρο στην περιοχή σχολίων μας.