Разделы презентаций


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

Содержание

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

Слайды и текст этой презентации

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

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

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

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

Слайд 3Технология создания сайта
Язык разметки
гипертекста HTML
(Hyper Text Markup Language)
Текстовый
редактор
Визуальный
HTML-редактор,


конструктор сайтов
Текст размечают
специальными
метками – тегами
Документ
сохраняют как
Web-страницу
Microsoft FrontPage
uCoz, Сайткрафт и

др.

Способы создания сайта

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

Слайд 4Создание сайта
Web-дизайнер – специалист, проектирующий структуру Web-сайта, подбирающий способы подачи

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

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

Слайд 5Содержание и структура сайта
Содержание сайта должно отражать творческую жизнь участников

объединения, привлекать внимание единомышленников.
Структура (план) сайта – разбиение общего содержания

на смысловые разделы и отдельные страницы с указанием связей между ними.

Новости и
объявления

Галерея

Личные
страницы

Полезные
ссылки

Растровая
графика

Векторная
графика

Сканография

Руководитель

Ученик 1

Ученик 2

Главная страница

Иерархическая структура сайта

Содержание и структура сайтаСодержание сайта должно отражать творческую жизнь участников объединения, привлекать внимание единомышленников.Структура (план) сайта –

Слайд 6Оформление сайта
На главной странице размещают название сайта, тематическое графическое изображение,

короткий текст с описанием содержания сайта, главное меню – ссылки

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

Слайд 7Оформление сайта
Каждая страница сайта, как правило, имеет несколько постоянных элементов,

которые всегда находятся на одних и тех же местах. Это:
заголовок

сайта, расположенный в самом верху страницы;
главное меню, как правило, размещаемое в левой части страницы.

Название сайта

Название страницы

Поле ввода информации

Графика

Меню

Фон

Координаты

Примерный шаблон страниц сайта

Оформление сайтаКаждая страница сайта, как правило, имеет несколько постоянных элементов, которые всегда находятся на одних и тех

Слайд 8Оформление сайта
Не ставьте точку в названиях сайта и страниц,
если

они состоят из одного предложения
Названия пунктов меню делайте краткими
Не

выбирайте для страниц пёстрый фон

Не размещайте на странице слишком много
информационных и художественных блоков

Не пишите слишком длинных текстов

В каждом абзаце используйте
одни и те же приёмы форматирования

Рекомендации при наполнении страниц сайта
информационными материалами

Оформление сайтаНе ставьте точку в названиях сайта и страниц, если они состоят из одного предложения Названия пунктов

Слайд 9Тестирование сайта
Тестирование сайта – проверка того, что сайт правильно отображается

разными браузерами:
тексты хорошо читаются на выбранном фоне,
рисунки расположены

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

Слайд 10Размещение сайта в Интернет
Хостинг – услуга по размещению сайта на

сервере, постоянно находящемся в сети Интернет; хостинг может быть как

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

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

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

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

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

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

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

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

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

Слайд 15Что выбрать?
Платным хостингом пользуются крупные компании. Они получают удобное для

прочтения и запоминания доменное имя второго уровня, которое может совпадать

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

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

Что выбрать?Платным хостингом пользуются крупные компании. Они получают удобное для прочтения и запоминания доменное имя второго уровня,

Слайд 16Самое главное
Структура (план) сайта – разбиение общего содержания на смысловые

разделы и отдельные страницы с указанием связей между ними.
Представление структуры

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

Слайд 17Вопросы и задания
С помощью каких инструментов можно создавать сайты?
Что такое

структура сайта?
Продумайте и изобразите в виде графа структуру одного из

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

Слайд 18Вопросы и задания
Назовите известный вам сервер Интернета, обеспечивающий пользователям бесплатный

хостинг сайтов.
Что является основным недостатком бесплатного хостинга?
С какой целью проводится

тестирование сайта?

Какие рекомендации следует учитывать при наполнении страниц сайта информационными материалами?

Перечислите основные элементы, размещаемые на страницах сайта.

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

Слайд 19Опорный конспект
Способы создания сайта
Язык разметки
гипертекста HTML
Текстовый редактор
Microsoft Word
HTML-редактор,
конструктор сайтов
Первоначально

следует продумать содержание и структуру сайта
Перед размещением сайта в сети

Интернет следует провести его тестирование.

При наполнении страниц сайта информационными материалами следует придерживаться определённых рекомендаций

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

Слайд 20Язык разметки гипертекста HTML
Основные понятия
Гипертекст – это текст, в котором

