A tartalom elrendezésének alapjai - tanfolyam 3900 RUB. Hexlettől, edzés 18 óra, Időpont: 2023. december 1.

1. Bevezetés
A tartalommal való munka alapvető része egy projekt létrehozásakor. Gyönyörű animációk, blokkok és képek mögött tartalom rejtőzik. A felhasználó felkeresi a webhelyet, vagy megnyit egy alkalmazást. Ebben a leckében röviden áttekintjük azokat a témákat, amelyeket a kurzus során tanulmányozunk.

elmélet

2. Dobozmodell és CSS
Milyen CSS-tulajdonságok befolyásolják az oldalon megjelenő elemek méretét? Emlékezzünk a dobozmodell koncepciójára, és tanulmányozzuk, hogyan működnek a margó, a kitöltés és a szegély tulajdonságai egy elem külső/belső kitöltésének és látható szegélyeinek beállításához. Ismerkedjünk meg a box-sizing tulajdonsággal, ami megváltoztatja a dobozmodell szabványos viselkedését

elmélet

3. Szövegstílusok
Az oldal létrehozása mindenekelőtt szöveggel való munka. Bármilyen szép is a dizájn, ha az információ nehezen vagy egyáltalán nem olvasható, a felhasználó gyorsan elhagyja az oldalt. Ebben a leckében a szövegstílus alapvető tulajdonságaival ismerkedünk meg.

elmélet
tesztek
gyakorlat

4. Betűtípusok és a velük való munka
Hallottad azt a kifejezést, hogy „játssz a betűtípusokkal”? Ideje ezt megtenni. Megtanuljuk a betűtípusok összekapcsolását CSS segítségével, szabályozni a szövegméretet, a tervezést és beállítani a sorközt. A lecke végén tanulmányozzuk az általánosított font tulajdonságot, amellyel egyszerre 6 különböző szövegstílust állíthatunk be

elmélet
tesztek
gyakorlat

5. Listák
A listák a szöveg szerves részét képezik. Lehetővé teszik a kapcsolódó töredékek csoportosítását, jelentésük szerint egyesítve őket. Ebben a leckében megvizsgáljuk a HTML-ben elérhető listatípusokat, gyakoroljuk a listák egymásba ágyazását, és érintjük a listajelölők stílusának témáját.

elmélet
tesztek
gyakorlat

6. Oszlopok
A többoszlopos folyóirat-elrendezés létrehozása problémás volt a CSS használatával. A CSS3 szabvány megjelenésével egy új modul jelent meg - CSS Multi-column Layout, amely lehetővé tette az oszlopok automatikus tartalomátvitellel történő létrehozását. Tanulmányozzuk a CSS Columns modul képességeit és a szövegstílus ezen módszerével támasztott korlátokat

elmélet
tesztek
gyakorlat

7. Egységek
Csakúgy, mint a valós világban, az elrendezési világ is mértékegységeket használ az elemek méretének, kitöltésének, szövegméretének stb. Ebben a leckében megismerkedünk az alapvető mértékegységekkel és azok kapcsolatával az oldalon található elemekkel. Tanulmányozzuk a relatív és abszolút egységek fogalmát, és azonosítsuk az em és rem egységek közötti különbséget

elmélet
tesztek
gyakorlat

8. Médiaelemek
A weboldal látogatói nem csak szöveget szeretnek olvasni, hanem médiaelemeken keresztül is érzékelik az információkat: képek, videó, hang. Hogyan lehet helyesen hozzáadni őket, és figyelembe venni a böngésző különbségeit? Miért van a webhelyen található kép alján egy kis behúzás? Fedezzük fel ezt és egy kicsit többet a leckében.

elmélet
tesztek
gyakorlat

9. Táblázatok
Az asztalok a tervezők rémálma. Nagyon sok címkét használnak a létrehozásukhoz, és az apró hibák tönkretehetik a hangulatot. Ebben a leckében lépésről lépésre tanulmányozzuk az egyszerű és összetett táblák létrehozását, megértjük, honnan származhatnak hibák, és hogyan lehet őket megelőzni. A lecke végére magabiztosan készíthet táblázatokat, és nem kell félni tőlük.

elmélet
tesztek
gyakorlat

10. Űrlapok
Az űrlapok fontos interaktív elemei a weboldalnak. A linkekhez hasonlóan az űrlapok is interakciót biztosítanak a felhasználó és az oldal között, lehetővé téve az adatok beküldését. Tanuljuk meg az űrlapok létrehozását, szövegmezők, kijelölő mezők, listák és gombok hozzáadását. Érintsük meg a fogyatékkal élők nyomtatványainak akadálymentesítésének témáját

