Tutorial

Még régebben készítettem ezt a kódot egy hasonló tutorial alapján. Néhány dolgot átírtam, kibővítettem benne. Mivel úgysem lesz időm mostanában videót csinálni, feltöltöm a forráskódot. Teleírtam kommentekkel ami segíti a kód megértését.

Alapvetően kétféle betűtípust különböztetünk meg a weben: webstandard és nem webstandard betűtípusok. Webstandard betűtípusok pl. az Arial, Verdana, Courier, amik jó eséllyel mindenféle böngésző alatt meg fognak jelenni. Kiválóan összegyűjtött lista olvasható az alábbi linkre kattintva.

Az alábbi videókban két olyan problémára keressük a választ amivel a kezdők gyakran találkoznak.

1. körvonal, azaz kitöltés nélküli alakzat rajzolása

2. pontozott vonal készítése

Sajna a YouTube visszaminősítette a fiókomat, megint nem tudok 15 percnél hosszabb videót feltölteni, úgyhogy kénytelen voltam két darabra szedni, mint a régi szép időkben

Egy kis nyár eleji lazulós videó, valami ehhez hasonló eredménnyel. A megvalósításhoz szükség lesz Illustratorra is.

Na már megint egy menü. Ez nem tiszta CSS, kell hozzá pár sor jQuery, de valamivel talán használhatóbb, mint a legutóbbi variáció.

Habár rengeteg anyag született már a témában, a mai napig sok helyen látom a kérdést, hogy miért nem működik a vertical-align beállítás fix méretű DIV-ek esetében. A válasz egyszerű: azért, mert a DIV block típusú elem és nem úgy viselkedik, mint a táblázat cellái, ahol ugye az őskorban a valign=”middle” beállítást használtuk erre a célra.

Szabványos HTML + CSS űrlap készítés FIELDSET és LABEL tag-ek használatával.

Még régebben kezdtem el ezt a sorozatot felvenni, csak aztán félbemaradt. Ha kirakom, akkor előbb-utóbb úgyis kénytelen leszek folytatni Mint a címe is mutatja kezdőknek szól, tehát lassabb a tempó.

Már megint egy menü Viszont most egy olyan módszer amiről még nem volt szó a blogon. Meg lehetne oldani úgy is, hogy egyetlen képet használunk a menühöz, pl. úgy, hogy egymás alá tesszük a menu.png és a menu_on.png-t egyetlen képbe. Ilyenkor viszont használunk kellene a függőleges pozíció eltolást is.

Dinamikus képgaléria, mely kiírja képek számát és azt, hogy éppen hányadik képnél tartunk. A galérián belül lehet lépkedni jobbra-balra, ha elértük az utolsó elemet, utána visszaugrik az első képre.

Megpróbálkoztam egy almenüs menüt készíteni tisztán CSS-el, javascript nélkül. A videóhoz nem készültem elő, úgyhogy van benne egy nagy adag bénázás, de az eredmény működőképesnek tűnik. Ha valaki megcsinálja és teszteli Opera alatt, majd számoljon be az eredményről.

A toggle lehetővé teszi egy elem eltüntetését illetve megjelenítését kattintástól függően. Itt is a click eseménnyel startolunk, majd első kattintásra előhozzuk a tartalmat, másodikra eltüntetjük.

Egyszerű képváltogató megoldás jQuery-vel. Megint belefutottam a jó öreg IE last-child problémába, úgyhogy erre is mutat megoldást a videó. Felejtsétek el amit a toggle-ról mondtam, ehhez a feladathoz nem jó megoldás, ki is vettem a videóból. Majd csinálok erre is egy értelmes példát.

Egyszerű regisztrációs űrlap, adatellenőrzés, és az adatok adatbázisba írása. Összesen 1 óra 13 perc.

Még mindig az őszi weboldallal foglalkozunk Megnézünk egy egyszerű procedurális módszert amivel már dinamikusan tudjuk felépíteni az oldalunkat PHP használatával.

Ahogy ígértem, itt az utolsó olyan videó, ami korábban nem volt elérhető HD minőségben. Kicsit hosszúra sikeredett, szerintem az eddigi leghosszabb anyag a maga 23 percével. Nem volt kis meló hibátlanul felvenni A végeredmény nem nagy eresztés, azonban elég sok hasznos funkciót használunk a készítés során.

Elkészült a mindenki által annyira várt videó, ahol a korábban Photoshopban elkészített weboldal mintából megírjuk a HTML és CSS kódot.

A kilencedik és egyben utolsó részben a CSS3 újdonságaival foglalkozunk, illetve kapunk egy kis betekintést, hogy miért nem kedvelik a webdesignerek az Internet Explorert. A videóban bemutatott dolgok többsége egyébként a 9-es verzióban már működik. Megint sikerült mást gépelnem, mint amit mondok, 6:10-nél értelemszerűen border-radius-t kellene írni

Az utolsó előtt részben átismételjük az eddig tanultakat.