Webflow-sivustojen luominen - kurssi 31 900 RUB. Uprockista, koulutus 4 kuukautta, päivämäärä 27.11.2023.

instagram viewer

TEORIA

Johdanto

Tällä oppitunnilla opit kurssista ja koulutuksen etenemisestä. Tutustu Webflow: n ilmaisten ja maksullisten suunnitelmien ominaisuuksiin ja tarkoituksiin. Opit myös jäsentämään projektityötä analyysistä käynnistämiseen.

• Mistä tällä kurssilla on kyse?
• Kuinka kurssi toimii
• Suunnitelmat ja hinnat
• Sivustosuunnitelmat
• Tilisuunnitelmat
• Tarkastelu ja asetteluanalyysi
• Asettelun hyväksymisen tarkistuslista
• Työsuunnitelma
• Asettelun valmistelu asettelua varten
• Vie ja optimoi kuvia
• Muiden tiedostojen valmistelu

TEORIA

Verkkorakenne

Tällä oppitunnilla tutustut web-sivun peruselementteihin ja lohkoasettelun periaatteisiin, joilla Webflow-palvelu toimii. Perustiedot auttavat sinua ymmärtämään web-kehityksen perusterminologiaa. Opit mitä web-sivuhierarkia on ja mistä se koostuu. Tutustu Navigator-paneeliin ymmärtääksesi, kuinka elementtirakenne luodaan ja näytetään Webflowssa.

• Estä asettelu ja perus HTML ja CSS
• Sivuston elementtien hierarkia
• Navigaattoripaneeli
• Harjoitus: Sivuston rakenteen suunnittelu

TEORIA

Projektin luominen ja julkaiseminen

Tällä oppitunnilla opit rekisteröitymään Webflow-verkkosivustolle ja luomaan projektin sekä oppimaan projektin ja projektin sivumäärän rajoituksia. Ymmärrät, mitä toimintatapoja Webflow-palvelussa on. Opi myös aktivoimaan tilisi ja julkaisemaan sivustosi pudotusvalikon Julkaise-paneelin avulla.

• Projektin rekisteröinti ja luominen
• Verkkosivuston julkaiseminen
• Jaa projekti
• Projektin kloonaaminen
• Mukautetun mallin kloonaaminen

TEORIA

Perus asetukset

Tutustut projektin perusasetuksiin Projektiasetukset-tilassa. Tämän seurauksena määritä projekti, lataa kuvat kansioihin ja luo UI Kit.

• Projektiasetukset
• Yhdistetään verkkotunnukseesi
• Sivuston tiedostot
• Yleiset projektin asetukset
• Perustyylien asettaminen
• Kuvien lataaminen
• Pääelementtien käyttöliittymäsarja

HARJOITELLA

Elementit

Tällä oppitunnilla opit kuinka lisätä elementtejä sivuston sivulle ja mitkä elementit eivät voi sijaita omanlaisensa sisällä. Opi mitä peruselementtejä on olemassa verkkosivuston luomiseen ja mikä niiden tarkoitus on. Luo lopuksi sivuston rakenne ja lisää sisältöä elementteihin.

• Elementtien lisääminen
• Yleiskatsaus pääelementteihin
• Yleiskatsaus toiminnallisiin elementteihin
• Elementtien personointi
• Harjoitus: Sivuston päärakenteen luominen
• Harjoitus: Elementtien ja luokkien lisääminen

HARJOITELLA

Elementtityylejä

Tutustut käsitteisiin, kuten luokat ja yhdistelmäluokat, ja opit niiden tarkoituksesta. Tämän seurauksena lisää luokkia osioihin, säilöihin, kuviin, teksteihin.

• Yleiset periaatteet
• Yleiskatsaus Tyyli-paneelin yksinkertaisiin osioihin
• Style Manager -paneelin yleiskatsaus
• Elementin tilat
• Harjoitus: Sisällön lisääminen elementteihin

HARJOITELLA

Tyyliasetukset. 1 osa

Tutkit Tyyli-paneelin koostumusta ja tarkastelet Layout-osiota, jota käytetään elementtien sijoittelun määrittämiseen suhteessa toisiinsa.

• Tyylipaneeli: Asettelu-osio
• Harjoitus: Osien 1 ja 2 yksityiskohtainen ulkoasu

HARJOITELLA

Tyyliasetukset. osa 2

Jatkat Style-paneelin koostumuksen tutkimista ja Grid-elementin tutkimista, joka vastaa elementtien sijoittelusta, mikä on ihanteellinen Sopii useiden monimutkaisten ruudukkoasettelujen luomiseen, mukaan lukien taulukot, jotka voidaan helposti muuntaa korteiksi mobiililaitteella näytöt.

• Tyylipaneeli: Ruudukkoelementti
• Harjoitus: Osien 3 ja 4 yksityiskohtainen ulkoasu

HARJOITELLA

Tyyliasetukset. Osa 3

