Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Weblapkészítés. Bevezető A weblapok a web szerveren fájlokban tárolódnak A weblapok gyakran HTML nyelven íródnak  kiterjesztés: htm vagy html Hyper Text.

Hasonló előadás


Az előadások a következő témára: "Weblapkészítés. Bevezető A weblapok a web szerveren fájlokban tárolódnak A weblapok gyakran HTML nyelven íródnak  kiterjesztés: htm vagy html Hyper Text."— Előadás másolata:

1 Weblapkészítés

2 Bevezető A weblapok a web szerveren fájlokban tárolódnak A weblapok gyakran HTML nyelven íródnak  kiterjeszté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

3 A weblap szerkezete1 Új lap - 1.style1 {…} …

4 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: a laphoz tartozó információk a böngésző címsorában megjelenő cím stílusdefiníciók –törzs: itt van az egész weblap leírása

5 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

6 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?)

7 HTML 5 szabvány előtt a lap címe első sor. második sor. 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

8 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

9 MS SharePoint Designer 2007

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

11 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)

12 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

13 Megtekintés böngészőben

14 Karakterformázás (elso mappa) Stílus keletkezik betűtípus.style2 { font-family: "Courier New"; } betűméret.style3 { font-size: x-large; } betűszín Félkövér, Dőlt, Aláhúzott, Index

15 Bekezdések1 Ez itt a bekezdés szövege 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.style1 { text-align: center; }

16 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 (nincs külön zárója), sh+enter választóvonal Beszúrás/vízszintes vonal

17 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

18 Listák (html) felsorolás: (unordered list) számozás (ordered list) mindkettőben a listaelemek: között és paraméterei adják meg a számozás és a felsorolás jelét

19 Lap háttere Üres- jobb gomb- lap tulajdonságai – –Lehet kép is Feladatok oldal

20 Hiperhivatkozások Beszúrás/hiperhivatkozás (elemleírás is lehet) Címke beszúrása Beszúrás/könyvjelző... Hivatkozás beszúrása...

21 Hivatkozások alkalmazása 1.hosszu_szoveg. txt hová ugorjon és beszúrás/könyvjelző honnan és beszúrás/hiperhivatkozás/könyvjelző 2.kismorzsa.jpg  nagymorzsa.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 3.másik html-t nyit: mint az előző 4. .gif-re katt: beszúrás/hiperhivatkozás/elektronikus levélcím

22 Hivatkozások színe Formátum/Háttér/ Formázás v. Jobbgomb-Lap tulajdonságai Feladatok 28. Oldal

23 Táblázatok ( táblázatok mappa ) Táblázat/Beszúrás/Táblázat pl. 2*2-es

24 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 )

25 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!

26 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 oszlopegyesítés (Figyel meg hova rakja a kódban és oszlopból sorból mennyi lesz!)

27 Táblázat feladatok 41, 42. oldal Bolygók +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)

28 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

29 Keretek2 Feladat: Osztálykirándulások neve a bal oldalon Mindegyikhez tartozzon egy képtár a jobbalsó keretben!

30 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ése  Formátum/Tulajdonságok Képméret változtatható de..!!!!!!!!!!!!!!!! Átméretezés képszerkesztővel!!! Körbefuttatás

31 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)

32 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

33 Űrlapok Munkaablak/Eszközkészletek (ha nem lenne kint) formBenne Űrlap-vezérlőelemek/ Űrlap(kk) (majdnem :(( VB, sőt form keletkezik) Elemek beszúrása kk oldal

34 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


Letölteni ppt "Weblapkészítés. Bevezető A weblapok a web szerveren fájlokban tárolódnak A weblapok gyakran HTML nyelven íródnak  kiterjesztés: htm vagy html Hyper Text."
Google Hirdetések