Διαφήμιση

Θέλατε πάντα να δημιουργήσετε έναν ιστότοπο; Ίσως έχετε διαβάσει κάποιες από τις HTML μας (κατανόηση HTML 5 βήματα για την κατανόηση του βασικού κώδικα HTML 5 βήματα για την κατανόηση του βασικού κώδικα HTML Διαβάστε περισσότερα) και CSS tutorials 5 βήματα μωρών για να μάθουν CSS και να γίνουν Kick-Ass CSS Sorcerer 5 βήματα μωρών για να Learning CSS and Being a Kick-Ass Το CSS Sorcerer CSS είναι οι μοναδικές πιο σημαντικές ιστοσελίδες αλλαγών που έχουν δει την τελευταία δεκαετία και άνοιξε το δρόμο για τον διαχωρισμό του στυλ και του περιεχομένου. Με τον σύγχρονο τρόπο, το XHTML ορίζει τη σημασιολογική δομή ... Διαβάστε περισσότερα, αλλά δεν ξέρετε πώς να χρησιμοποιήσετε αυτές τις γλώσσες σε ένα μεγαλύτερο έργο.

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

Θα δημιουργήσετε αυτόν τον ιστότοπο χρησιμοποιώντας HTML, CSS και JavaScript με ένα άγγιγμα του jQuery (οδηγός για το jQuery Ένας βασικός οδηγός για το JQuery για τους προγραμματιστές Javascript Ένας βασικός οδηγός για το JQuery για προγραμματιστές Javascript Αν είστε προγραμματιστής Javascript, αυτός ο οδηγός για το JQuery θα βοηθήσει ξεκινάτε να κωδικοποιείτε σαν ένα ninja. Διαβάστε περισσότερα). Δεν θα κάνετε τίποτα πραγματικά αιμορραγία, οπότε αυτός ο κώδικας θα πρέπει να λειτουργεί αρκετά καλά στα περισσότερα σύγχρονα προγράμματα περιήγησης.

Εάν δεν είστε σίγουροι για κάποιο CSS, ρίξτε μια ματιά στον οδηγό CSS στο W3Schools.com.

Ο σχεδιασμός

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

Σχεδίασα αυτή την ιστοσελίδα για μια φανταστική εταιρεία στο Adobe Photoshop CC 2017. Αν σας ενδιαφέρει, βεβαιωθείτε ότι έχετε τραβήξει το αρχείο .PSD από τη λήψη του πακέτου. Ακολουθεί το περιεχόμενο του αρχείου photoshop:

Μέσα στο PSD, θα βρείτε όλα τα επίπεδα που ομαδοποιούνται, ονομάζονται και κωδικοποιούνται με χρώμα:

Θα χρειαστεί να εγκατασταθούν μερικές γραμματοσειρές για να φαίνονται σωστά τα πράγματα. Το πρώτο είναι το Font Awesome, το οποίο χρησιμοποιείται για όλα τα εικονίδια. Οι άλλες δύο γραμματοσειρές είναι PT Serif και Myriad Pro (περιλαμβάνονται στο Photoshop). Εάν δεν είστε βέβαιοι για τον τρόπο εγκατάστασης των γραμματοσειρών, διαβάστε τον οδηγό μας Πώς να εγκαταστήσετε τις γραμματοσειρές στα Windows, Mac & Linux Πώς να εγκαταστήσετε τις γραμματοσειρές σε Windows, Mac & Linux Διαβάστε περισσότερα.

Μην ανησυχείτε αν δεν έχετε το Photoshop, δεν χρειάζεται να συνεχίσετε.

Αρχικός κώδικας

