Weblapok az érettségin. 2. feladat: weblap vagy prezentáció és grafika 30 pont

Átírás

1 Weblapszerkesztés

2 Weblapok az érettségin 2. feladat: weblap vagy prezentáció és grafika 30 pont

3 Weblapszerkesztők MS Front Page MS Share Point Designer Macromedia Dreamwaver Mozilla Composer / NVU / Kompozer / Sea Monkey azonos alapokon Stb., de ma már inkább a tartalom-kezelő rendszereket használják (CMS, WCMS)

4 Weblap Szöveges (Hypertext link) dokumentum Egy leírónyelv segítségével készíthetünk weblapot: HTML SGML szabványú XHTML XML szabványú A leírónyelv is szöveges utasításokból áll Egy egyszerű editorral is lehet weblapot készíteni

5 HTML (XHTML) HyperText Markup Language Ún. tag-ekből épül fel pl.: <div>. </div> HTML Weblap felépítése: <html> <head> </head> <body> </body> </html>

6 <head> szakasz Nem jelenik meg a weblapon Beállítások, definíciók, script-ek (programok) Pl.: nyelvi kódolás, szerző, keresőszavak, stb <meta charset= utf-8 /> <title>weblap címe</title>

7 <body> tulajdonságai Háttérszín: <body bgcolor=színkód> Színkód: hexadecimális szám RGB, pl.:#8800aa R(piros): 88H; G:00H; B:aaH 00-ff (0-255-ig) lehet egy-egy összetevő kódja Szövegszín: text=színkód Linkek: link, alink, vlink Háttérkép: background=kép url

8 Tizenhatos (hexadecimális) szr. Tízes szr.: 10 számjegy (0..9); helyiértékek: 10 hatványai egyesek:10 0 ; tizesek: 10 1 Tizenhatos szr: 16 számjegy (0..9,a,b,c,d,e,f); helyiértékek: 16 hatványai egyesek 16 1 ;tizenhatosok: 16 1 ; kétszázötvenhatosok: f 16 = 9*16+15 = ca 16 = 1* * =

9 Szöveg formázása <p> </p> -bekezdés szöv. szerk: Enter Igazítás: <p align= left > <br/> -új sor szöv. szerk: Shift Enter <font> </font> -betűk formázása < font size= 5 color= red > -méret, szín <b></b> -bold; <i></i> -italic; <u></u> -underline

10 Feladat Egy új, üres weblap 2 bekezdéssel Az egyik középre (center), a másik jobbra (right) Mindkét bekezdésbe 2-2 sor szöveg A szöveg legyen halványsárga, a háttér sötétbarna, a bekezdések első betűje kékeszöld A második bekezdés nagyobb méretű betűkkel íródjon!

11 Eltérés a szövegszerkesztőkhöz képest Betűtípus / méret korlátozottan állítható: nem részei a weblapnak, akkor jelenik meg helyesen, ha azon a gépen is megtalálható, amelyiken nézik Szinte minden gépen van: Times vagy roman, Arial vagy Sans, Courier, stb. betűcsaládok Hasonlóan kell eljárni: útvonalak (pl.: C:\képek); beillesztett objektumok; méretezések, stb.

12 Képek a weblapon Támogatott formátumok: JPEG GIF PNG <img src= file:///g:\kepek\cow.jpg />!!!

13 URL Egységes forrásmeghatározás: egységes leírása annak, mi hol található a Neten. Felépítése: Protokoll://szerver/mappa/almappa/.../fájl.kit#könyvje lző Pl.: g

