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

WEBOLDALFEJLESZTÉS.

Hasonló előadás


Az előadások a következő témára: "WEBOLDALFEJLESZTÉS."— Előadás másolata:

1 WEBOLDALFEJLESZTÉS

2 Mi a webtárhely? Ha közzé szeretnénk tenni weboldalunkat az interneten, szükséges az, hogy egy webszervernek egy bizonyos területére töltsük fel a teljes munkakönyvtárunkat, azaz a site mappájánknak a tartalmát. A webszerverek ezen területeit nevezzük webtárhelynek, ezek használata egyes szolgáltatók esetében reklámozási felületért cserében ingyenes, mások esetében fenntartásukért borsos árat kell fizetni. Egy webszerveren általában több weboldal is található, a minőségi szolgáltatásokért, azaz nagyobb méretű tárhelyért, az adataink védelméért és a stabil, biztonságos működésért érdemes fizetni. Az igényelt webtárhelyekhez való hozzá regisztrálás után egy accounttal (hozzáféréssel) fogunk rendelkezni, amivel kapunk egy megadott méretű webtárhelyet, kapunk egy FTP elérést és egy webcímet.

3 Miként fest egy site mappa/munkakönyvtár?

4 A weblapfejlesztés eszközei (Tools of the Web Development)

5 A weblapfejlesztés eszközei A weblapfejlesztés egy összetett folyamat, mely számos, jól elkülöníthető részfolyamatra osztható, az egyes részfolyamatok végrehajtásához más-más eszközökre, más-más jellegű szoftverekre van szükség. Böngészők: Mozzilla Firefox, Safari, Opera, Google Chrome és az Internet Explorer. Editor vagy weblapszerkesztő programok: a. karakterese, b. grafikus (WYSIWYG). Dreamweaver Médiaelemek előállítására szolgáló programok: a. képszerkesztés, b. hangok szerkesztése, c. videók szerkesztése. Fájlkezelők: Mozzilla Filezilla Total Commander

6 A weblapfejlesztés alapelvei (The Principles of the Web Development)

7 A weblapfejlesztés alapelvei 1.Fájlszerkezettel kapcsolatos alapelvek a.A site-hoz hozzunk létre egy munkakönyvtárat, ezen belül helyezzük el az összes site-hoz kapcsolódó fájlt és könyvtárat. b.A site-on lévő fájlok és könyvtárak nevében csak az alábbiakat használjuk: - angol ábécé kisbetűit, - poz. egész számokat és - alulvonást ( _ ). Ne használjunk: nagybetűket, hosszú ékezetes betűket, speciális karaktereket (pl.: / ?. : ~ *), -t a.a fájlok közti linkelések esetében használjuk relatív elérési utat

8 2. Felbontással kapcsolatos alapelvek Cél: a vízszintes gördítősávok megjelenésének elkerülése. a. Fix szélességű design-tervezés esetén max. 950 px széles layoutot tervezzünk. (Ebben az esetben 1024x768-as felbontásra optimalizáljuk oldalunkat =994, szokás 990-re is optimalizálni.) b. A weboldalakra helyezett táblázatok és képek szélessége szintén max. 950 px legyen (kivéve a háttérképeket). A weblapfejlesztés alapelvei

9 A HTML leírónyelv (The HTML Description Language)

10 Mi a HTML? HTML (HiperText Markup Language) egy leírónyelv, jelölőnyelv. Nem programozási nyelv, azaz nincsenek benne ciklusok és szelekciók, csak szekvencia. (HTML jelölőnyelvben nem programozunk, csak kódolunk!!!) A HTML leírónyelv utasításai <> jelek között írandók. Ezeket tag -eknek, elemeknek vagy jelölőknek nevezzük. A HTML olyan jelölőnyelv, mellyel definiálható a weboldal: 1.tartalma (szövegek, képek táblázatok stb.) és 2.struktúrája (főcím, alcím, bekezdés, lista, kiemelések stb.).

11 A HTML tag-ek/jelölők/elemek példa Páros jelölők (tag-ek/elemek) pl.: – … Páratlan, önálló jelölők, üres (tag-ek/elemek) pl.: –

12 A jelölők felépítése Páros jelölők (tag-ek/elemek) … Páratlan, önálló jelölők, üres (tag-ek/elemek) ˽ =

13 Egy páratlan jelölőre/üres tag-re példa jelölő attribútum érték

14 Böngészőprogramok A böngészők értelmezik a HTML kódokat és abból előállítják a formázott, kész weboldalt.

15 A HTML miért jelölőnyelv? (akadálymentesítés a kód szintjén) A jelölők (tagek) segítségével jelöljük meg a dokumentum egyes részeit: hierarchia + formátum

16 1. A Dokumentum Típus Definíció az állomány legelején, ami a használni kívánt DTD-t adja meg. 2. A HTML fejléc, ami technikai és dokumentációs adatokat tartalmaz, ezeket az internet böngésző nem jeleníti meg. (magyar nyelvű, karakterkódolás, CSS link) 3. A HTML törzs tag párok, amely a megjelenítendő információkat tartalmazza. Egy HTML/XHTML/HTML5-ös dokumentum szerkezete

17 A HTML5-ös dokumentum minimum szerkezete Title of the document The content of the document......

18 A HTML5-ös dokumentumban a fejlécinformáció, a tartalominformáció, a karakterkódolás és a stílusfájl nevének megadása Title of the document The content of the document......

19 Az a jó ha a tartalmat és a megjelenítést különválasztják! Formázás HTML-attribútumokkal (nem jó megoldás): Többször kell leírni ugyanazt a formátumot → több munka, nagyobb esély a tévesztéshez

20 A tartalom és a megjelenítés szétválasztása Válasszuk külön a tartalmat és a formátumot! HTML = tartalom, struktúra CSS = formátum Cascading Style Sheets


Letölteni ppt "WEBOLDALFEJLESZTÉS."

Hasonló előadás


Google Hirdetések