Sisällön asettelun perusteet - kurssi 3 900 RUB. Hexletistä, koulutus 18 tuntia, Päivämäärä: 1.12.2023.

1. Johdanto
Sisällön kanssa työskentely on perusosa projektia luotaessa. Kauniiden animaatioiden, lohkojen ja kuvien taakse on piilotettu sisältöä. Käyttäjä tulee sivustolle tai avaa sille sovelluksen. Tällä oppitunnilla tarkastellaan lyhyesti aiheita, joita opiskellaan koko kurssin ajan.

teoria

2. Laatikon malli ja CSS

Mitkä CSS-ominaisuudet vaikuttavat sivulla näytettävien elementtien kokoon? Muistetaan laatikkomallin käsite ja tutkitaan kuinka marginaalin, täytön ja reunuksen ominaisuudet toimivat määrittämään elementin ulko-/sisätäytön ja näkyvät reunat. Tutustutaan box-sizing ominaisuuteen, joka muuttaa laatikkomallin vakiokäyttäytymistä

teoria

3. Tekstin tyylit
Sivun luominen on ennen kaikkea työskentelyä tekstin kanssa. Riippumatta siitä, kuinka kaunis muotoilu on, jos tietoja on vaikea tai mahdoton lukea, käyttäjä poistuu sivulta nopeasti. Tällä oppitunnilla tutustumme tekstin muotoilun perusominaisuuksiin.

teoria
testit
Harjoittele

4. Fontit ja niiden kanssa työskentely
Oletko kuullut lauseen "leikkiä fonteilla"? On aika tehdä tämä. Opimme yhdistämään kirjasimia CSS: n avulla, hallitsemaan tekstin kokoa, suunnittelua ja asettamaan riviväliä. Oppitunnin lopussa tutkimme yleistettyä fonttiominaisuutta, jolla voit asettaa 6 eri tekstityyliä kerralla

teoria
testit
Harjoittele

5. Luettelot
Listat ovat olennainen osa tekstiä. Niiden avulla voit ryhmitellä toisiinsa liittyviä fragmentteja yhdistämällä ne merkityksensä mukaan. Tällä oppitunnilla tutkimme saatavilla olevia luettelotyyppejä HTML: ssä, harjoittelemme sisäkkäisiä luetteloita ja käsittelemme luettelomerkkien muotoilun aihetta.

teoria
testit
Harjoittele

6. Sarakkeet
Monisarakkeisen lehden asettelun luominen oli ongelmallista CSS: n avulla. CSS3-standardin myötä ilmestyi uusi moduuli - CSS Multi-column Layout, joka mahdollisti sarakkeiden luomisen automaattisella sisällönsiirrolla. Tutkitaan CSS Columns -moduulin ominaisuuksia ja tämän tekstin muotoilumenetelmän asettamia rajoituksia

teoria
testit
Harjoittele

7. Yksiköt
Aivan kuten todellisessa maailmassa, asettelumaailma käyttää mittayksiköitä osoittamaan elementtien kokoa, täytetystä, tekstin kokoa ja niin edelleen. Tällä oppitunnilla tutustumme perusmittayksiköihin ja niiden suhteeseen sivuston elementteihin. Tutkitaan suhteellisten ja absoluuttisten yksiköiden käsitettä ja selvitetään ero em- ja rem-yksiköiden välillä

teoria
testit
Harjoittele

8. Mediaelementit
Verkkosivuston vierailijat eivät vain halua lukea tekstiä, vaan myös näkevät tietoa mediaelementtien kautta: kuvista, videoista, äänestä. Kuinka lisätä ne oikein ja ottaa huomioon selaimen erot? Miksi sivuston kuvan alareunassa on pieni sisennys? Tutkitaan tätä ja vähän muuta oppitunnilla.

teoria
testit
Harjoittele

9. Taulukot
Pöydät ovat taittosuunnittelijan painajainen. Niiden luomiseen käytetään paljon tunnisteita, ja pienet virheet voivat pilata tunnelman. Tällä oppitunnilla tutkimme askel askeleelta yksinkertaisten ja monimutkaisten taulukoiden luomista, ymmärrämme, mistä virheitä voi syntyä ja miten ne voidaan estää. Oppitunnin loppuun mennessä pystyt luomaan luottavaisesti taulukoita etkä pelkää niitä.

teoria
testit
Harjoittele

