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) <html> <head> <title> </title> Fej rész: a böngészőnek és a kereső programoknak nyújt információt. </head> <body> <p> Hello világ! <br> Ez az első weblapom! </p> </body> </html> Törzs rész: Ez a weblap tartalma. páros címkék Blokkot jelölnek <p> </p> páratlan címkék: pl. <br> 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
SharePoint Designer 2007 Indulás webhely létrehozás FájlÚj dokumentum Webhely 2 3 Hozz létre egy új site-ot! A mappa legyen az o:\web mappa! 4 Ú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? oneletrajz.html 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. 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: rövid életrajz, kép, gondolatok galeria.htm: kicsi képek gyűjteménye, mely hivatkozik a nagy képre. kiallitasok.htm: a kiállítások listája az adott évre linkek.htm: kedvenc linkek témakörökbe csoportosítva 2
Fájlok létrehozása (),, mentése (2) 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 00 kb-nál nagyobb! Weblap szerkesztése nézetek NézetLap: Tervezés Felosztás Kód 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 <head> </head> részen jönnek létre. A keresőmotorok ezeket az elemeket is figyelembe veszik a rangsorolásnál. FájlTulajdonságok 3
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. 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ájlTulajdonságok 2 A szöveg RGB színe: 255, 255, 0 A háttér RGB színe: 28, 0, 0 4
Szövegszerkesztés A Weblap szerkesztő egy csökkentett tudású szövegszerkesztőként is felfogható. <p> </p> bekezdés <br> 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+. 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) <h> </h> Címsor stílus <h2> </h2> Címsor 2 stílus <h3> </h3> Címsor 3 stílus Legyen minden lap. sora címsor sílusú! 5
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: <p> </p>) Shift-Enter Új sor (HTML: <br>) Formázd meg az oneletrajz szövegét a mintának megfelelően! 6
Linkek Link szövegből:. 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! 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 <a href="index.html">index</a> 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