Nem újdonság már, de sokan nem tudják, hogyan lehet a Photoshoppal komplett weboldalakat összeállítani. Így a kiadványszerkesztők csak egy lépésre vannak attól, hogy igazán mutatós, egyedi weboldalakat tudjanak készíteni, egy csapásra bővítve ezzel termékpalettájukat.
A tanfolyam első óráin nagyvonalúan összedobunk egy ilyen weblapot, hogy lássuk a folyamatot az elejétől a végéig. Az első crash-course után tüzetesen megismerkedünk a grafikus webszerkesztés titkaival. Miből áll egy weblap? Hogyan jutunk el a koncepcióig? Hogyan készülnek a weblapok kötelező alkotóelemei? Grafikus eszközeinkkel kialakítjuk a fő- és egy aloldal layoutját, majd darabjaikat egyenként exportálva alapjaitól építjük fel a HTML-kódot. A tanfolyamot záró workshopokon megvizsgálunk néhány hasznos effektet, trendy web 2.0-s reklámelemeket készítünk, és megtanuljuk, hogyan automatizálhatók a tömegesen elvégzendő műveletek.
A magánórákat az Ön igényeinek megfelelően tartom. A tanfolyamhoz jegyzetet biztosítok.
Időtartam: kb. 10 óra
Egy gyors weblap :: Design, slicing (szeletelés) és exportálás
- Képernyő- és browserméretek
- Színpaletta generálása
- Segédvonalak és rácsok
- Alap-layout
- Okos objektumok
- Effektezés
- Szövegek
- Navigáció, hover-effektek
- Szeletelés (slicing)
- Hivatkozások
- Tömörítés (méretoptimalizálás)
- Exportálás CSS-formázott HTML-be
- WYSIWYG-szerkesztés Dreamweaverben
Előkészületek
- Néhány példa
- Beállítások és a munkakörnyezet kialakítása
- Koncepció
- Színpaletta generálása
- fényképről,
- harmóniatörvények alapján,
- kész paletták böngészése
- Csatornák (Channels), színkör, kapcsolók (Swatches)
- Tipográfiai ismeretek
- Hasznos fejlesztői eszközök: Firebug és Web Developer
- Képformátumok: GIF, JPEG, PNG
- Az Export-dialógus
Weboldalak felépítése
- Rácsok kezelése, 960-grid-system
- Pozíciótörvény, intenzitástörvény, mérettörvény, disszonancia
- Weblapok részei: tartalom és periférikus elemek (fejléc, navigáció, oldalsáv, lábléc)
- Navigációk: vízszintes sáv, legördülők (drop down), függőleges navigáció, kartotékfülek, keresőmező, tag cloud, breadcrumbs
Weboldalak kellékei
- Tab-navigáció
- Dropdown-navigáció
- Vízszintes navigáció
- Háttérgrafikák
- Ikonok
Weblap szerkesztése
- Template beállítása
- Háttérelemek
- Keret-elemek
- Fejlécgrafikák
- Navigáció
- A honlap
- Cikkek grafikákkal
- Aloldal
- Könyvtár- és dokumentumstruktúra
- A weblap strukturálása: wrapper, header, content, footer
- A weblap kerete
- Header
- Navigáció: Sprite-ok
- Tartalom
- Footer
Effektek
- Effektek (rétegstílusok)
- Fekete-fehér
- Tükröződés
- Rajz-effekt
- Keret
- Szövegeffektek
Web 2.0-reklámelemek
- Matricák
- Post-it cetli
- Banner animáció
Automatizálás
- Akciók
- Batch-feldolgozás
- PDF-export és webes fotógaléria (CS3)
Kapcsolódó modul: Dreamweaver