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 Markup Language) – szöveges kódolású • akár a jegyzettömbbel létre lehet hozni kód írás • vannak vizuális szerkesztők (amik helyettünk írják a kódot): Adobe Dreamweaver, A weblapok neve • csupa kis betű, angol abc betűi, számai szóköz nélkül (szóköz helyett – vagy _ jelet teszünk a névbe. • kiterjesztése html (vagy htm) • a kezdőlap neve: index.html (a domain cím beírásakor ez nyílik meg) HTML címkék (tag)
Fej rész: a böngészőnek és a kereső programoknak nyújt információt.
Hello világ!
Ez az első weblapom!
• •
Törzs rész: Ez a weblap tartalma.
páros címkék Blokkot jelölnek
…
páratlan címkék: pl.
sort tör
Website - honlap • • •
A honlapok általában több weblapból állnak. A kezdő lap neve: index A lapok azonos tárhelyen, domain címen szerepelnek. pl. hansagiisk.hu
Weblapszerkesztés • •
A saját gépünkön egy mappán belül történik. Ha kész FTP programmal feltöltjük a tárhelyre, hogy mindenki láthassa. A tárhelyen más nem tudja módosítani a fájljainkat.
A weblapkészítés nyelve: HTML A formázást kiegészítő nyelv: CSS 1
w w w . h a n s a g i i s k . h u
SharePoint Designer 2007 Indulás – webhely létrehozás Fájl Új dokumentum…
Webhely
1 2
3 4 Hozz létre egy új site-ot! A mappa legyen az o:\web1 mappa!
ÚJ SITE kialakítása WEB tervezése Mindig legyen meg előre a terved! (Persze kísérletezni is lehet!) • Legyen meg a pontos téma! Ez a rész papír, ceruza módszerrel is kiválóan működik! • Tudd, hogy hány lapra kerül • Gondold át, hogy a lapok hogy hivatkoznak egymásra!
HOGYAN TERVEZNÉNK MEG PL. EGY FOTO-MŰVÉSZ SITE-JÁT? index.html
Egy szép bejelentkező lap, amely felkelti az érdeklődést. • Tartalmazza az elérhetőséget (cím, telefon, e-mail) • Tartalmazza az újdonságokat, amire fel akarjuk hívni a figyelmet. (pl. új képek, kiállítások, akciók, egyéb lehetőségek.) • Menü (link), ami a többi lapra (oneletrajz, galeria, kiallitasok, linkek) mutat.
oneletrajz.html galeria.html kiallitasok.html linkek.html
WEB LAPOK TARTALMA Egységes navigálás: • Minden lapról vezessen link a fő lapra (index.htm)! • •
oneletrajz.htm: galeria.htm:
• •
kiallitasok.htm: linkek.htm: 2
rövid életrajz, kép, gondolatok kicsi képek gyűjteménye, mely hivatkozik a nagy képre. a kiállítások listája az adott évre kedvenc linkek témakörökbe csoportosítva
w w w . h a n s a g i i s k . h u
Fájlok létrehozása (1), (1), mentése (2)
1
2
Hozd létre az alábbi lapokat! • index.html | oneletrajz.html | galeria.html | kiallitasok.html |linkek.html • Mentéskor alapértelmezetten htm kiterjesztésű fájlokat hoz létre! (Ha a feladatban html kiterjesztés van, akkor írd be névhez a teljes nevet: pl. index.html)
A munka mappa (webhely) Minden honlaphoz tartozó fájlt (képet, weblapot, …) előre ide másolunk. (Hozott anyagból dolgozunk…) • Semmilyen fájl nem lehet ezen a mappán kívül! • A képeket abba a méretben kell előkészíteni, amekkorában maximálisan meg szeretnénk jeleníteni! Nem szabad „ménykűnagy” képeket feltenni a lapokra, mert lassú lesz az oldal megnyitása! • Általában egy weblap legyen gyorsan megnyitható. Képekkel együtt ne legyen 100 kb-nál nagyobb!
Weblap szerkesztése – nézetek Nézet Lap: Tervezés | Felosztás | Kód 1
HTML + CSS kód
WYSIWYG tervező mód Mindkettőben lehet weblapot szerkeszteni. • Ha az egyikben szerkesztesz, a másik is módosul.
Oldalbeállítások Oldalbeállítások a böngészőnek és a keresőmotoroknak (pl. google) • A kódok a … részen jönnek létre. • A keresőmotorok ezeket az elemeket is figyelembe veszik a rangsorolásnál. Fájl Tulajdonságok…
3
w w w . h a n s a g i i s k . h u A böngésző ablak címsorában jelenik meg. A keresőkbe növelik az esélyt a jó helyezésért.
Innen tudja a böngésző és a kereső, hogy milyen nyelvű a weblap. A karakter kódolása: általában UTF-8 Legyen a cím a weblap tartalmának 1. sorában megadott Kódolás: UTF-8 Nyelv: Magyar
Látható oldaltulajdonságok Ezek határozzák meg a lap hátterét és az alapértelmezett szövegszíneket. Fájl Tulajdonságok…
1 2
A szöveg RGB színe: 255, 255, 0 A háttér RGB színe: 128, 0, 0
4
w w w . h a n s a g i i s k . h u
Szövegszerkesztés A Weblap szerkesztő egy csökkentett tudású szövegszerkesztőként is felfogható.
…
bekezdés
sortörés
Begépelési sajátosságok • • • •
Automatikus sortörés: böngésző ablak jobb szélénél. Manuális sortörés: Shift-Enter n. bekezdés Új bekezdés: Enter A bekezdések között térközök jönnek létre. n+1. bekezdés Nincs tabulálási lehetőség! A szövegeket és más objektumokat táblázatokkal pozícionálunk. (Lásd később!)
Több szóköz egymás mellé rakása Alapértelmezésként csak egy szóközt lehet a szavak közé rakni! Gépeld be az alábbi szöveget formázás nélkül!
Címsorok – szövegtörzs (bekezdés formázás)
…
Címsor 1 stílus
…
Címsor 2 stílus
…
Címsor 3 stílus
1
Legyen minden lap 1. sora címsor 1 sílusú!
5
w w w . h a n s a g i i s k . h u
Szövegformázások Mint a Word-be
Formázd meg az index szövegét a mintának megfelelően!
Szövegek bemásolása • •
Az érettségin egyszerű txt szövegből kell a tartalmat bemásolni. Az életben bármilyen szövegfájlt kaphatsz.
Formázott szöveget be lehet illeszteni formátum nélkül! …vagy beillesztés után leszedheted a formátumot! Másold be az önéletrajz szövegét oneletrajz.txt-ből a szövegeket a weblapokra! (Ctrl-c … Ctrl-v), …és mets!
Szövegek tördelése Enter Új bekezdés (HTML:
…
) Shift-Enter Új sor (HTML:
)
Formázd meg az oneletrajz szövegét a mintának megfelelően!
6
w w w . h a n s a g i i s k . h u
Linkek Link szövegből: 1. Jelöld ki a szöveget! 2. Kattints a kijelölésre jobb gombbal! 3. Hiperhivatkozás parancs. 4. A mappából válaszd ki a fájlt!
1
3
4
Megjelenítési hely lehet: Azonos keret (ablak)| Új ablak Relatív útvonal hivatkozások: a kódba a hivatkozó fájl helyétől kiindulva ágyazódik be az útvonal. Ha ugyanabban a mappában van a hivatkozó oldal és a cél fájl, akkor csak a fájl neve lesz az útvonal. Tervezés Link formátumúvá vált a szöveg! index
Kód
index
Minden menüponthoz adj linket! Link fajták • A böngésző által megjeleníthető fájlokat a böngésző megjeleníti, lejátssza (weblap, kép, pdf, video, hang…) • A több fájltípusnál a fájl letöltés ablak jelenik meg. (pl tömörített fájlok, …)
7
