14 Munka forráskóddal

Átírás

1 Munka forráskóddal A forráskód a minden weboldal felszíne alatt dübörgő motor. Sok vizuális tervező mint sok sofőr szereti a motort a szakképzett szerelőkre bízni, és leginkább a Design nézetet használja. Néha azonban ahhoz, hogy a weboldalunk a lehető legjobban teljesítsen be kell néznünk a motorháztető alá, és közvetlenül a forráskóddal kell dolgoznunk. Azon túl, hogy szélesebbek lesznek a lehetőségeink, jobban is fogjuk értékelni a weboldalunk tudását, ha kiismerjük magunkat a forráskódban.

2 2. Lecke Munka forráskóddal A lecke áttekintése Ebben a leckében megtanuljuk, hogyan dolgozhatunk egy weboldal forráskódjával, az alábbiak elvégzésével: Kódrészlet kiválasztása. Kódrészletek összecsukása. Új kód beépítése. Megjegyzések hozzáfűzése a forráskódhoz. 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/Lessonkö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. Forráskód kiválasztása Mielőtt az oldal forráskódjának bármilyen részletét áthelyeznénk, másolnánk, törölnék, vagy máshogy módosítanánk, meg kell róla győződnünk, hogy helyesen jelöltük-e ki azt. Ha hibásan jelölünk ki egy címkét és megtörjük, a például hibás karaktereket hagyhat hátra, és emiatt hibásan jelenne meg az oldal a böngészőben. Ebben a gyakorlatban a Dreamweaver Code (forráskód) nézetében elérhető forráskód-kijelölő módszereket fedezzük fel. 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 code_start.htm állományra annak megnyitásához.

3 Adobe Dreamweaver CS3 Tanfolyam a könyvben 3 4 Helyezzük a szövegkurzort a CarryAll Inc. kép alatti bekezdésbe. 5 Nyomjuk meg a szerkesztőfelület eszköztárában a Code ( ) gombot, hogy Code nézetbe váltsunk. 6 A szerkesztőfelület eszköztárának View Options (megjelenítési beállítások, ) menügombja alatti listában győződjünk meg róla, hogy a Word Wrap (hosszú sorok több sorként való megjelenítése) opció be legyen kapcsolva. A Word Wrap bekapcsolása azt eredményezi, hogy mindig látni fogjuk az összes kódot, attól függetlenül, hogy mekkora a szerkesztőfelület. 7 Kattintsunk triplán a kódra a teljes <p> címke kijelöléséhez. Szüntetessük meg a kijelölést úgy, hogy bárhová kattintunk. Vigyük az egérkurzort a sorok számát tartalmazó oszlop fölé, majd kattintsunk egyszer a 102-es sor számára a <p> címke újbóli kijelöléséhez. Kattintsunk bárhová a kijelölés megszüntetéséhez. A bal egérgomb lenyomva tartása mellett húzzuk az egérkurzort a 100- as sorszámtól a 103-as sorszámig több egymás utáni címke együttes kijelöléséhez. A tripla kattintás a legbiztosabb módszer egy sor kód kijelöléséhez, amíg a sorok számát tartalmazó oszlop használata a legjobb több címke együttes kijelöléséhez. Mivel a HTML egy hierarchikus, címke-alapú leírónyelv, a Dreamweaver lehetőséget ad a szövegkurzort vagy kijelölést közvetlenül körülvevő címke kijelöléséhez a Select Parent Tag (befoglaló címke kijelölése) paranccsal. 8 Kattintsunk bárhová a 102-es soron kezdődő kódon belül. A függőleges szerkesztőfelület bal oldalán található Coding (forráskód) eszköztáron nyomjuk meg a Select Parent Tag ( ) gombot (felülről az ötödik).

