- •Тема 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».
- •Теоретичні відомості
- •Тема: Налаштування сайту та його адміністративної панелі.
- •Тема: Публікації і сторінки.
- •Тема: Навігація.
- •Тема: Теми та дизайн сайту.
- •Завдання
- •Контрольні запитання
- •Словник термінів
- •Список використаних джерел
- •Навчальне видання
2. Визначення структури сайту
Перед створенням сайту слід ретельного продумати концепцію і скласти структуру майбутнього сайту. І вже на основі цього підбирати необхідні матеріали. При доборі матеріалу важливо вміти його структурувати, виділяти найбільш важливе.
Завдання 2. Скласти структуру майбутнього сайту та дібрати матеріал до нього.
3. Визначення ключових слів
Далі варто визначити список ключових слів. Ключовими запитами називають слова і словосполучення, за якими потенційні відвідувачі шукають інформацію в мережі Інтернет, використовуючи при цьому пошукові системи.
Сайт складається з наповнених контентом сторінок, що містять опис діяльності відповідної організації. Це опис і використовується пошуковими машинами при складанні запитів користувачів мережі в пошуках необхідної їм інформації.
Завдання 3. Записати список ключових слів, що стосуються змісту сайту.
4. Добір доменного імені сайту.
Далі починається підбір доменного імені для сайту. Підбір імені сайту - довгий і дуже складний процес (якщо врахувати те, що всі звучні і хорошої імена вже давно зареєстровані).
Для вибору хорошого доменного імені перш за все потрібно звернути увагу на тематику сайту, і відповідно до неї підібрати кілька десятків англійських слів, що асоціюються з даною тематикою. Потім, потрібно знайти вільне доменне ім'я для вашого сайту на основі цих слів.
Завдання 4. Підібрати до свого сайту доменне ім’я та визначити його вартість в мережі Інтернет.
Лабораторна робота №2. Основи використання дескрипторів мови html
Мета: навчитись використовувати базові дескриптори для форматування тексту мовою HTML та створювати найпростішу структуру html-документу.
Хід роботи
Структура html-документу
Звичайний документ має наступну структуру:
<HTML><HEAD><TITLE> Назва документу </TITLE></HEAD>
<BODY>Текст та інші об’єкти</BODY>
</HTML>
----------------------------------------------------------------------------------------------------
Завдання 1. Набрати текст, що знаходиться вище в текстовому редакторі «Блокнот» і зберегти з розширенням .htm. Переглянути збережений документ у веб-оглядачі.
----------------------------------------------------------------------------------------------------
У тегах <TITLE> </TITLE> вписується заголовок документу, що буде розміщений у рядку заголовка веб-оглядача.
Теги <BODY > </BODY> містять основний текст та теги документу
Майже кожний тег має додаткові параметри – атрибути, які записуються у дужках тега.
Наприклад тег <BODY > має такі атрибути:
background=”URL” – фоновий малюнок, URL – відносний шлях до малюнку.
bgcolor=”color” – фоновий колір, де color– назва кольору (red, black, blue, yellow, green та інші), або його номер (шість цифр, перші дві-градація червоного кольору, наступні дві-градація зеленого кольору, останні дві-градація синього кольору).
text=”color” – колір тексту.
<BODY text=”blue” bgcolor=”yellow”>
Теги форматування
<P> Ці теги обмежують абзац тексту. </P>
<H1> Заголовок 1-го рівня (найбільший). </H1>
<H2> Заголовок 2-го рівня. </H2>
…
<H6> Заголовок 3-го рівня (найменший). </H6>
<B> Текст між цими тегами напівжирний </B>
<I> Текст між цими тегами нахилений </I>
<U> Текст між цими тегами підкреслений </U>
<OL> Початок нумерованого списку
<LI> 1-й елемент списку
<LI> 2-й елемент списку
…
<LI> n-й елемент списку
</OL> Завершення нумерованого списку
<UL> Початок маркірованого списку
<LI> 1-й елемент списку
<LI> 2-й елемент списку
…
<LI> n-й елемент списку
</UL> Завершення маркірованого списку