Webszerkesztés - Dreamweaver
 
Általános információk
Tanfolyamok ismertetése
Próba
Regisztráció
Belépés a rendszerbe
1. fejezet: Dreamweaver - a kezdetek

Bevezető:

Ebben a leckében elkészítünk egy egyszerű lapot lépésről lépésre. A lecke célja az lesz, hogy már a legelején megtapasztalhassuk, hogy mennyire egyszerűen lehet a Dreamweaver (továbbiakban Dw) segítségével létrehozni oldalakat. Megismerjük a kezdeteket, a Dw felületét, majd az új dokumentum létrehozását és annak tulajdonságait. Az új oldalt a beépített sablonok egyikét felhasználva hozzuk létre, így azokba is betekintést nyerhetünk. Megnézzük az alapvető szerkesztő műveleteket is, amivel az oldalak tartalmát elrendezhetjük, formázhatjuk. A többi leckében ezeket a szerkesztő műveleteket és Dw lehetőségeket fogjuk részletesen megismerni és megtanulni.

Az egyes leckékhez tartozhatnak letölthető forrásanyagok, amelyek segítenek az éppen aktuális anyagrészek megértésében. Ezeket a forrásanyagokat mindig itt, a leckék elején lehet megtalálni.

A leckéhez tartozó források letölthetőek INNEN.

Mi is a Dreamweaver:

Mint azt már bizonyára sokan tudják, a Dw leginkább weboldalak létrehozására készült, de az újabb és újabb verziók megjelenésével egy sokoldalú fejlesztői környezetté nőtte ki magát, amivel már több különböző programnyelven és környezetben fejleszthetünk egyszerűen. A Dw kompatibilis sok régi Macromedia és új Adobe szoftverrel, ennek köszönhetően egyszerűen, gyorsan, néhány kattintással lehet például grafikákat, vagy éppen szerkesztett képeket elhelyezni az oldalakon. Különböző multimédiás és flash mozikat, zenéket tehetünk a lapokra hasonlóan egyszerűen. A leckék alatt megtanult lehetőségeket, opciókat és módszereket gyakorlatokon keresztül is felhasználjuk, ezzel is elősegítve a könnyebb megértést.

1. ábra: Grafikus szerkesztés

A Dw már évek óta szerepel a nívós webszerkesztő programok listáján és nem hiába. Néhány egyszerű kattintással lehet oldalakat összehozni, interaktív tartalmakat elhelyezni grafikus módban. Nem kell hozzá semmilyen html ismeret, vagy programozási gyakorlat., hiszen a Dw egy könnyen kezelhető és jól átlátható grafikus interface segítségével könnyíti meg a munkánkat.

A Dw beszerzése:

Az első lépés az, hogy a Dw programot be kell szerezni. A program rendelkezik egy 30 napig használható próbaverzióval, amit letölthetünk az Adobe letöltőhelyeiről innen. Első lépésként a letöltő oldalon válasszuk ki a Dreamweaver sort és azon belül válasszuk a Try azaz tryal verziót. Ide szándékosan nem akarok képes útmutatókat tenni, mert az oldal elrendezése és arculata elég gyakran változik és a későbbiekben ez megtévesztő lehetne. Az Adobe oldalain a letöltésekhez minden esetben szükség van egy regisztrációra. Ezt megtehetjük a letöltés megkezdése előtt, vagy ha már regisztráltunk, akkor csak az adatainkat kell megadni. Lépésről lépésre kövessük az utasításokat és töltsük le a próba verziót.

Ha nem akarunk regisztrálni, akkor rá lehet keresni még belföldi és külföldi szoftverbázisokban, mint pl.: Origo Szoftverbázis, Tucows, Download. Rákereshetünk a letoltes.lap.hu oldalról kiindulva, vagy használhatjuk a Google keresőt is. Ezekkel a lehetőségekkel biztosan megtaláljuk a Dw próbaverziót és le tudjuk tölteni. A Tryal vagy próbaverzió, mint azt már említettük, csak 30 napig használható.

[ Macromedia Dreamweaver 8 szerkeszto ]

Aki már ismeri a program lehetőségeit és inkább szeretné azt megvásárolni, azt szintén megteheti az Adobe letöltőhelyein. A vásárláshoz itt valamilyen Visa kárya kell. Magyarországon a Dw szinte minden számítástechnikai boltban beszerezhető, bár raktáron kevesen tartanak belőle, de megrendelésre kihozzák. Az interneten ezen kívül található még sok on-line szoftver shop is, ahonnan házhozszállítással megrendelhető a program. Ha lehetőségünk és anyagi kereteink engedik, akkor vegyük meg a teljes dobozos verziót.

A Dw telepítéséről különösebben sokat nem kell írnunk, hiszen nagyon egyszerű. Lépésről lépésre kell követnünk a program telepítőjének utasításait és nem lesz vele semmi baj. Nagyjából fussunk végig a folyamaton. A következő leírás és bemutató képek a Dw 8-as verziójára érvényesek. Az ettől eltérő verziók telepítése is hasonló.

A Dw telepítése:

Indítsuk el a letöltött vagy megvásárolt programot. A program indítása után megjelenik a telepítő varázsló, ami a lenti képen látható módon elsőként kicsomagolja a telepítéshez szükséges fájlokat egy temp könyvtárba. Itt nincs semmi teendő, csak várni kell amíg a művelet véget nem ér, ez eltarthat pár másodpercig.

2. ábra: Telepítés 1

Ezt követően a varázsló közli velünk, hogy a Dw program telepítésre kerül. Megjelenik még az is, hogy a program jogvédett. Ha bármikor meggondoljuk magunkat, akkor a Cancel gombbal lehet elhagyni a telepítőt. Későbbiekben vissza lehet majd lépni az előző műveletekhez, a Back gomb használatával. Folytassuk a telepítést, válasszuk a Next gombot.

3. ábra: Telepítés 2

Ebben az ablakban a licencszerződés, vagy végfelhasználói szerződés található. Érdemes figyelmesen elolvasni, főleg akkor, ha cégünkben rendszeresen dolgozunk ezzel a programmal és folyamatosan használjuk. Ha elfogadjuk a szerződést, akkor továbbléphetünk, ha nem, akkor a telepítés véget ér. A szerződést ki lehet nyomtatni.

4. ábra: Telepítés 3

Most a telepítés célkönyvtárát lehet megadni. Automatikusan felajánl a varázsló egy helyet, de ha ez nem megfelelő, akkor a Change... gomb segítségével tallózhatunk egy számunkra megfelelő telepítési helyet. Megadhatjuk még azt is, hogy a varázsló létrehozzon-e parancsikonokat és ha igen, akkor azokat hol helyezze el.

5. ábra: Telepítés 4

Ebben az ablakban lehet megadni azokat a fájltípusokat, amikről azt szeretnénk, hogy a Dw alapértelmezettként kezelje. Ez azt jelenti, hogy ezekre a fájltípusokra kattintva a Dw szerkesztő indul el és a Windows a Dw ikonját rendeli a fájlokhoz, ha engedélyezve van az opció.

6. ábra: Telepítés 5

A hatodik lépésben az utolsó installálás előtti jóváhagyás jelenik meg. Itt még visszaléphetünk, ha valamit hibásan adtunk meg. Ha meggondoltuk magunkat, megszakíthatjuk a telepítést, de mi most telepíteni akarunk, tehát lépjünk tovább a Install gombbal.

7. ábra: Telepítés 6

Ebben az ablakban követhető figyelemmel az installálás folyamata. A varázsló felmásolja a célkönyvtárba a szükséges fájlokat. Ez a művelet eltarthat néhány percig is, a számítógépünk teljesítményétől függően.

8. ábra: Telepítés 7

A telepítés befejeződött. Kiválasztható, hogy szeretnénk-e elindítani egyből a programot és a hozzá tartozó "olvass el" fájlt. Érdemes ez a fájlt jól átolvasni, érdekes dolgokat találhatunk benne.

9. ábra: Telepítés 8

A Dw program telepítése ezzel el is készült. Mint azt tapasztalhattuk, nagyon egyszerű és felhasználóbarát. A program használatra kész, indítsuk is el, ha még nem tettük meg és kezdjük el az első egyszerű veboldalunk készítését.

Webhely előkészítése a helyi gépen:

A program indításakor megjelenhet egyből egy új dokumentum, de itt még nem tartunk, tehát ha így lenne, akkor azt zárjuk be a főmenü File / Close menüpont segítségével. Az első lépés a szerkesztésben az lesz, hogy létrehozzuk a weboldalunk fő vagy root (gyökér) könyvtárát, ebben lesz a weboldal minden összetevője és innen fogjuk majd az oldalt publikálni az internetre, ha elkészült. Az új könyvtár létrehozható saját fájlmenedzser programmal is, de használjuk erre is a Dw lehetőségeit. A Dw felület jobb oldalán található a Files panel: ha nincs megnyitva, akkor nyissuk meg. A panelon belül válasszuk a Files almenüt, amitől megjelennek a saját gépünk könyvtárai, fájljai. Ha több partíciónk van, azt is tudjuk váltogatni a panel fejlécében. Tallózzuk ki a helyet, ahol a gyökérkönyvtárat létre akarjuk hozni, majd a Files panel főmenüjét válasszuk, ami a panel jobb felső sarkában helyezkedik el. Ez minden panel esetében így lesz, érdemes jól megjegyezni: a lenti képen pirossal bekereteztük a helyet.

10. ábra: Files panel fő menü helye

Az új könyvtár létrehozásához válasszuk ki a panel főmenüjének File / New Folder menüpontját, a lenti képen látható módon. Ne felejtsük el, hogy mielőtt ezt megtennénk, tallózzuk ki azt a partíciót és könyvtárat, ahová a weboldal gyökérkönyvtárát el szeretnénk helyezni.

11. ábra: A gyökérkönyvtár létrehozása

Ahogyan az a lenti képen is megfigyelhető, az új könyvtár létrejön, csak meg kell adni a nevét. Jelen példánkban a név legyen Weboldal .

12. ábra: A gyökérkönyvtár létrejött

Most jelöljük ki a Files ablakban az újonnan létrehozott Weboldal könyvtárat és hozzunk létre még egy új könyvtárat. A neve legyen kepek. Ha kijelölünk egy könyvtárat és úgy hozunk létre egy újat, akkor az új könyvtár a kijelölt könyvtáron belül jön létre. Ha most megnézzük, akkor a weboldal könyvtárunkon belül ott található az új mappa.

13. ábra: Új könyvtárak

Az így létrehozott könyvtárakba másolhatunk fájlokat, amelyeket a weboldalon felhasználunk. Jelenleg nem másolunk bele semmit, de a másolás folyamata szintén egyszerű. Kitallózzuk azt a könyvtárat, amiben a másolandó fájlok vannak, majd kijelöljük az(oka)t a fájl(oka)t, ami(ke)t át szeretnénk másolni. Válasszuk a Files panel menüjében az Edit / Copy menüpontot, majd térjünk vissza a Weboldal könyvtárhoz, jelöljük ki a kepek mappát és válasszuk a Files panel főmenüjének Edit / Paste menüpontját. Így a kiválasztott fájlok belekerülnek a kepek könyvtárba. Jelenleg még nem másolunk fájlokat a mappákba, de megismertük, hogy hogyan kell majd kivitelezni a műveletet. Ezzel a weboldal root könyvtárát előkészítettük.

Videó anyag: Mappák és fájlok kezelése

Új Site (Webhely) létrehozása:

