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: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: 16 2 9f 16 = 9*16+15 = 159 10 1ca 16 = 1*256 + 12*16 + 10 = 458 10
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.jp g
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"> </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)
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.