Τώρα που ο σχεδιασμός είναι σαφής, ας αρχίσουμε την κωδικοποίηση! Δημιουργήστε ένα νέο αρχείο στον αγαπημένο σας επεξεργαστή κειμένου (Χρησιμοποιώ το Υψηλό κείμενο 3). Αποθηκεύστε αυτό ως index.html . Μπορείτε να ονομάσετε αυτό που θέλετε, ο λόγος που πολλές σελίδες ονομάζονται ευρετήριο οφείλεται στον τρόπο με τον οποίο λειτουργούν οι διακομιστές ιστού. Η προεπιλεγμένη ρύθμιση παραμέτρων για την πλειοψηφία των διακομιστών είναι η προβολή της σελίδας index.html, εάν δεν έχει οριστεί καμία σελίδα.

Εάν δεν θέλετε να μάθετε τα στοιχεία, πηγαίνετε αρπαγή τον πλήρη κώδικα από τη λήψη.

Εδώ είναι ο κωδικός που χρειάζεστε:

Noise Media /* CSS goes here, at the top of the page */ /* JavaScript goes here, at the bottom of the page */ 

Αυτό κάνει πολλά πράγματα:

• Ορίζει το ελάχιστο απαιτούμενο ελάχιστο HTML.
• Ορίζει έναν τίτλο σελίδας "Μέσα θορύβου"
• Περιλαμβάνει το jQuery που φιλοξενείται στο Google CDN (τι είναι το CDN Τι είναι τα CDNs & Γιατί η αποθήκευση δεν είναι πια ένα ζήτημα Τι είναι τα CDNs και γιατί η αποθήκευση δεν είναι πια ένα ζήτημα Τα CDNs καθιστούν το Διαδίκτυο γρήγορο και τις ιστοσελίδες οικονομικά προσιτές ακόμη και όταν ζυγίζετε σε εκατομμύρια χρήστες., το εύρος ζώνης κοστίζει χρήματα · όσοι από εμάς σε περιορισμένες συμβάσεις γνωρίζουμε ότι είναι πολύ καλά ... Διαβάστε περισσότερα).
• Περιλαμβάνει τη Φράση Awesome που φιλοξενείται στο Google CDN.
• Ορίζει μια ετικέτα στυλ για να γράψετε το CSS σας.
• Ορίζει μια ετικέτα δέσμης ενεργειών για να γράψετε το JavaScript σας.

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

Παρατηρήστε πως ο τίτλος της σελίδας είναι Media Noise . Αυτό ορίζεται από το κείμενο μέσα στην ετικέτα τίτλου . Αυτό πρέπει να είναι μέσα στις ετικέτες κεφαλής .

Η επικεφαλίδα

Ας δημιουργήσουμε την κεφαλίδα. Εδώ είναι αυτό που μοιάζει με:

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

Προσθέστε αυτήν την HTML μέσα στην ετικέτα του σώματος στην κορυφή:

Ενώ βρίσκεστε εδώ, ας το σπάσουμε. Ένα div είναι σαν ένα δοχείο για να βάλει άλλα πράγματα μέσα. Αυτό το "άλλο πράγμα" μπορεί να είναι περισσότερα δοχεία, κείμενο, εικόνες, τίποτα πραγματικά. Υπάρχουν ορισμένοι περιορισμοί σχετικά με το τι μπορεί να συμβεί σε ορισμένες ετικέτες, αλλά οι διαιρέσεις είναι αρκετά γενικά πράγματα. Έχει ένα id του top-bar . Αυτό θα χρησιμοποιηθεί για το στυλ με το CSS και θα το στοχεύσει με το JavaScript αν χρειαστεί. Βεβαιωθείτε ότι έχετε μόνο ένα στοιχείο με συγκεκριμένο αναγνωριστικό - θα πρέπει να είναι μοναδικό. Αν θέλετε πολλά στοιχεία να έχουν το ίδιο όνομα, χρησιμοποιήστε μια κλάση αντ 'αυτού - είναι αυτό για το οποίο έχουν σχεδιαστεί! Εδώ είναι το CSS που χρειάζεστε για να το στυλ (βάλτε την πάνω στην ετικέτα του στυλ σας):

 html, body { margin: 0; padding: 0; font-family: 'Helvetica', 'Arial'; /* initial fonts */ } #top-bar { width: 100%; background: #F1F1F1; /* light gray */ border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */ height: 25px; } 

