Веб -дизайн та презентація інтелектуальної діяльності Загальні відомості по дисципліні “Веб-дизайн та презентація інтелектуальної діяльності” Спеціальності, для яких викладається: 6.010104.36 “Професійне навчання. Комп’ютерні технології в управлінні та.

Download Report

Transcript Веб -дизайн та презентація інтелектуальної діяльності Загальні відомості по дисципліні “Веб-дизайн та презентація інтелектуальної діяльності” Спеціальності, для яких викладається: 6.010104.36 “Професійне навчання. Комп’ютерні технології в управлінні та.

Slide 1

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 2

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 3

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 4

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 5

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 6

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 7

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 8

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 9

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 10

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 11

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 12

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 13

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo


Slide 14

Веб -дизайн та презентація
інтелектуальної діяльності

Загальні відомості по дисципліні
“Веб-дизайн та презентація
інтелектуальної діяльності”
Спеціальності, для яких викладається:
6.010104.36 “Професійне навчання.
Комп’ютерні технології в управлінні та навчанні”
Важливість вивчення дисципліни полягає у можливості
не лише підвищити рівень освіченості на сучасному етапі розвитку
новітніх інформаційних технологій, але і сприяє формування
у майбутніх фахівців здатності до саморозвитку, самовдосконалення,
самостійної, індивідуальної, творчої роботи в даній сфері.

Сфера професійного використання отриманих знань:
ділова сфера;
сфера освіти;
сфера розваг.
Company Logo

Короткий опис дисципліни
Курс присвячений питанням


















Історія веб-дизайну.
Поняття веб-дизайн.
Компоненти веб-дизайну.
Колористика, естетика, стиль у веб-дизайні.
Мова програмування HTML.
Види НТМL редакторів.
Переваги та недоліки програми Adobe Dreamweaver.
Складові елементи концепції web-сайтів.
Програми для створення та редагування електронних видань.
Логічна та фізична структура web-сайтів.
Функціональні можливості програми Adobe Photoshop.
Правила макетування та розміщення інформації на web-сайтах.
Створення та використання шаблонів для web-сайтів у програмі Adobe
Photoshop.
Анімація та графіка, як засіб оформлення web-сайтів.
Використання мультимедіа в електронних виданнях.
Алгоритм розміщення web-сайтів у мережі Інтернет.
Адміністрування web-сайтів у мережі Інтернет.

Company Logo

Цілі і завдання викладення
дисципліни
• засвоєння основних принципів створення web-сайтів;
• засвоєння студентами прийомів і навиків програмування, опису і розмітки
web-сторінок HTML.
• знайомство студентів з сучасною літературою та методів отримання
інформації за
темою курсу;
• засвоєння студентами основ будови, методів управління web-сайтами;
• формування у студентів правильного використання отриманих знань на
практиці;
• створення власного web-сайту в Інтернеті;
• ознайомлення з принципами роботи програм типу WYSIWYG;
• отримання навичок макетування та програмування web-сайтів;
• вивчення основних правил колористики та естетики при створені webсайтів;
• ознайомлення з роботою програмними пакетами Adobe Dreamweaver та
Adobe Photoshop;
• створення та застосування графічних елементів web-сайтів;
• розміщення та оптимізація web-сайтів в мережі Інтернет.
Company Logo

Місце дисципліни серед суміжних
дисциплін
Дана дисципліна вимагає попереднього вивчення
курсів:





Інформатики
Об’єктно-орієнтованого програмування
Системного програмування
Прикладного програмування

В той же час дисципліна є однією з базових для
вивчення дисциплін:
 Комп’ютерні технології в навчальному процесі

 Internet-технології та телекомунікації в бізнесі

Company Logo

Кінцеві знання, уміння і навички
В результаті вивчення дисципліни студенти повинні отримати ЗНАННЯ:












основні компоненти мови HTML;
структуру розмітки HTML,
принципи та методи розробки сайтів,
інструментальні засоби для розробки сайтів,
правила макетування та верстки у веб-дизайні,
структуру статичних та динамічних видань,
засоби макетування та верстки за допомогою програми Adobe Dreamweaver,
функції програмного пакета Adobe Dreamweaver,
правила запису HTML, CSS та PHP кодів,
види та типи веб-анімації, веб-графіки,
види та типи інтерактивних технологій.

В результаті вивчення дисципліни студенти повинні набути УМІННЯ І
НАВИЧКИ:






розробляти сайт та розміщати його в WWW,
застосовувати програми по обробці мультимедіа,
працювати з програмними пакетами Adobe Dreamweaver та Adobe Photoshop,
працювати з розміткою HTML та стилями CSS,
застосовувати у власних web-сайтах різні типи веб-анімації та веб-графіки.
Company Logo

