13 Hatékonyságnövelés sablonokkal

Átírás

1 Hatékonyságnövelés sablonokkal Az egységes megjelenés megőrzése egy teljes szájton az egyik legfontosabb kihívás, amivel a webtervezőknek szembe kell nézniük. Egy másik, ehhez kapcsolódó kihívás az egymáshoz hasonló, csak a tartalmukban eltérő oldalak létrehozása. A Dreamweaver mindkét kihívásra elegáns választ ad. Ha egyszer létrehoztunk egy sablont a Dreamweaverben, akkor az arra épülő oldalakat egyszerűen módosíthatjuk, hogy egyéni tartalommal rendelkezzenek, és mégis könnyen frissíthetőek maradnak, ha szükségessé válik magát a sablont módosítanunk.

2 2. Lecke Hatékonyságnövelés sablonokkal A lecke áttekintése Ebben a leckében megtanuljuk, hogyan használhatjuk a Dreamweaver sablonkezelő funkcióit, az alábbiak elvégzésével: Sablon létrehozása. Szerkeszthető régiók beszúrása. Sablonon alapuló oldalak létrehozása. Opcionális régiók hozzáadása. Sablonok és sablonokon alapuló oldalak frissítése. Ennek a leckének az elvégzéséhez körülbelül 60 perc szükséges. Mielőtt belevágnánk, ellenőrizzük, hogy átmásoltuk-e a Lessons/Lesson könyvtárat az Adobe Dreamweaver CS3 Tanfolyam a Könyvben CD-ről a helyi meghajtónkra. A lecke követése közben folyamatosan felül fogjuk írni a kiinduló állományokat. Ha esetleg szükségessé válna a kezdeti állapot visszaállítása, másoljuk át ismét a kiinduló állományokat a CD-ről. Sablon létrehozása A Dreamweaverben a sablonok egyfajta mintaoldalak, amik alapján további oldalak lehet létrehozni. Ugyan létrehozhatunk egy teljesen üres oldalból kiindulva is egy sablont, sokkal praktikusabb és gyakoribb ha egy meglévő oldalt alakítunk át sablonná. Ami még jobb, hogy ezt nagyon könnyű megcsinálni, ahogy az alábbi gyakorlatban látni fogjuk. 1 Indítsuk el az Adobe Dreamweaver CS3-at. 2 Ha nem látszik a munkakörnyezeten, nyomjuk meg az F8-at, hogy előhívjuk a Files panelt, majd válasszuk ki a DW CIB szájtot a szájtok listájából. 3 A Files panelen bontsuk ki a lesson könyvtárat, majd kattintsunk duplán a template_start.htm állományra annak megnyitásához.

3 Adobe Dreamweaver CS3 Tanfolyam a könyvben 3 Egy meglévő oldal sablonná alakításának alapművelete egyetlen egy lépés: elmentjük az oldalt sablonként. 4 Válasszuk ki a File > Save as Template menüpontot. Különleges természetüknél fogva a Dreamweaver a sablonokat saját külön könyvtárukban tárolja. A könyvtár elnevezése Templates, melyet a program a szájt gyökérkönyvtárában hoz létre. Mivel ezeket az állományokat mindig ezen a helyen tárolja a Dreamweaver, nincs szükség külön Mentés másként párbeszédablakra. 5 A megjelenő Save as Template (mentés sablonként) párbeszédablakban ellenőrizzük, hogy a DW CIB szájt legyen kiválasztva a szájtok listájában (Site). A Name (név) mezőben adjuk meg azt, hogy employee_profile, és hagyjuk üresen a Description (leírás) mezőt. Nyomjuk meg a Save gombot. Amikor a Dreamweaver megkérdezi, hogy frissíteni szeretnénk-e a hivatkozásokat (Update Links), nyomjuk meg a Yes (igen) gombot. Megjegyzés: a hivatkozásokat (képekre, CSS stíluslapokra és más kapcsolódó állományokra) azért szükséges frissíteni, mert a sablonnak eltér a tárolási helye az eredeti dokumentumétól. A dokumentum megjelenése nem változott az előzőekhez képest, de a címsorban megjelenő <<Template>> szó mutatja, hogy sablonról van szó. 6 Válasszuk a File > Close menüpontot a sablon bezárásához. A következőkben a Dreamweaver sablonok szívét és lelkét képező szerkeszthető régiók létrehozásával fogunk megismerkedni.

