1 / 24

HTML ( H iper T ext M ark-Up L anguage) HTML leírónyelvvel írjuk le, hogy a weboldal elemei

HTML ( H iper T ext M ark-Up L anguage) 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:

melita
Download Presentation

HTML ( H iper T ext M ark-Up L anguage) HTML leírónyelvvel írjuk le, hogy a weboldal elemei

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> </head> <body> </body> </html> HTML dokumentum szerkezete Eszterházy Károly Főiskola ─ Médiainformatika Intézet

  3. WEBLAPFEJLESZTÉS

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

  5. 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

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

  7. Szerkezet Site szerkezete >> Weboldal szerkezete >> Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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

  9. 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. Template b. Framek c. Programozva • 4. Aloldalak létrehozása é s bekötése a weboldal keretébe (összeépítés) • 5.Hangulati elemek (hangok, animációk, flash-intro)beépítése • ( 6.Statikus és dinamikus elemek összeépítése, intro bekötése ) • 7. Tesztelés • 8. Kész weblapszerverrehelyezése Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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

  11. Lehetőségek weboldal készítésére: • Weblap készülhet csak egyfajta módszerrel is: • Teljes weboldal létrehozható HTML-ben • Teljes weboldal létrehozható Flashben • Teljes weboldal létrehozható dinamikusan generáltan • Az előző módszerek keverten is alkalmazhatók: • 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

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

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

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

  15. Ínyencségek: • A szöveges menüpontok helyett készítsünk rollovereket (balmonogram.htm) • 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, • 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 >> << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

  16. 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 pixelbenmegadott nagyítással. • Bélyegképek létrehozása a már meglévő képekátméretezésévelPhotoShopban.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. << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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

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

  19. Eszközök • Filekezelő szoftverek (a website szerkezetének létrehozására) • Windows Intéző • Total Commander (i) << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

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

  21. Szerkezet flash könyvtár Weboldalhoz szüks. fileok: index.html fejlec.gifarckep.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 << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

  22. Szerkezet Weboldalak szerkezete: Alaproblé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) - Mozik alkalmazása Flashben - Program generálja az állandó részeket az egyes oldalakra (PHP, Perl, ASP) << Eszterházy Károly Főiskola ─ Médiainformatika Intézet

  23. Alapelvek • 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ébenne használjunk • nagybetűt • hosszú ékezetes betűket • speciális karaktereket (pl.: / ? . : ~ * <SPACE> , ) • 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

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

More Related