Введение в технологию создания Web-сайтов
презентация к уроку по информатике и икт (8 класс) на тему

Слайд 1

Введение в технологию создания Web -сайтов Старкова Е.Е.

Слайд 2

Содержание Введение Классификация Web -сайтов Этапы разработки Web -сайта Навигационная схема Web -сайта Как правильно регистрировать сайт? Основы HTML Таговая модель документа Структура документа Вставка рисунка

Слайд 3

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

Слайд 4

Понятие web сайта Информация, доступная пользователям Internet , располагается на Web -серверах. Информация организованна в виде Web -сайтов. Web -сайт - это информационный ресурс, состоящий из связанных между собой гипертекстовых документов ( Web -страниц), размещенный на Web -сервере и имеющий индивидуальный адрес Web сайт Страница 1 Страница 2 текст графика, видео, аудио текст графика, видео, аудио

Слайд 5

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

Слайд 6

Навигационная схема Web -сайта Главными задачами при разработке Web -сайта являются четкая организация структуры сайта и определение его информационного наполнения. Выделяют следующие этапы разработки Web -сайта: Планирование Реализация Тестирование Публикация Рекламирование Сопровождение

Слайд 7

Планирование На стадии планирования определяется следующее: цели создания Web -сайта - какие задачи он должен выполнять и на какую аудиторию он рассчитан? Какая информация будет представлена и в каком порядке. Определить кол-во страниц Определить название сайта

Слайд 8

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

Слайд 9

Планирование На остальных страницах необходимо разместить информацию в порядке определяемый различными критериями, например привлекательности.

Слайд 10

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

Слайд 11

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

Слайд 12

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

Слайд 13

Реализация На этом этапе проводится подготовка текстового и графического материала (печать, сканирование). Материал разбивается по файлам в соответствии со структурой. Организуются ссылки между файлами сайта. Рекомендуется создать шаблон-заготовку страницы с основными структурными областями и стилевым оформлением и использовать ее для создания всех страниц узла.

Слайд 14

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

Слайд 15

Реализация При создании Web -страниц необходимо учитывать, что разработанный Вами Web -сайт может выглядеть на компьютерах разных пользователей по-разному. Это зависит от многих параметров – типа браузера клиента, установок операционной системы, аппаратных ресурсов компьютера и т.п. Создание сайта, разработка структуры, размещение материала возможно: В текстовом редакторе (например блокнот) - в ручную С помощью различных средств разработки ( FrontPage, Publisher ) - автоматически

Слайд 16

Тестирование Тестирование состоит из двух этапов: тестирование на работоспособность тестирование на удобство пользования интерфейсом. На этапе тестирования на работоспособность проверяют, как функционирует Web -сайт, используя те же условия, при которых с ним будет работать пользователь. Проверяется работоспособность Web -сайта в различных браузерах Для тестирования на удобство пользования интерфейсом крупные компании приглашают специальные группы людей.

Слайд 17

Публикация В завершение готовый Web -сайт необходимо опубликовать на Web -сервере, чтобы он был доступен через Internet . Существуют два способа размещения сайта: На бесплатных web серверах. Например www.narod.ru . На web серверах провайдеров за деньги. В зависимости от уровня домена плата меняется.

Слайд 18

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

Слайд 19

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

Слайд 20

Навигационная схема Web -сайта Web -сайт состоит из связанных между собой гипертекстовых документов. Гипертекст – это способ хранения и манипулирования информации, позволяющий устанавливать связи между любыми “информационными единицами”. Связь между информационными единицами осуществляется по гиперссылкам. Гиперссылка - это выделенный фрагмент текста, с помощью которого осуществляется переход от одного документа к другому. Обычно гиперссылки выделяют синим цветом и подчеркиванием. Навигационная схема Web -сайта зависит от его структуры и определяет то, как пользователь будет по нему перемещаться и получать доступ к информации.

Слайд 21

Навигационная схема Web -сайта Существует несколько видов структурирования информационного материала на Web -сайте: Линейная структура - материал весь располагается последовательно Нелинейная структура

Слайд 22

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

Слайд 23

Навигационная схема Web -сайта Широкая неглубокая иерархия

Слайд 24

Как правильно регистрировать сайт? После публикации сайта, для повышения посещаемости необходимо заняться раскруткой сайта - увеличением ежедневного количества посетителей. Есть несколько способов достижения этого: регистрация в поисковых системах, баннерообменные сети, упоминание сайта в web-обозрении, печатная реклама в газетах и журналах, оповещение о появлении сайта в соответствующей эхо-конференции, обмен ссылками с родственными сайтами, упоминание адреса сайта в переписке и др.

Слайд 25

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

Слайд 26

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

Слайд 27

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

Слайд 28

Описание сайта Описание должно быть лаконичным и емким, чтобы было понятно с первого взгляда. При составлении описания не нужно указывать название сайта, оно и так будет проиндексировано. Необходимо избегать общих фраз типа: "Здесь Вам будет интересно", "На этом сайте есть все", "Заходи, не пожалеешь!" и т.п. Описание должно соответствовать содержанию сайта, посетитель сам разберется, нужно ли ему идти на сайт.

