Презентация на тему: СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ

Реклама. Продолжение ниже
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ
1/33
Средняя оценка: 4.2/5 (всего оценок: 10)
Код скопирован в буфер обмена
Скачать (1976 Кб)
Реклама. Продолжение ниже
1

Первый слайд презентации

СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ

Изображение слайда
Изображение для работы со слайдом
1/2
2

Слайд 2

Ключевые слова структура сайта навигация оформление сайта шаблон страницы сайта хостинг

Изображение слайда
Изображение для работы со слайдом
1/2
3

Слайд 3

Технология создания сайта Язык разметки гипертекста HTML (Hyper Text Markup Language) Текстовый редактор Визуальный HTML- редактор, конструктор сайтов Текст размечают специальными метками – тегами Документ сохраняют как Web- страницу Microsoft FrontPage uCoz, Сайткрафт и др. Способы создания сайта

Изображение слайда
Изображение для работы со слайдом
1/2
4

Слайд 4

Создание сайта Web-дизайнер – специалист, проектирующий структуру Web-сайта, подбирающий способы подачи информации и выполняющий художественное оформление Web-проекта. Создадим сайт школьного творческого объединения «Компьютерная графика».

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/4
5

Слайд 5

Содержание и структура сайта Содержание сайта должно отражать творческую жизнь участников объединения, привлекать внимание единомышленников. Структура (план) сайта – разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними. Новости и объявления Галерея Личные страницы Полезные ссылки Растровая графика Векторная графика Сканография Руководитель Ученик 1 Ученик 2 Главная страница Иерархическая структура сайта

Изображение слайда
Изображение для работы со слайдом
1/2
6

Слайд 6

Оформление сайта На главной странице размещают название сайта, тематическое графическое изображение, короткий текст с описанием содержания сайта, главное меню – ссылки на основные разделы сайта.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/5
7

Слайд 7

Оформление сайта Каждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех же местах. Это: заголовок сайта, расположенный в самом верху страницы; главное меню, как правило, размещаемое в левой части страницы. Название сайта Название страницы Поле ввода информации Графика Меню Фон Координаты Примерный шаблон страниц сайта

Изображение слайда
Изображение для работы со слайдом
1/2
Реклама. Продолжение ниже
8

Слайд 8

Оформление сайта Не ставьте точку в названиях сайта и страниц, если они состоят из одного предложения Названия пунктов меню делайте краткими Не выбирайте для страниц пёстрый фон Не размещайте на странице слишком много информационных и художественных блоков Не пишите слишком длинных текстов В каждом абзаце используйте одни и те же приёмы форматирования Рекомендации при наполнении страниц сайта информационными материалами

Изображение слайда
Изображение для работы со слайдом
1/2
9

Слайд 9

Тестирование сайта Тестирование сайта – проверка того, что сайт правильно отображается разными браузерами: тексты хорошо читаются на выбранном фоне, рисунки расположены на своих местах, гиперссылки обеспечивают правильные переходы. Тестирование проводят перед размещением сайта в сети Интернет.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
Изображение для работы со слайдом
1/4
10

Слайд 10

Размещение сайта в Интернет Хостинг – услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
11

Слайд 11

Размещение сайта в Интернете http://www.70mb.ru/ - бесплатный хостинг

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
12

Слайд 12

http://www.1gb.ru/ - платный хостинг Размещение сайта в Интернете

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
13

Слайд 13

http://guru-host.ru/free_hosting.php - бесплатный хостинг Размещение сайта в Интернете

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
14

Слайд 14

http://www.ascont.ru/constructor-and-hosting - платный хостинг Размещение сайта в Интернете

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
Реклама. Продолжение ниже
15

Слайд 15

Что выбрать? Платным хостингом пользуются крупные компании. Они получают удобное для прочтения и запоминания доменное имя второго уровня, которое может совпадать с названием компании. Частные лица и небольшие компании пользуются бесплатным хостингом. Ограничения: небольшое дисковое пространство, ограничение размера отдельного файла, доменное имя только третьего уровня и т. д. Главный недостаток - на страницы вашего сайта без вашего согласия добавляется коммерческая реклама. Список серверов, предоставляющих бесплатный хостинг, можно получить поиском по запросу «бесплатный хостинг ».

