Programozás | HTML » Haladó HTML szerkesztés Dreamweaver-rel

Haladó HTML szerkesztés I. II. III. IV. V. VI. VII. VIII. IX. X. XI. XII. XIII. XIV. A Macromedia Dreamweaver 4 használata Új oldal szerkesztése A CSS használata, alapok A CSS használata, bővebben Thumbnail-ek használata Képváltó menü készítése Commands Táblázatok Kiegészítők A Paint Shop Pro 7 használata Képlopás (Screen Capture) GIF képek mentése Átlátsztó GIF készítése Képváltó menühöz képek készítése A Macromedia Dreamweaver 4 használata A Macromedia Dreamweaver 4 véleményem szerint a jelenleg legjobb HTML szerkesztő. Ennek kezelését fogom megmutatni néhány példán keresztül. A leírás korántsem teljes, csak néhány eszközt mutatok be, amelyeket én is használni szoktam. A Dreamweaver úgynevezett WYSIWYG szerkesztő, ami azt jelenti, hogy szerkesztés közben már látszik a végeredmény is, ahogy a böngészőben megjelenik az oldal. Természetesen a forrást is megnézhetjük és szerkeszthetjük a programmal. Új

oldal szerkesztése A menü alatt 3 ikon látható. Ezekkel lehet beállítani, hogy a HTML forrását, a megjelenítést vagy mindkettőt akarjuk látni. Én a középsőt (mindkét nézet) szoktam használni A File-New vagy Ctrl+D lenyomására egy új, üres oldal jelenik meg. Amint látszik, a program már egy alap HTML kódot is beillesztett. Mentsük el az oldalt index.htm néven! Az oldalra vonatkozó alapbeállításokat a Modify-Page properties menüponttal módosíthatjuk. Ez előhoz egy új ablakot Természetesen a kódba közvetlenül is belenyúlhatunk - ha úgy tetszik - a felső részen. A Title után az oldal címét. Ez legyen Első oldal A Background image után a háttérképet lehet kiválasztani a Browse gombbal. Azért kellett elmenteni az előbb a fájlt, hogy a mentési helyhez képest tudjuk kiválasztani a képet is. Az oldalhoz felhasznált képeket érdemes egy, a html fájlok helyéről nyíló alkönyvtárba pakolni az áttekinthetőség végett. A

következő 5 beállítási lehetőségnél a szövegek színeit választhatjuk ki. A színes négyzetre kattintva egy színtábla jelenik meg, abból lehet kiválasztani a kívánt értéket. A bővített palettát a kis körre kattintva hozhatjuk elő, ahol több lehetőséget kapunk a variálásra. Ha tudjuk, ha szín hexa kódját is használhatjuk A Document Encoding-nál a megjelenítés karakterkészletét állíthatjuk be. Ezt - ha magyar szövegről van szó - érdemes Central European (ISO-8859-2) értékre beállítani. Kattintsunk az OK gombra! Látszik, hogy a program a kódba beillesztette a beállított értékeket. A címsorban a fájl neve után egy csillag jelent meg. Ez azt jelenti, hogy a dokumentumon változás történt Mentés után a csillag eltűnik. A CSS használata, alapok A CSS (Cascading Style Sheet) stíluslapot jelent. A W3 konzorcium (amely a webes szabványokat állítja elő) ajánlása szerint ezeket kell használni a honlapokon. Mit a

teendő, hogy ha vastag, piros szöveget akarunk készíteni? A régi módszer szerint a szöveget beírása után a <b> és a <font> TAG-et használjuk. A CSS használatával először előállítunk egy vastag, piros szinű stílust. Kattintsunk a Window CSS Styles menüpontra! Ez előhozza a CSS Styles ablakot 2x a (none) szöveg alá a fehér részbe kattintva előhozhatjuk a stíluslap-lista ablakot. A New gombra kattinva az új stíluslap fajtáját választhatjuk ki. A Name után kell beírni a nevét. A névnek ponttal kell kezdődnie Ez legyen vastagpiros A Type maradjon az első. A CSS nagy előnye, hogy külön fájlba is ki lehet menteni a tartalmát Így azt több html fájlban fel lehet használni. Most erre nincs szükség A Define In-t váltsuk a 2 pontra, majd OK. Megjelent a stíluslap szerkesztő oldal. A Weight értéke legyen bold A Color pedig #FF0000 Ezután kattintsunk az OK majd a Done gombra! A CSS Styles ablakban megjelent az új

stíluslap. A program a html forrás HEAD részébe egy <style> részt illesztett, ide rakta be a síluslap definícióját. Használni úgy kell, hogy kijelölünk egy szövegrészt, majd a stílus nevére kattintunk Amint látszik, a program a <p> TAG-be illesztette be a class tagot, ami a stíluslapra utal. Amennyiben nem egy egész paragrafust (<p>-vel elválasztott részt) akarunk a stílusra kijelölni, akkor a <span> TAG-et használja a program. A stíluslapokkal nagyon szépen el lehet készíteni egy honlap kinézetét. Érdemes minden fontos részre külön stílust gyártani, pl nagycim, cim, szoveg, datum, link, stb A CSS használata, bővebben Milyen stílusokat készíthetünk? A Type szerint: az első a normál stíluslap, erről már szó volt. A második a Redefine HTML Tag. Amint a neve mondja, át lehet tervezni egy-egy alap HTML Tag-et. Pl ha itt a P-t választjuk ki, és azt kék szinűre változtatjuk, akkor minden P-vel jelzett

szöveg kék lesz. A harmadik: Use CSS Selector. Itt a linkekkel lehet variálni Alapesetben a linkek kék szinűek és alá vannak húzva. Amikor fölé viszed az egeret nem változik, rákattintásra piros, a meglátogatott link pedig bordó szinű. Ezt a négy állapotot lehet itt beállítani, mindre külön stílust Jelen oldalon a link alapesetben kék aláhúzás nélkül, az egér felévitelére piros lesz aláhúzással. Az állapotok: a:link link szövege a:hover egér fölévitelekor a:active rákattintáskor a:visited meglátogatott link A stíluslap beállítási lehetőségei A fontnál alapesetben hatféle választási lehetőség van. Ajánlott ezek közül választani, ha azt akarjuk, hogy minden látogató gépén ugyanúgy nézzen ki az oldal, ugyanis ezek a fontok a legtöbb gépen megtalálhatók. A Size-nál a méretet lehet beállítani Érdemes pixelben megadni, hogy egységes legyen. A Weight-nél a vastag betűt, a Stylenál a dőltbetűt, a Colornál

a színt lehet beállítani. A Decoration-nél be lehet állítani, hogy alá legyenek húzva a szövekek, vagy át vagy fölül, vagy ne legyen aláhúzva. A ne legyen aláhúzva a linkeknél fontos beállítási lehetőség A Block oldalon a Text Align-nál állíthatjuk be a szöveg rendezését, lehet balra, jobbra, középre igazított és széthúzott (justify). Ezek voltak a lényegesebb beállítási lehetőségek. Készítettem egy zöld szinű, nem aláhúzott stílust. Az ezt a stílust használó szövegben elhelyeztem egy linket: Látható, hogy a link az eredeti paramétereivel látszik, kék és alá van húzva. Hogy a link is felvegye a stílust, az <A> Tag-be is be kell illeszteni: Thumbnail-ek használata Mi az a thumbnail? Ha van egy nagy képünk, akkor azt nem illik beilleszteni közvetlenül az oldalba, mert a letöltést nagyon le tudja lassítani. A thumbnail a nagy képről készült kicsinyítés, általában 120 vagy 200 pixel

szélességgel/magassággal. Ezt a kis képet beilleszve az oldalba, arra linket kell tenni a nagy képre. Az ezen oldal elején található thumbnail adatai láthatóak. Az src után a kis kép neve A Link után a nagy kép neve. A Targetnál blank van beállítva Ez azt jelenti, hogy rákattintáskor egy új ablakban jelenik meg a nagy kép. A Border nulla, ami azért kell, mert elég csúnya nélküle a linkképet körülvevő kék keret Mivel lehet thumbnail-eket készíteni? Bármely képszerkesztővel lehet. Ha nagy tételben akarunk kicsinyített képeket készteni, akkor használhatjuk az ACDSee 3 képnézegető programot. Lista nézetnél ki kell választani a kicsinyíteni kívánt képeket, majd a Plug-insnál HTML Album generator menüpontot választani. Itt a megfelelő értékeket kiválasztva a program elkészíti a kis képeket meg egy csomó felesleges html fájlt, amit utána törölni kell. Képváltó menü készítése A képváltó menü minden

