Embed Size (px)
Citation preview
Weblapszerkesztés
Weblapok az érettségin
❑ 2. feladat: weblap vagy prezentáció és grafika
❑ 30 pont
❑
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)
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
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>
<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>
<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
Tizenhatos (hexadecimális) szr.
❑ Tízes szr.: 10 számjegy (0..9); helyiértékek: 10 hatványai → egyesek:100; tizesek: 101
❑ Tizenhatos szr: 16 számjegy (0..9,a,b,c,d,e,f); helyiértékek: 16 hatványai → egyesek 161 ;tizenhatosok: 161; kétszázötvenhatosok: 162
❑ 9f16 = 9*16+15 = 15910
❑ 1ca16 = 1*256 + 12*16 + 10 = 45810
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
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!
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.
❑
❑
Képek a weblapon
❑ Támogatott formátumok:❑ JPEG
❑ GIF
❑ PNG
❑ <img src=”file:///g:\kepek\COW.JPG” />
❑ !!!
❑
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.: http://www.berzeviczy.sulinet.hu/fotok/pistike/tatra.jpg
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
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!
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
Táblázatok
❑ <table> </table>
❑ Sorok: <tr> </tr>
❑ Cellák <td> </td>
❑ Tulajdonságok: cellspacing, cellpadding, border, bgcolor, align, width
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
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>
Hivatkozás
❑ <a> </a>
❑ Relatív (helyi)
❑ <a href=”masikweblap.html”>Ugrás másik lapra</a>
❑ Abszolút (távoli)
❑ <a href=”http://www.origo.hu”>Ez egy link</a>
❑ Hivatkozni bármilyen fájlra lehet (pl. kép, videó), meg kell adni a pontos helyét, nevét.
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!!!
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
❑
Felsorolás
❑ <ul> vagy <ol> tag
❑ <ul><li> lista elem 1 </li><li> lista elem 2 </li>
</ul>
Elválasztó vonal
❑ <hr width = "60%" align = "center" size = "4"/>
❑
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
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 8859-2
❑ Windows 1250
❑ Unicode - UTF 8
❑
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.
Stílusok
❑ A tag-ek formázása elavult, már nem használatos❑ Pl.: http://www.w3schools.com/tags/tag_img.asp
❑ 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
Stílusok/CSS
❑ http://kobakbt.hu/jegyzet/CSSref/cssmain.htm
❑ http://www.tferi.hu/html-konyv/css-referencia
❑ http://www.tutorial.hu/cimke/css+referencia/
❑ 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ó
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">
❑ h1 { font-size: 20px; color: #a00000; } → minden h1-re
❑ </style>
❑ 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)
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
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
❑
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
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!
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
❑
Ö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)
Ö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
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
❑
Drupal
❑ 192.168.130.249/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.
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.
❑
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)
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.
Feladat
❑ Keressenek egy ingyenes sminket, ami színében, hangulatában passzol az étteremhez.
❑ Szabjuk testre a sminket!
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)
Feladat
❑ Készítsenek egy egyszerű oldalt is saját magukról, ez a dolgozók menüpont alá fog bekerülni
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
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!
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ő
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.
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.
❑