10. Lomakkeet
Lomakkeet ovat tärkeä interaktiivinen osa verkkosivua. Kuten linkit, lomakkeet tarjoavat vuorovaikutusta käyttäjän ja sivun välillä, jolloin voit lähettää tietoja. Opitaan luomaan lomakkeita, lisäämään tekstikenttiä, valintakenttiä, luetteloita ja painikkeita. Kosketaanpa aihetta lomakkeiden esteettömyydestä vammaisille

teoria
testit
Harjoittele

11. Valitsijat
Tällä oppitunnilla opimme ja testasimme yksinkertaisia ​​valitsimia, joiden avulla pystyimme valitsemaan elementtejä luokan, tunnisteen tai tunnisteen mukaan. Kuinka muuten voit valita elementin sivulla? Tällä oppitunnilla analysoimme toisiinsa liittyviä ja viereisiä valitsimia, opimme käyttämään valitsimia attribuuttien mukaan

teoria
testit
Harjoittele

12. Pseudo-luokat
Jatketaan CSS: n valitsimien aihetta ja tutustutaan pseudoluokan käsitteeseen. Opitaan käyttämään niitä parillisten tai parittomien elementtien valitsemiseen, kuinka lisätä uusia hover-tyylejä hiirellä elementin päälle ja miksi jopa elementit ovat sellaisia, kun käytetään vain tiettyä pseudoluokka. Ymmärretään elementtitilat ja rakenteelliset pseudo-luokat

teoria
testit
Harjoittele

13. Pseudoelementtejä
Puuttuuko sivulta elementtejä? Pseudoelementit tulevat apuun - CSS: llä luodut elementit. Tällä oppitunnilla tarkastellaan, miten pseudoelementit luodaan, miksi niitä tarvitaan ja mitä ominaisuuksia niissä on. Katsotaanpa, miten luettelomerkit on muotoiltu CSS: ssä

teoria
testit

14. Ylivuoto
Ylivuoto on tilanne, jossa säiliön sisällä oleva sisältö on suurempi kuin itse säiliön koko. Tämä tilanne voi pilata ulkoasun jopa kokeneelle taittosuunnittelijalle. Tällä oppitunnilla opimme, mitä tehdä tämän kanssa ja kuinka hallita sisällön piilottamista overflow-ominaisuuden avulla. Katsotaan tekstin ylivuoto-ominaisuutta ja opitaan lisäämään ellipsejä teksteihin, jos sille ei ole tarpeeksi tilaa

teoria
testit
Harjoittele

15. CSS-muuttujat
Kuvittele, että verkkosivustolla on tusina lohkoa, joiden tausta on samanvärinen. Sinun on vaihdettava kaikki nämä värit. Opimme tällä oppitunnilla, kuinka tämä tehdään ilman jatkuvaa värin vaihtamista jokaisessa valitsimessa ja kuinka muuttujat voivat auttaa. Katsotaan kuinka muuttujia luodaan ja käytetään, opitaan laajuudesta ja miksi globaalit muuttujat ovat parempia kuin valitsinkohtaiset muuttujat

teoria
testit

16. Tausta
Taittosuunnittelija kohtaa melko usein tarpeen muotoilla paitsi tiettyjä elementtejä, kuten taulukoita, luetteloita, tekstiä, mediaelementtejä ja lomakkeita. Joskus sinun on myös tyyliteltävä lohkot, joissa ne sijaitsevat. Voit tehdä tämän asettamalla taustan sisältöä sisältävälle lohkolle, ja opimme, kuinka tämä tehdään taustaominaisuuden avulla tällä oppitunnilla. Tutkitaan värin, kuvan asettamisen ominaisuuksia, opitaan sijoittamaan tausta ja asettamaan sen koko

teoria
testit

17. Gradientit
Yksivärinen tausta tai kuva ei ole ainoa tapa muotoilla lohkoa. Taiteilijat ja suunnittelijat käyttävät usein liukuvärejä luodakseen taustoja – sulavia siirtymiä väristä toiseen. Tässä opetusohjelmassa opimme luomaan lineaarisia ja säteittäisiä gradientteja. Liukuvärien ja temppujen avulla tutkimme terävien siirtymien luomista värien välillä ja opimme myös väripyörästä ja kuinka sen avulla voidaan löytää väriyhdistelmiä liukuväreille

teoria
Harjoittele

18. Itsenäinen työ
Lisätehtävät, joiden avulla voit vahvistaa hankittua teoriaa

19. Lisämateriaalit
Hexlet-tiimin kuratoimat artikkelit ja videot. Auttaa sukeltamaan syvemmälle kurssin aiheeseen