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

Το Adobe Dreamweaver CS6 χρησιμοποιεί εικονικά κοντέινερ ελεγχόμενα με CSS ή κουτιά που δημιουργήθηκαν από την ετικέτα DIV για την ελεύθερη τοποθέτηση περιεχομένου σε μια σελίδα. Η ετικέτα DIV είναι μια βασική ετικέτα που χρησιμοποιείται για τη δημιουργία περιοχών για περιεχόμενο στη σελίδα σας.

Μπορείτε να δημιουργήσετε ετικέτες DIV από πολλά μέρη του Dreamweaver, συμπεριλαμβανομένης της ενότητας Layout του πλαισίου Εισαγωγή. Κάθε ετικέτα DIV μπορεί να έχει ένα μοναδικό στυλ αναγνωριστικού που έχει εκχωρηθεί σε αυτήν για να ελέγχει τη θέση, την εμφάνιση και το μέγεθος της. Η διαδικασία της τοποθέτησης περιεχομένου απαιτεί συχνά δύο βήματα: δημιουργία της ετικέτας DIV και στη συνέχεια δημιουργία του αντίστοιχου στυλ.

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

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

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

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

Για να δημιουργήσετε αρχεία AP (Absolute-Positioned), ακολουθήστε τα εξής βήματα:

1. Δημιουργήστε μια νέα σελίδα ή ανοίξτε μια υπάρχουσα σελίδα από τον ιστότοπό σας.

2. Στην οθόνη Εισαγωγή, επιλέξτε την κατηγορία Διάταξη.

3. Επιλέξτε το εργαλείο Draw AP Div.

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

4. Κάντε κλικ οπουδήποτε στη σελίδα και σύρετε για να σχεδιάσετε ένα νέο AP Div. αφήστε το κουμπί του ποντικιού.

   

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

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

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

   Ρίξτε μια ματιά στον επιθεωρητή ιδιοτήτων και βλέπετε το όνομα καθώς και πολλές ιδιότητες DIV που αναφέρονται.

8. Εάν ο πίνακας "Στυλ CSS" δεν είναι ανοιχτός, επιλέξτε Παράθυρο → Στυλ CSS για να το ανοίξετε. κάτω από τον πίνακα Όλα, κάντε κλικ στα αριστερά του φύλλου στυλ () για να το αναπτύξετε.

   Εμφανίζεται ένα νέο στυλ ID # apDiv1 που είναι προσαρτημένο στο νέο AP Div που δημιουργήσατε. Για κάθε νέο DIV που δημιουργείται, το Dreamweaver εκχωρεί apDiv με έναν αντίστοιχο αριθμό κατά σειρά δημιουργίας.

   

9. Κάντε κλικ στο εσωτερικό του νέου πλαισίου για να πληκτρολογήσετε, επικολλήσετε ή να εισαγάγετε νέο περιεχόμενο.

Όταν σχεδιάζετε ένα AP Div στη σελίδα, συμβαίνουν δύο πράγματα: Το Dreamweaver εισάγει μια ετικέτα για να δημιουργήσει το πλαίσιο και δημιουργεί έναν επιλογέα CSS ID που αποθηκεύει τη θέση, το πλάτος, το ύψος και άλλες ιδιότητες του DIV.

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