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

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

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

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

Για αυτήν την εργασία, χρησιμοποιήστε το εργαλείο Insert Div Tag, το οποίο μπορείτε να βρείτε στις κατηγορίες Common και Layout του πίνακα Insert.

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

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

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

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

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

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

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

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

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

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

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

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

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