4 4. Lecke Hatékonyságnövelés sablonokkal Szerkeszthető régiók létrehozása Amikor létrehozunk egy sablont, a Dreamweaver zárolja az egész oldalt: ha ilyen állapotában hoznánk létre a sablon alapján egy oldalt, akkor a létrehozott oldal a sablon pontos mása lenne, és a Dreamweaver nem engedné egy részletének a szerkesztését sem. A sablonok egyedi képességeit pont az adja, hogy különböző régiókat határozhatunk meg bennük. Ezek közül a legfontosabbak a szerkeszthető régiók (editable regions). 1 Bontsuk ki a Templates könyvtárat a Files panelen, majd kattintsunk duplán az employee_profile.dwt állományra annak megnyitásához. A Dreamweaver a.dwt kiterjesztéssel különbözteti meg a sablonállományokat. Az ilyen állományok ettől függetlenül a többi dokumentumhoz hasonlóan megnyithatók szerkesztés céljából. 2 3 A sablonokat az Assets (erőforrások) panel Templates (sablonok) kategóriájában is megtalálhatjuk, és onnan is megnyithatjuk őket. A szerkesztőfelület eszköztárában a Page title (oldalcím) mezőből töröljük ki a Maya Ren nevet, majd üssük le az Enter (Windows) vagy Return (Macintosh) billentyűt. A Dreamweaver ilyenkor automatikusan szerkeszthető régióvá teszi az oldal címét jelölő <title> címkepárt, így ez a mező egyszerűen módosítható lesz a sablonon alapuló oldalakon. Jelöljük ki a Maya Ren nevet a címsorban. Egy szerkeszthető régió létrehozásának első lépése, hogy kijelöljük a sablonon alapuló oldalakon szerkeszthetővé tenni kívánt területét az oldalnak. Ez lehet több bekezdés, egy <div> címke, vagy, ahogy ebben az esetben is, egy szövegrészlet. 4 Az Insert panel Common kategóriájában nyomjuk meg a Templates ([IKON]) menügombot (jobbról a második), majd a megjelenő menüből válasszuk ki az Editable Region (szerkeszthető régió) menüpontot.

5 Adobe Dreamweaver CS3 Tanfolyam a könyvben 5 5 A megjelenő New Editable Region (új szerkeszthető régió) párbeszédablakban a Name (név) mezőben adjuk meg azt, hogy employee, majd nyomjuk meg az OK gombot. Mindegyik szerkeszthető régiónak egyedi neve kell, hogy legyen. Ez a név a szerkeszthető régiókat jelölő határvonal fölött megjelenő fülön jelenik meg. Egy szerkeszthető régió létrehozásának második lépése az, hogy a konkrét tartalmat a tartalom jellegét azonosító általánosabb kifejezésre cseréljük. 6 A nélkül, hogy megszüntetnénk az új szerkeszthető régió tartalmának kijelölését, gépeljük be az Employee name általános szöveget. Most végezzük el ugyanezt a folyamatot a címsor munkakört tartalmazó részével is. 7 elöljük ki a címsorban a Creative Director szöveget, majd az Insert panelen nyomjuk meg az Editable Region gombot. A megjelenő New Editable Region párbeszédablakban adjuk meg azt, hogy title (munkakör) a Name mezőben, és nyomjuk meg az OK gombot. A kijelölt szöveget a dokumentumban is írjuk át arra, hogy Title.

6 6. Lecke Hatékonyságnövelés sablonokkal Figyeljük meg, hogy a munkatárs nevét és munkakörét elválasztó kettőspontot és szóközt nem tettük egyik szerkeszthető régió részévé se. Ez a területe az oldalnak emiatt a sablonon alapuló oldalakon nem szerkeszthető, így biztosítjuk, hogy a megkívánt formázás (Munkatárs neve: munkaköre) mindig érvényesüljön. Most tegyük lehetővé a munkatárs fényképének módosítását is. 8 Jelöljük ki a maya_ren.jpg képet a szerkesztőfelületen, majd nyomjuk meg az Editable Region gombot az Insert panelen. A megjelenő New Editable Region párbeszédablakban a Name mezőben adjuk meg azt, hogy photograph, majd nyomjuk meg az OK gombot. Jobb nem a sablonban hagyni egy bizonyos munkatárs fényképét, hisz akkor csak reménykedhetünk, hogy aki létrehozza a sablonon alapuló oldalt, nem felejti majd el kicserélni. Tegyünk be a konkrét fotó helyett egy helyőrző képet. 9 Üssük le a Delete billentyűt a jelenlegi kép törléséhez. Az Insert panel Common kategóriájában nyomjuk meg az Images menügombot, majd válasszuk az Image Placeholder (képi helyőrző, ) menüpontot.

