Webszerkesztő tanfolyam bemutatása

Ezen a képzésünkön bemutatjuk neked az Adobe Dreamweaver weboldalszerkesztő programot. Használatával a programba előre definiált modulokból képes leszel összeállítani saját igényeidre szabott weboldalakat. A Dreamweaver használatához minimális programozói tudásra lesz csak szükséged, melyet elsajátíthatsz tanóráinkon. A tanfolyamon bemutatjuk egy statikus weboldal felépítését. Betekintést nyújtunk az Adobe Photoshop alapjaiba is. Mindezen felül még a sok rejtéllyel övezett keresőoptimalizálási alapokba is bevezetünk.

Ha érdekel a weboldalkészítés világa, de nincs rá időd, vagy nem szeretnél nagyon elmélyülni a forráskódokban, akkor ez a tanfolyam ideális választás lesz számodra. A webszerkesztő tanfolyam elvégzése után képes leszel rövid időn belül önállóan saját statikus weboldal létrehozására.

További információk

További információk

A tanfolyam adatai:
Nyilvántartásba vételi száma: E-000069/2013/D003
Tanfolyam díja: 119.000 Ft
Tanfolyam vizsgadíja: 0 Ft
Tanfolyam óraszáma: 72 óra
Tanfolyam végét igazoló dokumentum: tanúsítvány
Tanfolyam helyszíne: 1139 Budapest, Frangepán utca 3.

A tanfolyam megkezdésének feltételei:
Iskolai végzettség: nem feltétel
Szakmai végzettség: nem feltétel
Szükséges előismeretek: készségszintű operációs rendszer (pl. Windows) ismeretek

Jó, ha tudod:
Tanfolyamainkon való részvételed kedvezményekkel és részletfizetési lehetőségekkel könnyítjük.

Facebook Twitter Linkedin Időpontok Érdeklődés

Webszerkesztő tanfolyam tematikája

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

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)

WEBSZERKESZTÉS - 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

WEBSZERKESZTÉS - ADOBE PHOTOSHOP CS6

• 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

WEBSZERKESZTÉS - ADOBE PHOTOSHOP CS6

• 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ő motor bará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