WEBLAPFEJLESZTÉS
Tartalom Alapelemek Célok Eszközök Szerkezet Alapelvek Folyamat Prezentáció
Célok Weboldalakkal szemben állított követelmények: - vonzó, egyszerű, igényes, harmonikus színvilág - felhasználóbarát felület, - bővíthető, módosítható, - egyértelmű kezelhetőség, - logikus struktúra, - jól olvasható, - értékes információtartalom, - más-más felbontásban és böngészőben uu. jelenjenek meg az oldalak
Eszközök Böngésző programok weboldalakat megjelenítő szoftverek >> Editorok, webfejlesztők weboldal szerkesztésére szolgáló szoftverek >> Design, kép, hang, mozgókép, videó, animáció -készítő, és -vágó szoftverek weboldal alapelemeit előállító szoftverek >> Filekezelő szoftverek a website szerkezetének létrehozására >>
Eszközök Böngésző programok weboldalakat megjelenítő szoftverek - Internet Explorer - Mozilla FireFox (i) - Google Chrome (i) - Opera (i) <<
Eszközök Design, kép, hang, mozgókép, videó, animáció -készítő, és -vágó szoftverek weboldal alapelemeit előállító szoftverek A.Photoshop, Paint.NET(i), Gimp(i) A. Image Ready Adobe Illustrator, Corell Draw, Flash Sound Forge, Cool Edit Adobe Premiere Flash pixelgraf. design, állóképek, anim.gif-ek vektorgraf. design, állóképek hangok, háttérzene mozgókép, videó intró, animáció <<
Eszközök Filekezelő szoftverek (a website szerkezetének létrehozására) - Windows Intéző - Total Commander (i) - Mozilla FileZilla (i) <<
Eszközök Editorok, webfejlesztők weboldal szerkesztésére szolgáló szoftverek Karakteres HTML szerkesztő programok: Jegyzettömb, TextPad, Note Pad ++, Edit Plus, Oxigene, Macromedia HomeSite Karakteres és grafikus weblapfejlesztő programok: MS Front Page, Adobe Dreamweaver, Adobe Golive Flash (animáció-készítő program, ActionScript) Program Scriptek (Java Script, VB Script) Dinamikus weboldalt megvalósító programnyelvek PHP(i), ASP, Perl, Java <<
Szerkezet A site könyvtárszerkezete >> A weboldal felépítésének a szerkezete >>
Szerkezet munka könyvtár galeria könyvtár flash könyvtár Weboldalhoz szüks. fileok: index.html készített fotók Flashez szükséges anyagok: fejlec.gif arckep.jpg hozott fotók kép, hang, mozgókép buttom1.swf buttom2.swf buttom3.swf buttom4.swf kép hang adat jellege mozgókép formátumok.gif.jpg.jpe.png.mp3.vaw.avi.mpg kezdo.htm fent.htm bal.htm jobb.htm bemut.htm tevekeny.htm galeria.htm video.htm <<
Szerkezet Weboldalak szerkezete: Alapprobléma: - a menüpontok minden oldalon uu. jelenjenek meg - módosítás esetén egyidejűleg minden oldalon uu. módosuljanak az információk Megoldási lehetőségek: - a képernyő frame-kre osztása - Mozik alkalmazása Flashben - Template-ek alkalmazása (DW-ben) - Program generálja az állandó részeket az egyes oldalakra (PHP, Perl, ASP) <<
Alapelvek 1. Fájl és könyvtárszerkezettel kapcsolatos >> 2. Felbontással kapcsolatos >>
Alapelvek 1. Fájlszerkezettel kapcsolatos: a. a site-hoz hozzunk létre egy munkakönyvtárat, ezen belül helyezzük el az összes site-hoz kapcsolódó fájlt és könyvtárat b. a site-on lévő fájlok és könyvtárak nevében használjuk az angol ábécé kisbetűit, poz. egész számokat és alulvonást ( _ ) ne használjunk: - nagybetűket - hosszú ékezetes betűket - speciális karaktereket (pl.: /?. : ~ *) - <SPACE> -t c. a fájlok közti linkelések esetében használjuk relatív elérési utat <<
Alapelvek 2. Felbontással kapcsolatos: a. Design-tervezés esetén max. 950 px széles layoutot tervezzünk. (Ebben az esetben 1024x768-as felbontásra optimalizáljuk oldalunkat. 1024-30=994, szokás 990-re is optimalizálni.) b. A weboldalakra helyezett táblázatok szélessége szintén max. 950 px legyen. <<
Folyamat (egy lehetséges folyamat) 1. Tervezés (tartalmi és formai tervezés). 2. Látványterv elkészítése számítógépen (layout tervezés, készítés). 3. Weboldal sablon/template előállítása, grafika beépítése a weboldal sablonba/template-be. 4. Az egyes aloldalak létrehozása és beépítése a weboldal sablonba/templatebe) (összeépítés). 5. Médiaelemek, hangulati elemek (képek, hangok, animációk, flash-ek) készítése, beépítése. 6. Tesztelés (minden ág végrehajtása, különb. böngésző, különb. eszköz). 7. Kész weblap szerverre helyezése.
Lehetőségek weboldal készítésére: Weblap készülhet csak egyfajta módszerrel is: a. Teljes weboldal létrehozható HTML-ben b. Teljes weboldal létrehozható Flashben c. Teljes weboldal létrehozható programozva: dinamikus weboldal Az előző módszerek keverten is alkalmazhatók, erre pár példa: a. HTML-be egy-egy programot, egy-egy flasht, egy-egy javascriptet beépíteni b. Oldalak HTML-ben, menüszerkezetet (és keretet) flash-ben c. Oldalak HTML-ben, menüszerkezetet (és keretet) javascriptben d. menüszerkezet HTML-ben, feltöltés dinamikusan e. menüszerkezet dinamikusan, feltöltés HTML-lel
HTML (HiperText Mark-Up Language) HTML leírónyelvvel írjuk le, hogy a weboldal elemei (képek, szöveg, mozgókép, stb.) milyen formában jelenjenek meg a böngészőkben. Nem programozási nyelv. A HTML leírónyelv utasításai <> jelek között írandók. (TAG-ek, párok) Alapvető szerkezet: <html> </html> - dokumentumok kezdete és vége <head> </head> - dokumentumok fejlécének kezdete és vége <body> </body> - dokumentumok törzsének határai (ezek közé írandó az érdemi rész) példa >>
HTML dokumentum szerkezete <html> <head> <title>untitled Document</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> </body> </html>