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

Méret: px
Mutatás kezdődik a ... oldaltól:

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

Átírás

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19 Stíluslapok 5 151

20

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok Oktatási segédanyag Weboldalszerkesztési gyakorlatok Bevezetés A korábbi oktatási segédanyagokban megismertük a weboldalszerkesztés gyakorlatát. Ennek a segédanyagnak a célja, hogy gyakorlati példákon

Részletesebben

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat. A feladat megoldásához a Sharepoint Designer 2007 programot használjuk, mely ingyenesen letölthető a Microsoft weboldaláról. Az érettségi aktuális szoftverlistája alapján az Expression Web 2, az Expression

Részletesebben

Webshop készítése ASP.NET 3.5 ben I.

Webshop készítése ASP.NET 3.5 ben I. Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)

Részletesebben

Táblázatok. Táblázatok beszúrása. Cellák kijelölése

Táblázatok. Táblázatok beszúrása. Cellák kijelölése Táblázatok Táblázatok beszúrása A táblázatok sorokba és oszlopokba rendezett téglalap alakú cellákból épülnek fel. A cellák tartalmazhatnak képet vagy szöveget. A táblázatok használhatók adatok megjelenítésére,

Részletesebben

Egyszerő vízszintes navigáció készítése CSS segítségével. Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére.

Egyszerő vízszintes navigáció készítése CSS segítségével. Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére. Egyszerő vízszintes navigáció készítése CSS segítségével Ebben a cikkben egy egyszerő módszert fogunk bemutatni, vízszintes menü készítésére. A menüt lista elembıl fogjuk elkészíteni. Fogadja szeretettel

Részletesebben

Web programozás. 3. előadás

Web programozás. 3. előadás Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás

Részletesebben

Cikktípusok készítése a Xarayában

Cikktípusok készítése a Xarayában Cikktípusok készítése a Xarayában A Xaraya legfontosabb tulajdonsága az egyedi cikktípusok egyszerű készítésének lehetősége. Ezzel kiküszöbölhető egyedi modulok készítése, hiszen néhány kattintással tetszőleges

Részletesebben

1. kép. A Stílus beállítása; új színskála megadása.

1. kép. A Stílus beállítása; új színskála megadása. QGIS Gyakorló Verzió: 1.7. Wroclaw Cím: A Print composer használata és a címkézés. Minta fájl letöltése innen: http://www.box.net/shared/87p9n0csad Egyre több publikációban szerepelnek digitális térképek,

Részletesebben

A CorinMail hírlevélküldő rendszer szerkesztőfelületének használata:

A CorinMail hírlevélküldő rendszer szerkesztőfelületének használata: A CorinMail hírlevélküldő rendszer szerkesztőfelületének használata: CMS tartalom szerkesztő használata A CMS szerkesztő felületet alapvetően két nézetben tudjuk használni. Az alapbeállítás a vizuális

Részletesebben

1.1.1 Dátum és idő függvények

1.1.1 Dátum és idő függvények 1.1.1 Dátum és idő függvények Azt már tudjuk, hogy két dátum különbsége az eltelt napok számát adja meg, köszönhetően a dátum tárolási módjának az Excel-ben. Azt is tudjuk a korábbiakból, hogy a MA() függvény

Részletesebben

w w w. h a n s a g i i s k. h u

w w w. h a n s a g i i s k. h u Weblapkészítés weblap: hypertext kódolású dokumentumok, melyek szöveget képet linkeket, könyvjelzőket/horgonyokat táblázatokat / szövegdobozokat és más objektumokat tartalmaznak. Kódolásuk HTML (Hypertext

Részletesebben

Gyakorló 9. feladat megoldási útmutató

Gyakorló 9. feladat megoldási útmutató Gyakorló 9. feladat megoldási útmutató 1. Minek a leírása a következő? Aktív hálózati hardver eszközök (pl.: routerek) és szoftverek segítségével létrehozott biztonsági rendszer két hálózat (jellemzően

Részletesebben

A Google űrlap (form) használata

A Google űrlap (form) használata A Google űrlap (form) használata Az űrlap létrehozásához jelentkezzünk be a Google dokumentumok (http://docs.google.com/ ) oldalra. Az űrlap (Form) létrehozásához kattintsunk az Új létrehozása / Form menüpontra.

Részletesebben

Összetett feladatok. Föld és a Hold

Összetett feladatok. Föld és a Hold 1. feladat Összetett feladatok Föld és a Hold Készíts weblapot, ahol a Földet és a Holdat mutatod be! A weblaphoz tartozó nyers szöveg a fold.txt és a hold.txt tartalmazza. A forrásban megtalálod a fold.jpg

Részletesebben

A számítógép beállításainak megváltoztatása

A számítógép beállításainak megváltoztatása Megjelenés és témák Először tekintsük át, hogy hogyan lehet a képernyőn megjelenő elemek küllemét módosítani. Válasszuk a Start menü Vezérlőpultban a Megjelenés és témák hivatkozást. Itt kattintsunk a

Részletesebben

Egzinet Partner Portál

Egzinet Partner Portál Egzinet Partner Portál Adminisztrációs felület Oktatási segédanyag 1 Készítsd el saját weboldalad! I. Bejelentkezés Minden Egzinet Partner Portál a http://admin.egzinet.hu adminisztrációs felületen keresztül

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán

Részletesebben

Ozeki Weboffice. 1. ábra

Ozeki Weboffice. 1. ábra Ozeki Weboffice 1. A program indítása Először vegyük fel a szerkesztendő web oldalt az Edit your Website listába. A piros nyíllal jelölt mezőbe írjuk be a weboldal nevét, majd az OK gombbal érvényesítsük

Részletesebben

Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés

Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL. a., Begépelés Táblázatkezelés 2. - Adatbevitel, szerkesztés, formázás ADATBEVITEL a., Begépelés Az adatok bevitelének legegyszerűbb módja, ha a táblázat kijelölt cellájába beírjuk őket. - számok (numerikus adatok) -

Részletesebben

CÍMJEGYZÉK ÜDVÖZLÜNK A TALK FUSION CÍMJEGYZÉK HASZNÁLATI ÚTMUTATÓJÁBAN

CÍMJEGYZÉK ÜDVÖZLÜNK A TALK FUSION CÍMJEGYZÉK HASZNÁLATI ÚTMUTATÓJÁBAN CÍMJEGYZÉK ÜDVÖZLÜNK A TALK FUSION CÍMJEGYZÉK HASZNÁLATI ÚTMUTATÓJÁBAN A hét minden napján minden órában elérhető videó kommunikációs központodból, bármikor néhány lépéssel videó e-mail-t küldhetsz. Láss

Részletesebben

Webkezdő. A modul célja

Webkezdő. A modul célja Webkezdő A modul célja Az ECDL Webkezdő modulvizsga követelménye (Syllabus 1.5), hogy a jelölt tisztában legyen a Webszerkesztés fogalmával, és képes legyen egy weboldalt létrehozni. A jelöltnek értenie

Részletesebben

Stíluslapok használata (CSS)

Stíluslapok használata (CSS) 2. Laboratóriumi gyakorlat Stíluslapok használata (CSS) A gyakorlat célja: Bevezetés a CSS stíluslapok használatába. Felkészüléshez szükséges anyagok: 1. A 3-as segédlet (CSS) 2. A bibliográfia HTML illetve

Részletesebben

Thermo1 Graph. Felhasználói segédlet

Thermo1 Graph. Felhasználói segédlet Thermo1 Graph Felhasználói segédlet A Thermo Graph program a GIPEN Thermo eszközök Windows operációs rendszeren működő grafikus monitorozó programja. A program a telepítést követően azonnal használható.

Részletesebben

NeoCMS tartalommenedzselő szoftver leírása

NeoCMS tartalommenedzselő szoftver leírása NeoCMS tartalommenedzselő szoftver leírása A NeoSoft Informatika NeoCMS márkanévvel ellátott rendszere könnyen, gyorsan testre szabható tartalommenedzselő rendszer, mely egyedileg átalakítható, és így

Részletesebben

Online naptár használata

Online naptár használata Online naptár használata WEB: https://www.google.com/calendar A Google naptár egy olyan Google-fiókhoz kötött szolgáltatás, melynek használatával a felhasználók egy ingyenes, online rendszerben tárolhatják

Részletesebben

Outlook Express használata

Outlook Express használata Outlook Express használata Az induló ablak több részre oszlik Nyitott mappa tartalma Mappák Partnerek Az induló ablak nézetét testre lehet szabni a Nézet menü/elrendezés almenüjével Az eszköztár testreszabásához

Részletesebben

Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés.

Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés. Képnézeget Felhasználói dokumentáció Feladat: Java Script segítségével, olyan programot írni, mely képnézeget ként szolgál. Legalább 10 képet kell elhelyezni benne. Gombok választásával kell a design-ok

Részletesebben

ArcGIS 8.3 segédlet 5. Dr. Iványi Péter

ArcGIS 8.3 segédlet 5. Dr. Iványi Péter ArcGIS 8.3 segédlet 5. Dr. Iványi Péter Térképek prezentálása Tartalomjegyzék Az elkészített analízis eredményeit, vagy egyszerűen magát a térképet prezentálni is kell. Ez azt jelenti, hogy össze kell

Részletesebben

HVK Adminisztrátori használati útmutató

HVK Adminisztrátori használati útmutató HVK Adminisztrátori használati útmutató Tartalom felöltés, Hírek karbantartása A www.mvfportal.hu oldalon a bejelentkezést követően a rendszer a felhasználó jogosultsági besorolásának megfelelő nyitó oldalra

Részletesebben

Memória játék. Felhasználói dokumentáció

Memória játék. Felhasználói dokumentáció Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.

Részletesebben

Választó lekérdezés létrehozása

Választó lekérdezés létrehozása Választó lekérdezés létrehozása A választó lekérdezés egy vagy több rekordforrásból származó adatokat jelenít meg. A választó lekérdezések a táblák, illetve az adatbázis tartalmát nem változtatják meg,

Részletesebben

Tantárgyfelosztás. I. Ellenőrzés. Mielőtt hozzákezd a tantárgyfelosztás tervezéséhez, ellenőrizze le, illetve állítsa be a következőket:

Tantárgyfelosztás. I. Ellenőrzés. Mielőtt hozzákezd a tantárgyfelosztás tervezéséhez, ellenőrizze le, illetve állítsa be a következőket: Tantárgyfelosztás I. Ellenőrzés Mielőtt hozzákezd a tantárgyfelosztás tervezéséhez, ellenőrizze le, illetve állítsa be a következőket: Alkalmazott képes menü > alkalmazottak alapadatai - Alkalmazottak

Részletesebben

ONLINE SZAKÉRTŐI KERETRENDSZER

ONLINE SZAKÉRTŐI KERETRENDSZER FELHASZNÁLÓI SEGÉDLET 1. ÁBRA 1.Lépés Szakértői rendszer főbb paramétereinek megadása 0. Ellenőrzés bekapcsolása (Ha első alkalommal használja a rendszert ajánlott kipipálni). A rendszer a megadott paramétereket

Részletesebben

5-ös lottó játék. Felhasználói dokumentáció

5-ös lottó játék. Felhasználói dokumentáció 5-ös lottó játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével 5-ös lottó játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az

Részletesebben

Szöveges műveletek. Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével:

Szöveges műveletek. Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével: Alapvető szabályok Mielőtt nekikezdenénk első szövegünk bevitelének, tanuljunk meg néhány alapvető műveletet a 2003-as verzió segítségével: Minden szöveges elem szövegdobozban, objektumban helyezkedik

Részletesebben

Minta a Szigetvár feladathoz

Minta a Szigetvár feladathoz Minta a Szigetvár feladathoz A forrást (sziget.txt) megnyitjuk a Jegyzettömb segítségével és a szöveget a Vágólap segítségével átmásoljuk az alapértelmezetten megnyíló üres dokumentumba, majd elmentjük

Részletesebben

POSZEIDON dokumentáció (1.2)

POSZEIDON dokumentáció (1.2) POSZEIDON dokumentáció (1.2) Bevezetés a Poszeidon rendszer használatába I. TELEPÍTÉS Poszeidon alkalmazás letölthető: www.sze.hu/poszeidon/poszeidon.exe Lépések: FUTTATÁS / (FUTTATÁS) / TOVÁBB / TOVÁBB

Részletesebben

ÉRETTSÉGI MÁSODIK GYAKORLAT ELINDULÁS A PAPÍRMÉRET ÉS A MARGÓK BEÁLLÍTÁSA. ÜZLETI INFORMATIKAI ESZKÖZÖK Kiadványszerkesztés

ÉRETTSÉGI MÁSODIK GYAKORLAT ELINDULÁS A PAPÍRMÉRET ÉS A MARGÓK BEÁLLÍTÁSA. ÜZLETI INFORMATIKAI ESZKÖZÖK Kiadványszerkesztés 1 MÁSODIK GYAKORLAT ÉRETTSÉGI A feladat megoldása során a Word 2010 használata a javasolt. Ebben a feladatban a következőket fogjuk gyakorolni: A papírméret és a margók beállítása. Stílusok létrehozása,

Részletesebben

TABULÁTOROK TÁBLÁZATOK KÉSZÍTÉSE. A táblázatok készítésének lehetőségei:

TABULÁTOROK TÁBLÁZATOK KÉSZÍTÉSE. A táblázatok készítésének lehetőségei: TABULÁTOROK A tabulátorokat a szavak soron belüli pontos pozicionálására használjuk. A tabulátorokat valamilyen pozícióhoz kötjük. A pozíciók beállíthatók vonalzón vagy a Formátum menü Tabulátorok menüpontjának

Részletesebben

Diagram formázása. A diagram címének, a tengelyek feliratainak, jelmagyarázatának, adatfeliratainak formázása

Diagram formázása. A diagram címének, a tengelyek feliratainak, jelmagyarázatának, adatfeliratainak formázása A diagram címének, a tengelyek feliratainak, jelmagyarázatának, adatfeliratainak formázása Ha ezen elemeknek a betűtípusát, betűstílusát, betűméretét, betűszínét és az elem hátterét akarjuk formázni, akkor

Részletesebben

Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben?

Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben? Hogyan készítsünk Colorbox-os képgalériát Drupal 7-ben? (Jó segítség: http://www.youtube.com/watch?v=gstnfznz3hg) I. Telepteni kell az alábbi három dolgot 1. A Colorbox modult (https://www.drupal.org/project/colorbox)

Részletesebben

Diagram készítése. Diagramok formázása

Diagram készítése. Diagramok formázása Diagram készítése Diagramok segítségével a táblázatban tárolt adatainkat különféle módon ábrázolhatjuk. 1. A diagram készítésének első lépése az adatok kijelölése a táblázatban, melyekhez diagramot szeretnénk

Részletesebben

Szia Ferikém! Készítek neked egy leírást mert bánt, hogy nem sikerült személyesen megoldani a youtube problémát. Bízom benne, hogy segít majd.

Szia Ferikém! Készítek neked egy leírást mert bánt, hogy nem sikerült személyesen megoldani a youtube problémát. Bízom benne, hogy segít majd. Szia Ferikém! Készítek neked egy leírást mert bánt, hogy nem sikerült személyesen megoldani a youtube problémát. Bízom benne, hogy segít majd. Első lépés: Töltsd le a programot innen: http://download.vessoft.com/files/fyds/freeyoutubedownoad.exe

Részletesebben

DuneHD.hu. Kompatibilis médialejátszók: Dune HD Center Dune BD Prime Dune HD Base 2.0 Dune HD Base 3.0 Dune BD Prime 3.0

DuneHD.hu. Kompatibilis médialejátszók: Dune HD Center Dune BD Prime Dune HD Base 2.0 Dune HD Base 3.0 Dune BD Prime 3.0 A Zappiti egy donationware, vagyis ingyenes program, mellyel kibővítheted Dune médialejátszód képességeit. A leírás a Zappiti 1.2.1 Beta változata alapján készült. Kompatibilis médialejátszók: Dune HD

Részletesebben

Avery Design Pro 4.0

Avery Design Pro 4.0 Avery Design Pro 4.0 Felhasználói útmutató Az Avery Design egy egyszerű, de sokfunkciós, könnyen kezelhető címkenyomtató, kártyatervező program. Készítsük el a kártyasablont Indításkor az Üdvözlő ablak

Részletesebben

1. Metrótörténet. helyezze el!

1. Metrótörténet. helyezze el! 1. Metrótörténet A f városi metróhálózat a tömegközlekedés gerincét adja. A vonalak építésének története egészen a XIX. század végéig nyúlik vissza. Feladata, hogy készítse el a négy metróvonal történetét

Részletesebben

Szkennelt térkép vektorizálás QGIS programban 2.x verzió Összeállította: dr. Siki Zoltán

Szkennelt térkép vektorizálás QGIS programban 2.x verzió Összeállította: dr. Siki Zoltán Szkennelt térkép vektorizálás QGIS programban 2.x verzió Összeállította: dr. Siki Zoltán Egy szkennelt ingatlan-nyilvántartási térkép részlet vektorizálását mutatjuk be. A munka a további részekre bontható:

Részletesebben

Több oldalas dokumentum készítése. MS Word 2010 szövegszerkesztővel

Több oldalas dokumentum készítése. MS Word 2010 szövegszerkesztővel Több oldalas dokumentum készítése MS Word 2010 szövegszerkesztővel Egy többoldalas dokumentummal szemben támasztott követelmények (példa feladaton keresztül bemutatva) Készítsünk hat oldalas dokumentumot,

Részletesebben

Képek a HTML oldalon

Képek a HTML oldalon Képek a HTML oldalon Utolsó módosítás: 11/22/2004 13:07:28 Háttérkép Ahhoz, hogy az adott oldal háttérképpel rendelkezzen, a részben el kell helyeznünk a background="kep" paramétert, ahol a kép

Részletesebben

Táblázatok kezelése. 1. ábra Táblázat kezelése menüből

Táblázatok kezelése. 1. ábra Táblázat kezelése menüből Táblázat beszúrása, létrehozása A táblázatok készítésének igénye már a korai szövegszerkesztőkben felmerült, de ezekben nem sok lehetőség állt rendelkezésre. A mai szövegszerkesztőket már kiegészítették

Részletesebben

Integráció LadyBirddel

Integráció LadyBirddel Integráció LadyBirddel 1 A ShopRenter és a Ladybird integrációjához beállításokat kell eszközölnünk mind a ShopRenter, mind a LadyBird felületén. Elsőként a LadyBirdben kell elvégeznünk teendőinket, mert

Részletesebben

Ablakok. Fájl- és mappaműveletek. Paint

Ablakok. Fájl- és mappaműveletek. Paint Ablakok. Fájl- és mappaműveletek. Paint I. Ablakok I.1. Ablak fogalma Windows = ablak, rövidítése: win Program indítás kinyílik az ablaka I.2. Ablak részei A programablak rendszerint az alábbi részekre

Részletesebben

Készítsünk weblapot könnyedén! A Google Sites használata. Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül!

Készítsünk weblapot könnyedén! A Google Sites használata. Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül! Készítsünk weblapot könnyedén! A Google Sites használata Weboldal készítés Google Sites szolgáltatás segítségével, web-fejlesztési ismeretek nélkül! Készítette: Tratnyek Csilla 2010.03.01. Készítsünk weblapot

Részletesebben

Tananyagszerkesztése Moodle rendszerben

Tananyagszerkesztése Moodle rendszerben Tananyagszerkesztése Moodle rendszerben A Moodle e-learning rendszer az oktatás-menedzsment feladatok ellátása mellett természetesen lehetőséget biztosít meglévő digitális tananyagok feltöltésére és rendszerezésére,

Részletesebben

Kifizetések kezelése. 1 Kifizetési dátumok megadása pénzügyi kódokhoz

Kifizetések kezelése. 1 Kifizetési dátumok megadása pénzügyi kódokhoz Kifizetések kezelése 1 Kifizetési dátumok megadása pénzügyi kódokhoz 1.1 Pénzügyi kódok menüponttól indulva Pénzügyek (kék menüpont, csak lenyitni + jelnél)(78600)/kifizetési jogcímek (jogcím kiválasztása)

Részletesebben

Weblap készítése. Fapados módszer

Weblap készítése. Fapados módszer Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt

Részletesebben

HTML é s wéblapféjlészté s

HTML é s wéblapféjlészté s HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak

Részletesebben

Adabáziselérés ODBC-n keresztül utasításokkal C#-ban

Adabáziselérés ODBC-n keresztül utasításokkal C#-ban Adabáziselérés ODBC-n keresztül utasításokkal C#-ban 1. Előkészítés Access adatbázis lemásolása, ODBC DSN létrehozása Másoljuk le az alábbiakat: Mit Honnan Hova list.mdb p:\johanyák Csaba\Vizualis programozas\data\

Részletesebben

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width

Részletesebben

HTML kódolás Web-lap felépítése. Az egész törzsre érvényes utasítás. web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól

HTML kódolás Web-lap felépítése. Az egész törzsre érvényes utasítás. <HTML> web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól HTML kódolás Web-lap felépítése web-lap kezdő utasítás: a dokumentum kezdődik, a böngészőnek szól fejléc kezdő utasítás: a böngészőnek és a kereső robotoknak szóló elemek Fejléc elemek,

Részletesebben

HTML ÉS PHP AZ ALAPOKTÓL

HTML ÉS PHP AZ ALAPOKTÓL 1 HTML ÉS PHP AZ ALAPOKTÓL Bevezetés a HTML és a CSS világába Before we start 2 A kurzus blogja: http://bcecid.net/tag/php-kurzus-2011-12-tavasz A példaprogramok innen lesznek letölthetők Könyvek HTML

Részletesebben

Szövegszerkesztés alapok WORD Formázások

Szövegszerkesztés alapok WORD Formázások Szövegszerkesztés alapok WORD Formázások A formázás sorrendje 1. Begépelem a szöveget folyamatosan 2. Helyesírást ellenőrzök 3. Entert (bekezdés) vagy Shift + Entert ütök 4. Formázok KIJELÖLÖM A FORMÁZANDÓ

Részletesebben

Dokumentum létrehozása/módosítása a portálon:

Dokumentum létrehozása/módosítása a portálon: Dokumentum létrehozása/módosítása a portálon: 1. Belépés a szerkesztőfelületre A következő webcímre belépve - http://www.zalaegerszeg.hu/licoms/login - megjelenik a szerkesztőfelület beléptető ablaka,

Részletesebben

2. lecke. A bibliaolvasó tervkészítı

2. lecke. A bibliaolvasó tervkészítı 2. lecke A bibliaolvasó tervkészítı A rendszeres bibliaolvasásban többféle vezérfonal is segítségünkre lehet, de el is készíthetjük a sajátunkat. Ebben segít a bibliaolvasó tervkészítı. A bibliaolvasó

Részletesebben

A LOGO MOTION TANÍTÁSA

A LOGO MOTION TANÍTÁSA A LOGO MOTION TANÍTÁSA ÍRTA: SZABÓ JÁNOS TANÍTÓ 2010, KECEL LOGO MOTION TANÍTÁSA KÉSZÍTETTE: SZABÓ JÁNOS TANÍTÓ 2010. 1 1. FOGLALKOZÁS Kattintsunk a Logo motion ikonjára. A Színes teki. Ez a program ablaka.

Részletesebben

Képernyőképes segédlet a Prompt e-learning portál használatához

Képernyőképes segédlet a Prompt e-learning portál használatához Képernyőképes segédlet a Prompt e-learning portál használatához Regisztráció 1. lépés Az edu.prompt.hu címen elérhető e-learning portál használatához minden résztvevőnek szükséges elkészítenie a saját

Részletesebben

I/1. Pályázati adatlap

I/1. Pályázati adatlap I/1. Pályázati adatlap Készítsd el a mintán látható A4-es méretű adatlapot! A következő feladatok ehhez nyújtanak útmutatást. Az adatlap teljes szövegét tartalmazó forrásfájl és a felhasznált kép a mellékelt

Részletesebben

Az Kompozer, illetve az NVU honlapszerkesztő program

Az Kompozer, illetve az NVU honlapszerkesztő program Az Kompozer, illetve az NVU honlapszerkesztő program A programról A program felülete A program indítása után a következő felület jelenik meg: A fenti képen bemutatott eszköztárakat a Nézet / Megjelenítés/Elrejtés

Részletesebben

Az Óbudai Egyetem Moodle rendszere. Felhasználói kézikönyv hallgatóknak

Az Óbudai Egyetem Moodle rendszere. Felhasználói kézikönyv hallgatóknak Az Óbudai Egyetem Moodle rendszere Felhasználói kézikönyv hallgatóknak A rendszert azért hoztuk létre, hogy minél hatékonyabban tudjuk támogatni az elektronikus oktatást, és hogy az Egyetemen egy központi

Részletesebben

A Paint program használata

A Paint program használata A Paint program használata A Windows rendszerbe épített Paint program segítségével képeket rajzolhat, színezhet és szerkeszthet. A Paint használható digitális rajztáblaként. Egyszerű képek és kreatív projektek

Részletesebben

Duál Reklám weboldal Adminisztrátor kézikönyv

Duál Reklám weboldal Adminisztrátor kézikönyv Duál Reklám weboldal Adminisztrátor kézikönyv Dokumentum Verzió: 1.0 Készítette: SysWork Szoftverház Kft. 1. oldal Felület elérése Az adminisztrációs felület belépés után érhető el. Belépés után automatikusan

Részletesebben

Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán

Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán Bevezetés Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán A QGIS program egy nyiltforrású asztali térinformatikai program, mely a http://www.qgis.org oldalról tölthető le. Ebben a kis

Részletesebben

Az előző lecke már gyakorlati volt, ez is az lesz. További eszközökkel ismerkedünk meg, szintén gyakorlatban, ezért két feladatot is kidolgozunk!

Az előző lecke már gyakorlati volt, ez is az lesz. További eszközökkel ismerkedünk meg, szintén gyakorlatban, ezért két feladatot is kidolgozunk! Az előző lecke már gyakorlati volt, ez is az lesz. További eszközökkel ismerkedünk meg, szintén gyakorlatban, ezért két feladatot is kidolgozunk! Második kidolgozott feladat További feladatok A második

Részletesebben

VARIO Face 2.0 Felhasználói kézikönyv

VARIO Face 2.0 Felhasználói kézikönyv VARIO Face 2.0 Felhasználói kézikönyv A kézikönyv használata Mielőtt elindítaná és használná a szoftvert kérjük olvassa el figyelmesen a felhasználói kézikönyvet! A dokumentum nem sokszorosítható illetve

Részletesebben

Alapvető beállítások elvégzése Normál nézet

Alapvető beállítások elvégzése Normál nézet Alapvető beállítások elvégzése Normál nézet A Normál nézet egy egyszerűsített oldalképet mutat. Ez a nézet a legalkalmasabb a szöveg beírására, szerkesztésére és az egyszerűbb formázásokra. Ebben a nézetben

Részletesebben

Személyes weblap (kezdőlap) szerkesztése

Személyes weblap (kezdőlap) szerkesztése Személyes weblap (kezdőlap) szerkesztése Az RSS csatornákkal kapcsolatos web 2.0-ás eszközök lehetővé teszik, hogy az RSS hírolvasáson túl saját, személyre szabott weboldalt (ún. személyes kezdőlapot)

Részletesebben

WordPress segédlet. Bevezető. Letöltés. Telepítés

WordPress segédlet. Bevezető. Letöltés. Telepítés WordPress segédlet Bevezető A WordPress egy ingyenes tartalomkezelő rendszer (Content Management System - CMS), amely legnagyobb előnye az egyszerű telepítés és a letisztult kezelhetőség és a változatos

Részletesebben

Tabulátorok, felsorolás, stílusok Tabulátorok

Tabulátorok, felsorolás, stílusok Tabulátorok Tabulátorok, felsorolás, stílusok Tabulátorok A szöveg a bekezdésben balra, jobbra sorkizártan vagy középre igazodik, a bekezdés igazításától függően. Ekkor a bekezdés valamennyi és teljes sora eszerint

Részletesebben

Alapok: Használd számológép helyett

Alapok: Használd számológép helyett Alapok: Használd számológép helyett Az Excelt ugyanúgy használhatod, mint a számológépet, vagyis bármit ki tudsz vele számolni. Egész egyszerűen csak írj egy egyenlőségjelet a sor elejére és aztán ugyanúgy,

Részletesebben

Készítsen négy oldalas prezentációt az E CD bolt számára! Tervezze meg az emblémáját!

Készítsen négy oldalas prezentációt az E CD bolt számára! Tervezze meg az emblémáját! 2. feladat Készítsen négy oldalas prezentációt az E CD bolt számára! Tervezze meg az emblémáját! 1.Válasszon egyedi hátteret a prezentációnak! 2.Minden oldalon a bolt neve és emblémája jelenjen meg! Az

Részletesebben

Bérprogram vásárlásakor az Ügyfélnek e-mailben és levélben is megküldjük a termék letöltéséhez és aktiválásához szükséges termékszámot.

Bérprogram vásárlásakor az Ügyfélnek e-mailben és levélben is megküldjük a termék letöltéséhez és aktiválásához szükséges termékszámot. Telepítés Bérprogram vásárlásakor az Ügyfélnek e-mailben és levélben is megküldjük a termék letöltéséhez és aktiválásához szükséges termékszámot. A programot honlapunkról, az alábbi linkről tudják letölteni:

Részletesebben

Minta: nappali.html. ejjeli.html. A képek forrása: http://www.pwbelg.clara.net/aberrations/abs.html

Minta: nappali.html. ejjeli.html. A képek forrása: http://www.pwbelg.clara.net/aberrations/abs.html Az alábbi feladatok középszintű érettségi példák. A megoldáshoz szükséges fájlok a /mnt/tanulo/_info/forraások/html mappában találhatók. Megoldásodat e-mail-ben várom, melynek közönséges böngészővel megjeleníthetőnek

Részletesebben

Szülői modul. Belépés a TANINFORM rendszerbe. Főoldal

Szülői modul. Belépés a TANINFORM rendszerbe. Főoldal Szülői modul Belépés a TANINFORM rendszerbe Belépni vagy a bogim.hu oldalon elhelyezett linkre való kattintással vagy a https://start.taninform.hu/application/start?intezmenyindex=032552 cím böngészőbe

Részletesebben

Táblázatos adatok használata

Táblázatos adatok használata Táblázatos adatok használata Tartalomjegyzék 1. Az adatok rendezése...2 2. Keresés a táblázatban...2 3. A megjelenő oszlopok kiválasztása...3 4. Az oszlopok sorrendjének meghatározása...4 5. Az oszlopok

Részletesebben

4. Javítás és jegyzetek

4. Javítás és jegyzetek és jegyzetek Schulcz Róbert schulcz@hit.bme.hu A tananyagot kizárólag a BME hallgatói használhatják fel tanulási céllal. Minden egyéb felhasználáshoz a szerző engedélye szükséges! 1 Automatikus javítás

Részletesebben

Képek és grafikák használata

Képek és grafikák használata Kép elhelyezése a dokumentumban A mai szövegszerkesztők támogatják a képek használatát, ezért egy dokumentum nemcsak szöveget, hanem képeket is tartalmazhat. A Word szövegszerkesztő a képek és rajzok szövegen

Részletesebben

TvNetTel Internet Kapcsolat Beállítása

TvNetTel Internet Kapcsolat Beállítása TvNetTel Internet Kapcsolat Beállítása A TvNetTel Kft internetes szolgáltatásának igénybevételéhez szükséges a hálózati csatlakozás beállítása a számítógépen vagy routeren. A beállításhoz szükség van a

Részletesebben

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK

WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK ECDL Webszerkesztés, syllabus 2.0 WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK 1. Mi az FTP? a) Az FTP a multimédiás dokumentumok leíró nyelve. b) Az FTP a weboldalon lévő kattintható elem, amellyel egy másik

Részletesebben

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK

ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK HTML dokumentum = weblap = weboldal = webpage Egy HTML dokumentum kiterjesztései: HTM vagy HTML STÍLUSLAP = Egy vagy több HTML utasítás, értékekkel ellátott paramétereinek

Részletesebben

Blog (Google Blogger) használata

Blog (Google Blogger) használata Blog (Google Blogger) használata A blog naplószerű bejegyzések internetes közzétételére alkalmas weboldal. Elterjedtek az ún. személyes blogok, amikor egy-egy személyhez kötődő naplóbejegyzéseket találunk;

Részletesebben

Weboldal grafika készítés elméleti síkon Grafikából szabáványos CSS és XHTML sablon

Weboldal grafika készítés elméleti síkon Grafikából szabáványos CSS és XHTML sablon Az elméleti rész után jöhet a gyakorlati megvalósítás. A grafika nem lesz túl bonyolult, hogy egyszerűen reprodukálható legyen bárki számára. A megvalósítási szakasz inkább csak érzékeltetés, hogy mire

Részletesebben

FTP Az FTP jelentése: File Transfer Protocol. Ennek a segítségével lehet távoli szerverek és a saját gépünk között nagyobb állományokat mozgatni. Ugyanez a módszer alkalmas arra, hogy a kari web-szerveren

Részletesebben

Aromo Szöveges értékelés normál tantárggyal

Aromo Szöveges értékelés normál tantárggyal Aromo Szöveges értékelés normál tantárggyal Aromo Iskolaadminisztrációs Szoftver Felhasználói kézikönyv -- Szöveges értékelés 1 Tartalomjegyzék Aromo Szöveges értékelés normál tantárggyal 1 Bevezetés 3

Részletesebben

AÁ OK sablon. Tartalomjegyzék. Használati útmutató

AÁ OK sablon. Tartalomjegyzék. Használati útmutató AÁ OK sablon Használati útmutató Tartalomjegyzék Dia elrendezésének kiválasztása... 2 Szöveg formázása... 3 Ajánlott betűformázások... 4 Színek használata... 5 Kép beillesztése... 6 Diagram formázása...

Részletesebben

HP Photo Printing referenciaútmutató

HP Photo Printing referenciaútmutató Képek bevitele a képtárba Az alábbi eljárások bármelyikével képeket adhat a képtárhoz. A képtár a HP Photo Printing program bal oldali ablaktáblája. Ez a nyomtatásnak és a fényképalbumlapok létrehozásának

Részletesebben

Microsoft Office PowerPoint 2007 fájlműveletei

Microsoft Office PowerPoint 2007 fájlműveletei Microsoft Office PowerPoint 2007 fájlműveletei Program megnyitása Indítsuk el valamelyik tanult módszerrel a 2007-es verziót. Figyeljük meg, hogy most más felületet kapunk, mint az eddigi megszokott Office

Részletesebben

Tele Élettel Programportál. Adminisztrátori segédlet

Tele Élettel Programportál. Adminisztrátori segédlet Tele Élettel Programportál Adminisztrátori segédlet 2015 Tartalomjegyzék 1. Belépés az admin felületre... 2 2. Profil adatok, jelszó megváltoztatása... 3 3. Új esemény feltöltése... 3 3.1. Az esemény fő

Részletesebben

Microsoft Word előadás. Bevezetés az informatikába I.

Microsoft Word előadás. Bevezetés az informatikába I. Microsoft Word előadás Bevezetés az informatikába I. A Word felépítése Menüsor Eszköztár Vonalzók Kurzor Dokumentum Állapotsor Betűk betűtípus fogalma betűméret félkövér, dőlt, aláhúzott proporcionális

Részletesebben

Internet TV Broadcaster kézikönyv

Internet TV Broadcaster kézikönyv Internet TV Broadcaster kézikönyv Rövid ismertetető: Az Internet TV broadcaster segítségével flv vagy mp4 videó fájlokat műsorlistába rendezve sugározhatunk Internetes TV adásokat. Annyi a dolgunk, hogy

Részletesebben

A Down Alapítvány weboldalának szerkesztése A Down Alapítvány weboldalát ezen a címen találunk meg: http://web.downalapitvany.hu/ Regisztráció a Down Alapítvány weboldalán Keressük meg a jobb oldalon található

Részletesebben