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

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

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

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

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

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

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

Ο πίνακας σχεδιασμού CSS ανοίγει ή επεκτείνεται.

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

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

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

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

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

Πώς να επεξεργαστείτε τις ρυθμίσεις σε όλη τη σελίδα

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

Στον πίνακα CSS Designer Selectors, επιλέξτε το στυλ με το όνομα σώμα.

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

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

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

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

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

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

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

Πώς να προσαρμόσετε τις περιοχές περιεχομένου

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

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

Κάντε κλικ στο στυλ .container στον πίνακα Επιλογείς του πίνακα σχεδιασμού CSS.

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

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

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

ετικέτες και άλλα στοιχεία περιέχονται στο

μορφοποιημένα με το στυλ .container — και όλα είναι έτοιμα να επεκταθούν για να γεμίσουν το .container

.

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

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

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

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

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

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

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

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

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

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