Πώς να φτιάξετε έναν ιστότοπο: Για αρχάριους

Πώς να φτιάξετε έναν ιστότοπο: Για αρχάριους

Πάντα ήθελες να φτιάξεις έναν ιστότοπο; Maybeσως έχετε διαβάσει κάποιο από τα HTML μας ( κατανόηση HTML ) και μαθήματα CSS, αλλά δεν ξέρω πώς να χρησιμοποιήσω αυτές τις γλώσσες σε ένα μεγαλύτερο έργο.





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



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





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

Ο σχεδιασμός

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



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

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



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

Μην ανησυχείτε αν δεν έχετε Adobe 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.
  • Ορίζει έναν τίτλο σελίδας 'Noise Media'
  • Περιλαμβάνει jQuery που φιλοξενείται στο Google CDN (τι είναι CDN).
  • Περιλαμβάνει το Font Awesome που φιλοξενείται στο CDN Google.
  • Ορίζει α στυλ ετικέτα για να γράψετε το CSS σας.
  • Ορίζει α γραφή ετικέτα για να γράψετε το JavaScript σας.

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

Προσέξτε πώς είναι ο τίτλος της σελίδας Μέσα θορύβου Το Αυτό ορίζεται από το κείμενο μέσα στο τίτλος ετικέτα. Αυτό έχει να είναι μέσα στο κεφάλι ετικέτες.

Το chrome χρησιμοποιεί πάρα πολύ μνήμη

Η κεφαλίδα

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

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

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

Όσο είστε εδώ, ας το διαλύσουμε. ΕΝΑ div είναι σαν ένα δοχείο για να τοποθετήσετε άλλα πράγματα. Αυτό το 'άλλο υλικό' μπορεί να είναι περισσότερα δοχεία, κείμενο, εικόνες, οτιδήποτε πραγματικά. Υπάρχουν ορισμένοι περιορισμοί στο τι μπορεί να μπει σε συγκεκριμένες ετικέτες, αλλά τα div είναι αρκετά γενικά πράγματα. Έχει ένα ταυτότητα του 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;
}

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

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

HTML:


CSS:

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

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

background: red;

It'sρθε η ώρα να δημιουργήσετε το λογότυπο τώρα. 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;
}

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

Προχωρώντας στη γραμμή πλοήγησης, θα χρησιμοποιήσετε μια λίστα χωρίς τακτοποίηση ( ο ) για αυτό. Προσθέστε αυτό το 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 ξεκινά με ένα λίστα χωρίς τακτοποίηση Το Στη συνέχεια, αφαιρεί τα σημεία σφαίρας χρησιμοποιώντας list-style-type: none; Το Οι σύνδεσμοι απέχουν λίγο μεταξύ τους και έχουν χρώμα όταν τοποθετείτε το ποντίκι πάνω τους. Το μικρό γκρι διαχωριστικό είναι ένα δεξί περίγραμμα σε κάθε στοιχείο, το οποίο στη συνέχεια αφαιρείται για το τελευταίο στοιχείο χρησιμοποιώντας το τελευταίο σύνδεσμο τάξη. Δείτε πώς φαίνεται:

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

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

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

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

Κύρια περιοχή περιεχομένου

It'sρθε η ώρα να προχωρήσετε στην κύρια περιοχή περιεχομένου-το λεγόμενο «πάνω από το πάσο». Δείτε πώς φαίνεται αυτό το μέρος:

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

Θα χρειαστείτε το δείγμα εικόνας για αυτό το μέρος. Περιλαμβάνεται στη λήψη. Αυτή η εικόνα έχει πλάτος 670 px και προέρχεται από την κριτική Panasonic Lumix DMC-G80/G85.

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



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

πώς να διορθώσετε τον μη αφαιρέσιμο όγκο εκκίνησης

Alternatively, check out our review of the Panasonic G80 shown on the right!






Παρατηρήστε πώς το κανονικό περιτύλιγμα το στοιχείο επέστρεψε (αυτή είναι η χαρά της χρήσης τάξεων). Σως αναρωτιέστε γιατί η εικόνα ( 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 */
}

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

