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

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

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

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

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

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

Ö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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 É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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ablak és ablakműveletek

Ablak és ablakműveletek Ablak és ablakműveletek 1. Jelölje meg az igaz állításokat! A. A képen egy ablakot lehet látni. B. A Windows operációs rendszerben a mappák és programok ablakokban nyílnak meg. C. Egyszerre csak egy ablakot

Részletesebben

Aromo Szöveges Értékelés

Aromo Szöveges Értékelés Aromo Szöveges Értékelés AROMO Iskolaadminisztrációs Szoftver v2.50 - Felhasználói kézikönyv- Szöveges értékelés 1 Tartalomjegyzék Aromo Szöveges Értékelés 1 Bevezetés 3 A Szöveges Értékelés modul koncepciója

Részletesebben

Prezentáció Microsoft PowerPoint XP

Prezentáció Microsoft PowerPoint XP Prezentáció Microsoft PowerPoint XP Megoldások 1. A program indításakor a Munkaablakban válasszuk az Előadás-tervező varázslóval hivatkozást! A Varázsló segítségével hozzuk létre a bemutatót! A kész bemutatót

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

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

A Down Alapítvány weboldalának (honlap) használata Weboldal szerkesztés

A Down Alapítvány weboldalának (honlap) használata Weboldal szerkesztés A Down Alapítvány weboldalának (honlap) használata Weboldal szerkesztés A weboldalakat, más néven honlapokat azért készítik, hogy egy személyt, vagy szervezetet, például egy alapítványt, megtaláljanak

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

SzePi Moodle tanári kézikönyv 1.0. A Dugonics András Piarista Gimnázium Moodle rendszerének elérése: http://moodle.szepi.hu

SzePi Moodle tanári kézikönyv 1.0. A Dugonics András Piarista Gimnázium Moodle rendszerének elérése: http://moodle.szepi.hu SzePi Moodle tanári kézikönyv 1.0 A Dugonics András Piarista Gimnázium Moodle rendszerének elérése: http://moodle.szepi.hu Bejelentkezés Az oldalra navigálva, először be kell jelentkeznünk. Ha a jobb felső

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

1.A. feladat: Programablakok

1.A. feladat: Programablakok 1.A. feladat: Programablakok Nyisd meg sorban a Sajátgép mappát, Hálózatok mappát, indítsd el az Internet Explorer programot. Ehhez kattints kettőt mindegyik asztalon lévő ikonjára. Ha egy ablak teljes

Részletesebben

Az MS Word szövegszerkesztés modul részletes tematika listája

Az MS Word szövegszerkesztés modul részletes tematika listája Az MS Word szövegszerkesztés modul részletes tematika listája A szövegszerkesztés alapjai Karakter- és bekezdésformázás Az oldalbeállítás és a nyomtatás Tabulátorok és hasábok A felsorolás és a sorszámozás

Részletesebben

First Voice Kft. Stilldesign Üzletág www.stilldesign.hu

First Voice Kft. Stilldesign Üzletág www.stilldesign.hu A weboldalt és az admin felületet tervezte és fejlesztette: First Voice Kft. Stilldesign Üzletág www.stilldesign.hu 1 2 www.kvtagozat.hu Belépés minden regisztrált látogatónak saját egyedi felhasználónévvel

Részletesebben

(statikus) HTML (XHTML) oldalak, stíluslapok

(statikus) HTML (XHTML) oldalak, stíluslapok (statikus) HTML (XHTML) oldalak, stíluslapok Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok CSS Áttekintés A HTML története HTML oldal felépítése Egymásba ágyazható stíluslapok

Részletesebben

BEJEGYZÉSEK, OLDALAK LÉTREHOZÁSA ÉS SZERKESZTÉSE WORDPRESS-BEN

BEJEGYZÉSEK, OLDALAK LÉTREHOZÁSA ÉS SZERKESZTÉSE WORDPRESS-BEN Mgr. Námesztovszki Zsolt BEJEGYZÉSEK, OLDALAK LÉTREHOZÁSA ÉS SZERKESZTÉSE WORDPRESS-BEN Eötvös Loránd Tudományegyetem, Pedagógiai és Pszichológiai Kar Oktatásinformatikai rendszerek - szöveggyűjtemény

