Xara Webstyle 3 - Álmodtam egy weboldalt

Számos, internetoldalak készítésével kapcsolatos programot mutattunk be, HTML-szerkesztőtől a grafikán át egészen az animációig. Az ingyen kipróbálható Xara Webstyle 3 egymaga vállalja egy teljes oldal felépítésének lépéseit, ráadásul nagyon látványos módon.

Koncepciója szerint a Xara Webstyle azok számára készült, akik nem feltétlenül akarnak a Photoshop segítségével pixeleket kergetni a képernyőjükön, hanem bizonyos kötöttségek felvállalásával ugyan, de gyorsan és egyszerűen szeretnének látványos grafikai elemekre épülő weboldalakat létrehozni. Már a főmenü kellően meghökkentő: a képernyő nagy részét nem gombok, hanem narancssárga gömbök töltik ki, szám szerint tizenegy darab. Ezek jelképezik a weboldal egy-egy komponensét a szalagreklámoktól (banner) a logókon, fejléceken át egészen a navigációs panelekig. A 11. gömb a teljes grafikai csomagot jelenti, azaz az összes előző elemet egyben, egy bizonyos témára felépítve.

Szűrt sablonos komponensek világa

A program előre gyártott sablonokkal dolgozik, mégpedig rengeteggel. Jó tudni, hogy ezek mind vektor alapúak, azaz szabadon átméretezhetőek, minőségromlás nélkül. Csak a legvégső lépésben generálódik belőlük az interneten megjeleníthető pixeles grafika. A rengeteg sablon közötti eligazodást szűrők használata könnyíti meg. Tételezzük fel, hogy először is szükség volna egy logóra céges weboldalunkhoz. A Logos gömbre kattintva feljön a Webstyle keresőfelülete. Az alsó panel szélén látható paraméterlista nagyjából minden esetben azonos: az adott komponens viszonya a szöveghez (kívül, belül, többsoros szöveg, csak szöveg stb.); a lapos vagy háromdimenziós kinézet, esetleg az élletöréssel kombinált még látványosabb küllem; sima színekből épül-e fel vagy textúrázott; alakját tekintve inkább egyenes vagy íves vonalakból épül-e fel; és végül kevésbé vagy jobban összetett-e. Nyilván nem minden elemre érvényes minden szűrő, így egy sima elválasztó csík esetében lényegtelen a szöveg elhelyezkedése, hiszen nincs benne. De a logónál maradva már igenis számíthat, hogy a szöveg hol és hogyan helyezkedik el, vagy hogy milyen látványvilágú grafikából akarjuk kialakítani.

A Xara fejlesztői szerint komponensenként 30 új sablon került a programba, így egyenként jóval több mint 200 darab közül válogathatunk. A szűrőket használva is többoldalas eredménylistára számíthatunk, ezek között az alsó panel jobb felső sarkában látható nyilakkal navigálhatunk. Mint látni fogjuk, a Webstyle számtalan látványos effektussal és különböző betűkészletetekkel operál (lássuk be, elég snassz egy Times New Roman betűtípussal írt logófelirat), ám sajnos az általa hozott betűkészletek nem kelet-európaiak, így jobb, ha a cég nevében (illetve a menükben és más komponensekben is) tartózkodunk az ő és ű betűk használatától (a többi általában meglesz).

Ha megtaláltuk az igazi sablont, a testreszabás lépései következnek. Ebben a baloldalt egymás alatt elhelyezkedő gombok segítenek. Megadhatunk saját szöveget, átszínezhetjük, vagy textúrát rendelhetünk a kiválasztott komponens egyes részeihez, állíthatunk az élletörésen, többféle árnyék közül választhatunk, és végül a méretéről is rendelkezhetünk. Az eredmény mindig a képernyő tetején levő mezőben látható, azonnal frissülő előnézeti kép formájában. Szinte minden beállítópanelen megtalálható az Advanced gomb, amely a haladó felhasználók számára további finomhangolási lehetőségeket rejt.

Amennyiben menüt vagy navigációs panelt (NaviBar) készítünk, a helyzet egy kicsit bonyolultabb. A Webstyle külön panelt tartogat arra, hogy a kiválasztott séma alapján összeállíthassuk a menüt. Alul egyszerű fastruktúrában láthatók az egyes menüpontok, amelyeket tetszőleges szövegre cserélhetünk ki. A 3-as verzió egyik fő újdonsága, hogy almenüket hozzáadva dinamikus HTML kódon alapuló legördülő menürendszert hozhatunk létre. Beállíthatjuk, hogy az adott gombra kattintva melyik weboldal jöjjön majd fel, illetve - gondolva a keretes oldalakra - azt is megadhatjuk, hogy melyik keretben nyíljon meg a kívánt oldal. Végül mindezek alapján a program elkészíti a menük JavaScript forráskódját, elmenti a grafikákat, s már csak egészen minimális HTML-ismeret szükséges ahhoz, hogy mindezt egy mozdulattal beépítsük saját oldalainkba. Sőt, még erre sincs igazából szükség, ugyanis mentéskor a Webstyle felajánlja, hogy böngészőnkben mutatja meg az elkészült alkotást; így használhatjuk mintának a böngészőbe töltött forrást.

A mentés során választhatunk, hogy grafikáinkat GIF, JPG vagy PNG formátumban szeretnénk-e tárolni, és milyen tömörítéssel. Vigyázat: a nagy tömörítési arány könnyen a képminőség romlásához vezethet!