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

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

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

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

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

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

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

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

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

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

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

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

   Το πλάτος για την ετικέτα κοντέινερ έχει οριστεί σε 980 pixels. Εδώ είναι το τέχνασμα για να κεντράρετε μια ετικέτα όπως αυτή: Ρυθμίστε τα αριστερά και δεξιά περιθώρια σε Auto. Με αυτό τον τρόπο, ένα πρόγραμμα περιήγησης προσθέτει αυτόματα ένα ίσο ποσό περιθωρίου περιθωρίου σε κάθε πλευρά της ετικέτας, συγκεντρώνοντάς το αποτελεσματικά στη σελίδα.

   

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

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

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

   Οι κανόνες στυλ που ορίσατε όταν δημιουργήσατε το στυλ εφαρμόζονται αυτόματα στην ετικέτα. Σε αυτό το παράδειγμα, το αποτέλεσμα είναι ότι το μέγεθος της ετικέτας αλλάζει σε πλάτος 980 pixel και η ετικέτα και όλο το περιεχόμενό της είναι κεντραρισμένα στη σελίδα.

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