A weboldal elrendezése egy HTML -jelölésen alapuló hipertext dokumentumstruktúra létrehozása , általában stíluslapok és kliensoldali szkriptek használatával , hogy a tervezési elemek az elrendezéshez hasonlóak legyenek [1] .
A weboldalak elrendezése annyiban tér el a nyomtatástól , hogy figyelembe kell venni a különböző böngészőkben az elemek megjelenítési különbségét , illetve az eszközök munkaterületének méretét [2] .
A helyszínrajzi munkák a helyszín összeállítási szakaszába foglalhatók .
Tim Berners-Lee az Európai Részecskefizikai Intézetben dolgozott egy olyan nyelvezetet, amely nem a tervezés eszközeire, hanem a szövegjelölés logikájára helyezte a hangsúlyt. Egy ideig az oldalakat úgynevezett "akadémiai tervezésben" tervezték, például a lib.ru [3] .
A Netscape böngésző megjelenésével a helyzet megváltozott. A böngészőfejlesztők nem szabványos HTML-címkéket vezettek be, amelyek célja a dokumentum megjelenésének javítása [3] . A böngésző annyira elterjedt volt, hogy a nem szabványos címkék nem okoztak gondot: nincs értelme attól tartani, hogy más böngészők nem támogatják ezeket a címkéket, amikor a látogatók mindössze 10%-a használ más böngészőt [3] . Az oldalakat már nem "akadémikus" stílusban fejlesztik [3] . Elkezdtek gondolkodni a tervezésen, ami azt jelenti, hogy bonyolultabb elrendezésre volt szükség [3] .
Az 1990-es évek közepe óta az MS Internet Explorer a fogyasztók egyre nagyobb részét ragadta meg [3] . A böngészőfejlesztők hozzáállása eltérő volt, és a támogatott technológiák halmaza is különbözött [3] . Mindez csak növelte a webhelyfejlesztők kellemetlenségét, növelve az oldal fejlesztési idejét [3] .
A piacért folytatott küzdelem során az öregedő és gyengén támogató Netscape 4 és Internet Explorer 4 (IE 4) szabványokat a böngészők ötödik verziója váltotta fel [4] . Az IE 5 -nek nemcsak az elődje hibáit kellett volna kijavítania, hanem a CSS-szabványok támogatását is javítani kellett [4] . A Microsoft erre a lépésre volt ítélve, már csak azért is, mert csatlakozott a W3C csoporthoz [4] . A fejlesztés során olyan jelentőssé vált az oldalak megjelenítési különbsége (és egyes oldalak egyáltalán nem működtek), hogy a fejlesztőknek egy speciális „kompatibilitási módot” kellett létrehozniuk [4] . Ebben a módban a böngésző "régi módon" működött [4] . A szabványtámogató mód használatához szükséges volt a <!DOCTYPE> [4] elem hozzáadása a html kódhoz . A kompatibilitási mód ötlete később más böngészőkre is átkerült (pl . Mozilla , Safari , Opera stb.) [4] . A technológia fejlődésével túl sok fajta doctype volt, csak a html ötödik verziójában javasolta a W3C egy rövid rekord használatát, egységesítve a szabványt [4] .
Egy idő után a blokkokkal való munka túlságosan kényelmetlenné vált, mivel a böngészők valójában nem támogatták a CSS-t, így közvetlenül a blokkba kellett stílusokat beilleszteni, ami megnehezítette a fejlesztést [3] . Ekkoriban kezdték el használni a láthatatlan szegélyű táblákat a fejlesztéshez, ahol sok stílusra nem volt szükség, azok alapból voltak [3] .
1998-ban jelent meg a Cascading Style Sheets Level 2 (CSS2) specifikáció, majd a CSS2.1, amely lehetővé tette a blokktervezési kód külön fájlokba helyezését és az oldal összes oldalán történő felhasználását, sőt a fájl gyorsítótárazását is. gyorsabb oldalbetöltést jelent [3 ] . Ennek a technológiának a fejlődése és a böngészők támogatása a blokk-elrendezés alkalmazásához vezetett a táblázatok helyett [3] .
A téglalap kivételes értéket kapott, mivel tetszőleges számú, tetszőleges arányú téglalapra osztható [5] .
Általános szabály, hogy a tördelőtervező jóváhagyott oldalterv-elrendezést kap a tervezőtől [2] . Ezután az elrendezéstervező elemzi a kapott elrendezést [2] . Vízszintes vonalakra (csíkokra) osztja - "padlók". Ezenkívül minden "emelet" külön-külön elemzik, és téglalap alakú blokkra - oszlopokra osztja.
Ezután az egyes sorok, és bennük az oszlopok elrendezésének folyamata [2] .
Az elrendezés után a rendszer ellenőrzi az oldalt, hogy van -e több platformon . Általában a következő kérdésekre tud válaszolni [2] :
A dokumentumon kritikus javításokat végeznek, és az ellenőrzést a kezdetektől megismétlik [2] .
Az elrendezés a sablonokhoz jön létreA webhely esetében általában nem használnak elrendezési dokumentumokat. Az elrendezés után a dokumentumot ismétlődő darabokra vágják, és az egész oldalon felhasználják. Például a felső csík a logóval és az alsó csík a fontos információkkal. Az ilyen elrendezési darabokat sablonoknak nevezzük (az angol template szóból ) [2] .
Az egyik fontos korlátozás a betűtípusok [2] . A fejhallgatók minden operációs rendszerhez eltérőek. A betűtípus választását semmi nem korlátozza, de ha a böngésző nem találja meg a megadott készletet, akkor az alapértelmezett beállításokat használja [2] .
Az elrendezésben a fő probléma a munkaterület különböző szélességeiben való megjelenítés [6] .
Az elrendezés a probléma különböző megközelítéseiben különbözik [6] :
Történelmileg a webhely függőleges formátum, amely a vízszintes görgetés elkerülése érdekében legfeljebb a képernyő szélességénél foglal helyet [6] . A webhely helyzetének kezeléséhez szükséges összes szolgáltatás (billentyűzetkombinációk, görgetősáv és egérgörgő) közvetlenül a függőleges mozgáshoz van konfigurálva [6] .
| Tipikus webes elrendezések | ||
|---|---|---|
| egyetlen oszlop | kétoszlopos | három oszlopos |
Egyik módszer sem kanonikus, és főként elfogadott [2] . Minden elrendezési megközelítésnek vannak előnyei és hátrányai is. Az elrendezéstervező szakemberként az adott projekt előnyeinek és hátrányainak mérlegelése alapján választja ki, hogy mely eszközöket használja [7] .
A moduláris rács szerkezetileg külön blokkokra bontja az anyagot, hogy leegyszerűsítse az új elemek hozzáadását az oldalhoz [7] . Egyes betűszedők eltérhetnek az elrendezési szabályoktól egy adott projekt érdekében, de az újonnan megjelenő elemek egyszerű hozzáadásának szükségessége az oldalon súlyosbítja a szabályokhoz való visszatérés szükségességét [7] .
A moduláris rács olyan segédvonalak halmaza, amelyek egymáshoz igazodnak, és négyzetekre osztják az elrendezést [7] . Engedje meg tehát, hogy a webhely többi részétől függetlenül módosítsa az információs mértékegységet [7] .
A fő elrendezési eszközök a keretek , táblázatok és divek. A HTML5 szabványban a keretek már nem támogatottak [8] , és elérhetővé váltak a „szemantikus” blokkok a munkához : fejléc, fő, navigáció, szakasz, cikk, félre, lábléc. A blokkok azonban nem nyújtanak bizonyos előnyöket, hanem csak " szintaktikai cukor ".
A táblázatok egy praktikus eszköz a blokk-igazításhoz. A html-ben a táblázat sorokra van osztva, amelyek viszont cellákra vannak osztva, így korlátlan számú sort hozhat létre, mindegyikben korlátlan számú cellával. A táblázatcellák speciális igazítási beállításokkal rendelkeznek, amelyek más elemekben már nem találhatók meg. Ez azt jelenti, hogy egyes tervezési elemeket rendkívül nehéz táblázatok használata nélkül elhelyezni [9] .
Az üzleti világban táblázatokat használnak az adatok összehasonlítására, valamint az áttekinthetőség érdekében [9] .
A táblázatos megközelítés hátránya, hogy az oldal nem jelenik meg a záró táblázatcímke betöltése előtt, ami kritikus fontosságú, ha a kapcsolat megszakad és a kapcsolat lassú. A hátrányok közé tartozik továbbá a túlzott kód, ami megnehezíti a megértést.
2011-ben a táblázatos elrendezés elavultnak minősül [9] .
A Layer (a < layer> címke után elnevezett ) a Netscape fejlesztése, amelyet a Netscape Navigator [10] böngészőben használnak . A címke lehetővé tette a tartalmának megjelenítését vagy elrejtését, a böngészőablakhoz viszonyított pozíció beállítását, a rétegek egymásra fedését, valamint a blokk tartalmának a fájlból való felvételét [10] . A HTML nem szerepelt a specifikációban [10] .
Blokk elrendezés - elrendezés a < div> címkével és az őket leíró stíluslapokkal (CSS) [10] . A címke annak eredményeként jött létre, hogy a CSS Positioning (CSS-P) konzorcium szándékosan elhagyta a <layer> címkét, hogy egy hasonló címkét hozzon létre, de a többi címke szellemében CSS támogatással [10] . A blokk-elrendezés segítségével megvalósul a szemantikai elrendezés koncepciója .
A keretelrendezés az azonos nevű <frame> címkét használó elrendezés, amely eltérő pozicionálási módszerrel rendelkezik, és belül különálló html oldalakat tartalmaz [11] .
A keretek használata egyszerű, mert csak a böngészőablak egy részének megjelenítésével és átrajzolásával kell törődnie - egy keret - a többi rész egy másik keretben van, és ne rajzolja át anélkül, hogy interakcióba lépne velük [11] . Lehetőség van egy hivatkozás megnyitására egy másik keretben is, ami kényelmes, ha a főmenüt külön keretben használjuk [11] . A keretekre osztott oldalakon kevesebb kód található, mivel nincsenek ismétlődő részek, amelyek nem töltődnek be [11] . Pontosan a megfelelő helyre kerülnek a böngészőablakban [11] .
A kereteket rosszul indexelik a keresőmotorok, mert a tartalmi oldalakon nincs hivatkozás az oldalon lévő más oldalakra, és fordítva, a navigációs oldalon nincs tartalom [11] . A keresőoldalról való áttérés egy oldalon történik, más keretek betöltése nélkül - navigáció és logó [11] . A belső oldalakat nem lehet könyvjelzővel ellátni, mert a böngésző nem jeleníti meg a változásokat a címsorban, mindig csak a webhely címét jeleníti meg [11] . A böngészők közötti kompatibilitás inkonzisztens [11] . A böngészők mindig ugyanazokat a paramétereket értelmezik a maguk módján [11] .
A HTML jelölőeszközök használatának elvei szerint különbséget tesznek a logikai jelölés és a prezentációs (fizikai) jelölés között.
Például a dőlt szöveg az <i> és az <em> címke használatával is beszerezhető .
Az első esetben kifejezetten a dőlt betűket adjuk meg, a másodikban pedig logikai hangsúlyt helyezünk a szövegre, amely általában dőlt betűvel jelenik meg.
Más szóval, az első megközelítés a megjelenésre összpontosít, a második pedig a logikai célra.
A második megközelítés előnye, hogy az elrendezés független a használt eszközök típusától és a weboldalak kialakításától.
Ha ragaszkodik a logikai elrendezéshez, ugyanazt az elrendezést használhatja a képernyőn , a nyomtatáson és a mobileszközökön , külön stílusfájlokkal módosítva a megjelenést.
Az összes oldal elrendezési elrendezés szerint 5 csoportba osztható [12] :
A reszponzív elrendezés a képernyő méretéhez igazodó (alkalmazkodó) kialakítás, ideértve a blokkok átrendezését egyik helyről a másikra, vagy csak bizonyos felbontáson megjelenített blokkokra cserélését. A reszponzív elrendezés felváltotta a webhely speciális mobilverzióinak létrehozásának ötletét, amelyek külön aldomaineken „élnek” (például m.wikipedia.org).
Előnyök:
Hibák:
Vagyis minden tervezési típusnak megvannak az előnyei és hátrányai, és a választás a megoldandó feladattól függ. Ebben az esetben vegyes kialakítás is használható - a táblázatos kialakítás egyes oszlopai százalékban, mások pedig pixelben vannak megadva.
A böngészők szándékosan egyetlen objektumként kezelnek egy táblát, így a tábla tartalma nem jelenik meg addig, amíg a teljes tartalom le nem töltődik a helyi számítógépre. [13]
Ha egy táblázatot használunk keretként a weboldalelemek elrendezésére, annak eredeti előnye hátrányba fordul, mivel a tartalom megjelenítésének késleltetéséhez vezet. Figyelembe kell venni a weboldalak növekvő mennyiségét is a táblázatok aktív használatával, különösen az egymásba ágyazás esetén. Mindez ahhoz a tényhez vezet, hogy a táblázatos elrendezés szükségtelen késleltetéseket okoz az információk megjelenítésében a böngészőben.
A probléma a táblák többszörös egymásba ágyazásával adódik, ami jellemző bizonyos hatások eléréséhez egy weboldalon. A táblák számának növekedése növeli az elrendezési hibák esélyét, növeli a dokumentumok méretét és csökkenti a fájlok letöltésének sebességét. A vizuális szerkesztők, például az Adobe Dreamweaver vagy a Microsoft FrontPage használata dokumentumok létrehozására és szerkesztésére megkönnyíti a táblákkal való munkát, de paramétereik bősége miatt ebben az esetben a fejlesztők nem mentesek a hibáktól és a felesleges munkától. minden táblázat egyedi szerkesztésével.
Ezenkívül a táblázatok tervezési célú használata nem felel meg a szemantikai elrendezés fogalmának, amely magában foglalja az elemek (címkék) jelentésüknek, szemantikai jelentésüknek megfelelő használatát. A <table> elem és a kísérő elemek (<tr>,<th>, <td> stb.) táblázatos információkat jelölnek meg (vagyis olyanokat, amelyekben szemantikai kapcsolat van az azonos oszlophoz tartozó elemek között vagy egy sor). A W3C, mint a HTML nyelv fejlesztője, bátorítja a HTML használatát az információk logikai jelölésére , és a tervezést (beleértve a különböző blokkok elhelyezését) az (X)HTML jelöléstől (például CSS használatával) elkülönítve.
A táblázatok használatakor jól ismert technikává vált a távtartók használata - egy pixel magas átlátszó képek. Maga a kép nem jelenik meg a weboldalon, de tetszőleges mértékben méretezhető. Kiderül egy bizonyos szélességű vagy magasságú láthatatlan pálca, amely megakadályozza, hogy a táblázat cellái egy adott távolságnál kisebbre közeledjenek. A távközök különösen fontosak voltak a Netscape böngészőben , amely nem mutatta a cellák hátterét, ha nem helyeztek el semmit. Ettől a funkciótól való megszabadulás érdekében egy kis átlátszó képet helyeztünk el GIF formátumban a cellában .
Az ilyen technikák nemcsak az univerzális weboldalak fejlesztését bonyolítják, hanem a dokumentum betöltésének sebességének csökkenéséhez is vezetnek. Ebben az esetben a böngészőnek olyan elemeket kell letöltenie, amelyek nem láthatók a felhasználó számára, és valójában nincs is rá szüksége, de a webhely teljes forgalmában benne vannak.
A rétegek olyan szerkezeti elemek, amelyek pixel pontossággal egymásra helyezve helyezhetők el egy weboldalon . A HTML 4 -ben és az XHTML -ben a réteg egy weblapelem, amelyet stílusos <div> címkével hoztak létre. [tizennégy]
Ennek során a következő elveket tartják be:
A rétegek pixel pontossággal helyezhetők el a böngészőablakban. A réteg helyzetét a böngészőablak, a szülőelem vagy a dokumentum bármely sarkához viszonyított két koordináta adja meg.
A szkriptek lehetővé teszik a rétegparaméterek dinamikus módosítását. Ez lehetővé teszi különféle effektusok létrehozását az oldalon, például legördülő menüket, játékokat, kihajtható szalaghirdetéseket , lebegő ablakokat stb.
A rétegtulajdonságok kényelmesen beállíthatók és konfigurálhatók stílusokon keresztül. A CSS lehetőségei kibővítik a tervezési örömök körét. A stíluslapok használatával egyszerű módszerekkel kompakt és hatékony kódot kaphat.
A böngészők modernebb verziói szigorúbban tartják be a szabványokat, és tartalmaznak eszközöket a rétegekkel való munkavégzéshez.
A réteg áthelyezhető, elrejthető és megjeleníthető a teljes oldal újratöltése nélkül. Az utasítások segítségével effektusokat, legördülő menüket, eszköztippeket, mozgó elemeket stb. Az ilyen elemek hozzáadása, bár növeli a kód mennyiségét, nem igényli a dokumentum újratöltését és frissítését, és késedelem nélkül megtörténik a böngészőből. Ezenkívül az oldal kifejezőképességét és vonzerejét nagyban növeli a hasonló technikák alkalmazása rétegekkel.
A rétegek egymásra rakhatók, ami leegyszerűsíti az elemek elhelyezését a weboldalon, és több lehetőséget biztosít az elrendezésre.
A rétegek gyorsabban jelennek meg, mint a táblázatok. Nagyobb sebesség érhető el a kompakt kódnak és annak köszönhetően, hogy a réteg tartalma betöltéskor jelenik meg. Igaz, ez az oldalelemek hibás megjelenítéséhez vezethet betöltésükkor.
A rétegekkel való munkavégzésre vonatkozó szabványok még nem teljesen kidolgozottak, és a böngészők bizonyos funkciókat különböző módokon valósítanak meg. Emiatt a rétegekben történő elrendezés fő nehézsége egy olyan univerzális kód létrehozása, amely egyformán és hibamentesen működne a különböző böngészőkben („ böngészők közötti kompatibilitás ”) és különböző képernyőfelbontásoknál . A böngészők viselkedésének finomságai a különböző stíluselemek használatakor számítanak.
Lásd még : Asztal nélküli webdesign
Az elrendezéstervezők a weboldalak elrendezésével foglalkoznak . Az elrendezéstervező feladatai általában a következők:
Az elrendezéstervező a következő szoftvereket használja:
És néha segítséghez folyamodik:
A WYSIWYG szerkesztők és elrendezési programok használatát gyakran elítélik [15] [16] az eredményül kapott kód rossz minősége miatt. Azonban gyakran kényelmesebbek a felhasználók számára, mint a kézi kódolás, és nem igényelnek mély HTML-ismeretet, ezért széles körben használják.
A HTML-elrendezés érvényessége az, hogy megfelel a The World Wide Web Consortium ( W3C ) szabványainak. A hibák hiánya a dokumentum elrendezésében az elrendezés minőségének egyik fő mutatója. Az elrendezés automatikus hibaellenőrzése elvégezhető mind a W3C online szolgáltatás , mind a különféle „ellenőrző” programok segítségével. A HTML specifikáció különböző verziói eltérő szintaxist igényelnek, ezért az érvényesítési tesztnek mindig figyelembe kell vennie a dokumentum típusát .
Az oldal böngészők közötti kompatibilitása az oldalparaméterek eredeti kialakításához és funkcionális formához közeli megjelenítése különböző böngészők és azok különböző verziói és módosításai használatakor.
A webfejlesztők minden erőfeszítést megtesznek a hipertext jelölések egységesítése érdekében, hogy egységes megjelenítési szabványt dolgozzanak ki a böngészők között, de ennek megvalósítása a fejlesztők közötti számos konfrontáció miatt összetett munkafolyamat.
| Web és weboldalak | |
|---|---|
| globálisan | |
| Helyileg | |
Webhelyek és szolgáltatások típusai |
|
| Alkotás és karbantartás | |
Elrendezések, oldalak, webhelyek típusai | |
| Műszaki | |
| Marketing | |
| Társadalom és kultúra | |