E-mail











Címlap

Vissza


ADSL

Könyvajánló - ...

FreeHand 10, a telitalálat

Honlap-tervrajz gyorsan...

Virtuális hangszerek

OKI 7400

Szépítsünk táblázatot ...

3D a multimédiában

Melyiket válasszam?

OSX akták I.

ArchiCAD-alapú DB CAD

AppleNews

 


Honlap-tervrajz gyorsan és könnyen

Szerkesszük meg website-unk felépítését Adobe GoLive-val


Ha honlap-tervezésre adjuk a fejünket, leghasznosabb segítôtársunk nem egy villámgyors Power Mac, de még csak nem is a korlátlan sávszélesség, hanem a szerény, háttérben meghúzódó site-map, a honlapok szerkezetének alapja, növekedésük programtervezete (mert a site-ok bizony mindig növekednek).

A hagyományos, gyakran papíron testet öltô site-map egyik nagy hátránya, hogy a kivitelezés során végbemenô drasztikus változtatások eredményeként általában össze-vissza javított, követhetetlen firkálmánnyá redukálódik. Még ha elektronikus formában készítjük is el – mondjuk egy Macromedia FreeHand vagy egy Adobe Illustrator fájlt alkotunk – a honlap struktúrájának megváltozása esetén akkor is órákat tölthetünk a site-map újrarajzolásával.

A site-mapek szerkesztéséhez mostanáig kevés digitális eszköz állt rendelkezésünkre, Macre meg aztán szinte semmi. Az Adobe GoLive 5 (http://www.adobe.com/) most olyan új Design eszközzel rukkolt ki, amelynek segítségével nemcsak gyorsan létrehozhatjuk és szerkeszthetjük is a site-mapünket, de több változatot is készíthetünk belôle (amelyeket a GoLive terms tervez meg) ugyanahhoz a honlaphoz, hogy több különbözô megoldást is kipróbálhassunk. Ha elkészült, a térképet használhatjuk a honlap vázaként.

1. Hozzunk létre egy Site fájlt és egy Designt

A GoLive site-kezelô képességeinek gerince a site fájl, amely rengeteg különféle információt tárol. Ezt a site fájlt a Designs fül alatt nézhetjük meg a Site ablakban.

Az új site fájl létrehozásához a File menü New Site almenüjébôl válasszuk a Blank menüpontot (Alma-Alt-N) és nevezzük el. A GoLive automatikusan .site kiterjesztést tesz az általunk beírt névhez. Az összefüggô fájlokat ugyanezen a néven közös folderbe menthetjük, ha a Create Folder opciót kiválasztjuk. Végül kattintsunk a Choose gombra. A GoLive most automatikusan létrehoz egy index.html nevezetű honlap fájlt.

Az ekkor megjelenô Site ablakban válasszuk a Designs fülecskét, kattintsunk a Design menü New Site Design menüpontjára és adjunk nevet a tervrajzunknak.

A site-map megalkotásához elôször kattintsunk duplán a design ikonra, amely megnyitja a design-szerkesztô ablakot.

2. Hozzunk létre egy oldalcsaládot

A térkép megrajzolása elôtt horgonyozzuk új designunkat az index.html oldalhoz, majd az Objects palettából húzzunk jó sok üres oldalikont a leendô site-mapre.

Menjünk vissza a Site ablak Files fülecskéjéhez és húzzuk az index.html fájlt is a design-szerkesztô ablakba. Ezután az Objects palettán (Alma-2) váltsunk a Site fülre és keressük meg a site-tervezéshez használatos 4 eszköz ikonját: Generic Page (általános oldal), Design Section (terv szegmens), Design Group (tervcsoport), és Design Annotation (megjegyzések). Az oldalcsalád létrehozásához elôször húzzunk egy új Generic Page ikont vagy egy Design Section ikont az index.html horgonyára – a meglevô oldal mellett egy fekete vonalnak kell megjelennie.

Ha az ikont fölül engedjük el, szülôt (parent) hozunk létre, amely egy szinttel feljebb helyezkedik el; ha a jobb vagy bal szélén, akkor testvér (sibling) jön létre, amely a site-hierarchia azonos szintjén foglal helyet; és ha lent engedjük el, utód (child) oldalt kapunk, amely egy szinttel lejjebb van a már meglévô oldalunknál. A navigációs útvonalakat zöld nyilak mutatják. A Design Section ikonnal egy vagy több olyan site-map oldalt hozhatunk létre, amelyek a hierarchiában majdan saját almappában fognak helyet foglalni – ezeknek az oldalsablonja is közös lehet.

3. A térkép értelmezése

A Generic Page és a Design Section eszközökön kívül a site-szerkezet tervezésében még két dolog áll rendelkezésünkre: a Design Group és a Design Annotation.

Az Objects paletta Design Group ikonja valamiféle tartályt jelképez; a belehelyezett oldalak a képernyôn is csoportosítva maradnak. Bár a csoportba foglalás nem befolyásolja az egyes elemek helyét a hierarchiában, segít nyomon követni az összetartozó egységeket, például az azonos témájú oldalakat. A Design Groupok csak és kizárólag a rendszerezés kedvéért állnak fenn.

A Design Annotation segítségével megjegyzéseket vagy kérdéseket fűzhetünk a terv egyes elemeihez, mintha csak öntapadós cetliket ragasztgatnánk a papírra rajzolt site-mapünkre. A megjegyzés „odatapasztásához” húzzuk rá a Design Annotation ikont az egyik oldalra, csoportra vagy linkre.

A címkék tartalmát az Annotation Inspector segítségével határozhatjuk meg.

4. Hozzunk létre feltételes linkeket

A site szerkezetének áttekintésével tulajdonképpen meg is volnánk, de még hátra van a működô hyperlinkek létrehozása, hogy látogatóink közlekedni tudjanak az oldalak között. Miután megteremtettük a linkeket, könnyedén hozzáadhatjuk ezeket az oldalak tartalmi részéhez.

Ahhoz, hogy a Point And Shoot eszköz megjelenjen az oldal-ikonunk jobb alsó sarkánál, kattintsunk rá az oldalikonra. Az oldalak összelinkeléséhez kattintsunk rá erre a Point And Shoot eszközre, és lenyomott egérgombbal húzzuk rá a céloldalra, amíg az ki nem jelölôdik, majd engedjük el.

Ha sikeres volt a hyperlink hozzáadása, kék nyilak fogják jelezni. A linkekre kattintva a felezôpontjuknál fogva megváltoztathatjuk a vonalak dôlésszögét (ez sokszor megkönnyíti az észrevételüket), de ugyanezt a Link Inspector Deflection legördülô menüjében is beállíthatjuk.

Késôbb, amikor az oldalakat tartalommal töltjük fel, a feltételes linkek megjelenítéséhez a Page Inspectort kell elôhívnunk a Layout Editorból, majd a Pending fülecskére kattintani. Ekkor a linkeket be is helyezhetjük az aktuális oldalba, csak a Pending fül ablakából az oldalunkra kell húznunk.

5. A tervezet elfogadása

A site szerkezetkész, a linkek is a helyükön vannak, de a terv még csak egy rakás üres oldalt tartalmaz. Most már aktiválnunk kellene az oldalakat, hogy honlapunk csontvázára kerülhessen némi hús is. A site aktiválásához elôször ellenôrizzük a tervet, majd fogadjuk el.

Az esetleges hibák megkereséséhez – amelyek megakadályoznák, hogy a GoLive megvalósítsa a tervezetünket, azaz a fájlikonokból igazi fájlokat generáljon a site fôkönyvtárában – kattintsunk az eszközsáv Check Design gombjára. Hibák leginkább a fájlok elnevezésében és a linkek elhelyezésében fordulhatnak elô. A GoLive a lehetséges problémákat a design ablak Staging fülecskéje alatt jelzi. Ha a tervezetünk rendben van, itt az ideje, hogy aktiváljuk. Kattintsunk az eszközsáv Submit Design gombjára, vagy a Design menü Design Staging almenüjébôl válasszuk a Submit Design menüpontot. A GoLive ekkor áthelyezi az oldalainkat a design ablak Live Files mappájába (a Site ablak Files fülecskéje alatt szintén megtaláljuk ôket).

És most, hogy elkészültünk a honlap szerkezetével és van egy csomó üres fájlunk, rátérhetünk a dolog könnyebbik részére: a site tartalmának és megjelenésének megtervezésére.

Jeff Carlson
JEFF CARLSON a „Real World Adobe GoLive 5” (Peachpit Press, 2000) egyik társszerzôje és a TidBits online newsletter szerkesztôségének vezetôje.


A lap tetejére