6Розробка макетів сторінок.

Першим кроком є перегляд аналогічних сайтів із такою тематикою. Вибір певних предметів, які можна добавити на наш сайт. Розпис макету сайта:

• Зверху буде відображатись хедер із логотипом на назвою сайта;

• Під хедером реалізоване меню сайта;

• Під меню сайт розділяється на 2 колонки:

  1. Права колонка основний контент;

  2. Ліва колонка чат, форма входу на сайт.

• Під колонками нижній колонтитул.

Визначення функціональних зон сторінок сайту

Хедер призначений для відображення назви сайта, його логотипу та пошуку на ньому.

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

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

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

Отже останнім у нас відображається нижній колонтитул. У ньому будуть відображатись посилання на основні сторінки сайта, хто виробив сайт та посилання на нього.

Декомпозиція макету на структурні блоки й модулі

Модульна сітка являє собою набір невидимих ​​напрямлених , уздовж яких розташовуються елементи web -сторінки. Це полегшує розміщення даних в документі , забезпечує візуальний зв'язок між окремими блоками і зберігає спадкоємність дизайну при переході від однієї сторінки до іншої.

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

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

Перед створенням web - сторінки в HTML- редакторі , зручніше зробити начерк на папері. Це скоротить час на вибір типу модульної сітки , яка в подальшому буде застосовуватися . Залежно від кількості матеріалу і цілей сайту застосовують різні типи модульної сітки (одно- , двох , трьох або багато колонний ) . Необхідно пам'ятати , чим більше колонок , тим більше можливостей по зміні виду дизайну , але і складніше верстка такого макета. Мій варіант буде представлений у вигляді двоколонної модульної сітки.

3. Реалізація сайту.

3.1 Опис засобів розробки

Розробка веб-сайта велася в основному в програмному пакеті компанії Joomla 2.5.8. Вибір даного пакету обґрунтований тим, що його освоєння віднімає мало часу, під час розробки доступний попередній перегляд кожної окремо зробленої операції, доступна велика кількість функцій (організація інтерактивних елементів сайту, створення гіперпосилань в декілька натисків мишки і тому подібне), пакет підтримує велику кількість технологій (HTML, PHP, ASP, Java, XML, XSLT, CSS та інші).