Tvorba webových stránok na Webflow - kurz 31 900 RUB. z Uprocku, tréning 4 mesiace, dátum 27.11.2023.

instagram viewer

TEÓRIA

Úvod

V tejto lekcii sa dozviete o kurze a ako bude školenie prebiehať. Zoznámte sa s funkciami a účelmi bezplatných a platených plánov Webflow. Dozviete sa tiež, ako štruktúrovať prácu na projekte od analýzy až po spustenie.

• O čom je tento kurz?
• Ako kurz funguje
• Plány a sadzby
• Plány lokality
• Plány účtov
• Kontrola a analýza rozloženia
• Kontrolný zoznam akceptácie rozloženia
• Pracovný plán
• Príprava rozloženia na rozloženie
• Exportujte a optimalizujte obrázky
• Príprava ďalších súborov

TEÓRIA

Webová štruktúra

V tejto lekcii sa zoznámite so základnými prvkami webovej stránky a princípmi blokového rozloženia, na ktorom služba Webflow funguje. Základné znalosti vám pomôžu pochopiť základnú terminológiu vývoja webu. Dozviete sa, čo je hierarchia webových stránok a z čoho pozostáva. Preskúmajte panel Navigátor, aby ste pochopili, ako sa štruktúra prvkov vytvára a zobrazuje vo Webflow.

• Blokové rozloženie a základné HTML a CSS
• Hierarchia prvkov lokality
• Panel navigátora
• Cvičenie: Plánovanie štruktúry lokality

TEÓRIA

Tvorba a publikovanie projektu

V tejto lekcii sa naučíte, ako sa zaregistrovať na webovej lokalite Webflow a vytvoriť projekt, dozviete sa obmedzenia počtu projektov a stránok v projekte. Pochopíte, aké režimy prevádzky existujú v službe Webflow. A tiež sa dozviete, ako aktivovať svoj účet a publikovať svoje stránky pomocou rozbaľovacieho panela Publikovať.

• Registrácia a vytvorenie projektu
• Publikovanie webovej stránky
• Zdieľať projekt
• Klonovanie projektu
• Klonovanie vlastnej šablóny

TEÓRIA

základné nastavenia

V režime Project Settings sa zoznámite so základnými nastaveniami projektu. V dôsledku toho nastavte projekt, nahrajte obrázky do priečinkov a vytvorte súpravu používateľského rozhrania.

• Nastavenia projektu
• Pripája sa vaša doména
• Súbory stránok
• Všeobecné nastavenia projektu
• Nastavenie základných štýlov
• Nahrávanie obrázkov
• Súprava hlavných prvkov používateľského rozhrania

PRAXE

Prvky

V tejto lekcii sa dozviete o spôsoboch pridávania prvkov na stránku lokality a o tom, ktoré prvky nemôžu byť umiestnené vo vnútri ich vlastného druhu. Zistite, aké základné prvky existujú na vytvorenie webovej stránky a aký je ich účel. Nakoniec vytvorte štruktúru lokality a pridajte obsah k prvkom.

• Pridávanie prvkov
• Prehľad hlavných prvkov
• Prehľad funkčných prvkov
• Personalizácia prvkov
• Cvičenie: Vytvorenie hlavnej štruktúry stránky
• Cvičenie: Pridávanie prvkov a tried

PRAXE

Štýly prvkov

Oboznámite sa s pojmami ako Classes a Combo Classes a dozviete sa o ich účele. V dôsledku toho pridajte triedy do sekcií, kontajnerov, obrázkov, textov.

• Všeobecné zásady
• Prehľad jednoduchých častí panela Štýl
• Prehľad panela Správca štýlov
• Stavy prvkov
• Cvičenie: Pridávanie obsahu do prvkov

PRAXE

Nastavenia štýlu. 1 diel

Preštudujete si zloženie panela Štýl a preskúmate časť Rozloženie, ktorá sa používa na konfiguráciu vzájomného usporiadania prvkov.

• Panel štýlu: Sekcia rozloženia
• Cvičenie: Podrobné usporiadanie častí 1 a 2

PRAXE

Nastavenia štýlu. časť 2

Budete pokračovať v skúmaní kompozície panela Style a skúmaní prvku Grid, ktorý je zodpovedný za spôsob, akým sú prvky usporiadané, čo je ideálne Vhodné na vytváranie rôznych zložitých rozložení mriežky vrátane tabuliek, ktoré možno ľahko previesť na karty v mobile obrazovky.

• Panel štýlu: Grid Element
• Cvičenie: Podrobné usporiadanie častí 3 a 4

PRAXE

