Információs technológiák 2. Gy: CSS, JS alapok

Átírás

1 Információs technológiák 2. Gy: CSS, JS alapok 1/69 B ITv: MAN

2 Ismétlés Van egy Web nevű mappánk, ebben vannak az eddig elkészített weboldalak (htm, html) képek (jpg, png). Logikai felépítés Fizikai felépítés 2/69

3 Alap css beállítások Logika: egy css fájlt fogunk készíteni az összes weblaphoz, így kevesebb munkával, gyorsabban érjük el az eredményt Többféle módszerrel is kialakíthatunk css fájlt, az egyik legegyszerűbb az, ha elkészítünk egy alap beállítást, és amelyik oldalon ez nem tetszik, ott az alaptól eltérő beállításokat alkalmazunk 3/69

4 CSS fájl használata Hozzunk létre a Web mappába egy új szöveges fájlt, és nevezzük el bela.css -nek! Web 4/69

5 Az eredeti "ötletadó" html fájl Az index.html alapján alakítsuk ki a css fájl alapbeállításait: 5/69

6 Alap css beállítások A css fájlt be kell töltenünk a html fájlban Ki kell szedni a html fájlból az összes eddigi formázást 6/69

7 A bemutat.htm oldal Adjuk hozzá az oldalhoz a css fájl hivatkozását Szedjük ki az összes eddigi formázást Nézzük meg az eredményt Maradhat, nem rossz :-) 7/69

8 Az eredet.htm oldal Adjuk hozzá az oldalhoz a css fájl hivatkozását Szedjük ki az összes eddigi formázást Nem rossz, de ötlet: legyen a cím sötétkék színű 8/69

9 A hires.htm oldal Adjuk hozzá az oldalhoz a css fájl hivatkozását Szedjük ki az összes eddigi formázást Nézzük meg az oldalt Pocsék, a táblázat összes formázása eltűnt, ezeket be kell szúrni a css fájlba 9/69

10 A hires.htm oldal Nem tetszik: Legyen világosabb a háttérszín A cím legyen bal oldalt, legyen kisebb, és fekete színű 10/69 A táblázat első sora legyen eltérő háttérszínű

11 Világosabb háttérszín Ha a css fájlban átírjuk világosabbra a háttérszínt, akkor minden weboldalon világosabb lesz rossz megoldás Jó megoldás: be kell vezetni egy egyedi azonosítót, ami megkülönbözteti a két weboldalon a body területeket! html azonosító: class=b2 css azonosító:.b2 11/69

12 A cím beállítása (balra, kisebb, fekete) A cím pillanatnyilag <h2>-es, emiatt nagy, kék, és emiatt van középen Ha átírjuk <h3>-ra, kisebb lesz, balra igazítódik, de kék marad A fekete szín beállításához be kell vezetnünk egy egyedi azonosítót (nevezzük mondjuk dh-nak) 12/69

13 Táblázat első sorának színe Szintén be kell vezetni egy egyedi azonosítót, de most használjunk id-t (legyen a neve tr1)! class: egy dokumentumban több helyen is használható id: a dokumentumban csak egyszer használható, abszolút egyedi azonosító 13/69

14 A hires.htm oldal Végre megfelelő a dokumentum :-) 14/69

15 A teljes bela.css fájl 15/69

16 Új fejezet következik 16/69

17 Mire jó a css? Példa_1 Készítünk egy webhelyet, mely sok-sok hasonló stílusú weboldalból áll. Megunjuk az oldalunk kinézetét, és szeretnénk új dizájnt Ha a html kódban vannak a formázások, akkor minden egyes oldalt át kell alakítanunk, ez eléggé munkaigényes feladat. Ha egyetlen külső css fájlt használtunk minden oldal dizájnjához, akkor csak egyetlen helyen, a css fájlban kell változtatnunk, és az kihat minden oldal külalakjára 17/69

18 Mire jó a css? Példa_2 A css segítségével megoldható az is, hogy a megjelenítő eszköz képernyő méretének megfelelő dizájnt alakítsunk ki: Ha szélesebb a képernyő, lehetnek nagyobbak a képek, nagyobb a szövegek betűmérete Ha kisebb a képernyő, lehetnek kisebbek a képek, kisebb a szövegek betűmérete 18/69

19 @media max-width: min-width: 1001px 19/69

20 20/69

21 21/69

22 Mire jó a css? Példa_3 Van egy weboldalunk, amit saját stílusunknak, korosztályunknak, aktuális hangulatunknak megfelelően akarunk használni. Elkészítjük a html kódot, amiben csak az oldal szövegei kapnak helyet (természetesen minden szövegrészhez tartozik egy-egy egyedi azonosító) Készítünk néhány stílus variációt Az oldalakon elhelyezzük az egyes stílusok váltására alkalmas nyomógombokat 22/69

23 23/69

24 24/69

25 25/69

26 26/69

