Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

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

Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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)

<< Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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

pixelgraf. design, állóképek, anim .gif-ek

Adobe Illustrator, Corell Draw, Flash

vektorgraf. design, állóképek

Sound Forge, Cool Edit

hangok, háttérzene

Adobe Premiere

mozgókép, videó

Flash

intró, animáció << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

Eszközök

Filekezelő szoftverek (a website szerkezetének létrehozására) -

Windows Intéző Total Commander (i) Mozilla FileZilla (i)

<< Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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

flash könyvtár

galeria könyvtár

Weboldalhoz szüks. fileok: index.html

készített fotók

Flashez szükséges anyagok:

hozott fotók

adat jellege

kép, hang, mozgókép

formátumok

kép

.gif .jpg .jpe .png

hang

.mp3 .vaw

mozgókép

.avi .mpg

fejlec.gif arckep.jpg buttom1.swf buttom2.swf buttom3.swf buttom4.swf 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) << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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 << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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. << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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. b. c. d. e.

HTML-be egy-egy programot, egy-egy flasht, egy-egy javascriptet beépíteni Oldalak HTML-ben, menüszerkezetet (és keretet) flash-ben Oldalak HTML-ben, menüszerkezetet (és keretet) javascriptben menüszerkezet HTML-ben, feltöltés dinamikusan menüszerkezet dinamikusan, feltöltés HTML-lel Eszterházy Károly Főiskola ─ Médiainformatika Intézet


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: … - dokumentumok kezdete és vége … - dokumentumok fejlécének kezdete és vége … - dokumentumok törzsének határai (ezek közé írandó az érdemi rész) példa >>


HTML dokumentum szerkezete Untitled Document <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


Tartalom. Alapelemek. Célok. Eszközök. Szerkezet. Alapelvek. Prezentáció. Folyamat

Recommend Documents