Введение в технологию создания Web-сайтов
презентация к уроку по информатике и икт (8 класс) на тему
Скачать:
Вложение | Размер |
---|---|
![]() | 1.1 МБ |
Предварительный просмотр:
Подписи к слайдам:
Содержание Введение Классификация Web -сайтов Этапы разработки Web -сайта Навигационная схема Web -сайта Как правильно регистрировать сайт? Основы HTML Таговая модель документа Структура документа Вставка рисунка
Введение Интернет и WWW прочно вошли в нашу жизнь, и нам уже трудно представить свою деятельность без них. WWW – это огромный набор гипертекстовых документов, которые благодаря Интернет доступны в любой точке мира. Создание Web - сайтов является одной из важнейших технологий разработки ресурсов Интернет. Хороший сайт, вбирая в себя всю полезную информацию, является лучшей визитной карточкой образовательного учреждения.
Понятие web сайта Информация, доступная пользователям Internet , располагается на Web -серверах. Информация организованна в виде Web -сайтов. Web -сайт - это информационный ресурс, состоящий из связанных между собой гипертекстовых документов ( Web -страниц), размещенный на Web -сервере и имеющий индивидуальный адрес Web сайт Страница 1 Страница 2 текст графика, видео, аудио текст графика, видео, аудио
Классификация Web -сайтов Личные страницы - содержат информацию об авторе, его интересах. Информационные сайты - сайты учебных заведений, сообществ по интересам, фирм и др. Виртуальные магазины – предназначены для продажи товаров через Интернет. Информационно-развлекательные сайты – содержит викторины, тесты, игры и тд. Интернет-журнал - информационный ресурс с большим количеством периодически обновляемых статей на одну тематику.
Навигационная схема Web -сайта Главными задачами при разработке Web -сайта являются четкая организация структуры сайта и определение его информационного наполнения. Выделяют следующие этапы разработки Web -сайта: Планирование Реализация Тестирование Публикация Рекламирование Сопровождение
Планирование На стадии планирования определяется следующее: цели создания Web -сайта - какие задачи он должен выполнять и на какую аудиторию он рассчитан? Какая информация будет представлена и в каком порядке. Определить кол-во страниц Определить название сайта
Планирование На первую страницу, как правило, размещается информация о самом сайте, для чего он предназначен и какая информация размещается на нем.
Планирование На остальных страницах необходимо разместить информацию в порядке определяемый различными критериями, например привлекательности.
Планирование Определить навигацию по сайту – простота и удобство навигации является одним из важных факторов, определяющих посещаемость Web -сайта особенности оформления - определяется структура каждой страницы и разрабатывается графика. Определить навигацию по сайту Определить шаблон страниц сайта
Планирование - Маркетинговый анализ В итоге на этом этапе необходимо: Представлять потенциальных посетителей сайта, их возможности, пол, возраст, предпочтения, вкусы, уровень компьютерной грамотности. Практически всегда пользователи являются достаточно разнообразной аудиторией, которую следует разделить на условные группы и выделить из них самые главные. Прогнозирование количественных оценок посещаемости сайта Исходя из имеющихся данных маркетинговых исследований, а так же по частоте появления целевых поисковых фраз.
Планирование - Маркетинговый анализ Анализ сайтов-конкурентов для выявления у них минусов и недоработок, которые помогут создать лучший сайт, найти успешные решения У конкурентных сайтов анализируются такие параметры как: дизайн, цветовое решение, навигация, качество иллюстраций, информационное наполнение. А также скорость загрузки, наличие подписки на новости, поиск, системы бонусов.
Реализация На этом этапе проводится подготовка текстового и графического материала (печать, сканирование). Материал разбивается по файлам в соответствии со структурой. Организуются ссылки между файлами сайта. Рекомендуется создать шаблон-заготовку страницы с основными структурными областями и стилевым оформлением и использовать ее для создания всех страниц узла.
Реализация Можно менять в каждой новой странице только содержимое и адресацию ссылок, такая организация работы сократит время, потраченное на каждую из них. Необходимо обеспечить, чтобы посетитель попавший на любую страницу сайта мог легко сориентироваться – и важно в этом случае показать ему, что она является частью целого сайта, дать ему возможность перейти по ссылке на главную страницу и просмотреть остальные разделы.
Реализация При создании Web -страниц необходимо учитывать, что разработанный Вами Web -сайт может выглядеть на компьютерах разных пользователей по-разному. Это зависит от многих параметров – типа браузера клиента, установок операционной системы, аппаратных ресурсов компьютера и т.п. Создание сайта, разработка структуры, размещение материала возможно: В текстовом редакторе (например блокнот) - в ручную С помощью различных средств разработки ( FrontPage, Publisher ) - автоматически
Тестирование Тестирование состоит из двух этапов: тестирование на работоспособность тестирование на удобство пользования интерфейсом. На этапе тестирования на работоспособность проверяют, как функционирует Web -сайт, используя те же условия, при которых с ним будет работать пользователь. Проверяется работоспособность Web -сайта в различных браузерах Для тестирования на удобство пользования интерфейсом крупные компании приглашают специальные группы людей.
Публикация В завершение готовый Web -сайт необходимо опубликовать на Web -сервере, чтобы он был доступен через Internet . Существуют два способа размещения сайта: На бесплатных web серверах. Например www.narod.ru . На web серверах провайдеров за деньги. В зависимости от уровня домена плата меняется.
Рекламирование Существует множество приемов рекламирования сайта: размещение информации на поисковом Web -сайте организация взаимных ссылок с другими сайтами и т.д. Чтобы сайт пользовался популярностью необходимо, чтобы содержимое Web -сайта – была достоверна и полна. Информация должна быть представлена таким образом, чтобы пользователь, однажды посетивший Web -сайт, еще ни раз обратился к нему.
Сопровождение Содержимое Web -сайта может подвергаться неоднократным изменениям. Важно, чтобы предоставляемая на Web -сайте информация всегда была актуальной, поэтому необходимо как можно чаще обновлять информацию на Web -сайте. Обязательное правило . Web -сайт должен обновляться не реже одного раза в месяц. В противном случае вы потеряете не только потенциальных, но и уже состоявшихся посетителей.
Навигационная схема Web -сайта Web -сайт состоит из связанных между собой гипертекстовых документов. Гипертекст – это способ хранения и манипулирования информации, позволяющий устанавливать связи между любыми “информационными единицами”. Связь между информационными единицами осуществляется по гиперссылкам. Гиперссылка - это выделенный фрагмент текста, с помощью которого осуществляется переход от одного документа к другому. Обычно гиперссылки выделяют синим цветом и подчеркиванием. Навигационная схема Web -сайта зависит от его структуры и определяет то, как пользователь будет по нему перемещаться и получать доступ к информации.
Навигационная схема Web -сайта Существует несколько видов структурирования информационного материала на Web -сайте: Линейная структура - материал весь располагается последовательно Нелинейная структура
Навигационная схема Web -сайта Иерархическая структура - сначала создаются категории высшего уровня, затем материал в логическом порядке размещают в категории, которые находятся ниже. Иерархические структуры бывают двух видов: узкая глубокая и широкая неглубокая. Узкая глубокая иерархия - характеризуется тем, что на верхнем уровне она имеет мало категорий. Для получения нужной информации пользователь вынужден переходить на несколько уровней вниз.
Навигационная схема Web -сайта Широкая неглубокая иерархия
Как правильно регистрировать сайт? После публикации сайта, для повышения посещаемости необходимо заняться раскруткой сайта - увеличением ежедневного количества посетителей. Есть несколько способов достижения этого: регистрация в поисковых системах, баннерообменные сети, упоминание сайта в web-обозрении, печатная реклама в газетах и журналах, оповещение о появлении сайта в соответствующей эхо-конференции, обмен ссылками с родственными сайтами, упоминание адреса сайта в переписке и др.
Как правильно регистрировать сайт? Самый эффективным способ раскрутки - регистрация в поисковых системах и каталогах. Как правильно зарегистрироваться? «Правильная" регистрация обозначает, что в ответ на запрос по теме сайта, получен список ссылок, в которых наш сайт находится одним из первых. Поисковая система - это очень большая база данных, которая хранит в себе полные тексты всех зарегистрированных сайтов. Необходимым компонентом поисковых систем являются роботы. Для регистрации, мы должны сообщить роботу адрес нашего сайта.
Как правильно регистрировать сайт? Интернет-каталоги - списки ресурсов, распределенные по категориям. Основное отличие их от поисковых систем заклю-чается в том, что все запросы просматриваются людьми, которые оцени-вают ценность сайта, выбирают для него кате-горию в каталоге и корректируют предо-ставленное описание ваше-го сайта.
Ключевые слова Правильный выбор ключевых слов позволяет сильно повысить позицию сайта при запросах. Какие же слова следует подбирать? В качестве ключевых слов необходимо выбирать те, что наиболее верно отражают специфику сайта. При этом нужно избегать лишних и общих фраз. Нужно подобрать порядка 20-30 ключевых слов. Провести тестирование выбранных слов, набрав в поисковой системе. Список, каких сайтов возвращается? Связаны ли они с тематикой сайта?
Описание сайта Описание должно быть лаконичным и емким, чтобы было понятно с первого взгляда. При составлении описания не нужно указывать название сайта, оно и так будет проиндексировано. Необходимо избегать общих фраз типа: "Здесь Вам будет интересно", "На этом сайте есть все", "Заходи, не пожалеешь!" и т.п. Описание должно соответствовать содержанию сайта, посетитель сам разберется, нужно ли ему идти на сайт.
Подготовка к регистрации Пример описания: Название сайта: 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
Основы HTML HyperText Markup Language (HTML) -- язык разметки гипертекста -- предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Гипертекстовый документ -- это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера.
Таговая модель документа HTML-документ содержит: собственно текст, т. е. данные, составляющие содержимое документа. теги (markup tags), называемые также флагами разметки , -- специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом.
Таговая модель документа Для файлов, содержащие HTML-документы, приняты расширения .htm или .html. Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами и состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега: Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Синтаксис закрывающего тега: <имя_тега [атрибуты]>
Таговая модель документа Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Пара, состоящая из открывающего и закрывающего тегов, называют контейнером , а часть текста, окаймленную открывающим и закрывающим тегом, -- элементом.
Структура документа Самым главным из тегов HTML является одноименный тег -- . Он должен всегда открывать ваш документ, так же, как тег должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
Структура документа HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:
Структура документа Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа). Заголовок документа открывается тегом
Структура документа В заголовок документа включают парный тег
Основные средства форматирования текста Как и в Word, основой структуры текста в HTML является абзац. Для выделения абзаца служит таг
, закрывать который не обязательно. В таге
можно указать способ выравнивания текста абзаца в виде: Для выравнивания текста абзаца по левому краю, правому краю, по центру или по ширине следует использовать, соответственно, опции LEFT, RIGHT, CENTER, JUSTIFY
Гиперссылки Для создания гиперссылки служит таг вида: URL может быть как абсолютным, так и относительным. URL, ссылающийся на закладку в текущем документе, имеет вид #имя_закладки, а для того, чтобы создать закладку, достаточно поместить нужное слово или фразу в таг текст. текст ссылки Если опция TARGET не указана, документ открывается в текущем окне браузера, а если указана в виде TARGET="_BLANK">, в новом окне. Текст ссылки внутри тага может быть любым. Точно так же в таг можно поместить и изображение.
Внутренние ссылки Внутренние ссылки применяются для лучшего чтения большого документа, если он имеет оглавление со ссылками на соответствующие разделы. Для построения внутренней ссылки нужно: Этап 1. Создать указатель, определяющий место назначения. Например, если создать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга . При этом параметр href не используется, и браузер не выделяет содержимое тэга . Например:
Внутренние ссылки Этап 2. Создание ссылки на указатель Вместо указания в параметре href адреса документа, необходимо поместить имя ссылки с префиксом #, говорящем о том, что это внутренняя ссылка. Глава 5
Фоновые изображения Разработчики Web-страниц могут управлять цветом фона документа, а также указывать изображения, используемые в качестве фонового. Для задания цвета фона употребляется параметр bgcolor тэга , а фоновое изображение включается в документ при помощи параметра background. Фоновое изображение для HTML-документа всегда заполняет всё окно просмотра. Пример записи тэга с указанием фонового цвета и фонового изображения:
Задание Создать веб – сайт “Прогулка по Большой Покровке” в текстовом редакторе блокнот. Сайт состоит из 4 страниц, название страниц и структура сайта показана ниже: Index.html 1.html 2 .html 3 .html
Задание - c траница Index.html
Начало прогулки - площадь Горького
По теме: методические разработки, презентации и конспекты
Технологии создания Web-сайта
«Технологии создания Web-сайтов». Этот элективный курс даёт возможность учащимся самим создавать продукты, которые можно применять в сети Интернет. Знание Интернет - технологий становит...
Рабочая программа проектной деятельности по информатике "Технологии создания Web-сайтов" (10 класс) на 2012-2013 уч. год
В последнее время особенно стремительно во всём мире идет процесс информатизации, и все больший вес приобретают науки, связанные с общением, информационными и коммуникационными процессами. Этот курс а...

Рабочая программа «Технология создания web - сайтов»
Учебный курс «Технологии создания web - сайтов» является предметом по выбору для учащихся 8 класса. На изучение курса отводится 35 часов.Данный элективный курс связан, прежде всего, с удовлетвор...

Программа элективного курса по информатике в 11-x классах (профильный уровень) "Технология создания школьного сайта"
Элективный курс по информатике в 11-x классах (профильный уровень) "Технология создания школьного сайта" рассчитан на 134 часа, которые проводятся в течение года по 4 часа в неделю.Курс включает в себ...

Рабочая программа элективного курса "Технологии создания WEB-сайтов"
Программа элективного курса для 11 классов...

Презентация к теме Технология создания сайта. Инструменты для создания сайта
Рассматриваются основные базовые технологии (HTML, CSS и JavaScript), а также наиболее популярные у пользователей программы для создания сайтов...

Программа элективного предмета по информатике "Технология создания Web-сайтов"
Данная программа предназначена для обучающихся 11-х классов...