Adobe Dreamweaver CS6: A piacvezető weblap-szerkesztő [PDF]

Zitiervorschau

Adobe Dreamweaver CS6 A piacvezető weblap-szerkesztő

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

1. Bevezetés…………………………………………5 Definíció és történet A Welcome Screen A kezelőfelület A paletták

2. Dokumentumok és site-ok kezelése..…11 A weboldal és a siteroot A site-os munka Új site berendezése Dokumentum létrehozása Alapértelmezett böngészők definiálása A Site-kezelő Új dokumentum létrehozása DOCTYPE, DTD (Document Type Definition) HTML- és XHTML-dokumentumok konvertálása Automatikus kódsegítség (Code Hinting) Kijelölés Szövegszerkesztés

3. Elemek beillesztése............................24 Képek beillesztése (Insert / Image Obejcts) Fireworks-integráció Image Placeholder Rollover Image A világhálón elterjedt képformátumok Médiaelemek beillesztése (Insert / Media) Táblázatok ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Táblázatok importálása Űrlapok (Forms) Űrlapelemek Érvényesített (validált) űrlapelemek Űrlapok formázása és tesztje

4. CSS-szerkesztés……………………………..44 CSS-szerkesztés automatikus kódsegítséggel CSS-szerkesztés a tulajdonságpalettával CSS-szerkesztés a Code Navigatorrel Lap létrehozása sablonból (Layouts) Sztenderd betűtípusok Webfonts Sablonos lap formázása CSS-sel CSS3-áttűnések (Transitions) Stíluslap nyomtatáshoz

5. Adaptív (responsive) webdesign………55 Mediaqueries Multiscreen előnézet Fluid Grid Layout (Rugalmas layout-rács) jQuery Mobile PhoneGap-integráció

6. JavaScript-keretrendszerek…………….63 A JavaScriptről velősen Viselkedések (Behaviors) Spryok XML-elemek ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Érvényesítő űrlapelemek Interaktív tartalomstrukturáló elemek

Snippets (Fecnik) Webalkalmazások beillesztése a Widget Browserrel jQuery Visualize diagramvarázsló Videó beágyazása HTML5-be

7. Egyéni site-sablonok (Templates)….…76 8. Weboldal tesztelése és közzététele……77 Adobe BrowserLab W3C-érvényesítő (Validation) Böngésző-inkompatibilitási problémák (Browser Compatibility) Link-ellenőrző (Link Checker) Weboldal-jelentés (Site Reports) Weboldal közzététele

9. A Főmenü……………………………………..80 A File menü Az Edit (szerkesztés) menü A Beállítások (Preferences) párbeszédablak A View (nézet) menü Az Insert (beillesztés) menü A Modify (módosítás) menü A Page Properties (laptulajdonságok) párbeszédablak A Format (formátum) menü A Commands menü

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

1. Bevezetés 1.1.

Definíció és történet

Az Adobe Dreamweaver (ang. álomszövő) az Adobe Systems által fejlesztett integrált fejlesztői környezet (IDE = Integrated Development Environment), amely egy forráskód-szerkesztő és egy vizuális vagy WYSIWYG-szerkesztő (What You See Is What You Get) kombinációja. Összetettsége, széles funkciópalettája és ára miatt főleg a professzionális webszerkesztők használják. A Dreamweaver jelenleg a Mac OS és a Windows operációs rendszereken fut. A gyártó adatai szerint a Dreamweavernek 4 millió regisztrált felhasználója van világszerte. Első verziója 1997-ben jelent meg a Macromedia szoftverház fejlesztésében, 2005-ben a termék az Adobehoz került. A Dreamweaver előnye, hogy viszonylag "tiszta" HTML-kódot generál, a meglévő HTML-lapokat pedig a lehető legkevésbé változtatja meg. Lehetővé teszi a weblapok áttekinthető, vizuális szerkesztését és olyan funkciókat nyújt, mint a kód színes jelölése, az automatikus kód-segítség, hibajavítás, és formázás HTMLhez, XHTML-hez, CSS-hez, XML-hez, PHP-hez, JavaScripthez, ActionScripthez, ASP-hez, sőt, olyan programnyelvekhez, mint a C#-hoz, Javahoz és VB-hez. A CS6-os verzióban az interaktív Live- és a Multiscreen-nézet teszik a böngésző- és eszközfüggetlen HTML5tartalmak fejlesztését és tesztelését még egyszerűbbé. A jQuery és a PhoneGap továbbfejlesztett támogatása leegyszerűsíti az alkalmazások készítését, és a megújult FTP-klienssel nagy adatmennyiségeket is gyorsan lehet továbbítani.

1.2. A Welcome Screen Amikor megnyitjuk a Dreamweavert - a legtöbb Adobe szoftverhez hasonlóan - egy ún. Welcome Screen fogad bennünket:

Fent jobbra gyorsan hozzáférhetünk a legutóbb megnyitott állományokhoz, vagy kitallózhatunk egyet az Open...-nel. A középső blokk linkjeivel új dokumentumot (HTML, ColdFusion, stb.) hozhatunk létre.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Újdonság itt a Fluid Grid Layout, amivel mobil eszközökre szánt layoutot lehet igen gyorsan létrehozni. A Dreamweaver Site linkkel új site-ot lehet berendezni. A More... megnyitja a sablonkezelőt. A Top Features rész csupán linkeket tartalmaz a http://tv.adobe.com angol nyelvű videóira. Ezek néhány havonta frissülnek. Az alsó rész linkjei a http://www.adobe.com/devnet/dreamweaver.html oldal angol nyelvű, szöveges tréningjeit hívják fel. A Dreamweaver Exchange link az Adobe Marketplace-re (piactérre) vezet, ahol sok (ingyenes vagy költségtérítéses) bővítmény tölthető le a Dreamweaverhez. Bővítménynek nevezzük azokat a kisebb programokat, amelyek egy nagyobb alaprendszer funkcionalitását kibővítik.

1.3. A kezelőfelület

A kódszerkesztő és az előnézet Háromféle nézet közül választhatunk: Code (csak a kódszerkesztőt látjuk), Design (csak az előnézetet látjuk), és Split (megosztott nézet). Alapértelmezés szerint a kód- és a Design nézet 50-50%-át foglalják el a dokumentum ablaknak, de a két ablakot elválasztó vonalat kattintás-húzással ide-oda lehet tolni, és a Design / Split Vertically be- és kikapcsolásával egymás mellé ill. egymás alá lehet helyezni. Egyszerre több dokumentum is lehet megnyitva, köztük a szerkesztőablak feletti kartotékfülekkel lehet választani. Egyes dokumentumok hivatkozásokat tartalmaznak más erőforrásokra (pl. a HTML-ek CSS-ekre); ezek gyorsan elérhetők a kartotékfülek alatti sávval (CSS-stíluslap neve), de a Source Code-dal gyorsan vissza lehet térni a megnyitott dokumentumhoz:

A szerkesztőablak alatti sáv a kijelölt elem (tag) helyét mutatja a dokumentum-hierarchiában. Ennek mindegyik szintje megkattintható, ezáltal kijelölhető:

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

A sáv jobb oldalán vizuális segédeszközök találhatók: zoom, multiscreen-előnézet (smartphone, tablet, desktop), egyéni felbontás:

A Kódnézettől balra elhelyezett függőleges sávban pedig kijelölő, hibakereső, kommentár-beillesztő és kódformázó eszközök vannak.

Kihelyezett parancsok A kezelőfelület felső sávjában látható ikonokkal 1. kiválaszthatjuk a megfelelő nézetet (Code, Split Code, Design, Code and Design), 2. elindíthatjuk az Extension Managert (ami az Adobe alkalmazások bővítménykezelője) vagy az Adobe Widget Browsert (a bővítményböngészőt), 3. és új site-ot rendezhetünk be vagy elővehetjük a meglévő site-ok kezelőjét. A legördülő menü a 11 tipikus munkafolyamat munkaterületét teszi gyorsan elérhetővé. A keresőmezővel pedig átkutathatjuk az Adobe online tudástárát.

Live-nézet Korábban böngészőkben végeztük a tesztelést. A belső Design nézet nem volt interaktív és nem tudta megjeleníteni a CSS3 tulajdonságokat. A CS6-ban az új Live-nézet olyan, mint egy böngésző a szerkesztőben; motorja a Google Chrome-ban és a Safariban is használt Webkit engine. Úgy tudunk benne navigálni weboldalunk lapjai közt, mint egy böngészőben. Menüsora a következő kezelőszervekkel szolgál:

