Πώς να δημιουργήσετε μια συλλογή στο WordPress; Χρήσιμες οδηγίες για αρχάριους. Συστάσεις για προώθηση SEO μιας συλλογής φωτογραφιών

Λοιπόν, έπρεπε να καταφέρεις να βγάλεις τόσες πολλές φωτογραφίες που ακόμη και η πεθερά σου έχει τις φωτογραφίες κάτω από το κρεβάτι της. Σου είπε η γυναίκα σου να μην βγάζεις άλλες φωτογραφίες στο σπίτι; Ωχ-χο! Τότε ήρθε η ώρα να μεταφέρετε όλη την εργασία σας στο εικονικό χώρο. Και για αυτό θα χρειαστείτε μια συλλογή φωτογραφιών για τον ιστότοπο:

Συλλογή φωτογραφιών για τον ιστότοπο

Πολύ συχνά μια συλλογή φωτογραφιών μπορεί να συγχέεται με ένα άλμπουμ φωτογραφιών. Το κύριο χαρακτηριστικό μιας γκαλερί είναι η «εμφάνιση» όλων των φωτογραφιών ταυτόχρονα. Και στο άλμπουμ οι εικόνες εμφανίζονται μία κάθε φορά.

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

• Η δυνατότητα εμφάνισης όλων των εικόνων (φωτογραφιών) ταυτόχρονα - μερικές φορές οι χρήστες είναι πολύ τεμπέληδες για να πατήσουν κουμπιά για κύλιση. Και στην κλασική συλλογή φωτογραφιών, όλα τα αντικείμενα είναι άμεσα διαθέσιμα για προβολή.
• Ευκολία υλοποίησης - ένα τυπικό πρότυπο μπορεί εύκολα να δημιουργηθεί χρησιμοποιώντας html.
• Ανοιχτότητα - μια συλλογή φωτογραφιών (σε σύγκριση με ένα άλμπουμ) έχει μεγαλύτερο "ανοιχτό", το οποίο σε υποσυνείδητο επίπεδο σας επιτρέπει να εμπνεύσετε εμπιστοσύνη από την πλευρά των χρηστών.

Ταυτόχρονα, η γκαλερί έχει και μειονεκτήματα. Το κυριότερο είναι ο όγκος. Λόγω του «τεράστιου» μεγέθους του, καταλαμβάνει πολύ χώρο στη σελίδα του ιστότοπου. Ως εκ τούτου, είναι πολύ δύσκολο να ενταχθεί στο συνολικό σχέδιο. Επιπλέον, η συλλογή φωτογραφιών έχει ένα στενό "εύρος δράσης", επειδή η χρήση της δικαιολογείται μόνο σε πλήρεις εκδόσεις πόρων. Και η εφαρμογή του «κλασικού» του σχήματος για φορητές συσκευέςπολύ δύσκολο.

Παράδειγμα κλασικής συλλογής φωτογραφιών

Μια απλή συλλογή φωτογραφιών για έναν ιστότοπο είναι ένα σύνολο συνδέσμων, καθένας από τους οποίους μπορεί να προσπελαστεί χρησιμοποιώντας μια ετικέτα Η μικρογραφία της κύριας εικόνας είναι "βιδωμένη". Κάνοντας κλικ στον σύνδεσμο μεταφέρεται ο χρήστης σε μια άλλη ιστοσελίδα όπου «εκτίθεται» η φωτογραφία πλήρους μήκους. Παρακάτω υπάρχει ένας άλλος υπερσύνδεσμος που οδηγεί στην κύρια σελίδα:

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

Συλλογή φωτογραφιών

Κωδικός παιδικής ιστοσελίδας:

Πίσω

Συλλογή φωτογραφιών με χρήση CSS

Το προηγούμενο παράδειγμα, αν και απλό στην εφαρμογή, είναι πολύ βαρύ. Και μοιάζει περισσότερο με τη «ραχοκοκαλιά» ενός απλού ιστότοπου. Επομένως, για να μην χρησιμοποιείτε πολλά διασυνδεδεμένα έγγραφα Ιστού στην υλοποίηση μιας συλλογής φωτογραφιών, μπορείτε να χρησιμοποιήσετε τις δυνατότητες Javascript για να επεξεργαστείτε το συμβάν (κάντε κλικ στην εικόνα προεπισκόπησης). Αλλά θα παραλείψουμε την κωδικοποίηση προς το παρόν και θα χρησιμοποιήσουμε CSS για να εφαρμόσουμε μια φωτογραφία στο ακόλουθο παράδειγμα:

Κάνοντας κλικ σε μια μικρογραφία φωτογραφίας θα κάνετε μεγέθυνση. Επιπλέον, η συλλογή φωτογραφιών «μπορεί» να προσαρμοστεί στο μέγεθος του παραθύρου του προγράμματος περιήγησης, αλλάζοντας αναλογικά το μήκος και το πλάτος της προεπισκόπησης (μείωση ή αύξηση). Και όλα αυτά με μόνο CSS και μια ελαφριά δομή html:

Παράδειγμα κώδικα Html για το πώς να δημιουργήσετε μια συλλογή φωτογραφιών σε έναν ιστότοπο:

Συλλογές φωτογραφιών CSS:

#gall ( θέση: σχετική; padding-top: 50%; -moz-user-select: none; user-select: none; ) #gall img ( position: absolute; top: 25%; left: 12,5%; max- πλάτος: 24,5% max-height: 49,5% -webkit-transform(-50%) 4n-2) (αριστερά: 37,5%;) #gall img:nth-child(4n-1) (αριστερά: 62,5%;) #gall img:nth-child(4n ) (αριστερά: 87,5%;) #gall img :nth-child(n+5) (επάνω: 75%;) #gall img:focus ( θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; δείκτης z : 1; μέγ. πλάτος: 100%, περίγραμμα : κανένας, δείκτης-συμβάντα: κανένας ) #gall img: εστίαση ~ div (θέση: απόλυτη; πάνω: 0; δεξιά: 0; κάτω: 0; φόντο: #fff; δρομέας: σμίκρυνση )

Συλλογή φωτογραφιών βασισμένη στο Jquery

Εκτός από τα δείγματα «μη προγράμματος», μπορείτε να χρησιμοποιήσετε γκαλερί φωτογραφιών γραμμένων σε Jquery στον ιστότοπο. Η δημιουργία μιας γκαλερί μόνος σας με βάση αυτή τη βιβλιοθήκη θα απαιτήσει ειδικές γνώσεις και δεξιότητες. Είναι πιο εύκολο να βρείτε μια έτοιμη έκδοση στο Διαδίκτυο και να την εγκαταστήσετε στον ιστότοπό σας.

Ένα σενάριο συλλογής φωτογραφιών για έναν ιστότοπο είναι ένα αρχείο από το οποίο πρέπει να εξαγάγετε αρχεία προγράμματος και να το τοποθετήσετε στον ιστότοπό σας.

Ας δούμε ένα βήμα προς βήμα παράδειγμα σύνδεσης της Galleria σε έναν κανονικό ιστότοπο html:

• Συνδέουμε τη βιβλιοθήκη Jquery στην ιστοσελίδα μας - για να το κάνετε αυτό, εισάγετε τη γραμμή μέσα στην ετικέτα:

Για να ελέγξουμε τη σύνδεση της βιβλιοθήκης, θα τοποθετήσουμε ένα δοκιμαστικό σενάριο στο σώμα της σελίδας:

$("body").text("jQuery λειτουργεί");

Εάν η σύνδεση γίνει σωστά, τότε όταν εκκινήσετε την ιστοσελίδα, το αντίστοιχο κείμενο θα εμφανιστεί στο πρόγραμμα περιήγησης:

• Εγκατάσταση της Galleria - σε αυτό το στάδιο θα πρέπει να κάνετε λήψη του αρχείου με τη συλλογή φωτογραφιών για τον ιστότοπο και να το αποσυσκευάσετε στον κατάλογο όπου βρίσκεται το αρχείο html μας. Για να συνδέσετε το πρόσθετο, τοποθετήστε τον ακόλουθο κώδικα ακριβώς κάτω από τη γραμμή με την οποία ενεργοποιήσαμε την υποστήριξη Jquery στο προηγούμενο βήμα:

