Τροποποίηση διάταξης CSS σε Adobe CS5 Dreamweaver - Dummies

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

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

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

2. Επιλέξτε την καρτέλα Όλα για να εμφανίσετε το φύλλο στυλ και τους κανόνες του.

   Το εσωτερικό φύλλο στυλ εμφανίζεται στην κορυφή. Κάντε κλικ στο βέλος στα αριστερά για να το αναπτύξετε και να δείτε όλους τους κανόνες που περιέχει. Οι διατάξεις που χρησιμοποιούν συνημμένο (εξωτερικό) φύλλο στυλ εμφανίζουν το όνομα του φύλλου στυλ (όπως τα στυλ.css) αντί της ετικέτας.

3. Επιλέξτε τον κανόνα του σώματος.

   Αυτό το στυλ βάσει ετικέτας ελέγχει τη γενική μορφοποίηση ολόκληρης της σελίδας (όλα μέσα στην ετικέτα).

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

5. Κάντε κλικ στο δείγμα δίπλα στον κανόνα χρώματος για να ανοίξετε τον πίνακα Swatches. επιλέξτε ένα νέο προεπιλεγμένο χρώμα για το κείμενο στη σελίδα σας.

6. Στο επάνω μέρος του πλαισίου CSS Styles, επιλέξτε ένα άλλο στυλ (για παράδειγμα, το στυλ.container δύοColElstHdr) για να δείτε τις ιδιότητές του.

   Το. το δύοColHybLtHdr #container ID στυλ ελέγχει το μέγεθος και την εμφάνιση του κύριου δοχείου διάταξης στη σελίδα.

7. Στον επιθεωρητή ιδιοτήτων, επεξεργαστείτε τις ιδιότητες για να αλλάξετε την εμφάνιση του στυλ.

   Για παράδειγμα, μπορείτε να αλλάξετε το πλάτος του κανόνα εισάγοντας έναν νέο αριθμό στο πλαίσιο κειμένου Width Rule. Εάν εισαγάγετε 95% , για παράδειγμα, κάνετε ολόκληρη τη διάταξη ευρύτερη.

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

Συνεχίστε να τροποποιείτε διαφορετικά στυλ που εμφανίζονται στον πίνακα "Στυλ CSS" και δείτε πώς επηρεάζουν διάφορα στοιχεία στη σελίδα σας. Δοκιμάστε να αλλάξετε το χρώμα του τύπου, την οικογένεια γραμματοσειρών και άλλες ιδιότητες, όπως το χρώμα και το χρώμα φόντου.

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