Tartalom
- Képgaléra készítése Clearbox felhasználásával
- Felbontástól függő oldalszélesség és tartalom
- Lenyíló menü készítése
- Regisztrációs oldal készítése
- Weblap szerkezetének kialakítása div-ekkel
Képgaléra készítése Clearbox felhasználásával
Első lépésként készítsd el a képeket! Ehhez minden képhez készítsd el a kisméretű képeket, ami meg fog jelenni az oldalon és ezekre kattintva jelenik meg a nagy kép. Bármilyen képszerkesztőt használhatsz, én a FastStone Image Viewer-t szoktam meg. A mappaszerkerkezetet ennek megfelelően alakítsd ki! Célszerű a nagy és kis képeket ugyanúgy elnevezni, csak a kis képeket egy almappába elhelyezni.
Ezek után követekzhet a html kódolás. Először ne felejtsd el a <head>-be elhelyezni a <script src="clearbox.js" type="text/javascript"></script> kódrészletet. A kis képeket a legegyszerűbb táblázatban elhelyezni. Természetesen minden kis kép egy hivatkozás is, ezeknek a hivatkozásoknak az attribútuma a Clearbox-os kiegészítés.
<table> <tr> <td> <a href="img/hummer.jpg" rel="clearbox[gallery=Első galéria]"> <img alt="hummer" src="img/small/hummer.jpg" /></a> </td> <td> <a href="img/kamion.jpg" rel="clearbox[gallery=Első galéria]"> <img alt="kamion" src="img/small/kamion.jpg" /></a> </td> <td> <a href="img/mitsubishi.jpg" rel="clearbox[gallery=Első galéria]"> <img alt="mitsu" src="img/small/mitsubishi.jpg" /></a> </td> </tr> <tr> <td> <a href="img/motor.jpg" rel="clearbox[gallery=Második galéria]"> <img alt="motor" src="img/small/motor.jpg" /></a> </td> <td> <a href="img/quad.jpg" rel="clearbox[gallery=Második galéria]"> <img alt="quad" src="img/small/quad.jpg" /></a> </td> <td> <a href="img/vw.jpg" rel="clearbox[gallery=Második galéria]"> <img alt="vw" src="img/small/vw.jpg" /></a> </td> </tr> </table>
A fenti példában látható, hogy ha egy oldalon akarsz több galériát megjeleníteni, akkor egyszerűen a galériák elnevezését kell megfeleően megadni.
Minta
Letöltés
Felbontástól függő oldalszélesség és tartalom
Felmerült a következő probléma: változó szélességű weblap tartalmat kell készíteni, de százalékos szélességmegadással nem megoldható a probléma, mert van fix szélességű tartalom, például a fejlécben szereplő flash animáció.
A megoldás a következő: készítünk minimum két külső stíluslapot két különböző felbontás tartományra (pl 1500-as szélesség alattira és fölöttire). Elkészítjük a két különböző méretű animációt is. Majd a lentebb leírt javascript-el jelenítjük meg az oldalunkat, a felbontás függvényében. A letölthető példában nem csináltam animációt, de a változó fejléctartalom jelzi a különböző tartalmat.
A html oldal fejrészébe a következő script-et kell írni:
<script type="text/javascript">
if (screen.width<1500)
{
document.write('<link rel="stylesheet" type="text/css" href="stilus.css" />');
}
else
{
document.write('<link rel="stylesheet" type="text/css" href="stilus_nagy.css" />');
}
</script>
Ez a kódrészlet a felbontástól függően betölti a stilus.css-t vagy 1500-nál nagyobb szélesség esetén a stilus_nagy.css-t.
A következő feladat a különböző tartalom kiíratása. Ehhez a következő scriptet kell alkalmazni:
<div class="head">
<h1 id="head_h1">
<script type="text/javascript">
if (screen.width<1500)
{
document.write("Fejléc | kicsi");
}
else
{
document.write("Fejléc | nagy");
}
</script>
</h1>
</div>
Lenyíló menü készítése
A következő példa bemutatja azt, hogyan készítsünk CSS segítségével lenyíló menüt a weblapunkra. Letöltés
Regisztrálás egy weblapon
Ebben a példában egy olyan weblapot készítettem, amelyen a felhasználók regisztrálhatnak az oldalon, ezáltal plusz tartalmakat érhetnek el.
Ami benne van:
- a regisztrált felhasználók két csoportba vannak sorolva, így eltérő tartalomhoz férnek hozzá
- elfelejtett jelszó
- admin dönti el, hogy ki regisztrálhat
Ami kimaradt:
- nincs e-mail cím ellenőrzés
- lehet két azonos nevű felhasználó
- az admin felületen még lenne mit csiszolni
A letöltött állományban benne van az adatbázis dump is, ami természetesen személyre szabható. Arra kell figyelni, hogy az admin felhasználó mindenképpen az 1-es azonosítót kapja. (A dump-ban admin, admin névvel és jelszóval szerepel).
Letöltés, Magyarázat
Weblap szerkezete
Kezdő weblapkészítőknek nyújt segítséget ez a minta. Egy alap weblapot készítettem, fejléccel, két hasábbal, menüvel és lábléccel. Az oldal szerkezetét természetesen div-ekkel alakítottam ki. Amire érdemes figyelni, hogy a bármilyen block típusú elemnél a szélességbe beleszámít a margin, a padding és a border is (A szegélyeket és a színeket ebben a példában csak azért használtam, hogy első ránézésre is elkülönüljenek a div-ek). A másik érdekesség a <div class="clear">nbsp;</div> rész, ami azért kell, hogy a container div háttérszíne látszódjon.
Megtekintés
Letöltés