Πώς να τροποποιήσετε Divs με απόλυτη θέση (AP) στο Adobe Dreamweaver CS6

Κάθε ψηφίο απόλυτης θέσης (AP) που σχεδιάζετε στο Adobe Dreamweaver CS6 παρατίθεται αυτόματα στον πίνακα στοιχείων AP (επιλέξτε Παράθυρο → AP Στοιχεία για την εμφάνιση του). Ο πίνακας "Στοιχεία AP" μπορεί να σας βοηθήσει να επιλέξετε, να αποκρύψετε και να εμφανίσετε οποιεσδήποτε απόψεις AP της σελίδας. Αυτός ο πίνακας είναι χρήσιμος όταν έχετε στη διάθεσή σας πολλά AP Divs και θέλετε να πλοηγηθείτε μεταξύ τους με ακρίβεια.

Πρώτα απ 'όλα, επειδή μπορείτε να τροποποιήσετε τις ιδιότητες για οποιοδήποτε AP Div από το αντίστοιχο στυλ ταυτότητας, ο πίνακας σας βοηθά να καταλάβετε ποιο αναγνωριστικό στυλ ανήκει σε ένα Div Div.

Ο πίνακας AP Elements συχνά ομαδοποιείται με τον πίνακα "Στυλ CSS", μόνο σε περίπτωση που το ψάχνετε.

Για να τροποποιήσετε ένα πλαίσιο (AP Div), ακολουθήστε τα παρακάτω βήματα:

1. Επιλέξτε Window → AP Elements για να ανοίξετε τον πίνακα AP Elements.

2. Στην οθόνη, εντοπίστε και επιλέξτε apDiv1 για να την επισημάνετε στη σελίδα.

   Ο επιθεωρητής ιδιοτήτων εμφανίζει το μέγεθος και τη θέση του επιπλέον των άλλων ιδιοτήτων.

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

4. Κάντε κλικ στο δείγμα δίπλα στο χρώμα Bg και επιλέξτε ένα χρώμα από τον αναδυόμενο πίνακα Swatches για να ορίσετε ένα χρώμα φόντου για το πλαίσιο.

   Για πρόσθετες ιδιότητες, όπως σύνορα ή παραγεμισμένα, προσθέστε τα στον πίνακα CSS Styles.

5. Εάν ο πίνακας "Στυλ CSS" δεν είναι ήδη ορατός, ανοίξτε το επιλέγοντας Window → CSS Styles.

6. Κάντε διπλό κλικ στο στυλ ταυτότητας # apDiv1 που ελέγχει το πλαίσιο.

   Εμφανίζεται το παράθυρο διαλόγου Ορισμός κανόνων CSS.

   

7. Επιλέξτε την κατηγορία Border από τα αριστερά για να αλλάξετε το περίγραμμα.

8. Στη στήλη Στυλ, χρησιμοποιήστε την αναπτυσσόμενη λίστα "Top" για να ορίσετε ένα στυλ περιγράμματος (όπως το Solid) και στις τέσσερις πλευρές.

   Χρησιμοποιήστε την αναπτυσσόμενη λίστα "Top" στην κατηγορία "Πλάτος" για να επιλέξετε ένα πάχος περιθωρίου (για παράδειγμα, μέσο) και για τις τέσσερις πλευρές. Χρησιμοποιήστε τον επάνω επιλογέα χρωμάτων κάτω από τη στήλη Χρώμα για να αντιστοιχίσετε ένα χρώμα περιγράμματος και στις τέσσερις πλευρές.

   Για να αντιστοιχίσετε διαφορετικές τιμές σε οποιαδήποτε ή σε όλες τις πλευρές για στυλ, πλάτος ή χρώμα, καταργήστε την επιλογή του πλαισίου ελέγχου Ίδιος για όλους (All for All) κάτω από τις αντίστοιχες στήλες.

9. Στην κατηγορία Πλαίσιο στα αριστερά, κάτω από την επιλογή Padding, ρυθμίστε την επένδυση και στις τέσσερις πλευρές του κουτιού με το πάχος που θέλετε (για παράδειγμα, εισάγετε 5 px στα πλαίσια κειμένου).

10. Κάντε κλικ στο OK για να βγείτε από τον πίνακα και να εφαρμόσετε τις αλλαγές.

    Βλέπετε πώς οι ιδιότητες CSS που εφαρμόσατε επηρεάζουν το πλαίσιο apDiv1 στη σελίδα.

Για να αποκρύψετε ένα πλαίσιο που εμφανίζεται κάτω από τον πίνακα AP Elements, κάντε κλικ στη στήλη στα αριστερά του ονόματος του (κάτω από το εικονίδιο Eye) μέχρι να εμφανιστεί ένα κλειστό εικονίδιο Eye.Για να επανεμφανιστεί το πλαίσιο, κάντε κλικ στο εικονίδιο Eye μέχρι να ανοίξει ξανά το πλαίσιο.

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