A site vagy webhely foglalja magába az oldalak egészét. Ez azt jelenti például, hogy ha létrehozunk egy dokumentumot vagy lapot, az is a site része lesz. Ha készítünk egy komplett webes prezentációt, például a Pentaschool honlapját, akkor az a honlap egészében az összes képpel, szöveggel és tartozékkal egy komplett site. A Dw lehetőséget nyújt arra, hogy létrehozzunk egy új site-ot, azaz egy új internetes webhelyet, vagy prezentációt, amit a program egy egészként fog kezelni. Így sokkal könnyebb lesz az egyes elemeket hozzárendelni a már meglévőkhöz. Új site létrehozásához válasszuk a főmenü Site / New Site menüpontját.

14. ábra: Új site

Innen el kell végeznünk pár lépést ahhoz, hogy létrejöjjön az új site. Megjelenik a site létrehozó vagy Site Definition ablak. Itt két beállítási lehetőséget találhatunk felül: az egyik a Basic, a másik az Advenced. Mi a Basic lehetőséget használjuk, ez egyfajta site létrehozó varázsló. Segít abban, hogy az új webhelyet könnyen és érthetően hozzuk létre. Az Adveced lehetőség már inkább a haladóknak való, itt több paramétert adhatunk meg és kevesebb a segítség. A varázsló első oldalán meg kell adnunk a site nevét, ez jelen esetünkben legyen 'Elso DwSite'. Meg lehet még adni az oldal webcímét, de ezt most kihagyjuk. Továbblépéshez nyomjuk meg a Next gombot. A Cancel gombbal bármikor meg lehet szakítani a műveletet. Ha valamit rosszul adtunk meg, akkor a Back gombbal lehet visszalépni az előző lépéshez.

15. ábra: Új site, 1. lépés

Ezen az oldalon kell megadni, hogy a készülő webhely fog-e használni valamilyen szerver oldali technológiát, például php-t, adatbázist, asp-t, stb.. Jelen esetünkben a felső jelölőt választjuk: nem használunk szerver oldali technológiát. Továbblépéshez nyomjuk meg a Next gombot.

16. ábra: Új site, 2. lépés

A harmadik lépésben felül két lehetőség közül választhatunk, ami a fájlok szerkesztését illeti. A felső lehetőség az ajánlott: azaz a fájlokat a lokális gépen szerkesztjük, és ha kész, akkor töltjük fel a szerverre. A második lehetőség, hogy közvetlenül a szerveren szerkesztjük a fájlokat, ez nem javasolt, inkább haladóbbak használják. Alul meg kell adni a root, azaz gyökérkönyvtárat, ahol a site összetevői lesznek: ez nem más, mint az elején létrehozott Weboldal mappa. Továbblépéshez nyomjuk meg a Next gombot.

17. ábra: Új site, 3. lépés

Ezen az oldalon azt kell megadni, hogy a távoli szerverhez milyen módon akarunk csatlakozni. Jelen esetünkben lokálisan akarunk fejleszteni, tehát válasszuk a None lehetőséget. Más lehetőség választása esetén a kiválasztott kapcsolat adatait is meg kell adnunk, de erre most nincs szükség. Továbblépéshez nyomjuk meg a Next gombot.

18. ábra: Új site, 4. lépés

Az utolsó oldalon találhatjuk az összefoglalást. Minden beállítás, amit megadtunk, itt szerepel. Ha esetleg valamit elírtunk, vagy módosítani akarunk, akkor a Back gombbal lehet visszalépni. Továbblépéshez nyomjuk meg a Done gombot.

Ezzel az új site létre is jött. A site neve szerepelni fog a Files panel legördülő listájában is, így gyorsan ki lehet választani. Ha kiválasztjuk, akkor megjelenik az új site-hoz tartozó gyökérkönyvtár tartalma. Ez látható a lenti két képen.

19. ábra: Új site, elkészült

Videó anyag: Új webhely létrehozása

Új weboldal létrehozása:

A webhelyek célja az, hogy megjelenítsenek információkat szöveges, képi, vagy éppen mindkét formában. Ezt a megjelenítést végzik el a weboldalak. A webhelyek tartalmazhatnak egy, vagy akár több ezer weboldalt is, amelyek egymáshoz vannak kötve linkekkel, de erről majd később. A webhelyek tehát weboldalakból épülnek fel, és most megnézzük, hogy hogyan kell új weboldalt létrehozni. Természetesen maradjunk az újonnan létrehozott webhelyünk keretein belül.

Itt meg kell jegyeznünk, hogy új weboldalt létrehozhatunk úgy is, hogy csak egy üres dokumentum legyen a kiindulás és használhatunk kész sablont is erre a célra. A Dw programnak van sok előre elkészített sablonja, ezek közül használunk fel egyet az új oldal létrehozásához. Az üres oldal készítését nézzük át első lépésként. Az új weboldal létrehozásához válasszuk a főmenü File / New.. menüpontját. Ekkor megjelenik a lenti képen látható ablak. Több csoportból lehet választani, ezeket menet közben majd megismerjük. Válasszuk ki a Basic Page kategóriát és a jobb oldali ablakból válasszuk a HTML lehetőséget, mivel egyszerű html weboldalt akarunk készíteni.

Meg kell még adnunk azt is, hogy az új weboldal milyen típusú legyen, HTML, vagy XHTML. A kettő között van némi különbség, de ezt kezdő fejlesztők nem fogják érzékelni. Hozzuk létre először az oldalt, aztán a második leckében megnézzük a típusok jellemzőit. Adjuk meg az oldalunknak az XHTML 1.0 Transitional típust és a Create gomb megnyomásával hozzuk létre az új weboldalt.

20. ábra: Új üres weboldal készítése

Az új weboldal létrejön és ha megnézzük akkor látható, hogy az oldal teljesen üres, nincs semmi tartalma. Most egy előre elkészített sablon alapján készítsünk egy új oldalt, ezzel fogunk majd dolgozni a lecke során. Indulásnak most is válasszuk a főmenü File / New.. menüpontját, majd a megjelenő ablakban válasszuk a Page Designs főcsoportot bal oldalon, és a jobb oldalt megjelenő sablonokból válasszuk a Data: Figures Detail almenüpontot. Ez egy nagyon egyszerű sablon és nem tartalmaz semmi bonyolult elemet, csak a bemutatás kedvéért választottuk.

Itt is meg kell adni, hogy az új weboldal milyen típusú legyen, HTML, vagy XHTML. Adjuk meg az oldalunknak az XHTML 1.0 Transitional típust és a Create gomb megnyomásával hozzuk létre az új weboldalt.

21. ábra: Új weboldal létrehozása

Ezzel az új weboldal létrejött. Jelenleg a neve Untitled-1, még nem mentettük el semmilyen néven és nem is fogjuk egyenlőre, majd később. Az oldalt a Design nézetben nézzük, mert szerkeszteni is ebben fogjuk. Ennek bekapcsolása a lenti képen bekeretezve látható. Mielőtt folytatnánk a weboldalunk készítését, nézzük meg röviden a Dw szerkezeti felépítését.

22. ábra: Weboldal design nézet

Videó anyag: Új weboldal létrehozása

A Dw szerkezete, felülete:

Nézzük meg a Dw szerkezeti felépítését. A részletekbe a leckék közben fogunk belemerülni, most a fő szerkezeti elemek és elrendezés lesz a téma. Nézzük meg a lenti ábrát. A fő egységeket különböző színű keretekkel láttuk el és alattuk a keretek színéhez írtuk a fő egység nevét.

23. ábra: A Dw szerkezete

Főmenü és Insert paletta: A főmenüre eddig is gyakran hivatkoztunk és azután is fogunk, innen elérhető a Dw szinte összes opciója. A panelek is rendelkeznek saját menüvel, ahogyan azt a Files panelnél láthattuk, de az egész program főmenüje ez a felső menüsor. Az Insert vagy beszúrás paletta (a palettákat nevezhetjük paneleknek is) tartalmazza a fő szerkesztési műveletek gyorsgombját. Ez azért jó, mert nem kell a főmenüben keresgélnünk pl. egy form létrehozásához, csak megnyomunk egy gombot.

Dokumentum paletta: A dokumentum palettán tudjuk módosítani a szerkesztői nézetet és elvégezhetjük a dokumentummal kapcsolatos főbb műveleteket szintén gyorsgombok segítségével. A dokumentum címe (title) is itt adható meg, ezt szinte mindig használni fogjuk.

Dokumentum ablak: Itt végezzük el a szerkesztési munkálatokat. Ebben az ablakban lesz látható maga a dokumentum, amit készítünk. A leckék alatt design nézetben fogunk dolgozni és így mindig látni fogjuk, hogy hogyan néz ki a dokumentum és hogyan alakul a különböző szerkesztési műveletek során.

Vízszintes elválasztó: Ez választja el az alsó paneleket a dokumentum ablaktól. Azért térünk ki rá külön, mert az elválasztónak van egy különleges opciója. A közepén található egy kis nyíl. Ha arra rákattintunk, akkor gyorsan lehet az alsó panelcsoportot bezárni, majd újra kinyitni. Nagyon hasznos tulajdonság. Az alsó panelcsoport is tetszőlegesen testre szabható, így a mérete akár egészen nagy is lehet, amit egyszerűbb így bezárni egyszerre.

Tulajdonságok paletta: ezt a panelt nagyon sokat fogjuk használni. Az éppen kijelölt aktuális elem, szöveg,kép stb.. tulajdonságait mutatja be és ezeket lehet a palettán keresztül egyszerűen módosítani.

Eredmények (results) paletta: ezen a panelen több opció is található. Lehetőségünk van a panelen keresni, különböző nyelvi referenciákat átböngészni, böngészők visszajelzéseit figyelemmel követni, tehát összességében az eredményeket, eseményeket követhetjük figyelemmel.

Függőleges elválasztó: Ez választja el a bal oldali paneleket a jobb oldali panelcsoporttól. Azért térünk ki erre is külön, mert az elválasztónak itt is van egy különleges opciója. A közepén található egy kis nyíl. Ha arra rákattintunk, akkor gyorsan lehet a jobb oldali panelcsoportot bezárni, majd újra kinyitni. Nagyon hasznos tulajdonság. A panelcsoport itt is tetszőlegesen testre szabható, így a mérete akár egészen nagy is lehet, amit egyszerűbb így bezárni egyszerre.

Paletta csoport (jobb oldali): Ebben a panelcsoportban vannak alapértelmezésként azok a paletták, amelyekre szükségünk lehet a munkák során. Alapértelmezettként négy panel szerepel a csoportban: CSS, Application, Tag Inspector, Files. Ezeket a paneleket meg fogjuk majd ismerni a későbbi leckék során.

Ezzel nagyjából fel is vázoltuk a Dw szerkezeti felépítését. A panelekről azt kell még tudnunk, hogy tetszőlegesen át lehet rendezni az elhelyezkedésüket. A panel fejlécének bal szélén található kis rovátkás jelet kell megfogni az egérrel és a panel tetszőlegesen áthelyezhető bárhová. Ha például több monitorral dolgozunk, akkor a panelek lehetnek az egyik monitoron, a dokumentum ablak pedig a másik monitoron. Ha egy panel nincs nyitva, akkor a főmenü Window menüpontjában lehet kiválasztani az adott palettát és megnyitni.

24. ábra: Panelek megnyitása

Ha megnyitottunk egy panelt akkor már a megismert módszerrel lehet a palettát áthelyezni, mozgatni másik helyre, vagy panelcsoportba. Folytassuk a munkát az újonnan létrehozott dokumentummal.

A dokumentum tulajdonságai:

Az éppen aktuálisan szerkesztett weboldal tulajdonságait a Page Properties (Oldal tulajdonságok) panelen lehet beállítani. Ezt a panelt elérhetjük a főmenü Modify / Page Properties menüpont segítségével. A tulajdonság panelt részletesen most nem vesszük át, csak azokat a tulajdonságokat, amikre az újonnan elkészített weblapunkhoz szükség lesz. A Page Properties paletta elérhető még egy gyorsgomb segítségével a Properties panelről is. A megnyíló ablakban nézzük az első lehetőséget, aminek neve Appearance. Ez látható a lenti képen is. Itt lehet beállítani az oldal alapértelmezett fontkészletét, a fontok méretét és színét. Megadható a háttérszín, háttérkép és a háttérkép ismétlődésének formája. Alul meg lehet még adni az oldal margóinak méretét, azaz a felső, alsó, jobb és bal margókat.

25. ábra: Page Properties Appearance rész

A Links részben adható meg az oldalakon szereplő linkek, interaktív szövegek formája. Megadhatjuk a linkek fonttípusát, a méretét, majd következnek a színek. Külön meg lehet adni a link színét, azt a színt, ami akkor jelenik meg, ha rávisszük az egeret (rollover). Ezt követi a már látogatott és az aktív link színe. Megadható még az is, hogy a link legyen-e aláhúzott állandóan, vagy csak bizonyos esetekben.

26. ábra: Page Properties Links rész

A Headings részben adhatjuk meg az egyes fejléc szövegek formáját. A fejléc szövegek kiemelt szövegrészek is lehetnek, amiket más-más mérettel és színnel láthatunk el. A későbbiekben megismerjük a jelentőségüket.

27. ábra: Page Properties Headings rész

A Title/ Encoding részben adhatjuk meg a dokumentum címét, a dokumentum formáját és az oldal kódolási formáját. A Document Type tulajdonságnál ki lehet választani a weboldal nyelvének megfelelő oldaltípust, jelen esetünkben a Közép-Európait jelöltük ki. Megtekinthető még a webhely mappája is, ahová a dokumentum tartozik. A Tracing Image részre most nem térünk ki.

28. ábra: Page Properties Title/ Encoding rész

Ezzel a dokumentum tulajdonságain át is futottunk. Az új dokumentum, amit a Weboldal webhelyhez létrehoztunk, még mindig nincs elmentve, állítsuk be néhány tulajdonságát a Page Properties panelen. Adjuk meg az Appearance részben az oldal alapértelmezett fontkészletét 'Times New Roman, Times, serif'. A betűk mérete legyen 14 pixel, a text color valami sötétebb szín és a háttérszín pedig valamilyen világos árnyalat. Adjuk meg még a Title / Encoding részben címnek, azaz title: 'Elso Dw Oldal'. Minden mást hagyhatunk alapértelmezett módban. Az Apply gombot lenyomva tudjuk a beállításokat érvényesíteni, majd az Ok gomb lenyomásával zárjuk be az ablakot.

Videó anyag: Dokumentum tulajdonságok

A tartalom létrehozása és formázása:

Van tehát egy újonnan létrehozott weboldalunk, amin egy sablon alapján készült és a tulajdonságait is megadtuk. Most körülbelül úgy néz ki, ahogy az a lenti képen látható. Ezen az oldalon fogjuk átalakítani a meglévő tartalmat és létrehozunk némi új tartalmat is.

29. ábra: Az eddig kész weboldal

Elsőként írjuk át a meglévő tartalmat. A szövegek módosításához nincs más dolgunk, mint kijelöljük a meglévő szöveget az egér bal gombjának nyomva tartása mellett, majd a Delete billentyűvel töröljük a régi tartalmat. A kitörlést követően egyből írhatjuk is be az új szöveget. Hogy legyen értelme a feladatnak, a tartalmat egy autó jellemzésére építjük. Javítsuk ki tehát a tartalmat úgy, hogy felül egyen az autó neve, majd az alatta lévő részben adjuk meg az autó néhány tulajdonságát. A két szöveges részt is cseréljük ki alul, oda helyezzük el az autó leírását két hasábban. A lenti képen látható a módosított tartalom. Egyenlőre csak a már meglévő szövegeket írtuk át.

30. ábra: Módosított szövegek

Most formázzuk meg az átalakított szöveget. A kocsi neve legyen kék, a tulajdonságok nevei zöld színűek és az adatok pirosak és félkövérek. A tulajdonságok leírásának címe legyen szintén kék és a leírásban néhány részt emeljünk ki zöld színnel és dőlt betűvel. Nézzük, hogy ezek a műveletek hogyan hajthatóak végre. A szín módosításához jelöljük ki a módosítani kívánt szövegrész a bal egérgomb nyomva tartása mellett, majd az alsó panelcsoport Properties palettáján válasszuk a Text Color részt, ahol a színt lehet megadni. Válasszunk a színválasztóban egy kék színt.

31. ábra: Színek módosítása

A félkövér szöveg létrehozásához hasonlóképpen jelöljük ki az aktuális szövegrészt és a Properties panelen nyomjuk meg a Bold gombot.

32. ábra: Félkövér szöveg létrehozása

A dőlt betűs szöveghez szintén jelöljük ki a szövegrészt, majd a Properties panelen válasszuk az Italic gombot és nyomluk le. A kijelölt szövegrész dőlt betűs lesz.

33. ábra: Dőlt betűs szöveg létrehozása

Figyeljük meg, hogy amikor egy szövegrésznél színt is módosítunk, akkor létrejön egy új stíluselem. Az új stíluselemek automatikusan kapnak nevet, style1, style2, style3, stb. Módosítsuk a kocsi nevének színét kékre, majd a tulajdonságcímek egyikének színét zöldre és magát a tulajdonságot alakítsuk át pirosra és félkövérre. Most nézzük meg a Properties panelen a Style legördülő menüt és látni fogjuk a három új stíluselemet sorban.

34. ábra: Stíluselemek listája

A stíluselemek többszörösen felhasználhatóak, tehát ha a style2 elemet hozzárendeljük egy másik szövegrészhez, akkor az szintén piros lesz és félkövér. A hozzárendelés egyszerű, a már megszokott módon jelöljünk ki egy szövegrészt, majd a Style legördülő menüben válasszuk ki a megfelelő stíluselemet, például a style2-t. A kijelölt szövegrészre alkalmazódik a stíluselem. Így egy stílust elég egyszer létrehozni és azt alkalmazhatjuk több szövegrészre is az oldalon. Természetesen ez azt is jelenti, hogy ha azt a stíluselemet a későbbiekben módosítjuk, akkor az összes hozzátartozó szövegrészlet változni fog.

A stíluselemeket lehet módosítani is, először is módosítsuk a stílusok nevét. A név módosításához válasszuk a Properties panelen a Style legördülő menüben a Rename menüpontot.

35. ábra: Stiluselemek névmódosítása

A megjelenő ablakban nevezzük át a stíluselemeket tetszőlegesen, de egyértelműen. Például a kocsi nevéhez tartozó stíluselem lehet Focim, az adatokhoz tartozók meg Adat1 és Adat2. Ha új stíluselemet hozunk létre, akkor azt is ilyen módszerrel nevezhetjük át. Nézzük meg tehát az átformázott szöveget.

Videó anyag: Stíluselemek átnevezése

36. ábra: Átalakított, formázott szöveg

A stíluselemek alkalmazásakor természetesen felmerülhet az a kérdés, hogy mi van akkor, ha hibásan hoztuk létre, vagy már nincs rá szükség. A stíluselemeket lehet módosítani és lehet törölni is, erre szolgál a CSS panel. Továbbra is az újonnan létrehozott dokumentummal dolgozunk. Nyissuk meg a CSS ablakot a jobb oldali panelcsoportban. Ha ott nem szerepel, akkor a főmenü Window / CSS Style menüpont segítségével lehet megjeleníteni a palettát. A panelen válasszuk felül a CSS Style részt. Látni fogjuk, hogy azok a stíluselemek, amiket létrehoztunk, szerepelnek a panelen szépen sorban. Most jelöljük ki az egyik stíluselemet és a jobb egérgombbal kattintsunk rá. Itt megjelenik egy gyorsmenü, ebben válasszuk a törlés, azaz a Delete menüpontot. A kiválasztott stíluselem törlésre kerül.

37. ábra: Stíluselem törlése

A stíluselemek módosításához is ezt a gyorsmenüt fogjuk használni. Talán logikus lehetne az, hogy a meglévő és alkalmazott stíluselem esetében, ha egy szöveg stílusát módosítjuk, akkor módosulna az összes többi szöveg is, de szerencsére ez nem így van. A szövegekben tehát ha módosítunk egy stíluselemmel ellátott szöveget, akkor új stíluselem jön létre. A stíluselem módosítása ugyanis befolyásolja az egész oldal arculatát, mert megváltozik minden elem, amire a stíluselemet alkalmaztuk. A módosításhoz szintén a CSS panelen jelöljünk ki egy stíluselemet és kattintsunk rá a jobb egérgombbal. A megjelenő menüben válasszuk az Edit menüpontot.

38. ábra: Stíluselem módosítása

A megjelenő stílusmódosító ablakkal a későbbi leckékben fogunk megismerkedni, eléggé összetett a lehetőségek tárháza. Most csak módosítsuk a stíluselem színét tetszőlegesen. Ezt megtehetjük módosító ablak Type menüpontja alatt a Color résznél, ez látható a lenti képen.

39. ábra: Stíluselem színváltása 1

A CSS Style panelen van még egy lehetőség a stílus elemek tulajdonságainak gyors módosítására, a stíluselem lista alatt a stílus tulajdonságai jelennek meg és módosíthatóak. Ezt láthatjuk a lenti képen. Az egyes tulajdonságokra kattintva azonnal lehet módosítani a tulajdonság összetevőit.

40. ábra: Stíluselem színváltása 2

Ezzel a stíluselemek fontosabb kezelését és tulajdonságait meg is ismertük, most hozzunk létre az oldalon két linket. A linkek olyan interaktív szövegek, amelyek valamilyen lokális vagy globális címre, mutatnak. Ez tehát lehet egy másik dokumentum vagy fájl a saját gépünkön, vagy lehet akár egy tetszőleges internet cím is. Ezekről is a későbbi leckékben fogunk beszélni, most inkább készítsük el a linkeket. A két link a kész szöveges rész alatt helyezkedik el, 'Részletek megtekintése' felirattal, ahogyan az a lenti képen is látható. Egyenlőre még csak sima szövegek lesznek. Ezt úgy tudjuk létrehozni, hogy az egér bal gombjával a szöveg végére kattintunk, majd lenyomjuk az Enter gombot és begépeljük az új sort, ami a link lesz.

41. ábra: Link létrehozása 1

A szövegből úgy lesz link, hogy hozzárendelünk egy címet a Properties panelen a Link mezőben. Ez látható a lenti képen. Ez a cím lehetne bármi, de most jelen helyzetünkben legyen a link egy # karakter, így a link hatására az oldal visszalép a lap tetejére. Próbálkozni lehet: írhatunk bele tetszőleges internetcímet a későbbiekben.

42. ábra: Kész link

A linkek ezzel el is készültek. Később tesztelni fogjuk a működését is. Most helyezzünk el egy képet is az oldalon, ezzel kicsit feldobjuk az egyhangúságot. A képek felhasználásakor az az ideális megoldás, ha előre kiválasztjuk és előkészítjük a használni kívánt képeket és bemásoljuk a site, root könyvtárának erre a célra készített alkönyvtárába. Ez jelen esetünkben a kepek könyvtár. Van azonban egy másik lehetőség is, amikor a kép a site könyvtáron kívül található és úgy akarjuk felhasználni, erre nézünk most egy példát. Kattintsunk a fejléc szöveg, tehát ahol az adatok vannak felsorolva, és a alsó szövegek közé a bal egérgombbal. Most válasszuk az Insert palettán az Images gomb Image menüpontját, ez látható a lenti képen is.

43. ábra: Kép beillesztés az Insert palettán