4 4. Lecke Munka forráskóddal Figyeljük meg, hogy a teljes <p> blokk kijelölésre került. Mivel a szövegkurzor egy <p> címkepár között helyezkedett el, a Dreamweaver ezt a címkepárt azonosította befoglalóként. 9 Nyomjuk meg újra a Select Parent Tag gombot, és figyeljük meg, hogy az imént kijelölt <p> címkét befoglaló <div id= company > címke (és az összes abban foglalt kód) került kijelölésre. Ebben a lépésben az előzőleg kijelölt címkét befoglaló címke került kijelölésre. Hierarchikus értelemben a most kijelölt <div> címke az előző lépésben kijelölt <p>, és az összes többi magában foglalt címke szülője (befoglaló címkéje). A kijelölés megtörténte után ugyan már azonnal másolhatnánk is azt, tegyük félre még ezt a műveletet a következő gyakorlatra, ahol megtanuljuk, hogyan lehet összecsukni egyes kódrészleteket. Kódrészletek összecsukása Amikor hibákat keresünk egy HTML oldalon, a kód puszta mennyisége is akadályozó tényező lehet. A Dreamweaver egy hasznos funkcióval biztosítja, hogy ideiglenesen elrejthessük a kód kijelölt részét a kijelölés összecsukásával. A következő gyakorlatban látni fogjuk, hogy milyen egyszerű mozgatni és kezelni az összecsukott kódrészleteket. 1 2 Amennyiben szükséges, nyissuk meg újra az előző gyakorlatban használt code_start.htm állományt úgy, hogy duplán rákattintunk a Files panelen. Ha szükséges, váltsunk át Code nézetbe a Code gomb megnyomásával a szerkesztőfelület eszköztárán. 3 A bal egérgomb lenyomva tartása mellett az egér húzásával jelöljünk ki egy vagy több címkén átívelő kódrészletet.

5 Adobe Dreamweaver CS3 Tanfolyam a könyvben 5 Figyeljük meg a két szürke gombot, amik a forráskód és a sorok számozása között megjelenik. Ezeket a Dreamweaverben kódfogónak (code handle) hívják, és általuk irányítható a kódrészletek összecsukása. 4 Kattintsunk a felső kódfogóra a kijelölt kódrészlet összecsukásához. Figyeljük meg, hogy a kijelölést a Dreamweaver egy szürke területtel helyettesíti, melyben a kódrészlet első 7 karaktere és egy hármas pontozás található, valamint azt, hogy a két kódfogó (az alsó és a felső) egyesül. Az összecsukott kód első tíz sorát megnézhetjük úgy, hogy a szürke terület fölött hagyjuk egy rövid ideig az egérkurzort. 5 Kattintsunk egyszer a kódfogóra az összecsukott kódrészlet visszaállításához, majd kattintsunk bárhová a kijelölés megszüntetéséhez. A legtöbb esetben egy teljes <div> címke összecsukására lesz majd szükségünk, annak ellenére, hogy bármilyen kijelölést összecsukhatunk. A Coding eszköztáron találunk egy pont erre a célra kialakított eszközt. 6 Helyezzük el a szövegkurzort közvetlenül a <div class= company > kódrészlet első előfordulása után, a <h2>carryall Inc.</h2> kódrészlet fölött. Ha megvagyunk, nyomjuk meg a Collapse Full Tag (teljes címke összecsukása, IKON) gombot a szerkesztőfelület Coding eszköztárában. Ahogy a neve is mutatja, a Collapse Full Tag funkció ötvözi a Select Parent Tag funkciót azzal, hogy egyből össze is csukja a kijelölt kódrészletet. Ez az eszköz nagyon hasznos, ha jól elkülöníthető kódblokkokkal dolgozunk, mint például a.company CSS osztályú <div> címkék sorozata. Gyorsan csukjuk össze mindegyiket, és rendezzük át a sorrendjüket. Helyezzük el a szövegkurzort közvetlenül a 7 <div class= company > kódrészlet második előfordulása után, a <h2>company Anon</h2> kódrészlet fölött, majd nyomjuk meg a Collapse Full Tag gombot a Coding eszköztáron. Ismételjük meg a műveletet a <div class= company > harmadik előfordulásánál is.

