Weblapkészítés
Bevezető A weblapok a web szerveren fájlokban tárolódnak A weblapok gyakran HTML nyelven íródnakkiterjesztés: htm vagy html Hyper Text Markup Language valójában egy "sima" szöveges állomány A web szervereken lévő fájlokat a böngészőprogramok dolgozzák fel. Gyakran megtekinthetők a fájlok pl. IE-ben Nézet/Forrás
A weblap szerkezete1 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Új lap - 1</title> <style> .style1 {…} </style> </head> <body> … </body> </html>
A weblap szerkezete2 A weblap "utasításai" a tag –ek A legtöbb tag nyitó és záró részből áll < > </ > A html dokumentum 2 része: fejrész: <head> a laphoz tartozó információk <title> a böngésző címsorában megjelenő cím </title > <style> stílusdefiníciók </style> </head> törzs: <body> itt van az egész weblap leírása </body>
A weblap szerkezete3 A tag-eken kívül további elemek alkotják a lapot. pl. képfájlok, videó fájlok,... Ezek is a web szervereken vannak. A webhely könyvtárszerkezete: Ha nem jól van kialakítva, a böngésző nem találja meg meg a fájlokat. Nincs c:\ , d:\ mert az a helyi gép meghajtója lenne (azé, aki nézi a weblapot) megoldás a következő lapon
További (célszerű) szabályok: a weblapot tartalmazó gépen kinevezünk egy mappát a webhely gyökérkönyvtárának, és ezen belül építkezünk. Ha pl. a webhely gyökérkönyvtárának az N:\elsoweblapom mappát választom, akkor egy képre így kell hivatkoznom: /kep1.jpg (relatív hivatkozás) További (célszerű) szabályok: minden fájlnév csupa kisbetűs, ékezet nélküli \ helyett / a mappanevek elválasztója Mindezek után a kiszolgálónak az N:\elsoweblapom tartalmát kell csak felmásolni (ott nem N: lesz és nem elsoweblapom ugye?)
HTML 5 szabvány előtt <head> <title> a lap címe </title> </head> <body bgcolor="indianred"> <font size="12" face="arial"> <b><i>első sor.</i></b> <p align="center">második sor.</p> </font> SPD azt támogatja, hogy a tartalom és a formázás váljon szét és a piros részek stílusként szerepeljenek
Webszerkesztő programok Jegyzettömb FrontPage 2002 Dreamweaver Homesite SharePoint Designer Vannak ingyenesek is, olyanok is, amelyeknél csak tetszetős sablonokból lehet választani WYSIWYG
MS SharePoint Designer 2007
SPD indítása Fájl/Megnyitás v. Fájl/Webhely megnyitása (egységként kezeli, névváltozáskor követik a hivatkozások követik) Fájl/Új/Üres webhely Fájl/Új/Egylapos webhely (lesz egy default.htm) Munkaablak menü (alap: Mappalista, Címke tulajdonságai, Eszközkészlet, Stílusok használata)
Weblap elemek Bekezdések, Hátterek, Karakterformázás, Listák, Képek, Táblázatok, Hivatkozások, Keretek (Közép) HTML ismerete, stílusok, CSS (Emelt és ECDL) Cascading Style Sheets Nem érettségi szinten rettenetesen sok más. (a webmester egy szakma)
Szerkesztési alapok Fájl/Új /Webhely/Egylapos webhely (Mappát figyelni) Default.htm helyett legyen index.html Karakter és bekezdésformázás a szövegszerkesztőben megszokott módon (de betűméret (7 féle 3 = 12 pont ) fontkészlet van-e a weblap nézőjének gépén?) Nézet (alul) tervezés, felosztás, kód Nézet/Eszköztárak szokásos és formázás Üres hely jobb gomb /lap tulajdonságai
Megtekintés böngészőben
Karakterformázás (elso mappa) Stílus keletkezik betűtípus .style2 { font-family: "Courier New"; } </style> betűméret .style3 { font-size: x-large; }</style> betűszín Félkövér, Dőlt, Aláhúzott, Index
Bekezdések1 <p> Ez itt a bekezdés szövege </p> A html-be írt Enter általában csak szóköz lesz. A több szóköz is egyként jelenik meg. Igazítás: stílus keletkezik, ha középre igazítasz <style type="text/css"> .style1 { text-align: center; } </style>
Bekezdés2 Szegély és mintázat border-style: double; border-width: 3px; background-color: #00FFFF; padding-left: 10px; ‘keretezés belső margói padding-right: 10px; Sortörés <br /> (nincs külön zárója), sh+enter választóvonal Beszúrás/vízszintes vonal <hr />
Listák (felsorolás, számozás) Számozott lista vagy Felsorolás Formátum/Felsorolás és számozás Számozás beállítása, Grafikus felsorolásjelek Többszintű lista Mindet kijelöl Mindre számozás Alpontok behúzásának növelése jel beállítása
Listák (html) felsorolás: <ul> </ul> (unordered list) számozás <ol> </ol> (ordered list) mindkettőben a listaelemek: <li> </li > között <ul> és <ol> paraméterei adják meg a számozás és a felsorolás jelét
Lap háttere Üres- jobb gomb- lap tulajdonságai Feladatok 21-22. oldal <body style="background-color: #008000"> Lehet kép is Feladatok 21-22. oldal
Hiperhivatkozások Beszúrás/hiperhivatkozás (elemleírás is lehet) Címke beszúrása Beszúrás/könyvjelző <a name="cimke neve">...</a> Hivatkozás beszúrása <a href= "#cimke neve">...</a> <a href= "kepek/nagymorzsa.gif ">...</a> <a href= "elso.html ">...</a> <a href= "mailto:is@ckik.hu ">...</a>
Hivatkozások alkalmazása hosszu_szoveg. txt hová ugorjon és beszúrás/könyvjelző honnan és beszúrás/hiperhivatkozás/könyvjelző kismorzsa.jpgnagymorzsa.jpg kismorzsa beszúrása kilelölés, beszúrás/hiperhivatkozás/létező fájl vagy weblap mentés és megtekintés böngészővel másik html-t nyit: mint az előző email.gif-re katt: beszúrás/hiperhivatkozás/elektronikus levélcím
Hivatkozások színe Formátum/Háttér/ Formázás v. Jobbgomb-Lap tulajdonságai Feladatok 28. Oldal
Táblázatok (táblázatok mappa) Táblázat/Beszúrás/Táblázat pl. 2*2-es <table style="width: 100%"> <tr> <td> </td> <td> </td> </tr> <tr> </table>
Táblázatok beállítási lehetőségei1 Szélesség (oszlop, cella) Ha nincs pipa, akkor a szöveg hossza Lehet képpont, de akkor fix Legjobb a % (böngésző ablak méretezése!) Igazítás (Táblázat, cellán belül) Táblázatnál, ha nem teljes szélességű Cellamargó Cellatartalom és a cella széle között(cellpadding) Cellaköz Cellák közti üres terület(cellspacing)
Táblázatok beállítási lehetőségei2 Magasság Mint szélesség, de a tartalom nem görgethető… Szegélyek Táblázat…táblázatszegély összecsukása is jó Színek Figyeljünk a lapháttérre és az olvashatóságra!
Táblázatok beállítási lehetőségei3 Cellák egyesítése, felosztása Kijelölés/Táblázat/Módosítás soregyesítés <td class="style2" colspan="2"> </td> oszlopegyesítés <td class="style2" rowspan="2"> </td> (Figyel meg hova rakja a kódban és oszlopból sorból mennyi lesz!)
Táblázat feladatok 41, 42. oldal +Bolygók (minden eddigi benne van , mappában a hozzávalók, a képeket nem kell méretezni, csak beszúrni) (eredmény az !előzmények mappában)
Keretek1(HTML 5 nem támogatja) Fájl/Új dokumentum/Lap/Kereteket tartalmazó lapok/Függőleges felosztás keret1.htm tud görgetni, ha kell a böngészőablak mérete miatt jobb gomb-keret tulajdonságai… Hivatkozás keretes lapon Fájl/Új dokumentum/Lap/Kereteket tartalmazó lapok/Beágyazott hierarchia Hiperhivatkozás mint eddig, de megjelenési helyként a keretet kell megjelölni keret2.htm
Keretek2 Feladat: Osztálykirándulások neve a bal oldalon Mindegyikhez tartozzon egy képtár a jobbalsó keretben!
Képek a weblapon1 gif, jpg, png minden böngésző tudja (bmp-t ne!!) Beszúrás/Kép/Fájlból Kép kijelöléseFormátum/Tulajdonságok Képméret változtatható de ..!!!!!!!!!!!!!!!! Átméretezés képszerkesztővel!!! Körbefuttatás <img alt="albatrosz" src="albatrosz.jpg" width="800" height="537" />
Hivatkozás képrészleten Jobb gomb – képek eszköztár megjelenítése - sokszög alakú interaktív terület A körberajzolás bezárása után hivatkozás ablak jelenik meg – pl. új dokumentum és azonnali szerkesztés (macska.htm,egér.htm) Ha kész - Képek eszköztár – interaktív területek kiemelése (ha a területek átfedik egymást, akkor a legfelső (legutolsóként létrehozott) él)
Képtár a weblapon (csak érdekesség) Beszúrás/Webösszetevő/Fényképgyüjtemény (pl. Diavetítés elrendezés) Hozzáadás Miniatűr mérete Feliratot érdemes adni (A nagykép alá kerül) 66. oldal feladatai Vannak persze letölthető programok is erre a feladatra pl. JAlbum
Űrlapok Munkaablak/Eszközkészletek (ha nem lenne kint) Benne Űrlap-vezérlőelemek/ Űrlap(kk) (majdnem :(( VB , sőt form keletkezik) Elemek beszúrása kk 67-74. oldal
Youtube cucc embed (beágyaz) sorában lévőt a lapod html kódjába a megfelelő helyre beírni az embed sor mellett customize (szín, méret állítható) egy komplett sort alkot. pl. brian élete fikusz kukisz