Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

Honlapok funkcionális- és arculati tervezése, megvalósítása / A tartalom és megjelenés szétválasztásának eszközei, HTML5+CSS3 sablon elkészítése /Felbontásfüggő megjelenés

Stíluslap létrehozása

Felbontásfüggő megjelenés

A továbbiakban úgy fejlesztjük tovább a sablont, hogy az kisebb felbontásokban is optimális megjelenést adjon. Az eddig kifejlesztett arculat 800 képpont szélességig biztosítja a megfelelő megjelenést, ennél kisebb felbontásban már kényelmetlen a bejegyzések olvasása.

Megjegyzés

A Responsive Web Design (RWD) egy olyan tervezési módszert jelent, amelynek célja, hogy optimális megjelenést biztosítson (egyszerű olvashatóság, könnyű navigálhatóság) a különböző eszközökön (mobil eszközöktől a nagyobb felbontású monitorokig).

Lásd http://en.wikipedia.org/wiki/Responsive_web_design

A felbontásfüggő szabályokat például a következő módon tudjuk elhelyezni a CSS-kódban:

Forráskód
@media screen and (max-width: 850px) {
}
Megjegyzés

A fenti kód csak korszerű, a CSS3 ezen funkcióját támogató böngészőkben vezet eredményre.

A fenti blokkban elhelyezett definíciók a képernyőre mint médiumra vonatkoznak, abban az esetben, ha az ablak mérete maximum 850 képpont. Természetesen a minimális szélességet is megadhatnánk a min-width tulajdonsággal.

Mielőtt továbbfejlesztenénk az oldalsablont, a CSS-állományt módosítsuk úgy, hogy a <body> tagnél már ne legyen megadva minimális szélesség (min-width), vagyis töröljük – vagy tegyük megjegyzésbe – a min-width: 800px; definíciót!

A képernyő átméretezésekor az első zavaró körülmény az lesz, hogy a további bejegyzések szakaszban a két egymás mellett lévő doboz már olyan keskeny lesz, hogy kényelmetlen az elolvasásuk. Oldjuk meg azt, hogy ha a képernyő mérete kisebb, mint 850 képpont, akkor ezek a dobozok ne egymás mellett legyenek, hanem töltsék ki a rendelkezésre álló hely nagyobb részét.

Ezt a következő kóddal egyszerűen el is érhetjük:

Forráskód
@media screen and (max-width: 850px) {
section#tovabbibejegyzesek article {
  float: none;
  width: 95%;
  margin-left: 0;
  text-align: justify;
  margin-top: 10px;
  border: 1px;
 }
}
Fontos

Ezzel a szabállyal felül akarjuk írni a korábbi definíciót, ezért ügyeljünk arra, hogy a CSS-állomány végére tegyük ezeket a szabályokat!

Ezek után azt tapasztaljuk, hogy a böngésző átméretezésekor a megadott határt átlépve a bejegyzések nem kerülnek egymás mellé, így jóval olvashatóbbá válnak.

Ebben a példában azt látjuk, hogy a böngésző áméretezésekor - egy bizonyo s határ átlépése után - , a további bejegyzések blokkban látható dobozokat nem helyezi egymás mellé, így olvashatóbb lesz a tartalmuk.

Flash lejátszó letöltése

A további bejegyzések felbontásfüggő megjelenítése

Egy bizonyos szélesség alatt már a fenti megoldás sem ad jó eredményt, akkor már a két oszlopos elrendezés miatt a jobb oldali oszlopban lévő bejegyzéseket is kényelmetlen olvasni. Ebben az esetben megtehetjük, hogy a bal oldali blokkot a tartalom mögött jelenítjük meg, a bejegyzéseknek így még nagyobb hely jut. Ezt úgy érhetjük el, hogy felülírjuk a korábbi elrendezést, megszüntetjük az elemek lebegtetését.

Forráskód
@media screen and (max-width: 700px) {
section#bejegyzesek {
  float: none;
  width: 100%;
}
section#bejegyzesek section {
  margin-left: 0; 
}
section#blokkok {
  float: none;
  width: 90%; 
  margin: 0 20px 0 0;
}
}

Ekkor viszont a menü is az oldal aljára kerül. Ebben az esetben érdemes megjeleníteni a képernyőn azt az oldalmenüt, amit a HTML-sablonunkban elhelyeztünk, de eddig ki volt pozícionálva a képernyőről, hogy az a vizuális böngészőprogramokban ne látszódjon, a vak látogatók viszont el tudják érni a képernyőolvasóval. Ezen kívül megtehetjük, hogy az alaplap logó helyett csak a címsor szövegét jelenítjük meg.

Forráskód
@media screen and (max-width: 600px) {
header nav#oldalmenu {
position: static;
display: block;
left: 0;
top: 0;
margin: 10px;
}
 header nav#oldalmenu ul {
margin-left: 20px;
list-style-type: square;
}
 header h1:first-child {
background-image: none;
text-indent: 0;
height: auto;
margin-top: 25px;
}
 header {
height: auto;
}
 section#ikonsor {
margin: 10px;
right: 0;
top: 0;
}
 section#ikonsor img {
width: 25px;
background-image: none;
padding: 1px;
margin-right: 10px;
}
 section#kereses {
position: static;
margin: 10px;
}
 nav#nyomvonal {
width: 90%
}
}

Az oldalunk most már az alábbi animációban látható módon viselkedik:

Az animáció bemutatja, hogy a kialakított oldal hogyan viselkedik az ablak átméretezése során. Láthatjuk, hogy bizonyos szélességek elérésekor az oldal úgy változik, hogy a megjelenése optimálisabb legyen.

Flash lejátszó letöltése

Az Alaplap blog különböző felbontásokban más-más elrendezésben jelenik meg.
Feladat

Készítsd el azt a sablont, amely azt mutatja meg, hogy egy blogbejegyzés hogyan jelenne meg önállóan az oldalon!

Emlékeztetőül az alábbiakban láthatod ezen oldal drótváz tervét.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.