7 Adobe Dreamweaver CS3 Tanfolyam a könyvben 7 10 A megjelenő Image Placeholder párbeszédablakban a Name mezőben adjuk meg azt, hogy Employee_Photograph, és üssük le a Tab billentyűt. A Width (szélesség) mezőben adjunk meg 360- at, a Height (magasság) mezőben pedig 541-et. Ha végeztünk, nyomjuk meg az OK gombot. Most hozzuk létre a táblázatos részek szerkeszthető régióit. 11 Jelöljük ki a táblázat második sorának jobb oldali oszlopában található Gauguin, Czanne and Monet szöveget. Nyomjuk meg az Editable Region gombot az Insert panelen, majd a megjelenő New Editable Region párbeszédablakban a Name mezőben adjuk meg azt, hogy art, és nyomjuk meg az OK gombot. Ez esetben hagyjuk meg a meglévő szöveget a szerkeszthető régióba várt információ példájaként. 12 Kövessük a 11. lépésben leírt eljárást a táblázat jobb oldali oszlopának mindegyik cellájának szerkeszthető régióvá alakításához:

8 8. Lecke Hatékonyságnövelés sablonokkal Jelöljük ki a harmadik cella adatait, és hozzunk létre egy book elnevezésű szerkeszthető régiót. Jelöljük ki a negyedik cella adatait, és hozzunk létre egy quote elnevezésű szerkeszthető régiót. Jelöljük ki az ötödik cella adatait, és hozzunk létre egy training elnevezésű szerkeszthető régiót. Jelöljük ki a hatodik cella adatait, és hozzunk létre egy birthplace elnevezésű szerkeszthető régiót. Jelöljük ki a hetedik cella adatait, és hozzunk létre egy memory elnevezésű szerkeszthető régiót. Jelöljük ki a nyolcadik cella adatait, és hozzunk létre egy invention elnevezésű szerkeszthető régiót. Gratulálunk, létrehoztuk a sablon összes szerkeszthető régióját! Annak ellenére, hogy elsőre favágásnak tűnhet az összes szerkeszthető régió meghatározása, az eredmény bőven megéri a ráfordított időt. Gondoljuk csak bele, ha az egész táblázatot szerkeszthetővé tettük volna, akkor a táblázat szerkezete, vagy akár az egész táblázat is megváltoztatható, eltávolíthatóvá válna a sablonon alapuló oldalakon. Válasszuk ki a File > Save menüpontot a sablon elmentéséhez. A Dreamweaver figyelmeztet, hogy egy blokkszintű elemen belül hoztunk létre szerkeszthető régiót, így a sablonon alapuló oldalakon az ilyen szerkeszthető régiókban már nem lehet majd további blokkszintű elemeket létrehozni. Nyomjuk meg az OK gombot. Mivel szándékosan helyeztük a munkatárs nevét és munkakörét tartalmazó régiókat a <h1>, blokkszintű elemet létrehozó címkén belülre, nem kell foglalkoznunk ezzel a figyelmeztetéssel. 14 Válasszuk ki a File > Close menüpontot a sablon bezárásához. A következőkben munkára fogjuk a sablon, és létrehozzuk az első azon alapuló oldalunkat. Sablonon alapuló oldalak létrehozása A sablonon alapuló oldalak létrehozása a Dreamweaver sablonok létének alapvető oka. Ha egyszer létrehoztunk egy sablonon alapuló oldalt, akkor a szerkeszthető régiói megváltoztathatók, az oldal többi része azonban zárolva lesz. Ez csak a Dreamweaveren belül észrevehető. Ha publikáljuk az oldalt, vagy megtekintjük böngészőben, a sablonon alapuló oldal nem mutat semmilyen eltérést más

