Nyisson meg egyszerre két böngészô ablakot. (PC: Ctrl+T Mac: ⌘+T) Egyet a weboldalának http://felhasználónév.szabaduszo.hu …vagy saját domain név.
és egyet a szerkesztôfelületnek http://felhasználónév.szabaduszo.hu/admin zo.hu/a / dmin ...és lépjen be a felületre így –›
A részletes bemutatás mindig a páros oldalakon (az oldalpár d bal oldalán) folytatódik
1
Minden változtatás után mentsen egyet (az oldal alján a Majd a változások megtekintéséhez ne feledje el frissíteni weboldalát a böngészôben:
gomb)
Tehát minden változtatás után menteni egyet.
(PC: F5 gomb Mac: ⌘+R)
egjeleníté tások m a t z o lt ...vá
se a böngészô
ben Fr issíté s
s el
A részletes bemutatás mindig a páros oldalakon (az oldalpár d bal oldalán) folytatódik
2
Ebben a menüpontban tudja ki/be kapcsolni a különbözô modulokat, itt tudja megadni azt is, hogy milyen szavak jelenjenek meg az oldalakon, továbbá itt tudja elvégezni az angol, német, stb. nyelvesítéseket is.
‣ Itt módosíthatja weboldala elnevezését ‣ Átírhatja (vagy akár törölheti) a kétsoros szlogent ‣ Beállíthatja, mibôl mennyi jelenjen meg az oldalakon (pl. hány hír, hány fotóalbum, stb.) ‣ …milyen e-mail címre várja a Kapcsolatfelvételi ûrlapon érkezô megkereséseket ‣ …legyenek-e facebookos Like gombok az oldalakon? ‣ Ha már többnyelvû weboldalt használ, itt írhatja be nyelvenként az egyes szavak idegen nyelvû megfelelôit... ‣ …modul gombok neveit, stb. d (folytatódik a bal oldalakon)
3
A felsô menük szerkesztésével bemutatjuk, hogyan tud pillanatok alatt oldalakat (ennél a menüfajtánál al-oldalakat is) hozzáadni / módosítani vagy éppen törölni. A többi menüpont-szerkesztô is ugyanígy mûködik.
‣ Név: Amit ide bír, az lesz az adott menügomb neve ‣ URL: az ide beírt (ékezetmentes) szó lesz az oldal URL-címsorában (pl. .../bemutatkozunk) Fontos! Az egyes modulokhoz (pl. fotóalbum, ajánlatkérô, stb). egyedi linket kell beírni. ‣ Címsor: Ide írja be az adott oldal címsorának szövegét. ‣ Sorrend: adja meg, hányadik helyen jelenjen meg az oldal menügombja. Fontos! Ha két oldalnak azonos számot adott meg, az idôben korábban létrehozott kerül elôrébb. ‣ Tartalom: Írjon szöveget, szúrjon be képeket, ágyazzon be videókat. Formázza meg, mintha egy sima szövegszerkesztôvel dolgozna.
4
Képek szerkesztése (folytatás 8. oldalról). Bemutatjuk, hogyan tud pillanatok alatt képeket beszúrni, méretezni, kattintható linkkel ellátni...
‣ Kép kijelölése: Rákattintunk vagy „lépkedve” kijelöljük, majd megnyomjuk a képszerkesztô gombját ‣ Kép feltöltése szerverre: egy meglévô képet kicserélünk egy másikra (ugyanaz a mûvelet) – ide kell kattintani: A következô (12., 14., 16.) oldalakon bemutatjuk, hogyan kell a gépünkrôl feltölteni egy tetszôleges méretû képet, beállítjuk a honlapon megjelenô méretet, ráteszünk egy kattintható linket (kattintáskor az itt megadott tetszôleges oldalra viszi majd el a látogatót), és az új kép elhelyezését követôen elmentjük oldalunkat a friss tartalommal.
d (folytatódik a bal oldalakon)
5
Képek feltöltése (folytatás 10. oldalról). Bemutatjuk, hogyan tud pillanatok alatt képeket beszúrni, méretezni, kattintható linkkel ellátni...
‣ Kép kiválasztása: A Feltöltés gombbal kiválasztunk egy képet a gépünkrôl. ‣ Kép kiválasztása: a szerverre feltöltött összes képünket láthatjuk, közéjük fog bekerülni a sikeresen feltöltött új kép is, amit dupla kattintással kiválasztunk, és ezzel elhelyezzük weboldalunk felületére. + info: a Mappák alatt újabb mappákat is létrehozhatunk (PC: jobb egérgomb + katt. Mac: ctrl+kattintás az ikonra) a feltöltendô képeink áttekinthetôbb tárolására.
A továbbiakban beállítjuk az új kép méretét (álalában a képeket eredeti méretükhöz képest jóval kisebb méretben kell a honlapra kihelyezni); majd ellátjuk a képet u.n. „kattintható linkkel” és az új képpel együtt elmentjük honlapunk aktuális oldalának tartalmát. (folytatódik) d
6
Képek átméretezése (folytatás a 12. oldalról). Bemutatjuk, hogyan tudja beállítani az oldalára feltöltött kép méretét, majd u.n. „kattintható linkkel” ellátni...
‣ Kép átméretezése: A feltöltött kép megjelenik és látszik rajta, hogy túl nagy, ezért arányosan kicsinyíteni fogjuk; ehhez ügyeljünk arra, hogy a lakat zárva legyen (rákattintással bezárható) + a kép forgatható is ( ).
‣ Kép méretének átírása: a feltöltött kép 800pixel széles volt, nekünk viszonk kb. 100400px közötti szélességet érdemes használnunk, ezért a Szélesség értéket átírjuk (a példánkban 167 pixelre). A kép máris láthatóan kisebb lett. A továbbiakban elhelyezünk egy kattintható linket a képbe... d (folytatódik a bal oldalakon)
7
Képhez link beágyazása (folytatás a 14. oldalról). Bemutatjuk, hogyan lehet frissen feltöltött képeinkhez u.n. „kattintható linket” rendelni és magát az oldalt elmenteni
‣ Link beágyazása: a Hivatkozás tulajdonságai menüben beírhatunk egy linket (ami saját honlapunkon belülre vagy akár más weboldalra is mutathat).
‣ Jóváhagyás. A Rendben gombra kattintva a kép beágyazásra kerül honlapunk adott oldalának szövegében (a szövegszerkesztôben). Ahhoz pedig, hogy látható legyen magán a honlapon, még majd el kell mentenünk ezt az aktuális oldalt is... d (folytatódik a bal oldalakon)
‣ Hogyan jelenjen meg a kattintás utáni hivatkozás? Itt kijelölhetjük, hogy ugyanabban a böngészô-ablakban nyíljon-e meg a link vagy más módon. (a New Window kijelölésekor külön ablakban jeleníti meg a linkelt oldalt, így az eredetileg böngészett oldal is nyitva marad).
8
Szöveg új képpel –› mentés (folytatás a 16. oldalról). Bemutatjuk, hogyan kell elmenteni a honlap-szerkesztôben módosított aktuális oldalt...
‣ Az új kép: a jóváhagyás után megjelent a szövegben. Tovább szerkeszthetô, áthelyezhetô igény szerint... ‣ Mentés: Mentsük el honlapunk adott oldalát. Ez fontos mûvelet; minden változtatás után szükséges menteni az oldalt (felsô menük esetén al-menüket is lehet beszúrni; ilyenkor külön kell elmenteni a fômenü változásait és külön a szerkesztôfelület alatti gombokkal az almenükét).
‣ Jó hír! A szabadúszó.hu készweboldalak minden tartalom-szerkesztô felülete így mûködik. Bármelyik modulban, ahol ilyen szerkesztôt talál, ott így tud szöveget szerkeszteni, képet beágyazni, stb...
A továbbiakban videót helyezünk el az oldalon és megnézzük, hogy szerkesztésnél mikor jó a Forráskód nézet (html-nézet) használata.
9
Fontosabb fájlok kihelyezése (Word .doc, Excel .xls/.xlsx, PowerPoint .ppt, Adobe Acrobat .pdf). Bemutatjuk, hogyan tud pillanatok alatt megnyitható vagy letölthetô fájlokat elhelyezni honlapjának bármelyik szerkeszthetô oldalára
‣ FÁJL beágyazása: a honlap-szerkesztô segítségével könnyen elhelyezhetünk fájlokat az oldalakon. X Az
elhelyezett fájlokat hagyhatjuk sima szöveges link-ként, vagy
X Hozzájuk
rendelhetünk tetszetôs ikonokat, képeket is (ld. minták)
X Beállíthatjuk
az is, hogy a honlapon megnézhetô legyen a fájl (pl. ha a látogató böngészôje támogatja a formátumot) vagy egybôl letöltôdjön a fájl a látogató gépére.
d (folytatódik a bal oldalakon)
10
Fájlok kihelyezése a honlapra (folytatás a 20. oldalról). Böngészôben megjeleníthetô vagy letölthetô fájlok feltöltése
‣ Fájl linkjének megadása: Rákattintunk, majd megnyomjuk a képszerkesztô gombját
Ide fogjuk helyezni a fájl linkjét –›
‣ 1. feltöltés a szerverre: egy már elôzôleg elôkészített fájlunkat (pl. arlista.pdf) feltöltjük a szerverre – ehhez kattintson a gombra, ‣ 2. kiválasztjuk egy már elôzôleg elôkészített fájlunkat (pl. arlista.pdf) és a képfeltöltéshez hasonlóan feltöltjük a szerverre a Files mappába (ha rendszerezve szeretnénk sok fájlt feltölteni, akkor csinálunk még mappákat így: PC: jobb egérgomb + katt. Mac: ctrl+kattintás az ikonra).
1. 2. 3.
‣ 3–4. A feltöltött fájl ikonja megjelenik a fájlok között, kiválasztása után pedig az elérési útvonala –› . 4.
d (folytatódik)
11
Fájlok kihelyezése a honlapra (folytatás a 22. oldalról). Ikon kép társítása a feltöltött fájlhoz (hivatkozáshoz).
‣ A beágyazott fájl linkjéhez képet (ikont) társítunk: – kijelöljük a teljes hivatkozást (a kék szöveget). – egy elôre elkészített képet társítunk hozzá (ld. kép feltöltése részt (10., 12., 14. oldalak)). – beállítjuk, hogy a képre kattintáskor a meglévô ablakban jelenjen-e meg a feltöltött fájl tartalma, vagy új ablakban (utóbbi esetben kattintáskor automatikusan letöltôdik majd a fájl a látogató gépére).
(folytatódik) d
12
Weboldalra már feltöltött fájlhoz ikon (kép vagy gomb) hozzárendelése (folytatás a 24. oldalról).
2.
3. böngész
kép– 2. megnyitjuk a szerkesztôt és 3. keresünk egy már feltöltött képet v. pdf-ikont a mappánkban vagy 4a. feltöltünk egy képet (ld. képek feltöltése) és kiválasztjuk 4b. dupla kattintással.
4a. feltölt vagy 4b. meglévô képet kiválaszt dupla kattintással
5. Méretez
‣ Kép feltöltése / kiválasztása: – 1. kijelöljük a fájl hivatkozását (teljes szöveget).
– 5. beállítunk neki egy reális méretet (kb. 80px), majd 6. beszúrjuk a helyére . 6. Mentés
– a fájl most már egy képként jelenik meg (itt PDF ikon-kép), 6. ha tetszik, lehet menteni az oldalt.
6. Nyugtáz
(folytatódik) d
13
Weboldalra már feltöltött, képpel társított fájl további beállítása: Megnézhetô vagy Letölthetô legyen (folytatás a 26. oldalról). 1. a file hivatkozásának szerkesztése 2a. ha a Target üres (ez az alapbeállítás), akkor a fájl a Böngészôben fog megnyílni
2b. Ha a Target „New Window”, akkor a fájl kattintáskor letöltôdik majd a látogató gépére 3. Mentés
‣ Elôször döntsük el, hogy a fájl kattintáskor megnyíljon a látogató böngészôjében vagy azonnal töltôdjön le a gépére? – 1. kijelöljük a fájl hivatkozását (a képet) és belépünk a Fájl hivatkozásának szerkesztôjébe . – 2a. alapbeállításként a fájl böngészôben megnyíló lesz (a Target lenyíló menü üres). – 2b. ha szeretnénk, hogy a fájl kattintáskor letöltôdjön, válasszuk ki a New Window (_blanc)-t. Utána jöhet a gomb. – 3. az oldalt el kell menteni.
14
