SlideShare a Scribd company logo
1 of 8
Етапи створення веб-сайтів.Етапи створення веб-сайтів.
Основи веб-дизайну.Основи веб-дизайну.
1. Постановка завдання1. Постановка завдання
 Мета сайтаМета сайта
 Тематика сайтаТематика сайта
 Тип сайтаТип сайта
 Відмінності від інших сайтів з такоюВідмінності від інших сайтів з такою
тематикоютематикою
 Аудиторія відвідувачівАудиторія відвідувачів
 Перелік сервісів на сайтіПерелік сервісів на сайті
 Перспективи розвитку сайтаПерспективи розвитку сайта
2. Визначення структури сайта2. Визначення структури сайта
 Мапа сайтаМапа сайта
 Зовнішній вигляд сторінокЗовнішній вигляд сторінок
Блок заголовка
Інформаційний
блок
Блок
меню
Підвал
3. Розробка дизайн-макета3. Розробка дизайн-макета
сторіноксторінок
 Кольорова гамаКольорова гама
 Елементи графічного оздобленняЕлементи графічного оздоблення
 Набір шрифтівНабір шрифтів
4.4. Створення та верстка сторінок сайтаСтворення та верстка сторінок сайта
5.5. Етап програмування сайта (дляЕтап програмування сайта (для
інтерактивності)інтерактивності)
6.6. Публікація в Інтернеті (через хостінг-Публікація в Інтернеті (через хостінг-
провайдерів)провайдерів)
7.7. Тестування сайтаТестування сайта
8.8. Популяризація сайтаПопуляризація сайта
9.9. Супровід сайта (оновлення,Супровід сайта (оновлення,
доповнення, редизайн)доповнення, редизайн)
Веб-дизайн – це дизайн, обВеб-дизайн – це дизайн, об’’єктамиєктами
якого є сторінки веб-сайтівякого є сторінки веб-сайтів
Основні принципи дизайнуОсновні принципи дизайну
КомпозиціяКомпозиція
КолористикаКолористика
ЕргономікаЕргономіка
Стилі дизайну сайтівСтилі дизайну сайтів
За кольоровою гамоюЗа кольоровою гамою
Темний;Темний;
Світлий;Світлий;
Однокольоровий;Однокольоровий;
РізнокольоровийРізнокольоровий
За тематичноюЗа тематичною
ознакоюознакою
Стиль “Ретро”Стиль “Ретро”
Стиль “Гранж”Стиль “Гранж”
ФутуристичнийФутуристичний
стильстиль
Мультяшний стильМультяшний стиль
Журнальний стильЖурнальний стиль
ІншіІнші
Правила оформлення веб-сторінокПравила оформлення веб-сторінок
 Оберіть кольорову гаму (2-3 кольори);Оберіть кольорову гаму (2-3 кольори);
 Обирайте контрастні кольори для тексту та фону;Обирайте контрастні кольори для тексту та фону;
 Розбивайте текст на абзаци, між якими зробітьРозбивайте текст на абзаци, між якими зробіть
відступи;відступи;
 Виберіть розмір та вид шрифту;Виберіть розмір та вид шрифту;
 Заголовки по центру, основний текст – по ширині;Заголовки по центру, основний текст – по ширині;
 Використовуйте таблиці для структурування тексту;Використовуйте таблиці для структурування тексту;
 Не зловживайте стороннім оздобленням;Не зловживайте стороннім оздобленням;
 Зробіть гіперпосилання між сторінками;Зробіть гіперпосилання між сторінками;
 Зробіть логотип сайта для гіперпосилань;Зробіть логотип сайта для гіперпосилань;
 Створіть мапу сайта.Створіть мапу сайта.

More Related Content

Viewers also liked

OpinionWay pour Prévoir - Les Français et la prévoyance santé / Janvier 2017
OpinionWay pour Prévoir - Les Français et la prévoyance santé / Janvier 2017OpinionWay pour Prévoir - Les Français et la prévoyance santé / Janvier 2017
OpinionWay pour Prévoir - Les Français et la prévoyance santé / Janvier 2017contactOpinionWay
 
Laser mouse with graphics and audio
Laser mouse with graphics and audio Laser mouse with graphics and audio
Laser mouse with graphics and audio varunn dabhade
 
геращенко
геращенкогеращенко
геращенкоTamara Emec
 
3Com 655001001
3Com 6550010013Com 655001001
3Com 655001001savomir
 

