Tutorial για CSS στο Dreamweaver

Cascading Style Sheets ( CSS ) είναι μια προηγμένη μορφή του κώδικα HTML της ιστοσελίδας κωδικοποίησης που παρέχει αυξημένη σχεδιασμό και τις επιλογές μορφοποίησης . Αντί της εφαρμογής μεμονωμένων τμήματα κώδικα HTML για κάθε μπλοκ κειμένου ή τμήμα της σελίδας , CSS σας επιτρέπει να ορίσετε "στυλ " τους κανόνες και τις κατηγορίες , παρόμοια με σύνολα στυλ σε επεξεργασία κειμένου και λογισμικό διάταξη σελίδας . Μπορείτε έπειτα να εφαρμόσετε τα στυλ σε στοιχεία στις σελίδες σας --- κάνοντας μορφοποίηση ταχύτερη και ευκολότερη , καθώς και την εξασφάλιση της ομοιομορφίας σε ολόκληρη τη σελίδα ή μια ολόκληρη ιστοσελίδα . Ενσωματωμένη δυνατότητα CSS Dreamweaver φαίνεται περίπλοκο στην αρχή , αλλά μετά δεν έχετε δοκιμάσει μερικές φορές . Τα πράγματα που θα χρειαστείτε
Adobe Dreamweaver CS1 ή αργότερα
Η Εμφάνιση Περισσότερες οδηγίες
Χρήση CSS στο Dreamweaver

1

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

Μεταβείτε στον πίνακα Ιδιότητες και κάντε κλικ στο κουμπί " CSS " που βρίσκεται στην αριστερή πλευρά του πίνακα . Αυτό βάζει σε λειτουργία το Dreamweaver CSS .
Εικόνων 3

Κάντε κλικ στο «Στοχευμένη κανόνα " drop-down στον πίνακα Properties και επιλέξτε " " .
Η 4

Κάντε κλικ στο κουμπί " Επεξεργασία κανόνα " στον πίνακα Properties . Αυτό ανοίγει το παράθυρο διαλόγου New CSS Rule όπου μπορείτε να ονομάσετε τη νέα κανόνα στυλ σας και να καθορίζουν τη συμπεριφορά του .
5

Κάντε κλικ στην " Επιλογή τύπου " drop-down . Υπάρχουν τέσσερις επιλογές σε αυτό το drop- drop , τα οποία έχουν περιγραφικά ονόματα εξηγώντας τι κάνουν . Για παράδειγμα , " Class ( μπορεί να εφαρμόζεται σε κάθε στοιχείο HTML ) " σας επιτρέπει να δημιουργήσετε μια κατηγορία στυλ που μπορείτε να εφαρμόσετε σε οποιοδήποτε κείμενο στο έγγραφο . " Η ένωση ( με βάση την επιλογή σας ) " σας επιτρέπει να δημιουργήσετε μια κατηγορία στυλ που βασίζεται σε κείμενο που θα επιλέξετε πριν κάνετε κλικ στο " Επεξεργασία κανόνα . "
Η

6 Κάντε κλικ στο πεδίο " Selector Name" και πληκτρολογήστε το όνομα σας στυλ . Ανάλογα με το τι Επιλογή τύπου που επιλέξατε στο προηγούμενο βήμα , ορισμένα είδη κανόνες στυλ απαιτούν ειδικές συμβάσεις ονομασίας . Για παράδειγμα , " Class ( μπορεί να εφαρμόζεται σε κάθε στοιχείο HTML ) " απαιτεί ότι το όνομα του στυλ ξεκινούν με μια τελεία ( . ) . Έτσι , εάν είστε καθορισμό ενός στυλ επικεφαλίδας , για παράδειγμα, θα μπορούσε να ονομάσει το πρώτο επίπεδο επικεφαλίδας " . H1 . " Θα μπορούσα να αναφέρω το σώμα κειμένου " . Σώμα» . Dreamweaver θα σας ρωτήσει αν σύμβαση ονομασίας σας είναι λάθος , και να σας παρέχει μια εξήγηση για το πώς να ονομάσει το ύφος .
Η

7 Κάντε κλικ στο " Κανόνας Ορισμός " drop-down και να επιλέξετε πώς θέλετε το Dreamweaver να εφαρμόσετε το στυλ . Υπάρχουν δύο επιλογές : "Αυτό το έγγραφο μόνο " δημιουργεί τις ετικέτες στυλ στην ενότητα HTML Επικεφαλής της τρέχουσας σελίδας . Οι μορφές είναι διαθέσιμες μόνο για αυτή τη σελίδα . " (New Style Sheet File ) " θα δημιουργήσει ένα εξωτερικό CSS ( . Css ) αρχείο .

Η δύναμη του CSS είναι ότι μπορείτε να διαμορφώσετε πολλές σελίδες --- μια ολόκληρη περιοχή --- με βάση το ίδιο σύνολο κανόνες CSS . Αυτό επιτυγχάνεται με εξωτερικά αρχεία CSS . Εάν επιλέξετε " ( New Style Sheet File ) , " όταν κάνετε κλικ στο "OK " σε αυτό το παράθυρο διαλόγου , το Dreamweaver σας ζητά να ονομάσετε το αρχείο CSS . Εάν χρησιμοποιείτε μόνο ένα αρχείο CSS για ολόκληρο το οικόπεδο , η τυπική σύμβαση ονομασίας είναι " styles.css . " Ωστόσο , μια περιοχή μπορεί να έχει πολλά φύλλα στυλ --- ένα για τις κεφαλίδες , υποσέλιδα για ένα άλλο , πλαϊνές μπάρες . Δώστε CSS αρχεία σας νόημα ονόματα .

Αφού δημιουργήσετε το πρώτο εξωτερικό αρχείο CSS σας , την επόμενη φορά που θα ανοίξετε New CSS Rule , το αρχείο εμφανίζεται στο Κανόνας Ορισμός drop-down . Όταν δημιουργείτε ένα άλλο ύφος , φροντίστε να το προσθέσετε στο κατάλληλο εξωτερικό αρχείο CSS .
8

Κάντε κλικ στο " OK" για να εμφανιστεί το " CSS Rule Definition για ... " παράθυρο διαλόγου . Αυτό είναι όπου μπορείτε να διαμορφώσετε το στυλ σας , όπως η γραμματοσειρά , το μέγεθος , το στυλ ( έντονα, πλάγια ) , το χρώμα . Οι επιλογές εδώ είναι εκτεταμένη , επιτρέποντας μάλλον επεξεργαστεί μορφοποίηση , συμπεριλαμβανομένων των πλαισίων κειμένου , το υπόβαθρο και πολλές άλλες επιλογές μορφοποίησης . Ρυθμίστε όλες τις επιθυμητές μορφοποίηση για αυτό το ύφος , και στη συνέχεια κάντε κλικ στο κουμπί "OK".
Η 9

Επαναλάβετε αυτή τη διαδικασία για να δημιουργήσετε επιπλέον κανόνες στυλ . Για να εφαρμόσετε ένα στυλ σε ένα μπλοκ κειμένου , απλά κάντε κλικ στο σημείο , και στη συνέχεια επιλέξτε το επιθυμητό στυλ από το «Στοχευμένη κανόνα " drop-down στον πίνακα Properties .

Η