Brielle
Brielle
2015. aug 18

Ezúttal most elhoztam az összetett fejléc készítésének második részét, melyben kódolni fogunk. Az előző részben bemutattam, mire kell odafigyelni maga a fejléc elkészítésénél, most pedig folytatni fogjuk a fejléc, és a rajta megjelenő dolog elhelyezésével az oldalunkon.

Ám még mielőtt belekezdenénk, mindenképpen szeretnék nektek kirakni egy kérdést, ami az előző résznél merült fel. Nagyon fontos, szeretném is felhívni mindenkinek a figyelmét rá. (Remélem, nem baj, hogy beillesztettem a kérdésed)

“Ezt a fejlécet a gportálon is fel lehet használni? Mármint ha elkészítenék egy hasonlót akkor ott is meg tudom így jeleníteni, mint pl a te oldaladon van?!”

A válaszom pedig annyi lenne, hogy miért ne lehetne? Sőt, nagyon jó, hogy rákérdeztél, mivel eddig nem említettem meg, hogy akár máshol (mint pl Gportál) is meg lehet-e csinálni ezt a fejlécet. Ezért ebben a részben most különösen ügyelni fogok rá, hogy olyan kódrészletek ne jelenjenek meg, amik csak WordPressben működnek, így bárki, bármilyen felületen be tudja majd kódolni magának, mint pl Gportálon. Most pedig kezdjük is a munkát.

Teljes fejléc beillesztése

Régebben készítettem egy olyan leírást, melyben azt mutatom be, hogyan lehet fejlécet teljes képernyő szélességben beilleszteni, tehát hogy minden felbontásban illeszkedjen. Most hasonlóan fogunk eljárni, mint akkor, csupán egy részletet fogunk kihagyni. Mégpedig azt, hogy nem fogjuk felvágni a fejlécünket.

A fejlécünket feltöltés után helyezzük el a CSS kódunkban háttérként body-ban, mégpedig úgy, hogy legfölül helyezkedjen el, az oldal tetején, ahol a helye van:

body{
margin: 0; /*fejléc távolsága a lap tetejétől nézve: maradjon nulla!!*/
background: url(http://teljesfejléc); /*fejléc linkje*/
background-position: center top; /*fejléc elrendezése az oldal tetején*/
background-repeat: repeat-x; /*fejléc ismétlődése vízszintesen*/
background-color: #e2e2e2; /*oldal hátterének színe*/
}

Mivel a fejlécet úgy készítettem el, hogy a maga az oldalháttér egységes színű, ezért annak a színkódját is meg kell adnunk a CSS-ben.

Fejléc felosztása

Most már maga a fejléc megjelenik, viszont még csak háttérként, ezért még egyik betervezett funkció sem működik. Emlékezzünk csak vissza, hogy miket találtunk ki a fejlécünkre, amik az elkészített téglalapokban fognak megjelenni. Nálam ezek a következők:

  • Szociális ikonok a legfelső, fehér sávban
  • Legújabb galéria képek a fejlécen elhelyezett dobozban
  • Navigációs menü az első téglalapban
  • Reklámsáv, melybe a hoszt által megadott reklám kerül
  • Legújabb hírek doboz, mely legalul helyezkedik el

Ezt mind el fogjuk helyezni az elkövetkezendő részben, HTML és CSS kód segítségével. De ne is siessünk annyira előre, hiszen először a fejléc felosztását kell elvégeznünk. Ezt fogjuk megtenni a Photoshop, illetve némi HTML kódolt táblázat segítségével.

Mivel pontosan meghatározott magasságú egy cellás táblázatokat fogunk használni, ezért felmerül a kérdés, hogy mégis hogyan adjuk meg azt a meghatározott magasságot… Hát, ha mindent az előző rész alapján csináltunk, akkor pontosan emlékszünk rá, hogy melyik téglalapot mekkorára készítettünk.

  • Legfölső csík: 80 pixel magas
  • Fejléc tartalma: 400 pixel magas
  • Navigációs menü csík: 80 pixel magas
  • Reklám csík: 90 pixel magas
  • Legfrissebb hírek csík: 110 pixel magas

Ha mégsem emlékeznénk a méretekre, vagy csak találomra adtuk meg őket, akkor adjunk hozzá a Nézet » Új segédvonal opciónál vízszintes segédvonalakat, és osszuk be vele a fejlécünkön a megfelelő területeket vele:

Ezután a téglalap kijelölő eszközzel jelöljük ki az adott téglalapot a segédvonalak között. A segédvonalakra azért van szükség, mivel ha ezek jelen vannak, akkor könnyebb kijelölni a közöttük lévő részt, mivel a kijelölő ehhez könnyebben ütközik.

Ha kijelöltük, akkor a Kép » Vágás opcióval vágjuk körbe a kijelölt részt, majd a Kép » Képméret opcióval már könnyedén megtudhatjuk az adott terület magasságát.

Ha mindent jól csináltunk, akkor megjelenik ugyanaz a méret (80 pixel) a magasságnál, mint amennyit alapból adtunk meg a téglalapnak. A kép megvágását később persze vissza tudjuk vonni, hogy megnézhessük a többi magasságot is.

Táblázatok beillesztése

A fejlécünk a háttérben van, és pontosan illeszkedik az oldal tetejéhez, és ha elhelyezünk táblázatokat az oldal fejléc részében, akkor azok a táblázatok erre a fejlécre fognak illeszkedni. Az előző részben felosztottuk a fejlécünket, megtudtuk, hány táblázatra lesz szükség. Az én esetemben ez 5 lett, ami 5 különböző táblázatot jelent.

Természetesen, ezeket a táblázatokat lehet egybe is vonni, és akkor egy egy oszlopos, 5 soros táblázatot kell létrehoznunk, de mivel én az átláthatóság miatt jobban szeretek külön táblázatokat létrehozni, ezért most így fogom bemutatni. Kezdjük is.

A fejlécünket az elkészítése során 1024-es szélességre terveztük, hogy senkinél ne csússzon szét, ezért mindegyik táblázatunk ilyen széles lesz. Először a legfelső fehér csík táblázatát fogom beilleszteni, mely 80 pixel magas. Ennek a következő lesz a kódja:

<div align="center"><table cellpadding="0" cellspacing="0" border="0" width="1024" height="80"><tr>
<td class="socialicons" valign="top">
<a href="https://www.facebook.com/CherryUniverse"target="blank">Facebook</a>
<a href="http://twitter.com/cherryuniverses"target="blank">Twitter</a>
</td></tr></table></div>

Láthatjuk, hogy már megadtam a cellának a CSS meghatározását is, class=”solcialicons” taggel. Ezzel az ikonok elhelyezkedését, valamint megjelenését fogjuk megadni CSS-ben. Az ikonokat megadhatjuk egyszerű szöveggel, vagy akár képpel is, esetleg WordPress font ikonokkal. CSS formázás:

.socialicons{
padding-top: 35px;
padding-left: 850px;
}

.socialicons A {
color: #d0d0d0;
border: solid 1px #d0d0d0;
padding: 6px;
font-size: 10px;
font-family: arial;
text-transform: uppercase;
letter-spacing: 1px;
}

.socialicons A:hover{
color: #ea84cf;
border: solid 1px #ea84cf;
}

Ha az első táblázatunkkal megvagyunk, akkor következik a második, melybe a legfrissebb Galéria képek tartoznak. Ennek a mérete 1024×400 pixel lesz, és a következő a kódja:

<div align="center"><table cellpadding="0" cellspacing="0" border="0" width="1024" height="400"><tr>
<td class="latestimages" valign="top">
<iframe width="320" height="155" frameborder="0" name="latestimages" src="http://cherryuniverse.net/gallery/cpmfetch/latestimages.php"></iframe>
</td></tr></table></div>

A legfrissebb galéria képek fejlécre helyezéséről is olvashattok egy tutorialt, melyet nem is olyan régen készítettem el. Most pedig az ehhez tartozó CSS kódot kell elkészítenünk a dobozkához, ahol megjelennek a legfrissebb képek:

.latestimages{
padding-top: 225px;
padding-left: 675px;
}

Most pedig elérkeztünk a navigációs menühöz, melyhez ismételten készítettem egy minta kódot. Magának a táblázatnak a következő lesz a kódja:

<div align="center"><table cellpadding="0" cellspacing="0" border="0" width="1024" height="80"><tr>
<td class="cssmenu" valign="top">
<a href="http://cherryuniverse.net/">Homepage</a>
<a href="http://cherryuniverse.net/lookbook">LookBook</a>
<a href="http://cherryuniverse.net/tutorials">Tutorials</a>
<a href="http://cherryuniverse.net/resources">Resources</a>
<a href="http://cherryuniverse.net/designs-2">Designs</a>
<a href="http://cherryuniverse.net/about">About</a>
</td></tr></table></div>

A CSS menü további része ezen tutorial alapján készül: Aktív fejlécmenü. A menüpontokat e szerint kell megformálni, fölöslegesnek érzem, hogy még egyszer leírjam.

Az utolsó előtti dobozunkba a hoszt reklámja fog kerülni, melynek a pontos mérete 728×90. Ennek a helyét a fejléc elkészítésekor is megadtuk, ez lesz a következő doboz.

<div align="center"><table cellpadding="0" cellspacing="0" border="0" width="1024" height="90"><tr>
<td class="ad" valign="top">
<script src="http://www.ads.flaunt.nu/ad/728x90_dark.js"></script>
</td></tr></table></div>

Nyilván a megfelelő helyre a saját hosztod reklámját illeszd, ügyelj arra, hogy az ugyanekkora méretűt. Az ehhez tartozó CSS pedig a következő:

.ad{
padding-left: 295px;
}

Mivel a leírás elején megemlítettem, hogy csak olyan kódokat rakok ki, melyek bárhol felhasználhatóak, ezért a legfrissebb bejegyzések táblázata már nem fog ide kerülni, egyébként is egészen személyre szabható, hogy mit szeretnénk elhelyezni a fejlécünkön.

Ha mégis érdekelne a legfrissebb bejegyzések WP kódja, akkor azt a következő linken megtekinthetitek:

NikkiiWorld » Legutóbbi bejegyzések elhelyezése  icon-external-link 

Igazából, ennyi lenne ez a kis kódolós része a dolognak, igyekeztem nem túl hosszúra és bonyolultra nyújtani, remélem, akit érdekel, az meg tudja valósítani saját oldalán. Ha szeretnétek még hasonló kódolós LookBookokat, akkor azt jelezzétek, illetve ha bármi kérdésetek maradna, akkor hozzászólásban szívesen fogadom őket. :)


Kérdésed van? Írj bátran!









Hozzászólásod csak jóváhagyás után fog megjelenni.

Ellenőrző kód *