Πώς να δημιουργείτε ερωτήματα προσαρμοσμένων μέσων στο Dreamweaver - ανδρείκελα

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

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

print: Σχεδιασμένο για προεπισκόπηση εκτύπωσης και για εμφάνιση όταν εκτυπώνεται μια σελίδα

: Για περιεχόμενο που εμφανίζεται σε οποιαδήποτε οθόνη

σχεδόν ποτέ δεν χρησιμοποιείται και χρησιμοποιείται καλύτερα μόνο για κινητά τηλέφωνα και άλλες συσκευές με μικρές οθόνες, περιορισμένο εύρος ζώνης και μονόχρωμες οθόνες που υποστηρίζουν μόνο bitmapped γραφικά. Οι συσκευές iOS και τα περισσότερα smartphones κατηγοριοποιούνται ως τύποι μέσων οθόνης.

Πώς να εφαρμόσετε στυλ στα σχέδια σελίδων του Dreamweaver

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

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

Πώς να χρησιμοποιήσετε ερωτήματα μέσων σε εξωτερικά φύλλα στυλ στο Dreamweaver

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

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

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

Πώς να δημιουργήσετε ερωτήματα μέσων στο Dreamweaver

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

Ανοίξτε το πλαίσιο CSS Designer επιλέγοντας Window → CSS Styles.

Επιλέξτε ένα υπάρχον φύλλο στυλ στον πίνακα Πηγές ή δημιουργήστε ένα νέο, κάνοντας κλικ στο σύμβολο συν (+) στον πίνακα Πηγές.
Κάντε κλικ στο σύμβολο συν (+) στον πίνακα @Media στον πίνακα CSS Designer.
Ανοίγει το παράθυρο διαλόγου Ορισμός ερωτημάτων μέσων.

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

Σημείωση:

Τα σύμβολα "συν" και "μείον" γίνονται ορατά μόνο όταν μετακινείτε τον κέρσορα στη δεξιά πλευρά του παραθύρου διαλόγου. Μετακινήστε τον κέρσορα στα δεξιά των αναπτυσσόμενων λιστών, κάντε δεύτερη φορά κλικ στο σύμβολο συν για να προσθέσετε ένα πεδίο και πληκτρολογήστε μια κατάσταση ελάχιστου πλάτους.
Το πεδίο Min-Width εμφανίζεται στο παράθυρο διαλόγου Media Queries ώστε να μπορείτε να ορίσετε το ελάχιστο πλάτος που θέλετε να χρησιμοποιήσετε για να στοχεύσετε το ερώτημα. Το ελάχιστο πλάτος είναι σημαντικό επειδή το ερώτημα μέσων στοχεύει τα στυλ με βάση το εύρος ελάχιστου έως μέγιστου εύρους που καθορίζετε, το οποίο καλύπτεται στο επόμενο βήμα.

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

Κάντε κλικ στο κουμπί OK.
Το παράθυρο διαλόγου Media Queries κλείνει και το ερώτημα μέσων δημιουργείται και προστίθεται στο φύλλο στυλ που επιλέξατε στον πίνακα Πηγές στον πίνακα σχεδιαστή CSS.

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