- •Тема 1. Теорія веб-програмування
- •1.Загальне поняття про веб-програмування
- •2. Історія
- •1971-1989 Рік – перший обмін повідомленнями.
- •1995-1996 Рр. Мова програмування JavaScript. Каскадна таблиця стилів. Flash.
- •2000 Рік (травень) – реліз php4.
- •2000 Рік (грудень) – w3c та JavaScript.
- •2005 Рік – упровадження технології web 2.0.
- •3. Засоби веб-програмування
- •4. Система керування вмістом
- •Тема 2. Мова гіпертекстової розмітки html
- •1. Основні поняття мови html.
- •2. Історія розвитку html.
- •3. Розмітка
- •4. Елементи html-документа
- •5. Редактори html-документів
- •Wysiwyg-редактори
- •Редактори, що працюють з вихідним кодом
- •Тема 3. Система управління вмістом Joomla
- •Складові cms-системи
- •2. Системні вимоги до встановлення cms Joomla
- •3. Інсталяція cms Joomla
- •5. Адміністрування cms Joomla
- •Тема 4. Проектування сайтів
- •2. Класифікація web-сайтів (за призначенням)
- •2.1. Класифікація за призначенням
- •2.2 Класифікація сайтів за технологіями, що використовуються
- •Тема 5. Структура процесу розробки web-сайтів та web-додатків
- •1 Структура процесу розробки
- •2 Технічне завдання на розробку
- •2.1. Етапи та терміни створення сайту:
- •Структура сайту інституту
- •Наукові школи
- •Центри та лабораторії
- •Напрями наукових досліджень
- •Конференції та семінари
- •Видавнича діяльність
- •Контакти Тема 6. Ергономічні обмеження та рекомендації при web–дизайні
- •1. Обмеження по кількості елементів керування
- •2 Обмеження по розташуванню елементів керування
- •3. Обмеження по інформаційному наповненню
- •4. Графіка та текст.
- •5. Часові обмеження
- •1. Психогенний вплив
- •2. Колір при Web-дизайні
- •Тема 7. Програмування мовою html 5
- •П'ять речей, які треба знати про html5
- •2. Вам не треба відкидати наявне
- •3. Легко почати
- •4. Це вже працює
- •Перевірка технологій html5
- •10 Порад для створення html5-шаблонів
- •Можливі експерименти з html5
- •Переваги табличної верстки
- •4 Основних недоліка табличної верстки
- •Оптимізація html коду
- •Практичні завдання Розділ і. Лабораторна робота №1. Розробка структури сайту
- •Хід роботи
- •Визначення мети створення сайту та його тематики.
- •2. Визначення структури сайту
- •3. Визначення ключових слів
- •4. Добір доменного імені сайту.
- •Лабораторна робота №2. Основи використання дескрипторів мови html
- •Хід роботи
- •Теги форматування
- •Атрибут тега ul type відповідає за вигляд маркеру:
- •Встановлення кольору фону
- •Лабораторна робота №3. Створення веб-сторінки мовою html.
- •Хід роботи
- •Лабораторна робота №4. Робота з таблицями у html.
- •Хід роботи
- •Елементи таблиці
- •Атрибути елемента table
- •Атрибути елементів рядків і стовпців
- •Колір у таблицях
- •Об'єднання комірок таблиці
- •Контрольні запитання
- •Лабораторна робота №5. Використання зображень та посилань на веб-сторінці.
- •Теоретичні відомості
- •Зовнішні посиланн
- •Внутрішні посилання
- •Завдання: Створити галерею учнів 9 класів.
- •Питання для самоконтролю
- •Лабораторна робота №6. Створення персонального сайту за допомогою системи ucoz
- •Хід роботи
- •(Для завершення реєстрації перейти за цим посиланням:)
- •Індивідуальне завдання
- •Лабораторна робота №7. Налагодження модулів персонального сайту в системі ucoz
- •Хід роботи
- •Індивідуальні завдання
- •Розділ іі.(практичне застосування) Комплекс практичних робіт по створенню веб-сайту за допомогою системи управління контентом «WordPress»
- •Практична робота №1 Тема: Встановлення локального сервера. Встановлення україномовної версії «WordPress».
- •Теоретичні відомості
- •Тема: Налаштування сайту та його адміністративної панелі.
- •Тема: Публікації і сторінки.
- •Тема: Навігація.
- •Тема: Теми та дизайн сайту.
- •Завдання
- •Контрольні запитання
- •Словник термінів
- •Список використаних джерел
- •Навчальне видання
Індивідуальне завдання
На головній сторінці сайту додати новину про початок функціонування сайту.
На сторінці «Інформація про сайт» додати мету створення сайту, інформацію про те, що можна знайти на сайті, хто є автором сайту, тощо.
В каталозі статей розмістити статтю, що стосується тематики сайту.
В розділі «Фотоальбом» додати зображення, що стосуються сайту (не менше 5 зображень). Зображення обов’язково повинні містити підпис.
В електронний зошит системи Moodle додати адресу Вашого сайту для його оцінювання.
Лабораторна робота №7. Налагодження модулів персонального сайту в системі ucoz
Мета: ознайомлення з процедурою налагодження модулів веб-сайту за допомогою системи керуванням вмісту (CMS) на прикладі UCOZ.
Хід роботи
1. Відкрити створений сайт та зайти до нього під своїм ім’ям. Коли сайт відкриється в режимі користувача системи UCOZ, то у верхній частині створеного сайту з’явиться меню користувача. Якщо такий вхід не було виконано, то необхідно виконати вхід до системи UCOZ вказавши ім’я та пароль, що було створено під час реєстрації Вебтопа (див. лаб.робота № 3).
2. Зміна заголовку сайта. Перейти до пункту меню «Конструктор» → «Включити конструктор».
В цьому режимі зовнішній вигляд сайту змінюється і сайт містить біля відповідних модулів кнопки налаштування. Даний режим дає змогу змінювати основні надписи сайту. Зокрема, можна змінити назву сайту.
Для
цього потрібно активувати поле з текстом
«Мій
сайт»
та ввести з клавіатури нову назву.
В цьому ж режимі можна змінити такі надписи як «Меню сайту», «Форма входу», «Категорії розділу», тобто ті надписи, які в режимі конструктора виділені сірим фоном.
Щоб зберегти зміни, необхідно обрати в меню команду «Конструктор» → «Зберегти зміни».
Конструктор автоматично вимикається та включається режим перегляду сайту.
3. Додати матеріал на першу (головну) сторінку сайту. На головній сторінці обрати посилання «Додати матеріал» (може також бути надпис «Добавить новость», в залежності від того який дизайн сайту було обрано на початку).
У вікні редагування вводиться назва матеріалу та його вміст.
В кінці форми є деякі опції, що керують виводом матеріалу на сторінку.
Зокрема, в пункті «Матеріал додав» можна обрати користувача, який відповідає за поданий матеріал або той, який його підготував.
В полі «Зображення» можна додати зображення, а кнопка з плюсом дає змогу додати декілька зображень до сторінки. При натисненні на цій кнопці з’являється ще одне поле для завантаження зображення. Після вибору зображення на комп’ютері, біля кнопки «Обзор» з’являється код зображення (наприклад, $IMAGE1$, $IMAGE2$ і т.д.).
Для того, щоб зображення з’явилось в потрібному місці цей код необхідно скопіювати та вставити до тексту.
Після того, як зображення завантажені та додані до тексту, наступною опцією є «Прикріпити посилання на зображення до повідомлення». Дана опція дає змогу розташувати текстові посилання вкінці новини і переглядати їх в окремому вікні.
Поле «Теги (через кому)» потрібне для того, щоб на сайті функціонувала пошукова система. Теги – це ключові слова, за якими можна знайти ту чи іншу інформацію. Ці ключові слова повинні характеризувати додану новину.
А саме пункт «Матеріал недоступний для перегляду» необхідний для того, щоб підготувати деякий текст і при підготовці не публікувати його на сайті. Другий - «Дозволити залишати коментарі» необхідний для підключення модуля, за допомогою якого, будь-який користувач системи може залишити свій коментар до опублікованої новини.
4. Ресурси в мережі Інтернет стають кориснішими, якщо в їх розпорядженні є готові файли з текстовою, графічною, звуковою інформацією. Для цього на ресурсі додамо файл з інформацією, що представлена у вигляді документу, підготовленому в середовищі Word. Наприклад, це може бути пояснення чи опис чого-небудь.
Такі операції здійснюються за допомогою відповідного модуля сервісу Ucoz – «Каталог файлів». Але для того, щоб з ним працювати, необхідно його активувати в панелі управління. Отже, необхідно перейти в панель управління.
Обрати вкладку «Неактивные», знайти там модуль «Каталог файлів» та активувати його.
Щоб додати файл, необхідно знову перейти до сайту і відкрити посилання «Каталог файлів», яке з’явилось після активації даного модуля в списку меню.
Натиснути посилання «Додати матеріал».
Заповнити необхідні поля «Категорія» (із запропонованого списку, якщо не має жодної категорії то необхідно вибрати «порожню»), тобто головну, категорію за допомогою «радіокнопки» у спадаючому меню. Наступні поля – «Назва матеріалу», «Короткий опис», «Повний опис». Варто зазначити, що поля «Короткий опис» та «Повний опис» не є обов’язковими для заповнення.
Для прикріплення файлу, що розташований на комп’ютері, використовується кнопка «Обзор».
Далі в стандартному вікні операційної системи вибору файлу, потрібно знайти необхідний для завантаження на веб-сервер файл. Після вибору файлу натиснути кнопку «Додати». Завантажений файл з коротким описом буде відображатись на сторінці «Каталог файлів».
Посилання «Викачати з сервера» дає змогу завантажити файл користувачу, який відвідав сайт. Крім того, користувач має можливість оцінити завантажений вами ресурс. Для цього в правій нижній частині знаходяться 5 неактивних зображень зірок, шляхом наведення на які користувач може виставити рейтинг цьому ресурсу.