Viewers also liked (6)

23 створення діаграм
23 створення діаграм23 створення діаграм
23 створення діаграм
 
OpinionWay pour Prévoir - Les Français et la prévoyance santé / Janvier 2017
OpinionWay pour Prévoir - Les Français et la prévoyance santé / Janvier 2017OpinionWay pour Prévoir - Les Français et la prévoyance santé / Janvier 2017
OpinionWay pour Prévoir - Les Français et la prévoyance santé / Janvier 2017
 
Proceso de-carga
Proceso de-cargaProceso de-carga
Proceso de-carga
 
Laser mouse with graphics and audio
Laser mouse with graphics and audio Laser mouse with graphics and audio
Laser mouse with graphics and audio
 
геращенко
геращенкогеращенко
геращенко
 
3Com 655001001
3Com 6550010013Com 655001001
3Com 655001001
 

Similar to 1222929

Розробка веб-сайту. Основні етапи
Розробка веб-сайту. Основні етапиРозробка веб-сайту. Основні етапи
Розробка веб-сайту. Основні етапиОлексій Артеменко
 
веб сторінки
веб сторінкивеб сторінки
веб сторінкиXX1827
 
веб сторінки
веб сторінкивеб сторінки
веб сторінкиJoseph Willson
 
Veb-mama ama kriminal
Veb-mama ama kriminalVeb-mama ama kriminal
Veb-mama ama kriminalartemlinok
 
веб сторінки
веб сторінкивеб сторінки
веб сторінкиRemka_oxxxy
 
веб сторінки
веб сторінкивеб сторінки
веб сторінкиgaliasova
 
веб сторінки
веб сторінкивеб сторінки
веб сторінкиann2704
 
Guide for Dota 2
Guide for Dota 2 Guide for Dota 2
Guide for Dota 2 kvak333
 
веб сторінки
веб сторінкивеб сторінки
веб сторінкиAnyaNastya
 
Етапи створення веб сайтів
Етапи створення веб сайтівЕтапи створення веб сайтів
Етапи створення веб сайтівYulia Vlasenko
 
Web Dessign Essentials Beregsassi Stepan (Ukrainian)
Web Dessign Essentials Beregsassi Stepan (Ukrainian)Web Dessign Essentials Beregsassi Stepan (Ukrainian)
Web Dessign Essentials Beregsassi Stepan (Ukrainian)Beregszászi István
 
Автомат розроб сайтів_огляд_web2
Автомат розроб сайтів_огляд_web2Автомат розроб сайтів_огляд_web2
Автомат розроб сайтів_огляд_web2Ирина Слуцкая
 
Візуальне відображення Інтернет-ресурсів НБ МДУ
Візуальне відображення Інтернет-ресурсів НБ МДУВізуальне відображення Інтернет-ресурсів НБ МДУ
Візуальне відображення Інтернет-ресурсів НБ МДУНБ МДУ
 
пасічник о.г. , пасічник о.в. , стеценко і.в. основи веб дизайну (2009)2
пасічник о.г. , пасічник о.в. , стеценко і.в. основи веб дизайну (2009)2пасічник о.г. , пасічник о.в. , стеценко і.в. основи веб дизайну (2009)2
пасічник о.г. , пасічник о.в. , стеценко і.в. основи веб дизайну (2009)2Vova Dudnik
 
Osnovy webdis
Osnovy webdisOsnovy webdis
Osnovy webdisvlad hats
 
Як прискорити індексацію сайту?
Як прискорити індексацію сайту?Як прискорити індексацію сайту?
Як прискорити індексацію сайту?Vladyslava Rykova
 

Similar to 1222929 (20)

Розробка веб-сайту. Основні етапи
Розробка веб-сайту. Основні етапиРозробка веб-сайту. Основні етапи
Розробка веб-сайту. Основні етапи
 
Urok 49 9 kl
Urok 49 9 klUrok 49 9 kl
Urok 49 9 kl
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
Veb-mama ama kriminal
Veb-mama ama kriminalVeb-mama ama kriminal
Veb-mama ama kriminal
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
Guide for Dota 2
Guide for Dota 2 Guide for Dota 2
Guide for Dota 2
 
веб сторінки
веб сторінкивеб сторінки
веб сторінки
 
Етапи створення веб сайтів
Етапи створення веб сайтівЕтапи створення веб сайтів
Етапи створення веб сайтів
 
Web Dessign Essentials Beregsassi Stepan (Ukrainian)
Web Dessign Essentials Beregsassi Stepan (Ukrainian)Web Dessign Essentials Beregsassi Stepan (Ukrainian)
Web Dessign Essentials Beregsassi Stepan (Ukrainian)
 
Автомат розроб сайтів_огляд_web2
Автомат розроб сайтів_огляд_web2Автомат розроб сайтів_огляд_web2
Автомат розроб сайтів_огляд_web2
 
кросворд222
кросворд222кросворд222
кросворд222
 
11
1111
11
 
Візуальне відображення Інтернет-ресурсів НБ МДУ
Візуальне відображення Інтернет-ресурсів НБ МДУВізуальне відображення Інтернет-ресурсів НБ МДУ
Візуальне відображення Інтернет-ресурсів НБ МДУ
 
Osnovy webdis
Osnovy webdisOsnovy webdis
Osnovy webdis
 
пасічник о.г. , пасічник о.в. , стеценко і.в. основи веб дизайну (2009)2
пасічник о.г. , пасічник о.в. , стеценко і.в. основи веб дизайну (2009)2пасічник о.г. , пасічник о.в. , стеценко і.в. основи веб дизайну (2009)2
пасічник о.г. , пасічник о.в. , стеценко і.в. основи веб дизайну (2009)2
 
Osnovy webdis
Osnovy webdisOsnovy webdis
Osnovy webdis
 
Як прискорити індексацію сайту?
Як прискорити індексацію сайту?Як прискорити індексацію сайту?
Як прискорити індексацію сайту?
 

Recently uploaded

Хімічні елементи в літературних творах 8 клас
Хімічні елементи в літературних творах 8 класХімічні елементи в літературних творах 8 клас
Хімічні елементи в літературних творах 8 класkrementsova09nadya
 
Defectolog_presentation_for_website.pptx
Defectolog_presentation_for_website.pptxDefectolog_presentation_for_website.pptx
Defectolog_presentation_for_website.pptxOlgaDidenko6
 
Бібліотека – розвиток дитячої творчості та дозвілля для дітейpptx
Бібліотека – розвиток дитячої творчості  та дозвілля для дітейpptxБібліотека – розвиток дитячої творчості  та дозвілля для дітейpptx
Бібліотека – розвиток дитячої творчості та дозвілля для дітейpptxssuserc301ed1
 
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdf
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdfЗастосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdf
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdfssuser15a891
 
Презентациія для сайта Група «Незабудка».pptx
Презентациія для сайта Група «Незабудка».pptxПрезентациія для сайта Група «Незабудка».pptx
Презентациія для сайта Група «Незабудка».pptxOlgaDidenko6
 
Горбонос 2024_presentation_for_website.pptx
Горбонос 2024_presentation_for_website.pptxГорбонос 2024_presentation_for_website.pptx
Горбонос 2024_presentation_for_website.pptxOlgaDidenko6
 
psychologistpresentation-230215175859-50bdd6ed.ppt
psychologistpresentation-230215175859-50bdd6ed.pptpsychologistpresentation-230215175859-50bdd6ed.ppt
psychologistpresentation-230215175859-50bdd6ed.pptOlgaDidenko6
 
Іваніщук Надія Вікторівна атестація .pdf
Іваніщук Надія Вікторівна атестація  .pdfІваніщук Надія Вікторівна атестація  .pdf
Іваніщук Надія Вікторівна атестація .pdfhome
 
атестація 2023-2024 Kewmrbq wtynh GNJ.pdf
атестація 2023-2024 Kewmrbq wtynh GNJ.pdfатестація 2023-2024 Kewmrbq wtynh GNJ.pdf
атестація 2023-2024 Kewmrbq wtynh GNJ.pdfhome
 
Р.Шеклі "Запах думки". Аналіз оповідання
Р.Шеклі "Запах думки". Аналіз оповіданняР.Шеклі "Запах думки". Аналіз оповідання
Р.Шеклі "Запах думки". Аналіз оповіданняAdriana Himinets
 
Супрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxСупрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxOlgaDidenko6
 
Відкрита лекція на тему «Контроль бур'янів в посівах соняшника»
Відкрита лекція на тему «Контроль бур'янів в посівах соняшника»Відкрита лекція на тему «Контроль бур'янів в посівах соняшника»
Відкрита лекція на тему «Контроль бур'янів в посівах соняшника»tetiana1958
 