Περιοχή προσφοράς

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

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

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



makeuseof is the best website ever


Joe Coburn



Και μετά αυτό το 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;
}

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

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

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

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






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



Αυτά τα τρία εικονίδια είναι επίσης Font-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; Το Η ρύθμιση αυτής της τιμής ίδια με το πλάτος οδηγεί σε έναν τέλειο κύκλο. Μπορείτε να το μειώσετε αν προτιμάτε περισσότερο ένα τετράγωνο με στρογγυλεμένες γωνίες. Παρατηρήστε πώς εφαρμόζονται οι ενέργειες δείκτη του ποντικιού στα divs - δεν περιορίζεται μόνο σε συνδέσμους. Δείτε πώς φαίνεται αυτή η ενότητα τώρα:

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

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

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

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

Προσθέστε λίγη πίτσα

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

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

Οι γραμματοσειρές Web είναι μια απλή διαδικασία. Ακριβώς όπως η φόρτωση μιας νέας γραμματοσειράς στον υπολογιστή σας, οι ιστοσελίδες μπορούν να φορτώσουν γραμματοσειρές κατά παραγγελία. Ένας από τους καλύτερους τρόπους για να γίνει αυτό είναι μέσω Γραμματοσειρές 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 και σώματος για να χρησιμοποιήσετε τις νέες γραμματοσειρές:

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

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

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

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





Ακολουθεί το CSS που απαιτείται για την απόκρυψη των πρόσθετων επιλεγμένων εικόνων:

.hidden {
display: none;
}

Τώρα που φροντίζουμε για το HTML και το CSS, ας περάσουμε στο JavaScript. Είναι χρήσιμο να κατανοήσετε το μοντέλο αντικειμένου εγγράφου (DOM) για αυτό το μέρος, αλλά δεν είναι απαίτηση.

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


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

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

/* 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;
}
}
});

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

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

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

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

Βελτιώστε την κύλιση της εικόνας: Τροποποιήστε το JavaScript για να ζωντανέψετε τις αλλαγές της εικόνας (συμβουλή: κοιτάξτε το jQuery ξεθωριάζω και Κινούμενα ).

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

Ρύθμιση διακομιστή: Ρύθμιση διακομιστή και αποστολή δεδομένων μεταξύ της ιστοσελίδας και του διακομιστή (υπόδειξη: διαβάστε τον οδηγό μας για JSON και Python).

μεταχειρισμένο κατάστημα ανταλλακτικών υπολογιστή κοντά μου

Μόλις αισθανθείτε άνετα χρησιμοποιώντας το JavaScript ή αν έχετε οποιαδήποτε εμπειρία με τη Ruby, μπορείτε να δοκιμάσετε το χέρι σας στη δημιουργία ενός ιστότοπου με έναν στατικό δημιουργό ιστότοπων όπως το GatsbyJS ή ο Jekyll.

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να αλλάξετε την εμφάνιση και την αίσθηση της επιφάνειας εργασίας των Windows 10

Θέλετε να μάθετε πώς να κάνετε τα Windows 10 να φαίνονται καλύτερα; Χρησιμοποιήστε αυτές τις απλές προσαρμογές για να κάνετε τα Windows 10 δικά σας.

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • HTML
  • Σχεδιασμός Ιστού
  • CSS
Σχετικά με τον Συγγραφέα Τζο Κόμπερν(136 δημοσιευμένα άρθρα)

Ο Joe είναι απόφοιτος της Επιστήμης των Υπολογιστών από το Πανεπιστήμιο του Lincoln, Ηνωμένο Βασίλειο. Είναι επαγγελματίας προγραμματιστής λογισμικού και όταν δεν πετάει με drones ή δεν γράφει μουσική, μπορεί συχνά να βρεθεί να βγάζει φωτογραφίες ή να παράγει βίντεο.

Περισσότερα από τον Joe Coburn

Εγγραφείτε στο newsletter μας

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

Κάντε κλικ εδώ για εγγραφή