Презентация на тему "Введение в технологию создания web-сайтов" 8 класс

Презентация: Введение в технологию создания web-сайтов
Включить эффекты
1 из 47
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
0.0
0 оценок

Комментарии

Нет комментариев для данной презентации

Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.


Добавить свой комментарий

Аннотация к презентации

Скачать презентацию (0.83 Мб). Тема: "Введение в технологию создания web-сайтов". Предмет: информатика. 47 слайдов. Для учеников 8 класса. Добавлена в 2021 году.

  • Формат
    pptx (powerpoint)
  • Количество слайдов
    47
  • Аудитория
    8 класс
  • Слова
    информатика
  • Конспект
    Отсутствует

Содержание

  • Презентация: Введение в технологию создания web-сайтов
    Слайд 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-сайте: Линейная структура - материал весь располагается последовательно Нелинейная структура

  • Слайд 22

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

  • Слайд 23

    Широкая неглубокая иерархия

  • Слайд 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

    Прогулка по Большой Покровке

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

    вперед

Посмотреть все слайды

Сообщить об ошибке