Vissza, Előre, Frissítés és Honlap gomb, Címsor legördíthető előzményekkel, legördülő a JavaScriptek és Pluginek deaktiválásához, Multiscreen előnézet a legkülönbözőbb felbontású kijelzők szimulálásához, böngészőválasztó (ennek menüpontjait megkattintva viszont külső böngészőben nyílik meg a lap), fel- és letöltés, érvényesítés a W3C Validator-rel, inkompatibilitási problémák kezelője, vizuális segédeszközök kibekapcsolása.

1.4. A paletták Beillesztés paletta (Insert) Segítségével HTML- XML-, JavaScript és PHP-elemeket illeszthetünk a dokumentumba. A kezelhetőség kedvéért ezeket kategóriákba sorolták: Általános (Common), Design-elemek (Layout), Űrlapelemek (Forms), Adatbázis-eszközök (Data), Spryok (validált űrlapelemek és legördülő menük), jQuery Mobile (függvények mobileszközökre), InContextEditing (szerkeszthető és ismétlődő területek site-sablonokban), Szövegformázók (Text), Egyéni összeállítás (Favorites). Többségüket egy kattintással, vagy egy felhasználóbarát párbeszédablaken keresztül illeszthetjük be a dokumentumba, a kódolást a Dreamweaver elvégzi.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Tulajdonság paletta (Properties) Ez egy kontextus-szenzitív konfigurációs paletta; mindig az éppen kijelölt elem tulajdonságait mutatja. Ez azért fontos, mert minden opció egy helyen érhető el, és nem kell keresgélnünk a beállításokat a menüsorban. A mezők nem csak indikátorok; a velük eszközölt beállítások beleíródnak a kódba.

Hasonlóan a szövegszerkesztő szoftverekhez, általában előbb begépelünk valamit, majd kijelöjük és megformázzuk. Látni fogjuk, hogy pl. kép kijelölésénél egészen mást mutat a tulajdonságpaletta.

Keresés paletta (Search) Itt jelennek meg a keresések eredményei ill. az elvégzett cserék helyei, melyeket a Keresés és csere panellel (CTRL-F) eszközöltünk. Duplakattintással az adott dokumentum megfelelő sorára ugorhatunk:

Emellett kartoték-rendszerben több más paletta található; pl. a HTML-súgó (Reference), a W3C-ellenőrzés (Validation), a Böngésző-inkompatibilitás-ellenőrzés (Browser Compatibility), a Linkellenőrzés (Link Checker), a Weboldal-jelentés (Site Report) vagy a fel- és letöltéseket naplózó FTP Log.

CSS-szerkesztő paletta (CSS Styles) Itt láthatjuk vagy az összes taghez (All), vagy egy bizonyoshoz (Current) tartozó stílusinformációkat, akkor is, ha az külső CSS fileban található. All üzemmódban ketté van osztva. Felül látható valamennyi, az aktuális dokumentummal összefüggő CSS-szelektor, alant a kijelölt szelektornak adott tulajdonságok és értékek. Current üzemmódban három része van. A Summaryben látható a kijelölt elem összes tulajdonsága, a Rulesban hogy ezeket honnan örökölte, és alul ismét a tulajdonság-érték párok. Akármelyik sorát is kattintjuk meg, a többi ablakrész értelemszerűen módosul. Tulajdonság-érték párokra duplán kattintva megnyithatjuk a DW fejlett CSS-szerkesztő párbeszédét, és a HTML-dokumentum elhagyása nélkül alakíthatjuk annak stílusát.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Tag Inspector Két részből áll. Az Attributes listázza a kijelölt elem attribútumait, beleértve a hozzárendelt JavaScriptes viselkedéseket. A Viselkedés paletta (Behaviors) segítségével rendelhetünk elemeinkhez olyan JavaScriptes viselkedéseket, mint pl. egy elem kattintásra való eltűntetése. A táblázat bal oszlopában az események, jobb oszlopában a hozzárendelt viselkedések olvashatók le.

Files paletta A Files paletta mutatja az aktuális site gyökérkönyvtárát és almappáit, azok minden tartalmával együtt. Az első mezőben lehetne áttérni egy másik site-ra, a mellette lévő mezőben választhatjuk ki, hogy a lokális, vagy a szerveren lévő verziót akarjuk látni. Az alattuk lévő gombokkal csatlakozunk a szerverhez, frissítjük a könyvtárat, töltünk le és fel fileokat, és az utolsó gombbal nagyítjuk fel ezt a palettát úgy, hogy egyszerre lássuk a lokális mappát és a szerver tartalmát.

Kincsek (Assets) A Files palett mellett található az Assets, ami egy kicsit másképpen mutatja a websiteon belül előforduló "kincsek" listáját. A bal oldali függőleges sávval típus szerint szűrhetők (képek, színek, URL-ek, beágyazott SWF-ek, videók, szkriptek, sablonok). A jobb alsó rózsaszín gombbal a kijelölt assetet kedvenccé léptethetjük elő, és a jobb felső Favorites gombbal szűkíthetjük a listát csak a kedvencekre. Az Assets paletta mindent tud, amit a File-kezelő is: átnevezést, mappák létrehozását, áthelyezést. A jobb katt / Edit megnyitja a file-t az alapértelmezett szerkesztőprogramban. A jobb katt / Copy to Site paranccsal az adott asset átmásolható egy másik site kép-mappájába. A jobb katt / Locate in Site megmutatja a Files palettán, hol található a file „fizikailag”.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

A Window menü Valamennyi palettát a Window menüben lehet be- és kikapcsolni: a bepipáltak láthatók a kezelőfelületen. Rendezésük, dokkolásuk, egymástól való függetlenítésük ugyanúgy drag'n'drop elven történik, mint a CS3 óta valamennyi Creative Suite-alkalmazásban. A Workspace Layout almenü tartalmazza a paletták olyan csoportjait, amelyek egyes munkafolyamatoknál gyakran kellenek. Ha kialakult, hogy mi az, amit mindig használunk, és mi az, ami sosem kell, itt elmenthetjük saját munkaterületünket is (Workspace Layout / New Workspace), amely ezentúl mindig rendelkezésre fog állni. Az F4 billentyűvel a paletták elrejthetők - így többet láthatunk a tartalmakból. Az egeret a kijelző jobb szélére mozdítva a jobb oldalsáv ebben az állapotban is azonnal megjeleníthető.

Vizuális segédeszközök A Design nézetben való tájékozódást segítik: 

Fluid Grid Layout Guides: rugalmas rács segédvonalainak megjelenítése



CSS Layout Backgrounds: beszínezi a -eket, kiterjedésük és hierarchiájuk könnyen leolvasható



CSS Layout Outlines: keskeny sárga és fekete szaggatott vonalakkal ábrázolja a konténerek határait



AP Element Outlines: kerettel emeli ki az abszolút módon pozícionált -eket



Table Borders: bekeretezi a táblázatokat és celláikat



Frame Borders: megjeleníti az egyes böngészőkre jellemző külső keretet; frameseteknél a kereteket



Invisible Elements: megjeleníti (kijelölhetővé teszi) a rejtett elemeket, mint a rejtett űrlapelemek (hidden field), vagy a belső hivatkozások horgonyai (anchor)

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

További segédeszközöket találunk a View menüben, ilyen pl. a vonalzó (CTRL-ALT-R). A vonalzókból segédvonalak húzhatók ki, amelyek segíthetnek az elemek manuális ehelyezésében. A segédvonalakat a már meglévő elemek határai vonnzák. A View / Grid / Show Grid menüponttal megjeleníthetünk egy rácsot, és az Edit Grid menüponttal pontosan beállíthatjuk vízszintes és függöleges sűrűségét.

2. Dokumentumok és site-ok kezelése 2.1. A weboldal és a siteroot A weboldal egymással összekapcsolt HTML-dokumentumok és egyéb állomáyok (képek, PDFdokumentumok, Flash-animációk) rendszere, amely egy szerver meghajtójának mappájában tárolódik. Ezt a mappát hívják gyökérkönyvtárnak, vagy siterootnak. A böngésző a weboldal felhívásakor mindig az index.html nevű lapot jeleníti meg (ha olyat nem talál, akkor az index.php-t) - ez az ún. honlap (home page). Hozzunk létre egy mappát a meghajtónkon, és nevezzük el úgy, ahogy a projektünket hívják (a domain nevet is megkaphatja). Ebbe fogunk menteni minden, a site-hoz tartozó állományt. Hozzunk létre egy mappát a beágyazott képeknek, animációknak, és nevezzük el cgi-nak. Az áttekintést szolgálja, ha egy work nevű mappába tesszük az oldal elkészítéséhez szükséges állományokat: Word-dokumentumokat, Flash és Photoshop forrásállományokat.

Példa egy microsite lokális könyvtárára

