
- •Тема 5. Основи дизайну та принципи створення
- •Гармонія кольорів
- •Шрифт і текст
- •Поєднання і баланс. Контраст. Динаміка. Контраст
- •Динаміка
- •3.Типи сайтів.
- •4.Створення сайту. Формат сторінки. Заголовки. Навігація. Створення сайту
- •7. Доопрацювання за наслідками тестування. Формат сторінки
- •5. Блоки тексту.
- •6. Векторна і растрова графіка
- •7. Функції і призначення графіки (виставочна графіка, фон, банер, візуальна графіка)
- •Тема 6. Системи управління контентом План
- •Поняття cms
- •Способи роботи. Шаблони сайтів.
- •3 Статті сайту та їх ієрархія
- •1. Картинка до статті
- •2. Основний текст статті.
- •3. Приналежність до категорій.
- •4. Додаткові модулі
- •5 Особливості Joomla, osComerse, Drupal, Moodle
Гармонія кольорів
Емоційна дія кольорів відома багато століть. Червоні тони називають гарячими (вогонь), жовті — теплими (сонячне світло), блакитні — прохолодними (небо). Синій (вечір), фіолетовий (захід сонця) і чорний (ніч) — заспокоюють та пригнічують. Водночас темні насичені кольори несуть у собі силу та загадковість, яка змушує хвилюватись. Помаранчевий колір створює відчуття благополуччя та веселості, має значну стимулюючу дію, але швидко втомлює. Зелений колір — нейтральний, це колір миру і спокою, до нього око найбільш чутливе і сприймає його найперше. Блакитний, так само як і зелений, має заспокійливий ефект, але у значній кількості може пригнічувати. Червоний колір — теплий і дратівний. Білий утворюється від змішування всіх кольорів, він є втіленням чистоти, миру та холоду, а чорний — це відсутність кольору, він викликає занепокоєння. Не варто допускати використання на невеликому просторі надмірно великої кількості кольорів. Дизайнери зазвичай обирають для оформлення сторінки не більше чотирьох, використовуючи кожен із них для розфарбовування кількох елементів. Надмірна яскравість кольору підкреслює дефекти зображення, низька — знижує чутливість до виявлення малих деталей і контрастів. Один і той же колір у різному оточенні може здаватись холодним або теплим, тож розподіл кольорів на групи є досить відносним. Так, яскраво-червоний колір порівняно з багряним буде холодним, а поряд із синім — теплим.
Шрифт і текст
Задавати шрифти та проводити форматування над текстом рекомендується за допомогою CSS. Шрифт в CSS може мати наступні властивості: font-family – визначає шрифт або сімейство шрифту. Можна вказувати до трьох шрифтів, через кому. Існує 5 сімейств шрифтів: serif, sans-serif, cursive, fantasy , monospace.
font-style – визначає стиль шрифту. Можливі значення: normal (нормальний, встановлений за замовчуванням), italic (курсив), oblique (похилий).
font-variant – визначає, як потрібно представляти малі літери - залишити їх без модифікацій або робити їх всі прописними зменшеного розміру.
font-weight – визначає ступінь жирності шрифту. Можливі значення: normal (нормальний, встановлений за замовчуванням), bold, bolder, lighter. Значення bolder і lighter є відносними, наприклад, значення lighter для жирного тексту робить його нормальним.
font-size – встановлює розмір шрифту. Можна вказувати як у відносних одиницях (відсотки), так і в абсолютних (пікселі, сантиметри і т.д.)
Текст в CSS може мати наступні властивості:
text-decoration – визначає оформлення тексту. Можливі властивості: none (за замовчуванням, стандартний текст), underline (підкреслення), line-through (закреслення), overline (надкреслення).
text-transform – визначає оформлення регістру літер тексту. Можливі властивості: none (за замовчуванням, скасовує зміна регістру літер), capitalize (перша буква кожного слова перетвориться в заголовну), uppercase (всі літери перетвориться в заголовні), lowercase (вс і літери перетвориться в рядкові).
text-align – визначає оформлення регістру літер тексту. Можливі властивості: left (за замовчуванням, вирівнювання по лівому краю), right (вирівнювання по правому краю), center (центрування), justify (вирівнювання по ширині колонки).
text-indent – встановлює величину відступу в першому рядку параграфа.
line-height – встановлює міжрядковий інтервал.
word-spacing – встановлює інтервал між словами.
letter-spacing – встановлює інтервал між літерами.
vertical-align – встановлює вертикальне положення базисної лінії елемента. Можливі значення: baseline, middle, sub, super, text-top, text-bottom, top, bottom.