Και για να ελέγξουμε τη λειτουργικότητα του πρόσθετου, αντί για τον προηγούμενο κώδικα εντοπισμού σφαλμάτων, θα τοποθετήσουμε αυτόν:

if (Galleria) ( $("body").text("Η Galleria λειτουργεί") )

Εάν η συλλογή είναι συνδεδεμένη σωστά, το πρόγραμμα περιήγησης θα εμφανίσει το μήνυμα "Η Galleria λειτουργεί":

• Ορίζουμε τις παραμέτρους της συλλογής και προσθέτουμε εικόνες σε αυτήν - πρώτα, χρησιμοποιώντας την κλάση CSS, ορίζουμε το μήκος, το πλάτος και το χρώμα της συλλογής. Για να γίνει αυτό, θα γράψουμε τις τιμές των αντίστοιχων ιδιοτήτων στυλ.

Στη συνέχεια προσθέτουμε εικόνες για εμφάνιση:

• Ενεργοποιούμε την προσθήκη και ορίζουμε το θέμα της συλλογής φωτογραφιών για τον ιστότοπο - για να το κάνουμε αυτό, αμέσως κάτω από το επίπεδο εικόνας τοποθετούμε τις ακόλουθες γραμμές κώδικα:

Στο παράδειγμα εγκαθιστούμε το κλασικό θέμα. Άλλα θέματα είναι διαθέσιμα για λήψη στον ιστότοπο της προσθήκης, αλλά όλα πληρώνονται:

Ακολουθεί ολόκληρος ο κώδικας μιας παραδειγματικής σελίδας με συνδεδεμένη την προσθήκη:

Έγγραφο χωρίς τίτλο .galleria (πλάτος: 700 εικονοστοιχεία; ύψος: 400 εικονοστοιχεία; φόντο: #000 ) Galleria.loadTheme("galleria/themes/classic/galleria.classic.min.js");

Galleria.run(".galleria");

Άλλες επιλογές

Για ιστότοπους που λειτουργούν με δημοφιλείς μηχανές PHP, υπάρχουν πολλά εξειδικευμένα πρόσθετα (επεκτάσεις) διαθέσιμα στο Διαδίκτυο. Για παράδειγμα, για να δημιουργήσετε μια συλλογή φωτογραφιών στο ιστολόγιό σας με WordPress, μπορείτε να χρησιμοποιήσετε την προσθήκη NextGen Gallery. Είναι μια από τις πιο δημοφιλείς επεκτάσεις γκαλερί φωτογραφιών WordPress:

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

Σε ποια αρχαία πηγή βρήκε σύσταση για εγκατάσταση πρόσθετου, αλλά όσοι χρησιμοποιούν τη μηχανή WordPress για τουλάχιστον ένα ή δύο χρόνια και έχουν μελετήσει τις δυνατότητες του επεξεργαστή κειμένου της μπορούν να δημιουργήσουν γκαλερί χωρίς πρόσθετα. Η τελευταία έκδοση του WordPress - 3.5, που κυκλοφόρησε πρόσφατα - έχει γενικά βελτιώσει σημαντικά τις δυνατότητές του όσον αφορά την επεξεργασία και την προσθήκη τυχόν αρχείων πολυμέσων, δημιουργώντας ένα ειδικό παράθυρο απευθείας στο μπλοκ για τη φόρτωση και την επιλογή τους. Υπέροχη ιδέα που μπορεί να έχει δανειστεί από το Google Blogspot. Ναι, αυτό δεν είναι τόσο σημαντικό - αλλά από εμένα (και όχι μόνο) σεβασμός στους προγραμματιστές!

Πώς να δημιουργήσετε μια συλλογή εικόνων σε σελίδες ιστότοπου WordPress;

Μέθοδος φόρτωσης

Δεν θα περιγράψω τα πάντα λεπτομερώς με λόγια, αλλά θα προσπαθήσω να τα εξηγήσω όλα ξεκάθαρα με τη βοήθεια στιγμιότυπων οθόνης. Έτσι, προσθέστε το αρχείο πολυμέσων:

Θα ανοίξει το παραπάνω παράθυρο (αυτό το παράθυρο είναι μόνο για εκδόσεις που ξεκινούν από την 3.5, αλλά μπορείτε επίσης να χρησιμοποιήσετε εκδόσεις που ξεκινούν από την 3.3, αν δεν κάνω λάθος, δεν θα εμφανιστεί τέτοιο παράθυρο, αλλά υπάρχει μια λειτουργία για τη δημιουργία στοά). Επιλέξτε «Δημιουργία συλλογής»:

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

Η ακόλουθη εικόνα θα εμφανιστεί στο οπτικό πρόγραμμα επεξεργασίας:

Τώρα, για να βεβαιωθείτε ότι όλα πήγαν καλά, στον επεξεργαστή ανάρτησης, κάντε κλικ στο "Προβολή". Θα πρέπει να μοιάζει κάπως έτσι:

Αυτό είναι - η γκαλερί είναι έτοιμη! Ο χρήστης μπορεί να κάνει κλικ σε κάθε εικόνα, θα μεγεθύνεται στην οθόνη προβολής.

Σύρετε και αποθέστε

Μπορείτε επίσης να δημιουργήσετε μια συλλογή ή να προσθέσετε ΟΠΟΙΟΔΗΠΟΤΕ αρχείο πολυμέσων χρησιμοποιώντας τη μέθοδο μεταφοράς και απόθεσης. Για αυτό χρειάζεστε

1) ανοίξτε το παράθυρο για την προσθήκη αρχείων πολυμέσων.

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

