Web oldalak, könnyedén
Aki követte a két legutóbbi rész tanácsait, esetleg még az Interneten látott néhány ötlettel is kiegészítette tudását, bizonyára már szép Web oldalt mondhat magáénak. Az eddigi kitartásának itt a jutalma, sorozatunk mostani részében bemutatunk egy grafikus Web szerkesztõt.
A HTML forrás szöveg szerkesztése gyakran nélkülözhetetlen, azonban a bonyolultabb, táblázatokat, kérdõíveket, kereteket tartalmazó oldalakat már nehéz egyszerû szövegszerkesztõvel elkészíteni. Szerencsére számos remek. grafikus felületû Web szerkesztõ programot lehet kapni, amelyek használatakor semmit sem kell tudnunk a hipertext leíró nyelvrõl, csupán ikonok, egér mozdulatok segítségével tudjuk elkészíteni honlapunkat. A sok HTML szerkesztõ közül, egy idehaza méltánytalanul kevéssé alkalmazottat mutatunk be. Az Adobe PageMill 2.0 mintaként szolgálhat, hiszen a többi Web szerkesztõvel is hasonlóan dolgozhatunk.
Amit eddig is tudtunk
A PageMill egy Web böngészõ és
egy Web oldal szerkesztõ egyben. Azt, hogy éppen
böngészünk vagy szerkesztünk, a program
keretének jobb felsõ sarkában látható
ikon jelzi. Egyébként a két állapot
közötti váltáshoz egyszerûen csak
erre az ikonra kell kattintani. Egy új Web oldal szerkesztésének
kezdetekor az alapértelmezett szürke háttér
jelenik meg egy teljesen üres oldallal. Ide, mint egy szövegszerkesztõbe,
beírhatjuk az oldal szöveges tartalmát. A betûtípusokat,
betû méretet, sor igazítást egyetlen
gombnyomással beállíthatjuk a menü sorban
található ikonok segítségével.
A beállítások mindig a kurzor pillanatnyi
helyétõl kezdõdõen lesznek érvényesek.
Azt is megtehetjük, hogy egy már beírt szöveg
tulajdonságait változtatjuk meg. Ehhez ki kell jelölni
a szövegrészt és utána beállítani
a jellemzõit. A szöveg méretét egyrészt
a Formatum menüben felsorolt Paragraph, Heading, List kiválasztása
határozza meg, de ezeken belül is néhány
lépésben csökkenthetjük vagy növelhetjük
a betû nagyságot.
Az egyszerû szövegszerkesztõ használatával
a betûk színezése bonyolult feladat volt.
Itt a dolog sokkal egyszerûbb. A kijelölt vagy a kurzort
követõ szövegrész színeit egy színskálán
jelölhetjük ki. Használhatjuk a leggyakrabban
alkalmazott színeket, de magunk is keverhetünk ki
egyedi árnyalatokat. Az egész dokumentum jellemzõinek
beállításában az Inspector segít.
Ez a kis ablak a szerkesztõ mellett jelenik meg és
tartalma dinamikusan változik, attól függõen,
milyen objektumot, részt jelöltünk ki a szerkesztõ
ablakban. Ha éppen semmi sincs kijelölve, akkor az
egész Web oldal alapértelmezett tulajdonságait
változtathatjuk meg. Ilyen például, hogy
milyen színû legyen a normál szöveg,
a hipertext kapcsolat és a már meglátogatott
helyekre mutató linkek színe. Szintén itt
állíthatjuk be az alap betû méretet
és az egész oldal hátterének színét.
Azt is megtehetjük, hogy a háttérhez nemcsak
egy színt rendelünk, hanem egy képet, amely
méretétõl függõen egészében
vagy mozaik szerûen hátteret biztosít a szövegnek.
A jó kapcsolatok
A hipertext dokumentumok alapvetõ jellemzõje, hogy
találunk benne olyan szövegrészeket, képeket,
amelyekre kattintva egy másik dokumentum töltõdik
be. Ez a másik Web oldal lehet azonos szerveren, de akár
a világ másik végében is. A PageMill
használatakor gyorsan létrehozhatjuk ezeket a kapcsolatokat.
Jelöljük ki a szövegnek azt a részét,
amelyiket hivatkozásként szeretnénk használni,
majd egyszerûen írjuk be a szerkesztõ alján
található Link To sorba a megfelelõ URL címet.
Természetesen, ha nem egy szövegrészt, hanem
egy képet jelöltünk ki, akkor a hivatkozás
a képhez fog tartozni, tehát a böngészõben
majd a képre lehet kattintani a link eléréséhez.
Ha több saját Web oldalt készítünk,
és ezeket akarjuk egymáshoz kapcsolni, még
egyszerûbb a helyzet. Ilyenkor nem kell kézzel beírni
a hivatkozott dokumentum címét, elég azt
is megnyitni egy PageMill ablakban, és az ablak bal felsõ
sarkában található kis írólapot
ábrázoló ikont elhúzni a Link To sorba.
Az megfelelõ URL cím automatikusan meg fog itt jelenni.
Gyakran alkalmaznak olyan hivatkozásokat, amelyek segítségével
egy hosszabb dokumentumon belül ugrálhatunk. Ehhez
horgonyokat (anchor) kell elhelyezni a szövegben. Ezek az
objektumok nem fognak látszani a böngészõ
programban, de a linkek megadásakor ugyanúgy használhatjuk
õket, mintha önálló dokumentumok címei
lennének.
Aki igazán izgalmas Web oldalt szeretne készíteni, az olyan képeket is elhelyezhet az oldalon, amelyeknek egyes pontjaira kattintva, más és más hivatkozásokhoz jutunk. Az ilyen map típusú ábra elkészítése sem okoz gondot a PageMill-nek. Miután elhelyeztük a map-ként használni kívánt képet az oldalon, egy dupla kattintás után új ikonok jelennek meg a menü sorban. Ezek felhasználásával aktív területeket, úgynevezett forró pontokat tudunk kijelölni a képen. Minden forró ponthoz megadhatunk egy URL hivatkozást. Amikor egy böngészõ programból nézzük meg az így elkészített map képet, akkor a kurzor idõnként átváltozik mutató ujjá, és a státusz sorban láthatjuk, hová vezet a forró pont hivatkozása.
Rend a lelke mindennek
A HTML dokumentumokban meglehetõsen nehéz feladat
a szövegrészek, ábrák, képek
pozícionálása. Ha biztosak akarunk lenni
benne, hogy böngészõ programtól függetlenül,
minden ott fog megjelenni, ahová szántuk, érdemes
táblázatokat használni. Létrehozásukhoz
csak a táblázat ikonra kell kattintani, és
a megjelenõ táblázatot annyi sorosra és
oszloposra húzni, amekkorára szükségünk
van. A táblázat celláiba írhatunk
szöveget, rakhatunk bele képeket és természetesen
mindkét esetben rendelhetünk ezekhez hivatkozásokat
is. Az így elhelyezett objektumok egymáshoz viszonyított
helyzete mindig állandó lesz. A PageMill segítségével
létrehozhatunk statikus és dinamikus táblázatokat.
Az elõbbiek mérete állandó, ha egy
kisebb ablakban nézzük õket, akkor csak egy
részük fog látszódni. A dinamikus táblázatok
azonban bizonyos fokig alkalmazkodnak az aktuális ablak
mérethez, ha a cellák tartalma megengedi, akkor
az oszlop szélességek igazodnak a böngészõ
ablak méretéhez. A táblázat jellemzõinek
beállításához ismét segítségül
hívhatjuk az Inspector-t. Többek között
ezzel határozhatjuk meg, hogy milyen vastag keret vegye
körül a táblázatot és a cellákat.
Ha valójában csak a megfelelõ elhelyezés
biztosítása érdekében alkalmaztuk
a táblázatot, akkor beállíthatjuk,
hogy nulla legyen a keret mérete. Ilyenkor a böngészõ
programból nem fogjuk látni az esetleg zavaró
táblázat felépítést, ott már
csak a benne lévõ objektumok jelennek meg.
Két irányú forgalom
Amikor létrehozzuk elsõ Web oldalainkat,
arra számítunk, hogy minél többen fogják
felkeresni, megcsodálni azokat, a világ minden tájáról.
Azonban arról, hogy tényleg kik jártak ott
nem sokat tudunk, hacsak ki nem kérdezzük õket.
Ehhez elhelyezhetünk egy kérdõívet az
oldalon, amelyet ha kitöltenek, a megadott adatok valamilyen
formában eljutnak hozzánk. Ezzel a módszerrel
akár megalapozhatjuk interneten keresztüli kereskedésünket
is, hiszen készíthetünk egy olyan kérdõ
ívet, amely egy megrendelõ lapnak felel meg. A PageMill
eszköz sorában minden szükséges kelléket
megtalálunk. Egy-egy ikon kiválasztásával
Check Box-ot, Radio gombot, szöveg mezõt, jelszó
mezõt és felsorolás mezõt illeszthetünk
a dokumentumba. A kitöltött kérdõív
elküldéséhez a Submit, törléséhez
a Reset gombot helyezhetjük a lap aljára. A kitöltött
adatokat a Submit gomb megnyomásával fogja tudni
elküldeni a Web oldal látogatója. Az persze
már egy külön feladat, hogy ezek az adatok, hogyan
jutnak el hozzánk. A legjobb megoldás, ha az adatok
azonnali feldolgozásához a internet szolgáltató
szerverére elhelyezett, általunk írt CGI
(Common Gateway Interface) scriptet használjuk. Ezen a
speciális nyelven számos feladatot meg lehet oldani,
azonban tudni kell hozzá, hogyan lehet ezeket a szerveren
elhelyezni. A másik megoldás, amihez nem szükséges
a szolgáltató segítsége, ha a Submit
gomb megnyomásához azt a funkciót rendeljük,
hogy a látogató által beírt adatokat
egy elektronikus levélben küldje el címünkre
a Web oldal. A formok, kérdõívek alkalmazásával
tehát nem csak mi adhatunk információkat,
hanem hozzánk is érkezhetnek visszajelzések,
adatok.
Mindent a megfelelõ keretek között
Egy Web oldalon található információkat
könnyebben lehet felhasználni, ha egyszerre több
ablakot is használunk. A böngészõ programok
legtöbbje már tudja értelmezni az olyan hipertext
dokumentumokat, amelyek kereteket, frame-ket tartalmaznak. Egy-egy
keretben különbözõ Web oldalakat jeleníthetünk
meg. A legjobb példa a keretek felhasználására,
amikor függõlegesen osztjuk két részre
a böngészõ ablakát és az egyik,
általában keskenyebb területen a Web hely tárgymutatóját
helyezzük el, míg a nagyobbik részen mindig
a kiválasztott információ látszik.
Így nem kell mindig visszalépkedni a kezdõ
oldalra, az mindig ott marad az egyik keretben. Persze, az ablakot
kedvünkre szabdalhatjuk, annak megfelelõen, milyen
szerkezet felel meg legjobban elképzeléseinknek.
A kereteket a PageMill segítségével, egyszerû
egér mozdulatokkal hozhatjuk létre, illetve változtathatjuk
méretüket. Egy ilyen keretes hipertext oldal több
HTML dokumentumból áll. A keretekben megjelenõ
önálló oldalak mellett kell még egy
olyan oldal is, amely leírja, hogyan és mekkora
darabokra van felosztva a böngészõ ablaka.
Ezt a vezér oldalt is automatikusan generálja a
PageMill, csakúgy, mint a keretek tartalmát. A keretek
használatával azonban bánjunk óvatosan,
elõfordulhatnak még olyan böngészõ
programok, amelyek nem tudják kezelni az ilyen dokumentumokat.
Ezért a keretes oldalaknak érdemes elkészíteni
az egyszerû változatát is, és a nyitó
lapon rábízni a választást az oldalra
látogatóra.