Nastavenia štýlu. Časť 3

Ďalej budete študovať kompozíciu panela Štýl a študovať časť Veľkosť, ktorá vám umožňuje určiť veľkosť prvku, nastaviť hodnoty minimálnej a maximálnej šírky a výšky a prispôsobiť správanie podriadených prvkov, ktoré presahujú hranice nadradený prvok.

• Panel štýlu: Časť veľkosti
• Cvičenie: Podrobné usporiadanie častí 5 a 6

PRAXE

Stránky lokality

Pozrieme sa na panel Stránky. Poďme zistiť, aké typy stránok existujú a ako ich prispôsobiť. V dôsledku toho vytvoríte 7-8 sekcií stránky.

• Stránky lokality
• Cvičenie: Podrobné usporiadanie častí 7 a 8

PRAXE

Sekundárne funkcie

Dozviete sa o ďalších funkciách, ktoré vám pomôžu pri práci na projekte, ako aj pri hľadaní školiacich materiálov. V dôsledku toho vytvoríte 9-10 sekcií stránky.

• Funkcie pomocníka v režime návrhára
• Prax. Podrobné usporiadanie sekcií 9 a 10

PRAXE

Symboly a vzory

Zistite, ako vytvárať symboly z prvkov alebo skupín prvkov vo Webflow na správu opakujúcich sa blokov a obsahu. V dôsledku toho rozložíte navigačnú ponuku, navigačný panel, nastavíte kotviace odkazy a vytvoríte symboly pre ponuku a pätu.

• Prehľad panela symbolov
• Recenzia hotových Layoutov
• Vytváranie postáv
• Prax

PRAXE

Adaptívne rozloženie

V tejto lekcii sa naučíte základy adaptívneho rozloženia a zoznámite sa s pojmom „Breakpoints“. V dôsledku toho vytvorte adaptívnu verziu pre tablet a mobil, adaptívnu verziu pre veľké obrazovky a adaptívne menu.

• Základy adaptívneho rozloženia
• Body zlomu
• Kontrola adaptability
• Prispôsobenie webových stránok pre mobilné obrazovky
• Prispôsobenie webových stránok pre veľké obrazovky
• Testovanie adaptability

ROZŠÍRENÉ SCHOPNOSTI

Animácia. 1 diel

Naučíte sa všeobecné princípy animácie, naučíte sa animovať tlačidlá odkazov a iné prvky pri umiestnení kurzora myši a animovať prvú obrazovku.

• Všeobecné princípy animácie
• Spúšťače
• Nastavenie spúšťačov
• Animujúce prvky pri umiestnení kurzora myši
• Ukotvenie odkazov

ROZŠÍRENÉ SCHOPNOSTI

Animácia. časť 2

Dozviete sa, čo je to globálna animácia. V dôsledku toho sa naučte, ako ho vytvoriť.

• Globálna animácia
• Komponentná animácia
• Animácia pri načítavaní a posúvaní stránky

ROZŠÍRENÉ SCHOPNOSTI

Vloženie kódu tretej strany

Pochopíte, prečo potrebujete vložiť kód tretej strany. Zoznámte sa s komponentom Embed. Zistite, ako integrovať kód tretích strán, napríklad pripojiť služby komentárov alebo miniaplikáciu mapy. V praxi sa naučte vložiť kód karty.

• Vložiť komponent
• Vloženie kódu do nastavení stránky
• Vloženie kódu do nastavení projektu
• Vloženie kódu do nastavení prvku (vlastné atribúty)
• Vloženie mapy na stránku

ROZŠÍRENÉ SCHOPNOSTI

Analytika a SEO

Zistite, čo je webová analytika a SEO a prečo sú potrebné. Pochopíte, ako prepojiť Analytics a nastaviť SEO stránky.

• Pripojenie služby Analytics
• Prepojenie Yandex Metrica a Google Analytics
• Nastavenie SEO v nastaveniach stránky

ROZŠÍRENÉ SCHOPNOSTI

Dokončenie projektu

Ešte raz si prejdite všetkými fázami tvorby webu. Dozviete sa, ako web schváliť a preniesť na klienta. Zistite, ako pripojiť webovú stránku k doméne na hostingu Webflow, nahrať webovú stránku a nainštalovať ju na svoj hosting.

• Kontrolný zoznam na kontrolu stránky
• Schválenie a odovzdanie projektu klientovi
• Pripojenie webovej stránky k doméne na hostingu Webflow
• Nahrajte stránku a nainštalujte ju na svoj hosting

ROZŠÍRENÉ SCHOPNOSTI

Bonus

Absolventský projekt