Принципові відмінності досконалої (повної) конкуренції від інших форм організ...
Принципові відмінності досконалої (повної) конкуренції від інших форм організ...Принципові відмінності досконалої (повної) конкуренції від інших форм організ...
Принципові відмінності досконалої (повної) конкуренції від інших форм організ...JurgenstiX
 
Проблеми захисту лісу в Україні та шляхи вирішення
Проблеми захисту лісу в Україні та шляхи вирішенняПроблеми захисту лісу в Україні та шляхи вирішення
Проблеми захисту лісу в Україні та шляхи вирішенняtetiana1958
 
ЛЕКЦІЯ Засоби масової інформації –важливий інструмент ПР.ppt
ЛЕКЦІЯ Засоби масової інформації –важливий інструмент ПР.pptЛЕКЦІЯ Засоби масової інформації –важливий інструмент ПР.ppt
ЛЕКЦІЯ Засоби масової інформації –важливий інструмент ПР.pptssuser59e649
 
Бомбочки для ванни своїми руками презентація
Бомбочки для ванни своїми руками презентаціяБомбочки для ванни своїми руками презентація
Бомбочки для ванни своїми руками презентаціяssuser0a4f48
 
Супрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxСупрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxOlgaDidenko6
 

Recently uploaded (17)

Хімічні елементи в літературних творах 8 клас
Хімічні елементи в літературних творах 8 класХімічні елементи в літературних творах 8 клас
Хімічні елементи в літературних творах 8 клас
 
Defectolog_presentation_for_website.pptx
Defectolog_presentation_for_website.pptxDefectolog_presentation_for_website.pptx
Defectolog_presentation_for_website.pptx
 
Бібліотека – розвиток дитячої творчості та дозвілля для дітейpptx
Бібліотека – розвиток дитячої творчості  та дозвілля для дітейpptxБібліотека – розвиток дитячої творчості  та дозвілля для дітейpptx
Бібліотека – розвиток дитячої творчості та дозвілля для дітейpptx
 
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdf
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdfЗастосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdf
Застосування Гайду безбар’єрності в роботі закладів культури громад Одещини.pdf
 
Презентациія для сайта Група «Незабудка».pptx
Презентациія для сайта Група «Незабудка».pptxПрезентациія для сайта Група «Незабудка».pptx
Презентациія для сайта Група «Незабудка».pptx
 
Горбонос 2024_presentation_for_website.pptx
Горбонос 2024_presentation_for_website.pptxГорбонос 2024_presentation_for_website.pptx
Горбонос 2024_presentation_for_website.pptx
 
psychologistpresentation-230215175859-50bdd6ed.ppt
psychologistpresentation-230215175859-50bdd6ed.pptpsychologistpresentation-230215175859-50bdd6ed.ppt
psychologistpresentation-230215175859-50bdd6ed.ppt
 
Іваніщук Надія Вікторівна атестація .pdf
Іваніщук Надія Вікторівна атестація  .pdfІваніщук Надія Вікторівна атестація  .pdf
Іваніщук Надія Вікторівна атестація .pdf
 
атестація 2023-2024 Kewmrbq wtynh GNJ.pdf
атестація 2023-2024 Kewmrbq wtynh GNJ.pdfатестація 2023-2024 Kewmrbq wtynh GNJ.pdf
атестація 2023-2024 Kewmrbq wtynh GNJ.pdf
 
Р.Шеклі "Запах думки". Аналіз оповідання
Р.Шеклі "Запах думки". Аналіз оповіданняР.Шеклі "Запах думки". Аналіз оповідання
Р.Шеклі "Запах думки". Аналіз оповідання
 
Супрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxСупрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptx
 
Відкрита лекція на тему «Контроль бур'янів в посівах соняшника»
Відкрита лекція на тему «Контроль бур'янів в посівах соняшника»Відкрита лекція на тему «Контроль бур'янів в посівах соняшника»
Відкрита лекція на тему «Контроль бур'янів в посівах соняшника»
 
Принципові відмінності досконалої (повної) конкуренції від інших форм організ...
Принципові відмінності досконалої (повної) конкуренції від інших форм організ...Принципові відмінності досконалої (повної) конкуренції від інших форм організ...
Принципові відмінності досконалої (повної) конкуренції від інших форм організ...
 
