SlideShare a Scribd company logo
1 of 19
СОЗДАНИЕ Web-сайта
КОММУНИКАЦИОННЫЕ
ТЕХНОЛОГИИ
Ключевые слова
•структура сайта
•навигация
•оформление сайта
•шаблон страницы сайта
•хостинг
Технология создания сайта
Язык разметки
гипертекста HTML
(Hyper Text Markup Language)
Текстовый
редактор
Визуальный
HTML-редактор,
конструктор сайтов
Текст размечают
специальными
метками – тегами
Документ
сохраняют как
Web-страницу
Microsoft FrontPage
uCoz, Сайткрафт
и др.
Способы создания сайта
Создание сайта
Web-дизайнер - специалист,
проектирующий структуру Web-
сайта, подбирающий способы
подачи информации и
выполняющий художественное
оформление Web-проекта.
Создадим сайт школьного творческого объединения
«Компьютерная графика».
Содержание и структура сайта
Содержание сайта должно отражать творческую жизнь
участников объединения, привлекать внимание
единомышленников.
Структура (план) сайта - разбиение общего содержания
на смысловые разделы и отдельные страницы с указанием
связей между ними.
Новости и
объявления
Галерея
Личные
страницы
Полезные
ссылки
Растровая
графика
Векторная
графика
Сканография
Руководитель
Ученик 1
Ученик 2
Главная страница
Иерархическая структура сайта
Оформление сайта
На главной странице размещают название сайта,
тематическое графическое изображение, короткий текст с
описанием содержания сайта, главное меню - ссылки на
основные разделы сайта.
Оформление сайта
Каждая страница сайта, как правило, имеет несколько
постоянных элементов, которые всегда находятся на одних
и тех же местах. Это:
• заголовок сайта, расположенный в самом верху
страницы;
• главное меню, как правило, размещаемое в левой части
страницы.
Название сайта
Название страницы
Поле ввода информации
Графика
Меню
Фон
Координаты
Примерный шаблон страниц сайта
Оформление сайта
Не ставьте точку в названиях сайта и страниц,
если они состоят из одного предложения
Названия пунктов меню делайте краткими
Не выбирайте для страниц пёстрый фон
Не размещайте на странице слишком много
информационных и художественных блоков
Не пишите слишком длинных текстов
В каждом абзаце используйте
одни и те же приёмы форматирования
Рекомендации при наполнении страниц сайта
информационными материалами
Тестирование сайта
Тестирование сайта – проверка того, что сайт правильно
отображается разными браузерами:
•тексты хорошо читаются на выбранном фоне,
•рисунки расположены на своих местах,
•гиперссылки обеспечивают правильные переходы.
Тестирование проводят перед размещением сайта в сети
Интернет.
Размещение сайта в Интернет
Хостинг - услуга по размещению сайта на сервере,
постоянно находящемся в сети Интернет; хостинг может быть
как платным, так и бесплатным.
Размещение сайта в Интернете
http://www.70mb.ru/ - сайт «Бесплатный хостинг»
http://www.1gb.ru/ - сайт платный хостинг «1Gb»
Размещение сайта в Интернете
http://guru-host.ru/free_hosting.php - сайт «Guru-host.ru»
Размещение сайта в Интернете
http://www.ascont.ru/constructor-and-hosting - сайт платный
хостинг «ASCONT»
Размещение сайта в Интернете
Что выбрать?
Платным хостингом пользуются крупные компании. Они
получают удобное для прочтения и запоминания доменное
имя второго уровня, которое может совпадать с названием
компании.
Частные лица и небольшие компании пользуются
бесплатным хостингом. Ограничения: небольшое дисковое
пространство, ограничение размера отдельного файла,
доменное имя только третьего уровня и т. д. Главный
недостаток - на страницы вашего сайта без вашего согласия
добавляется коммерческая реклама.
Список серверов,
предоставляющих бесплатный
хостинг, можно получить поиском
по запросу «бесплатный хостинг».
Самое главное
Структура (план) сайта - разбиение общего содержания на
смысловые разделы и отдельные страницы с указанием связей
между ними.
Представление структуры сайта в виде графа обеспечивает
наглядное представление содержания сайта и помогает организовать
навигацию - переходы с одной страницы сайта на другую.
Шаблон страницы - это схема страницы, на которой
представлены элементы, имеющиеся на страницах сайта.
Использование шаблонов страниц помогает выдержать единый стиль
оформления сайта.
Хостинг - услуга по размещению сайта на сервере, постоянно
находящемся в сети Интернет; хостинг может быть как платным, так и
бесплатным.
Вопросы и задания
С помощью каких инструментов можно создавать сайты?Что такое структура сайта?Продумайте и изобразите в виде графа структуру одного
из следующих сайтов:
а) «Наш класс»;
б) «Моя семья»;
в) «Информатика».
Перечислите основные элементы, размещаемые на
страницах сайта.
Какие рекомендации следует учитывать при наполнении
страниц сайта информационными материалами?
С какой целью проводится тестирование сайта?Что является основным недостатком бесплатного
хостинга?
Назовите известный вам сервер Интернета,
обеспечивающий пользователям бесплатный хостинг
сайтов.
Опорный конспект
Способы создания сайтаСпособы создания сайта
Язык разметки
гипертекста HTML
Язык разметки
гипертекста HTML
Текстовый редактор
Microsoft Word
Текстовый редактор
Microsoft Word
HTML-редактор,
конструктор сайтов
HTML-редактор,
конструктор сайтов
Первоначально следует продумать содержание и
структуру сайта
Перед размещением сайта в сети Интернет следует
провести его тестирование.
При наполнении страниц сайта информационными
материалами следует придерживаться определённых
рекомендаций
Источники информации
1. http://img.megaobzor.com/real/news/hostingsites.jpg - хостинг
2. http://kokvik.net/p1aa1.html - сайт Видеоуроки по информатике 8 класс
3. http://www.70mb.ru/ - сайт бесплатный хостинг «70mb»
4. http://guru-host.ru/free_hosting.php - сайт «Guru-host.ru»
5. http://www.ascont.ru/constructor-and-hosting - платный хостинг «ASCONT»
6. http://www.1gb.ru/ - сайт платный хостинг «1Gb»

