Σχεδίαση σημειωματάριου Δημιουργία ιστοσελίδας με CSS

01 από 10

Δημιουργήστε το φύλλο στυλ CSS

Δημιουργήστε το φύλλο στυλ CSS. Τζένιφερ Κιμίν

Με τον ίδιο τρόπο που δημιουργήσαμε ένα ξεχωριστό αρχείο κειμένου για το HTML, θα δημιουργήσετε ένα αρχείο κειμένου για το CSS. Αν χρειάζεστε οπτικά στοιχεία για αυτή τη διαδικασία, ανατρέξτε στο πρώτο σεμινάριο. Ακολουθούν τα βήματα για τη δημιουργία του φύλλου στυλ CSS στο Notepad:

  1. Επιλέξτε Αρχείο> Νέο στο Σημειωματάριο για να αποκτήσετε ένα κενό παράθυρο
  2. Αποθηκεύστε το αρχείο ως CSS κάνοντας κλικ στο File
  3. Μεταβείτε στο φάκελο my_website στο σκληρό σας δίσκο
  4. Αλλάξτε την επιλογή "Αποθήκευση ως τύπος:" σε "Όλα τα αρχεία"
  5. Ονομάστε το αρχείο "styles.css" (αφήστε τα αποσπάσματα) και κάντε κλικ στην επιλογή Αποθήκευση

02 από 10

Συνδέστε το φύλλο στυλ CSS με το HTML

Συνδέστε το φύλλο στυλ CSS με το HTML. Τζένιφερ Κιμίν

Μόλις έχετε ένα φύλλο στυλ για τον ιστότοπό σας, θα πρέπει να το συσχετίσετε με την ίδια την ιστοσελίδα. Για να το κάνετε αυτό, χρησιμοποιείτε την ετικέτα σύνδεσης. Τοποθετήστε την ακόλουθη ετικέτα συνδέσμου οπουδήποτε μέσα στις ετικέτες του εγγράφου pets.htm:

03 από 10

Διορθώστε τα περιθώρια σελίδας

Διορθώστε τα περιθώρια σελίδας. Τζένιφερ Κιμίν

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

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

html, σώμα {
περιθώριο: 0px;
padding: 0px;
σύνορα: 0px;
αριστερά: 0px;
κορυφή: 0px;
}}

04 από 10

Αλλαγή της γραμματοσειράς στη σελίδα

Αλλαγή της γραμματοσειράς στη σελίδα. Τζένιφερ Κιμίν

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

Συνήθως, θα αλλάζετε τη γραμματοσειρά σε παραγράφους ή μερικές φορές σε ολόκληρο το έγγραφο. Για αυτόν τον ιστότοπο θα καθορίσουμε τη γραμματοσειρά στο επίπεδο κεφαλίδας και παραγράφων. Προσθέστε τα ακόλουθα στο έγγραφο styles.css:

p, li {
γραμματοσειρά: 1em Arial, Helvetica, sans-serif;
}}
h1 {
γραμματοσειρά: 2em Arial, Helvetica, sans-serif;
}}
h2 {
γραμματοσειρά: 1.5em Arial, Helvetica, sans-serif;
}}
h3 {
γραμματοσειρά: 1.25em Arial, Helvetica, sans-serif;
}}

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

05 από 10

Κάνοντας τους συνδέσμους σας πιο ενδιαφέροντα

Κάνοντας τους συνδέσμους σας πιο ενδιαφέροντα. Τζένιφερ Κιμίν

Τα προεπιλεγμένα χρώματα για τους συνδέσμους είναι μπλε και μοβ για τους συνδέσμους που δεν επισκέπτονται και επισκέπτονται αντίστοιχα. Αν και αυτό είναι τυποποιημένο, ενδέχεται να μην ταιριάζει με το χρώμα των σελίδων σας, οπότε ας το αλλάξουμε. Στο αρχείο σας styles.css, προσθέστε τα εξής:

ένας σύνδεσμος {
γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif;
χρώμα: # FF9900;
κείμενο-διακόσμηση: υπογράμμιση;
}}
a: επισκέφθηκε {
χρώμα: # FFCC66;
}}
α: αιωρείται {
φόντο: #FFFFCC;
γραμματοσειρά-βάρος: έντονα.
}}

