3.3 Стилізація сайту (css)
Для гармонічності сайту був використастаний набір параметрів форматування, що застосовується до елементів веб-сторінки для керування їх вигдядом і положенням. Стилі є зручним, практичним й ефективним інструментом при розмітці веб-сторінок й оформленні тексту, посилань, зображень й інших елементів.[3]
У головному документі сайту (index.html) були використані основні параметри форматування(табл.3.1).
Таблиця 3.1 – Основні параметри форматування
Елемент форматування |
Призначення |
display |
Багатоцільове властивість, яка визначає, як елемент повинен бути показаний в документі. |
margin |
Дозволяє задати величину відступу відразу для всіх сторін елемента або визначити її тільки для зазначених сторін. |
float |
Вирівнювання |
text-decoration |
Додає оформлення тексту у вигляді його підкреслення, перекреслення, лінії над текстом і миготіння. Одночасно можна застосувати більш одного стилю, перераховуючи значення через пропуск. |
font-size |
Розмір блоку |
3.4 Інтерактивність сайту (js)
Для перевірки заповненої форми сайту був підключений JS.js файл. У головному документі сайту (index.html) були використані основні параметри мови JavaScript (табл.3.2).
Таблиця 3.1 – Основні параметри мови JavaScript
Елемент |
Призначення |
function validate |
Функція нижче перевіряє, якщо поле було залишено порожнім. |
indexOf |
Пошук здійснюється зліва направо. Метод чутливий до регістру символів. |
3.5 Висновки по розділу
В даному розділі було розглянуто питання фізичної структури сайту, виконаний опис елементів структури та наведений схематичний вигляд фізичної структури сайту продукції Oriflame.
4 Інтерфейс користувача
4.1 Основні рішення щодо дизайну сайту
Дизайн сайту був виконаний з урахуванням того, що компанія Oriflame займається продажем косметичної продукції. Заповнення анкетної форми надає користувачу зручності обрати яку саме продукцію він бажає продавати. Дизайн був виконаний з використанням елементів фірмового стилю компанії Oriflame, тому й були використані два основні кольори: сірий та зелений.
Основний вигляд сайту можна розглянути на рис.4.1.
Рисунок 4.1 – Головна сторінка сайту
4.2 Приклад роботи користувача з сайтом
На сайті Oriflame користувач має можливість здобути інформацію про косметичну продукцію даної компанії. Він може оглянути певну продукцію і за бажанням, заповнивши анкетну форму, продавати її. Також, якщо користувачеві не буде вистачати інформації про дану продукцію, він може закачати файл каталог.rar, що містить більше інформації. Користувач може оглянути резюме власника сайта та переходити на певні соціальні мережі де також розташована інформація про косметичну продукцію Oriflame.
4.3 Висновки по розділу в даному розділі було розглянуто питання основного рішення щодо дизайну сайту та наведені приклади роботи користувача з сайтом. Висновок
При створенні сайту про косметичну продукцію Oriflame було розглянуто обґрунтування вибору мови верстки HTML та мови скриптів JavaScript. Також було розглянуто питання фізичної структури сайту, виконаний опис елементів структури та наведений схематичний вигляд фізичної структури сайту продукції Oriflame. Розглянуто питання логічної структури сайту, виконаний опис елементів логічної структури, взаємодії конструктивних елементів. Розмітка сайту Oriflame виконана двома методами верстки: за допомогою табличної та блокової верстки, також наведений схематичний вигляд використаних способів верстки. Розглянуто питання основного рішення щодо дизайну сайту та наведені приклади роботи користувача з сайтом.