6 6. Lecke Munka forráskóddal Most, hogy mindhárom <div> címkét összecsuktuk, gyorsan át tudjuk helyezni őket egyik helyről a másikra. 8 Jelöljük ki az első összecsukott kódrészletet a 99-es sor számára kattintva. Üssük le a Control + X (Windows) vagy Command + X (Macintosh) gyorsbillentyűt a kijelölés kivágásához. Helyezzük a szövegkurzort az utolsó összecsukott kódrészlet elé, majd üssük le a Control + V (Windows) vagy Command + V (Macintosh) gyorsbillentyűt. Az eredmény ellenőrzéséhez kinyithatnánk ugyan az összecsukott kódrészleteket, de van egy jobb, vizuális módszer. 9 Nyomjuk meg a Design ( ) gombot a szerkesztőfelület eszköztárán a Design nézetbe való visszatéréshez. Figyeljük meg, hogy a cégek sorrendje megváltozott, és most a Company Anon szerepel első helyen. Nyomjuk meg a Code gombot a Code nézetbe való visszatéréshez, és láthatjuk, hogy a korábban összecsukott kódrészletek összecsukva maradtak. Fontos észben tartani, hogy az összecsukott kódrészletek összecsukva maradnak, egészen addig, amíg mi magunk ki nem bontjuk őket. Ezt megtehetjük egyenként a megfelelő kódfogóra kattintva, vagy egyszerre az Expand All eszköz használatával. Ha összecsukott kódrészletekkel mentünk el egy oldalt, azok összecsukva maradnak akkor is, ha az adott dokumentumot elmentjük és újra megnyitjuk. 10 Nyomjuk meg az Expand All (felülről a negyedik, ) gombot a Coding eszköztáron. Figyeljük meg, hogy az összes korábban összecsukott kódrészlet kinyílik. 11 Válasszuk ki a File > Save menüpontot.

7 Adobe Dreamweaver CS3 Tanfolyam a könyvben 7 Következő gyakorlatban azokat az eszközöket és módszereket ismerjük meg, amikkel a Dreamweaver egyszerűbbé és gyorsabbá teszi a kézi kódolást. Új forráskód írása Noha a könyv gyakorlatainak nagy részét Design nézetben végeztük el, fontos megismerkedni a Code nézetben való szerkesztés mikéntjével is. Előbb vagy utóbb szükségünk lesz arra, hogy belenyúljunk a forráskódba egy kívánt hatás eléréséhez, és erre csak Code nézetben van lehetőség. Ebben a gyakorlatban megtanuljuk, hogyan tudunk meglévő kódrészleteket új címkékkel körülvenni, valamint azt, hogyan tudunk kézzel új kódrészleteket beszúrni. 1 Amennyiben szükséges, nyissuk meg újra az előző gyakorlatban használt code_start.htm állományt úgy, hogy duplán rákattintunk a Files panelen. 2 Ha szükséges, váltsunk át Code nézetbe a Code gomb megnyomásával a szerkesztőfelület eszköztárán. 3 Görgessünk le az oldal aljára, és helyezzük a szövegkurzort a <p> 2007 dev / design LLC.</p> kódrészlet elé. A cél az, hogy egy újabb elemet adjunk hozzá a forráskódhoz, hogy a lábléc balra legyen igazítva, ugyan úgy, ahogy a jelenlegi elem jobbra igazított. Ehhez a meglévő címkét körül kell venni egy új <div> címkével. 4 Kezdjük el begépelni a HTML címkét, a bal oldali, nyitó kacsacsőrrel kezdve, majd álljunk meg egy pillanatra. Figyeljük meg, hogy a Dreamweaver előhozza az elérhető címkék listáját. Ha továbbírjuk a kívánt címke nevét (üssük is le a d betűt), akkor a címkék listáján is az első d betűvel kezdődő címkére ugrik a Dreamweaver. Ha leütjük az i betűt is, a Dreamweaver máris a kívánt div címkét jelöli ki a listában. Ekkor üssük le az Enter (Windows) vagy Return (Macintosh) billentyűt, és a Dreamweaver beilleszti a forráskódba a kívánt címkét. A címkék listája sokat segít a kézi kódolás gyorsaságának és pontosságának a növelésében. A következő lépésben látni fogjuk, hogy a lista nem csak a címkéknél, hanem azok tulajdonságainál is a rendelkezésünkre áll.

