Mi az a weboldal elrendezése

Mit jelent weboldalt készíteni? Ez azt jelenti, hogy a grafikus képet le kell fordítani a programkód nyelvére. Ahhoz, hogy megértse, mi ez, kattintson a jobb gombbal bármelyik webhely mezőjére, és válassza a menü «Oldalkód megtekintése» menüpontját. Grafika és szöveg helyett karakterkészletet fog látni. Ha alaposan megnézi, a szöveg még mindig ott van, de sok szimbólummal — HTML címkékkel — felhígul.

A tartalom HTML-címkékkel történő megjelölése lehetővé teszi a betűtípusok, a szöveg és a képek helyének „szavas leírását”. Ez egyfajta nyelv, amelyet az internet megért.

A tervezés helytelen elrendezése meghibásodáshoz vezet — a szöveg „menhet”, a fotók megnyúlhatnak, a betűtípus kisebb vagy nagyobb lehet. A keresőmotorok szeretik a tiszta kódot hiba nélkül. Például, ha a címsorok egyszerűen félkövérek, és nem H1, H2 címkék, akkor a keresőmotor nem fogja megkülönböztetni őket a szöveg többi részétől. Ezért a webfejlesztés ezen szakasza rendkívül fontos ahhoz, hogy az erőforrás igény szerint a keresési eredmények élére kerüljön.

Mit csinál egy tervező?

Miután megkapta az elrendezést, meghatározza a stílusokat, amelyeket külön fájlba vesz. A grafikus rész (ikonok, képek, gombok) PSD vagy Figma fájlból van kivágva. Blokkokat hoz létre a tartalomhoz, fejléchez, jobb oldali, bal oldali menühöz, lábléchez. Megadja a kódolást, a címet.

Ezután becsomagolja a tartalmat a keretbe.

A webhelyek jó minőségű elrendezésének meg kell felelnie a következő követelményeknek:

  1. Böngészők közötti kompatibilitás — ha az erőforrás minden böngészőben (Google Chrome, Yandex, Firefox, Internet Explorer) megfelelően jelenik meg. Ki kell próbálnia az összes lehetséges felbontást 1024×768-tól.
  2. A megjelenés passzol a dizájnhoz.
  3. Kövesse a főoldalra mutató hivatkozást a logóra kattintva.
  4. A címek és alcímek speciális címkékkel vannak jelölve

Minden azonosítónak, osztálynak meg kell felelnie a céljának, könnyen felismerhetőnek kell lennie (például „fejléc” vagy „lábléc”).
Az elemek megjelenítésével kapcsolatos problémák elkerülése érdekében minden címkét be kell zárni, azaz <>-ban (idézőjel) kell írni.

Az elrendezés típusai

A blokktípus ma a legelterjedtebb. A <div> címke határozza meg a különböző tartalmú tárolók pontos méretét és paramétereit. Ennek a megközelítésnek a fő előnye a különféle képernyőkre való optimalizálása: amikor egy webes erőforrást okostelefonon tekint meg, függőleges görgetősávok jelennek meg.

A táblázatos elrendezés archaikusnak tekinthető, mivel jelentősen lelassítja az oldal betöltési sebességét. E-mail sablonokhoz azonban továbbra is használják.

Néha rétegesen alkotják: a html kód részei pontosan átfedik egymást, egészen a pixelig. A rétegek módosítása JavaScript vagy VBScript programozási nyelvekkel történik. A módszer fő előnye az animációs effektusok megvalósítása a letöltési sebesség csökkentése nélkül.

Elrendezési eszközök

Hogyan készítsünk oldalt gyorsan és hibamentesen? Ehhez számos eszközt fejlesztettek ki. A munka főleg olyan szerkesztőkben zajlik, mint a Notepad++, Adobe DreamWeaver, Sublime Text, Visual Studio Code, Atom. A Webstorm egy integrált fejlesztői környezet (IDE), amely automatikus kiegészítéssel és átalakításokkal rendelkezik JavaScript, TypeScript számára. A Photoshop, Krita hasznosak a grafikai elemek feldolgozásához.

A teszteléshez a Crossbrowsertesting, Dr Watson, Validator.w3, CSS Validator, Markup Validator, IE Tester programokat használjuk.

A HTML kód minden webes erőforrás „alsó oldala”. És bár senki sem látja, az, hogy a webhely hogyan keresi a felhasználót, közvetlenül az elrendezéstervező készségétől függ.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *