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!

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "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!"

Natália Bakos
8 évvel ezelőtt
Látták:

1 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

2 Készítsünk weblapot könnyedén! 1. A kezdeti lépések A Google weblapszerkesztője a oldalon érhető el. A bejelentkezéshez felhasználónévre és jelszóra lesz szükség. Ha rendelkezik gmail-es fiókkal, azzal az azonosítóval be tud lépni ide is. Ha nem rendelkezik vele: látogasson el a oldalra, hozzon létre egy címet, melyet majd használni fog, vagy már meglévő 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 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: (ahol a webhelynév lehet akár saját név, az iskola neve, az osztály megnevezése, stb.)

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.

3 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

4 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

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

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.

5 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ó.

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

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

6 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:

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

A kép beszúrását követően lehetőség van a formázására.

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ű

8 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.

9 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.

Link beszúrása: Ha egy honlapra akarunk linket készíteni, a beszúrás->link pontra kattintva kell kattintani.

10 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.

12 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.

A szerkesztő nézet elhagyásához a jobb felső sarokban lévő mentés gombra kell kattintani.

13 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 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ó 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,

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.

14 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.

Ez lesz a menüpont neve Ha a legfelső szintet választjuk, akkor

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.

15 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 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 Webhely elrendezése: Átméretezhetjük, valamint áthelyezhetjük az objektumokat.

Webhely kezelése: Itt van lehetőségünk új téma kiválasztására, valamint a

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.

16 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 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.

Ezek a beállítások minden menüpontra érvényesek lesznek, nem csak arra, amelyiken bemutatja. 5.6.

17 Tartalom 1. A kezdeti lépések Hozzuk létre első oldalunkat! A sablon kiválasztása: A webhely neve: A téma kiválasztása: A webhely leírása: Az oldal szerkesztése Oldal szerkesztése Szöveg szerkesztése: Beszúrás menüpont... 6 Kép beszúrása: módszer: Kép beszúrása a számítógépről 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: Videó beszúrása: módszer: Google videó módszer: Youtube videó Táblázat menüpont Táblázat beszúrása: További menüpontok létrehozása További műveletek Oldalbeállítás: Oldal áthelyezése: Webhely kezelése: Webhely elrendezése: Színek és betűtípusok: Sablonok:... 16

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.

Hasonló dokumentumok

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;