Webszerkesztés Dreamweaver használatával Dreamweaver történelem 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.)

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.

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.

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.

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.

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!

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” (9) 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.

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.

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.

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:

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:

Főcím

Cím

Alcím

Alcím

Alcím

Alcím

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.

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 8859-2 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.)

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!)

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ü-> E-mail link parancsát az e-mail 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

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.

- 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:

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:

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:

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!

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!

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:

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

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

tartalmat. A rétegek méretét és küllemét mi határozzuk meg. A rétegek egyik legfontosabb beállítása a pozíciója. A Dreamweaver az általunk elhelyezett réteg pozíciójának tulajdonságait CSS-ben tárolja. (A CSS-re a későbbiekben részletesen kitérünk) Ennek köszönhetően a rétegekből felépített oldalak, melyeket a Dreamweaver-el hozunk létre, csaknem minden böngészőben azonosan jelennek majd meg. Válasszuk az Insert menü->Layout objects->AP DIV parnacsát. A beszúrt réteg a következőképpen fog megjelenni:

A réteg kijelöléséhez kattintsunk rá a réteg bármelyik keretére. Megjelennek a réteg módosítható pontja, ahol át tudjuk méretezni az adott réteget, vagy el tudjuk mozgatni a kívánt helyre. A réteg kijelölése után a Properties paletta beállításai a következők:

Az „L” azt jelöli, hogy a réteg milyen távolságban helyezkedik el a baloldaltól. A „T” mutatja meg, hogy milyen távolságra helyezkedik el a réteg a lap tetejétől. A „W” jelöli a réteg szélességéet, a „H” a réteg magasságát. A „Z-index” beállítás mutatja meg, hogy az adott réteg az oldalon elhelyezett többi réteghez képest milyen mértékben van előtérben vagy éppen takarásban. Minél nagyobb a Z-index, annál jobban előtérben van egy réteg. A „Bg image” – nél lehetőségünk van kitallózni egy képet, mely a réteg háttérképe lesz. Az alatta található „Bg Color”-nál van lehetőségünk a réteg háttérszínének meghatározására. Az „Overflow” a rétegbe került tartalom túlcsordulását kezeli: a „hidden” elrejti a túlcsordult tartalmat, a „srcoll” automatikusan megjeleníti a görgetősávot, az „auto” csak akkor jeleníti meg a görgetősávot, ha arra szükség van. Viselkedések (Behaviors) A Dreamweaver beépítve tartalmaz több JavaScript vezérelt látvány elemet, melyet az adott elem viselkedésének nevezünk. A JavaScript alaptétele szerint egy objektumhoz rendelünk egy vagy több eseményt, melynek bekövetkeztében végre kell hajtódnia egy műveletnek. Ezt az esemény művelet kapcsolatot hívjuk hivatalosan viselkedésnek. A viselkedések alkalmazását a Behaviors palettán tudjuk meghatározni. Ki kell jelölni azt az elemet, amely a viselkedés objektuma lesz majd, és meg kell nyitnunk a Behaviors palettát a

Window menü->Behaviors parancsát választva. A következő lépés, hogy a „+” jelre kattintva ki kell választanunk az adott viselkedést, majd kiválasztás és beállítás után hozzá kell rendelnünk az eseményt. A folyamatot a következő ábra mutatja:

A kiválasztható viselkedések: • • • • • • • • • •

Call JavaScript: meghív egy előre megírt js-et, melyet nem ő generál, hanem nekünk kell megírni, vagy beszerezni. Change Property: Valamilyen esemény hatására megváltoztatja egy objektum tulajdonságait. Check Plugin: Ellenőrzni, hogy rendelkezik-e az oldal felhasználója az adott Plug Innal, és ennek függvényében tölt be adott weboldalakat. Drag AP element: Az általunk beszúrt rétegeket, mozgathatóvá teszi a felhasználók számára. Effects: Ezeket a látvány effekteket csak és kizárólag rétegekhez lehet rendelni. Különböző áttűnések segítségével van lehetőségünk megjeleníteni, vagy eltűntetni a rétegeket. Goto URL: Adott esemény hatására tudunk meghívni egy URL címet. Jump Menu és Jump Menu Go: Legördülő listát tudunk létrehozni, melynek elemei különböző weboldalakra hivatkoznak, és választáskor meghívjuk ezeket az oldalakat. Open Browser Window: Adott esemény hatására tudunk böngésző ablakot nyitni és abban megmutatni egy adott RL címet. Lehetőség van az ablak méretének és attribútumainak meghatározására. PopUp Message: Esemény hatására felugró Windows üzenetet küldhetünk az oldal felhasználójának, melyet az üzenet eltűntetéséhez a látogatónak le kell „OK”-zni a felugró üzenetet. Preaload Images: Előre be lehet tölteni weboldalunk adott képeit a memóriába, így amikor a látogató arra az oldalra érkezik ahol a képek eredetileg elhelyezkednek, a képek egy része, vagy akár mind már betöltődött az adott lapra, így a felhasználónak nem kell annyi időt várni a tartalom betöltődésére.

• • • • • • •

•

Set Nav Bar Image: Itt is be lehet szúrni Navigation Bart. (lásd feljebb image objects) Set Text: Esemény hatására tudunk kiíratni különböző szövegeket általunk létrehozott obejtumokba, mnt például egy réteg, egy űrlap beviteli mezője, vagy esetleg a böngésző állapotsora (Statusbar) Show Hide Elements: Esemény hatására lehet rétegeket eltűntetni vagy éppen megjeleníteni. Swap Image, Swap Image Restore: Ez egy klasszikus képforgatás és annak visszaállítása. Ezzel a művelettel végzi el a Dreamweaver a Rollover Image opciót. (lásd feljebb image objects) Timeline: A Dreamweaver képes rétegeket mozgatni melyhez a Timeline-t (idővonal) használja. Az idővonal adott pontjához is lehet viselkedést rendelni ezzel a lehetőséggel. Validate form: Esemény hatására megviszgálja, hogy egy adott űrlap adott elemébe megfelelő értékek kerültek-e. Deprecated: Érvénytelenített menüpont, melyben olyan viselkedések szerepelnek, melyekkel a régebbi Dreamweaver verziók rendelkeztek. Azért hagyták meg így ezt a menüpontot, mert elképzelhető, hogy egy régi weboldalt a Dreamweaver CS3-ban akarunk szerkeszteni, és a régi meglévő elemeket ezzel a lehetőséggel lehet módosítani. Show Events For: A Behaviors paletta nézetének szűkítésére van itt lehetőségünk, ha tudjuk, hogy régebbi verziójú böngészőkre is szeretnénk optimalizálni oldalunkat. A szűkítés hatására csak azok a viselkedések fognak megjelenni, melyeket támogatnak a régebbi böngészők is.

Űrlapok (Forms) A weboldalakon elhelyezett űrlapoknak az a szerepe, hogy kommunikációt folytasson a weboldal látogatójával. Az űrlap elemeit minden esetben úgy kell megválogatni, hogy azt a felhasználó a lehető leggyorsabban és legegyszerűbben tudja kitölteni. Válasszuk az Objektum paletta->Forms elemét és nézzük a lehetőségeket balról jobbra haladva:

• •

•

Form: Ezzel az ikonnal jelezzük a Dreamweaver-nek, hogy mostantól egy űrlapot készítünk. Textfield: Beviteli mező, kijelölése után a Properties palettán a következőt játjuk:

- Char width: a beviteli mező megjelenésének karakterszélessége - Max chars: a bevihető karakterek számának korlátozása - Type: single line=egysoros, multi line= többsoros, password= jelszó - Init val: Az ide beírt érték fog alapértelmezetten megjelenni a beviteli mezőben. Hidden field: rejtett beviteli mező, melyet a felhasználó nem lát a weboldalon, de programozási szempontból fontos információkat rejthetünk el benne.

• • • • • • • • •

Textarea: Többsoros beviteli mező, ugyanaz, mint a multi line beállítás az egyszerű textfieldnél. Checkbox: jelölőnégyzet, melyet akkor használunk, ha fel akarunk sorolni több választási lehetőséget, és engedélyezni akarjuk, hogy bármennyi lehetőséget kiválaszthasson a látogató. RadioButton: jelölő karika, melyet akkor használunk, ha fel akarunk sorolni több választási lehetőséget, és NEM akarjuk engedélyezni, hogy bármennyi lehetőséget kiválaszthasson a látogató, hanem kizárólag egyet. RadioGroup: jelölő karika csoport, melyet akkor használunk, ha több olyan választási lehetőséget akarunk publikálni oldalunkra, melyben egyenként csak és kizárólag egy lehetőség választható. List/Select: legördülő menü, vagy lista Jump Menu: lásd. Viselkedések Jump Menu, Jump Menu Go Image Field: Képet szúr be, melyet használhatunk majd például „küldés” gomb helyett. File field: Itt lehet beszúrni olyan űrlap elemet, mellyel lehetőséget adunk a látogatónak, hogy tallózzon számítógépéről egy file-t. Button: Gombot szúr be, mellyel véglegesíteni lehet az űrlapot.

CSS – Cascading Style Sheets (egymásba ágyazott stíluslapok) A CSS egy stílus leíró nyelv, mely önmagában nem jelenít meg tartalmat, csak egy másik leíró nyelvvel társítva. (pl. HTML) A CSS-t a W3C azért hozta létre, hogy formázási és megjelenítési szempontból kiegészítse a HTML hiányosságait, valamint olyan új megjelenési formákat közvetítsen, melyek minden böngésző számára egyértelműen leírják az adott tartalom megjelenését. A CSS egy platform és program független nyelv, csakúgy, mint a HTML. Ebből következik, hogy bármilyen szövegszerkesztőben tudunk létrehozni css leírásokat. A CSS több formában tud egy adott html elemhez stílust rendelni. Mi a Dreamweaver segítségével a CSS osztályok bevezetését vizsgáljuk meg. A CSS parancsok szerepelhetnek közvetlenül egy adott tag-hez rendelve, melyre a stílus formázása vonatkozik, vagy elhelyezkedhetnek a head szekcióban is, de lehetőség van külön . css file alkalmazására is. Ha egy külön .css file-t hozunk létre, és abban tárolunk minden olyan formázást melyet a weboldalunk használ, majd a html oldalaknak megmutatjuk, hogy ebből a css file-ból olvassák ki a rájuk tartozó parancsokat, akkor nagyon egyszerűen, csak a css file tartalmát módosítva tudjuk weboldalunk összes html oldalát befolyásolni. Pontosan ezért, mi most azt az esetet vizsgáljuk, mikor külön file-ban tároljuk weboldalunk stílus leírásait. Osztályok (class) Tetszőleges névvel létrehozhatunk egy osztályt, mely úgymond gyűjtő szerepet fog játszani egy formázás csoport tárolásában. Az osztály neve nem lényeges, de ha úgy nevezzük, hogy az utaljon arra a tartalomra melyre eszközölni fogjuk, akkor az sokat segíthet. Például: Ha egy táblázatot akarunk megformázni, akkor nem árt tablazat néven létrehozni osztályunkat, melyben fel vannak sorolva azok az utasítások, melyek táblázatunk formázására vonatkoznak. Az osztály nevekben nem használhatóak a speciális és ékezetes karakterek.

Egy osztályokba szedett css file a következő képpen épül fel: Példa: A CSS file-unk neve legyen style.css. A benne lévő tartalom: .tablazat { Tulajdonság1; Tualjdonság2; Tulajdnság3; } A HTML dokumentum HEAD szekciójában el kell helyezünk a böngésző számára azt az információt, hogy táblázatunkat egy css file-ban elhelyezett stílussal formázzuk. Ebből a html leírásból a böngésző már tudja, hogy létezik egy style.css file, és hogy ezt neki figyelembe kell vennie formázáskor. A táblázat formázása: . . . . . . A „class” attribútummal megadtuk a böngészőnek, hogy a tablazat nevű osztályban felsorolt tulajdonságokkal kell felruháznia a táblázatot. Mivel a részben már megadtuk, hogy hol van a css file, a böngésző végig olvassa azt, megtalálja a tablazat osztályt és elolvassa annak utasításait, majd annak megfelelően formázza meg a táblázatot.

A Deamweaver CSS kezelése CSS stílus létrehozásához válasszuk a Window menü->CSS Styles parancsát. Ennek eredményeképpen megjelenik a paletták között a CSS paletta:

Új css formázás alkalmazásához válasszuk a CSS paletta jobb alsó sarkában lévő ikonsorból a második elemet . Rákattintva a következő ablak fogad bennünket:

A „Selector Type”-nál válasszuk ki a „Class” lehetőséget. A Name mezőbe írjuk be a kívánt osztály nevét, példánk szerint azt hogy „tablazat”. A „ Define in” lehetőségnél jelöljük be a „New Style Sheet File” opciót, hogy egy teljesen új css file-t hozzon létre a Dreamweaver, majd kattintsunk az OK gombra. Eztuán a Dreamweaver megkérdezi, hogy mi legyen a feilunk neve. Adjuk neki a példában meghatározott nevet, tehát „style”. Mentés után már el is kezdhetjük a tablazat osztály beállításait:

A formázási tulajdonságok kategóriákba vannak szedve: • Type: Ebben a kategóriában van lehetőségünk minden betűformázással kapcsolatos beállításra. • Background: Háttér beállításai. • Block: Szöveg tartományok, bekezdések formázása. • Box: Layerek és dobozok formázásai • Border: Keretbeállítások • List: Felsorolások és számozások beállításai • Positioning: Elemek pozíciónálásának beállításai • Extensions: kiterjesztett beállítások Ha végeztünk az osztály meghatározásával, akkor láthatjuk, hogy létrejött a style.css file, és benne van egy tablazat nevű osztály. Az osztály hozzárendelését az adott táblázathoz, a táblázat Properties palettájának „Class” parancsánál lehet eszközölni. Ha megkapta a táblázat, hogy melyik osztályba tartozik, akkor megjelennek rajta az osztály tulajdonságai.