2.2. A site-os munka Kezdetben azoknak, akik még nem publikáltak a weben, gondot szokott okozni a site-os workflow megértése. Ha azonban pár napot dolgoztunk már egy weboldalon, többé nem leszünk hajlandók lemondani a fejlett filekezelés előnyeiről. A Dreamweaver rendszerként tekint az általunk meghatározott site-ra. Tudja, hogy a projekt állományait hol tartjuk a gépen, hol található a hozzá tartozó távoli tárhely, és milyen módon kell ahhoz kapcsolódni. Amikor dreamweaverezünk, általában vagy létrehozunk egy új siteot, vagy egy meglévő site-on dolgozunk tovább. Akárhogy is, az általunk mentett dokumentumok, vagy a beillesztett tartalmi elemek ugyanabba a mappába fognak kerülni. A site-os felfogásnak három további előnye van:

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

2.2.1.

Azonnali élő (webes) tesztelés

Ha egy weboldal adatbázissal függ össze, nem is lehet lokálisan tesztelni, hanem csak a szerveren (kivéve ha gépünket szerverré alakítjuk). Az állományokat feltölteni olyan külső programokkal is lehet, mint a TotalCommander, de minek elhagyni a DW felhasználói felületét, ha az teljeskörű FTP-klienssel is rendelkezik? A Files paletta Expand gombja hívja fel ezt az osztott nézetű panelt:

Ugyanannak a site-nak a Dreamweaveres nézete

Akár a Total Commandernél, jobbra látható a lokális könyvtár, balra a távoli szerver tartalma. FTPkapcsolatot a Connect gombbal lehet létesíteni. Ameddig a zöld "lámpája" ég, file-okat tölthetünk fel és le; kijelölés után a zöld get (letöltés) és a kék put (feltöltés) gombokkal, vagy egyszerűen kattintás-húzással.

2.2.2.

Állományokra való hivatkozás automatizálása

Ha pl. egy 50 lapból álló website egyik HTMLlapját átnevezzük vagy áthelyezzük, nem kell az összes ráirányuló hivatkozást kijavítani. A Dreamweaver automatikusan felkínálja a linkek href="" attribútumának frissítését. Ugyanígy viselkedik a képek elérésének módosulásával – frissíti az img tagek src="" attribútumát. Márpedig a gyakorlatban sűrűn nevezünk és helyezünk át állományokat, legalábbis ameddig a weboldal felépül, kiteljesedik. Abban az esetben, ha egy siterooton kívüli mappából próbálunk beilleszteni pl. egy képet, a program figyelmeztetni fog minket és megkérdi, nem kérünk -e másolatot a képről a siterootba.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

2.2.3.

Tartalmak keresésének és cseréjének automatizálása

A gyakorlatban rengetegszer előfordul, hogy a site-unkban egy – akár tömegével előforduló – kódrészlet módosításra szorul. Ilyenkor segít a Keresés és csere párbeszédablak (CTRL-F), melynek site-os keresése ill. cseréje csak akkor működik, ha meghatároztunk egy site-ot. A mellékelt ábrán pl. a site összes lapját háttérképpel látjuk el. A Find & Replace párbeszédablak kicsit többet tud, mint pl. a Word azonos nevű ablaka, és fontos, hogy mindig mindegyik opcióját átnézzük: Find In: itt kiválaszthatjuk, hogy hol akarunk keresni: 

az aktuális dokumentumban (Current Document)



az aktuális dokumentumban kiválasztott szövegterületen belül (Selected Text)



a megnyitott dokumentumokban (Open Documents)



egy bizonyos mappában lévő dokumentumokban (Folder)



a Files palettán kijelölt dokumentumokban (Selected Files in Site)



a teljes site-on belül (Entire Current Local Site)

Search: itt be kell állítanunk, hogy a forráskódban (Source Code) keressen, vagy a szövegben (Text). A kettő nem csak azért nem ugyanaz, mert a forráskód = szöveg + HTML-tagek, hanem mert egyes karakterkódolások mellett a kódban ékezetes betűk helyett karakterkódok szerepelnek (pl. á = á). Az utolsó két opcióval azt is beállíthatjuk, hogy csak egy bizonyos tagen belül kívánunk keresni és cserélni (Text Advanced), vagy egy bizonyos tag előfordulásainak bizonyos attribútumának értékét akarjuk átírni. Find: ide írhatjuk a keresett tartalmat. A keresést el is indíthatjuk a Find Next (következő) vagy a Find All (mind megkeresése) gombokkal. Replace: ide kell beírni, hogy mire cserélje ki a találatokat. A Replace-szel egyenként, a Replace All-lal mindegyik találat felülíródik. FIGYELEM: Bánjunk nagyon óvatosan a Replace All gombbal, különösen, ha nem megnyitott állományok is érintve lennének! Ezek tartalmát ugyanis a DW megnyitás nélkül átírja, és nem lesz lehetőség visszavonni a változásokat. A Match case jelölőnégyzet aktiválása akkor szükséges, ha különbséget akarunk tenni ugyanannak a szövegnek a kis- és nagybetűs írásmódja között. Az Ignore whitespace bejelölése akkor hasznos, ha gyanítjuk, hogy a kódban 2-2 szövegrész között eltérő számú sortörés, tabulátor vagy szóköz szerepel.

2.3. Új site berendezése Ha eldöntöttük, hogy lokálisan hol fogjuk tartani a projekthez tartozó állományainkat, kialakítottuk a könyvtárstruktúrát (a projekt nevét viselő gyökérmappa, benne legalább egy cgi és egy works mappa), ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

berendezhetjük a site-ot Dreamweaverben. Azaz megmondjuk neki, hogy mostantól a gyökérmappát weboldalként kezelje, a benne elhelyezett lapokat a weboldal lapjaiként, és ha már domaint és tárhelyet is foglaltunk, megmondjuk azt is, hogy hol található a szerver és miként kapcsolódhat hozzá. Így a munka is több okból gyorsabb és az élő tesztelés is flottabb lesz. A Site menü / New site egy kicsit hosszabb párbeszédet nyit meg. Első lapján megadjuk a site nevét (ez csak azonosításra szolgál, mert a későbbiekben több site-unk lesz még), és a lokális mappát.

A Servers lapon lehet megadni az FTP elérési adatokat(ezeket tárhelybérlést követően e-mailben küldi meg a szolgáltató). A szervernek nem kötelező nevet adni, de a kiszolgáló-, a felhasználónév és a jelszó kötelező. A Test Connection-nel le is lehet ellenőrizni, helyesen adtuk –e be az adatokat.

Az Advanced Settingset legördítve a Local Info lapon megadhatjuk az alapértelmezett kép mappát (gyorsabbak lesznek a beillesztések), és a Web URL-t, ha van. A weboldalt akkor is kifejleszthetjük, ha nincs még tárhelyünk – a site-os munka így is könnyebbé teszi az életünket. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Cloakingnak nevezi a DW a szerverre nem feltöltendő állományok, könyvtárak feltöltésének blokkolását. Szükség akkor lesz rá, ha több állományt megváltoztattunk egy munkamenet során, és egy kattintással fel akarjuk tölteni a cuccost. Hogy a work mappa nyersanyagai ne töltődjenek fel, aktiválni fogjuk a cloakingot. Az .fla és .psd állományok szintén nem tartoznak a szerverre, ők forrásfile-ok, munkafile-ok – a szövegmezőben típus szerint is ki lehet szűrni őket.

A következő lapoknak már nincs egetverő jelentősége. A Design Notes segítségével megjegyzések fűzhetők a file-okhoz, és a File View Columns lapon beállíthatjuk, hogy ezek megjelenjenek –e a Files palettán. A Contribute az Adobenek egy korábbi szoftvere; voltaképpen egy lebutított Dreamweaver, amibe a webszerkesztők ügyfelei is könnyen beletanulhattak. Eljárt felette az idő, mert sokkal célszerűbb tartalomkezelőkkel dolgozni. A Spry lapon lehet megadni, minek nevezze el a DW a JavaScriptes keretrendszere által generált állományok mappáját. A Web Fonts lappal pedig be lehet állítani, hogy hova fogjuk tenni esetleges betűtípusainkat. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Kattintsunk a Save-re. Technikailag egy XML-file keletkezik, ami tartalmazza az összes itt megadott információt. Ezzel csak a DW tud valamit kezdeni; a hozzáférési adatokat olyan kriptikus formában menti, hogy egy autista kódfejtő sem hámozná ki belőle a jelszavunkat. A Files paletta most már az aktuális site-hoz tartozó mappákat, állományokat mutatja. Ha most létrehozunk egy HTML-t, eleve ebbe a mappába fog kerülni. Ha abba beillesztünk egy akárhonnan kitallózott képet, a DW automatikusan bemásolja az alapértelmezett kép mappába. Ha megváltoztatnánk valamelyik file nevét, az összes ráirányuló hivatkozás frissülne. A Keresés & Csere párbeszéddel olyan változtatásokat eszközölhetünk, amelyek a site valamennyi dokumentumát érintik. És ha a felfelé mutató nyílra (put, azaz upload) kattintunk, az egész kóceráj áttöltődik a szerverre. Ha már több site-unk lesz, a felső legördülővel tudunk közöttük váltogatni.

