Stíluslapok. A fejezet témakörei: Sablon elkészítése a gyakorlati példa site-hoz. CSS hozzáadása a táblázatokkal elkészített site sablonjához

Átírás

1 5 Stíluslapok A fejezet témakörei: Sablon elkészítése a gyakorlati példa site-hoz CSS hozzáadása a táblázatokkal elkészített site sablonjához Szerkeszthetõ területek készítése a sablonban

2 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig Az elõzõ fejezetben elõrébb jutottál a gyakorlati példa site kialakításával. Beállítottad az oldalak hátterét, a színeket és a margókat, amelyek meghatározzák az oldalak tartalmának területét. Most elkészítjük egy belsõ oldal kialakítását, amelyhez hozzáadjuk a site logóját és navigációs elemeit. Végül készítünk néhány sablont, amelyek alapján elkészített oldalakat tartalommal tölthetjük fel a következõ fejezetben. Megvizsgáljuk a látványt A fenti ábrán a site-unk látványterve szerepel. Kitaláljuk, hogy hogyan alakíthatjuk ezt weboldallá, hogyan oszthatjuk fel további részekre, amelyekkel a következõ fejezetekben foglalkozunk. Azt is érdemes kigondolni ezen a ponton, hogy a site mely elemeit készítjük el grafikaként, és mely részeket hozzuk létre a HTML és a CSS együttes használatával. Ha megnézed a fenti ábrát, láthatod, hogy igazán két grafikai elem van rajta: a logó a jobb felsõ sarokban, és a felsorolást jelzõ ikonok az oldal bal szélén. Minden más szövegalapú: különféle színben és háttérrel, esetleg aláhúzva. Tehát a fenti látvány elkészítéséhez az alábbi teendõket kell elvégezni: Létrehozni a fõ táblázatot, amely az összes elemet tartalmazza. Foglalkozni a navigációs területtel, amely lényegét tekintve egy formázott felsorolás. Elhelyezni a logót a jobb felsõ sarokban. Elkészíteni a sötétszürke sávokat és feltölteni tartalommal ami a jobbra igazított JEROME>TURNER>PHOTOGRAPHY címet és az oldal alján található középre igazított navigációs elemet (NEWS, ABOUT, stb.) jelenti. Létrehozni a kész sablonból több további beágyazott sablont, többféle oldalkialakítással, megteremtve az oldalak megjelenésének változatosságát. Ezekhez könnyen hozzáadhatjuk a tartalmat és gyorsan frissíthetjük a site-ot, ha szükséges. Természetesen ahogy végigmegyünk e feladatokon, további ötleteink is jöhetnek, amelyek továbbfejleszthetik a site-ot, így ezekre is figyelni fogunk! 134

3 Stíluslapok 5 A fõ táblázat Vedd az eredeti oldalkialakítást, és próbáld meg a lehetõ legegyszerûbben részekre darabolni. Nem szeretnénk egymásba ágyazott táblázatokat, de ez a terv nem könnyen valósítható meg egyetlen táblázatban, esetleg valami hasonlóval: Összevonhatod a tartalom területen (content area) és a sötétszürke sávokon is a cellákat, és elhelyezhetsz benne egy másik táblázatot, de ez szükségtelen bonyolítás. Sokal jobb ötlet, ha a logót és a JEROME>TURNER>PHOTOGRAPHY szöveget pozícionáljuk, ezáltal a táblázat is egyszerûsíthetõ. Tehát mindössze egy négysoros, egyoszlopos táblázatra van szükség. Az elsõ sor tartalmazza a navigációs elemeket és a logót, a második a site nevét, a harmadik az oldal tartalmát, a negyedik pedig az oldal alaján szereplõ középre igazított navigációs menüt. A nagy táblázat elkészítése 1. A tervezõnézetben már láthatsz egy téglalapot (ez a korábban megadott div tag). Kattints a téglalapba, mert a táblázatot ezen belül hozzuk létre. 2. Adj hozzá egy táblázatot a Layout fül segítségével, ahogy azt az elõzõ fejezetben is mutattuk. Állítsd be, hogy egy négysoros (4 Rows), egyoszlopos (1 Column) táblázat kell, és nullázd le a cell padding, cell spacing ill. a border értékeket. A szélessége (width) legyen 700 pixels (képpont), és az utána megjelenõ Accessibility (hozzáférhetõség) párbeszédablak Summary (összefoglaló) mezõjébe gépelj be egy ehhez hasonló szöveget: this table is for the main page layout(ez a táblázat tartalmazza az oldalkialakítást). Ezután az alábbi eredményt kell kapnod: 135

