Bemutató, képek felhasználásával Az itt látható képek bemutatása weblap, nem csak képek bemutatására használható.
Ha a hivatkozási sorokban a nagyképek helyére, egy xhtml - lapunk elérési útját írjuk be, akkor az fog megjelenni, ha a képre kattintunk. Lásd lejjebb az ismertetőben.
Képek mellé, írj a képről egy rövid ismertetőt.
Például:
- Kit vagy mit ábrázol a kép.
- Mikor készült.
- stb.
Ha a kisképre kattintunk, megjelenik a nagykép.
Visszatérni a nagyképről a böngésző ablakában lévő vissza nyilall, lehet.
Ehhez a képhez nem hoztunk létre hivatkozást, így hiába kattintnak rá, nem jelenik meg nagykép.
Ha úgy gondoljuk, hogy elég a kiskép mérete is, akkor felesleges nagyképekkel terhelni a weblapunk memória igényét.
A képek méretét te magad választod meg.
Az itteni kis képek, 200px x 110px azaz képpont méretűek, de lehetne 100px x 100px, 150px x 150px, stb.
A kisképekhez rendelt nagyképek mérete, most 600px x 330px.
Ehhez tudsz viszonyítani, hogy neked megfelelő e ez a méret. Ha úgy gondolod, a nagyképek méretét is megváltoztathatod.
De figyelj oda, hogy az általad megadott nagykép, lehetőleg teljes tartalmával elférjen a monitor ablakában, a jó áttekinthetőség végett.
A kisképeket felhasználhatjuk eladandó értékeink vagy áruink bemutatására is.
Rövid leírást helyezünk el a kiskép mellett, és a nagyképen részletesebben láthatják a vevők.
Ha bővebb leírást akarunk, akkor készítsünk egy másik xhtml - lapot, melyen megjelentetünk egy nagyképet, és bővebben részletezzük a képpel kapcsolatos leírást
A képek bemutatásához nem kell css, azaz stíluslapot készíteni. De ha készítünk az se baj.
Ha nem készítünk css, azaz stíluslapot, akkor a html - lapon határozzuk meg, hogy a weblapunk háttérszíne milyen legyen, képek és szöveg hól helyezkedjen el, a képek és szöveg között mekkora távolság legyen.
Meghatározásokat a head területén található style sorba kell beírni.
Példa:
<head>
<title> Képeink bemutatása </title>
<style type="text/css">
body {background-color: #ccc; }
h1, h2 {text-align: center;}
.images {clear: left; }
.images img { float: left; padding-right: 15px; padding-bottom: 5px; }
</style>
</head>
A képekre utaló meghatározásokat és a hozzájuk tartozó rövid ismertetőt, olyan dív szakaszban helyezzük el, melynek azonosítója images elnevezésű, és class osztályazonosítóhoz van rendelve.
Megjegyzés:
Adhatunk az images helyett más elnevezést is, például: kepek.
Ebben az esetben, a style sorban lévő images szavakat töröljük és írjuk be helyettük a kepek szót.
Kell készítenünk egy mappát, melyben elhelyezzük a nagyképeket és kisképeket
Én, a nagyképeket 600x330px méretűre a kisképeket 200x110px méretűre készítettem, de ettől mindenki tetszés szerint eltérhet.
A 750x550 méretű képek, a kisebb monitorokon is élvezettel nézhetők, ettől nagyobb képeknél, a kép áttekintése csak úgy lehetséges, ha a görgetősávval le és fel mozgatjuk a képet, azaz egyszeri ránézésre nem áttekinthető.
A következő div szakaszt, annyiszor másoljuk be html - lapunkra egymás után, amennyi képet el szeretnénk helyezni a bemutatóhoz készített weblapunkon.
Nagyképekre történő hivatkozásoknál, nagy X helyére írjuk azon mappa nevét melyben a képeket, tároljuk, a nagy Y helyére írjuk a képnek adott fájl nevet.
Kisképekre történő hivatkozásoknál, kis x helyére írjuk azon mappa nevét melyben a képeket, tároljuk, a kis y helyére írjuk a képnek adott fájl nevet.
Kipontozott részre írjuk, a képhez tartozó ismertetőt, vagy tájékoztatót.
<div class="images">
<p>
<a href="XX / YYYYYY.jpg"> <img src="xx / yyyyyyy.jpg" alt="kép neve" width="200" height="110" border="0" / > </a>
............... ................. .............. ............... ... ... .. ................... ... . . . . ........... <br />
............... ................. .............. ............... ... ... .. ................... ... . . . . ............. <br />
............... ................. .............. ............... ... ... .. ................... ... . . . . ................. <br />
</p>
</div>
Ehhez a képhez, olyan hivatkozást készítettem, mely, nem egy másik nagyképre mutat, hanem arra a weboldalra, mely, a képek témakörével foglalkozik.
<a href="kepek.html"><img src="images/kutya200x110.jpg" alt="Kutya" width="200" height="110" border="0" /></a>
Ezt a hivatkozási meghatározást, a fenti példában említett nagy X és nagy Y helyére írtam be.
A "jpg" kiterjesztés helyett, most "html" szerepel.