Ez egy az oprendszeri Intézőhöz (Macintosh: Finderhez) nagyon hasonó file-kezelő. Kattintás-húzással a fileok áthelyezhetők, a kontextusmenü Rename parancsával pedig átnevezhetők – a DW mindkét esetben felkínálja a hivatkozások aktualizálását. Ha törlünk egy file-t, figyelmeztet, ha arra más dokumentum még hivatkozik. Új mappa a jobb kattintás / New Folderrel hozható létre. Bármilyen műveletet végzünk is az oprendszeri file-kezelőben, ez a nézet is aktualizálódik, ha frissítjük (F5). A különbség az, hogy az oprendszer semmiféle felelősséget nem vállal a weboldal működőképességéért (helyükön legyenek a képek, működjenek a linkek, stb.) – ezért jobb, ha az áthelyezéseket, átnevezéseket és törléseket mindig ezen a palettán végezzük el.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

2.4. Dokumentum létrehozása A HTML-, CSS- és XML dokumentumok neve nem tartalmazhat szóközt és különleges karaktereket. Ha keresőoptimalizálási szempontból fontos egy több szóból álló állománynév, használjuk a kiskötőjelet. Az alsó vonás (underscore) előnytelen, mivel egyes interpreterek számára a szavak részét képezi. Nem használhatjuk továbbá becses magyar ékezetes betűinket, a legtöbb szerver ugyanis nem támogatja. Ne essünk azonban abba a hibába, hogy pl. az ö betűt átírjuk oe-nek. Ha a Google-ben rákeresünk egy ékezetet tartalmazó szóra, a találatok között szerepelhetnek az ékezetes és az éktelen írásmód példányai. Ha viszont az állománynévben plusz betűk szerepelnek (pl. tuekoerfuuroogeep), azt egy teljesen más szónak veszi, és így elszalasztjuk az optimalizálásnak egy esélyét. Az állománynév nem azonos a dokumentum címével (ami a tagben foglaltatik). Ami a -ben van, bármilyen karaktert tartalmazhat.

2.5. Alapértelmezett böngészők definiálása A Live-nézettel lehetővé vált a weboldal böngésző nélküli tesztelése, ezzel nagyjából a Google Chrome és a Safari böngészők által nyújtott élmény tesztelhető – igaz, valamivel lomhábban. Az F12-es billentyűvel és a CTRL-F12 (Mac: CMD-F12) kombinációval az aktuális lap két külső böngészőben is tesztelhető. Jelenleg a legbölcsebb a Chrome-ban és az Explorerben tesztelni. A Chrome-ban azért, mert kiváló bővítményei és teljességgel letisztult kezelőfelülete egyébként is a legjobb böngészővé teszik, akár „szörfözéshez”, akár fejlesztéshez, és a népek 44%-a ezen keresztül szemléli weboldalunkat (w3schools.com Browser Statistics, 2012 tél). Az Internet Explorerrel viszont muszájból foglalkozunk. Ez az a böngésző, amelyik a legkevésbé tartja be a W3C ajánlásait, a piac 16%-át mégis ő birtokolja. Ha valami jól néz ki Chrome-ban (ergo Safariban is), a Firefoxos és az Operás kinézete miatt nemigen kell aggódnunk, de az Exploreres miatt kell. Kattintsuk meg a földgömb ikont a kódszerkesztő felett. Ha van Adobe-ID-nk, a Preview in Adobe BrowserLab elküldi a lapunkat az Adobe-nek. Ez a kiválasztott kijelzőfelbontások és böngészők szerinti screenshotokat generál, hogy jobban megítélhessük weblapunk viselkedését napjaink igen heterogén hardver- és szoftverkörnyezetében. Mi most válasszuk az Edit Browser List… lehetőséget. Az észlelt böngészők közül nevezzük ki a Chrome-ot Primary, azaz elsődleges browsernek, az IExplore-t pedig Secondarynek, másodlagosnak.

2.6. A Site-kezelő ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

A DW Site-kezelője a Site / Manage Sites… menüponttal érhető el. Ebben a kezelőben tudjuk a sitebeállításokat szerkeszteni, és a sitedefiníciós file-okat importálni és exportálni. De miért van erre szükség? Szoftver-rendszerünk nem állandó. Előbb-utóbb programjaink elavulnak, az oprendszer belassul. Windowsfelhasználóknál kb. félévente eljön a nap, amikor érdemes újratelepíteni a rendszert. A DW új telepítése nem fog emlékezni a site-definíciókra. Ha egy napon 20 site-unk lesz, szeretnénk 6 havonta 20× végigmenni a fentieken? – Bizony nem, és ezért a rendszer dózerolása előtt exportálni kell a site-definíciós file-okat (STE kiterjesztésű XML-ek), majd az új DW-telepítésbe be kell importálni. A program mindegyik site esetében rá fog kérdezni a lokális mappa aktuális helyére.

2.7. Új dokumentum létrehozása Új HTML-dokumentumot 3-féleképpen is létrehozhatunk: a Welcome Screen HTML gombjával, a Files palettán jobb katt / New File paranccsal, és a Files menü New… parancsával (CTRL-N). Az előbbi két lehetőség minden teketória nélkül létrehoz egy a Preferences / New Documentben alapértelmezett formátumú HTML-doksit. Az utóbbi felhívja a New Document dialógust. Nagy vonalakban a dialógus függőleges menüjéről: 

Blank Page: Itt lehet létrehozni a felsorolt (HTML, CSS, XML, PHP, JavaScript, ASP és ActionScript) dokumentumokat. Ezeket a DW képes kezelni, és szerkesztésüket automatikus formázással és kódjavítással, keretrendszerekkel segíti. Egy részükbe a DW eleve beleírja a formátumhoz elengedhetetlen néhány sort. A többi üres szöveges doksit hoz létre, és a mentésnél ellátja a megfelelő kiterjesztéssel.



Blank Template: saját (HTML, PHP, ASP, JSP vagy CF) sablont hoz létre. A sablonokkal később egy eleve testreszabott dokumentum hozható létre.

Az előbbi kettőnek van egy Layout-választója, amelyben ki lehet választani a konténerek elrendezését (1, 2 vagy 3 oszlopa legyen a tartalmi résznek, legyen –e fej- és lábrész). Bővebben a Sablonokról szóló fejeztben. 

Fluid Grid Layout: Itt hozható létre olyan (X)HTML-dokumentum, amely mindenféle kijelzőfelbontáshoz (okostelefon, tablet és desktop számítógépeken) igazodni fog.



Page from Template: Az egyes site-okhoz rendelt sablonokból lehet létrehozni dokumentumokat.



Page from Sample: CSS-alapbeállításokat lehet adni HTML-eknek és rafinált jQuery-s mobil kiinduló lapokat lehet létrehozni. Bővebben a Sablonoknál. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Valamennyi lapon megtalálható a DocType legördülő, amellyel a létrehozandó dokumentum típusa (pl. a HTML verziója) adható meg.

Kérjünk most egy üres XHTML 1.0 Transitionalt és kattintsuk meg a Create gombot.

A DW előzékenyen lefektette az első néhány sort: a DOCTYPE-ot, a névteret, a karakterkódolást és a HTMLalapszerkezetet. Ha később mégis más formátumot szeretnénk használni, még egy jól felépült oldalt is át lehet konvertálni a File / Convert menüvel. Ilyenkor a lap dokumentumtípusa és összes tagje, attribútuma átváltódik a célformátum szabályainak megfelelően.

2.7.1. DOCTYPE, DTD (Document Type Definition) A DOCTYPE deklaráció nem része magának az XHTML-dokumentumnak, záró eleme sincs, és kötelező az első sorban szerepeltetni. A DOCTYPE definiálja a dokumentum típusát. A W3C minden, általa ajánlott (vagy fejlesztett) dokumentumtípusról egy nyilvános címen elérhető dokumentumtípus-definíciós file-t (.dtd) őriz. A DTD az adott doktípusban felhasználható elemeket és attribútumokat tartalmazza, és útmutatást ad a böngészőknek a dokumentum helyes megjelenítéséhez. Az 1.0-s szabványban 3 dokumentumtípus létezik:

XHTML 1.0 Strict

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

A legtöbb, szövegek formázására szolgáló elem és attribútum hiányzik belőle. Ezek helyett a webszerkesztőknek a stíluslapokat kell használnia. A bodyban csak blokk-elemek állhatnak. Ez a szigorú változat az újonnan készülő weboldalaknál javasolt, amelyek formázása következetesen CSS-sel történik.

XHTML 1.0 Transitional

A Transitional (átmeneti) variáns egy kompromisszum, amit a W3C – széleskörű elterjedtségére való tekintettel – megenged, és online validatorével még szentesít is. Ez azoknak való, akik nem akarnak egészen lemondani a HTML prezentációs lehetőségeiről, pl. mert még tanulgatják a CSS-t. Ez a változat megengedi azon elemek és attribútumok használatát, amelyeket elutasítottként (deprecated) a Strict változatban már nincsenek meg; pl. a font, az align vagy a bgcolor. A Transitional változatban szabad a bodyba inline-elemeket vagy tag nélkül álló szöveget tenni.

XHTML 1.0 Frameset

Ezt akkor használjuk, ha az ablakot több keretre (frame-re) osztjuk fel. Így egy HTML-be (a framesetbe) több kisebb ablak nyílik, amelyekbe más HTML-ek tölthetők be. Egyes esetekben célszerű lehet, de ez egy kifutó technológia, kereső-optimalizálási szempontból rendkívül előnytelen, és helyettesíthető az iFrame-ekkel.

2.8. HTML- és XHTML-dokumentumok konvertálása A Dreamweaver – mint több WYSIWYG-szerkesztő – képes a dokumentum-típusokat oda-vissza konvertálni, vagy a kevert szintaxisú és/vagy szemantikájú dokumentumokat egy szabvány szerint végigtisztítani. Nyissunk meg egy HTML dokumentumot – pl. valamelyik korábbi munkánkat – és váltsunk Kódnézetre, majd válasszuk a File menü / Convert parancsát, és válasszuk ki a kívánt dokumentum-típust, pl. az HTML5öt. Látható, hogy a program ellátta a dokumentumot a DOCTYPE-pal, és átalakította a tageket a HTML formai követelményinek megfelelően.

2.9. Automatikus kódsegítség (Code Hinting) A kódszínezés segíti az áttekintést és a hibák gyors lokalizálását. Ha pl. a teljes tartalma rózsaszínben tündököl, akkor biztos, hogy a -ben nyitva maradt egy stílusdeklaráció. A színezés beállításai a Preferences / Code Coloring lapján vannak. A HTML-értelmezők nem törődnek a tagek közötti űrrel, de ember számára sokkal áttekinthetőbb a tagolt kód. Ha egy dokumentum zavarossá vált a hosszú whitespacek és a zsúfolt sorok miatt, netán olyan forráskódot kapunk, ami egyetlen hosszú sorból áll, a Commands / Apply Source Formatting paranccsal tehetjük tagolttá: minden markup külön sorba kerül, és az egymásba ágyazottak szintről-szintre beljebb ugranak 4 karakterrel. Az automatikus tagolás beállításai a Preferences / Code Format lapján találhatók. A DW gépelés közben lesi minden mozdulatunkat és megjeleníti az adott dokumenttípus szemantikájához tartozó szavak lexikon-szerű felsorolását. Ha egy helyesen leírt szó után szóközt ütünk, szintén értelemszerű javaslatokat ad. Ha pl. megnyitunk egy taget, felkínálja annak attribútumait. Ezek között a nyílbillentyűkkel tudunk léptetni, és az Enterrel fogadjuk el, emeljük be a kódba a megfelelőt.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Nemcsak a tageket és attribútumokat ismeri, hanem az attribútumokhoz tartozó összes értéket is:

Ha használjuk a kódsegítséget, gyorsabban tudunk dolgozni nemcsak HTML-ben, hanem az összes DW által támogatott formátumban. Az ezzel kapcsolatos beállítások a Preferences / Code Hints lapján vannak.

2.10. Kijelölés A Dreamweavernek mind a kód- mind a Design nézetében működik a legtöbb szövegszerkesztőből vagy – megjelenítőből ismert kijelölési módszer: 

a kattintás-húzás



a duplakattintás vagy a CTRL-SHIFT-nyílbillentyű jobbra/balra (szó kijelölése)



a háromszoros kattintás vagy a CTRL-SHIFT-nyílbillentyű fel/le (bekezdés kijelölése)



a bal oldali sorszámozott sávra kattintva is sorokat jelölhetünk ki



kattintás, majd SHIFT-kattintás a kijelölendő szöveg elején ill. végén

Teljes markupok (nyitó és záró tag + tartalom) kijelölését azonban lényegesen meggyorsítja a Kódnézet alatti sáv. Ezt gyakran használjuk pl. elemek maradék nélküli törlésére (kattintás, Delete).

