Що таке верстка веб-сторінок

• Веб дизайн

Верстка веб-сторінок це створення HTML-коду, завдяки якому різні елементи (зображення, текст, форми) будуть відображатися в документі відповідно до раніше розробленого дизайнерським макетом. При цьому враховуються всі обмеження, які накладають технології HTML і CSS, беруться до уваги особливості різних браузерів.

Таким чином, верстальник будує свою роботу на основі набору малюнків, які представляють макети окремих сторінок сайту.

Проаналізувавши отримані малюнки, верстальник вирішує, яким чином реалізувати все це на веб-сторінці. Зазвичай, щоб в подальшому було зручно працювати, вихідний макет розбивається на окремі блоки. Як правило, виділяються такі великі блоки, як "шапка", основний вміст сторінки і "підвал" (який може і не бути). Крім цього кожен з цих блоків може розбиватися на більш дрібні блоки.

Припустимо, що відповідно до задумкою дизайнера вгорі сайту повинні бути кольорова і біла смуги. На них повинні відображатися заголовок сайту і набір піктограм, вирівняні по центру. Положення піктограм по відношенню один до одного повинно залишатися незмінним, і кожен малюнок є посиланням на відповідний роздягли сайту.

Верстальник може вибрати один з наступних варіантів реалізації в HTML-коді зазначених особливостей:

• сформувати єдиний малюнок і зробити його картою-зображенням,
• розрізати картинку на окремі фрагменти і звести їх воєдино за допомогою таблиці, зробивши з кожного окремого фрагмента посилання на відповідний розділ сайту,
• позіціаніровав кожен елемент відповідним чином.

При цьому верстальник повинен пам'ятати, що хоча всі зазначені методи призводять до необхідного результату, але у кожного з них є свої недоліки. І ці недоліки слід також враховувати.

Коли з "шапкою" буде покінчено, і вона отримає своє втілення в HTML-коді, верстальник переходить до роботи над наступним блоком. Тепер, припустимо, це буде блок з основним вмістом сторінки. Тут уже є присутнім текст. Тому формується файл CSS стилів, в якому будуть враховані такі фактори:

• різні кольори (фону, тексту, посилань, заголовків),
• гарнітура і розмір основного шрифту та шрифту заголовків,
• розміри тексту різних модулів (новинного блоку, нових матеріалів, анонсів статей і т. д.),
• параметри різних ліній і рамок.

Потім отриманий CSS-файл підключається до документа і формується остаточний HTML-код головної сторінки.

Однак, на цьому робота верстальника не закінчується. Адже дизайнери, як правило, також готують макети та інших розділів сайту, а не тільки головної сторінки. І ці макети зазвичай мають деякі відмінності від вже зробленої головної сторінки. Таким чином, доводиться вносити поправки, коректуючи змінюються елементи. Також враховується той факт, що статті можуть бути різними за обсягом, і це ніяким чином не повинно відбиватися на зовнішньому вигляді веб-сторінки. І це робиться з кожним розділом.

При цьому на кожному етапі верстки проводиться перевірка, під час якої з'ясовується

• чи належним чином отриманий код відображається в основних браузерах,
• чи залишаються дані цілісними, якщо розмір шрифту в браузері зміниться в ту чи іншу сторону,
• чи зручно буде працювати з сайтом при відключених зображеннях,
• яким чином на зовнішній вигляд сторінки впливає зміна дозволу монітора.

Якщо де або виявляються якісь помилки, то в код шаблону вносяться необхідні виправлення. І так до тих пір, поки число помилок не стане мінімальним.

Як правило, завдання верстальника чи не створити абсолютно всі сторінки сайту. Він робить тільки типові документи, які будуть використовуватися в якості шаблонів. Надалі веб-сторінки будуть формуватися на основі цих шаблонів або динамічно, за допомогою системи управління контентом на сервері, або заповнюватися текстом вручну і зберігатися в окремих файлах.

Звичайно, з усього сказаного дизайн і якість матеріалів сайту не відносяться до верстки, проте на все інше верстальник цілком може впливати. І хоча те, що робить верстальник приховано в коді документа і перебуває ніби на задньому плані, саме від нього залежить правильність відображення веб-сторінок і швидкість їх завантаження.

Ще одна область, безпосередньо пов'язана з версткою, це типографіка. Ще її називають типографським мистецтвом. І слід сказати, що це дійсно мистецтво, в якому поєднуються риси дизайну і верстки. Грунтується це мистецтво на знанні шрифтів і на те, як їх використовувати, як вони сприймаються, на почутті стилю і т. Д. Адже вкрай важливо вибрати такий шрифт, щоб текст був добре Новомосковскемим і легко сприймаються при будь-якій зміні його розміру. Коли готуються поліграфічні матеріали, то за це відповідає дизайнер. Однак на етапі створення сайту до цієї роботи підключається і верстальник.

Все це відбувається через те, що HTML спочатку має серйозні обмеження при роботі з шрифтами. Справа в тому, що гарантовано можна працювати з декількома гарнітурами, які вважаються універсальними і присутні у всіх операційних системах. Звичайно, можна підключити будь-який шрифт, який в даний момент є на вашому комп'ютері, і все буде відображатися коректно. Але хто дасть гарантію, що цей же самий шрифт буде присутній і на комп'ютерах майбутніх користувачів сайту.

Технологія CSS найсерйознішим чином розширила початкові можливості HTML, але ці можливості все одно поступаються програмам створення поліграфічних матеріалів. Таким чином, необхідно мати чітке уявлення про роботу атрибутів CSS, пов'язаних з управлінням текстом, як вони застосовуються, які обмеження мають і як ці обмеження можна обійти. І це вже відноситься до сфери діяльності верстальника.

самовчителі