Webszerkesztő Tanfolyam

Szeretnél saját weblapot tervezni, de a programozás nem a te világod? Akkor Webszerkesztő tanfolyamunkat neked találták ki! Az Adobe Dreamweaver-nek köszönhetően neked csak össze kell állítani a számodra legmegfelelőbb félkész modulokból saját weblapod, melyekhez a mi szakértőink adják a megfelelő útmutatást! A Webszerkesztés kiegyensúlyozott ismereteket ad, mert a kurzus 72 órája alatt behatóan megismerkedhetsz az Adobe Photoshop varázslatos világának alapjaival, így továbbléphetsz az előre generált tartalmak korlátaiból!

72 órás oktatási anyagunknak köszönhetően most lehetőséged nyílik megtapasztalni, hogy a Webszerkesztés már nemcsak a programozók privilégiuma lehet!

A sikeres vizsgát követően képes leszel:

• Statikus weboldalak készítésére kisvállalkozások számára
• Képek és Animációk létrehozására egyszerűbb Bannerek készítéséhez, weblapokhoz
• Keresőoptimalizálás (SEO) alapismeretek

A tanfolyam megkezdésének feltételei:

WEBES ALAPISMERETEK

Hálózati alapismeretek

• LAN, MAN, WAN
• Protokollok
• Internet alapismeretek, TCP/IP protokoll
• URL: az információ pontos helyének meghatározása
• A weboldalak elhelyezésének lehetőségei
• Domain és DNS ismertetése
• Szövegszerkesztő kiválasztása

Html forráskód szerkesztés

• HTML áttekintés
• HTML nyelv alapjai
• HTML dokumentum részei
• HTML Tag-ek és attribútomok
• Gyakorlati feladatok megoldása

Alapvető szövegformázó HTML elemek

• Szövegközi elemek viselkedése
• Blokk elemek viselkedése
• Címek, listák, bekezdések
• Kép elhelyezése háttérként
• Kép elhelyezése tartalomként
• Hivatkozások
• Gyakorlati feladatok

WEBSZERKESZTÉS

Adobe Dreamweaver CS6

Kezelés, munkaterület

• A program kezelőfelülete
• File paletta
• Tulajdonságpaletta
• Egyéb paletták

Weblap, webhely létrehozása

• Site, honlapok létrehozása, mentése
• File szerkezet áttekintése
• Gyakorlati feladatok (oldalon belüli navigáció)

Táblázatok

• Táblázat – mikor használjam?
• Táblázat szerkezet elemei
• Beágyazott táblázatok
• HTML elemek formázása inline stílussal
• Táblázatok gyakorlati felhasználása (kimutatások, adminisztrációs felületek táblázatai)
• Gyakorlati feladatok

CSS

• Elemi doboz modell felépítése
• Beágyazott és head–ben elhelyezett stílusok
• Stíluslapok
• Class , Id, Tag kiválasztók
• Stílusok, formátumok
• Gyakorlati feladatok megoldása
• Microsite tipusú weboldal elkészítésének előkészületei:
• Paper-prototype megtervezése elkészítése
• HTML5 szemantikus tagoló elemek ismertetése
• Az elkészített terv alapján a weboldal fő szerkezeti elemeinek elkészítése
• Microsite típusú weboldal tartalmi elemeinek megszerkesztése
• Szöveg formázási lehetőségek
• Díszítések stílussal
• Saját betűkészlet alkalmazása
• CSS stíluselemek használatával a végleges kinézet kialakítása
• Microsite publikálása tárhelyre (FTP kezelés)
• Validálás (HTML,CSS)

WEBES GRAFIKA

ADOBE PHOTOSHOP CS6

• Grafikai alapismeretek (pixelgrafika)

A Photoshop program kezelőfelülete

• Eszköztárak
• Nézetek
• Paletták
• Munkaterület

Munka a Photoshop programmal

• Használható fájlformátumok (gif, jpg, png, bmp,...)
• Csoportos képátméretezés egyszerűen
• Pattern (web hátterek) készítése
• Képek vágása és optimalizálása webre
• Gyakorlati feladatok megoldása
• Színkezelés, színek kiválasztása (colorscheme)
• Képmódosító eljárások (image menüpont)
• Rétegkezelés
• Szöveg elhelyezése, betűtípus kiválasztása
• Gomb elkészítése
• Honnan szerezhetünk be képeket? (creative commons)
• Képek optimalizálása webre
• Weboldal képváltó egy elemének elkészítése
• Rétegstílusok
• Szűrők
• Effektek
• Gyakorlati feladat (weboldal logo feliratának elkészítése)

WEBSZERKESZTÉS

ADOBE DREAMWEAVER CS6

• Komplex statikus HTML5 weboldal elkészítése
• paper-prototype elkészítése
• HTML struktúra kialakítása (fejléc, menü, képváltó, tartalom, lábléc)
• Fő blokkelemek kialakítása
• Menü kialakítása (inline-block elemek)
• Legördülő menü kialakításának elve
• jQuery alapok és ismertetés
• jQuery használata, működése
• Egyszerűbb jQuery műveletek (színezés, mozgatás és interakció a CSS -sel)

Összetett gyakorlati feladat megoldása:

• jQuery carousel képváltó kiválasztása és beépítése weboldalba

Weboldal-szekciók kialakítása és SEO

• Kereső motorok működése manapság
• Kereső motorbarát weboldal szerkezet
• Google webmester eszközök
• Közösségi oldalak ereje

Komplex statikus weboldal képváltojának elkészítése

• jQuery alapú szabadon felhasználható képváltó lehetőségek
• Camera slider ismertetése
• Camera slider telepítése és funkciói
• Képváltó beépítésének buktatói (minőség, informatívitás, méret)
• könnyen beépíthető CSS animációk (animate.css, hover.css)

Komplex statikus weboldal – aloldalak

• Aloldalak típusai
• Aloldalak (mutációk) elkészítése a főoldal felhasználásával
• Multimédia elemek beillesztése aloldalakba:
• google map, facebook közösségi elemek, youtube video beágyazása (IFRAME működése)
• saját hang vagy video beágyazása
• könnyen beépíthető jQuery alapú eszközök (fitvidjs.com, datatables.net)

Mi a reszponzivitás?

• Reszponzív weboldalak kialakításának elve
• Weboldal megjelenési helyének kiválasztása media-query használatával

Bootstrap

• Mi ez és mire használjuk?
• Reszponzív weboldal keret elkészítése
• SPRY elemek elhelyezése a weboldalba (menü, tabbed panel, accordion, collapsible panel)
• jQuery alternativák a Dreamweaver spry elemek helyett
• Bootstrapzero ismertetése

WEBSZERKESZTÉS – VIZSGA

• Elkészített vizsga statikus weboldal leadás, publikálás
• Értékelés