CSS Layout Outlines: keskeny sárga és fekete szaggatott vonalakkal ábrázolja a konténerek határait
-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 <title>-ben van, bármilyen karaktert tartalmazhat.<br />
<br />
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.<br />
<br />
2.6. A Site-kezelő ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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.<br />
<br />
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: <br />
<br />
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.<br />
<br />
<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
<br />
<br />
Page from Template: Az egyes site-okhoz rendelt sablonokból lehet létrehozni dokumentumokat.<br />
<br />
<br />
<br />
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<br />
<br />
Valamennyi lapon megtalálható a DocType legördülő, amellyel a létrehozandó dokumentum típusa (pl. a HTML verziója) adható meg.<br />
<br />
Kérjünk most egy üres XHTML 1.0 Transitionalt és kattintsuk meg a Create gombot.<br />
<br />
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.<br />
<br />
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:<br />
<br />
XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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.<br />
<br />
XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
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.<br />
<br />
XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br />
<br />
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.<br />
<br />
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.<br />
<br />
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 <body> teljes tartalma rózsaszínben tündököl, akkor biztos, hogy a <head>-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 <meta> 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.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Nemcsak a tageket és attribútumokat ismeri, hanem az attribútumokhoz tartozó összes értéket is:<br />
<br />
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.<br />
<br />
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: <br />
<br />
a kattintás-húzás<br />
<br />
<br />
<br />
a duplakattintás vagy a CTRL-SHIFT-nyílbillentyű jobbra/balra (szó kijelölése)<br />
<br />
<br />
<br />
a háromszoros kattintás vagy a CTRL-SHIFT-nyílbillentyű fel/le (bekezdés kijelölése)<br />
<br />
<br />
<br />
a bal oldali sorszámozott sávra kattintva is sorokat jelölhetünk ki<br />
<br />
<br />
<br />
kattintás, majd SHIFT-kattintás a kijelölendő szöveg elején ill. végén<br />
<br />
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).<br />
<br />
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.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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 <p> vagy <h1> - <h6> 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.<br />
<br />
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ó <strong> tagpár közé kerül, azaz szemantikai kijelölést kap:<br />
<br />
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<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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.<br />
<br />
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.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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.<br />
<br />
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:<br />
<br />
<br />
<br />
Az előnézet mellett látjuk, hogy egy 122 k súlyú képről van szó.<br />
<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
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).<br />
<br />
<br />
<br />
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ő.<br />
<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
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…).<br />
<br />
<br />
<br />
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é.<br />
<br />
<br />
<br />
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<br />
<br />
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.<br />
<br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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.<br />
<br />
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): <br />
<br />
Name:<br />
<br />
ideiglenes név<br />
<br />
<br />
<br />
Width:<br />
<br />
várható szélesség<br />
<br />
<br />
<br />
Height:<br />
<br />
várható magasság<br />
<br />
<br />
<br />
Color:<br />
<br />
ideiglenes kitöltésszín<br />
<br />
<br />
<br />
Alternate Text: alternatív szöveg<br />
<br />
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<br />
<br />
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): <br />
<br />
Image name:<br />
<br />
nevet adhatunk a képnek<br />
<br />
<br />
<br />
Original image:<br />
<br />
az eredeti kép<br />
<br />
<br />
<br />
Rollover image:<br />
<br />
a váltókép<br />
<br />
<br />
<br />
Preload rollover image-et:<br />
<br />
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.<br />
<br />
<br />
<br />
Alternate text:<br />
<br />
alternatív szöveg<br />
<br />
<br />
<br />
When klicked, Go to URL:<br />
<br />
itt tehetjük a képet hivatkozássá<br />
<br />
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 <div> 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).<br />
<br />
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.<br />
<br />
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.<br />
<br />
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).<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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ó.<br />
<br />
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:<br />
<br />
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.<br />
<br />
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<br />
<br />
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.<br />
<br />
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. <br />
<br />
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.<br />
<br />
<br />
<br />
URL: itt lehet begépelni vagy kitallózni az FLV-t.<br />
<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
Auto play: a videó a lap betöltődésekor automatikusan le is játszódik.<br />
<br />
<br />
<br />
Auto rewind: a lejátszás végeztével automatikusan a videó elejére viszi a lejátszófejet.<br />
<br />
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 <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> üzenetet, pl erre: "<h4>A tartalom megtekintéséhez a Flash Player Pluginre vagy újabb verziójára van szükség. Letölti?</h4>"<br />
<br />
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.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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:<br />
<br />
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: <br />
<br />
kiterjedés (sztenderd 16:9-es broadcast-formátumok)<br />
<br />
<br />
<br />
pixel-oldal-arány (4:3 vagy 16:9 – tudnunk kell, milyen a forrás pixel-oldal-aránya)<br />
<br />
<br />
<br />
framerate (képkocka / másodperc) – mindegyik opciónál marad az eredeti<br />
<br />
<br />
<br />
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)<br />
<br />
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.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Plug-In <embed> és ActiveX <object> 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.<br />
<br />
MP3 hang<br />
<br />
MP4 MOV WEBM<br />
<br />
Plug-In <embed> (HTML)<br />
<br />
ActiveX <object> (HTML + XHTML)<br />
<br />
<embed src="media/ouch.mp3" width="250" height="60"><br />
<br />
<object data="media/ouch.mp3" width="250" height="60"></object><br />
<br />
<embed src="media/islands.mp4" width="480" height="400"><br />
<br />
<object data="media/islands.mp4" width="480" height="400"></object><br />
<br />
<embed src="media/ani.swf" width="470" height="170"><br />
<br />
<object data="media/ani.swf" width="470" height="170"></object><br />
<br />
videó<br />
<br />
SWF animáció<br />
<br />
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 <embed> tag csak a HTML-ben érvényes, míg az <object></object> 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. <br />
<br />
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.<br />
<br />
<br />
<br />
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).<br />
<br />
<br />
<br />
A WEBM-formátumot egyelőre csak a Google Chrome támogatja.<br />
<br />
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.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
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.<br />
<br />
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.<br />
<br />
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. <br />
<br />
Rows:<br />
<br />
sorok száma<br />
<br />
<br />
<br />
Columns:<br />
<br />
oszlopok száma<br />
<br />
<br />
<br />
Table width:<br />
<br />
szélesség pixelben vagy százalékban<br />
<br />
<br />
<br />
Border thickness:<br />
<br />
keret vastagsága pixelben<br />
<br />
<br />
<br />
Cell padding:<br />
<br />
cellákon belüli, a cellakeret és a szöveg közötti távolság [px]<br />
<br />
<br />
<br />
Cell spacing:<br />
<br />
cellák közötti távolság [px]<br />
<br />
<br />
<br />
Header:<br />
<br />
fejléc (a fejléc-cellák tartalma vastagon és középre zárva jelenik meg)<br />
<br />
<br />
<br />
Caption:<br />
<br />
cimke szövege<br />
<br />
<br />
<br />
Summary:<br />
<br />
összegzés; amit ide írunk, a böngészőben nem jelenik meg, de érdemes kitöltenünk, mert a keresőmotorok figyelembe veszik<br />
<br />
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<br />
<br />
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.<br />
<br />
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:<br />
<br />
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<br />
<br />
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 <th>, 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 <table> taget adattáblázatok megjelenítésére találták ki. Ahogy tudásunk gyarapodik, a táblázat egészét, a cellákat és a fejléccellákat egyre inkább CSS-utasításokkal fogjuk formázni. Ehhez kijelöljük az elemet és megkattintjuk a New CSS Rule gombot a CSS Styles palettán. Kiválasztjuk, hogy új osztályt hozunk –e létre, vagy valamennyi ilyen HTML-taget egyformán formázzuk, és megadjuk a CSS-kód helyét. Az ezután következő Rule definition párbeszédablak átfogó formázást nyújt az azonnali tesztelés lehetőségével (Apply = Alkalmaz):<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
3.8. Táblázatok importálása Windows alatt a Dremweaverbe Excel- és Word-dokumentumokat is lehet importálni, MacOS alatt csak CSV-formátumban lehet. Kattintsunk dokumentumunkban arra a helyre, ahova a táblázatot beágyazzuk. File / Import / Excel Document. Tallózzuk ki az XLS file-t. A program szabványos (X)HTML-tageket generál. Ennek az importálásnak hátránya, hogy az üres soroknak kezdetben nincs kiterjedése. A másik lehetőség a CSV (Comma Separated Values = vesszővel elválasztott értékek) formátumba való export ill. import. File / Import / Tabular Data… Beállíthatjuk, milyen írásjel választja el az értékeket, a szélességet, a cellamargót, a cellaközt, a keretet, és hogy milyen stílussal jelenjen meg a vízszintes fejléc.<br />
<br />
A táblázatkezelő programban alkalmazott formázások (betűtípus, -méret, stílus, -szín, stb.) mindkét esetben elvesznek. A táblázatkezelő programok hasznos funkciója a rendezés. A Commands / Sort Table párbeszédablakban megadhatjuk, hányadik oszlop értékeit vegye a rendezés alapjául, és hogy az ábécés ill. sorszám alapú rendezés növekvő vagy csökkenő sorrendű legyen. A Then by: legördülőivel még egy másodlagos rendezés is megadható – ezzel pl. valamennyi A betűs rekordot csökkenő számsorrendbe lehet rendezni.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
3.9. Űrlapok (Forms) Az Insert paletta / Forms csoportja hordozza az összes űrlapelemet:<br />
<br />
Minden űrlapot a <form> taggel kell kezdeni. Pontosan ezt illeszti be az első gomb. Az űrlap konfigurációja a Tulajdonság palettával történik:<br />
<br />
Az Action mezőbe kerül az űrlapadatokat feldolgozó PHP vagy más szkript elérése (ez továbbítja a cókmókot e-mailben vagy táplálja adatbázisba), a Target annyiban érdekes, hogy a szkript által generált köszönetnyilvánító lap új tabben nyitható meg. A Method az a metódus, ahogyan az id-érték párok továbbításra kerülnek. A GET metódusnál az URL-be kerülnek (így a böngészőnk jegyzőkönyvén túl ki tudja, miféle naplókba is). A POST esetén a név-érték párok rejtve maradnak, ezért ez biztonságosabb. A GET metódust ma gyakorlatilag csak kereséseknél használják (pl. a Google Search is így továbbítja keresőkifejezéseinket), a POST-ot használják minden egyéb (gyakran szenzibilis) információ továbbítására. A Form ID-ben legkésőbb a többi mező kitöltése után generálódik egy űrlapazonosító – ezt át is nevezhetjük. Ezen a ponton be lehet illeszteni egy kétoszlopos táblázatot, melynek bal oszlopába kerülnek a kérdések, jobb oszlopába a kitöltendő mezők. Figyelem, szarvashiba! – Attól, hogy az eredményt úgy fogalmaznánk meg, hogy „az űrlap táblázatban van”, technikailag a <form> tag kell, hogy magába foglalja a <table> taget egész pereputtyával. Ellenkező esetben a <form> hatásköre csak a táblázat első cellájára fog korlátozódni. Az Insert paletta többi gombja kattintásra párbeszédablakot hív fel. Az ID az űrlapelem egyértelmű azonosítója, ez nem maradhat el. Kerüljük az ékezetes és különleges írásjeleket, szóközöket. Lehet neki adni egy Labelt, ez a cimkéje, amit a felhasználó lát is, és a Position rádiógombokkal ki lehet választani, hogy a cimke a mező elé vagy mögé kerüljön. A legjobb azonban az, ha táblázatunk bal oszlopában egymás alatt sorakoznak a kérdések, így cimkékre nem lesz szükség. Az Access key-jel magunk definiálhatnánk gyorsbillentyűket – a mellékelt példa → azt eredményezné, hogy ha a felhasználó megnyomja az ALT-A billentyűkombinációt, a fókusz erre az űrlapelemre tevődik. Az accesskey="A" attribútum elavult eszköze az űrlaphasználatnak, mert a világhálón nem lehet minden weboldalnak egyéni a kezelése.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A Tab Index-szel át lehet rendezni a tabulátorral való léptetés sorrendjét; ez csak annyiban lehet hasznos, hogy ha a lapon már van egy csomó link, azokon ne kelljen a látogatónak végigmennie, hanem rögtön az első űrlapelemen teremjen a kurzor.<br />
<br />
3.10. Űrlapelemek Szövegbeviteli mező (Textfield) Beviteli mező; felhasználási esetei pl. név, lakcím bekérése. Beillesztése és kijelölése után a Properties palettán a következőt látjuk:<br />
<br />
<br />
<br />
Char width:<br />
<br />
a mező megjelenésének szélessége [karakter] – ezt érdemesebb CSS-sel intézni<br />
<br />
<br />
<br />
Max chars:<br />
<br />
a bevihető karakterek számának korlátozása<br />
<br />
<br />
<br />
Type:<br />
<br />
egysoros (Single line) / többsoros (Multi line) / jelszóbekérő (Password) (utóbbi egyszerűen elrejti a karaktereket; jelszót validálni HTML-lel nem lehet)<br />
<br />
<br />
<br />
Init val:<br />
<br />
az ide beírt érték jelenik meg alapértelmezetten a beviteli mezőben (erre alkalmasabb a Spry Validation Text Field, mert ott kattintásra el is tűnik)<br />
<br />
<br />
<br />
Class:<br />
<br />
CSS-osztályt lehet alkalmazni erre az űrlapelemre<br />
<br />
<br />
<br />
Disabled:<br />
<br />
nem lehet addig beleírni, amíg egy űrlapelemet felette ki nem töltöttek<br />
<br />
<br />
<br />
Read-only:<br />
<br />
a felhasználó nem vihet be értéket (csak mi az Init value-val)<br />
<br />
Rejtett mező (Hidden field) Rejtett beviteli mező, melyet a felhasználó nem lát a weblapon, de programozási szempontból fontos információkat rejthetünk el benne. Tipikus felhasználási esete: az e-mail tárgyának (subject mezőjének) elhelyezése. A tárgy lehet azért eleve tisztázott, mert a felhasználó nem véletlenül landolt ezen a lapon (más lapokon más űrlapok lehetnek más tárggyal).<br />
<br />
Szövegdoboz (Textarea) Többsoros beviteli mező; ugyanaz, mint az egyszerű textfield Multi line-nal. Opciói a Textfieldével azonosak. Tipikus felhasználási esete: Üzenet mező.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Jelölődoboz (Checkbox) Jelölődoboz, melynek két állapota van: a bejelölt és a nem-bejelölt, azaz igen vagy nem. Ha nem foglalkozunk vele, akkor is leadjuk voksunkat. Az opciók között ki lehet választani, hogy a lap betöltődésekor be legyen –e pipálva. Tipikus felhasználási esete: hírlevélre kérdezés, feltételek elfogadása.<br />
<br />
A Checkbox Grouppal mindjárt egy rahedli jelölődobozt legyárthatunk, pl. abban az esetben, ha végigkérdezzük a látogatót, mely hírlevelünket szeretné megrendelni.<br />
<br />
Rádiógomb (RadioButton) Rádiógomb, jelölő karika, melyet akkor használunk, ha több lehetőség közül egynek a kiválasztását akarjuk engedélyezni. Mivel ez mindig többedmagával szerepel, érdemes egyből csoporttal (a RadioGrouppal) kezdeni. A Label a címke, ami megjelenik a látogató felé, a Value a továbbított érték. Tipikus felhasználási esete: felhasználó nemének bekérése.<br />
<br />
Példa: Hogyan szólíthatjuk?<br />
<br />
Úr Hölgy<br />
<br />
A RadioGroup-hoz később még hozzárendelhetünk további rádiógombokat, de figyeljünk arra, hogy csak az azonos name attribútumú rádiógombok számítanak egy csoportnak (ezek deaktiválják egymást). A Propertiesen meg lehet adni, hogy az egyes rádiógombok be legyenek –e jelölve (Checke / Unchecked).<br />
<br />
Felsorolás (Menu / List) Legördülő menü, vagy lista, melyet akkor használunk, ha fel akarunk sorolni több választási lehetőséget. Tipikus felhasználási esete: felhasználó országának bekérése, vagy hogy milyen ügyben érdeklődik. Opciói a Propertiesen a List values… gombbal érhetők el. Ha engedélyezni akarjuk, hogy akár több lehetőséget is kiválaszthasson a látogató, akkor a Tulajdonság palettával listává kell alakítanunk (List jelölődoboz), Height (magasság) mező. A lista abban tér el a menütől, hogy meghatározott számú eleme látható, és ha úgy akarjuk, több is kiválasztható CTRL- vagy SHIFT©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
kattintással (Allow multiple jelölődoboz). Az, hogy a lap betöltődésekor melyik opció látszódjon (hátha akkor a látogatók nagyobb része hagyja úgy), az az Initially selected listától függ:<br />
<br />
Ugrómenü (Jump Menu) Nagyon hasonló a Menu/List elemhez, de itt egy kis párbeszédablakban URL-eket rendelhetünk a listaelemekhez. Szigorú értelemben ez nem is űrlapelem, hanem egyfajta navigáció, hiszen bármelyik „opció” választásával felhívunk egy URL-t, azaz az űrlapot elküldés nélkül ott hagyjuk. Tulajdonság-palettája közel azonos a Menu/Listével.<br />
<br />
Feltöltés (File Field) Ezzel az űrlapelemmel lehetőséget adunk a látogatónak, hogy kitallózzon a számítógépéről egy file-t, amelyet elküld nekünk. Tipikus felhasználási esete: fénykép vagy életrajz feltöltésének lehetősége. Ha beillesztünk egy ilyet, a <form> tag kibővül az enctype="multipart/form-data" attribútummal.<br />
<br />
További űrlapelemek <br />
<br />
Image Field: képet illeszt be, melyet elküldő gombként használhatunk.<br />
<br />
<br />
<br />
Button: gombot illeszt be. A gomb kétféle funkcióval ruházható fel (ld. Properties): vagy elküldi az űrlapot a megadott címre (Send), vagy pedig visszaállítja az űrlapot (Reset), tehát törli minden elem tartalmát, amivel egyazon <form>-ban vannak. A Send helyettesíthető az Image Fieldben megadott képpel is.<br />
<br />
<br />
<br />
Label: csak egy cimkét illeszt be, ha utólag valamelyik űrlapelem feliratozásra szorul.<br />
<br />
<br />
<br />
Fieldset: űrlapok tagolására szolgáló elem; az elemeket vonallal határolja körbe, melynek a <legend> ad cimkét.<br />
<br />
3.11. Érvényesített (validált) űrlapelemek A DW Spry nevű keretrendszere felhasználóbarát párbeszédek segítségével JavaScripteket illeszt be. Egyik alkalmazása az űrlapelemek érvényesítése (validálása), azaz a kitöltöttségük vagy a begépelt értékek formátumának ellenőrzése; pl. Szerződési Feltételek elfogadtatása, érvényes e-mail cím megadatása. Ha bármilyen Spryt illesztünk be, a DW elhelyez a dokumentum mellett egy SpryAssets nevű mappát – ebbe pakol minden szükséges file-t, többnyire JavaScripteket. Mi a HTML elhagyása nélkül hozhatunk döntéseket a Properties-zel, a DW a kódolást a háttérben elvégzi.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Érvényesített szövegmező (Spry Validation Textfield) Minden Spry űrlapelem magvában ugyanazok a régi HTML-elemek vannak: szövegmező, szövegdoboz, jelölődoboz, rádiógomb vagy felsorolás. Ezek tulajdonságaihoz úgy férünk hozzá, ha a mező közepébe kattintunk:<br />
<br />
A türkíz felületre kattintva azonban a Properties megváltozik:<br />
<br />
A Type legördülővel dönthető el, hogy milyen adat formai követelményei szerint történjék az ellenőrzés: egész szám, e-mail cím, dátum, idő, hitelkártyaszám, irányítószám, telefonszám, egészségbiztosítási szám, pénzérték, valós szám, IP-cím, URL. Válasszuk ki példaképpen az e-mail címet – az mindig kell. A Preview states (státusz előnézet) legördülő egy nézetválasztó, ami az űrlapelem négyféle állapota között váltogat: <br />
<br />
Initial:<br />
<br />
alapállapot<br />
<br />
<br />
<br />
Required:<br />
<br />
az az állapot, amikor az űrlap panaszkodik, hogy a mezőt nem töltötték ki<br />
<br />
<br />
<br />
Invalid Format: az az állapot, amikor az űrlap panaszkodik, hogy nem megfelelő a bevitt adat<br />
<br />
<br />
<br />
Valid:<br />
<br />
a helyes adatot visszajelző állapot<br />
<br />
Ha az alsó Required jelölődobozt kikattintjuk, nem lesz kötelező az email megadása, de ha valaki megadja, akkor viszont muszáj lesz helyesen megadnia. A Validate on (érvényesíteni amikor…) jelölődobozaival lehet megadni, hogy mikor nézzen utána az adat érvényességének: Blur (az űrlapelem elhagyásakor; más mezőbe kattintás vagy léptetés tabulátorral), Change (minden egyes változtatáskor, tehát gépelés közben), Submit (a küldés gomb megkattintásakor). Az alsó mezőkben megadhatjuk a minimálisan vagy maximálisan bevihető karakterek számát, a Hint mezőben megadhatunk egy tippet (utóbbinak az e-mail címnél nincs jelentősége). ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Fontos még az is, hogy a visszajezéseket a weblap nyelvére írjuk át. Ha kiválasztottuk pl. a Required státuszt, át kell írnunk az „A value is required.” üzenetet. Ezt elvégezhetjük a HTML-kódban is; ha mégis a Design nézetben írjuk át, ügyelnünk kell arra, hogy a befoglaló taget ne semmisítsük meg. Ezért pl. meghagyhatjuk a pontot, és csak a szavakat írjuk felül, pl. a „Kérem, adja meg e-mail címét” feliratra:<br />
<br />
Hasonlóan az Invalid Format státusz feliratát is át kell írnunk. Őrizkedjünk az olyan megfogalmazásoktól, mint hogy „Érvénytelen formátum”. Így csak a Mikrobi beszél. A programozók és az emberek békés egymás mellett élése érdekében sokkal előnyösebbek az olyan kérdések mint pl. „Biztos így írják?” Az olyan – nemzetközileg nem egységes formátumú – adatoknál, mint a dátum vagy az idő, a Format legördülővel kiválaszthatjuk a megfelelőt. Az irányítószám, telefonszám, egészségbiztosítási szám és a pénzérték esetében is vannak ilyen előre definiált formátumok, de a Custom Patternnel (egyéni minta) magunk is meghatározhatjuk a megkövetelet formátumot. A formátum a Pattern mezőbe kerül, a tipp pedig, amit felhasználónknak adunk, a Hint mezőbe. Utóbbi kattintásra eltűnik.<br />
<br />
Érvényesített szövegdoboz (Spry Validation Textarea) A kitöltöttségét és a minimális és / vagy maximális szöveghosszot ellenőrző szövegdoboz. A Counter rádiógombjai számlálót jelenítenek meg: ez minden leütéskor vagy előre számol (Chars Count), vagy visszafelé, hogy mennyi írható még be. A maximális leütésszám spam-védelmi eszköz; akadnak olyan robotok, amelyek értelmetlen szövegeikkel túlterhelik a világháló adatbázisait. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Érvényesített jelölődoboz (Spry Validation Checkbox) Kötelezően aktiválandó jelölődoboz. Ezzel erőltetnek a felhasználóra hírleveleket vagy mindenféle üzleti feltételt. Az Enforce range (multiple) jelölővel kikényszeríthető, hogy az űrlapban szereplő Spry jelölődobozokból legalább ill. legfeljebb hányat kelljen bejelölni.<br />
<br />
Érvényesített felsorolás (Spry Validation Select) Invalid value mezőjében megadható az az opció, amelyet hiába választ ki a felhasználó (ilyenek szoktak lenni a regisztrációs ívek felsorolásainak ***Kérjük, válassza ki országa nevét*** „értékei”).<br />
<br />
Érvényesített jelszóbekérő (Spry Validation Password) Haladó téma. Ez a mező nem a jelszót ellenőrizni! A jelszót kliensoldali szkriptben megadni nem lenne biztonságos. Arról van itt szó, hogy az olyan (általában regisztrációs) űrlapokon, amelyeken a felhasználó jelszót választhat magának, formai kritériumokat támasztunk a választható jelszóval szemben, azaz, hogy betű (Min / Max letters), szám (Min / Max numbers), legalább ill. legfeljebb hány<br />
<br />
szerepeljen a jelszóban. nagybetű (Min / Max uppercase), ill. különleges írásjel (Min / Max special chars)<br />
<br />
Jelszóismételtető (Spry Validation Confirm) Csak az előbbi mezővel együtt alkalmazható. Mindkettőnél érdemes a Validate on Change értéket beállítani – így a felhasználó azonnal látja, mikor sikerült kellően bonyolult jelszót választani. Ha ezzel megvolt, kitölti a jelszóismételtetőt, ami addig nem hagyja élni, míg a két bevitt érték meg nem egyezik.<br />
<br />
Érvényesített rádiógombok (Spry Validation Radio Group) Amikor beillesztjük a widgetet, először is fel kell vennünk a név-érték párokat. Aktivált Required doboz mellett a felhasználónak muszáj lesz bejelölnie valamit. Az az érték (tehát amit az érték-oszlopban adtunk meg), amit az Empty Valueban megadunk, ugyanazt a hatást váltja ki, mint ha a látogató semmit nem tötött volna ki („Kérem, válasszon!”). Az Invalid Valueként megadott értéket pedig nem fogja elfogadni („Kérem, érvényes értéket válasszon!”). Hogy ez mire jó, arról az Adobenél lehet érdeklődni.<br />
<br />
3.12. Űrlapok formázása és tesztje Bármelyik űrlapelemet is jelöljük ki, a CTRL-T billentyűkombival megjelenik a (szerkeszthető) kódja. Ha már ügyesek vagyunk CSS-ben, az űrlapokat <table> nélkül is alaposan megformázhatjuk. A kérdéseket <lable> tagekbe is tehetjük, ezeket pedig hozzárendeljük egy osztályhoz. Az osztálynak adunk egy szélességet, display tulajdonságát blockra és float tulajdonságát leftre állítjuk. A szövegmezőknek és –dobozoknak szélességet adunk, és tetszés szerint további tulajdonságokat. Ezeknek a :focus látszólagos kiválasztóval módosíthatjuk azt az állapotát, amikor a látogató éppen használja őket. A ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
validált űrlapelemek színezése eleve megoldott a SpryAssets mappában elhelyezett CSS-ekben – a színek átszerkesztéséhez használhatjuk a CSS Styles paletta szelektorait. A gombokat is alaposan kicsíphetjük minden, általában menüpontokra alkalmazott trükkel. A letisztult külső fontos eleme egy igazán szexi küldésgomb, ami mérhetően befolyásolja a beérkező regisztrációk, ajánlatkérések, stb. mennyiségét. Fontos, hogy az űrlap ne legyen túlszabályozott. Ha minden egyes kiválasztható értéket magunk definiálunk, akkor legyen legalább egy szövegdoboz („Egyéb tudnivalók”, „Üzenet”), amelyben a látogató kiegészítéseket tehet. Bosszantó például, amikor az ember egy állásra jelentkezéskor nem tudja kiválasztani az előre definiált listából a titulusát (pl. Dr. rer. nat. habil.) – de a világ összes ilyen fokozatát bajos volna felsorolni. Az ergonómiai tesztelés során rá kell kérdeznünk: ha mi mezei végfelhasználók lennénk, azonnal megértenénk -e, miről szól a kérdés vagy adott esetben a visszajelzés. Ki kell próbálni a felhasználó által elkövethető összes „hibát”, és a folyamatot végig kell ellenőrizni az adatok megérkezéséig (ha e-mailbe továbbítjuk őket), ill. adatbázisban történő feldolgozásukig. Az űrlaposdi bonyolult téma, és sok tesztelést igényel. Ha túl sokat kérdezünk, gyanakvást kelthetünk a látogatóban (adathalászat). Ha túl sokat vagy rosszul kérdezünk, vagy a visszajelzések nem egyértelműek, elpazarolhatjuk a rendelkezésünkre álló türelmét. Már a tervezéskor meg kell találnunk a legjobb kompromisszumot a felhasználó szimpátiája és az értékes adatállomány között.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
4. CSS-szerkesztés 4.1. CSS-szerkesztés automatikus kódsegítséggel Hozzunk létre egy CSS-dokumentumot a New Document párbeszédablakban és gépeljük be: .idezet { Amint leütjük az Entert, felugrik a Dreamweaver script-segítsége: Ha egy ilyen lista megjelenik, akkor amint leütünk egy betűt, az utasítások listáján közelebb kerülünk a megfelelőhöz, ezt követően a ↑ és ↓ nyílbillentyűkkel választhatjuk ki, majd Entert ütünk.<br />
<br />
A program ismeri az összes attribútumot, és azok összes értéket is, ezért ha elfogadtuk a colort, értelemszerűen már nyílik is a színválasztó (Color Picker): Válasszunk színt, akár egérkattintással, akár a nyílbillentyűkkel+ Enterrel és zárjuk le a color deklarációt egy pontosvesszővel.<br />
<br />
Adjunk neki még két tulajdonság-érték párt (pl. igazítás és betűköz). Végül zárjuk a deklarációs szakaszt egy kapcsos zárójellel: .idezet {<br />
<br />
szelektor {<br />
<br />
color: #3300CC;<br />
<br />
tulajdonság: érték;<br />
<br />
text-align: justify;<br />
<br />
tulajdonság: érték;<br />
<br />
letter-spacing: 1px; }<br />
<br />
tulajdonság: érték mértékegység; }<br />
<br />
Mentsük el a file-t style.css néven. Mentsük el a HTML-dokumentumot styled.html néven. A stíluslappal való összekötést a head szekcióban lévő <link> tag végzi. A DW kódsegítsége itt is ugrásra kész:<br />
<br />
Vegyük rá, hogy a következőkkel egészítse ki: ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<link rel="stylesheet" type="text/css" href="style.css" /><br />
<br />
A végén elég csak egy záró kacsacsőrt ütni, hogy lezárja a taget. Ebből a böngészők tudni fogják, hogy létezik egy style.css file, amit figyelembe kell venniük a lap formázásakor. Rendeljük az osztályhoz az egyik bekezdést a class="idezet" attribútummal, és frissítsük az előnézetet az F5-tel vagy nézzük meg a böngészőben is F12-vel. Ha mindent jól csináltunk, a bekezdés szövege lila színű lesz.<br />
<br />
4.2. CSS-szerkesztés a tulajdonságpalettával Ha egy alakuló HTML-lapon megkattintunk egy elemet, a tulajdonság-paletta Targeted Rule (’megcélzott szabály’) legördülőjével lehet kiválasztani, hogy a már meglévő CSS-deklarációk közül melyikbe kerüljön az új szabály. A felső részben van listázva az összes olyan szelektor, amitől ez az elem bármit is örökölhetett. Az Apply Class alatti listán a kijelölt tag bármelyik osztályhoz is hozzárendelhető.<br />
<br />
A példa kedvéért jelöljünk ki egy linket, és válasszuk ki célszabályként az a taget. Kattintsuk meg az Edit Rule gombot, erre megnyílik a CSS Rule Definition ablak. Ebben felhasználóbarát módon megadhatók a legfontosabb CSS-tulajdonságok. A kód a célszabályba íródik, jelen példában az a {} szelektorba, akkor is, ha az egy külső CSS-ben található.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<br />
<br />
Type:<br />
<br />
alapvető betűformázás<br />
<br />
<br />
<br />
Background:<br />
<br />
a háttér beállításai<br />
<br />
<br />
<br />
Block:<br />
<br />
szövegtartományok, bekezdések formázása<br />
<br />
<br />
<br />
Box:<br />
<br />
layerek és divek formázásai<br />
<br />
<br />
<br />
Border:<br />
<br />
keretbeállítások<br />
<br />
<br />
<br />
List:<br />
<br />
felsorolások és számozások beállításai<br />
<br />
<br />
<br />
Positioning:<br />
<br />
elem pozícionálásának beállításai<br />
<br />
<br />
<br />
Extensions:<br />
<br />
kiterjesztett beállítások<br />
<br />
<br />
<br />
Transition:<br />
<br />
CSS3-átmenetek<br />
<br />
A Dreamweaver másik kiváló szerkesztője a kezelőfelület jobb oldalán található CSS Styles. Két nézete van: a dokumentummal összefüggő összes szelektor felsorolása: All (minden), és a csak az aktuálisan kijelölt elem szabályait kijelző Current (aktuális). Jelen pillanatban fent a nav a {} szelektor van kijelölve, és ennek szabályait mutatja az alsó rész: háttér- és betűszíne van, stb. Ha rákattintunk egy értékre, módosíthatjuk. Színeknél a Color Picker bukkan elő, kötött értékkészletű tulajdonságoknál egy legördülő az opciókkal (pl. text-decoration esetében none, underline, overline, stb). Az Add Property linkkel új szabályt is definiálhatunk. Ha a felső lista elemeire duplán kattintunk, megint a CSS Rule Definition ablakba jutunk. Az alsó New CSS Rule gombbal új szelektor hozható létre.<br />
<br />
4.3. CSS-szerkesztés a Code Navigatorrel Ha a Design nézetben megkattintunk egy elemet, 3 kurzorvillanással később megjelenik egy hajókormány szimbólum. Ha erre rákattintunk (nincs sok időnk), tooltipben listázódnak azok a CSS-szelektorok, melyek az ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
adott elemre hatással vannak. Ezek rolloverre meg is mutatják, mire utasítják az elemet, kattintásra pedig mind a Kódnézetben, mind a CSS Styles palettán erre a szabályra navigálunk, ahol átszerkeszthetjük.<br />
<br />
4.4. Lap létrehozása sablonból (Layouts) Egy korszerű HTML-lap egy sor DIV-konténer rendszeréből épül fel. A divekkel érdemes megtanulni bánni, de nem kell a spanyolviaszt minden egyes alkalommal feltalálni. A világháló közel 20 éves története során kialakult egy sor tipikus weblapstruktúra, pl. céges névjegyekhez, blogokhoz, hírpotálokhoz stb. Ezek olyan konvenciók, amelyektől el lehet ugyan térni, de általában nem érdemes. A célunk alapvetően az, hogy a felhasználónk tudja, hogy miféle oldalon áll, azon mit-hol keressen, és ebben olyan konvenciókra fog támaszkodni, mint pl. hogy a logó a bal felső sarokban van, és gyakran a főoldalra vezető link is egyben, a fejléc alatti vízszintes sáv, vagy a bal oldalsáv navigációt rejt, a weboldal átkutatását végző kereső mezőt valahol jobbra fent kell keresni, és így tovább. A Dreamweaver HTML-sablonokkal is szolgál, melyekben előre el lettek helyezve a tartalom, a navigáció, a fejléc és a lábrész divek, bennük némi vakszöveggel, amelyet ki kell cserélni a sajátunkkal. Az oldal egyénítése ezután CSS-utasításokkal, és a megfelelő képek, háttérképek készítésével történik.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A HTML-sablonok a New... párbeszédablak Blank Page pontjával érhetők el. A file-típusok közül válasszuk ki a HTML-t, és nézzük végig a sablonok listáját. 1, 2 és 3 oszlopos sablonokból válogathatunk. Ahhoz, hogy kiválaszthassuk a magunknak megfelelőt, a következő fogalmakkal tisztában kell lennünk:<br />
<br />
Felépítés centered:<br />
<br />
Középre zárt egyoszlopos sablon.<br />
<br />
left sidebar:<br />
<br />
A bal oldalon álló keskeny oszlop (általában navigációt, Facebook-widgetet tartalmaz).<br />
<br />
right sidebar:<br />
<br />
A jobb oldali navigáció leginkább a blogoknál terjedt el, egyébként reklámbannereket, figyelemfelkeltő információkat, legfrissebb cikkeket, szavazást, Facebook-widgetet szoktak itt elhelyezni.<br />
<br />
header and footer:<br />
<br />
Fej- és lábléccel is rendelkező sablon. A headerben gyakran szerepel fejléckép, logó, esetleg jelmondat. A footerben Copyright-információk és kevésbé fontos linkek (pl. Impresszum) szoktak szerepelni.<br />
<br />
Viselkedés fixed:<br />
<br />
A divek mértete csak a kliens böngészőjében beállított betűmérettől függ, a kijelző(ill. ablak-) szélességtől nem. A szélességek pixelben vannak megadva.<br />
<br />
liquid:<br />
<br />
A divek mérete csak a kijelző- (ill. ablak-) mérettől függ, és nem függ a kliens böngészőjében beállított betűmérettől. A szélességek %-ban (az aktuális ablakmérethez képest) vannak meghatározva.<br />
<br />
A DW korábbi verzióiban és a justdreamweaver.com kiváló sablonjai között ezeken kívül találkozhatunk még az alábbiakkal. Különösen a hybrid sablonok teljesítettek jól különböző felbontások mellett. elastic:<br />
<br />
Ugyanúgy, mint a fixednél, a divek mértete csak a kliens böngészőjében beállított betűmérettől függ, a kijelző- (ill. ablak-) szélességtől nem. A szélességek em mértékegységben (az aktuális betűmérethez képest) vannak meghatározva.<br />
<br />
hybrid:<br />
<br />
A navigáció szélessége em-ben, a tartalomé pedig %-ban van megadva. A legtöbb esetben a hibrid sablonok néznek ki a legjobban. Ha a kijelzőt átméretezgetjük, látni fogjuk, hogy a tartalom rugalmasan igazodik, az oldalsáv viszont nem változik, így keskeny kijelzőn sem válik olvashatatlanná. A háromoszlopos hibrid ráadásul az ablak teljes szélességét kihasználja, ezzel maximalizálva az első blikkre látható tartalom mennyiségét.<br />
<br />
Amikor bármilyen sablonnal találkozunk, elsőként érdemes letesztelni, hogy hogyan reagál a lehetséges megjelenítési környezetekre. Most kérjünk egy 3 oszlopos liquid sablont fejléccel és lábbal. A Layout CSS pulldown-menüben választhatjuk meg, hogy hova kerüljenek a stílusdeklarációk: a HTML fejlécébe, vagy egy új CSS-be. Utóbbival rugalmasabbak leszünk, ezért válasszuk a Create New File-t. Create.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Ezután a Dreamweaver elmenteti velünk a CSS-t, hogy a HTML-ből már relatív címzéssel érje el, majd megnyitja a HTML-t.<br />
<br />
4.5. Sztenderd betűtípusok Akárhol is választunk betűtípusok közül, a DW az alábbi 13 igen elterjedt betűcsaládot tartja számon: Azért van egy sorban több betűtípus, mert ha az első (pl. Verdana) nem lenne meg a klilens gépén, a böngésző a másodikkal (Genevával) jeleníti meg a szöveget, s ha az sincs, akkor az alapértelmezett groteszk (sans-serif) betűtípussal, amilyenből már tényleg minden rendszeren lennie kell. Ezek az alternatívák azért is hasznosak, mert ha az elsődleges betűtípus nem tartalmazza a magyar ő-t és ű-t, ezek is az alternatív betűtípussal jelennek meg.<br />
<br />
Tipográfusok körében elterjedt az a nézet, hogy a kis méretű, hosszabb szövegek (szövegtest) groteszk (sans-serif) betűtípusokkal a legolvashatóbbak, míg a nagyobb méretű, rövidebb szövegeket (fejezetcímeket) elegánsabbá teheti valamely talpas (serif) betűtípus. Times New Roman vagy Georgia a fejezetcímekhez és Arial vagy Calibri a szövegtesthez – sok évig ez volt az uralkodó tipogrfiai sablon. Ma már szövegtesteket is látni nagy, talpas betűtípusokkal, különösen, ha a mondatok rövidek, tehát a szöveg tartalmilag egyszerű. Másutt meg igen nagy méretű fejezetcímeket is látni keskeny vonalvastagsággal, groteszk betűkkel, amelyekben valami új is van, és amelyeket igenis sikerült még az Arialnál is olvashatóbbá tenni.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
4.6. Webfonts A weben sok helyütt le lehet tölteni különleges betűtípusokat, amelyeket az @font-face CSS3-szelektorral lehet alkalmazni. Ezeket fel kell tölteni a saját tárhelyre, amihez elvileg tájékozódni kell a betűtípus, mint szellemi termék felhasználhatóságáról. A betűtípusok ingyenes és legálisan felhasználható tárházát nyújtja a http://www.fontsquirrel.com/.<br />
<br />
Ha kiválasztottunk egyet, az @font-face linken elérhető egy olyan csomag, ami 4 webes formátumban (TTF, EOT, WOFF és SVG) tartalmazza a betűtípust, egy demonstrációs HTML-lapot, egy olyan stíluslapot, amiben megvan az összes megjelenítő eszközre felkészített CSS-kód, és egy szövegfile-t, amiben az áll, hogy mindezt használhatjuk, csak nem adhatjuk el.<br />
<br />
Tegyük a letöltött betűtípus file-okat a szerkesztendő HTML-lel egy mappába. DW-be jelöjünk ki egy fejezetcímet. A Propertiesen váltsunk CSS-re. Font legördülő / Edit Font List… Azon: Web Fonts… gomb. Azon: Add Font gomb. Azon tallózzuk ki az első EOT file-t (a többit a DW automatikusan megtalálja), és jelöljük be a használati engedélyek jelölődobozát.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Ok, Done. Az Available fonts felsorolásból válasszuk ki az új betűtípust, és adjuk hozzá a balra-nyíl gombbal a Chosen (választott) fontokhoz, majd a Calibri-t (alternatívaként, ha problémák lennének), és a sansserifet, mint legalapvetőbb betűcsaládot arra az esetre, ha a kliens oprendszere vagy böngészője semmi másra nem lenne képes.<br />
<br />
A kijelölt szöveg tulajdonságlapján a Font legördülőben kiválasztható az új betűtípus. A New CSS Rule-ban válasszuk a Tag formázást, OK. Mivel ez CSS3-formázás, csak a Live nézetben ellenőrizhető:<br />
<br />
Az @font-face-eket a mellékelt stylesheet.css tartalmazza.<br />
<br />
Google Web Fonts A másik lehetőségünk a szürke masszából való kiemelkedésre az olyan online-betűszolgáltatások igénybe vétele, mint a Google Web Fonts. Az ingyenes és korlátozás nélkül használható több száz betűtípust fejlett szűrő segítségével szűkíthetjük le, majd a kiválasztottakat áttekinthető felületen alaposan összehasonlíthatjuk. Végül megkapjuk a nyertes betűtípus beágyazásához CSS-kódot. Betűtípus-file-okat nem kapunk, azok a Google szerveréről töltődnek be. A távoli betűkészletek használata valamelyest lassítja a betöltődést, ezért túl sokat nem érdemes beágyazni. Figyelem: magyar karakterek megjelenítéséhez a Latin Extended készletből kell válogatnunk. Az Explorer nem támogatja.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
4.7. Sablonos lap formázása CSS-sel Nézzünk bele a kódba. A CSS-ben a <body> tag és a <div>-ek tulajdonságai vannak meghatározva. Először is szerezzünk be pár színt. Használjuk a megosztott nézetet. Döntsük el, melyik szín hova fog kerülni. Kattintsunk bele a fejlécbe, és állapítsuk meg a nevét a WYSIWYG-nézet alján lévő elérési útból:<br />
<br />
Nyissuk meg a thrColLiqHdr.css stíluslapot. Ebben kommentárok is vannak, amiket egyszer érdemes elolvasni, később kitörölhetjük őket. Keressük meg a .header szelektort és írjuk át a háttérszínét pl. sötétpirosra: → Ha ezt egyszer elkövettük, értékelni fogjuk a Dreamweaver CSS-szerkesztőjét, melyben a tulajdonságok a forráskód csévélgetése nélkül is elérhetők egy áttekinthető táblázatban; ha az All van aktiválva, mindegyik deklaráció felsorolását mutatja…<br />
<br />
… ha a Current, akkor az aktuális kijelölését:<br />
<br />
Az Add Propertyre kattintva fűzhetünk új tulajdonságokat a listához, de be is gépelhetjük. A Delete billentyű eltávolítja a kiválasztott tulajdonságot.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<br />
<br />
A fentieket ismételve tetszés szerint változtassuk meg a lap konténereinek háttér- és betűszíneit. Másoljunk be annyi vakszöveget a tartalmi divbe, hogy a magassága meghaladja az ablak magasságát, így jobban meg tudjuk ítélni lapunk viselkedését a gyakorlatban.<br />
<br />
<br />
<br />
Tegyük a tartalom div szövegét sorkizárttá. Erre a legegyszerűbb megoldás az, ha a .content-nek adunk egy text-align:justify tulajdonságot. A p taghez rendelni ugyanezt a tulajdonságot azért nem lenne célszerű, mert jelenleg az oldalsávok szövege is p tagekben foglaltatik.<br />
<br />
<br />
<br />
Válasszuk ki a CSS Styles palettán a body elemet és adjuk meg neki a background-image tulajdonsággal a háttérképet.<br />
<br />
Ezzel a módszerrel gyorsan előállíthatunk egy csinos HTML-lapot, amely szabványos kódú, konvencionális elrendezésű, és alkalmazkodik a megjelenítés körülményeihez. Az alábbi URL-eken további konvencionális HTML-CSS bázis-sablonokat tölthetünk le: Just Dreamweaver<br />
<br />
Dynamic Drive<br />
<br />
Intensivstation<br />
<br />
Code sucks!<br />
<br />
Layout Gala<br />
<br />
Jimmy Lin<br />
<br />
Max Design<br />
<br />
YAML Builder<br />
<br />
4.8. CSS3-áttűnések (Transitions) Kérjünk egy DW-sablont. A ColorZilla online eszközével generáljunk átmenetes dobozháttérszínt. Tegyük a sablon linkjeinek háttérszínét átmenetessé. Az áttűnés (transition) CSS3-tulajdonság animációt generál. Ha pl. a linkek hover státuszának más színt adunk, és megmondjuk, mennyi idő alatt alakuljon át, az alap- és a hover-állapot között átmenet keletkezik. Példa: #nav a {<br />
<br />
#nav a:hover {<br />
<br />
background-color: #000;<br />
<br />
background-color: #FFF;<br />
<br />
}<br />
<br />
-webkit-transition: background 500ms ; -moz-transition: background 500ms ; -ms-transition: background 500ms ; -o-transition: background 500ms ; transition: background 500ms ; }<br />
<br />
Nyissuk meg a Window / CSS Transitions palettát. Válasszuk ki a taget a Design nézetben, és nézzük meg elérését a DOM-hierarchiában: a mellékelt ábrán ez a .nav osztályú <ol>-ek <li> elemeinek <a> gyermeke. Kattintsuk meg a + jelet a Transitions palettán. A Target Rule (célszabály) legördülőből válasszuk ki az ul.nav a szelektort. A Transition On: (áttűnés ekkor:) legördülőből kiválaszthatjuk az elem státuszát: <br />
<br />
active (aktív):<br />
<br />
amikor megkattintanak egy elemet<br />
<br />
<br />
<br />
checked:<br />
<br />
amikor bejelölnek egy rádiógombot vagy jelölődobozt<br />
<br />
<br />
<br />
disabled / enabled:<br />
<br />
amikor ki- / bekapcsolnak egy elemet<br />
<br />
<br />
<br />
focus:<br />
<br />
amikor az elemre viszik a fókuszt (kattintással vagy a tabulátor billentyűvel)<br />
<br />
<br />
<br />
hover:<br />
<br />
amikor az elemre viszik az egeret<br />
<br />
<br />
<br />
indeterminate:<br />
<br />
jelölődoboz, amelynek meghatározatlan a státusza<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Válasszuk most a hover státuszt. A következő legördülővel lehet megszabni, hogy mindegyik tulajdonság animációja azonos legyen (Use the same transition), vagy más-más paraméterek legyenek érvényben (Use different transitions). A Duration az áttűnés ideje (1s = 1000ms), a Delay a késés, amennyi az áttűnés megkezdéséig eltelik, a Timing Function legördülővel a lineáris helyett választhatunk gyorsuló vagy lassuló lefutást. A Property konténerhez a + gombbal adhatunk tulajdonságokat, esetünkben csak a backgroundcolort (háttérszínt), amit az End Value (végérték) mezőben állíthatunk be. A Create Transition gombra kattintva a kód beépül a választott szelektor CSS-utasításaiba. Az átmenet ezek után a Live-nézetben és a bögészőkben tesztelhető.<br />
<br />
4.9. Stíluslap nyomtatáshoz Az olyan lapokat, mint az Árak, a Megközelítés, az Elérhetőségek vagy a Nyitvatartás a végfelhasználók sűrűn ki fogják nyomtatni. Weblapunk nyomtatási nézetét meg is tekinthetjük a böngészőben (pl. Chrome: Beállítások gomb / Nyomtatás… Firefox: Fájl / Nyomtatási kép). A böngészők alapbeállítása, hogy a háttérképeket és –színeket nem nyomtatják ki. A beágyazott képek, a navigáció és egyes oldalsáv-elemek (keresőmező, social widget) vagy a lábrész azonban olyan elemek, amelyeket érdemes eltűntetni (hogy kíméljük a látogató tintáját). Ha már kialakult a kijelzőre szánt stílus, duplázzuk meg, és nevezzük el a másolatot print.css-nek. HTML-lapjainkat kétféle módon is összeköthetjük ezzel a nyomtatásra szánt stíluslappal: vagy a CSS Styles paletta Attach Style Sheet gombjával…<br />
<br />
… vagy a következő kód <head>-be gépelésével: ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<link href="print.css" rel="stylesheet" type="text/css" media="print" /><br />
<br />
Ezek után az új CSS-ben kikapcsoljuk a papíron nem releváns, tintapazarló konténereket: #nav, #footer, .facebook { display: none; }<br />
<br />
5. Adaptív (responsive) webdesign 5.1. Mediaqueries A médialekérdezés annyit jelent, hogy a weblap reagál az azt megjelenítő kijelző felbontására. Attól függően, hogy egy 640 vagy 840 × 480-as okostelefon, egy 1024 × 768-as tablet vagy egy 1366 × 768-as laptop vagy egy full-HD-s (1920 × 1200) kijelzőjű desktop jeleníti meg, más és más stíluslap formázza meg. Az is lekérdezhető, hogy a kijelző álló vagy fekvő helyzetben ábrázolja a weblapot.<br />
<br />
Ebben a dialógusban köthetjük össze az egyes felbontásokat az egyes CSS-file-okkal. Fent kiválaszthatjuk, hogy az egész weboldal vagy csak ez a lap reagáljon –e az észlelt felbontásra. A Force devices jelölődoboz által a kijelző méretének kiolvasását végző metatag bekerül a fejlécbe. A plusz gombra kattintva új felbontás-CSS párost definiálhatunk, az alsó mezők értelemszerű kitöltésével. De mi most vonjuk ezt vissza a mínusz gombbal. A Default Presets gombra kattintva betöltődik a gigászi triász:<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Látható, hogy mely értékhatárok közt minek számít az eszköz. Módosítsuk az értékeket a következőkre:<br />
<br />
Válasszuk lent a Use existing file lehetőséget és tallózzuk ki az egyes CSS file-okat. Ha befejeztük, okézzuk le, és pillantsunk bele a fejlécbe. Innen a korábbi általános CSS-összeköttetést törölhetjük is, hiszen az újabb 3 CSS minden eshetőséget lefed (480 alatt, 481 – 768, 769 felett):<br />
<br />
Az ilyen lapokat a böngészőablak átméretezgetésével vagy a Design nézetben a telefon / tablet / monitor ikonokra kattintva lehet tesztelgetni. A legtöbb esetben először a desktopra szánt nézetet készítjük, és ebben az üzemmódban tartjuk a Design nézetet. Ebből általában elég, ha átrendezések és a szélességek változtatásával kifejlesztjük a tabletes nézetet. A mobil nézetben az átrendezések és –méretezéseken túl egyes konténereket akár el is rejthetünk egy display:none tulajdonsággal – ne terheljük túl az útközben mobiljukon böngésző felhasználókat. A komoly projekteknél a mobil megtekintésre külön tartalmi kódot is írnak; kiemelt helyen szerepel a megközelítés, a nyitvatartási idő, a kapcsolatfelvételi lehetőség, ill. a webhely fő funkcionalitása (belépés valamilyen admin-felületre, pl. e-mail-kliensbe, online-bankingbe). Sok esetben a mobilos látogató egy külön subdomainre irányítódik – ilyen pl. az m.yahoo.com vagy az m.facebook.com, de bármelyik nagy hírportálnak van, vagy a közeljövőben lesz m-es subdomainje ill. tartalmai. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
5.2. Multiscreen előnézet Lépjünk be a Multiscreen Preview-ba. Itt weblapunk 3-féle előnézetét láthatjuk egyszerre:<br />
<br />
5.3. Fluid Grid Layout (Rugalmas layout-rács) Ezzel a feature-rel könnyedén lefektethetjük az egy laphoz tartozó 3-féle stílus alapjait. Hozzunk létre egy új mappát a következőkben létrehozandó összes file-nak. Válasszuk a Welcome Screenen vagy a New Document párbeszédben a Fluid Grid Layout parancsot. A layout rácsok meghatározott számú, egymástól azonos távolságot tartó sávra osztják fel a főkonténert (a mindent magába foglaló, középre zárt <div>-et). A sávok nem azonosak az oszlopokkal, tehát a később ténylegesen megjelenő konténerekkel. Egy cikket, képet, vagy widgetet hordozó konténer 3-4-5 sáv széles is lehet. Nem fordulhat elő azonban az, hogy bárhol a weblapon egy konténer széltében ne valamelyik sáv szélén kezdődjön el vagy érjen véget, tehát nem táncolhat ki az oszlopból. Ez biztosítja a rendet.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Mindhárom eszköz esetében beállíthatjuk, hogy a főkonténer a böngésző szélességének hány %-át tegye ki, és hány sávból álljon. A mobil eszköz esetében azt is megadhatjuk, hogy a sávok közötti távolság a sávok szélességének hány %-a legyen. A Reset gombbal ezek a kezdőértékek bármikor visszaállíthatók. A DocType legördülővel kiválasztható a(z) (X)HTML-verzió. Kattintsuk meg a Create gombot. A DW elhelyezteti velünk a fő stíluslapot – nevezzük el gridnek, és mentsük el az új mappába. Ez után mentsük el a HTML-t – pl. adaptive.html néven. Két további file is keletkezik a mappában: a boilerplate.css és a respond.min.js közösen gondoskodnak arról, hogy a weblap minden böngészőben (még régebbi Explorerekben is) azonosan jelenjen meg. A főkonténeren (gridContainer) belül már el lett helyezve egy <div>: a LayoutDiv1. A zöld hátterű szöveg azt javasolja, hogy használjuk az Insert Fluid Grid Layout Div gombot az Insert paletta Layout fülén. Minden <div>-et a főkonténeren belül kell elhelyezni; egymásba nem ágyazhatjuk őket. Illesszünk be 4 új <div>et, és nevezzük el őket cotent1, content2, content3, content4 és footer névre. A rend kedvéért a LayoutDiv1-et is átnevezhetjük, de ehhez mindenképpen a Find & Replace párbeszédet használjuk! Eddig a mobil nézetben voltunk, váltsunk át a tabletre.<br />
<br />
Itt 8 sávunk van; húzzuk össze a content1-4 konténereket 4 sáv szélességűre (nem kell pontosan eltalálnunk a sávhatárt, mert mágneses), majd kattintsuk meg a content2 mellett rolloverre megjelenő jobbra-fel nyilat (Move up a row). Ismételjük ezt meg a content4-gyel. A következő elrendezést kell kapnunk:<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A beállított elrendezés csak a tablet nézetre érvényes; váltsunk át desktopra, és alakítsunk ki 5 sáv széles oszlopokat. A mobil layout marad egyoszlopos. Full size beállítás mellett a DW felületén belül is ki lehet próbálni, hogy ha a jobb oldali palettasávot szélesítjük (és ezzel a Design nézetet keskenyítjük), a nézet egyszer csak átváltódik tabletes, majd mobilos nézetre. Az adaptív rács készen van, ezek után meg kell töltenünk tartalmakkal, és azokat persze meg kell formáznunk, mert a Fluid Grid Layout igen dísztelen.<br />
<br />
5.4. jQuery Mobile A jQuery Mobile egy HTML5 / CSS3 / JavaScript - alapú user interface keretrendszer okostelefonok és tabletek érintéses kezeléséhez. A http://jquerymobile.com Platforms linkjén meg lehet nézni, mely operációs rendszerek élveznek teljes támogatást, melyek részlegeset, és melyek nem támogatottak. A mobil oprendszer piac igen gyorsan változik, de a keretrendszer az összes elterjedt mobil oprendszert és böngészőt támogatja: Apple iOS, Android, Windows Phone, Blackberry, Palm WebOS, Firefox Mobile, Chrome for Android, Skyfire, Opera Mobile, Meego, Tizen, Samsung Bada, UC Browser, Kindle, Nook Color, valamint a Chrome, a Safari, a Firefox, az Internet Explorer és az Opera desktop-változatai. Az oldal DOCS menüpontja részletes tájékoztatást ad minden interface-elemről. Mobiloldal elkészítéséhez a DW-ben válasszuk a New Document párbeszédablakon a Page from Sample fület. A Mobile Starters mappában 3 lehetőség van: <br />
<br />
CDN (Content Distribution Network): a stíluslapok, JavaScriptek a jQuery Mobile szerverén tárolódnak.<br />
<br />
<br />
<br />
Local: a stíluslapok, JavaScriptek lokálisan tárolódnak.<br />
<br />
<br />
<br />
with Theme (Local): skinek (eltérő színű sablonok) is tárolódnak.<br />
<br />
Válasszuk a 3. lehetőséget (a dokumentumtípus maradjon HTML5), és mentsük el a létrejött lapot egy új mappába. A DW egész sor összekapcsolt file-t ment mellé:<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Próbáljuk ki a weboldal mindhárom változatát (phone, tablet, desktop) Live-nézetben. Ezek után bemásolhatjuk a tartalmakat a Content és hasonló feliratok helyett, és az Insert paletta jQuery Mobile fülén további elemeket illeszthetünk be. Ezek ismerősek lesznek az űrlapelemek ill. a Spry-elemek fejezetből: <br />
<br />
Page:<br />
<br />
új lapot ad az oldalhoz, kívánságra fej- és lábrésszel (a Page One-on be kell linkelni)<br />
<br />
<br />
<br />
List View:<br />
<br />
rendezetlen vagy rendezett felsorolás; opciók: aside elem, ikon<br />
<br />
<br />
<br />
Layout Grid:<br />
<br />
táblázatszerű konténerrendszer<br />
<br />
<br />
<br />
Collapsible Block: lehajtható konténerek<br />
<br />
<br />
<br />
Text Input:<br />
<br />
szövegbeviteli mező<br />
<br />
<br />
<br />
Password Input:<br />
<br />
jelszóbekérő mező<br />
<br />
<br />
<br />
Textarea:<br />
<br />
többsoros szövegdoboz<br />
<br />
<br />
<br />
Select Menu:<br />
<br />
legördülő menü<br />
<br />
<br />
<br />
Checkbox:<br />
<br />
jelölődoboz, akár csoportban (több bejelölése is lehetséges)<br />
<br />
<br />
<br />
Radio Button:<br />
<br />
rádiógomb-csoport (csoportonként egy bejelölése lehetséges)<br />
<br />
<br />
<br />
Button:<br />
<br />
gombok választható szimbólummal, tetszőleges funkcióval (akár csoportosan)<br />
<br />
<br />
<br />
Slider:<br />
<br />
csúszka (billentyűzetes begépelés lehetőségével)<br />
<br />
<br />
<br />
Flip Toggle Switch: bekapcs / kikapcs gomb<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Nyissuk meg a Window / jQuery Mobile Swatches palettát. Ezzel színt adhatunk az akár a Live-nézetben kijelölt jQuery-elemeknek. A Get More Themes link a szolgáltató online ThemeRoller oldalához vezet, ahol egy nagyon intuitívan kezelhető CSS-szerkesztővel hozhatunk létre új „témákat”:<br />
<br />
Itt ki lehet választani egy színpalettát az Adobe Kuler könyvtárából, vagy létre is lehet hozni egyet. A Recent Colors mezőiről azután rá lehet húzni a színeket az egyes UI-elemekre. Az oldalsávon olyan beállításokat találunk, mint a betűtípus, -szín és -árnyék, a háttérszín, a sarkak lekerekítése, az ikonok és a dobozok színe – mindezt egyszer megadhatjuk globálisan, és módosíthatjuk az egyes „Swatch”-okra vonatkozóan. A Swatchok lényegében al-témák, amelyek meg fognak jelenni a jQuery Mobile Swatches palettán. Ha befejeztük a témánkat, a Download gombbal letölthetjük. Kapunk egy kódot, amit mobiloldalunk fejlécébe kell illesztenünk, ez hivatkozásokat tartalmaz részben online forrásokra, részben a letöltött stíluslapra. Amikor a DW létrehozta a mobiloldalt, egy stíluslapot és két JavaScriptet már a mappánkba másolt, de az online verzió ezeknél frissebb:<br />
<br />
Helyezzük a letöltött file-okat a HTML mellé, majd frissítsük a Mobile Swatches palettát. Az új téma rendelkezésre áll. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
5.5. PhoneGap-integráció A PhoneGap az Adobe új keretrendszere, amely HTML, CSS és JS állományokat natív okostelefon- ill. tabletalkalmazássá alakít. Ha elkészítettünk egy weboldalt, csak konvertálnunk kell a PhoneGappel, és egy olyan alkalmazást kapunk, amit bármelyik elterjedt mobil oprendszerre feltelepíthetünk. Ezek jelenleg: <br />
<br />
iOS (Apple iPhone és iPad)<br />
<br />
<br />
<br />
Android (Acer, ASUS, HTC, LG, Motorola, Panasonic, Samsung, Sony-Ericsson, és még sok másik)<br />
<br />
<br />
<br />
webOS (Hewlett Packard, Palm)<br />
<br />
<br />
<br />
WindowsPhone 7.5+ (Nokia, Samsung, HTC, ZTE)<br />
<br />
<br />
<br />
Blackberry<br />
<br />
<br />
<br />
Symbian (Nokia, Samsung, Sony-Ericsson, Motorola, LG)<br />
<br />
<br />
<br />
bada (Samsung) és Tizen (Samsung, Huawei)<br />
<br />
A szolgáltatás igénybevételének feltétele a regisztráció a https://build.phonegap.com/ oldalon. Ha már van Adobe-ID-nk, gyorsan PhoneGap kontóvá bővíthetjük. Kérjük egy új site-ot a Site / New Site… párbeszédablaklel. Gyökérkönyvtára legyen az előző, mobileszközökre készült weblapunkat tartalmazó mappa. Nyissuk meg a HTML-t. Site / PhoneGap Build Service / PhoneGap Build Service. Jelentkezzünk be Adobe ID-nkkel, és kattintsunk a Continue gombra.<br />
<br />
A DW legyártja az alkalmazás 3 különböző platformra telepíthető változatát. Egyedül az iOS-alkalmazás gyártásához kell fejlesztői kontóval rendelkezni az Apple-nél. Az jobbranyíl-gombokkal az Android- és a webOS-alkalmazás a számítógépen is letesztelhető (emulálható), ha telepítve van rá az Android- ill. a webOS-SDK (Software Develelopement Kit = Szoftverfejlesztő Készlet). Az alkalmazások ekkor még a weben vannak. A QR-Code (Quick Response Code = gyorsválasz kód) egy kódolási eljárás, amellyel hiperlinkeket kódolnak négyzetes grafikákba. Ilyenekkel egyre sűrűbben találkozunk plakátokon, szórólapokon. Mobileszközünk beépített fényképezőgépe, ill. a megfelelő alkalmazás értelmezi a kódot, és már fel is hívja a böngészőben az URL-t. Jelen esetben a QR-code olyan ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
URL-hez vezet, ahonnan az alkalmazás letöltődik és így feltelepíthető a mobileszközre. Ez lehetővé teszi az alkalmazás gyors, ismételt tesztelését. Végül a lefele-nyilakkal az alklamazások letölthetők a lokális gépre. Android - app.apk, BlackBerry - app.jad, webOS - app.ipk, Symbian- app.wgz, iPhone - app.ipa:<br />
<br />
6. JavaScript-keretrendszerek 6.1. A JavaScriptről velősen A Netscape-nél 1995-ben megjelent JavaScript egy objektumorientált programozási nyelv, amelyet arra fejlesztettek ki, hogy a weblapok interaktivitását és funkcionalitását kibővítse. A JavaScript nem tévesztendő össze a Java nevű programnyelvvel, amellyel bizonyos hasonlóságokat mutat. A jelenleg (2012 tél) aktuális 1.8-as verzió az ECMA-262 Edition 3 nevű ISO-szabványon alapul. Ez a kliensoldali programnyelv számos más nyelvnek is ihletője volt, közöttük a Flash / Flex szerzői rendszer ActionScriptjének. JavaScript kódot a CSS-hez hasonlóan be lehet illeszteni a HTML-forráskódba (a <head>-be vagy a <body>ba egy elemhez kapcsolva), de a HTML-ből hivatkozni is lehet külső, .js kiterjesztésű dokumentumokra. Futási környezete jellemzően egy webböngésző JavaScript-motorja. Tipikus alkalmazási területei: <br />
<br />
weblapok dinamikus manipulációja a Dokumentum-Objektum-Modell révén<br />
<br />
<br />
<br />
űrlapelemek érvényességi ellenőrzése (validáció)<br />
<br />
<br />
<br />
adatok küldése és fogadása a weblap frissítése nélkül (AJAX-keretrendszer)<br />
<br />
<br />
<br />
keresőkifejezések azonnali ajánlása<br />
<br />
<br />
<br />
bannerek és futó szövegek<br />
<br />
<br />
<br />
interaktív, mozgó elemek, pl. User Interface-elemek, képgalériák<br />
<br />
<br />
<br />
böngészőjátékok<br />
<br />
<br />
<br />
média- (hang- és videó-) lejátszás<br />
<br />
<br />
<br />
e-mail cím elrejtése spam-védelem végett<br />
<br />
<br />
<br />
több keret egyidejű manipulációja vagy a weblap mentesítése a keretektől (frameset)<br />
<br />
A JavaScript olyan fogásokat is lehetővé tesz, mint… <br />
<br />
a forráskód elrejtése<br />
<br />
<br />
<br />
a belinkelt URL-ek elrejtése<br />
<br />
<br />
<br />
a helyi menü deaktiválása, hogy nehezítsék a képek másolását ill. mentését<br />
<br />
De a JavaScriptnek köszönhetjük az olyan bosszantó dolgokat is, mint… ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<br />
<br />
a kéretlen Pop-upok, Pop-underek, ablakok, párbeszédablakok megnyitása<br />
<br />
<br />
<br />
esetenként ezek sokaságával a kliens gép túlterhelése és a munka blokkolása<br />
<br />
<br />
<br />
a böngészőablak kéretlen bezárása vagy méretének megváltoztatása<br />
<br />
<br />
<br />
a nem eléggé védett webalkalmazásokat harmadik felek kód becsempészésére használhatják fel<br />
<br />
… ezért különösen a vállalati szférában hosszú évekig kerülték. Ma azonban olyan sok weboldalon használnak JavaScriptet olyan elemi dolgokra, mint pl. a legördülő menü vagy a kapcsolatfelvételi űrlap, hogy nem lehet megkerülni ezt a technikát. Az Internet Explorer alapértelmezetten a mai napig blokkolja a szkripteket, és nem elég, hogy két kattintással lehet csak engedélyezni, ugyanazon weblap valamennyi felhívásakor / frissítésekor újra meg kell adni az engedélyt. A Microsoft ezzel nem segítette böngészőjének térnyerését az elmúlt években. Igaz, az elkövetkező években egyre inkább CSS3-al fogják készíteni a legördülő menüket és HTML5-tel fogják végezni az űrlapérvényesítést. Az előző fejezetben ismertetett jQuery is egy JavaScripten alapuló keretrendszer, de a Dreamweaver is rendelkezik kettővel: a viselkedésekkel (Behaviors) és a Spryokkal, és az újrahasznosítható kódrészletek könyvtárában (Snippets) is találunk szkripteket.<br />
<br />
6.2. Viselkedések (Behaviors) A JavaScript alaptétele szerint egy elemhez rendelünk egy eseményt, melynek bekövetkeztekor végre kell hajtódnia egy műveletnek. Ezt az esemény-művelet kapcsolatot hívja a Dreamweaver viselkedésnek, és egy sor ilyen előregyártott viselkedéssel szolgál, pl. az elemek átméretezésével valamilyen felhasználói interakcióra. Példa egy viselkedésre: "Ha az A kép fölé viszem az egeret, nőjön meg az XY nevű <div>." A fenti utasítás 4 dolgot tisztáz: 1. Melyik elem vár eseményre?<br />
<br />
Az X kép.<br />
<br />
2. Milyen eseményre vár?<br />
<br />
Arra, hogy az egér fölékerüljön.<br />
<br />
3. Mivel történjen valami?<br />
<br />
Az XY nevű <div>-vel.<br />
<br />
4. És mi történjen vele?<br />
<br />
width és height attribútumai duplázódjanak meg.<br />
<br />
Ha épp nem lenne elől, nyissuk meg a Window menü / Behaviors palettát. <br />
<br />
Először is ki kell jelölni azt az elemet, amely a viselkedés forrása lesz (1).<br />
<br />
<br />
<br />
Majd a Behaviors palettán a + jelre kattintva ki kell választanunk az adott viselkedést. Ez általában párbeszédablakot nyit meg, amelyben paramétereket kell megadni (4), és adott esetben kiválasztható a célelem (3).<br />
<br />
<br />
<br />
A viselkedést a DW automatikusan egy eseményhez rendeli, de ezt meg lehet változtatni - pl. hogy ne MouseOverre történjen képcsere, hanem Clickre (2).<br />
<br />
A kiválasztható viselkedések a következők (kiemelve a fontosabbak):<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<br />
<br />
Call JavaScript: meghív egy előre megírt .js file-t, melyet nem maga generál, hanem nekünk kell megírni, vagy beszerezni, és a gyökérkönyvtárban tartani .js formátumban.<br />
<br />
<br />
<br />
Change Property: megváltoztatja egy elem tulajdonságait (olyanokat, mint pl. a háttérszín, háttérkép, megjelenés (igen/nem), szöveges tartalom mérete, stílusa, színe, stb).<br />
<br />
<br />
<br />
Check Plugin: ellenőrzni, hogy rendelkezik-e a felhasználó egy adott Plug In-nel, és ennek függvényében tölt be adott weblapokat. Még ma is találhatók pl. olyan honlapok az interneten, amelyek megkérdezik a látogatótól, hogy melyik verziót szeretné megtekinteni: az egyszerű HTML-t vagy a Flashes luxusverziót. Ha azt szeretnénk, hogy alapesetben az utóbbi nyíljon meg, de a Flash Player hiányában a HTML, ezzel a viselkedéssel készíthetünk elágazást. A viselkedés hozzárendelhető a <body> tag betöltődésének eseményéhez (onLoad), így a felhasználót nem is kell kérdésekkel traktálni.<br />
<br />
<br />
<br />
Drag AP element: az általunk beillesztett rétegeket mozgathatóvá teszi a felhasználók számára.<br />
<br />
<br />
<br />
Effects: konténerekhez rendelhető látványeffektek, rendre: Megjelenít / Eltüntet, Roló, Növeszt / Csökkent, Színátmenet (időbeli), Vízszintes megrázás, Beúszás, Minimalizálás. Egyes effektek párbeszédablakeiben az alsó jelölőnégyzet (Toggle) azt jelenti, hogy a gomb újbóli megnyomásával álljon helyre az eredeti állapot.<br />
<br />
<br />
<br />
Goto URL: meghív egy URL címet, hasonlóan az <a> taghez.<br />
<br />
<br />
<br />
Jump Menu és Jump Menu Go: <select> elemre alkalmazva ugrólistát hoz létre, melynek elemei más lapokra hivatkoznak. A Go annyiban más, hogy az opció kiválasztása után a felhasználónak meg kell nyomnia egy gombot. Ugyanez érhető el az Insert paletta Jump Menu gombjával.<br />
<br />
<br />
<br />
Open Browser Window: új böngészőablakot nyit és beletölt egy megadott URL-t. Lehetőség van az ablak méretének és attribútumainak meghatározására.<br />
<br />
<br />
<br />
PopUp Message: felugró ablakban üzenetet küldhetünk a felhasználónak. Eltűntetéséhez a látogatónak le kell okéznia a popupot. Leggyakrabban figyelmeztetésekhez használják.<br />
<br />
<br />
<br />
Preload Images: előre le lehet töltetni a weboldal más lapjain szereplő képeket, így amikor a látogató vált, a másik lap azonnal megjelenik mindenestül.<br />
<br />
<br />
<br />
Set Text: szöveget ír az általunk létrehozott elemekbe, pl. egy <div>-konténerbe, egy keretbe, a böngésző állapotsorába (statusbar; már ha van még a böngészőnek) vagy egy űrlap szövegmezőjébe.<br />
<br />
<br />
<br />
Show / Hide Elements: rétegeket tűntet el vagy jelenít meg.<br />
<br />
<br />
<br />
Swap Image, Swap Image Restore: klasszikus képforgatás és annak visszaállítása. Amikor Rollover Image-et illesztünk be, akkor is ezt a viselkedést rendeli hozzá a Dreamweaver.<br />
<br />
<br />
<br />
Validate form: megvizsgálja, hogy egy adott űrlap adott elemébe megfelelő értékek kerültek-e.<br />
<br />
<br />
<br />
A Get More Behaviors... megnyitja a böngészőben az Adobe online "Piacterét", ahol további viselkedéseket tölthetünk le (vannak ingyenesek is).<br />
<br />
A kiválasztható események a következők: <br />
<br />
a kurzor egy elemre kerül:<br />
<br />
onMouseOver<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<br />
<br />
a kurzor elhagyja az elemet:<br />
<br />
onMouseOut<br />
<br />
<br />
<br />
a felhasználó megkattint egy elemet (bal egérgomb lenyomása és felengedése):<br />
<br />
onClick<br />
<br />
<br />
<br />
duplakattintás:<br />
<br />
onDblClick<br />
<br />
<br />
<br />
egérgomb lenyomása:<br />
<br />
onMouseDown<br />
<br />
<br />
<br />
egérgomb felengedése:<br />
<br />
onMouseUp<br />
<br />
<br />
<br />
a felhasználó az elemre fókuszál (tabulátorral, de az egérgomb lekattintásával is): onFocus<br />
<br />
<br />
<br />
a fókusz elhagyja az elemet:<br />
<br />
onBlur<br />
<br />
<br />
<br />
megmozdul az egér (akárhol):<br />
<br />
onMouseMove<br />
<br />
<br />
<br />
a felhasználó leüt egy billentyűt:<br />
<br />
onKeyDown<br />
<br />
<br />
<br />
a felhasználó nyomva tart egy billentyűt: onKeyPress<br />
<br />
<br />
<br />
a felhasználó felenged egy billetyűt:<br />
<br />
onKeyUp<br />
<br />
Amikor egy viselkedést alkalmazunk, a Dreamweaver a HTML-kódba JavaScript kódot illeszt be. Az az elem, amely kiváltja a viselkedést, kap a tagjébe egy efféle attribútumot: onclick="MM_showHideLayers('apDiv5','','show')"<br />
<br />
Ez azt jelenti, hogy ha megkattintják (onClick) az elemet, akkor hajtsa végre az MM_showHideLayers nevű függvényt. Ez a függvény számítani fog 2 értékre, és ezeket a fenti sortól meg is kapja: a cél-elemet (apDiv5), és az elvégzendő műveletet (show = jelenítsd meg). Maga a függvény a head szekcióba kerül: <script type="text/javascript"> function MM_showHideLayers() { var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } </script><br />
<br />
Fentieken kívül a JavaScript egyébként még a következő eseményeket ismeri – ezeket csak a Kódnézetben írhatjuk át: <br />
<br />
a felhasználó megszakítja egy kép töltését: onAbort<br />
<br />
<br />
<br />
űrlapmező tartalmában változás történik:<br />
<br />
onChange<br />
<br />
<br />
<br />
a felhasználó ráhúz valamit egy elemre:<br />
<br />
onDragDrop<br />
<br />
<br />
<br />
egy dokumentum vagy kép töltése hibát okoz: onError<br />
<br />
<br />
<br />
a böngésző letöltötte az elemet (gyakran a body elemen áll, tehát ez esetben a lap letöltődése): onLoad<br />
<br />
<br />
<br />
a felhasználó vagy egy szkript elmozdít egy ablakot:<br />
<br />
onMove<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<br />
<br />
a felhasználó visszaállít egy űrlapot:<br />
<br />
<br />
<br />
a felhasználó vagy egy szkript átméretez egy ablakot: onResize<br />
<br />
<br />
<br />
a felhasználó kijelöl egy szövegterületet:<br />
<br />
onSelect<br />
<br />
<br />
<br />
a felhasználó elküld egy űrlapot:<br />
<br />
onSubmit<br />
<br />
<br />
<br />
a felhasználó bezár egy dokumentumot:<br />
<br />
onUnload<br />
<br />
onReset<br />
<br />
Az alábbi felsorolás mutatja, hogy melyik HTML-elem milyen eseményekre reagálhat: <br />
<br />
area<br />
<br />
onDblClick(), onMouseOut(), onMouseOver()<br />
<br />
<br />
<br />
button<br />
<br />
onBlur(), onClick(), onFocus(), onMousedown(), onMouseup()<br />
<br />
<br />
<br />
checkbox<br />
<br />
onBlur(), onClick(), onFocus()<br />
<br />
<br />
<br />
document<br />
<br />
onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseUp()<br />
<br />
<br />
<br />
fileupload<br />
<br />
onBlur(), onChange(), onFocus()<br />
<br />
<br />
<br />
form<br />
<br />
onReset(), onSubmit()<br />
<br />
<br />
<br />
frame<br />
<br />
onBlur(), onDragDrop(), onError(), onFocus(), onLoad(), onMove(), onResize(), onUnload()<br />
<br />
<br />
<br />
image<br />
<br />
onAbort(), onError(), onKeyDown(), onKeyPress(), onKeyUp(), onLoad()<br />
<br />
<br />
<br />
layer<br />
<br />
onMouseOver(), onMouseOut(), onLoad(), onFocus(), onBlur()<br />
<br />
<br />
<br />
link<br />
<br />
onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseOut(), onMouseUp(), onMouseOver()<br />
<br />
<br />
<br />
password<br />
<br />
onBlur(), onFocus()<br />
<br />
<br />
<br />
radio<br />
<br />
onBlur(), onClick(), onFocus()<br />
<br />
<br />
<br />
reset<br />
<br />
onBlur(), onClick(), onFocus()<br />
<br />
<br />
<br />
select<br />
<br />
onBlur(), onChange(), onFocus()<br />
<br />
<br />
<br />
submit<br />
<br />
onBlur(), onClick(), onFocus()<br />
<br />
<br />
<br />
text<br />
<br />
onBlur(), onChange(), onFocus(), onSelect()<br />
<br />
<br />
<br />
textarea<br />
<br />
onBlur(), onChange(), onFocus(), onKeyDown(), onKeyPress(), onKeyUp(), onSelect()<br />
<br />
<br />
<br />
window<br />
<br />
onBlur(), onDragDrop(), onError(), onFocus(), onLoad(), onMove(), onResize(), onUnload()<br />
<br />
6.3. Spryok A Spryok JavaScript-meghajtású, interaktív elemek: XML-állománykezelő elemek, érvényesített űrlapelemek, menüsorok, kartotékszerű és kihúzható paletták, gyorsinfók.<br />
<br />
6.3.1. XML-elemek Az XML adatok strukturált tárolására szolgáló kijelölő nyelv. JavaScripttel, ActionScripttel vagy PHP-vel írt programok képesek kiolvasni az adatokat XML-állományokból. Az XML emberek számára is értelmezhető, szerkesztése avatatlan felhasználókra is rábízható, így némi dinamizmust ad a weboldalnak. A sorban legelső gomb hívja fel a Spry Data Set párbeszédablakot. Ez intézi a külső XML- (vagy akár HTML-) állományok adatainak beillesztését. A párbeszédablak első lapján kiválaszthatjuk azt a file-t, amelyben az adatokat tároljuk. Itt azt is meg kell adni, hogy az adatállomány melyik eleme legyen a gyökérelem. A ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
második lapon megadhatjuk az egyes adatoszlopok értékeinek adattípusát, és hogy legyen –e rendezés, ill. mely oszlop alapján történjen. Rendelkezhetünk a dupla rekordok kiszűrése és a caching (gyorsítótárazás) felől is. A harmadik lapon kiválaszthatjuk a layoutot (válasszuk most a kétoszlopos (master / detail) layoutot), és a Set Up gombokkal elrejthetünk ill. hozzáadhatunk adatsorokat. Egy kattintás a Done-ra, mentés, és a SpryAssets mappában 2 JS és 1 CSS is elmentődik. Az eredmény egy egyszerű interaktív „adatbáziskezelő”, melynek rekordjait az XML-ben bővíthetjük:<br />
<br />
Ennek az adatbáziskezelőnek hátránya, hogy jelenleg (2012 tél) átalakítás nélkül nem működik Chrome-ban.<br />
<br />
6.3.2. Érvényesítő űrlapelemek Ezek megegyeznek az Insert paletta / Forms fülének Spry-elemeivel, amelyeket a 3.11. fejezet tárgyal.<br />
<br />
6.3.3. Interaktív tartalomstrukturáló elemek Menu Bar Vízszintes vagy függőleges legördülő menüt illeszt be. Kattintsuk meg a Spry Menu Bar gombot és válasszuk a vízszintes menüsort – a Dreamweaver minden további nélkül be is illeszti. A menüpontok neveit ezután a tulajdonság palettán lehet megadni. A navigáció legfeljebb háromszintes lehet: a főmenüpontok 1-1 almenüt nyithatnak fel, melyek rendelkezhetnek még egy további almenüvel.<br />
<br />
A baloldali szövegmezőben nevet adhatunk a menünek, ez a név nem tartalmazhat ékezetes és speciális karaktereket. Kattintsunk bele a főmenübe és nevezzük át a menüpontokat a Text mezőben pl. Bemutatkozásra, Termékekre és hasonlókra. Új menüpontot a + gombbal hozhatunk létre, meglévőt a – gombbal tudunk törölni. A nyílgombokkal a sorrend változtatható.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Amelyik főmenüpont ki van jelölve (az ábrán a Bemutatkozás), annak az alpontjait látjuk a második szövegdobozban. A hivatkozási célokat a Link mezőben lehet megadni. A Target mező a megnyíló lap helye (_blank = új tabben). Ha most teszteljük a dokumentumot (F12), a Dreamweaver arról tudósít, hogy el kell mentenie egy JavaScript, egy CSS és néhány GIF file-t egy SpryAssets nevű mappába. Hadd tegye. Amikor weboldalunkat publikáljuk, ezt a HTML-lel együtt fel kell majd tölteni a szerverre. Ha ebben a formában kissé unalmasnak találjuk a menüt, változtassuk meg a CSS-szabályokat a jópár elemmel bővült CSS-palettán:<br />
<br />
Ha meg akarjuk növelni egy HTML-dokumentum tartalmát úgy, hogy az egyes fejezetek (pl. termékek, szolgáltatások, infók, stb.) között gyorsan lehessen navigálni, akkor hasznos lehet Tabbed Panels, az Accordion vagy a Collapsible Panel widget:<br />
<br />
Tabbed Panels Kartotékokként böngészhető paneleket hoz létre. Illesszük be a widgetet és cseréljük ki a Content 1, Content 2 bekezdéseket ill. a Tab 1, Tab 2 címeket saját tartalmainkra. Ha több ilyen kartoték kell, kattintsunk a kék Spry Tabbed Panels feliratra, és adjunk hozzá újakat a Properties palettán a + gombbal. A kartotékfüleken megjelenő szemmel lehet megadni, hogy a munkafelületen melyik látszódjék, azaz legyen szerkeszthető. A Default panel határozza meg, melyik kartoték legyen "elől", tehát letöltődéskor olvasható.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Accordion Olyan paneleket hoz létre, melyek között a vízszintes sáv megkattintásával tud váltani a felhasználó. Ha több ilyen panel kell, kattintsunk a kék Spry Accordion feliratra, és adjunk hozzá újakat a Properties palettán a + gombbal.<br />
<br />
Collapsible Panel Hasonló az Accordionhöz, de csak egy panelt tartalmazhat, melynek két állapota lehetséges: nyitva vagy csukva. Alaphelyzetben nyitva van; ha a felhasználó becukja, az alatta lévő tartalmak feljebb kerülnek.<br />
<br />
Tooltip A Spry Tooltippel olyan tooltipeket (eszköztippeket) készíthetünk, mint amilyet a title="" attribútum ad bármilyen elemnek. A különbség az, hogy a Spry Tooltip tetszőlegesen formázható CSS-sel, lévén hogy osztálynevével (tooltipContent) megcímezhető. Az interneten ilyesmivel szokás segíteni a weboldalak használatát, vagy magyarázatot adni kifejezésekre. Horizontal ill. Vertical offset: vízszintes ill. függőleges távolság pixelben, Show ill. Hide delay: megjelenítés ill. eltüntetés késése ms-ban, Blind: roló-effekt, Fade: áttűnés, Follow: egér követése, Hide: eltüntetés egér lehúzásakor.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A Spryhoz hasonló, de annál sokkal teljesebb JavaScriptes keretrendszer a jQuery. A http://jqueryui.com/ webcímről ingyenesen letölthető több tucat User Interface elem, amelyek külseje a ThemeRoller CSSkeretrendszerrel egységesen testreszabható.<br />
<br />
6.4. Snippets (Fecnik) A fecnik olyan HTML és JavaScript kódrészletek, amelyek gyakran kellhetnek a munka során. Ismételt begépelésük, de még másolgatásuk is körülményesebb lenne, mint rákeresni ebben a könyvtárban és beilleszteni. Aktiváljuk a Window menüben a Snippets palettát. Itt vannak a névvel és leírással ellátott kódrészletek mappákba rendezve. Kattintásra az adott kódrészlet megtekinthető az előnézetben (ahogy a File-ok és az Assetek is). Duplakattintásra bekerül a HTML-be, oda, ahol legutóbb volt a kurzor.<br />
<br />
Comments (Kommentárok) <br />
<br />
Ebben a mappában olyan kommentárok vannak, amelyek tartalma csak bizonyos böngészőkben aktiválódik (ezt a technikát hívják browser sniffingnek).<br />
<br />
Footers (Lábrészek) <br />
<br />
A mappa elemei lábjegyzeteket generálnak, linkekkel és Copyright-szöveggel.<br />
<br />
Form Elements (Űrlapelemek) <br />
<br />
A Dropdown Menus almappa fecnijei űrlapokban használatos évszámkiválasztókat illesztenek be, pl. 1900-tól 2012-ig.<br />
<br />
<br />
<br />
A Close Window Button olyan gombot illeszt be, ami becsukja az aktuális tabet.<br />
<br />
JavaScript A JavaScriptes fecnikből a legtöbb esetben hiányzik a <script type="text/javascript"></script> kijelölés, de ez is megtalálható a starter script almappában. Vannak olyan fecnik, amelyek rá vannak utalva más fecnikre – ezekről kommentár tudósít, pl: // * Dependencies * // this function requires the following snippets: // JavaScript/Randomizers/randomNumber ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
// JavaScript/conversions/base_conversion/decToHex<br />
<br />
Ilyenkor a nevezett fecniket is be kell szúrni – olyan függvényeket tartalmaznak, amire az első fecni számít. <br />
<br />
Az area calculations almappában olyan geometriai függvények találhatók, mint a kör, a négyzet, a háromszög területének vagy a gömb térfogatának kiszámítása.<br />
<br />
<br />
<br />
A browser functions almappában lévő függvények visszaadják a böngésző vagy az oprendszer nevét, verziószámát, kinyomtatják a lapot.<br />
<br />
<br />
<br />
A conversions almappában matematikai és fizikai átváltási képletek vannak.<br />
<br />
<br />
<br />
A cookies almappa elemeivel sütiket lehet írni és olvasni.<br />
<br />
<br />
<br />
A date hozzárendeli a számokhoz az angol sorszámnevek ragját.<br />
<br />
<br />
<br />
A dialogs almappa szkriptjei figyelmeztető, visszaigazolandó, üzenet- vagy felszólító-popupot generálnak, melyekbe tetszőleges tartalom írható.<br />
<br />
<br />
<br />
Az images almappa elemei véletlenképet dobnak be a dokumentumba, képeket töltenek le a háttérben a kliens gépére, képeket váltogatnak önműködően. Ezek mindegyikének feltétele, hogy a képek elérési útját adjuk meg egy tömbben.<br />
<br />
<br />
<br />
A randomizers mappában véletlen háttérszínt és véletlenszámokat generáló szkriptek vannak. A véletlenszám-generátor olyan fecni, amelyre több másik is épít.<br />
<br />
<br />
<br />
A sort almappa fecnije tömbök ábécés vagy numerikus rendezését végzi.<br />
<br />
<br />
<br />
A starter script almappában vannak a legelemibb fecnik minden JavaScript beillesztéséhez.<br />
<br />
<br />
<br />
A string manipulations fecnijei a karakterláncok konvertálását végzik: o<br />
<br />
minden betű nagybetűssé tétele<br />
<br />
o<br />
<br />
minden szó első betűjének megnövelése<br />
<br />
o<br />
<br />
karaterlánc keresése<br />
<br />
o<br />
<br />
szavak megszámlálása karakterláncban<br />
<br />
o<br />
<br />
karakterlánc URL-konformmá alakítása<br />
<br />
o<br />
<br />
URL normál szöveggé alakítása<br />
<br />
o<br />
<br />
annak megállapítása, hogy egy karakterlánc szám -e<br />
<br />
o<br />
<br />
annak megállapítása, hogy egy karakterlánc lebegőpontos szám -e<br />
<br />
o<br />
<br />
annak megállapítása, hogy egy karakterlánc egész szám -e<br />
<br />
o<br />
<br />
minden betű kisbetűssé tétele<br />
<br />
o<br />
<br />
annak megállapítása, hogy egy karakterlánc karaktereinek száma kisebb –e egy értéknél<br />
<br />
o<br />
<br />
annak megállapítása, hogy egy karakterlánc karaktereinek száma nagyobb –e egy értéknél<br />
<br />
o<br />
<br />
annak igazolása, hogy egy karakterlánc nem tartalmaz számot<br />
<br />
o<br />
<br />
szám konverziója karakterlánccá<br />
<br />
o<br />
<br />
annak igazolása, hogy egy karakterlánc csak számokat tartalmaz<br />
<br />
o<br />
<br />
több egymás melletti szóköz összevonása egyetlen szóközzé<br />
<br />
o<br />
<br />
szóközök eltávolítása a karakterlánc elejéről és / vagy végéről<br />
<br />
o<br />
<br />
adott karakter valamennyi példányának cseréje másik karakterre<br />
<br />
o<br />
<br />
karakterlánc hosszának megállapítása<br />
<br />
o<br />
<br />
számmal kezdődő karakterlánc konverziója lebegőpontos számmá<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
o<br />
<br />
számmal kezdődő karakterlánc konverziója egész számmá<br />
<br />
o<br />
<br />
adott intervallumonként sortörést illeszt be a karakterláncba<br />
<br />
Meta <br />
<br />
A mappa elemeivel a gyorsítótárazást beállító pragma és az Internet Explorer későbbi verzióit az aktuális verzió szerinti renderelésre kényszerítő X-UA-Compatible meta-tageket lehet beilleszteni.<br />
<br />
Navigation (Navigáció) <br />
<br />
A Breadcrumbs (kenyérmorzsák) az aktuális lap elérési útját tüntetik fel az oldal hierarchiájában, melynek mindegyik szintje megkattintható link.<br />
<br />
Text (Szöveg) <br />
<br />
A Service Mark a felső indexbe tett sm rövidítést illeszti be.<br />
<br />
Legacy (örökség) <br />
<br />
Elavult fecnik múzeuma.<br />
<br />
Egyéni fecnik Fecniket magunk is létrehozhatunk, ha a Kódnézetben kijelölünk egy kódrészletet, jobb kattintás / Create New Snippet parancsot. A munkát a fecnik akkor gyorsítják meg igazán, ha pregnáns neveket adunk nekik, és a könyvtárstruktúrát is rendben tartjuk. Ehhez a Snippets paletta alján, de a kontextus menüben is megtaláljuk a szokott file-kezelő parancsokat (új mappa, új fecni, szerkesztés, átnevezés törlés). Ha használjuk a fecniket, a Dreamweaver vagy a Creative Suite újra- vagy áttelepítése esetén ki kell őket mentenünk a C:/Program Files (x86)/Adobe/Adobe Dreamweaver CS6/configuration/Snippets/ mappából.<br />
<br />
6.5. Webalkalmazások beillesztése a Widget Browserrel Nyissuk meg az Adobe Widget Browser alkalmazást a Start menüből. Ez megjeleníti a – részben a DWcsapat, részben más fejlesztőcsapatok által készített – widgeteknek is nevezett webalkalmazásokat.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<br />
<br />
animációs legördülő menük, kartoték-és harmonika-panelek, eszköztippek<br />
<br />
<br />
<br />
űrlapelemek, pl. dátumválasztó naptár, színválasztó jelszóerősség-mérő<br />
<br />
<br />
<br />
TinyMCE szövegszerkesztő<br />
<br />
<br />
<br />
adattábla- és diagram-generátorok<br />
<br />
<br />
<br />
lightboxok, slideshow-k, képnagyítók, HTML5 videolejátszó, YouTube lejátszó<br />
<br />
<br />
<br />
közösségi médiumok Tetszik és Megosztás gombjai, Twitter-Feed widget<br />
<br />
<br />
<br />
hírcsatorna-megjelenítő, időjárás-kijelző<br />
<br />
<br />
<br />
Google Maps<br />
<br />
Ha valamelyik felkelti érdeklődésünket, kattintásra meg lehet nézni a részleteit és a demóját. Legkésőbb ekkor meg kell adnunk Adobe ID-nket és jelszavunkat. A kiválasztottat az Add to My Widgets gombbal lehet letölteni, ami így megjelenik a My Widgets lapon.<br />
<br />
6.6. jQuery Visualize diagramvarázsló Töltsük le a jQuery Visualize-ot, és az adatlapján tekintsük meg az előnézetét (Preview). Kattintsuk meg az oldalsáv (Developer Presets) menüpontjait: ezzel ki tudjuk választani a legmegfelelőbb diagramtípust:<br />
<br />
A widget azonnal rendelkezésre áll a DW-ben; kattintsuk meg a Widget gombot az Insert / Common palettán, és adjuk meg a widgetet (jQuery Visualize) és a diagramtípust (pl. Dark Metropolitan). Rögvest beillesztődik egy táblázat mintaértékekkel. Mentsük el a dokumentumot (a vele összefüggő 7 JS- és CSSdokumentum a Google Code webhelyén van, de onnan akár le is menthető).<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Váltsunk Live-nézetre, hogy lássuk a diagramot is, írjuk át az értékeket, és F5-tel frissítgessük az előnézetet. A táblázat sorait akár bővíthetjük is; ebben az esetben a <head>-ben elhelyezett függvényben korrigálhatjuk kell a szélességét is.<br />
<br />
6.7. Videó beágyazása HTML5-be Sok mobileszköz (köztük az iPhone és az iPad) nem támogatja a Flash-technológiát, de a HTML5 <video> tagjét képesek értelmezni. Ennek platform-független használatát könnyíti meg pl. a nyílt forráskódú és ingyenes FryPlayer, melyet letölthetünk a hálóról.<br />
<br />
A <head>-ben láthatók a lejátszó működéséhez és kinézetéhez szükséges szkriptek és stíluslapok (részben ez is jQuery). Az alsó, közvetlen scriptben beállíthatjuk az ezen a lapon futó videó(k) hangerejét, szélességét, magasságát, és hogy világos (light), vagy sötét (dark) sablont (skin) szeretnénk. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A dokumentumba helyezett CSS-sel beállíthatjuk a lap videójának (videóinak) igazítását; itt: centírozott. A <video> tag poster="" attribútumával megadhatjuk a bélyegkép elérését, de ha ez nincs kitötve, a FryPlayer az első képkockát veszi bélyegképül. Mivel platformonként változó, hogy melyik videó-formátum élvez támogatást, a 3 <source> tag a videó 3 különböző formátumú változatának elérését tartalmazza. <br />
<br />
A WEBM egy nyílt formátum, amit a Mozilla, az Opera, az Adobe és a Google támogat.<br />
<br />
<br />
<br />
Az MP4 vagy M4V (MPEG4) az Apple MOV formátumán alapszik, de támogatottsága igen széles.<br />
<br />
<br />
<br />
Az OGV vagy OGG (Ogg Vorbis) egy szabad konténerformátum multimédia-állományok mentéséhez.<br />
<br />
Az elérési utakat természetesen módosítanunk kell. Videóinkat ingyenesen pl. az online-convert.com oldalon konvertálhatjuk valamennyi fent nevezett formátumba (és FLV-be is).<br />
<br />
7. Egyéni site-sablonok (Templates) Ha már egy ideje weboldalakat készítünk a Dreamweaverrel, talán már unjuk, hogy mindig, amikor egy minden lapon azonos részt módosítani szeretnénk, a CTRL-F-fel rá kell keresnünk, hogy az összes lapon felülírjuk. A sablonok (Template-ek) olyan HTML-állományok, amelyeket mindenütt azonos és laponként változó részekre oszthatunk fel. A mindenütt azonos részek jellemzően a fejléc, a fő navigáció és a footer. A laponként változó részek jellemzően a HTML-fejléc <title> és <meta> elemei és a tartalmi konténerek. Ha átszerkesztjük a sablont, valamennyi ebből létrehozott lap frissül. Ha már kialakult a weboldal lapjainak szerkezete, el kell távolítanunk belőle minden olyan tartalmat, ami laponként változhat. Befoglaló konténereiket azonban nem. Ezeket az Insert / Template Objects / Editable Region paranccsal deklaráljuk szerkeszthető területekként. A DW beilleszt egy kommentárt: <!--TemplateBeginEditable name="EditRegion1"-->EditRegion1<!--TemplateEndEditable--><br />
<br />
A böngészők a kikommentelt részeket figyelmen kívül hagyják, de a DW olyan területként fogja értelmezni, amit akkor is békén kell hagyni, ha a sablont megváltoztatják. Az ismétlődő részeket és kommentárokat tartalmazó lapot a Save as Template… paranccsal menthetjük el .dwt kiterjesztésű sablonként. Mentéskor a sablont egy bizonyos site-hoz kell rendelnünk. A sablonból a New / Page from Template dialógussal hozhatunk létre HTML-lapokat. Ezekbe a HTML-ekbe a DW automatikusan „szerkeszthetőnek” deklarálja a <title> és <meta> elemeket: <!-- InstanceBeginEditable name="doctitle" --> <title>Jummy – Étterem a város szívében
A zárolt területeket sem a Design, sem a Code nézetben nem lehet átszerkeszteni (legalábbis nem Dreamweaverben). A File / New / Page from Template dialógussal egymás után létrehozzuk lapjainkat, beillesztjük a tartalmakat, és elmentjük őket mint HTML-eket. Előbb-utóbb el fog jönni a perc, amikor úgy döntünk, a sablon módosításra szorul: pl. megváltozik a fejlécben szereplő logó mérete, további linkek kellenek a
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html
lábrészbe, és így tovább. Ilyenkor megnyitjuk a .dwt-t, átszerkesztjük, majd elmentjük. Mentéskor a DW megkérdezi, hogy aktualizálja -e az ezen alapuló lapokat, amit azután meg is tesz. A sablonokban olyan ismétlődő területeket is meg lehet határozni, mint pl. egy cikk a hozzátartozó képpel. Jelöljük ki az ismétlendő kódot, és válasszuk az Insert / Template Objects / Repeating Region parancsot. A DW a következő kommentárokkal üzen magának:
Ez után ki kell jelölnünk a benne cserélendő tartalmat: pl. a cikk szövegét tartalmazó
és
tageket és a kép forrását. Az Insert / Template Objects / Editable Region paranccsal szerkeszthetővé tesszük őket. Amikor létrehozunk egy lapot a sablonból, az ismétlendő területek felett megjelenik négy ikon:
+-
.
A plusz-ikonnal a területnek – cikknek – újabb példányait hozhatjuk létre, melyek egymás után fognak állni. A mínusz-ikon törli a példányt. A lefelé és felfelé mutató nyilakkal a példányok sorrendje változtatható. Az ismétlődő területet – hogy a példánál maradjunk: a képes cikket – még könyvtárelemmé is alakíthatjuk. A könyvtár az Asset paletta könyv ikonjával érhető el. Új könyvtárelem mentéséhez ki kell jelölni a kódot és megkattintani az Assets paletta alsó New Library Item gombját. A könyvtárelemet ezután bármelyik HTMLdokumentumba beilleszthetjük drag’n’droppal, csakúgy, mint egy fecnit. A különbség a fecnikkel szemben annyi, hogy ha könyvtárelemet szerkesztünk át, annak a site-on belüli összes példánya frissülni fog. Ez a
kommentároknak köszönhető. A szerkesztést az Assets palettán duplakattintással vagy az Edit gombbal kezdeményezhetjük.
8. Weboldal tesztelése és közzététele 8.1. Adobe BrowserLab Az Adobe BrowserLab screenshotokat készít a weblapról mindegyik elterjedt böngészőben. A Window / Extensions / Adobe BrowserLab palettán kattintsuk meg a Preview gombot. Megnyílik a böngészőnk, amelyben be kell lépni az Adobe ID-vel. A fekete sáv bal oldalán elhelyezett legördülővel megnézhetjük, hogyan néz ki a weblap a legelterjedtebb böngészők elmúlt években megjelent verzióiban – úgy Windowson, mint Macen (tehát a Mac-felhasználók is ellenőrizhetik weblapjaikat Internet Exporerben). Az előnézet vonalzókkal és segédvonalakkal is szolgál, hogy megállapítsuk az esetleges eltérések mértékét. Két előnézet egymás mellett, sőt egymásra helyezve (áttetszően) is összehasonlítható. A CTRL-SHIFT-F12-vel még gyorsabban elküldhetjük weblapunkat a böngészőlaborba. Az Adobe Edge Inspect megmutatja, hogyan néz ki a weblap mobil böngészőkben.
8.2. W3C-érvényesítő (Validation)
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html
A validálás (érvényesítés) lényegében annyit jelent, hogy ellenőrizzük, hogy a dokumentum megfelel-e az adott nyelv szabályainak. Maga a W3C a http://validator.w3.org/ címen tartja online Validatorét: A szoftver ellenőrzi a világhálón található vagy feltöltött dokumentum helyességét a benne deklarált dokumentumtípusnak (DOCTYPE) megfelelően. Noha a böngészők toleranciája miatt a hibás dokumentumok is elműködnek (sőt, pl. a Google főoldalán is 28 - 37 hibát szokott találni a W3C-Validator), a szabványos kód valamennyire a minőségi webdesign ismérve az iparágban. Ha DW-t használunk, elég a Properties alatti kartotékok közül a harmadikra kattintani. Az ellenőrzés a zöld nyíl / Validate Current document paranccsal indítható el; a nyelv a Settings…-zel érhető el (vagy az Edit / Preferences / W3C Validator-rel).
8.3. Böngésző-inkompatibilitási problémák (Browser Compatibility) Ha megnyitottunk egy dokumentumot, a Browser Compatibility zöld nyilával nyissuk meg a Settings… dialógust. Ebben megadhatjuk, mely böngészők problémái érdekelhetnek minket. Az Internet Explorer 6. verziója ma már (2012 tél) kevéssé érdekes, ezért az IE verziószámát megemelhetjük 7-re. A Netscape pedig a múlté, ezért deaktiválhatjuk. Az ellenőrzést a Check Browser Compatibility paranccsal futtathatjuk le.
A bal oldalon felsorolt problémák a jobb oldalon vannak bővebben elmagyarázva. A múltban sok problémát okozott az Explorer sajátságos felfogása a doboz-modellről – ma már ezzel nem kell törődnünk.
8.4. Link-ellenőrző (Link Checker) Hibás linkek keletkezhetnek, ha egy belinkelt file-t törlünk, átnevezünk vagy áthelyezünk. A DW Files palettája minden ilyen műveletnél figyelmeztetést ad, de az oprendszeri Intézőben végzett file-kezelési műveleteknél nincs ott, hogy szóljon. Hibalehetőséget rejt magában minden külső tárhelyre mutató link is, ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html
hiszen semmi garancia nincs arra, hogy évekkel később is ott lesz a belinkelt dokumentum. A halott linkek ellenőrzése akkor is hasznos lehet, ha idegen weboldalt importálunk DW-be. A Link Checker paletta Show legördülőjével kiválasztható, hogy a belső (Broken) vagy külső linkeket (External) szeretnénk ellenőrizni. Az Orphaned Files listázza azokat a site-on belüli dokumentumokat, amelyekre nem mutat egy hivatkozás sem. A zöld nyíl legördülőjében megadható a keresés helye: az aktuális dokumentum (Current), a teljes site (Entire Site) vagy a Files palettán kijelölt file-ok (Selected Files).
A bal oldalon listázott állománynevekre duplán kattintva a rossz linkre navigálhatunk, de a jobb oldali hivatkozásra kattintva közvetlenül is átírhatjuk a célt.
8.5. Weboldal-jelentés (Site Reports) Ellenőrzi az aktuális dokumentumot / lokális site-ot / Files palettán kijelölt file-okat:
kombinálható tagek összevonása
képek hiányzó alt attribútuma
feleslegesen kombinált tagek
eltávolítható üres tagek
kitöltetlen tagek<br />
<br />
A Run lefuttatja az analízist, megjelenik a hibás dokumentumok felsorolása a hiba pontos helyével. Ezekre duplán kattintva a probléma gyorsan orvosolható. Nem minden figyelmeztetés hiba. Előfordulhat pl. hogy egy dokumentumba üres <div>-ek kellenek, amelyeket CSS tölt meg háttérképpel.<br />
<br />
8.6. Weboldal közzététele Ha a Site-kezelőben beállítottuk egy tárhely-elérést (2.3 fejezet), és megadtuk felhasználónevünket és jelszavunkat, a beépített FTP-kliensben kapcsolatot kell létesítenünk (Connect gomb) és kezdhetjük az<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
állományok fel- ill. letöltését. Ha a jobb oldali lokális állományok közül egyet vagy többet kijelölünk, drag’n’droppal vagy a kék put-gombbal feltölthetjük a tárhelyre.<br />
<br />
Ilyenkor előfordul, hogy a DW megkérdezi: Put dependent files? (Töltsük fel a függő állományokat is?) Ezzel a HTML-lapokkal összeüggő CSS- és JS állományokra céloz. Ha ezek is változtak, válaszoljunk Igennel. Minden FTP-n keresztül történt (vagy meghiúsult) művelet dokumentálódik az FTP Log palettán, amit a View Site FTP Log gombbal hívhatunk fel:<br />
<br />
Ha az Intézőnkben változtattunk állományokon, frissíteni kell a nézetet az F5 billentyűvel, vagy a Refresh gombbal. Ha többen dolgoznak a site-on (pl. a webszerkesztőn (webdesigneren) kívül még egy PHP-JavaScriptprogramozó), időnként le kell töltenünk módosított állományaikat. Hogy mikor módosult utoljára a file, könnyen leolvasható a Modified oszlopban. Ilyenkor érdekes lehet még a Synchronize gomb, ami a két könyvtárat összefésüli. A megjelenő dialógus rákérdez, hogy <br />
<br />
az új állományokat áttöltse –e a másik helyre,<br />
<br />
<br />
<br />
és / vagy a mindkét helyen melévő azonos nevű file-ok közül felülírja –e az újabb keletűvel a régebbit.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
9. A Főmenü 9.1. A File menü Mivel a file-kezelő menü minden szoftverben megtalálható, itt csak néhány extrára térünk ki. A Browse in Bridge… az Adobe saját file-kezelőjét nyitja meg. Ennek egyetlen előnye, hogy le tud játszani néhány olyan file-típust, amit az oprendszeri kezelők (Intéző, Finder) nem. A Bridge hátránya, hogy viszonylag lassan indul el, és sok RAM-ot elfogyaszt. Az Open Recent almenüvel gyorsan megnyitható az utolsó 10 file. Az Import és Export parancsaival Microsoft DOC- és XLS-tartalmak illeszthetők a weblapba, ill. a kijelölt táblázatok XLS-be exportálhatók. A Check Page almenüvel ellenőrizhetők a kompatibilitási problémák, a hasznos tartalom helyesírása, és a linkek (hogy vezetnek –e valahová). A Validate parancsai az adott formátum szabályai szerint ellenőrzik a dokumentumot. Az eredmény az alsó Validation panelen jelenik meg. A Compare with Remote Server a file-ok lokális és szerverre feltötött változatait hasonlítja össze, de ehhez egy külső szoftverre van szükség (FileMerge, BBEdit vagy TextWrangler). A Design Notes… a file-ok megnyitásakor kis panelben jelenít meg kommentárokat, vagy a webszerkesztők egymáshoz intézett üzeneteit.<br />
<br />
9.2. Az Edit (szerkesztés) menü Az általános szerkesztési parancsokon kívül a következőket tartalmazza: Select Parent Tag: az aktuális tag szülejének kiválasztása. Select Child: elvileg az aktuális tag gyermekelemeinek kiválasztása. Find & Replace: felhívja a Keresés & Csere párbeszédablakot. Find Selection: ha kijelöltünk egy szót, ezzel a paranccsal, vagy inkább a SHIFT-F3-mal végiglépkedhetünk a lapon, majd a site többi lapján szereplő összes példányán. Végignézhetjük vele pl. az összes <h2>-taget, amikor keresőkre optimalizáljuk az oldalt. Goto Line: ugorj a megadott sorra. Show ill. Refresh Code Hints: az aktuális elem (tag, attribútum vagy érték) kódtippjeit mutatja ill. frissíti. A CTRL-SPACE ill. CTRL-. billentyűkombik praktikusabbak.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Code Hint Tools: a különböző kódtippek (szín-, URL- és betűtípusválasztó, azonosító-, név-, HTML-tag- és osztálylista) azonnali megjelenítése. Indent / Outdent Code: kódsor behúzása. Balance Braces: zárójelek kiegyensúlyozása. Repeating Entries almenü: ismétlődő rekordok kezelésével kapcsolatos parancsok. Code Collapse almenü: kódsorok elrejtésével kapcsolatos parancsok. Edit with External Editor: kód megnyitása külső (a Preferencesben megadott) szerkesztőben. Tag Libraries: tagkönyvtár megnyitása (ebben módosítható a kódtippek listája). Keyboard Shortcuts: alapértelmezett gyorsbillentyűk megváltoztatása. Preferences: Beállítások párbeszédablak.<br />
<br />
9.3. A Beállítások (Preferences) párbeszédablak A Beállítások párbeszédablakban szabható testre szerkesztőszoftverünk működése. Macen Dreamweaver / Preferences vagy CMD-U, Windowson Edit / Preferences vagy CTRL-U.<br />
<br />
Általános (General)<br />
<br />
Itt állíthatók be az olyan, dokumentumokkal kapcsolatos opciók, mint <br />
<br />
az Üdvözlőablak megjelenítése (Welcome Screen),<br />
<br />
<br />
<br />
hogy a DW indításakor megnyissa –e az utoljára megnyitott dokumentumokat (Reopen documents),<br />
<br />
<br />
<br />
figyelmeztessen –e, ha nem-írható file-t nyitunk meg,<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
<br />
<br />
hogy megjelenjenek –e az aktuális dokumentummal összekapcsolt más, CSS- és JS- dokumentumok gyorsgombjai a Kódnézet felett (Related Files),<br />
<br />
<br />
<br />
vagy hogy felkínálja –e a hivatkozások frissítését hivatkozási célok (doksik, képek) név- vagy helyváltoztatásakor (Prompt),<br />
<br />
valamint az olyan szerkesztési opciók, mint <br />
<br />
a párbeszédablak megjelenítése objektumok beágyazásakor (Show dialog),<br />
<br />
<br />
<br />
hogy megengedett legyen –e a kétbyte-os bevitel pl. kínai vagy japán nyelven gépeléskor (Enable double-byte input),<br />
<br />
<br />
<br />
hogy ha a Design nézetben egynél több szóközt ütünk be, átalakítsa –e non-breaking space-szé: (Allow),<br />
<br />
<br />
<br />
hogy szemantikai vagy stiláris tageket használjon –e a félkövér és a dőlt gomb használatakor (Use strong),<br />
<br />
<br />
<br />
és hogy figyelmeztessen –e, ha szerkeszthető területeket helyezünk el <p> vagy <h1-6> tagekben (Warn when placing editable regions).<br />
<br />
A Maximum number of history steps a maximálisan visszavonható lépések száma (alacsonyabb érték kíméli a RAM-ot). A Spelling dictionary-ben megadható a helyesírás-ellenőrzés nyelve – ezt átállíthatjuk magyarra. A szöveges tartalom helyesírás-ellenőrzése a Commands / Check Spelling menüponttal vagy a SHIFT-F7 kombinációval indítható el.<br />
<br />
Akadálymentesség (Accessibility)<br />
<br />
A felső részben minden bejelölt elem beillesztése esetén a DW olyan attribútumokra kérdez rá, amelyek a hozzáférhetőséget növelik. Ha kikattintjuk pl. az űrlapelemeket (Form objects), a DW minden teketória nélkül beilleszti őket (így textfield1, textfield2 típusú azonosítót kapnak). Ha valakinek nem célja kitölteni pl. a képek alt attribútumait, vagy később adná meg őket, itt kikattinthatja az Images jelölődobozát. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A tartsd a fókuszt a panelen megnyitáskor (Keep focus) magát a Dreamweavert teszi kijelzőfelolvasók számára hozzáférhetővé – bizony, vannak gyengénlátó, sőt vak programozók is. Nekik érdemes kikattintani az utolsó jelölőt (Offscreen rendering).<br />
<br />
Abszolút módon pozícionált <div>-ek (AP Elements) Láthatóság (Visibility), alapértelmezett szélesség, magasság, háttérszín és –kép, szülő-gyermek kapcsolat egymásba rajzolt AP-DIV-ek között (Nesting).<br />
<br />
Kódszínezés A kijelölő és programnyelvek listájából válasszuk ki pl. a CSS-t, majd kattintsunk az Edit Coloring Scheme (színséma szerkesztése) gombra.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Fent ki lehet választani, minek a színsémáját módosítanánk: a kommentárokét, a fontos! figyelmeztetését, a tulajdonságokét, a szelektorokét, a karakterláncokét, vagy az értékekét. Háttér- és betűszínt, valamint betűstílust adhatunk nekik. Az alsó ablakban látható néhány mintasor – így fog kinézni a kód a szerkesztőben. Az előnézetben is megkattinthatunk bármit, hogy kiválasszuk. Tetszés szerint kiemelhetjük azt, amit fontosnak tartunk, de ha valaki már megszokta a sztenderd beállításokat, szükségtelen variálni.<br />
<br />
Kódformázás<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Eddig is észrevehettük, hogy a DW az egymásba ágyazott tageket rendre beljebb húzza a Kódnézetben. Ha ez a rend megbomlana, a Commands / Apply Source Formatting paranccsal visszaállíthatjuk. Ezen a lapon állíthatjuk be <br />
<br />
hogy mekkora legyen a behúzás (Indent),<br />
<br />
<br />
<br />
hány karakternyit ugrasszon a tabulátor, amikor magunk végezük a behúzásokat (Tab size),<br />
<br />
<br />
<br />
a sortörés típusát (Line break),<br />
<br />
<br />
<br />
a tagek (Tag case) ill. az attribútumok és értékeik (Attribute case) alapértelmezett írásmódját (NAGYBETŰS vagy kisbetűs),<br />
<br />
<br />
<br />
hogy felülíródjanak –e a más szerkesztőből származó dokumentumok tagjei ill. attribútumai,<br />
<br />
<br />
<br />
valamint a táblázatcellák utáni sortörések kikapcsolását.<br />
<br />
A haladó beállításoknál (Advanced) a DW CSS-formázását változtathatjuk meg, vagy a tag-szótárában módosíthatjuk, hogy mely tag leütésekor mit kínáljon fel. Ha megszoktuk a DW kódformázását, utóbbiakat nincs értelme átberhálni.<br />
<br />
Kódtippek<br />
<br />
A DW lezárja a megnyitott tageket, felül lehet kiválasztani, hogy ez a </ begépelése után, vagy már a nyitó tag > karaktere után történjék. Az Engedélyezd a kódtippeket (Enable code hints) jelölőnek köszönhető, hogy pl. a tag után tett szóköz hozzáférhetővé teszi az attribútumok listáját – ez egy igen hasznos funkció. A másik jelölő aktiválja a szerkesztőben kiválasztott kódtipp leírásának megjelenítését. A Delay-jel az is beállítható, hogy ezek hány mp. elteltével jelenjenek meg. Végül a Menus felsorolásban egyenként lehet deaktiválni a tagek, attribútumok, értékek, stb. kódtippjeit.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Kódjavítás (Code Rewriting)<br />
<br />
Commands / Clean up (X)HTML párbeszédablakkal le lehet futtatni a forráskód hiáinak javítását. A Preferences / Code Rewriting lapján lehet aktiválni ennek az automatikus hibajavításnak az összetevőit, pl. hogy zárja le az érvénytelenül egymásba ágyazott vagy bezáratlan tageket (Fix invalidly nested and unclosed tags), hogy átnevezze az űrlapelemeket, amikor azokat máshonnan vesszük át (Rename form items), vagy hogy tüntesse el a záró tageket, amelyek nem lettek megnyitva (Remove extra closing tags). A negyedik jelölő (Warn when fixing) által minden hibajavításról figyelmeztetést is ad. A soha ne írd felül (Never rewrite) melletti mezőben felsorolt file-formátumokat nem bántja, ha a jelölődoboz aktiválva van (alapértelmezetten a JS, a PHP és az XML is közte van). A következő jelölődoboz révén az attribútumértékekben a különleges karakterek HTML-karakterkóddá alakulnak, pl. a < kódja: < Az utolsó rádiógomb-csoporttal megadhatjuk, hogy az URL-ekben esetleg előforduló különleges karaktereket békén hagyja, HTML-karakterkóddá vagy %-os kóddá alakítsa.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Másolás / beillesztés (Copy / Paste)<br />
<br />
Ha a Design nézetbe illesztünk be Wordből vagy egy böngésző frontendjéről másolt szöveget, az itt foglaltaktól függően a formázásait is megtarthatja: a Text only csak a szöveget tartja meg, a Text with structure az olyan struktúrákat is, mint a bekezdések, felsorolások, táblázatok, stb. A Text with structure plus basic formatting ezen felül az olyan alapvető formázásokat is, mint a félküvér vagy a dőltbetűs kiemelés, a full formatting pedig minden formázást megtart. A Retain jelölődoboz által a sortörések is megmaradnak. A Clean up a Word-féle bekezdésmargókat elhagyja. A Convert jelölő a lent-fent idézőjeleket fent-fent idézőjelekké alakítja.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
CSS-stílusok (CSS Styles)<br />
<br />
A CSS több trükköt is megenged, hogy a kód tömörebb legyen. Az egyik ilyen a tulajdonságok összevonása. Ha alapjáratban használjuk a DW valamelyik CSS-szerkesztőjét (a jobb oldali CSS Styles vagy a CSS Rule Definition palettát), akkor pl. a betűtulajdonságoknál viszonylag sok kód termelődik, pl.: font-family: Caibri, Arial, sans-serif; font-size: 18px; line-height: 24px; font-style: italic; font-weight: bold; font-variant: small-caps;<br />
<br />
Ha azonban itt bejelöljük a Font dobozát, mindjárt kevésbé lesz szószátyár: font: italic bold small-caps 18px/24px Caibri, Arial, sans-serif;<br />
<br />
6 sor helyett 1-ben is képes elmondani ugyanazt, 135 karakterből lett 65 – ami az oldalbetöltődés sebességét is javítja. Fentiek alkalmazhatók a background kezdetű tulajdonságokra (-color, -image, -repeat, -position, -attachment), a margin és a padding 4 irányára (-top, -right, -bottom, -left), a border (-width, style, -color) és a list-style pereputtyára (-image, -position, -type), valamint a színátmenetekre. Érdemes tehát e felső jelölődobozok mindegyikét aktiválni. Középen a két rádiógombbal kiválaszthatjuk, hogy akkor csinálja –e csak ezt, ha a már meglévő kód is rövidített (If original used shorthand), vagy mindig. Az alsó rádiógombokkal lehet kiválasztani, hogy a duplakattintás a jobb oldali CSS Styles-ban felsorolt valamelyik deklarációra a CSS dialógust nyissa –e meg, a Tulajdonság-palettára tegye át a fókuszt vagy a kódszerkesztő megfelelő sorát szedje elő.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
File-összehasonlítás (File Compare) A File menü / Compare with Remote Server parancsa a file-ok lokális és szerverre feltötött változatait hasonlítja össze. Az ehhez bevetett külső szoftver FileMerge, BBEdit vagy TextWrangler futtatható (.exe) állományát itt lehet kitallózni.<br />
<br />
File-típusok (File Types / Editors)<br />
<br />
Azok a file-típusok, amelyek a felső mezőben vannak, Design nézet nélkül nyílnak meg. Ha van egy másik szerkesztőnk, amelyben inkább szeretnénk ezeket megnyitni, az External code editor mellett tallózhatjuk ki. Ha ebben megváltoztatjuk a file-t, a Reload modified files legördülővel mindig / soha vagy felszólításra frissíthetjük a DW-ben. Mielőtt a DW megnyittaja a file-t a külső szerkesztővel, elmentheti a Save on launch legördülőben beállított érték szerint. A Fireworks web-optimalizált képszerkesztő szoftver elérése a következő mezőben módosítható. Az alsó két szövegdobozzal a képformátumok és az azokat megnyitó / szerkesztő szoftverek kapcsolata módosítható.<br />
<br />
Betűtípusok (Fonts) Ha lapjainknak különböző karakterkódolása van, különböző betűtípusokat használhatunk, hogy ezt reprezentáljuk. Fent ki kell választani nyelvünket vagy karakterkódolásunkat, lent pedig a Design nézetben megjelenő normál betűtípust (Proportional), a pre, code és tt tagekben használatos betűtípust (Fixed), valamint a Kódnézet betűtípusát (Code view).<br />
<br />
Highlighting Ezen a lapon testreszabható, hogyan jelenítse meg a DW a lap és az elemek különböző területeit.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Invisible Elements Itt lehet megadni, hogy a látogató számára nem megjelenő elemeket a Design nézetben jelölje –e egy kis ikon: a hivatkozási pontokat (Named anchors) (hasznos, mert rá tudjuk húzni a lasszót), a beágyazott <script>-eket, a kommentárokat, a sortöréseket (Line breaks), a hotspotokat (Image maps), a beágyazott <styles>, a rejtett űrlapmezőket (Form fields), az űrlap egészét (Form delimiter), az AP-divek helyét jelölő ikonokat (AP Elements), az align attribútumot efogadó HTML-elemek heyét (aligned elements), az olyan szerveroldali tageket, amelyeket nem lehet megjeleníteni a dokumentumablakban (Visual és Nonvisual server tags) és CSS-sel elrejtett elemeket (CSS display: none). A Show dynamic texttel beállítható, hogyan jelenjen meg az adatbázisból nyert szöveg, és a Server-side includes arra való, hogy a csatolt file tartalmai megjelenjenek az aktuális dokumentumban.<br />
<br />
New Document Itt állítható be az alapértelmezett új dokumentum szabványa, kiterjesztése és karakterkódolása. Ez a legalsó jelölődoboz deaktiválásával a CTRL-N parancsra dialógus nélkül azonnal megnyílik.<br />
<br />
Preview in Browser<br />
<br />
Itt állítható be az elsődleges (primary; gyorsbillentyűje: F12) és másodlagos (secondary; CTRL-F12) böngésző. Az Edit… gombra kattintva a promgramállományok közül ki lehet tallózni további böngészők futtatható állományát. Mivel fejlesztési célokra a Google Chrome a legalkalmasabb, érdemes ezt használni elsődleges böngészőként, másodlagosként pedig az Internet Explorert, mivel a népszerű böngészők sorából általában ez táncol ki a leginkább. Fontos, hogy rendszerünkön meglegyen még a Mozilla Firefox, de ez nem mutat nagy eltéréseket a Chrome-tól.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Site Ezen a lapon ennek elejét vehetjük a file-feltöltéssel járó macerának.<br />
<br />
Itt lehet beállítani, hogy a beépített FTP-kliens a lokális vagy a távoli állományokat mutassa (Always show legördülő) és melyik oldalon (Left / Right). Amikor a DW file-okat másol a tárhelyről lokális meghajtóra vagy fordítva, rákérdez pl. a HTML-ek esetében, hogy a vele összekapcsolt (kép-, CSS- vagy szkript-) állományokat is másolja –e. Ezt a viselkedést a két jelölődobozzal (Prompt on get ill. Prompt on put) lehet ki-bekapcsolni. A következő jelölődoboz ill. számmező állítja be, hogy a DW megszakítsa –e az FTP-kapcsolatot a megadott inaktív (le- és feltöltés nélküli) idő elteltével. Ha egy file feltöltése meghiúsul, a DW megpróbálja újra elküldeni azt, és ezt ismételgeti a következő (FTP time out) mezőben megadott ideig. Ha szerverünk lassú, pl. mert erősek a tűzfal beállításai, ezt megnövelhetjük. FTP transfer options: Ha a DW file-átvitelkor feltesz egy kérdést és nem válaszolunk rá (pl. mert nem is vagyunk a gép előtt), a következő mezőben megadott idő elteltével végrehajtja az alapértelmezett akciót. Proxy host: itt lehet megadni annak a proxy szervernek a címét és portját, amit külső szerverekkel való kapcsolódásra használunk, amikor tűzfal mögött vagyunk. A mentsd a file-t feltöltés előtt (Save files before putting) jelölőt érdemes aktiválni, így egy kattintást megspórolhatunk, amikor a forráskód változtatásai után feltöltünk egy file-t. A tégy felszólítást feltöltés előtt (Prompt before moving files on server) viszont deaktiválni kell, ha nem akarjuk kétszer elmondani, hogy töltsön fel valamit.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
W3C Validator A DW beépített érvényesítője a dokumentumukat típusuk szerint érvényesíti (validálja). Itt lehet beállítani, hogy milyen szabvány szerint érvényesítsen, ha nincs megadva a dokumentumtípus (DOCTYPE).<br />
<br />
Window Sizes Itt lehet beállítani, mely kijelzőfelbontások legyenek elérhetőek a Design nézet alsó sávjából. Ez a sáv arról is tájékoztat, mennyi idő alatt töltődne le az adott lap. A Connection Speed legördülővel beállítható az ennek alapjául vett letöltési sebesség. Manapság (2012 tél) a legtöbb háztartásban sztenderd a „25 megás internet”, de a 80 Mbps-es kapcsolat sem ritka. Az okostelefonok összeköttetése persze lassabb.<br />
<br />
9.4. A View (nézet) menü Ebben a menüben érhető el minden, a munkaterület kinézetével kapcsolatos beállítás. A felső két blokk a Design- ill. a Kódnézet váltogatásával, kettős nézet esetén elrendezésükkel kapcsolatos. A Switch Views egyikről a másik nézetre helyezi át a fókuszt. A Refresh (vagy az F5 billentyű) frissíti a nézeteket. → A Live View az élő (böngésző-szerű) előnézetet kapcsolja be; ha éppen aktív, akkor opciói is elérhetők. Ezek közt tudjuk beállítani, hogy foglalkozzon –e a JavaScriptekkel és az esetleges beágyazott pluginekkel (ezek jelenleg igen lomhán működnek). Ha a Follow Link aktiválva van, meg lehet kattintani egy linket, ha a Follow Links Coninuously van bekapcsolva, folyamatosan lehet navigálni:<br />
<br />
A Live View Browser almenü olyan böngészőparancsoknak ad helyt, mint a hátra- és előrelapozás, a honlap felhívása, az előzmények közti navigálás, a frissítés és a címsorra fókuszálás:<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Ha a Live-nézet aktív, az Inspect funkciót is használhatjuk. Haladóknak ez a funkció a Firebug népszerű böngésző-bővítményből lehet ismerős. Ha aktiváltuk az Inspectet, a weblap Design nézetén rolloverrel gyorsan megtalálható, hol van a hozzátartozó kód. A Head Content csak kikapcsolt Live-nézet mellett használható. Egy plusz sávot jelenít meg a Design nézet felett. Nagy rendszerek esetén a <head> tag igen hosszú és áttekinthetetlen is lehet. A Head Content sáv többnyire szemléletes ikonjai segítségével gyorsan megtaláljuk a dokumentum címét, karakterkészletét, az oldalleírást, a kulcsszavakat, a nyelvet, a favicont vagy más külső erőforrásokat, mint amilyenek a CSS-ek, JavaScriptek. Sorra lehet venni mindegyik, a fejlécben szereplő információt.<br />
<br />
A Noscript Content csak a Framesetek esetén értelmezhető. Az Expanded Tables Mode a gyártó elképzelése szerint könnyebbé teszi a táblázatok szerkesztését azáltal, hogy átmenetileg margókat ad a celláknak és vastag keretet a táblázatnak. A Visual Aids nem egy afrikai vírus, hanem a Design nézet kereteinek, jelöléseinek almenüje. A CSS Layout Backgrounds és a Frame Borders kivételével mindet is állandóan bekapcsolva tarthatjuk, néha az Invisible Elementset is ki kell kapcsolni, ha hiteles képet akarunk a Design nézetben, mert a láthatatlan elemek (pl. a belső hivatkozási pontok) jelölése helyet kíván, és látszólag módosíthat a layouton.<br />
<br />
A Style Rendering almenü foglalkozik a stíluslapokkal. Ha a weblapnak másképp kell kinéznie nyomtatásban, mint a kijelzőn, elkészíthetjük a stíluslapjának egy másik (kevésbé tintaigényes) verzióját. A HTML-dokumentumot ezzel a stíluslappal is összekötjük, jelezve, hogy ez a nyomtatási verzió, ezt kell használni papírra vetéskor: <link … media="print">. A Style Rendering almenü felső blokkjával a Design nézetben is megjeleníthető a weblap különböző médiumokon megjelenítendő külseje. Azaz, ha pl. a stíluslapnak megírtuk egy nyomtatási verzióját, akkor tesztelhetjük úgy is, hogy megnyitjuk a lapot egy böngészőben és kinyomtatjuk, vagy itt átkapcsolunk nyomtatási nézetre. A Handheldek a kézi eszközök, a Projection a kivetítők, a TTY (Teletype Printer) egy elavult elektromechanikus távíró, a TV-t talán nem kell lefordítani. Az Increase / Decrease / Reset Text Size olyanféle betűméret-állító, mint amilyen a böngészőknek is van, de a beágyazott képek, flashek, videók méretét nem változtatja meg.<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Amelyik aktív a Show link, visited, hover, active, focus styles közül, azt a státuszát látjuk a linkeknek (alap, meglátogatott, rollover, megkattintott, fókuszált). A Window Size (ablakméret) almenüben a Design nézet a szokványos felbontásokra csökkenthető. Azaz meg tudjuk nézni, mennyit látnának weblapunkból pl. egy kisebb telefonon. Mivel bármikor piacra kerülhet egy újfajta display (gondoljunk pl. az Apple Retinára), az Edit Sizes… menüponttal egy olyan párbeszéd ablak nyitható meg, ahol újabb felbontásokat lehet definiálni. A DW Magnification (nagyítás) eszköze nem igazán jó; mindent átméretez, de igen gyatra minőségben. Az utóbbi két almenü ki van helyezve a Design nézet alá is, ahonnan gyorsabban elérhető. A Rulers / Show megjeleníti a vonalzókat. Ezek Zoll és Centiméter osztásúak is lehetnek, persze screendesign feladatoknál a Pixel a legfontosabb mértékegység. A Grid / Show Grid meghatározott térközű rácsot jelenít meg. A Snap To Grid aktiválásával mágnesessé válik, azaz vonzani fogja a drag’n’drop módon mozgatott elemeket. A térközt a Grid / Grid Settings dialógusban lehet megadni.<br />
<br />
Képszerkesztő szoftverekből ismerős lehet az elv, hogy a vonalzókból segédvonalakat (Guides) lehet kihúzni, amelyek szintén mágnesesek. Ezeket a Guides almenüben lehet megjeleníteni / elrejteni (Show), zárolni (Lock), és mágnesességüket ki-/ bekapcsolni (Snap To).<br />
<br />
A Tracing Image (modellkép) egy olyan kép, amely alapján az új weblapot szerkeszteni kívánjuk. Ha képszerkesztő szoftverben elkészítettünk egy látványtervet, vagy egy meglévő weblapot szeretnénk lemásolni és van róla screenshotunk, a Tracing Image / Load… paranccsal lehet kitallózni. A kép félig áttetszően a háttérben segíti az arányok helyes felvételét, és a színek pipettázását; de az eredménybe nem kerül bele, nem tötődik fel a tárhelyre. A Plugins almenü elindítja a Plugineket. Ilyen pl. az animációkat lejátszó Flash Player Plugin vagy a zenejátszó Windows Media Player Plugin. A Color Icons a felhasználói felület ikonjait színezi be, ahogy az a korábbi DW verziókban volt. A Hide panels (F4) eltünteti az oldalsávot, és a Tulajdonság-palettát, hogy a weblapot teljes szélességében tekinthessük meg. A Toolbars almenü pontjai a Kódnézet körüli eszközsávokat jelenítik meg / rejtik el. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A Style Rendering a stílus almenü elemeit helyezi ki:<br />
<br />
A Document sáv a nézetválasztókat, előnézet-opciókat és a dokumentumcímet tartalmazza:<br />
<br />
A Standard a File menü általános parancsait tartalmazza (Open, Save, stb.):<br />
<br />
A Coding a Kódnézettől balra található függőleges oldalsáv. A Related Files az aktuális dokumentummal összekapcsolt más dokumentumok (CSS-ek, JS-ek) gyorsválasztója. Az Options al-almenüben lehet kiválasztani a formátumokat.<br />
<br />
A Code Navigator is a dokumentum elemei és a velük összefüggő CSS-kódsorok közti navigálást szolgálja. A Spry Tooltips a DW beépített JavaScriptes keretrendszere, a Spryok elemei körül tippeket jelenít meg.<br />
<br />
9.5. Az Insert (beillesztés) menü Ebből a menüből kezdeményezhető az elemek HTML-be illesztése. Parancsainak nagy része az Insert palettára is ki van helyezve. A menü felső blokkjával tagek, képek, képobjektumok (mint a helytartó és a váltókép), médiumok (animációk, videók, pluginek) és médialekérdezések beillesztése indítványozható. Az elem mindig oda kerül, ahol a kurzor áll (ha véletlenül épp a <head> tagben villog, a <body> első sorába). A második blokkal táblázatok, sorok, oszlopok, cellák illeszthetők be. Itt importálhatók a táblázatos szövegdokumentumok; ezek adatai természetesen HTML-tagekben landolnak. A Layout Objects almenüvel <div>-konténerek és Spryok illeszthetők be. A Form almenü pontjaival illeszthető be az összes űrlapelem. A következő blokk a linkek (külső, email és belső linkek), az aktuális dátum, más szerver-oldali erőforrások és a kommentárok beillesztését végzi. A következő blokkal beilleszthető valamennyi HTML-elem (keretek, <body> és <head>-tagek, különleges írásjelek) és a kódrészletek, továbbá itt is elmenthetők a sablonok. A következő blokkal telepíthetők a Widgetek (a DW bővítményei), és illeszthetők be a Spryok, a jQuery JavaScriptes objektumok, valamint az XML-objektumok (Data Objects).<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A Customize Favorites… párbeszédablakban lehet megadni, mely beillesztő parancsok kerüljenek az Insert paletta Favorites (kedvencek) fülére. A következő két menüt ritkábban használjuk, mert legtöbb parancsuk a CSS-szerkesztővel vagy a Tulajdonság-palettával kényelmesebben elérhető.<br />
<br />
9.6. A Modify (módosítás) menü Ebben a menüben már meglévő elemek módosításait végezhetjük el. A Page Properties… megnyitja a laptulajdonságok dialógusát (részletesen lejjebb). A Media Queries… párbeszédablakban az egyes kijelzőtípusokhoz külön stíluslapokat lehet rendelni. A Font Families… párbeszédablakban az előre definiált 13 betűcsaládhoz újabbakat lehet adni. Ezek a DW kódsegítsége és más panelekben rendelkezésre fognak állni. Az Add Web Fonts megkönnyíti a webről letöltött betűcsaládok beágyazását. Az Edit Tag… parancs felhívja a Tag Editort (tag-szerkesztő). Ebben az aktuális elem összes attribútuma leolvasható ill. megadható, és segíti az elem JavaScriptes viselkedésének programozását. Elsősorban programozók szájíze szerint való szerkesztési mód ez. A következő blokk a linkek szerkesztésének van szentelve. Lejjebb a táblázatok, képek, keretek módosítási, abszolút módon pozícionált divek rendezési és konvertálási lehetőségei.<br />
<br />
9.6.1.<br />
<br />
A Page Properties (laptulajdonságok) párbeszédablak<br />
<br />
Ez a praktikus párbeszédablak főleg kezdőknek kitűnő eszköz egy nyers HTML-dokumentum gyors megformázására. Gyorsbillentyűje a CTRL-J. Az Appereance (CSS) lapon elrendelt stílusdeklarációk a weblap fejlécébe egy <style> tagbe kerülnek: <br />
<br />
A weblap alapértelmezett betűtípusa és -stílusa (félkövér, dőlt)<br />
<br />
<br />
<br />
A weblap betűmérete és a méret mértékegysége<br />
<br />
<br />
<br />
Szövegszín meghatározása egy 256-os paletta színeiből vagy hexadecimális kóddal<br />
<br />
<br />
<br />
A <body> háttérszínének beállítása<br />
<br />
<br />
<br />
A <body> háttérképének meghatározása<br />
<br />
<br />
<br />
A <body> háttérképének ismétlése<br />
<br />
<br />
<br />
A weblap margóinak beállítása<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Az Appereance (HTML) tartalma majdnem ugyanaz, mint az előzőé, de az itt elrendeltek a <body> tag attribútumaiba kerülnek. Érdemes inkább a CSS-formázást választani, mert utána a teljes stílus kihelyezhető egy külső CSS-be.<br />
<br />
A Links (CSS) lapon a hivatkozásokat alakítja: <br />
<br />
hivatkozások betűtípusa<br />
<br />
<br />
<br />
hivatkozások betűmérete<br />
<br />
<br />
<br />
hivatkozás színei: o Link: alaphelyzet o Rollover: fölévitt egér esetében o Visited: előzőleg meglátogatott link o Active: megkattintott állapot<br />
<br />
<br />
<br />
hivatkozás aláhúzásának beállítása<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A Headings lap bal oldali mezőiben a címsor betűméretét, a jobb oldali mezőkben a színét állíthatjuk be. Be lehet adni egyéni méreteket is, de érdemes egy kb. négyzetesen növekvő méretskálával dolgozni (mint a 18, 24, 36, 48), mert nagyobb betűméretek esetén a nagyobb különbségek tűnnek csak fel, a feltűnőtlen különbségeket pedig hibaként észleli a látogató. A Title/Encoding (Cím és karakterkódolás) lap beállításai: <br />
<br />
dokumentum címe (ami a <title>-be kerül)<br />
<br />
<br />
<br />
a dokumentum-típus meghatározása<br />
<br />
<br />
<br />
a dokumentum karakterkódolása (a magyar karakterek megjelenítéséhez az ISO-8859-2 karakterkódolási szabványra van szükség)<br />
<br />
A Tracing Image (modellkép) funkciót akkor használjuk, ha előzőleg megszerkesztettük a weblap látványképét, és ezt a látványképet szeretnénk sablonként használni a design megalkotásához. A modellkép csak a DW szerkesztőfelületén jelenik meg, a böngészőkben nem. <br />
<br />
a modellkép kiválasztása<br />
<br />
<br />
<br />
a modellkép áttetszőségének beállítása<br />
<br />
9.7. A Format (formátum) menü Ez a menü kimondottan a szöveges tartalom HTML- és CSS-formázási lehetőségeit tartalmazza. Az Indent / Outdent a szövegek behúzását, ill. a listaelemek szintjének növelését, csökkentését végzi. A Paragraph Format végzia konvertálást bekezdés és címsor között. Az Align egy <div>et kanyarít a kijelölt elem köré, és ellátja az align="" attribútummal, hogy az balra, középre vagy jobbra zárt, ill. sorkizárt legyen. A List parancsaival több kijelölt bekezdést felsorolássá (rendezetlen, sorszámozott, definíciós) lehet alakítani. ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
A Style parancsai olyan HTML-tagpárokat rittyentenek, mint a <strong>, <em>, <u>, <s>, <tt>, <code>, <var>, <samp>, <kbd>, <cite>, <dfn>, <del> vagy az <ins> - ezek szemantikus kijelölések, amelyekhez formázás is tartozik. A CSS Styles a kijelölt taget a meglévő CSS-osztályokhoz rendeli. Végül a Colorrel a kijelölt elem átszínezhető – a deklaráció helyét a New CSS Rule párbeszédablakban lehet megadni (fejléc, meglévő stíluslap, új stíluslap).<br />
<br />
9.8. A Commands menü A Start Recording paranccsal műveleteket lehet rögzíteni, hogy azokat a Play Recorded Command-del tömegesen alkalmazzuk dokumentumokra. A rögzített művelet-kötegek az Edit Command List párbeszédablakban láthatók. A Get More Commands felhívja az Adobe Piacteret, ahonnan további kötegek tölthetők le. A Get AIR Extension letölti az AIR bővítményt. A Manage Extensions elindítja az Adobe Extension Managert, ami az Adobe alkalmazások bővítményeinek kezelője. A Check Spelling vagy a SHIFT-F7 lefuttatja a helyesírás-ellenőrzést. Az ellenőrzés a dokumentumnak attól a pontjától kezdődik, ahol a kurzor áll. A dialógus minden olyan szónál megáll, amelyet (egyébként igen terjedelmes) könyvtárában még ragozott alakban sem talál. Ilyenkor javaslatot tesz, amelyet elfogadhatunk (Change), figyelmen kívül hagyhatunk (Ignore), vagy úgy lépünk át, hogy hozzáadjuk a szótárhoz (Add to Personal), és onnantól kezdve nem akad fenn rajta. Hogy mely nyelv szótárát használja, azt a Preferences / General lapon lehet beállítani. Apply Source Formatting: ez a hasznos funkció a dokumentumtípusnak megfelelően tisztába teszi a forráskódot: törli a tagek közötti űröket, elválasztja a túlzsúfolt sorokat és elvégzi a DOM-nak megfelelő behúzásokat. Az Apply Source Formatting csak a kijelölt részt veti alá formázásnak. Tartalmi változást nem okoz, de a kód áttekintetőbb lesz. Clean up HTML / XHTML: kigyomlálja a forráskód egyértelmű hibáit: törli az üres konténer-tageket, a létszám feletti záró vagy nyitó tageket, a nem a DW által írt kommentárokat, a DW-specifikus kijelöléseket, vagy az általunk megadott tageket, és redukálja az egymásba ágyazott <font>-tageket, ha lehetséges. Clean up Word HTML: megpróbálja tisztába tenni a Microsoft szövegszerkesztője által generált HTML-kódot (ami egyébként teljesen reménytelen). ©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br />
Reméljük, élvezte tananyagunkat. Weboldalainak szerkesztéséhez és céljai megvalósulásához sok sikert kívánunk! További jegyzetek letöltéséhez látogasson ide: timetodesign.hu/tananyag.html<br />
<br />
©2010-2015 Time to Design Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/adobe-dreamweaver-cs6-a-piacvezet-weblap-szerkeszt" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Adobe Dreamweaver CS6 A piacvezető weblap-szerkesztő"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2025 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
