Webszerkesztés Dreamweaver használatával

Átírás

1 Dreamweaver történelem Webszerkesztés Dreamweaver használatával 1996-ban mutatta be először a Macromedia szoftverház az első WYSIWYG ( What You See Is What You Get = Amit látsz, azt kapod) webszerkesztő programot, mely a Dreamweaver (álomszövő) nevet kapta. A program segítségével egy grafikus tervező felületen lehet weboldalakat készíteni. A program a grafikai felületen beillesztett tartalmakat fordítja le HTML nyelvre. Az első bemutatás óta kilenc verzió került piacra a folyamatos fejlesztések következtében. Talán a piacon eltöltött hosszú idő és tapasztalat teszi a Dreamweaver-t professzionális webszerkesztő alkalmazássá. Jelenlegi legújabb változata már az Adobe szoftverház védjegye alatt fut, mivel az Adobe szoftverház felvásárolta a Macromedia szoftverházat, ezzel együtt az összes Macromedia terméket is. Így a legújabb változat neve: Adobe Dreamweaver CS3 (Creativ Suit 3-as verzió) Dreamweaver előnyök A Dreamweaver sok oldalúan tud együtt működni más olyan alkalmazásokkal, melyek szintén a webszerkesztés elengedhetetlen eszközei. Ilyen alkalmazás például az Adobe Flash CS3 (régebben ez is Macromedia termék volt), melyet webes animációk készítésére alkalmazunk legtöbbször. Meg kell említenünk az Adobe Fireworks CS3 grafikai képszerkesztő programot, mely egy kimondottan webszerkesztésre optimalizált program, és a Dreamweaverben több helyen is megtalálható kettőjük együtt működésnek lehetősége a weboldalba illesztett képek területén. A Dreamweaver egy olyan webszerkesztő alkalmazás, mely nem specializálódott egyik böngésző megjelenítési képességeire sem. Ez azt jelenti, hogy nincs semelyik böngészőre optimalizálva, hanem legjobb tudása szerint olyan oldalakat készít, melyek minden böngészőben megfelelően működni fognak. (Megjegyzés: Ez egy azért fontos tulajdonság, mert vannak olyan webszerkesztő alkalmazások, melyek kimondottan optimalizálva vannak egy adott böngészőre. Ilyen például a Microsoft Front Page, ami maximálisan Microsoft Internet Explorer orientált.)

2 Dreamweaver ablak felépítése Objektum paletta Segítségével különböző HTML objektumokat tudunk elhelyezni az oldalon, mint például aképek, táblázatok, hivatkozások stb. A könnyebb kezelhetőség kedvéért ezeket kategóriákba sorolták. Kategóriák közötti váltáshoz kattintsunk a Common felirat mellet látható háromszögre, majd a megjelenő menüből válasszuk ki a megfelelőt. Ha ez az újszerű elrendezés nem szimpatikus, vagy megszoktuk a korábbi verziók elrendezését a háromszögre kattintva a Show as Tabs parancsot választva visszatérhetünk hozzá. Nézet választók Itt választhatjuk ki, hogy milyen nézetben szeretnénk látni az aktuális weblapunkat. Háromféle nézetet választhatunk: Code, a HTML kódot látjuk, Split, egyszerre látszik a HTML kód és a weblap tervezői nézete. Alapértelmezés szerint 50-50% foglalják el a dokumentum ablaknak. Természetesen ez függőleges irányban megváltoztatható. A két ablakot elválasztó vonalra kell mozgatni az egér kurzorát, amíg az kettős nyíllá nem változik, ezután a többi Windows alkalmazásból ismert módón kell eljárni. A harmadik nézet a Design nézet, többé-kevésbé azt látjuk, ahogy az oldalunk ki fog nézni. Ezen a nézeten grafikus objektumok segítségével tudjuk szerkeszteni a weboldalunkat. Properties paletta Egy dinamikus konfigurációs paletta, mely mindig annak az objektumnak a tulajdonságait mutatja, amelyik éppen ki van jelölve. Ez azért fontos, mert minden opció egy helyen érhető el, és nem kell keresgetnünk a beállításokat a menüsorban.

