Πώς να επεξεργαστείτε τα στυλ σε μια διάταξη CSS στο Dreamweaver - ανδρείκελα

Αφού δημιουργήσετε μια νέα σελίδα με διάταξη CSS στο Dreamweaver, έχετε έναν φαινομενικά άπειρο αριθμό επιλογών για την επεξεργασία, αλλά πρώτα πρέπει να καθορίσετε ποια στυλ στο φύλλο στυλ αντιστοιχούν στα στοιχεία που θέλετε να επεξεργαστείτε.

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

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

Πώς να ελέγξετε τα διαθέσιμα στυλ και να κάνετε βασικές επεξεργασίες

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

1. Ανοίξτε ένα αρχείο σελίδας που βασίζεται σε διάταξη CSS του Dreamweaver και επιλέξτε Παράθυρο → Στυλ CSS (ή κάντε κλικ στην καρτέλα CSS Designer για να αναπτύξετε τον πίνακα).

   Ο πίνακας CSS Designer ανοίγει ή επεκτείνεται.

2. Κάντε κλικ για να επιλέξετε το όνομα του φύλλου στυλ στον πίνακα Πηγές στο πάνω μέρος του CSS Designer.

   Όλα τα στυλ που σχετίζονται με τη νέα σελίδα παρατίθενται στον πίνακα επιλογών.

   

3. Επιλέξτε το όνομα κάθε στυλ που εμφανίζεται στον πίνακα επιλογών σχεδιαστή CSS.

   Οι αντίστοιχοι κανόνες CSS που έχουν οριστεί για το στυλ εμφανίζονται στον πίνακα Ιδιότητες, στο κάτω μέρος του πλαισίου του CSS Designer. Κάνοντας κλικ στη λίστα των στυλ και εξετάζοντας τους αντίστοιχους κανόνες είναι ένας καλός τρόπος για να πάρετε μια γρήγορη επισκόπηση του σχεδιασμού και να δείτε πού αποθηκεύονται οι διάφορες επιλογές μορφοποίησης σελίδας.

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

Τρόπος επεξεργασίας ρυθμίσεων σε ολόκληρη τη σελίδα

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

1. Στον πίνακα επιλογής σχεδιαστή CSS, επιλέξτε το στυλ που ονομάζεται σώμα.

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

   

2. Κάντε κλικ στο εικονίδιο T στην κορυφή του πίνακα Ιδιότητες και αλλάξτε ή προσθέστε την επιθυμητή γραμματοσειρά και άλλες ρυθμίσεις κειμένου.

   Μπορείτε να αλλάξετε την επιφάνεια, μέγεθος, στυλ και βάρος της γραμματοσειράς. Για να αλλάξετε το διάστημα μεταξύ γραμμών κειμένου, αλλάξτε το ύψος γραμμής.

3. Κάντε κύλιση προς τα κάτω στην περιοχή φόντου του πίνακα "Ιδιότητες" και χρησιμοποιήστε το χρώμα καλά στο πεδίο "Χρώμα φόντου" για να καθορίσετε ένα χρώμα για ολόκληρο το φόντο της σελίδας.

   Εναλλακτικά, μπορείτε να εισαγάγετε οποιονδήποτε δεκαεξαδικό κωδικό χρώματος στο πεδίο Background-Color ή χρησιμοποιήστε το σταγονόμετρο για να δοκιμάσετε οποιοδήποτε χρώμα. Για να προσθέσετε μια εικόνα φόντου, κάντε κλικ στο πεδίο διεύθυνσης URL στην ενότητα Υποβάθρου και στη συνέχεια κάντε κλικ στο κουμπί Αναζήτηση που εμφανίζεται και επιλέξτε την εικόνα που θέλετε να εμφανιστεί ως φόντο. Χρησιμοποιήστε τα εικονίδια Background-Repeat για να καθορίσετε τον τρόπο επαναφοράς της εικόνας φόντου στη σελίδα.

4. Κάντε οποιεσδήποτε άλλες αλλαγές ή προσθήκες στον κανόνα στυλ.

Οι αλλαγές στους κανόνες στυλ στον πίνακα "Ιδιότητες" αποθηκεύονται αυτόματα και εφαρμόζονται σε περιεχόμενο μορφοποιημένο με τον κανόνα.

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

Για να αλλάξετε το πλάτος ολόκληρης της κύριας περιοχής σχεδιασμού:

1. Κάντε κλικ στο. στυλ κοντέινερ στον πίνακα επιλογών του πλαισίου σχεδιαστή CSS.

   1. Οι ιδιότητες του. ο κανόνας στυλ δοχείου εμφανίζονται στον πίνακα Ιδιότητες, όπου μπορείτε επίσης να επεξεργαστείτε το στυλ.

      Αλλάξτε το μέγεθος στο πεδίο Πλάτος ή πληκτρολογήστε έναν νέο αριθμό για το επιθυμητό πλάτος σελίδας.

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

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

2. Αν αλλάξετε το πλάτος της περιοχής περιεχομένου σε μια διάταξη που περιλαμβάνει μια πλευρική γραμμή, πρέπει επίσης να αλλάξετε το πλάτος της πλευρικής γραμμής.

   Για να αλλάξετε το χρώμα φόντου οποιουδήποτε στυλ στη σελίδα, κάντε κλικ στο όνομα του αντίστοιχου στυλ και αλλάξτε τις ρυθμίσεις στην ενότητα Φόντο στον πίνακα Ιδιότητες.

3. Για παράδειγμα, στις γραμμές CSS στο Dreamweaver, η πλαϊνή γραμμή ορίζεται σε ένα στυλ που ονομάζεται. sidebar1. Έτσι, για να αλλάξετε το χρώμα φόντου, θα κάνατε κλικ. sidebar1 στον πίνακα επιλογών, επιλέξτε την κατηγορία Background στο πεδίο Properties και επιλέξτε το χρώμα που θέλετε. Ομοίως, για να αλλάξετε το χρώμα φόντου της κεφαλίδας, επιλέξτε το στυλ που ονομάζεται κεφαλίδα στον πίνακα επιλογών και χρησιμοποιήστε καλά το χρώμα.

   Για να προσθέσετε μια εικόνα στην κεφαλίδα:

   

4. Επιλέξτε την εικονίδιο κράτησης θέσης με την ένδειξη Insert Logo και πατήστε το πλήκτρο Delete ή Backspace.

   1. Επιλέξτε Εισαγωγή → Εικόνα → Εικόνα και επιλέξτε μια εικόνα χρησιμοποιώντας το παράθυρο διαλόγου Επιλογή εικόνας προέλευσης.

   2. Αντικαταστήστε το κείμενο και εισαγάγετε τις εικόνες στην πλευρική γραμμή και τις κύριες περιοχές περιεχομένου.

5. Μπορείτε να προσθέσετε ή να αντικαταστήσετε κείμενο και να εισαγάγετε εικόνες σε οποιαδήποτε σελίδα δημιουργήθηκε από μια διάταξη CSS, όπως θα κάνατε σε οποιαδήποτε άλλη ιστοσελίδα.

   Επιλέξτε Αρχείο → Αποθήκευση όλων για να αποθηκεύσετε τη σελίδα και τα στυλ.