27 Mire jó a css? Példa_3 A váltást JavaScript kód biztosítja (erre jó a JavaScript): 27/69

28 28/69

29 29/69

30 Nem tudhatunk mindent! Ha megakadunk, kérjünk segítséget a Google-tól Pl. szeretnénk egy táblázatban belső margókat (padding) megadni css-el: Bátran használjuk az elsőként megjelenített w3schools-on lévő találatokat! 30/69

31 Új fejezet következik 31/69

32 Interaktív weblap egy kis programozás A JavaScript (JS) egy egyszerű programozási nyelv, melyet elterjedten használnak weboldalakon Első példa: írjuk ki az aktuális dátumot a weblapunkon Általában: Kód a head részben Kód hívása a body-ban 32/69

33 Interaktív weblap egy kis programozás Többnyire függvényeket írunk, és azokat hívjuk meg Aktuális időpont lekérdezése, abból a szükséges alkatrészek kinyerése Szöveges adat összefűzése Adatkiírás oda, ahol meghívjuk a függvényt! 33/69 Függvényhívás

34 A szintaktika tovább egyszerűsíthető! 34/69

35 Interaktív weblap egy kis programozás Második példa: írjuk ki az aktuális időpontot a weblapunkon 35/69

36 JS és a való élet Általában a JavaScript kódok nem a html dokumentumban vannak, hanem egy külső.js fájlban Ha több oldalon is használunk JS-t, akkor egy fájlba kerülnek a JS kódok, minden oldalon betöltjük a fájlt, és azt a funkcióját használjuk, ami szükséges Nézzük, hogyan kell egy külső JS fájlt használni! 36/69

37 Aktuális időpont, külső JS fájl használatával 37/69

38 Lustább (profibb) programozók kódja: 38/69

39 Új fejezet következik 39/69

40 Köszöntés Ötlet: Köszöntsük a látogatót a napszaknak megfelelően: Jó Reggelt!, Jó Napot!, Jóccakát! Oldjuk meg úgy a kódot, ahogy a profik gondolkodnak: kell egy függvény, ami visszaadja az óra értékét kell egy függvény, ami az órából meghatározza a köszönést kell egy függvény, ami ki tudja írni az adatot 40/69

41 A kód 41/69

42 Új fejezet következik 42/69

43 Űrlap adatbevitel, adatkiírás Készítsünk egy űrlapot, mely alkalmas egy másodfokú egyenlet megoldására 43/69

44 Egycellás táblázat a képernyő közepén Űrlap, neve: lap 44/69

45 45/69

46 Adatbevitel ellenőrzés Ha üres a mező Ha nem szám van a mezőben Figyelmeztetés 46/69

47 Text mező letiltása 47/69

48 Új fejezet következik 48/69

49 Menü gomb Készítsünk egy menü gombot, extrákkal: Ha fölé toljuk az egeret, legyen más színű a gomb Ha elhúzzuk az egeret, változzon vissza Ha rákattintunk, jelenjen meg az aloldal.htm dokumentum Ehhez készítsünk két gombot, más-más színösszeállítással, és mentsük le őket képként! button1.png button2.png 49/69

50 50/69

51 51/69

52 52/69

53 Új fejezet következik 53/69

54 Dereng már, mire jó a JavaScript? Ha nem, kapcsoljuk föl a lámpát! Készítsünk egy weboldalt: Legyen rajta egy égő, két nyomógomb: Felkapcsolás Lekapcsolás Működjön! 54/69

55 Felkapcsolás, lekapcsolás 55/69 ego_nemeg.gif ego_eg.gif

56 Néhány formázható tulajdonság div.style.backgroundcolor="#00f"; div.style.width="200px"; div.style.color="#fff"; div.style.height="100px"; div.style.marginleft="50px"; div.style.paddingtop="50px"; div.style.fontfamily="verdana"; div.style.fontsize="2em"; div.style.border="3px dashed #ff0"; div.style.position="absolute"; div.style.left="200px"; div.style.top="100px"; div.style.textdecoration="underline"; div.style.backgroundimage = "url('ujkep.jpg')"; div.style.backgroundrepeat = "no-repeat"; 56/69

57 Felkapcsolás, lekapcsolás deluxe Ha lekapcsoljuk a lámpát, legyen a háttér fekete, a szövegek fehérek. Lehessen kisebb méretűre venni a lámpát (és persze vissza, eredeti méretűre is!) 57/69

58 Felkapcsolás, lekapcsolás deluxe 58/69

59 59/69

60 Új fejezet következik 60/69

61 Függvényérték kiíratás Írassuk ki egy függvény értékkészletét egy beolvasott kezdő- és végérték között, beolvasott lépésközzel! 61/69

62 Függvényérték kiíratás 62/69

63 63/69

64 Függvényérték kiíratás + ExtraTuning 64/69

65 A html fájl 65/69

66 A js fájl 66/69

67 A css fájl 67/69

68 68/69

69 VÉGE VÉGE 69/69