Δημιουργία AP Divs σε Adobe CS5 Dreamweaver - ανδρείκελα

Adobe Creative Suite 5 (Adobe CS5) Το Dreamweaver χρησιμοποιεί εικονικά δοχεία τοποθετημένα με CSS ή πλαίσια από την ετικέτα DIV για την ελεύθερη τοποθέτηση περιεχομένου σε μια σελίδα. Η ετικέτα DIV είναι μια βασική ετικέτα που χρησιμοποιείται για τη δημιουργία περιοχών για περιεχόμενο στη σελίδα σας. Κάθε ετικέτα DIV μπορεί να έχει ένα μοναδικό στυλ αναγνωριστικού που έχει εκχωρηθεί σε αυτήν για να ελέγχει τη θέση, την εμφάνιση και το μέγεθος της.

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

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

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

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

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

Χρήση τον πίνακα AP Στοιχεία για να επιλέξετε, να αποκρύψετε και να αναδιατάξετε τα AP Divs στη σελίδα σας.