14 Képek a weblapon Képet odamásolni, ahol a weblap van!!! (vagy almappába) <img src= URL /> (vagy src= almappa/cow.jpg /> <img> -nek nincs záró tag-je, ezért />-rel zárjuk: <img src= URL /> align= left/right kép igazítása. Ha ezeket használjuk, a kép utáni tartalom (szöveg) körbefollya a képet. border="5" szegély 5 pixel

15 Képek igazítása align tulajdonságnak speciális szerepe van Készíthetünk egy bekezdést, amit jobbra zárunk, és abba rakjuk a képet: <p align = rigth ><img src... Ez nem azonos az <img alignt = right src... Az utóbbi esetben a képet a szöveg körbefutja! Csak a left és a right igazítás esetén futja körbe a szöveg!

16 Kép mérete width= 100px 100 pixel széles height= 50px 50 px. magas Képet kicsinyíteni nem szerencsés, nagyítani nem érdemes! méretet nem szokás változtatni (pontosabban nem így grafikai program, átméretezés) Eredeti méretet szokás beírni miért??? alt= szöveg alternatív szöveg, ha kép nem töltődne le (vagy egérrel fölé állunk) ez +jelenik

17 Táblázatok <table> </table> Sorok: <tr> </tr> Cellák <td> </td> Tulajdonságok: cellspacing, cellpadding, border, bgcolor, align, width

18 Hivatkozás Minden esetben fájlra vagy stream-re történik Stream: adatfolyam (pl. online tv, video) Lehet szolgáltatásra is hivatkozást tenni, pl.: levélküldés

19 Hivatkozás, az <a> (anchor) tag <a href= URL > </a> Ha az URL nem tartalmaz protokollt a böngésző a weblap helyén keresi Helyi hivatkozásnál az összes fájnak egy szerveren kell lennie érettségin az összes lapnak egy mappában kell lennie (a képekkel is). Pl.: <a href= kepek/tatra.jpg > Tátra </a> <a name= könyvjelző_neve > </a>

20 Hivatkozás <a> </a> Relatív (helyi) <a href= masikweblap.html >Ugrás másik lapra</a> Abszolút (távoli) <a href= >Ez egy link</a> Hivatkozni bármilyen fájlra lehet (pl. kép, videó), meg kell adni a pontos helyét, nevét.

21 Hivatkozás fájlra <a href="file:///h:\tanar.html">... Fájlra így NE hivatkozzunk!!!!! A böngésző a H: lemezen fogja keresni, csak a saját gépünkön működik!!!

22 Feladat 2006 októberi érettségi Energiaforrás <h1> -header 1 1. szintű címsor: előre megformázott típus <title> Metanol a jövő energiája </title> -ez kerül a böngésző címsorába

23 Felsorolás <ul> vagy <ol> tag <ul> <li> lista elem 1 </li> <li> lista elem 2 </li> </ul>

24 Elválasztó vonal <hr width = "60%" align = "center" size = "4"/>

25 Kompozer WYSIWYG típusú szerkesztő Formázás menü és egér segítségével HTML kód is szerkeszthető CSS (stíluslapok) támogatása

26 Oldal tulajdonságai Színek (lap, szöveg, linkek) <body> tag Háttér Oldal címe Nyelv / kódolás Nézet / karakterkódolás: ISO Windows 1250 Unicode - UTF 8

27 Stílusok A html szabvány elég kevés formázást enged, és az is tag-enkén eltérő. Bevezettek egy egységes formázást, ezek a stílusok Előnyök: minden tag-et ugyanolyan módon formázhatunk. a formázást alkalmazhatjuk egy csoportra is (pl az összes H1, vagy néhány cella. A formázást felhasználhatjuk más oldalakon is.

28 Stílusok A tag-ek formázása elavult, már nem használatos Pl.: E helyett stílusokat használnak Előnyei: Egységes: minden tag-nél ugyanúgy használhatjuk Többször felhasználható Cserélhető, akár böngészés közben

29 Stílusok/CSS Formázás stílussal: <p style=... > ez csak erre a bekezdésre érvényes Formázás stílus osztállyal: <p class= sajat_stilus > a sajat_stilus több elemre is alkalmazható

30 Stílus megadása 1: közvetlenül <h1 style="font-size: 20px; color: #a00000;"> csak erre 2: <style> taggel (általában a <head> részben): <style type="text/css"> </style> h1 { font-size: 20px; color: #a00000; } minden h1-re 3: Külső fájl (stílus-lap): <link rel="stylesheet" href="kulso.css" type="text/css"> Ilyenkor ez a fálj tartalmazza a stílus leírását (szöveges)

31 Stílusok A weblaphoz tatozhatnak: Belső stíluslapok Külső stíluslapok Kompozer CSS szerkesztő: belső stíluslapok Adott tag-hez tartozó stílus létrehozása minden adott tag-re érvényes (előző dia 1. pont) Stílusosztály: formázási szabályok megadása, arra érvényes, amire alkalmazzuk. Ugyanazt használhatjuk több tag-re is, pl.: zöld szegély bekezdésre és képekre

32 Stílusosztály Vannak műveletek, melyet a Kompozerben csak stílussal lehet megvalósítani: pl. táblázat háttérkép, kép szegélyének színe, stb. Általában stílusosztályt érdemes létrehozni

33 Stílusosztály használata Alkalmazás: Eszköztár: osztály alkalmazása... Kódba beírni: <... class= osztálynév > Haladó szerkesztés: class értékét beállítani

34 Feladat Készítsenek egy új stílusosztályt sarga_szegely néven, és alkalmazzák egy képre, illetve a táblázat egyik cellájára (a stílus sárga színű szegélyt állítson be) Egy meret nevű stílusostályt, ami 300px szélességet és 10 px méretű margókat állít be! Alkalmazzák egy képre és egy táblázatra! A képnek és a táblázatnak nem lehet beállítva a megadott tulajdonsága, mert egyébként az lesz érvényben!

35 Külső stílusok Külső stíluslapok A stílusokat egy külső CSS fájlban definiáljuk. Előnye: a külső fájlt több weblap is használhatja elég egyszer beállítani a formázásokat Kompozer CSS szerkesztő: külső stíluslapok: Stíluslap exportálása... Alkalmazás: CSS szerkesztő/hivatkozás/tallózás és stíluslap létrehozása

36 Összefoglalás Alapvető formázások: Weblap háttere, színek, címsor (title) Felsorolás, számozás Szöveg tördelése Betűk színe, mérete, stílusa Táblázat: Méret (pixel vagy %), háttér (kép!), szegély (szín!) Cellák formázása (szélesség, margók, távolság)

37 Összefoglalás Kép: Kép helye! (Méret), körbefuttatás, elhelyezés Hivatkozás: Külső, helyi, (könyvjelzők) Hivatkozás állapotai, színek Stílusok (CSS) 5-ösért

38 Tartalomkezelő rendszerek (content management system, CMS) Ingyenes v. fizetős WCMS webfejlesztő eszközök Joomla, Drupal mindkettő ingyenes (GPL) Szerver oldalon fut, saját gépre telepíteni nem kell Szükséges hozzá általában adatbázis támogatás és szerver oldali (PHP,.Net, ASP) támogatás

39 Drupal /drupal Felhasználók szerepkör Szerepkör: meghatározza, ki mit csinál(hat) (tartalomkezelő, admin, stb.) jogok Szerepköröket és a hozzá tartozó jogokat az adminisztrátor (admin) osztja ki.

40 Tartalomtípusok Cikk, Hír: aktuális események elavuló tartalmak Egyszerű oldal: állandó tartalom Esemény: jövőbeni esemény, naptárbejegyzés Képgalériák Naptárbejegyzés Stb.

41 Feladat Jelentkezzenek be a weboldalra és készítsenek egy új cikket/hír (az étterem egy rendezvényt szervez, ehhez kell a weboldalon cikket/hírt létrehozni)

42 Drupal Kinézet sminkek Sminkek blokkokat tartalmaznak menü blokk, tartalom blokk, fejléc, lábléc A blokkok helyzetét, színét, darabszámát, stb. a smink határozza meg, változtatni ezen nem egyszerű Azt, hogy a blokkokba milyen tartalom kerüljön mi dönthetjük el.

43 Feladat Keressenek egy ingyenes sminket, ami színében, hangulatában passzol az étteremhez. Szabjuk testre a sminket!

44 Tartalmak Beépített: egyszerű oldal, cikk, hír, stb. Lehet saját típust is készíteni, ami azért előnyös, mert: testre szabhatjuk a megjelenést készíthetünk nézeteket (szűrhetünk típus szerint) egyedi mezőket adhatunk hozzá (képgaléria, felsorolás)

45 Feladat Készítsenek egy egyszerű oldalt is saját magukról, ez a dolgozók menüpont alá fog bekerülni

46 Tartalomtípusok A tartalmakat mindig valamilyen típusúnak definiáljuk. Mezőket adhatunk hozzá (szöveg, kép, lista, stb.) A mezők megjelenését szabályozhatjuk (pl. a kép galériában jelenik meg, adott mérettel) A sorrend is fontos: melyik mező legyen előrébb súly (a súly minél kisebb, annál feljebb kerül a mező) Meghatározhatjuk, melyik menüben jelenjen meg

47 Feladat Hozzunk létre új tartalomtípust: vendéglős napi ajánlat vagy heti menü (egyénileg választott nap vagy hét) turizmus körutazások vagy nyaralások (egyénileg választott ország!) Készítsenek egy új tartalmat is ezzel a típussal!

48 Nézetek (views) Megadott tulajdonsággal rendelkező tartalmak kigyűjtésére való Tulajdonság lehet: tartalomtípus, tartalom, forma, stb. Elrendezés is állítható (táblázat, felsorolás, lista, stb.) rendezés is lehetséges Blokkot is lehet belőle készíteni Menübe is felvehető

49 Blokkok Blokkokat helyezhetünk el a weblap tetején, alján, jobb és bal oldalt A blokkok darabszámát, jellegét, helyét a sminkek határozzák meg A tartalom a blokkokba kerül Speciális blokkok: 1-3 sidebar (oldalsáv), tartalom blokk, fej (header), láb (footer), súgó, kiemelt, stb.

50 Menük Több menü is létezhet, de általában csak a főmenüt használják Menük szerkesztése hogyan jelenjen meg, melyik milyen pontokat tartalmazzon, stb.