Πώς να δημιουργήσετε σχετικώς τοποθετημένους DIV στο Adobe Dreamweaver CS6 - ανδρείκελα

Η ακριβής τοποθέτηση των AP (Absolute-Positioned) Divs στο Adobe Dreamweaver CS6 μπορεί να απελευθερωθεί για τους σχεδιαστές, εκείνους που τους αρέσει η ευελιξία των σχεδίων με βάση την εκτύπωση.

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

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

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

Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε ένα σχετικά τοποθετημένο DIV:

1. Κάντε κλικ στη σελίδα σας για να τοποθετήσετε τον δρομέα σε ένα υπάρχον AP Div και, στη συνέχεια, κάντε κλικ στο εργαλείο Insert Div Tag κάτω από το Common κατηγορίες.

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

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

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

   

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

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

5. Όταν εμφανιστεί το παράθυρο διαλόγου Νέο κανόνα CSS, βεβαιωθείτε ότι ο νέος επιλογέας σας έχει οριστεί σε αναγνωριστικό και ότι το όνομα έχει ένα σημάδι λίρας (#) μπροστά του. Κάντε κλικ στο κουμπί OK.

6. Όταν εμφανιστεί το παράθυρο διαλόγου Ορισμός κανόνων CSS, κάντε κλικ και επιλέξτε Θέση από τη λίστα Κατηγοριών στα αριστερά για να δείτε τις ιδιότητες τοποθέτησης CSS.

7. Στην περιοχή Τοποθέτηση, επιλέξτε Σχετικό από το μενού Θέση, εισαγάγετε μια τιμή πλάτους και ύψους στα πλαίσια κειμένου Πλάτος και ύψος και εισαγάγετε μια τιμή Κορυφή και αριστερά κάτω από τις ιδιότητες Τοποθέτηση.Κάντε κλικ στο κουμπί OK.

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

   Εμφανίζεται ένα νέο, σχετικά τοποθετημένο DIV με κείμενο με σύμβολο κράτησης θέσης.

   

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