Βασικά στοιχεία διάταξης περιεχομένου - μάθημα 3.900 RUB. από Hexlet, προπόνηση 18 ωρών, Ημερομηνία: 1 Δεκεμβρίου 2023.
μικροαντικείμενα / / December 04, 2023
Σήμερα, τα φύλλα στυλ παρέχουν εξαιρετικές ευκαιρίες για στυλ κειμένου και μπλοκ σε μια σελίδα: φόντο, χρώμα, χρήση ήχου και βίντεο. Όλα αυτά τα στοιχεία σας επιτρέπουν να δημιουργείτε πολύχρωμους και προσβάσιμους ιστότοπους για τους χρήστες. Αφιερώθηκε πολύς χρόνος στην εκμάθηση νέων επιλογέων, ψευδοτάξεων και ψευδοστοιχείων. Σας επιτρέπουν να διαμορφώσετε το περιεχόμενο με έναν εξαιρετικό τρόπο.
Δοκιμές
Αυτές είναι πρακτικές εργασίες που συνιστούμε να ολοκληρώσετε μετά την ολοκλήρωση του μαθήματος. Οι εργασίες θα σας βοηθήσουν να αποκτήσετε επιπλέον εμπειρία στον προγραμματισμό και να εδραιώσετε τις αποκτηθείσες δεξιότητές σας. Συνήθως συνιστούμε να ολοκληρώσετε 3-5 δοκιμές. Αν όμως δεν σου βγει, μην απελπίζεσαι. Απλά επιστρέψτε σε αυτούς αργότερα.
1. Εισαγωγή
Η εργασία με περιεχόμενο είναι ένα βασικό μέρος κατά τη δημιουργία ενός έργου. Υπάρχει περιεχόμενο κρυμμένο πίσω από όμορφα κινούμενα σχέδια, μπλοκ και εικόνες. Ο χρήστης έρχεται στον ιστότοπο ή ανοίγει μια εφαρμογή για αυτόν. Σε αυτό το μάθημα θα δούμε εν συντομία τα θέματα που θα μελετηθούν σε όλη τη διάρκεια του μαθήματος.
θεωρία
2. Box Model και CSS
Ποιες ιδιότητες CSS επηρεάζουν το μέγεθος των στοιχείων όταν εμφανίζονται στη σελίδα; Ας θυμηθούμε την έννοια του μοντέλου πλαισίου και ας μελετήσουμε πώς λειτουργούν οι ιδιότητες περιθωρίου, συμπλήρωσης και περιγράμματος για να ορίσετε την εξωτερική/εσωτερική επένδυση και τα ορατά περιγράμματα ενός στοιχείου. Ας εξοικειωθούμε με την ιδιότητα box-sizing, η οποία αλλάζει την τυπική συμπεριφορά του μοντέλου κουτιού
θεωρία
3. Στυλ κειμένου
Η δημιουργία μιας σελίδας είναι, πρώτα απ 'όλα, εργασία με κείμενο. Όσο όμορφο κι αν είναι το σχέδιο, αν οι πληροφορίες είναι δύσκολο ή αδύνατον να διαβαστούν, ο χρήστης θα εγκαταλείψει γρήγορα τη σελίδα. Σε αυτό το μάθημα θα εξοικειωθούμε με τις βασικές ιδιότητες του στυλ κειμένου.
θεωρία
δοκιμές
άσκηση
4. Γραμματοσειρές και εργασία με αυτές
Έχετε ακούσει τη φράση «παίξτε με τις γραμματοσειρές»; Ήρθε η ώρα να το κάνετε αυτό. Μαθαίνουμε να συνδέουμε γραμματοσειρές χρησιμοποιώντας CSS, να ελέγχουμε το μέγεθος του κειμένου, τη σχεδίαση και να ορίζουμε διάστιχο. Στο τέλος του μαθήματος, θα μελετήσουμε τη γενικευμένη ιδιότητα γραμματοσειράς, με την οποία μπορείτε να ορίσετε 6 διαφορετικά στυλ κειμένου ταυτόχρονα
θεωρία
δοκιμές
άσκηση
5. Κονίστρα
Οι λίστες αποτελούν αναπόσπαστο μέρος του κειμένου. Σας επιτρέπουν να ομαδοποιήσετε σχετικά θραύσματα, ενώνοντάς τα ανάλογα με τη σημασία τους. Σε αυτό το μάθημα, θα εξερευνήσουμε τους διαθέσιμους τύπους λιστών σε HTML, θα εξασκηθούμε στις λίστες ένθεσης και θα αγγίξουμε το θέμα των δεικτών λιστών στυλ
θεωρία
δοκιμές
άσκηση
6. Στήλες
Η δημιουργία μιας διάταξης περιοδικού πολλών στηλών ήταν προβληματική χρησιμοποιώντας το CSS. Με την έλευση του προτύπου CSS3, εμφανίστηκε μια νέα ενότητα - Διάταξη πολλαπλών στηλών CSS, η οποία κατέστησε δυνατή τη δημιουργία στηλών με αυτόματη μεταφορά περιεχομένου. Ας μελετήσουμε τις δυνατότητες της ενότητας CSS Columns και τους περιορισμούς που επιβάλλονται με αυτήν τη μέθοδο στυλ κειμένου
θεωρία
δοκιμές
άσκηση
7. Μονάδες
Ακριβώς όπως στον πραγματικό κόσμο, ο κόσμος της διάταξης χρησιμοποιεί μονάδες μέτρησης για να υποδείξει μεγέθη στοιχείων, padding, μέγεθος κειμένου και ούτω καθεξής. Σε αυτό το μάθημα θα εξοικειωθούμε με τις βασικές μονάδες μέτρησης και τη σχέση τους με στοιχεία του ιστότοπου. Ας μελετήσουμε την έννοια των σχετικών και απόλυτων μονάδων και ας εντοπίσουμε τη διαφορά μεταξύ των μονάδων em και rem
θεωρία
δοκιμές
άσκηση
8. Στοιχεία πολυμέσων
Στους επισκέπτες του ιστότοπου αρέσει όχι μόνο να διαβάζουν κείμενο, αλλά και να αντιλαμβάνονται πληροφορίες μέσω στοιχείων πολυμέσων: εικόνες, βίντεο, ήχος. Πώς να τα προσθέσετε σωστά και να λάβετε υπόψη τις διαφορές του προγράμματος περιήγησης; Γιατί η εικόνα στον ιστότοπο έχει μια μικρή εσοχή στο κάτω μέρος; Ας το εξερευνήσουμε αυτό και λίγα περισσότερα στο μάθημα.
θεωρία
δοκιμές
άσκηση
9. Πίνακες
Τα τραπέζια είναι ο εφιάλτης ενός σχεδιαστή διάταξης. Για τη δημιουργία τους χρησιμοποιούνται πολλές ετικέτες και μικρά λάθη μπορεί να καταστρέψουν τη διάθεση. Σε αυτό το μάθημα, βήμα προς βήμα, θα μελετήσουμε τη δημιουργία απλών και πολύπλοκων πινάκων, θα καταλάβουμε από πού μπορούν να προκύψουν σφάλματα και πώς να τα αποτρέψουμε. Μέχρι το τέλος του μαθήματος, θα μπορείτε να δημιουργήσετε με σιγουριά πίνακες και να σταματήσετε να τους φοβάστε.
θεωρία
δοκιμές
άσκηση
10. Έντυπα
Οι φόρμες είναι ένα σημαντικό διαδραστικό στοιχείο μιας ιστοσελίδας. Όπως και οι σύνδεσμοι, οι φόρμες παρέχουν αλληλεπίδραση μεταξύ του χρήστη και της σελίδας, επιτρέποντάς σας να υποβάλετε δεδομένα. Ας μάθουμε πώς να δημιουργείτε φόρμες, να προσθέτετε πεδία κειμένου, πεδία επιλογής, λίστες και κουμπιά. Ας αγγίξουμε το θέμα της προσβασιμότητας των εντύπων για άτομα με αναπηρία
θεωρία
δοκιμές
άσκηση
11. Επιλογείς
Για αυτό το μάθημα, μάθαμε και δοκιμάσαμε απλούς επιλογείς που μας επέτρεπαν να επιλέξουμε στοιχεία ανά τάξη, αναγνωριστικό ή ετικέτα. Πώς αλλιώς μπορείτε να επιλέξετε ένα στοιχείο στη σελίδα; Σε αυτό το μάθημα θα αναλύσουμε σχετικούς και γειτονικούς επιλογείς, θα μάθουμε πώς να χρησιμοποιούμε επιλογείς ανά χαρακτηριστικό
θεωρία
δοκιμές
άσκηση
12. Ψευτοτάξεις
Ας συνεχίσουμε το θέμα των επιλογέων στο CSS και ας εξοικειωθούμε με την έννοια της ψευδο-τάξης. Ας μάθουμε πώς να τα χρησιμοποιούμε για την επιλογή ζυγών ή περιττών στοιχείων, πώς να προσθέτουμε νέα στυλ τοποθέτησης ποντίκι σε ένα στοιχείο και γιατί ακόμη και τα στοιχεία θα είναι έτσι όταν χρησιμοποιείτε μόνο ένα συγκεκριμένο ψευδοτάξη. Ας κατανοήσουμε τις καταστάσεις στοιχείων και τις δομικές ψευδο-τάξεις
θεωρία
δοκιμές
άσκηση
13. Ψευδοστοιχεία
Λείπουν στοιχεία στη σελίδα; Τα ψευδοστοιχεία έρχονται στη διάσωση - στοιχεία που δημιουργούνται με χρήση CSS. Σε αυτό το μάθημα θα δούμε πώς δημιουργούνται τα ψευδοστοιχεία, γιατί χρειάζονται και ποια χαρακτηριστικά έχουν. Ας δούμε πώς διαμορφώνονται οι δείκτες λίστας στο CSS
θεωρία
δοκιμές
14. Ξεχείλισμα
Η υπερχείλιση είναι μια κατάσταση κατά την οποία το περιεχόμενο μέσα σε ένα δοχείο είναι μεγαλύτερο από το μέγεθος του ίδιου του δοχείου. Αυτή η κατάσταση μπορεί να χαλάσει τη διάταξη ακόμη και σε έναν έμπειρο σχεδιαστή διάταξης. Θα μάθουμε τι να κάνουμε με αυτό και πώς να διαχειριστούμε την απόκρυψη περιεχομένου χρησιμοποιώντας την ιδιότητα υπερχείλισης σε αυτό το μάθημα. Ας δούμε την ιδιότητα text-overflow και ας μάθουμε πώς να προσθέτουμε έλλειψη σε κείμενα εάν δεν υπάρχει αρκετός χώρος για αυτήν
θεωρία
δοκιμές
άσκηση
15. Μεταβλητές CSS
Φανταστείτε ότι σε έναν ιστότοπο υπάρχουν δώδεκα μπλοκ με φόντο του ίδιου χρώματος. Πρέπει να αλλάξετε όλα αυτά τα χρώματα. Πώς να το κάνετε αυτό χωρίς να αντικαθιστάτε συνεχώς το χρώμα σε κάθε επιλογέα και πώς μπορούν να βοηθήσουν οι μεταβλητές θα μάθουμε σε αυτό το μάθημα. Ας δούμε πώς δημιουργούνται και χρησιμοποιούνται οι μεταβλητές, μάθουμε για το εύρος και γιατί οι καθολικές μεταβλητές είναι καλύτερες από τις μεταβλητές ανά επιλογέα
θεωρία
δοκιμές
16. Ιστορικό
Ένας σχεδιαστής διάταξης αντιμετωπίζει αρκετά συχνά την ανάγκη να σχεδιάσει όχι μόνο συγκεκριμένα στοιχεία, όπως πίνακες, λίστες, κείμενο, στοιχεία πολυμέσων και φόρμες. Μερικές φορές πρέπει επίσης να στυλίσετε τα μπλοκ που βρίσκονται μέσα. Για να το κάνετε αυτό, μπορείτε να ορίσετε το φόντο για το μπλοκ με περιεχόμενο και θα μάθουμε πώς να το κάνουμε χρησιμοποιώντας την ιδιότητα φόντου σε αυτό το μάθημα. Ας μελετήσουμε τις ιδιότητες για τη ρύθμιση χρώματος, εικόνας, μάθουμε πώς να τοποθετούμε το φόντο και να ορίζουμε το μέγεθός του
θεωρία
δοκιμές
17. Διαβαθμίσεις
Ένα μονόχρωμο φόντο ή εικόνα δεν είναι ο μόνος τρόπος για να διαμορφώσετε ένα μπλοκ. Οι καλλιτέχνες και οι σχεδιαστές χρησιμοποιούν συχνά διαβαθμίσεις για να δημιουργήσουν φόντο — ομαλές μεταβάσεις από το ένα χρώμα στο άλλο. Σε αυτό το σεμινάριο θα μάθουμε πώς να δημιουργούμε γραμμικές και ακτινικές διαβαθμίσεις. Χρησιμοποιώντας διαβαθμίσεις και κόλπα, θα μελετήσουμε τη δημιουργία απότομων μεταβάσεων μεταξύ των χρωμάτων και επίσης θα μάθουμε για τον τροχό χρωμάτων και πώς, με τη βοήθειά του, βρίσκουμε συνδυασμούς χρωμάτων για διαβαθμίσεις
θεωρία
άσκηση
18. Ανεξάρτητη εργασία
Πρόσθετες εργασίες που σας επιτρέπουν να εδραιώσετε την επίκτητη θεωρία
19. Πρόσθετα υλικά
Άρθρα και βίντεο επιμέλεια της ομάδας Hexlet. Θα σας βοηθήσει να βουτήξετε βαθύτερα στο θέμα του μαθήματος