More Related Content

Similar to Создание Web-сайта

Разработка первого веб сайта по инвалидности
Разработка первого веб сайта по инвалидностиРазработка первого веб сайта по инвалидности
Разработка первого веб сайта по инвалидностиSelf-employed
 
Разработка сайта
Разработка сайта Разработка сайта
Разработка сайта Tatsiana Ramanchik
 
Продвижение отраслевого сайта. Практикум
Продвижение отраслевого сайта. ПрактикумПродвижение отраслевого сайта. Практикум
Продвижение отраслевого сайта. Практикумimba_ru
 
2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-Amberita
 
Введение в SEO
Введение в SEOВведение в SEO
Введение в SEOElena Lomova
 
Готовим сайты на 1С-Битрикс
Готовим сайты на 1С-БитриксГотовим сайты на 1С-Битрикс
Готовим сайты на 1С-БитриксIRCIT
 
Seo проектирование сайта
Seo проектирование сайтаSeo проектирование сайта
Seo проектирование сайтаИрина Шамина
 
1С-Битрикс» - платформа для создания и управления корпоративным сайтом
1С-Битрикс» - платформа для создания и управления корпоративным сайтом1С-Битрикс» - платформа для создания и управления корпоративным сайтом
1С-Битрикс» - платформа для создания и управления корпоративным сайтомborovoystudio
 
презентация сайтостроение
презентация сайтостроениепрезентация сайтостроение
презентация сайтостроениеPalados
 
Техника и тактика работы с поисковиком и посетителем / Евгений Трофименко 14 ...
Техника и тактика работы с поисковиком и посетителем / Евгений Трофименко 14 ...Техника и тактика работы с поисковиком и посетителем / Евгений Трофименко 14 ...
Техника и тактика работы с поисковиком и посетителем / Евгений Трофименко 14 ...Eugene Trofimenko
 
333 информатика. 11кл. заборовский, пупцев-минск, 2010 -150с
333  информатика. 11кл. заборовский, пупцев-минск, 2010 -150с333  информатика. 11кл. заборовский, пупцев-минск, 2010 -150с
333 информатика. 11кл. заборовский, пупцев-минск, 2010 -150сpsvayy
 