9 Adobe Dreamweaver CS3 Tanfolyam a könyvben 9 HTML dokumentumoktól. 1 Válasszuk ki a File > New menüpontot. 2 A New Document (új dokumentum) párbeszédablakban, a kategória listában a bal oldalon kattintsunk a Page from Template (oldal sablon alapján) lehetőségre. A Site (szájtok) listában ellenőrizzük, hogy a DW CIB legyen kiválasztva. A Template for Site DW CIB (DW CIB szájthoz tartozó sablonok) listájában győződjünk meg arról, hogy az employee_profile sablon legyen kiválasztva. Ha sablonok alapján hozunk létre egy oldalt, a legtöbb esetben az adott szájthoz tartozó sablonokat fogjuk használni. 3 Gondoskodjuk róla, hogy az Update page when template changes (oldal frissítése a sablon megváltozásakor) jelölőnégyzet be legyen pipálva, majd nyomjuk meg a Create (létrehozás) gombot. Az új oldal megjelenik a Dreamweaver szerkesztőfelületén. Mielőtt felfedeznénk és módosítanánk az oldalt, mentsük el. 4 Válasszuk ki a File > Save menüpontot. A Save As (mentés másként) párbeszédablakban keressük meg a lesson könyvtárat, majd a File name (állomány neve) mezőben adjuk meg azt, hogy bill_wanner.htm. Ha végeztünk, nyomjuk meg a Save gombot.

10 10. Lecke Hatékonyságnövelés sablonokkal Az első dolog, amit megfigyelhetünk, ahogy a szerkesztőfelület fölött mozgatjuk az egérkurzort, az az, hogy az oldal bizonyos részei, mint például a navigációs elemek és a logó, zárolva vannak, és nem módosíthatók. Ezek fölött az oldalelemek fölött az egérkurzor a függőleges szövegbeszúró ikonból egy nemzetközi tilos a behajtás szimbólummá (áthúzott karika) változik. A szerkeszthető régiók tartalma azonban módosítható, kezdjünk is bele A szerkesztőfelület eszköztárának Page title (oldalcím) mezőjében helyezzük a szövegkurzort a dev / design folks szöveg mögé, és írjuk be azt, hogy Bill Wanner. Üssük le az Enter (Windows) vagy Return (Macintosh) billentyűt. Emlékezhetünk rá, hogy a Dreamweaver automatikusan létrehoz egy szerkeszthető régiót az oldal címének módosíthatósága érdekében. Az employee szerkeszthető régióban jelöljük ki az Employee Name szöveget, üssük le a Delete billentyűt annak törléséhez, és írjuk be azt, hogy Bill Wanner. A title szerkeszthető régióban jelöljük ki a Title szöveget, üssük le a Delete billentyűt annak törléséhez, majd írjuk be azt, hogy CFO. Már láthatjuk, ahogy az oldalunk kezd formálódni. Most cseréljük le a helyőrző képet is.

11 Adobe Dreamweaver CS3 Tanfolyam a könyvben 11 8 Kattintsunk duplán a helyőrző képre. A megjelenő Image Source (kép forrása) párbeszédablakban keressük meg a lesson > images könyvtárat, és jelöljük ki a bill_wanner.jpg állományt. Ha végeztünk, nyomjuk meg az OK gombot. A következőkben a táblázatban található szerkeszthető régiók szövegét kell módosítanunk. Szerencsére a Dreamweaver egyszerűvé teszi a közöttük való mozgást. 9 Helyezzük a szövegkurzort az art szerkeszthető régióba, és válasszuk az Edit > Select All (mindet kijelöl) menüpontot. A kijelölés megtörténte után gépeljük be a Keith Haring and Leonardo da Vinci szöveget a kijelölt szöveg felülírásához. Ha megvagyunk, üssük le a Tab billentyűt. Figyeljük meg, hogy a Dreamweaver átugrott a következő szerkeszthető régióra, és ki is jelölte annak tartalmát. A Tab billentyű ismételt lenyomásával gyorsan végigszaladhatunk a szerkeszthető régiókon, és módosíthatjuk azok tartalmát, ahol szükséges.