содержаться ссылки на другие документы или переходы внутри исходного документа.

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

Язык разметки гипертекста HTMLОсновные понятияГипертекст – это текст, в котором содержаться ссылки на другие документы или переходы

Слайд 21Язык разметки гипертекста HTML
Основные понятия
Браузер – специальная программа для просмотра

Web-страницы (например Internet Explorer, Mozilla Firefox, Opera и др.).
HTTP (Hyper

Text Transfer Protocol) – протокол передачи гипертекста для доступа к Web-страницам.
Web-сайт – совокупность web-документов (web-страниц), объединенных по какому-либо признаку (адресом сервера, темой, оформлением).


Язык разметки гипертекста HTMLОсновные понятияБраузер – специальная программа для просмотра Web-страницы (например Internet Explorer, Mozilla Firefox, Opera

Слайд 22Язык разметки гипертекста HTML
Основные понятия
HTML (HyperText Markup Language) – язык

гипертекстовой разметки. Указания, записанные на HTML, интерпретируются браузером. Обычно файл Веб-страницы

имеет расширение .html или .htm.

Язык разметки гипертекста HTMLОсновные понятияHTML (HyperText Markup Language) – язык гипертекстовой разметки. Указания, записанные на HTML, интерпретируются

Слайд 23Тег – элемент языка разметки гипертекста. Для обозначения тегов используется угловые

скобки .
Виды тегов:
1) парные, которые выделяют блок текста,

также называются еще контейнером. Контейнер требует закрывающего тега, обозначаемого .
2) одиночные.
Теги нечувствительны к регистру, поэтому запись и эквивалентна.

Язык разметки гипертекста HTML
Тег

Тег – элемент языка разметки гипертекста. Для обозначения тегов используется угловые скобки . Виды тегов: 1) парные,

Слайд 24Пример 1. Использование парных тегов (контейнера) Запись в коде: Полужирный шрифт в

тексте.
Результат в браузере: Полужирный шрифт в тексте.
Пример 2. Использование одиночных тегов

Запись в коде: Первая строка текста.
Вторая строка текста.
Результат в браузере:
Первая строка текста.
Вторая строка текста.

Язык разметки гипертекста HTML
Тег

Пример 1. Использование парных тегов (контейнера) Запись в коде: Полужирный шрифт в тексте.Результат в браузере: Полужирный шрифт

Слайд 25Пример 3. Правильное сочетание тегов Запись в коде: Полужирный курсивный текст
Пример

4. Неправильное сочетание тегов Запись в коде: Полужирный курсивный текст

Язык разметки гипертекста

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

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

Язык

разметки гипертекста HTML
Гипертекст

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

Слайд 27HTML-документ состоит из двух разделов – заголовка (HEAD) и тела

документа (BODY).
Раздел заголовка документа (HEAD) определяет заголовок веб-страницы и

содержит служебную информацию.
Раздел тела документа (BODY) хранит видимое содержание страницы.

Язык разметки гипертекста HTML
Структура документа

HTML-документ состоит из двух разделов – заголовка (HEAD) и тела документа (BODY). Раздел заголовка документа (HEAD) определяет

Слайд 28

Заголовок страницы
Служебная информация


Видимое содержание страницы


Язык разметки гипертекста HTML
HTML документ

Заголовок страницы 		Служебная информация				Видимое содержание страницы	Язык разметки гипертекста HTMLHTML документ

Слайд 29форматирование;
верстка таблиц;
верстка списков;
формирование гиперссылок;
вставка изображений.

Язык разметки гипертекста HTML
Типы тегов

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

Слайд 30Форматирование текста – средства его изменения, такие как выбор начертания

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

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

Слайд 31Язык разметки гипертекста HTML
Начертания и эффекты текста

Язык разметки гипертекста HTMLНачертания и эффекты текста

Слайд 32Язык разметки гипертекста HTML
Начертания и эффекты текста
Пример 1. Жирный курсивный

текст Результат в браузере: "Привет" – мое приветствие. Запись в коде: "Привет" –

мое приветствие.
Пример 2. Создание нижнего индекса Результат в браузере: Формула серной кислоты: H2SO4 Запись в коде: Формула серной кислоты: H2SO4

Язык разметки гипертекста HTMLНачертания и эффекты текстаПример 1. Жирный курсивный текст  Результат в браузере:

Слайд 33Язык разметки гипертекста HTML
Задание
1) В программе «Блокнот» набрать следующий текст,

сохранив файл с именем index.html в формате Файл "HTML".


Моя первая

страница


Это моя первая страница


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

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика