Satura izkārtojuma pamati - kurss 3900 RUB. no Hexlet, apmācība 18 stundas, Datums: 2023. gada 1. decembris.
Literārs Mistrojums / / December 04, 2023
Mūsdienās stila lapas sniedz lieliskas iespējas veidot tekstu un blokus lapā: fonu, krāsu, audio un video izmantošanu. Visi šie elementi ļauj izveidot krāsainas un lietotājiem pieejamas vietnes. Daudz laika tika pavadīts, apgūstot jaunus selektorus, pseidoklases un pseidoelementus. Tie ļauj neparasti stilizēt saturu.
Pārbaudes
Tie ir praktiski uzdevumi, kurus iesakām izpildīt pēc kursa pabeigšanas. Uzdevumi palīdzēs iegūt papildu pieredzi programmēšanā un nostiprināt iegūtās prasmes. Parasti mēs iesakām pabeigt 3–5 testus. Bet, ja tas neizdodas, nevajag izmisumā. Vienkārši atgriezieties pie viņiem vēlāk.
1. Ievads
Darbs ar saturu ir pamata daļa, veidojot projektu. Aiz skaistām animācijām, blokiem un attēliem ir paslēpts saturs. Lietotājs nonāk vietnē vai atver tai lietojumprogrammu. Šajā nodarbībā īsumā aplūkosim tēmas, kuras tiks apgūtas visa kursa garumā.
teoriju
2. Kastes modelis un CSS
Kādi CSS rekvizīti ietekmē elementu lielumu, kad tie tiek rādīti lapā? Atcerēsimies lodziņa modeļa koncepciju un izpētīsim, kā darbojas piemales, polsterējuma un apmales rekvizīti, lai iestatītu elementa ārējo/iekšējo polsterējumu un redzamās robežas. Iepazīsimies ar kastes izmēra īpašību, kas maina kastes modeļa standarta uzvedību
teoriju
3. Teksta stili
Lapas izveide, pirmkārt, ir darbs ar tekstu. Neatkarīgi no tā, cik skaists ir dizains, ja informācija ir grūti vai neiespējama nolasīt, lietotājs ātri pametīs lapu. Šajā nodarbībā iepazīsimies ar teksta veidošanas pamatīpašībām.
teoriju
testiem
vingrinājums
4. Fonti un darbs ar tiem
Vai esat dzirdējuši frāzi “spēlēties ar fontiem”? Ir pienācis laiks to izdarīt. Mēs mācāmies savienot fontus, izmantojot CSS, kontrolēt teksta lielumu, dizainu un iestatīt rindstarpu. Nodarbības beigās izpētīsim vispārināto fontu īpašību, ar kuru var iestatīt 6 dažādus teksta stilus vienlaikus
teoriju
testiem
vingrinājums
5. Saraksti
Saraksti ir teksta neatņemama sastāvdaļa. Tie ļauj grupēt saistītos fragmentus, apvienojot tos atbilstoši to nozīmei. Šajā nodarbībā mēs izpētīsim pieejamos sarakstu veidus HTML, praktizēsim ligzdošanas sarakstus un pieskarsimies tēmai par sarakstu marķieru veidošanu.
teoriju
testiem
vingrinājums
6. Kolonnas
Vairāku kolonnu žurnāla izkārtojuma izveide, izmantojot CSS, bija problemātiska. Līdz ar CSS3 standarta parādīšanos parādījās jauns modulis - CSS Multi-column Layout, kas ļāva izveidot kolonnas ar automātisku satura pārsūtīšanu. Izpētīsim CSS kolonnu moduļa iespējas un ierobežojumus, kas tiek uzlikti ar šo teksta veidošanas metodi
teoriju
testiem
vingrinājums
7. Vienības
Tāpat kā reālajā pasaulē, izkārtojuma pasaulē tiek izmantotas mērvienības, lai norādītu elementu izmērus, polsterējumu, teksta izmēru utt. Šajā nodarbībā mēs iepazīsimies ar mērvienībām un to saistību ar elementiem vietnē. Izpētīsim relatīvo un absolūto vienību jēdzienu un noteiksim atšķirību starp em un rem vienībām
teoriju
testiem
vingrinājums
8. Mediju elementi
Vietnes apmeklētājiem patīk ne tikai lasīt tekstu, bet arī uztvert informāciju caur mediju elementiem: attēliem, video, audio. Kā tos pareizi pievienot un ņemt vērā pārlūkprogrammas atšķirības? Kāpēc vietnes attēla apakšā ir mazs ievilkums? Izpētīsim šo un nedaudz vairāk nodarbībā.
teoriju
testiem
vingrinājums
9. Tabulas
Tabulas ir maketētāja murgs. To veidošanai tiek izmantots daudz tagu, un nelielas kļūdas var sabojāt noskaņojumu. Šajā nodarbībā soli pa solim pētīsim vienkāršu un sarežģītu tabulu veidošanu, sapratīsim, no kā var rasties kļūdas un kā tās novērst. Līdz nodarbības beigām varēsi droši veidot tabulas un pārstās no tām baidīties.
teoriju
testiem
vingrinājums
10. Veidlapas
Veidlapas ir svarīgs interaktīvs tīmekļa lapas elements. Tāpat kā saites, veidlapas nodrošina mijiedarbību starp lietotāju un lapu, ļaujot iesniegt datus. Apgūsim, kā izveidot veidlapas, pievienot teksta laukus, atlases laukus, sarakstus un pogas. Pieskarsimies tēmai par veidlapu pieejamību cilvēkiem ar invaliditāti
teoriju
testiem
vingrinājums
11. Selektori
Šajā nodarbībā mēs iemācījāmies un pārbaudījām vienkāršus atlasītājus, kas ļāva atlasīt elementus pēc klases, identifikatora vai taga. Kā vēl jūs varat atlasīt elementu lapā? Šajā nodarbībā mēs analizēsim saistītos un blakus esošos atlasītājus, uzzināsim, kā izmantot atlasītājus pēc atribūta
teoriju
testiem
vingrinājums
12. Pseidoklases
Turpināsim tēmu par selektoriem CSS un iepazīsimies ar pseidoklases jēdzienu. Uzzināsim, kā tos izmantot, lai atlasītu pāra vai nepāra elementus, kā pievienot jaunus virzīšanas stilus pele uz elementa un kāpēc pat elementi būs tādi, ja izmanto tikai noteiktu pseidoklase. Sapratīsim elementu stāvokļus un strukturālās pseidoklases
teoriju
testiem
vingrinājums
13. Pseidoelementi
Vai lapā trūkst elementu? Talkā nāk pseidoelementi – elementi, kas izveidoti, izmantojot CSS. Šajā nodarbībā aplūkosim, kā tiek veidoti pseidoelementi, kāpēc tie ir nepieciešami un kādas tiem piemīt īpašības. Apskatīsim, kā saraksta marķieri tiek veidoti CSS
teoriju
testiem
14. Pārplūde
Pārpilde ir situācija, kad konteinera saturs ir lielāks par paša konteinera izmēru. Šāda situācija var sabojāt izkārtojumu pat pieredzējušam maketētājam. Šajā nodarbībā mēs uzzināsim, ko ar to darīt un kā pārvaldīt satura slēpšanu, izmantojot pārpildes rekvizītu. Apskatīsim teksta pārpildes rekvizītu un uzzināsim, kā tekstos pievienot elipsi, ja tam nav pietiekami daudz vietas
teoriju
testiem
vingrinājums
15. CSS mainīgie
Iedomājieties, ka vietnē ir ducis bloku ar tādas pašas krāsas fonu. Jums ir jāmaina visas šīs krāsas. Kā to izdarīt, nemitīgi nemainot krāsu katrā atlasītājā un kā mainīgie var palīdzēt, mēs uzzināsim šajā nodarbībā. Apskatīsim, kā tiek izveidoti un izmantoti mainīgie, uzzināsim par tvērumu un to, kāpēc globālie mainīgie ir labāki par katra atlasītāja mainīgajiem.
teoriju
testiem
16. Fons
Izkārtojuma dizaineris diezgan bieži saskaras ar nepieciešamību veidot stilu ne tikai konkrētus elementus, piemēram, tabulas, sarakstus, tekstu, multivides elementus un formas. Dažreiz jums ir nepieciešams arī stilizēt blokus, kuros tie atrodas. Lai to izdarītu, varat iestatīt fonu blokam ar saturu, un mēs uzzināsim, kā to izdarīt, izmantojot fona rekvizītu šajā nodarbībā. Izpētīsim krāsas, attēla iestatīšanas īpašības, uzzināsim, kā novietot fonu un iestatīt tā izmēru
teoriju
testiem
17. Gradienti
Vienkrāsains fons vai attēls nav vienīgais veids, kā veidot bloka stilu. Mākslinieki un dizaineri bieži izmanto gradientus, lai izveidotu fonu — vienmērīgas pārejas no vienas krāsas uz citu. Šajā apmācībā mēs uzzināsim, kā izveidot lineārus un radiālus gradientus. Izmantojot gradientus un trikus, mēs pētīsim asu pāreju veidošanu starp krāsām, kā arī uzzināsim par krāsu apli un to, kā ar tā palīdzību atrast krāsu kombinācijas gradientiem
teoriju
vingrinājums
18. Patstāvīgs darbs
Papildus uzdevumi, kas ļauj nostiprināt apgūto teoriju
19. Papildu materiāli
Raksti un videoklipi, kurus veido Hexlet komanda. Palīdzēs dziļāk ienirt kursa tēmā