8 8. Lecke Munka forráskóddal 5 Üssük le a szóköz billentyűt. Ha esetleg nem jelenne meg az elérhető tulajdonságok listája, üssük le a CTRL + Szóköz (Windows) vagy Cmd + Szóköz (Macintosh) gyorsbillentyűt. Üssük le a kívánt tulajdonság első betűjét (i): a listában a kijelölés az id tulajdonságra fog ugrani. Ekkor üssük le az Enter (Windows) vagy Return (Macintosh) billentyűt a tulajdonság beszúrásához. Figyeljük meg, hogy a Dreamweaver nem csak a tulajdonság nevét, hanem az értékének megadásához szükséges idézőjeleket és egyenlőségjelet is beszúrja. Üssük le a kívánt érték első betűjét (r). A right- Column érték lesz kijelölve a listába. Üssük le egyszer a lefelé billentyűt ahhoz, hogy a rightfooter elemre ugorjunk a listában, majd üssük le az Enter (Windows) vagy Return (Macintosh) billentyűt. A végén már csak a lezáró kacsacsőrt kell begépelnünk, tegyük is meg. A Dreamweaver nem csak az érvényes címkéket és tulajdonságokat jeleníti meg ezekben a gyorslistákban, hanem az elérhető CSS azonosítókat és osztályokat is, ha arra van szükség. Ez különösen a miatt fontos, hogy a CSS megkülönbözteti a kis és nagybetűket, így azonban el tudjuk kerülni a CSS szelektorok neveinek elírását. Most hozzuk létre a címkepár lezáró tagját, és ismerkedjünk meg egy újabb Dreamweaver funkcióval. 6 Helyezzük a szövegkurzort a <p> 2007 dev / design LLC.</p> kódrészlet mögé, gépeljük be a lezáró címke első két karakterét (</), majd álljunk meg egy pillanatra. A Dreamweaver be fogja fejezni nekünk a címkét. Üssük le az Enter (Windows) vagy Return (Macintosh) billentyűt a beszúrás elfogadásához. A Code nézetben a Dreamweaver olyan kódkiegészítő funkciót biztosít, ami, mint azt az imént láthattuk, figyeli, hogy mely címkét kell épp lezárni, és megadja nekünk. Most gyakoroljuk mindkét kódoló funkció használatát.

9 Adobe Dreamweaver CS3 Tanfolyam a könyvben 9 7 Helyezzük a szövegkurzort a <div id= rightfooter > kódrészlet mögé és írjuk be a következő kódot, az imént megismert két funkció használatával: <div id= leftfooter > <p>all rights reserved</p> </div> 8 Nyomjuk meg a Design gombot a szerkesztőfelület eszköztárán, hogy visszatérjünk a Design nézetbe. Megjegyzés: az előre megadott leftfooter és rightfooter CSS szabályok a float tulajdonság segítségével jelenítenek meg két bekezdést ugyanabban a sorban. 9 Válasszuk ki a File > Save menüpontot a dokumentum elmentéséhez. A következő gyakorlatban megtanuljuk, hogyan tudunk a forráskódba megjegyzéseket beszúrni.

10 10. Lecke Munka forráskóddal Megjegyzések a forráskódban A HTML megjegyzések lehetővé teszik, hogy megjegyzéseket, utalásokat vagy egyéb tartalmat helyezzünk el egy oldalon, úgy, hogy az nem jelenik meg a böngészőkben, a forráskódba azonban be van ágyazva. Jelezhetjük így például azt, hogy egy adott oldal mikor került utoljára frissítésre. A HTML megjegyzéseket használhatjuk továbbá egyébként látható tartalom elrejtéséhez is. A következő gyakorlatok során mindkét módszert megtanuljuk Amennyiben szükséges, nyissuk meg újra az előző gyakorlatban használt code_start.htm állományt úgy, hogy duplán rákattintunk a Files panelen. Ha szükséges, váltsunk át Code nézetbe a Code gomb megnyomásával a szerkesztőfelület eszköztárán. Görgessünk az oldal tetejére, és helyezzük el a szövegkurzort a <head> címke után. Üssük le az Enter (Windows) vagy Return (Macintosh) billentyűt egy új sor létrehozásához. 4 Nyomjuk meg az Apply Comment (megjegyzés létrehozása, ) menügombot a szerkesztőfelület Coding eszköztárán, majd a listából válasszuk ki a HTML Comment (HTML megjegyzés) opciót. Összesen ötféle megjegyzés áll rendelkezésre: Apply HTML Comment egyszerű HTML megjegyzést szúr be, mely <!-- jellel kezdődik és --> jellel végződik. Apply /* */ Comment többsoros JavaScript vagy CSS megjegyzés beszúrása Apply // Comment egysoros JavaScript megjegyzés beszúrása Apply Comment egysoros VBScript megjegyzés beszúrása Apply Server Comment kiszolgáló oldali kódot tartalmazó oldalakon működik, az adott kiszolgálónak megfelelő formátumban szúr be megjegyzést.