12 12. Lecke Hatékonyságnövelés sablonokkal 10 Az alábbiak szerint módosítsuk a szerkeszthető régiók tartalmát: A book szerkeszthető régióban adjuk meg azt, hogy Winning by Jack Welch és üssük le a Tab billentyűt. A quote szerkeszthető régióban azt, hogy Nothing gold can stay Robert Frost, majd üssük le a Tab billentyűt. A training szerkeszthető régióba írjuk azt, hogy M.B.A., Stanford University, és üssük le a Tab billentyűt. A birthplace szerkeszthető régió tartalma legyen az, hogy Menlo Park, California, és ismét üssük le a Tab billentyűt. A memory szerkeszthető régióban azt adjuk meg, hogy Seeing my first child born, és üssük le a Tab billentyűt. Az invention szerkeszthető régióba írjuk be azt, hogy Flying cars. 11 Az első sablonon alapuló oldalunk el is készült. Nézzük meg a böngészőben. 12 Válasszuk ki a File > Save menüpontot a dokumentum elmentéséhez, majd üssük le az F12 gombot az oldal megtekintéséhez az elsődleges böngészőnkben. Láthatjuk, hogy semmi sem utal arra, hogy ez a sablonon alapuló oldal bármiben is eltérne egy szokványos weboldaltól.

13 Adobe Dreamweaver CS3 Tanfolyam a könyvben A következőkben megtanuljuk, hogyan tudunk egy kicsit rugalmasabb sablonokat létrehozni opcionális régiók segítségével. Opcionális régiók létrehozása Egy másik hatékony eszköz a Dreamweaver szerszámosládájában az opcionális régiók létrehozásának lehetősége. Egy opcionális régió tartalma bármely, a sablonon alapuló oldalon annak módosításakor megjeleníthető vagy elrejthető. Az alábbi gyakorlatban egy hónap dolgozója részt alakítunk ki a sablonban, mely ki és bekapcsolható bármely, a sablonon alapuló oldalon. 1 A Files panelen bontsuk ki a Templates könyvtárat, majd kattintsunk duplán az employee_profile.dwt állományra annak megnyitásához. 2 Helyezzük a szövegkurzort a title szerkeszthető régiótól jobbra, üssük le a szóköz billentyűt, majd írjuk be az and Employee of the Month! szöveget.

14 14. Lecke Hatékonyságnövelés sablonokkal 3 4 jelöljük ki az imént beírt szöveget az előtte található szóközzel egyetemben, majd válasszuk ki az Optional Region (opcionális régió) menüpontot az Insert panel Common kategóriájában található Templates menügomb almenüjéből. A megjelenő New Optional Region (új opcionális régió) párbeszédablakban ellenőrizzük, hogy a Basic (egyszerű) fül tartalma látható-e, majd a Name (név) mezőben adjuk meg azt, hogy employee_month. Vegyük ki a pipát a Show by default (alapértelmezésben látható) jelölőnégyzetből, és nyomjuk meg az OK gombot, ha végeztünk. 5 6 Az opcionális régiónak van egyszerű és haladó funkcionalitása. Egyszerű funkcionalitás esetén tulajdonképpen egy igen-nem választási lehetőségünk van, ahol az opcionális régió vagy megjelenik, vagy nem. A haladó fülön ennél bonyolultabb feltételeket megszabó kifejezéseket adhatunk meg, ahol különböző változók értéke alapján jelenik meg vagy marad rejtve az opcionális régió tartalma. A következő gyakorlathoz tartsuk megnyitva a sablont anélkül, hogy elmentenénk.

15 Adobe Dreamweaver CS3 Tanfolyam a könyvben 15 A következő gyakorlatban megtanuljuk, hogyan frissítsük a sablonon alapuló oldalakat a sablon változtatásai alapján. Sablonok és sablonon alapuló oldalak frissítése A Dreamweaver sablonok varázsának fele abból ered, hogy egységes sablonokon alapuló oldalakat hozhatunk létre. A varázs másik fele abból ered, hogy egy sablon változtatásait automatikusan átvezethetjük az azon alapuló oldalakra is. 1 Az employee_profile.dwt sablont nyitva tartva válasszuk ki a File > Save menüpontot. A megjelenő szerkeszthető régió figyelmeztetésnél nyomjuk meg az OK gombot.az Update Template Files (sablonon alapuló oldalak frissítése) párbeszédablakban nyomjuk meg az Update (frissítés) gombot. Az Update Template Files párbeszédablak felsorolja az adott sablonon alapuló összes oldalt. 2 Megjelenik az Update Pages (oldalak frissítése) párbeszédablak, mely megmutatja, hogy mely oldalak kerültek frissítésre, valamint azt, hogy a frissítés sikeresen lezajlott-e. Ha a Dreamweaver a folyamat végére ért, nyomjuk meg a Close gombot.

