-header 1 → 1. szintű címsor: előre megformázott típus

❑

-ez kerül a böngésző címsorába

❑

Felsorolás ❑

vagy
tag

❑


• lista elem 1
• lista elem 2


Elválasztó vonal ❑ ❑



---



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) → 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:

→ ez csak erre a bekezdésre érvényes

❑

Formázás stílus osztállyal: → a sajat_stilus több elemre is alkalmazható

Stílus megadása ❑

1: közvetlenül ❑

❑

2: <style> taggel (általában a részben): ❑ ❑ ❑

❑



→ csak erre <style type="text/css"> h1 { font-size: 20px; color: #a00000; } → minden h1-re

3: Külső fájl (stílus-lap): ❑



❑

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.

❑