Megjelenik a képbeillesztő ablak, amiben ki kell tallóznunk a beillesztendő képet. A kép, amit be kell tennünk, megtalálható a letölthető csomagban opel1.jpg néven, használjuk azt a gyakorláshoz. Az ablakban adjuk meg a képet és más dolgunk nincs is, nyomjuk le az Ok gombot.

44. ábra: Képbeillesző ablak

A kép ettől még nem kerül a weboldalba, először is el kell döntenünk, hogy ezt a képet hol akarjuk tárolni. A program fel is teszi a kérdést egy kis ablakban, hogy a kép a site könyvtárán kívül található, és akarjuk-e a site könyvtárába bemásolni. Ha a nemet választjuk, akkor a kép ott marad, ahol van és onnan kerül felhasználásra: ez nem javasolt, mert amikor felmásoljuk a programot a szerverre, akkor kimaradhat a kép, elfeledkezhetünk róla. Válasszuk az igen gombot.

45. ábra: Képmásoló ablak

Ekkor megjelenik egy újabb tallózó ablak, amiben meg kell adnunk azt az esetleges alkönyvtárat, amit a site root könyvtárán belül akarunk használni, jelen esetünkben ez a kepek könyvtár lesz. Ha ez megvan, akkor nyomjuk le a mentés gombot.

46. ábra: Képmásoló tallózó ablak

Megjelenik még egy utolsó ablak a kép beillesztése előtt: itt adhatjuk meg az Alternate text, vagy öviden Alt szöveget. Az Alt szöveg jelenik meg minden olyan esetben, amikor a kép nem jelenhet meg. Ilyen példa lehet az, amikor a felhasználók a böngészőben szándékosan kikapcsolják a képek megjelenítését, vagy a látássérültek esetében is hasznos, akik képernyőolvasóval böngésznek. Az is előfordulhat, hogy a kép nem tud megjelenni valamilyen technikai probléma miatt, pl. törölték a szerverről, megváltozott a címe, stb. Rövid leírást tehetünk az Alt szövegbe a képről, mert ha a kép fölé visszük az egeret, akkor ez a rövid szöveg megjelenik a felhasználónak. Az Alt szöveg tehát nagyon hasznos lehet. Jelen esetünkben Alt szöveg az 'Opel Vectra 1' lesz. Ha ez is megvan, akkor nyomjuk le az Ok gombot. A kép ennek hatására bekerül a Weboldalunkba és bemásolódik a kepek könyvtárba.

47. ábra: Alternatív szöveget megadó ablak

A kép a szövegek között jelenik meg a weboldalunkon a lenti képen látható módon. Jelen példánkban megadunk még neki pár beállítást, de nincs is vele több dolgunk. A beállításokhoz jelöljük ki a képet az egér bal gombjának segítségével, azaz kattintsunk rá.

48. ábra: Beépített kép

Ha kijelöltük a képet, akkor nézzük meg a Properties panelt. A panelen a Border lehetőségnél a mezőbe írjunk be egy egyes számot. Ez azt jelenti, hogy a kép körül egy pixeles keret fog megjelenni. A Border mező mellett van még az Align, vagy elhelyezés rész. Itt adhatjuk meg, hogy a kép hogyan helyezkedjen el, jobbra, középre vagy balra igazodva. Most válasszuk a balra igazítás gombot (Align Left).

49. ábra: Kép tulajdonságok

Most írjunk egy kis rövid szöveget még a kép alá. Jelöljük ki a képet, majd nyomjuk le a jobbra mutató kurzormozgató nyilat, azután pedig az Enter gombot. Ha ez megvan, akkor begépelhetjük a kívánt szöveget. A szöveg stílusa legyen azonos a főcím stílusával, ezt a már megismert módon adhatjuk meg a szövegrésznek. A végeredmény a lenti képen látható.

50. ábra: Kép alatti szöveg

Hozzunk létre a kép szövege alatt egy vízszintes elválasztó vonalat. Ezt úgy tehetjük meg, hogy tartsuk a szöveg végén a villogó kurzort, majd az Insert panelen a legördülő menüben válasszuk a HTML menüpontot. Az így megjelenő ikonok közül nyomjuk meg a Horizontal Rule gombot.

51. ábra: Vízszintes elválasztó létrehozása

Ennek hatására a szöveg alatt létrejön egy vízszintes elválasztó vonal. Ez egy nyomatékosabb módja a tartalom szétválasztásának.

52. ábra: Beillesztett elválasztó vonal

Jelöljük most ki az elválasztó vonalat, majd nyomjuk le a jobbra mutató kurzorvezérlő nyilat és utána az Enter gombot. Az újonnan létrejött sorban egy számozott listát fogunk készíteni. A lista lényege az, hogy a tartalom begépelése vagy bemásolása közben minden alkalommal, ha Enter gombot nyomunk, létrejön egy új számozott bekezdés. Listából készíthetünk sima listát és számozottat is, most számozottat fogunk csinálni. A Properties panelen válasszuk ki és nyomjuk le az Ordered List gombot.

53. ábra: Számozott lista létrehozása

A gomb lenyomására létrejön egy új bekezdés az egyes sorszámmal. Írjunk tetszőleges tartalmat a sorba, majd nyomjuk le az Enter gombot. Ha ez megvan, akkor létrejön még egy új bekezdés kettes sorszámmal. Ebbe is írjunk tartalmat és nyomjuk le az Enter gombot. Ezt ismételjük meg párszor, majd az utolsó Enter lenyomás után kapcsoljuk ki az Ordered List gombot és a lista véget ér. Ezt követően hozzunk létre a már megismert módon még egy vízszintes elválasztót.

54. ábra: Lista megjelenése

Videó anyag: Számozott lista létrehozása

Ezzel a weboldalunk el is készült. Van benne sok szöveg, formázott tartalom, kép, lista és elválasztók. Ezek azok az alapfogalmak amikkel a legtöbbet fogunk találkozni a munkák során. A végleges oldal a lenti képen látható.

