Aktív témák
-
redsas
tag
Nyitány
1. Ismerkedés a program indítóképernyőjével
Amikor először indítjuk el a Dreamweaver programot lebegő palettákkal zsúfolt képernyővel találjuk magunkat szemben, és nem megnyugtató, ha tudjuk, hogy ez a megjeleníthető és szükséges palettáknak csak egy kis részét illusztrálja.
Segítené, mert áttekinthetővé tenné munkánkat, ha monitorunkat 1024 X 768-as, vagy nagyobb felbontásra állítanánk, /már amennyiben kellően nagy képátlóval, vagy igen jó szemekkel rendelkezünk,/ mert ebben az esetben a lebegőpalettákat a tényleges munkaterületen kívül rendezhetnénk el. /Jómagam kipróbáltam a munkát az előbb említett felbontásban, de a 17colos monitor nem tűnt elegendően nagynak ahhoz, hogy a szövegek kényelmesen olvashatóak legyenek, így visszatértem a 800 X 600- as képfelbontáshoz./
1. ábra A Dreamweaver „barátságos” nyitóképe
Az oldal közepét elfoglaló Welcome to Dreamweaver palettáról a program újdonságait és használatát bemutató, sőt egy teljes website elkészítésének lépéseit tartalmazó leckesor indítható. /Ezek megértéséhez némi angoltudás ajánlatos, ennek hiányában javaslom jelen könyv továbbolvasását./ Ezt a palettát nyugodtan bezárhatjuk, a leckék és útmutatók a program „Help” menüjéből bármikor előhívhatók.
Az oldalon található többi palettáról majd a kellő időben beszélek, most csak annyit, hogy bármelyiket tetszőleges helyre húzhatjuk, szabadon méretezhetjük, sőt be is zárhatjuk. A jelenleg látható palettákon kívül további paletták is rendelkezésünkre álnak. Valamennyi indításának lehetőségét megtaláljuk a „Window” menüben. Az éppen megnyitott paletták neve mellett pipa található.
2. A dokumentum ablak
Munkánk szempontjából legfontosabb a paletták alatt található jelenleg még teljesen fehér terület, a dokumentum ablak. Ez a Dreamweaver fő munkaterülete, ahol a weboldalakat létrehozzuk és szerkesztjük. A dokumentum ablakban három különféle nézetben jeleníthetjük meg munkánkat. A nézetek között az eszközsoron található gombokkal válthatunk.
2. ábra A dokumentum ablak nézetváltó gombjai
Az 1. gomb megnyomásával a kód nézetet („show code view”) választjuk. Ekkor munkánk HTML forráskódja jelenik meg és válik szerkeszthetővé. Érdemes ezt akár most kipróbálni ahhoz, hogy kiderüljön dokumentum ablakunk látszólag üres felülete mögött alaphelyzetben is egy „bianko” weboldal rejtőzködik, amely igaz részletek nélkül, de tartalmazza mindazokat az elemeket, amik egy HTML dokumentumhoz nélkülözhetetlenek.
A 3. gombbal választhatjuk a tervezőnézetet („show design view”), azaz egy vérbeli WYSIWYG webszerkesztő programhoz méltóan azonnal megjeleníti weboldalunk minden elhelyezésre kerülő elemét. Ez az alapértelmezett nézet.
A 2. gombbal a két nézet kombinációja jelenik meg a dokumentum ablak két részre osztott felületén.
Feltétlenül említésre érdemes még a dokumentum ablak alján, az állapotsoron található elemválasztó(„tag selector”) Itt az oldalunkon található HTML elemek között választhatunk. Ehhez elegendő az adott elem /pl. bekezdés, táblázat, oszlop, sor, kép stb./ nevére kattintanunk, hogy az adott elem kijelölésre kerüljön és megjelenjen a tulajdonságait tartalmazó tulajdonság-felügyelő („Property inspector”) paletta. Az elemválasztó különösen jó szolgálatot tesz , ha egy általunk formázni kívánt elem kijelölése valamilyen okból nehézséget jelent .Ilyenkor elegendő az objektumon belül kattintanunk, hogy az elemválasztó sorában hierarchikus sorrendben valamennyi elem neve megjelenjen. Ezek után a kívánt elemet már könnyedén kijelölhetjük.
3. ábra Elemválasztó /a táblázat elem kijelölve/
3. ábra
4. ábra A kiválasztott táblázat és a hozzá tartozó tulajdonság-felügyelő
A tulajdonság-felügyelő paletta szerepe igen fontos munkánk során. Az oldalunkon elhelyezett valamennyi elem rendelkezik egy ilyen palettával. Ezen az elemet jellemző tulajdonságok állíthatók be, illetve módosíthatók. A részleteket majd később.
Mielőtt nekilátnánk a tényleges munkának, szeretném felhívni a figyelmet egy nagyon fontos utasításra. Az F12 gomb lenyomására a Dreamweaver betölti készülő weboldalunkat a gépünkön található böngészőbe, így folyamatosan ellenőrizhetjük, hogyan is néz majd ki munkánk. a valóságban.
Lássunk munkához
1. Kezdő lépések, azaz létrehozzunk egy üres „site”-ot
Ha egy működő weboldal létrehozását vesszük tervbe, nem árt végiggondolni, hogy a végeredmény nagy valószínűséggel nem egy oldalt fog jelenteni, hanem egymásból nyíló, egymásra hivatkozó oldalak tetszőleges nagyságú halmazát, a hozzájuk tartozó képekkel, szövegekkel, esetleg más multimédiás alkalmazásokkal /hangfájlokkal, prezentációkkal, videókkal/. Az említett elemek, a weboldalak és a rajtuk elhelyezett különféle objektumok tartalmi egységet alkotnak, amit az angol nyelvű szakirodalom, és esetünkben a Dreamweaver is „Site”-nak nevez. Hogy a hivatkozások, objektumok megfelelően működjenek oldalainkon, nem mindegy hogyan és hová mentjük el a komponenseket.
Munkánkat tehát kezdjük egy új site kialakításával, hogy létrehozhassuk azokat a könyvtárakat, amelyekben munkánk elemei egymás számára is biztonsággal elérhetők lesznek, akár a saját gépünkön, akár az Interneten nyitjuk meg anyagunkat. Adjuk ki a „Site” menü „New Site” parancsát.
A megjelenő dialógusablak „Category” oszlopában található lehetőségek közül jelenleg a legfontosabb számunkra a „Local info” azaz a helyi információk beállítása.
5. ábra A site jellemzőinek beállítása
A „Site Name” mezőben bármilyen címet megadhatunk, ami megfelelően jellemzi munkánkat. Az itt megadott név nem jelenik meg a böngészőben, számunkra jelent megkülönböztető információt, amennyiben a későbbiek során további site-okat hozunk létre.
Annál fontosabb a „Local Root Folder”, azaz a helyi gyökérkönyvtár helyes beállítása. A szövegmező melletti mappaikonra kattintva beállíthatjuk, vagy létrehozhatjuk azt a könyvtárat a merevlemezünkön, ahol a site elemeit tárolni szeretnénk.
A „Http Address” mezőben megadhatjuk a Web tárhely címét, ahova oldalunkat elhelyezzük, de ez a beállítás még ráér.
A dialógus panel többi beállításán nem érdemes jelenleg változtatnunk, nyugtázzuk a változásokat és lépjünk ki innen. Ezt követően figyeljünk rá, hogy a munkánk elemeit folyamatosan a most definiált site megfelelő könyvtárába mentsük. Mindez akkor válik igazán fontossá, ha munkánk végeztével a Dreamwiever „Site” ablakának segítségével szeretnénk fájljainkat feltölteni a webszerverre. De ez még odébb van.
Itt jegyzem meg, hogy a site beállítások nyugtázása után a gyökérkönyvtáron belül mindenképpen tanácsos újabb könyvtárakat létrehozni az oldalakon elhelyezni kívánt multimédia objektumok számára, tehát külön mappát a képeknek, hangoknak stb. Ezzel áttekinthetőbbé teszzük munkánkat. A könyvhöz mellékelt illusztrációs website pl.116 képet tartalmaz. Nem volna szerencsés, ha ezeket a többi site elemmel ömlesztve tárolnának. Új könyvtárakat a „Site” ablak> „File” >„New Folder” menüpontját választva is létrehozhatunk, ha a megfelelő gyökérkönyvtár van kijelölve . A „Site” ablak előhozható a „Window” menü „Site Files” alpontjára kattintva./
6. ábra A Site ablak. /Window menü Site Files almenü/
2. Az oldal megtervezése bizonyos „keretek” között
Most, hogy már kijelöltük weblapunk gyökérkönyvtárát, sőt el is neveztük a készítendő site-ot, feltehetőleg tudjuk, hogy nagyjából milyen tartalommal akarjuk oldalainkat feltölteni. El kell azonban azt is dönteni, milyen tálalásban jelenjen meg ez a tartalom, azaz milyen felépítésű legyen az oldal. Dönthetünk egymást leváltó, egymás helyére betöltődő weblapok mellett, amikor is a böngészőnkben egy-egy linkre kattintva teljes egészében új oldal töltődik be. De választhatunk keretes felépítésű oldalt is , amikor több keret („Frame”) szervezi az oldalon megjelenő tartalmat. Ez utóbbi számomra szimpatikusabb megoldásnak tűnik, mert amíg az oldal egyik részén változatlanul jelen lévő tartalmi elem /pl. menüsor/ valamiféle tájékozódási fogódzót jelent az oldal látogatója számára, addig a képernyő más részén lehetőségünk van a változó tartalmak megjelenítésére. /Aki mégis a weblapról weblapra való közvetlen szökdécselés módszerével szeretné megalkotni siteját az ezt a fejezetet nyugodtan átlapozhatja./
Keretek létrehozásához a következőkre lesz szükségünk:
Mindenek előtt három lebegőpalettát kell a munkaterületre hívni.
• Az objektum palettát (Objects panel) „Window” menü > „Objects”
• A tulajdonság-felügyelő palettát (Properties panel) „Window” menü > „Properties”
• A keretek palettát (Frames panel) „Window” menü > „Frames”
Az objektum paletta alapértelmezésben a gyakran használt (Common) objektumokkal jelenik meg, amit a fejlécen található „Common” feliratra kattintva át kell állítani a keretekre („Frames”). Az ekkor megjelenő paletta megmutatja a Dreamweaver által felkínált keretcsoport-sablonokat.
Mielőtt az itt felkínált lehetőségek közül választanánk, gondoskodjunk arról, hogy a nézet menü („View”) szemléltető eszközök („Visual Aids”) almenüjében a keretszegély („Frame Borders”) lehetőség ki legyen jelölve. Ennek hiányában az oldalon létrehozott keretek nem lennének láthatóak, így mértezésük, mozgatásuk komoly nehézséget jelentene.
7. ábra Az objektum paletta /alapértelmezésben és átállítás után/, a keretek paletta és a tulajdonság-felügyelő paletta
Mindezek után válasszuk ki az oldalunk számára legmegfelelőbb keretelrendezést az objektum palettán, és kattintsunk rá. A dokumentum ablakban, de a „Frames” palettán is megjelennek a kerethatárokat jelölő szegélyek. Hogy éppen melyik kerethatár az aktív azt a „Frames” palettán könnyedén kijelölhetjük, belekattintva az aktiválni kívánt keret által határolt területbe. Az így kiválasztott keret tulajdonságai jelennek meg a tulajdonság-felügyelőben, ahol megtehetjük a szükséges változtatásokat.
Mindenek előtt igen fontos elnevezni a keretet. Későbbiekben e névre hivatkozva adhatjuk meg az egyes oldalakat megjelenítő helyet. Az új név a „Frames” palettán is megjelenik /Ékezetes betűk és speciális karakterek nem használhatók./
8. ábra A kiválasztott keretelrendezés, a keretek megjelenése a „Frames” panelen és a kattintással kijelölt „menu” keret tulajdonság-felügyelője
Az „Src ” mezőben adhatjuk meg a keretbe betöltődő HTML dokumentum nevét és elérési útját. A mappa ikonra kattintva tallózhatunk a merevlemezünkön tárolt fájlok között. Ehhez természetesen létre kell hoznunk azokat az oldalakat amiket meg akarunk jeleníteni, de ezt majd később. A keret tulajdonságok „Src” beállítását csak a nyitóoldal esetében kell megadnunk /ti, hogy induláskor milyen oldalak töltődjenek be a website kezdőlapján a keretekbe/, a további oldalak esetében az adott oldal tulajdonság-felügyelőjén tudjuk majd beállítani, hogy melyik keretbe töltődjön be. /Jusson ez majd eszünkbe akkor is ha elkészültünk a nyitóoldal kereteibe betöltendő oldalak létrehozásával! Ne felejtsük el az index.html, vagy index.htm –ként mentett keretcsoport kereteinek „Src” mezőit kitölteni!/
A tulajdonság-felügyelő további mezőit kitöltve rendelkezhetünk arról, hogy gördíthető legyen e a keretben megjelenő tartalom „scroll”, átméretezhető legyen a keret, vagy ne („No Resize”), megjelenjenek e a keretszegélyek („Borders”)és ha igen, akkor milyen színnel („Border Color”). A „Margin Width” mezőben az oldalmargók szélességét adhatjuk meg, míg a „Margin Height” mezőbe az alsó-felső margók méretét lehet beírni.
Ez utóbbi két beállítási lehetőség nem feltétlenül jelenik meg alaphelyzetben. Mint ahogy más objektumok esetében is, tulajdonságok egy része csak akkor érhető el, ha a ceruza ikon alatti kis nyílra kattintunk a tulajdonság-felügyelő palettán.
Miután minden beállítást megtettünk mentsük ezeket. „File” > „Save Framset ” és „Save All Frames ”
3. A keretek megtöltése, avagy a „CÍM” keret
Miután létrehoztuk weboldalunk kereteit ideje, hogy ezeket tartalommal töltsük meg. Ehhez nem árt talán még egyszer tisztázni, hogy minden keret egy-egy külön weblap megjelenítésére szolgál, ezért minimálisan annyi weboldalt kell létrehoznunk ahány kertből áll keretcsoportunk. Az általam mellékelt webes felület az alább szemléltetett fő részekre oszlik
9. ábra Oldalterv
Természetesen számtalan más elrendezés is lehetséges, ez csak egy a kézenfekvő lehetőségek közül. Ez az elrendezés a következő kerettartalmakat feltételezi:
1. Cím: A website címe, ami az oldal más részeitől függően folyamatosan jelen van
2. Menü: A menü, ahol a megjeleníteni kívánt tartalmak kiválaszthatók Ez a rész folyamatosan az oldal látogatója előtt van, legfeljebb önmagát cseréli le egy újabb menüre
3. Részletek: A menü által felkínált témák kifejtésének helyszíne, minden újabb hivatkozás választásakor megújuló tartalommal.
10. ábra A példaként elkészített site egy oldala /Valójában három weboldal/
A legkönnyebb dolgunk a címet tartalmazó oldal elkészítésekor van, hiszen ezen a lapon csak a hátteret kell megoldanunk és a címfeliratot tartalmazó képet kell elhelyeznünk rajta. Nézzük sorban a teendőket
3.1. Oldal létrehozása, oldaltulajdonság beállítások
Új oldal létrehozásához a „File” menü „New” pontját kell választanunk. /bár, ahogy korábban említettem a dokumentum ablak alaphelyzetben is egy üres oldalt tartalmaz, tehát ezen is elkezdhetjük a munkát./
Az oldalt létrehozása után mentsük is el a már korábban létrehozott site könyvtárba, ahová a kereteket is mentettük „File” > „Save”
Előttünk van hát az üres oldal, aminek jó lenne néhány jellemzőjét megváltoztatni. Ezúttal azonban hiába fordulunk a tulajdonság-felügyelőhöz, a választható tulajdonságok karakterformázáshoz szükséges lehetőségeket kínálnak. Az oldalbeállítások előhívásához kattintsunk az üres területre jobb egérgombbal, és a megjelenő helyi menüből válasszuk a „Page Properties” sort. Elérhetjük ezt a „Modify” menüből is
11. ábra Oldaltulajdonságok paletta /''Modify''> ''Page Properties''/
• Mindenek előtt nevezzük el az oldalt a „Title” mezőben. Ez azért is fontos, mert ez a név fog megjelenni a böngésző címsorában. A használható karakterekkel kapcsolatban itt semmiféle megkötés sincs.
• Döntsük el, hogy háttérképet , vagy háttérszínt alkalmazunk. Ennek megfelelően adjuk meg a háttérkép elérési útját a „Background Image” mezőben, vagy írjuk be az alkalmazni kívánt háttérszín színkódját a „Background” mezőbe. Nagy segítség, hogy az itt található kis négyszögre kattintva megjelenik a lehetséges színeket tartalmazó panel , amelynek bármelyik kockájára kattintva az adott szín kódja beíródik a háttérszín választó mezőbe.
• Megadhatjuk az oldalon megjeleníteni kívánt szöveg színét, („Text”) de ezt a szöveg formázásakor is megválaszthatjuk.
• Az oldalunkon elhelyezett szöveges linkekkel /hivatkozás/ kapcsolatos színbeállításokat három mezőben tehetjük meg. Megadhatjuk a link színét („Links”), a link színét rákattintáskor („Active Links”) és a már aktivált hivatkozás címét, azaz, milyen legyen a link színe, ha a látogató már korábban rákattintott („Visited Links”) Ezt a módosítást a forráskódon kívül csak itt tehetjük meg. /A magam részéről viszolygok az alapértelmezés szerint rákattintás után lilára váltó linkbeállítástól, mert igen otrombán képes tönkretenni az oldal színvilágát. Ezért ezt a beállítási lehetőséget fontosnak tartom./
• A „Left Margin” és a „Right Margin” Az Internet Explorer számára hordozza a margóbeállításokat, míg a „Margin Width” és a „Margin Height” a Netscape számára értelmezhető. (Ettől egyszerű a világ.) Ajánlatos tehát mindenhol megadni a szükséges margóméretet, ha egyáltalán akarunk nagyobb margót használni a program által alapértelmezésben biztosított minimálisnál.
• Az oldal karaktereinek kódolását nem érdemes a 8859-2 közép európai kódra átállítani,(„Central European 8859-2”) mert némely ékezetes betűk őrületbe kergetnék oldalunk mindazon látogatóit, akik nem magyarnyelvű operációs rendszert és böngészőt használnak. Igaz, így mi sirathatjuk „kalapossá” váló hosszú „ő” és „ú” betűinket.
Ennyi beállítás után már igazán használatba vehetjük oldalunkat. A példában szereplő Grafikai szószedet c. site „cim” nevű keretében megjelenő weblap oldalbeállításainál csupán a Photoshopban létrehozott háttérkép elérési útját adtam meg. A linkek színjellemzőit nem akartam módosítani, mivel ezen a lapon nincs link A példamunka létrehozásának fázisait követve, most következik a:
3.2. Kép elhelyezése a dokumentumban
/A mellékelt példamunka esetben ez a kép a címet jelenti. Kép, holott a címsor szövegelem is lehetne. Mindazonáltal a weblapon szereplő címsorok, címkék és gombok feliratát ajánlatos valamilyen képszerkesztő programban létrehozni. Sokkal igényesebb megoldások születhetnek, mint amit a szövegelemek formázásával érhetünk el. /
A Dreamweaver súgója szerint a program által elfogadott képformátumok a GIF , a JPEG és a PNG. Ez utóbbit azonban nem minden böngésző támogatja ezért célszerű GIF és JPG formátumú, és megfelelően Webre optimalizált képeket alkalmazni .
12. ábra A site címe képszerkesztő programban elkészítve
Képet beszúrhatunk a beszúrás („.|.”) menüből a kép („Image”) lehetőségre kattintva, de ha már állandóan a szemünk előtt lebeg az objektum paletta, akkor válasszuk innen a kép beszúrása („.|. Image”) lehetőséget. Ezúttal nem is kell átállítanunk a paletta nézetét, mert az utasítás ikonja a „Common”, azaz a gyakran használt elemek között található.
13. ábra Az ''Insert Image'' gomb az objektum paletta ''Common'' elemei között
A beszúrás parancs hatására megjelenik egy képforrás kiválasztó panel, amelyen számítógépünk meghajtói közt tallózva kiválaszthatjuk a szükséges képet. Amikor nyugtázzuk a kiválasztást a Dreamweaver előzékenyen figyelmeztet, hogy a kép elérési útja kívül esik a sitehoz létrehozott gyökérkönyvtáron, és így nem biztos, hogy minden helyzetben elérhető lesz. Gondoljunk bele, a most adott elérési út, miszerint a Weblapon jelenjen meg egy kép, ami pl. a „C” meghajtó > Dokumentumok könyvtár> Fotók nevű mappájában van , teljességgel érvényét veszíti, amint Weboldalainkat a saját számítógépünkön kívül szeretnénk működtetni, publikálni.
Szerencsére a Dreamweaver a megoldást is felkínálja és az üzenet további részében felajánlja a kép másolását a site gyökérkönyvtárába. Úgy gondolom, hogy ez igen lényeges és okos ajánlat, éljünk vele. Mentsük el a képet a Site gyökérkönyvtárán belül a képeknek létrehozott mappába. /Ha még nincs ilyen, akkor most tegyük meg, és hozzuk létre a „Copy File As” panelen is megtalálható „Új mappa létrehozása” ikon használatával. /Természetesen, ha a számítógépre bekerülő képet eleve a site könyvtárába mentettük, akkor a fent ismertetett figyelmeztetés elmarad/
14. ábra A Dreamweaver figyelmeztető üzenete. Vegyük komolyan!
3.3. A képek jellemző tulajdonságainak beállítása
Az „.|. Image” utasítást végrehajtva készülő oldalunkon megjelenik a kiválasztott kép és a tulajdonság-felügyelő szolgálatkészen elénk tárja valamennyi megváltoztatható tulajdonságát. Munkánk során természetesen később is bármikor előhívható az adott kép tulajdonság-felügyelője, ehhez elegendő a képre kattintanunk.
15. ábra A képek tulajdonságai a tulajdonság-felügyelő panelen
A bélyegkép melletti mezőben adjunk ékezetek nélküli nevet képünknek! Erre a későbbiek során szükségünk lehet, amennyiben élni akarunk a Dreamweaver által kínált viselkedés („Behaviors”) lehetőséggel, ugyanis a program által generált JavaScriptek használják hivatkozásaikban ezt a nevet. A részleteket majd később.
A „W” és a „H” (szélesség –magasság) mezőt a Dreamweaver a kép beillesztésekor automatikusan kitölti, itt jelenik meg a kép szélessége és magassága pixelben kifejezve. Ezek az értékek utólag módosíthatók, de ez a kép minőségromlását eredményezheti, vagy a böngészőben való betöltés folyamatát lassíthatja le szükségtelenül. Ha nem vagyunk megelégedve az oldalon megjelenő kép méretével, ne sajnáljuk az időt a képszerkesztő programban való átméretezésre.
Az „Src” mezőben a kép forrása látható, az elérési út. Ezt a mezőt a program automatikusan kitöltötte.
A „link” mező melletti mappa ikonra kattintva beállíthatunk egy hivatkozást, tudni illik, hogy a látogató a képre kattintva melyik oldalt jelenítse meg a böngészőbe. Ha ezt a linket létrehoztuk, aktivizálódik az eddig szürke „Target” mező és most már azt is beállíthatjuk, hogy a képre-kattintással előhívott oldal hol jelenjen meg. A megjelenítési lehetőségek „Blank” (Új ablak, de a régi is nyitva marad), „Self” (Az új oldal az előző helyén jelenik meg.), „Parent” (Az oldal az őt meghívó oldal keretében jelenik meg. /Keretes dokumentum esetében./), „Top” (Az egymásba ágyazott keretcsoportok csúcsán, tehát a fő kertben jeleníti meg az oldalt)
Végül választhatjuk a megjelenés célpontjaként az általunk létrehozott keretcsoporton belül valamelyik keret nevét is. Példánk esetében erről a megoldásról még lesz szó.
A következő beállítható tulajdonság az Igazítás („Align”). Itt egy legördülő menüből választhatjuk ki a kép elhelyezésének módját az oldalon.
Feltétlenül ajánlott kitöltenünk az „Alt” mezőt. Az ide beírt szöveg jelenik meg a böngészőben, ha a képet magát nem is tudja megjeleníteni, vagy ha a látogató a kép fölé viszi a kurzort Ebben a mezőben bármilyen karaktert használhatunk.
16. ábra Egy ''kép-gomb'' és a kurzor hatására megjelenő „Alt” felirat
A képnek az oldalon elhelyezkedő többi objektumtól és az oldalszegélyektől való távolságát adhatjuk meg a „VSpace” és a „Hspace” mezőkben. Gyakorlatilag ez a képet körülvevő üres területet jelenti, a „VSpace” esetében alul és fölül, a „Hspace” esetében a kép jobb és baloldalán. Fontos tulajdonság ez, amikor pl. több képet szeretnénk egymás mellet különböző magasságban elhelyezni.
A „Border” mezőbe beírt számmal a képet körülvevő keret vastagságáról rendelkezhetünk, de ha már keretet akarunk adni egy képnek, tegyük ezt inkább a képszerkesztő programban.
Itt kell megjegyeznem, hogy a tulajdonság-felügyelő „Edit” gombjára kattintva azonnal megnyílik kiválasztott képszerkesztő programunk, az adott képpel. Ehhez azonban néhány beállítást el kell végeznünk.
Készíthetünk képünkről egy kisebb felbontású, esetleg csak fekete és fehér képpontokból álló előnézeti képet , ami az eredeti kép előtt letöltődik, mert így az oldal látogatója nem érzi úgy, hogy tétlen várakozással tölti idejét A „Low Src” menüpont alatt ennek a képnek az elérési útját állíthatjuk be.
A tulajdonság-felügyelő jobb alsó szélén a szövegszerkesztő programokból jól ismert három ikont találunk. Ezek használatával balra, középre, illetve jobbra igazíthatjuk a képet.
A hátralévő néhány lehetőségről, /bár a cím” c. weboldal létrehozásakor nem alkalmaztam őket/ érdemes talán részletesebben is szólni:
3.4. Képtérkép (Image Map)
Korábban már volt róla szó, hogy amennyiben a kép tulajdonság-felügyelő palettáján a link mezőben megadunk egy hivatkozást akkor a képre kattintva az adot webes elem jelenik meg a böngészőben. Ezt a műveletet nem kell feltétlenül az egész képre alkalmazni, megtehetjük a kép egy kis részletével, de akár tőbb hivatkozást is kapcsolhatunk a kép különböző területeihez. Ehhez azonban képtérképet kell készítenünk. Ez a térkép az „Image Map”. Készítésének eszközei megtalálhatók a tulajdonság-felügyelőn.
Mindenek előtt nevezzük el ékezetes karakterek nélkül a kijelölésre szánt területet, azaz adjunk nevet a készülő térképnek.(„Map”) Ezt követően eldönthetjük, hogy milyen alakú legyen a kiválasztott terület
17. ábra ''Image Map'' kiválasztó eszközök
1. Négyszögletes kijelölés („Rectangular Hotspot Tool”)
2. Kör alakú kijelölés („Circular Hotspot Tool ”)
3. Sokszögű kijelölés („Poligon Hotspot Tool”)
A kijelölés létrehozásához kattintással ki kell választani az eszközök egyikét, majd a kép kiválasztani kívánt területe felett a bal egérgomb lenyomásával meghúzható a kijelölés körvonala. A Dreamweaver a jelzett területet kékkel színezi ki. Az így kiválasztott terület az un. Forrópont („Hotspot”).
18. ábra ''Hotspot'' kijelölések
Talán már nem is meglepő, hogy a „Hotspot” is rendelkezik tulajdonság-felügyelővel. Itt adhatjuk meg a „Link” mezőben, hogy a kép kiválasztott területére kattintva mi töltődjön be a böngészőbe. A „Target” mezőben a korábban már ismertetett módon a megjelenítés módjáról rendelkezhetünk. Az „Alt” tulajdonság is hasonlóan működik, mint a képek esetében
19. ábra ''Hotspot'' tulajdonság-felügyelő
4. Vigyázat mély víz! /táblázat, szöveg, képcsere, viselkedésmódok, avagy a „MENÜ” keret/
A mellékelt példamunka kettes számmal jelölt kerete a „menü” nevet kapta. Ennek tartalommal való feltöltéséhez egy olyan oldalt kellett létrehoznom, amely talán nem meglepően egy választómenüt tartalmaz. Menü készítése egy weboldal létrehozása során szinte megkerülhetetlen feladat, nem haszontalan talán, ha ezen keresztül mutatom be a Dreamweaver néhány újabb képességét.
A menüsorok egymás alatti elhelyezése kézenfekvően megkívánja egy táblázat elhelyezését az oldalon. Kezdjük talán mi is ezzel:
4.1. Táblázat beszúrása („.|. Table”)
Szokás szerint egy új objektum beszúrásához az objektum palettát érdemes felkeresnünk. Kattintsunk a táblázat beszúrása („.|. Table”) gombra.
20. ábra Kép beszúrása az objektum palettáról
A megjelenő párbeszédablakban adjuk meg a táblázathoz szükséges sorok („Rows”) és az oszlopok („Columns”) számát. Beállíthatjuk, hogy az oldalunk szélességének hány százalékát /ill. pixelét/ foglalja el („Width”). Megadhatjuk a táblázat kereteinek vastagságát („Border”) , a cellákon belüli margó nagyságát („Cell Padding”) illetve a cellák egymástól való távolságát. („Cell Spacing”). Ha most valamit nem megfelelően állítottunk be, az nem jelent gondot. A létrehozott táblázat tulajdonság-felügyelőjében a felsorolt tulajdonságok módosíthatók. Itt további tulajdonságokat is beállíthatunk. Választhatunk háttérszínt („Bg Color”), vagy háttérképet („Bg Image) Változtathatjuk a keretek színét („Brdr Color”) ezenkívül lehetőségünk van a táblázat balra, középre és jobbra igazítására („Align”)
21. ábra A táblázat tulajdonság-felügyelője
A táblázat celláihoz, soraihoz, vagy oszlopaihoz külön formázási utasításokat adhatunk, ehhez csak ki kell jelölni a formázni kívánt cellákat. Kijelölni az egérrel tudunk a szövegszerkesztő programokban megszokott módon. /Sor elé állva kattintani, Oszlop legfelső eleme felett kattintani, stb./ Egymástól távol álló cellákat is kijelölhetünk, ha a „CTRL” gombot nyomva tartva kattintunk a kijelölni kívánt cellákra.
Ezek a formázási utasítások elsősorban nem a táblázat, hanem a benne megjelenített szöveg, vagy kép elhelyezkedésére, formátumára vonatkoznak.
22. ábra A kijelölt cellák belső formázásának tulajdonság-felügyelője
Most, hogy a menü elemeinek tárolására szolgáló táblázat készen áll, az egyes cellákat fel kell töltenünk a menüsorokkal, azaz a választási lehetőségekkel. Erre több megoldás is kínálkozik. Kezdjük talán a legegyszerűbbel. Ez a
4.2. Menükészítés szöveg formázásával
A táblázat cellájába kattintva gépeljük be a menü címsorait. Észrevehetjük, hogy a tulajdonság-felügyelőn a szövegformázási jellemzők jelennek meg, ezek segítségével tudjuk szövegünket a kívánt formátumra alakítani. Ezek a formázási lehetőségek láthatók a 22.ábrán. A „Format” mezőben található legördülő lista a HTML nyelv áltat definiált bekezdésszintű formázási lehetőségeket tartalmaz. Mivel jelen esetben a menüpontok címsoroknak felelnek meg, példánk esetében a „Heading 3” formátumot használtam. Említést kell tenni a „Format” lista „Preformatted” eleméről. Ezt a formázási módot akkor érdemes választani, ha szeretnénk, hogy a megjelenített szöveg pontosan úgy jelenjen meg oldalunkon, mint ahogy azt begépeltük. Láthatóvá válik pl. a több egymás utáni szóköz, ami egyébként a Html. dokumentumban nem jelenne meg.
A következő mezőben beállíthatjuk, hogy milyen betűtípus csoportnak megfelelően jelenjen meg a szöveg.
A „size” mezőben megváltoztathatjuk az alapértelmezett „3”as betűméretet. A + jellel ellátott lehetőségek ehhez a betűmérethez képest növelik az adott értékkel a betűk méretét.
A továbbiakban beállíthatjuk a betűk színét, és más, a szövegszerkesztőkből jól ismert tulajdonságot is megváltoztathatunk, az azokban megszokott módon. Ezeket itt most nem részletezem.
Nem haszontalan talán megemlíteni, hogy az Objektum paletta is tartalmaz szöveggel, illetve karakterekkel kapcsolatos beszúrási lehetőségeket a „Characters” nézetet beállítva.
23. ábra Az objektum paletta Characters elemei
Erről a tábláról speciális elemeket, karaktereket tudunk beszúrni. /Sortörés, nem törhető szóköz, és különféle szimbólumok, mint például: © ® €./
További szöveggel kapcsolatos tulajdonságok érhetők el a „Text” menüben.
/Ezzel persze nem értünk a menükészítés végére. Most még hiába kattintunk a menüsor elemeire, semmi sem történik. Ehhez a megfelelő hivatkozásokat is létre kell hoznunk. Erről fog szólni a 4.4.fejezet. A gyengébb idegzetűk azonnal ott folytathatják, de az ínyenceknek szíves figyelmébe ajánlom a most következő fejezetet./
Az eddigieket összefoglalva tehát; a menü címsorainak kialakításához a legegyszerűbb, /de korántsem a legelegánsabb/ megoldás a szöveg begépelése a menüt hordozó táblázat celláiba Mi azonban legyünk igényesek, és próbáljunk ki egy bonyolultabb, de végeredmény szempontjából mindenképpen célravezetőbb módszert:
4.3. Menü készítése képek, képcsere és a „Behaviors” paletta használatával
Korábban már volt róla szó, hogy a címként használt feliratokat esztétikusan elkészíthetjük egy képszerkesztő programban. Nincs ez másképpen a menük címsorainak elkészítésekor sem. De hát evés közben jön meg az étvágy. Most már nem elégszünk meg a puszta képpel, azt is szeretnénk, ha menünk címsorai reagálnának az oldal látogatójának cselekedeteire, különféle eseményekre különféle viselkedési formákkal válaszolnának. /Naná, hogy interaktív Weblapot szeretnénk./
A menü soraitól elvárható, hogy jelezze, ha a látogató fölé viszi az egérkurzort, vagy ha kattint rajta. Ezt a feladatot könnyedén megoldhatjuk az „.|. Rollover Image” lehetőség alkalmazásával. Ezt használva a kurzor viselkedésére válaszul a böngésző az eredeti képet lecseréli egy másikkal. Ehhez csupán az objektum palettán az „.|. Rollover image” lehetőségre kell kattintanunk, majd a megjelenő párbeszédablakban megadni az eredeti és az azt lecserélő kép elérési útját. Beállíthatjuk még azt is, hogy a képre kattintva milyen URL töltődjön be böngészőnkbe.
24. ábra Képcsere az ''Insert Rollover Image'' lehetőséggel
Hihetetlenül kibővülnek lehetőségeink, ha e helyett a Dreamweaver „Behaviors” palettáját hívjuk segítségül. A Behaviors szó angolul viselkedést, viselkedési módot jelent. Itt is erről van szó. Ezen a palettán azt állíthatjuk be, hogy a különféle objektumok a velük kapcsolatos eseményekre („Events”) milyen cselekedettel („Actions”) reagáljanak. A Dreamweaverben e két tényező kombinációja, /tehát az esemény és a rá adott válasz/ együttesen a viselkedés, a behaviors. /Példánk esetében esemény, pl. az egérrel való kattintás a menüelemen, amire az valamilyen cselekedette válaszol, ti. lecseréli az ott elhelyezett képet./
A Behaviors Paletta előhívható a „Window” menü „Behaviors” pontját kijelölve.
Nézzünk egy konkrét példát: A szemléltető munka menüjéhez minden menüelemként alkalmazott „kép-címkét” három változatban készítettem el , színhőmérsékleti változásokkal utalva a különféle eseményekre.
25. ábra A menüsor egyik elemének három változata 1. Alaphelyzet 2. Egérmutató a menüsor felett 3. A menüelem rákattintás után.
Azt szerettem volna elérni, hogy az egérmutató hatására az adott menüsor „gyulladjon ki”, majd rákattintás után „égjen ki”, azaz veszítse el a színeit.
1. Ehhez mindenek előtt a kiinduló képet kellett kijelölni. Hogy a megfelelő HTML elemet jelöltük ki, az abból is látszik, hogy a „Behaviors” paletta címsorán megjelenik a kijelölt elem neve, esetünkben a kép (<Img>)
2. Ezt követően az 1. jellel ellátott„+”jelre kattintva megjelentek a lehetséges cselekedetek („Actions”) ezek közül a „Swap Image” -t választottam.
3. Végül a kettes számmal jelölt háromszögre kattintva megjelenik az eseményeket („Events”) tartalmazó lista., és itt azt jelöltem be, hogy a képcsere az egérmutató kép fölé kerülésére („on Mouse Over”) valósuljon meg. A Dreamweaver ehhez automatikusan bejegyzett egy újabb viselkedést, amit ebben az esetben örömmel jóváhagytam, hogy ti. az egérmutató távozásával („on Mouse Out”) az eredeti képet cserélje vissza. (Swap Image Restore)
26. ábra A Behaviors paletta. A + jelre kattintva állíthatjuk be, hogy mit szeretnénk elérni („Action”), a háromszögnél pedig, hogy ez milyen esemény („Events”) hatására következzen be.
A fenti műveletet megismételtem az egérkattintás („on click”) eseményre vonatkoztatva is, ehhez természetesen a harmadik kép elérési útját állítva be a „.|. Image Source” párbeszédablakban.
Viselkedést egyszerűen törölhetünk, kattintással kijelöljük az eseményt tartalmazó sort, majd a panel „ „ jelével, vagy a „.|.” gombbal töröljük
Tudomásul kell vennünk, hogy a Behaviors paletta lehetőségei nagyban függnek az oldalak megtekintéséhez használt böngészőtől. Ha azt feltételezzük, hogy a látogatók 4-es verziójú Internet Explorer, vagy Netscape böngészőnél régebbivel rendelkeznek, akkor az akciók jelentős része eltűnik a Behaviors paletta kínálatából Győződjünk meg erről és a + jelre kattintva jelenítsük meg a Behaviors menüjét, majd válasszuk a „Show Events For” utasítást. Az itt megjelenő panelen tudjuk kiválasztani, hogy milyen verziószámú böngészőre szeretnénk létrehozandó weboldalainkat optimalizálni. Jelöljük itt be valamelyik 3-as verziót, és a nyílra kattintva nézzük meg mi maradt az „Events” gyűjteményből. Elkeserítő a látvány. Egyetlen vigaszunk az lehet, hogy mára már többé – kevésbé joggal feltételezhetően, nem, sokan használják ezeket az elavult böngészőket. Annál is inkább, mert az újabb verziókra ingyenesen lehetett áttérni.
Munkánk végeztével mentsük el a menüt tartalmazó oldalt. „File” „Save”
Végül összehasonlításképpen álljon itt a két menü. Az első, amelyet gépeléssel és szövegformázással hoztam létre, és a második, amelyen képeket alkalmaztam. A különbség önmagáért beszél.
27. ábra Gépeléssel létrehozott és képekből összeállított interaktív menü
Fontos megemlíteni, hogy akár szöveggel, akár képekkel töltöttük fel a menüt, végezetül a helyére is kell tennünk azt. Talán még emlékszünk rá, hogy Weboldalunk Index.html keretcsoportját létrehozva az egyes kereteknek volt egy „Src” tulajdonsága is, vagyis, hogy az adott keretbe milyen Weblap töltődjön be induláskor. Most hívjuk elő újra az index keretcsoportot. A „Frames” palettán kattintsunk bele a „menu” nevűbe, ezáltal megjelenítve a keret tulajdonság-felügyelőjét. Itt az „Src” mező melletti mappa ikon segítségével tallózzunk a menüt tartalmazó weblapunkhoz, majd a „File” „Save all Frames” utasítással mentsük a beállítást. Ezentúl az index.html már a menüvel jelenik meg
A Behaviors paletta adta lehetőségek közül én most csak egyet ismertettem, de ha vesszük a fáradtságot, hogy böngésszük egy kicsit az események és a rájuk adott válaszok bőséges listáját akkor meglódulhat a fantáziánk. Számtalan módon tehetjük oldalainkat interaktívvá.
„Events” (események) böngésző verzióval Esemény leírása
onAbort (NS3, NS4, IE4, IE5) A látogató leállítja a böngészőt egy kép letöltése közben (pl. kattint a böngésző „leállítás” gombján)
onAfterUpdate (IE4, IE5 Az oldalhoz kötött adatelem frissítése befejeződött
onBeforeUpdate (IE4, IE5 Az oldal adatelemének frissítése előtt
onBlur (NS3, NS4, IE3, IE4, IE5 Az adott elem nincs többé a látogató beavatkozásának középpontjában Például ha a látogató egy szövegmezőn kívül kattint azután, hogy előzőleg a szövegmezőbe kattintott, a böngésző generál agy „on Blur” eseményt, hogy felhívja a figyelmet a szövegmezőre Az „on Focus” ellentéte
onBounce (IE4, IE5) („Visszapattanáskor”)A „Fényújság” elem tartalma eléri a fényújság határát
onChange (NS3, NS4, IE3, IE4, IE5) A látogató az oldal valamely értékét megváltoztatta. (pl. kiválasztott egy menüpontot, vagy beírt egy szövegmezőbe, és aztán valahova máshova kattintott)
onClick (NS3, NS4, IE3, IE4, IE5) A látogató az oldal valamely meghatározott elemére kattint, pl. link, gomb, képtérkép.
onDblClick (NS4, IE4, IE5) Kettős kattintás az oldal valamelyik elemére.
onError (NS3, NS4, IE4, IE5) Böngészőhiba az oldal, vagy a kép letöltésekor
onFinish (IE4, IE5) A fényújság tartalma befejezett egy ciklust, egyszer körbeért.
onFocus (NS3, NS4, IE3, IE4, IE5) Egy meghatározott elem a látogató beavatkozásának középpontjába kerül, pl. szövegmezőbe kattint.
onHelp (IE4, IE5) A látogató a böngésző „Help” gombjára kattint
onKeyDown (NS4, IE4, IE5). A látogató lenyomott egy billentyűt, de még nem engedte fel. . A böngésző nem képes érzékelni, hogy ez melyik gomb volt.
onKeyPress (NS4, IE4, IE5) A látogató lenyomott és felengedett egy gombot. A böngésző nem képes érzékelni, hogy ez melyik gomb volt.
onKeyUp (NS4, IE4, IE5) A látogató felenged egy gombot. A böngésző nem képes érzékelni, hogy ez melyik gomb volt.
onLoad (NS3, NS4, IE3, IE4, IE5) is Egy kép, vagy egy oldal letöltődött
onMouseDown (NS4, IE4, IE5) A látogató lenyomja az egér gombját /és még nem engedi fel/
onMouseMove (IE3, IE4, IE5) A látogató mozgatja az egérmutatót egy adott elem felett, azaz az egérmutató az adott elem határvonalain belül tartózkodik.
onMouseOut (NS3, NS4, IE4, IE5 Az egérmutató elhagyja az adott elemet, ami többnyire kép, vagy egy képhez csatolt link. Ez az esemény gyakran társul az „eredeti kép visszacserélése”(Swap Image Restore) viselkedésmódhoz, amikor is egy kép visszatér az eredeti állapotához, ha az egérmutató már nem tartózkodik rajta.
onMouseOver (NS3, NS4, IE3, IE4, IE5).
Ez egér az adott elem fölé érkezik. Az ehhez az eseményhez társuló elem többnyire egy link.
onMouseUp (NS4, IE4, IE5) A lenyomott egérgomb felengedésekor
onMove (NS4) Egy ablak, vagy egy keret mozog
onReadyStateChange (IE4, IE5) Az adott elem állapota megváltozik
onReset (NS3, NS4, IE3, IE4, IE5 Egy űrlap visszaáll az eredeti állapotára
onResize (NS4, IE4, IE5) A látogató átméretezi a böngésző ablakát, vagy egy keretet
onRowEnter (IE4, IE5) Az adatforráshoz tartozó rekordmutató megváltozik
onRowExit (IE4, IE5 Az adatforrás aktuális rekordmutatója hamarosan megváltozik
onScroll (IE4, IE5) A látogató le, vagy fel görget
onSelect (NS3, NS4, IE3, IE4, IE5) A látogató szöveget jelöl ki egy szövegmezőben
onStart (IE4, IE5) A fényújság elem egy új ciklusba kezd.
onSubmit (NS3, NS4, IE3, IE4, IE5. A látogató elküldi az űrlapba írt adatokat /többnyire a „Submit” gomb megnyomásával
onUnload (NS3, NS4, IE3, IE4, IE5. A látogató elhagyja az oldalt
„Actions” (akciók) /válaszlehetőségek az eseményekre/ Akció leírása
Call JavaScript JavaScript meghívása. A megadott esemény bekövetkezése egy JavaScript kódot hív meg.
Change Property A Tulajdonság megváltoztatása Módosítja egy objektum valamelyik tulajdonságának az értékét (Pl. egy réteg háttérszínét)
Check Browser Böngésző vizsgálat Ez az akció az oldalra érkező látogatót más-és más oldalra küldi tovább az áltata használt böngésző márkájától és verziójától függően.
Check Plugin Plugin vizsgálat. Más és más oldalra küldi a látogatót, attól függően, hogy böngészőjéhez milyen bővítmény van installálva. (PL Flsah)
Control Shockwave or Flash Schockwave vagy Flash mozik kezelését teszi lehetővé. (lejátszás, megállítás, visszaállás, vagy ugrás egy keretre)
Drag Layer Réteg vonszolása Lehetővé teszi a látogató számára egy réteg mozgatását. Jól használható ez az akció, pl. puzle , csúszka szabályzó és más mozgó felületű elemek létrehozására.
Go to URL Ez az akció új lapot nyit meg az aktuális ablakban, vagy egy meghatározott keretben. Különösképpen hasznos, ha több keret tartalmát akarjuk megváltoztatni egyetlen kattintással.
Jump Menu Egy ''jump menü'' létrehozásakor a Dreamweaver létrehoz egy menü elemet és mellékeli az ''ugró menü'' viselkedésmódot is. /A ''Jump menü'' olyan felbukkanó menü az oldalon, amely hivatkozásokat tartalmaz más oldalakra, vagy oldalrészekre./
Jump Menu Go Mint az előző, csak ráadásként egy „Go” gombot kapcsol össze a Jump menüvel
Open Browser Window A hivatkozást a böngésző új ablakában nyitja meg. Az új ablak tulajdonságai meghatározhatók /ti, hogy pl. méretezhető-e, milyenek legyenek a méretei, stb./
Play Sound Hangot játszik le. /pl. ha az egérmutató egy link fölé ér megszólal egy hangeffektus/
Popup Message Az akció megjelenít egy JavaScript figyelmeztetést a meghatározott szöveggel. Ez a figyelmeztető ablak csak egy ''OK'' gombot tartalmaz ezért ezt a lehetőséget akkor használjuk, ha a látogatót csak tájékoztatni kívánjuk és nem kell döntenie.
Preload Images Olyan képek előletöltése, amelyek nem jelennek meg azonnal az oldalon /pl. Azoké, amelyek csereképként lesznek használva/ Így az oldal működése a szükséges pillanatban folyamatos lesz.
Set Nav Bar Image A képet egy navigációs menü részévé akarjuk tenni, vagy meg akarjuk változtatni a megjelenését, vagy akcióját a navigációs menüben.
Set Text of Frame Lehetővé teszi a keretben a szöveg dinamikus megjelenítését, a tartalom cseréjét, vagy formázását meghatározott módon.
Set Text of Layer Ez az akció lehetővé teszi egy meglévő réteg tartalmának a cseréjét, vagy formázását az oldalon a kívánt módon.
Set Text of Status Bar Ez az akció üzenetet jelenít meg az állapotsoron a böngésző ablakának bal alsó részén. Például ezzel az akcióval jellemezhető egy link az állapotsoron, ahelyett, hogy a hozzá kapcsolódó URL jelenne meg
Set Text of Text Field Ez az akció lecseréli az űrlap szövegmezőjének tartalmát a meghatározott tartalomra.
Show-Hide Layers Ez az akció megjeleníti, elrejti vagy visszaállítja egy vagy több réteg alapértelmezett láthatóságát. Információk közlésére alkalmas a látogatóval, válaszul az ő cselekedeteire. /PL. az egérmutatót egy kép fölé viszi/
Swap Image Kicserél egy képet egy másikra azzal, hogy megváltoztatja a képforrás elérési útját.
Swap Image Restore A kicserélt kép visszaállítása. Ez az akció automatikusan hozzáadódik a képcsere ''Swap Image'' akcióhoz.
Go to Timeline Frame Ez az akció az ''idővonal mozi'', azaz az animáció egy képkockájához mozgatja a lejátszófejet. Az animáció egy meghatározott részletét lehet vele lejátszani.
Play Timeline and Stop Timeline A látogató az idővonal animációt lejátszhatja, illetve megállíthatja egy linkre vagy egy gombra kattintva.
Validate Form Ellenőrzi egy meghatározott szövegmező tartalmát, biztosítva, hogy a felhasználó megfelelő adattípussal töltse ki azt.
4.4. Hogyan jelenítsük meg a menüből meghívott tartalmat az általunk kiválasztott keretben.
Foglaljuk össze az eddigieket:
• Beszúrtunk egy táblázatot. Ez a táblázat jelenti a menüsorok keretét
• A táblázat celláiba elhelyeztük a menü címsoraiként szolgáló képeket
• A Behaviors palettát segítségül hívva elértük, hogy a menü interaktívvá váljon, azaz reagáljon a látogató cselekedeteire.
• A menüt tartalmazó Weboldalt hozzákötöttük az őt megjelenítő kerethez.
Nem maradt más hátra, életet kell lehelni az élettelen menüsorokba, vagyis el kell érni, hogy a rájuk kattintva a megfelelő tartalom megjelenjen oldalunk erre kialakított keretében.
a) Hivatkozás egy másik oldalra
A tulajdonság-felügyelő két újabb mezőjét kell használnunk a hivatkozás létrehozására és a megjelenítésre. Mindenek előtt jelöljük ki a menüsor szövegét, vagy a szöveget helyettesítő képet. Ezt követi a „Link” mező kitöltése. A hivatkozást legegyszerűbben a mező melletti mappa ikonra kattintva hozhatjuk létre, tallózással kiválasztva a menüsor által aktivizálni kívánt oldalt ./Na persze ha ezt az oldalt már korábban létrehoztuk. Ha még nem, akkor a létrehozást követően hajtsuk végre az itt ismertetett műveleteket./ Van azonban egy másik lehetőség is hivatkozás létrehozására. A „Link” mező és a mappa ikon között találunk egy kerek ikont is. Ez a „Point to File” ikon magyarul talán fájlra mutatásnak hívhatnánk. Ezt a kis ikont akkor tudjuk használni, ha a „Site ablak” /„Site” menü > „Site Files”/ nyitva van. Ekkor csupán annyi a dolgunk, hogy az említett ikont, a bal egérgombot lenyomva tartva kössük össze a „Site” ablakban található valamelyik korábban elkészített oldallal. Az így létrehozott hivatkozás megjelenik a „Link” mezőben.
28. ábra A menüpont és az általa meghívott oldal közötti kapcsolat létrehozása a ''Point to File'' ikon segítségével
Megadtuk tehát a menüsor által megnyitandó oldal nevét, de mivel kereteket használunk azt is meg kell adnunk, hogy ezek közül melyikben jelenjen meg az új tartalom. Ehhez a tulajdonság–felügyelő „Target” mezőjét kell szemügyre venni, és megfelelően beállítani. A képtulajdonságok beállításának tárgyalásakor már volt szó a „Target” mező lehetőségeiről. / „Blank” – új ablakban, „Parents” - .abban a keretben, amelyik a linket tartalmazza, „Self” a linkelt fájl ugyan ott nyílik meg, ahol link volt, „Top” a linkel ellátott fájl betöltődik a teljes böngészőbe, és így minden addigi keretet elmozdít./ Nekünk azonban most nem ezekre van szükségünk. A „Target” mezőbe kattintva írjuk be az általunk létrehozott keret nevét, „reszletek” pontosan úgy ahogy a keretcsoport mentésekor írtuk. Mentsük munkánkat, majd próba képen nyissuk meg az index.html-ként elnevezett keretcsoportot. Ha jól dolgoztunk, akkor a „menu” keretben már az elkészített menüsort találjuk. Nyomjuk le az F12 billentyűt, hogy oldalunk betöltődjön a böngészőbe. Most már kipróbálhatjuk, hogy a menü elemeire kattintva minden a kellő módon működik-e.
b) Hivatkozás az adott oldalon belül
A példamunka esetében a menüsor elemeivel egy-egy új oldalra hivatkoztunk, azokat töltöttük be a „reszletek” nevű keretbe. Hivatkozást azonban egy adott oldalon belül is létrehozhatunk, az oldal tetszőleges részeit összekötve. Az oldalon belüli hivatkozás létrehozása két részből áll.
• Be kell szúrnunk egy un. horgonyt a dokumentum azon pontjára, amire hivatkozni akarunk. Ehhez álljunk a kurzorral a megfelelő helyre, majd az „.|.” menü > „Invisible Tags” > Named Anchor” pontját választva szúrjuk be a horgonyt. Ehhez a lépéshez használhatjuk az objektum palettát is, csak át kell állítani az „Invisibles” címsorra. Mindkét esetben megjelenik egy dialógusablak, amiben el kell neveznünk a horgonyt. /Ékezetek és szóköz nélküli nevet válasszunk!/ /Ha a beszúrás után a horgony ikonja nem jelenne meg, akkor a „View” menü > „Visual Aids” almenüjében jelöljük ki az „Invisible Elements” pontot. /
29. ábra Horgony beszúrása az objektum palettáról
• Jelöljük ki az oldal azon elemét, ami a hivatkozás kiindulópontja lesz /szövegelem, vagy kép/ és a tulajdonság-felügyelő link rovatába gépeljük be a „#”jelet. Ezzel jelezzük, hogy a hivatkozás az adott oldalon belül keresendő. Írjuk a # jel után az előző lépésben létrehozott „Named Anchor”, azaz horgony nevét, majd mentsük munkánkat. Ezzel a hivatkozás az oldalon belül megszületett.
Nyitány 1
1. Ismerkedés a program indítóképernyőjével 1
2. A dokumentum ablak 1
Lássunk munkához 4
1. Kezdő lépések, azaz létrehozzunk egy üres „site”-ot 4
2. Az oldal megtervezése bizonyos „keretek” között 5
3. A keretek megtöltése, avagy a „CÍM” keret 7
3.1. Oldal létrehozása, oldaltulajdonság beállítások 8
3.2. Kép elhelyezése a dokumentumban 10
3.3. A képek jellemző tulajdonságainak beállítása 11
3.4. Képtérkép (Image Map) 13
4. Vigyázat mély víz! /táblázat, szöveg, képcsere, viselkedésmódok, avagy a „MENÜ” keret/ 14
4.1. Táblázat beszúrása („.|. Table”) 14
4.2. Menükészítés szöveg formázásával 15
4.3. Menü készítése képek és a „Behaviors” paletta használatával 16
4.4. Hogyan jelenítsük meg a menüből meghívott tartalmat az általunk kiválasztott keretben. 21
a) Hivatkozás egy másik oldalra 21
b) Hivatkozás az adott oldalon belül 22
Na ez alapján probálok weboldalt csinálni,de a feltöltött weboldal nem jelenik meg.
Valamit elbaszhatam?
Lehet hogy már a keretek kezdésekor elrontom(lehet ,hogy rosszul mentem el a fájlt nem tudom.Akönyv ezt írja erröl:
'' Itt a keretcsoportra jellemző tulajdonságokat mentjük, /pl a benne foglalt keretek száma, elrendezése, stb./ Ha ez a kezdőlap keretcsoportja mentsünk index.htm, vagy index.html néven.
A keretcsoportot alkotó keretek tulajdonságait menti el annyiszor felkínált párbeszédablakban ahány keretből a keretcsoportunk áll .''
Ezt nem tudom értelmezni.Help -
#32
.::cHeKkk::.
tag
.::cHeKkk::.
tag
Halee
Nekem is kéne egy kis help
BEle is vágok :
A honlap háttere egy kép lene ami maga a honlap designolva na ezt a képet beállítom háttérnek.
Na de mivel ezen van a menü és menüpontok linkelés kéne de külön a menüpontokra mivel ezhátteér nem tudok ilyen kis zöldátlátszó '' area '' -t ráhúzni
Hogyan tudnám megoldani a problémát???
Az hogy a képet beszúrom és nem háttérnek beállítom ELVETVE ezt nem csinálom mert sz*r lesz.... -
#30
Trak
addikt
Alvin_ti4200
#29
Trak
addikt
válasz
Alvin_ti4200
#29
üzenetére
A target hez kell beírni elvileg hogy hova nyíljon a link. Lehet frame nevet is megadni, ha azt akarod, hogy az egyik frame edbe nyíljon.
Ha új ablakban akarod, akkor egyszerűen írj bele vlamit.. Mondjuk azt, hogy alvin :) Csak vigyázz, hogy ne legyen alvin nevü frame-d.
tehát:
<a href=http://www.akarmi.hu target=alvin>
De asszem Dreamweaver ben be lehet állítani a linknél, hogy külön ablakban nyíljon meg. Nem tudom, most nincs fenn... -
#29
Alvin_ti4200
félisten
Alvin_ti4200
félisten
Linkelésnél mit kell és hova beírni, hogy a lap külön ablakban nyíljon meg?
-
#24
q0w1e2
tag
Alvin_ti4200
#22
q0w1e2
tag
válasz
Alvin_ti4200
#22
üzenetére
mihez rendeled a hátteret?
például table:
<table style=''background-attachment:fixed'' background=''hatter.gif''>
úgyanígy <tr> nél <td> nél -
#21
q0w1e2
tag
Alvin_ti4200
#20
q0w1e2
tag
válasz
Alvin_ti4200
#20
üzenetére
style=''background-attachment:fixed''
-
#20
Alvin_ti4200
félisten
Alvin_ti4200
félisten
Hogy lehet vízjeles hátteret beállítani Dreamweaver MX2004-ben? Égre-földre kerestem már, de sehol nem találtam. Nem programkódot írok, hanem tervező módban dolgozom. Jó lenne ha a háttér nem mozogna scroll-ozásnál csak a többi. Köszi előre is a segítséget.
-
q0w1e2
tag
ha tudnád, hogy mennyit olvasok közben. úgy néz ki, hogy nem ez a megfelelő forum a dreamw. kérdéseket feltenni. van egy két dolog, ami ott van a szemem előtt, és mégsem látom. 1 óra alatt kitalálom, de ha valaki tudná a választ, ez az idő kicsit lecsökkenne. nekem kifejezetten a prg-vel van gondom, nem a html-el.
-
q0w1e2
tag
újabb probléma:
egy gombhoz rendelek egy eseményt, ami le is fut, csak egyből visszaáll az eredetire. gombnyomásra megváltozik egy kép mérete, egy villanásnyi időre.
miért van ez? miért áll vissza az eredeti?
<input name=''Submit'' type=''submit'' onClick=''MM_changeProp('kep','','width','300','IMG')'' value=''Submit''>
thx! -
q0w1e2
tag
én tudom, meg lehet. az egyik frame-em (bal oldali menu) ilyen. de az összes úgy van beállítva (marginw, marginh, border, stb...) és azok mégsem akarják a jót.
nézz meg akármilyen oldalt! látsz a bal szélén, meg a tetején üres sávot? általában nem, na ott is meg lehet csinálni.
????
Aktív témák
- MWC 2026: Munkahelyi igásló lehet a Lenovo ThinkTab X11
- Határozatlan időre kiszáll az Asus a mobilbizniszből
- Meghozta a régóta várt asztali Ryzen APU-kat az AMD
- TCL LCD és LED TV-k
- Androidos tablet topic
- Dell notebook topic
- A fociról könnyedén, egy baráti társaságban
- Google Pixel topik
- Luck Dragon: Asszociációs játék. :)
- Tápos kibeszélő offtopik
- További aktív témák...
- Thermal Grizzly Aeronaut paszta 3,9g /BONTATLAN/Több darab/Számlával/
- GYÖNYÖRŰ iPhone 14 Pro Max 256GB Space Black -1 ÉV GARANCIA -Kártyafüggetlen, MS4031
- Lenovo ThinkPad dokkolók: USB-C 40A9/ 40AY/ 40AS/ Thunderbolt 3 40AC/ Hybrid USB-C DisplayLink 40AF
- CoolerMaster MM710 53gr pehelykönnyű gamer egér eladó
- BESZÁMÍTÁS! Gigabyte GTX 1050 OC 2GB videokártya garanciával hibátlan működéssel
Állásajánlatok
Cég: Laptopműhely Bt.
Város: Budapest