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

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

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

• all: Κατάλληλο για όλες τις συσκευές

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

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

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

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

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

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

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

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

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

η ετικέτα τους συνδέει.

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

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

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

Ανοίξτε τον πίνακα σχεδιασμού CSS επιλέγοντας Παράθυρο→ Στυλ CSS.

Επιλέξτε ένα υπάρχον φύλλο στυλ στον πίνακα Πηγές ή δημιουργήστε ένα νέο κάνοντας κλικ στο σύμβολο συν (+) στον πίνακα Πηγές.

Κάντε κλικ στο σύμβολο συν (+) στον πίνακα @Media στον πίνακα σχεδιαστή CSS.

Ανοίγει το παράθυρο διαλόγου Ορισμός ερωτημάτων πολυμέσων.

Επιλέξτε Μέσα από την πρώτη αναπτυσσόμενη λίστα και Οθόνη από τη δεύτερη αναπτυσσόμενη λίστα.

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

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

Σημείωση: Τα σύμβολα συν και μείον γίνονται ορατά μόνο όταν περάσετε τον κέρσορα στη δεξιά πλευρά του πλαισίου διαλόγου.

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

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

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

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

Κάντε κλικ στο OK.

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

Για να προσθέσετε επιπλέον ερωτήματα πολυμέσων σε οποιοδήποτε επιλεγμένο φύλλο στυλ, επαναλάβετε τα βήματα 3–8. Για να προσθέσετε ερωτήματα πολυμέσων σε διαφορετικό φύλλο στυλ, επαναλάβετε τα βήματα 2–8.

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