Με την ανάπτυξη τόσων πολλών γλωσσών προγραμματισμού, στυλ και σήμανσης, η εκμάθηση σχεδιασμού ιστοσελίδων γίνεται πιο περίπλοκη από ποτέ. Ευτυχώς, υπάρχουν πολλά διαθέσιμα εργαλεία που θα σας βοηθήσουν να ξεκινήσετε. Αναζητήστε μερικούς βασικούς πόρους, όπως διαδικτυακά μαθήματα ή ένα ενημερωμένο βιβλίο για το σχεδιασμό ιστοσελίδων. Μόλις είστε έτοιμοι να ξεκινήσετε, ξεκινήστε κατακτώντας τα βασικά του HTML και του CSS. Στη συνέχεια, μπορείτε να ξεκινήσετε την εξερεύνηση πιο προηγμένων γλωσσών σχεδιασμού ιστοσελίδων, όπως η JavaScript!
Βήματα
Μέθοδος 1 από 4: Εύρεση πόρων σχεδιασμού ιστοσελίδων
Βήμα 1. Ελέγξτε διαδικτυακά για μαθήματα και μαθήματα σχεδιασμού ιστοσελίδων
Το Διαδίκτυο είναι γεμάτο με λεπτομερείς πληροφορίες σχετικά με τον σχεδιασμό ιστοσελίδων και πολλές από αυτές είναι ελεύθερα διαθέσιμες. Μπορείτε να ξεκινήσετε παρακολουθώντας κάποια δωρεάν διαδικτυακά μαθήματα στο Udemy ή το CodeCademy ή συμμετέχοντας σε μια κοινότητα κωδικοποίησης όπως το freeCodeCamp. Μπορείτε επίσης να βρείτε εκπαιδευτικά βίντεο σχεδιασμού ιστοσελίδων στο YouTube.
- Εάν γνωρίζετε ακριβώς τι ψάχνετε, δοκιμάστε να κάνετε μια αναζήτηση χρησιμοποιώντας συγκεκριμένους όρους (π.χ. «επιλογείς τάξεων στο σεμινάριο CSS»).
- Εάν είστε αρχάριος χωρίς εμπειρία σχεδιασμού ιστοσελίδων, ξεκινήστε μαθαίνοντας τα βασικά της κωδικοποίησης σε HTML και CSS.
Βήμα 2. Εξετάστε το μάθημα σε ένα τοπικό κολέγιο ή πανεπιστήμιο
Εάν παρακολουθείτε κολέγιο ή πανεπιστήμιο, επικοινωνήστε με το τμήμα επιστήμης υπολογιστών του σχολείου σας ή συμβουλευτείτε τον κατάλογο των μαθημάτων σας για να μάθετε εάν υπάρχουν διαθέσιμα μαθήματα σχεδιασμού ιστοσελίδων. Εάν δεν είστε στο σχολείο, ελέγξτε αν κολέγια ή πανεπιστήμια κοντά σας προσφέρουν μαθήματα συνεχούς εκπαίδευσης στον σχεδιασμό ιστοσελίδων.
Ορισμένα πανεπιστήμια προσφέρουν διαδικτυακά μαθήματα σχεδιασμού ιστοσελίδων που είναι ανοιχτά σε όποιον επιθυμεί να εγγραφεί. Ελέγξτε ιστότοπους όπως το Coursera.org για να βρείτε δωρεάν ή οικονομικά μαθήματα σχεδιασμού ιστοσελίδων που διδάσκονται από εκπαιδευτές πανεπιστημίου
Βήμα 3. Πάρτε μερικά βιβλία σχεδιασμού ιστοσελίδων από το βιβλιοπωλείο ή τη βιβλιοθήκη
Ένα καλό βιβλίο για το σχεδιασμό ιστοσελίδων μπορεί να είναι μια ανεκτίμητη αναφορά καθώς μαθαίνετε και εφαρμόζετε τη βιοτεχνία σας. Αναζητήστε ενημερωμένα βιβλία για γενικό σχεδιασμό ιστοσελίδων ή συγκεκριμένες μορφές κωδικοποίησης και γλώσσες που θα θέλατε να μάθετε.
Η ανάγνωση περιοδικών και άρθρων ιστολογίου σχετικά με το σχεδιασμό ιστοσελίδων είναι επίσης ένας καλός τρόπος για να μάθετε νέες τεχνικές, να εμπνευστείτε και να παρακολουθείτε τις τελευταίες τάσεις
Βήμα 4. Λήψη ή αγορά λογισμικού σχεδιασμού ιστοσελίδων
Το καλό λογισμικό σχεδιασμού ιστοσελίδων μπορεί να σας βοηθήσει να δημιουργήσετε ιστότοπους πιο αποτελεσματικά και αποτελεσματικά, και είναι επίσης εξαιρετικό για να σας βοηθήσει να μάθετε τις λεπτομέρειες της εφαρμογής της κωδικοποίησης, της δέσμης ενεργειών και άλλων βασικών στοιχείων σχεδιασμού. Μπορεί να επωφεληθείτε από τη χρήση εργαλείων όπως:
- Προγράμματα γραφικού σχεδιασμού, όπως το Adobe Photoshop, το GIMP ή το Sketch.
- Εργαλεία δημιουργίας ιστότοπων, όπως WordPress, Chrome DevTools ή Adobe Dreamweaver.
- Λογισμικό FTP για τη μεταφορά των τελικών αρχείων σας στον διακομιστή σας.
Βήμα 5. Βρείτε μερικά πρότυπα ιστότοπου για να παίξετε καθώς ξεκινάτε
Δεν υπάρχει τίποτα κακό με τη χρήση προτύπων καθώς μαθαίνετε τα βασικά του σχεδιασμού ιστοσελίδων. Κάντε μια αναζήτηση για πρότυπα ιστοσελίδων που σας αρέσουν και ρίξτε μια προσεκτική ματιά στον κώδικα για να πάρετε μια ιδέα για το πώς ο σχεδιαστής έθεσε τη σελίδα μαζί. Μπορείτε επίσης να πειραματιστείτε με την αλλαγή του κώδικα και την προσθήκη των δικών σας στοιχείων στο πρότυπο.
Κάντε αναζήτηση για δωρεάν πρότυπα ιστότοπου για να ξεκινήσετε ή πειραματιστείτε με πρότυπα που συνοδεύουν το λογισμικό σχεδιασμού ιστοσελίδων σας
Μέθοδος 2 από 4: Γνώση HTML
Βήμα 1. Εξοικειωθείτε με τις βασικές ετικέτες HTML
Η HTML είναι μια απλή γλώσσα σήμανσης που χρησιμοποιείται για τη μορφοποίηση των βασικών στοιχείων ενός ιστότοπου. Μπορείτε να μορφοποιήσετε διαφορετικά στοιχεία του ιστότοπού σας χρησιμοποιώντας ετικέτες. Οι ετικέτες εμφανίζονται σε αγκύλες πριν και μετά από κάθε στοιχείο και παρέχουν οδηγίες σχετικά με τον τρόπο λειτουργίας αυτού του στοιχείου στη σελίδα. Για να κλείσετε την ετικέτα, τοποθετήστε a / μπροστά από την τελική ετικέτα μέσα στις γωνιακές αγκύλες.
- Για παράδειγμα, εάν θέλετε να είναι μέρος του κειμένου σας τολμηρός, θα περιβάλλετε το στοιχείο με την ετικέτα, όπως αυτό: Αυτό το κείμενο είναι τολμηρό.
- Μερικές κοινές ετικέτες περιλαμβάνουν (παράγραφο), (άγκυρα, που ορίζει το συνδεδεμένο κείμενο) και (γραμματοσειρά, που μπορεί να βοηθήσει στον καθορισμό διαφόρων χαρακτηριστικών του κειμένου, όπως μέγεθος και χρώμα).
- Άλλες ετικέτες ορίζουν τα διαφορετικά μέρη του ίδιου του εγγράφου HTML. Για παράδειγμα, χρησιμοποιείται για να περιέχει πληροφορίες σχετικά με τη σελίδα που δεν θα είναι ορατές στο θεατή, όπως λέξεις -κλειδιά ή περιγραφή σελίδας που θα εμφανίζεται στα αποτελέσματα των μηχανών αναζήτησης.
Βήμα 2. Μάθετε να χρησιμοποιείτε χαρακτηριστικά ετικετών
Ορισμένες ετικέτες χρειάζονται πρόσθετες πληροφορίες για να καθορίσουν τον τρόπο λειτουργίας τους. Αυτές οι πρόσθετες πληροφορίες εμφανίζονται στην ετικέτα ανοίγματος και ονομάζονται "χαρακτηριστικό". Το όνομα του χαρακτηριστικού εμφανίζεται αμέσως μετά το όνομα της ετικέτας, χωρισμένο με κενό. Η τιμή του χαρακτηριστικού προσαρτάται στο όνομα του χαρακτηριστικού με ένα σύμβολο = και περιβάλλεται από εισαγωγικά.
- Για παράδειγμα, εάν θέλετε να κάνετε κάποιο από το κείμενό σας κόκκινο, μπορείτε να το κάνετε χρησιμοποιώντας την ετικέτα και ένα κατάλληλο χαρακτηριστικό χρώματος γραμματοσειράς, όπως αυτό: Αυτό το κείμενο είναι κόκκινο.
- Πολλά από τα εφέ που επιτυγχάνονταν κάποτε με χαρακτηριστικά ετικέτας HTML, όπως η ρύθμιση διαφορετικών χρωμάτων γραμματοσειράς, τώρα γίνονται συνήθως με κωδικοποίηση CSS.
Βήμα 3. Πειραματιστείτε με ένθετα στοιχεία
Το HTML σάς επιτρέπει επίσης να τοποθετήσετε στοιχεία μέσα σε άλλα στοιχεία για να δημιουργήσετε πιο σύνθετη μορφοποίηση. Για παράδειγμα, εάν θέλετε να ορίσετε μια παράγραφο και στη συνέχεια να πλάγιατε πλάγιο μέρος του κειμένου εντός της παραγράφου, μπορείτε να το κάνετε ως εξής:
Λατρεύω την κωδικοποίηση!
Βήμα 4. Εξοικειωθείτε με κενά στοιχεία
Ορισμένα στοιχεία στο HTML δεν χρειάζονται τόσο ετικέτες ανοίγματος όσο και κλεισίματος. Για παράδειγμα, εάν εισάγετε μια εικόνα, χρειάζεστε μόνο μία ετικέτα "img" που περιέχει το όνομα της ετικέτας και τυχόν άλλα απαραίτητα χαρακτηριστικά (όπως το όνομα του αρχείου εικόνας και οποιοδήποτε εναλλακτικό κείμενο που θέλετε να προσθέσετε για λόγους προσβασιμότητας). Για παράδειγμα:
Βήμα 5. Εξερευνήστε τη βασική διάταξη ενός εγγράφου HTML
Για να λειτουργεί σωστά ο ιστότοπός σας που βασίζεται σε HTML, θα πρέπει να γνωρίζετε πώς να μορφοποιήσετε ολόκληρη τη σελίδα. Αυτό περιλαμβάνει τον καθορισμό του τόπου που αρχίζει και τελειώνει ο κώδικας html, καθώς και τη χρήση ετικετών για να προσδιορίσετε ποια τμήματα του κώδικα θα εμφανιστούν έναντι ποια είναι εκεί για να παρέχουν κρυφές πληροφορίες φόντου. Για παράδειγμα:
- Χρησιμοποιήστε την ετικέτα για να ορίσετε τη σελίδα σας ως έγγραφο HTML.
- Στη συνέχεια, περιέχει ολόκληρη τη σελίδα σας εντός των ετικετών για να καθορίσετε πού αρχίζει και τελειώνει ο κωδικός σας.
- Τοποθετήστε τυχόν πληροφορίες που δεν θα εμφανίζονται στο θεατή, όπως ο τίτλος της σελίδας, οι λέξεις -κλειδιά και η περιγραφή της σελίδας σας, μέσα στις ετικέτες.
- Ορίστε το σώμα της σελίδας σας (δηλαδή, οποιοδήποτε κείμενο και εικόνες θέλετε να βλέπει ο θεατής) με τις ετικέτες.
Μέθοδος 3 από 4: Εξοικείωση με το CSS
Βήμα 1. Χρησιμοποιήστε το CSS για να εφαρμόσετε στυλ στα έγγραφά σας HTML
Το CSS είναι μια γλώσσα φύλλου στυλ που σας επιτρέπει να εφαρμόζετε διαφορετικά στοιχεία στυλ και σχεδιασμού στην ιστοσελίδα σας. Για παράδειγμα, εάν θέλετε να εφαρμόσετε επιλεκτικά μια συγκεκριμένη γραμματοσειρά ή χρώμα κειμένου σε ορισμένα στοιχεία κειμένου στη σελίδα σας, μπορείτε να δημιουργήσετε ένα αρχείο CSS για να το κάνετε αυτό. Στη συνέχεια, μπορείτε να εισαγάγετε το αρχείο CSS στο έγγραφό σας HTML όπου θέλετε.
-
Για παράδειγμα, εάν θέλετε ένα αρχείο CSS να μετατρέψει σε πράσινο όλα τα στοιχεία της παραγράφου στο έγγραφο HTML, μπορείτε να δημιουργήσετε ένα αρχείο.css που περιέχει τις γραμμές:
- Π {
- χρώμα: πράσινο?
- }
- Στη συνέχεια, θα αποθηκεύσετε το αρχείο με ένα όνομα όπως το style.css.
- Για να εφαρμόσετε το φύλλο στυλ στο έγγραφο HTML, θα το εισαγάγατε ως κενό στοιχείο συνδέσμου μέσα στις ετικέτες. Για παράδειγμα:
Βήμα 2. Εξοικειωθείτε με τα στοιχεία ενός συνόλου κανόνων CSS
Ένα μεμονωμένο κομμάτι κώδικα CSS ονομάζεται "σύνολο κανόνων". Το σύνολο κανόνων περιέχει τα διαφορετικά στοιχεία που καθορίζουν τι θέλετε να κάνει ο κώδικά σας. Αυτά περιλαμβάνουν:
- Ο επιλογέας, ο οποίος καθορίζει το στοιχείο HTML που θέλετε να στυλ. Για παράδειγμα, εάν θέλετε ο κανόνας σας να επηρεάζει τα στοιχεία της παραγράφου, θα ξεκινήσετε τη ρύθμιση των κανόνων σας με το γράμμα "p".
- Η δήλωση, η οποία καθορίζει τις ιδιότητες που θέλετε να διαμορφώσετε (όπως το χρώμα γραμματοσειράς). Η δήλωση περιλαμβάνεται σε αγκύλες {}.
- Η ιδιότητα, η οποία καθορίζει ποια ιδιότητα του στοιχείου HTML θέλετε να στυλ. Για παράδειγμα, εντός της ετικέτας, μπορείτε να καθορίσετε ότι θέλετε να διαμορφώσετε το χρώμα του κειμένου.
- Η τιμή της ιδιότητας καθορίζει συγκεκριμένα τον τρόπο με τον οποίο θέλετε να αλλάξετε την ιδιότητα (π.χ., εάν η ιδιότητα είναι χρώμα γραμματοσειράς, τότε η αξία της ιδιότητας θα είναι "πράσινη").
- Μπορείτε να τροποποιήσετε πολλές διαφορετικές ιδιότητες μέσα σε μια δήλωση.
Βήμα 3. Εφαρμόστε CSS στο κείμενό σας για να φαίνεται όμορφη η γραφομηχανή σας
Το CSS είναι χρήσιμο για την εφαρμογή μιας ποικιλίας εφέ στο κείμενό σας χωρίς να χρειάζεται να κωδικοποιήσετε ξεχωριστά κάθε ιδιότητα σε HTML. Πειραματιστείτε με την αλλαγή διαφορετικών ιδιοτήτων στοιχειοθεσίας στο CSS, όπως:
- Χρώμα γραμματοσειράς
- Μέγεθος γραμματοσειράς
- Οικογένεια γραμματοσειρών (π.χ., το εύρος των γραμματοσειρών που θέλετε να χρησιμοποιήσετε στο κείμενό σας)
- Ευθυγράμμιση κειμένου
- Υψος γραμμής
- Απόσταση γραμμάτων
Βήμα 4. Πειραματιστείτε με πλαίσια και άλλα εργαλεία διάταξης CSS
Το CSS είναι επίσης χρήσιμο για την προσθήκη ελκυστικών οπτικών στοιχείων στη σελίδα σας, όπως πλαίσια κειμένου και πίνακες. Επιπλέον, μπορείτε να το χρησιμοποιήσετε για να αλλάξετε τη συνολική διάταξη της σελίδας σας και να καθορίσετε πού τοποθετούνται τα διαφορετικά στοιχεία το ένα μεταξύ του.
Για παράδειγμα, μπορείτε να ορίσετε χαρακτηριστικά όπως το πλάτος και το χρώμα φόντου ενός στοιχείου, να προσθέσετε ένα περίγραμμα ή να ορίσετε περιθώρια που θα δημιουργήσουν χώρο μεταξύ των διαφόρων στοιχείων της σελίδας σας
Μέθοδος 4 από 4: Εργασία με άλλες γλώσσες σχεδίασης
Βήμα 1. Μάθετε JavaScript εάν θέλετε να προσθέσετε διαδραστικά στοιχεία στις σελίδες σας
Η JavaScript είναι μια εξαιρετική γλώσσα για να μάθετε εάν ενδιαφέρεστε να προσθέσετε πιο προηγμένες δυνατότητες στους ιστότοπούς σας, όπως κινούμενα σχέδια και αναδυόμενα παράθυρα. Παρακολουθήστε ένα μάθημα ή αναζητήστε διαδικτυακά σεμινάρια σχετικά με τον τρόπο κωδικοποίησης σε JavaScript και ενσωματώστε αυτά τα κωδικοποιημένα στοιχεία στις ιστοσελίδες σας | χρησιμοποιώντας HTML.
Για να μπορέσετε να αισθανθείτε άνετα με το JavaScript, θα πρέπει να εξοικειωθείτε με τα βασικά της δημιουργίας σελίδων σε HTML και CSS
Βήμα 2. Εξοικειωθείτε με το jQuery για να διευκολύνετε την κωδικοποίηση JavaScript
Το jQuery είναι μια βιβλιοθήκη JavaScript που μπορεί να απλοποιήσει τον προγραμματισμό Java, επιτρέποντάς σας να έχετε πρόσβαση σε μια ποικιλία προ-κωδικοποιημένων στοιχείων JavaScript. Το jQuery είναι ένα εξαιρετικό εργαλείο εάν είστε ήδη εξοικειωμένοι με τα βασικά της κωδικοποίησης JavaScript.
Μπορείτε να αποκτήσετε πρόσβαση στη βιβλιοθήκη jQuery και σε πολλούς άλλους πολύτιμους πόρους μέσω του jQuery.org, του ιστότοπου του Ιδρύματος jQuery
Βήμα 3. Μελετήστε γλώσσες από τον διακομιστή εάν ενδιαφέρεστε για ανάπτυξη back-end
Ενώ το HTML, το CSS και το JavaScript είναι ιδανικά για σχεδιαστές ιστοσελίδων που επικεντρώνονται σε αυτό που βλέπει και κάνει ο χρήστης στον ιστότοπο, οι γλώσσες από τον διακομιστή είναι χρήσιμες εάν ενδιαφέρεστε περισσότερο για την παρασκηνιακή εργασία. Εάν θέλετε να μάθετε για την ανάπτυξη back-end, επικεντρωθείτε στην εκμάθηση γλωσσών όπως Python, PHP και Ruby on Rails.
Αυτές οι γλώσσες είναι χρήσιμες για τη διαχείριση και την επεξεργασία δεδομένων που ο χρήστης δεν βλέπει. Για παράδειγμα, η PHP μπορεί να χρησιμοποιηθεί για τη δημιουργία ασφαλών εργαλείων δημιουργίας κωδικού πρόσβασης σε ιστότοπους που απαιτούν σύνδεση
Αρχεία βοήθειας
Φύλλο εξαπάτησης HTML
CSS Cheat Sheet