Зміст лекційного курсу
Тема 1. Вступ. Ідеологія HTML
Тема 2. Структура HTML-документа. Таблиця базових
кольорів. Навігаційні карти.
Тема 3. Тіло документа – BODY. Гіперпосилання. Таблиці.
Тема 4. Теги HTML-документа. Списки, форми та
горизонтальні лінії.
Тема 5. Розмітка документів в HTML. Поняття хостингу та
домену.
Тема 6. Основи роботи в Adobe Photoshop.
Тема 7. Загальна інформація про пошукові системи.
Внутрішня оптимізація сайту.
Тема 8. Зовнішні методи просування сайту.
Тема 9. Програми автоматичної реєстрації. Індексація сайту.

Company Logo

Практикум
Практична робота № 1. Логічне та фізичне форматування
тексту.
Практична робота № 2. Створення таблиць та
гіперпосилань у html-документах.
Практична робота № 3. Використання фреймів в htmlдокументах.
Практична робота № 4. Використання навігаційних карт та
форм в html-документах.
Практична робота № 5. Основи створення графіки в Adobe
Photoshop.
Практична робота № 6. Розміщення WEB-сайту в мережі
Інтернет.
Практична робота № 7. Створення банера для web-сайту.
Практична робота № 8. Створення web-кнопки.
Практична робота № 9. Створення логотипу для web-сайту.
Company Logo

Форми контролю
Попередній контроль
 тест, запитання для самоконтролю
Поточний контроль
 тест, запитання для самоконтролю

Підсумковий контроль
 тест та захист індивідуального проекту
(розробка власного веб-сайту з
використання анімаційних елементів)

Company Logo

Глосарій
Глосарій забезпечує тлумачення і визначення
основних понять, які необхідні для
адекватного осмислення матеріалу.
Наприклад:
1.

2.

3.

HTML (Hypertext Markup Language) – стандартна мова
розмітки, за допомогою якого створюються веб-сторінки в
Інтернеті
Браузер – це спеціалізоване програмне забезпечення,
створене для обробки й виведення різних елементів вебсторінок. Браузер надає можливість користувачеві взаємодіяти
з веб-сторінками за допомогою розробленого інтерфейсу
Індексація сайту – процес включення сторінок сайту в індексну
базу пошукової машини, здійснюваний у результаті обходу
роботами пошуковика веб-сторінок мережі
Company Logo

Список літератури
Основна:












Ашманов И., Иванов А. Оптимизация и продвижение сайтов в
поисковых системах. – СПб.: Питер,2008. – 400с.
Бурсов М., Домненко В., Гаврилин Д. А., Николаев Д. Г. Основы работы
с HTML-редактором Dreamweaver. – СПб.: СПбГИТМО(ТУ), 2002. –
104с.
Використання мови розмітки гіпертексту HTML. Методичні вказівки до
практичних робіт з курсу "Локальні комп’ютерні мережі" для студентів
спеціальностей напрямку "Інженерна механіка"/Третько В.В., Савицький
Ю.В. – Хмельницький: ТУП, 2001. – 97 с.
Владимир Городулин. HTML-справочник.
Владимир Дригалкин. ВЕБ-дизайн.
Гото К., Котлер Э. Веб-дизайн. – М.: Символ-Плюс,2003. – 376с
Лопухова Н.Г., Лопухов В.М. Крицкая Ю. Основы создания Web-страниц.
Методическое пособие к лабораторным работам по курсу
"Информационные технологии"/Алт. Гос. Тех. ун-т. им. И.И. Ползунова. –
Барнаул: Изд-во АлтГТУ, - 2002. – 60 с.
Мержевич В. Приемы верстки веб-страниц
Company Logo

Список літератури
Додаткова:



Круг С. Веб-дизайн: книга Стива Круга. –М.: СимволПлюс,2005. – 119с
Нильсен Я. Веб-дизайн. – М.: Символ-Плюс,2003. – 512с

Company Logo

Самостійна робота
В ЕНМК з дисципліни “Веб-дизайн та
презентація інтелектуальної діяльності”
подано наступні завдання для
самостійного опрацювання (згідно
індивідуальних завдань):
• Створення власного web-сайту;
• Робота з графічним зображенням;
• Створення анімації.

Company Logo

Відомості про автора
ПІП: Олексів Наталія Анатоліївна
Місце роботи: ЛНТУ
Посада: асистент
Кафедра: КТПН
Контактна інформація:
 Адреса: с. Липини, вул. Вереснева 116
 Робочий телефон: 26-26-93
 E-mail: [email protected]

Company Logo