3 Site Root meghatározása Mint azt már említettük, a webszerkesztő egyik legfontosabb feladata, hogy a weboldal minden tartalmi részét egy a weboldal szempontjából- kitűntetett könyvtárban tárolja, mely a weboldal SiteRoot-ja. Ezzel maximálisan tisztában van a Dreamweaver is, így mielőtt elkezdünk vele dolgozni, meg kell határozni, hogy melyik site az, amelyiket most szerkeszteni fogjuk. Két lehetőségünk van. Az egyik, hogy létrehozunk egy új site-ot, a másik, hogy egy meglévő site-ot akarunk szerkeszteni. Mindekét esetben a legfontosabb az, hogy ezáltal a Dreamweaver azonosítja majd a siteroot-ot, és a továbbiakban rábízhatjuk magunkat abból a szempontból, hogy az általunk mentett dokumentumok, vagy az általunk beszúrt tartalmi elemek (pl., képek) már ebbe a könyvtárba fognak kerülni. Ez egy olyan biztonságos funkció, amely figyelmeztet minket abban az esetben, ha például egy siteroot-on kívüli könyvtárból illesztünk be egy képet weboldalunkba. Ilyenkor a Dreamweaver megkérdezi, hogy akarunk-e egy másolatot a képről a siteroot-unkba. Nézzük tehát a gyakorlati SiteRoot meghatározását mindkét esetben: 1., Új site létrehozása Site menü-> New Site parancsát kell választanunk, ahol a következő ablak fogad bennünket: Az ablak tetején két Site beállítás nézet közül választhatunk: Basic (alap), és Advanced (kiterjesztett) Jelen esetben a Basic nézetben fogjuk beállítani site-unkat.

4 a., A Dreamweaver megkérdezi, hogy milyen nevet szeretnénk adni a létrehozni kívánt sitenak. Ez a név nem publikus név, ezt csak a dreamweaver arra használja, hogy nekünk könnyebb legyen azonosítani. b., A következő beállítás arra vonatkozik, hogy milyen webcímen lesz publikálva a weboldal. Természetesen ennek kitöltése nem kötelező, mert az is leképzelhető, hogy miközben szerkesztjük a weboldalt, még nem tudjuk, hogy milyen domain-t akarunk hozzá regisztrálni. Ha ezekkel a beállításokkal megvagyunk, kattintsunk a Next gombra, hogy tovább léphessünk. Ebben az ablakban a Dreamweaver megkérdezi, hogy a weboldal szerkesztése során használunk-e server oldali technológiát, mint például php. a., Jelöljük be, hogy nem használunk b., Itt lehetne jelölni, ha használnánk ilyen technológiákat. Újból kattintsunk a Next gombra, hogy tovább léphessünk.

5 Ebben az ablakban állíthatjuk be, hogy a saját számítógépünkön szerkesztjük-e weboldalunkat, vagy közvetlenül a távoli serveren. a., Ez a lehetőség jelenti azt, hogy a saját gépünkön dolgozunk. Jelöljük be ezt a lehetőséget. b., Ezt a lehetőséget kellene választanunk, ha közvetlenül a serverre dolgoznánk. c., Az a választás függvényében itt kell meghatároznunk, hogy melyik könyvtár lesz a weboldal SiteRoot-ja. A kis mappa ikonra kattintva tudjuk kiválasztani könyvtárunkat.

6 A fenti ablakban a Dreamweaver arra kíváncsi, hogy milyen módon kapcsolódunk a távoli serverhez. A legördülő listából válasszuk a NONE lehetőséget, mert nem kapcsolódunk távoli serverhez. Weboldalunkat majd később publikáljuk FTP-n keresztül!

7 A fenti ablakban a Dreamweaver kiír nekünk egy összefoglalást a site meghatározásával kapcsolatos beállításainkról. Ha mindent rendben találtunk, kattintsunk a DONE gombra! Az új site definiálásával készen is vagyunk! Kezdhetjük a munkát! Most megviszgáljuk, hogy hol tudjuk leellenőrizni, hogy mindent jól állítottunk-e be a siteroot-al kapcsolatban. Az ellenőrzést a Files palettán tudjuk elvégezni. Ez az a paletta, amely azt mutatja, hogy éppen melyik site van nyitva, és hogy jelen pillanatban melyik mappába dolgozunk. Erre a palettára van akkor is szükségünk az előzetes vizsgálathoz, ha egy meglévő site-ot akarunk szerkeszteni, és szeretnénk meggyőződni arról, hogy éppen melyik site-unk van nyitva. A Files palettát a képrenyő jobbalsó sarkában találjuk alapértelmezetten az egyéb paletták között. Amennyiben egy palettát látni vagy éppen elrejteni szeretnénk, úgy a Window menüben érhetjük el ezek ki- és bekapcsolását. Amelyik paletta elnevezése előtt kis pipát ( ) látunk, az a paletta jelenleg be van kapcsolva és látható, amelyik előtt pedig nincs pipa, az jelenleg nincs bekapcsolva, azaz inaktív.