Αφού κάνετε μερικά drag and drop, επιλέξτε τις εικόνες, κάντε κλικ στο "Δημιουργία συλλογής", επιλέξτε τις εικόνες - και όλα είναι υπέροχα! Για ευκολία στη χρήση, στις ρυθμίσεις της συλλογής, επιλέξτε έναν σύνδεσμο προς ένα αρχείο πολυμέσων και όχι μια σελίδα συνημμένου, ωστόσο, όπως θέλετε.

Βλέπω:

Εξετάσαμε πώς να προσθέσετε μια φωτογραφία σε μια σελίδα στο τελευταίο μάθημα. Τώρα θα μάθουμε πώς να δημιουργήσουμε μια συλλογή φωτογραφιών στο WordPress.

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

Δημιουργήστε μια συλλογή

Η αρχή είναι η ίδια με την προσθήκη εικόνων στη σελίδα:

Επιλέξτε το μέρος όπου θέλετε να τοποθετήσετε τη συλλογή φωτογραφιών τοποθετώντας τον κέρσορα εκεί.

Στη συνέχεια, στη γραμμή εργαλείων, κάντε κλικ στο κουμπί "Προσθήκη πολυμέσων".

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

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

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

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

Αριθμός στηλών - αποφασίστε μόνοι σας πόσες φωτογραφίες στη σειρά είναι κατάλληλες για το πλάτος του ιστότοπού σας.

Επεξεργασία συλλογής φωτογραφιών

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

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

Κάντε κλικ στην εικόνα, θα εμφανιστούν 2 εικονίδια: το πρώτο είναι για επεξεργασία και το δεύτερο για διαγραφή. Χρειαζόμαστε το πρώτο :)

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

Πώς να δημιουργήσετε μια απλή συλλογή φωτογραφιών

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

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

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

Κωδικός ενσωμάτωσης συλλογής:
Επικολλήστε τους κωδικούς φωτογραφιών εδώ

Ο κωδικός φωτογραφίας δεν πρέπει να μοιάζει με μια κανονική διεύθυνση, αλλά ως εξής:

Έτσι, εισαγάγατε κωδικούς φωτογραφιών αντί για τις λέξεις "Εισαγάγετε κωδικούς φωτογραφιών εδώ". Τώρα ας αρχίσουμε να προσαρμόζουμε την ταχύτητα κύλισης. Η παράμετρος scrollamount="2" ελέγχει την ταχύτητα κύλισης. Εάν θέλετε να αυξήσετε την ταχύτητα, αντικαταστήστε το 2 με έναν άλλο αριθμό. Η παράμετρος scrolldelay="1" είναι υπεύθυνη για την καθυστέρηση πριν από κάθε νέα κίνηση. Εάν θέλετε η εικόνα να κινείται με μεγάλες καθυστερήσεις, ορίστε τον αριθμό σε 500 ή 1000, αλλά αν θέλετε κίνηση χωρίς φρένα, μην αγγίζετε αυτήν την παράμετρο. Δημοσιεύουμε τον κώδικα που προκύπτει στο ιστολόγιο και ευχαριστούμε τον αναγνώστη.