Изображение слайда
Изображение для работы со слайдом
Изображение для работы со слайдом
1/3
16

Слайд 16

Самое главное Структура (план) сайта – разбиение общего содержания на смысловые разделы и отдельные страницы с указанием связей между ними. Представление структуры сайта в виде графа обеспечивает наглядное представление содержания сайта и помогает организовать навигацию – переходы с одной страницы сайта на другую. Шаблон страницы – это схема страницы, на которой представлены элементы, имеющиеся на страницах сайта. Использование шаблонов страниц помогает выдержать единый стиль оформления сайта. Хостинг – услуга по размещению сайта на сервере, постоянно находящемся в сети Интернет; хостинг может быть как платным, так и бесплатным.

Изображение слайда
Изображение для работы со слайдом
1/2
17

Слайд 17

Вопросы и задания С помощью каких инструментов можно создавать сайты? Что такое структура сайта? Продумайте и изобразите в виде графа структуру одного из следующих сайтов: а) «Наш класс»; б) «Моя семья»; в) «Информатика».

Изображение слайда
Изображение для работы со слайдом
1/2
18

Слайд 18

Вопросы и задания Назовите известный вам сервер Интернета, обеспечивающий пользователям бесплатный хостинг сайтов. Что является основным недостатком бесплатного хостинга? С какой целью проводится тестирование сайта? Какие рекомендации следует учитывать при наполнении страниц сайта информационными материалами? Перечислите основные элементы, размещаемые на страницах сайта.

Изображение слайда
Изображение для работы со слайдом
1/2
19

Слайд 19

Опорный конспект Способы создания сайта Язык разметки гипертекста HTML Текстовый редактор Microsoft Word HTML- редактор, конструктор сайтов Первоначально следует продумать содержание и структуру сайта Перед размещением сайта в сети Интернет следует провести его тестирование. При наполнении страниц сайта информационными материалами следует придерживаться определённых рекомендаций

Изображение слайда
Изображение для работы со слайдом
1/2
20

Слайд 20

Язык разметки гипертекста HTML Основные понятия Гипертекст – это текст, в котором содержаться ссылки на другие документы или переходы внутри исходного документа. Это один из основных способов размещения информации в глобальной сети Internet и родственных ей сетях intranet. Web-страница – это электронный документ, в котором кроме текста содержатся специальные команды форматирования, а также встроенные объекты (рисунки, аудио- и видеоклипы и др.).

Изображение слайда
Изображение для работы со слайдом
1/2
21

Слайд 21

Язык разметки гипертекста HTML Основные понятия Браузер – специальная программа для просмотра Web-страницы (например Internet Explorer, Mozilla Firefox, Opera и др.). HTTP ( Hyper Text Transfer Protocol) – протокол передачи гипертекста для доступа к Web -страницам. Web -сайт – совокупность web-документов ( web- страниц), объединенных по какому-либо признаку (адресом сервера, темой, оформлением).

Изображение слайда
Изображение для работы со слайдом
1/2
22

Слайд 22

Язык разметки гипертекста HTML Основные понятия HTML (HyperText Markup Language) – язык гипертекстовой разметки. Указания, записанные на HTML, интерпретируются браузером. Обычно файл Веб-страницы имеет расширение.html или.htm.

Изображение слайда
Изображение для работы со слайдом
1/2
23

Слайд 23

Тег – элемент языка разметки гипертекста. Для обозначения тегов используется угловые скобки < тег >. Виды тегов: 1) парные, которые выделяют блок текста, также называются еще контейнером. Контейнер требует закрывающего тега, обозначаемого </тег>. 2) одиночные. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна. Язык разметки гипертекста HTML Тег

Изображение слайда
Изображение для работы со слайдом
1/2
24

Слайд 24