8 2., Már létező site megnyitása, szerkesztése Site menü-> Manage Sites parancsát kell választanunk, ahol a következő ablak fogad bennünket: A baloldalon található site-ok litájából egy kattintással kiválasztjuk a szerkeszteni kívánt website-ot, majd a Done gombra kattintva az eddig nyitva lévő site lecserélődik a most kiválasztott site-ra, melynek megtörténtéről szintén a Files palettáról tájékozódhatunk. a, a New gombra kattintva pontosan ugyanaz a folyamat fogad bennünket, mint amikor új site-ot hozunk létre a Site menü -> New site parancsát választva. b., az Edit gombra kattintva, a baloldalon kiválasztott site beállításait végezhetjük el. Ez a funkció végig vezet azon a folyamaton, melyet egy új site létrehozásakor végigjárunk, így az előzőleg beállított konfigurációt módosíthatjuk. c., a Duplicate gombra kattintva a baloldali listában kijelölt site-ot tudjuk duplikálni, azaz másolatot készíteni róla. Ez a lehetőség akkor lehet fontos, ha egy meglévő site-hoz nagyon hasonló, kisebb részletekben eltérő másik site-ot szeretnénk létrehozni. Ebben az esetben nem kell előről kezdenünk a munkát, és az eredeti site-unk is megmarad teljes egészében. d., a Remove gombra kattintva a baloldali listában kijelölt site-ot távolíthatjuk el a listából. Nagyon fontos tudnunk, hogy a siteroot nem törlődik az adattárolóról, csak a Dreamweaver listájából! e., az Export gombra kattintva a Dreamweaver létrehoz egy.ste kiterjesztésű file-t, mely site definíciós file formátum, melyben eltárolja a site konfigurációs beállításait.

9 f., az Import gombra kattintva.ste kiterjesztésű file-okat tallózhatunk ki, így hozzáadva a site listához az előzőleg exportált site definíciós file-jainkat. Új dokumentum létrehozása Már elkészültünk a site definiálással, így elkezdhetjük a munkát a Dreamweaver-el. A File menü-> New parancsára kattintva megjelenik az új dokumentum meghatározásához szükséges ablak, melyben kiválaszthajuk, hogy milyen típusú dokumentumot szeretnénk készíteni. A Dreamweaver a következő dokumentum típusokat tudja kezelni és létrehozni: Html, xhtml, xml, xslt, css, php, javascript, action script, coldfusion, asp. NET, stb. Nekünk jelen pillanatban a html-re vagy az xhtml-re van szükségünk. DTD (Document Type Definition) A webre készült dokumentumokat egy előre definiált, a dokumentum felhasználható elemeit meghatározó file-ban tárolja a W3C egy publikált URL címen. Erre azért van szükség, mert a böngészők számára fontos információkat nyújtanak ezekben a file-okban, melyekre szüksége lehet a böngészőnek a dokumentum helyes megjelenítéséhez. Egy hiperszöveg (weboldal) definiálásához a következő dokumentum típusok állnak rendelkezésünkre: HTML 4.01 Strict HTML 4.01 Transitional XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.1 XHTML 1.0 Mobile XSLT 1.0 (XHTML - Extensible HyperText Markup Language) (XSLT - Extensible Stylesheet Language Transformations) A doctype ismeretében válasszuk az új html dokumentum opciót és az xhtml 1.0 Transitional dokumentum típust! View menü (Nézet menü) lehetőségei A View menü->zoom In almenüjére kattintva van lehetőségünk a dokumentum nézetének léptékekben történő nagyítására. A Zoom Out pedig léptékekben történő kicsinyítést tesz lehetővé. Ugyanitt található meg a Magnification menüpont is, mely lehetőséget ad arra, hogy kiválaszthassuk a Dreamweaver által felajánlott lehetőségek közül, hogy hány százalékos kicsinyítésben vagy nagyításban szeretnénk látni az adott dokumentumot. A View menü->rulers->show Rulers parancsát választva tudjuk a vonalzót bekapcsolni. Ugyanezt a parancsot választva tudjuk a vonalzó megjelenítését is megszűntetni. A Rulers almenüben lehetőségünk van a vonalzó mértékegységét is meghatározni.