Jatkat Tyyli-paneelin koostumuksen tutkimista ja Koko-osion tutkimista, jonka avulla voit määrittää elementin koon, sarjan vähimmäis- ja enimmäisleveys- ja korkeusarvot sekä mukauttaa rajojen yli ulottuvien alielementtien toimintaa pääelementti.

• Tyylipaneeli: Koko-osio
• Harjoitus: Osien 5 ja 6 yksityiskohtainen ulkoasu

HARJOITELLA

Sivuston sivut

Tarkastellaan Sivut-paneelia. Selvitetään, millaisia ​​sivuja on olemassa ja miten niitä muokataan. Tämän seurauksena luot 7-8 osiota sivustosta.

• Sivuston sivut
• Harjoitus: Osien 7 ja 8 yksityiskohtainen ulkoasu

HARJOITELLA

Toissijaiset toiminnot

Opit lisäominaisuuksista, jotka auttavat sinua projektityöskentelyssä sekä koulutusmateriaalien etsimisessä. Tämän seurauksena luot 9-10 osiota sivustosta.

• Helper toimii suunnittelijatilassa
• Harjoitella. Osien 9 ja 10 yksityiskohtainen ulkoasu

HARJOITELLA

Symbolit ja kuviot

Opi luomaan symboleja Webflow: n elementeistä tai elementtiryhmistä toistuvien lohkojen ja sisällön hallitsemiseksi. Seurauksena on, että asetat navigointivalikon, navigointipalkin, määrität ankkurilinkkejä ja luot symboleja valikkoon ja alatunnisteeseen.

• Symbolit-paneelin yleiskatsaus
• Valmiiden asettelujen katsaus
• Hahmojen luominen
• Harjoitella

HARJOITELLA

Mukautuva asettelu

Tällä oppitunnilla opit mukautuvan asettelun perusteet ja tutustut "katkopisteiden" käsitteeseen. Tämän tuloksena voit luoda mukautuvan tabletin ja mobiiliversion, mukautuvan suurille näytöille ja mukautuvan valikon.

• Mukautuvan asettelun perusteet
• Katkopisteet
• Sopeutuvuuden tarkistus
• Verkkosivuston mukauttaminen mobiilinäytöille
• Verkkosivuston mukauttaminen suurille näytöille
• Testaa sopeutumiskykyä

LAAJENNETTUT OMINAISUUDET

Animaatio. 1 osa

Opit animaation yleiset periaatteet, opit animoimaan linkkipainikkeita ja muita hiirielementtejä sekä animoimaan ensimmäisen näytön.

• Yleiset animaatioperiaatteet
• Liipaisimet
• Triggerien asettaminen
• Animoitavat elementit päällä
• Ankkurilinkit

LAAJENNETTUT OMINAISUUDET

Animaatio. osa 2

Opit mitä globaali animaatio on. Tämän seurauksena opi luomaan se.

• Maailmanlaajuinen animaatio
• Komponenttianimaatio
• Animaatio sivua ladattaessa ja vieritettäessä

LAAJENNETTUT OMINAISUUDET

Lisätään kolmannen osapuolen koodia

Ymmärrät, miksi sinun on lisättävä kolmannen osapuolen koodi. Tutustu Embed-komponenttiin. Opi integroimaan kolmannen osapuolen koodia, esimerkiksi yhdistämään kommenttipalvelut tai karttawidget. Käytännössä opit syöttämään korttikoodin.

• Upota komponentti
• Koodi lisääminen sivun asetuksiin
• Koodin lisääminen projektiasetuksiin
• Koodin lisääminen elementtiasetuksiin (muokatut attribuutit)
• Kartan lisääminen sivustolle

LAAJENNETTUT OMINAISUUDET

Analytiikka ja SEO

Opi mitä verkkoanalytiikka ja hakukoneoptimointi ovat ja miksi niitä tarvitaan. Ymmärrät Analyticsin yhdistämisen ja SEO-sivujen määrittämisen.

• Analyticsin yhdistäminen
• Yandex Metrican ja Google Analyticsin yhdistäminen
• SEO: n määrittäminen sivun asetuksissa

LAAJENNETTUT OMINAISUUDET

Projektin loppuun saattaminen

Käy vielä kerran läpi kaikki verkkosivuston luomisen vaiheet. Selvittelet, kuinka sivusto hyväksytään ja siirretään asiakkaalle. Opi yhdistämään verkkosivusto Webflow-isännöinnin verkkotunnukseen, lataamaan verkkosivusto ja asentamaan se isännöintiisi.

• Tarkistuslista sivuston tarkistamista varten
• Projektin hyväksyminen ja luovutus tilaajalle
• Verkkosivuston yhdistäminen verkkotunnukseen Webflow hosting -palvelussa
• Sivuston lataaminen ja sen asentaminen isännöintiin

LAAJENNETTUT OMINAISUUDET

Bonus

Valmistumisprojekti