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 könnyedén! 1. A kezdeti lépések A Google weblapszerkesztője a http://sites.google.com oldalon érhető el. A bejelentkezéshez felhasználónévre és jelszóra lesz szükség. Ha rendelkezik gmail-es e-mail fiókkal, azzal az azonosítóval be tud lépni ide is. Ha nem rendelkezik vele: látogasson el a http://gmail.com oldalra, hozzon létre egy e-mail címet, melyet majd használni fog, vagy már meglévő e-mail címét beregisztrálhatja a sites.google.com oldalon, ha a Regisztráljon a Webhelyek szolgáltatás gombra kattint. 2. Hozzuk létre első oldalunkat! Első belépés után a webhely létrehozása gombra kell kattintani, ekkor a következő lesz látható: 2.1. A sablon kiválasztása: A sablonnál választhatunk már elkészített weblapsablonok közül. Célszerű az üres sablont választani, mert a másik három kezdőknek nehezebben lesz átlátható, ráadásul nem is magyar lesz a nyelve. 2.2. A webhely neve: webhely neve lesz az elérési útvonal, melyet a böngészőbe beírva bárki megtekintheti az oldalt. Azaz: https://sites.google.com/site/webhelynév (ahol a webhelynév lehet akár saját név, az iskola neve, az osztály megnevezése, stb.)
2.3. A téma kiválasztása: A téma kiválasztására kattintva beépített sémák közül választható ki, hogy milyen legyen a weboldal kinézete. Ez a későbbiekben bármikor megváltoztatható, illetve szerkeszthető. Bal gombbal egyszer kell kattintani a választott témára.
2.4. A webhely leírása: A webhely leírásánál röviden meg lehet adni a webhely tartalmát, majd választható, hogy mindenki számára elérhetővé tesszük-e oldalunkat, vagy csak az általunk meghívottak lássák azt. Ezek után már csak a kódot kell beírni, amit a képen látható, és a webhely létrehozása gombra kattintva létrejön a honlap főoldala. 3. Az oldal szerkesztése A létrejött weblap így néz ki: Erre kattintva tudjuk az adott oldal szerkesztő nézetét megnyitni Ez lesz a menü, jelenleg főoldal és webhely térkép található benne Ez az oldal fejléce Ez a tartalomterület, ahova majd többek közt képeket, videókat, szövegeket tudunk elhelyezni. Ezzel tudunk további menüpontokat, azaz további oldalakat létrehozni
3.1. Oldal szerkesztése Az oldal szerkesztése gombra kattintva egy menüsor fog megjelenni az oldal fejléce felett: Az oldal felépítését az elrendezés menüre kattintva lehet beállítani. Ha megváltoztatjuk az elrendezést, az mindig csak a tartalom területét fogja átalakítani. Például a három oszlopos a következőképp néz ki: Látható, hogy a tartalom területe 3 részre lett osztva, mindegyikbe szabadon illeszthetek szöveget, képet, stb 3.2. Szöveg szerkesztése: Szöveget a tartalom részbe lehet írni, és a legtöbb (Word-ből ismert) szövegszerkesztési lehetőség itt is megtalálható.
Betűszín, háttérszín Behúzás Betű típus Betű méret Félkövér, dőlt, aláhúzott Felso rolás Igazítások Valamint a Formátum menüben: Formázás törlésével az eddigi szövegszerkesztési beállításaink törlődnek Cím/Alcím/Másodalcím a fontosabb címek, bekezdés ill. fejezetcímek kiemelésére Normál: az eredeti szövegbeállítás Áthúzott: Áthúzza a szöveget Felső index: pl.: m 2 Alsó index: pl.: X 1,2 Kód: Megváltoztatja a színt zöldre, valamint a betűtípust Curier-re állítja: ez kód típusú szöveg Idézetblokk-kód: Olyan, mint a kód típusú, plusszban kap egy szürke hátteret: ez idézetblokk-kód típusú szöveg 3.3. Beszúrás menüpont A beszúrás menüpontban a képre kattintva van lehetőség képek beszúrására. Ez kétféleképp történhet. Kép beszúrása:
1. módszer: Kép beszúrása a számítógépről Ezt a módszert ajánlja fel. A tallózás gombra kattintva kikereshetjük a számítógépen a kívánt képet, majd a Megnyitás gomb és OK megnyomásával felkerül a honlapra. A kép beszúrását követően lehetőség van a formázására. Ezt a kék sáv teszi lehetővé, ami a képre egyszer bal gombbal kattintva bármikor újra előhívható. A kép igazítása, méretének megváltoztatása, valamint a szöveggel való köbefuttatására, illetve eltávolítására van itt lehetőség. Ez a kép középre van igazítva, S-es a mérete és a körbefuttatás ki van kapcsolva.
2. módszer: Kép beszúrása internetcím segítségével Nem csak a számítógépről lehet képet beilleszteni a weboldalra. Lehetőség van internetes URL cím megadásával is erre. Ha például a google.hu képkeresőjét használjuk egy nárcisz képének megtalálására, majd a megfelelő kép teljes méretű megtekintésére kattintunk: Amit keresünk Ez az URL cím, amit ki kell jelölni, majd jobb klikk- >másolás-ra kell kattintani.
Jobb klikk->beillesztés, ha jó a cím, rögtön meg is fog jelenni a kiválasztott kép. OK gombra kattintva jelenik meg a weboldalon. Link beszúrása: Ha egy honlapra akarunk linket készíteni, a beszúrás->link pontra kattintva kell kattintani. Itt az internetcímet választva be lehet írni a weboldal címét, és már kész is a link. Ha ki van pipálva, nem lép el a böngésző a weboldalunkról, hanem új ablakban nyitja meg a linket, így a látogató továbbra is keresgélhet oldalunkon.
Térkép beszúrása:
A mentés gombra kattintás után ez lesz látható a weboldalon. Ez azt jelenti, hogy a térkép kész, de majd csak ha elhagytuk a szerkesztő nézetet, akkor fog látszani. A szerkesztő nézet elhagyásához a jobb felső sarokban lévő mentés gombra kell kattintani. Mentés után az a térképrészlet lesz látható, amit előzőleg beállítottunk. Ha ezután újra szerkesztő-nézetre akarunk váltani, az Oldal szerkesztése gombra kattintva tehetjük meg.
Videó beszúrása: Videó beszúrása 2 helyről történhet: Youtube és google. 1. módszer: Google videó Ahogy a kép beszúrásánál, itt is meg kell nyissuk a http://video.google.com oldalt, ki kell válasszuk a kívánt videót, majd a címét ide kell másoljuk. Ahogy a Google videónál, csak a oldalon kell kiválasztani a videót. 2. módszer: Youtube videó http://youtube.com 3.4. Táblázat menüpont 1. Táblázat beszúrása: Ez a legnagyobb, amit létre tudunk hozni, a bal gomb folyamatos nyomva tartásával tudjuk növelni a sorok és oszlopok számát, miközben az egeret jobbra lefele mozgatjuk. Később persze lehetőség lesz további sorok és oszlopok beszúrására. Mikor belekattintunk egy cellába, megjelenik a méretezési lehetősége. A fehér pontoknál fogva tudjuk nagyítani, kicsinyíteni. Itt van lehetőség további sorok, A táblázatba írt szöveget ugyanúgy formázhatjuk,
4. További menüpontok létrehozása Az oldal mentése után jelenik meg újra az Új oldal létrehozása gomb. Ez lesz a menüpont neve Ha a legfelső szintet választjuk, akkor főmenüpont lesz, ha a másikat, akkor almenüpont. Létrehozás után rögtön az új menüpont szerkesztési nézete nyílik meg.
5. További műveletek További műveletek 5.1. Oldalbeállítás: 5.2. Oldal áthelyezése: Megváltoztathatjuk a menüpontok sorrendjét, elhelyezkedését. 5.3. Webhely kezelése: Itt van lehetőségünk új téma kiválasztására, valamint a kiválasztott téma módosítására. 5.4. Webhely elrendezése: Átméretezhetjük, valamint áthelyezhetjük az objektumokat.
5.5. Színek és betűtípusok: Kiválasztha tjuk, hogy az oldal melyik beállítását akarjuk megváltozt atni Állíthatunk be egyéni háttérszínt, vagy akár egyéni háttérképet is tölthetünk be. Amelyik beállítást megváltoztatjuk, rögtön láthatjuk a változást. Ezek a beállítások minden menüpontra érvényesek lesznek, nem csak arra, amelyiken bemutatja. 5.6. Sablonok: Itt változtathatjuk meg a témát egy másik beépített témára. Mielőtt alkalmaznánk a módosítást, az Előnézet gombra kattintva megtekinthetjük, hogy nézne ki oldalunk a változtatás után.
Tartalom 1. A kezdeti lépések... 2 2. Hozzuk létre első oldalunkat!... 2 2.1. A sablon kiválasztása:... 2 2.2. A webhely neve:... 2 2.3. A téma kiválasztása:... 3 2.4. A webhely leírása:... 4 3. Az oldal szerkesztése... 4 3.1. Oldal szerkesztése... 5 3.2. Szöveg szerkesztése:... 5 3.3. Beszúrás menüpont... 6 Kép beszúrása:... 6 1. módszer: Kép beszúrása a számítógépről... 7 2. módszer: Kép beszúrása internetcím segítségével... 8 Link beszúrása:... 9 Térkép beszúrása:... 10 Videó beszúrása:... 13 1. módszer: Google videó... 13 2. módszer: Youtube videó... 13 3.4. Táblázat menüpont... 13 1. Táblázat beszúrása:... 13 4. További menüpontok létrehozása... 14 5. További műveletek... 15 5.1. Oldalbeállítás:... 15 5.2. Oldal áthelyezése:... 15 5.3. Webhely kezelése:... 15 5.4. Webhely elrendezése:... 15 5.5. Színek és betűtípusok:... 16 5.6. Sablonok:... 16