10 Az oldal tulajdonságainak meghatározása Mielőtt elkezdjük a weboldal tartalmi szerkesztését, be kell állítanunk az oldal tulajdonságait. A beállításhoz válasszuk a Modify menü-> Page properties parancsát! A következő ablak fogad minket: a., Tulajdonság kategóriák Appearance megjelenés Links hivatkozások Headings címsorok Title/Encoding Cím és kódolás Tracing Image Modellkép Az Appearance kategória beállításai: b., Itt állítható be a weboldal betűtípusa. c., Megadhatjuk a a weboldal betűméretét, és a méret mértékegységét. d., Szöveg szín meghatározása. Választhatunk a paletta színeiből, és megadhatjuk a szín hexadecimális kódját a beviteli mezőben. e., Háttérszín beállítása f., Háttérkép meghatározása g., Háttérkép elhelyezkedése, ismétlése h., Margó méreteinek beállítása A Links kategória beállításai:

11 a., Hivatkozások betűtípusa b., Hivatkozások betűmérete c., Hivatkozás színeinek beállítása d., Hivatkozás aláhúzásának beállításai A Headings kategória beállításai: Az úgynevezett Heading-ek előre generált Címsor stílusok, melyeket minden böngésző egységesen kezel és ismer. A heading-eket 1-től 6-ig értelmezik a böngészők, ahol a Heading1 a főcím, mely a legjobban kiemelt stílusban szerepel és a Heading6 a legkisebb kiemeléssel szereplő alcím. A tag-ek a következő képpen épülnek fel: <H1>Főcím</H1> <H2>Cím</H2> <H3>Alcím</H3> <H4>Alcím</H4> <H5>Alcím</H5> <H6>Alcím</H6> Ezeket a tag-eket minden böngésző azonosan jeleníti meg. A Dreamweaver ebben a kategóriában egyéni megjelenést biztosít minden heading-nek.

12 Az első beviteli mezőben a heading betűméretét majd a második beviteli mezőben a színét állíthatjuk be. A Title/Encoding kategória beállításai: a., A Title meghatározása b., A dokumentum típus meghatározása c., A dokumentum karakterkódolása (Megjegyzés: a magyar karakterek pontos megjelenítéséhez az ISO karakterkódolási szabványra van szükség, illetve beállítható az UTF-8-as karakterkódolási szabvány is, mely tartalmazza a világ összes karakterét.)

13 A Tracing Image kategória beállításai: Lehetőségünk van úgynevezett modell kép beállítására, amely a szerkesztőfelületen fog segítséget nyújtani számunkra a weboldal szerkesztése során. Ezt a funkciót akkor használjuk ha előzőleg megszerkesztettük a weboldal látványképét egy képszerkesztő alkalmazásban és ezt a látványképet szeretnénk sablonként használni a design megalkotásához. Ez a kép nem egyenlő a weboldal háttérképével, mert ez publikálás során nem jelenik meg, csak a szerkesztőfelületen. a., A modell kép kiválasztása b., A modell kép átlátszóságának beállítása A weboldal tulajdonságainak meghatározása után elkezdhetjük a weboldal tartalmi szerkesztését. Meta tag-ek elhelyezése Insert->HTML->Head tags parnacsával érhetjük el a Keywords meta tag-et, valamint a Description meta tag-et is. Bármelyik menüpontot választva a Dreamweaver megjelenít egy kisméretű ablakot, amelybe beírhatjuk a kért értékeket! (Ne felejtsük el, hogy a keywords meta kulcsszavainak felsorolásánál veszzővel kell elválasztanunk az elemeket egymástól!)

14 Szöveges tartalom és speciális karakterek A szöveges tartalmak formázási lehetőségeit a Properties paletta tartalmazza: a., Format Itt állíthatjuk be, hogy milyen Heading formázást szeretnénk alkalmazni. b., Font Betűtípus meghatározása. c., Style Ha létezik CSS-ben meghatározott stílusunk, itt tudjuk alkalmazni az aktuális szövegre. (CSS témakörrel a későbbiekben foglalkozunk!) d., Size Betűméret meghatározása. e., Betűszín kiválasztása f., Betűstílus beállítása (félkövér, dőlt), mellette található a bekezdés igazítására szolgáló ikonok is, melyek sorrendben: balra zárt, középre zárt, jobbra zárt, sorkizárt g., Felsorolás és számozás, behúzás csökkentése ikon, és behúzás növelése ikon. h., Link a mezőbe be tudjuk írni a hivatkozás címét, vagy a beviteli mező meletti kis mappa ikonra kattintva kitallózhatjuk a siteroot-ban található file-ok közül, hogy melyikre akarunk hivatkozni. A speciális karakterek listáját az Insert menü-> HTML-> Special characters menüpont alatt találjuk. Az Other feliratra kattintva további lehetőségeink vannak a speciális karakterek kiválasztására. Hivatkozások elhelyezése a weboldalon A kívánt objektum kijelölése után, a Properties paletta link mezőjének kitöltésével tudunk a leggyorsabban hivatkozásokat létrehozni. Ha viszont más hivatkozás típusra van szükségünk, válasszuk az Insert menü-> Hyperlink prarancsát az egyszerű hivatkozások beszúrásához, az Insert menü-> link parancsát az hivatkozások alkalmazásához, valamint az Insert menü-> Named Anchor parancsát az oldalon belüli hivatkozások létrehozásához! Ha egy oldalon belüli hivatkozást szeretnénk létrehozni, akkor helyezzük a kurzort a hivatkozni kívánt helyre (hivatkozási pont), majd válasszuk a Named Anchor utasítást. A felugró ablakban határozzuk a meg a hivatkozási pont nevét. ( A név nem tartalmazhat ékezeteket és speciális karaktereket!) A második lépés, hogy létrehozzuk a hivatkozást a hivatkozási pontra. Helyezzük a kurzort oda, ahová majd a hivatkozást szeretnénk elhelyezni, és írjuk be a