Cоветы по созданию библиотечного сайта
Cоветы по созданию библиотечного сайтаCоветы по созданию библиотечного сайта
Cоветы по созданию библиотечного сайтаNina Panasenko
 
Практикум Web программирование
Практикум Web программированиеПрактикум Web программирование
Практикум Web программированиеRauan Ibraikhan
 
«1С-Битрикс: Управление сайтом» 15.5
«1С-Битрикс: Управление сайтом» 15.5«1С-Битрикс: Управление сайтом» 15.5
«1С-Битрикс: Управление сайтом» 15.51С-Битрикс
 

Similar to Создание Web-сайта (20)

Разработка первого веб сайта по инвалидности
Разработка первого веб сайта по инвалидностиРазработка первого веб сайта по инвалидности
Разработка первого веб сайта по инвалидности
 
Разработка сайта
Разработка сайта Разработка сайта
Разработка сайта
 
Dev
DevDev
Dev
 
Продвижение отраслевого сайта. Практикум
Продвижение отраслевого сайта. ПрактикумПродвижение отраслевого сайта. Практикум
Продвижение отраслевого сайта. Практикум
 
2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-
 
Введение в SEO
Введение в SEOВведение в SEO
Введение в SEO
 
Готовим сайты на 1С-Битрикс
Готовим сайты на 1С-БитриксГотовим сайты на 1С-Битрикс
Готовим сайты на 1С-Битрикс
 
Seo проектирование сайта
Seo проектирование сайтаSeo проектирование сайта
Seo проектирование сайта
 
1С-Битрикс» - платформа для создания и управления корпоративным сайтом
1С-Битрикс» - платформа для создания и управления корпоративным сайтом1С-Битрикс» - платформа для создания и управления корпоративным сайтом
1С-Битрикс» - платформа для создания и управления корпоративным сайтом
 
презентация сайтостроение
презентация сайтостроениепрезентация сайтостроение
презентация сайтостроение
 
Техника и тактика работы с поисковиком и посетителем / Евгений Трофименко 14 ...
Техника и тактика работы с поисковиком и посетителем / Евгений Трофименко 14 ...Техника и тактика работы с поисковиком и посетителем / Евгений Трофименко 14 ...
Техника и тактика работы с поисковиком и посетителем / Евгений Трофименко 14 ...
 
WordPress
WordPressWordPress
WordPress
 
333 информатика. 11кл. заборовский, пупцев-минск, 2010 -150с
333  информатика. 11кл. заборовский, пупцев-минск, 2010 -150с333  информатика. 11кл. заборовский, пупцев-минск, 2010 -150с
333 информатика. 11кл. заборовский, пупцев-минск, 2010 -150с
 
Bitrix cms 14
Bitrix cms 14Bitrix cms 14
Bitrix cms 14
 
Cоветы по созданию библиотечного сайта
Cоветы по созданию библиотечного сайтаCоветы по созданию библиотечного сайта
Cоветы по созданию библиотечного сайта
 
Практикум Web программирование
Практикум Web программированиеПрактикум Web программирование
Практикум Web программирование
 
О продукте
О продуктеО продукте
О продукте
 
Web дизайн
Web дизайнWeb дизайн
Web дизайн
 
веб дизайн
веб дизайнвеб дизайн
веб дизайн
 
«1С-Битрикс: Управление сайтом» 15.5
«1С-Битрикс: Управление сайтом» 15.5«1С-Битрикс: Управление сайтом» 15.5
«1С-Битрикс: Управление сайтом» 15.5
 

More from Andrey Dolinin

правила сетевого этикета
правила сетевого этикетаправила сетевого этикета
правила сетевого этикетаAndrey Dolinin
 
история вычислительной техники
история вычислительной техникиистория вычислительной техники
история вычислительной техникиAndrey Dolinin
 
информационная культура
информационная культураинформационная культура
информационная культураAndrey Dolinin
 
информационная безопасность
информационная безопасностьинформационная безопасность
информационная безопасностьAndrey Dolinin
 
логика к.поляков
логика к.поляковлогика к.поляков
логика к.поляковAndrey Dolinin
 
история логики и основные логические операции
история логики и основные логические операцииистория логики и основные логические операции
история логики и основные логические операцииAndrey Dolinin
 
представление чисел в памяти компьютера
представление чисел в памяти компьютерапредставление чисел в памяти компьютера
представление чисел в памяти компьютераAndrey Dolinin
 
правила перевода чисел в позиционных системах счисления
правила перевода чисел в  позиционных системах  счисленияправила перевода чисел в  позиционных системах  счисления
правила перевода чисел в позиционных системах счисленияAndrey Dolinin
 
12. задача о напитках
12. задача о напитках12. задача о напитках
12. задача о напиткахAndrey Dolinin
 
12. планируем работу в графическом редакторе
12. планируем работу в графическом редакторе12. планируем работу в графическом редакторе
12. планируем работу в графическом редактореAndrey Dolinin
 
12. обработка информации
12. обработка информации12. обработка информации
12. обработка информацииAndrey Dolinin
 
11. компьютерная графика
11. компьютерная графика11. компьютерная графика
11. компьютерная графикаAndrey Dolinin
 

More from Andrey Dolinin (20)

23 24-211220132336
23 24-21122013233623 24-211220132336
23 24-211220132336
 
правила сетевого этикета
правила сетевого этикетаправила сетевого этикета
правила сетевого этикета
 
история вычислительной техники
история вычислительной техникиистория вычислительной техники
история вычислительной техники
 
информационная культура
информационная культураинформационная культура
информационная культура
 
информационная безопасность
информационная безопасностьинформационная безопасность
информационная безопасность
 
Javascript 1
Javascript 1Javascript 1
Javascript 1
 
Css
CssCss
Css
 
логика к.поляков
логика к.поляковлогика к.поляков
логика к.поляков
 
история логики и основные логические операции
история логики и основные логические операцииистория логики и основные логические операции
история логики и основные логические операции
 
представление чисел в памяти компьютера
представление чисел в памяти компьютерапредставление чисел в памяти компьютера
представление чисел в памяти компьютера
 
правила перевода чисел в позиционных системах счисления
правила перевода чисел в  позиционных системах  счисленияправила перевода чисел в  позиционных системах  счисления
правила перевода чисел в позиционных системах счисления
 
Microsoft access 2007
Microsoft access 2007Microsoft access 2007
Microsoft access 2007
 
Microsoft excel 2007
Microsoft excel 2007Microsoft excel 2007
Microsoft excel 2007
 
Word
WordWord
Word
 
Microsoft word 2007
Microsoft word 2007Microsoft word 2007
Microsoft word 2007
 
Microsoft access 2007
Microsoft access 2007Microsoft access 2007
Microsoft access 2007
 
12. задача о напитках
12. задача о напитках12. задача о напитках
12. задача о напитках
 
12. планируем работу в графическом редакторе
12. планируем работу в графическом редакторе12. планируем работу в графическом редакторе
12. планируем работу в графическом редакторе
 
12. обработка информации
12. обработка информации12. обработка информации
12. обработка информации
 
11. компьютерная графика
11. компьютерная графика11. компьютерная графика
11. компьютерная графика
 