Слайд 29

Подготовка к регистрации Пример описания: Название сайта: Web-studio "Cherry" URL сайта: http://www.cherry.spb.ru/ Описание сайта: Дизайн и изготовление web-сайтов, их поддержка и раскрутка в сети. Статьи и ссылки по web-дизайну, полезные рекомендации. Ключевые слова: дизайн, design, web-design, веб-дизайн, web-мастеринг, web, веб, www, поддержка, раскрутка, реклама, баннер, баннерик, кнопка, оптимизация, статьи по веб-дизайну, ссылки по web-дизайну, gif, jpg, HTML. Контактное лицо: Андрей Иванов E-mail регистрации: cherry@mail.ru

Слайд 30

Основы HTML HyperText Markup Language (HTML) -- язык разметки гипертекста -- предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Гипертекстовый документ -- это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера.

Слайд 31

Таговая модель документа HTML-документ содержит: собственно текст, т. е. данные, составляющие содержимое документа. теги (markup tags), называемые также флагами разметки , -- специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом.

Слайд 32

Таговая модель документа Для файлов, содержащие HTML-документы, приняты расширения .htm или .html. Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами и состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега: Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Синтаксис закрывающего тега: <имя_тега [атрибуты]>

Слайд 33

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

Слайд 34

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

Слайд 35

Структура документа HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:

Слайд 36

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

Слайд 37

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

Слайд 38

Основные средства форматирования текста Как и в Word, основой структуры текста в HTML является абзац. Для выделения абзаца служит таг

, закрывать который не обязательно. В таге

можно указать способ выравнивания текста абзаца в виде: Для выравнивания текста абзаца по левому краю, правому краю, по центру или по ширине следует использовать, соответственно, опции LEFT, RIGHT, CENTER, JUSTIFY

Слайд 39

Гиперссылки Для создания гиперссылки служит таг вида: URL может быть как абсолютным, так и относительным. URL, ссылающийся на закладку в текущем документе, имеет вид #имя_закладки, а для того, чтобы создать закладку, достаточно поместить нужное слово или фразу в таг текст. текст ссылки Если опция TARGET не указана, документ открывается в текущем окне браузера, а если указана в виде TARGET="_BLANK">, в новом окне. Текст ссылки внутри тага может быть любым. Точно так же в таг можно поместить и изображение.

Слайд 40

Работа с рисунками Браузеры поддерживают рисунки в форматах GIF и JPG. Ссылка на рисунок оформляется тагом следующего вида: Закрывать этот таг не нужно. Опция SRC содержит абсолютный или относительный URL рисунка, если рисунок не найден, на его месте выведется пустая рамка.

Слайд 41

Работа с рисунками Опции WIDTH и HEIGHT определяют ширину и высоту рисунка в пикселах (точках). Значение опции BORDER также указывается в пикселах и определяет ширину рамки вокруг рисунка. Если рамка не нужна, значением этой опции следует сделать 0. Опция ALIGN определяет размещение рисунка относительно текста, единственные понимаемые всеми браузерами значения — LEFT (слева) и RIGHT (справа).

Слайд 42

Работа с рисунками Опции HSPACE и VSPACE, указываемые в пикселах, определяют размер свободного места вокруг рисунка по горизонтали и вертикали. Текст, переданный в опции ALT, выводится вместо рисунка, если в браузере отключен вывод рисунков или они не успели загрузиться, а также показывается в качестве подсказки при наведении "мышки" на рисунок. Обычно этот текст содержит название рисунка.

Слайд 43

Внутренние ссылки Внутренние ссылки применяются для лучшего чтения большого документа, если он имеет оглавление со ссылками на соответствующие разделы. Для построения внутренней ссылки нужно: Этап 1. Создать указатель, определяющий место назначения. Например, если создать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга . При этом параметр href не используется, и браузер не выделяет содержимое тэга . Например:

Слайд 44

Внутренние ссылки Этап 2. Создание ссылки на указатель Вместо указания в параметре href адреса документа, необходимо поместить имя ссылки с префиксом #, говорящем о том, что это внутренняя ссылка. Глава 5

Слайд 45

Фоновые изображения Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Для задания цвета фона употребляется параметр bgcolor тэга , а фоновое изображение включается в документ при помощи параметра background. Фоновое изображение для HTML-документа всегда заполняет всё окно просмотра. Пример записи тэга с указанием фонового цвета и фонового изображения:

Слайд 46

Задание Создать веб – сайт “Прогулка по Большой Покровке” в текстовом редакторе блокнот. Сайт состоит из 4 страниц, название страниц и структура сайта показана ниже: Index.html 1.html 2 .html 3 .html

Слайд 47

Задание - c траница Index.html

Начало прогулки - площадь Горького

вперед