15 properties paletta link mezőjébe a #hivatkozási pont_neve szöveget. Pl., Ha a hivatkozási pont neve top, akkor az arra mutató hivatkozás #top. Képi objektumok elhelyezése a dokumentumban Weboldalakba beépített képekre vonatkozóan vannak bizonyos szabályok, melyeket minden esetben be kell tartanunk ahhoz, hogy az adott oldal megjelenése megfelelően gyors legyen. Minden weboldalra elhelyezett képet webre optimalizálva kell publikálni. A webre optimalizáslás alaptétele, hogy a lehető legkisebb méret mellett, a lehető legjobb minőséget állítsuk elő! Minél kisebb terjedelmű képet helyezünk el a weboldalon, annál gyorsabban fog letöltődni, amikor az oldalt látogatják. Képek beszúrása Kép beszúrása az Insert menü->image parancsával történik. A megjelenő ablakban ki kell tallózni a kívánt képet, majd az OK gombra kattintani! A képek beállításait szintén a Properties palettán találjuk: a., Ebben a mezőben adhatunk nevet a képnek. ( A név nem tartalmazhat ékezeteket és speciális karaktereket!) b., A W érték a kép szélessége (width), a H érték a kép magassága (height) c., Az Src (Source) a kép forrását jelenti, tulajdonképpen ez a kép elérési útja. d., A link rovatban adhatunk hivatkozást a képhez. Ha a siteroot-ból szeretnénk tallózni, akkor a beviteli mező mellett található kis mappa ikonra kattintva van erre lehetőségünk. e., Ebben a mezőben tudunk alternatív szöveget hozzárendelni a képhez. Az alternatív szöveg akkor jelenik meg, ha a kép nem töltődik le, vagy éppen letöltés alatt áll. f., Az Edit felirat mögött található ikonok segítségével lehet a képet szerkeszteni. Ezek a szerkesztési lehetőségek szegényesebbek, mint egy képszerkesztő alkalmazás lehetőségei, de a Dreamweavernek nem is a képek szerkesztése a feladata, ez a lehetőség egy kis plusz, ami nagy segítségünkre lehet, ha éppen nincs kéznél egy képszerkesztő program. - Az első ikonra kattintva a Dreamweaver meghívja a számítógépre telepített képszerkesztő alkalmazást, és megnyitja benne a kijelölt képet szerkesztésre. - A második ikonra kattintva szintén egy képszerkesztő program kerül megnyitásra azzal a céllal, hogy webre optimalizáljuk a képet! - A harmadik ikonunk az úgynevezett Crop tool (csonkítás eszköze), melynek segítségével egy beszúrt képet lehet megcsonkítani, tehát a kép egy részét eltávolítani, egy másik részét pedig megtartani. - A negyedik ikon segítségével vissza tudjuk állítani az eredeti képet, ha olyan módosítást végeztünk el rajta, amely nem megfelelő számunkra. - Az ötödik ikonnak az a szerepe, hogy a beszúrt kép kontrasztját illetve fényerejét korigáljuk ha szükséges.