16 16. Lecke Hatékonyságnövelés sablonokkal Jó esély van rá, hogy egyetlen egy oldal frissítése olyan gyorsan lezajlott, hogy nem is láthattuk, hogy itt egy hosszabb folyamatról van szó. A megvizsgálandó fontosabb részletek az alábbiak: A megvizsgált állományok száma (files examined), a frissített állományok száma (files updated), és a nem frissíthető állományok száma (files which could not be updated). Ha ezek a számok megfelelnek az elvárásainknak, a művelet sikeres volt. Most nézzük meg a frissítést, és használjuk is az opcionális régiót. 3 Válasszuk ki a File > Close menüpontot a sablon bezárásához, majd a Files panelen kattintsunk duplán a bill_wanner.htm állományra a sablonon alapuló oldal megnyitásához. Megnyitáskor nem látunk változást emlékezzünk, hogy az opcionális régió létrehozásakor arra kértük a Dreamweavert, hogy alapértelmezésben ne legyen látható ez a régió. Most tegyük láthatóvá!

17 Adobe Dreamweaver CS3 Tanfolyam a könyvben 17 4 Válasszuk ki a Modify > Template Properties (sablon tulajdonságainak módosítása). A megjelenő Template Properties (sablon tulajdonságai) párbeszédablakban, a listában jelöljük ki az employee_month bejegyzést, majd pipáljuk be a Show employee_month (employee_month megjelenítése) jelölőnégyzetet. Ha végeztünk, nyomjuk meg az OK gombot. Az oldal bonyolultságától függően a Template Properties párbeszédablak számos opcionális régiót és más sablonváltozót tartalmazhat. 5 Válasszuk ki a File > Save menüpontot a dokumentum elmentéséhez. 6 Láthatjuk, hogy az opcionális szöveg egyből megjelent az oldalon. Azt is észre fogjuk venni, hogy maga a szöveg zárolt, hiszen nem szerkeszthető régióban található. Ha szerkeszthetővé szeretnénk tenni egy opcionális régió szövegét, akkor az opcionális régión belül elhelyezhetünk még egy szerkeszthető régiót is a sablonban. A sablon tulajdonságait az elmentett dokumentumban tárolja a Dreamweaver, és megtartják a választott állapotukat egészen addig, amíg nem módosítjuk őket újra. Gratulálunk a lecke befejezéséhez!

18 18. Lecke Hatékonyságnövelés sablonokkal Összefoglalás Összefoglaló kérdések 1 Hogyan lehet sablont létrehozni egy meglévő oldalból? 2 Nevezzünk meg egy, a sablonokból nélkülözhetetlen elemet! Miért nélkülözhetetlen? 3 Hogyan lehet egy sablonon alapuló oldalt létrehozni? 4 Mi a feladata egy opcionális régiónak? 5 Hogyan lehet átvezetni egy sablon változtatásait az azon alapuló oldalakra? Összefoglaló válaszok 1 Válasszuk ki a File > Save as Template menüpontot, majd a párbeszédablakban adjuk meg a sablon nevét. 2 A sablonok működéséhez nélkülözhetetlenek a szerkeszthető régiók, mert nélkülük a sablonon alapuló oldalakon minden zárolva lenne, és semmi sem lenne szerkeszthető. 3 Válasszuk ki a File > New menüpontot, majd a New Document párbeszédablakban válasszuk ki a Pages from Template lehetőséget, keressük ki a kívánt sablont, és nyomjuk meg a Create gombot. 4 Az opcionális régiók tartalma elrejthető vagy megjeleníthető külön-külön minden egyes sablonon alapuló oldal szerkesztésekor. 5 A sablonon alapuló oldalak akkor kerülnek frissítésre, amikor a sablon változtatásait elmentjük Dreamweaverben. Az Update Pages párbeszédablakban kísérhetjük figyelemmel a folyamatot.