11 Adobe Dreamweaver CS3 Tanfolyam a könyvben 11 5 A HTML megjegyzésen belül tartva a szövegkurzort írjuk be a következő szöveget: Utolsó módosítás:, és adjuk meg a mai dátumot. Most az utolsó módosítás dátuma be van ágyazva az oldalba, de a látogatók számára láthatatlanul. A következőben az oldal egy részét tesszük ideiglenesen láthatatlanná egy HTML megjegyzés segítségével. Megjegyzés: Tartsuk fejben, hogy a HTML megjegyzések bárki számára láthatóak a böngészők View Source (forráskód megtekintése) menüpontjának kiválasztásával! 6 Nyomjuk meg a Design gombot a szerkesztőfelület eszköztárán, hogy visszatérjünk a Design nézetbe. Válasszuk ki a CarryAll Inc. alatti képet, majd a Címkeválasztó segítségével a <div.company> címkét. 7 Sokszor hasznos ide-oda váltani a Design és Code nézetek között. Gyakran könnyebb egy kijelölést Design nézetben végrehajtani különösen a Címkeválasztó segítségével majd visszaváltani Code nézetbe a művelet befejezéséhez. Váltsunk vissza Code nézetbe a Code gomb megnyomásával, majd a Coding eszköztáron az Apply Comment menügomb alatt válasszuk az Apply HTML Comment menüpontot.

12 12. Lecke Munka forráskóddal 8 Figyeljük meg, hogy az addig kijelölt kódrészletet most már egy HTML megjegyzés határolja. Nézzük meg az eredményt Design nézetben. Nyomjuk meg a Design gombot a szerkesztőfelület eszköztárán, hogy visszatérjünk a Design nézetbe. A CarryAll rész eltűnt, és már csak két céget sorol fel az oldal. Mivel a böngésző nem veszi figyelembe a HTML megjegyzés által határolt kódrészleteket, az egész rész nem jelenik meg. Most hozzuk vissza. 9 Nyomjuk meg a Code gombot, majd a kijelölés megszüntetése nélkül nyomjuk ki a Remove Comment (megjegyzés eltávolítása, IKON) gombot. 10 Nyomjuk meg a Design gombot: a CarryAll rész visszatért. Válasszuk ki a File > Save menüpontot. Gratulálunk a lecke befejezéséhez!

13 Adobe Dreamweaver CS3 Tanfolyam a könyvben 13 Összefoglalás Összefoglaló kérdések 1 Hogyan lehet váltani Code és Design nézet között? 2 Miben különbözik a Coding eszköztár a Dreamweaver többi eszköztárától? 3 Mi a leggyorsabb módja egy szöveget körülvevő címke kiválasztásának? 4 Mi történik a Select Parent Tag gomb másodszori megnyomásakor? 5 Igaz vagy Hamis: Az egyszer összecsukott kódrészletet többet már nem lehet kibontani. 6 Nevezzük meg a HTML megjegyzése két felhasználási lehetőségét. Összefoglaló válaszok 1 A szerkesztőfelület eszköztárán található Code és Design gombok megnyomásával. 2 A Coding eszköztár csak Code nézetben látható, és függőleges, nem pedig vízszintes. 3 Helyezzük a kurzort a szövegrészletbe, majd nyomjuk meg a Select Parent Tag gombot a Coding eszköztáron. 4 Ahányszor megnyomjuk a Select Parent Tag gombot, a kijelölést befoglaló címkét és annak teljes tartalmát kijelöli a Dreamweaver. 5 Hamis. Ha az egeret az összecsukott blokk fölött tartjuk, megjelenik annak első tíz sora, a kódfogóra való kattintással pedig teljesen visszaállíthatjuk az összecsukott kódrészletet. 6 HTML megjegyzést használhatunk a böngészőben meg nem jelenítendő megjegyzések beszúrására, vagy egy-egy részlet ideiglenes elrejtésére is.

14