menüpontjához két kép tartozik. Az első van kirakva, és az egér fölévitelére a második jelenik meg. Az egér elvitelekor az első kerül vissza A két képnek azonos méretűnek kell lennie. Megoldás lehet, ha a két kép között a szöveg szine más, vagy a háttér, az a lényeg, hogy a két kép passzoljon egymáshoz. Az Insert - Interactive Images - Rollover Image menüponttal lehet beilleszteni a képeket. Az Image Name a kép hivatkozási neve, ezt hagyhatjuk. Az Original Image-nél az alapképet, a Rollover Image-nél pedig a másik képet kell bejelölni. A Preload Rollover Image jelölőnégyzetet érdemes bejelölni. A preload azt jeleni, hogy az oldal letöltése után a böngésző automatikusan letölti a még meg nem lejent második képet is. Enélkül csak akkor tölti lea böngésző a második képet, amikor a menü felé visszük az egeret. Az utolsó mezőbe a linket kell beírni Az OK-ra kattintás után a program elhelyezi az alapképet és a

működtető JavaScript kódot. A menühöz való képek készítéséről az oldal Paint Shop Pro részében találhatsz leírást. Commands A Commands menüben hasznos dolgokat találhatunk. Az Apply Source Formatting a HTML kódot tagolja úgy, hogy világosan olvasható legyen. A Clean Up HTML kitisztítja a forrást. Az üres és redundáns Tag-eket eltünteti Be lehet írni külön is, ha egyfajta Tag-ek el akarunk távolítani a kódból. A Clean Up Word HTML az M$ Word által készített HTML kódot szabadítja meg az oda nem illő dolgoktól. A Word rengeteg programfüggő dolgot helyez el a forrásban, annak méretét jelentősen megnövelve, ráadásul ezt a kódot nem is tudja minden böngésző megjeleníteni. A Set Color Scheme menüpontnál sokféle színösszeállítás közül válogathatunk. Vannak köztünk egész jók is. A Web Safe Color Schemes azt jelenti, hogy a böngészők biztosan így fogják megjeleníteni ezeket a színeket. Vannak olyan színek is,

amelyeket a böngészők nem adnak jól vissza. Ha különleges táblázatot szeretnénk létrehozni, akkor a Format Table menüpontot használhatjuk. Itt számos táblázat-minta található, amelyen mi is változtathatunk. Táblázatok Új táblázat beillesztése az Insert - Table menüponttal lehetséges. A Rows a sorok, a Columns az oszlopok számát adja meg. A Wigth a szélesség pixelben vagy a rendelkezésre álló hely százalékában. A Border a táblázat szélének vastagságát adja meg A Cell Padding az a mező és a mezőben található szöveg közti távolságot jelöli, a Cell Spacing pedig a mezők távolságát egymástól. Cell Padding = 10 Cell Padding = 0 Cell Spacing = 0 Cell Spacing = 10 A Dreamweaver segítségével nagyon könnyen el lehet végezni a cellaegyesítést és szétválasztást. Egyesítésnél csak ki kell jelölni több cellát és az egyesítő ikonra kattintani. Szétválasztás esetén ki kell jelölni egy cellát, majd a

szétválasztó ikonra kattintani. Itt ki kell választani, hogy sorokat vagy oszlopokat akarunk-e képezni, és mennyit. Kiegészítők A Dreamweaverhez kiegészítőket (Extension) lehet csatolni a Macromedia Extension Manager segítségével. Az Internet Explorer 5.5 lehetőséget ad rá, hogy a görgetősávokat beszínezzük Ennek kezelésére való az IE5.5 Custom Scrollbars névre hallgató kiegészítő (ie55 scrollmxp) A fájlt importálva az Insert menü alján megjelenik az új menüpont. Rákattintva előhozhatjuk a színválasztó ablakot A Paint Shop Pro 7 használata A Jasc Paint Shop Pro programja egy nagyon jól használható képszerkesztő program. Már régóta használom, jelenleg a hetes verziót, a leírásban is erről lesz szó. A programnak csak azon elemeit tárgyalom, amelyeket honlapszerkesztés során használtam. Képlopás (Screen Capture) Ennek a programnak van az általam ismertek közül a legjobb képlopója. A beállításokat a File Import

- Screen Capture - Setup paranccsal hozhatjuk elő A Capture részen lehet beállítani, hogy milyen területet másoljon ki a program. Az Area úgy működik, hogy nekünk kell az egérrel kijelölni egy téglalapot. A Full Screen a teljes képernyőt, a Client Area pedig a Windows tálca kivételével a teljes képernyőt. A Window az éppen aktív ablakot menti el. Az Objectnél mi választhatjuk ki, hogy milyen objektumot mentsen el, ez bizonyult a leghasznosabb eszköznek. Kiválaszhatunk vele egy ablakot, groupboxot, gombot vagy bármi mást Az Activate capture usingnál lehet beállítani, hogy hogyan induljon a kép elmentése. Jobb egérgombra, billentyűzetnyomásra vagy időzítésre. A képlopási folyamatot el lehet indítani a File - Import - Screen Capture - Start menüponttal, vagy a toolbaron az utolsó ikonra kattintással. GIF képek mentése A GIF formátum csak 256 különböző szín megjelenítését engedélyezi. Viszont nincs megszabva az, hogy melyik legyen