Részletesebben

Ismerkedés az új felülettel

Ismerkedés az új felülettel Ismerkedés az új felülettel A 2003-as verzióhoz képes változott a menüszerkezet. Az ablak tetején menüszalag található, amely előtérbe helyezi a legfontosabb parancsokat, így nem kell a program legkülönbözőbb

Részletesebben

CitiDirect BE SM Felhasználói útmutató

CitiDirect BE SM Felhasználói útmutató CitiDirect BE SM Felhasználói útmutató Bejelentkezés A CitiDirect BE SM futtatásának minimális rendszerkövetelményei megegyeznek a CitiDirect Online Banking rendszer követelményeivel. Kérjük, kattintson

Részletesebben

Word I. Bevezető. Alapfogalmak

Word I. Bevezető. Alapfogalmak Word I. Bevezető A szövegszerkesztők segítségével igényesen kialakított dokumentum készítésére van lehetőségünk, de használhatjuk levelek akár elektronikus levelek írására is. Tananyagunkkal a szövegszerkesztési

Részletesebben

ÚJDONSÁGOK AZ FLP WEBSHOPBAN

ÚJDONSÁGOK AZ FLP WEBSHOPBAN ÚJDONSÁGOK AZ FLP WEBSHOPBAN Jelszó igénylés E-mail cím változtatás Jelentkezési lap nyomtatás Kosár küldése e-mailben Kosár ajánlása linkkel (FLP360 weboldalra való beillesztés) Meghívó küldése NDP és

Részletesebben

3. modul - Szövegszerkesztés

3. modul - Szövegszerkesztés 3. modul - Szövegszerkesztés - 1-3. modul - Szövegszerkesztés Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a modulvizsga követelményrendszere. A modul célja Ezen a vizsgán

Részletesebben

Mesh generálás. IványiPéter

Mesh generálás. IványiPéter Mesh generálás IványiPéter drview Grafikus program MDF file-ok szerkesztéséhez. A mesh generáló program bemenetét itt szerkesztjük meg. http://www.hexahedron.hu/personal/peteri/sx/index.html Pont létrehozásához

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 leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram.

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram. 1, Készítsünk egy 160 160-as új képet. Azért kell ekkora, hogy kényelmesen elférjünk benne, majd

Részletesebben

1. Létező postafiók megadása. ipad menünk felületén válasszuk a Mail opciót, amivel megadhatjuk hozzáadandó postafiókunk típusát.

1. Létező postafiók megadása. ipad menünk felületén válasszuk a Mail opciót, amivel megadhatjuk hozzáadandó postafiókunk típusát. 1. Létező postafiók megadása ipad menünk felületén válasszuk a Mail opciót, amivel megadhatjuk hozzáadandó postafiókunk típusát. 2. Fióktípus megadása Rendszerünkben található postafiókjainak beállításához

Részletesebben

WebAromo elindítása, bejelentkezés

WebAromo elindítása, bejelentkezés WebAromo segédlet Tartalom WebAromo elindítása, bejelentkezés... 3 Jelszó beállítása... 3 Foglalkozások kezelése... 4 Hiányzások megadása... 5 Érdemjegy bevitele... 6 Érdemjegyek megtekintése... 8 Egy

Részletesebben

CAD-ART Kft. 1117 Budapest, Fehérvári út 35.

CAD-ART Kft. 1117 Budapest, Fehérvári út 35. CAD-ART Kft. 1117 Budapest, Fehérvári út 35. Tel./fax: (36 1) 361-3540 email : cad-art@cad-art.hu http://www.cad-art.hu PEPS CNC Programozó Rendszer Oktatási Segédlet Laser megmunkálás PEPS 4 laser megmunkálási

Részletesebben

Nevelési év indítása óvodák esetén

Nevelési év indítása óvodák esetén Nevelési év indítása óvodák esetén A LÉPÉSEK SORRENDJE NAGYON FONTOS, EZÉRT KÉRJÜK SZIGORÚAN BETARTANI! - Mielőtt elkezdi a nevelési év indítását, kérem, legalább egyszer olvassa át az egész segédletet,

