- •Тема 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
Тема: Теми та дизайн сайту.
Мета: Навчитись встановлювати теми та налаштовувати дизайн сайту.
Теоретичні відомості
Дизайн відіграє на сьогодні важливу роль для популярності сайту. В системі управління сайтом «WordPress» за дизайн сайту відповідає тема – шаблон сторінки, який визначає її оформлення.
Керування темами відбувається в пункті «Теми» розділу «Дизайн».
В даному вікні відображені доступні до встановлення теми. Щоб встановити на сайт тему потрібно її спочатку завантажити із офіційного сайту системи «WordPress» чи із сайтів українських розробників.
Примітка! Теми з офіційного сайту не мають українського перекладу.
Потім потрібно натиснути «Завантажити» у вкладці «Встановлення тем»,
обрати завантажений архів із обраною темою та натиснути «Встановити зараз». Після встановлення її потрібно активувати у вкладці «Керування темами».
Кожна тема має свої власні налаштування. Розглянемо налаштування стандартної теми «Twenty Eleven». Налаштування даної теми здійснюється за такими пунктами:
Віджети – це об’єкти, що розміщені в сайдбарі та можуть здійснювати навігацію, чи виводити певну інформацію. Для розміщення віджета в сайдбарі варто лише перетягнути обраний віджет з вікна «Доступні віджети» у вікно сайдбару.
Опції теми. В даному пункті обирається кольорова схема, колір посилань, розташування контенту веб-сайту.
Верхня частина. В даному пункті обирається оформлення шапки сайту. Тут також можна обрати які зображення будуть демонструватися в верхній частині сайту, чи взагалі відімкнути їх показ.
Фон. В даному пункті можливо задати колір фону сайту, або ж зображення, що буде виконувати роль фону.
Завдання
Встановіть у сайдбар віджет пошуку та віджет останніх публікацій.
Вимкніть можливість відображення зображень у шапці сайту, або встановіть статичну картинку.
Встановіть сайдбар справа.
В якості фону використайте зображення.