16 - A hatodik ikon szintén korrekciós célt szolgál. Erre az ikonra kattintva tudjuk a képet élesíteni bizonyos mértékig. g., Ha létezik CSS formázás az adott képhez, akkor azt itt lehet hozzárendelni. h., Hotspot beszúrásának lehetősége (Area Map) Három féle hotspot típus létezik: Rectangular (Téglalap) Oval (Ovális) Polygon (Sokszög) A hotspotok segítségével le tudjuk takarni a kép bizonyos részeit, a fent említett három formában. A letakart területekre egyenként lehet hivatkozást tenni. i, Vertical Space és Horizontal Space pixelben történő meghatározásával adhatjuk meg a kép elhelyezkedését ahhoz az elemhez képest, amelyen belül helyezkedik el maga a kép. Például ha a kép egy táblázat celláján belül van, akkor a cella bal felső sarkához képest tudunk pozícionálni. j., Target mezőben tudjuk megadni, hogy a képre alkalmazott hivatkozás hol nyíljon meg. k., Border beviteli mezőben határozhatjuk meg, hogy milyen vastagságú keretet szeretnénk adni a képnek. l., A kép vízszintes igazítása, sorrendben balra zárt, középre zárt, jobbra zárt. m., Align (igazítás) a szövegkörnyezethez képest, melynek funkcióit az alábbi táblázat foglalja össze:

17 Felvehető érték Jelentés Top Center Default Left Right Image Placeholder Szerkesztés során előfordulhat, hogy tudjuk egy kép tervezett helyét, de maga a kép még nem készült el a weboldal szerkezet összeállítása előtt. Ebben az esetben nyújt nagy segítséget az Image Placeholder, amely helyet foglal majd a nem létező képnek, hogy a többi tartalmi elemet el tudjuk helyezni az oldalon a kép elkészültéig. Az Insert menü->image objects->image Placeholder parancsát válasszuk: A Name mezőben megadhatjuk a kép ideiglenes nevét. A Width mezőben a kép várható szélességét, a Height mezőben a várható magasságát adjuk meg. A Color opcióban megadjuk az ideiglenes színt, amivel majd lefedjük a kép helyét. Az Alternate text mezőben előre adhatunk alternatív szöveget a képnek. Amikor a kép elkészült, más dolgunk nincs, mint a Properites palettán meg kell adnunk a kép forrását. (SRC) Rollover Image A Rollover Image egy klasszikus JavaScript vezérelt képforgatás. Ha a beszúrt kép fülé visszük az egeret, akkor a kép helyet cserél egy másik képpel, ha lehúzzuk róla az egeret, akkor visszaáll az eredeti kép. Az Insert menü->image Objects->RolloverImage funkcióját válasszuk. A következő ablak fogad bennünket:

18 a., Kép nevének meghatározása b., Az eredeti képet itt tallózzuk ki c., Itt választjuk ki a második képet, mely akkor jelenik majd meg, amikor az eredeti kép fölé visszük az egeret. d., Ha ezt a beállítást bejelöljük, akkor az eredeti kép betöltődésekor automatikusan betöltődik a második kép is. e., Alternatív szöveg meghatározása. Az alternatív szöveg akkor jelenik meg, ha a kép nem töltődik le, vagy éppen letöltés alatt áll. f., Itt adhatjuk meg a Rollover Image hivatkozását. (Gyakorlatilag itt rendelünk hozzá linket!) Navigation Bar A Navigation Bar segítségével komplett menüt tudunk készíteni, ahol a menüpontok akár négy állapotú gombokként is tudnak üzemelni. Ennek feltétele, hogy legyen négy darab gomb állapotot megjelenítő képünk. (Nem kötelező mind a négy állapotot elkészíteni, mert a Navigation Bar képes akár kettő illetve három állapotú gombokat is megjeleníteni!) FONTOS: Egy html oldalon belül csak egy darab Navigation Bar-t engedélyez a Dreamweaver! A gombok négy állapota: Up (amikor megjelenik a gomb betöltődéskor) Over (amikor a gomb fölé visszük az egeret) Down (amikor megkattintjuk a gombot) Over while down (amikor a gomb már le van nyomva, és újból fölé visszük az egeret) Válasszuk az Insert menü->image Objects->Navigation Bar parancsát, ahol a következő ablak fogad bennünket:

19 a., A + jelre kattintva tudunk új elemeket hozzáadni a Navigation Bar-hoz, míg a - jelre kattintva van lehetőségünk eltávolítani elemeket a Navigation Bar-ból. b., A Navigation Bar-ban szereplő elemek sorrendjét tudjuk változtatni a fel és lefelé mutató nyilakkal. c., Itt láthatjuk felsorolva a Navigation Bar elemeit. d., Ebben a rovatban határozhatjuk meg az éppen aktuális elem nevét. e., Az első (Up) állapot képének kiválasztása. f., A második (Over) állapot képének kiválasztása. g., A harmadik (Down) állapot képének kiválasztása. h., A negyedik (Over while Down) állapot képének kiválasztása. i., Alternatív szöveg megadása. j., Hivatkozás megadása. k., Az opció bekapcsolásával az első kép betöltődésekor automatikusan letöltődnek a többi állapotok képei is. l., Az opció bekapcsolásával a harmadik állapot (Down) jelenik meg először (betöltődéskor). m., Itt határozhatjuk meg, hogy a Navigation Bar-t vízszintesen (Horizontally), vagy függőlegesen szeretnénk elhelyezni az oldalon. FONTOS: Ez a beállítás később nem módosítható! n., A jelölőnégyzet bejelölésével a Dreamweaver táblázatba rendezve hozza létre a Navigation Bar-t. Fireworks HTML Az Adobe Fireworks webre optimalizált képszerkesztő programjában lehetőség van előre gyártott Rollover Image-eket valamint Navigation Bart is létrehozni, melyet el tudunk menteni HTML formátumban, és a kész dokumentmot beemelhetjük egy új HTML dokumentumba a Dreamweaver segítségével. Válasszuk az Insert menü->image Objects->Fireworks HTML parancsát, majd tallózzuk ki a kívánt Fireworks html dokumentumot!

20 Média elemek beszúrása Lehetőségünk van weboldalunkat színesebbé tenni a beágyazott tartalmak, videók, animációk és kisalkalmazások segítségével. Ezt a lehetőséget a Dreamweaver-ben a Insert menü Media almenüben érhetjük el. Image Viewer Flash alapú képmegjelenítőt szúrhatunk be, ha az Insert menü->media->image Viewer parancsot választjuk. Ekkor megérkezik egy ablak, melyben a program azt kérdezi, hogy mi legyen a neve a flash file-nak, ami ezt a képnézegetőt fogja tárolni. Adjunk neki egy tetszőleges nevet ékezetek nélkül, és kattinstsunk a Save gombra. A munkaterületen megjelenik egy szürke terület, mely jelöli a flash alapú alkalmazás helyét. Ha kijelöljük a területet egy egér kattintással, akkor a jobb oldalon, a paletták listájában megjelenik egy Flash element nevű paletta, ahol az Image Viewer további beállításait adhatjuk meg. A beállítások közül a legfontosabb az ImageURLs beállítás, ahol vesszővel elválasztva tudjuk felsorolni azoknak a képeknek a listáját, melyeket szeretnénk alkalmazni a képnézegetőben. Flash Text Ebben a menüpontban van lehetőségünk arra, hogy flash objektumként helyezzünk el szöveget weboldalunkon. Erre akkor lehet szükség, ha olyan nem szokványos betűtípust szeretnénk alakalmazni weboldalunkon, amely nem valószínű, hogy a látogatóink számítógépén telepítve van. Ha egy szöveg nem szövegként, hanem grafikai elemként szerepel egy weboldalon, úgy mindenki látni fogja azt, attól függetlenül, hogy rendelkezik-e az adott betűtípussal. A font beállításnál választunk betűtípust. A size feliratnál van lehetőségünk meghatározni a szöveg méretét. Az alatta található menüsor első két eleme a félkövér és dőlt betűstílus. Mellettük található ikonok segítségével lehetőségünk van a szöveg vízszintes igazítására. A color beállítás a szöveg alapértelmezett színét jelenti, ezzel a színnel fog megjelenni az oldalon. A RolloverColor -nál kiválasztott szín akkor fog megjelenni, ha a szöveg fölé viszi alátogató az egeret. A text beviteli mezőbe írhatjuk be a flash szöveget. A link beállításnál tudunk hozzá hivatkozást rendelni. A target beállításnál pedig meghatározni, hogy az adott hivatkozás hol legyen megnyitva. FONTOS: Csak itt tudunk hozzá hivatkozást rendelni!

21 A bgcolor beállításnál meg kell határoznunk a flash szöveg háttér színét. Itt pontosan olyan színt kell megadnunk, amilyen háttérre kerülni fog a flash. Átlátszó nem lehet a flash szöveg háttere. A Save as beállításnál lehetőségünk van meghatározni a flash text-et tároló flash formátumú.swf kiterjesztésű file nevét. Flash Button A Dreamweaver tartalmaz egy olyan lehetőséget, mely flash alapú gombok előállítására lett megalkotva, a nélkül, hogy flash lenne telepítve számítógépünkre. Ha ezt a lehetőséget választjuk, a következő ablak fogad bennünket: A Sample mutatja az alatta lévő Style beállításban kiválasztott sablon gomb minta nézetét. A Button text -ben elhelyezett szöveg lesz a gomb felirata, melyben a magyar karakterek megadása sajnos nem lehetséges. A Font legördülő listában van lehetőségünk kiválasztani a kívánt betűtípust, majd a Size beállításnál a kívánt betűméretet. A Link rovatnál van lehetőségünk hivatkozást hozzárendeli a flash alapú gombunkhoz. A target mezőben adhatjuk meg azt, hogy a hivatkozott oldal hol jelenjen meg. A Bg color opciónál van lehetőségünk meghatározni, hogy a flash gomb milyen színű háttére kerüljön. A Save as lehetőséget ad arra, hogy egyéni nevet adhassunk flash alapú gombunkat tároló. swf kiterjesztésű file-unknak. Flash Video Flash alapú videók beszúrásához ezt a menüpontot kell választanunk, ahol előregenerált flash videó formátumú.flv kiterjesztésű file-unkat tudjuk hozzárendelni weboldalunkhoz. A menüpontot választva a következő ablakot fogjuk látni:

22 A Video type lehetőséget ad arra, hogy kiválasszuk a video letöltődésének típusát. Az első lehetőség a Progressive download, ami video lejátszásakor, a lejátszás közben folyamatosan töltődik le. A másik lehetőség a Streaming Video, amely már egy előre publikált video beágyazását jelenti. Az URL lehetőségnél lehet kiválasztani a.flv file-t. A Skin opciónál több lejátszó megjelenést tudunk választani, melyet az alatta lévő bokszban meg is mutat nekünk a Dreamweaver. A Width paraméternél tudjuk beállítani, hogy milyen szélességben jelenjen meg videónk. A Height paraméternél pedig beállíthatjuk a videó magasságát. A Detect feliratú gombra kattintva a Dreamweaver felderíti, hogy eredetileg mekkora méretű a video file. Az Auto play jelölő négyzet bepipálásával érhetjük el azt, hogy videónk automatikusan elinduljon az oldalunk betöltődésekor. Az Autó rewind lehetőség bejelölésével utasítást adunk arra, hogy a video végére érve automatikusan elölről indítsa újra a lejátszó az adott videót. A Prompt user bejelölésével lehetőséget adunk arra a felhasználónak, hogy tájékoztassuk a videó megtekintéséhez szükséges flash player letöltésének lehetőségeiről annak érdekében, hogy megfelelően tudja megtekinteni az általunk publikálni kívánt videó file-t. Ehhez kapcsolódik a Message boxban elhelyezett szöveg, mely a tájékoztatás szövegét tartalmazza. Shockwave Interaktív animációs elemeket tartalmazó grafikai objektumok beszúrására szolgál. Applet Előre megírt, úgynevezett kisalkalmazás -ok beszúrására alkalmazhatjuk ezt a menüpontot. Ilyen kisalkalmazás lehet a több helyen is alkalmazott Java Applet. ActiveX Az ActiveX a Microsoft által kifejlesztett technológia, mely arra szolgál, hogy program összetevők tudjanak kommunikálni egymással egy közös nyelven. A Weben vannak olyan alkalmazások, melyek a látogató számítógépén lévő programokkal tartanak kapcsolatot. Ha

23 van egy előre megírt ActiveX-ünk és ezt szeretnénk beágyazni weboldalunkba, akkor azt ebben a menüpontban tehetjük meg. Plug-In A Plug-In magyar fordítása beépülő modul. Minden olyan megjeleníteni kívánt tartalmat, melyet a böngésző önmagában nem képes megjeleníteni, azt beépülő modulként kell beágyazni a weboldalba. Ilyen tartalom lehet például egy hang (mp3), video (avi), és maga a flash is beágyazható plug-in ként, hiszen a flash alapú animációk megjelenítésére is csak akkor képes a böngésző, ha van telepítve flash player-ünk. Táblázatok beszúrása Táblázatok alkalmazásához válasszuk az Insert->Table parancsát. A táblázat beszúrásának beállításai a következők: A Table size szekcióban a rows a sorok számát-, míg a columns az oszlopok számát jelenti. A Table width beállítás a táblázat szélességének megadását teszi lehetővé. A Border thickness a táblázat keret vastagságának meghatározása. A Cellpadding cellamargó mérete, a Cellspacing cellaköz meghatározása. A Header szerkcióban lehetőségünk van három féleképpen kiosztani a táblázat celláinak kiemelését (Heading). A Caption a táblázat címkéje. Az Align caption a címke elhelyezkedése a táblázathoz képest. A Summary mezőben a táblázat összefoglalására van lehetőségünk. Rétegek alkalmazása (Layers) A rétegek hasonlóan néznek ki, mint a Word szövegdobozai. A legfőb különbség az, hogy míg a szövegdobozokban csak szövegeket helyezhetünk el, úgy a rétegekbe bármilyen