Részletesebben

ÉRTÉKELÉS: VIZSGÁZTATÓ ALÁÍRÁSA:... VIZSGÁZÓ NEVE:

ÉRTÉKELÉS: VIZSGÁZTATÓ ALÁÍRÁSA:... VIZSGÁZÓ NEVE: 61. FELADAT Nyissa meg az M6-61 nevű prezentációt! 1. Állítson be egyszínű, halványpiros hátteret a bemutató mindegyik diájára! 2. A diák jobb szélén lévő téglalapok kitöltőszíne legyen bordó! 3. Szúrja

Részletesebben

Dokumentáció. IT Worx. Web eszközök Hír box. 1. Első lépések

Dokumentáció. IT Worx. Web eszközök Hír box. 1. Első lépések Dokumentáció IT Worx Web eszközök Hír box 1. Első lépések A szöveg melletti háromszögre kattintva rendezhetjük a hír boxokat abc szerinti növekvő vagy csökkenő sorrendbe: Ha rákattintunk az egyik hír box

Részletesebben

Diagramok/grafikonok használata a 2003-as verzióban

Diagramok/grafikonok használata a 2003-as verzióban Diagramok/grafikonok használata Diagram beillesztése A prezentációnkban, előadásunkban gyakran használunk számokat, kimutatásokat, ezeknek a nyers felsorolása helyett érdemes használni diagramokat, grafikonokat.

Részletesebben

Pénzintézetek jelentése a pénzforgalmi jelzőszám változásáról

Pénzintézetek jelentése a pénzforgalmi jelzőszám változásáról Pénzintézetek jelentése a pénzforgalmi jelzőszám változásáról Felhasználói Segédlet MICROSEC Kft. 1022 Budapest, Marczibányi tér 9. telefon: (1)438-6310 2002. május 4. Tartalom Jelentés készítése...3 Új

Részletesebben

edia 2.2 Kézikönyv feladatfelvitelhez Diagnosztikus mérések fejlesztése Készítette: Molnár Gyöngyvér Papp Zoltán Makay Géza Ancsin Gábor

edia 2.2 Kézikönyv feladatfelvitelhez Diagnosztikus mérések fejlesztése Készítette: Molnár Gyöngyvér Papp Zoltán Makay Géza Ancsin Gábor edia 2.2 Kézikönyv feladatfelvitelhez Diagnosztikus mérések fejlesztése Készítette: Molnár Gyöngyvér Papp Zoltán Makay Géza Ancsin Gábor Tartalom Tartalom... 1 1. Belépés... 3 2. Feladatok létrehozása,

Részletesebben

file://d:\melinda\2010_11_ii.félév\info1#\elektronikus számonkérés\~1~.xml

file://d:\melinda\2010_11_ii.félév\info1#\elektronikus számonkérés\~1~.xml Page 1 of 7 Informatika (NGB_SZ003_1) vizsga 1. feladat Az alábbi képen látható módon a következő problémába botlunk tömörítés közben. A feladat az, hogy az L: meghajtó gyökerébe csomagoljuk be Saját Név(neptunkód).zip

Részletesebben

ÉRTÉKELÉS: VIZSGÁZTATÓ ALÁÍRÁSA:... VIZSGÁZÓ NEVE:

ÉRTÉKELÉS: VIZSGÁZTATÓ ALÁÍRÁSA:... VIZSGÁZÓ NEVE: 1. FELADAT Nyissa meg az M6-01 nevű prezentációt! 1. Állítson be egyszínű, sötétzöld hátteret a bemutató mindegyik diájára! 2. A mintadián lévő kis négyzeteknek ne legyen kitöltőszíne, szegélyeik vastagsága

Részletesebben

FELHASZNÁLÓI ÚTMUTATÓ

FELHASZNÁLÓI ÚTMUTATÓ FELHASZNÁLÓI ÚTMUTATÓ 0.1v. GYŰJTŐI TÉGLÁK LISTÁZÁSA A listázó elérése menüből: Téglák/Gyűjtői téglák Mielőtt lekérnénk egy listát, lehetőség van bizonyos szűrési feltételek megadására a Listázás keretrészen

Részletesebben