Εκτός από τη μεγάλη γκαλερί, μπορείτε να φτιάξετε μια μικρή ανεβάζοντας μικρές φωτογραφίες (πλάτος 150). Όλα γίνονται με τον ίδιο τρόπο, απλά εισάγετε μικρά αντί για μεγάλα. Δείτε πόσο υπέροχο έγινε.

Στη συνέχεια, θα σας πω πώς αλλιώς μπορείτε να διαφοροποιήσετε την ήδη δημιουργημένη συλλογή. Για παράδειγμα, θέλετε οι φωτογραφίες να μην πηγαίνουν από δεξιά προς τα αριστερά, αλλά αντίστροφα. Για να το κάνετε αυτό, προσθέστε την εντολή direction="right" στον κώδικα. Εάν θέλετε οι φωτογραφίες να μετακινούνται από τα δεξιά προς τα αριστερά και μετά πάλι πίσω, εισαγάγετε την εντολή Behaviour="alternate" στον κώδικα της συλλογής.

Εάν θέλετε να εκτελείτε φωτογραφίες από πάνω προς τα κάτω ή από κάτω προς τα πάνω, χρησιμοποιήστε αυτές τις εντολές:
κατεύθυνση = "κάτω" - οι φωτογραφίες πηγαίνουν από πάνω προς τα κάτω.
direction="up" - οι φωτογραφίες πηγαίνουν από κάτω προς τα πάνω.

Για να προσαρμόσετε το πλάτος και το ύψος, εισαγάγετε αυτές τις εντολές στον κώδικα της συλλογής:
width="500" - αυτή η εντολή προσαρμόζει το πλάτος της συλλογής. Αυτή τη στιγμή ο αριθμός είναι 500, που σημαίνει ότι το πλάτος της συλλογής θα περιοριστεί στα 500 pixel.
height="500" - αυτή η εντολή προσαρμόζει το ύψος της συλλογής. Αυτή τη στιγμή ο αριθμός είναι 500, που σημαίνει ότι το ύψος της συλλογής θα περιοριστεί στα 500 pixel.

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

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

Εισαγωγή

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

Στυλ κοντέινερ

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

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

Βασικά στυλ γκαλερί

Τώρα ας προχωρήσουμε στον καθορισμό στυλ για την τάξη γκαλερίΣτοιχείο. Ας ορίσουμε το χρώμα του κειμένου, το μέγεθος της γραμματοσειράς και ας μετακινήσουμε τα στοιχεία προς τα αριστερά.