Проблеми захисту лісу в Україні та шляхи вирішення
Проблеми захисту лісу в Україні та шляхи вирішенняПроблеми захисту лісу в Україні та шляхи вирішення
Проблеми захисту лісу в Україні та шляхи вирішення
 
ЛЕКЦІЯ Засоби масової інформації –важливий інструмент ПР.ppt
ЛЕКЦІЯ Засоби масової інформації –важливий інструмент ПР.pptЛЕКЦІЯ Засоби масової інформації –важливий інструмент ПР.ppt
ЛЕКЦІЯ Засоби масової інформації –важливий інструмент ПР.ppt
 
Бомбочки для ванни своїми руками презентація
Бомбочки для ванни своїми руками презентаціяБомбочки для ванни своїми руками презентація
Бомбочки для ванни своїми руками презентація
 
Супрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxСупрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptx
 

1222929

  • 1. Етапи створення веб-сайтів.Етапи створення веб-сайтів. Основи веб-дизайну.Основи веб-дизайну.
  • 2. 1. Постановка завдання1. Постановка завдання  Мета сайтаМета сайта  Тематика сайтаТематика сайта  Тип сайтаТип сайта  Відмінності від інших сайтів з такоюВідмінності від інших сайтів з такою тематикоютематикою  Аудиторія відвідувачівАудиторія відвідувачів  Перелік сервісів на сайтіПерелік сервісів на сайті  Перспективи розвитку сайтаПерспективи розвитку сайта
  • 3. 2. Визначення структури сайта2. Визначення структури сайта  Мапа сайтаМапа сайта  Зовнішній вигляд сторінокЗовнішній вигляд сторінок Блок заголовка Інформаційний блок Блок меню Підвал
  • 4. 3. Розробка дизайн-макета3. Розробка дизайн-макета сторіноксторінок  Кольорова гамаКольорова гама  Елементи графічного оздобленняЕлементи графічного оздоблення  Набір шрифтівНабір шрифтів
  • 5. 4.4. Створення та верстка сторінок сайтаСтворення та верстка сторінок сайта 5.5. Етап програмування сайта (дляЕтап програмування сайта (для інтерактивності)інтерактивності) 6.6. Публікація в Інтернеті (через хостінг-Публікація в Інтернеті (через хостінг- провайдерів)провайдерів) 7.7. Тестування сайтаТестування сайта 8.8. Популяризація сайтаПопуляризація сайта 9.9. Супровід сайта (оновлення,Супровід сайта (оновлення, доповнення, редизайн)доповнення, редизайн)
  • 6. Веб-дизайн – це дизайн, обВеб-дизайн – це дизайн, об’’єктамиєктами якого є сторінки веб-сайтівякого є сторінки веб-сайтів Основні принципи дизайнуОсновні принципи дизайну КомпозиціяКомпозиція КолористикаКолористика ЕргономікаЕргономіка
  • 7. Стилі дизайну сайтівСтилі дизайну сайтів За кольоровою гамоюЗа кольоровою гамою Темний;Темний; Світлий;Світлий; Однокольоровий;Однокольоровий; РізнокольоровийРізнокольоровий За тематичноюЗа тематичною ознакоюознакою Стиль “Ретро”Стиль “Ретро” Стиль “Гранж”Стиль “Гранж” ФутуристичнийФутуристичний стильстиль Мультяшний стильМультяшний стиль Журнальний стильЖурнальний стиль ІншіІнші
  • 8. Правила оформлення веб-сторінокПравила оформлення веб-сторінок  Оберіть кольорову гаму (2-3 кольори);Оберіть кольорову гаму (2-3 кольори);  Обирайте контрастні кольори для тексту та фону;Обирайте контрастні кольори для тексту та фону;  Розбивайте текст на абзаци, між якими зробітьРозбивайте текст на абзаци, між якими зробіть відступи;відступи;  Виберіть розмір та вид шрифту;Виберіть розмір та вид шрифту;  Заголовки по центру, основний текст – по ширині;Заголовки по центру, основний текст – по ширині;  Використовуйте таблиці для структурування тексту;Використовуйте таблиці для структурування тексту;  Не зловживайте стороннім оздобленням;Не зловживайте стороннім оздобленням;  Зробіть гіперпосилання між сторінками;Зробіть гіперпосилання між сторінками;  Зробіть логотип сайта для гіперпосилань;Зробіть логотип сайта для гіперпосилань;  Створіть мапу сайта.Створіть мапу сайта.