Создание Web-сайта

  • 2. Ключевые слова •структура сайта •навигация •оформление сайта •шаблон страницы сайта •хостинг
  • 3. Технология создания сайта Язык разметки гипертекста HTML (Hyper Text Markup Language) Текстовый редактор Визуальный HTML-редактор, конструктор сайтов Текст размечают специальными метками – тегами Документ сохраняют как Web-страницу Microsoft FrontPage uCoz, Сайткрафт и др. Способы создания сайта
  • 4. Создание сайта Web-дизайнер - специалист, проектирующий структуру Web- сайта, подбирающий способы подачи информации и выполняющий художественное оформление Web-проекта. Создадим сайт школьного творческого объединения «Компьютерная графика».
  • 5. Содержание и структура сайта Содержание сайта должно отражать творческую жизнь участников объединения, привлекать внимание единомышленников. Структура (план) сайта - разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними. Новости и объявления Галерея Личные страницы Полезные ссылки Растровая графика Векторная графика Сканография Руководитель Ученик 1 Ученик 2 Главная страница Иерархическая структура сайта
  • 6. Оформление сайта На главной странице размещают название сайта, тематическое графическое изображение, короткий текст с описанием содержания сайта, главное меню - ссылки на основные разделы сайта.
  • 7. Оформление сайта Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это: • заголовок сайта, расположенный в самом верху страницы; • главное меню, как правило, размещаемое в левой части страницы. Название сайта Название страницы Поле ввода информации Графика Меню Фон Координаты Примерный шаблон страниц сайта
  • 8. Оформление сайта Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения Названия пунктов меню делайте краткими Не выбирайте для страниц пёстрый фон Не размещайте на странице слишком много информационных и художественных блоков Не пишите слишком длинных текстов В каждом абзаце используйте одни и те же приёмы форматирования Рекомендации при наполнении страниц сайта информационными материалами
  • 9. Тестирование сайта Тестирование сайта – проверка того, что сайт правильно отображается разными браузерами: •тексты хорошо читаются на выбранном фоне, •рисунки расположены на своих местах, •гиперссылки обеспечивают правильные переходы. Тестирование проводят перед размещением сайта в сети Интернет.
  • 10. Размещение сайта в Интернет Хостинг - услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.
  • 11. Размещение сайта в Интернете http://www.70mb.ru/ - сайт «Бесплатный хостинг»
  • 12. http://www.1gb.ru/ - сайт платный хостинг «1Gb» Размещение сайта в Интернете
  • 13. http://guru-host.ru/free_hosting.php - сайт «Guru-host.ru» Размещение сайта в Интернете
  • 14. http://www.ascont.ru/constructor-and-hosting - сайт платный хостинг «ASCONT» Размещение сайта в Интернете
  • 15. Что выбрать? Платным хостингом пользуются крупные компании. Они получают удобное для прочтения и запоминания доменное имя второго уровня, которое может совпадать с названием компании. Частные лица и небольшие компании пользуются бесплатным хостингом. Ограничения: небольшое дисковое пространство, ограничение размера отдельного файла, доменное имя только третьего уровня и т. д. Главный недостаток - на страницы вашего сайта без вашего согласия добавляется коммерческая реклама. Список серверов, предоставляющих бесплатный хостинг, можно получить поиском по запросу «бесплатный хостинг».
  • 16. Самое главное Структура (план) сайта - разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними. Представление структуры сайта в виде графа обеспечивает наглядное представление содержания сайта и помогает организовать навигацию - переходы с одной страницы сайта на другую. Шаблон страницы - это схема страницы, на которой представлены элементы, имеющиеся на страницах сайта. Использование шаблонов страниц помогает выдержать единый стиль оформления сайта. Хостинг - услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.
  • 17. Вопросы и задания С помощью каких инструментов можно создавать сайты?Что такое структура сайта?Продумайте и изобразите в виде графа структуру одного из следующих сайтов: а) «Наш класс»; б) «Моя семья»; в) «Информатика». Перечислите основные элементы, размещаемые на страницах сайта. Какие рекомендации следует учитывать при наполнении страниц сайта информационными материалами? С какой целью проводится тестирование сайта?Что является основным недостатком бесплатного хостинга? Назовите известный вам сервер Интернета, обеспечивающий пользователям бесплатный хостинг сайтов.
  • 18. Опорный конспект Способы создания сайтаСпособы создания сайта Язык разметки гипертекста HTML Язык разметки гипертекста HTML Текстовый редактор Microsoft Word Текстовый редактор Microsoft Word HTML-редактор, конструктор сайтов HTML-редактор, конструктор сайтов Первоначально следует продумать содержание и структуру сайта Перед размещением сайта в сети Интернет следует провести его тестирование. При наполнении страниц сайта информационными материалами следует придерживаться определённых рекомендаций
  • 19. Источники информации 1. http://img.megaobzor.com/real/news/hostingsites.jpg - хостинг 2. http://kokvik.net/p1aa1.html - сайт Видеоуроки по информатике 8 класс 3. http://www.70mb.ru/ - сайт бесплатный хостинг «70mb» 4. http://guru-host.ru/free_hosting.php - сайт «Guru-host.ru» 5. http://www.ascont.ru/constructor-and-hosting - платный хостинг «ASCONT» 6. http://www.1gb.ru/ - сайт платный хостинг «1Gb»