Πώς να τοποθετήσετε στοιχεία στο Dreamweaver για να δημιουργήσετε τρεις διατάξεις σε ένα ρευστό πλέγμα

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

Πώς να επεξεργαστείτε τη διάταξη για κινητά στο Dreamweaver

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

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

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

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

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

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

Μπορείτε να αντιγράψετε και να επικολλήσετε κείμενο, καθώς και να εφαρμόσετε ετικέτες HTML και μορφοποίηση CSS.

Επιλέξτε ένα στοιχείο στην περιοχή σχεδίασης.

Το αντίστοιχο στυλ CSS εμφανίζεται στον πίνακα Επιλογείς, όπου μπορείτε να το επεξεργαστείτε.

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

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

Πώς να επεξεργαστείτε τη διάταξη του tablet στο Dreamweaver

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

Για να επεξεργαστείτε τη διάταξη του tablet, ακολουθήστε αυτές τις οδηγίες.

Επιλέξτε την επιλογή Μέγεθος tablet, κάτω δεξιά στο χώρο εργασίας.

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

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

Το Dreamweaver παρέχει μια συλλογή εργαλείων οπτικής επεξεργασίας που διευκολύνουν την προσαρμογή του μεγέθους και της θέσης των στοιχείων ρευστού πλέγματος.

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

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

Το στοιχείο μετακινείται προς τα πάνω και ευθυγραμμίζεται δίπλα στο στοιχείο από πάνω του.

Για να μετακινήσετε ένα στοιχείο προς τα κάτω, κάντε κλικ στο βέλος Έναρξη νέας σειράς.

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

Πώς να επεξεργαστείτε τη διάταξη της επιφάνειας εργασίας στο Dreamweaver

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

Για να επεξεργαστείτε τη διάταξη της επιφάνειας εργασίας, ακολουθήστε αυτές τις οδηγίες.

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

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

Επιλέξτε ένα βέλος Swap στη μέση οποιωνδήποτε δύο στοιχείων για να αλλάξετε τις θέσεις των δύο στοιχείων.

Τα στοιχεία Άρθρο 1 και Άρθρο 2 μπορούν να εναλλάσσονται κάνοντας απλά κλικ στο βέλος Εναλλαγή μεταξύ τους.

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

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

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

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

Πώς να κάνετε εναλλαγή μεταξύ των διατάξεων στο Dreamweaver

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

Λάβετε υπόψη τους ακόλουθους μερικούς γενικούς κανόνες και βέλτιστες πρακτικές:

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

• Όταν επεξεργάζεστε στυλ, πρέπει να προσέχετε ότι επεξεργάζεστε τα στυλ που αντιστοιχούν στη διάταξη που θέλετε να εργαστείτε.

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

• Όταν δημιουργείτε στυλ που θέλετε να εφαρμόσετε και στις τρεις διατάξεις, επιλέξτε πρώτα Οποιοδήποτε μέσο από τον πίνακα @Media στον πίνακα σχεδιασμού CSS,