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

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 jelenjenekmeg 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=iso-8859-2">

</head>

<body>

</body></html>

WEBLAPFEJLESZTÉSWEBLAPFEJLESZTÉS

Célok Eszközök

Alapelemek

Folyamat PrezentációAlapelvek

Tartalom

Szerkezet


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ő programokweboldalakat megjelenítő szoftverek >>

Editorok, webfejlesztőkweboldal szerkesztésére szolgáló szoftverek >>

Design, kép, hang, mozgókép, videó, animáció -készítő, és -vágó szoftverekweboldal alapelemeit előállító szoftverek >>

Filekezelő szoftvereka website szerkezetének létrehozására >>


Szerkezet

Site szerkezete >>

Weboldal szerkezete >>


Alapelvek

1. Fájlszerkezettel kapcsolatos >>

2. Felbontással kapcsolatos >>


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 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-benb. Teljes weboldal létrehozható Flashbenc. 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ítenib. Oldalak HTML-ben, menüszerkezetet (és keretet) flash-benc. Oldalak HTML-ben, menüszerkezetet (és keretet) javascriptbend. menüszerkezet HTML-ben, feltöltés dinamikusane. menüszerkezet dinamikusan, feltöltés HTML-lel


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ázatbaszöveget, képeket.

5. Mentsük el a létrehozott .htm fájlt a munkakönyvtárunkba


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, E-mail)é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 E-mail feliratra linkeljük be az e-mail címünket

7. A logóra linkeljük be a kezdőoldalt

8. Ínyencségek >>


Aloldalak:

1. bemut.htm

táblázatba készítsük el az önéletrajzunkat, kép isszerepeljen 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épeketb. helyezzük őket egymás alá, feliratozzuk őket

<<


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

<<


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 pixelbenmegadott nagyítással.

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

<<


Eszközök

Böngésző programokweboldalakat megjelenítő szoftverek

- Internet Explorer- Netscape Navigator- Opera (i)

<<


Eszközök

Design, kép, hang, mozgókép, videó, animáció -készítő, és -vágó szoftverekweboldal alapelemeit előállító szoftverek

<<

A.Photoshop, A. Image Ready, Gimp(i) 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ó


Eszközök

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

- Windows Intéző- Total Commander (i)

<<


Eszközök

Editorok, webfejlesztőkweboldal 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

<<


Szerkezet

adat jellege formátumok

kép .gif .jpg .jpe .png

hang .mp3 .vaw

mozgókép .avi .mpg

<<

munka könyvtár

Flashez szükséges anyagok:

kép, hang, mozgókép

készítettfotók

hozottfotók

galeria könyvtár flash könyvtárWeboldalhoz szüks. fileok:

index.html

fejlec.gifarckep.jpg

buttom1.swf buttom2.swf buttom3.swf buttom4.swf

kezdo.htmfent.htmbal.htm

jobb.htm

bemut.htmtevekeny.htmgaleria.htm video.htm


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)

<<


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űthosszú ékezetes betűketspeciális karaktereket (pl.: / ? . : ~ * <SPACE> , )

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

<<

Documents

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