4 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig A navigáció Ezután elkészítjük az oldal tetején szereplõ navigációs blokkot. Ez leginkább egy számozatlan listához (felsoroláshoz) hasonlít, vagyis ez képezi a navigáció alapját. Ezután a stíluslapok (CSS) segítségével formázunk mindent, beleértve azt is, hogy a szabványos pöttyöket a felsorolásnál lecseréljük azokra az ikonokra. Ennek egyetlen másik módja egy bonyolult táblázat készítése lenne, amelyben elhelyeznénk az ikonokat, a hivatkozásokat, és a magyarázó szöveget, és ez szükségtelenül bonyolult kódot eredményezne. A CSS használatával egy késõbbi hivatkozás hozzáadása már nem túl fájdalmas feladat, és ahogy azt látni fogjuk, sokkal rugalmasabb a szóközöket illetõen. Megjegyzem, hogy minden ötlet, amit itt bemutatok, bármely weboldalon könnyen használható, és ezeket a listákat gyakran használják a megfelelõ navigáció kialakításához. A számozatlan lista hozzáadása 1. A táblázat elsõ sora tartalmazza a logót és a navigációt. Kezdjük a hivatkozásokkal. Kattints az elsõ sorba majd a felsorolás ikonra a Properties palettán. 2. Gépeld be az alábbi szöveget, a végén mindig nyomd le az ENTER billentyût, hogy egy új ikon jelenjen meg. news Make a hole and paint with light (hírek Csinálj egy lyukat és fess fénnyel) about Who is Jerome Turner and why is he showing us his photos? (a szerzõrõl Kicsoda Jerome Turner és miért mutogatja a fotóit?) folio All photos are categorized according to style and medium (munkák Az összes fénykép stílus és anyag szerint kategorizálva) buy Get your mitts on high-quality prints, delivered to your doorstep (vásárlás Gyarapítsd gyûjteményed kiváló minõségû nyomatokkal, házhoz szállítással) contact If you hate the pictures, I guess I should know (kapcsolat Ha nem tetszenek a képek, errõl tudnom kell) Amikor begépeltem ezeket a Dreamweaverben, a táblázatban nem jelent meg az utolsó pötty a kék háttéren valamilyen okból. Ha ugyanez megesne veled is, akkor válts gyorsan Layout nézetbe, majd pedig vissza a Standard nézetbe (a Layout fül segítségével). 3. Jelöld ki a news (hírek) szöveget és add hozzá a news.html hivatkozást a Properties paletta Link mezõjében. Hasonlóképpen, a többi menüelemhez (mindig csak a sor elsõ szavához) add hozzá az alábbi hivatkozásokat: about.html, folio.html, buy.html, és contact.html. 136