az a 256 szín! Mielőtt egy képet GIF formátumba mentenénk, csökkentsük le a színpalettát 256 színre. Ezt a Color - Decrease Color Depth - 256 colors (8 bit) paranccsal tehetjük meg. Jelöljük be a Palette - Optimized Octree rádiógombot! Ez biztosítja azt, hogy a kép paletáján valóban azok a színek szerepelnek, amelyekből az eredeti kép állt, nem pedig az alapszínekből próbálja kikeverni a program. Átlátsztó GIF készítése A GIF lehet átlátszó is, a JPEG nem. Töltsük be a kívánt képet! A File - Export - GIF Optimizer menüpontra kattintsunk! Ki kell választani az Areas that match this color rádiógombot, és a mögötte található négyzetbe pedig azt a színt kell kiválasztani, amelyiket átlászónak szeretnénk látni a GIF képen. Az OK gombra kattintás után meg kell adni a GIF fájl nevét. Képváltó menühöz képek készítése Sokféle képet lehet készíteni a menühöz, most azt az esetet tekintjük, amikor a két kép

csak a rajta elhelyezkedő szöveg színében tér el egymástól. A képek készítésénél kihasználjuk a program rétegkezelési lehetőségét (layer). Először döntsük el, hogy mekkorák legyenek a menüpontok. Minden menüpontnak és a rajtuk elhelyezkedő szövegnek illik egyforma méretűnek lennie. Szedjük össze az összes menüpontot, és a leghosszabbat vegyük alapul a méret megállapításánál. Mivel minden menüpont csak a szövegekben tér el egymástól, készítsünk egy alapképet, amelyre majd rákerülnek a szövegek. Ezt a képet mentsük el valamely más néven is, nehogy letöröljük vagy felülírjuk. Minden új menükép készítésekor először erről az alapról készítsünk egy másolatot és azon dolgozzunk. Legyen a menü mérete 120x30 pixel! A File - New paranccsal készítsünk egy képet! A Width legyen 120, a Height legyen 30, a Background color legyen White! Mentsük el alap.jpg néven! Az elmentett képről készítsünk 1

másolatot, legyen menu1a.jpg Ez az első menüpont első képét jelenti. A másik neve menu1bjpg lesz Töltsük be a képet! Kattintsunk a Text eszközre (nagy A betű), majd valahova a képen! Megjelenik a szövegszerkesztő ablak. A szöveg legyen Főoldal. A font (Name) Comic Sans MS, a méret (Size) 18-as, a szín (Styles, Fill) fekete, és félkövér. Kattintsunk az OK gombra! Megjelenik a szöveg a képen. Ezután szabadon lehet mozgatni, forgatni. A Layer Palette lebegő ablakban látszanak a rétegek, az alapkép és a szöveg A Layer Palette ablakban ha 2x rákattintunk a szövegre, akkor újra előjön a szöveg szerkesztőablaka. A szöveg pozicionálását úgy végezzük, hogy középen fogjuk meg az egérrel, és mozgatás közben figyeljük a bal alsó sarokban a számokat. A középpont (60, 15)-nél van, ide kell kerülnie a feliratnak. Ha ezzel készen vagyunk, mentsük el a képet! Először PSP formátumba, hogy elmentsük a rétegeket is (menu1a.psp) Ez

nagyon fontos, ugyanis csak így lehet utólag módosítani a képeket. Utána mentsük el JPG formátumba is, a böngésző csak ezt tudja megjeleníteni (menu1a.jpg) Mentéskor a program figyelmeztet, hogy elveszítjük a rétegeket Készen van az első kép. A második kép csak abban fog különbözni az esőtől, hogy itt a szöveg színe kék lesz. Hívjuk be az elmentett menu1a.psp képet! Kattintsunk a Layer Palette ablakban a szövegre kétszer Ez előhozza a szerkesztőalbakot. A színt változtassuk kékre! A szöveg pozícióján nem szabad változtatni! Most mentsük el menu1b.jpg néven! Ezzel elkészült a két kép. A fentebb ismertetett módon mostmár elkészíthetjük az animált menüt is a Dreamweaver segítségével