Πώς να κεντράρετε μια διάταξη σελίδας με περιθώρια CSS στο Dreamweaver

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

Τα περισσότερα σχέδια ιστοσελίδων που δημιουργούνται με CSS επιτυγχάνουν αυτό το αποτέλεσμα δημιουργώντας ένα

ετικέτα που περιβάλλει όλο το περιεχόμενο της σελίδας και στη συνέχεια εφαρμόζει ένα στυλ σε αυτό

ετικέτα που περιλαμβάνει έναν κανόνα στυλ που εστιάζει σε αυτό

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

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

Η συνήθης πρακτική είναι να χρησιμοποιείτε ένα στυλ αναγνωριστικού για το

ετικέτα που κεντράρει το σχέδιό σας και για να το ονομάσετε #wrapper ή #container.

Εάν η σελίδα σας δεν έχει ήδη ρυθμιστεί με α

προσθέστε ετικέτα σε όλο το περιεχόμενό σας, εδώ είναι μια συμβουλή για να προσθέσετε ένα. Πρώτα κάντε κλικ και σύρετε για να επιλέξετε όλο το κείμενο, τις εικόνες και άλλο περιεχόμενο στη σελίδα. Στη συνέχεια, επιλέξτε Εισαγωγή→ Αντικείμενα διάταξης→ Ετικέτα Div. Στο παράθυρο διαλόγου Εισαγωγή ετικετών Div, βεβαιωθείτε ότι είναι επιλεγμένη η επιλογή Wrap around Selection από την αναπτυσσόμενη λίστα Εισαγωγή.

Αφήστε τα υπόλοιπα πεδία κενά και κάντε κλικ στο OK για να προσθέσετε α

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

Για να κεντράρετε μια ολόκληρη σχεδίαση σελίδας, βεβαιωθείτε ότι α

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

Κάντε κλικ στο σύμβολο συν στον πίνακα Επιλογείς σχεδιαστή CSS.

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

Κάντε διπλό κλικ για να επιλέξετε το όνομα που πρόσθεσε το Dreamweaver στον πίνακα και να το αλλάξετε στο όνομα που θέλετε για το νέο σας στυλ ή κάντε κλικ για να επιλέξετε το κενό πεδίο και να εισαγάγετε ένα όνομα.

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

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

Το πλάτος για το δοχείο

η ετικέτα έχει οριστεί στα 980 pixel. Εδώ είναι το κόλπο για να κεντράρετε το α

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

ετικέτα, κεντράροντάς την ουσιαστικά στη σελίδα.

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

Για να βεβαιωθείτε ότι έχετε επιλέξει το σωστό

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

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

Με το

επιλεγμένη ετικέτα, επιλέξτε το όνομα του στυλ που δημιουργήσατε από την αναπτυσσόμενη λίστα ID στο Property inspector.

Οι κανόνες στυλ που ορίσατε όταν δημιουργήσατε το στυλ εφαρμόζονται αυτόματα στο

ετικέτα. Σε αυτό το παράδειγμα, το αποτέλεσμα είναι ότι το μέγεθος του

η ετικέτα αλλάζει σε πλάτος 980 pixel και το

η ετικέτα και όλα τα περιεχόμενά της είναι κεντραρισμένα στη σελίδα.

Δεν λειτουργούν όλες οι λειτουργίες όταν το Dreamweaver έχει ρυθμιστεί σε Ζωντανή προβολή. Αν και η Ζωντανή προβολή είναι ένας πολύ καλός τρόπος για να κάνετε προεπισκόπηση της εμφάνισης των σχεδίων της σελίδας σας στα περισσότερα σύγχρονα προγράμματα περιήγησης ιστού, η χρήση της δυνατότητας Ζωντανής προβολής καθιστά πολλά από τα εργαλεία επεξεργασίας του Dreamweaver άχρηστα. Εάν, για παράδειγμα, το Property inspector εμφανίζεται θαμπό όταν θέλετε να το χρησιμοποιήσετε, βεβαιωθείτε ότι το κουμπί Live είναι αποεπιλεγμένο.