Як створювати динамічні Web-сторінки

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

Web-Дизайн складається із трьох частин: вмісту, представлення і поведінки.

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

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

Поведінка Web-сторінки створюється за допомогою так званих Web-сценаріїв — програм, які записують прямо в HTML-коді Web-сторінок або, що переважніше, в окремих файлах мовою JavaScript. Поведінка — це набір правил, що визначають, як Web-сторінка буде реагувати на дії відвідувача. Так, ми можемо вказати, щоб при наведенні курсору миші на гіперпосилання в полосі навігації мінявся колір і стиль рамки, в яку вона вкладена; можемо заставити контейнер розширюватися при клацанні мишею, відкриваючи свій вміст, анімувати елемент Web-сторінки і робити багато інших речей із самою Web-сторінкою та будь-яким її фрагментом. Ще ми можемо довантажувати вміст Web-сторінки, тобто замість того щоб обновляти всю Web-сторінку у відповідь на клацання на гіперпосиланні, ми можемо довантажувати тільки її частину, яка містить необхідну інформацію, що сильно зменшить об'єм переданої по мережі інформації (мережевний трафік) і дозволить виконувати які-небудь дії з даними після них підвантаження. Ми можемо також генерувати вміст, тобто якусь частину Web-сторінки завантажувати не по мережі, а створювати прямо на місці, в Браузері, ще сильніше скоротивши мережевний трафік. Ми можемо також використовувати семантичну розмітку даних, що дозволить нам зв'язати виведені на Web-сторінку дані увідповідності до яких-небудь правил та, завантаживши яку-небудь сторінку, зможе відразу ж перейти на пов'язані з нею сторінки, що містять додаткові або споріднені відомості. В результаті Web-сторінки будуть динамічними і живими.