Download
1 / 24
240 likes | 370 Vues
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:
E N D
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
<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
Tartalom Alapelemek Célok Eszközök Szerkezet Alapelvek Prezentáció Folyamat
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 >> Eszterházy Károly Főiskola ─ Médiainformatika Intézet
Szerkezet Site szerkezete >> Weboldal szerkezete >> Eszterházy Károly Főiskola ─ Médiainformatika Intézet
Alapelvek • Fájlszerkezettel kapcsolatos >> • Felbontással kapcsolatos >> 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. 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
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
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
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
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
Í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
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
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
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
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
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
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
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
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
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