GalleryItem ( χρώμα: #797478; γραμματοσειρά: 10 εικονοστοιχεία/1,5 Verdana, Helvetica, sans-serif; float: αριστερά; ) .galleryItem h3 (μετατροπή κειμένου: κεφαλαία; ) .galleryItem img ( μέγ. πλάτος: -100%; border-radius: 5px -moz-border-radius: 5px;

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

Εργασία με στήλες

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

Θα χρησιμοποιήσουμε πέντε στήλες στο σχεδιασμό της δοκιμαστικής σελίδας μας. Ας υπολογίσουμε τα μαθηματικά για τον υπολογισμό των πεδίων. Θα υπάρχει περιθώριο 4% μεταξύ των στηλών. Πολλαπλασιάζοντας με το 5, βλέπουμε ότι το 20% του πλάτους πηγαίνει στα περιθώρια. Απομένει μόνο το 80% για συντήρηση. Δηλαδή, κάθε στήλη θα έχει πλάτος 16%.

Τώρα μπορούμε να εισάγουμε αυτές τις τιμές στον κώδικα CSS. Κάθε τάξη γκαλερίΣτοιχείοαντιπροσωπεύει μία στήλη, οπότε το πλάτος θα ήταν 16% και το περιθώριο 2% για κάθε πλευρά, για ένα σύνολο 4%.

GalleryItem ( χρώμα: #797478; γραμματοσειρά: 10 px/1,5 Verdana, Helvetica, sans-serif; float: αριστερά; πλάτος: 16%; περιθώριο: 2% 2% 50 px 2%; )

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

Πού θα φαίνεται ατημέλητο το πρότυπο;

Δυστυχώς, αυτό το πρότυπο θα σπάσει όταν μειωθεί το μέγεθος της σελίδας. Όταν το πλάτος είναι μικρότερο από 500 px, γίνεται εντελώς αδιάβαστο και αδέξιο.

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

Προσδιορισμός κρίσιμων σημείων

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

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

Πώς να προσδιορίσετε κρίσιμα σημεία;

Ο καλύτερος τρόπος είναι να ανοίξετε τη σελίδα σε ένα πρόγραμμα περιήγησης και να μειώσετε το μέγεθος του παραθύρου. Τεχνικά, το πρότυπό μας δεν θα σπάσει ποτέ καθώς η κλίμακα θα αλλάξει. Ωστόσο, με μέγεθος παραθύρου περίπου 940 εικονοστοιχεία, η στήλη κειμένου θα γίνει πολύ στενή για να ταιριάζει αρμονικά στο κείμενο:

Για να διορθώσετε την κατάσταση σε αυτό το σημείο, πρέπει να δημιουργήσετε τέσσερις στήλες αντί για πέντε. Αλλάζοντας το πλάτος της στήλης στο 21% θα λύσουμε το πρόβλημα. Εφόσον χρησιμοποιούνται και οι δύο ιδιότητες "max-width" και "max-device-width", η σχεδίαση θα αλλάξει όταν αλλάξει το παράθυρο του προγράμματος περιήγησης και σε συσκευές με μέγεθος οθόνης μικρότερο από τις καθορισμένες τιμές.

Μόνο οθόνη @media και (μέγ. πλάτος: 940 εικονοστοιχεία), μόνο οθόνη και (μέγ. πλάτος συσκευής: 940 εικονοστοιχεία) ( .galleryItem (πλάτος: 21%;) )

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

Επαναλάβετε τη λειτουργία

Τώρα επαναλαμβάνουμε την παραπάνω διαδικασία ξανά και ξανά. Μειώνουμε το μέγεθος του παραθύρου και βλέπουμε πότε η σχεδίαση σταματά να λειτουργεί. Το επόμενο σημείο βρίσκεται στα 720 px. Πρέπει να αλλάξετε το πλάτος της στήλης σε 29,33% για να λάβετε ένα πρότυπο τριών στηλών:

Μόνο οθόνη @media και (μέγ. πλάτος: 720 εικονοστοιχεία), μόνο οθόνη και (μέγ. πλάτος συσκευής: 720 εικονοστοιχεία) ( .galleryItem (πλάτος: 29,33333%;) )

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

/* MMEDIA QUERY*/ @media only οθόνη και (max-width: 940px), only screen and (max-device-width: 940px)( .galleryItem (width: 21%;) ) @media only screen and (max- πλάτος: 720 εικονοστοιχεία), μόνο οθόνη και (μέγ. πλάτος συσκευής: 720 εικονοστοιχεία) ( .galleryItem (πλάτος: 29,33333%;) ) οθόνη @media μόνο και (μέγ. πλάτος: 530 εικονοστοιχεία), μόνο οθόνη και (μέγ. πλάτος συσκευής : 530 px)( .galleryItem (πλάτος: 46%;) ) @media μόνο οθόνη και (μέγ. πλάτος: 320 px), μόνο οθόνη και (μέγ. πλάτος συσκευής: 320 px)( .galleryItem (πλάτος: 96%;) . galleryItem img (πλάτος: 96%;).galleryItem h3 (μέγεθος γραμματοσειράς: 18px;).galleryItem p, (μέγεθος γραμματοσειράς: 18px;) )

Σύναψη

Τώρα έχουμε μια υπέροχη συλλογή μικρογραφιών με απόκριση που φαίνεται υπέροχη σε οποιαδήποτε συσκευή ή παράθυρο προγράμματος περιήγησης.

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