Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

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,

Hasonló előadás


Az előadások a következő témára: "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,"— Előadás másolata:

1 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 >>

2 Eszterházy Károly Főiskola ─ Médiainformatika Intézet HTML dokumentum szerkezete Untitled Document

3 WEBLAPFEJLESZTÉS

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

5 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Célok Weboldalakkal szemben állított követelmények: Felhasználói szemszögből: - értékes információtartalom, - vonzó, egyszerű, igényes, harmonikus színvilág, felület, - jól olvashatóság, - felhasználóbarát felület, - egyértelmű kezelhetőség, egyértelmű menüpont elnevezések - logikus struktúra Szakmai szemszögből: - más-más felbontásban és böngészőben uu. jelenjenek meg az oldalak, - átlátható könyvtárszerkezet és struktúra - könnyen bővíthető, módosítható

6 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 >>

7 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Eszközök Böngésző programok weboldalakat megjelenítő szoftverek -Internet Explorer -Netscape Navigator -Opera (i) -FireFox Mozzila (i) <<

8 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, Edit Plus, Macromedia HomeSite Karakteres és grafikus weblapfejlesztő programok: MS Front Page, Macromedia Dreamweaver, Adobe Golive Flash (animáció-készítő program, ActionScript) Program Scriptek (Java Script, VB Script) Dinamikus HTML-t megvalósító programnyelvek PHP(i), ASP, Perl (i), Java <<

9 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, A. Image Ready, Gimp(i)pixelgraf. design, állóképek, anim.gif-ek Adobe Illustrator, Corell Draw, Flashvektorgraf. design, állóképek Sound Forge, Cool Edithangok, háttérzene Adobe Premieremozgókép, videó Flashintró, animáció

10 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) <<

11 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Szerkezet Site könyvtárszerkezete >> Weboldal szerkezete (felépítése) >>

12 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Szerkezet adat jellegeformátumok kép.gif.jpg.jpe.png hang.mp3.vaw mozgókép.avi.mpg << Flashez szükséges anyagok: kép, hang, mozgókép készített fotók hozott fotók galeria könyvtár flash könyvtár Weboldalhoz szüks. fileok: index.html 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

13 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Szerkezet Weboldalak szerkezete: Alap problé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 - Template-ek alkalmazása (DW-ben) - Menü egy Flashben (.swf) való elkészítése, és ennek beszúrása a html-be - Program generálja az állandó részeket az egyes oldalakra (PHP, Perl, ASP) <<

14 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Alapelvek 1.Fájlszerkezettel kapcsolatos >> 2.Felbontással kapcsolatos >>

15 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Alapelvek 1.Fájlszerkezettel kapcsolatos: a. a sitehoz hozzunk létre egy munkakönyvtárat, ezen belül helyezzük el az összes site-hoz kapcsolódó fájlt, könyvtárat b. a site-on lévő fájlok nevében ne használjunk nagybetűt hosszú ékezetes betűket speciális karaktereket (pl.: / ?. : ~ *, ) c. a fájlok közti linkelések esetében használjuk relatív elérési utat <<

16 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Alapelvek 2. Felbontással kapcsolatos: a. Design-tervezés esetén max. 770 px széles layoutot tervezzünk. (Flash esetén a böngészőablak méretével arányosan torzul a weboldal képe) b. A weboldalakra helyezett táblázatok szélessége szintén max. 770 px legyen <<

17 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Folyamat 1. Tervezés (tartalmi és formai) 2. Látványterv elkészítése számítógépen (layout tervezés) 3. Weboldal keretének előállítása (M. Dreamweaver MX), grafika beépítése a weboldal keretébe a. Templateb. Framekc. Programozva 4. Aloldalak létrehozása és bekötése a weboldal keretébe (összeépítés) 5. Stílusozás,.css állomány(ok) elkészítése és bekötése 6. Hangulati elemek (hangok, animációk, flash-intro) beépítése (7. Dinamikus részek elk., statikus és dinamikus elemek összeépítése, ha van ) 8. Tesztelés (minden ágon végighaladva, több böngésző, több felbontás) 9. Finomítás, hibák javítása 10. Kész weblap szerverre helyezése

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

19 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ó dinamikusan generáltan Az előző módszerek keverten is alkalmazhatók: 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

20 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Feladat: 1.Hozzunk létre egy munkakönyvtárat (D:\nev) 2.Másoljuk bele az összes képet, amivel dolgozni szeretnénk 3.Nevezzük át a képeket kisbetűsre és írjuk át a magyar hosszú ékezetes betűket 4.Nyissuk meg a Dreamweavert és szerkesszünk egy táblázatba szöveget, képeket. 5.Mentsük el a létrehozott.htm fájlt a munkakönyvtárunkba

21 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Feladat 2 (köv 6 óra): 1.Másoljuk bele az összes kép-, hang-, és video fájt a munkakönyvtárunkba 2.Hozzuk létre az aloldalakat (bemut.htm, kedvenc.htm, fotok.htm) >> 3.Hozzuk létre a keretrendszert (két frames rsz-nél, három db.htm lesz) (balmonogram, jobbmonogram, framesetmonogram) 4.A balmonogram.htm-ben hozzunk létre négy menüpontot (Bemutatkozás, Kedvencek, Fotók, ) és illeszünk a bal felső sarokba egy képet (logót) 5.Az első három menüpontra linkeljük be az aloldalakat 6.Az feliratra linkeljük be az címünket 7.A logóra linkeljük be a kezdőoldalt 8.Ínyencségek >>

22 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Aloldalak: 1.bemut.htm táblázatba készítsük el az önéletrajzunkat, kép is szerepeljen rólunk 2.kedvenc.htm a. nevezzük meg kedvenc weboldalunkat, kedvenc zenénket, és kedvenc videónkat b. linkeljük be ezeket 3.fotok.htm a. mentsünk le az Internetről képeket b. helyezzük őket egymás alá, feliratozzuk őket <<

23 Eszterházy Károly Főiskola ─ Médiainformatika Intézet Ínyencségek: 1.A szöveges menüpontok helyett készítsünk rollovereket (balmonogram.htm) 2.A bemutatkozás (bemut.htm) oldalára helyezzük el egy nyomtató képét, és erre linkeljük rá az önéletrajzunkat.rtf formátumban, 3.A fotók oldalon (fotok.htm) hozzunk létre egy bélyegkép gyűjteményt. Linkeljünk úgy, hogy a böngészőben való megjelenéskor a bélyegképre klikkelve ugyanaz a kép jelenjen meg nagyobb méretben. Két megoldás lehetséges >> <<

24 Eszterházy Károly Főiskola ─ Médiainformatika Intézet 1.Bélyegképek létrehozása a már meglévő képek lekicsinyítésével: százalékosan vagy abszolút pixelben megadva Dreamweaverben. Ugyanarra a képre linkelés a százalékos vagy abszolút pixelben megadott nagyítással. 2.Bélyegképek létrehozása a már meglévő képek átméretezésével PhotoShopban. Ekkor két ugyanazt ábrázoló, ám más méretű képpel dolgozunk. A kicsi képről a nagy képre linkelés. <<


Letölteni ppt "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,"

Hasonló előadás


Google Hirdetések