Презентация Введение в технологию создания Web-сайтов онлайн

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

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

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

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

Содержание слайда: Классификация 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>. Он должен всегда открывать ваш документ, так же, как тег </HTML> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать. 

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

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

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

Содержание слайда: Основные средства форматирования текста Как и в Word, основой структуры текста в HTML является абзац. Для выделения абзаца служит таг <P>, закрывать который не обязательно. В таге <P> можно указать способ выравнивания текста абзаца в виде: Для выравнивания текста абзаца по левому краю, правому краю, по центру или по ширине следует использовать, соответственно, опции LEFT, RIGHT, CENTER, JUSTIFY

Содержание слайда: Гиперссылки Для создания гиперссылки служит таг вида: URL может быть как абсолютным, так и относительным. URL, ссылающийся на закладку в текущем документе, имеет вид #имя_закладки, а для того, чтобы создать закладку, достаточно поместить нужное слово или фразу в таг <A NAME="имя_закладки">текст</A>.

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

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

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

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

Содержание слайда: Внутренние ссылки Этап 2. Создание ссылки на указатель Вместо указания в параметре href адреса документа, необходимо поместить имя ссылки с префиксом #, говорящем о том, что это внутренняя ссылка. <A name="#chapter_5">Глава 5</A>

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

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

Содержание слайда: Задание - cтраница Index.html