55. ábra: A végleges oldal

Oldal mentése és tesztelése:

Az oldallal elkészültünk, de még nincs elmentve. Ez azt jelenti, hogy ha bezárjuk a szerkesztőprogramot, akkor elvész a teljes oldal mentés nélkül. Mentsük el tehát az oldalt. Válasszuk a főmenü File / Save menüpontját. A mentéshez adjuk meg a megjelenő tallózó ablakban a Site főkönyvtárát, az elmentett fájl neve legyen index.html. Azért pont index lesz a neve, mert a webszerverek ezt az elnevezést veszik a kezdő oldalnak, de erről majd később. Az elmentett oldalt ezután le lehet tesztelni, azaz a rendszerünk által használt alapértelmezett böngésző segítségével meg tudjuk nézni a végeredményt. Válasszuk a dokument panel Preview / Debug in browser gombot és azt lenyomva válasszuk ki az ott lévő alapértelmezett böngészőt. Gyorsteszteléshez nyomjuk le az F12 gombot.

56. ábra: Tesztelés

Ha az Edit Browser List menüpontot választjuk, akkor újabb böngészőket adhatunk hozzá a listához. Ez azért jó, mert az éppen készülő weboldalt párhuzamosan több böngészővel is tudjuk tesztelni. Nagyon fontos tudni azt, hogy új böngészőtípust csak akkor tudunk hozzáadni a listához, ha azt előtte telepítettük a számítógépünkre.

Tesztelhetjük még az oldalt kívülről is. Ez azt jelenti, hogy a szerkesztőtől függetlenül nyitjuk meg az oldalt egy böngészőablakban. Elindítjuk a böngészőt és a címablakba beírjuk az index.html fájl teljes elérési útját.

57. ábra: Külső böngészővel tesztelés

A tesztelések azért fontosak a munkák során, mert így egyből láthatjuk, hogy a közzétételt követően a weboldalakat látogatók milyen külalakkal fognak találkozni. Ha a tesztelések alatt még találunk olyan részeket, amelyek nem megfelelőek, akkor azokat a szerkesztőben módosíthatjuk.

Végezetül:

Elérkeztünk a lecke végéhez. Elkészítettünk egy webhelyet és azon belül egy weboldalt, miközben megismertük a legfontosabb alapműveleteket. Sok művelettel találkozhatunk még a további leckékben is. A kész weboldal a szerkesztőprogram segítségével bármikor módosítható lesz, így lehet később az oldalt átalakítani, bővíteni és továbbfejleszteni. A következő leckében a webszerkesztés alapfogalmait fogjuk megismerni.




    Feladatok:

  1. Mire használható a Dreamweaver program?
  2. Honnan lehet beszerezni a Dw programot és milyen formákban?
  3. Mi a Dw telepítés pontos és részletes sorrendje?
  4. Hogyan lehet a Dw Files panel segítségével könyvtárakat és fájlokat kezelni?
  5. Mi az új webhely létrehozásának pontos és részletes sorrendje?
  6. Hogyan lehet új weboldalt létrehozni és mik a fő lépések?
  7. Mik a Dw szerkezetének fő részei és azok mire valóak?
  8. Milyen tulajdonságait ismertük meg a dokumentumoknak és hol lehet ezeket beállítani?
  9. Hogyan tudunk szövegeket létrehozni?
  10. Hogyan lehet átnevezni a meglévő stíluselemeket?
  11. Lehet-e módosítani és törölni a meglévő stíluselemeket és ha igen, akkor hol és hogyan?
  12. Milyen módszerrel lehet vízszintes elválasztó vonalat létrehozni?
  13. Hogyan lehet képeket beilleszteni a weboldalunkba?
  14. Milyen megoldással tudunk listákat és számozott listákat létrehozni?
  15. Hogyan tudjuk a weboldalunkat tesztelni és milyen módszerekkel?
  16. Gyakorlat 1: Készítsünk el egy olyan weboldalt, aminek van egy főcíme, alatta egy pár soros szöveg, majd a szöveg alatt négy képet helyezzünk el egymás alá. A képek alatt is szerepeljen egy rövid szöveg. A képeket vízszintes elválasztó vonallal különítsük el egymástól. A képek alatt is legyen egy pár soros záró szöveg. A szövegeket tetszőlegesen formázzuk meg stíluselemekkel. Ne használjunk sablont a weboldal készítéséhez, új üres weboldalból induljunk el.
  17. Gyakorlat 2: Készítsünk egy olyan weboldalt, aminek van egy címe, majd a cím alatt egy rövid, pár soros szöveg és alatta egy kép. Ezt egy vízszintes elválasztó vonal követi, majd egy számozott lista következik, minimum tíz elemmel. A számozott lista után egy újabb vízszintes elválasztó vonal legyen, majd egy pár soros szöveg és egy újabb elválasztó vonal. A vonal után egy számozatlan lista következzen szintén minimum tíz elemmel, ezután újabb elválasztó és az oldalt utolsó eleme újból egy kép legyen. A szövegeket itt is tetszőlegesen formázzuk meg stíluselemekkel. Ne használjunk sablont a weboldal készítéséhez, új üres weboldalból induljunk el.
A válaszokat és a megoldásokat a belső üzenő rendszeren belül lehet elküldeni. Az elméleti válaszokat txt vagy doc formában a megoldásokkal együtt egybe tömörítve (rar, zip) lehet csatolni. A csatolt állományok nevében nem szerepelhetnek ékezetes vagy speciális karakterek és szóközök.



A Pentaschool Oktatási Központ bármely dokumentumának vagy dokumentum
részletének másolása kizárólag a tulajdonos írásos engedélyével történhet!

Copyright 2002-2003 Pentaschool Bt.
Minden jog fenntartva.

 
Címünk: 1051 Budapest, Sas utca 25. VI. em. Telefon/Fax: (1) 472-0679 E-mail nekünk