4054_05idx_hun.qxd
2002.10.30.
23:13
Page 133
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 134
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 135
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 136
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.
136
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.
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 137
Stíluslapok
4.
5
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 138
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:
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 - taggel kezdõdik. Ebben a tagben – az
- elõtt - írd be a class=”navListBullet” kódot.
2.
A második tagnek (minden egyes - tag után), gépeld be a <span class="navUnderline"> kódot.
3.
Gépeld be a tageket a záró 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:
- <span class="navUnderline">
138
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 139
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 140
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 141
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 142
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).
142
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 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.
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 143
Stíluslapok
4.
5
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ó 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 www.wireviews.com aloldalain is látható.
143
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 144
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 tagen keresztül adhatod hozzá, vagyis:
).
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 145
Stíluslapok
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; }
5
{
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
4054_05idx_hun.qxd
2002.10.30.
23:13
Page 146
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