2.11. Szövegszerkesztés Ha szöveg van kijelölve, a Tulajdonság-palettán megjelenik néhány szövegszerkesztőkből ismert gomb: a félkövér és a dőlt betűs stílus, a felsorolások (rendezetlen, sorszámozott) és a behúzások.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Hivatkozások A kijelölt szöveget vagy képet hivatkozássá a Link mezővel lehet alakítani: akár belső (#hivatkozasipont), akár külső (http://domain.hu/kapcsolat.html), akár e-mail hivatkozást megadhatunk vele. A weboldal lapjaira, képeire vagy PDF-dokumentumaira a tallózómappa vagy a célkereszt segítségével is hivatkozhatunk (kattintás-húzás a Files paletta valamelyik dokumentumára). Kijelölt link esetén a Target attribútummal adató meg, hol nyíljon meg a cél (új tabben, új ablakban, a szülő keretben, az aktuális tabben vagy a legfelső keretben). A hivatkozási pontok elhelyezése is nagyon egyszerű. Válasszuk ki az Insert menü / Named Anchor parancsát, majd a felugró ablakban határozzuk a meg a hivatkozási pont nevét. A név nem tartalmazhat ékezetes és különleges írásjeleket, szóközt. Természetesen egy másik lapon elhelyezett hivatkozási pontra is hivatkozhatunk. Manuálisan is beírhatjuk az egészet, de a kitallózott lap címét is megtoldhatjuk: masiklap.html#1fejezet Az Insert (menü vagy paletta) / Email Link ablakában megadható a megjelenített szöveg (pl. „Írjon nekünk!”), és az e-mail cím, ami a felhasználó e-mail kliensében az új üzenet fogadómezőjébe kerül. Ez azonban elavult módja a kapcsolatteremtésnek; az ebek harmincadjára közzétett e-mail címek pikk-pakk elspamesednek. A Format legördülővel

vagy - taggé alakíthatjuk a kijelölt taget, vagy amelyikben a kurzor aktuálisan villog. Az ID-vel pedig azokhoz az azonosítókhoz tudjuk villámgyorsan hozzárendelni, amelyeket a csatolt stíluslapon deklaráltunk.

Tartalom- és formaszerkesztés Ha a HTML gomb aktív, és egy kijelölt szót a B gombbal megvastagítunk, a kódban a szó tagpár közé kerül, azaz szemantikai kijelölést kap:

Ha azonban a CSS aktív, akkor a B gomb a New CSS Rule dialógust hívja fel. A felső legördülővel megadhatjuk, hogy új osztályra, új azonosítóra vagy HTML-tagre vonatkozóan kívánjuk definiálni az új szabályt. Osztály és azonosító esetén a Selector Name mezőbe be kell gépelni az óhajtott nevet (pl. idezet), HTML-tag esetén ki kell választani a taget a listából. A Compound automatikusan generál egy egyedi azonsítót (pl. #main article p), ami

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

a Less Specific gombbal rövidíthető le (article p-re vagy csak p-re). Végül az alsó legördülővel megadhatjuk, hova kerüljön az új szabály: jelen dokumentum fejlécébe, új stíluslapra, vagy a jelen dokumentummal már összekötött stíluslapba. Az OK-ra kattintva a CSS Rule Definition párbeszédablakba jutunk (ld. lejjebb). A különleges írásjelek listáját az Insert menü / HTML / Special Characters menüpont alatt találjuk. Az "Other…" feliratra kattintva egy 99 mezős táblázatból választhatunk.

Code Collapsing Amikor a lap tartalmait már elhelyeztük, de még vár a munka CSS-ben, hasznos funkció a kódterületek elrejtése. A kijelölt kódot a bal oldalsávon megjelenő – és + gombokkal rejthetjük el ill. jeleníthetjük meg.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

3. Elemek beillesztése A Dreamweaverben az Insert menü és az Insert paletta gombjaival tudjuk kezdeményezni az elemek beillesztését, ami a WYSIWYG-szerkesztők legalapvetőbb funkciója. A HTML-elemeket felhasználóbarát párbeszédablakok kérdéseire válaszolva illesztjük be, így szellemi kapacitásainkat inkább a tartalmakra áldozzuk, és nem annyira a kódolásra.

3.1. Képek beillesztése (Insert / Image Obejcts) Ha képeket illesztünk egy weblapba, fontos, hogy webre optimalizált (kellően tömörített) formában tegyük, hogy az adott lap megjelenése megfelelően gyors legyen. Minél kisebb fileméretű képet helyezünk el a weblapon, annál gyorsabban fog letöltődni, amikor megnyitják a lapot. A képek az Insert menü / Image parancsával vagy az Insert paletta 7. gombjával illeszthetők be. Ha kijelölünk egy beillesztett képet, a Properties a következő tulajdonságokat jeleníti meg:



Az előnézet mellett látjuk, hogy egy 122 k súlyú képről van szó.



Az ID mezőben name="" és id="" attribútumot adhatunk a képnek. Az azonosítót a CSS-es címzésre szokás használni. A name-re akkor lehet szükség, ha pl. JavaScripttel akarjuk megcímezni a képet.



A Src (Source) a kép forrása, vagy ha úgy tetszik, a kép elérési útja. Ezt átírhatjuk manuálisan is, vagy kicserélhetjük a tallózógombbal vagy a lasszóval (ráhúzzuk a Files vagy az Assets egy képelemére).



A Link mezőben hivatkozássá tehetjük a képet. A siterooton belüli célt kitallózhatjuk a mappa ikonnal, vagy megadhatjuk a lasszóval. Ha linkesítettünk egy képet, aktiválódik a Target (cél) mező.



Az Alt mezőben tudunk lehet szöveget adni a képhez. Ez akkor jelenik meg, ha a kép nem töltődik le, vagy elhúzódik a letöltése.



Az Edit melletti ikonok segítségével lehet a képet alapértelmezett szerkesztőjében megnyitni (Fireworksben vagy Photoshopban, ha van a gépünkön; ha ott szerkesztés után elmentjük, a kép a DW-ben frissül), tömöríteni, frissíteni, vágni, újrarenderelni, kontrasztján és világosságán csavarni, ill. élesíteni. Mindezen eljárások destruktívak, tehát az eredeti íródik felül.



A W (Width) érték a kép szélessége, a H (Height) a magassága. A képeket itt át is lehet méretezni, ettől fogva a behajtani-tilos jel arra szolgál, hogy az eredeti méreteket visszaállítsa. A képek a négy sarkukban és az oldalaik közepén elhelyezett fogantyúkkal is átméretezhetők.



A Class legördülővel lehet hozzárendelni a képet CSS-osztályhoz. Ha még nincs ilyen, innen is lehet indítványozni (Attach Style Sheet…).



Az Original mezőben megadhatjuk a kép eredetijének elérését. Ezt a DW csak a lokális gépünkön menti, nem teszi közzé.



Balra lent találjuk a hotspotok (forró pontok) beillesztésének eszközeit (Area Map). Ezekkel le tudjuk fedni a kép egyes részeit. A lefedett területekre hivatkozást lehet tenni. Három eszközzel tudunk síkidomokat rajzolni: Rectangular (téglalap), Oval (ovális), Polygon (sokszög). Ha a térképen ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

az alábbiak szerint elhelyezünk egy hotspotot, adunk neki egy Alt-szöveget, és ellátjuk a megadott linkkel, akkor a böngészőben Budapestre kattintva új lapon megnyílik a főváros portálja.



Ha sikerült beillesztenünk egy képet, hozzunk létre egy új CSS-szabályt és lássuk el kerettel a border vagy a background-color és a padding tulajdonságokkal.

3.2. Fireworks-integráció Nyissuk meg a koala_s.png-t Fireworksben. Vetett árnyékot szeretnénk neki adni. Ehhez meg kell növelni a vásznat. Kattintsuk meg a Propertiesen a Canvas Size gombot. Mivel jobbra és lefelé szeretnénk megnövelni, az irányválasztóban a bal felső sarokba kell kattintanunk. Adjunk be mindkét méretmezőbe hússzal magasabb értéket.

Kattintsuk meg a Propertiesen a Filters melleti pluszt. Ezzel lehet effekteket adni a kijelölt elemnek; válasszuk a Drop Shadow-t (vetett árnyék). Állítsunk be egy tetszőleges vetett árnyékot a távolság, szín, áttetszőség, szórás megadásával; az alapértelmezett 315°-os szög rendben van. Kattintsuk meg a monitor feletti 2-Up gombot. Az Optimize palettán válasszuk ki a PNG32-es formátumot.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

File / Export. Mentsük el a file-t pl. koala_sdrop néven. Zárjuk be a file-t és ha rákérdez, mentsük a PNG-t. Váltsunk vissza a DW-re. Illesszük be a képet az Insert menüvel vagy palettával. Változtassuk meg a háttérszínt, hogy meggyőződjünk róla: a 32 bites PNG képes alphacsatornát is elmenteni, tehát minden pixelnek van egy 0 és 255 közötti áttetszőségi értéke – azaz az árnyék vetett árnyékhoz méltóan a háttérszín sötét változata. Ha ezek után a DW Tulajdonság palettáján megkattintjuk a FW-ikont, a kép eredetije nyílik meg FW-ben, amelyben a vetett árnyék módosítható. A kép eredetije és a weblapba beillesztett verzió kapcsolata egy XML file-ban van, amit a notes mappában helyezett el a DW.

3.3. 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. Az Image Placeholder helyet foglal a képnek, hogy elkészültéig a többi tartalmi elemet el tudjuk helyezni a lapon. Amikor elkészült, nincs más dolgunk, mint a Properites palettán megadni a kép forrását (Src). Válasszuk az Insert menü / Image Objects / Image Placeholder parancsot (vagy az Insert paletta Common lapjának Image legördülőjéből ugyanezt): 

Name:

ideiglenes név



Width:

várható szélesség



Height:

várható magasság



Color:

ideiglenes kitöltésszín



Alternate Text: alternatív szöveg

3.4. Rollover Image A Rollover Image egy klasszikus JavaScriptvezérelt képforgatás. Ha a kép fölé visszük az egeret, akkor a kép helyet cserél egy másik képpel, és ha lehúzzuk róla az egeret, akkor visszaáll az eredeti kép. Ezt nemritkán ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

grafikus gombok készítéséhez használják. Válasszuk az Insert menü / Image Objects / Rollover Image parancsát (vagy az Insert paletta Common kategóriájának Image csoportjából ugyanezt a parancsot): 

Image name:

nevet adhatunk a képnek



Original image:

az eredeti kép



Rollover image:

a váltókép



Preload rollover image-et:

az eredeti kép letöltődésekor a háttérben automatikusan letöltődik a második kép is; ez meggyorsítja az effektet.



Alternate text:

alternatív szöveg



When klicked, Go to URL:

itt tehetjük a képet hivatkozássá

A Rollover Image hátránya, hogy mivel JavaScriptet használ, az Explorer minden egyes oldalletöltéskor ki fog akadni rajta. A platformfüggetlen, jövőképes megoldás a konténerekre alkalmazott backgroundimage CSS-utasítás. A kép státuszait egyetlen nagy képként is is exportálhatjuk, amit azután a backgroundposition tulajdonsággal tologatunk (ez a sprite technika).

3.5. A világhálón elterjedt képformátumok GIF (Graphics Interchange Format) Max. 256 színűre redukálja a színskálát, ettől egy enyhe pontozott textúra keletkezik. 1-bites alpha (áttetsző vagy nem), interlacing (a kép több, gyengébb felbontású változata ágyazható az állományba, így letöltődés alatt elfoglalja a nézőt). Különlegessége az animáció, azaz egy GIF-be több kép is elmenthető. Alkalmazás: ahol kis méret szükséges, vagy CGI-grafika (némi textúrát ad neki), ill. bannerek, animált avatarok, újabban rövid néma videók.

JPG (Joint Photographic Experts Group) Az eredetit egyszínű vagy átmenetes téglalapokra osztja fel, a részletgazdagabb képterületeken kisebbekre, a nagyobb, hasonló színű területeken nagyobbakra. 16,77 millió színt ismer. Alkalmazás: fényképek esetében gyakran a legjobb minőség / méret arányt nyújtja; a digitális fényképezőgépek legelterjedtebb mentési formátuma.

PNG (Portable Network Graphics) A színcsatornánként 8 és 24 bites tömörítés a legelterjedtebb. Előbbi 256 színt és 2 áttetszőségi értéket (igen vagy nem), utóbbi 16,77 millió színt és 256 áttetszőségi értéket tud menteni. Utóbbi veszteségmentesnek számít. Lehetőség van interlacingre, szövegmezőket is képes menteni. Alkalmazás: elsősorban grafikákhoz (ezeknél jóval alacsonyabb file-méretek elérhetők, mint JPGtömörítéssel) vagy fotó (bár itt egy kevéssé tömörített JPG gyakran lekörözi file-méretben).

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

SVG (Scalable Vector Graphics) A világháló 2D-s vektorgrafikus formátuma, azaz veszteség nélkül skálázható. Technikailag egy XMLdokumentum. Külső PNG-képek és szöveg is beágyazható. Animáció is programozható.

3.6. Médiaelemek beillesztése (Insert / Media) SWF (Flash-animáció) A Flash projektfile-ja egy .fla kiterjesztésű file. Ebben van mindaz, ami a munkához kell; ezt csak a Flash szerzői rendszer képes olvasni. A Flash terméke, amit közzéteszünk, az a .swf (Small Web Format). Ezt az Insert menü / Media ill. az Insert paletta Media legördülőjével illeszthetjük be. Adni neki egy címet, ami kb. olyan, mint a képeknek az alt. Ha kijelölünk egy beillesztett animációt, a tulajdonságpaletta módosul:

A W és H a szélesség és magasság – ezt a DW automatikusan kiolvassa a SWF-ből. Ha itt méretezzük át az animációt, az csak akkor lesz veszteségmentes, ha kizárólag vektorgrafikák szerepelnek benne. A File-mező mutatja a SWF elérését – ha ezt utólag megváltoztatjuk (kicseréljük a flashet), gondoljunk a szélesség és a magasság korrigálására (környíl). A Bg, azaz a háttérszín csak a transzparens (áttetsző területeket is tartalmazó) flashek esetében látható. Flash-integráció: Az Edit gomb elindítja az Adobe Flash szerzői rendszert, amelynek első kérdése az lesz, hogy hol található az ehhez a SWF-hez tartozó FLA forrásfile. Ha ezt egyszer megmondtuk neki, a forrásfile minden exportja (CTRL-Enter) felülírja a SWF-et. A Flash CSS-osztályhoz rendelését a Class legördülő intézi.

Ha a Loop jelölődoboz aktív, az animáció újra meg újra lejátszódik (ezt persze ActionScripttel felül lehet írni). Az Autoplay jelenti azt, hogy az animáció a lap betöltődésekor magától (felhasználói beavatkozás nélkül) induljon el. Csakúgy, mint a képeknél, a V és a H space adott pixel távolságra tolja a SWF-et környező elemeket. Ehelyett persze célszerűbb CSS-formázást alkalmazni (Class-legördülő). A Quality legördülővel felülbírálható a SWF hozott minőségbeállítása; az alacsonyabb értékek elvileg kevésbé terhelik a kliens processzorát. Az Align elvileg az elem igazítását végzi, valójában a Right (jobbra) értéken kívül semmire nem reagál. A Wmode-dal lehet a háttér nélküli (transzparens, Alpha csatornás) SWF-eket a HTML-háttér elé tenni. Például az elmúlt évek „kattancsait” a wmode="transparent" beállításának köszönhettük. A Play gombbal az animáció a DW felületén lejátszható (csakúgy mint Live üzemmódban). A Parameters-zel a SWF-nek további egyéni paraméterek adhatók. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Flashek futtatásához szükség van egy a háttérben futó JavaScriptes lejátszóra. A DW a weboldalon belüli első SWF beágyazásakor automatikusan elhelyez egy Scripts nevű mappát, benne ezzel az AC_RunActiveContent.js nevű állománnyal. Ne felejtsük el ezt is feltölteni a tárhelyre.

FLV (Flash Video) Az FLV (Flash Video) egy kimondottan webes videóformátum, mely jobb képminőség / fileméret – aránya miatt szinte kiszorította az világhálóról a korábban elterjedt MOV és MPEG-4 formátumokat. Videóinkat ebbe a formátumba az Adobe Media Encoderrel alakíthatjuk át. A Dreamweaver a videót úgy ágyazza be, hogy elhelyez a HTML mellett egy SWF formátumú lejátszót (skint) és egy JavaScriptet. Flash Videót az Insert menü / Media ill. az Insert paletta Media legördülőjével illeszthetünk be. 

Video type: a videó letöltődésének módja. A "Progressive Download" megengedi, hogy a felhasználó már akkor elkezdje nézni a videót, amikor az még nem töltődött le egészen, de nem csévélheti olyan későbbi részre, ami még nem töltődött le. A "Streaming Video" azt is megengedi, hogy kattintással a videónak egy még le sem töltött részére csévélhesse (ismerjük ezt a YouTube-ról), de ennek előfeltétele, hogy a szerveren fusson a Flash Media Server szoftver.



URL: itt lehet begépelni vagy kitallózni az FLV-t.



Skin: ebből a listából többféle lejátszó közül választhatunk, melyek kinézetükben és funkciópalettájukban eltérőek, ahogy azt az alatta lévő előnézet mutatja.



A Width és a Height paraméterrel beállíthatjuk, mekkora legyen a videó. Ha nem a tényleges méreteit adjuk be, akkor át fog méreteződni, ami nagyításkor minőségvesztéssel jár, kicsinyítésnél pedig sávszélesség-pazarlást jelent. Ezért ha tehetjük, már a videó FLV-be konvertálásakor állítsuk be a végső méretet, és itt kattintsunk a Detect size (méret megállapítása) gombra.



Auto play: a videó a lap betöltődésekor automatikusan le is játszódik.



Auto rewind: a lejátszás végeztével automatikusan a videó elejére viszi a lejátszófejet.

Ha nem lenne a kliens böngészőjében Flash Player, kap egy felszólítást, hogy töltse le. Ha szeretnénk, hogy ez magyarul legyen, írjuk át a forráskódban a Content on this page requires a newer version of Adobe Flash Player. üzenetet, pl erre: "A tartalom megtekintéséhez a Flash Player Pluginre vagy újabb verziójára van szükség. Letölti?"

De mivel lehet videóinkat ebbe az FLV-formátumba konvertálni? Ha a Creative Suite részeként vettük a DWt, akkor a következő konverter is feltelepült a rendszerünkbe.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Videokonvertálás az Adobe Media Encoderrel Indítsuk el a programot: Start / Minden program / Adobe Master Collection > Adobe Media Encoder. Itt a Queue (sor) konténer tartalmazza azokat a file-okat, amelyek konverzióra várnak. Duplakattintással vagy drag’n’droppal tudunk videofile-okat, pl. AVI-kat, MPEG4-eket vagy ha már van a gépen QuickTime-Player, MOV-okat hozzáadni. A sor elején álló legördülővel válasszuk ki az FLV-t (az újabb F4V formátum beágyazására a DW még nem képes). Az FLV-re kattintva megnyílik az Export Settings dialógus:

A bal oldalon a sárga sávval vagy a sárga timecoddal és a mellette álló  és  gombokkal beállíthatjuk, hogy a forrásvideónak mely részletét kívánjuk exportálni. Jobbra a Video és az Audio kartotékokon részletesen beállítható a tömörítés módszere és mértéke, ez azonban sok háttérismeretet igényel. A Preset legördülő opciói webre ill. mobil eszközökre kihegyezett beállítás-csomagok. Az első kettővel a forrásfile-lal azonos kiterjedésű, pixel-oldal-arányú és framerate-ű FLV exportálható – a legmagasabb ill. közepes minőségben. A többi opció felirata rendre a következőket mutatja: 

kiterjedés (sztenderd 16:9-es broadcast-formátumok)



pixel-oldal-arány (4:3 vagy 16:9 – tudnunk kell, milyen a forrás pixel-oldal-aránya)



framerate (képkocka / másodperc) – mindegyik opciónál marad az eredeti



minőség kbps-ban (minél magasabb, annál részletesebb lesz a kép, de annál nagyobb is lesz a filemérete, ergo a letöltési ideje)

Az Output Name mellett megadjuk az exportálandó FLV nevét és helyét, majd az OK-ra kattintva visszatérünk a Queue-hoz. Az előbbi lépéseket ismételve több file-t is sorba állíthatunk, vagy akár ugyanabból a file-ból többféle formátumú (FLV, F4V, H264, MP3) ill. minőségű videót ill. hangot generálhatunk. Ha megvan a sor, a Start Queue gombbal vagy az Enterrel indíthatjuk el a konverziókat – ezt általában éjszakai műszakra adjuk fel a számítógépnek.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Plug-In és ActiveX Mindkettő multimédia-tartalmak: hangok, videók és flash-animációk beágyazására szolgál. Ezekhez a böngészőknek többnyire bővítményre van szüksége.

MP3 hang

MP4 MOV WEBM

Plug-In (HTML)

ActiveX (HTML + XHTML)









videó

SWF animáció

A kód szintaxisa hasonló - Mi a különbség a kettő között? A Dreamweaver mindkettőt beilleszti akár HTMLakár XHTML-dokumentumokba, és mindegyik működik az összes böngészőben (már ha megvannak a megfelelő bővítmények). Valójában az tag csak a HTML-ben érvényes, míg az mind HTML-ben, mind XHTML-ben érvényes. MP3 esetén a lejátszó Windows-rendszereken a Media Player, iOS-rendszereken a QuickTimePlayer. A Chrome böngésző fel van szerelve egy saját hanglejátszóval. Ahhoz, hogy a lejátszó gombjait, időegyenesét, hangerőszabályzóját lássa a felhasználó, meg kell adnunk egy kb. 250 × 60-as méretet. A videó méretét ismerni kell, mert a width és a height attribútumokkal nem lehetséges az átméretezés. Ha megpróbálnánk lekicsinyíteni, a videónak csak egy részét látnánk és eltűnne az időegyenes a kezelőszervekkel. 

Az MP4-videókat lejátssza a Media Player és a QuickTime Player is. Itt meg kell jegyezni, hogy az Internet Explorer az MP4-et a böngészőablakon kívül, a standalone-playerben nyitja meg.



MOV-videók esetén a lejátszó csak a QuickTime Player lehet (ami iOS-rendszereken eleve megvan, de Windowsra fel kell telepíteni, és az átlag felhasználó nem telepít fel semmit egyetlen videó kedvéért).



A WEBM-formátumot egyelőre csak a Google Chrome támogatja.

A nevezett videoformátumok közül tehát az MP4 a legjobb, mert mindegyik vezető böngésző tudja kezelni, és mérete is igen kicsi. Minőség / méret-arány dolgában egyetlen konkurense az FLV, de az – a JavaScripten túl – a Flash Player pluginra is rászorul, és el kell helyeznünk a tárhelyen egy SWF formátumú lejátszót. SWF-animációk esetén a lejátszó mindig az Adobe Flash Player plugin, amit külön-külön kell az egyes böngészőkbe telepíteni. A fentebb ismertetett SWF-beillesztő gomb és a vele járó rengeteg kód előnye annyi, hogy ha a kliens böngészőjében nincs Fash plugin, felkínál egy download-linket.

©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Shockwave Régen Shockwave Playernek hívták a Flasht Playert. Ezzel a gombbal is SWF-animációkat lehet beágyazni, és talán ezzel a legbölcsebb, mert nincs szüksége külső JavaScriptre, mint amilyen az Insert menü SWFparancsa, de ha nincs meg a plugin a kliens böngészőjében, felkínálja a letöltését.

Applet Java Appletet, azaz Java programnyelven írt kliensoldali alkalmazást illeszt be. Ennek futtatásához a Java Virtual Machine-re van szükség. Példa: hatósági portálok elektronikus adóbevalláshoz.

3.7. Táblázatok Táblázatok beillesztéséhez válasszuk az Insert / Table parancsot vagy az Insert paletta Common csoportjának 5. gombját. 

Rows:

sorok száma



Columns:

oszlopok száma



Table width:

szélesség pixelben vagy százalékban



Border thickness:

keret vastagsága pixelben



Cell padding:

cellákon belüli, a cellakeret és a szöveg közötti távolság [px]



Cell spacing:

cellák közötti távolság [px]



Header:

fejléc (a fejléc-cellák tartalma vastagon és középre zárva jelenik meg)



Caption:

cimke szövege



Summary:

összegzés; amit ide írunk, a böngészőben nem jelenik meg, de érdemes kitöltenünk, mert a keresőmotorok figyelembe veszik

A táblázat szélessége megadható százalékban is. Ez a mindenkori böngészőablak szélességéhez képesti arány. Az ilyen táblázat rugalmas lesz; ha kevesebb hely áll rendelkezésre, összébb húzza magát. A további megmunkálás céljából a táblázatot úgy jelölhetjük ki, hogy valamelyik széléhez közelítjük az egérmutatót – amikor táblázatos nyíllá változik, megkattintjuk. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

A táblázat alatt vagy felett zöld számok jelzik a táblázat és az oszlopok szélességét. Ahol nincs szám, ott nem lett megadva érték, a kialakuló szélességet más tényezők befolyásolják. Százalékos táblázatoknál megjelenik a %-os érték és zárójelben az aktuálisan renderelt szélesség pixelben – ez a DW kezelőfelületén rendelkezésre álló szélességtől függ (ellenőrzésül az F4-gyel megtekinthetjük teljes szélességében). A belső keretekre történő kattintás-húzással grafikus módon is szerkeszthetjük a sorok, oszlopok szélességét ill. magasságát. A DW táblázatkezelése sokban hasonlít a népszerű Word szövegszerkesztőéhez. Ha pl. új sorokat vagy oszlopokat kívánunk beszúrni, a kontextus menüből (jobb katt) előhívható a Table / Insert Rows or Columns párbeszédablak: Jelöljük ki a táblázatot és formázzuk meg a Tulajdonság palettával. Itt is hozzáadhatunk újabb sorokat és oszlopokat (Rows ill. Cols) és mindent megtalálunk, amit a létrehozó dialógusban: szélesség (W), cellaköz (CellPad), cellamargó (CellSpace), keretvastagság (Border). Az Align a táblázat egészének igazítása. A Class mint mindenütt, itt is a létező osztályokhoz való hozzárendelés. Az elválasztó vonal alatti ikonok funkciója rendre: oszlopszélességek törlése, szélességek átváltása pixelértékre (az aktuális szélesség véglegesedik), ennek ellentettje: szélességek átváltása százalékosra, sormagasságok törlése.

A táblázat bal oldalán meg fogjuk találni azt a keskeny sávot, ahol a mutató jobbra nyíllá változik: ilyenkor kattintásra kijelölhetjük a sort. A tetején hasonló módon az oszlopok jelölhetők ki. Az egyes cellák is kijelölhetők, ha egyszerűen belekattintunk, de több cella is kijelölhető a CTRL nyomvatartásával, vagy – ha tömböt alkotnak – kattintás-húzással. A Properties sorok, oszlopok, cellák esetében ugyanazt mutatja:

A felső rész mind HTML- mind CSS-üzemmódban azonos a szimpla szövegtulajdonságokkal. Az alsó részben a bal oldalon látható, hogy épp mi van kijelölve (a fenti ábrán: egy oszlop). A Horz a tartalmak vízszintes igazítása, a Vert a függőleges. Utóbbi akkor válik érdekessé, ha egy táblázatsorban eltérő magasságú tartalom van a cellákban, pl. egy egysoros meg egy ötsoros. Az alapértelmezés (Default) a középre zárás, de előfordul, hogy felülre kell zárnunk a tartalmakat. A W és a H azzal a lehetőséggel kecsegtet, hogy mindennek meg tudjuk adni a szélességét és a magasságát. Persze nem lehet minden cellának egyéni mérete, mert azt már nem táblázatnak hívnák. A szélességek pixelben és %-ban, a magasságok csak pixelben adhatók meg. Ha többet írunk egy cellába, mint amennyit ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

be tudna fogadni, a szélessége megnő valamelyik, nem telített oszlop kárára, a sortörések lefelé megnyújtják a táblázatot. Ha két cella egy soron belül eltérő magasságot kap, akkor az egész sor magasságát a legmagasabb cella fogja eldönteni. Ugyanígy az egy oszlopba tartozó cellák közül a legszélesebb fogja eldönteni az oszlop szélességét. Azoknál a celláknál, amelyek más cellák szélesítése miatt keskenyebbek lesznek, a No wrap jelölődobozzal elejét vehetjük a tartalom több sorba törésének. A Header jelölődoboz a kijelölés celláit , azaz fejléccellákká alakítja. A Bg melletti Color Picker a kijelölt tartalomnak háttérszínt ad – mint mindenütt, a gyermekelem háttérszíne felülírja a szülőelemét. A táblázat végső szélességeinek, magasságainak kialakítása tehát bonyolult téma, mert függ a) a tartalomtól, b) a táblázatnak, az oszlopoknak, a soroknak és a celláknak adott méretektől, c) de ha %-ban adtunk meg szélességeket, akkor a kijelző felbontásától is; ezért némi kísérletezést igényel. Erre jó ürügyet adhat egy táblázatos weboldal – azonban ne felejtsük el, hogy a