Adobe Dreamweaver CS4

címkék körvonalát. Dokumentum ablak Az aktuális dokumentumot jeleníti meg szerkesztés közben. Ha a Designer munka-terület elrendezést használjuk, akkor a dokumentumablak osztott nézetben jelenik meg, az ablak felső részén mutatva a kódot, az alsó részén pedig a megjelenést. Status bar (állapotsáv): a dokumentum ablak alján a Tulajdonságfigyelő fölött helyezkedik el. Az állapotsáv bal oldalán találhatjuk a címke választót, amely az oldal egy kijelölt eleméhez tartozó HTML-címkéket és CSS-szabályokat mutatja. Properties (Tulajdonságfigyelő): lehetővé teszi, hogy láthassuk és módosíthassuk a kiválasztott szöveg vagy objektum számos tulajdonságát.

A dokkolópanelek A dokkolópanelek a munkaterület jobb oldalán jelennek meg, ha valamelyik tervezői elrendezés van kiválasztva. (6. ábra)

6. ábra A dokkolópanelek a Dreamweaver sok fontos szolgáltatását tartalmazzák, így az Insert panelt, a Files panelt, amely a webhely összes fájlját és mappáját jeleníti meg, valamint a CSS Styles panelt, amely az összes, a dokumentumban rendelkezésre álló kaszkád stíluslapot sorolja fel. (7. ábra)

7. ábra

Nézzük meg részletesen az Insert panel részeit. Az Insert (Beszúró) panel. (8. ábra)

8. ábra Az Insert panelen hét alkategória található. A név jobb oldalán levő nyílra kattintva egy legördülő menüt kapunk, amely az egyes alkategóriákat tartalmazza. Ezek a következőek: (9. ábra)

9. ábra

Common Insert panel: A leggyakoribb funkciókhoz tartozó ikonokat jeleníti meg. Layout Insert panel: Az oldalelrendezések beállításához alapvető div, table (táblázat) és frame (keret) funkciókat jeleníti meg. Forms Inert panel: A leggyakoribb űrlapelemeket rádiógombok és dobozok - jeleníti meg. Date Insert panel: Adatbázisból kinyert tartalommal működő dinamikus weboldalak szerkesztéséhez szükséges funkciókat jeleníti meg. Spry Inert panel: Widgetek (összetett grafikus elemek) gyűjteményét szolgáltatja, amelyek a HTML, CSS és JavaScript kombinációjával interaktív elemeket alkotnak. Ilyenek például a legördülő menük és az összecsukható panelek. InContext Editing Insert panel: Olyan funkciókat jelenít meg, amelyekkel kényelmesen hozhatunk létre ismétlődő és szerkeszthető régiókat, valamint szerkeszthetjük vele a CSS osztályokat, miközben a dinamikus tartalmakkal dolgozunk. Text Insert panel: Gyakran használt formázó funkciókat jelenít meg. Favorites Insert panel: Lehetővé teszi, hogy jobbkattintással ikonokat vegyünk fel ide más Insert sávokról, létrehozva így a saját kedvenc szolgáltatásaink gyűjteményét. A legördülő menü végén két beállítás található, amelyekkel az Inert panel listáinak megjelenítését szabályozhatjuk. A Color Icons beállítás visszaállítja a színes ikonokat. A Hide Labels/Show Labels beállítással adhatjuk meg, hogy az Insert panel szolgáltatásainak nevei megjelenjenek az egyes ikonok mellet (Show Labels) vagy ne (Hide Labels).

Lecke Webhely definiálása Miután megnéztük, miből tevődik össze a Dreamweaver CS4 munka-területe, kezdjük a webhely-létrehozás alapjainak lerakásával. Ez ugyanúgy működik, mint egy ház építése: mindenekelőtt a terveket kell elkészíteni, vagyis világos elképzelésünknek kell lenni arról, hogy a terv hogyan szerveződik és épül fel. A terv elkészítéséhez papírt és tollat használunk és a kezdőlappal indítunk, ami nem más, mint az index.htm. A tervezés végére pedig a más oldalakhoz kapcsolódó hivatkozások is a rendelkezésünkre fognak állni. A tervünk, amely egész munkánkat végigkíséri majd, egy olyan képzeletbeli vállalat terve lesz, amely számítástechnikai alkatrészekkel foglalkozik és a világhálón keresztül szeretne bemutatkozni. Elsőként a webhelyet kell definiálnunk úgy, hogy a Dreamweaver azt a legjobban tudja kezelni az egyes oldalak létrehozásától kezdve a közzétételig és a Web szerverrel való egyeztetésig. Először is menjünk a Site (Webhely) menüpontba, ahol is a legördülő menü segítségével a webhely beállítását végezhetjük el. (10. ábra)

Az ablakban találjuk a munkánkhoz szükséges különböző terv címeket. Például: egy honlap programozónak, aki több vállalat számára is készít weboldalakat, lehetősége van arra, hogy kiválassza, éppen melyik tervén akar dolgozni.)

10. ábra A megjelenő menüben eldönthetjük, hogy új Webhelyet hozunk létre, vagy pedig egy meglévőt választunk ki, hogy azon esetleg változtatásokat végezzünk el. Mi kattintsunk az New Site...(Új Webhely...) menüre. Ezt követően egy újabb ablak nyílik meg (Site Definition Webhely varázsló), amely segítségével a webhelyre vonatkozó összes információt beállíthatjuk (11. ábra).

11. ábra

Itt olyan információkat adhatunk meg, mint helyi és más jellegű beállítások, melyek az elérésre2 utalnak. Először is adjunk nevet webhelyünknek: legyen „INFOSYSTEM POINT". Ezt követően meg kell határoznunk, hogy szeretnénk-e kiszolgáló oldali megoldásokat használni a webhelyen: itt válasszuk a: No, I do not....-t (12. ábra)

12. ábra Ezt követően meg kell jelölnünk, melyik mappa fogja a web-helyt alkotó file-okat tartalmazni. Ezeket a következő helyen tárolhatjuk:  az adott gépen • egy kiszolgálón. Válasszuk az adott gépet (Edit local copies on my machine... ) lehetőséget. Ha a mappa még nem létezik, most lehetőségünk van létrehozni azt. 1 2

A PC-n lévő weboldal tervezete

Minden olyan beállítás, amit akkor kell megadnunk, amikor munkánk kész lesz és köz-

zétesszük. (E beállításokat a következő részekben tárgyaljuk.)

Azt javasoljuk, hozzunk létre új mappát és adjuk neki „Az én webhelyem" elnevezést. További javaslatunk, hogy hozzunk létre két almappát is és az egyiket nevezzük el „Képek"-nek, a másikat pedig „Hangok"-nak, hogy a képeket és hangokat majd két, egymástól jól elkülönülő helyre menthessük és ezáltal rendet tarthassunk munkánkban. A következő ablakban a fájlok megosztásáról kell nyilatkoznunk. Egyenlőre válasszuk a listából a None (Nincs) lehetőséget és kattintsunk a Next gombra. Az utolsó lapon a varázsló összefoglalja nekünk a megadott beállításokat. Ezeken a beállításokon később a Site>Manage Sites menüpont választásával változtathatunk. Végezetül kattintsunk az DONE gombra. (13. ábra)

13. ábra

Képernyők jobb oldali részén a Táblacsoport Files táblájában fog megjelenni a Site (Webhely) tábla, amelyen belül a mi új „INFOSYSTEM POINT" tervünk is látható lesz. Ez az eljárás azért is olyan fontos, mert gyakorlatilag itt tartjuk kézben webhelyünk teljes helyzetét. (14. ábra)

14. ábra A Site táblán választhatjuk ki azt a webhelyet, amellyel dolgozni szeretnénk. Lehetőségünk van új webhely létrehozására is. Még mindig a Site táblában az utolsó gombra: Expand to show local and remote sites kattintva lehetőségünk van a megjelenítés kiterjesztésére. Ezután egy olyan ablak jelenik meg, amely lehetővé teszi számunkra, hogy a fájlokat jobb oldalon, a Local Files-ban, bal oldalon pedig az Remote Site-ben jelenítsük meg (15. ábra) (Az eredeti munkaterületre ugyanezzel a gombbal tudunk majd visszatérni)

15. ábra A Local Files részben csak a már létrehozott mappák szerepelnek, vagyis a „Hangok" és a „Képek". Az első létrehozandó fájl, ami honlapunk első oldala lesz, az „Index.htm" oldal lesz. Ezt úgy hozzuk létre, hogy a File menü Új menüpontjára kattintunk és az új fájlnak az „index.htm" elnevezést adjuk. Gyakorlatilag innen már el is kezdhetjük a honlapunk készítését. (16. ábra)

16. ábra

Lecke Egy webhely hozzáférhetősége Számos nyelv és eszköz járult az Internet fejlődéséhez annak születésétől kezdve a mai napig, melyek segítségével az egyszerűbb, kizárólag szöveges oldalaktól eljutottunk az animációval, modulokkal és speciális effektekkel teli honlapokig. Ebben a versenyben a cél az, hogy honlapunk minél szebb és vonzóbb legyen. Ez mindenféleképpen pozitív jelenség, mert a vonzó környezet egyre több embert ösztökél ezen új technológiák alkalmazására. Egy webhely megtervezésekor szem előtt kell tartanunk egy nagyon fontos szempontot, ami az Internet egyik alapvető etikai elve: Hozzáférhetőség bárki számára minden hálózati erőforráson. Néhány felhasználó számára áthághatatlan akadályt jelenthetnének az animációk, villódzó feliratok, stb, amelyek gátolhatnák őket a weboldal megjelenítésében. Éppen ezért, e probléma kiküszöbölésének érdekében a legnagyobb számítástechnikai vállalatok és kutatóintézetek konzorciuma (W3C) egy sor olyan irányelvet fogalmazott meg, amelyek

meghatározzák, hogyan kell weboldalt létrehozni úgy, hogy az mindenki számára hozzáférhető legyen. (WAI Irányelvek) A WAI irányelvek három fajta hozzáférhetőséget határoznak meg, mely irányelveket egyre szigorodó normák jellemeznek a webhelyek technikai jellemzőit illetően. „Egy hozzáférhető webhely megtervezése nem kerül semmivel sem többe, mint egy, a W3C által kiadott WAI normákban leírt hozzáférhetőségi kritériumok nélkül megtervezett site fejlesztéséhez szükséges összeg. Ezenkívül, ha tiszteletben tartjuk a hozzáférhetőség kritériumait és stíluslapokat használunk, elkülönítve a tartalomtól a grafikát, a weboldal jövőbeli esetleges restyling-ja még kevesebbe is kerül majd." A fenti idézet a Nuziante Esposito-val készült interjúból származik (ő a Vakok Olaszországi Egyesületének Internetes Oldalakat Vizsgáló Bizottságának tagja). Hozzáférhető webhelyen olyan webhelyet értünk, amelyet a felhasználó bármilyen számítógépen meg tud jeleníteni, az összeköttetés gyorsaságától, a használt browser-től, és a felhasználói felülettől (Braille-billentyűzet, speciális botkormány) függetlenül, és amelyben az információt tartalmazó szöveg és a prezentáció mindig elkülönül egymástól.

Mielőtt megnéznénk, hogy hogyan tehetünk 3 Dreamweaverrel egy weblapot hozzáférhetővé , nézzük meg, az egyes fogyatékosságok típusait és jellemzőit. Különböző típusú és szintű fogyatékosságok léteznek, viszont mindegyik esetében a rendszerek testreszabására van szükség és lehet, hogy egy előre nem tervezett konfigurációra lesz majd szükség. Ami a látás fogyatékosságát illeti, két kategóriát különböztetünk meg: a vakokét és a gyengén látókét. A két kategória különböző bánásmódot igényel: a gyengénlátók még ha speciális beállításokkal is, de a monitort használják az információ kimeneti berendezéseként, (csak például nagyobb betűket alkalmaznak, vagy egyenesen olyan szoftvert használnak, ami felnagyítja a képernyőn megjelenő információkat). 3

2004. január 4-i törvény 4. pont

1. A Köztársaság elismeri és védelmezi minden ember minden információforráshoz való jutás és az ehhez kapcsolódó szolgáltatásokhoz való jutás jogát, ideértve a telematikai és informatikai eszközökkel megjelenítetteket is. 2. Az Állam biztosítja és garantálja a fogyatékkal élő emberek számára a közigazgatás telematikai és informatikai szolgáltatásaihoz való hozzáférés, valamint a közhasznú intézmények szolgáltatásaihoz való hozzáférés jogát az Alkotmány 3. cikkely egyenlőségi elvének értelmében. Jelen törvény célja alatt értendő: "hozzáférhetőség": informatikai rendszerek azon képessége, amely a technológiai ismeretek által elfogadott formában és kereteken belül szolgáltatásokat nyújt és érthető információkat szolgáltat diszkrimináció nélkül azok részéről is, akik fogyatékosságuk miatt kisegítő technológiákat vagy különleges konfigurációkat igényelnek. Az Állam mindig előnyben részesíti azokat a webhelyeket, amelyek betartják a hozzáférhetőségi elv kritériumait azokkal szemben, amelyek azokat nem tartják be, egyenesen kijelentve azt, hogy nincs kompatibilitás azon wehelyek között, amelyek nem tartják tiszteletben ezeket a szabályokat és a pubblikus szektort.

Ami viszont a vakokat illeti, nekik a monitoroktól eltérően audio eszközökön alapuló output berendezésekre van szükségük, úgymint vokális szintetizátor, vagy egy tapintáson alapuló kimenet, mint a Braille kijelző. Vannak ún. screen reader szoftverek is, amelyek soronként olvassák azt, amit a normális felhasználó tekintetével egybe fog össze. Természetesen ahhoz, hogy ezen szoftverek használatát lehetővé tegyük, a weboldal programozóknak a képernyőn megjelenő információk szerkezetét kevésbé összetetté kell tenniük, amelyhez kisegítő technológiákat is alkalmazhatnak. Ahhoz, hogy az információ screen readerrel a weboldal-felhasználók számára is hozzáférhető legyen, a Dreamweaver elősegíti szöveges egyenérték hozzáadását az oldal grafikai elemeihez, és lehetővé teszi a screen reader és más kisegítő technológiák számára HTML kódú „Tag"-ek beillesztését modulokba és táblázatokba. Például: a dokumentumhoz hozzáadhatunk egy képet, és ahhoz leírást társíthatunk: „nagyméretű piros férfidzseki". Amikor az oldalon megjelenik a kép, a screen reader leolvassa az információt a nem látó számára, így a felhasználó tudja, melyik termék jelent meg az oldalon. Hozzáférhető oldalak létrehozásakor információkat kell társítani az objektumokhoz, címkéket és leírásokat, hogy a tartalom mindenki számára hozzáférhető legyen. Ezért aktiválni kell a Hozzáférhetőség (Accessibility) párbeszédablakokat, hogy a Dreamweaver kérhesse az oldal hozzáférhetőségéhez szükséges információk hozzáadását. Ezek a párbeszédablakok akkor jelennek meg, amikor olyan objektumot illesztünk be, amelyhez aktiváltuk a

Hozzáférhetőség (Accessibility) párbeszédablakot. A következő leckék célja, azon kívül, hogy megnézzük a weboldal szerkesztés folyamatát, az is lesz, hogy figyelembe vegyük a hozzáférhetőség követelményét. A Hozzáférhetőség (Accessibility) párbeszédablak aktiválásához menjünk az Edit>Preferences (Szerkesztés> Beállítások) menübe. A Preferences (Beállítások) párbeszédablak jelenik meg előttünk. A bal oldalon megjelenő kategóriák közül jelöljük ki a Accessibility (Hozzáférhetőség)-et, ami tartalmazza a hozzáférhetőség opcióit. Állítsuk be a párbeszédablakot az ábrán látható módon. (17. ábra) Klikkeljünk az OK-ra.

17. ábra Mindig, amikor dokumentumunkhoz új elemet adunk hozzá, egy Accessibility (Hozzáférhetőség) ablak fogja kérni a tagek és hozzáférhetőségi tulajdonságok bevitelét. Vannak még a halláskárosultak, akik az audio file-okkal bővített tartalmakhoz nem férnek hozzá, például a filmekhez. Amikor például fontos információt hordoznak a han-

gok (pl. vészjelek), a hangokat látható jelek helyettesíthetik, vagy kísérhetik. Multimédiás részegység esetén, melyek igen részletes magyarázatot igényelnek, az objektumot egy „D"-vel jelzett linkhez kell társítani (innen származik a D-link kifejezés), ami olyan szöveges oldalra utal, amely a szükségesnek tartott információkat tartalmazza. A D-linkek abban az esetben is hasznosak, amikor halláskárosultak számára kommentárral szolgálnak filmekhez és audio file-okhoz, amelyeknél a hozzáigazított feliratozás nem lehetséges. Vannak fizikai értelemben vett fogyatékkal élők, kiknek köre igen sokrétű: a valamely végtag bénulásától kezdve az ideggörcs miatt mozgáskoordináció-képtelenségig, legroszszabb esetben pedig addig az állapotig, amikor csak egy szempillaveréssel, vagy egy szalmaszálon keresztül történő fújással tudnak kapcsolatba lépni a számítógéppel, így választva ki a computer által felkínált listából a kívánt műveletet. Ezekben az esetekben a hozzáférés nehézsége a felhasználó számára a parancsok beviteli berendezéseinél jelentkezik. Ezekre a problémákra a technika ezen a téren is igen jelentős válaszokat adott: megnagyobbított billentyűzetet, különleges egeret helyettesítő programokat. Az ezen fogyatékokkal élő felhasználóknak nehézséget jelent az apró, egymáshoz túl közel lévő elemek kiválasztása és ezáltal felvetett problémák korántsem indifferensek. Mindezeket a tényezőket figyelembe kell venni a weboldalak készítésekor és már kezdéskor úgy kell megtervezni honlapunkat, hogy CSS (Cascading Style Sheets - stíluslapok) módban (ezt a témát a következő fejezetben tárgyaljuk) állítjuk be a hozzáférhetőség problematikájának kezelésére.

Lecke

Használhatóság A Használhatóság kifejezés még nem szerepel a köznyelvben, de a vele kapcsolatos problémákkal nap mint nap szembesülünk az Internetet használva. Minden egyes alkalommal, amikor nem találjuk a keresett információt, nem sikerül valamit végrehajtani, vagy a rendelkezésre álló adatok alapján nem tudunk dönteni, a weboldal használhatóságának problémájával találkozunk. A használhatóságnak szentelni a legnagyobb figyelmet és mellőzni olyan problémákat, mint a navigáció, vagy az érthetőség kérdése, „banálisnak", vagy még rosszabb esetben „megoldhatatlannak" titulálva azokat, jól szemléltetik a különbséget egy jó munka és egy rossz próbálkozás között. A használhatóság problémái károsak lehetnek egy vállalat, egy társaság image-ére nézve, de akár egy személyről alkotott képre nézve is, abból a szempontból, hogy a szakemberek azt javasolják, hogy minél kevésbé "legyünk jelen" a hálón s önmagunkról csak megközelítőleges képet adjunk. Hozzáférhető webhely létrehozásához a következő szempontokat kell szem előtt tartanunk:

Hasznosság Könnyen érthető legyen Hatékonyság Könnyen emlékezhessünk Hibák minimalizálása Megelégedettség Hasznosság: Az első kritérium a webhely értelmére utal. Mire szolgál? Kit szolgál? Könnyen érthető legyen: Hogyan viselkednek a felhasználók olyan weboldal előtt, amit előtte még nem látogattak? Sok időt töltenek előtte? Olyan környezetbe érkeztek, aminek nem értik a lényegét és nem tudják, hogyan érkeztek oda? Csinálnának valamit, de nem tudják, hogyan tegyék? Hatékonyság: A látogatók kérdéseket intézhetnek a rendszerhez és gyors, ésszerű válaszokat is kaphatnak. Vagy újra és újra kell próbálkozniuk addig, amíg azt kapják, amire gondoltak? Mennyire gyorsan lehet a webhelyről adatokat letölteni? Könnyen emlékezhessünk: Azonnal emlékeznek a felhasználók a második és harmadik alkalommal is arra, hogy hogyan használják a Web-helyet? Hibák megelőzése: A szörfölő személyeknek gyakran kell a back space billentyűhöz nyúlniuk, mert oda érkeztek, ahova nem is akartak? Maga a Web-hely tartalmaz hasonló hibákat?

Megelégedettség: Szórakozást és megelégedést nyújt a Webhely használata, vagypedig nyugtalanságot, frusztrációt? Próbáljuk meghatározni azon felhasználók körét, akik látogatják majd a Web-helyet és azt, hogy mit keresnek. Ennél azonban még fontosabb, hogy azt tudjuk, hogyan szoktak információt keresni és felhasználni. Ne felejtsük el, hogy a végfelhasználó szükségletei többnyire informatív szükségletek és mint ilyenek, végtelenek és még azáltal sem igazán pontosan meghatározhatóak, aki az információt keresi. Egy használható weboldal azonban segít a kérdések megfogalmazásában.

A grafika szerepe Túl sokat használjuk a grafikát Web-oldalunk díszítésére, akkor is, ha néha tudjuk, hogy ez éppen zavaró lehet benne. Amikor egy honlapon minden mozog ás villódzik, mert annyi animált gif-et használtunk fel, a végeredmény fárasztó lesz. Amennyiben reklámfeliratokról van szó, az animációk általában el is kerülik a felhasználók figyelmét. Kevéssé szerencsések azok a Web-helyek is, amelyeken a Site Under Construction olvasható, vagypedig a képek, melyek e-mail küldésre utalnak. A háttér szerepe is igen fontos. Az ismétlődő, pszichedelikus hátterek nem tűnnek elég komolynak. Ennek ellenére most is akadnak, akik egy, már „levitézlett" stílust követve készítenek weblapot. A százféle színben pompázó gombok lépik át legtöbbször a jó ízlés határát. Akárcsak a free buttons.

A zenének is nagyon fontos a szerepe: a közepes hosszúságú file-ok zavarják a szörfölő személyt, s néha ezek meglehetősen rosszak is és az összhangzás gyakran hasonlít a mobiltelefonok csengőhangkavalkádjához. A következő szempontokat tartjuk még nagyon fontosnak: Rejtélyes felületek: Az oldalaknak érthető leírásokat kell tartalmazniuk, ami egy egyszerűbb „kutatói" megközelítést igényel. Hivatkozásokat tartalmazó szövegben információt keresni nagyon nehéz is lehet. Valójában egy link arra szolgál, hogy szemantikai és térbeli szomszédságot alakítson ki kifejezések, fogalmak és mondatok között, melyek ily módon úgy kapcsolódnak egymáshoz, hogy közben egy másik szövegben és/vagy képben találhatóak meg. Link elrejtése Javascript külsővel -ami csak akkor jelenik meg, ha az egér elhalad fölötte-, nem könnyíti meg az információszerzést. Lassú letöltés: Ha harminc másodperc várakozás után sem jelenik meg a Web-hely, a látogatók nagy része nem is foglalkozik többet vele és a világhálón található sokmillió webhely közül egy másikra fog rákeresni. A leggyorsabban letölthető Web-helyek egyben a leglátogatottabbak is. A technológiák túlzott használata: Nem szabad azt sem elfelejtenünk, hogy Web-lapunkat olyanok is látogatják majd, akik a legújabb rendszert használják és olyanok is, akik egy régit. Tehát túl sok Flash kép és applet java megnehezíti a site használatát azok számára, akik lassabb géppel rendelkeznek.

Lecke

A linkek fontossága a használhatóság szempontjából Egy webhely megtervezésekor nagyon fontos rész a linkek létrehozása. Többféle link létezik (a következő fejezetekben azt is megnézzük, hogyan kell őket beilleszteni). Fokozott figyelemmel kell eljárni felhasználásuk körül, mely összefüggésben van egy Web-hely használhatóságával. Egy linknek egyértelműnek és érthetőnek kell lennie. Előfordulhat, hogy linkről linkre haladva irányt tévesztünk. Egy jó navigációs rendszer azonban minimálisra csökkenti ennek esélyét, segít visszakerülni a megkezdett útra, és pontosan informál minket előre arról, hogy hova vezet a link. A jó Web-helyek titka az egyértelmű és egymástól jól megkülönböztethető, információhoz vezető kulcsszavakban rejlik. Jacob Nielsen a Web Usability című könyvében három fő link típust nevezett meg:

Téma linkek: az aláhúzott szöveg a tárgyalt témára vonatkozó további információhoz vezet. Ezzel persze az olvasás megszakítását kockáztatjuk. Jobb lenne, ha oldalunk jobb szélén lenne található az elmélyedésre szolgáló információ. Társító linkek: a jelenlegivel kapcsolatban lévő vagy hasonló tartalmú oldalakra mutatnak, melyeket a felhasználó érdekesnek tarthat. Például a híres összefüggő címfeliratok esetében olyan Web-helyen találjuk magunkat, ahol nyomtatókat árulnak és megtekinthetjük a lézernyomtatókat, vagy a kellékeket. Ezek a linkek arra valók, hogy irányítsák a felhasználót a webhelyünkön történő navigációban. Strukturális linkek: ezek a linkek különböző oldalakat vagy szolgáltatásokat kapcsolnak össze, az éppen megtekintet termékkel kapcsolatban segítenek minket további információhoz jutni. Természetesen minden terméknél azonosnak kell lenniük. A linkek működése tehát nagyon fontos dolog; és ha a fent leírtak szerint járunk el, kimagasló eredményekhez jutunk weboldalunk hasznosságát illetően.

Lecke

Bevezetés a CSS-be (Stíluslapok) Miután megnéztük, hogy melyek egy webhely létrehozásának legfőbb irányelvei szem előtt tartva a hozzáférhetőség és a használhatóság kritériumait is, álljunk meg egy kicsit és vizsgáljuk meg a Dreamweaver által kínált egyik nagy erőforrás használatát, a CSS (Cascading Style Sheet - Stíluslapok) -t. A kívánt eredmény elérésének érdekében a CSS előtti korok designer-i kénytelenek voltak komplikált cselekhez folyamodni, ami miatt egy Web-oldal megszerkesztése és fenntartása sokkal nehezebb volt, a teljes letöltése pedig sokkal időigényesebb. El kell mondanunk, hogy csak a közelmúltban terjedt el széles körben a CSS (Stíluslapok), aminek az egyik oka az, hogy az IE 5.X és 6-os böngészők (melyek a világon a személyi számítógépek 90%-án telepítve vannak) kiváló hordozói a CSS-eknek.

A CSS-ek olyan stiluslapok, melyek segítségével weboldalunkat egy specifikus struktúra (tartalom) és jól meghatározott formázás (tördelés) szerint szerkeszthetjük (módosíthatjuk). Stíluslapot létrehozni és módosítani azt jelenti, speciális tartalmi tulajdonságokat és tördelést hozzárendelni egy webhely oldalaihoz. Ha létrehozunk egy alapértelmezett stílust, majd ebben a betűtípust Times Romanra változtatjuk, akkor az összes e stílus hatása alatt álló szöveg betűtípusa Times Roman lesz. Képzeljük el azt az oldalt, amin számítástechnikai üzletünk árui szerepelnek fajtánként felsorolva (alaplapok, proceszszorok, memóriák, stb). A grafikai beállítások és tartalmak ugyanazok, csak a szöveget alkotó betűk mások. Tűzzük ki célul, hogy a karácsonyi ünnepek idejére egy kicsit feljavítjuk Weboldalunkat és hangulatosabb tónusúvá tesszük dokumentumainkat. Ha nem lennének stíluslapok, egyenként kellene az egyes oldalakat módosítgatni. A CSS-eknek köszönhetően azonban elég a társított stílusokat megszerkeszteni és aztán csak nézni, hogy az oldalak hogyan módosulnak automatikusan. Vegyünk egy másik példát. Tegyük fel, hogy át akarjuk szerkeszteni Webhelyünket azok számára, akiknek nehézségeik lehetnek a színekkel. Oldalainkat mértéktartóbbá szeretnénk tenni mind a kontrasztok, mind pedig bizonyos színek fényereje szempontjából (láthatóság). Ebben az esetben is készíthetünk CSS-eket más kontrasztértékekkel és azokat már csak a meglévő oldalak egy másolatához kell illesztenünk.

Most pedig nézzük meg, hogyan kell CSS-eket létrehozni. Indítsuk el a Dreamweaver-t és egy új, üres html lapot. Új stíluslap létrehozásához használhatjuk a Design (Tervezés) táblát, (amit, ha még nem látszik, az Window>CSS Styles (Ablak>CSS Stílusok) menüből érhetünk el) (18. ábra)

18. ábra A CSS Styles (CSS Stílusok) tábla előszöri megjelenítésekor kezdetben még üres lesz, de ahogy egymás után illesztjük be a stílusokat a „no styles defined" helyére, sorra jelennek majd meg az egyes stílusnevek. Jobb oldalon alul négy ikon látható, de jelenleg mi még csak kettőt tudunk belőlük használni: az Attach Style Sheett (Stíluslap társítása) és az New CSS Rule-t (Új CSS stílus). (19-20. ábra)

19. ábra

20. ábra Az első gombra akkor van szükségünk, amikor oldalunkhoz egy már létező stíluslapot szeretnénk csatolni vagy importálni. Lássunk egy példát erre. Kattintsunk a gombra és a 21. ábrán látható ablak fog előttünk megjelenni.

21. ábra A Browse (Tallózás) gombon keresztül előkereshetjük az egyik mappában elmentett stílusunkat. Még azt is megválaszthatjuk, hogy stílusunkat Link (Csatolni), vagy Import (Improtálni) szeretnénk. CSS-t csatolni azt jelenti, hogy a megnyitott ablakban használjuk azt, de webhelyünk főkönyvtárában nem szerepel. CSS-t importálni ellenben azt jelenti, hogy a stílus egyenesen a többi fájlunkkal mentődik el, melyek a Webhelyhez tartoznak és így mindig a rendelkezésünkre fognak állni Webhelyünk Main Folder (főkönyvtár)-ében. Mi mindenképpen az importálást javasoljuk, mert amikor Webhelyünket olyan szerverre visszük át, amelyik bárki számára a világ bármely pontján látni engedi webhelyünket, az átvitelkor az esetlegesen importált CSS-ek is benne lesznek. Ha már egyszer csatoltunk, vagy importáltunk egy stíluslapot, látjuk majd, hogy az „no styles defined" helyén a tervezőablakban megjelenik a kiválasztott stílus. Először viszont hozzunk létre egy új stílust. Most kattintsunk az Új CSS Rule gombra és nézzük meg tüzetesebben a képernyőnkön megjelenő képet (22. ábra).