Δημιούργησα τρία στυλ συνδέσμων, τον σύνδεσμο a: σύνδεσμος ως προεπιλογή, ένα: επισκέφτηκα όταν επισκέφτηκα, αλλάξω το χρώμα και ένα: αιώρηση. Με μια: hover έχω το σύνδεσμο πάρει ένα χρώμα φόντου και πηγαίνετε τολμηρό για να τονίσω ότι είναι ένας σύνδεσμος για να κάνετε κλικ.

06 από 10

Σχεδίαση του τμήματος πλοήγησης

Σχεδίαση του τμήματος πλοήγησης. Τζένιφερ Κιμίν

Δεδομένου ότι βάζουμε πρώτα την ενότητα πλοήγησης (id = "nav") στο HTML, ας το στυλ πρώτα. Πρέπει να υποδείξουμε πόσο ευρύ θα έπρεπε να είναι και να θέσουμε ένα ευρύτερο περιθώριο στη δεξιά πλευρά, έτσι ώστε το κύριο κείμενο να μην χτυπηθεί ενάντια σε αυτό. Έβαλα επίσης ένα περίγραμμα γύρω από αυτό.

Προσθέστε το ακόλουθο CSS στο έγγραφό σας στο style.css:

#nav {
πλάτος: 225px;
περιθώριο-δεξιά: 15px;
σύνορα: μεσαία στερεά # 000000;
}}
#nav li {
λίστας-style: κανένας;
}}
.footer {
μέγεθος γραμματοσειράς: .75em;
σαφής: και οι δύο?
πλάτος: 100%.
κείμενο-ευθυγράμμιση: κέντρο;
}}

Η ιδιότητα λίστας ρυθμίζει τη λίστα μέσα στην ενότητα πλοήγησης ώστε να μην έχει κουκκίδες ή αριθμούς και το .footer στυλ το τμήμα πνευματικών δικαιωμάτων να είναι μικρότερο και κεντροθετημένο μέσα στην ενότητα.

07 από 10

Τοποθέτηση του κύριου τμήματος

Τοποθέτηση του κύριου τμήματος. Τζένιφερ Κιμίν

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

Τοποθετήστε τα ακόλουθα στο έγγραφο styles.css:

#main {
πλάτος: 800px;
κορυφή: 0px;
θέση: απόλυτη;
αριστερά: 250px;
}}

08 από 10

Σχεδίαση των παραγράφων σας

Σχεδίαση των παραγράφων σας. Τζένιφερ Κιμίν

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

Τοποθετήστε τα ακόλουθα στο έγγραφο styles.css:

.η πάνω σειρά {
κορυφαία όψη: παχύ στερεό # FFCC00;
}}

Αποφάσισα να το κάνω ως κατηγορία που ονομάζεται "topline" και όχι απλώς να ορίσω όλες τις παραγράφους με αυτό τον τρόπο. Με αυτόν τον τρόπο, εάν αποφασίσω ότι θέλω να έχω μια παράγραφο χωρίς κορυφαία κίτρινη γραμμή, μπορώ απλά να αφήσω την κατηγορία = "topline" στην ετικέτα παραγράφου και δεν θα έχει τα ανώτατα όρια.

09 από 10

Σχεδίαση των εικόνων

Σχεδίαση των εικόνων. Τζένιφερ Κιμίν

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

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

Τοποθετήστε τα ακόλουθα στο έγγραφο styles.css:

#main img {
float: αριστερά.
margin-right: 5px;
περιθώριο-κάτω: 15px;
}}
.χωρίς σύνορα {
σύνορα: 0px κανένας;
}}

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

10 από 10

Τώρα δείτε την ολοκληρωμένη σελίδα σας

Τώρα δείτε την ολοκληρωμένη σελίδα σας. Τζένιφερ Κιμίν

Αφού αποθηκεύσετε το CSS, μπορείτε να φορτώσετε ξανά τη σελίδα pets.htm στο πρόγραμμα περιήγησης στο Web. Η σελίδα σας θα πρέπει να μοιάζει με αυτή που φαίνεται σε αυτήν την εικόνα, με τις εικόνες ευθυγραμμισμένες και την πλοήγηση τοποθετημένη σωστά στην αριστερή πλευρά της σελίδας.

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