Webdesigner tanfolyam online | Tanulj otthonod kényelméből!

Webdesigner tanfolyam - Könnyen hasznosítható szaktudást keresel? Érdekel a weboldalak látványának megtervezése és megalkotása? Ha igen, a legjobb helyen jársz! Online világunkban megkerülhetetlen a jól átgondolt, átlátható designelemek alkalmazása, amelyekkel könnyebben befogadhatóvá válik az óriási mennyiségű információ, amivel nap mint nap találkozunk. A webdesigner képzés során megtanulhatsz egyedi, hatásos, stílusos webgrafikákat készíteni. A grafikai ismeretek megszerzése után tanfolyamunkon komoly informatikai és webergonómiai tudásra is szert tehetsz. Ha grafikusként szeretnél elhelyezkedni, vagy bővítenéd már meglévő tudásod, esetleg szívesen indítanál egy saját webdesigner vállalkozást, akkor mindenképpen Neked szól webdesigner tanfolyamunk!

Egy weboldal dizájnját úgy kell megtervezi és megvalósítani, hogy egyensúlyban legyen a szövegek és a grafikák aránya. Egy weboldal aluldizájnolt vagy akár túldizájnolt is lehet, ami nem szolgálja egy weboldal elsődleges célját; a felhasználók igényeinek hatékony kielégítését. Elsősorban olyan szempontokra érdemes odafigyelni, mint az egyszerű navigáció, olvashatóság, átláthatóság. A marketing szempontokról sem szabad megfeledkezni, hiszen ezek szintén alapvető elemei egy hatékony weboldalnak. Ilyen szempontok a márkázás, a látogatók megtartása, bizalom kiépítése és a letisztult kommunikáció. Kiemelten fontos még, hogy egy weboldal mind szövegeiben és megjelenésében is hitelességet sugározzon. A Webdesigner képzés során ezen szempontok mentén oktatjuk a jelentkezőket, hogy igazán profi webdesignerként végezzenek!

A webdesigner képzést azoknak az érdeklődőknek ajánljuk, akik szívesen terveznének lenyűgöző megjelenésű, felhasználóbarát, jól használható weboldalakat. Akár azért, mert grafikusként szeretnének elhelyezkedni (vagy önálló vállalkozást indítanának), akár azért, mert jelenlegi munkakörük megköveteli a webes tartalmak szerkesztését és kezelését. Továbbá azok számára is hasznos lehet képzésünk, akik szívesen szereznének komolyabb informatikai ismereteket, de még nem tudják biztosan, hogy milyen irányba szeretnének elindulni az IT területén. A webdesigner tanfolyam során a nagy nemzetközi gyártók által készített, világszerte ismert szoftvereket mutatjuk be. Akik ismerik ezeket az egységes felületű szoftvereket, azoknak sokkal könnyebb dolguk lesz, ha később önállóan szeretnének továbbtanulni!

Kép formátumok / színek

Vektor és pixel grafika összehasonlítása, felhasználási területük, alkalmazásuk.
Használt fájlformátumok. Előnyök és hátrányok.
Színek használata
Színharmónia lehetőségei
Színprofilok, mikor melyiket
- RGB
- CMYK
- HSB
Felbontás fajták
- Képernyőn megjelenő anyagok
- Nyomdai munkák

Vektorgrafika

Alapok, dokumentumok létrehozása, tulajdonságai
Munkaterület, vonalzók beállítása
Eszközök használata, tulajdonságainak megadása
Grafikai elemek használata, tulajdonságaik
- Egyszerű és pontos használat
Pen Tool használata
- Lehetőségei kiegészítő eszközei
Objektum műveletek
- 4 alapmúvelet
Szöveg felhasználás
- Alap szöveg kezelés
- Görbék és a szöveg kapcsolata
Maszkolások
- Fajtái, lehetőségei
Színek
- Color, Swatch, Color Guide
Színátmenetek
- Különféle színátmenetek létrehozása, felhasználása
Exportálás
- Vektoros és Pixel fájl típusok
Effektek használata (Ai és PS)
3D használata, lehetőségei

Felhasználás

Logó készítés egyszerűen
Arculat készítés
Reszponzív tervek készítése

Pixelgrafika

Pixel grafika alapjai
Dokumentumok létrehozása, tulajdonságai
Alap grafikai eszközök
Rétegek használata
Méretezések fajtái
Kijelölések fajtái
Pen Tool használata
Mappák használata
SM objektumok használata, előnyei
Színek, színátmenetek
Radír, ecset használata, tulajdonságainak megadása
Szöveg felhasználás
Maszkolás
Retusálás
Szűrők használata
Szabályzóréteg használata
Mockup készítés
UI tervezés
Action használata
Összetett képek készítése

Felhasználás

Komplett web design tervezése
Reszponzív tervek készítése
Plakátok, és egyéb kiadványok készítése
Banner készítés

Modulokhoz használt szoftverek

Adobe Illustrator: Windows vagy MacOS
Photoshop: Windows vagy MacOS
Bridge: Windows vagy MacOS

HTML5

HTML
- Jelentése
- Működése
- Megjelenítése
- Szerkesztése
W3C bemutatása
- Célja
- Tevékenysége
Szabványok használata és fontossága
- Miért fontos, hogy betartsuk őket
- Régebbi szabványok és HTML5 összehasonlítása
DTD fogalma
- Célja
- Miért fontos a használata?
HTML elem fogalma
- Címkék
- Attribútumok
- Tartalom
- Elem típusok
HTML oldal felépítésére vonatkozó szabályok
- DTD, Head és Body
Alapvető HTML elemek
- meta
- link
- title
- Címsorok
- Bekezdések
- Hivatkozások
- Sortörések
- Listák
- Képek
- Videók
- Táblázatok
- Beágyazó keretek
  - Külső oldalak megnyitása az oldalon belül
  - Google Maps térképrészlet beágyazása
- Űrlapok, beviteli mezők és gombok
  - Típusok bemutatása
- Karakterformázó címkék
- Oldalfelépítésre vonatkozó szemléletek és javaslatok
- Tároló elemek
- Szemantikus elnevezésű elemek
- Osztályok és egyedi azonosítók
- DOM fogalma CSS3
- CSS
  - Jelentése
  - Működése
- CSS használata, elhelyezése
  - style HTML elem
  - style attribútum
  - Külső stíluslap
- Külső stíluslapon való megoldás szükségessége
  - Szabványok betartása
- Szelektorok használata
  - Univerzális szelektor
  - Típus szelektor
  - Szelektor leszármazott elemekre (DOM)
  - Szelektor gyermek elemekre (DOM)
    - Közvetlen
    - Tetszőleges
  - Szelektorok testvér elemekre
  - Osztály szelektora
  - Egyedi azonosító szelektora
  - Attribútum szelektor
  - Pszeudo osztály szelektor
- Alapvető CSS beállítások
  - háttér, szín, margók, belső-margók, betűméret, betűtípus, szegély, árnyék stb.
- Képek (és egyéb elemek) pozicionálása szövegben
- Elemek megjelenítésének beállításai (display)
- Elemek pozicionálása
- CSS áttűnések
- CSS animációk

Reszponzív megjelenés

Reszponzivitás fogalma
Képernyőméretek és egyéb oldalmegjelenítési formák
Mobile First szemlélet
CSS media query-k használata
HTML link elem media attribútumának használata
Nyomtatási kép megjelenésének beállítása Kiegészítés, egyéb hasznos tudnivalók
Saját munka ellenőrzése
- W3C validator
Honlapok beüzemelése
- Domain vásárlás (+Domain név bejegyzésre vonatkozó szabályok)
- Tárhely vásárlás Bootstrap 4 (15 óra)
Keretrendszer fogalma
Bootstrap rövid története
Előnyök és hátrányok
Bootstrap 4 használata
- Forrásfájlok betöltési módjai
Bootstrap működése
- Előre megírt osztályok
Bootstrap oldalszerkezete
- Rácsrendszer
- 3 szerkezeti egység
  - Container
  - Row
  - Oszlopok, col-… osztályú elemek
- Elemek méretezése col-… osztályokkal
- Méretezés több különböző képernyőméretre
Bootstrap képernyőméretek
Alapvető beállítások
- Színek
  - Szöveg, háttér, szegély, hivatkozás
- Szöveg igazítások
- Karakterformázások
- Margók
- Belső eltartások
Alapvető elemek formázása vagy létrehozása Bootstrap-pel
- Táblázatok
- Képek
- Gombok
- Folyamatjelölők
- Figyelmeztetések, felugró ablakok
- Navigációs sávok
- Carousel-ek
Bootstrap dokumentációjának használata
- Bármely elem felhasználása minta alapján
Formázás Bootstrap-pel és saját CSS-sel

Dreamweaver (10 óra)

Milyen szoftver a Dreamweaver
Felhasználói felület ismertetése
Felhasználói felület személyre szabása
- Saját nézetek létrehozása
Nézetek
Gyors kódgenerálások
Site létrehozása és kezelése
Weboldal beállítása
HTML elemek beszúrási módjai
Formázás CSS designer panellel
- Forrás beállítása
- Media query-k beállítása, Szelektorok felvétele
- Tulajdonságok beállítása
Oldalak tesztelése
- Dreamweaver-en belül, böngészőkben
FTP csatlakozás webtárhelyhez
Bootstrap támogatás használata
- Bootstrap keretrendszer használata
- Bootstrap személyre szabása
- Bootstrap sablonok használata