Előfordult már veletek, hogy megtetszett egy honlapnak a design-ja, és ti is valami hasonlót szerettetek volna a sajátotokra?!
Most bemutatom, hogy hogyan is lehet menükkel ellátott fejlécet készíteni, amivel könnyedén feldobhatjátok az oldalatokat. Hogy pontosan mire is gondolok, azt az alábbi weblapok mutatják...
Pretty Little Liars Online - http://pll-online.org/
Criminal Minds Fans - http://www.cm-fans.com/
Castle-Fans - http://castle-fans.org/
Akkor vágjunk is bele! A telepítéshez szükséges program: GIMP. → Linuxokon már eleve telepítve van, Windows-t használóknak pedig innen letölthető.
Nyissuk meg a GIMP-et, UHU-Linuxot használók a következőképp tehetik →
Alkalmazások → Grafika → Bittérkép → GIMP
A következő kép fogad minket:
Most nyissuk meg a már elkészített fejlécünket. → Fájl → Megnyitás → Itt keressük meg a képet, válasszuk ki, majd kattintsunk a Megnyitás gombra.
Image-map (Kép-térkép) készítése:
Szűrők → Web → Kép-térkép... → Új ablakban jelenik meg a fejlécünk.
Az oldalsó sávban kattintsunk a téglalap alakú ikonra, és a görgetősávval tekerjük a képet a feliratokhoz. Az én esetemben ezek a Home, Aaliyah, Galéria és Oldal lesznek.
Most jelöljük ki a Home-ot, ha megtettük, egy felugró ablak jelenik meg, ahol a következőket állíthatjuk be:
Hivatkozás fülön → Hivatkozás típusa: Egyéb; A területre való kattintáskor aktiválandó URL (kötelező): index.html; a Relatív hivatkozás előtt pipa (ez automatikusan be van jelölve).
Téglalap fülön a téglalap méreteit lehet pontosítani, és végül van a JavaScript fül (erre nekünk most nincs szükségünk!).
Ugyanezeket a lépéseket csináljuk végig a többi menüponton is, azzal a különbséggel, hogy a Hivatkozás fülön A területre való kattintáskor aktiválandó URL (kötelező) mezőbe az Aaliyah-n aaliyah.html, a Galérián galeria.html, és az Oldalon oldal.html legyen beírva.
Ha valamit elrontunk utólag szerkeszthetjük, illetve törölhetjük is a következő módokon.:
Miután végeztünk mentsük el. → Fájl → Mentés másként... → válasszuk ki, hogy hova mentse (célszerű ugyanabba a mappába menteni, ahol maga a fejléc van), majd nyomjuk meg a Mentés gombot.
Most bemutatom, hogy hogyan is lehet menükkel ellátott fejlécet készíteni, amivel könnyedén feldobhatjátok az oldalatokat. Hogy pontosan mire is gondolok, azt az alábbi weblapok mutatják...
Pretty Little Liars Online - http://pll-online.org/
Criminal Minds Fans - http://www.cm-fans.com/
Castle-Fans - http://castle-fans.org/
Akkor vágjunk is bele! A telepítéshez szükséges program: GIMP. → Linuxokon már eleve telepítve van, Windows-t használóknak pedig innen letölthető.
Nyissuk meg a GIMP-et, UHU-Linuxot használók a következőképp tehetik →
Alkalmazások → Grafika → Bittérkép → GIMP
A következő kép fogad minket:
Most nyissuk meg a már elkészített fejlécünket. → Fájl → Megnyitás → Itt keressük meg a képet, válasszuk ki, majd kattintsunk a Megnyitás gombra.
Image-map (Kép-térkép) készítése:
Szűrők → Web → Kép-térkép... → Új ablakban jelenik meg a fejlécünk.
Az oldalsó sávban kattintsunk a téglalap alakú ikonra, és a görgetősávval tekerjük a képet a feliratokhoz. Az én esetemben ezek a Home, Aaliyah, Galéria és Oldal lesznek.
Most jelöljük ki a Home-ot, ha megtettük, egy felugró ablak jelenik meg, ahol a következőket állíthatjuk be:
Hivatkozás fülön → Hivatkozás típusa: Egyéb; A területre való kattintáskor aktiválandó URL (kötelező): index.html; a Relatív hivatkozás előtt pipa (ez automatikusan be van jelölve).
Téglalap fülön a téglalap méreteit lehet pontosítani, és végül van a JavaScript fül (erre nekünk most nincs szükségünk!).
Ugyanezeket a lépéseket csináljuk végig a többi menüponton is, azzal a különbséggel, hogy a Hivatkozás fülön A területre való kattintáskor aktiválandó URL (kötelező) mezőbe az Aaliyah-n aaliyah.html, a Galérián galeria.html, és az Oldalon oldal.html legyen beírva.
Ha valamit elrontunk utólag szerkeszthetjük, illetve törölhetjük is a következő módokon.:
 |
| Szerkesztés |
 |
| Törlés |
Miután végeztünk mentsük el. → Fájl → Mentés másként... → válasszuk ki, hogy hova mentse (célszerű ugyanabba a mappába menteni, ahol maga a fejléc van), majd nyomjuk meg a Mentés gombot.
Ezután be is zárhatjuk a GIMP-et.
Az Image-map HTML-kódba illesztése:
Nyissuk meg az elmentett fájlt, a következő sorokat másoljuk ki belőle, és illesszük bele az index.html fájlba a fejléc részhez.
<img src="aaliyah-fejlec.png" width="1024" height="493" usemap="#map" />
<map name="map">
<area shape="rect" coords="35,386,170,451" href="index.html" />
<area shape="rect" coords="195,386,375,451" href="aaliyah.html" />
<area shape="rect" coords="660,386,813,451" href="galeria.html" />
<area shape="rect" coords="854,386,980,451" href="oldal.html" />
</map>
<map name="map">
<area shape="rect" coords="35,386,170,451" href="index.html" />
<area shape="rect" coords="195,386,375,451" href="aaliyah.html" />
<area shape="rect" coords="660,386,813,451" href="galeria.html" />
<area shape="rect" coords="854,386,980,451" href="oldal.html" />
</map>
Ha megvagyunk vele, akkor lássuk a végeredményt!
 |
| aaliyah.html |
 |
| diszkografia.html |
Nincsenek megjegyzések:
Megjegyzés küldése