Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Doboz modell

Pozicionálás

Szöveg formázása

Színek

Méretek

Táblázatok

Listák

Pozicionálás - Az oldalfelépítés és a pozicionálás problémái

Azt szeretnénk, hogy az elkészített weblapunk optimális módon jelenjen meg minden látogató számára:

  • A tartalom töltse ki a rendelkezésre álló felületet. (Például egy nagy monitoron.)
  • A weblap elemei oldal irányban ne lógjanak le a megjelenítő felületről. (Vagyis egy kicsi monitoron se kelljen vízszintes irányban görgetni, mert az nagyon megnehezítené a weblap átnézését.)
  • Az oldal felépítése egyezzen meg az általunk tervezett elrendezéssel. Ez triviális elvárásnak tűnik, de az előző két követelmény teljesítésével együtt általában nehéz megvalósítani.

Egy weblap elemeinek pozicionálása illetve az oldalfelépítés kialakítása mindig is a weblapkészítés legproblémásabb területei közé tartozott. A felhasználók különböző felbontású és méretű monitorokon, különböző operációs rendszereken különböző böngészőkkel nézik meg a világhálóra feltöltött oldalakat.

Ebben a sokféleségben a weblapfejlesztők két utat választhatnak:

  • Minden elképzelhető összeállításra megpróbálnak nagyon precíz beállításokat megadni. Egy ilyen weblap elkészítése nagyon sok munkával jár és egy nem tesztelt konfiguráció esetén „széteshet” a weblap.
  • A másik lehetőség az, hogy csak a legszükségesebb tulajdonságokat definiálják. Ebben az esetben a felhasználók alapbeállításai jelentős hatást gyakorolnak a weblap megjelenésére.

Én azt javasolom, hogy a második utat válaszd. Igaz, hogy így nem lesz teljes kontrollod a weblapod megjelenítése fölött, de néhány tipikus konfigurációra optimalizálva és azokon tesztelve az oldalaidat jó eredmény érhető el. A böngészők – ha szükséges és lehetőségük van rá – megpróbálják a felhasználók számára kedvező irányba módosítani a weblapok megjelenítését.

Tipp: Az átlagosnál kissé keskenyebb monitorra optimalizáld a weblapodat! Így két oldalt margó lesz a hasznos tartalom mellett egy nagy méretű monitoron, ami nem zavaró. Viszont ha az oldalaidat széles monitorra terveznéd, akkor egy régebbi gépen vízszintes görgetésre lenne szükség, ami nehézzé tenné a weblapod olvasását.

Az internetezésre alkalmas telefonok elterjedésével tovább bonyolódott a weblapkészítők helyzete. Például ha valaki otthon 1920x1080-as felbontású monitoron nézi egy étterem weblapját, amikor egy családi ünnepséget tervez, akkor részletes tájékoztatást kell neki nyújtani, szép és nagy fényképekkel. Akkor fog asztalt foglalni, ha lenyűgöző látványban van része. Viszont, ha az étteremtől két háztömbnyire keres egy jó helyet a mobilja segítségével (aminek a felbontása esetleg csak 240x320 pixel), akkor egy minimalista weblapot célszerű mutatni neki.

A problémára többféle megoldás létezik, de egyik sem tökéletes:

  • Az oldalak bal-felső részén el lehet helyezni egy linket ami „mobil-verzió”-ra viszi át a látogatót. Ez a legegyszerűbb, de csak akkor segít, ha a látogató észreveszi a linket.
  • Egy JavaScript program „megnézi” a képernyő méretét és átalakítja a weblapot, ha szükséges. Komoly programozói tudás kell hozzá, de biztos megoldás. (Feltéve, hogy a látogató gépén nincs kikapcsolva a JavaScript.)
  • Különböző stíluslapokat lehet definiálni a különböző médiatípusokhoz. Ilyen módon a megjelenítési tulajdonságokat könnyű megváltoztatni, de a tartalom „átszabása” már nehézkesebb.
  • Olyan oldalfelépítés kialakítása, amit rugalmasan tud kezelni a böngésző. Továbbá a weblap tartalmának elrendezése során ügyelni kell rá, hogy a legfontosabb információk kis méretű megjelenítőn is a látható tartományban legyenek.

Valószínűleg az utolsó verzió jelenti a legbiztosabban járható utat. Viszonylag egyszerűen ki lehet alakítani egy rugalmas oldalfelépítést. Például ez az oldal alapesetben 850 pixel széles. Ha a megjelenítő felület szélességét csökkented, például úgy, hogy a böngésződ ablakát nem teljes képernyős módra állítva zsugorítod, akkor szimulálni tudod, hogyan jelenne meg ez az oldal keskenyebb monitoron. Az alsó reklám miatt csak 740 pixelig tudod összenyomni az oldalt.

Ha kikapcsolod a JavaScriptet és frissíted az oldalt (nem fognak megjelenni a reklámok), akkor láthatod, hogy körülbelül 500 pixelig zsugorítható ennek az oldalnak a szélessége úgy, hogy a tartalom közben elfogadható módon jelenik meg.

JavaScript ki-be kapcsolása
-Mozilla Firefox-on: Eszközök > Beállítások > Tartalom > JavaScript engedélyezése
-Microsoft Explore-en: Eszközök > Internet beállítások > Biztonság > Internet > Egyéni szint > Active scripting

Pozicionálás táblázattal »


Tőzsde és technikai elemzés érthetően