Παρατηρήστε πώς χρησιμοποιείται το σύμβολο κατακερματισμού (#, hashtag, σημάδι λίρας) πριν το όνομα. Αυτό σημαίνει ότι το στοιχείο είναι αναγνωριστικό. Αν χρησιμοποιούσατε τάξη aa, θα χρησιμοποιούσατε μια πλήρη στάση (.). Οι ετικέτες html και σώματος έχουν μηδενική θέση και περιθώριο. Αυτό εμποδίζει τυχόν ανεπιθύμητα ζητήματα απόστασης.

Ήρθε η ώρα να προχωρήσετε στο λογότυπο και στη γραμμή πλοήγησης. Πριν ξεκινήσετε, θα χρειαστείτε ένα κοντέινερ για να βάλετε αυτό το περιεχόμενο μέσα. Ας φτιάξουμε αυτό το μάθημα (ώστε να μπορείτε να το χρησιμοποιήσετε αργότερα) και επειδή δεν είναι ένας ανταποκρινόμενος ιστότοπος, το κάνετε πλάτος 900 pixel.

HTML:

CSS:

 .normal-wrapper { width: 900px; margin: 0 auto; padding: 15px 40px; background: red; overflow: auto; } 

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

 background: red; 

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

Προσθέστε αυτήν την HTML μέσα στο κανονικό περιτύλιγμα div:

  
 Μέσα θορύβου 

CSS:

 .logo-icon { color: #000000; font-size: 60pt; float: left; } h1 { float: left; margin: 21px 0 0 25px; } 

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

Μεταβαίνοντας στη γραμμή πλοήγησης, θα χρησιμοποιήσετε μια μη ταξινομημένη λίστα ( UL ) γι 'αυτό. Προσθέστε αυτό το HTML μετά το δοχείο με το λογότυπο (αλλά ακόμα μέσα στο κανονικό περιτύλιγμα ):

Σπίτι
Σχετικά με
Κριτικές
Επικοινωνία

Το href χρησιμοποιείται για τη σύνδεση με άλλες σελίδες. Αυτός ο ιστότοπος εκμάθησης δεν έχει άλλες σελίδες, αλλά μπορείτε να βάλετε το όνομα και τη διαδρομή αρχείου (αν απαιτείται) εδώ, π.χ. reviews.html . Βεβαιωθείτε ότι το βάλετε αυτό μέσα και στα δύο διπλά εισαγωγικά.

Εδώ είναι το CSS:

 #navbar { list-style-type: none; /* remove bullet points */ margin: 29px 0 0 0; padding: 0; float: right; font-size: 16pt; } #navbar li { display: inline; /* make items horizontal */ } #navbar li a:link, #navbar li a:visited, #navbar li a:active { text-decoration: none; /* remove underline */ color: #000000; padding: 0 16px 0 10px; /* space links apart */ margin: 0; border-right: 2px solid #B4B4B4; /* divider */ } #navbar li a:link.last-link { /* remove divider */ border-right: 0px; } #navbar li a:hover { /* change color on hover (mouseover) */ color: #EB6361; } 

Αυτό το CSS ξεκινάει με μια μη ταξινομημένη λίστα . Στη συνέχεια, καταργεί τα σημεία των κουκίδων χρησιμοποιώντας τύπο λίστας: κανένα. . Οι σύνδεσμοι βρίσκονται σε μικρή απόσταση και δίνονται ένα χρώμα όταν τοποθετείτε το ποντίκι πάνω τους. Ο μικρός γκρι διαχωριστής είναι ένα δεξί περιθώριο σε κάθε στοιχείο, το οποίο στη συνέχεια αφαιρείται για το τελευταίο στοιχείο χρησιμοποιώντας την κλάση last-link . Εδώ είναι αυτό που μοιάζει με:

Το μόνο που έχει απομείνει για αυτήν την ενότητα είναι το κόκκινο οριζόντιο χρώμα. Προσθέστε αυτήν την HTML μετά το κανονικό περιτύλιγμα :

Και εδώ είναι το CSS:

 #top-color-splash { width: 100%; height: 4px; background: #EB6361; } 

Αυτό είναι το κορυφαίο τμήμα που έγινε. Εδώ είναι αυτό που μοιάζει - αρκετά παρόμοιο με το σχέδιο;

Περιοχή κύριου περιεχομένου

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

Αυτό είναι ένα πολύ απλό κομμάτι, κάποιο κείμενο του αριστερού με μια εικόνα στα δεξιά. Αυτή η περιοχή θα χωρίζεται χαλαρά σε τρίτα, προσεγγίζοντας κατά πολύ τη χρυσή αναλογία Χρησιμοποιώντας το χρυσό λόγο στη φωτογραφία για καλύτερη σύνθεση Χρησιμοποιώντας το χρυσό λόγο στη φωτογραφία για καλύτερη σύνθεση Αγωνίζεστε με τη σύνθεση φωτογραφιών; Ακολουθούν δύο τεχνικές που βασίζονται στο Golden Ratio που θα βελτιώσουν δραστικά τα πλάνα σας με λίγη προσπάθεια από μέρους σας. Διαβάστε περισσότερα .

Θα χρειαστείτε την εικόνα δείγματος για αυτό το μέρος. Περιλαμβάνεται στη λήψη. Αυτή η εικόνα έχει πλάτος 670px και είναι από το Panasonic Lumix DMC-G80 / G85 Review Panasonic Lumix DMC-G80 / G85 Ð Ðμвю Η Panasonic Lumix DMC-G80 / G85 αναθεώρηση Το Lumix G85 είναι η τελευταία φωτογραφική μηχανή της Panasonic, το τμήμα βίντεο, με έξοδο HDMI και 4Κ καταγραφή - όλα για $ 1000! Διαβάστε περισσότερα .

Προσθέστε το HTML μετά το στοιχείο top-color-splash :

Καλως ΗΡΘΑΤΕ! 
Η Noise Media είναι μια τεχνολογική εταιρεία που ειδικεύεται σε τεχνολογικές κριτικές.
Είμαστε πολύ καλοί σε αυτό που κάνουμε, αλλά, δυστυχώς, δεν είμαστε πραγματική εταιρεία.
Βεβαιωθείτε ότι επισκέπτεστε το makeuseof.com για το πλήρες σεμινάριο σχετικά με τον τρόπο κατασκευής αυτού του ιστότοπου.
Εναλλακτικά, ελέγξτε την αναθεώρηση του Panasonic G80 που φαίνεται στα δεξιά!

Παρατηρήστε πώς επέστρεψε το στοιχείο κανονικού περιτυλίγματος (αυτή είναι η χαρά της χρήσης τάξεων). Μπορεί να αναρωτιέστε γιατί η ετικέτα εικόνας ( img ) δεν κλείνει. Αυτή είναι μια ετικέτα αυτόματης κλεισίματος. Η εμπρόσθια κάθετο ( /> ) υποδεικνύει αυτό, καθώς δεν έχει πάντα νόημα να πρέπει να κλείσετε μια ετικέτα.

CSS:

 .one-third { width: 40%; float: left; box-sizing: border-box; /* ensure padding and borders do not increase the size */ margin-top: 20px; } .two-third { width: 60%; float: left; box-sizing: border-box; /* ensure padding and borders do not increase the size */ padding-left: 40px; text-align: right; margin-top: 20px; } .featured-image { max-width: 500px; /* reduce image size while maintaining aspect ratio */ } .no-margin-top { margin-top: 0; /* remove margin on things like headers */ } 

Το πιο σημαντικό χαρακτηριστικό εδώ είναι το μέγεθος του κιβωτίου: border-box. . Αυτό εξασφαλίζει ότι τα στοιχεία θα είναι πάντοτε πλάτος 40% ή 60%. Η προεπιλογή (χωρίς αυτό το χαρακτηριστικό) είναι το καθορισμένο πλάτος σας συν τυχόν παρεμβολές, περιθώρια και σύνορα. Η κατηγορία εικόνων ( εμφανής εικόνα ) έχει μέγιστο πλάτος 500px . Εάν ορίσετε μόνο μία διάσταση (πλάτος ή ύψος) και αφήσετε το άλλο κενό, το css θα αλλάξει το μέγεθος της εικόνας διατηρώντας παράλληλα την αναλογία της εικόνας.

Quote Area

Ας δημιουργήσουμε την περιοχή της προσφοράς. Εδώ είναι αυτό που μοιάζει με αυτό:

Αυτός είναι ένας άλλος απλός χώρος. Περιέχει ένα σκούρο γκρι φόντο, με λευκό κεντρο κείμενο.

Προσθέστε αυτήν την HTML μετά από το προηγούμενο κανονικό περιτύλιγμα :

"Makeuseof είναι ο καλύτερος ιστοχώρος ποτέ" 
Τζο Κόμπερν 

Και τότε αυτό το CSS:

 #quote-area { background: #363636; color: #FFFFFF; text-align: center; padding: 15px 0; } h3 { font-weight: normal; font-size: 20pt; margin-top: 0px; } h4 { font-weight: normal; font-size: 16pt; margin-bottom: 0; } 

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

Περιοχή εικονιδίων

Ας συνεχίσουμε να πιέζουμε - είναι σχεδόν τελειωμένο! Εδώ είναι η επόμενη περιοχή που χρειάζεται να δημιουργήσετε:

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

  
 YouTube 
Δοκιμάστε το κανάλι μας YouTube για περισσότερες κριτικές, μαθήματα και δώρα!
 Κριτικές 
Αν σκοπεύετε να αγοράσετε ένα νέο gadget, ελέγξτε εδώ πρώτα. Θα σας δώσουμε εμπεριστατωμένες κριτικές για τις τελευταίες συσκευές.
 Αγορά Οδηγών 
Στο Buying Guides προσπαθούμε να παρέχουμε στους αναγνώστες τα εργαλεία για να αποκτήσουν τα καλύτερα πράγματα για το μικρότερο χρηματικό ποσό.

Αυτά τα τρία εικονίδια είναι επίσης γραμματοσειρά-Awesome. Το HTML χρησιμοποιεί και πάλι την τάξη κανονικού περιτύλιξης . Εδώ είναι το CSS:

 .icon-outer { box-sizing: border-box; /* ensure padding and borders do not increase the size */ float: left; width: 33.33%; padding: 25px; margin: 0; text-align: center; } .icon-circle { background: #EEEEEE; color: #B4B4B4; width: 200px; height: 200px; border-radius: 200px; /* make rounded corners */ margin: 0 auto; border: 2px solid #D6D6D6; box-sizing: border-box; /* ensure padding and borders do not increase the size */ font-size: 75pt; padding: 30px 0 0 0; cursor: pointer; } .icon-circle:hover { /* change color on hover (mouseover) */ color: #FFFFFF; background: #EB6361; } h5 { margin: 15px 0 10px 0; font-size: 20pt; } 

Υπάρχουν μερικά νέα πράγματα που συμβαίνουν στο CSS. Οι στρογγυλεμένες γωνίες ρυθμίζονται από την ακτίνα-ακτίνα: 200px. . Ο ορισμός αυτής της τιμής, όπως και το πλάτος, οδηγεί σε τέλειο κύκλο. Μπορείτε να το μειώσετε αν προτιμάτε περισσότερο από ένα τετράγωνο με στρογγυλεμένες γωνίες. Παρατηρήστε τον τρόπο με τον οποίο εφαρμόζονται οι δράσεις στον τίτλο του διαχωρισμού - δεν περιορίζεται μόνο σε συνδέσμους. Ακολουθεί η εμφάνιση αυτής της ενότητας:

Το υποσέλιδο

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

Εδώ είναι το CSS:

 #footer { width: 100%; background: #F1F1F1; /* light gray */ border-top: 1px solid #D4D4D4; /* dark gray "topline" */ height: 150px; } 

Δείτε - πραγματικά απλά πράγματα.

Προσθέστε μερικά Pizzazz

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

Η γραμματοσειρά που χρησιμοποιείται για τους περισσότερους τίτλους είναι η Myriad Pro . Αυτό έρχεται με το Adobe Create Cloud, αλλά δεν είναι διαθέσιμο ως webfont. Η γραμματοσειρά που χρησιμοποιείται επί του παρόντος στην ιστοσελίδα είναι η Helvetica . Αυτό φαίνεται εντάξει, έτσι μπορείτε να το αφήσετε όπως είναι, ωστόσο το PT Sans είναι διαθέσιμο ως webfont. Η γραμματοσειρά που χρησιμοποιείται για όλο το κείμενο είναι το PT Serif, το οποίο είναι διαθέσιμο ως webfont.

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

Προσθέστε αυτό το CSS για να μεταβείτε στις καλύτερες γραμματοσειρές:

 @import url('https://fonts.googleapis.com/css?family=PT+Sans'); @import url('https://fonts.googleapis.com/css?family=PT+Serif'); h1, h2, h4, h5, h6 { font-family: 'PT Sans', 'Helvetica', 'Arial'; } 

Τώρα τροποποιήστε τα στοιχεία html και body για να χρησιμοποιήσετε τις νέες γραμματοσειρές:

 font-family: 'PT Serif', 'Helvetica', 'Arial'; 

Παρατηρήστε πως το στοιχείο h3 δεν περιλαμβάνεται στη λίστα - αυτό θα είναι προεπιλεγμένο σε PT-Serif αντί PT-Sans .

Ως ένα τελικό κομμάτι του prettiness, ας χρησιμοποιήσουμε κάποιο JavaScript για να μετακινηθείτε σε τρεις διαφορετικές χαρακτηριστικές εικόνες. Θα χρειαστείτε Image_2 και Image_3 για αυτό το μέρος, και πάλι, είναι προαιρετικό. Ο ιστότοπος είναι εντελώς λειτουργικός σε αυτό το σημείο χωρίς αυτό το χαρακτηριστικό. Ας δούμε πώς θα μοιάζει (επείγει):

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

Εδώ είναι απαραίτητο το CSS για να κρύψετε τις εικόνες που εμφανίζονται με επιπλέον χαρακτηριστικά:

 .hidden { display: none; } 

Τώρα που φροντίζουμε τα HTML και CSS, μεταβείτε στο JavaScript. Είναι χρήσιμο να κατανοήσετε το JavaScript Object Model Model και την ανάπτυξη ιστού: Χρήση του μοντέλου αντικειμένου εγγράφου JavaScript και ανάπτυξη ιστού: Χρήση του μοντέλου αντικειμένου εγγράφου Αυτό το άρθρο θα σας εισάγει στον σκελετό εγγράφου με τον οποίο λειτουργεί το JavaScript. Έχοντας μια επαγγελματική γνώση αυτού του αφηρημένου μοντέλου αντικειμένου εγγράφου, μπορείτε να γράψετε JavaScript που λειτουργεί σε οποιαδήποτε ιστοσελίδα. Διαβάστε περισσότερα (DOM) για αυτό το μέρος, αλλά δεν είναι απαίτηση.

Βρείτε την περιοχή δέσμης ενεργειών στο κάτω μέρος της σελίδας:

 /* JavaScript goes here, at the bottom of the page */ 

Προσθέστε την ακόλουθη JavaScript μέσα στην ετικέτα script :

 /* JavaScript goes here, at the bottom of the page */ $(document).ready(function() { // run once the page is ready var time = 2500; // get the image containers $im1 = $('#f-image-1'); $im2 = $('#f-image-2'); $im3 = $('#f-image-3'); setInterval(function(){ // call function every x milliseconds (defined in time variable above) changeImage(); }, time); var currentImage = 1; function changeImage(){ switch(currentImage) { case 1: // show image 2 $im1.hide(); $im2.show(); $im3.hide(); currentImage = 2; break; case 2: // show image 3 $im1.hide(); $im2.hide(); $im3.show(); currentImage = 3; break; default: // show image 1 $im1.show(); $im2.hide(); $im3.hide(); currentImage = 1; } } }); 

Υπάρχουν μερικά πράγματα που συμβαίνουν εδώ. Ο κώδικας περιέχεται μέσα στο $ (document) .ready () . Αυτό σημαίνει ότι θα ολοκληρωθεί μόλις ολοκληρωθεί η προβολή της σελίδας από το πρόγραμμα περιήγησής σας - αυτή είναι μια καλή πρακτική. Η συνάρτηση setInterval () χρησιμοποιείται για να καλέσει τακτικά τη συνάρτηση changeImage () σε ένα προκαθορισμένο διάστημα σε χιλιοστά του δευτερολέπτου (1000 χιλιοστά του δευτερολέπτου = 1 δευτερόλεπτο). Αυτό αποθηκεύεται στη μεταβλητή χρόνου . Μπορείτε να αυξήσετε ή να μειώσετε αυτήν την ταχύτητα για να επιταχύνετε ή να επιβραδύνετε την κύλιση. Τέλος, χρησιμοποιείται μια απλή δήλωση για την εμφάνιση διαφορετικών εικόνων και την παρακολούθηση της τρέχουσας εικόνας.

Πρόκληση κωδικοποίησης

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

Προσθέστε ένα υποσέλιδο: Προσθέστε κάποιο κείμενο στο υποσέλιδο (υπαινιγμός: θα μπορούσατε να χρησιμοποιήσετε ξανά το κανονικό περιτύλιγμα και τα τρίτα / δύο τρίτα τάξεις.).
Βελτιώστε την κύλιση εικόνας: Τροποποιήστε το JavaScript για να ζωντανέψετε τις αλλαγές της εικόνας (υπαινιγμός: κοιτάξτε jQuery fadein και animate).
Εφαρμογή πολλαπλών εισαγωγικών: Τροποποιήστε τα αποσπάσματα για να αλλάξετε μεταξύ διαφορετικών (υπαινιγμός: κοιτάξτε τον κωδικό κύλισης εικόνας για ένα σημείο εκκίνησης).
Ρυθμίστε έναν διακομιστή: Ρυθμίστε ένα διακομιστή και στείλτε δεδομένα μεταξύ της ιστοσελίδας και του διακομιστή (υπαινιγμός: διαβάστε τον οδηγό μας για το JSON και το Python Πώς να αποκτήσετε το Python και το JavaScript για να επικοινωνήσετε χρησιμοποιώντας το JSON Πώς να αποκτήσετε Python και JavaScript για επικοινωνία χρησιμοποιώντας το JSON Today θα σας δείξει πώς να χρησιμοποιήσετε το JSON για να στέλνετε δεδομένα από το JavaScript σε Python. Θα καλύψω τον τρόπο εγκατάστασης ενός web server μαζί με όλο τον κώδικα που χρειάζεστε.

Έχετε μάθει νέες ικανότητες σήμερα; Πώς προχωρήσατε με τις προκλήσεις κωδικοποίησης; Ποιες τροποποιήσεις κάνατε για να φτιάξετε αυτόν τον ιστότοπο; Ενημερώστε μας στα παρακάτω σχόλια, θα θέλαμε να μάθουμε!