22. ábra Látjuk, hogy az ablak három fő pontra van felosztva: Selector Type (Szelektor Típus) Selector Name (Szelektor Név) Rule Definition (Mentés helye) Az második pont a kiválasztott szelektor típusa szerint változik. A mi esetünkben most üres mert alapértelmezetten a Class (can apply to any HTML element) ezt üresen hagyja. A Type (Szelektor típusa): három megoldás létezik, amelyeknek köszönhetően dokumentumunkhoz stílust társíthatunk. Négyféle szelektor típus létezik: Class (can apply to any HTML element, Tag (Redefine an HTML element), ID (applies to only one HTML element) és Compound (based on your selection). A Rule Definition (Mentés helye): felkínálja a választást, hogy weboldalunkhoz képest egy külső, vagy belső stíluslap jöjjön létre. (23. ábra)

23. ábra A külső stílusokat használják legtöbbet, pont azért, mert bármelyik Webhely bármelyik honlapján használható fájlban kerülnek elmentésre. A belső stílusokat egy dokumentumhoz (Weboldalhoz) társítjuk, tehát csak ahhoz a honlaphoz lesznek használhatóak, amelyikben találhatóak.

Lecke A Make Custom Style (Class) (Osztály) szelektor A Class (can apply to any HTML element) (Osztály) szelektor, amit az előző leckében is alkalmaztunk, webhelyünk alkotórészeit módosítja a választott objektumok és szöveg szempontjából. Hozzunk létre egy új stíluslapot. Az Új CSS stílus nevű ablak jelenik meg előttünk (24. ábra)

24. ábra

A név mezőbe írjuk be ,,.mystyle" (az én stílusom) és hagyjuk meg a Class (can apply to any HTML element) (Osztály) szelektor kijelölését. Kattintsunk az OK-ra. (Ügyeljünk rá, hogy a kifejezés előtt lévő pontot is gépeljük be!) Ezzel egy új stílust hozunk létre, melyet ,,.mystyle"-nek nevezünk és amit, mivel a New Style Sheet File (új stíluslap fájl) opciót aktívan hagytuk, egy fájlba fogunk beilleszteni (vagyis külső stíluslapként kezeli). A program kérni fogja a fájl mentését, ahogy rákattintunk az OK-ra. Tehát megjelenik egy ablak, amely a fájlunk elmentését kéri tőlünk.

25. ábra A File név-be írjuk be: mystyle (az én stílusom), míg a Mentés helyé-be válasszuk ki a már előzőleg rögzített web-helyet: Az én webhelyem (26. ábra)

26. ábra Ne felejtsünk el mindig menteni webhelyünk mappáján belül, hogy biztosak legyünk abban, hogy nem ér minket kellemetlen meglepetés, amikor az Internet szerverre átviszszük azt. Kattintsunk a Mentés-re és ekkor a CSS Rule definition ablak jelenik meg. (27.ábra)

27. ábra

Bal oldalon sorakozik fel a kategóriák listája, jobbra pedig az egyes kategóriák tulajdonságai. A mi esetünkben a Type (Típus) kategórián belül állítsuk be a Color (Szín) tulajdonságot, vagy az egérrel kattintsunk a gombra és válasszuk a piros színt, amelynek hexadecimális kódja a közvetlenül mellette lévő színes négyszögben jelenik meg. (28. ábra)

28. ábra Ha szeretnénk, akkor beírhatjuk egyenesen a kódot is a kis négyszögbe. Kattintsunk az OK-ra. A stílusunk elkészült; nem marad más hátra, mint kipróbálni és alkalmazni. Gépeljük be a következő szöveget: az első stílus kipróbálása. Most jelenítsük meg a stílusunkat a jobb oldalon „mystyle.css"-en belül a .mystyle-ra jobb klikk>apply. (29. ábra)

29. ábra A begépelt szövegünk piros lett. Az egérmutató húzásával kijelölhetünk egy szövegrészt, de választhatunk réteget, táblázatcellát vagy a weblap bármely objektumát. A stílus alkalmazása után bármely objektumot is válasszuk, a benne található szöveg beállításaink szerint módosul. A stílusoknál számos beállítási lehetőséget találunk. A létrehozott „mystyle.css"-en belül a .mystyle stílusunkra kattintsunk a egér jobb gombjával, majd a helyi menüből válasszuk az Edit... menüt. A CSS Rule definition párbeszédablak nyolc tábláján sokféle beállítási lehetőséget találhatunk. (30. ábra)

30. ábra Nézzük meg az egyes kategóriákat: Type tábla: a szövegtulajdonságot tudjuk változtatni, mint pl: betűtípus, betűméret. Az itt beállított értékek szövegekre és szövegeket tartalmazó objektumukra alkalmazhatók. Background tábla: a háttér tulajdonságait (szín, háttérkép) határozhatjuk meg. Ezek a beállítások minden háttérrel rendelkező objektumra alkalmazhatók. Block tábla: a bekezdések tulajdonságait adhatjuk meg. Box tábla: különböző, az objektumokra általában alkalmazott tulajdonságokat tartalmazza (pl: margó mérete). Border tábla: olyan objektumokra alkalmazható, melyek szegéllyel rendelkeznek (pl: rétegek, táblázatok). List tábla: listák tulajdonságait adhatjuk meg. Positioning tábla: rétegtulajdonságokat tartalmaz, mint a láthatóságot. Extensions tábla: kiegészítő tulajdonságok, melyek jövőbeni bővítésekre, illetve az Internet Explorerre vonatkoznak. A kategóriákat részletesen az 5. leckében részletesebben is megnézzük.

Változtassuk meg a létrehozott mystyle.css stílus tulajdonságait (pl: betűtípus, méret), majd próbáljuk ki. (31. ábra)

31. ábra

Lecke A TAG szelektor Most nézzük meg egy CSS stílus Tag típusú szelektorát. Nevét onnan kapta, hogy a létrehozott CSS-ek nevét nem mi választjuk, hanem a CSS-ek egy HTML tag részhez társulnak. Az így kapott stílusok nem a jelennek meg a CSS táblán (ha a CSS táblán az Edit Styles gombra kattintunk, akkor ott viszont látni fogjuk, hogy az adott szövegben milyen Tag szelektorokat használtak). Ebben a fejezetben azt fogjuk megnézni, hogy hogyan kell olyan stílust létrehozni, ami közvetlenül ezen a szövegformázáson működik. Legyen a már korábban használt gyakorló szövegünk az ablakban, amelyre alkalmaztuk a mystyle stílust. Formázzuk meg ezt a szöveget a

elemmel: A

HTML elemet úgy helyezhetjük el, ha a Properties>Format (Tulajdonságvizsgáló>Formázás) lenyíló menüből kiválasztjuk a Heading 3 pontot. Alkalmazzuk ezt a mi szövegünkre is. Látható változás következik be.

Miután megbizonyosodtunk a CSS-ek ablakának meglétéről, hozzunk létre új stíluslapot. Válasszuk a New CSS Style gombot. Állítsuk be az ablakot úgy, hogy a szelektor típusaként a Tag (redefines an HTML element)-et választjuk, majd pedig a legördülő menüben az „body" helyett válasszuk a h3 tag-et. (32. ábra)

32. ábra Kattintsunk az OK-ra. Ekkor a program újra kéri stílusunk elmentését. Ez alkalommal nevezzük el tagcss-nek. Megjelenik a CSS Rule definition ablak. Válasszuk a Block kategóriát és állítsuk be a Text Align (Szövegigazítás) menü Center (Középre) pontját. (33.ábra)

33. ábra

Amint jóváhagytuk a stílus rögzítését, azt látjuk, hogy minden ide vonatkozó bekezdés (jelenleg a gyakorló mondatunk) az új tulajdonságot vette fel.

Lecke A Speciális szelektor (CSS szelektor) Ebben a fejezetben olyan CSS-eket akarunk beilleszteni, amelyek a felhasználók által használt linkek (két oldal közti hivatkozások) szempontjából kerülnek alkalmazásra. (Ezek a CSS szelektorok) Tegyük fel, hogy fel szeretnénk hívni a figyelmet oldalunk egyes részeire úgy, hogy amikor az egér elhalad fölötte, mondjuk a betűméret egy kicsit megnövekszik. Olyan parancsot kell alkalmaznunk, ami az oldalon lévő linkeket módosítja, és ami csak akkor aktiválódik, amikor a kurzor a hivatkozás fölé ér. Ez, azon kívül, hogy magára hívja a felhasználó figyelmét, arra is jó, hogy növeljünk a szöveg méretén, ami esetleg apró betűvel lett beírva, és ami máris olvasható méretűvé válik, ha az egér elhalad fölötte. A CSS (Speciális) típusú szelektorokkal lehetőségünk van specifikus stílusok beállítására HTML hivatkozásokon álosztályok révén.

Hozzunk létre új CSS-t és miután kijelöltük a Compound (based on your selection) (Speciális szelektort), a 34. ábrán látható a fő különbség az automatikusan megjelenő ál-osztályok között; ha Dreamweaver-ben a kis nyíllal legördítjük a listát.

34. ábra A szelektor mellett négy különböző alternatívát látunk. a:link a látogatandó oldal már meglévő hivatkozásaira alkalmaz egy stílust. a:visited a látogatott hivatkozásokon alkalmaz egy stílust. a:hover testreszabott stílust állít be, de csak akkor, amikor az egér a hivatkozás fölé ér. a:active az aktív linkekre vonatkozik Mivel (pont hogy) meg akarjuk ragadni a felhasználók figyelmét és a linket úgy módosítani, hogy levesszük az aláhúzást, és enyhén megnagyobbítjuk a szöveget az egér áthaladásakor, az a:hover ál-osztályt fogjuk használni.

Hozzunk létre új CSS-t és miután kijelöltük a Compound (based on your selection)-t (Speciális szelektor), válasszuk az a:hover szelektort. Ellenőrizzük le, hogy a Mentés helyére az New Style Sheet (Új stíluslap file) van beírva, majd kattintsunk az OK-ra. A szokásos mentés kéréskor írjuk be az „speciáliscss" nevet és kattintsunk a Mentés-re. Az ekkor megjelenő CSS Rule Definition ablakban a tulajdonságok közül válasszuk ki a típust a következő jellemzőkkel: Font-Size (Méret): 18, Font-Color (Szín): #660000, Text-Decoration (Effektek): none (nincs) (35. ábra).

35. ábra Kattintsunk az OK-ra és mentsük el munkánkat a File>Save All (File>Mindent ment) segítségével.

Lecke A Category (Kategóriák) leírása Egy már létező CSS-re a jobb egérgombbal kattintva > Edit érünk el, mind pedig egy új stíluslap létrehozásakor megjelenik a CSS Rule definition (Kategóriák) ablak s benne különböző tulajdonságok. Eddig csak a Type (Típus) és a Box kategóriát néztük meg, ebben a részben pedig más kategóriák által kínált lehetőségek egész sorát fogjuk megnézni. Type (Típus) kategória: (36. ábra)

36. ábra

Font-Family (Betű): Legördülő menü, amely segítségével a különböző betűtípusok között választhatunk. Általában több, egymástól vesszővel elválasztott típus szerepel itt, amelyek a megjelenés sorrendje alapján kerülnek felhasználásra. Ezzel megnöveljük az esélyét annak, hogy a látogatók a csoportban felsorolt betűtípusok közül legalább eggyel rendelkezzenek. (amennyiben az oldalt megjelenítő számítógépen egy sincs belőlük.) Font-Size (Méret): A stílus betűméretét határozza meg. Különböző mértékegységek léteznek (pl.: pixel vagy nyomdai pontok/betűk), melyet a méret melletti mezőben tudunk kiválasztani. Font-Style (Stílus): Azt határozza meg, hogy a betű formája Normál, Dőlt vagy Félkövér. Line-Height (Sorköz magassága): A szöveg sorai közti távolság függőleges irányban. A megadott térköz a sor fölé kerül. Text-Decoration (Effektek): itt választhatunk az alá-, fölé- és az áthúzás között. Aktiválhatjuk vagy deaktiválhatjuk a mellettük lévő kijelölő négyzet segítségével. Font-Weight (Vastagság): a szöveg „olvashatóságát" határozza meg, megvastagítja a betűket. Használhatjuk a vonatkozó beállításokat (Vékony, Normál, Félkövér, Kövér), vagy megadhatjuk a pontos mennyiségét is, figyelembe véve, hogy a Normál 400-nak, a Félkövér pedig 700-nak felel meg. Font Variant (Változó): a normál-és nagybetű közti váltást tesz lehetővé. Text-transform (Nagybetű/Kisbetű): feliratok kezdőbetűjét vehetjük vele nagyra, vagy az egész feliratot nagy-, illetve kisbetűsre. Color (Szín): a szöveg színét határozza meg. Background (Háttér) Kategória: (37.ábra)

37. ábra A stíluslapok hátterének tulajdonságai a normál HTML-hez képest nagyobb fokú szabályozást engednek számunkra a színek és a háttérképek fölött. Background-Color (Háttérszín): a stílus hátterének színét határozza meg. Background-Image (Háttérkép): kiválaszthatunk egy képet, és háttérként használhatjuk. Background-Repeat (Ismétlés): azt határozza meg, hogy egy háttérkép tud-e ismétlődni, és ha igen, hogyan. A választható opciók: No Repeat (Nem); Repeat X (Igen vízszintesen); Repeat Y (Igen függőlegesen). Background-Attachment (Melléklet): azt határozza meg, hogy a háttérkép fix, vagy együtt gördül az oldal tartalmának többi részével. Általában, amikor dokumentumot görgetünk Scroll, vele fut az oldal többi tartalma is; amikor pedig a Fixed (Fix) tulajdonság kerül alkalmazásra, a háttérkép mozdulatlan marad, míg az oldal teljes tartalma pedig fut.

Background-position (X) (Vízszintes elhelyezés): a háttérkép vízszintes elhelyezkedését kíséri figyelemmel. Background-position (Y) (Függőleges elhelyezés): a háttérkép függőleges elhelyezkedését kíséri figyelemmel. Block (Szövegtest) Kategória (38 .ábra)

38. ábra Word-Spacing (Szóköz): a szavak közti tér nagyságát szabályozza. Negatív érték megadásakor a szavak közelednek egymáshoz. Letter-Spacing (Betűköz): az egyes betűk közti tér nagyságát szabályozza, negatív érték is adható. (Ezt a tulajdonságot csak az Internet Explorer támogatja). Vertical-Align (Függőleges igazítás): azt határozza meg, hogyan viselkedik egy szöveg, ha képpel „találkozik". TextAlign (Szövegigazítás): azt határozza meg, hogy hogyan viselkedik egy szövegbekezdés, amihez stílust társítottunk. A HTML-ben is szereplő Left (Balgazárt), Right

(Jobbrazárt) és Center (Középre) igazításon kívül felkínálja a Justify (Sorkizárt) opciót is, ezzel téve lehetővé a nyomtatott papírhoz hasonló szövegtestek létrehozását. Text-Indent (Behúzás): azt határozza meg, hogy egy szövegtest első sora mennyivel kerüljön beljebb. Negatív értékeket is használhatunk, de ezt nem minden böngésző támogatja. White-space (Üres tér): Azt jelöli, hogy a szövegben lévő térközök és tabulációk közül gyakorlatilag mennyi jelenítődik meg. Megjelenítés: Ha a Nincs-re kattintunk, deaktiválódik a kérdéses elem megjelenítése. Box (Oldal elemek) Kategória: (39. ábra)

39. ábra Az ebben az ablakban definiált tulajdonságok adják a táblázatok, képek, szintek és más oldal elemek ismert tulajdonságainak stílusait. Ezek a tulajdonságok szabályozzák majd a kívánt oldal elem elhelyezkedését, mintha az egy „képzeletbeli dobozba" lenne zárva.

Width, Height (Szélesség, Magasság): a megjelenített oldal elem méreteit határozzák meg. Képeknél és szinteknél használjuk. Float (Mobil): bal, vagy jobb szélre helyezi az elemet, a körülötte lévő szöveget pedig új bekezdésbe rakja. Clear (Törlés): azt határozza meg, hogy egy elem mely oldala nem enged meg szinteket, avagy az elem (kép) melyik oldalon fog a szöveg alá kerülni. Padding (Térköz elemtől szélig): azt a térközt határozza meg mennyiségileg, ami az elem (amihez a stílust alkalmaztuk) és az őt tartalmazó „képzeletbeli doboz" széle között található. Margin (Margó): az oldal széle és az elem (amihez a stílust alkalmaztuk) közti térköz nagysága. Border (Szegély) Kategória: (40. ábra)

40. ábra Az Oldal elemek tulajdonságainak kiterjesztését mutatja be; segítségével a táblázatok széleihez hasonló szegély effektusokat tudunk létrehozni. Style (Stílus): Különböző típusú szegélystílusokat kínál: pl: szaggatott vonalas, dupla, vésett, domború... Width (Szélesség): a szegély vastagságát határozza meg. Color (Szín): a szegély színét határozza meg. List (Felsorolás) Kategória: (41. ábra)

41. ábra Azt határozza meg, hogy hogyan jelenik meg a felsorolás és számozás. List-Style-Type (Típus): azt határozza meg, hogy egy lista számozása és pontozása hogyan kerül felhasználásra: korong, kör, négyzet, szám, kis római szám, nagy római szám... List-Style-Image (Felsorolás kép): segítségével képet rakhatunk a felsoroláshoz. Elhelyezés: azt határozza meg, hogy az első sorhoz képest a rákövetkező sorban lévő elem szava mennyivel található beljebb. List-Style-Position (Elhelyezés): Belső: a szöveg elejét a lista számozása vagy pontozása alá helyezi. Külső: a szöveg elejét a számozáshoz vagy pontozáshoz képest beljebb viszi. Positioning (Elhelyezés) Kategória: (42. ábra)

42. ábra Rétegbe (szintbe) konvertálja a szövegtörzset és azt az oldalon belül különbözőféleképpen elhelyezi. Position (Elhelyezés): a böngészőben a réteg elhelyezkedésének módját határozza meg a következő opciók szerint: Absolute (Abszolút): elhelyezi a réteget az oldal bal felső sarkában található Pozíció dobozba beírt koordináták alapján. Relative (Relatív): elhelyezi a réteget a Pozíció dobozba beírt koordináták alapján megmérve a „nemző" objektum pozíciójához képest az értékeket, mint egy másik réteg, vagy egy táblázat cellája. Static (Statikus): abba a pozícióba helyezi a réteget, ami pont a szöveg belsejében található. Visibility (Láthatóság): a réteg kezdeti megjelenítésének feltételeit határozza meg. Ha nincs beállítva a Láthatóság, a böngészők túlnyomó része a nemző réteg értékét tartja meg. Inherit (Öröklő): a nemző réteg láthatósági tulajdonságát használja. Ha nincsenek felsőbb rétegek, a réteg automatikusan látható. Visible (Látható): a réteg tartalmát jeleníti meg függetlenül a nemző réteg értékétől. Hidden (Rejtett): elrejti a réteg tartalmát függetlenül a nemző réteg értékétől.

Overflow (Túlcsordulás): azt határozza meg, hogy hogyan kell egy olyan réteget kezelni, amikor a tartalom meghaladja annak méreteit. Ezek a jellemzők a következőképpen szabályozzák a szöveg kiterjedésének kezelését: Visible (Látható): a réteg méretét növeli úgy, hogy az egész tartalmat megjelenítteti; Hidden (Rejtett): a réteg méretei változatlanok maradnak és a többlet szövegrész kivágásra kerül. A görgetősáv ilyenkor nem jelenik meg. Scroll (Gördülő): megjelenítődnek a görgetősávok is függetlenül attól, hogy a tartalom mérete kisebb, vagy nagyobb-e a réteg méreténél. Auto (Automatikus): a görgetősávok csak akkor jelennek meg, ha a tartalom túllépi a réteg méretét. Placement (Pozíció): a réteg pozícióját és méretét határozza meg. Clip (Kivágás): a látható rétegrészt határozza meg. Script nyelvvel is beléphetünk a kivágás területére, például a JavaScript-tel, és változtatunk a tulajdonságain, hogy speciális effekteket érjünk el (görgethető szöveg, illetve kép). Extension (Kiterjesztés) Kategória: (43. ábra)

43. ábra

A Kiterjesztés stílus tulajdonságai a szűrőkre, oldaltörésre és a mutatóra vonatkozó opciókat tartalmazza, melyek túlnyomó részét csak az Internet Explorer támogatja. Page Break (Oldaltörés): oldaltörést ad hozzá a nyomtatás alatt a stílus által irányított objektum előtt vagy után. Visual Effect (Látható effekt): képekhez, vagy az egérmutatóhoz alkalmazott effektek. Cursor (Kurzor): megváltozik a mutató képe, ha ikonja a stílus által szabályozott objektum fölé ér. Filter (Filter): speciális effekteket alkalmaz a stílus által szabályozott objektumhoz, mint például a képélesség és egy kép negatívja.

Lecke A Frame-up (Keretek) Ebben a Fejezetben azt fogjuk megnézni, hogyan kell weboldalunk beállításait definiálni, illetve weboldalunk hogyan lesz strukturálva. A frame-ek (keretek) több részre osztják fel a browser ablakát, amelyekben aztán különböző HTML dokumentumokat tudunk megjeleníteni. A keretek nagyszerű szolgálatot tehetnek a webhely adatainak elrendezésében, másrészt viszont a navigációt nagyon bonyolulttá is tehetik. A keretek használatát ezért nagyon át kell gondolnunk, nehogy a weboldalunk látogatói örökre elvesszenek a keretek labirintusaiban. A mi Home page-ünk 3 frame-re (keretre) lesz felosztva, amelyek közül az első, legfelső tartalmazza majd vállalatunk logos fejlécét. A frame-ek közül mindegyik egy-egy külön HTML dokumentumot jelenít meg. A megjelenítés, amit látunk, a teljes oldalt láttatja az összes frame-el együtt, de ezek közül mindegyik egy-egy HTML oldalnak felel meg, és saját névvel rendelkezik

Tehát a mentésnél nagyon oda kell figyelnünk: a felső frame-t felülnek nevezzük el, az oldalsót bal-nak, a központit pedig main-nek. Menjünk a File>New>Page from sample>Framesets menübe. (44. ábra)

44. ábra Oldalunkon (41. ábra) a legfelső keretben megjelenített dokumentum sohasem változik a webhelyen történő navigálás alatt. Az oldalsó keret navigációs sávja linkeket tartalmaz, mint egyfajta tárgymutató. Amikor rákattintunk valamelyikre közülük, a fő keret tartalma megváltozik, míg az oldalsó kereté változatlan marad. Jobbra, a fő kereten belül annak a hivatkozásnak a tartalma jelenik meg, amelyikre a felhasználó a baloldalon rákattintott.

Frameset (Keretösszeállítás) létrehozása Nyissuk meg a korábban létrehozott és az én webhelyen mappába elmentett index.htm lapunkat. Miután megnyitottuk, menjünk a Modify>Frameset (Feldolgozás>Keretcsoport) menübe és az ott megjelenő menüben ki is tudjuk választani, hogy hogyan szeretnénk oldalunkat felosztani. Felső, alsó, bal, vagy jobb frame (keret) beillesztésével. (45. ábra)

45. ábra Mi válasszuk a Split Frame Up-t (Frame felosztása fent) és azt látjuk, hogy oldalunk felosztódott és fönt egy új rész jelent meg. Az alatta lévő frame kijelölésével ugyanazzal a művelettel, de ezúttal a Split Frame Left (Frame felosztása balra) pontot választva a kijelölt frame még egy részre tagolódik a bal oldalon.

Fontos, hogy mindig megadjuk, hogy melyik Frames-t akarjuk felosztani, mert a Dreamweaver csak azt fogja, amelyiket kijelölteik. Azt látjuk, hogy a frame-k felosztását az egyes részeket elválasztó vonalak mutatják. (46. ábra).

46. ábra Most már tetszés szerint állíthatjuk be oldalunk Layoutját, tehát meghatározhatjuk az egyes részek méreteit. Elég rámenni az egérrel, és amikor az átméretezés mutató jelenik meg, az egérgombot lenyomva tartva áthelyezhetjük az elválasztó vonalakat. Ha az egérrel az elválasztó sorra kattintunk, azt vesszük észre, hogy az alatta lévő Properties (Tulajdonságok) sáv a Frames-t (keretcsoport) beállításához szükséges paramétereket tartalmazza (47. ábra). Ha akarjuk, például azt is meghatározhatjuk, hogy a hogy a frame-ek (keretek) közti elválasztóvonalak látszódjanak-e, vagy sem.

Ez a paraméter automatikusan Alapértelmezett¹-ként van beállítva, vagyis a vonalak csak tervező módban látszódnak, a böngészőben nem. A színt és a vonalvastagságot is beállíthatjuk rajta, ha úgy döntöttünk, a browser-ben is szeretnénk megjeleníteni őket. Ha azt szeretnénk, hogy látszódjanak a frame-k, nyissuk meg a frame-k parancssorát az Window>Frames (Ablak) menüben. (48. ábra)

1

Vagyis alapértelmezés szerint nem látszódnak "navigálás" közben.

48. ábra A Frames táblában (45. ábra) sokkal világosabb a Framesek (keretcsoportok) hierarchiája, mint a dokumentum ablakban. Ebben a panelban a Frames-ek egy nagyon vastag keretbe vannak zárva és minden Frames pedig egy vékonyabb szürke vonallal van körülvéve és névvel rendelkezik. Amikor kijelölünk egy Frames-t, a szegélyek a Dokumentum ablak struktúrájában pontozott vonalként jelennek meg.

Lecke A frame-ek elmentése Egy Frames-t (keretcsoport) előzetes képének böngészőben történő megjelenítéséhez mindenekelőtt el kell mentenünk magának a csoportnak a fájl-át és minden olyan dokumentumot, ami a Frames-ben (keretben) kívánunk megjeleníteni. Elmenthetjük az egyes keretcsoportok fájljait és egyenként a bennük lévő dokumentumokat, vagypedig a keretcsoport fájl-át és az egyidejűleg a Frames-ekben megjelenő összes dokumentumot. Egy frame-ben megjelenített minden új dokumentumhoz egy alapértelmezett fájl név kerül. Például az első Frameset (keretcsoport) fájl neve UntitledFrameset-1, míg az első frame dokumentum neve UntitledFrame-1 (49. ábra). Először a „Frameset" -eket (keretcsoportokat) kell elmentenünk, vagyis azt a dokumentumot, ami annak a három Frames-nek a csoportját tartalmazza, amelyek az oldalon megjelenítődnek majd.

49. ábra Menjünk a File>Save Framset As... menübe és megjelenik előttünk a jól ismert mentés ablak, adjuk fájlnévnek az „index.htm" nevet. (50. ábra)

50. ábra Aztán sorra mentsük el a többit „fent", „bal" és „main" néven. Hogy biztosak legyünk abban, hogy éppen melyik dokumentumot mentjük el, nézzük meg, melyik van az oldalon éppen kijelölve.

Lecke A Frame-ek tulajdonságai Az egyes keretek, valamint azokat összetartó keretösszeállítások különböző tulajdonságokkal rendelkeznek. Ezeket a beállításokat elsősorban a Properties (Tulajdonságok) sávon (51. ábra) érhetjük el, amellyel különböző beállításokat végezhetünk el. Dolgozhatunk az egyes kereteken (természetesen ehhez először ki kell jelölnünk azt a keretet, amin dolgozni kívánunk), de dolgozhatunk a frame-ek parancssoráról is, vagy pedig az egérrel belekattintunk abba a részbe, ahol tevékenykedni akarunk.

51. ábra A Properties (Tulajdonságok) sávban meg tudjuk jeleníteni, hogy hány sorból és oszlopból áll a keretcsoport (frameset).

A mi esetünkben 2 sorból és 2 oszlopból és ugyanabban az ablakban látjuk az egyes kereteket meghatározó szegélyeket is. A Properties (Tulajdonságok) sávban a Borders ablakban van lehetőség a szegélyek be- és kikapcsolására. Border Color: a szegélyek színe határozható meg. Border Width: a szegély szélességének adhatunk értéket. A keretek szegélye alapállapotban szürkén árnyalt sávként jelenik meg. Az Interneten megjelenő, keretekre épített weblapokon nehéz felfedezni a keretszegélyeket, mert a tervezők vagy kikapcsolják, vagy olyan színt adnak a szegélyeknek, hogy beleolvadjanak az oldal szerkezetébe. A mi weboldalunkon sem fogjuk megjeleníttetni a keretek szegélyeit, mert azt szeretnénk, ha a különböző részek egységesen jelennének meg. A Properties (Tulajdonságok) sávban a sorok és oszlopok méreteit is beállíthatjuk. A keretet magában foglaló oszlop szélességének értékét pixelben, vagy %-ban is megadhatjuk. A mi esetünkben a bal oldali keret tárgymutatójába illesztendő objektumok alapján állítjuk be a szélességet, amit persze aztán kedvünk szerint módosíthatunk. A Properties (Tulajdonságok) sávban állíthatjuk be az egyes keretek görgetési tulajdonságait is. (52. ábra) A vízszintes görgető sávok nem igazán elterjedtek, használatuk nem igazán ajánlott. A függőleges görgető sávok viszont szinte mindennaposak a weblapokon. Minden keret saját görgetési tulajdonsággal rendelkezik.

52. ábra A beállítási lehetőségek a következők: Yes (igen): mindenképpen megjeleníti a görgetősávot, akár igényli a keret tartalma, akár nem. No (nem): a tartalom méretétől függetlenül kikapcsol mindenféle görgető sávot. Auto (automatikus): akkor kapcsolja be a görgető sávokat, ha a keret tartalma nagyobb kiterjedésű, mint a böngészőablakban látható terület. Miután ez a beállítása csak a szükséges görgetősávokat kapcsolja be, legtöbbször jobban használható mint a Yes. Default: a legtöbb böngészőben megegyezik az Auto-val. Ha szeretnénk, hogy a felhasználó ne méretezhesse át a kereteket, kapcsoljuk be a No Resize jelölőnégyzetet. (53. ábra) Egy Hivatkozás Cél-ja (Target) specifikálja a keretet vagy ablakot, amelyben megnyitottuk a csatolt tartalmat. Például ha a navigációs sáv a bal oldali keretben található és mi a tőle jobbra lévő keretben lévő főtartalom csatolt anyagát szeretnénk megjeleníteni, specifikálnunk kell a főtartalmi keret nevét, mint célt (címet) a navigációs sáv minden linkjéhez.

53. ábra Amikor egy látogató rákattint a navigációs sáv egy linkjére, a specifikált tartalom a fő keretben jelenik meg. Különbözőféleképpen állíthatunk be Hivatkozás-t (Target), amivel linkelt oldalt nyithatunk meg. _blank: a böngésző egy új ablakában nyitja meg a csatolt dokumentumot, a futó ablak változatlan marad. _parent: a csatolt dokumentumot a hivatkozást tartalmazó keret fő keretcsoportjában nyitja meg a teljes keretcsoport helyébe lépve. _self: a hivatkozást a futó keretben nyitja meg, ez az alapértelmezett beállítás. _top: a teljes böngészőablakban nyitja meg a csatolt dokumentumot az összes keret helyébe lépve. Ha elkészítünk egy hivatkozást és kiválasztunk egy menüpontot, a hivatkozás által megadott weblap a menüpont meghatározta ablakba kerül. Ha nem adunk meg célterületet, a weblap a hivatkozást tartalmazó keretben jelenik meg.

Lecke A Táblázatok A táblázatok hasznos eszközei adatok megjelenítésének és szövegek, grafikák elhelyezésének HTML oldalon. Egy táblázat egy vagy több cellát tartalmazó sorból, vagy sorokból áll. Habár az oszlopokat HTML módban nem specifikálják explicit módon, a Dreamweaver lehetővé teszi mind az oszlopok, mind a sorok megszerkesztését. Miután létrehoztunk egy táblázatot, rendkívül könnyen megváltoztathatjuk külsejét és szerkezetét 2. Webhelyünkön belül egy táblázatot fogunk használni a felső kerethez, amibe majd cégünk logo-ját illesztjük be és mellé néhány más oldalra mutató hivatkozást.

² A Dreamweaver két eszközt bocsát rendelkezésünkre a táblázatok megjelenítésére és szerkesztésére: egyrészt a Standard nézetet, amelyben a táblázatok sorok és oszlopok rácshálózataként jelennek meg, másrészről pedig a Layout nézetet, ami lehetővé teszi megrajzolni, átméretezni és áthelyezni az oldalon lévő dobozokat továbbra is használva a táblázatokat az alábbi szerkezethez.

Táblázat beillesztése Nyissunk egy új lapot. Menjünk az Insert>Table (Beszúrás>Táblázat) menübe és az 54. ábrán látható ablak jelenik meg előttünk. Ebben az ablakban állíthatjuk be táblázatunk jellemzőit:

54. ábra Rows (Sorok): hogy hány sort akarunk. Columns (Oszlopok): hogy hány oszlopot akarunk. Oldalunkhoz 2 sort és 4 oszlopot jelöljünk ki. Table Width: táblázat szélessége. Border Thickness (Szegély szélesség): azt határozza meg, hogy a táblázat szegélye milyen vastag legyen. Ha 0-ra állítjuk be, a szegélyek nem lesznek láthatóak. Ezt a tulajdonságot akkor használjuk, amikor egy oldal layout-ját kell beállí-

tanunk és a benne lévő elemeket (szövegek, képek, stb.) rendezetten szeretnénk tartani. Cell Padding (Cella szél): pixelben adja meg a tartalom és a cella széle közti távolságot. Cell Spacing (Cella térköz): a táblázat egymás mellett lévő cellái közti távolságot határozza meg pixelben. Ha a Cella szél és a Cella térköz opciókra nincsenek explicit értékek megadva, a böngészők nagy része úgy jeleníti meg a táblázatot, mintha a Cella szél opció l-re lenne beállítva, a Cella térköz pedig 2-re. Ha azt akarjuk, hogy a böngészők térköz és szél nélkül jelenítsék meg a táblázatot, az opciókat 0-ra kell beállítanunk. Az ablak alsó és középső felében Header (Fejléc) és a Caption (Képaláírás)-ra vonatkozó opciók közül választhatunk (55. ábra):

55. ábra

Header: None (Nincs): a táblázat egyetlen sorához vagy oszlopához sem aktivál fejlécet. Left: lehetővé teszi, hogy az első oszlop tartalmazza a táblázat összes fejlécét, így a táblázat minden sorába illeszthetünk fejlécet. Top: lehetővé teszi, hogy a táblázat első sora tartalmazza az összes fejlécet, így a táblázat minden oszlopába fejlécet tudunk illeszteni. Both: segítségével mind sor-, mind oszlopfejlécet beszúrhatunk táblázatunkba. A fejléc használatát akkor javasoljuk, amikor a Weboldal látogatók screen reader-t használnak. A screen reader-ek leolvassák a táblázatok fejléceit, és használói számára lehetővé teszik, hogy azonnal megismerjék a táblázatban található információ tartalmát. Caption (Képaláírás): segítségével a táblázaton kívül megjeleníthető címet illeszthetjük be. Summary (Összefoglalás): a táblázatról nyújt leírást. A screen reader-ek leolvassák az összefoglaló szöveget, ami viszont a felhasználó előtt a böngészőben nem kerül megjelenítésre. Miután definiáltuk a paramétereket, táblázatunk beillesztéséhez kattintsunk az OK-ra.

Lecke Képek és táblázatok Most nézzük meg, hogy a Properties (Tulajdonságok) sáv segítségével hogyan formázhatjuk és módosíthatjuk táblázatunkat (56. ábra).

56. ábra Rows, Cols (Sorok, Oszlopok): a táblázat sorainak és oszlopainak számát határozza meg. W (Szélesség): a táblázat szélességét és magasságát határozza meg pixelben vagy százalékban a böngésző ablakának szélességét és magasságát.

CellPad (CellSzél): a cella szegélyei és tartalma közti távolságot határozza meg pixelben. CellSpace (CellTér): a táblázat szomszédos cellái közti távolságot határozza meg pixelben. Align (Igazít): ugyanazon bekezdés többi eleméhez képest (például szöveg, vagy képek³) specifikálja a megjelenített táblázat elhelyezkedését. Left (Balra): balra a többi elem táblázatát igazítja úgy, hogy ugyanazon bekezdésnek a szövege a jobbra lévő táblázat köré kerüljön. Right (Jobbra): jobbra a többi elem táblázatát igazítja úgy, hogy a szöveget a bal oldali táblázat köré helyezi. Center (Középre): a táblázatot középre helyezi, a szöveget pedig a táblázat alá vagy fölé rakja. Default (Alapértelmezett): a böngésző alapértelmezett igazítását határozza meg. Border (Szegély): a táblázat szegélyeinek szélességét határozza meg pixelben. A Cellaszélesség konvertálása pixelbe és a Táblázat magasságának konvertálása pixelbe gombok lehetővé teszik, hogy bármely oszlop szélességét vagy magasságát és a teljes táblázat szélességét konvertáljuk a pixelben megadott aktuális szélességbe. A Cellaszélesség konvertálása százalékba és a Táblázat magasságának konvertálása százalékba gombok lehetővé teszik, hogy bármely oszlop szélességét vagy magasságát és a teljes táblázat szélességét konvertáljuk a Dokumentum ablak szélességének százalékban kifejezett aktuális szélességébe. Ha alapértelmezett igazítás van meghatározva, a táblázat mellett nem jelenik meg más típusú tartalom. Ha a táblázatot a többi típusú tartalom mellett szeretnénk megjeleníttetni, használjuk a Balra-, illetve Jobbra igazít pontokat. 3

Class : Egy előzőleg definiált css-t tudunk e funkció segítségével hozzárendelni a táblánkhoz, amiben beállíthatjuk a tábla főbb tulajdonságait (szegély színét, a tábla hátterét stb.). Táblázatunkhoz rendeljük a 100%-os szélességet (százalékban) úgy, hogy a táblázat széltében az egész képernyőt elfoglalja. (Vagyis elállunk a felhasználó által beállított képernyő felbontástól.) Most pedig jelöljük ki a bal felső sarokban lévő első cellát és menjünk a Insert (Beillesztés) menübe, ahol válasszuk a Image (Kép) menüpontot. Illesszük egy tetszőleges képet (pl: oktató cd>példatár>képek), ami nem más, mint cégünk logo ja. (57. ábra)

57. ábra Most a 2-es sor első celláját jelöljük ki és kattintsuk a Properties sávban a Cell pontban található cellát további cellákra felosztó gombra (58.ábra).

58. ábra A program megkérdezi tőlünk, hogy a cellákat oszlopokra, vagy sorokra szeretnénk-e felosztani és hogy hányra. Mi írjuk be: 2 Oszlop (Columns). A 2. sor minden cellájára ismételjük meg a műveletet. Az egérrel menjünk a 2.sor elé és amikor a mutató alakot vált és bal oldalra mutató fekete nyíl lesz belőle, kattintsunk vele és jelöljük ki a teljes 2.sort. (59. ábra)

59. ábra Most állítsuk be a kijelölt cellák háttérszínét, a betűtípust és az igazítást.

Lecke Képek beszúrása Az előző fejezetben már láttuk, hogyan kell képet beszúrni. Cégünk logoja után most azt nézzük meg, hogyan kell weboldalunkba képeket beilleszteni. Nyissuk meg az index.htm oldalt, ahol három keretet látunk: a felsőt, a bal oldalit és a main-t. Szeretnénk, ha weboldalunkon több reklámkép szerepelne, lenne benne napi ajánlat, vagy alkalmi vételekről szóló híradás... Az oktató cd-n vannak reklámképeink, melyeket az én webhelyem>Képek mappájába fogunk menteni. A logo.gif képet fogjuk felhasználni. A képet a main frame-be szeretnénk beszúrni, ezért jelöljük ki ezt a keretet, majd kattintsunk bele. Menjünk a menü Insert>Image (Beszúrás>Képek) pontjába, jelöljük ki a képet, vagyis a logo.gif et és kattintsunk az OKra. (60. ábra)

60. ábra Ezután a hozzáférhetőségre vonatkozó ablak jelenik meg (61. ábra), amit, ha még emlékezünk, a kezdetekben állítottunk be így. Az ablakban leírást adhatunk a képről úgy, hogy screen reader segítségével a nem látók is tudhassák, milyen képről van szó, és leírást kapjanak arról, amit nem láthatnak. (Ide) egy max. 50 karakteres leírást gépelhetünk be. Ide mindenképpen érdemes információt beírni, mert a web-oldal további fejlesztésénél ki tudjuk majd használni. Ha a szövegünk ennél hosszabb, az alatta lévő pontba kell mennünk és fájl-hoz kapcsolódó hivatkozást beszúrni.

61. ábra

Ebben az esetben a Long Description (Hosszú leírás): szövegdobozban kell megjelölnünk a fájl nevét és helyét, ami majd akkor jelenítődik meg, ha a felhasználó a képre, vagy a mappa ikonjára kattint, hogy elérje a fájl-t. Az 5. fejezetben fogunk a hivatkozásokkal foglalkozni, amikor majd szükségünk lehet az itt meghatározott fájlra. Adhatunk leírást képünkről, majd kattintsunk az OK-ra. Képünk a main frame-be lett beszúrva. Most nézzük meg, hogy szükség esetén hogyan nyújthatunk további információkat a Properties (Tulajdonságok) sáv (62. ábra) segítségével.

62. ábra A Properties (Tulajdonságok) sávban, miután kijelöltük a képet, aktuális képünk kicsinyített mását fogjuk látni és egy sor olyan tulajdonságot, amin ha akarunk, változtathatunk:

W, H (Szélesség és Magasság): a kép szélességét és magasságát határozza meg pixelben. Ezekben a szövegdobozokban automatikusan frissítődnek az értékek, amikor képet illesztünk be az eredeti méretekkel. Képek méretét a következő mértékegységek határozhatják meg: pt (pont), in (hüvelyk), mm (milliméter), cm (centiméter). Amikor a felhasználó beilleszt, az értékek HTML kódban automatikusan pixel-be konvertálódnak. Ha a W és H (Szélesség és Magasság) értékeken változtatunk, és ezek nem felelnek meg a kép eredeti szélességének és magasságának, lehet, hogy a kép nem fog tökéletesen megjelenítődni. Ahhoz, hogy elkerüljük ezt, elég a kép eredeti méretének visszaállítása Reset Size gombra kattintani, ami új érték beillesztésekor a W és H szövegdoboztól jobbra található 1. Src (Forrás-Eredet): a kép eredeti fájl-át határozza meg. Az eredeti fájl azonosításához kattintsunk a mappa ikonjára, vagy gépeljük be az elérési utat. Link (Hivatkozás): segítségével a képhez HTML hivatkozást jelölhetünk meg. A mi esetünkben képünket egy olyan oldalhoz fogjuk kapcsolni, ami részletesebb tájékoztatást nyújt termékünkről.

1

Átméretezhetjük képünket, de ez nem fog változtatni a letöltési időn, ugyanis a böngésző, mielőtt átméretezi a képet, minden adatot letölt róla. Ha csökkenteni akarjuk a letöltési időt és azt akarjuk, hogy a kép minden másolata megegyező méretű legyen, használjunk grafikus alkalmazást a kívánt méretek beállításához.

Align (Igazítás): segítségével egy képnek a szöveghez történő igazítását végezhetjük el (63. ábra):

63. ábra Default: legtöbbször a kép alját az objektum aljához igazítja, de ez függ a böngészőtől is. Baseline: a kép alját az objektum aljához igazítja. Top: a képet a legmagasabb objektumhoz igazítja, a szöveg további sorai a kép alá törnek. Middle: az objektumot a kép közepéhez igazítja, a szöveg további sorai a kép alá törnek. Boltom: az objektumot a kép alá igazítja, mint a Baseline beállításnál. TextTop: a képet a legmagasabb szövegelemhez igazítja. Absolute Boltom: a legmagasabb objektum és a kép alját igazítja egymáshoz. Left: a képet a többi objektumtól balra igazítja. Right: a képet a többi objektumtól jobbra igazítja.

Alt: azokban a browser-ekben, amelyek nem támogatják a grafikus módot, vagy amelyekben a képek kézi letöltésűek, a kép helyett alternatív szöveget jeleníthetünk meg. A nem látók számára, akik szöveges módban működő browser-t használnak screen reader-rel, hangos szoftver olvassa el a szöveget. Ahhoz, hogy megbizonyosodjunk arról, van-e alternatív szöveg, elég a mutatót a kép fölé vinni és a szöveg pár másodpercen belül megjelenik. Border (Szegély): automatikusan 0, ami azt jelenti, hogy a kép nem kap szegélyt. Ha szegélyt szeretnénk, állítsunk be 0-nál nagyobb értéket. Target(Cél): segítségével meghatározhatjuk azt a frame-et (keretet), vagy ablakot, amelyikben a csatolt oldalnak le kell töltődnie. (Ez az opció csak akkor áll a rendelkezésünkre, ha a kép egy másik fájlhoz van csatolva.) A Cél listában találjuk az aktuális frameset (keretcsoport)-ben lévő összes keret nevét. A következő célnevek közül választhatunk: _blank: a fájl-t a böngésző egy új ablakába tölti le. _patent: a csatolt fájl-t a keretcsoportba vagy a hivatkozást tartalmazó felső frame (keret) ablakába tölti. _self: a csatolt fájl-t a browser teljes képernyős ablakába tölti le, ilyenkor egy frame sem látszik. Edit (Szerkesztés): lehetővé teszi, hogy képszerkesztő segítségével (Fireworks, Photoshop, stb.) változtassunk a képen. Léteznek eszközök a kép kivágására, valamint a kontraszt és a fényerősség beállítására is. Szúrjunk be egy másik képet is a main frame-be, ahogy az előbb tettük.

Menjünk a menü Insert>Image (Beszúrás>Képek) pontjába, jelöljük ki a képet, pl..: a iec.gif-et és kattintsunk az OK-ra. (64. ábra)

64. ábra Ezzel a két képpel dolgozunk a következő leckében is.

Lecke Layer Miután képeinket beszúrtuk a main frame-be, azt vesszük észre, hogy nem tudjuk őket tetszés szerint áthelyezni, és csak afölött tudunk dönteni, hogy az oldalon hogyan igazítjuk őket vízszintesen. Mi azonban azt szeretnénk, ha az egyik kép egy kicsit feljebb, a másik kép pedig egy kicsit lejjebb kerülne. Ehhez Rétegeket, vagy Layer-eket fogunk használni. A rétegek tulajdonképpen tárolók, melyek segítségével az objektumokat a weblap tetszőleges helyére tehetjük. A rétegek két fontos tulajdonsággal rendelkeznek: Visibility: lehetővé teszi, hogy elrejtsünk egy réteget (mint pl egy menü), és a felhasználó cselekedeteitől függően egyszer csak megjelenítsük. z-index: ez a tulajdonság adja meg a rétegek egymás között elfoglalt helyzetét. Segítségével egymás föle is helyezhetjük a rétegeket, így akár összetett oldalakat is készíthetünk. Rétegek létrehozásánál kétféle lehetőség közül választhatunk:

A beszúró (Insert) sáv Layout lapján a Draw Ap div (Réteg rajzoló) eszközre kattintunk. Ezután az egérrel kijelölhetjük a réteg számára kiválasztott területet. (65. ábra)

65. ábra Választhatjuk az Insert (Beszúrás) menü Layout Objects almenü Ap div parancsát, ezzel is új réteget tudunk beilleszteni. (66. ábra)

66. ábra

A rétegek elkészítése után, az egér segítségével vonszoljuk a képeket az egyes rétegekbe, majd próbáljuk ki, hogy most már képeinket bárhol elhelyezhetjük. (67. ábra)

67. ábra A rétegek beállításait az Edit>Preferences menü Ap Elements pontjában tehetjük meg. (68. ábra) 68. ábra

Beállítási lehetőségek: Visibility: láthatóság.

Width: szélesség. Height: magasság. Background Color: háttérszín. Background Image: háttérkép. Nesting: engedélyezhetjük a rétegek egymásba ágyazását a jelölő négyzet bekapcsolásával. A rétegeknek érdemes nevet adni, mert. amikor viselkedéseket vagy animációkat kapcsolunk hozzájuk, az elnevezésük segíthet az azonosításban. A Properties panelen a Layer ID mezőben adhatunk nevet a rétegnek, valamint itt több tulajdonságot is beállíthatunk. (69. ábra)

69. ábra A Dreamweaver lehetővé teszi, hogy egy weboldal elrendezését-látványképet rétegek (Layer) révén tervezzünk meg, amelyeket később, ha akarunk, táblázatokba konvertálhatunk. Akkor lehet például szükség rétegek-szintek táblázatokba való konvertálására, ha az Internet Explorer 4.0-nál korábbi verziójú böngészővel rendelkezünk.

Minthogy a rétegeket-szinteket a korábbi verziók nem ismernék fel, és mi nem tudjuk, hogy a felhasználó melyik böngészőt fogja használni, tovább folytatjuk a konvertálást.

Látványképet rétegek segítségével is létrehozhatunk, vagyis a rétegeket táblázatokba konvertálhatjuk úgy, hogy a látványképet azok a böngészők is meg tudják jeleníteni, amelyek nem a legújabb verziójúak. Jelöljük ki a Modify>Convert>Ap Divs to Table (Feldolgozás>Konvertálás>Rétegek táblázatba) parancssort. (70. ábra) (Van olyan parancs is, amely segítségével táblázatokat tudunk réteggé konvertálni: Table to Layers).

70. ábra A Convert Ap Divs to Table (Rétegek konvertálása táblázatokba) párbeszédablak jelenik meg (71. ábra). Nézzük meg tüzetesebben a benne található opciókat:

71. ábra

Most accurate (Nagyfokú pontosság): cellát hoz létre minden réteghez, plusz további cellákat, amelyek a rétegek közti távolság megtartásához szükségesek lehetnek. Smallest: Collapse empty cells (Legkisebb: üres cellák összevonása): azt specifikálja, hogy a rétegek szegélyeinek igazítva kell lenniük ha egy bizonyos számú pixelen belül találhatóak. Ez a beállítás lehetővé teszi, hogy kevesebb üres sorunk és oszlopunk legyen, de előfordulhat, hogy ez nem felel meg a mi layout-unknak. Use Transparent GIFs (Átlátszó GIF használata): a táblázat utolsó sorát átlátszó GIF-el tölti ki, s közben biztosítja azt, hogy a táblázat minden browser-ben ugyanolyan oszlopszélességgel jelenítődjön meg. Center on Page (Oldal közepére): a létrehozott táblázatot az oldal közepére helyezi. Alapértelmezésként a táblázat az oldal bal szélén kezdődik, de ezt a beállítást bármikor lehet módosítani.

Kattintsunk az OK-ra. (72. ábra)

72. ábra A táblázatok szintekbe való konvertálásához jelöljük ki a Modify>Convert>Ap Divs to Table (Feldolgozás>Konvertálás>Táblázatok rétegbe) parancssort. A Táblázatok konvertálása rétegekbe párbeszédablak jelenik meg (73. ábra).

73. ábra

Válasszuk ki a szükséges opciókat, majd kattintsunk az OK-ra. (74. ábra)

74. ábra A táblázatok szintekbe konvertálódnak, az üres cellák viszont nem konvertálódnak szintekbe, hacsak nincs háttérszínük. Ebben az esetben az oldalunkon található minden elem, még ha a táblázaton kívül is van, szintekbe alakul át.

Lecke Új Oldalak létrehozása Miután beillesztettük reklámképeinket, elérkeztünk oda, hogy elkészítsük azokat az oldalakat is, amelyek majd részletesebb tájékoztatást nyújtanak a felhasználó számára a termékeinkről úgy, hogy csak rákattint a termék fényképére, ami egy másik oldalra viszi őt. Mindenekelőtt az első oldalt kell létrehoznunk. Menjünk a File>New (Fájl>Új) menübe és jelöljük ki a Blank Page (Kezdőoldal)-t és kattintsunk a Create (Létrehoz) gombra² (75. ábra).

²

Ezekhez a hirdetési oldalakhoz úgy is létrehozhatjuk a stílust, hogy minden oldal egyforma legyen és ne kelljen mindig új layout-ot létrehozni.

75. ábra Azt tanácsoljuk, hogy oldalunkat már a legelején mentsük el mappánkba úgy, hogy mindig csak meg kelljen nyitni, ha változtatni akarunk rajta valamit. Nevezzük el „Navigátor"-nak. A weboldal készen áll arra, hogy szövegeket, képeket vagy egyéb objektumokat adjunk hozzá. (Illesszük be táblázatunkat vagy rétegünket - attól függően, hogy hogyan akarunk dolgozni - és készítsük elő magunkban, hogy milyen leírást akarunk termékeinkről adni.)

Lecke Szöveg beszúrása Szöveg bevitele a szövegszerkesztő programban megszokott módon történik, egyszerűen kezdjük el begépelni a dokumentum ablakba. A rendelkezésünkre álló formázási opciók Dreamweaverben hasonlóak egy normális szövegszerkesztő programhoz. Egy szövegtest (Paragraph-Bekezdés, Heading1 - Cím l, Heading2 -Cím 2, stb.) formázási stílusának beállításához használjuk a Format>Paragraph Format (Formátum> Bekezdés formátuma) parancssort (76. ábra) vagy a Properties (Tulajdonságok) ablakban megjelenő Format (Formátum) menüpontot (77. ábra). A kijelölt szöveg betűtípusának, betűméretének, színének és igazításának megváltoztatásához használjuk a már régebben említett CSS tulajdonág létrehozását, vagy a Properties (Tulajdonságok) ablakot. Az olyan szövegformázási tulajdonságok alkalmazásához, mint a félkövér, dőlt, aláhúzott, stb., menjünk a menü Format>Style (Szöveg>Stílus) pontjába.

76. ábra

77. ábra Ezenkívül különböző standard HTML tag-eket is összegyúrhatunk egyetlen HTML Stílus-sá. Például HTML formázást manuálisan is elvégezhetünk tulajdonságok és tagek kombinációja révén, aztán elmenthetjük a HTML Styles (HTML Stílusok) panelba HTML forma alatt. Így minden alkalommal, amikor ezzel a HTML tag-kombinációval kellene szövegünket megformázni elég lesz kijelölni a HTML Styles (HTML Stílusok) panelban elmentett stílust. A

HTML Styles (HTML Stílusok)-t szinte mindegyik böngésző támogatja és azt is lehetővé teszik, hogy egy szöveg manuális formázásához képest időt takarítsunk meg. Létrehozhatjuk például a Reklám stílusunkat, amit minden alkalommal használni fogunk majd, amikor hirdetési oldalakat, vagy termékinformációt tartalmazó oldalakat szeretnénk létrehozni. Amikor rákérdez a program, hogy milyen betűtípust akarunk alkalmazni, azt látjuk, hogy a Dreamweaver-ben szerepel egy sor standard betűtípus. (Az összes viszont nem szerepel benne.) Ha akarjuk, módosíthatjuk, vagy bővíthetjük e listát a Format>Font>Edit Font List (Szöveg>Betűtípus>Betűtípuslista módosítása) parancssoron keresztül. Az alábbi ablak jelenik meg előttünk. (78. ábra)

78. ábra

Az alsó részben választhatjuk meg, hogy milyen betűtípust szeretnénk hozzáadni a listához, majd az OK gombra kat-

tintva hagyhatjuk jóvá a műveletet. Lényeges tudni azonban, hogy ha túlságosan testreszabott betűtípusokat választunk, amelyek esetleg nem állnak a látogató számítógépén rendelkezésre, akkor azon helytelenül fognak megjelenítődni. Mind a Properties (Tulajdonságok) sávon, mind pedig a szövegbeszúrásra vonatkozó lépések során megválaszthatjuk, hogy milyen betűtípust akarunk szövegeinkhez használni. A manuális HTML formázás és a HTML Stílusok lehetővé teszik, hogy standard HTML tag-ek révén formázzuk meg a szöveget, úgymint Bold vagy az Italic melyeket a legtöbb böngésző támogat. A CSS stílusok egy egyedi osztályban a teljes szöveg megformázását definiálják, vagy egy specifikus HTML tag formázását definiálják újra, mint a hl, h2, p vagy 1i. A CSS stílusokat egyedül a Netscape Navigator 4.0 és az ennél újabb verziók, valamint a Microsoft Internet Explorer 4.0 és az ennél újabb verziójú web böngészők támogatják. Ugyanazon az oldalon egyidejűleg használhatjuk a CSS stílusokat, a HTML stílusokat, valamint a manuális HTML formázást is.

Lecke

Szöveg formázása Szöveg hozzáadása dokumentumhoz Különbözőképpen adhatunk szöveget Dreamweaver dokumentumhoz. Lehet úgy (előző lecke), hogy közvetlenül a dokumentumablakba gépeljük be a szöveget, vagy pedig egy másik dokumentumból importáljuk, vagy vágjuk ki és illesztjük be. A szöveg beillesztése más alkalmazásból: Nyissuk meg a dokumentumot. Jelöljük ki a szöveget. Másoljuk át a vágólapra. Váltsunk Dreamweaver-re, és helyezzük a beszúrási pontot a megfelelő helyre. A beillesztés az Edit>Paste (Szerkesztés>Beillesztés) parancssoron keresztül történik. A Dreamweaver nem őrzi meg az eredeti programban alkalmazott szövegformázást, viszont a sortörések változatlanok maradnak.

Szóköz karakterek közé történő beszúrás: A HTML kód csak egy szóközt szúr be az egyes karakterek közé. Ha még egy szóközt szeretnénk dokumentumunkba beszúrni, egy egyesítő szóközt kell beillesztenünk. Azt is beállíthatjuk, hogy a dokumentumunkba automatikusan kerüljenek be az egyesítő szóközök. Ennek a beállításához kattintsunk az Edit>Preferences (Szerkesztés>Beállítások) menüpontra. Térköz hozzáadása bekezdések közé A Dreamweaver nagyon hasonlóan működik a legtöbb szövegszerkesztő alkalmazáshoz: új bekezdéshez elég megnyomni az Enter billentyűt. A Web browser-ek automatikusan egy üres sort szúrnak be két paragrafus közé. A sortörés beszúrása lehetővé teszi azt, hogy csak egyetlen sorral lejjebb kerüljön az új bekezdés. Nyomjuk meg az Enter-t, hogy a sor elejére kerüljünk. Sortörés beszúrását az alábbi műveletek révén érhetjük el: Nyomjuk le a Shift+Enter billentyűkombinációt Az Insert (Beszúró) sávon válasszuk ki a Characters (Karakterek) csoportból a Line Break (Sortörés) ikont. (79. ábra) Menjünk végig az Insert>HTML>Special Characters (Beillesztés>Speciális karakterek) parancssoron és próbáljuk ki. (80. ábra)

79. ábra

80. ábra Mint ahogyan azt már elmondtuk, szövegformázáshoz használhatunk CSS stílust, vagy külön-külön is beszúrhatjuk és megformázhatjuk a szöveget. Ha a második megoldást választjuk, mondjuk kis méretű szövegek beszúrásakor, használjuk a Properties (Tulajdonságok) sávot.

Feladat: A létrehozott navigátor.htm oldalunkra illesszünk be legalább 2 képet, (logo.gif, iec.gif - érdemes a képekhez leírást, esetleg hosszú leírást adni). Az egyes képekhez legalább egy-egy mondatot is írjuk. Nézzük meg weboldalunkat az Fl2 billentyű segítségével.(81. ábra)

81. ábra Természetesen a már tanultak felhasználásával további információkkal és képekkel is elláthatjuk az oldalunkat. A következő fejezetben ezzel a weboldalunkkal fogunk dolgozni, újabb lehetőségeket ismerünk meg.

Lecke Hivatkozás (Link) létrehozása Miután létrehoztuk a navigátor.htm nevű első oldalt, azt kell elérnünk, hogy ha az egérrel a honlap egyes szponzoraira kattintunk, megnyíljanak például az adott céget leíró oldalak. Jelöljük ki az első képet navigátor.htm oldalunkon és azt látjuk, hogy a Properties (Tulajdonságok) sávon beállíthatunk más oldalakra mutató hivatkozásokat is. A 82. ábrán a Link (Hivatkozás) mezőnél egy mappa rajzát láthatjuk.

82. ábra

Ha erre rákattintunk, megnyílik az az ablak, amelyben kijelölhetjük azt a htm fájl-t, amit a kérdéses objektumhoz akarunk csatolni (83. ábra).

83. ábra Ugyanezen a sávon találjuk a Target (Cél) mezőt is, ahol oldalunk címét állíthatjuk be (lásd a 4. fejezet - 1. lecke), jelöljük ki a _blank-et. A linkeket, amiket létrehoztunk, relatív linknek hívjuk, mivel saját mappára, vagy webhelyre vonatkoznak. Most próbáljuk ki a másik képre is ezt a műveletsort.

Lecke Relatív és Abszolút linkek Az előző Fejezetben mappánkon belül hoztunk létre belső linkeket, ezt követően pedig további oldalakat fogunk létrehozni és azokat mind a honlapunkhoz kapcsolni. A linkeket, amiket létrehoztunk, relatív linkeknek hívjuk, mivel saját mappára, vagy webhelyre vonatkoznak. Ha azt szeretnénk, hogy közvetlenül a navigator.htm oldalunkról a felhasználó kapcsolatba tudjon lépni a céggel, vagy pedig a mi leírást tartalmazó oldalunkról a felhasználó letölthesse a cég oldaláról az információkat, abszolút linket kell létrehoznunk. Ezt azért hívják így, mert egy olyan oldalhoz kapcsolódik, ami nem a mi webhelyünkön található. Tehát nem lesz elég csupán az oldal nevét beírni, hanem mivel egy külső webhelyről van szó, a teljes URL-t be kell írnunk. (Például: http://www.iecinfo.hu ez egy abszolút link) Nyissuk meg a navigator.htm oldalunkat. (84. ábra)

84. ábra Az iecinfo kifejezéshez egy abszolút linket akarunk társítani. Ez a link az IEC Kft weboldalához visz majd, amelynek címe: http://www.iecinfo.hu Jelöljük ki azt a szöveget, amelyikhez a hivatkozást akarjunk társítani. Ezután Properties panelen a Link (Hivatkozás) szó mellé írjuk be a teljes URL-t, a http://-vel együtt. (85. ábra)

85. ábra

És már be is illesztettünk egy abszolút linket. Minden alkalommal, amikor a feliratra kattintunk, a gyártó cég weboldalára visz miket a hivatkozás. Próbáljuk ki az F12 billentyűvel.

Lecke Képek leképezése Miután létrehoztuk azt az oldalt, ami a cégekről nyújt további információt, most hozzuk létre a szolgáltatásokkal kapcsolatos oldalt is. Ezzel egy olyan oldal fog megnyílni a felhasználó számára, ami Magyarország térképét tartalmazza: ezen be lesznek jelölve a különböző kirendeltségek, és amikor a felhasználó rákattint egy kirendeltségre, a kirendeltséghez tartozó azon városok listája jelenik meg előtte, ahol indulnak képzések. Hozzuk létre az iskolák.htm oldalt a szokásos File>New (File>Új) stb. eljárással. Mentsük el a fájl-t az iskolák mappába>iskolák néven és alkalmazzuk rajta a stílusokat. Így, hogy egyszer már létrehoztuk azokat, segítségükkel könnyen és hatékonyan valósíthatunk meg egységes stílusú weboldalakat. Magyarország minden kirendeltsége számára külön html oldalt kell készítenünk (kirendeltségek: Szeged, Bp, Győr). Kezdjük a szegedi kirendeltséggel.

Azt tanácsoljuk, hozzunk létre az „Én webhelyem" könyvtáron belül egy kirendeltségek nevű alkönyvtárat, ahová majd az egyes kirendeltségekre vonatkozó oldalakat fogjuk elmenteni. Egy másik stratégiánk pedig az, hogy az iskolák.htm oldalt osszuk két frame (keret) -re, úgy, hogy a térkép mindig a bal oldalon legyen és minden alkalommal, amikor másik kirendeltségre megyünk rá, a jobb oldalon a leírás jelenjen meg (86.ábra).

86. ábra A frame-ekre (keretekre) osztott oldal elkészítésének módját a 3. fejezetben találjuk. Miután felosztottuk oldalunkat, a bal oldali részbe illesszük be Magyarország térképünket: magyarország.gif (a térképeket az oktató Cd-n megtaláljuk, de érdemes átmásolni a winchesterünkre, a képek mappán belül hozzunk létre egy térképek mappát és másoljuk ide a képeket). (87. ábra) Mentsük el az oldalt és zárjuk be.

87. ábra Hozzuk most létre a szegedi kirendeltségre vonatkozó HTML oldalt a File>New (File>Új) stb. parancssoron keresztül. Osszuk fel két frame-re. A bal oldaliba szúrjuk be a képek mappából a szegedszámtech.gif térképet, a jobboldali keretbe soroljunk fel néhány olyan iskolát, amely a szegedi kirendeltséghez tartozik. (88. Ábra)

88. ábra

Mentsük el ezt az oldalt a kirendeltségek mappába szegedi néven. Az oldalunkat úgy hozzuk létre, hogy oda esetleg majd táblázatokat illesztünk be, amiben aztán szépen elrendezhetjük a szükséges adatokat. Miután ez kész van, menjünk vissza az iskolák.htm oldalra és kezdjük el térképünk letérképezését. Jelöljük ki Magyarország térképét és menjünk a Properties>Map (Beállítások>Térkép) pontra. A Tulajdonságok sávon 3 lehetőség közül választhatunk: kör alakú, szögletes vagy szabadkézi (89. ábra). Mi ez utóbbit fogjuk választani azért, hogy a határokat ne kényszerítsük be szabályos alakzatba.

89. ábra Jelöljük ki a szegedi kirendeltséget (magát Szegedet) (90. ábra) a Tulajdonságok sávon és az egérrel kattintsunk a Hivatkozás mellé.

90. ábra A 91. ábrán látható ablak jelenik meg előttünk.

91. ábra Jelöljük ki a Kirendeltségek mappát, majd magát a kirendeltséget, ez esetben Szegedet (szeged l). Kattintsunk az OK-ra.

Célnak (Target) adjuk a mainframe-et (gépeljük be) úgy, hogy a leírást tartalmazó oldal a jobb oldalon helyezkedjen el. Próbáljuk ki, hogy néz ki most a weboldalunk (F12). (92. 93. ábra)

92. ábra

93. ábra

Lecke Térképek és Rétegek Most nézzünk meg egy olyan módszert, amivel ahelyett, hogy a kirendeltségek oldalain jelenítenénk meg az összes iskolát, azok a kirendeltség alapján jelenítődnek meg. Például, ha Szeged-re kattintunk, egy olyan réteg (szint) jelenik meg, ami a szegedi kirendeltség iskoláinak listáját jeleníti meg. Így sokkal szebb lesz oldalunk. Nyissuk meg az előzően létrehozott szeged.htm oldalt és töröljük ki a korábban beírt iskolák listáját. Kezdjük a Szeged szint létrehozásával, ami a szegedi kirendeltség iskoláinak leírását fogja tartalmazni. Insert>Layout Objects>Ap div Helyezzük a térkép alá a 94. ábrán látható módon.

94. ábra A Properties (Tulajdonságok) sávon az CSS-P Elmenthez írjuk be „Szeged", ez lesz majd a szint neve. A táblacsoport AP Elements menüben a megjelenik a tervezőablak és láthatjuk a réteg (szint) hozzáadását (95.ábra).

95. ábra

Fejezzük be a réteget (szintet) a kirendeltség adatainak beírásával. Hátteret, vagy stílust is rendelhetünk hozzá. A célunk az, hogy amikor egy látogató a térképen Szegedre kattint, a Szeged réteg (szint) jelenjen meg. Most állítsuk be azokat a „viselkedéseket", amelyekkel az aktív pontoknak kell rendelkezniük a Szeged térképén. Viselkedés: a viselkedések lehető teszik, hogy weboldalainkon megvalósítsuk az interaktivitást. Ez általánosságban JavaScript programozást igényelne, de a Dreamweaver elvégzi helyettünk a programozási munkát. A viselkedések lehető teszik, hogy reagáljunk az egérkattintásokra, a weblap betöltésére, vagy az egérmutató mozgatására. A viselkedés tehát valójában egy művelet, amelyet egy esemény vált ki. Viselkedés = Esemény + Művelet Válasszuk ki a Window>Behaviors (Szerkesztés>Viselkedés) táblacsoportot és az egérrel kattintsunk a + jelre. (96. ábra)

96. ábra

Ezután az alábbi menü jelenik meg, amelyben a ShowHide Elements pontot kell kiválasztanunk. (97. ábra)

97. ábra Ezután a 98. ábrán látható ablak jelenik meg.

98. ábra Minthogy Szeged aktív pontján dolgozunk, jelöljük ki Szeged-t, majd a Show (Megmutat) -t és kattintsunk az OKra. Az onMouseOver eseménynek a Réteg (Szint) Mutatása (Szeged) tevékenység felel meg. Adjunk hozzá egy másik tulajdonságot is, vagyis amikor az egér mutatója a Szeged aktív pontról elmozdul, a szint tűnjön el.

Ez alkalommal a +-ra kell kattintani a Show-Hide Elements (Szintek mutatása-elrejtése) ablakban, ismételjük meg a korábban már elvégzett műveletet, de most a Szeged Szint Hide (Elrejtés)-re kattintsunk. A Design táblában hozzáadódik ez a viselkedés, azonban meg kell változtatnunk a cselekményt meghatározó eseményt. Először nézzük meg, hogy melyik böngésző van beállítva. A második viselkedésen állva, a +-ra kattintva a Show Events For menüben beállíthatjuk a böngésző típusát (legyen pl: HTML 4.01). Ezután, kattintsunk a lefelé mutató nyílra és jelöljük ki az onMouseOut pontot. Az eredmény leellenőrzéséhez nézzük meg a böngészőben megjelenített előzetes képet

Az eredmény nem egészen az, amire gondoltunk. Végül is, még csak most tanultuk meg, hogyan kell tulajdonságokat beállítani. Az egészet azonban optimalizálnunk kell.

Lecke Optimalizálás Még egy kis finomítás itt-ott és a tulajdonságok tökéletesek lesznek. A böngésző megnyitásakor a két réteg (szint) már látható a Web oldalon. A hatás jobb lesz, ha az oldal megnyitásakor a két réteg (szint) el van még rejtve, és csak akkor jelenik meg, ha az egér mutatója az aktív pontok fölé ér. Ezenkívül, ha egymás fölött helyezkednek el, a Web lapon váltakozva, de ugyanabban a pozícióban jelennek meg. Az egymás fölé helyezésnek két módja van: a manuális módszer (a pozíció beszúrásával), ami lehetővé teszi, hogy az egérgombot lenyomva egymás fölé húzzuk a rétegeket (szinteket). Pontosabb eredményt érünk viszont el a rácsvonalak használatával View>Grid>Show Grid (Megjelenítés>Rácsvonalak>Rácsvonalak ráhelyezése). A második módszer abból áll, hogy kiválasztjuk az Első layert (réteget), oda visszük, ahova akarjuk, majd a Properties (Tulajdonságok) sávon megtekintjük azt a pozíciót, ahová helyeztük (a bal, illetve a felső oldaltól számítva hány pixel van).

Jelöljük ki a másik réteget (szintet) és adjuk neki ugyanazt a pozíciót. Minthogy a rétegek (szintek) most egymáson helyezkednek el, a kijelölésükhöz használjuk a táblacsoport Layers (Szintek) sáv-ját. Most pedig el kell rejtenünk a rétegeket (szinteket). Kattintsunk az első rétegre (szintre) és a Properties (Tulajdonságok) sávon a Vis (Láthatóság) mezőben válasszuk ki a Hidden (Rejtett) szót a szintek elrejtéséhez. A Szintek ablakban kattintsunk a második rétegre (szintre) és ismételjük meg a műveletet. Mentsünk megint, majd nézzük meg az előzetes képet.

Minthogy iskolánknak nincs képzése Somogy megyében, készíthetünk egy erről szóló pop-up üzenetet is.(100. ábra)

100. ábra

Hozzuk létre, jelöljük ki Somogy megye területét, majd menjünk a Tag Inspector>Behaviors (Viselkedés) táblacsoportot és az egérrel kattintsunk a + jelre és ott jelöljük ki a Popup Message-et. (101. ábra)

101. ábra A 102. ábrán látható ablak fog megjelenni, amibe üzenetünket beírhatjuk. Mi a következőt írjuk be: „Sajnos Somogy megyében nem találhatók iskoláink, kérjük, nézze meg újra a lefedettségünket!"

102. ábra

Állítsuk be az Onclick működést, s így, amikor valaki Somogy megye területére kattint, a 103. ábrán látható Popup párbeszédablak jelenik meg.

103. ábra

Lecke Rollover A weboldalon beállítható, hogy egy esemény alapján (egér áthaladása aktív terület fölött) meghatározott információk (Szintek) jelennek meg a terület függvényében. Most azt nézzük meg, hogy hogyan kell olyan effekteket létrehozni, ahol a képek megváltoznak az egérkurzor áthaladására. A webfelület tervezésben az egyik legnagyobb kihívás az, hogy olyan grafikus objektumokat találjanak ki, amelyek egyértelműen közlik a felhasználóval, hogy hogyan navigáljunk egy webhelyen belül. A rolloverek (váltóképek), attól függően, hogy a felhasználó éppen hol áll az egérrel, gyakran változtatják a külsejüket, éppen ezért fantasztikus vizuális hatást érhetünk el velük. Olyan vizuális effektusok ezek, amelyek rögtön a felhasználó értésére adják, ha egy képnek speciális jelentése van, például, hogy egy linkről van szó. Mi képeket szeretnénk beszúrni úgy, hogy azok egyfajta navigációs sávként működjenek.

Egyszerű szöveg helyett olyan képszerkesztő programok által készített feliratokat fogunk beszúrni, amelyek képnek minősülnek és különböző grafikai effektekkel tehetjük őket igazán széppé. A feladat gyakorlásához használhatjuk, a már korábban elkészített navigátor.htm oldalunkat (az IEC Kft. oldalára már van hivatkozásunk, de bővíthetjük ezt az oldalt rolloverekkel is).(104. ábra)

104. ábra Vegyük például a konfigurációk linket. Készíthetünk képet Photoshop-ban, vagy Psp-ben „konfiguráció" felirattal, egy másik, módosított változatát is létrehozzuk esetleg más színekkel, vagy más grafikai effektekkel. Használhatjuk az Oktató Cd-ről is a konfiguráció és konfiguráció 1 képet is. Az első kép (rózsa) a webhely megnyitásakor fog megjelenni és másik kép (rózsa1) pedig az

OnMouseOver esemény hatására jelenik meg, felváltva az előző képet. Rollover kép létrehozása: a dokumentumablakban vigyük a kurzort abba a pozícióba, ahol a rollovert szeretnénk megjeleníteni, majd az Insert (Beszúrás) menüben jelöljük ki az Image Objects>Rolover Image (Képobjektum>Rollover kép) pontot. (105. ábra)

105. ábra Az Insert Rollover Image (Rollover kép beszúrása) párbeszédablak jelenik meg. (106. ábra)

106. ábra

Az Image Name (Kép neve) szövegdobozba írjunk be egy nevet a rollover kép számára. Az Original Image (Eredeti kép) szövegdobozba jelöljük meg azt a képet, ami az oldal letöltése után jelenik meg. Kattintsunk a Browse... (Tallózás...)-ra, majd a képek mappájából jelöljük ki a Rózsa.jpg fájl-t. (107. ábra)

107. ábra A Rollover Image szövegdobozba azt a képet jelöljük meg, ami akkor jelenik meg, amikor az egérkurzor az eredeti kép fölé ér. Kattintsunk a Browse... (Tallózás...)-ra, és jelöljük ki a rózsa1.jpg fájl-t. Ha a browser átmeneti tárolójába szeretnénk letölteni a képeket, hogy amikor a felhasználó a kurzort a kép fölé viszi, ne kelljen sokat várnia a megjelenítésre, kapcsoljuk be a Preload Rollover Image (Rollover kép átmeneti tárolóba töltése) jelölőnégyzetet. Alternate Text (Alternatív szöveg beszúrása): hozzáférhetőség és a screen reader számára fontos.

a

A When Clicked, Go to URL (Klick után URL-hez való hozzáférés): szövegdobozba írjuk be a fájl elérési utat, vagy kattintsunk a Browse... (Tallózás...)- ra és válasszuk ki azt a fájlt, amit akkor akarunk megjeleníteni, amikor a felhasználó a rollover képre kattint. Ahol nincs hivatkozás beállítva, oda automatikusan egy ún. nullhivatkozás kerül (#) HTML forráskódban, amihez a rollover viselkedését társítjuk. Ha kitöröljük a nullhivatkozást, a rollover kép nem működik. Kattintsunk az OK-ra, majd a böngészőben megtekinthetjük az eredeti képet. (108. ábra)

108. ábra

Ezek a képek az egér áthaladásakor a 109. ábrán látható módon alakulnak át.

109. ábra

Lecke Pop-up menü beszúrása Miután beszúrtuk a rózsa rollover képünket, azt szeretnénk, hogy amikor rákattintunk az egérrel, megjelennének a színek, például hogy a rózsa vörös, vagy sárga.

Tehát azt akarjuk elérni, hogy amikor kattintunk az egérrel, egy olyan menü jelenjen meg, amelyikből megtudhatjuk, hogy a rózsa milyen fajta. Az eredmény még jobb lesz, ha ezt a menüt Flash-ben készítjük el. Először azonban, hogy működésüket jobban megértsük, nézzük meg egy igen egyszerű módját az elkészítésnek. Jelöljük ki a korábban beszúrt rózsa képet. Menjünk a Tag Inspector (ha nincs akkor Window> Behaviors) táblacsoportba. Azt látjuk, hogy ott már két olyan „viselkedés" is található, ami a rollover képre vonatkozik. (110. ábra)

110. ábra Az OnmouseOut azt jelenti, hogy amikor az egérkurzor már nincs a képen, az eredeti kép jelenik meg újra. Az OnmouseOver pedig azt jelenti, hogy amikor az egérkurzor a kép fölé ér, az eredeti képet felváltja a második. Most még egy „viselkedést" szeretnénk társítani hozzá. Kattintsunk az Insert>Layout Objects>Spry Menu Bar gombra. (111. ábra) Az megjelenő panelon (112. ábra) meghatározhatjuk, hogy milyen menüt szeretnénk látni: Vertical (Függőleges), vagy Horizontal (Vízszintes) menüt. Mi a Függőleges menü-t választjuk.

111. ábra

112. ábra A szokásos Properties menüben a Text (Szöveg): pontba írjuk be a megjeleníttetni kívánt szavakat. Vagyis írjuk be, hogy „Vörös", és hogy „Sárga" (a szöveg bevitelhez- és eltávolításához kattintsunk a + jelre) 113.ábra.

113.ábra További gombok jelennek meg, amelyek segítségével almenüket hozhatunk létre. A Link (Hivatkozás): ablakba azt a fájl-hivatkozást írhatjuk be, amelyikre utalni akarunk a HTML oldal megnyitásakor, és amelyiket a korábban elmondottak alapján fogunk létrehozni. Menünk megformázásához választhatunk betűtípust, illetve más beállításokat is. Ha szeretnénk még újabb menüpontot létrehozni ezen menün belül akkor kattintsunk az aktuális (Új) menüre és a jobb oldalon adjunk hozzá egy hossz menüpontot.

114. ábra A browserben megnézhetjük az előzetes képet. (115. ábra)

115. ábra Láthatjuk, hogy egy olyan menü jelent meg, amelyikben további pontok közül választhatunk.

Lecke Navigációs sáv beszúrása Előzőleg azt néztük meg, hogy hogyan kell rollover képet beszúrni, aztán pedig azt, hogy képhez hogyan kell pop-up menüt társítani. Most pedig a baloldalon található összes kifejezéshez szeretnénk navigációs sávot beszúrni. Ez egy olya váltóképet tartalmazó böngésző sáv, melynek elemi lenyomott gomb állapottal is rendelkeznek. Ezt a Dreamweaver Navigation Bar objektumának alkalmazásával valósíthatjuk meg. A gomb lenyomását egy, az eredetitől kissé eltérő képpel érzékeltethetjük. Három gombállapotról beszélhetünk: az alapértelmezett állapot a „fel", a „le" állapot pedig a gomb lenyomásakor jelentkezik, többnyire azt a hatást keltve, mintha fizikailag is lenyomtuk volna. A „fölötte" állapot akkor jelenik meg, amikor a felhasználó áthúzza az egér mutatót a gomb felett..

Mindenekelőtt képszerkesztő programmal létre hozhatjuk a szükséges képeket (az Oktató Cd-n is találhatunk felhasználható képeket: cégről - dellhattér.jpg, konfigurációkról pc.jpg, pc 1.jpg). Helyezzünk el a bal oldalon legalább két kifejezést: Vállalat, Konfigurációk Menjünk az Insert>Image Objects>Navigation Bar (Beszúrás>Képobjektumok>Navigációs sáv) menübe. (116. ábra)

116. ábra Az itt megnyíló ablakba kell az első „gomb" nevét megadnunk, ha ezt kihagyjuk akkor a Dreamweaver a következő lépésben automatikusan felhasználja az első képfájl nevét e célra. (117. ábra)

117. ábra Vállalat Az Up Image (fel-felső kép) dobozban válasszuk ki azt a képet, amit az oldal megjelenítésekor akarunk megjeleníttetni (pl: Logodell.gif), míg az Over Image („fölötte"Rollover kép) dobozban a rollover képet válasszuk ki (pl: dellhatter.jpg). A Down Image (le-alsó kép) szövegdobozban kattintsunk a Browse.. (Tallózás...)-ra és jelöljük ki azt a képet, amit akkor akarunk megjeleníttetni, amikor a felhasználó az elemre kattint. (pl: pc.jpg) Az Over While Down Image (fölötte lenyomott állapotbanalsó rollover kép) szövegdobozban kattintsunk a Browse.. (Tallózás...)-ra és jelöljük ki azt a képet, amit akkor akarunk megjeleníttetni, amikor a felhasználó az alsó kép fölé viszi az egérkurzort (pl: pc1.jpg)

Az Alternate Text (Alternatív szöveg): mezőbe írhatunk leírást az elemről. Az alternatív szöveg a böngészőben a kép helyett jelenik meg azokban az esetekben, amikor egy browser nem támogatja a grafikus módot, vagy pedig a képek kézi letöltésére vannak konfigurálva. A screen reader-ek leolvassák az alternatív szöveget és néhány böngésző meg is jeleníti azokat, amikor a felhasználó a navigációs sáv eleme fölé viszi az egérkurzort. A When Clicked, Go To URL (Klick után URL-hez való hozzáférés): megadhatunk egy hivatkozást, vagy megkereshetjük a kívánt weblapot. A mező mellet lenyíló menüben beirányozhatunk egy kiválasztott keretet is. Ha azt szeretnénk, hogy a böngésző automatikusan betöltse a képeket, kapcsoljuk be a Preload Images jelölőnégyzetet. Ha pedig azt akarjuk, hogy a „gomb" kezdetben lenyomott állapotban jelenjen meg, kapcsoljuk be a Show Down Initially lehetőséget. (118. ábra)

118. ábra

Az eredmény akkor látványos, ha a képek mérete azonos, ezért most az első kép méretét egy kicsit változtassuk meg. (119. ábra) Természetesen ez csak gyakorlás, amikor a saját weboldalunkon készítünk böngészősávot váltóképekkel mindenképpen törekedjünk az azonos méretű képek alkalmazására!

119. ábra A Konfigurációk szó beszúrásához kattintsunk a + gombra. Végezzük el a beállításokat. A „gombok" sorrendjét a Nav Bar Elements párbeszédablak feletti nyilakkal módosíthatjuk, törlésük a mínusz gombbal lehetséges.

Ezt az oldalt mentsük el index.htm néven.

Lecke Reklámcsík létrehozása Azt szeretnénk, ha weboldalunk megnyitásakor egy bizonyos terméket reklámozó reklámcsík jelenjen meg. Azt is szeretnénk, ha ez az ablak meghatározott tulajdonságokkal rendelkezne: legyen kicsi és készüljön Macromedia Flash-ben. Nyissuk meg az előző leckében elmentett index.htm oldalt és menjünk a „viselkedések" pontra Window>Behaviors. Kattintsunk a + gombra és a megjelenő menüből jelöljük ki az Open Browser Window (Böngésző ablak megnyitása)-t (123. ábra).

123. ábra

A 124. ábrán látható ablak jelenik meg.

124. ábra A Megjelenítendő URL melletti mezőbe létező címet is beírhatunk, de a mi esetünkben egy Flash kisfilmet akarunk megjeleníteni, tehát az Oktató Cd-ről az animációk közül az intro.swf fájl-t válasszuk ki. (125. ábra)

125. ábra

Dokumentumunk magasságát és szélességét is be tudjuk állítani: vegyük mindkét értéket 200-ra. Ablakunk olyan további tulajdonságait is beállíthatjuk, mint az eszköztár, állapotsor, az átméretezéshez szükséges fogók, stb. Gyakorlatilag mindent beállíthatunk rajta, amit egy klasszikus Windows ablakban beállíthatunk. A műveletsor végén kattintsunk az OK-ra. Azt látjuk, hogy az onload tevékenység viselkedéseiben (ami a kérdéses oldal letöltését jelenti) automatikusan indul az animációnkat tartalmazó ablak.

Lecke Meta tag-ek Webhelyünk publikálásakor célunk az, hogy a felhasználók az egyes keresőprogramokon keresztül megnézhessenek bennünket. Ehhez bizonyos információkat kell a HTML tagjébe beillesztenünk. Ezeket a járulékos információkat a böngésző ablaka nem jeleníti meg, s ezeket metatag-eknek nevezzük: ezek olyan rövid tartalmi leírások és kulcsszavak, amelyek segítséget nyújtanak a keresőprogramoknak a helyes katalogizálásban és az oldalak keresésében. Másrészről pedig regisztráltatnunk kell magunkat keresőprogramoknál, ami, bár fizetős, szélesebb körben és az elsők között jeleníti meg webhelyünk tartalmát. Menjünk az Insert>HTML>Head Tags (Beszúrás>HTML> Head Tag) menübe és válasszuk ki a Meta pontot. (126. ábra)

126. ábra A 127. ábrán látható ablak jelenik meg.

127. ábra A Head tartalmazza a meta elemeket, melyek az aktuális oldalon rögzítenek információkat, például a karakterkódolást, a szerzőt, a copyrigh-ot és a kulcsszavakat. Menjünk a Kategóriába és írjuk be: infosystempoint, üzlet, online, informatikai tanfolyamon résztvevő tanulók által létrehozott oldal. Kattintsunk az OK-ra.

Menjünk a Insert>Html>Head Tags>Description menübe. Szúrjuk be webhelyünk leírását. Írjuk be: online PC eladás, alaplapok, processzorok, nyomtatók, stb. Ezek az információk fognak webhelyünk leírásában megjelenni, amikor a keresőprogram kilistázza azt. Elemezzük az így létrehozott HTML kódot. Kattintsunk a Megjelenítés menüpontra, majd a Kód nézetre, ahol elemezhetjük a HTML kódot.

Lecke o

Űrlapok beszúrása Ezen a fejezetben a célunk az, hogy megnézzük, hogyan tud a felhasználó kapcsolatba lépni velünk, vagyis írhasson nekünk, információt kérhessen, vagy egyenesen rendeléseket adjon le. A Dreamweaver lehetővé teszi interaktív űrlapok beszúrását. Az űrlapon megkérdezhetjük a felhasználó nevét és e-mail címét, visszajelzést kaphatunk weboldalunkról. Kezdjük az info.htm oldal létrehozásával. A szokásos módon. Az űrlap egy tároló elem, amely további objektumokat tartalmaz. Az űrlap mag láthatatlan. Ha szeretnénk az űrlapot láthatóvá tenni, az Edit>Preferences menüben az Invisible Elements (Láthatatlan elemek) csoportban jelöljük be a Form Delimiter (Űrlaphatároló) lehetőséget. (130. ábra)

130. ábra Űrlap létrehozásában az Insert>Forms (Beszúró sáv>Űrlapok) pontja segít bennünket. (131. ábra)

131. ábra

A Forms (Űrlap) lécen az alábbi gombokat találjuk: Form (Űrlap): dokumentumunkba űrlapot illeszt be. A Dreamweaver az eredeti HTML kódba nyitó és záró form tag-eket szúr be. Az adatok helyes feldolgozásához minden böngészőben az űrlaphoz tartozó objektumoknak (pl. szövegmezők, gombok, stb.) szerepelniük kell a form tag-ben. Text Field (Szövegmező): az űrlapba szövegmezőt illeszt be. A szövegmezők mind betűrendes, mind számrendes karaktereket is tartalmazhatnak. A beszúrt szöveget megjeleníthetjük egy sorban, több sorban, vagy pont, illetve csillag formában is (ez utóbbiak a jelszó védelmének érdekében). Hidden Field (Rejtett mező): olyan mezőt szúr be a dokumentumba, amely a felhasználó adatait rögzíti. A rejtett mezők lehetővé teszik a felhasználó által bevitt információk tárolását, mint például a név, e-mail cím, vásárlási szokások. Ezeket az információkat aztán a felhasználó következő látogatásakor felhasználhatja. Checkbox (Jelölő négyzet): jelölő négyzetet szúr be az űrlapba. A jelölő négyzetek használatakor a felhasználó egy csoport egymást kölcsönösen nem kizáró opcióból választhat néhányat, tehát több választás is megengedett. Radio Button (Opciós képernyőgomb): az űrlapba opciós képernyőgombot szúr be. Ebben az esetben egy csoport egymást kölcsönösen kizáró opcióról van szó, ha tehát a felhasználó az egyikre rákattint, a többi kijelölése törlődik. A felhasználó például az Igen és a Nem közül választhat.

Radio Group (Opciós képernyőgomb csoport): egy sor opciós képernyőgombot szúr be. List/Menu (Lista/Menü): a felhasználó által megválasztható opciólista létrehozását teszi lehetővé. A Lista egy sor olyan értéket jelenít meg, amiből többet is kiválaszthatunk. A Menü opció azonban az értékeket egy olyan előugró menüben jeleníti meg, amely csak egy választást engedélyez. Jump Menu (Hivatkozás menü): navigációs menüt vagy listát szúr be. A hivatkozás menük azt teszik lehetővé, hogy olyan menüt szúrjunk be, amelyikben minden választás egy meghatározott dokumentumra, vagy fájlra visz minket. Image Field (Kép mező): segítségével képet szúrhatunk az űrlapba. A kép mezők grafikus képernyőgombként is működhetnek, amikre rákattinthatunk. File Field (Fájl mező): a dokumentumba üres szövegmezőt és egy Tallózás... gombot szúr be. A fájl mezők lehetővé teszik a merevlemezen a kívánt fájl-ok meghatározását és mint adatokat, az űrlapba töltésüket. Button (Képernyőgomb): az űrlapba képernyőgombot szúr be. Amikor rákattintunk, a gombok olyan műveleteket hajtanak végre mint a küldés, vagy az űrlap alaphelyzetbe állítása. Testreszabott címkét is specifikálhatunk, vagy használhatjuk az alapértelmezett címkéket is: „Küldés" vagy „Visszaállítás".

Lecke

Az Űrlap tulajdonságai A Dreamweaver Insert (Beszúrás) menüje lehetővé teszi számunkra, hogy űrlapokat hozzunk létre, és hogy olyan objektumokat adjunk hozzájuk, mint a szövegmezők, gombok, szövegdobozok, kiválasztógombok. Az űrlap dokumentumhoz való hozzáadásához vigyük a kurzort abba a pozícióba, ahová az űrlapot szeretnénk helyezni, aztán jelöljük ki az Insert>Form (Beszúrás>Űrlap) menüpontot, vagy jelöljük ki a Forms (Űrlapok) kategóriát az Insert (Beszúrás) sávon és kattintsunk az Form (Űrlap) ikonra. Ezzel be is szúrtunk egy űrlapot. A Szerkezeti nézet oldalon az űrlapokat piros szaggatott vonal jelöli (132. ábra). Ha ez nem így van, ellenőrizzük le, hogy az Edit>Preferences menüben az Invisible Elements (Láthatatlan elemek) csoportban a Form Delimiter (Űrlaphatároló) opció ki van-e jelölve.

132. ábra A Properties (Tulajdonságokat) megjelenítő ablakban a Form Id (Űrlap neve) mezőbe (133. ábra) írjunk be egy egyértelmű nevet űrlapunk számára.

133. ábra A név hozzáadása lehetővé teszi, hogy hivatkozzunk az űrlapra, vagy hogy script nyelvezetet adjunk hozzá, mint a JavaScript vagy a VBScript.

Ha a felhasználó nem rendel hozzá nevet, a program automatikusan a „form1" nevet adja neki, ahol az „1" egy olyan szám, amely 1-el nő minden parancs esetén. A Properties (Tulajdonságokat) megjelenítő ablak Action (Művelet) mezőjében specifikálhatjuk a dinamikus oldal elérési útját vagy az űrlap kidolgozásához használt script elérési útját. Az Action mezőbe beírhatjuk a teljes elérési utat is, vagy pedig rákattinthatunk a mappa ikonjára, ahol kiválaszthatjuk az alkalmazás oldalát vagy script-jét tartalmazó mappát. Dinamikus oldal esetén a kidolgozáshoz be kell illesztenünk a scrip-et (továbbfejlesztett opció, mely ismeri a web-re vonatkozó programozási nyelveket). A mi esetünkben azt szeretnénk, ha az űrlapot e-mail-en kapnánk meg, tehát a művelet mezőbe írjuk azt, hogy: mailto:cím@elektronikus posta

Lecke Szövegmezők és Kijelöléscsoportok Készítsünk egy olyan táblázatot, amelyben rendezetten megtaláljuk a különböző Űrlap objektumokat. Táblázat beszúrása: Az info.htm oldalon dolgozzunk, itt már van egy Űrlapunk beszúrva. Az Űrlapban állva tudjuk beszúrni a táblázatot, Insert>Table legyen 8 sor és 2 oszlop. Az első oszlop egyes soraiba írjuk be, hogy Vezetéknév, Keresztnév, Cím, stb, úgy, ahogyan azt a 134. ábrán is látjuk. A második oszlopban ellenben szöveges űrlap mezőket kell beszúrnunk, ami révén a felhasználó szöveget vihet be a mezőkbe. Állítsunk a kurzorunkat (beszúrási pont) az első sor második oszlopába, majd válasszuk ki az Insert>Forms sávon a Text Field parancsot (Beszúrás>Űrlap objektum>Szövegmező) (menüből: Insert>Form>Text Field).

134. ábra Újabb szövegmező elhelyezéséhez a beszúrási pontot a keresztnév melletti sávba helyezzük és az előző műveletet ismételjük meg. (135. -136. ábra) Az ügyfél típusánál majd kiválasztó gombot fogunk használni, ezért ezt hagyjuk ki.

135. ábra

136. ábra A dokumentumban megjelennek a szövegmezők, a Properties (Tulajdonságok) ablakban pedig a TextField (Szövegmező) pont. A Tulajdonságokat megjelenítő ablakban minden Szövegmező (TextField) mezőjébe írjunk be egy nevet. A névnek egyértelműen kell a szövegmezőt azonosítania, nem tartalmazhat szóközt és különleges karaktereket. Ellenben használhatjuk bármelyik alfanumerikus billentyűkombinációt és egy karakternyi aláhúzást is (_ ). A Szövegmezőhöz társított címke olyan változó név, amely a mező értékét memorizálja, vagyis azokat az adatokat, amelyek majd el lesznek küldve. Mi ezeket vezetéknévnek, keresztnévnek, címnek, stb.-nek nevezzük. (137. ábra) A Char Width (Karakterszélesség): mezőben végezzük el az alábbi műveletek egyikét: a szövegmező méretét és az egyszerre látható karakterek számát.

Állítsuk be a maximális szövegmező hosszúságot. Egy szövegmező maximális hosszúsága az a maximális karakterszám, ami a mezőben egy alkalommal megjeleníthető.

137. ábra Például, ha a Karakterszélességet-t 20-ra állítjuk, (ez egyébként az alapértelmezett beállítás is) és a felhasználó 100 karaktert visz be, ebből a százból csak 20 lesz megjeleníthető a szövegmezőben. Még ha a karakterek nem is jelenítődnek meg, az objektum mező felismeri őket, és el lesznek küldve feldolgozásra. Állítsuk be 20-ra a karaktermező szélességét. A Max Chars (Maximális karakterek száma): a mezőbe begépelhető karakterek számának felső korlátját adja meg. A mezőbe vigyük be azt a maximális értéket, amit a felhasználó begépelhet a szövegmezőbe (pl: 50). Egy szövegmező akár 32700 karaktert is tartalmazhat.

Type (Szövegmező típus): Egysoros szövegmezők, többsoros szövegmezők és jelszómezők lehetnek. Jelöljük ki az Single Line (Egysoros) -t, vagy a Password-t a létrehozandó szövegmező típusának specifikálásához. Létrehozhatunk Multi Line (Többsoros szövegmező) -t is, pl: a megjegyzéshez. A szövegmező már akkor is tartalmazhat szöveget, amikor az űrlap megjelenik. Segítségével utasításokat adhatunk a felhasználónak az űrlap kezelésére. Az információk szövegmezőben való megjelenítéséhez írjuk be a Properties (Tulajdonságok) -t megjelenítő ablak kit Val (Kezdeti érték) mezőjébe. A szöveg akkor fog az űrlapon megjelenni, amikor a felhasználó a böngészőben azt az első alkalommal letölti. Azt is meg lehet jelölni például, hogy a felhasználónak a mezőbe információkat kell beszúrnia, mint megjegyzés, vagy egy példa érték. Miután beszúrtuk a szükséges szavakat, azt is szeretnénk, ha a felhasználó közölné velünk, hogy cég-e, vagy magánszemély. Ebben az esetben egy olyan objektumot szúrunk be, ahol a felhasználó rákattinthat a megfelelő szóra. Ezt az információt az Ügyfél Típusa szövegmezőnél alkalmazzuk. Használjuk ehhez a Radio Group (Választócsoport) objektum beszúrását. Választócsoport objektum beszúrásához vigyük a kurzort az űrlap belsejébe és kattintsunk az Űrlap lapra, majd a

válasszuk az Insert>Forms (Beszúrás>Űrlap) sáv Radio Group (Választócsoport) objektumot. A Radio Group csoport párbeszédablak jelenik meg. (138. ábra)

138. ábra Adjuk meg a választó csoport nevét a Radio Group ablakban. Label (Címke): azt a címkét azonosítja, amelyik az oldalon kerül megjelenítésre. Value (Érték): a választáshoz társított érték. Amikor az adatok elküldésre kerülnek, megjelenik nekünk a kiválasztott érték. Vigyük be a Vállalatot, mint címkét és vállalat értéket. Vigyük be, hogy Magánszemély -t, mint a második gomb címkéje, és mint magánszemély értéket. A + és a - gombok segítségével növelhetjük, illetve csökkenthetjük a csoportban levő gombok számát.

Amikor kijelöljük valamelyik választógombot a tulajdonságvizsgálóban megadhatjuk, hogy a gomb bejelölt állapotban lesz-e amikor a felhasználó először tölti be a lapot: Checked/Unchecked. Az eredmény hasonló lesz a 139. ábrán láthatóakhoz.

139. ábra A választó gombok közül a felhasználó csak egyet jelölhet meg, ha viszont igen/nem jellegű válaszokat szeretnénk kapni a felhasználótól, akkor érdemes a jelölőnégyzeteket alkalmazni: A beszúrási pontot helyezzük arra a helyre, ahol a jelölőnégyzetet el akarjuk helyezni. Válasszuk a Forms lapon a Check Box (Jelölőnégyzet) objektumot. A tulajdonságvizsgálóban nevet adhatunk a jelölőnégyzetnek (Check Box), a Initial State (Megjelölt érték) mezőben beállíthatjuk, hogy milyen értéket képvisel a kipipált jelölőnégyzet.

Most nézzük meg weblapunkat (Fl2). (140. ábra)

140. ábra

Lecke Menü beszúrása Űrlapba Most azt szeretnénk, ha a felhasználó eldönthetné, hogy miről szeretne információt kapni. Egy olyan menüt készítünk, amiben megjelölhetjük azokat az adatokat, amelyeket meg szeretnénk kapni. Ehhez az Insert>Form>List/Menu (Beszúrás>Űrlap>Menü lista) objektum alkalmazása nyújt nekünk segítséget. Az oldalunkba ezzel egy menüt szúrtunk be. Szükségünk lesz egy új sorra a táblázatunkban, a baloldalon helyezzük el a szöveget (pl: Melyik termékünkről szeretne bővebb információt?). A jobb oldalon pedig szúrjuk be a menü űrlapot. (141. ábra)

141. ábra

A Properties (Tulajdonságvizsgáló) sávon adjunk nevet a listának. A Type (Típus) mezőből kiválaszthatjuk a List (Lista) lehetőséget. Itt további beállításokat tehetünk: Height (Magasság): beállíthatjuk, hogy hány elemet szeretnénk egyszerre látni. Ha a lista ennél több elemet tartalmaz a gördítősávok automatikusan megjelennek. Allow Multiple (Több elem kiválasztásának engedélyezése): a felhasználó több elemet is kiválaszthat a listából. Itt érdemes megjegyzésként tudatni a felhasználóval, hogy több elem kijelöléséhez a Ctrl billentyűt használhatja.(142. ábra)

142. ábra List Values: a listában szereplő értékeket adhatjuk meg: Item Label (Címke) -hez írjuk be azt, amit szeretnénk megjeleníteni (a felhasználó ezt látja, és ebből választhat) Value (Érték) -hez írjuk be a majdani választásnak megfelelő értéket (ez jut el a kiszolgálóhoz). (143. ábra)

143. ábra Nézzük meg újra weboldalunkat (F12). (144. ábra)

144. ábra Ezzel készen is vagyunk az űrlapunkkal, amit a felhasználó tetszése szerint el is küldhet a számunkra.

Lecke Gomb beszúrása űrlapba Az űrlapban található gombok az űrlap működését irányítják: Használhatóak a felhasználó részéről adatküldésre (Submit), mely adatok aztán feldolgozásra kerülnek Az űrlap eredeti helyzetbe való visszaállításához (Reset). Létezik általános gombtípus, amelyhez bármilyen viselkedést hozzárendelhetünk. Létezik a képes (Image) gomb, amely ugyanúgy viselkedik, mint a küldő gomb. A böngésző továbbítja a kiszolgálóhoz az űrlapon Nézzük meg, hogy hogyan kell gombokat beszúrni standard űrlapba. A standard űrlapgombok a böngészőben alapértelmezettek és a megjeleníteni kívánt szöveget tartalmazzák. A standard űrlapgombok általában a Küldés és a Visszaállítás címkéknek felelnek meg. Szöveggomb létrehozásához vigyük a kurzort az űrlap belsejébe (hozzunk létre neki egy sort a táblázatunkban) és válasszuk ki az Insert>Form Objects>Button (Beszúrás>

Űrlap objektum>Gomb) parancssort, vagy kattintsunk a Forms (Űrlap) panelon a Button (Gomb) ikonra. A Gomb űrlap objektumot beszúrtuk és ezt követően rögtön megjelenik a Tulajdonságokat megjelenítő ablak. (145. ábra)

145. ábra A Tulajdonságokat megjelenítő ablak Gomb neve mezőjébe beírhatunk egy nevet a gomb számára. Most hagyjuk meg a Submit (Küldés) nevet. Két fenntartott név létezik: Submit (Küldés): az űrlap adatait küldi feldolgozásra. Reset (Visszaállítás): az űrlap összes mezőjét visszaállítja az eredeti értékekre. Mivel ezek a nevek a programhoz rendeltek, nem változtathatunk rajtuk. Az Action (Tevékenység) részben válasszunk ki egy opciót a felkínált lehetőségek közül: Submit Form (Űrlap küldése): ezzel a script vagy a feldolgozó alkalmazásnak küldjük az űrlapot, amikor rákattintunk a gombra.

Reset Form (Űrlap visszaállítása): a gomb lenyomásával az űrlap visszakerül alapállapotba. None (Nincs): feldolgozó script alapján tevékenység aktiválásához ezt a gombot kell kiválasztani. Tevékenység specifikálásához használjuk, amit a Form tulajdonságai menüben jelölünk ki. A mi esetünkben a tevékenység: mailto:[email protected] Ha elektronikus levélben szeretnénk továbbítani az űrlap tartalmát, egyszerűen adjuk meg a gombhoz tartozó műveletben a címet. A cím elejére írjuk be a mailto kulcsszót (pl: mailto:[email protected]). Ezenkívül adjuk hozzá a

elemhez az ENCTYPE="text/plain" jellemzőt. Szúrjunk be egy másik gombot is és adjuk hozzá a Visszaállítás tulajdonságot. Ezzel az űrlap adatait töröljük, és alkalmassá tesszük az űrlapot új adatok bevitelére. Az eredményt a 146. ábrán tekinthetjük meg.

146. ábra

A böngészőben az előzetes képbe vigyük be az adatokat, majd kattintsunk a Küldés-re. Egy ablak jelenik meg, ami arról tájékoztat minket, hogy az adatlapot elküldhetjük. Ha az OK-ra kattintunk, az űrlap elmegy. Ha a levelező programba megyünk, láthatjuk, hogy a Kimenő üzenetek között van egy csatolt fájl-t tartalmazó üzenet, ami az általunk kiválasztott adatokat tartalmazza. A cím az, ami a Form tulajdonságaiban szerepel. Ha a Jegyzettömb-bel próbáljuk megnyitni a csatolt fájlt, a felhasználó által bevitt adatokat találjuk benne.

Lecke Webhely aktiválása Számos módosítás után végre eljutottunk arra a pontra, hogy munkánkat publikáljuk és eddigi erőfeszítéseink gyümölcsét „működésében" is megtekinthessük. Eddigi munkánk megjelenítéséhez webszerverre kell tennünk oldalainkat. A webszerver egy olyan személyi számítógép, ami folyamatos Internetes összeköttetésben van és a különböző weboldalak tartalmát mindenki számára elérhetővé teszi. Webszerverrel aligha rendelkezünk. A különböző szolgáltatók (provider) időnként ingyen helyet biztosítanak számunkra, ahol webhelyünket publikálhatjuk (Freeweb, Nexus stb), tehát az első lépés a webhely aktiválása lesz. A Freeweb: korlátlan teret bocsát rendelkezésre, valamint egyszerű on-line eszközöket a saját honlap létrehozásához. Tapasztalatlan közönség számára is megfelelő lehet. A Nexus: szolgáltatás, ingyenes webhelyet kínál és belső forrásokat az oldalak tartalom alapján történő katalogizálására. 20 MB tárhelyet bocsát rendelkezésre.

Menjünk mondjuk a http://freeweb.hu webhelyre és regisztráltassuk magunkat. (147. ábra)

147. ábra Lépésről-lépésre végezzük el az egyes műveleteket. (148. ábra)

148. ábra Regisztráció alatt adatokat kell megadnunk és a regisztráció

végén a szolgáltató webhelyet biztosít számunkra, valamint a csatlakozáshoz szükséges adatokat, úgymint a web cím, az ID, a Password, valamint az FTP (File Transfer Protocol) program konfigurációjának adatai. Minthogy ingyenes szolgáltatásról van szó, a címben szerepelni fog a vendéglátó szolgáltató neve is. Ha viszont fizetős szolgáltatást választunk, akkor olyan web domain-t vásárolunk, amelyben a szerződés tartama alatt kizárólagosságot élvezhetünk név fölött. Egy másik kisebb „vám", amit az ingyenes szolgáltatás miatt kell megfizetnünk az, az hogy oldalainkon reklámfeliratok fognak megjelenni. Gondoljuk át, hogy a publikálásnak melyik módját választjuk, mindenesetre gyakorlásképpen addig is aktiváljunk egy webhelyet és az FTP host-ra vonatkozó adatokat mentsük lemezre.

Lecke A Dreamweaver konfigurálása távoli kapcsolódáshoz Miután rendelkezünk a webhely publikálásához szükséges paraméterekkel, be kell állítanunk a Dreamweaver-t oldalaink továbbítására. A távoli webhely helyét a webhely tulajdonságai között állíthatjuk be. Menjünk a Site>Manage Sites...>kattintsunk duplán az Infosystempoint-ra (Webhely>Webhely kezelése). Megjelenik a webhelyhez tartozó Site Definition ablak. (149. ábra)

Kattintsunk a Basic lap, Next gombjára addig, amíg el nem érünk a Site Definition varázsló Sharing Files (Fájlmegosztás) részét. (150. ábra)

149. ábra

150. ábra A lenyíló listából választhatjuk ki, hogy milyen módszerrel szeretnénk feltölteni a fájlokat: FTP, Local/Network, RDS, SourceSafe Database, WebDAV. Ha a távoli webhely a vállalat belső hálózatán kapott helyet, akkor a Local/Network beállítást használjuk.

Mivel mi a webhelyet internetszolgáltatónál helyeztük el, ezért az FTP-t kell választanunk. A megjelenő ablakban el kell végeznünk a beállításokat: (151. ábra)

151. ábra Adjuk meg a kiszolgáló nevét a FTP Host mezőben. A cím általában ftp.tartománv.hu formát követi. Az FTP kiszolgáló címe alatt lévő szövegmezőben meg kell adnunk a könyvtár nevét, jelen esetben ez már adott. Szükségünk lesz az FTP kiszolgáló eléréséhez szükséges azonosítóra (választott felhasználó név) és jelszóra (a regisztrációra vonatkozó jelszó). A Test Connection (Kapcsolat ellenőrzése) gombbal ellenőrizhetjük, hogy helyesen adtuk-e meg az adatokat és tudunk-e kapcsolódni a kiszolgálóhoz. A műveletsor végén kattintsunk az Done-ra.

Lecke Adatátvitel A kapcsolat definiálása után most foglalkozzunk adataink webszerverre történő átvitelével. A Site táblán megtaláljuk a fájlok átviteléhez szükséges összes gombot. (152. ábra)

152. ábra Connects to remote hosts: az FTP kiszolgálóhoz kapcsolódhatunk. Ha helyi hálózattal dolgozunk a gomb mindig bekapcsolt állapotban van.

Refresh (Frissítés): frissíthetjük a helyi és távoli webhely ablakait. Ha nem jelöltük be a Refresh Local File List (Helyi fájllista automatikus frissítése és a Refresh Remote File List (Távoli fájllista automatikus frissítése) lehetőséget, akkor ezzel a gombbal kell frissíteni a listákat. Ha a távoli gépről szeretnénk fájlokat átmásolni saját gépünkre, használjuk a Get File(s) (Letöltés) gombot. Ha helyi gépről másolunk a távoli gépre, kattintsunk a Put File (s) (Feltöltés) gombra. Check Out File(s) (Elengedés) és a Check In (Zárolás) szolgáltatásaival valósíthatjuk meg, hogy egy fájlon egyszerre csak egy ember dolgozhasson. Ha zárolunk egy fájlt, senki nem írhatja felül, amíg el nem engedjük. A Dreamweaver megjelöli a zárolt fájlt, így mindig látható a zárolás. Expand to show local and remote sites : a Site tábla jobb szélén található, segítségével elérhetjük a Site ablakot. A Site menüben található Synchronize (Összehangolás) pont használat kényelmesebbé teszi a fájlok átvitelét. Megnézi, hogy a helyi (vagy távoli) fájl-e az újabb, így csak a szükséges fájlokat másolja át, és ezzel időt takarít meg. Kattintsunk a Site táblán az Expand/Collapse (Kibontás/összezárás) gombra. (153. ábra) A Site ablak megnyitása után Teljes képernyő megjelenítéssel (154. ábra) jobb oldalon láthatjuk a helyi fájlokat, azokat, amelyeket számítógépünkön a webhelyhez hoztunk létre. Baloldalon látjuk a webserver fájljait. Azt látjuk, hogy a bal oldali rész még üres.

153. ábra

154. ábra Kapcsolódjunk a szerverhez a Kapcsolódás ikonra kattintva. Ha még nem vagyunk fenn a neten, a gép rákérdez, hogy kapcsolódni kívánunk-e. A Dreamweaver kapcsolódik a kiszolgáló távoli számítógépéhez.

Azt láthatjuk, hogy a kapcsolódás ikonja megváltozott: a két dugasz csatlakoztatva van és egy zöld kis gömb jelenik meg, ami a csatlakozásunkat jelenti. Ha már nem akarunk a szerverhez kapcsolódni, a kapcsolat bontásához elég ugyanerre az ikonra kattintanunk. Most pedig küldjük el webhelyünk fájljait, és láthatjuk, hogy a honlap neve index.htm, amennyiben a webcím, amit hozzárendeltünk megfelel az index.htm oldal megnyitásának. A felfelé mutató nyílra kattintva a program megkérdezi tőlünk, hogy az egész webhelyet be akarjuk-e tölteni. Kattintsunk az OK-ra. Az átvitel végén, bal oldalon a Távoli Számítógép fájljai között láthatjuk az átvitt állományokat. Ha bármilyen okból egy fájl-t el szeretnénk távolítani a szerverről, csak ki kell jelölni a kérdéses fájl-t és a Visszavonás gombra kattintani, aminek a lefele mutató nyíl felel meg.

Lecke E-mail kapcsolat Az előzőekben azt néztük meg, hogy hogyan kell webhelyet publikálni. El kell mondanunk azonban, hogy a webmesterek munkája nem ér véget a publikációval. Weboldalainkat módosítani kell és mind tartalmilag, mind esztétikailag, grafikailag frissíteni. Előfordulhat, hogy oldalaink dinamikusabbá tételéhez új alkalmazásokat valósítunk meg rajtuk, melyek olyan technológiákhoz kapcsolódnak, mint az Asp vagy Php programozás, vagy pedig Flash-el készült animációkat, kisfilmeket illesztünk be. Ami esetünkben az elektronikus postához szeretnénk hivatkozást beszúrni úgy, hogyha egy ügyfél írni szeretne nekünk, megtehesse azt. Nézzük meg például a kirendeltségek oldalait, ahol szerepelnek az egyes e-mail címek (pl: szeged). (155. ábra) Beírtuk őket oda, de még nem élnek. Azt akarjuk, hogy amikor valaki az e-mail címre kattint, megnyíljon a levelezőprogram és a felhasználó szabadon küldhessen nekünk levelet.

155. ábra Jelöljük ki azt a feliratot, amelyikhez a hivatkozást kívánjuk társítani és menjünk az Insert>Email link (Beszúrás>Email) menübe (vagy elérhetjük az Insert>Common sávon is az email link ikont), írjuk be az e-mail címet, majd kattintsunk az OK-ra. (156. ábra)

156. ábra

Nézzük meg weblapunkat. (157. ábra)

157. ábra Ha valaki most kattint a feliratra, a levelezőprogram automatikusan elindul, és lehetővé válik az üzenet küldése. (158. ábra)

158. ábra

Lecke

Asp és Adatbázis A Dreamweaver a HTML tag automatikus írása révén lehetővé teszi számunkra, hogy oldalainkat igényeink szerint formázhassuk meg. Grafikai oldaláról nézve a HTML meglehetősen hatékony és hiányoktól mentes eszköz. Mindenesetre a HTML határai saját természetéből fakadnak, mivel nem programozási nyelv, hanem kizárólag formázásra alkalmas. Ez azt jelenti, hogy meggátolja annak a lehetőségét, hogy létrehozzunk és az oldalakba beillesszünk olyan igazi programokat, melyek adatfeldolgozást végeznek. A legjobb webmester sem tudna sohasem olyan HTML utasítás-együttest létrehozni, mely kiszámolja mondjuk a felhasználó által bevitt két szám összegét. Szerencsére ez a korlátozást (ami magában a Hyper Text Markup Language nyelvezet mozaikszavában is szerepel) más programozási nyelvek könnyen ellensúlyozzák. Maga a Dreamweaver is lehetővé teszi HTML oldalra történő Javascript vagy VBScript beszúrását. Ezek a nyelveze-

tek egy sor előnnyel járnak, de kevéssé bizonyulnak hasznosnak, amikor „aktív" oldalakat kell létrehoznunk, melyek tartalmát egy adatbázisból kell „lehívnunk". Ilyenkor ASP (Active Server Pages) oldalakat kell használnunk. Ezek az oldalak eltérnek a klasszikus HTML-től, mivel a fájl-ok kiterjesztése .htm-ről .asp-re változik. Ezenkívül, egy sor olyan lehetőséget kínálnak, melyek segítségével jelentősen emelhetjük webhelyeink interaktivitását és automatizálását. Szerencsére nem szükségszerű ismernünk az ASP nyelvezetet (de ismerete mindenképpen hasznos a fejlettebb rendszerekhez) mert a Dreamweaver automatikusan megír egy ASP oldal minden elemét. Folytassuk tehát munkánkat az oldalon Tervezés nézetben és, ha szeretnénk, jelenítsük meg HTML kódon keresztül. A Dreamweaver „átkonvertálja" műveleteinket (az „egérkattintás" alapján) ASP utasításokba. Mint már utaltunk rá, az ASP nyelv lehetővé teszi, hogy egy oldal tartalmát „megformáljuk" egy adatbázisban tárolt információk és paraméterek alapján. Abban az esetben, ha már lenne adatbázisunk és más formátumban, a Dreamweaver automatikusan importálja azt. Más adatbázis-formátumokkal való kompatibilitása elég jó. A támogatott formátumok: .txt, .csv, .xls (vagyis az Excel), .dbf, .db, .mdb, ami az Access. Mindenekelőtt nézzük meg két alapvető fogalom definícióját, az adatbázisét és a DBMS-ét:

Az adatbázis (database vagy DB) adatok rendezett együttese, melyek érdemi információkat jelölnek és magát a együttest egy DBMS kezel. Egy DBMS (DataBase Management System) olyan szoftverrendszer, ami adatgyűjtemények kezelését látja el, melyek nagyok, megosztottak és tartósak, és biztosítja azok megbízhatóságát és titkosságát. Most pedig vizsgáljuk meg az egyes fogalmak jelentését: Nagyon azt értjük, hogy nagyobb méretű, mint a használatban lévő számítást végző rendszerek központi memóriája. A tartósság olyan élettartamot jelent, ami független a programok egyes futtatásaitól, melyek használják őket. Megosztottságról pedig abban az értelemben beszélünk, hogy az adathalmazt különböző alkalmazások is használhatják. A megbízhatóság és a titkosság a következőket jelenti: Megbízhatóság - HW vagy SW működési zavaroknak ellenálló Titkosság - a hozzáférés fölötti ellenőrzési fegyelem Egy DBMS olyan programegyüttes, ami lehetővé teszi, hogy kihasználjuk egy számítógép adatrendszerezői és adattárolási képességét. Olyan „segédprogramok" ezek, amelyek három alapvető művelet elvégzését teszik lehetővé az adatokon:  keresés  frissítés  törlés

Miért is éri meg a DBMS-t használni? Azért, mert  az adatok központi ellenőrzés alatt állnak  csökkenti az adatfelesleget  kiküszöböli a változó adatok jelenlétét  lehetővé teszi a felhasználók közti adatmegosztást  az adatokhoz való hozzáférés és az adatok megjelenítése standardizálva van  megtartja az adatok egységét érvényesítési eljárások révén A forgalomban lévő legelterjedtebb DMBS-ek: MS Access, MS SQL Server, Oracle, DB2, Informix, Sybase, Ingres. Adatbázisból többféle létezik, de a jelenlegiek szinte mind relációs adatbázisok, vagyis az E.F.Codd által 1970-ben előterjesztett relációs modellen alapulnak, mely lehetővé teszi az adatok függetlenségét. Az ezen a modellen alapuló kereskedelmi adatbázisok a 80-as évek elején jelentek meg. A relációs adatbázisok a reláció elvén alapulnak: Egy reláció lényegében homogén rekordok együttese, melyek ugyanazon mezőkben definiáltak. A reláción belül minden csoporthoz egy nevet társítanak, egy attribútumot, ami leírja annak szerepét (ez a táblázatban mint oszlop neve szerepel). Egy táblázat akkor mutat relációt, ha: minden oszlop értéke egymás közt homogén, a sorok egymástól különböznek és az oszlopok fejlécei is eltérnek egymástól. Egy táblázat minden sorát record nak hívunk. A kulcs egy attribútum (vagy attribútum-csoport), amely egy reláció sorait azonosítja.

Tervezés Egy adatbázis tervezése általában három részből áll: konceptuális tervezés (a szóban forgó tényt könnyen érthető sémaként rajzolja meg, nem törődve egyelőre a DB majdani felépítésével); logikai tervezés (a konceptuális sémát az adatbáziskezelőrendszerek megjelenítési szerkezetének terminusaiban határozza meg) fizikai tervezés (a logikai sémát relációk és táblázatok terminusaiban határozza meg, melyek majd ténylegesen felépítik az adatbázis szerkezetét). De ez egy másik modul témája lesz (Adatbázis-kezelés)