Пример 1. Использование парных тегов (контейнера) Запись в коде: <b>Полужирный шрифт</b> в тексте. Результат в браузере: Полужирный шрифт в тексте. Пример 2. Использование одиночных тегов Запись в коде: Первая строка текста. <br> Вторая строка текста. Результат в браузере: Первая строка текста. Вторая строка текста. Язык разметки гипертекста HTML Тег

Изображение слайда
Изображение для работы со слайдом
1/2
25

Слайд 25

Пример 3. Правильное сочетание тегов Запись в коде: <b><i>Полужирный курсивный текст</i></b> Пример 4. Неправильное сочетание тегов Запись в коде: <i><b>Полужирный курсивный текст</i></b> Язык разметки гипертекста HTML Тег

Изображение слайда
Изображение для работы со слайдом
1/2
26

Слайд 26

Гипертекст – текст с управляющими элементами языка разметки гипертекста ( тегами ). Язык разметки гипертекста HTML Гипертекст

Изображение слайда
Изображение для работы со слайдом
1/2
27

Слайд 27

HTML-документ состоит из двух разделов – заголовка (HEAD) и тела документа (BODY). Раздел заголовка документа (HEAD) определяет заголовок веб-страницы и содержит служебную информацию. Раздел тела документа (BODY) хранит видимое содержание страницы. Язык разметки гипертекста HTML Структура документа

Изображение слайда
Изображение для работы со слайдом
1/2
28

Слайд 28

<html> <head> <title> Заголовок страницы</ title> Служебная информация </head> <body> Видимое содержание страницы </body> </html> Язык разметки гипертекста HTML HTML документ

Изображение слайда
Изображение для работы со слайдом
1/2
29

Слайд 29

форматирование; верстка таблиц; верстка списков; формирование гиперссылок; вставка изображений. Язык разметки гипертекста HTML Типы тегов

Изображение слайда
Изображение для работы со слайдом
1/2
30

Слайд 30

Форматирование текста – средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. Язык разметки гипертекста HTML Форматирование текста

Изображение слайда
Изображение для работы со слайдом
1/2
31

Слайд 31

Язык разметки гипертекста HTML Начертания и эффекты текста Код HTML Описание < b >Текст</ b > Полужирный текст < i >Текст</ i > Курсивное начертание текста < u >Текст</ u > Подчеркнутый текст < sup >Текст</ sup > Верхний индекс < sub >Текст</ sub > Нижний индекс < strike >Текст</ strike > Зачеркнутый текст < pre >Текст</ pre > Текст пишется как есть, включая все пробелы < em >Текст</ em > Курсивный текст < strong >Текст</ strong > Полужирный текст Строка1 < br > Строка2 Перевод курсора в новую строку

Изображение слайда
Изображение для работы со слайдом
1/2
32

Слайд 32

Язык разметки гипертекста HTML Начертания и эффекты текста Пример 1. Жирный курсивный текст Результат в браузере: "Привет" – мое приветствие. Запись в коде: <b><i>"Привет"</i></b> – мое приветствие. Пример 2. Создание нижнего индекса Результат в браузере: Формула серной кислоты: H 2 SO 4 Запись в коде: <b> Формула серной кислоты:</ b> <i>H<sub>2</sub>SO<sub>4</sub></i>

Изображение слайда
Изображение для работы со слайдом
1/2
33

Последний слайд презентации: СОЗДАНИЕ Web- сайта КОММУНИКАЦИОННЫЕ ТЕХНОЛОГИИ

Язык разметки гипертекста HTML Задание 1) В программе «Блокнот» набрать следующий текст, сохранив файл с именем index.html в формате Файл "HTML". <HTML> <HEAD> <TITLE> Моя первая страница </TITLE> </HEAD> <BODY> Это моя первая страница </BODY> </HTML> 2) Открыть файл с помощью браузера. 3) Внести изменения в раздел BODY, добавив теги для начертания и эффектов текста. 4) Проверить внесенные изменения в браузере.

Изображение слайда
Изображение для работы со слайдом
1/2
Реклама. Продолжение ниже