Turinio maketavimo pagrindai – kursas 3900 RUB. nuo Hexlet, treniruotės 18 val., Data: 2023 m. gruodžio 1 d.
įvairenybės / / December 04, 2023
Šiandien stiliaus lapai suteikia puikių galimybių formuoti teksto ir blokų stilių puslapyje: foną, spalvą, garso ir vaizdo naudojimą. Visi šie elementai leidžia kurti spalvingas ir vartotojams prieinamas svetaines. Daug laiko praleista mokantis naujų selektorių, pseudoklasių ir pseudoelementų. Jie leidžia išskirtinai stilizuoti turinį.
Testai
Tai praktinės užduotys, kurias rekomenduojame atlikti baigus kursą. Užduotys padės įgyti papildomos programavimo patirties ir įtvirtinti įgytus įgūdžius. Paprastai rekomenduojame atlikti 3–5 testus. Bet jei nepavyks, nenusiminkite. Tiesiog grįžkite prie jų vėliau.
1. Įvadas
Darbas su turiniu yra pagrindinė dalis kuriant projektą. Už gražių animacijų, blokų ir paveikslėlių yra paslėptas turinys. Vartotojas ateina į svetainę arba atidaro jai skirtą programą. Šioje pamokoje trumpai apžvelgsime temas, kurios bus nagrinėjamos viso kurso metu.
teorija
2. Dėžutės modelis ir CSS
Kokios CSS savybės turi įtakos elementų dydžiui, kai jie rodomi puslapyje? Prisiminkime dėžutės modelio koncepciją ir ištirkime, kaip veikia paraštės, užpildymo ir kraštinės savybės, kad būtų galima nustatyti išorinį / vidinį užpildymą ir matomas elemento ribas. Susipažinkime su dėžutės dydžio savybe, kuri pakeičia standartinę dėžutės modelio elgseną
teorija
3. Teksto stiliai
Puslapio kūrimas – tai visų pirma darbas su tekstu. Kad ir koks gražus būtų dizainas, jei informaciją sunku ar neįmanoma perskaityti, vartotojas greitai paliks puslapį. Šioje pamokoje susipažinsime su pagrindinėmis teksto stiliaus ypatybėmis.
teorija
bandymai
pratimas
4. Šriftai ir darbas su jais
Ar girdėjote frazę „žaisti su šriftais“? Atėjo laikas tai padaryti. Mokomės jungti šriftus naudodami CSS, valdyti teksto dydį, dizainą ir nustatyti tarpus tarp eilučių. Pamokos pabaigoje išnagrinėsime apibendrintą šrifto ypatybę, su kuria vienu metu galite nustatyti 6 skirtingus teksto stilius
teorija
bandymai
pratimas
5. Sąrašai
Sąrašai yra neatskiriama teksto dalis. Jie leidžia grupuoti susijusius fragmentus, sujungiant juos pagal jų reikšmę. Šioje pamokoje išnagrinėsime galimus HTML sąrašų tipus, praktikuosime įdėjimo sąrašus ir paliesime sąrašų žymeklių stiliaus formavimo temą.
teorija
bandymai
pratimas
6. Stulpeliai
Naudojant CSS buvo sudėtinga sukurti kelių stulpelių žurnalo maketą. Atsiradus CSS3 standartui, atsirado naujas modulis – CSS Multi-column Layout, kuris leido sukurti stulpelius su automatiniu turinio perdavimu. Išstudijuokime CSS stulpelių modulio galimybes ir apribojimus, kurie taikomi naudojant šį teksto stiliaus metodą
teorija
bandymai
pratimas
7. Vienetai
Kaip ir realiame pasaulyje, maketavimo pasaulyje naudojami matavimo vienetai elementų dydžiams, užpildymui, teksto dydžiui ir pan. Šioje pamokoje susipažinsime su pagrindiniais matavimo vienetais ir jų ryšiu su elementais svetainėje. Išnagrinėkime santykinių ir absoliučių vienetų sampratą ir nustatykime skirtumą tarp em ir rem vienetų
teorija
bandymai
pratimas
8. Žiniasklaidos elementai
Svetainės lankytojai ne tik mėgsta skaityti tekstą, bet ir suvokia informaciją per medijos elementus: vaizdus, vaizdo įrašą, garsą. Kaip teisingai juos pridėti ir atsižvelgti į naršyklės skirtumus? Kodėl svetainėje esančio vaizdo apačioje yra maža įtrauka? Panagrinėkime tai ir šiek tiek daugiau pamokoje.
teorija
bandymai
pratimas
9. Lentelės
Lentelės – maketuotojo košmaras. Jas kuriant naudojama daug žymų, o mažos klaidos gali sugadinti nuotaiką. Šioje pamokoje žingsnis po žingsnio išnagrinėsime paprastų ir sudėtingų lentelių kūrimą, suprasime, iš kur gali kilti klaidų ir kaip jų išvengti. Pamokos pabaigoje galėsite drąsiai kurti lenteles ir nustoti jų bijoti.
teorija
bandymai
pratimas
10. Formos
Formos yra svarbus interaktyvus tinklalapio elementas. Kaip ir nuorodos, formos užtikrina vartotojo ir puslapio sąveiką, leidžiančią pateikti duomenis. Sužinokime, kaip kurti formas, įtraukti teksto laukus, pasirinkimo laukus, sąrašus ir mygtukus. Palieskime temą apie formų prieinamumą žmonėms su negalia
teorija
bandymai
pratimas
11. Selektoriai
Šioje pamokoje išmokome ir išbandėme paprastus parinkiklius, kurie leido pasirinkti elementus pagal klasę, identifikatorių arba žymą. Kaip dar galite pasirinkti elementą puslapyje? Šioje pamokoje analizuosime susijusius ir kaimyninius selektorius, išmoksime naudoti selektorius pagal požymius
teorija
bandymai
pratimas
12. Pseudoklasės
Tęskime selektorių temą CSS ir susipažinkime su pseudoklasės samprata. Sužinokime, kaip juos naudoti norint pasirinkti lyginius ar nelyginius elementus, kaip pridėti naujų užvedimo stilių pele ant elemento ir kodėl net elementai bus tokie, kai naudojamas tik tam tikras pseudoklasė. Supraskime elementų būsenas ir struktūrines pseudoklases
teorija
bandymai
pratimas
13. Pseudo elementai
Trūksta elementų puslapyje? Į pagalbą ateina pseudoelementai – elementai, sukurti naudojant CSS. Šioje pamokoje apžvelgsime, kaip kuriami pseudoelementai, kam jie reikalingi ir kokias savybes jie turi. Pažiūrėkime, kaip sąrašo žymekliai formuojami CSS
teorija
bandymai
14. Perpildymas
Perpildymas – tai situacija, kai talpyklos turinys yra didesnis už paties konteinerio dydį. Tokia situacija gali sugadinti maketą net patyrusiam maketuotojui. Šioje pamokoje sužinosime, ką su tuo daryti ir kaip valdyti turinio slėpimą naudojant perpildymo ypatybę. Pažiūrėkime į teksto perpildymo savybę ir sužinokime, kaip tekstuose pridėti elipsę, jei jai nepakanka vietos
teorija
bandymai
pratimas
15. CSS kintamieji
Įsivaizduokite, kad svetainėje yra keliolika blokų su tos pačios spalvos fonu. Turite pakeisti visas šias spalvas. Kaip tai padaryti nuolat nekeičiant spalvos kiekviename parinkiklyje ir kaip gali padėti kintamieji, sužinosime šioje pamokoje. Pažiūrėkime, kaip kuriami ir naudojami kintamieji, sužinosime apie apimtį ir kodėl pasauliniai kintamieji yra geresni už kintamuosius kiekvienam pasirinktojui
teorija
bandymai
16. Fonas
Maketuotojas gana dažnai susiduria su poreikiu stilizuoti ne tik konkrečius elementus, tokius kaip lentelės, sąrašai, tekstas, medijos elementai ir formos. Kartais taip pat reikia stilizuoti blokus, kurių viduje jie yra. Norėdami tai padaryti, galite nustatyti bloko su turiniu foną, o mes išmoksime tai padaryti naudodami fono ypatybę šioje pamokoje. Išstudijuokime spalvų, vaizdo nustatymo ypatybes, sužinokime, kaip išdėstyti foną ir nustatyti jo dydį
teorija
bandymai
17. Gradientai
Vienos spalvos fonas ar vaizdas nėra vienintelis būdas sukurti bloko stilių. Menininkai ir dizaineriai dažnai naudoja gradientus, kad sukurtų foną – sklandų perėjimą iš vienos spalvos į kitą. Šioje pamokoje sužinosime, kaip sukurti linijinius ir radialinius gradientus. Naudodamiesi gradientais ir gudrybėmis, mes išnagrinėsime ryškių perėjimų tarp spalvų kūrimą, taip pat sužinosime apie spalvų ratą ir kaip su jo pagalba rasti spalvų derinius gradientams
teorija
pratimas
18. Savarankiškas darbas
Papildomos užduotys, leidžiančios įtvirtinti įgytą teoriją
19. Papildomos medžiagos
Straipsniai ir vaizdo įrašai, kuriuos kuruoja Hexlet komanda. Padės giliau pasinerti į kurso temą