elmélet
tesztek
gyakorlat

11. Kiválasztók
Ebben a leckében olyan egyszerű szelektorokat tanultunk és teszteltünk, amelyek lehetővé tették az elemek osztály, azonosító vagy címke szerinti kiválasztását. Hogyan lehet másként kiválasztani egy elemet az oldalon? Ebben a leckében elemezzük a kapcsolódó és szomszédos szelektorokat, megtanuljuk a szelektorok attribútum szerinti használatát

elmélet
tesztek
gyakorlat

12. Álosztályok
Folytassuk a szelektorok témakörét a CSS-ben, és ismerkedjünk meg az álosztály fogalmával. Tanuljuk meg, hogyan használhatjuk őket páros vagy páratlan elemek kiválasztására, hogyan adhatunk hozzá új lebegési stílusokat egeret egy elemre, és miért lesznek még az elemek is ilyenek, ha csak egy bizonyost használunk álosztály. Értsük meg az elemállapotokat és a szerkezeti pszeudoosztályokat

elmélet
tesztek
gyakorlat

13. Pszeudo-elemek
Hiányzó elemek az oldalról? A pszeudoelemek jönnek a segítségre - a CSS segítségével létrehozott elemek. Ebben a leckében megvizsgáljuk, hogyan jönnek létre a pszeudoelemek, miért van szükség rájuk és milyen tulajdonságokkal rendelkeznek. Nézzük meg, hogyan készülnek a listajelölők a CSS-ben

elmélet
tesztek

14. Túlcsordulás
A túlcsordulás olyan helyzet, amelyben a tárolóban lévő tartalom nagyobb, mint magának a tárolónak a mérete. Ez a helyzet még egy tapasztalt tervező számára is elronthatja az elrendezést. Ebben a leckében megtudjuk, mit kell tenni ezzel, és hogyan kezelhetjük a tartalom elrejtését a túlcsordulás tulajdonság használatával. Nézzük meg a szöveg-túlcsordulás tulajdonságot, és tanuljuk meg, hogyan lehet ellipszist hozzáadni a szövegekhez, ha nincs elég hely hozzá

elmélet
tesztek
gyakorlat

15. CSS-változók
Képzelje el, hogy egy webhelyen tucatnyi blokk található azonos színű háttérrel. Ezeket a színeket meg kell változtatnia. Ebből a leckéből megtanuljuk, hogyan kell ezt megtenni anélkül, hogy folyamatosan cserélnénk a színt az egyes választókban, és hogyan segíthetnek a változók. Nézzük meg a változók létrehozásának és használatának módját, ismerkedjünk meg a hatókörrel és azzal, hogy a globális változók miért jobbak, mint a választónkénti változók

elmélet
tesztek

16. Háttér
Az elrendezéstervező gyakran szembesül azzal, hogy nem csak bizonyos elemeket, például táblázatokat, listákat, szöveget, médiaelemeket és űrlapokat kell stílusoznia. Néha stilizálnia kell a benne található blokkokat is. Ehhez beállíthatja a tartalommal rendelkező blokk hátterét, és ebben a leckében megtanuljuk, hogyan kell ezt megtenni a background tulajdonság használatával. Tanulmányozzuk a szín, a kép beállításának tulajdonságait, tanuljuk meg a háttér elhelyezését és méretének beállítását

elmélet
tesztek

17. Színátmenetek
Az egyszínű háttér vagy kép nem az egyetlen módja a blokk stílusának. A művészek és a tervezők gyakran használnak színátmeneteket a hátterek létrehozásához – sima átmenetek egyik színről a másikra. Ebben az oktatóanyagban megtanuljuk, hogyan lehet lineáris és radiális színátmeneteket létrehozni. Színátmenetek és trükkök segítségével tanulmányozzuk a színek közötti éles átmenetek létrehozását, valamint megismerjük a színkört és azt, hogy segítségével hogyan lehet színkombinációkat találni a színátmenetekhez

elmélet
gyakorlat

18. Önálló munkavégzés
További feladatok, amelyek lehetővé teszik a megszerzett elmélet megszilárdítását

19. Kiegészítő anyagok
A Hexlet csapata által összeállított cikkek és videók. Segít mélyebbre merülni a kurzus témájában