5 Stíluslapok 5 4. Néhány négyzetre van szükség a felsorolás szimbólumokhoz. Itt az idõ az elsõ grafika elkészítésére amely egy átlátszó GIF. Helyezd a nav_bullets.gif fájlt amelyet letölthetsz a könyv honlapjáról a szokásos módon a shared mappába, amelyet az assets mappában hoztunk létre a 3. fejezetben. Azért használunk átlátszó GIF képeket, mert az exportált abrák gyakran rosszul jelennek meg, ha a látogató nagyobb színmélységben használja a monitorát. Ezért a kék színt átlátszóval helyettesítjük, így csak a fehér négyzetek látszanak, és ez biztosítja, hogy jól fog megjelenni az összes böngészõben. 5. A felsorolásszimbólumok cseréje grafikai elemekre egyben azt is jelenti, hogy egy CSS osztályt kell definiálnunk a számozatlan listaelem javítására. Elõször add hozá az alábbi stíluslap-bejegyzést (CSS-kódot):.navList { list-style: url(assets/shared/nav_bullets.gif) outside; 137

6 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig Ez biztosítja, hogy az a kép lesz a felsorolásjelzõ ikon minden egyes elemnél, amelyet elhelyeztél az assets/shared/ mappában a 4. pontnál. Az outside érték jelentése az, hogy az ikon az oldal bal szélére kerül és nem beljebb. Következõ lépés a térköz beállítása a felsorolásjelzõkhöz. Ezt megoldhatjuk a margin-top: 25px; bejegyzés hozzáadásával a.navlist osztályhoz. Ez azonnal megmutatja a CSS-sel való formázás elõnyeit; ha késõbb meg szeretnéd változtatni a térköz értékét, ezt a távolságértéket kell átírnod ami sokkal könnyebb, mint a sok táblázatcella formázása! 6. Végül add hozzá az osztályt a számozatlan listaelem kódjához. habár ezt megteheted a tervezõnézetben is, talán a legjobb megoldás, ha átváltasz kódnézetbe, és ezáltal biztosítod, hogy a megfelelõ helyre kerüljön, vagyis: <ul class= navlist > A navigációs szöveg formázása Nagyszerû! Elkészítettük a felsorolást. Következõ lépés a szöveg formázása. Beállítjuk a navigációs terület szélességét, margóját és készítünk egy szegélyt a szöveg alá. Ehhez két CSS osztályt (class) hozunk létre mivel az osztályokat több elemnél használhatjuk, míg az ID-ket csak kifejezetten egy adott elemnél. Az elsõ osztály beállítja a szövegméretet, a szélességet és a margókat, míg a második feladata a szöveg alján lévõ szegély megadása. Biztos kíváncsi vagy, hogy mi értelme van az ID-knek, és miért nem használjuk csak az osztályokat. Azért, mert azoknál az oldalrészeknél, amelyeket csak egyszer adunk meg, hasznos lehet az ID-k használata, mert késõbb a programozás során is hivatkozhatunk rájuk. Például készíthetsz összecsukható menüt, amelyben be- és kikapcsolhatod az egyedi azonosítóval (ID-vel) ellátott div elemeket. 1. Az elsõ tag módosításához elõször válts kódnézetbe, és keresd meg a felsorolás kódját. Figyeld meg, hogy minden egyes sor az <li> taggel kezdõdik. Ebben a tagben az <li után és a záró > elõtt - írd be a class= navlistbullet kódot. 2. A második tagnek (minden egyes <li class="navlistbullet"> tag után), gépeld be a <span class="navunderline"> kódot. 3. Gépeld be a </span> tageket a záró </li> tagek elõtt minden felsorolás végénél, hogy lezárja a második stílusosztály-megadást. Tehát a teljes kód egy sora: <li class= navlistbullet ><span class="navunderline"></span></li> 138

7 Stíluslapok 5 Ezáltal két osztállyal bõvítettük a szöveg forráskódját. Most definiáljuk ezeket a saját stíluslapunkon. 4. Elõször elkészítjük a.navlistbullet osztályt. Beállítjuk a 11px (képpont) méretû szöveget, a 410px szélességet, és a 15px-es alsó térközt. Gépeld be az alábbiakat a stíluslapod végére:.navlistbullet { font-size: 11px; width: 410px; margin-bottom: 15px; 5. A következõ a.navunderline osztály megadása. A szöveghez szeretnénk alsó szegélyt megadni, ezáltal olyan lesz, mintha aláhúznánk. Gépeld be az alábbiakat:.navunderline { border-bottom: solid 1px #666; display: block; A display: block; attribútum szerepe, hogy a vonal folytonos lesz a.navlistbullet-nél beállított teljes hosszon. 139

8 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig Habár ez egy kissé bonyolultnak tûnhet, a hasonló hatás elkészítése a táblázatok használatával sokkal tovább tartana, és nehezebb lenne a megvalósítása, mert a cellákban az aláhúzást színes háttérszínnel kellene megoldani. Ez egy beágyazott táblázat hozzáadását jelentené, és késõbb a margók és az aláhúzás színének megváltoztatása is bonyolultabb lenne. Ezután ha úgy érzed, hogy túl sok a szünet a felsorolásjelzõk között, átírhatod azt a margin-bottom attribútum szerkesztésével a.navlistbullet osztályban amely sokkal rugalmasabb megoldást jelent, mint a táblázatok. 6. Ha készítenél a sablonból egy mintaoldalt ennél a pontnál és megnéznéd azt a böngészõben, a fenti ábrához hasonló látvány fogadna. 7. Ez már egészen közel áll a látványtervünhöz, mindössze annyi teendõnk van, hogy a hivatkozások színét átállítjuk fehérre. Nyisd meg a stílulapodat és készíts egy a:link elemet, a a fájlban levõ összes hivatkozás attribútumainak megadására: a:link { 8. Ebben az elemben beállítjuk a félkövér betûstílust és a betûszínt ezért a kapcsos zárójelek közé írd be, hogy: font-weight: bold; color: #fff; 9. Beállíthatjuk az áttetszõ hátteret és az aláhúzások elhagyását (a text-decoration none értékének megadásával), vagyis gépeld be: background-color: transparent; text-decoration: none; 10. Szükség van a látogatott linkek megadására is, ezért készíts egy a:visited elemet: a:visited { 11. Ebben add meg azokat a beállításokat, mint az elõzõnél: font-weight: bold; 140

9 Stíluslapok 5 color: #fff; background-color: transparent; text-decoration: none; 12. Másold le a fentieket az aktív hivatkozásokhoz is (más szóval ahhoz a linkhez, amelyen éppen kattintanak). a:active { font-weight: bold; color: #fff; background-color: transparent; text-decoration: none; 13. Végül beállíhatjuk azt is, hogy a hivatkozások hogyan jelenjenek meg, ha az egeret föléjük visszük, egy a:hover elemmel: a:hover { 14. Ezen belül megadhatjuk a háttészínt és a hivatkozások színét is (ahogy azt a következõ ábrán láthatod): font-weight: bold; color: yellow; background-color: #000; text-decoration: none; 15. A CSS-ben tehát összességében az alábbiakat változtattuk meg: a:link { font-weight: bold; color: #fff; background-color: transparent; text-decoration: none; a:visited { font-weight: bold; color: #fff; folytatás a túloldalon 141

10 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig background-color: transparent; text-decoration: none; a:active { font-weight: bold; color: #fff; background-color: transparent; text-decoration: none; a:hover { font-weight: bold; color: yellow; background-color: #000; text-decoration: none; Ellenõrizd, hogy a hivatkozásokat a helyes sorrendben adtad-e meg, ahogy fent, vagyis: Link, Visited, Active, Hover. Ez biztosítja azt, hogy helyesen jelennek meg az összes böngészõben, mert a késõbb megadott stílusok felülírják a korábbiakat. Ha nehezen emlékeznél vissza erre a sorrendre, jegyezd meg az elnevezések elsõ betûit az alábbi kifejezéssel: LoVe And Hate (ford.: Szeretet és gyûlölet). A navigáció ezután mûködõképes. A logó hozzáadása A táblázat elsõ sorának végén elhelyezzük a logót, amelyet szintén átlátszó GIF-ként mentettünk el (a kék háttérszínt cseréltük le átlátszóra). 1. Az Insert paletta Common fülén levõ Image gomb segítségével helyezd el a táblázat elsõ sorának végén a jtplogo.gif állományt. 2. A kép megjelenik a tervezõnézetben, de kissé véletlenszerû helyen. Ez rámutat a vizuális szerkesztés egyik problémájára: néha a szerkesztõprogramok is hibáznak. A legvalószínûbb hely, ahová a Dreamweaver MX elhelyezte a képet, valahol a felsorolásban van. 3. Válts át kódnézetbe, jelöld ki a képhez tartozó forráskódot (image taget) és mozgasd az <ul> tag elé. Hogy miért elé? Mert ezután a kép a lista jobb oldalára kerül, vagyis utána, ugye? Nem. Emlékszel arra, amikor azt mondtam, hogy a táblázatok helyett egy egyszerûbb módszert használunk az olyan elemek, mint pl. a logó elhelyezésére? Elárulom, hogy ezt is CSS segítségével érjük el: a float segítségével jobbra úsztatjuk a képet. 142

11 Stíluslapok 5 4. Gépeld be az alábbi osztályt a stíluslapra:.floatright { float: right; 5. A sablon forrásában keresd meg azt a sort, amely a képre hivatkozik (ezt a legegyszerûbben úgy érheted el, ha a tervezõnézetben rákattintasz a képre és ezáltal kijelölöd azt). Végül gépeld be a <spanclass="float: right"> kódot az img src tag baloldalára, majd a záró </span> taget a jobboldalára, hogy ilyen legyen: 6. Mentsd el ismét mindkét fájlt, és láthatod a beúsztatott logót a jobboldalon ami a Dreamweaver 4-ben még nem jelenne meg, hiszen ez a Dreamweaver MX változat hasznos újdonsága. Figyeld meg, hogy az elemek beúsztatása CSS-sel nagyon könnyen kezelhetõ. Például beúsztathatsz képeket, amelyeket körbefolythatsz szöveggel, vagy teljes szövegmezõket, mint a aloldalain is látható. 143

12 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig A sötétszürke sávok Következõ lépésben elkészítjük a sötétszürke sávokat és megadjuk a tartalmukat. Figyeld meg, hogy a két sáv mérete és színe megegyezik, de a tartalmuk különbözõ. A felsõnél a site címe szerepel a jobb oldalon, és az oldal címe a baloldalon, amelyet megoldhatunk a navigáció és a logó elhelyezéséhez hasonlóan ( beúsztatva ). Az alsó navigációs sáv egyszerûbb, csak egy középre igazított szöveget tartalmaz. A szürke sávok hozzáadása 1. Add hozzá a rowgray osztályt a fõ táblázat második és negyedik sorához, a sorra kattintva tervezõnézetben, majd a Properties palettát használva (a palettán az A ikonra kattintva tudsz átváltani a HTML és a CSS mód között; a rowgray osztályt a <tr> tagen keresztül adhatod hozzá, vagyis: <tr class= rowgray >). 2. Add hozzá ezt az osztályt a stíluslaphoz, mentsd el mindkét állományt. A két sornak sötétszürke háttérszíne lesz, amelyre majd 12px méretû fehér feliratokat fogunk helyezni:.rowgray { background: #333; font-size: 12px; color: #fff; 144

13 Stíluslapok 5 3. A szöveget úgy adhatod hozzá, hogy a cellába kattintasz, majd elkezded begépelni. Figyeld meg, hogy a JEROME>TURNER>PHOTOGRAPHY címet beúsztatjuk a logóhoz hasonlóan, ezért az oldal címe (TITLE text) elé kell kerülnie. 4. A Dreamweaver MX néha idegesítõen megjeleníti a fehér szöveget a fehér háttéren, így lehet, hogy szükséges megváltoztatni a színjellemzõket a.rowgray osztályban, miközben dolgozol. Ne felejtsd el, hogy el kell mentened a fájlokat, mielõtt a változtatások megjelennének. 5. Most helyezd el a span tageket mindkettõnél, és add hozzá a floatright osztályt a JEROME>TURNER>PHOTOGRAPHY szöveghez és a copypadding osztályt a TITLE texthez. Végül módosítsd a stíluslapot az alábbiakkkal:.copypadding { padding-left: 40px; Ez egy 40 képpont széles margót eredményez a TITLE text baloldalán, amely hozzáigazítja a navigációs listához. 6. Egy végsõ belsõ stílust is hozzáadtunk a JEROME>TURNER>PHOTOGRAPHY szöveghez, hogy az ne ragadjon hozzá teljesen a jobb szélsõ szegélyhez: style="padding-right: 5px;". A kód tehát: 7. A második sötétszürke sávot egyszerûbb elkészíteni ez a navigációs menü hivatkozásait ismétli azok számára, akik eljutottak az oldal aljáig. Kattints a cellába, és add hozzá ezeket a hivatkozásokat, hagyományosan. 8. Ne formázd ezt a szöveget a Properties paletta segítségével, de kódnézetben add hozzá a class= center kódot ahhoz a cellához, amely a szöveget tartalmazza. 9. Végül add hozzá az alábbi kódot a stíluslaphoz:.center { text-align: center; Ez középre igazítja ezeket a hivatkozásokat, ahogy azt az oldalkialakításnál elterveztük. 145

14 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig További kiegészítések A szürke háttér nagyon sötét, ezért készítettünk helyette egy szürke-fehér csíkos GIF-et a Photoshopban. Hasznos lenne egy további legördülõ menü is a fõ navigációs lista alatt, ahonnan közvetlenül ki lehetne választani az egyes aloldalakat. 1. Add hozzá a csíkos kép kódját: url(assets/shared/background_stripes.gif) a háttérhez a body tag background attribútumánál a stíluslapon. Ezt a böngészõ automatikusan csempeszerûen megjeleníti, így nem kell tudni a látogató böngészõablakának pontos méretét. Néhány böngészõ nagyon lelassul, ha túl kis méretû képeket kell csempeszerûen a háttérben megjelenítenie, ezért ennek a képnek a mérete kb. 600 x 300 képpont. Mivel ez egy kétszínû GIF, fájlmérete pusztán 4kb. 2. A következõ lépés a legördülõ menü. Kattints az utolsó felsorolás (contact) szövegének a végére a táblázat elsõ cellájában, nyomj ENTER-t majd kattints a felsorolásikonra a Properties palettán, hogy kikapcsold a felsorolást. 3. Adj hozzá egy ûrlapot (Form) a List/Menu gomb kiválasztásával a Forms fülön. 4. Jelöld ki, majd kattints a List Values gombra a Properties palettán, hogy felvedd az értékeket a legördülõ menübe. Az elsõ elem alapértelmezetten megjelenik, és nem szükséges az értékét megadni. Ezt a technikát felhasználhatod, hogy elválasztó elemeket adj hozzá olyan címkéket (Item Labels), amelyek kötõjeleket tartalmaznak, de nincs értékük (Value). 5. A legördülõ lista mellett helyezz el egy gombot, a Forms fül gomb (button) ikonjára kattintva. 6. A Dreamweaver MX alapértelmezetten egy Submit (Elküldés) gombot helyez el, nekünk éppen erre van szükségünk. Nevezd át valami szellemesebbre, mint pl. Go (Menj!) a címkéjének (Label) átírásával. 7. Az ûrlap ettõl még nem mûködik, ezért válts át a kódnézetbe, hogy beállítsd és formázd. Cseréld le a teljes <form> taget és tartalmát az alábbira: <form style="padding-left: 40px; margin: 0px;" name="navform"> Ez eltávolítja az ûrlap alapértelmezett margóit, ezáltal az jobban illeszkedik az oldalunkba. Továbbá odaigazítja a korábban begépelt TITLE texthez. 146

15 Stíluslapok 5 8. Cseréld le a<select> taget ezzel: <select name="navlinks"> A select tag most már rendelkezik a megfelelõ JavaScript azonosítóval, amelyet majd a submit gombhoz adunk hozzá, hogy az ûrlap mûködjön. 9. Gépeld be az alábbiakat az <input> tagbe: style="border: 1px solid #666; background-color: #fff;" onclick="window.location=document.navform.navlinks.options[document.na vform.navlinks.selectedindex].value" Most már mûködik a legördülõ menü is (pontosabban akkor fog igazán mûködni, ha majd elkészítjük azokat az oldalakat is, amelyekre hivatkozik!) Szerkeszthetõ területek készítése Most már elkészültünk a sablonunkkal, itt az idõ, hogy szerkeszthetõ területeket adjunk hozzá, amelyek tartalmát módosíthatjuk a sablon alapján létrehozott oldalainknál. Két területet szerkeszthetünk minden egyes oldalon: az oldal címét (TITLE text) és a tartalmát (CONTENT area), vagyis ezekhez kell szerkeszthetõ területeket kijelölni. Néhány oldal kialakítása nagyon eltérõ, mert többoszlopos szerkezetû. Ezeknél az oldalaknál ugyanarra az alapszerkezetre van szükség, és hasznos lenne, ha egy sablont megváltoztatva az összes ilyen oldal frissíthetõ lenne. Vagyis elérkeztünk a beágyazott sablonokhoz. 1. Jelöld ki az oldal címét jelzõ szöveget az egérrel. Válaszd az Insert > Template Objects > Editable Region parancsot. A legjobb, ha nem használsz szóközöket (és ékezeteket) a sablon szerkeszthetõ területeinek (régióinak) elnevezésénél, de a kisbetûs és nagybetûs írásmód együttes használata (mint pl. maincontent) javasolható. 2. Tedd ugyanezt a tartalom területével (CONTENT area). A szerkeszthetõ területek úgy jelennek meg a Design nézteben, mint elnevezett fülek, a kódnézetben pedig olyan megjegyzésekként, amelyeket a böngészõk nem vesznek figyelembe. Mindez lehetõvé teszi a Dreamweaver számára az oldalak változásainak nyomon követését és frissítését. Ha a fülek nem jelennének meg a tervezõnézetben, kapcsold be a View > Visual Aids > Invisible Elements menüponttal. 147

16 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig 3. Most elkészítjük a sablon egy másik változatát, kétoszlopos tartalomterülettel. Elõször válaszd ki a File > New menüpontot, majd a sablonunkat a Templates fülön. 4. A maincontent szerkeszthetõ területen belül készíts egy kétoszlopos táblázatot. 5. Mindkét cellát formázzuk, ezért használd a class= copypadding kódot az elsõhöz (hogy egy oszlopba kerüljön a TITLE texttel) és a class= cellspacer kódot a másodikhoz. 6. A stíluslaphoz add hozzá az alábbi kódot:.cellspacer { padding-left: 10px; 7. Végülj készíts szerkeszthetõ területeket mondkét cellában, hogy az alábbi eredményt elérd: 148

17 Stíluslapok 5 Ha az új sablonra épülõ oldalakat készítesz, a teljes tartalomterületet nem változtathatod meg szabadon, csak a két meghatározott cellát módosíthatod. Ugyanezzel a módszerrel még két sablont készítettünk, a következõ fejezethez: az egyikben háromoszlopos tartalomterültettel. A másik sablonban egy egyoszlopos tartalomterületet készítettünk, amelynek a baloldalán egy 40 képpontos szegély van. Hogyan mûködnek? Ha megváltoztatod mondjuk a kéthasábos sablont, minden olyan oldalt is frissíteni fog, amely erre a sablonra épül. Ha megváltoztatod a fõ sablont, nemcsak az erre épülõ oldalakat fogja frissíteni, hanem az ez alapján készült többi sablont is. 149

18 5 Macromedia Dreamweaver MX - Az alapoktól a dinamikus tartalomig Oldalak készítése Egy sablonra épülõ új oldalt úgy készíthetsz, hogy a File > New menüpontra kattintasz, majd kiválasztod a megfelelõ sablont a megjelenõ ablak Templates fülén. Hasonlóképpen felülírathatod egy oldal tartalmát egy sablonnal a Modify > Templates > Attach Template to Page menüpontra kattintva, majd a megfelelõ sablont kiválasztva. Ha bármilyen zavaró hézag jelenne meg az oldalaidon, válts kódnézetbe, keresd meg az elszórtan elhelyezkedõ üres bekezdéseket (<p> tageket) és töröld ki õket! Remélem, hogy most már megértetted, hogy hogyan lehet létrehozni és mire lehet használni a sablonokat. Bármekkorára is növekedjék a site, az alapszerkezettel, vagyis a munka jelentõsebb részével már elkészültünk. A következõ fejezetben az olyan további oldalelemeket (Assets) adjuk hozzá a sitehoz, mint pl. képeket, formázott szövegeket és hasonlókat. 150

19 Stíluslapok 5 151

20