Osnove postavitve vsebine - tečaj 3900 RUB. iz Hexleta, usposabljanje 18 ur, datum: 1. december 2023.
Miscellanea / / December 04, 2023
Danes slogovne liste ponujajo odlične možnosti za oblikovanje besedila in blokov na strani: ozadje, barva, uporaba zvoka in videa. Vsi ti elementi vam omogočajo ustvarjanje barvitih in uporabnikom dostopnih spletnih mest. Veliko časa je bilo porabljenega za učenje novih selektorjev, psevdorazredov in psevdoelementov. Omogočajo vam, da vsebino stilizirate na izjemen način.
Testi
To so praktične naloge, ki jih priporočamo po opravljenem tečaju. Naloge vam bodo pomagale pridobiti dodatne izkušnje pri programiranju in utrditi pridobljeno znanje. Običajno priporočamo, da opravite 3-5 testov. A če ne bo šlo, ne obupajte. Samo vrni se k njim pozneje.
1. Uvod
Delo z vsebino je osnovni del pri ustvarjanju projekta. Za čudovitimi animacijami, bloki in slikami se skriva vsebina. Uporabnik pride na stran ali odpre aplikacijo zanjo. V tej lekciji si bomo na kratko ogledali teme, ki jih bomo preučevali skozi tečaj.
teorija
2. Model škatle in CSS
Katere lastnosti CSS vplivajo na velikost elementov, ko so prikazani na strani? Spomnimo se koncepta modela škatle in preučimo, kako delujejo lastnosti roba, oblazinjenja in obrobe za nastavitev zunanjega/notranjega oblazinjenja in vidnih obrob elementa. Spoznajmo lastnost box-sizing, ki spremeni standardno obnašanje modela škatle
teorija
3. Besedilni slogi
Ustvarjanje strani je najprej delo z besedilom. Ne glede na to, kako lep je dizajn, če je informacije težko ali nemogoče prebrati, bo uporabnik hitro zapustil stran. V tej lekciji se bomo seznanili z osnovnimi lastnostmi oblikovanja besedila.
teorija
testi
telovadba
4. Pisave in delo z njimi
Ste že slišali besedno zvezo "poigrajte se s pisavami"? Čas je za to. Naučimo se povezovati pisave s pomočjo CSS, nadzirati velikost besedila, oblikovanje in nastavljati razmik med vrsticami. Na koncu lekcije bomo preučili splošno lastnost pisave, s katero lahko nastavite 6 različnih slogov besedila hkrati
teorija
testi
telovadba
5. Seznami
Seznami so sestavni del besedila. Omogočajo združevanje povezanih fragmentov in jih združujejo glede na njihov pomen. V tej lekciji bomo raziskali razpoložljive vrste seznamov v HTML, vadili gnezdenje seznamov in se dotaknili teme oblikovanja označevalcev seznamov
teorija
testi
telovadba
6. Stolpci
Ustvarjanje postavitve revije z več stolpci je bilo problematično z uporabo CSS. S prihodom standarda CSS3 se je pojavil nov modul - CSS Multi-column Layout, ki je omogočil ustvarjanje stolpcev s samodejnim prenosom vsebine. Preučimo zmožnosti modula Stolpci CSS in omejitve, ki jih nalaga ta način oblikovanja besedila
teorija
testi
telovadba
7. Enote
Tako kot v resničnem svetu tudi svet postavitve uporablja merske enote za označevanje velikosti elementov, oblazinjenja, velikosti besedila itd. V tej lekciji se bomo seznanili z osnovnimi merskimi enotami in njihovim odnosom z elementi na mestu. Preučimo koncept relativnih in absolutnih enot in ugotovimo razliko med enotama em in rem
teorija
testi
telovadba
8. Medijski elementi
Obiskovalci spletnega mesta ne le radi berejo besedilo, ampak tudi zaznavajo informacije prek medijskih elementov: slik, videa, zvoka. Kako jih pravilno dodati in upoštevati razlike v brskalnikih? Zakaj ima slika na spletnem mestu majhno vdolbino na dnu? Raziščimo to in še malo več v lekciji.
teorija
testi
telovadba
9. Mize
Mize so nočna mora oblikovalcev postavitev. Za njihovo ustvarjanje se uporablja veliko oznak in majhne napake lahko pokvarijo razpoloženje. V tej lekciji bomo korak za korakom preučili ustvarjanje preprostih in zapletenih tabel, razumeli bomo, od kod lahko nastanejo napake in kako jih preprečiti. Do konca lekcije boste lahko samozavestno ustvarili tabele in se jih ne boste več bali.
teorija
testi
telovadba
10. Obrazci
Obrazci so pomemben interaktivni element spletne strani. Tako kot povezave tudi obrazci zagotavljajo interakcijo med uporabnikom in stranjo, kar vam omogoča pošiljanje podatkov. Naučimo se ustvarjati obrazce, dodajati besedilna polja, izbirna polja, sezname in gumbe. Dotaknimo se še teme dostopnosti obrazcev za invalide
teorija
testi
telovadba
11. Selektorji
Za to lekcijo smo se naučili in preizkusili preproste izbirnike, ki so nam omogočili izbiro elementov po razredu, identifikatorju ali oznaki. Kako drugače lahko izberete element na strani? V tej lekciji bomo analizirali povezane in sosednje izbirnike, se naučili uporabljati izbirnike po atributu
teorija
testi
telovadba
12. Psevdo-razredi
Nadaljujmo s temo izbirnikov v CSS in se seznanimo s konceptom psevdorazreda. Naučimo se, kako jih uporabiti za izbiro sodih ali lihih elementov, kako dodati nove sloge lebdenja miško na element in zakaj bodo celo elementi takšni, če uporabimo le določeno psevdorazred. Razumejmo stanja elementov in strukturne psevdorazrede
teorija
testi
telovadba
13. Psevdoelementi
Manjkajoči elementi na strani? Na pomoč priskočijo psevdoelementi – elementi, ustvarjeni s pomočjo CSS. V tej lekciji si bomo ogledali, kako nastanejo psevdoelementi, zakaj so potrebni in kakšne lastnosti imajo. Poglejmo, kako so označevalci seznamov oblikovani v CSS
teorija
testi
14. Preliv
Prelivanje je situacija, v kateri je vsebina znotraj vsebnika večja od velikosti samega vsebnika. Ta situacija lahko pokvari postavitev tudi za izkušenega oblikovalca postavitev. Naučili se bomo, kaj storiti s tem in kako upravljati skrivanje vsebine z uporabo lastnosti overflow v tej lekciji. Oglejmo si lastnost text-overflow in se naučimo, kako besedilom dodati tri pike, če zanje ni dovolj prostora
teorija
testi
telovadba
15. Spremenljivke CSS
Predstavljajte si, da je na spletnem mestu ducat blokov z ozadjem iste barve. Vse te barve morate spremeniti. Kako to narediti brez nenehnega zamenjave barve v vsakem izbirniku in kako lahko spremenljivke pomagajo, se bomo naučili v tej lekciji. Poglejmo, kako so spremenljivke ustvarjene in uporabljene, spoznajmo obseg in zakaj so globalne spremenljivke boljše od spremenljivk na izbirnik
teorija
testi
16. Ozadje
Oblikovalec postavitve se pogosto sooča s potrebo po oblikovanju ne samo določenih elementov, kot so tabele, seznami, besedilo, medijski elementi in obrazci. Včasih morate tudi stilizirati bloke, v katerih se nahajajo. Če želite to narediti, lahko nastavite ozadje za blok z vsebino in v tej lekciji se bomo naučili, kako to storiti z uporabo lastnosti ozadja. Preučimo lastnosti za nastavitev barve, slike, naučimo se postaviti ozadje in nastaviti njegovo velikost
teorija
testi
17. Gradienti
Enobarvno ozadje ali slika ni edini način za oblikovanje bloka. Umetniki in oblikovalci pogosto uporabljajo prelive za ustvarjanje ozadij – gladke prehode iz ene barve v drugo. V tej vadnici se bomo naučili ustvarjati linearne in radialne prelive. S prelivi in triki se bomo učili ustvarjanja ostrih prehodov med barvami, spoznali pa bomo tudi barvno kolo in kako z njegovo pomočjo poiskati barvne kombinacije za prelive.
teorija
telovadba
18. Samostojno delo
Dodatne naloge, ki omogočajo utrjevanje osvojene teorije
19. Dodatni materiali
Članki in videi, ki jih je pripravila ekipa Hexlet. Pomagal vam bo poglobiti se v temo tečaja