Конструювання сайтів з використанням онлайн систем

Конструювання веб-сайтів за ступенем автоматизації поділяють на два основні методи: візуальний і програмований.

Візуальний метод дозволяє конструювати веб-сайт з високим ступенем автоматизації. Метод виник з необхідності зменшити трудомісткість створення сайту і скоротити терміни виконання робіт. Головним принципом візуального методу є принцип WYSIWYG (англійською "What you see is what you get" — «Що бачу, те й отримую»).

При створенні сайтів з використанням візуального методу необхідно вибрати інструмент — редактор візуального конструювання: Microsoft FrontPage, DreamWeaver (Macromedia), NamoWEbEditor, Adobe GoLive чи інший. Під час створення веб-сайту такий редактор забезпечує можливість працювати без безпосереднього підключення до мережі Інтернет.

Для конструювання веб-сайту можна використати систему управління вмістом (CMS, Content Management System), надану платними або безкоштовними сервісними службами. Це конструктор що дозволяє створювати сайт і супроводжувати його у подальшому. При створенні структури і навігації по сайту в системі CMS зазвичай не потрібно глибоких знань мови розмітки гіпертексту HTML.

Але для професійної роботи необхідно опанувати мовою HTML. Створення сайту виключно написанням коду називають програмованим або ручним методом конструювання. Для написання HTML-коду використовують текстовий редактор з підсвіткою і підказкою щодо службових слів. Такий редактор (наприклад, Sublime Text) істотно полегшує розробнику веб-сайту введення і редагування основних конструкцій мови HTML. Хоча все це можна зробити і напростішими текстовими редакторами без підсвітки і підказки щодо службових слів.

При потребі (наприклад, для програмування інтерактивності) крім HTML використовують інші мови програмування. Наприклад Java Script чи PHP.

Онлайн-система конструювання сайтів (конструктор сайтів) — це сервіс, розташований безпосередньо в мережі Internet, який надає можливість з готових шаблонів створити сайт.

Популярність таких програм обумовлена такими їхніми перевагами:

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

Досвідчені фахівці знають і про недоліки таких програм:

• нерозв'язність проблеми відсутності потрібного шаблону;
• залежність сайту від сервісу: сервіс закрили — сайт зник;
• громіздка назва.

Приклади онлайн сервісів для конструювання сайтів: A5, Fo, Nethouse, Wix, uCoz, Umi — спеціалізований під інтернет-магазин.

Конструктори сайтів поділяють на три групи: конструктори початкового рівня, середнього і високого.

1. Конструктори початкового рівня. До цієї групи відносять програми, які поширюють безкоштовно. З їх допомогою у клієнтів є можливість вибрати один з декількох шаблонів дизайну та структури сайту та зареєструвати ресурс з доменом третього рівня. Серед додаткових функціональних можливостей такий конструктор сайтів має модулі для налаштування гостьової книги, а також шаблон для створення прайс-листів.
2. Конструктори середнього рівня. До цієї групи відносять комерційні продукти, орієнтовані на певні групи користувачів. Наприклад, з їхньою допомогою можна створювати сайти лише автомобільної або спортивної тематики, а от для інших проектів їх структура може вже не підійти. До основних ознак таких конструкторів відносять можливість детальної розробки ядра сайту, а також використання різних функціональних модулів для створення і редагування різних розділів.
3. Конструктори високого рівня. Такі конструктори є самими багатофункціональними, а їх розробка потребує постійного фінансування, щоб удосконалювати можливості. В них є модулі для роботи з каталогами, формами зворотного зв'язку, картою сайту, архівом статей і новин, гостьовою книгою, бібліотекою зображень, інтернет-магазином, рекламними панелями і багато іншого.

Розглянемо приклад використання безкоштовного сервісу Google sites для створення сайту Інтернет-магазину комп'ютерних комплектуючих. При вивченні матеріалу бажано виконувати всі описані дії, використовуючи архів даних, з такими відмінностями від опису:

• текст не набирати, а копіювати;
• використовувати завантажені зображення, а не гіперпосилання на ресурси мережі.

1. Створити обліковий запис Google, заповнивши реєстраційну форму (для тих, хто такого запису немає). Цей крок можна і бажано зробити до проведення уроку.

Після вдалої реєстрації серед продуктів Google потрібно вибрати Сайти, що призведе до переходу до сторінки з пропозицією перейти до створення сайту.

2. Натиснути на кнопку Створити.  
3. Вказати назву й адресу сайту, шаблон оформлення Пустий шаблон і натиснути на кнопку Створити.

Буде відкрито Домашню сторінку, на якій можна формувати структуру сайту та редагувати його.

4. Створити сторінку, натиснувши на кнопку вгорі праворуч.

5. Вказати назву сторінки Комплектуючі і місце її розташування.

6. Натиснути на кнопку Cтворити.

7. Повернутися на Домашню сторінку і змінити її назву на Головна. Для цього натиснути на кнопку Pедагування, розташовану над сторінкою.

Це призведе по появи Панелі редагування.

 

У поле назви сторіки внести нову назву сторінки, розмір і стиль шрифта залишити без змін.

Зберегти зміни, натиснувши на кнопку Зберегти вгорі сторінки й отримати таку сторінку.

8. Додати зображення на сторінку. Для цього викликати Панель редагування і перейти на закладку Вставити. Потім вибирати в розділі Стандартний пункт Зображення,

щоб відкрити вікно додавання зображень. Натиснути на перемикач Веб-адреса, щоб додати зображення з мережі Інтернет, вказавши його URL-адресу. Інакше (при виборі пункту Завантажені зображення) можна вставити зображення, вже завантажене у ПК.

У вікні діалогу у поле для посилання скопіювати URL адресу вибраного зображення та натиснути на кнопку ОК.

Натиснути на кнопку Зберегти й отримати результат.

9. Додати текст. Для цього відкрити панель редактора, навести вказівник у те місце, де бажано розташувати текст, клацнути лівою кнопкою миші, і нарукувати текст. Змінити розмір введеного тексту з 10 pt (як усталено) на 12 pt. Зберегти зміни.

10. Перейти на сторінку Комплектуючі і наповнити сайт даними у вигляді таблиці з даними. Для цього відкрити панель редактора. Обрати закладку Таблиця, а в ній обрати пункт Вставити таблицю. Задати кількості рядків і стовпчиків таблиці. У майбутньому ці кількості рядків або стовпчиків можна змінити з цієї самої закладки.

Зберегти зміни.

За допомогою закладки Вставити з Панелі редагування заповнити таблицю даними.

 

Створити посилання між сторінками сайту. Для цього створити ще одну сторінку Центральний процесор, на яку буде створено посилання. Натиснути на кнопку та ввести назву сторінки та вибрати місце — розмістити на сторінці Комплектуючі.

 Натиснути на кнопку Створити й отримати такий результат.

Розмістити на сторінці потрібні дані і зберегти зміни.

  

Перейти безпосередньо до створення посилання зі сторінки Комплектуючі на сторінку Центральний процесор. Для цього на сторінці Комплектуючі вибрати елемент для посилання і відкрити панель редагування. На закладці Вставити в розділі Стандартний вибрати пункт Посилання.

Практичне завдання

Перейти на сайт https://www.blogger.com та познайомитись з технологією створення блогу. Зареєструвати блог з темою «Ада Лавлейс», вибрати дизайн, наповнити блог мінімум 5 фактами з фото про Аду Лавлейс.