Grundlæggende om indholdslayout - kursus RUB 3.900. fra Hexlet, træning 18 timer, Dato: 1. december 2023.
Miscellanea / / December 04, 2023
I dag giver style sheets store muligheder for at style tekst og blokke på en side: baggrund, farve, brug af lyd og video. Alle disse elementer giver dig mulighed for at skabe farverige og tilgængelige websteder for brugere. Der blev brugt meget tid på at lære nye vælgere, pseudo-klasser og pseudo-elementer. De giver dig mulighed for at stilisere indhold på en ekstraordinær måde.
Tests
Det er praktiske opgaver, som vi anbefaler at gennemføre efter endt kursus. Opgaverne vil hjælpe dig med at få yderligere erfaring med programmering og konsolidere dine erhvervede færdigheder. Typisk anbefaler vi at gennemføre 3-5 tests. Men hvis det ikke lykkes, så fortvivl ikke. Bare vend tilbage til dem senere.
1. Introduktion
Arbejdet med indhold er en grundlæggende del, når man laver et projekt. Der er indhold gemt bag smukke animationer, blokke og billeder. Brugeren kommer til webstedet eller åbner en applikation til det. I denne lektion vil vi kort se på de emner, der vil blive studeret i løbet af kurset.
teori
2. Box Model og CSS
Hvilke CSS-egenskaber påvirker størrelsen af elementer, når de vises på siden? Lad os huske konceptet med kassemodellen og studere, hvordan margen-, polstrings- og kantegenskaberne fungerer for at indstille ekstern/intern polstring og synlige kanter af et element. Lad os stifte bekendtskab med kassestørrelsesegenskaben, som ændrer kassemodellens standardadfærd
teori
3. Tekststile
At lave en side er først og fremmest at arbejde med tekst. Uanset hvor smukt designet er, hvis informationen er svær eller umulig at læse, vil brugeren hurtigt forlade siden. I denne lektion vil vi stifte bekendtskab med de grundlæggende egenskaber ved tekststyling.
teori
tests
dyrke motion
4. Skrifttyper og arbejde med dem
Har du hørt sætningen "leg med skrifttyper"? Det er tid til at gøre dette. Vi lærer at forbinde skrifttyper ved hjælp af CSS, kontrollere tekststørrelse, design og indstille linjeafstand. I slutningen af lektionen vil vi studere den generaliserede skrifttype-egenskab, hvormed du kan indstille 6 forskellige tekststile på én gang
teori
tests
dyrke motion
5. Lister
Lister er en integreret del af teksten. De giver dig mulighed for at gruppere relaterede fragmenter og forene dem efter deres betydning. I denne lektion vil vi udforske de tilgængelige typer lister i HTML, øve os på indlejringslister og berøre emnet for stylinglistemarkører
teori
tests
dyrke motion
6. Kolonner
At oprette et magasinlayout med flere spalter var problematisk ved brug af CSS. Med fremkomsten af CSS3-standarden dukkede et nyt modul op - CSS Multi-column Layout, som gjorde det muligt at oprette kolonner med automatisk indholdsoverførsel. Lad os studere mulighederne i CSS Columns-modulet og de begrænsninger, der pålægges med denne metode til tekststiling
teori
tests
dyrke motion
7. Enheder
Ligesom i den virkelige verden bruger layoutverdenen måleenheder til at angive elementstørrelser, udfyldning, tekststørrelse og så videre. I denne lektion vil vi stifte bekendtskab med de grundlæggende måleenheder og deres forhold til elementer på webstedet. Lad os studere begrebet relative og absolutte enheder og identificere forskellen mellem em og rem enheder
teori
tests
dyrke motion
8. Medieelementer
Besøgende på webstedet kan ikke kun lide at læse tekst, men opfatter også information gennem medieelementer: billeder, video, lyd. Hvordan tilføjer man dem korrekt og tager hensyn til browserforskelle? Hvorfor har billedet på siden en lille indrykning i bunden? Lad os undersøge dette og lidt mere i lektionen.
teori
tests
dyrke motion
9. Tabeller
Borde er en layoutdesigners mareridt. Der bruges mange tags til at lave dem, og små fejl kan ødelægge stemningen. I denne lektion, trin for trin, vil vi studere oprettelsen af enkle og komplekse tabeller, vi vil forstå, hvor fejl kan opstå fra, og hvordan man forhindrer dem. Ved slutningen af lektionen vil du trygt kunne oprette tabeller og stoppe med at være bange for dem.
teori
tests
dyrke motion
10. Formularer
Formularer er et vigtigt interaktivt element på en webside. Ligesom links giver formularer interaktion mellem brugeren og siden, så du kan indsende data. Lad os lære, hvordan du opretter formularer, tilføjer tekstfelter, markeringsfelter, lister og knapper. Lad os berøre emnet tilgængelighed af formularer for mennesker med handicap
teori
tests
dyrke motion
11. Vælgere
Til denne lektion lærte og testede vi simple vælgere, der gjorde det muligt for os at vælge elementer efter klasse, identifikator eller tag. Hvordan kan du ellers vælge et element på siden? I denne lektion vil vi analysere relaterede og tilstødende vælgere, lære at bruge vælgere efter egenskab
teori
tests
dyrke motion
12. Pseudo-klasser
Lad os fortsætte emnet for selectors i CSS og stifte bekendtskab med konceptet med en pseudo-klasse. Lad os lære, hvordan du bruger dem til at vælge lige eller ulige elementer, hvordan du tilføjer nye svævestile musen på et element, og hvorfor selv elementer vil være sådan, når man kun bruger et bestemt pseudo-klasse. Lad os forstå elementtilstande og strukturelle pseudoklasser
teori
tests
dyrke motion
13. Pseudo-elementer
Mangler du elementer på siden? Pseudo-elementer kommer til undsætning - elementer skabt ved hjælp af CSS. I denne lektion vil vi se på, hvordan pseudo-elementer skabes, hvorfor de er nødvendige, og hvilke funktioner de har. Lad os se, hvordan listemarkører styles i CSS
teori
tests
14. Flyde over
Overløb er en situation, hvor indholdet inde i en beholder er større end størrelsen på selve beholderen. Denne situation kan ødelægge layoutet selv for en erfaren layoutdesigner. Vi vil lære, hvad man skal gøre med dette, og hvordan man administrerer indholdsskjulning ved hjælp af overløbsegenskaben i denne lektion. Lad os se på egenskaben tekstoverløb og lære, hvordan du tilføjer ellipse i tekster, hvis der ikke er plads nok til det
teori
tests
dyrke motion
15. CSS-variabler
Forestil dig, at der på et websted er et dusin blokke med en baggrund af samme farve. Du skal ændre alle disse farver. Hvordan man gør dette uden konstant at udskifte farven i hver vælger, og hvordan variabler kan hjælpe, vil vi lære i denne lektion. Lad os se på, hvordan variabler skabes og bruges, lære om omfang og hvorfor globale variabler er bedre end per-selektor variabler
teori
tests
16. Baggrund
En layoutdesigner står ofte over for behovet for at style ikke kun specifikke elementer, såsom tabeller, lister, tekst, medieelementer og formularer. Nogle gange skal du også style de blokke, de er placeret indeni. For at gøre dette kan du indstille baggrunden for blokken med indhold, og vi lærer, hvordan du gør dette ved hjælp af baggrundsegenskaben i denne lektion. Lad os studere egenskaberne for indstilling af farve, billede, lære at placere baggrunden og indstille dens størrelse
teori
tests
17. Gradienter
En enkeltfarvet baggrund eller billede er ikke den eneste måde at style en blok på. Kunstnere og designere bruger ofte gradienter til at skabe baggrunde – jævne overgange fra en farve til en anden. I denne tutorial lærer vi, hvordan du opretter lineære og radiale gradienter. Ved hjælp af gradienter og tricks vil vi studere skabelsen af skarpe overgange mellem farver og også lære om farvehjulet og hvordan man med dets hjælp finder farvekombinationer til gradienter
teori
dyrke motion
18. Selvstændigt arbejde
Yderligere opgaver, der giver dig mulighed for at konsolidere den erhvervede teori
19. Yderligere materialer
Artikler og videoer kurateret af Hexlet-teamet. Vil hjælpe dig med at dykke dybere ned i emnet for kurset